@allxsmith/bestax-bulma 5.25.0 → 5.26.1

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';
 
@@ -15300,17 +15333,20 @@ function cssVarToProp(varName) {
         .join('');
 }
 /**
- * Prop names `cssVarToProp` would mint that are already `BulmaOtherProps`
- * helper props: `--bulma-shadow` becomes `shadow` and `--bulma-radius` becomes
- * `radius`. They stay out of `bulmaVarPropMap`, so on Theme each is the helper
- * prop it is on every other component, and both variables are still reachable
- * through `bulmaVars`.
+ * Prop names `cssVarToProp` would mint that are already helper props:
+ * `--bulma-shadow` becomes `shadow`, `--bulma-radius` becomes `radius` and
+ * `--bulma-column-gap` becomes `columnGap`. They stay out of
+ * `bulmaVarPropMap`, so on Theme each is the helper prop it is on every other
+ * component, and every one of those variables is still reachable through
+ * `bulmaVars`.
  *
  * `radius` was missed here once and set `--bulma-radius` while typed as the
  * helper (#694). It still writes that variable, so what it did then keeps
- * working; see `themeRadiusVar`.
+ * working; see `themeRadiusVar`. `columnGap` joined when the gap helpers
+ * became shared helper props, and keeps its old variable route the same way;
+ * see `themeColumnGapVar`.
  */
-const helperPropNames = ['shadow', 'radius'];
+const helperPropNames = ['shadow', 'radius', 'columnGap'];
 /**
  * Mapping of camelCase prop names to their Bulma CSS variable counterparts,
  * minus the `helperPropNames` above.
@@ -15372,6 +15408,36 @@ const themeRadiusVar = (radius) => {
         `bulmaVars={{ '--bulma-radius': '${radius}' }} instead.`);
     return radius;
 };
+/**
+ * What `columnGap` writes to `--bulma-column-gap` on a Theme, or `undefined`
+ * when it writes nothing.
+ *
+ * Until the gap helpers were shared helper props, `columnGap` on Theme was
+ * the camelCase prop Theme mints for `--bulma-column-gap`. It was never in
+ * `ThemeProps`, so only untyped code reached it, but that code got the
+ * columns gutter it asked for. It is the column gap helper now, as on every
+ * other component, so a gap step goes to the helper and writes nothing here.
+ * Any other non-empty string is still written as given, so a length such as
+ * `'1rem'` keeps working, with a development warning pointing at `bulmaVars`.
+ *
+ * Only a string writes anything, for the reason `themeRadiusVar` gives: a
+ * number or a boolean was never a usable length.
+ */
+const themeColumnGapVar = (columnGap) => {
+    if (typeof columnGap !== 'string' || columnGap === '') {
+        return undefined;
+    }
+    if (validGaps.includes(columnGap)) {
+        return undefined;
+    }
+    warnOnce('Theme:column-gap-variable', `[bestax-bulma] <Theme columnGap="${columnGap}">: setting ` +
+        '--bulma-column-gap through the columnGap prop is deprecated and will ' +
+        'stop working in a future major version. On Theme, as on every other ' +
+        'component, columnGap is the column gap helper ' +
+        `("${validGaps.join('", "')}"). Set the variable with ` +
+        `bulmaVars={{ '--bulma-column-gap': '${columnGap}' }} instead.`);
+    return columnGap;
+};
 /** The one `<style>` element every `isRoot` Theme writes into. */
 const ROOT_STYLE_ID = 'bestax-bulma-theme-vars';
 /**
@@ -15449,8 +15515,9 @@ const setRootThemeRules = (order, rules) => {
  *   <Button color="primary">Themed</Button>
  * </Theme>
  */
-const Theme = ({ bulmaVars = {}, children, className, isRoot = false, colorMode, radius, ...restProps }) => {
+const Theme = ({ bulmaVars = {}, children, className, isRoot = false, colorMode, radius, columnGap, ...restProps }) => {
     const radiusVar = themeRadiusVar(radius);
+    const columnGapVar = themeColumnGapVar(columnGap);
     const radiusHelper = validRadii.includes(radius)
         ? radius
         : undefined;
@@ -15464,6 +15531,18 @@ const Theme = ({ bulmaVars = {}, children, className, isRoot = false, colorMode,
             `element, put radius="${radiusHelper}" on it. To change the radius ` +
             "across the page, set bulmaVars={{ '--bulma-radius': '…' }} instead.");
     }
+    // The same for a gap step in `columnGap`, which reads like the columns
+    // gutter it once set and, at the root, has no element for its class.
+    const columnGapStep = typeof columnGap === 'number' ? String(columnGap) : columnGap;
+    if (isRoot &&
+        columnGapStep !== undefined &&
+        validGaps.includes(columnGapStep)) {
+        warnOnce('Theme:root-column-gap', `[bestax-bulma] <Theme isRoot columnGap="${columnGapStep}">: a root ` +
+            `Theme has no wrapper element for is-column-gap-${columnGapStep}, ` +
+            'and a gap step sets no variable, so this does nothing. To change ' +
+            'the columns gutter across the page, set ' +
+            "bulmaVars={{ '--bulma-column-gap': '…' }} instead.");
+    }
     // Extract Bulma variable props from restProps
     const { bulmaVarProps, otherProps } = React.useMemo(() => {
         const varProps = {};
@@ -15483,6 +15562,7 @@ const Theme = ({ bulmaVars = {}, children, className, isRoot = false, colorMode,
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         ...otherProps,
         radius: radiusHelper,
+        columnGap,
     });
     // Merge bulmaVars and individual props, with props taking precedence
     const mergedVars = React.useMemo(() => {
@@ -15495,8 +15575,11 @@ const Theme = ({ bulmaVars = {}, children, className, isRoot = false, colorMode,
         if (radiusVar !== undefined) {
             vars['--bulma-radius'] = radiusVar;
         }
+        if (columnGapVar !== undefined) {
+            vars['--bulma-column-gap'] = columnGapVar;
+        }
         return vars;
-    }, [bulmaVars, bulmaVarProps, radiusVar]);
+    }, [bulmaVars, bulmaVarProps, radiusVar, columnGapVar]);
     // This Theme's place among root Themes; see `rootThemeRules`.
     const [rootOrder] = React.useState(() => nextRootOrder++);
     // The `:root` rules this Theme contributes, or '' when it contributes none.