diff --git a/.changeset/flat-schools-appear.md b/.changeset/flat-schools-appear.md new file mode 100644 index 0000000000..00044b19b0 --- /dev/null +++ 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 index 939c8c3706..58a7544a66 100644 --- a/packages/machines/accordion/src/accordion.connect.ts +++ b/packages/machines/accordion/src/accordion.connect.ts @@ -42,6 +42,7 @@ export function connect(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(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 index 2f335ccb8f..4cc3b7eabd 100644 --- a/packages/machines/carousel/src/carousel.connect.ts +++ b/packages/machines/carousel/src/carousel.connect.ts @@ -60,6 +60,7 @@ export function connect(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(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(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(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(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(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(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(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 index 3441d2a972..78dc88b180 100644 --- a/packages/machines/checkbox/src/checkbox.connect.ts +++ b/packages/machines/checkbox/src/checkbox.connect.ts @@ -38,6 +38,7 @@ export function connect(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(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 index 51343c48c8..2234a84ab2 100644 --- a/packages/machines/number-input/src/number-input.connect.ts +++ b/packages/machines/number-input/src/number-input.connect.ts @@ -60,6 +60,7 @@ export function connect(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), @@ -67,6 +68,7 @@ export function connect(state: State, send: Send, normalize 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(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(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(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(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 index b0ccfc7999..53203442ab 100644 --- 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(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,6 +76,7 @@ export function connect(state: State, send: Send, normalize controlProps: normalize.element({ ...parts.control.attrs, + dir: state.context.dir, id: dom.getControlId(state.context), }), @@ -82,6 +84,7 @@ export function connect(state: State, send: Send, normalize 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 index bc1279a320..c3a66f9ca5 100644 --- 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(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(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(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(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(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 index 00a73b5955..9f2355f9de 100644 --- 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(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(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(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(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(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(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(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 index fb80172236..7f7b4bdb66 100644 --- a/packages/machines/rating-group/src/rating-group.connect.ts +++ b/packages/machines/rating-group/src/rating-group.connect.ts @@ -66,6 +66,7 @@ export function connect(state: State, send: Send, normalize labelProps: normalize.element({ ...parts.label.attrs, + dir: state.context.dir, id: dom.getLabelId(state.context), "data-disabled": dataAttr(isDisabled), }), @@ -73,6 +74,7 @@ export function connect(state: State, send: Send, normalize 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(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 index ed8144fffb..0fb76a6226 100644 --- a/packages/machines/slider/src/slider.connect.ts +++ b/packages/machines/slider/src/slider.connect.ts @@ -77,6 +77,7 @@ export function connect(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(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(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(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(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(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,