@limonify/zest-ui 0.1.2 → 0.1.3
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/index.d.ts +1 -0
- package/lib/accordion/index.d.ts.map +1 -1
- package/lib/accordion/index.js +3 -1
- package/lib/accordion/index.js.map +1 -1
- package/lib/accordion/panel/AccordionPanel.d.ts +19 -1
- package/lib/accordion/panel/AccordionPanel.d.ts.map +1 -1
- package/lib/accordion/panel/AccordionPanel.js +18 -2
- package/lib/accordion/panel/AccordionPanel.js.map +1 -1
- package/lib/collapsible/index.d.ts +1 -0
- package/lib/collapsible/index.d.ts.map +1 -1
- package/lib/collapsible/index.js +3 -1
- package/lib/collapsible/index.js.map +1 -1
- package/lib/collapsible/panel/CollapsiblePanel.d.ts +19 -1
- package/lib/collapsible/panel/CollapsiblePanel.d.ts.map +1 -1
- package/lib/collapsible/panel/CollapsiblePanel.js +18 -2
- package/lib/collapsible/panel/CollapsiblePanel.js.map +1 -1
- package/lib/collapsible/panel/CollapsiblePanelContext.d.ts +21 -0
- package/lib/collapsible/panel/CollapsiblePanelContext.d.ts.map +1 -0
- package/lib/collapsible/panel/CollapsiblePanelContext.js +48 -0
- package/lib/collapsible/panel/CollapsiblePanelContext.js.map +1 -0
- package/lib/collapsible/panel/useCollapsiblePanel.d.ts +17 -0
- package/lib/collapsible/panel/useCollapsiblePanel.d.ts.map +1 -1
- package/lib/collapsible/panel/useCollapsiblePanel.js +4 -2
- package/lib/collapsible/panel/useCollapsiblePanel.js.map +1 -1
- package/lib/switch/thumb/SwitchThumb.d.ts +19 -2
- package/lib/switch/thumb/SwitchThumb.d.ts.map +1 -1
- package/lib/switch/thumb/SwitchThumb.js +21 -3
- package/lib/switch/thumb/SwitchThumb.js.map +1 -1
- package/lib/toast/root/ToastRoot.d.ts +20 -8
- package/lib/toast/root/ToastRoot.d.ts.map +1 -1
- package/lib/toast/root/ToastRoot.js +28 -8
- package/lib/toast/root/ToastRoot.js.map +1 -1
- package/lib/toast/store.js +1 -1
- package/lib/toast/store.js.map +1 -1
- package/lib/toast/useToastManager.d.ts +7 -0
- package/lib/toast/useToastManager.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/accordion/index.ts +1 -0
- package/src/accordion/panel/AccordionPanel.tsx +40 -2
- package/src/collapsible/index.ts +1 -0
- package/src/collapsible/panel/CollapsiblePanel.tsx +40 -2
- package/src/collapsible/panel/CollapsiblePanelContext.ts +34 -0
- package/src/collapsible/panel/useCollapsiblePanel.tsx +27 -3
- package/src/switch/thumb/SwitchThumb.tsx +40 -5
- package/src/toast/root/ToastRoot.tsx +37 -9
- package/src/toast/store.ts +1 -1
- package/src/toast/useToastManager.ts +7 -0
package/lib/accordion/index.d.ts
CHANGED
|
@@ -6,4 +6,5 @@ export type * from './trigger/AccordionTrigger';
|
|
|
6
6
|
export type * from './panel/AccordionPanel';
|
|
7
7
|
export { useAccordionRootContext } from './root/AccordionRootContext';
|
|
8
8
|
export { useAccordionItemContext } from './item/AccordionItemContext';
|
|
9
|
+
export { useCollapsiblePanelState as useAccordionPanelState } from '../collapsible/panel/CollapsiblePanelContext';
|
|
9
10
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,SAAS,MAAM,eAAe,CAAC;AAE3C,mBAAmB,sBAAsB,CAAC;AAC1C,mBAAmB,sBAAsB,CAAC;AAC1C,mBAAmB,0BAA0B,CAAC;AAC9C,mBAAmB,4BAA4B,CAAC;AAChD,mBAAmB,wBAAwB,CAAC;AAC5C,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AACtE,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,SAAS,MAAM,eAAe,CAAC;AAE3C,mBAAmB,sBAAsB,CAAC;AAC1C,mBAAmB,sBAAsB,CAAC;AAC1C,mBAAmB,0BAA0B,CAAC;AAC9C,mBAAmB,4BAA4B,CAAC;AAChD,mBAAmB,wBAAwB,CAAC;AAC5C,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AACtE,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AACtE,OAAO,EAAE,wBAAwB,IAAI,sBAAsB,EAAE,MAAM,8CAA8C,CAAC"}
|
package/lib/accordion/index.js
CHANGED
|
@@ -33,10 +33,12 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
33
33
|
};
|
|
34
34
|
})();
|
|
35
35
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
-
exports.useAccordionItemContext = exports.useAccordionRootContext = exports.Accordion = void 0;
|
|
36
|
+
exports.useAccordionPanelState = exports.useAccordionItemContext = exports.useAccordionRootContext = exports.Accordion = void 0;
|
|
37
37
|
exports.Accordion = __importStar(require("./index.parts"));
|
|
38
38
|
var AccordionRootContext_1 = require("./root/AccordionRootContext");
|
|
39
39
|
Object.defineProperty(exports, "useAccordionRootContext", { enumerable: true, get: function () { return AccordionRootContext_1.useAccordionRootContext; } });
|
|
40
40
|
var AccordionItemContext_1 = require("./item/AccordionItemContext");
|
|
41
41
|
Object.defineProperty(exports, "useAccordionItemContext", { enumerable: true, get: function () { return AccordionItemContext_1.useAccordionItemContext; } });
|
|
42
|
+
var CollapsiblePanelContext_1 = require("../collapsible/panel/CollapsiblePanelContext");
|
|
43
|
+
Object.defineProperty(exports, "useAccordionPanelState", { enumerable: true, get: function () { return CollapsiblePanelContext_1.useCollapsiblePanelState; } });
|
|
42
44
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/accordion/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2DAA2C;AAO3C,oEAAsE;AAA7D,+HAAA,uBAAuB,OAAA;AAChC,oEAAsE;AAA7D,+HAAA,uBAAuB,OAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/accordion/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2DAA2C;AAO3C,oEAAsE;AAA7D,+HAAA,uBAAuB,OAAA;AAChC,oEAAsE;AAA7D,+HAAA,uBAAuB,OAAA;AAChC,wFAAkH;AAAzG,iIAAA,wBAAwB,OAA0B"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { View } from 'react-native';
|
|
3
|
+
import { type MeasurePadding } from '../../collapsible/panel/useCollapsiblePanel';
|
|
3
4
|
import type { TransitionStatus } from '../../internals/useTransitionStatus';
|
|
4
5
|
import type { AccordionItemState } from '../item/AccordionItem';
|
|
5
6
|
import type { ZestUIComponentProps } from '../../types';
|
|
@@ -9,8 +10,15 @@ import type { ZestUIComponentProps } from '../../types';
|
|
|
9
10
|
*
|
|
10
11
|
* Like `Collapsible.Panel`, it publishes the measured content size on the state
|
|
11
12
|
* object so the consumer can drive an `Animated` value from it.
|
|
13
|
+
*
|
|
14
|
+
* ⚠️ **Padding footgun:** The measured `height`/`width` reflects the natural
|
|
15
|
+
* content size of the panel's **children**, not the panel element itself. If you
|
|
16
|
+
* apply `padding` on the Panel element via `style`, the clip height will not
|
|
17
|
+
* account for it and content at the bottom will be clipped. To pad the panel,
|
|
18
|
+
* put padding on a child View **inside** the Panel instead, or use a
|
|
19
|
+
* `measurePadding` prop.
|
|
12
20
|
*/
|
|
13
|
-
export declare function AccordionPanel(componentProps: AccordionPanel.Props): React.
|
|
21
|
+
export declare function AccordionPanel(componentProps: AccordionPanel.Props): React.JSX.Element;
|
|
14
22
|
export interface AccordionPanelState extends AccordionItemState {
|
|
15
23
|
/**
|
|
16
24
|
* The transition status of the component.
|
|
@@ -36,6 +44,16 @@ export interface AccordionPanelProps extends ZestUIComponentProps<typeof View, A
|
|
|
36
44
|
* Defaults to the `keepMounted` prop on `Accordion.Root`.
|
|
37
45
|
*/
|
|
38
46
|
keepMounted?: boolean | undefined;
|
|
47
|
+
/**
|
|
48
|
+
* Padding applied to the inner measurement wrapper so the reported
|
|
49
|
+
* `height`/`width` reflect the padded content size.
|
|
50
|
+
*
|
|
51
|
+
* Use this instead of `style.padding` on the panel element to avoid the
|
|
52
|
+
* padding footgun where the clip height does not account for padding.
|
|
53
|
+
* The padding is applied inside the clip, so the animation height
|
|
54
|
+
* naturally includes it.
|
|
55
|
+
*/
|
|
56
|
+
measurePadding?: MeasurePadding | undefined;
|
|
39
57
|
}
|
|
40
58
|
export declare namespace AccordionPanel {
|
|
41
59
|
type State = AccordionPanelState;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionPanel.d.ts","sourceRoot":"","sources":["../../../src/accordion/panel/AccordionPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"AccordionPanel.d.ts","sourceRoot":"","sources":["../../../src/accordion/panel/AccordionPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,OAAO,EAAuB,KAAK,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAKvG,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAC5E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAGhE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAExD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,cAAc,EAAE,cAAc,CAAC,KAAK,qBA4DlE;AAED,MAAM,WAAW,mBAAoB,SAAQ,kBAAkB;IAC7D;;OAEG;IACH,gBAAgB,EAAE,gBAAgB,CAAC;IACnC;;;OAGG;IACH,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,mBACf,SAAQ,oBAAoB,CAAC,OAAO,IAAI,EAAE,mBAAmB,CAAC;IAC9D;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,cAAc,GAAG,SAAS,CAAC;CAC7C;AAED,yBAAiB,cAAc,CAAC;IAC9B,KAAY,KAAK,GAAG,mBAAmB,CAAC;IACxC,KAAY,KAAK,GAAG,mBAAmB,CAAC;CACzC"}
|
|
@@ -35,11 +35,13 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
35
35
|
})();
|
|
36
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
37
|
exports.AccordionPanel = AccordionPanel;
|
|
38
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
39
|
const React = __importStar(require("react"));
|
|
39
40
|
const react_native_1 = require("react-native");
|
|
40
41
|
const useRenderElement_1 = require("../../use-render/useRenderElement");
|
|
41
42
|
const CollapsibleRootContext_1 = require("../../collapsible/root/CollapsibleRootContext");
|
|
42
43
|
const useCollapsiblePanel_1 = require("../../collapsible/panel/useCollapsiblePanel");
|
|
44
|
+
const CollapsiblePanelContext_1 = require("../../collapsible/panel/CollapsiblePanelContext");
|
|
43
45
|
const AccordionItemContext_1 = require("../item/AccordionItemContext");
|
|
44
46
|
const AccordionRootContext_1 = require("../root/AccordionRootContext");
|
|
45
47
|
/**
|
|
@@ -48,15 +50,23 @@ const AccordionRootContext_1 = require("../root/AccordionRootContext");
|
|
|
48
50
|
*
|
|
49
51
|
* Like `Collapsible.Panel`, it publishes the measured content size on the state
|
|
50
52
|
* object so the consumer can drive an `Animated` value from it.
|
|
53
|
+
*
|
|
54
|
+
* ⚠️ **Padding footgun:** The measured `height`/`width` reflects the natural
|
|
55
|
+
* content size of the panel's **children**, not the panel element itself. If you
|
|
56
|
+
* apply `padding` on the Panel element via `style`, the clip height will not
|
|
57
|
+
* account for it and content at the bottom will be clipped. To pad the panel,
|
|
58
|
+
* put padding on a child View **inside** the Panel instead, or use a
|
|
59
|
+
* `measurePadding` prop.
|
|
51
60
|
*/
|
|
52
61
|
function AccordionPanel(componentProps) {
|
|
53
|
-
const { className, keepMounted: keepMountedProp, render, style, ref, children, ...elementProps } = componentProps;
|
|
62
|
+
const { className, keepMounted: keepMountedProp, measurePadding, render, style, ref, children, ...elementProps } = componentProps;
|
|
54
63
|
const { keepMounted: contextKeepMounted } = (0, AccordionRootContext_1.useAccordionRootContext)();
|
|
55
64
|
const { transitionStatus } = (0, CollapsibleRootContext_1.useCollapsibleRootContext)();
|
|
56
65
|
const { state: itemState, triggerId } = (0, AccordionItemContext_1.useAccordionItemContext)();
|
|
57
66
|
const keepMounted = keepMountedProp !== null && keepMountedProp !== void 0 ? keepMountedProp : contextKeepMounted;
|
|
58
67
|
const { dimensions, props, shouldRender, wrappedChildren } = (0, useCollapsiblePanel_1.useCollapsiblePanel)({
|
|
59
68
|
keepMounted,
|
|
69
|
+
measurePadding,
|
|
60
70
|
children,
|
|
61
71
|
});
|
|
62
72
|
const state = React.useMemo(() => ({
|
|
@@ -65,7 +75,12 @@ function AccordionPanel(componentProps) {
|
|
|
65
75
|
height: dimensions.height,
|
|
66
76
|
width: dimensions.width,
|
|
67
77
|
}), [itemState, transitionStatus, dimensions.height, dimensions.width]);
|
|
68
|
-
|
|
78
|
+
const panelContext = React.useMemo(() => ({
|
|
79
|
+
height: dimensions.height,
|
|
80
|
+
width: dimensions.width,
|
|
81
|
+
transitionStatus,
|
|
82
|
+
}), [dimensions.height, dimensions.width, transitionStatus]);
|
|
83
|
+
const element = (0, useRenderElement_1.useRenderElement)(react_native_1.View, componentProps, {
|
|
69
84
|
state,
|
|
70
85
|
ref,
|
|
71
86
|
enabled: shouldRender,
|
|
@@ -76,5 +91,6 @@ function AccordionPanel(componentProps) {
|
|
|
76
91
|
{ children: wrappedChildren },
|
|
77
92
|
],
|
|
78
93
|
});
|
|
94
|
+
return ((0, jsx_runtime_1.jsx)(CollapsiblePanelContext_1.CollapsiblePanelContextContext.Provider, { value: panelContext, children: element }));
|
|
79
95
|
}
|
|
80
96
|
//# sourceMappingURL=AccordionPanel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionPanel.js","sourceRoot":"","sources":["../../../src/accordion/panel/AccordionPanel.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"AccordionPanel.js","sourceRoot":"","sources":["../../../src/accordion/panel/AccordionPanel.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8Bb,wCA4DC;;AAzFD,6CAA+B;AAC/B,+CAAoC;AACpC,wEAAqE;AACrE,0FAA0F;AAC1F,qFAAuG;AACvG,6FAGyD;AAGzD,uEAAuE;AACvE,uEAAuE;AAGvE;;;;;;;;;;;;;GAaG;AACH,SAAgB,cAAc,CAAC,cAAoC;IACjE,MAAM,EACJ,SAAS,EACT,WAAW,EAAE,eAAe,EAC5B,cAAc,EACd,MAAM,EACN,KAAK,EACL,GAAG,EACH,QAAQ,EACR,GAAG,YAAY,EAChB,GAAG,cAAc,CAAC;IAEnB,MAAM,EAAE,WAAW,EAAE,kBAAkB,EAAE,GAAG,IAAA,8CAAuB,GAAE,CAAC;IACtE,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAA,kDAAyB,GAAE,CAAC;IACzD,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,IAAA,8CAAuB,GAAE,CAAC;IAElE,MAAM,WAAW,GAAG,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,kBAAkB,CAAC;IAE1D,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,GAAG,IAAA,yCAAmB,EAAC;QAC/E,WAAW;QACX,cAAc;QACd,QAAQ;KACT,CAAC,CAAC;IAEH,MAAM,KAAK,GAAwB,KAAK,CAAC,OAAO,CAC9C,GAAG,EAAE,CAAC,CAAC;QACL,GAAG,SAAS;QACZ,gBAAgB;QAChB,MAAM,EAAE,UAAU,CAAC,MAAM;QACzB,KAAK,EAAE,UAAU,CAAC,KAAK;KACxB,CAAC,EACF,CAAC,SAAS,EAAE,gBAAgB,EAAE,UAAU,CAAC,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC,CACnE,CAAC;IAEF,MAAM,YAAY,GAA4B,KAAK,CAAC,OAAO,CACzD,GAAG,EAAE,CAAC,CAAC;QACL,MAAM,EAAE,UAAU,CAAC,MAAM;QACzB,KAAK,EAAE,UAAU,CAAC,KAAK;QACvB,gBAAgB;KACjB,CAAC,EACF,CAAC,UAAU,CAAC,MAAM,EAAE,UAAU,CAAC,KAAK,EAAE,gBAAgB,CAAC,CACxD,CAAC;IAEF,MAAM,OAAO,GAAG,IAAA,mCAAgB,EAAC,mBAAI,EAAE,cAAc,EAAE;QACrD,KAAK;QACL,GAAG;QACH,OAAO,EAAE,YAAY;QACrB,KAAK,EAAE;YACL,KAAK;YACL,EAAE,IAAI,EAAE,QAAiB,EAAE,uBAAuB,EAAE,SAAS,EAAE,iBAAiB,EAAE,SAAS,EAAE;YAC7F,YAAY;YACZ,EAAE,QAAQ,EAAE,eAAe,EAAE;SAC9B;KACF,CAAC,CAAC;IAEH,OAAO,CACL,uBAAC,wDAA8B,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YACzD,OAAO,GACgC,CAC3C,CAAC;AACJ,CAAC"}
|
|
@@ -3,4 +3,5 @@ export type * from './root/CollapsibleRoot';
|
|
|
3
3
|
export type * from './trigger/CollapsibleTrigger';
|
|
4
4
|
export type * from './panel/CollapsiblePanel';
|
|
5
5
|
export { useCollapsibleRootContext } from './root/CollapsibleRootContext';
|
|
6
|
+
export { useCollapsiblePanelState } from './panel/CollapsiblePanelContext';
|
|
6
7
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/collapsible/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,WAAW,MAAM,eAAe,CAAC;AAE7C,mBAAmB,wBAAwB,CAAC;AAC5C,mBAAmB,8BAA8B,CAAC;AAClD,mBAAmB,0BAA0B,CAAC;AAC9C,OAAO,EAAE,yBAAyB,EAAE,MAAM,+BAA+B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/collapsible/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,WAAW,MAAM,eAAe,CAAC;AAE7C,mBAAmB,wBAAwB,CAAC;AAC5C,mBAAmB,8BAA8B,CAAC;AAClD,mBAAmB,0BAA0B,CAAC;AAC9C,OAAO,EAAE,yBAAyB,EAAE,MAAM,+BAA+B,CAAC;AAC1E,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC"}
|
package/lib/collapsible/index.js
CHANGED
|
@@ -33,8 +33,10 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
33
33
|
};
|
|
34
34
|
})();
|
|
35
35
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
-
exports.useCollapsibleRootContext = exports.Collapsible = void 0;
|
|
36
|
+
exports.useCollapsiblePanelState = exports.useCollapsibleRootContext = exports.Collapsible = void 0;
|
|
37
37
|
exports.Collapsible = __importStar(require("./index.parts"));
|
|
38
38
|
var CollapsibleRootContext_1 = require("./root/CollapsibleRootContext");
|
|
39
39
|
Object.defineProperty(exports, "useCollapsibleRootContext", { enumerable: true, get: function () { return CollapsibleRootContext_1.useCollapsibleRootContext; } });
|
|
40
|
+
var CollapsiblePanelContext_1 = require("./panel/CollapsiblePanelContext");
|
|
41
|
+
Object.defineProperty(exports, "useCollapsiblePanelState", { enumerable: true, get: function () { return CollapsiblePanelContext_1.useCollapsiblePanelState; } });
|
|
40
42
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/collapsible/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6DAA6C;AAK7C,wEAA0E;AAAjE,mIAAA,yBAAyB,OAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/collapsible/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6DAA6C;AAK7C,wEAA0E;AAAjE,mIAAA,yBAAyB,OAAA;AAClC,2EAA2E;AAAlE,mIAAA,wBAAwB,OAAA"}
|
|
@@ -3,6 +3,7 @@ import { View } from 'react-native';
|
|
|
3
3
|
import type { CollapsibleRootState } from '../root/CollapsibleRoot';
|
|
4
4
|
import type { TransitionStatus } from '../../internals/useTransitionStatus';
|
|
5
5
|
import type { ZestUIComponentProps } from '../../types';
|
|
6
|
+
import { type MeasurePadding } from './useCollapsiblePanel';
|
|
6
7
|
/**
|
|
7
8
|
* A panel with the collapsible contents.
|
|
8
9
|
* Renders a `<View>`.
|
|
@@ -11,8 +12,15 @@ import type { ZestUIComponentProps } from '../../types';
|
|
|
11
12
|
* object as `height`/`width` — the React Native counterpart of the web version's
|
|
12
13
|
* `--collapsible-panel-height` CSS variable. Drive an `Animated` value from
|
|
13
14
|
* `state.height` and `state.transitionStatus` to animate the panel.
|
|
15
|
+
*
|
|
16
|
+
* ⚠️ **Padding footgun:** The measured `height`/`width` reflects the natural
|
|
17
|
+
* content size of the panel's **children**, not the panel element itself. If you
|
|
18
|
+
* apply `padding` on the Panel element via `style`, the clip height will not
|
|
19
|
+
* account for it and content at the bottom will be clipped. To pad the panel,
|
|
20
|
+
* put padding on a child View **inside** the Panel instead, or use a
|
|
21
|
+
* `measurePadding` prop. See `Accordion.Panel` for the same caveat.
|
|
14
22
|
*/
|
|
15
|
-
export declare function CollapsiblePanel(componentProps: CollapsiblePanel.Props): React.
|
|
23
|
+
export declare function CollapsiblePanel(componentProps: CollapsiblePanel.Props): React.JSX.Element;
|
|
16
24
|
export interface CollapsiblePanelState extends CollapsibleRootState {
|
|
17
25
|
/**
|
|
18
26
|
* The transition status of the component.
|
|
@@ -38,6 +46,16 @@ export interface CollapsiblePanelProps extends ZestUIComponentProps<typeof View,
|
|
|
38
46
|
* @default false
|
|
39
47
|
*/
|
|
40
48
|
keepMounted?: boolean | undefined;
|
|
49
|
+
/**
|
|
50
|
+
* Padding applied to the inner measurement wrapper so the reported
|
|
51
|
+
* `height`/`width` reflect the padded content size.
|
|
52
|
+
*
|
|
53
|
+
* Use this instead of `style.padding` on the panel element to avoid the
|
|
54
|
+
* padding footgun where the clip height does not account for padding.
|
|
55
|
+
* The padding is applied inside the clip, so the animation height
|
|
56
|
+
* naturally includes it.
|
|
57
|
+
*/
|
|
58
|
+
measurePadding?: MeasurePadding | undefined;
|
|
41
59
|
}
|
|
42
60
|
export declare namespace CollapsiblePanel {
|
|
43
61
|
type State = CollapsiblePanelState;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CollapsiblePanel.d.ts","sourceRoot":"","sources":["../../../src/collapsible/panel/CollapsiblePanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAC5E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"CollapsiblePanel.d.ts","sourceRoot":"","sources":["../../../src/collapsible/panel/CollapsiblePanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAC5E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAuB,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAMjF;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,gBAAgB,CAAC,cAAc,EAAE,gBAAgB,CAAC,KAAK,qBAmDtE;AAED,MAAM,WAAW,qBAAsB,SAAQ,oBAAoB;IACjE;;OAEG;IACH,gBAAgB,EAAE,gBAAgB,CAAC;IACnC;;;OAGG;IACH,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,qBACf,SAAQ,oBAAoB,CAAC,OAAO,IAAI,EAAE,qBAAqB,CAAC;IAChE;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,cAAc,GAAG,SAAS,CAAC;CAC7C;AAED,yBAAiB,gBAAgB,CAAC;IAChC,KAAY,KAAK,GAAG,qBAAqB,CAAC;IAC1C,KAAY,KAAK,GAAG,qBAAqB,CAAC;CAC3C"}
|
|
@@ -35,11 +35,13 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
35
35
|
})();
|
|
36
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
37
|
exports.CollapsiblePanel = CollapsiblePanel;
|
|
38
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
39
|
const React = __importStar(require("react"));
|
|
39
40
|
const react_native_1 = require("react-native");
|
|
40
41
|
const useRenderElement_1 = require("../../use-render/useRenderElement");
|
|
41
42
|
const CollapsibleRootContext_1 = require("../root/CollapsibleRootContext");
|
|
42
43
|
const useCollapsiblePanel_1 = require("./useCollapsiblePanel");
|
|
44
|
+
const CollapsiblePanelContext_1 = require("./CollapsiblePanelContext");
|
|
43
45
|
/**
|
|
44
46
|
* A panel with the collapsible contents.
|
|
45
47
|
* Renders a `<View>`.
|
|
@@ -48,12 +50,20 @@ const useCollapsiblePanel_1 = require("./useCollapsiblePanel");
|
|
|
48
50
|
* object as `height`/`width` — the React Native counterpart of the web version's
|
|
49
51
|
* `--collapsible-panel-height` CSS variable. Drive an `Animated` value from
|
|
50
52
|
* `state.height` and `state.transitionStatus` to animate the panel.
|
|
53
|
+
*
|
|
54
|
+
* ⚠️ **Padding footgun:** The measured `height`/`width` reflects the natural
|
|
55
|
+
* content size of the panel's **children**, not the panel element itself. If you
|
|
56
|
+
* apply `padding` on the Panel element via `style`, the clip height will not
|
|
57
|
+
* account for it and content at the bottom will be clipped. To pad the panel,
|
|
58
|
+
* put padding on a child View **inside** the Panel instead, or use a
|
|
59
|
+
* `measurePadding` prop. See `Accordion.Panel` for the same caveat.
|
|
51
60
|
*/
|
|
52
61
|
function CollapsiblePanel(componentProps) {
|
|
53
|
-
const { className, keepMounted = false, render, style, ref, children, ...elementProps } = componentProps;
|
|
62
|
+
const { className, keepMounted = false, measurePadding, render, style, ref, children, ...elementProps } = componentProps;
|
|
54
63
|
const { state: rootState, transitionStatus } = (0, CollapsibleRootContext_1.useCollapsibleRootContext)();
|
|
55
64
|
const { dimensions, props, shouldRender, wrappedChildren } = (0, useCollapsiblePanel_1.useCollapsiblePanel)({
|
|
56
65
|
keepMounted,
|
|
66
|
+
measurePadding,
|
|
57
67
|
children,
|
|
58
68
|
});
|
|
59
69
|
const state = React.useMemo(() => ({
|
|
@@ -62,11 +72,17 @@ function CollapsiblePanel(componentProps) {
|
|
|
62
72
|
height: dimensions.height,
|
|
63
73
|
width: dimensions.width,
|
|
64
74
|
}), [rootState, transitionStatus, dimensions.height, dimensions.width]);
|
|
65
|
-
|
|
75
|
+
const panelContext = React.useMemo(() => ({
|
|
76
|
+
height: dimensions.height,
|
|
77
|
+
width: dimensions.width,
|
|
78
|
+
transitionStatus,
|
|
79
|
+
}), [dimensions.height, dimensions.width, transitionStatus]);
|
|
80
|
+
const element = (0, useRenderElement_1.useRenderElement)(react_native_1.View, componentProps, {
|
|
66
81
|
state,
|
|
67
82
|
ref,
|
|
68
83
|
enabled: shouldRender,
|
|
69
84
|
props: [props, elementProps, { children: wrappedChildren }],
|
|
70
85
|
});
|
|
86
|
+
return ((0, jsx_runtime_1.jsx)(CollapsiblePanelContext_1.CollapsiblePanelContextContext.Provider, { value: panelContext, children: element }));
|
|
71
87
|
}
|
|
72
88
|
//# sourceMappingURL=CollapsiblePanel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CollapsiblePanel.js","sourceRoot":"","sources":["../../../src/collapsible/panel/CollapsiblePanel.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"CollapsiblePanel.js","sourceRoot":"","sources":["../../../src/collapsible/panel/CollapsiblePanel.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8Bb,4CAmDC;;AAhFD,6CAA+B;AAC/B,+CAAoC;AACpC,wEAAqE;AACrE,2EAA2E;AAI3E,+DAAiF;AACjF,uEAGmC;AAEnC;;;;;;;;;;;;;;;GAeG;AACH,SAAgB,gBAAgB,CAAC,cAAsC;IACrE,MAAM,EACJ,SAAS,EACT,WAAW,GAAG,KAAK,EACnB,cAAc,EACd,MAAM,EACN,KAAK,EACL,GAAG,EACH,QAAQ,EACR,GAAG,YAAY,EAChB,GAAG,cAAc,CAAC;IAEnB,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAG,IAAA,kDAAyB,GAAE,CAAC;IAE3E,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,GAAG,IAAA,yCAAmB,EAAC;QAC/E,WAAW;QACX,cAAc;QACd,QAAQ;KACT,CAAC,CAAC;IAEH,MAAM,KAAK,GAA0B,KAAK,CAAC,OAAO,CAChD,GAAG,EAAE,CAAC,CAAC;QACL,GAAG,SAAS;QACZ,gBAAgB;QAChB,MAAM,EAAE,UAAU,CAAC,MAAM;QACzB,KAAK,EAAE,UAAU,CAAC,KAAK;KACxB,CAAC,EACF,CAAC,SAAS,EAAE,gBAAgB,EAAE,UAAU,CAAC,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC,CACnE,CAAC;IAEF,MAAM,YAAY,GAA4B,KAAK,CAAC,OAAO,CACzD,GAAG,EAAE,CAAC,CAAC;QACL,MAAM,EAAE,UAAU,CAAC,MAAM;QACzB,KAAK,EAAE,UAAU,CAAC,KAAK;QACvB,gBAAgB;KACjB,CAAC,EACF,CAAC,UAAU,CAAC,MAAM,EAAE,UAAU,CAAC,KAAK,EAAE,gBAAgB,CAAC,CACxD,CAAC;IAEF,MAAM,OAAO,GAAG,IAAA,mCAAgB,EAAC,mBAAI,EAAE,cAAc,EAAE;QACrD,KAAK;QACL,GAAG;QACH,OAAO,EAAE,YAAY;QACrB,KAAK,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE,CAAC;KAC5D,CAAC,CAAC;IAEH,OAAO,CACL,uBAAC,wDAA8B,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YACzD,OAAO,GACgC,CAC3C,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import type { TransitionStatus } from '../../internals/useTransitionStatus';
|
|
3
|
+
export interface CollapsiblePanelContext {
|
|
4
|
+
/**
|
|
5
|
+
* The measured natural height of the panel contents, or `undefined` before
|
|
6
|
+
* the first measurement.
|
|
7
|
+
*/
|
|
8
|
+
height: number | undefined;
|
|
9
|
+
/**
|
|
10
|
+
* The measured natural width of the panel contents, or `undefined` before
|
|
11
|
+
* the first measurement.
|
|
12
|
+
*/
|
|
13
|
+
width: number | undefined;
|
|
14
|
+
/**
|
|
15
|
+
* The transition status of the panel, for driving enter/exit animations.
|
|
16
|
+
*/
|
|
17
|
+
transitionStatus: TransitionStatus;
|
|
18
|
+
}
|
|
19
|
+
export declare const CollapsiblePanelContextContext: React.Context<CollapsiblePanelContext | undefined>;
|
|
20
|
+
export declare function useCollapsiblePanelState(): CollapsiblePanelContext;
|
|
21
|
+
//# sourceMappingURL=CollapsiblePanelContext.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CollapsiblePanelContext.d.ts","sourceRoot":"","sources":["../../../src/collapsible/panel/CollapsiblePanelContext.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAE5E,MAAM,WAAW,uBAAuB;IACtC;;;OAGG;IACH,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B;;OAEG;IACH,gBAAgB,EAAE,gBAAgB,CAAC;CACpC;AAED,eAAO,MAAM,8BAA8B,oDAC0B,CAAC;AAEtE,wBAAgB,wBAAwB,4BASvC"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
'use client';
|
|
3
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
4
|
+
if (k2 === undefined) k2 = k;
|
|
5
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
6
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
7
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
8
|
+
}
|
|
9
|
+
Object.defineProperty(o, k2, desc);
|
|
10
|
+
}) : (function(o, m, k, k2) {
|
|
11
|
+
if (k2 === undefined) k2 = k;
|
|
12
|
+
o[k2] = m[k];
|
|
13
|
+
}));
|
|
14
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
15
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
16
|
+
}) : function(o, v) {
|
|
17
|
+
o["default"] = v;
|
|
18
|
+
});
|
|
19
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
20
|
+
var ownKeys = function(o) {
|
|
21
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
22
|
+
var ar = [];
|
|
23
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
24
|
+
return ar;
|
|
25
|
+
};
|
|
26
|
+
return ownKeys(o);
|
|
27
|
+
};
|
|
28
|
+
return function (mod) {
|
|
29
|
+
if (mod && mod.__esModule) return mod;
|
|
30
|
+
var result = {};
|
|
31
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
32
|
+
__setModuleDefault(result, mod);
|
|
33
|
+
return result;
|
|
34
|
+
};
|
|
35
|
+
})();
|
|
36
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
|
+
exports.CollapsiblePanelContextContext = void 0;
|
|
38
|
+
exports.useCollapsiblePanelState = useCollapsiblePanelState;
|
|
39
|
+
const React = __importStar(require("react"));
|
|
40
|
+
exports.CollapsiblePanelContextContext = React.createContext(undefined);
|
|
41
|
+
function useCollapsiblePanelState() {
|
|
42
|
+
const context = React.useContext(exports.CollapsiblePanelContextContext);
|
|
43
|
+
if (context === undefined) {
|
|
44
|
+
throw new Error('Zest: CollapsiblePanelContext is missing. Panel state can only be accessed within <Collapsible.Panel> or <Accordion.Panel>.');
|
|
45
|
+
}
|
|
46
|
+
return context;
|
|
47
|
+
}
|
|
48
|
+
//# sourceMappingURL=CollapsiblePanelContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CollapsiblePanelContext.js","sourceRoot":"","sources":["../../../src/collapsible/panel/CollapsiblePanelContext.ts"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBb,4DASC;AAhCD,6CAA+B;AAoBlB,QAAA,8BAA8B,GACzC,KAAK,CAAC,aAAa,CAAsC,SAAS,CAAC,CAAC;AAEtE,SAAgB,wBAAwB;IACtC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,sCAA8B,CAAC,CAAC;IACjE,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC1B,MAAM,IAAI,KAAK,CACb,6HAA6H,CAC9H,CAAC;IACJ,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC"}
|
|
@@ -24,8 +24,25 @@ export declare function useCollapsiblePanel(parameters: UseCollapsiblePanelParam
|
|
|
24
24
|
shouldRender: boolean;
|
|
25
25
|
wrappedChildren: React.JSX.Element;
|
|
26
26
|
};
|
|
27
|
+
/**
|
|
28
|
+
* Padding insets that are applied to the inner measurement wrapper so the
|
|
29
|
+
* reported `height`/`width` on the panel state reflect the padded content size.
|
|
30
|
+
* Without this, padding on the panel element itself will cause clipped content.
|
|
31
|
+
*/
|
|
32
|
+
export interface MeasurePadding {
|
|
33
|
+
top?: number;
|
|
34
|
+
right?: number;
|
|
35
|
+
bottom?: number;
|
|
36
|
+
left?: number;
|
|
37
|
+
}
|
|
27
38
|
export interface UseCollapsiblePanelParameters {
|
|
28
39
|
keepMounted: boolean;
|
|
40
|
+
/**
|
|
41
|
+
* Padding applied to the inner measurement wrapper.
|
|
42
|
+
* Use this instead of `style.padding` on the panel element to avoid the
|
|
43
|
+
* padding footgun where the clip height does not account for padding.
|
|
44
|
+
*/
|
|
45
|
+
measurePadding?: MeasurePadding | undefined;
|
|
29
46
|
children: React.ReactNode;
|
|
30
47
|
}
|
|
31
48
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCollapsiblePanel.d.ts","sourceRoot":"","sources":["../../../src/collapsible/panel/useCollapsiblePanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,UAAU,UAAU;IAClB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;CAC3B;AAID;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,UAAU,EAAE,6BAA6B;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"useCollapsiblePanel.d.ts","sourceRoot":"","sources":["../../../src/collapsible/panel/useCollapsiblePanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,UAAU,UAAU;IAClB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;CAC3B;AAID;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,UAAU,EAAE,6BAA6B;;;;;;;;;;;;;EAsD5E;AAED;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,6BAA6B;IAC5C,WAAW,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,cAAc,CAAC,EAAE,cAAc,GAAG,SAAS,CAAC;IAC5C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B"}
|
|
@@ -49,7 +49,7 @@ const EMPTY_DIMENSIONS = { height: undefined, width: undefined };
|
|
|
49
49
|
* natural content size and managing the mount lifecycle; the consumer animates.
|
|
50
50
|
*/
|
|
51
51
|
function useCollapsiblePanel(parameters) {
|
|
52
|
-
const { keepMounted, children } = parameters;
|
|
52
|
+
const { keepMounted, measurePadding, children } = parameters;
|
|
53
53
|
const { mounted, open, panelId, setMounted } = (0, CollapsibleRootContext_1.useCollapsibleRootContext)();
|
|
54
54
|
const [dimensions, setDimensions] = React.useState(EMPTY_DIMENSIONS);
|
|
55
55
|
// Nothing can report when a closing animation finished, so a panel that isn't
|
|
@@ -74,7 +74,9 @@ function useCollapsiblePanel(parameters) {
|
|
|
74
74
|
}), [panelId, open]);
|
|
75
75
|
// The panel's own size is consumer-driven, so the natural content size has to
|
|
76
76
|
// be measured on an inner element that is never height-constrained.
|
|
77
|
-
|
|
77
|
+
// When `measurePadding` is set, it is applied to the inner measurement
|
|
78
|
+
// wrapper so the reported `height`/`width` reflect the padded content size.
|
|
79
|
+
const wrappedChildren = React.useMemo(() => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: measurePadding, onLayout: handleContentLayout, children: children })), [handleContentLayout, measurePadding, children]);
|
|
78
80
|
return {
|
|
79
81
|
dimensions,
|
|
80
82
|
props,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCollapsiblePanel.js","sourceRoot":"","sources":["../../../src/collapsible/panel/useCollapsiblePanel.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBb,
|
|
1
|
+
{"version":3,"file":"useCollapsiblePanel.js","sourceRoot":"","sources":["../../../src/collapsible/panel/useCollapsiblePanel.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBb,kDAsDC;;AAzED,6CAA+B;AAC/B,+CAA4D;AAC5D,uEAAoE;AACpE,2EAA2E;AAO3E,MAAM,gBAAgB,GAAe,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;AAE7E;;;;;;GAMG;AACH,SAAgB,mBAAmB,CAAC,UAAyC;IAC3E,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC;IAE7D,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,IAAA,kDAAyB,GAAE,CAAC;IAE3E,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAa,gBAAgB,CAAC,CAAC;IAEjF,8EAA8E;IAC9E,kDAAkD;IAClD,IAAA,uCAAkB,EAAC,GAAG,EAAE;QACtB,IAAI,CAAC,IAAI,IAAI,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC;YACrC,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC;IAE7C,MAAM,mBAAmB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAwB,EAAE,EAAE;QACzE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC;QACnD,aAAa,CAAC,CAAC,QAAQ,EAAE,EAAE,CACzB,QAAQ,CAAC,MAAM,KAAK,MAAM,IAAI,QAAQ,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CACtF,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CACzB,GAAG,EAAE,CAAC,CAAC;QACL,QAAQ,EAAE,OAAO;QACjB,yEAAyE;QACzE,2DAA2D;QAC3D,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAiB,EAAE;QACtC,aAAa,EAAE,CAAC,IAAI,IAAI,SAAS;QACjC,2BAA2B,EAAE,CAAC,IAAI;QAClC,yBAAyB,EAAE,IAAI,CAAC,CAAC,CAAE,MAAgB,CAAC,CAAC,CAAE,qBAA+B;KACvF,CAAC,EACF,CAAC,OAAO,EAAE,IAAI,CAAC,CAChB,CAAC;IAEF,8EAA8E;IAC9E,oEAAoE;IACpE,uEAAuE;IACvE,4EAA4E;IAC5E,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,CACnC,GAAG,EAAE,CAAC,CACJ,uBAAC,mBAAI,IAAC,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,mBAAmB,YACvD,QAAQ,GACJ,CACR,EACD,CAAC,mBAAmB,EAAE,cAAc,EAAE,QAAQ,CAAC,CAChD,CAAC;IAEF,OAAO;QACL,UAAU;QACV,KAAK;QACL,YAAY,EAAE,WAAW,IAAI,OAAO;QACpC,eAAe;KAChB,CAAC;AACJ,CAAC"}
|
|
@@ -1,14 +1,31 @@
|
|
|
1
1
|
import { View } from 'react-native';
|
|
2
|
+
import { type TransitionStatus } from '../../internals/useTransitionStatus';
|
|
2
3
|
import type { SwitchRootState } from '../root/SwitchRoot';
|
|
3
4
|
import type { ZestUIComponentProps } from '../../types';
|
|
4
5
|
/**
|
|
5
6
|
* The movable part of the switch that indicates whether the switch is on or off.
|
|
6
|
-
* Renders a `<View
|
|
7
|
+
* Renders a `<View>`, or nothing when the switch is unchecked.
|
|
8
|
+
*
|
|
9
|
+
* Follows the animation contract: with `keepMounted`, the thumb stays mounted
|
|
10
|
+
* while unchecked and publishes `transitionStatus` so the consumer can animate
|
|
11
|
+
* it out. Without it, the thumb unmounts the moment it unchecks — React Native
|
|
12
|
+
* cannot report when an exit animation finished.
|
|
7
13
|
*/
|
|
8
|
-
export declare function SwitchThumb(componentProps: SwitchThumb.Props): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any
|
|
14
|
+
export declare function SwitchThumb(componentProps: SwitchThumb.Props): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
|
|
9
15
|
export interface SwitchThumbState extends SwitchRootState {
|
|
16
|
+
/**
|
|
17
|
+
* The transition status of the thumb, for driving enter/exit animations.
|
|
18
|
+
*/
|
|
19
|
+
transitionStatus: TransitionStatus;
|
|
10
20
|
}
|
|
11
21
|
export interface SwitchThumbProps extends ZestUIComponentProps<typeof View, SwitchThumbState> {
|
|
22
|
+
/**
|
|
23
|
+
* Whether to keep the element mounted when the switch is unchecked.
|
|
24
|
+
*
|
|
25
|
+
* Required to animate the thumb out; without it, it unmounts on uncheck.
|
|
26
|
+
* @default false
|
|
27
|
+
*/
|
|
28
|
+
keepMounted?: boolean | undefined;
|
|
12
29
|
}
|
|
13
30
|
export declare namespace SwitchThumb {
|
|
14
31
|
type State = SwitchThumbState;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SwitchThumb.d.ts","sourceRoot":"","sources":["../../../src/switch/thumb/SwitchThumb.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"SwitchThumb.d.ts","sourceRoot":"","sources":["../../../src/switch/thumb/SwitchThumb.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAIpC,OAAO,EAAuB,KAAK,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AACjG,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAExD;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,cAAc,EAAE,WAAW,CAAC,KAAK,qGAyB5D;AAED,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD;;OAEG;IACH,gBAAgB,EAAE,gBAAgB,CAAC;CACpC;AAED,MAAM,WAAW,gBACf,SAAQ,oBAAoB,CAAC,OAAO,IAAI,EAAE,gBAAgB,CAAC;IAC3D;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACnC;AAED,yBAAiB,WAAW,CAAC;IAC3B,KAAY,KAAK,GAAG,gBAAgB,CAAC;IACrC,KAAY,KAAK,GAAG,gBAAgB,CAAC;CACtC"}
|
|
@@ -5,16 +5,34 @@ exports.SwitchThumb = SwitchThumb;
|
|
|
5
5
|
const react_native_1 = require("react-native");
|
|
6
6
|
const SwitchRootContext_1 = require("../root/SwitchRootContext");
|
|
7
7
|
const useRenderElement_1 = require("../../use-render/useRenderElement");
|
|
8
|
+
const useIsoLayoutEffect_1 = require("../../hooks/useIsoLayoutEffect");
|
|
9
|
+
const useTransitionStatus_1 = require("../../internals/useTransitionStatus");
|
|
8
10
|
/**
|
|
9
11
|
* The movable part of the switch that indicates whether the switch is on or off.
|
|
10
|
-
* Renders a `<View
|
|
12
|
+
* Renders a `<View>`, or nothing when the switch is unchecked.
|
|
13
|
+
*
|
|
14
|
+
* Follows the animation contract: with `keepMounted`, the thumb stays mounted
|
|
15
|
+
* while unchecked and publishes `transitionStatus` so the consumer can animate
|
|
16
|
+
* it out. Without it, the thumb unmounts the moment it unchecks — React Native
|
|
17
|
+
* cannot report when an exit animation finished.
|
|
11
18
|
*/
|
|
12
19
|
function SwitchThumb(componentProps) {
|
|
13
|
-
const { render, className, style, ref, ...elementProps } = componentProps;
|
|
14
|
-
const
|
|
20
|
+
const { render, className, style, keepMounted = false, ref, ...elementProps } = componentProps;
|
|
21
|
+
const rootState = (0, SwitchRootContext_1.useSwitchRootContext)();
|
|
22
|
+
const { mounted, transitionStatus, setMounted } = (0, useTransitionStatus_1.useTransitionStatus)(rootState.checked);
|
|
23
|
+
// Nothing reports when an exit animation finished, so a thumb that isn't
|
|
24
|
+
// kept mounted is unmounted the moment it unchecks.
|
|
25
|
+
(0, useIsoLayoutEffect_1.useIsoLayoutEffect)(() => {
|
|
26
|
+
if (!rootState.checked && mounted && !keepMounted) {
|
|
27
|
+
setMounted(false);
|
|
28
|
+
}
|
|
29
|
+
}, [rootState.checked, mounted, keepMounted, setMounted]);
|
|
30
|
+
const state = { ...rootState, transitionStatus };
|
|
31
|
+
const shouldRender = keepMounted || mounted;
|
|
15
32
|
return (0, useRenderElement_1.useRenderElement)(react_native_1.View, componentProps, {
|
|
16
33
|
state,
|
|
17
34
|
ref,
|
|
35
|
+
enabled: shouldRender,
|
|
18
36
|
props: elementProps,
|
|
19
37
|
});
|
|
20
38
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SwitchThumb.js","sourceRoot":"","sources":["../../../src/switch/thumb/SwitchThumb.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;
|
|
1
|
+
{"version":3,"file":"SwitchThumb.js","sourceRoot":"","sources":["../../../src/switch/thumb/SwitchThumb.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;AAkBb,kCAyBC;AA1CD,+CAAoC;AACpC,iEAAiE;AACjE,wEAAqE;AACrE,uEAAoE;AACpE,6EAAiG;AAIjG;;;;;;;;GAQG;AACH,SAAgB,WAAW,CAAC,cAAiC;IAC3D,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,GAAG,KAAK,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,GAAG,cAAc,CAAC;IAE/F,MAAM,SAAS,GAAG,IAAA,wCAAoB,GAAE,CAAC;IAEzC,MAAM,EAAE,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,GAAG,IAAA,yCAAmB,EAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IAEzF,yEAAyE;IACzE,oDAAoD;IACpD,IAAA,uCAAkB,EAAC,GAAG,EAAE;QACtB,IAAI,CAAC,SAAS,CAAC,OAAO,IAAI,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC;YAClD,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC;IAE1D,MAAM,KAAK,GAAqB,EAAE,GAAG,SAAS,EAAE,gBAAgB,EAAE,CAAC;IAEnE,MAAM,YAAY,GAAG,WAAW,IAAI,OAAO,CAAC;IAE5C,OAAO,IAAA,mCAAgB,EAAC,mBAAI,EAAE,cAAc,EAAE;QAC5C,KAAK;QACL,GAAG;QACH,OAAO,EAAE,YAAY;QACrB,KAAK,EAAE,YAAY;KACpB,CAAC,CAAC;AACL,CAAC"}
|
|
@@ -11,18 +11,24 @@ export type ToastSwipeDirection = 'up' | 'down' | 'left' | 'right';
|
|
|
11
11
|
* `transitionStatus`, its stacking `offsetY`/`index`, and how far a swipe has
|
|
12
12
|
* travelled, and the consumer turns those into a transform.
|
|
13
13
|
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
* `
|
|
19
|
-
*
|
|
14
|
+
* **Enter:** `transitionStatus` starts as `'starting'` (auto-clears to
|
|
15
|
+
* `undefined` after one frame). Key off `state.transitionStatus === 'starting'`
|
|
16
|
+
* to trigger a slide-in or fade-in animation.
|
|
17
|
+
*
|
|
18
|
+
* **Exit:** `removeOnClose` (on by default) drops the toast the moment it
|
|
19
|
+
* closes — the right default for a consumer who does not animate. To animate
|
|
20
|
+
* the exit, set `removeOnClose={false}`, drive the exit from
|
|
21
|
+
* `state.transitionStatus === 'ending'` using `state.measuredHeight` as the
|
|
22
|
+
* starting value (the animation target is `0`), and call
|
|
23
|
+
* `useToastManager().remove(id)` when the animation finishes.
|
|
24
|
+
* This is the same lever as `Collapsible.Panel`'s `keepMounted`.
|
|
20
25
|
*/
|
|
21
26
|
export declare function ToastRoot(componentProps: ToastRoot.Props): React.JSX.Element;
|
|
22
27
|
export interface ToastRootState {
|
|
23
28
|
/**
|
|
24
|
-
* The toast's transition status: `'starting'` as it arrives
|
|
25
|
-
* is
|
|
29
|
+
* The toast's transition status: `'starting'` as it arrives (auto-clears to
|
|
30
|
+
* `undefined` after one frame for enter animation), `'ending'` once it is
|
|
31
|
+
* closing.
|
|
26
32
|
*/
|
|
27
33
|
transitionStatus: 'starting' | 'ending' | undefined;
|
|
28
34
|
/**
|
|
@@ -56,6 +62,12 @@ export interface ToastRootState {
|
|
|
56
62
|
* The toast's measured height.
|
|
57
63
|
*/
|
|
58
64
|
height: number;
|
|
65
|
+
/**
|
|
66
|
+
* The last measured height before the toast closed, preserved for the
|
|
67
|
+
* consumer to use as the starting value for an exit animation.
|
|
68
|
+
* Falls back to `height` when no close has occurred yet.
|
|
69
|
+
*/
|
|
70
|
+
measuredHeight: number;
|
|
59
71
|
/**
|
|
60
72
|
* Whether a swipe is currently in progress.
|
|
61
73
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToastRoot.d.ts","sourceRoot":"","sources":["../../../src/toast/root/ToastRoot.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAA0B,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"ToastRoot.d.ts","sourceRoot":"","sources":["../../../src/toast/root/ToastRoot.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAA0B,MAAM,cAAc,CAAC;AAO5D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAMtD,MAAM,MAAM,mBAAmB,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,SAAS,CAAC,cAAc,EAAE,SAAS,CAAC,KAAK,qBA4JxD;AAmBD,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,gBAAgB,EAAE,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;IACpD;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,cAAc,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,cAAc,EAAE,mBAAmB,CAAC;CACrC;AAED,MAAM,WAAW,cAAe,SAAQ,oBAAoB,CAAC,OAAO,IAAI,EAAE,cAAc,CAAC;IACvF;;OAEG;IACH,KAAK,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;IACxB;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC;;;OAGG;IACH,cAAc,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IACjD;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACrC;AAED,yBAAiB,SAAS,CAAC;IACzB,KAAY,KAAK,GAAG,cAAc,CAAC;IACnC,KAAY,KAAK,GAAG,cAAc,CAAC;IACnC,KAAY,cAAc,GAAG,mBAAmB,CAAC;CAClD"}
|