@pk-design/react-tailwind 1.12.0 → 1.13.1

package/dist/react-tailwind.es.js

@@ -372,8 +372,10 @@ const panelAlignmentMap = {
     start: 'data-[closed]:-translate-x-1/2 rounded-r-2xl',
     end: 'data-[closed]:translate-x-1/2 rounded-l-2xl',
     top: 'data-[closed]:-translate-y-1/2 rounded-b-2xl',
-    // Bottom sheets clear the home indicator on notched phones (0 elsewhere).
-    bottom: 'data-[closed]:translate-y-full rounded-t-2xl md:rounded-t-3xl max-h-[88vh] max-h-[88dvh] pb-[env(safe-area-inset-bottom,0px)]',
+    // Bottom sheets clear the home indicator on notched phones (0 elsewhere). Never
+    // taller than the container: with the keyboard up it's shorter than 88dvh, and a
+    // bottom-anchored panel past its top is off screen and can't be scrolled to.
+    bottom: 'data-[closed]:translate-y-full rounded-t-2xl md:rounded-t-3xl max-h-[min(88dvh,100%)] pb-[env(safe-area-inset-bottom,0px)]',
 };
 const panelSizeMap = {
     xs: 'max-w-xs',
@@ -384,27 +386,58 @@ const panelSizeMap = {
     '2xl': 'max-w-2xl',
     full: 'w-full',
 };
-const Drawer = ({ isOpen, onClose = () => { }, closeOnOutsideClick = true, align: alignProp = 'end', size: sizeProp = 'md', backdrop = true, title, description, children, footer, footerSticky = false, panelClass = '', contentClass = '', titleClass = '', descriptionClass = '', titleSticky = false, showBackButton = false, showCloseButton = true, dragHandle, }) => {
+// How much shorter than the window the visual viewport must be before it's
+// taken to be the on-screen keyboard rather than the URL bar (≈ 56px).
+const KEYBOARD_THRESHOLD = 150;
+const Drawer = ({ isOpen, onClose = () => { }, closeOnOutsideClick = true, align: alignProp = 'end', size: sizeProp = 'md', backdrop = true, title, description, children, footer, footerSticky = false, panelClass = '', contentClass = '', titleClass = '', descriptionClass = '', titleSticky = false, showBackButton = false, showCloseButton = true, dragHandle, phoneLayout = 'default', headerAction, }) => {
     const align = useResponsiveValue(alignProp);
     const size = useResponsiveValue(sizeProp);
+    const breakpoint = useBreakpoint();
+    const fullscreen = phoneLayout === 'fullscreen' && breakpoint === 'compact';
     const showTitleSection = Boolean(title || description || showBackButton || showCloseButton);
-    const shouldShowDragHandle = dragHandle !== null && dragHandle !== void 0 ? dragHandle : align === 'bottom';
-    const [viewportHeight, setViewportHeight] = React__default.useState(null);
+    const shouldShowDragHandle = !fullscreen && (dragHandle !== null && dragHandle !== void 0 ? dragHandle : align === 'bottom');
+    useCloseOnBack(fullscreen && isOpen, onClose);
+    // The visible area while the on-screen keyboard is open; null otherwise.
+    const [keyboardViewport, setKeyboardViewport] = React__default.useState(null);
     React__default.useEffect(() => {
         if (!isOpen) {
-            setViewportHeight(null);
+            setKeyboardViewport(null);
             return;
         }
+        // Follow the visual viewport only while the on-screen keyboard takes space
+        // (it's then much shorter than the window), so the drawer and its footer
+        // stay above the keyboard. Otherwise it's pinned to the edges: tracking every resize and
+        // scroll in state re-rendered the drawer on each frame as the browser's
+        // URL bar moved, and its sticky header and footer jumped while scrolling.
+        let frame = 0;
+        const measure = () => {
+            frame = 0;
+            const vv = window.visualViewport;
+            if (!vv)
+                return;
+            const keyboardOpen = window.innerHeight - vv.height > KEYBOARD_THRESHOLD;
+            const top = Math.round(vv.offsetTop);
+            const height = Math.round(vv.height);
+            // The browser scrolls the visible area to the focused field, so the
+            // drawer follows its offset as well as its height. An unchanged value
+            // doesn't re-render.
+            setKeyboardViewport((current) => !keyboardOpen
+                ? null
+                : current && current.top === top && current.height === height
+                    ? current
+                    : { top, height });
+        };
         const updateHeight = () => {
-            if (typeof window !== 'undefined' && window.visualViewport) {
-                setViewportHeight(window.visualViewport.height);
-            }
+            if (!frame)
+                frame = window.requestAnimationFrame(measure);
         };
-        updateHeight();
+        measure();
         const vv = typeof window !== 'undefined' ? window.visualViewport : null;
         vv === null || vv === void 0 ? void 0 : vv.addEventListener('resize', updateHeight);
         vv === null || vv === void 0 ? void 0 : vv.addEventListener('scroll', updateHeight);
         return () => {
+            if (frame)
+                window.cancelAnimationFrame(frame);
             vv === null || vv === void 0 ? void 0 : vv.removeEventListener('resize', updateHeight);
             vv === null || vv === void 0 ? void 0 : vv.removeEventListener('scroll', updateHeight);
         };
@@ -414,9 +447,96 @@ const Drawer = ({ isOpen, onClose = () => { }, closeOnOutsideClick = true, align
             onClose === null || onClose === void 0 ? void 0 : onClose();
         }
     };
-    return (jsxs(Dialog, { open: isOpen, as: "div", className: "relative z-50 focus:outline-none", onClose: handleDialogClose, transition: true, children: [backdrop && (jsx(DialogBackdrop, { className: "fixed inset-0 bg-black/40 backdrop-blur-xs transition-opacity duration-200" })), jsx("div", { className: "fixed left-0 top-0 w-full", style: { height: viewportHeight ? `${viewportHeight}px` : '100dvh' }, children: jsx("div", { className: buildClassName('flex', alignmentMap[align]), children: jsxs(DialogPanel, { transition: true, className: buildClassName('w-full max-w-full bg-white dark:bg-gray-800 shadow-xl flex flex-col min-w-0', 'overflow-y-auto overflow-x-hidden overscroll-contain touch-pan-y [-webkit-overflow-scrolling:touch] duration-200 ease-out data-[closed]:opacity-0', panelAlignmentMap[align], panelSizeMap[size], panelClass), children: [shouldShowDragHandle && (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" })), showTitleSection && (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: [jsxs("div", { className: "flex items-center justify-between gap-3 min-w-0", children: [jsxs("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [showBackButton && (jsx(Button, { iconOnly: true, "aria-label": "Back", variant: "plain", theme: "secondary", size: "xs", onClick: onClose, children: jsx(SvgChevronLeft, { className: "size-4" }) })), title && (jsx(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 && (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: jsx(SvgX, { className: "size-4" }) }))] }), description && (jsx("p", { className: buildClassName('text-sm text-gray-500 dark:text-gray-400 font-normal truncate', descriptionClass), children: description }))] })), jsx("div", { className: buildClassName('flex-1 p-4 md:p-6 space-y-4 min-w-0', contentClass), children: children }), footer && (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 }))] }) }) })] }));
+    return (jsxs(Dialog, { open: isOpen, as: "div", className: "relative z-50 focus:outline-none", onClose: handleDialogClose, transition: true, children: [backdrop && (jsx(DialogBackdrop, { className: "fixed inset-0 bg-black/40 backdrop-blur-xs transition-opacity duration-200" })), jsx("div", { className: "fixed inset-0", style: keyboardViewport
+                    ? {
+                        top: `${keyboardViewport.top}px`,
+                        height: `${keyboardViewport.height}px`,
+                        bottom: 'auto',
+                    }
+                    : undefined, "data-testid": "drawer-viewport", children: jsx("div", { className: buildClassName('flex', fullscreen ? 'h-full' : alignmentMap[align]), children: jsxs(DialogPanel, { transition: true, className: buildClassName('w-full max-w-full bg-white dark:bg-gray-800 shadow-xl flex flex-col min-w-0', 'overflow-y-auto overflow-x-hidden overscroll-contain touch-pan-y [-webkit-overflow-scrolling:touch] duration-200 ease-out data-[closed]:opacity-0', ...(fullscreen
+                            ? ['h-full data-[closed]:translate-y-4']
+                            : [panelAlignmentMap[align], panelSizeMap[size], panelClass])), "data-layout": fullscreen ? 'fullscreen' : undefined, children: [shouldShowDragHandle && (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 && (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: [jsx(Button, { iconOnly: true, "aria-label": "Close", variant: "plain", theme: "secondary", onClick: onClose, className: "shrink-0", children: jsx(SvgX, { className: "size-5" }) }), title && (jsx(DialogTitle, { as: "h3", className: "min-w-0 flex-1 truncate text-base font-semibold text-gray-900 dark:text-white", children: title })), headerAction && jsx("div", { className: "ml-auto shrink-0", children: headerAction })] })), !fullscreen && showTitleSection && (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: [jsxs("div", { className: "flex items-center justify-between gap-3 min-w-0", children: [jsxs("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [showBackButton && (jsx(Button, { iconOnly: true, "aria-label": "Back", variant: "plain", theme: "secondary", size: "xs", onClick: onClose, children: jsx(SvgChevronLeft, { className: "size-4" }) })), title && (jsx(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 && (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: jsx(SvgX, { className: "size-4" }) }))] }), description && (jsx("p", { className: buildClassName('text-sm text-gray-500 dark:text-gray-400 font-normal truncate', descriptionClass), children: description }))] })), 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 && (jsx("p", { className: buildClassName('text-sm text-gray-500 dark:text-gray-400', descriptionClass), children: description })), children] }), !fullscreen && footer && (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__default.useRef(onClose);
+    React__default.useEffect(() => {
+        onCloseRef.current = onClose;
+    });
+    const token = React__default.useId();
+    React__default.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) => {
@@ -4255,7 +4375,7 @@ const SelectBox = forwardRef((props, forwardedRef) => {
         const isOptSelected = selectedValueSet.has(optVal);
         return (jsx(ComboboxOption, { disabled: option.disabled, value: option, className: "group rounded-lg py-1.5 px-3 select-none data-[focus]:bg-gray-100 dark:data-[focus]:bg-white/10 data-disabled:opacity-50 cursor-pointer data-disabled:pointer-events-none", children: renderOption ? (renderOption(option, Boolean(isOptSelected))) : (jsxs("div", { className: "flex items-center justify-between gap-2 text-gray-900 dark:text-white group-data-[selected]:text-blue-600", children: [jsx("span", { className: "text-sm/6", children: getDisplayValue(option) }), jsx(SvgCheck, { className: "invisible size-5 dark:stroke-gray-300 group-data-[selected]:visible" })] })) }, optVal));
     };
-    return (jsxs("div", { className: buildClassName('group space-y-2', hasError && 'has-error', containerClass), ref: containerRef, children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between', labelWrapperClass), children: [jsx(Label, { className: labelClass, htmlFor: id, "aria-required": required, children: label }), labelHint && jsx(TextContent, { xsmall: true, children: labelHint })] })), jsxs(Combobox, { multiple: multiple, immediate: immediate, name: name, value: normalizedSelected, onChange: comboboxOnChangeWrapper, onClose: () => setQuery(''), disabled: disabled, by: (a, b) => (a && b ? getValue(a) === getValue(b) : a === b), children: [multiple ? (jsxs("div", { className: buildClassName(baseInputClass, 'flex flex-wrap gap-2 peer relative', rightPaddingClass, hasLeftGroup ? (size === 'lg' ? 'ps-12' : size === 'sm' ? 'ps-8' : 'ps-10') : ''), ref: forwardedRef, children: [hasLeftGroup && (jsx("span", { className: buildClassName('absolute left-0 top-0 h-full flex items-center justify-center text-gray-400 dark:text-gray-500', currentSize.group), children: leftGroup })), isArray(normalizedSelected) &&
+    return (jsxs("div", { className: buildClassName('group', hasError && 'has-error', containerClass), ref: containerRef, children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between mb-1.5', labelWrapperClass), children: [jsx(Label, { className: labelClass, htmlFor: id, "aria-required": required, children: label }), labelHint && jsx(TextContent, { xsmall: true, children: labelHint })] })), jsxs(Combobox, { multiple: multiple, immediate: immediate, name: name, value: normalizedSelected, onChange: comboboxOnChangeWrapper, onClose: () => setQuery(''), disabled: disabled, by: (a, b) => (a && b ? getValue(a) === getValue(b) : a === b), children: [multiple ? (jsxs("div", { className: buildClassName(baseInputClass, 'flex flex-wrap gap-2 peer relative', rightPaddingClass, hasLeftGroup ? (size === 'lg' ? 'ps-12' : size === 'sm' ? 'ps-8' : 'ps-10') : ''), ref: forwardedRef, children: [hasLeftGroup && (jsx("span", { className: buildClassName('absolute left-0 top-0 h-full flex items-center justify-center text-gray-400 dark:text-gray-500', currentSize.group), children: leftGroup })), isArray(normalizedSelected) &&
                                 (normalizedSelected === null || normalizedSelected === void 0 ? void 0 : normalizedSelected.length) > 0 &&
                                 normalizedSelected.map((option, idx) => (jsx(Badge, { theme: "secondary", size: currentSize.badgeSize, removable: !disabled, onRemove: () => removeSelection(idx), children: getDisplayValue(option) }, `${getValue(option)}-${idx}`))), jsx(ComboboxInput, { className: "outline-none flex-1 dark:placeholder-gray-400 placeholder-gray-400 bg-transparent", "aria-label": name, value: query, autoComplete: "off", placeholder: (normalizedSelected === null || normalizedSelected === void 0 ? void 0 : normalizedSelected.length) ? '' : placeholder, onChange: (e) => {
                                     const val = e.target.value;
@@ -4386,7 +4506,7 @@ const QuantityStepper = forwardRef((props, ref) => {
     };
     const isAtMin = disabled || value <= min;
     const isAtMax = disabled || value >= max;
-    return (jsxs("div", { className: buildClassName('flex flex-col gap-1 inline-flex', className), children: [label && (jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsx(Label, { htmlFor: stepperId, className: disabled ? 'opacity-70 cursor-not-allowed' : '', children: label }), labelHint && jsx(TextContent, { xsmall: true, children: labelHint })] })), jsxs("div", { className: buildClassName('inline-flex items-center rounded-lg shadow-2xs transition-all duration-150', 'outline outline-1 -outline-offset-1', CONTAINER_SIZE_CLASS[size], hasError
+    return (jsxs("div", { className: buildClassName('flex flex-col gap-1.5 inline-flex', className), children: [label && (jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsx(Label, { htmlFor: stepperId, className: disabled ? 'opacity-70 cursor-not-allowed' : '', children: label }), labelHint && jsx(TextContent, { xsmall: true, children: labelHint })] })), jsxs("div", { className: buildClassName('inline-flex items-center rounded-lg shadow-2xs transition-all duration-150', 'outline outline-1 -outline-offset-1', CONTAINER_SIZE_CLASS[size], hasError
                     ? '!outline-red-500 !ring-1 !ring-red-500/50 dark:!outline-red-500'
                     : 'outline-[var(--ui-border)]', disabled
                     ? 'pointer-events-none bg-gray-100 dark:bg-gray-800 outline-[var(--ui-border-muted)]'