@onesy/ui-react 1.0.164 → 1.0.165

package/ModalMain/ModalMain.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 _styleReact = require("@onesy/style-react");
 var _Line = _interopRequireDefault(require("../Line"));
@@ -27,15 +28,11 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-ModalMain'
 });
 const ModalMain = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements;
+  const $ = (0, _compilerRuntime.c)(7);
   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.onesyModalMain) === 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 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.onesyModalMain) === 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 {
       className,
       children
@@ -44,15 +41,32 @@ const ModalMain = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const {
     classes
   } = useStyle();
-  let align = 'flex-start';
-  if (_react.default.Children.toArray(children).length > 1) align = 'center';
-  return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    ref: ref,
-    align: align,
-    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('ModalMain', theme) && ['onesy-ModalMain-root'], className, classes.root]),
-    flex: true,
-    fullWidth: true
-  }, other), children);
+  let align = "flex-start";
+  if (_react.default.Children.toArray(children).length > 1) {
+    align = "center";
+  }
+  const t0 = align;
+  const t1 = (0, _styleReact.classNames)([(0, _utils.staticClassName)("ModalMain", theme) && ["onesy-ModalMain-root"], className, classes.root]);
+  let t2;
+  if ($[0] !== Line || $[1] !== align || $[2] !== children || $[3] !== other || $[4] !== ref || $[5] !== t1) {
+    t2 = /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+      ref: ref,
+      align: t0,
+      className: t1,
+      flex: true,
+      fullWidth: true
+    }, other), children);
+    $[0] = Line;
+    $[1] = align;
+    $[2] = children;
+    $[3] = other;
+    $[4] = ref;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
 });
 ModalMain.displayName = 'onesy-ModalMain';
 var _default = exports.default = ModalMain;

package/ModalText/ModalText.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { IType } from '../Type/Type';
-export type IModalText = IType & {};
+export declare type IModalText = IType & {};
 declare const ModalText: React.FC<IModalText>;
 export default ModalText;

package/ModalText/ModalText.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 _styleReact = require("@onesy/style-react");
 var _Type = _interopRequireDefault(require("../Type"));
@@ -21,15 +22,11 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-ModalText'
 });
 const ModalText = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements;
+  const $ = (0, _compilerRuntime.c)(6);
   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.onesyModalText) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Type = _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.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.onesyModalText) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Type = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Type) || _Type.default;
   const {
       className,
       children
@@ -38,13 +35,29 @@ const ModalText = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const {
     classes
   } = useStyle();
-  return /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
-    ref: ref,
-    version: "b2",
-    align: "center",
-    id: "onesy-modal-text",
-    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('ModalText', theme) && ['onesy-ModalText-root'], className, classes.root])
-  }, other), children);
+  const t0 = "b2";
+  const t1 = "center";
+  const t2 = "onesy-modal-text";
+  const t3 = (0, _styleReact.classNames)([(0, _utils.staticClassName)("ModalText", theme) && ["onesy-ModalText-root"], className, classes.root]);
+  let t4;
+  if ($[0] !== Type || $[1] !== children || $[2] !== other || $[3] !== ref || $[4] !== t3) {
+    t4 = /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
+      ref: ref,
+      version: t0,
+      align: t1,
+      id: t2,
+      className: t3
+    }, other), children);
+    $[0] = Type;
+    $[1] = children;
+    $[2] = other;
+    $[3] = ref;
+    $[4] = t3;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  return t4;
 });
 ModalText.displayName = 'onesy-ModalText';
 var _default = exports.default = ModalText;

package/ModalTitle/ModalTitle.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { IType } from '../Type/Type';
-export type IModalTitle = IType & {};
+export declare type IModalTitle = IType & {};
 declare const ModalTitle: React.FC<IModalTitle>;
 export default ModalTitle;

package/ModalTitle/ModalTitle.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 _styleReact = require("@onesy/style-react");
 var _Type = _interopRequireDefault(require("../Type"));
@@ -21,15 +22,11 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-ModalTitle'
 });
 const ModalTitle = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements;
+  const $ = (0, _compilerRuntime.c)(6);
   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.onesyModalTitle) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Type = _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.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.onesyModalTitle) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Type = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Type) || _Type.default;
   const {
       className,
       children
@@ -38,13 +35,29 @@ const ModalTitle = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const {
     classes
   } = useStyle();
-  return /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
-    ref: ref,
-    version: "t2",
-    align: "center",
-    id: "onesy-modal-title",
-    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('ModalTitle', theme) && ['onesy-ModalTitle-root'], className, classes.root])
-  }, other), children);
+  const t0 = "t2";
+  const t1 = "center";
+  const t2 = "onesy-modal-title";
+  const t3 = (0, _styleReact.classNames)([(0, _utils.staticClassName)("ModalTitle", theme) && ["onesy-ModalTitle-root"], className, classes.root]);
+  let t4;
+  if ($[0] !== Type || $[1] !== children || $[2] !== other || $[3] !== ref || $[4] !== t3) {
+    t4 = /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
+      ref: ref,
+      version: t0,
+      align: t1,
+      id: t2,
+      className: t3
+    }, other), children);
+    $[0] = Type;
+    $[1] = children;
+    $[2] = other;
+    $[3] = ref;
+    $[4] = t3;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  return t4;
 });
 ModalTitle.displayName = 'onesy-ModalTitle';
 var _default = exports.default = ModalTitle;

package/MoreOptions/MoreOptions.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IMenu } from '../Menu/Menu';
 import { IPropsAny } from '../types';
-export type IMoreOptions = IMenu & {
+export declare type IMoreOptions = IMenu & {
     Icon?: any;
     IconButtonProps?: IPropsAny;
 };

package/MoreOptions/MoreOptions.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 _styleReact = require("@onesy/style-react");
 var _IconMaterialMoreVertW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialMoreVertW100"));
@@ -26,50 +27,64 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-MoreOptions'
 });
 const MoreOptions = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2;
+  const $ = (0, _compilerRuntime.c)(8);
   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.onesyMoreOptions) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Menu = _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.Menu) || _Menu.default;
-  }, [theme]);
-  const IconButton = _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.IconButton) || _IconButton.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.onesyMoreOptions) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Menu = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Menu) || _Menu.default;
+  const IconButton = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.IconButton) || _IconButton.default;
   const {
       menuItems,
-      Icon: Icon_ = _IconMaterialMoreVertW.default,
+      Icon: t0,
       IconButtonProps,
       className
     } = props,
     other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const Icon_ = t0 === undefined ? _IconMaterialMoreVertW.default : t0;
   const {
     classes
   } = useStyle();
-  const onClick = _react.default.useCallback(event => {
-    //  event.stopPropagation();
-  }, []);
+  const t1 = (0, _styleReact.classNames)([(0, _utils.staticClassName)("MoreOptions", theme) && ["onesy-MoreOptions-root"], className, classes.root]);
+  const t2 = "inherit";
+  const t3 = "small";
+  const t4 = !(menuItems !== null && menuItems !== void 0 && menuItems.length);
+  const t5 = (0, _styleReact.classNames)([(0, _utils.staticClassName)("MoreOptions", theme) && ["onesy-MoreOptions-icon-button"], IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.className, classes.iconButton]);
+  let t6;
+  if ($[0] !== Icon_) {
+    t6 = /*#__PURE__*/_react.default.createElement(Icon_, null);
+    $[0] = Icon_;
+    $[1] = t6;
+  } else {
+    t6 = $[1];
+  }
+  let t7;
+  if ($[2] !== IconButton || $[3] !== IconButtonProps || $[4] !== t4 || $[5] !== t5 || $[6] !== t6) {
+    t7 = /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+      color: t2,
+      size: t3,
+      disabled: t4
+    }, IconButtonProps, {
+      className: t5
+    }), t6);
+    $[2] = IconButton;
+    $[3] = IconButtonProps;
+    $[4] = t4;
+    $[5] = t5;
+    $[6] = t6;
+    $[7] = t7;
+  } else {
+    t7 = $[7];
+  }
   return /*#__PURE__*/_react.default.createElement(Menu, (0, _extends2.default)({
     alignment: "center",
-    onClick: onClick,
     menuItems: menuItems
   }, other, {
     ListProps: _objectSpread({
-      color: 'themed',
-      size: 'small'
+      color: "themed",
+      size: "small"
     }, other === null || other === void 0 ? void 0 : other.ListProps),
-    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('MoreOptions', theme) && ['onesy-MoreOptions-root'], className, classes.root])
-  }), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
-    color: "inherit",
-    size: "small",
-    disabled: !(menuItems !== null && menuItems !== void 0 && menuItems.length),
-    onClick: onClick
-  }, IconButtonProps, {
-    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('MoreOptions', theme) && ['onesy-MoreOptions-icon-button'], IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.className, classes.iconButton])
-  }), /*#__PURE__*/_react.default.createElement(Icon_, null)));
+    className: t1
+  }), t7);
 });
 MoreOptions.displayName = 'onesy-MoreOptions';
 var _default = exports.default = MoreOptions;

package/Move/Move.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IBaseElement } from '../types';
-export type IMove = IBaseElement & {
+export declare type IMove = IBaseElement & {
     version?: 'regular' | 'fixed';
     manage?: boolean;
     manageLevel?: number;

package/Move/Move.js

@@ -24,11 +24,9 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Move'
 });
 const Move = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2;
   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.onesyMove) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
+  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.onesyMove) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
   const {
     classes
   } = useStyle();
@@ -66,19 +64,19 @@ const Move = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const styles = {
     root: {}
   };
-  const onMouseDown = _react.default.useCallback(event => {
+  const onMouseDown = event => {
     setMouseDown(true);
     if ((0, _utils.is)('function', refs.onMouseDown.current)) refs.onMouseDown.current(event);
-  }, []);
-  const onTouchStart = _react.default.useCallback(event => {
+  };
+  const onTouchStart = event_0 => {
     setMouseDown(true);
-    if ((0, _utils.is)('function', refs.onTouchStart.current)) refs.onTouchStart.current(event);
-  }, []);
-  const onMouseUp = _react.default.useCallback(event => {
+    if ((0, _utils.is)('function', refs.onTouchStart.current)) refs.onTouchStart.current(event_0);
+  };
+  const onMouseUp = event_1 => {
     setMouseDown(false);
     refs.previousMouseEvent.current = undefined;
-    if ((0, _utils.is)('function', refs.onMouseDown.current)) refs.onMouseDown.current(event);
-  }, []);
+    if ((0, _utils.is)('function', refs.onMouseDown.current)) refs.onMouseDown.current(event_1);
+  };
   _react.default.useEffect(() => {
     var _refs$root$current;
     const onMove = (x_, y_) => {
@@ -109,28 +107,28 @@ const Move = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         setValues(valuesNew);
       }
     };
-    const onMouseMove = event => {
+    const onMouseMove = event_2 => {
       if (refs.mouseDown.current && !refs.disabled.current) {
         const {
           clientY,
           clientX
-        } = event;
+        } = event_2;
         onMove(clientX, clientY);
-        refs.previousMouseEvent.current = event;
+        refs.previousMouseEvent.current = event_2;
       }
     };
-    const onTouchMove = event => {
+    const onTouchMove = event_3 => {
       if (refs.mouseDown.current && !refs.disabled.current) {
         const {
-          clientY,
-          clientX
-        } = event.touches[0];
-        onMove(clientX, clientY);
-        refs.previousMouseEvent.current = event;
+          clientY: clientY_0,
+          clientX: clientX_0
+        } = event_3.touches[0];
+        onMove(clientX_0, clientY_0);
+        refs.previousMouseEvent.current = event_3;
 
         // Normalize for use as a mouseDown value
-        refs.previousMouseEvent.current.clientY = clientY;
-        refs.previousMouseEvent.current.clientX = clientX;
+        refs.previousMouseEvent.current.clientY = clientY_0;
+        refs.previousMouseEvent.current.clientX = clientX_0;
       }
     };
     if (manage && refs.root.current) {
@@ -156,11 +154,11 @@ const Move = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     };
   }, []);
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    ref: item => {
+    ref: item_0 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_0);else ref.current = item_0;
       }
-      refs.root.current = item;
+      refs.root.current = item_0;
     },
     onMouseDown: onMouseDown,
     onTouchStart: onTouchStart,

package/NavigationBar/NavigationBar.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ISurface } from '../Surface/Surface';
 import { INavigationItemVersion } from '../NavigationItem/NavigationItem';
-export type TNavigationBarValue = Array<string>;
-export type INavigationBar = Omit<ISurface, 'version' | 'onChange'> & {
+export declare type TNavigationBarValue = Array<string>;
+export declare type INavigationBar = Omit<ISurface, 'version' | 'onChange'> & {
     value?: TNavigationBarValue;
     valueDefault?: TNavigationBarValue;
     onChange?: (value: TNavigationBarValue) => any;

package/NavigationBar/NavigationBar.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");
@@ -32,23 +33,16 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-NavigationBar'
 });
 const NavigationBar = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2;
+  const $ = (0, _compilerRuntime.c)(4);
   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.onesyNavigationBar) === 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 Surface = _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.Surface) || _Surface.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.onesyNavigationBar) === 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 Surface = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Surface) || _Surface.default;
   const {
-      color = 'primary',
-      tonal = true,
-      version = 'regular',
+      color: t0,
+      tonal: t1,
+      version: t2,
       value,
       valueDefault,
       onChange,
@@ -58,46 +52,77 @@ const NavigationBar = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       children: children_
     } = props,
     other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const color = t0 === undefined ? "primary" : t0;
+  const tonal = t1 === undefined ? true : t1;
+  const version = t2 === undefined ? "regular" : t2;
   const {
     classes
   } = useStyle();
   const [init, setInit] = _react.default.useState(false);
   const [selected, setSelected] = _react.default.useState(() => {
     const valueNew = valueDefault !== undefined ? valueDefault : value;
-    return valueNew !== undefined ? (0, _utils.is)('array', valueNew) ? valueNew : [valueNew] : [];
+    return valueNew !== undefined ? (0, _utils.is)("array", valueNew) ? valueNew : [valueNew] : [];
   });
   const styles = {
     root: {},
     icon: {}
   };
+  let t3;
+  let t4;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = () => {
+      setInit(true);
+    };
+    t4 = [];
+    $[0] = t3;
+    $[1] = t4;
+  } else {
+    t3 = $[0];
+    t4 = $[1];
+  }
+  _react.default.useEffect(t3, t4);
+  let t5;
+  if ($[2] !== value) {
+    t5 = [value];
+    $[2] = value;
+    $[3] = t5;
+  } else {
+    t5 = $[3];
+  }
   _react.default.useEffect(() => {
-    setInit(true);
-  }, []);
-  _react.default.useEffect(() => {
-    if (init && value !== selected) setSelected((0, _utils.is)('array', value) ? value : [value]);
-  }, [value]);
+    if (init && value !== selected) {
+      setSelected((0, _utils.is)("array", value) ? value : [value]);
+    }
+  }, t5);
   const onSelect = itemProps => {
-    // Only one item at the time is selectable,
-    // and it cannot be unselected by clicking on the same item
-    const valueNew = [itemProps.value];
-    if (valueNew !== undefined) {
-      // Update inner or controlled
-      if (!props.hasOwnProperty('value')) setSelected(valueNew);
-      if ((0, _utils.is)('function', onChange)) onChange(valueNew);
+    const valueNew_0 = [itemProps.value];
+    if (valueNew_0 !== undefined) {
+      if (!props.hasOwnProperty("value")) {
+        setSelected(valueNew_0);
+      }
+      if ((0, _utils.is)("function", onChange)) {
+        onChange(valueNew_0);
+      }
     }
   };
   let palette;
-  if (!theme.palette.color[color] && !['themed', 'inverted', 'default', 'inherit'].includes(color)) {
+  if (!theme.palette.color[color] && !["themed", "inverted", "default", "inherit"].includes(color)) {
     palette = theme.methods.color(color);
   }
-  if (!theme.palette.color[color] && !['themed', 'inverted', 'default', 'inherit'].includes(color)) {
-    if (tonal) styles.root.backgroundColor = theme.methods.palette.color.value(undefined, 95, true, palette);else styles.root.backgroundColor = palette.main;
+  if (!theme.palette.color[color] && !["themed", "inverted", "default", "inherit"].includes(color)) {
+    if (tonal) {
+      styles.root.backgroundColor = theme.methods.palette.color.value(undefined, 95, true, palette);
+    } else {
+      styles.root.backgroundColor = palette.main;
+    }
   }
   if (!tonal) {
     var _theme$palette$color$, _palette;
     let background = (_theme$palette$color$ = theme.palette.color[color]) === null || _theme$palette$color$ === void 0 ? void 0 : _theme$palette$color$.main;
-    if (color === 'default') background = theme.palette.background.default.primary;
-    styles.icon.color = theme.methods.palette.color.text(((_palette = palette) === null || _palette === void 0 ? void 0 : _palette.main) || background, true, 'light');
+    if (color === "default") {
+      background = theme.palette.background.default.primary;
+    }
+    styles.icon.color = theme.methods.palette.color.text(((_palette = palette) === null || _palette === void 0 ? void 0 : _palette.main) || background, true, "light");
   } else {
     styles.icon.color = theme.methods.palette.color.value(color, 5, true, palette);
   }
@@ -105,18 +130,18 @@ const NavigationBar = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     var _item$type, _item$type2;
     return /*#__PURE__*/_react.default.cloneElement(item, _objectSpread(_objectSpread({
       key: index
-    }, ['onesy-NavigationItem'].includes((_item$type = item.type) === null || _item$type === void 0 ? void 0 : _item$type.displayName) ? _objectSpread(_objectSpread({}, other), {}, {
+    }, ["onesy-NavigationItem"].includes((_item$type = item.type) === null || _item$type === void 0 ? void 0 : _item$type.displayName) ? _objectSpread(_objectSpread({}, other), {}, {
       version
     }) : {}), {}, {
-      color: item.props.color !== undefined ? item.props.color : ['onesy-NavigationItem'].includes((_item$type2 = item.type) === null || _item$type2 === void 0 ? void 0 : _item$type2.displayName) ? color : styles.icon.color,
+      color: item.props.color !== undefined ? item.props.color : ["onesy-NavigationItem"].includes((_item$type2 = item.type) === null || _item$type2 === void 0 ? void 0 : _item$type2.displayName) ? color : styles.icon.color,
       tonal: item.props.tonal !== undefined ? item.props.tonal : tonal,
       selected: selected.includes(item.props.value),
       onClick: () => {
         if (!item.props.disabled) {
           onSelect(item.props);
-
-          // Invoke items on click method
-          if ((0, _utils.is)('function', item.props.onClick)) item.props.onClick();
+          if ((0, _utils.is)("function", item.props.onClick)) {
+            item.props.onClick();
+          }
         }
       }
     }));
@@ -130,7 +155,7 @@ const NavigationBar = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     align: "center",
     justify: "initial",
     gap: 1,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('NavigationBar', theme) && ['onesy-NavigationBar-root'], className, classes.root, fixed && classes.fixed]),
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("NavigationBar", theme) && ["onesy-NavigationBar-root"], className, classes.root, fixed && classes.fixed]),
     style: _objectSpread(_objectSpread({}, style), styles.root)
   }, other), children);
 });

package/NavigationDrawer/NavigationDrawer.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IModal } from '../Modal/Modal';
 import { IMethodTransition, IPropsAny } from '../types';
-export type INavigationDrawer = IModal & {
+export declare type INavigationDrawer = IModal & {
     version?: 'modal' | 'standard';
     position?: 'fixed' | 'absolute';
     direction?: 'top' | 'left' | 'bottom' | 'right';