@doist/reactist 17.0.0 → 17.1.0

package/dist/reactist.cjs.development.js

@@ -1486,7 +1486,7 @@ function CheckboxIcon(_ref) {
   }));
 }
 
-var modules_664a6a80 = {"container":"_96c4d12f","disabled":"_5048e2a5","checked":"_42187b48","keyFocused":"_3510166f"};
+var modules_664a6a80 = {"container":"_699e1db3","disabled":"_75d63cc5","checked":"_9b28a965","keyFocused":"f892a2b4"};
 
 const _excluded$i = ["label", "disabled", "indeterminate", "defaultChecked", "onChange"];
 const CheckboxField = /*#__PURE__*/React.forwardRef(function CheckboxField(_ref, ref) {
@@ -3299,9 +3299,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 +3322,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 +3363,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 +3425,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 +3489,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 +3511,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 +3869,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;