@onesy/ui-react 1.0.172 → 1.0.173

package/MenuDesktop/MenuDesktop.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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");
@@ -23,7 +22,8 @@ var _Type = _interopRequireDefault(require("../Type"));
 var _Line = _interopRequireDefault(require("../Line"));
 var _useMediaQuery = _interopRequireDefault(require("../useMediaQuery"));
 var _utils2 = require("../utils");
-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"];
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ref", "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) { (0, _defineProperty2.default)(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; }
 const useStyle = (0, _styleReact.style)(theme => ({
@@ -103,8 +103,8 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-MenuDesktop'
 });
-const Wrapper = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
-  const $ = (0, _compilerRuntime.c)(9);
+const Wrapper = props => {
+  const $ = (0, _compilerRuntime.c)(8);
   const theme = (0, _styleReact.useOnesyTheme)();
   const {
     onMouseEnter,
@@ -123,25 +123,24 @@ const Wrapper = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     t0 = $[2];
   }
   let t1;
-  if ($[3] !== onMouseEnter || $[4] !== onMouseLeave || $[5] !== props.children || $[6] !== ref || $[7] !== t0) {
-    t1 = /*#__PURE__*/_react.default.createElement("div", {
-      ref: ref,
+  if ($[3] !== onMouseEnter || $[4] !== onMouseLeave || $[5] !== props.children || $[6] !== t0) {
+    t1 = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave,
-      style: t0
-    }, props.children);
+      style: t0,
+      children: props.children
+    });
     $[3] = onMouseEnter;
     $[4] = onMouseLeave;
     $[5] = props.children;
-    $[6] = ref;
-    $[7] = t0;
-    $[8] = t1;
+    $[6] = t0;
+    $[7] = t1;
   } else {
-    t1 = $[8];
+    t1 = $[7];
   }
   return t1;
-});
-const MenuDesktop = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+};
+const MenuDesktop = props_ => {
   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 = _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_);
@@ -154,6 +153,7 @@ const MenuDesktop = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   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 {
+      ref,
       tonal = true,
       color = 'primary',
       version = 'filled',
@@ -389,121 +389,132 @@ const MenuDesktop = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   // not to waste html space
   if (!(items !== null && items !== void 0 && items.length)) return;
   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_9 => {
-      if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item_9);else ref.current = item_9;
-      }
-      refs.root.current = item_9;
-    },
-    gap: 0,
-    direction: "column",
-    align: "unset",
-    justify: "unset",
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('MenuDesktop', theme) && ['onesy-MenuDesktop-root'], className, classes.root])
-  }, other), /*#__PURE__*/_react.default.createElement(Line, {
-    gap: 0,
-    direction: "row",
-    align: "unset",
-    justify: "unset"
-  }, items.map((item_10, index_4) =>
-  // hovered and onClick add to the method
-  (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_10.disabled && item_10.menu ? 0 : undefined,
-    "data-value": item_10.value,
-    gap: 0.5,
-    direction: "row",
-    align: "center"
-  }, ItemProps, !!item_10.menu && openOnClick && {
-    onClick: () => onClick(item_10)
-  }, !!item_10.menu && !mobile && openOnFocus && {
-    onFocus: () => onFocus(item_10),
-    onBlur: () => onBlur()
-  }, !!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_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_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_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_11.menu)), /*#__PURE__*/_react.default.createElement(Append, (0, _extends2.default)({
-    open: !!open,
-    anchorElement: refs.anchorElement.current,
-    position: "bottom",
-    alignment: "start",
-    element: ({
-      ref: refAppend,
-      values,
-      style: styleAppend
-    }) => {
-      var _menu$props2, _refs$menu$current2;
-      return /*#__PURE__*/_react.default.createElement(Wrapper, (0, _extends2.default)({
-        ref: refAppend,
-        onMouseEnter: updateOpenPure,
-        onMouseLeave: onMouseLeave
-      }, WrapperProps, {
-        style: _objectSpread(_objectSpread(_objectSpread({}, append), styleAppend), {}, {
-          transition: 'none'
-        }, WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.style)
-      }), /*#__PURE__*/_react.default.createElement(TransitionComponent, (0, _extends2.default)({
-        in: inProp,
-        onEntered: () => {
-          if (refAppend.current) setTimeout(() => {
-            refAppend.current.style.transition = theme.methods.transitions.make(['width', 'height', 'transform']);
-          }, 14);
-        },
-        onExited: () => {
-          close();
-          if (refAppend.current) refAppend.current.style.transition = 'none';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ClickListener, {
+    onClickOutside: onClickOutside,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
+      ref: item_9 => {
+        if (ref) {
+          if ((0, _utils.is)('function', ref)) ref(item_9);else ref.current = item_9;
+        }
+        refs.root.current = item_9;
+      },
+      gap: 0,
+      direction: "column",
+      align: "unset",
+      justify: "unset",
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('MenuDesktop', theme) && ['onesy-MenuDesktop-root'], className, classes.root])
+    }, other), {}, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+        gap: 0,
+        direction: "row",
+        align: "unset",
+        justify: "unset",
+        children: items.map((item_10, index_4) =>
+        // hovered and onClick add to the method
+        (0, _utils.is)('function', renderItem) ? renderItem(item_10, index_4) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+          ref: item__9 => {
+            if (!refs.items.current.includes(item_10)) refs.items.current.push(item__9);
+          },
+          tabIndex: !item_10.disabled && item_10.menu ? 0 : undefined,
+          "data-value": item_10.value,
+          gap: 0.5,
+          direction: "row",
+          align: "center"
+        }, ItemProps), !!item_10.menu && openOnClick && {
+          onClick: () => onClick(item_10)
+        }), !!item_10.menu && !mobile && openOnFocus && {
+          onFocus: () => onFocus(item_10),
+          onBlur: () => onBlur()
+        }), !!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_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]),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread({
+            version: "l1"
+          }, TypeProps), {}, {
+            children: item_10.name !== undefined ? item_10.name : item_10.label
+          })), !!item_10.menu && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconIndicator, _objectSpread({
+            size: 20,
+            className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('MenuDesktop', theme) && ['onesy-MenuDesktop-indicator'], classes.indicator, inProp && open === item_10.value && classes.indicator_open])
+          }, IconProps))]
+        }), index_4))
+      }), !init && items.map((item_11, index_5) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        ref: item__10 => refs.menus.current[index_5] = item__10,
+        style: {
+          position: 'absolute',
+          visibility: 'hidden'
         },
-        add: true,
-        removeOnExited: true
-      }, TransitionComponentProps), /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
-        tonal: tonal,
-        color: color,
-        version: version
-      }, WrapperMenuProps, {
-        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('MenuDesktop', theme) && ['onesy-MenuDesktop-menu-wrapper'], WrapperMenuProps === null || WrapperMenuProps === void 0 ? void 0 : WrapperMenuProps.className, classes.menuWrapper]),
-        style: _objectSpread(_objectSpread({}, append), WrapperMenuProps === null || WrapperMenuProps === void 0 ? void 0 : WrapperMenuProps.style)
-      }), menu && menuTransition && /*#__PURE__*/_react.default.createElement(Transitions, {
-        switch: true,
-        mode: "in-out-follow"
-      }, /*#__PURE__*/_react.default.createElement(Transition, {
-        key: openItem
-      }, status => {
-        var _menu$props, _refs$menu$current;
-        return /*#__PURE__*/_react.default.cloneElement(menu, {
-          // For manual onClose within the element
-          onMenuDesktopClose: onClose,
-          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('MenuDesktop', theme) && ['onesy-MenuDesktop-menu', status], ...((0, _utils.is)('function', menuTransitionClassName) ? menuTransitionClassName(status, openItem) : []), classes[theme.direction === 'ltr' ? openIndex <= 0 || openIndex < refs.previousOpenIndex.current ? 'menu' : 'menu_reverse' : openIndex <= 0 || openIndex < refs.previousOpenIndex.current ? 'menu_reverse' : 'menu']]),
-          style: _objectSpread(_objectSpread(_objectSpread({
-            position: 'absolute'
-          }, menu === null || menu === void 0 || (_menu$props = menu.props) === null || _menu$props === void 0 ? void 0 : _menu$props.style), (_refs$menu$current = refs.menu.current) === null || _refs$menu$current === void 0 ? void 0 : _refs$menu$current.props.style), (0, _utils.is)('function', menuTransitionStyle) && menuTransitionStyle(status, openItem))
-        });
-      })), menu && !menuTransition && (/*#__PURE__*/_react.default.cloneElement(menu, {
-        // For manual onClose within the element
-        onMenuDesktopClose: onClose,
-        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('MenuDesktop', theme) && ['onesy-MenuDesktop-menu'], classes.menu]),
-        style: _objectSpread(_objectSpread(_objectSpread({}, menu === null || menu === void 0 || (_menu$props2 = menu.props) === null || _menu$props2 === void 0 ? void 0 : _menu$props2.style), (_refs$menu$current2 = refs.menu.current) === null || _refs$menu$current2 === void 0 ? void 0 : _refs$menu$current2.style), append)
-      })))));
-    }
-  }, AppendProps))));
-});
+        children: item_11.menu
+      }, index_5)), /*#__PURE__*/(0, _jsxRuntime.jsx)(Append, _objectSpread({
+        open: !!open,
+        anchorElement: refs.anchorElement.current,
+        position: "bottom",
+        alignment: "start",
+        element: ({
+          ref: refAppend,
+          values,
+          style: styleAppend
+        }) => {
+          var _menu$props2, _refs$menu$current2;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, _objectSpread(_objectSpread({
+            ref: refAppend,
+            onMouseEnter: updateOpenPure,
+            onMouseLeave: onMouseLeave
+          }, WrapperProps), {}, {
+            style: _objectSpread(_objectSpread(_objectSpread({}, append), styleAppend), {}, {
+              transition: 'none'
+            }, WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.style),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, _objectSpread(_objectSpread({
+              in: inProp,
+              onEntered: () => {
+                if (refAppend.current) setTimeout(() => {
+                  refAppend.current.style.transition = theme.methods.transitions.make(['width', 'height', 'transform']);
+                }, 14);
+              },
+              onExited: () => {
+                close();
+                if (refAppend.current) refAppend.current.style.transition = 'none';
+              },
+              add: true,
+              removeOnExited: true
+            }, TransitionComponentProps), {}, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Surface, _objectSpread(_objectSpread({
+                tonal: tonal,
+                color: color,
+                version: version
+              }, WrapperMenuProps), {}, {
+                className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('MenuDesktop', theme) && ['onesy-MenuDesktop-menu-wrapper'], WrapperMenuProps === null || WrapperMenuProps === void 0 ? void 0 : WrapperMenuProps.className, classes.menuWrapper]),
+                style: _objectSpread(_objectSpread({}, append), WrapperMenuProps === null || WrapperMenuProps === void 0 ? void 0 : WrapperMenuProps.style),
+                children: [menu && menuTransition && /*#__PURE__*/(0, _jsxRuntime.jsx)(Transitions, {
+                  switch: true,
+                  mode: "in-out-follow",
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Transition, {
+                    children: status => {
+                      var _menu$props, _refs$menu$current;
+                      return /*#__PURE__*/_react.default.cloneElement(menu, {
+                        // For manual onClose within the element
+                        onMenuDesktopClose: onClose,
+                        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('MenuDesktop', theme) && ['onesy-MenuDesktop-menu', status], ...((0, _utils.is)('function', menuTransitionClassName) ? menuTransitionClassName(status, openItem) : []), classes[theme.direction === 'ltr' ? openIndex <= 0 || openIndex < refs.previousOpenIndex.current ? 'menu' : 'menu_reverse' : openIndex <= 0 || openIndex < refs.previousOpenIndex.current ? 'menu_reverse' : 'menu']]),
+                        style: _objectSpread(_objectSpread(_objectSpread({
+                          position: 'absolute'
+                        }, menu === null || menu === void 0 || (_menu$props = menu.props) === null || _menu$props === void 0 ? void 0 : _menu$props.style), (_refs$menu$current = refs.menu.current) === null || _refs$menu$current === void 0 ? void 0 : _refs$menu$current.props.style), (0, _utils.is)('function', menuTransitionStyle) && menuTransitionStyle(status, openItem))
+                      });
+                    }
+                  }, openItem)
+                }), menu && !menuTransition && (/*#__PURE__*/_react.default.cloneElement(menu, {
+                  // For manual onClose within the element
+                  onMenuDesktopClose: onClose,
+                  className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('MenuDesktop', theme) && ['onesy-MenuDesktop-menu'], classes.menu]),
+                  style: _objectSpread(_objectSpread(_objectSpread({}, menu === null || menu === void 0 || (_menu$props2 = menu.props) === null || _menu$props2 === void 0 ? void 0 : _menu$props2.style), (_refs$menu$current2 = refs.menu.current) === null || _refs$menu$current2 === void 0 ? void 0 : _refs$menu$current2.style), append)
+                }))]
+              }))
+            }))
+          }));
+        }
+      }, AppendProps))]
+    }))
+  });
+};
 MenuDesktop.displayName = 'onesy-MenuDesktop';
 var _default = exports.default = MenuDesktop;

package/MenuItem/MenuItem.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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 _react = _interopRequireDefault(require("react"));
@@ -20,7 +19,8 @@ var _Menu = _interopRequireDefault(require("../Menu"));
 var _Expand = _interopRequireDefault(require("../Expand"));
 var _Fade = _interopRequireDefault(require("../Fade"));
 var _utils2 = require("../utils");
-const _excluded = ["tonal", "color", "colorSelected", "size", "menu", "menuId", "menuOpen", "openMenu", "openMenuDefault", "openList", "openListDefault", "menuItem", "list", "preselected", "selected", "inset", "end", "indicator", "include", "footer", "menuCloseOnClick", "listCloseOnClick", "disabled", "onClick", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave", "ExpandIcon", "ListTransitionComponent", "ListProps", "ListTransitionComponentProps", "ExpandProps", "MenuProps"];
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ref", "tonal", "color", "colorSelected", "size", "menu", "menuId", "menuOpen", "openMenu", "openMenuDefault", "openList", "openListDefault", "menuItem", "list", "preselected", "selected", "inset", "end", "indicator", "include", "footer", "menuCloseOnClick", "listCloseOnClick", "disabled", "onClick", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave", "ExpandIcon", "ListTransitionComponent", "ListProps", "ListTransitionComponentProps", "ExpandProps", "MenuProps"];
 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) { (0, _defineProperty2.default)(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; }
 const useStyle = (0, _styleReact.style)(theme => ({
@@ -38,7 +38,7 @@ const ListItemDelays = {
     enter: 70
   }
 };
-const MenuItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const MenuItem = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6;
   const theme = (0, _styleReact.useOnesyTheme)();
   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.onesyMenuItem) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
@@ -49,6 +49,7 @@ const MenuItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const Expand = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Expand) || _Expand.default;
   const Fade = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Fade) || _Fade.default;
   const {
+      ref,
       tonal = true,
       color = 'default',
       colorSelected = props.color,
@@ -129,15 +130,16 @@ const MenuItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     if ((0, _utils.is)('function', onClick_)) onClick_(event_0);
   };
   let end = end_;
-  if (menu) end = end_ || /*#__PURE__*/_react.default.createElement(_IconMaterialArrowRightW.default, null);
-  if (list) end = end_ || indicator && /*#__PURE__*/_react.default.createElement(IconButton, {
+  if (menu) end = end_ || /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialArrowRightW.default, {});
+  if (list) end = end_ || indicator && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
     size: 24,
     fontSize: _utils2.iconFontSize,
     onClick: onClick,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ListItem', theme) && ['onesy-ListItem-icon-button'], classes.iconButton])
-  }, /*#__PURE__*/_react.default.createElement(ExpandIcon, {
-    className: (0, _styleReact.classNames)([classes.icon, openList && classes.icon_open])
-  }));
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ListItem', theme) && ['onesy-ListItem-icon-button'], classes.iconButton]),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandIcon, {
+      className: (0, _styleReact.classNames)([classes.icon, openList && classes.icon_open])
+    })
+  });
   _react.default.useEffect(() => {
     var _refs$root$current;
     const onKeyDown = event_1 => {
@@ -215,60 +217,69 @@ const MenuItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     }
   };
   ListTransitionComponentProps.in = !!openList;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ListItem, (0, _extends2.default)({
-    ref: item_0 => {
-      if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item_0);else if (ref !== null && ref !== void 0 && ref.current) ref.current = item_0;
-      }
-      refs.root.current = item_0;
-    },
-    tonal: tonal,
-    color: color,
-    colorSelected: colorSelected,
-    size: size,
-    inset: inset,
-    selected: selected,
-    preselected: preselected,
-    end: end,
-    disabled: disabled,
-    onClick: onClick,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    "aria-haspopup": !!menu,
-    "aria-expanded": openMenu,
-    menuItem: true,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('MenuItem', theme) && ['onesy-MenuItem-root', `onesy-MenuItem-size-${size}`], classes.root]),
-    InteractionProps: {
-      focus
-    },
-    RootProps: {
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ListItem', theme) && [menu && `onesy-ListItem-menu`, list && `onesy-ListItem-list`, menuItem && `onesy-ListItem-menu-item`, menuOpen && `onesy-ListItem-menu-open`, openMenu && `onesy-ListItem-open-menu`, openList && `onesy-ListItem-open-list`, menuItem && [inset && `onesy-ListItem-menu-item-inset`]]])
-    },
-    footer: (footer || menu || list) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, footer, list && /*#__PURE__*/_react.default.createElement(Expand, (0, _extends2.default)({
-      in: openList,
-      parent: refs.root.current
-    }, ExpandProps), /*#__PURE__*/_react.default.createElement(ListTransitionComponent, ListTransitionComponentProps, /*#__PURE__*/_react.default.createElement(List, (0, _extends2.default)({
-      indent: 5
-    }, ListProps, {
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ListItem', theme) && ['onesy-ListItem-list'], ListProps === null || ListProps === void 0 ? void 0 : ListProps.className, classes.list])
-    }), list))), menu && /*#__PURE__*/_react.default.createElement(Menu, (0, _extends2.default)({
-      open: !!openMenu,
-      include: include,
-      onClose: onCloseMenu,
-      closeOnClickAway: false,
-      anchorElement: refs.root.current,
-      menuItems: menu,
-      transformOrigin: "left top",
-      transformOriginSwitch: "right top",
-      transformOriginRtl: "left top",
-      transformOriginRtlSwitch: "right top",
-      position: "right",
-      alignment: "start",
-      onMouseEnter: onMouseEnter
-    }, MenuProps)))
-  }, other)));
-});
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItem, _objectSpread({
+      ref: item_0 => {
+        if (ref) {
+          if ((0, _utils.is)('function', ref)) ref(item_0);else if (ref !== null && ref !== void 0 && ref.current) ref.current = item_0;
+        }
+        refs.root.current = item_0;
+      },
+      tonal: tonal,
+      color: color,
+      colorSelected: colorSelected,
+      size: size,
+      inset: inset,
+      selected: selected,
+      preselected: preselected,
+      end: end,
+      disabled: disabled,
+      onClick: onClick,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      "aria-haspopup": !!menu,
+      "aria-expanded": openMenu,
+      menuItem: true,
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('MenuItem', theme) && ['onesy-MenuItem-root', `onesy-MenuItem-size-${size}`], classes.root]),
+      InteractionProps: {
+        focus
+      },
+      RootProps: {
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ListItem', theme) && [menu && `onesy-ListItem-menu`, list && `onesy-ListItem-list`, menuItem && `onesy-ListItem-menu-item`, menuOpen && `onesy-ListItem-menu-open`, openMenu && `onesy-ListItem-open-menu`, openList && `onesy-ListItem-open-list`, menuItem && [inset && `onesy-ListItem-menu-item-inset`]]])
+      },
+      footer: (footer || menu || list) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [footer, list && /*#__PURE__*/(0, _jsxRuntime.jsx)(Expand, _objectSpread(_objectSpread({
+          in: openList,
+          parent: refs.root.current
+        }, ExpandProps), {}, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ListTransitionComponent, _objectSpread(_objectSpread({}, ListTransitionComponentProps), {}, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(List, _objectSpread(_objectSpread({
+              indent: 5
+            }, ListProps), {}, {
+              className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ListItem', theme) && ['onesy-ListItem-list'], ListProps === null || ListProps === void 0 ? void 0 : ListProps.className, classes.list]),
+              children: list
+            }))
+          }))
+        })), menu && /*#__PURE__*/(0, _jsxRuntime.jsx)(Menu, _objectSpread({
+          open: !!openMenu,
+          include: include,
+          onClose: onCloseMenu,
+          closeOnClickAway: false,
+          anchorElement: refs.root.current,
+          menuItems: menu,
+          transformOrigin: "left top",
+          transformOriginSwitch: "right top",
+          transformOriginRtl: "left top",
+          transformOriginRtlSwitch: "right top",
+          position: "right",
+          alignment: "start",
+          onMouseEnter: onMouseEnter
+        }, MenuProps))]
+      })
+    }, other))
+  });
+};
 MenuItem.displayName = 'onesy-MenuItem';
 var _default = exports.default = MenuItem;

package/Meta/Meta.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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");
@@ -15,6 +14,7 @@ var _styleReact = require("@onesy/style-react");
 var _Type = _interopRequireDefault(require("../Type"));
 var _Line = _interopRequireDefault(require("../Line"));
 var _utils2 = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 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) { (0, _defineProperty2.default)(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; }
@@ -28,9 +28,9 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-Meta'
 });
-const Meta = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Meta = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _values_$filter;
-  const $ = (0, _compilerRuntime.c)(8);
+  const $ = (0, _compilerRuntime.c)(7);
   const theme = (0, _styleReact.useOnesyTheme)();
   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.onesyMeta) === 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;
@@ -49,19 +49,21 @@ const Meta = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const {
     classes
   } = useStyle();
-  const separator = (0, _utils.is)("string", separator_) ? /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
+  const separator = (0, _utils.is)("string", separator_) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread({
     version: "b3",
     priority: "secondary"
-  }, SeparatorProps), separator_) : separator_;
+  }, SeparatorProps), {}, {
+    children: separator_
+  })) : separator_;
   let t2;
   if ($[0] !== Type) {
     t2 = (item, index) => {
       if ((0, _utils.is)("simple", item)) {
-        return /*#__PURE__*/_react.default.createElement(Type, {
-          key: index,
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
           version: "b3",
-          priority: "secondary"
-        }, item);
+          priority: "secondary",
+          children: item
+        }, index);
       }
       return /*#__PURE__*/_react.default.cloneElement(item, {
         key: index
@@ -80,25 +82,25 @@ const Meta = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const t6 = "flex-start";
   const t7 = (0, _styleReact.classNames)([(0, _utils2.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.default.createElement(Line, (0, _extends2.default)({
-      ref: ref,
+  if ($[2] !== Line || $[3] !== other || $[4] !== t7 || $[5] !== values) {
+    t8 = /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
       gap: t3,
       direction: t4,
       align: t5,
       justify: t6,
       className: t7
-    }, other), values);
+    }, other), {}, {
+      children: values
+    }));
     $[2] = Line;
     $[3] = other;
-    $[4] = ref;
-    $[5] = t7;
-    $[6] = values;
-    $[7] = t8;
+    $[4] = t7;
+    $[5] = values;
+    $[6] = t8;
   } else {
-    t8 = $[7];
+    t8 = $[6];
   }
   return t8;
-});
+};
 Meta.displayName = 'onesy-Meta';
 var _default = exports.default = Meta;