@onesy/ui-react 1.0.179 → 1.0.181

package/Chart/Chart.js

@@ -542,14 +542,16 @@ const Chart = props_ => {
     setHover(true);
   };
   const onWrapperMouseLeave = () => {
-    setHover(false);
-    setTimeout(() => {
-      if (tooltipCloseOnMouseLeave) setAppend(values__0 => _objectSpread(_objectSpread({}, values__0), {}, {
-        open: false
-      }));
-      if (!guidelinesDisplayInactive) setGuidelineIn(false);
-      setGuidelinePosition({});
-    });
+    if (refs.hover.current) {
+      setHover(false);
+      setTimeout(() => {
+        if (tooltipCloseOnMouseLeave) setAppend(values__0 => _objectSpread(_objectSpread({}, values__0), {}, {
+          open: false
+        }));
+        if (!guidelinesDisplayInactive) setGuidelineIn(false);
+        setGuidelinePosition({});
+      });
+    }
   };
   const makeGroupTooltip = (x_, y_) => {
     const items_0 = refs.allValues.current.filter(item_2 => item_2.normalized[0] === x_);

package/Expand/Expand.js

@@ -113,7 +113,8 @@ const Expand = props_ => {
     placeholder: _react.default.useRef(undefined),
     parent: _react.default.useRef(undefined),
     element: _react.default.useRef(undefined),
-    value: _react.default.useRef(0)
+    value: _react.default.useRef(0),
+    previousWidth: _react.default.useRef((0, _utils.isEnvironment)('browser') && window.innerWidth)
   };
   refs.value.current = value;
   refs.parent.current = parent;
@@ -126,8 +127,11 @@ const Expand = props_ => {
   const childrenWithTransition = isTransition(children === null || children === void 0 || (_children$type = children.type) === null || _children$type === void 0 ? void 0 : _children$type.displayName);
   _react.default.useEffect(() => {
     const method = () => {
+      const newWidth = window.innerWidth;
+      if (refs.previousWidth.current === newWidth) return;
       setValue(null);
       setParent(null);
+      refs.previousWidth.current = newWidth;
     };
 
     // on resize

package/RoundMeter/RoundMeter.js

@@ -21,6 +21,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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) { (0, _defineProperty2.default)(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; }
 const useStyle = (0, _styleReact.style)(theme => ({
   root: {
+    position: 'relative',
     width: '100vw'
   },
   size_small: {

package/Watch/Watch.d.ts

@@ -17,6 +17,7 @@ export declare type IWatch = Omit<ISurface, 'version'> & {
     RegularProps?: IPropsAny;
     MinimalProps?: IPropsAny;
     ModernProps?: IPropsAny;
+    RoundMeterProps?: IPropsAny;
 };
 declare const Watch: React.FC<IWatch>;
 export default Watch;

package/Watch/Watch.js

@@ -18,7 +18,7 @@ var _RoundMeter = _interopRequireDefault(require("../RoundMeter"));
 var _Line = _interopRequireDefault(require("../Line"));
 var _utils2 = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
-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) { (0, _defineProperty2.default)(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; }
 const useStyle = (0, _styleReact.style)(theme => ({
@@ -74,6 +74,16 @@ const useStyle = (0, _styleReact.style)(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%))`
@@ -82,8 +92,9 @@ const useStyle = (0, _styleReact.style)(theme => ({
   modern_background: {
     position: 'absolute',
     inset: '0',
-    width: '100%',
-    height: 'auto'
+    aspectRatio: '1 / 1',
+    maxWidth: '100%',
+    maxHeight: '100%'
   },
   modernDate: {
     textAnchor: 'middle'
@@ -120,6 +131,7 @@ const Watch = props_ => {
       RegularProps,
       MinimalProps,
       ModernProps,
+      RoundMeterProps,
       Component = 'div',
       className,
       children
@@ -261,14 +273,15 @@ const Watch = props_ => {
                 l
               })
             }))]
-          })), version === 'analog' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(RoundMeter, _objectSpread(_objectSpread({
+          })), version === 'analog' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(RoundMeter, _objectSpread(_objectSpread(_objectSpread({
             tonal: tonal,
             color: color,
             size: size,
             marks: marks.analog,
             labels: labels.analog,
             background: true
-          }, AnalogProps), {}, {
+          }, RoundMeterProps), AnalogProps), {}, {
+            className: (0, _styleReact.classNames)([RoundMeterProps === null || RoundMeterProps === void 0 ? void 0 : RoundMeterProps.className, AnalogProps === null || AnalogProps === void 0 ? void 0 : AnalogProps.className, classes.roundMeter]),
             children: [timeOfDayVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)("text", {
               x: 120,
               y: 74,
@@ -321,7 +334,7 @@ const Watch = props_ => {
                 strokeWidth: 1
               }
             })]
-          })), version === 'minimal' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(RoundMeter, _objectSpread(_objectSpread({
+          })), version === 'minimal' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(RoundMeter, _objectSpread(_objectSpread(_objectSpread({
             tonal: tonal,
             color: color,
             size: size,
@@ -334,7 +347,8 @@ const Watch = props_ => {
               }
             },
             background: true
-          }, MinimalProps), {}, {
+          }, RoundMeterProps), MinimalProps), {}, {
+            className: (0, _styleReact.classNames)([RoundMeterProps === null || RoundMeterProps === void 0 ? void 0 : RoundMeterProps.className, MinimalProps === null || MinimalProps === void 0 ? void 0 : MinimalProps.className, classes.roundMeter]),
             children: [/*#__PURE__*/(0, _jsxRuntime.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,
@@ -369,7 +383,7 @@ const Watch = props_ => {
                 fill: theme.methods.palette.color.value(undefined, 10, true, palette)
               }
             })]
-          })), version === 'modern' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(RoundMeter, _objectSpread(_objectSpread({
+          })), version === 'modern' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(RoundMeter, _objectSpread(_objectSpread(_objectSpread({
             tonal: tonal,
             color: color,
             size: size,
@@ -383,7 +397,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: (0, _styleReact.classNames)([RoundMeterProps === null || RoundMeterProps === void 0 ? void 0 : RoundMeterProps.className, ModernProps === null || ModernProps === void 0 ? void 0 : ModernProps.className, classes.roundMeter]),
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Path, {
               Component: "g",
               value: 100 / 60 * value.second,

package/esm/Chart/Chart.js

@@ -534,14 +534,16 @@ const Chart = props_ => {
     setHover(true);
   };
   const onWrapperMouseLeave = () => {
-    setHover(false);
-    setTimeout(() => {
-      if (tooltipCloseOnMouseLeave) setAppend(values__0 => _objectSpread(_objectSpread({}, values__0), {}, {
-        open: false
-      }));
-      if (!guidelinesDisplayInactive) setGuidelineIn(false);
-      setGuidelinePosition({});
-    });
+    if (refs.hover.current) {
+      setHover(false);
+      setTimeout(() => {
+        if (tooltipCloseOnMouseLeave) setAppend(values__0 => _objectSpread(_objectSpread({}, values__0), {}, {
+          open: false
+        }));
+        if (!guidelinesDisplayInactive) setGuidelineIn(false);
+        setGuidelinePosition({});
+      });
+    }
   };
   const makeGroupTooltip = (x_, y_) => {
     const items_0 = refs.allValues.current.filter(item_2 => item_2.normalized[0] === x_);

package/esm/Expand/Expand.js

@@ -6,7 +6,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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 { is, isEnvironment } from '@onesy/utils';
 import { useOnesyTheme } from '@onesy/style-react';
 import { Transition } from '..';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
@@ -105,7 +105,8 @@ const Expand = props_ => {
     placeholder: React.useRef(undefined),
     parent: React.useRef(undefined),
     element: React.useRef(undefined),
-    value: React.useRef(0)
+    value: React.useRef(0),
+    previousWidth: React.useRef(isEnvironment('browser') && window.innerWidth)
   };
   refs.value.current = value;
   refs.parent.current = parent;
@@ -118,8 +119,11 @@ const Expand = props_ => {
   const childrenWithTransition = isTransition(children?.type?.displayName);
   React.useEffect(() => {
     const method = () => {
+      const newWidth = window.innerWidth;
+      if (refs.previousWidth.current === newWidth) return;
       setValue(null);
       setParent(null);
+      refs.previousWidth.current = newWidth;
     };
 
     // on resize

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/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.178
+/** @license UiReact v1.0.180
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/esm/useResize/useResize.js

@@ -1,36 +1,27 @@
-import { c as _c } from "react/compiler-runtime";
 import React from 'react';
 import { isEnvironment } from '@onesy/utils';
 const useResize = () => {
-  const $ = _c(2);
-  const [windowWidth, setWindowWidth] = React.useState(_temp);
-  let t0;
-  let t1;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = () => {
-      const onResize = () => {
-        setWindowWidth(window.innerWidth);
-      };
-      if (isEnvironment("browser")) {
-        setWindowWidth(window.innerWidth);
-        window.addEventListener("resize", onResize);
-        return () => window.removeEventListener("resize", onResize);
-      }
+  const [width, setWidth] = React.useState(() => {
+    if (isEnvironment('browser')) return window.innerWidth;
+    return 0;
+  });
+  const refs = {
+    width: React.useRef(width)
+  };
+  refs.width.current = width;
+  React.useEffect(() => {
+    const onResize = () => {
+      const newWidth = window.innerWidth;
+      if (refs.width.current === newWidth) return;
+      setWidth(newWidth);
     };
-    t1 = [];
-    $[0] = t0;
-    $[1] = t1;
-  } else {
-    t0 = $[0];
-    t1 = $[1];
-  }
-  React.useEffect(t0, t1);
-  return windowWidth;
+    if (isEnvironment('browser')) {
+      const newWidth_0 = window.innerWidth;
+      if (refs.width.current !== newWidth_0) setWidth(newWidth_0);
+      window.addEventListener('resize', onResize);
+      return () => window.removeEventListener('resize', onResize);
+    }
+  }, []);
+  return width;
 };
-export default useResize;
-function _temp() {
-  if (isEnvironment("browser")) {
-    return window.innerWidth;
-  }
-  return 0;
-}
+export default useResize;

package/index.js

@@ -1,4 +1,4 @@
-/** @license UiReact v1.0.178
+/** @license UiReact v1.0.180
  *
  * 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.179",
+  "version": "1.0.181",
   "description": "UI for React",
   "repository": "https://github.com/onesy-me/onesy.git",
   "author": "Lazar Erić <lazareric1@proton.me>",

package/useResize/useResize.js

@@ -5,39 +5,30 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _compilerRuntime = require("react/compiler-runtime");
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("@onesy/utils");
 const useResize = () => {
-  const $ = (0, _compilerRuntime.c)(2);
-  const [windowWidth, setWindowWidth] = _react.default.useState(_temp);
-  let t0;
-  let t1;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = () => {
-      const onResize = () => {
-        setWindowWidth(window.innerWidth);
-      };
-      if ((0, _utils.isEnvironment)("browser")) {
-        setWindowWidth(window.innerWidth);
-        window.addEventListener("resize", onResize);
-        return () => window.removeEventListener("resize", onResize);
-      }
+  const [width, setWidth] = _react.default.useState(() => {
+    if ((0, _utils.isEnvironment)('browser')) return window.innerWidth;
+    return 0;
+  });
+  const refs = {
+    width: _react.default.useRef(width)
+  };
+  refs.width.current = width;
+  _react.default.useEffect(() => {
+    const onResize = () => {
+      const newWidth = window.innerWidth;
+      if (refs.width.current === newWidth) return;
+      setWidth(newWidth);
     };
-    t1 = [];
-    $[0] = t0;
-    $[1] = t1;
-  } else {
-    t0 = $[0];
-    t1 = $[1];
-  }
-  _react.default.useEffect(t0, t1);
-  return windowWidth;
+    if ((0, _utils.isEnvironment)('browser')) {
+      const newWidth_0 = window.innerWidth;
+      if (refs.width.current !== newWidth_0) setWidth(newWidth_0);
+      window.addEventListener('resize', onResize);
+      return () => window.removeEventListener('resize', onResize);
+    }
+  }, []);
+  return width;
 };
-var _default = exports.default = useResize;
-function _temp() {
-  if ((0, _utils.isEnvironment)("browser")) {
-    return window.innerWidth;
-  }
-  return 0;
-}
+var _default = exports.default = useResize;