@ariakit/react 0.3.9 → 0.3.11

package/CHANGELOG.md

@@ -1,5 +1,73 @@
 # @ariakit/react
 
+## 0.3.11
+
+### Modal Combobox
+
+The [Combobox](https://ariakit.org/component/combobox) components now support the [`modal`](https://ariakit.org/reference/combobox-popover#modal) prop on [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover).
+
+When a modal combobox is expanded, users can interact with and tab through all the combobox controls, including [`Combobox`](https://ariakit.org/reference/combobox), [`ComboboxDisclosure`](https://ariakit.org/reference/combobox-disclosure), and [`ComboboxCancel`](https://ariakit.org/reference/combobox-cancel), even if they're rendered outside the popover. The rest of the page will be inert.
+
+### Controlling the auto-select functionality of Combobox
+
+The [`Combobox`](https://ariakit.org/reference/combobox) component now includes a new [`getAutoSelectId`](https://ariakit.org/reference/combobox#getautoselectid) prop. This allows you to specify the [`ComboboxItem`](https://ariakit.org/reference/combobox-item) that should be auto-selected if the [`autoSelect`](https://ariakit.org/reference/combobox#autoselect) prop is `true`.
+
+By default, the first _enabled_ item is auto-selected. Now you can customize this behavior by returning the id of another item from [`getAutoSelectId`](https://ariakit.org/reference/combobox#getautoselectid):
+
+```jsx
+<Combobox
+  autoSelect
+  getAutoSelectId={(items) => {
+    // Auto select the first enabled item with a value
+    const item = items.find((item) => {
+      if (item.disabled) return false;
+      if (!item.value) return false;
+      return true;
+    });
+    return item?.id;
+  }}
+/>
+```
+
+### Styling Combobox without an active descendant
+
+The [`Combobox`](https://ariakit.org/reference/combobox) component now includes a [`data-active-item`](https://ariakit.org/guide/styling#data-active-item) attribute when it's the only active item in the composite widget. In other words, when no [`ComboboxItem`](https://ariakit.org/reference/combobox-item) is active and the focus is solely on the combobox input.
+
+You can use this as a CSS selector to style the combobox differently, providing additional affordance to users who pressed <kbd>↑</kbd> on the first item or <kbd>↓</kbd> on the last item. This action would place both virtual and actual DOM focus on the combobox input.
+
+```css
+.combobox[data-active-item] {
+  outline-width: 2px;
+}
+```
+
+### Other updates
+
+- Fixed [`useTabStore`](https://ariakit.org/reference/use-tab-store) return value not updating its own reference.
+- Fixed keyboard navigation on [Combobox](https://ariakit.org/components/combobox) when the content element is a grid.
+- Fixed [`ComboboxDisclosure`](https://ariakit.org/reference/combobox-disclosure) to update its `aria-expanded` attribute when the combobox expands.
+- Fixed `Maximum update depth exceeded` warning when rendering multiple collection items on the page.
+- Improved JSDocs.
+- Updated dependencies: `@ariakit/react-core@0.3.11`
+
+## 0.3.10
+
+### Overwriting `aria-selected` value on `ComboboxItem`
+
+It's now possible to pass a custom `aria-selected` value to the [`ComboboxItem`](https://ariakit.org/reference/combobox-item) component, overwriting the internal behavior.
+
+### Limiting `slide` on popovers
+
+When components like [Popover](https://ariakit.org/components/popover) and [Menu](https://ariakit.org/components/menu) with the [`slide`](https://ariakit.org/reference/popover#slide) prop are positioned to the right or left of the anchor element, they will now cease to slide across the screen, disengaged from the anchor element, upon reaching the edge of said element.
+
+### Other updates
+
+- Fixed [`blurOnHoverEnd`](https://ariakit.org/reference/menu-item#bluronhoverend) set to `false` not keeping submenus open.
+- Fixed scroll jump on Safari when selecting a [`CompositeItem`](https://ariakit.org/reference/composite-item).
+- Fixed [`preserveTabOrderAnchor`](https://ariakit.org/reference/menu#preservetaborderanchor) on nested menus.
+- Fixed focus behavior when using the [`preserveTabOrder`](https://ariakit.org/reference/portal#preservetaborder) prop.
+- Updated dependencies: `@ariakit/react-core@0.3.10`
+
 ## 0.3.9
 
 ### Automatic role on ComboboxGroup

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ariakit/react",
-  "version": "0.3.9",
+  "version": "0.3.11",
   "description": "Toolkit for building accessible web apps with React",
   "sideEffects": false,
   "license": "MIT",
@@ -37,7 +37,7 @@
     "components"
   ],
   "dependencies": {
-    "@ariakit/react-core": "0.3.9"
+    "@ariakit/react-core": "0.3.11"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0",