@ark-ui/solid 3.6.2 → 3.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/cjs/index.js +36 -26
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/esm/index.js +36 -26
  4. package/dist/esm/index.js.map +1 -1
  5. package/dist/source/components/field/field-root.jsx +1 -0
  6. package/dist/source/components/field/use-field.js +10 -9
  7. package/dist/source/components/progress/progress-value-text.jsx +1 -1
  8. package/dist/source/components/select/use-select.js +13 -5
  9. package/dist/types/components/field/use-field.d.ts +33 -17
  10. package/package.json +51 -49
package/dist/source/components/field/field-root.jsx CHANGED
@@ -6,6 +6,7 @@ import { FieldProvider } from './use-field-context';
6
6
  export const FieldRoot = (props) => {
7
7
  const [useFieldProps, localProps] = createSplitProps()(props, [
8
8
  'id',
9
+ 'ids',
9
10
  'disabled',
10
11
  'invalid',
11
12
  'readOnly',
package/dist/source/components/field/use-field.js CHANGED
@@ -1,17 +1,18 @@
1
- import { getWindow } from '@zag-js/dom-query';
1
+ import { ariaAttr, dataAttr, getWindow } from '@zag-js/dom-query';
2
2
  import { createEffect, createMemo, createSignal, createUniqueId, onCleanup } from 'solid-js';
3
3
  import { useFieldsetContext } from '../fieldset';
4
4
  import { parts } from './field.anatomy';
5
5
  export const useField = (props) => {
6
6
  const fieldset = useFieldsetContext();
7
- const { disabled = Boolean(fieldset?.().disabled), invalid = false, readOnly = false, required = false, } = props;
7
+ const { ids, disabled = Boolean(fieldset?.().disabled), invalid = false, readOnly = false, required = false, } = props;
8
8
  const [hasErrorText, setHasErrorText] = createSignal(false);
9
9
  const [hasHelperText, setHasHelperText] = createSignal(false);
10
10
  const id = props.id ?? createUniqueId();
11
11
  let rootRef;
12
- const errorTextId = `field::${id}::error-text`;
13
- const helperTextId = `field::${id}::helper-text`;
14
- const labelId = `field::${id}::label`;
12
+ const rootId = ids?.control ?? `field::${id}`;
13
+ const errorTextId = ids?.errorText ?? `field::${id}::error-text`;
14
+ const helperTextId = ids?.helperText ?? `field::${id}::helper-text`;
15
+ const labelId = ids?.label ?? `field::${id}::label`;
15
16
  createEffect(() => {
16
17
  const rootNode = rootRef;
17
18
  if (!rootNode)
@@ -29,6 +30,7 @@ export const useField = (props) => {
29
30
  });
30
31
  const getRootProps = () => ({
31
32
  ...parts.root.attrs,
33
+ id: rootId,
32
34
  role: 'group',
33
35
  'data-disabled': dataAttr(disabled),
34
36
  'data-invalid': dataAttr(invalid),
@@ -50,8 +52,9 @@ export const useField = (props) => {
50
52
  const getControlProps = () => ({
51
53
  'aria-describedby': labelIds.join(' ') || undefined,
52
54
  'aria-invalid': ariaAttr(invalid),
53
- 'aria-required': ariaAttr(required),
54
- 'aria-readonly': ariaAttr(readOnly),
55
+ 'data-invalid': dataAttr(invalid),
56
+ 'data-required': dataAttr(required),
57
+ 'data-readonly': dataAttr(readOnly),
55
58
  id,
56
59
  required,
57
60
  disabled,
@@ -102,5 +105,3 @@ export const useField = (props) => {
102
105
  getErrorTextProps,
103
106
  }));
104
107
  };
105
- const dataAttr = (condition) => (condition ? '' : undefined);
106
- const ariaAttr = (condition) => (condition ? true : undefined);
package/dist/source/components/progress/progress-value-text.jsx CHANGED
@@ -4,5 +4,5 @@ import { useProgressContext } from './use-progress-context';
4
4
  export const ProgressValueText = (props) => {
5
5
  const api = useProgressContext();
6
6
  const mergedProps = mergeProps(() => api().getValueTextProps(), props);
7
- return <ark.span {...mergedProps}>{props.children || api().valueAsString}</ark.span>;
7
+ return <ark.span {...mergedProps}>{props.children || api().percentAsString}</ark.span>;
8
8
  };
package/dist/source/components/select/use-select.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as select from '@zag-js/select';
2
2
  import { normalizeProps, useMachine } from '@zag-js/solid';
3
- import { createMemo, createUniqueId } from 'solid-js';
3
+ import { createEffect, createMemo, createUniqueId, splitProps } from 'solid-js';
4
4
  import { useEnvironmentContext, useLocaleContext } from '../../providers';
5
5
  import { createSplitProps } from '../../utils/create-split-props';
6
6
  import { useFieldContext } from '../field';
@@ -11,12 +11,12 @@ export const useSelect = (props) => {
11
11
  'itemToString',
12
12
  'items',
13
13
  ]);
14
- const collection = () => select.collection({ ...collectionOptions });
14
+ const collection = createMemo(() => select.collection({ ...collectionOptions }));
15
15
  const locale = useLocaleContext();
16
16
  const environment = useEnvironmentContext();
17
17
  const id = createUniqueId();
18
18
  const field = useFieldContext();
19
- const context = createMemo(() => ({
19
+ const initialContext = createMemo(() => ({
20
20
  id,
21
21
  ids: {
22
22
  label: field?.().ids.label,
@@ -34,8 +34,16 @@ export const useSelect = (props) => {
34
34
  'open.controlled': props.open !== undefined,
35
35
  ...selectProps,
36
36
  }));
37
- const [state, send] = useMachine(select.machine(context()), {
37
+ const context = createMemo(() => {
38
+ const [, restProps] = splitProps(initialContext(), ['collection']);
39
+ return restProps;
40
+ });
41
+ const [state, send] = useMachine(select.machine(initialContext()), {
38
42
  context,
39
43
  });
40
- return createMemo(() => select.connect(state, send, normalizeProps));
44
+ const api = createMemo(() => select.connect(state, send, normalizeProps));
45
+ createEffect(() => {
46
+ api().setCollection(collection());
47
+ });
48
+ return api;
41
49
  };
package/dist/types/components/field/use-field.d.ts CHANGED
@@ -1,5 +1,19 @@
1
+ export interface ElementIds {
2
+ root?: string;
3
+ control?: string;
4
+ label?: string;
5
+ errorText?: string;
6
+ helperText?: string;
7
+ }
1
8
  export interface UseFieldProps {
9
+ /**
10
+ * The id of the field.
11
+ */
2
12
  id?: string;
13
+ /**
14
+ * The ids of the field parts.
15
+ */
16
+ ids?: ElementIds;
3
17
  /**
4
18
  * Indicates whether the field is required.
5
19
  */
@@ -35,18 +49,19 @@ export declare const useField: (props: UseFieldProps) => import("solid-js").Acce
35
49
  required: boolean;
36
50
  getLabelProps: () => {
37
51
  id: string;
38
- 'data-disabled': Booleanish;
39
- 'data-invalid': Booleanish;
40
- 'data-readonly': Booleanish;
52
+ 'data-disabled': boolean | "false" | "true";
53
+ 'data-invalid': boolean | "false" | "true";
54
+ 'data-readonly': boolean | "false" | "true";
41
55
  htmlFor: string;
42
56
  "data-scope": string;
43
57
  "data-part": string;
44
58
  };
45
59
  getRootProps: () => {
60
+ id: string;
46
61
  role: string;
47
- 'data-disabled': Booleanish;
48
- 'data-invalid': Booleanish;
49
- 'data-readonly': Booleanish;
62
+ 'data-disabled': boolean | "false" | "true";
63
+ 'data-invalid': boolean | "false" | "true";
64
+ 'data-readonly': boolean | "false" | "true";
50
65
  "data-scope": string;
51
66
  "data-part": string;
52
67
  };
@@ -54,9 +69,10 @@ export declare const useField: (props: UseFieldProps) => import("solid-js").Acce
54
69
  "data-scope": string;
55
70
  "data-part": string;
56
71
  'aria-describedby': string;
57
- 'aria-invalid': boolean;
58
- 'aria-required': boolean;
59
- 'aria-readonly': boolean;
72
+ 'aria-invalid': "true";
73
+ 'data-invalid': boolean | "false" | "true";
74
+ 'data-required': boolean | "false" | "true";
75
+ 'data-readonly': boolean | "false" | "true";
60
76
  id: string;
61
77
  required: boolean;
62
78
  disabled: boolean;
@@ -66,9 +82,10 @@ export declare const useField: (props: UseFieldProps) => import("solid-js").Acce
66
82
  "data-scope": string;
67
83
  "data-part": string;
68
84
  'aria-describedby': string;
69
- 'aria-invalid': boolean;
70
- 'aria-required': boolean;
71
- 'aria-readonly': boolean;
85
+ 'aria-invalid': "true";
86
+ 'data-invalid': boolean | "false" | "true";
87
+ 'data-required': boolean | "false" | "true";
88
+ 'data-readonly': boolean | "false" | "true";
72
89
  id: string;
73
90
  required: boolean;
74
91
  disabled: boolean;
@@ -78,9 +95,10 @@ export declare const useField: (props: UseFieldProps) => import("solid-js").Acce
78
95
  "data-scope": string;
79
96
  "data-part": string;
80
97
  'aria-describedby': string;
81
- 'aria-invalid': boolean;
82
- 'aria-required': boolean;
83
- 'aria-readonly': boolean;
98
+ 'aria-invalid': "true";
99
+ 'data-invalid': boolean | "false" | "true";
100
+ 'data-required': boolean | "false" | "true";
101
+ 'data-readonly': boolean | "false" | "true";
84
102
  id: string;
85
103
  required: boolean;
86
104
  disabled: boolean;
@@ -98,5 +116,3 @@ export declare const useField: (props: UseFieldProps) => import("solid-js").Acce
98
116
  id: string;
99
117
  };
100
118
  }>;
101
- type Booleanish = boolean | 'true' | 'false';
102
- export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ark-ui/solid",
3
- "version": "3.6.2",
3
+ "version": "3.7.0",
4
4
  "description": "A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.",
5
5
  "keywords": [
6
6
  "accordion",
@@ -85,71 +85,73 @@
85
85
  "sideEffects": false,
86
86
  "dependencies": {
87
87
  "@internationalized/date": "3.5.5",
88
- "@zag-js/accordion": "0.63.0",
89
- "@zag-js/anatomy": "0.63.0",
90
- "@zag-js/avatar": "0.63.0",
91
- "@zag-js/carousel": "0.63.0",
92
- "@zag-js/checkbox": "0.63.0",
93
- "@zag-js/clipboard": "0.63.0",
94
- "@zag-js/collapsible": "0.63.0",
95
- "@zag-js/color-picker": "0.63.0",
96
- "@zag-js/combobox": "0.63.0",
97
- "@zag-js/date-picker": "0.63.0",
98
- "@zag-js/dialog": "0.63.0",
99
- "@zag-js/dom-query": "0.63.0",
100
- "@zag-js/editable": "0.63.0",
101
- "@zag-js/file-upload": "0.63.0",
102
- "@zag-js/hover-card": "0.63.0",
103
- "@zag-js/file-utils": "0.63.0",
104
- "@zag-js/i18n-utils": "0.63.0",
105
- "@zag-js/menu": "0.63.0",
106
- "@zag-js/number-input": "0.63.0",
107
- "@zag-js/pagination": "0.63.0",
108
- "@zag-js/pin-input": "0.63.0",
109
- "@zag-js/popover": "0.63.0",
110
- "@zag-js/presence": "0.63.0",
111
- "@zag-js/progress": "0.63.0",
112
- "@zag-js/qr-code": "0.63.0",
113
- "@zag-js/radio-group": "0.63.0",
114
- "@zag-js/rating-group": "0.63.0",
115
- "@zag-js/select": "0.63.0",
116
- "@zag-js/signature-pad": "0.63.0",
117
- "@zag-js/slider": "0.63.0",
118
- "@zag-js/solid": "0.63.0",
119
- "@zag-js/splitter": "0.63.0",
120
- "@zag-js/switch": "0.63.0",
121
- "@zag-js/tabs": "0.63.0",
122
- "@zag-js/tags-input": "0.63.0",
123
- "@zag-js/time-picker": "0.63.0",
124
- "@zag-js/toast": "0.63.0",
125
- "@zag-js/toggle-group": "0.63.0",
126
- "@zag-js/tooltip": "0.63.0",
127
- "@zag-js/tree-view": "0.63.0",
128
- "@zag-js/types": "0.63.0"
88
+ "@zag-js/accordion": "0.64.0",
89
+ "@zag-js/anatomy": "0.64.0",
90
+ "@zag-js/avatar": "0.64.0",
91
+ "@zag-js/carousel": "0.64.0",
92
+ "@zag-js/checkbox": "0.64.0",
93
+ "@zag-js/clipboard": "0.64.0",
94
+ "@zag-js/collapsible": "0.64.0",
95
+ "@zag-js/color-picker": "0.64.0",
96
+ "@zag-js/combobox": "0.64.0",
97
+ "@zag-js/date-picker": "0.64.0",
98
+ "@zag-js/dialog": "0.64.0",
99
+ "@zag-js/dom-query": "0.64.0",
100
+ "@zag-js/editable": "0.64.0",
101
+ "@zag-js/file-upload": "0.64.0",
102
+ "@zag-js/hover-card": "0.64.0",
103
+ "@zag-js/file-utils": "0.64.0",
104
+ "@zag-js/i18n-utils": "0.64.0",
105
+ "@zag-js/menu": "0.64.0",
106
+ "@zag-js/number-input": "0.64.0",
107
+ "@zag-js/pagination": "0.64.0",
108
+ "@zag-js/pin-input": "0.64.0",
109
+ "@zag-js/popover": "0.64.0",
110
+ "@zag-js/presence": "0.64.0",
111
+ "@zag-js/progress": "0.64.0",
112
+ "@zag-js/qr-code": "0.64.0",
113
+ "@zag-js/radio-group": "0.64.0",
114
+ "@zag-js/rating-group": "0.64.0",
115
+ "@zag-js/select": "0.64.0",
116
+ "@zag-js/signature-pad": "0.64.0",
117
+ "@zag-js/slider": "0.64.0",
118
+ "@zag-js/solid": "0.64.0",
119
+ "@zag-js/splitter": "0.64.0",
120
+ "@zag-js/steps": "0.64.0",
121
+ "@zag-js/switch": "0.64.0",
122
+ "@zag-js/tabs": "0.64.0",
123
+ "@zag-js/tags-input": "0.64.0",
124
+ "@zag-js/time-picker": "0.64.0",
125
+ "@zag-js/toast": "0.64.0",
126
+ "@zag-js/toggle-group": "0.64.0",
127
+ "@zag-js/tooltip": "0.64.0",
128
+ "@zag-js/tree-view": "0.64.0",
129
+ "@zag-js/types": "0.64.0"
129
130
  },
130
131
  "devDependencies": {
131
132
  "@biomejs/biome": "1.8.3",
132
133
  "@release-it/keep-a-changelog": "5.0.0",
133
134
  "@solidjs/testing-library": "0.8.9",
134
- "@storybook/addon-a11y": "8.2.6",
135
- "@storybook/addon-essentials": "8.2.6",
135
+ "@storybook/addon-a11y": "8.2.8",
136
+ "@storybook/docs-tools": "8.2.8",
137
+ "@storybook/addon-essentials": "8.2.8",
136
138
  "@testing-library/dom": "10.4.0",
137
139
  "@testing-library/jest-dom": "6.4.8",
138
140
  "@testing-library/user-event": "14.5.2",
139
141
  "@types/jsdom": "21.1.7",
140
142
  "globby": "14.0.2",
141
143
  "jsdom": "24.1.1",
142
- "lucide-solid": "0.417.0",
144
+ "lucide-solid": "0.427.0",
143
145
  "release-it": "17.6.0",
144
146
  "resize-observer-polyfill": "1.5.1",
145
- "rollup": "4.19.1",
147
+ "rollup": "4.20.0",
146
148
  "rollup-preset-solid": "2.0.1",
147
- "solid-js": "1.8.19",
148
- "storybook": "8.2.6",
149
+ "solid-js": "1.8.20",
150
+ "storybook": "8.2.8",
149
151
  "storybook-solidjs": "1.0.0-beta.2",
150
152
  "storybook-solidjs-vite": "1.0.0-beta.2",
151
153
  "typescript": "5.5.4",
152
- "vite": "5.3.5",
154
+ "vite": "5.4.0",
153
155
  "vite-plugin-solid": "2.10.2",
154
156
  "vitest": "2.0.4"
155
157
  },