@doist/reactist 18.0.0 → 19.0.0

package/dist/reactist.cjs.development.js

@@ -10,16 +10,16 @@ var classNames = _interopDefault(require('classnames'));
 var flattenChildren = _interopDefault(require('react-keyed-flatten-children'));
 var tooltip = require('ariakit/tooltip');
 var portal = require('ariakit/portal');
-var ariakitUtils = require('ariakit-utils');
+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 Ariakit = require('ariakit/menu');
 var dialog$1 = require('@reach/dialog');
 
 function ownKeys(object, enumerableOnly) {
@@ -520,17 +520,26 @@ function Tooltip({
     child == null ? void 0 : (_child$props = child.props) == null ? void 0 : _child$props.onFocus == null ? void 0 : _child$props.onFocus(event);
   }
 
+  function handleBlur(event) {
+    var _child$props2;
+
+    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(tooltip.TooltipAnchor, {
     state: state,
     ref: child.ref,
-    onFocus: handleFocus,
     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({}, anchorProps), child.props));
-  }), state.visible ? /*#__PURE__*/React.createElement(Box, {
+    return /*#__PURE__*/React.cloneElement(child, _objectSpread2(_objectSpread2(_objectSpread2({}, anchorProps), child.props), {}, {
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    }));
+  }), state.open ? /*#__PURE__*/React.createElement(Box, {
     as: tooltip.Tooltip,
     state: state,
     className: [modules_95f1407a.tooltip, exceptionallySetClassName],
@@ -1530,7 +1539,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 = ariakitUtils.useForkRef(internalRef, ref);
+  const combinedRef = ariakitReactUtils.useForkRef(internalRef, ref);
   React.useEffect(function setIndeterminate() {
     if (internalRef.current && typeof indeterminate === 'boolean') {
       internalRef.current.indeterminate = indeterminate;
@@ -1745,7 +1754,7 @@ const PasswordField = /*#__PURE__*/React.forwardRef(function PasswordField(_ref,
 
   const id = useId(props.id);
   const internalRef = React.useRef(null);
-  const inputRef = ariakitUtils.useForkRef(internalRef, ref);
+  const inputRef = ariakitReactUtils.useForkRef(internalRef, ref);
   const [isPasswordVisible, setPasswordVisible] = React.useState(false);
 
   function togglePasswordVisibility() {
@@ -2099,23 +2108,24 @@ function Avatar(_ref) {
 
 Avatar.displayName = 'Avatar';
 
-var modules_33c7c985 = {"badge":"_1eb9b834","badge-neutral":"e02d9b99","badge-positive":"_0243fb89","badge-color":"_85c0ffa3"};
+var modules_33c7c985 = {"badge":"c717b894","badge-info":"_0fddcc47","badge-positive":"_62550d9b","badge-promote":"_5fdf5bab","badge-attention":"_2d52906f"};
 
-const _excluded$o = ["variant", "children", "exceptionallySetClassName"];
-const Badge = /*#__PURE__*/polymorphicComponent(function Badge(_ref, ref) {
+const _excluded$o = ["tone", "label"];
+
+function Badge(_ref) {
   let {
-    variant = 'neutral',
-    children,
-    exceptionallySetClassName
+    tone,
+    label
   } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded$o);
+      props = _objectWithoutProperties(_ref, _excluded$o);
 
-  return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, rest), {}, {
-    ref: ref,
+  return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
+    as: "span" // It enables putting the badge inside a button (https://stackoverflow.com/a/12982334)
+    ,
     display: "inline",
-    className: [modules_33c7c985.badge, modules_33c7c985["badge-" + variant], exceptionallySetClassName]
-  }), children);
-});
+    className: [modules_33c7c985.badge, modules_33c7c985["badge-" + tone]]
+  }), label);
+}
 
 var modules_8f59d13b = {"overlay":"_868392ae","fadein":"_63d7ee15","fitContent":"b8548bf2","container":"_31956461","full":"_1007df83","large":"_10c275aa","medium":"_0ac526b4","small":"_30f38fdb","xlarge":"_54868e8b","expand":"c0bc68bc","buttonContainer":"_6527332a","headerContent":"_4750dc1b"};
 
@@ -2159,14 +2169,14 @@ function Modal(_ref) {
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$p);
 
-  const setVisible = React.useCallback(visible => {
+  const setOpen = React.useCallback(visible => {
     if (!visible) {
       onDismiss == null ? void 0 : onDismiss();
     }
   }, [onDismiss]);
   const state = dialog.useDialogState({
-    visible: isOpen,
-    setVisible
+    open: isOpen,
+    setOpen
   });
   const contextValue = React.useMemo(() => ({
     onDismiss,
@@ -2198,9 +2208,7 @@ function Modal(_ref) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(portal.Portal // @ts-expect-error `portalRef` doesn't accept MutableRefObject initialized as null
-  , {
-    // @ts-expect-error `portalRef` doesn't accept MutableRefObject initialized as null
+  return /*#__PURE__*/React.createElement(portal.Portal, {
     portalRef: portalRef,
     portalElement: portalElement
   }, /*#__PURE__*/React.createElement(Box, {
@@ -2569,7 +2577,243 @@ function TabAwareSlot({
   }) : null;
 }
 
-const _excluded$r = ["type", "variant", "size", "loading", "disabled", "tooltip", "onClick", "children"];
+const _excluded$r = ["children", "onItemSelect"],
+      _excluded2$3 = ["exceptionallySetClassName"],
+      _excluded3$2 = ["as"],
+      _excluded4$1 = ["exceptionallySetClassName", "modal"],
+      _excluded5$1 = ["value", "children", "onSelect", "hideOnSelect", "onClick", "exceptionallySetClassName", "as"],
+      _excluded6 = ["label", "children", "exceptionallySetClassName"];
+const MenuContext = /*#__PURE__*/React.createContext( // Ariakit gives us no means to obtain a valid initial/default value of type MenuStateReturn
+// (it is normally obtained by calling useMenuState but we can't call hooks outside components).
+// This is however of little consequence since this value is only used if some of the components
+// are used outside Menu, something that should not happen and we do not support.
+// @ts-expect-error
+{});
+/**
+ * Wrapper component to control a menu. It does not render anything, only providing the state
+ * management for the menu components inside it.
+ */
+
+function Menu(_ref) {
+  let {
+    children,
+    onItemSelect
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$r);
+
+  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));
+  const handleItemSelect = React.useCallback(function handleItemSelect(value) {
+    if (onItemSelect) onItemSelect(value);
+  }, [onItemSelect]);
+  const value = React.useMemo(() => ({
+    state,
+    handleItemSelect,
+    handleAnchorRectChange
+  }), [state, handleItemSelect]);
+  return /*#__PURE__*/React.createElement(MenuContext.Provider, {
+    value: value
+  }, children);
+}
+/**
+ * A button to toggle a dropdown menu open or closed.
+ */
+
+
+const MenuButton = /*#__PURE__*/polymorphicComponent(function MenuButton(_ref2, ref) {
+  let {
+    exceptionallySetClassName
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded2$3);
+
+  const {
+    state
+  } = React.useContext(MenuContext);
+  return /*#__PURE__*/React.createElement(Ariakit.MenuButton, _objectSpread2(_objectSpread2({}, props), {}, {
+    state: state,
+    ref: ref,
+    className: classNames('reactist_menubutton', exceptionallySetClassName)
+  }));
+}); //
+// ContextMenuTrigger
+//
+
+const ContextMenuTrigger = /*#__PURE__*/polymorphicComponent(function ContextMenuTrigger(_ref3, ref) {
+  let {
+    as: component = 'div'
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded3$2);
+
+  const {
+    handleAnchorRectChange,
+    state
+  } = React.useContext(MenuContext);
+  const handleContextMenu = React.useCallback(event => {
+    event.preventDefault();
+    handleAnchorRectChange({
+      x: event.clientX,
+      y: event.clientY
+    });
+    state.show();
+  }, [handleAnchorRectChange, state]);
+  return /*#__PURE__*/React.createElement(component, _objectSpread2(_objectSpread2({}, props), {}, {
+    onContextMenu: handleContextMenu,
+    ref
+  }));
+});
+/**
+ * The dropdown menu itself, containing a list of menu items.
+ */
+
+const MenuList = /*#__PURE__*/polymorphicComponent(function MenuList(_ref4, ref) {
+  let {
+    exceptionallySetClassName,
+    modal = true
+  } = _ref4,
+      props = _objectWithoutProperties(_ref4, _excluded4$1);
+
+  const {
+    state
+  } = React.useContext(MenuContext);
+  return state.open ? /*#__PURE__*/React.createElement(portal.Portal, {
+    preserveTabOrder: true
+  }, /*#__PURE__*/React.createElement(Ariakit.Menu, _objectSpread2(_objectSpread2({}, props), {}, {
+    state: state,
+    ref: ref,
+    className: classNames('reactist_menulist', exceptionallySetClassName),
+    modal: modal
+  }))) : null;
+});
+/**
+ * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`
+ * callback.
+ */
+
+const MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref5, ref) {
+  let {
+    value,
+    children,
+    onSelect,
+    hideOnSelect = true,
+    onClick,
+    exceptionallySetClassName,
+    as = 'button'
+  } = _ref5,
+      props = _objectWithoutProperties(_ref5, _excluded5$1);
+
+  const {
+    handleItemSelect,
+    state
+  } = React.useContext(MenuContext);
+  const {
+    hide
+  } = state;
+  const handleClick = React.useCallback(function handleClick(event) {
+    onClick == null ? void 0 : onClick(event);
+    const onSelectResult = onSelect && !event.defaultPrevented ? onSelect() : undefined;
+    const shouldClose = onSelectResult !== false && hideOnSelect;
+    handleItemSelect(value);
+    if (shouldClose) hide();
+  }, [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value]);
+  return /*#__PURE__*/React.createElement(Ariakit.MenuItem, _objectSpread2(_objectSpread2({}, props), {}, {
+    as: as,
+    state: state,
+    ref: ref,
+    onClick: handleClick,
+    className: exceptionallySetClassName,
+    hideOnClick: false
+  }), children);
+});
+/**
+ * This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have
+ * a sub-menu.
+ *
+ * Its children are expected to have the structure of a first level menu (a `MenuButton` and a
+ * `MenuList`).
+ *
+ * ```jsx
+ * <MenuItem label="Edit profile" />
+ * <SubMenu>
+ *   <MenuButton>More options</MenuButton>
+ *   <MenuList>
+ *     <MenuItem label="Preferences" />
+ *     <MenuItem label="Sign out" />
+ *   </MenuList>
+ * </SubMenu>
+ * ```
+ *
+ * The `MenuButton` will become a menu item in the current menu items list, and it will lead to
+ * opening a sub-menu with the menu items list below it.
+ */
+
+const SubMenu = /*#__PURE__*/React.forwardRef(function SubMenu({
+  children,
+  onItemSelect
+}, ref) {
+  const {
+    handleItemSelect: parentMenuItemSelect,
+    state
+  } = React.useContext(MenuContext);
+  const {
+    hide: parentMenuHide
+  } = state;
+  const handleSubItemSelect = React.useCallback(function handleSubItemSelect(value) {
+    if (onItemSelect) onItemSelect(value);
+    parentMenuItemSelect(value);
+    parentMenuHide();
+  }, [parentMenuHide, parentMenuItemSelect, onItemSelect]);
+  const [button, list] = React.Children.toArray(children); // Ariakit needs to be able to pass props to the MenuButton
+  // and combine it with the MenuItem component
+
+  const renderMenuButton = React.useCallback(function renderMenuButton(props) {
+    return /*#__PURE__*/React.cloneElement(button, props);
+  }, [button]);
+  return /*#__PURE__*/React.createElement(Menu, {
+    onItemSelect: handleSubItemSelect
+  }, /*#__PURE__*/React.createElement(Ariakit.MenuItem, {
+    as: "div",
+    state: state,
+    ref: ref,
+    hideOnClick: false
+  }, renderMenuButton), list);
+});
+/**
+ * A way to semantically group some menu items.
+ *
+ * This group does not add any visual separator. You can do that yourself adding `<hr />` elements
+ * before and/or after the group if you so wish.
+ */
+
+const MenuGroup = /*#__PURE__*/polymorphicComponent(function MenuGroup(_ref6, ref) {
+  let {
+    label,
+    children,
+    exceptionallySetClassName
+  } = _ref6,
+      props = _objectWithoutProperties(_ref6, _excluded6);
+
+  const {
+    state
+  } = React.useContext(MenuContext);
+  return /*#__PURE__*/React.createElement(Ariakit.MenuGroup, _objectSpread2(_objectSpread2({}, props), {}, {
+    ref: ref,
+    state: state,
+    className: exceptionallySetClassName
+  }), label ? /*#__PURE__*/React.createElement("div", {
+    role: "presentation",
+    className: "reactist_menugroup__label"
+  }, label) : null, children);
+});
+
+const _excluded$s = ["type", "variant", "size", "loading", "disabled", "tooltip", "onClick", "children"];
 /**
  * @deprecated
  */
@@ -2585,7 +2829,7 @@ const Button$1 = /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
     onClick,
     children
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$r);
+      props = _objectWithoutProperties(_ref, _excluded$s);
 
   const className = classNames('reactist_button', variant ? "reactist_button--" + variant : null, size !== 'default' ? "reactist_button--" + size : null, {
     'reactist_button--loading': loading
@@ -2608,7 +2852,7 @@ Button$1.defaultProps = {
   disabled: false
 };
 
-const _excluded$s = ["children", "onClick", "tooltip", "className"];
+const _excluded$t = ["children", "onClick", "tooltip", "className"];
 
 class Box$1 extends React.Component {
   constructor(props, context) {
@@ -2761,7 +3005,7 @@ const Trigger = /*#__PURE__*/React.forwardRef(function Trigger(_ref, ref) {
     tooltip,
     className
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$s);
+      props = _objectWithoutProperties(_ref, _excluded$t);
 
   function handleClick(event) {
     event.preventDefault();
@@ -2888,7 +3132,7 @@ function ColorItem({
 
 ColorItem.displayName = 'ColorItem';
 
-const _excluded$t = ["children", "className", "translateKey", "isMac"];
+const _excluded$u = ["children", "className", "translateKey", "isMac"];
 // Support for setting up how to translate modifiers globally.
 //
 
@@ -2970,7 +3214,7 @@ function KeyboardShortcut(_ref) {
     translateKey = globalTranslateKey,
     isMac = (_navigator$platform$t = (_navigator$platform = navigator.platform) == null ? void 0 : _navigator$platform.toUpperCase().includes('MAC')) != null ? _navigator$platform$t : false
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$t);
+      props = _objectWithoutProperties(_ref, _excluded$u);
 
   const shortcuts = typeof children === 'string' ? [children] : children;
   return /*#__PURE__*/React.createElement("span", _objectSpread2({
@@ -3376,241 +3620,6 @@ Time.defaultProps = {
   }
 };
 
-const _excluded$u = ["children", "onItemSelect"],
-      _excluded2$3 = ["exceptionallySetClassName"],
-      _excluded3$2 = ["as"],
-      _excluded4$1 = ["exceptionallySetClassName"],
-      _excluded5$1 = ["value", "children", "onSelect", "hideOnSelect", "onClick", "exceptionallySetClassName", "as"],
-      _excluded6 = ["label", "children", "exceptionallySetClassName"];
-const MenuContext = /*#__PURE__*/React.createContext( // Ariakit gives us no means to obtain a valid initial/default value of type MenuStateReturn
-// (it is normally obtained by calling useMenuState but we can't call hooks outside components).
-// This is however of little consequence since this value is only used if some of the components
-// are used outside Menu, something that should not happen and we do not support.
-// @ts-expect-error
-{});
-/**
- * Wrapper component to control a menu. It does not render anything, only providing the state
- * management for the menu components inside it. Note that if you are relying on the `[role='menu']`
- * attribute to style the menu list, it is applied a `menubar` role instead in Safari.
- */
-
-function Menu(_ref) {
-  let {
-    children,
-    onItemSelect
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$u);
-
-  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));
-  const handleItemSelect = React.useCallback(function handleItemSelect(value) {
-    if (onItemSelect) onItemSelect(value);
-  }, [onItemSelect]);
-  const value = React.useMemo(() => ({
-    state,
-    handleItemSelect,
-    handleAnchorRectChange
-  }), [state, handleItemSelect]);
-  return /*#__PURE__*/React.createElement(MenuContext.Provider, {
-    value: value
-  }, children);
-}
-/**
- * A button to toggle a dropdown menu open or closed.
- */
-
-
-const MenuButton = /*#__PURE__*/polymorphicComponent(function MenuButton(_ref2, ref) {
-  let {
-    exceptionallySetClassName
-  } = _ref2,
-      props = _objectWithoutProperties(_ref2, _excluded2$3);
-
-  const {
-    state
-  } = React.useContext(MenuContext);
-  return /*#__PURE__*/React.createElement(Ariakit.MenuButton, _objectSpread2(_objectSpread2({}, props), {}, {
-    state: state,
-    ref: ref,
-    className: classNames('reactist_menubutton', exceptionallySetClassName)
-  }));
-}); //
-// ContextMenuTrigger
-//
-
-const ContextMenuTrigger = /*#__PURE__*/polymorphicComponent(function ContextMenuTrigger(_ref3, ref) {
-  let {
-    as: component = 'div'
-  } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded3$2);
-
-  const {
-    handleAnchorRectChange,
-    state
-  } = React.useContext(MenuContext);
-  const handleContextMenu = React.useCallback(event => {
-    event.preventDefault();
-    handleAnchorRectChange({
-      x: event.clientX,
-      y: event.clientY
-    });
-    state.show();
-  }, [handleAnchorRectChange, state]);
-  return /*#__PURE__*/React.createElement(component, _objectSpread2(_objectSpread2({}, props), {}, {
-    onContextMenu: handleContextMenu,
-    ref
-  }));
-});
-/**
- * The dropdown menu itself, containing a list of menu items.
- */
-
-const MenuList = /*#__PURE__*/polymorphicComponent(function MenuList(_ref4, ref) {
-  let {
-    exceptionallySetClassName
-  } = _ref4,
-      props = _objectWithoutProperties(_ref4, _excluded4$1);
-
-  const {
-    state
-  } = React.useContext(MenuContext);
-  return state.visible ? /*#__PURE__*/React.createElement(portal.Portal, {
-    preserveTabOrder: true
-  }, /*#__PURE__*/React.createElement(Ariakit.Menu, _objectSpread2(_objectSpread2({}, props), {}, {
-    state: state,
-    ref: ref,
-    className: classNames('reactist_menulist', exceptionallySetClassName)
-  }))) : null;
-});
-/**
- * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`
- * callback.
- */
-
-const MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref5, ref) {
-  let {
-    value,
-    children,
-    onSelect,
-    hideOnSelect = true,
-    onClick,
-    exceptionallySetClassName,
-    as = 'button'
-  } = _ref5,
-      props = _objectWithoutProperties(_ref5, _excluded5$1);
-
-  const {
-    handleItemSelect,
-    state
-  } = React.useContext(MenuContext);
-  const {
-    hide
-  } = state;
-  const handleClick = React.useCallback(function handleClick(event) {
-    onClick == null ? void 0 : onClick(event);
-    const onSelectResult = onSelect && !event.defaultPrevented ? onSelect() : undefined;
-    const shouldClose = onSelectResult !== false && hideOnSelect;
-    handleItemSelect(value);
-    if (shouldClose) hide();
-  }, [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value]);
-  return /*#__PURE__*/React.createElement(Ariakit.MenuItem, _objectSpread2(_objectSpread2({}, props), {}, {
-    as: as,
-    state: state,
-    ref: ref,
-    onClick: handleClick,
-    className: exceptionallySetClassName,
-    hideOnClick: false
-  }), children);
-});
-/**
- * This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have
- * a sub-menu.
- *
- * Its children are expected to have the structure of a first level menu (a `MenuButton` and a
- * `MenuList`).
- *
- * ```jsx
- * <MenuItem label="Edit profile" />
- * <SubMenu>
- *   <MenuButton>More options</MenuButton>
- *   <MenuList>
- *     <MenuItem label="Preferences" />
- *     <MenuItem label="Sign out" />
- *   </MenuList>
- * </SubMenu>
- * ```
- *
- * The `MenuButton` will become a menu item in the current menu items list, and it will lead to
- * opening a sub-menu with the menu items list below it.
- */
-
-const SubMenu = /*#__PURE__*/React.forwardRef(function SubMenu({
-  children,
-  onItemSelect
-}, ref) {
-  const {
-    handleItemSelect: parentMenuItemSelect,
-    state
-  } = React.useContext(MenuContext);
-  const {
-    hide: parentMenuHide
-  } = state;
-  const handleSubItemSelect = React.useCallback(function handleSubItemSelect(value) {
-    if (onItemSelect) onItemSelect(value);
-    parentMenuItemSelect(value);
-    parentMenuHide();
-  }, [parentMenuHide, parentMenuItemSelect, onItemSelect]);
-  const [button, list] = React.Children.toArray(children); // Ariakit needs to be able to pass props to the MenuButton
-  // and combine it with the MenuItem component
-
-  const renderMenuButton = React.useCallback(function renderMenuButton(props) {
-    return /*#__PURE__*/React.cloneElement(button, props);
-  }, [button]);
-  return /*#__PURE__*/React.createElement(Menu, {
-    onItemSelect: handleSubItemSelect
-  }, /*#__PURE__*/React.createElement(Ariakit.MenuItem, {
-    as: "div",
-    state: state,
-    ref: ref,
-    hideOnClick: false
-  }, renderMenuButton), list);
-});
-/**
- * A way to semantically group some menu items.
- *
- * This group does not add any visual separator. You can do that yourself adding `<hr />` elements
- * before and/or after the group if you so wish.
- */
-
-const MenuGroup = /*#__PURE__*/polymorphicComponent(function MenuGroup(_ref6, ref) {
-  let {
-    label,
-    children,
-    exceptionallySetClassName
-  } = _ref6,
-      props = _objectWithoutProperties(_ref6, _excluded6);
-
-  const {
-    state
-  } = React.useContext(MenuContext);
-  return /*#__PURE__*/React.createElement(Ariakit.MenuGroup, _objectSpread2(_objectSpread2({}, props), {}, {
-    ref: ref,
-    state: state,
-    className: exceptionallySetClassName
-  }), label ? /*#__PURE__*/React.createElement("div", {
-    role: "presentation",
-    className: "reactist_menugroup__label"
-  }, label) : null, children);
-});
-
 const Input = /*#__PURE__*/React.forwardRef((props, ref) => {
   const className = classNames('reactist_input', props.className);
   return /*#__PURE__*/React.createElement("input", _objectSpread2(_objectSpread2({}, props), {}, {