@ariakit/react - npm Package Compare versions

Comparing version 0.4.8 to 0.4.9

CHANGELOG.md

 # @ariakit/react
 
+## 0.4.9
+
+### New `useStoreState` hook
+
+The [`useStoreState`](https://ariakit.org/reference/use-store-state) hook is now part of the public API. Previously used internally by dynamic `useState` hooks from Ariakit store objects, it is now available in the `@ariakit/react` package to ensure compatibility with the new React Compiler.
+
+The following snippets are equivalent:
+
+```js
+const combobox = useComboboxStore();
+const value = combobox.useState("value");
+```
+
+```js
+const combobox = useComboboxStore();
+const value = useStoreState(combobox, "value");
+```
+
+Besides working better with the new React Compiler, [`useStoreState`](https://ariakit.org/reference/use-store-state) is more flexible than `store.useState` as it accepts a store that is `null` or `undefined`, in which case the returned value will be `undefined`. This is useful when you're reading a store from a context that may not always be available:
+
+```js
+const combobox = useComboboxContext();
+const value = useStoreState(combobox, "value");
+```
+
+### New `ComboboxValue` component
+
+A [`ComboboxValue`](https://ariakit.org/reference/combobox-value) component is now available. This _value_ component displays the current value of the combobox input without rendering any DOM elements or taking any HTML props. You can optionally pass a function as a child returning any React node based on the current value:
+
+```jsx
+<ComboboxProvider>
+  <Combobox />
+  <ComboboxValue>{(value) => `Current value: ${value}`}</ComboboxValue>
+</ComboboxProvider>
+```
+
+### `aria-selected` on composite items
+
+Composite items like [`ComboboxItem`](https://ariakit.org/reference/combobox-item) no longer have the `aria-selected` attribute automatically set when focused. This attribute was previously used to address an old bug in Google Chrome, but it's no longer needed. Now, it's only set when the item is actually selected, such as in a select widget or a multi-selectable combobox.
+
+This change shouldn't affect most users since the `aria-selected` attribute is not part of the public API and is not recommended as a [CSS selector](https://ariakit.org/guide/styling#css-selectors) (use [`[data-active-item]`](https://ariakit.org/guide/styling#data-active-item) instead). However, if you have snapshot tests, you may need to update them.
+
+### Other updates
+
+- Added [`userValue`](https://ariakit.org/reference/combobox-item-value#uservalue) prop to [`ComboboxItemValue`](https://ariakit.org/reference/combobox-item-value).
+- Improved JSDocs.
+- Updated dependencies: `@ariakit/react-core@0.4.9`
+
 ## 0.4.8
@@ -4,0 +52,0 @@

cjs/combobox.d.ts

@@ -17,2 +17,3 @@ export { useComboboxStore } from "@ariakit/react-core/combobox/combobox-store";
 export { ComboboxSeparator } from "@ariakit/react-core/combobox/combobox-separator";
+export { ComboboxValue } from "@ariakit/react-core/combobox/combobox-value";
 export type { ComboboxStore, ComboboxStoreProps, ComboboxStoreState, } from "@ariakit/react-core/combobox/combobox-store";
@@ -33,1 +34,2 @@ export type { ComboboxOptions, ComboboxProps, } from "@ariakit/react-core/combobox/combobox";
 export type { ComboboxSeparatorOptions, ComboboxSeparatorProps, } from "@ariakit/react-core/combobox/combobox-separator";
+export type { ComboboxValueProps } from "@ariakit/react-core/combobox/combobox-value";

cjs/index.d.ts

@@ -23,2 +23,3 @@ export * from "./button.ts";
 export * from "./separator.ts";
+export * from "./store.ts";
 export * from "./tab.ts";
@@ -25,0 +26,0 @@ export * from "./toolbar.ts";

esm/combobox.d.ts

@@ -17,2 +17,3 @@ export { useComboboxStore } from "@ariakit/react-core/combobox/combobox-store";
 export { ComboboxSeparator } from "@ariakit/react-core/combobox/combobox-separator";
+export { ComboboxValue } from "@ariakit/react-core/combobox/combobox-value";
 export type { ComboboxStore, ComboboxStoreProps, ComboboxStoreState, } from "@ariakit/react-core/combobox/combobox-store";
@@ -33,1 +34,2 @@ export type { ComboboxOptions, ComboboxProps, } from "@ariakit/react-core/combobox/combobox";
 export type { ComboboxSeparatorOptions, ComboboxSeparatorProps, } from "@ariakit/react-core/combobox/combobox-separator";
+export type { ComboboxValueProps } from "@ariakit/react-core/combobox/combobox-value";

esm/combobox.js

@@ -17,5 +17,6 @@ "use client";
   ComboboxSeparator,
+  ComboboxValue,
   useComboboxContext,
   useComboboxStore
-} from "./__chunks/L4M2Z5VM.js";
+} from "./__chunks/KRAVG5ZJ.js";
 export {
@@ -36,4 +37,5 @@ Combobox,
   ComboboxSeparator,
+  ComboboxValue,
   useComboboxContext,
   useComboboxStore
 };

esm/index.d.ts

@@ -23,2 +23,3 @@ export * from "./button.ts";
 export * from "./separator.ts";
+export * from "./store.ts";
 export * from "./tab.ts";
@@ -25,0 +26,0 @@ export * from "./toolbar.ts";

esm/index.js

 "use client";
 import {
+  Combobox,
+  ComboboxCancel,
+  ComboboxDisclosure,
+  ComboboxGroup,
+  ComboboxGroupLabel,
+  ComboboxItem,
+  ComboboxItemCheck,
+  ComboboxItemValue,
+  ComboboxLabel,
+  ComboboxList,
+  ComboboxPopover,
+  ComboboxProvider,
+  ComboboxRow,
+  ComboboxSeparator,
+  ComboboxValue,
+  useComboboxContext,
+  useComboboxStore
+} from "./__chunks/KRAVG5ZJ.js";
+import {
   Collection,
@@ -20,2 +39,6 @@ CollectionItem,
 import {
+  Group,
+  GroupLabel
+} from "./__chunks/ZL4AJIDL.js";
+import {
   Form,
@@ -82,19 +105,8 @@ FormCheckbox,
 import {
-  Combobox,
-  ComboboxCancel,
-  ComboboxDisclosure,
-  ComboboxGroup,
-  ComboboxGroupLabel,
-  ComboboxItem,
-  ComboboxItemCheck,
-  ComboboxItemValue,
-  ComboboxLabel,
-  ComboboxList,
-  ComboboxPopover,
-  ComboboxProvider,
-  ComboboxRow,
-  ComboboxSeparator,
-  useComboboxContext,
-  useComboboxStore
-} from "./__chunks/L4M2Z5VM.js";
+  Radio,
+  RadioGroup,
+  RadioProvider,
+  useRadioContext,
+  useRadioStore
+} from "./__chunks/KPNBOGNT.js";
 import {
@@ -164,6 +176,2 @@ Portal,
 import {
-  Group,
-  GroupLabel
-} from "./__chunks/ZL4AJIDL.js";
-import {
   VisuallyHidden
@@ -198,2 +206,5 @@ } from "./__chunks/6OHDLPN7.js";
 import {
+  useStoreState
+} from "./__chunks/NV5BVS3O.js";
+import {
   Separator
@@ -223,9 +234,2 @@ } from "./__chunks/JBAWBCWC.js";
 } from "./__chunks/VGHCPDMA.js";
-import {
-  Radio,
-  RadioGroup,
-  RadioProvider,
-  useRadioContext,
-  useRadioStore
-} from "./__chunks/KPNBOGNT.js";
 export {
@@ -253,2 +257,3 @@ Button,
   ComboboxSeparator,
+  ComboboxValue,
   Command,
@@ -399,2 +404,3 @@ Composite,
   useSelectStore,
+  useStoreState,
   useTabContext,
@@ -401,0 +407,0 @@ useTabStore,

package.json

 {
   "name": "@ariakit/react",
-  "version": "0.4.8",
+  "version": "0.4.9",
   "description": "Toolkit for building accessible web apps with React",
@@ -40,3 +40,3 @@ "sideEffects": false,
   "dependencies": {
-    "@ariakit/react-core": "0.4.8"
+    "@ariakit/react-core": "0.4.9"
   },
@@ -83,2 +83,9 @@ "peerDependencies": {
     },
+    "./store": {
+      "import": "./esm/store.js",
+      "require": {
+        "types": "./cjs/store.d.cts",
+        "default": "./cjs/store.cjs"
+      }
+    },
     "./separator": {
@@ -85,0 +92,0 @@ "import": "./esm/separator.js",

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

262446

increased by1.89%

Number of package files

227

increased by3.65%

Lines of code

2507

increased by1.66%

Dependency changes

• + Added@ariakit/core@0.4.9(transitive)

• + Added@ariakit/react-core@0.4.9(transitive)

• - Removed@ariakit/core@0.4.8(transitive)

• - Removed@ariakit/react-core@0.4.8(transitive)

• Updated@ariakit/react-core@0.4.9