@onesy/ui-react 1.0.163 → 1.0.165

package/Line/Line.js

@@ -209,15 +209,10 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Line'
 });
 const Line = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements;
   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.onesyLine) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Divider = _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.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.onesyLine) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Divider = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Divider) || _Divider.default;
   const {
       display: display_,
       align: align_,
@@ -248,13 +243,13 @@ const Line = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     const result = [];
     const items = [display_, align_, justify_, direction_, gap_, rowGap_, columnGap_, divider_, wrap_, flex_, flexNo_, fullWidth_];
     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);
   }, [display_, align_, justify_, direction_, gap_, rowGap_, columnGap_, divider_, wrap_, flex_, flexNo_, fullWidth_]);
   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.root.current
     });
   });
@@ -286,15 +281,15 @@ const Line = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     orientation: direction.includes('row') ? 'vertical' : 'horizontal'
   }, DividerProps));
   return /*#__PURE__*/_react.default.createElement(Component, (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;
     },
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Line', theme) && ['onesy-Line-root', `onesy-Line-direction-${direction}`], className, classes.root, classes[`display_${display.replace('-', '_')}`], classes[`wrap_${wrap}`], classes[`direction_${direction}`], classes[`align_${align}`], classes[`justify_${justify}`], classes[`gap_${String(gap).replace('.', '')}`], classes[`rowGap_${String(rowGap).replace('.', '')}`], classes[`columnGap_${String(columnGap).replace('.', '')}`], flex && classes.flex, flexNo && classes.flexNo, fullWidth && classes.fullWidth]),
     style: _objectSpread(_objectSpread({}, styles.root), style)
-  }, other), _react.default.Children.toArray(children).flatMap((item, index) => !divider || index === children.length - 1 ? [item] : [item, Divider_]));
+  }, other), _react.default.Children.toArray(children).flatMap((item_1, index) => !divider || index === children.length - 1 ? [item_1] : [item_1, Divider_]));
 });
 Line.displayName = 'onesy-Line';
 var _default = exports.default = Line;

package/LineChart/LineChart.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IChart } from '../Chart/Chart';
-export type ILineChart = IChart & {
+export declare type ILineChart = IChart & {
     smooth?: boolean;
     smoothRatio?: number;
 };

package/LineChart/LineChart.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-LineChart'
 });
 const LineChart = /*#__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.onesyLineChart) === 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 LineChartItem = _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.LineChartItem) || _LineChartItem.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.onesyLineChart) === 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 LineChartItem = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.LineChartItem) || _LineChartItem.default;
   const {
       values,
       smooth,
@@ -46,15 +40,30 @@ const LineChart = /*#__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)('LineChart', theme) && ['onesy-LineChart-root'], className, classes.root])
-  }, other), (0, _utils.is)('array', values) && values.map((item, index) => /*#__PURE__*/_react.default.createElement(LineChartItem, (0, _extends2.default)({
+  const t0 = (0, _styleReact.classNames)([(0, _utils2.staticClassName)("LineChart", theme) && ["onesy-LineChart-root"], className, classes.root]);
+  const t1 = (0, _utils.is)("array", values) && values.map((item, index) => /*#__PURE__*/_react.default.createElement(LineChartItem, (0, _extends2.default)({
     key: index,
     smooth: smooth,
     smoothRatio: smoothRatio
-  }, 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;
 });
 LineChart.displayName = 'onesy-LineChart';
 var _default = exports.default = LineChart;

package/LineChartItem/LineChartItem.d.ts

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

package/LineChartItem/LineChartItem.js

@@ -32,23 +32,12 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-LineChartItem'
 });
 const LineChartItem = /*#__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.onesyLineChartItem) === 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.onesyLineChartItem) === 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',
@@ -87,13 +76,13 @@ const LineChartItem = /*#__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
     });
   });
@@ -106,7 +95,7 @@ const LineChartItem = /*#__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",
@@ -121,7 +110,7 @@ const LineChartItem = /*#__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
@@ -146,22 +135,22 @@ const LineChartItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       });
       let d = '';
       if (!refs.smooth.current) {
-        d = values_.reduce((result, itemValue, index) => {
-          const [x, y] = itemValue;
+        d = values_.reduce((result_0, itemValue_0, index) => {
+          const [x_0, y_0] = itemValue_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}`;
         }, '');
       } else {
-        d = values_.reduce((result, itemValue, index, array) => {
-          const [x, y] = itemValue;
+        d = values_.reduce((result_1, itemValue_1, index_0, array) => {
+          const [x_1, y_1] = itemValue_1;
 
           // Move
-          if (index === 0) return result += `M ${x} ${y}`;
-          const [x1, y1] = (0, _utils2.controlPoint)(array[index - 1], array[index - 2], itemValue, false, smoothRatio);
-          const [x2, y2] = (0, _utils2.controlPoint)(itemValue, array[index - 1], array[index + 1], true, smoothRatio);
-          return result += `C ${x1} ${y1} ${x2} ${y2} ${x} ${y}`;
+          if (index_0 === 0) return result_1 += `M ${x_1} ${y_1}`;
+          const [x1, y1] = (0, _utils2.controlPoint)(array[index_0 - 1], array[index_0 - 2], itemValue_1, false, smoothRatio);
+          const [x2, y2] = (0, _utils2.controlPoint)(itemValue_1, array[index_0 - 1], array[index_0 + 1], true, smoothRatio);
+          return result_1 += `C ${x1} ${y1} ${x2} ${y2} ${x_1} ${y_1}`;
         }, '');
       }
       const element = /*#__PURE__*/_react.default.createElement("g", null, /*#__PURE__*/_react.default.createElement(Path, (0, _extends2.default)({
@@ -200,7 +189,7 @@ const LineChartItem = /*#__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();
@@ -222,7 +211,7 @@ const LineChartItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         }, refs.animateTimeout.current);
       }
     }
-  }, [init, animate]);
+  };
   _react.default.useEffect(() => {
     make();
     initMethod();

package/LinearMeter/LinearMeter.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IBaseElement, IStyle, IElement, IPropsAny } from '../types';
-export type ILinearMeter = IBaseElement & {
+export declare type ILinearMeter = IBaseElement & {
     parts?: number;
     lineCap?: 'inherit' | 'round' | 'square' | 'butt';
     orientation?: 'vertical' | 'horizontal';