@limonify/zest-ui 0.1.1 → 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/combobox/portal/ComboboxPortal.js +1 -1
- package/lib/dialog/portal/DialogPortal.d.ts +4 -2
- package/lib/dialog/portal/DialogPortal.d.ts.map +1 -1
- package/lib/dialog/portal/DialogPortal.js +5 -3
- package/lib/dialog/portal/DialogPortal.js.map +1 -1
- package/lib/menu/portal/MenuPortal.js +1 -1
- package/lib/popover/portal/PopoverPortal.js +1 -1
- package/lib/select/portal/SelectPortal.js +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/lib/tooltip/portal/TooltipPortal.js +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/combobox/portal/ComboboxPortal.tsx +1 -1
- package/src/dialog/portal/DialogPortal.tsx +5 -3
- package/src/menu/portal/MenuPortal.tsx +1 -1
- package/src/popover/portal/PopoverPortal.tsx +1 -1
- package/src/select/portal/SelectPortal.tsx +1 -1
- 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/src/tooltip/portal/TooltipPortal.tsx +1 -1
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"}
|
|
@@ -16,7 +16,7 @@ function ComboboxPortal(props) {
|
|
|
16
16
|
if (!shouldRender) {
|
|
17
17
|
return null;
|
|
18
18
|
}
|
|
19
|
-
return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: open, animationType: "
|
|
19
|
+
return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: open, animationType: "fade", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: (event) => {
|
|
20
20
|
setOpen(false, event);
|
|
21
21
|
}, children: children }));
|
|
22
22
|
}
|
|
@@ -5,8 +5,10 @@ import * as React from 'react';
|
|
|
5
5
|
* Implemented with React Native's `Modal`, which mounts its children at the
|
|
6
6
|
* root of the native view hierarchy, contains accessibility focus, and wires
|
|
7
7
|
* the Android hardware back button (and Escape on web) to `onRequestClose`.
|
|
8
|
-
*
|
|
9
|
-
* animation
|
|
8
|
+
* The Modal uses `animationType="fade"` so open/close get a smooth native
|
|
9
|
+
* cross-fade (including the exit, which a consumer-driven animation can't cover
|
|
10
|
+
* because the Modal unmounts on close). Consumers still layer their own
|
|
11
|
+
* enter transitions (scale/slide) on the popup on top of this fade.
|
|
10
12
|
*/
|
|
11
13
|
export declare function DialogPortal(props: DialogPortal.Props): React.JSX.Element | null;
|
|
12
14
|
export interface DialogPortalProps {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialogPortal.d.ts","sourceRoot":"","sources":["../../../src/dialog/portal/DialogPortal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B
|
|
1
|
+
{"version":3,"file":"DialogPortal.d.ts","sourceRoot":"","sources":["../../../src/dialog/portal/DialogPortal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,YAAY,CAAC,KAAK,4BA2BrD;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACnC;AAED,yBAAiB,YAAY,CAAC;IAC5B,KAAY,KAAK,GAAG,iBAAiB,CAAC;CACvC"}
|
|
@@ -14,8 +14,10 @@ const reasons_1 = require("../../utils/reasons");
|
|
|
14
14
|
* Implemented with React Native's `Modal`, which mounts its children at the
|
|
15
15
|
* root of the native view hierarchy, contains accessibility focus, and wires
|
|
16
16
|
* the Android hardware back button (and Escape on web) to `onRequestClose`.
|
|
17
|
-
*
|
|
18
|
-
* animation
|
|
17
|
+
* The Modal uses `animationType="fade"` so open/close get a smooth native
|
|
18
|
+
* cross-fade (including the exit, which a consumer-driven animation can't cover
|
|
19
|
+
* because the Modal unmounts on close). Consumers still layer their own
|
|
20
|
+
* enter transitions (scale/slide) on the popup on top of this fade.
|
|
19
21
|
*/
|
|
20
22
|
function DialogPortal(props) {
|
|
21
23
|
const { children, keepMounted = false } = props;
|
|
@@ -25,7 +27,7 @@ function DialogPortal(props) {
|
|
|
25
27
|
if (!shouldRender) {
|
|
26
28
|
return null;
|
|
27
29
|
}
|
|
28
|
-
return ((0, jsx_runtime_1.jsx)(DialogPortalContext_1.DialogPortalContext.Provider, { value: keepMounted, children: (0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: open, animationType: "
|
|
30
|
+
return ((0, jsx_runtime_1.jsx)(DialogPortalContext_1.DialogPortalContext.Provider, { value: keepMounted, children: (0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: open, animationType: "fade", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: (event) => {
|
|
29
31
|
store.setOpen(false, (0, createChangeEventDetails_1.createChangeEventDetails)(reasons_1.REASONS.escapeKey, event));
|
|
30
32
|
}, children: children }) }));
|
|
31
33
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialogPortal.js","sourceRoot":"","sources":["../../../src/dialog/portal/DialogPortal.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;
|
|
1
|
+
{"version":3,"file":"DialogPortal.js","sourceRoot":"","sources":["../../../src/dialog/portal/DialogPortal.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;AAmBb,oCA2BC;;AA5CD,+CAAgE;AAChE,iEAAiE;AACjE,+DAA4D;AAC5D,mFAAgF;AAChF,iDAA8C;AAE9C;;;;;;;;;;GAUG;AACH,SAAgB,YAAY,CAAC,KAAyB;IACpD,MAAM,EAAE,QAAQ,EAAE,WAAW,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IAEhD,MAAM,KAAK,GAAG,IAAA,wCAAoB,GAAE,CAAC;IACrC,MAAM,IAAI,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IAEpC,MAAM,YAAY,GAAG,IAAI,IAAI,WAAW,CAAC;IACzC,IAAI,CAAC,YAAY,EAAE,CAAC;QAClB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,uBAAC,yCAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,YAC9C,uBAAC,oBAAK,IACJ,WAAW,QACX,OAAO,EAAE,IAAI,EACb,aAAa,EAAC,MAAM,EACpB,oBAAoB,QACpB,wBAAwB,QACxB,cAAc,EAAE,CAAC,KAAoC,EAAE,EAAE;gBACvD,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,IAAA,mDAAwB,EAAC,iBAAO,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;YAC3E,CAAC,YAEA,QAAQ,GACH,GACqB,CAChC,CAAC;AACJ,CAAC"}
|
|
@@ -25,7 +25,7 @@ function MenuPortal(props) {
|
|
|
25
25
|
if (!shouldRender) {
|
|
26
26
|
return null;
|
|
27
27
|
}
|
|
28
|
-
return ((0, jsx_runtime_1.jsx)(MenuPortalContext_1.MenuPortalContext.Provider, { value: keepMounted, children: (0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: open, animationType: "
|
|
28
|
+
return ((0, jsx_runtime_1.jsx)(MenuPortalContext_1.MenuPortalContext.Provider, { value: keepMounted, children: (0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: open, animationType: "fade", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: (event) => {
|
|
29
29
|
const eventDetails = (0, createChangeEventDetails_1.createChangeEventDetails)(reasons_1.REASONS.escapeKey, event);
|
|
30
30
|
store.setOpen(false, eventDetails);
|
|
31
31
|
// A submenu closes itself; `closeParentOnEsc` dismisses the whole menu
|
|
@@ -27,7 +27,7 @@ function PopoverPortal(props) {
|
|
|
27
27
|
if (!shouldRender) {
|
|
28
28
|
return null;
|
|
29
29
|
}
|
|
30
|
-
return ((0, jsx_runtime_1.jsx)(PopoverPortalContext_1.PopoverPortalContext.Provider, { value: keepMounted, children: (0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: open, animationType: "
|
|
30
|
+
return ((0, jsx_runtime_1.jsx)(PopoverPortalContext_1.PopoverPortalContext.Provider, { value: keepMounted, children: (0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: open, animationType: "fade", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: (event) => {
|
|
31
31
|
store.setOpen(false, (0, createChangeEventDetails_1.createChangeEventDetails)(reasons_1.REASONS.escapeKey, event));
|
|
32
32
|
}, children: children }) }));
|
|
33
33
|
}
|
|
@@ -21,7 +21,7 @@ function SelectPortal(props) {
|
|
|
21
21
|
if (!shouldRender) {
|
|
22
22
|
return null;
|
|
23
23
|
}
|
|
24
|
-
return ((0, jsx_runtime_1.jsx)(SelectPortalContext_1.SelectPortalContext.Provider, { value: keepMounted, children: (0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: open, animationType: "
|
|
24
|
+
return ((0, jsx_runtime_1.jsx)(SelectPortalContext_1.SelectPortalContext.Provider, { value: keepMounted, children: (0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: open, animationType: "fade", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: (event) => {
|
|
25
25
|
store.setOpen(false, (0, createChangeEventDetails_1.createChangeEventDetails)(reasons_1.REASONS.escapeKey, event));
|
|
26
26
|
}, children: children }) }));
|
|
27
27
|
}
|
|
@@ -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"}
|