@onepercentio/one-ui 0.6.0 → 0.6.3

package/dist/components/AdaptiveButton/AdaptiveButton.js

@@ -1,93 +1,93 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const Button_1 = __importDefault(require("../Button"));
-const Transition_1 = require("../Transition");
-const UncontrolledTransition_1 = __importDefault(require("../UncontrolledTransition"));
-const AdaptiveButton_module_scss_1 = __importDefault(require("./AdaptiveButton.module.scss"));
-/**
- * A button that adapts it's width according to the content size
- **/
-function AdaptiveButton(_a) {
-    var { children, className = "" } = _a, buttonProps = __rest(_a, ["children", "className"]);
-    const uncontrolledRef = (0, react_1.useRef)(null);
-    const buttonRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        const sectionDiv = uncontrolledRef.current.sectionRef.current;
-        if (sectionDiv)
-            sectionDiv.style.width = `${sectionDiv.clientWidth}px`;
-        setTimeout(() => {
-            if (uncontrolledRef.current) {
-                const sectionDiv = uncontrolledRef.current.sectionRef.current;
-                if (sectionDiv) {
-                    const lastChild = sectionDiv.lastChild;
-                    if (lastChild) {
-                        const contentWidth = lastChild.clientWidth;
-                        const targetWidth = `${contentWidth}px`;
-                        sectionDiv.style.width = targetWidth;
-                        function transEnd() {
-                            setTimeout(() => {
-                                if ((sectionDiv === null || sectionDiv === void 0 ? void 0 : sectionDiv.style.width) === `${contentWidth}px`)
-                                    sectionDiv.style.width = "";
-                            }, 100);
-                            if (sectionDiv)
-                                sectionDiv.removeEventListener("transitionend", transEnd);
-                        }
-                        sectionDiv.addEventListener("transitionend", transEnd);
-                    }
-                }
-            }
-        }, 100);
-    }, [children.key]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Button_1.default, Object.assign({ className: `${AdaptiveButton_module_scss_1.default.resetButton} ${className}`, ref: buttonRef }, buttonProps),
-            react_1.default.createElement(UncontrolledTransition_1.default, { ref: uncontrolledRef, transitionType: Transition_1.TransitionAnimationTypes.CUSTOM, lockTransitionWidth: false, config: {
-                    backward: {
-                        elementExiting: AdaptiveButton_module_scss_1.default.fadeOutAbsolute,
-                        elementEntering: AdaptiveButton_module_scss_1.default.fadeInDelayed,
-                    },
-                    forward: {
-                        elementExiting: AdaptiveButton_module_scss_1.default.fadeOutAbsolute,
-                        elementEntering: AdaptiveButton_module_scss_1.default.fadeInDelayed,
-                    },
-                }, className: AdaptiveButton_module_scss_1.default.resetSection }, children))));
-}
-exports.default = AdaptiveButton;
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const Button_1 = __importDefault(require("../Button"));
+const Transition_1 = require("../Transition");
+const UncontrolledTransition_1 = __importDefault(require("../UncontrolledTransition"));
+const AdaptiveButton_module_scss_1 = __importDefault(require("./AdaptiveButton.module.scss"));
+/**
+ * A button that adapts it's width according to the content size
+ **/
+function AdaptiveButton(_a) {
+    var { children, className = "" } = _a, buttonProps = __rest(_a, ["children", "className"]);
+    const uncontrolledRef = (0, react_1.useRef)(null);
+    const buttonRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const sectionDiv = uncontrolledRef.current.sectionRef.current;
+        if (sectionDiv)
+            sectionDiv.style.width = `${sectionDiv.clientWidth}px`;
+        setTimeout(() => {
+            if (uncontrolledRef.current) {
+                const sectionDiv = uncontrolledRef.current.sectionRef.current;
+                if (sectionDiv) {
+                    const lastChild = sectionDiv.lastChild;
+                    if (lastChild) {
+                        const contentWidth = lastChild.clientWidth;
+                        const targetWidth = `${contentWidth}px`;
+                        sectionDiv.style.width = targetWidth;
+                        function transEnd() {
+                            setTimeout(() => {
+                                if ((sectionDiv === null || sectionDiv === void 0 ? void 0 : sectionDiv.style.width) === `${contentWidth}px`)
+                                    sectionDiv.style.width = "";
+                            }, 100);
+                            if (sectionDiv)
+                                sectionDiv.removeEventListener("transitionend", transEnd);
+                        }
+                        sectionDiv.addEventListener("transitionend", transEnd);
+                    }
+                }
+            }
+        }, 100);
+    }, [children.key]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Button_1.default, Object.assign({ className: `${AdaptiveButton_module_scss_1.default.resetButton} ${className}`, ref: buttonRef }, buttonProps),
+            react_1.default.createElement(UncontrolledTransition_1.default, { ref: uncontrolledRef, transitionType: Transition_1.TransitionAnimationTypes.CUSTOM, lockTransitionWidth: false, config: {
+                    backward: {
+                        elementExiting: AdaptiveButton_module_scss_1.default.fadeOutAbsolute,
+                        elementEntering: AdaptiveButton_module_scss_1.default.fadeInDelayed,
+                    },
+                    forward: {
+                        elementExiting: AdaptiveButton_module_scss_1.default.fadeOutAbsolute,
+                        elementEntering: AdaptiveButton_module_scss_1.default.fadeInDelayed,
+                    },
+                }, className: AdaptiveButton_module_scss_1.default.resetSection }, children))));
+}
+exports.default = AdaptiveButton;
 //# sourceMappingURL=AdaptiveButton.js.map

package/dist/components/AdaptiveButton/AdaptiveButton.stories.d.ts

@@ -1,18 +1,18 @@
-import React from "react";
-import AdaptiveButton from "./AdaptiveButton";
-declare const _default: {
-    component: typeof AdaptiveButton;
-    title: string;
-};
-export default _default;
-export declare const InitialImplementation: {
-    (args: any): JSX.Element;
-    args: Partial<{
-        children: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-    } & React.ButtonHTMLAttributes<HTMLButtonElement> & {
-        variant?: "transparent" | "filled" | "outline" | undefined;
-    } & {
-        children?: React.ReactNode;
-    } & React.RefAttributes<HTMLButtonElement>>;
-};
-export declare const TargetUsage: () => JSX.Element;
+import React from "react";
+import AdaptiveButton from "./AdaptiveButton";
+declare const _default: {
+    component: typeof AdaptiveButton;
+    title: string;
+};
+export default _default;
+export declare const InitialImplementation: {
+    (args: any): JSX.Element;
+    args: Partial<{
+        children: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    } & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+        variant?: "transparent" | "filled" | "outline" | undefined;
+    } & {
+        children?: React.ReactNode;
+    } & React.RefAttributes<HTMLButtonElement>>;
+};
+export declare const TargetUsage: () => JSX.Element;

package/dist/components/AdaptiveButton/AdaptiveButton.stories.js

@@ -1,82 +1,82 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TargetUsage = exports.InitialImplementation = void 0;
-const react_1 = __importStar(require("react"));
-const Loader_1 = __importDefault(require("../Loader"));
-const MutableHamburgerButton_1 = __importDefault(require("../MutableHamburgerButton"));
-const Tabs_1 = __importDefault(require("../Tabs"));
-const Text_1 = __importDefault(require("../Text"));
-const AdaptiveButton_1 = __importDefault(require("./AdaptiveButton"));
-exports.default = {
-    component: AdaptiveButton_1.default,
-    title: "Adaptive Button",
-};
-const InitialImplementation = (args) => (react_1.default.createElement(AdaptiveButton_1.default, Object.assign({}, args)));
-exports.InitialImplementation = InitialImplementation;
-var Example;
-(function (Example) {
-    Example[Example["Loading"] = 0] = "Loading";
-    Example[Example["Error"] = 1] = "Error";
-    Example[Example["Content"] = 2] = "Content";
-    Example[Example["Success"] = 3] = "Success";
-})(Example || (Example = {}));
-const TargetUsage = () => {
-    const [s, ss] = (0, react_1.useState)(Example.Error);
-    const child = (0, react_1.useMemo)(() => {
-        switch (s) {
-            case Example.Content:
-                return react_1.default.createElement(react_1.default.Fragment, { key: s }, "Example button");
-            case Example.Error:
-                return react_1.default.createElement(MutableHamburgerButton_1.default, { key: s, size: 24, state: "closed" });
-            case Example.Success:
-                return react_1.default.createElement(MutableHamburgerButton_1.default, { key: s, size: 24, state: "arrow-up" });
-            case Example.Loading:
-                return react_1.default.createElement(Loader_1.default, { key: s });
-        }
-    }, [s]);
-    (0, react_1.useEffect)(() => {
-        setInterval(() => {
-            //   ss((pv) => (pv === 3 ? 0 : pv + 1));
-        }, 10000);
-    }, []);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Tabs_1.default, { options: Object.keys(Example)
-                .map((k) => ({
-                id: Example[k],
-                label: k,
-            }))
-                .filter((e) => parseInt(e.id, 10) >= 0), onSelect: ss, selected: s }),
-        react_1.default.createElement(AdaptiveButton_1.default, { variant: "outline" }, child)));
-};
-exports.TargetUsage = TargetUsage;
-exports.InitialImplementation.args = {
-    variant: "filled",
-    children: (react_1.default.createElement(Text_1.default, { key: "example", type: "highlight" }, "Some content to the button")),
-};
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TargetUsage = exports.InitialImplementation = void 0;
+const react_1 = __importStar(require("react"));
+const Loader_1 = __importDefault(require("../Loader"));
+const MutableHamburgerButton_1 = __importDefault(require("../MutableHamburgerButton"));
+const Tabs_1 = __importDefault(require("../Tabs"));
+const Text_1 = __importDefault(require("../Text"));
+const AdaptiveButton_1 = __importDefault(require("./AdaptiveButton"));
+exports.default = {
+    component: AdaptiveButton_1.default,
+    title: "Adaptive Button",
+};
+const InitialImplementation = (args) => (react_1.default.createElement(AdaptiveButton_1.default, Object.assign({}, args)));
+exports.InitialImplementation = InitialImplementation;
+var Example;
+(function (Example) {
+    Example[Example["Loading"] = 0] = "Loading";
+    Example[Example["Error"] = 1] = "Error";
+    Example[Example["Content"] = 2] = "Content";
+    Example[Example["Success"] = 3] = "Success";
+})(Example || (Example = {}));
+const TargetUsage = () => {
+    const [s, ss] = (0, react_1.useState)(Example.Error);
+    const child = (0, react_1.useMemo)(() => {
+        switch (s) {
+            case Example.Content:
+                return react_1.default.createElement(react_1.default.Fragment, { key: s }, "Example button");
+            case Example.Error:
+                return react_1.default.createElement(MutableHamburgerButton_1.default, { key: s, size: 24, state: "closed" });
+            case Example.Success:
+                return react_1.default.createElement(MutableHamburgerButton_1.default, { key: s, size: 24, state: "arrow-up" });
+            case Example.Loading:
+                return react_1.default.createElement(Loader_1.default, { key: s });
+        }
+    }, [s]);
+    (0, react_1.useEffect)(() => {
+        setInterval(() => {
+            //   ss((pv) => (pv === 3 ? 0 : pv + 1));
+        }, 10000);
+    }, []);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Tabs_1.default, { options: Object.keys(Example)
+                .map((k) => ({
+                id: Example[k],
+                label: k,
+            }))
+                .filter((e) => parseInt(e.id, 10) >= 0), onSelect: ss, selected: s }),
+        react_1.default.createElement(AdaptiveButton_1.default, { variant: "outline" }, child)));
+};
+exports.TargetUsage = TargetUsage;
+exports.InitialImplementation.args = {
+    variant: "filled",
+    children: (react_1.default.createElement(Text_1.default, { key: "example", type: "highlight" }, "Some content to the button")),
+};
 //# sourceMappingURL=AdaptiveButton.stories.js.map

package/dist/components/AdaptiveButton/index.d.ts

@@ -1 +1 @@
-export { default } from './AdaptiveButton';
+export { default } from './AdaptiveButton';

package/dist/components/AdaptiveButton/index.js

@@ -1,9 +1,9 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var AdaptiveButton_1 = require("./AdaptiveButton");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(AdaptiveButton_1).default; } });
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var AdaptiveButton_1 = require("./AdaptiveButton");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(AdaptiveButton_1).default; } });
 //# sourceMappingURL=index.js.map

package/dist/components/AdaptiveDialog/AdaptiveDialog.d.ts

@@ -1,9 +1,9 @@
-import { PropsWithChildren } from "react";
-/**
- * This component implements a generic drawer that displays it as a drawer on mobile and as a modal on desktop
- **/
-export default function AdaptiveDialog({ onClose, open, className, children, }: PropsWithChildren<{
-    className?: string;
-    open: boolean;
-    onClose?: () => void;
-}>): JSX.Element | null;
+import { PropsWithChildren } from "react";
+/**
+ * This component implements a generic drawer that displays it as a drawer on mobile and as a modal on desktop
+ **/
+export default function AdaptiveDialog({ onClose, open, className, children, }: PropsWithChildren<{
+    className?: string;
+    open: boolean;
+    onClose?: () => void;
+}>): JSX.Element | null;

package/dist/components/AdaptiveDialog/AdaptiveDialog.js

@@ -1,60 +1,60 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const AdaptiveDialog_module_scss_1 = __importDefault(require("./AdaptiveDialog.module.scss"));
-const MutableHamburgerButton_1 = __importDefault(require("../MutableHamburgerButton"));
-const ScrollAndFocusLock_1 = __importDefault(require("../utilitary/ScrollAndFocusLock"));
-/**
- * This component implements a generic drawer that displays it as a drawer on mobile and as a modal on desktop
- **/
-function AdaptiveDialog({ onClose, open = false, className = "", children, }) {
-    const rootDivRef = (0, react_1.useRef)(null);
-    const [isVisible, setIsVisible] = (0, react_1.useState)(open);
-    const [expanded, setExpanded] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        if (open) {
-            setIsVisible(true);
-            const toggleVisbility = (e) => {
-                if (e.animationName === AdaptiveDialog_module_scss_1.default.backdropDismiss) {
-                    setIsVisible(false);
-                    e.target.removeEventListener("animationend", toggleVisbility);
-                }
-            };
-            rootDivRef.current.addEventListener("animationend", toggleVisbility);
-        }
-    }, [open]);
-    return isVisible || open ? (react_1.default.createElement("div", { ref: rootDivRef, className: `${AdaptiveDialog_module_scss_1.default.backdrop} ${open ? AdaptiveDialog_module_scss_1.default.open : AdaptiveDialog_module_scss_1.default.close} ${expanded ? AdaptiveDialog_module_scss_1.default.expanded : ""}` },
-        react_1.default.createElement("div", { className: `${AdaptiveDialog_module_scss_1.default.container} ${className}` },
-            react_1.default.createElement(ScrollAndFocusLock_1.default, { open: open },
-                onClose && (react_1.default.createElement(MutableHamburgerButton_1.default, { className: AdaptiveDialog_module_scss_1.default.closeBtn, onClick: onClose, state: "closed", size: 24 })),
-                react_1.default.createElement("div", { className: AdaptiveDialog_module_scss_1.default.indicator, onClick: () => setExpanded((p) => !p) }),
-                children)))) : null;
-}
-exports.default = AdaptiveDialog;
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const AdaptiveDialog_module_scss_1 = __importDefault(require("./AdaptiveDialog.module.scss"));
+const MutableHamburgerButton_1 = __importDefault(require("../MutableHamburgerButton"));
+const ScrollAndFocusLock_1 = __importDefault(require("../utilitary/ScrollAndFocusLock"));
+/**
+ * This component implements a generic drawer that displays it as a drawer on mobile and as a modal on desktop
+ **/
+function AdaptiveDialog({ onClose, open = false, className = "", children, }) {
+    const rootDivRef = (0, react_1.useRef)(null);
+    const [isVisible, setIsVisible] = (0, react_1.useState)(open);
+    const [expanded, setExpanded] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (open) {
+            setIsVisible(true);
+            const toggleVisbility = (e) => {
+                if (e.animationName === AdaptiveDialog_module_scss_1.default.backdropDismiss) {
+                    setIsVisible(false);
+                    e.target.removeEventListener("animationend", toggleVisbility);
+                }
+            };
+            rootDivRef.current.addEventListener("animationend", toggleVisbility);
+        }
+    }, [open]);
+    return isVisible || open ? (react_1.default.createElement("div", { ref: rootDivRef, className: `${AdaptiveDialog_module_scss_1.default.backdrop} ${open ? AdaptiveDialog_module_scss_1.default.open : AdaptiveDialog_module_scss_1.default.close} ${expanded ? AdaptiveDialog_module_scss_1.default.expanded : ""}` },
+        react_1.default.createElement("div", { className: `${AdaptiveDialog_module_scss_1.default.container} ${className}` },
+            react_1.default.createElement(ScrollAndFocusLock_1.default, { open: open },
+                onClose && (react_1.default.createElement(MutableHamburgerButton_1.default, { className: AdaptiveDialog_module_scss_1.default.closeBtn, onClick: onClose, state: "closed", size: 24 })),
+                react_1.default.createElement("div", { className: AdaptiveDialog_module_scss_1.default.indicator, onClick: () => setExpanded((p) => !p) }),
+                children)))) : null;
+}
+exports.default = AdaptiveDialog;
 //# sourceMappingURL=AdaptiveDialog.js.map

package/dist/components/AdaptiveDialog/AdaptiveDialog.stories.d.ts

@@ -1,19 +1,19 @@
-import React from "react";
-import AdaptiveDialog from "./AdaptiveDialog";
-declare const _default: {
-    component: typeof AdaptiveDialog;
-    title: string;
-};
-export default _default;
-export declare const InitialImplementation: {
-    (args: any): JSX.Element;
-    args: Partial<{
-        className?: string | undefined;
-        open: boolean;
-        onClose?: (() => void) | undefined;
-    } & {
-        children?: React.ReactNode;
-    }>;
-};
-export declare const Improvement_LockScrollWhenOpen: () => JSX.Element;
-export declare const Improvement_LockFocusInsideModal: () => JSX.Element;
+import React from "react";
+import AdaptiveDialog from "./AdaptiveDialog";
+declare const _default: {
+    component: typeof AdaptiveDialog;
+    title: string;
+};
+export default _default;
+export declare const InitialImplementation: {
+    (args: any): JSX.Element;
+    args: Partial<{
+        className?: string | undefined;
+        open: boolean;
+        onClose?: (() => void) | undefined;
+    } & {
+        children?: React.ReactNode;
+    }>;
+};
+export declare const Improvement_LockScrollWhenOpen: () => JSX.Element;
+export declare const Improvement_LockFocusInsideModal: () => JSX.Element;