@redsift/charts 13.0.1 → 13.0.3

package/_internal/Legend3.js

@@ -18,7 +18,7 @@ const StyledLegend = styled.ul`
 `;
 
 const _excluded = ["width"],
-  _excluded2 = ["children", "className", "data", "isLegendItemSelected", "labelDecorator", "legendDecorator", "legendItemRole", "onLegendItemClick", "variant"],
+  _excluded2 = ["children", "className", "data", "getLegendItemAnchorProps", "isLegendItemSelected", "labelDecorator", "legendDecorator", "legendItemRole", "onLegendItemClick", "variant"],
   _excluded3 = ["color"];
 const COMPONENT_NAME = 'Legend';
 const CLASSNAME = 'redsift-chart-legend';
@@ -35,6 +35,7 @@ const Legend = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className,
       data,
+      getLegendItemAnchorProps,
       isLegendItemSelected = () => true,
       labelDecorator,
       legendDecorator,
@@ -64,12 +65,14 @@ const Legend = /*#__PURE__*/forwardRef((props, ref) => {
         color
       } = _ref,
       datum = _objectWithoutProperties(_ref, _excluded3);
+    const item = {
+      data: _objectSpread2(_objectSpread2({}, datum), {}, {
+        percent: (_datum$percent = datum.percent) !== null && _datum$percent !== void 0 ? _datum$percent : datum.value / total
+      })
+    };
     return /*#__PURE__*/React.createElement(LegendItem, {
-      data: {
-        data: _objectSpread2(_objectSpread2({}, datum), {}, {
-          percent: (_datum$percent = datum.percent) !== null && _datum$percent !== void 0 ? _datum$percent : datum.value / total
-        })
-      },
+      anchorProps: getLegendItemAnchorProps ? getLegendItemAnchorProps(item) : undefined,
+      data: item,
       dataset: data,
       color: color,
       variant: variant,

package/_internal/Legend3.js.map

@@ -1 +1 @@
-{"version":3,"file":"Legend3.js","sources":["../../src/components/Legend/styles.ts","../../src/components/Legend/Legend.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { StyledLegendProps } from './types';\nimport { baseContainer } from '@redsift/design-system';\n\n/**\n * Component style.\n */\nexport const StyledLegend = styled.ul<StyledLegendProps>`\n  display: flex;\n  flex-direction: column;\n\n  ${baseContainer}\n`;\n","import React, { forwardRef } from 'react';\nimport classNames from 'classnames';\nimport { sum as d3sum } from 'd3';\n\nimport { Comp, getContainerStylingTransientProps } from '@redsift/design-system';\n\nimport { LegendProps } from './types';\nimport { StyledLegend } from './styles';\nimport { LegendVariant } from '../../types';\nimport { LegendItem } from '../LegendItem';\n\nconst COMPONENT_NAME = 'Legend';\nconst CLASSNAME = 'redsift-chart-legend';\n\nexport const Legend: Comp<LegendProps, HTMLUListElement> = forwardRef((props, ref) => {\n  const { width, ...propsWithoutWidth } = props;\n  const { transientProps, otherProps } = getContainerStylingTransientProps(propsWithoutWidth);\n\n  const {\n    children,\n    className,\n    data,\n    isLegendItemSelected = () => true,\n    labelDecorator,\n    legendDecorator,\n    legendItemRole,\n    onLegendItemClick,\n    variant = LegendVariant.label,\n    ...forwardedProps\n  } = otherProps;\n\n  if (!data || data.length === 0) {\n    return null;\n  }\n\n  const total = d3sum(data, (d) => d.value);\n\n  if (children) {\n    const renderedChildren = typeof children === 'function' ? children(data, total) : children;\n\n    return (\n      <StyledLegend\n        {...forwardedProps}\n        {...transientProps}\n        className={classNames(Legend.className, className)}\n        ref={ref}\n      >\n        {renderedChildren}\n      </StyledLegend>\n    );\n  }\n\n  return (\n    <StyledLegend\n      {...forwardedProps}\n      {...transientProps}\n      className={classNames(Legend.className, className)}\n      ref={ref}\n      $width={width}\n    >\n      {data.map(({ color, ...datum }, index) => (\n        <LegendItem\n          data={{ data: { ...datum, percent: datum.percent ?? datum.value / total } }}\n          dataset={data}\n          color={color}\n          variant={variant}\n          index={index}\n          isSelected={Boolean(isLegendItemSelected!({ data: datum }))}\n          key={`legend-item _${index}`}\n          labelDecorator={labelDecorator}\n          legendDecorator={legendDecorator}\n          onClick={onLegendItemClick}\n          role={legendItemRole}\n        />\n      ))}\n    </StyledLegend>\n  );\n});\nLegend.className = CLASSNAME;\nLegend.displayName = COMPONENT_NAME;\n"],"names":["StyledLegend","styled","ul","baseContainer","COMPONENT_NAME","CLASSNAME","Legend","forwardRef","props","ref","width","propsWithoutWidth","_objectWithoutProperties","_excluded","transientProps","otherProps","getContainerStylingTransientProps","children","className","data","isLegendItemSelected","labelDecorator","legendDecorator","legendItemRole","onLegendItemClick","variant","LegendVariant","label","forwardedProps","_excluded2","length","total","d3sum","d","value","renderedChildren","React","createElement","_extends","classNames","$width","map","_ref","index","_datum$percent","color","datum","_excluded3","LegendItem","_objectSpread","percent","dataset","isSelected","Boolean","key","onClick","role","displayName"],"mappings":"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"}
+{"version":3,"file":"Legend3.js","sources":["../../src/components/Legend/styles.ts","../../src/components/Legend/Legend.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { StyledLegendProps } from './types';\nimport { baseContainer } from '@redsift/design-system';\n\n/**\n * Component style.\n */\nexport const StyledLegend = styled.ul<StyledLegendProps>`\n  display: flex;\n  flex-direction: column;\n\n  ${baseContainer}\n`;\n","import React, { forwardRef } from 'react';\nimport classNames from 'classnames';\nimport { sum as d3sum } from 'd3';\n\nimport { Comp, getContainerStylingTransientProps } from '@redsift/design-system';\n\nimport { LegendProps } from './types';\nimport { StyledLegend } from './styles';\nimport { LegendVariant } from '../../types';\nimport { LegendItem } from '../LegendItem';\n\nconst COMPONENT_NAME = 'Legend';\nconst CLASSNAME = 'redsift-chart-legend';\n\nexport const Legend: Comp<LegendProps, HTMLUListElement> = forwardRef((props, ref) => {\n  const { width, ...propsWithoutWidth } = props;\n  const { transientProps, otherProps } = getContainerStylingTransientProps(propsWithoutWidth);\n\n  const {\n    children,\n    className,\n    data,\n    getLegendItemAnchorProps,\n    isLegendItemSelected = () => true,\n    labelDecorator,\n    legendDecorator,\n    legendItemRole,\n    onLegendItemClick,\n    variant = LegendVariant.label,\n    ...forwardedProps\n  } = otherProps;\n\n  if (!data || data.length === 0) {\n    return null;\n  }\n\n  const total = d3sum(data, (d) => d.value);\n\n  if (children) {\n    const renderedChildren = typeof children === 'function' ? children(data, total) : children;\n\n    return (\n      <StyledLegend\n        {...forwardedProps}\n        {...transientProps}\n        className={classNames(Legend.className, className)}\n        ref={ref}\n      >\n        {renderedChildren}\n      </StyledLegend>\n    );\n  }\n\n  return (\n    <StyledLegend\n      {...forwardedProps}\n      {...transientProps}\n      className={classNames(Legend.className, className)}\n      ref={ref}\n      $width={width}\n    >\n      {data.map(({ color, ...datum }, index) => {\n        const item = { data: { ...datum, percent: datum.percent ?? datum.value / total } };\n\n        return (\n          <LegendItem\n            anchorProps={getLegendItemAnchorProps ? getLegendItemAnchorProps(item) : undefined}\n            data={item}\n            dataset={data}\n            color={color}\n            variant={variant}\n            index={index}\n            isSelected={Boolean(isLegendItemSelected!({ data: datum }))}\n            key={`legend-item _${index}`}\n            labelDecorator={labelDecorator}\n            legendDecorator={legendDecorator}\n            onClick={onLegendItemClick}\n            role={legendItemRole}\n          />\n        );\n      })}\n    </StyledLegend>\n  );\n});\nLegend.className = CLASSNAME;\nLegend.displayName = COMPONENT_NAME;\n"],"names":["StyledLegend","styled","ul","baseContainer","COMPONENT_NAME","CLASSNAME","Legend","forwardRef","props","ref","width","propsWithoutWidth","_objectWithoutProperties","_excluded","transientProps","otherProps","getContainerStylingTransientProps","children","className","data","getLegendItemAnchorProps","isLegendItemSelected","labelDecorator","legendDecorator","legendItemRole","onLegendItemClick","variant","LegendVariant","label","forwardedProps","_excluded2","length","total","d3sum","d","value","renderedChildren","React","createElement","_extends","classNames","$width","map","_ref","index","_datum$percent","color","datum","_excluded3","item","_objectSpread","percent","LegendItem","anchorProps","undefined","dataset","isSelected","Boolean","key","onClick","role","displayName"],"mappings":"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"}

package/_internal/LegendItem.js

@@ -1,2 +1,2 @@
-export { L as LegendItem, S as StyledLegendItem } from './LegendItem2.js';
+export { L as LegendItem, S as StyledLegendItem, a as StyledLegendItemAnchor } from './LegendItem2.js';
 //# sourceMappingURL=LegendItem.js.map

package/_internal/LegendItem2.js

@@ -7,12 +7,26 @@ import { L as LegendVariant } from './legend2.js';
 import { m as monochrome } from './scheme.js';
 
 /**
- * Component style.
+ * Lays the swatch and the label out in a row. Shared by the item and by its link.
  */
-const StyledLegendItem = styled.li`
+const row = css`
   display: flex;
   align-items: center;
   gap: 8px;
+`;
+
+/**
+ * Focus ring of the swatch, the legend's focus cue wherever a swatch exists.
+ */
+const swatchFocusOutline = css`
+  outline: 4px solid var(--redsift-color-primary-n);
+`;
+
+/**
+ * Component style.
+ */
+const StyledLegendItem = styled.li`
+  ${row}
   font-size: var(--redsift-typography-caption-font-size);
 
   ${_ref => {
@@ -30,12 +44,22 @@ const StyledLegendItem = styled.li`
     $color
   } = _ref2;
   return $variant !== LegendVariant.custom ? css`
-          > div {
+          > div,
+          > a > div {
             height: 16px;
             width: 16px;
             min-width: 16px;
             background-color: ${$color};
           }
+
+          /* The swatch carries the focus ring of a link, so the link's own fallback ring is dropped. */
+          > a:focus {
+            outline: none;
+          }
+
+          > a:focus-visible > div {
+            ${swatchFocusOutline}
+          }
         ` : '';
 }}
 
@@ -56,18 +80,49 @@ const StyledLegendItem = styled.li`
 
           &:focus-visible {
             > div {
-              outline: 4px solid var(--redsift-color-primary-n);
+              ${swatchFocusOutline}
             }
           }
         ` : '';
 }}
 `;
 
-const _excluded = ["className", "color", "data", "dataset", "id", "variant", "index", "isSelected", "labelDecorator", "legendDecorator", "onClick", "role"];
+/**
+ * The navigation-link variant: the anchor owns the swatch and the label, keeps the legend's text colour and
+ * gives the same hover and focus cues as a clickable item. The swatch dims on hover and on keyboard focus only,
+ * so that a link that does not leave the page (a hash) does not stay dimmed after a click.
+ */
+const StyledLegendItemAnchor = styled.a`
+  ${row}
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
+
+  &:hover,
+  &:focus-visible {
+    > div {
+      opacity: 0.7;
+    }
+  }
+
+  /* Fallback focus ring, for a legend without a swatch (the custom variant), which would show no focus at all. */
+  &:focus-visible {
+    outline: 2px solid var(--redsift-color-primary-n);
+    outline-offset: 2px;
+  }
+`;
+
+const _excluded = ["as", "href", "onClick"],
+  _excluded2 = ["anchorProps", "className", "color", "data", "dataset", "id", "variant", "index", "isSelected", "labelDecorator", "legendDecorator", "onClick", "role"];
 const COMPONENT_NAME = 'LegendItem';
 const CLASSNAME = 'redsift-legend-item';
 const LegendItem = /*#__PURE__*/forwardRef((props, ref) => {
   const {
+      anchorProps: {
+        as: anchorAs,
+        href,
+        onClick: onAnchorClick
+      } = {},
       className,
       color = monochrome,
       data,
@@ -81,7 +136,8 @@ const LegendItem = /*#__PURE__*/forwardRef((props, ref) => {
       onClick,
       role
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded);
+    anchorProps = _objectWithoutProperties(props.anchorProps, _excluded),
+    forwardedProps = _objectWithoutProperties(props, _excluded2);
   const theme = useTheme();
   const [_id] = useId();
   const id = propsId !== null && propsId !== void 0 ? propsId : _id;
@@ -92,7 +148,11 @@ const LegendItem = /*#__PURE__*/forwardRef((props, ref) => {
     color
   }) : data.data.key;
   const isEmpty = data.data.value === 0;
-  const isSelectable = role === 'option';
+
+  // A link carries its own semantics: no button wiring on the item, and no selection state.
+  const isLink = href !== undefined;
+  const isButton = !isLink && Boolean(onClick);
+  const isSelectable = !isLink && role === 'option';
   const isSelected = isSelectable && propsIsSelected === true;
   const isDeselected = isSelectable && propsIsSelected === false;
   const onKeyDown = event => {
@@ -104,24 +164,7 @@ const LegendItem = /*#__PURE__*/forwardRef((props, ref) => {
       }
     }
   };
-  return /*#__PURE__*/React.createElement(StyledLegendItem, _extends({}, forwardedProps, {
-    className: classNames(LegendItem.className, className, `_${index}`, {
-      selected: isSelected,
-      deselected: isDeselected
-    }),
-    $color: isDeselected ? 'var(--redsift-color-neutral-light-grey)' : color,
-    ref: ref,
-    "aria-labelledby": !isEmpty ? `${id}-title` : undefined,
-    "aria-selected": isSelected ? true : isDeselected ? false : undefined,
-    id: id,
-    onClick: onClick ? () => onClick(data, dataset) : undefined,
-    onKeyDown: onClick ? event => onKeyDown(event) : undefined,
-    role: role ? role : onClick ? 'button' : undefined,
-    tabIndex: onClick ? 0 : undefined,
-    $clickable: Boolean(onClick),
-    $variant: variant,
-    $theme: theme
-  }), isLegendCustom ? legendDecorator(data, {
+  const content = isLegendCustom ? legendDecorator(data, {
     index,
     isSelected: propsIsSelected,
     color: props.color
@@ -142,10 +185,35 @@ const LegendItem = /*#__PURE__*/forwardRef((props, ref) => {
     variant: "caption"
   }, text)) : /*#__PURE__*/React.createElement(Text, {
     variant: "caption"
-  }, text) : /*#__PURE__*/React.createElement(React.Fragment, null, text)));
+  }, text) : /*#__PURE__*/React.createElement(React.Fragment, null, text));
+  return /*#__PURE__*/React.createElement(StyledLegendItem, _extends({}, forwardedProps, {
+    className: classNames(LegendItem.className, className, `_${index}`, {
+      selected: isSelected,
+      deselected: isDeselected
+    }),
+    $color: isDeselected ? 'var(--redsift-color-neutral-light-grey)' : color,
+    ref: ref,
+    "aria-labelledby": !isLink && !isEmpty ? `${id}-title` : undefined,
+    "aria-selected": isSelected ? true : isDeselected ? false : undefined,
+    id: id,
+    onClick: isButton ? () => onClick(data, dataset) : undefined,
+    onKeyDown: isButton ? event => onKeyDown(event) : undefined,
+    role: isLink ? undefined : role ? role : onClick ? 'button' : undefined,
+    tabIndex: isButton ? 0 : undefined,
+    $clickable: isButton,
+    $variant: variant,
+    $theme: theme
+  }), isLink ? /*#__PURE__*/React.createElement(StyledLegendItemAnchor, _extends({
+    as: anchorAs,
+    href: href,
+    onClick: onClick || onAnchorClick ? event => {
+      onAnchorClick === null || onAnchorClick === void 0 ? void 0 : onAnchorClick(event);
+      onClick === null || onClick === void 0 ? void 0 : onClick(data, dataset);
+    } : undefined
+  }, anchorProps), content) : content);
 });
 LegendItem.className = CLASSNAME;
 LegendItem.displayName = COMPONENT_NAME;
 
-export { LegendItem as L, StyledLegendItem as S };
+export { LegendItem as L, StyledLegendItem as S, StyledLegendItemAnchor as a };
 //# sourceMappingURL=LegendItem2.js.map

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":"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"}
+{"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 * Lays the swatch and the label out in a row. Shared by the item and by its link.\n */\nconst row = css`\n  display: flex;\n  align-items: center;\n  gap: 8px;\n`;\n\n/**\n * Focus ring of the swatch, the legend's focus cue wherever a swatch exists.\n */\nconst swatchFocusOutline = css`\n  outline: 4px solid var(--redsift-color-primary-n);\n`;\n\n/**\n * Component style.\n */\nexport const StyledLegendItem = styled.li<StyledLegendItemProps>`\n  ${row}\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          > a > div {\n            height: 16px;\n            width: 16px;\n            min-width: 16px;\n            background-color: ${$color};\n          }\n\n          /* The swatch carries the focus ring of a link, so the link's own fallback ring is dropped. */\n          > a:focus {\n            outline: none;\n          }\n\n          > a:focus-visible > div {\n            ${swatchFocusOutline}\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              ${swatchFocusOutline}\n            }\n          }\n        `\n      : ''}\n`;\n\n/**\n * The navigation-link variant: the anchor owns the swatch and the label, keeps the legend's text colour and\n * gives the same hover and focus cues as a clickable item. The swatch dims on hover and on keyboard focus only,\n * so that a link that does not leave the page (a hash) does not stay dimmed after a click.\n */\nexport const StyledLegendItemAnchor = styled.a`\n  ${row}\n  color: inherit;\n  text-decoration: none;\n  cursor: pointer;\n\n  &:hover,\n  &:focus-visible {\n    > div {\n      opacity: 0.7;\n    }\n  }\n\n  /* Fallback focus ring, for a legend without a swatch (the custom variant), which would show no focus at all. */\n  &:focus-visible {\n    outline: 2px solid var(--redsift-color-primary-n);\n    outline-offset: 2px;\n  }\n`;\n","import React, { KeyboardEventHandler, MouseEvent, 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, StyledLegendItemAnchor } 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    anchorProps: { as: anchorAs, href, onClick: onAnchorClick, ...anchorProps } = {},\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  // A link carries its own semantics: no button wiring on the item, and no selection state.\n  const isLink = href !== undefined;\n  const isButton = !isLink && Boolean(onClick);\n  const isSelectable = !isLink && 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  const content = 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\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={!isLink && !isEmpty ? `${id}-title` : undefined}\n      aria-selected={isSelected ? true : isDeselected ? false : undefined}\n      id={id}\n      onClick={isButton ? () => onClick!(data, dataset) : undefined}\n      onKeyDown={isButton ? (event: React.KeyboardEvent<HTMLLIElement>) => onKeyDown(event) : undefined}\n      role={isLink ? undefined : role ? role : onClick ? 'button' : undefined}\n      tabIndex={isButton ? 0 : undefined}\n      $clickable={isButton}\n      $variant={variant}\n      $theme={theme}\n    >\n      {isLink ? (\n        <StyledLegendItemAnchor\n          as={anchorAs}\n          href={href}\n          onClick={\n            onClick || onAnchorClick\n              ? (event: MouseEvent<HTMLAnchorElement>) => {\n                  onAnchorClick?.(event);\n                  onClick?.(data, dataset);\n                }\n              : undefined\n          }\n          {...anchorProps}\n        >\n          {content}\n        </StyledLegendItemAnchor>\n      ) : (\n        content\n      )}\n    </StyledLegendItem>\n  );\n});\nLegendItem.className = CLASSNAME;\nLegendItem.displayName = COMPONENT_NAME;\n"],"names":["row","css","swatchFocusOutline","StyledLegendItem","styled","li","_ref","$theme","Theme","dark","_ref2","$variant","$color","LegendVariant","custom","_ref3","$clickable","StyledLegendItemAnchor","a","COMPONENT_NAME","CLASSNAME","LegendItem","forwardRef","props","ref","anchorProps","as","anchorAs","href","onClick","onAnchorClick","className","color","monochrome","data","dataset","id","propsId","variant","index","isSelected","propsIsSelected","labelDecorator","legendDecorator","role","_objectWithoutProperties","_excluded","forwardedProps","_excluded2","theme","useTheme","_id","useId","isLegendCustom","text","key","isEmpty","value","isLink","undefined","isButton","Boolean","isSelectable","isDeselected","onKeyDown","event","stopPropagation","code","preventDefault","content","React","createElement","Fragment","Number","maximumFractionDigits","Text","percent","type","_extends","classNames","selected","deselected","tabIndex","displayName"],"mappings":"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"}

package/_internal/LineChart2.js

@@ -410,7 +410,7 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
     } = _ref11,
     forwardedLegendProps = _objectWithoutProperties(_ref11, _excluded2);
   return /*#__PURE__*/React.createElement(StyledLineChart, _extends({
-    mode: typeof onDotClick === 'function' || typeof getDotAnchorProps === 'function' ? 'interactive' : 'static',
+    mode: typeof onDotClick === 'function' || typeof getDotAnchorProps === 'function' || typeof forwardedLegendProps.getLegendItemAnchorProps === 'function' ? 'interactive' : 'static',
     definition: hasCategory ? format('definition-linear-with-categories', {
       categoryLength: categories.length,
       circleLength: circles.length