@allxsmith/bestax-bulma 5.19.0 → 5.22.0

package/dist/index.esm.js

@@ -1683,12 +1683,12 @@ Avatar.displayName = 'Avatar';
  * prefixing the fragment's own key — otherwise a fragment sibling of a direct
  * child would collide (both ".0") and trigger duplicate-key warnings.
  */
-function flattenChildren(children, keyPrefix = '') {
+function flattenChildren$1(children, keyPrefix = '') {
     return React.Children.toArray(children).flatMap(child => {
         if (!React.isValidElement(child))
             return [];
         if (child.type === React.Fragment) {
-            return flattenChildren(child.props.children, keyPrefix + child.key);
+            return flattenChildren$1(child.props.children, keyPrefix + child.key);
         }
         const el = child;
         return [
@@ -1722,7 +1722,7 @@ const AvatarsComponent = ({ className, max, size, shape, spacing = 'md', spaced
         : undefined;
     const surplusClass = usePrefixedClassNames('is-surplus');
     const combinedClasses = classNames(avatarsClasses, bulmaHelperClasses, className);
-    const childArray = flattenChildren(children);
+    const childArray = flattenChildren$1(children);
     const maxCount = typeof max === 'number' && Number.isInteger(max) && max >= 0
         ? max
         : undefined;
@@ -2832,6 +2832,11 @@ const getServerSnapshot = () => false;
  * DOM-only behaviour (such as portalling) past hydration so the first client
  * render matches the server markup instead of tripping hydration recovery.
  *
+ * Only a component that hydrates ever sees `false` on the client. One that
+ * mounts later (after a route change, or in an app with no server rendering)
+ * gets `true` on its first render, so it pays for no extra render. It
+ * subscribes to nothing, so no later render flips it back.
+ *
  * @function useIsHydrated
  * @returns `true` once the hydrating render has completed, otherwise `false`.
  */
@@ -4255,6 +4260,35 @@ const Loading = ({ active = false, isFullPage = false, size, color, canCancel =
     return (jsxs("div", { className: combinedClasses, role: "alert", "aria-busy": "true", "aria-label": "Loading", ...rest, children: [jsx("div", { className: combinedOverlayClasses, onClick: handleOverlayClick, "aria-hidden": "true" }), jsxs("div", { className: loadingContentClass, children: [indicator ? (jsx("span", { className: loadingIconCustomClass, children: indicator })) : (jsx("span", { className: combinedIconClasses })), children && jsx("div", { className: loadingTextClass, children: children }), canCancel && (jsx("button", { type: "button", className: loadingCancelClass, onClick: onCancel, "aria-label": "Cancel loading", children: "Cancel" }))] })] }));
 };
 
+// INTERNAL: deliberately not exported from src/index.ts.
+/** The major version of the React this bundle is running against. */
+const runningMajor = () => Number(React.version.split('.')[0]);
+/**
+ * The prop that makes an element inert, spelled for the React in use, or
+ * nothing when `inert` is false.
+ *
+ * Both majors must render `inert=""`, and each warns on the other's spelling
+ * and then drops the attribute. React 19 treats `inert` as a boolean and
+ * rejects the empty string. React 18 does not know the attribute, so it
+ * passes a string through and rejects `true`.
+ */
+const inertProps = (inert, major = runningMajor()) => {
+    if (!inert)
+        return {};
+    // The cast is for React 18's spelling: this package's types are React 19's,
+    // where `inert` is a boolean.
+    return (major >= 19
+        ? { inert: true }
+        : { inert: '' });
+};
+
+/**
+ * `null` outside a group. A `Collapse` also resets it to `null` for its own
+ * subtree, so a Collapse nested in an item's content keeps its own state
+ * instead of answering to its ancestor's slot in the group.
+ */
+const CollapsesItemContext = createContext(null);
+
 /**
  * The `Collapse` component provides an expandable/collapsible content panel.
  *
@@ -4269,12 +4303,9 @@ const Loading = ({ active = false, isFullPage = false, size, color, canCancel =
  * </Collapse>
  *
  * @example
- * // Controlled collapse
+ * // Controlled collapse, driven by its own trigger
  * const [isOpen, setIsOpen] = useState(false);
- * <Collapse
- *   open={isOpen}
- *   trigger={<button onClick={() => setIsOpen(!isOpen)}>Toggle</button>}
- * >
+ * <Collapse open={isOpen} onOpenChange={setIsOpen} trigger={<strong>Toggle</strong>}>
  *   <p>Content</p>
  * </Collapse>
  *
@@ -4288,14 +4319,49 @@ const Loading = ({ active = false, isFullPage = false, size, color, canCancel =
  *   <p>Content</p>
  * </Collapse>
  */
-const Collapse = ({ open: controlledOpen, defaultOpen = false, onOpen, onClose, trigger, animation = 'fade', position = 'top', ariaId, bordered, children, className, triggerClassName, contentClassName, ...props }) => {
+const Collapse = ({ open: controlledOpen, defaultOpen = false, onOpen, onClose, onOpenChange, trigger, animation = 'fade', position = 'top', ariaId, bordered, children, className, triggerClassName, contentClassName, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
     const contentRef = useRef(null);
-    const [height, setHeight] = useState(defaultOpen ? 'auto' : 0);
-    // Determine if controlled or uncontrolled
+    // Three possible owners of the open state, in order: the caller when `open`
+    // is set, an enclosing Collapses group, and this Collapse itself. A caller's
+    // `open` wins over the group, which is how the group leaves such an item
+    // alone.
     const isControlled = controlledOpen !== undefined;
+    const group = useContext(CollapsesItemContext);
+    const groupItem = isControlled ? null : group;
     const [internalOpen, setInternalOpen] = useState(defaultOpen);
-    const isOpen = isControlled ? controlledOpen : internalOpen;
+    const isOpen = controlledOpen ?? groupItem?.open ?? internalOpen;
+    // A group owns the state of the items it manages, so these props do
+    // nothing there. That is easy to miss, so development says which ones and
+    // what to use instead, once per combination (the way Avatar keys its
+    // warning), and `warnOnce` keeps production silent.
+    if (groupItem) {
+        const ignored = [
+            defaultOpen && 'defaultOpen',
+            onOpen && 'onOpen',
+            onClose && 'onClose',
+        ].filter((name) => Boolean(name));
+        if (ignored.length > 0) {
+            const callbacks = ignored.filter(name => name !== 'defaultOpen');
+            warnOnce(`Collapse:ignored-in-Collapses:${ignored.join('+')}`, `[bestax-bulma] <Collapse ${ignored.join(' ')}> inside <Collapses>: ` +
+                [
+                    ignored.includes('defaultOpen') &&
+                        `defaultOpen has no effect, because the group decides which ` +
+                            `items start open. Pass the item's index in the group's ` +
+                            `defaultValue instead.`,
+                    callbacks.length > 0 &&
+                        `${callbacks.join(' and ')} never fire${callbacks.length > 1 ? '' : 's'}, ` +
+                            `because the group holds the item's open state. Use the ` +
+                            `item's onOpenChange, or the group's onChange, instead.`,
+                ]
+                    .filter(Boolean)
+                    .join(' '));
+        }
+    }
+    // Start from the resolved state rather than `defaultOpen`, so an item that
+    // mounts open through `open` or a group is not first painted (or rendered
+    // on the server) at height 0 under the slide animation.
+    const [height, setHeight] = useState(isOpen ? 'auto' : 0);
     // Generate unique ID for accessibility (useId is SSR-safe and stable across
     // renders; works in React 18 and 19).
     const generatedId = useId();
@@ -4340,19 +4406,25 @@ const Collapse = ({ open: controlledOpen, defaultOpen = false, onOpen, onClose,
         // excluded from the deps.
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isOpen, animation]);
-    // Handle toggle
+    // The trigger reports in every mode, then changes only the state this
+    // Collapse owns. `onOpen`/`onClose` belong to that last case alone.
     const handleToggle = useCallback(() => {
-        if (!isControlled) {
-            const newOpen = !internalOpen;
-            setInternalOpen(newOpen);
-            if (newOpen) {
-                onOpen?.();
-            }
-            else {
-                onClose?.();
-            }
+        const next = !isOpen;
+        onOpenChange?.(next);
+        if (isControlled)
+            return;
+        if (groupItem) {
+            groupItem.setOpen(next);
+            return;
+        }
+        setInternalOpen(next);
+        if (next) {
+            onOpen?.();
+        }
+        else {
+            onClose?.();
         }
-    }, [isControlled, internalOpen, onOpen, onClose]);
+    }, [isOpen, isControlled, groupItem, onOpenChange, onOpen, onClose]);
     // Handle keyboard interaction
     const handleKeyDown = useCallback((e) => {
         if (e.key === 'Enter' || e.key === ' ') {
@@ -4393,10 +4465,100 @@ const Collapse = ({ open: controlledOpen, defaultOpen = false, onOpen, onClose,
         };
     }
     const triggerElement = (jsx("div", { className: combinedTriggerClasses, onClick: handleToggle, onKeyDown: handleKeyDown, role: "button", tabIndex: 0, "aria-expanded": isOpen, "aria-controls": uniqueId, children: trigger }));
-    const contentElement = (jsx("div", { style: contentWrapperStyle, children: jsx("div", { ref: contentRef, id: uniqueId, className: combinedContentClasses, "aria-hidden": !isOpen, children: children }) }));
-    return (jsx("div", { className: combinedClasses, ...rest, children: position === 'bottom' ? (jsxs(Fragment, { children: [contentElement, triggerElement] })) : (jsxs(Fragment, { children: [triggerElement, contentElement] })) }));
+    const contentElement = (jsx("div", { style: contentWrapperStyle, children: jsx("div", { ref: contentRef, id: uniqueId, className: combinedContentClasses, "aria-hidden": !isOpen, ...inertProps(!isOpen), children: children }) }));
+    // The group's item context stops here: a Collapse nested in this one's
+    // content is not an item of this one's group.
+    return (jsx(CollapsesItemContext.Provider, { value: null, children: jsx("div", { className: combinedClasses, ...rest, children: position === 'bottom' ? (jsxs(Fragment, { children: [contentElement, triggerElement] })) : (jsxs(Fragment, { children: [triggerElement, contentElement] })) }) }));
 };
 
+/** Either mode's value as the list of open indexes. */
+function toIndexes(value) {
+    if (Array.isArray(value))
+        return value;
+    return typeof value === 'number' ? [value] : [];
+}
+/**
+ * Flattens Fragment children (recursively) so each item inside one gets its
+ * own index rather than sharing the fragment's. Children.toArray keys restart
+ * at ".0" inside each fragment, so those children are re-keyed with the
+ * fragment's own key as a prefix, the way Avatars does it.
+ */
+function flattenChildren(children, keyPrefix = '') {
+    return React.Children.toArray(children).flatMap(child => {
+        if (!React.isValidElement(child))
+            return [child];
+        if (child.type === React.Fragment) {
+            return flattenChildren(child.props.children, keyPrefix + child.key);
+        }
+        return [
+            keyPrefix
+                ? React.cloneElement(child, { key: keyPrefix + child.key })
+                : child,
+        ];
+    });
+}
+/**
+ * The `Collapses` component groups `Collapse` items into an accordion that keeps one item open at a time, or any number with `multiple`.
+ *
+ * @function
+ * @param {CollapsesProps} props - Props for the Collapses component.
+ * @returns {JSX.Element} The rendered group.
+ *
+ * @example
+ * // Accordion: one item open at a time, the first to start with
+ * <Collapses defaultValue={0}>
+ *   <Collapse bordered trigger={<strong>Shipping</strong>}>…</Collapse>
+ *   <Collapse bordered trigger={<strong>Returns</strong>}>…</Collapse>
+ * </Collapses>
+ *
+ * @example
+ * // Controlled, with items that open independently
+ * const [open, setOpen] = useState<number[]>([]);
+ * <Collapses multiple value={open} onChange={setOpen}>…</Collapses>
+ */
+const CollapsesComponent = ({ multiple = false, value, defaultValue, onChange, seamless = false, className, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    // Controlled vs uncontrolled, as in Tabs. State is held as a list of open
+    // indexes in both modes; `multiple` only decides how a change is computed
+    // and which shape `onChange` receives.
+    const isControlled = value !== undefined;
+    const [internalOpen, setInternalOpen] = useState(() => toIndexes(defaultValue));
+    const openIndexes = isControlled ? toIndexes(value) : internalOpen;
+    // Each mode types `onChange` for its own shape, and the value built below
+    // always matches `multiple`, the union's discriminant.
+    const reportChange = onChange;
+    const setItemOpen = (index, open) => {
+        const others = openIndexes.filter(i => i !== index);
+        // Single mode keeps at most one item open, so opening one drops the rest.
+        // Ascending order, whatever order the items were opened in, so the value
+        // reads and compares the same way however the user got there.
+        const next = (open ? (multiple ? [...others, index] : [index]) : others).sort((a, b) => a - b);
+        if (!isControlled)
+            setInternalOpen(next);
+        reportChange?.(multiple ? next : (next[0] ?? null));
+    };
+    const groupClasses = usePrefixedClassNames('collapses', {
+        'is-seamless': seamless,
+    });
+    const combinedClasses = classNames(groupClasses, bulmaHelperClasses, className);
+    const items = [];
+    let index = 0;
+    for (const child of flattenChildren(children)) {
+        if (!React.isValidElement(child)) {
+            items.push(child);
+            continue;
+        }
+        const itemIndex = index;
+        index += 1;
+        items.push(jsx(CollapsesItemContext.Provider, { value: {
+                open: openIndexes.includes(itemIndex),
+                setOpen: open => setItemOpen(itemIndex, open),
+            }, children: child }, child.key));
+    }
+    return (jsx("div", { className: combinedClasses, ...rest, children: items }));
+};
+const Collapses = withSubComponents(CollapsesComponent, { Collapse }, 'Collapses');
+
 /**
  * The `Tooltip` component displays helpful information when users hover over or focus on an element.
  *
@@ -6517,6 +6679,35 @@ const ListItem = ({ className, textColor, bgColor, children, ...props }) => {
     return (jsx("li", { className: itemClasses || undefined, ...rest, children: children }));
 };
 
+/**
+ * The `Loader` component renders Bulma's `.loader`, a small spinning ring for inline loading states.
+ *
+ * The ring is `1em` square, so `textSize` scales it. It is exposed as an
+ * indeterminate `progressbar` named by `ariaLabel`, and it stops spinning
+ * under `prefers-reduced-motion: reduce` while staying drawn.
+ *
+ * @function
+ * @param {LoaderProps} props - Props for the Loader component.
+ * @param {React.Ref<HTMLSpanElement>} ref - Forwarded ref to the loader element.
+ * @returns {JSX.Element} The rendered loader element.
+ *
+ * @example
+ * <Loader />
+ *
+ * @example
+ * <Loader textSize="3" ariaLabel="Saving" />
+ */
+const Loader = forwardRef(({ className, ariaLabel = 'Loading', ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const loaderClass = usePrefixedClassNames('loader');
+    // role="progressbar", not role="status": a status region mounted together
+    // with its text is not reliably announced, so the loader claims only what
+    // it can deliver, a named indicator found by reading the page. No
+    // aria-valuenow, because the progress is indeterminate.
+    return (jsx("span", { ref: ref, className: classNames(loaderClass, bulmaHelperClasses, className), role: "progressbar", "aria-label": ariaLabel, ...rest }));
+});
+Loader.displayName = 'Loader';
+
 /**
  * How long after an item appears its announcement is written, in ms. The wait
  * lets a screen reader register a region the container has only just mounted,
@@ -14099,6 +14290,33 @@ const Theme = ({ bulmaVars = {}, children, className, isRoot = false, colorMode,
     return isRoot ? (jsx(Fragment, { children: children })) : (jsx("div", { className: combinedClassName || undefined, style: style, ...rest, children: children }));
 };
 
+/**
+ * Renders its children only in the browser, after hydration, and a `fallback` until then, so content that depends on browser-only state doesn't cause a hydration mismatch.
+ *
+ * The server render and the hydrating client render both show `fallback`,
+ * which keeps them identical; the children replace it in the commit that
+ * follows. In an app without server rendering the children show on the first
+ * render.
+ *
+ * @function
+ * @param {ClientOnlyProps} props - Props for the ClientOnly component.
+ * @returns The children once hydrated, otherwise the fallback.
+ *
+ * @example
+ * // The server's time zone is not the reader's.
+ * <ClientOnly fallback={<Skeleton variant="lines" lines={1} />}>
+ *   {() => (
+ *     <p>Times are shown in {Intl.DateTimeFormat().resolvedOptions().timeZone}.</p>
+ *   )}
+ * </ClientOnly>
+ */
+function ClientOnly({ children, fallback = null }) {
+    const hydrated = useIsHydrated();
+    if (!hydrated)
+        return jsx(Fragment, { children: fallback });
+    return jsx(Fragment, { children: typeof children === 'function' ? children() : children });
+}
+
 /**
  * The `Container` component provides a responsive and flexible layout wrapper for your Bulma React UI.
  *
@@ -14445,5 +14663,5 @@ const Section = ({ size, className, children, color, bgColor, textColor, style,
     return (jsx("section", { className: sectionClasses, style: mergeBulmaStyles(bulmaHelperStyles, style), ...rest, children: children }));
 };
 
-export { Autocomplete, Avatar, Avatars, Badge, Block, Box, Breadcrumb, Button, Buttons, Card, Carousel, CarouselItem, Cell, Checkbox, Checkboxes, Code, Collapse, Column, Columns, ConfigProvider, Container, Content, Control, DateInput, DateInputBase, DateTimeInput, DateTimeInputBase, Delete, Dialog, DialogContainer, Divider, Dropdown, DropdownDivider, DropdownItem, Emphasis, Field, FieldBody, FieldLabel, Figure, File, Footer, Grid, Hero, HeroBody, HeroFoot, HeroHead, Icon, IconText, Image, Input, InputBase, Level, LevelItem, LevelLeft, LevelRight, Link, LinkButton, ListItem, Loading, Media, MediaContent, MediaLeft, MediaRight, Menu, MenuItem, MenuLabel, MenuList, Message, Modal, Navbar, NavbarBrand, NavbarBurger, NavbarDivider, NavbarDropdown, NavbarDropdownMenu, NavbarEnd, NavbarItem, NavbarLink, NavbarMenu, NavbarStart, Notification, NotificationContainer, NumberInput, Numberinput, OrderedList, Pagination, PaginationEllipsis, PaginationLink, PaginationList, PaginationNext, PaginationPrevious, Panel, PanelBlock, PanelButtonBlock, PanelCheckboxBlock, PanelHeading, PanelIcon, PanelInputBlock, PanelTabs, Paragraph, Pre, Progress, Radio, Radios, Rate, Reveal, Section, Select, SelectBase, Sidebar, Skeleton, Slider, Span, Step, Steps, Strong, SubTitle, Switch, Tab, TabContentItem, TabItem, TabList, Table, Tabs, TabsContent, Tag, TagInput, Taginput, Tags, Tbody, Td, TextArea, TextAreaBase, Tfoot, Th, Thead, Theme, TimeInput, TimeInputBase, Title, Toast, ToastContainer, Tooltip, Tr, UnorderedList, checkboxColors, checkboxSizes, classNames, createPrefixedClassNames, dialog, isBrowser$1 as isBrowser, mergeBulmaStyles, notification, prefixedClassNames, radioColors, radioSizes, switchColors, switchSizes, toast, useBulmaClasses, useClassPrefix, useColorClasses, useColorStyles, useConfig, useFlexboxClasses, useIconLibrary, useInsideControl, useInsideField, useOtherClasses, usePrefixedClass, usePrefixedClassNames, useSpacingClasses, useTypographyClasses, useVisibilityClasses, validAlignContents, validAlignItems, validAlignSelfs, validAlignments$1 as validAlignments, validAspectRatios, validAxisOverflows, validColorShades, validColors, validCursors, validDisplays, validFlexDirections, validFlexGrowShrink, validFlexWraps, validFloats, validFontFamilies, validInteractions, validJustifyContents, validOverflows, validPositions, validRadii, validResponsives, validSchemeColors, validShadows, validSizes$1 as validSizes, validTableColors, validTextSizes, validTextTransforms, validTextWeights, validViewports, validVisibilities };
+export { Autocomplete, Avatar, Avatars, Badge, Block, Box, Breadcrumb, Button, Buttons, Card, Carousel, CarouselItem, Cell, Checkbox, Checkboxes, ClientOnly, Code, Collapse, Collapses, Column, Columns, ConfigProvider, Container, Content, Control, DateInput, DateInputBase, DateTimeInput, DateTimeInputBase, Delete, Dialog, DialogContainer, Divider, Dropdown, DropdownDivider, DropdownItem, Emphasis, Field, FieldBody, FieldLabel, Figure, File, Footer, Grid, Hero, HeroBody, HeroFoot, HeroHead, Icon, IconText, Image, Input, InputBase, Level, LevelItem, LevelLeft, LevelRight, Link, LinkButton, ListItem, Loader, Loading, Media, MediaContent, MediaLeft, MediaRight, Menu, MenuItem, MenuLabel, MenuList, Message, Modal, Navbar, NavbarBrand, NavbarBurger, NavbarDivider, NavbarDropdown, NavbarDropdownMenu, NavbarEnd, NavbarItem, NavbarLink, NavbarMenu, NavbarStart, Notification, NotificationContainer, NumberInput, Numberinput, OrderedList, Pagination, PaginationEllipsis, PaginationLink, PaginationList, PaginationNext, PaginationPrevious, Panel, PanelBlock, PanelButtonBlock, PanelCheckboxBlock, PanelHeading, PanelIcon, PanelInputBlock, PanelTabs, Paragraph, Pre, Progress, Radio, Radios, Rate, Reveal, Section, Select, SelectBase, Sidebar, Skeleton, Slider, Span, Step, Steps, Strong, SubTitle, Switch, Tab, TabContentItem, TabItem, TabList, Table, Tabs, TabsContent, Tag, TagInput, Taginput, Tags, Tbody, Td, TextArea, TextAreaBase, Tfoot, Th, Thead, Theme, TimeInput, TimeInputBase, Title, Toast, ToastContainer, Tooltip, Tr, UnorderedList, checkboxColors, checkboxSizes, classNames, createPrefixedClassNames, dialog, isBrowser$1 as isBrowser, mergeBulmaStyles, notification, prefixedClassNames, radioColors, radioSizes, switchColors, switchSizes, toast, useBulmaClasses, useClassPrefix, useColorClasses, useColorStyles, useConfig, useFlexboxClasses, useIconLibrary, useInsideControl, useInsideField, useIsHydrated, useOtherClasses, usePrefixedClass, usePrefixedClassNames, useSpacingClasses, useTypographyClasses, useVisibilityClasses, validAlignContents, validAlignItems, validAlignSelfs, validAlignments$1 as validAlignments, validAspectRatios, validAxisOverflows, validColorShades, validColors, validCursors, validDisplays, validFlexDirections, validFlexGrowShrink, validFlexWraps, validFloats, validFontFamilies, validInteractions, validJustifyContents, validOverflows, validPositions, validRadii, validResponsives, validSchemeColors, validShadows, validSizes$1 as validSizes, validTableColors, validTextSizes, validTextTransforms, validTextWeights, validViewports, validVisibilities };
 //# sourceMappingURL=index.esm.js.map