@ariakit/react-core 0.0.1 → 0.1.1

package/cjs/combobox/combobox-row.d.ts

@@ -0,0 +1,50 @@
+import type { CompositeRowOptions } from "../composite/composite-row.js";
+import type { As, Props } from "../utils/types.js";
+import type { ComboboxStore } from "./combobox-store.js";
+/**
+ * Returns props to create a `ComboboxRow` component.
+ * @see https://ariakit.org/components/combobox
+ * @example
+ * ```jsx
+ * const store = useComboboxStore();
+ * const props = useComboboxRow({ store });
+ * <ComboboxPopover store={store}>
+ *   <Role {...props}>
+ *     <ComboboxItem value="Item 1" />
+ *     <ComboboxItem value="Item 2" />
+ *     <ComboboxItem value="Item 3" />
+ *   </Role>
+ * </ComboboxPopover>
+ * ```
+ */
+export declare const useComboboxRow: import("../utils/types.js").Hook<ComboboxRowOptions<"div">>;
+/**
+ * Renders a combobox row.
+ * @see https://ariakit.org/components/combobox
+ * @example
+ * ```jsx
+ * const combobox = useComboboxStore();
+ * <Combobox store={combobox} />
+ * <ComboboxPopover store={combobox}>
+ *   <ComboboxRow>
+ *     <ComboboxItem value="Item 1.1" />
+ *     <ComboboxItem value="Item 1.2" />
+ *     <ComboboxItem value="Item 1.3" />
+ *   </ComboboxRow>
+ *   <ComboboxRow>
+ *     <ComboboxItem value="Item 2.1" />
+ *     <ComboboxItem value="Item 2.2" />
+ *     <ComboboxItem value="Item 2.3" />
+ *   </ComboboxRow>
+ * </ComboboxPopover>
+ * ```
+ */
+export declare const ComboboxRow: import("../utils/types.js").Component<ComboboxRowOptions<"div">>;
+export interface ComboboxRowOptions<T extends As = "div"> extends CompositeRowOptions<T> {
+    /**
+     * Object returned by the `useComboboxStore` hook. If not provided, the parent
+     * `ComboboxList` or `ComboboxPopover` components' context will be used.
+     */
+    store?: ComboboxStore;
+}
+export type ComboboxRowProps<T extends As = "div"> = Props<ComboboxRowOptions<T>>;

package/cjs/combobox/combobox-separator.cjs

@@ -0,0 +1,42 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _2WZVSPAIcjs = require('../__chunks/2WZVSPAI.cjs');
+
+
+var _IZT4J627cjs = require('../__chunks/IZT4J627.cjs');
+require('../__chunks/ET6BKYQA.cjs');
+require('../__chunks/NVMBKFRB.cjs');
+
+
+
+
+var _UYIFJ7U3cjs = require('../__chunks/UYIFJ7U3.cjs');
+
+// src/combobox/combobox-separator.ts
+var _react = require('react');
+var _misc = require('@ariakit/core/utils/misc');
+var useComboboxSeparator = _UYIFJ7U3cjs.createHook.call(void 0, 
+  ({ store, ...props }) => {
+    const context = _react.useContext.call(void 0, _2WZVSPAIcjs.ComboboxContext);
+    store = store || context;
+    _misc.invariant.call(void 0, 
+      store,
+      process.env.NODE_ENV !== "production" && "ComboboxSeparator must be wrapped in a ComboboxList or ComboboxPopover component"
+    );
+    props = _IZT4J627cjs.useCompositeSeparator.call(void 0, { store, ...props });
+    return props;
+  }
+);
+var ComboboxSeparator = _UYIFJ7U3cjs.createComponent.call(void 0, 
+  (props) => {
+    const htmlProps = useComboboxSeparator(props);
+    return _UYIFJ7U3cjs.createElement.call(void 0, "hr", htmlProps);
+  }
+);
+if (process.env.NODE_ENV !== "production") {
+  ComboboxSeparator.displayName = "ComboboxSeparator";
+}
+
+
+
+exports.ComboboxSeparator = ComboboxSeparator; exports.useComboboxSeparator = useComboboxSeparator;

package/cjs/combobox/combobox-separator.d.ts

@@ -0,0 +1,43 @@
+import type { CompositeSeparatorOptions } from "../composite/composite-separator.js";
+import type { As, Props } from "../utils/types.js";
+import type { ComboboxStore } from "./combobox-store.js";
+/**
+ * Returns props a `ComboboxSeparator` component for combobox items.
+ * @see https://ariakit.org/components/combobox
+ * @example
+ * ```jsx
+ * const store = useComboboxStore();
+ * const props = useComboboxSeparator({ store });
+ * <ComboboxPopover store={store}>
+ *   <ComboboxItem value="Item 1" />
+ *   <Role {...props} />
+ *   <ComboboxItem value="Item 2" />
+ *   <ComboboxItem value="Item 3" />
+ * </ComboboxPopover>
+ * ```
+ */
+export declare const useComboboxSeparator: import("../utils/types.js").Hook<ComboboxSeparatorOptions<"hr">>;
+/**
+ * Renders a separator element for combobox items
+ * @see https://ariakit.org/components/combobox
+ * @example
+ * ```jsx
+ * const combobox = useComboboxStore();
+ * <Combobox store={combobox} />
+ * <ComboboxPopover store={combobox}>
+ *   <ComboboxItem value="Item 1" />
+ *   <ComboboxSeparator />
+ *   <ComboboxItem value="Item 2" />
+ *   <ComboboxItem value="Item 3" />
+ * </ComboboxPopover>
+ * ```
+ */
+export declare const ComboboxSeparator: import("../utils/types.js").Component<ComboboxSeparatorOptions<"hr">>;
+export interface ComboboxSeparatorOptions<T extends As = "hr"> extends CompositeSeparatorOptions<T> {
+    /**
+     * Object returned by the `useComboboxStore` hook. If not provided, the parent
+     * `ComboboxList` or `ComboboxPopover` components' context will be used.
+     */
+    store?: ComboboxStore;
+}
+export type ComboboxSeparatorProps<T extends As = "hr"> = Props<ComboboxSeparatorOptions<T>>;

package/cjs/combobox/combobox-store.cjs

@@ -0,0 +1,44 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }
+
+
+var _RG6JXX7Tcjs = require('../__chunks/RG6JXX7T.cjs');
+require('../__chunks/5LMWS5O4.cjs');
+
+
+
+var _WYGT6WVDcjs = require('../__chunks/WYGT6WVD.cjs');
+require('../__chunks/H5Z2A5K2.cjs');
+require('../__chunks/ND6THRTE.cjs');
+
+
+
+var _F6IOE5QTcjs = require('../__chunks/F6IOE5QT.cjs');
+require('../__chunks/5QY4WCTR.cjs');
+require('../__chunks/2X5K3J7Y.cjs');
+
+// src/combobox/combobox-store.ts
+var _comboboxstore = require('@ariakit/core/combobox/combobox-store'); var Core = _interopRequireWildcard(_comboboxstore);
+function useComboboxStoreOptions(props) {
+  return {
+    ..._RG6JXX7Tcjs.useCompositeStoreOptions.call(void 0, props),
+    ..._WYGT6WVDcjs.usePopoverStoreOptions.call(void 0, props)
+  };
+}
+function useComboboxStoreProps(store, props) {
+  store = _RG6JXX7Tcjs.useCompositeStoreProps.call(void 0, store, props);
+  store = _WYGT6WVDcjs.usePopoverStoreProps.call(void 0, store, props);
+  _F6IOE5QTcjs.useStoreProps.call(void 0, store, props, "value", "setValue");
+  return store;
+}
+function useComboboxStore(props = {}) {
+  const options = useComboboxStoreOptions(props);
+  const store = _F6IOE5QTcjs.useStore.call(void 0, 
+    () => Core.createComboboxStore({ ...props, ...options })
+  );
+  return useComboboxStoreProps(store, props);
+}
+
+
+
+
+exports.useComboboxStore = useComboboxStore; exports.useComboboxStoreOptions = useComboboxStoreOptions; exports.useComboboxStoreProps = useComboboxStoreProps;

package/cjs/combobox/combobox-store.d.ts

@@ -0,0 +1,81 @@
+import * as Core from "@ariakit/core/combobox/combobox-store";
+import type { CompositeStoreFunctions, CompositeStoreOptions, CompositeStoreState } from "../composite/composite-store.js";
+import type { PopoverStoreFunctions, PopoverStoreOptions, PopoverStoreState } from "../popover/popover-store.js";
+import type { Store } from "../utils/store.js";
+export declare function useComboboxStoreOptions(props: ComboboxStoreProps): {
+    getAnchorRect: ((anchor: HTMLElement | null) => {
+        x?: number | undefined;
+        y?: number | undefined;
+        width?: number | undefined;
+        height?: number | undefined;
+    } | null) | undefined;
+    renderCallback: ((props: import("@ariakit/core/popover/popover-store").PopoverStoreRenderCallbackProps) => void | (() => void)) | undefined;
+    setOpen?: ((open: boolean) => void) | undefined;
+    defaultOpen?: boolean | undefined;
+    open?: boolean | undefined;
+    animated?: number | boolean | undefined;
+    setItems?: import("@ariakit/core/utils/types").BivariantCallback<(items: ({
+        id: string;
+        element?: HTMLElement | null | undefined;
+    } & {
+        rowId?: string | undefined;
+        disabled?: boolean | undefined;
+        children?: string | undefined;
+    } & {
+        value?: string | undefined;
+    })[]) => void> | undefined;
+    defaultItems?: ({
+        id: string;
+        element?: HTMLElement | null | undefined;
+    } & {
+        rowId?: string | undefined;
+        disabled?: boolean | undefined;
+        children?: string | undefined;
+    } & {
+        value?: string | undefined;
+    })[] | undefined;
+    items?: ({
+        id: string;
+        element?: HTMLElement | null | undefined;
+    } & {
+        rowId?: string | undefined;
+        disabled?: boolean | undefined;
+        children?: string | undefined;
+    } & {
+        value?: string | undefined;
+    })[] | undefined;
+};
+export declare function useComboboxStoreProps<T extends ComboboxStore>(store: T, props: ComboboxStoreProps): T;
+/**
+ * Creates a combobox store.
+ * @see https://ariakit.org/components/combobox
+ * @example
+ * ```jsx
+ * const combobox = useComboboxStore();
+ * <Combobox store={combobox} />
+ * <ComboboxPopover store={combobox}>
+ *   <ComboboxItem value="Apple" />
+ *   <ComboboxItem value="Banana" />
+ *   <ComboboxItem value="Orange" />
+ * </ComboboxPopover>
+ * ```
+ */
+export declare function useComboboxStore(props?: ComboboxStoreProps): ComboboxStore;
+export type ComboboxStoreItem = Core.ComboboxStoreItem;
+export interface ComboboxStoreState extends Core.ComboboxStoreState, CompositeStoreState<ComboboxStoreItem>, PopoverStoreState {
+}
+export interface ComboboxStoreFunctions extends Core.ComboboxStoreFunctions, CompositeStoreFunctions<ComboboxStoreItem>, PopoverStoreFunctions {
+}
+export interface ComboboxStoreOptions extends Core.ComboboxStoreOptions, CompositeStoreOptions<ComboboxStoreItem>, PopoverStoreOptions {
+    /**
+     * A callback that gets called when the `value` state changes.
+     * @param value The new value.
+     * @example
+     * function MyCombobox({ value, onChange }) {
+     *   const combobox = useComboboxStore({ value, setValue: onChange });
+     * }
+     */
+    setValue?: (value: ComboboxStoreState["value"]) => void;
+}
+export type ComboboxStoreProps = ComboboxStoreOptions & Core.ComboboxStoreProps;
+export type ComboboxStore = ComboboxStoreFunctions & Store<Core.ComboboxStore>;

package/cjs/combobox/combobox.cjs

@@ -0,0 +1,324 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _BJTWNJAPcjs = require('../__chunks/BJTWNJAP.cjs');
+
+
+var _GV5LATA3cjs = require('../__chunks/GV5LATA3.cjs');
+require('../__chunks/6622YWGR.cjs');
+require('../__chunks/44UMDBZE.cjs');
+require('../__chunks/NVMBKFRB.cjs');
+
+
+
+
+var _UYIFJ7U3cjs = require('../__chunks/UYIFJ7U3.cjs');
+
+
+
+
+
+
+
+
+
+var _5QY4WCTRcjs = require('../__chunks/5QY4WCTR.cjs');
+require('../__chunks/2X5K3J7Y.cjs');
+
+// src/combobox/combobox.ts
+var _react = require('react');
+var _dom = require('@ariakit/core/utils/dom');
+
+
+
+var _events = require('@ariakit/core/utils/events');
+var _misc = require('@ariakit/core/utils/misc');
+function isFirstItemAutoSelected(items, activeValue, autoSelect) {
+  if (!autoSelect)
+    return false;
+  const firstItem = items.find((item) => !item.disabled && item.value);
+  return _optionalChain([firstItem, 'optionalAccess', _ => _.value]) === activeValue;
+}
+function hasCompletionString(value, activeValue) {
+  if (!activeValue)
+    return false;
+  if (value == null)
+    return false;
+  value = _misc.normalizeString.call(void 0, value);
+  return activeValue.length > value.length && activeValue.toLowerCase().indexOf(value.toLowerCase()) === 0;
+}
+function isInputEvent(event) {
+  return event.type === "input";
+}
+var useCombobox = _UYIFJ7U3cjs.createHook.call(void 0, 
+  ({
+    store,
+    focusable = true,
+    autoSelect: autoSelectProp = false,
+    showOnChange = true,
+    setValueOnChange = true,
+    showOnMouseDown = true,
+    setValueOnClick = true,
+    showOnKeyDown = true,
+    moveOnKeyPress = true,
+    autoComplete = "list",
+    ...props
+  }) => {
+    const ref = _react.useRef.call(void 0, null);
+    const [valueUpdated, forceValueUpdate] = _5QY4WCTRcjs.useForceUpdate.call(void 0, );
+    const valueChangedRef = _react.useRef.call(void 0, false);
+    const autoSelect = store.useState(
+      (state) => !!autoSelectProp && state.virtualFocus
+    );
+    const inline = autoComplete === "inline" || autoComplete === "both";
+    const [canInline, setCanInline] = _react.useState.call(void 0, inline);
+    _5QY4WCTRcjs.useUpdateLayoutEffect.call(void 0, () => {
+      if (!inline)
+        return;
+      setCanInline(true);
+    }, [inline]);
+    const storeValue = store.useState("value");
+    const activeValue = store.useState(
+      (state) => inline && canInline ? state.activeValue : void 0
+    );
+    const items = store.useState("renderedItems");
+    const open = store.useState("open");
+    const value = _react.useMemo.call(void 0, () => {
+      if (!inline)
+        return storeValue;
+      if (!canInline)
+        return storeValue;
+      const firstItemAutoSelected = isFirstItemAutoSelected(
+        items,
+        activeValue,
+        autoSelect
+      );
+      if (firstItemAutoSelected) {
+        if (hasCompletionString(storeValue, activeValue)) {
+          const slice = _optionalChain([activeValue, 'optionalAccess', _2 => _2.slice, 'call', _3 => _3(storeValue.length)]) || "";
+          return storeValue + slice;
+        }
+        return storeValue;
+      }
+      return activeValue || storeValue;
+    }, [inline, canInline, items, activeValue, autoSelect, storeValue]);
+    _react.useEffect.call(void 0, () => {
+      const element = ref.current;
+      if (!element)
+        return;
+      const onCompositeItemMove = () => setCanInline(true);
+      element.addEventListener("combobox-item-move", onCompositeItemMove);
+      return () => {
+        element.removeEventListener("combobox-item-move", onCompositeItemMove);
+      };
+    }, []);
+    _react.useEffect.call(void 0, () => {
+      if (!inline)
+        return;
+      if (!canInline)
+        return;
+      if (!activeValue)
+        return;
+      const firstItemAutoSelected = isFirstItemAutoSelected(
+        items,
+        activeValue,
+        autoSelect
+      );
+      if (!firstItemAutoSelected)
+        return;
+      if (!hasCompletionString(storeValue, activeValue))
+        return;
+      const element = ref.current;
+      if (!element)
+        return;
+      element.setSelectionRange(storeValue.length, activeValue.length);
+    }, [
+      valueUpdated,
+      inline,
+      canInline,
+      activeValue,
+      items,
+      autoSelect,
+      storeValue
+    ]);
+    _5QY4WCTRcjs.useSafeLayoutEffect.call(void 0, () => {
+      if (!storeValue)
+        return;
+      valueChangedRef.current = true;
+    }, [storeValue]);
+    _5QY4WCTRcjs.useSafeLayoutEffect.call(void 0, () => {
+      if (open)
+        return;
+      valueChangedRef.current = false;
+    }, [open]);
+    _5QY4WCTRcjs.useUpdateEffect.call(void 0, () => {
+      if (!autoSelect)
+        return;
+      if (!valueChangedRef.current)
+        return;
+      store.move(_nullishCoalesce(store.first(), () => ( null)));
+    }, [store, valueUpdated, storeValue, autoSelect, items]);
+    _5QY4WCTRcjs.useSafeLayoutEffect.call(void 0, () => {
+      if (autoSelect)
+        return;
+      store.setActiveId(null);
+    }, [valueUpdated, autoSelect, store]);
+    const contentElement = store.useState("contentElement");
+    _react.useEffect.call(void 0, () => {
+      if (!inline)
+        return;
+      const combobox = ref.current;
+      if (!combobox)
+        return;
+      const elements = [combobox, contentElement].filter(Boolean);
+      const onBlur2 = (event) => {
+        if (elements.every((el) => _events.isFocusEventOutside.call(void 0, event, el))) {
+          store.setValue(value);
+        }
+      };
+      elements.forEach((el) => _optionalChain([el, 'optionalAccess', _4 => _4.addEventListener, 'call', _5 => _5("focusout", onBlur2)]));
+      return () => {
+        elements.forEach((el) => _optionalChain([el, 'optionalAccess', _6 => _6.removeEventListener, 'call', _7 => _7("focusout", onBlur2)]));
+      };
+    }, [inline, contentElement, store, value]);
+    const onChangeProp = props.onChange;
+    const showOnChangeProp = _5QY4WCTRcjs.useBooleanEvent.call(void 0, showOnChange);
+    const setValueOnChangeProp = _5QY4WCTRcjs.useBooleanEvent.call(void 0, setValueOnChange);
+    const onChange = _5QY4WCTRcjs.useEvent.call(void 0, (event) => {
+      _optionalChain([onChangeProp, 'optionalCall', _8 => _8(event)]);
+      if (event.defaultPrevented)
+        return;
+      const { target } = event;
+      const nativeEvent = event.nativeEvent;
+      valueChangedRef.current = true;
+      if (isInputEvent(nativeEvent) && inline) {
+        const textInserted = nativeEvent.inputType === "insertText";
+        const caretAtEnd = target.selectionStart === target.value.length;
+        setCanInline(textInserted && caretAtEnd);
+      }
+      if (showOnChangeProp(event)) {
+        store.show();
+      }
+      if (setValueOnChangeProp(event)) {
+        store.setValue(target.value);
+      }
+      if (inline && autoSelect) {
+        forceValueUpdate();
+      }
+      if (!autoSelect || !valueChangedRef.current) {
+        store.setActiveId(null);
+      }
+    });
+    const onCompositionEndProp = props.onCompositionEnd;
+    const onCompositionEnd = _5QY4WCTRcjs.useEvent.call(void 0, 
+      (event) => {
+        _optionalChain([onCompositionEndProp, 'optionalCall', _9 => _9(event)]);
+        if (event.defaultPrevented)
+          return;
+        valueChangedRef.current = true;
+        if (!autoSelect)
+          return;
+        forceValueUpdate();
+      }
+    );
+    const onMouseDownProp = props.onMouseDown;
+    const setValueOnClickProp = _5QY4WCTRcjs.useBooleanEvent.call(void 0, setValueOnClick);
+    const showOnMouseDownProp = _5QY4WCTRcjs.useBooleanEvent.call(void 0, showOnMouseDown);
+    const onMouseDown = _5QY4WCTRcjs.useEvent.call(void 0, (event) => {
+      _optionalChain([onMouseDownProp, 'optionalCall', _10 => _10(event)]);
+      if (event.defaultPrevented)
+        return;
+      if (event.button)
+        return;
+      if (event.ctrlKey)
+        return;
+      store.setActiveId(null);
+      if (setValueOnClickProp(event)) {
+        store.setValue(value);
+      }
+      if (showOnMouseDownProp(event)) {
+        _events.queueBeforeEvent.call(void 0, event.currentTarget, "mouseup", store.show);
+      }
+    });
+    const onKeyDownProp = props.onKeyDown;
+    const showOnKeyDownProp = _5QY4WCTRcjs.useBooleanEvent.call(void 0, showOnKeyDown);
+    const onKeyDown = _5QY4WCTRcjs.useEvent.call(void 0, 
+      (event) => {
+        _optionalChain([onKeyDownProp, 'optionalCall', _11 => _11(event)]);
+        if (event.defaultPrevented)
+          return;
+        valueChangedRef.current = false;
+        if (event.ctrlKey)
+          return;
+        if (event.altKey)
+          return;
+        if (event.shiftKey)
+          return;
+        if (event.metaKey)
+          return;
+        const { open: open2, activeId } = store.getState();
+        if (open2)
+          return;
+        if (activeId !== null)
+          return;
+        if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+          if (showOnKeyDownProp(event)) {
+            event.preventDefault();
+            store.show();
+          }
+        }
+      }
+    );
+    const onBlurProp = props.onBlur;
+    const onBlur = _5QY4WCTRcjs.useEvent.call(void 0, (event) => {
+      _optionalChain([onBlurProp, 'optionalCall', _12 => _12(event)]);
+      if (event.defaultPrevented)
+        return;
+      valueChangedRef.current = false;
+    });
+    const id = _5QY4WCTRcjs.useId.call(void 0, props.id);
+    props = {
+      id,
+      role: "combobox",
+      "aria-autocomplete": autoComplete,
+      "aria-haspopup": _dom.getPopupRole.call(void 0, contentElement, "listbox"),
+      "aria-expanded": open,
+      "aria-controls": _optionalChain([contentElement, 'optionalAccess', _13 => _13.id]),
+      value,
+      ...props,
+      ref: _5QY4WCTRcjs.useForkRef.call(void 0, ref, props.ref),
+      onChange,
+      onCompositionEnd,
+      onMouseDown,
+      onKeyDown,
+      onBlur
+    };
+    const moveOnKeyPressProp = _5QY4WCTRcjs.useBooleanEvent.call(void 0, moveOnKeyPress);
+    props = _GV5LATA3cjs.useComposite.call(void 0, {
+      store,
+      focusable,
+      ...props,
+      // Enable inline autocomplete when the user moves from the combobox input
+      // to an item.
+      moveOnKeyPress: (event) => {
+        if (!moveOnKeyPressProp(event))
+          return false;
+        if (inline)
+          setCanInline(true);
+        return true;
+      }
+    });
+    props = _BJTWNJAPcjs.usePopoverAnchor.call(void 0, { store, ...props });
+    return { autoComplete: "off", ...props };
+  }
+);
+var Combobox = _UYIFJ7U3cjs.createComponent.call(void 0, (props) => {
+  const htmlProps = useCombobox(props);
+  return _UYIFJ7U3cjs.createElement.call(void 0, "input", htmlProps);
+});
+if (process.env.NODE_ENV !== "production") {
+  Combobox.displayName = "Combobox";
+}
+
+
+
+exports.Combobox = Combobox; exports.useCombobox = useCombobox;