@onesy/ui-react 1.0.130 → 1.0.132

package/BubbleChartItem/BubbleChartItem.js

@@ -1,165 +1,232 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("@onesy/utils");
-const style_react_1 = require("@onesy/style-react");
-const Path_1 = __importDefault(require("../Path"));
-const Line_1 = __importDefault(require("../Line"));
-const Type_1 = __importDefault(require("../Type"));
-const useMediaQuery_1 = __importDefault(require("../useMediaQuery"));
-const utils_2 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => ({
-    root: {},
-    legend_item: {
-        userSelect: 'none'
-    },
-    legend_icon: {
-        width: '10px',
-        height: '2px'
-    },
-    text: Object.assign(Object.assign({}, theme.typography.values.b3), { fill: 'currentColor', textAnchor: 'middle', alignmentBaseline: 'middle' })
-}), { name: 'onesy-BubbleChartItem' });
-const BubbleChartItem = react_1.default.forwardRef((props_, ref) => {
-    const theme = (0, style_react_1.useOnesyTheme)();
-    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyBubbleChartItem) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
-    const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
-    const Path = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Path) || Path_1.default; }, [theme]);
-    const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
-    const { tonal = true, color = 'primary', name, values, minSize, maxSize, refs: refs_, rects, updateDefs, updateLegend, minMax, animate: animate_, animateTimeout: animateTimeout_, PathProps, LegendItemProps, className } = props, other = __rest(props, ["tonal", "color", "name", "values", "minSize", "maxSize", "refs", "rects", "updateDefs", "updateLegend", "minMax", "animate", "animateTimeout", "PathProps", "LegendItemProps", "className"]);
-    const { classes } = useStyle();
-    const refs = {
-        minMax: react_1.default.useRef(null),
-        theme: react_1.default.useRef(null),
-        path: react_1.default.useRef(null),
-        pathStyle: react_1.default.useRef({}),
-        animate: react_1.default.useRef(null),
-        animateTimeout: react_1.default.useRef(null),
-        init: react_1.default.useRef(null)
-    };
-    const keys = react_1.default.useMemo(() => {
-        const result = [];
-        const items = [animate_, animateTimeout_];
-        items.forEach(item => {
-            if ((0, utils_1.is)('object', item))
-                Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
-        });
-        return (0, utils_1.unique)(result);
-    }, [animate_, animateTimeout_]);
-    const breakpoints = {};
-    keys.forEach(key => {
-        breakpoints[key] = (0, useMediaQuery_1.default)(theme.breakpoints.media[key], { element: refs.path.current });
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _react = _interopRequireDefault(require("react"));
+var _utils = require("@onesy/utils");
+var _styleReact = require("@onesy/style-react");
+var _Path = _interopRequireDefault(require("../Path"));
+var _Line = _interopRequireDefault(require("../Line"));
+var _Type = _interopRequireDefault(require("../Type"));
+var _useMediaQuery = _interopRequireDefault(require("../useMediaQuery"));
+var _utils2 = require("../utils");
+const _excluded = ["tonal", "color", "name", "values", "minSize", "maxSize", "refs", "rects", "updateDefs", "updateLegend", "minMax", "animate", "animateTimeout", "PathProps", "LegendItemProps", "className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const useStyle = (0, _styleReact.style)(theme => ({
+  root: {},
+  legend_item: {
+    userSelect: 'none'
+  },
+  legend_icon: {
+    width: '10px',
+    height: '2px'
+  },
+  text: _objectSpread(_objectSpread({}, theme.typography.values.b3), {}, {
+    fill: 'currentColor',
+    textAnchor: 'middle',
+    alignmentBaseline: 'middle'
+  })
+}), {
+  name: 'onesy-BubbleChartItem'
+});
+const BubbleChartItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  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.onesyBubbleChartItem) === 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 {
+      tonal = true,
+      color = 'primary',
+      name,
+      values,
+      minSize,
+      maxSize,
+      refs: refs_,
+      rects,
+      updateDefs,
+      updateLegend,
+      minMax,
+      animate: animate_,
+      animateTimeout: animateTimeout_,
+      PathProps,
+      LegendItemProps,
+      className
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const refs = {
+    minMax: _react.default.useRef(null),
+    theme: _react.default.useRef(null),
+    path: _react.default.useRef(null),
+    pathStyle: _react.default.useRef({}),
+    animate: _react.default.useRef(null),
+    animateTimeout: _react.default.useRef(null),
+    init: _react.default.useRef(null)
+  };
+  const keys = _react.default.useMemo(() => {
+    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));
     });
-    const animate = (0, utils_2.valueBreakpoints)(animate_, true, breakpoints, theme);
-    const animateTimeout = (0, utils_2.valueBreakpoints)(animateTimeout_, 140, breakpoints, theme);
-    const [value, setValue] = react_1.default.useState();
-    const [init, setInit] = react_1.default.useState();
-    refs.theme.current = theme;
-    refs.animate.current = animate;
-    refs.animateTimeout.current = animateTimeout;
-    refs.init.current = init;
-    const LegendItem = react_1.default.useCallback(() => {
-        return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center' }, LegendItemProps, { className: (0, style_react_1.classNames)([
-                (0, utils_2.staticClassName)('BubbleChart', theme) && [
-                    'onesy-BubbleChart-legend-item'
-                ],
-                LegendItemProps === null || LegendItemProps === void 0 ? void 0 : LegendItemProps.className,
-                classes.legend_item
-            ]) }, { children: [(0, jsx_runtime_1.jsx)("span", { className: (0, style_react_1.classNames)([
-                        (0, utils_2.staticClassName)('BubbleChart', theme) && [
-                            'onesy-BubbleChart-legend-icon'
-                        ],
-                        classes.legend_icon
-                    ]), style: {
-                        background: !theme.palette.color[color] ? color : theme.palette.color[color]['main']
-                    } }), (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, { children: name }))] })));
-    }, [theme]);
-    const make = () => {
-        // Make values into x, y, coordinates
-        // normalized in rect width, height values
-        // invert y so 0, 0 is at bottom left
-        if ((rects === null || rects === void 0 ? void 0 : rects.wrapper) && values) {
-            const { width, height } = rects.wrapper;
-            const [x, y, size, label] = values;
-            const values_ = {
-                x: (0, utils_1.percentageFromValueWithinRange)(x, minMax.min.x, minMax.max.x),
-                y: (0, utils_1.percentageFromValueWithinRange)(y, minMax.min.y, minMax.max.y)
-            };
-            values_.x = (0, utils_1.valueFromPercentageWithinRange)(values_.x, 0, width);
-            values_.y = (0, utils_1.valueFromPercentageWithinRange)(values_.y, 0, height);
-            const value_ = [...[values_.x, height - values_.y].map(item_ => Math.abs(item_)), size, label];
-            const minR = 4;
-            const maxR = 40;
-            const percentage = (0, utils_1.percentageFromValueWithinRange)(value_[2], minSize, maxSize);
-            const r = (0, utils_1.valueFromPercentageWithinRange)(percentage, minR, maxR);
-            const element = ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)(Path, Object.assign({ r: r, cx: value_[0], cy: value_[1], fill: theme.methods.palette.color.colorToRgb(!theme.palette.color[color] ? color : theme.palette.color[color]['main'], 0.14), stroke: !theme.palette.color[color] ? color : theme.palette.color[color]['main'], strokeWidth: '2px', Component: 'circle' }, PathProps, { style: Object.assign(Object.assign(Object.assign(Object.assign({}, PathProps === null || PathProps === void 0 ? void 0 : PathProps.style), ((refs.animate.current && refs.init.current !== 'animated') && {
-                            opacity: 0,
-                            transform: 'scale(0)'
-                        })), { transformBox: 'fill-box', transformOrigin: 'center' }), refs.pathStyle.current) })), (r >= 20 && value_[3]) && ((0, jsx_runtime_1.jsx)("text", Object.assign({ x: value_[0], y: value_[1], className: (0, style_react_1.classNames)([
-                            (0, utils_2.staticClassName)('BubbleChartItem', theme) && [
-                                'onesy-BubbleChartItem-text'
-                            ],
-                            classes.text
-                        ]), style: Object.assign(Object.assign(Object.assign(Object.assign({}, PathProps === null || PathProps === void 0 ? void 0 : PathProps.style), ((refs.animate.current && refs.init.current !== 'animated') && {
-                            opacity: 0,
-                            transform: 'scale(0)'
-                        })), { transformBox: 'fill-box', transformOrigin: 'center' }), refs.pathStyle.current) }, { children: value_[3] })))] }));
-            // Legend item
-            if ((0, utils_1.is)('function', updateLegend)) {
-                updateLegend(previous => {
-                    const newValues = [...(previous || [])];
-                    if (!newValues.find(itemLegend => { var _a; return ((_a = itemLegend.item) === null || _a === void 0 ? void 0 : _a.name) === name; })) {
-                        newValues.push({
-                            item: {
-                                name,
-                                values
-                            },
-                            element: (0, jsx_runtime_1.jsx)(LegendItem, {})
-                        });
-                    }
-                    return newValues;
-                });
-            }
-            // Value
-            setValue(element);
-        }
-    };
-    const initMethod = react_1.default.useCallback(() => {
-        if (animate) {
-            if (!init) {
-                refs.pathStyle.current = {
-                    transition: theme.methods.transitions.make(['transform', 'opacity'], { timing_function: 'decelerated' })
-                };
-                setInit(true);
-                setTimeout(() => {
-                    refs.pathStyle.current = Object.assign(Object.assign({}, refs.pathStyle.current), { opacity: 1, transform: 'scale(1)' });
-                    setInit('animated');
-                }, refs.animateTimeout.current);
-            }
-        }
-    }, [init, animate]);
-    react_1.default.useEffect(() => {
-        make();
-        initMethod();
-    }, [values, theme, animate, init, !!refs.path.current]);
-    react_1.default.useEffect(() => {
-        make();
-    }, [rects === null || rects === void 0 ? void 0 : rects.wrapper]);
-    return (value && react_1.default.cloneElement(value, Object.assign({ className }, other)));
+    return (0, _utils.unique)(result);
+  }, [animate_, animateTimeout_]);
+  const breakpoints = {};
+  keys.forEach(key => {
+    breakpoints[key] = (0, _useMediaQuery.default)(theme.breakpoints.media[key], {
+      element: refs.path.current
+    });
+  });
+  const animate = (0, _utils2.valueBreakpoints)(animate_, true, breakpoints, theme);
+  const animateTimeout = (0, _utils2.valueBreakpoints)(animateTimeout_, 140, breakpoints, theme);
+  const [value, setValue] = _react.default.useState();
+  const [init, setInit] = _react.default.useState();
+  refs.theme.current = theme;
+  refs.animate.current = animate;
+  refs.animateTimeout.current = animateTimeout;
+  refs.init.current = init;
+  const LegendItem = _react.default.useCallback(() => {
+    return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+      gap: 1,
+      direction: "row",
+      align: "center"
+    }, LegendItemProps, {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('BubbleChart', theme) && ['onesy-BubbleChart-legend-item'], LegendItemProps === null || LegendItemProps === void 0 ? void 0 : LegendItemProps.className, classes.legend_item])
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('BubbleChart', theme) && ['onesy-BubbleChart-legend-icon'], classes.legend_icon]),
+      style: {
+        background: !theme.palette.color[color] ? color : theme.palette.color[color]['main']
+      }
+    }), /*#__PURE__*/_react.default.createElement(Type, {
+      version: "b3"
+    }, name));
+  }, [theme]);
+  const make = () => {
+    // Make values into x, y, coordinates
+    // normalized in rect width, height values
+
+    // invert y so 0, 0 is at bottom left
+    if (rects !== null && rects !== void 0 && rects.wrapper && values) {
+      const {
+        width,
+        height
+      } = rects.wrapper;
+      const [x, y, size, label] = values;
+      const values_ = {
+        x: (0, _utils.percentageFromValueWithinRange)(x, minMax.min.x, minMax.max.x),
+        y: (0, _utils.percentageFromValueWithinRange)(y, minMax.min.y, minMax.max.y)
+      };
+      values_.x = (0, _utils.valueFromPercentageWithinRange)(values_.x, 0, width);
+      values_.y = (0, _utils.valueFromPercentageWithinRange)(values_.y, 0, height);
+      const value_ = [...[values_.x, height - values_.y].map(item_ => Math.abs(item_)), size, label];
+      const minR = 4;
+      const maxR = 40;
+      const percentage = (0, _utils.percentageFromValueWithinRange)(value_[2], minSize, maxSize);
+      const r = (0, _utils.valueFromPercentageWithinRange)(percentage, minR, maxR);
+      const element = /*#__PURE__*/_react.default.createElement("g", null, /*#__PURE__*/_react.default.createElement(Path, (0, _extends2.default)({
+        r: r,
+        cx: value_[0],
+        cy: value_[1],
+        fill: theme.methods.palette.color.colorToRgb(!theme.palette.color[color] ? color : theme.palette.color[color]['main'], 0.14),
+        stroke: !theme.palette.color[color] ? color : theme.palette.color[color]['main'],
+        strokeWidth: "2px",
+        Component: "circle"
+      }, PathProps, {
+        style: _objectSpread(_objectSpread(_objectSpread({}, PathProps === null || PathProps === void 0 ? void 0 : PathProps.style), refs.animate.current && refs.init.current !== 'animated' && {
+          opacity: 0,
+          transform: 'scale(0)'
+        }), {}, {
+          transformBox: 'fill-box',
+          transformOrigin: 'center'
+        }, refs.pathStyle.current)
+      })), r >= 20 && value_[3] && /*#__PURE__*/_react.default.createElement("text", {
+        x: value_[0],
+        y: value_[1],
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('BubbleChartItem', theme) && ['onesy-BubbleChartItem-text'], classes.text]),
+        style: _objectSpread(_objectSpread(_objectSpread({}, PathProps === null || PathProps === void 0 ? void 0 : PathProps.style), refs.animate.current && refs.init.current !== 'animated' && {
+          opacity: 0,
+          transform: 'scale(0)'
+        }), {}, {
+          transformBox: 'fill-box',
+          transformOrigin: 'center'
+        }, refs.pathStyle.current)
+      }, value_[3]));
+
+      // Legend item
+      if ((0, _utils.is)('function', updateLegend)) {
+        updateLegend(previous => {
+          const newValues = [...(previous || [])];
+          if (!newValues.find(itemLegend => {
+            var _itemLegend$item;
+            return ((_itemLegend$item = itemLegend.item) === null || _itemLegend$item === void 0 ? void 0 : _itemLegend$item.name) === name;
+          })) {
+            newValues.push({
+              item: {
+                name,
+                values
+              },
+              element: /*#__PURE__*/_react.default.createElement(LegendItem, null)
+            });
+          }
+          return newValues;
+        });
+      }
+
+      // Value
+      setValue(element);
+    }
+  };
+  const initMethod = _react.default.useCallback(() => {
+    if (animate) {
+      if (!init) {
+        refs.pathStyle.current = {
+          transition: theme.methods.transitions.make(['transform', 'opacity'], {
+            timing_function: 'decelerated'
+          })
+        };
+        setInit(true);
+        setTimeout(() => {
+          refs.pathStyle.current = _objectSpread(_objectSpread({}, refs.pathStyle.current), {}, {
+            opacity: 1,
+            transform: 'scale(1)'
+          });
+          setInit('animated');
+        }, refs.animateTimeout.current);
+      }
+    }
+  }, [init, animate]);
+  _react.default.useEffect(() => {
+    make();
+    initMethod();
+  }, [values, theme, animate, init, !!refs.path.current]);
+  _react.default.useEffect(() => {
+    make();
+  }, [rects === null || rects === void 0 ? void 0 : rects.wrapper]);
+  return value && /*#__PURE__*/_react.default.cloneElement(value, _objectSpread({
+    className
+  }, other));
 });
 BubbleChartItem.displayName = 'onesy-BubbleChartItem';
-exports.default = BubbleChartItem;
+var _default = exports.default = BubbleChartItem;

package/BubbleChartItem/index.js

@@ -1,8 +1,13 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var BubbleChartItem_1 = require("./BubbleChartItem");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(BubbleChartItem_1).default; } });
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _BubbleChartItem.default;
+  }
+});
+var _BubbleChartItem = _interopRequireDefault(require("./BubbleChartItem"));

package/Button/Button.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ISurface } from '../Surface/Surface';
 import { IElement, IElementReference, IPropsAny } from '../types';
-export declare type IButton = Omit<ISurface, 'elevation'> & {
+export type IButton = Omit<ISurface, 'elevation'> & {
     name?: any;
     type?: string;
     fullWidth?: boolean;