@ariakit/core 0.4.4 → 0.4.6

package/esm/tab/tab-store.js

@@ -1,10 +1,11 @@
 "use client";
 import {
   createCompositeStore
-} from "../__chunks/2H5K47H4.js";
+} from "../__chunks/PBSSD2DM.js";
 import {
   createCollectionStore
-} from "../__chunks/URUD7X4C.js";
+} from "../__chunks/EQPTKGFA.js";
+import "../__chunks/7PRQYBBV.js";
 import {
   batch,
   createStore,
@@ -14,10 +15,10 @@ import {
   sync
 } from "../__chunks/R676XYVY.js";
 import {
+  chain,
   defaultValue
 } from "../__chunks/22HHDS5F.js";
-import "../__chunks/RRSZHCH6.js";
-import "../__chunks/7PRQYBBV.js";
+import "../__chunks/I2NJJ3XW.js";
 import {
   __objRest,
   __spreadProps,
@@ -38,6 +39,8 @@ function createTabStore(_a = {}) {
     "renderedItems",
     "moves",
     "orientation",
+    "virtualFocus",
+    "includesBaseElement",
     "baseElement",
     "focusLoop",
     "focusShift",
@@ -50,6 +53,16 @@ function createTabStore(_a = {}) {
   );
   const syncState = store == null ? void 0 : store.getState();
   const composite = createCompositeStore(__spreadProps(__spreadValues({}, props), {
+    store,
+    // We need to explicitly set the default value of `includesBaseElement` to
+    // `false` since we don't want the composite store to default it to `true`
+    // when the activeId state is null, which could be the case when rendering
+    // combobox with tab.
+    includesBaseElement: defaultValue(
+      props.includesBaseElement,
+      syncState == null ? void 0 : syncState.includesBaseElement,
+      false
+    ),
     orientation: defaultValue(
       props.orientation,
       syncState == null ? void 0 : syncState.orientation,
@@ -62,8 +75,7 @@ function createTabStore(_a = {}) {
     selectedId: defaultValue(
       props.selectedId,
       syncState == null ? void 0 : syncState.selectedId,
-      props.defaultSelectedId,
-      void 0
+      props.defaultSelectedId
     ),
     selectOnMove: defaultValue(
       props.selectOnMove,
@@ -92,11 +104,11 @@ function createTabStore(_a = {}) {
   );
   setup(
     tab,
-    () => batch(
-      tab,
-      ["selectedId"],
-      (state) => tab.setState("activeId", state.selectedId)
-    )
+    () => batch(tab, ["selectedId"], (state, prev) => {
+      if (parentComposite && state.selectedId === prev.selectedId)
+        return;
+      tab.setState("activeId", state.selectedId);
+    })
   );
   setup(
     tab,
@@ -137,6 +149,27 @@ function createTabStore(_a = {}) {
       });
     })
   );
+  let selectedIdFromSelectedValue = null;
+  setup(tab, () => {
+    const backupSelectedId = () => {
+      selectedIdFromSelectedValue = tab.getState().selectedId;
+    };
+    const restoreSelectedId = () => {
+      tab.setState("selectedId", selectedIdFromSelectedValue);
+    };
+    if (parentComposite && "setSelectElement" in parentComposite) {
+      return chain(
+        sync(parentComposite, ["value"], backupSelectedId),
+        sync(parentComposite, ["open"], restoreSelectedId)
+      );
+    }
+    if (!combobox)
+      return;
+    return chain(
+      sync(combobox, ["selectedValue"], backupSelectedId),
+      sync(combobox, ["open"], restoreSelectedId)
+    );
+  });
   return __spreadProps(__spreadValues(__spreadValues({}, composite), tab), {
     panels,
     setSelectedId: (id) => tab.setState("selectedId", id),

package/esm/tag/tag-store.d.ts

@@ -0,0 +1,80 @@
+import type { CompositeStoreFunctions, CompositeStoreItem, CompositeStoreOptions, CompositeStoreState } from "../composite/composite-store.ts";
+import type { Store, StoreOptions, StoreProps } from "../utils/store.ts";
+import type { SetState } from "../utils/types.ts";
+/**
+ * Creates a tag store.
+ */
+export declare function createTagStore(props?: TagStoreProps): TagStore;
+export interface TagStoreItem extends CompositeStoreItem {
+    value?: string;
+}
+export interface TagStoreState extends CompositeStoreState<TagStoreItem> {
+    /**
+     * The input element.
+     */
+    inputElement: HTMLElement | null;
+    /**
+     * The label element.
+     */
+    labelElement: HTMLElement | null;
+    /**
+     * The value of the tag input.
+     * @default ""
+     */
+    value: string;
+    /**
+     * The values of the selected tags.
+     * @default []
+     */
+    values: string[];
+}
+export interface TagStoreFunctions extends CompositeStoreFunctions<TagStoreItem> {
+    /**
+     * Sets the `inputElement` state.
+     */
+    setInputElement: SetState<TagStoreState["inputElement"]>;
+    /**
+     * Sets the `labelElement` state.
+     */
+    setLabelElement: SetState<TagStoreState["labelElement"]>;
+    /**
+     * Sets the [`value`](https://ariakit.org/reference/tag-provider#value) state.
+     */
+    setValue: SetState<TagStoreState["value"]>;
+    /**
+     * Resets the [`value`](https://ariakit.org/reference/tag-provider#value)
+     * state to its initial value.
+     */
+    resetValue: () => void;
+    /**
+     * Sets the [`values`](https://ariakit.org/reference/tag-provider#values) state.
+     */
+    setValues: SetState<TagStoreState["values"]>;
+    /**
+     * Add a new value to the
+     * [`values`](https://ariakit.org/reference/tag-provider#values) state if it
+     * doesn't already exist.
+     */
+    addValue: (value: string) => void;
+    /**
+     * Remove a value from the
+     * [`values`](https://ariakit.org/reference/tag-provider#values) state.
+     */
+    removeValue: (value: string) => void;
+}
+export interface TagStoreOptions extends StoreOptions<TagStoreState, "value" | "values">, CompositeStoreOptions<TagStoreItem> {
+    /**
+     * The initial value of the tag input.
+     * @default ""
+     */
+    defaultValue?: TagStoreState["value"];
+    /**
+     * The initial selected tag values.
+     * @default []
+     */
+    defaultValues?: TagStoreState["values"];
+}
+export interface TagStoreProps extends TagStoreOptions, StoreProps<TagStoreState> {
+}
+export interface TagStore extends TagStoreFunctions, Store<TagStoreState> {
+}

package/esm/tag/tag-store.js

@@ -0,0 +1,90 @@
+"use client";
+import {
+  createCompositeStore
+} from "../__chunks/PBSSD2DM.js";
+import "../__chunks/EQPTKGFA.js";
+import "../__chunks/7PRQYBBV.js";
+import {
+  UndoManager
+} from "../__chunks/EKIWAN6A.js";
+import {
+  createStore,
+  setup,
+  sync
+} from "../__chunks/R676XYVY.js";
+import {
+  applyState,
+  defaultValue
+} from "../__chunks/22HHDS5F.js";
+import "../__chunks/I2NJJ3XW.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../__chunks/4R3V3JGP.js";
+
+// src/tag/tag-store.ts
+function createTagStore(props = {}) {
+  var _a;
+  const syncState = (_a = props.store) == null ? void 0 : _a.getState();
+  const composite = createCompositeStore(props);
+  const initialState = __spreadProps(__spreadValues({}, composite.getState()), {
+    inputElement: defaultValue(syncState == null ? void 0 : syncState.inputElement, null),
+    labelElement: defaultValue(syncState == null ? void 0 : syncState.labelElement, null),
+    value: defaultValue(props.value, syncState == null ? void 0 : syncState.value, props.defaultValue, ""),
+    values: defaultValue(
+      props.values,
+      syncState == null ? void 0 : syncState.values,
+      props.defaultValues,
+      []
+    )
+  });
+  const tag = createStore(initialState, composite, props.store);
+  setup(
+    tag,
+    () => sync(tag, ["inputElement", "activeId"], (state) => {
+      if (!state.inputElement)
+        return;
+      if (state.activeId !== void 0)
+        return;
+      tag.setState("activeId", state.inputElement.id);
+    })
+  );
+  const setValues = (values) => {
+    const { values: previousValues } = tag.getState();
+    UndoManager.execute(() => {
+      let changed = true;
+      tag.setState("values", (prev) => {
+        const next = applyState(values, prev);
+        if (next === prev) {
+          changed = false;
+        }
+        return next;
+      });
+      if (!changed)
+        return;
+      return () => {
+        var _a2;
+        tag.setState("values", previousValues);
+        composite.move((_a2 = tag.getState().inputElement) == null ? void 0 : _a2.id);
+      };
+    });
+  };
+  return __spreadProps(__spreadValues(__spreadValues({}, composite), tag), {
+    setInputElement: (inputElement) => tag.setState("inputElement", inputElement),
+    setLabelElement: (labelElement) => tag.setState("labelElement", labelElement),
+    setValue: (value) => tag.setState("value", value),
+    resetValue: () => tag.setState("value", initialState.value),
+    setValues,
+    addValue: (value) => {
+      setValues((values) => {
+        if (values.includes(value))
+          return values;
+        return [...values, value];
+      });
+    },
+    removeValue: (value) => setValues((values) => values.filter((v) => v !== value))
+  });
+}
+export {
+  createTagStore
+};

package/esm/toolbar/toolbar-store.d.ts

@@ -1,5 +1,5 @@
-import type { CompositeStoreFunctions, CompositeStoreOptions, CompositeStoreState } from "../composite/composite-store.js";
-import type { Store, StoreOptions, StoreProps } from "../utils/store.js";
+import type { CompositeStoreFunctions, CompositeStoreOptions, CompositeStoreState } from "../composite/composite-store.ts";
+import type { Store, StoreOptions, StoreProps } from "../utils/store.ts";
 /**
  * Creates a toolbar store.
  */

package/esm/toolbar/toolbar-store.js

@@ -1,14 +1,14 @@
 "use client";
 import {
   createCompositeStore
-} from "../__chunks/2H5K47H4.js";
-import "../__chunks/URUD7X4C.js";
+} from "../__chunks/PBSSD2DM.js";
+import "../__chunks/EQPTKGFA.js";
+import "../__chunks/7PRQYBBV.js";
 import "../__chunks/R676XYVY.js";
 import {
   defaultValue
 } from "../__chunks/22HHDS5F.js";
-import "../__chunks/RRSZHCH6.js";
-import "../__chunks/7PRQYBBV.js";
+import "../__chunks/I2NJJ3XW.js";
 import {
   __spreadProps,
   __spreadValues

package/esm/tooltip/tooltip-store.d.ts

@@ -1,5 +1,5 @@
-import type { HovercardStoreFunctions, HovercardStoreOptions, HovercardStoreState } from "../hovercard/hovercard-store.js";
-import type { Store, StoreOptions, StoreProps } from "../utils/store.js";
+import type { HovercardStoreFunctions, HovercardStoreOptions, HovercardStoreState } from "../hovercard/hovercard-store.ts";
+import type { Store, StoreOptions, StoreProps } from "../utils/store.ts";
 /**
  * Creates a tooltip store.
  */

package/esm/utils/dom.d.ts

@@ -1,4 +1,4 @@
-import type { AriaHasPopup, AriaRole } from "./types.js";
+import type { AriaHasPopup, AriaRole } from "./types.ts";
 /**
  * It's `true` if it is running in a browser environment or `false` if it is not
  * (SSR).
@@ -45,26 +45,10 @@ export declare function isButton(element: {
     tagName: string;
     type?: string;
 }): boolean;
-/**
- * Ponyfill for `Element.prototype.matches`
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
- */
-export declare function matches(element: Element, selectors: string): boolean;
 /**
  * Checks if the element is visible or not.
  */
 export declare function isVisible(element: Element): boolean;
-/**
- * Ponyfill for `Element.prototype.closest`
- * @example
- * closest(document.getElementById("id"), "div");
- * // same as
- * document.getElementById("id").closest("div");
- */
-export declare function closest<K extends keyof HTMLElementTagNameMap>(element: Element, selectors: K): HTMLElementTagNameMap[K];
-export declare function closest<K extends keyof SVGElementTagNameMap>(element: Element, selectors: K): SVGElementTagNameMap[K];
-export declare function closest<T extends Element = Element>(element: Element, selectors: string): T | null;
 /**
  * Check whether the given element is a text field, where text field is defined
  * by the ability to select within the input.
@@ -76,13 +60,14 @@ export declare function closest<T extends Element = Element>(element: Element, s
  */
 export declare function isTextField(element: Element): element is HTMLInputElement | HTMLTextAreaElement;
 /**
- * Returns the element's role attribute, if it has one.
+ * Check whether the given element is a text field or a content editable
+ * element.
  */
-export declare function getPopupRole(element?: Element | null, fallback?: AriaHasPopup): AriaHasPopup;
+export declare function isTextbox(element: HTMLElement): boolean;
 /**
- * Returns the item role attribute based on the popup's role.
+ * Returns the value of the text field or content editable element as a string.
  */
-export declare function getPopupItemRole(element?: Element | null, fallback?: AriaRole): string | undefined;
+export declare function getTextboxValue(element: HTMLElement): string;
 /**
  * Returns the start and end offsets of the selection in the element.
  */
@@ -90,6 +75,14 @@ export declare function getTextboxSelection(element: HTMLElement): {
     start: number;
     end: number;
 };
+/**
+ * Returns the element's role attribute, if it has one.
+ */
+export declare function getPopupRole(element?: Element | null, fallback?: AriaHasPopup): AriaHasPopup;
+/**
+ * Returns the item role attribute based on the popup's role.
+ */
+export declare function getPopupItemRole(element?: Element | null, fallback?: AriaRole): string | undefined;
 /**
  * Calls `element.scrollIntoView()` if the element is hidden or partly hidden in
  * the viewport.
@@ -112,4 +105,4 @@ export declare function isPartiallyHidden(element: Element): boolean;
  * @see
  * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
  */
-export declare function setSelectionRange(element: HTMLInputElement, ...args: Parameters<typeof HTMLInputElement.prototype.setSelectionRange>): void;
+export declare function setSelectionRange(element: HTMLInputElement | HTMLTextAreaElement, ...args: Parameters<typeof HTMLInputElement.prototype.setSelectionRange>): void;

package/esm/utils/dom.js

@@ -1,7 +1,6 @@
 "use client";
 import {
   canUseDOM,
-  closest,
   contains,
   getActiveElement,
   getDocument,
@@ -9,20 +8,20 @@ import {
   getPopupRole,
   getScrollingElement,
   getTextboxSelection,
+  getTextboxValue,
   getWindow,
   isButton,
   isFrame,
   isPartiallyHidden,
   isTextField,
+  isTextbox,
   isVisible,
-  matches,
   scrollIntoViewIfNeeded,
   setSelectionRange
-} from "../__chunks/RRSZHCH6.js";
+} from "../__chunks/I2NJJ3XW.js";
 import "../__chunks/4R3V3JGP.js";
 export {
   canUseDOM,
-  closest,
   contains,
   getActiveElement,
   getDocument,
@@ -30,13 +29,14 @@ export {
   getPopupRole,
   getScrollingElement,
   getTextboxSelection,
+  getTextboxValue,
   getWindow,
   isButton,
   isFrame,
   isPartiallyHidden,
   isTextField,
+  isTextbox,
   isVisible,
-  matches,
   scrollIntoViewIfNeeded,
   setSelectionRange
 };

package/esm/utils/events.d.ts

@@ -62,9 +62,15 @@ export declare function fireClickEvent(element: Element, eventInit?: PointerEven
  * });
  */
 export declare function isFocusEventOutside(event: Pick<FocusEvent, "currentTarget" | "relatedTarget">, container?: Element | null): boolean;
+/**
+ * Returns the `inputType` property of the event, if available.
+ */
+export declare function getInputType(event: Event | {
+    nativeEvent: Event;
+}): string | undefined;
 /**
  * Runs a callback on the next animation frame, but before a certain event.
  */
-export declare function queueBeforeEvent(element: Element, type: string, callback: () => void): number;
+export declare function queueBeforeEvent(element: Element, type: string, callback: () => void, timeout?: number): () => void;
 export declare function addGlobalEventListener<K extends keyof DocumentEventMap>(type: K, listener: (event: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions, scope?: Window): () => void;
 export declare function addGlobalEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions, scope?: Window): () => void;

package/esm/utils/events.js

@@ -1,10 +1,10 @@
 "use client";
 import {
   isApple
-} from "../__chunks/VDNATJW2.js";
+} from "../__chunks/CLSHHUGK.js";
 import {
   contains
-} from "../__chunks/RRSZHCH6.js";
+} from "../__chunks/I2NJJ3XW.js";
 import {
   __spreadProps,
   __spreadValues
@@ -83,20 +83,35 @@ function isFocusEventOutside(event, container) {
   const relatedTarget = event.relatedTarget;
   return !relatedTarget || !contains(containerElement, relatedTarget);
 }
-function queueBeforeEvent(element, type, callback) {
-  const raf = requestAnimationFrame(() => {
-    element.removeEventListener(type, callImmediately, true);
+function getInputType(event) {
+  const nativeEvent = "nativeEvent" in event ? event.nativeEvent : event;
+  if (!nativeEvent)
+    return;
+  if (!("inputType" in nativeEvent))
+    return;
+  if (typeof nativeEvent.inputType !== "string")
+    return;
+  return nativeEvent.inputType;
+}
+function queueBeforeEvent(element, type, callback, timeout) {
+  const createTimer = (callback2) => {
+    if (timeout) {
+      const timerId2 = setTimeout(callback2, timeout);
+      return () => clearTimeout(timerId2);
+    }
+    const timerId = requestAnimationFrame(callback2);
+    return () => cancelAnimationFrame(timerId);
+  };
+  const cancelTimer = createTimer(() => {
+    element.removeEventListener(type, callSync, true);
     callback();
   });
-  const callImmediately = () => {
-    cancelAnimationFrame(raf);
+  const callSync = () => {
+    cancelTimer();
     callback();
   };
-  element.addEventListener(type, callImmediately, {
-    once: true,
-    capture: true
-  });
-  return raf;
+  element.addEventListener(type, callSync, { once: true, capture: true });
+  return cancelTimer;
 }
 function addGlobalEventListener(type, listener, options, scope = window) {
   const children = [];
@@ -123,6 +138,7 @@ export {
   fireEvent,
   fireFocusEvent,
   fireKeyboardEvent,
+  getInputType,
   isDownloading,
   isFocusEventOutside,
   isOpeningInNewTab,

package/esm/utils/focus.d.ts

@@ -6,7 +6,7 @@
  * isFocusable(document.querySelector("input[hidden]")); // false
  * isFocusable(document.querySelector("input:disabled")); // false
  */
-export declare function isFocusable(element: Element): element is HTMLElement;
+export declare function isFocusable(element: Element): boolean;
 /**
  * Checks whether `element` is tabbable or not.
  * @example

package/esm/utils/focus.js

@@ -1,12 +1,10 @@
 "use client";
 import {
-  closest,
   contains,
   getActiveElement,
   isFrame,
-  isVisible,
-  matches
-} from "../__chunks/RRSZHCH6.js";
+  isVisible
+} from "../__chunks/I2NJJ3XW.js";
 import {
   __spreadValues
 } from "../__chunks/4R3V3JGP.js";
@@ -18,11 +16,11 @@ function hasNegativeTabIndex(element) {
   return tabIndex < 0;
 }
 function isFocusable(element) {
-  if (!matches(element, selector))
+  if (!element.matches(selector))
     return false;
   if (!isVisible(element))
     return false;
-  if (closest(element, "[inert]"))
+  if (element.closest("[inert]"))
     return false;
   return true;
 }
@@ -164,7 +162,7 @@ function getPreviousTabbable(fallbackToFirst, fallbackToFocusable) {
 }
 function getClosestFocusable(element) {
   while (element && !isFocusable(element)) {
-    element = closest(element, selector);
+    element = element.closest(selector);
   }
   return element || null;
 }

package/esm/utils/misc.d.ts

@@ -1,4 +1,4 @@
-import type { AnyFunction, AnyObject, SetStateAction } from "./types.js";
+import type { AnyFunction, AnyObject, SetStateAction } from "./types.ts";
 /**
  * Empty function.
  */

package/esm/utils/platform.js

@@ -5,8 +5,8 @@ import {
   isMac,
   isSafari,
   isTouchDevice
-} from "../__chunks/VDNATJW2.js";
-import "../__chunks/RRSZHCH6.js";
+} from "../__chunks/CLSHHUGK.js";
+import "../__chunks/I2NJJ3XW.js";
 import "../__chunks/4R3V3JGP.js";
 export {
   isApple,

package/esm/utils/store.d.ts

@@ -1,4 +1,4 @@
-import type { AnyObject, SetStateAction } from "./types.js";
+import type { AnyObject, SetStateAction } from "./types.ts";
 type Listener<S> = (state: S, prevState: S) => void | (() => void);
 type Sync<S, K extends keyof S> = (keys: K[] | null, listener: Listener<Pick<S, K>>) => () => void;
 type StoreSetup = (callback: () => void | (() => void)) => () => void;
@@ -43,7 +43,7 @@ export type StoreOptions<S extends State, K extends keyof S> = Partial<Pick<S, K
  * Props that can be passed to a store creator function.
  * @template S State type.
  */
-export type StoreProps<S extends State = State> = {
+export interface StoreProps<S extends State = State> {
     /**
      * Another store object that will be kept in sync with the original store.
      *
@@ -51,7 +51,7 @@ export type StoreProps<S extends State = State> = {
      * - [Navigation Menubar](https://ariakit.org/examples/menubar-navigation)
      */
     store?: Store<Partial<S>>;
-};
+}
 /**
  * Extracts the state type from a store type.
  * @template T Store type.

package/esm/utils/undo.d.ts

@@ -0,0 +1,19 @@
+type Callback = void | (() => Callback | Promise<Callback>);
+interface CreateUndoManagerOptions {
+    limit?: number;
+}
+export declare const UndoManager: {
+    canUndo: () => boolean;
+    canRedo: () => boolean;
+    undo: () => Promise<void>;
+    redo: () => Promise<void>;
+    execute: (callback: Callback, group?: string) => Promise<void>;
+};
+export declare function createUndoManager({ limit, }?: CreateUndoManagerOptions): {
+    canUndo: () => boolean;
+    canRedo: () => boolean;
+    undo: () => Promise<void>;
+    redo: () => Promise<void>;
+    execute: (callback: Callback, group?: string) => Promise<void>;
+};
+export {};

package/esm/utils/undo.js

@@ -0,0 +1,10 @@
+"use client";
+import {
+  UndoManager,
+  createUndoManager
+} from "../__chunks/EKIWAN6A.js";
+import "../__chunks/4R3V3JGP.js";
+export {
+  UndoManager,
+  createUndoManager
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ariakit/core",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "description": "Ariakit core",
   "sideEffects": false,
   "license": "MIT",
@@ -36,6 +36,13 @@
         "default": "./cjs/index.cjs"
       }
     },
+    "./utils/undo": {
+      "import": "./esm/utils/undo.js",
+      "require": {
+        "types": "./cjs/utils/undo.d.cts",
+        "default": "./cjs/utils/undo.cjs"
+      }
+    },
     "./utils/types": {
       "import": "./esm/utils/types.js",
       "require": {
@@ -106,6 +113,13 @@
         "default": "./cjs/toolbar/toolbar-store.cjs"
       }
     },
+    "./tag/tag-store": {
+      "import": "./esm/tag/tag-store.js",
+      "require": {
+        "types": "./cjs/tag/tag-store.d.cts",
+        "default": "./cjs/tag/tag-store.cjs"
+      }
+    },
     "./tab/tab-store": {
       "import": "./esm/tab/tab-store.js",
       "require": {