@onesy/ui-react 1.0.180 → 1.0.182

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

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["tonal", "color", "version", "size", "start", "timeVisible", "timeOfDayVisible", "dateVisible", "timeFormatString", "dateFormatString", "renderTime", "renderDate", "shadow", "AnalogProps", "RegularProps", "MinimalProps", "ModernProps", "Component", "className", "children"];
+const _excluded = ["tonal", "color", "version", "size", "start", "timeVisible", "timeOfDayVisible", "dateVisible", "timeFormatString", "dateFormatString", "renderTime", "renderDate", "shadow", "AnalogProps", "RegularProps", "MinimalProps", "ModernProps", "RoundMeterProps", "Component", "className", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
@@ -67,6 +67,16 @@ const useStyle = styleMethod(theme => ({
   version_modern: {
     background: 'transparent'
   },
+  roundMeter: {
+    '&.onesy-RoundMeter-root': {
+      marginInline: 'auto',
+      '& .onesy-RoundMeter-svg': {
+        aspectRatio: '1 / 1',
+        maxWidth: '100%',
+        maxHeight: '100%'
+      }
+    }
+  },
   shadow_version_modern: {
     '& svg:first-of-type': {
       filter: `drop-shadow(0px 6px 10px rgb(0 0 0 / 4%)) drop-shadow(0px 1px 18px rgb(0 0 0 / 1%)) drop-shadow(0px 3px 5px rgb(0 0 0 / 7%))`
@@ -75,8 +85,9 @@ const useStyle = styleMethod(theme => ({
   modern_background: {
     position: 'absolute',
     inset: '0',
-    width: '100%',
-    height: 'auto'
+    aspectRatio: '1 / 1',
+    maxWidth: '100%',
+    maxHeight: '100%'
   },
   modernDate: {
     textAnchor: 'middle'
@@ -112,6 +123,7 @@ const Watch = props_ => {
       RegularProps,
       MinimalProps,
       ModernProps,
+      RoundMeterProps,
       Component = 'div',
       className,
       children
@@ -253,14 +265,15 @@ const Watch = props_ => {
                 l
               })
             }))]
-          })), version === 'analog' && /*#__PURE__*/_jsxs(RoundMeter, _objectSpread(_objectSpread({
+          })), version === 'analog' && /*#__PURE__*/_jsxs(RoundMeter, _objectSpread(_objectSpread(_objectSpread({
             tonal: tonal,
             color: color,
             size: size,
             marks: marks.analog,
             labels: labels.analog,
             background: true
-          }, AnalogProps), {}, {
+          }, RoundMeterProps), AnalogProps), {}, {
+            className: classNames([RoundMeterProps?.className, AnalogProps?.className, classes.roundMeter]),
             children: [timeOfDayVisible && /*#__PURE__*/_jsx("text", {
               x: 120,
               y: 74,
@@ -313,7 +326,7 @@ const Watch = props_ => {
                 strokeWidth: 1
               }
             })]
-          })), version === 'minimal' && /*#__PURE__*/_jsxs(RoundMeter, _objectSpread(_objectSpread({
+          })), version === 'minimal' && /*#__PURE__*/_jsxs(RoundMeter, _objectSpread(_objectSpread(_objectSpread({
             tonal: tonal,
             color: color,
             size: size,
@@ -326,7 +339,8 @@ const Watch = props_ => {
               }
             },
             background: true
-          }, MinimalProps), {}, {
+          }, RoundMeterProps), MinimalProps), {}, {
+            className: classNames([RoundMeterProps?.className, MinimalProps?.className, classes.roundMeter]),
             children: [/*#__PURE__*/_jsx(Path, {
               d: `M 120 114 L 170 114 A 1 1 0 0 1 170 126 L 120 126 A 1 1 0 0 1 120 114`,
               value: 100 / 12 * value.hour,
@@ -361,7 +375,7 @@ const Watch = props_ => {
                 fill: theme.methods.palette.color.value(undefined, 10, true, palette)
               }
             })]
-          })), version === 'modern' && /*#__PURE__*/_jsxs(RoundMeter, _objectSpread(_objectSpread({
+          })), version === 'modern' && /*#__PURE__*/_jsxs(RoundMeter, _objectSpread(_objectSpread(_objectSpread({
             tonal: tonal,
             color: color,
             size: size,
@@ -375,7 +389,8 @@ const Watch = props_ => {
                 d: "M109.976 2.90439C116.096 -0.528799 123.562 -0.528799 129.683 2.90439L143.879 10.8678C146.815 12.5147 150.117 13.3994 153.483 13.4411L169.759 13.6427C176.776 13.7296 183.241 17.4627 186.825 23.496L195.138 37.4906C196.857 40.3849 199.274 42.802 202.168 44.5212L216.163 52.8337C222.196 56.4175 225.929 62.8832 226.016 69.9001L226.218 86.1761C226.26 89.5422 227.144 92.8441 228.791 95.78L236.755 109.976C240.188 116.096 240.188 123.563 236.755 129.683L228.791 143.879C227.144 146.815 226.26 150.117 226.218 153.483L226.016 169.759C225.929 176.776 222.196 183.242 216.163 186.825L202.168 195.138C199.274 196.857 196.857 199.274 195.138 202.168L186.825 216.163C183.241 222.196 176.776 225.929 169.759 226.016L153.483 226.218C150.117 226.26 146.815 227.144 143.879 228.791L129.683 236.755C123.562 240.188 116.096 240.188 109.976 236.755L95.7799 228.791C92.844 227.144 89.5421 226.26 86.1761 226.218L69.9001 226.016C62.8832 225.929 56.4174 222.196 52.8337 216.163L44.5211 202.168C42.802 199.274 40.3848 196.857 37.4906 195.138L23.496 186.825C17.4626 183.242 13.7296 176.776 13.6427 169.759L13.4411 153.483C13.3994 150.117 12.5147 146.815 10.8678 143.879L2.90436 129.683C-0.52883 123.563 -0.528829 116.096 2.90436 109.976L10.8678 95.78C12.5147 92.8441 13.3994 89.5422 13.4411 86.1761L13.6427 69.9001C13.7296 62.8832 17.4626 56.4175 23.496 52.8337L37.4906 44.5212C40.3848 42.802 42.802 40.3849 44.5211 37.4906L52.8337 23.496C56.4174 17.4627 62.8832 13.7296 69.9001 13.6427L86.1761 13.4411C89.5421 13.3994 92.844 12.5147 95.78 10.8678L109.976 2.90439Z"
               })
             })
-          }, ModernProps), {}, {
+          }, RoundMeterProps), ModernProps), {}, {
+            className: classNames([RoundMeterProps?.className, ModernProps?.className, classes.roundMeter]),
             children: [/*#__PURE__*/_jsx(Path, {
               Component: "g",
               value: 100 / 60 * value.second,

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license UiReact v1.0.179
+/** @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.179
+/** @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.180",
+  "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"