@heymantle/litho 0.0.9 → 0.0.12

package/dist/cjs/stories/Pane.stories.js

@@ -9,6 +9,9 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    get AskModal () {
+        return AskModal;
+    },
     get CustomLayout () {
         return CustomLayout;
     },
@@ -21,6 +24,9 @@ _export(exports, {
     get FormPane () {
         return FormPane;
     },
+    get PinnedTickets () {
+        return PinnedTickets;
+    },
     get StackedPanes () {
         return StackedPanes;
     },
@@ -43,6 +49,7 @@ var _TextField = /*#__PURE__*/ _interop_require_default(require("../components/T
 var _Page = /*#__PURE__*/ _interop_require_default(require("../components/Page.js"));
 var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
 var _Grid = /*#__PURE__*/ _interop_require_default(require("../components/Grid.js"));
+var _useTabStorage = require("../utilities/useTabStorage.js");
 var _polarisicons = require("@shopify/polaris-icons");
 function _array_like_to_array(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
@@ -302,6 +309,7 @@ var _default = {
 var Default = {
     render: function(args) {
         var _useState = _sliced_to_array((0, _react.useState)(false), 2), paneOpen = _useState[0], setPaneOpen = _useState[1];
+        var tabStorage = (0, _useTabStorage.useTabStorage)();
         return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Page.default, {
             title: "Pane Demo",
             children: [
@@ -312,7 +320,7 @@ var Default = {
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
                             paddingBlockEnd: "4",
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
-                                children: "Click the button below to open a basic pane with header, content, and footer sections."
+                                children: "Click the button below to open a basic pane with header, content, and footer sections. The pane now includes tabbed functionality with automatic tab creation."
                             })
                         }),
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
@@ -329,6 +337,9 @@ var Default = {
                     onClose: function() {
                         return setPaneOpen(false);
                     },
+                    tabStorage: tabStorage,
+                    tabId: "basic-pane",
+                    tabTitle: "Basic Pane",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pane.default.Header, {
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -347,7 +358,7 @@ var Default = {
                                         })
                                     }),
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
-                                        children: "The pane can be closed by clicking the close button in the header, pressing the Escape key, or programmatically."
+                                        children: "The pane can be closed by clicking the close button in the tab, pressing the Escape key, or programmatically."
                                     })
                                 ]
                             })
@@ -385,6 +396,7 @@ var Default = {
 var WithActions = {
     render: function() {
         var _useState = _sliced_to_array((0, _react.useState)(false), 2), paneOpen = _useState[0], setPaneOpen = _useState[1];
+        var tabStorage = (0, _useTabStorage.useTabStorage)();
         var headerActions = [
             {
                 icon: _polarisicons.EditMajor,
@@ -436,6 +448,9 @@ var WithActions = {
                     onClose: function() {
                         return setPaneOpen(false);
                     },
+                    tabStorage: tabStorage,
+                    tabId: "product-details",
+                    tabTitle: "Product Details",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pane.default.Header, {
                             actions: headerActions,
@@ -568,6 +583,7 @@ var WithActions = {
 var FormPane = {
     render: function() {
         var _useState = _sliced_to_array((0, _react.useState)(false), 2), paneOpen = _useState[0], setPaneOpen = _useState[1];
+        var tabStorage = (0, _useTabStorage.useTabStorage)();
         var _useState1 = _sliced_to_array((0, _react.useState)({
             name: '',
             email: '',
@@ -633,6 +649,9 @@ var FormPane = {
                     onClose: function() {
                         return setPaneOpen(false);
                     },
+                    tabStorage: tabStorage,
+                    tabId: "add-contact",
+                    tabTitle: "Add New Contact",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pane.default.Header, {
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -733,6 +752,7 @@ var FormPane = {
 var DetailViewPane = {
     render: function() {
         var _useState = _sliced_to_array((0, _react.useState)(false), 2), paneOpen = _useState[0], setPaneOpen = _useState[1];
+        var tabStorage = (0, _useTabStorage.useTabStorage)();
         var _useState1 = _sliced_to_array((0, _react.useState)(null), 2), selectedOrder = _useState1[0], setSelectedOrder = _useState1[1];
         var orders = [
             {
@@ -881,6 +901,9 @@ var DetailViewPane = {
                     onClose: function() {
                         return setPaneOpen(false);
                     },
+                    tabStorage: tabStorage,
+                    tabId: "order-".concat(selectedOrder === null || selectedOrder === void 0 ? void 0 : selectedOrder.id),
+                    tabTitle: "Order ".concat(selectedOrder === null || selectedOrder === void 0 ? void 0 : selectedOrder.id),
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pane.default.Header, {
                             actions: headerActions,
@@ -1127,6 +1150,8 @@ var StackedPanes = {
     render: function() {
         var _useState = _sliced_to_array((0, _react.useState)(false), 2), firstPaneOpen = _useState[0], setFirstPaneOpen = _useState[1];
         var _useState1 = _sliced_to_array((0, _react.useState)(false), 2), secondPaneOpen = _useState1[0], setSecondPaneOpen = _useState1[1];
+        var firstPaneTabStorage = (0, _useTabStorage.useTabStorage)('stacked-pane-first');
+        var secondPaneTabStorage = (0, _useTabStorage.useTabStorage)('stacked-pane-second');
         return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Page.default, {
             title: "Stacked Panes",
             children: [
@@ -1153,6 +1178,9 @@ var StackedPanes = {
                     onClose: function() {
                         return setFirstPaneOpen(false);
                     },
+                    tabStorage: firstPaneTabStorage,
+                    tabId: "categories",
+                    tabTitle: "Categories",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pane.default.Header, {
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -1227,6 +1255,9 @@ var StackedPanes = {
                     onClose: function() {
                         return setSecondPaneOpen(false);
                     },
+                    tabStorage: secondPaneTabStorage,
+                    tabId: "category-details",
+                    tabTitle: "Category Details",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pane.default.Header, {
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -1349,9 +1380,325 @@ var StackedPanes = {
         }
     }
 };
+var AskModal = {
+    render: function() {
+        var _useState = _sliced_to_array((0, _react.useState)(false), 2), paneOpen = _useState[0], setPaneOpen = _useState[1];
+        var _useState1 = _sliced_to_array((0, _react.useState)("ask"), 2), askContext = _useState1[0], setAskContext = _useState1[1];
+        var tabStorage = (0, _useTabStorage.useTabStorage)();
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Page.default, {
+            title: "Ask Modal Pane",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                    title: "Ask Modal Example",
+                    padded: true,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                        gap: "4",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                children: 'This example demonstrates the AskModal pane type. It creates a single "Ask" tab that can be reused. Opening multiple times will switch to the existing tab instead of creating new ones. The tab title is always "Ask" regardless of the context.'
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                                horizontal: true,
+                                gap: "4",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        primary: askContext === "ask",
+                                        onClick: function() {
+                                            return setAskContext("ask");
+                                        },
+                                        children: "Ask Mode"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        primary: askContext === "search",
+                                        onClick: function() {
+                                            return setAskContext("search");
+                                        },
+                                        children: "Search Mode"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                primary: true,
+                                onClick: function() {
+                                    return setPaneOpen(true);
+                                },
+                                children: "Open Ask Modal"
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Pane.default, {
+                    open: paneOpen,
+                    onClose: function() {
+                        return setPaneOpen(false);
+                    },
+                    tabStorage: tabStorage,
+                    tabId: "ask-tab",
+                    tabTitle: askContext === "search" ? "Search" : "Ask",
+                    tabKey: "ask",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pane.default.Header, {
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                variant: "headingMd",
+                                children: askContext === "search" ? "Search" : "Ask"
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pane.default.Content, {
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                padding: "4",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                                    gap: "4",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
+                                            children: [
+                                                "This is the ",
+                                                askContext === "search" ? "Search" : "Ask",
+                                                ' modal pane. The tab title will be "',
+                                                askContext === "search" ? "Search" : "Ask",
+                                                '" based on the context.'
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            variant: "bodySm",
+                                            color: "subdued",
+                                            children: "Try switching between Ask and Search modes to see the tab title change. Opening multiple times will switch to the existing tab instead of creating duplicates."
+                                        })
+                                    ]
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pane.default.Footer, {
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                padding: "4",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                                    horizontal: true,
+                                    gap: "4",
+                                    align: "end",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                            onClick: function() {
+                                                return setPaneOpen(false);
+                                            },
+                                            children: "Close"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Button.default, {
+                                            primary: true,
+                                            onClick: function() {
+                                                return alert("".concat(askContext, " functionality"));
+                                            },
+                                            children: [
+                                                askContext === "search" ? "Search" : "Ask",
+                                                " Question"
+                                            ]
+                                        })
+                                    ]
+                                })
+                            })
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'AskModal pane type that creates a reusable "Ask" or "Search" tab based on context. Multiple opens will switch to the existing tab.'
+            }
+        }
+    }
+};
+var PinnedTickets = {
+    render: function() {
+        var _useState = _sliced_to_array((0, _react.useState)(false), 2), paneOpen = _useState[0], setPaneOpen = _useState[1];
+        var _useState1 = _sliced_to_array((0, _react.useState)('TICKET-001'), 2), ticketId = _useState1[0], setTicketId = _useState1[1];
+        var _useState2 = _sliced_to_array((0, _react.useState)('John Smith'), 2), customerName = _useState2[0], setCustomerName = _useState2[1];
+        var tabStorage = (0, _useTabStorage.useTabStorage)();
+        var tickets = [
+            {
+                id: 'TICKET-001',
+                customer: 'John Smith',
+                subject: 'Login Issues'
+            },
+            {
+                id: 'TICKET-002',
+                customer: 'Sarah Johnson',
+                subject: 'Billing Question'
+            },
+            {
+                id: 'TICKET-003',
+                customer: 'Mike Wilson',
+                subject: 'Feature Request'
+            },
+            {
+                id: 'TICKET-004',
+                customer: 'Emily Davis',
+                subject: 'Password Reset'
+            },
+            {
+                id: 'TICKET-005',
+                customer: 'Robert Brown',
+                subject: 'Account Locked'
+            },
+            {
+                id: 'TICKET-006',
+                customer: 'Lisa Anderson',
+                subject: 'Payment Failed'
+            },
+            {
+                id: 'TICKET-007',
+                customer: 'David Miller',
+                subject: 'Refund Request'
+            },
+            {
+                id: 'TICKET-008',
+                customer: 'Jennifer Taylor',
+                subject: 'Shipping Delay'
+            },
+            {
+                id: 'TICKET-009',
+                customer: 'Michael Garcia',
+                subject: 'Product Defect'
+            },
+            {
+                id: 'TICKET-010',
+                customer: 'Amanda White',
+                subject: 'Subscription Cancel'
+            },
+            {
+                id: 'TICKET-011',
+                customer: 'Christopher Lee',
+                subject: 'Data Export'
+            },
+            {
+                id: 'TICKET-012',
+                customer: 'Jessica Martinez',
+                subject: 'API Integration'
+            }
+        ];
+        var handleOpenTicket = function(ticket) {
+            setTicketId(ticket.id);
+            setCustomerName(ticket.customer);
+            setPaneOpen(true);
+        };
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Page.default, {
+            title: "Pinned Tickets Pane",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                    title: "Pinned Tickets Example",
+                    padded: true,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                        gap: "4",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                children: "This example demonstrates the PinnedTicketsPane type. Each ticket creates its own tab with the customer name. Multiple tickets can be pinned simultaneously, each getting their own tab. Opening the same ticket multiple times will switch to the existing tab instead of creating duplicates."
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                variant: "bodySm",
+                                color: "subdued",
+                                children: "Try clicking the same ticket multiple times - it will switch to the existing tab instead of creating duplicates."
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
+                                gap: "2",
+                                children: tickets.map(function(ticket) {
+                                    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Button.default, {
+                                        onClick: function() {
+                                            return handleOpenTicket(ticket);
+                                        },
+                                        children: [
+                                            "Open ",
+                                            ticket.customer,
+                                            " - ",
+                                            ticket.subject
+                                        ]
+                                    }, ticket.id);
+                                })
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Pane.default, {
+                    open: paneOpen,
+                    onClose: function() {
+                        return setPaneOpen(false);
+                    },
+                    tabStorage: tabStorage,
+                    tabId: "ticket-".concat(ticketId),
+                    tabTitle: customerName,
+                    tabKey: "ticket-".concat(ticketId),
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pane.default.Header, {
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                variant: "headingMd",
+                                children: customerName
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pane.default.Content, {
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                padding: "4",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                                    gap: "4",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
+                                            children: [
+                                                "This is a pinned ticket for ",
+                                                customerName,
+                                                " (Ticket ID: ",
+                                                ticketId,
+                                                ")."
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            variant: "bodySm",
+                                            color: "subdued",
+                                            children: "Each pinned ticket gets its own tab with the customer name as the tab label. Opening the same ticket multiple times will switch to the existing tab instead of creating duplicates."
+                                        })
+                                    ]
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pane.default.Footer, {
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                padding: "4",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                                    horizontal: true,
+                                    gap: "4",
+                                    align: "end",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                            onClick: function() {
+                                                return setPaneOpen(false);
+                                            },
+                                            children: "Close Ticket"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                            primary: true,
+                                            onClick: function() {
+                                                return alert('Reply to ticket');
+                                            },
+                                            children: "Reply"
+                                        })
+                                    ]
+                                })
+                            })
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'PinnedTicketsPane type that creates a separate tab for each pinned ticket with customer name as tab label. Prevents duplicate tabs for the same ticket.'
+            }
+        }
+    }
+};
 var CustomLayout = {
     render: function() {
         var _useState = _sliced_to_array((0, _react.useState)(false), 2), paneOpen = _useState[0], setPaneOpen = _useState[1];
+        var tabStorage = (0, _useTabStorage.useTabStorage)();
         return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Page.default, {
             title: "Custom Pane Layout",
             children: [
@@ -1378,10 +1725,12 @@ var CustomLayout = {
                     onClose: function() {
                         return setPaneOpen(false);
                     },
+                    tabStorage: tabStorage,
+                    tabId: "live-chat",
+                    tabTitle: "Live Chat Support",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Pane.default.Header, {
                             bottomBorder: false,
-                            showCloseButton: false,
                             children: [
                                 /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                                     horizontal: true,

package/dist/cjs/utilities/useBodyScrollLock.js

@@ -0,0 +1,63 @@
+"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 default () {
+        return _default;
+    },
+    get useBodyScrollLock () {
+        return useBodyScrollLock;
+    }
+});
+var _react = require("react");
+// Reference counter for body scroll lock (shared across all components)
+var bodyScrollLockCount = 0;
+/**
+ * Locks body scrolling by adding overflow-hidden class
+ * Uses reference counting to coordinate between multiple components
+ */ var lockBodyScroll = function() {
+    if (typeof document === 'undefined') return;
+    bodyScrollLockCount++;
+    if (bodyScrollLockCount === 1) {
+        document.body.classList.add('overflow-hidden');
+    }
+};
+/**
+ * Unlocks body scrolling by removing overflow-hidden class
+ * Uses reference counting to coordinate between multiple components
+ */ var unlockBodyScroll = function() {
+    if (typeof document === 'undefined') return;
+    bodyScrollLockCount = Math.max(0, bodyScrollLockCount - 1);
+    if (bodyScrollLockCount === 0) {
+        document.body.classList.remove('overflow-hidden');
+    }
+};
+function useBodyScrollLock(shouldLock) {
+    var hasLockedRef = (0, _react.useRef)(false);
+    (0, _react.useEffect)(function() {
+        if (shouldLock && !hasLockedRef.current) {
+            lockBodyScroll();
+            hasLockedRef.current = true;
+        } else if (!shouldLock && hasLockedRef.current) {
+            unlockBodyScroll();
+            hasLockedRef.current = false;
+        }
+        return function() {
+            if (hasLockedRef.current) {
+                unlockBodyScroll();
+                hasLockedRef.current = false;
+            }
+        };
+    }, [
+        shouldLock
+    ]);
+}
+var _default = useBodyScrollLock;

package/dist/cjs/utilities/useKeyboardAction.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useKeyboardAction", {
+    enumerable: true,
+    get: function() {
+        return useKeyboardAction;
+    }
+});
+var _react = require("react");
+var useKeyboardAction = function() {
+    return (0, _react.useCallback)(function(e, action) {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            action();
+        }
+    }, []);
+};