@onesy/ui-react 1.0.181 → 1.0.182

package/esm/DateTimePicker/DateTimePicker.js

@@ -148,18 +148,23 @@ const DateTimePicker = props__ => {
   const touch = useMediaQuery('(pointer: coarse)', {
     element: refs.root.current
   });
+  const onResolveValue = valueNew => {
+    const array = (is('array', valueNew) ? valueNew : [valueNew]).filter(Boolean);
+    const sorted = array.sort((a, b) => a?.milliseconds - b?.milliseconds);
+    return sorted;
+  };
   const [value, setValue] = React.useState(() => {
     const valueResult = (valueDefault !== undefined ? valueDefault : value_) || now && (range ? [new OnesyDate(), new OnesyDate()] : [new OnesyDate()]);
-    return (is('array', valueResult) ? valueResult : [valueResult]).filter(Boolean);
+    return onResolveValue(valueResult);
   });
   const [calendar, setCalendar] = React.useState(value[0]);
   const [open, setOpen] = React.useState(false);
   const [error, setError] = React.useState(false);
   const [tab, setTab] = React.useState('date');
   refs.value.current = value;
-  const valueToInput = (valueNew = refs.value.current) => {
+  const valueToInput = (valueNew_0 = refs.value.current) => {
     let result_0 = '';
-    const [from, to] = valueNew;
+    const [from, to] = valueNew_0;
     if (!(from || to)) return '';
     const method = item_0 => {
       let formatValue = `${formatMethod(item_0, 'DD')}/${formatMethod(item_0, 'MM')}/${formatMethod(item_0, 'YYYY')}`;
@@ -185,15 +190,16 @@ const DateTimePicker = props__ => {
   if (version === 'auto') {
     if (touch) version = 'mobile';else version = 'desktop';
   }
-  const onUpdateValue = valueNew_0 => {
-    setValue(valueNew_0);
+  const onUpdateValue = valueNew_ => {
+    const valueNew_1 = onResolveValue(valueNew_);
+    setValue(valueNew_1);
 
     // Update input
-    setInput(valueToInput(valueNew_0));
+    setInput(valueToInput(valueNew_1));
   };
-  const errorCheck = (valueNew_1 = value) => {
+  const errorCheck = (valueNew_2 = value) => {
     // Error
-    setError((valueNew_1 || []).some((item_1, index) => !valid(item_1)));
+    setError((valueNew_2 || []).some((item_1, index) => !valid(item_1)));
   };
 
   // Init
@@ -204,12 +210,12 @@ const DateTimePicker = props__ => {
 
   // Value
   React.useEffect(() => {
-    if (value_ !== undefined && value_ !== value) onUpdateValue((is('array', value_) ? value_ : [value_]).filter(Boolean));
+    if (value_ !== undefined && value_ !== value) onUpdateValue(value_);
   }, [value_]);
-  const onUpdate = valueNew_2 => {
+  const onUpdate = valueNew_3 => {
     // Inner update
-    if (!props.hasOwnProperty('value')) setValue(valueNew_2);
-    if (is('function', onChange)) onChange(!range ? valueNew_2[0] : valueNew_2);
+    if (!props.hasOwnProperty('value')) setValue(valueNew_3);
+    if (is('function', onChange)) onChange(!range ? valueNew_3[0] : valueNew_3);
   };
   const onPickSwitch = () => {
     setTab(previous => previous === 'date' ? 'time' : 'date');
@@ -219,15 +225,15 @@ const DateTimePicker = props__ => {
   // since it might be canceled
   // only use onChange on
   // input change, or ok
-  const onPickerChange = valueNew_ => {
-    const valueNew_3 = is('array', valueNew_) ? valueNew_ : [valueNew_];
-    if (valueNew_3 !== value) setValue(valueNew_3);
+  const onPickerChange = valueNew__0 => {
+    const valueNew_4 = onResolveValue(valueNew__0);
+    if (valueNew_4 !== value) setValue(valueNew_4);
   };
-  const onChangeCalendar = valueNew_4 => {
-    if (valueNew_4 !== calendar) setCalendar(valueNew_4);
+  const onChangeCalendar = valueNew_5 => {
+    if (valueNew_5 !== calendar) setCalendar(valueNew_5);
   };
-  const textToOnesyDate = valueNew_5 => {
-    const [date, ...valueOther] = valueNew_5.split(' ');
+  const textToOnesyDate = valueNew_6 => {
+    const [date, ...valueOther] = valueNew_6.split(' ');
     const time = valueOther.join(' ');
     const [valueDay, valueMonth, valueYear] = (date || '').split('/');
     const [times, dayTime] = (time || '').split(' ');
@@ -255,73 +261,73 @@ const DateTimePicker = props__ => {
     }
     return onesyDate;
   };
-  const inputToValue = (valueNew__0 = input) => {
-    let valueNew_6 = valueNew__0;
-    let [from_0, to_0] = valueNew_6.split(SEPARATOR);
+  const inputToValue = (valueNew__1 = input) => {
+    let valueNew_7 = valueNew__1;
+    let [from_0, to_0] = valueNew_7.split(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;
+    valueNew_7 = [from_0, to_0].filter(Boolean);
+    return valueNew_7;
   };
-  const onInputChange = valueNew__1 => {
-    const valueNew_7 = inputToValue(valueNew__1);
-    const validValues = valueNew_7.every(item_2 => item_2.valid);
+  const onInputChange = valueNew__2 => {
+    const valueNew_8 = inputToValue(valueNew__2);
+    const validValues = valueNew_8.every(item_2 => item_2.valid);
 
     // Only update values if input is valid
     // format used to make the value
     if (validValues) {
       // Error
-      errorCheck(valueNew_7);
+      errorCheck(valueNew_8);
 
       // Update value
-      onUpdate(valueNew_7);
+      onUpdate(valueNew_8);
 
       // Update calendar
-      setCalendar(valueNew_7[0]);
+      setCalendar(valueNew_8[0]);
     }
-    if (!valueNew__1) {
+    if (!valueNew__2) {
       onUpdate([null, null]);
     }
 
     // Update input for free typing
-    setInput(valueNew__1);
+    setInput(valueNew__2);
   };
   const onReset = () => {
-    let valueNew_8 = inputToValue();
-    const isValid = valueNew_8 && valueNew_8?.[0]?.valid;
+    let valueNew_9 = inputToValue();
+    const isValid = valueNew_9 && valueNew_9?.[0]?.valid;
     if (isValid) {
       // Update value
-      onUpdate(valueNew_8);
+      onUpdate(valueNew_9);
     } else {
-      valueNew_8 = [];
+      valueNew_9 = [];
 
       // Update value
-      onUpdate(valueNew_8);
+      onUpdate(valueNew_9);
 
       // Update input
-      setInput(valueToInput(valueNew_8));
+      setInput(valueToInput(valueNew_9));
     }
   };
   const onToday = event => {
-    const valueNew_9 = [new OnesyDate()];
-    if (range) valueNew_9.push(new OnesyDate());
+    const valueNew_10 = [new OnesyDate()];
+    if (range) valueNew_10.push(new OnesyDate());
 
     // Update value
-    onUpdate(valueNew_9);
+    onUpdate(valueNew_10);
 
     // Update input
-    setInput(valueToInput(valueNew_9));
+    setInput(valueToInput(valueNew_10));
     onClose(event);
     if (is('function', onToday_)) onToday_(event);
   };
   const onClear = event_0 => {
-    const valueNew_10 = [];
+    const valueNew_11 = [];
 
     // Update value
-    onUpdate(valueNew_10);
+    onUpdate(valueNew_11);
 
     // Update input
-    setInput(valueToInput(valueNew_10));
+    setInput(valueToInput(valueNew_11));
     onClose(event_0);
     if (is('function', onClear_)) onClear_(event_0);
   };

package/esm/Tab/Tab.js

@@ -32,7 +32,7 @@ const useStyle = styleMethod(theme => ({
     alignSelf: 'stretch',
     userSelect: 'none',
     cursor: 'pointer',
-    opacity: theme.palette.visual_contrast.default.opacity.secondary,
+    opacity: theme.palette.visual_contrast.default.opacity.tertiary,
     transition: theme.methods.transitions.make('opacity')
   },
   size_small: {

package/esm/TimePicker/TimePicker.js

@@ -327,9 +327,14 @@ const TimePicker = props__ => {
   const touch = useMediaQuery('(pointer: coarse)', {
     element: refs.root.current
   });
+  const onResolveValue = valueNew => {
+    const array = (is('array', valueNew) ? valueNew : [valueNew]).filter(Boolean);
+    const sorted = array.sort((a, b) => a?.milliseconds - b?.milliseconds);
+    return sorted;
+  };
   const [value, setValue] = React.useState(() => {
     const valueResult = (valueDefault !== undefined ? valueDefault : value_) || now && (range ? [new OnesyDate(), new OnesyDate()] : [new OnesyDate()]);
-    return (is('array', valueResult) ? valueResult : [valueResult]).filter(Boolean);
+    return onResolveValue(valueResult);
   });
   const [selecting, setSelecting] = React.useState(() => {
     const valueResult_0 = (selectingDefault !== undefined ? selectingDefault : selecting_) || ['hour', 'hour'];
@@ -345,9 +350,9 @@ const TimePicker = props__ => {
   refs.value.current = value;
   refs.mode.current = mode;
   refs.dayTime.current = dayTime;
-  const valueToInput = (valueNew = refs.value.current) => {
+  const valueToInput = (valueNew_0 = refs.value.current) => {
     let result_0 = '';
-    const [from, to] = is('array', valueNew) ? valueNew : [valueNew];
+    const [from, to] = is('array', valueNew_0) ? valueNew_0 : [valueNew_0];
     if (!(from || to)) return '';
     const method = item_1 => {
       let formatValue = '';
@@ -367,20 +372,20 @@ const TimePicker = props__ => {
     if (touch) version = 'mobile';else version = 'desktop';
   }
   const onUpdateValue = valueNew_ => {
-    const valueNew_0 = is('array', valueNew_) ? valueNew_ : [valueNew_];
+    const valueNew_1 = onResolveValue(valueNew_);
 
     // Update value
-    setValue(valueNew_0);
+    setValue(valueNew_1);
 
     // Update input
-    setInput(valueToInput(valueNew_0));
+    setInput(valueToInput(valueNew_1));
 
     // Update dayTime
-    setDayTime(valueNew_0.map(item_2 => formatDate(item_2, 'a')));
+    setDayTime(valueNew_1.map(item_2 => formatDate(item_2, 'a')));
   };
-  const errorCheck = (valueNew_1 = value) => {
+  const errorCheck = (valueNew_2 = value) => {
     // Error
-    setError((valueNew_1 || []).some((item_3, index) => !valid(item_3)));
+    setError((valueNew_2 || []).some((item_3, index) => !valid(item_3)));
   };
 
   // Init
@@ -391,22 +396,22 @@ const TimePicker = props__ => {
 
   // Value
   React.useEffect(() => {
-    if (value_ !== undefined && value_ !== value) onUpdateValue((is('array', value_) ? value_ : [value_]).filter(Boolean));
+    if (value_ !== undefined && value_ !== value) onUpdateValue(value_);
   }, [value_]);
   const onUpdate = valueNew__0 => {
-    const valueNew_2 = resolve(valueNew__0);
+    const valueNew_3 = resolve(valueNew__0);
 
     // Inner update
-    if (!props.hasOwnProperty('value')) setValue(valueNew_2);
-    if (is('function', onChange)) onChange(!range ? valueNew_2[0] : valueNew_2);
+    if (!props.hasOwnProperty('value')) setValue(valueNew_3);
+    if (is('function', onChange)) onChange(!range ? valueNew_3[0] : valueNew_3);
   };
   const onUpdateSelecting = (valueNew__1, index_0) => {
-    const valueNew_3 = [...selecting];
-    valueNew_3[index_0] = valueNew__1;
+    const valueNew_4 = [...selecting];
+    valueNew_4[index_0] = valueNew__1;
 
     // Inner update
-    if (!props.hasOwnProperty('selecting')) setSelecting(valueNew_3);
-    if (is('function', onChangeSelecting)) onChangeSelecting(valueNew_3);
+    if (!props.hasOwnProperty('selecting')) setSelecting(valueNew_4);
+    if (is('function', onChangeSelecting)) onChangeSelecting(valueNew_4);
   };
   const valid = (...args) => {
     if (is('function', valid_)) return valid_(...args);
@@ -420,8 +425,8 @@ const TimePicker = props__ => {
     }
     return true;
   };
-  const textToOnesyDate = valueNew_4 => {
-    const [times, dayTime_] = (valueNew_4 || '').split(' ');
+  const textToOnesyDate = valueNew_5 => {
+    const [times, dayTime_] = (valueNew_5 || '').split(' ');
     const values = times.split(':');
     let valueTime;
     let onesyDate_0 = new OnesyDate();
@@ -445,15 +450,15 @@ const TimePicker = props__ => {
     }
     return onesyDate_0;
   };
-  const onInputModalChange = (valueNew_5, unit, index_1) => {
-    let valueTime_0 = valueNew_5;
+  const onInputModalChange = (valueNew_6, unit, index_1) => {
+    let valueTime_0 = valueNew_6;
     if (is('string', valueTime_0) && valueTime_0.startsWith('0')) valueTime_0 = valueTime_0.slice(1);
     valueTime_0 = +valueTime_0;
     value[index_1] = set(valueTime_0, unit || selecting[index_1], value[index_1]);
     (!actions_ ? onUpdate : setValue)(resolve(value));
   };
-  const resolve = (valueNew_6 = refs.value.current, dayTimeNew = refs.dayTime.current) => {
-    const values_0 = valueNew_6.filter(Boolean).map((item_4, index_2) => {
+  const resolve = (valueNew_7 = refs.value.current, dayTimeNew = refs.dayTime.current) => {
+    const values_0 = onResolveValue(valueNew_7).map((item_4, index_2) => {
       // Resolve the range value
       const valueHour = item_4.hour;
       if (format === '12') {
@@ -465,35 +470,35 @@ const TimePicker = props__ => {
     return values_0;
   };
   const updateDayTime = (valueNew__2, index_3) => {
-    const valueNew_7 = valueNew__2[0];
+    const valueNew_8 = valueNew__2[0];
 
     // Update dayTime
     const dayTimeNew_0 = [...dayTime];
-    dayTimeNew_0[index_3] = valueNew_7;
+    dayTimeNew_0[index_3] = valueNew_8;
     refs.dayTime.current = dayTimeNew_0;
     setDayTime(dayTimeNew_0);
     (!actions_ ? onUpdate : setValue)(resolve(refs.value.current));
   };
   const inputToValue = (valueNew__3 = input) => {
-    let valueNew_8 = valueNew__3;
-    let [from_0, to_0] = valueNew_8.split(SEPARATOR);
+    let valueNew_9 = valueNew__3;
+    let [from_0, to_0] = valueNew_9.split(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?.valid);
-    return valueNew_8;
+    valueNew_9 = [from_0, to_0].filter(Boolean).filter(item_5 => item_5?.valid);
+    return valueNew_9;
   };
   const onInputChange = valueNew__4 => {
-    const valueNew_9 = inputToValue(valueNew__4);
-    const validValues = valueNew_9.every(item_6 => item_6.valid);
+    const valueNew_10 = inputToValue(valueNew__4);
+    const validValues = valueNew_10.every(item_6 => item_6.valid);
 
     // Only update values if input is valid
     // format used to make the value
     if (validValues) {
       // Error
-      errorCheck(valueNew_9);
+      errorCheck(valueNew_10);
 
       // Update value
-      onUpdate(valueNew_9);
+      onUpdate(valueNew_10);
     }
     if (!valueNew__4) {
       onUpdate([null, null]);
@@ -503,21 +508,21 @@ const TimePicker = props__ => {
     setInput(valueNew__4);
   };
   const onChangeClock = (valueNew__5, index_4 = 0) => {
-    const valueNew_10 = [...value];
+    const valueNew_11 = [...value];
     if (valueNew__5 !== value[index_4]) {
-      valueNew_10[index_4] = valueNew__5;
-      (!actions_ ? onUpdate : setValue)(resolve(valueNew_10));
+      valueNew_11[index_4] = valueNew__5;
+      (!actions_ ? onUpdate : setValue)(resolve(valueNew_11));
 
       // Error
-      errorCheck(valueNew_10);
+      errorCheck(valueNew_11);
     }
   };
-  const onChangeSelectingClock = (valueNew_11, index_5 = 0) => {
+  const onChangeSelectingClock = (valueNew_12, index_5 = 0) => {
     const selectingValue = selecting;
-    selectingValue[index_5] = valueNew_11;
-    if (valueNew_11 !== selecting[0]) setSelecting([...selectingValue]);
+    selectingValue[index_5] = valueNew_12;
+    if (valueNew_12 !== selecting[0]) setSelecting([...selectingValue]);
   };
-  const onDoneSelecting = (valueNew_12, selectingNew) => {
+  const onDoneSelecting = (valueNew_13, selectingNew) => {
     // AutoCloseOnLast
     if (autoCloseOnLast && refs.mode.current === 'select') {
       if (['hour', 'minute', 'second'].includes(selectingNew)) {
@@ -540,40 +545,40 @@ const TimePicker = props__ => {
     if (is('function', onClose_)) onClose_(event);
   };
   const onReset = () => {
-    const valueNew_13 = inputToValue();
+    const valueNew_14 = inputToValue();
 
     // Update value
-    onUpdate(valueNew_13);
+    onUpdate(valueNew_14);
 
     // Update dayTime
-    setDayTime(valueNew_13.map(item_7 => formatDate(item_7, 'a')));
+    setDayTime(valueNew_14.map(item_7 => formatDate(item_7, 'a')));
   };
   const onToday = event_0 => {
-    const valueNew_14 = [new OnesyDate()];
-    if (range) valueNew_14.push(new OnesyDate());
+    const valueNew_15 = [new OnesyDate()];
+    if (range) valueNew_15.push(new OnesyDate());
 
     // Update value
-    onUpdate(valueNew_14);
+    onUpdate(valueNew_15);
 
     // Update input
-    setInput(valueToInput(valueNew_14));
+    setInput(valueToInput(valueNew_15));
 
     // Update dayTime
-    setDayTime(valueNew_14.map(item_8 => formatDate(item_8, 'a')));
+    setDayTime(valueNew_15.map(item_8 => formatDate(item_8, 'a')));
     onClose(event_0);
     if (is('function', onToday_)) onToday_(event_0);
   };
   const onClear = event_1 => {
-    const valueNew_15 = [];
+    const valueNew_16 = [];
 
     // Update value
-    onUpdate(valueNew_15);
+    onUpdate(valueNew_16);
 
     // Update input
-    setInput(valueToInput(valueNew_15));
+    setInput(valueToInput(valueNew_16));
 
     // Update dayTime
-    setDayTime(valueNew_15.map(item_9 => formatDate(item_9, 'a')));
+    setDayTime(valueNew_16.map(item_9 => formatDate(item_9, 'a')));
     onClose(event_1);
     if (is('function', onClear_)) onClear_(event_1);
   };
@@ -663,8 +668,8 @@ const TimePicker = props__ => {
     value: value[index_6] || new OnesyDate(),
     dayTime: dayTime[index_6] || formatDate(new OnesyDate(), 'a'),
     selecting: selecting[index_6],
-    onChange: valueNew_16 => onChangeClock(valueNew_16, index_6),
-    onChangeSelecting: valueNew_17 => onChangeSelectingClock(valueNew_17, index_6),
+    onChange: valueNew_17 => onChangeClock(valueNew_17, index_6),
+    onChangeSelecting: valueNew_18 => onChangeSelectingClock(valueNew_18, index_6),
     onDoneSelecting: onDoneSelecting,
     renderValue: renderValue,
     valid: valid,
@@ -731,7 +736,7 @@ const TimePicker = props__ => {
       inputs.push(/*#__PURE__*/_jsx(AdvancedTextField, _objectSpread({
         helperText: l('Hour'),
         value: formatDate(value[index_7], format === '12' ? 'hh' : 'HH'),
-        onChange: valueNew_18 => onInputModalChange(valueNew_18, 'hour', index_7),
+        onChange: valueNew_19 => onInputModalChange(valueNew_19, 'hour', index_7),
         placeholder: "00",
         mask: [...(format === '12' ? [{
           pattern: '[0-1]'
@@ -753,7 +758,7 @@ const TimePicker = props__ => {
       inputs.push(/*#__PURE__*/_jsx(AdvancedTextField, _objectSpread({
         helperText: l('Minute'),
         value: formatDate(value[index_7], 'mm'),
-        onChange: valueNew_19 => onInputModalChange(valueNew_19, 'minute', index_7),
+        onChange: valueNew_20 => onInputModalChange(valueNew_20, 'minute', index_7),
         placeholder: "00",
         mask: [{
           pattern: '[0-5]'
@@ -775,7 +780,7 @@ const TimePicker = props__ => {
       inputs.push(/*#__PURE__*/_jsx(AdvancedTextField, _objectSpread({
         helperText: l('Second'),
         value: formatDate(value[index_7], 'ss'),
-        onChange: valueNew_20 => onInputModalChange(valueNew_20, 'second', index_7),
+        onChange: valueNew_21 => onInputModalChange(valueNew_21, 'second', index_7),
         placeholder: "00",
         mask: [{
           pattern: '[0-5]'
@@ -820,7 +825,7 @@ const TimePicker = props__ => {
         size: size,
         orientation: orientationValue,
         value: dayTime[index_8] || formatDate(new OnesyDate(), 'a'),
-        onChange: valueNew_21 => updateDayTime(valueNew_21, index_8),
+        onChange: valueNew_22 => updateDayTime(valueNew_22, index_8),
         select: "single",
         unselect: false
       }, ToggleButtonsProps), {}, {

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license UiReact v1.0.180
+/** @license UiReact v1.0.181
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/index.js

@@ -1,4 +1,4 @@
-/** @license UiReact v1.0.180
+/** @license UiReact v1.0.181
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onesy/ui-react",
-  "version": "1.0.181",
+  "version": "1.0.182",
   "description": "UI for React",
   "repository": "https://github.com/onesy-me/onesy.git",
   "author": "Lazar Erić <lazareric1@proton.me>",
@@ -31,7 +31,7 @@
   ],
   "peerDependencies": {
     "@onesy/icons-material-rounded-react": "^1.0.11",
-    "@onesy/style-react": "^1.0.7",
+    "@onesy/style-react": "^1.0.8",
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "react-router-dom": "7.9.6"