chore: ensure consistent dir attribute

chakra-ui · Oct 18, 2023 · 041a9e0 · 041a9e0 · vercel · Oct 18, 2023
1 parent b438256
commit 041a9e0
Show file tree

Hide file tree

Showing 27 changed files with 137 additions and 85 deletions.
diff --git a/.changeset/new-moons-double.md b/.changeset/new-moons-double.md
@@ -0,0 +1,28 @@
+---
+"@zag-js/color-picker": patch
+"@zag-js/number-input": patch
+"@zag-js/date-picker": patch
+"@zag-js/file-upload": patch
+"@zag-js/radio-group": patch
+"@zag-js/hover-card": patch
+"@zag-js/pagination": patch
+"@zag-js/tags-input": patch
+"@zag-js/accordion": patch
+"@zag-js/pin-input": patch
+"@zag-js/carousel": patch
+"@zag-js/checkbox": patch
+"@zag-js/editable": patch
+"@zag-js/splitter": patch
+"@zag-js/popover": patch
+"@zag-js/tooltip": patch
+"@zag-js/avatar": patch
+"@zag-js/dialog": patch
+"@zag-js/select": patch
+"@zag-js/slider": patch
+"@zag-js/switch": patch
+"@zag-js/toast": patch
+"@zag-js/menu": patch
+"@zag-js/tabs": patch
+---
+
+Fix issue where `dir` attribute was not applied to all element parts
diff --git a/packages/machines/accordion/src/accordion.connect.ts b/packages/machines/accordion/src/accordion.connect.ts
@@ -34,6 +34,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
     rootProps: normalize.element({
       ...parts.root.attrs,
+      dir: state.context.dir,
       id: dom.getRootId(state.context),
       "data-orientation": state.context.orientation,
     }),
@@ -71,6 +72,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       const itemState = getItemState(props)
       return normalize.element({
         ...parts.itemIndicator.attrs,
+        dir: state.context.dir,
         "aria-hidden": true,
         "data-state": itemState.isOpen ? "open" : "closed",
         "data-disabled": dataAttr(itemState.isDisabled),
@@ -86,6 +88,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       return normalize.button({
         ...parts.itemTrigger.attrs,
         type: "button",
+        dir: state.context.dir,
         id: dom.getItemTriggerId(state.context, value),
         "aria-controls": dom.getItemContentId(state.context, value),
         "aria-expanded": itemState.isOpen,

diff --git a/packages/machines/avatar/src/avatar.connect.ts b/packages/machines/avatar/src/avatar.connect.ts
@@ -24,6 +24,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
     rootProps: normalize.element({
       ...parts.root.attrs,
+      dir: state.context.dir,
       id: dom.getRootId(state.context),
       style: {
         display: "grid",
@@ -34,6 +35,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
     imageProps: normalize.img({
       ...parts.image.attrs,
+      dir: state.context.dir,
       id: dom.getImageId(state.context),
       "data-state": isLoaded ? "visible" : "hidden",
       onLoad() {
@@ -50,6 +52,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
     fallbackProps: normalize.element({
       ...parts.fallback.attrs,
+      dir: state.context.dir,
       id: dom.getFallbackId(state.context),
       hidden: !showFallback,
       "data-state": isLoaded ? "hidden" : "visible",

diff --git a/packages/machines/avatar/src/avatar.types.ts b/packages/machines/avatar/src/avatar.types.ts
@@ -1,5 +1,5 @@
 import type { StateMachine as S } from "@zag-js/core"
-import type { CommonProperties, Context, PropTypes, RequiredBy } from "@zag-js/types"
+import type { CommonProperties, Context, DirectionProperty, PropTypes, RequiredBy } from "@zag-js/types"
 
 /* -----------------------------------------------------------------------------
  * Callback details
@@ -13,7 +13,7 @@ export interface StatusChangeDetails {
  * Machine context
  * -----------------------------------------------------------------------------*/
 
-interface PublicContext extends CommonProperties {
+interface PublicContext extends CommonProperties, DirectionProperty {
   /**
    * Functional called when the image loading status changes.
    */

diff --git a/packages/machines/carousel/src/carousel.connect.ts b/packages/machines/carousel/src/carousel.connect.ts
@@ -100,13 +100,13 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       return normalize.element({
         ...parts.item.attrs,
         id: dom.getItemId(state.context, index),
+        dir: state.context.dir,
         "data-current": dataAttr(sliderState.isCurrent),
         "data-inview": dataAttr(sliderState.isInView),
         role: "group",
         "aria-roledescription": "slide",
         "data-orientation": state.context.orientation,
         "aria-label": sliderState.valueText,
-        dir: state.context.dir,
         style: {
           position: "relative",
           flex: "0 0 var(--slide-size)",

diff --git a/packages/machines/checkbox/src/checkbox.connect.ts b/packages/machines/checkbox/src/checkbox.connect.ts
@@ -87,6 +87,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
     indicatorProps: normalize.element({
       ...parts.indicator.attrs,
       ...dataAttrs,
+      dir: state.context.dir,
       hidden: !isIndeterminate && !state.context.checked,
     }),
 

diff --git a/packages/machines/color-picker/src/color-picker.connect.ts b/packages/machines/color-picker/src/color-picker.connect.ts
@@ -408,6 +408,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
       return normalize.input({
         ...parts.channelInput.attrs,
+        dir: state.context.dir,
         type: isTextField ? "text" : "number",
         "data-channel": channel,
         "aria-label": channel,
@@ -461,6 +462,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
     eyeDropperTriggerProps: normalize.button({
       ...parts.eyeDropperTrigger.attrs,
       type: "button",
+      dir: state.context.dir,
       disabled: isDisabled,
       "data-disabled": dataAttr(isDisabled),
       "aria-label": "Pick a color from the screen",
@@ -481,6 +483,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       return normalize.button({
         ...parts.swatchTrigger.attrs,
         disabled: isDisabled,
+        dir: state.context.dir,
         type: "button",
         "data-value": color.toString("hex"),
         onClick() {
@@ -499,6 +502,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       const color = colorValue.toFormat(value.getFormat())
       return normalize.element({
         ...parts.swatch.attrs,
+        dir: state.context.dir,
         "data-state": colorValue.isEqual(value) ? "selected" : "unselected",
         "data-value": color.toString("hex"),
         style: {

diff --git a/packages/machines/date-picker/src/date-picker.connect.ts b/packages/machines/date-picker/src/date-picker.connect.ts
@@ -261,6 +261,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
     rootProps: normalize.element({
       ...parts.root.attrs,
+      dir: state.context.dir,
       id: dom.getRootId(state.context),
       "data-state": isOpen ? "open" : "closed",
       "data-disabled": dataAttr(disabled),
@@ -269,6 +270,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
     labelProps: normalize.label({
       ...parts.label.attrs,
+      dir: state.context.dir,
       htmlFor: dom.getInputId(state.context),
       "data-state": isOpen ? "open" : "closed",
       "data-disabled": dataAttr(disabled),
@@ -277,17 +279,20 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
     controlProps: normalize.element({
       ...parts.control.attrs,
+      dir: state.context.dir,
       id: dom.getControlId(state.context),
       "data-disabled": dataAttr(disabled),
     }),
 
     rangeTextProps: normalize.element({
       ...parts.rangeText.attrs,
+      dir: state.context.dir,
     }),
 
     contentProps: normalize.element({
       ...parts.content.attrs,
       hidden: !isOpen,
+      dir: state.context.dir,
       "data-state": isOpen ? "open" : "closed",
       id: dom.getContentId(state.context),
       role: "application",
@@ -424,6 +429,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
         ...parts.tableCellTrigger.attrs,
         id: dom.getCellTriggerId(state.context, value.toString()),
         role: "button",
+        dir: state.context.dir,
         tabIndex: cellState.isFocused ? 0 : -1,
         "aria-label": cellState.ariaLabel,
         "aria-disabled": ariaAttr(!cellState.isSelectable),
@@ -458,6 +464,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       const cellState = getMonthTableCellState(props)
       return normalize.element({
         ...parts.tableCell.attrs,
+        dir: state.context.dir,
         colSpan: columns,
         role: "gridcell",
         "aria-selected": ariaAttr(cellState.isSelected),
@@ -471,6 +478,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       const cellState = getMonthTableCellState(props)
       return normalize.element({
         ...parts.tableCellTrigger.attrs,
+        dir: state.context.dir,
         role: "button",
         id: dom.getCellTriggerId(state.context, value.toString()),
         "data-selected": dataAttr(cellState.isSelected),
@@ -494,6 +502,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       const cellState = getYearTableCellState(props)
       return normalize.element({
         ...parts.tableCell.attrs,
+        dir: state.context.dir,
         colSpan: columns,
         role: "gridcell",
         "aria-selected": ariaAttr(cellState.isSelected),
@@ -507,6 +516,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       const cellState = getYearTableCellState(props)
       return normalize.element({
         ...parts.tableCellTrigger.attrs,
+        dir: state.context.dir,
         role: "button",
         id: dom.getCellTriggerId(state.context, value.toString()),
         "data-selected": dataAttr(cellState.isSelected),
@@ -528,6 +538,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       const { view = "day" } = props
       return normalize.button({
         ...parts.nextTrigger.attrs,
+        dir: state.context.dir,
         id: dom.getNextTriggerId(state.context, view),
         type: "button",
         "aria-label": getPrevTriggerLabel(view),
@@ -542,6 +553,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       const { view = "day" } = props
       return normalize.button({
         ...parts.prevTrigger.attrs,
+        dir: state.context.dir,
         id: dom.getPrevTriggerId(state.context, view),
         type: "button",
         "aria-label": getNextTriggerLabel(view),
@@ -555,6 +567,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
     clearTriggerProps: normalize.button({
       ...parts.clearTrigger.attrs,
       id: dom.getClearTriggerId(state.context),
+      dir: state.context.dir,
       type: "button",
       "aria-label": "Clear dates",
       hidden: !state.context.value.length,
@@ -566,6 +579,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
     triggerProps: normalize.button({
       ...parts.trigger.attrs,
       id: dom.getTriggerId(state.context),
+      dir: state.context.dir,
       type: "button",
       "aria-label": isOpen ? "Close calendar" : "Open calendar",
       "data-state": isOpen ? "open" : "closed",
@@ -582,6 +596,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       return normalize.button({
         ...parts.viewTrigger.attrs,
         "data-view": view,
+        dir: state.context.dir,
         id: dom.getViewTriggerId(state.context, view),
         type: "button",
         disabled,
@@ -598,6 +613,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       return normalize.element({
         ...parts.viewControl.attrs,
         "data-view": view,
+        dir: state.context.dir,
       })
     },
 

diff --git a/packages/machines/dialog/src/dialog.connect.ts b/packages/machines/dialog/src/dialog.connect.ts
@@ -19,6 +19,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
     triggerProps: normalize.button({
       ...parts.trigger.attrs,
+      dir: state.context.dir,
       id: dom.getTriggerId(state.context),
       "aria-haspopup": "dialog",
       type: "button",
@@ -32,13 +33,15 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
     backdropProps: normalize.element({
       ...parts.backdrop.attrs,
+      dir: state.context.dir,
       hidden: !isOpen,
       id: dom.getBackdropId(state.context),
       "data-state": isOpen ? "open" : "closed",
     }),
 
     positionerProps: normalize.element({
       ...parts.positioner.attrs,
+      dir: state.context.dir,
       hidden: !isOpen,
       id: dom.getPositionerId(state.context),
       "data-state": isOpen ? "open" : "closed",
@@ -49,6 +52,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
     contentProps: normalize.element({
       ...parts.content.attrs,
+      dir: state.context.dir,
       role: state.context.role,
       hidden: !isOpen,
       id: dom.getContentId(state.context),
@@ -62,16 +66,19 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
     titleProps: normalize.element({
       ...parts.title.attrs,
+      dir: state.context.dir,
       id: dom.getTitleId(state.context),
     }),
 
     descriptionProps: normalize.element({
       ...parts.description.attrs,
+      dir: state.context.dir,
       id: dom.getDescriptionId(state.context),
     }),
 
     closeTriggerProps: normalize.button({
       ...parts.closeTrigger.attrs,
+      dir: state.context.dir,
       id: dom.getCloseTriggerId(state.context),
       type: "button",
       onClick(event) {