@ariakit/core 0.4.9 → 0.4.10

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @ariakit/core
 
+## 0.4.10
+
+### Tabs inside animated Combobox or Select
+
+When rendering [Tab](https://ariakit.org/components/tab) inside [Combobox](https://ariakit.org/components/combobox) or [Select](https://ariakit.org/components/select), it now waits for the closing animation to finish before restoring the tab with the selected item. This should prevent an inconsistent UI where the tab is restored immediately while the content is still animating out. See [Select with Combobox and Tabs](https://ariakit.org/examples/select-combobox-tab).
+
+### Other updates
+
+- Updated [Combobox](https://ariakit.org/components/combobox) to immediately reset the [`activeId`](https://ariakit.org/reference/use-combobox-store#activeid) upon closing the popover.
+- Improved JSDocs.
+
 ## 0.4.9
 
 - Improved JSDocs.

package/cjs/combobox/combobox-store.cjs

@@ -138,8 +138,8 @@ function createComboboxStore(_a = {}) {
   );
   _3QF3ODTRcjs.setup.call(void 0, 
     combobox,
-    () => _3QF3ODTRcjs.batch.call(void 0, combobox, ["mounted"], (state) => {
-      if (state.mounted) return;
+    () => _3QF3ODTRcjs.sync.call(void 0, combobox, ["open"], (state) => {
+      if (state.open) return;
       combobox.setState("activeId", activeId);
       combobox.setState("moves", 0);
     })

package/cjs/tab/tab-store.cjs

@@ -97,9 +97,14 @@ function createTabStore(_a = {}) {
       tab.setState("selectedId", tabItem.id);
     })
   );
+  let syncActiveId = true;
   _3QF3ODTRcjs.setup.call(void 0, 
     tab,
     () => _3QF3ODTRcjs.batch.call(void 0, tab, ["selectedId"], (state, prev) => {
+      if (!syncActiveId) {
+        syncActiveId = true;
+        return;
+      }
       if (parentComposite && state.selectedId === prev.selectedId) return;
       tab.setState("activeId", state.selectedId);
     })
@@ -144,18 +149,19 @@ function createTabStore(_a = {}) {
       selectedIdFromSelectedValue = tab.getState().selectedId;
     };
     const restoreSelectedId = () => {
+      syncActiveId = false;
       tab.setState("selectedId", selectedIdFromSelectedValue);
     };
     if (parentComposite && "setSelectElement" in parentComposite) {
       return _BTUHABP4cjs.chain.call(void 0, 
         _3QF3ODTRcjs.sync.call(void 0, parentComposite, ["value"], backupSelectedId),
-        _3QF3ODTRcjs.sync.call(void 0, parentComposite, ["open"], restoreSelectedId)
+        _3QF3ODTRcjs.sync.call(void 0, parentComposite, ["mounted"], restoreSelectedId)
       );
     }
     if (!combobox) return;
     return _BTUHABP4cjs.chain.call(void 0, 
       _3QF3ODTRcjs.sync.call(void 0, combobox, ["selectedValue"], backupSelectedId),
-      _3QF3ODTRcjs.sync.call(void 0, combobox, ["open"], restoreSelectedId)
+      _3QF3ODTRcjs.sync.call(void 0, combobox, ["mounted"], restoreSelectedId)
     );
   });
   return _3IVNQNIVcjs.__spreadProps.call(void 0, _3IVNQNIVcjs.__spreadValues.call(void 0, _3IVNQNIVcjs.__spreadValues.call(void 0, {}, composite), tab), {

package/esm/combobox/combobox-store.js

@@ -138,8 +138,8 @@ function createComboboxStore(_a = {}) {
   );
   setup(
     combobox,
-    () => batch(combobox, ["mounted"], (state) => {
-      if (state.mounted) return;
+    () => sync(combobox, ["open"], (state) => {
+      if (state.open) return;
       combobox.setState("activeId", activeId);
       combobox.setState("moves", 0);
     })

package/esm/tab/tab-store.js

@@ -97,9 +97,14 @@ function createTabStore(_a = {}) {
       tab.setState("selectedId", tabItem.id);
     })
   );
+  let syncActiveId = true;
   setup(
     tab,
     () => batch(tab, ["selectedId"], (state, prev) => {
+      if (!syncActiveId) {
+        syncActiveId = true;
+        return;
+      }
       if (parentComposite && state.selectedId === prev.selectedId) return;
       tab.setState("activeId", state.selectedId);
     })
@@ -144,18 +149,19 @@ function createTabStore(_a = {}) {
       selectedIdFromSelectedValue = tab.getState().selectedId;
     };
     const restoreSelectedId = () => {
+      syncActiveId = false;
       tab.setState("selectedId", selectedIdFromSelectedValue);
     };
     if (parentComposite && "setSelectElement" in parentComposite) {
       return chain(
         sync(parentComposite, ["value"], backupSelectedId),
-        sync(parentComposite, ["open"], restoreSelectedId)
+        sync(parentComposite, ["mounted"], restoreSelectedId)
       );
     }
     if (!combobox) return;
     return chain(
       sync(combobox, ["selectedValue"], backupSelectedId),
-      sync(combobox, ["open"], restoreSelectedId)
+      sync(combobox, ["mounted"], restoreSelectedId)
     );
   });
   return __spreadProps(__spreadValues(__spreadValues({}, composite), tab), {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ariakit/core",
-  "version": "0.4.9",
+  "version": "0.4.10",
   "description": "Ariakit core",
   "sideEffects": false,
   "license": "MIT",