@doist/reactist 25.0.0-beta → 25.0.0-beta.2

package/dist/reactist.cjs.development.js

@@ -111,7 +111,7 @@ function _objectWithoutProperties(source, excluded) {
  * convenience over merely using React.forwardRef directly, and then manually forcing the resulting
  * value to be typed using `as PolymorphicComponent<…>`.
  *
- * @see PolymorphicComponent for details about what this type does
+ * @deprecated Use Ariakit's composition instead (https://ariakit.org/guide/composition)
  */
 
 function polymorphicComponent(render) {
@@ -577,19 +577,20 @@ function Tooltip({
     render: child,
     store: tooltip,
     ref: child.ref
-  }), isOpen && content ? /*#__PURE__*/React.createElement(Box, {
-    as: react.Tooltip,
-    gutter: gapSize,
+  }), isOpen && content ? /*#__PURE__*/React.createElement(react.Tooltip, {
     store: tooltip,
-    className: [modules_95f1407a.tooltip, exceptionallySetClassName],
-    background: "toast",
-    borderRadius: "standard",
-    paddingX: "small",
-    paddingY: "xsmall",
-    maxWidth: "medium",
-    width: "fitContent",
-    overflow: "hidden",
-    textAlign: "center"
+    gutter: gapSize,
+    render: /*#__PURE__*/React.createElement(Box, {
+      className: [modules_95f1407a.tooltip, exceptionallySetClassName],
+      background: "toast",
+      borderRadius: "standard",
+      paddingX: "small",
+      paddingY: "xsmall",
+      maxWidth: "medium",
+      width: "fitContent",
+      overflow: "hidden",
+      textAlign: "center"
+    })
   }, withArrow ? /*#__PURE__*/React.createElement(react.TooltipArrow, null) : null, typeof content === 'function' ? content() : content) : null);
 }
 
@@ -663,7 +664,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
  * [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).
  */
 
-const IconButton = /*#__PURE__*/React.forwardRef(function Button(_ref2, ref) {
+const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(_ref2, ref) {
   let {
     variant,
     tone = 'normal',
@@ -2192,7 +2193,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$p = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "exceptionallySetOverlayClassName", "autoFocus", "hideOnEscape", "hideOnInteractOutside", "children", "portalElement", "onKeyDown"],
+const _excluded$p = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "exceptionallySetOverlayClassName", "autoFocus", "hideOnEscape", "hideOnInteractOutside", "children", "portalElement", "onKeyDown", "className"],
       _excluded2$2 = ["children", "button", "withDivider", "exceptionallySetClassName"],
       _excluded3 = ["exceptionallySetClassName", "children"],
       _excluded4 = ["exceptionallySetClassName", "withDivider"],
@@ -2229,7 +2230,9 @@ function Modal(_ref) {
     hideOnInteractOutside = true,
     children,
     portalElement,
-    onKeyDown
+    onKeyDown,
+    // @ts-expect-error we want to make sure to not pass it to the Dialog component
+    className
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$p);
 
@@ -2289,9 +2292,8 @@ function Modal(_ref) {
     className: classNames(modules_8f59d13b.overlay, modules_8f59d13b[height], modules_8f59d13b[width], exceptionallySetOverlayClassName),
 
     /**
-     * We're using `onPointerDown` instead of `onClick` to prevent
-     * the modal from closing when the click starts inside the modal
-     * and ends on the backdrop.
+     * We're using `onPointerDown` instead of `onClick` to prevent the modal from
+     * closing when the click starts inside the modal and ends on the backdrop.
      */
     onPointerDown: hideOnInteractOutside ? handleBackdropClick : undefined,
     ref: backdropRef
@@ -2301,17 +2303,18 @@ function Modal(_ref) {
     returnFocus: true
   }, /*#__PURE__*/React.createElement(react.Dialog, _objectSpread2(_objectSpread2({}, props), {}, {
     ref: dialogRef,
-    as: Box,
+    render: /*#__PURE__*/React.createElement(Box, {
+      borderRadius: "full",
+      background: "default",
+      display: "flex",
+      flexDirection: "column",
+      overflow: "hidden",
+      height: height === 'expand' ? 'full' : undefined,
+      flexGrow: height === 'expand' ? 1 : 0
+    }),
+    className: classNames(exceptionallySetClassName, modules_8f59d13b.container),
     store: store,
     preventBodyScroll: true,
-    borderRadius: "full",
-    background: "default",
-    display: "flex",
-    flexDirection: "column",
-    overflow: "hidden",
-    height: height === 'expand' ? 'full' : undefined,
-    flexGrow: height === 'expand' ? 1 : 0,
-    className: [exceptionallySetClassName, modules_8f59d13b.container],
     // Disable focus lock as we set up our own using ReactFocusLock
     modal: false,
     autoFocus: false,
@@ -2467,9 +2470,8 @@ function ModalActions(_ref5) {
 
 var modules_40c67f5b = {"tab":"e96bf360","track":"_430e252d","tab-neutral":"f631ccbe","tab-themed":"_6ba96acc","track-neutral":"ef4cd8d3","track-themed":"_344b3b10"};
 
-const _excluded$q = ["as", "children", "id", "exceptionallySetClassName"],
-      _excluded2$3 = ["children", "space"],
-      _excluded3$1 = ["children", "id", "as", "render"];
+const _excluded$q = ["children", "space"],
+      _excluded2$3 = ["children", "id", "renderMode"];
 const TabsContext = /*#__PURE__*/React.createContext(null);
 /**
  * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.
@@ -2506,15 +2508,13 @@ function Tabs({
  */
 
 
-const Tab = /*#__PURE__*/polymorphicComponent(function Tab(_ref2, ref) {
-  let {
-    as,
-    children,
-    id,
-    exceptionallySetClassName
-  } = _ref2,
-      props = _objectWithoutProperties(_ref2, _excluded$q);
-
+const Tab = /*#__PURE__*/React.forwardRef(function Tab({
+  children,
+  id,
+  exceptionallySetClassName,
+  render,
+  onClick
+}, ref) {
   const tabContextValue = React.useContext(TabsContext);
   if (!tabContextValue) return null;
   const {
@@ -2522,24 +2522,25 @@ const Tab = /*#__PURE__*/polymorphicComponent(function Tab(_ref2, ref) {
     tabStore
   } = tabContextValue;
   const className = classNames(exceptionallySetClassName, modules_40c67f5b.tab, modules_40c67f5b["tab-" + variant]);
-  return /*#__PURE__*/React.createElement(react.Tab, _objectSpread2(_objectSpread2({}, props), {}, {
-    as: as,
-    className: className,
+  return /*#__PURE__*/React.createElement(react.Tab, {
     id: id,
+    ref: ref,
     store: tabStore,
-    ref: ref
-  }), children);
+    render: render,
+    className: className,
+    onClick: onClick
+  }, children);
 });
 /**
  * A component used to group `<Tab>` elements together.
  */
 
-function TabList(_ref3) {
+function TabList(_ref2) {
   let {
     children,
     space
-  } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded2$3);
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded$q);
 
   const tabContextValue = React.useContext(TabsContext);
 
@@ -2553,13 +2554,14 @@ function TabList(_ref3) {
   } = tabContextValue;
   return (
     /*#__PURE__*/
-    // The extra <Box> prevents <Inline>'s negative margins from collapsing when used in a flex container
+    // The extra <div> 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({
+    React.createElement("div", null, /*#__PURE__*/React.createElement(react.TabList, _objectSpread2({
       store: tabStore,
-      as: Box,
-      position: "relative",
-      width: "maxContent"
+      render: /*#__PURE__*/React.createElement(Box, {
+        position: "relative",
+        width: "maxContent"
+      })
     }, props), /*#__PURE__*/React.createElement(Box, {
       className: [modules_40c67f5b.track, modules_40c67f5b["track-" + variant]]
     }), /*#__PURE__*/React.createElement(Inline, {
@@ -2573,14 +2575,13 @@ function TabList(_ref3) {
  */
 
 
-const TabPanel = /*#__PURE__*/polymorphicComponent(function TabPanel(_ref4, ref) {
+const TabPanel = /*#__PURE__*/React.forwardRef(function TabPanel(_ref3, ref) {
   let {
     children,
     id,
-    as,
-    render = 'always'
-  } = _ref4,
-      props = _objectWithoutProperties(_ref4, _excluded3$1);
+    renderMode = 'always'
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded2$3);
 
   const tabContextValue = React.useContext(TabsContext);
   const [tabRendered, setTabRendered] = React.useState(false);
@@ -2599,11 +2600,10 @@ const TabPanel = /*#__PURE__*/polymorphicComponent(function TabPanel(_ref4, ref)
   const {
     tabStore
   } = tabContextValue;
-  const shouldRender = render === 'always' || render === 'active' && tabIsActive || render === 'lazy' && (tabIsActive || tabRendered);
+  const shouldRender = renderMode === 'always' || renderMode === 'active' && tabIsActive || renderMode === 'lazy' && (tabIsActive || tabRendered);
   return shouldRender ? /*#__PURE__*/React.createElement(react.TabPanel, _objectSpread2(_objectSpread2({}, props), {}, {
     tabId: id,
     store: tabStore,
-    as: as,
     ref: ref
   }), children) : null;
 });
@@ -2624,16 +2624,16 @@ function TabAwareSlot({
 
 const _excluded$r = ["children", "onItemSelect"],
       _excluded2$4 = ["exceptionallySetClassName"],
-      _excluded3$2 = ["as"],
+      _excluded3$1 = ["render"],
       _excluded4$1 = ["exceptionallySetClassName", "modal"],
-      _excluded5$1 = ["value", "children", "onSelect", "hideOnSelect", "onClick", "exceptionallySetClassName", "as"],
+      _excluded5$1 = ["value", "children", "onSelect", "hideOnSelect", "onClick", "exceptionallySetClassName"],
       _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
-{});
+const MenuContext = /*#__PURE__*/React.createContext({
+  menuStore: null,
+  handleItemSelect: () => undefined,
+  getAnchorRect: null,
+  setAnchorRect: () => undefined
+});
 /**
  * Wrapper component to control a menu. It does not render anything, only providing the state
  * management for the menu components inside it.
@@ -2666,7 +2666,7 @@ function Menu(_ref) {
  */
 
 
-const MenuButton = /*#__PURE__*/polymorphicComponent(function MenuButton(_ref2, ref) {
+const MenuButton = /*#__PURE__*/React.forwardRef(function MenuButton(_ref2, ref) {
   let {
     exceptionallySetClassName
   } = _ref2,
@@ -2675,25 +2675,32 @@ const MenuButton = /*#__PURE__*/polymorphicComponent(function MenuButton(_ref2,
   const {
     menuStore
   } = React.useContext(MenuContext);
+
+  if (!menuStore) {
+    throw new Error('MenuButton must be wrapped in <Menu/>');
+  }
+
   return /*#__PURE__*/React.createElement(react.MenuButton, _objectSpread2(_objectSpread2({}, props), {}, {
     store: menuStore,
     ref: ref,
     className: classNames('reactist_menubutton', exceptionallySetClassName)
   }));
-}); //
-// ContextMenuTrigger
-//
-
-const ContextMenuTrigger = /*#__PURE__*/polymorphicComponent(function ContextMenuTrigger(_ref3, ref) {
+});
+const ContextMenuTrigger = /*#__PURE__*/React.forwardRef(function ContextMenuTrigger(_ref3, ref) {
   let {
-    as: component = 'div'
+    render
   } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded3$2);
+      props = _objectWithoutProperties(_ref3, _excluded3$1);
 
   const {
     setAnchorRect,
     menuStore
   } = React.useContext(MenuContext);
+
+  if (!menuStore) {
+    throw new Error('ContextMenuTrigger must be wrapped in <Menu/>');
+  }
+
   const handleContextMenu = React.useCallback(function handleContextMenu(event) {
     event.preventDefault();
     setAnchorRect({
@@ -2706,16 +2713,17 @@ const ContextMenuTrigger = /*#__PURE__*/polymorphicComponent(function ContextMen
   React.useEffect(() => {
     if (!isOpen) setAnchorRect(null);
   }, [isOpen, setAnchorRect]);
-  return /*#__PURE__*/React.createElement(component, _objectSpread2(_objectSpread2({}, props), {}, {
+  return /*#__PURE__*/React.createElement(react.Role.div, _objectSpread2(_objectSpread2({}, props), {}, {
     onContextMenu: handleContextMenu,
-    ref
+    ref: ref,
+    render: render
   }));
 });
 /**
  * The dropdown menu itself, containing a list of menu items.
  */
 
-const MenuList = /*#__PURE__*/polymorphicComponent(function MenuList(_ref4, ref) {
+const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(_ref4, ref) {
   let {
     exceptionallySetClassName,
     modal = true
@@ -2726,6 +2734,11 @@ const MenuList = /*#__PURE__*/polymorphicComponent(function MenuList(_ref4, ref)
     menuStore,
     getAnchorRect
   } = React.useContext(MenuContext);
+
+  if (!menuStore) {
+    throw new Error('MenuList must be wrapped in <Menu/>');
+  }
+
   const isOpen = menuStore.useState('open');
   return isOpen ? /*#__PURE__*/React.createElement(react.Portal, {
     preserveTabOrder: true
@@ -2744,15 +2757,14 @@ const MenuList = /*#__PURE__*/polymorphicComponent(function MenuList(_ref4, ref)
  * callback.
  */
 
-const MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref5, ref) {
+const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(_ref5, ref) {
   let {
     value,
     children,
     onSelect,
     hideOnSelect = true,
     onClick,
-    exceptionallySetClassName,
-    as = 'button'
+    exceptionallySetClassName
   } = _ref5,
       props = _objectWithoutProperties(_ref5, _excluded5$1);
 
@@ -2760,6 +2772,11 @@ const MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref5, ref)
     handleItemSelect,
     menuStore
   } = React.useContext(MenuContext);
+
+  if (!menuStore) {
+    throw new Error('MenuItem must be wrapped in <Menu/>');
+  }
+
   const {
     hide
   } = menuStore;
@@ -2771,7 +2788,6 @@ const MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref5, ref)
     if (shouldClose) hide();
   }, [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value]);
   return /*#__PURE__*/React.createElement(react.MenuItem, _objectSpread2(_objectSpread2({}, props), {}, {
-    as: as,
     store: menuStore,
     ref: ref,
     onClick: handleClick,
@@ -2809,6 +2825,11 @@ const SubMenu = /*#__PURE__*/React.forwardRef(function SubMenu({
     handleItemSelect: parentMenuItemSelect,
     menuStore
   } = React.useContext(MenuContext);
+
+  if (!menuStore) {
+    throw new Error('SubMenu must be wrapped in <Menu/>');
+  }
+
   const {
     hide: parentMenuHide
   } = menuStore;
@@ -2817,19 +2838,16 @@ const SubMenu = /*#__PURE__*/React.forwardRef(function SubMenu({
     parentMenuItemSelect == null ? void 0 : 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]);
+  const [button, list] = React.Children.toArray(children);
+  const buttonElement = button;
   return /*#__PURE__*/React.createElement(Menu, {
     onItemSelect: handleSubItemSelect
   }, /*#__PURE__*/React.createElement(react.MenuItem, {
-    as: "div",
     store: menuStore,
     ref: ref,
-    hideOnClick: false
-  }, renderMenuButton), list);
+    hideOnClick: false,
+    render: buttonElement
+  }, buttonElement.props.children), list);
 });
 /**
  * A way to semantically group some menu items.
@@ -2838,7 +2856,7 @@ const SubMenu = /*#__PURE__*/React.forwardRef(function SubMenu({
  * before and/or after the group if you so wish.
  */
 
-const MenuGroup = /*#__PURE__*/polymorphicComponent(function MenuGroup(_ref6, ref) {
+const MenuGroup = /*#__PURE__*/React.forwardRef(function MenuGroup(_ref6, ref) {
   let {
     label,
     children,
@@ -2849,6 +2867,11 @@ const MenuGroup = /*#__PURE__*/polymorphicComponent(function MenuGroup(_ref6, re
   const {
     menuStore
   } = React.useContext(MenuContext);
+
+  if (!menuStore) {
+    throw new Error('MenuGroup must be wrapped in <Menu/>');
+  }
+
   return /*#__PURE__*/React.createElement(react.MenuGroup, _objectSpread2(_objectSpread2({}, props), {}, {
     ref: ref,
     store: menuStore,
@@ -3666,7 +3689,11 @@ Time.defaultProps = {
   }
 };
 
-const Input = /*#__PURE__*/React.forwardRef((props, ref) => {
+/**
+ * @deprecated
+ */
+
+const Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
   const className = classNames('reactist_input', props.className);
   return /*#__PURE__*/React.createElement("input", _objectSpread2(_objectSpread2({}, props), {}, {
     className: className,