@allxsmith/bestax-bulma 5.51.0 → 5.52.0

package/dist/esm/components/Command.js

@@ -0,0 +1,637 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { createContext, forwardRef, useState, useRef, useCallback, useEffect, useContext, useId } from 'react';
+import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
+import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
+import { withSubComponents } from '../helpers/withSubComponents.js';
+import { useClientLayoutEffect } from '../helpers/useClientLayoutEffect.js';
+import { useLatestRef } from '../helpers/useLatestRef.js';
+import { flattenChildren } from '../helpers/flattenChildren.js';
+import { warnOnce } from '../helpers/devWarnings.js';
+import { isModalOverlayOpen } from '../helpers/overlayStack.js';
+import { spokenText, StatusRegion } from '../helpers/statusRegion.js';
+import { useComboboxEngine } from '../helpers/useComboboxEngine.js';
+import { Input } from '../form/Input.js';
+import { Modal } from './Modal.js';
+
+/** What names a Command that's given no `label`. */
+const defaultLabel = 'Commands';
+/** What a Command given `actions` shows when nothing matches, unless it's given `empty`. */
+const defaultEmpty = 'No results';
+// What the status region announces: the `Command.Empty` content, as the one
+// item it's handed while that content is on screen because of the user's
+// typing.
+const typedNoMatches$2 = [{ id: 'empty' }];
+const nothingToAnnounce$2 = [];
+/** Whether a slot was given something to show. */
+const isShown = (node) => node !== undefined && node !== null && node !== false && node !== '';
+const noop$1 = () => { };
+const registerNothing$1 = () => noop$1;
+// What a part rendered outside a Command reads: nothing to report to, so it
+// renders its markup and does nothing.
+const standalone$1 = {
+    engine: {
+        open: false,
+        expanded: false,
+        highlighted: null,
+        typed: false,
+        listboxId: '',
+        itemId: () => '',
+        rootRef: { current: null },
+        inputRef: { current: null },
+        listboxRef: { current: null },
+        registerPopup: registerNothing$1,
+        registerItem: registerNothing$1,
+        onKeyDown: noop$1,
+        onChange: noop$1,
+        onClick: noop$1,
+        onBlur: noop$1,
+        hover: noop$1,
+        pick: noop$1,
+        keepFocus: noop$1,
+        markInside: noop$1,
+    },
+    label: defaultLabel,
+    query: '',
+    onFieldChange: noop$1,
+    reportLoading: noop$1,
+    reportEmpty: registerNothing$1,
+    registerHandler: registerNothing$1,
+};
+const CommandContext = createContext(null);
+const useCommand = () => useContext(CommandContext) ?? standalone$1;
+/** Hands a node to a forwarded ref and to one of the component's own. */
+function setRefs$1(node, own, forwarded) {
+    own.current = node;
+    if (typeof forwarded === 'function')
+        forwarded(node);
+    else if (forwarded)
+        forwarded.current = node;
+}
+/**
+ * The default filter: the actions whose label, keywords or description hold
+ * the search, ignoring case and the spaces around it, label matches first and
+ * the order otherwise kept. An empty search keeps them all.
+ */
+const filterActions = (query, actions) => {
+    const term = query.trim().toLowerCase();
+    if (term === '')
+        return actions;
+    const byLabel = [];
+    const byOther = [];
+    for (const action of actions) {
+        if (action.label.toLowerCase().includes(term)) {
+            byLabel.push(action);
+        }
+        else if (action.description?.toLowerCase().includes(term) ||
+            action.keywords?.some(keyword => keyword.toLowerCase().includes(term))) {
+            byOther.push(action);
+        }
+    }
+    return [...byLabel, ...byOther];
+};
+/** The search icon at the start of the field. */
+const SearchIcon = () => (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", width: "1em", height: "1em", focusable: "false", children: [jsx("circle", { cx: "7", cy: "7", r: "4.75" }), jsx("path", { d: "M10.5 10.5L14 14" })] }));
+/**
+ * The Command built from parts: the field, the list, the keys and the run,
+ * with the items and their filtering left to the app.
+ */
+const CommandParts = forwardRef(({ children, label, query: controlledQuery, defaultQuery = '', onQueryChange, onSelect, className, ...props }, ref) => {
+    const [ownQuery, setOwnQuery] = useState(defaultQuery);
+    const query = controlledQuery ?? ownQuery;
+    // Each item's `onSelect`, by value, read when it runs.
+    const handlersRef = useRef(new Map());
+    const registerHandler = useCallback((value, handler) => {
+        const handlers = handlersRef.current;
+        handlers.set(value, handler);
+        return () => {
+            if (handlers.get(value) === handler)
+                handlers.delete(value);
+        };
+    }, []);
+    const run = (value) => {
+        handlersRef.current.get(value)?.current?.();
+        onSelect?.(value);
+    };
+    // Inline: the list is always on screen, nothing opens or closes it, and
+    // Escape goes on to what's around it. `keepFirst` keeps the highlight on
+    // the top match, so Enter runs it.
+    const engine = useComboboxEngine({
+        defaultOpen: true,
+        onSelect: run,
+        keepFirst: true,
+        multiple: false,
+        inline: true,
+        deferred: false,
+    });
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const rootClass = usePrefixedClassNames('command');
+    // A polite status region, in the page from the start so it's there
+    // before anything is written into it, announces `Command.Empty` when the
+    // user's typing leaves it on screen: once each time that happens, not
+    // again on each keystroke while it stays. An empty search isn't a search,
+    // so it stays quiet then, and while the field's `isLoading` says results
+    // are on their way, it waits.
+    const [inputLoading, setInputLoading] = useState(false);
+    const emptyRef = useRef(null);
+    const [emptyShown, setEmptyShown] = useState(false);
+    const announced = engine.typed && query !== '' && emptyShown && !inputLoading
+        ? typedNoMatches$2
+        : nothingToAnnounce$2;
+    // The region reads the text on screen, whatever the message renders.
+    const describeEmpty = useCallback(() => {
+        const node = emptyRef.current;
+        /* istanbul ignore if: it's only announced while it's on screen */
+        if (!node)
+            return null;
+        return spokenText(node);
+    }, []);
+    const reportEmpty = useCallback((element) => {
+        emptyRef.current = element;
+        setEmptyShown(true);
+        return () => {
+            emptyRef.current = null;
+            setEmptyShown(false);
+        };
+    }, []);
+    const onFieldChange = (value) => {
+        if (controlledQuery === undefined)
+            setOwnQuery(value);
+        onQueryChange?.(value);
+        engine.onChange();
+    };
+    // A new value each render: the engine's state and handlers are, and the
+    // parts read the highlight from it.
+    const context = {
+        engine,
+        label: label || defaultLabel,
+        query,
+        onFieldChange,
+        reportLoading: setInputLoading,
+        reportEmpty,
+        registerHandler,
+    };
+    const { rootRef } = engine;
+    const rootRefs = useCallback((node) => setRefs$1(node, rootRef, ref), [rootRef, ref]);
+    return (jsxs("div", { className: classNames(rootClass, bulmaHelperClasses, className), ...rest, ref: rootRefs, children: [jsx(CommandContext.Provider, { value: context, children: children }), jsx(StatusRegion, { items: announced, describe: describeEmpty })] }));
+});
+CommandParts.displayName = 'CommandParts';
+/**
+ * The search field, with the combobox role and the keys, rendered as an `Input` with a search icon.
+ *
+ * @function
+ * @param {CommandInputProps} props - Props for the Command.Input component.
+ * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the `<input>`.
+ * @returns {JSX.Element} The field in its Control.
+ */
+const CommandInput = forwardRef(({ isLoading, iconLeft, iconLeftName, onKeyDown, onChange, onClick, onBlur, 'aria-autocomplete': ariaAutocomplete, ...props }, ref) => {
+    const context = useCommand();
+    const { engine, reportLoading } = context;
+    useClientLayoutEffect(() => {
+        reportLoading(!!isLoading);
+        return () => reportLoading(false);
+    }, [reportLoading, isLoading]);
+    const { inputRef } = engine;
+    const inputRefs = useCallback((node) => setRefs$1(node, inputRef, ref), [inputRef, ref]);
+    const { expanded, highlighted } = engine;
+    // A name the caller gave the field wins over the Command's `label`.
+    const callerNamed = !!props['aria-label'] || 'aria-labelledby' in props;
+    return (jsx(Input, { autoCorrect: "off", spellCheck: false, ...props, ref: inputRefs, value: context.query, iconLeft: iconLeft === undefined && !iconLeftName ? jsx(SearchIcon, {}) : iconLeft, iconLeftName: iconLeftName, isLoading: isLoading, "aria-label": callerNamed ? props['aria-label'] : context.label, role: "combobox", "aria-autocomplete": ariaAutocomplete ?? 'list', "aria-haspopup": "listbox", "aria-expanded": expanded, "aria-controls": expanded ? engine.listboxId : undefined, "aria-activedescendant": expanded && highlighted !== null
+            ? engine.itemId(highlighted)
+            : undefined, autoComplete: "off", onKeyDown: event => {
+            onKeyDown?.(event);
+            engine.onKeyDown(event);
+        }, onChange: event => {
+            onChange?.(event);
+            context.onFieldChange(event.target.value);
+        }, onClick: event => {
+            onClick?.(event);
+            if (!event.defaultPrevented)
+                engine.onClick();
+        }, onBlur: event => {
+            onBlur?.(event);
+            engine.onBlur(event);
+        } }));
+});
+CommandInput.displayName = 'CommandInput';
+/**
+ * The list of items, a `listbox` named by the Command's `label`.
+ *
+ * @function
+ * @param {CommandListProps} props - Props for the Command.List component.
+ * @returns {JSX.Element} The listbox.
+ */
+const CommandList = ({ children, className, onMouseDown, ...props }) => {
+    const { engine, label } = useCommand();
+    const { listboxRef, listboxId, keepFocus } = engine;
+    const listClass = usePrefixedClassNames('command-list');
+    // A name the caller gave the list wins over the Command's.
+    const callerNamed = !!props['aria-label'] || 'aria-labelledby' in props;
+    return (jsx("div", { className: classNames(listClass, className), ...props, ref: listboxRef, id: listboxId || undefined, role: "listbox", "aria-label": callerNamed ? props['aria-label'] : label, onMouseDown: event => {
+            onMouseDown?.(event);
+            keepFocus(event);
+        }, children: children }));
+};
+CommandList.displayName = 'CommandList';
+/**
+ * Items under a heading, a `group` named by it.
+ *
+ * @function
+ * @param {CommandGroupProps} props - Props for the Command.Group component.
+ * @returns {JSX.Element} The group and its heading.
+ */
+const CommandGroup = ({ label, children, className, ...props }) => {
+    const labelId = useId();
+    const groupClass = usePrefixedClassNames('command-group');
+    const labelClass = usePrefixedClassNames('command-group-label');
+    // A name the caller gave the group wins over its heading's, as on the list.
+    const callerNamed = !!props['aria-label'] || 'aria-labelledby' in props;
+    return (jsxs("div", { className: classNames(groupClass, className), ...props, role: "group", "aria-labelledby": callerNamed ? props['aria-labelledby'] : labelId, children: [jsx("div", { className: labelClass, id: labelId, children: label }), children] }));
+};
+CommandGroup.displayName = 'CommandGroup';
+/**
+ * One thing to do in the list, named by its label and described by its description and hint.
+ *
+ * @function
+ * @param {CommandItemProps} props - Props for the Command.Item component.
+ * @returns {JSX.Element} The item.
+ */
+const CommandItem = ({ value, disabled = false, onSelect, icon, description, hint, children, className, onClick, onPointerMove, ...props }) => {
+    const { engine, registerHandler } = useCommand();
+    const itemRef = useRef(null);
+    const { registerItem } = engine;
+    useClientLayoutEffect(() => registerItem(itemRef.current, {
+        value,
+        disabled,
+        checked: false,
+    }), [registerItem, value, disabled]);
+    const onSelectRef = useLatestRef(onSelect);
+    useClientLayoutEffect(() => registerHandler(value, onSelectRef), [registerHandler, value, onSelectRef]);
+    const highlighted = engine.highlighted === value;
+    const itemClass = usePrefixedClassNames('command-item', {
+        'is-active': highlighted,
+        'is-disabled': disabled,
+    });
+    const iconClass = usePrefixedClassNames('command-item-icon');
+    const bodyClass = usePrefixedClassNames('command-item-body');
+    const labelClass = usePrefixedClassNames('command-item-label');
+    const descriptionClass = usePrefixedClassNames('command-item-description');
+    const hintClass = usePrefixedClassNames('command-item-hint');
+    // Named by its label alone, so a screen reader says what it does before
+    // the rest, and described by the description and the hint.
+    const baseId = useId();
+    const labelId = `${baseId}label`;
+    const descriptionId = isShown(description)
+        ? `${baseId}description`
+        : undefined;
+    const hintId = isShown(hint) ? `${baseId}hint` : undefined;
+    const describedBy = [descriptionId, hintId].filter(Boolean).join(' ') || undefined;
+    const callerNamed = !!props['aria-label'] || 'aria-labelledby' in props;
+    return (jsxs("div", { className: classNames(itemClass, className), "aria-describedby": describedBy, ...props, ref: itemRef, id: engine.itemId(value) || undefined, role: "option", "aria-selected": disabled ? undefined : highlighted || undefined, "aria-disabled": disabled || undefined, "aria-labelledby": callerNamed ? props['aria-labelledby'] : labelId, onClick: event => {
+            onClick?.(event);
+            if (!disabled && !event.defaultPrevented)
+                engine.pick(value);
+        }, onPointerMove: event => {
+            onPointerMove?.(event);
+            if (!disabled && !highlighted)
+                engine.hover(value);
+        }, children: [isShown(icon) && (jsx("span", { className: iconClass, "aria-hidden": "true", children: icon })), jsxs("span", { className: bodyClass, children: [jsx("span", { className: labelClass, id: labelId, children: children }), descriptionId && (jsx("span", { className: descriptionClass, id: descriptionId, children: description }))] }), hintId && (jsx("span", { className: hintClass, id: hintId, children: hint }))] }));
+};
+CommandItem.displayName = 'CommandItem';
+/**
+ * The message shown in place of the list when nothing matches, announced when typing brings it on screen.
+ *
+ * @function
+ * @param {CommandEmptyProps} props - Props for the Command.Empty component.
+ * @returns {JSX.Element} The message.
+ */
+const CommandEmpty = ({ children, className, onMouseDown, ...props }) => {
+    const { engine, reportEmpty } = useCommand();
+    const emptyRef = useRef(null);
+    useClientLayoutEffect(() => reportEmpty(emptyRef.current), [reportEmpty]);
+    const emptyClass = usePrefixedClassNames('command-empty');
+    return (jsx("div", { className: classNames(emptyClass, className), ...props, ref: emptyRef, onMouseDown: event => {
+            onMouseDown?.(event);
+            engine.keepFocus(event);
+        }, children: children }));
+};
+CommandEmpty.displayName = 'CommandEmpty';
+/**
+ * The field, and the actions that match the search, grouped, or the empty
+ * message. The search is the parts root's, read from its context.
+ */
+const CommandActionsContent = ({ actions, filter = filterActions, placeholder, empty, }) => {
+    const { query } = useCommand();
+    const shown = filter(query, actions);
+    // Each group where the matches first name it, and the actions with none
+    // together where the first of them is, so the best match stays on top.
+    const sections = new Map();
+    for (const action of shown) {
+        const group = action.group ?? '';
+        sections.set(group, [...(sections.get(group) ?? []), action]);
+    }
+    const renderItem = (action) => (jsx(CommandItem, { value: action.id, disabled: action.disabled, icon: action.icon, description: action.description, hint: action.hint, onSelect: action.onSelect, children: action.label }, action.id));
+    return (jsxs(Fragment, { children: [jsx(CommandInput, { placeholder: placeholder }), shown.length > 0 ? (jsx(CommandList, { children: Array.from(sections, ([group, members]) => group ? (jsx(CommandGroup, { label: group, children: members.map(renderItem) }, group)) : (members.map(renderItem))) })) : isShown(empty) ? (jsx(CommandEmpty, { children: empty })) : null] }));
+};
+/**
+ * The Command given `actions`. It renders the parts itself and filters the
+ * actions as the user types, so a run goes through the same parts, keys and
+ * ARIA as one built by hand.
+ */
+const CommandFromActions = forwardRef(({ actions, filter, placeholder, empty = defaultEmpty, children, ...rest }, ref) => {
+    if (flattenChildren(children).length > 0) {
+        warnOnce('Command:actions-children', '[bestax-bulma] <Command actions> renders its own field and items, ' +
+            'so its children are ignored. Give it actions or build it from ' +
+            'parts, not both.');
+    }
+    return (jsx(CommandParts, { ...rest, ref: ref, children: jsx(CommandActionsContent, { actions: actions, filter: filter, placeholder: placeholder, empty: empty }) }));
+});
+CommandFromActions.displayName = 'CommandFromActions';
+/**
+ * The `Command` component is a search field over a list of things to do, which narrows as you type and runs the top match on Enter: inline by default, and a command palette in a modal as `Command.Dialog`.
+ *
+ * Given `actions`, it's one element. It renders the field, the list, the
+ * groups and the empty message, and filters the actions by label, keywords
+ * and description as the user types, with label matches first. `filter`
+ * takes over the matching, for fuzzy search.
+ *
+ * Built from parts, the app owns the items: what's in the list and how it's
+ * filtered, from the search `onQueryChange` reports. Nothing filters them,
+ * so a server's answer shows as it came.
+ *
+ * Either way, focus stays in the field, and the highlighted item is its
+ * `aria-activedescendant`. The first enabled item is highlighted whenever
+ * the items change, so Enter runs the top match. Running an item calls its
+ * own `onSelect`, then the Command's.
+ *
+ * When typing leaves the empty message on screen, its text is announced
+ * through a polite status region, once, after any loading ends. Result
+ * counts aren't announced: a screen reader reads the list's size from the
+ * markup, and a count on every keystroke talks over the typing.
+ *
+ * @function
+ * @param {CommandProps} props - Props for the Command component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the `div.command`.
+ * @returns {JSX.Element} The field and its list.
+ *
+ * @example
+ * <Command
+ *   label="Settings"
+ *   placeholder="Search settings"
+ *   actions={[
+ *     { id: 'profile', label: 'Edit profile', onSelect: openProfile },
+ *     { id: 'theme', label: 'Dark mode', keywords: ['theme'], onSelect: toggleTheme },
+ *   ]}
+ * />
+ *
+ * @example
+ * <Command label="People" onQueryChange={setQuery} onSelect={openProfile}>
+ *   <Command.Input placeholder="Find a person" />
+ *   {matches.length > 0 ? (
+ *     <Command.List>
+ *       {matches.map(person => (
+ *         <Command.Item key={person.id} value={person.id}>
+ *           {person.name}
+ *         </Command.Item>
+ *       ))}
+ *     </Command.List>
+ *   ) : (
+ *     <Command.Empty>No one matches</Command.Empty>
+ *   )}
+ * </Command>
+ */
+const CommandRoot = forwardRef((props, ref) => props.actions === undefined ? (jsx(CommandParts, { ...props, ref: ref })) : (jsx(CommandFromActions, { ...props, ref: ref })));
+/** Other names a key goes by in a `shortcut`, for the ones `key` spells otherwise. */
+const keyAliases = {
+    space: ' ',
+    esc: 'escape',
+};
+/**
+ * Reads a `shortcut` such as `"mod+k"` or `"ctrl + shift + p"`.
+ *
+ * @param shortcut - Modifiers and a key, joined by `+`.
+ * @returns The combination, or `null` when it doesn't read as one.
+ */
+const parseShortcut = (shortcut) => {
+    const parts = shortcut
+        .toLowerCase()
+        .split('+')
+        .map(part => part.trim());
+    const key = parts.pop();
+    if (key === '')
+        return null;
+    const parsed = {
+        key: keyAliases[key] ?? key,
+        mod: false,
+        ctrl: false,
+        meta: false,
+        alt: false,
+        shift: false,
+    };
+    for (const part of parts) {
+        if (part === 'mod')
+            parsed.mod = true;
+        else if (part === 'ctrl' || part === 'control')
+            parsed.ctrl = true;
+        else if (part === 'meta' || part === 'cmd' || part === 'command')
+            parsed.meta = true;
+        else if (part === 'alt' || part === 'option')
+            parsed.alt = true;
+        else if (part === 'shift')
+            parsed.shift = true;
+        else
+            return null;
+    }
+    return parsed;
+};
+/**
+ * Whether a keydown is the combination. `mod` takes Ctrl or ⌘, and any other
+ * modifier has to be as the combination says, so `mod+k` isn't
+ * `mod+shift+k`. A letter or digit is matched by its key, and by where it
+ * sits on the keyboard only when the key isn't a Latin letter or digit at
+ * all, as on a Cyrillic layout or with Option held on a Mac, so another
+ * Latin layout's own letters keep their own shortcuts.
+ */
+const matchesShortcut = (event, shortcut) => {
+    if (event.altKey !== shortcut.alt)
+        return false;
+    // A symbol such as `?` already says whether Shift was down, and which key
+    // takes Shift to type it depends on the layout, so Shift is only checked
+    // for a letter, a digit or a named key, unless the combination names it.
+    const shiftMatters = shortcut.shift ||
+        shortcut.key.length > 1 ||
+        /^[a-z0-9]$/.test(shortcut.key);
+    if (shiftMatters && event.shiftKey !== shortcut.shift)
+        return false;
+    if (shortcut.mod) {
+        if (!event.ctrlKey && !event.metaKey)
+            return false;
+    }
+    else if (event.ctrlKey !== shortcut.ctrl ||
+        event.metaKey !== shortcut.meta) {
+        return false;
+    }
+    const key = (event.key ?? '').toLowerCase();
+    if (key === shortcut.key)
+        return true;
+    if (/^[a-z0-9]$/.test(key))
+        return false;
+    if (/^[a-z]$/.test(shortcut.key)) {
+        return event.code === `Key${shortcut.key.toUpperCase()}`;
+    }
+    if (/^[0-9]$/.test(shortcut.key)) {
+        return event.code === `Digit${shortcut.key}`;
+    }
+    return false;
+};
+/** Input types that take no typing, so a shortcut pressed in one still counts. */
+const untypedInputs = new Set([
+    'button',
+    'checkbox',
+    'color',
+    'file',
+    'hidden',
+    'image',
+    'radio',
+    'range',
+    'reset',
+    'submit',
+]);
+/**
+ * Whether a keydown happened while the user was typing: in a text field, a
+ * text area, a select, or editable content. The composed path's first entry
+ * is the element itself, even inside a shadow root.
+ */
+const isTyping = (event) => {
+    const target = event.composedPath()[0];
+    if (typeof target?.closest !== 'function')
+        return false;
+    const element = target;
+    const editable = element.closest('[contenteditable]');
+    if (editable && editable.getAttribute('contenteditable') !== 'false') {
+        return true;
+    }
+    const tag = element.tagName;
+    if (tag === 'TEXTAREA' || tag === 'SELECT')
+        return true;
+    return (tag === 'INPUT' &&
+        !untypedInputs.has(element.type.toLowerCase()));
+};
+/**
+ * The Command in a modal, a command palette, opened by its `shortcut` or by `open`, that closes once an item has run.
+ *
+ * It renders nothing while it's closed. Open, it's a `Modal` with a
+ * background and the Command's box as the `dialog`, named by `label`:
+ * focus goes to the search field, Tab stays inside, Escape and a click on
+ * the background close it, the page behind it doesn't scroll, and focus goes
+ * back to where it was when it closes.
+ *
+ * @function
+ * @param {CommandDialogProps} props - Props for the Command.Dialog component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the `div.command` that is the dialog.
+ * @returns {JSX.Element | null} The dialog, or nothing while it's closed.
+ */
+const CommandDialog = forwardRef(({ open: controlledOpen, defaultOpen = false, onOpenChange, shortcut, closeOnSelect = true, clearOnClose = true, portal, label, query: controlledQuery, defaultQuery = '', onQueryChange, onSelect, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }, ref) => {
+    const [ownOpen, setOwnOpen] = useState(defaultOpen);
+    const open = controlledOpen ?? ownOpen;
+    // Only ever asked for the other state: the shortcut listens while it's
+    // closed, and everything that closes it is there while it's open.
+    const setOpen = (next) => {
+        if (controlledOpen === undefined)
+            setOwnOpen(next);
+        onOpenChange?.(next);
+    };
+    // The search is held here rather than in the Command, which is only
+    // mounted while the dialog is open, so it can outlive a close when
+    // `clearOnClose` is off.
+    const [ownQuery, setOwnQuery] = useState(defaultQuery);
+    const query = controlledQuery ?? ownQuery;
+    const setQuery = (next) => {
+        if (controlledQuery === undefined)
+            setOwnQuery(next);
+        onQueryChange?.(next);
+    };
+    // Closing clears the search, however the dialog closed. Our own is
+    // cleared during render, React's pattern for adjusting state when other
+    // state changes, and a controlled one is asked for after the commit.
+    const [shownOpen, setShownOpen] = useState(open);
+    if (shownOpen !== open) {
+        setShownOpen(open);
+        if (!open && clearOnClose && controlledQuery === undefined) {
+            setOwnQuery('');
+        }
+    }
+    const wasOpenRef = useRef(open);
+    const clearRef = useLatestRef(() => {
+        if (clearOnClose && controlledQuery !== undefined && query !== '') {
+            onQueryChange?.('');
+        }
+    });
+    useEffect(() => {
+        const wasOpen = wasOpenRef.current;
+        wasOpenRef.current = open;
+        if (wasOpen && !open)
+            clearRef.current();
+    }, [open, clearRef]);
+    if (controlledOpen === undefined && !defaultOpen && !shortcut) {
+        warnOnce('Command.Dialog:no-opener', '[bestax-bulma] <Command.Dialog> has no way to open. Give it a ' +
+            'shortcut, or open and onOpenChange.');
+    }
+    if (shortcut && !parseShortcut(shortcut)) {
+        warnOnce(`Command.Dialog:shortcut:${shortcut}`, `[bestax-bulma] <Command.Dialog> can't read the shortcut ` +
+            `"${shortcut}". Write modifiers and a key joined by +, such as ` +
+            `"mod+k", where the modifiers are mod, ctrl, meta, alt and shift.`);
+    }
+    const openFromShortcut = useLatestRef(() => setOpen(true));
+    useEffect(() => {
+        const combination = shortcut ? parseShortcut(shortcut) : null;
+        if (!combination || open)
+            return undefined;
+        const onKeyDown = (event) => {
+            if (event.defaultPrevented ||
+                event.isComposing ||
+                event.keyCode === 229 ||
+                !matchesShortcut(event, combination) ||
+                isTyping(event) ||
+                // A Modal, a Dialog, a Sidebar with its overlay or a full-page
+                // Loading has the page shut off, so the key isn't the page's. A
+                // Sidebar without one leaves the page in use, so it still opens.
+                isModalOverlayOpen()) {
+                return;
+            }
+            // The browser's own use of the combination, such as Ctrl+K's search
+            // in the address bar, doesn't happen as well.
+            event.preventDefault();
+            openFromShortcut.current();
+        };
+        // On `window`, where a keydown arrives last, so anything on the page
+        // that used the key first has said so with `preventDefault()`.
+        window.addEventListener('keydown', onKeyDown);
+        return () => window.removeEventListener('keydown', onKeyDown);
+    }, [shortcut, open, openFromShortcut]);
+    const dialogClass = usePrefixedClassNames('command-dialog');
+    if (!open)
+        return null;
+    const close = () => setOpen(false);
+    const run = (value) => {
+        onSelect?.(value);
+        if (closeOnSelect)
+            close();
+    };
+    return (jsxs(Modal, { isActive: true, onClose: close, role: "presentation", portal: portal, children: [jsx(Modal.Background, { onClick: close }), jsx(CommandRoot, { ...props, ref: ref, className: classNames(dialogClass, className), label: label, query: query, onQueryChange: setQuery, onSelect: run, role: "dialog", "aria-modal": "true", "aria-label": ariaLabelledBy === undefined
+                    ? ariaLabel || label || defaultLabel
+                    : ariaLabel, "aria-labelledby": ariaLabelledBy })] }));
+});
+CommandDialog.displayName = 'CommandDialog';
+/** Command with Input, List, Group, Item, Empty and Dialog sub-components. */
+const Command = withSubComponents(CommandRoot, {
+    Input: CommandInput,
+    List: CommandList,
+    Group: CommandGroup,
+    Item: CommandItem,
+    Empty: CommandEmpty,
+    Dialog: CommandDialog,
+}, 'Command');
+
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList };
+//# sourceMappingURL=Command.js.map