@doist/reactist 23.1.0 → 24.0.0-beta

package/dist/reactist.cjs.development.js

@@ -8,15 +8,10 @@ var React = require('react');
 var React__default = _interopDefault(React);
 var classNames = _interopDefault(require('classnames'));
 var flattenChildren = _interopDefault(require('react-keyed-flatten-children'));
-var tooltip = require('ariakit/tooltip');
-var portal = require('ariakit/portal');
-var ariakitReactUtils = require('ariakit-react-utils');
+var react = require('@ariakit/react');
 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'));
@@ -455,18 +450,6 @@ 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,
@@ -475,10 +458,12 @@ function Tooltip({
   withArrow = false,
   exceptionallySetClassName
 }) {
-  const state = useDelayedTooltipState({
+  const tooltip = react.useTooltipStore({
     placement: position,
-    gutter: gapSize
+    showTimeout: 500,
+    hideTimeout: 100
   });
+  const isOpen = tooltip.useState('open');
   const child = React.Children.only(children);
 
   if (!child) {
@@ -507,7 +492,7 @@ function Tooltip({
       const eventKey = event.key;
 
       if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {
-        state.show();
+        tooltip.show();
       }
     }
 
@@ -522,25 +507,26 @@ function Tooltip({
   function handleBlur(event) {
     var _child$props2;
 
-    state.hide();
+    tooltip.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(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,
+  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,
     className: [modules_95f1407a.tooltip, exceptionallySetClassName],
     background: "toast",
     borderRadius: "standard",
@@ -550,37 +536,7 @@ function Tooltip({
     width: "fitContent",
     overflow: "hidden",
     textAlign: "center"
-  }, 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]);
+  }, withArrow ? /*#__PURE__*/React.createElement(react.TooltipArrow, null) : null, typeof content === 'function' ? content() : content) : null);
 }
 
 var modules_c7f5018f = {"svg":"_51539197","spinner":"_54fbe2b3","tint":"a0c466ed","fill":"_745b73d3"};
@@ -1355,7 +1311,7 @@ function ToastsProvider({
   }, [defaultAutoDismissDelay, defaultDismissLabel, removeToast]);
   return /*#__PURE__*/React__default.createElement(ToastsContext.Provider, {
     value: showToast
-  }, children, /*#__PURE__*/React__default.createElement(portal.Portal, null, toasts.length === 0 ? null : /*#__PURE__*/React__default.createElement(Box, {
+  }, children, /*#__PURE__*/React__default.createElement(react.Portal, null, toasts.length === 0 ? null : /*#__PURE__*/React__default.createElement(Box, {
     className: [modules_d11e18f0.stackedToastsView, containerClassName],
     position: "fixed",
     width: "full",
@@ -1604,6 +1560,37 @@ 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;
@@ -1635,7 +1622,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 = ariakitReactUtils.useForkRef(internalRef, ref);
+  const combinedRef = useForkRef(internalRef, ref);
   React.useEffect(function setIndeterminate() {
     if (internalRef.current && typeof indeterminate === 'boolean') {
       internalRef.current.indeterminate = indeterminate;
@@ -2201,7 +2188,7 @@ function Badge(_ref) {
 
 var modules_8f59d13b = {"overlay":"_8aa86dd3","fadein":"_20c07ee6","fitContent":"_713bc08f","container":"_45139719","full":"ec8619a2","large":"_86a1d5a4","medium":"_11d61de3","small":"aee19643","xlarge":"fe449c81","expand":"_61ffb38f","buttonContainer":"_49ffdac0","headerContent":"ee92ccb3"};
 
-const _excluded$r = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "exceptionallySetOverlayClassName", "autoFocus", "hideOnEscape", "hideOnInteractOutside", "children", "portalElement"],
+const _excluded$r = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "exceptionallySetOverlayClassName", "autoFocus", "hideOnEscape", "hideOnInteractOutside", "children", "portalElement", "onKeyDown"],
       _excluded2$1 = ["children", "button", "withDivider", "exceptionallySetClassName"],
       _excluded3 = ["exceptionallySetClassName", "children"],
       _excluded4 = ["exceptionallySetClassName", "withDivider"],
@@ -2237,7 +2224,8 @@ function Modal(_ref) {
     hideOnEscape = true,
     hideOnInteractOutside = true,
     children,
-    portalElement
+    portalElement,
+    onKeyDown
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$r);
 
@@ -2246,7 +2234,7 @@ function Modal(_ref) {
       onDismiss == null ? void 0 : onDismiss();
     }
   }, [onDismiss]);
-  const state = dialog.useDialogState({
+  const store = react.useDialogStore({
     open: isOpen,
     setOpen
   });
@@ -2275,12 +2263,20 @@ function Modal(_ref) {
 
     return ariaHidden.hideOthers(portalRef.current);
   }, [isOpen]);
+  const handleKeyDown = React.useCallback(function handleKeyDown(event) {
+    if (hideOnEscape && onDismiss != null && event.key === 'Escape' && !event.defaultPrevented) {
+      event.stopPropagation();
+      onDismiss();
+    }
+
+    onKeyDown == null ? void 0 : onKeyDown(event);
+  }, [onDismiss, hideOnEscape, onKeyDown]);
 
   if (!isOpen) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(portal.Portal, {
+  return /*#__PURE__*/React.createElement(react.Portal, {
     portalRef: portalRef,
     portalElement: portalElement
   }, /*#__PURE__*/React.createElement(Box, {
@@ -2299,11 +2295,10 @@ function Modal(_ref) {
     autoFocus: autoFocus,
     whiteList: isNotInternalFrame,
     returnFocus: true
-  }, /*#__PURE__*/React.createElement(dialog.Dialog, _objectSpread2(_objectSpread2({}, props), {}, {
+  }, /*#__PURE__*/React.createElement(react.Dialog, _objectSpread2(_objectSpread2({}, props), {}, {
     ref: dialogRef,
     as: Box,
-    state: state,
-    hideOnEscape: hideOnEscape,
+    store: store,
     preventBodyScroll: true,
     borderRadius: "full",
     background: "default",
@@ -2321,7 +2316,9 @@ function Modal(_ref) {
     // Disable portal and backdrop as we control their markup
     portal: false,
     backdrop: false,
-    hideOnInteractOutside: false
+    hideOnInteractOutside: false,
+    hideOnEscape: false,
+    onKeyDown: handleKeyDown
   }), /*#__PURE__*/React.createElement(ModalContext.Provider, {
     value: contextValue
   }, children)))));
@@ -2464,28 +2461,6 @@ 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"],
@@ -2503,26 +2478,21 @@ function Tabs({
   variant = 'neutral',
   onSelectedIdChange
 }) {
-  const tabState = tab.useTabState({
+  const tabStore = react.useTabStore({
+    defaultSelectedId,
     selectedId,
     setSelectedId: onSelectedIdChange
   });
-  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() {
+  const actualSelectedId = tabStore.useState('selectedId');
+  const memoizedTabState = React.useMemo(() => {
+    var _ref;
+
     return {
-      tabState,
-      variant
+      tabStore,
+      variant,
+      selectedId: (_ref = selectedId != null ? selectedId : actualSelectedId) != null ? _ref : null
     };
-  }, [variant, tabState]);
+  }, [variant, tabStore, selectedId, actualSelectedId]);
   return /*#__PURE__*/React.createElement(TabsContext.Provider, {
     value: memoizedTabState
   }, children);
@@ -2532,30 +2502,27 @@ function Tabs({
  */
 
 
-const Tab = /*#__PURE__*/polymorphicComponent(function Tab(_ref, ref) {
+const Tab = /*#__PURE__*/polymorphicComponent(function Tab(_ref2, ref) {
   let {
     as,
     children,
     id,
     exceptionallySetClassName
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$s);
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded$s);
 
   const tabContextValue = React.useContext(TabsContext);
-
-  if (!tabContextValue) {
-    return null;
-  }
-
+  if (!tabContextValue) return null;
   const {
     variant,
-    tabState
+    tabStore
   } = tabContextValue;
-  return /*#__PURE__*/React.createElement(tab.Tab, _objectSpread2(_objectSpread2({}, props), {}, {
+  const className = classNames(exceptionallySetClassName, modules_40c67f5b.tab, modules_40c67f5b["tab-" + variant]);
+  return /*#__PURE__*/React.createElement(react.Tab, _objectSpread2(_objectSpread2({}, props), {}, {
     as: as,
-    className: classNames(exceptionallySetClassName, modules_40c67f5b.tab, modules_40c67f5b["tab-" + variant]),
+    className: className,
     id: id,
-    state: tabState,
+    store: tabStore,
     ref: ref
   }), children);
 });
@@ -2563,12 +2530,12 @@ const Tab = /*#__PURE__*/polymorphicComponent(function Tab(_ref, ref) {
  * A component used to group `<Tab>` elements together.
  */
 
-function TabList(_ref2) {
+function TabList(_ref3) {
   let {
     children,
     space
-  } = _ref2,
-      props = _objectWithoutProperties(_ref2, _excluded2$2);
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded2$2);
 
   const tabContextValue = React.useContext(TabsContext);
 
@@ -2577,15 +2544,15 @@ function TabList(_ref2) {
   }
 
   const {
-    tabState,
+    tabStore,
     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(tab.TabList, _objectSpread2({
-      state: tabState,
+    React.createElement(Box, null, /*#__PURE__*/React.createElement(react.TabList, _objectSpread2({
+      store: tabStore,
       as: Box,
       position: "relative",
       width: "maxContent"
@@ -2597,22 +2564,24 @@ function TabList(_ref2) {
   );
 }
 /**
- * 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(_ref3, ref) {
+const TabPanel = /*#__PURE__*/polymorphicComponent(function TabPanel(_ref4, ref) {
   let {
     children,
     id,
     as,
     render = 'always'
-  } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded3$1);
+  } = _ref4,
+      props = _objectWithoutProperties(_ref4, _excluded3$1);
 
   const tabContextValue = React.useContext(TabsContext);
   const [tabRendered, setTabRendered] = React.useState(false);
-  const tabIsActive = (tabContextValue == null ? void 0 : tabContextValue.tabState.selectedId) === id;
+  const selectedId = tabContextValue == null ? void 0 : tabContextValue.tabStore.useState('selectedId');
+  const tabIsActive = selectedId === id;
   React.useEffect(function trackTabRenderedState() {
     if (!tabRendered && tabIsActive) {
       setTabRendered(true);
@@ -2624,28 +2593,28 @@ const TabPanel = /*#__PURE__*/polymorphicComponent(function TabPanel(_ref3, ref)
   }
 
   const {
-    tabState
+    tabStore
   } = tabContextValue;
   const shouldRender = render === 'always' || render === 'active' && tabIsActive || render === 'lazy' && (tabIsActive || tabRendered);
-  return shouldRender ? /*#__PURE__*/React.createElement(tab.TabPanel, _objectSpread2(_objectSpread2({
-    tabId: id
-  }, props), {}, {
-    state: tabState,
+  return shouldRender ? /*#__PURE__*/React.createElement(react.TabPanel, _objectSpread2(_objectSpread2({}, props), {}, {
+    tabId: id,
+    store: tabStore,
     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: tabContextValue == null ? void 0 : tabContextValue.tabState.selectedId
+    selectedId
   }) : null;
 }
 
@@ -2673,27 +2642,20 @@ function Menu(_ref) {
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$t);
 
-  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
+  const [anchorRect, setAnchorRect] = React.useState(null);
+  const getAnchorRect = React.useMemo(() => anchorRect ? () => anchorRect : null, [anchorRect]);
+  const menuStore = react.useMenuStore(_objectSpread2({
+    focusLoop: true
   }, props));
-  React.useEffect(() => {
-    if (!state.open) handleAnchorRectChange(null);
-  }, [state.open]);
   const handleItemSelect = React.useCallback(function handleItemSelect(value) {
-    if (onItemSelect) onItemSelect(value);
+    onItemSelect == null ? void 0 : onItemSelect(value);
   }, [onItemSelect]);
   const value = React.useMemo(() => ({
-    state,
+    menuStore,
     handleItemSelect,
-    handleAnchorRectChange
-  }), [state, handleItemSelect]);
+    getAnchorRect,
+    setAnchorRect
+  }), [menuStore, handleItemSelect, getAnchorRect, setAnchorRect]);
   return /*#__PURE__*/React.createElement(MenuContext.Provider, {
     value: value
   }, children);
@@ -2710,10 +2672,10 @@ const MenuButton = /*#__PURE__*/polymorphicComponent(function MenuButton(_ref2,
       props = _objectWithoutProperties(_ref2, _excluded2$3);
 
   const {
-    state
+    menuStore
   } = React.useContext(MenuContext);
-  return /*#__PURE__*/React.createElement(Ariakit.MenuButton, _objectSpread2(_objectSpread2({}, props), {}, {
-    state: state,
+  return /*#__PURE__*/React.createElement(react.MenuButton, _objectSpread2(_objectSpread2({}, props), {}, {
+    store: menuStore,
     ref: ref,
     className: classNames('reactist_menubutton', exceptionallySetClassName)
   }));
@@ -2728,17 +2690,17 @@ const ContextMenuTrigger = /*#__PURE__*/polymorphicComponent(function ContextMen
       props = _objectWithoutProperties(_ref3, _excluded3$2);
 
   const {
-    handleAnchorRectChange,
-    state
+    setAnchorRect,
+    menuStore
   } = React.useContext(MenuContext);
-  const handleContextMenu = React.useCallback(event => {
+  const handleContextMenu = React.useCallback(function handleContextMenu(event) {
     event.preventDefault();
-    handleAnchorRectChange({
+    setAnchorRect({
       x: event.clientX,
       y: event.clientY
     });
-    state.show();
-  }, [handleAnchorRectChange, state]);
+    menuStore.show();
+  }, [setAnchorRect, menuStore]);
   return /*#__PURE__*/React.createElement(component, _objectSpread2(_objectSpread2({}, props), {}, {
     onContextMenu: handleContextMenu,
     ref
@@ -2756,14 +2718,19 @@ const MenuList = /*#__PURE__*/polymorphicComponent(function MenuList(_ref4, ref)
       props = _objectWithoutProperties(_ref4, _excluded4$1);
 
   const {
-    state
+    menuStore,
+    getAnchorRect
   } = React.useContext(MenuContext);
-  return state.open ? /*#__PURE__*/React.createElement(portal.Portal, {
+  const isOpen = menuStore.useState('open');
+  return isOpen ? /*#__PURE__*/React.createElement(react.Portal, {
     preserveTabOrder: true
-  }, /*#__PURE__*/React.createElement(Ariakit.Menu, _objectSpread2(_objectSpread2({}, props), {}, {
-    state: state,
+  }, /*#__PURE__*/React.createElement(react.Menu, _objectSpread2(_objectSpread2({}, props), {}, {
+    store: menuStore,
+    gutter: 8,
+    shift: 4,
     ref: ref,
     className: classNames('reactist_menulist', exceptionallySetClassName),
+    getAnchorRect: getAnchorRect != null ? getAnchorRect : undefined,
     modal: modal
   }))) : null;
 });
@@ -2786,11 +2753,11 @@ const MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref5, ref)
 
   const {
     handleItemSelect,
-    state
+    menuStore
   } = React.useContext(MenuContext);
   const {
     hide
-  } = state;
+  } = menuStore;
   const handleClick = React.useCallback(function handleClick(event) {
     onClick == null ? void 0 : onClick(event);
     const onSelectResult = onSelect && !event.defaultPrevented ? onSelect() : undefined;
@@ -2798,9 +2765,9 @@ const MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref5, ref)
     handleItemSelect(value);
     if (shouldClose) hide();
   }, [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value]);
-  return /*#__PURE__*/React.createElement(Ariakit.MenuItem, _objectSpread2(_objectSpread2({}, props), {}, {
+  return /*#__PURE__*/React.createElement(react.MenuItem, _objectSpread2(_objectSpread2({}, props), {}, {
     as: as,
-    state: state,
+    store: menuStore,
     ref: ref,
     onClick: handleClick,
     className: exceptionallySetClassName,
@@ -2835,11 +2802,11 @@ const SubMenu = /*#__PURE__*/React.forwardRef(function SubMenu({
 }, ref) {
   const {
     handleItemSelect: parentMenuItemSelect,
-    state
+    menuStore
   } = React.useContext(MenuContext);
   const {
     hide: parentMenuHide
-  } = state;
+  } = menuStore;
   const handleSubItemSelect = React.useCallback(function handleSubItemSelect(value) {
     if (onItemSelect) onItemSelect(value);
     parentMenuItemSelect(value);
@@ -2853,9 +2820,9 @@ const SubMenu = /*#__PURE__*/React.forwardRef(function SubMenu({
   }, [button]);
   return /*#__PURE__*/React.createElement(Menu, {
     onItemSelect: handleSubItemSelect
-  }, /*#__PURE__*/React.createElement(Ariakit.MenuItem, {
+  }, /*#__PURE__*/React.createElement(react.MenuItem, {
     as: "div",
-    state: state,
+    store: menuStore,
     ref: ref,
     hideOnClick: false
   }, renderMenuButton), list);
@@ -2876,11 +2843,11 @@ const MenuGroup = /*#__PURE__*/polymorphicComponent(function MenuGroup(_ref6, re
       props = _objectWithoutProperties(_ref6, _excluded6);
 
   const {
-    state
+    menuStore
   } = React.useContext(MenuContext);
-  return /*#__PURE__*/React.createElement(Ariakit.MenuGroup, _objectSpread2(_objectSpread2({}, props), {}, {
+  return /*#__PURE__*/React.createElement(react.MenuGroup, _objectSpread2(_objectSpread2({}, props), {}, {
     ref: ref,
-    state: state,
+    store: menuStore,
     className: exceptionallySetClassName
   }), label ? /*#__PURE__*/React.createElement("div", {
     role: "presentation",