@ozen-ui/kit 0.66.0 → 0.67.0

package/__inner__/cjs/components/BottomSheetBase/hooks/useBottomSheetBaseDrag.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBottomSheetBaseDrag = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("@use-gesture/react");
+var math_1 = require("../../../utils/math");
+var number_1 = require("../../../utils/number");
+var constants_1 = require("../constants");
+var context_1 = require("../context");
+var useBottomSheetBaseCSSValue_1 = require("./useBottomSheetBaseCSSValue");
+var rubberbandIfOutOfBoundsConstant = 0.55;
+var useBottomSheetBaseDrag = function (target, options) {
+    var _a = options !== null && options !== void 0 ? options : {}, _b = _a.isCloseOnTap, isCloseOnTap = _b === void 0 ? false : _b, _c = _a.isDraggable, isDraggable = _c === void 0 ? true : _c;
+    var _d = (0, context_1.useBottomSheetBaseContext)(), minSnap = _d.minSnap, onCloseContext = _d.onClose, canDrag = _d.canDrag, maxSnap = _d.maxSnap, isClosable = _d.isClosable, snapsControl = _d.snapsControl, findClosestSnap = _d.findClosestSnap, rootRef = _d.rootRef;
+    var userSelect = (0, useBottomSheetBaseCSSValue_1.useBottomSheetBaseCSSValue)({
+        rootRef: rootRef,
+        defaultValue: 'auto',
+        variableName: constants_1.BOTTOM_SHEET_BASE_CSS_VARIABLE.USER_SELECT,
+    });
+    var onClose = function () {
+        snapsControl.toClosed(true);
+        onCloseContext === null || onCloseContext === void 0 ? void 0 : onCloseContext();
+    };
+    var calculateAnimationTime = function (pxChange, velocity) {
+        var rawTime = Math.abs(pxChange / velocity);
+        if ((0, number_1.isNaN)(rawTime)) {
+            return 0;
+        }
+        return (0, math_1.clamp)(rawTime, 200, 500);
+    };
+    var onDragStart = function () {
+        userSelect.setValue('none');
+    };
+    var onDragFinish = function () {
+        userSelect.setValue('auto');
+    };
+    (0, react_1.useDrag)(function (params) {
+        var cancel = params.cancel, down = params.down, first = params.first, last = params.last, _a = params.memo, memo = _a === void 0 ? snapsControl.point.current : _a, _b = tslib_1.__read(params.movement, 2), _my = _b[1], tap = params.tap, _c = tslib_1.__read(params.velocity, 2), velocity = _c[1];
+        var my = _my * -1;
+        if (!canDrag.current) {
+            cancel();
+            return memo;
+        }
+        if (isClosable && isCloseOnTap && tap) {
+            cancel();
+            setTimeout(function () { return onClose(); }, 0);
+            return memo;
+        }
+        if (tap) {
+            return memo;
+        }
+        if (first) {
+            onDragStart();
+        }
+        var rawOffset = memo + my;
+        var predictedDistance = my * velocity;
+        var predictedPoint = Math.max(minSnap, Math.min(maxSnap, rawOffset + predictedDistance * 2));
+        if (last && isClosable && rawOffset + predictedDistance < minSnap / 2) {
+            onDragFinish();
+            onClose();
+            return memo;
+        }
+        var newOffset = (function () {
+            if (!down) {
+                return predictedPoint;
+            }
+            if (!isClosable && minSnap === maxSnap) {
+                if (rawOffset < minSnap) {
+                    return (0, react_1.rubberbandIfOutOfBounds)(rawOffset, minSnap, maxSnap * 1.5, rubberbandIfOutOfBoundsConstant);
+                }
+                return (0, react_1.rubberbandIfOutOfBounds)(rawOffset, minSnap / 1.5, maxSnap, rubberbandIfOutOfBoundsConstant);
+            }
+            return (0, react_1.rubberbandIfOutOfBounds)(rawOffset, isClosable ? 0 : minSnap, maxSnap, rubberbandIfOutOfBoundsConstant);
+        })();
+        if (last) {
+            var closestSnap = findClosestSnap.current(newOffset);
+            snapsControl.toAnimated(closestSnap, {
+                duration: calculateAnimationTime(Math.abs(closestSnap - snapsControl.point.current), velocity),
+            });
+            onDragFinish();
+            return memo;
+        }
+        snapsControl.to(newOffset);
+        return memo;
+    }, {
+        target: isDraggable
+            ? target
+            : {
+                current: null,
+            },
+    });
+};
+exports.useBottomSheetBaseDrag = useBottomSheetBaseDrag;

package/__inner__/cjs/components/BottomSheetBase/hooks/useBottomSheetBaseHeight.d.ts

@@ -0,0 +1,14 @@
+import type { RefObject } from 'react';
+import type { StoredValue } from '../../../hooks/useStoredValue';
+import type { BottomSheetBaseBlocksRefs, BottomSheetBaseContentRef, BottomSheetBaseGetMaxHeight, BottomSheetBaseMaxHeight } from '../entities';
+import type { BottomSheetBaseRegisterReady } from '../hooks';
+export declare const useBottomSheetBaseHeight: ({ contentRef, blocksRefs, customMaxHeight: customMaxHeightProp, registerReady, }: {
+    contentRef: RefObject<BottomSheetBaseContentRef>;
+    blocksRefs: StoredValue<BottomSheetBaseBlocksRefs>;
+    customMaxHeight: BottomSheetBaseMaxHeight | BottomSheetBaseGetMaxHeight | undefined;
+    registerReady: BottomSheetBaseRegisterReady;
+}) => {
+    minHeight: number;
+    maxHeight: number;
+    recalculateHeight: () => void;
+};

package/__inner__/cjs/components/BottomSheetBase/hooks/useBottomSheetBaseHeight.js

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBottomSheetBaseHeight = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var environment_1 = require("../../../constants/environment");
+var useEventListener_1 = require("../../../hooks/useEventListener");
+var useMultipleResizeObserver_1 = require("../../../hooks/useMultipleResizeObserver");
+var isFunction_1 = require("../../../utils/isFunction");
+var number_1 = require("../../../utils/number");
+var useBottomSheetBaseHeight = function (_a) {
+    var contentRef = _a.contentRef, blocksRefs = _a.blocksRefs, customMaxHeightProp = _a.customMaxHeight, registerReady = _a.registerReady;
+    var setReadyContentHeight = (0, react_1.useMemo)(function () { return registerReady('contentHeight'); }, [registerReady]);
+    var setReadyMaxHeight = (0, react_1.useMemo)(function () { return registerReady('maxHeight'); }, [registerReady]);
+    var getElementHeight = function (element) {
+        var _a;
+        var rect = element === null || element === void 0 ? void 0 : element.getBoundingClientRect();
+        return (_a = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _a !== void 0 ? _a : 0;
+    };
+    var getRawMaxHeight = function () {
+        if (environment_1.isServer) {
+            return 0;
+        }
+        return window.innerHeight;
+    };
+    var _b = tslib_1.__read((0, react_1.useState)(0), 2), minHeight = _b[0], setMinHeight = _b[1];
+    var getCustomMaxHeight = function () {
+        if ((0, isFunction_1.isFunction)(customMaxHeightProp)) {
+            return customMaxHeightProp({
+                maxHeight: getRawMaxHeight(),
+                minHeight: minHeight,
+            });
+        }
+        return customMaxHeightProp;
+    };
+    var checkHasCustomMaxHeight = function (customMaxHeight) { return (0, number_1.isNumber)(customMaxHeight); };
+    var calculateMaxHeight = function () {
+        var customMaxHeight = getCustomMaxHeight();
+        if (checkHasCustomMaxHeight(customMaxHeight)) {
+            return customMaxHeight;
+        }
+        return getRawMaxHeight();
+    };
+    var _c = tslib_1.__read((0, react_1.useState)(function () { return calculateMaxHeight(); }), 2), maxHeight = _c[0], setMaxHeightState = _c[1];
+    var calculateMinHeight = function (maxHeight) {
+        var contentHeight = getElementHeight(contentRef.current);
+        var notContentBlocksHeight = 0;
+        Object.values(blocksRefs.current).forEach(function (element) {
+            notContentBlocksHeight += getElementHeight(element);
+        });
+        return Math.max(0, Math.min(maxHeight - notContentBlocksHeight, contentHeight) +
+            notContentBlocksHeight);
+    };
+    var recalculateHeight = function () {
+        var newMaxHeight = calculateMaxHeight();
+        setMaxHeightState(newMaxHeight);
+        setMinHeight(calculateMinHeight(newMaxHeight));
+    };
+    (0, useMultipleResizeObserver_1.useMultipleResizeObserver)(tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(Object.values(blocksRefs.current)), false), [contentRef.current], false), function () {
+        recalculateHeight();
+    });
+    (0, react_1.useEffect)(function () {
+        setReadyContentHeight();
+    }, []);
+    (0, useEventListener_1.useEventListener)({
+        eventName: 'resize',
+        handler: function () {
+            recalculateHeight();
+        },
+    });
+    (0, react_1.useEffect)(function () {
+        recalculateHeight();
+        setReadyMaxHeight();
+    }, [getCustomMaxHeight()]);
+    return {
+        minHeight: minHeight,
+        maxHeight: maxHeight,
+        recalculateHeight: recalculateHeight,
+    };
+};
+exports.useBottomSheetBaseHeight = useBottomSheetBaseHeight;

package/__inner__/cjs/components/BottomSheetBase/hooks/useBottomSheetBaseReady/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useBottomSheetBaseReady';
+export * from './types';

package/__inner__/cjs/components/BottomSheetBase/hooks/useBottomSheetBaseReady/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./useBottomSheetBaseReady"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/components/BottomSheetBase/hooks/useBottomSheetBaseReady/types.d.ts

@@ -0,0 +1 @@
+export type BottomSheetBaseRegisterReady = (key: string) => () => void;

package/__inner__/cjs/components/BottomSheetBase/hooks/useBottomSheetBaseReady/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/BottomSheetBase/hooks/useBottomSheetBaseReady/useBottomSheetBaseReady.d.ts

@@ -0,0 +1,5 @@
+import type { BottomSheetBaseRegisterReady } from '../../hooks';
+export declare const useBottomSheetBaseReady: () => {
+    isReady: boolean;
+    registerReady: BottomSheetBaseRegisterReady;
+};

package/__inner__/cjs/components/BottomSheetBase/hooks/useBottomSheetBaseReady/useBottomSheetBaseReady.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBottomSheetBaseReady = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var useStoredValue_1 = require("../../../../hooks/useStoredValue");
+var useBottomSheetBaseReady = function () {
+    var _a = tslib_1.__read((0, react_1.useState)(false), 2), isReady = _a[0], setReady = _a[1];
+    var isReadyMap = (0, useStoredValue_1.useStoredValue)({});
+    var setIsReadyMap = function (map) {
+        isReadyMap.current = map;
+        var states = Object.values(isReadyMap.current);
+        if (states.length === 0) {
+            return;
+        }
+        var isReady = states.every(function (state) { return !!state; });
+        if (isReady) {
+            setReady(true);
+        }
+    };
+    var registerReady = (0, react_1.useCallback)(function (key) {
+        var _a;
+        setIsReadyMap(tslib_1.__assign(tslib_1.__assign({}, isReadyMap.current), (_a = {}, _a[key] = false, _a)));
+        return function () {
+            var _a;
+            if (isReadyMap.current[key]) {
+                return;
+            }
+            setIsReadyMap(tslib_1.__assign(tslib_1.__assign({}, isReadyMap.current), (_a = {}, _a[key] = true, _a)));
+        };
+    }, []);
+    return { isReady: isReady, registerReady: registerReady };
+};
+exports.useBottomSheetBaseReady = useBottomSheetBaseReady;

package/__inner__/cjs/components/BottomSheetBase/hooks/useBottomSheetBaseSnaps/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useBottomSheetBaseSnaps';
+export * from './types';

package/__inner__/cjs/components/BottomSheetBase/hooks/useBottomSheetBaseSnaps/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./useBottomSheetBaseSnaps"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/components/BottomSheetBase/hooks/useBottomSheetBaseSnaps/types.d.ts

@@ -0,0 +1,14 @@
+import type { StoredValue } from '../../../../hooks/useStoredValue';
+import type { AnimatePropertyOptions } from '../../../../utils/animateProperty';
+export type BottomSheetBaseFindClosestSnap = (point: number) => number;
+export type BottomSheetBaseSnapsControlToClosed = (isAnimated?: boolean) => void;
+export type BottomSheetBaseSnapsControlToDefault = (isAnimated?: boolean) => void;
+export type BottomSheetBaseSnapsControlTo = (snap: number) => void;
+export type BottomSheetBaseSnapsControlToAnimated = (newPoint: number, options?: AnimatePropertyOptions) => void;
+export type BottomSheetBaseSnapsControl = {
+    point: StoredValue<number>;
+    to: BottomSheetBaseSnapsControlTo;
+    toAnimated: BottomSheetBaseSnapsControlToAnimated;
+    toClosed: BottomSheetBaseSnapsControlToClosed;
+    toDefault: BottomSheetBaseSnapsControlToDefault;
+};

package/__inner__/cjs/components/BottomSheetBase/hooks/useBottomSheetBaseSnaps/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/BottomSheetBase/hooks/useBottomSheetBaseSnaps/useBottomSheetBaseSnaps.d.ts

@@ -0,0 +1,14 @@
+import type { RefObject } from 'react';
+import type { StoredValue } from '../../../../hooks/useStoredValue';
+import type { BottomSheetBaseRootRef, BottomSheetBaseSnap } from '../../entities';
+import type { BottomSheetBaseFindClosestSnap, BottomSheetBaseSnapsControl } from '../../hooks';
+export declare const useBottomSheetBaseSnaps: ({ minSnap, maxSnap, defaultSnap, rootRef, onAnimationStart, onAnimationFinish, isReady, findClosestSnap, }: {
+    minSnap: BottomSheetBaseSnap;
+    maxSnap: BottomSheetBaseSnap;
+    defaultSnap: BottomSheetBaseSnap;
+    rootRef: RefObject<BottomSheetBaseRootRef>;
+    onAnimationStart?: () => void;
+    onAnimationFinish?: () => void;
+    isReady: boolean;
+    findClosestSnap: StoredValue<BottomSheetBaseFindClosestSnap>;
+}) => BottomSheetBaseSnapsControl;

package/__inner__/cjs/components/BottomSheetBase/hooks/useBottomSheetBaseSnaps/useBottomSheetBaseSnaps.js

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBottomSheetBaseSnaps = void 0;
+var react_1 = require("react");
+var useEventListener_1 = require("../../../../hooks/useEventListener");
+var useStoredValue_1 = require("../../../../hooks/useStoredValue");
+var animateProperty_1 = require("../../../../utils/animateProperty");
+var math_1 = require("../../../../utils/math");
+var constants_1 = require("../../constants");
+var hooks_1 = require("../../hooks");
+var useBottomSheetBaseSnaps = function (_a) {
+    var minSnap = _a.minSnap, maxSnap = _a.maxSnap, defaultSnap = _a.defaultSnap, rootRef = _a.rootRef, onAnimationStart = _a.onAnimationStart, onAnimationFinish = _a.onAnimationFinish, isReady = _a.isReady, findClosestSnap = _a.findClosestSnap;
+    var y = (0, hooks_1.useBottomSheetBaseCSSValue)({
+        defaultValue: -defaultSnap,
+        variableName: constants_1.BOTTOM_SHEET_BASE_CSS_VARIABLE.Y,
+        rootRef: rootRef,
+        formatValue: function (value) { return "".concat(value, "px"); },
+    });
+    var height = (0, hooks_1.useBottomSheetBaseCSSValue)({
+        defaultValue: defaultSnap,
+        variableName: constants_1.BOTTOM_SHEET_BASE_CSS_VARIABLE.HEIGHT,
+        rootRef: rootRef,
+        formatValue: function (value) { return "".concat(value, "px"); },
+    });
+    var openPercent = (0, hooks_1.useBottomSheetBaseCSSValue)({
+        defaultValue: 0,
+        variableName: constants_1.BOTTOM_SHEET_BASE_CSS_VARIABLE.OPEN_PERCENT,
+        rootRef: rootRef,
+    });
+    var point = (0, useStoredValue_1.useStoredValue)(function () { return height.value.current + y.value.current; });
+    var setSnapPoint = function (newPoint) {
+        if (newPoint === point.current) {
+            return;
+        }
+        point.current = newPoint;
+        height.setValue((0, math_1.clamp)(newPoint, minSnap, maxSnap));
+        y.setValue(newPoint - height.value.current);
+        var newOpenPercent = (function () {
+            if (newPoint === 0 && minSnap === 0) {
+                return 0;
+            }
+            return (0, math_1.clamp)((newPoint / minSnap) * 100, 0, 100);
+        })();
+        openPercent.setValue(newOpenPercent);
+    };
+    var snapTo = function (newPoint) {
+        setSnapPoint(newPoint);
+    };
+    var snapToAnimated = function (newPoint, options) {
+        onAnimationStart === null || onAnimationStart === void 0 ? void 0 : onAnimationStart();
+        (0, animateProperty_1.animateNumberValue)(function (value) {
+            snapTo(value);
+        }, point.current, newPoint, {
+            onFinish: function () {
+                var _a;
+                (_a = options === null || options === void 0 ? void 0 : options.onFinish) === null || _a === void 0 ? void 0 : _a.call(options);
+                onAnimationFinish === null || onAnimationFinish === void 0 ? void 0 : onAnimationFinish();
+            },
+        });
+    };
+    var snapToClosed = function (isAnimated) {
+        if (isAnimated) {
+            snapToAnimated(0);
+        }
+        else {
+            snapTo(0);
+        }
+    };
+    var snapToDefault = function (isAnimated) {
+        if (isAnimated) {
+            snapToAnimated(defaultSnap);
+        }
+        else {
+            snapTo(defaultSnap);
+        }
+    };
+    var previousReady = (0, useStoredValue_1.useStoredValue)(isReady);
+    // Перерасчет текущей точки при изменении minSnap, maxSnap
+    (0, react_1.useEffect)(function () {
+        if (!isReady) {
+            return;
+        }
+        if (previousReady.current) {
+            snapTo(findClosestSnap.current(point.current));
+        }
+        previousReady.current = isReady;
+    }, [minSnap, maxSnap, isReady]);
+    (0, useEventListener_1.useEventListener)({
+        eventName: 'resize',
+        handler: function () {
+            var closestSnap = findClosestSnap.current(point.current);
+            snapTo(closestSnap);
+        },
+    });
+    return {
+        to: snapTo,
+        point: point,
+        toAnimated: snapToAnimated,
+        toClosed: snapToClosed,
+        toDefault: snapToDefault,
+    };
+};
+exports.useBottomSheetBaseSnaps = useBottomSheetBaseSnaps;

package/__inner__/cjs/components/BottomSheetBase/hooks/useBottomSheetBaseVisibility.d.ts

@@ -0,0 +1,4 @@
+export declare const useBottomSheetBaseVisibility: ({ isAnimating, isOpen, }: {
+    isAnimating: boolean;
+    isOpen: boolean;
+}) => boolean;

package/__inner__/cjs/components/BottomSheetBase/hooks/useBottomSheetBaseVisibility.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBottomSheetBaseVisibility = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var useStoredValue_1 = require("../../../hooks/useStoredValue");
+var useBottomSheetBaseVisibility = function (_a) {
+    var isAnimating = _a.isAnimating, isOpen = _a.isOpen;
+    var _b = tslib_1.__read((0, react_1.useState)(isOpen), 2), isVisible = _b[0], setIsVisible = _b[1];
+    var isFirstRender = (0, useStoredValue_1.useStoredValue)(true);
+    var isClosingStarted = (0, useStoredValue_1.useStoredValue)(false);
+    (0, react_1.useEffect)(function () {
+        if (isOpen) {
+            isClosingStarted.current = false;
+            setIsVisible(true);
+            return;
+        }
+        if (isFirstRender.current) {
+            return;
+        }
+        isClosingStarted.current = true;
+    }, [isOpen]);
+    (0, react_1.useEffect)(function () {
+        if (!isClosingStarted.current || isAnimating) {
+            return;
+        }
+        isClosingStarted.current = false;
+        setIsVisible(false);
+    }, [isAnimating]);
+    (0, react_1.useEffect)(function () {
+        isFirstRender.current = false;
+    }, []);
+    return isVisible;
+};
+exports.useBottomSheetBaseVisibility = useBottomSheetBaseVisibility;

package/__inner__/cjs/components/BottomSheetBase/index.d.ts

@@ -0,0 +1,5 @@
+export * from './context';
+export * from './entities';
+export * from './modules';
+export * from './BottomSheetBase';
+export * from './types';

package/__inner__/cjs/components/BottomSheetBase/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./context"), exports);
+tslib_1.__exportStar(require("./entities"), exports);
+tslib_1.__exportStar(require("./modules"), exports);
+tslib_1.__exportStar(require("./BottomSheetBase"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/components/BottomSheetBase/modules/BottomSheetBaseBackdrop/BottomSheetBaseBackdrop.css

@@ -0,0 +1,11 @@
+.BottomSheetBaseBackdrop {
+  opacity: calc(var(--bottom-sheet-base-open-percent, 0) / 100);
+}
+
+  .BottomSheetBaseBackdrop_draggable {
+    touch-action: none;
+    cursor: pointer;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+  }

package/__inner__/cjs/components/BottomSheetBase/modules/BottomSheetBaseBackdrop/BottomSheetBaseBackdrop.d.ts

@@ -0,0 +1,4 @@
+import './BottomSheetBaseBackdrop.css';
+import type { BottomSheetBaseBackdropBaseProps } from './types';
+export declare const cnBottomSheetBaseBackdrop: import("@bem-react/classname").ClassNameFormatter;
+export declare const BottomSheetBaseBackdrop: import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<BottomSheetBaseBackdropBaseProps, "div">;

package/__inner__/cjs/components/BottomSheetBase/modules/BottomSheetBaseBackdrop/BottomSheetBaseBackdrop.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BottomSheetBaseBackdrop = exports.cnBottomSheetBaseBackdrop = void 0;
+var tslib_1 = require("tslib");
+require("./BottomSheetBaseBackdrop.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var useMultiRef_1 = require("../../../../hooks/useMultiRef");
+var classname_1 = require("../../../../utils/classname");
+var polymorphicComponentWithRef_1 = require("../../../../utils/polymorphicComponentWithRef");
+var Backdrop_1 = require("../../../Backdrop");
+var hooks_1 = require("../../hooks");
+var constants_1 = require("./constants");
+exports.cnBottomSheetBaseBackdrop = (0, classname_1.cn)('BottomSheetBaseBackdrop');
+exports.BottomSheetBaseBackdrop = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (_a, ref) {
+    var as = _a.as, _b = _a.expandOnDrag, expandOnDrag = _b === void 0 ? constants_1.BOTTOM_SHEET_BASE_BACKDROP_DEFAULT_EXPAND_ON_DRAG : _b, className = _a.className, other = tslib_1.__rest(_a, ["as", "expandOnDrag", "className"]);
+    var internalRef = (0, react_1.useRef)(null);
+    (0, hooks_1.useBottomSheetBaseDrag)(internalRef, {
+        isCloseOnTap: true,
+        isDraggable: expandOnDrag,
+    });
+    return (react_1.default.createElement(Backdrop_1.Backdrop, tslib_1.__assign({}, other, { ref: (0, useMultiRef_1.useMultiRef)([ref, internalRef]), as: as, transitionProps: {
+            classNames: (0, exports.cnBottomSheetBaseBackdrop)({ animation: true }),
+        }, open: true, className: (0, exports.cnBottomSheetBaseBackdrop)({
+            draggable: expandOnDrag,
+        }, [className]) })));
+});

package/__inner__/cjs/components/BottomSheetBase/modules/BottomSheetBaseBackdrop/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const BOTTOM_SHEET_BASE_BACKDROP_DEFAULT_TAG = "div";
+export declare const BOTTOM_SHEET_BASE_BACKDROP_DEFAULT_EXPAND_ON_DRAG = true;

package/__inner__/cjs/components/BottomSheetBase/modules/BottomSheetBaseBackdrop/constants.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BOTTOM_SHEET_BASE_BACKDROP_DEFAULT_EXPAND_ON_DRAG = exports.BOTTOM_SHEET_BASE_BACKDROP_DEFAULT_TAG = void 0;
+exports.BOTTOM_SHEET_BASE_BACKDROP_DEFAULT_TAG = 'div';
+exports.BOTTOM_SHEET_BASE_BACKDROP_DEFAULT_EXPAND_ON_DRAG = true;

package/__inner__/cjs/components/BottomSheetBase/modules/BottomSheetBaseBackdrop/index.d.ts

@@ -0,0 +1,2 @@
+export * from './BottomSheetBaseBackdrop';
+export * from './types';

package/__inner__/cjs/components/BottomSheetBase/modules/BottomSheetBaseBackdrop/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./BottomSheetBaseBackdrop"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/components/BottomSheetBase/modules/BottomSheetBaseBackdrop/types.d.ts

@@ -0,0 +1,9 @@
+import type { ElementType } from 'react';
+import type { ExtendableProps } from '../../../../types/ExtendableProps';
+import type { PolymorphicComponentPropsWithRef } from '../../../../utils/polymorphicComponentWithRef';
+import type { BackdropBaseProps } from '../../../Backdrop';
+import type { BOTTOM_SHEET_BASE_BACKDROP_DEFAULT_TAG } from './constants';
+export type BottomSheetBaseBackdropBaseProps = ExtendableProps<{
+    expandOnDrag?: boolean;
+}, Omit<BackdropBaseProps, 'transitionProps' | 'open'>>;
+export type BottomSheetBaseBackdropProps<As extends ElementType = typeof BOTTOM_SHEET_BASE_BACKDROP_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<BottomSheetBaseBackdropBaseProps, As>;

package/__inner__/cjs/components/BottomSheetBase/modules/BottomSheetBaseBackdrop/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/BottomSheetBase/modules/BottomSheetBaseBlock/BottomSheetBaseBlock.css

@@ -0,0 +1,11 @@
+.BottomSheetBaseBlock {
+  flex-shrink: 0;
+}
+
+  .BottomSheetBaseBlock_draggable {
+    touch-action: none;
+    cursor: ns-resize;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+  }

package/__inner__/cjs/components/BottomSheetBase/modules/BottomSheetBaseBlock/BottomSheetBaseBlock.d.ts

@@ -0,0 +1,6 @@
+import './BottomSheetBaseBlock.css';
+import React from 'react';
+export declare const cnBottomSheetBaseBlock: import("@bem-react/classname").ClassNameFormatter;
+export declare const BottomSheetBaseBlock: React.ForwardRefExoticComponent<{
+    expandOnDrag?: boolean;
+} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "expandOnDrag"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/cjs/components/BottomSheetBase/modules/BottomSheetBaseBlock/BottomSheetBaseBlock.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BottomSheetBaseBlock = exports.cnBottomSheetBaseBlock = void 0;
+var tslib_1 = require("tslib");
+require("./BottomSheetBaseBlock.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var useUniqueId_1 = require("../../../../hooks/useUniqueId");
+var classname_1 = require("../../../../utils/classname");
+var setRef_1 = require("../../../../utils/setRef");
+var context_1 = require("../../context");
+var hooks_1 = require("../../hooks");
+var constants_1 = require("./constants");
+exports.cnBottomSheetBaseBlock = (0, classname_1.cn)('BottomSheetBaseBlock');
+exports.BottomSheetBaseBlock = (0, react_1.forwardRef)(function (_a, ref) {
+    var children = _a.children, className = _a.className, _b = _a.expandOnDrag, expandOnDrag = _b === void 0 ? constants_1.BOTTOM_SHEET_BASE_BLOCK_DEFAULT_EXPAND_ON_DRAG : _b, other = tslib_1.__rest(_a, ["children", "className", "expandOnDrag"]);
+    var internalRef = (0, react_1.useRef)(null);
+    var addBlockRef = (0, context_1.useBottomSheetBaseContext)().addBlockRef;
+    var blockId = (0, useUniqueId_1.useUniqueId)('BaseBottomSheetBlock-');
+    (0, hooks_1.useBottomSheetBaseDrag)(internalRef, {
+        isDraggable: expandOnDrag,
+    });
+    return (react_1.default.createElement("div", tslib_1.__assign({}, other, { ref: function (instance) {
+            (0, setRef_1.setRef)(ref, instance);
+            (0, setRef_1.setRef)(internalRef, instance);
+            addBlockRef(blockId, instance);
+        }, className: (0, exports.cnBottomSheetBaseBlock)({
+            draggable: expandOnDrag,
+        }, [className]) }), children));
+});
+exports.BottomSheetBaseBlock.displayName = 'BottomSheetBaseBlock';

package/__inner__/cjs/components/BottomSheetBase/modules/BottomSheetBaseBlock/constants.d.ts

@@ -0,0 +1 @@
+export declare const BOTTOM_SHEET_BASE_BLOCK_DEFAULT_EXPAND_ON_DRAG = false;

package/__inner__/cjs/components/BottomSheetBase/modules/BottomSheetBaseBlock/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BOTTOM_SHEET_BASE_BLOCK_DEFAULT_EXPAND_ON_DRAG = void 0;
+exports.BOTTOM_SHEET_BASE_BLOCK_DEFAULT_EXPAND_ON_DRAG = false;

package/__inner__/cjs/components/BottomSheetBase/modules/BottomSheetBaseBlock/index.d.ts

@@ -0,0 +1,2 @@
+export * from './BottomSheetBaseBlock';
+export * from './types';

package/__inner__/cjs/components/BottomSheetBase/modules/BottomSheetBaseBlock/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./BottomSheetBaseBlock"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/components/BottomSheetBase/modules/BottomSheetBaseBlock/types.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentPropsWithoutRef } from 'react';
+import type { ExtendableProps } from '../../../../types/ExtendableProps';
+export type BottomSheetBaseBlockProps = ExtendableProps<{
+    expandOnDrag?: boolean;
+}, ComponentPropsWithoutRef<'div'>>;

package/__inner__/cjs/components/BottomSheetBase/modules/BottomSheetBaseBlock/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/BottomSheetBase/modules/BottomSheetBaseContent/BottomSheetBaseContent.css

@@ -0,0 +1,5 @@
+.BottomSheetBaseContent-Wrapper {
+  flex-shrink: 1;
+  flex-grow: 1;
+  overflow: auto;
+}