@onesy/ui-react 1.0.163 → 1.0.165

package/esm/ViewSplit/ViewSplit.js

@@ -106,10 +106,10 @@ const useStyle = styleMethod(theme => ({
 });
 const ViewSplit = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyViewSplit?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
-  const Divider = React.useMemo(() => theme?.elements?.Divider || DividerElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyViewSplit?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const IconButton = theme?.elements?.IconButton || IconButtonElement;
+  const Divider = theme?.elements?.Divider || DividerElement;
   const {
       tonal = true,
       color = 'primary',
@@ -206,31 +206,31 @@ const ViewSplit = /*#__PURE__*/React.forwardRef((props_, ref) => {
         } = rect_;
 
         // Value to the precision point value
-        let valueNew = refs.orientation.current === 'horizontal' ? (x - rect_.x) / width : (y - rect_.y) / height;
-        valueNew = valuePrecision(valueNew);
-        onChange(valueNew);
+        let valueNew_0 = refs.orientation.current === 'horizontal' ? (x - rect_.x) / width : (y - rect_.y) / height;
+        valueNew_0 = valuePrecision(valueNew_0);
+        onChange(valueNew_0);
       }
     };
-    const onTouchMove = event => {
+    const onTouchMove = event_0 => {
       if (refs.mouseDown.current) {
-        const x = event.touches[0].clientX;
-        const y = event.touches[0].clientY;
-        const rect_ = refs.root.current.getBoundingClientRect();
+        const x_0 = event_0.touches[0].clientX;
+        const y_0 = event_0.touches[0].clientY;
+        const rect__0 = refs.root.current.getBoundingClientRect();
         const {
-          width,
-          height
-        } = rect_;
+          width: width_0,
+          height: height_0
+        } = rect__0;
 
         // Value to the precision point value
-        let valueNew = refs.orientation.current === 'horizontal' ? (x - rect_.x) / width : (y - rect_.y) / height;
-        valueNew = valuePrecision(valueNew);
-        onChange(valueNew);
+        let valueNew_1 = refs.orientation.current === 'horizontal' ? (x_0 - rect__0.x) / width_0 : (y_0 - rect__0.y) / height_0;
+        valueNew_1 = valuePrecision(valueNew_1);
+        onChange(valueNew_1);
       }
     };
     const method = () => {
       if (refs.root.current) {
-        const rect_ = refs.root.current.getBoundingClientRect();
-        setRect(rect_);
+        const rect__1 = refs.root.current.getBoundingClientRect();
+        setRect(rect__1);
       }
     };
     const observer = new ResizeObserver(method);
@@ -258,71 +258,71 @@ const ViewSplit = /*#__PURE__*/React.forwardRef((props_, ref) => {
       if (value_ !== value) setValue(value_);
     }
   }, [value_]);
-  const onTouchStart = event => {
-    const x = event.touches[0].clientX;
-    const y = event.touches[0].clientY;
-    const rect_ = refs.root.current.getBoundingClientRect();
+  const onTouchStart = event_1 => {
+    const x_1 = event_1.touches[0].clientX;
+    const y_1 = event_1.touches[0].clientY;
+    const rect__2 = refs.root.current.getBoundingClientRect();
     const {
-      width,
-      height
-    } = rect_;
+      width: width_1,
+      height: height_1
+    } = rect__2;
 
     // Value to the precision point value
-    let valueNew = refs.orientation.current === 'horizontal' ? (x - rect_.x) / width : (y - rect_.y) / height;
-    valueNew = valuePrecision(valueNew);
-    onChange(valueNew);
+    let valueNew_2 = refs.orientation.current === 'horizontal' ? (x_1 - rect__2.x) / width_1 : (y_1 - rect__2.y) / height_1;
+    valueNew_2 = valuePrecision(valueNew_2);
+    onChange(valueNew_2);
     setMouseDown(true);
   };
-  const onFocus = React.useCallback(event => {
+  const onFocus = event_2 => {
     setFocus(true);
-    if (is('function', onFocus_)) onFocus_(event);
-  }, []);
-  const onBlur = React.useCallback(event => {
+    if (is('function', onFocus_)) onFocus_(event_2);
+  };
+  const onBlur = event_3 => {
     setFocus(false);
-    if (is('function', onBlur_)) onBlur_(event);
-  }, []);
-  const onFocusIconButton = React.useCallback(event => {
+    if (is('function', onBlur_)) onBlur_(event_3);
+  };
+  const onFocusIconButton = event_4 => {
     setFocus(true);
-  }, []);
-  const onBlurIconButton = React.useCallback(event => {
+  };
+  const onBlurIconButton = event_5 => {
     setFocus(false);
-  }, []);
-  const onMouseEnter = React.useCallback(event => {
+  };
+  const onMouseEnter = event_6 => {
     setHover(true);
-    if (is('function', onMouseEnter_)) onMouseEnter_(event);
-  }, []);
-  const onMouseLeave = React.useCallback(event => {
+    if (is('function', onMouseEnter_)) onMouseEnter_(event_6);
+  };
+  const onMouseLeave = event_7 => {
     setHover(false);
     setFocus(false);
-    if (is('function', onMouseLeave_)) onMouseLeave_(event);
-  }, []);
-  const onMouseDown = React.useCallback(() => {
+    if (is('function', onMouseLeave_)) onMouseLeave_(event_7);
+  };
+  const onMouseDown = () => {
     setMouseDown(true);
-  }, []);
+  };
   const move = (forward_ = true) => {
     let forward = forward_;
     if (refs.orientation.current === 'horizontal') {
       if (refs.direction.current === 'rtl') forward = !forward;
     }
-    let valueNew = refs.value.current || 0;
-    valueNew = clamp(valueNew + (forward ? 1 : -1), 0, 100);
+    let valueNew_3 = refs.value.current || 0;
+    valueNew_3 = clamp(valueNew_3 + (forward ? 1 : -1), 0, 100);
 
     // Update
-    onChange(valueNew);
+    onChange(valueNew_3);
   };
-  const onKeyDown = React.useCallback(event => {
-    if (['ArrowUp', 'ArrowRight', 'ArrowLeft', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
-      if (['Home', 'End'].includes(event.key) || ['ArrowLeft', 'ArrowRight'].includes(event.key) && refs.orientation.current === 'horizontal' || ['ArrowUp', 'ArrowDown'].includes(event.key) && refs.orientation.current === 'vertical') {
+  const onKeyDown = event_8 => {
+    if (['ArrowUp', 'ArrowRight', 'ArrowLeft', 'ArrowDown', 'Home', 'End'].includes(event_8.key)) {
+      if (['Home', 'End'].includes(event_8.key) || ['ArrowLeft', 'ArrowRight'].includes(event_8.key) && refs.orientation.current === 'horizontal' || ['ArrowUp', 'ArrowDown'].includes(event_8.key) && refs.orientation.current === 'vertical') {
         // Prevent default
-        event.preventDefault();
-        let valueNew;
-        switch (event.key) {
+        event_8.preventDefault();
+        let valueNew_4;
+        switch (event_8.key) {
           case 'Home':
-            valueNew = refs.orientation.current !== 'vertical' ? 0 : 100;
-            return onChange(valueNew);
+            valueNew_4 = refs.orientation.current !== 'vertical' ? 0 : 100;
+            return onChange(valueNew_4);
           case 'End':
-            valueNew = refs.orientation.current !== 'vertical' ? 100 : 0;
-            return onChange(valueNew);
+            valueNew_4 = refs.orientation.current !== 'vertical' ? 100 : 0;
+            return onChange(valueNew_4);
           case 'ArrowUp':
           case 'ArrowLeft':
             return move();
@@ -334,7 +334,7 @@ const ViewSplit = /*#__PURE__*/React.forwardRef((props_, ref) => {
         }
       }
     }
-  }, []);
+  };
   const onChange = valueItem => {
     // Update inner or controlled
     if (!props.hasOwnProperty('value')) setValue(valueItem);
@@ -383,9 +383,9 @@ const ViewSplit = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }, /*#__PURE__*/React.cloneElement(children[0], {
     style: _objectSpread(_objectSpread({}, styles.startItem), children[0].props.style)
   }))), divider && /*#__PURE__*/React.createElement(Divider, _extends({
-    onMouseDown: event => {
+    onMouseDown: event_9 => {
       onMouseDown();
-      if (is('function', DividerProps?.onMouseDown)) IconButtonProps.onMouseDown(event);
+      if (is('function', DividerProps?.onMouseDown)) IconButtonProps.onMouseDown(event_9);
     },
     orientation: orientation === 'vertical' ? 'horizontal' : 'vertical'
   }, DividerProps, {
@@ -396,9 +396,9 @@ const ViewSplit = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }, SeparatorProps)) || /*#__PURE__*/React.createElement(IconButton, _extends({
     onFocus: onFocusIconButton,
     onBlur: onBlurIconButton,
-    onMouseDown: event => {
+    onMouseDown: event_10 => {
       onMouseDown();
-      if (is('function', IconButtonProps?.onMouseDown)) IconButtonProps.onMouseDown(event);
+      if (is('function', IconButtonProps?.onMouseDown)) IconButtonProps.onMouseDown(event_10);
     }
   }, SeparatorProps, IconButtonProps, {
     className: classNames([staticClassName('ViewSplit', theme) && ['onesy-ViewSplit-icon-button'], IconButtonProps?.className, classes.iconButton, classes[`iconButton_orientation_${orientation}`], version === 'manual' && classes[`iconButton_manual_orientation_${orientation}`]]),

package/esm/Watch/Watch.js

@@ -87,12 +87,12 @@ const useStyle = styleMethod(theme => ({
 const Watch = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
   const l = theme.l;
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyWatch?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Path = React.useMemo(() => theme?.elements?.Path || PathElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
-  const RoundMeter = React.useMemo(() => theme?.elements?.RoundMeter || RoundMeterElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyWatch?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Path = theme?.elements?.Path || PathElement;
+  const Type = theme?.elements?.Type || TypeElement;
+  const Surface = theme?.elements?.Surface || SurfaceElement;
+  const RoundMeter = theme?.elements?.RoundMeter || RoundMeterElement;
   const {
       tonal = true,
       color = 'primary',
@@ -125,10 +125,10 @@ const Watch = /*#__PURE__*/React.forwardRef((props_, ref) => {
     requestAnimationFrameID: React.useRef(undefined)
   };
   const [value, setValue] = React.useState(OnesyDate.onesyDate);
-  const update = React.useCallback(() => {
+  const update = () => {
     setValue(OnesyDate.onesyDate);
     refs.requestAnimationFrameID.current = requestAnimationFrame(update);
-  }, []);
+  };
   const marks = React.useMemo(() => {
     return {
       analog: unique([
@@ -143,10 +143,10 @@ const Watch = /*#__PURE__*/React.forwardRef((props_, ref) => {
       // Minutes
       ...Array.from({
         length: 60
-      }).map((item, index) => ({
+      }).map((item_0, index_0) => ({
         height: 4,
         padding: theme.methods.space.value(0.5, 'px'),
-        position: index * (100 / 60)
+        position: index_0 * (100 / 60)
       }))], 'position')
     };
   }, []);
@@ -156,13 +156,13 @@ const Watch = /*#__PURE__*/React.forwardRef((props_, ref) => {
       // Hours
       ...Array.from({
         length: 12
-      }).map((item, index) => ({
-        value: index === 0 ? 12 : index,
+      }).map((item_1, index_1) => ({
+        value: index_1 === 0 ? 12 : index_1,
         padding: theme.methods.space.value(1.5, 'px'),
         style: {
           fontSize: 14
         },
-        position: index * (100 / 12)
+        position: index_1 * (100 / 12)
       }))], 'position'),
       'minimal': unique([
       // Hours

package/esm/Weather/Weather.js

@@ -5,6 +5,7 @@ const _excluded = ["tonal", "color", "style"],
   _excluded2 = ["tonal", "color", "version", "size", "shadow", "dayTime", "weather", "temperature", "values", "interval", "IconDay", "IconNight", "IconCloud", "IconRain", "IconSnow", "IconProps", "Component", "className", "style"];
 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 { c as _c } from "react/compiler-runtime";
 import React from 'react';
 import { is } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
@@ -19,32 +20,75 @@ import FadeElement from '../Fade';
 import TransitionsElement from '../Transitions';
 import { staticClassName } from '../utils';
 const IconWeather = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const $ = _c(14);
   const theme = useOnesyTheme();
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
-  const {
+  const Surface = theme?.elements?.Surface || SurfaceElement;
+  let color_;
+  let other;
+  let style;
+  let tonal;
+  if ($[0] !== props) {
+    var _props = props;
+    ({
       tonal,
       color: color_,
       style
-    } = props,
-    other = _objectWithoutProperties(props, _excluded);
-  return /*#__PURE__*/React.createElement(Surface, {
-    tonal: tonal,
-    color: color_
-  }, ({
-    color,
-    backgroundColor
-  }) => /*#__PURE__*/React.createElement("svg", _extends({
-    ref: ref,
-    viewBox: "0 0 177 178",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, other, {
-    style: _objectSpread(_objectSpread({}, style), {}, {
-      color,
-      fill: backgroundColor
-    })
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M93.964 1.5C85.944 3.181 78.964 4.033 66.185 12.689C62.393 14.903 52.521 23.956 36.901 39.544C15.559 60.841 12.951 63.812 9.244 71.058C2.449 84.337 0.5 92.138 0.5 106.058C0.5 115.812 0.935 119.455 2.826 125.523C10.658 150.657 27.954 167.964 52.964 175.692C59.053 177.573 62.722 178.008 72.464 178C86.543 177.99 93.354 176.43 105.964 170.329C114.063 166.411 115.649 165.033 139.556 141.138C162.652 118.054 166.644 113.063 170.5 105.504C175.5 93.058 176.964 86.676 176.964 74.212C176.964 61.815 175.094 53.787 169.473 42.058C160.683 23.716 143.356 9.513 123.082 4.033C114.951 1.835 101.984 -0.181001 93.964 1.5Z"
-  })));
+    } = _props);
+    other = _objectWithoutProperties(_props, _excluded);
+    _props;
+    $[0] = props;
+    $[1] = color_;
+    $[2] = other;
+    $[3] = style;
+    $[4] = tonal;
+  } else {
+    color_ = $[1];
+    other = $[2];
+    style = $[3];
+    tonal = $[4];
+  }
+  let t0;
+  if ($[5] !== other || $[6] !== ref || $[7] !== style) {
+    t0 = t1 => {
+      const {
+        color,
+        backgroundColor
+      } = t1;
+      return /*#__PURE__*/React.createElement("svg", _extends({
+        ref: ref,
+        viewBox: "0 0 177 178",
+        xmlns: "http://www.w3.org/2000/svg"
+      }, other, {
+        style: _objectSpread(_objectSpread({}, style), {}, {
+          color,
+          fill: backgroundColor
+        })
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M93.964 1.5C85.944 3.181 78.964 4.033 66.185 12.689C62.393 14.903 52.521 23.956 36.901 39.544C15.559 60.841 12.951 63.812 9.244 71.058C2.449 84.337 0.5 92.138 0.5 106.058C0.5 115.812 0.935 119.455 2.826 125.523C10.658 150.657 27.954 167.964 52.964 175.692C59.053 177.573 62.722 178.008 72.464 178C86.543 177.99 93.354 176.43 105.964 170.329C114.063 166.411 115.649 165.033 139.556 141.138C162.652 118.054 166.644 113.063 170.5 105.504C175.5 93.058 176.964 86.676 176.964 74.212C176.964 61.815 175.094 53.787 169.473 42.058C160.683 23.716 143.356 9.513 123.082 4.033C114.951 1.835 101.984 -0.181001 93.964 1.5Z"
+      }));
+    };
+    $[5] = other;
+    $[6] = ref;
+    $[7] = style;
+    $[8] = t0;
+  } else {
+    t0 = $[8];
+  }
+  let t1;
+  if ($[9] !== Surface || $[10] !== color_ || $[11] !== t0 || $[12] !== tonal) {
+    t1 = /*#__PURE__*/React.createElement(Surface, {
+      tonal: tonal,
+      color: color_
+    }, t0);
+    $[9] = Surface;
+    $[10] = color_;
+    $[11] = t0;
+    $[12] = tonal;
+    $[13] = t1;
+  } else {
+    t1 = $[13];
+  }
+  return t1;
 });
 const useStyle = styleMethod(theme => ({
   root: {
@@ -149,11 +193,11 @@ const useStyle = styleMethod(theme => ({
 });
 const Weather = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyWeather?.props?.default), props_), [props_]);
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const Fade = React.useMemo(() => theme?.elements?.Fade || FadeElement, [theme]);
-  const Transitions = React.useMemo(() => theme?.elements?.Transitions || TransitionsElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyWeather?.props?.default), props_);
+  const Surface = theme?.elements?.Surface || SurfaceElement;
+  const Type = theme?.elements?.Type || TypeElement;
+  const Fade = theme?.elements?.Fade || FadeElement;
+  const Transitions = theme?.elements?.Transitions || TransitionsElement;
   const {
       tonal = true,
       color = 'primary',
@@ -212,12 +256,12 @@ const Weather = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }));
   }, [dayTime_]);
   React.useEffect(() => {
-    if (weather_ !== undefined && weather_ !== refs.values.current.weather) setValues(values__ => _objectSpread(_objectSpread({}, values__), {}, {
+    if (weather_ !== undefined && weather_ !== refs.values.current.weather) setValues(values___0 => _objectSpread(_objectSpread({}, values___0), {}, {
       weather: weather_
     }));
   }, [weather_]);
   React.useEffect(() => {
-    if (temperature_ !== undefined && temperature_ !== refs.values.current.temperature) setValues(values__ => _objectSpread(_objectSpread({}, values__), {}, {
+    if (temperature_ !== undefined && temperature_ !== refs.values.current.temperature) setValues(values___1 => _objectSpread(_objectSpread({}, values___1), {}, {
       temperature: temperature_
     }));
   }, [temperature_]);