@onesy/ui-react 1.0.164 → 1.0.165

package/Menu/Menu.js

@@ -38,23 +38,12 @@ const MENUS = exports.MENUS = {
   }
 };
 const Menu = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3;
   const theme = (0, _styleReact.useOnesyTheme)();
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyMenu) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const List = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.List) || _List.default;
-  }, [theme]);
-  const Tooltip = _react.default.useMemo(() => {
-    var _theme$elements2;
-    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Tooltip) || _Tooltip.default;
-  }, [theme]);
-  const ClickListener = _react.default.useMemo(() => {
-    var _theme$elements3;
-    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.ClickListener) || _ClickListener.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyMenu) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const List = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.List) || _List.default;
+  const Tooltip = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Tooltip) || _Tooltip.default;
+  const ClickListener = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.ClickListener) || _ClickListener.default;
   const {
       open: open_,
       openDefault,
@@ -109,31 +98,31 @@ const Menu = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         const values = _react.default.Children.toArray(refs.props.current.children).map((item, index) => {
           var _item$props, _item$props2, _item$props3;
           return ((_item$props = item.props) !== null && _item$props !== void 0 && _item$props.button || (_item$props2 = item.props) !== null && _item$props2 !== void 0 && _item$props2.href) && !((_item$props3 = item.props) !== null && _item$props3 !== void 0 && _item$props3.disabled) ? index : undefined;
-        }).filter(item => (0, _utils.is)('number', item));
+        }).filter(item_0 => (0, _utils.is)('number', item_0));
         setPreselected(values[0]);
       }
     }
     const onKeyDown = event => {
       if (refs.props.current.open && MENUS.priority(refs.id.current)) {
-        const values = _react.default.Children.toArray(refs.props.current.children).map((item, index) => {
-          var _item$props4, _item$props5, _item$props6;
-          return ((_item$props4 = item.props) !== null && _item$props4 !== void 0 && _item$props4.button || (_item$props5 = item.props) !== null && _item$props5 !== void 0 && _item$props5.href) && !((_item$props6 = item.props) !== null && _item$props6 !== void 0 && _item$props6.disabled) ? index : undefined;
-        }).filter(item => (0, _utils.is)('number', item));
+        const values_0 = _react.default.Children.toArray(refs.props.current.children).map((item_1, index_0) => {
+          var _item_1$props, _item_1$props2, _item_1$props3;
+          return ((_item_1$props = item_1.props) !== null && _item_1$props !== void 0 && _item_1$props.button || (_item_1$props2 = item_1.props) !== null && _item_1$props2 !== void 0 && _item_1$props2.href) && !((_item_1$props3 = item_1.props) !== null && _item_1$props3 !== void 0 && _item_1$props3.disabled) ? index_0 : undefined;
+        }).filter(item_2 => (0, _utils.is)('number', item_2));
         switch (event.key) {
           case 'ArrowUp':
             event.preventDefault();
             return setPreselected(() => {
-              let value = refs.preselected.current;
-              const index = values.findIndex(item_ => item_ === value);
-              if (index === -1) value = values[values.length - 1];else if (index > 0) value = values[index - 1];else if (refs.props.current.resetKeyboardNavigation) value = values[values.length - 1];
-              return value;
+              let value_0 = refs.preselected.current;
+              const index_2 = values_0.findIndex(item__0 => item__0 === value_0);
+              if (index_2 === -1) value_0 = values_0[values_0.length - 1];else if (index_2 > 0) value_0 = values_0[index_2 - 1];else if (refs.props.current.resetKeyboardNavigation) value_0 = values_0[values_0.length - 1];
+              return value_0;
             });
           case 'ArrowDown':
             event.preventDefault();
             return setPreselected(() => {
               let value = refs.preselected.current;
-              const index = values.findIndex(item_ => item_ === value);
-              if (index === -1) value = values[0];else if (index < values.length - 1) value = values[index + 1];else if (refs.props.current.resetKeyboardNavigation) value = values[0];
+              const index_1 = values_0.findIndex(item_ => item_ === value);
+              if (index_1 === -1) value = values_0[0];else if (index_1 < values_0.length - 1) value = values_0[index_1 + 1];else if (refs.props.current.resetKeyboardNavigation) value = values_0[0];
               return value;
             });
           case 'Escape':
@@ -141,10 +130,10 @@ const Menu = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
             return onClose();
           case 'Home':
             event.preventDefault();
-            return setPreselected(values[0]);
+            return setPreselected(values_0[0]);
           case 'End':
             event.preventDefault();
-            return setPreselected(values[values.length - 1]);
+            return setPreselected(values_0[values_0.length - 1]);
           default:
             break;
         }
@@ -160,11 +149,11 @@ const Menu = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   _react.default.useEffect(() => {
     if (open) {
       if (autoSelect) {
-        const values = _react.default.Children.toArray(refs.props.current.children).map((item, index) => {
-          var _item$props7, _item$props8, _item$props9;
-          return ((_item$props7 = item.props) !== null && _item$props7 !== void 0 && _item$props7.button || (_item$props8 = item.props) !== null && _item$props8 !== void 0 && _item$props8.href) && !((_item$props9 = item.props) !== null && _item$props9 !== void 0 && _item$props9.disabled) ? index : undefined;
-        }).filter(item => (0, _utils.is)('number', item));
-        setPreselected(values[0]);
+        const values_1 = _react.default.Children.toArray(refs.props.current.children).map((item_3, index_3) => {
+          var _item_3$props, _item_3$props2, _item_3$props3;
+          return ((_item_3$props = item_3.props) !== null && _item_3$props !== void 0 && _item_3$props.button || (_item_3$props2 = item_3.props) !== null && _item_3$props2 !== void 0 && _item_3$props2.href) && !((_item_3$props3 = item_3.props) !== null && _item_3$props3 !== void 0 && _item_3$props3.disabled) ? index_3 : undefined;
+        }).filter(item_4 => (0, _utils.is)('number', item_4));
+        setPreselected(values_1[0]);
       }
     }
     setTimeout(() => {
@@ -172,17 +161,17 @@ const Menu = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     });
     return () => {
       if (include) {
-        const index = include.findIndex(item => item === refs.root.current);
-        if (index > -1) include.splice(index, 1);
+        const index_4 = include.findIndex(item_5 => item_5 === refs.root.current);
+        if (index_4 > -1) include.splice(index_4, 1);
       }
     };
   }, [open]);
   _react.default.useEffect(() => {
     if (open !== open_) setOpen(open_);
   }, [open_]);
-  const onMouseLeave = _react.default.useCallback(() => {
+  const onMouseLeave = () => {
     setPreselected('');
-  }, []);
+  };
   const onOpen = () => {
     if (open_ === undefined) setOpen(true);
     if ((0, _utils.is)('function', onOpen_)) onOpen_();
@@ -190,9 +179,9 @@ const Menu = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const onClose = () => {
     if (open_ === undefined) setOpen(false);
     if (refs.props.current.autoSelectOnBlur) {
-      var _item$props0, _item$props1, _item$props10;
-      const item = _react.default.Children.toArray(refs.props.current.children)[refs.preselected.current];
-      if (item && (0, _utils.is)('function', refs.props.current.onSelect)) refs.props.current.onSelect(((_item$props0 = item.props) === null || _item$props0 === void 0 ? void 0 : _item$props0.value) !== undefined ? (_item$props1 = item.props) === null || _item$props1 === void 0 ? void 0 : _item$props1.value : (_item$props10 = item.props) === null || _item$props10 === void 0 ? void 0 : _item$props10.primary);
+      var _item_6$props, _item_6$props2, _item_6$props3;
+      const item_6 = _react.default.Children.toArray(refs.props.current.children)[refs.preselected.current];
+      if (item_6 && (0, _utils.is)('function', refs.props.current.onSelect)) refs.props.current.onSelect(((_item_6$props = item_6.props) === null || _item_6$props === void 0 ? void 0 : _item_6$props.value) !== undefined ? (_item_6$props2 = item_6.props) === null || _item_6$props2 === void 0 ? void 0 : _item_6$props2.value : (_item_6$props3 = item_6.props) === null || _item_6$props3 === void 0 ? void 0 : _item_6$props3.primary);
     }
     setPreselected('');
     if ((0, _utils.is)('function', onClose_)) onClose_();
@@ -208,46 +197,46 @@ const Menu = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     WrapperProps = _objectSpread(_objectSpread({}, WrapperProps), ClickListenerProps);
   }
   if (open) MENUS.add(id);else MENUS.remove(id);
-  const methodItem = (item, index) => {
-    var _item$props11, _item$props12, _item$props13, _item$props14;
+  const methodItem = (item_7, index_5) => {
+    var _item_7$props, _item_7$props2, _item_7$props3, _item_7$props4;
     return _objectSpread({
-      key: item.key || index,
+      key: item_7.key || index_5,
       role: 'menuitem',
       menuId: id,
-      MenuProps: _objectSpread(_objectSpread({}, (_item$props11 = item.props) === null || _item$props11 === void 0 ? void 0 : _item$props11.MenuProps), {}, {
-        className: (0, _styleReact.classNames)([(_item$props12 = item.props) === null || _item$props12 === void 0 || (_item$props12 = _item$props12.MenuProps) === null || _item$props12 === void 0 ? void 0 : _item$props12.className, refs.menuClassName.current])
+      MenuProps: _objectSpread(_objectSpread({}, (_item_7$props = item_7.props) === null || _item_7$props === void 0 ? void 0 : _item_7$props.MenuProps), {}, {
+        className: (0, _styleReact.classNames)([(_item_7$props2 = item_7.props) === null || _item_7$props2 === void 0 || (_item_7$props2 = _item_7$props2.MenuProps) === null || _item_7$props2 === void 0 ? void 0 : _item_7$props2.className, refs.menuClassName.current])
       }),
       onClose
-    }, ((_item$props13 = item.props) !== null && _item$props13 !== void 0 && _item$props13.button || (_item$props14 = item.props) !== null && _item$props14 !== void 0 && _item$props14.href) && !item.props.disabled ? {
+    }, ((_item_7$props3 = item_7.props) !== null && _item_7$props3 !== void 0 && _item_7$props3.button || (_item_7$props4 = item_7.props) !== null && _item_7$props4 !== void 0 && _item_7$props4.href) && !item_7.props.disabled ? {
       onMouseEnter: () => {
-        setPreselected(index);
+        setPreselected(index_5);
       },
       onMouseLeave: () => {
         setPreselected('');
       },
-      preselected: index === preselected,
-      onClick: event => {
-        var _item$props15, _item$props16, _item$props17;
-        if ((0, _utils.is)('function', (_item$props15 = item.props) === null || _item$props15 === void 0 ? void 0 : _item$props15.onClick)) (_item$props16 = item.props) === null || _item$props16 === void 0 || _item$props16.onClick(event);
-        if ((_item$props17 = item.props) !== null && _item$props17 !== void 0 && _item$props17.menuCloseOnClick) onClose();
+      preselected: index_5 === preselected,
+      onClick: event_0 => {
+        var _item_7$props5, _item_7$props6, _item_7$props7;
+        if ((0, _utils.is)('function', (_item_7$props5 = item_7.props) === null || _item_7$props5 === void 0 ? void 0 : _item_7$props5.onClick)) (_item_7$props6 = item_7.props) === null || _item_7$props6 === void 0 || _item_7$props6.onClick(event_0);
+        if ((_item_7$props7 = item_7.props) !== null && _item_7$props7 !== void 0 && _item_7$props7.menuCloseOnClick) onClose();
       },
-      onKeyDown: event => {
-        if (event.target === event.currentTarget && event.key === 'Enter') {
-          var _item$props18, _item$props19, _item$props20, _item$props21, _item$props22;
-          if ((0, _utils.is)('function', (_item$props18 = item.props) === null || _item$props18 === void 0 ? void 0 : _item$props18.onClick)) (_item$props19 = item.props) === null || _item$props19 === void 0 || _item$props19.onClick();
-          if ((0, _utils.is)('function', (_item$props20 = item.props) === null || _item$props20 === void 0 ? void 0 : _item$props20.onKeyDown)) (_item$props21 = item.props) === null || _item$props21 === void 0 || _item$props21.onKeyDown(event);
-          if ((_item$props22 = item.props) !== null && _item$props22 !== void 0 && _item$props22.menuCloseOnClick) onClose();
+      onKeyDown: event_1 => {
+        if (event_1.target === event_1.currentTarget && event_1.key === 'Enter') {
+          var _item_7$props8, _item_7$props9, _item_7$props0, _item_7$props1, _item_7$props10;
+          if ((0, _utils.is)('function', (_item_7$props8 = item_7.props) === null || _item_7$props8 === void 0 ? void 0 : _item_7$props8.onClick)) (_item_7$props9 = item_7.props) === null || _item_7$props9 === void 0 || _item_7$props9.onClick();
+          if ((0, _utils.is)('function', (_item_7$props0 = item_7.props) === null || _item_7$props0 === void 0 ? void 0 : _item_7$props0.onKeyDown)) (_item_7$props1 = item_7.props) === null || _item_7$props1 === void 0 || _item_7$props1.onKeyDown(event_1);
+          if ((_item_7$props10 = item_7.props) !== null && _item_7$props10 !== void 0 && _item_7$props10.menuCloseOnClick) onClose();
         }
       }
     } : {});
   };
   const nameValue = name || label;
   return /*#__PURE__*/_react.default.createElement(Wrapper, WrapperProps, /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
-    ref: item => {
+    ref: item_8 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_8);else ref.current = item_8;
       }
-      refs.root.current = item;
+      refs.root.current = item_8;
     },
     open: open,
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Menu', theme) && ['onesy-Menu-root', open && `onesy-Menu-open`], className, classes.root]),
@@ -261,7 +250,7 @@ const Menu = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       role: "menu"
     }, ListProps, {
       className: (0, _styleReact.classNames)(['onesy-Menu-list', ListProps === null || ListProps === void 0 ? void 0 : ListProps.className, classes.list])
-    }), ListProps !== null && ListProps !== void 0 && ListProps.noChildrenTransform ? menuItems : _react.default.Children.toArray(menuItems).map((item, index) => (/*#__PURE__*/_react.default.cloneElement(item, methodItem(item, index))))),
+    }), ListProps !== null && ListProps !== void 0 && ListProps.noChildrenTransform ? menuItems : _react.default.Children.toArray(menuItems).map((item_9, index_6) => (/*#__PURE__*/_react.default.cloneElement(item_9, methodItem(item_9, index_6))))),
     click: true,
     arrow: arrow,
     hover: false,
@@ -276,11 +265,11 @@ const Menu = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       freezeScroll: false
     }, ModalProps)
   }, other), children && /*#__PURE__*/_react.default.cloneElement(children, {
-    ref: item => {
+    ref: item_10 => {
       if (children.ref) {
-        if ((0, _utils.is)('function', children.ref)) children.ref(item);else children.ref.current = item;
+        if ((0, _utils.is)('function', children.ref)) children.ref(item_10);else children.ref.current = item_10;
       }
-      refs.main.current = item;
+      refs.main.current = item_10;
     }
   })));
 });

package/MenuDesktop/MenuDesktop.d.ts

@@ -2,14 +2,14 @@ import React from 'react';
 import { TTransitionStatus } from '../Transition';
 import { ILine } from '../Line/Line';
 import { IElement, IStyle, IElementReference, IPropsAny, IVersion } from '../types';
-export type TMenuDesktopValue = string | number;
-export type TMenuDesktopItem = {
+export declare type TMenuDesktopValue = string | number;
+export declare type TMenuDesktopItem = {
     value?: TMenuDesktopValue;
     label?: IElement;
     name?: IElement;
     menu?: IElement;
 };
-export type IMenuDesktop = Omit<ILine, 'onChange'> & {
+export declare type IMenuDesktop = Omit<ILine, 'onChange'> & {
     version?: IVersion;
     items?: Array<TMenuDesktopItem>;
     valueDefault?: TMenuDesktopValue;

package/MenuDesktop/MenuDesktop.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _compilerRuntime = require("react/compiler-runtime");
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("@onesy/utils");
 var _styleReact = require("@onesy/style-react");
@@ -103,59 +104,55 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-MenuDesktop'
 });
 const Wrapper = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const $ = (0, _compilerRuntime.c)(9);
   const theme = (0, _styleReact.useOnesyTheme)();
   const {
     onMouseEnter,
     onMouseLeave,
     style
   } = props;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    ref: ref,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    style: _objectSpread({
+  let t0;
+  if ($[0] !== style || $[1] !== theme.z_index.menu_modal) {
+    t0 = _objectSpread({
       zIndex: theme.z_index.menu_modal
-    }, style)
-  }, props.children);
+    }, style);
+    $[0] = style;
+    $[1] = theme.z_index.menu_modal;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  let t1;
+  if ($[3] !== onMouseEnter || $[4] !== onMouseLeave || $[5] !== props.children || $[6] !== ref || $[7] !== t0) {
+    t1 = /*#__PURE__*/_react.default.createElement("div", {
+      ref: ref,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      style: t0
+    }, props.children);
+    $[3] = onMouseEnter;
+    $[4] = onMouseLeave;
+    $[5] = props.children;
+    $[6] = ref;
+    $[7] = t0;
+    $[8] = t1;
+  } else {
+    t1 = $[8];
+  }
+  return t1;
 });
 const MenuDesktop = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _theme$elements8;
   const theme = (0, _styleReact.useOnesyTheme)();
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyMenuDesktop) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Line = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
-  }, [theme]);
-  const Grow = _react.default.useMemo(() => {
-    var _theme$elements2;
-    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Grow) || _Grow.default;
-  }, [theme]);
-  const Append = _react.default.useMemo(() => {
-    var _theme$elements3;
-    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Append) || _Append.default;
-  }, [theme]);
-  const Transitions = _react.default.useMemo(() => {
-    var _theme$elements4;
-    return (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Transitions) || _Transitions.default;
-  }, [theme]);
-  const ClickListener = _react.default.useMemo(() => {
-    var _theme$elements5;
-    return (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.ClickListener) || _ClickListener.default;
-  }, [theme]);
-  const Transition = _react.default.useMemo(() => {
-    var _theme$elements6;
-    return (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Transition) || _Transition.default;
-  }, [theme]);
-  const Surface = _react.default.useMemo(() => {
-    var _theme$elements7;
-    return (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.Surface) || _Surface.default;
-  }, [theme]);
-  const Type = _react.default.useMemo(() => {
-    var _theme$elements8;
-    return (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.Type) || _Type.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyMenuDesktop) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
+  const Grow = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Grow) || _Grow.default;
+  const Append = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Append) || _Append.default;
+  const Transitions = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Transitions) || _Transitions.default;
+  const ClickListener = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.ClickListener) || _ClickListener.default;
+  const Transition = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Transition) || _Transition.default;
+  const Surface = (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.Surface) || _Surface.default;
+  const Type = (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.Type) || _Type.default;
   const {
       tonal = true,
       color = 'primary',
@@ -233,7 +230,7 @@ const MenuDesktop = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     if (value__) {
       const item = refs.props.current.items.find(item_ => item_.value === value__);
       if (item) {
-        const itemHTML = refs.items.current.filter(Boolean).find(item_ => item_.dataset.value === item.value);
+        const itemHTML = refs.items.current.filter(Boolean).find(item__0 => item__0.dataset.value === item.value);
         if (itemHTML) {
           refs.anchorElement.current = itemHTML;
           if (item.menu) setMenu(item.menu);
@@ -242,7 +239,7 @@ const MenuDesktop = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     }
     if (value__) updateOpenItem(value__);
     if (refs.open.current) {
-      refs.previousOpenIndex.current = refs.props.current.items.findIndex(item_ => item_.value === refs.open.current);
+      refs.previousOpenIndex.current = refs.props.current.items.findIndex(item__1 => item__1.value === refs.open.current);
       refs.previousOpen.current = refs.props.current.items[refs.previousOpenIndex.current];
     }
     if (!value__) onClose();else {
@@ -255,9 +252,9 @@ const MenuDesktop = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     setInProp(true);
   };
   _react.default.useEffect(() => {
-    refs.menus.current.forEach((item, index) => {
-      if (item) {
-        refs.menuRects.current[index] = item.getBoundingClientRect();
+    refs.menus.current.forEach((item_0, index) => {
+      if (item_0) {
+        refs.menuRects.current[index] = item_0.getBoundingClientRect();
       }
     });
     setInit(true);
@@ -279,17 +276,17 @@ const MenuDesktop = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
           // If any item is in the focus
           if (refs.focus.current) {
             event.preventDefault();
-            const tabIndexItems = Array.from(refs.root.current.querySelectorAll(`[tabindex='0']`));
+            const tabIndexItems_1 = Array.from(refs.root.current.querySelectorAll(`[tabindex='0']`));
             refs.props.current.items.reverse();
-            let index = refs.props.current.items.findIndex(item_ => !item_.disabled && item_.menu);
+            let index_2 = refs.props.current.items.findIndex(item__6 => !item__6.disabled && item__6.menu);
             refs.props.current.items.reverse();
-            if (index > -1) {
-              index = refs.props.current.items.length - 1 - index;
-              const item = refs.props.current.items[index];
-              if (item) {
-                const itemHTML = tabIndexItems.find(item_ => item_.dataset.value === item.value);
-                updateOpen(item.value);
-                if (itemHTML) itemHTML.focus();
+            if (index_2 > -1) {
+              index_2 = refs.props.current.items.length - 1 - index_2;
+              const item_3 = refs.props.current.items[index_2];
+              if (item_3) {
+                const itemHTML_2 = tabIndexItems_1.find(item__7 => item__7.dataset.value === item_3.value);
+                updateOpen(item_3.value);
+                if (itemHTML_2) itemHTML_2.focus();
               }
             }
           }
@@ -298,14 +295,14 @@ const MenuDesktop = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
           // If any item is in the focus
           if (refs.focus.current) {
             event.preventDefault();
-            const tabIndexItems = Array.from(refs.root.current.querySelectorAll(`[tabindex='0']`));
-            const index = refs.props.current.items.findIndex(item_ => !item_.disabled && item_.menu);
-            if (index > -1) {
-              const item = refs.props.current.items[index];
-              if (item) {
-                const itemHTML = tabIndexItems.find(item_ => item_.dataset.value === item.value);
-                updateOpen(item.value);
-                if (itemHTML) itemHTML.focus();
+            const tabIndexItems_0 = Array.from(refs.root.current.querySelectorAll(`[tabindex='0']`));
+            const index_1 = refs.props.current.items.findIndex(item__4 => !item__4.disabled && item__4.menu);
+            if (index_1 > -1) {
+              const item_2 = refs.props.current.items[index_1];
+              if (item_2) {
+                const itemHTML_1 = tabIndexItems_0.find(item__5 => item__5.dataset.value === item_2.value);
+                updateOpen(item_2.value);
+                if (itemHTML_1) itemHTML_1.focus();
               }
             }
           }
@@ -319,20 +316,20 @@ const MenuDesktop = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
             event.preventDefault();
             event.stopPropagation();
             const tabIndexItems = Array.from(refs.root.current.querySelectorAll(`[tabindex='0']`));
-            const index = refs.props.current.items.findIndex(item_ => item_.value === refs.focus.current.value);
+            const index_0 = refs.props.current.items.findIndex(item__2 => item__2.value === refs.focus.current.value);
             let indexNew;
-            let i = index;
-            let item;
+            let i = index_0;
+            let item_1;
             while (indexNew === undefined && i >= 0 && i < refs.props.current.items.length) {
-              var _item, _item2;
+              var _item_, _item_2;
               ['ArrowDown'].includes(event.key) || theme.direction === 'ltr' && event.key === 'ArrowLeft' || theme.direction === 'rtl' && event.key === 'ArrowRight' ? i-- : i++;
-              item = refs.props.current.items[i];
-              if (!((_item = item) !== null && _item !== void 0 && _item.disabled) && (_item2 = item) !== null && _item2 !== void 0 && _item2.menu) indexNew = i;
+              item_1 = refs.props.current.items[i];
+              if (!((_item_ = item_1) !== null && _item_ !== void 0 && _item_.disabled) && (_item_2 = item_1) !== null && _item_2 !== void 0 && _item_2.menu) indexNew = i;
             }
-            if (item) {
-              const itemHTML = tabIndexItems.find(item_ => item_.dataset.value === item.value);
-              updateOpen(item.value);
-              if (itemHTML) itemHTML.focus();
+            if (item_1) {
+              const itemHTML_0 = tabIndexItems.find(item__3 => item__3.dataset.value === item_1.value);
+              updateOpen(item_1.value);
+              if (itemHTML_0) itemHTML_0.focus();
             }
           }
           break;
@@ -348,8 +345,8 @@ const MenuDesktop = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   }, []);
   _react.default.useEffect(() => {
     if (open) {
-      const index = refs.props.current.items.findIndex(item => (item === null || item === void 0 ? void 0 : item.value) === open);
-      const rect = refs.menuRects.current[index];
+      const index_3 = refs.props.current.items.findIndex(item_4 => (item_4 === null || item_4 === void 0 ? void 0 : item_4.value) === open);
+      const rect = refs.menuRects.current[index_3];
       if (rect) {
         setAppend({
           width: rect.width,
@@ -358,48 +355,48 @@ const MenuDesktop = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       }
     }
   }, [open]);
-  const onBlur = _react.default.useCallback(() => {
+  const onBlur = () => {
     if (refs.focus.current) {
       updateOpen('');
       setFocus('');
     }
-  }, []);
-  const onFocus = _react.default.useCallback(item => {
-    if (item && !item.disabled && item.menu) {
-      setFocus(item);
-      if (open !== item.value) updateOpen(item.value);
+  };
+  const onFocus = item_5 => {
+    if (item_5 && !item_5.disabled && item_5.menu) {
+      setFocus(item_5);
+      if (open !== item_5.value) updateOpen(item_5.value);
     }
-  }, [open]);
-  const onMouseLeave = _react.default.useCallback(item => {
+  };
+  const onMouseLeave = item_6 => {
     updateOpen('');
-  }, []);
-  const onMouseEnter = _react.default.useCallback(item => {
-    if (item && !item.disabled && item.menu) {
-      updateOpen(item.value);
+  };
+  const onMouseEnter = item_7 => {
+    if (item_7 && !item_7.disabled && item_7.menu) {
+      updateOpen(item_7.value);
     }
-  }, []);
-  const onClick = _react.default.useCallback(item => {
-    if (item && !item.disabled && item.menu) {
-      open ? updateOpen('') : updateOpen(item.value);
+  };
+  const onClick = item_8 => {
+    if (item_8 && !item_8.disabled && item_8.menu) {
+      open ? updateOpen('') : updateOpen(item_8.value);
       setTimeout(() => setFocus(''));
     }
-  }, [open]);
-  const onClickOutside = _react.default.useCallback(() => {
+  };
+  const onClickOutside = () => {
     if (open) updateOpen('');
-  }, [open]);
+  };
 
   // If no items don't render anything
   // not to waste html space
   if (!(items !== null && items !== void 0 && items.length)) return;
-  const openIndex = items.findIndex(item_ => (item_ === null || item_ === void 0 ? void 0 : item_.value) === open);
+  const openIndex = items.findIndex(item__8 => (item__8 === null || item__8 === void 0 ? void 0 : item__8.value) === open);
   return /*#__PURE__*/_react.default.createElement(ClickListener, {
     onClickOutside: onClickOutside
   }, /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    ref: item => {
+    ref: item_9 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_9);else ref.current = item_9;
       }
-      refs.root.current = item;
+      refs.root.current = item_9;
     },
     gap: 0,
     direction: "column",
@@ -411,41 +408,41 @@ const MenuDesktop = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     direction: "row",
     align: "unset",
     justify: "unset"
-  }, items.map((item, index) =>
+  }, items.map((item_10, index_4) =>
   // hovered and onClick add to the method
-  (0, _utils.is)('function', renderItem) ? renderItem(item, index) : /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    key: index,
-    ref: item_ => {
-      if (!refs.items.current.includes(item)) refs.items.current.push(item_);
+  (0, _utils.is)('function', renderItem) ? renderItem(item_10, index_4) : /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+    key: index_4,
+    ref: item__9 => {
+      if (!refs.items.current.includes(item_10)) refs.items.current.push(item__9);
     },
-    tabIndex: !item.disabled && item.menu ? 0 : undefined,
-    "data-value": item.value,
+    tabIndex: !item_10.disabled && item_10.menu ? 0 : undefined,
+    "data-value": item_10.value,
     gap: 0.5,
     direction: "row",
     align: "center"
-  }, ItemProps, !!item.menu && openOnClick && {
-    onClick: () => onClick(item)
-  }, !!item.menu && !mobile && openOnFocus && {
-    onFocus: () => onFocus(item),
+  }, ItemProps, !!item_10.menu && openOnClick && {
+    onClick: () => onClick(item_10)
+  }, !!item_10.menu && !mobile && openOnFocus && {
+    onFocus: () => onFocus(item_10),
     onBlur: () => onBlur()
-  }, !!item.menu && openOnHover && {
-    onMouseEnter: () => onMouseEnter(item),
-    onMouseLeave: () => onMouseLeave(item)
+  }, !!item_10.menu && openOnHover && {
+    onMouseEnter: () => onMouseEnter(item_10),
+    onMouseLeave: () => onMouseLeave(item_10)
   }, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('MenuDesktop', theme) && ['onesy-MenuDesktop-item', open === item.value && `onesy-MenuDesktop-open`, item.disabled && `onesy-MenuDesktop-disabled`], ItemProps === null || ItemProps === void 0 ? void 0 : ItemProps.className, classes.item, item.disabled && classes.item_disabled])
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('MenuDesktop', theme) && ['onesy-MenuDesktop-item', open === item_10.value && `onesy-MenuDesktop-open`, item_10.disabled && `onesy-MenuDesktop-disabled`], ItemProps === null || ItemProps === void 0 ? void 0 : ItemProps.className, classes.item, item_10.disabled && classes.item_disabled])
   }), /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
     version: "l1"
-  }, TypeProps), item.name !== undefined ? item.name : item.label), !!item.menu && /*#__PURE__*/_react.default.createElement(IconIndicator, (0, _extends2.default)({
+  }, TypeProps), item_10.name !== undefined ? item_10.name : item_10.label), !!item_10.menu && /*#__PURE__*/_react.default.createElement(IconIndicator, (0, _extends2.default)({
     size: 20,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('MenuDesktop', theme) && ['onesy-MenuDesktop-indicator'], classes.indicator, inProp && open === item.value && classes.indicator_open])
-  }, IconProps))))), !init && items.map((item, index) => /*#__PURE__*/_react.default.createElement("div", {
-    ref: item_ => refs.menus.current[index] = item_,
-    key: index,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('MenuDesktop', theme) && ['onesy-MenuDesktop-indicator'], classes.indicator, inProp && open === item_10.value && classes.indicator_open])
+  }, IconProps))))), !init && items.map((item_11, index_5) => /*#__PURE__*/_react.default.createElement("div", {
+    ref: item__10 => refs.menus.current[index_5] = item__10,
+    key: index_5,
     style: {
       position: 'absolute',
       visibility: 'hidden'
     }
-  }, item.menu)), /*#__PURE__*/_react.default.createElement(Append, (0, _extends2.default)({
+  }, item_11.menu)), /*#__PURE__*/_react.default.createElement(Append, (0, _extends2.default)({
     open: !!open,
     anchorElement: refs.anchorElement.current,
     position: "bottom",