@ariakit/core 0.3.2 → 0.3.4
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.
- package/CHANGELOG.md +20 -0
- package/cjs/__chunks/{4L3HCXJY.cjs → 25WWT2VO.cjs} +17 -16
- package/cjs/__chunks/{EXM2AW52.cjs → FTB5CXVB.cjs} +3 -1
- package/cjs/__chunks/{EIRIJC7T.cjs → G5EW4WED.cjs} +8 -7
- package/cjs/__chunks/{RCYVACJO.cjs → LMT335NJ.cjs} +9 -4
- package/cjs/__chunks/LUOEAZGU.cjs +42 -0
- package/cjs/__chunks/{4OD4ZFRG.cjs → M44E4T5A.cjs} +30 -29
- package/cjs/__chunks/{GHET3DES.cjs → MLPOXRDT.cjs} +4 -3
- package/cjs/__chunks/{7GWXP6CQ.cjs → OASSVCYR.cjs} +43 -29
- package/cjs/__chunks/{AIHTEA5D.cjs → ROX3MRGO.cjs} +18 -17
- package/cjs/__chunks/{GDZQUFNP.cjs → ULSPM3Y3.cjs} +3 -1
- package/cjs/__chunks/{72I2GWXF.cjs → WYXAWBLE.cjs} +2 -1
- package/cjs/__chunks/{52LQV3SV.cjs → YXSGST3H.cjs} +23 -23
- package/cjs/checkbox/checkbox-store.cjs +9 -8
- package/cjs/checkbox/checkbox-store.d.cts +41 -0
- package/cjs/collection/collection-store.cjs +8 -7
- package/cjs/collection/collection-store.d.cts +65 -0
- package/cjs/combobox/combobox-store.cjs +37 -36
- package/cjs/combobox/combobox-store.d.cts +77 -0
- package/cjs/composite/composite-overflow-store.cjs +9 -8
- package/cjs/composite/composite-overflow-store.d.cts +10 -0
- package/cjs/composite/composite-store.cjs +10 -9
- package/cjs/composite/composite-store.d.cts +206 -0
- package/cjs/dialog/dialog-store.cjs +8 -7
- package/cjs/dialog/dialog-store.d.cts +10 -0
- package/cjs/disclosure/disclosure-store.cjs +7 -6
- package/cjs/disclosure/disclosure-store.d.cts +125 -0
- package/cjs/disclosure/disclosure-store.d.ts +1 -0
- package/cjs/form/form-store.cjs +30 -29
- package/cjs/form/form-store.d.cts +236 -0
- package/cjs/form/types.cjs +1 -1
- package/cjs/form/types.d.cts +38 -0
- package/cjs/hovercard/hovercard-store.cjs +10 -9
- package/cjs/hovercard/hovercard-store.d.cts +46 -0
- package/cjs/index.cjs +2 -1
- package/cjs/index.d.cts +2 -0
- package/cjs/menu/menu-bar-store.cjs +12 -11
- package/cjs/menu/menu-bar-store.d.cts +10 -0
- package/cjs/menu/menu-store.cjs +35 -34
- package/cjs/menu/menu-store.d.cts +78 -0
- package/cjs/popover/popover-store.cjs +9 -8
- package/cjs/popover/popover-store.d.cts +69 -0
- package/cjs/radio/radio-store.cjs +16 -15
- package/cjs/radio/radio-store.d.cts +36 -0
- package/cjs/select/select-store.cjs +37 -36
- package/cjs/select/select-store.d.cts +93 -0
- package/cjs/tab/tab-store.cjs +28 -27
- package/cjs/tab/tab-store.d.cts +87 -0
- package/cjs/toolbar/toolbar-store.cjs +12 -11
- package/cjs/toolbar/toolbar-store.d.cts +21 -0
- package/cjs/tooltip/tooltip-store.cjs +17 -16
- package/cjs/tooltip/tooltip-store.d.cts +29 -0
- package/cjs/utils/array.cjs +5 -4
- package/cjs/utils/array.d.cts +29 -0
- package/cjs/utils/dom.cjs +5 -4
- package/cjs/utils/dom.d.cts +105 -0
- package/cjs/utils/events.cjs +10 -9
- package/cjs/utils/events.d.cts +70 -0
- package/cjs/utils/focus.cjs +17 -16
- package/cjs/utils/focus.d.cts +117 -0
- package/cjs/utils/misc.cjs +7 -4
- package/cjs/utils/misc.d.cts +124 -0
- package/cjs/utils/misc.d.ts +7 -0
- package/cjs/utils/platform.cjs +6 -5
- package/cjs/utils/platform.d.cts +20 -0
- package/cjs/utils/store.cjs +6 -5
- package/cjs/utils/store.d.cts +71 -0
- package/cjs/utils/types.cjs +1 -1
- package/cjs/utils/types.d.cts +74 -0
- package/esm/__chunks/{PNRLI7OV.js → 2SMRF6AD.js} +1 -0
- package/esm/__chunks/{UCFCIHEU.js → 5UJPJ37G.js} +2 -1
- package/esm/__chunks/{5XEKIOCW.js → 7PRQYBBV.js} +2 -0
- package/esm/__chunks/{WVTCK5PV.js → D23ES3Z4.js} +6 -1
- package/esm/__chunks/{BL2LUIIN.js → FGW7QUD2.js} +6 -5
- package/esm/__chunks/{DEGIJZ7N.js → GME4NYXR.js} +28 -14
- package/esm/__chunks/{BE4I5ZDQ.js → I7YGHQ4Z.js} +2 -1
- package/esm/__chunks/{A2JA3CYE.js → LWQU4J4N.js} +5 -4
- package/esm/__chunks/{O35LWD4W.js → NIF7E7VE.js} +2 -0
- package/esm/__chunks/{STQCKYT6.js → Q332EHXG.js} +5 -4
- package/esm/__chunks/{OZ4NH3RO.js → TEJLMP2M.js} +8 -8
- package/esm/__chunks/{LTJQMYBN.js → VEWADM34.js} +5 -4
- package/esm/checkbox/checkbox-store.js +4 -3
- package/esm/collection/collection-store.js +6 -5
- package/esm/combobox/combobox-store.js +12 -11
- package/esm/composite/composite-overflow-store.js +7 -6
- package/esm/composite/composite-store.js +8 -7
- package/esm/dialog/dialog-store.js +6 -5
- package/esm/disclosure/disclosure-store.d.ts +1 -0
- package/esm/disclosure/disclosure-store.js +5 -4
- package/esm/form/form-store.js +6 -5
- package/esm/form/types.js +1 -0
- package/esm/hovercard/hovercard-store.js +8 -7
- package/esm/index.js +2 -1
- package/esm/menu/menu-bar-store.js +8 -7
- package/esm/menu/menu-store.js +12 -11
- package/esm/popover/popover-store.js +7 -6
- package/esm/radio/radio-store.js +8 -7
- package/esm/select/select-store.js +11 -10
- package/esm/tab/tab-store.js +8 -7
- package/esm/toolbar/toolbar-store.js +8 -7
- package/esm/tooltip/tooltip-store.js +8 -7
- package/esm/utils/array.js +3 -2
- package/esm/utils/dom.js +3 -2
- package/esm/utils/events.js +4 -3
- package/esm/utils/focus.js +3 -2
- package/esm/utils/misc.d.ts +7 -0
- package/esm/utils/misc.js +5 -2
- package/esm/utils/platform.js +4 -3
- package/esm/utils/store.js +4 -3
- package/esm/utils/types.js +1 -0
- package/package.json +109 -28
- package/cjs/__chunks/ZRCUNIY2.cjs +0 -41
- package/cjs/tsconfig.build.tsbuildinfo +0 -1
- package/esm/tsconfig.build.tsbuildinfo +0 -1
|
@@ -0,0 +1,236 @@
|
|
|
1
|
+
import type { CollectionStoreFunctions, CollectionStoreItem, CollectionStoreOptions, CollectionStoreState } from "../collection/collection-store.js";
|
|
2
|
+
import type { Store, StoreOptions, StoreProps } from "../utils/store.js";
|
|
3
|
+
import type { AnyObject, PickRequired, SetState, SetStateAction } from "../utils/types.js";
|
|
4
|
+
import type { DeepMap, DeepPartial, Names, StringLike } from "./types.js";
|
|
5
|
+
type Values = AnyObject;
|
|
6
|
+
type ErrorMessage = string | undefined | null;
|
|
7
|
+
type Item = CollectionStoreItem & {
|
|
8
|
+
type: "field" | "label" | "description" | "error" | "button";
|
|
9
|
+
name: string;
|
|
10
|
+
};
|
|
11
|
+
export declare function hasMessages(object: Values): boolean;
|
|
12
|
+
export declare function get<T>(values: Values, path: StringLike | string[], defaultValue?: T): T;
|
|
13
|
+
/**
|
|
14
|
+
* Creates a form store.
|
|
15
|
+
*/
|
|
16
|
+
export declare function createFormStore<T extends Values = Values>(props: PickRequired<FormStoreProps<T>, "values" | "defaultValues" | "errors" | "defaultErrors" | "touched" | "defaultTouched">): FormStore<T>;
|
|
17
|
+
export declare function createFormStore(props: FormStoreProps): FormStore;
|
|
18
|
+
export type FormStoreCallback<T extends FormStoreState = FormStoreState> = (state: T) => void | Promise<void>;
|
|
19
|
+
export type FormStoreValues = Values;
|
|
20
|
+
export type FormStoreItem = Item;
|
|
21
|
+
export interface FormStoreState<T extends Values = Values> extends CollectionStoreState<Item> {
|
|
22
|
+
/**
|
|
23
|
+
* Form values.
|
|
24
|
+
* @default {}
|
|
25
|
+
*/
|
|
26
|
+
values: T;
|
|
27
|
+
/**
|
|
28
|
+
* Form errors.
|
|
29
|
+
*/
|
|
30
|
+
errors: DeepPartial<DeepMap<T, ErrorMessage>>;
|
|
31
|
+
/**
|
|
32
|
+
* The touched state of the form.
|
|
33
|
+
*/
|
|
34
|
+
touched: DeepPartial<DeepMap<T, boolean>>;
|
|
35
|
+
/**
|
|
36
|
+
* Whether the form is valid.
|
|
37
|
+
*/
|
|
38
|
+
valid: boolean;
|
|
39
|
+
/**
|
|
40
|
+
* Whether the form is validating.
|
|
41
|
+
*/
|
|
42
|
+
validating: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* Whether the form is submitting.
|
|
45
|
+
*/
|
|
46
|
+
submitting: boolean;
|
|
47
|
+
/**
|
|
48
|
+
* The number of times `form.submit` has been called with a successful
|
|
49
|
+
* response.
|
|
50
|
+
*/
|
|
51
|
+
submitSucceed: number;
|
|
52
|
+
/**
|
|
53
|
+
* The number of times `form.submit` has been called with an error response.
|
|
54
|
+
*/
|
|
55
|
+
submitFailed: number;
|
|
56
|
+
}
|
|
57
|
+
export interface FormStoreFunctions<T extends Values = Values> extends CollectionStoreFunctions<Item> {
|
|
58
|
+
/**
|
|
59
|
+
* An object containing the names of the form fields for type-safety.
|
|
60
|
+
* @example
|
|
61
|
+
* store.names.name; // "name"
|
|
62
|
+
* store.names.name.first; // "name.first"
|
|
63
|
+
* store.names.name.last; // "name.last"
|
|
64
|
+
*/
|
|
65
|
+
names: Names<T>;
|
|
66
|
+
/**
|
|
67
|
+
* Sets the `values` state.
|
|
68
|
+
* @example
|
|
69
|
+
* store.setValues({ name: "John" });
|
|
70
|
+
* store.setValues((values) => ({ ...values, name: "John" }));
|
|
71
|
+
*/
|
|
72
|
+
setValues: SetState<FormStoreState<T>["values"]>;
|
|
73
|
+
/**
|
|
74
|
+
* Retrieves a field value.
|
|
75
|
+
* @param name The field name.
|
|
76
|
+
* @example
|
|
77
|
+
* const nameValue = store.getValue("name");
|
|
78
|
+
* // Can also use store.names for type-safety.
|
|
79
|
+
* const emailValue = store.getValue(store.names.email);
|
|
80
|
+
*/
|
|
81
|
+
getValue: <T = any>(name: StringLike) => T;
|
|
82
|
+
/**
|
|
83
|
+
* Sets a field value.
|
|
84
|
+
* @param name The field name.
|
|
85
|
+
* @param value The field value.
|
|
86
|
+
* @example
|
|
87
|
+
* store.setValue("name", "John");
|
|
88
|
+
* store.setValue("name", (value) => value + " Doe");
|
|
89
|
+
* // Can also use store.names for type-safety.
|
|
90
|
+
* store.setValue(store.names.name, "John");
|
|
91
|
+
*/
|
|
92
|
+
setValue: <T>(name: StringLike, value: SetStateAction<T>) => void;
|
|
93
|
+
/**
|
|
94
|
+
* Pushes a value to an array field.
|
|
95
|
+
* @param name The array field name.
|
|
96
|
+
* @param value The value to push.
|
|
97
|
+
* @example
|
|
98
|
+
* store.pushValue("tags", "new tag");
|
|
99
|
+
* store.pushValue("tags", { id: 1, name: "new tag" });
|
|
100
|
+
* // Can also use store.names for type-safety.
|
|
101
|
+
* store.pushValue(store.names.tags, "new tag");
|
|
102
|
+
*/
|
|
103
|
+
pushValue: <T>(name: StringLike, value: T) => void;
|
|
104
|
+
/**
|
|
105
|
+
* Removes a value from an array field.
|
|
106
|
+
* @param name The array field name.
|
|
107
|
+
* @param index The index of the value to remove.
|
|
108
|
+
* @example
|
|
109
|
+
* store.removeValue("tags", 0);
|
|
110
|
+
* store.removeValue("tags", 1);
|
|
111
|
+
* // Can also use store.names for type-safety.
|
|
112
|
+
* store.removeValue(store.names.tags, 0);
|
|
113
|
+
*/
|
|
114
|
+
removeValue: (name: StringLike, index: number) => void;
|
|
115
|
+
/**
|
|
116
|
+
* Sets the `errors` state.
|
|
117
|
+
* @example
|
|
118
|
+
* store.setErrors({ name: "Name is required" });
|
|
119
|
+
* store.setErrors((errors) => ({ ...errors, name: "Name is required" }));
|
|
120
|
+
*/
|
|
121
|
+
setErrors: SetState<FormStoreState<T>["errors"]>;
|
|
122
|
+
/**
|
|
123
|
+
* Retrieves a field error.
|
|
124
|
+
* @param name The field name.
|
|
125
|
+
* @example
|
|
126
|
+
* const nameError = store.getError("name");
|
|
127
|
+
* // Can also use store.names for type-safety.
|
|
128
|
+
* const emailError = store.getError(store.names.email);
|
|
129
|
+
*/
|
|
130
|
+
getError: (name: StringLike) => ErrorMessage;
|
|
131
|
+
/**
|
|
132
|
+
* Sets a field error.
|
|
133
|
+
* @param name The field name.
|
|
134
|
+
* @param error The field error.
|
|
135
|
+
* @example
|
|
136
|
+
* store.setError("name", "Name is required");
|
|
137
|
+
* store.setError("name", (error) => error + "!");
|
|
138
|
+
* // Can also use store.names for type-safety.
|
|
139
|
+
* store.setError(store.names.name, "Name is required");
|
|
140
|
+
*/
|
|
141
|
+
setError: (name: StringLike, error: SetStateAction<ErrorMessage>) => void;
|
|
142
|
+
/**
|
|
143
|
+
* Sets the `touched` state.
|
|
144
|
+
* @example
|
|
145
|
+
* store.setTouched({ name: true });
|
|
146
|
+
* store.setTouched((touched) => ({ ...touched, name: true }));
|
|
147
|
+
*/
|
|
148
|
+
setTouched: SetState<FormStoreState<T>["touched"]>;
|
|
149
|
+
/**
|
|
150
|
+
* Retrieves a field touched state.
|
|
151
|
+
* @param name The field name.
|
|
152
|
+
* @example
|
|
153
|
+
* const nameTouched = store.getFieldTouched("name");
|
|
154
|
+
* // Can also use store.names for type-safety.
|
|
155
|
+
* const emailTouched = store.getFieldTouched(store.names.email);
|
|
156
|
+
*/
|
|
157
|
+
getFieldTouched: (name: StringLike) => boolean;
|
|
158
|
+
/**
|
|
159
|
+
* Sets a field touched state.
|
|
160
|
+
* @param name The field name.
|
|
161
|
+
* @param value The field touched state.
|
|
162
|
+
* @example
|
|
163
|
+
* store.setFieldTouched("name", true);
|
|
164
|
+
* store.setFieldTouched("name", (value) => !value);
|
|
165
|
+
* // Can also use store.names for type-safety.
|
|
166
|
+
* store.setFieldTouched(store.names.name, true);
|
|
167
|
+
*/
|
|
168
|
+
setFieldTouched: (name: StringLike, value: SetStateAction<boolean>) => void;
|
|
169
|
+
/**
|
|
170
|
+
* Function that accepts a callback that will be used to validate the form
|
|
171
|
+
* when `validate` is called. It returns a cleanup function that will remove
|
|
172
|
+
* the callback.
|
|
173
|
+
* @param callback The callback function.
|
|
174
|
+
* @example
|
|
175
|
+
* const cleanup = store.onValidate(async (state) => {
|
|
176
|
+
* const errors = await api.validate(state.values);
|
|
177
|
+
* if (errors) {
|
|
178
|
+
* store.setErrors(errors);
|
|
179
|
+
* }
|
|
180
|
+
* });
|
|
181
|
+
*/
|
|
182
|
+
onValidate: (callback: FormStoreCallback<FormStoreState<T>>) => void;
|
|
183
|
+
/**
|
|
184
|
+
* Function that accepts a callback that will be used to submit the form
|
|
185
|
+
* when `submit` is called. It returns a cleanup function that will remove
|
|
186
|
+
* the callback.
|
|
187
|
+
* @param callback The callback function.
|
|
188
|
+
* @example
|
|
189
|
+
* const cleanup = store.onSubmit(async (state) => {
|
|
190
|
+
* try {
|
|
191
|
+
* await api.submit(state.values);
|
|
192
|
+
* } catch (errors) {
|
|
193
|
+
* store.setErrors(errors);
|
|
194
|
+
* }
|
|
195
|
+
* });
|
|
196
|
+
*/
|
|
197
|
+
onSubmit: (callback: FormStoreCallback<FormStoreState<T>>) => void;
|
|
198
|
+
/**
|
|
199
|
+
* Validates the form.
|
|
200
|
+
* @example
|
|
201
|
+
* if (await store.validate()) {
|
|
202
|
+
* // Form is valid.
|
|
203
|
+
* }
|
|
204
|
+
*/
|
|
205
|
+
validate: () => Promise<boolean>;
|
|
206
|
+
/**
|
|
207
|
+
* Submits the form. This also triggers validation.
|
|
208
|
+
* @example
|
|
209
|
+
* if (await form.submit()) {
|
|
210
|
+
* // Form is submitted.
|
|
211
|
+
* }
|
|
212
|
+
*/
|
|
213
|
+
submit: () => Promise<boolean>;
|
|
214
|
+
/**
|
|
215
|
+
* Resets the form to its default values.
|
|
216
|
+
*/
|
|
217
|
+
reset: () => void;
|
|
218
|
+
}
|
|
219
|
+
export interface FormStoreOptions<T extends Values = Values> extends StoreOptions<FormStoreState<T>, "values" | "errors" | "touched">, CollectionStoreOptions<Item> {
|
|
220
|
+
/**
|
|
221
|
+
* The default values of the form.
|
|
222
|
+
* @default {}
|
|
223
|
+
*/
|
|
224
|
+
defaultValues?: FormStoreState<T>["values"];
|
|
225
|
+
/**
|
|
226
|
+
* The default errors of the form.
|
|
227
|
+
*/
|
|
228
|
+
defaultErrors?: FormStoreState<T>["errors"];
|
|
229
|
+
/**
|
|
230
|
+
* The default touched state of the form.
|
|
231
|
+
*/
|
|
232
|
+
defaultTouched?: FormStoreState<T>["touched"];
|
|
233
|
+
}
|
|
234
|
+
export type FormStoreProps<T extends Values = Values> = FormStoreOptions<T> & StoreProps<FormStoreState<T>>;
|
|
235
|
+
export type FormStore<T extends Values = Values> = FormStoreFunctions<T> & Store<FormStoreState<T>>;
|
|
236
|
+
export {};
|
package/cjs/form/types.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";"use client";
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import type { AnyObject } from "../utils/types.js";
|
|
2
|
+
/**
|
|
3
|
+
* An object or primitive value that can be converted to a string.
|
|
4
|
+
*/
|
|
5
|
+
export type StringLike = {
|
|
6
|
+
toString: () => string;
|
|
7
|
+
valueOf: () => string;
|
|
8
|
+
};
|
|
9
|
+
/**
|
|
10
|
+
* Maps through an object `T` or array and defines the leaf values to the given
|
|
11
|
+
* type `V`.
|
|
12
|
+
* @template T Object
|
|
13
|
+
* @template V Value
|
|
14
|
+
*/
|
|
15
|
+
export type DeepMap<T, V> = {
|
|
16
|
+
[K in keyof T]: T[K] extends AnyObject ? DeepMap<T[K], V> : V;
|
|
17
|
+
};
|
|
18
|
+
/**
|
|
19
|
+
* Similar to `Partial<T>`, but recursively maps through the object and makes
|
|
20
|
+
* nested object properties optional.
|
|
21
|
+
* @template T Object
|
|
22
|
+
*/
|
|
23
|
+
export type DeepPartial<T> = {
|
|
24
|
+
[K in keyof T]?: T[K] extends AnyObject ? DeepPartial<T[K]> : T[K];
|
|
25
|
+
};
|
|
26
|
+
/**
|
|
27
|
+
* Maps through the values object `T` and defines all properties into a string
|
|
28
|
+
* like type. That is, a type that is an object that can contain other
|
|
29
|
+
* properties but can also be converted into a string with the path name.
|
|
30
|
+
* @template T Values object
|
|
31
|
+
*/
|
|
32
|
+
export type Names<T> = {
|
|
33
|
+
[K in keyof T]: T[K] extends Array<infer U> ? U extends AnyObject ? {
|
|
34
|
+
[key: number]: Names<U>;
|
|
35
|
+
} & StringLike : {
|
|
36
|
+
[key: number]: U & StringLike;
|
|
37
|
+
} & StringLike : T[K] extends AnyObject ? Names<T[K]> : StringLike;
|
|
38
|
+
};
|
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
|
|
2
2
|
|
|
3
|
-
var _ZRCUNIY2cjs = require('../__chunks/ZRCUNIY2.cjs');
|
|
4
|
-
require('../__chunks/AIHTEA5D.cjs');
|
|
5
|
-
require('../__chunks/GHET3DES.cjs');
|
|
6
|
-
require('../__chunks/52LQV3SV.cjs');
|
|
7
|
-
require('../__chunks/7GWXP6CQ.cjs');
|
|
8
|
-
require('../__chunks/RCYVACJO.cjs');
|
|
9
|
-
require('../__chunks/72I2GWXF.cjs');
|
|
10
3
|
|
|
4
|
+
var _LUOEAZGUcjs = require('../__chunks/LUOEAZGU.cjs');
|
|
5
|
+
require('../__chunks/ROX3MRGO.cjs');
|
|
6
|
+
require('../__chunks/MLPOXRDT.cjs');
|
|
7
|
+
require('../__chunks/YXSGST3H.cjs');
|
|
8
|
+
require('../__chunks/OASSVCYR.cjs');
|
|
9
|
+
require('../__chunks/LMT335NJ.cjs');
|
|
10
|
+
require('../__chunks/WYXAWBLE.cjs');
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
|
|
13
|
+
exports.createHovercardStore = _LUOEAZGUcjs.createHovercardStore;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import type { PopoverStoreFunctions, PopoverStoreOptions, PopoverStoreState } from "../popover/popover-store.js";
|
|
2
|
+
import type { Store, StoreOptions, StoreProps } from "../utils/store.js";
|
|
3
|
+
import type { SetState } from "../utils/types.js";
|
|
4
|
+
/**
|
|
5
|
+
* Creates a hovercard store.
|
|
6
|
+
*/
|
|
7
|
+
export declare function createHovercardStore(props?: HovercardStoreProps): HovercardStore;
|
|
8
|
+
export interface HovercardStoreState extends PopoverStoreState {
|
|
9
|
+
/**
|
|
10
|
+
* @default "bottom"
|
|
11
|
+
*/
|
|
12
|
+
placement: PopoverStoreState["placement"];
|
|
13
|
+
/**
|
|
14
|
+
* The amount of time in milliseconds to wait before showing and hiding the
|
|
15
|
+
* popover. To control the delay for showing and hiding separately, use
|
|
16
|
+
* `showTimeout` and `hideTimeout`.
|
|
17
|
+
* @default 500
|
|
18
|
+
*/
|
|
19
|
+
timeout: number;
|
|
20
|
+
/**
|
|
21
|
+
* The amount of time in milliseconds to wait before **showing** the popover.
|
|
22
|
+
* It defaults to the value passed to `timeout`.
|
|
23
|
+
*/
|
|
24
|
+
showTimeout?: number;
|
|
25
|
+
/**
|
|
26
|
+
* The amount of time in milliseconds to wait before **hiding** the popover.
|
|
27
|
+
* It defaults to the value passed to `timeout`.
|
|
28
|
+
*/
|
|
29
|
+
hideTimeout?: number;
|
|
30
|
+
/**
|
|
31
|
+
* Whether the popover or an element inside it should be focused when it is
|
|
32
|
+
* shown.
|
|
33
|
+
* @default false
|
|
34
|
+
*/
|
|
35
|
+
autoFocusOnShow: boolean;
|
|
36
|
+
}
|
|
37
|
+
export interface HovercardStoreFunctions extends PopoverStoreFunctions {
|
|
38
|
+
/**
|
|
39
|
+
* Sets the `autoFocusOnShow` state.
|
|
40
|
+
*/
|
|
41
|
+
setAutoFocusOnShow: SetState<HovercardStoreState["autoFocusOnShow"]>;
|
|
42
|
+
}
|
|
43
|
+
export interface HovercardStoreOptions extends StoreOptions<HovercardStoreState, "placement" | "timeout" | "showTimeout" | "hideTimeout">, PopoverStoreOptions {
|
|
44
|
+
}
|
|
45
|
+
export type HovercardStoreProps = HovercardStoreOptions & StoreProps<HovercardStoreState>;
|
|
46
|
+
export type HovercardStore = HovercardStoreFunctions & Store<HovercardStoreState>;
|
package/cjs/index.cjs
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
|
|
2
|
+
require('./__chunks/WYXAWBLE.cjs');
|
|
2
3
|
|
|
3
4
|
// src/index.ts
|
|
4
5
|
var src_default = {};
|
package/cjs/index.d.cts
ADDED
|
@@ -1,29 +1,30 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
|
|
2
2
|
|
|
3
|
-
var _4OD4ZFRGcjs = require('../__chunks/4OD4ZFRG.cjs');
|
|
4
|
-
require('../__chunks/4L3HCXJY.cjs');
|
|
5
|
-
require('../__chunks/7GWXP6CQ.cjs');
|
|
6
3
|
|
|
4
|
+
var _M44E4T5Acjs = require('../__chunks/M44E4T5A.cjs');
|
|
5
|
+
require('../__chunks/25WWT2VO.cjs');
|
|
6
|
+
require('../__chunks/OASSVCYR.cjs');
|
|
7
7
|
|
|
8
|
-
var _RCYVACJOcjs = require('../__chunks/RCYVACJO.cjs');
|
|
9
|
-
require('../__chunks/EXM2AW52.cjs');
|
|
10
|
-
require('../__chunks/GDZQUFNP.cjs');
|
|
11
8
|
|
|
9
|
+
var _LMT335NJcjs = require('../__chunks/LMT335NJ.cjs');
|
|
10
|
+
require('../__chunks/FTB5CXVB.cjs');
|
|
11
|
+
require('../__chunks/ULSPM3Y3.cjs');
|
|
12
12
|
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
|
|
15
|
+
var _WYXAWBLEcjs = require('../__chunks/WYXAWBLE.cjs');
|
|
15
16
|
|
|
16
17
|
// src/menu/menu-bar-store.ts
|
|
17
18
|
function createMenuBarStore(props = {}) {
|
|
18
19
|
var _a;
|
|
19
20
|
const syncState = (_a = props.store) == null ? void 0 : _a.getState();
|
|
20
|
-
return
|
|
21
|
-
orientation:
|
|
21
|
+
return _M44E4T5Acjs.createCompositeStore.call(void 0, _WYXAWBLEcjs.__spreadProps.call(void 0, _WYXAWBLEcjs.__spreadValues.call(void 0, {}, props), {
|
|
22
|
+
orientation: _LMT335NJcjs.defaultValue.call(void 0,
|
|
22
23
|
props.orientation,
|
|
23
24
|
syncState == null ? void 0 : syncState.orientation,
|
|
24
25
|
"horizontal"
|
|
25
26
|
),
|
|
26
|
-
focusLoop:
|
|
27
|
+
focusLoop: _LMT335NJcjs.defaultValue.call(void 0, props.focusLoop, syncState == null ? void 0 : syncState.focusLoop, true)
|
|
27
28
|
}));
|
|
28
29
|
}
|
|
29
30
|
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { CompositeStore, CompositeStoreFunctions, CompositeStoreOptions, CompositeStoreProps, CompositeStoreState } from "../composite/composite-store.js";
|
|
2
|
+
/**
|
|
3
|
+
* Creates a menu bar store.
|
|
4
|
+
*/
|
|
5
|
+
export declare function createMenuBarStore(props?: MenuBarStoreProps): MenuBarStore;
|
|
6
|
+
export type MenuBarStoreState = CompositeStoreState;
|
|
7
|
+
export type MenuBarStoreFunctions = CompositeStoreFunctions;
|
|
8
|
+
export type MenuBarStoreOptions = CompositeStoreOptions;
|
|
9
|
+
export type MenuBarStoreProps = CompositeStoreProps;
|
|
10
|
+
export type MenuBarStore = CompositeStore;
|
package/cjs/menu/menu-store.cjs
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
|
|
2
2
|
|
|
3
|
-
var _ZRCUNIY2cjs = require('../__chunks/ZRCUNIY2.cjs');
|
|
4
|
-
require('../__chunks/AIHTEA5D.cjs');
|
|
5
|
-
require('../__chunks/GHET3DES.cjs');
|
|
6
|
-
require('../__chunks/52LQV3SV.cjs');
|
|
7
3
|
|
|
4
|
+
var _LUOEAZGUcjs = require('../__chunks/LUOEAZGU.cjs');
|
|
5
|
+
require('../__chunks/ROX3MRGO.cjs');
|
|
6
|
+
require('../__chunks/MLPOXRDT.cjs');
|
|
7
|
+
require('../__chunks/YXSGST3H.cjs');
|
|
8
8
|
|
|
9
|
-
var _4OD4ZFRGcjs = require('../__chunks/4OD4ZFRG.cjs');
|
|
10
|
-
require('../__chunks/4L3HCXJY.cjs');
|
|
11
9
|
|
|
10
|
+
var _M44E4T5Acjs = require('../__chunks/M44E4T5A.cjs');
|
|
11
|
+
require('../__chunks/25WWT2VO.cjs');
|
|
12
12
|
|
|
13
13
|
|
|
14
14
|
|
|
@@ -16,18 +16,19 @@ require('../__chunks/4L3HCXJY.cjs');
|
|
|
16
16
|
|
|
17
17
|
|
|
18
18
|
|
|
19
|
-
var _7GWXP6CQcjs = require('../__chunks/7GWXP6CQ.cjs');
|
|
20
19
|
|
|
20
|
+
var _OASSVCYRcjs = require('../__chunks/OASSVCYR.cjs');
|
|
21
21
|
|
|
22
22
|
|
|
23
|
-
var _RCYVACJOcjs = require('../__chunks/RCYVACJO.cjs');
|
|
24
|
-
require('../__chunks/EXM2AW52.cjs');
|
|
25
|
-
require('../__chunks/GDZQUFNP.cjs');
|
|
26
23
|
|
|
24
|
+
var _LMT335NJcjs = require('../__chunks/LMT335NJ.cjs');
|
|
25
|
+
require('../__chunks/FTB5CXVB.cjs');
|
|
26
|
+
require('../__chunks/ULSPM3Y3.cjs');
|
|
27
27
|
|
|
28
28
|
|
|
29
29
|
|
|
30
|
-
|
|
30
|
+
|
|
31
|
+
var _WYXAWBLEcjs = require('../__chunks/WYXAWBLE.cjs');
|
|
31
32
|
|
|
32
33
|
// src/menu/menu-store.ts
|
|
33
34
|
function createMenuStore(_a = {}) {
|
|
@@ -35,16 +36,16 @@ function createMenuStore(_a = {}) {
|
|
|
35
36
|
combobox,
|
|
36
37
|
parent,
|
|
37
38
|
menubar
|
|
38
|
-
} = _b, props =
|
|
39
|
+
} = _b, props = _WYXAWBLEcjs.__objRest.call(void 0, _b, [
|
|
39
40
|
"combobox",
|
|
40
41
|
"parent",
|
|
41
42
|
"menubar"
|
|
42
43
|
]);
|
|
43
44
|
const parentIsMenubar = !!menubar && !parent;
|
|
44
|
-
const store =
|
|
45
|
+
const store = _OASSVCYRcjs.mergeStore.call(void 0,
|
|
45
46
|
props.store,
|
|
46
|
-
|
|
47
|
-
|
|
47
|
+
_OASSVCYRcjs.pick.call(void 0, parent, ["values"]),
|
|
48
|
+
_OASSVCYRcjs.omit.call(void 0, combobox, [
|
|
48
49
|
"arrowElement",
|
|
49
50
|
"anchorElement",
|
|
50
51
|
"contentElement",
|
|
@@ -52,58 +53,58 @@ function createMenuStore(_a = {}) {
|
|
|
52
53
|
"disclosureElement"
|
|
53
54
|
])
|
|
54
55
|
);
|
|
55
|
-
|
|
56
|
+
_OASSVCYRcjs.throwOnConflictingProps.call(void 0, props, store);
|
|
56
57
|
const syncState = store.getState();
|
|
57
|
-
const composite =
|
|
58
|
+
const composite = _M44E4T5Acjs.createCompositeStore.call(void 0, _WYXAWBLEcjs.__spreadProps.call(void 0, _WYXAWBLEcjs.__spreadValues.call(void 0, {}, props), {
|
|
58
59
|
store,
|
|
59
|
-
orientation:
|
|
60
|
+
orientation: _LMT335NJcjs.defaultValue.call(void 0,
|
|
60
61
|
props.orientation,
|
|
61
62
|
syncState.orientation,
|
|
62
63
|
"vertical"
|
|
63
64
|
)
|
|
64
65
|
}));
|
|
65
|
-
const hovercard =
|
|
66
|
+
const hovercard = _LUOEAZGUcjs.createHovercardStore.call(void 0, _WYXAWBLEcjs.__spreadProps.call(void 0, _WYXAWBLEcjs.__spreadValues.call(void 0, {}, props), {
|
|
66
67
|
store,
|
|
67
|
-
placement:
|
|
68
|
+
placement: _LMT335NJcjs.defaultValue.call(void 0,
|
|
68
69
|
props.placement,
|
|
69
70
|
syncState.placement,
|
|
70
71
|
"bottom-start"
|
|
71
72
|
),
|
|
72
|
-
timeout:
|
|
73
|
+
timeout: _LMT335NJcjs.defaultValue.call(void 0,
|
|
73
74
|
props.timeout,
|
|
74
75
|
syncState.timeout,
|
|
75
76
|
parentIsMenubar ? 0 : 150
|
|
76
77
|
),
|
|
77
|
-
hideTimeout:
|
|
78
|
+
hideTimeout: _LMT335NJcjs.defaultValue.call(void 0, props.hideTimeout, syncState.hideTimeout, 0)
|
|
78
79
|
}));
|
|
79
|
-
const initialState =
|
|
80
|
-
initialFocus:
|
|
81
|
-
values:
|
|
80
|
+
const initialState = _WYXAWBLEcjs.__spreadProps.call(void 0, _WYXAWBLEcjs.__spreadValues.call(void 0, _WYXAWBLEcjs.__spreadValues.call(void 0, {}, composite.getState()), hovercard.getState()), {
|
|
81
|
+
initialFocus: _LMT335NJcjs.defaultValue.call(void 0, syncState.initialFocus, "container"),
|
|
82
|
+
values: _LMT335NJcjs.defaultValue.call(void 0,
|
|
82
83
|
props.values,
|
|
83
84
|
syncState.values,
|
|
84
85
|
props.defaultValues,
|
|
85
86
|
{}
|
|
86
87
|
)
|
|
87
88
|
});
|
|
88
|
-
const menu =
|
|
89
|
-
|
|
89
|
+
const menu = _OASSVCYRcjs.createStore.call(void 0, initialState, composite, hovercard, store);
|
|
90
|
+
_OASSVCYRcjs.setup.call(void 0,
|
|
90
91
|
menu,
|
|
91
|
-
() =>
|
|
92
|
+
() => _OASSVCYRcjs.sync.call(void 0, menu, ["mounted"], (state) => {
|
|
92
93
|
if (state.mounted)
|
|
93
94
|
return;
|
|
94
95
|
menu.setState("activeId", null);
|
|
95
96
|
})
|
|
96
97
|
);
|
|
97
|
-
|
|
98
|
+
_OASSVCYRcjs.setup.call(void 0,
|
|
98
99
|
menu,
|
|
99
|
-
() =>
|
|
100
|
+
() => _OASSVCYRcjs.sync.call(void 0, parent, ["orientation"], (state) => {
|
|
100
101
|
menu.setState(
|
|
101
102
|
"placement",
|
|
102
103
|
state.orientation === "vertical" ? "right-start" : "bottom-start"
|
|
103
104
|
);
|
|
104
105
|
})
|
|
105
106
|
);
|
|
106
|
-
return
|
|
107
|
+
return _WYXAWBLEcjs.__spreadProps.call(void 0, _WYXAWBLEcjs.__spreadValues.call(void 0, _WYXAWBLEcjs.__spreadValues.call(void 0, _WYXAWBLEcjs.__spreadValues.call(void 0, {}, composite), hovercard), menu), {
|
|
107
108
|
combobox,
|
|
108
109
|
parent,
|
|
109
110
|
menubar,
|
|
@@ -122,10 +123,10 @@ function createMenuStore(_a = {}) {
|
|
|
122
123
|
return;
|
|
123
124
|
menu.setState("values", (values) => {
|
|
124
125
|
const prevValue = values[name];
|
|
125
|
-
const nextValue =
|
|
126
|
+
const nextValue = _LMT335NJcjs.applyState.call(void 0, value, prevValue);
|
|
126
127
|
if (nextValue === prevValue)
|
|
127
128
|
return values;
|
|
128
|
-
return
|
|
129
|
+
return _WYXAWBLEcjs.__spreadProps.call(void 0, _WYXAWBLEcjs.__spreadValues.call(void 0, {}, values), {
|
|
129
130
|
[name]: nextValue !== void 0 && nextValue
|
|
130
131
|
});
|
|
131
132
|
});
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import type { ComboboxStore } from "../combobox/combobox-store.js";
|
|
2
|
+
import type { CompositeStoreFunctions, CompositeStoreOptions, CompositeStoreState } from "../composite/composite-store.js";
|
|
3
|
+
import type { HovercardStoreFunctions, HovercardStoreOptions, HovercardStoreState } from "../hovercard/hovercard-store.js";
|
|
4
|
+
import type { Store, StoreOptions, StoreProps } from "../utils/store.js";
|
|
5
|
+
import type { BivariantCallback, PickRequired, SetState, SetStateAction } from "../utils/types.js";
|
|
6
|
+
import type { MenuBarStore } from "./menu-bar-store.js";
|
|
7
|
+
type Values = Record<string, string | boolean | number | Array<string | number>>;
|
|
8
|
+
export declare function createMenuStore<T extends Values = Values>(props: PickRequired<MenuStoreProps<T>, "values" | "defaultValues">): MenuStore<T>;
|
|
9
|
+
export declare function createMenuStore(props?: MenuStoreProps): MenuStore;
|
|
10
|
+
export type MenuStoreValues = Record<string, string | boolean | number | Array<string | number>>;
|
|
11
|
+
export interface MenuStoreState<T extends Values = Values> extends CompositeStoreState, HovercardStoreState {
|
|
12
|
+
/**
|
|
13
|
+
* Determines the element that should be focused when the menu is opened.
|
|
14
|
+
*/
|
|
15
|
+
initialFocus: "container" | "first" | "last";
|
|
16
|
+
/**
|
|
17
|
+
* A map of names and values that will be used by the `MenuItemCheckbox` and
|
|
18
|
+
* `MenuItemRadio` components.
|
|
19
|
+
*/
|
|
20
|
+
values: T;
|
|
21
|
+
/** @default "vertical" */
|
|
22
|
+
orientation: CompositeStoreState["orientation"];
|
|
23
|
+
/** @default "bottom-start" */
|
|
24
|
+
placement: HovercardStoreState["placement"];
|
|
25
|
+
/** @default 0 */
|
|
26
|
+
hideTimeout?: HovercardStoreState["hideTimeout"];
|
|
27
|
+
}
|
|
28
|
+
export interface MenuStoreFunctions<T extends Values = Values> extends Pick<MenuStoreOptions, "combobox" | "parent" | "menubar">, CompositeStoreFunctions, HovercardStoreFunctions {
|
|
29
|
+
/**
|
|
30
|
+
* Hides the menu and all its parent menus.
|
|
31
|
+
*/
|
|
32
|
+
hideAll: () => void;
|
|
33
|
+
/**
|
|
34
|
+
* Sets the `initialFocus` state.
|
|
35
|
+
*/
|
|
36
|
+
setInitialFocus: SetState<MenuStoreState<T>["initialFocus"]>;
|
|
37
|
+
/**
|
|
38
|
+
* Sets the `values` state.
|
|
39
|
+
* @example
|
|
40
|
+
* store.setValues({ watching: ["issues"] });
|
|
41
|
+
* store.setValues((values) => ({ ...values, watching: ["issues"] }));
|
|
42
|
+
*/
|
|
43
|
+
setValues: SetState<MenuStoreState<T>["values"]>;
|
|
44
|
+
/**
|
|
45
|
+
* Sets a specific menu value.
|
|
46
|
+
* @param name The name.
|
|
47
|
+
* @param value The value.
|
|
48
|
+
* @example
|
|
49
|
+
* store.setValue("watching", ["issues"]);
|
|
50
|
+
* store.setValue("watching", (value) => [...value, "issues"]);
|
|
51
|
+
*/
|
|
52
|
+
setValue: BivariantCallback<(name: string, value: SetStateAction<MenuStoreState<T>["values"][string]>) => void>;
|
|
53
|
+
}
|
|
54
|
+
export interface MenuStoreOptions<T extends Values = Values> extends StoreOptions<MenuStoreState<T>, "orientation" | "placement" | "hideTimeout" | "values">, CompositeStoreOptions, HovercardStoreOptions {
|
|
55
|
+
/**
|
|
56
|
+
* A reference to a combobox store. This is used when combining the combobox
|
|
57
|
+
* with a menu (e.g., dropdown menu with a search input). The stores will
|
|
58
|
+
* share the same state.
|
|
59
|
+
*/
|
|
60
|
+
combobox?: ComboboxStore | null;
|
|
61
|
+
/**
|
|
62
|
+
* A reference to a parent menu store. This should be used on nested menus.
|
|
63
|
+
*/
|
|
64
|
+
parent?: MenuStore | null;
|
|
65
|
+
/**
|
|
66
|
+
* A reference to a menu bar store. This should be used when rendering menus
|
|
67
|
+
* inside a menu bar.
|
|
68
|
+
*/
|
|
69
|
+
menubar?: MenuBarStore | null;
|
|
70
|
+
/**
|
|
71
|
+
* The default values for the `values` state.
|
|
72
|
+
* @default {}
|
|
73
|
+
*/
|
|
74
|
+
defaultValues?: MenuStoreState<T>["values"];
|
|
75
|
+
}
|
|
76
|
+
export type MenuStoreProps<T extends Values = Values> = MenuStoreOptions<T> & StoreProps<MenuStoreState<T>>;
|
|
77
|
+
export type MenuStore<T extends Values = Values> = MenuStoreFunctions<T> & Store<MenuStoreState<T>>;
|
|
78
|
+
export {};
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
|
|
2
2
|
|
|
3
|
-
var _AIHTEA5Dcjs = require('../__chunks/AIHTEA5D.cjs');
|
|
4
|
-
require('../__chunks/GHET3DES.cjs');
|
|
5
|
-
require('../__chunks/52LQV3SV.cjs');
|
|
6
|
-
require('../__chunks/7GWXP6CQ.cjs');
|
|
7
|
-
require('../__chunks/RCYVACJO.cjs');
|
|
8
|
-
require('../__chunks/72I2GWXF.cjs');
|
|
9
3
|
|
|
4
|
+
var _ROX3MRGOcjs = require('../__chunks/ROX3MRGO.cjs');
|
|
5
|
+
require('../__chunks/MLPOXRDT.cjs');
|
|
6
|
+
require('../__chunks/YXSGST3H.cjs');
|
|
7
|
+
require('../__chunks/OASSVCYR.cjs');
|
|
8
|
+
require('../__chunks/LMT335NJ.cjs');
|
|
9
|
+
require('../__chunks/WYXAWBLE.cjs');
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
|
|
12
|
+
exports.createPopoverStore = _ROX3MRGOcjs.createPopoverStore;
|