@onesy/ui-react 1.0.164 → 1.0.167

package/DateRangePicker/DateRangePicker.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 _DatePicker = _interopRequireDefault(require("../DatePicker"));
@@ -21,15 +22,11 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-DateRangePicker'
 });
 const DateRangePicker = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements;
+  const $ = (0, _compilerRuntime.c)(5);
   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.onesyDateRangePicker) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const DatePicker = _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.DatePicker) || _DatePicker.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.onesyDateRangePicker) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const DatePicker = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.DatePicker) || _DatePicker.default;
   const {
       className
     } = props,
@@ -37,11 +34,24 @@ const DateRangePicker = /*#__PURE__*/_react.default.forwardRef((props_, ref) =>
   const {
     classes
   } = useStyle();
-  return /*#__PURE__*/_react.default.createElement(DatePicker, (0, _extends2.default)({
-    ref: ref,
-    range: true,
-    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('DateRangePicker', theme) && ['onesy-DateRangePicker-root'], className, classes.root])
-  }, other));
+  const t0 = true;
+  const t1 = (0, _styleReact.classNames)([(0, _utils.staticClassName)("DateRangePicker", theme) && ["onesy-DateRangePicker-root"], className, classes.root]);
+  let t2;
+  if ($[0] !== DatePicker || $[1] !== other || $[2] !== ref || $[3] !== t1) {
+    t2 = /*#__PURE__*/_react.default.createElement(DatePicker, (0, _extends2.default)({
+      ref: ref,
+      range: t0,
+      className: t1
+    }, other));
+    $[0] = DatePicker;
+    $[1] = other;
+    $[2] = ref;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
 });
 DateRangePicker.displayName = 'onesy-DateRangePicker';
 var _default = exports.default = DateRangePicker;

package/DateTimePicker/DateTimePicker.d.ts

@@ -6,8 +6,8 @@ import { TCalendarUnit } from '../Calendar/Calendar';
 import { TClockUnit } from '../Clock/Clock';
 import { IValueBreakpoints, IElementReference, IPropsAny } from '../types';
 import { ITextField } from '../TextField/TextField';
-export type TDateTimePicker = OnesyDate;
-export type IDateTimePicker = Omit<IAdvancedTextField, 'version' | 'onChange'> & ITextField & {
+export declare type TDateTimePicker = OnesyDate;
+export declare type IDateTimePicker = Omit<IAdvancedTextField, 'version' | 'onChange'> & ITextField & {
     version?: 'auto' | 'mobile' | 'desktop';
     value?: TCalendarMonthValue;
     valueDefault?: TCalendarMonthValue;

package/DateTimePicker/DateTimePicker.js

@@ -57,60 +57,22 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-DateTimePicker'
 });
 const DateTimePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _theme$elements8, _theme$elements9, _theme$elements0, _theme$elements1, _theme$elements10;
   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.onesyDateTimePicker) === 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 AdvancedTextField = _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.AdvancedTextField) || _AdvancedTextField.default;
-  }, [theme]);
-  const Modal = _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.Modal) || _Modal.default;
-  }, [theme]);
-  const Tooltip = _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.Tooltip) || _Tooltip.default;
-  }, [theme]);
-  const Slide = _react.default.useMemo(() => {
-    var _theme$elements5;
-    return (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Slide) || _Slide.default;
-  }, [theme]);
-  const Surface = _react.default.useMemo(() => {
-    var _theme$elements6;
-    return (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Surface) || _Surface.default;
-  }, [theme]);
-  const IconButton = _react.default.useMemo(() => {
-    var _theme$elements7;
-    return (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.IconButton) || _IconButton.default;
-  }, [theme]);
-  const Type = _react.default.useMemo(() => {
-    var _theme$elements8;
-    return (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.Type) || _Type.default;
-  }, [theme]);
-  const Button = _react.default.useMemo(() => {
-    var _theme$elements9;
-    return (theme === null || theme === void 0 || (_theme$elements9 = theme.elements) === null || _theme$elements9 === void 0 ? void 0 : _theme$elements9.Button) || _Button.default;
-  }, [theme]);
-  const DatePicker = _react.default.useMemo(() => {
-    var _theme$elements0;
-    return (theme === null || theme === void 0 || (_theme$elements0 = theme.elements) === null || _theme$elements0 === void 0 ? void 0 : _theme$elements0.DatePicker) || _DatePicker.default;
-  }, [theme]);
-  const TimePicker = _react.default.useMemo(() => {
-    var _theme$elements1;
-    return (theme === null || theme === void 0 || (_theme$elements1 = theme.elements) === null || _theme$elements1 === void 0 ? void 0 : _theme$elements1.TimePicker) || _TimePicker.default;
-  }, [theme]);
-  const ClickListener = _react.default.useMemo(() => {
-    var _theme$elements10;
-    return (theme === null || theme === void 0 || (_theme$elements10 = theme.elements) === null || _theme$elements10 === void 0 ? void 0 : _theme$elements10.ClickListener) || _ClickListener.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyDateTimePicker) === 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 AdvancedTextField = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.AdvancedTextField) || _AdvancedTextField.default;
+  const Modal = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Modal) || _Modal.default;
+  const Tooltip = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Tooltip) || _Tooltip.default;
+  const Slide = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Slide) || _Slide.default;
+  const Surface = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Surface) || _Surface.default;
+  const IconButton = (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.IconButton) || _IconButton.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 Button = (theme === null || theme === void 0 || (_theme$elements9 = theme.elements) === null || _theme$elements9 === void 0 ? void 0 : _theme$elements9.Button) || _Button.default;
+  const DatePicker = (theme === null || theme === void 0 || (_theme$elements0 = theme.elements) === null || _theme$elements0 === void 0 ? void 0 : _theme$elements0.DatePicker) || _DatePicker.default;
+  const TimePicker = (theme === null || theme === void 0 || (_theme$elements1 = theme.elements) === null || _theme$elements1 === void 0 ? void 0 : _theme$elements1.TimePicker) || _TimePicker.default;
+  const ClickListener = (theme === null || theme === void 0 || (_theme$elements10 = theme.elements) === null || _theme$elements10 === void 0 ? void 0 : _theme$elements10.ClickListener) || _ClickListener.default;
   const {
       tonal = true,
       color = 'primary',
@@ -179,13 +141,13 @@ const DateTimePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) =>
     const result = [];
     const items = [useHelperText_];
     items.forEach(item => {
-      if ((0, _utils.is)('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
+      if ((0, _utils.is)('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
     });
     return (0, _utils.unique)(result);
   }, [useHelperText_]);
   const breakpoints = {};
-  keys.forEach(key => {
-    breakpoints[key] = (0, _useMediaQuery.default)(theme.breakpoints.media[key], {
+  keys.forEach(key_1 => {
+    breakpoints[key_1] = (0, _useMediaQuery.default)(theme.breakpoints.media[key_1], {
       element: refs.root.current
     });
   });
@@ -202,12 +164,12 @@ const DateTimePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) =>
   const [error, setError] = _react.default.useState(false);
   const [tab, setTab] = _react.default.useState('date');
   refs.value.current = value;
-  const valueToInput = _react.default.useCallback((valueNew = refs.value.current) => {
-    let result = '';
+  const valueToInput = (valueNew = refs.value.current) => {
+    let result_0 = '';
     const [from, to] = valueNew;
     if (!(from || to)) return '';
-    const method = item => {
-      let formatValue = `${(0, _date.format)(item, 'DD')}/${(0, _date.format)(item, 'MM')}/${(0, _date.format)(item, 'YYYY')}`;
+    const method = item_0 => {
+      let formatValue = `${(0, _date.format)(item_0, 'DD')}/${(0, _date.format)(item_0, 'MM')}/${(0, _date.format)(item_0, 'YYYY')}`;
       formatValue += ' ';
       if (hour) {
         if (format === '12') formatValue += `hh`;else formatValue += `HH`;
@@ -219,27 +181,27 @@ const DateTimePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) =>
       }
       if (second) formatValue += `ss`;
       if (format === '12') formatValue += ` a`;
-      return (0, _date.format)(item, formatValue);
+      return (0, _date.format)(item_0, formatValue);
     };
-    result += `${method(from)}`;
-    if (range && to) result += `${_DatePicker2.SEPARATOR}${method(to)}`;
-    return result;
-  }, [value, format, hour, minute, second, range]);
+    result_0 += `${method(from)}`;
+    if (range && to) result_0 += `${_DatePicker2.SEPARATOR}${method(to)}`;
+    return result_0;
+  };
   const [input, setInput] = _react.default.useState(valueToInput());
   let version = version_;
   if (version === 'auto') {
     if (touch) version = 'mobile';else version = 'desktop';
   }
-  const onUpdateValue = valueNew => {
-    setValue(valueNew);
+  const onUpdateValue = valueNew_0 => {
+    setValue(valueNew_0);
 
     // Update input
-    setInput(valueToInput(valueNew));
+    setInput(valueToInput(valueNew_0));
   };
-  const errorCheck = _react.default.useCallback((valueNew = value) => {
+  const errorCheck = (valueNew_1 = value) => {
     // Error
-    setError((valueNew || []).some((item, index) => !valid(item)));
-  }, [value]);
+    setError((valueNew_1 || []).some((item_1, index) => !valid(item_1)));
+  };
 
   // Init
   _react.default.useEffect(() => {
@@ -251,28 +213,28 @@ const DateTimePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) =>
   _react.default.useEffect(() => {
     if (value_ !== undefined && value_ !== value) onUpdateValue(((0, _utils.is)('array', value_) ? value_ : [value_]).filter(Boolean));
   }, [value_]);
-  const onUpdate = _react.default.useCallback(valueNew => {
+  const onUpdate = valueNew_2 => {
     // Inner update
-    if (!props.hasOwnProperty('value')) setValue(valueNew);
-    if ((0, _utils.is)('function', onChange)) onChange(!range ? valueNew[0] : valueNew);
-  }, [onChange, range]);
-  const onPickSwitch = _react.default.useCallback(() => {
+    if (!props.hasOwnProperty('value')) setValue(valueNew_2);
+    if ((0, _utils.is)('function', onChange)) onChange(!range ? valueNew_2[0] : valueNew_2);
+  };
+  const onPickSwitch = () => {
     setTab(previous => previous === 'date' ? 'time' : 'date');
-  }, []);
+  };
 
   // Update only internally, without using onChange
   // since it might be canceled
   // only use onChange on
   // input change, or ok
-  const onPickerChange = _react.default.useCallback(valueNew_ => {
-    const valueNew = (0, _utils.is)('array', valueNew_) ? valueNew_ : [valueNew_];
-    if (valueNew !== value) setValue(valueNew);
-  }, [value]);
-  const onChangeCalendar = _react.default.useCallback(valueNew => {
-    if (valueNew !== calendar) setCalendar(valueNew);
-  }, [calendar]);
-  const textToOnesyDate = _react.default.useCallback(valueNew => {
-    const [date, ...valueOther] = valueNew.split(' ');
+  const onPickerChange = valueNew_ => {
+    const valueNew_3 = (0, _utils.is)('array', valueNew_) ? valueNew_ : [valueNew_];
+    if (valueNew_3 !== value) setValue(valueNew_3);
+  };
+  const onChangeCalendar = valueNew_4 => {
+    if (valueNew_4 !== calendar) setCalendar(valueNew_4);
+  };
+  const textToOnesyDate = valueNew_5 => {
+    const [date, ...valueOther] = valueNew_5.split(' ');
     const time = valueOther.join(' ');
     const [valueDay, valueMonth, valueYear] = (date || '').split('/');
     const [times, dayTime] = (time || '').split(' ');
@@ -299,79 +261,79 @@ const DateTimePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) =>
       onesyDate = (0, _date.set)(valueTime, 'second', onesyDate);
     }
     return onesyDate;
-  }, [format, hour, minute, second]);
-  const inputToValue = _react.default.useCallback((valueNew_ = input) => {
-    let valueNew = valueNew_;
-    let [from, to] = valueNew.split(_DatePicker2.SEPARATOR);
-    from = textToOnesyDate(from);
-    if (to) to = textToOnesyDate(to);
-    valueNew = [from, to].filter(Boolean);
-    return valueNew;
-  }, [input]);
-  const onInputChange = _react.default.useCallback(valueNew_ => {
-    const valueNew = inputToValue(valueNew_);
-    const validValues = valueNew.every(item => item.valid);
+  };
+  const inputToValue = (valueNew__0 = input) => {
+    let valueNew_6 = valueNew__0;
+    let [from_0, to_0] = valueNew_6.split(_DatePicker2.SEPARATOR);
+    from_0 = textToOnesyDate(from_0);
+    if (to_0) to_0 = textToOnesyDate(to_0);
+    valueNew_6 = [from_0, to_0].filter(Boolean);
+    return valueNew_6;
+  };
+  const onInputChange = valueNew__1 => {
+    const valueNew_7 = inputToValue(valueNew__1);
+    const validValues = valueNew_7.every(item_2 => item_2.valid);
 
     // Only update values if input is valid
     // format used to make the value
     if (validValues) {
       // Error
-      errorCheck(valueNew);
+      errorCheck(valueNew_7);
 
       // Update value
-      onUpdate(valueNew);
+      onUpdate(valueNew_7);
 
       // Update calendar
-      setCalendar(valueNew[0]);
+      setCalendar(valueNew_7[0]);
     }
-    if (!valueNew_) {
+    if (!valueNew__1) {
       onUpdate([null, null]);
     }
 
     // Update input for free typing
-    setInput(valueNew_);
-  }, []);
-  const onReset = _react.default.useCallback(() => {
-    var _valueNew;
-    let valueNew = inputToValue();
-    const isValid = valueNew && ((_valueNew = valueNew) === null || _valueNew === void 0 || (_valueNew = _valueNew[0]) === null || _valueNew === void 0 ? void 0 : _valueNew.valid);
+    setInput(valueNew__1);
+  };
+  const onReset = () => {
+    var _valueNew_;
+    let valueNew_8 = inputToValue();
+    const isValid = valueNew_8 && ((_valueNew_ = valueNew_8) === null || _valueNew_ === void 0 || (_valueNew_ = _valueNew_[0]) === null || _valueNew_ === void 0 ? void 0 : _valueNew_.valid);
     if (isValid) {
       // Update value
-      onUpdate(valueNew);
+      onUpdate(valueNew_8);
     } else {
-      valueNew = [];
+      valueNew_8 = [];
 
       // Update value
-      onUpdate(valueNew);
+      onUpdate(valueNew_8);
 
       // Update input
-      setInput(valueToInput(valueNew));
+      setInput(valueToInput(valueNew_8));
     }
-  }, [input]);
-  const onToday = _react.default.useCallback(event => {
-    const valueNew = [new _date.OnesyDate()];
-    if (range) valueNew.push(new _date.OnesyDate());
+  };
+  const onToday = event => {
+    const valueNew_9 = [new _date.OnesyDate()];
+    if (range) valueNew_9.push(new _date.OnesyDate());
 
     // Update value
-    onUpdate(valueNew);
+    onUpdate(valueNew_9);
 
     // Update input
-    setInput(valueToInput(valueNew));
+    setInput(valueToInput(valueNew_9));
     onClose(event);
     if ((0, _utils.is)('function', onToday_)) onToday_(event);
-  }, [input, range, onToday_]);
-  const onClear = _react.default.useCallback(event => {
-    const valueNew = [];
+  };
+  const onClear = event_0 => {
+    const valueNew_10 = [];
 
     // Update value
-    onUpdate(valueNew);
+    onUpdate(valueNew_10);
 
     // Update input
-    setInput(valueToInput(valueNew));
-    onClose(event);
-    if ((0, _utils.is)('function', onClear_)) onClear_(event);
-  }, [onClear_]);
-  const onOk = _react.default.useCallback(event => {
+    setInput(valueToInput(valueNew_10));
+    onClose(event_0);
+    if ((0, _utils.is)('function', onClear_)) onClear_(event_0);
+  };
+  const onOk = event_1 => {
     // Error
     errorCheck();
 
@@ -380,38 +342,38 @@ const DateTimePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) =>
 
     // Update input
     setInput(valueToInput(value));
-    onClose(event);
-    if ((0, _utils.is)('function', onOk_)) onOk_(event);
-  }, [value, onOk_]);
-  const onCancel = _react.default.useCallback(event => {
+    onClose(event_1);
+    if ((0, _utils.is)('function', onOk_)) onOk_(event_1);
+  };
+  const onCancel = event_2 => {
     onReset();
-    onClose(event);
-    if ((0, _utils.is)('function', onCancel_)) onCancel_(event);
-  }, [input, onCancel_]);
-  const onOpen = _react.default.useCallback(() => {
-    setOpen(previous => !previous);
-  }, [open, version]);
-  const onClose = _react.default.useCallback(event => {
+    onClose(event_2);
+    if ((0, _utils.is)('function', onCancel_)) onCancel_(event_2);
+  };
+  const onOpen = () => {
+    setOpen(previous_0 => !previous_0);
+  };
+  const onClose = event_3 => {
     setOpen(false);
-    if ((0, _utils.is)('function', onClose_)) onClose_(event);
-  }, [onClose_]);
-  const valid = _react.default.useCallback((...args) => {
+    if ((0, _utils.is)('function', onClose_)) onClose_(event_3);
+  };
+  const valid = (...args) => {
     if ((0, _utils.is)('function', valid_)) return valid_(...args);
-    const onesyDate = args[0];
+    const onesyDate_0 = args[0];
     if (min || max || validate) {
       let response = true;
-      if ((0, _utils.is)('function', validate)) response = validate(onesyDate);
-      if (min !== undefined) response = response && (0, _date.is)(onesyDate, 'after or same', min);
-      if (max !== undefined) response = response && (0, _date.is)(onesyDate, 'before or same', max);
+      if ((0, _utils.is)('function', validate)) response = validate(onesyDate_0);
+      if (min !== undefined) response = response && (0, _date.is)(onesyDate_0, 'after or same', min);
+      if (max !== undefined) response = response && (0, _date.is)(onesyDate_0, 'before or same', max);
       return response;
     }
     return true;
-  }, [valid_, min, max, validate]);
+  };
   const mask = [{
     pattern: '[0-3]'
-  }, (item, result, valueInput) => /^(0[0-9]|1[0-9]|2[0-9]|3[0-1]).*/.test(valueInput), '/', {
+  }, (item_3, result_1, valueInput) => /^(0[0-9]|1[0-9]|2[0-9]|3[0-1]).*/.test(valueInput), '/', {
     pattern: '[0-1]'
-  }, (item, result, valueInput) => /^(0[0-9]|1[0-9]|2[0-9]|3[0-1])\/(0[0-9]|1[0-2]).*/.test(valueInput), '/', {
+  }, (item_4, result_2, valueInput_0) => /^(0[0-9]|1[0-9]|2[0-9]|3[0-1])\/(0[0-9]|1[0-2]).*/.test(valueInput_0), '/', {
     pattern: '[1-2]'
   }, {
     pattern: '[0-9]'
@@ -425,12 +387,12 @@ const DateTimePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) =>
     if (format === '12') {
       mask.push({
         pattern: '[0-1]'
-      }, (item, result, valueInput) => /^[^ ]+ ([0][0-9]|1[0-2]).*/.test(valueInput));
+      }, (item_5, result_3, valueInput_1) => /^[^ ]+ ([0][0-9]|1[0-2]).*/.test(valueInput_1));
     }
     if (format === '24') {
       mask.push({
         pattern: '[0-2]'
-      }, (item, result, valueInput) => /^[^ ]+ ([01][0-9]|2[0-3]).*/.test(valueInput));
+      }, (item_6, result_4, valueInput_2) => /^[^ ]+ ([01][0-9]|2[0-3]).*/.test(valueInput_2));
     }
     placeholder += 'hh';
     if (minute || second) {
@@ -472,9 +434,9 @@ const DateTimePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) =>
     // Date
     mask.push({
       pattern: '[0-3]'
-    }, (item, result, valueInput) => /^[^–]+– (0[0-9]|1[0-9]|2[0-9]|3[0-1]).*/.test(valueInput), '/', {
+    }, (item_7, result_5, valueInput_3) => /^[^–]+– (0[0-9]|1[0-9]|2[0-9]|3[0-1]).*/.test(valueInput_3), '/', {
       pattern: '[0-1]'
-    }, (item, result, valueInput) => /^[^–]+– (0[0-9]|1[0-9]|2[0-9]|3[0-1])\/(0[0-9]|1[0-2]).*/.test(valueInput), '/', {
+    }, (item_8, result_6, valueInput_4) => /^[^–]+– (0[0-9]|1[0-9]|2[0-9]|3[0-1])\/(0[0-9]|1[0-2]).*/.test(valueInput_4), '/', {
       pattern: '[1-2]'
     }, {
       pattern: '[0-9]'
@@ -489,12 +451,12 @@ const DateTimePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) =>
       if (format === '12') {
         mask.push({
           pattern: '[0-1]'
-        }, (item, result, valueInput) => /^[^–]+– (0[0-9]|1[0-9]|2[0-9]|3[0-1])\/(0[0-9]|1[0-2])\/[1-2][0-9][0-9][0-9] ([0][0-9]|1[0-2]).*/.test(valueInput));
+        }, (item_9, result_7, valueInput_5) => /^[^–]+– (0[0-9]|1[0-9]|2[0-9]|3[0-1])\/(0[0-9]|1[0-2])\/[1-2][0-9][0-9][0-9] ([0][0-9]|1[0-2]).*/.test(valueInput_5));
       }
       if (format === '24') {
         mask.push({
           pattern: '[0-2]'
-        }, (item, result, valueInput) => /^[^–]+– (0[0-9]|1[0-9]|2[0-9]|3[0-1])\/(0[0-9]|1[0-2])\/[1-2][0-9][0-9][0-9] ([01][0-9]|2[0-3]).*/.test(valueInput));
+        }, (item_10, result_8, valueInput_6) => /^[^–]+– (0[0-9]|1[0-9]|2[0-9]|3[0-1])\/(0[0-9]|1[0-2])\/[1-2][0-9][0-9][0-9] ([01][0-9]|2[0-3]).*/.test(valueInput_6));
       }
       if (minute || second) {
         mask.push(':');
@@ -643,11 +605,11 @@ const DateTimePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) =>
   }, WrapperProps, {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('DateTimePicker', theme) && ['onesy-DateTimePicker-root', `onesy-DateTimePicker-version-${version}`, `onesy-DateTimePicker-size-${size}`, WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.className, range && `onesy-DateTimePicker-range`, readOnly && `onesy-DateTimePicker-read-only`, disabled && `onesy-DateTimePicker-disabled`, fullWidth && 'onesy-full-width'], className, classes.root])
   }), /*#__PURE__*/_react.default.createElement(AdvancedTextField, (0, _extends2.default)({
-    rootRef: item => {
+    rootRef: item_11 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_11);else ref.current = item_11;
       }
-      refs.root.current = item;
+      refs.root.current = item_11;
     },
     tonal: tonal,
     color: color,

package/DateTimeRangePicker/DateTimeRangePicker.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { IDateTimePicker } from '../DateTimePicker/DateTimePicker';
-export type IDateTimeRangePicker = IDateTimePicker & {};
+export declare type IDateTimeRangePicker = IDateTimePicker & {};
 declare const DateTimeRangePicker: React.FC<IDateTimeRangePicker>;
 export default DateTimeRangePicker;

package/DateTimeRangePicker/DateTimeRangePicker.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 _DateTimePicker = _interopRequireDefault(require("../DateTimePicker"));
@@ -21,15 +22,11 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-DateTimeRangePicker'
 });
 const DateTimeRangePicker = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements;
+  const $ = (0, _compilerRuntime.c)(5);
   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.onesyDateTimeRangePicker) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const DateTimePicker = _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.DateTimePicker) || _DateTimePicker.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.onesyDateTimeRangePicker) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const DateTimePicker = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.DateTimePicker) || _DateTimePicker.default;
   const {
       className
     } = props,
@@ -37,11 +34,24 @@ const DateTimeRangePicker = /*#__PURE__*/_react.default.forwardRef((props_, ref)
   const {
     classes
   } = useStyle();
-  return /*#__PURE__*/_react.default.createElement(DateTimePicker, (0, _extends2.default)({
-    ref: ref,
-    range: true,
-    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('DateTimeRangePicker', theme) && ['onesy-DateTimeRangePicker-root'], className, classes.root])
-  }, other));
+  const t0 = true;
+  const t1 = (0, _styleReact.classNames)([(0, _utils.staticClassName)("DateTimeRangePicker", theme) && ["onesy-DateTimeRangePicker-root"], className, classes.root]);
+  let t2;
+  if ($[0] !== DateTimePicker || $[1] !== other || $[2] !== ref || $[3] !== t1) {
+    t2 = /*#__PURE__*/_react.default.createElement(DateTimePicker, (0, _extends2.default)({
+      ref: ref,
+      range: t0,
+      className: t1
+    }, other));
+    $[0] = DateTimePicker;
+    $[1] = other;
+    $[2] = ref;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
 });
 DateTimeRangePicker.displayName = 'onesy-DateTimeRangePicker';
 var _default = exports.default = DateTimeRangePicker;

package/Divider/Divider.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ISurface } from '../Surface/Surface';
-export type IDivider = ISurface & {
+export declare type IDivider = ISurface & {
     inset?: boolean;
     middle?: boolean;
     padding?: number;

package/Divider/Divider.js

@@ -128,19 +128,11 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Divider'
 });
 const Divider = /*#__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.onesyDivider) === 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 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.onesyDivider) === 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 Surface = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Surface) || _Surface.default;
   const {
       tonal = true,
       color = 'inverted',

package/DonutChart/DonutChart.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { IPieChart } from '../PieChart/PieChart';
-export type IDonutChart = IPieChart & {};
+export declare type IDonutChart = IPieChart & {};
 declare const DonutChart: React.FC<IDonutChart>;
 export default DonutChart;