@ark-ui/solid 3.6.2 → 3.7.0

package/dist/esm/index.js

@@ -24,7 +24,7 @@ import * as dialog$1 from '@zag-js/dialog';
 export { anatomy as dialogAnatomy } from '@zag-js/dialog';
 import * as editable$1 from '@zag-js/editable';
 export { anatomy as editableAnatomy } from '@zag-js/editable';
-import { getDocument, getWindow } from '@zag-js/dom-query';
+import { getDocument, getWindow, dataAttr as dataAttr$1, ariaAttr } from '@zag-js/dom-query';
 import { createAnatomy } from '@zag-js/anatomy';
 import * as fileUpload$1 from '@zag-js/file-upload';
 export { anatomy as fileUploadAnatomy } from '@zag-js/file-upload';
@@ -817,14 +817,14 @@ const useFieldset = props => {
   const getRootProps = () => ({
     ...parts$2.root.attrs,
     disabled,
-    'data-disabled': dataAttr$1(disabled),
-    'data-invalid': dataAttr$1(invalid),
+    'data-disabled': dataAttr(disabled),
+    'data-invalid': dataAttr(invalid),
     'aria-describedby': labelIds.join(' ') || undefined
   });
   const getLegendProps = () => ({
     ...parts$2.legend.attrs,
-    'data-disabled': dataAttr$1(disabled),
-    'data-invalid': dataAttr$1(invalid)
+    'data-disabled': dataAttr(disabled),
+    'data-invalid': dataAttr(invalid)
   });
   const getHelperTextProps = () => ({
     id: helperTextId,
@@ -847,7 +847,7 @@ const useFieldset = props => {
     getErrorTextProps
   }));
 };
-const dataAttr$1 = condition => condition ? '' : undefined;
+const dataAttr = condition => condition ? '' : undefined;
 
 const FieldsetRoot = props => {
   const [useFieldsetProps, localProps] = createSplitProps()(props, ['id', 'disabled', 'invalid']);
@@ -897,6 +897,7 @@ const parts$1 = fieldAnatomy.build();
 const useField = props => {
   const fieldset = useFieldsetContext();
   const {
+    ids,
     disabled = Boolean(fieldset?.().disabled),
     invalid = false,
     readOnly = false,
@@ -906,25 +907,27 @@ const useField = props => {
   const [hasHelperText, setHasHelperText] = createSignal(false);
   const id = props.id ?? createUniqueId();
   let rootRef;
-  const errorTextId = `field::${id}::error-text`;
-  const helperTextId = `field::${id}::helper-text`;
-  const labelId = `field::${id}::label`;
+  const rootId = ids?.control ?? `field::${id}`;
+  const errorTextId = ids?.errorText ?? `field::${id}::error-text`;
+  const helperTextId = ids?.helperText ?? `field::${id}::helper-text`;
+  const labelId = ids?.label ?? `field::${id}::label`;
   createEffect(() => {
     return;
   });
   const getRootProps = () => ({
     ...parts$1.root.attrs,
+    id: rootId,
     role: 'group',
-    'data-disabled': dataAttr(disabled),
-    'data-invalid': dataAttr(invalid),
-    'data-readonly': dataAttr(readOnly)
+    'data-disabled': dataAttr$1(disabled),
+    'data-invalid': dataAttr$1(invalid),
+    'data-readonly': dataAttr$1(readOnly)
   });
   const getLabelProps = () => ({
     ...parts$1.label.attrs,
     id: labelId,
-    'data-disabled': dataAttr(disabled),
-    'data-invalid': dataAttr(invalid),
-    'data-readonly': dataAttr(readOnly),
+    'data-disabled': dataAttr$1(disabled),
+    'data-invalid': dataAttr$1(invalid),
+    'data-readonly': dataAttr$1(readOnly),
     htmlFor: id
   });
   const labelIds = [];
@@ -933,8 +936,9 @@ const useField = props => {
   const getControlProps = () => ({
     'aria-describedby': labelIds.join(' ') || undefined,
     'aria-invalid': ariaAttr(invalid),
-    'aria-required': ariaAttr(required),
-    'aria-readonly': ariaAttr(readOnly),
+    'data-invalid': dataAttr$1(invalid),
+    'data-required': dataAttr$1(required),
+    'data-readonly': dataAttr$1(readOnly),
     id,
     required,
     disabled,
@@ -985,11 +989,9 @@ const useField = props => {
     getErrorTextProps
   }));
 };
-const dataAttr = condition => condition ? '' : undefined;
-const ariaAttr = condition => condition ? true : undefined;
 
 const FieldRoot = props => {
-  const [useFieldProps, localProps] = createSplitProps()(props, ['id', 'disabled', 'invalid', 'readOnly', 'required']);
+  const [useFieldProps, localProps] = createSplitProps()(props, ['id', 'ids', 'disabled', 'invalid', 'readOnly', 'required']);
   const field = useField(useFieldProps);
   const mergedProps = mergeProps$1(() => field().getRootProps(), localProps);
   return createComponent(FieldProvider, {
@@ -3897,7 +3899,7 @@ const ProgressValueText = props => {
   const mergedProps = mergeProps$1(() => api().getValueTextProps(), props);
   return createComponent(ark.span, mergeProps(mergedProps, {
     get children() {
-      return props.children || api().valueAsString;
+      return props.children || api().percentAsString;
     }
   }));
 };
@@ -4543,14 +4545,14 @@ const SelectPositioner = props => {
 
 const useSelect = props => {
   const [collectionOptions, selectProps] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
-  const collection = () => select$1.collection({
+  const collection = createMemo(() => select$1.collection({
     ...collectionOptions
-  });
+  }));
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = createUniqueId();
   const field = useFieldContext();
-  const context = createMemo(() => ({
+  const initialContext = createMemo(() => ({
     id,
     ids: {
       label: field?.().ids.label,
@@ -4568,10 +4570,18 @@ const useSelect = props => {
     'open.controlled': props.open !== undefined,
     ...selectProps
   }));
-  const [state, send] = useMachine(select$1.machine(context()), {
+  const context = createMemo(() => {
+    const [, restProps] = splitProps(initialContext(), ['collection']);
+    return restProps;
+  });
+  const [state, send] = useMachine(select$1.machine(initialContext()), {
     context
   });
-  return createMemo(() => select$1.connect(state, send, normalizeProps));
+  const api = createMemo(() => select$1.connect(state, send, normalizeProps));
+  createEffect(() => {
+    api().setCollection(collection());
+  });
+  return api;
 };
 
 const SelectRoot = props => {