@onesy/ui-react 1.0.163 → 1.0.165

package/Widgets/Widgets.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 import { IBaseElement, IElement, IPropsAny, IElementReference } from '../types';
-export type IWidgetsValue = {
+export declare type IWidgetsValue = {
     open: (value?: string) => void;
     openAll: () => void;
     close: (value?: string) => void;
     closeAll: () => void;
 };
-export type IWidgets = IBaseElement & {
+export declare type IWidgets = IBaseElement & {
     widgets?: IElement;
     position?: 'top' | 'bottom';
     move?: boolean;

package/Widgets/Widgets.js

@@ -95,32 +95,15 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Widgets'
 });
 const Widgets = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5;
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyWidgets) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const SpeedDial = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.SpeedDial) || _SpeedDial.default;
-  }, [theme]);
-  const SpeedDialItem = _react.default.useMemo(() => {
-    var _theme$elements2;
-    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.SpeedDialItem) || _SpeedDialItem.default;
-  }, [theme]);
-  const Transition = _react.default.useMemo(() => {
-    var _theme$elements3;
-    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Transition) || _Transition.default;
-  }, [theme]);
-  const IconButton = _react.default.useMemo(() => {
-    var _theme$elements4;
-    return (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.IconButton) || _IconButton.default;
-  }, [theme]);
-  const Move = _react.default.useMemo(() => {
-    var _theme$elements5;
-    return (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Move) || _Move.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyWidgets) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const SpeedDial = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.SpeedDial) || _SpeedDial.default;
+  const SpeedDialItem = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.SpeedDialItem) || _SpeedDialItem.default;
+  const Transition = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Transition) || _Transition.default;
+  const IconButton = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.IconButton) || _IconButton.default;
+  const Move = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Move) || _Move.default;
   const {
       widgets,
       position = 'bottom',
@@ -147,25 +130,25 @@ const Widgets = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     props: _react.default.useRef(undefined)
   };
   refs.props.current = props;
-  const open = _react.default.useCallback(value => {
+  const open = value => {
     setOpenItems(items => (0, _utils.unique)([...items, value]));
     if ((0, _utils.is)('function', onOpen)) onOpen(value);
-  }, []);
-  const openAll = _react.default.useCallback(() => {
+  };
+  const openAll = () => {
     setOpenItems(() => (0, _utils.unique)((widgets || []).map(item => {
       const valueItem = item.value !== undefined ? item.value : item.label;
       return valueItem;
     })));
     if ((0, _utils.is)('function', onOpenAll)) onOpenAll();
-  }, []);
-  const close = _react.default.useCallback(value => {
-    setOpenItems(items => (0, _utils.unique)(items.filter(item => item !== value)));
-    if ((0, _utils.is)('function', onClose)) onClose(value);
-  }, []);
-  const closeAll = _react.default.useCallback(() => {
+  };
+  const close = value_0 => {
+    setOpenItems(items_0 => (0, _utils.unique)(items_0.filter(item_0 => item_0 !== value_0)));
+    if ((0, _utils.is)('function', onClose)) onClose(value_0);
+  };
+  const closeAll = () => {
     setOpenItems([]);
     if ((0, _utils.is)('function', onCloseAll)) onCloseAll();
-  }, []);
+  };
 
   // Add to the value
   refs.value.current.open = open;
@@ -182,41 +165,41 @@ const Widgets = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     alignment: "start",
     Icon: Icon_,
     noRotate: true
-  }, SpeedDialProps, other), widgets.map((item, index) => {
-    const valueItem = item.value !== undefined ? item.value : item.label;
+  }, SpeedDialProps, other), widgets.map((item_1, index) => {
+    const valueItem_0 = item_1.value !== undefined ? item_1.value : item_1.label;
     return /*#__PURE__*/_react.default.createElement(SpeedDialItem, {
       key: index,
-      onClick: () => !openItems.includes(valueItem) ? open(valueItem) : close(valueItem),
-      label: !openItems.includes(valueItem) ? item.label : `${l('Close')} ${item.label}`,
-      Icon: item.Icon
+      onClick: () => !openItems.includes(valueItem_0) ? open(valueItem_0) : close(valueItem_0),
+      label: !openItems.includes(valueItem_0) ? item_1.label : `${l('Close')} ${item_1.label}`,
+      Icon: item_1.Icon
     });
-  })), widgetsToUse.map((item, index) => {
-    const valueItem = item.value !== undefined ? item.value : item.label;
+  })), widgetsToUse.map((item_2, index_0) => {
+    const valueItem_1 = item_2.value !== undefined ? item_2.value : item_2.label;
     const WidgetWrapper = Move;
     const WidgetWrapperProps = _objectSpread({
       version: 'fixed',
       manage: true,
       manageLevel: 1,
-      disabled: !(move && item.move !== false)
+      disabled: !(move && item_2.move !== false)
     }, MoveProps);
     return /*#__PURE__*/_react.default.createElement(Transition, {
-      key: index,
-      in: openItems.includes(valueItem),
+      key: index_0,
+      in: openItems.includes(valueItem_1),
       removeOnExited: true
     }, status => {
-      var _item$element$type;
+      var _item_2$element$type;
       return /*#__PURE__*/_react.default.createElement(WidgetWrapper, (0, _extends2.default)({
         className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Widgets', theme) && [`onesy-Widgets-item`], classes.item, status])
       }, WidgetWrapperProps), /*#__PURE__*/_react.default.createElement(IconButton, {
-        onClick: () => close(valueItem),
+        onClick: () => close(valueItem_1),
         color: "default",
         version: "filled",
         size: "small",
         elevation: false,
         className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Widgets', theme) && [`onesy-Widgets-icon-button`], classes.iconButton])
-      }, /*#__PURE__*/_react.default.createElement(IconCloseItem, null)), /*#__PURE__*/_react.default.cloneElement(item.element, _objectSpread({
+      }, /*#__PURE__*/_react.default.createElement(IconCloseItem, null)), /*#__PURE__*/_react.default.cloneElement(item_2.element, _objectSpread({
         className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Widgets', theme) && [`onesy-Widgets-widget`], classes.widget])
-      }, ['onesy-Weather', 'onesy-Watch'].includes((_item$element$type = item.element.type) === null || _item$element$type === void 0 ? void 0 : _item$element$type.displayName) ? {
+      }, ['onesy-Weather', 'onesy-Watch'].includes((_item_2$element$type = item_2.element.type) === null || _item_2$element$type === void 0 ? void 0 : _item_2$element$type.displayName) ? {
         shadow: true,
         style: {
           boxShadow: 'none'

package/WindowSplit/WindowSplit.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
 import { IElement, IPropsAny } from '../types';
-export type IWindowSplit = Omit<ILine, 'onChange'> & {
+export declare type IWindowSplit = Omit<ILine, 'onChange'> & {
     valueDefault?: number;
     value?: number;
     onChange?: (value: number) => any;

package/WindowSplit/WindowSplit.js

@@ -90,23 +90,12 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-WindowSplit'
 });
 const WindowSplit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3;
   const theme = (0, _styleReact.useOnesyTheme)();
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyWindowSplit) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Line = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
-  }, [theme]);
-  const IconButton = _react.default.useMemo(() => {
-    var _theme$elements2;
-    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.IconButton) || _IconButton.default;
-  }, [theme]);
-  const Divider = _react.default.useMemo(() => {
-    var _theme$elements3;
-    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Divider) || _Divider.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyWindowSplit) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
+  const IconButton = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.IconButton) || _IconButton.default;
+  const Divider = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Divider) || _Divider.default;
   const {
       tonal = false,
       color = 'inverted',
@@ -205,25 +194,25 @@ const WindowSplit = /*#__PURE__*/_react.default.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 rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.ownerDocument) || window.document : undefined;
@@ -246,50 +235,50 @@ const WindowSplit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       if (value_ !== value) setValue(value_);
     }
   }, [value_]);
-  const onTouchStart = event => {
+  const onTouchStart = event_1 => {
     setMouseDown(true);
   };
-  const onFocus = _react.default.useCallback(event => {
+  const onFocus = event_2 => {
     setFocus(true);
-    if ((0, _utils.is)('function', onFocus_)) onFocus_(event);
-  }, []);
-  const onBlur = _react.default.useCallback(event => {
+    if ((0, _utils.is)('function', onFocus_)) onFocus_(event_2);
+  };
+  const onBlur = event_3 => {
     setFocus(false);
-    if ((0, _utils.is)('function', onBlur_)) onBlur_(event);
-  }, []);
-  const onFocusIconButton = _react.default.useCallback(event => {
+    if ((0, _utils.is)('function', onBlur_)) onBlur_(event_3);
+  };
+  const onFocusIconButton = event_4 => {
     setFocus(true);
-  }, []);
-  const onBlurIconButton = _react.default.useCallback(event => {
+  };
+  const onBlurIconButton = event_5 => {
     setFocus(false);
-  }, []);
-  const onMouseDown = _react.default.useCallback(() => {
+  };
+  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 = (0, _utils.clamp)(valueNew + (forward ? 1 : -1), 0, 100);
+    let valueNew_2 = refs.value.current || 0;
+    valueNew_2 = (0, _utils.clamp)(valueNew_2 + (forward ? 1 : -1), 0, 100);
 
     // Update
-    onChange(valueNew);
+    onChange(valueNew_2);
   };
-  const onKeyDown = _react.default.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_6 => {
+    if (['ArrowUp', 'ArrowRight', 'ArrowLeft', 'ArrowDown', 'Home', 'End'].includes(event_6.key)) {
+      if (['Home', 'End'].includes(event_6.key) || ['ArrowLeft', 'ArrowRight'].includes(event_6.key) && refs.orientation.current === 'horizontal' || ['ArrowUp', 'ArrowDown'].includes(event_6.key) && refs.orientation.current === 'vertical') {
         // Prevent default
-        event.preventDefault();
-        let valueNew;
-        switch (event.key) {
+        event_6.preventDefault();
+        let valueNew_3;
+        switch (event_6.key) {
           case 'Home':
-            valueNew = refs.orientation.current !== 'vertical' ? 0 : 100;
-            return onChange(valueNew);
+            valueNew_3 = refs.orientation.current !== 'vertical' ? 0 : 100;
+            return onChange(valueNew_3);
           case 'End':
-            valueNew = refs.orientation.current !== 'vertical' ? 100 : 0;
-            return onChange(valueNew);
+            valueNew_3 = refs.orientation.current !== 'vertical' ? 100 : 0;
+            return onChange(valueNew_3);
           case 'ArrowUp':
           case 'ArrowLeft':
             return move();
@@ -301,15 +290,15 @@ const WindowSplit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         }
       }
     }
-  }, []);
+  };
   const onChange = valueItem => {
     const minValue = paddingEnd !== undefined ? paddingEnd : padding !== undefined ? padding : 0;
     const maxValue = paddingStart !== undefined ? paddingStart : padding !== undefined ? padding : 0;
-    const valueNew = (0, _utils.clamp)(valueItem, minValue, 100 - maxValue);
+    const valueNew_4 = (0, _utils.clamp)(valueItem, minValue, 100 - maxValue);
 
     // Update inner or controlled
-    if (!props.hasOwnProperty('value')) setValue(valueNew);
-    if ((0, _utils.is)('function', onChange_)) onChange_(valueNew);
+    if (!props.hasOwnProperty('value')) setValue(valueNew_4);
+    if ((0, _utils.is)('function', onChange_)) onChange_(valueNew_4);
   };
   const SeparatorProps = _objectSpread(_objectSpread({}, SeparatorProps_), {}, {
     role: 'separator',
@@ -366,9 +355,9 @@ const WindowSplit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     style: _objectSpread(_objectSpread({}, styles.end), EndProps === null || EndProps === void 0 ? void 0 : EndProps.style)
   }), children[1])), !noDivider && /*#__PURE__*/_react.default.createElement(Divider, (0, _extends2.default)({
     onTouchStart: onTouchStart,
-    onMouseDown: event => {
+    onMouseDown: event_7 => {
       onMouseDown();
-      if ((0, _utils.is)('function', DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.onMouseDown)) IconButtonProps.onMouseDown(event);
+      if ((0, _utils.is)('function', DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.onMouseDown)) IconButtonProps.onMouseDown(event_7);
     },
     orientation: orientation === 'vertical' ? 'horizontal' : 'vertical'
   }, DividerProps, {
@@ -380,9 +369,9 @@ const WindowSplit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     onFocus: onFocusIconButton,
     onBlur: onBlurIconButton,
     onTouchStart: onTouchStart,
-    onMouseDown: event => {
+    onMouseDown: event_8 => {
       onMouseDown();
-      if ((0, _utils.is)('function', IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.onMouseDown)) IconButtonProps.onMouseDown(event);
+      if ((0, _utils.is)('function', IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.onMouseDown)) IconButtonProps.onMouseDown(event_8);
     }
   }, SeparatorProps, IconButtonProps, {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('WindowSplit', theme) && ['onesy-WindowSplit-icon-button'], IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.className, classes.iconButton, classes[`iconButton_orientation_${orientation}`]]),

package/Zoom/Zoom.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { ITransition } from '..';
-export type IZoom = ITransition & {};
+export declare type IZoom = ITransition & {};
 declare const Zoom: React.FC<IZoom>;
 export default Zoom;