@redsift/charts 8.0.0-alpha.2 → 8.0.0-alpha.3

package/CONTRIBUTING.md

@@ -355,9 +355,9 @@ yarn dev:website
 
 Then, open [http://localhost:3000](http://localhost:3000) in your browser.
 
-To add documentation for a component, a MDX file should be created in the `packages/website/pages/` folder and more precisely inside the subfolder corresponding to the section the page belongs to (i.e. `packages/website/pages/forms/checkbox.mdx` for the `Checkbox` component inside the `Forms` section).
+To add documentation for a component, a MDX file should be created in the `apps/website/pages/` folder and more precisely inside the subfolder corresponding to the section the page belongs to (i.e. `apps/website/pages/forms/checkbox.mdx` for the `Checkbox` component inside the `Forms` section).
 
-To appear in the website's Side Panel, the page should be listed in `packages/website/components/CustomAppSidePanel/CustomAppSidePanel.tsx`) under the corresponding section.
+To appear in the website's Side Panel, the page should be listed in `apps/website/components/CustomAppSidePanel/CustomAppSidePanel.tsx`) under the corresponding section.
 
 A component page should be structured as following:
 
@@ -380,7 +380,7 @@ To display a prop table, use the `PropsTable` component as following:
 <PropsTable component="Button" />
 ```
 
-To display a demo, first create a demo (a simple `tsx` file) in the demo folder (`packages/website/demo/`) inside a subfolder with the name of the component (i.e. `packages/website/demo/button/coloring` for a coloring demo of the `Button` component). Then use the `DemoBlock` as following:
+To display a demo, first create a demo (a simple `tsx` file) in the demo folder (`apps/website/demo/`) inside a subfolder with the name of the component (i.e. `apps/website/demo/button/coloring` for a coloring demo of the `Button` component). Then use the `DemoBlock` as following:
 
 ```ts
 <DemoBlock path="button/coloring" />

package/index.d.ts

@@ -55,6 +55,9 @@ type DotDatum = {
     y: number;
     r: number;
 };
+type LegendItemDatum = {
+    data: CategoryDatum;
+};
 
 /** TOOLTIP */
 declare const TooltipVariant: {
@@ -483,11 +486,29 @@ declare const StyledDot: styled_components.StyledComponent<_redsift_design_syste
 /**
  * Component props.
  */
-interface LegendProps extends ComponentProps<'ul'> {
+interface LegendItemProps extends Pick<DataPointProps<LegendItemDatum>, 'color' | 'data' | 'id' | 'index' | 'isSelected' | 'labelDecorator' | 'onClick' | 'previousData' | 'role' | 'tooltipVariant'>, Omit<ComponentProps<'li'>, 'onClick' | 'role'> {
+    /** Total used to compute percentage. */
+    total?: number;
+    /** Variant. */
+    variant?: LabelVariant;
+}
+
+/**
+ * Component props.
+ */
+interface LegendProps extends Omit<ComponentProps<'ul'>, 'onClick'> {
     /** Data. */
     data: (CategoryDatum & {
         color: string;
     })[];
+    /** Method to determine whether a slice is selected or not. */
+    isLegendItemSelected?: (datum: LegendItemDatum) => void;
+    /** Method to override the data labels. */
+    labelDecorator?: (datum: LegendItemDatum) => string;
+    /** Method to be called on a click on a legend item. */
+    onLegendItemClick?: (datum: LegendItemDatum) => void;
+    /** LegendItem role. Used to indicate that legend items are to be considered buttons or links. If an onClick is provided, the legend items will have the role `button` unless specifically set to `link` with this prop. */
+    legendItemRole?: LegendItemProps['role'];
     /** Variant. */
     variant?: LabelVariant;
     /** Width. */
@@ -505,9 +526,6 @@ declare const Legend: Comp<LegendProps, HTMLUListElement>;
 declare const StyledLegend: styled_components.StyledComponent<"ul", any, Omit<LegendProps, "data"> & {
     $width?: string | undefined;
 }, never>;
-declare const StyledLabel: styled_components.StyledComponent<"li", any, {
-    $color: string;
-}, never>;
 
 /**
  * Component variant.
@@ -638,6 +656,8 @@ interface ScatterPlotProps extends ChartContainerProps {
     labelDecorator?: (datum: DotDatum) => string;
     /** Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. */
     labelVariant?: ScatterPlotLabelVariant;
+    /** Props to forward to the Legend block. Can be used to make the legend selectable. */
+    legendProps?: Omit<LegendProps, 'data' | 'ref' | 'variant' | 'width'>;
     /** Labels and texts. */
     localeText?: LocaleText;
     /** Method called on brush. */
@@ -674,4 +694,4 @@ declare const StyledScatterPlotEmptyText: styled_components.StyledComponent<"div
     $textSize: number;
 }, never>;
 
-export { AnyScale, Arc, ArcDatum, ArcProps, Arcs, ArcsProps, Axis, AxisPosition, AxisProps, AxisVariant, Bar, BarChart, BarChartDimensions, BarChartProps, BarDatum, BarOrientation, BarProps, CategoryData, CategoryDatum, CategoryDim, ChartContainer, ChartContainerProps, ChartDimensions, ChartSize, ChartTheme, ColorTheme, Coordinates, CoordinatesCategoryData, CoordinatesCategoryDatum, CoordinatesCategoryDim, CustomColorTheme, DataPoint, DataPointProps, Datum, Dot, DotDatum, DotProps, JSONArray, JSONObject, JSONValue, LabelVariant, Legend, LegendProps, NumericValue, PieChart, PieChartDimensions, PieChartLabelVariant, PieChartProps, PieChartVariant, Scale, ScaleBand, ScaleLinear, ScaleLog, ScalePoint, ScaleSymlog, ScaleTime, ScaleTypeToScale, ScaleValue, ScaleWithBandwidth, ScatterPlot, ScatterPlotDimensions, ScatterPlotLabelVariant, ScatterPlotProps, ScatterPlotVariant, StringValue, StyledArc, StyledArcProps, StyledArcs, StyledArcsProps, StyledAxis, StyledAxisProps, StyledBar, StyledBarChart, StyledBarChartEmptyText, StyledBarChartProps, StyledBarProps, StyledChartContainer, StyledChartContainerCaption, StyledChartContainerProps, StyledChartContainerTitle, StyledDataPoint, StyledDataPointProps, StyledDot, StyledDotProps, StyledLabel, StyledLegend, StyledLegendProps, StyledPieChart, StyledPieChartCenterText, StyledPieChartEmptyText, StyledPieChartProps, StyledScatterPlot, StyledScatterPlotEmptyText, StyledScatterPlotProps, SuccessDangerColorTheme, TicksSpec, TooltipVariant, UseBrushProps, UseColorProps, UseFormatCategoricalDataProps, UseZoomProps, empty, getColorScale, monochrome, scheme, successDangerScheme, useBrush, useColor, useFormatCategoricalData, useZoom };
+export { AnyScale, Arc, ArcDatum, ArcProps, Arcs, ArcsProps, Axis, AxisPosition, AxisProps, AxisVariant, Bar, BarChart, BarChartDimensions, BarChartProps, BarDatum, BarOrientation, BarProps, CategoryData, CategoryDatum, CategoryDim, ChartContainer, ChartContainerProps, ChartDimensions, ChartSize, ChartTheme, ColorTheme, Coordinates, CoordinatesCategoryData, CoordinatesCategoryDatum, CoordinatesCategoryDim, CustomColorTheme, DataPoint, DataPointProps, Datum, Dot, DotDatum, DotProps, JSONArray, JSONObject, JSONValue, LabelVariant, Legend, LegendItemDatum, LegendProps, NumericValue, PieChart, PieChartDimensions, PieChartLabelVariant, PieChartProps, PieChartVariant, Scale, ScaleBand, ScaleLinear, ScaleLog, ScalePoint, ScaleSymlog, ScaleTime, ScaleTypeToScale, ScaleValue, ScaleWithBandwidth, ScatterPlot, ScatterPlotDimensions, ScatterPlotLabelVariant, ScatterPlotProps, ScatterPlotVariant, StringValue, StyledArc, StyledArcProps, StyledArcs, StyledArcsProps, StyledAxis, StyledAxisProps, StyledBar, StyledBarChart, StyledBarChartEmptyText, StyledBarChartProps, StyledBarProps, StyledChartContainer, StyledChartContainerCaption, StyledChartContainerProps, StyledChartContainerTitle, StyledDataPoint, StyledDataPointProps, StyledDot, StyledDotProps, StyledLegend, StyledLegendProps, StyledPieChart, StyledPieChartCenterText, StyledPieChartEmptyText, StyledPieChartProps, StyledScatterPlot, StyledScatterPlotEmptyText, StyledScatterPlotProps, SuccessDangerColorTheme, TicksSpec, TooltipVariant, UseBrushProps, UseColorProps, UseFormatCategoricalDataProps, UseZoomProps, empty, getColorScale, monochrome, scheme, successDangerScheme, useBrush, useColor, useFormatCategoricalData, useZoom };

package/index.js

@@ -317,7 +317,7 @@ var k=/^--/;function I(t,e){return e==null||typeof e=="boolean"||e===""?"":typeo
  */
 const StyledDataPoint = styled(it.g)``;
 
-const _excluded$j = ["children", "className", "data", "id", "index", "isSelected", "labelDecorator", "onClick", "role", "tooltipVariant"];
+const _excluded$k = ["children", "className", "data", "id", "index", "isSelected", "labelDecorator", "onClick", "role", "tooltipVariant"];
 const DataPoint = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       children,
@@ -331,7 +331,7 @@ const DataPoint = /*#__PURE__*/forwardRef((props, ref) => {
       role,
       tooltipVariant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$j);
+    forwardedProps = _objectWithoutProperties(props, _excluded$k);
   const id = propsId !== null && propsId !== void 0 ? propsId : useId();
   const text = labelDecorator ? labelDecorator(data) : data.data.key;
   const hasText = text && tooltipVariant !== TooltipVariant.none;
@@ -433,10 +433,10 @@ const config = (() => ({
   immediate: false
 }))();
 
-const _excluded$i = ["className", "createArc", "hasStroke", "previousData"];
-const COMPONENT_NAME$9 = 'Arc';
-const CLASSNAME$9 = 'redsift-arc';
-const DEFAULT_PROPS$9 = {
+const _excluded$j = ["className", "createArc", "hasStroke", "previousData"];
+const COMPONENT_NAME$a = 'Arc';
+const CLASSNAME$a = 'redsift-arc';
+const DEFAULT_PROPS$a = {
   color: monochrome,
   index: 0,
   previousData: {
@@ -465,7 +465,7 @@ const Arc = /*#__PURE__*/forwardRef((props, ref) => {
       hasStroke,
       previousData
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$i);
+    forwardedProps = _objectWithoutProperties(props, _excluded$j);
   const interpolator = interpolate(previousData, data);
   const isSelectable = role === 'option';
   const isDeselected = isSelectable && propsIsSelected === false;
@@ -489,19 +489,19 @@ const Arc = /*#__PURE__*/forwardRef((props, ref) => {
     fill: isDeselected ? 'var(--redsift-color-neutral-lightgrey)' : color
   }));
 });
-Arc.className = CLASSNAME$9;
-Arc.defaultProps = DEFAULT_PROPS$9;
-Arc.displayName = COMPONENT_NAME$9;
+Arc.className = CLASSNAME$a;
+Arc.defaultProps = DEFAULT_PROPS$a;
+Arc.displayName = COMPONENT_NAME$a;
 
 /**
  * Component style.
  */
 const StyledArcs = styled.g``;
 
-const _excluded$h = ["arcs", "className", "color", "hasLabels", "hasStroke", "id", "labelDecorator", "onClick", "role", "tooltipVariant"];
-const COMPONENT_NAME$8 = 'Arcs';
-const CLASSNAME$8 = 'redsift-arcs';
-const DEFAULT_PROPS$8 = {};
+const _excluded$i = ["arcs", "className", "color", "hasLabels", "hasStroke", "id", "labelDecorator", "onClick", "role", "tooltipVariant"];
+const COMPONENT_NAME$9 = 'Arcs';
+const CLASSNAME$9 = 'redsift-arcs';
+const DEFAULT_PROPS$9 = {};
 const Arcs = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       arcs,
@@ -515,7 +515,7 @@ const Arcs = /*#__PURE__*/forwardRef((props, ref) => {
       role,
       tooltipVariant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$h);
+    forwardedProps = _objectWithoutProperties(props, _excluded$i);
   const id = propsId !== null && propsId !== void 0 ? propsId : useId();
   const animatedProps = J(_objectSpread2(_objectSpread2({}, config), {}, {
     to: async next => {
@@ -569,9 +569,9 @@ const Arcs = /*#__PURE__*/forwardRef((props, ref) => {
     }, arcLabelDecorator ? arcLabelDecorator(arc.data) : arc.data.data.key);
   })) : null);
 });
-Arcs.className = CLASSNAME$8;
-Arcs.defaultProps = DEFAULT_PROPS$8;
-Arcs.displayName = COMPONENT_NAME$8;
+Arcs.className = CLASSNAME$9;
+Arcs.defaultProps = DEFAULT_PROPS$9;
+Arcs.displayName = COMPONENT_NAME$9;
 
 /**
  * Component variant.
@@ -605,6 +605,7 @@ const StyledAxis = styled(it.g)`
   text {
     font-family: var(--redsift-typography-font-family-source-code-pro);
     font-size: 10px;
+    user-select: none;
   }
 `;
 
@@ -717,10 +718,10 @@ const computeTicks = _ref => {
   };
 };
 
-const _excluded$g = ["className", "length", "legend", "legendOffset", "legendPosition", "position", "scale", "tickPadding", "tickRotation", "tickSize", "tickValues", "variant", "x", "y"];
-const COMPONENT_NAME$7 = 'Axis';
-const CLASSNAME$7 = 'redsift-axis';
-const DEFAULT_PROPS$7 = {
+const _excluded$h = ["className", "length", "legend", "legendOffset", "legendPosition", "position", "scale", "tickPadding", "tickRotation", "tickSize", "tickValues", "variant", "x", "y"];
+const COMPONENT_NAME$8 = 'Axis';
+const CLASSNAME$8 = 'redsift-axis';
+const DEFAULT_PROPS$8 = {
   position: AxisPosition.bottom,
   legendOffset: -32,
   legendPosition: 'end',
@@ -749,7 +750,7 @@ const Axis = /*#__PURE__*/forwardRef((props, ref) => {
       x,
       y
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$g);
+    forwardedProps = _objectWithoutProperties(props, _excluded$h);
   const axis = getAxisType(position);
   const axisRef = ref || useRef();
   const animatedProps = J(_objectSpread2(_objectSpread2({}, config), {}, {
@@ -874,9 +875,9 @@ const Axis = /*#__PURE__*/forwardRef((props, ref) => {
     y2: config.immediate ? axis === 'x' ? 0 : length : animatedProps.lineY2
   }) : null, legendNode);
 });
-Axis.className = CLASSNAME$7;
-Axis.defaultProps = DEFAULT_PROPS$7;
-Axis.displayName = COMPONENT_NAME$7;
+Axis.className = CLASSNAME$8;
+Axis.defaultProps = DEFAULT_PROPS$8;
+Axis.displayName = COMPONENT_NAME$8;
 
 /**
  * Component variant.
@@ -920,10 +921,10 @@ const StyledBar = styled(DataPoint)`
 }}}
 `;
 
-const _excluded$f = ["className", "gap", "height", "orientation", "previousData", "scale", "width"];
-const COMPONENT_NAME$6 = 'Bar';
-const CLASSNAME$6 = 'redsift-bar';
-const DEFAULT_PROPS$6 = {
+const _excluded$g = ["className", "gap", "height", "orientation", "previousData", "scale", "width"];
+const COMPONENT_NAME$7 = 'Bar';
+const CLASSNAME$7 = 'redsift-bar';
+const DEFAULT_PROPS$7 = {
   color: monochrome,
   index: 0,
   gap: 5,
@@ -957,7 +958,7 @@ const Bar = /*#__PURE__*/forwardRef((props, ref) => {
       scale,
       width
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$f);
+    forwardedProps = _objectWithoutProperties(props, _excluded$g);
   const interpolator = interpolate(((_data = previousData.data) === null || _data === void 0 ? void 0 : _data.value) || 0, data.data.value);
   const text = labelDecorator ? labelDecorator(data) : data.data.key;
   const isSelectable = role === 'option';
@@ -992,9 +993,9 @@ const Bar = /*#__PURE__*/forwardRef((props, ref) => {
     "aria-hidden": true
   }, text) : null);
 });
-Bar.className = CLASSNAME$6;
-Bar.defaultProps = DEFAULT_PROPS$6;
-Bar.displayName = COMPONENT_NAME$6;
+Bar.className = CLASSNAME$7;
+Bar.defaultProps = DEFAULT_PROPS$7;
+Bar.displayName = COMPONENT_NAME$7;
 
 var reset$1 = "Reset";
 var enUS = {
@@ -1044,10 +1045,10 @@ const StyledChartContainerCaption = styled.p`
   line-height: var(--redsift-typography-caption-line-height);
 `;
 
-const _excluded$e = ["aria-label", "aria-labelledby", "caption", "children", "className", "id", "title", "onReset"];
-const COMPONENT_NAME$5 = 'ChartContainer';
-const CLASSNAME$5 = 'redsift-chart-container';
-const DEFAULT_PROPS$5 = {};
+const _excluded$f = ["aria-label", "aria-labelledby", "caption", "children", "className", "id", "title", "onReset"];
+const COMPONENT_NAME$6 = 'ChartContainer';
+const CLASSNAME$6 = 'redsift-chart-container';
+const DEFAULT_PROPS$6 = {};
 const ChartContainer = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       'aria-label': propsAriaLabel,
@@ -1059,7 +1060,7 @@ const ChartContainer = /*#__PURE__*/forwardRef((props, ref) => {
       title,
       onReset
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$e);
+    forwardedProps = _objectWithoutProperties(props, _excluded$f);
   const id = propsId !== null && propsId !== void 0 ? propsId : useId();
   warnIfNoAccessibleLabelFound(props, [title]);
   const stringFormatter = useLocalizedStringFormatter(intlMessages);
@@ -1089,9 +1090,9 @@ const ChartContainer = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${ChartContainer.className}__caption`
   }, caption) : null);
 });
-ChartContainer.className = CLASSNAME$5;
-ChartContainer.defaultProps = DEFAULT_PROPS$5;
-ChartContainer.displayName = COMPONENT_NAME$5;
+ChartContainer.className = CLASSNAME$6;
+ChartContainer.defaultProps = DEFAULT_PROPS$6;
+ChartContainer.displayName = COMPONENT_NAME$6;
 
 /**
  * Component style.
@@ -1163,7 +1164,7 @@ const sizeToDimension$2 = size => {
   }
 };
 
-const _excluded$d = ["className", "emptyComponent", "size", "localeText"];
+const _excluded$e = ["className", "emptyComponent", "size", "localeText"];
 const EmptyBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       className,
@@ -1171,7 +1172,7 @@ const EmptyBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       size,
       localeText
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$d);
+    forwardedProps = _objectWithoutProperties(props, _excluded$e);
   const chartDimensions = sizeToDimension$2(size);
   const width = chartDimensions.width;
   const height = chartDimensions.height;
@@ -1208,19 +1209,19 @@ const EmptyBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   })))));
 });
 
-const _excluded$c = ["className"];
+const _excluded$d = ["className"];
 const LoadingBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$c);
+    forwardedProps = _objectWithoutProperties(props, _excluded$d);
   return /*#__PURE__*/React__default.createElement(StyledBarChart, _extends({}, forwardedProps, {
     className: className,
     ref: ref
   }), "Loading...");
 });
 
-const _excluded$b = ["areXLabelsRotated", "caping", "className", "data", "id", "isBarSelected", "labelDecorator", "onBarClick", "others", "size", "barRole", "theme", "tooltipVariant"];
+const _excluded$c = ["areXLabelsRotated", "caping", "className", "data", "id", "isBarSelected", "labelDecorator", "onBarClick", "others", "size", "barRole", "theme", "tooltipVariant"];
 const RenderedBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       areXLabelsRotated,
@@ -1237,7 +1238,7 @@ const RenderedBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       theme,
       tooltipVariant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$b);
+    forwardedProps = _objectWithoutProperties(props, _excluded$c);
   const cache = useRef();
   const {
     data,
@@ -1321,10 +1322,10 @@ const RenderedBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   }))));
 });
 
-const _excluded$a = ["areXLabelsRotated", "caping", "className", "data", "emptyComponent", "id", "isBarSelected", "labelDecorator", "localeText", "onBarClick", "others", "size", "barRole", "theme", "tooltipVariant"];
-const COMPONENT_NAME$4 = 'BarChart';
-const CLASSNAME$4 = 'redsift-barchart';
-const DEFAULT_PROPS$4 = {
+const _excluded$b = ["areXLabelsRotated", "caping", "className", "data", "emptyComponent", "id", "isBarSelected", "labelDecorator", "localeText", "onBarClick", "others", "size", "barRole", "theme", "tooltipVariant"];
+const COMPONENT_NAME$5 = 'BarChart';
+const CLASSNAME$5 = 'redsift-barchart';
+const DEFAULT_PROPS$5 = {
   isBarSelected: () => true,
   others: true,
   size: ChartSize.medium,
@@ -1352,7 +1353,7 @@ const BarChart = /*#__PURE__*/forwardRef((props, ref) => {
       theme,
       tooltipVariant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$a);
+    forwardedProps = _objectWithoutProperties(props, _excluded$b);
   const id = propsId !== null && propsId !== void 0 ? propsId : useId();
   if (propsData === undefined || propsData === null) {
     return /*#__PURE__*/React__default.createElement(LoadingBarChart, _extends({
@@ -1390,9 +1391,9 @@ const BarChart = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }));
 });
-BarChart.className = CLASSNAME$4;
-BarChart.defaultProps = DEFAULT_PROPS$4;
-BarChart.displayName = COMPONENT_NAME$4;
+BarChart.className = CLASSNAME$5;
+BarChart.defaultProps = DEFAULT_PROPS$5;
+BarChart.displayName = COMPONENT_NAME$5;
 
 /**
  * Component style.
@@ -1426,10 +1427,10 @@ const StyledDot = styled(DataPoint)`
 }}}
 `;
 
-const _excluded$9 = ["className", "scaleX", "scaleY"];
-const COMPONENT_NAME$3 = 'Dot';
-const CLASSNAME$3 = 'redsift-dot';
-const DEFAULT_PROPS$3 = {
+const _excluded$a = ["className", "scaleX", "scaleY"];
+const COMPONENT_NAME$4 = 'Dot';
+const CLASSNAME$4 = 'redsift-dot';
+const DEFAULT_PROPS$4 = {
   color: monochrome,
   index: 0,
   labelDecorator: datum => {
@@ -1449,7 +1450,7 @@ const Dot = /*#__PURE__*/forwardRef((props, ref) => {
       scaleX,
       scaleY
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$9);
+    forwardedProps = _objectWithoutProperties(props, _excluded$a);
   const isSelectable = role === 'option';
   const isDeselected = isSelectable && propsIsSelected === false;
   return /*#__PURE__*/React__default.createElement(StyledDot, _extends({}, forwardedProps, {
@@ -1463,9 +1464,9 @@ const Dot = /*#__PURE__*/forwardRef((props, ref) => {
     fill: isDeselected ? 'var(--redsift-color-neutral-lightgrey)' : color
   }));
 });
-Dot.className = CLASSNAME$3;
-Dot.defaultProps = DEFAULT_PROPS$3;
-Dot.displayName = COMPONENT_NAME$3;
+Dot.className = CLASSNAME$4;
+Dot.defaultProps = DEFAULT_PROPS$4;
+Dot.displayName = COMPONENT_NAME$4;
 
 /**
  * Component style.
@@ -1481,7 +1482,11 @@ const StyledLegend = styled.ul`
         ` : null;
 }}
 `;
-const StyledLabel = styled.li`
+
+/**
+ * Component style.
+ */
+const StyledLegendItem = styled.li`
   display: flex;
   align-items: center;
   gap: 8px;
@@ -1491,25 +1496,131 @@ const StyledLabel = styled.li`
     height: 16px;
     width: 16px;
     min-width: 16px;
-    background-color: ${_ref2 => {
+    background-color: ${_ref => {
   let {
-    $color
-  } = _ref2;
-  return $color;
+    color
+  } = _ref;
+  return color;
 }};
   }
+
+  ${_ref2 => {
+  let {
+    $clickable
+  } = _ref2;
+  return $clickable ? css`
+          cursor: pointer;
+
+          &:hover,
+          &:focus {
+            outline: none;
+            > div {
+              opacity: 0.7;
+            }
+          }
+
+          &:focus-visible {
+            > div {
+              outline: 4px solid var(--redsift-color-default-primary);
+            }
+          }
+        ` : '';
+}}}
 `;
 
-const _excluded$8 = ["className", "data", "variant", "width"];
+const _excluded$9 = ["className", "color", "data", "id", "total", "variant"];
+const COMPONENT_NAME$3 = 'LegendItem';
+const CLASSNAME$3 = 'redsift-legend-item';
+const DEFAULT_PROPS$3 = {
+  color: monochrome,
+  index: 0
+};
+const LegendItem = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    index,
+    isSelected: propsIsSelected,
+    labelDecorator,
+    onClick,
+    role
+  } = props;
+  const {
+      className,
+      color,
+      data,
+      id: propsId,
+      total,
+      variant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$9);
+  const id = propsId !== null && propsId !== void 0 ? propsId : useId();
+  const text = labelDecorator ? labelDecorator(data) : data.data.key;
+  const isEmpty = data.data.value === 0;
+  const isSelectable = role === 'option';
+  const isSelected = isSelectable && propsIsSelected === true;
+  const isDeselected = isSelectable && propsIsSelected === false;
+  const onKeyDown = event => {
+    if (onClick) {
+      event.stopPropagation();
+      if (event.code === 'Enter' || event.code === 'Space') {
+        event.preventDefault();
+        onClick(data);
+      }
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(StyledLegendItem, _extends({}, forwardedProps, {
+    className: classNames(LegendItem.className, className, `_${index}`, {
+      selected: isSelected,
+      deselected: isDeselected
+    }),
+    color: isDeselected ? 'var(--redsift-color-neutral-lightgrey)' : color,
+    ref: ref,
+    "aria-labelledby": !isEmpty ? `${id}-title` : undefined,
+    "aria-selected": isSelected ? true : isDeselected ? false : undefined,
+    id: id,
+    onClick: onClick ? () => onClick(data) : undefined,
+    onKeyDown: onClick ? e => onKeyDown(e) : undefined,
+    role: role ? role : onClick ? 'button' : undefined,
+    tabIndex: onClick ? 0 : undefined,
+    $clickable: Boolean(onClick)
+  }), /*#__PURE__*/React__default.createElement("div", null), variant === LabelVariant.value ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Number$1, {
+    as: "b",
+    maximumFractionDigits: 2,
+    value: data.data.value,
+    variant: "inherit"
+  }), /*#__PURE__*/React__default.createElement(Text, {
+    variant: "caption"
+  }, text)) : variant === LabelVariant.percent && total ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Number$1, {
+    as: "b",
+    maximumFractionDigits: 2,
+    type: "percent",
+    value: data.data.value / total,
+    variant: "inherit"
+  }), /*#__PURE__*/React__default.createElement(Text, {
+    variant: "caption"
+  }, text)) : /*#__PURE__*/React__default.createElement(Text, {
+    variant: "caption"
+  }, text));
+});
+LegendItem.className = CLASSNAME$3;
+LegendItem.defaultProps = DEFAULT_PROPS$3;
+LegendItem.displayName = COMPONENT_NAME$3;
+
+const _excluded$8 = ["className", "data", "isLegendItemSelected", "labelDecorator", "legendItemRole", "onLegendItemClick", "variant", "width"],
+  _excluded2 = ["color"];
 const COMPONENT_NAME$2 = 'Legend';
 const CLASSNAME$2 = 'redsift-chart-legend';
 const DEFAULT_PROPS$2 = {
+  isLegendItemSelected: () => true,
   variant: LabelVariant.label
 };
 const Legend = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       className,
       data,
+      isLegendItemSelected,
+      labelDecorator,
+      legendItemRole,
+      onLegendItemClick,
       variant,
       width
     } = props,
@@ -1521,31 +1632,25 @@ const Legend = /*#__PURE__*/forwardRef((props, ref) => {
     $width: width
   }), data.map((_ref, index) => {
     let {
-      key,
-      value,
-      color
-    } = _ref;
-    return /*#__PURE__*/React__default.createElement(StyledLabel, {
-      key: `pie-external-label _${index}`,
-      $color: color
-    }, /*#__PURE__*/React__default.createElement("div", null), variant === LabelVariant.value ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Number$1, {
-      as: "b",
-      maximumFractionDigits: 2,
-      value: value,
-      variant: "inherit"
-    }), /*#__PURE__*/React__default.createElement(Text, {
-      variant: "caption"
-    }, key)) : variant === LabelVariant.percent ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Number$1, {
-      as: "b",
-      maximumFractionDigits: 2,
-      type: "percent",
-      value: value / total,
-      variant: "inherit"
-    }), /*#__PURE__*/React__default.createElement(Text, {
-      variant: "caption"
-    }, key)) : /*#__PURE__*/React__default.createElement(Text, {
-      variant: "caption"
-    }, key));
+        color
+      } = _ref,
+      datum = _objectWithoutProperties(_ref, _excluded2);
+    return /*#__PURE__*/React__default.createElement(LegendItem, {
+      data: {
+        data: datum
+      },
+      color: color,
+      total: total,
+      variant: variant,
+      index: index,
+      isSelected: Boolean(isLegendItemSelected({
+        data: datum
+      })),
+      key: `legend-item _${index}`,
+      labelDecorator: labelDecorator,
+      onClick: onLegendItemClick,
+      role: legendItemRole
+    });
   }));
 });
 Legend.className = CLASSNAME$2;
@@ -2191,7 +2296,7 @@ const EmptyScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
   })))));
 });
 
-const _excluded$1 = ["isBrushable", "className", "data", "dotRole", "id", "isDotSelected", "labelDecorator", "labelVariant", "onBrush", "onBrushEnd", "onDotClick", "size", "theme", "tooltipVariant", "variant", "xAxisVariant", "yAxisVariant"];
+const _excluded$1 = ["isBrushable", "className", "data", "dotRole", "id", "isDotSelected", "labelDecorator", "labelVariant", "legendProps", "onBrush", "onBrushEnd", "onDotClick", "size", "theme", "tooltipVariant", "variant", "xAxisVariant", "yAxisVariant"];
 const RenderedScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       isBrushable,
@@ -2202,6 +2307,7 @@ const RenderedScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
       isDotSelected,
       labelDecorator,
       labelVariant,
+      legendProps,
       onBrush,
       onBrushEnd,
       onDotClick,
@@ -2244,7 +2350,7 @@ const RenderedScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
     domain[1] += gap * 0.1;
     return scaleLinear().domain(domain).range([chartHeight, 0]).nice();
   })();
-  const hasCategory = data[0] && data[0].key.length === 3 && data[0].key[2] !== null && data[0].key[2] !== undefined;
+  const hasCategory = data[0] && data[0].key.length >= 3 && data[0].key[2] !== null && data[0].key[2] !== undefined;
   const countsByCategory = hasCategory ? countBy(data) : undefined;
   const colorScale = useColor({
     data: countsByCategory || data,
@@ -2356,13 +2462,13 @@ const RenderedScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
     y: chartHeight,
     tickValues: 8,
     variant: yAxisVariant
-  }))), hasCategory && labelVariant !== ScatterPlotLabelVariant.none ? /*#__PURE__*/React__default.createElement(Legend, {
+  }))), hasCategory && labelVariant !== ScatterPlotLabelVariant.none ? /*#__PURE__*/React__default.createElement(Legend, _extends({
     data: countsByCategory.map(d => _objectSpread2(_objectSpread2({}, d), {}, {
       color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(d.key)
     })),
     variant: labelVariant === ScatterPlotLabelVariant.externalLabelValue ? LabelVariant.value : labelVariant === ScatterPlotLabelVariant.externalLabelPercent ? LabelVariant.percent : LabelVariant.label,
     width: legendWidth.current
-  }) : null);
+  }, legendProps)) : null);
 });
 
 const _excluded = ["className", "data", "dotRole", "emptyComponent", "id", "isDotSelected", "labelVariant", "localeText", "onBrush", "onBrushEnd", "onDotClick", "size", "theme", "tooltipVariant", "variant"];
@@ -2443,5 +2549,5 @@ ScatterPlot.className = CLASSNAME;
 ScatterPlot.defaultProps = DEFAULT_PROPS;
 ScatterPlot.displayName = COMPONENT_NAME;
 
-export { Arc, Arcs, Axis, AxisPosition, AxisVariant, Bar, BarChart, BarOrientation, ChartContainer, ChartSize, ColorTheme, DataPoint, Dot, LabelVariant, Legend, PieChart, PieChartLabelVariant, PieChartVariant, ScatterPlot, ScatterPlotLabelVariant, ScatterPlotVariant, StyledArc, StyledArcs, StyledAxis, StyledBar, StyledBarChart, StyledBarChartEmptyText, StyledChartContainer, StyledChartContainerCaption, StyledChartContainerTitle, StyledDataPoint, StyledDot, StyledLabel, StyledLegend, StyledPieChart, StyledPieChartCenterText, StyledPieChartEmptyText, StyledScatterPlot, StyledScatterPlotEmptyText, TooltipVariant, empty, getColorScale, monochrome, scheme, successDangerScheme, useBrush, useColor, useFormatCategoricalData, useZoom };
+export { Arc, Arcs, Axis, AxisPosition, AxisVariant, Bar, BarChart, BarOrientation, ChartContainer, ChartSize, ColorTheme, DataPoint, Dot, LabelVariant, Legend, PieChart, PieChartLabelVariant, PieChartVariant, ScatterPlot, ScatterPlotLabelVariant, ScatterPlotVariant, StyledArc, StyledArcs, StyledAxis, StyledBar, StyledBarChart, StyledBarChartEmptyText, StyledChartContainer, StyledChartContainerCaption, StyledChartContainerTitle, StyledDataPoint, StyledDot, StyledLegend, StyledPieChart, StyledPieChartCenterText, StyledPieChartEmptyText, StyledScatterPlot, StyledScatterPlotEmptyText, TooltipVariant, empty, getColorScale, monochrome, scheme, successDangerScheme, useBrush, useColor, useFormatCategoricalData, useZoom };
 //# sourceMappingURL=index.js.map