@heymantle/litho 0.0.1

package/dist/cjs/components/Modal.js

@@ -0,0 +1,449 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get ModalContext () {
+        return ModalContext;
+    },
+    get default () {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _polarisicons = require("@shopify/polaris-icons");
+var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+var _reactdom = require("react-dom");
+var _tailwindvariants = require("tailwind-variants");
+var _AppProvider = require("../components/AppProvider");
+var _index = require("../index");
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _type_of(obj) {
+    "@swc/helpers - typeof";
+    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+var ModalContext = /*#__PURE__*/ (0, _react.createContext)(false);
+var containerStyles = (0, _tailwindvariants.tv)({
+    base: "Litho-ModalContainer fixed inset-0 block flex flex-col justify-end md:justify-center items-center pointer-events-none"
+});
+var styles = (0, _tailwindvariants.tv)({
+    base: "Litho-Modal relative bg-surface-highest shadow-modal dark:shadow-modal-dark w-full mx-auto pointer-events-auto flex flex-col overflow-hidden",
+    variants: {
+        size: {
+            default: "max-w-200 md:max-w-160 md:rounded-md max-h-[calc(100vh-40px)]",
+            large: "max-w-300 md:rounded-md max-h-[calc(100vh-40px)]",
+            full: "h-full max-w-full max-h-screen"
+        }
+    },
+    defaultVariants: {
+        size: "default"
+    }
+});
+var overlayStyles = (0, _tailwindvariants.tv)({
+    base: "Litho-ModalOverlay fixed inset-0 block bg-tint-10 dark:bg-tint-25"
+});
+var headerStyles = (0, _tailwindvariants.tv)({
+    base: "Litho-ModalHeader min-h-15 flex items-center py-2 pl-4 pr-3 flex-none",
+    variants: {
+        hasChildren: {
+            true: "border-b",
+            false: ""
+        }
+    },
+    defaultVariants: {
+        hasChildren: true
+    }
+});
+var sectionStyles = (0, _tailwindvariants.tv)({
+    base: "Litho-ModalSection border-b border-edge-default last:border-b-0",
+    variants: {
+        flush: {
+            true: "",
+            false: "p-4"
+        },
+        showHeader: {
+            true: "pt-2",
+            false: ""
+        }
+    },
+    defaultVariants: {
+        flush: false
+    }
+});
+/**
+ * Modal component for displaying a customizable dialog.
+ *
+ * @param {Object} props - The component props.
+ * @param {React.ReactNode} [props.children] - The content of the modal.
+ * @param {string} [props.title] - The title of the modal.
+ * @param {string} [props.subtitle] - The subtitle of the modal.
+ * @param {boolean} [props.open=false] - Whether the modal is open.
+ * @param {Function} [props.onClose] - Callback function for closing the modal.
+ * @param {boolean} [props.sectioned=false] - Whether the modal content should be sectioned.
+ * @param {Object} [props.primaryAction] - The primary action for the modal.
+ * @param {string} [props.primaryAction.content] - Content of the primary action button.
+ * @param {Function} [props.primaryAction.onAction] - Callback for the primary action.
+ * @param {boolean} [props.primaryAction.loading=false] - Whether the primary action is loading.
+ * @param {boolean} [props.primaryAction.disabled=false] - Whether the primary action is disabled.
+ * @param {boolean} [props.primaryAction.destructive=false] - Whether the primary action is destructive.
+ * @param {Object} [props.secondaryAction] - The secondary action for the modal.
+ * @param {string} [props.secondaryAction.content] - Content of the secondary action button.
+ * @param {Function} [props.secondaryAction.onAction] - Callback for the secondary action.
+ * @param {boolean} [props.secondaryAction.disabled=false] - Whether the secondary action is disabled.
+ * @param {Object[]} [props.secondaryActions=[]] - Additional secondary actions.
+ * @param {Object} [props.destructiveAction] - A destructive action for the modal.
+ * @param {boolean} [props.loading=false] - Whether the modal is in a loading state.
+ * @param {string} [props.size="default"] - The size of the modal (default, large, or full).
+ * @param {React.ReactNode} [props.leftAccessory] - Left accessory content in the footer.
+ * @param {boolean} [props.hideCloseButton=false] - Whether to hide the close button.
+ * @param {number} [props.zIndexOverride=1000] - The z-index of the modal.
+ * @returns {React.ReactPortal|null} The rendered modal component or null if not open.
+ */ function Modal() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var children = props.children, title = props.title, subtitle = props.subtitle, open = props.open, onClose = props.onClose, sectioned = props.sectioned, primaryAction = props.primaryAction, secondaryAction = props.secondaryAction, _props_secondaryActions = props.secondaryActions, secondaryActions = _props_secondaryActions === void 0 ? [] : _props_secondaryActions, destructiveAction = props.destructiveAction, loading = props.loading, _props_size = props.size, size = _props_size === void 0 ? "default" : _props_size, leftAccessory = props.leftAccessory, _props_hideCloseButton = props.hideCloseButton, hideCloseButton = _props_hideCloseButton === void 0 ? false : _props_hideCloseButton, backAction = props.backAction, zIndexOverride = props.zIndexOverride;
+    var setModalIsOpen = (0, _react.useContext)(_AppProvider.FrameContext).setModalIsOpen;
+    var modalContentRef = (0, _react.useRef)(null);
+    var hasChildren = !!children;
+    var classes = styles({
+        sectioned: sectioned,
+        size: size
+    });
+    var containerClasses = containerStyles();
+    var headerClasses = headerStyles({
+        hasChildren: hasChildren
+    });
+    var overlayClasses = overlayStyles();
+    var sectionClasses = sectionStyles();
+    var _useState = _sliced_to_array((0, _react.useState)(null), 2), container = _useState[0], setContainer = _useState[1];
+    (0, _react.useEffect)(function() {
+        var div = document.createElement("div");
+        div.className = "@container Litho-ModalPortal";
+        setContainer(div);
+        document.body.appendChild(div);
+        return function() {
+            document.body.removeChild(div);
+        };
+    }, []);
+    (0, _react.useEffect)(function() {
+        setModalIsOpen(open);
+        if (!open || !onClose) return;
+        var handleKeyDown = function(event) {
+            if (event.key === "Escape") {
+                onClose();
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return function() {
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [
+        open,
+        onClose
+    ]);
+    // Focus first input when modal opens
+    (0, _react.useLayoutEffect)(function() {
+        if (open && container && modalContentRef.current) {
+            var focusable = modalContentRef.current.querySelector('input:not([type="hidden"]), select, textarea');
+            if (focusable) focusable.focus();
+        }
+    }, [
+        open,
+        container
+    ]);
+    if (!open) {
+        return null;
+    }
+    var showFooter = primaryAction || secondaryActions.length > 0 || destructiveAction || leftAccessory;
+    return container && /*#__PURE__*/ (0, _reactdom.createPortal)(/*#__PURE__*/ (0, _jsxruntime.jsxs)(ModalContext.Provider, {
+        value: true,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: containerClasses,
+                style: zIndexOverride ? {
+                    zIndex: zIndexOverride
+                } : {},
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    className: classes,
+                    ref: modalContentRef,
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                            className: headerClasses,
+                            children: [
+                                backAction && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                    className: "Litho-ModalHeader__BackAction pr-3",
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+                                        plain: true,
+                                        onClick: backAction,
+                                        icon: _polarisicons.ArrowLeftMinor
+                                    })
+                                }),
+                                (title || subtitle) && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                                    className: "flex flex-1 flex-col gap-0",
+                                    children: [
+                                        title && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                                            variant: "headingLg",
+                                            fontWeight: "semibold",
+                                            children: title
+                                        }),
+                                        subtitle && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                                            variant: "bodyMd",
+                                            color: "subdued",
+                                            children: subtitle
+                                        })
+                                    ]
+                                }),
+                                onClose && !hideCloseButton && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+                                    plain: true,
+                                    icon: _polarisicons.CancelMajor,
+                                    onClick: onClose
+                                })
+                            ]
+                        }),
+                        hasChildren && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            className: "Litho-ModalBody grow overflow-y-auto overscroll-contain",
+                            children: loading ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                className: "flex justify-center items-center h-full py-12",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Spinner, {})
+                            }) : sectioned ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                className: sectionClasses,
+                                children: children
+                            }) : children
+                        }),
+                        showFooter ? /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                            className: "Litho-ModalFooter min-h-15 flex items-center justify-between border-t py-2 px-4 flex-none",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                                    className: "flex gap-2",
+                                    children: [
+                                        destructiveAction && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+                                            destructive: destructiveAction.destructive === false ? false : true,
+                                            onClick: destructiveAction.onAction,
+                                            loading: destructiveAction.loading,
+                                            icon: destructiveAction.icon,
+                                            disabled: destructiveAction.disabled,
+                                            primary: destructiveAction.primary,
+                                            url: destructiveAction.url,
+                                            tooltip: destructiveAction.tooltip,
+                                            tooltipAlignment: destructiveAction.tooltipAlignment,
+                                            children: destructiveAction.content || "Delete"
+                                        }),
+                                        leftAccessory && leftAccessory
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                                    className: "flex gap-2",
+                                    children: [
+                                        (secondaryActions === null || secondaryActions === void 0 ? void 0 : secondaryActions.length) > 0 && secondaryActions.map(function(action) {
+                                            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+                                                onClick: action.onAction,
+                                                disabled: action.disabled,
+                                                url: action.url,
+                                                tooltip: action.tooltip,
+                                                tooltipAlignment: action.tooltipAlignment,
+                                                children: action.content
+                                            }, action.content);
+                                        }),
+                                        secondaryAction && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+                                            onClick: secondaryAction.onAction,
+                                            disabled: secondaryAction.disabled,
+                                            url: secondaryAction.url,
+                                            tooltip: secondaryAction.tooltip,
+                                            tooltipAlignment: secondaryAction.tooltipAlignment,
+                                            children: secondaryAction.content || "Cancel"
+                                        }),
+                                        primaryAction && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+                                            primary: true,
+                                            icon: primaryAction.icon,
+                                            onClick: primaryAction.onAction,
+                                            loading: primaryAction.loading,
+                                            disabled: primaryAction.disabled,
+                                            destructive: primaryAction.destructive,
+                                            url: primaryAction.url,
+                                            tooltip: primaryAction.tooltip,
+                                            tooltipAlignment: primaryAction.tooltipAlignment,
+                                            children: primaryAction.content || "Save"
+                                        })
+                                    ]
+                                })
+                            ]
+                        }) : null
+                    ]
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: overlayClasses,
+                onClick: onClose,
+                style: zIndexOverride ? {
+                    zIndex: zIndexOverride - 1
+                } : {}
+            })
+        ]
+    }), container);
+}
+/**
+ * Section component for use within the Modal.
+ *
+ * @param {Object} props - The component props.
+ * @param {React.ReactNode} [props.children] - The content of the section.
+ * @param {boolean} [props.flush=false] - Whether the section should be flush with no padding.
+ * @returns {JSX.Element} The rendered section.
+ */ function Section() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var children = props.children, flush = props.flush, title = props.title, _props_titleVariant = props.titleVariant, titleVariant = _props_titleVariant === void 0 ? "headingSm" : _props_titleVariant, description = props.description, action = props.action, icon = props.icon, accessory = props.accessory, tooltip = props.tooltip;
+    var showHeader = !!(title || action);
+    var sectionClasses = sectionStyles({
+        flush: flush,
+        showHeader: showHeader
+    });
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        className: sectionClasses,
+        children: [
+            showHeader && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: "Litho-ModalSection__SectionHeader min-h-9 md:min-h-10",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        className: "flex items-center justify-between gap-1",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                                className: "flex items-center gap-2 min-h-8",
+                                children: [
+                                    icon && typeof icon === "function" && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                                        source: icon,
+                                        color: "subdued"
+                                    }),
+                                    icon && (typeof icon === "undefined" ? "undefined" : _type_of(icon)) === "object" && icon,
+                                    title && typeof title === "string" ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                                        variant: titleVariant,
+                                        children: title
+                                    }) : title,
+                                    tooltip && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Tooltip, {
+                                        content: tooltip,
+                                        preferredPosition: "above"
+                                    })
+                                ]
+                            }),
+                            accessory && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                className: "Litho-ModalSection__HeaderAccessory pr-2",
+                                children: accessory
+                            }),
+                            action && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                className: "Litho-ModalSection__HeaderAction relative left-2",
+                                children: action.content ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+                                    link: true,
+                                    onClick: action.onAction,
+                                    primary: action.primary,
+                                    destructive: action.destructive,
+                                    icon: action.icon,
+                                    loading: action.loading,
+                                    disabled: action.disabled,
+                                    connectedDisclosure: action.connectedDisclosure,
+                                    children: action.content
+                                }) : action
+                            })
+                        ]
+                    }),
+                    description && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                        color: "subdued",
+                        children: description
+                    })
+                ]
+            }),
+            children
+        ]
+    });
+}
+Modal.Section = Section;
+var _default = Modal;