npm - @hashicorp/mds-react - Versions diffs - 0.9.12 → 0.9.14 - Mend

@hashicorp/mds-react 0.9.12 → 0.9.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (143) hide show

package/components/text/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../src/components/text/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport {\n\tcreateElement,\n\ttype ComponentPropsWithRef,\n\ttype ElementType,\n\ttype ReactNode,\n} from 'react'\nimport s from './style.module.scss'\n\nconst TEXT_COLORS = [\n\t'primary',\n\t'strong',\n\t'faint',\n\t'disabled',\n\t'high-contrast',\n\t'action',\n\t'action-hover',\n\t'action-active',\n\t'highlight',\n\t'highlight-on-surface',\n\t'highlight-high-contrast',\n\t'success',\n\t'success-on-surface',\n\t'success-high-contrast',\n\t'warning',\n\t'warning-on-surface',\n\t'warning-high-contrast',\n\t'critical',\n\t'critical-on-surface',\n\t'critical-high-contrast',\n] as const\n\nconst TEXT_GROUPS = [\n\t'hds-body',\n\t'code',\n\t'body',\n\t'display-expressive',\n\t'label',\n] as const\n\nconst TEXT_SIZES = [\n\t'100',\n\t'200',\n\t'300',\n\t'400',\n\t'500',\n\t'600',\n\t'700',\n\t'800',\n] as const\n\nconst TEXT_WEIGHTS = ['regular', 'medium', 'semibold', 'bold'] as const\n\ntype TextColor = (typeof TEXT_COLORS)[number]\ntype TextWeight = (typeof TEXT_WEIGHTS)[number]\ntype TextGroup = (typeof TEXT_GROUPS)[number]\ntype TextSize = (typeof TEXT_SIZES)[number]\n\n// small typescript hack to support autocomplete and arbitrary strings\ntype HexColor = string & { hexish?: unknown }\n\ninterface BaseTextProps {\n\tsize?: TextSize\n\tweight?: TextWeight\n\talign?: 'left' \| 'center' \| 'right'\n\tcolor?: TextColor \| HexColor\n\tclassName?: string\n\tchildren?: ReactNode\n}\n\ntype PolymorphicTextProps<\n\tTTag extends ElementType,\n\tOwnProps extends object\n> = OwnProps & {\n\ttag?: TTag\n} & Omit<ComponentPropsWithRef<TTag>, keyof OwnProps \| 'tag'>\n\ninterface TextImplInternalProps extends BaseTextProps {\n\tgroup: TextGroup\n\ttag?: ElementType\n\t// allow any other intrinsic props to pass through\n\t[key: string]: unknown\n}\n\nfunction getTypographyToken(group: TextGroup, size: TextSize): string {\n\tconst groupToTokenMap: Record<TextGroup, string> = {\n\t\t'hds-body': `mds-typography-legacy-body-${size}`,\n\t\tcode: `mds-typography-code-${size}`,\n\t\t'display-expressive': `mds-typography-display-expressive-${size}`,\n\t\tlabel: `mds-typography-label`,\n\t\tbody: `mds-typography-body-${size}`,\n\t}\n\n\treturn groupToTokenMap[group]\n}\n\nconst TextImpl = (props: TextImplInternalProps) => {\n\tconst {\n\t\ttag,\n\t\tgroup,\n\t\tsize = '200',\n\t\tweight,\n\t\talign,\n\t\tcolor,\n\t\tchildren,\n\t\tclassName,\n\t\t...rest\n\t} = props\n\n\tconst Component = (tag ?? 'span') as ElementType\n\tconst variant = getTypographyToken(group, size)\n\n\tconst usesPredefinedColor = TEXT_COLORS.includes(color as TextColor)\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={classNames(\n\t\t\t\tvariant,\n\t\t\t\t{\n\t\t\t\t\t[s[`align-${align}`]]: align,\n\t\t\t\t\t[`mds-typography-font-weight-${weight}`]: weight,\n\t\t\t\t\t[`mds-foreground-${color}`]: color && usesPredefinedColor,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tstyle={color && !usesPredefinedColor ? { color } : {}}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{children}\n\t\t</Component>\n\t)\n}\n\n/** ------------------------------------------------------------------\n * Body\n * ------------------------------------------------------------------ /\n\ninterface BodyOwnProps extends BaseTextProps {\n\tsize?: '200' \| '300' \| '400'\n}\n\nexport type BodyProps<TTag extends ElementType = 'span'> = PolymorphicTextProps<\n\tTTag,\n\tBodyOwnProps\n>\n\nconst Body = <TTag extends ElementType = 'span'>(props: BodyProps<TTag>) => {\n\tconst { tag, size = '300', ...rest } = props\n\n\treturn createElement(TextImpl, {\n\t\t...rest,\n\t\ttag: (tag ?? 'span') as ElementType,\n\t\tsize,\n\t\tgroup: 'body' as const,\n\t})\n}\n\n/* ------------------------------------------------------------------\n * DisplayExpressive\n * ------------------------------------------------------------------ /\n\ninterface DisplayExpressiveOwnProps extends BaseTextProps {\n\tsize?: '100' \| '200' \| '300' \| '400' \| '500' \| '600' \| '700' \| '800'\n}\n\nexport type DisplayExpressiveProps<TTag extends ElementType = 'span'> =\n\tPolymorphicTextProps<TTag, DisplayExpressiveOwnProps>\n\nconst DisplayExpressive = <TTag extends ElementType = 'span'>(\n\tprops: DisplayExpressiveProps<TTag>\n) => {\n\tconst { tag, size = '200', ...rest } = props\n\n\treturn createElement(TextImpl, {\n\t\t...rest,\n\t\ttag: (tag ?? 'span') as ElementType,\n\t\tsize,\n\t\tgroup: 'display-expressive' as const,\n\t})\n}\n\n/* ------------------------------------------------------------------\n * Label\n * ------------------------------------------------------------------ /\n\ntype LabelOwnProps = Omit<BaseTextProps, 'size'>\n\nexport type LabelProps<TTag extends ElementType = 'span'> =\n\tPolymorphicTextProps<TTag, LabelOwnProps>\n\nconst Label = <TTag extends ElementType = 'span'>(props: LabelProps<TTag>) => {\n\tconst { tag, ...rest } = props\n\n\treturn createElement(TextImpl, {\n\t\t...rest,\n\t\ttag: (tag ?? 'span') as ElementType,\n\t\tgroup: 'label' as const,\n\t})\n}\n\n/* ------------------------------------------------------------------\n * HDSBody\n * ------------------------------------------------------------------ /\n\ninterface HDSBodyOwnProps extends BaseTextProps {\n\tsize?: '100' \| '200' \| '300'\n}\n\nexport type HDSBodyProps<TTag extends ElementType = 'span'> =\n\tPolymorphicTextProps<TTag, HDSBodyOwnProps>\n\nconst HDSBody = <TTag extends ElementType = 'span'>(\n\tprops: HDSBodyProps<TTag>\n) => {\n\tconst { tag, size = '200', weight = 'regular', ...rest } = props\n\n\treturn createElement(TextImpl, {\n\t\t...rest,\n\t\ttag: (tag ?? 'span') as ElementType,\n\t\tsize,\n\t\tweight,\n\t\tgroup: 'hds-body' as const,\n\t})\n}\n\n/* ------------------------------------------------------------------\n * Code\n * ------------------------------------------------------------------ */\n\ninterface CodeOwnProps extends BaseTextProps {\n\tsize?: '100' \| '200' \| '300'\n}\n\nexport type CodeProps<TTag extends ElementType = 'span'> = PolymorphicTextProps<\n\tTTag,\n\tCodeOwnProps\n>\n\nconst Code = <TTag extends ElementType = 'span'>(props: CodeProps<TTag>) => {\n\tconst { tag, size = '200', weight = 'regular', ...rest } = props\n\n\treturn createElement(TextImpl, {\n\t\t...rest,\n\t\ttag: (tag ?? 'span') as ElementType,\n\t\tsize,\n\t\tweight,\n\t\tgroup: 'code' as const,\n\t})\n}\n\nconst Text = {\n\tBody,\n\tDisplayExpressive,\n\tLabel,\n\tHDSBody,\n\tCode,\n}\n\nexport { Text, TEXT_COLORS, TEXT_WEIGHTS }\n"],"names":["TEXT_COLORS","TEXT_WEIGHTS","getTypographyToken","group","size","TextImpl","props","tag","weight","align","color","children","className","rest","Component","variant","usesPredefinedColor","jsx","classNames","s","Body","createElement","DisplayExpressive","Label","HDSBody","Code","Text"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","sources":["../../../src/components/text/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport {\n\tcreateElement,\n\ttype ComponentPropsWithRef,\n\ttype ElementType,\n\ttype ReactNode,\n} from 'react'\nimport s from './style.module.scss'\n\nconst TEXT_COLORS = [\n\t'primary',\n\t'strong',\n\t'faint',\n\t'disabled',\n\t'high-contrast',\n\t'action',\n\t'action-hover',\n\t'action-active',\n\t'highlight',\n\t'highlight-on-surface',\n\t'highlight-high-contrast',\n\t'success',\n\t'success-on-surface',\n\t'success-high-contrast',\n\t'warning',\n\t'warning-on-surface',\n\t'warning-high-contrast',\n\t'critical',\n\t'critical-on-surface',\n\t'critical-high-contrast',\n] as const\n\nconst TEXT_GROUPS = [\n\t'hds-body',\n\t'code',\n\t'body',\n\t'display-expressive',\n\t'label',\n] as const\n\nconst TEXT_SIZES = [\n\t'100',\n\t'200',\n\t'300',\n\t'400',\n\t'500',\n\t'600',\n\t'700',\n\t'800',\n] as const\n\nconst TEXT_WEIGHTS = ['regular', 'medium', 'semibold', 'bold'] as const\n\ntype TextColor = (typeof TEXT_COLORS)[number]\ntype TextWeight = (typeof TEXT_WEIGHTS)[number]\ntype TextGroup = (typeof TEXT_GROUPS)[number]\ntype TextSize = (typeof TEXT_SIZES)[number]\n\n// small typescript hack to support autocomplete and arbitrary strings\ntype HexColor = string & { hexish?: unknown }\n\ninterface BaseTextProps {\n\tsize?: TextSize\n\tweight?: TextWeight\n\talign?: 'left' \| 'center' \| 'right'\n\tcolor?: TextColor \| HexColor\n\tclassName?: string\n\tchildren?: ReactNode\n}\n\ntype PolymorphicTextProps<\n\tTTag extends ElementType,\n\tOwnProps extends object,\n> = OwnProps & {\n\ttag?: TTag\n} & Omit<ComponentPropsWithRef<TTag>, keyof OwnProps \| 'tag'>\n\ninterface TextImplInternalProps extends BaseTextProps {\n\tgroup: TextGroup\n\ttag?: ElementType\n\t// allow any other intrinsic props to pass through\n\t[key: string]: unknown\n}\n\nfunction getTypographyToken(group: TextGroup, size: TextSize): string {\n\tconst groupToTokenMap: Record<TextGroup, string> = {\n\t\t'hds-body': `mds-typography-legacy-body-${size}`,\n\t\tcode: `mds-typography-code-${size}`,\n\t\t'display-expressive': `mds-typography-display-expressive-${size}`,\n\t\tlabel: `mds-typography-label`,\n\t\tbody: `mds-typography-body-${size}`,\n\t}\n\n\treturn groupToTokenMap[group]\n}\n\nconst TextImpl = (props: TextImplInternalProps) => {\n\tconst {\n\t\ttag,\n\t\tgroup,\n\t\tsize = '200',\n\t\tweight,\n\t\talign,\n\t\tcolor,\n\t\tchildren,\n\t\tclassName,\n\t\t...rest\n\t} = props\n\n\tconst Component = (tag ?? 'span') as ElementType\n\tconst variant = getTypographyToken(group, size)\n\n\tconst usesPredefinedColor = TEXT_COLORS.includes(color as TextColor)\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={classNames(\n\t\t\t\tvariant,\n\t\t\t\t{\n\t\t\t\t\t[s[`align-${align}`]]: align,\n\t\t\t\t\t[`mds-typography-font-weight-${weight}`]: weight,\n\t\t\t\t\t[`mds-foreground-${color}`]: color && usesPredefinedColor,\n\t\t\t\t},\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tstyle={color && !usesPredefinedColor ? { color } : {}}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{children}\n\t\t</Component>\n\t)\n}\n\n/** ------------------------------------------------------------------\n * Body\n * ------------------------------------------------------------------ /\n\ninterface BodyOwnProps extends BaseTextProps {\n\tsize?: '200' \| '300' \| '400'\n}\n\nexport type BodyProps<TTag extends ElementType = 'span'> = PolymorphicTextProps<\n\tTTag,\n\tBodyOwnProps\n>\n\nconst Body = <TTag extends ElementType = 'span'>(props: BodyProps<TTag>) => {\n\tconst { tag, size = '300', ...rest } = props\n\n\treturn createElement(TextImpl, {\n\t\t...rest,\n\t\ttag: (tag ?? 'span') as ElementType,\n\t\tsize,\n\t\tgroup: 'body' as const,\n\t})\n}\n\n/* ------------------------------------------------------------------\n * DisplayExpressive\n * ------------------------------------------------------------------ /\n\ninterface DisplayExpressiveOwnProps extends BaseTextProps {\n\tsize?: '100' \| '200' \| '300' \| '400' \| '500' \| '600' \| '700' \| '800'\n}\n\nexport type DisplayExpressiveProps<TTag extends ElementType = 'span'> =\n\tPolymorphicTextProps<TTag, DisplayExpressiveOwnProps>\n\nconst DisplayExpressive = <TTag extends ElementType = 'span'>(\n\tprops: DisplayExpressiveProps<TTag>,\n) => {\n\tconst { tag, size = '200', ...rest } = props\n\n\treturn createElement(TextImpl, {\n\t\t...rest,\n\t\ttag: (tag ?? 'span') as ElementType,\n\t\tsize,\n\t\tgroup: 'display-expressive' as const,\n\t})\n}\n\n/* ------------------------------------------------------------------\n * Label\n * ------------------------------------------------------------------ /\n\ntype LabelOwnProps = Omit<BaseTextProps, 'size'>\n\nexport type LabelProps<TTag extends ElementType = 'span'> =\n\tPolymorphicTextProps<TTag, LabelOwnProps>\n\nconst Label = <TTag extends ElementType = 'span'>(props: LabelProps<TTag>) => {\n\tconst { tag, ...rest } = props\n\n\treturn createElement(TextImpl, {\n\t\t...rest,\n\t\ttag: (tag ?? 'span') as ElementType,\n\t\tgroup: 'label' as const,\n\t})\n}\n\n/* ------------------------------------------------------------------\n * HDSBody\n * ------------------------------------------------------------------ /\n\ninterface HDSBodyOwnProps extends BaseTextProps {\n\tsize?: '100' \| '200' \| '300'\n}\n\nexport type HDSBodyProps<TTag extends ElementType = 'span'> =\n\tPolymorphicTextProps<TTag, HDSBodyOwnProps>\n\nconst HDSBody = <TTag extends ElementType = 'span'>(\n\tprops: HDSBodyProps<TTag>,\n) => {\n\tconst { tag, size = '200', weight = 'regular', ...rest } = props\n\n\treturn createElement(TextImpl, {\n\t\t...rest,\n\t\ttag: (tag ?? 'span') as ElementType,\n\t\tsize,\n\t\tweight,\n\t\tgroup: 'hds-body' as const,\n\t})\n}\n\n/* ------------------------------------------------------------------\n * Code\n * ------------------------------------------------------------------ */\n\ninterface CodeOwnProps extends BaseTextProps {\n\tsize?: '100' \| '200' \| '300'\n}\n\nexport type CodeProps<TTag extends ElementType = 'span'> = PolymorphicTextProps<\n\tTTag,\n\tCodeOwnProps\n>\n\nconst Code = <TTag extends ElementType = 'span'>(props: CodeProps<TTag>) => {\n\tconst { tag, size = '200', weight = 'regular', ...rest } = props\n\n\treturn createElement(TextImpl, {\n\t\t...rest,\n\t\ttag: (tag ?? 'span') as ElementType,\n\t\tsize,\n\t\tweight,\n\t\tgroup: 'code' as const,\n\t})\n}\n\nconst Text = {\n\tBody,\n\tDisplayExpressive,\n\tLabel,\n\tHDSBody,\n\tCode,\n}\n\nexport { Text, TEXT_COLORS, TEXT_WEIGHTS }\n"],"names":["TEXT_COLORS","TEXT_WEIGHTS","getTypographyToken","group","size","TextImpl","props","tag","weight","align","color","children","className","rest","Component","variant","usesPredefinedColor","jsx","classNames","s","Body","createElement","DisplayExpressive","Label","HDSBody","Code","Text"],"mappings":"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"}

package/components/visualizations/bar-chart/horizontal-chart/dataset-value/index.js CHANGED Viewed

@@ -2,28 +2,29 @@
 import { jsxs as f, jsx as u } from "react/jsx-runtime";
 import { useState as g } from "react";
 import i from "classnames";
-import h from "use-resize-observer";
-import { getContrastYIQ as b, hexToRgb as x } from "../../../../../utils/get-contrast-yiq.js";
-import { Text as V } from "../../../../text/index.js";
-import s from "./style.module.css.js";
+import { useResizeObserver as b } from "@usefy/use-resize-observer";
+import { getContrastYIQ as x, hexToRgb as V } from "../../../../../utils/get-contrast-yiq.js";
+import { Text as N } from "../../../../text/index.js";
+import t from "./style.module.css.js";
 function j({
   value: e,
-  highestValue: l,
+  highestValue: n,
   color: a,
-  stackable: m
+  stackable: c
 }) {
-  const [n, r] = g(!1), { ref: c } = h({
-    onResize: ({ width: o }) => {
+  const [l, o] = g(!1), { ref: m } = b({
+    onResize: (h) => {
+      const r = h.contentRect?.width ?? 0;
       e === 0 && (e = 0.5);
-      let t = 32;
-      e >= 10 && e <= 99 ? t = 40 : e >= 100 && (t = 48), o && o < t ? r(!0) : r(!1);
+      let s = 32;
+      e >= 10 && e <= 99 ? s = 40 : e >= 100 && (s = 48), r && r < s ? o(!0) : o(!1);
     }
-  }), d = b(x(a)), p = e / l * 100;
+  }), d = x(V(a)), p = e / n * 100;
   return /* @__PURE__ */ f(
     "div",
     {
-      ref: c,
-      className: i(s.datasetValue, s[d]),
+      ref: m,
+      className: i(t.datasetValue, t[d]),
       style: {
         "--width": p
       },
@@ -31,20 +32,20 @@ function j({
         /* @__PURE__ */ u(
           "div",
           {
-            className: s.datasetValueBar,
+            className: t.datasetValueBar,
             style: {
               "--bar-background": a
             }
           }
         ),
         /* @__PURE__ */ f(
-          V.Body,
+          N.Body,
           {
             tag: "span",
             size: "200",
-            className: i(s.datasetValuePercent, {
-              [s.offset]: n,
-              [s.stackable]: m
+            className: i(t.datasetValuePercent, {
+              [t.offset]: l,
+              [t.stackable]: c
             }),
             children: [
               e,

package/components/visualizations/bar-chart/horizontal-chart/dataset-value/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../../../src/components/visualizations/bar-chart/horizontal-chart/dataset-value/index.tsx"],"sourcesContent":["'use client'\n\nimport { useState } from 'react'\nimport classNames from 'classnames'\nimport useResizeObserver from 'use-resize-observer'\nimport { getContrastYIQ, hexToRgb } from '../../../../../utils/get-contrast-yiq'\nimport { Text } from '../../../../../components/text'\nimport s from './style.module.css'\n\ninterface DatasetValueProps {\n\tvalue: number\n\thighestValue: number\n\tcolor: string\n\tstackable: boolean\n}\n\nexport default function DatasetValue({\n\tvalue,\n\thighestValue,\n\tcolor,\n\tstackable,\n}: DatasetValueProps) {\n\tconst [valueIsOffset, setValueIsOffset] = useState(false)\n\tconst { ref } = useResizeObserver<HTMLDivElement>({\n\t\tonResize: ({ width }) => {\n\t\t\t// If the value is 0, we want to show a 0.5% bar\n\t\t\tif (value === 0) {\n\t\t\t\tvalue = 0.5\n\t\t\t}\n\n\t\t\t/*\n\t\t\t The logic below determines the threshold (in `px`)\n\t\t\t * a bar's width needs to reach for the value to be offset\n\t\t\t * by moving it to the right of the bar.\n\t\t\t \n\t\t\t The default below is for single-digit values.\n\t\t\t /\n\t\t\tlet offsetThreshold = 32\n\n\t\t\tif (value >= 10 && value <= 99) {\n\t\t\t\t// Offset threshold for 2 digit values\n\t\t\t\toffsetThreshold = 40\n\t\t\t} else if (value >= 100) {\n\t\t\t\t// Offset threshold for 3+ digit values\n\t\t\t\toffsetThreshold = 48\n\t\t\t}\n\n\t\t\tif (width && width < offsetThreshold) {\n\t\t\t\tsetValueIsOffset(true)\n\t\t\t} else {\n\t\t\t\tsetValueIsOffset(false)\n\t\t\t}\n\t\t},\n\t})\n\n\tconst valueColor = getContrastYIQ(hexToRgb(color))\n\n\t/\n\t The actual width of the bar, however, should be\n\t * a percentage of the highest value in the chart\n\t /\n\tconst percentageOfHighest = (value / highestValue) 100\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={classNames(s.datasetValue, s[valueColor])}\n\t\t\tstyle={\n\t\t\t\t{\n\t\t\t\t\t'--width': percentageOfHighest,\n\t\t\t\t} as React.CSSProperties\n\t\t\t}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={s.datasetValueBar}\n\t\t\t\tstyle={\n\t\t\t\t\t{\n\t\t\t\t\t\t'--bar-background': color,\n\t\t\t\t\t} as React.CSSProperties\n\t\t\t\t}\n\t\t\t/>\n\t\t\t<Text.Body\n\t\t\t\ttag=\"span\"\n\t\t\t\tsize=\"200\"\n\t\t\t\tclassName={classNames(s.datasetValuePercent, {\n\t\t\t\t\t[s.offset]: valueIsOffset,\n\t\t\t\t\t[s.stackable]: stackable,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{value}%\n\t\t\t</Text.Body>\n\t\t</div>\n\t)\n}\n"],"names":["DatasetValue","value","highestValue","color","stackable","valueIsOffset","useState","~~useResizeObserver~~","~~offsetThreshold~~","width","setValueIsOffset","valueColor","getContrastYIQ","jsxs","~~ref~~","~~classNames~~","percentageOfHighest","jsx","Text"],"mappings":";;;;;;;;AAgBqC,SACpCA,EAAA;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAC;AAAA,EACD,WAAAC;AACC,GAAA;AACA,QAAM,CAAAC,IAA4C,IAAAC,EAAA,EAAA,~~YACvC~~,~~IAAGC~~,~~EAAY~~;AAAA,~~IAExB~~,~~UAAI~~,~~YAAa~~,~~MAAA~~;AAChB,~~MAAAN~~,MAAQ,MACTA,IAAA;AAWA,~~UAAIO~~,IAAe;AAElB,~~MAAAP~~,KAAA,WAAkB,~~KACnBO~~,IAAoB,~~KAEnBP~~,KAAkB,~~QACnBO~~,IAAA,~~KAGCC~~,KAAAA,~~IAAiBD~~,~~IAClBE~~,EAAO,EAAA,IAEPA,EAAA,EAAA;AAAA,IAED;AAAA,EAED,CAAA,GAMMC,IAAAC,IAA+BT,CAAA,QAGpCF,IAAAC,IAAA;AAAA,SAAC,~~gBAAAW~~;AAAA,IAAA;AAAA,IAAA;AAAA,MAEA,~~KAAAC~~;AAAA,MACA,~~WACCC~~,~~EAAA~~,EAAA,~~cAAA~~,EAAAJ,CAAA,CAAA;AAAA,MAAA;QAEA,WAAAK;AAAA,MAGD;AAAA,MAAA,UAAA;AAAA,QAAC,gBAAAC;AAAA,UAAA;AAAA,UAAA;AAAA,YAEA,~~WACC~~,EAAA;AAAA,YAAA;cACqB,oBAAAd;AAAA,YACrB;AAAA,UAEF;AAAA,QAAA;AAAA,QACM,~~gBAAAU~~;AAAA,UAALK,EAAA;AAAA,UAAA;AAAA,YAEA;YACA;YAA6C,~~WACnCH~~,~~EAAG~~,EAAA,qBAAA;AAAA,cACZ,~~CAAC~~,EAAE,MAAA,~~GAASV~~;AAAA,cACZ,~~CAAA~~,EAAA,SAAA,~~GAAAD~~;AAAA,YAEA;YAAA,UAAA;AAAA,cAAMH;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACR;AAAA,MAAA;AAAA,IACD;AAAA,EAEF;;"}
1	+ {"version":3,"file":"index.js","sources":["../../../../../../src/components/visualizations/bar-chart/horizontal-chart/dataset-value/index.tsx"],"sourcesContent":["'use client'\n\nimport { useState } from 'react'\nimport classNames from 'classnames'\nimport { useResizeObserver } from '@usefy/use-resize-observer'\nimport { getContrastYIQ, hexToRgb } from '../../../../../utils/get-contrast-yiq'\nimport { Text } from '../../../../../components/text'\nimport s from './style.module.css'\n\ninterface DatasetValueProps {\n\tvalue: number\n\thighestValue: number\n\tcolor: string\n\tstackable: boolean\n}\n\nexport default function DatasetValue({\n\tvalue,\n\thighestValue,\n\tcolor,\n\tstackable,\n}: DatasetValueProps) {\n\tconst [valueIsOffset, setValueIsOffset] = useState(false)\n\tconst { ref } = useResizeObserver<HTMLDivElement>({\n\t\tonResize: (entry) => {\n\t\t\tconst width = entry.contentRect?.width ?? 0\n\t\t\t// If the value is 0, we want to show a 0.5% bar\n\t\t\tif (value === 0) {\n\t\t\t\tvalue = 0.5\n\t\t\t}\n\n\t\t\t/*\n\t\t\t The logic below determines the threshold (in `px`)\n\t\t\t * a bar's width needs to reach for the value to be offset\n\t\t\t * by moving it to the right of the bar.\n\t\t\t \n\t\t\t The default below is for single-digit values.\n\t\t\t /\n\t\t\tlet offsetThreshold = 32\n\n\t\t\tif (value >= 10 && value <= 99) {\n\t\t\t\t// Offset threshold for 2 digit values\n\t\t\t\toffsetThreshold = 40\n\t\t\t} else if (value >= 100) {\n\t\t\t\t// Offset threshold for 3+ digit values\n\t\t\t\toffsetThreshold = 48\n\t\t\t}\n\n\t\t\tif (width && width < offsetThreshold) {\n\t\t\t\tsetValueIsOffset(true)\n\t\t\t} else {\n\t\t\t\tsetValueIsOffset(false)\n\t\t\t}\n\t\t},\n\t})\n\n\tconst valueColor = getContrastYIQ(hexToRgb(color))\n\n\t/\n\t The actual width of the bar, however, should be\n\t * a percentage of the highest value in the chart\n\t /\n\tconst percentageOfHighest = (value / highestValue) 100\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={classNames(s.datasetValue, s[valueColor])}\n\t\t\tstyle={\n\t\t\t\t{\n\t\t\t\t\t'--width': percentageOfHighest,\n\t\t\t\t} as React.CSSProperties\n\t\t\t}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={s.datasetValueBar}\n\t\t\t\tstyle={\n\t\t\t\t\t{\n\t\t\t\t\t\t'--bar-background': color,\n\t\t\t\t\t} as React.CSSProperties\n\t\t\t\t}\n\t\t\t/>\n\t\t\t<Text.Body\n\t\t\t\ttag=\"span\"\n\t\t\t\tsize=\"200\"\n\t\t\t\tclassName={classNames(s.datasetValuePercent, {\n\t\t\t\t\t[s.offset]: valueIsOffset,\n\t\t\t\t\t[s.stackable]: stackable,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{value}%\n\t\t\t</Text.Body>\n\t\t</div>\n\t)\n}\n"],"names":["DatasetValue","value","highestValue","color","stackable","valueIsOffset","useState","ref","useResizeObserver","width","entry","offsetThreshold","setValueIsOffset","valueColor","getContrastYIQ","jsxs","classNames","s","percentageOfHighest","jsx","Text"],"mappings":";;;;;;;;AAgBqC,SACpCA,EAAA;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAC;AAAA,EACD,WAAAC;AACC,GAAA;AACA,QAAM,CAAAC,IAA4C,IAAAC,EAAA,EAAA,GACjD,EAAA,KAAAC,EAAU,IAACC,EAAU;AAAA,IACpB,iBAAc;AAEd,YAAIC,IAAUC,EAAG,aAAA,SAAA;AAChB,MAAAT,MAAQ,MACTA,IAAA;AAWA,UAAIU,IAAe;AAElB,MAAAV,KAAA,WAAkB,KACnBU,IAAoB,KAEnBV,KAAkB,QACnBU,IAAA,KAGCF,KAAAA,IAAiBE,IAClBC,EAAO,EAAA,IAEPA,EAAA,EAAA;AAAA,IAED;AAAA,EAED,CAAA,GAMMC,IAAAC,IAA+BX,CAAA,QAGpCF,IAAAC,IAAA;AAAA,SAAC,gBAAAa;AAAA,IAAA;AAAA,IAAA;AAAA,MAEA,KAAAR;AAAA,MACA,WACCS,EAAAC,EAAA,cAAAA,EAAAJ,CAAA,CAAA;AAAA,MAAA;QAEA,WAAAK;AAAA,MAGD;AAAA,MAAA,UAAA;AAAA,QAAC,gBAAAC;AAAA,UAAA;AAAA,UAAA;AAAA,YAEA,WACCF,EAAA;AAAA,YAAA;cACqB,oBAAAd;AAAA,YACrB;AAAA,UAEF;AAAA,QAAA;AAAA,QACM,gBAAAY;AAAA,UAALK,EAAA;AAAA,UAAA;AAAA,YAEA;YACA;YAA6C,WACnCJ,EAAGC,EAAA,qBAAA;AAAA,cACZ,CAACA,EAAE,MAAA,GAASZ;AAAA,cACZ,CAAAY,EAAA,SAAA,GAAAb;AAAA,YAEA;YAAA,UAAA;AAAA,cAAMH;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACR;AAAA,MAAA;AAAA,IACD;AAAA,EAEF;;"}

package/components/visualizations/bar-chart/horizontal-chart/index.js CHANGED Viewed

@@ -5,7 +5,7 @@ import C from "classnames";
 import S from "react-wrap-balancer";
 import y from "./dataset-value/index.js";
 import B from "./legend/index.js";
-import { useMediaQuery as k } from "../../../../hooks/use-media-query/index.js";
+import { useMediaQuery as k } from "../../../../utils/hooks/use-media-query/index.js";
 import { MDSButton as v } from "../../../legacy-button/index.js";
 import { Text as w } from "../../../text/index.js";
 import l from "./style.module.css.js";

package/components/visualizations/bar-chart/horizontal-chart/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../../src/components/visualizations/bar-chart/horizontal-chart/index.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, useState } from 'react'\nimport classNames from 'classnames'\nimport Balancer from 'react-wrap-balancer'\nimport DatasetValue from './dataset-value'\nimport Legend from './legend'\nimport { useMediaQuery } from '~~@web~~/hooks/use-media-query'\nimport { MDSButton } from '../../../legacy-button'\nimport { Text } from '../../../../components/text'\nimport s from './style.module.css'\n\ninterface Dataset {\n\tlabel: string\n\tvalues: Array<{\n\t\tvalue: number\n\t\tcolor: string\n\t}>\n\ttotal?: number\n}\n\ninterface Category {\n\tlabel: string\n\tcolor: string\n}\n\nexport interface HorizontalBarChartProps {\n\t/*\n\t Passing more than one category causes\n\t * the Key to be displayed.\n\t \n\t If no categories are passed, the default\n\t * color is Blue.\n\t /\n\tcategories?: Array<Category>\n\t/\n\t All group.values.length must be equal\n\t * to the length of the number of groups\n\t * passed. If no groups are passed, each\n\t * group.values.length must equal one.\n\t /\n\tdatasets: Array<Dataset>\n\t/\n\t The total number of groups to display\n\t * initially before the user hits the\n\t * \"Show all\" button. Default unlimited.\n\t * /\n\tmaxInitialDatasets?: number\n\t/\n\t If true, values in each `group` will\n\t * be stacked together to form a single\n\t * bar.\n\t /\n\tstacked?: boolean\n}\n\nexport default function HorizontalBarChart({\n\tcategories,\n\tdatasets,\n\t// Default this to virtually unlimited\n\tmaxInitialDatasets = 999,\n\tstacked = false,\n}: HorizontalBarChartProps): JSX.Element {\n\t/\n\t If screen width is higher than 560px,\n\t * and this is a stacked bar chart,\n\t * we can stack the bars\n\t /\n\tconst isStackable = useMediaQuery('(min-width: 560px)')\n\tconst initialClipped = datasets.length > maxInitialDatasets\n\t/\n\t If true, the chart only shows datasets\n\t * up to `maxInitialDatasets`.\n\t /\n\tconst [isClipped, setIsClipped] = useState(initialClipped)\n\n\tconst datasetsToDisplay = useMemo(() => {\n\t\treturn isClipped ? datasets.slice(0, maxInitialDatasets) : datasets\n\t}, [isClipped, datasets, maxInitialDatasets])\n\n\t/\n\t Calculate the largest value to calculate % widths\n\t \n\t We make this calculation on `datasets`, rather than\n\t * `datasetsToDisplay` to prevent any resizing after\n\t * 'Show All' is clicked\n\t /\n\tconst highestValue = useMemo(() => {\n\t\tlet valueToReturn = 0\n\t\tdatasets.forEach((dataset) => {\n\t\t\tif (stacked) {\n\t\t\t\t/\n\t\t\t\t If we're using a stacked bar chart, we want to add\n\t\t\t\t * up the dataset values to calculate our `valueToReturn`,\n\t\t\t\t * as these will be presented together.\n\t\t\t\t \n\t\t\t\t The largest stack will be 100% width.\n\t\t\t\t \n\t\t\t\t P.S.: The `color` key in this variable's `.reduce()`\n\t\t\t\t * calculation is just here for proper TS typing;\n\t\t\t\t * `color` isn't otherwise used or necessary for\n\t\t\t\t * `summedObj`.\n\t\t\t\t /\n\t\t\t\tconst valueSum = getDatasetTotal(dataset.values)\n\n\t\t\t\t/\n\t\t\t\t If the bars are stackable (i.e. we're above 560px screen width)\n\t\t\t\t * then we use the valueSum calculated above to determine the\n\t\t\t\t * highestValue to return.\n\t\t\t\t \n\t\t\t\t Otherwise, we want the chart to behave like the unstacked\n\t\t\t\t * bar chart, so we use the same logic unstacked charts do for\n\t\t\t\t * determining highestValue.\n\t\t\t\t /\n\t\t\t\tif (isStackable) {\n\t\t\t\t\tif (valueSum > valueToReturn) {\n\t\t\t\t\t\tvalueToReturn = valueSum\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tdataset.values.forEach(({ value }) => {\n\t\t\t\t\t\tif (value > valueToReturn) {\n\t\t\t\t\t\t\tvalueToReturn = value\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\t/\n\t\t\t\t In the event that we don't have a stacked bar chart,\n\t\t\t\t * we simply want to find the highest value out of all\n\t\t\t\t * of our values that is set (as that will be 100% width)\n\t\t\t\t */\n\t\t\t\tdataset.values.forEach(({ value }) => {\n\t\t\t\t\tif (value > valueToReturn) {\n\t\t\t\t\t\tvalueToReturn = value\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t}\n\t\t})\n\n\t\treturn valueToReturn\n\t}, [datasets, isStackable])\n\n\treturn (\n\t\t<div className={s.barChart}>\n\t\t\t<div className={s.chart}>\n\t\t\t\t{datasetsToDisplay.map((dataset) => (\n\t\t\t\t\t<div className={s.dataset} key={dataset.label}>\n\t\t\t\t\t\t<div className={s.datasetLabel}>\n\t\t\t\t\t\t\t<Balancer>{dataset.label}</Balancer>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={classNames(s.datasetValues, {\n\t\t\t\t\t\t\t\t[s.datasetValuesStacked]: stacked,\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{dataset.values.map(({ value, color }, barIndex) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<DatasetValue\n\t\t\t\t\t\t\t\t\t\tkey={`dataset-${dataset.label}-${value}-${barIndex}`}\n\t\t\t\t\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\t\t\t\t\thighestValue={highestValue}\n\t\t\t\t\t\t\t\t\t\tcolor={color}\n\t\t\t\t\t\t\t\t\t\tstackable={stacked}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t{stacked ? (\n\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t<Text.Body size=\"200\" tag=\"p\" className={s.datasetTotal}>\n\t\t\t\t\t\t\t\t\t\t<span className={s.datasetTotalText}>Total:</span>\n\t\t\t\t\t\t\t\t\t\t<span className={s.datasetTotalPercent}>\n\t\t\t\t\t\t\t\t\t\t\t{dataset.total \|\| getDatasetTotal(dataset.values)}%\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</Text.Body>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t\t{initialClipped &&\n\t\t\t\t(isClipped ? (\n\t\t\t\t\t<MDSButton\n\t\t\t\t\t\tclassName={s.showAllButton}\n\t\t\t\t\t\ttitle=\"Show all\"\n\t\t\t\t\t\ttheme={{\n\t\t\t\t\t\t\tbrand: 'neutral',\n\t\t\t\t\t\t\tvariant: 'secondary',\n\t\t\t\t\t\t\tbackground: 'light',\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonClick={() => setIsClipped(false)}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<MDSButton\n\t\t\t\t\t\tclassName={s.showAllButton}\n\t\t\t\t\t\ttitle=\"Show less\"\n\t\t\t\t\t\ttheme={{\n\t\t\t\t\t\t\tbrand: 'neutral',\n\t\t\t\t\t\t\tvariant: 'secondary',\n\t\t\t\t\t\t\tbackground: 'light',\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonClick={() => setIsClipped(true)}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t{categories && categories.length > 1 && (\n\t\t\t\t<Legend className={s.legend} keys={categories} />\n\t\t\t)}\n\t\t</div>\n\t)\n}\n\nfunction getDatasetTotal(values: Dataset['values']): number {\n\tconst totalObj = values.reduce(\n\t\t(a, b) => {\n\t\t\treturn { value: a.value + b.value, color: '' }\n\t\t},\n\t\t{\n\t\t\tvalue: 0,\n\t\t\tcolor: '',\n\t\t}\n\t)\n\n\treturn totalObj.value\n}\n"],"names":["HorizontalBarChart","categories","datasets","maxInitialDatasets","stacked","isStackable","useMediaQuery","initialClipped","isClipped","setIsClipped","useState","datasetsToDisplay","useMemo","highestValue","dataset","getDatasetTotal","valueSum","valueToReturn","value","jsxs","s","jsx","Balancer","classNames","color","barIndex","DatasetValue","Text","MDSButton","Legend","values","a","b"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","sources":["../../../../../src/components/visualizations/bar-chart/horizontal-chart/index.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, useState } from 'react'\nimport classNames from 'classnames'\nimport Balancer from 'react-wrap-balancer'\nimport DatasetValue from './dataset-value'\nimport Legend from './legend'\nimport { useMediaQuery } from '../../../../utils/hooks/use-media-query'\nimport { MDSButton } from '../../../legacy-button'\nimport { Text } from '../../../../components/text'\nimport s from './style.module.css'\n\ninterface Dataset {\n\tlabel: string\n\tvalues: Array<{\n\t\tvalue: number\n\t\tcolor: string\n\t}>\n\ttotal?: number\n}\n\ninterface Category {\n\tlabel: string\n\tcolor: string\n}\n\nexport interface HorizontalBarChartProps {\n\t/*\n\t Passing more than one category causes\n\t * the Key to be displayed.\n\t \n\t If no categories are passed, the default\n\t * color is Blue.\n\t /\n\tcategories?: Array<Category>\n\t/\n\t All group.values.length must be equal\n\t * to the length of the number of groups\n\t * passed. If no groups are passed, each\n\t * group.values.length must equal one.\n\t /\n\tdatasets: Array<Dataset>\n\t/\n\t The total number of groups to display\n\t * initially before the user hits the\n\t * \"Show all\" button. Default unlimited.\n\t * /\n\tmaxInitialDatasets?: number\n\t/\n\t If true, values in each `group` will\n\t * be stacked together to form a single\n\t * bar.\n\t /\n\tstacked?: boolean\n}\n\nexport default function HorizontalBarChart({\n\tcategories,\n\tdatasets,\n\t// Default this to virtually unlimited\n\tmaxInitialDatasets = 999,\n\tstacked = false,\n}: HorizontalBarChartProps): JSX.Element {\n\t/\n\t If screen width is higher than 560px,\n\t * and this is a stacked bar chart,\n\t * we can stack the bars\n\t /\n\tconst isStackable = useMediaQuery('(min-width: 560px)')\n\tconst initialClipped = datasets.length > maxInitialDatasets\n\t/\n\t If true, the chart only shows datasets\n\t * up to `maxInitialDatasets`.\n\t /\n\tconst [isClipped, setIsClipped] = useState(initialClipped)\n\n\tconst datasetsToDisplay = useMemo(() => {\n\t\treturn isClipped ? datasets.slice(0, maxInitialDatasets) : datasets\n\t}, [isClipped, datasets, maxInitialDatasets])\n\n\t/\n\t Calculate the largest value to calculate % widths\n\t \n\t We make this calculation on `datasets`, rather than\n\t * `datasetsToDisplay` to prevent any resizing after\n\t * 'Show All' is clicked\n\t /\n\tconst highestValue = useMemo(() => {\n\t\tlet valueToReturn = 0\n\t\tdatasets.forEach((dataset) => {\n\t\t\tif (stacked) {\n\t\t\t\t/\n\t\t\t\t If we're using a stacked bar chart, we want to add\n\t\t\t\t * up the dataset values to calculate our `valueToReturn`,\n\t\t\t\t * as these will be presented together.\n\t\t\t\t \n\t\t\t\t The largest stack will be 100% width.\n\t\t\t\t \n\t\t\t\t P.S.: The `color` key in this variable's `.reduce()`\n\t\t\t\t * calculation is just here for proper TS typing;\n\t\t\t\t * `color` isn't otherwise used or necessary for\n\t\t\t\t * `summedObj`.\n\t\t\t\t /\n\t\t\t\tconst valueSum = getDatasetTotal(dataset.values)\n\n\t\t\t\t/\n\t\t\t\t If the bars are stackable (i.e. we're above 560px screen width)\n\t\t\t\t * then we use the valueSum calculated above to determine the\n\t\t\t\t * highestValue to return.\n\t\t\t\t \n\t\t\t\t Otherwise, we want the chart to behave like the unstacked\n\t\t\t\t * bar chart, so we use the same logic unstacked charts do for\n\t\t\t\t * determining highestValue.\n\t\t\t\t /\n\t\t\t\tif (isStackable) {\n\t\t\t\t\tif (valueSum > valueToReturn) {\n\t\t\t\t\t\tvalueToReturn = valueSum\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tdataset.values.forEach(({ value }) => {\n\t\t\t\t\t\tif (value > valueToReturn) {\n\t\t\t\t\t\t\tvalueToReturn = value\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\t/\n\t\t\t\t In the event that we don't have a stacked bar chart,\n\t\t\t\t * we simply want to find the highest value out of all\n\t\t\t\t * of our values that is set (as that will be 100% width)\n\t\t\t\t */\n\t\t\t\tdataset.values.forEach(({ value }) => {\n\t\t\t\t\tif (value > valueToReturn) {\n\t\t\t\t\t\tvalueToReturn = value\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t}\n\t\t})\n\n\t\treturn valueToReturn\n\t}, [datasets, isStackable])\n\n\treturn (\n\t\t<div className={s.barChart}>\n\t\t\t<div className={s.chart}>\n\t\t\t\t{datasetsToDisplay.map((dataset) => (\n\t\t\t\t\t<div className={s.dataset} key={dataset.label}>\n\t\t\t\t\t\t<div className={s.datasetLabel}>\n\t\t\t\t\t\t\t<Balancer>{dataset.label}</Balancer>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={classNames(s.datasetValues, {\n\t\t\t\t\t\t\t\t[s.datasetValuesStacked]: stacked,\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{dataset.values.map(({ value, color }, barIndex) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<DatasetValue\n\t\t\t\t\t\t\t\t\t\tkey={`dataset-${dataset.label}-${value}-${barIndex}`}\n\t\t\t\t\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\t\t\t\t\thighestValue={highestValue}\n\t\t\t\t\t\t\t\t\t\tcolor={color}\n\t\t\t\t\t\t\t\t\t\tstackable={stacked}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t{stacked ? (\n\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t<Text.Body size=\"200\" tag=\"p\" className={s.datasetTotal}>\n\t\t\t\t\t\t\t\t\t\t<span className={s.datasetTotalText}>Total:</span>\n\t\t\t\t\t\t\t\t\t\t<span className={s.datasetTotalPercent}>\n\t\t\t\t\t\t\t\t\t\t\t{dataset.total \|\| getDatasetTotal(dataset.values)}%\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</Text.Body>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t\t{initialClipped &&\n\t\t\t\t(isClipped ? (\n\t\t\t\t\t<MDSButton\n\t\t\t\t\t\tclassName={s.showAllButton}\n\t\t\t\t\t\ttitle=\"Show all\"\n\t\t\t\t\t\ttheme={{\n\t\t\t\t\t\t\tbrand: 'neutral',\n\t\t\t\t\t\t\tvariant: 'secondary',\n\t\t\t\t\t\t\tbackground: 'light',\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonClick={() => setIsClipped(false)}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<MDSButton\n\t\t\t\t\t\tclassName={s.showAllButton}\n\t\t\t\t\t\ttitle=\"Show less\"\n\t\t\t\t\t\ttheme={{\n\t\t\t\t\t\t\tbrand: 'neutral',\n\t\t\t\t\t\t\tvariant: 'secondary',\n\t\t\t\t\t\t\tbackground: 'light',\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonClick={() => setIsClipped(true)}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t{categories && categories.length > 1 && (\n\t\t\t\t<Legend className={s.legend} keys={categories} />\n\t\t\t)}\n\t\t</div>\n\t)\n}\n\nfunction getDatasetTotal(values: Dataset['values']): number {\n\tconst totalObj = values.reduce(\n\t\t(a, b) => {\n\t\t\treturn { value: a.value + b.value, color: '' }\n\t\t},\n\t\t{\n\t\t\tvalue: 0,\n\t\t\tcolor: '',\n\t\t},\n\t)\n\n\treturn totalObj.value\n}\n"],"names":["HorizontalBarChart","categories","datasets","maxInitialDatasets","stacked","isStackable","useMediaQuery","initialClipped","isClipped","setIsClipped","useState","datasetsToDisplay","useMemo","highestValue","dataset","getDatasetTotal","valueSum","valueToReturn","value","jsxs","s","jsx","Balancer","classNames","color","barIndex","DatasetValue","Text","MDSButton","Legend","values","a","b"],"mappings":"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"}

package/components/visualizations/bar-chart/horizontal-chart/style.module.css CHANGED Viewed

@@ -17,8 +17,8 @@
 	width: 100%;
 	@media (--large) {
-		grid-column-gap: var(--mds-spacing-07);
-		grid-row-gap: var(--mds-spacing-04);
+		column-gap: var(--mds-spacing-07);
+		row-gap: var(--mds-spacing-04);
 		grid-template-columns: 1fr 1fr;
 	}
 }

package/components/visualizations/bar-chart/style.module.css CHANGED Viewed

@@ -16,9 +16,7 @@
 		z-index: -1;
 		inset: var(--mds-accent-border-width, 1px);
 		background-color: var(--mds-color-surface-primary);
-		border-radius: calc(
-			var(--mds-spacing-04) - var(--mds-accent-border-width, 1px)
-		);
+		border-radius: calc(var(--mds-spacing-04) - var(--mds-accent-border-width, 1px));
 	}
 	@media (--medium-up) {
@@ -33,7 +31,7 @@
 	padding: 0;
 	margin: -1px;
 	overflow: hidden;
-	clip: rect(0, 0, 0, 0);
+	clip-path: inset(50%);
 	white-space: nowrap;
 	border-width: 0;
 }

package/components/visualizations/donut-chart/index.js CHANGED Viewed

@@ -1,60 +1,61 @@
 "use client";
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import { useState as b } from "react";
-import { ResponsivePie as g } from "@nivo/pie";
-import f from "use-resize-observer";
-import m from "classnames";
-import { Tabs as c } from "../../tabs/index.js";
+import { jsxs as s, jsx as a } from "react/jsx-runtime";
+import { useState as g } from "react";
+import { ResponsivePie as h } from "@nivo/pie";
+import { useResizeObserver as f } from "@usefy/use-resize-observer";
+import p from "classnames";
+import { Tabs as m } from "../../tabs/index.js";
 import { useTabsContext as L } from "../../tabs/use-tabs-context.js";
-import o from "./styles.module.css.js";
-import { renderArcTooltip as h } from "./components/arc-tooltip/index.js";
-import { useRenderArcLinkLabelComponent as d } from "./components/external-arc-label/index.js";
-import { useRenderArcLabelComponent as k } from "./components/internal-arc-label/index.js";
-const C = (e) => e > 4 ? 24 : 16, A = (e) => e === "xsmall" ? { top: 10, right: 0, bottom: 10, left: 0 } : e === "small" ? { top: 10, right: 40, bottom: 20, left: 40 } : { top: 80, right: 210, bottom: 84, left: 210 }, N = ({ data: e }) => e.length > 1 ? /* @__PURE__ */ i(c.Provider, { size: "large", children: [
-  /* @__PURE__ */ t(c.TabList, { children: e.map((r, a) => /* @__PURE__ */ t(c.Tab, { className: o.tab, children: r.groupName }, a)) }),
-  /* @__PURE__ */ t(D, { data: e })
-] }) : /* @__PURE__ */ t(p, { data: e });
-N.displayName = "DonutChart";
+import n from "./styles.module.css.js";
+import { renderArcTooltip as d } from "./components/arc-tooltip/index.js";
+import { useRenderArcLinkLabelComponent as k } from "./components/external-arc-label/index.js";
+import { useRenderArcLabelComponent as C } from "./components/internal-arc-label/index.js";
+const A = (e) => e > 4 ? 24 : 16, N = (e) => e === "xsmall" ? { top: 10, right: 0, bottom: 10, left: 0 } : e === "small" ? { top: 10, right: 40, bottom: 20, left: 40 } : { top: 80, right: 210, bottom: 84, left: 210 }, R = ({ data: e }) => e.length > 1 ? /* @__PURE__ */ s(m.Provider, { size: "large", children: [
+  /* @__PURE__ */ a(m.TabList, { children: e.map((r, t) => /* @__PURE__ */ a(m.Tab, { className: n.tab, children: r.groupName }, t)) }),
+  /* @__PURE__ */ a(D, { data: e })
+] }) : /* @__PURE__ */ a(u, { data: e });
+R.displayName = "DonutChart";
 const D = ({ data: e }) => {
-  const { selectedTabIndex: r, tabIds: a } = L(), n = a[r];
-  return /* @__PURE__ */ t(p, { tabId: n, data: e, groupIndex: r });
-}, p = ({
+  const { selectedTabIndex: r, tabIds: t } = L(), l = t[r];
+  return /* @__PURE__ */ a(u, { tabId: l, data: e, groupIndex: r });
+}, u = ({
   tabId: e,
   data: r,
-  groupIndex: a = 0
+  groupIndex: t = 0
 }) => {
-  const [n, s] = b("regular"), { ref: u } = f({
-    onResize: ({ width: l }) => {
-      l && l < 360 ? s("xsmall") : l && l < 600 ? s("small") : s("regular");
+  const [l, c] = g("regular"), { ref: b } = f({
+    onResize: (i) => {
+      const o = i.contentRect?.width ?? 0;
+      o && o < 360 ? c("xsmall") : o && o < 600 ? c("small") : c("regular");
     }
   });
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ s(
     "figure",
     {
-      className: m(
-        o["chart-container"],
-        r.length > 1 && o.multiple
+      className: p(
+        n["chart-container"],
+        r.length > 1 && n.multiple
       ),
-      id: r[a].groupId,
+      id: r[t].groupId,
       role: "tabpanel",
       tabIndex: 0,
-      "aria-label": e ? void 0 : r[a].groupName,
+      "aria-label": e ? void 0 : r[t].groupName,
       "aria-labelledby": e || void 0,
       children: [
-        /* @__PURE__ */ i("div", { className: m(o.chart, o[n]), ref: u, children: [
-          /* @__PURE__ */ t(
-            g,
+        /* @__PURE__ */ s("div", { className: p(n.chart, n[l]), ref: b, children: [
+          /* @__PURE__ */ a(
+            h,
             {
-              data: r[a].groupData,
-              margin: A(n),
-              enableArcLabels: n !== "regular",
-              enableArcLinkLabels: n === "regular",
-              arcLabelsComponent: k,
-              arcLinkLabelComponent: d,
-              arcLinkLabelsSkipAngle: C(
-                r[a].groupData.length
+              data: r[t].groupData,
+              margin: N(l),
+              enableArcLabels: l !== "regular",
+              enableArcLinkLabels: l === "regular",
+              arcLabelsComponent: C,
+              arcLinkLabelComponent: k,
+              arcLinkLabelsSkipAngle: A(
+                r[t].groupData.length
               ),
-              tooltip: h,
+              tooltip: d,
               "aria-hidden": "true",
               colors: { datum: "data.color" },
               innerRadius: 0.5,
@@ -68,23 +69,23 @@ const D = ({ data: e }) => {
               arcLabelsSkipAngle: 16
             }
           ),
-          r[a].groupCaption && /* @__PURE__ */ t("figcaption", { children: r[a].groupCaption })
+          r[t].groupCaption && /* @__PURE__ */ a("figcaption", { children: r[t].groupCaption })
         ] }),
-        n !== "regular" && /* @__PURE__ */ t("ul", { className: o.legend, "aria-hidden": "true", children: r[a].groupData.map((l) => /* @__PURE__ */ i("li", { children: [
-          /* @__PURE__ */ t(
+        l !== "regular" && /* @__PURE__ */ a("ul", { className: n.legend, "aria-hidden": "true", children: r[t].groupData.map((i) => /* @__PURE__ */ s("li", { children: [
+          /* @__PURE__ */ a(
             "span",
             {
-              className: o["legend-dot"],
-              style: { background: l.color }
+              className: n["legend-dot"],
+              style: { background: i.color }
             }
           ),
-          l.label
-        ] }, l.id)) })
+          i.label
+        ] }, i.id)) })
       ]
     }
   );
 };
 export {
-  N as DonutChart
+  R as DonutChart
 };
 //# sourceMappingURL=index.js.map

package/components/visualizations/donut-chart/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../src/components/visualizations/donut-chart/index.tsx"],"sourcesContent":["'use client'\n\nimport { useState } from 'react'\nimport { ResponsivePie } from '@nivo/pie'\nimport type { DonutChartData, DonutChartProps, DonutChartSize } from './types'\nimport useResizeObserver from 'use-resize-observer'\nimport classNames from 'classnames'\nimport { Tabs } from '../../tabs'\nimport {\n\trenderArcTooltip,\n\tuseRenderArcLabelComponent,\n\tuseRenderArcLinkLabelComponent,\n} from './components'\nimport { useTabsContext } from '../../tabs/use-tabs-context'\nimport s from './styles.module.css'\n\nconst getArcLinkLabelsSkipAngle = (count: number): number => {\n\tif (count > 4) {\n\t\treturn 24\n\t}\n\n\treturn 16\n}\n\nconst getMargins = (\n\tsize: DonutChartSize\n): {\n\ttop?: number\n\tright?: number\n\tbottom?: number\n\tleft?: number\n} => {\n\tif (size === 'xsmall') {\n\t\treturn { top: 10, right: 0, bottom: 10, left: 0 }\n\t} else if (size === 'small') {\n\t\treturn { top: 10, right: 40, bottom: 20, left: 40 }\n\t} else {\n\t\treturn { top: 80, right: 210, bottom: 84, left: 210 }\n\t}\n}\n\nexport const DonutChart = ({ data }: DonutChartProps) =>\n\tdata.length > 1 ? (\n\t\t<Tabs.Provider size=\"large\">\n\t\t\t<Tabs.TabList>\n\t\t\t\t{data.map((group, i) => (\n\t\t\t\t\t<Tabs.Tab key={i} className={s.tab}>\n\t\t\t\t\t\t{group.groupName}\n\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t))}\n\t\t\t</Tabs.TabList>\n\t\t\t<DonutChartPanelWithTabCtx data={data} />\n\t\t</Tabs.Provider>\n\t) : (\n\t\t<DonutChartPanel data={data} />\n\t)\n\nDonutChart.displayName = 'DonutChart'\n\nconst DonutChartPanelWithTabCtx = ({ data }: { data: DonutChartData[] }) => {\n\tconst { selectedTabIndex, tabIds } = useTabsContext()\n\n\tconst tabId = tabIds[selectedTabIndex]\n\n\treturn (\n\t\t<DonutChartPanel tabId={tabId} data={data} groupIndex={selectedTabIndex} />\n\t)\n}\n\nexport interface DonutChartPanelProps {\n\ttabId?: string\n\tdata: DonutChartData[]\n\tgroupIndex?: number\n}\n\nconst DonutChartPanel = ({\n\ttabId,\n\tdata,\n\tgroupIndex = 0,\n}: DonutChartPanelProps) => {\n\tconst [size, setSize] = useState<DonutChartSize>('regular')\n\tconst { ref } = useResizeObserver<HTMLDivElement>({\n\t\tonResize: ({ width }) => {\n\t\t\tif (width && width < 360) {\n\t\t\t\tsetSize('xsmall')\n\t\t\t} else if (width && width < 600) {\n\t\t\t\tsetSize('small')\n\t\t\t} else {\n\t\t\t\tsetSize('regular')\n\t\t\t}\n\t\t},\n\t})\n\n\treturn (\n\t\t<figure\n\t\t\tclassName={classNames(\n\t\t\t\ts['chart-container'],\n\t\t\t\tdata.length > 1 && s.multiple\n\t\t\t)}\n\t\t\tid={data[groupIndex].groupId}\n\t\t\trole=\"tabpanel\"\n\t\t\ttabIndex={0}\n\t\t\taria-label={tabId ? undefined : data[groupIndex].groupName}\n\t\t\taria-labelledby={tabId \|\| undefined}\n\t\t>\n\t\t\t<div className={classNames(s.chart, s[size])} ref={ref}>\n\t\t\t\t<ResponsivePie\n\t\t\t\t\tdata={data[groupIndex].groupData}\n\t\t\t\t\tmargin={getMargins(size)}\n\t\t\t\t\tenableArcLabels={size !== 'regular'}\n\t\t\t\t\tenableArcLinkLabels={size === 'regular'}\n\t\t\t\t\tarcLabelsComponent={useRenderArcLabelComponent}\n\t\t\t\t\tarcLinkLabelComponent={useRenderArcLinkLabelComponent}\n\t\t\t\t\tarcLinkLabelsSkipAngle={getArcLinkLabelsSkipAngle(\n\t\t\t\t\t\tdata[groupIndex].groupData.length\n\t\t\t\t\t)}\n\t\t\t\t\ttooltip={renderArcTooltip}\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tcolors={{ datum: 'data.color' }}\n\t\t\t\t\tinnerRadius={0.5}\n\t\t\t\t\tpadAngle={1}\n\t\t\t\t\tcornerRadius={8}\n\t\t\t\t\tactiveOuterRadiusOffset={4}\n\t\t\t\t\tarcLinkLabelsThickness={1}\n\t\t\t\t\tarcLinkLabelsOffset={4}\n\t\t\t\t\tarcLinkLabelsDiagonalLength={28}\n\t\t\t\t\tarcLinkLabelsStraightLength={24}\n\t\t\t\t\tarcLabelsSkipAngle={16}\n\t\t\t\t/>\n\t\t\t\t{data[groupIndex].groupCaption && (\n\t\t\t\t\t<figcaption>{data[groupIndex].groupCaption}</figcaption>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t{size !== 'regular' && (\n\t\t\t\t<ul className={s.legend} aria-hidden=\"true\">\n\t\t\t\t\t{data[groupIndex].groupData.map((record) => (\n\t\t\t\t\t\t<li key={record.id}>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclassName={s['legend-dot']}\n\t\t\t\t\t\t\t\tstyle={{ background: record.color }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{record.label}\n\t\t\t\t\t\t</li>\n\t\t\t\t\t))}\n\t\t\t\t</ul>\n\t\t\t)}\n\t\t</figure>\n\t)\n}\n"],"names":["getArcLinkLabelsSkipAngle","count","getMargins","size","DonutChart","data","jsxs","Tabs","jsx","group","i","s","DonutChartPanelWithTabCtx","DonutChartPanel","selectedTabIndex","useTabsContext","tabId","tabIds","groupIndex","setSize","useResizeObserver","width","~~classNames~~","~~ref~~","ResponsivePie","useRenderArcLabelComponent","renderArcTooltip","record"],"mappings":";;;;;;;;;;;;AAiBC,MAAIA,IAAW,CAAAC,UACP,IACR,KAGD,IAUKC,IAAS,CAAAC,YACH,WACV,EAAW,SAAS,OAAA,GAAS,QAAA,IAAA,MAAA,EAAA,IACnBA,MAAS,UACZ,EAAA,KAAA,IAAA,OAAA,IAAA,QAAA,IAAA,MAAA,GAAA,IAEP,EAAA,KAAA,IAAA,OAAA,KAAA,QAAA,IAAA,MAAA,IAAA,GAMEC,OAAC,MAAAC,EAAK,MAAAA,EACJ,aAAiB,gBAAAC,EAAAC,EAAA,UACjB,iBAAkB,UAAW;AAAA,EAK/B,gBAAAC,EAACD,EAAA,SAAA,EAAA,gBAAsC,CAAAE,GAAAC,MAAA,gBAAAF,EAAAD,EAAA,KAAA,EAAA,WAAAI,EAAA,KAAA,UAAAF,EAAA,UAAA,GAAAC,CAAA,CAAA,EAAA,CAAA;AAAA,EACxC,gBAAAF,EAAAI,GAEiB,EAAA,MAAAP,EAAY,CAAA;AAG/B,EAAA,CAAA,IAAW,gBAAAG,EAAcK,GAAA,EAAA,MAAAR,EAAA,CAAA;AAEzBD;AACC,MAAAQ,IAA0B,CAAA,EAAO,MAAAP;AAEjC,QAAM,EAAA,kBAAAS,iBAA+BC,EAAA,GAErCC,IAAAC,EAAAH,CACE;AAEH,SAAA,gBAAAN,EAAAK,GAAA,EAAA,OAAAG,GAAA,MAAAX,GAAA,YAAAS,EAAA,CAAA;AAQA,GACCD,IAAA,CAAA;AAAA,EACA,OAAAG;AAAA,EACA,MAAAX;AAAA,EACD,YAAAa,IAA4B;AAC3B,MAAA;AACA,QAAM,CAAAf,GAAMgB,OAAI,SAAkC,~~YACvC~~,~~IAAGC~~,~~EAAY~~;AAAA,~~IACxB~~,~~UAAI~~,~~CAAA~~,~~EAAA~~,~~OAAAC~~,~~EAAS~~;~~AACZ~~,~~MAAAA~~,KAAQA,IAAQ,QACjB,YACSA,KAAOA,IAAA,~~MAChBF~~,EAAO,OAAA,IAEPA,EAAA,SAAA;AAAA,IAED;AAAA,EAED;AACC,SAAC,gBAAAb;AAAA,IAAA;AAAA,IAAA;AAAA,MACW,~~WACRgB~~;AAAA,~~QACFX~~,mBAAmB;AAAA,QACpBN,EAAA,SAAA,KAAAM,EAAA;AAAA,MACA;AAAA,MACA,IAAAN,EAAKa,CAAA,EAAA;AAAA,MACL,MAAA;AAAA,MACA,UAAA;AAAA,MACA,cAAAF,IAAiB,SAASX,EAAAa,CAAA,EAAA;AAAA,MAE1B,mBAAAF,KAAA;AAAA,MAAA,UAAA;AAAA,QACC,gBAAAV,EAAA,OAAA,EAAA,~~WAAAgB~~,~~EAAAX~~,EAAA,OAAAA,EAAAR,CAAA,CAAA,GAAA,~~KAAAoB~~,GAAA,UAAA;AAAA,UAAC,~~gBAAAf~~;AAAA,~~YAAAgB~~;AAAA,YAAA;AAAA,cAEA,~~MAAAnB~~,EAAQa,GAAe;AAAA,cACvB,QAAAhB,EAAiBC,CAAA;AAAA,cACjB,iBAAAA,MAAqB;AAAA,cACrB,qBAAoBA,MAAA;AAAA,cACpB,~~oBAAAsB~~;AAAA,cACA;cAAwB;~~gBAExBpB~~,EAAAa,CAAA,EAAA,UAAA;AAAA,cACA;AAAA,cACA,~~SAAAQ~~;AAAA,cACA,eAAU;AAAA,cACV,QAAA,EAAA,OAAa,aAAA;AAAA,cACb,aAAU;AAAA,cACV,UAAA;AAAA,cACA,cAAA;AAAA,cACA,yBAAwB;AAAA,cACxB,wBAAqB;AAAA,cACrB,qBAAA;AAAA,cACA,6BAA6B;AAAA,cAC7B,6BAAoB;AAAA,cAAA,oBAAA;AAAA,YACrB;AAAA,UACC;AAAA,~~YAGFR~~,CAAA,EAAA,gBAAA,gBAAAV,EAAA,cAAA,EAAA,UAAAH,EAAAa,CAAA,EAAA,aAAA,CAAA;AAAA,QACC;QAIGf,MAAA,aAAA,gBAAAK,EAAA,MAAA,EAAA,WAAAG,EAAA,QAAA,eAAA,QAAA,UAAAN,EAAAa,CAAA,EAAA,UAAA,IAAA,~~CAAAS~~,MAAA,~~gBAAArB~~,EAAA,MAAA,EAAA,UAAA;AAAA,UAAC,gBAAAE;AAAA,YAAA;AAAA,YAAA;AAAA,cAEA,yBAAqB;AAAA,cAAa,OAAA,EAAA,~~YAAAmB~~,EAAA,MAAA;AAAA,YACnC;AAAA,UACC;AAAA,YALO;AAAA,QAQX,EAAA,GAAAA,EAAA,EAAA,CAAA,EAAA,CAAA;AAAA,MAAA;AAAA,IAEF;AAAA,EAEF;;"}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/visualizations/donut-chart/index.tsx"],"sourcesContent":["'use client'\n\nimport { useState } from 'react'\nimport { ResponsivePie } from '@nivo/pie'\nimport type { DonutChartData, DonutChartProps, DonutChartSize } from './types'\nimport { useResizeObserver } from '@usefy/use-resize-observer'\nimport classNames from 'classnames'\nimport { Tabs } from '../../tabs'\nimport {\n\trenderArcTooltip,\n\tuseRenderArcLabelComponent,\n\tuseRenderArcLinkLabelComponent,\n} from './components'\nimport { useTabsContext } from '../../tabs/use-tabs-context'\nimport s from './styles.module.css'\n\nconst getArcLinkLabelsSkipAngle = (count: number): number => {\n\tif (count > 4) {\n\t\treturn 24\n\t}\n\n\treturn 16\n}\n\nconst getMargins = (\n\tsize: DonutChartSize,\n): {\n\ttop?: number\n\tright?: number\n\tbottom?: number\n\tleft?: number\n} => {\n\tif (size === 'xsmall') {\n\t\treturn { top: 10, right: 0, bottom: 10, left: 0 }\n\t} else if (size === 'small') {\n\t\treturn { top: 10, right: 40, bottom: 20, left: 40 }\n\t} else {\n\t\treturn { top: 80, right: 210, bottom: 84, left: 210 }\n\t}\n}\n\nexport const DonutChart = ({ data }: DonutChartProps) =>\n\tdata.length > 1 ? (\n\t\t<Tabs.Provider size=\"large\">\n\t\t\t<Tabs.TabList>\n\t\t\t\t{data.map((group, i) => (\n\t\t\t\t\t<Tabs.Tab key={i} className={s.tab}>\n\t\t\t\t\t\t{group.groupName}\n\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t))}\n\t\t\t</Tabs.TabList>\n\t\t\t<DonutChartPanelWithTabCtx data={data} />\n\t\t</Tabs.Provider>\n\t) : (\n\t\t<DonutChartPanel data={data} />\n\t)\n\nDonutChart.displayName = 'DonutChart'\n\nconst DonutChartPanelWithTabCtx = ({ data }: { data: DonutChartData[] }) => {\n\tconst { selectedTabIndex, tabIds } = useTabsContext()\n\n\tconst tabId = tabIds[selectedTabIndex]\n\n\treturn (\n\t\t<DonutChartPanel tabId={tabId} data={data} groupIndex={selectedTabIndex} />\n\t)\n}\n\nexport interface DonutChartPanelProps {\n\ttabId?: string\n\tdata: DonutChartData[]\n\tgroupIndex?: number\n}\n\nconst DonutChartPanel = ({\n\ttabId,\n\tdata,\n\tgroupIndex = 0,\n}: DonutChartPanelProps) => {\n\tconst [size, setSize] = useState<DonutChartSize>('regular')\n\tconst { ref } = useResizeObserver<HTMLDivElement>({\n\t\tonResize: (entry) => {\n\t\t\tconst width = entry.contentRect?.width ?? 0\n\n\t\t\tif (width && width < 360) {\n\t\t\t\tsetSize('xsmall')\n\t\t\t} else if (width && width < 600) {\n\t\t\t\tsetSize('small')\n\t\t\t} else {\n\t\t\t\tsetSize('regular')\n\t\t\t}\n\t\t},\n\t})\n\n\treturn (\n\t\t<figure\n\t\t\tclassName={classNames(\n\t\t\t\ts['chart-container'],\n\t\t\t\tdata.length > 1 && s.multiple,\n\t\t\t)}\n\t\t\tid={data[groupIndex].groupId}\n\t\t\trole=\"tabpanel\"\n\t\t\ttabIndex={0}\n\t\t\taria-label={tabId ? undefined : data[groupIndex].groupName}\n\t\t\taria-labelledby={tabId \|\| undefined}\n\t\t>\n\t\t\t<div className={classNames(s.chart, s[size])} ref={ref}>\n\t\t\t\t<ResponsivePie\n\t\t\t\t\tdata={data[groupIndex].groupData}\n\t\t\t\t\tmargin={getMargins(size)}\n\t\t\t\t\tenableArcLabels={size !== 'regular'}\n\t\t\t\t\tenableArcLinkLabels={size === 'regular'}\n\t\t\t\t\tarcLabelsComponent={useRenderArcLabelComponent}\n\t\t\t\t\tarcLinkLabelComponent={useRenderArcLinkLabelComponent}\n\t\t\t\t\tarcLinkLabelsSkipAngle={getArcLinkLabelsSkipAngle(\n\t\t\t\t\t\tdata[groupIndex].groupData.length,\n\t\t\t\t\t)}\n\t\t\t\t\ttooltip={renderArcTooltip}\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tcolors={{ datum: 'data.color' }}\n\t\t\t\t\tinnerRadius={0.5}\n\t\t\t\t\tpadAngle={1}\n\t\t\t\t\tcornerRadius={8}\n\t\t\t\t\tactiveOuterRadiusOffset={4}\n\t\t\t\t\tarcLinkLabelsThickness={1}\n\t\t\t\t\tarcLinkLabelsOffset={4}\n\t\t\t\t\tarcLinkLabelsDiagonalLength={28}\n\t\t\t\t\tarcLinkLabelsStraightLength={24}\n\t\t\t\t\tarcLabelsSkipAngle={16}\n\t\t\t\t/>\n\t\t\t\t{data[groupIndex].groupCaption && (\n\t\t\t\t\t<figcaption>{data[groupIndex].groupCaption}</figcaption>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t{size !== 'regular' && (\n\t\t\t\t<ul className={s.legend} aria-hidden=\"true\">\n\t\t\t\t\t{data[groupIndex].groupData.map((record) => (\n\t\t\t\t\t\t<li key={record.id}>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclassName={s['legend-dot']}\n\t\t\t\t\t\t\t\tstyle={{ background: record.color }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{record.label}\n\t\t\t\t\t\t</li>\n\t\t\t\t\t))}\n\t\t\t\t</ul>\n\t\t\t)}\n\t\t</figure>\n\t)\n}\n"],"names":["getArcLinkLabelsSkipAngle","count","getMargins","size","DonutChart","data","jsxs","Tabs","jsx","group","i","s","DonutChartPanelWithTabCtx","DonutChartPanel","selectedTabIndex","useTabsContext","tabId","tabIds","groupIndex","setSize","ref","useResizeObserver","width","entry","classNames","ResponsivePie","useRenderArcLabelComponent","renderArcTooltip","record"],"mappings":"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"}

package/components/visualizations/donut-chart/styles.module.css CHANGED Viewed

@@ -14,9 +14,7 @@
 		z-index: -1;
 		inset: var(--mds-accent-border-width, 1px);
 		background-color: var(--mds-color-surface-primary);
-		border-radius: calc(
-			var(--mds-spacing-04) - var(--mds-accent-border-width, 1px)
-		);
+		border-radius: calc(var(--mds-spacing-04) - var(--mds-accent-border-width, 1px));
 	}
 }
@@ -46,7 +44,7 @@
 		padding: 0;
 		margin: -1px;
 		overflow: hidden;
-		clip: rect(0, 0, 0, 0);
+		clip-path: inset(50%);
 		white-space: nowrap;
 		border-width: 0;
 	}