@ariakit/core - npm Package Compare versions

Comparing version 0.4.10 to 0.4.11

CHANGELOG.md

 # @ariakit/core
 
+## 0.4.11
+
+### Overriding composite state for specific methods
+
+The [`next`](https://ariakit.org/reference/use-composite-store#next), [`previous`](https://ariakit.org/reference/use-composite-store#previous), [`up`](https://ariakit.org/reference/use-composite-store#up), and [`down`](https://ariakit.org/reference/use-composite-store#down) methods of the [composite store](https://ariakit.org/reference/use-composite-store) now accept an object as the first argument to override the composite state for that specific method. For example, you can pass a different [`activeId`](https://ariakit.org/reference/use-composite-store#activeId) value to the [`next`](https://ariakit.org/reference/use-composite-store#next) method so it returns the next item based on that value rather than the current active item in the composite store:
+
+```js
+const store = useCompositeStore({ defaultActiveId: "item1" });
+const item3 = store.next({ activeId: "item2" });
+```
+
+It's important to note that the composite state is not modified when using this feature. The state passed to these methods is used solely for that specific method call.
+
+### Other updates
+
+- Fixed CJS build on Next.js.
+- Fixed `getScrollingElement` to consider `overflow: clip`.
+- Improved JSDocs.
+
 ## 0.4.10
@@ -4,0 +23,0 @@

cjs/composite/composite-store.d.ts

@@ -5,2 +5,8 @@ import type { CollectionStoreFunctions, CollectionStoreItem, CollectionStoreOptions, CollectionStoreState } from "../collection/collection-store.ts";
 type Orientation = "horizontal" | "vertical" | "both";
+interface NextOptions extends Pick<Partial<CompositeStoreState>, "activeId" | "focusShift" | "focusLoop" | "focusWrap" | "includesBaseElement" | "renderedItems" | "rtl"> {
+    /**
+     * The number of items to skip.
+     */
+    skip?: number;
+}
 /**
@@ -233,36 +239,48 @@ * Creates a composite store.
      * [`activeId`](https://ariakit.org/reference/composite-provider#activeid)
-     * state.
+     * state. You can pass additional options to override the current state.
      * @example
      * const nextId = store.next();
-     * const nextNextId = store.next(2);
      */
-    next: (skip?: number) => string | null | undefined;
+    next(options?: NextOptions): string | null | undefined;
     /**
+     * @deprecated Use the object syntax instead: `next({ skip: 2 })`.
+     */
+    next(skip?: number): string | null | undefined;
+    /**
      * Returns the id of the previous enabled item based on the current
      * [`activeId`](https://ariakit.org/reference/composite-provider#activeid)
-     * state.
+     * state. You can pass additional options to override the current state.
      * @example
      * const previousId = store.previous();
-     * const previousPreviousId = store.previous(2);
      */
-    previous: (skip?: number) => string | null | undefined;
+    previous(options?: NextOptions): string | null | undefined;
     /**
+     * @deprecated Use the object syntax instead: `previous({ skip: 2 })`.
+     */
+    previous(skip?: number): string | null | undefined;
+    /**
      * Returns the id of the enabled item above based on the current
      * [`activeId`](https://ariakit.org/reference/composite-provider#activeid)
-     * state.
+     * state. You can pass additional options to override the current state.
      * @example
      * const upId = store.up();
-     * const upUpId = store.up(2);
      */
-    up: (skip?: number) => string | null | undefined;
+    up(options?: NextOptions): string | null | undefined;
     /**
+     * @deprecated Use the object syntax instead: `up({ skip: 2 })`.
+     */
+    up(skip?: number): string | null | undefined;
+    /**
      * Returns the id of the enabled item below based on the current
      * [`activeId`](https://ariakit.org/reference/composite-provider#activeid)
-     * state.
+     * state. You can pass additional options to override the current state.
      * @example
      * const downId = store.down();
-     * const downDownId = store.down(2);
      */
-    down: (skip?: number) => string | null | undefined;
+    down(options?: NextOptions): string | null | undefined;
     /**
+     * @deprecated Use the object syntax instead: `down({ skip: 2 })`.
+     */
+    down(skip?: number): string | null | undefined;
+    /**
      * Returns the id of the first enabled item.
@@ -269,0 +287,0 @@ */

esm/collection/collection-store.js

 "use client";
 import {
   createCollectionStore
-} from "../__chunks/6DHTHWXD.js";
+} from "../__chunks/7DTP4AQO.js";
 import "../__chunks/EQQLU3CG.js";
 import "../__chunks/PBFD2E7P.js";
-import "../__chunks/HWOIWM4O.js";
+import "../__chunks/PQP5VPTV.js";
 import "../__chunks/3YLGPPWQ.js";
@@ -9,0 +9,0 @@ export {

esm/combobox/combobox-store.js

 "use client";
 import {
   createCompositeStore
-} from "../__chunks/D7EIQZAU.js";
-import "../__chunks/6DHTHWXD.js";
+} from "../__chunks/7IJEP35G.js";
+import "../__chunks/7DTP4AQO.js";
 import "../__chunks/7PRQYBBV.js";
@@ -28,4 +28,4 @@ import {
   isTouchDevice
-} from "../__chunks/US4USQPI.js";
-import "../__chunks/HWOIWM4O.js";
+} from "../__chunks/3VBK76MS.js";
+import "../__chunks/PQP5VPTV.js";
 import {
@@ -32,0 +32,0 @@ __objRest,

esm/composite/composite-store.d.ts

@@ -5,2 +5,8 @@ import type { CollectionStoreFunctions, CollectionStoreItem, CollectionStoreOptions, CollectionStoreState } from "../collection/collection-store.ts";
 type Orientation = "horizontal" | "vertical" | "both";
+interface NextOptions extends Pick<Partial<CompositeStoreState>, "activeId" | "focusShift" | "focusLoop" | "focusWrap" | "includesBaseElement" | "renderedItems" | "rtl"> {
+    /**
+     * The number of items to skip.
+     */
+    skip?: number;
+}
 /**
@@ -233,36 +239,48 @@ * Creates a composite store.
      * [`activeId`](https://ariakit.org/reference/composite-provider#activeid)
-     * state.
+     * state. You can pass additional options to override the current state.
      * @example
      * const nextId = store.next();
-     * const nextNextId = store.next(2);
      */
-    next: (skip?: number) => string | null | undefined;
+    next(options?: NextOptions): string | null | undefined;
     /**
+     * @deprecated Use the object syntax instead: `next({ skip: 2 })`.
+     */
+    next(skip?: number): string | null | undefined;
+    /**
      * Returns the id of the previous enabled item based on the current
      * [`activeId`](https://ariakit.org/reference/composite-provider#activeid)
-     * state.
+     * state. You can pass additional options to override the current state.
      * @example
      * const previousId = store.previous();
-     * const previousPreviousId = store.previous(2);
      */
-    previous: (skip?: number) => string | null | undefined;
+    previous(options?: NextOptions): string | null | undefined;
     /**
+     * @deprecated Use the object syntax instead: `previous({ skip: 2 })`.
+     */
+    previous(skip?: number): string | null | undefined;
+    /**
      * Returns the id of the enabled item above based on the current
      * [`activeId`](https://ariakit.org/reference/composite-provider#activeid)
-     * state.
+     * state. You can pass additional options to override the current state.
      * @example
      * const upId = store.up();
-     * const upUpId = store.up(2);
      */
-    up: (skip?: number) => string | null | undefined;
+    up(options?: NextOptions): string | null | undefined;
     /**
+     * @deprecated Use the object syntax instead: `up({ skip: 2 })`.
+     */
+    up(skip?: number): string | null | undefined;
+    /**
      * Returns the id of the enabled item below based on the current
      * [`activeId`](https://ariakit.org/reference/composite-provider#activeid)
-     * state.
+     * state. You can pass additional options to override the current state.
      * @example
      * const downId = store.down();
-     * const downDownId = store.down(2);
      */
-    down: (skip?: number) => string | null | undefined;
+    down(options?: NextOptions): string | null | undefined;
     /**
+     * @deprecated Use the object syntax instead: `down({ skip: 2 })`.
+     */
+    down(skip?: number): string | null | undefined;
+    /**
      * Returns the id of the first enabled item.
@@ -269,0 +287,0 @@ */

esm/composite/composite-store.js

 "use client";
 import {
   createCompositeStore
-} from "../__chunks/D7EIQZAU.js";
-import "../__chunks/6DHTHWXD.js";
+} from "../__chunks/7IJEP35G.js";
+import "../__chunks/7DTP4AQO.js";
 import "../__chunks/7PRQYBBV.js";
 import "../__chunks/EQQLU3CG.js";
 import "../__chunks/PBFD2E7P.js";
-import "../__chunks/HWOIWM4O.js";
+import "../__chunks/PQP5VPTV.js";
 import "../__chunks/3YLGPPWQ.js";
@@ -11,0 +11,0 @@ export {

esm/form/form-store.js

 "use client";
 import {
   createCollectionStore
-} from "../__chunks/6DHTHWXD.js";
+} from "../__chunks/7DTP4AQO.js";
 import {
@@ -17,3 +17,3 @@ createStore,
 } from "../__chunks/PBFD2E7P.js";
-import "../__chunks/HWOIWM4O.js";
+import "../__chunks/PQP5VPTV.js";
 import {
@@ -20,0 +20,0 @@ __spreadProps,

esm/menu/menu-bar-store.js

 "use client";
 import {
   createMenubarStore
-} from "../__chunks/PIWLWQMB.js";
-import "../__chunks/D7EIQZAU.js";
-import "../__chunks/6DHTHWXD.js";
+} from "../__chunks/YKFX5MNB.js";
+import "../__chunks/7IJEP35G.js";
+import "../__chunks/7DTP4AQO.js";
 import "../__chunks/7PRQYBBV.js";
 import "../__chunks/EQQLU3CG.js";
 import "../__chunks/PBFD2E7P.js";
-import "../__chunks/HWOIWM4O.js";
+import "../__chunks/PQP5VPTV.js";
 import "../__chunks/3YLGPPWQ.js";
@@ -12,0 +12,0 @@

esm/menu/menu-store.js

@@ -7,4 +7,4 @@ "use client";
   createCompositeStore
-} from "../__chunks/D7EIQZAU.js";
-import "../__chunks/6DHTHWXD.js";
+} from "../__chunks/7IJEP35G.js";
+import "../__chunks/7DTP4AQO.js";
 import "../__chunks/7PRQYBBV.js";
@@ -27,3 +27,3 @@ import "../__chunks/3UYWTADI.js";
 } from "../__chunks/PBFD2E7P.js";
-import "../__chunks/HWOIWM4O.js";
+import "../__chunks/PQP5VPTV.js";
 import {
@@ -30,0 +30,0 @@ __objRest,

esm/menubar/menubar-store.js

 "use client";
 import {
   createMenubarStore
-} from "../__chunks/PIWLWQMB.js";
-import "../__chunks/D7EIQZAU.js";
-import "../__chunks/6DHTHWXD.js";
+} from "../__chunks/YKFX5MNB.js";
+import "../__chunks/7IJEP35G.js";
+import "../__chunks/7DTP4AQO.js";
 import "../__chunks/7PRQYBBV.js";
 import "../__chunks/EQQLU3CG.js";
 import "../__chunks/PBFD2E7P.js";
-import "../__chunks/HWOIWM4O.js";
+import "../__chunks/PQP5VPTV.js";
 import "../__chunks/3YLGPPWQ.js";
@@ -12,0 +12,0 @@ export {

esm/radio/radio-store.js

 "use client";
 import {
   createCompositeStore
-} from "../__chunks/D7EIQZAU.js";
-import "../__chunks/6DHTHWXD.js";
+} from "../__chunks/7IJEP35G.js";
+import "../__chunks/7DTP4AQO.js";
 import "../__chunks/7PRQYBBV.js";
@@ -13,3 +13,3 @@ import {
 } from "../__chunks/PBFD2E7P.js";
-import "../__chunks/HWOIWM4O.js";
+import "../__chunks/PQP5VPTV.js";
 import {
@@ -16,0 +16,0 @@ __objRest,

esm/select/select-store.js

 "use client";
 import {
   createCompositeStore
-} from "../__chunks/D7EIQZAU.js";
-import "../__chunks/6DHTHWXD.js";
+} from "../__chunks/7IJEP35G.js";
+import "../__chunks/7DTP4AQO.js";
 import {
@@ -26,3 +26,3 @@ toArray
 } from "../__chunks/PBFD2E7P.js";
-import "../__chunks/HWOIWM4O.js";
+import "../__chunks/PQP5VPTV.js";
 import {
@@ -29,0 +29,0 @@ __objRest,

esm/tab/tab-store.js

 "use client";
 import {
   createCompositeStore
-} from "../__chunks/D7EIQZAU.js";
+} from "../__chunks/7IJEP35G.js";
 import {
   createCollectionStore
-} from "../__chunks/6DHTHWXD.js";
+} from "../__chunks/7DTP4AQO.js";
 import "../__chunks/7PRQYBBV.js";
@@ -21,3 +21,3 @@ import {
 } from "../__chunks/PBFD2E7P.js";
-import "../__chunks/HWOIWM4O.js";
+import "../__chunks/PQP5VPTV.js";
 import {
@@ -24,0 +24,0 @@ __objRest,

esm/tag/tag-store.js

 "use client";
 import {
   createCompositeStore
-} from "../__chunks/D7EIQZAU.js";
-import "../__chunks/6DHTHWXD.js";
+} from "../__chunks/7IJEP35G.js";
+import "../__chunks/7DTP4AQO.js";
 import "../__chunks/7PRQYBBV.js";
@@ -19,3 +19,3 @@ import {
 } from "../__chunks/PBFD2E7P.js";
-import "../__chunks/HWOIWM4O.js";
+import "../__chunks/PQP5VPTV.js";
 import {
@@ -22,0 +22,0 @@ __spreadProps,

esm/toolbar/toolbar-store.js

 "use client";
 import {
   createCompositeStore
-} from "../__chunks/D7EIQZAU.js";
-import "../__chunks/6DHTHWXD.js";
+} from "../__chunks/7IJEP35G.js";
+import "../__chunks/7DTP4AQO.js";
 import "../__chunks/7PRQYBBV.js";
@@ -11,3 +11,3 @@ import "../__chunks/EQQLU3CG.js";
 } from "../__chunks/PBFD2E7P.js";
-import "../__chunks/HWOIWM4O.js";
+import "../__chunks/PQP5VPTV.js";
 import {
@@ -14,0 +14,0 @@ __spreadProps,

esm/utils/dom.js

@@ -21,3 +21,3 @@ "use client";
   setSelectionRange
-} from "../__chunks/HWOIWM4O.js";
+} from "../__chunks/PQP5VPTV.js";
 import "../__chunks/3YLGPPWQ.js";
@@ -24,0 +24,0 @@ export {

esm/utils/events.js

 "use client";
 import {
   isApple
-} from "../__chunks/US4USQPI.js";
+} from "../__chunks/3VBK76MS.js";
 import {
   contains
-} from "../__chunks/HWOIWM4O.js";
+} from "../__chunks/PQP5VPTV.js";
 import {
@@ -9,0 +9,0 @@ __spreadProps,

esm/utils/focus.js

@@ -7,3 +7,3 @@ "use client";
   isVisible
-} from "../__chunks/HWOIWM4O.js";
+} from "../__chunks/PQP5VPTV.js";
 import {
@@ -10,0 +10,0 @@ __spreadValues

esm/utils/platform.js

@@ -8,4 +8,4 @@ "use client";
   isTouchDevice
-} from "../__chunks/US4USQPI.js";
-import "../__chunks/HWOIWM4O.js";
+} from "../__chunks/3VBK76MS.js";
+import "../__chunks/PQP5VPTV.js";
 import "../__chunks/3YLGPPWQ.js";
@@ -12,0 +12,0 @@ export {

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

534755

increased by0.39%

Worsened metrics

Lines of code

10646

decreased by-0.08%

No dependency changes