fix(floating-panel): delegate dir prop to all parts (#2874)

* Initial plan

* fix(floating-panel): delegate dir prop to all parts

Co-authored-by: segunadebayo <[email protected]>

* chore: add changeset for floating-panel dir prop fix

Co-authored-by: segunadebayo <[email protected]>

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: segunadebayo <[email protected]>

Author: Copilot

.changeset/floating-panel-dir-prop.md

@@ -0,0 +1,5 @@
+---
+"@zag-js/floating-panel": patch
+---
+
+Fix issue where `dir` prop is ignored. The `dir` attribute is now properly delegated to all floating panel parts.

packages/docs/data/api.json

@@ -1333,6 +1333,14 @@
         "type": "boolean",
         "description": "Whether the date picker is open"
       },
+      "disabled": {
+        "type": "boolean",
+        "description": "Whether the date picker is disabled"
+      },
+      "invalid": {
+        "type": "boolean",
+        "description": "Whether the date picker is invalid"
+      },
       "inline": {
         "type": "boolean",
         "description": "Whether the date picker is rendered inline"
@@ -1509,6 +1517,14 @@
         "type": "boolean",
         "description": "Whether the calendar is read-only."
       },
+      "required": {
+        "type": "boolean",
+        "description": "Whether the date picker is required"
+      },
+      "invalid": {
+        "type": "boolean",
+        "description": "Whether the date picker is invalid"
+      },
       "outsideDaySelectable": {
         "type": "boolean",
         "description": "Whether day outside the visible range can be selected.",
@@ -3027,6 +3043,10 @@
       "orientation": {
         "type": "Orientation",
         "description": "The orientation of the menu"
+      },
+      "reposition": {
+        "type": "VoidFunction",
+        "description": "Function to reposition the viewport"
       }
     },
     "context": {
@@ -4671,6 +4691,10 @@
         "type": "boolean",
         "description": "Whether the splitter is currently being resized."
       },
+      "orientation": {
+        "type": "\"horizontal\" | \"vertical\"",
+        "description": "The orientation of the splitter."
+      },
       "getSizes": {
         "type": "() => number[]",
         "description": "Returns the current sizes of the panels."
@@ -4683,6 +4707,14 @@
         "type": "() => SplitterItem[]",
         "description": "Returns the items of the splitter."
       },
+      "getPanels": {
+        "type": "() => PanelData[]",
+        "description": "Returns the panels of the splitter."
+      },
+      "getPanelById": {
+        "type": "(id: string) => PanelData",
+        "description": "Returns the panel with the specified id."
+      },
       "getPanelSize": {
         "type": "(id: string) => number",
         "description": "Returns the size of the specified panel."
@@ -4714,6 +4746,10 @@
       "resetSizes": {
         "type": "VoidFunction",
         "description": "Resets the splitter to its initial state."
+      },
+      "getResizeTriggerState": {
+        "type": "(props: ResizeTriggerProps) => ResizeTriggerState",
+        "description": "Returns the state of the resize trigger."
       }
     },
     "context": {

packages/docs/data/css-vars.json

@@ -8,13 +8,6 @@
       "--marker-value": "The marker value value for the Marker"
     }
   },
-  "carousel": {
-    "Root": {
-      "--slides-per-page": "The number of slides visible per page",
-      "--slide-spacing": "The spacing between slides",
-      "--slide-item-size": "The calculated size of each slide item"
-    }
-  },
   "bottom-sheet": {
     "Content": {
       "--bottom-sheet-translate": "The bottom sheet translate value for the Content",
@@ -25,6 +18,13 @@
       "--layer-index": "The index of the dismissable in the layer stack"
     }
   },
+  "carousel": {
+    "Root": {
+      "--slides-per-page": "The number of slides visible per page",
+      "--slide-spacing": "The spacing between slides",
+      "--slide-item-size": "The calculated size of each slide item"
+    }
+  },
   "collapsible": {
     "Content": {
       "--height": "The height of the element",
@@ -144,13 +144,6 @@
       "--layer-index": "The index of the dismissable in the layer stack"
     }
   },
-  "qr-code": {
-    "Root": {
-      "--qrcode-pixel-size": "The size of the Root",
-      "--qrcode-width": "The width of the Root",
-      "--qrcode-height": "The height of the Root"
-    }
-  },
   "progress": {
     "Root": {
       "--percent": "The percent value for the root",
@@ -159,6 +152,13 @@
       "--offset": "The offset position of the element"
     }
   },
+  "qr-code": {
+    "Root": {
+      "--qrcode-pixel-size": "The size of the Root",
+      "--qrcode-width": "The width of the Root",
+      "--qrcode-height": "The height of the Root"
+    }
+  },
   "radio-group": {
     "Indicator": {
       "--transition-property": "The transition property value for the Indicator",

packages/docs/data/data-attr.json

@@ -620,7 +620,8 @@
       "data-scope": "date-picker",
       "data-part": "input",
       "data-index": "The index of the item",
-      "data-state": "\"open\" | \"closed\""
+      "data-state": "\"open\" | \"closed\"",
+      "data-invalid": "Present when invalid"
     }
   },
   "dialog": {
@@ -1035,11 +1036,6 @@
       "data-orientation": "The orientation of the item",
       "data-disabled": "Present when disabled"
     },
-    "IndicatorTrack": {
-      "data-scope": "navigation-menu",
-      "data-part": "indicator-track",
-      "data-orientation": "The orientation of the indicatortrack"
-    },
     "Indicator": {
       "data-scope": "navigation-menu",
       "data-part": "indicator",
@@ -1090,6 +1086,13 @@
       "data-state": "\"open\" | \"closed\"",
       "data-orientation": "The orientation of the viewport",
       "data-align": ""
+    },
+    "ItemIndicator": {
+      "data-scope": "navigation-menu",
+      "data-part": "item-indicator",
+      "data-state": "\"open\" | \"closed\"",
+      "data-orientation": "The orientation of the item",
+      "data-value": "The value of the item"
     }
   },
   "number-input": {
@@ -1600,12 +1603,14 @@
     "Root": {
       "data-scope": "splitter",
       "data-part": "root",
-      "data-orientation": "The orientation of the splitter"
+      "data-orientation": "The orientation of the splitter",
+      "data-dragging": "Present when in the dragging state"
     },
     "Panel": {
       "data-scope": "splitter",
       "data-part": "panel",
       "data-orientation": "The orientation of the panel",
+      "data-dragging": "Present when in the dragging state",
       "data-id": "",
       "data-index": "The index of the item"
     },
@@ -1615,6 +1620,7 @@
       "data-id": "",
       "data-orientation": "The orientation of the resizetrigger",
       "data-focus": "Present when focused",
+      "data-dragging": "Present when in the dragging state",
       "data-disabled": "Present when disabled"
     }
   },

packages/machines/floating-panel/src/floating-panel.connect.ts

@@ -61,6 +61,7 @@ export function connect<T extends PropTypes>(
     getTriggerProps() {
       return normalize.button({
         ...parts.trigger.attrs,
+        dir: prop("dir"),
         type: "button",
         disabled: prop("disabled"),
         id: dom.getTriggerId(scope),
@@ -79,6 +80,7 @@ export function connect<T extends PropTypes>(
     getPositionerProps() {
       return normalize.element({
         ...parts.positioner.attrs,
+        dir: prop("dir"),
         id: dom.getPositionerId(scope),
         style: {
           "--width": toPx(size?.width),
@@ -95,6 +97,7 @@ export function connect<T extends PropTypes>(
     getContentProps() {
       return normalize.element({
         ...parts.content.attrs,
+        dir: prop("dir"),
         role: "dialog",
         tabIndex: 0,
         hidden: !open,
@@ -152,6 +155,7 @@ export function connect<T extends PropTypes>(
     getCloseTriggerProps() {
       return normalize.button({
         ...parts.closeTrigger.attrs,
+        dir: prop("dir"),
         disabled: prop("disabled"),
         "aria-label": "Close Window",
         type: "button",
@@ -186,6 +190,7 @@ export function connect<T extends PropTypes>(
 
       return normalize.button({
         ...parts.stageTrigger.attrs,
+        dir: prop("dir"),
         disabled: prop("disabled"),
         ...actionProps,
         type: "button",
@@ -205,6 +210,7 @@ export function connect<T extends PropTypes>(
     getResizeTriggerProps(props: ResizeTriggerProps) {
       return normalize.element({
         ...parts.resizeTrigger.attrs,
+        dir: prop("dir"),
         "data-disabled": dataAttr(!canResize),
         "data-axis": props.axis,
         onPointerDown(event) {
@@ -238,6 +244,7 @@ export function connect<T extends PropTypes>(
     getDragTriggerProps() {
       return normalize.element({
         ...parts.dragTrigger.attrs,
+        dir: prop("dir"),
         "data-disabled": dataAttr(!canDrag),
         onPointerDown(event) {
           if (!canDrag) return
@@ -281,6 +288,7 @@ export function connect<T extends PropTypes>(
     getControlProps() {
       return normalize.element({
         ...parts.control.attrs,
+        dir: prop("dir"),
         "data-disabled": dataAttr(prop("disabled")),
         "data-stage": context.get("stage"),
         "data-minimized": dataAttr(isMinimized),
@@ -292,13 +300,15 @@ export function connect<T extends PropTypes>(
     getTitleProps() {
       return normalize.element({
         ...parts.title.attrs,
+        dir: prop("dir"),
         id: dom.getTitleId(scope),
       })
     },
 
     getHeaderProps() {
       return normalize.element({
         ...parts.header.attrs,
+        dir: prop("dir"),
         id: dom.getHeaderId(scope),
         "data-dragging": dataAttr(dragging),
         "data-topmost": dataAttr(isTopmost),
@@ -312,6 +322,7 @@ export function connect<T extends PropTypes>(
     getBodyProps() {
       return normalize.element({
         ...parts.body.attrs,
+        dir: prop("dir"),
         "data-dragging": dataAttr(dragging),
         "data-minimized": dataAttr(isMinimized),
         "data-maximized": dataAttr(isMaximized),