@allxsmith/bestax-bulma 5.26.0 → 5.26.2

package/dist/index.cjs

@@ -12192,7 +12192,7 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max,
 Calendar.displayName = 'Calendar';
 
 const isBrowser = typeof window !== 'undefined';
-const PickerPopover = ({ isOpen, onClose, anchorRef, children, position = 'bottom-left', appendToBody = false, className, trapFocus = true, closeOnClickOutside = true, closeOnEscape = true, ariaLabel, ariaLabelledBy, role = 'dialog', id, }) => {
+const PickerPopover = ({ isOpen, onClose, anchorRef, children, position = 'bottom-left', appendToBody = false, className, trapFocus = true, closeOnClickOutside = true, closeOnEscape = true, ariaLabel, ariaLabelledBy, role = 'dialog', id, restoreFocusRef, }) => {
     const panelRef = React.useRef(null);
     const resolved = useAnchoredPosition(anchorRef, panelRef, {
         active: isOpen,
@@ -12229,7 +12229,10 @@ const PickerPopover = ({ isOpen, onClose, anchorRef, children, position = 'botto
         document.addEventListener('keydown', handler);
         return () => document.removeEventListener('keydown', handler);
     }, [isOpen, closeOnEscape, onClose]);
-    useFocusTrap(panelRef, { active: isOpen && trapFocus });
+    useFocusTrap(panelRef, {
+        active: isOpen && trapFocus,
+        restoreFocus: restoreFocusRef ?? true,
+    });
     const panelClass = usePrefixedClassNames('picker-popover', {
         'is-active': isOpen,
         [`is-${resolved.position}`]: true,
@@ -12634,6 +12637,37 @@ function useSegmentedEntry(params) {
     // change. Kept in a ref because key handlers read+update synchronously
     // within the same event tick.
     const typedDigitsRef = React.useRef('');
+    // The text focus seeded an empty picker with, until the user edits it or
+    // leaves. While the text still matches it, nothing has been typed.
+    const seedRef = React.useRef(null);
+    // Whether the input's current focus is the one a closing popover handed
+    // back, until focus leaves the picker.
+    const handedBackRef = React.useRef(false);
+    // A seed the popover never turned into a value closes with it, wherever
+    // focus goes, so a dismissed empty field stays empty.
+    //
+    // As the popover closes, its focus trap hands focus back to the input. That
+    // focus is not the user arriving: it must not open the popover again under
+    // `openOnFocus`, or seed an empty picker that leaving would then commit.
+    // `closingRef` is set in the layout phase of the commit that closes it and
+    // cleared by that commit's effects, and React runs a commit's effect
+    // cleanups, the trap's among them, before any of its effects, so a focus
+    // in between is the one handed back.
+    const closingRef = React.useRef(false);
+    const wasOpenRef = React.useRef(isOpen);
+    React.useLayoutEffect(() => {
+        if (wasOpenRef.current && !isOpen) {
+            closingRef.current = true;
+            if (!value && seedRef.current !== null && text === seedRef.current) {
+                setText('');
+            }
+            seedRef.current = null;
+        }
+        wasOpenRef.current = isOpen;
+    }, [isOpen, value, text, setText]);
+    React.useEffect(() => {
+        closingRef.current = false;
+    }, [isOpen]);
     // Segment mode is unavailable for disabled / read-only / non-editable
     // pickers and for Intl-options / variable-width formats (segmentMap null).
     const segmentEditable = !!segmentMap && !!editable && !disabled && !readOnly;
@@ -12690,6 +12724,7 @@ function useSegmentedEntry(params) {
         // segment mode is inactive.
         if (activeSegmentIdx !== null && segmentEditable)
             return;
+        seedRef.current = null;
         setText(e.target.value);
     }, [activeSegmentIdx, segmentEditable, setText]);
     const handleBlur = React.useCallback((e) => {
@@ -12707,6 +12742,16 @@ function useSegmentedEntry(params) {
         }
         setActiveSegmentIdx(null);
         typedDigitsRef.current = '';
+        seedRef.current = null;
+        const handedBack = handedBackRef.current;
+        handedBackRef.current = false;
+        // Leaving after a dismiss commits only what was typed since. Text that
+        // still shows the value wasn't, and re-parsing it could drop what the
+        // format leaves out, such as seconds.
+        if (handedBack && value && text === formatFn(value, format, locale)) {
+            onBlur?.(e);
+            return;
+        }
         const parsed = tryParse(text);
         if (parsed && isAllowed(parsed)) {
             commitValue(parsed);
@@ -12729,13 +12774,19 @@ function useSegmentedEntry(params) {
         onBlur,
     ]);
     const handleFocus = React.useCallback((e) => {
-        if (openOnFocus && popover && !disabled && !readOnly)
+        const handedBack = closingRef.current;
+        handedBackRef.current = handedBack;
+        if (!handedBack && openOnFocus && popover && !disabled && !readOnly) {
             setOpen(true);
+        }
         // Enter segment mode: prime an initial value (so editing works even when
-        // empty), seed the text, and highlight the first editable segment.
+        // empty), seed the text, and highlight the first editable segment. The
+        // segment base doesn't need the seed, so focus handed back skips it.
         if (segmentEditable && segmentMap) {
-            if (!value) {
-                setText(formatFn(makeBaseDate(), format, locale));
+            if (!value && !handedBack) {
+                const seed = formatFn(makeBaseDate(), format, locale);
+                seedRef.current = seed;
+                setText(seed);
             }
             typedDigitsRef.current = '';
             setActiveSegmentIdx(segmentMap.editable[0]);
@@ -13202,7 +13253,7 @@ const DateInputBase = React.forwardRef((props, ref) => {
     return (jsxRuntime.jsxs("div", { ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), ...cleanRest, children: [jsxRuntime.jsx("input", { ref: combinedRef, type: "text", role: "combobox", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": popoverId, autoComplete: "off", className: inputClass, value: text, placeholder: placeholder, disabled: disabled, readOnly: inputReadOnlyAttr, name: name, form: form, required: required, id: id, ...inputHandlers }), popover && triggerIcon && (jsxRuntime.jsx("button", { type: "button", className: triggerClass, onClick: () => {
                     if (canOpen)
                         setOpen(!open);
-                }, disabled: !canOpen, "aria-label": chooseLabel, "aria-haspopup": "dialog", "aria-controls": popoverId, "aria-expanded": open, tabIndex: canOpen ? 0 : -1, children: jsxRuntime.jsx(Icon, { name: triggerIconName, size: size }) })), popover && (jsxRuntime.jsx(PickerPopover, { isOpen: open, onClose: handlePopoverClose, anchorRef: containerRef, position: position, appendToBody: appendToBody, ariaLabel: chooseLabel, id: popoverId, children: calendar }))] }));
+                }, disabled: !canOpen, "aria-label": chooseLabel, "aria-haspopup": "dialog", "aria-controls": popoverId, "aria-expanded": open, tabIndex: canOpen ? 0 : -1, children: jsxRuntime.jsx(Icon, { name: triggerIconName, size: size }) })), popover && (jsxRuntime.jsx(PickerPopover, { isOpen: open, onClose: handlePopoverClose, anchorRef: containerRef, position: position, appendToBody: appendToBody, ariaLabel: chooseLabel, id: popoverId, restoreFocusRef: inputRef, children: calendar }))] }));
 });
 DateInputBase.displayName = 'DateInputBase';
 
@@ -14175,9 +14226,6 @@ const TimeInputBase = React.forwardRef((props, ref) => {
     const mobileFooterClass = usePrefixedClassNames('timeinput-footer-mobile');
     const mobileFooterResetClass = usePrefixedClassNames('timeinput-footer-reset');
     const mobileFooterDoneClass = usePrefixedClassNames('timeinput-footer-done');
-    // Set from the moment the popover starts to close until the close has
-    // committed. See `setOpenFromInput`.
-    const closingRef = React.useRef(false);
     const setOpen = React.useCallback((next) => {
         setOpenState(prev => {
             if (prev === next)
@@ -14187,26 +14235,11 @@ const TimeInputBase = React.forwardRef((props, ref) => {
                 onOpen?.();
             }
             else {
-                closingRef.current = true;
                 onClose?.();
             }
             return next;
         });
     }, [onOpen, onClose, value]);
-    // React runs a commit's effect cleanups before any of its effects, so on a
-    // close this runs after the popover's focus trap has handed focus back.
-    React.useEffect(() => {
-        closingRef.current = false;
-    }, [open]);
-    // As the popover closes, its focus trap hands focus back to the input.
-    // That focus is not the user arriving, so under `openOnFocus` it must not
-    // open the popover again. The input asks to open only on focus, click or
-    // ArrowDown, so a request while a close commits can only be that one.
-    const setOpenFromInput = React.useCallback((next) => {
-        if (next && closingRef.current)
-            return;
-        setOpen(next);
-    }, [setOpen]);
     React.useEffect(() => {
         setText(value ? formatTime(value, defaultFormat, locale) : '');
     }, [value, defaultFormat, locale]);
@@ -14263,7 +14296,7 @@ const TimeInputBase = React.forwardRef((props, ref) => {
         openOnFocus,
         closeOnSelect,
         isOpen: open,
-        setOpen: setOpenFromInput,
+        setOpen,
         inputRef,
         containerRef,
         onFocus,
@@ -14315,7 +14348,7 @@ const TimeInputBase = React.forwardRef((props, ref) => {
     return (jsxRuntime.jsxs("div", { ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), ...cleanRest, children: [jsxRuntime.jsx("input", { ref: combinedRef, type: "text", role: "combobox", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": popoverId, autoComplete: "off", className: inputClass, value: text, placeholder: placeholder, disabled: disabled, readOnly: inputReadOnlyAttr, name: name, form: form, required: required, id: id, ...inputHandlers }), popover && triggerIcon && (jsxRuntime.jsx("button", { type: "button", className: triggerClass, onClick: () => {
                     if (canOpen)
                         setOpen(!open);
-                }, disabled: !canOpen, "aria-label": t.chooseTime, "aria-haspopup": "dialog", "aria-controls": popoverId, "aria-expanded": open, tabIndex: canOpen ? 0 : -1, children: jsxRuntime.jsx(Icon, { name: triggerIconName, size: size }) })), popover && (jsxRuntime.jsx(PickerPopover, { isOpen: open, onClose: () => setOpen(false), anchorRef: containerRef, position: position, appendToBody: appendToBody, ariaLabel: t.chooseTime, id: popoverId, children: panel }))] }));
+                }, disabled: !canOpen, "aria-label": t.chooseTime, "aria-haspopup": "dialog", "aria-controls": popoverId, "aria-expanded": open, tabIndex: canOpen ? 0 : -1, children: jsxRuntime.jsx(Icon, { name: triggerIconName, size: size }) })), popover && (jsxRuntime.jsx(PickerPopover, { isOpen: open, onClose: () => setOpen(false), anchorRef: containerRef, position: position, appendToBody: appendToBody, ariaLabel: t.chooseTime, id: popoverId, restoreFocusRef: inputRef, children: panel }))] }));
 });
 TimeInputBase.displayName = 'TimeInputBase';
 
@@ -14607,7 +14640,7 @@ const DateTimeInputBase = React.forwardRef((props, ref) => {
     return (jsxRuntime.jsxs("div", { ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), ...cleanRest, children: [jsxRuntime.jsx("input", { ref: combinedRef, type: "text", role: "combobox", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": popoverId, autoComplete: "off", className: inputClass, value: text, placeholder: placeholder, disabled: disabled, readOnly: inputReadOnlyAttr, name: name, form: form, required: required, id: id, ...inputHandlers }), popover && triggerIcon && (jsxRuntime.jsx("button", { type: "button", className: triggerClass, onClick: () => {
                     if (canOpen)
                         setOpen(!open);
-                }, disabled: !canOpen, "aria-label": t.chooseDateTime, "aria-haspopup": "dialog", "aria-controls": popoverId, "aria-expanded": open, tabIndex: canOpen ? 0 : -1, children: jsxRuntime.jsx(Icon, { name: triggerIconName, size: size }) })), popover && (jsxRuntime.jsx(PickerPopover, { isOpen: open, onClose: () => setOpen(false), anchorRef: containerRef, position: position, appendToBody: appendToBody, ariaLabel: t.chooseDateTime, id: popoverId, children: panel }))] }));
+                }, disabled: !canOpen, "aria-label": t.chooseDateTime, "aria-haspopup": "dialog", "aria-controls": popoverId, "aria-expanded": open, tabIndex: canOpen ? 0 : -1, children: jsxRuntime.jsx(Icon, { name: triggerIconName, size: size }) })), popover && (jsxRuntime.jsx(PickerPopover, { isOpen: open, onClose: () => setOpen(false), anchorRef: containerRef, position: position, appendToBody: appendToBody, ariaLabel: t.chooseDateTime, id: popoverId, restoreFocusRef: inputRef, children: panel }))] }));
 });
 DateTimeInputBase.displayName = 'DateTimeInputBase';
 
@@ -15524,6 +15557,25 @@ const Theme = ({ bulmaVars = {}, children, className, isRoot = false, colorMode,
         }
         return { bulmaVarProps: varProps, otherProps: otherPropsObj };
     }, [restProps]);
+    // Everything left in `otherProps` lands on the wrapper div, as a helper
+    // class or an attribute, and so does `className`. A root Theme renders no
+    // wrapper, so under `isRoot` all of it is dropped. `radius` and `columnGap`
+    // are not in `otherProps`; the checks above cover them.
+    if (isRoot) {
+        const dropped = Object.entries(otherProps)
+            .filter(([, value]) => value !== undefined && value !== null && value !== false)
+            .map(([key]) => key);
+        if (className) {
+            dropped.unshift('className');
+        }
+        if (dropped.length > 0) {
+            warnOnce('Theme:root-dropped-props', `[bestax-bulma] <Theme isRoot>: a root Theme renders no wrapper ` +
+                `element, so ${dropped.join(', ')} ` +
+                `${dropped.length === 1 ? 'has' : 'have'} nothing to apply to. ` +
+                'Put helper props and classes on an element inside the Theme ' +
+                'instead.');
+        }
+    }
     // Use Bulma classes for styling (only when not isRoot). Only a helper value
     // of `radius` reaches the helper; a legacy string went to the variable.
     const { bulmaHelperClasses, rest } = useBulmaClasses({