@onesy/ui-react 1.0.180 → 1.0.182

package/esm/DatePicker/DatePicker.js

@@ -223,17 +223,22 @@ const DatePicker = 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((calendarDefault !== undefined ? calendarDefault : calendar_) || new OnesyDate());
   const [open, setOpen] = React.useState(false);
   const [mode, setMode] = React.useState((touch ? openMobile : 'select') || 'select');
   const [error, setError] = React.useState(false);
-  const valueToInput = (valueNew = value) => {
+  const valueToInput = (valueNew_0 = value) => {
     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_0 => `${format(item_0, 'DD', {
       l
@@ -253,24 +258,24 @@ const DatePicker = props__ => {
     if (touch) version = 'mobile';else version = 'desktop';
   }
   const onUpdateValue = valueNew_ => {
-    const valueNew_0 = is('array', valueNew_) ? valueNew_ : [valueNew_];
+    const valueNew_1 = onResolveValue(valueNew_);
     const dateNow = new OnesyDate();
 
     // Update value
-    setValue(valueNew_0);
+    setValue(valueNew_1);
 
     // Update calendar
-    onUpdateCalendar(valueNew_0[0] || dateNow);
+    onUpdateCalendar(valueNew_1[0] || dateNow);
 
     // Update input
-    setInput(valueToInput(valueNew_0));
+    setInput(valueToInput(valueNew_1));
 
     // Update input modal
-    setInputModal(valueToInput(valueNew_0));
+    setInputModal(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
@@ -281,22 +286,22 @@ const DatePicker = 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_]);
 
   // Calendar
   React.useEffect(() => {
     if (calendar_ !== undefined && calendar_ !== calendar) setCalendar(calendar_);
   }, [calendar_]);
-  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 onUpdateCalendar = valueNew_3 => {
+  const onUpdateCalendar = valueNew_4 => {
     // Inner update
-    if (!props.hasOwnProperty('calendar')) setCalendar(valueNew_3);
-    if (is('function', onChangeCalendar)) onChangeCalendar(valueNew_3);
+    if (!props.hasOwnProperty('calendar')) setCalendar(valueNew_4);
+    if (is('function', onChangeCalendar)) onChangeCalendar(valueNew_4);
   };
 
   // Update only internally, without using onChange
@@ -304,24 +309,24 @@ const DatePicker = props__ => {
   // only use onChange on
   // input change, or ok
   const onCalendarChange = valueNew__0 => {
-    const valueNew_4 = is('array', valueNew__0) ? valueNew__0 : [valueNew__0];
-    if (valueNew_4 !== value) {
-      (!actions_ ? onUpdate : setValue)(valueNew_4);
+    const valueNew_5 = onResolveValue(valueNew__0);
+    if (valueNew_5 !== value) {
+      (!actions_ ? onUpdate : setValue)(valueNew_5);
 
       // Update input modal
-      setInputModal(valueToInput(valueNew_4));
+      setInputModal(valueToInput(valueNew_5));
     }
   };
-  const onCalendarChangeCalendar = valueNew_5 => {
-    if (valueNew_5 !== calendar) onUpdateCalendar(valueNew_5);
+  const onCalendarChangeCalendar = valueNew_6 => {
+    if (valueNew_6 !== calendar) onUpdateCalendar(valueNew_6);
   };
   const inputToValue = (valueNew__1 = input) => {
-    let valueNew_6 = valueNew__1;
-    let [from_0, to_0] = valueNew_6.split(SEPARATOR);
+    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, false);
-    valueNew_6 = [from_0, to_0].filter(Boolean);
-    return valueNew_6;
+    valueNew_7 = [from_0, to_0].filter(Boolean);
+    return valueNew_7;
   };
   const onOpen = () => {
     onMode();
@@ -332,67 +337,67 @@ const DatePicker = props__ => {
     if (is('function', onClose_)) onClose_(event);
   };
   const onReset = () => {
-    let valueNew_7 = inputToValue();
-    const isValid = valueNew_7 && valueNew_7?.[0]?.valid;
+    let valueNew_8 = inputToValue();
+    const isValid = valueNew_8 && valueNew_8?.[0]?.valid;
     if (isValid) {
       // Update value
-      onUpdate(valueNew_7);
+      onUpdate(valueNew_8);
 
       // Update calendar
-      onUpdateCalendar(valueNew_7[0]);
+      onUpdateCalendar(valueNew_8[0]);
 
       // Update input modal
       setInputModal(input);
     } else {
       const dateNow_0 = new OnesyDate();
-      valueNew_7 = [];
+      valueNew_8 = [];
 
       // Update value
-      onUpdate(valueNew_7);
+      onUpdate(valueNew_8);
 
       // Update calendar
       onUpdateCalendar(dateNow_0);
 
       // Update input
-      setInput(valueToInput(valueNew_7));
+      setInput(valueToInput(valueNew_8));
 
       // Update input modal
-      setInputModal(valueToInput(valueNew_7));
+      setInputModal(valueToInput(valueNew_8));
     }
   };
   const onToday = event_0 => {
-    const valueNew_8 = [startOf(new OnesyDate(), 'day')];
-    if (range) valueNew_8.push(endOf(new OnesyDate(), 'day'));
+    const valueNew_9 = [startOf(new OnesyDate(), 'day')];
+    if (range) valueNew_9.push(endOf(new OnesyDate(), 'day'));
 
     // Update value
-    onUpdate(valueNew_8);
+    onUpdate(valueNew_9);
 
     // Update calendar
-    onUpdateCalendar(valueNew_8[0]);
+    onUpdateCalendar(valueNew_9[0]);
 
     // Update input
-    setInput(valueToInput(valueNew_8));
+    setInput(valueToInput(valueNew_9));
 
     // Update input modal
-    setInputModal(valueToInput(valueNew_8));
+    setInputModal(valueToInput(valueNew_9));
     onClose(event_0);
     if (is('function', onToday_)) onToday_(event_0);
   };
   const onClear = event_1 => {
     const dateNow_1 = new OnesyDate();
-    const valueNew_9 = [];
+    const valueNew_10 = [];
 
     // Update value
-    onUpdate(valueNew_9);
+    onUpdate(valueNew_10);
 
     // Update calendar
     onUpdateCalendar(dateNow_1);
 
     // Update input
-    setInput(valueToInput(valueNew_9));
+    setInput(valueToInput(valueNew_10));
 
     // Update input modal
-    setInputModal(valueToInput(valueNew_9));
+    setInputModal(valueToInput(valueNew_10));
     onClose(event_1);
     if (is('function', onClear_)) onClear_(event_1);
   };
@@ -428,26 +433,26 @@ const DatePicker = props__ => {
     }
     return true;
   };
-  const textToOnesyDate = (valueNew_10, start = true) => {
-    const [valueDay, valueMonth, valueYear] = (valueNew_10 || '').split('/');
+  const textToOnesyDate = (valueNew_11, start = true) => {
+    const [valueDay, valueMonth, valueYear] = (valueNew_11 || '').split('/');
     const onesyDate_0 = new OnesyDate(new Date(`${valueMonth}/${valueDay}/${valueYear}`));
     return start ? startOf(onesyDate_0, 'day') : endOf(onesyDate_0, 'day');
   };
   const onInputChange = valueNew__2 => {
-    const valueNew_11 = inputToValue(valueNew__2);
-    const validValues = valueNew_11.every(item_2 => item_2.valid);
+    const valueNew_12 = inputToValue(valueNew__2);
+    const validValues = valueNew_12.every(item_2 => item_2.valid);
 
     // Only update values if input is valid
     // format used to make the value
     if (validValues) {
       // Error
-      errorCheck(valueNew_11);
+      errorCheck(valueNew_12);
 
       // Update value
-      onUpdate(valueNew_11);
+      onUpdate(valueNew_12);
 
       // Update calendar
-      onUpdateCalendar(valueNew_11[0]);
+      onUpdateCalendar(valueNew_12[0]);
     }
     if (!valueNew__2) {
       onUpdate([null, null]);
@@ -457,20 +462,20 @@ const DatePicker = props__ => {
     setInput(valueNew__2);
   };
   const onInputChangeModal = valueNew__3 => {
-    const valueNew_12 = inputToValue(valueNew__3);
-    const validValues_0 = valueNew_12.every(item_3 => item_3.valid);
+    const valueNew_13 = inputToValue(valueNew__3);
+    const validValues_0 = valueNew_13.every(item_3 => item_3.valid);
 
     // Only update values if input is valid
     // format used to make the value
     if (validValues_0) {
       // Error
-      errorCheck(valueNew_12);
+      errorCheck(valueNew_13);
 
       // Update value
-      onUpdate(valueNew_12);
+      onUpdate(valueNew_13);
 
       // Update calendar
-      onUpdateCalendar(valueNew_12[0]);
+      onUpdateCalendar(valueNew_13[0]);
     }
 
     // Update input for free typing
@@ -729,6 +734,8 @@ const DatePicker = props__ => {
   }));
   const desktop = /*#__PURE__*/_jsx(Calendar, _objectSpread(_objectSpread(_objectSpread({
     value: value,
+    tonal: tonal,
+    color: color,
     calendar: calendar,
     onChange: onCalendarChange,
     onChangeCalendar: onCalendarChangeCalendar,

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/RoundMeter/RoundMeter.js

@@ -14,6 +14,7 @@ import { angleToCoordinates, staticClassName, toNumber } from '../utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
+    position: 'relative',
     width: '100vw'
   },
   size_small: {

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: {