@ark-ui/solid 3.6.1 → 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 +40 -214
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/esm/index.js +40 -214
  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 +52 -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.1",
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",
@@ -84,71 +84,74 @@
84
84
  },
85
85
  "sideEffects": false,
86
86
  "dependencies": {
87
- "@zag-js/accordion": "0.62.1",
88
- "@zag-js/anatomy": "0.62.1",
89
- "@zag-js/avatar": "0.62.1",
90
- "@zag-js/carousel": "0.62.1",
91
- "@zag-js/checkbox": "0.62.1",
92
- "@zag-js/clipboard": "0.62.1",
93
- "@zag-js/collapsible": "0.62.1",
94
- "@zag-js/color-picker": "0.62.1",
95
- "@zag-js/combobox": "0.62.1",
96
- "@zag-js/date-picker": "0.62.1",
97
- "@zag-js/dialog": "0.62.1",
98
- "@zag-js/dom-query": "0.62.1",
99
- "@zag-js/editable": "0.62.1",
100
- "@zag-js/file-upload": "0.62.1",
101
- "@zag-js/hover-card": "0.62.1",
102
- "@zag-js/file-utils": "0.62.1",
103
- "@zag-js/i18n-utils": "0.62.1",
104
- "@zag-js/menu": "0.62.1",
105
- "@zag-js/number-input": "0.62.1",
106
- "@zag-js/pagination": "0.62.1",
107
- "@zag-js/pin-input": "0.62.1",
108
- "@zag-js/popover": "0.62.1",
109
- "@zag-js/presence": "0.62.1",
110
- "@zag-js/progress": "0.62.1",
111
- "@zag-js/qr-code": "0.62.1",
112
- "@zag-js/radio-group": "0.62.1",
113
- "@zag-js/rating-group": "0.62.1",
114
- "@zag-js/select": "0.62.1",
115
- "@zag-js/signature-pad": "0.62.1",
116
- "@zag-js/slider": "0.62.1",
117
- "@zag-js/solid": "0.62.1",
118
- "@zag-js/splitter": "0.62.1",
119
- "@zag-js/switch": "0.62.1",
120
- "@zag-js/tabs": "0.62.1",
121
- "@zag-js/tags-input": "0.62.1",
122
- "@zag-js/time-picker": "0.62.1",
123
- "@zag-js/toast": "0.62.1",
124
- "@zag-js/toggle-group": "0.62.1",
125
- "@zag-js/tooltip": "0.62.1",
126
- "@zag-js/tree-view": "0.62.1",
127
- "@zag-js/types": "0.62.1"
87
+ "@internationalized/date": "3.5.5",
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"
128
130
  },
129
131
  "devDependencies": {
130
132
  "@biomejs/biome": "1.8.3",
131
133
  "@release-it/keep-a-changelog": "5.0.0",
132
134
  "@solidjs/testing-library": "0.8.9",
133
- "@storybook/addon-a11y": "8.2.6",
134
- "@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",
135
138
  "@testing-library/dom": "10.4.0",
136
139
  "@testing-library/jest-dom": "6.4.8",
137
140
  "@testing-library/user-event": "14.5.2",
138
141
  "@types/jsdom": "21.1.7",
139
142
  "globby": "14.0.2",
140
143
  "jsdom": "24.1.1",
141
- "lucide-solid": "0.414.0",
144
+ "lucide-solid": "0.427.0",
142
145
  "release-it": "17.6.0",
143
146
  "resize-observer-polyfill": "1.5.1",
144
- "rollup": "4.19.0",
147
+ "rollup": "4.20.0",
145
148
  "rollup-preset-solid": "2.0.1",
146
- "solid-js": "1.8.19",
147
- "storybook": "8.2.6",
149
+ "solid-js": "1.8.20",
150
+ "storybook": "8.2.8",
148
151
  "storybook-solidjs": "1.0.0-beta.2",
149
152
  "storybook-solidjs-vite": "1.0.0-beta.2",
150
153
  "typescript": "5.5.4",
151
- "vite": "5.3.4",
154
+ "vite": "5.4.0",
152
155
  "vite-plugin-solid": "2.10.2",
153
156
  "vitest": "2.0.4"
154
157
  },