@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.
Files changed (62) hide show
  1. package/lib/accordion/index.d.ts +1 -0
  2. package/lib/accordion/index.d.ts.map +1 -1
  3. package/lib/accordion/index.js +3 -1
  4. package/lib/accordion/index.js.map +1 -1
  5. package/lib/accordion/panel/AccordionPanel.d.ts +19 -1
  6. package/lib/accordion/panel/AccordionPanel.d.ts.map +1 -1
  7. package/lib/accordion/panel/AccordionPanel.js +18 -2
  8. package/lib/accordion/panel/AccordionPanel.js.map +1 -1
  9. package/lib/collapsible/index.d.ts +1 -0
  10. package/lib/collapsible/index.d.ts.map +1 -1
  11. package/lib/collapsible/index.js +3 -1
  12. package/lib/collapsible/index.js.map +1 -1
  13. package/lib/collapsible/panel/CollapsiblePanel.d.ts +19 -1
  14. package/lib/collapsible/panel/CollapsiblePanel.d.ts.map +1 -1
  15. package/lib/collapsible/panel/CollapsiblePanel.js +18 -2
  16. package/lib/collapsible/panel/CollapsiblePanel.js.map +1 -1
  17. package/lib/collapsible/panel/CollapsiblePanelContext.d.ts +21 -0
  18. package/lib/collapsible/panel/CollapsiblePanelContext.d.ts.map +1 -0
  19. package/lib/collapsible/panel/CollapsiblePanelContext.js +48 -0
  20. package/lib/collapsible/panel/CollapsiblePanelContext.js.map +1 -0
  21. package/lib/collapsible/panel/useCollapsiblePanel.d.ts +17 -0
  22. package/lib/collapsible/panel/useCollapsiblePanel.d.ts.map +1 -1
  23. package/lib/collapsible/panel/useCollapsiblePanel.js +4 -2
  24. package/lib/collapsible/panel/useCollapsiblePanel.js.map +1 -1
  25. package/lib/combobox/portal/ComboboxPortal.js +1 -1
  26. package/lib/dialog/portal/DialogPortal.d.ts +4 -2
  27. package/lib/dialog/portal/DialogPortal.d.ts.map +1 -1
  28. package/lib/dialog/portal/DialogPortal.js +5 -3
  29. package/lib/dialog/portal/DialogPortal.js.map +1 -1
  30. package/lib/menu/portal/MenuPortal.js +1 -1
  31. package/lib/popover/portal/PopoverPortal.js +1 -1
  32. package/lib/select/portal/SelectPortal.js +1 -1
  33. package/lib/switch/thumb/SwitchThumb.d.ts +19 -2
  34. package/lib/switch/thumb/SwitchThumb.d.ts.map +1 -1
  35. package/lib/switch/thumb/SwitchThumb.js +21 -3
  36. package/lib/switch/thumb/SwitchThumb.js.map +1 -1
  37. package/lib/toast/root/ToastRoot.d.ts +20 -8
  38. package/lib/toast/root/ToastRoot.d.ts.map +1 -1
  39. package/lib/toast/root/ToastRoot.js +28 -8
  40. package/lib/toast/root/ToastRoot.js.map +1 -1
  41. package/lib/toast/store.js +1 -1
  42. package/lib/toast/store.js.map +1 -1
  43. package/lib/toast/useToastManager.d.ts +7 -0
  44. package/lib/toast/useToastManager.d.ts.map +1 -1
  45. package/lib/tooltip/portal/TooltipPortal.js +1 -1
  46. package/package.json +1 -1
  47. package/src/accordion/index.ts +1 -0
  48. package/src/accordion/panel/AccordionPanel.tsx +40 -2
  49. package/src/collapsible/index.ts +1 -0
  50. package/src/collapsible/panel/CollapsiblePanel.tsx +40 -2
  51. package/src/collapsible/panel/CollapsiblePanelContext.ts +34 -0
  52. package/src/collapsible/panel/useCollapsiblePanel.tsx +27 -3
  53. package/src/combobox/portal/ComboboxPortal.tsx +1 -1
  54. package/src/dialog/portal/DialogPortal.tsx +5 -3
  55. package/src/menu/portal/MenuPortal.tsx +1 -1
  56. package/src/popover/portal/PopoverPortal.tsx +1 -1
  57. package/src/select/portal/SelectPortal.tsx +1 -1
  58. package/src/switch/thumb/SwitchThumb.tsx +40 -5
  59. package/src/toast/root/ToastRoot.tsx +37 -9
  60. package/src/toast/store.ts +1 -1
  61. package/src/toast/useToastManager.ts +7 -0
  62. package/src/tooltip/portal/TooltipPortal.tsx +1 -1
@@ -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"}
@@ -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.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
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;AAIpC,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;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,cAAc,EAAE,cAAc,CAAC,KAAK,iFA2ClE;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;CACnC;AAED,yBAAiB,cAAc,CAAC;IAC9B,KAAY,KAAK,GAAG,mBAAmB,CAAC;IACxC,KAAY,KAAK,GAAG,mBAAmB,CAAC;CACzC"}
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
- return (0, useRenderElement_1.useRenderElement)(react_native_1.View, componentProps, {
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBb,wCA2CC;AA7DD,6CAA+B;AAC/B,+CAAoC;AACpC,wEAAqE;AACrE,0FAA0F;AAC1F,qFAAkF;AAGlF,uEAAuE;AACvE,uEAAuE;AAGvE;;;;;;GAMG;AACH,SAAgB,cAAc,CAAC,cAAoC;IACjE,MAAM,EACJ,SAAS,EACT,WAAW,EAAE,eAAe,EAC5B,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,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,OAAO,IAAA,mCAAgB,EAAC,mBAAI,EAAE,cAAc,EAAE;QAC5C,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;AACL,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"}
@@ -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.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
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;AAGxD;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,cAAc,EAAE,gBAAgB,CAAC,KAAK,iFAkCtE;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;CACnC;AAED,yBAAiB,gBAAgB,CAAC;IAChC,KAAY,KAAK,GAAG,qBAAqB,CAAC;IAC1C,KAAY,KAAK,GAAG,qBAAqB,CAAC;CAC3C"}
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
- return (0, useRenderElement_1.useRenderElement)(react_native_1.View, componentProps, {
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBb,4CAkCC;AApDD,6CAA+B;AAC/B,+CAAoC;AACpC,wEAAqE;AACrE,2EAA2E;AAI3E,+DAA4D;AAE5D;;;;;;;;GAQG;AACH,SAAgB,gBAAgB,CAAC,cAAsC;IACrE,MAAM,EACJ,SAAS,EACT,WAAW,GAAG,KAAK,EACnB,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,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,OAAO,IAAA,mCAAgB,EAAC,mBAAI,EAAE,cAAc,EAAE;QAC5C,KAAK;QACL,GAAG;QACH,OAAO,EAAE,YAAY;QACrB,KAAK,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE,CAAC;KAC5D,CAAC,CAAC;AACL,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;;;;;;;;;;;;;EAgD5E;AAED,MAAM,WAAW,6BAA6B;IAC5C,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B"}
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
- const wrappedChildren = React.useMemo(() => (0, jsx_runtime_1.jsx)(react_native_1.View, { onLayout: handleContentLayout, children: children }), [handleContentLayout, children]);
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,kDAgDC;;AAnED,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,QAAQ,EAAE,GAAG,UAAU,CAAC;IAE7C,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,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,CACnC,GAAG,EAAE,CAAC,uBAAC,mBAAI,IAAC,QAAQ,EAAE,mBAAmB,YAAG,QAAQ,GAAQ,EAC5D,CAAC,mBAAmB,EAAE,QAAQ,CAAC,CAChC,CAAC;IAEF,OAAO;QACL,UAAU;QACV,KAAK;QACL,YAAY,EAAE,WAAW,IAAI,OAAO;QACpC,eAAe;KAChB,CAAC;AACJ,CAAC"}
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: "none", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: (event) => {
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
- * Rendering is headless: `animationType` is `"none"` so consumers own all
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;;;;;;;;GAQG;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"}
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
- * Rendering is headless: `animationType` is `"none"` so consumers own all
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: "none", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: (event) => {
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;;AAiBb,oCA2BC;;AA1CD,+CAAgE;AAChE,iEAAiE;AACjE,+DAA4D;AAC5D,mFAAgF;AAChF,iDAA8C;AAE9C;;;;;;;;GAQG;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"}
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: "none", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: (event) => {
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: "none", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: (event) => {
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: "none", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: (event) => {
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;AAGpC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAExD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,cAAc,EAAE,WAAW,CAAC,KAAK,8FAU5D;AAED,MAAM,WAAW,gBAAiB,SAAQ,eAAe;CAAG;AAE5D,MAAM,WAAW,gBACf,SAAQ,oBAAoB,CAAC,OAAO,IAAI,EAAE,gBAAgB,CAAC;CAAG;AAEhE,yBAAiB,WAAW,CAAC;IAC3B,KAAY,KAAK,GAAG,gBAAgB,CAAC;IACrC,KAAY,KAAK,GAAG,gBAAgB,CAAC;CACtC"}
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"}