@onesy/ui-react 1.0.0

package/esm/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,155 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["max", "separator", "renderMore", "IconMore", "Component", "MoreProps", "className", "children"];
+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) { _defineProperty(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; }
+import React from 'react';
+import { clamp, is, unique } from '@onesy/utils';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import IconMaterialNavigateNext from '@amaui/icons-material-rounded-react/IconMaterialNavigateNextW100';
+import IconMaterialMoreHoriz from '@amaui/icons-material-rounded-react/IconMaterialMoreHorizW100';
+import LineElement from '../Line';
+import TypeElement from '../Type';
+import IconButtonElement from '../IconButton';
+import useMediaQuery from '../useMediaQuery';
+import { staticClassName, valueBreakpoints } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {
+    margin: 0,
+    padding: 0
+  },
+  expandMore: {
+    '&.onesy-IconButton-root': {
+      padding: '0',
+      width: 'unset',
+      height: '100%',
+      borderRadius: theme.methods.shape.radius.value(0.25, 'px')
+    }
+  }
+}), {
+  name: 'onesy-Breadcrumbs'
+});
+const Breadcrumbs = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyBreadcrumbs?.props?.default), props_), [props_]);
+  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
+  const {
+      max: max_,
+      separator = /*#__PURE__*/React.createElement(IconMaterialNavigateNext, {
+        size: "small"
+      }),
+      renderMore,
+      IconMore = IconMaterialMoreHoriz,
+      Component = 'nav',
+      MoreProps,
+      className,
+      children: children_
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const refs = {
+    root: React.useRef(undefined)
+  };
+  const keys = React.useMemo(() => {
+    const result = [];
+    const items = [max_];
+    items.forEach(item => {
+      if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
+    });
+    return unique(result);
+  }, [max_]);
+  const breakpoints = {};
+  keys.forEach(key => {
+    breakpoints[key] = useMediaQuery(theme.breakpoints.media[key], {
+      element: refs.root.current
+    });
+  });
+  let max = valueBreakpoints(max_, undefined, breakpoints, theme);
+  max = clamp(max, 2);
+  const onExpandMore = () => {
+    setChildren(resolve(children_, false));
+  };
+  const resolve = function () {
+    let items_ = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : children_;
+    let maxValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : max;
+    let items = React.Children.toArray(items_).filter(Boolean);
+    if (maxValue !== undefined && maxValue >= 2 && maxValue < items.length) {
+      const start = [];
+      const end = [];
+      for (let i = 1; i <= maxValue; i++) {
+        // start
+        if (i % 2 > 0) start.push(items[Math.floor(i / 2)]);
+        // end
+        else end.unshift(items[items.length - i / 2]);
+      }
+      items = [...start, is('function', renderMore) ? renderMore(onExpandMore) : /*#__PURE__*/React.createElement(IconButton, _extends({
+        color: "default",
+        size: "small",
+        onClick: onExpandMore,
+        "aria-label": "Expand more path"
+      }, MoreProps, {
+        className: classNames([staticClassName('Breadcrumbs', theme) && ['onesy-Breadcrumbs-expand-more'], MoreProps?.className, classes.expandMore])
+      }), /*#__PURE__*/React.createElement(IconMore, {
+        size: "small"
+      })), ...end];
+    }
+    return items;
+  };
+  const [init, setInit] = React.useState(false);
+  const [children, setChildren] = React.useState(resolve);
+  React.useEffect(() => {
+    setInit(true);
+  }, []);
+  React.useEffect(() => {
+    if (init) setChildren(resolve(children_));
+  }, [children_, max]);
+  const Separator = is('simple', separator) ? /*#__PURE__*/React.createElement(Type, {
+    version: "b2",
+    "aria-hidden": true,
+    Component: "span"
+  }, separator) : /*#__PURE__*/React.cloneElement(separator, {
+    'aria-hidden': true
+  });
+  const childrenToUse = children.flatMap((item, index) => [item, index !== children.length - 1 && Separator].filter(Boolean));
+  return /*#__PURE__*/React.createElement(Line, _extends({
+    ref: item => {
+      if (ref) {
+        if (is('function', ref)) ref(item);else ref.current = item;
+      }
+      refs.root.current = item;
+    },
+    gap: 1,
+    direction: "row",
+    align: "center",
+    wrap: "wrap",
+    "aria-label": "Breadcrumb",
+    Component: Component
+  }, other, {
+    className: classNames([staticClassName('Breadcrumbs', theme) && ['onesy-Breadcrumbs-root'], className, classes.root])
+  }), childrenToUse.map((item, index) => {
+    const itemProps = {};
+    if (index === childrenToUse.length - 1) {
+      itemProps['aria-current'] = 'page';
+    }
+    if (is('simple', item)) {
+      return /*#__PURE__*/React.createElement(Type, _extends({
+        key: index,
+        version: "b2",
+        Component: "span"
+      }, itemProps, {
+        className: classNames([staticClassName('Breadcrumbs', theme) && ['onesy-Breadcrumbs-item'], classes.item])
+      }), item);
+    }
+    return /*#__PURE__*/React.cloneElement(item, _objectSpread({
+      key: index,
+      className: classNames([staticClassName('Breadcrumbs', theme) && ['onesy-Breadcrumbs-item'], item?.props?.className, classes.item])
+    }, itemProps));
+  }));
+});
+Breadcrumbs.displayName = 'onesy-Breadcrumbs';
+export default Breadcrumbs;

package/esm/Breadcrumbs/index.js

@@ -0,0 +1 @@
+export { default } from './Breadcrumbs';

package/esm/BubbleChart/BubbleChart.js

@@ -0,0 +1,231 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["tonal", "color", "names", "values", "animate", "animateTimeout", "tooltipRender", "tooltipGroupRender", "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) { _defineProperty(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; }
+import React from 'react';
+import { is } from '@onesy/utils';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import ChartElement from '../Chart';
+import LineElement from '../Line';
+import TypeElement from '../Type';
+import SurfaceElement from '../Surface';
+import BubbleChartItemElement from '../BubbleChartItem';
+import { staticClassName } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {
+    '& .onesy-Chart-legend-icon': {
+      position: 'relative',
+      background: 'none !important',
+      border: '2px solid currentColor',
+      '&::before': {
+        content: "''",
+        position: 'absolute',
+        top: '0',
+        left: '0',
+        height: '100%',
+        width: '100%',
+        borderRadius: 'inherit',
+        background: 'currentColor',
+        opacity: '0.14'
+      }
+    }
+  },
+  append_wrapper: {
+    userSelect: 'none',
+    pointerEvents: 'none'
+  },
+  append: {
+    padding: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(2.5, 'px')}`,
+    borderRadius: theme.methods.shape.radius.value(1.5, 'px')
+  },
+  append_icon: {
+    width: '8px',
+    height: '8px',
+    borderRadius: theme.methods.shape.radius.value(40, 'px')
+  }
+}), {
+  name: 'onesy-BubbleChart'
+});
+const BubbleChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyBubbleChart?.props?.default), props_), [props_]);
+  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const Chart = React.useMemo(() => theme?.elements?.Chart || ChartElement, [theme]);
+  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
+  const BubbleChartItem = React.useMemo(() => theme?.elements?.BubbleChartItem || BubbleChartItemElement, [theme]);
+  const {
+      tonal = true,
+      color = 'primary',
+      names,
+      values,
+      animate,
+      animateTimeout,
+      tooltipRender: tooltipRender_,
+      tooltipGroupRender: tooltipGroupRender_,
+      className
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const tooltipRender = is('function', tooltipRender_) ? tooltipRender_ : values_ => {
+    const {
+      values: values__
+    } = values_;
+    return {
+      element: /*#__PURE__*/React.createElement(Line, {
+        tonal: tonal,
+        color: color,
+        elevation: 1,
+        gap: 0.5,
+        direction: "column",
+        Component: Surface,
+        className: classNames([staticClassName('BubbleChart', theme) && ['onesy-BubbleChart-append'], classes.append])
+      }, /*#__PURE__*/React.createElement(Line, {
+        gap: 1,
+        direction: "row",
+        align: "center"
+      }, /*#__PURE__*/React.createElement(Type, {
+        version: "b3"
+      }, values__?.[3])), /*#__PURE__*/React.createElement(Line, {
+        gap: 0.4,
+        direction: "column"
+      }, /*#__PURE__*/React.createElement(Line, {
+        gap: 1,
+        direction: "row",
+        align: "center"
+      }, /*#__PURE__*/React.createElement(Type, {
+        version: "b3",
+        style: {
+          fontWeight: 600
+        }
+      }, names?.y || 'y'), /*#__PURE__*/React.createElement(Type, {
+        version: "b3"
+      }, values__?.[1])), /*#__PURE__*/React.createElement(Line, {
+        gap: 1,
+        direction: "row",
+        align: "center"
+      }, /*#__PURE__*/React.createElement(Type, {
+        version: "b3",
+        style: {
+          fontWeight: 600
+        }
+      }, names?.x || 'x'), /*#__PURE__*/React.createElement(Type, {
+        version: "b3"
+      }, values__?.[0])), /*#__PURE__*/React.createElement(Line, {
+        gap: 1,
+        direction: "row",
+        align: "center"
+      }, /*#__PURE__*/React.createElement(Type, {
+        version: "b3",
+        style: {
+          fontWeight: 600
+        }
+      }, names?.size || 'Size'), /*#__PURE__*/React.createElement(Type, {
+        version: "b3"
+      }, values__?.[2]))))
+    };
+  };
+  const tooltipGroupRender = is('function', tooltipGroupRender_) ? tooltipGroupRender_ : (groups, groupsSorted) => {
+    return /*#__PURE__*/React.createElement(Line, {
+      tonal: tonal,
+      color: color,
+      elevation: 1,
+      gap: 0.25,
+      direction: "column",
+      Component: Surface,
+      className: classNames([staticClassName('BubbleChart', theme) && ['onesy-BubbleChart-append'], classes.append])
+    }, /*#__PURE__*/React.createElement(Line, {
+      gap: 1,
+      direction: "column",
+      style: {
+        width: '100%'
+      }
+    }, /*#__PURE__*/React.createElement(Line, {
+      gap: 1,
+      direction: "row",
+      align: "center"
+    }, /*#__PURE__*/React.createElement(Type, {
+      version: "b3",
+      style: {
+        fontWeight: 600
+      }
+    }, "Label"), /*#__PURE__*/React.createElement(Type, {
+      version: "b3",
+      style: {
+        fontWeight: 600
+      }
+    }, names?.y || 'y'), /*#__PURE__*/React.createElement(Type, {
+      version: "b3",
+      style: {
+        fontWeight: 600
+      }
+    }, names?.x || 'x'), /*#__PURE__*/React.createElement(Type, {
+      version: "b3",
+      style: {
+        fontWeight: 600
+      }
+    }, names?.size || 'Size')), /*#__PURE__*/React.createElement(Line, {
+      gap: 1,
+      direction: "column"
+    }, groupsSorted.map((group, index) => /*#__PURE__*/React.createElement(Line, {
+      key: index,
+      gap: 1,
+      direction: "column",
+      style: {
+        width: '100%'
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      className: classNames([staticClassName('BubbleChart', theme) && ['onesy-BubbleChart-append-icon'], classes.append_icon]),
+      style: {
+        background: !theme.palette.color[group] ? group : theme.palette.color[group][groups[group][0]?.item?.tone || 'main']
+      }
+    }), /*#__PURE__*/React.createElement(Line, {
+      gap: 0,
+      direction: "column",
+      style: {
+        width: '100%'
+      }
+    }, groups[group].map((item, index_) => /*#__PURE__*/React.createElement(Line, {
+      key: index_,
+      gap: 1,
+      direction: "row",
+      style: {
+        width: '100%'
+      }
+    }, /*#__PURE__*/React.createElement(Type, {
+      version: "b3"
+    }, item?.values?.[3]), /*#__PURE__*/React.createElement(Type, {
+      version: "b3"
+    }, item?.values?.[1]), /*#__PURE__*/React.createElement(Type, {
+      version: "b3"
+    }, item?.values?.[0]), /*#__PURE__*/React.createElement(Type, {
+      version: "b3"
+    }, item?.values?.[2])))))))));
+  };
+  values.sort((a, b) => a.values?.[2] - b.values?.[2]);
+  const minSize = values[0]?.values?.[2];
+  const maxSize = values[values.length - 1]?.values?.[2];
+  return /*#__PURE__*/React.createElement(Chart, _extends({
+    ref: ref,
+    tonal: tonal,
+    color: color,
+    values: values,
+    pointsVisibility: "hidden",
+    elementTooltip: true,
+    tooltipRender: tooltipRender,
+    tooltipGroupRender: tooltipGroupRender,
+    className: classNames([staticClassName('BubbleChart', theme) && ['onesy-BubbleChart-root'], className, classes.root])
+  }, other), is('array', values) && values.map((item, index) => /*#__PURE__*/React.createElement(BubbleChartItem, _extends({
+    key: index,
+    animate: animate,
+    animateTimeout: animateTimeout,
+    minSize: minSize,
+    maxSize: maxSize
+  }, item))));
+});
+BubbleChart.displayName = 'onesy-BubbleChart';
+export default BubbleChart;

package/esm/BubbleChart/index.js

@@ -0,0 +1 @@
+export { default } from './BubbleChart';

package/esm/BubbleChartItem/BubbleChartItem.js

@@ -0,0 +1,210 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
+import React from 'react';
+import { is, percentageFromValueWithinRange, unique, valueFromPercentageWithinRange } from '@onesy/utils';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import PathElement from '../Path';
+import LineElement from '../Line';
+import TypeElement from '../Type';
+import useMediaQuery from '../useMediaQuery';
+import { staticClassName, valueBreakpoints } from '../utils';
+const useStyle = styleMethod(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.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyBubbleChartItem?.props?.default), props_), [props_]);
+  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const Path = React.useMemo(() => theme?.elements?.Path || PathElement, [theme]);
+  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [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 = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const refs = {
+    minMax: React.useRef(undefined),
+    theme: React.useRef(undefined),
+    path: React.useRef(),
+    pathStyle: React.useRef({}),
+    animate: React.useRef(undefined),
+    animateTimeout: React.useRef(),
+    init: React.useRef(undefined)
+  };
+  const keys = React.useMemo(() => {
+    const result = [];
+    const items = [animate_, animateTimeout_];
+    items.forEach(item => {
+      if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
+    });
+    return unique(result);
+  }, [animate_, animateTimeout_]);
+  const breakpoints = {};
+  keys.forEach(key => {
+    breakpoints[key] = useMediaQuery(theme.breakpoints.media[key], {
+      element: refs.path.current
+    });
+  });
+  const animate = valueBreakpoints(animate_, true, breakpoints, theme);
+  const animateTimeout = valueBreakpoints(animateTimeout_, 140, breakpoints, theme);
+  const [value, setValue] = React.useState();
+  const [init, setInit] = React.useState();
+  refs.theme.current = theme;
+  refs.animate.current = animate;
+  refs.animateTimeout.current = animateTimeout;
+  refs.init.current = init;
+  const LegendItem = React.useCallback(() => {
+    return /*#__PURE__*/React.createElement(Line, _extends({
+      gap: 1,
+      direction: "row",
+      align: "center"
+    }, LegendItemProps, {
+      className: classNames([staticClassName('BubbleChart', theme) && ['onesy-BubbleChart-legend-item'], LegendItemProps?.className, classes.legend_item])
+    }), /*#__PURE__*/React.createElement("span", {
+      className: classNames([staticClassName('BubbleChart', theme) && ['onesy-BubbleChart-legend-icon'], classes.legend_icon]),
+      style: {
+        background: !theme.palette.color[color] ? color : theme.palette.color[color]['main']
+      }
+    }), /*#__PURE__*/React.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?.wrapper && values) {
+      const {
+        width,
+        height
+      } = rects.wrapper;
+      const [x, y, size, label] = values;
+      const values_ = {
+        x: percentageFromValueWithinRange(x, minMax.min.x, minMax.max.x),
+        y: percentageFromValueWithinRange(y, minMax.min.y, minMax.max.y)
+      };
+      values_.x = valueFromPercentageWithinRange(values_.x, 0, width);
+      values_.y = 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 = percentageFromValueWithinRange(value_[2], minSize, maxSize);
+      const r = valueFromPercentageWithinRange(percentage, minR, maxR);
+      const element = /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement(Path, _extends({
+        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?.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.createElement("text", {
+        x: value_[0],
+        y: value_[1],
+        className: classNames([staticClassName('BubbleChartItem', theme) && ['onesy-BubbleChartItem-text'], classes.text]),
+        style: _objectSpread(_objectSpread(_objectSpread({}, 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 (is('function', updateLegend)) {
+        updateLegend(previous => {
+          const newValues = [...(previous || [])];
+          if (!newValues.find(itemLegend => itemLegend.item?.name === name)) {
+            newValues.push({
+              item: {
+                name,
+                values
+              },
+              element: /*#__PURE__*/React.createElement(LegendItem, null)
+            });
+          }
+          return newValues;
+        });
+      }
+
+      // Value
+      setValue(element);
+    }
+  };
+  const initMethod = React.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.useEffect(() => {
+    make();
+    initMethod();
+  }, [values, theme, animate, init, !!refs.path.current]);
+  React.useEffect(() => {
+    make();
+  }, [rects?.wrapper]);
+  return value && /*#__PURE__*/React.cloneElement(value, _objectSpread({
+    className
+  }, other));
+});
+BubbleChartItem.displayName = 'onesy-BubbleChartItem';
+export default BubbleChartItem;

package/esm/BubbleChartItem/index.js

@@ -0,0 +1 @@
+export { default } from './BubbleChartItem';