@onesy/ui-react 1.0.164 → 1.0.167

package/NavigationDrawer/NavigationDrawer.js

@@ -88,20 +88,11 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-NavigationDrawer'
 });
 const NavigationDrawer = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
-  var _swipeValue, _swipeValue2;
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _swipeValue, _swipeValue2;
   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.onesyNavigationDrawer) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Modal = _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.Modal) || _Modal.default;
-  }, [theme]);
-  const Slide = _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.Slide) || _Slide.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.onesyNavigationDrawer) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Modal = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Modal) || _Modal.default;
+  const Slide = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Slide) || _Slide.default;
   const {
       tonal = false,
       color = [undefined, 'modal'].includes(props.version) ? 'themed' : 'default',
@@ -186,16 +177,16 @@ const NavigationDrawer = /*#__PURE__*/_react.default.forwardRef((props_, ref) =>
           }
         }
       } else {
-        let value_ = '';
+        let value__0 = '';
         if (refs.modal.current) {
-          if (direction === 'top') value_ = `translateY(${valueSwipe}px)`;
-          if (direction === 'left') value_ = `translateX(${valueSwipe}px)`;
-          if (direction === 'right') value_ = `translateX(${valueSwipe}px)`;
-          if (direction === 'bottom') value_ = `translateY(${valueSwipe}px)`;
+          if (direction === 'top') value__0 = `translateY(${valueSwipe}px)`;
+          if (direction === 'left') value__0 = `translateX(${valueSwipe}px)`;
+          if (direction === 'right') value__0 = `translateX(${valueSwipe}px)`;
+          if (direction === 'bottom') value__0 = `translateY(${valueSwipe}px)`;
 
           // No transition
           refs.modal.current.style.transition = 'none';
-          refs.modal.current.style.transform = value_;
+          refs.modal.current.style.transform = value__0;
         }
         if (swipeBackgroundFollow && refs.background.current) {
           // No transition
@@ -210,9 +201,9 @@ const NavigationDrawer = /*#__PURE__*/_react.default.forwardRef((props_, ref) =>
       }
     }
   }, [version, (_swipeValue = swipeValue) === null || _swipeValue === void 0 ? void 0 : _swipeValue.value, (_swipeValue2 = swipeValue) === null || _swipeValue2 === void 0 ? void 0 : _swipeValue2.position]);
-  const onClose = _react.default.useCallback(() => {
+  const onClose = () => {
     if ((0, _utils.is)('function', onClose_)) onClose_();
-  }, []);
+  };
   if (version === 'standard') {
     other.portal = other.portal !== undefined ? other.portal : false;
     other.freezeScroll = other.freezeScroll !== undefined ? other.freezeScroll : false;

package/NavigationItem/NavigationItem.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ITooltip } from '../Tooltip/Tooltip';
 import { IElement, IElementReference, IPropsAny } from '../types';
-export type INavigationItemVersion = 'regular' | 'auto';
-export type INavigationItem = ITooltip & {
+export declare type INavigationItemVersion = 'regular' | 'auto';
+export declare type INavigationItem = ITooltip & {
     version?: 'regular' | 'auto';
     value?: any;
     name?: IElement;

package/NavigationItem/NavigationItem.js

@@ -110,28 +110,13 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-NavigationItem'
 });
 const NavigationItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
-  var _ref;
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _ref;
   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.onesyNavigationItem) === 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 Type = _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.Type) || _Type.default;
-  }, [theme]);
-  const Tooltip = _react.default.useMemo(() => {
-    var _theme$elements3;
-    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Tooltip) || _Tooltip.default;
-  }, [theme]);
-  const Transition = _react.default.useMemo(() => {
-    var _theme$elements4;
-    return (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Transition) || _Transition.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.onesyNavigationItem) === 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 Type = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Type) || _Type.default;
+  const Tooltip = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Tooltip) || _Tooltip.default;
+  const Transition = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Transition) || _Transition.default;
   const {
       tonal = true,
       color = 'primary',
@@ -197,38 +182,38 @@ const NavigationItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       if (refs.hover.current) setHover(false);
     }
   }, [selected]);
-  const onKeyDown = _react.default.useCallback(event => {
+  const onKeyDown = event => {
     if (!disabled) {
       if (event.key === 'Enter') {
         if ((0, _utils.is)('function', props.onClick)) props.onClick(event);
       }
     }
     if ((0, _utils.is)('function', onKeyDown_)) onKeyDown_(event);
-  }, []);
-  const onFocus = _react.default.useCallback(event => {
+  };
+  const onFocus = event_0 => {
     if (!disabled) setFocus(true);
-    if ((0, _utils.is)('function', onFocus_)) onFocus_(event);
-  }, []);
-  const onBlur = _react.default.useCallback(event => {
+    if ((0, _utils.is)('function', onFocus_)) onFocus_(event_0);
+  };
+  const onBlur = event_1 => {
     if (!disabled) setFocus(false);
-    if ((0, _utils.is)('function', onBlur_)) onBlur_(event);
-  }, []);
-  const onTouchStart = _react.default.useCallback(event => {
+    if ((0, _utils.is)('function', onBlur_)) onBlur_(event_1);
+  };
+  const onTouchStart = event_2 => {
     if (!disabled) setMouseDown(true);
-    if ((0, _utils.is)('function', onTouchStart)) onTouchStart(event);
-  }, []);
-  const onMouseDown = _react.default.useCallback(event => {
+    if ((0, _utils.is)('function', onTouchStart)) onTouchStart(event_2);
+  };
+  const onMouseDown = event_3 => {
     if (!disabled) setMouseDown(true);
-    if ((0, _utils.is)('function', onMouseDown_)) onMouseDown_(event);
-  }, []);
-  const onMouseEnter = _react.default.useCallback(event => {
+    if ((0, _utils.is)('function', onMouseDown_)) onMouseDown_(event_3);
+  };
+  const onMouseEnter = event_4 => {
     if (!disabled) setHover(true);
-    if ((0, _utils.is)('function', onMouseEnter_)) onMouseEnter_(event);
-  }, []);
-  const onMouseLeave = _react.default.useCallback(event => {
+    if ((0, _utils.is)('function', onMouseEnter_)) onMouseEnter_(event_4);
+  };
+  const onMouseLeave = event_5 => {
     if (!refs.props.current.disabled) setHover(false);
-    if ((0, _utils.is)('function', onMouseLeave_)) onMouseLeave_(event);
-  }, []);
+    if ((0, _utils.is)('function', onMouseLeave_)) onMouseLeave_(event_5);
+  };
   let palette;
   if (!theme.palette.color[color] && !['themed', 'inverted', 'default', 'inherit'].includes(color)) {
     palette = theme.methods.color(color);

package/NavigationRail/NavigationRail.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { ISurface } from '../Surface/Surface';
 import { INavigationItemVersion } from '../NavigationItem/NavigationItem';
 import { IElement, IPropsAny } from '../types';
-export type INavigationRail = Omit<ISurface, 'version' | 'onChange'> & {
+export declare type INavigationRail = Omit<ISurface, 'version' | 'onChange'> & {
     value?: any;
     valueDefault?: any;
     onChange?: (value: any) => any;

package/NavigationRail/NavigationRail.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");
@@ -66,36 +67,23 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-NavigationRail'
 });
 const NavigationRail = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4;
+  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.onesyNavigationRail) === 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 Divider = _react.default.useMemo(() => {
-    var _theme$elements3;
-    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Divider) || _Divider.default;
-  }, [theme]);
-  const NavigationBar = _react.default.useMemo(() => {
-    var _theme$elements4;
-    return (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.NavigationBar) || _NavigationBar.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.onesyNavigationRail) === 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 Divider = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Divider) || _Divider.default;
+  const NavigationBar = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.NavigationBar) || _NavigationBar.default;
   const {
-      tonal = true,
-      color = 'primary',
-      version = 'regular',
-      size = 'regular',
+      tonal: t0,
+      color: t1,
+      version: t2,
+      size: t3,
       value,
       valueDefault,
       onChange,
-      justify = 'center',
+      justify: t4,
       border,
       header: header_,
       fixed,
@@ -106,32 +94,59 @@ const NavigationRail = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       children: children_
     } = props,
     other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const tonal = t0 === undefined ? true : t0;
+  const color = t1 === undefined ? "primary" : t1;
+  const version = t2 === undefined ? "regular" : t2;
+  const size = t3 === undefined ? "regular" : t3;
+  const justify = t4 === undefined ? "center" : t4;
   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 t5;
+  let t6;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = () => {
+      setInit(true);
+    };
+    t6 = [];
+    $[0] = t5;
+    $[1] = t6;
+  } else {
+    t5 = $[0];
+    t6 = $[1];
+  }
+  _react.default.useEffect(t5, t6);
+  let t7;
+  if ($[2] !== value) {
+    t7 = [value];
+    $[2] = value;
+    $[3] = t7;
+  } else {
+    t7 = $[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]);
+    }
+  }, t7);
   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);
+      }
     }
   };
   const header = _react.default.Children.toArray(header_).map((item, index) => {
@@ -139,23 +154,23 @@ const NavigationRail = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     return /*#__PURE__*/_react.default.cloneElement(item, {
       key: index,
       color: item.props.color !== undefined ? item.props.color : color,
-      tonal: item.props.tonal !== undefined ? item.props.tonal : tonal && ['onesy-Fab'].includes((_item$type = item.type) === null || _item$type === void 0 ? void 0 : _item$type.displayName) ? 'secondary' : tonal
+      tonal: item.props.tonal !== undefined ? item.props.tonal : tonal && ["onesy-Fab"].includes((_item$type = item.type) === null || _item$type === void 0 ? void 0 : _item$type.displayName) ? "secondary" : tonal
     });
   });
-  const children = _react.default.Children.toArray(children_).map((item, index) => {
-    var _item$type2;
-    return /*#__PURE__*/_react.default.cloneElement(item, _objectSpread(_objectSpread({
-      key: index
-    }, ['onesy-NavigationItem'].includes((_item$type2 = item.type) === null || _item$type2 === void 0 ? void 0 : _item$type2.displayName) ? {
+  const children = _react.default.Children.toArray(children_).map((item_0, index_0) => {
+    var _item_0$type;
+    return /*#__PURE__*/_react.default.cloneElement(item_0, _objectSpread(_objectSpread({
+      key: index_0
+    }, ["onesy-NavigationItem"].includes((_item_0$type = item_0.type) === null || _item_0$type === void 0 ? void 0 : _item_0$type.displayName) ? {
       vertical: true
     } : {}), {}, {
-      selected: selected.includes(item.props.value),
+      selected: selected.includes(item_0.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 (!item_0.props.disabled) {
+          onSelect(item_0.props);
+          if ((0, _utils.is)("function", item_0.props.onClick)) {
+            item_0.props.onClick();
+          }
         }
       }
     }));
@@ -169,11 +184,11 @@ const NavigationRail = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     align: "initial",
     justify: "initial",
     gap: 0,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('NavigationRail', theme) && ['onesy-NavigationRail-root', `onesy-NavigationRail-version-${version}`, `onesy-NavigationRail-size-${size}`], className, classes.root, classes[`size_${size}`], fixed && classes.fixed]),
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("NavigationRail", theme) && ["onesy-NavigationRail-root", `onesy-NavigationRail-version-${version}`, `onesy-NavigationRail-size-${size}`], className, classes.root, classes[`size_${size}`], fixed && classes.fixed]),
     style: _objectSpread(_objectSpread({}, style), styles.root)
   }, other), header && /*#__PURE__*/_react.default.createElement(Line, {
     align: "center",
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('NavigationRail', theme) && ['onesy-NavigationRail-header'], classes.header])
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("NavigationRail", theme) && ["onesy-NavigationRail-header"], classes.header])
   }, header), children && /*#__PURE__*/_react.default.createElement(NavigationBar, (0, _extends2.default)({
     version: version,
     direction: "column",
@@ -182,11 +197,11 @@ const NavigationRail = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     color: color,
     tonal: tonal
   }, NavigationBarProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('NavigationRail', theme) && ['onesy-NavigationRail-main'], NavigationBarProps === null || NavigationBarProps === void 0 ? void 0 : NavigationBarProps.className, classes.main])
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("NavigationRail", theme) && ["onesy-NavigationRail-main"], NavigationBarProps === null || NavigationBarProps === void 0 ? void 0 : NavigationBarProps.className, classes.main])
   }), children), border && /*#__PURE__*/_react.default.createElement(Divider, (0, _extends2.default)({
     orientation: "vertical"
   }, DividerProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('NavigationRail', theme) && ['onesy-NavigationRail-divider'], DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.className, classes.divider])
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("NavigationRail", theme) && ["onesy-NavigationRail-divider"], DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.className, classes.divider])
   })));
 });
 NavigationRail.displayName = 'onesy-NavigationRail';

package/NotFound/NotFound.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ISection } from '../Section/Section';
-export type INotFound = ISection & {
+export declare type INotFound = ISection & {
     name?: any;
     href?: string;
     to?: string;

package/NotFound/NotFound.js

@@ -28,24 +28,13 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-NotFound'
 });
 const NotFound = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3;
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
-  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.onesyNotFound) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Section = _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.Section) || _Section.default;
-  }, [theme]);
-  const Type = _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.Type) || _Type.default;
-  }, [theme]);
-  const Button = _react.default.useMemo(() => {
-    var _theme$elements3;
-    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Button) || _Button.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.onesyNotFound) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Section = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Section) || _Section.default;
+  const Type = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Type) || _Type.default;
+  const Button = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Button) || _Button.default;
   const {
       name = l('Page not found'),
       to = '/',
@@ -64,9 +53,9 @@ const NotFound = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     classes
   } = useStyle();
   const navigate = (0, _utils.isEnvironment)('browser') && (0, _reactRouterDom.useNavigate)();
-  const onTo = _react.default.useCallback(() => {
+  const onTo = () => {
     if (link) window.open(link, 'blank');else navigate(to);
-  }, [to, link]);
+  };
   return /*#__PURE__*/_react.default.createElement(Section, (0, _extends2.default)({
     ref: ref,
     flex: true,

package/NumericTextField/NumericTextField.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IAdvancedTextField } from '../AdvancedTextField/AdvancedTextField';
 import { IElementReference, IPropsAny } from '../types';
-export type INumericTextField = IAdvancedTextField & {
+export declare type INumericTextField = IAdvancedTextField & {
     min?: number;
     max?: number;
     increment?: boolean;

package/NumericTextField/NumericTextField.js

@@ -25,19 +25,11 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-NumericTextField'
 });
 const NumericTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2;
   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.onesyNumericTextField) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const AdvancedTextField = _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.AdvancedTextField) || _AdvancedTextField.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.onesyNumericTextField) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const AdvancedTextField = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.AdvancedTextField) || _AdvancedTextField.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 {
       valueDefault,
       value: value_,
@@ -92,10 +84,10 @@ const NumericTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) =>
       switch (event.key) {
         case 'End':
           if (refs.focus.current && refs.min.current !== undefined) {
-            let valueNew = refs.min.current;
-            if (props.thousand) valueNew = (0, _utils.numberWithCommas)(valueNew);
-            if (props.prefix !== undefined) valueNew = `${props.prefix}${valueNew}`;
-            onChange(valueNew);
+            let valueNew_0 = refs.min.current;
+            if (props.thousand) valueNew_0 = (0, _utils.numberWithCommas)(valueNew_0);
+            if (props.prefix !== undefined) valueNew_0 = `${props.prefix}${valueNew_0}`;
+            onChange(valueNew_0);
           }
           return;
         case 'Home':
@@ -128,57 +120,57 @@ const NumericTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) =>
       if (value_ !== value) setValue(value_);
     }
   }, [value_]);
-  const onFocus = _react.default.useCallback(event => {
+  const onFocus = event_0 => {
     setFocus(true);
-    if ((0, _utils.is)('function', onFocus_)) onFocus_(event);
-  }, []);
-  const onBlur = _react.default.useCallback(event => {
+    if ((0, _utils.is)('function', onFocus_)) onFocus_(event_0);
+  };
+  const onBlur = event_1 => {
     setFocus(false);
-    if ((0, _utils.is)('function', onBlur_)) onBlur_(event);
-  }, []);
+    if ((0, _utils.is)('function', onBlur_)) onBlur_(event_1);
+  };
   const onChange = valueNew_ => {
-    let valueNew = valueNew_;
+    let valueNew_1 = valueNew_;
     const min_ = refs.min.current !== undefined ? refs.min.current : Number.MIN_SAFE_INTEGER;
     const max_ = refs.max.current !== undefined ? refs.max.current : Number.MAX_SAFE_INTEGER;
-    if (['', ' ', refs.props.current.prefix, `${refs.props.current.prefix} `, undefined].includes(valueNew)) valueNew = '';
-    if (!['', ' ', '+', '-', 'e', 'e+', 'e-', `${refs.props.current.prefix}+`, `${refs.props.current.prefix}-`, undefined].includes(valueNew)) {
-      if (refs.props.current.prefix !== undefined) valueNew = valueNew.replace(refs.props.current.prefix, '');
-      if (refs.props.current.thousand) valueNew = valueNew.replace(new RegExp(`\\${refs.props.current.thousandSeparator || ','}`, 'g'), '');
-      valueNew = (0, _utils.clamp)(+valueNew, min_, max_);
-      if (refs.props.current.thousand) valueNew = (0, _utils.numberWithCommas)(valueNew);
-      if (refs.props.current.prefix !== undefined) valueNew = `${refs.props.current.prefix}${valueNew}`;
+    if (['', ' ', refs.props.current.prefix, `${refs.props.current.prefix} `, undefined].includes(valueNew_1)) valueNew_1 = '';
+    if (!['', ' ', '+', '-', 'e', 'e+', 'e-', `${refs.props.current.prefix}+`, `${refs.props.current.prefix}-`, undefined].includes(valueNew_1)) {
+      if (refs.props.current.prefix !== undefined) valueNew_1 = valueNew_1.replace(refs.props.current.prefix, '');
+      if (refs.props.current.thousand) valueNew_1 = valueNew_1.replace(new RegExp(`\\${refs.props.current.thousandSeparator || ','}`, 'g'), '');
+      valueNew_1 = (0, _utils.clamp)(+valueNew_1, min_, max_);
+      if (refs.props.current.thousand) valueNew_1 = (0, _utils.numberWithCommas)(valueNew_1);
+      if (refs.props.current.prefix !== undefined) valueNew_1 = `${refs.props.current.prefix}${valueNew_1}`;
     }
-    if (['+', '-', 'e', 'e+', 'e-'].includes(valueNew_) || (String(valueNew_).startsWith('-0') || String(valueNew_).includes('.')) && (0, _utils.clamp)(+valueNew_, min_, max_) === +valueNew_) valueNew = valueNew_;
+    if (['+', '-', 'e', 'e+', 'e-'].includes(valueNew_) || (String(valueNew_).startsWith('-0') || String(valueNew_).includes('.')) && (0, _utils.clamp)(+valueNew_, min_, max_) === +valueNew_) valueNew_1 = valueNew_;
 
     // Update inner or controlled
-    if (!refs.props.current.hasOwnProperty('value')) setValue(valueNew);
-    if ((0, _utils.is)('function', refs.onChange.current)) refs.onChange.current(valueNew);
+    if (!refs.props.current.hasOwnProperty('value')) setValue(valueNew_1);
+    if ((0, _utils.is)('function', refs.onChange.current)) refs.onChange.current(valueNew_1);
   };
   const onIncrement = () => {
-    let valueNew = refs.value.current || '0';
-    if (refs.props.current.prefix !== undefined) valueNew = valueNew.replace(refs.props.current.prefix, '');
-    if (refs.props.current.thousand) valueNew = valueNew.replace(new RegExp(`\\${refs.props.current.thousandSeparator || ','}`, 'g'), '');
-    const min_ = refs.min.current !== undefined ? refs.min.current : Number.MIN_SAFE_INTEGER;
-    const max_ = refs.max.current !== undefined ? refs.max.current : Number.MAX_SAFE_INTEGER;
-    valueNew = (0, _utils.clamp)(+valueNew + incrementValue, min_, max_);
-    if (refs.props.current.thousand) valueNew = (0, _utils.numberWithCommas)(valueNew);
-    if (refs.props.current.prefix !== undefined) valueNew = `${refs.props.current.prefix}${valueNew}`;
+    let valueNew_2 = refs.value.current || '0';
+    if (refs.props.current.prefix !== undefined) valueNew_2 = valueNew_2.replace(refs.props.current.prefix, '');
+    if (refs.props.current.thousand) valueNew_2 = valueNew_2.replace(new RegExp(`\\${refs.props.current.thousandSeparator || ','}`, 'g'), '');
+    const min__0 = refs.min.current !== undefined ? refs.min.current : Number.MIN_SAFE_INTEGER;
+    const max__0 = refs.max.current !== undefined ? refs.max.current : Number.MAX_SAFE_INTEGER;
+    valueNew_2 = (0, _utils.clamp)(+valueNew_2 + incrementValue, min__0, max__0);
+    if (refs.props.current.thousand) valueNew_2 = (0, _utils.numberWithCommas)(valueNew_2);
+    if (refs.props.current.prefix !== undefined) valueNew_2 = `${refs.props.current.prefix}${valueNew_2}`;
 
     // Update
-    onChange(valueNew);
+    onChange(valueNew_2);
   };
   const onDecrement = () => {
-    let valueNew = refs.value.current || '0';
-    if (refs.props.current.prefix !== undefined) valueNew = valueNew.replace(refs.props.current.prefix, '');
-    if (refs.props.current.thousand) valueNew = valueNew.replace(new RegExp(`\\${refs.props.current.thousandSeparator || ','}`, 'g'), '');
-    const min_ = refs.min.current !== undefined ? refs.min.current : Number.MIN_SAFE_INTEGER;
-    const max_ = refs.max.current !== undefined ? refs.max.current : Number.MAX_SAFE_INTEGER;
-    valueNew = (0, _utils.clamp)(+valueNew - decrementValue, min_, max_);
-    if (refs.props.current.thousand) valueNew = (0, _utils.numberWithCommas)(valueNew);
-    if (refs.props.current.prefix !== undefined) valueNew = `${refs.props.current.prefix}${valueNew}`;
+    let valueNew_3 = refs.value.current || '0';
+    if (refs.props.current.prefix !== undefined) valueNew_3 = valueNew_3.replace(refs.props.current.prefix, '');
+    if (refs.props.current.thousand) valueNew_3 = valueNew_3.replace(new RegExp(`\\${refs.props.current.thousandSeparator || ','}`, 'g'), '');
+    const min__1 = refs.min.current !== undefined ? refs.min.current : Number.MIN_SAFE_INTEGER;
+    const max__1 = refs.max.current !== undefined ? refs.max.current : Number.MAX_SAFE_INTEGER;
+    valueNew_3 = (0, _utils.clamp)(+valueNew_3 - decrementValue, min__1, max__1);
+    if (refs.props.current.thousand) valueNew_3 = (0, _utils.numberWithCommas)(valueNew_3);
+    if (refs.props.current.prefix !== undefined) valueNew_3 = `${refs.props.current.prefix}${valueNew_3}`;
 
     // Update
-    onChange(valueNew);
+    onChange(valueNew_3);
   };
   const end = [];
   const iconButtonProps = {
@@ -204,14 +196,14 @@ const NumericTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) =>
     onChange: onChange,
     version: version,
     size: size,
-    validate: valueNew_ => {
-      if (valueNew_.startsWith(' ') || valueNew_.endsWith(' ')) return;
-      if (['', ' ', '+', '-', 'e', 'e+', 'e-', '-0', '-0.', props.prefix, `${props.prefix} `, `${props.prefix}+`, `${props.prefix}-`, undefined].includes(valueNew_)) return true;
-      let valueNew = valueNew_;
-      if (props.prefix !== undefined) valueNew = valueNew_.replace(props.prefix, '');
-      if (props.thousand) valueNew = valueNew.replace(new RegExp(`\\${props.thousandSeparator || ','}`, 'g'), '');
-      valueNew = +valueNew;
-      return (0, _utils.is)('number', valueNew);
+    validate: valueNew__0 => {
+      if (valueNew__0.startsWith(' ') || valueNew__0.endsWith(' ')) return;
+      if (['', ' ', '+', '-', 'e', 'e+', 'e-', '-0', '-0.', props.prefix, `${props.prefix} `, `${props.prefix}+`, `${props.prefix}-`, undefined].includes(valueNew__0)) return true;
+      let valueNew_4 = valueNew__0;
+      if (props.prefix !== undefined) valueNew_4 = valueNew__0.replace(props.prefix, '');
+      if (props.thousand) valueNew_4 = valueNew_4.replace(new RegExp(`\\${props.thousandSeparator || ','}`, 'g'), '');
+      valueNew_4 = +valueNew_4;
+      return (0, _utils.is)('number', valueNew_4);
     },
     end: end,
     endVerticalAlign: "center",

package/Page/Page.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
 import { IElement, IElementReference } from '../types';
-export type IPageForward = {
+export declare type IPageForward = {
     to?: string;
     name?: string;
     label?: string;
 };
-export type IPage = ILine & {
+export declare type IPage = ILine & {
     back?: IPageForward;
     forward?: IPageForward;
     noHeader?: boolean;