@ariakit/core - npm Package Compare versions

Comparing version 0.3.11 to 0.4.0

CHANGELOG.md

 # @ariakit/core
 
+## 0.4.0
+
+### Improved animation support
+
+This version enhances support for CSS animations and transitions on Ariakit components that use [Disclosure](https://ariakit.org/component/disclosure). This includes [Dialog](https://ariakit.org/components/dialog), [Popover](https://ariakit.org/components/popover), [Combobox](https://ariakit.org/components/combobox), [Select](https://ariakit.org/components/select), [Hovercard](https://ariakit.org/components/hovercard), [Menu](https://ariakit.org/components/menu), and [Tooltip](https://ariakit.org/components/tooltip).
+
+These components now support _enter_ and _leave_ transitions and animations right out of the box, eliminating the need to provide an explicit `animated` prop. If an enter animation is detected, the component will automatically wait for a leave animation to complete before unmounting or hiding itself.
+
+Use the [`[data-enter]`](https://ariakit.org/guide/styling#data-enter) selector for CSS transitions. For CSS animations, use the newly introduced [`[data-open]`](https://ariakit.org/guide/styling#data-open) selector. The [`[data-leave]`](https://ariakit.org/guide/styling#data-leave) selector can be used for both transitions and animations.
+
+### Composite widgets with `grid` role
+
+**BREAKING** if you're manually setting the `role="grid"` prop on a composite widget.
+
+Ariakit automatically assigns the `role` prop to all composite items to align with the container `role`. For example, if [`SelectPopover`](https://ariakit.org/reference/select-popover) has its role set to `listbox` (which is the default value), its owned [`SelectItem`](https://ariakit.org/reference/select-item) elements will automatically get their role set to `option`.
+
+In previous versions, this was also valid for composite widgets with a `grid` role, where the composite item element would automatically be given `role="gridcell"`. This is no longer the case, and you're now required to manually pass `role="gridcell"` to the composite item element if you're rendering a container with `role="grid"`.
+
+Before:
+
+```jsx
+<SelectPopover role="grid">
+  <SelectRow> {/* Automatically gets role="row" */}
+    <SelectItem> {/* Automatically gets role="gridcell" */}
+```
+
+After:
+
+```jsx
+<SelectPopover role="grid">
+  <SelectRow> {/* Still gets role="row" */}
+    <SelectItem role="gridcell">
+```
+
+This change is due to the possibility of rendering a composite item element with a different role as a child of a static `div` with `role="gridcell"`, which is a valid and frequently used practice when using the `grid` role. As a result, you no longer have to manually adjust the `role` prop on the composite item:
+
+```jsx
+<SelectPopover role="grid">
+  <SelectRow>
+    <div role="gridcell">
+      <SelectItem render={<button />}>
+```
+
+Previously, you had to explicitly pass `role="button"` to the [`SelectItem`](https://ariakit.org/reference/select-item) component above, otherwise it would automatically receive `role="gridcell"`, leading to an invalid accessibility tree.
+
+### Other updates
+
+- Added `removeUndefinedValues` utility function.
+- Added new [`disclosure`](https://ariakit.org/reference/use-disclosure-store#disclosure-1) property to disclosure stores.
+
 ## 0.3.11
@@ -4,0 +54,0 @@

cjs/disclosure/disclosure-store.d.ts

@@ -41,3 +41,2 @@ import type { Store, StoreOptions, StoreProps } from "../utils/store.js";
      *   milliseconds to pass before becoming `false`.
-     * @default false
      */
@@ -58,3 +57,3 @@ animated: boolean | number;
 }
-export interface DisclosureStoreFunctions {
+export interface DisclosureStoreFunctions extends Pick<DisclosureStoreOptions, "disclosure"> {
     /**
@@ -121,2 +120,7 @@ * Sets the [`open`](https://ariakit.org/reference/disclosure-provider#open)
     /**
+     * @deprecated Manually setting the `animated` prop is no longer necessary.
+     * This will be removed in a future release.
+     */
+    animated?: DisclosureStoreState["animated"];
+    /**
      * Whether the content should be visible by default.
@@ -123,0 +127,0 @@ * @default false

cjs/utils/misc.d.ts

@@ -117,2 +117,6 @@ import type { AnyFunction, AnyObject, SetStateAction } from "./types.js";
 /**
+ * Removes undefined values from an object.
+ */
+export declare function removeUndefinedValues<T extends AnyObject>(obj: T): T;
+/**
  * Returns the first value that is not `undefined`.
@@ -119,0 +123,0 @@ */

esm/checkbox/checkbox-store.js

@@ -5,6 +5,6 @@ "use client";
   throwOnConflictingProps
-} from "../__chunks/EAHJFCU4.js";
+} from "../__chunks/R676XYVY.js";
 import {
   defaultValue
-} from "../__chunks/Y3OOHFCN.js";
+} from "../__chunks/22HHDS5F.js";
 import {
@@ -11,0 +11,0 @@ __spreadProps,

esm/collection/collection-store.js

 "use client";
 import {
   createCollectionStore
-} from "../__chunks/22K762VQ.js";
-import "../__chunks/EAHJFCU4.js";
-import "../__chunks/Y3OOHFCN.js";
-import "../__chunks/DLOEKDPY.js";
+} from "../__chunks/URUD7X4C.js";
+import "../__chunks/R676XYVY.js";
+import "../__chunks/22HHDS5F.js";
+import "../__chunks/RRSZHCH6.js";
 import "../__chunks/4R3V3JGP.js";
@@ -9,0 +9,0 @@ export {

esm/combobox/combobox-store.js

 "use client";
 import {
   createPopoverStore
-} from "../__chunks/AF6IUUFN.js";
-import "../__chunks/SX2XFD6A.js";
-import "../__chunks/Z5IGYIPT.js";
+} from "../__chunks/MFZZDIHG.js";
+import "../__chunks/5RJNXXU2.js";
+import "../__chunks/WCKXDMU7.js";
 import {
   createCompositeStore
-} from "../__chunks/IERTEJ3A.js";
-import "../__chunks/22K762VQ.js";
+} from "../__chunks/2H5K47H4.js";
+import "../__chunks/URUD7X4C.js";
 import {
@@ -17,11 +17,11 @@ batch,
   throwOnConflictingProps
-} from "../__chunks/EAHJFCU4.js";
+} from "../__chunks/R676XYVY.js";
 import {
   defaultValue
-} from "../__chunks/Y3OOHFCN.js";
+} from "../__chunks/22HHDS5F.js";
 import {
   isSafari,
   isTouchDevice
-} from "../__chunks/MHPO2BXA.js";
-import "../__chunks/DLOEKDPY.js";
+} from "../__chunks/VDNATJW2.js";
+import "../__chunks/RRSZHCH6.js";
 import "../__chunks/7PRQYBBV.js";
@@ -28,0 +28,0 @@ import {

esm/composite/composite-overflow-store.js

 "use client";
 import {
   createPopoverStore
-} from "../__chunks/AF6IUUFN.js";
-import "../__chunks/SX2XFD6A.js";
-import "../__chunks/Z5IGYIPT.js";
-import "../__chunks/EAHJFCU4.js";
-import "../__chunks/Y3OOHFCN.js";
+} from "../__chunks/MFZZDIHG.js";
+import "../__chunks/5RJNXXU2.js";
+import "../__chunks/WCKXDMU7.js";
+import "../__chunks/R676XYVY.js";
+import "../__chunks/22HHDS5F.js";
 import "../__chunks/4R3V3JGP.js";
@@ -10,0 +10,0 @@

esm/composite/composite-store.js

 "use client";
 import {
   createCompositeStore
-} from "../__chunks/IERTEJ3A.js";
-import "../__chunks/22K762VQ.js";
-import "../__chunks/EAHJFCU4.js";
-import "../__chunks/Y3OOHFCN.js";
-import "../__chunks/DLOEKDPY.js";
+} from "../__chunks/2H5K47H4.js";
+import "../__chunks/URUD7X4C.js";
+import "../__chunks/R676XYVY.js";
+import "../__chunks/22HHDS5F.js";
+import "../__chunks/RRSZHCH6.js";
 import "../__chunks/7PRQYBBV.js";
@@ -10,0 +10,0 @@ import "../__chunks/4R3V3JGP.js";

esm/dialog/dialog-store.js

 "use client";
 import {
   createDialogStore
-} from "../__chunks/SX2XFD6A.js";
-import "../__chunks/Z5IGYIPT.js";
-import "../__chunks/EAHJFCU4.js";
-import "../__chunks/Y3OOHFCN.js";
+} from "../__chunks/5RJNXXU2.js";
+import "../__chunks/WCKXDMU7.js";
+import "../__chunks/R676XYVY.js";
+import "../__chunks/22HHDS5F.js";
 import "../__chunks/4R3V3JGP.js";
@@ -9,0 +9,0 @@ export {

esm/disclosure/disclosure-store.d.ts

@@ -41,3 +41,2 @@ import type { Store, StoreOptions, StoreProps } from "../utils/store.js";
      *   milliseconds to pass before becoming `false`.
-     * @default false
      */
@@ -58,3 +57,3 @@ animated: boolean | number;
 }
-export interface DisclosureStoreFunctions {
+export interface DisclosureStoreFunctions extends Pick<DisclosureStoreOptions, "disclosure"> {
     /**
@@ -121,2 +120,7 @@ * Sets the [`open`](https://ariakit.org/reference/disclosure-provider#open)
     /**
+     * @deprecated Manually setting the `animated` prop is no longer necessary.
+     * This will be removed in a future release.
+     */
+    animated?: DisclosureStoreState["animated"];
+    /**
      * Whether the content should be visible by default.
@@ -123,0 +127,0 @@ * @default false

esm/disclosure/disclosure-store.js

 "use client";
 import {
   createDisclosureStore
-} from "../__chunks/Z5IGYIPT.js";
-import "../__chunks/EAHJFCU4.js";
-import "../__chunks/Y3OOHFCN.js";
+} from "../__chunks/WCKXDMU7.js";
+import "../__chunks/R676XYVY.js";
+import "../__chunks/22HHDS5F.js";
 import "../__chunks/4R3V3JGP.js";
@@ -8,0 +8,0 @@ export {

esm/form/form-store.js

 "use client";
 import {
   createCollectionStore
-} from "../__chunks/22K762VQ.js";
+} from "../__chunks/URUD7X4C.js";
 import {
@@ -10,3 +10,3 @@ createStore,
   throwOnConflictingProps
-} from "../__chunks/EAHJFCU4.js";
+} from "../__chunks/R676XYVY.js";
 import {
@@ -17,4 +17,4 @@ applyState,
   isObject
-} from "../__chunks/Y3OOHFCN.js";
-import "../__chunks/DLOEKDPY.js";
+} from "../__chunks/22HHDS5F.js";
+import "../__chunks/RRSZHCH6.js";
 import {
@@ -21,0 +21,0 @@ __spreadProps,

esm/hovercard/hovercard-store.js

 "use client";
 import {
   createHovercardStore
-} from "../__chunks/SOLWE6E5.js";
-import "../__chunks/AF6IUUFN.js";
-import "../__chunks/SX2XFD6A.js";
-import "../__chunks/Z5IGYIPT.js";
-import "../__chunks/EAHJFCU4.js";
-import "../__chunks/Y3OOHFCN.js";
+} from "../__chunks/BRS7GKWU.js";
+import "../__chunks/MFZZDIHG.js";
+import "../__chunks/5RJNXXU2.js";
+import "../__chunks/WCKXDMU7.js";
+import "../__chunks/R676XYVY.js";
+import "../__chunks/22HHDS5F.js";
 import "../__chunks/4R3V3JGP.js";
@@ -11,0 +11,0 @@ export {

esm/menu/menu-bar-store.js

 "use client";
 import {
   createMenubarStore
-} from "../__chunks/XU3EOSCU.js";
-import "../__chunks/IERTEJ3A.js";
-import "../__chunks/22K762VQ.js";
-import "../__chunks/EAHJFCU4.js";
-import "../__chunks/Y3OOHFCN.js";
-import "../__chunks/DLOEKDPY.js";
+} from "../__chunks/PXYVPXSS.js";
+import "../__chunks/2H5K47H4.js";
+import "../__chunks/URUD7X4C.js";
+import "../__chunks/R676XYVY.js";
+import "../__chunks/22HHDS5F.js";
+import "../__chunks/RRSZHCH6.js";
 import "../__chunks/7PRQYBBV.js";
@@ -11,0 +11,0 @@ import "../__chunks/4R3V3JGP.js";

esm/menu/menu-store.js

 "use client";
 import {
   createHovercardStore
-} from "../__chunks/SOLWE6E5.js";
-import "../__chunks/AF6IUUFN.js";
-import "../__chunks/SX2XFD6A.js";
-import "../__chunks/Z5IGYIPT.js";
+} from "../__chunks/BRS7GKWU.js";
+import "../__chunks/MFZZDIHG.js";
+import "../__chunks/5RJNXXU2.js";
+import "../__chunks/WCKXDMU7.js";
 import {
   createCompositeStore
-} from "../__chunks/IERTEJ3A.js";
-import "../__chunks/22K762VQ.js";
+} from "../__chunks/2H5K47H4.js";
+import "../__chunks/URUD7X4C.js";
 import {
@@ -20,8 +20,8 @@ createStore,
   throwOnConflictingProps
-} from "../__chunks/EAHJFCU4.js";
+} from "../__chunks/R676XYVY.js";
 import {
   applyState,
   defaultValue
-} from "../__chunks/Y3OOHFCN.js";
-import "../__chunks/DLOEKDPY.js";
+} from "../__chunks/22HHDS5F.js";
+import "../__chunks/RRSZHCH6.js";
 import "../__chunks/7PRQYBBV.js";
@@ -28,0 +28,0 @@ import {

esm/menubar/menubar-store.js

 "use client";
 import {
   createMenubarStore
-} from "../__chunks/XU3EOSCU.js";
-import "../__chunks/IERTEJ3A.js";
-import "../__chunks/22K762VQ.js";
-import "../__chunks/EAHJFCU4.js";
-import "../__chunks/Y3OOHFCN.js";
-import "../__chunks/DLOEKDPY.js";
+} from "../__chunks/PXYVPXSS.js";
+import "../__chunks/2H5K47H4.js";
+import "../__chunks/URUD7X4C.js";
+import "../__chunks/R676XYVY.js";
+import "../__chunks/22HHDS5F.js";
+import "../__chunks/RRSZHCH6.js";
 import "../__chunks/7PRQYBBV.js";
@@ -11,0 +11,0 @@ import "../__chunks/4R3V3JGP.js";

esm/popover/popover-store.js

 "use client";
 import {
   createPopoverStore
-} from "../__chunks/AF6IUUFN.js";
-import "../__chunks/SX2XFD6A.js";
-import "../__chunks/Z5IGYIPT.js";
-import "../__chunks/EAHJFCU4.js";
-import "../__chunks/Y3OOHFCN.js";
+} from "../__chunks/MFZZDIHG.js";
+import "../__chunks/5RJNXXU2.js";
+import "../__chunks/WCKXDMU7.js";
+import "../__chunks/R676XYVY.js";
+import "../__chunks/22HHDS5F.js";
 import "../__chunks/4R3V3JGP.js";
@@ -10,0 +10,0 @@ export {

esm/radio/radio-store.js

 "use client";
 import {
   createCompositeStore
-} from "../__chunks/IERTEJ3A.js";
-import "../__chunks/22K762VQ.js";
+} from "../__chunks/2H5K47H4.js";
+import "../__chunks/URUD7X4C.js";
 import {
   createStore
-} from "../__chunks/EAHJFCU4.js";
+} from "../__chunks/R676XYVY.js";
 import {
   defaultValue
-} from "../__chunks/Y3OOHFCN.js";
-import "../__chunks/DLOEKDPY.js";
+} from "../__chunks/22HHDS5F.js";
+import "../__chunks/RRSZHCH6.js";
 import "../__chunks/7PRQYBBV.js";
@@ -14,0 +14,0 @@ import {

esm/select/select-store.js

 "use client";
 import {
   createPopoverStore
-} from "../__chunks/AF6IUUFN.js";
-import "../__chunks/SX2XFD6A.js";
-import "../__chunks/Z5IGYIPT.js";
+} from "../__chunks/MFZZDIHG.js";
+import "../__chunks/5RJNXXU2.js";
+import "../__chunks/WCKXDMU7.js";
 import {
   createCompositeStore
-} from "../__chunks/IERTEJ3A.js";
-import "../__chunks/22K762VQ.js";
+} from "../__chunks/2H5K47H4.js";
+import "../__chunks/URUD7X4C.js";
 import {
@@ -19,7 +19,7 @@ batch,
   throwOnConflictingProps
-} from "../__chunks/EAHJFCU4.js";
+} from "../__chunks/R676XYVY.js";
 import {
   defaultValue
-} from "../__chunks/Y3OOHFCN.js";
-import "../__chunks/DLOEKDPY.js";
+} from "../__chunks/22HHDS5F.js";
+import "../__chunks/RRSZHCH6.js";
 import {
@@ -26,0 +26,0 @@ toArray

esm/tab/tab-store.js

 "use client";
 import {
   createCompositeStore
-} from "../__chunks/IERTEJ3A.js";
+} from "../__chunks/2H5K47H4.js";
 import {
   createCollectionStore
-} from "../__chunks/22K762VQ.js";
+} from "../__chunks/URUD7X4C.js";
 import {
@@ -13,7 +13,7 @@ batch,
   sync
-} from "../__chunks/EAHJFCU4.js";
+} from "../__chunks/R676XYVY.js";
 import {
   defaultValue
-} from "../__chunks/Y3OOHFCN.js";
-import "../__chunks/DLOEKDPY.js";
+} from "../__chunks/22HHDS5F.js";
+import "../__chunks/RRSZHCH6.js";
 import "../__chunks/7PRQYBBV.js";
@@ -20,0 +20,0 @@ import {

esm/toolbar/toolbar-store.js

 "use client";
 import {
   createCompositeStore
-} from "../__chunks/IERTEJ3A.js";
-import "../__chunks/22K762VQ.js";
-import "../__chunks/EAHJFCU4.js";
+} from "../__chunks/2H5K47H4.js";
+import "../__chunks/URUD7X4C.js";
+import "../__chunks/R676XYVY.js";
 import {
   defaultValue
-} from "../__chunks/Y3OOHFCN.js";
-import "../__chunks/DLOEKDPY.js";
+} from "../__chunks/22HHDS5F.js";
+import "../__chunks/RRSZHCH6.js";
 import "../__chunks/7PRQYBBV.js";
@@ -12,0 +12,0 @@ import {

esm/tooltip/tooltip-store.js

 "use client";
 import {
   createHovercardStore
-} from "../__chunks/SOLWE6E5.js";
-import "../__chunks/AF6IUUFN.js";
-import "../__chunks/SX2XFD6A.js";
-import "../__chunks/Z5IGYIPT.js";
+} from "../__chunks/BRS7GKWU.js";
+import "../__chunks/MFZZDIHG.js";
+import "../__chunks/5RJNXXU2.js";
+import "../__chunks/WCKXDMU7.js";
 import {
   createStore
-} from "../__chunks/EAHJFCU4.js";
+} from "../__chunks/R676XYVY.js";
 import {
   defaultValue
-} from "../__chunks/Y3OOHFCN.js";
+} from "../__chunks/22HHDS5F.js";
 import {
@@ -22,2 +22,11 @@ __spreadProps,
   var _a;
+  if (process.env.NODE_ENV !== "production") {
+    if (props.type === "label") {
+      console.warn(
+        "The `type` option on the tooltip store is deprecated.",
+        "Render a visually hidden label or use the `aria-label` or `aria-labelledby` attributes on the anchor element instead.",
+        "See https://ariakit.org/components/tooltip#tooltip-anchors-must-have-accessible-names"
+      );
+    }
+  }
   const syncState = (_a = props.store) == null ? void 0 : _a.getState();
@@ -24,0 +33,0 @@ const hovercard = createHovercardStore(__spreadProps(__spreadValues({}, props), {

esm/utils/dom.js

@@ -21,3 +21,3 @@ "use client";
   setSelectionRange
-} from "../__chunks/DLOEKDPY.js";
+} from "../__chunks/RRSZHCH6.js";
 import "../__chunks/4R3V3JGP.js";
@@ -24,0 +24,0 @@ export {

esm/utils/events.js

 "use client";
 import {
   isApple
-} from "../__chunks/MHPO2BXA.js";
+} from "../__chunks/VDNATJW2.js";
 import {
   contains
-} from "../__chunks/DLOEKDPY.js";
+} from "../__chunks/RRSZHCH6.js";
 import {
@@ -9,0 +9,0 @@ __spreadProps,

esm/utils/focus.js

@@ -9,3 +9,3 @@ "use client";
   matches
-} from "../__chunks/DLOEKDPY.js";
+} from "../__chunks/RRSZHCH6.js";
 import {
@@ -12,0 +12,0 @@ __spreadValues

esm/utils/misc.d.ts

@@ -117,2 +117,6 @@ import type { AnyFunction, AnyObject, SetStateAction } from "./types.js";
 /**
+ * Removes undefined values from an object.
+ */
+export declare function removeUndefinedValues<T extends AnyObject>(obj: T): T;
+/**
  * Returns the first value that is not `undefined`.
@@ -119,0 +123,0 @@ */

esm/utils/misc.js

@@ -22,4 +22,5 @@ "use client";
   pick,
+  removeUndefinedValues,
   shallowEqual
-} from "../__chunks/Y3OOHFCN.js";
+} from "../__chunks/22HHDS5F.js";
 import "../__chunks/4R3V3JGP.js";
@@ -46,3 +47,4 @@ export {
   pick,
+  removeUndefinedValues,
   shallowEqual
 };

esm/utils/platform.js

@@ -8,4 +8,4 @@ "use client";
   isTouchDevice
-} from "../__chunks/MHPO2BXA.js";
-import "../__chunks/DLOEKDPY.js";
+} from "../__chunks/VDNATJW2.js";
+import "../__chunks/RRSZHCH6.js";
 import "../__chunks/4R3V3JGP.js";
@@ -12,0 +12,0 @@ export {

esm/utils/store.js

@@ -13,4 +13,4 @@ "use client";
   throwOnConflictingProps
-} from "../__chunks/EAHJFCU4.js";
-import "../__chunks/Y3OOHFCN.js";
+} from "../__chunks/R676XYVY.js";
+import "../__chunks/22HHDS5F.js";
 import "../__chunks/4R3V3JGP.js";
@@ -17,0 +17,0 @@ export {

package.json

 {
   "name": "@ariakit/core",
-  "version": "0.3.11",
+  "version": "0.4.0",
   "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

496443

increased by1.15%

Lines of code

10099

increased by0.55%

Worsened metrics

Number of low supply chain risk alerts

4

increased by100%

No dependency changes