@pk-design/react-tailwind 1.13.2 → 1.14.0

package/dist/es/hooks/use-close-on-back.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-close-on-back.js","sources":["../../../../src/hooks/use-close-on-back.ts"],"sourcesContent":["import React from 'react'\n\n// history.back() lands later, so a drawer opening meanwhile (one replacing another,\n// or React re-running effects under StrictMode) would have its new entry removed\n// instead, and close at once. Removals are counted, and an opening drawer waits for them.\nlet pendingBacks = 0\nconst afterBacks: Array<() => void> = []\n\nfunction settleBack() {\n  pendingBacks = Math.max(0, pendingBacks - 1)\n  if (pendingBacks === 0) afterBacks.splice(0).forEach((run) => run())\n}\n\nfunction removeEntry() {\n  pendingBacks += 1\n  let settled = false\n  const settle = () => {\n    if (settled) return\n    settled = true\n    window.removeEventListener('popstate', settle)\n    settleBack()\n  }\n  window.addEventListener('popstate', settle)\n  // A back that never reports (nothing to go back to) mustn't hold others up.\n  window.setTimeout(settle, 500)\n  window.history.back()\n}\n\n/**\n * While `active`, the browser's back button (and Android's back gesture)\n * closes the drawer instead of leaving the page: opening adds a history entry\n * (keeping the current state, so routers see the same location), and back\n * removes it. Closed any other way, the entry is removed too, but only if it's\n * still the latest one, so a form that saves and then navigates isn't undone.\n */\nexport function useCloseOnBack(active: boolean, onClose: () => void) {\n  const onCloseRef = React.useRef(onClose)\n  React.useEffect(() => {\n    onCloseRef.current = onClose\n  })\n  const token = React.useId()\n\n  React.useEffect(() => {\n    if (!active || typeof window === 'undefined') return\n    const pushEntry = () =>\n      window.history.pushState({ ...(window.history.state ?? {}), drawer: token }, '')\n    let entryPresent = false\n    let disposed = false\n    const handlePop = () => {\n      if (window.history.state?.drawer === token) return\n      entryPresent = false\n      onCloseRef.current()\n      // onClose may step back within the drawer instead of closing it; if it's\n      // still open afterwards, take back its entry so the next back works too.\n      window.setTimeout(() => {\n        if (disposed) return\n        pushEntry()\n        entryPresent = true\n      }, 0)\n    }\n    const start = () => {\n      if (disposed) return\n      pushEntry()\n      entryPresent = true\n      window.addEventListener('popstate', handlePop)\n    }\n    if (pendingBacks > 0) afterBacks.push(start)\n    else start()\n    return () => {\n      disposed = true\n      window.removeEventListener('popstate', handlePop)\n      if (entryPresent && window.history.state?.drawer === token) removeEntry()\n    }\n  }, [active, token])\n}\n"],"names":["React"],"mappings":"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"}

package/dist/es/index.js

@@ -57,6 +57,7 @@ export { ToastProvider, useToast } from './components/Toast/ToastProvider.js';
 export { Toast } from './components/Toast/Toast.js';
 export { VirtualizedDataTable } from './components/VirtualizedDataTable/VirtualizedDataTable.js';
 export { BREAKPOINT_QUERIES, useBreakpoint, useMediaQuery, useResponsiveValue } from './hooks/use-breakpoint.js';
+export { useCloseOnBack } from './hooks/use-close-on-back.js';
 export { useDebounce, useDebounceFn } from './hooks/use-debounce.js';
 export { useIsMobile } from './hooks/use-is-mobile.js';
 export { useIsTablet } from './hooks/use-is-tablet.js';

package/dist/es/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/react-tailwind.cjs.js

@@ -400,6 +400,86 @@ const useResponsiveValue = (value) => {
     return value.base;
 };
 
+// history.back() lands later, so a drawer opening meanwhile (one replacing another,
+// or React re-running effects under StrictMode) would have its new entry removed
+// instead, and close at once. Removals are counted, and an opening drawer waits for them.
+let pendingBacks = 0;
+const afterBacks = [];
+function settleBack() {
+    pendingBacks = Math.max(0, pendingBacks - 1);
+    if (pendingBacks === 0)
+        afterBacks.splice(0).forEach((run) => run());
+}
+function removeEntry() {
+    pendingBacks += 1;
+    let settled = false;
+    const settle = () => {
+        if (settled)
+            return;
+        settled = true;
+        window.removeEventListener('popstate', settle);
+        settleBack();
+    };
+    window.addEventListener('popstate', settle);
+    // A back that never reports (nothing to go back to) mustn't hold others up.
+    window.setTimeout(settle, 500);
+    window.history.back();
+}
+/**
+ * While `active`, the browser's back button (and Android's back gesture)
+ * closes the drawer instead of leaving the page: opening adds a history entry
+ * (keeping the current state, so routers see the same location), and back
+ * removes it. Closed any other way, the entry is removed too, but only if it's
+ * still the latest one, so a form that saves and then navigates isn't undone.
+ */
+function useCloseOnBack(active, onClose) {
+    const onCloseRef = React.useRef(onClose);
+    React.useEffect(() => {
+        onCloseRef.current = onClose;
+    });
+    const token = React.useId();
+    React.useEffect(() => {
+        if (!active || typeof window === 'undefined')
+            return;
+        const pushEntry = () => { var _a; return window.history.pushState({ ...((_a = window.history.state) !== null && _a !== void 0 ? _a : {}), drawer: token }, ''); };
+        let entryPresent = false;
+        let disposed = false;
+        const handlePop = () => {
+            var _a;
+            if (((_a = window.history.state) === null || _a === void 0 ? void 0 : _a.drawer) === token)
+                return;
+            entryPresent = false;
+            onCloseRef.current();
+            // onClose may step back within the drawer instead of closing it; if it's
+            // still open afterwards, take back its entry so the next back works too.
+            window.setTimeout(() => {
+                if (disposed)
+                    return;
+                pushEntry();
+                entryPresent = true;
+            }, 0);
+        };
+        const start = () => {
+            if (disposed)
+                return;
+            pushEntry();
+            entryPresent = true;
+            window.addEventListener('popstate', handlePop);
+        };
+        if (pendingBacks > 0)
+            afterBacks.push(start);
+        else
+            start();
+        return () => {
+            var _a;
+            disposed = true;
+            window.removeEventListener('popstate', handlePop);
+            if (entryPresent && ((_a = window.history.state) === null || _a === void 0 ? void 0 : _a.drawer) === token)
+                removeEntry();
+        };
+    }, [active, token]);
+}
+
 const alignmentMap = {
     center: 'items-center justify-center h-full',
     start: 'justify-start h-full',
@@ -498,85 +578,6 @@ const Drawer = ({ isOpen, onClose = () => { }, closeOnOutsideClick = true, align
                             : [panelAlignmentMap[align], panelSizeMap[size], panelClass])), "data-layout": fullscreen ? 'fullscreen' : undefined, children: [shouldShowDragHandle && (jsxRuntime.jsx("div", { className: "w-12 h-1.5 rounded-full bg-gray-300 dark:bg-gray-600 mx-auto my-2.5 shrink-0 cursor-grab", "data-testid": "drawer-drag-handle" })), fullscreen && (jsxRuntime.jsxs("div", { className: "sticky top-0 z-10 flex h-14 shrink-0 items-center gap-1 border-b border-[var(--ui-border)] bg-white pl-1 pr-3 pt-[env(safe-area-inset-top,0px)] box-content dark:bg-gray-800", children: [jsxRuntime.jsx(Button, { iconOnly: true, "aria-label": "Close", variant: "plain", theme: "secondary", onClick: onClose, className: "shrink-0", children: jsxRuntime.jsx(SvgX, { className: "size-5" }) }), title && (jsxRuntime.jsx(react.DialogTitle, { as: "h3", className: "min-w-0 flex-1 truncate text-base font-semibold text-gray-900 dark:text-white", children: title })), headerAction && jsxRuntime.jsx("div", { className: "ml-auto shrink-0", children: headerAction })] })), !fullscreen && showTitleSection && (jsxRuntime.jsxs("div", { className: buildClassName('space-y-1 py-3 px-4 md:px-6 flex flex-col border-b border-[var(--ui-border)] shrink-0', titleSticky && 'sticky top-0 bg-white dark:bg-gray-800 z-10'), children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 min-w-0", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [showBackButton && (jsxRuntime.jsx(Button, { iconOnly: true, "aria-label": "Back", variant: "plain", theme: "secondary", size: "xs", onClick: onClose, children: jsxRuntime.jsx(SvgChevronLeft, { className: "size-4" }) })), title && (jsxRuntime.jsx(react.DialogTitle, { as: "h3", className: buildClassName('text-lg font-semibold text-gray-900 dark:text-white truncate tracking-tight min-w-0', titleClass), children: title }))] }), showCloseButton && (jsxRuntime.jsx(Button, { iconOnly: true, "aria-label": "Close drawer", variant: "plain", theme: "secondary", size: "xs", onClick: onClose, className: "rounded-full text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 shrink-0", children: jsxRuntime.jsx(SvgX, { className: "size-4" }) }))] }), description && (jsxRuntime.jsx("p", { className: buildClassName('text-sm text-gray-500 dark:text-gray-400 font-normal truncate', descriptionClass), children: description }))] })), jsxRuntime.jsxs("div", { className: buildClassName('flex-1 p-4 md:p-6 space-y-4 min-w-0', contentClass, fullscreen && 'pb-[calc(1rem+env(safe-area-inset-bottom,0px))]'), children: [fullscreen && description && (jsxRuntime.jsx("p", { className: buildClassName('text-sm text-gray-500 dark:text-gray-400', descriptionClass), children: description })), children] }), !fullscreen && footer && (jsxRuntime.jsx("div", { className: buildClassName('p-4 border-t border-[var(--ui-border-muted)] bg-white dark:bg-gray-800 shrink-0 min-w-0', footerSticky && 'sticky bottom-0 z-10'), children: footer }))] }) }) })] }));
 };
 Drawer.displayName = 'Drawer';
-// history.back() lands later, so a drawer opening meanwhile (one replacing another,
-// or React re-running effects under StrictMode) would have its new entry removed
-// instead, and close at once. Removals are counted, and an opening drawer waits for them.
-let pendingBacks = 0;
-const afterBacks = [];
-function settleBack() {
-    pendingBacks = Math.max(0, pendingBacks - 1);
-    if (pendingBacks === 0)
-        afterBacks.splice(0).forEach((run) => run());
-}
-function removeEntry() {
-    pendingBacks += 1;
-    let settled = false;
-    const settle = () => {
-        if (settled)
-            return;
-        settled = true;
-        window.removeEventListener('popstate', settle);
-        settleBack();
-    };
-    window.addEventListener('popstate', settle);
-    // A back that never reports (nothing to go back to) mustn't hold others up.
-    window.setTimeout(settle, 500);
-    window.history.back();
-}
-/**
- * While `active`, the browser's back button (and Android's back gesture)
- * closes the drawer instead of leaving the page: opening adds a history entry
- * (keeping the current state, so routers see the same location), and back
- * removes it. Closed any other way, the entry is removed too, but only if it's
- * still the latest one, so a form that saves and then navigates isn't undone.
- */
-function useCloseOnBack(active, onClose) {
-    const onCloseRef = React.useRef(onClose);
-    React.useEffect(() => {
-        onCloseRef.current = onClose;
-    });
-    const token = React.useId();
-    React.useEffect(() => {
-        if (!active || typeof window === 'undefined')
-            return;
-        const pushEntry = () => { var _a; return window.history.pushState({ ...((_a = window.history.state) !== null && _a !== void 0 ? _a : {}), drawer: token }, ''); };
-        let entryPresent = false;
-        let disposed = false;
-        const handlePop = () => {
-            var _a;
-            if (((_a = window.history.state) === null || _a === void 0 ? void 0 : _a.drawer) === token)
-                return;
-            entryPresent = false;
-            onCloseRef.current();
-            // onClose may step back within the drawer instead of closing it; if it's
-            // still open afterwards, take back its entry so the next back works too.
-            window.setTimeout(() => {
-                if (disposed)
-                    return;
-                pushEntry();
-                entryPresent = true;
-            }, 0);
-        };
-        const start = () => {
-            if (disposed)
-                return;
-            pushEntry();
-            entryPresent = true;
-            window.addEventListener('popstate', handlePop);
-        };
-        if (pendingBacks > 0)
-            afterBacks.push(start);
-        else
-            start();
-        return () => {
-            var _a;
-            disposed = true;
-            window.removeEventListener('popstate', handlePop);
-            if (entryPresent && ((_a = window.history.state) === null || _a === void 0 ? void 0 : _a.drawer) === token)
-                removeEntry();
-        };
-    }, [active, token]);
-}
 
 function ActionSheet({ isOpen, onClose, title, description, actions, showCancelButton = true, cancelLabel = 'Cancel', onCancel, closeOnBackdropClick = true, dragHandle = true, panelClass = '', containerClass = '', }) {
     const handleItemClick = (action) => {
@@ -5352,6 +5353,7 @@ exports.isEmpty = isEmpty;
 exports.nextSortDirection = nextSortDirection;
 exports.updateSortQuery = updateSortQuery;
 exports.useBreakpoint = useBreakpoint;
+exports.useCloseOnBack = useCloseOnBack;
 exports.useDebounce = useDebounce;
 exports.useDebounceFn = useDebounceFn;
 exports.useIsMobile = useIsMobile;