@doist/reactist 23.0.1-beta → 23.1.0

package/dist/reactist.cjs.development.js

@@ -8,10 +8,15 @@ var React = require('react');
 var React__default = _interopDefault(React);
 var classNames = _interopDefault(require('classnames'));
 var flattenChildren = _interopDefault(require('react-keyed-flatten-children'));
-var react = require('@ariakit/react');
+var tooltip = require('ariakit/tooltip');
+var portal = require('ariakit/portal');
+var ariakitReactUtils = require('ariakit-react-utils');
 var useCallbackRef = require('use-callback-ref');
 var FocusLock = _interopDefault(require('react-focus-lock'));
 var ariaHidden = require('aria-hidden');
+var dialog = require('ariakit/dialog');
+var tab = require('ariakit/tab');
+var Ariakit = require('ariakit/menu');
 var ReactDOM = _interopDefault(require('react-dom'));
 var dayjs = _interopDefault(require('dayjs'));
 var LocalizedFormat = _interopDefault(require('dayjs/plugin/localizedFormat'));
@@ -190,7 +195,7 @@ function mapResponsiveProp(fromValue, mapper) {
   };
 }
 
-var modules_54d944f2 = {"box":"_2a3b75a1","position-absolute":"_2286072d","position-fixed":"_0847ebf3","position-relative":"_9015266f","position-sticky":"_572136cd","tablet-position-absolute":"dec0da3c","tablet-position-fixed":"eb3f61a4","tablet-position-relative":"_6a9d01dd","tablet-position-sticky":"cf9268ba","desktop-position-absolute":"_6579cc9c","desktop-position-fixed":"_3a6a421f","desktop-position-relative":"_3a6950ac","desktop-position-sticky":"_142cd372","display-block":"_9a084bff","display-flex":"_509a57b4","display-inline":"_4a786bb9","display-inlineBlock":"_5d644b40","display-inlineFlex":"_973d00d0","display-none":"_3e4f26a6","tablet-display-block":"d525fe3a","tablet-display-flex":"_316c9f4b","tablet-display-inline":"_5e788d98","tablet-display-inlineBlock":"_851fc6b8","tablet-display-inlineFlex":"c16ba46a","tablet-display-none":"_759c0c1a","desktop-display-block":"c374b455","desktop-display-flex":"_8a854d8f","desktop-display-inline":"_805fa8dc","desktop-display-inlineBlock":"ab26af05","desktop-display-inlineFlex":"_9bd12ba4","desktop-display-none":"_581476ce","flexDirection-column":"_1fb9d90e","flexDirection-row":"e5a9206f","tablet-flexDirection-column":"_3e6a0be1","tablet-flexDirection-row":"e9e2e53a","desktop-flexDirection-column":"c7d6b073","desktop-flexDirection-row":"_935269b4","flexWrap-wrap":"_3692f9c2","flexWrap-nowrap":"_55f6f487","flexShrink-0":"d5d0d34a","flexGrow-0":"d8ff7933","flexGrow-1":"_4a93668a","alignItems-flexStart":"_5a8c5a77","alignItems-center":"_50ba6b6b","alignItems-flexEnd":"_3963f790","alignItems-baseline":"_55ef2d4e","tablet-alignItems-flexStart":"_3e2bfb5d","tablet-alignItems-center":"a99be1ab","tablet-alignItems-flexEnd":"fa8221fe","tablet-alignItems-baseline":"e83669a0","desktop-alignItems-flexStart":"_65e6b537","desktop-alignItems-center":"db356482","desktop-alignItems-flexEnd":"acc08587","desktop-alignItems-baseline":"ad033867","justifyContent-flexStart":"_985b733f","justifyContent-center":"_95a98d2a","justifyContent-flexEnd":"be9bf31a","justifyContent-spaceAround":"a89d8798","justifyContent-spaceBetween":"_904ef8fe","justifyContent-spaceEvenly":"_489975d5","tablet-justifyContent-flexStart":"a7175ae7","tablet-justifyContent-center":"_7334dead","tablet-justifyContent-flexEnd":"_746de733","tablet-justifyContent-spaceAround":"_6d09398a","tablet-justifyContent-spaceBetween":"c2324c1d","tablet-justifyContent-spaceEvenly":"_04bd6e07","desktop-justifyContent-flexStart":"_39b310de","desktop-justifyContent-center":"_0dc77292","desktop-justifyContent-flexEnd":"_96c15bd8","desktop-justifyContent-spaceBetween":"_096111a6","alignSelf-stretch":"_35d69587","alignSelf-flexStart":"f46f3a67","alignSelf-center":"fb6a8035","alignSelf-flexEnd":"d3193acd","alignSelf-baseline":"_1154f656","tablet-alignSelf-stretch":"_298e04af","tablet-alignSelf-flexStart":"_2c729d24","tablet-alignSelf-center":"_9ea5e943","tablet-alignSelf-flexEnd":"_02266425","tablet-alignSelf-baseline":"c16a5800","desktop-alignSelf-stretch":"_2ec9eb74","desktop-alignSelf-flexStart":"_34f1fb03","desktop-alignSelf-center":"_77c58550","desktop-alignSelf-flexEnd":"_9ffa429f","desktop-alignSelf-baseline":"_6cc14c5d","overflow-hidden":"f6342c26","overflow-auto":"_10a2f952","overflow-visible":"f20b8b87","overflow-scroll":"_4954f87c","height-full":"a83fb2f5","bg-default":"d85cf739","bg-aside":"_4eb1d749","bg-highlight":"da1ccaa5","bg-selected":"_82dc28e7","bg-toast":"_63ba3dfa","borderRadius-standard":"_34cd2b5e","borderRadius-full":"_5fe4d5e3","border-primary":"_1b34ffd9","border-secondary":"_705519b0","border-tertiary":"_67adc238","textAlign-start":"fff8bff0","textAlign-center":"f973eed0","textAlign-end":"_225acbd7","textAlign-justify":"dea1e8ba","tablet-textAlign-start":"_919d6c8f","tablet-textAlign-center":"ab9d970e","tablet-textAlign-end":"b5b45e0e","tablet-textAlign-justify":"bd6e42e0","desktop-textAlign-start":"_15120506","desktop-textAlign-center":"_337333b5","desktop-textAlign-end":"_221db0fb","desktop-textAlign-justify":"_29ea9711"};
+var modules_54d944f2 = {"box":"fb8d74bb","position-absolute":"_18f74af9","position-fixed":"b292fef1","position-relative":"e4e217d4","position-sticky":"_66895b64","tablet-position-absolute":"_00e8a0ce","tablet-position-fixed":"efaf64be","tablet-position-relative":"_76e540fd","tablet-position-sticky":"bd286900","desktop-position-absolute":"_09e9f472","desktop-position-fixed":"_893383f1","desktop-position-relative":"dea3890d","desktop-position-sticky":"_6a61c94d","display-block":"_64dcc902","display-flex":"_14423c92","display-inline":"_6a38242d","display-inlineBlock":"_348efc1f","display-inlineFlex":"_150907c8","display-none":"_3da48ad6","tablet-display-block":"_0daac9f2","tablet-display-flex":"f62c43b1","tablet-display-inline":"_5839a4e4","tablet-display-inlineBlock":"_8068aaf2","tablet-display-inlineFlex":"_76562ea5","tablet-display-none":"_4f7a886f","desktop-display-block":"_4fd4b789","desktop-display-flex":"_4d08e78f","desktop-display-inline":"_0da15585","desktop-display-inlineBlock":"d0fcc019","desktop-display-inlineFlex":"_79f967d4","desktop-display-none":"_2ffa0d03","flexDirection-column":"_2d7320f2","flexDirection-row":"_5f8879d9","tablet-flexDirection-column":"_2c919a43","tablet-flexDirection-row":"_4da1f194","desktop-flexDirection-column":"_66fd35ea","desktop-flexDirection-row":"_4b79448d","flexWrap-wrap":"_202b0c8c","flexWrap-nowrap":"_45a8f27f","flexShrink-0":"_7d9ec5b0","flexGrow-0":"_9ce442fb","flexGrow-1":"c3b69d70","alignItems-flexStart":"_7cc6458c","alignItems-center":"b76144ce","alignItems-flexEnd":"e42ffab4","alignItems-baseline":"_3975b234","tablet-alignItems-flexStart":"b670f77e","tablet-alignItems-center":"_976e7156","tablet-alignItems-flexEnd":"_385c60b1","tablet-alignItems-baseline":"_52b577fc","desktop-alignItems-flexStart":"_2e1cc27f","desktop-alignItems-center":"_3a9e51e9","desktop-alignItems-flexEnd":"dfc189b2","desktop-alignItems-baseline":"_5fabaec4","justifyContent-flexStart":"a65d9c55","justifyContent-center":"b4e05554","justifyContent-flexEnd":"f76804e6","justifyContent-spaceAround":"_0095203e","justifyContent-spaceBetween":"_6eb365d1","justifyContent-spaceEvenly":"_4111e641","tablet-justifyContent-flexStart":"_6fda855d","tablet-justifyContent-center":"c2d359f8","tablet-justifyContent-flexEnd":"e271941d","tablet-justifyContent-spaceAround":"_2321488d","tablet-justifyContent-spaceBetween":"e4a9b2e3","tablet-justifyContent-spaceEvenly":"bdc232f2","desktop-justifyContent-flexStart":"_0d16bb5c","desktop-justifyContent-center":"eca8082a","desktop-justifyContent-flexEnd":"_97ea6bb7","desktop-justifyContent-spaceBetween":"_58e61602","alignSelf-stretch":"_794c8ab8","alignSelf-flexStart":"c510efd5","alignSelf-center":"b3f71626","alignSelf-flexEnd":"_13771d73","alignSelf-baseline":"_64318454","tablet-alignSelf-stretch":"_309c6ba7","tablet-alignSelf-flexStart":"_92dfd036","tablet-alignSelf-center":"_811f9906","tablet-alignSelf-flexEnd":"_2cd2336e","tablet-alignSelf-baseline":"bd2c9dad","desktop-alignSelf-stretch":"d8215926","desktop-alignSelf-flexStart":"b78f5c06","desktop-alignSelf-center":"_683e0cdb","desktop-alignSelf-flexEnd":"_489f1dc8","desktop-alignSelf-baseline":"_4aca1032","overflow-hidden":"_68aab614","overflow-auto":"ac28a3b1","overflow-visible":"_50b88b52","overflow-scroll":"c2fdd1c1","height-full":"_75ca308a","bg-default":"a9ca9830","bg-aside":"b9ff0c93","bg-highlight":"efc303e5","bg-selected":"ec657626","bg-toast":"_00d3482f","borderRadius-standard":"_958da546","borderRadius-full":"_79077c62","border-primary":"_68981e89","border-secondary":"_2bda8f7a","border-tertiary":"_7152c573","textAlign-start":"_1f362dec","textAlign-center":"_1c09cd18","textAlign-end":"b9663f5e","textAlign-justify":"a0eba489","tablet-textAlign-start":"_60b9abf8","tablet-textAlign-center":"_2c70943c","tablet-textAlign-end":"a512d4e1","tablet-textAlign-justify":"_5d02c334","desktop-textAlign-start":"ad2496a1","desktop-textAlign-center":"ee87b016","desktop-textAlign-end":"_6dd48127","desktop-textAlign-justify":"_1e70d216"};
 
 var modules_b537a8ee = {"paddingTop-xsmall":"c4803194","paddingTop-small":"_4e9ab24b","paddingTop-medium":"_1d226e27","paddingTop-large":"eb6097f1","paddingTop-xlarge":"d3229ba4","paddingTop-xxlarge":"_47978ba4","tablet-paddingTop-xsmall":"f987719c","tablet-paddingTop-small":"_8dbc4b4d","tablet-paddingTop-medium":"ae44fe07","tablet-paddingTop-large":"ffe9548d","tablet-paddingTop-xlarge":"f2b76a44","tablet-paddingTop-xxlarge":"c6eb8f43","desktop-paddingTop-xsmall":"_8699b560","desktop-paddingTop-small":"_02c374b7","desktop-paddingTop-medium":"_0dd0332f","desktop-paddingTop-large":"da55f1f6","desktop-paddingTop-xlarge":"_8ef2a278","desktop-paddingTop-xxlarge":"_8b493b28","paddingRight-xsmall":"_211eebc7","paddingRight-small":"ad0ccf15","paddingRight-medium":"a03e39af","paddingRight-large":"f0941ead","paddingRight-xlarge":"e47c5a43","paddingRight-xxlarge":"e849a5cf","tablet-paddingRight-xsmall":"_85374228","tablet-paddingRight-small":"_89df37b9","tablet-paddingRight-medium":"_1cc50ebe","tablet-paddingRight-large":"_1060982b","tablet-paddingRight-xlarge":"be58847d","tablet-paddingRight-xxlarge":"_45093484","desktop-paddingRight-xsmall":"f8d99d6a","desktop-paddingRight-small":"efa076d9","desktop-paddingRight-medium":"e59caa64","desktop-paddingRight-large":"da42f46a","desktop-paddingRight-xlarge":"b3ee2580","desktop-paddingRight-xxlarge":"_3ef94658","paddingBottom-xsmall":"b0e6eab4","paddingBottom-small":"_9510d053","paddingBottom-medium":"d7af60c9","paddingBottom-large":"b75f86cd","paddingBottom-xlarge":"fbd4ce29","paddingBottom-xxlarge":"_33e3ad63","tablet-paddingBottom-xsmall":"f0302da7","tablet-paddingBottom-small":"_4f9b8012","tablet-paddingBottom-medium":"_4333e20e","tablet-paddingBottom-large":"_30bbc76c","tablet-paddingBottom-xlarge":"ba5a4008","tablet-paddingBottom-xxlarge":"_423a3b1a","desktop-paddingBottom-xsmall":"b40139b7","desktop-paddingBottom-small":"f96071fa","desktop-paddingBottom-medium":"fe803c9a","desktop-paddingBottom-large":"_01686eb9","desktop-paddingBottom-xlarge":"afa763d8","desktop-paddingBottom-xxlarge":"a95785f1","paddingLeft-xsmall":"cad4e2ec","paddingLeft-small":"d70b3c17","paddingLeft-medium":"_8c851bd6","paddingLeft-large":"_078feb3c","paddingLeft-xlarge":"_76ab968c","paddingLeft-xxlarge":"aaca85d7","tablet-paddingLeft-xsmall":"_5eb0e5aa","tablet-paddingLeft-small":"_0384fb4f","tablet-paddingLeft-medium":"edffff6f","tablet-paddingLeft-large":"_873b9a46","tablet-paddingLeft-xlarge":"_89105db5","tablet-paddingLeft-xxlarge":"db1966fe","desktop-paddingLeft-xsmall":"b17f826b","desktop-paddingLeft-small":"_6dc83610","desktop-paddingLeft-medium":"_3421b8b2","desktop-paddingLeft-large":"_68cec7a6","desktop-paddingLeft-xlarge":"_94bde020","desktop-paddingLeft-xxlarge":"b94ee579"};
 
@@ -450,6 +455,18 @@ const HiddenVisually = /*#__PURE__*/polymorphicComponent(function HiddenVisually
 
 var modules_95f1407a = {"tooltip":"_487c82cd"};
 
+const SHOW_DELAY = 1000;
+const HIDE_DELAY = 100;
+
+function useDelayedTooltipState(initialState) {
+  const tooltipState = tooltip.useTooltipState(initialState);
+  const delay = useDelay();
+  return React.useMemo(() => _objectSpread2(_objectSpread2({}, tooltipState), {}, {
+    show: delay(() => tooltipState.show(), SHOW_DELAY),
+    hide: delay(() => tooltipState.hide(), HIDE_DELAY)
+  }), [delay, tooltipState]);
+}
+
 function Tooltip({
   children,
   content,
@@ -458,12 +475,10 @@ function Tooltip({
   withArrow = false,
   exceptionallySetClassName
 }) {
-  const tooltip = react.useTooltipStore({
+  const state = useDelayedTooltipState({
     placement: position,
-    showTimeout: 500,
-    hideTimeout: 100
+    gutter: gapSize
   });
-  const isOpen = tooltip.useState('open');
   const child = React.Children.only(children);
 
   if (!child) {
@@ -492,7 +507,7 @@ function Tooltip({
       const eventKey = event.key;
 
       if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {
-        tooltip.show();
+        state.show();
       }
     }
 
@@ -507,26 +522,25 @@ function Tooltip({
   function handleBlur(event) {
     var _child$props2;
 
-    tooltip.hide();
+    state.hide();
     child == null ? void 0 : (_child$props2 = child.props) == null ? void 0 : _child$props2.onBlur == null ? void 0 : _child$props2.onBlur(event);
   }
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(react.TooltipAnchor, {
-    render: anchorProps => {
-      // Let child props override anchor props so user can specify attributes like tabIndex
-      // Also, do not apply the child's props to TooltipAnchor as props like `as` can create problems
-      // by applying the replacement component/element twice
-      return /*#__PURE__*/React.cloneElement(child, _objectSpread2(_objectSpread2(_objectSpread2({}, child.props), anchorProps), {}, {
-        onFocus: handleFocus,
-        onBlur: handleBlur
-      }));
-    },
-    store: tooltip,
-    ref: child.ref
-  }), isOpen && content ? /*#__PURE__*/React.createElement(Box, {
-    as: react.Tooltip,
-    gutter: gapSize,
-    store: tooltip,
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(tooltip.TooltipAnchor, {
+    state: state,
+    ref: child.ref,
+    described: true
+  }, anchorProps => {
+    // Let child props override anchor props so user can specify attributes like tabIndex
+    // Also, do not apply the child's props to TooltipAnchor as props like `as` can create problems
+    // by applying the replacement component/element twice
+    return /*#__PURE__*/React.cloneElement(child, _objectSpread2(_objectSpread2(_objectSpread2({}, anchorProps), child.props), {}, {
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    }));
+  }), state.open && content ? /*#__PURE__*/React.createElement(Box, {
+    as: tooltip.Tooltip,
+    state: state,
     className: [modules_95f1407a.tooltip, exceptionallySetClassName],
     background: "toast",
     borderRadius: "standard",
@@ -536,7 +550,37 @@ function Tooltip({
     width: "fitContent",
     overflow: "hidden",
     textAlign: "center"
-  }, withArrow ? /*#__PURE__*/React.createElement(react.TooltipArrow, null) : null, typeof content === 'function' ? content() : content) : null);
+  }, withArrow ? /*#__PURE__*/React.createElement(tooltip.TooltipArrow, null) : null, typeof content === 'function' ? content() : content) : null);
+}
+// Internal helpers
+//
+
+/**
+ * Returns a function offering the same interface as setTimeout, but cleans up on unmount.
+ *
+ * The timeout state is shared, and only one delayed function can be active at any given time. If
+ * a new delayed function is called while another one was waiting for its time to run, that older
+ * invocation is cleared and it never runs.
+ *
+ * This is suitable for our use case here, but probably not the most intuitive thing in general.
+ * That's why this is not made a shared util or something like it.
+ */
+
+function useDelay() {
+  const timeoutRef = React.useRef();
+  const clearTimeouts = React.useCallback(function clearTimeouts() {
+    if (timeoutRef.current != null) {
+      clearTimeout(timeoutRef.current);
+    }
+  }, []); // Runs clearTimeouts when the component is unmounted
+
+  React.useEffect(() => clearTimeouts, [clearTimeouts]);
+  return React.useCallback(function delay(fn, delay) {
+    return () => {
+      clearTimeouts();
+      timeoutRef.current = setTimeout(fn, delay);
+    };
+  }, [clearTimeouts]);
 }
 
 var modules_c7f5018f = {"svg":"_51539197","spinner":"_54fbe2b3","tint":"a0c466ed","fill":"_745b73d3"};
@@ -1311,7 +1355,7 @@ function ToastsProvider({
   }, [defaultAutoDismissDelay, defaultDismissLabel, removeToast]);
   return /*#__PURE__*/React__default.createElement(ToastsContext.Provider, {
     value: showToast
-  }, children, /*#__PURE__*/React__default.createElement(react.Portal, null, toasts.length === 0 ? null : /*#__PURE__*/React__default.createElement(Box, {
+  }, children, /*#__PURE__*/React__default.createElement(portal.Portal, null, toasts.length === 0 ? null : /*#__PURE__*/React__default.createElement(Box, {
     className: [modules_d11e18f0.stackedToastsView, containerClassName],
     position: "fixed",
     width: "full",
@@ -1429,7 +1473,7 @@ const Heading = /*#__PURE__*/React.forwardRef(function Heading(_ref, ref) {
   }), children);
 });
 
-var modules_8ebe6db0 = {"prose":"_31409006","darkModeTypography":"_500989c8"};
+var modules_8ebe6db0 = {"prose":"_560c1e08","darkModeTypography":"_8b53b13e"};
 
 const _excluded$f = ["darkModeTypography", "exceptionallySetClassName"];
 /**
@@ -1560,37 +1604,6 @@ function CheckboxIcon(_ref) {
 
 var modules_664a6a80 = {"container":"_84dfdb83","disabled":"_131a2ca4","checked":"_95b1556d","keyFocused":"_49de7ebd","icon":"_6b4b1851","label":"_9047f3bd"};
 
-/**
- * Sets both a function and object React ref.
- */
-
-function setRef(ref, value) {
-  if (typeof ref === 'function') {
-    ref(value);
-  } else if (ref) {
-    ref.current = value;
-  }
-}
-/**
- * Merges React Refs into a single memoized function ref so you can pass it to an element.
- * @example
- * const Component = React.forwardRef((props, ref) => {
- *   const internalRef = React.useRef();
- *   return <div {...props} ref={useForkRef(internalRef, ref)} />;
- * });
- */
-
-
-function useForkRef(...refs) {
-  return React.useMemo(() => {
-    if (!refs.some(Boolean)) return;
-    return value => {
-      refs.forEach(ref => setRef(ref, value));
-    };
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  refs);
-}
-
 const _excluded$j = ["label", "icon", "disabled", "indeterminate", "defaultChecked", "onChange"];
 const CheckboxField = /*#__PURE__*/React.forwardRef(function CheckboxField(_ref, ref) {
   var _ref2, _props$checked, _props$checked2;
@@ -1622,7 +1635,7 @@ const CheckboxField = /*#__PURE__*/React.forwardRef(function CheckboxField(_ref,
   const [checkedState, setChecked] = React.useState((_ref2 = (_props$checked = props.checked) != null ? _props$checked : defaultChecked) != null ? _ref2 : false);
   const isChecked = (_props$checked2 = props.checked) != null ? _props$checked2 : checkedState;
   const internalRef = React.useRef(null);
-  const combinedRef = useForkRef(internalRef, ref);
+  const combinedRef = ariakitReactUtils.useForkRef(internalRef, ref);
   React.useEffect(function setIndeterminate() {
     if (internalRef.current && typeof indeterminate === 'boolean') {
       internalRef.current.indeterminate = indeterminate;
@@ -2233,7 +2246,7 @@ function Modal(_ref) {
       onDismiss == null ? void 0 : onDismiss();
     }
   }, [onDismiss]);
-  const store = react.useDialogStore({
+  const state = dialog.useDialogState({
     open: isOpen,
     setOpen
   });
@@ -2267,7 +2280,7 @@ function Modal(_ref) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(react.Portal, {
+  return /*#__PURE__*/React.createElement(portal.Portal, {
     portalRef: portalRef,
     portalElement: portalElement
   }, /*#__PURE__*/React.createElement(Box, {
@@ -2286,10 +2299,10 @@ function Modal(_ref) {
     autoFocus: autoFocus,
     whiteList: isNotInternalFrame,
     returnFocus: true
-  }, /*#__PURE__*/React.createElement(react.Dialog, _objectSpread2(_objectSpread2({}, props), {}, {
+  }, /*#__PURE__*/React.createElement(dialog.Dialog, _objectSpread2(_objectSpread2({}, props), {}, {
     ref: dialogRef,
     as: Box,
-    store: store,
+    state: state,
     hideOnEscape: hideOnEscape,
     preventBodyScroll: true,
     borderRadius: "full",
@@ -2451,6 +2464,28 @@ function ModalActions(_ref5) {
   }, children));
 }
 
+/**
+ * usePrevious tracks the change of the given value -
+ * when a given value has been changed from a previous call,
+ * it will return the value prior to the change.
+ *
+ * Example:
+ *
+ * const [x, setX] = useState(1)
+ * const prevX = usePrevious(x)
+ *
+ * Suppose `setX(2)` is called, then in the next component render
+ * x = 2 and prevX = 1
+ */
+
+function usePrevious(value) {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+
 var modules_40c67f5b = {"tab":"e96bf360","track":"_430e252d","tab-neutral":"f631ccbe","tab-themed":"_6ba96acc","track-neutral":"ef4cd8d3","track-themed":"_344b3b10"};
 
 const _excluded$s = ["as", "children", "id", "exceptionallySetClassName"],
@@ -2468,21 +2503,26 @@ function Tabs({
   variant = 'neutral',
   onSelectedIdChange
 }) {
-  const tabStore = react.useTabStore({
-    defaultSelectedId,
+  const tabState = tab.useTabState({
     selectedId,
     setSelectedId: onSelectedIdChange
   });
-  const actualSelectedId = tabStore.useState('selectedId');
-  const memoizedTabState = React.useMemo(() => {
-    var _ref;
-
+  const previousDefaultSelectedId = usePrevious(defaultSelectedId);
+  const {
+    selectedId: actualSelectedId,
+    select
+  } = tabState;
+  React.useEffect(function selectDefaultTab() {
+    if (!selectedId && defaultSelectedId !== previousDefaultSelectedId && defaultSelectedId !== actualSelectedId && defaultSelectedId !== undefined) {
+      select(defaultSelectedId);
+    }
+  }, [selectedId, defaultSelectedId, actualSelectedId, select, previousDefaultSelectedId]);
+  const memoizedTabState = React.useMemo(function memoizeTabState() {
     return {
-      tabStore,
-      variant,
-      selectedId: (_ref = selectedId != null ? selectedId : actualSelectedId) != null ? _ref : null
+      tabState,
+      variant
     };
-  }, [variant, tabStore, selectedId, actualSelectedId]);
+  }, [variant, tabState]);
   return /*#__PURE__*/React.createElement(TabsContext.Provider, {
     value: memoizedTabState
   }, children);
@@ -2492,27 +2532,30 @@ function Tabs({
  */
 
 
-const Tab = /*#__PURE__*/polymorphicComponent(function Tab(_ref2, ref) {
+const Tab = /*#__PURE__*/polymorphicComponent(function Tab(_ref, ref) {
   let {
     as,
     children,
     id,
     exceptionallySetClassName
-  } = _ref2,
-      props = _objectWithoutProperties(_ref2, _excluded$s);
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$s);
 
   const tabContextValue = React.useContext(TabsContext);
-  if (!tabContextValue) return null;
+
+  if (!tabContextValue) {
+    return null;
+  }
+
   const {
     variant,
-    tabStore
+    tabState
   } = tabContextValue;
-  const className = classNames(exceptionallySetClassName, modules_40c67f5b.tab, modules_40c67f5b["tab-" + variant]);
-  return /*#__PURE__*/React.createElement(react.Tab, _objectSpread2(_objectSpread2({}, props), {}, {
+  return /*#__PURE__*/React.createElement(tab.Tab, _objectSpread2(_objectSpread2({}, props), {}, {
     as: as,
-    className: className,
+    className: classNames(exceptionallySetClassName, modules_40c67f5b.tab, modules_40c67f5b["tab-" + variant]),
     id: id,
-    store: tabStore,
+    state: tabState,
     ref: ref
   }), children);
 });
@@ -2520,12 +2563,12 @@ const Tab = /*#__PURE__*/polymorphicComponent(function Tab(_ref2, ref) {
  * A component used to group `<Tab>` elements together.
  */
 
-function TabList(_ref3) {
+function TabList(_ref2) {
   let {
     children,
     space
-  } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded2$2);
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded2$2);
 
   const tabContextValue = React.useContext(TabsContext);
 
@@ -2534,15 +2577,15 @@ function TabList(_ref3) {
   }
 
   const {
-    tabStore,
+    tabState,
     variant
   } = tabContextValue;
   return (
     /*#__PURE__*/
     // The extra <Box> prevents <Inline>'s negative margins from collapsing when used in a flex container
     // which will render the track with the wrong height
-    React.createElement(Box, null, /*#__PURE__*/React.createElement(react.TabList, _objectSpread2({
-      store: tabStore,
+    React.createElement(Box, null, /*#__PURE__*/React.createElement(tab.TabList, _objectSpread2({
+      state: tabState,
       as: Box,
       position: "relative",
       width: "maxContent"
@@ -2554,24 +2597,22 @@ function TabList(_ref3) {
   );
 }
 /**
- * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a
- * corresponding `<Tab>` component.
+ * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a corresponding `<Tab>` component.
  */
 
 
-const TabPanel = /*#__PURE__*/polymorphicComponent(function TabPanel(_ref4, ref) {
+const TabPanel = /*#__PURE__*/polymorphicComponent(function TabPanel(_ref3, ref) {
   let {
     children,
     id,
     as,
     render = 'always'
-  } = _ref4,
-      props = _objectWithoutProperties(_ref4, _excluded3$1);
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded3$1);
 
   const tabContextValue = React.useContext(TabsContext);
   const [tabRendered, setTabRendered] = React.useState(false);
-  const selectedId = tabContextValue == null ? void 0 : tabContextValue.tabStore.useState('selectedId');
-  const tabIsActive = selectedId === id;
+  const tabIsActive = (tabContextValue == null ? void 0 : tabContextValue.tabState.selectedId) === id;
   React.useEffect(function trackTabRenderedState() {
     if (!tabRendered && tabIsActive) {
       setTabRendered(true);
@@ -2583,28 +2624,28 @@ const TabPanel = /*#__PURE__*/polymorphicComponent(function TabPanel(_ref4, ref)
   }
 
   const {
-    tabStore
+    tabState
   } = tabContextValue;
   const shouldRender = render === 'always' || render === 'active' && tabIsActive || render === 'lazy' && (tabIsActive || tabRendered);
-  return shouldRender ? /*#__PURE__*/React.createElement(react.TabPanel, _objectSpread2(_objectSpread2({}, props), {}, {
-    tabId: id,
-    store: tabStore,
+  return shouldRender ? /*#__PURE__*/React.createElement(tab.TabPanel, _objectSpread2(_objectSpread2({
+    tabId: id
+  }, props), {}, {
+    state: tabState,
     as: as,
     ref: ref
   }), children) : null;
 });
 /**
- * Allows content to be rendered based on the current tab being selected while outside of the
- * TabPanel component. Can be placed freely within the main `<Tabs>` component.
+ * Allows content to be rendered based on the current tab being selected while outside of the TabPanel
+ * component. Can be placed freely within the main `<Tabs>` component.
  */
 
 function TabAwareSlot({
   children
 }) {
   const tabContextValue = React.useContext(TabsContext);
-  const selectedId = tabContextValue == null ? void 0 : tabContextValue.tabStore.useState('selectedId');
   return tabContextValue ? children({
-    selectedId
+    selectedId: tabContextValue == null ? void 0 : tabContextValue.tabState.selectedId
   }) : null;
 }
 
@@ -2632,20 +2673,27 @@ function Menu(_ref) {
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$t);
 
-  const [anchorRect, setAnchorRect] = React.useState(null);
-  const getAnchorRect = React.useMemo(() => anchorRect ? () => anchorRect : null, [anchorRect]);
-  const menuStore = react.useMenuStore(_objectSpread2({
-    focusLoop: true
+  const [anchorRect, handleAnchorRectChange] = React.useState(null);
+  const getAnchorRect = React.useMemo(() => {
+    return anchorRect ? () => anchorRect : undefined;
+  }, [anchorRect]);
+  const state = Ariakit.useMenuState(_objectSpread2({
+    focusLoop: true,
+    gutter: 8,
+    shift: 4,
+    getAnchorRect
   }, props));
+  React.useEffect(() => {
+    if (!state.open) handleAnchorRectChange(null);
+  }, [state.open]);
   const handleItemSelect = React.useCallback(function handleItemSelect(value) {
-    onItemSelect == null ? void 0 : onItemSelect(value);
+    if (onItemSelect) onItemSelect(value);
   }, [onItemSelect]);
   const value = React.useMemo(() => ({
-    menuStore,
+    state,
     handleItemSelect,
-    getAnchorRect,
-    setAnchorRect
-  }), [menuStore, handleItemSelect, getAnchorRect, setAnchorRect]);
+    handleAnchorRectChange
+  }), [state, handleItemSelect]);
   return /*#__PURE__*/React.createElement(MenuContext.Provider, {
     value: value
   }, children);
@@ -2662,10 +2710,10 @@ const MenuButton = /*#__PURE__*/polymorphicComponent(function MenuButton(_ref2,
       props = _objectWithoutProperties(_ref2, _excluded2$3);
 
   const {
-    menuStore
+    state
   } = React.useContext(MenuContext);
-  return /*#__PURE__*/React.createElement(react.MenuButton, _objectSpread2(_objectSpread2({}, props), {}, {
-    store: menuStore,
+  return /*#__PURE__*/React.createElement(Ariakit.MenuButton, _objectSpread2(_objectSpread2({}, props), {}, {
+    state: state,
     ref: ref,
     className: classNames('reactist_menubutton', exceptionallySetClassName)
   }));
@@ -2680,17 +2728,17 @@ const ContextMenuTrigger = /*#__PURE__*/polymorphicComponent(function ContextMen
       props = _objectWithoutProperties(_ref3, _excluded3$2);
 
   const {
-    setAnchorRect,
-    menuStore
+    handleAnchorRectChange,
+    state
   } = React.useContext(MenuContext);
-  const handleContextMenu = React.useCallback(function handleContextMenu(event) {
+  const handleContextMenu = React.useCallback(event => {
     event.preventDefault();
-    setAnchorRect({
+    handleAnchorRectChange({
       x: event.clientX,
       y: event.clientY
     });
-    menuStore.show();
-  }, [setAnchorRect, menuStore]);
+    state.show();
+  }, [handleAnchorRectChange, state]);
   return /*#__PURE__*/React.createElement(component, _objectSpread2(_objectSpread2({}, props), {}, {
     onContextMenu: handleContextMenu,
     ref
@@ -2708,19 +2756,14 @@ const MenuList = /*#__PURE__*/polymorphicComponent(function MenuList(_ref4, ref)
       props = _objectWithoutProperties(_ref4, _excluded4$1);
 
   const {
-    menuStore,
-    getAnchorRect
+    state
   } = React.useContext(MenuContext);
-  const isOpen = menuStore.useState('open');
-  return isOpen ? /*#__PURE__*/React.createElement(react.Portal, {
+  return state.open ? /*#__PURE__*/React.createElement(portal.Portal, {
     preserveTabOrder: true
-  }, /*#__PURE__*/React.createElement(react.Menu, _objectSpread2(_objectSpread2({}, props), {}, {
-    store: menuStore,
-    gutter: 8,
-    shift: 4,
+  }, /*#__PURE__*/React.createElement(Ariakit.Menu, _objectSpread2(_objectSpread2({}, props), {}, {
+    state: state,
     ref: ref,
     className: classNames('reactist_menulist', exceptionallySetClassName),
-    getAnchorRect: getAnchorRect != null ? getAnchorRect : undefined,
     modal: modal
   }))) : null;
 });
@@ -2743,11 +2786,11 @@ const MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref5, ref)
 
   const {
     handleItemSelect,
-    menuStore
+    state
   } = React.useContext(MenuContext);
   const {
     hide
-  } = menuStore;
+  } = state;
   const handleClick = React.useCallback(function handleClick(event) {
     onClick == null ? void 0 : onClick(event);
     const onSelectResult = onSelect && !event.defaultPrevented ? onSelect() : undefined;
@@ -2755,9 +2798,9 @@ const MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref5, ref)
     handleItemSelect(value);
     if (shouldClose) hide();
   }, [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value]);
-  return /*#__PURE__*/React.createElement(react.MenuItem, _objectSpread2(_objectSpread2({}, props), {}, {
+  return /*#__PURE__*/React.createElement(Ariakit.MenuItem, _objectSpread2(_objectSpread2({}, props), {}, {
     as: as,
-    store: menuStore,
+    state: state,
     ref: ref,
     onClick: handleClick,
     className: exceptionallySetClassName,
@@ -2792,11 +2835,11 @@ const SubMenu = /*#__PURE__*/React.forwardRef(function SubMenu({
 }, ref) {
   const {
     handleItemSelect: parentMenuItemSelect,
-    menuStore
+    state
   } = React.useContext(MenuContext);
   const {
     hide: parentMenuHide
-  } = menuStore;
+  } = state;
   const handleSubItemSelect = React.useCallback(function handleSubItemSelect(value) {
     if (onItemSelect) onItemSelect(value);
     parentMenuItemSelect(value);
@@ -2810,9 +2853,9 @@ const SubMenu = /*#__PURE__*/React.forwardRef(function SubMenu({
   }, [button]);
   return /*#__PURE__*/React.createElement(Menu, {
     onItemSelect: handleSubItemSelect
-  }, /*#__PURE__*/React.createElement(react.MenuItem, {
+  }, /*#__PURE__*/React.createElement(Ariakit.MenuItem, {
     as: "div",
-    store: menuStore,
+    state: state,
     ref: ref,
     hideOnClick: false
   }, renderMenuButton), list);
@@ -2833,11 +2876,11 @@ const MenuGroup = /*#__PURE__*/polymorphicComponent(function MenuGroup(_ref6, re
       props = _objectWithoutProperties(_ref6, _excluded6);
 
   const {
-    menuStore
+    state
   } = React.useContext(MenuContext);
-  return /*#__PURE__*/React.createElement(react.MenuGroup, _objectSpread2(_objectSpread2({}, props), {}, {
+  return /*#__PURE__*/React.createElement(Ariakit.MenuGroup, _objectSpread2(_objectSpread2({}, props), {}, {
     ref: ref,
-    store: menuStore,
+    state: state,
     className: exceptionallySetClassName
   }), label ? /*#__PURE__*/React.createElement("div", {
     role: "presentation",