@cloudscape-design/components 3.0.341 → 3.0.342

package/internal/components/cartesian-chart/chart-container.js

@@ -2,12 +2,25 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { forwardRef } from 'react';
 import styles from './styles.css.js';
-export const CartesianChartContainer = forwardRef(({ leftAxisLabel, leftAxisLabelMeasure, bottomAxisLabel, chartPlot, popover }, ref) => {
+import clsx from 'clsx';
+const CONTENT_MIN_HEIGHT_BOUNDARY = 40;
+export const CartesianChartContainer = forwardRef(({ minHeight, fitHeight, leftAxisLabel, leftAxisLabelMeasure, bottomAxisLabel, chartPlot, popover, }, ref) => {
+    if (fitHeight) {
+        return (React.createElement("div", { className: clsx(styles['chart-container'], styles['fit-height']), ref: ref },
+            leftAxisLabel,
+            React.createElement("div", { className: clsx(styles['chart-container-outer'], styles['fit-height']) },
+                leftAxisLabelMeasure,
+                React.createElement("div", { className: styles['chart-container-inner'] },
+                    React.createElement("div", { className: clsx(styles['chart-container-plot-wrapper'], styles['fit-height']), style: { minHeight: Math.max(minHeight, CONTENT_MIN_HEIGHT_BOUNDARY) } },
+                        React.createElement("div", { className: clsx(styles['chart-container-plot'], styles['fit-height']) }, chartPlot)),
+                    React.createElement("div", { className: clsx(styles['chart-container-bottom-labels'], styles['fit-height']) }, bottomAxisLabel)),
+                popover)));
+    }
     return (React.createElement("div", { className: styles['chart-container'], ref: ref },
         leftAxisLabel,
-        React.createElement("div", { className: styles['chart-container__horizontal'] },
+        React.createElement("div", { className: styles['chart-container-outer'] },
             leftAxisLabelMeasure,
-            React.createElement("div", { className: styles['chart-container__vertical'] },
+            React.createElement("div", { className: styles['chart-container-inner'] },
                 chartPlot,
                 bottomAxisLabel),
             popover)));

package/internal/components/cartesian-chart/chart-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-container.js","sourceRoot":"lib/default/","sources":["internal/components/cartesian-chart/chart-container.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAUrC,MAAM,CAAC,MAAM,uBAAuB,GAAG,UAAU,CAC/C,CACE,EAAE,aAAa,EAAE,oBAAoB,EAAE,eAAe,EAAE,SAAS,EAAE,OAAO,EAAgC,EAC1G,GAA8B,EAC9B,EAAE;IACF,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC,EAAE,GAAG,EAAE,GAAG;QAChD,aAAa;QAEd,6BAAK,SAAS,EAAE,MAAM,CAAC,6BAA6B,CAAC;YAClD,oBAAoB;YAErB,6BAAK,SAAS,EAAE,MAAM,CAAC,2BAA2B,CAAC;gBAChD,SAAS;gBAET,eAAe,CACZ;YAEL,OAAO,CACJ,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { forwardRef } from 'react';\nimport styles from './styles.css.js';\n\ninterface CartesianChartContainerProps {\n  leftAxisLabel: React.ReactNode;\n  leftAxisLabelMeasure: React.ReactNode;\n  bottomAxisLabel: React.ReactNode;\n  chartPlot: React.ReactNode;\n  popover: React.ReactNode;\n}\n\nexport const CartesianChartContainer = forwardRef(\n  (\n    { leftAxisLabel, leftAxisLabelMeasure, bottomAxisLabel, chartPlot, popover }: CartesianChartContainerProps,\n    ref: React.Ref<HTMLDivElement>\n  ) => {\n    return (\n      <div className={styles['chart-container']} ref={ref}>\n        {leftAxisLabel}\n\n        <div className={styles['chart-container__horizontal']}>\n          {leftAxisLabelMeasure}\n\n          <div className={styles['chart-container__vertical']}>\n            {chartPlot}\n\n            {bottomAxisLabel}\n          </div>\n\n          {popover}\n        </div>\n      </div>\n    );\n  }\n);\n"]}
+{"version":3,"file":"chart-container.js","sourceRoot":"lib/default/","sources":["internal/components/cartesian-chart/chart-container.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,IAAI,MAAM,MAAM,CAAC;AAYxB,MAAM,2BAA2B,GAAG,EAAE,CAAC;AAEvC,MAAM,CAAC,MAAM,uBAAuB,GAAG,UAAU,CAC/C,CACE,EACE,SAAS,EACT,SAAS,EACT,aAAa,EACb,oBAAoB,EACpB,eAAe,EACf,SAAS,EACT,OAAO,GACsB,EAC/B,GAA8B,EAC9B,EAAE;IACF,IAAI,SAAS,EAAE;QACb,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG;YAC5E,aAAa;YAEd,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,uBAAuB,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC;gBACxE,oBAAoB;gBAErB,6BAAK,SAAS,EAAE,MAAM,CAAC,uBAAuB,CAAC;oBAC7C,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,8BAA8B,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC,EAC7E,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,2BAA2B,CAAC,EAAE;wBAEtE,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,sBAAsB,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC,IAAG,SAAS,CAAO,CACzF;oBAEN,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,+BAA+B,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC,IAChF,eAAe,CACZ,CACF;gBAEL,OAAO,CACJ,CACF,CACP,CAAC;KACH;IAED,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC,EAAE,GAAG,EAAE,GAAG;QAChD,aAAa;QAEd,6BAAK,SAAS,EAAE,MAAM,CAAC,uBAAuB,CAAC;YAC5C,oBAAoB;YAErB,6BAAK,SAAS,EAAE,MAAM,CAAC,uBAAuB,CAAC;gBAC5C,SAAS;gBACT,eAAe,CACZ;YAEL,OAAO,CACJ,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { forwardRef } from 'react';\nimport styles from './styles.css.js';\nimport clsx from 'clsx';\n\ninterface CartesianChartContainerProps {\n  minHeight: number;\n  fitHeight: boolean;\n  leftAxisLabel: React.ReactNode;\n  leftAxisLabelMeasure: React.ReactNode;\n  bottomAxisLabel: React.ReactNode;\n  chartPlot: React.ReactNode;\n  popover: React.ReactNode;\n}\n\nconst CONTENT_MIN_HEIGHT_BOUNDARY = 40;\n\nexport const CartesianChartContainer = forwardRef(\n  (\n    {\n      minHeight,\n      fitHeight,\n      leftAxisLabel,\n      leftAxisLabelMeasure,\n      bottomAxisLabel,\n      chartPlot,\n      popover,\n    }: CartesianChartContainerProps,\n    ref: React.Ref<HTMLDivElement>\n  ) => {\n    if (fitHeight) {\n      return (\n        <div className={clsx(styles['chart-container'], styles['fit-height'])} ref={ref}>\n          {leftAxisLabel}\n\n          <div className={clsx(styles['chart-container-outer'], styles['fit-height'])}>\n            {leftAxisLabelMeasure}\n\n            <div className={styles['chart-container-inner']}>\n              <div\n                className={clsx(styles['chart-container-plot-wrapper'], styles['fit-height'])}\n                style={{ minHeight: Math.max(minHeight, CONTENT_MIN_HEIGHT_BOUNDARY) }}\n              >\n                <div className={clsx(styles['chart-container-plot'], styles['fit-height'])}>{chartPlot}</div>\n              </div>\n\n              <div className={clsx(styles['chart-container-bottom-labels'], styles['fit-height'])}>\n                {bottomAxisLabel}\n              </div>\n            </div>\n\n            {popover}\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <div className={styles['chart-container']} ref={ref}>\n        {leftAxisLabel}\n\n        <div className={styles['chart-container-outer']}>\n          {leftAxisLabelMeasure}\n\n          <div className={styles['chart-container-inner']}>\n            {chartPlot}\n            {bottomAxisLabel}\n          </div>\n\n          {popover}\n        </div>\n      </div>\n    );\n  }\n);\n"]}

package/internal/components/cartesian-chart/interfaces.d.ts

@@ -71,6 +71,7 @@ export interface CartesianChartProps<T extends ChartDataTypes, Series> extends B
     /**
      * An optional pixel value number that fixes the height of the chart area.
      * If not set explicitly, the component will use a default height that is defined internally.
+     * When used with `fitHeight`, this property defines the minimum height of the chart area.
      */
     height?: number;
     /**
@@ -155,6 +156,10 @@ export interface CartesianChartProps<T extends ChartDataTypes, Series> extends B
      * Called when the highlighted series has changed because of user interaction.
      */
     onHighlightChange?: NonCancelableEventHandler<CartesianChartProps.HighlightChangeDetail<Series>>;
+    /**
+     * Enable this property to make the chart fit into the available height of the parent container.
+     */
+    fitHeight?: boolean;
 }
 export declare namespace CartesianChartProps {
     interface FilterChangeDetail<Series> {

package/internal/components/cartesian-chart/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["internal/components/cartesian-chart/interfaces.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["internal/components/cartesian-chart/interfaces.ts"],"names":[],"mappings":"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"}

package/internal/components/cartesian-chart/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["internal/components/cartesian-chart/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 '../../base-component';\nimport { NonCancelableEventHandler } from '../../events';\n\nexport interface CartesianChartProps<T extends ChartDataTypes, Series> extends BaseComponentProps {\n  /**\n   * Determines the type of scale for values on the x axis.\n   */\n  xScaleType?: ScaleType;\n\n  /**\n   * Determines the type of scale for values on the y axis.\n   */\n  yScaleType?: 'linear' | 'log';\n\n  /**\n   * Determines the domain of the x axis, i.e. the range of values that will be visible in the chart.\n   * For numerical and time-based data this is represented as an array with two values: `[minimumValue, maximumValue]`.\n   * For categorical data this is represented as an array of strings that determine the categories to display.\n   *\n   * It is recommended to set this explicitly. If not, the component will determine a domain that fits all data points.\n   * When controlling this directly, make sure to update the value based on filtering changes.\n   */\n  xDomain?: T extends unknown ? ReadonlyArray<T> : ReadonlyArray<T>;\n\n  /**\n   * Determines the domain of the y axis, i.e. the range of values that will be visible in the chart.\n   * The domain is defined by a tuple: `[minimumValue, maximumValue]`.\n   *\n   * It is recommended to set this explicitly. If not, the component will determine a domain that fits all data points.\n   * When controlling this directly, make sure to update the value based on filtering changes.\n   */\n  yDomain?: ReadonlyArray<number>;\n\n  /**\n   * The title of the x axis.\n   */\n  xTitle?: string;\n\n  /**\n   * The title of the y axis.\n   */\n  yTitle?: string;\n\n  /**\n   * Optional title for the legend.\n   */\n  legendTitle?: string;\n\n  /**\n   * ARIA label that is assigned to the chart itself. It should match the visible label on the page, e.g. in the container header.\n   * Do not use `ariaLabel` and `ariaLabelledby` at the same time.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Sets `aria-labelledby` on the chart itself.\n   * If there is a visible label for the chart on the page, e.g. in the container header, set this property to the ID of that header element.\n   * Do not use `ariaLabel` and `ariaLabelledby` at the same time.\n   */\n  ariaLabelledby?: string;\n\n  /**\n   * A description of the chart that assistive technologies can use (through `aria-describedby`).\n   * Provide a concise summary of the data visualized in the chart.\n   */\n  ariaDescription?: string;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   * @i18n\n   */\n  i18nStrings?: CartesianChartProps.I18nStrings<T>;\n\n  /**\n   * Function to format the displayed label of an x axis tick.\n   */\n  xTickFormatter?: CartesianChartProps.TickFormatter<T>;\n\n  /**\n   * Function to format the displayed label of a y axis tick.\n   */\n  yTickFormatter?: CartesianChartProps.TickFormatter<number>;\n\n  /**\n   * An optional pixel value number that fixes the height of the chart area.\n   * If not set explicitly, the component will use a default height that is defined internally.\n   */\n  height?: number;\n\n  /**\n   * Determines the maximum width the detail popover will be limited to.\n   */\n  detailPopoverSize?: 'small' | 'medium' | 'large';\n\n  /**\n   * Additional content that is displayed at the bottom of the detail popover.\n   */\n  detailPopoverFooter?: CartesianChartProps.DetailPopoverFooter<T>;\n\n  /**\n   * When set to `true`, the legend beneath the chart is not displayed.\n   * It is highly recommended to keep this set to `false`.\n   */\n  hideLegend?: boolean;\n\n  /**\n   * When set to `true`, the default filtering dropdown is not displayed.\n   * It is still possible to render additional filters with the `additionalFilters` slot.\n   */\n  hideFilter?: boolean;\n\n  /**\n   * Additional filters that are added above the chart component.\n   * Make sure to update the `data` property when any of your custom filters change the data to be displayed.\n   */\n  additionalFilters?: React.ReactNode;\n\n  /**\n   * The currently highlighted data series, usually through hovering over a series or the legend.\n   * A value of `null` means no series is highlighted.\n   *\n   * - If you do not set this property, series are highlighted automatically when hovering over one of the triggers (uncontrolled behavior).\n   * - If you explicitly set this property, you must set an `onHighlightChange` listener to update this property when a series should be highlighted (controlled behavior).\n   */\n  highlightedSeries?: Series | null;\n\n  /**\n   * An array of series objects that determines which of the data series are currently displayed, i.e. not filtered out.\n   * - If you do not set this property, series are shown and hidden automatically when using the default filter component (uncontrolled behavior).\n   * - If you explicitly set this property, you must set an `onFilterChange` listener to update this property when the visible series should change, or when one of your custom filters changes the number of visible series (controlled behavior).\n   */\n  visibleSeries?: ReadonlyArray<Series>;\n\n  /**\n   * Specifies the current status of loading data.\n   * * `loading`: data fetching is in progress.\n   * * `finished`: data has loaded successfully.\n   * * `error`: an error occurred during fetch. You should provide user an option to recover.\n   **/\n  statusType?: 'loading' | 'finished' | 'error';\n\n  /**\n   * Content that is displayed when the data passed to the component is empty.\n   */\n  empty?: React.ReactNode;\n\n  /**\n   * Content that is displayed when there is no data to display due to the built-in filtering.\n   */\n  noMatch?: React.ReactNode;\n\n  /**\n   * Text that is displayed when the chart is loading, i.e. when `statusType` is set to `\"loading\"`.\n   * @i18n\n   */\n  loadingText?: string;\n\n  /**\n   * Text that is displayed when the chart is in error state, i.e. when `statusType` is set to `\"error\"`.\n   * @i18n\n   */\n  errorText?: string;\n\n  /**\n   * Text for the recovery button that is displayed next to the error text.\n   * @i18n\n   **/\n  recoveryText?: string;\n\n  /**\n   * Called when the user clicks the recovery button that appears when there is an error state.\n   * Use this to enable the user to retry a failed request or provide another option for the user\n   * to recover from the error.\n   */\n  onRecoveryClick?: NonCancelableEventHandler;\n\n  /**\n   * Called when the values of the internal filter component changed.\n   * This will **not** be called for any custom filter components you have defined in `additionalFilters`.\n   */\n  onFilterChange?: NonCancelableEventHandler<CartesianChartProps.FilterChangeDetail<Series>>;\n\n  /**\n   * Called when the highlighted series has changed because of user interaction.\n   */\n  onHighlightChange?: NonCancelableEventHandler<CartesianChartProps.HighlightChangeDetail<Series>>;\n}\n\nexport namespace CartesianChartProps {\n  export interface FilterChangeDetail<Series> {\n    visibleSeries: ReadonlyArray<Series>;\n  }\n\n  export interface HighlightChangeDetail<Series> {\n    highlightedSeries: Series | null;\n  }\n\n  export interface TickFormatter<T> {\n    (value: T): string;\n  }\n\n  export interface ValueFormatter<YType, XType = null> {\n    (yValue: YType, xValue: XType): string;\n  }\n\n  export interface DetailPopoverFooter<T> {\n    (xValue: T): React.ReactNode;\n  }\n\n  export interface I18nStrings<T> {\n    /** Visible label of the default filter */\n    filterLabel?: string;\n\n    /** Placeholder text of the default filter */\n    filterPlaceholder?: string;\n\n    /** ARIA label for the default filter which is appended to any option that is selected */\n    filterSelectedAriaLabel?: string;\n\n    /** ARIA label that is associated with the legend in case there is no visible `legendTitle` defined */\n    legendAriaLabel?: string;\n\n    /** ARIA label for details popover dismiss button */\n    detailPopoverDismissAriaLabel?: string;\n\n    /** Name of the ARIA role description of the chart, e.g. \"line chart\" */\n    chartAriaRoleDescription?: string;\n\n    /** Name of the ARIA role description of the x axis, e.g. \"x axis\" */\n    xAxisAriaRoleDescription?: string;\n\n    /** Name of the ARIA role description of the y axis, e.g. \"y axis\" */\n    yAxisAriaRoleDescription?: string;\n\n    /** @deprecated Use `xTickFormatter` on the component instead. */\n    xTickFormatter?: TickFormatter<T>;\n\n    /** @deprecated Use `yTickFormatter` on the component instead. */\n    yTickFormatter?: TickFormatter<number>;\n  }\n}\n\nexport type ChartDataTypes = number | string | Date;\n\nexport type ScaleType = 'linear' | 'log' | 'time' | 'categorical';\nexport type XScaleType = 'linear' | 'log' | 'time' | 'categorical';\nexport type YScaleType = 'linear' | 'log';\nexport type ScaleRange = [number, number];\n\nexport type ChartDomain<T extends ChartDataTypes> = T extends unknown ? ReadonlyArray<T> : ReadonlyArray<T>;\nexport type XDomain<T extends ChartDataTypes> = ChartDomain<T>;\nexport type YDomain = ChartDomain<number>;\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["internal/components/cartesian-chart/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 '../../base-component';\nimport { NonCancelableEventHandler } from '../../events';\n\nexport interface CartesianChartProps<T extends ChartDataTypes, Series> extends BaseComponentProps {\n  /**\n   * Determines the type of scale for values on the x axis.\n   */\n  xScaleType?: ScaleType;\n\n  /**\n   * Determines the type of scale for values on the y axis.\n   */\n  yScaleType?: 'linear' | 'log';\n\n  /**\n   * Determines the domain of the x axis, i.e. the range of values that will be visible in the chart.\n   * For numerical and time-based data this is represented as an array with two values: `[minimumValue, maximumValue]`.\n   * For categorical data this is represented as an array of strings that determine the categories to display.\n   *\n   * It is recommended to set this explicitly. If not, the component will determine a domain that fits all data points.\n   * When controlling this directly, make sure to update the value based on filtering changes.\n   */\n  xDomain?: T extends unknown ? ReadonlyArray<T> : ReadonlyArray<T>;\n\n  /**\n   * Determines the domain of the y axis, i.e. the range of values that will be visible in the chart.\n   * The domain is defined by a tuple: `[minimumValue, maximumValue]`.\n   *\n   * It is recommended to set this explicitly. If not, the component will determine a domain that fits all data points.\n   * When controlling this directly, make sure to update the value based on filtering changes.\n   */\n  yDomain?: ReadonlyArray<number>;\n\n  /**\n   * The title of the x axis.\n   */\n  xTitle?: string;\n\n  /**\n   * The title of the y axis.\n   */\n  yTitle?: string;\n\n  /**\n   * Optional title for the legend.\n   */\n  legendTitle?: string;\n\n  /**\n   * ARIA label that is assigned to the chart itself. It should match the visible label on the page, e.g. in the container header.\n   * Do not use `ariaLabel` and `ariaLabelledby` at the same time.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Sets `aria-labelledby` on the chart itself.\n   * If there is a visible label for the chart on the page, e.g. in the container header, set this property to the ID of that header element.\n   * Do not use `ariaLabel` and `ariaLabelledby` at the same time.\n   */\n  ariaLabelledby?: string;\n\n  /**\n   * A description of the chart that assistive technologies can use (through `aria-describedby`).\n   * Provide a concise summary of the data visualized in the chart.\n   */\n  ariaDescription?: string;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   * @i18n\n   */\n  i18nStrings?: CartesianChartProps.I18nStrings<T>;\n\n  /**\n   * Function to format the displayed label of an x axis tick.\n   */\n  xTickFormatter?: CartesianChartProps.TickFormatter<T>;\n\n  /**\n   * Function to format the displayed label of a y axis tick.\n   */\n  yTickFormatter?: CartesianChartProps.TickFormatter<number>;\n\n  /**\n   * An optional pixel value number that fixes the height of the chart area.\n   * If not set explicitly, the component will use a default height that is defined internally.\n   * When used with `fitHeight`, this property defines the minimum height of the chart area.\n   */\n  height?: number;\n\n  /**\n   * Determines the maximum width the detail popover will be limited to.\n   */\n  detailPopoverSize?: 'small' | 'medium' | 'large';\n\n  /**\n   * Additional content that is displayed at the bottom of the detail popover.\n   */\n  detailPopoverFooter?: CartesianChartProps.DetailPopoverFooter<T>;\n\n  /**\n   * When set to `true`, the legend beneath the chart is not displayed.\n   * It is highly recommended to keep this set to `false`.\n   */\n  hideLegend?: boolean;\n\n  /**\n   * When set to `true`, the default filtering dropdown is not displayed.\n   * It is still possible to render additional filters with the `additionalFilters` slot.\n   */\n  hideFilter?: boolean;\n\n  /**\n   * Additional filters that are added above the chart component.\n   * Make sure to update the `data` property when any of your custom filters change the data to be displayed.\n   */\n  additionalFilters?: React.ReactNode;\n\n  /**\n   * The currently highlighted data series, usually through hovering over a series or the legend.\n   * A value of `null` means no series is highlighted.\n   *\n   * - If you do not set this property, series are highlighted automatically when hovering over one of the triggers (uncontrolled behavior).\n   * - If you explicitly set this property, you must set an `onHighlightChange` listener to update this property when a series should be highlighted (controlled behavior).\n   */\n  highlightedSeries?: Series | null;\n\n  /**\n   * An array of series objects that determines which of the data series are currently displayed, i.e. not filtered out.\n   * - If you do not set this property, series are shown and hidden automatically when using the default filter component (uncontrolled behavior).\n   * - If you explicitly set this property, you must set an `onFilterChange` listener to update this property when the visible series should change, or when one of your custom filters changes the number of visible series (controlled behavior).\n   */\n  visibleSeries?: ReadonlyArray<Series>;\n\n  /**\n   * Specifies the current status of loading data.\n   * * `loading`: data fetching is in progress.\n   * * `finished`: data has loaded successfully.\n   * * `error`: an error occurred during fetch. You should provide user an option to recover.\n   **/\n  statusType?: 'loading' | 'finished' | 'error';\n\n  /**\n   * Content that is displayed when the data passed to the component is empty.\n   */\n  empty?: React.ReactNode;\n\n  /**\n   * Content that is displayed when there is no data to display due to the built-in filtering.\n   */\n  noMatch?: React.ReactNode;\n\n  /**\n   * Text that is displayed when the chart is loading, i.e. when `statusType` is set to `\"loading\"`.\n   * @i18n\n   */\n  loadingText?: string;\n\n  /**\n   * Text that is displayed when the chart is in error state, i.e. when `statusType` is set to `\"error\"`.\n   * @i18n\n   */\n  errorText?: string;\n\n  /**\n   * Text for the recovery button that is displayed next to the error text.\n   * @i18n\n   **/\n  recoveryText?: string;\n\n  /**\n   * Called when the user clicks the recovery button that appears when there is an error state.\n   * Use this to enable the user to retry a failed request or provide another option for the user\n   * to recover from the error.\n   */\n  onRecoveryClick?: NonCancelableEventHandler;\n\n  /**\n   * Called when the values of the internal filter component changed.\n   * This will **not** be called for any custom filter components you have defined in `additionalFilters`.\n   */\n  onFilterChange?: NonCancelableEventHandler<CartesianChartProps.FilterChangeDetail<Series>>;\n\n  /**\n   * Called when the highlighted series has changed because of user interaction.\n   */\n  onHighlightChange?: NonCancelableEventHandler<CartesianChartProps.HighlightChangeDetail<Series>>;\n\n  /**\n   * Enable this property to make the chart fit into the available height of the parent container.\n   */\n  fitHeight?: boolean;\n}\n\nexport namespace CartesianChartProps {\n  export interface FilterChangeDetail<Series> {\n    visibleSeries: ReadonlyArray<Series>;\n  }\n\n  export interface HighlightChangeDetail<Series> {\n    highlightedSeries: Series | null;\n  }\n\n  export interface TickFormatter<T> {\n    (value: T): string;\n  }\n\n  export interface ValueFormatter<YType, XType = null> {\n    (yValue: YType, xValue: XType): string;\n  }\n\n  export interface DetailPopoverFooter<T> {\n    (xValue: T): React.ReactNode;\n  }\n\n  export interface I18nStrings<T> {\n    /** Visible label of the default filter */\n    filterLabel?: string;\n\n    /** Placeholder text of the default filter */\n    filterPlaceholder?: string;\n\n    /** ARIA label for the default filter which is appended to any option that is selected */\n    filterSelectedAriaLabel?: string;\n\n    /** ARIA label that is associated with the legend in case there is no visible `legendTitle` defined */\n    legendAriaLabel?: string;\n\n    /** ARIA label for details popover dismiss button */\n    detailPopoverDismissAriaLabel?: string;\n\n    /** Name of the ARIA role description of the chart, e.g. \"line chart\" */\n    chartAriaRoleDescription?: string;\n\n    /** Name of the ARIA role description of the x axis, e.g. \"x axis\" */\n    xAxisAriaRoleDescription?: string;\n\n    /** Name of the ARIA role description of the y axis, e.g. \"y axis\" */\n    yAxisAriaRoleDescription?: string;\n\n    /** @deprecated Use `xTickFormatter` on the component instead. */\n    xTickFormatter?: TickFormatter<T>;\n\n    /** @deprecated Use `yTickFormatter` on the component instead. */\n    yTickFormatter?: TickFormatter<number>;\n  }\n}\n\nexport type ChartDataTypes = number | string | Date;\n\nexport type ScaleType = 'linear' | 'log' | 'time' | 'categorical';\nexport type XScaleType = 'linear' | 'log' | 'time' | 'categorical';\nexport type YScaleType = 'linear' | 'log';\nexport type ScaleRange = [number, number];\n\nexport type ChartDomain<T extends ChartDataTypes> = T extends unknown ? ReadonlyArray<T> : ReadonlyArray<T>;\nexport type XDomain<T extends ChartDataTypes> = ChartDomain<T>;\nexport type YDomain = ChartDomain<number>;\n"]}

package/internal/components/cartesian-chart/styles.css.js

@@ -1,28 +1,32 @@
 
     import './styles.scoped.css';
     export default {
-  "axis": "awsui_axis_f0fot_pe91i_9",
-  "vertical-marker": "awsui_vertical-marker_f0fot_pe91i_10",
-  "axis--emphasized": "awsui_axis--emphasized_f0fot_pe91i_15",
-  "axis-label": "awsui_axis-label_f0fot_pe91i_19",
-  "axis-label--x": "awsui_axis-label--x_f0fot_pe91i_24",
-  "axis-label--y": "awsui_axis-label--y_f0fot_pe91i_25",
-  "grid": "awsui_grid_f0fot_pe91i_29",
-  "ticks__line": "awsui_ticks__line_f0fot_pe91i_34",
-  "ticks__text": "awsui_ticks__text_f0fot_pe91i_39",
-  "ticks--y": "awsui_ticks--y_f0fot_pe91i_44",
-  "ticks--x": "awsui_ticks--x_f0fot_pe91i_45",
-  "ticks--bottom": "awsui_ticks--bottom_f0fot_pe91i_49",
-  "labels-left": "awsui_labels-left_f0fot_pe91i_54",
-  "ticks": "awsui_ticks_f0fot_pe91i_34",
-  "labels-left__label": "awsui_labels-left__label_f0fot_pe91i_69",
-  "labels-left--hidden": "awsui_labels-left--hidden_f0fot_pe91i_73",
-  "labels-bottom": "awsui_labels-bottom_f0fot_pe91i_81",
-  "vertical-marker-circle": "awsui_vertical-marker-circle_f0fot_pe91i_92",
-  "vertical-marker-circle-active": "awsui_vertical-marker-circle-active_f0fot_pe91i_98",
-  "focus-outline": "awsui_focus-outline_f0fot_pe91i_103",
-  "chart-container": "awsui_chart-container_f0fot_pe91i_111",
-  "chart-container__vertical": "awsui_chart-container__vertical_f0fot_pe91i_117",
-  "chart-container__horizontal": "awsui_chart-container__horizontal_f0fot_pe91i_123"
+  "axis": "awsui_axis_f0fot_1xwwo_9",
+  "vertical-marker": "awsui_vertical-marker_f0fot_1xwwo_10",
+  "axis--emphasized": "awsui_axis--emphasized_f0fot_1xwwo_15",
+  "axis-label": "awsui_axis-label_f0fot_1xwwo_19",
+  "axis-label--x": "awsui_axis-label--x_f0fot_1xwwo_24",
+  "axis-label--y": "awsui_axis-label--y_f0fot_1xwwo_25",
+  "grid": "awsui_grid_f0fot_1xwwo_29",
+  "ticks__line": "awsui_ticks__line_f0fot_1xwwo_34",
+  "ticks__text": "awsui_ticks__text_f0fot_1xwwo_39",
+  "ticks--y": "awsui_ticks--y_f0fot_1xwwo_44",
+  "ticks--x": "awsui_ticks--x_f0fot_1xwwo_45",
+  "ticks--bottom": "awsui_ticks--bottom_f0fot_1xwwo_49",
+  "labels-left": "awsui_labels-left_f0fot_1xwwo_54",
+  "ticks": "awsui_ticks_f0fot_1xwwo_34",
+  "labels-left__label": "awsui_labels-left__label_f0fot_1xwwo_69",
+  "labels-left--hidden": "awsui_labels-left--hidden_f0fot_1xwwo_73",
+  "labels-bottom": "awsui_labels-bottom_f0fot_1xwwo_81",
+  "vertical-marker-circle": "awsui_vertical-marker-circle_f0fot_1xwwo_92",
+  "vertical-marker-circle-active": "awsui_vertical-marker-circle-active_f0fot_1xwwo_98",
+  "focus-outline": "awsui_focus-outline_f0fot_1xwwo_103",
+  "chart-container": "awsui_chart-container_f0fot_1xwwo_111",
+  "fit-height": "awsui_fit-height_f0fot_1xwwo_116",
+  "chart-container-outer": "awsui_chart-container-outer_f0fot_1xwwo_121",
+  "chart-container-inner": "awsui_chart-container-inner_f0fot_1xwwo_128",
+  "chart-container-plot-wrapper": "awsui_chart-container-plot-wrapper_f0fot_1xwwo_135",
+  "chart-container-plot": "awsui_chart-container-plot_f0fot_1xwwo_135",
+  "chart-container-bottom-labels": "awsui_chart-container-bottom-labels_f0fot_1xwwo_150"
 };
   

package/internal/components/cartesian-chart/styles.scoped.css

@@ -6,101 +6,101 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_axis_f0fot_pe91i_9:not(#\9),
-.awsui_vertical-marker_f0fot_pe91i_10:not(#\9) {
+.awsui_axis_f0fot_1xwwo_9:not(#\9),
+.awsui_vertical-marker_f0fot_1xwwo_10:not(#\9) {
   stroke: var(--color-charts-line-axis-j3qg2k, #d1d5db);
   stroke-width: 1px;
 }
 
-.awsui_axis--emphasized_f0fot_pe91i_15:not(#\9) {
+.awsui_axis--emphasized_f0fot_1xwwo_15:not(#\9) {
   stroke-width: 2px;
 }
 
-.awsui_axis-label_f0fot_pe91i_19:not(#\9) {
+.awsui_axis-label_f0fot_1xwwo_19:not(#\9) {
   font-weight: bold;
   fill: var(--color-text-body-default-su7kuo, #000716);
 }
 
-.awsui_axis-label--x_f0fot_pe91i_24:not(#\9),
-.awsui_axis-label--y_f0fot_pe91i_25:not(#\9) {
+.awsui_axis-label--x_f0fot_1xwwo_24:not(#\9),
+.awsui_axis-label--y_f0fot_1xwwo_25:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_grid_f0fot_pe91i_29:not(#\9) {
+.awsui_grid_f0fot_1xwwo_29:not(#\9) {
   stroke: var(--color-charts-line-grid-mz4lye, #d1d5db);
   stroke-width: 1px;
 }
 
-.awsui_ticks__line_f0fot_pe91i_34:not(#\9) {
+.awsui_ticks__line_f0fot_1xwwo_34:not(#\9) {
   stroke: var(--color-charts-line-tick-arwxlx, #d1d5db);
   stroke-width: 1px;
 }
 
-.awsui_ticks__text_f0fot_pe91i_39:not(#\9) {
+.awsui_ticks__text_f0fot_1xwwo_39:not(#\9) {
   font-size: var(--font-chart-detail-size-gtiv3j, 12px);
   fill: var(--color-text-body-secondary-he5d85, #414d5c);
 }
 
-.awsui_ticks--y_f0fot_pe91i_44:not(#\9),
-.awsui_ticks--x_f0fot_pe91i_45:not(#\9) {
+.awsui_ticks--y_f0fot_1xwwo_44:not(#\9),
+.awsui_ticks--x_f0fot_1xwwo_45:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_ticks--bottom_f0fot_pe91i_49 > .awsui_ticks__text_f0fot_pe91i_39:not(#\9) {
+.awsui_ticks--bottom_f0fot_1xwwo_49 > .awsui_ticks__text_f0fot_1xwwo_39:not(#\9) {
   text-anchor: middle;
   dominant-baseline: hanging;
 }
 
-.awsui_labels-left_f0fot_pe91i_54 > .awsui_ticks_f0fot_pe91i_34 > .awsui_ticks__text_f0fot_pe91i_39:not(#\9) {
+.awsui_labels-left_f0fot_1xwwo_54 > .awsui_ticks_f0fot_1xwwo_34 > .awsui_ticks__text_f0fot_1xwwo_39:not(#\9) {
   text-anchor: end;
   dominant-baseline: central;
 }
 
-.awsui_labels-left_f0fot_pe91i_54:not(#\9) {
+.awsui_labels-left_f0fot_1xwwo_54:not(#\9) {
   position: relative;
   margin-right: 12px;
 }
-.awsui_labels-left_f0fot_pe91i_54 > .awsui_axis-label_f0fot_pe91i_19:not(#\9) {
+.awsui_labels-left_f0fot_1xwwo_54 > .awsui_axis-label_f0fot_1xwwo_19:not(#\9) {
   position: absolute;
   visibility: visible;
   white-space: nowrap;
 }
 
-.awsui_labels-left__label_f0fot_pe91i_69:not(#\9) {
+.awsui_labels-left__label_f0fot_1xwwo_69:not(#\9) {
   position: absolute;
 }
 
-.awsui_labels-left--hidden_f0fot_pe91i_73:not(#\9) {
+.awsui_labels-left--hidden_f0fot_1xwwo_73:not(#\9) {
   visibility: hidden;
 }
-.awsui_labels-left--hidden_f0fot_pe91i_73 > .awsui_labels-left__label_f0fot_pe91i_69:not(#\9) {
+.awsui_labels-left--hidden_f0fot_1xwwo_73 > .awsui_labels-left__label_f0fot_1xwwo_69:not(#\9) {
   position: relative;
   white-space: nowrap;
 }
 
-.awsui_labels-bottom_f0fot_pe91i_81:not(#\9) {
+.awsui_labels-bottom_f0fot_1xwwo_81:not(#\9) {
   position: relative;
   display: block;
   width: 100%;
   overflow: visible;
 }
 
-.awsui_vertical-marker_f0fot_pe91i_10:not(#\9) {
+.awsui_vertical-marker_f0fot_1xwwo_10:not(#\9) {
   pointer-events: none;
 }
 
-.awsui_vertical-marker-circle_f0fot_pe91i_92:not(#\9) {
+.awsui_vertical-marker-circle_f0fot_1xwwo_92:not(#\9) {
   fill: var(--color-background-container-content-og3y0v, #ffffff);
   pointer-events: none;
   stroke-width: var(--border-line-chart-width-qfyiov, 2px);
 }
 
-.awsui_vertical-marker-circle-active_f0fot_pe91i_98:not(#\9) {
+.awsui_vertical-marker-circle-active_f0fot_1xwwo_98:not(#\9) {
   cursor: pointer;
   stroke-width: var(--border-line-chart-width-qfyiov, 2px);
 }
 
-.awsui_focus-outline_f0fot_pe91i_103:not(#\9) {
+.awsui_focus-outline_f0fot_1xwwo_103:not(#\9) {
   outline: none;
   pointer-events: none;
   fill: none;
@@ -108,18 +108,45 @@
   stroke-width: 2px;
 }
 
-.awsui_chart-container_f0fot_pe91i_111:not(#\9) {
+.awsui_chart-container_f0fot_1xwwo_111:not(#\9) {
   display: flex;
   width: 100%;
   flex-direction: column;
 }
+.awsui_chart-container_f0fot_1xwwo_111.awsui_fit-height_f0fot_1xwwo_116:not(#\9) {
+  height: 100%;
+  min-height: inherit;
+}
+
+.awsui_chart-container-outer_f0fot_1xwwo_121:not(#\9) {
+  display: flex;
+}
+.awsui_chart-container-outer_f0fot_1xwwo_121.awsui_fit-height_f0fot_1xwwo_116:not(#\9) {
+  flex: 1;
+}
 
-.awsui_chart-container__vertical_f0fot_pe91i_117:not(#\9) {
+.awsui_chart-container-inner_f0fot_1xwwo_128:not(#\9) {
+  position: relative;
   display: flex;
   flex-direction: column;
   width: 100%;
 }
 
-.awsui_chart-container__horizontal_f0fot_pe91i_123:not(#\9) {
-  display: flex;
+.awsui_chart-container-plot-wrapper_f0fot_1xwwo_135.awsui_fit-height_f0fot_1xwwo_116:not(#\9) {
+  display: block;
+  position: relative;
+  flex: 1;
+}
+
+.awsui_chart-container-plot_f0fot_1xwwo_135.awsui_fit-height_f0fot_1xwwo_116:not(#\9) {
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.awsui_chart-container-bottom-labels_f0fot_1xwwo_150.awsui_fit-height_f0fot_1xwwo_116:not(#\9) {
+  display: block;
 }

package/internal/components/cartesian-chart/styles.selectors.js

@@ -2,28 +2,32 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "axis": "awsui_axis_f0fot_pe91i_9",
-  "vertical-marker": "awsui_vertical-marker_f0fot_pe91i_10",
-  "axis--emphasized": "awsui_axis--emphasized_f0fot_pe91i_15",
-  "axis-label": "awsui_axis-label_f0fot_pe91i_19",
-  "axis-label--x": "awsui_axis-label--x_f0fot_pe91i_24",
-  "axis-label--y": "awsui_axis-label--y_f0fot_pe91i_25",
-  "grid": "awsui_grid_f0fot_pe91i_29",
-  "ticks__line": "awsui_ticks__line_f0fot_pe91i_34",
-  "ticks__text": "awsui_ticks__text_f0fot_pe91i_39",
-  "ticks--y": "awsui_ticks--y_f0fot_pe91i_44",
-  "ticks--x": "awsui_ticks--x_f0fot_pe91i_45",
-  "ticks--bottom": "awsui_ticks--bottom_f0fot_pe91i_49",
-  "labels-left": "awsui_labels-left_f0fot_pe91i_54",
-  "ticks": "awsui_ticks_f0fot_pe91i_34",
-  "labels-left__label": "awsui_labels-left__label_f0fot_pe91i_69",
-  "labels-left--hidden": "awsui_labels-left--hidden_f0fot_pe91i_73",
-  "labels-bottom": "awsui_labels-bottom_f0fot_pe91i_81",
-  "vertical-marker-circle": "awsui_vertical-marker-circle_f0fot_pe91i_92",
-  "vertical-marker-circle-active": "awsui_vertical-marker-circle-active_f0fot_pe91i_98",
-  "focus-outline": "awsui_focus-outline_f0fot_pe91i_103",
-  "chart-container": "awsui_chart-container_f0fot_pe91i_111",
-  "chart-container__vertical": "awsui_chart-container__vertical_f0fot_pe91i_117",
-  "chart-container__horizontal": "awsui_chart-container__horizontal_f0fot_pe91i_123"
+  "axis": "awsui_axis_f0fot_1xwwo_9",
+  "vertical-marker": "awsui_vertical-marker_f0fot_1xwwo_10",
+  "axis--emphasized": "awsui_axis--emphasized_f0fot_1xwwo_15",
+  "axis-label": "awsui_axis-label_f0fot_1xwwo_19",
+  "axis-label--x": "awsui_axis-label--x_f0fot_1xwwo_24",
+  "axis-label--y": "awsui_axis-label--y_f0fot_1xwwo_25",
+  "grid": "awsui_grid_f0fot_1xwwo_29",
+  "ticks__line": "awsui_ticks__line_f0fot_1xwwo_34",
+  "ticks__text": "awsui_ticks__text_f0fot_1xwwo_39",
+  "ticks--y": "awsui_ticks--y_f0fot_1xwwo_44",
+  "ticks--x": "awsui_ticks--x_f0fot_1xwwo_45",
+  "ticks--bottom": "awsui_ticks--bottom_f0fot_1xwwo_49",
+  "labels-left": "awsui_labels-left_f0fot_1xwwo_54",
+  "ticks": "awsui_ticks_f0fot_1xwwo_34",
+  "labels-left__label": "awsui_labels-left__label_f0fot_1xwwo_69",
+  "labels-left--hidden": "awsui_labels-left--hidden_f0fot_1xwwo_73",
+  "labels-bottom": "awsui_labels-bottom_f0fot_1xwwo_81",
+  "vertical-marker-circle": "awsui_vertical-marker-circle_f0fot_1xwwo_92",
+  "vertical-marker-circle-active": "awsui_vertical-marker-circle-active_f0fot_1xwwo_98",
+  "focus-outline": "awsui_focus-outline_f0fot_1xwwo_103",
+  "chart-container": "awsui_chart-container_f0fot_1xwwo_111",
+  "fit-height": "awsui_fit-height_f0fot_1xwwo_116",
+  "chart-container-outer": "awsui_chart-container-outer_f0fot_1xwwo_121",
+  "chart-container-inner": "awsui_chart-container-inner_f0fot_1xwwo_128",
+  "chart-container-plot-wrapper": "awsui_chart-container-plot-wrapper_f0fot_1xwwo_135",
+  "chart-container-plot": "awsui_chart-container-plot_f0fot_1xwwo_135",
+  "chart-container-bottom-labels": "awsui_chart-container-bottom-labels_f0fot_1xwwo_150"
 };
   

package/internal/components/chart-plot/index.d.ts

@@ -6,8 +6,8 @@ export interface ChartPlotRef {
     focusApplication(): void;
 }
 export interface ChartPlotProps {
-    width: number;
-    height: number;
+    width: number | string;
+    height: number | string;
     transform?: string;
     offsetTop?: number;
     offsetBottom?: number;

package/internal/components/chart-plot/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/components/chart-plot/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAUjF,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAMvC,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,aAAa,CAAC;IACnB,SAAS,IAAI,IAAI,CAAC;IAClB,gBAAgB,IAAI,IAAI,CAAC;CAC1B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IACpD,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAChD,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IAC/D,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IAC/D,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IAC9D,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,OAAO,EAAE,OAAO,GAAG,UAAU,KAAK,IAAI,CAAC;IACxF,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACxD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC9D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;EASE;;AACF,wBAAqC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/components/chart-plot/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAUjF,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAMvC,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,aAAa,CAAC;IACnB,SAAS,IAAI,IAAI,CAAC;IAClB,gBAAgB,IAAI,IAAI,CAAC;CAC1B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IACpD,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAChD,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IAC/D,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IAC/D,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IAC9D,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,OAAO,EAAE,OAAO,GAAG,UAAU,KAAK,IAAI,CAAC;IACxF,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACxD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC9D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;EASE;;AACF,wBAAqC"}

package/internal/components/chart-plot/index.js

@@ -89,7 +89,9 @@ function ChartPlot(_a, ref) {
         }
         : {};
     return (React.createElement(React.Fragment, null,
-        React.createElement("svg", Object.assign({}, restProps, { focusable: plotFocusable, tabIndex: plotTabIndex, role: "application", "aria-hidden": "false" }, plotAria, { ref: svgRef, width: width, height: height, style: {
+        React.createElement("svg", Object.assign({}, restProps, { focusable: plotFocusable, tabIndex: plotTabIndex, role: "application", "aria-hidden": "false" }, plotAria, { ref: svgRef, style: {
+                width,
+                height,
                 marginTop: offsetTop,
                 marginBottom: offsetBottom,
                 marginLeft: offsetLeft,

package/internal/components/chart-plot/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/chart-plot/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, { forwardRef, useImperativeHandle, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport styles from './styles.css.js';\nimport { useUniqueId } from '../../hooks/use-unique-id';\n\nimport { KeyCode } from '../../keycode';\nimport LiveRegion from '../live-region/index';\nimport ApplicationController, { ApplicationRef } from './application-controller';\nimport FocusOutline from './focus-outline';\nimport { Offset } from '../interfaces';\nimport { useInternalI18n } from '../../i18n/context.js';\n\nconst DEFAULT_PLOT_FOCUS_OFFSET = 3;\nconst DEFAULT_ELEMENT_FOCUS_OFFSET = 3;\n\nexport interface ChartPlotRef {\n  svg: SVGSVGElement;\n  focusPlot(): void;\n  focusApplication(): void;\n}\n\nexport interface ChartPlotProps {\n  width: number;\n  height: number;\n  transform?: string;\n  offsetTop?: number;\n  offsetBottom?: number;\n  offsetLeft?: number;\n  offsetRight?: number;\n  focusOffset?: number;\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n  ariaDescription?: string;\n  ariaDescribedby?: string;\n  ariaRoleDescription?: string;\n  activeElementKey?: null | string | number | boolean;\n  activeElementRef?: React.RefObject<SVGGElement>;\n  activeElementFocusOffset?: Offset;\n  ariaLiveRegion?: React.ReactNode;\n  isClickable?: boolean;\n  isPrecise?: boolean;\n  onMouseDown?: (event: React.MouseEvent<SVGSVGElement>) => void;\n  onMouseMove?: (event: React.MouseEvent<SVGSVGElement>) => void;\n  onMouseOut?: (event: React.MouseEvent<SVGSVGElement>) => void;\n  onFocus?: (event: React.FocusEvent<SVGGElement>, trigger: 'mouse' | 'keyboard') => void;\n  onBlur?: (event: React.FocusEvent<SVGGElement>) => void;\n  onKeyDown?: (event: React.KeyboardEvent<SVGGElement>) => void;\n  children: React.ReactNode;\n}\n\n/**\n  An extension for the SVG to be used for charts. It includes a controller element to\n  handle the focus and keyboard interactions in a way that is supported by screen readers.\n\n  The application mimics the aria-activedescendant behavior which is unsupported by Safari. The\n  activeElementRef is the pointer to the secondary-focus element and activeElementKey denotes when\n  the focus transition was made.\n\n  Alternatively, ariaLiveRegion can be used to make announcements.\n*/\nexport default forwardRef(ChartPlot);\n\nfunction ChartPlot(\n  {\n    width,\n    height,\n    transform,\n    offsetTop,\n    offsetBottom,\n    offsetLeft,\n    offsetRight,\n    ariaLabel,\n    ariaLabelledby,\n    ariaRoleDescription,\n    ariaDescription,\n    ariaDescribedby,\n    activeElementKey,\n    activeElementRef,\n    ariaLiveRegion,\n    isClickable,\n    isPrecise,\n    children,\n    onMouseDown,\n    onKeyDown,\n    onFocus,\n    onBlur,\n    focusOffset = DEFAULT_PLOT_FOCUS_OFFSET,\n    activeElementFocusOffset = DEFAULT_ELEMENT_FOCUS_OFFSET,\n    ...restProps\n  }: ChartPlotProps,\n  ref: React.Ref<ChartPlotRef>\n) {\n  const i18n = useInternalI18n('[charts]');\n  const svgRef = useRef<SVGSVGElement>(null);\n  const applicationRef = useRef<ApplicationRef>(null);\n  const plotClickedRef = useRef(false);\n  const [isPlotFocused, setPlotFocused] = useState(false);\n  const [isApplicationFocused, setApplicationFocused] = useState(false);\n\n  const internalDescriptionId = useUniqueId('awsui-chart-plot__description');\n  const ariaDescriptionId = [ariaDescription && internalDescriptionId, ariaDescribedby].filter(Boolean).join(' ');\n\n  useImperativeHandle(ref, () => ({\n    svg: svgRef.current!,\n    focusPlot: () => svgRef.current!.focus(),\n    focusApplication: () => applicationRef.current!.focus(),\n  }));\n\n  const onPlotMouseDown = (event: React.MouseEvent<SVGSVGElement, MouseEvent>) => {\n    onMouseDown && onMouseDown(event);\n    // Record the click was made for the application focus handler.\n    plotClickedRef.current = true;\n  };\n  const onPlotFocus = (event: React.FocusEvent<SVGSVGElement>) => {\n    if (event.target === svgRef.current && !plotClickedRef.current) {\n      setPlotFocused(true);\n    }\n    // The click should focus the underling application bypassing the svg.\n    else if (plotClickedRef.current) {\n      applicationRef.current!.focus();\n    }\n  };\n  const onPlotBlur = (event: React.FocusEvent<SVGSVGElement>) => {\n    if (event.target === svgRef.current) {\n      setPlotFocused(false);\n    }\n  };\n  // Once one of the expected keys is pressed the focus is delegated to the application controller.\n  const onPlotKeyDown = (event: React.KeyboardEvent) => {\n    if (isPlotFocused) {\n      // Delegate the focus to the application if one of the expected keys was pressed.\n      const codes = [KeyCode.space, KeyCode.enter, KeyCode.up, KeyCode.left, KeyCode.right, KeyCode.down];\n      if (codes.indexOf(event.keyCode) !== -1) {\n        applicationRef.current!.focus();\n      }\n    }\n  };\n\n  const onApplicationFocus = (event: React.FocusEvent<SVGGElement>) => {\n    onFocus && onFocus(event, plotClickedRef.current ? 'mouse' : 'keyboard');\n    // \"Release\" the click reference to not affect the next call of this handler.\n    plotClickedRef.current = false;\n    setApplicationFocused(true);\n  };\n  const onApplicationBlur = (event: React.FocusEvent<SVGGElement>) => {\n    onBlur && onBlur(event);\n    setApplicationFocused(false);\n  };\n  const onApplicationKeyDown = onKeyDown;\n\n  const plotFocusable = !isApplicationFocused;\n  const plotTabIndex = plotFocusable ? 0 : -1;\n  const plotAria = !isApplicationFocused\n    ? {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledby,\n        'aria-describedby': ariaDescriptionId,\n        'aria-roledescription': i18n('i18nStrings.chartAriaRoleDescription', ariaRoleDescription),\n      }\n    : {};\n\n  return (\n    <>\n      <svg\n        {...restProps}\n        focusable={plotFocusable}\n        tabIndex={plotTabIndex}\n        role=\"application\"\n        aria-hidden=\"false\"\n        {...plotAria}\n        ref={svgRef}\n        width={width}\n        height={height}\n        style={{\n          marginTop: offsetTop,\n          marginBottom: offsetBottom,\n          marginLeft: offsetLeft,\n          marginRight: offsetRight,\n        }}\n        className={clsx(styles.root, {\n          [styles.clickable]: isClickable,\n          [styles.precise]: isPrecise,\n        })}\n        onMouseDown={onPlotMouseDown}\n        onFocus={onPlotFocus}\n        onBlur={onPlotBlur}\n        onKeyDown={onPlotKeyDown}\n      >\n        <FocusOutline elementRef={svgRef} elementKey={isPlotFocused} offset={focusOffset} />\n\n        <g transform={transform}>\n          <ApplicationController\n            activeElementKey={activeElementKey || null}\n            activeElementRef={activeElementRef}\n            ref={applicationRef}\n            onFocus={onApplicationFocus}\n            onBlur={onApplicationBlur}\n            onKeyDown={onApplicationKeyDown}\n          />\n\n          {/* Only show description when plot is focusable to avoid repetition in Safari and Firefox */}\n          {ariaDescription && plotFocusable && (\n            <desc aria-hidden=\"true\" id={internalDescriptionId}>\n              {ariaDescription}\n            </desc>\n          )}\n\n          {children}\n\n          <FocusOutline\n            elementRef={activeElementRef}\n            elementKey={isApplicationFocused && activeElementKey}\n            offset={activeElementFocusOffset}\n          />\n        </g>\n      </svg>\n\n      <LiveRegion>{ariaLiveRegion}</LiveRegion>\n    </>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/chart-plot/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, { forwardRef, useImperativeHandle, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport styles from './styles.css.js';\nimport { useUniqueId } from '../../hooks/use-unique-id';\n\nimport { KeyCode } from '../../keycode';\nimport LiveRegion from '../live-region/index';\nimport ApplicationController, { ApplicationRef } from './application-controller';\nimport FocusOutline from './focus-outline';\nimport { Offset } from '../interfaces';\nimport { useInternalI18n } from '../../i18n/context.js';\n\nconst DEFAULT_PLOT_FOCUS_OFFSET = 3;\nconst DEFAULT_ELEMENT_FOCUS_OFFSET = 3;\n\nexport interface ChartPlotRef {\n  svg: SVGSVGElement;\n  focusPlot(): void;\n  focusApplication(): void;\n}\n\nexport interface ChartPlotProps {\n  width: number | string;\n  height: number | string;\n  transform?: string;\n  offsetTop?: number;\n  offsetBottom?: number;\n  offsetLeft?: number;\n  offsetRight?: number;\n  focusOffset?: number;\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n  ariaDescription?: string;\n  ariaDescribedby?: string;\n  ariaRoleDescription?: string;\n  activeElementKey?: null | string | number | boolean;\n  activeElementRef?: React.RefObject<SVGGElement>;\n  activeElementFocusOffset?: Offset;\n  ariaLiveRegion?: React.ReactNode;\n  isClickable?: boolean;\n  isPrecise?: boolean;\n  onMouseDown?: (event: React.MouseEvent<SVGSVGElement>) => void;\n  onMouseMove?: (event: React.MouseEvent<SVGSVGElement>) => void;\n  onMouseOut?: (event: React.MouseEvent<SVGSVGElement>) => void;\n  onFocus?: (event: React.FocusEvent<SVGGElement>, trigger: 'mouse' | 'keyboard') => void;\n  onBlur?: (event: React.FocusEvent<SVGGElement>) => void;\n  onKeyDown?: (event: React.KeyboardEvent<SVGGElement>) => void;\n  children: React.ReactNode;\n}\n\n/**\n  An extension for the SVG to be used for charts. It includes a controller element to\n  handle the focus and keyboard interactions in a way that is supported by screen readers.\n\n  The application mimics the aria-activedescendant behavior which is unsupported by Safari. The\n  activeElementRef is the pointer to the secondary-focus element and activeElementKey denotes when\n  the focus transition was made.\n\n  Alternatively, ariaLiveRegion can be used to make announcements.\n*/\nexport default forwardRef(ChartPlot);\n\nfunction ChartPlot(\n  {\n    width,\n    height,\n    transform,\n    offsetTop,\n    offsetBottom,\n    offsetLeft,\n    offsetRight,\n    ariaLabel,\n    ariaLabelledby,\n    ariaRoleDescription,\n    ariaDescription,\n    ariaDescribedby,\n    activeElementKey,\n    activeElementRef,\n    ariaLiveRegion,\n    isClickable,\n    isPrecise,\n    children,\n    onMouseDown,\n    onKeyDown,\n    onFocus,\n    onBlur,\n    focusOffset = DEFAULT_PLOT_FOCUS_OFFSET,\n    activeElementFocusOffset = DEFAULT_ELEMENT_FOCUS_OFFSET,\n    ...restProps\n  }: ChartPlotProps,\n  ref: React.Ref<ChartPlotRef>\n) {\n  const i18n = useInternalI18n('[charts]');\n  const svgRef = useRef<SVGSVGElement>(null);\n  const applicationRef = useRef<ApplicationRef>(null);\n  const plotClickedRef = useRef(false);\n  const [isPlotFocused, setPlotFocused] = useState(false);\n  const [isApplicationFocused, setApplicationFocused] = useState(false);\n\n  const internalDescriptionId = useUniqueId('awsui-chart-plot__description');\n  const ariaDescriptionId = [ariaDescription && internalDescriptionId, ariaDescribedby].filter(Boolean).join(' ');\n\n  useImperativeHandle(ref, () => ({\n    svg: svgRef.current!,\n    focusPlot: () => svgRef.current!.focus(),\n    focusApplication: () => applicationRef.current!.focus(),\n  }));\n\n  const onPlotMouseDown = (event: React.MouseEvent<SVGSVGElement, MouseEvent>) => {\n    onMouseDown && onMouseDown(event);\n    // Record the click was made for the application focus handler.\n    plotClickedRef.current = true;\n  };\n  const onPlotFocus = (event: React.FocusEvent<SVGSVGElement>) => {\n    if (event.target === svgRef.current && !plotClickedRef.current) {\n      setPlotFocused(true);\n    }\n    // The click should focus the underling application bypassing the svg.\n    else if (plotClickedRef.current) {\n      applicationRef.current!.focus();\n    }\n  };\n  const onPlotBlur = (event: React.FocusEvent<SVGSVGElement>) => {\n    if (event.target === svgRef.current) {\n      setPlotFocused(false);\n    }\n  };\n  // Once one of the expected keys is pressed the focus is delegated to the application controller.\n  const onPlotKeyDown = (event: React.KeyboardEvent) => {\n    if (isPlotFocused) {\n      // Delegate the focus to the application if one of the expected keys was pressed.\n      const codes = [KeyCode.space, KeyCode.enter, KeyCode.up, KeyCode.left, KeyCode.right, KeyCode.down];\n      if (codes.indexOf(event.keyCode) !== -1) {\n        applicationRef.current!.focus();\n      }\n    }\n  };\n\n  const onApplicationFocus = (event: React.FocusEvent<SVGGElement>) => {\n    onFocus && onFocus(event, plotClickedRef.current ? 'mouse' : 'keyboard');\n    // \"Release\" the click reference to not affect the next call of this handler.\n    plotClickedRef.current = false;\n    setApplicationFocused(true);\n  };\n  const onApplicationBlur = (event: React.FocusEvent<SVGGElement>) => {\n    onBlur && onBlur(event);\n    setApplicationFocused(false);\n  };\n  const onApplicationKeyDown = onKeyDown;\n\n  const plotFocusable = !isApplicationFocused;\n  const plotTabIndex = plotFocusable ? 0 : -1;\n  const plotAria = !isApplicationFocused\n    ? {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledby,\n        'aria-describedby': ariaDescriptionId,\n        'aria-roledescription': i18n('i18nStrings.chartAriaRoleDescription', ariaRoleDescription),\n      }\n    : {};\n\n  return (\n    <>\n      <svg\n        {...restProps}\n        focusable={plotFocusable}\n        tabIndex={plotTabIndex}\n        role=\"application\"\n        aria-hidden=\"false\"\n        {...plotAria}\n        ref={svgRef}\n        style={{\n          width,\n          height,\n          marginTop: offsetTop,\n          marginBottom: offsetBottom,\n          marginLeft: offsetLeft,\n          marginRight: offsetRight,\n        }}\n        className={clsx(styles.root, {\n          [styles.clickable]: isClickable,\n          [styles.precise]: isPrecise,\n        })}\n        onMouseDown={onPlotMouseDown}\n        onFocus={onPlotFocus}\n        onBlur={onPlotBlur}\n        onKeyDown={onPlotKeyDown}\n      >\n        <FocusOutline elementRef={svgRef} elementKey={isPlotFocused} offset={focusOffset} />\n\n        <g transform={transform}>\n          <ApplicationController\n            activeElementKey={activeElementKey || null}\n            activeElementRef={activeElementRef}\n            ref={applicationRef}\n            onFocus={onApplicationFocus}\n            onBlur={onApplicationBlur}\n            onKeyDown={onApplicationKeyDown}\n          />\n\n          {/* Only show description when plot is focusable to avoid repetition in Safari and Firefox */}\n          {ariaDescription && plotFocusable && (\n            <desc aria-hidden=\"true\" id={internalDescriptionId}>\n              {ariaDescription}\n            </desc>\n          )}\n\n          {children}\n\n          <FocusOutline\n            elementRef={activeElementRef}\n            elementKey={isApplicationFocused && activeElementKey}\n            offset={activeElementFocusOffset}\n          />\n        </g>\n      </svg>\n\n      <LiveRegion>{ariaLiveRegion}</LiveRegion>\n    </>\n  );\n}\n"]}

package/internal/components/chart-wrapper/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { BaseComponentProps } from '../../base-component/index.js';
 interface ChartWrapperProps extends BaseComponentProps {
+    fitHeight: boolean;
     defaultFilter: React.ReactNode;
     additionalFilters: React.ReactNode;
     reserveFilterSpace: boolean;

package/internal/components/chart-wrapper/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/components/chart-wrapper/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,OAAO,EAAE,kBAAkB,EAAgB,MAAM,+BAA+B,CAAC;AAIjF,UAAU,iBAAkB,SAAQ,kBAAkB;IACpD,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,kBAAkB,EAAE,OAAO,CAAC;IAC5B,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,MAAM,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,GAAG,IAAI,CAAC;IACvC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,YAAY,0FAgDxB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/components/chart-wrapper/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,OAAO,EAAE,kBAAkB,EAAgB,MAAM,+BAA+B,CAAC;AAIjF,UAAU,iBAAkB,SAAQ,kBAAkB;IACpD,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,kBAAkB,EAAE,OAAO,CAAC;IAC5B,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,MAAM,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,GAAG,IAAI,CAAC;IACvC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,YAAY,0FAkFxB,CAAC"}

package/internal/components/chart-wrapper/index.js

@@ -8,19 +8,34 @@ import { getBaseProps } from '../../base-component/index.js';
 import InternalBox from '../../../box/internal.js';
 import InternalSpaceBetween from '../../../space-between/internal.js';
 export const ChartWrapper = forwardRef((_a, ref) => {
-    var { defaultFilter, additionalFilters, reserveFilterSpace, reserveLegendSpace, chartStatus, chart, legend, onBlur, contentClassName, contentMinHeight } = _a, props = __rest(_a, ["defaultFilter", "additionalFilters", "reserveFilterSpace", "reserveLegendSpace", "chartStatus", "chart", "legend", "onBlur", "contentClassName", "contentMinHeight"]);
+    var { defaultFilter, additionalFilters, reserveFilterSpace, reserveLegendSpace, chartStatus, chart, legend, onBlur, contentClassName, contentMinHeight, fitHeight } = _a, props = __rest(_a, ["defaultFilter", "additionalFilters", "reserveFilterSpace", "reserveLegendSpace", "chartStatus", "chart", "legend", "onBlur", "contentClassName", "contentMinHeight", "fitHeight"]);
     const baseProps = getBaseProps(props);
+    const filtersNode = (defaultFilter || additionalFilters) && (React.createElement(InternalBox, { className: styles['filter-container'], margin: { bottom: 'l' } },
+        React.createElement(InternalSpaceBetween, { size: "l", direction: "horizontal", className: clsx({ [styles['has-default-filter']]: !!defaultFilter }) },
+            defaultFilter,
+            additionalFilters)));
+    const legendNode = legend && React.createElement(InternalBox, { margin: { top: 'm' } }, legend);
+    if (fitHeight) {
+        return (React.createElement("div", Object.assign({ ref: ref }, baseProps, { className: clsx(baseProps.className, styles.wrapper, styles['wrapper--fit-height']), onBlur: onBlur }),
+            React.createElement("div", { className: clsx(styles['inner-wrapper'], styles['inner-wrapper--fit-height']) },
+                filtersNode,
+                React.createElement("div", { className: clsx(styles.content, contentClassName, {
+                        [styles['content--reserve-filter']]: reserveFilterSpace,
+                        [styles['content--reserve-legend']]: reserveLegendSpace,
+                        [styles['content--fit-height']]: true,
+                    }) },
+                    chartStatus,
+                    chart),
+                legendNode)));
+    }
     return (React.createElement("div", Object.assign({ ref: ref }, baseProps, { className: clsx(baseProps.className, styles.wrapper), onBlur: onBlur }),
-        (defaultFilter || additionalFilters) && (React.createElement(InternalBox, { className: styles['filter-container'], margin: { bottom: 'l' } },
-            React.createElement(InternalSpaceBetween, { size: "l", direction: "horizontal", className: clsx({ [styles['has-default-filter']]: !!defaultFilter }) },
-                defaultFilter,
-                additionalFilters))),
+        filtersNode,
         React.createElement("div", { className: clsx(styles.content, contentClassName, {
                 [styles['content--reserve-filter']]: reserveFilterSpace,
                 [styles['content--reserve-legend']]: reserveLegendSpace,
             }), style: { minHeight: contentMinHeight } },
             chartStatus,
             chart),
-        legend && React.createElement(InternalBox, { margin: { top: 'm' } }, legend)));
+        legendNode));
 });
 //# sourceMappingURL=index.js.map

package/internal/components/chart-wrapper/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/chart-wrapper/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;;AAEtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAsB,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACjF,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,oBAAoB,MAAM,oCAAoC,CAAC;AAetE,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CACpC,CACE,EAYoB,EACpB,GAA8B,EAC9B,EAAE;QAdF,EACE,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,WAAW,EACX,KAAK,EACL,MAAM,EACN,MAAM,EACN,gBAAgB,EAChB,gBAAgB,OAEE,EADf,KAAK,cAXV,sKAYC,CADS;IAIV,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,OAAO,CACL,2CAAK,GAAG,EAAE,GAAG,IAAM,SAAS,IAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,MAAM;QAC/F,CAAC,aAAa,IAAI,iBAAiB,CAAC,IAAI,CACvC,oBAAC,WAAW,IAAC,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE;YACzE,oBAAC,oBAAoB,IACnB,IAAI,EAAC,GAAG,EACR,SAAS,EAAC,YAAY,EACtB,SAAS,EAAE,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,EAAE,CAAC,CAAC,aAAa,EAAE,CAAC;gBAEnE,aAAa;gBACb,iBAAiB,CACG,CACX,CACf;QAED,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,gBAAgB,EAAE;gBAChD,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAAC,EAAE,kBAAkB;gBACvD,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAAC,EAAE,kBAAkB;aACxD,CAAC,EACF,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE;YAErC,WAAW;YACX,KAAK,CACF;QAEL,MAAM,IAAI,oBAAC,WAAW,IAAC,MAAM,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,IAAG,MAAM,CAAe,CAChE,CACP,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { forwardRef } from 'react';\nimport clsx from 'clsx';\n\nimport styles from './styles.css.js';\nimport { BaseComponentProps, getBaseProps } from '../../base-component/index.js';\nimport InternalBox from '../../../box/internal.js';\nimport InternalSpaceBetween from '../../../space-between/internal.js';\n\ninterface ChartWrapperProps extends BaseComponentProps {\n  defaultFilter: React.ReactNode;\n  additionalFilters: React.ReactNode;\n  reserveFilterSpace: boolean;\n  reserveLegendSpace: boolean;\n  chartStatus: React.ReactNode;\n  chart: React.ReactNode;\n  legend: React.ReactNode;\n  onBlur?(event: React.FocusEvent): void;\n  contentClassName?: string;\n  contentMinHeight?: number;\n}\n\nexport const ChartWrapper = forwardRef(\n  (\n    {\n      defaultFilter,\n      additionalFilters,\n      reserveFilterSpace,\n      reserveLegendSpace,\n      chartStatus,\n      chart,\n      legend,\n      onBlur,\n      contentClassName,\n      contentMinHeight,\n      ...props\n    }: ChartWrapperProps,\n    ref: React.Ref<HTMLDivElement>\n  ) => {\n    const baseProps = getBaseProps(props);\n    return (\n      <div ref={ref} {...baseProps} className={clsx(baseProps.className, styles.wrapper)} onBlur={onBlur}>\n        {(defaultFilter || additionalFilters) && (\n          <InternalBox className={styles['filter-container']} margin={{ bottom: 'l' }}>\n            <InternalSpaceBetween\n              size=\"l\"\n              direction=\"horizontal\"\n              className={clsx({ [styles['has-default-filter']]: !!defaultFilter })}\n            >\n              {defaultFilter}\n              {additionalFilters}\n            </InternalSpaceBetween>\n          </InternalBox>\n        )}\n\n        <div\n          className={clsx(styles.content, contentClassName, {\n            [styles['content--reserve-filter']]: reserveFilterSpace,\n            [styles['content--reserve-legend']]: reserveLegendSpace,\n          })}\n          style={{ minHeight: contentMinHeight }}\n        >\n          {chartStatus}\n          {chart}\n        </div>\n\n        {legend && <InternalBox margin={{ top: 'm' }}>{legend}</InternalBox>}\n      </div>\n    );\n  }\n);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/chart-wrapper/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;;AAEtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAsB,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACjF,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,oBAAoB,MAAM,oCAAoC,CAAC;AAgBtE,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CACpC,CACE,EAaoB,EACpB,GAA8B,EAC9B,EAAE;QAfF,EACE,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,WAAW,EACX,KAAK,EACL,MAAM,EACN,MAAM,EACN,gBAAgB,EAChB,gBAAgB,EAChB,SAAS,OAES,EADf,KAAK,cAZV,mLAaC,CADS;IAIV,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IAEtC,MAAM,WAAW,GAAG,CAAC,aAAa,IAAI,iBAAiB,CAAC,IAAI,CAC1D,oBAAC,WAAW,IAAC,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE;QACzE,oBAAC,oBAAoB,IACnB,IAAI,EAAC,GAAG,EACR,SAAS,EAAC,YAAY,EACtB,SAAS,EAAE,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,EAAE,CAAC,CAAC,aAAa,EAAE,CAAC;YAEnE,aAAa;YACb,iBAAiB,CACG,CACX,CACf,CAAC;IAEF,MAAM,UAAU,GAAG,MAAM,IAAI,oBAAC,WAAW,IAAC,MAAM,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,IAAG,MAAM,CAAe,CAAC;IAEvF,IAAI,SAAS,EAAE;QACb,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,IACJ,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,qBAAqB,CAAC,CAAC,EACnF,MAAM,EAAE,MAAM;YAEd,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,EAAE,MAAM,CAAC,2BAA2B,CAAC,CAAC;gBAC/E,WAAW;gBAEZ,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,gBAAgB,EAAE;wBAChD,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAAC,EAAE,kBAAkB;wBACvD,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAAC,EAAE,kBAAkB;wBACvD,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAAE,IAAI;qBACtC,CAAC;oBAED,WAAW;oBACX,KAAK,CACF;gBAEL,UAAU,CACP,CACF,CACP,CAAC;KACH;IAED,OAAO,CACL,2CAAK,GAAG,EAAE,GAAG,IAAM,SAAS,IAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,MAAM;QAC/F,WAAW;QAEZ,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,gBAAgB,EAAE;gBAChD,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAAC,EAAE,kBAAkB;gBACvD,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAAC,EAAE,kBAAkB;aACxD,CAAC,EACF,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE;YAErC,WAAW;YACX,KAAK,CACF;QAEL,UAAU,CACP,CACP,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { forwardRef } from 'react';\nimport clsx from 'clsx';\n\nimport styles from './styles.css.js';\nimport { BaseComponentProps, getBaseProps } from '../../base-component/index.js';\nimport InternalBox from '../../../box/internal.js';\nimport InternalSpaceBetween from '../../../space-between/internal.js';\n\ninterface ChartWrapperProps extends BaseComponentProps {\n  fitHeight: boolean;\n  defaultFilter: React.ReactNode;\n  additionalFilters: React.ReactNode;\n  reserveFilterSpace: boolean;\n  reserveLegendSpace: boolean;\n  chartStatus: React.ReactNode;\n  chart: React.ReactNode;\n  legend: React.ReactNode;\n  onBlur?(event: React.FocusEvent): void;\n  contentClassName?: string;\n  contentMinHeight?: number;\n}\n\nexport const ChartWrapper = forwardRef(\n  (\n    {\n      defaultFilter,\n      additionalFilters,\n      reserveFilterSpace,\n      reserveLegendSpace,\n      chartStatus,\n      chart,\n      legend,\n      onBlur,\n      contentClassName,\n      contentMinHeight,\n      fitHeight,\n      ...props\n    }: ChartWrapperProps,\n    ref: React.Ref<HTMLDivElement>\n  ) => {\n    const baseProps = getBaseProps(props);\n\n    const filtersNode = (defaultFilter || additionalFilters) && (\n      <InternalBox className={styles['filter-container']} margin={{ bottom: 'l' }}>\n        <InternalSpaceBetween\n          size=\"l\"\n          direction=\"horizontal\"\n          className={clsx({ [styles['has-default-filter']]: !!defaultFilter })}\n        >\n          {defaultFilter}\n          {additionalFilters}\n        </InternalSpaceBetween>\n      </InternalBox>\n    );\n\n    const legendNode = legend && <InternalBox margin={{ top: 'm' }}>{legend}</InternalBox>;\n\n    if (fitHeight) {\n      return (\n        <div\n          ref={ref}\n          {...baseProps}\n          className={clsx(baseProps.className, styles.wrapper, styles['wrapper--fit-height'])}\n          onBlur={onBlur}\n        >\n          <div className={clsx(styles['inner-wrapper'], styles['inner-wrapper--fit-height'])}>\n            {filtersNode}\n\n            <div\n              className={clsx(styles.content, contentClassName, {\n                [styles['content--reserve-filter']]: reserveFilterSpace,\n                [styles['content--reserve-legend']]: reserveLegendSpace,\n                [styles['content--fit-height']]: true,\n              })}\n            >\n              {chartStatus}\n              {chart}\n            </div>\n\n            {legendNode}\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <div ref={ref} {...baseProps} className={clsx(baseProps.className, styles.wrapper)} onBlur={onBlur}>\n        {filtersNode}\n\n        <div\n          className={clsx(styles.content, contentClassName, {\n            [styles['content--reserve-filter']]: reserveFilterSpace,\n            [styles['content--reserve-legend']]: reserveLegendSpace,\n          })}\n          style={{ minHeight: contentMinHeight }}\n        >\n          {chartStatus}\n          {chart}\n        </div>\n\n        {legendNode}\n      </div>\n    );\n  }\n);\n"]}