@cloudscape-design/components 3.0.136 → 3.0.137

package/area-chart/chart-container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-container.d.ts","sourceRoot":"","sources":["../../../src/area-chart/chart-container.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAgBrC,UAAU,mBAAmB,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,CAC9D,SAAQ,IAAI,CACV,cAAc,CAAC,CAAC,CAAC,EACjB,QAAQ,GAAG,QAAQ,GAAG,mBAAmB,GAAG,WAAW,GAAG,gBAAgB,GAAG,iBAAiB,GAAG,aAAa,CAC/G;IACD,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IACrB,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;;AAED,wBAA6D;AAE7D,iBAAS,cAAc,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,EAAE,EAC1D,KAAK,EACL,SAAS,EACT,MAAM,EACN,MAAM,EACN,iBAAiB,EACjB,SAAS,EACT,cAAc,EACd,eAAe,EACf,WAAW,EAAE,EACX,cAAc,EACd,cAAc,EACd,oBAAoB,EACpB,gBAAgB,EAChB,wBAAwB,EACxB,wBAAwB,EACxB,wBAAwB,EACxB,6BAA6B,GACzB,GACP,EAAE,mBAAmB,CAAC,CAAC,CAAC,eAmGxB"}
+{"version":3,"file":"chart-container.d.ts","sourceRoot":"","sources":["../../../src/area-chart/chart-container.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAgBrC,UAAU,mBAAmB,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,CAC9D,SAAQ,IAAI,CACV,cAAc,CAAC,CAAC,CAAC,EACjB,QAAQ,GAAG,QAAQ,GAAG,mBAAmB,GAAG,WAAW,GAAG,gBAAgB,GAAG,iBAAiB,GAAG,aAAa,CAC/G;IACD,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IACrB,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;;AAED,wBAA6D;AAE7D,iBAAS,cAAc,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,EAAE,EAC1D,KAAK,EACL,SAAS,EACT,MAAM,EACN,MAAM,EACN,iBAAiB,EACjB,SAAS,EACT,cAAc,EACd,eAAe,EACf,WAAW,EAAE,EACX,cAAc,EACd,cAAc,EACd,oBAAoB,EACpB,gBAAgB,EAChB,wBAAwB,EACxB,wBAAwB,EACxB,wBAAwB,EACxB,6BAA6B,GACzB,GACP,EAAE,mBAAmB,CAAC,CAAC,CAAC,eAsGxB"}

package/area-chart/chart-container.js

@@ -38,12 +38,13 @@ function ChartContainer(_a) {
     });
     var highlightedPointRef = useRef(null);
     var mergedRef = useMergeRefs(containerWidthRef, model.refs.container);
+    var isPointHighlighted = model.interactions.get().highlightedPoint !== null;
     return (React.createElement("div", { className: styles['chart-container'], ref: mergedRef },
         React.createElement(AxisLabel, { axis: "y", position: "left", title: yTitle }),
         React.createElement("div", { className: styles['chart-container__horizontal'] },
             React.createElement(LabelsMeasure, { scale: model.computed.yScale, ticks: model.computed.yTicks, tickFormatter: yTickFormatter, autoWidth: setLeftLabelsWidth }),
             React.createElement("div", { className: styles['chart-container__vertical'] },
-                React.createElement(ChartPlot, { ref: model.refs.plot, width: model.width, height: model.height, offsetBottom: bottomLabelsHeight, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescription: ariaDescription, ariaRoleDescription: chartAriaRoleDescription, activeElementKey: !(highlightDetails === null || highlightDetails === void 0 ? void 0 : highlightDetails.isPopoverPinned) && (highlightDetails === null || highlightDetails === void 0 ? void 0 : highlightDetails.activeLabel), activeElementRef: highlightedPointRef, isClickable: !(highlightDetails === null || highlightDetails === void 0 ? void 0 : highlightDetails.isPopoverPinned), onMouseMove: model.handlers.onSVGMouseMove, onMouseOut: model.handlers.onSVGMouseOut, onMouseDown: model.handlers.onSVGMouseDown, onKeyDown: model.handlers.onSVGKeyDown, onFocus: model.handlers.onSVGFocus, onBlur: model.handlers.onSVGBlur },
+                React.createElement(ChartPlot, { ref: model.refs.plot, width: model.width, height: model.height, offsetBottom: bottomLabelsHeight, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescription: ariaDescription, ariaRoleDescription: chartAriaRoleDescription, activeElementKey: !(highlightDetails === null || highlightDetails === void 0 ? void 0 : highlightDetails.isPopoverPinned) && (highlightDetails === null || highlightDetails === void 0 ? void 0 : highlightDetails.activeLabel), activeElementRef: isPointHighlighted ? highlightedPointRef : model.refs.verticalMarker, activeElementFocusOffset: isPointHighlighted ? 3 : { x: 8, y: 0 }, isClickable: !(highlightDetails === null || highlightDetails === void 0 ? void 0 : highlightDetails.isPopoverPinned), onMouseMove: model.handlers.onSVGMouseMove, onMouseOut: model.handlers.onSVGMouseOut, onMouseDown: model.handlers.onSVGMouseDown, onKeyDown: model.handlers.onSVGKeyDown, onFocus: model.handlers.onSVGFocus, onBlur: model.handlers.onSVGBlur },
                     React.createElement(LeftLabels, { width: model.width, height: model.height, scale: model.computed.yScale, ticks: model.computed.yTicks, tickFormatter: yTickFormatter, title: yTitle, ariaRoleDescription: yAxisAriaRoleDescription }),
                     React.createElement(AreaDataSeries, { model: model }),
                     React.createElement(BottomLabels, { width: model.width, height: model.height, scale: model.computed.xScale, ticks: model.computed.xTicks, tickFormatter: xTickFormatter, title: xTitle, ariaRoleDescription: xAxisAriaRoleDescription, autoHeight: setBottomLabelsHeight, offsetLeft: leftLabelsWidth + BOTTOM_LABELS_OFFSET, offsetRight: BOTTOM_LABELS_OFFSET }),

package/area-chart/chart-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-container.js","sourceRoot":"","sources":["../../../src/area-chart/chart-container.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState, useEffect, memo, useRef } from 'react';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\n\nimport ChartPlot from '../internal/components/chart-plot';\nimport AxisLabel from '../internal/components/cartesian-chart/axis-label';\nimport LabelsMeasure from '../internal/components/cartesian-chart/labels-measure';\nimport LeftLabels from '../internal/components/cartesian-chart/left-labels';\nimport BottomLabels from '../internal/components/cartesian-chart/bottom-labels';\nimport EmphasizedBaseline from '../internal/components/cartesian-chart/emphasized-baseline';\nimport { AreaChartProps } from './interfaces';\nimport { ChartModel } from './model';\nimport AreaDataSeries from './elements/data-series';\nimport AreaChartPopover from './elements/chart-popover';\nimport AreaHighlightedPoint from './elements/highlighted-point';\nimport AreaVerticalMarker from './elements/vertical-marker';\n\nimport styles from './styles.css.js';\nimport useHighlightDetails from './elements/use-highlight-details';\nimport useContainerWidth from '../internal/utils/use-container-width';\n\nconst DEFAULT_CHART_WIDTH = 500;\nconst LEFT_LABELS_MARGIN = 16;\nconst BOTTOM_LABELS_OFFSET = 12;\n\ntype TickFormatter = undefined | ((value: AreaChartProps.DataTypes) => string);\n\ninterface ChartContainerProps<T extends AreaChartProps.DataTypes>\n  extends Pick<\n    AreaChartProps<T>,\n    'xTitle' | 'yTitle' | 'detailPopoverSize' | 'ariaLabel' | 'ariaLabelledby' | 'ariaDescription' | 'i18nStrings'\n  > {\n  model: ChartModel<T>;\n  autoWidth: (value: number) => void;\n}\n\nexport default memo(ChartContainer) as typeof ChartContainer;\n\nfunction ChartContainer<T extends AreaChartProps.DataTypes>({\n  model,\n  autoWidth,\n  xTitle,\n  yTitle,\n  detailPopoverSize,\n  ariaLabel,\n  ariaLabelledby,\n  ariaDescription,\n  i18nStrings: {\n    xTickFormatter,\n    yTickFormatter,\n    detailTotalFormatter,\n    detailTotalLabel,\n    chartAriaRoleDescription,\n    xAxisAriaRoleDescription,\n    yAxisAriaRoleDescription,\n    detailPopoverDismissAriaLabel,\n  } = {},\n}: ChartContainerProps<T>) {\n  const [leftLabelsWidth, setLeftLabelsWidth] = useState(0);\n  const [bottomLabelsHeight, setBottomLabelsHeight] = useState(0);\n  const [containerWidth, containerWidthRef] = useContainerWidth(DEFAULT_CHART_WIDTH);\n\n  // Calculate the width of the plot area and tell it to the parent.\n  const plotWidth = Math.max(0, containerWidth - leftLabelsWidth - LEFT_LABELS_MARGIN);\n  useEffect(() => {\n    autoWidth(plotWidth);\n  }, [autoWidth, plotWidth]);\n\n  const highlightDetails = useHighlightDetails({\n    model,\n    xTickFormatter,\n    yTickFormatter,\n    detailTotalFormatter,\n    detailTotalLabel,\n  });\n\n  const highlightedPointRef = useRef<SVGGElement>(null);\n\n  const mergedRef = useMergeRefs(containerWidthRef, model.refs.container);\n\n  return (\n    <div className={styles['chart-container']} ref={mergedRef}>\n      <AxisLabel axis=\"y\" position=\"left\" title={yTitle} />\n\n      <div className={styles['chart-container__horizontal']}>\n        <LabelsMeasure\n          scale={model.computed.yScale}\n          ticks={model.computed.yTicks}\n          tickFormatter={yTickFormatter as TickFormatter}\n          autoWidth={setLeftLabelsWidth}\n        />\n\n        <div className={styles['chart-container__vertical']}>\n          <ChartPlot\n            ref={model.refs.plot}\n            width={model.width}\n            height={model.height}\n            offsetBottom={bottomLabelsHeight}\n            ariaLabel={ariaLabel}\n            ariaLabelledby={ariaLabelledby}\n            ariaDescription={ariaDescription}\n            ariaRoleDescription={chartAriaRoleDescription}\n            activeElementKey={!highlightDetails?.isPopoverPinned && highlightDetails?.activeLabel}\n            activeElementRef={highlightedPointRef}\n            isClickable={!highlightDetails?.isPopoverPinned}\n            onMouseMove={model.handlers.onSVGMouseMove}\n            onMouseOut={model.handlers.onSVGMouseOut}\n            onMouseDown={model.handlers.onSVGMouseDown}\n            onKeyDown={model.handlers.onSVGKeyDown}\n            onFocus={model.handlers.onSVGFocus}\n            onBlur={model.handlers.onSVGBlur}\n          >\n            <LeftLabels\n              width={model.width}\n              height={model.height}\n              scale={model.computed.yScale}\n              ticks={model.computed.yTicks}\n              tickFormatter={yTickFormatter}\n              title={yTitle}\n              ariaRoleDescription={yAxisAriaRoleDescription}\n            />\n\n            <AreaDataSeries model={model} />\n\n            <BottomLabels\n              width={model.width}\n              height={model.height}\n              scale={model.computed.xScale}\n              ticks={model.computed.xTicks}\n              tickFormatter={xTickFormatter as TickFormatter}\n              title={xTitle}\n              ariaRoleDescription={xAxisAriaRoleDescription}\n              autoHeight={setBottomLabelsHeight}\n              offsetLeft={leftLabelsWidth + BOTTOM_LABELS_OFFSET}\n              offsetRight={BOTTOM_LABELS_OFFSET}\n            />\n\n            <EmphasizedBaseline width={model.width} height={model.height} scale={model.computed.yScale} />\n\n            <AreaVerticalMarker model={model} />\n\n            <AreaHighlightedPoint ref={highlightedPointRef} model={model} ariaLabel={highlightDetails?.activeLabel} />\n          </ChartPlot>\n\n          <AxisLabel axis=\"x\" position=\"bottom\" title={xTitle} />\n        </div>\n\n        <AreaChartPopover\n          model={model}\n          highlightDetails={highlightDetails}\n          dismissAriaLabel={detailPopoverDismissAriaLabel}\n          size={detailPopoverSize}\n        />\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"chart-container.js","sourceRoot":"","sources":["../../../src/area-chart/chart-container.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState, useEffect, memo, useRef } from 'react';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\n\nimport ChartPlot from '../internal/components/chart-plot';\nimport AxisLabel from '../internal/components/cartesian-chart/axis-label';\nimport LabelsMeasure from '../internal/components/cartesian-chart/labels-measure';\nimport LeftLabels from '../internal/components/cartesian-chart/left-labels';\nimport BottomLabels from '../internal/components/cartesian-chart/bottom-labels';\nimport EmphasizedBaseline from '../internal/components/cartesian-chart/emphasized-baseline';\nimport { AreaChartProps } from './interfaces';\nimport { ChartModel } from './model';\nimport AreaDataSeries from './elements/data-series';\nimport AreaChartPopover from './elements/chart-popover';\nimport AreaHighlightedPoint from './elements/highlighted-point';\nimport AreaVerticalMarker from './elements/vertical-marker';\n\nimport styles from './styles.css.js';\nimport useHighlightDetails from './elements/use-highlight-details';\nimport useContainerWidth from '../internal/utils/use-container-width';\n\nconst DEFAULT_CHART_WIDTH = 500;\nconst LEFT_LABELS_MARGIN = 16;\nconst BOTTOM_LABELS_OFFSET = 12;\n\ntype TickFormatter = undefined | ((value: AreaChartProps.DataTypes) => string);\n\ninterface ChartContainerProps<T extends AreaChartProps.DataTypes>\n  extends Pick<\n    AreaChartProps<T>,\n    'xTitle' | 'yTitle' | 'detailPopoverSize' | 'ariaLabel' | 'ariaLabelledby' | 'ariaDescription' | 'i18nStrings'\n  > {\n  model: ChartModel<T>;\n  autoWidth: (value: number) => void;\n}\n\nexport default memo(ChartContainer) as typeof ChartContainer;\n\nfunction ChartContainer<T extends AreaChartProps.DataTypes>({\n  model,\n  autoWidth,\n  xTitle,\n  yTitle,\n  detailPopoverSize,\n  ariaLabel,\n  ariaLabelledby,\n  ariaDescription,\n  i18nStrings: {\n    xTickFormatter,\n    yTickFormatter,\n    detailTotalFormatter,\n    detailTotalLabel,\n    chartAriaRoleDescription,\n    xAxisAriaRoleDescription,\n    yAxisAriaRoleDescription,\n    detailPopoverDismissAriaLabel,\n  } = {},\n}: ChartContainerProps<T>) {\n  const [leftLabelsWidth, setLeftLabelsWidth] = useState(0);\n  const [bottomLabelsHeight, setBottomLabelsHeight] = useState(0);\n  const [containerWidth, containerWidthRef] = useContainerWidth(DEFAULT_CHART_WIDTH);\n\n  // Calculate the width of the plot area and tell it to the parent.\n  const plotWidth = Math.max(0, containerWidth - leftLabelsWidth - LEFT_LABELS_MARGIN);\n  useEffect(() => {\n    autoWidth(plotWidth);\n  }, [autoWidth, plotWidth]);\n\n  const highlightDetails = useHighlightDetails({\n    model,\n    xTickFormatter,\n    yTickFormatter,\n    detailTotalFormatter,\n    detailTotalLabel,\n  });\n\n  const highlightedPointRef = useRef<SVGGElement>(null);\n\n  const mergedRef = useMergeRefs(containerWidthRef, model.refs.container);\n\n  const isPointHighlighted = model.interactions.get().highlightedPoint !== null;\n\n  return (\n    <div className={styles['chart-container']} ref={mergedRef}>\n      <AxisLabel axis=\"y\" position=\"left\" title={yTitle} />\n\n      <div className={styles['chart-container__horizontal']}>\n        <LabelsMeasure\n          scale={model.computed.yScale}\n          ticks={model.computed.yTicks}\n          tickFormatter={yTickFormatter as TickFormatter}\n          autoWidth={setLeftLabelsWidth}\n        />\n\n        <div className={styles['chart-container__vertical']}>\n          <ChartPlot\n            ref={model.refs.plot}\n            width={model.width}\n            height={model.height}\n            offsetBottom={bottomLabelsHeight}\n            ariaLabel={ariaLabel}\n            ariaLabelledby={ariaLabelledby}\n            ariaDescription={ariaDescription}\n            ariaRoleDescription={chartAriaRoleDescription}\n            activeElementKey={!highlightDetails?.isPopoverPinned && highlightDetails?.activeLabel}\n            activeElementRef={isPointHighlighted ? highlightedPointRef : model.refs.verticalMarker}\n            activeElementFocusOffset={isPointHighlighted ? 3 : { x: 8, y: 0 }}\n            isClickable={!highlightDetails?.isPopoverPinned}\n            onMouseMove={model.handlers.onSVGMouseMove}\n            onMouseOut={model.handlers.onSVGMouseOut}\n            onMouseDown={model.handlers.onSVGMouseDown}\n            onKeyDown={model.handlers.onSVGKeyDown}\n            onFocus={model.handlers.onSVGFocus}\n            onBlur={model.handlers.onSVGBlur}\n          >\n            <LeftLabels\n              width={model.width}\n              height={model.height}\n              scale={model.computed.yScale}\n              ticks={model.computed.yTicks}\n              tickFormatter={yTickFormatter}\n              title={yTitle}\n              ariaRoleDescription={yAxisAriaRoleDescription}\n            />\n\n            <AreaDataSeries model={model} />\n\n            <BottomLabels\n              width={model.width}\n              height={model.height}\n              scale={model.computed.xScale}\n              ticks={model.computed.xTicks}\n              tickFormatter={xTickFormatter as TickFormatter}\n              title={xTitle}\n              ariaRoleDescription={xAxisAriaRoleDescription}\n              autoHeight={setBottomLabelsHeight}\n              offsetLeft={leftLabelsWidth + BOTTOM_LABELS_OFFSET}\n              offsetRight={BOTTOM_LABELS_OFFSET}\n            />\n\n            <EmphasizedBaseline width={model.width} height={model.height} scale={model.computed.yScale} />\n\n            <AreaVerticalMarker model={model} />\n\n            <AreaHighlightedPoint ref={highlightedPointRef} model={model} ariaLabel={highlightDetails?.activeLabel} />\n          </ChartPlot>\n\n          <AxisLabel axis=\"x\" position=\"bottom\" title={xTitle} />\n        </div>\n\n        <AreaChartPopover\n          model={model}\n          highlightDetails={highlightDetails}\n          dismissAriaLabel={detailPopoverDismissAriaLabel}\n          size={detailPopoverSize}\n        />\n      </div>\n    </div>\n  );\n}\n"]}

package/area-chart/model/interactions-store.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interactions-store.d.ts","sourceRoot":"","sources":["../../../../src/area-chart/model/interactions-store.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,UAAU,MAAM,eAAe,CAAC;AAUvC,MAAM,CAAC,OAAO,OAAO,iBAAiB,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,CAAE,SAAQ,UAAU,CAC3F,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAChC;IACC,MAAM,EAAE,SAAS,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5C,IAAI,EAAE,UAAU,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;gBAE9B,MAAM,EAAE,SAAS,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,UAAU,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;IAOlG,cAAc,CAAC,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC;IAU7C,UAAU,CAAC,MAAM,EAAE,SAAS,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;IASrD,mBAAmB;IAenB,eAAe,CAAC,CAAC,EAAE,IAAI,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IAQlD,cAAc;IAQd,sBAAsB;IAOtB,UAAU;IAIV,UAAU;IAIV,YAAY;IAIZ,gBAAgB;IAIhB,oBAAoB,CAAC,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC;CAKlF"}
+{"version":3,"file":"interactions-store.d.ts","sourceRoot":"","sources":["../../../../src/area-chart/model/interactions-store.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,UAAU,MAAM,eAAe,CAAC;AAUvC,MAAM,CAAC,OAAO,OAAO,iBAAiB,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,CAAE,SAAQ,UAAU,CAC3F,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAChC;IACC,MAAM,EAAE,SAAS,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5C,IAAI,EAAE,UAAU,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;gBAE9B,MAAM,EAAE,SAAS,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,UAAU,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;IAOlG,cAAc,CAAC,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC;IAU7C,UAAU,CAAC,MAAM,EAAE,SAAS,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;IAUrD,mBAAmB;IAenB,eAAe,CAAC,CAAC,EAAE,IAAI,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IAQlD,cAAc;IAQd,sBAAsB;IAOtB,UAAU;IAIV,UAAU;IAIV,YAAY;IAIZ,gBAAgB;IAIhB,oBAAoB,CAAC,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC;CAKlF"}

package/area-chart/model/interactions-store.js

@@ -20,7 +20,7 @@ var InteractionsStore = /** @class */ (function (_super) {
         this.set(function (state) { return (__assign(__assign({}, state), { highlightedX: _this.plot.xy[point.index.x], highlightedPoint: point, highlightedSeries: _this.series[point.index.s], legendSeries: _this.series[point.index.s] })); });
     };
     InteractionsStore.prototype.highlightX = function (points) {
-        this.set(function (state) { return (__assign(__assign({}, state), { highlightedX: points, highlightedPoint: null, highlightedSeries: null })); });
+        this.set(function (state) { return (__assign(__assign({}, state), { highlightedX: points, highlightedPoint: null, highlightedSeries: null, legendSeries: null })); });
     };
     InteractionsStore.prototype.highlightFirstPoint = function () {
         var _this = this;

package/area-chart/model/interactions-store.js.map

@@ -1 +1 @@
-{"version":3,"file":"interactions-store.js","sourceRoot":"","sources":["../../../../src/area-chart/model/interactions-store.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ChartModel } from './index';\nimport { AreaChartProps } from '../interfaces';\n\nimport AsyncStore from './async-store';\n\nconst initialState = Object.freeze({\n  highlightedX: null,\n  highlightedPoint: null,\n  highlightedSeries: null,\n  legendSeries: null,\n  isPopoverPinned: false,\n});\n\nexport default class InteractionsStore<T extends AreaChartProps.DataTypes> extends AsyncStore<\n  ChartModel.InteractionsState<T>\n> {\n  series: readonly AreaChartProps.Series<T>[];\n  plot: ChartModel.ComputedProps<T>['plot'];\n\n  constructor(series: readonly AreaChartProps.Series<T>[], plot: ChartModel.ComputedProps<T>['plot']) {\n    super(initialState);\n\n    this.series = series;\n    this.plot = plot;\n  }\n\n  highlightPoint(point: ChartModel.PlotPoint<T>) {\n    this.set(state => ({\n      ...state,\n      highlightedX: this.plot.xy[point.index.x],\n      highlightedPoint: point,\n      highlightedSeries: this.series[point.index.s],\n      legendSeries: this.series[point.index.s],\n    }));\n  }\n\n  highlightX(points: readonly ChartModel.PlotPoint<T>[]) {\n    this.set(state => ({\n      ...state,\n      highlightedX: points,\n      highlightedPoint: null,\n      highlightedSeries: null,\n    }));\n  }\n\n  highlightFirstPoint() {\n    this.set(state => {\n      const series = state.legendSeries || state.highlightedSeries;\n      const firstSeriesPoint = series && this._getFirstSeriesPoint(series);\n      const point = state.highlightedPoint || firstSeriesPoint || this.plot.sx[0][0];\n      return {\n        ...state,\n        highlightedX: this.plot.xy[point.index.x],\n        highlightedPoint: point,\n        highlightedSeries: this.series[point.index.s],\n        legendSeries: this.series[point.index.s],\n      };\n    });\n  }\n\n  highlightSeries(s: null | AreaChartProps.Series<T>) {\n    this.set(state => ({\n      ...state,\n      highlightedSeries: s,\n      legendSeries: s,\n    }));\n  }\n\n  clearHighlight() {\n    this.set(state => ({\n      ...state,\n      highlightedX: null,\n      highlightedPoint: null,\n      highlightedSeries: null,\n    }));\n  }\n  clearHighlightedLegend() {\n    this.set(state => ({\n      ...state,\n      legendSeries: null,\n    }));\n  }\n\n  clearState() {\n    this.set(() => initialState);\n  }\n\n  pinPopover() {\n    this.set(state => ({ ...state, isPopoverPinned: true }));\n  }\n\n  unpinPopover() {\n    this.set(state => ({ ...state, isPopoverPinned: false }));\n  }\n\n  togglePopoverPin() {\n    this.set(state => ({ ...state, isPopoverPinned: !state.isPopoverPinned }));\n  }\n\n  _getFirstSeriesPoint(s: AreaChartProps.Series<T>): null | ChartModel.PlotPoint<T> {\n    const seriesIndex = this.series.indexOf(s);\n    const [firstSeriesPoint] = this.plot.sx[seriesIndex] || [];\n    return firstSeriesPoint || null;\n  }\n}\n"]}
+{"version":3,"file":"interactions-store.js","sourceRoot":"","sources":["../../../../src/area-chart/model/interactions-store.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ChartModel } from './index';\nimport { AreaChartProps } from '../interfaces';\n\nimport AsyncStore from './async-store';\n\nconst initialState = Object.freeze({\n  highlightedX: null,\n  highlightedPoint: null,\n  highlightedSeries: null,\n  legendSeries: null,\n  isPopoverPinned: false,\n});\n\nexport default class InteractionsStore<T extends AreaChartProps.DataTypes> extends AsyncStore<\n  ChartModel.InteractionsState<T>\n> {\n  series: readonly AreaChartProps.Series<T>[];\n  plot: ChartModel.ComputedProps<T>['plot'];\n\n  constructor(series: readonly AreaChartProps.Series<T>[], plot: ChartModel.ComputedProps<T>['plot']) {\n    super(initialState);\n\n    this.series = series;\n    this.plot = plot;\n  }\n\n  highlightPoint(point: ChartModel.PlotPoint<T>) {\n    this.set(state => ({\n      ...state,\n      highlightedX: this.plot.xy[point.index.x],\n      highlightedPoint: point,\n      highlightedSeries: this.series[point.index.s],\n      legendSeries: this.series[point.index.s],\n    }));\n  }\n\n  highlightX(points: readonly ChartModel.PlotPoint<T>[]) {\n    this.set(state => ({\n      ...state,\n      highlightedX: points,\n      highlightedPoint: null,\n      highlightedSeries: null,\n      legendSeries: null,\n    }));\n  }\n\n  highlightFirstPoint() {\n    this.set(state => {\n      const series = state.legendSeries || state.highlightedSeries;\n      const firstSeriesPoint = series && this._getFirstSeriesPoint(series);\n      const point = state.highlightedPoint || firstSeriesPoint || this.plot.sx[0][0];\n      return {\n        ...state,\n        highlightedX: this.plot.xy[point.index.x],\n        highlightedPoint: point,\n        highlightedSeries: this.series[point.index.s],\n        legendSeries: this.series[point.index.s],\n      };\n    });\n  }\n\n  highlightSeries(s: null | AreaChartProps.Series<T>) {\n    this.set(state => ({\n      ...state,\n      highlightedSeries: s,\n      legendSeries: s,\n    }));\n  }\n\n  clearHighlight() {\n    this.set(state => ({\n      ...state,\n      highlightedX: null,\n      highlightedPoint: null,\n      highlightedSeries: null,\n    }));\n  }\n  clearHighlightedLegend() {\n    this.set(state => ({\n      ...state,\n      legendSeries: null,\n    }));\n  }\n\n  clearState() {\n    this.set(() => initialState);\n  }\n\n  pinPopover() {\n    this.set(state => ({ ...state, isPopoverPinned: true }));\n  }\n\n  unpinPopover() {\n    this.set(state => ({ ...state, isPopoverPinned: false }));\n  }\n\n  togglePopoverPin() {\n    this.set(state => ({ ...state, isPopoverPinned: !state.isPopoverPinned }));\n  }\n\n  _getFirstSeriesPoint(s: AreaChartProps.Series<T>): null | ChartModel.PlotPoint<T> {\n    const seriesIndex = this.series.indexOf(s);\n    const [firstSeriesPoint] = this.plot.sx[seriesIndex] || [];\n    return firstSeriesPoint || null;\n  }\n}\n"]}

package/area-chart/model/use-chart-model.d.ts

@@ -1,7 +1,7 @@
 import { AreaChartProps } from '../interfaces';
 import { XDomain, XScaleType, YDomain, YScaleType } from '../../internal/components/cartesian-chart/interfaces';
 import { ChartModel } from './index';
-interface UseChartModelProps<T extends AreaChartProps.DataTypes> {
+export interface UseChartModelProps<T extends AreaChartProps.DataTypes> {
     externalSeries: readonly AreaChartProps.Series<T>[];
     visibleSeries: readonly AreaChartProps.Series<T>[];
     setVisibleSeries: (series: readonly AreaChartProps.Series<T>[]) => void;
@@ -15,5 +15,4 @@ interface UseChartModelProps<T extends AreaChartProps.DataTypes> {
     width: number;
 }
 export default function useChartModel<T extends AreaChartProps.DataTypes>({ externalSeries: allSeries, visibleSeries: series, setVisibleSeries, highlightedSeries, setHighlightedSeries, xDomain, yDomain, xScaleType, yScaleType, height, width, }: UseChartModelProps<T>): ChartModel<T>;
-export {};
 //# sourceMappingURL=use-chart-model.d.ts.map

package/area-chart/model/use-chart-model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-chart-model.d.ts","sourceRoot":"","sources":["../../../../src/area-chart/model/use-chart-model.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAM/C,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,sDAAsD,CAAC;AAMhH,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAOrC,UAAU,kBAAkB,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS;IAC7D,cAAc,EAAE,SAAS,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACpD,aAAa,EAAE,SAAS,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACnD,gBAAgB,EAAE,CAAC,MAAM,EAAE,SAAS,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC;IACxE,iBAAiB,EAAE,IAAI,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IACnD,oBAAoB,EAAE,CAAC,MAAM,EAAE,IAAI,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACxE,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,UAAU,CAAC;IACvB,UAAU,EAAE,UAAU,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAGD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,EAAE,EACxE,cAAc,EAAE,SAAS,EACzB,aAAa,EAAE,MAAM,EACrB,gBAAgB,EAChB,iBAAiB,EACjB,oBAAoB,EACpB,OAAO,EACP,OAAO,EACP,UAAU,EACV,UAAU,EACV,MAAM,EACN,KAAK,GACN,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAkPvC"}
+{"version":3,"file":"use-chart-model.d.ts","sourceRoot":"","sources":["../../../../src/area-chart/model/use-chart-model.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAM/C,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,sDAAsD,CAAC;AAMhH,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAOrC,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS;IACpE,cAAc,EAAE,SAAS,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACpD,aAAa,EAAE,SAAS,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACnD,gBAAgB,EAAE,CAAC,MAAM,EAAE,SAAS,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC;IACxE,iBAAiB,EAAE,IAAI,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IACnD,oBAAoB,EAAE,CAAC,MAAM,EAAE,IAAI,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACxE,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,UAAU,CAAC;IACvB,UAAU,EAAE,UAAU,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAGD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,EAAE,EACxE,cAAc,EAAE,SAAS,EACzB,aAAa,EAAE,MAAM,EACrB,gBAAgB,EAChB,iBAAiB,EACjB,oBAAoB,EACpB,OAAO,EACP,OAAO,EACP,UAAU,EACV,UAAU,EACV,MAAM,EACN,KAAK,GACN,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAyRvC"}

package/area-chart/model/use-chart-model.js

@@ -31,6 +31,7 @@ export default function useChartModel(_a) {
         });
         // A store for chart interactions that don't require plot recomputation.
         var interactions = new InteractionsStore(series, computed.plot);
+        var containsMultipleSeries = interactions.series.length > 1;
         // A series decorator to provide extra props such as color and marker type.
         var getInternalSeries = createSeriesDecorator(allSeries);
         // A Callback for svg mouseover to hover the plot points.
@@ -79,6 +80,19 @@ export default function useChartModel(_a) {
             interactions.togglePopoverPin();
             event.preventDefault();
         };
+        var moveWithinXAxis = function (direction) {
+            if (interactions.get().highlightedPoint) {
+                return moveWithinSeries(direction);
+            }
+            else if (containsMultipleSeries) {
+                var highlightedX = interactions.get().highlightedX;
+                if (highlightedX) {
+                    var currentXIndex = highlightedX[0].index.x;
+                    var nextXIndex = circleIndex(currentXIndex + direction, [0, interactions.plot.xy.length - 1]);
+                    interactions.highlightX(interactions.plot.xy[nextXIndex]);
+                }
+            }
+        };
         // A helper function to highlight the next or previous point within selected series.
         var moveWithinSeries = function (direction) {
             // Can only use motion when a particular point is highlighted.
@@ -93,19 +107,33 @@ export default function useChartModel(_a) {
             // Highlight the next point using x:s grouped data.
             interactions.highlightPoint(interactions.plot.xs[xIndex][sIndex]);
         };
-        // A helper function to highlight the next or previous point withing selected column.
+        // A helper function to highlight the next or previous point within the selected column.
         var moveBetweenSeries = function (direction) {
-            // Can only use motion when a particular point is highlighted.
             var point = interactions.get().highlightedPoint;
             if (!point) {
+                var highlightedX = interactions.get().highlightedX;
+                if (highlightedX) {
+                    var xIndex_1 = highlightedX[0].index.x;
+                    var points = interactions.plot.xy[xIndex_1];
+                    var yIndex = direction === 1 ? 0 : points.length - 1;
+                    interactions.highlightPoint(points[yIndex]);
+                }
                 return;
             }
             // Take the index of the currently highlighted column.
             var xIndex = point.index.x;
-            // Take the incremented(circularly) y-index of the currently highlighted point.
-            var yIndex = circleIndex(point.index.y + direction, [0, interactions.plot.xy[xIndex].length - 1]);
-            // Highlight the next point using x:y grouped data.
-            interactions.highlightPoint(interactions.plot.xy[xIndex][yIndex]);
+            var currentYIndex = point.index.y;
+            if (containsMultipleSeries &&
+                ((currentYIndex === 0 && direction === -1) ||
+                    (currentYIndex === interactions.plot.xy[xIndex].length - 1 && direction === 1))) {
+                interactions.highlightX(interactions.plot.xy[xIndex]);
+            }
+            else {
+                // Take the incremented(circularly) y-index of the currently highlighted point.
+                var nextYIndex = circleIndex(currentYIndex + direction, [0, interactions.plot.xy[xIndex].length - 1]);
+                // Highlight the next point using x:y grouped data.
+                interactions.highlightPoint(interactions.plot.xy[xIndex][nextYIndex]);
+            }
         };
         // A callback for svg keydown to enable motions and popover pin with the keyboard.
         var onSVGKeyDown = function (event) {
@@ -130,19 +158,27 @@ export default function useChartModel(_a) {
             }
             // Move left/right.
             else if (keyCode === KeyCode.left || keyCode === KeyCode.right) {
-                moveWithinSeries(keyCode === KeyCode.right ? 1 : -1);
+                moveWithinXAxis(keyCode === KeyCode.right ? 1 : -1);
             }
             // Pin popover.
             else if (keyCode === KeyCode.enter || keyCode === KeyCode.space) {
                 interactions.pinPopover();
             }
         };
+        var highlightFirstX = function () {
+            interactions.highlightX(interactions.plot.xy[0]);
+        };
         // A callback for svg focus to highlight series.
         var onSVGFocus = function (_event, trigger) {
             // When focus is caused by a click event nothing is expected as clicks are handled separately.
-            // Otherwise, select the first series point.
             if (trigger === 'keyboard') {
-                interactions.highlightFirstPoint();
+                var _a = interactions.get(), highlightedX = _a.highlightedX, highlightedPoint = _a.highlightedPoint, highlightedSeries_1 = _a.highlightedSeries, legendSeries = _a.legendSeries;
+                if (containsMultipleSeries && !highlightedX && !highlightedPoint && !highlightedSeries_1 && !legendSeries) {
+                    highlightFirstX();
+                }
+                else if (!highlightedX) {
+                    interactions.highlightFirstPoint();
+                }
             }
         };
         // A callback for svg blur to clear all highlights unless the popover is pinned.
@@ -165,7 +201,7 @@ export default function useChartModel(_a) {
             if (!outsideClick) {
                 // The delay is needed to bypass focus events caused by click or keypress needed to unpin the popover.
                 setTimeout(function () {
-                    if (interactions.get().highlightedPoint) {
+                    if (interactions.get().highlightedPoint || interactions.get().highlightedX) {
                         plotRef.current.focusApplication();
                     }
                     else {

package/area-chart/model/use-chart-model.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-chart-model.js","sourceRoot":"","sources":["../../../../src/area-chart/model/use-chart-model.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { AreaChartProps } from '../interfaces';\nimport React, { useEffect, useMemo, useRef } from 'react';\nimport { findClosest, circleIndex } from './utils';\n\nimport { nodeContains } from '../../internal/utils/dom';\nimport { KeyCode } from '../../internal/keycode';\nimport { XDomain, XScaleType, YDomain, YScaleType } from '../../internal/components/cartesian-chart/interfaces';\nimport { useReaction } from './async-store';\nimport computeChartProps from './compute-chart-props';\nimport createSeriesDecorator from './create-series-decorator';\nimport InteractionsStore from './interactions-store';\nimport { useStableEventHandler } from '../../internal/hooks/use-stable-event-handler';\nimport { ChartModel } from './index';\nimport { ChartPlotRef } from '../../internal/components/chart-plot';\nimport { throttle } from '../../internal/utils/throttle';\n\nconst MAX_HOVER_MARGIN = 6;\nconst SVG_HOVER_THROTTLE = 25;\n\ninterface UseChartModelProps<T extends AreaChartProps.DataTypes> {\n  externalSeries: readonly AreaChartProps.Series<T>[];\n  visibleSeries: readonly AreaChartProps.Series<T>[];\n  setVisibleSeries: (series: readonly AreaChartProps.Series<T>[]) => void;\n  highlightedSeries: null | AreaChartProps.Series<T>;\n  setHighlightedSeries: (series: null | AreaChartProps.Series<T>) => void;\n  xDomain?: XDomain<T>;\n  yDomain?: YDomain;\n  xScaleType: XScaleType;\n  yScaleType: YScaleType;\n  height: number;\n  width: number;\n}\n\n// Represents the core the chart logic, including the model of all allowed user interactions.\nexport default function useChartModel<T extends AreaChartProps.DataTypes>({\n  externalSeries: allSeries,\n  visibleSeries: series,\n  setVisibleSeries,\n  highlightedSeries,\n  setHighlightedSeries,\n  xDomain,\n  yDomain,\n  xScaleType,\n  yScaleType,\n  height,\n  width,\n}: UseChartModelProps<T>): ChartModel<T> {\n  // Chart elements refs used in handlers.\n  const plotRef = useRef<ChartPlotRef>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const verticalMarkerRef = useRef<SVGLineElement>(null);\n\n  const stableSetVisibleSeries = useStableEventHandler(setVisibleSeries);\n\n  const model = useMemo(() => {\n    // Compute scales, ticks and two-dimensional plots.\n    const computed = computeChartProps({\n      series,\n      xDomain,\n      yDomain,\n      xScaleType,\n      yScaleType,\n      height,\n      width,\n    });\n\n    // A store for chart interactions that don't require plot recomputation.\n    const interactions = new InteractionsStore(series, computed.plot);\n\n    // A series decorator to provide extra props such as color and marker type.\n    const getInternalSeries = createSeriesDecorator(allSeries);\n\n    // A Callback for svg mouseover to hover the plot points.\n    // Throttling is necessary for a substantially smoother customer experience.\n    const onSVGMouseMoveThrottled = throttle((clientX: number, clientY: number) => {\n      // No hover logic when the popover is pinned or no data available.\n      if (interactions.get().isPopoverPinned || !plotRef.current || interactions.plot.xy.length === 0) {\n        return;\n      }\n\n      const svgRect = plotRef.current.svg.getBoundingClientRect();\n      const offsetX = clientX - svgRect.left;\n      const offsetY = clientY - svgRect.top;\n\n      const closestX = findClosest(interactions.plot.xy, offsetX, xPoints => xPoints[0].scaled.x);\n      const closestPoint = findClosest(closestX, offsetY, point => point.scaled.y1);\n\n      // If close enough to the point - highlight the point and its column.\n      // If not - only highlight the closest column.\n      if (\n        Math.abs(offsetX - closestPoint.scaled.x) < MAX_HOVER_MARGIN &&\n        Math.abs(offsetY - closestPoint.scaled.y1) < MAX_HOVER_MARGIN\n      ) {\n        interactions.highlightPoint(closestPoint);\n      } else {\n        interactions.highlightX(closestX);\n      }\n    }, SVG_HOVER_THROTTLE);\n\n    const onSVGMouseMove = ({ clientX, clientY }: React.MouseEvent<SVGElement, MouseEvent>) =>\n      onSVGMouseMoveThrottled(clientX, clientY);\n\n    // A callback for svg mouseout to clear all highlights.\n    const onSVGMouseOut = (event: React.MouseEvent<SVGElement, MouseEvent>) => {\n      // Because the mouseover is throttled, in can occur slightly after the mouseout,\n      // neglecting its effect; cancelling the throttled function prevents that.\n      onSVGMouseMoveThrottled.cancel();\n\n      // No hover logic when the popover is pinned.\n      if (interactions.get().isPopoverPinned) {\n        return;\n      }\n\n      // Check if the target is contained within svg to allow hovering on the popover body.\n      if (!nodeContains(plotRef.current!.svg, event.relatedTarget as Element)) {\n        interactions.clearHighlightedLegend();\n        interactions.clearHighlight();\n      }\n    };\n\n    // A callback for svg click to pin/unpin the popover.\n    const onSVGMouseDown = (event: React.MouseEvent<SVGSVGElement>) => {\n      interactions.togglePopoverPin();\n      event.preventDefault();\n    };\n\n    // A helper function to highlight the next or previous point within selected series.\n    const moveWithinSeries = (direction: -1 | 1) => {\n      // Can only use motion when a particular point is highlighted.\n      const point = interactions.get().highlightedPoint;\n      if (!point) {\n        return;\n      }\n\n      // Take the index of the currently highlighted series.\n      const sIndex = point.index.s;\n      // Take the incremented(circularly) x-index of the currently highlighted point.\n      const xIndex = circleIndex(point.index.x + direction, [0, interactions.plot.xs.length - 1]);\n      // Highlight the next point using x:s grouped data.\n      interactions.highlightPoint(interactions.plot.xs[xIndex][sIndex]);\n    };\n\n    // A helper function to highlight the next or previous point withing selected column.\n    const moveBetweenSeries = (direction: -1 | 1) => {\n      // Can only use motion when a particular point is highlighted.\n      const point = interactions.get().highlightedPoint;\n      if (!point) {\n        return;\n      }\n\n      // Take the index of the currently highlighted column.\n      const xIndex = point.index.x;\n      // Take the incremented(circularly) y-index of the currently highlighted point.\n      const yIndex = circleIndex(point.index.y + direction, [0, interactions.plot.xy[xIndex].length - 1]);\n      // Highlight the next point using x:y grouped data.\n      interactions.highlightPoint(interactions.plot.xy[xIndex][yIndex]);\n    };\n\n    // A callback for svg keydown to enable motions and popover pin with the keyboard.\n    const onSVGKeyDown = (event: React.KeyboardEvent) => {\n      const keyCode = event.keyCode;\n      if (\n        keyCode !== KeyCode.up &&\n        keyCode !== KeyCode.right &&\n        keyCode !== KeyCode.down &&\n        keyCode !== KeyCode.left &&\n        keyCode !== KeyCode.space &&\n        keyCode !== KeyCode.enter\n      ) {\n        return;\n      }\n\n      // Preventing default fixes an issue in Safari+VO when VO additionally interprets arrow keys as its commands.\n      event.preventDefault();\n\n      // No keydown logic when the popover is pinned.\n      if (interactions.get().isPopoverPinned) {\n        return;\n      }\n\n      // Move up/down.\n      if (keyCode === KeyCode.down || keyCode === KeyCode.up) {\n        moveBetweenSeries(keyCode === KeyCode.down ? -1 : 1);\n      }\n      // Move left/right.\n      else if (keyCode === KeyCode.left || keyCode === KeyCode.right) {\n        moveWithinSeries(keyCode === KeyCode.right ? 1 : -1);\n      }\n      // Pin popover.\n      else if (keyCode === KeyCode.enter || keyCode === KeyCode.space) {\n        interactions.pinPopover();\n      }\n    };\n\n    // A callback for svg focus to highlight series.\n    const onSVGFocus = (_event: React.FocusEvent, trigger: 'mouse' | 'keyboard') => {\n      // When focus is caused by a click event nothing is expected as clicks are handled separately.\n      // Otherwise, select the first series point.\n      if (trigger === 'keyboard') {\n        interactions.highlightFirstPoint();\n      }\n    };\n\n    // A callback for svg blur to clear all highlights unless the popover is pinned.\n    const onSVGBlur = () => {\n      // Pinned popover stays pinned even if the focus is lost.\n      // If blur is not caused by the popover, forget the previously highlighted point.\n      if (!interactions.get().isPopoverPinned) {\n        interactions.clearHighlight();\n      }\n    };\n\n    const onFilterSeries = (series: readonly AreaChartProps.Series<T>[]) => {\n      stableSetVisibleSeries(series);\n    };\n\n    const onLegendHighlight = (series: null | AreaChartProps.Series<T>) => {\n      interactions.highlightSeries(series);\n    };\n\n    const onPopoverDismiss = (outsideClick?: boolean) => {\n      interactions.unpinPopover();\n\n      // Return focus back to the application or plot (when no point is highlighted).\n      if (!outsideClick) {\n        // The delay is needed to bypass focus events caused by click or keypress needed to unpin the popover.\n        setTimeout(() => {\n          if (interactions.get().highlightedPoint) {\n            plotRef.current!.focusApplication();\n          } else {\n            interactions.clearHighlight();\n            plotRef.current!.focusPlot();\n          }\n        }, 0);\n      }\n    };\n\n    const onContainerBlur = () => {\n      interactions.clearState();\n    };\n\n    const onDocumentKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        interactions.clearHighlight();\n        interactions.clearHighlightedLegend();\n      }\n    };\n\n    return {\n      width,\n      height,\n      series,\n      allSeries,\n      getInternalSeries,\n      computed,\n      interactions,\n      handlers: {\n        onSVGMouseMove,\n        onSVGMouseOut,\n        onSVGMouseDown,\n        onSVGKeyDown,\n        onSVGFocus,\n        onSVGBlur,\n        onFilterSeries,\n        onLegendHighlight,\n        onPopoverDismiss,\n        onContainerBlur,\n        onDocumentKeyDown,\n      },\n      refs: {\n        plot: plotRef,\n        container: containerRef,\n        verticalMarker: verticalMarkerRef,\n      },\n    };\n  }, [allSeries, series, xDomain, yDomain, xScaleType, yScaleType, height, width, stableSetVisibleSeries]);\n\n  // Notify client when series highlight change.\n  useReaction(model.interactions, state => state.highlightedSeries, setHighlightedSeries);\n\n  // Update interactions store when series highlight in a controlled way.\n  useEffect(() => {\n    if (highlightedSeries !== model.interactions.get().highlightedSeries) {\n      model.interactions.highlightSeries(highlightedSeries);\n    }\n  }, [model, highlightedSeries]);\n\n  return model;\n}\n"]}
+{"version":3,"file":"use-chart-model.js","sourceRoot":"","sources":["../../../../src/area-chart/model/use-chart-model.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { AreaChartProps } from '../interfaces';\nimport React, { useEffect, useMemo, useRef } from 'react';\nimport { findClosest, circleIndex } from './utils';\n\nimport { nodeContains } from '../../internal/utils/dom';\nimport { KeyCode } from '../../internal/keycode';\nimport { XDomain, XScaleType, YDomain, YScaleType } from '../../internal/components/cartesian-chart/interfaces';\nimport { useReaction } from './async-store';\nimport computeChartProps from './compute-chart-props';\nimport createSeriesDecorator from './create-series-decorator';\nimport InteractionsStore from './interactions-store';\nimport { useStableEventHandler } from '../../internal/hooks/use-stable-event-handler';\nimport { ChartModel } from './index';\nimport { ChartPlotRef } from '../../internal/components/chart-plot';\nimport { throttle } from '../../internal/utils/throttle';\n\nconst MAX_HOVER_MARGIN = 6;\nconst SVG_HOVER_THROTTLE = 25;\n\nexport interface UseChartModelProps<T extends AreaChartProps.DataTypes> {\n  externalSeries: readonly AreaChartProps.Series<T>[];\n  visibleSeries: readonly AreaChartProps.Series<T>[];\n  setVisibleSeries: (series: readonly AreaChartProps.Series<T>[]) => void;\n  highlightedSeries: null | AreaChartProps.Series<T>;\n  setHighlightedSeries: (series: null | AreaChartProps.Series<T>) => void;\n  xDomain?: XDomain<T>;\n  yDomain?: YDomain;\n  xScaleType: XScaleType;\n  yScaleType: YScaleType;\n  height: number;\n  width: number;\n}\n\n// Represents the core the chart logic, including the model of all allowed user interactions.\nexport default function useChartModel<T extends AreaChartProps.DataTypes>({\n  externalSeries: allSeries,\n  visibleSeries: series,\n  setVisibleSeries,\n  highlightedSeries,\n  setHighlightedSeries,\n  xDomain,\n  yDomain,\n  xScaleType,\n  yScaleType,\n  height,\n  width,\n}: UseChartModelProps<T>): ChartModel<T> {\n  // Chart elements refs used in handlers.\n  const plotRef = useRef<ChartPlotRef>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const verticalMarkerRef = useRef<SVGLineElement>(null);\n\n  const stableSetVisibleSeries = useStableEventHandler(setVisibleSeries);\n\n  const model = useMemo(() => {\n    // Compute scales, ticks and two-dimensional plots.\n    const computed = computeChartProps({\n      series,\n      xDomain,\n      yDomain,\n      xScaleType,\n      yScaleType,\n      height,\n      width,\n    });\n\n    // A store for chart interactions that don't require plot recomputation.\n    const interactions = new InteractionsStore(series, computed.plot);\n\n    const containsMultipleSeries = interactions.series.length > 1;\n\n    // A series decorator to provide extra props such as color and marker type.\n    const getInternalSeries = createSeriesDecorator(allSeries);\n\n    // A Callback for svg mouseover to hover the plot points.\n    // Throttling is necessary for a substantially smoother customer experience.\n    const onSVGMouseMoveThrottled = throttle((clientX: number, clientY: number) => {\n      // No hover logic when the popover is pinned or no data available.\n      if (interactions.get().isPopoverPinned || !plotRef.current || interactions.plot.xy.length === 0) {\n        return;\n      }\n\n      const svgRect = plotRef.current.svg.getBoundingClientRect();\n      const offsetX = clientX - svgRect.left;\n      const offsetY = clientY - svgRect.top;\n\n      const closestX = findClosest(interactions.plot.xy, offsetX, xPoints => xPoints[0].scaled.x);\n      const closestPoint = findClosest(closestX, offsetY, point => point.scaled.y1);\n\n      // If close enough to the point - highlight the point and its column.\n      // If not - only highlight the closest column.\n      if (\n        Math.abs(offsetX - closestPoint.scaled.x) < MAX_HOVER_MARGIN &&\n        Math.abs(offsetY - closestPoint.scaled.y1) < MAX_HOVER_MARGIN\n      ) {\n        interactions.highlightPoint(closestPoint);\n      } else {\n        interactions.highlightX(closestX);\n      }\n    }, SVG_HOVER_THROTTLE);\n\n    const onSVGMouseMove = ({ clientX, clientY }: React.MouseEvent<SVGElement, MouseEvent>) =>\n      onSVGMouseMoveThrottled(clientX, clientY);\n\n    // A callback for svg mouseout to clear all highlights.\n    const onSVGMouseOut = (event: React.MouseEvent<SVGElement, MouseEvent>) => {\n      // Because the mouseover is throttled, in can occur slightly after the mouseout,\n      // neglecting its effect; cancelling the throttled function prevents that.\n      onSVGMouseMoveThrottled.cancel();\n\n      // No hover logic when the popover is pinned.\n      if (interactions.get().isPopoverPinned) {\n        return;\n      }\n\n      // Check if the target is contained within svg to allow hovering on the popover body.\n      if (!nodeContains(plotRef.current!.svg, event.relatedTarget as Element)) {\n        interactions.clearHighlightedLegend();\n        interactions.clearHighlight();\n      }\n    };\n\n    // A callback for svg click to pin/unpin the popover.\n    const onSVGMouseDown = (event: React.MouseEvent<SVGSVGElement>) => {\n      interactions.togglePopoverPin();\n      event.preventDefault();\n    };\n\n    const moveWithinXAxis = (direction: -1 | 1) => {\n      if (interactions.get().highlightedPoint) {\n        return moveWithinSeries(direction);\n      } else if (containsMultipleSeries) {\n        const { highlightedX } = interactions.get();\n        if (highlightedX) {\n          const currentXIndex = highlightedX[0].index.x;\n          const nextXIndex = circleIndex(currentXIndex + direction, [0, interactions.plot.xy.length - 1]);\n          interactions.highlightX(interactions.plot.xy[nextXIndex]);\n        }\n      }\n    };\n\n    // A helper function to highlight the next or previous point within selected series.\n    const moveWithinSeries = (direction: -1 | 1) => {\n      // Can only use motion when a particular point is highlighted.\n      const point = interactions.get().highlightedPoint;\n      if (!point) {\n        return;\n      }\n\n      // Take the index of the currently highlighted series.\n      const sIndex = point.index.s;\n      // Take the incremented(circularly) x-index of the currently highlighted point.\n      const xIndex = circleIndex(point.index.x + direction, [0, interactions.plot.xs.length - 1]);\n      // Highlight the next point using x:s grouped data.\n      interactions.highlightPoint(interactions.plot.xs[xIndex][sIndex]);\n    };\n\n    // A helper function to highlight the next or previous point within the selected column.\n    const moveBetweenSeries = (direction: -1 | 1) => {\n      const point = interactions.get().highlightedPoint;\n      if (!point) {\n        const { highlightedX } = interactions.get();\n        if (highlightedX) {\n          const xIndex = highlightedX[0].index.x;\n          const points = interactions.plot.xy[xIndex];\n          const yIndex = direction === 1 ? 0 : points.length - 1;\n          interactions.highlightPoint(points[yIndex]);\n        }\n        return;\n      }\n\n      // Take the index of the currently highlighted column.\n      const xIndex = point.index.x;\n      const currentYIndex = point.index.y;\n\n      if (\n        containsMultipleSeries &&\n        ((currentYIndex === 0 && direction === -1) ||\n          (currentYIndex === interactions.plot.xy[xIndex].length - 1 && direction === 1))\n      ) {\n        interactions.highlightX(interactions.plot.xy[xIndex]);\n      } else {\n        // Take the incremented(circularly) y-index of the currently highlighted point.\n        const nextYIndex = circleIndex(currentYIndex + direction, [0, interactions.plot.xy[xIndex].length - 1]);\n        // Highlight the next point using x:y grouped data.\n        interactions.highlightPoint(interactions.plot.xy[xIndex][nextYIndex]);\n      }\n    };\n\n    // A callback for svg keydown to enable motions and popover pin with the keyboard.\n    const onSVGKeyDown = (event: React.KeyboardEvent) => {\n      const keyCode = event.keyCode;\n      if (\n        keyCode !== KeyCode.up &&\n        keyCode !== KeyCode.right &&\n        keyCode !== KeyCode.down &&\n        keyCode !== KeyCode.left &&\n        keyCode !== KeyCode.space &&\n        keyCode !== KeyCode.enter\n      ) {\n        return;\n      }\n\n      // Preventing default fixes an issue in Safari+VO when VO additionally interprets arrow keys as its commands.\n      event.preventDefault();\n\n      // No keydown logic when the popover is pinned.\n      if (interactions.get().isPopoverPinned) {\n        return;\n      }\n\n      // Move up/down.\n      if (keyCode === KeyCode.down || keyCode === KeyCode.up) {\n        moveBetweenSeries(keyCode === KeyCode.down ? -1 : 1);\n      }\n      // Move left/right.\n      else if (keyCode === KeyCode.left || keyCode === KeyCode.right) {\n        moveWithinXAxis(keyCode === KeyCode.right ? 1 : -1);\n      }\n      // Pin popover.\n      else if (keyCode === KeyCode.enter || keyCode === KeyCode.space) {\n        interactions.pinPopover();\n      }\n    };\n\n    const highlightFirstX = () => {\n      interactions.highlightX(interactions.plot.xy[0]);\n    };\n\n    // A callback for svg focus to highlight series.\n    const onSVGFocus = (_event: React.FocusEvent, trigger: 'mouse' | 'keyboard') => {\n      // When focus is caused by a click event nothing is expected as clicks are handled separately.\n      if (trigger === 'keyboard') {\n        const { highlightedX, highlightedPoint, highlightedSeries, legendSeries } = interactions.get();\n        if (containsMultipleSeries && !highlightedX && !highlightedPoint && !highlightedSeries && !legendSeries) {\n          highlightFirstX();\n        } else if (!highlightedX) {\n          interactions.highlightFirstPoint();\n        }\n      }\n    };\n\n    // A callback for svg blur to clear all highlights unless the popover is pinned.\n    const onSVGBlur = () => {\n      // Pinned popover stays pinned even if the focus is lost.\n      // If blur is not caused by the popover, forget the previously highlighted point.\n      if (!interactions.get().isPopoverPinned) {\n        interactions.clearHighlight();\n      }\n    };\n\n    const onFilterSeries = (series: readonly AreaChartProps.Series<T>[]) => {\n      stableSetVisibleSeries(series);\n    };\n\n    const onLegendHighlight = (series: null | AreaChartProps.Series<T>) => {\n      interactions.highlightSeries(series);\n    };\n\n    const onPopoverDismiss = (outsideClick?: boolean) => {\n      interactions.unpinPopover();\n\n      // Return focus back to the application or plot (when no point is highlighted).\n      if (!outsideClick) {\n        // The delay is needed to bypass focus events caused by click or keypress needed to unpin the popover.\n        setTimeout(() => {\n          if (interactions.get().highlightedPoint || interactions.get().highlightedX) {\n            plotRef.current!.focusApplication();\n          } else {\n            interactions.clearHighlight();\n            plotRef.current!.focusPlot();\n          }\n        }, 0);\n      }\n    };\n\n    const onContainerBlur = () => {\n      interactions.clearState();\n    };\n\n    const onDocumentKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        interactions.clearHighlight();\n        interactions.clearHighlightedLegend();\n      }\n    };\n\n    return {\n      width,\n      height,\n      series,\n      allSeries,\n      getInternalSeries,\n      computed,\n      interactions,\n      handlers: {\n        onSVGMouseMove,\n        onSVGMouseOut,\n        onSVGMouseDown,\n        onSVGKeyDown,\n        onSVGFocus,\n        onSVGBlur,\n        onFilterSeries,\n        onLegendHighlight,\n        onPopoverDismiss,\n        onContainerBlur,\n        onDocumentKeyDown,\n      },\n      refs: {\n        plot: plotRef,\n        container: containerRef,\n        verticalMarker: verticalMarkerRef,\n      },\n    };\n  }, [allSeries, series, xDomain, yDomain, xScaleType, yScaleType, height, width, stableSetVisibleSeries]);\n\n  // Notify client when series highlight change.\n  useReaction(model.interactions, state => state.highlightedSeries, setHighlightedSeries);\n\n  // Update interactions store when series highlight in a controlled way.\n  useEffect(() => {\n    if (highlightedSeries !== model.interactions.get().highlightedSeries) {\n      model.interactions.highlightSeries(highlightedSeries);\n    }\n  }, [model, highlightedSeries]);\n\n  return model;\n}\n"]}

package/collection-preferences/index.d.ts

@@ -1,4 +1,4 @@
 import { CollectionPreferencesProps } from './interfaces';
 export { CollectionPreferencesProps };
-export default function CollectionPreferences({ title, confirmLabel, cancelLabel, disabled, onConfirm, onCancel, visibleContentPreference, pageSizePreference, wrapLinesPreference, preferences, customPreference, ...rest }: CollectionPreferencesProps): JSX.Element;
+export default function CollectionPreferences({ title, confirmLabel, cancelLabel, disabled, onConfirm, onCancel, visibleContentPreference, pageSizePreference, wrapLinesPreference, stripedRowsPreference, preferences, customPreference, ...rest }: CollectionPreferencesProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/collection-preferences/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/collection-preferences/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAE,0BAA0B,EAAE,MAAM,cAAc,CAAC;AAK1D,OAAO,EAAE,0BAA0B,EAAE,CAAC;AAmEtC,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAC5C,KAAK,EACL,YAAY,EACZ,WAAW,EACX,QAAgB,EAChB,SAAS,EACT,QAAQ,EACR,wBAAwB,EACxB,kBAAkB,EAClB,mBAAmB,EACnB,WAAW,EACX,gBAAgB,EAChB,GAAG,IAAI,EACR,EAAE,0BAA0B,eAuF5B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/collection-preferences/index.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAAE,0BAA0B,EAAE,MAAM,cAAc,CAAC;AAK1D,OAAO,EAAE,0BAA0B,EAAE,CAAC;AAuFtC,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAC5C,KAAK,EACL,YAAY,EACZ,WAAW,EACX,QAAgB,EAChB,SAAS,EACT,QAAQ,EACR,wBAAwB,EACxB,kBAAkB,EAClB,mBAAmB,EACnB,qBAAqB,EACrB,WAAW,EACX,gBAAgB,EAChB,GAAG,IAAI,EACR,EAAE,0BAA0B,eAwF5B"}

package/collection-preferences/index.js

@@ -9,24 +9,29 @@ import InternalBox from '../box/internal';
 import { InternalButton } from '../button/internal';
 import InternalModal from '../modal/internal';
 import InternalSpaceBetween from '../space-between/internal';
-import { copyPreferences, mergePreferences, ModalContentLayout, PageSizePreference, WrapLinesPreference, CustomPreference, } from './utils';
+import { copyPreferences, mergePreferences, ModalContentLayout, PageSizePreference, WrapLinesPreference, StripedRowsPreference, CustomPreference, } from './utils';
 import VisibleContentPreference from './visible-content';
 import checkControlled from '../internal/hooks/check-controlled';
 import styles from './styles.css.js';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import useBaseComponent from '../internal/hooks/use-base-component';
 var ModalContent = function (_a) {
-    var _b = _a.preferences, preferences = _b === void 0 ? {} : _b, pageSizePreference = _a.pageSizePreference, wrapLinesPreference = _a.wrapLinesPreference, customPreference = _a.customPreference, visibleContentPreference = _a.visibleContentPreference, onChange = _a.onChange;
-    if (!visibleContentPreference && !pageSizePreference && !wrapLinesPreference && customPreference) {
+    var _b = _a.preferences, preferences = _b === void 0 ? {} : _b, pageSizePreference = _a.pageSizePreference, wrapLinesPreference = _a.wrapLinesPreference, stripedRowsPreference = _a.stripedRowsPreference, customPreference = _a.customPreference, visibleContentPreference = _a.visibleContentPreference, onChange = _a.onChange;
+    if (!visibleContentPreference &&
+        !pageSizePreference &&
+        !wrapLinesPreference &&
+        !stripedRowsPreference &&
+        customPreference) {
         return (React.createElement(CustomPreference, { value: preferences.custom, customPreference: customPreference, onChange: function (custom) { return onChange({ custom: custom }); } }));
     }
     return (React.createElement(ModalContentLayout, { left: React.createElement(InternalSpaceBetween, { size: "l" },
             pageSizePreference && (React.createElement(PageSizePreference, __assign({ value: preferences.pageSize }, pageSizePreference, { onChange: function (pageSize) { return onChange({ pageSize: pageSize }); } }))),
             wrapLinesPreference && (React.createElement(WrapLinesPreference, __assign({ value: preferences.wrapLines }, wrapLinesPreference, { onChange: function (wrapLines) { return onChange({ wrapLines: wrapLines }); } }))),
+            stripedRowsPreference && (React.createElement(StripedRowsPreference, __assign({ value: preferences.stripedRows }, stripedRowsPreference, { onChange: function (stripedRows) { return onChange({ stripedRows: stripedRows }); } }))),
             customPreference && (React.createElement(CustomPreference, { value: preferences.custom, customPreference: customPreference, onChange: function (custom) { return onChange({ custom: custom }); } }))), right: visibleContentPreference && (React.createElement(VisibleContentPreference, __assign({ value: preferences.visibleContent }, visibleContentPreference, { onChange: function (visibleContent) { return onChange({ visibleContent: visibleContent }); } }))) }));
 };
 export default function CollectionPreferences(_a) {
-    var title = _a.title, confirmLabel = _a.confirmLabel, cancelLabel = _a.cancelLabel, _b = _a.disabled, disabled = _b === void 0 ? false : _b, onConfirm = _a.onConfirm, onCancel = _a.onCancel, visibleContentPreference = _a.visibleContentPreference, pageSizePreference = _a.pageSizePreference, wrapLinesPreference = _a.wrapLinesPreference, preferences = _a.preferences, customPreference = _a.customPreference, rest = __rest(_a, ["title", "confirmLabel", "cancelLabel", "disabled", "onConfirm", "onCancel", "visibleContentPreference", "pageSizePreference", "wrapLinesPreference", "preferences", "customPreference"]);
+    var title = _a.title, confirmLabel = _a.confirmLabel, cancelLabel = _a.cancelLabel, _b = _a.disabled, disabled = _b === void 0 ? false : _b, onConfirm = _a.onConfirm, onCancel = _a.onCancel, visibleContentPreference = _a.visibleContentPreference, pageSizePreference = _a.pageSizePreference, wrapLinesPreference = _a.wrapLinesPreference, stripedRowsPreference = _a.stripedRowsPreference, preferences = _a.preferences, customPreference = _a.customPreference, rest = __rest(_a, ["title", "confirmLabel", "cancelLabel", "disabled", "onConfirm", "onCancel", "visibleContentPreference", "pageSizePreference", "wrapLinesPreference", "stripedRowsPreference", "preferences", "customPreference"]);
     var __internalRootRef = useBaseComponent('CollectionPreferences').__internalRootRef;
     checkControlled('CollectioPreferences', 'preferences', preferences, 'onConfirm', onConfirm);
     var baseProps = getBaseProps(rest);
@@ -60,7 +65,7 @@ export default function CollectionPreferences(_a) {
                 React.createElement(InternalSpaceBetween, { direction: "horizontal", size: "xs" },
                     React.createElement(InternalButton, { className: styles['cancel-button'], variant: "link", formAction: "none", onClick: onCancelListener }, cancelLabel),
                     React.createElement(InternalButton, { className: styles['confirm-button'], variant: "primary", formAction: "none", onClick: onConfirmListener }, confirmLabel))), closeAriaLabel: cancelLabel, size: "large", onDismiss: onCancelListener },
-            React.createElement(ModalContent, { preferences: temporaryPreferences, visibleContentPreference: visibleContentPreference, pageSizePreference: pageSizePreference, wrapLinesPreference: wrapLinesPreference, customPreference: customPreference, onChange: function (changedPreferences) {
+            React.createElement(ModalContent, { preferences: temporaryPreferences, visibleContentPreference: visibleContentPreference, pageSizePreference: pageSizePreference, wrapLinesPreference: wrapLinesPreference, stripedRowsPreference: stripedRowsPreference, customPreference: customPreference, onChange: function (changedPreferences) {
                     return setTemporaryPreferences(mergePreferences(changedPreferences, temporaryPreferences));
                 } })))));
 }

package/collection-preferences/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/collection-preferences/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalBox from '../box/internal';\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\nimport InternalModal from '../modal/internal';\nimport InternalSpaceBetween from '../space-between/internal';\nimport {\n  copyPreferences,\n  mergePreferences,\n  ModalContentLayout,\n  PageSizePreference,\n  WrapLinesPreference,\n  CustomPreference,\n} from './utils';\nimport VisibleContentPreference from './visible-content';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport { CollectionPreferencesProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\n\nexport { CollectionPreferencesProps };\n\ninterface ModalContentProps\n  extends Pick<\n    CollectionPreferencesProps,\n    'preferences' | 'visibleContentPreference' | 'pageSizePreference' | 'wrapLinesPreference' | 'customPreference'\n  > {\n  onChange: (preferences: CollectionPreferencesProps.Preferences) => void;\n}\n\nconst ModalContent = ({\n  preferences = {},\n  pageSizePreference,\n  wrapLinesPreference,\n  customPreference,\n  visibleContentPreference,\n  onChange,\n}: ModalContentProps) => {\n  if (!visibleContentPreference && !pageSizePreference && !wrapLinesPreference && customPreference) {\n    return (\n      <CustomPreference\n        value={preferences.custom}\n        customPreference={customPreference}\n        onChange={custom => onChange({ custom })}\n      />\n    );\n  }\n  return (\n    <ModalContentLayout\n      left={\n        <InternalSpaceBetween size=\"l\">\n          {pageSizePreference && (\n            <PageSizePreference\n              value={preferences.pageSize}\n              {...pageSizePreference}\n              onChange={pageSize => onChange({ pageSize })}\n            />\n          )}\n          {wrapLinesPreference && (\n            <WrapLinesPreference\n              value={preferences.wrapLines}\n              {...wrapLinesPreference}\n              onChange={wrapLines => onChange({ wrapLines })}\n            />\n          )}\n          {customPreference && (\n            <CustomPreference\n              value={preferences.custom}\n              customPreference={customPreference}\n              onChange={custom => onChange({ custom })}\n            />\n          )}\n        </InternalSpaceBetween>\n      }\n      right={\n        visibleContentPreference && (\n          <VisibleContentPreference\n            value={preferences.visibleContent}\n            {...visibleContentPreference}\n            onChange={visibleContent => onChange({ visibleContent })}\n          />\n        )\n      }\n    />\n  );\n};\n\nexport default function CollectionPreferences({\n  title,\n  confirmLabel,\n  cancelLabel,\n  disabled = false,\n  onConfirm,\n  onCancel,\n  visibleContentPreference,\n  pageSizePreference,\n  wrapLinesPreference,\n  preferences,\n  customPreference,\n  ...rest\n}: CollectionPreferencesProps) {\n  const { __internalRootRef } = useBaseComponent('CollectionPreferences');\n  checkControlled('CollectioPreferences', 'preferences', preferences, 'onConfirm', onConfirm);\n  const baseProps = getBaseProps(rest);\n  const [modalVisible, setModalVisible] = useState(false);\n  const [temporaryPreferences, setTemporaryPreferences] = useState(copyPreferences(preferences || {}));\n  const triggerRef = useRef<ButtonProps.Ref>(null);\n  const dialogPreviouslyOpen = useRef(false);\n  useEffect(() => {\n    if (!modalVisible) {\n      dialogPreviouslyOpen.current && triggerRef.current && triggerRef.current.focus();\n    } else {\n      dialogPreviouslyOpen.current = true;\n    }\n  }, [modalVisible]);\n\n  const onConfirmListener = () => {\n    setModalVisible(false);\n    fireNonCancelableEvent(onConfirm, temporaryPreferences);\n  };\n\n  const onCancelListener = () => {\n    fireNonCancelableEvent(onCancel, {});\n    setModalVisible(false);\n    setTemporaryPreferences(copyPreferences(preferences || {}));\n  };\n\n  return (\n    <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={__internalRootRef}>\n      <InternalButton\n        ref={triggerRef}\n        className={styles['trigger-button']}\n        disabled={disabled}\n        ariaLabel={title}\n        onClick={() => {\n          setTemporaryPreferences(copyPreferences(preferences || {}));\n          setModalVisible(true);\n        }}\n        variant=\"icon\"\n        iconName=\"settings\"\n        formAction=\"none\"\n      />\n      {!disabled && modalVisible && (\n        <InternalModal\n          className={styles['modal-root']}\n          visible={true}\n          header={title}\n          footer={\n            <InternalBox float=\"right\">\n              <InternalSpaceBetween direction=\"horizontal\" size=\"xs\">\n                <InternalButton\n                  className={styles['cancel-button']}\n                  variant=\"link\"\n                  formAction=\"none\"\n                  onClick={onCancelListener}\n                >\n                  {cancelLabel}\n                </InternalButton>\n                <InternalButton\n                  className={styles['confirm-button']}\n                  variant=\"primary\"\n                  formAction=\"none\"\n                  onClick={onConfirmListener}\n                >\n                  {confirmLabel}\n                </InternalButton>\n              </InternalSpaceBetween>\n            </InternalBox>\n          }\n          closeAriaLabel={cancelLabel}\n          size=\"large\"\n          onDismiss={onCancelListener}\n        >\n          <ModalContent\n            preferences={temporaryPreferences}\n            visibleContentPreference={visibleContentPreference}\n            pageSizePreference={pageSizePreference}\n            wrapLinesPreference={wrapLinesPreference}\n            customPreference={customPreference}\n            onChange={changedPreferences =>\n              setTemporaryPreferences(mergePreferences(changedPreferences, temporaryPreferences))\n            }\n          />\n        </InternalModal>\n      )}\n    </div>\n  );\n}\n\napplyDisplayName(CollectionPreferences, 'CollectionPreferences');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/collection-preferences/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAE1C,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,aAAa,MAAM,mBAAmB,CAAC;AAC9C,OAAO,oBAAoB,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EACL,eAAe,EACf,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,EAClB,mBAAmB,EACnB,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,SAAS,CAAC;AACjB,OAAO,wBAAwB,MAAM,mBAAmB,CAAC;AACzD,OAAO,eAAe,MAAM,oCAAoC,CAAC;AAEjE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAiBpE,IAAM,YAAY,GAAG,UAAC,EAQF;QAPlB,mBAAgB,EAAhB,WAAW,mBAAG,EAAE,KAAA,EAChB,kBAAkB,wBAAA,EAClB,mBAAmB,yBAAA,EACnB,qBAAqB,2BAAA,EACrB,gBAAgB,sBAAA,EAChB,wBAAwB,8BAAA,EACxB,QAAQ,cAAA;IAER,IACE,CAAC,wBAAwB;QACzB,CAAC,kBAAkB;QACnB,CAAC,mBAAmB;QACpB,CAAC,qBAAqB;QACtB,gBAAgB,EAChB;QACA,OAAO,CACL,oBAAC,gBAAgB,IACf,KAAK,EAAE,WAAW,CAAC,MAAM,EACzB,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,EAAE,UAAA,MAAM,IAAI,OAAA,QAAQ,CAAC,EAAE,MAAM,QAAA,EAAE,CAAC,EAApB,CAAoB,GACxC,CACH,CAAC;KACH;IAED,OAAO,CACL,oBAAC,kBAAkB,IACjB,IAAI,EACF,oBAAC,oBAAoB,IAAC,IAAI,EAAC,GAAG;YAC3B,kBAAkB,IAAI,CACrB,oBAAC,kBAAkB,aACjB,KAAK,EAAE,WAAW,CAAC,QAAQ,IACvB,kBAAkB,IACtB,QAAQ,EAAE,UAAA,QAAQ,IAAI,OAAA,QAAQ,CAAC,EAAE,QAAQ,UAAA,EAAE,CAAC,EAAtB,CAAsB,IAC5C,CACH;YACA,mBAAmB,IAAI,CACtB,oBAAC,mBAAmB,aAClB,KAAK,EAAE,WAAW,CAAC,SAAS,IACxB,mBAAmB,IACvB,QAAQ,EAAE,UAAA,SAAS,IAAI,OAAA,QAAQ,CAAC,EAAE,SAAS,WAAA,EAAE,CAAC,EAAvB,CAAuB,IAC9C,CACH;YACA,qBAAqB,IAAI,CACxB,oBAAC,qBAAqB,aACpB,KAAK,EAAE,WAAW,CAAC,WAAW,IAC1B,qBAAqB,IACzB,QAAQ,EAAE,UAAA,WAAW,IAAI,OAAA,QAAQ,CAAC,EAAE,WAAW,aAAA,EAAE,CAAC,EAAzB,CAAyB,IAClD,CACH;YACA,gBAAgB,IAAI,CACnB,oBAAC,gBAAgB,IACf,KAAK,EAAE,WAAW,CAAC,MAAM,EACzB,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,EAAE,UAAA,MAAM,IAAI,OAAA,QAAQ,CAAC,EAAE,MAAM,QAAA,EAAE,CAAC,EAApB,CAAoB,GACxC,CACH,CACoB,EAEzB,KAAK,EACH,wBAAwB,IAAI,CAC1B,oBAAC,wBAAwB,aACvB,KAAK,EAAE,WAAW,CAAC,cAAc,IAC7B,wBAAwB,IAC5B,QAAQ,EAAE,UAAA,cAAc,IAAI,OAAA,QAAQ,CAAC,EAAE,cAAc,gBAAA,EAAE,CAAC,EAA5B,CAA4B,IACxD,CACH,GAEH,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAcjB;IAb3B,IAAA,KAAK,WAAA,EACL,YAAY,kBAAA,EACZ,WAAW,iBAAA,EACX,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,wBAAwB,8BAAA,EACxB,kBAAkB,wBAAA,EAClB,mBAAmB,yBAAA,EACnB,qBAAqB,2BAAA,EACrB,WAAW,iBAAA,EACX,gBAAgB,sBAAA,EACb,IAAI,cAbqC,kNAc7C,CADQ;IAEC,IAAA,iBAAiB,GAAK,gBAAgB,CAAC,uBAAuB,CAAC,kBAA9C,CAA+C;IACxE,eAAe,CAAC,sBAAsB,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,CAAC,CAAC;IAC5F,IAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IAC/B,IAAA,KAAkC,QAAQ,CAAC,KAAK,CAAC,EAAhD,YAAY,QAAA,EAAE,eAAe,QAAmB,CAAC;IAClD,IAAA,KAAkD,QAAQ,CAAC,eAAe,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC,EAA7F,oBAAoB,QAAA,EAAE,uBAAuB,QAAgD,CAAC;IACrG,IAAM,UAAU,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IACjD,IAAM,oBAAoB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC3C,SAAS,CAAC;QACR,IAAI,CAAC,YAAY,EAAE;YACjB,oBAAoB,CAAC,OAAO,IAAI,UAAU,CAAC,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;SAClF;aAAM;YACL,oBAAoB,CAAC,OAAO,GAAG,IAAI,CAAC;SACrC;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,IAAM,iBAAiB,GAAG;QACxB,eAAe,CAAC,KAAK,CAAC,CAAC;QACvB,sBAAsB,CAAC,SAAS,EAAE,oBAAoB,CAAC,CAAC;IAC1D,CAAC,CAAC;IAEF,IAAM,gBAAgB,GAAG;QACvB,sBAAsB,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;QACrC,eAAe,CAAC,KAAK,CAAC,CAAC;QACvB,uBAAuB,CAAC,eAAe,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC,CAAC;IAC9D,CAAC,CAAC;IAEF,OAAO,CACL,wCAAS,SAAS,IAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,iBAAiB;QAC3F,oBAAC,cAAc,IACb,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,EACnC,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,KAAK,EAChB,OAAO,EAAE;gBACP,uBAAuB,CAAC,eAAe,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC,CAAC;gBAC5D,eAAe,CAAC,IAAI,CAAC,CAAC;YACxB,CAAC,EACD,OAAO,EAAC,MAAM,EACd,QAAQ,EAAC,UAAU,EACnB,UAAU,EAAC,MAAM,GACjB;QACD,CAAC,QAAQ,IAAI,YAAY,IAAI,CAC5B,oBAAC,aAAa,IACZ,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,EAC/B,OAAO,EAAE,IAAI,EACb,MAAM,EAAE,KAAK,EACb,MAAM,EACJ,oBAAC,WAAW,IAAC,KAAK,EAAC,OAAO;gBACxB,oBAAC,oBAAoB,IAAC,SAAS,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI;oBACpD,oBAAC,cAAc,IACb,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,EAClC,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,MAAM,EACjB,OAAO,EAAE,gBAAgB,IAExB,WAAW,CACG;oBACjB,oBAAC,cAAc,IACb,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,EACnC,OAAO,EAAC,SAAS,EACjB,UAAU,EAAC,MAAM,EACjB,OAAO,EAAE,iBAAiB,IAEzB,YAAY,CACE,CACI,CACX,EAEhB,cAAc,EAAE,WAAW,EAC3B,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,gBAAgB;YAE3B,oBAAC,YAAY,IACX,WAAW,EAAE,oBAAoB,EACjC,wBAAwB,EAAE,wBAAwB,EAClD,kBAAkB,EAAE,kBAAkB,EACtC,mBAAmB,EAAE,mBAAmB,EACxC,qBAAqB,EAAE,qBAAqB,EAC5C,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,EAAE,UAAA,kBAAkB;oBAC1B,OAAA,uBAAuB,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,oBAAoB,CAAC,CAAC;gBAAnF,CAAmF,GAErF,CACY,CACjB,CACG,CACP,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,qBAAqB,EAAE,uBAAuB,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalBox from '../box/internal';\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\nimport InternalModal from '../modal/internal';\nimport InternalSpaceBetween from '../space-between/internal';\nimport {\n  copyPreferences,\n  mergePreferences,\n  ModalContentLayout,\n  PageSizePreference,\n  WrapLinesPreference,\n  StripedRowsPreference,\n  CustomPreference,\n} from './utils';\nimport VisibleContentPreference from './visible-content';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport { CollectionPreferencesProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\n\nexport { CollectionPreferencesProps };\n\ninterface ModalContentProps\n  extends Pick<\n    CollectionPreferencesProps,\n    | 'preferences'\n    | 'visibleContentPreference'\n    | 'pageSizePreference'\n    | 'wrapLinesPreference'\n    | 'stripedRowsPreference'\n    | 'customPreference'\n  > {\n  onChange: (preferences: CollectionPreferencesProps.Preferences) => void;\n}\n\nconst ModalContent = ({\n  preferences = {},\n  pageSizePreference,\n  wrapLinesPreference,\n  stripedRowsPreference,\n  customPreference,\n  visibleContentPreference,\n  onChange,\n}: ModalContentProps) => {\n  if (\n    !visibleContentPreference &&\n    !pageSizePreference &&\n    !wrapLinesPreference &&\n    !stripedRowsPreference &&\n    customPreference\n  ) {\n    return (\n      <CustomPreference\n        value={preferences.custom}\n        customPreference={customPreference}\n        onChange={custom => onChange({ custom })}\n      />\n    );\n  }\n\n  return (\n    <ModalContentLayout\n      left={\n        <InternalSpaceBetween size=\"l\">\n          {pageSizePreference && (\n            <PageSizePreference\n              value={preferences.pageSize}\n              {...pageSizePreference}\n              onChange={pageSize => onChange({ pageSize })}\n            />\n          )}\n          {wrapLinesPreference && (\n            <WrapLinesPreference\n              value={preferences.wrapLines}\n              {...wrapLinesPreference}\n              onChange={wrapLines => onChange({ wrapLines })}\n            />\n          )}\n          {stripedRowsPreference && (\n            <StripedRowsPreference\n              value={preferences.stripedRows}\n              {...stripedRowsPreference}\n              onChange={stripedRows => onChange({ stripedRows })}\n            />\n          )}\n          {customPreference && (\n            <CustomPreference\n              value={preferences.custom}\n              customPreference={customPreference}\n              onChange={custom => onChange({ custom })}\n            />\n          )}\n        </InternalSpaceBetween>\n      }\n      right={\n        visibleContentPreference && (\n          <VisibleContentPreference\n            value={preferences.visibleContent}\n            {...visibleContentPreference}\n            onChange={visibleContent => onChange({ visibleContent })}\n          />\n        )\n      }\n    />\n  );\n};\n\nexport default function CollectionPreferences({\n  title,\n  confirmLabel,\n  cancelLabel,\n  disabled = false,\n  onConfirm,\n  onCancel,\n  visibleContentPreference,\n  pageSizePreference,\n  wrapLinesPreference,\n  stripedRowsPreference,\n  preferences,\n  customPreference,\n  ...rest\n}: CollectionPreferencesProps) {\n  const { __internalRootRef } = useBaseComponent('CollectionPreferences');\n  checkControlled('CollectioPreferences', 'preferences', preferences, 'onConfirm', onConfirm);\n  const baseProps = getBaseProps(rest);\n  const [modalVisible, setModalVisible] = useState(false);\n  const [temporaryPreferences, setTemporaryPreferences] = useState(copyPreferences(preferences || {}));\n  const triggerRef = useRef<ButtonProps.Ref>(null);\n  const dialogPreviouslyOpen = useRef(false);\n  useEffect(() => {\n    if (!modalVisible) {\n      dialogPreviouslyOpen.current && triggerRef.current && triggerRef.current.focus();\n    } else {\n      dialogPreviouslyOpen.current = true;\n    }\n  }, [modalVisible]);\n\n  const onConfirmListener = () => {\n    setModalVisible(false);\n    fireNonCancelableEvent(onConfirm, temporaryPreferences);\n  };\n\n  const onCancelListener = () => {\n    fireNonCancelableEvent(onCancel, {});\n    setModalVisible(false);\n    setTemporaryPreferences(copyPreferences(preferences || {}));\n  };\n\n  return (\n    <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={__internalRootRef}>\n      <InternalButton\n        ref={triggerRef}\n        className={styles['trigger-button']}\n        disabled={disabled}\n        ariaLabel={title}\n        onClick={() => {\n          setTemporaryPreferences(copyPreferences(preferences || {}));\n          setModalVisible(true);\n        }}\n        variant=\"icon\"\n        iconName=\"settings\"\n        formAction=\"none\"\n      />\n      {!disabled && modalVisible && (\n        <InternalModal\n          className={styles['modal-root']}\n          visible={true}\n          header={title}\n          footer={\n            <InternalBox float=\"right\">\n              <InternalSpaceBetween direction=\"horizontal\" size=\"xs\">\n                <InternalButton\n                  className={styles['cancel-button']}\n                  variant=\"link\"\n                  formAction=\"none\"\n                  onClick={onCancelListener}\n                >\n                  {cancelLabel}\n                </InternalButton>\n                <InternalButton\n                  className={styles['confirm-button']}\n                  variant=\"primary\"\n                  formAction=\"none\"\n                  onClick={onConfirmListener}\n                >\n                  {confirmLabel}\n                </InternalButton>\n              </InternalSpaceBetween>\n            </InternalBox>\n          }\n          closeAriaLabel={cancelLabel}\n          size=\"large\"\n          onDismiss={onCancelListener}\n        >\n          <ModalContent\n            preferences={temporaryPreferences}\n            visibleContentPreference={visibleContentPreference}\n            pageSizePreference={pageSizePreference}\n            wrapLinesPreference={wrapLinesPreference}\n            stripedRowsPreference={stripedRowsPreference}\n            customPreference={customPreference}\n            onChange={changedPreferences =>\n              setTemporaryPreferences(mergePreferences(changedPreferences, temporaryPreferences))\n            }\n          />\n        </InternalModal>\n      )}\n    </div>\n  );\n}\n\napplyDisplayName(CollectionPreferences, 'CollectionPreferences');\n"]}

package/collection-preferences/interfaces.d.ts

@@ -43,6 +43,18 @@ export interface CollectionPreferencesProps<CustomPreferenceType = any> extends
      * You must set the current value in the `preferences.wrapLines` property.
      */
     wrapLinesPreference?: CollectionPreferencesProps.WrapLinesPreference;
+    /**
+     * Configures the built-in "striped rows" preference.
+     *
+     * If you set it, the component displays this preference in the modal.
+     *
+     * It contains the following:
+     * - `label` (string) - Specifies the label for the option checkbox.
+     * - `description` (string) - Specifies the text displayed below the checkbox label.
+     *
+     * You must set the current value in the `preferences.stripedRows` property.
+     */
+    stripedRowsPreference?: CollectionPreferencesProps.StripedRowsPreference;
     /**
      * Configures the built-in "visible content selection" preference (for example, visible columns in a table).
      *
@@ -115,6 +127,7 @@ export declare namespace CollectionPreferencesProps {
     interface Preferences<CustomPreferenceType = any> {
         pageSize?: number;
         wrapLines?: boolean;
+        stripedRows?: boolean;
         visibleContent?: ReadonlyArray<string>;
         custom?: CustomPreferenceType;
     }
@@ -143,5 +156,9 @@ export declare namespace CollectionPreferencesProps {
         label: string;
         description: string;
     }
+    interface StripedRowsPreference {
+        label: string;
+        description: string;
+    }
 }
 //# sourceMappingURL=interfaces.d.ts.map

package/collection-preferences/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/collection-preferences/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,0BAA0B,CAAC,oBAAoB,GAAG,GAAG,CAAE,SAAQ,kBAAkB;IAChG;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;;;;OAYG;IACH,kBAAkB,CAAC,EAAE,0BAA0B,CAAC,kBAAkB,CAAC;IACnE;;;;;;;;;;OAUG;IACH,mBAAmB,CAAC,EAAE,0BAA0B,CAAC,mBAAmB,CAAC;IACrE;;;;;;;;;;;;;;;;;OAiBG;IACH,wBAAwB,CAAC,EAAE,0BAA0B,CAAC,wBAAwB,CAAC;IAC/E;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,0BAA0B,CAAC,WAAW,CAAC,oBAAoB,CAAC,CAAC;IAC3E;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,gBAAgB,CAAC,EAAE,CACjB,WAAW,EAAE,oBAAoB,EACjC,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,oBAAoB,CAAC,KACjD,KAAK,CAAC,SAAS,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IACrC;;;;;;;;;;OAUG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC,0BAA0B,CAAC,WAAW,CAAC,oBAAoB,CAAC,CAAC,CAAC;CACrG;AAED,yBAAiB,0BAA0B,CAAC;IAC1C,UAAiB,WAAW,CAAC,oBAAoB,GAAG,GAAG;QACrD,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,cAAc,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;QACvC,MAAM,CAAC,EAAE,oBAAoB,CAAC;KAC/B;IAED,UAAiB,wBAAwB;QACvC,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,aAAa,CAAC,0BAA0B,CAAC,0BAA0B,CAAC,CAAC;KAC/E;IAED,UAAiB,0BAA0B;QACzC,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,aAAa,CAAC,0BAA0B,CAAC,oBAAoB,CAAC,CAAC;KACzE;IAED,UAAiB,oBAAoB;QACnC,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB;IAED,UAAiB,kBAAkB;QACjC,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;KACxC;IAED,UAAiB,cAAc;QAC7B,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf;IAED,UAAiB,mBAAmB;QAClC,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/collection-preferences/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,0BAA0B,CAAC,oBAAoB,GAAG,GAAG,CAAE,SAAQ,kBAAkB;IAChG;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;;;;OAYG;IACH,kBAAkB,CAAC,EAAE,0BAA0B,CAAC,kBAAkB,CAAC;IACnE;;;;;;;;;;OAUG;IACH,mBAAmB,CAAC,EAAE,0BAA0B,CAAC,mBAAmB,CAAC;IACrE;;;;;;;;;;OAUG;IACH,qBAAqB,CAAC,EAAE,0BAA0B,CAAC,qBAAqB,CAAC;IACzE;;;;;;;;;;;;;;;;;OAiBG;IACH,wBAAwB,CAAC,EAAE,0BAA0B,CAAC,wBAAwB,CAAC;IAC/E;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,0BAA0B,CAAC,WAAW,CAAC,oBAAoB,CAAC,CAAC;IAC3E;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,gBAAgB,CAAC,EAAE,CACjB,WAAW,EAAE,oBAAoB,EACjC,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,oBAAoB,CAAC,KACjD,KAAK,CAAC,SAAS,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IACrC;;;;;;;;;;OAUG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC,0BAA0B,CAAC,WAAW,CAAC,oBAAoB,CAAC,CAAC,CAAC;CACrG;AAED,yBAAiB,0BAA0B,CAAC;IAC1C,UAAiB,WAAW,CAAC,oBAAoB,GAAG,GAAG;QACrD,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,cAAc,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;QACvC,MAAM,CAAC,EAAE,oBAAoB,CAAC;KAC/B;IAED,UAAiB,wBAAwB;QACvC,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,aAAa,CAAC,0BAA0B,CAAC,0BAA0B,CAAC,CAAC;KAC/E;IAED,UAAiB,0BAA0B;QACzC,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,aAAa,CAAC,0BAA0B,CAAC,oBAAoB,CAAC,CAAC;KACzE;IAED,UAAiB,oBAAoB;QACnC,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB;IAED,UAAiB,kBAAkB;QACjC,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;KACxC;IAED,UAAiB,cAAc;QAC7B,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf;IAED,UAAiB,mBAAmB;QAClC,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,MAAM,CAAC;KACrB;IAED,UAAiB,qBAAqB;QACpC,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}

package/collection-preferences/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/collection-preferences/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface CollectionPreferencesProps<CustomPreferenceType = any> extends BaseComponentProps {\n  /**\n   * Specifies the title of the preferences modal dialog. It is also used as an `aria-label` for the trigger button.\n   */\n  title: string;\n  /**\n   * Label of the confirm button in the modal footer.\n   */\n  confirmLabel: string;\n  /**\n   * Label of the cancel button in the modal footer.\n   */\n  cancelLabel: string;\n  /**\n   * Determines whether the preferences trigger button is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Configures the built-in \"page size selection\" preference.\n   *\n   * If you set it, the component displays this preference in the modal.\n   *\n   * It contains the following:\n   * - `title` (string) - Specifies the text displayed at the top of the preference.\n   * - `options` - Specifies an array of options for page size selection. Each entry contains:\n   *   - `value` (number) - The value for the radio button (that is, the number of items per page).\n   *   - `label` (string) - A label for the radio button (for example, \"10 resources\").\n   *\n   * You must set the current value in the `preferences.pageSize` property.\n   */\n  pageSizePreference?: CollectionPreferencesProps.PageSizePreference;\n  /**\n   * Configures the built-in \"wrap lines\" preference.\n   *\n   * If you set it, the component displays this preference in the modal.\n   *\n   * It contains the following:\n   * - `label` (string) - Specifies the label for the option checkbox.\n   * - `description` (string) - Specifies the text displayed below the checkbox label.\n   *\n   * You must set the current value in the `preferences.wrapLines` property.\n   */\n  wrapLinesPreference?: CollectionPreferencesProps.WrapLinesPreference;\n  /**\n   * Configures the built-in \"visible content selection\" preference (for example, visible columns in a table).\n   *\n   * If you set it, the component displays this preference in the modal.\n   *\n   * It contains the following:\n   * - `title` (string) - Specifies the text displayed at the top of the preference.\n   * - `options` - Specifies an array of groups of options for visible content selection.\n   *\n   * Each group of options contains the following:\n   * - `label` (string) - The text to display as a title for the options group.\n   * - `options` - Specifies an aray of options in the group. Each option contains the following:\n   *   - `id` (string) - Corresponds to a column `id` for tables or to a section `id` for cards.\n   *   - `label` (string) - Specifies a short description of the content.\n   *   - `editable` (boolean) - (Optional) Determines whether the user is able to toggle its visibility. This is `true` by default.\n   *\n   * You must set the current list of visible content `id`s in the `preferences.visibleContent` property.\n   */\n  visibleContentPreference?: CollectionPreferencesProps.VisibleContentPreference;\n  /**\n   * Specifies the current preference values. This includes both built-in and custom preferences.\n   *\n   * It contains the following:\n   * - `pageSize` (number) - (Optional)\n   * - `wrapLines` (boolean) - (Optional)\n   * - `visibleContent` (ReadonlyArray<string>) - Specifies the list of visible content `id`s. The order of the `id`s does not influence the display.\n   * - `custom` (CustomPreferenceType) - Specifies the value for your custom preference.\n   */\n  preferences?: CollectionPreferencesProps.Preferences<CustomPreferenceType>;\n  /**\n   * Configures custom preferences. The function receives two parameters:\n   *\n   * - `customValue` (CustomPreferenceType) - Current value for your custom preference. It is initialized using the value you provide in `preferences.custom`.\n   * - `setCustomValue` - A function that is called to notify a state update.\n   *\n   * It should return the content of your custom preference, for example:\n   * ```\n   * (customValue, setCustomValue) => (\n   *   <Checkbox checked={customValue} onChange={({ detail }) => setCustomValue(detail.checked)} />\n   * )\n   * ```\n   *\n   * When the user confirms the changes, the new value is passed in the `detail.custom` property of the `onConfirm` listener.\n   * When the user cancels the changes, the `customValue` is reset to the one present in `preferences.custom` property.\n   *\n   * **Display**\n   * - If any of the built-in preferences (`pageSizePreference`, `wrapLinesPreference`, or `visibleContentPreference`) are displayed,\n   * the custom content is displayed at the bottom of the left column within the modal.\n   * - If no built-in preference is displayed, the custom content occupies the whole modal.\n   */\n  customPreference?: (\n    customValue: CustomPreferenceType,\n    setCustomValue: React.Dispatch<CustomPreferenceType>\n  ) => React.ReactNode;\n  /**\n   * Called when the user cancels a preference change using the cancel button in the modal footer or by dismissing the modal.\n   */\n  onCancel?: NonCancelableEventHandler;\n  /**\n   * Called when the user confirms a preference change using the confirm button in the modal footer.\n   *\n   * The event `detail` contains the following:\n   * - `pageSize` (number) - (Optional) The selected page size value. Available only if you specify the `pageSizePreference` property.\n   * - `wrapLines` (boolean) - (Optional) The current line wrapping preference value. Available only if you specify the `wrapLinesPreference` property.\n   * - `visibleContent` (ReadonlyArray<string>) - (Optional) The list of selected content `id`s. Available only if you specify the `visibleContentPreference` property.\n   * - `custom` (CustomPreferenceType) - (Optional) The selected value for your custom preference.\n   *\n   * The values for all configured preferences are present even if the user didn't change their values.\n   */\n  onConfirm?: NonCancelableEventHandler<CollectionPreferencesProps.Preferences<CustomPreferenceType>>;\n}\n\nexport namespace CollectionPreferencesProps {\n  export interface Preferences<CustomPreferenceType = any> {\n    pageSize?: number;\n    wrapLines?: boolean;\n    visibleContent?: ReadonlyArray<string>;\n    custom?: CustomPreferenceType;\n  }\n\n  export interface VisibleContentPreference {\n    title: string;\n    options: ReadonlyArray<CollectionPreferencesProps.VisibleContentOptionsGroup>;\n  }\n\n  export interface VisibleContentOptionsGroup {\n    label: string;\n    options: ReadonlyArray<CollectionPreferencesProps.VisibleContentOption>;\n  }\n\n  export interface VisibleContentOption {\n    id: string;\n    label: string;\n    editable?: boolean;\n  }\n\n  export interface PageSizePreference {\n    title: string;\n    options: ReadonlyArray<PageSizeOption>;\n  }\n\n  export interface PageSizeOption {\n    value: number;\n    label: string;\n  }\n\n  export interface WrapLinesPreference {\n    label: string;\n    description: string;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/collection-preferences/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface CollectionPreferencesProps<CustomPreferenceType = any> extends BaseComponentProps {\n  /**\n   * Specifies the title of the preferences modal dialog. It is also used as an `aria-label` for the trigger button.\n   */\n  title: string;\n  /**\n   * Label of the confirm button in the modal footer.\n   */\n  confirmLabel: string;\n  /**\n   * Label of the cancel button in the modal footer.\n   */\n  cancelLabel: string;\n  /**\n   * Determines whether the preferences trigger button is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Configures the built-in \"page size selection\" preference.\n   *\n   * If you set it, the component displays this preference in the modal.\n   *\n   * It contains the following:\n   * - `title` (string) - Specifies the text displayed at the top of the preference.\n   * - `options` - Specifies an array of options for page size selection. Each entry contains:\n   *   - `value` (number) - The value for the radio button (that is, the number of items per page).\n   *   - `label` (string) - A label for the radio button (for example, \"10 resources\").\n   *\n   * You must set the current value in the `preferences.pageSize` property.\n   */\n  pageSizePreference?: CollectionPreferencesProps.PageSizePreference;\n  /**\n   * Configures the built-in \"wrap lines\" preference.\n   *\n   * If you set it, the component displays this preference in the modal.\n   *\n   * It contains the following:\n   * - `label` (string) - Specifies the label for the option checkbox.\n   * - `description` (string) - Specifies the text displayed below the checkbox label.\n   *\n   * You must set the current value in the `preferences.wrapLines` property.\n   */\n  wrapLinesPreference?: CollectionPreferencesProps.WrapLinesPreference;\n  /**\n   * Configures the built-in \"striped rows\" preference.\n   *\n   * If you set it, the component displays this preference in the modal.\n   *\n   * It contains the following:\n   * - `label` (string) - Specifies the label for the option checkbox.\n   * - `description` (string) - Specifies the text displayed below the checkbox label.\n   *\n   * You must set the current value in the `preferences.stripedRows` property.\n   */\n  stripedRowsPreference?: CollectionPreferencesProps.StripedRowsPreference;\n  /**\n   * Configures the built-in \"visible content selection\" preference (for example, visible columns in a table).\n   *\n   * If you set it, the component displays this preference in the modal.\n   *\n   * It contains the following:\n   * - `title` (string) - Specifies the text displayed at the top of the preference.\n   * - `options` - Specifies an array of groups of options for visible content selection.\n   *\n   * Each group of options contains the following:\n   * - `label` (string) - The text to display as a title for the options group.\n   * - `options` - Specifies an aray of options in the group. Each option contains the following:\n   *   - `id` (string) - Corresponds to a column `id` for tables or to a section `id` for cards.\n   *   - `label` (string) - Specifies a short description of the content.\n   *   - `editable` (boolean) - (Optional) Determines whether the user is able to toggle its visibility. This is `true` by default.\n   *\n   * You must set the current list of visible content `id`s in the `preferences.visibleContent` property.\n   */\n  visibleContentPreference?: CollectionPreferencesProps.VisibleContentPreference;\n  /**\n   * Specifies the current preference values. This includes both built-in and custom preferences.\n   *\n   * It contains the following:\n   * - `pageSize` (number) - (Optional)\n   * - `wrapLines` (boolean) - (Optional)\n   * - `visibleContent` (ReadonlyArray<string>) - Specifies the list of visible content `id`s. The order of the `id`s does not influence the display.\n   * - `custom` (CustomPreferenceType) - Specifies the value for your custom preference.\n   */\n  preferences?: CollectionPreferencesProps.Preferences<CustomPreferenceType>;\n  /**\n   * Configures custom preferences. The function receives two parameters:\n   *\n   * - `customValue` (CustomPreferenceType) - Current value for your custom preference. It is initialized using the value you provide in `preferences.custom`.\n   * - `setCustomValue` - A function that is called to notify a state update.\n   *\n   * It should return the content of your custom preference, for example:\n   * ```\n   * (customValue, setCustomValue) => (\n   *   <Checkbox checked={customValue} onChange={({ detail }) => setCustomValue(detail.checked)} />\n   * )\n   * ```\n   *\n   * When the user confirms the changes, the new value is passed in the `detail.custom` property of the `onConfirm` listener.\n   * When the user cancels the changes, the `customValue` is reset to the one present in `preferences.custom` property.\n   *\n   * **Display**\n   * - If any of the built-in preferences (`pageSizePreference`, `wrapLinesPreference`, or `visibleContentPreference`) are displayed,\n   * the custom content is displayed at the bottom of the left column within the modal.\n   * - If no built-in preference is displayed, the custom content occupies the whole modal.\n   */\n  customPreference?: (\n    customValue: CustomPreferenceType,\n    setCustomValue: React.Dispatch<CustomPreferenceType>\n  ) => React.ReactNode;\n  /**\n   * Called when the user cancels a preference change using the cancel button in the modal footer or by dismissing the modal.\n   */\n  onCancel?: NonCancelableEventHandler;\n  /**\n   * Called when the user confirms a preference change using the confirm button in the modal footer.\n   *\n   * The event `detail` contains the following:\n   * - `pageSize` (number) - (Optional) The selected page size value. Available only if you specify the `pageSizePreference` property.\n   * - `wrapLines` (boolean) - (Optional) The current line wrapping preference value. Available only if you specify the `wrapLinesPreference` property.\n   * - `visibleContent` (ReadonlyArray<string>) - (Optional) The list of selected content `id`s. Available only if you specify the `visibleContentPreference` property.\n   * - `custom` (CustomPreferenceType) - (Optional) The selected value for your custom preference.\n   *\n   * The values for all configured preferences are present even if the user didn't change their values.\n   */\n  onConfirm?: NonCancelableEventHandler<CollectionPreferencesProps.Preferences<CustomPreferenceType>>;\n}\n\nexport namespace CollectionPreferencesProps {\n  export interface Preferences<CustomPreferenceType = any> {\n    pageSize?: number;\n    wrapLines?: boolean;\n    stripedRows?: boolean;\n    visibleContent?: ReadonlyArray<string>;\n    custom?: CustomPreferenceType;\n  }\n\n  export interface VisibleContentPreference {\n    title: string;\n    options: ReadonlyArray<CollectionPreferencesProps.VisibleContentOptionsGroup>;\n  }\n\n  export interface VisibleContentOptionsGroup {\n    label: string;\n    options: ReadonlyArray<CollectionPreferencesProps.VisibleContentOption>;\n  }\n\n  export interface VisibleContentOption {\n    id: string;\n    label: string;\n    editable?: boolean;\n  }\n\n  export interface PageSizePreference {\n    title: string;\n    options: ReadonlyArray<PageSizeOption>;\n  }\n\n  export interface PageSizeOption {\n    value: number;\n    label: string;\n  }\n\n  export interface WrapLinesPreference {\n    label: string;\n    description: string;\n  }\n\n  export interface StripedRowsPreference {\n    label: string;\n    description: string;\n  }\n}\n"]}