@limonify/zest-ui 0.1.4 → 0.1.5
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/lib/accordion/root/AccordionRoot.d.ts +4 -2
- package/lib/accordion/root/AccordionRoot.d.ts.map +1 -1
- package/lib/accordion/root/AccordionRoot.js +12 -3
- package/lib/accordion/root/AccordionRoot.js.map +1 -1
- package/lib/internals/useTransitionStatus.d.ts.map +1 -1
- package/lib/internals/useTransitionStatus.js +11 -13
- package/lib/internals/useTransitionStatus.js.map +1 -1
- package/package.json +1 -1
- package/src/accordion/root/AccordionRoot.tsx +22 -5
- package/src/internals/useTransitionStatus.ts +13 -11
|
@@ -26,16 +26,18 @@ export interface AccordionRootState<Value = any> {
|
|
|
26
26
|
export interface AccordionRootProps<Value = any> extends Omit<ZestUIComponentProps<typeof View, AccordionRootState<Value>>, 'value'> {
|
|
27
27
|
/**
|
|
28
28
|
* The controlled value of the item(s) that should be expanded.
|
|
29
|
+
* Accepts a single value or an array of values.
|
|
29
30
|
*
|
|
30
31
|
* To render an uncontrolled accordion, use the `defaultValue` prop instead.
|
|
31
32
|
*/
|
|
32
|
-
value?: AccordionValue<Value> | undefined;
|
|
33
|
+
value?: Value | AccordionValue<Value> | undefined;
|
|
33
34
|
/**
|
|
34
35
|
* The uncontrolled value of the item(s) that should be initially expanded.
|
|
36
|
+
* Accepts a single value or an array of values.
|
|
35
37
|
*
|
|
36
38
|
* To render a controlled accordion, use the `value` prop instead.
|
|
37
39
|
*/
|
|
38
|
-
defaultValue?: AccordionValue<Value> | undefined;
|
|
40
|
+
defaultValue?: Value | AccordionValue<Value> | undefined;
|
|
39
41
|
/**
|
|
40
42
|
* Whether the component should ignore user interaction.
|
|
41
43
|
* @default false
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionRoot.d.ts","sourceRoot":"","sources":["../../../src/accordion/root/AccordionRoot.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAIpC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AACnF,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAGnD;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,KAAK,GAAG,GAAG,EAAE,cAAc,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"AccordionRoot.d.ts","sourceRoot":"","sources":["../../../src/accordion/root/AccordionRoot.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAIpC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AACnF,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAGnD;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,KAAK,GAAG,GAAG,EAAE,cAAc,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,CAAC,qBA8FpF;AAED,MAAM,MAAM,cAAc,CAAC,KAAK,GAAG,GAAG,IAAI,KAAK,EAAE,CAAC;AAElD,MAAM,WAAW,kBAAkB,CAAC,KAAK,GAAG,GAAG;IAC7C;;OAEG;IACH,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IAC7B;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB,CAAC,KAAK,GAAG,GAAG,CAC7C,SAAQ,IAAI,CAAC,oBAAoB,CAAC,OAAO,IAAI,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC,EAAE,OAAO,CAAC;IACnF;;;;;OAKG;IACH,KAAK,CAAC,EAAE,KAAK,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IAClD;;;;;OAKG;IACH,YAAY,CAAC,EAAE,KAAK,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IACzD;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC;;;OAGG;IACH,aAAa,CAAC,EACV,CAAC,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,EAAE,YAAY,EAAE,aAAa,CAAC,kBAAkB,KAAK,IAAI,CAAC,GACxF,SAAS,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAChC;AAED,MAAM,MAAM,8BAA8B,GAAG,OAAO,OAAO,CAAC,YAAY,GAAG,OAAO,OAAO,CAAC,IAAI,CAAC;AAE/F,MAAM,MAAM,+BAA+B,GACzC,sBAAsB,CAAC,8BAA8B,CAAC,CAAC;AAEzD,yBAAiB,aAAa,CAAC;IAC7B,KAAY,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,cAAc,CAAC,MAAM,CAAC,CAAC;IACzD,KAAY,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAC7D,KAAY,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAC7D,KAAY,iBAAiB,GAAG,8BAA8B,CAAC;IAC/D,KAAY,kBAAkB,GAAG,+BAA+B,CAAC;CAClE"}
|
|
@@ -52,16 +52,25 @@ const AccordionRootContext_1 = require("./AccordionRootContext");
|
|
|
52
52
|
*/
|
|
53
53
|
function AccordionRoot(componentProps) {
|
|
54
54
|
const { className, defaultValue: defaultValueProp, disabled = false, keepMounted = false, multiple = false, onValueChange, render, style, value: valueProp, ref, ...elementProps } = componentProps;
|
|
55
|
+
const normalizeValue = React.useCallback((val) => {
|
|
56
|
+
if (val === undefined || val === null)
|
|
57
|
+
return undefined;
|
|
58
|
+
if (Array.isArray(val))
|
|
59
|
+
return val;
|
|
60
|
+
return [val];
|
|
61
|
+
}, []);
|
|
62
|
+
const normalizedValueProp = React.useMemo(() => normalizeValue(valueProp), [valueProp, normalizeValue]);
|
|
63
|
+
const normalizedDefaultValueProp = React.useMemo(() => normalizeValue(defaultValueProp), [defaultValueProp, normalizeValue]);
|
|
55
64
|
// Memoized to allow omitting both defaultValue and value, which would
|
|
56
65
|
// otherwise trigger a warning in useControlled.
|
|
57
66
|
const defaultValue = React.useMemo(() => {
|
|
58
67
|
if (valueProp === undefined) {
|
|
59
|
-
return
|
|
68
|
+
return normalizedDefaultValueProp !== null && normalizedDefaultValueProp !== void 0 ? normalizedDefaultValueProp : [];
|
|
60
69
|
}
|
|
61
70
|
return undefined;
|
|
62
|
-
}, [valueProp,
|
|
71
|
+
}, [valueProp, normalizedDefaultValueProp]);
|
|
63
72
|
const [value, setValue] = (0, useControlled_1.useControlled)({
|
|
64
|
-
controlled:
|
|
73
|
+
controlled: normalizedValueProp,
|
|
65
74
|
default: defaultValue,
|
|
66
75
|
name: 'Accordion',
|
|
67
76
|
state: 'value',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionRoot.js","sourceRoot":"","sources":["../../../src/accordion/root/AccordionRoot.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBb,
|
|
1
|
+
{"version":3,"file":"AccordionRoot.js","sourceRoot":"","sources":["../../../src/accordion/root/AccordionRoot.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTransitionStatus.d.ts","sourceRoot":"","sources":["../../src/internals/useTransitionStatus.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAE1E;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,OAAO,EACb,eAAe,GAAE,OAAe,EAChC,gBAAgB,GAAE,OAAe;;;;
|
|
1
|
+
{"version":3,"file":"useTransitionStatus.d.ts","sourceRoot":"","sources":["../../src/internals/useTransitionStatus.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAE1E;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,OAAO,EACb,eAAe,GAAE,OAAe,EAChC,gBAAgB,GAAE,OAAe;;;;EAuElC"}
|
|
@@ -52,18 +52,16 @@ const useAnimationFrame_1 = require("../hooks/useAnimationFrame");
|
|
|
52
52
|
function useTransitionStatus(open, enableIdleState = false, deferEndingState = false) {
|
|
53
53
|
const [transitionStatus, setTransitionStatus] = React.useState(open && enableIdleState ? 'idle' : undefined);
|
|
54
54
|
const [mounted, setMounted] = React.useState(open);
|
|
55
|
-
(
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
}
|
|
66
|
-
}, [open, mounted, transitionStatus, deferEndingState]);
|
|
55
|
+
if (open && !mounted) {
|
|
56
|
+
setMounted(true);
|
|
57
|
+
setTransitionStatus('starting');
|
|
58
|
+
}
|
|
59
|
+
if (!open && mounted && transitionStatus !== 'ending' && !deferEndingState) {
|
|
60
|
+
setTransitionStatus('ending');
|
|
61
|
+
}
|
|
62
|
+
if (!open && !mounted && transitionStatus === 'ending') {
|
|
63
|
+
setTransitionStatus(undefined);
|
|
64
|
+
}
|
|
67
65
|
(0, useIsoLayoutEffect_1.useIsoLayoutEffect)(() => {
|
|
68
66
|
if (!open && mounted && transitionStatus !== 'ending' && deferEndingState) {
|
|
69
67
|
const frame = useAnimationFrame_1.AnimationFrame.request(() => {
|
|
@@ -85,7 +83,7 @@ function useTransitionStatus(open, enableIdleState = false, deferEndingState = f
|
|
|
85
83
|
return () => {
|
|
86
84
|
useAnimationFrame_1.AnimationFrame.cancel(frame);
|
|
87
85
|
};
|
|
88
|
-
}, [enableIdleState, open]);
|
|
86
|
+
}, [enableIdleState, open, transitionStatus]);
|
|
89
87
|
(0, useIsoLayoutEffect_1.useIsoLayoutEffect)(() => {
|
|
90
88
|
if (!open || !enableIdleState) {
|
|
91
89
|
return undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTransitionStatus.js","sourceRoot":"","sources":["../../src/internals/useTransitionStatus.ts"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBb,
|
|
1
|
+
{"version":3,"file":"useTransitionStatus.js","sourceRoot":"","sources":["../../src/internals/useTransitionStatus.ts"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBb,kDA0EC;AA3FD,6CAA+B;AAC/B,oEAAiE;AACjE,kEAA4D;AAI5D;;;;;;;;;;GAUG;AACH,SAAgB,mBAAmB,CACjC,IAAa,EACb,kBAA2B,KAAK,EAChC,mBAA4B,KAAK;IAEjC,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAC5D,IAAI,IAAI,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAC7C,CAAC;IACF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEnD,IAAI,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;QACrB,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,mBAAmB,CAAC,UAAU,CAAC,CAAC;IAClC,CAAC;IAED,IAAI,CAAC,IAAI,IAAI,OAAO,IAAI,gBAAgB,KAAK,QAAQ,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC3E,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAChC,CAAC;IAED,IAAI,CAAC,IAAI,IAAI,CAAC,OAAO,IAAI,gBAAgB,KAAK,QAAQ,EAAE,CAAC;QACvD,mBAAmB,CAAC,SAAS,CAAC,CAAC;IACjC,CAAC;IAED,IAAA,uCAAkB,EAAC,GAAG,EAAE;QACtB,IAAI,CAAC,IAAI,IAAI,OAAO,IAAI,gBAAgB,KAAK,QAAQ,IAAI,gBAAgB,EAAE,CAAC;YAC1E,MAAM,KAAK,GAAG,kCAAc,CAAC,OAAO,CAAC,GAAG,EAAE;gBACxC,mBAAmB,CAAC,QAAQ,CAAC,CAAC;YAChC,CAAC,CAAC,CAAC;YAEH,OAAO,GAAG,EAAE;gBACV,kCAAc,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC/B,CAAC,CAAC;QACJ,CAAC;QAED,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAExD,IAAA,uCAAkB,EAAC,GAAG,EAAE;QACtB,IAAI,CAAC,IAAI,IAAI,eAAe,EAAE,CAAC;YAC7B,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,MAAM,KAAK,GAAG,kCAAc,CAAC,OAAO,CAAC,GAAG,EAAE;YACxC,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACjC,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,kCAAc,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC/B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,eAAe,EAAE,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAE9C,IAAA,uCAAkB,EAAC,GAAG,EAAE;QACtB,IAAI,CAAC,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YAC9B,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,IAAI,IAAI,IAAI,OAAO,IAAI,gBAAgB,KAAK,MAAM,EAAE,CAAC;YACnD,mBAAmB,CAAC,UAAU,CAAC,CAAC;QAClC,CAAC;QAED,MAAM,KAAK,GAAG,kCAAc,CAAC,OAAO,CAAC,GAAG,EAAE;YACxC,mBAAmB,CAAC,MAAM,CAAC,CAAC;QAC9B,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,kCAAc,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC/B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,eAAe,EAAE,IAAI,EAAE,OAAO,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAEvD,OAAO;QACL,OAAO;QACP,UAAU;QACV,gBAAgB;KACjB,CAAC;AACJ,CAAC"}
|
package/package.json
CHANGED
|
@@ -32,18 +32,33 @@ export function AccordionRoot<Value = any>(componentProps: AccordionRoot.Props<V
|
|
|
32
32
|
...elementProps
|
|
33
33
|
} = componentProps;
|
|
34
34
|
|
|
35
|
+
const normalizeValue = React.useCallback((val: any) => {
|
|
36
|
+
if (val === undefined || val === null) return undefined;
|
|
37
|
+
if (Array.isArray(val)) return val;
|
|
38
|
+
return [val];
|
|
39
|
+
}, []);
|
|
40
|
+
|
|
41
|
+
const normalizedValueProp = React.useMemo(
|
|
42
|
+
() => normalizeValue(valueProp),
|
|
43
|
+
[valueProp, normalizeValue],
|
|
44
|
+
);
|
|
45
|
+
const normalizedDefaultValueProp = React.useMemo(
|
|
46
|
+
() => normalizeValue(defaultValueProp),
|
|
47
|
+
[defaultValueProp, normalizeValue],
|
|
48
|
+
);
|
|
49
|
+
|
|
35
50
|
// Memoized to allow omitting both defaultValue and value, which would
|
|
36
51
|
// otherwise trigger a warning in useControlled.
|
|
37
52
|
const defaultValue = React.useMemo(() => {
|
|
38
53
|
if (valueProp === undefined) {
|
|
39
|
-
return
|
|
54
|
+
return normalizedDefaultValueProp ?? [];
|
|
40
55
|
}
|
|
41
56
|
|
|
42
57
|
return undefined;
|
|
43
|
-
}, [valueProp,
|
|
58
|
+
}, [valueProp, normalizedDefaultValueProp]);
|
|
44
59
|
|
|
45
60
|
const [value, setValue] = useControlled<AccordionValue<Value>>({
|
|
46
|
-
controlled:
|
|
61
|
+
controlled: normalizedValueProp,
|
|
47
62
|
default: defaultValue,
|
|
48
63
|
name: 'Accordion',
|
|
49
64
|
state: 'value',
|
|
@@ -115,16 +130,18 @@ export interface AccordionRootProps<Value = any>
|
|
|
115
130
|
extends Omit<ZestUIComponentProps<typeof View, AccordionRootState<Value>>, 'value'> {
|
|
116
131
|
/**
|
|
117
132
|
* The controlled value of the item(s) that should be expanded.
|
|
133
|
+
* Accepts a single value or an array of values.
|
|
118
134
|
*
|
|
119
135
|
* To render an uncontrolled accordion, use the `defaultValue` prop instead.
|
|
120
136
|
*/
|
|
121
|
-
value?: AccordionValue<Value> | undefined;
|
|
137
|
+
value?: Value | AccordionValue<Value> | undefined;
|
|
122
138
|
/**
|
|
123
139
|
* The uncontrolled value of the item(s) that should be initially expanded.
|
|
140
|
+
* Accepts a single value or an array of values.
|
|
124
141
|
*
|
|
125
142
|
* To render a controlled accordion, use the `value` prop instead.
|
|
126
143
|
*/
|
|
127
|
-
defaultValue?: AccordionValue<Value> | undefined;
|
|
144
|
+
defaultValue?: Value | AccordionValue<Value> | undefined;
|
|
128
145
|
/**
|
|
129
146
|
* Whether the component should ignore user interaction.
|
|
130
147
|
* @default false
|
|
@@ -26,16 +26,18 @@ export function useTransitionStatus(
|
|
|
26
26
|
);
|
|
27
27
|
const [mounted, setMounted] = React.useState(open);
|
|
28
28
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
29
|
+
if (open && !mounted) {
|
|
30
|
+
setMounted(true);
|
|
31
|
+
setTransitionStatus('starting');
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
if (!open && mounted && transitionStatus !== 'ending' && !deferEndingState) {
|
|
35
|
+
setTransitionStatus('ending');
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
if (!open && !mounted && transitionStatus === 'ending') {
|
|
39
|
+
setTransitionStatus(undefined);
|
|
40
|
+
}
|
|
39
41
|
|
|
40
42
|
useIsoLayoutEffect(() => {
|
|
41
43
|
if (!open && mounted && transitionStatus !== 'ending' && deferEndingState) {
|
|
@@ -63,7 +65,7 @@ export function useTransitionStatus(
|
|
|
63
65
|
return () => {
|
|
64
66
|
AnimationFrame.cancel(frame);
|
|
65
67
|
};
|
|
66
|
-
}, [enableIdleState, open]);
|
|
68
|
+
}, [enableIdleState, open, transitionStatus]);
|
|
67
69
|
|
|
68
70
|
useIsoLayoutEffect(() => {
|
|
69
71
|
if (!open || !enableIdleState) {
|