@redsift/charts 12.6.6 → 13.0.1

package/_internal/LegendItem2.js.map

@@ -1 +1 @@
-{"version":3,"file":"LegendItem2.js","sources":["../../src/components/LegendItem/styles.ts","../../src/components/LegendItem/LegendItem.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledLegendItemProps } from './types';\nimport { LegendVariant } from '../../types';\nimport { Theme } from '@redsift/design-system';\n\n/**\n * Component style.\n */\nexport const StyledLegendItem = styled.li<StyledLegendItemProps>`\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: var(--redsift-typography-caption-font-size);\n\n  ${({ $theme }) => css`\n    color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});\n  `}\n\n  ${({ $variant, $color }) =>\n    $variant !== LegendVariant.custom\n      ? css`\n          > div {\n            height: 16px;\n            width: 16px;\n            min-width: 16px;\n            background-color: ${$color};\n          }\n        `\n      : ''}\n\n  ${({ $clickable }) =>\n    $clickable\n      ? css`\n          cursor: pointer;\n\n          &:hover,\n          &:focus {\n            outline: none;\n            > div {\n              opacity: 0.7;\n            }\n          }\n\n          &:focus-visible {\n            > div {\n              outline: 4px solid var(--redsift-color-primary-n);\n            }\n          }\n        `\n      : ''}\n`;\n","import React, { KeyboardEventHandler, forwardRef } from 'react';\nimport classNames from 'classnames';\n\nimport { Comp, Number, Text, useId, useTheme } from '@redsift/design-system';\n\nimport { LegendItemProps } from './types';\nimport { StyledLegendItem } from './styles';\nimport { monochrome } from '../../scheme';\nimport { LegendVariant } from '../../types';\n\nconst COMPONENT_NAME = 'LegendItem';\nconst CLASSNAME = 'redsift-legend-item';\n\nexport const LegendItem: Comp<LegendItemProps, HTMLLIElement> = forwardRef((props, ref) => {\n  const {\n    className,\n    color = monochrome,\n    data,\n    dataset,\n    id: propsId,\n    variant,\n    index = 0,\n    isSelected: propsIsSelected,\n    labelDecorator,\n    legendDecorator,\n    onClick,\n    role,\n    ...forwardedProps\n  } = props;\n\n  const theme = useTheme();\n\n  const [_id] = useId();\n  const id = propsId ?? _id;\n\n  const isLegendCustom = variant === LegendVariant.custom && legendDecorator;\n  const text = labelDecorator ? labelDecorator(data, { index, isSelected: propsIsSelected, color }) : data.data.key;\n  const isEmpty = data.data.value === 0;\n\n  const isSelectable = role === 'option';\n  const isSelected = isSelectable && propsIsSelected === true;\n  const isDeselected = isSelectable && propsIsSelected === false;\n\n  const onKeyDown: KeyboardEventHandler<HTMLLIElement> = (event) => {\n    if (onClick) {\n      event.stopPropagation();\n\n      if (event.code === 'Enter' || event.code === 'Space') {\n        event.preventDefault();\n        onClick(data, dataset);\n      }\n    }\n  };\n\n  return (\n    <StyledLegendItem\n      {...forwardedProps}\n      className={classNames(LegendItem.className, className, `_${index}`, {\n        selected: isSelected,\n        deselected: isDeselected,\n      })}\n      $color={isDeselected ? 'var(--redsift-color-neutral-light-grey)' : color}\n      ref={ref}\n      aria-labelledby={!isEmpty ? `${id}-title` : undefined}\n      aria-selected={isSelected ? true : isDeselected ? false : undefined}\n      id={id}\n      onClick={onClick ? () => onClick(data, dataset) : undefined}\n      onKeyDown={onClick ? (event: React.KeyboardEvent<HTMLLIElement>) => onKeyDown(event) : undefined}\n      role={role ? role : onClick ? 'button' : undefined}\n      tabIndex={onClick ? 0 : undefined}\n      $clickable={Boolean(onClick)}\n      $variant={variant}\n      $theme={theme}\n    >\n      {isLegendCustom ? (\n        legendDecorator(data, { index, isSelected: propsIsSelected, color: props.color })\n      ) : (\n        <>\n          <div />\n          {typeof text === 'string' ? (\n            variant === LegendVariant.value ? (\n              <>\n                <Number as=\"b\" maximumFractionDigits={2} value={data.data.value} variant=\"inherit\" />\n                <Text variant=\"caption\">{text}</Text>\n              </>\n            ) : variant === LegendVariant.percent && data.data.percent ? (\n              <>\n                <Number as=\"b\" maximumFractionDigits={2} type=\"percent\" value={data.data.percent} variant=\"inherit\" />\n                <Text variant=\"caption\">{text}</Text>\n              </>\n            ) : (\n              <Text variant=\"caption\">{text}</Text>\n            )\n          ) : (\n            <>{text}</>\n          )}\n        </>\n      )}\n    </StyledLegendItem>\n  );\n});\nLegendItem.className = CLASSNAME;\nLegendItem.displayName = COMPONENT_NAME;\n"],"names":["StyledLegendItem","styled","li","_ref","$theme","css","Theme","dark","_ref2","$variant","$color","LegendVariant","custom","_ref3","$clickable","COMPONENT_NAME","CLASSNAME","LegendItem","forwardRef","props","ref","className","color","monochrome","data","dataset","id","propsId","variant","index","isSelected","propsIsSelected","labelDecorator","legendDecorator","onClick","role","forwardedProps","_objectWithoutProperties","_excluded","theme","useTheme","_id","useId","isLegendCustom","text","key","isEmpty","value","isSelectable","isDeselected","onKeyDown","event","stopPropagation","code","preventDefault","React","createElement","_extends","classNames","selected","deselected","undefined","tabIndex","Boolean","Fragment","Number","as","maximumFractionDigits","Text","percent","type","displayName"],"mappings":";;;;;;;;AAKA;AACA;AACA;AACaA,MAAAA,gBAAgB,GAAGC,MAAM,CAACC,EAA0B,CAAA;AACjE;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAD,IAAA,CAAA;AAAA,EAAA,OAAKE,GAAI,CAAA;AACxB,uCAAyCD,EAAAA,MAAM,KAAKE,KAAK,CAACC,IAAI,GAAG,OAAO,GAAG,aAAc,CAAA;AACzF,EAAG,CAAA,CAAA;AAAA,CAAC,CAAA;AACJ;AACA,EAAA,EAAIC,KAAA,IAAA;EAAA,IAAC;IAAEC,QAAQ;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAF,KAAA,CAAA;AAAA,EAAA,OACrBC,QAAQ,KAAKE,aAAa,CAACC,MAAM,GAC7BP,GAAI,CAAA;AACZ;AACA;AACA;AACA;AACA,8BAAA,EAAgCK,MAAO,CAAA;AACvC;AACA,QAAA,CAAS,GACD,EAAE,CAAA;AAAA,CAAC,CAAA;AACX;AACA,EAAA,EAAIG,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAAD,KAAA,CAAA;EAAA,OACfC,UAAU,GACNT,GAAI,CAAA;AACZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAA,CAAS,GACD,EAAE,CAAA;AAAA,CAAC,CAAA;AACX;;;ACxCA,MAAMU,cAAc,GAAG,YAAY,CAAA;AACnC,MAAMC,SAAS,GAAG,qBAAqB,CAAA;AAEhC,MAAMC,UAAgD,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACzF,MAAM;MACJC,SAAS;AACTC,MAAAA,KAAK,GAAGC,UAAU;MAClBC,IAAI;MACJC,OAAO;AACPC,MAAAA,EAAE,EAAEC,OAAO;MACXC,OAAO;AACPC,MAAAA,KAAK,GAAG,CAAC;AACTC,MAAAA,UAAU,EAAEC,eAAe;MAC3BC,cAAc;MACdC,eAAe;MACfC,OAAO;AACPC,MAAAA,IAAAA;AAEF,KAAC,GAAGhB,KAAK;AADJiB,IAAAA,cAAc,GAAAC,wBAAA,CACflB,KAAK,EAAAmB,SAAA,CAAA,CAAA;AAET,EAAA,MAAMC,KAAK,GAAGC,QAAQ,EAAE,CAAA;AAExB,EAAA,MAAM,CAACC,GAAG,CAAC,GAAGC,KAAK,EAAE,CAAA;EACrB,MAAMhB,EAAE,GAAGC,OAAO,KAAA,IAAA,IAAPA,OAAO,KAAPA,KAAAA,CAAAA,GAAAA,OAAO,GAAIc,GAAG,CAAA;EAEzB,MAAME,cAAc,GAAGf,OAAO,KAAKjB,aAAa,CAACC,MAAM,IAAIqB,eAAe,CAAA;AAC1E,EAAA,MAAMW,IAAI,GAAGZ,cAAc,GAAGA,cAAc,CAACR,IAAI,EAAE;IAAEK,KAAK;AAAEC,IAAAA,UAAU,EAAEC,eAAe;AAAET,IAAAA,KAAAA;AAAM,GAAC,CAAC,GAAGE,IAAI,CAACA,IAAI,CAACqB,GAAG,CAAA;EACjH,MAAMC,OAAO,GAAGtB,IAAI,CAACA,IAAI,CAACuB,KAAK,KAAK,CAAC,CAAA;AAErC,EAAA,MAAMC,YAAY,GAAGb,IAAI,KAAK,QAAQ,CAAA;AACtC,EAAA,MAAML,UAAU,GAAGkB,YAAY,IAAIjB,eAAe,KAAK,IAAI,CAAA;AAC3D,EAAA,MAAMkB,YAAY,GAAGD,YAAY,IAAIjB,eAAe,KAAK,KAAK,CAAA;EAE9D,MAAMmB,SAA8C,GAAIC,KAAK,IAAK;AAChE,IAAA,IAAIjB,OAAO,EAAE;MACXiB,KAAK,CAACC,eAAe,EAAE,CAAA;MAEvB,IAAID,KAAK,CAACE,IAAI,KAAK,OAAO,IAAIF,KAAK,CAACE,IAAI,KAAK,OAAO,EAAE;QACpDF,KAAK,CAACG,cAAc,EAAE,CAAA;AACtBpB,QAAAA,OAAO,CAACV,IAAI,EAAEC,OAAO,CAAC,CAAA;AACxB,OAAA;AACF,KAAA;GACD,CAAA;EAED,oBACE8B,cAAA,CAAAC,aAAA,CAACxD,gBAAgB,EAAAyD,QAAA,KACXrB,cAAc,EAAA;AAClBf,IAAAA,SAAS,EAAEqC,UAAU,CAACzC,UAAU,CAACI,SAAS,EAAEA,SAAS,EAAG,CAAA,CAAA,EAAGQ,KAAM,CAAA,CAAC,EAAE;AAClE8B,MAAAA,QAAQ,EAAE7B,UAAU;AACpB8B,MAAAA,UAAU,EAAEX,YAAAA;AACd,KAAC,CAAE;AACHvC,IAAAA,MAAM,EAAEuC,YAAY,GAAG,yCAAyC,GAAG3B,KAAM;AACzEF,IAAAA,GAAG,EAAEA,GAAI;AACT,IAAA,iBAAA,EAAiB,CAAC0B,OAAO,GAAI,GAAEpB,EAAG,CAAA,MAAA,CAAO,GAAGmC,SAAU;IACtD,eAAe/B,EAAAA,UAAU,GAAG,IAAI,GAAGmB,YAAY,GAAG,KAAK,GAAGY,SAAU;AACpEnC,IAAAA,EAAE,EAAEA,EAAG;IACPQ,OAAO,EAAEA,OAAO,GAAG,MAAMA,OAAO,CAACV,IAAI,EAAEC,OAAO,CAAC,GAAGoC,SAAU;IAC5DX,SAAS,EAAEhB,OAAO,GAAIiB,KAAyC,IAAKD,SAAS,CAACC,KAAK,CAAC,GAAGU,SAAU;IACjG1B,IAAI,EAAEA,IAAI,GAAGA,IAAI,GAAGD,OAAO,GAAG,QAAQ,GAAG2B,SAAU;AACnDC,IAAAA,QAAQ,EAAE5B,OAAO,GAAG,CAAC,GAAG2B,SAAU;AAClC/C,IAAAA,UAAU,EAAEiD,OAAO,CAAC7B,OAAO,CAAE;AAC7BzB,IAAAA,QAAQ,EAAEmB,OAAQ;AAClBxB,IAAAA,MAAM,EAAEmC,KAAAA;AAAM,GAAA,CAAA,EAEbI,cAAc,GACbV,eAAe,CAACT,IAAI,EAAE;IAAEK,KAAK;AAAEC,IAAAA,UAAU,EAAEC,eAAe;IAAET,KAAK,EAAEH,KAAK,CAACG,KAAAA;AAAM,GAAC,CAAC,gBAEjFiC,cAAA,CAAAC,aAAA,CAAAD,cAAA,CAAAS,QAAA,EAAA,IAAA,eACET,cAAA,CAAAC,aAAA,YAAM,CAAC,EACN,OAAOZ,IAAI,KAAK,QAAQ,GACvBhB,OAAO,KAAKjB,aAAa,CAACoC,KAAK,gBAC7BQ,cAAA,CAAAC,aAAA,CAAAD,cAAA,CAAAS,QAAA,EAAA,IAAA,eACET,cAAA,CAAAC,aAAA,CAACS,MAAM,EAAA;AAACC,IAAAA,EAAE,EAAC,GAAG;AAACC,IAAAA,qBAAqB,EAAE,CAAE;AAACpB,IAAAA,KAAK,EAAEvB,IAAI,CAACA,IAAI,CAACuB,KAAM;AAACnB,IAAAA,OAAO,EAAC,SAAA;AAAS,GAAE,CAAC,eACrF2B,cAAA,CAAAC,aAAA,CAACY,IAAI,EAAA;AAACxC,IAAAA,OAAO,EAAC,SAAA;AAAS,GAAA,EAAEgB,IAAW,CACpC,CAAC,GACDhB,OAAO,KAAKjB,aAAa,CAAC0D,OAAO,IAAI7C,IAAI,CAACA,IAAI,CAAC6C,OAAO,gBACxDd,cAAA,CAAAC,aAAA,CAAAD,cAAA,CAAAS,QAAA,EAAA,IAAA,eACET,cAAA,CAAAC,aAAA,CAACS,MAAM,EAAA;AAACC,IAAAA,EAAE,EAAC,GAAG;AAACC,IAAAA,qBAAqB,EAAE,CAAE;AAACG,IAAAA,IAAI,EAAC,SAAS;AAACvB,IAAAA,KAAK,EAAEvB,IAAI,CAACA,IAAI,CAAC6C,OAAQ;AAACzC,IAAAA,OAAO,EAAC,SAAA;AAAS,GAAE,CAAC,eACtG2B,cAAA,CAAAC,aAAA,CAACY,IAAI,EAAA;AAACxC,IAAAA,OAAO,EAAC,SAAA;GAAWgB,EAAAA,IAAW,CACpC,CAAC,gBAEHW,cAAA,CAAAC,aAAA,CAACY,IAAI,EAAA;AAACxC,IAAAA,OAAO,EAAC,SAAA;AAAS,GAAA,EAAEgB,IAAW,CACrC,gBAEDW,cAAA,CAAAC,aAAA,CAAAD,cAAA,CAAAS,QAAA,EAAA,IAAA,EAAGpB,IAAO,CAEZ,CAEY,CAAC,CAAA;AAEvB,CAAC,EAAC;AACF3B,UAAU,CAACI,SAAS,GAAGL,SAAS,CAAA;AAChCC,UAAU,CAACsD,WAAW,GAAGxD,cAAc;;;;"}
+{"version":3,"file":"LegendItem2.js","sources":["../../src/components/LegendItem/styles.ts","../../src/components/LegendItem/LegendItem.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledLegendItemProps } from './types';\nimport { LegendVariant } from '../../types';\nimport { Theme } from '@redsift/design-system';\n\n/**\n * Component style.\n */\nexport const StyledLegendItem = styled.li<StyledLegendItemProps>`\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: var(--redsift-typography-caption-font-size);\n\n  ${({ $theme }) => css`\n    color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});\n  `}\n\n  ${({ $variant, $color }) =>\n    $variant !== LegendVariant.custom\n      ? css`\n          > div {\n            height: 16px;\n            width: 16px;\n            min-width: 16px;\n            background-color: ${$color};\n          }\n        `\n      : ''}\n\n  ${({ $clickable }) =>\n    $clickable\n      ? css`\n          cursor: pointer;\n\n          &:hover,\n          &:focus {\n            outline: none;\n            > div {\n              opacity: 0.7;\n            }\n          }\n\n          &:focus-visible {\n            > div {\n              outline: 4px solid var(--redsift-color-primary-n);\n            }\n          }\n        `\n      : ''}\n`;\n","import React, { KeyboardEventHandler, forwardRef } from 'react';\nimport classNames from 'classnames';\n\nimport { Comp, Number, Text, useId, useTheme } from '@redsift/design-system';\n\nimport { LegendItemProps } from './types';\nimport { StyledLegendItem } from './styles';\nimport { monochrome } from '../../scheme';\nimport { LegendVariant } from '../../types';\n\nconst COMPONENT_NAME = 'LegendItem';\nconst CLASSNAME = 'redsift-legend-item';\n\nexport const LegendItem: Comp<LegendItemProps, HTMLLIElement> = forwardRef((props, ref) => {\n  const {\n    className,\n    color = monochrome,\n    data,\n    dataset,\n    id: propsId,\n    variant,\n    index = 0,\n    isSelected: propsIsSelected,\n    labelDecorator,\n    legendDecorator,\n    onClick,\n    role,\n    ...forwardedProps\n  } = props;\n\n  const theme = useTheme();\n\n  const [_id] = useId();\n  const id = propsId ?? _id;\n\n  const isLegendCustom = variant === LegendVariant.custom && legendDecorator;\n  const text = labelDecorator ? labelDecorator(data, { index, isSelected: propsIsSelected, color }) : data.data.key;\n  const isEmpty = data.data.value === 0;\n\n  const isSelectable = role === 'option';\n  const isSelected = isSelectable && propsIsSelected === true;\n  const isDeselected = isSelectable && propsIsSelected === false;\n\n  const onKeyDown: KeyboardEventHandler<HTMLLIElement> = (event) => {\n    if (onClick) {\n      event.stopPropagation();\n\n      if (event.code === 'Enter' || event.code === 'Space') {\n        event.preventDefault();\n        onClick(data, dataset);\n      }\n    }\n  };\n\n  return (\n    <StyledLegendItem\n      {...forwardedProps}\n      className={classNames(LegendItem.className, className, `_${index}`, {\n        selected: isSelected,\n        deselected: isDeselected,\n      })}\n      $color={isDeselected ? 'var(--redsift-color-neutral-light-grey)' : color}\n      ref={ref}\n      aria-labelledby={!isEmpty ? `${id}-title` : undefined}\n      aria-selected={isSelected ? true : isDeselected ? false : undefined}\n      id={id}\n      onClick={onClick ? () => onClick(data, dataset) : undefined}\n      onKeyDown={onClick ? (event: React.KeyboardEvent<HTMLLIElement>) => onKeyDown(event) : undefined}\n      role={role ? role : onClick ? 'button' : undefined}\n      tabIndex={onClick ? 0 : undefined}\n      $clickable={Boolean(onClick)}\n      $variant={variant}\n      $theme={theme}\n    >\n      {isLegendCustom ? (\n        legendDecorator(data, { index, isSelected: propsIsSelected, color: props.color })\n      ) : (\n        <>\n          <div />\n          {typeof text === 'string' ? (\n            variant === LegendVariant.value ? (\n              <>\n                <Number as=\"b\" maximumFractionDigits={2} value={data.data.value} variant=\"inherit\" />\n                <Text variant=\"caption\">{text}</Text>\n              </>\n            ) : variant === LegendVariant.percent && data.data.percent ? (\n              <>\n                <Number as=\"b\" maximumFractionDigits={2} type=\"percent\" value={data.data.percent} variant=\"inherit\" />\n                <Text variant=\"caption\">{text}</Text>\n              </>\n            ) : (\n              <Text variant=\"caption\">{text}</Text>\n            )\n          ) : (\n            <>{text}</>\n          )}\n        </>\n      )}\n    </StyledLegendItem>\n  );\n});\nLegendItem.className = CLASSNAME;\nLegendItem.displayName = COMPONENT_NAME;\n"],"names":["StyledLegendItem","styled","li","_ref","$theme","css","Theme","dark","_ref2","$variant","$color","LegendVariant","custom","_ref3","$clickable","COMPONENT_NAME","CLASSNAME","LegendItem","forwardRef","props","ref","className","color","monochrome","data","dataset","id","propsId","variant","index","isSelected","propsIsSelected","labelDecorator","legendDecorator","onClick","role","forwardedProps","_objectWithoutProperties","_excluded","theme","useTheme","_id","useId","isLegendCustom","text","key","isEmpty","value","isSelectable","isDeselected","onKeyDown","event","stopPropagation","code","preventDefault","React","createElement","_extends","classNames","selected","deselected","undefined","tabIndex","Boolean","Fragment","Number","as","maximumFractionDigits","Text","percent","type","displayName"],"mappings":"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"}

package/_internal/Line2.js

@@ -1,7 +1,7 @@
 import { _ as _objectWithoutProperties, b as _objectSpread2, a as _extends } from './_rollupPluginBabelHelpers.js';
-import React__default, { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import classNames from 'classnames';
-import { J, i as it } from '../index2.js';
+import { useSpring, animated } from '@react-spring/web';
 import { interpolate } from 'd3';
 import styled from 'styled-components';
 import { m as monochrome } from './scheme.js';
@@ -32,7 +32,7 @@ const Line = /*#__PURE__*/forwardRef((props, ref) => {
   const interpolator = interpolate(previousData, data);
   const isSelectable = role === 'option';
   const isDeselected = isSelectable && propsIsSelected === false;
-  const animatedProps = J(_objectSpread2(_objectSpread2({}, config), {}, {
+  const animatedProps = useSpring(_objectSpread2(_objectSpread2({}, config), {}, {
     to: async next => {
       await next({
         t: 1
@@ -42,10 +42,10 @@ const Line = /*#__PURE__*/forwardRef((props, ref) => {
       t: 0
     }
   }));
-  return /*#__PURE__*/React__default.createElement(StyledLine, _extends({}, forwardedProps, {
+  return /*#__PURE__*/React.createElement(StyledLine, _extends({}, forwardedProps, {
     ref: ref,
     className: classNames(Line.className, className)
-  }), /*#__PURE__*/React__default.createElement(it.path, {
+  }), /*#__PURE__*/React.createElement(animated.path, {
     d: config.immediate || disableAnimations ? createLine(data) : animatedProps.t.to(t => createLine(interpolator(t))),
     fill: "none",
     stroke: isDeselected ? 'var(--redsift-color-neutral-light-grey)' : color,

package/_internal/Line2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Line2.js","sources":["../../src/components/Line/styles.ts","../../src/components/Line/Line.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { StyledLineProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledLine = styled('g')<StyledLineProps>``;\n","import React, { forwardRef } from 'react';\nimport classNames from 'classnames';\nimport { animated, useSpring } from '@react-spring/web';\nimport { interpolate as d3interpolate } from 'd3';\n\nimport { Comp } from '@redsift/design-system';\n\nimport { LineProps } from './types';\nimport { StyledLine } from './styles';\nimport { monochrome } from '../../scheme';\nimport { config } from '../../config';\n\nconst COMPONENT_NAME = 'Line';\nconst CLASSNAME = 'redsift-line';\n\nexport const Line: Comp<LineProps, SVGGElement> = forwardRef((props, ref) => {\n  const { color = monochrome, data, isSelected: propsIsSelected, role } = props;\n\n  const { className, createLine, disableAnimations, previousData = [], ...forwardedProps } = props;\n\n  const interpolator = d3interpolate(previousData, data);\n\n  const isSelectable = role === 'option';\n  const isDeselected = isSelectable && propsIsSelected === false;\n\n  const animatedProps = useSpring({\n    ...config,\n    to: async (next: (props?: object) => Promise<void>) => {\n      await next({ t: 1 });\n    },\n    from: { t: 0 },\n  });\n\n  return (\n    <StyledLine {...forwardedProps} ref={ref} className={classNames(Line.className, className)}>\n      <animated.path\n        d={\n          config.immediate || disableAnimations\n            ? (createLine(data) as unknown as string)\n            : (animatedProps.t.to((t) => createLine(interpolator(t))) as unknown as string)\n        }\n        fill=\"none\"\n        stroke={isDeselected ? 'var(--redsift-color-neutral-light-grey)' : color}\n        strokeWidth={2}\n      />\n    </StyledLine>\n  );\n});\nLine.className = CLASSNAME;\nLine.displayName = COMPONENT_NAME;\n"],"names":["StyledLine","styled","COMPONENT_NAME","CLASSNAME","Line","forwardRef","props","ref","color","monochrome","data","isSelected","propsIsSelected","role","className","createLine","disableAnimations","previousData","forwardedProps","_objectWithoutProperties","_excluded","interpolator","d3interpolate","isSelectable","isDeselected","animatedProps","useSpring","_objectSpread","config","to","next","t","from","React","createElement","_extends","classNames","animated","path","d","immediate","fill","stroke","strokeWidth","displayName"],"mappings":";;;;;;;;;AAGA;AACA;AACA;MACaA,UAAU,GAAGC,MAAM,CAAC,GAAG,CAAmB,CAAC;;;ACMxD,MAAMC,cAAc,GAAG,MAAM,CAAA;AAC7B,MAAMC,SAAS,GAAG,cAAc,CAAA;AAEzB,MAAMC,IAAkC,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC3E,MAAM;AAAEC,IAAAA,KAAK,GAAGC,UAAU;IAAEC,IAAI;AAAEC,IAAAA,UAAU,EAAEC,eAAe;AAAEC,IAAAA,IAAAA;AAAK,GAAC,GAAGP,KAAK,CAAA;EAE7E,MAAM;MAAEQ,SAAS;MAAEC,UAAU;MAAEC,iBAAiB;AAAEC,MAAAA,YAAY,GAAG,EAAA;AAAsB,KAAC,GAAGX,KAAK;AAAxBY,IAAAA,cAAc,GAAAC,wBAAA,CAAKb,KAAK,EAAAc,SAAA,CAAA,CAAA;AAEhG,EAAA,MAAMC,YAAY,GAAGC,WAAa,CAACL,YAAY,EAAEP,IAAI,CAAC,CAAA;AAEtD,EAAA,MAAMa,YAAY,GAAGV,IAAI,KAAK,QAAQ,CAAA;AACtC,EAAA,MAAMW,YAAY,GAAGD,YAAY,IAAIX,eAAe,KAAK,KAAK,CAAA;EAE9D,MAAMa,aAAa,GAAGC,CAAS,CAAAC,cAAA,CAAAA,cAAA,KAC1BC,MAAM,CAAA,EAAA,EAAA,EAAA;IACTC,EAAE,EAAE,MAAOC,IAAuC,IAAK;AACrD,MAAA,MAAMA,IAAI,CAAC;AAAEC,QAAAA,CAAC,EAAE,CAAA;AAAE,OAAC,CAAC,CAAA;KACrB;AACDC,IAAAA,IAAI,EAAE;AAAED,MAAAA,CAAC,EAAE,CAAA;AAAE,KAAA;AAAC,GAAA,CACf,CAAC,CAAA;EAEF,oBACEE,cAAA,CAAAC,aAAA,CAAClC,UAAU,EAAAmC,QAAA,KAAKjB,cAAc,EAAA;AAAEX,IAAAA,GAAG,EAAEA,GAAI;AAACO,IAAAA,SAAS,EAAEsB,UAAU,CAAChC,IAAI,CAACU,SAAS,EAAEA,SAAS,CAAA;AAAE,GAAA,CAAA,eACzFmB,cAAA,CAAAC,aAAA,CAACG,EAAQ,CAACC,IAAI,EAAA;IACZC,CAAC,EACCX,MAAM,CAACY,SAAS,IAAIxB,iBAAiB,GAChCD,UAAU,CAACL,IAAI,CAAC,GAChBe,aAAa,CAACM,CAAC,CAACF,EAAE,CAAEE,CAAC,IAAKhB,UAAU,CAACM,YAAY,CAACU,CAAC,CAAC,CAAC,CAC3D;AACDU,IAAAA,IAAI,EAAC,MAAM;AACXC,IAAAA,MAAM,EAAElB,YAAY,GAAG,yCAAyC,GAAGhB,KAAM;AACzEmC,IAAAA,WAAW,EAAE,CAAA;AAAE,GAChB,CACS,CAAC,CAAA;AAEjB,CAAC,EAAC;AACFvC,IAAI,CAACU,SAAS,GAAGX,SAAS,CAAA;AAC1BC,IAAI,CAACwC,WAAW,GAAG1C,cAAc;;;;"}
+{"version":3,"file":"Line2.js","sources":["../../src/components/Line/styles.ts","../../src/components/Line/Line.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { StyledLineProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledLine = styled('g')<StyledLineProps>``;\n","import React, { forwardRef } from 'react';\nimport classNames from 'classnames';\nimport { animated, useSpring } from '@react-spring/web';\nimport { interpolate as d3interpolate } from 'd3';\n\nimport { Comp } from '@redsift/design-system';\n\nimport { LineProps } from './types';\nimport { StyledLine } from './styles';\nimport { monochrome } from '../../scheme';\nimport { config } from '../../config';\n\nconst COMPONENT_NAME = 'Line';\nconst CLASSNAME = 'redsift-line';\n\nexport const Line: Comp<LineProps, SVGGElement> = forwardRef((props, ref) => {\n  const { color = monochrome, data, isSelected: propsIsSelected, role } = props;\n\n  const { className, createLine, disableAnimations, previousData = [], ...forwardedProps } = props;\n\n  const interpolator = d3interpolate(previousData, data);\n\n  const isSelectable = role === 'option';\n  const isDeselected = isSelectable && propsIsSelected === false;\n\n  const animatedProps = useSpring({\n    ...config,\n    to: async (next: (props?: object) => Promise<void>) => {\n      await next({ t: 1 });\n    },\n    from: { t: 0 },\n  });\n\n  return (\n    <StyledLine {...forwardedProps} ref={ref} className={classNames(Line.className, className)}>\n      <animated.path\n        d={\n          config.immediate || disableAnimations\n            ? (createLine(data) as unknown as string)\n            : (animatedProps.t.to((t) => createLine(interpolator(t))) as unknown as string)\n        }\n        fill=\"none\"\n        stroke={isDeselected ? 'var(--redsift-color-neutral-light-grey)' : color}\n        strokeWidth={2}\n      />\n    </StyledLine>\n  );\n});\nLine.className = CLASSNAME;\nLine.displayName = COMPONENT_NAME;\n"],"names":["StyledLine","styled","COMPONENT_NAME","CLASSNAME","Line","forwardRef","props","ref","color","monochrome","data","isSelected","propsIsSelected","role","className","createLine","disableAnimations","previousData","forwardedProps","_objectWithoutProperties","_excluded","interpolator","d3interpolate","isSelectable","isDeselected","animatedProps","useSpring","_objectSpread","config","to","next","t","from","React","createElement","_extends","classNames","animated","path","d","immediate","fill","stroke","strokeWidth","displayName"],"mappings":";;;;;;;;;AAGA;AACA;AACA;MACaA,UAAU,GAAGC,MAAM,CAAC,GAAG,CAAmB,CAAC;;;ACMxD,MAAMC,cAAc,GAAG,MAAM,CAAA;AAC7B,MAAMC,SAAS,GAAG,cAAc,CAAA;AAEzB,MAAMC,IAAkC,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC3E,MAAM;AAAEC,IAAAA,KAAK,GAAGC,UAAU;IAAEC,IAAI;AAAEC,IAAAA,UAAU,EAAEC,eAAe;AAAEC,IAAAA,IAAAA;AAAK,GAAC,GAAGP,KAAK,CAAA;EAE7E,MAAM;MAAEQ,SAAS;MAAEC,UAAU;MAAEC,iBAAiB;AAAEC,MAAAA,YAAY,GAAG,EAAA;AAAsB,KAAC,GAAGX,KAAK;AAAxBY,IAAAA,cAAc,GAAAC,wBAAA,CAAKb,KAAK,EAAAc,SAAA,CAAA,CAAA;AAEhG,EAAA,MAAMC,YAAY,GAAGC,WAAa,CAACL,YAAY,EAAEP,IAAI,CAAC,CAAA;AAEtD,EAAA,MAAMa,YAAY,GAAGV,IAAI,KAAK,QAAQ,CAAA;AACtC,EAAA,MAAMW,YAAY,GAAGD,YAAY,IAAIX,eAAe,KAAK,KAAK,CAAA;EAE9D,MAAMa,aAAa,GAAGC,SAAS,CAAAC,cAAA,CAAAA,cAAA,KAC1BC,MAAM,CAAA,EAAA,EAAA,EAAA;IACTC,EAAE,EAAE,MAAOC,IAAuC,IAAK;AACrD,MAAA,MAAMA,IAAI,CAAC;AAAEC,QAAAA,CAAC,EAAE,CAAA;AAAE,OAAC,CAAC,CAAA;KACrB;AACDC,IAAAA,IAAI,EAAE;AAAED,MAAAA,CAAC,EAAE,CAAA;AAAE,KAAA;AAAC,GAAA,CACf,CAAC,CAAA;EAEF,oBACEE,KAAA,CAAAC,aAAA,CAAClC,UAAU,EAAAmC,QAAA,KAAKjB,cAAc,EAAA;AAAEX,IAAAA,GAAG,EAAEA,GAAI;AAACO,IAAAA,SAAS,EAAEsB,UAAU,CAAChC,IAAI,CAACU,SAAS,EAAEA,SAAS,CAAA;AAAE,GAAA,CAAA,eACzFmB,KAAA,CAAAC,aAAA,CAACG,QAAQ,CAACC,IAAI,EAAA;IACZC,CAAC,EACCX,MAAM,CAACY,SAAS,IAAIxB,iBAAiB,GAChCD,UAAU,CAACL,IAAI,CAAC,GAChBe,aAAa,CAACM,CAAC,CAACF,EAAE,CAAEE,CAAC,IAAKhB,UAAU,CAACM,YAAY,CAACU,CAAC,CAAC,CAAC,CAC3D;AACDU,IAAAA,IAAI,EAAC,MAAM;AACXC,IAAAA,MAAM,EAAElB,YAAY,GAAG,yCAAyC,GAAGhB,KAAM;AACzEmC,IAAAA,WAAW,EAAE,CAAA;AAAE,GAChB,CACS,CAAC,CAAA;AAEjB,CAAC,EAAC;AACFvC,IAAI,CAACU,SAAS,GAAGX,SAAS,CAAA;AAC1BC,IAAI,CAACwC,WAAW,GAAG1C,cAAc;;;;"}

package/_internal/LineChart2.js

@@ -1,5 +1,5 @@
 import { _ as _objectWithoutProperties, a as _extends, b as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
-import React__default, { forwardRef, useRef, useEffect } from 'react';
+import React, { forwardRef, useRef, useEffect } from 'react';
 import classNames from 'classnames';
 import { useTheme, useMessageFormatter, Flexbox, useId } from '@redsift/design-system';
 import styled from 'styled-components';
@@ -81,7 +81,7 @@ const LoadingLineChart = /*#__PURE__*/forwardRef((props, ref) => {
       className
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$3);
-  return /*#__PURE__*/React__default.createElement(StyledLineChart, _extends({}, forwardedProps, {
+  return /*#__PURE__*/React.createElement(StyledLineChart, _extends({}, forwardedProps, {
     className: className,
     ref: ref
   }), "Loading...");
@@ -149,18 +149,19 @@ const statsBy = (arr, sortingMethod) => {
   })).sort(getSortingMethod(sortingMethod));
 };
 
-const _excluded$2 = ["className", "data", "emptyComponent", "localeText", "size"];
+const _excluded$2 = ["className", "data", "emptyComponent", "localeText", "size", "svgRef"];
 const EmptyLineChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       className,
       data: propsData,
       emptyComponent,
       localeText,
-      size
+      size,
+      svgRef
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$2);
   const theme = useTheme();
-  const cache = useRef();
+  const cache = useRef(undefined);
   const data = propsData;
   useEffect(() => {
     cache.current = data;
@@ -175,19 +176,20 @@ const EmptyLineChart = /*#__PURE__*/forwardRef((props, ref) => {
     bottom: 48
   };
   const chartWidth = width - margins.left - margins.right;
-  return /*#__PURE__*/React__default.createElement(StyledLineChart, _extends({}, forwardedProps, {
+  return /*#__PURE__*/React.createElement(StyledLineChart, _extends({}, forwardedProps, {
     className: className,
     ref: ref
-  }), emptyComponent !== null && emptyComponent !== void 0 ? emptyComponent : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledLineChartEmptyText, {
+  }), emptyComponent !== null && emptyComponent !== void 0 ? emptyComponent : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledLineChartEmptyText, {
     $maxWidth: width,
     $textSize: chartDimensions.fontSize / 2,
     $theme: theme
-  }, /*#__PURE__*/React__default.createElement("span", null, localeText === null || localeText === void 0 ? void 0 : localeText.emptyChartText)), /*#__PURE__*/React__default.createElement("svg", {
+  }, /*#__PURE__*/React.createElement("span", null, localeText === null || localeText === void 0 ? void 0 : localeText.emptyChartText)), /*#__PURE__*/React.createElement("svg", {
+    ref: svgRef,
     width: width,
     height: height
-  }, /*#__PURE__*/React__default.createElement("g", {
+  }, /*#__PURE__*/React.createElement("g", {
     transform: `translate(${margins.left},${margins.top})`
-  }, /*#__PURE__*/React__default.createElement(Axis, {
+  }, /*#__PURE__*/React.createElement(Axis, {
     position: "bottom",
     length: width - 32,
     scale: scaleLinear().domain([]).range([0, chartWidth]),
@@ -232,7 +234,7 @@ var intlMessages = {
   'fr-FR': frFR
 };
 
-const _excluded$1 = ["className", "data", "dotRole", "disableAnimations", "getDotAnchorProps", "id", "isDotSelected", "labelDecorator", "legendDecorator", "legendVariant", "legendProps", "margins", "onDotClick", "size", "sortingMethod", "colorTheme", "tooltipDecorator", "tooltipVariant", "xAxisVariant", "xAxisPlacement", "xAxisTickFormat", "xAxisTickPadding", "xAxisTickRotation", "xAxisTickSize", "xAxisTickValues", "xAxisMinValue", "xAxisMaxValue", "xAxisTickRemodelling", "yAxisVariant", "yAxisPlacement", "yAxisTickFormat", "yAxisTickPadding", "yAxisTickRotation", "yAxisTickSize", "yAxisTickValues", "yAxisMinValue", "yAxisMaxValue", "yAxisTickRemodelling", "dateParser"],
+const _excluded$1 = ["className", "data", "dotRole", "disableAnimations", "getDotAnchorProps", "id", "isDotSelected", "labelDecorator", "legendDecorator", "legendVariant", "legendProps", "margins", "onDotClick", "size", "sortingMethod", "svgRef", "colorTheme", "tooltipDecorator", "tooltipVariant", "xAxisVariant", "xAxisPlacement", "xAxisTickFormat", "xAxisTickPadding", "xAxisTickRotation", "xAxisTickSize", "xAxisTickValues", "xAxisMinValue", "xAxisMaxValue", "xAxisTickRemodelling", "yAxisVariant", "yAxisPlacement", "yAxisTickFormat", "yAxisTickPadding", "yAxisTickRotation", "yAxisTickSize", "yAxisTickValues", "yAxisMinValue", "yAxisMaxValue", "yAxisTickRemodelling", "dateParser"],
   _excluded2 = ["extraLegendItems"];
 const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
@@ -251,6 +253,7 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
       onDotClick,
       size,
       sortingMethod,
+      svgRef,
       colorTheme,
       tooltipDecorator,
       tooltipVariant,
@@ -277,7 +280,7 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
       dateParser
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$1);
-  const cache = useRef();
+  const cache = useRef(undefined);
   const theme = useTheme();
   const format = useMessageFormatter(intlMessages);
   const xScaleType = propsData[0].key[0] instanceof Date ? 'Date' : typeof propsData[0].key[0] === 'number' ? 'number' : typeof propsData[0].key[0] === 'string' && isValidDate(propsData[0].key[0]) ? 'dateString' : typeof propsData[0].key[0] === 'string' ? 'string' : undefined;
@@ -285,7 +288,6 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
   useEffect(() => {
     cache.current = data;
   });
-  const svgRef = useRef();
   const chartDimensions = sizeToDimension(size);
   const width = chartDimensions.width;
   const height = chartDimensions.height;
@@ -407,7 +409,7 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
       extraLegendItems
     } = _ref11,
     forwardedLegendProps = _objectWithoutProperties(_ref11, _excluded2);
-  return /*#__PURE__*/React__default.createElement(StyledLineChart, _extends({
+  return /*#__PURE__*/React.createElement(StyledLineChart, _extends({
     mode: typeof onDotClick === 'function' || typeof getDotAnchorProps === 'function' ? 'interactive' : 'static',
     definition: hasCategory ? format('definition-linear-with-categories', {
       categoryLength: categories.length,
@@ -428,55 +430,54 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
       end: scaleY.domain()[1]
     }),
     dataTableRepresentation: hasCategory ? {
-      header: /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("th", {
+      header: /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
         scope: "col"
-      }, xScaleType === 'Date' || xScaleType === 'dateString' ? 'Date' : 'Key'), categories.map(category => /*#__PURE__*/React__default.createElement("th", {
+      }, xScaleType === 'Date' || xScaleType === 'dateString' ? 'Date' : 'Key'), categories.map(category => /*#__PURE__*/React.createElement("th", {
         key: category,
         scope: "col"
       }, category)))),
-      body: /*#__PURE__*/React__default.createElement("tbody", null, pivotedTable.map(row => /*#__PURE__*/React__default.createElement("tr", {
+      body: /*#__PURE__*/React.createElement("tbody", null, pivotedTable.map(row => /*#__PURE__*/React.createElement("tr", {
         key: row.key
-      }, /*#__PURE__*/React__default.createElement("th", {
+      }, /*#__PURE__*/React.createElement("th", {
         scope: "row"
-      }, row.key), categories.map(category => /*#__PURE__*/React__default.createElement("th", {
+      }, row.key), categories.map(category => /*#__PURE__*/React.createElement("th", {
         key: `${row.key}-${category}-${row[category]}`,
         scope: "col"
       }, row[category])))))
     } : {
-      header: /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("th", {
+      header: /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
         scope: "col"
-      }, xScaleType === 'Date' || xScaleType === 'dateString' ? 'Date' : 'Key'), /*#__PURE__*/React__default.createElement("th", {
+      }, xScaleType === 'Date' || xScaleType === 'dateString' ? 'Date' : 'Key'), /*#__PURE__*/React.createElement("th", {
         scope: "col"
       }, "Value"))),
-      body: /*#__PURE__*/React__default.createElement("tbody", null, circles.map(datum => {
+      body: /*#__PURE__*/React.createElement("tbody", null, circles.map(datum => {
         let key = xAxisTickFormat ? xAxisTickFormat(datum.x) : datum.x.toString();
         key = Array.isArray(key) ? key.join(' ') : key;
-        return /*#__PURE__*/React__default.createElement("tr", {
+        return /*#__PURE__*/React.createElement("tr", {
           key: key
-        }, /*#__PURE__*/React__default.createElement("th", {
+        }, /*#__PURE__*/React.createElement("th", {
           scope: "row"
-        }, key), /*#__PURE__*/React__default.createElement("td", null, datum.y));
+        }, key), /*#__PURE__*/React.createElement("td", null, datum.y));
       }))
     }
   }, forwardedProps, {
     id: id,
     className: className,
     ref: ref
-  }), /*#__PURE__*/React__default.createElement(Flexbox, {
+  }), /*#__PURE__*/React.createElement(Flexbox, {
     flexDirection: "column",
     alignItems: "center",
     gap: "8"
-  }, /*#__PURE__*/React__default.createElement("svg", {
+  }, /*#__PURE__*/React.createElement("svg", {
     ref: svgRef,
     width: width,
     height: height,
-    "aria-label": typeof onDotClick === 'function' || typeof getDotAnchorProps === 'function' ? format('interactive-chart') : format('static-chart'),
-    "aria-hidden": "false"
-  }, /*#__PURE__*/React__default.createElement("g", {
+    "aria-label": typeof onDotClick === 'function' || typeof getDotAnchorProps === 'function' ? format('interactive-chart') : format('static-chart')
+  }, /*#__PURE__*/React.createElement("g", {
     transform: `translate(${margins.left},${margins.top})`,
     "aria-hidden": "true"
   }, lines.map((line, index) => {
-    return /*#__PURE__*/React__default.createElement(Line, {
+    return /*#__PURE__*/React.createElement(Line, {
       color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(line[0].category),
       data: line.filter(point => point.y !== null),
       disableAnimations: disableAnimations,
@@ -485,10 +486,9 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
     });
   })), categories.map((category, categoryIndex) => {
     const filteredCircles = circles.filter(circle => circle.category === category);
-    return /*#__PURE__*/React__default.createElement("g", _extends({
+    return /*#__PURE__*/React.createElement("g", _extends({
       key: `${id}-series-${category}`,
       transform: `translate(${margins.left},${margins.top})`,
-      "aria-hidden": "false",
       role: "region"
     }, hasCategory ? {
       'aria-label': `${category}, category ${categoryIndex + 1} of ${categories.length} with ${filteredCircles.length} circles`
@@ -501,7 +501,7 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
       const to = _objectSpread2(_objectSpread2({}, circle), {}, {
         r: 4
       });
-      return /*#__PURE__*/React__default.createElement(Dot, {
+      return /*#__PURE__*/React.createElement(Dot, {
         id: `id${id}__circle-${categoryIndex}.${index}`,
         color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(circle.category),
         data: to,
@@ -519,9 +519,9 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
         variant: DotVariant.hollow
       });
     }));
-  }), /*#__PURE__*/React__default.createElement("g", {
+  }), /*#__PURE__*/React.createElement("g", {
     transform: `translate(${margins.left},${margins.top})`
-  }, ['bottom', 'both'].includes(xAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+  }, ['bottom', 'both'].includes(xAxisPlacement) ? /*#__PURE__*/React.createElement(Axis, {
     disableAnimations: disableAnimations,
     position: "bottom",
     length: chartWidth,
@@ -535,7 +535,7 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
     tickFormat: xAxisTickFormat,
     tickRemodelling: xAxisTickRemodelling,
     variant: xAxisVariant
-  }) : null, ['top', 'both'].includes(xAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+  }) : null, ['top', 'both'].includes(xAxisPlacement) ? /*#__PURE__*/React.createElement(Axis, {
     disableAnimations: disableAnimations,
     position: "top",
     length: chartWidth,
@@ -549,7 +549,7 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
     tickFormat: xAxisTickFormat,
     tickRemodelling: xAxisTickRemodelling,
     variant: xAxisVariant
-  }) : null, ['left', 'both'].includes(yAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+  }) : null, ['left', 'both'].includes(yAxisPlacement) ? /*#__PURE__*/React.createElement(Axis, {
     disableAnimations: disableAnimations,
     position: "left",
     length: chartHeight,
@@ -563,7 +563,7 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
     tickFormat: yAxisTickFormat,
     tickRemodelling: yAxisTickRemodelling,
     variant: yAxisVariant
-  }) : null, ['right', 'both'].includes(yAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+  }) : null, ['right', 'both'].includes(yAxisPlacement) ? /*#__PURE__*/React.createElement(Axis, {
     disableAnimations: disableAnimations,
     position: "right",
     length: chartHeight,
@@ -577,7 +577,7 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
     tickFormat: yAxisTickFormat,
     tickRemodelling: yAxisTickRemodelling,
     variant: yAxisVariant
-  }) : null))), hasCategory && legendVariant !== LineChartLegendVariant.none ? /*#__PURE__*/React__default.createElement(Legend, _extends({
+  }) : null))), hasCategory && legendVariant !== LineChartLegendVariant.none ? /*#__PURE__*/React.createElement(Legend, _extends({
     data: (extraLegendItems ? mergeLegends(extraLegendItems, statsByCategory).sort(getSortingMethod(sortingMethod)) : statsByCategory).map(d => _objectSpread2(_objectSpread2({}, d), {}, {
       color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(d.key)
     })),
@@ -586,7 +586,7 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
   }, forwardedLegendProps)) : null);
 });
 
-const _excluded = ["className", "colorTheme", "data", "dotRole", "emptyComponent", "id", "isDotSelected", "labelDecorator", "legendDecorator", "legendVariant", "localeText", "onDotClick", "size", "sortingMethod", "tooltipDecorator", "tooltipVariant", "xAxisPlacement", "xAxisVariant", "yAxisPlacement", "yAxisVariant"];
+const _excluded = ["className", "colorTheme", "data", "dotRole", "emptyComponent", "id", "isDotSelected", "labelDecorator", "legendDecorator", "legendVariant", "localeText", "onDotClick", "size", "sortingMethod", "svgRef", "tooltipDecorator", "tooltipVariant", "xAxisPlacement", "xAxisVariant", "yAxisPlacement", "yAxisVariant"];
 const COMPONENT_NAME = 'LineChart';
 const CLASSNAME = 'redsift-line-chart';
 
@@ -660,6 +660,7 @@ const LineChart = /*#__PURE__*/forwardRef((props, ref) => {
       onDotClick,
       size = ChartSize.medium,
       sortingMethod = 'desc-value',
+      svgRef,
       tooltipDecorator,
       tooltipVariant = TooltipVariant.none,
       xAxisPlacement = 'bottom',
@@ -672,19 +673,20 @@ const LineChart = /*#__PURE__*/forwardRef((props, ref) => {
   const id = propsId !== null && propsId !== void 0 ? propsId : _id;
   const legendVariant = propsLegendVariant !== null && propsLegendVariant !== void 0 ? propsLegendVariant : LineChartLegendVariant.externalLabel;
   if (propsData === undefined || propsData === null) {
-    return /*#__PURE__*/React__default.createElement(LoadingLineChart, _extends({
+    return /*#__PURE__*/React.createElement(LoadingLineChart, _extends({
       id: id
     }, forwardedProps, {
       ref: ref
     }));
   }
   if (propsData.length === 0) {
-    return /*#__PURE__*/React__default.createElement(EmptyLineChart, _extends({
+    return /*#__PURE__*/React.createElement(EmptyLineChart, _extends({
       data: propsData,
       emptyComponent: emptyComponent,
       localeText: localeText,
       size: size,
       sortingMethod: sortingMethod,
+      svgRef: svgRef,
       xAxisPlacement: xAxisPlacement,
       xAxisVariant: xAxisVariant,
       yAxisPlacement: yAxisPlacement,
@@ -693,7 +695,7 @@ const LineChart = /*#__PURE__*/forwardRef((props, ref) => {
       ref: ref
     }));
   }
-  return /*#__PURE__*/React__default.createElement(RenderedLineChart, _extends({
+  return /*#__PURE__*/React.createElement(RenderedLineChart, _extends({
     className: classNames(LineChart.className, className),
     colorTheme: colorTheme,
     data: propsData,
@@ -706,6 +708,7 @@ const LineChart = /*#__PURE__*/forwardRef((props, ref) => {
     onDotClick: onDotClick,
     size: size,
     sortingMethod: sortingMethod,
+    svgRef: svgRef,
     tooltipDecorator: tooltipDecorator,
     tooltipVariant: tooltipVariant,
     xAxisPlacement: xAxisPlacement,