@onesy/ui-react 1.0.164 → 1.0.167

package/AreaChartItem/AreaChartItem.js

@@ -46,23 +46,12 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-AreaChartItem'
 });
 const AreaChartItem = /*#__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.onesyAreaChartItem) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Path = _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.Path) || _Path.default;
-  }, [theme]);
-  const Line = _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.Line) || _Line.default;
-  }, [theme]);
-  const Type = _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.Type) || _Type.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.onesyAreaChartItem) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Path = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Path) || _Path.default;
+  const Line = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Line) || _Line.default;
+  const Type = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Type) || _Type.default;
   const {
       tonal = true,
       color = 'primary',
@@ -105,13 +94,13 @@ const AreaChartItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     const result = [];
     const items = [animate_, animateTimeout_];
     items.forEach(item => {
-      if ((0, _utils.is)('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
+      if ((0, _utils.is)('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
     });
     return (0, _utils.unique)(result);
   }, [animate_, animateTimeout_]);
   const breakpoints = {};
-  keys.forEach(key => {
-    breakpoints[key] = (0, _useMediaQuery.default)(theme.breakpoints.media[key], {
+  keys.forEach(key_1 => {
+    breakpoints[key_1] = (0, _useMediaQuery.default)(theme.breakpoints.media[key_1], {
       element: refs.path.current
     });
   });
@@ -122,7 +111,7 @@ const AreaChartItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   refs.animate.current = animate;
   refs.animateTimeout.current = animateTimeout;
   refs.init.current = init;
-  const LegendItem = _react.default.useCallback(legendItemProps => {
+  const LegendItem = legendItemProps => {
     return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
       gap: 1,
       direction: "row",
@@ -137,8 +126,8 @@ const AreaChartItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     }), /*#__PURE__*/_react.default.createElement(Type, {
       version: "b3"
     }, name));
-  }, [theme]);
-  const LinearGradient = _react.default.useCallback(() => {
+  };
+  const LinearGradient = () => {
     return /*#__PURE__*/_react.default.createElement("linearGradient", {
       id: `areaChartItem_id_${name}`,
       x1: "0%",
@@ -154,7 +143,7 @@ const AreaChartItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       stopColor: refs.theme.current.palette.background.default.primary,
       stopOpacity: "0"
     }));
-  }, [theme]);
+  };
   const make = () => {
     // Make values into x, y, coordinates
     // normalized in rect width, height values
@@ -183,41 +172,41 @@ const AreaChartItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       };
       let lastX = 0;
       if (!refs.smooth.current) {
-        d.border = values_.reduce((result, item_, index) => {
-          const [x, y] = item_;
+        d.border = values_.reduce((result_0, item__0, index) => {
+          const [x_0, y_0] = item__0;
 
           // Move
-          if (index === 0) return result += `M ${x} ${y}`;
-          return result += `L ${x} ${y}`;
+          if (index === 0) return result_0 += `M ${x_0} ${y_0}`;
+          return result_0 += `L ${x_0} ${y_0}`;
         }, '');
-        d.background = values_.reduce((result, item_, index) => {
-          const [x, y] = item_;
+        d.background = values_.reduce((result_1, item__1, index_0) => {
+          const [x_1, y_1] = item__1;
 
           // Move
-          if (index === 0) return result += `M ${x} ${height} L ${x} ${y}`;
-          if (index === values_.length - 1) lastX = x;
-          return result += `L ${x} ${y}`;
+          if (index_0 === 0) return result_1 += `M ${x_1} ${height} L ${x_1} ${y_1}`;
+          if (index_0 === values_.length - 1) lastX = x_1;
+          return result_1 += `L ${x_1} ${y_1}`;
         }, '');
         d.background += `L ${lastX} ${height} Z`;
       } else {
-        d.border = values_.reduce((result, item_, index, array) => {
-          const [x, y] = item_;
+        d.border = values_.reduce((result_2, item__2, index_1, array) => {
+          const [x_2, y_2] = item__2;
 
           // Move
-          if (index === 0) return result += `M ${x} ${y}`;
-          const [x1, y1] = (0, _utils2.controlPoint)(array[index - 1], array[index - 2], item_, false, smoothRatio);
-          const [x2, y2] = (0, _utils2.controlPoint)(item_, array[index - 1], array[index + 1], true, smoothRatio);
-          return result += `C ${x1} ${y1} ${x2} ${y2} ${x} ${y}`;
+          if (index_1 === 0) return result_2 += `M ${x_2} ${y_2}`;
+          const [x1, y1] = (0, _utils2.controlPoint)(array[index_1 - 1], array[index_1 - 2], item__2, false, smoothRatio);
+          const [x2, y2] = (0, _utils2.controlPoint)(item__2, array[index_1 - 1], array[index_1 + 1], true, smoothRatio);
+          return result_2 += `C ${x1} ${y1} ${x2} ${y2} ${x_2} ${y_2}`;
         }, '');
-        d.background = values_.reduce((result, item_, index, array) => {
-          const [x, y] = item_;
+        d.background = values_.reduce((result_3, item__3, index_2, array_0) => {
+          const [x_3, y_3] = item__3;
 
           // Move
-          if (index === 0) return result += `M ${x} ${height} L ${x} ${y}`;
-          if (index === values_.length - 1) lastX = x;
-          const [x1, y1] = (0, _utils2.controlPoint)(array[index - 1], array[index - 2], item_, false, smoothRatio);
-          const [x2, y2] = (0, _utils2.controlPoint)(item_, array[index - 1], array[index + 1], true, smoothRatio);
-          return result += `C ${x1} ${y1} ${x2} ${y2} ${x} ${y}`;
+          if (index_2 === 0) return result_3 += `M ${x_3} ${height} L ${x_3} ${y_3}`;
+          if (index_2 === values_.length - 1) lastX = x_3;
+          const [x1_0, y1_0] = (0, _utils2.controlPoint)(array_0[index_2 - 1], array_0[index_2 - 2], item__3, false, smoothRatio);
+          const [x2_0, y2_0] = (0, _utils2.controlPoint)(item__3, array_0[index_2 - 1], array_0[index_2 + 1], true, smoothRatio);
+          return result_3 += `C ${x1_0} ${y1_0} ${x2_0} ${y2_0} ${x_3} ${y_3}`;
         }, '');
         d.background += `L ${lastX} ${height} Z`;
       }
@@ -269,8 +258,8 @@ const AreaChartItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
 
       // Legend item
       if ((0, _utils.is)('function', updateLegend)) {
-        updateLegend(previous => {
-          const newValues = [...(previous || [])];
+        updateLegend(previous_0 => {
+          const newValues = [...(previous_0 || [])];
           if (!newValues.find(itemLegend => {
             var _itemLegend$item;
             return ((_itemLegend$item = itemLegend.item) === null || _itemLegend$item === void 0 ? void 0 : _itemLegend$item.name) === name;
@@ -291,7 +280,7 @@ const AreaChartItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       setValue(element);
     }
   };
-  const initMethod = _react.default.useCallback(() => {
+  const initMethod = () => {
     if (animate) {
       if (!init && refs.path.current) {
         const total = refs.path.current.getTotalLength();
@@ -309,7 +298,7 @@ const AreaChartItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         }, refs.animateTimeout.current);
       }
     }
-  }, [init, animate]);
+  };
   _react.default.useEffect(() => {
     make();
     initMethod();

package/AudioPlayer/AudioPlayer.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
 import { IElementReference, IPropsAny } from '../types';
-export type IAudioPlayer = ILine & {
+export declare type IAudioPlayer = ILine & {
     name?: string;
     src?: string;
     mime?: string;

package/AudioPlayer/AudioPlayer.js

@@ -119,45 +119,18 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-AudioPlayer'
 });
 const AudioPlayer = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
-  var _SettingsMenuProps$Li;
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _theme$elements8, _SettingsMenuProps$Li;
   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.onesyAudioPlayer) === 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 Surface = _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.Surface) || _Surface.default;
-  }, [theme]);
-  const Slider = _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.Slider) || _Slider.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 Expand = _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.Expand) || _Expand.default;
-  }, [theme]);
-  const Type = _react.default.useMemo(() => {
-    var _theme$elements6;
-    return (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Type) || _Type.default;
-  }, [theme]);
-  const Menu = _react.default.useMemo(() => {
-    var _theme$elements7;
-    return (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.Menu) || _Menu.default;
-  }, [theme]);
-  const ListItem = _react.default.useMemo(() => {
-    var _theme$elements8;
-    return (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.ListItem) || _ListItem.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.onesyAudioPlayer) === 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 Surface = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Surface) || _Surface.default;
+  const Slider = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Slider) || _Slider.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 Expand = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Expand) || _Expand.default;
+  const Type = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Type) || _Type.default;
+  const Menu = (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.Menu) || _Menu.default;
+  const ListItem = (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.ListItem) || _ListItem.default;
   const {
       name,
       src,
@@ -246,7 +219,7 @@ const AudioPlayer = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   refs.play.current = play;
   refs.updating.current = updating;
   refs.startMediaSessionOnPlay.current = startMediaSessionOnPlay;
-  const startMediaSession = _react.default.useCallback(() => {
+  const startMediaSession = () => {
     if ('mediaSession' in navigator) {
       window.navigator.mediaSession.metadata = new MediaMetadata({
         title: name
@@ -284,8 +257,8 @@ const AudioPlayer = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         }
       }
     }
-  }, [name]);
-  const updateMediaSession = _react.default.useCallback(() => {
+  };
+  const updateMediaSession = () => {
     if ('mediaSession' in navigator) {
       window.navigator.mediaSession.setPositionState({
         duration: refs.duration.current,
@@ -293,40 +266,40 @@ const AudioPlayer = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         position: (0, _utils.clamp)(refs.time.current, 0, refs.duration.current)
       });
     }
-  }, [name]);
+  };
   refs.startMediaSession.current = startMediaSession;
   refs.updateMediaSession.current = updateMediaSession;
   const durationTime = duration_ || (meta === null || meta === void 0 ? void 0 : meta.duration);
-  const onVolumeChange = _react.default.useCallback(value => {
+  const onVolumeChange = value => {
     setVolume(value);
     refs.audio.current.volume = value;
-  }, []);
-  const onTimeChange = _react.default.useCallback(value => {
-    setTime(value);
-    refs.audio.current.currentTime = value;
+  };
+  const onTimeChange = value_0 => {
+    setTime(value_0);
+    refs.audio.current.currentTime = value_0;
 
     // update MediaSession
     refs.updateMediaSession.current();
-  }, []);
-  const onPlaybackSpeed = _react.default.useCallback(value_ => {
-    const value = (0, _utils.clamp)(value_, 0, 2);
-    setPlaybackSpeed(value);
+  };
+  const onPlaybackSpeed = value_ => {
+    const value_1 = (0, _utils.clamp)(value_, 0, 2);
+    setPlaybackSpeed(value_1);
     setOpenMenu(null);
-    refs.audio.current.playbackRate = value;
-  }, []);
-  const onForward = _react.default.useCallback(details => {
-    const part = refs.duration.current * 0.1;
-    const toMove = (0, _utils.clamp)((details === null || details === void 0 ? void 0 : details.seekOffset) || part, 1, refs.duration.current);
-    const value = (0, _utils.clamp)(refs.time.current + toMove, 0, refs.duration.current);
-    refs.onTimeChange.current(value);
-  }, []);
-  const onBackward = _react.default.useCallback(details => {
+    refs.audio.current.playbackRate = value_1;
+  };
+  const onForward = details_0 => {
     const part = refs.duration.current * 0.1;
-    const toMove = (0, _utils.clamp)((details === null || details === void 0 ? void 0 : details.seekOffset) || part, 1, refs.duration.current);
-    const value = (0, _utils.clamp)(refs.time.current - toMove, 0, refs.duration.current);
-    refs.onTimeChange.current(value);
-  }, []);
-  const onPlay = _react.default.useCallback(() => {
+    const toMove = (0, _utils.clamp)((details_0 === null || details_0 === void 0 ? void 0 : details_0.seekOffset) || part, 1, refs.duration.current);
+    const value_2 = (0, _utils.clamp)(refs.time.current + toMove, 0, refs.duration.current);
+    refs.onTimeChange.current(value_2);
+  };
+  const onBackward = details_1 => {
+    const part_0 = refs.duration.current * 0.1;
+    const toMove_0 = (0, _utils.clamp)((details_1 === null || details_1 === void 0 ? void 0 : details_1.seekOffset) || part_0, 1, refs.duration.current);
+    const value_3 = (0, _utils.clamp)(refs.time.current - toMove_0, 0, refs.duration.current);
+    refs.onTimeChange.current(value_3);
+  };
+  const onPlay = () => {
     try {
       setPlay(true);
       refs.audio.current.play();
@@ -336,43 +309,43 @@ const AudioPlayer = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
 
       // update MediaSession
       refs.updateMediaSession.current();
-    } catch (error) {
-      console.error(`AudioPlayer`, error);
+    } catch (error_0) {
+      console.error(`AudioPlayer`, error_0);
     }
-  }, []);
-  const onPause = _react.default.useCallback(() => {
+  };
+  const onPause = () => {
     setPlay(false);
     refs.audio.current.pause();
-  }, []);
-  const onStop = _react.default.useCallback(() => {
+  };
+  const onStop = () => {
     setPlay(false);
     refs.audio.current.pause();
     refs.audio.current.currentTime = 0;
-  }, []);
-  const onMute = _react.default.useCallback(() => {
+  };
+  const onMute = () => {
     setMuted(true);
     refs.audio.current.muted = true;
-  }, []);
-  const onUnmute = _react.default.useCallback(() => {
+  };
+  const onUnmute = () => {
     setMuted(false);
     refs.audio.current.muted = false;
-  }, []);
+  };
   refs.onPlay.current = onPlay;
   refs.onPause.current = onPause;
   refs.onTimeChange.current = onTimeChange;
   refs.onForward.current = onForward;
   refs.onBackward.current = onBackward;
   refs.onStop.current = onStop;
-  const init = _react.default.useCallback(() => {
+  const init = () => {
     var _refs$root$current;
     setLoaded(false);
     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;
     refs.audio.current = rootDocument.createElement('audio');
     const audio = refs.audio.current;
     audio.addEventListener('loadedmetadata', () => {
-      const value = audio.duration;
-      if (!(0, _utils.is)('number', durationTime) && (0, _utils.is)('number', value)) {
-        if (refs.duration.current === undefined) setDuration(value);
+      const value_4 = audio.duration;
+      if (!(0, _utils.is)('number', durationTime) && (0, _utils.is)('number', value_4)) {
+        if (refs.duration.current === undefined) setDuration(value_4);
         setLoaded(true);
       }
     });
@@ -380,17 +353,17 @@ const AudioPlayer = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       refs.onStop.current();
     });
     audio.addEventListener('timeupdate', () => {
-      const value = audio.currentTime;
-      if (!refs.updating.current && refs.time.current !== value) {
-        setTime(value);
+      const value_5 = audio.currentTime;
+      if (!refs.updating.current && refs.time.current !== value_5) {
+        setTime(value_5);
 
         // update MediaSession
         refs.updateMediaSession.current();
       }
     });
     audio.addEventListener('ratechange', () => {
-      const value = audio.playbackRate;
-      setPlaybackSpeed(value);
+      const value_6 = audio.playbackRate;
+      setPlaybackSpeed(value_6);
     });
 
     // start MediaSession
@@ -400,7 +373,7 @@ const AudioPlayer = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       setLoaded(true);
     }
     audio.src = src;
-  }, [src, durationTime, startMediaSession]);
+  };
   _react.default.useEffect(() => {
     if (loaded) {
       let urlNew = src;
@@ -421,29 +394,29 @@ const AudioPlayer = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       if (playing) refs.onPlay.current();
     }
   }, [quality]);
-  const onMouseEnter = _react.default.useCallback(() => {
+  const onMouseEnter = () => {
     setVolumeVisible(true);
-  }, []);
-  const onMouseLeave = _react.default.useCallback(() => {
+  };
+  const onMouseLeave = () => {
     setVolumeVisible(false);
-  }, []);
-  const onUpdating = _react.default.useCallback(() => {
+  };
+  const onUpdating = () => {
     setUpdating(refs.play.current ? 'play' : true);
     if (refs.play.current) onPause();
-  }, [onPause]);
-  const onUpdatingDone = _react.default.useCallback(() => {
+  };
+  const onUpdatingDone = () => {
     const updatingPrevious = refs.updating.current;
     setUpdating(false);
     if (updatingPrevious === 'play') onPlay();
-  }, [onPlay]);
+  };
   _react.default.useEffect(() => {
     var _refs$root$current2;
-    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current2 = refs.root.current) === null || _refs$root$current2 === void 0 ? void 0 : _refs$root$current2.ownerDocument) || window.document : undefined;
-    rootDocument.addEventListener('mouseup', onUpdatingDone);
-    rootDocument.addEventListener('touchend', onUpdatingDone);
+    const rootDocument_0 = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current2 = refs.root.current) === null || _refs$root$current2 === void 0 ? void 0 : _refs$root$current2.ownerDocument) || window.document : undefined;
+    rootDocument_0.addEventListener('mouseup', onUpdatingDone);
+    rootDocument_0.addEventListener('touchend', onUpdatingDone);
     return () => {
-      rootDocument.removeEventListener('mouseup', onUpdatingDone);
-      rootDocument.removeEventListener('touchend', onUpdatingDone);
+      rootDocument_0.removeEventListener('mouseup', onUpdatingDone);
+      rootDocument_0.removeEventListener('touchend', onUpdatingDone);
     };
   }, []);
   _react.default.useEffect(() => {
@@ -451,38 +424,38 @@ const AudioPlayer = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     init();
   }, [src]);
   const durationToValue = item => {
-    let value = '';
+    let value_7 = '';
     const separator = ':';
-    if (item.hour) value += `${(0, _utils.getLeadingZerosNumber)(item.hour, {
+    if (item.hour) value_7 += `${(0, _utils.getLeadingZerosNumber)(item.hour, {
       leadingZeros: 0
     })}`;
     if (item.minute) {
-      if (value) value += separator;
-      value += `${(0, _utils.getLeadingZerosNumber)(item.minute, {
+      if (value_7) value_7 += separator;
+      value_7 += `${(0, _utils.getLeadingZerosNumber)(item.minute, {
         leadingZeros: 0
       })}`;
     } else {
-      if (value) value += separator;
-      value += '0';
+      if (value_7) value_7 += separator;
+      value_7 += '0';
     }
     if (item.second) {
-      if (value) value += separator;
-      value += `${(0, _utils.getLeadingZerosNumber)(item.second, {
+      if (value_7) value_7 += separator;
+      value_7 += `${(0, _utils.getLeadingZerosNumber)(item.second, {
         leadingZeros: 1
       })}`;
     } else {
-      if (value) value += separator;
-      value += '00';
+      if (value_7) value_7 += separator;
+      value_7 += '00';
     }
-    return value;
+    return value_7;
   };
-  const onQuality = _react.default.useCallback(version => {
+  const onQuality = version => {
     setQuality(version);
     setOpenMenu(null);
-  }, []);
-  const onSettingsMenuClose = _react.default.useCallback(() => {
+  };
+  const onSettingsMenuClose = () => {
     setOpenMenu(null);
-  }, []);
+  };
   const getSettingsMenuItems = () => {
     const itemProps = {
       button: true,
@@ -572,11 +545,11 @@ const AudioPlayer = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     disabled
   }, SliderProps);
   return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    ref: item => {
+    ref: item_0 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_0);else ref.current = item_0;
       }
-      refs.root.current = item;
+      refs.root.current = item_0;
     },
     gap: 1,
     direction: "column",

package/AudioRecorder/AudioRecorder.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
 import { IElementReference, IPropsAny } from '../types';
-export type IAudioRecorder = ILine & {
+export declare type IAudioRecorder = ILine & {
     pause?: boolean;
     renderMain?: (props: {
         onStart: () => any;