@ariakit/core - npm Package Compare versions

Comparing version 0.4.1 to 0.4.2

CHANGELOG.md

 # @ariakit/core
 
+## 0.4.2
+
+- Fixed [`Focusable`](https://ariakit.org/reference/focusable) to identify `summary` as a native tabbable element.
+- Added new [`composite`](https://ariakit.org/reference/tab-provider#composite) property to tab store.
+- Improved JSDocs.
+
 ## 0.4.1
@@ -4,0 +10,0 @@

cjs/collection/collection-store.d.ts

@@ -55,2 +55,5 @@ import type { Store, StoreOptions, StoreProps } from "../utils/store.js";
      * Gets an item by its id.
+     *
+     * Live examples:
+     * - [Animated TabPanel](https://ariakit.org/examples/tab-panel-animated)
      * @example
@@ -57,0 +60,0 @@ * const item = store.item("item-1");

cjs/composite/composite-store.d.ts

@@ -162,3 +162,2 @@ import type { CollectionStoreFunctions, CollectionStoreItem, CollectionStoreOptions, CollectionStoreState } from "../collection/collection-store.js";
      *   Combobox](https://ariakit.org/examples/menu-nested-combobox)
-     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      * - [Command Menu](https://ariakit.org/examples/dialog-combobox-command-menu)
@@ -198,5 +197,2 @@ * @default false
      * instead.
-     *
-     * Live examples:
-     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      * @example
@@ -235,5 +231,2 @@ * // Sets the composite element as the active item
      * state.
-     *
-     * Live examples:
-     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      * @example
@@ -248,5 +241,2 @@ * const nextId = store.next();
      * state.
-     *
-     * Live examples:
-     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      * @example
@@ -277,5 +267,2 @@ * const previousId = store.previous();
      * Returns the id of the first enabled item.
-     *
-     * Live examples:
-     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      */
@@ -285,5 +272,2 @@ first: () => string | null | undefined;
      * Returns the id of the last enabled item.
-     *
-     * Live examples:
-     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      */
@@ -290,0 +274,0 @@ last: () => string | null | undefined;

cjs/select/select-store.d.ts

@@ -32,2 +32,4 @@ import type { ComboboxStore } from "../combobox/combobox-store.js";
      * - [Toolbar with Select](https://ariakit.org/examples/toolbar-select)
+     * - [Select with Next.js App
+     *   Router](https://ariakit.org/examples/select-next-router)
      */
@@ -94,2 +96,4 @@ value: MutableValue<T>;
      * - [SelectGroup](https://ariakit.org/examples/select-group)
+     * - [Select with Next.js App
+     *   Router](https://ariakit.org/examples/select-next-router)
      */
@@ -96,0 +100,0 @@ defaultValue?: SelectStoreState<T>["value"];

cjs/tab/tab-store.d.ts

 import type { CollectionStore, CollectionStoreItem } from "../collection/collection-store.js";
-import type { CompositeStoreFunctions, CompositeStoreItem, CompositeStoreOptions, CompositeStoreState } from "../composite/composite-store.js";
+import type { CompositeStore, CompositeStoreFunctions, CompositeStoreItem, CompositeStoreOptions, CompositeStoreState } from "../composite/composite-store.js";
 import type { Store, StoreOptions, StoreProps } from "../utils/store.js";
 import type { SetState } from "../utils/types.js";
-export declare function createTabStore(props?: TabStoreProps): TabStore;
+export declare function createTabStore({ composite: parentComposite, ...props }?: TabStoreProps): TabStore;
 export interface TabStoreItem extends CompositeStoreItem {
@@ -57,2 +57,5 @@ dimmed?: boolean;
      * A collection store containing the tab panels.
+     *
+     * Live examples:
+     * - [Animated TabPanel](https://ariakit.org/examples/tab-panel-animated)
      */
@@ -66,5 +69,2 @@ panels: CollectionStore<TabStorePanel>;
      * function instead.
-     *
-     * Live examples:
-     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      * @example
@@ -82,2 +82,11 @@ * // Selects the tab with id "tab-1"
     /**
+     * A reference to another [composite
+     * store](https://ariakit.org/reference/composite-store). This is used when
+     * rendering tabs as part of another composite widget such as
+     * [Combobox](https://ariakit.org/components/combobox) or
+     * [Select](https://ariakit.org/components/select). The stores will share the
+     * same state.
+     */
+    composite?: CompositeStore | null;
+    /**
      * The id of the tab whose panel is currently visible. If it's `undefined`, it
@@ -88,2 +97,3 @@ * will be automatically set to the first enabled tab.
      * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
+     * - [Animated TabPanel](https://ariakit.org/examples/tab-panel-animated)
      */
@@ -90,0 +100,0 @@ defaultSelectedId?: TabStoreState["selectedId"];

cjs/utils/dom.d.ts

@@ -107,9 +107,10 @@ import type { AriaHasPopup, AriaRole } from "./types.js";
 /**
- * SelectionRange only works on a few types of input.
- * Calling `setSelectionRange` on a unsupported input type may throw an error on certain browsers.
- * To avoid it, we check if its type supports SelectionRange first.
- * It will be a noop to non-supported types until we find a workaround.
+ * SelectionRange only works on a few types of input. Calling
+ * `setSelectionRange` on a unsupported input type may throw an error on certain
+ * browsers. To avoid it, we check if its type supports SelectionRange first. It
+ * will be a noop to non-supported types until we find a workaround.
  *
- * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
+ * @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;

esm/collection/collection-store.d.ts

@@ -55,2 +55,5 @@ import type { Store, StoreOptions, StoreProps } from "../utils/store.js";
      * Gets an item by its id.
+     *
+     * Live examples:
+     * - [Animated TabPanel](https://ariakit.org/examples/tab-panel-animated)
      * @example
@@ -57,0 +60,0 @@ * const item = store.item("item-1");

esm/composite/composite-store.d.ts

@@ -162,3 +162,2 @@ import type { CollectionStoreFunctions, CollectionStoreItem, CollectionStoreOptions, CollectionStoreState } from "../collection/collection-store.js";
      *   Combobox](https://ariakit.org/examples/menu-nested-combobox)
-     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      * - [Command Menu](https://ariakit.org/examples/dialog-combobox-command-menu)
@@ -198,5 +197,2 @@ * @default false
      * instead.
-     *
-     * Live examples:
-     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      * @example
@@ -235,5 +231,2 @@ * // Sets the composite element as the active item
      * state.
-     *
-     * Live examples:
-     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      * @example
@@ -248,5 +241,2 @@ * const nextId = store.next();
      * state.
-     *
-     * Live examples:
-     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      * @example
@@ -277,5 +267,2 @@ * const previousId = store.previous();
      * Returns the id of the first enabled item.
-     *
-     * Live examples:
-     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      */
@@ -285,5 +272,2 @@ first: () => string | null | undefined;
      * Returns the id of the last enabled item.
-     *
-     * Live examples:
-     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      */
@@ -290,0 +274,0 @@ last: () => string | null | undefined;

esm/select/select-store.d.ts

@@ -32,2 +32,4 @@ import type { ComboboxStore } from "../combobox/combobox-store.js";
      * - [Toolbar with Select](https://ariakit.org/examples/toolbar-select)
+     * - [Select with Next.js App
+     *   Router](https://ariakit.org/examples/select-next-router)
      */
@@ -94,2 +96,4 @@ value: MutableValue<T>;
      * - [SelectGroup](https://ariakit.org/examples/select-group)
+     * - [Select with Next.js App
+     *   Router](https://ariakit.org/examples/select-next-router)
      */
@@ -96,0 +100,0 @@ defaultValue?: SelectStoreState<T>["value"];

esm/tab/tab-store.d.ts

 import type { CollectionStore, CollectionStoreItem } from "../collection/collection-store.js";
-import type { CompositeStoreFunctions, CompositeStoreItem, CompositeStoreOptions, CompositeStoreState } from "../composite/composite-store.js";
+import type { CompositeStore, CompositeStoreFunctions, CompositeStoreItem, CompositeStoreOptions, CompositeStoreState } from "../composite/composite-store.js";
 import type { Store, StoreOptions, StoreProps } from "../utils/store.js";
 import type { SetState } from "../utils/types.js";
-export declare function createTabStore(props?: TabStoreProps): TabStore;
+export declare function createTabStore({ composite: parentComposite, ...props }?: TabStoreProps): TabStore;
 export interface TabStoreItem extends CompositeStoreItem {
@@ -57,2 +57,5 @@ dimmed?: boolean;
      * A collection store containing the tab panels.
+     *
+     * Live examples:
+     * - [Animated TabPanel](https://ariakit.org/examples/tab-panel-animated)
      */
@@ -66,5 +69,2 @@ panels: CollectionStore<TabStorePanel>;
      * function instead.
-     *
-     * Live examples:
-     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      * @example
@@ -82,2 +82,11 @@ * // Selects the tab with id "tab-1"
     /**
+     * A reference to another [composite
+     * store](https://ariakit.org/reference/composite-store). This is used when
+     * rendering tabs as part of another composite widget such as
+     * [Combobox](https://ariakit.org/components/combobox) or
+     * [Select](https://ariakit.org/components/select). The stores will share the
+     * same state.
+     */
+    composite?: CompositeStore | null;
+    /**
      * The id of the tab whose panel is currently visible. If it's `undefined`, it
@@ -88,2 +97,3 @@ * will be automatically set to the first enabled tab.
      * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
+     * - [Animated TabPanel](https://ariakit.org/examples/tab-panel-animated)
      */
@@ -90,0 +100,0 @@ defaultSelectedId?: TabStoreState["selectedId"];

esm/tab/tab-store.js

@@ -11,2 +11,4 @@ "use client";
   createStore,
+  mergeStore,
+  omit,
   setup,
@@ -21,2 +23,3 @@ sync
 import {
+  __objRest,
   __spreadProps,
@@ -27,5 +30,22 @@ __spreadValues
 // src/tab/tab-store.ts
-function createTabStore(props = {}) {
-  var _a;
-  const syncState = (_a = props.store) == null ? void 0 : _a.getState();
+function createTabStore(_a = {}) {
+  var _b = _a, {
+    composite: parentComposite
+  } = _b, props = __objRest(_b, [
+    "composite"
+  ]);
+  const store = mergeStore(
+    props.store,
+    omit(parentComposite, [
+      "items",
+      "renderedItems",
+      "moves",
+      "orientation",
+      "baseElement",
+      "focusLoop",
+      "focusShift",
+      "focusWrap"
+    ])
+  );
+  const syncState = store == null ? void 0 : store.getState();
   const composite = createCompositeStore(__spreadProps(__spreadValues({}, props), {
@@ -53,3 +73,3 @@ orientation: defaultValue(
   });
-  const tab = createStore(initialState, composite, props.store);
+  const tab = createStore(initialState, composite, store);
   setup(
@@ -56,0 +76,0 @@ tab,

esm/utils/dom.d.ts

@@ -107,9 +107,10 @@ import type { AriaHasPopup, AriaRole } from "./types.js";
 /**
- * SelectionRange only works on a few types of input.
- * Calling `setSelectionRange` on a unsupported input type may throw an error on certain browsers.
- * To avoid it, we check if its type supports SelectionRange first.
- * It will be a noop to non-supported types until we find a workaround.
+ * SelectionRange only works on a few types of input. Calling
+ * `setSelectionRange` on a unsupported input type may throw an error on certain
+ * browsers. To avoid it, we check if its type supports SelectionRange first. It
+ * will be a noop to non-supported types until we find a workaround.
  *
- * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
+ * @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;

esm/utils/focus.js

@@ -15,3 +15,3 @@ "use client";
 // src/utils/focus.ts
-var selector = "input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], button:not([disabled]), [tabindex], iframe, object, embed, area[href], audio[controls], video[controls], [contenteditable]:not([contenteditable='false'])";
+var selector = "input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], button:not([disabled]), [tabindex], summary, iframe, object, embed, area[href], audio[controls], video[controls], [contenteditable]:not([contenteditable='false'])";
 function hasNegativeTabIndex(element) {
@@ -18,0 +18,0 @@ const tabIndex = parseInt(element.getAttribute("tabindex") || "0", 10);

package.json

 {
   "name": "@ariakit/core",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Ariakit core",
@@ -5,0 +5,0 @@ "sideEffects": false,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

500166

increased by0.36%

Lines of code

10144

increased by0.41%

No dependency changes