@doist/reactist 29.1.1 → 30.0.0

package/es/menu/menu.js

@@ -1,91 +1,341 @@
-import { __rest, __assign } from 'tslib';
+import _extends from '@babel/runtime/helpers/extends';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { c } from 'react-compiler-runtime';
 import * as React from 'react';
-import { MenuButton as MenuButton$1, Role, Portal, Menu as Menu$1, MenuItem as MenuItem$1, MenuGroup as MenuGroup$1, useMenuStore } from '@ariakit/react';
+import { useMenuStore, MenuButton as MenuButton$1, Role, Portal, Menu as Menu$1, MenuItem as MenuItem$1, MenuGroup as MenuGroup$1 } from '@ariakit/react';
 import classNames from 'classnames';
 
-var MenuContext = React.createContext({
-    menuStore: null,
-    handleItemSelect: function () { return undefined; },
-    getAnchorRect: null,
-    setAnchorRect: function () { return undefined; },
+const _excluded = ["children", "onItemSelect"],
+  _excluded2 = ["exceptionallySetClassName"],
+  _excluded3 = ["render"],
+  _excluded4 = ["exceptionallySetClassName", "modal", "flip"],
+  _excluded5 = ["value", "children", "onSelect", "hideOnSelect", "onClick", "exceptionallySetClassName"],
+  _excluded6 = ["label", "children", "exceptionallySetClassName"];
+const MenuContext = /*#__PURE__*/React.createContext({
+  menuStore: null,
+  handleItemSelect: () => undefined,
+  getAnchorRect: null,
+  setAnchorRect: () => undefined
 });
-var SubMenuContext = React.createContext({ isSubMenu: false });
+const SubMenuContext = /*#__PURE__*/React.createContext({
+  isSubMenu: false
+});
+
+//
+// Menu
+//
+
 /**
  * Wrapper component to control a menu. It does not render anything, only providing the state
  * management for the menu components inside it.
  */
-function Menu(_a) {
-    var children = _a.children, onItemSelect = _a.onItemSelect, props = __rest(_a, ["children", "onItemSelect"]);
-    var _b = React.useState(null), anchorRect = _b[0], setAnchorRect = _b[1];
-    var getAnchorRect = React.useMemo(function () { return (anchorRect ? function () { return anchorRect; } : null); }, [anchorRect]);
-    var menuStore = useMenuStore(__assign({ focusLoop: true }, props));
-    var value = React.useMemo(function () { return ({ menuStore: menuStore, handleItemSelect: onItemSelect, getAnchorRect: getAnchorRect, setAnchorRect: setAnchorRect }); }, [menuStore, onItemSelect, getAnchorRect, setAnchorRect]);
-    return React.createElement(MenuContext.Provider, { value: value }, children);
+function Menu(t0) {
+  const $ = c(15);
+  let children;
+  let onItemSelect;
+  let props;
+  if ($[0] !== t0) {
+    var _t = t0;
+    ({
+      children,
+      onItemSelect
+    } = _t);
+    props = _objectWithoutProperties(_t, _excluded);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = onItemSelect;
+    $[3] = props;
+  } else {
+    children = $[1];
+    onItemSelect = $[2];
+    props = $[3];
+  }
+  const [anchorRect, setAnchorRect] = React.useState(null);
+  let t1;
+  if ($[4] !== anchorRect) {
+    t1 = anchorRect ? () => anchorRect : null;
+    $[4] = anchorRect;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  const getAnchorRect = t1;
+  let t2;
+  if ($[6] !== props) {
+    t2 = _objectSpread({
+      focusLoop: true
+    }, props);
+    $[6] = props;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  const menuStore = useMenuStore(t2);
+  let t3;
+  if ($[8] !== getAnchorRect || $[9] !== menuStore || $[10] !== onItemSelect) {
+    t3 = {
+      menuStore,
+      handleItemSelect: onItemSelect,
+      getAnchorRect,
+      setAnchorRect
+    };
+    $[8] = getAnchorRect;
+    $[9] = menuStore;
+    $[10] = onItemSelect;
+    $[11] = t3;
+  } else {
+    t3 = $[11];
+  }
+  const value = t3;
+  let t4;
+  if ($[12] !== children || $[13] !== value) {
+    t4 = /*#__PURE__*/React.createElement(MenuContext.Provider, {
+      value: value
+    }, children);
+    $[12] = children;
+    $[13] = value;
+    $[14] = t4;
+  } else {
+    t4 = $[14];
+  }
+  return t4;
 }
+
+//
+// MenuButton
+//
+
 /**
  * A button to toggle a dropdown menu open or closed.
  */
-var MenuButton = React.forwardRef(function MenuButton(_a, ref) {
-    var exceptionallySetClassName = _a.exceptionallySetClassName, props = __rest(_a, ["exceptionallySetClassName"]);
-    var menuStore = React.useContext(MenuContext).menuStore;
-    if (!menuStore) {
-        throw new Error('MenuButton must be wrapped in <Menu/>');
-    }
-    return (React.createElement(MenuButton$1, __assign({}, props, { store: menuStore, ref: ref, className: classNames('reactist_menubutton', exceptionallySetClassName) })));
+const MenuButton = /*#__PURE__*/React.forwardRef(function MenuButton(t0, ref) {
+  const $ = c(10);
+  let exceptionallySetClassName;
+  let props;
+  if ($[0] !== t0) {
+    var _t2 = t0;
+    ({
+      exceptionallySetClassName
+    } = _t2);
+    props = _objectWithoutProperties(_t2, _excluded2);
+    $[0] = t0;
+    $[1] = exceptionallySetClassName;
+    $[2] = props;
+  } else {
+    exceptionallySetClassName = $[1];
+    props = $[2];
+  }
+  const {
+    menuStore
+  } = React.useContext(MenuContext);
+  if (!menuStore) {
+    throw new Error("MenuButton must be wrapped in <Menu/>");
+  }
+  let t1;
+  if ($[3] !== exceptionallySetClassName) {
+    t1 = classNames("reactist_menubutton", exceptionallySetClassName);
+    $[3] = exceptionallySetClassName;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== menuStore || $[6] !== props || $[7] !== ref || $[8] !== t1) {
+    t2 = /*#__PURE__*/React.createElement(MenuButton$1, _extends({}, props, {
+      store: menuStore,
+      ref: ref,
+      className: t1
+    }));
+    $[5] = menuStore;
+    $[6] = props;
+    $[7] = ref;
+    $[8] = t1;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  return t2;
 });
-var ContextMenuTrigger = React.forwardRef(function ContextMenuTrigger(_a, ref) {
-    var render = _a.render, props = __rest(_a, ["render"]);
-    var _b = React.useContext(MenuContext), setAnchorRect = _b.setAnchorRect, menuStore = _b.menuStore;
-    if (!menuStore) {
-        throw new Error('ContextMenuTrigger must be wrapped in <Menu/>');
-    }
-    var handleContextMenu = React.useCallback(function handleContextMenu(event) {
-        event.preventDefault();
-        setAnchorRect({ x: event.clientX, y: event.clientY });
-        menuStore.show();
-    }, [setAnchorRect, menuStore]);
-    var isOpen = menuStore.useState('open');
-    React.useEffect(function () {
-        if (!isOpen)
-            setAnchorRect(null);
-    }, [isOpen, setAnchorRect]);
-    return React.createElement(Role.div, __assign({}, props, { onContextMenu: handleContextMenu, ref: ref, render: render }));
+
+//
+// ContextMenuTrigger
+//
+
+const ContextMenuTrigger = /*#__PURE__*/React.forwardRef(function ContextMenuTrigger(_ref, ref) {
+  let {
+      render
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded3);
+  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({
+      x: event.clientX,
+      y: event.clientY
+    });
+    menuStore.show();
+  }, [setAnchorRect, menuStore]);
+  const isOpen = menuStore.useState('open');
+  React.useEffect(() => {
+    if (!isOpen) setAnchorRect(null);
+  }, [isOpen, setAnchorRect]);
+  return /*#__PURE__*/React.createElement(Role.div, _extends({}, props, {
+    onContextMenu: handleContextMenu,
+    ref: ref,
+    render: render
+  }));
 });
+
+//
+// MenuList
+//
+
 /**
  * The dropdown menu itself, containing a list of menu items.
  */
-var MenuList = React.forwardRef(function MenuList(_a, ref) {
-    var exceptionallySetClassName = _a.exceptionallySetClassName, _b = _a.modal, modal = _b === void 0 ? true : _b, flip = _a.flip, props = __rest(_a, ["exceptionallySetClassName", "modal", "flip"]);
-    var _c = React.useContext(MenuContext), menuStore = _c.menuStore, getAnchorRect = _c.getAnchorRect;
-    if (!menuStore) {
-        throw new Error('MenuList must be wrapped in <Menu/>');
-    }
-    var isSubMenu = React.useContext(SubMenuContext).isSubMenu;
-    var isOpen = menuStore.useState('open');
-    return isOpen ? (React.createElement(Portal, { preserveTabOrder: true },
-        React.createElement(Menu$1, __assign({}, props, { store: menuStore, gutter: 8, shift: 4, ref: ref, className: classNames('reactist_menulist', exceptionallySetClassName), getAnchorRect: getAnchorRect !== null && getAnchorRect !== void 0 ? getAnchorRect : undefined, modal: modal, flip: flip !== null && flip !== void 0 ? flip : (isSubMenu ? 'left bottom' : undefined) })))) : null;
+const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(_ref2, ref) {
+  let {
+      exceptionallySetClassName,
+      modal = true,
+      flip
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded4);
+  const {
+    menuStore,
+    getAnchorRect
+  } = React.useContext(MenuContext);
+  if (!menuStore) {
+    throw new Error('MenuList must be wrapped in <Menu/>');
+  }
+  const {
+    isSubMenu
+  } = React.useContext(SubMenuContext);
+  const isOpen = menuStore.useState('open');
+  return isOpen ? /*#__PURE__*/React.createElement(Portal, {
+    preserveTabOrder: true
+  }, /*#__PURE__*/React.createElement(Menu$1, _extends({}, props, {
+    store: menuStore,
+    gutter: 8,
+    shift: 4,
+    ref: ref,
+    className: classNames('reactist_menulist', exceptionallySetClassName),
+    getAnchorRect: getAnchorRect ?? undefined,
+    modal: modal,
+    flip: flip ?? (isSubMenu ? 'left bottom' : undefined)
+  }))) : null;
 });
+
+//
+// MenuItem
+//
+
 /**
  * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`
  * callback.
  */
-var MenuItem = React.forwardRef(function MenuItem(_a, ref) {
-    var value = _a.value, children = _a.children, onSelect = _a.onSelect, _b = _a.hideOnSelect, hideOnSelect = _b === void 0 ? true : _b, onClick = _a.onClick, exceptionallySetClassName = _a.exceptionallySetClassName, props = __rest(_a, ["value", "children", "onSelect", "hideOnSelect", "onClick", "exceptionallySetClassName"]);
-    var _c = React.useContext(MenuContext), handleItemSelect = _c.handleItemSelect, menuStore = _c.menuStore;
-    if (!menuStore) {
-        throw new Error('MenuItem must be wrapped in <Menu/>');
-    }
-    var hide = menuStore.hide;
-    var handleClick = React.useCallback(function handleClick(event) {
-        onClick === null || onClick === void 0 ? void 0 : onClick(event);
-        var onSelectResult = onSelect && !event.defaultPrevented ? onSelect() : undefined;
-        var shouldClose = onSelectResult !== false && hideOnSelect;
-        handleItemSelect === null || handleItemSelect === void 0 ? void 0 : handleItemSelect(value);
-        if (shouldClose)
-            hide();
-    }, [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value]);
-    return (React.createElement(MenuItem$1, __assign({}, props, { store: menuStore, ref: ref, onClick: handleClick, className: exceptionallySetClassName, hideOnClick: false }), children));
+const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(t0, ref) {
+  const $ = c(22);
+  let children;
+  let exceptionallySetClassName;
+  let onClick;
+  let onSelect;
+  let props;
+  let t1;
+  let value;
+  if ($[0] !== t0) {
+    var _t3 = t0;
+    ({
+      value,
+      children,
+      onSelect,
+      hideOnSelect: t1,
+      onClick,
+      exceptionallySetClassName
+    } = _t3);
+    props = _objectWithoutProperties(_t3, _excluded5);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = exceptionallySetClassName;
+    $[3] = onClick;
+    $[4] = onSelect;
+    $[5] = props;
+    $[6] = t1;
+    $[7] = value;
+  } else {
+    children = $[1];
+    exceptionallySetClassName = $[2];
+    onClick = $[3];
+    onSelect = $[4];
+    props = $[5];
+    t1 = $[6];
+    value = $[7];
+  }
+  const hideOnSelect = t1 === undefined ? true : t1;
+  const {
+    handleItemSelect,
+    menuStore
+  } = React.useContext(MenuContext);
+  if (!menuStore) {
+    throw new Error("MenuItem must be wrapped in <Menu/>");
+  }
+  const {
+    hide
+  } = menuStore;
+  let t2;
+  if ($[8] !== handleItemSelect || $[9] !== hide || $[10] !== hideOnSelect || $[11] !== onClick || $[12] !== onSelect || $[13] !== value) {
+    t2 = function handleClick(event) {
+      onClick?.(event);
+      const onSelectResult = onSelect && !event.defaultPrevented ? onSelect() : undefined;
+      const shouldClose = onSelectResult !== false && hideOnSelect;
+      handleItemSelect?.(value);
+      if (shouldClose) {
+        hide();
+      }
+    };
+    $[8] = handleItemSelect;
+    $[9] = hide;
+    $[10] = hideOnSelect;
+    $[11] = onClick;
+    $[12] = onSelect;
+    $[13] = value;
+    $[14] = t2;
+  } else {
+    t2 = $[14];
+  }
+  const handleClick = t2;
+  let t3;
+  if ($[15] !== children || $[16] !== exceptionallySetClassName || $[17] !== handleClick || $[18] !== menuStore || $[19] !== props || $[20] !== ref) {
+    t3 = /*#__PURE__*/React.createElement(MenuItem$1, _extends({}, props, {
+      store: menuStore,
+      ref: ref,
+      onClick: handleClick,
+      className: exceptionallySetClassName,
+      hideOnClick: false
+    }), children);
+    $[15] = children;
+    $[16] = exceptionallySetClassName;
+    $[17] = handleClick;
+    $[18] = menuStore;
+    $[19] = props;
+    $[20] = ref;
+    $[21] = t3;
+  } else {
+    t3 = $[21];
+  }
+  return t3;
 });
+
+//
+// SubMenu
+//
+
 /**
  * This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have
  * a sub-menu.
@@ -107,40 +357,167 @@ var MenuItem = React.forwardRef(function MenuItem(_a, ref) {
  * 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.
  */
-var SubMenu = React.forwardRef(function SubMenu(_a, ref) {
-    var children = _a.children, onItemSelect = _a.onItemSelect;
-    var _b = React.useContext(MenuContext), parentMenuItemSelect = _b.handleItemSelect, menuStore = _b.menuStore;
-    if (!menuStore) {
-        throw new Error('SubMenu must be wrapped in <Menu/>');
-    }
-    var parentMenuHide = menuStore.hide;
-    var handleSubItemSelect = React.useCallback(function handleSubItemSelect(value) {
-        onItemSelect === null || onItemSelect === void 0 ? void 0 : onItemSelect(value);
-        parentMenuItemSelect === null || parentMenuItemSelect === void 0 ? void 0 : parentMenuItemSelect(value);
-        parentMenuHide();
-    }, [parentMenuHide, parentMenuItemSelect, onItemSelect]);
-    var _c = React.Children.toArray(children), button = _c[0], list = _c[1];
-    var buttonElement = button;
-    var subMenuContextValue = React.useMemo(function () { return ({ isSubMenu: true }); }, []);
-    return (React.createElement(Menu, { onItemSelect: handleSubItemSelect },
-        React.createElement(MenuItem$1, { store: menuStore, ref: ref, hideOnClick: false, render: buttonElement }, buttonElement.props.children),
-        React.createElement(SubMenuContext.Provider, { value: subMenuContextValue }, list)));
+const SubMenu = /*#__PURE__*/React.forwardRef(function SubMenu(t0, ref) {
+  const $ = c(17);
+  const {
+    children,
+    onItemSelect
+  } = t0;
+  const {
+    handleItemSelect: parentMenuItemSelect,
+    menuStore
+  } = React.useContext(MenuContext);
+  if (!menuStore) {
+    throw new Error("SubMenu must be wrapped in <Menu/>");
+  }
+  const {
+    hide: parentMenuHide
+  } = menuStore;
+  let t1;
+  if ($[0] !== onItemSelect || $[1] !== parentMenuHide || $[2] !== parentMenuItemSelect) {
+    t1 = function handleSubItemSelect(value) {
+      onItemSelect?.(value);
+      parentMenuItemSelect?.(value);
+      parentMenuHide();
+    };
+    $[0] = onItemSelect;
+    $[1] = parentMenuHide;
+    $[2] = parentMenuItemSelect;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const handleSubItemSelect = t1;
+  let t2;
+  if ($[4] !== children) {
+    t2 = React.Children.toArray(children);
+    $[4] = children;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  const [button, list] = t2;
+  const buttonElement = button;
+  let t3;
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = {
+      isSubMenu: true
+    };
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  const subMenuContextValue = t3;
+  let t4;
+  if ($[7] !== buttonElement || $[8] !== menuStore || $[9] !== ref) {
+    t4 = /*#__PURE__*/React.createElement(MenuItem$1, {
+      store: menuStore,
+      ref: ref,
+      hideOnClick: false,
+      render: buttonElement
+    }, buttonElement.props.children);
+    $[7] = buttonElement;
+    $[8] = menuStore;
+    $[9] = ref;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  let t5;
+  if ($[11] !== list) {
+    t5 = /*#__PURE__*/React.createElement(SubMenuContext.Provider, {
+      value: subMenuContextValue
+    }, list);
+    $[11] = list;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  let t6;
+  if ($[13] !== handleSubItemSelect || $[14] !== t4 || $[15] !== t5) {
+    t6 = /*#__PURE__*/React.createElement(Menu, {
+      onItemSelect: handleSubItemSelect
+    }, t4, t5);
+    $[13] = handleSubItemSelect;
+    $[14] = t4;
+    $[15] = t5;
+    $[16] = t6;
+  } else {
+    t6 = $[16];
+  }
+  return t6;
 });
+
+//
+// MenuGroup
+//
+
 /**
  * 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.
  */
-var MenuGroup = React.forwardRef(function MenuGroup(_a, ref) {
-    var label = _a.label, children = _a.children, exceptionallySetClassName = _a.exceptionallySetClassName, props = __rest(_a, ["label", "children", "exceptionallySetClassName"]);
-    var menuStore = React.useContext(MenuContext).menuStore;
-    if (!menuStore) {
-        throw new Error('MenuGroup must be wrapped in <Menu/>');
-    }
-    return (React.createElement(MenuGroup$1, __assign({}, props, { ref: ref, store: menuStore, className: exceptionallySetClassName }),
-        label ? (React.createElement("div", { role: "presentation", className: "reactist_menugroup__label" }, label)) : null,
-        children));
+const MenuGroup = /*#__PURE__*/React.forwardRef(function MenuGroup(t0, ref) {
+  const $ = c(14);
+  let children;
+  let exceptionallySetClassName;
+  let label;
+  let props;
+  if ($[0] !== t0) {
+    var _t4 = t0;
+    ({
+      label,
+      children,
+      exceptionallySetClassName
+    } = _t4);
+    props = _objectWithoutProperties(_t4, _excluded6);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = exceptionallySetClassName;
+    $[3] = label;
+    $[4] = props;
+  } else {
+    children = $[1];
+    exceptionallySetClassName = $[2];
+    label = $[3];
+    props = $[4];
+  }
+  const {
+    menuStore
+  } = React.useContext(MenuContext);
+  if (!menuStore) {
+    throw new Error("MenuGroup must be wrapped in <Menu/>");
+  }
+  let t1;
+  if ($[5] !== label) {
+    t1 = label ? /*#__PURE__*/React.createElement("div", {
+      role: "presentation",
+      className: "reactist_menugroup__label"
+    }, label) : null;
+    $[5] = label;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  let t2;
+  if ($[7] !== children || $[8] !== exceptionallySetClassName || $[9] !== menuStore || $[10] !== props || $[11] !== ref || $[12] !== t1) {
+    t2 = /*#__PURE__*/React.createElement(MenuGroup$1, _extends({}, props, {
+      ref: ref,
+      store: menuStore,
+      className: exceptionallySetClassName
+    }), t1, children);
+    $[7] = children;
+    $[8] = exceptionallySetClassName;
+    $[9] = menuStore;
+    $[10] = props;
+    $[11] = ref;
+    $[12] = t1;
+    $[13] = t2;
+  } else {
+    t2 = $[13];
+  }
+  return t2;
 });
 
 export { ContextMenuTrigger, Menu, MenuButton, MenuGroup, MenuItem, MenuList, SubMenu };