@doist/reactist 17.0.1 → 17.2.0

package/dist/reactist.cjs.development.js

@@ -2053,7 +2053,7 @@ function Badge(_ref) {
 
 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"};
 
-const _excluded$q = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "autoFocus", "children"],
+const _excluded$q = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "exceptionallySetOverlayClassName", "autoFocus", "children"],
       _excluded2$1 = ["children", "button", "withDivider", "exceptionallySetClassName"],
       _excluded3 = ["exceptionallySetClassName", "children"],
       _excluded4 = ["exceptionallySetClassName", "withDivider"],
@@ -2084,6 +2084,7 @@ function Modal(_ref) {
     height = 'fitContent',
     width = 'medium',
     exceptionallySetClassName,
+    exceptionallySetOverlayClassName,
     autoFocus = true,
     children
   } = _ref,
@@ -2135,7 +2136,7 @@ function Modal(_ref) {
   }, /*#__PURE__*/React.createElement(Box, {
     "data-testid": "modal-overlay",
     "data-overlay": true,
-    className: classNames(modules_8f59d13b.overlay, modules_8f59d13b[height], modules_8f59d13b[width]),
+    className: classNames(modules_8f59d13b.overlay, modules_8f59d13b[height], modules_8f59d13b[width], exceptionallySetOverlayClassName),
     onClick: handleBackdropClick,
     ref: backdropRef
   }, /*#__PURE__*/React.createElement(FocusLock, {
@@ -3299,9 +3300,10 @@ Time.defaultProps = {
 
 const _excluded$v = ["children", "onItemSelect"],
       _excluded2$3 = ["exceptionallySetClassName"],
-      _excluded3$2 = ["exceptionallySetClassName"],
-      _excluded4$1 = ["value", "children", "onSelect", "hideOnSelect", "onClick", "exceptionallySetClassName", "as"],
-      _excluded5$1 = ["label", "children", "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
@@ -3321,17 +3323,23 @@ function Menu(_ref) {
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$v);
 
+  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
+    shift: 4,
+    getAnchorRect
   }, props));
   const handleItemSelect = React.useCallback(function handleItemSelect(value) {
     if (onItemSelect) onItemSelect(value);
   }, [onItemSelect]);
   const value = React.useMemo(() => ({
     state,
-    handleItemSelect
+    handleItemSelect,
+    handleAnchorRectChange
   }), [state, handleItemSelect]);
   return /*#__PURE__*/React.createElement(MenuContext.Provider, {
     value: value
@@ -3356,36 +3364,60 @@ const MenuButton = /*#__PURE__*/polymorphicComponent(function MenuButton(_ref2,
     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(_ref3, ref) {
+const MenuList = /*#__PURE__*/polymorphicComponent(function MenuList(_ref4, ref) {
   let {
     exceptionallySetClassName
-  } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded3$2);
+  } = _ref4,
+      props = _objectWithoutProperties(_ref4, _excluded4$1);
 
   const {
     state
   } = React.useContext(MenuContext);
   return state.visible ? /*#__PURE__*/React.createElement(portal.Portal, {
     preserveTabOrder: true
-  }, /*#__PURE__*/React.createElement(FocusLock, {
-    returnFocus: true
   }, /*#__PURE__*/React.createElement(Ariakit.Menu, _objectSpread2(_objectSpread2({}, props), {}, {
     state: state,
     ref: ref,
     className: classNames('reactist_menulist', exceptionallySetClassName)
-  })))) : null;
+  }))) : 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(_ref4, ref) {
+const MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref5, ref) {
   let {
     value,
     children,
@@ -3394,8 +3426,8 @@ const MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref4, ref)
     onClick,
     exceptionallySetClassName,
     as = 'button'
-  } = _ref4,
-      props = _objectWithoutProperties(_ref4, _excluded4$1);
+  } = _ref5,
+      props = _objectWithoutProperties(_ref5, _excluded5$1);
 
   const {
     handleItemSelect,
@@ -3458,16 +3490,20 @@ const SubMenu = /*#__PURE__*/React.forwardRef(function SubMenu({
     parentMenuItemSelect(value);
     parentMenuHide();
   }, [parentMenuHide, parentMenuItemSelect, onItemSelect]);
-  const [button, list] = React.Children.toArray(children);
-  const menuProps = Ariakit.useMenuItem({
-    state
-  });
+  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.cloneElement(button, _objectSpread2(_objectSpread2({}, menuProps), {}, {
-    className: classNames(menuProps.className, 'reactist_submenu_button'),
-    ref
-  })), list);
+  }, /*#__PURE__*/React.createElement(Ariakit.MenuItem, {
+    as: "div",
+    state: state,
+    ref: ref,
+    hideOnClick: false
+  }, renderMenuButton), list);
 });
 /**
  * A way to semantically group some menu items.
@@ -3476,13 +3512,13 @@ const SubMenu = /*#__PURE__*/React.forwardRef(function SubMenu({
  * before and/or after the group if you so wish.
  */
 
-const MenuGroup = /*#__PURE__*/polymorphicComponent(function MenuGroup(_ref5, ref) {
+const MenuGroup = /*#__PURE__*/polymorphicComponent(function MenuGroup(_ref6, ref) {
   let {
     label,
     children,
     exceptionallySetClassName
-  } = _ref5,
-      props = _objectWithoutProperties(_ref5, _excluded5$1);
+  } = _ref6,
+      props = _objectWithoutProperties(_ref6, _excluded6);
 
   const {
     state
@@ -3834,6 +3870,7 @@ exports.CheckboxField = CheckboxField;
 exports.ColorPicker = ColorPicker;
 exports.Column = Column;
 exports.Columns = Columns;
+exports.ContextMenuTrigger = ContextMenuTrigger;
 exports.DeprecatedButton = Button$1;
 exports.DeprecatedDropdown = Dropdown;
 exports.DeprecatedInput = Input;