@onesy/ui-react 1.0.163 → 1.0.165

package/Countdown/Countdown.js

@@ -93,48 +93,19 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Countdown'
 });
 const Countdown = /*#__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;
   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.onesyCountdown) === 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 Fade = _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.Fade) || _Fade.default;
-  }, [theme]);
-  const Type = _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.Type) || _Type.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 Surface = _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.Surface) || _Surface.default;
-  }, [theme]);
-  const NumericTextField = _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.NumericTextField) || _NumericTextField.default;
-  }, [theme]);
-  const RoundProgress = _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.RoundProgress) || _RoundProgress.default;
-  }, [theme]);
-  const LinearProgress = _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.LinearProgress) || _LinearProgress.default;
-  }, [theme]);
-  const IconButton = _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.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.onesyCountdown) === 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 Fade = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Fade) || _Fade.default;
+  const Type = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Type) || _Type.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 Surface = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Surface) || _Surface.default;
+  const NumericTextField = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.NumericTextField) || _NumericTextField.default;
+  const RoundProgress = (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.RoundProgress) || _RoundProgress.default;
+  const LinearProgress = (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.LinearProgress) || _LinearProgress.default;
+  const IconButton = (theme === null || theme === void 0 || (_theme$elements9 = theme.elements) === null || _theme$elements9 === void 0 ? void 0 : _theme$elements9.IconButton) || _IconButton.default;
   const {
       tonal = true,
       color = 'primary',
@@ -206,7 +177,7 @@ const Countdown = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     setValue(refs.valuePaused.current - (_date.OnesyDate.milliseconds - refs.start.current));
     refs.animationFrame.current = requestAnimationFrame(update);
   };
-  const onStart = _react.default.useCallback(event => {
+  const onStart = event => {
     refs.total.current = refs.valuePaused.current = (refs.values.current.hours || 0) * 60 ** 2 * 1e3 + (refs.values.current.minutes || 0) * 60 ** 1 * 1e3 + (refs.values.current.seconds || 0) * 1e3;
     setValue(refs.valuePaused.current);
     setStatus('running');
@@ -215,33 +186,33 @@ const Countdown = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       refs.animationFrame.current = requestAnimationFrame(update);
     }, 14);
     if ((0, _utils.is)('function', onStart_)) onStart_(event);
-  }, []);
-  const onPause = _react.default.useCallback(event => {
+  };
+  const onPause = event_0 => {
     clear();
 
     // Remember previous value
     refs.valuePaused.current = refs.value.current;
     setStatus('paused');
-    if ((0, _utils.is)('function', onPause_)) onPause_(event);
-  }, []);
-  const onStop = _react.default.useCallback(event => {
+    if ((0, _utils.is)('function', onPause_)) onPause_(event_0);
+  };
+  const onStop = event_1 => {
     clear();
     refs.start.current = 0;
     refs.valuePaused.current = 0;
     refs.value.current = 0;
     setStatus('initial');
     setValue(0);
-    if ((0, _utils.is)('function', onStop_)) onStop_(event);
-  }, []);
-  const onResume = _react.default.useCallback(event => {
+    if ((0, _utils.is)('function', onStop_)) onStop_(event_1);
+  };
+  const onResume = event_2 => {
     // Update start, valuePaused value
     refs.start.current = _date.OnesyDate.milliseconds;
 
     // ~60+ fps
     refs.animationFrame.current = requestAnimationFrame(update);
     setStatus('running');
-    if ((0, _utils.is)('function', onResume_)) onResume_(event);
-  }, []);
+    if ((0, _utils.is)('function', onResume_)) onResume_(event_2);
+  };
   const IconProps = _objectSpread({}, IconProps_);
   const TooltipProps = _objectSpread({
     portal: true,
@@ -313,7 +284,7 @@ const Countdown = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     min: 0,
     max: 23,
     value: values.hours,
-    onChange: valueNew => updateValues('hours', !valueNew ? 0 : valueNew)
+    onChange: valueNew_0 => updateValues('hours', !valueNew_0 ? 0 : valueNew_0)
   }, NumericTextFieldProps, {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Countdown', theme) && ['onesy-Countdown-numeric-text-field'], NumericTextFieldProps === null || NumericTextFieldProps === void 0 ? void 0 : NumericTextFieldProps.className, classes.numericTextField])
   })), /*#__PURE__*/_react.default.createElement(NumericTextField, (0, _extends2.default)({
@@ -321,7 +292,7 @@ const Countdown = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     min: 0,
     max: 59,
     value: values.minutes,
-    onChange: valueNew => updateValues('minutes', !valueNew ? 0 : valueNew)
+    onChange: valueNew_1 => updateValues('minutes', !valueNew_1 ? 0 : valueNew_1)
   }, NumericTextFieldProps, {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Countdown', theme) && ['onesy-Countdown-numeric-text-field'], NumericTextFieldProps === null || NumericTextFieldProps === void 0 ? void 0 : NumericTextFieldProps.className, classes.numericTextField])
   })), /*#__PURE__*/_react.default.createElement(NumericTextField, (0, _extends2.default)({
@@ -329,7 +300,7 @@ const Countdown = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     min: 0,
     max: 59,
     value: values.seconds,
-    onChange: valueNew => updateValues('seconds', !valueNew ? 0 : valueNew)
+    onChange: valueNew_2 => updateValues('seconds', !valueNew_2 ? 0 : valueNew_2)
   }, NumericTextFieldProps, {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Countdown', theme) && ['onesy-Countdown-numeric-text-field'], NumericTextFieldProps === null || NumericTextFieldProps === void 0 ? void 0 : NumericTextFieldProps.className, classes.numericTextField])
   })))), status !== 'initial' && ['regular', 'linear'].includes(version) && /*#__PURE__*/_react.default.createElement(Fade, {

package/DatePicker/DatePicker.d.ts

@@ -7,7 +7,7 @@ import { IValueBreakpoints, IElement, IElementReference, IPropsAny } from '../ty
 import { ITextField } from '../TextField/TextField';
 export declare const SEPARATOR_SYMBOL = "\u2013";
 export declare const SEPARATOR: string;
-export type IDatePicker = Omit<ILine, 'onChange'> & ITextField & {
+export declare type IDatePicker = Omit<ILine, 'onChange'> & ITextField & {
     version?: 'auto' | 'mobile' | 'desktop';
     value?: TCalendarMonthValue;
     valueDefault?: TCalendarMonthValue;

package/DatePicker/DatePicker.js

@@ -123,60 +123,22 @@ const useStyle = (0, _styleReact.style)(theme => ({
 const SEPARATOR_SYMBOL = exports.SEPARATOR_SYMBOL = `–`;
 const SEPARATOR = exports.SEPARATOR = ` ${SEPARATOR_SYMBOL} `;
 const DatePicker = /*#__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.onesyDatePicker) === 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 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 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 AdvancedTextField = _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.AdvancedTextField) || _AdvancedTextField.default;
-  }, [theme]);
-  const Modal = _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.Modal) || _Modal.default;
-  }, [theme]);
-  const Tooltip = _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.Tooltip) || _Tooltip.default;
-  }, [theme]);
-  const Surface = _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.Surface) || _Surface.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 Calendar = _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.Calendar) || _Calendar.default;
-  }, [theme]);
-  const Divider = _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.Divider) || _Divider.default;
-  }, [theme]);
-  const Slide = _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.Slide) || _Slide.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.onesyDatePicker) === 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 IconButton = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.IconButton) || _IconButton.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 AdvancedTextField = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.AdvancedTextField) || _AdvancedTextField.default;
+  const Modal = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Modal) || _Modal.default;
+  const Tooltip = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Tooltip) || _Tooltip.default;
+  const Surface = (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.Surface) || _Surface.default;
+  const Type = (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.Type) || _Type.default;
+  const Calendar = (theme === null || theme === void 0 || (_theme$elements9 = theme.elements) === null || _theme$elements9 === void 0 ? void 0 : _theme$elements9.Calendar) || _Calendar.default;
+  const Divider = (theme === null || theme === void 0 || (_theme$elements0 = theme.elements) === null || _theme$elements0 === void 0 ? void 0 : _theme$elements0.Divider) || _Divider.default;
+  const Slide = (theme === null || theme === void 0 || (_theme$elements1 = theme.elements) === null || _theme$elements1 === void 0 ? void 0 : _theme$elements1.Slide) || _Slide.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',
@@ -252,13 +214,13 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
     const result = [];
     const items = [switch__, 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);
   }, [switch__, 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
     });
   });
@@ -276,21 +238,21 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
   const [open, setOpen] = _react.default.useState(false);
   const [mode, setMode] = _react.default.useState((touch ? openMobile : 'select') || 'select');
   const [error, setError] = _react.default.useState(false);
-  const valueToInput = _react.default.useCallback((valueNew = value) => {
-    let result = '';
+  const valueToInput = (valueNew = value) => {
+    let result_0 = '';
     const [from, to] = (0, _utils.is)('array', valueNew) ? valueNew : [valueNew];
     if (!(from || to)) return '';
-    const method = item => `${(0, _date.format)(item, 'DD', {
+    const method = item_0 => `${(0, _date.format)(item_0, 'DD', {
       l
-    })}/${(0, _date.format)(item, 'MM', {
+    })}/${(0, _date.format)(item_0, 'MM', {
       l
-    })}/${(0, _date.format)(item, 'YYYY', {
+    })}/${(0, _date.format)(item_0, 'YYYY', {
       l
     })}`;
-    result += `${method(from)}`;
-    if (range && to) result += `${SEPARATOR}${method(to)}`;
-    return result;
-  }, [value, range]);
+    result_0 += `${method(from)}`;
+    if (range && to) result_0 += `${SEPARATOR}${method(to)}`;
+    return result_0;
+  };
   const [input, setInput] = _react.default.useState(valueToInput());
   const [inputModal, setInputModal] = _react.default.useState(valueToInput());
   let version = version_;
@@ -298,25 +260,25 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
     if (touch) version = 'mobile';else version = 'desktop';
   }
   const onUpdateValue = valueNew_ => {
-    const valueNew = (0, _utils.is)('array', valueNew_) ? valueNew_ : [valueNew_];
+    const valueNew_0 = (0, _utils.is)('array', valueNew_) ? valueNew_ : [valueNew_];
     const dateNow = new _date.OnesyDate();
 
     // Update value
-    setValue(valueNew);
+    setValue(valueNew_0);
 
     // Update calendar
-    onUpdateCalendar(valueNew[0] || dateNow);
+    onUpdateCalendar(valueNew_0[0] || dateNow);
 
     // Update input
-    setInput(valueToInput(valueNew));
+    setInput(valueToInput(valueNew_0));
 
     // Update input modal
-    setInputModal(valueToInput(valueNew));
+    setInputModal(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(() => {
@@ -333,116 +295,116 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
   _react.default.useEffect(() => {
     if (calendar_ !== undefined && calendar_ !== calendar) setCalendar(calendar_);
   }, [calendar_]);
-  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 onUpdateCalendar = _react.default.useCallback(valueNew => {
+    if (!props.hasOwnProperty('value')) setValue(valueNew_2);
+    if ((0, _utils.is)('function', onChange)) onChange(!range ? valueNew_2[0] : valueNew_2);
+  };
+  const onUpdateCalendar = valueNew_3 => {
     // Inner update
-    if (!props.hasOwnProperty('calendar')) setCalendar(valueNew);
-    if ((0, _utils.is)('function', onChangeCalendar)) onChangeCalendar(valueNew);
-  }, [onChangeCalendar]);
+    if (!props.hasOwnProperty('calendar')) setCalendar(valueNew_3);
+    if ((0, _utils.is)('function', onChangeCalendar)) onChangeCalendar(valueNew_3);
+  };
 
   // Update only internally, without using onChange
   // since it might be canceled
   // only use onChange on
   // input change, or ok
-  const onCalendarChange = _react.default.useCallback(valueNew_ => {
-    const valueNew = (0, _utils.is)('array', valueNew_) ? valueNew_ : [valueNew_];
-    if (valueNew !== value) {
-      (!actions_ ? onUpdate : setValue)(valueNew);
+  const onCalendarChange = valueNew__0 => {
+    const valueNew_4 = (0, _utils.is)('array', valueNew__0) ? valueNew__0 : [valueNew__0];
+    if (valueNew_4 !== value) {
+      (!actions_ ? onUpdate : setValue)(valueNew_4);
 
       // Update input modal
-      setInputModal(valueToInput(valueNew));
+      setInputModal(valueToInput(valueNew_4));
     }
-  }, [value, actions_]);
-  const onCalendarChangeCalendar = _react.default.useCallback(valueNew => {
-    if (valueNew !== calendar) onUpdateCalendar(valueNew);
-  }, [calendar]);
-  const inputToValue = _react.default.useCallback((valueNew_ = input) => {
-    let valueNew = valueNew_;
-    let [from, to] = valueNew.split(SEPARATOR);
-    from = textToOnesyDate(from);
-    if (to) to = textToOnesyDate(to, false);
-    valueNew = [from, to].filter(Boolean);
-    return valueNew;
-  }, [input]);
-  const onOpen = _react.default.useCallback(() => {
+  };
+  const onCalendarChangeCalendar = valueNew_5 => {
+    if (valueNew_5 !== calendar) onUpdateCalendar(valueNew_5);
+  };
+  const inputToValue = (valueNew__1 = input) => {
+    let valueNew_6 = valueNew__1;
+    let [from_0, to_0] = valueNew_6.split(SEPARATOR);
+    from_0 = textToOnesyDate(from_0);
+    if (to_0) to_0 = textToOnesyDate(to_0, false);
+    valueNew_6 = [from_0, to_0].filter(Boolean);
+    return valueNew_6;
+  };
+  const onOpen = () => {
     onMode();
     setOpen(!open);
-  }, [open, openMobile, version]);
-  const onClose = _react.default.useCallback(event => {
+  };
+  const onClose = event => {
     setOpen(false);
     if ((0, _utils.is)('function', onClose_)) onClose_(event);
-  }, [onClose_]);
-  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);
+  };
+  const onReset = () => {
+    var _valueNew_;
+    let valueNew_7 = inputToValue();
+    const isValid = valueNew_7 && ((_valueNew_ = valueNew_7) === null || _valueNew_ === void 0 || (_valueNew_ = _valueNew_[0]) === null || _valueNew_ === void 0 ? void 0 : _valueNew_.valid);
     if (isValid) {
       // Update value
-      onUpdate(valueNew);
+      onUpdate(valueNew_7);
 
       // Update calendar
-      onUpdateCalendar(valueNew[0]);
+      onUpdateCalendar(valueNew_7[0]);
 
       // Update input modal
       setInputModal(input);
     } else {
-      const dateNow = new _date.OnesyDate();
-      valueNew = [];
+      const dateNow_0 = new _date.OnesyDate();
+      valueNew_7 = [];
 
       // Update value
-      onUpdate(valueNew);
+      onUpdate(valueNew_7);
 
       // Update calendar
-      onUpdateCalendar(dateNow);
+      onUpdateCalendar(dateNow_0);
 
       // Update input
-      setInput(valueToInput(valueNew));
+      setInput(valueToInput(valueNew_7));
 
       // Update input modal
-      setInputModal(valueToInput(valueNew));
+      setInputModal(valueToInput(valueNew_7));
     }
-  }, [input]);
-  const onToday = _react.default.useCallback(event => {
-    const valueNew = [(0, _date.startOf)(new _date.OnesyDate(), 'day')];
-    if (range) valueNew.push((0, _date.endOf)(new _date.OnesyDate(), 'day'));
+  };
+  const onToday = event_0 => {
+    const valueNew_8 = [(0, _date.startOf)(new _date.OnesyDate(), 'day')];
+    if (range) valueNew_8.push((0, _date.endOf)(new _date.OnesyDate(), 'day'));
 
     // Update value
-    onUpdate(valueNew);
+    onUpdate(valueNew_8);
 
     // Update calendar
-    onUpdateCalendar(valueNew[0]);
+    onUpdateCalendar(valueNew_8[0]);
 
     // Update input
-    setInput(valueToInput(valueNew));
+    setInput(valueToInput(valueNew_8));
 
     // Update input modal
-    setInputModal(valueToInput(valueNew));
-    onClose(event);
-    if ((0, _utils.is)('function', onToday_)) onToday_(event);
-  }, [input, range, onToday_]);
-  const onClear = _react.default.useCallback(event => {
-    const dateNow = new _date.OnesyDate();
-    const valueNew = [];
+    setInputModal(valueToInput(valueNew_8));
+    onClose(event_0);
+    if ((0, _utils.is)('function', onToday_)) onToday_(event_0);
+  };
+  const onClear = event_1 => {
+    const dateNow_1 = new _date.OnesyDate();
+    const valueNew_9 = [];
 
     // Update value
-    onUpdate(valueNew);
+    onUpdate(valueNew_9);
 
     // Update calendar
-    onUpdateCalendar(dateNow);
+    onUpdateCalendar(dateNow_1);
 
     // Update input
-    setInput(valueToInput(valueNew));
+    setInput(valueToInput(valueNew_9));
 
     // Update input modal
-    setInputModal(valueToInput(valueNew));
-    onClose(event);
-    if ((0, _utils.is)('function', onClear_)) onClear_(event);
-  }, [onClear_]);
-  const onOk = _react.default.useCallback(event => {
+    setInputModal(valueToInput(valueNew_9));
+    onClose(event_1);
+    if ((0, _utils.is)('function', onClear_)) onClear_(event_1);
+  };
+  const onOk = event_2 => {
     // Error
     errorCheck();
 
@@ -454,15 +416,15 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
 
     // Update input modal
     setInputModal(valueToInput(value));
-    onClose(event);
-    if ((0, _utils.is)('function', onOk_)) onOk_(event);
-  }, [value, onOk_]);
-  const onCancel = _react.default.useCallback(event => {
+    onClose(event_2);
+    if ((0, _utils.is)('function', onOk_)) onOk_(event_2);
+  };
+  const onCancel = event_3 => {
     onReset();
-    onClose(event);
-    if ((0, _utils.is)('function', onCancel_)) onCancel_(event);
-  }, [input, onCancel_]);
-  const valid = _react.default.useCallback((...args) => {
+    onClose(event_3);
+    if ((0, _utils.is)('function', onCancel_)) onCancel_(event_3);
+  };
+  const valid = (...args) => {
     if ((0, _utils.is)('function', valid_)) return valid_(...args);
     const onesyDate = args[0];
     if (min || max || validate) {
@@ -473,63 +435,63 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
       return response;
     }
     return true;
-  }, [valid_, min, max, validate]);
-  const textToOnesyDate = _react.default.useCallback((valueNew, start = true) => {
-    const [valueDay, valueMonth, valueYear] = (valueNew || '').split('/');
-    const onesyDate = new _date.OnesyDate(new Date(`${valueMonth}/${valueDay}/${valueYear}`));
-    return start ? (0, _date.startOf)(onesyDate, 'day') : (0, _date.endOf)(onesyDate, 'day');
-  }, []);
-  const onInputChange = _react.default.useCallback(valueNew_ => {
-    const valueNew = inputToValue(valueNew_);
-    const validValues = valueNew.every(item => item.valid);
+  };
+  const textToOnesyDate = (valueNew_10, start = true) => {
+    const [valueDay, valueMonth, valueYear] = (valueNew_10 || '').split('/');
+    const onesyDate_0 = new _date.OnesyDate(new Date(`${valueMonth}/${valueDay}/${valueYear}`));
+    return start ? (0, _date.startOf)(onesyDate_0, 'day') : (0, _date.endOf)(onesyDate_0, 'day');
+  };
+  const onInputChange = valueNew__2 => {
+    const valueNew_11 = inputToValue(valueNew__2);
+    const validValues = valueNew_11.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_11);
 
       // Update value
-      onUpdate(valueNew);
+      onUpdate(valueNew_11);
 
       // Update calendar
-      onUpdateCalendar(valueNew[0]);
+      onUpdateCalendar(valueNew_11[0]);
     }
-    if (!valueNew_) {
+    if (!valueNew__2) {
       onUpdate([null, null]);
     }
 
     // Update input for free typing
-    setInput(valueNew_);
-  }, []);
-  const onInputChangeModal = _react.default.useCallback(valueNew_ => {
-    const valueNew = inputToValue(valueNew_);
-    const validValues = valueNew.every(item => item.valid);
+    setInput(valueNew__2);
+  };
+  const onInputChangeModal = valueNew__3 => {
+    const valueNew_12 = inputToValue(valueNew__3);
+    const validValues_0 = valueNew_12.every(item_3 => item_3.valid);
 
     // Only update values if input is valid
     // format used to make the value
-    if (validValues) {
+    if (validValues_0) {
       // Error
-      errorCheck(valueNew);
+      errorCheck(valueNew_12);
 
       // Update value
-      onUpdate(valueNew);
+      onUpdate(valueNew_12);
 
       // Update calendar
-      onUpdateCalendar(valueNew[0]);
+      onUpdateCalendar(valueNew_12[0]);
     }
 
     // Update input for free typing
-    setInputModal(valueNew_);
-  }, []);
-  const onMode = _react.default.useCallback((mode_ = openMobile) => {
+    setInputModal(valueNew__3);
+  };
+  const onMode = (mode_ = openMobile) => {
     setMode(() => mode_);
-  }, []);
+  };
   const mask = [{
     pattern: '[0-3]'
-  }, (item, result, valueInput) => /^(0[0-9]|1[0-9]|2[0-9]|3[0-1]).*/.test(valueInput), '/', {
+  }, (item_4, 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_5, 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]'
@@ -674,8 +636,8 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
     align: "center",
     justify: "space-between",
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('DatePicker', theme) && ['onesy-DatePicker-day-names'], classes.dayNames])
-  }, dayNames.map((day, index) => /*#__PURE__*/_react.default.createElement(Line, {
-    key: index,
+  }, dayNames.map((day, index_0) => /*#__PURE__*/_react.default.createElement(Line, {
+    key: index_0,
     version: "b3",
     direction: "row",
     align: "center",
@@ -767,11 +729,11 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
   }, WrapperProps, {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('DatePicker', theme) && ['onesy-DatePicker-root', `onesy-DatePicker-version-${version}`, `onesy-DatePicker-size-${size}`, WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.className, range && `onesy-DatePicker-range`, readOnly && `onesy-DatePicker-read-only`, disabled && `onesy-DatePicker-disabled`, fullWidth && 'onesy-full-width'], className, classes.root])
   }), /*#__PURE__*/_react.default.createElement(AdvancedTextField, (0, _extends2.default)({
-    rootRef: item => {
+    rootRef: item_6 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_6);else ref.current = item_6;
       }
-      refs.root.current = item;
+      refs.root.current = item_6;
     },
     tonal: tonal,
     color: color,

package/DateRangePicker/DateRangePicker.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { IDatePicker } from '../DatePicker/DatePicker';
-export type IDateRangePicker = IDatePicker & {};
+export declare type IDateRangePicker = IDatePicker & {};
 declare const DateRangePicker: React.FC<IDateRangePicker>;
 export default DateRangePicker;