@onesy/ui-react 1.0.164 → 1.0.167

package/RoundProgress/RoundProgress.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IBaseElement, IPropsAny } from '../types';
-export type IRoundProgress = IBaseElement & {
+export declare type IRoundProgress = IBaseElement & {
     version?: 'determinate' | 'indeterminate';
     value?: number;
     noShrink?: boolean;

package/RoundProgress/RoundProgress.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _compilerRuntime = require("react/compiler-runtime");
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("@onesy/utils");
 var _styleReact = require("@onesy/style-react");
@@ -159,27 +160,33 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-RoundProgress'
 });
 const RoundProgress = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2;
+  const $ = (0, _compilerRuntime.c)(3);
   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.onesyRoundProgress) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
+  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.onesyRoundProgress) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
   const {
-      tonal = true,
-      color = 'primary',
-      size = 'regular',
-      version = 'indeterminate',
+      tonal: t0,
+      color: t1,
+      size: t2,
+      version: t3,
       value,
       noShrink,
-      thickness = 2,
-      rounded: rounded_ = true,
-      pathProps = {},
+      thickness: t4,
+      rounded: t5,
+      pathProps: t6,
       pathBackgroundProps,
       className,
       style,
       children
     } = props,
     other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const tonal = t0 === undefined ? true : t0;
+  const color = t1 === undefined ? "primary" : t1;
+  const size = t2 === undefined ? "regular" : t2;
+  const version = t3 === undefined ? "indeterminate" : t3;
+  const thickness = t4 === undefined ? 2 : t4;
+  const rounded_ = t5 === undefined ? true : t5;
+  const pathProps = t6 === undefined ? {} : t6;
   const {
     classes
   } = useStyle();
@@ -188,7 +195,9 @@ const RoundProgress = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     root: {},
     circle: {}
   };
-  if (!classes[`size_${size}`]) styles.root.fontSize = (0, _utils.is)('number', size) ? `${size}px` : size;
+  if (!classes[`size_${size}`]) {
+    styles.root.fontSize = (0, _utils.is)("number", size) ? `${size}px` : size;
+  }
   if (!classes[`color_${color}`]) {
     styles.root.color = color;
     if (tonal) {
@@ -196,24 +205,34 @@ const RoundProgress = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       styles.root.color = theme.methods.palette.color.value(undefined, 50, true, palette);
     }
   }
-  if (version === 'determinate') {
+  if (version === "determinate") {
     rounded = false;
-    pathProps['pathLength'] = 100;
+    pathProps.pathLength = 100;
     styles.circle.strokeDashoffset = 101 - value;
-
-    // 0%
-    if (styles.circle.strokeDashoffset === 1) styles.circle.strokeDashoffset = 0;
-    other['aria-valuenow'] = value;
-    other['aria-valuemin'] = 0;
-    other['aria-valuemax'] = 100;
-    other['aria-valuetext'] = `${value}%`;
+    if (styles.circle.strokeDashoffset === 1) {
+      styles.circle.strokeDashoffset = 0;
+    }
+    other["aria-valuenow"] = value;
+    other["aria-valuemin"] = 0;
+    other["aria-valuemax"] = 100;
+    other["aria-valuetext"] = `${value}%`;
+  }
+  const t7 = (0, _styleReact.classNames)([(0, _utils2.staticClassName)("RoundedProgress", theme) && ["onesy-RoundedProgress-root", `onesy-RoundedProgress-version-${version}`, `onesy-RoundedProgress-size-${size}`], className, classes.root, classes[`size_${size}`], classes[`color_${color}`], classes[`version_${version}`], tonal && classes[`tonal_color_${color}`]]);
+  let t8;
+  if ($[0] !== classes.svg || $[1] !== theme) {
+    t8 = (0, _styleReact.classNames)([(0, _utils2.staticClassName)("RoundedProgress", theme) && ["onesy-RoundedProgress-svg"], classes.svg]);
+    $[0] = classes.svg;
+    $[1] = theme;
+    $[2] = t8;
+  } else {
+    t8 = $[2];
   }
   return /*#__PURE__*/_react.default.createElement("span", {
     ref: ref,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('RoundedProgress', theme) && ['onesy-RoundedProgress-root', `onesy-RoundedProgress-version-${version}`, `onesy-RoundedProgress-size-${size}`], className, classes.root, classes[`size_${size}`], classes[`color_${color}`], classes[`version_${version}`], tonal && classes[`tonal_color_${color}`]])
+    className: t7
   }, /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
     viewBox: "0 0 24 24",
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('RoundedProgress', theme) && ['onesy-RoundedProgress-svg'], classes.svg]),
+    className: t8,
     style: _objectSpread(_objectSpread({}, styles.root), style)
   }, other), /*#__PURE__*/_react.default.createElement("circle", (0, _extends2.default)({
     fill: "none",
@@ -222,9 +241,9 @@ const RoundProgress = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     cy: "12",
     r: "10"
   }, !rounded && {
-    strokeLinecap: 'butt'
+    strokeLinecap: "butt"
   }, pathBackgroundProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('RoundedProgress', theme) && ['onesy-RoundedProgress-path-background'], pathBackgroundProps === null || pathBackgroundProps === void 0 ? void 0 : pathBackgroundProps.className, classes.pathBackground, classes[`path_${version}`]])
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("RoundedProgress", theme) && ["onesy-RoundedProgress-path-background"], pathBackgroundProps === null || pathBackgroundProps === void 0 ? void 0 : pathBackgroundProps.className, classes.pathBackground, classes[`path_${version}`]])
   })), /*#__PURE__*/_react.default.createElement("circle", (0, _extends2.default)({
     fill: "none",
     strokeWidth: thickness,
@@ -232,9 +251,9 @@ const RoundProgress = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     cy: "12",
     r: "10"
   }, !rounded && {
-    strokeLinecap: 'butt'
+    strokeLinecap: "butt"
   }, pathProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('RoundedProgress', theme) && ['onesy-RoundedProgress-path'], pathProps === null || pathProps === void 0 ? void 0 : pathProps.className, classes.path, classes[`path_${version}`], noShrink && classes.path_indeterminate_noShrink]),
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("RoundedProgress", theme) && ["onesy-RoundedProgress-path"], pathProps === null || pathProps === void 0 ? void 0 : pathProps.className, classes.path, classes[`path_${version}`], noShrink && classes.path_indeterminate_noShrink]),
     style: _objectSpread(_objectSpread({}, styles.circle), pathProps === null || pathProps === void 0 ? void 0 : pathProps.style)
   }))), children);
 });

package/ScatterChart/ScatterChart.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { IChart } from '../Chart/Chart';
-export type IScatterChart = IChart & {};
+export declare type IScatterChart = IChart & {};
 declare const ScatterChart: React.FC<IScatterChart>;
 export default ScatterChart;

package/ScatterChart/ScatterChart.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _compilerRuntime = require("react/compiler-runtime");
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("@onesy/utils");
 var _styleReact = require("@onesy/style-react");
@@ -23,19 +24,12 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-ScatterChart'
 });
 const ScatterChart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2;
+  const $ = (0, _compilerRuntime.c)(7);
   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.onesyScatterChart) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Chart = _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.Chart) || _Chart.default;
-  }, [theme]);
-  const ScatterChartItem = _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.ScatterChartItem) || _ScatterChartItem.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.onesyScatterChart) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Chart = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Chart) || _Chart.default;
+  const ScatterChartItem = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.ScatterChartItem) || _ScatterChartItem.default;
   const {
       values,
       className
@@ -44,13 +38,28 @@ const ScatterChart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const {
     classes
   } = useStyle();
-  return /*#__PURE__*/_react.default.createElement(Chart, (0, _extends2.default)({
-    ref: ref,
-    values: values,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ScatterChart', theme) && ['onesy-ScatterChart-root'], className, classes.root])
-  }, other), (0, _utils.is)('array', values) && values.map((item, index) => /*#__PURE__*/_react.default.createElement(ScatterChartItem, (0, _extends2.default)({
+  const t0 = (0, _styleReact.classNames)([(0, _utils2.staticClassName)("ScatterChart", theme) && ["onesy-ScatterChart-root"], className, classes.root]);
+  const t1 = (0, _utils.is)("array", values) && values.map((item, index) => /*#__PURE__*/_react.default.createElement(ScatterChartItem, (0, _extends2.default)({
     key: index
-  }, item))));
+  }, item)));
+  let t2;
+  if ($[0] !== Chart || $[1] !== other || $[2] !== ref || $[3] !== t0 || $[4] !== t1 || $[5] !== values) {
+    t2 = /*#__PURE__*/_react.default.createElement(Chart, (0, _extends2.default)({
+      ref: ref,
+      values: values,
+      className: t0
+    }, other), t1);
+    $[0] = Chart;
+    $[1] = other;
+    $[2] = ref;
+    $[3] = t0;
+    $[4] = t1;
+    $[5] = values;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
 });
 ScatterChart.displayName = 'onesy-ScatterChart';
 var _default = exports.default = ScatterChart;

package/ScatterChartItem/ScatterChartItem.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TMethod } from '@onesy/models';
 import { IChart, IChartValueValues } from '../Chart/Chart';
-export type IScatterChartItem = IChart & {
+export declare type IScatterChartItem = IChart & {
     name?: string;
     refs?: {
         wrapper?: HTMLElement;

package/ScatterChartItem/ScatterChartItem.js

@@ -33,23 +33,12 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-ScatterChartItem'
 });
 const ScatterChartItem = /*#__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.onesyScatterChartItem) === 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 Path = _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.Path) || _Path.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.onesyScatterChartItem) === 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 Path = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Path) || _Path.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',
@@ -85,13 +74,13 @@ const ScatterChartItem = /*#__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
     });
   });
@@ -103,7 +92,7 @@ const ScatterChartItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) =>
   refs.animate.current = animate;
   refs.animateTimeout.current = animateTimeout;
   refs.init.current = init;
-  const LegendItem = _react.default.useCallback(() => {
+  const LegendItem = () => {
     return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
       gap: 1,
       direction: "row",
@@ -118,7 +107,7 @@ const ScatterChartItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) =>
     }), /*#__PURE__*/_react.default.createElement(Type, {
       version: "b3"
     }, name));
-  }, [theme]);
+  };
   const make = () => {
     // Make values into x, y, coordinates
     // normalized in rect width, height values
@@ -143,10 +132,10 @@ const ScatterChartItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) =>
       });
       const element = /*#__PURE__*/_react.default.createElement("g", {
         ref: refs.path
-      }, values_.map((item, index) => /*#__PURE__*/_react.default.createElement(Path, (0, _extends2.default)({
+      }, values_.map((item_0, index) => /*#__PURE__*/_react.default.createElement(Path, (0, _extends2.default)({
         key: index,
-        cx: item[0],
-        cy: item[1],
+        cx: item_0[0],
+        cy: item_0[1],
         r: 4,
         fill: !refs.theme.current.palette.color[color] ? color : refs.theme.current.palette.color[color]['main'],
         stroke: "none"
@@ -185,7 +174,7 @@ const ScatterChartItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) =>
       setValue(element);
     }
   };
-  const initMethod = _react.default.useCallback(() => {
+  const initMethod = () => {
     if (animate) {
       if (!init) {
         refs.pathStyle.current = {
@@ -203,7 +192,7 @@ const ScatterChartItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) =>
         }, refs.animateTimeout.current);
       }
     }
-  }, [init, animate]);
+  };
   _react.default.useEffect(() => {
     make();
     initMethod();

package/ScreenCapture/ScreenCapture.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ISurface } from '../Surface/Surface';
 import { IElementReference, IPropsAny } from '../types';
-export type TTrackValueVersion = 'image' | 'canvas';
-export type IScreenCapture = ISurface & {
+export declare type TTrackValueVersion = 'image' | 'canvas';
+export declare type IScreenCapture = ISurface & {
     nameDefault?: string;
     name?: string;
     onChangeName?: (value: string) => any;

package/ScreenCapture/ScreenCapture.js

@@ -43,41 +43,17 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-ScreenCapture'
 });
 const ScreenCapture = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
-  var _refs$root$current5;
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _refs$root$current5;
   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.onesyScreenCapture) === 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 Tooltip = _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.Tooltip) || _Tooltip.default;
-  }, [theme]);
-  const Surface = _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.Surface) || _Surface.default;
-  }, [theme]);
-  const TextField = _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.TextField) || _TextField.default;
-  }, [theme]);
-  const IconButton = _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.IconButton) || _IconButton.default;
-  }, [theme]);
-  const ImageCrop = _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.ImageCrop) || _ImageCrop.default;
-  }, [theme]);
-  const Portal = _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.Portal) || _Portal.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.onesyScreenCapture) === 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 Tooltip = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Tooltip) || _Tooltip.default;
+  const Surface = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Surface) || _Surface.default;
+  const TextField = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.TextField) || _TextField.default;
+  const IconButton = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.IconButton) || _IconButton.default;
+  const ImageCrop = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.ImageCrop) || _ImageCrop.default;
+  const Portal = (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.Portal) || _Portal.default;
   const {
       tonal = true,
       color = 'primary',
@@ -131,12 +107,12 @@ const ScreenCapture = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   });
   refs.canvas.current = canvas;
   refs.canvasSelectorValue.current = canvasSelectorValue;
-  const onInit = _react.default.useCallback(() => {
+  const onInit = () => {
     const value = !(touch || (0, _utils.isOS)('mobile'));
     setInit(true);
     setSupported(value);
     if ((0, _utils.is)('function', onInit_)) onInit_(value);
-  }, [touch, onInit_]);
+  };
   _react.default.useEffect(() => {
     var _refs$root$current;
     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;
@@ -191,12 +167,12 @@ const ScreenCapture = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   }, [name_]);
   _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;
+    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;
     if (canvas) {
-      rootDocument.body.style.overflow = 'hidden';
+      rootDocument_0.body.style.overflow = 'hidden';
     } else {
       setCanvasSelectorValue(false);
-      if (rootDocument.body.style.overflow === 'hidden') rootDocument.body.style.removeProperty('overflow');
+      if (rootDocument_0.body.style.overflow === 'hidden') rootDocument_0.body.style.removeProperty('overflow');
     }
   }, [canvas]);
   const onChange = value_ => {
@@ -204,9 +180,9 @@ const ScreenCapture = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     if (!props.hasOwnProperty('value')) setName(value_);
     if ((0, _utils.is)('function', onChangeName)) onChangeName(value_);
   };
-  const trackToValue = _react.default.useCallback(async (track, version = 'canvas') => {
+  const trackToValue = async (track, version = 'canvas') => {
     var _refs$root$current3;
-    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current3 = refs.root.current) === null || _refs$root$current3 === void 0 ? void 0 : _refs$root$current3.ownerDocument) || window.document : undefined;
+    const rootDocument_1 = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current3 = refs.root.current) === null || _refs$root$current3 === void 0 ? void 0 : _refs$root$current3.ownerDocument) || window.document : undefined;
     const canvasElement = document.createElement('canvas');
     const {
       width,
@@ -216,7 +192,7 @@ const ScreenCapture = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     canvasElement.height = height || window.innerHeight;
 
     // Hide elements
-    const elements = Array.from(rootDocument.body.querySelectorAll('.onesy-ScreenCapture-root')).map(element => {
+    const elements = Array.from(rootDocument_1.body.querySelectorAll('.onesy-ScreenCapture-root')).map(element => {
       if (element.parentElement.classList.contains('onesy-Move-root')) return element.parentElement;
       return element;
     });
@@ -229,19 +205,19 @@ const ScreenCapture = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     canvasElement.getContext('2d').drawImage(refs.element.current, 0, 0);
 
     // Unhide the elements
-    elements.forEach(item => item.style.removeProperty('visibility'));
+    elements.forEach(item_0 => item_0.style.removeProperty('visibility'));
     if (version === 'canvas') return canvasElement;
     const image = canvasElement.toDataURL(type, quality);
     return image;
-  }, [type, quality]);
-  const make = _react.default.useCallback(async (version = 'image', options = {}) => {
+  };
+  const make = async (version_0 = 'image', options = {}) => {
     var _refs$root$current4;
-    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current4 = refs.root.current) === null || _refs$root$current4 === void 0 ? void 0 : _refs$root$current4.ownerDocument) || window.document : undefined;
-    refs.element.current = rootDocument.createElement('video');
+    const rootDocument_2 = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current4 = refs.root.current) === null || _refs$root$current4 === void 0 ? void 0 : _refs$root$current4.ownerDocument) || window.document : undefined;
+    refs.element.current = rootDocument_2.createElement('video');
     let tracks;
     const cleanUp = () => {
       // Stop tracks
-      (tracks || []).forEach(item => item.stop());
+      (tracks || []).forEach(item_1 => item_1.stop());
 
       // Unload the element
       refs.element.current = undefined;
@@ -256,34 +232,34 @@ const ScreenCapture = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       // Required to work
       await refs.element.current.play();
       tracks = mediaStream.getVideoTracks();
-      const track = tracks[0];
-      const value = await trackToValue(track, version);
+      const track_0 = tracks[0];
+      const value_0 = await trackToValue(track_0, version_0);
 
       // Clean up
       cleanUp();
-      return value;
+      return value_0;
     } catch (error) {
       console.log('ScreenCapture make', error);
 
       // Clean up
       cleanUp();
     }
-  }, []);
-  const onView = _react.default.useCallback(async event => {
+  };
+  const onView = async event_0 => {
     setLoading(items => [...items, 'view']);
     try {
-      const image = await make();
-      (0, _utils.download)(name, image);
-    } catch (error) {
-      console.log('onView', error);
+      const image_0 = await make();
+      (0, _utils.download)(name, image_0);
+    } catch (error_0) {
+      console.log('onView', error_0);
     }
-    setLoading(items => items.filter(item => item !== 'view'));
-    setDone(items => [...items, 'view']);
+    setLoading(items_0 => items_0.filter(item_2 => item_2 !== 'view'));
+    setDone(items_1 => [...items_1, 'view']);
     setTimeout(() => {
-      setDone(items => items.filter(item => item !== 'view'));
+      setDone(items_2 => items_2.filter(item_3 => item_3 !== 'view'));
     }, 1400);
-    if ((0, _utils.is)('function', onView_)) onView_(event);
-  }, [name, make]);
+    if ((0, _utils.is)('function', onView_)) onView_(event_0);
+  };
 
   // const onEntirePage = async (event: React.MouseEvent<any>) => {
   //   setLoading(items => [...items, 'entirePage']);
@@ -318,44 +294,44 @@ const ScreenCapture = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   //   if (is('function', onEntirePage_)) onEntirePage_(event);
   // };
 
-  const onFree = async event => {
-    setLoading(items => [...items, 'free']);
+  const onFree = async event_1 => {
+    setLoading(items_3 => [...items_3, 'free']);
 
     // Update canvas
     try {
       const valueCanvas = await make('canvas');
       setCanvas(valueCanvas);
-    } catch (error) {
-      console.log('onFree', error);
+    } catch (error_1) {
+      console.log('onFree', error_1);
     }
-    setLoading(items => items.filter(item => item !== 'free'));
-    if ((0, _utils.is)('function', onFree_)) onFree_(event);
+    setLoading(items_4 => items_4.filter(item_4 => item_4 !== 'free'));
+    if ((0, _utils.is)('function', onFree_)) onFree_(event_1);
   };
-  const onFreeSave = event => {
+  const onFreeSave = event_2 => {
     // Crop the canvas
-    const valueCanvas = (0, _utils.canvasCrop)(refs.canvas.current, refs.canvasSelectorValue.current.left, refs.canvasSelectorValue.current.top, refs.canvasSelectorValue.current.width, refs.canvasSelectorValue.current.height);
+    const valueCanvas_0 = (0, _utils.canvasCrop)(refs.canvas.current, refs.canvasSelectorValue.current.left, refs.canvasSelectorValue.current.top, refs.canvasSelectorValue.current.width, refs.canvasSelectorValue.current.height);
 
     // Download the image from canvas datauri
     // of the image type and quality, name
-    const uri = valueCanvas.toDataURL(type, quality);
+    const uri = valueCanvas_0.toDataURL(type, quality);
     (0, _utils.download)(name, uri, type);
 
     // Clear the image
     setCanvas('');
-    setDone(items => [...items, 'free']);
+    setDone(items_5 => [...items_5, 'free']);
     setTimeout(() => {
-      setDone(items => items.filter(item => item !== 'free'));
+      setDone(items_6 => items_6.filter(item_5 => item_5 !== 'free'));
     }, 1400);
-    if ((0, _utils.is)('function', onFreeSave_)) onFreeSave_(event);
+    if ((0, _utils.is)('function', onFreeSave_)) onFreeSave_(event_2);
   };
-  const onFreeClose = event => {
+  const onFreeClose = event_3 => {
     // Clear the image
     setCanvas('');
-    if ((0, _utils.is)('function', onFreeClose_)) onFreeClose_(event);
+    if ((0, _utils.is)('function', onFreeClose_)) onFreeClose_(event_3);
   };
-  const onImageCropSelectorChange = _react.default.useCallback(values => {
+  const onImageCropSelectorChange = values => {
     setCanvasSelectorValue(values);
-  }, []);
+  };
   const iconButtonProps = {
     tonal,
     color: 'inherit',
@@ -376,11 +352,11 @@ const ScreenCapture = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   if (!supported) return null;
   const rootDocumentElement = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current5 = refs.root.current) === null || _refs$root$current5 === void 0 ? void 0 : _refs$root$current5.ownerDocument) || window.document : undefined;
   return /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
-    ref: item => {
+    ref: item_6 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_6);else ref.current = item_6;
       }
-      refs.root.current = item;
+      refs.root.current = item_6;
     },
     id: "onesy-screen-capture",
     tonal: tonal,
@@ -410,7 +386,7 @@ const ScreenCapture = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   }) : /*#__PURE__*/_react.default.createElement(IconView, null))), free && /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
     name: canvas ? l('Save') : l('Free form')
   }, tooltipProps, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
-    onClick: event => canvas ? onFreeSave(event) : onFree(event),
+    onClick: event_4 => canvas ? onFreeSave(event_4) : onFree(event_4),
     loading: loading.includes('free'),
     disabled: done.includes('free')
   }, iconButtonProps, IconButtonProps), done.includes('free') ? /*#__PURE__*/_react.default.createElement(_Buttons.IconDoneAnimated, {

package/Section/Section.d.ts

@@ -2,8 +2,8 @@ import React from 'react';
 import { TPaletteVersion } from '@onesy/style-react';
 import { ILine } from '../Line/Line';
 import { IValueBreakpoints, IMediaObject, IPropsAny } from '../types';
-export type ISize = 'extra_small' | 'small' | 'regular' | 'large' | 'extra_large' | 'extra_extra_large';
-export type ISection = ILine & {
+export declare type ISize = 'extra_small' | 'small' | 'regular' | 'large' | 'extra_large' | 'extra_extra_large';
+export declare type ISection = ILine & {
     themed?: boolean;
     title?: string | Partial<Record<IValueBreakpoints, string>>;
     description?: string | Partial<Record<IValueBreakpoints, string>>;