@nation-a/ui 0.11.2 → 0.11.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/dist/index.cjs +108 -148
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +108 -148
- package/dist/index.js.map +1 -1
- package/dist/styled-system/styles.css +60 -92
- package/dist/types/components/BottomSheet/BottomSheet.stories.d.ts +5 -0
- package/dist/types/components/BottomSheet/index.d.ts +31 -37
- package/dist/types/components/BottomSheet/src/SheetBackdrop.d.ts +2 -0
- package/dist/types/components/BottomSheet/src/SheetContainer.d.ts +5 -0
- package/dist/types/components/BottomSheet/src/SheetContent.d.ts +6 -0
- package/dist/types/components/BottomSheet/src/SheetHeader.d.ts +6 -0
- package/dist/types/components/BottomSheet/src/SheetScroller.d.ts +3 -0
- package/dist/types/components/BottomSheet/src/constants.d.ts +12 -0
- package/dist/types/components/BottomSheet/src/context.d.ts +9 -0
- package/dist/types/components/BottomSheet/src/hooks.d.ts +22 -0
- package/dist/types/components/BottomSheet/src/index.d.ts +10 -0
- package/dist/types/components/BottomSheet/src/sheet.d.ts +16 -0
- package/dist/types/components/BottomSheet/src/styles.d.ts +2 -0
- package/dist/types/components/BottomSheet/src/types.d.ts +87 -0
- package/dist/types/components/BottomSheet/src/use-prevent-scroll.d.ts +13 -0
- package/dist/types/components/BottomSheet/src/utils.d.ts +10 -0
- package/dist/types/components/Navigation/navigation.recipe.d.ts +1 -1
- package/dist/types/components/Tabs/tabs.recipe.d.ts +1 -1
- package/dist/types/components/index.d.ts +1 -1
- package/package.json +2 -2
- package/dist/types/components/BottomSheet2/BottomSheet.stories.d.ts +0 -11
- package/dist/types/components/BottomSheet2/index.d.ts +0 -38
- /package/dist/types/components/{BottomSheet2 → BottomSheet}/bottomsheet.recipe.d.ts +0 -0
package/dist/index.cjs
CHANGED
|
@@ -14078,19 +14078,19 @@ function createScopedAnimate(scope) {
|
|
|
14078
14078
|
return scopedAnimate;
|
|
14079
14079
|
}
|
|
14080
14080
|
const animate = createScopedAnimate();
|
|
14081
|
-
|
|
14082
|
-
|
|
14083
|
-
|
|
14081
|
+
const MAX_HEIGHT = "calc(100% - env(safe-area-inset-top))";
|
|
14082
|
+
const IS_SSR = typeof window === "undefined";
|
|
14083
|
+
const DEFAULT_TWEEN_CONFIG = {
|
|
14084
14084
|
ease: "easeOut",
|
|
14085
14085
|
duration: 0.2
|
|
14086
14086
|
};
|
|
14087
|
-
|
|
14087
|
+
const REDUCED_MOTION_TWEEN_CONFIG = {
|
|
14088
14088
|
ease: "linear",
|
|
14089
14089
|
duration: 0.01
|
|
14090
14090
|
};
|
|
14091
|
-
|
|
14092
|
-
|
|
14093
|
-
|
|
14091
|
+
const DEFAULT_DRAG_CLOSE_THRESHOLD = 0.6;
|
|
14092
|
+
const DEFAULT_DRAG_VELOCITY_THRESHOLD = 500;
|
|
14093
|
+
const useIsomorphicLayoutEffect = IS_SSR ? React.useEffect : React.useLayoutEffect;
|
|
14094
14094
|
function useModalEffect({
|
|
14095
14095
|
y,
|
|
14096
14096
|
rootId,
|
|
@@ -14170,19 +14170,19 @@ function useEventCallbacks(isOpen, callbacks) {
|
|
|
14170
14170
|
const handleAnimationComplete = React.useCallback(() => {
|
|
14171
14171
|
var _a, _b, _c, _d;
|
|
14172
14172
|
if (!didOpen.current) {
|
|
14173
|
-
(_b = (_a = callbacks.current).onOpenEnd) == null ? void 0 : _b.call(_a);
|
|
14173
|
+
(_b = (_a = callbacks.current) == null ? void 0 : _a.onOpenEnd) == null ? void 0 : _b.call(_a);
|
|
14174
14174
|
didOpen.current = true;
|
|
14175
14175
|
} else {
|
|
14176
|
-
(_d = (_c = callbacks.current).onCloseEnd) == null ? void 0 : _d.call(_c);
|
|
14176
|
+
(_d = (_c = callbacks.current) == null ? void 0 : _c.onCloseEnd) == null ? void 0 : _d.call(_c);
|
|
14177
14177
|
didOpen.current = false;
|
|
14178
14178
|
}
|
|
14179
14179
|
}, [isOpen, prevOpen]);
|
|
14180
14180
|
React.useEffect(() => {
|
|
14181
14181
|
var _a, _b, _c, _d;
|
|
14182
14182
|
if (!prevOpen && isOpen) {
|
|
14183
|
-
(_b = (_a = callbacks.current).onOpenStart) == null ? void 0 : _b.call(_a);
|
|
14183
|
+
(_b = (_a = callbacks.current) == null ? void 0 : _a.onOpenStart) == null ? void 0 : _b.call(_a);
|
|
14184
14184
|
} else if (!isOpen && prevOpen) {
|
|
14185
|
-
(_d = (_c = callbacks.current).onCloseStart) == null ? void 0 : _d.call(_c);
|
|
14185
|
+
(_d = (_c = callbacks.current) == null ? void 0 : _c.onCloseStart) == null ? void 0 : _d.call(_c);
|
|
14186
14186
|
}
|
|
14187
14187
|
}, [isOpen, prevOpen]);
|
|
14188
14188
|
return { handleAnimationComplete };
|
|
@@ -14224,24 +14224,20 @@ function useEffectEvent(handler) {
|
|
|
14224
14224
|
return fn == null ? void 0 : fn(...args);
|
|
14225
14225
|
}, []);
|
|
14226
14226
|
}
|
|
14227
|
-
|
|
14227
|
+
const constraints = { bottom: 0, top: 0, left: 0, right: 0 };
|
|
14228
14228
|
function useDragConstraints() {
|
|
14229
14229
|
const constraintsRef = React.useRef(null);
|
|
14230
14230
|
const onMeasureDragConstraints = React.useCallback(() => constraints, []);
|
|
14231
14231
|
return { constraintsRef, onMeasureDragConstraints };
|
|
14232
14232
|
}
|
|
14233
|
-
|
|
14234
|
-
|
|
14235
|
-
);
|
|
14236
|
-
var useSheetContext = () => {
|
|
14233
|
+
const SheetContext = React.createContext(void 0);
|
|
14234
|
+
const useSheetContext = () => {
|
|
14237
14235
|
const context2 = React.useContext(SheetContext);
|
|
14238
14236
|
if (!context2) throw new Error("Sheet context error");
|
|
14239
14237
|
return context2;
|
|
14240
14238
|
};
|
|
14241
|
-
|
|
14242
|
-
function SheetScrollerContextProvider({
|
|
14243
|
-
children
|
|
14244
|
-
}) {
|
|
14239
|
+
const SheetScrollerContext = React.createContext(void 0);
|
|
14240
|
+
function SheetScrollerContextProvider({ children }) {
|
|
14245
14241
|
const sheetContext = useSheetContext();
|
|
14246
14242
|
const [disableDrag, setDisableDrag] = React.useState(!!sheetContext.disableDrag);
|
|
14247
14243
|
function setDragEnabled() {
|
|
@@ -14250,15 +14246,9 @@ function SheetScrollerContextProvider({
|
|
|
14250
14246
|
function setDragDisabled() {
|
|
14251
14247
|
if (!disableDrag) setDisableDrag(true);
|
|
14252
14248
|
}
|
|
14253
|
-
return /* @__PURE__ */
|
|
14254
|
-
SheetScrollerContext.Provider,
|
|
14255
|
-
{
|
|
14256
|
-
value: { disableDrag, setDragEnabled, setDragDisabled }
|
|
14257
|
-
},
|
|
14258
|
-
children
|
|
14259
|
-
);
|
|
14249
|
+
return /* @__PURE__ */ jsxRuntime.jsx(SheetScrollerContext.Provider, { value: { disableDrag, setDragEnabled, setDragDisabled }, children });
|
|
14260
14250
|
}
|
|
14261
|
-
|
|
14251
|
+
const useSheetScrollerContext = () => {
|
|
14262
14252
|
const context2 = React.useContext(SheetScrollerContext);
|
|
14263
14253
|
if (!context2) throw new Error("Sheet scroller context error");
|
|
14264
14254
|
return context2;
|
|
@@ -14323,20 +14313,20 @@ function cached(fn) {
|
|
|
14323
14313
|
return res;
|
|
14324
14314
|
};
|
|
14325
14315
|
}
|
|
14326
|
-
|
|
14316
|
+
const isMac = cached(function() {
|
|
14327
14317
|
return testPlatform(/^Mac/i);
|
|
14328
14318
|
});
|
|
14329
|
-
|
|
14319
|
+
const isIPhone = cached(function() {
|
|
14330
14320
|
return testPlatform(/^iPhone/i);
|
|
14331
14321
|
});
|
|
14332
|
-
|
|
14322
|
+
const isIPad = cached(function() {
|
|
14333
14323
|
return testPlatform(/^iPad/i) || // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
|
|
14334
14324
|
isMac() && navigator.maxTouchPoints > 1;
|
|
14335
14325
|
});
|
|
14336
|
-
|
|
14326
|
+
const isIOS = cached(function() {
|
|
14337
14327
|
return isIPhone() || isIPad();
|
|
14338
14328
|
});
|
|
14339
|
-
|
|
14329
|
+
const KEYBOARD_BUFFER = 24;
|
|
14340
14330
|
function chain(...callbacks) {
|
|
14341
14331
|
return (...args) => {
|
|
14342
14332
|
for (const callback of callbacks) {
|
|
@@ -14346,7 +14336,7 @@ function chain(...callbacks) {
|
|
|
14346
14336
|
}
|
|
14347
14337
|
};
|
|
14348
14338
|
}
|
|
14349
|
-
|
|
14339
|
+
const visualViewport = typeof document !== "undefined" && window.visualViewport;
|
|
14350
14340
|
function isScrollable(node, checkForOverflow) {
|
|
14351
14341
|
if (!node) {
|
|
14352
14342
|
return false;
|
|
@@ -14370,7 +14360,7 @@ function getScrollParent(node, checkForOverflow) {
|
|
|
14370
14360
|
}
|
|
14371
14361
|
return scrollableNode || document.scrollingElement || document.documentElement;
|
|
14372
14362
|
}
|
|
14373
|
-
|
|
14363
|
+
const nonTextInputTypes = /* @__PURE__ */ new Set([
|
|
14374
14364
|
"checkbox",
|
|
14375
14365
|
"radio",
|
|
14376
14366
|
"range",
|
|
@@ -14381,8 +14371,8 @@ var nonTextInputTypes = /* @__PURE__ */ new Set([
|
|
|
14381
14371
|
"submit",
|
|
14382
14372
|
"reset"
|
|
14383
14373
|
]);
|
|
14384
|
-
|
|
14385
|
-
|
|
14374
|
+
let preventScrollCount = 0;
|
|
14375
|
+
let restore;
|
|
14386
14376
|
function usePreventScroll(options = {}) {
|
|
14387
14377
|
const { isDisabled } = options;
|
|
14388
14378
|
useIsomorphicLayoutEffect(() => {
|
|
@@ -14550,7 +14540,7 @@ function scrollIntoView(target) {
|
|
|
14550
14540
|
function willOpenKeyboard(target) {
|
|
14551
14541
|
return target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type) || target instanceof HTMLTextAreaElement || target instanceof HTMLElement && target.isContentEditable;
|
|
14552
14542
|
}
|
|
14553
|
-
|
|
14543
|
+
const styles = {
|
|
14554
14544
|
wrapper: {
|
|
14555
14545
|
position: "fixed",
|
|
14556
14546
|
top: 0,
|
|
@@ -14616,7 +14606,7 @@ var styles = {
|
|
|
14616
14606
|
overflowY: "auto"
|
|
14617
14607
|
}
|
|
14618
14608
|
};
|
|
14619
|
-
|
|
14609
|
+
const Sheet$1 = React.forwardRef(
|
|
14620
14610
|
({
|
|
14621
14611
|
onOpenStart,
|
|
14622
14612
|
onOpenEnd,
|
|
@@ -14650,14 +14640,8 @@ var Sheet = React.forwardRef(
|
|
|
14650
14640
|
...reduceMotion ? REDUCED_MOTION_TWEEN_CONFIG : tweenConfig
|
|
14651
14641
|
};
|
|
14652
14642
|
const y = useMotionValue(windowHeight);
|
|
14653
|
-
const zIndex2 = useTransform(
|
|
14654
|
-
|
|
14655
|
-
(value) => value + 2 >= windowHeight ? -1 : (style == null ? void 0 : style.zIndex) ?? 9999
|
|
14656
|
-
);
|
|
14657
|
-
const visibility = useTransform(
|
|
14658
|
-
y,
|
|
14659
|
-
(value) => value + 2 >= windowHeight ? "hidden" : "visible"
|
|
14660
|
-
);
|
|
14643
|
+
const zIndex2 = useTransform(y, (value) => value + 2 >= windowHeight ? -1 : (style == null ? void 0 : style.zIndex) ?? 9999);
|
|
14644
|
+
const visibility = useTransform(y, (value) => value + 2 >= windowHeight ? "hidden" : "visible");
|
|
14661
14645
|
const callbacks = React.useRef({
|
|
14662
14646
|
onOpenStart,
|
|
14663
14647
|
onOpenEnd,
|
|
@@ -14680,9 +14664,7 @@ var Sheet = React.forwardRef(
|
|
|
14680
14664
|
});
|
|
14681
14665
|
console.assert(
|
|
14682
14666
|
inDescendingOrder(snapPoints) || windowHeight === 0,
|
|
14683
|
-
`Snap points need to be in descending order got: [${snapPoints.join(
|
|
14684
|
-
", "
|
|
14685
|
-
)}]`
|
|
14667
|
+
`Snap points need to be in descending order got: [${snapPoints.join(", ")}]`
|
|
14686
14668
|
);
|
|
14687
14669
|
}
|
|
14688
14670
|
const onDrag = useEffectEvent((_, { delta }) => {
|
|
@@ -14707,9 +14689,7 @@ var Sheet = React.forwardRef(
|
|
|
14707
14689
|
const currentY = y.get();
|
|
14708
14690
|
let snapTo = 0;
|
|
14709
14691
|
if (snapPoints) {
|
|
14710
|
-
const snapToValues = snapPoints.map(
|
|
14711
|
-
(p) => sheetHeight - Math.min(p, sheetHeight)
|
|
14712
|
-
);
|
|
14692
|
+
const snapToValues = snapPoints.map((p) => sheetHeight - Math.min(p, sheetHeight));
|
|
14713
14693
|
if (detent === "content-height" && !snapToValues.includes(0)) {
|
|
14714
14694
|
snapToValues.unshift(0);
|
|
14715
14695
|
}
|
|
@@ -14721,9 +14701,7 @@ var Sheet = React.forwardRef(
|
|
|
14721
14701
|
animate(y, snapTo, animationOptions);
|
|
14722
14702
|
if (snapPoints && onSnap) {
|
|
14723
14703
|
const snapValue = Math.abs(Math.round(snapPoints[0] - snapTo));
|
|
14724
|
-
const snapIndex = snapPoints.indexOf(
|
|
14725
|
-
getClosest(snapPoints, snapValue)
|
|
14726
|
-
);
|
|
14704
|
+
const snapIndex = snapPoints.indexOf(getClosest(snapPoints, snapValue));
|
|
14727
14705
|
onSnap(snapIndex);
|
|
14728
14706
|
}
|
|
14729
14707
|
const roundedSheetHeight = Math.round(sheetHeight);
|
|
@@ -14787,24 +14765,13 @@ var Sheet = React.forwardRef(
|
|
|
14787
14765
|
reduceMotion,
|
|
14788
14766
|
disableDrag
|
|
14789
14767
|
};
|
|
14790
|
-
const sheet = /* @__PURE__ */
|
|
14791
|
-
motion.div,
|
|
14792
|
-
{
|
|
14793
|
-
...rest,
|
|
14794
|
-
ref,
|
|
14795
|
-
style: { ...styles.wrapper, zIndex: zIndex2, visibility, ...style }
|
|
14796
|
-
},
|
|
14797
|
-
/* @__PURE__ */ React.createElement(AnimatePresence, null, isOpen ? /* @__PURE__ */ React.createElement(SheetScrollerContextProvider, null, React.Children.map(
|
|
14798
|
-
children,
|
|
14799
|
-
(child, i) => React.cloneElement(child, { key: `sheet-child-${i}` })
|
|
14800
|
-
)) : null)
|
|
14801
|
-
));
|
|
14768
|
+
const sheet = /* @__PURE__ */ jsxRuntime.jsx(SheetContext.Provider, { value: context2, children: /* @__PURE__ */ jsxRuntime.jsx(motion.div, { ...rest, ref, style: { ...styles.wrapper, zIndex: zIndex2, visibility, ...style }, children: /* @__PURE__ */ jsxRuntime.jsx(AnimatePresence, { children: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(SheetScrollerContextProvider, { children: React.Children.map(children, (child, i) => React.cloneElement(child, { key: `sheet-child-${i}` })) }) : null }) }) });
|
|
14802
14769
|
if (IS_SSR) return sheet;
|
|
14803
14770
|
return reactDom.createPortal(sheet, mountPoint ?? document.body);
|
|
14804
14771
|
}
|
|
14805
14772
|
);
|
|
14806
|
-
Sheet.displayName = "Sheet";
|
|
14807
|
-
|
|
14773
|
+
Sheet$1.displayName = "Sheet";
|
|
14774
|
+
const SheetContainer = React.forwardRef(
|
|
14808
14775
|
({ children, style = {}, className = "", ...rest }, ref) => {
|
|
14809
14776
|
const {
|
|
14810
14777
|
y,
|
|
@@ -14822,7 +14789,7 @@ var SheetContainer = React.forwardRef(
|
|
|
14822
14789
|
const initialY = snapPoints ? snapPoints[0] - snapPoints[initialSnap] : 0;
|
|
14823
14790
|
const maxSnapHeight = snapPoints ? snapPoints[0] : null;
|
|
14824
14791
|
const height = maxSnapHeight !== null ? `min(${maxSnapHeight}px, ${MAX_HEIGHT})` : MAX_HEIGHT;
|
|
14825
|
-
return /* @__PURE__ */
|
|
14792
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
14826
14793
|
motion.div,
|
|
14827
14794
|
{
|
|
14828
14795
|
...rest,
|
|
@@ -14838,20 +14805,20 @@ var SheetContainer = React.forwardRef(
|
|
|
14838
14805
|
initial: reduceMotion ? false : { y: windowHeight },
|
|
14839
14806
|
animate: { y: initialY, transition: animationOptions },
|
|
14840
14807
|
exit: { y: windowHeight, transition: animationOptions },
|
|
14841
|
-
onAnimationComplete: handleAnimationComplete
|
|
14842
|
-
|
|
14843
|
-
|
|
14808
|
+
onAnimationComplete: handleAnimationComplete,
|
|
14809
|
+
children
|
|
14810
|
+
}
|
|
14844
14811
|
);
|
|
14845
14812
|
}
|
|
14846
14813
|
);
|
|
14847
14814
|
SheetContainer.displayName = "SheetContainer";
|
|
14848
|
-
|
|
14815
|
+
const SheetContent = React.forwardRef(
|
|
14849
14816
|
({ children, style, disableDrag, className = "", ...rest }, ref) => {
|
|
14850
14817
|
const sheetContext = useSheetContext();
|
|
14851
14818
|
const sheetScrollerContext = useSheetScrollerContext();
|
|
14852
14819
|
const { constraintsRef, onMeasureDragConstraints } = useDragConstraints();
|
|
14853
14820
|
const dragProps = disableDrag || sheetScrollerContext.disableDrag ? void 0 : sheetContext.dragProps;
|
|
14854
|
-
return /* @__PURE__ */
|
|
14821
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
14855
14822
|
motion.div,
|
|
14856
14823
|
{
|
|
14857
14824
|
...rest,
|
|
@@ -14860,74 +14827,67 @@ var SheetContent = React.forwardRef(
|
|
|
14860
14827
|
style: { ...styles.content, ...style },
|
|
14861
14828
|
...dragProps,
|
|
14862
14829
|
dragConstraints: constraintsRef,
|
|
14863
|
-
onMeasureDragConstraints
|
|
14864
|
-
|
|
14865
|
-
|
|
14830
|
+
onMeasureDragConstraints,
|
|
14831
|
+
children
|
|
14832
|
+
}
|
|
14866
14833
|
);
|
|
14867
14834
|
}
|
|
14868
14835
|
);
|
|
14869
14836
|
SheetContent.displayName = "SheetContent";
|
|
14870
|
-
|
|
14871
|
-
|
|
14872
|
-
|
|
14873
|
-
|
|
14874
|
-
|
|
14875
|
-
|
|
14876
|
-
|
|
14877
|
-
|
|
14878
|
-
|
|
14879
|
-
|
|
14880
|
-
|
|
14881
|
-
|
|
14882
|
-
|
|
14883
|
-
|
|
14884
|
-
|
|
14885
|
-
{
|
|
14886
|
-
|
|
14887
|
-
|
|
14888
|
-
|
|
14889
|
-
|
|
14890
|
-
|
|
14891
|
-
|
|
14892
|
-
|
|
14893
|
-
|
|
14894
|
-
|
|
14895
|
-
|
|
14896
|
-
|
|
14897
|
-
|
|
14898
|
-
|
|
14899
|
-
|
|
14900
|
-
|
|
14901
|
-
|
|
14902
|
-
|
|
14903
|
-
|
|
14904
|
-
}
|
|
14905
|
-
))
|
|
14906
|
-
);
|
|
14907
|
-
}
|
|
14908
|
-
);
|
|
14837
|
+
const SheetHeader = React.forwardRef(({ children, style, disableDrag, ...rest }, ref) => {
|
|
14838
|
+
const { indicatorRotation, dragProps } = useSheetContext();
|
|
14839
|
+
const { constraintsRef, onMeasureDragConstraints } = useDragConstraints();
|
|
14840
|
+
const _dragProps = disableDrag ? void 0 : dragProps;
|
|
14841
|
+
const indicator1Transform = useTransform(indicatorRotation, (r) => `translateX(2px) rotate(${r}deg)`);
|
|
14842
|
+
const indicator2Transform = useTransform(indicatorRotation, (r) => `translateX(-2px) rotate(${-1 * r}deg)`);
|
|
14843
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
14844
|
+
motion.div,
|
|
14845
|
+
{
|
|
14846
|
+
...rest,
|
|
14847
|
+
ref: mergeRefs([ref, constraintsRef]),
|
|
14848
|
+
style: { ...styles.headerWrapper, ...style },
|
|
14849
|
+
..._dragProps,
|
|
14850
|
+
dragConstraints: constraintsRef,
|
|
14851
|
+
onMeasureDragConstraints,
|
|
14852
|
+
children: children || /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "react-modal-sheet-header", style: styles.header, children: [
|
|
14853
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
14854
|
+
motion.span,
|
|
14855
|
+
{
|
|
14856
|
+
className: "react-modal-sheet-drag-indicator",
|
|
14857
|
+
style: { ...styles.indicator, transform: indicator1Transform }
|
|
14858
|
+
}
|
|
14859
|
+
),
|
|
14860
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
14861
|
+
motion.span,
|
|
14862
|
+
{
|
|
14863
|
+
className: "react-modal-sheet-drag-indicator",
|
|
14864
|
+
style: { ...styles.indicator, transform: indicator2Transform }
|
|
14865
|
+
}
|
|
14866
|
+
)
|
|
14867
|
+
] })
|
|
14868
|
+
}
|
|
14869
|
+
);
|
|
14870
|
+
});
|
|
14909
14871
|
SheetHeader.displayName = "SheetHeader";
|
|
14910
|
-
|
|
14911
|
-
|
|
14912
|
-
|
|
14913
|
-
|
|
14914
|
-
|
|
14915
|
-
|
|
14916
|
-
|
|
14917
|
-
|
|
14918
|
-
|
|
14919
|
-
|
|
14920
|
-
|
|
14921
|
-
|
|
14922
|
-
|
|
14923
|
-
|
|
14924
|
-
|
|
14925
|
-
|
|
14926
|
-
|
|
14927
|
-
}
|
|
14928
|
-
);
|
|
14872
|
+
const isClickable = (props) => !!props.onClick || !!props.onTap;
|
|
14873
|
+
const SheetBackdrop = React.forwardRef(({ style = {}, className = "", ...rest }, ref) => {
|
|
14874
|
+
const Comp = isClickable(rest) ? motion.button : motion.div;
|
|
14875
|
+
const pointerEvents = isClickable(rest) ? "auto" : "none";
|
|
14876
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
14877
|
+
Comp,
|
|
14878
|
+
{
|
|
14879
|
+
...rest,
|
|
14880
|
+
ref,
|
|
14881
|
+
className: `react-modal-sheet-backdrop ${className}`,
|
|
14882
|
+
style: { ...styles.backdrop, ...style, pointerEvents },
|
|
14883
|
+
initial: { opacity: 0 },
|
|
14884
|
+
animate: { opacity: 1 },
|
|
14885
|
+
exit: { opacity: 0 }
|
|
14886
|
+
}
|
|
14887
|
+
);
|
|
14888
|
+
});
|
|
14929
14889
|
SheetBackdrop.displayName = "SheetBackdrop";
|
|
14930
|
-
|
|
14890
|
+
const SheetScroller = React.forwardRef(
|
|
14931
14891
|
({ draggableAt = "top", children, style, className = "", ...rest }, ref) => {
|
|
14932
14892
|
const sheetScrollerContext = useSheetScrollerContext();
|
|
14933
14893
|
function determineDragState(element) {
|
|
@@ -14956,21 +14916,21 @@ var SheetScroller = React.forwardRef(
|
|
|
14956
14916
|
}
|
|
14957
14917
|
}
|
|
14958
14918
|
const scrollProps = isTouchDevice() ? { onScroll, onTouchStart } : void 0;
|
|
14959
|
-
return /* @__PURE__ */
|
|
14919
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
14960
14920
|
"div",
|
|
14961
14921
|
{
|
|
14962
14922
|
...rest,
|
|
14963
14923
|
ref,
|
|
14964
14924
|
className: `react-modal-sheet-scroller ${className}`,
|
|
14965
14925
|
style: { ...styles.scroller, ...style },
|
|
14966
|
-
...scrollProps
|
|
14967
|
-
|
|
14968
|
-
|
|
14926
|
+
...scrollProps,
|
|
14927
|
+
children
|
|
14928
|
+
}
|
|
14969
14929
|
);
|
|
14970
14930
|
}
|
|
14971
14931
|
);
|
|
14972
14932
|
SheetScroller.displayName = "SheetScroller";
|
|
14973
|
-
|
|
14933
|
+
const Sheet = Object.assign(Sheet$1, {
|
|
14974
14934
|
Container: SheetContainer,
|
|
14975
14935
|
Header: SheetHeader,
|
|
14976
14936
|
Content: SheetContent,
|
|
@@ -15033,7 +14993,7 @@ const BottomSheet = React.forwardRef(
|
|
|
15033
14993
|
const snapPoints = snapPercent ? [snapPercent.max * window.innerHeight, snapPercent.min * window.innerHeight] : void 0;
|
|
15034
14994
|
const styles2 = bottomSheetRecipe({ fullHeight });
|
|
15035
14995
|
return /* @__PURE__ */ jsxRuntime.jsx(BottomSheetContext.Provider, { value: { rounded, onClose }, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
15036
|
-
|
|
14996
|
+
Sheet,
|
|
15037
14997
|
{
|
|
15038
14998
|
ref,
|
|
15039
14999
|
snapPoints,
|
|
@@ -15060,11 +15020,11 @@ const Content$2 = React.forwardRef(
|
|
|
15060
15020
|
const { rounded } = React.useContext(BottomSheetContext);
|
|
15061
15021
|
const contentClass = cx(styles2.content, className, cssProp ? css$1(cssProp) : void 0);
|
|
15062
15022
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
15063
|
-
|
|
15023
|
+
Sheet.Container,
|
|
15064
15024
|
{
|
|
15065
15025
|
style: { backgroundColor: "transparent", borderTopLeftRadius: rounded, borderTopRightRadius: rounded },
|
|
15066
15026
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
15067
|
-
|
|
15027
|
+
Sheet.Content,
|
|
15068
15028
|
{
|
|
15069
15029
|
ref,
|
|
15070
15030
|
className: contentClass,
|
|
@@ -15087,7 +15047,7 @@ const Backdrop = React.forwardRef(
|
|
|
15087
15047
|
const { onClose } = React.useContext(BottomSheetContext);
|
|
15088
15048
|
const backdropClass = cx(styles2.backdrop, className);
|
|
15089
15049
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
15090
|
-
|
|
15050
|
+
Sheet.Backdrop,
|
|
15091
15051
|
{
|
|
15092
15052
|
ref,
|
|
15093
15053
|
className: backdropClass,
|
|
@@ -15123,7 +15083,7 @@ BottomSheet.Header = Header;
|
|
|
15123
15083
|
BottomSheet.Content = Content$2;
|
|
15124
15084
|
BottomSheet.Backdrop = Backdrop;
|
|
15125
15085
|
BottomSheet.Handle = Handle;
|
|
15126
|
-
BottomSheet.Scroller =
|
|
15086
|
+
BottomSheet.Scroller = Sheet.Scroller;
|
|
15127
15087
|
const navigationRecipe = sva({
|
|
15128
15088
|
className: "navigation",
|
|
15129
15089
|
slots: anatomy$1.keys(),
|