@doist/reactist 22.0.1-beta → 22.1.0

package/dist/reactist.cjs.development.js

@@ -8,14 +8,18 @@ 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'));
-var dialog = require('@reach/dialog');
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -451,6 +455,18 @@ const HiddenVisually = /*#__PURE__*/polymorphicComponent(function HiddenVisually
 
 var modules_95f1407a = {"tooltip":"_487c82cd"};
 
+const SHOW_DELAY = 500;
+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,
@@ -459,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) {
@@ -493,7 +507,7 @@ function Tooltip({
       const eventKey = event.key;
 
       if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {
-        tooltip.show();
+        state.show();
       }
     }
 
@@ -508,23 +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 => {
-      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",
@@ -534,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"};
@@ -1274,7 +1320,8 @@ function ToastsProvider({
   defaultAutoDismissDelay = 10
   /* seconds */
   ,
-  defaultDismissLabel = 'Close'
+  defaultDismissLabel = 'Close',
+  containerClassName
 }) {
   const [toasts, setToasts] = React__default.useState([]);
   const {
@@ -1307,12 +1354,13 @@ 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, {
-    className: modules_d11e18f0.stackedToastsView,
+  }, 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",
     paddingX: padding,
-    paddingBottom: padding
+    paddingBottom: padding,
+    "data-testid": "toasts-container"
   }, /*#__PURE__*/React__default.createElement(Stack, {
     space: "medium"
   }, toasts.map(_ref => {
@@ -1555,37 +1603,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;
@@ -1617,7 +1634,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;
@@ -2028,7 +2045,7 @@ const SwitchField = /*#__PURE__*/React.forwardRef(function SwitchField(_ref, ref
   }, hint) : null);
 });
 
-var modules_2728c236 = {"textAreaContainer":"fdc243b3","innerContainer":"_5c1dd8bc","bordered":"_269f9e63","error":"d1e4b585","autoExpand":"_10c6f2ef"};
+var modules_2728c236 = {"textAreaContainer":"_29503131","innerContainer":"_6ea894ce","bordered":"e1e8b6a7","error":"_1b94ff46","autoExpand":"e82223c4"};
 
 const _excluded$o = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "hidden", "aria-describedby", "rows", "autoExpand"];
 const TextArea = /*#__PURE__*/React.forwardRef(function TextArea(_ref, ref) {
@@ -2228,7 +2245,7 @@ function Modal(_ref) {
       onDismiss == null ? void 0 : onDismiss();
     }
   }, [onDismiss]);
-  const store = react.useDialogStore({
+  const state = dialog.useDialogState({
     open: isOpen,
     setOpen
   });
@@ -2262,7 +2279,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, {
@@ -2281,10 +2298,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",
@@ -2446,6 +2463,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"],
@@ -2463,21 +2502,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);
@@ -2487,27 +2531,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);
 });
@@ -2515,12 +2562,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);
 
@@ -2529,15 +2576,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"
@@ -2549,24 +2596,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);
@@ -2578,28 +2623,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;
 }
 
@@ -2627,20 +2672,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);
@@ -2657,10 +2709,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)
   }));
@@ -2675,17 +2727,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
@@ -2703,19 +2755,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;
 });
@@ -2738,11 +2785,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;
@@ -2750,9 +2797,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,
@@ -2787,11 +2834,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);
@@ -2805,9 +2852,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);
@@ -2828,11 +2875,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",
@@ -3691,212 +3738,6 @@ Select.defaultProps = {
   disabled: false
 };
 
-var modules_8f59d13b$1 = {"reach-portal":"ad18b0a0","fadein":"f7a1b219","fitContent":"_8ed9bb5c","container":"f67e892e","full":"_4139421e","large":"_649eb5fe","medium":"_5323e676","small":"_56ca7ae6","xlarge":"a7be0fce","overlay":"_88a7a680","expand":"b29456b8","buttonContainer":"_09ef1f4f","headerContent":"_0e5b530a"};
-
-const _excluded$y = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "autoFocus", "children"],
-      _excluded2$4 = ["children", "button", "withDivider", "exceptionallySetClassName"],
-      _excluded3$3 = ["exceptionallySetClassName", "children"],
-      _excluded4$2 = ["exceptionallySetClassName", "withDivider"],
-      _excluded5$2 = ["children"];
-const ModalContext$1 = /*#__PURE__*/React.createContext({
-  onDismiss: undefined,
-  height: 'fitContent'
-});
-
-function isNotInternalFrame$1(element) {
-  return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe');
-}
-/**
- * Renders a modal that sits on top of the rest of the content in the entire page.
- *
- * Follows the WAI-ARIA Dialog (Modal) Pattern.
- *
- * @see DeprecatedModalHeader
- * @see DeprecatedModalFooter
- * @see DeprecatedModalBody
- * @deprecated
- */
-
-
-function DeprecatedModal(_ref) {
-  let {
-    isOpen,
-    onDismiss,
-    height = 'fitContent',
-    width = 'medium',
-    exceptionallySetClassName,
-    autoFocus = true,
-    children
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$y);
-
-  const contextValue = React.useMemo(() => ({
-    onDismiss,
-    height
-  }), [onDismiss, height]);
-  return /*#__PURE__*/React.createElement(dialog.DialogOverlay, {
-    isOpen: isOpen,
-    onDismiss: onDismiss,
-    dangerouslyBypassFocusLock // We're setting up our own focus lock below
-    : true,
-    className: classNames(modules_8f59d13b$1.overlay, modules_8f59d13b$1[height], modules_8f59d13b$1[width]),
-    "data-testid": "modal-overlay"
-  }, /*#__PURE__*/React.createElement(FocusLock, {
-    autoFocus: autoFocus,
-    whiteList: isNotInternalFrame$1,
-    returnFocus: true
-  }, /*#__PURE__*/React.createElement(dialog.DialogContent, _objectSpread2(_objectSpread2({}, props), {}, {
-    as: Box,
-    borderRadius: "full",
-    background: "default",
-    display: "flex",
-    flexDirection: "column",
-    overflow: "hidden",
-    height: height === 'expand' ? 'full' : undefined,
-    flexGrow: height === 'expand' ? 1 : 0,
-    className: [exceptionallySetClassName, modules_8f59d13b$1.container]
-  }), /*#__PURE__*/React.createElement(ModalContext$1.Provider, {
-    value: contextValue
-  }, children))));
-}
-/**
- * The close button rendered by ModalHeader. Provided independently so that consumers can customize
- * the button's label.
- *
- * @see DeprecatedModalHeader
- */
-
-function DeprecatedModalCloseButton(props) {
-  const {
-    onDismiss
-  } = React.useContext(ModalContext$1);
-  const [includeInTabOrder, setIncludeInTabOrder] = React.useState(false);
-  const [isMounted, setIsMounted] = React.useState(false);
-  React.useEffect(function skipAutoFocus() {
-    if (isMounted) {
-      setIncludeInTabOrder(true);
-    } else {
-      setIsMounted(true);
-    }
-  }, [isMounted]);
-  return /*#__PURE__*/React.createElement(Button, _objectSpread2(_objectSpread2({}, props), {}, {
-    variant: "quaternary",
-    onClick: onDismiss,
-    icon: /*#__PURE__*/React.createElement(CloseIcon, null),
-    tabIndex: includeInTabOrder ? 0 : -1
-  }));
-}
-/**
- * Renders a standard modal header area with an optional close button.
- *
- * @see DeprecatedModal
- * @see DeprecatedModalFooter
- * @see DeprecatedModalBody
- */
-
-function DeprecatedModalHeader(_ref2) {
-  let {
-    children,
-    button = true,
-    withDivider = false,
-    exceptionallySetClassName
-  } = _ref2,
-      props = _objectWithoutProperties(_ref2, _excluded2$4);
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
-    as: "header",
-    paddingLeft: "large",
-    paddingRight: button === false || button === null ? 'large' : 'small',
-    paddingY: "small",
-    className: exceptionallySetClassName
-  }), /*#__PURE__*/React.createElement(Columns, {
-    space: "large",
-    alignY: "center"
-  }, /*#__PURE__*/React.createElement(Column, {
-    width: "auto"
-  }, children), button === false || button === null ? /*#__PURE__*/React.createElement("div", {
-    className: modules_8f59d13b$1.headerContent
-  }) : /*#__PURE__*/React.createElement(Column, {
-    width: "content",
-    exceptionallySetClassName: modules_8f59d13b$1.buttonContainer,
-    "data-testid": "button-container"
-  }, typeof button === 'boolean' ? /*#__PURE__*/React.createElement(DeprecatedModalCloseButton, {
-    "aria-label": "Close modal",
-    autoFocus: false
-  }) : button))), withDivider ? /*#__PURE__*/React.createElement(Divider, null) : null);
-}
-/**
- * Renders the body of a modal.
- *
- * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other
- * things, that the contet of the modal body expands or contracts depending on the modal height
- * setting or the size of the content. The body content also automatically scrolls when it's too
- * large to fit the available space.
- *
- * @see DeprecatedModal
- * @see DeprecatedModalHeader
- * @see DeprecatedModalFooter
- */
-
-function DeprecatedModalBody(_ref3) {
-  let {
-    exceptionallySetClassName,
-    children
-  } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded3$3);
-
-  const {
-    height
-  } = React.useContext(ModalContext$1);
-  return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
-    className: exceptionallySetClassName,
-    flexGrow: height === 'expand' ? 1 : 0,
-    height: height === 'expand' ? 'full' : undefined,
-    overflow: "auto"
-  }), /*#__PURE__*/React.createElement(Box, {
-    padding: "large",
-    paddingBottom: "xxlarge"
-  }, children));
-}
-/**
- * Renders a standard modal footer area.
- *
- * @see DeprecatedModal
- * @see DeprecatedModalHeader
- * @see DeprecatedModalBody
- */
-
-function DeprecatedModalFooter(_ref4) {
-  let {
-    exceptionallySetClassName,
-    withDivider = false
-  } = _ref4,
-      props = _objectWithoutProperties(_ref4, _excluded4$2);
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, withDivider ? /*#__PURE__*/React.createElement(Divider, null) : null, /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({
-    as: "footer"
-  }, props), {}, {
-    className: exceptionallySetClassName,
-    padding: "large"
-  })));
-}
-/**
- * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).
- * @see DeprecatedModalFooter
- */
-
-function DeprecatedModalActions(_ref5) {
-  let {
-    children
-  } = _ref5,
-      props = _objectWithoutProperties(_ref5, _excluded5$2);
-
-  return /*#__PURE__*/React.createElement(DeprecatedModalFooter, _objectSpread2({}, props), /*#__PURE__*/React.createElement(Inline, {
-    align: "right",
-    space: "large"
-  }, children));
-}
-
 exports.Alert = Alert;
 exports.Avatar = Avatar;
 exports.Badge = Badge;
@@ -3913,12 +3754,6 @@ exports.ContextMenuTrigger = ContextMenuTrigger;
 exports.DeprecatedButton = Button$1;
 exports.DeprecatedDropdown = Dropdown;
 exports.DeprecatedInput = Input;
-exports.DeprecatedModal = DeprecatedModal;
-exports.DeprecatedModalActions = DeprecatedModalActions;
-exports.DeprecatedModalBody = DeprecatedModalBody;
-exports.DeprecatedModalCloseButton = DeprecatedModalCloseButton;
-exports.DeprecatedModalFooter = DeprecatedModalFooter;
-exports.DeprecatedModalHeader = DeprecatedModalHeader;
 exports.DeprecatedSelect = Select;
 exports.Divider = Divider;
 exports.Heading = Heading;