@bbl-digital/snorre 4.2.74 → 4.2.76

package/lib/core/NotificationsMenu/index.js

@@ -1,97 +1,51 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _styles = require("./styles");
-var _Button = _interopRequireDefault(require("../Button"));
-var _IconBellOutline = _interopRequireDefault(require("../../icons/General/IconBellOutline"));
-var _IconBellFilled = _interopRequireDefault(require("../../icons/General/IconBellFilled"));
-var _Text = _interopRequireDefault(require("../Text"));
-var _react2 = require("motion/react");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const NotificationsMenu = ({
-  unreadCount,
-  triggerClose,
-  radius,
-  children,
-  animationActive = false,
-  onBellClick
-}) => {
-  const ref = /*#__PURE__*/(0, _react.createRef)();
-  const [open, setOpen] = (0, _react.useState)(false);
-  const hasUnread = Boolean(unreadCount);
-  const maxUnreadCount = 99;
-  (0, _react.useEffect)(() => {
-    const handleClickOutside = e => {
-      const node = ref.current;
-      if (node && node.contains(e.target)) {
-        return;
-      }
-      setTimeout(() => {
-        setOpen(false);
-      }, 100);
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, createRef } from 'react';
+import { NotificationsWrapper, NotificationsContent, UnreadMark, } from './styles';
+import Button from '../Button';
+import IconBellOutline from '../../icons/General/IconBellOutline';
+import IconBellFilled from '../../icons/General/IconBellFilled';
+import Text from '../Text';
+import { motion } from 'motion/react';
+const NotificationsMenu = ({ unreadCount, triggerClose, radius, children, animationActive = false, onBellClick, }) => {
+    const ref = createRef();
+    const [open, setOpen] = useState(false);
+    const hasUnread = Boolean(unreadCount);
+    const maxUnreadCount = 99;
+    useEffect(() => {
+        const handleClickOutside = (e) => {
+            const node = ref.current;
+            if (node && node.contains(e.target)) {
+                return;
+            }
+            setTimeout(() => {
+                setOpen(false);
+            }, 100);
+        };
+        if (open) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        else {
+            document.removeEventListener('mousedown', handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [open, ref]);
+    useEffect(() => {
+        if (triggerClose)
+            setOpen(false);
+    }, [triggerClose]);
+    const onClick = () => {
+        setOpen(!open);
+        onBellClick && onBellClick();
     };
-    if (open) {
-      document.addEventListener('mousedown', handleClickOutside);
-    } else {
-      document.removeEventListener('mousedown', handleClickOutside);
-    }
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
+    const variant = {
+        initial: {
+            rotate: [0, 10, 0],
+            transition: { duration: 0.2, repeat: Infinity },
+        },
+        none: {},
     };
-  }, [open, ref]);
-  (0, _react.useEffect)(() => {
-    if (triggerClose) setOpen(false);
-  }, [triggerClose]);
-  const onClick = () => {
-    setOpen(!open);
-    onBellClick && onBellClick();
-  };
-  const variant = {
-    initial: {
-      rotate: [0, 10, 0],
-      transition: {
-        duration: 0.2,
-        repeat: Infinity
-      }
-    },
-    none: {}
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.NotificationsWrapper, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.motion.div, {
-      animate: animationActive ? 'initial' : 'none',
-      variants: variant,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
-        nostyle: true,
-        onClick: onClick,
-        focusable: true,
-        "aria-expanded": open,
-        "aria-label": hasUnread ? 'Uleste notifikasjoner' : 'Ingen uleste notifikasjoner',
-        trackingName: "Felles",
-        trackingEvent: "Toggle varselmeny",
-        children: [hasUnread ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconBellOutline.default, {
-          secondary: true
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconBellFilled.default, {}), hasUnread && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.UnreadMark, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-            size: "12px",
-            color: "white",
-            children: unreadCount <= maxUnreadCount ? unreadCount : maxUnreadCount
-          })
-        })]
-      })
-    }), open && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      ref: ref,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.NotificationsContent, {
-        $radius: radius,
-        children: children
-      })
-    })]
-  });
+    return (_jsxs(NotificationsWrapper, { children: [_jsx(motion.div, { animate: animationActive ? 'initial' : 'none', variants: variant, children: _jsxs(Button, { nostyle: true, onClick: onClick, focusable: true, "aria-expanded": open, "aria-label": hasUnread ? 'Uleste notifikasjoner' : 'Ingen uleste notifikasjoner', trackingName: "Felles", trackingEvent: "Toggle varselmeny", children: [hasUnread ? _jsx(IconBellOutline, { secondary: true }) : _jsx(IconBellFilled, {}), hasUnread && (_jsx(UnreadMark, { children: _jsx(Text, { size: "12px", color: "white", children: unreadCount <= maxUnreadCount ? unreadCount : maxUnreadCount }) }))] }) }), open && (_jsx("span", { ref: ref, children: _jsx(NotificationsContent, { "$radius": radius, children: children }) }))] }));
 };
-var _default = exports.default = NotificationsMenu;
+export default NotificationsMenu;

package/lib/core/NotificationsMenu/styles.d.ts

@@ -12,4 +12,3 @@ export declare const UnreadMark: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-//# sourceMappingURL=styles.d.ts.map

package/lib/core/NotificationsMenu/styles.js

@@ -1,38 +1,48 @@
-"use strict";
+import styled from '@emotion/styled';
+export const NotificationsWrapper = styled.div `
+  position: relative;
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.UnreadMark = exports.NotificationsWrapper = exports.NotificationsContent = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-const NotificationsWrapper = exports.NotificationsWrapper = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "ebh5fga2"
-} : {
-  target: "ebh5fga2",
-  label: "NotificationsWrapper"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1ivkyd7",
-  styles: "position:relative;display:flex;flex-direction:row;&>svg{margin-left:0.5em;}"
-} : {
-  name: "1ivkyd7",
-  styles: "position:relative;display:flex;flex-direction:row;&>svg{margin-left:0.5em;}",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const NotificationsContent = exports.NotificationsContent = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "ebh5fga1"
-} : {
-  target: "ebh5fga1",
-  label: "NotificationsContent"
-})("position:absolute;background-color:white;right:0;top:30px;box-sizing:border-box;width:300px;border:1px solid #cfd9ea;background-color:#ffffff;box-shadow:0 10px 15px 0 rgba(0, 0, 0, 0.1);border-radius:", ({
-  $radius
-}) => $radius || '10px', ";overflow:hidden;padding:0.5em 1em;@media screen and (max-width: 500px){position:fixed!important;top:50px!important;right:auto;left:50%;transform:translateX(-50%);max-width:90vw;}");
-const UnreadMark = exports.UnreadMark = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "ebh5fga0"
-} : {
-  target: "ebh5fga0",
-  label: "UnreadMark"
-})("position:absolute;display:flex;align-items:center;justify-content:center;top:-6px;left:10px;background:", ({
-  theme
-}) => theme.alert, ";height:18px;width:18px;border-radius:10px;");
+  display: flex;
+  flex-direction: row;
+
+  & > svg {
+    margin-left: 0.5em;
+  }
+`;
+export const NotificationsContent = styled.div `
+  position: absolute;
+  background-color: white;
+  right: 0;
+  top: 30px;
+
+  box-sizing: border-box;
+  width: 300px;
+  border: 1px solid #cfd9ea;
+
+  background-color: #ffffff;
+  box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.1);
+  border-radius: ${({ $radius }) => $radius || '10px'};
+  overflow: hidden;
+  padding: 0.5em 1em;
+
+  @media screen and (max-width: 500px) {
+    position: fixed !important;
+    top: 50px !important;
+    right: auto;
+    left: 50%;
+    transform: translateX(-50%);
+    max-width: 90vw;
+  }
+`;
+export const UnreadMark = styled.div `
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: -6px;
+  left: 10px;
+  background: ${({ theme }) => theme.alert};
+  height: 18px;
+  width: 18px;
+  border-radius: 10px;
+`;

package/lib/core/PieChart/ActiveShape/index.d.ts

@@ -2,4 +2,3 @@ import React from 'react';
 /** Renders outer line on the pie chart */
 declare const ActiveShape: (props: any) => React.JSX.Element;
 export default ActiveShape;
-//# sourceMappingURL=index.d.ts.map

package/lib/core/PieChart/ActiveShape/index.js

@@ -1,41 +1,8 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _recharts = require("recharts");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/** Renders outer line on the pie chart */const ActiveShape = props => {
-  const {
-    cx,
-    cy,
-    innerRadius,
-    outerRadius,
-    startAngle,
-    endAngle,
-    fill
-  } = props;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_recharts.Sector, {
-      cx: cx,
-      cy: cy,
-      innerRadius: innerRadius,
-      outerRadius: outerRadius,
-      startAngle: startAngle,
-      endAngle: endAngle,
-      fill: fill
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_recharts.Sector, {
-      cx: cx,
-      cy: cy,
-      startAngle: startAngle,
-      endAngle: endAngle,
-      innerRadius: outerRadius + 3,
-      outerRadius: outerRadius + 6,
-      fill: fill
-    })]
-  });
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Sector } from 'recharts';
+/** Renders outer line on the pie chart */
+const ActiveShape = (props) => {
+    const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, fill } = props;
+    return (_jsxs("g", { children: [_jsx(Sector, { cx: cx, cy: cy, innerRadius: innerRadius, outerRadius: outerRadius, startAngle: startAngle, endAngle: endAngle, fill: fill }), _jsx(Sector, { cx: cx, cy: cy, startAngle: startAngle, endAngle: endAngle, innerRadius: outerRadius + 3, outerRadius: outerRadius + 6, fill: fill })] }));
 };
-var _default = exports.default = ActiveShape;
+export default ActiveShape;

package/lib/core/PieChart/PieChart.stories.d.ts

@@ -3,19 +3,18 @@ import { LoadedType } from '../../shared/types/LoadedType';
 declare const _default: Meta;
 export default _default;
 export declare const Default: {
-    render: (_args: unknown, { loaded: { theme } }: LoadedType) => import("react").JSX.Element;
+    render: (_args: unknown, { loaded: { theme } }: LoadedType) => import("react/jsx-runtime").JSX.Element;
     name: string;
 };
 export declare const WithoutPrefix: {
-    render: (_args: unknown, { loaded: { theme } }: LoadedType) => import("react").JSX.Element;
+    render: (_args: unknown, { loaded: { theme } }: LoadedType) => import("react/jsx-runtime").JSX.Element;
     name: string;
 };
 export declare const Responsive: {
-    render: (_args: unknown, { loaded: { theme } }: LoadedType) => import("react").JSX.Element;
+    render: (_args: unknown, { loaded: { theme } }: LoadedType) => import("react/jsx-runtime").JSX.Element;
     name: string;
 };
 export declare const Opacity: {
-    render: (_args: unknown, { loaded: { theme } }: LoadedType) => import("react").JSX.Element;
+    render: (_args: unknown, { loaded: { theme } }: LoadedType) => import("react/jsx-runtime").JSX.Element;
     name: string;
 };
-//# sourceMappingURL=PieChart.stories.d.ts.map

package/lib/core/PieChart/PieChart.stories.js

@@ -1,88 +1,29 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.WithoutPrefix = exports.Responsive = exports.Opacity = exports.Default = void 0;
-var _ = _interopRequireDefault(require("."));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Core/PieChart',
-  component: _.default
+import { jsx as _jsx } from "react/jsx-runtime";
+import PieChart from '.';
+export default {
+    title: 'Core/PieChart',
+    component: PieChart,
 };
-const constructDataWithTheme = theme => [{
-  title: 'Eiere',
-  value: 400,
-  color: theme.success
-}, {
-  title: 'Leietakere',
-  value: 300,
-  color: theme.alert
-}, {
-  title: 'Medboere',
-  value: 300,
-  color: theme.info
-}, {
-  title: 'Fullmaktshavere',
-  value: 200,
-  color: theme.illustrationPrimary40
-}, {
-  title: 'Ikke innlogget',
-  value: 200,
-  color: theme.bgMedium
-}];
-const Default = exports.Default = {
-  render: (_args, {
-    loaded: {
-      theme
-    }
-  }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-    height: "300px",
-    width: "300px",
-    defaultSubtitle: "beboere",
-    subtitlePrefix: "Totalt antall",
-    data: constructDataWithTheme(theme)
-  }),
-  name: 'Default'
+const constructDataWithTheme = (theme) => [
+    { title: 'Eiere', value: 400, color: theme.success },
+    { title: 'Leietakere', value: 300, color: theme.alert },
+    { title: 'Medboere', value: 300, color: theme.info },
+    { title: 'Fullmaktshavere', value: 200, color: theme.illustrationPrimary40 },
+    { title: 'Ikke innlogget', value: 200, color: theme.bgMedium },
+];
+export const Default = {
+    render: (_args, { loaded: { theme } }) => (_jsx(PieChart, { height: "300px", width: "300px", defaultSubtitle: "beboere", subtitlePrefix: "Totalt antall", data: constructDataWithTheme(theme) })),
+    name: 'Default',
 };
-const WithoutPrefix = exports.WithoutPrefix = {
-  render: (_args, {
-    loaded: {
-      theme
-    }
-  }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-    height: "300px",
-    width: "300px",
-    defaultSubtitle: "Beboere",
-    data: constructDataWithTheme(theme)
-  }),
-  name: 'Without prefix'
+export const WithoutPrefix = {
+    render: (_args, { loaded: { theme } }) => (_jsx(PieChart, { height: "300px", width: "300px", defaultSubtitle: "Beboere", data: constructDataWithTheme(theme) })),
+    name: 'Without prefix',
 };
-const Responsive = exports.Responsive = {
-  render: (_args, {
-    loaded: {
-      theme
-    }
-  }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-    height: '200px',
-    defaultSubtitle: "Beboere",
-    data: constructDataWithTheme(theme)
-  }),
-  name: 'Responsive'
+export const Responsive = {
+    render: (_args, { loaded: { theme } }) => (_jsx(PieChart, { height: '200px', defaultSubtitle: "Beboere", data: constructDataWithTheme(theme) })),
+    name: 'Responsive',
+};
+export const Opacity = {
+    render: (_args, { loaded: { theme } }) => (_jsx(PieChart, { height: "300px", width: "300px", opacity: 40, defaultSubtitle: "beboere", subtitlePrefix: "Totalt antall", data: constructDataWithTheme(theme) })),
+    name: 'Opacity',
 };
-const Opacity = exports.Opacity = {
-  render: (_args, {
-    loaded: {
-      theme
-    }
-  }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-    height: "300px",
-    width: "300px",
-    opacity: 40,
-    defaultSubtitle: "beboere",
-    subtitlePrefix: "Totalt antall",
-    data: constructDataWithTheme(theme)
-  }),
-  name: 'Opacity'
-};

package/lib/core/PieChart/index.d.ts

@@ -30,4 +30,3 @@ interface ChartDataProps {
 }
 declare const PieChart: React.FC<IProps>;
 export default PieChart;
-//# sourceMappingURL=index.d.ts.map

package/lib/core/PieChart/index.js

@@ -1,91 +1,45 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _recharts = require("recharts");
-var _alpha = require("../../utils/alpha");
-var _ActiveShape = _interopRequireDefault(require("./ActiveShape"));
-var _renderTextContent = _interopRequireDefault(require("./renderTextContent"));
-var _styles = require("./styles");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const PieChart = ({
-  width,
-  height,
-  data,
-  subtitlePrefix,
-  defaultSubtitle,
-  active,
-  opacity,
-  onActiveChange,
-  customMiddleText,
-  customMiddleValue,
-  ...rest
-}) => {
-  const [activeIndex, setActiveIndex] = (0, _react.useState)();
-  const [hoverIndex, setHoverIndex] = (0, _react.useState)(null);
-
-  /** When active is handled from the outside */
-  (0, _react.useEffect)(() => {
-    setActiveIndex(active);
-  }, [active]);
-  const onPieClick = (0, _react.useCallback)((_, index) => {
-    if (index === activeIndex) {
-      setActiveIndex(undefined);
-      onActiveChange?.(undefined);
-      return;
-    }
-    onActiveChange?.(index);
-    setActiveIndex(index);
-  }, [activeIndex, onActiveChange]);
-  const onCellHover = (0, _react.useCallback)((_, index) => setHoverIndex(index), [setHoverIndex]);
-
-  /** Avoids re-renders by memoizing parameters */
-  const calculateTitle = (0, _react.useMemo)(() => {
-    if (customMiddleText) return customMiddleText;
-    const activeItemTitle = activeIndex !== undefined ? data[activeIndex].title : defaultSubtitle;
-    return subtitlePrefix ? `${subtitlePrefix} ${activeItemTitle?.toLocaleLowerCase()}` : activeItemTitle;
-  }, [activeIndex, data, defaultSubtitle, subtitlePrefix]);
-  const activeItemValue = activeIndex !== undefined ? data[activeIndex].value : data.map(({
-    value
-  }) => value).reduce((sum, value) => sum + value);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.PieChartWrapper, {
-    height: height,
-    width: width,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_recharts.ResponsiveContainer, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_recharts.PieChart, {
-        "aria-label": "Pie chart",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_recharts.Pie, {
-          isAnimationActive: false,
-          data: data,
-          onClick: onPieClick,
-          activeIndex: activeIndex,
-          activeShape: _ActiveShape.default,
-          onMouseEnter: onCellHover,
-          onMouseOut: () => setHoverIndex(null)
-          // Thickness of the graph, higher % = thinner
-          ,
-          innerRadius: "65%",
-          dataKey: "value",
-          ...rest,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_recharts.LabelList, {
-            valueAccessor: () => {}
-            // @ts-ignore
-            ,
-            content: (0, _renderTextContent.default)(customMiddleValue || activeItemValue, calculateTitle)
-          }), data.map((entry, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_recharts.Cell, {
-            fill: hoverIndex === index || activeIndex === index ? entry.color : (0, _alpha.alpha)(entry.color || '#000000', 70),
-            role: "presentation",
-            "aria-label": `${entry.title}: ${entry.value}`
-          }, `cell-${index}`))]
-        })
-      })
-    })
-  });
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Cell, LabelList, Pie, PieChart as Chart, ResponsiveContainer, } from 'recharts';
+import { alpha } from '../../utils/alpha';
+import ActiveShape from './ActiveShape';
+import renderTextContent from './renderTextContent';
+import { PieChartWrapper } from './styles';
+const PieChart = ({ width, height, data, subtitlePrefix, defaultSubtitle, active, opacity, onActiveChange, customMiddleText, customMiddleValue, ...rest }) => {
+    const [activeIndex, setActiveIndex] = useState();
+    const [hoverIndex, setHoverIndex] = useState(null);
+    /** When active is handled from the outside */
+    useEffect(() => {
+        setActiveIndex(active);
+    }, [active]);
+    const onPieClick = useCallback((_, index) => {
+        if (index === activeIndex) {
+            setActiveIndex(undefined);
+            onActiveChange?.(undefined);
+            return;
+        }
+        onActiveChange?.(index);
+        setActiveIndex(index);
+    }, [activeIndex, onActiveChange]);
+    const onCellHover = useCallback((_, index) => setHoverIndex(index), [setHoverIndex]);
+    /** Avoids re-renders by memoizing parameters */
+    const calculateTitle = useMemo(() => {
+        if (customMiddleText)
+            return customMiddleText;
+        const activeItemTitle = activeIndex !== undefined ? data[activeIndex].title : defaultSubtitle;
+        return subtitlePrefix
+            ? `${subtitlePrefix} ${activeItemTitle?.toLocaleLowerCase()}`
+            : activeItemTitle;
+    }, [activeIndex, data, defaultSubtitle, subtitlePrefix]);
+    const activeItemValue = activeIndex !== undefined
+        ? data[activeIndex].value
+        : data.map(({ value }) => value).reduce((sum, value) => sum + value);
+    return (_jsx(PieChartWrapper, { height: height, width: width, children: _jsx(ResponsiveContainer, { children: _jsx(Chart, { "aria-label": "Pie chart", children: _jsxs(Pie, { isAnimationActive: false, data: data, onClick: onPieClick, activeIndex: activeIndex, activeShape: ActiveShape, onMouseEnter: onCellHover, onMouseOut: () => setHoverIndex(null), 
+                    // Thickness of the graph, higher % = thinner
+                    innerRadius: "65%", dataKey: "value", ...rest, children: [_jsx(LabelList, { valueAccessor: () => { }, 
+                            // @ts-ignore
+                            content: renderTextContent(customMiddleValue || activeItemValue, calculateTitle) }), data.map((entry, index) => (_jsx(Cell, { fill: hoverIndex === index || activeIndex === index
+                                ? entry.color
+                                : alpha(entry.color || '#000000', 70), role: "presentation", "aria-label": `${entry.title}: ${entry.value}` }, `cell-${index}`)))] }) }) }) }));
 };
-var _default = exports.default = PieChart;
+export default PieChart;

package/lib/core/PieChart/renderTextContent/index.d.ts

@@ -2,4 +2,3 @@ import React from 'react';
 /** Renders central text in the pie chart*/
 declare const renderTextContent: (num: number, title?: string) => (props: any) => React.JSX.Element;
 export default renderTextContent;
-//# sourceMappingURL=index.d.ts.map

package/lib/core/PieChart/renderTextContent/index.js

@@ -1,48 +1,8 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _styles = require("../styles");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/** Renders central text in the pie chart*/const renderTextContent = (num, title) => props => {
-  const {
-    cx,
-    cy,
-    fill
-  } = props;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.TextContent, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("text", {
-      x: cx,
-      y: cy,
-      textAnchor: "middle",
-      fill: fill,
-      role: "text",
-      "aria-label": `${title ? title : ''} ${num}`,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("tspan", {
-        pointerEvents: "none",
-        x: cx,
-        y: cy,
-        dy: 10,
-        fontSize: 48,
-        textAnchor: "middle",
-        fill: "#000000",
-        children: num
-      }), title && /*#__PURE__*/(0, _jsxRuntime.jsx)("tspan", {
-        pointerEvents: "none",
-        x: cx,
-        y: cy,
-        dy: 32,
-        fontSize: 14,
-        textAnchor: "middle",
-        fill: "#00000060",
-        opacity: 0.6,
-        children: title
-      })]
-    })
-  });
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TextContent } from '../styles';
+/** Renders central text in the pie chart*/
+const renderTextContent = (num, title) => (props) => {
+    const { cx, cy, fill } = props;
+    return (_jsx(TextContent, { children: _jsxs("text", { x: cx, y: cy, textAnchor: "middle", fill: fill, role: "text", "aria-label": `${title ? title : ''} ${num}`, children: [_jsx("tspan", { pointerEvents: "none", x: cx, y: cy, dy: 10, fontSize: 48, textAnchor: "middle", fill: "#000000", children: num }), title && (_jsx("tspan", { pointerEvents: "none", x: cx, y: cy, dy: 32, fontSize: 14, textAnchor: "middle", fill: "#00000060", opacity: 0.6, children: title }))] }) }));
 };
-var _default = exports.default = renderTextContent;
+export default renderTextContent;