@onesy/ui-react 1.0.164 → 1.0.165

package/esm/MenuDesktop/MenuDesktop.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["tonal", "color", "version", "items", "valueDefault", "value_", "openOnHover", "openOnClick", "openOnFocus", "renderItem", "indicator", "menuTransition", "menuTransitionClassName", "menuTransitionStyle", "onOpen", "onClose", "onChange", "TransitionComponent", "IconIndicator", "AppendProps", "TypeProps", "ItemProps", "IconProps", "TransitionComponentProps", "WrapperProps", "WrapperMenuProps", "className"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { c as _c } from "react/compiler-runtime";
 import React from 'react';
 import { is, isEnvironment } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
@@ -96,32 +97,54 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-MenuDesktop'
 });
 const Wrapper = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const $ = _c(9);
   const theme = useOnesyTheme();
   const {
     onMouseEnter,
     onMouseLeave,
     style
   } = props;
-  return /*#__PURE__*/React.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.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.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyMenuDesktop?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Grow = React.useMemo(() => theme?.elements?.Grow || GrowElement, [theme]);
-  const Append = React.useMemo(() => theme?.elements?.Append || AppendElement, [theme]);
-  const Transitions = React.useMemo(() => theme?.elements?.Transitions || TransitionsElement, [theme]);
-  const ClickListener = React.useMemo(() => theme?.elements?.ClickListener || ClickListenerElement, [theme]);
-  const Transition = React.useMemo(() => theme?.elements?.Transition || TransitionElement, [theme]);
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyMenuDesktop?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Grow = theme?.elements?.Grow || GrowElement;
+  const Append = theme?.elements?.Append || AppendElement;
+  const Transitions = theme?.elements?.Transitions || TransitionsElement;
+  const ClickListener = theme?.elements?.ClickListener || ClickListenerElement;
+  const Transition = theme?.elements?.Transition || TransitionElement;
+  const Surface = theme?.elements?.Surface || SurfaceElement;
+  const Type = theme?.elements?.Type || TypeElement;
   const {
       tonal = true,
       color = 'primary',
@@ -199,7 +222,7 @@ const MenuDesktop = /*#__PURE__*/React.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);
@@ -208,7 +231,7 @@ const MenuDesktop = /*#__PURE__*/React.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 {
@@ -221,9 +244,9 @@ const MenuDesktop = /*#__PURE__*/React.forwardRef((props_, ref) => {
     setInProp(true);
   };
   React.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);
@@ -243,17 +266,17 @@ const MenuDesktop = /*#__PURE__*/React.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();
               }
             }
           }
@@ -262,14 +285,14 @@ const MenuDesktop = /*#__PURE__*/React.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();
               }
             }
           }
@@ -283,19 +306,19 @@ const MenuDesktop = /*#__PURE__*/React.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) {
               ['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?.disabled && item?.menu) indexNew = i;
+              item_1 = refs.props.current.items[i];
+              if (!item_1?.disabled && item_1?.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;
@@ -311,8 +334,8 @@ const MenuDesktop = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }, []);
   React.useEffect(() => {
     if (open) {
-      const index = refs.props.current.items.findIndex(item => item?.value === open);
-      const rect = refs.menuRects.current[index];
+      const index_3 = refs.props.current.items.findIndex(item_4 => item_4?.value === open);
+      const rect = refs.menuRects.current[index_3];
       if (rect) {
         setAppend({
           width: rect.width,
@@ -321,48 +344,48 @@ const MenuDesktop = /*#__PURE__*/React.forwardRef((props_, ref) => {
       }
     }
   }, [open]);
-  const onBlur = React.useCallback(() => {
+  const onBlur = () => {
     if (refs.focus.current) {
       updateOpen('');
       setFocus('');
     }
-  }, []);
-  const onFocus = React.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.useCallback(item => {
+  };
+  const onMouseLeave = item_6 => {
     updateOpen('');
-  }, []);
-  const onMouseEnter = React.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.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.useCallback(() => {
+  };
+  const onClickOutside = () => {
     if (open) updateOpen('');
-  }, [open]);
+  };
 
   // If no items don't render anything
   // not to waste html space
   if (!items?.length) return;
-  const openIndex = items.findIndex(item_ => item_?.value === open);
+  const openIndex = items.findIndex(item__8 => item__8?.value === open);
   return /*#__PURE__*/React.createElement(ClickListener, {
     onClickOutside: onClickOutside
   }, /*#__PURE__*/React.createElement(Line, _extends({
-    ref: item => {
+    ref: item_9 => {
       if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
+        if (is('function', ref)) ref(item_9);else ref.current = item_9;
       }
-      refs.root.current = item;
+      refs.root.current = item_9;
     },
     gap: 0,
     direction: "column",
@@ -374,41 +397,41 @@ const MenuDesktop = /*#__PURE__*/React.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
-  is('function', renderItem) ? renderItem(item, index) : /*#__PURE__*/React.createElement(Line, _extends({
-    key: index,
-    ref: item_ => {
-      if (!refs.items.current.includes(item)) refs.items.current.push(item_);
+  is('function', renderItem) ? renderItem(item_10, index_4) : /*#__PURE__*/React.createElement(Line, _extends({
+    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: classNames([staticClassName('MenuDesktop', theme) && ['onesy-MenuDesktop-item', open === item.value && `onesy-MenuDesktop-open`, item.disabled && `onesy-MenuDesktop-disabled`], ItemProps?.className, classes.item, item.disabled && classes.item_disabled])
+    className: classNames([staticClassName('MenuDesktop', theme) && ['onesy-MenuDesktop-item', open === item_10.value && `onesy-MenuDesktop-open`, item_10.disabled && `onesy-MenuDesktop-disabled`], ItemProps?.className, classes.item, item_10.disabled && classes.item_disabled])
   }), /*#__PURE__*/React.createElement(Type, _extends({
     version: "l1"
-  }, TypeProps), item.name !== undefined ? item.name : item.label), !!item.menu && /*#__PURE__*/React.createElement(IconIndicator, _extends({
+  }, TypeProps), item_10.name !== undefined ? item_10.name : item_10.label), !!item_10.menu && /*#__PURE__*/React.createElement(IconIndicator, _extends({
     size: 20,
-    className: classNames([staticClassName('MenuDesktop', theme) && ['onesy-MenuDesktop-indicator'], classes.indicator, inProp && open === item.value && classes.indicator_open])
-  }, IconProps))))), !init && items.map((item, index) => /*#__PURE__*/React.createElement("div", {
-    ref: item_ => refs.menus.current[index] = item_,
-    key: index,
+    className: classNames([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.createElement("div", {
+    ref: item__10 => refs.menus.current[index_5] = item__10,
+    key: index_5,
     style: {
       position: 'absolute',
       visibility: 'hidden'
     }
-  }, item.menu)), /*#__PURE__*/React.createElement(Append, _extends({
+  }, item_11.menu)), /*#__PURE__*/React.createElement(Append, _extends({
     open: !!open,
     anchorElement: refs.anchorElement.current,
     position: "bottom",

package/esm/MenuItem/MenuItem.js

@@ -33,13 +33,13 @@ const ListItemDelays = {
 };
 const MenuItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyMenuItem?.props?.default), props_), [props_]);
-  const ListItem = React.useMemo(() => theme?.elements?.ListItem || ListItemElement, [theme]);
-  const List = React.useMemo(() => theme?.elements?.List || ListElement, [theme]);
-  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
-  const Menu = React.useMemo(() => theme?.elements?.Menu || MenuElement, [theme]);
-  const Expand = React.useMemo(() => theme?.elements?.Expand || ExpandElement, [theme]);
-  const Fade = React.useMemo(() => theme?.elements?.Fade || FadeElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyMenuItem?.props?.default), props_);
+  const ListItem = theme?.elements?.ListItem || ListItemElement;
+  const List = theme?.elements?.List || ListElement;
+  const IconButton = theme?.elements?.IconButton || IconButtonElement;
+  const Menu = theme?.elements?.Menu || MenuElement;
+  const Expand = theme?.elements?.Expand || ExpandElement;
+  const Fade = theme?.elements?.Fade || FadeElement;
   const {
       tonal = true,
       color = 'default',
@@ -114,12 +114,12 @@ const MenuItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
       if (is('function', item.props.onClick)) item.props.onClick(event);
     }
   }, item?.props))));
-  const onClick = React.useCallback(event => {
+  const onClick = event_0 => {
     if (!refs.props.current.disabled) {
       if (refs.props.current.list) setOpenList(!refs.openList.current);
     }
-    if (is('function', onClick_)) onClick_(event);
-  }, [onClick_]);
+    if (is('function', onClick_)) onClick_(event_0);
+  };
   let end = end_;
   if (menu) end = end_ || /*#__PURE__*/React.createElement(IconMaterialArrowRight, null);
   if (list) end = end_ || indicator && /*#__PURE__*/React.createElement(IconButton, {
@@ -131,18 +131,18 @@ const MenuItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
     className: classNames([classes.icon, openList && classes.icon_open])
   }));
   React.useEffect(() => {
-    const onKeyDown = event => {
+    const onKeyDown = event_1 => {
       if (!refs.props.current.disabled) {
         if (menu) {
-          if (refs.openMenu.current && (theme.direction === 'ltr' && event.key === 'ArrowLeft' || theme.direction === 'rtl' && event.key === 'ArrowRight')) setOpenMenu(false);
-          if (!refs.openMenu.current && (theme.direction === 'ltr' && event.key === 'ArrowRight' || theme.direction === 'rtl' && event.key === 'ArrowLeft')) setOpenMenu(true);
+          if (refs.openMenu.current && (theme.direction === 'ltr' && event_1.key === 'ArrowLeft' || theme.direction === 'rtl' && event_1.key === 'ArrowRight')) setOpenMenu(false);
+          if (!refs.openMenu.current && (theme.direction === 'ltr' && event_1.key === 'ArrowRight' || theme.direction === 'rtl' && event_1.key === 'ArrowLeft')) setOpenMenu(true);
         } else if (list) {
-          if (refs.openList.current && (event.key === 'ArrowUp' || theme.direction === 'ltr' && event.key === 'ArrowLeft' || theme.direction === 'rtl' && event.key === 'ArrowRight')) setOpenMenu(false);
-          if (!refs.openList.current && (event.key === 'ArrowDown' || theme.direction === 'ltr' && event.key === 'ArrowRight' || theme.direction === 'rtl' && event.key === 'ArrowLeft')) setOpenMenu(true);
-          if (event.key === 'Enter' && refs.focus.current) onClick();
+          if (refs.openList.current && (event_1.key === 'ArrowUp' || theme.direction === 'ltr' && event_1.key === 'ArrowLeft' || theme.direction === 'rtl' && event_1.key === 'ArrowRight')) setOpenMenu(false);
+          if (!refs.openList.current && (event_1.key === 'ArrowDown' || theme.direction === 'ltr' && event_1.key === 'ArrowRight' || theme.direction === 'rtl' && event_1.key === 'ArrowLeft')) setOpenMenu(true);
+          if (event_1.key === 'Enter' && refs.focus.current) onClick();
         } else {
-          if (event.key === 'Enter' && !refs.props.current.button && refs.focus.current) {
-            if (is('function', refs.props.current.onClick)) refs.props.current.onClick(event);
+          if (event_1.key === 'Enter' && !refs.props.current.button && refs.focus.current) {
+            if (is('function', refs.props.current.onClick)) refs.props.current.onClick(event_1);
           }
         }
       }
@@ -168,26 +168,26 @@ const MenuItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
   React.useEffect(() => {
     if (menu) setOpenMenu(hover || focus || preselected || selected);
   }, [focus]);
-  const onMouseEnter = React.useCallback(event => {
+  const onMouseEnter = event_2 => {
     if (!disabled) setHover(true);
-    if (is('function', onMouseEnter_)) onMouseEnter_(event);
-  }, []);
-  const onMouseLeave = React.useCallback(event => {
+    if (is('function', onMouseEnter_)) onMouseEnter_(event_2);
+  };
+  const onMouseLeave = event_3 => {
     if (!disabled) {
       setHover(false);
       setFocus(false);
     }
-    if (is('function', onMouseLeave_)) onMouseLeave_(event);
-  }, []);
-  const onFocus = React.useCallback(event => {
-    if (event.target === event.currentTarget && !disabled) setFocus(true);
-    if (is('function', onFocus_)) onFocus_(event);
-  }, []);
-  const onBlur = React.useCallback(event => {
-    if (event.target === event.currentTarget && !disabled) setFocus(false);
-    if (is('function', onBlur_)) onBlur_(event);
-  }, []);
-  const onCloseList = React.useCallback(() => {
+    if (is('function', onMouseLeave_)) onMouseLeave_(event_3);
+  };
+  const onFocus = event_4 => {
+    if (event_4.target === event_4.currentTarget && !disabled) setFocus(true);
+    if (is('function', onFocus_)) onFocus_(event_4);
+  };
+  const onBlur = event_5 => {
+    if (event_5.target === event_5.currentTarget && !disabled) setFocus(false);
+    if (is('function', onBlur_)) onBlur_(event_5);
+  };
+  const onCloseList = () => {
     if (!disabled) {
       setOpenList(false);
       setHover(false);
@@ -195,8 +195,8 @@ const MenuItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
 
       // if (is('function', onClose_)) onClose_();
     }
-  }, []);
-  const onCloseMenu = React.useCallback(() => {
+  };
+  const onCloseMenu = () => {
     if (!disabled) {
       setOpenMenu(false);
       setHover(false);
@@ -204,14 +204,14 @@ const MenuItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
 
       // if (is('function', onClose_)) onClose_();
     }
-  }, []);
+  };
   ListTransitionComponentProps.in = !!openList;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListItem, _extends({
-    ref: item => {
+    ref: item_0 => {
       if (ref) {
-        if (is('function', ref)) ref(item);else if (ref?.current) ref.current = item;
+        if (is('function', ref)) ref(item_0);else if (ref?.current) ref.current = item_0;
       }
-      refs.root.current = item;
+      refs.root.current = item_0;
     },
     tonal: tonal,
     color: color,

package/esm/Meta/Meta.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["values", "separator", "ItemProps", "SeparatorProps", "className", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { c as _c } from "react/compiler-runtime";
 import React from 'react';
 import { is } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
@@ -21,45 +22,75 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-Meta'
 });
 const Meta = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const $ = _c(8);
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyMeta?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyMeta?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Type = theme?.elements?.Type || TypeElement;
   const {
-      values: values_ = [],
-      separator: separator_ = '•',
+      values: t0,
+      separator: t1,
       ItemProps,
       SeparatorProps,
       className,
       children
     } = props,
     other = _objectWithoutProperties(props, _excluded);
+  const values_ = t0 === undefined ? [] : t0;
+  const separator_ = t1 === undefined ? "\u2022" : t1;
   const {
     classes
   } = useStyle();
-  const separator = is('string', separator_) ? /*#__PURE__*/React.createElement(Type, _extends({
+  const separator = is("string", separator_) ? /*#__PURE__*/React.createElement(Type, _extends({
     version: "b3",
     priority: "secondary"
   }, SeparatorProps), separator_) : separator_;
-  const getItem = (item, index) => {
-    if (is('simple', item)) return /*#__PURE__*/React.createElement(Type, {
-      key: index,
-      version: "b3",
-      priority: "secondary"
-    }, item);
-    return /*#__PURE__*/React.cloneElement(item, {
-      key: index
-    });
-  };
-  const values = values_?.filter(Boolean)?.flatMap((item, index) => !index ? getItem(item, index) : [separator, getItem(item, index)]);
-  return /*#__PURE__*/React.createElement(Line, _extends({
-    ref: ref,
-    gap: 1,
-    direction: "row",
-    align: "center",
-    justify: "flex-start",
-    className: classNames([staticClassName('Meta', theme) && ['onesy-Meta-root'], className, classes.root])
-  }, other), values);
+  let t2;
+  if ($[0] !== Type) {
+    t2 = (item, index) => {
+      if (is("simple", item)) {
+        return /*#__PURE__*/React.createElement(Type, {
+          key: index,
+          version: "b3",
+          priority: "secondary"
+        }, item);
+      }
+      return /*#__PURE__*/React.cloneElement(item, {
+        key: index
+      });
+    };
+    $[0] = Type;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const getItem = t2;
+  const values = values_?.filter(Boolean)?.flatMap((item_0, index_0) => !index_0 ? getItem(item_0, index_0) : [separator, getItem(item_0, index_0)]);
+  const t3 = 1;
+  const t4 = "row";
+  const t5 = "center";
+  const t6 = "flex-start";
+  const t7 = classNames([staticClassName("Meta", theme) && ["onesy-Meta-root"], className, classes.root]);
+  let t8;
+  if ($[2] !== Line || $[3] !== other || $[4] !== ref || $[5] !== t7 || $[6] !== values) {
+    t8 = /*#__PURE__*/React.createElement(Line, _extends({
+      ref: ref,
+      gap: t3,
+      direction: t4,
+      align: t5,
+      justify: t6,
+      className: t7
+    }, other), values);
+    $[2] = Line;
+    $[3] = other;
+    $[4] = ref;
+    $[5] = t7;
+    $[6] = values;
+    $[7] = t8;
+  } else {
+    t8 = $[7];
+  }
+  return t8;
 });
 Meta.displayName = 'onesy-Meta';
 export default Meta;

package/esm/Modal/Modal.js

@@ -138,11 +138,11 @@ let MODALS_OPEN = 0;
 
 const Modal = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyModal?.props?.default), props_), [props_]);
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
-  const Portal = React.useMemo(() => theme?.elements?.Portal || PortalElement, [theme]);
-  const Focus = React.useMemo(() => theme?.elements?.Focus || FocusElement, [theme]);
-  const Fade = React.useMemo(() => theme?.elements?.Fade || FadeElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyModal?.props?.default), props_);
+  const Surface = theme?.elements?.Surface || SurfaceElement;
+  const Portal = theme?.elements?.Portal || PortalElement;
+  const Focus = theme?.elements?.Focus || FocusElement;
+  const Fade = theme?.elements?.Fade || FadeElement;
   const {
       tonal = true,
       color = 'primary',
@@ -205,8 +205,8 @@ const Modal = /*#__PURE__*/React.forwardRef((props_, ref) => {
     },
     close: () => {
       MODALS_OPEN--;
-      const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
-      if (MODALS_OPEN <= 0 && freezeScroll) rootDocument.body.style.removeProperty('overflow');
+      const rootDocument_0 = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
+      if (MODALS_OPEN <= 0 && freezeScroll) rootDocument_0.body.style.removeProperty('overflow');
     }
   };
   let maxWidth = maxWidth_;
@@ -222,13 +222,13 @@ const Modal = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }
   };
   React.useEffect(() => {
-    const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
+    const rootDocument_1 = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
     if (open) modal.open();
 
     // Bug clean up fix
     refs.interval.current = setInterval(() => {
-      if (MODALS_OPEN <= 0 && refs.freezeScroll.current && rootDocument.body.style.overflow === 'hidden') {
-        rootDocument.body.style.removeProperty('overflow');
+      if (MODALS_OPEN <= 0 && refs.freezeScroll.current && rootDocument_1.body.style.overflow === 'hidden') {
+        rootDocument_1.body.style.removeProperty('overflow');
       }
     }, 1400);
     return () => {