@onesy/ui-react 1.0.164 → 1.0.165

package/TimePicker/TimePicker.js

@@ -215,72 +215,25 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-TimePicker'
 });
 const TimePicker = /*#__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, _theme$elements11, _theme$elements12, _theme$elements13;
   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.onesyTimePicker) === 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 AdvancedTextField = _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.AdvancedTextField) || _AdvancedTextField.default;
-  }, [theme]);
-  const Modal = _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.Modal) || _Modal.default;
-  }, [theme]);
-  const ClickListener = _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.ClickListener) || _ClickListener.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 ToggleButton = _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.ToggleButton) || _ToggleButton.default;
-  }, [theme]);
-  const ToggleButtons = _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.ToggleButtons) || _ToggleButtons.default;
-  }, [theme]);
-  const Button = _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.Button) || _Button.default;
-  }, [theme]);
-  const Slide = _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.Slide) || _Slide.default;
-  }, [theme]);
-  const Clock = _react.default.useMemo(() => {
-    var _theme$elements11;
-    return (theme === null || theme === void 0 || (_theme$elements11 = theme.elements) === null || _theme$elements11 === void 0 ? void 0 : _theme$elements11.Clock) || _Clock.default;
-  }, [theme]);
-  const Tab = _react.default.useMemo(() => {
-    var _theme$elements12;
-    return (theme === null || theme === void 0 || (_theme$elements12 = theme.elements) === null || _theme$elements12 === void 0 ? void 0 : _theme$elements12.Tab) || _Tab.default;
-  }, [theme]);
-  const Tabs = _react.default.useMemo(() => {
-    var _theme$elements13;
-    return (theme === null || theme === void 0 || (_theme$elements13 = theme.elements) === null || _theme$elements13 === void 0 ? void 0 : _theme$elements13.Tabs) || _Tabs.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.onesyTimePicker) === 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 AdvancedTextField = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.AdvancedTextField) || _AdvancedTextField.default;
+  const Modal = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Modal) || _Modal.default;
+  const ClickListener = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.ClickListener) || _ClickListener.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 ToggleButton = (theme === null || theme === void 0 || (_theme$elements9 = theme.elements) === null || _theme$elements9 === void 0 ? void 0 : _theme$elements9.ToggleButton) || _ToggleButton.default;
+  const ToggleButtons = (theme === null || theme === void 0 || (_theme$elements0 = theme.elements) === null || _theme$elements0 === void 0 ? void 0 : _theme$elements0.ToggleButtons) || _ToggleButtons.default;
+  const Button = (theme === null || theme === void 0 || (_theme$elements1 = theme.elements) === null || _theme$elements1 === void 0 ? void 0 : _theme$elements1.Button) || _Button.default;
+  const Slide = (theme === null || theme === void 0 || (_theme$elements10 = theme.elements) === null || _theme$elements10 === void 0 ? void 0 : _theme$elements10.Slide) || _Slide.default;
+  const Clock = (theme === null || theme === void 0 || (_theme$elements11 = theme.elements) === null || _theme$elements11 === void 0 ? void 0 : _theme$elements11.Clock) || _Clock.default;
+  const Tab = (theme === null || theme === void 0 || (_theme$elements12 = theme.elements) === null || _theme$elements12 === void 0 ? void 0 : _theme$elements12.Tab) || _Tab.default;
+  const Tabs = (theme === null || theme === void 0 || (_theme$elements13 = theme.elements) === null || _theme$elements13 === void 0 ? void 0 : _theme$elements13.Tabs) || _Tabs.default;
   const {
       tonal = true,
       color = 'primary',
@@ -364,13 +317,13 @@ const TimePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
     const result = [];
     const items = [switch__, orientation_, autoNext_, autoCloseOnLast_];
     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__, orientation_, autoNext_, autoCloseOnLast_]);
   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
     });
   });
@@ -386,56 +339,56 @@ const TimePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
     return ((0, _utils.is)('array', valueResult) ? valueResult : [valueResult]).filter(Boolean);
   });
   const [selecting, setSelecting] = _react.default.useState(() => {
-    const valueResult = (selectingDefault !== undefined ? selectingDefault : selecting_) || ['hour', 'hour'];
-    return ((0, _utils.is)('array', valueResult) ? valueResult : [valueResult]).filter(Boolean);
+    const valueResult_0 = (selectingDefault !== undefined ? selectingDefault : selecting_) || ['hour', 'hour'];
+    return ((0, _utils.is)('array', valueResult_0) ? valueResult_0 : [valueResult_0]).filter(Boolean);
   });
   const [open, setOpen] = _react.default.useState(false);
   const [mode, setMode] = _react.default.useState((touch ? openMobile : openDesktop) || 'select');
   const [error, setError] = _react.default.useState(false);
   const [dayTime, setDayTime] = _react.default.useState(Array.from({
     length: 2
-  }).map(item => (0, _date.format)(new _date.OnesyDate(), 'a')));
+  }).map(item_0 => (0, _date.format)(new _date.OnesyDate(), 'a')));
   const [tab, setTab] = _react.default.useState(0);
   refs.value.current = value;
   refs.mode.current = mode;
   refs.dayTime.current = dayTime;
-  const valueToInput = _react.default.useCallback((valueNew = refs.value.current) => {
-    let result = '';
+  const valueToInput = (valueNew = refs.value.current) => {
+    let result_0 = '';
     const [from, to] = (0, _utils.is)('array', valueNew) ? valueNew : [valueNew];
     if (!(from || to)) return '';
-    const method = item => {
+    const method = item_1 => {
       let formatValue = '';
       if (format === '12') formatValue += `hh`;else formatValue += `HH`;
       if (minute) formatValue += `:mm`;
       if (second) formatValue += `:ss`;
       if (format === '12') formatValue += ` a`;
-      return (0, _date.format)(item, formatValue);
+      return (0, _date.format)(item_1, formatValue);
     };
-    result += `${method(from)}`;
-    if (range && to) result += `${_DatePicker.SEPARATOR}${method(to)}`;
-    return result;
-  }, [value, format, hour, minute, second, range]);
+    result_0 += `${method(from)}`;
+    if (range && to) result_0 += `${_DatePicker.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_ => {
-    const valueNew = (0, _utils.is)('array', valueNew_) ? valueNew_ : [valueNew_];
+    const valueNew_0 = (0, _utils.is)('array', valueNew_) ? valueNew_ : [valueNew_];
 
     // Update value
-    setValue(valueNew);
+    setValue(valueNew_0);
 
     // Update input
-    setInput(valueToInput(valueNew));
+    setInput(valueToInput(valueNew_0));
 
     // Update dayTime
-    setDayTime(valueNew.map(item => (0, _date.format)(item, 'a')));
+    setDayTime(valueNew_0.map(item_2 => (0, _date.format)(item_2, 'a')));
   };
-  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_3, index) => !valid(item_3)));
+  };
 
   // Init
   _react.default.useEffect(() => {
@@ -447,22 +400,22 @@ const TimePicker = /*#__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 valueNew = resolve(valueNew_);
+  const onUpdate = valueNew__0 => {
+    const valueNew_2 = resolve(valueNew__0);
 
     // Inner update
-    if (!props.hasOwnProperty('value')) setValue(valueNew);
-    if ((0, _utils.is)('function', onChange)) onChange(!range ? valueNew[0] : valueNew);
-  }, [value, range, onChange]);
-  const onUpdateSelecting = _react.default.useCallback((valueNew_, index) => {
-    const valueNew = [...selecting];
-    valueNew[index] = valueNew_;
+    if (!props.hasOwnProperty('value')) setValue(valueNew_2);
+    if ((0, _utils.is)('function', onChange)) onChange(!range ? valueNew_2[0] : valueNew_2);
+  };
+  const onUpdateSelecting = (valueNew__1, index_0) => {
+    const valueNew_3 = [...selecting];
+    valueNew_3[index_0] = valueNew__1;
 
     // Inner update
-    if (!props.hasOwnProperty('selecting')) setSelecting(valueNew);
-    if ((0, _utils.is)('function', onChangeSelecting)) onChangeSelecting(valueNew);
-  }, [onChangeSelecting]);
-  const valid = _react.default.useCallback((...args) => {
+    if (!props.hasOwnProperty('selecting')) setSelecting(valueNew_3);
+    if ((0, _utils.is)('function', onChangeSelecting)) onChangeSelecting(valueNew_3);
+  };
+  const valid = (...args) => {
     if ((0, _utils.is)('function', valid_)) return valid_(...args);
     const onesyDate = args[0];
     if (min || max || validate) {
@@ -473,165 +426,165 @@ const TimePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
       return response;
     }
     return true;
-  }, [valid_, min, max, validate]);
-  const textToOnesyDate = _react.default.useCallback(valueNew => {
-    const [times, dayTime_] = (valueNew || '').split(' ');
+  };
+  const textToOnesyDate = valueNew_4 => {
+    const [times, dayTime_] = (valueNew_4 || '').split(' ');
     const values = times.split(':');
     let valueTime;
-    let onesyDate = new _date.OnesyDate();
+    let onesyDate_0 = new _date.OnesyDate();
     if (hour) {
       valueTime = values[0];
       if ((0, _utils.is)('string', valueTime) && valueTime.startsWith('0')) valueTime = valueTime.slice(1);
       valueTime = +valueTime;
-      onesyDate = (0, _date.set)(format === '12' && dayTime_ === 'pm' ? valueTime + 12 : valueTime, 'hour', onesyDate);
+      onesyDate_0 = (0, _date.set)(format === '12' && dayTime_ === 'pm' ? valueTime + 12 : valueTime, 'hour', onesyDate_0);
     }
     if (minute) {
       valueTime = values[!hour ? 0 : 1];
       if ((0, _utils.is)('string', valueTime) && valueTime.startsWith('0')) valueTime = valueTime.slice(1);
       valueTime = +valueTime;
-      onesyDate = (0, _date.set)(valueTime, 'minute', onesyDate);
+      onesyDate_0 = (0, _date.set)(valueTime, 'minute', onesyDate_0);
     }
     if (second) {
       valueTime = values[!(hour && minute) ? 0 : !hour ? 1 : 2];
       if ((0, _utils.is)('string', valueTime) && valueTime.startsWith('0')) valueTime = valueTime.slice(1);
       valueTime = +valueTime;
-      onesyDate = (0, _date.set)(valueTime, 'second', onesyDate);
+      onesyDate_0 = (0, _date.set)(valueTime, 'second', onesyDate_0);
     }
-    return onesyDate;
-  }, [format, hour, minute, second]);
-  const onInputModalChange = _react.default.useCallback((valueNew, unit, index) => {
-    let valueTime = valueNew;
-    if ((0, _utils.is)('string', valueTime) && valueTime.startsWith('0')) valueTime = valueTime.slice(1);
-    valueTime = +valueTime;
-    value[index] = (0, _date.set)(valueTime, unit || selecting[index], value[index]);
+    return onesyDate_0;
+  };
+  const onInputModalChange = (valueNew_5, unit, index_1) => {
+    let valueTime_0 = valueNew_5;
+    if ((0, _utils.is)('string', valueTime_0) && valueTime_0.startsWith('0')) valueTime_0 = valueTime_0.slice(1);
+    valueTime_0 = +valueTime_0;
+    value[index_1] = (0, _date.set)(valueTime_0, unit || selecting[index_1], value[index_1]);
     (!actions_ ? onUpdate : setValue)(resolve(value));
-  }, [value, actions_, selecting]);
-  const resolve = _react.default.useCallback((valueNew = refs.value.current, dayTimeNew = refs.dayTime.current) => {
-    const values = valueNew.filter(Boolean).map((item, index) => {
+  };
+  const resolve = (valueNew_6 = refs.value.current, dayTimeNew = refs.dayTime.current) => {
+    const values_0 = valueNew_6.filter(Boolean).map((item_4, index_2) => {
       // Resolve the range value
-      const valueHour = item.hour;
+      const valueHour = item_4.hour;
       if (format === '12') {
-        if (dayTimeNew[index] === 'am' && valueHour >= 12) return (0, _date.set)(valueHour - 12, 'hour', item);
-        if (dayTimeNew[index] === 'pm' && valueHour < 12) return (0, _date.set)(valueHour + 12, 'hour', item);
+        if (dayTimeNew[index_2] === 'am' && valueHour >= 12) return (0, _date.set)(valueHour - 12, 'hour', item_4);
+        if (dayTimeNew[index_2] === 'pm' && valueHour < 12) return (0, _date.set)(valueHour + 12, 'hour', item_4);
       }
-      return item;
+      return item_4;
     });
-    return values;
-  }, [value, dayTime, format]);
-  const updateDayTime = _react.default.useCallback((valueNew_, index) => {
-    const valueNew = valueNew_[0];
+    return values_0;
+  };
+  const updateDayTime = (valueNew__2, index_3) => {
+    const valueNew_7 = valueNew__2[0];
 
     // Update dayTime
-    const dayTimeNew = [...dayTime];
-    dayTimeNew[index] = valueNew;
-    refs.dayTime.current = dayTimeNew;
-    setDayTime(dayTimeNew);
+    const dayTimeNew_0 = [...dayTime];
+    dayTimeNew_0[index_3] = valueNew_7;
+    refs.dayTime.current = dayTimeNew_0;
+    setDayTime(dayTimeNew_0);
     (!actions_ ? onUpdate : setValue)(resolve(refs.value.current));
-  }, [value, actions_, dayTime, format]);
-  const inputToValue = _react.default.useCallback((valueNew_ = input) => {
-    let valueNew = valueNew_;
-    let [from, to] = valueNew.split(_DatePicker.SEPARATOR);
-    from = textToOnesyDate(from);
-    if (to) to = textToOnesyDate(to);
-    valueNew = [from, to].filter(Boolean).filter(item => item === null || item === void 0 ? void 0 : item.valid);
-    return valueNew;
-  }, [input]);
-  const onInputChange = _react.default.useCallback(valueNew_ => {
-    const valueNew = inputToValue(valueNew_);
-    const validValues = valueNew.every(item => item.valid);
+  };
+  const inputToValue = (valueNew__3 = input) => {
+    let valueNew_8 = valueNew__3;
+    let [from_0, to_0] = valueNew_8.split(_DatePicker.SEPARATOR);
+    from_0 = textToOnesyDate(from_0);
+    if (to_0) to_0 = textToOnesyDate(to_0);
+    valueNew_8 = [from_0, to_0].filter(Boolean).filter(item_5 => item_5 === null || item_5 === void 0 ? void 0 : item_5.valid);
+    return valueNew_8;
+  };
+  const onInputChange = valueNew__4 => {
+    const valueNew_9 = inputToValue(valueNew__4);
+    const validValues = valueNew_9.every(item_6 => item_6.valid);
 
     // Only update values if input is valid
     // format used to make the value
     if (validValues) {
       // Error
-      errorCheck(valueNew);
+      errorCheck(valueNew_9);
 
       // Update value
-      onUpdate(valueNew);
+      onUpdate(valueNew_9);
     }
-    if (!valueNew_) {
+    if (!valueNew__4) {
       onUpdate([null, null]);
     }
 
     // Update input for free typing
-    setInput(valueNew_);
-  }, []);
-  const onChangeClock = _react.default.useCallback((valueNew_, index = 0) => {
-    const valueNew = [...value];
-    if (valueNew_ !== value[index]) {
-      valueNew[index] = valueNew_;
-      (!actions_ ? onUpdate : setValue)(resolve(valueNew));
+    setInput(valueNew__4);
+  };
+  const onChangeClock = (valueNew__5, index_4 = 0) => {
+    const valueNew_10 = [...value];
+    if (valueNew__5 !== value[index_4]) {
+      valueNew_10[index_4] = valueNew__5;
+      (!actions_ ? onUpdate : setValue)(resolve(valueNew_10));
 
       // Error
-      errorCheck(valueNew);
+      errorCheck(valueNew_10);
     }
-  }, [value, actions_]);
-  const onChangeSelectingClock = _react.default.useCallback((valueNew, index = 0) => {
+  };
+  const onChangeSelectingClock = (valueNew_11, index_5 = 0) => {
     const selectingValue = selecting;
-    selectingValue[index] = valueNew;
-    if (valueNew !== selecting[0]) setSelecting([...selectingValue]);
-  }, [selecting]);
-  const onDoneSelecting = _react.default.useCallback((valueNew, selectingNew) => {
+    selectingValue[index_5] = valueNew_11;
+    if (valueNew_11 !== selecting[0]) setSelecting([...selectingValue]);
+  };
+  const onDoneSelecting = (valueNew_12, selectingNew) => {
     // AutoCloseOnLast
     if (autoCloseOnLast && refs.mode.current === 'select') {
       if (['hour', 'minute', 'second'].includes(selectingNew)) {
         if (selectingNew === 'second' || selectingNew === 'minute' && !second || selectingNew === 'hour' && !minute) return onOk();
       }
     }
-  }, [mode, autoCloseOnLast, hour, minute, second]);
-  const onMode = _react.default.useCallback(() => {
+  };
+  const onMode = () => {
     setMode((version === 'mobile' ? openMobile : openDesktop) || 'select');
-  }, [version, openMobile, openDesktop]);
-  const onModeSwitch = _react.default.useCallback(() => {
+  };
+  const onModeSwitch = () => {
     setMode(refs.mode.current === 'select' ? 'input' : 'select');
-  }, []);
-  const onOpen = _react.default.useCallback(() => {
+  };
+  const onOpen = () => {
     onMode();
     setOpen(previous => !previous);
-  }, [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(() => {
-    const valueNew = inputToValue();
+  };
+  const onReset = () => {
+    const valueNew_13 = inputToValue();
 
     // Update value
-    onUpdate(valueNew);
+    onUpdate(valueNew_13);
 
     // Update dayTime
-    setDayTime(valueNew.map(item => (0, _date.format)(item, 'a')));
-  }, [input]);
-  const onToday = _react.default.useCallback(event => {
-    const valueNew = [new _date.OnesyDate()];
-    if (range) valueNew.push(new _date.OnesyDate());
+    setDayTime(valueNew_13.map(item_7 => (0, _date.format)(item_7, 'a')));
+  };
+  const onToday = event_0 => {
+    const valueNew_14 = [new _date.OnesyDate()];
+    if (range) valueNew_14.push(new _date.OnesyDate());
 
     // Update value
-    onUpdate(valueNew);
+    onUpdate(valueNew_14);
 
     // Update input
-    setInput(valueToInput(valueNew));
+    setInput(valueToInput(valueNew_14));
 
     // Update dayTime
-    setDayTime(valueNew.map(item => (0, _date.format)(item, 'a')));
-    onClose(event);
-    if ((0, _utils.is)('function', onToday_)) onToday_(event);
-  }, [input, range, onToday_]);
-  const onClear = _react.default.useCallback(event => {
-    const valueNew = [];
+    setDayTime(valueNew_14.map(item_8 => (0, _date.format)(item_8, 'a')));
+    onClose(event_0);
+    if ((0, _utils.is)('function', onToday_)) onToday_(event_0);
+  };
+  const onClear = event_1 => {
+    const valueNew_15 = [];
 
     // Update value
-    onUpdate(valueNew);
+    onUpdate(valueNew_15);
 
     // Update input
-    setInput(valueToInput(valueNew));
+    setInput(valueToInput(valueNew_15));
 
     // Update dayTime
-    setDayTime(valueNew.map(item => (0, _date.format)(item, 'a')));
-    onClose(event);
-    if ((0, _utils.is)('function', onClear_)) onClear_(event);
-  }, [onClear_]);
-  const onOk = _react.default.useCallback(event => {
+    setDayTime(valueNew_15.map(item_9 => (0, _date.format)(item_9, 'a')));
+    onClose(event_1);
+    if ((0, _utils.is)('function', onClear_)) onClear_(event_1);
+  };
+  const onOk = event_2 => {
     // Error
     errorCheck();
 
@@ -642,27 +595,27 @@ const TimePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
     setInput(valueToInput(refs.value.current));
 
     // Update dayTime
-    setDayTime(refs.value.current.map(item => (0, _date.format)(item, 'a')));
-    onClose(event);
-    if ((0, _utils.is)('function', onOk_)) onOk_(event);
-  }, [value, onOk_]);
-  const onCancel = _react.default.useCallback(event => {
+    setDayTime(refs.value.current.map(item_10 => (0, _date.format)(item_10, 'a')));
+    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_]);
+    onClose(event_3);
+    if ((0, _utils.is)('function', onCancel_)) onCancel_(event_3);
+  };
   const mask = [];
   let placeholder = '';
   if (hour) {
     if (format === '12') {
       mask.push({
         pattern: '[0-1]'
-      }, (item, result, valueInput) => /^([0][0-9]|1[0-2]).*/.test(valueInput));
+      }, (item_11, result_1, valueInput) => /^([0][0-9]|1[0-2]).*/.test(valueInput));
     }
     if (format === '24') {
       mask.push({
         pattern: '[0-2]'
-      }, (item, result, valueInput) => /^([01][0-9]|2[0-3]).*/.test(valueInput));
+      }, (item_12, result_2, valueInput_0) => /^([01][0-9]|2[0-3]).*/.test(valueInput_0));
     }
     placeholder += 'hh';
     if (minute || second) {
@@ -711,14 +664,14 @@ const TimePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
   const iconButtonProps = _objectSpread({
     size
   }, IconButtonProps);
-  const clock = (index = 0) => /*#__PURE__*/_react.default.createElement(Clock, (0, _extends2.default)({
+  const clock = (index_6 = 0) => /*#__PURE__*/_react.default.createElement(Clock, (0, _extends2.default)({
     size: size,
     format: format,
-    value: value[index] || new _date.OnesyDate(),
-    dayTime: dayTime[index] || (0, _date.format)(new _date.OnesyDate(), 'a'),
-    selecting: selecting[index],
-    onChange: valueNew => onChangeClock(valueNew, index),
-    onChangeSelecting: valueNew => onChangeSelectingClock(valueNew, index),
+    value: value[index_6] || new _date.OnesyDate(),
+    dayTime: dayTime[index_6] || (0, _date.format)(new _date.OnesyDate(), 'a'),
+    selecting: selecting[index_6],
+    onChange: valueNew_16 => onChangeClock(valueNew_16, index_6),
+    onChangeSelecting: valueNew_17 => onChangeSelectingClock(valueNew_17, index_6),
     onDoneSelecting: onDoneSelecting,
     renderValue: renderValue,
     valid: valid,
@@ -740,7 +693,7 @@ const TimePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
       disabled: disabled || readOnly
     }, iconButtonProps), /*#__PURE__*/_react.default.createElement(Icon_, IconProps));
   }
-  const makeInputs = (index = 0) => {
+  const makeInputs = (index_7 = 0) => {
     const inputProps = _objectSpread({
       tonal,
       color,
@@ -775,19 +728,19 @@ const TimePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
     const inputs = [];
     if (hour) {
       buttons.push(/*#__PURE__*/_react.default.createElement(Button, (0, _extends2.default)({}, buttonProps_, {
-        selected: selecting[index] === 'hour',
-        onClick: () => onUpdateSelecting('hour', index)
-      }), (0, _date.format)(value[index], format === '12' ? 'hh' : 'HH')));
+        selected: selecting[index_7] === 'hour',
+        onClick: () => onUpdateSelecting('hour', index_7)
+      }), (0, _date.format)(value[index_7], format === '12' ? 'hh' : 'HH')));
       inputs.push(/*#__PURE__*/_react.default.createElement(AdvancedTextField, (0, _extends2.default)({
         helperText: l('Hour'),
-        value: (0, _date.format)(value[index], format === '12' ? 'hh' : 'HH'),
-        onChange: valueNew => onInputModalChange(valueNew, 'hour', index),
+        value: (0, _date.format)(value[index_7], format === '12' ? 'hh' : 'HH'),
+        onChange: valueNew_18 => onInputModalChange(valueNew_18, 'hour', index_7),
         placeholder: "00",
         mask: [...(format === '12' ? [{
           pattern: '[0-1]'
-        }, (item, result, valueInput) => /^([0][0-9]|1[0-2]).*/.test(valueInput)] : [{
+        }, (item_13, result_3, valueInput_1) => /^([0][0-9]|1[0-2]).*/.test(valueInput_1)] : [{
           pattern: '[0-2]'
-        }, (item, result, valueInput) => /^([01][0-9]|2[0-3]).*/.test(valueInput)])]
+        }, (item_14, result_4, valueInput_2) => /^([01][0-9]|2[0-3]).*/.test(valueInput_2)])]
       }, inputProps)));
     }
     if (minute) {
@@ -796,13 +749,13 @@ const TimePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
         inputs.push(separator);
       }
       buttons.push(/*#__PURE__*/_react.default.createElement(Button, (0, _extends2.default)({}, buttonProps_, {
-        selected: selecting[index] === 'minute',
-        onClick: () => onUpdateSelecting('minute', index)
-      }), (0, _date.format)(value[index], 'mm')));
+        selected: selecting[index_7] === 'minute',
+        onClick: () => onUpdateSelecting('minute', index_7)
+      }), (0, _date.format)(value[index_7], 'mm')));
       inputs.push(/*#__PURE__*/_react.default.createElement(AdvancedTextField, (0, _extends2.default)({
         helperText: l('Minute'),
-        value: (0, _date.format)(value[index], 'mm'),
-        onChange: valueNew => onInputModalChange(valueNew, 'minute', index),
+        value: (0, _date.format)(value[index_7], 'mm'),
+        onChange: valueNew_19 => onInputModalChange(valueNew_19, 'minute', index_7),
         placeholder: "00",
         mask: [{
           pattern: '[0-5]'
@@ -817,13 +770,13 @@ const TimePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
         inputs.push(separator);
       }
       buttons.push(/*#__PURE__*/_react.default.createElement(Button, (0, _extends2.default)({}, buttonProps_, {
-        selected: selecting[index] === 'second',
-        onClick: () => onUpdateSelecting('second', index)
-      }), (0, _date.format)(value[index], 'ss')));
+        selected: selecting[index_7] === 'second',
+        onClick: () => onUpdateSelecting('second', index_7)
+      }), (0, _date.format)(value[index_7], 'ss')));
       inputs.push(/*#__PURE__*/_react.default.createElement(AdvancedTextField, (0, _extends2.default)({
         helperText: l('Second'),
-        value: (0, _date.format)(value[index], 'ss'),
-        onChange: valueNew => onInputModalChange(valueNew, 'second', index),
+        value: (0, _date.format)(value[index_7], 'ss'),
+        onChange: valueNew_20 => onInputModalChange(valueNew_20, 'second', index_7),
         placeholder: "00",
         mask: [{
           pattern: '[0-5]'
@@ -842,8 +795,8 @@ const TimePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
   });
   const orientationValue = mode === 'select' ? orientation : 'vertical';
   const timeValue = range ? [0, 1] : [0];
-  const elementValues = timeValue.map((item, index) => /*#__PURE__*/_react.default.createElement(Line, {
-    key: index,
+  const elementValues = timeValue.map((item_15, index_8) => /*#__PURE__*/_react.default.createElement(Line, {
+    key: index_8,
     gap: 4.5,
     direction: orientationValue === 'vertical' ? 'column' : 'row',
     align: "center",
@@ -863,12 +816,12 @@ const TimePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
     align: "center",
     justify: "center",
     fullWidth: true
-  }, makeInputs(index)), format === '12' && /*#__PURE__*/_react.default.createElement(ToggleButtons, (0, _extends2.default)({
+  }, makeInputs(index_8)), format === '12' && /*#__PURE__*/_react.default.createElement(ToggleButtons, (0, _extends2.default)({
     version: "outlined",
     size: size,
     orientation: orientationValue,
-    value: dayTime[index] || (0, _date.format)(new _date.OnesyDate(), 'a'),
-    onChange: valueNew => updateDayTime(valueNew, index),
+    value: dayTime[index_8] || (0, _date.format)(new _date.OnesyDate(), 'a'),
+    onChange: valueNew_21 => updateDayTime(valueNew_21, index_8),
     select: "single",
     unselect: false
   }, ToggleButtonsProps, {
@@ -877,7 +830,7 @@ const TimePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
     value: "am"
   }, toggleButtonProps), "AM"), /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({
     value: "pm"
-  }, toggleButtonProps), "PM"))), mode === 'select' && clock(index)));
+  }, toggleButtonProps), "PM"))), mode === 'select' && clock(index_8)));
   const heading = mode === 'select' ? !range ? selectModalSubHeadingText : selectModalSubHeadingTextRange : !range ? inputModalSubHeadingText : inputModalSubHeadingTextRange;
   const actions = /*#__PURE__*/_react.default.createElement(Line, {
     direction: "row",
@@ -961,11 +914,11 @@ const TimePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
   }, WrapperProps, {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TimePicker', theme) && ['onesy-TimePicker-root', `onesy-TimePicker-version-${version}`, `onesy-TimePicker-size-${size}`, WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.className, readOnly && `onesy-TimePicker-read-only`, disabled && `onesy-TimePicker-disabled`, fullWidth && 'onesy-full-width'], className, classes.root])
   }), /*#__PURE__*/_react.default.createElement(AdvancedTextField, (0, _extends2.default)({
-    rootRef: item => {
+    rootRef: item_16 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_16);else ref.current = item_16;
       }
-      refs.root.current = item;
+      refs.root.current = item_16;
     },
     tonal: tonal,
     color: color,