refactor: add dir attribute to parts

chakra-ui · Sep 20, 2023 · 2509594 · 2509594 · vercel · Sep 20, 2023
1 parent adaf344
commit 2509594
Show file tree

Hide file tree

Showing 10 changed files with 57 additions and 1 deletion.
diff --git a/.changeset/flat-schools-appear.md b/.changeset/flat-schools-appear.md
@@ -0,0 +1,13 @@
+---
+"@zag-js/number-input": patch
+"@zag-js/range-slider": patch
+"@zag-js/rating-group": patch
+"@zag-js/radio-group": patch
+"@zag-js/accordion": patch
+"@zag-js/pin-input": patch
+"@zag-js/carousel": patch
+"@zag-js/checkbox": patch
+"@zag-js/slider": patch
+---
+
+Ensure `dir` context property is reflected in parts
diff --git a/packages/machines/accordion/src/accordion.connect.ts b/packages/machines/accordion/src/accordion.connect.ts
@@ -42,6 +42,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       const itemState = getItemState(props)
       return normalize.element({
         ...parts.item.attrs,
+        dir: state.context.dir,
         id: dom.getItemId(state.context, props.value),
         "data-state": itemState.isOpen ? "open" : "closed",
         "data-focus": dataAttr(itemState.isFocused),
@@ -54,6 +55,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       const itemState = getItemState(props)
       return normalize.element({
         ...parts.itemContent.attrs,
+        dir: state.context.dir,
         role: "region",
         id: dom.getItemContentId(state.context, props.value),
         "aria-labelledby": dom.getItemTriggerId(state.context, props.value),

diff --git a/packages/machines/carousel/src/carousel.connect.ts b/packages/machines/carousel/src/carousel.connect.ts
@@ -60,6 +60,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       role: "region",
       "aria-roledescription": "carousel",
       "data-orientation": state.context.orientation,
+      dir: state.context.dir,
       "aria-label": "Carousel",
       style: {
         "--slide-spacing": state.context.spacing,
@@ -69,6 +70,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
     viewportProps: normalize.element({
       ...parts.viewport.attrs,
+      dir: state.context.dir,
       id: dom.getViewportId(state.context),
       "data-orientation": state.context.orientation,
     }),
@@ -77,6 +79,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       ...parts.slideGroup.attrs,
       id: dom.getSlideGroupId(state.context),
       "data-orientation": state.context.orientation,
+      dir: state.context.dir,
       style: {
         display: "flex",
         flexDirection: isHorizontal ? "row" : "column",
@@ -103,6 +106,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
         "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)",
@@ -117,6 +121,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       type: "button",
       tabIndex: -1,
       disabled: !canScrollPrev,
+      dir: state.context.dir,
       "aria-label": "Previous Slide",
       "data-orientation": state.context.orientation,
       "aria-controls": dom.getSlideGroupId(state.context),
@@ -127,6 +132,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
     nextSlideTriggerProps: normalize.button({
       ...parts.nextSlideTrigger.attrs,
+      dir: state.context.dir,
       id: dom.getNextSliderTriggerId(state.context),
       type: "button",
       tabIndex: -1,
@@ -141,6 +147,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
     indicatorGroupProps: normalize.element({
       ...parts.indicatorGroup.attrs,
+      dir: state.context.dir,
       id: dom.getIndicatorGroupId(state.context),
       "data-orientation": state.context.orientation,
     }),
@@ -149,6 +156,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       const { index, readOnly } = props
       return normalize.button({
         ...parts.indicator.attrs,
+        dir: state.context.dir,
         id: dom.getIndicatorId(state.context, index),
         type: "button",
         "data-orientation": state.context.orientation,

diff --git a/packages/machines/checkbox/src/checkbox.connect.ts b/packages/machines/checkbox/src/checkbox.connect.ts
@@ -38,6 +38,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
     rootProps: normalize.label({
       ...parts.root.attrs,
       ...dataAttrs,
+      dir: state.context.dir,
       id: dom.getRootId(state.context),
       htmlFor: dom.getHiddenInputId(state.context),
       onPointerMove() {
@@ -71,12 +72,14 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
     labelProps: normalize.element({
       ...parts.label.attrs,
       ...dataAttrs,
+      dir: state.context.dir,
       id: dom.getLabelId(state.context),
     }),
 
     controlProps: normalize.element({
       ...parts.control.attrs,
       ...dataAttrs,
+      dir: state.context.dir,
       id: dom.getControlId(state.context),
       "aria-hidden": true,
     }),

diff --git a/packages/machines/number-input/src/number-input.connect.ts b/packages/machines/number-input/src/number-input.connect.ts
@@ -60,13 +60,15 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
     rootProps: normalize.element({
       id: dom.getRootId(state.context),
       ...parts.root.attrs,
+      dir: state.context.dir,
       "data-disabled": dataAttr(isDisabled),
       "data-focus": dataAttr(isFocused),
       "data-invalid": dataAttr(isInvalid),
     }),
 
     labelProps: normalize.label({
       ...parts.label.attrs,
+      dir: state.context.dir,
       "data-disabled": dataAttr(isDisabled),
       "data-focus": dataAttr(isFocused),
       "data-invalid": dataAttr(isInvalid),
@@ -76,6 +78,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
     controlProps: normalize.element({
       ...parts.control.attrs,
+      dir: state.context.dir,
       role: "group",
       "aria-disabled": isDisabled,
       "data-focus": dataAttr(isFocused),
@@ -86,6 +89,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
     inputProps: normalize.input({
       ...parts.input.attrs,
+      dir: state.context.dir,
       name: state.context.name,
       form: state.context.form,
       id: dom.getInputId(state.context),
@@ -153,6 +157,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
     decrementTriggerProps: normalize.button({
       ...parts.decrementTrigger.attrs,
+      dir: state.context.dir,
       id: dom.getDecrementTriggerId(state.context),
       disabled: isDecrementDisabled,
       "data-disabled": dataAttr(isDecrementDisabled),
@@ -176,6 +181,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
     incrementTriggerProps: normalize.button({
       ...parts.incrementTrigger.attrs,
+      dir: state.context.dir,
       id: dom.getIncrementTriggerId(state.context),
       disabled: isIncrementDisabled,
       "data-disabled": dataAttr(isIncrementDisabled),

diff --git a/packages/machines/pin-input/src/pin-input.connect.ts b/packages/machines/pin-input/src/pin-input.connect.ts
@@ -50,6 +50,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
     labelProps: normalize.label({
       ...parts.label.attrs,
+      dir: state.context.dir,
       htmlFor: dom.getHiddenInputId(state.context),
       id: dom.getLabelId(state.context),
       "data-invalid": dataAttr(isInvalid),
@@ -75,13 +76,15 @@ 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),
     }),
 
     getInputProps({ index }: { index: number }) {
       const inputType = state.context.type === "numeric" ? "tel" : "text"
       return normalize.input({
         ...parts.input.attrs,
+        dir: state.context.dir,
         disabled: state.context.disabled,
         "data-disabled": dataAttr(state.context.disabled),
         "data-complete": dataAttr(isValueComplete),

diff --git a/packages/machines/radio-group/src/radio-group.connect.ts b/packages/machines/radio-group/src/radio-group.connect.ts
@@ -71,6 +71,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
     labelProps: normalize.element({
       ...parts.label.attrs,
+      dir: state.context.dir,
       "data-orientation": state.context.orientation,
       "data-disabled": dataAttr(isGroupDisabled),
       id: dom.getLabelId(state.context),
@@ -82,10 +83,10 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
       return normalize.label({
         ...parts.item.attrs,
+        dir: state.context.dir,
         id: dom.getItemId(state.context, props.value),
         htmlFor: dom.getItemHiddenInputId(state.context, props.value),
         ...getItemDataAttrs(props),
-
         onPointerMove() {
           if (rootState.isDisabled) return
           send({ type: "SET_HOVERED", value: props.value, hovered: true })
@@ -113,6 +114,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
     getItemTextProps(props: ItemProps) {
       return normalize.element({
         ...parts.itemText.attrs,
+        dir: state.context.dir,
         id: dom.getItemLabelId(state.context, props.value),
         ...getItemDataAttrs(props),
       })
@@ -123,6 +125,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
       return normalize.element({
         ...parts.itemControl.attrs,
+        dir: state.context.dir,
         id: dom.getItemControlId(state.context, props.value),
         "data-active": dataAttr(controlState.isActive),
         "aria-hidden": true,
@@ -172,6 +175,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
     indicatorProps: normalize.element({
       id: dom.getIndicatorId(state.context),
       ...parts.indicator.attrs,
+      dir: state.context.dir,
       "data-disabled": dataAttr(isGroupDisabled),
       "data-orientation": state.context.orientation,
       style: {

diff --git a/packages/machines/range-slider/src/range-slider.connect.ts b/packages/machines/range-slider/src/range-slider.connect.ts
@@ -88,6 +88,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
     labelProps: normalize.label({
       ...parts.label.attrs,
+      dir: state.context.dir,
       "data-disabled": dataAttr(isDisabled),
       "data-orientation": state.context.orientation,
       "data-invalid": dataAttr(isInvalid),
@@ -117,6 +118,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
     outputProps: normalize.output({
       ...parts.output.attrs,
+      dir: state.context.dir,
       "data-disabled": dataAttr(isDisabled),
       "data-orientation": state.context.orientation,
       "data-invalid": dataAttr(isInvalid),
@@ -128,6 +130,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
     trackProps: normalize.element({
       ...parts.track.attrs,
+      dir: state.context.dir,
       id: dom.getTrackId(state.context),
       "data-disabled": dataAttr(isDisabled),
       "data-invalid": dataAttr(isInvalid),
@@ -145,6 +148,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
       return normalize.element({
         ...parts.thumb.attrs,
+        dir: state.context.dir,
         "data-index": index,
         id: dom.getThumbId(state.context, index),
         "data-disabled": dataAttr(isDisabled),
@@ -238,6 +242,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
     rangeProps: normalize.element({
       id: dom.getRangeId(state.context),
       ...parts.range.attrs,
+      dir: state.context.dir,
       "data-focus": dataAttr(isFocused),
       "data-invalid": dataAttr(isInvalid),
       "data-disabled": dataAttr(isDisabled),
@@ -247,6 +252,7 @@ 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(isDisabled),
       "data-orientation": state.context.orientation,
@@ -270,6 +276,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
     markerGroupProps: normalize.element({
       ...parts.markerGroup.attrs,
       role: "presentation",
+      dir: state.context.dir,
       "aria-hidden": true,
       "data-orientation": state.context.orientation,
       style: dom.getMarkerGroupStyle(),

diff --git a/packages/machines/rating-group/src/rating-group.connect.ts b/packages/machines/rating-group/src/rating-group.connect.ts
@@ -66,13 +66,15 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
     labelProps: normalize.element({
       ...parts.label.attrs,
+      dir: state.context.dir,
       id: dom.getLabelId(state.context),
       "data-disabled": dataAttr(isDisabled),
     }),
 
     controlProps: normalize.element({
       id: dom.getControlId(state.context),
       ...parts.control.attrs,
+      dir: state.context.dir,
       role: "radiogroup",
       "aria-orientation": "horizontal",
       "aria-labelledby": dom.getLabelId(state.context),
@@ -95,6 +97,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
       return normalize.element({
         ...parts.item.attrs,
+        dir: state.context.dir,
         id: dom.getItemId(state.context, index.toString()),
         role: "radio",
         tabIndex: isDisabled ? undefined : itemState.isChecked ? 0 : -1,

diff --git a/packages/machines/slider/src/slider.connect.ts b/packages/machines/slider/src/slider.connect.ts
@@ -77,6 +77,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       "data-disabled": dataAttr(isDisabled),
       "data-invalid": dataAttr(isInvalid),
       "data-focus": dataAttr(isFocused),
+      dir: state.context.dir,
       id: dom.getLabelId(state.context),
       htmlFor: dom.getHiddenInputId(state.context),
       onClick(event) {
@@ -89,6 +90,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
     thumbProps: normalize.element({
       ...parts.thumb.attrs,
+      dir: state.context.dir,
       id: dom.getThumbId(state.context),
       "data-disabled": dataAttr(isDisabled),
       "data-orientation": state.context.orientation,
@@ -181,12 +183,14 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       "data-invalid": dataAttr(isInvalid),
       "data-orientation": state.context.orientation,
       id: dom.getOutputId(state.context),
+      dir: state.context.dir,
       htmlFor: dom.getHiddenInputId(state.context),
       "aria-live": "off",
     }),
 
     trackProps: normalize.element({
       ...parts.track.attrs,
+      dir: state.context.dir,
       id: dom.getTrackId(state.context),
       "data-disabled": dataAttr(isDisabled),
       "data-focus": dataAttr(isFocused),
@@ -197,6 +201,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
     rangeProps: normalize.element({
       ...parts.range.attrs,
+      dir: state.context.dir,
       id: dom.getRangeId(state.context),
       "data-focus": dataAttr(isFocused),
       "data-invalid": dataAttr(isInvalid),
@@ -207,6 +212,7 @@ 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(isDisabled),
       "data-invalid": dataAttr(isInvalid),
@@ -229,6 +235,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
     markerGroupProps: normalize.element({
       ...parts.markerGroup.attrs,
+      dir: state.context.dir,
       role: "presentation",
       "aria-hidden": true,
       "data-orientation": state.context.orientation,