@onesy/ui-react 1.0.181 → 1.0.183

package/Calendar/Calendar.js

@@ -359,7 +359,8 @@ const Calendar = props__ => {
                   l
                 })]
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(CalendarMonth, _objectSpread(_objectSpread({
-                color: "default",
+                color: color,
+                tonal: tonal,
                 value: value,
                 calendar: calendarOnesyDate_0,
                 valid: valid,
@@ -420,7 +421,8 @@ const Calendar = props__ => {
                     l
                   })
                 }), /*#__PURE__*/(0, _jsxRuntime.jsx)(CalendarMonth, _objectSpread(_objectSpread({
-                  color: "default",
+                  color: color,
+                  tonal: tonal,
                   value: value,
                   calendar: calendarOnesyDate,
                   valid: valid,

package/CalendarMonth/CalendarMonth.js

@@ -588,7 +588,7 @@ const CalendarMonth = props__ => {
               // between
               day_3.is.between && !day_3.is.same && [!day_3.is.end && day_3.dayWeek !== 0 && !day_3.is.monthEnd && classes.dayStartSelection, !day_3.is.start && day_3.dayWeek !== 1 && !day_3.is.monthStart && classes.dayEndSelection]]),
               style: {
-                '--onesy-color': day_3.is.fromSelected ? colorSelectedTheme === null || colorSelectedTheme === void 0 ? void 0 : colorSelectedTheme.main : palette === null || palette === void 0 ? void 0 : palette.main
+                '--onesy-color': theme.methods.palette.color.alpha(day_3.is.fromSelected ? colorSelectedTheme === null || colorSelectedTheme === void 0 ? void 0 : colorSelectedTheme.main : palette === null || palette === void 0 ? void 0 : palette.main, 1)
               },
               children: (0, _utils.is)('function', renderDay) ? renderDay(day_3.onesyDate, propsDay, day_3, outside) : /*#__PURE__*/(0, _jsxRuntime.jsx)(PaginationItem, _objectSpread(_objectSpread(_objectSpread({
                 tonal: tonal,

package/DatePicker/DatePicker.js

@@ -231,17 +231,22 @@ const DatePicker = props__ => {
   const touch = (0, _useMediaQuery.default)('(pointer: coarse)', {
     element: refs.root.current
   });
+  const onResolveValue = valueNew => {
+    const array = ((0, _utils.is)('array', valueNew) ? valueNew : [valueNew]).filter(Boolean);
+    const sorted = array.sort((a, b) => (a === null || a === void 0 ? void 0 : a.milliseconds) - (b === null || b === void 0 ? void 0 : b.milliseconds));
+    return sorted;
+  };
   const [value, setValue] = _react.default.useState(() => {
     const valueResult = (valueDefault !== undefined ? valueDefault : value_) || now && (range ? [new _date.OnesyDate(), new _date.OnesyDate()] : [new _date.OnesyDate()]);
-    return ((0, _utils.is)('array', valueResult) ? valueResult : [valueResult]).filter(Boolean);
+    return onResolveValue(valueResult);
   });
   const [calendar, setCalendar] = _react.default.useState((calendarDefault !== undefined ? calendarDefault : calendar_) || new _date.OnesyDate());
   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 = (valueNew = value) => {
+  const valueToInput = (valueNew_0 = value) => {
     let result_0 = '';
-    const [from, to] = (0, _utils.is)('array', valueNew) ? valueNew : [valueNew];
+    const [from, to] = (0, _utils.is)('array', valueNew_0) ? valueNew_0 : [valueNew_0];
     if (!(from || to)) return '';
     const method = item_0 => `${(0, _date.format)(item_0, 'DD', {
       l
@@ -261,24 +266,24 @@ const DatePicker = props__ => {
     if (touch) version = 'mobile';else version = 'desktop';
   }
   const onUpdateValue = valueNew_ => {
-    const valueNew_0 = (0, _utils.is)('array', valueNew_) ? valueNew_ : [valueNew_];
+    const valueNew_1 = onResolveValue(valueNew_);
     const dateNow = new _date.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
@@ -289,22 +294,22 @@ const DatePicker = props__ => {
 
   // Value
   _react.default.useEffect(() => {
-    if (value_ !== undefined && value_ !== value) onUpdateValue(((0, _utils.is)('array', value_) ? value_ : [value_]).filter(Boolean));
+    if (value_ !== undefined && value_ !== value) onUpdateValue(value_);
   }, [value_]);
 
   // Calendar
   _react.default.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 ((0, _utils.is)('function', onChange)) onChange(!range ? valueNew_2[0] : valueNew_2);
+    if (!props.hasOwnProperty('value')) setValue(valueNew_3);
+    if ((0, _utils.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 ((0, _utils.is)('function', onChangeCalendar)) onChangeCalendar(valueNew_3);
+    if (!props.hasOwnProperty('calendar')) setCalendar(valueNew_4);
+    if ((0, _utils.is)('function', onChangeCalendar)) onChangeCalendar(valueNew_4);
   };
 
   // Update only internally, without using onChange
@@ -312,24 +317,24 @@ const DatePicker = props__ => {
   // only use onChange on
   // input change, or ok
   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);
+    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();
@@ -341,67 +346,67 @@ const DatePicker = props__ => {
   };
   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);
+    let valueNew_8 = inputToValue();
+    const isValid = valueNew_8 && ((_valueNew_ = valueNew_8) === null || _valueNew_ === void 0 || (_valueNew_ = _valueNew_[0]) === null || _valueNew_ === void 0 ? void 0 : _valueNew_.valid);
     if (isValid) {
       // Update value
-      onUpdate(valueNew_7);
+      onUpdate(valueNew_8);
 
       // Update calendar
-      onUpdateCalendar(valueNew_7[0]);
+      onUpdateCalendar(valueNew_8[0]);
 
       // Update input modal
       setInputModal(input);
     } else {
       const dateNow_0 = new _date.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 = [(0, _date.startOf)(new _date.OnesyDate(), 'day')];
-    if (range) valueNew_8.push((0, _date.endOf)(new _date.OnesyDate(), 'day'));
+    const valueNew_9 = [(0, _date.startOf)(new _date.OnesyDate(), 'day')];
+    if (range) valueNew_9.push((0, _date.endOf)(new _date.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 ((0, _utils.is)('function', onToday_)) onToday_(event_0);
   };
   const onClear = event_1 => {
     const dateNow_1 = new _date.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 ((0, _utils.is)('function', onClear_)) onClear_(event_1);
   };
@@ -437,26 +442,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 _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);
+    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]);
@@ -466,20 +471,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
@@ -738,6 +743,8 @@ const DatePicker = props__ => {
   }));
   const desktop = /*#__PURE__*/(0, _jsxRuntime.jsx)(Calendar, _objectSpread(_objectSpread(_objectSpread({
     value: value,
+    tonal: tonal,
+    color: color,
     calendar: calendar,
     onChange: onCalendarChange,
     onChangeCalendar: onCalendarChangeCalendar,

package/DateTimePicker/DateTimePicker.js

@@ -156,18 +156,23 @@ const DateTimePicker = props__ => {
   const touch = (0, _useMediaQuery.default)('(pointer: coarse)', {
     element: refs.root.current
   });
+  const onResolveValue = valueNew => {
+    const array = ((0, _utils.is)('array', valueNew) ? valueNew : [valueNew]).filter(Boolean);
+    const sorted = array.sort((a, b) => (a === null || a === void 0 ? void 0 : a.milliseconds) - (b === null || b === void 0 ? void 0 : b.milliseconds));
+    return sorted;
+  };
   const [value, setValue] = _react.default.useState(() => {
     const valueResult = (valueDefault !== undefined ? valueDefault : value_) || now && (range ? [new _date.OnesyDate(), new _date.OnesyDate()] : [new _date.OnesyDate()]);
-    return ((0, _utils.is)('array', valueResult) ? valueResult : [valueResult]).filter(Boolean);
+    return onResolveValue(valueResult);
   });
   const [calendar, setCalendar] = _react.default.useState(value[0]);
   const [open, setOpen] = _react.default.useState(false);
   const [error, setError] = _react.default.useState(false);
   const [tab, setTab] = _react.default.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 = `${(0, _date.format)(item_0, 'DD')}/${(0, _date.format)(item_0, 'MM')}/${(0, _date.format)(item_0, 'YYYY')}`;
@@ -193,15 +198,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
@@ -212,12 +218,12 @@ const DateTimePicker = props__ => {
 
   // Value
   _react.default.useEffect(() => {
-    if (value_ !== undefined && value_ !== value) onUpdateValue(((0, _utils.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 ((0, _utils.is)('function', onChange)) onChange(!range ? valueNew_2[0] : valueNew_2);
+    if (!props.hasOwnProperty('value')) setValue(valueNew_3);
+    if ((0, _utils.is)('function', onChange)) onChange(!range ? valueNew_3[0] : valueNew_3);
   };
   const onPickSwitch = () => {
     setTab(previous => previous === 'date' ? 'time' : 'date');
@@ -227,15 +233,15 @@ const DateTimePicker = props__ => {
   // since it might be canceled
   // only use onChange on
   // input change, or ok
-  const onPickerChange = valueNew_ => {
-    const valueNew_3 = (0, _utils.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(' ');
@@ -263,74 +269,74 @@ const DateTimePicker = props__ => {
     }
     return onesyDate;
   };
-  const inputToValue = (valueNew__0 = input) => {
-    let valueNew_6 = valueNew__0;
-    let [from_0, to_0] = valueNew_6.split(_DatePicker2.SEPARATOR);
+  const inputToValue = (valueNew__1 = input) => {
+    let valueNew_7 = valueNew__1;
+    let [from_0, to_0] = valueNew_7.split(_DatePicker2.SEPARATOR);
     from_0 = textToOnesyDate(from_0);
     if (to_0) to_0 = textToOnesyDate(to_0);
-    valueNew_6 = [from_0, to_0].filter(Boolean);
-    return valueNew_6;
+    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 = () => {
     var _valueNew_;
-    let valueNew_8 = inputToValue();
-    const isValid = valueNew_8 && ((_valueNew_ = valueNew_8) === null || _valueNew_ === void 0 || (_valueNew_ = _valueNew_[0]) === null || _valueNew_ === void 0 ? void 0 : _valueNew_.valid);
+    let valueNew_9 = inputToValue();
+    const isValid = valueNew_9 && ((_valueNew_ = valueNew_9) === null || _valueNew_ === void 0 || (_valueNew_ = _valueNew_[0]) === null || _valueNew_ === void 0 ? void 0 : _valueNew_.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 _date.OnesyDate()];
-    if (range) valueNew_9.push(new _date.OnesyDate());
+    const valueNew_10 = [new _date.OnesyDate()];
+    if (range) valueNew_10.push(new _date.OnesyDate());
 
     // Update value
-    onUpdate(valueNew_9);
+    onUpdate(valueNew_10);
 
     // Update input
-    setInput(valueToInput(valueNew_9));
+    setInput(valueToInput(valueNew_10));
     onClose(event);
     if ((0, _utils.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 ((0, _utils.is)('function', onClear_)) onClear_(event_0);
   };

package/Tab/Tab.js

@@ -39,7 +39,7 @@ const useStyle = (0, _styleReact.style)(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: {