@cloudscape-design/components 3.0.622 → 3.0.623

package/container/use-sticky-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-sticky-header.js","sourceRoot":"","sources":["../../../src/container/use-sticky-header.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAa,QAAQ,EAAE,eAAe,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACpG,OAAO,EAAE,WAAW,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,UAAU,MAAM,gCAAgC,CAAC;AAaxD,MAAM,UAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,cAAc,EACd,oBAAoB,EACpB,uBAAuB,GACJ;IACnB,MAAM,WAAW,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,CAAC,CAAC,GAAG,CAAC,oBAAoB,aAApB,oBAAoB,cAApB,oBAAoB,GAAI,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,CAAC,CAAC;IACzG,IAAI,uBAAuB,EAAE;QAC3B,OAAO,GAAG,WAAW,IAAI,CAAC;KAC3B;IACD,MAAM,YAAY,GAAG,OAAO,UAAU,CAAC,uBAAuB,QAAQ,CAAC;IAEvE,OAAO,QAAQ,YAAY,MAAM,WAAW,KAAK,CAAC;AACpD,CAAC;AAED,MAAM,CAAC,MAAM,mBAAmB,GAAG,aAAa,CAA2B;IACzE,OAAO,EAAE,KAAK;CACf,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,OAAkC,EAClC,SAAoC,EACpC,cAAwB,EACxB,cAAuB,EACvB,oBAA6B,EAC7B,eAAe,GAAG,IAAI,EACtB,EAAE;IACF,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,MAAM,aAAa,GAAG,QAAQ,IAAI,eAAe,CAAC;IAClD,MAAM,QAAQ,GAAG,sBAAsB,EAAE,IAAI,CAAC,aAAa,IAAI,CAAC,CAAC,cAAc,CAAC;IAEhF,wFAAwF;IACxF,MAAM,CAAC,uBAAuB,EAAE,0BAA0B,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9E,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,OAAO,CAAC,OAAO,EAAE;YACnB,MAAM,eAAe,GAAG,kBAAkB,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;YAC5D,MAAM,WAAW,GAAG,WAAW,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC;YAClF,kFAAkF;YAClF,uFAAuF;YACvF,iFAAiF;YACjF,qBAAqB;YACrB,0BAA0B,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,IAAI,eAAe,CAAC,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC;SAC9F;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,cAAc,GAAG,aAAa,CAAC;QACnC,QAAQ;QACR,cAAc;QACd,oBAAoB;QACpB,uBAAuB;KACxB,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,QAAQ;QAC3B,CAAC,CAAC;YACE,KAAK,EAAE;gBACL,GAAG,EAAE,cAAc;aACpB;SACF;QACH,CAAC,CAAC,EAAE,CAAC;IAEP,6EAA6E;IAC7E,yDAAyD;IACzD,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,IAAI,OAAO,CAAC,OAAO,IAAI,SAAS,CAAC,OAAO,EAAE;YACxC,MAAM,kBAAkB,GAAG,UAAU,CAAC,gBAAgB,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;YAC7F,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,GAAG,GAAG,kBAAkB,CAAC;YACjF,MAAM,SAAS,GAAG,SAAS,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAC;YAEhE,IAAI,OAAO,GAAG,SAAS,EAAE;gBACvB,UAAU,CAAC,IAAI,CAAC,CAAC;aAClB;iBAAM;gBACL,UAAU,CAAC,KAAK,CAAC,CAAC;aACnB;SACF;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC;IACzB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ,EAAE;YACZ,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,EAAE,IAAI,CAAC,CAAC;YACtD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;YAChD,OAAO,GAAG,EAAE;gBACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,EAAE,IAAI,CAAC,CAAC;gBACzD,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;YACrD,CAAC,CAAC;SACH;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC;IAC7B,OAAO;QACL,QAAQ;QACR,OAAO;QACP,YAAY;KACb,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { RefObject, useState, useLayoutEffect, useCallback, useEffect, createContext } from 'react';\nimport { findUpUntil, supportsStickyPosition } from '../internal/utils/dom';\nimport { getOverflowParents } from '../internal/utils/scrollable-containers';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport globalVars from '../internal/styles/global-vars';\n\ninterface StickyHeaderContextProps {\n  isStuck: boolean;\n}\n\ninterface ComputeOffsetProps {\n  isMobile: boolean;\n  __stickyOffset?: number;\n  __mobileStickyOffset?: number;\n  hasInnerOverflowParents: boolean;\n}\n\nexport function computeOffset({\n  isMobile,\n  __stickyOffset,\n  __mobileStickyOffset,\n  hasInnerOverflowParents,\n}: ComputeOffsetProps): string {\n  const localOffset = isMobile ? (__stickyOffset ?? 0) - (__mobileStickyOffset ?? 0) : __stickyOffset ?? 0;\n  if (hasInnerOverflowParents) {\n    return `${localOffset}px`;\n  }\n  const globalOffset = `var(${globalVars.stickyVerticalTopOffset}, 0px)`;\n\n  return `calc(${globalOffset} + ${localOffset}px)`;\n}\n\nexport const StickyHeaderContext = createContext<StickyHeaderContextProps>({\n  isStuck: false,\n});\n\nexport const useStickyHeader = (\n  rootRef: RefObject<HTMLDivElement>,\n  headerRef: RefObject<HTMLDivElement>,\n  __stickyHeader?: boolean,\n  __stickyOffset?: number,\n  __mobileStickyOffset?: number,\n  __disableMobile = true\n) => {\n  const isMobile = useMobile();\n  const disableSticky = isMobile && __disableMobile;\n  const isSticky = supportsStickyPosition() && !disableSticky && !!__stickyHeader;\n\n  // If it has overflow parents inside the app layout, we shouldn't apply a sticky offset.\n  const [hasInnerOverflowParents, setHasInnerOverflowParents] = useState(false);\n  const [isStuck, setIsStuck] = useState(false);\n  useLayoutEffect(() => {\n    if (rootRef.current) {\n      const overflowParents = getOverflowParents(rootRef.current);\n      const mainElement = findUpUntil(rootRef.current, elem => elem.tagName === 'MAIN');\n      // In both versions of the app layout, the scrolling element for disableBodyScroll\n      // is the <main>. If the closest overflow parent is also the closest <main> and we have\n      // offset values, it's safe to assume that it's the app layout scroll root and we\n      // should stop there.\n      setHasInnerOverflowParents(overflowParents.length > 0 && overflowParents[0] !== mainElement);\n    }\n  }, [rootRef]);\n\n  const computedOffset = computeOffset({\n    isMobile,\n    __stickyOffset,\n    __mobileStickyOffset,\n    hasInnerOverflowParents,\n  });\n\n  const stickyStyles = isSticky\n    ? {\n        style: {\n          top: computedOffset,\n        },\n      }\n    : {};\n\n  // \"stuck\" state, when the header has moved from its original posititon has a\n  // box-shadow, applied here by a \"header-stuck\" className\n  const checkIfStuck = useCallback(() => {\n    if (rootRef.current && headerRef.current) {\n      const rootTopBorderWidth = parseFloat(getComputedStyle(rootRef.current).borderTopWidth) || 0;\n      const rootTop = rootRef.current.getBoundingClientRect().top + rootTopBorderWidth;\n      const headerTop = headerRef.current.getBoundingClientRect().top;\n\n      if (rootTop < headerTop) {\n        setIsStuck(true);\n      } else {\n        setIsStuck(false);\n      }\n    }\n  }, [rootRef, headerRef]);\n  useEffect(() => {\n    if (isSticky) {\n      window.addEventListener('scroll', checkIfStuck, true);\n      window.addEventListener('resize', checkIfStuck);\n      return () => {\n        window.removeEventListener('scroll', checkIfStuck, true);\n        window.removeEventListener('resize', checkIfStuck);\n      };\n    }\n  }, [isSticky, checkIfStuck]);\n  return {\n    isSticky,\n    isStuck,\n    stickyStyles,\n  };\n};\n"]}
+{"version":3,"file":"use-sticky-header.js","sourceRoot":"","sources":["../../../src/container/use-sticky-header.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 { RefObject, useState, useLayoutEffect, useCallback, useEffect, createContext } from 'react';\nimport { findUpUntil, supportsStickyPosition } from '../internal/utils/dom';\nimport { getOverflowParents } from '../internal/utils/scrollable-containers';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport globalVars from '../internal/styles/global-vars';\n\ninterface StickyHeaderContextProps {\n  isStuck: boolean;\n}\n\ninterface ComputeOffsetProps {\n  isMobile: boolean;\n  __stickyOffset?: number;\n  __mobileStickyOffset?: number;\n  hasInnerOverflowParents: boolean;\n}\n\nexport function computeOffset({\n  isMobile,\n  __stickyOffset,\n  __mobileStickyOffset,\n  hasInnerOverflowParents,\n}: ComputeOffsetProps): string {\n  const localOffset = isMobile ? (__stickyOffset ?? 0) - (__mobileStickyOffset ?? 0) : __stickyOffset ?? 0;\n  if (hasInnerOverflowParents || __stickyOffset !== undefined) {\n    return `${localOffset}px`;\n  }\n  const globalOffset = `var(${globalVars.stickyVerticalTopOffset}, 0px)`;\n\n  return `calc(${globalOffset} + ${localOffset}px)`;\n}\n\nexport const StickyHeaderContext = createContext<StickyHeaderContextProps>({\n  isStuck: false,\n});\n\nexport const useStickyHeader = (\n  rootRef: RefObject<HTMLDivElement>,\n  headerRef: RefObject<HTMLDivElement>,\n  __stickyHeader?: boolean,\n  __stickyOffset?: number,\n  __mobileStickyOffset?: number,\n  __disableMobile = true\n) => {\n  const isMobile = useMobile();\n  const disableSticky = isMobile && __disableMobile;\n  const isSticky = supportsStickyPosition() && !disableSticky && !!__stickyHeader;\n\n  // If it has overflow parents inside the app layout, we shouldn't apply a sticky offset.\n  const [hasInnerOverflowParents, setHasInnerOverflowParents] = useState(false);\n  const [isStuck, setIsStuck] = useState(false);\n  useLayoutEffect(() => {\n    if (rootRef.current) {\n      const overflowParents = getOverflowParents(rootRef.current);\n      const mainElement = findUpUntil(rootRef.current, elem => elem.tagName === 'MAIN');\n      // In both versions of the app layout, the scrolling element for disableBodyScroll\n      // is the <main>. If the closest overflow parent is also the closest <main> and we have\n      // offset values, it's safe to assume that it's the app layout scroll root and we\n      // should stop there.\n      setHasInnerOverflowParents(overflowParents.length > 0 && overflowParents[0] !== mainElement);\n    }\n  }, [rootRef]);\n\n  const computedOffset = computeOffset({\n    isMobile,\n    __stickyOffset,\n    __mobileStickyOffset,\n    hasInnerOverflowParents,\n  });\n\n  const stickyStyles = isSticky\n    ? {\n        style: {\n          top: computedOffset,\n        },\n      }\n    : {};\n\n  // \"stuck\" state, when the header has moved from its original posititon has a\n  // box-shadow, applied here by a \"header-stuck\" className\n  const checkIfStuck = useCallback(() => {\n    if (rootRef.current && headerRef.current) {\n      const rootTopBorderWidth = parseFloat(getComputedStyle(rootRef.current).borderTopWidth) || 0;\n      const rootTop = rootRef.current.getBoundingClientRect().top + rootTopBorderWidth;\n      const headerTop = headerRef.current.getBoundingClientRect().top;\n\n      if (rootTop < headerTop) {\n        setIsStuck(true);\n      } else {\n        setIsStuck(false);\n      }\n    }\n  }, [rootRef, headerRef]);\n  useEffect(() => {\n    if (isSticky) {\n      window.addEventListener('scroll', checkIfStuck, true);\n      window.addEventListener('resize', checkIfStuck);\n      return () => {\n        window.removeEventListener('scroll', checkIfStuck, true);\n        window.removeEventListener('resize', checkIfStuck);\n      };\n    }\n  }, [isSticky, checkIfStuck]);\n  return {\n    isSticky,\n    isStuck,\n    stickyStyles,\n  };\n};\n"]}

package/internal/components/cartesian-chart/{bottom-labels.d.ts → block-end-labels.d.ts}

@@ -2,7 +2,7 @@ import React from 'react';
 import { ChartDataTypes } from './interfaces';
 import { ChartScale, NumericChartScale } from './scales';
 import { FormattedTick } from './label-utils';
-interface BottomLabelsProps {
+interface BlockEndLabelsProps {
     axis?: 'x' | 'y';
     width: number;
     height: number;
@@ -14,7 +14,7 @@ interface BottomLabelsProps {
     virtualTextRef: React.Ref<SVGTextElement>;
     formattedTicks: readonly FormattedTick[];
 }
-export declare function useBottomLabels({ ticks, scale, tickFormatter, }: {
+export declare function useBLockEndLabels({ ticks, scale, tickFormatter, }: {
     scale: ChartScale | NumericChartScale;
     ticks: readonly ChartDataTypes[];
     tickFormatter?: (value: ChartDataTypes) => string;
@@ -23,7 +23,7 @@ export declare function useBottomLabels({ ticks, scale, tickFormatter, }: {
     formattedTicks: FormattedTick[];
     height: number;
 };
-declare const _default: typeof BottomLabels;
+declare const _default: typeof BlockEndLabels;
 export default _default;
-declare function BottomLabels({ axis, width, height, scale, title, ariaRoleDescription, offsetLeft, offsetRight, virtualTextRef, formattedTicks, }: BottomLabelsProps): JSX.Element;
-//# sourceMappingURL=bottom-labels.d.ts.map
+declare function BlockEndLabels({ axis, width, height, scale, title, ariaRoleDescription, offsetLeft, offsetRight, virtualTextRef, formattedTicks, }: BlockEndLabelsProps): JSX.Element;
+//# sourceMappingURL=block-end-labels.d.ts.map

package/internal/components/cartesian-chart/block-end-labels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"block-end-labels.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/cartesian-chart/block-end-labels.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuB,MAAM,OAAO,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAIzD,OAAO,EAAgC,aAAa,EAAE,MAAM,eAAe,CAAC;AAG5E,UAAU,mBAAmB;IAC3B,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,UAAU,GAAG,iBAAiB,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1C,cAAc,EAAE,SAAS,aAAa,EAAE,CAAC;CAC1C;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,KAAK,EACL,aAAa,GACd,EAAE;IACD,KAAK,EAAE,UAAU,GAAG,iBAAiB,CAAC;IACtC,KAAK,EAAE,SAAS,cAAc,EAAE,CAAC;IACjC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,MAAM,CAAC;CACnD;;;;EA4BA;;AAED,wBAA6D;AAG7D,iBAAS,cAAc,CAAC,EACtB,IAAU,EACV,KAAK,EACL,MAAM,EACN,KAAK,EACL,KAAK,EACL,mBAAmB,EACnB,UAAc,EACd,WAAe,EACf,cAAc,EACd,cAAc,GACf,EAAE,mBAAmB,eAkDrB"}

package/internal/components/cartesian-chart/{bottom-labels.js → block-end-labels.js}

@@ -6,7 +6,7 @@ import { TICK_LENGTH, TICK_LINE_HEIGHT, TICK_MARGIN } from './constants';
 import styles from './styles.css.js';
 import { formatTicks, getVisibleTicks } from './label-utils';
 import { useInternalI18n } from '../../../i18n/context';
-export function useBottomLabels({ ticks, scale, tickFormatter, }) {
+export function useBLockEndLabels({ ticks, scale, tickFormatter, }) {
     const virtualTextRef = useRef(null);
     const cacheRef = useRef({});
     const getLabelSpace = (label) => {
@@ -30,16 +30,16 @@ export function useBottomLabels({ ticks, scale, tickFormatter, }) {
     }
     return { virtualTextRef, formattedTicks, height };
 }
-export default memo(BottomLabels);
+export default memo(BlockEndLabels);
 // Renders the visible tick labels on the bottom axis, as well as their grid lines.
-function BottomLabels({ axis = 'x', width, height, scale, title, ariaRoleDescription, offsetLeft = 0, offsetRight = 0, virtualTextRef, formattedTicks, }) {
+function BlockEndLabels({ axis = 'x', width, height, scale, title, ariaRoleDescription, offsetLeft = 0, offsetRight = 0, virtualTextRef, formattedTicks, }) {
     const i18n = useInternalI18n('[charts]');
     const xOffset = scale.isCategorical() && axis === 'x' ? Math.max(0, scale.d3Scale.bandwidth() - 1) / 2 : 0;
     const from = 0 - offsetLeft - xOffset;
     const until = width + offsetRight - xOffset;
     const balanceLabels = axis === 'x' && scale.scaleType !== 'log';
     const visibleTicks = getVisibleTicks(formattedTicks, from, until, balanceLabels);
-    return (React.createElement("g", { transform: `translate(0,${height})`, className: styles['labels-bottom'], "aria-label": title, role: "list", "aria-roledescription": i18n('i18nStrings.chartAriaRoleDescription', ariaRoleDescription), "aria-hidden": true },
+    return (React.createElement("g", { transform: `translate(0,${height})`, className: styles['labels-block-end'], "aria-label": title, role: "list", "aria-roledescription": i18n('i18nStrings.chartAriaRoleDescription', ariaRoleDescription), "aria-hidden": true },
         visibleTicks.map(({ position, lines }, index) => isFinite(position) && (React.createElement("g", { key: index, transform: `translate(${position + xOffset},0)`, className: clsx(styles.ticks, styles['ticks--bottom'], {
                 [styles['ticks--x']]: axis === 'x',
                 [styles['ticks--y']]: axis === 'y',
@@ -48,4 +48,4 @@ function BottomLabels({ axis = 'x', width, height, scale, title, ariaRoleDescrip
             lines.map((line, lineIndex) => (React.createElement("text", { className: styles.ticks__text, key: lineIndex, x: 0, y: TICK_LENGTH + TICK_MARGIN + lineIndex * TICK_LINE_HEIGHT }, line)))))),
         React.createElement("text", { ref: virtualTextRef, x: 0, y: 0, style: { visibility: 'hidden' }, "aria-hidden": "true" })));
 }
-//# sourceMappingURL=bottom-labels.js.map
+//# sourceMappingURL=block-end-labels.js.map

package/internal/components/cartesian-chart/block-end-labels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"block-end-labels.js","sourceRoot":"","sources":["../../../../../src/internal/components/cartesian-chart/block-end-labels.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, { memo, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { ChartDataTypes } from './interfaces';\nimport { ChartScale, NumericChartScale } from './scales';\nimport { TICK_LENGTH, TICK_LINE_HEIGHT, TICK_MARGIN } from './constants';\n\nimport styles from './styles.css.js';\nimport { formatTicks, getVisibleTicks, FormattedTick } from './label-utils';\nimport { useInternalI18n } from '../../../i18n/context';\n\ninterface BlockEndLabelsProps {\n  axis?: 'x' | 'y';\n  width: number;\n  height: number;\n  scale: ChartScale | NumericChartScale;\n  title?: string;\n  ariaRoleDescription?: string;\n  offsetLeft?: number;\n  offsetRight?: number;\n  virtualTextRef: React.Ref<SVGTextElement>;\n  formattedTicks: readonly FormattedTick[];\n}\n\nexport function useBLockEndLabels({\n  ticks,\n  scale,\n  tickFormatter,\n}: {\n  scale: ChartScale | NumericChartScale;\n  ticks: readonly ChartDataTypes[];\n  tickFormatter?: (value: ChartDataTypes) => string;\n}) {\n  const virtualTextRef = useRef<SVGTextElement>(null);\n\n  const cacheRef = useRef<{ [label: string]: number }>({});\n  const getLabelSpace = (label: string) => {\n    if (cacheRef.current[label] !== undefined && cacheRef.current[label] !== 0) {\n      return cacheRef.current[label];\n    }\n    if (virtualTextRef.current && virtualTextRef.current.getComputedTextLength) {\n      virtualTextRef.current.textContent = label;\n      cacheRef.current[label] = virtualTextRef.current.getComputedTextLength();\n      return cacheRef.current[label];\n    }\n    return 0;\n  };\n\n  const formattedTicks = formatTicks({ ticks, scale, getLabelSpace, tickFormatter });\n\n  if (virtualTextRef.current) {\n    virtualTextRef.current.textContent = '';\n  }\n\n  let height = TICK_LENGTH + TICK_MARGIN;\n  for (const { lines } of formattedTicks) {\n    height = Math.max(height, TICK_LENGTH + TICK_MARGIN + lines.length * TICK_LINE_HEIGHT);\n  }\n\n  return { virtualTextRef, formattedTicks, height };\n}\n\nexport default memo(BlockEndLabels) as typeof BlockEndLabels;\n\n// Renders the visible tick labels on the bottom axis, as well as their grid lines.\nfunction BlockEndLabels({\n  axis = 'x',\n  width,\n  height,\n  scale,\n  title,\n  ariaRoleDescription,\n  offsetLeft = 0,\n  offsetRight = 0,\n  virtualTextRef,\n  formattedTicks,\n}: BlockEndLabelsProps) {\n  const i18n = useInternalI18n('[charts]');\n\n  const xOffset = scale.isCategorical() && axis === 'x' ? Math.max(0, scale.d3Scale.bandwidth() - 1) / 2 : 0;\n\n  const from = 0 - offsetLeft - xOffset;\n  const until = width + offsetRight - xOffset;\n  const balanceLabels = axis === 'x' && scale.scaleType !== 'log';\n  const visibleTicks = getVisibleTicks(formattedTicks, from, until, balanceLabels);\n\n  return (\n    <g\n      transform={`translate(0,${height})`}\n      className={styles['labels-block-end']}\n      aria-label={title}\n      role=\"list\"\n      aria-roledescription={i18n('i18nStrings.chartAriaRoleDescription', ariaRoleDescription)}\n      aria-hidden={true}\n    >\n      {visibleTicks.map(\n        ({ position, lines }, index) =>\n          isFinite(position) && (\n            <g\n              key={index}\n              transform={`translate(${position + xOffset},0)`}\n              className={clsx(styles.ticks, styles['ticks--bottom'], {\n                [styles['ticks--x']]: axis === 'x',\n                [styles['ticks--y']]: axis === 'y',\n              })}\n              role=\"listitem\"\n              aria-label={lines.join('\\n')}\n            >\n              <line className={styles.ticks__line} x1={0} x2={0} y1={0} y2={TICK_LENGTH} aria-hidden=\"true\" />\n              {lines.map((line, lineIndex) => (\n                <text\n                  className={styles.ticks__text}\n                  key={lineIndex}\n                  x={0}\n                  y={TICK_LENGTH + TICK_MARGIN + lineIndex * TICK_LINE_HEIGHT}\n                >\n                  {line}\n                </text>\n              ))}\n            </g>\n          )\n      )}\n\n      <text ref={virtualTextRef} x={0} y={0} style={{ visibility: 'hidden' }} aria-hidden=\"true\"></text>\n    </g>\n  );\n}\n"]}

package/internal/components/cartesian-chart/{left-labels.d.ts → inline-start-labels.d.ts}

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ChartScale, NumericChartScale } from './scales';
 import { ChartDataTypes } from '../../../mixed-line-bar-chart/interfaces';
-interface LeftLabelsProps {
+interface InlineStartLabelsProps {
     axis?: 'x' | 'y';
     plotWidth: number;
     plotHeight: number;
@@ -12,7 +12,7 @@ interface LeftLabelsProps {
     title?: string;
     ariaRoleDescription?: string;
 }
-declare const _default: typeof LeftLabels;
+declare const _default: typeof InlineStartLabels;
 export default _default;
-declare function LeftLabels({ axis, plotWidth, plotHeight, maxLabelsWidth, scale, ticks, tickFormatter, title, ariaRoleDescription, }: LeftLabelsProps): JSX.Element;
-//# sourceMappingURL=left-labels.d.ts.map
+declare function InlineStartLabels({ axis, plotWidth, plotHeight, maxLabelsWidth, scale, ticks, tickFormatter, title, ariaRoleDescription, }: InlineStartLabelsProps): JSX.Element;
+//# sourceMappingURL=inline-start-labels.d.ts.map

package/internal/components/cartesian-chart/inline-start-labels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-start-labels.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/cartesian-chart/inline-start-labels.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAKzD,OAAO,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAO1E,UAAU,sBAAsB;IAC9B,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,UAAU,GAAG,iBAAiB,CAAC;IACtC,KAAK,EAAE,SAAS,cAAc,EAAE,CAAC;IACjC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;;AAED,wBAAmE;AAGnE,iBAAS,iBAAiB,CAAC,EACzB,IAAU,EACV,SAAS,EACT,UAAU,EACV,cAAyC,EACzC,KAAK,EACL,KAAK,EACL,aAAa,EACb,KAAK,EACL,mBAAmB,GACpB,EAAE,sBAAsB,eA+ExB"}

package/internal/components/cartesian-chart/{left-labels.js → inline-start-labels.js}

@@ -7,10 +7,11 @@ import styles from './styles.css.js';
 import { formatTicks, getSVGTextSize, getVisibleTicks } from './label-utils';
 import { useInternalI18n } from '../../../i18n/context';
 import ResponsiveText from '../responsive-text';
+import { getIsRtl } from '../../direction';
 const OFFSET_PX = 12;
-export default memo(LeftLabels);
-// Renders the visible tick labels on the left axis, as well as their grid lines.
-function LeftLabels({ axis = 'y', plotWidth, plotHeight, maxLabelsWidth = Number.POSITIVE_INFINITY, scale, ticks, tickFormatter, title, ariaRoleDescription, }) {
+export default memo(InlineStartLabels);
+// Renders the visible tick labels on the value axis, as well as their grid lines.
+function InlineStartLabels({ axis = 'y', plotWidth, plotHeight, maxLabelsWidth = Number.POSITIVE_INFINITY, scale, ticks, tickFormatter, title, ariaRoleDescription, }) {
     const i18n = useInternalI18n('[charts]');
     const virtualTextRef = useRef(null);
     const yOffset = axis === 'x' && scale.isCategorical() ? Math.max(0, scale.d3Scale.bandwidth() - 1) / 2 : 0;
@@ -33,13 +34,15 @@ function LeftLabels({ axis = 'y', plotWidth, plotHeight, maxLabelsWidth = Number
     const from = 0 - OFFSET_PX - yOffset;
     const until = plotHeight + OFFSET_PX - yOffset;
     const visibleTicks = getVisibleTicks(formattedTicks, from, until);
-    return (React.createElement("g", { className: clsx(styles['labels-left']), "aria-label": title, role: "list", "aria-roledescription": i18n('i18nStrings.chartAriaRoleDescription', ariaRoleDescription), "aria-hidden": true },
+    const isRtl = virtualTextRef.current ? getIsRtl(virtualTextRef.current) : false;
+    return (React.createElement("g", { className: clsx(styles['labels-inline-start']), "aria-label": title, role: "list", "aria-roledescription": i18n('i18nStrings.chartAriaRoleDescription', ariaRoleDescription), "aria-hidden": true },
         visibleTicks.map(({ position, lines }, index) => isFinite(position) && (React.createElement("g", { key: index, role: "listitem", transform: `translate(0,${position + yOffset})`, className: clsx(styles.ticks, axis === 'x' ? styles['ticks--x'] : styles['ticks--y']) },
             axis === 'y' && (React.createElement("line", { className: clsx(styles.grid, styles.ticks_line), x1: -TICK_LENGTH, y1: 0, x2: plotWidth, y2: 0, "aria-hidden": "true" })),
             lines.map((line, lineIndex) => {
                 var _a, _b;
+                const x = -(TICK_LENGTH + TICK_MARGIN);
                 const lineTextProps = {
-                    x: -(TICK_LENGTH + TICK_MARGIN),
+                    x: !isRtl ? x : plotWidth - x,
                     y: (lineIndex - (lines.length - 1) * 0.5) * TICK_LINE_HEIGHT,
                     className: styles.ticks__text,
                     children: line,
@@ -48,4 +51,4 @@ function LeftLabels({ axis = 'y', plotWidth, plotHeight, maxLabelsWidth = Number
             })))),
         React.createElement("text", { ref: virtualTextRef, x: 0, y: 0, style: { visibility: 'hidden' }, "aria-hidden": "true" })));
 }
-//# sourceMappingURL=left-labels.js.map
+//# sourceMappingURL=inline-start-labels.js.map

package/internal/components/cartesian-chart/inline-start-labels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-start-labels.js","sourceRoot":"","sources":["../../../../../src/internal/components/cartesian-chart/inline-start-labels.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, { memo, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { ChartScale, NumericChartScale } from './scales';\nimport { TICK_LENGTH, TICK_LINE_HEIGHT, TICK_MARGIN } from './constants';\n\nimport styles from './styles.css.js';\nimport { formatTicks, getSVGTextSize, getVisibleTicks } from './label-utils';\nimport { ChartDataTypes } from '../../../mixed-line-bar-chart/interfaces';\nimport { useInternalI18n } from '../../../i18n/context';\nimport ResponsiveText from '../responsive-text';\nimport { getIsRtl } from '../../direction';\n\nconst OFFSET_PX = 12;\n\ninterface InlineStartLabelsProps {\n  axis?: 'x' | 'y';\n  plotWidth: number;\n  plotHeight: number;\n  maxLabelsWidth?: number;\n  scale: ChartScale | NumericChartScale;\n  ticks: readonly ChartDataTypes[];\n  tickFormatter?: (value: number) => string;\n  title?: string;\n  ariaRoleDescription?: string;\n}\n\nexport default memo(InlineStartLabels) as typeof InlineStartLabels;\n\n// Renders the visible tick labels on the value axis, as well as their grid lines.\nfunction InlineStartLabels({\n  axis = 'y',\n  plotWidth,\n  plotHeight,\n  maxLabelsWidth = Number.POSITIVE_INFINITY,\n  scale,\n  ticks,\n  tickFormatter,\n  title,\n  ariaRoleDescription,\n}: InlineStartLabelsProps) {\n  const i18n = useInternalI18n('[charts]');\n  const virtualTextRef = useRef<SVGTextElement>(null);\n\n  const yOffset = axis === 'x' && scale.isCategorical() ? Math.max(0, scale.d3Scale.bandwidth() - 1) / 2 : 0;\n\n  const labelToBoxCache = useRef<{ [label: string]: undefined | { width: number; height: number } }>({});\n  const getLabelSpace = (label: string) => {\n    if (labelToBoxCache.current[label] !== undefined) {\n      return labelToBoxCache.current[label]?.height ?? 0;\n    }\n    if (virtualTextRef.current) {\n      virtualTextRef.current.textContent = label;\n    }\n    labelToBoxCache.current[label] = getSVGTextSize(virtualTextRef.current);\n    return labelToBoxCache.current[label]?.height ?? 0;\n  };\n\n  const formattedTicks = formatTicks({ ticks, scale, getLabelSpace, tickFormatter });\n\n  if (virtualTextRef.current) {\n    virtualTextRef.current.textContent = '';\n  }\n\n  const from = 0 - OFFSET_PX - yOffset;\n  const until = plotHeight + OFFSET_PX - yOffset;\n  const visibleTicks = getVisibleTicks(formattedTicks, from, until);\n\n  const isRtl = virtualTextRef.current ? getIsRtl(virtualTextRef.current) : false;\n\n  return (\n    <g\n      className={clsx(styles['labels-inline-start'])}\n      aria-label={title}\n      role=\"list\"\n      aria-roledescription={i18n('i18nStrings.chartAriaRoleDescription', ariaRoleDescription)}\n      aria-hidden={true}\n    >\n      {visibleTicks.map(\n        ({ position, lines }, index) =>\n          isFinite(position) && (\n            <g\n              key={index}\n              role=\"listitem\"\n              transform={`translate(0,${position + yOffset})`}\n              className={clsx(styles.ticks, axis === 'x' ? styles['ticks--x'] : styles['ticks--y'])}\n            >\n              {axis === 'y' && (\n                <line\n                  className={clsx(styles.grid, styles.ticks_line)}\n                  x1={-TICK_LENGTH}\n                  y1={0}\n                  x2={plotWidth}\n                  y2={0}\n                  aria-hidden=\"true\"\n                />\n              )}\n\n              {lines.map((line, lineIndex) => {\n                const x = -(TICK_LENGTH + TICK_MARGIN);\n                const lineTextProps = {\n                  x: !isRtl ? x : plotWidth - x,\n                  y: (lineIndex - (lines.length - 1) * 0.5) * TICK_LINE_HEIGHT,\n                  className: styles.ticks__text,\n                  children: line,\n                };\n                return (labelToBoxCache.current[lines[0]]?.width ?? 0) > maxLabelsWidth ? (\n                  <ResponsiveText key={lineIndex} {...lineTextProps} maxWidth={maxLabelsWidth} />\n                ) : (\n                  <text key={lineIndex} {...lineTextProps} />\n                );\n              })}\n            </g>\n          )\n      )}\n\n      <text ref={virtualTextRef} x={0} y={0} style={{ visibility: 'hidden' }} aria-hidden=\"true\"></text>\n    </g>\n  );\n}\n"]}

package/internal/components/cartesian-chart/labels-measure.js

@@ -19,8 +19,8 @@ function LabelsMeasure({ scale, ticks, tickFormatter, autoWidth, maxLabelsWidth
         }
         const formattedValue = tickFormatter ? tickFormatter(value) : value.toString();
         const lines = (formattedValue + '').split('\n');
-        return (React.createElement(Fragment, { key: `${value}` }, lines.map((line, lineIndex) => (React.createElement("div", { key: lineIndex, className: styles['labels-left__label'], "aria-hidden": "true" }, line)))));
+        return (React.createElement(Fragment, { key: `${value}` }, lines.map((line, lineIndex) => (React.createElement("div", { key: lineIndex, className: styles['labels-inline-start__label'], "aria-hidden": "true" }, line)))));
     };
-    return (React.createElement("div", { ref: ref, className: clsx(styles['labels-left'], styles['labels-left--hidden']), style: { maxWidth: maxLabelsWidth } }, ticks.map(labelMapper)));
+    return (React.createElement("div", { ref: ref, className: clsx(styles['labels-inline-start'], styles['labels-inline-start--hidden']), style: { maxWidth: maxLabelsWidth } }, ticks.map(labelMapper)));
 }
 //# sourceMappingURL=labels-measure.js.map

package/internal/components/cartesian-chart/labels-measure.js.map

@@ -1 +1 @@
-{"version":3,"file":"labels-measure.js","sourceRoot":"","sources":["../../../../../src/internal/components/cartesian-chart/labels-measure.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,IAAI,MAAM,MAAM,CAAC;AAIxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AAUzE,eAAe,IAAI,CAAC,aAAa,CAAyB,CAAC;AAE3D,+EAA+E;AAC/E,SAAS,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,cAAc,EAAsB;IACnG,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,iBAAiB,CAAS,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IAE7E,uCAAuC;IACvC,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;IACxB,CAAC,EAAE,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;IAEvB,MAAM,WAAW,GAAG,CAAC,KAAqB,EAAE,EAAE;QAC5C,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,KAAY,CAAC,CAAC;QAChD,IAAI,WAAW,KAAK,SAAS,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;YACvD,OAAO,IAAI,CAAC;SACb;QAED,MAAM,cAAc,GAAG,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,KAAY,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;QACtF,MAAM,KAAK,GAAG,CAAC,cAAc,GAAG,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QAEhD,OAAO,CACL,oBAAC,QAAQ,IAAC,GAAG,EAAE,GAAG,KAAK,EAAE,IACtB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,CAC9B,6BAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,oBAAoB,CAAC,iBAAc,MAAM,IAC7E,IAAI,CACD,CACP,CAAC,CACO,CACZ,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC,qBAAqB,CAAC,CAAC,EACrE,KAAK,EAAE,EAAE,QAAQ,EAAE,cAAc,EAAE,IAElC,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CACnB,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { memo, useEffect, Fragment } from 'react';\nimport clsx from 'clsx';\n\nimport { ChartScale, NumericChartScale } from './scales';\n\nimport styles from './styles.css.js';\nimport { ChartDataTypes } from '../../../mixed-line-bar-chart/interfaces';\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\n\ninterface LabelsMeasureProps {\n  scale: ChartScale | NumericChartScale;\n  ticks: readonly ChartDataTypes[];\n  tickFormatter?: (value: ChartDataTypes) => string;\n  autoWidth: (value: number) => void;\n  maxLabelsWidth?: number;\n}\n\nexport default memo(LabelsMeasure) as typeof LabelsMeasure;\n\n// Places the invisible left-hand side labels to calculate their maximum width.\nfunction LabelsMeasure({ scale, ticks, tickFormatter, autoWidth, maxLabelsWidth }: LabelsMeasureProps) {\n  const [width, ref] = useContainerQuery<number>(rect => rect.contentBoxWidth);\n\n  // Tell elements's width to the parent.\n  useEffect(() => {\n    autoWidth(width || 0);\n  }, [autoWidth, width]);\n\n  const labelMapper = (value: ChartDataTypes) => {\n    const scaledValue = scale.d3Scale(value as any);\n    if (scaledValue === undefined || !isFinite(scaledValue)) {\n      return null;\n    }\n\n    const formattedValue = tickFormatter ? tickFormatter(value as any) : value.toString();\n    const lines = (formattedValue + '').split('\\n');\n\n    return (\n      <Fragment key={`${value}`}>\n        {lines.map((line, lineIndex) => (\n          <div key={lineIndex} className={styles['labels-left__label']} aria-hidden=\"true\">\n            {line}\n          </div>\n        ))}\n      </Fragment>\n    );\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(styles['labels-left'], styles['labels-left--hidden'])}\n      style={{ maxWidth: maxLabelsWidth }}\n    >\n      {ticks.map(labelMapper)}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"labels-measure.js","sourceRoot":"","sources":["../../../../../src/internal/components/cartesian-chart/labels-measure.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,IAAI,MAAM,MAAM,CAAC;AAIxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AAUzE,eAAe,IAAI,CAAC,aAAa,CAAyB,CAAC;AAE3D,+EAA+E;AAC/E,SAAS,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,cAAc,EAAsB;IACnG,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,iBAAiB,CAAS,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IAE7E,uCAAuC;IACvC,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;IACxB,CAAC,EAAE,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;IAEvB,MAAM,WAAW,GAAG,CAAC,KAAqB,EAAE,EAAE;QAC5C,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,KAAY,CAAC,CAAC;QAChD,IAAI,WAAW,KAAK,SAAS,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;YACvD,OAAO,IAAI,CAAC;SACb;QAED,MAAM,cAAc,GAAG,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,KAAY,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;QACtF,MAAM,KAAK,GAAG,CAAC,cAAc,GAAG,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QAEhD,OAAO,CACL,oBAAC,QAAQ,IAAC,GAAG,EAAE,GAAG,KAAK,EAAE,IACtB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,CAC9B,6BAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,4BAA4B,CAAC,iBAAc,MAAM,IACrF,IAAI,CACD,CACP,CAAC,CACO,CACZ,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,qBAAqB,CAAC,EAAE,MAAM,CAAC,6BAA6B,CAAC,CAAC,EACrF,KAAK,EAAE,EAAE,QAAQ,EAAE,cAAc,EAAE,IAElC,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CACnB,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { memo, useEffect, Fragment } from 'react';\nimport clsx from 'clsx';\n\nimport { ChartScale, NumericChartScale } from './scales';\n\nimport styles from './styles.css.js';\nimport { ChartDataTypes } from '../../../mixed-line-bar-chart/interfaces';\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\n\ninterface LabelsMeasureProps {\n  scale: ChartScale | NumericChartScale;\n  ticks: readonly ChartDataTypes[];\n  tickFormatter?: (value: ChartDataTypes) => string;\n  autoWidth: (value: number) => void;\n  maxLabelsWidth?: number;\n}\n\nexport default memo(LabelsMeasure) as typeof LabelsMeasure;\n\n// Places the invisible left-hand side labels to calculate their maximum width.\nfunction LabelsMeasure({ scale, ticks, tickFormatter, autoWidth, maxLabelsWidth }: LabelsMeasureProps) {\n  const [width, ref] = useContainerQuery<number>(rect => rect.contentBoxWidth);\n\n  // Tell elements's width to the parent.\n  useEffect(() => {\n    autoWidth(width || 0);\n  }, [autoWidth, width]);\n\n  const labelMapper = (value: ChartDataTypes) => {\n    const scaledValue = scale.d3Scale(value as any);\n    if (scaledValue === undefined || !isFinite(scaledValue)) {\n      return null;\n    }\n\n    const formattedValue = tickFormatter ? tickFormatter(value as any) : value.toString();\n    const lines = (formattedValue + '').split('\\n');\n\n    return (\n      <Fragment key={`${value}`}>\n        {lines.map((line, lineIndex) => (\n          <div key={lineIndex} className={styles['labels-inline-start__label']} aria-hidden=\"true\">\n            {line}\n          </div>\n        ))}\n      </Fragment>\n    );\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(styles['labels-inline-start'], styles['labels-inline-start--hidden'])}\n      style={{ maxWidth: maxLabelsWidth }}\n    >\n      {ticks.map(labelMapper)}\n    </div>\n  );\n}\n"]}

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

@@ -1,32 +1,32 @@
 
     import './styles.scoped.css';
     export default {
-  "axis": "awsui_axis_f0fot_f6jsx_9",
-  "vertical-marker": "awsui_vertical-marker_f0fot_f6jsx_10",
-  "axis--emphasized": "awsui_axis--emphasized_f0fot_f6jsx_15",
-  "axis-label": "awsui_axis-label_f0fot_f6jsx_19",
-  "axis-label--x": "awsui_axis-label--x_f0fot_f6jsx_24",
-  "axis-label--y": "awsui_axis-label--y_f0fot_f6jsx_25",
-  "grid": "awsui_grid_f0fot_f6jsx_29",
-  "ticks__line": "awsui_ticks__line_f0fot_f6jsx_34",
-  "ticks__text": "awsui_ticks__text_f0fot_f6jsx_39",
-  "ticks--y": "awsui_ticks--y_f0fot_f6jsx_44",
-  "ticks--x": "awsui_ticks--x_f0fot_f6jsx_45",
-  "ticks--bottom": "awsui_ticks--bottom_f0fot_f6jsx_49",
-  "labels-left": "awsui_labels-left_f0fot_f6jsx_54",
-  "ticks": "awsui_ticks_f0fot_f6jsx_34",
-  "labels-left__label": "awsui_labels-left__label_f0fot_f6jsx_69",
-  "labels-left--hidden": "awsui_labels-left--hidden_f0fot_f6jsx_73",
-  "labels-bottom": "awsui_labels-bottom_f0fot_f6jsx_81",
-  "vertical-marker-circle": "awsui_vertical-marker-circle_f0fot_f6jsx_92",
-  "vertical-marker-circle-active": "awsui_vertical-marker-circle-active_f0fot_f6jsx_98",
-  "focus-outline": "awsui_focus-outline_f0fot_f6jsx_103",
-  "chart-container": "awsui_chart-container_f0fot_f6jsx_111",
-  "fit-height": "awsui_fit-height_f0fot_f6jsx_116",
-  "chart-container-outer": "awsui_chart-container-outer_f0fot_f6jsx_121",
-  "chart-container-inner": "awsui_chart-container-inner_f0fot_f6jsx_128",
-  "chart-container-plot-wrapper": "awsui_chart-container-plot-wrapper_f0fot_f6jsx_135",
-  "chart-container-plot": "awsui_chart-container-plot_f0fot_f6jsx_135",
-  "chart-container-bottom-labels": "awsui_chart-container-bottom-labels_f0fot_f6jsx_147"
+  "axis": "awsui_axis_f0fot_11j60_9",
+  "vertical-marker": "awsui_vertical-marker_f0fot_11j60_10",
+  "axis--emphasized": "awsui_axis--emphasized_f0fot_11j60_15",
+  "axis-label": "awsui_axis-label_f0fot_11j60_19",
+  "axis-label--x": "awsui_axis-label--x_f0fot_11j60_24",
+  "axis-label--y": "awsui_axis-label--y_f0fot_11j60_25",
+  "grid": "awsui_grid_f0fot_11j60_29",
+  "ticks__line": "awsui_ticks__line_f0fot_11j60_34",
+  "ticks__text": "awsui_ticks__text_f0fot_11j60_39",
+  "ticks--y": "awsui_ticks--y_f0fot_11j60_44",
+  "ticks--x": "awsui_ticks--x_f0fot_11j60_45",
+  "ticks--bottom": "awsui_ticks--bottom_f0fot_11j60_49",
+  "labels-inline-start": "awsui_labels-inline-start_f0fot_11j60_54",
+  "ticks": "awsui_ticks_f0fot_11j60_34",
+  "labels-inline-start__label": "awsui_labels-inline-start__label_f0fot_11j60_69",
+  "labels-inline-start--hidden": "awsui_labels-inline-start--hidden_f0fot_11j60_73",
+  "labels-block-end": "awsui_labels-block-end_f0fot_11j60_81",
+  "vertical-marker-circle": "awsui_vertical-marker-circle_f0fot_11j60_92",
+  "vertical-marker-circle-active": "awsui_vertical-marker-circle-active_f0fot_11j60_98",
+  "focus-outline": "awsui_focus-outline_f0fot_11j60_103",
+  "chart-container": "awsui_chart-container_f0fot_11j60_111",
+  "fit-height": "awsui_fit-height_f0fot_11j60_116",
+  "chart-container-outer": "awsui_chart-container-outer_f0fot_11j60_121",
+  "chart-container-inner": "awsui_chart-container-inner_f0fot_11j60_128",
+  "chart-container-plot-wrapper": "awsui_chart-container-plot-wrapper_f0fot_11j60_135",
+  "chart-container-plot": "awsui_chart-container-plot_f0fot_11j60_135",
+  "chart-container-bottom-labels": "awsui_chart-container-bottom-labels_f0fot_11j60_147"
 };
   

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_f6jsx_9:not(#\9),
-.awsui_vertical-marker_f0fot_f6jsx_10:not(#\9) {
+.awsui_axis_f0fot_11j60_9:not(#\9),
+.awsui_vertical-marker_f0fot_11j60_10:not(#\9) {
   stroke: var(--color-charts-line-axis-r7291n, #d1d5db);
   stroke-width: 1px;
 }
 
-.awsui_axis--emphasized_f0fot_f6jsx_15:not(#\9) {
+.awsui_axis--emphasized_f0fot_11j60_15:not(#\9) {
   stroke-width: 2px;
 }
 
-.awsui_axis-label_f0fot_f6jsx_19:not(#\9) {
+.awsui_axis-label_f0fot_11j60_19:not(#\9) {
   font-weight: bold;
   fill: var(--color-text-body-default-at06ol, #000716);
 }
 
-.awsui_axis-label--x_f0fot_f6jsx_24:not(#\9),
-.awsui_axis-label--y_f0fot_f6jsx_25:not(#\9) {
+.awsui_axis-label--x_f0fot_11j60_24:not(#\9),
+.awsui_axis-label--y_f0fot_11j60_25:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_grid_f0fot_f6jsx_29:not(#\9) {
+.awsui_grid_f0fot_11j60_29:not(#\9) {
   stroke: var(--color-charts-line-grid-9oxvql, #d1d5db);
   stroke-width: 1px;
 }
 
-.awsui_ticks__line_f0fot_f6jsx_34:not(#\9) {
+.awsui_ticks__line_f0fot_11j60_34:not(#\9) {
   stroke: var(--color-charts-line-tick-mf5hvw, #d1d5db);
   stroke-width: 1px;
 }
 
-.awsui_ticks__text_f0fot_f6jsx_39:not(#\9) {
+.awsui_ticks__text_f0fot_11j60_39:not(#\9) {
   font-size: var(--font-chart-detail-size-1n389u, 12px);
   fill: var(--color-text-body-secondary-w9jvno, #414d5c);
 }
 
-.awsui_ticks--y_f0fot_f6jsx_44:not(#\9),
-.awsui_ticks--x_f0fot_f6jsx_45:not(#\9) {
+.awsui_ticks--y_f0fot_11j60_44:not(#\9),
+.awsui_ticks--x_f0fot_11j60_45:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_ticks--bottom_f0fot_f6jsx_49 > .awsui_ticks__text_f0fot_f6jsx_39:not(#\9) {
+.awsui_ticks--bottom_f0fot_11j60_49 > .awsui_ticks__text_f0fot_11j60_39:not(#\9) {
   text-anchor: middle;
   dominant-baseline: hanging;
 }
 
-.awsui_labels-left_f0fot_f6jsx_54 > .awsui_ticks_f0fot_f6jsx_34 > .awsui_ticks__text_f0fot_f6jsx_39:not(#\9) {
+.awsui_labels-inline-start_f0fot_11j60_54 > .awsui_ticks_f0fot_11j60_34 > .awsui_ticks__text_f0fot_11j60_39:not(#\9) {
   text-anchor: end;
   dominant-baseline: central;
 }
 
-.awsui_labels-left_f0fot_f6jsx_54:not(#\9) {
+.awsui_labels-inline-start_f0fot_11j60_54:not(#\9) {
   position: relative;
   margin-inline-end: 12px;
 }
-.awsui_labels-left_f0fot_f6jsx_54 > .awsui_axis-label_f0fot_f6jsx_19:not(#\9) {
+.awsui_labels-inline-start_f0fot_11j60_54 > .awsui_axis-label_f0fot_11j60_19:not(#\9) {
   position: absolute;
   visibility: visible;
   white-space: nowrap;
 }
 
-.awsui_labels-left__label_f0fot_f6jsx_69:not(#\9) {
+.awsui_labels-inline-start__label_f0fot_11j60_69:not(#\9) {
   position: absolute;
 }
 
-.awsui_labels-left--hidden_f0fot_f6jsx_73:not(#\9) {
+.awsui_labels-inline-start--hidden_f0fot_11j60_73:not(#\9) {
   visibility: hidden;
 }
-.awsui_labels-left--hidden_f0fot_f6jsx_73 > .awsui_labels-left__label_f0fot_f6jsx_69:not(#\9) {
+.awsui_labels-inline-start--hidden_f0fot_11j60_73 > .awsui_labels-inline-start__label_f0fot_11j60_69:not(#\9) {
   position: relative;
   white-space: nowrap;
 }
 
-.awsui_labels-bottom_f0fot_f6jsx_81:not(#\9) {
+.awsui_labels-block-end_f0fot_11j60_81:not(#\9) {
   position: relative;
   display: block;
   inline-size: 100%;
   overflow: visible;
 }
 
-.awsui_vertical-marker_f0fot_f6jsx_10:not(#\9) {
+.awsui_vertical-marker_f0fot_11j60_10:not(#\9) {
   pointer-events: none;
 }
 
-.awsui_vertical-marker-circle_f0fot_f6jsx_92:not(#\9) {
+.awsui_vertical-marker-circle_f0fot_11j60_92:not(#\9) {
   fill: var(--color-background-container-content-4un1ap, #ffffff);
   pointer-events: none;
   stroke-width: var(--border-line-chart-width-9mzos2, 2px);
 }
 
-.awsui_vertical-marker-circle-active_f0fot_f6jsx_98:not(#\9) {
+.awsui_vertical-marker-circle-active_f0fot_11j60_98:not(#\9) {
   cursor: pointer;
   stroke-width: var(--border-line-chart-width-9mzos2, 2px);
 }
 
-.awsui_focus-outline_f0fot_f6jsx_103:not(#\9) {
+.awsui_focus-outline_f0fot_11j60_103:not(#\9) {
   outline: none;
   pointer-events: none;
   fill: none;
@@ -108,42 +108,42 @@
   stroke-width: 2px;
 }
 
-.awsui_chart-container_f0fot_f6jsx_111:not(#\9) {
+.awsui_chart-container_f0fot_11j60_111:not(#\9) {
   display: flex;
   inline-size: 100%;
   flex-direction: column;
 }
-.awsui_chart-container_f0fot_f6jsx_111.awsui_fit-height_f0fot_f6jsx_116:not(#\9) {
+.awsui_chart-container_f0fot_11j60_111.awsui_fit-height_f0fot_11j60_116:not(#\9) {
   block-size: 100%;
   min-block-size: inherit;
 }
 
-.awsui_chart-container-outer_f0fot_f6jsx_121:not(#\9) {
+.awsui_chart-container-outer_f0fot_11j60_121:not(#\9) {
   display: flex;
 }
-.awsui_chart-container-outer_f0fot_f6jsx_121.awsui_fit-height_f0fot_f6jsx_116:not(#\9) {
+.awsui_chart-container-outer_f0fot_11j60_121.awsui_fit-height_f0fot_11j60_116:not(#\9) {
   flex: 1;
 }
 
-.awsui_chart-container-inner_f0fot_f6jsx_128:not(#\9) {
+.awsui_chart-container-inner_f0fot_11j60_128:not(#\9) {
   position: relative;
   display: flex;
   flex-direction: column;
   inline-size: 100%;
 }
 
-.awsui_chart-container-plot-wrapper_f0fot_f6jsx_135.awsui_fit-height_f0fot_f6jsx_116:not(#\9) {
+.awsui_chart-container-plot-wrapper_f0fot_11j60_135.awsui_fit-height_f0fot_11j60_116:not(#\9) {
   display: block;
   position: relative;
   flex: 1;
 }
 
-.awsui_chart-container-plot_f0fot_f6jsx_135.awsui_fit-height_f0fot_f6jsx_116:not(#\9) {
+.awsui_chart-container-plot_f0fot_11j60_135.awsui_fit-height_f0fot_11j60_116:not(#\9) {
   display: block;
   position: absolute;
   inset: 0;
 }
 
-.awsui_chart-container-bottom-labels_f0fot_f6jsx_147.awsui_fit-height_f0fot_f6jsx_116:not(#\9) {
+.awsui_chart-container-bottom-labels_f0fot_11j60_147.awsui_fit-height_f0fot_11j60_116:not(#\9) {
   display: block;
 }

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

@@ -2,32 +2,32 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "axis": "awsui_axis_f0fot_f6jsx_9",
-  "vertical-marker": "awsui_vertical-marker_f0fot_f6jsx_10",
-  "axis--emphasized": "awsui_axis--emphasized_f0fot_f6jsx_15",
-  "axis-label": "awsui_axis-label_f0fot_f6jsx_19",
-  "axis-label--x": "awsui_axis-label--x_f0fot_f6jsx_24",
-  "axis-label--y": "awsui_axis-label--y_f0fot_f6jsx_25",
-  "grid": "awsui_grid_f0fot_f6jsx_29",
-  "ticks__line": "awsui_ticks__line_f0fot_f6jsx_34",
-  "ticks__text": "awsui_ticks__text_f0fot_f6jsx_39",
-  "ticks--y": "awsui_ticks--y_f0fot_f6jsx_44",
-  "ticks--x": "awsui_ticks--x_f0fot_f6jsx_45",
-  "ticks--bottom": "awsui_ticks--bottom_f0fot_f6jsx_49",
-  "labels-left": "awsui_labels-left_f0fot_f6jsx_54",
-  "ticks": "awsui_ticks_f0fot_f6jsx_34",
-  "labels-left__label": "awsui_labels-left__label_f0fot_f6jsx_69",
-  "labels-left--hidden": "awsui_labels-left--hidden_f0fot_f6jsx_73",
-  "labels-bottom": "awsui_labels-bottom_f0fot_f6jsx_81",
-  "vertical-marker-circle": "awsui_vertical-marker-circle_f0fot_f6jsx_92",
-  "vertical-marker-circle-active": "awsui_vertical-marker-circle-active_f0fot_f6jsx_98",
-  "focus-outline": "awsui_focus-outline_f0fot_f6jsx_103",
-  "chart-container": "awsui_chart-container_f0fot_f6jsx_111",
-  "fit-height": "awsui_fit-height_f0fot_f6jsx_116",
-  "chart-container-outer": "awsui_chart-container-outer_f0fot_f6jsx_121",
-  "chart-container-inner": "awsui_chart-container-inner_f0fot_f6jsx_128",
-  "chart-container-plot-wrapper": "awsui_chart-container-plot-wrapper_f0fot_f6jsx_135",
-  "chart-container-plot": "awsui_chart-container-plot_f0fot_f6jsx_135",
-  "chart-container-bottom-labels": "awsui_chart-container-bottom-labels_f0fot_f6jsx_147"
+  "axis": "awsui_axis_f0fot_11j60_9",
+  "vertical-marker": "awsui_vertical-marker_f0fot_11j60_10",
+  "axis--emphasized": "awsui_axis--emphasized_f0fot_11j60_15",
+  "axis-label": "awsui_axis-label_f0fot_11j60_19",
+  "axis-label--x": "awsui_axis-label--x_f0fot_11j60_24",
+  "axis-label--y": "awsui_axis-label--y_f0fot_11j60_25",
+  "grid": "awsui_grid_f0fot_11j60_29",
+  "ticks__line": "awsui_ticks__line_f0fot_11j60_34",
+  "ticks__text": "awsui_ticks__text_f0fot_11j60_39",
+  "ticks--y": "awsui_ticks--y_f0fot_11j60_44",
+  "ticks--x": "awsui_ticks--x_f0fot_11j60_45",
+  "ticks--bottom": "awsui_ticks--bottom_f0fot_11j60_49",
+  "labels-inline-start": "awsui_labels-inline-start_f0fot_11j60_54",
+  "ticks": "awsui_ticks_f0fot_11j60_34",
+  "labels-inline-start__label": "awsui_labels-inline-start__label_f0fot_11j60_69",
+  "labels-inline-start--hidden": "awsui_labels-inline-start--hidden_f0fot_11j60_73",
+  "labels-block-end": "awsui_labels-block-end_f0fot_11j60_81",
+  "vertical-marker-circle": "awsui_vertical-marker-circle_f0fot_11j60_92",
+  "vertical-marker-circle-active": "awsui_vertical-marker-circle-active_f0fot_11j60_98",
+  "focus-outline": "awsui_focus-outline_f0fot_11j60_103",
+  "chart-container": "awsui_chart-container_f0fot_11j60_111",
+  "fit-height": "awsui_fit-height_f0fot_11j60_116",
+  "chart-container-outer": "awsui_chart-container-outer_f0fot_11j60_121",
+  "chart-container-inner": "awsui_chart-container-inner_f0fot_11j60_128",
+  "chart-container-plot-wrapper": "awsui_chart-container-plot-wrapper_f0fot_11j60_135",
+  "chart-container-plot": "awsui_chart-container-plot_f0fot_11j60_135",
+  "chart-container-bottom-labels": "awsui_chart-container-bottom-labels_f0fot_11j60_147"
 };
   

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/chart-legend/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAuB,MAAM,OAAO,CAAC;AAI5C,OAAqB,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAI7E,MAAM,WAAW,eAAe,CAAC,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,qBAAqB,CAAC;IAC5B,KAAK,EAAE,CAAC,CAAC;CACV;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC;IACjC,MAAM,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1C,iBAAiB,EAAE,CAAC,GAAG,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACnD,iBAAiB,EAAE,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;CAC/C;;AAED,wBAAuD;AAEvD,iBAAS,WAAW,CAAC,CAAC,EAAE,EACtB,MAAM,EACN,iBAAiB,EACjB,iBAAiB,EACjB,WAAW,EACX,SAAS,EACT,gBAAgB,GACjB,EAAE,gBAAgB,CAAC,CAAC,CAAC,eAwHrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/chart-legend/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAuB,MAAM,OAAO,CAAC;AAI5C,OAAqB,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAK7E,MAAM,WAAW,eAAe,CAAC,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,qBAAqB,CAAC;IAC5B,KAAK,EAAE,CAAC,CAAC;CACV;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC;IACjC,MAAM,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1C,iBAAiB,EAAE,CAAC,GAAG,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACnD,iBAAiB,EAAE,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;CAC/C;;AAED,wBAAuD;AAEvD,iBAAS,WAAW,CAAC,CAAC,EAAE,EACtB,MAAM,EACN,iBAAiB,EACjB,iBAAiB,EACjB,WAAW,EACX,SAAS,EACT,gBAAgB,GACjB,EAAE,gBAAgB,CAAC,CAAC,CAAC,eAkHrB"}

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

@@ -7,19 +7,20 @@ import { KeyCode } from '../../keycode';
 import SeriesMarker from '../chart-series-marker';
 import styles from './styles.css.js';
 import { useInternalI18n } from '../../../i18n/context';
+import handleKey from '../../utils/handle-key';
 export default memo(ChartLegend);
 function ChartLegend({ series, onHighlightChange, highlightedSeries, legendTitle, ariaLabel, plotContainerRef, }) {
     const i18n = useInternalI18n('[charts]');
     const containerRef = useRef(null);
     const segmentsRef = useRef([]);
     const highlightedSeriesIndex = findSeriesIndex(series, highlightedSeries);
-    const highlightLeft = () => {
+    const highlightInlineStart = () => {
         var _a;
         const currentIndex = highlightedSeriesIndex !== null && highlightedSeriesIndex !== void 0 ? highlightedSeriesIndex : 0;
         const nextIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : series.length - 1;
         (_a = segmentsRef.current[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
     };
-    const highlightRight = () => {
+    const highlightInlineEnd = () => {
         var _a;
         const currentIndex = highlightedSeriesIndex !== null && highlightedSeriesIndex !== void 0 ? highlightedSeriesIndex : 0;
         const nextIndex = currentIndex + 1 < series.length ? currentIndex + 1 : 0;
@@ -29,14 +30,10 @@ function ChartLegend({ series, onHighlightChange, highlightedSeries, legendTitle
         if (event.keyCode === KeyCode.right || event.keyCode === KeyCode.left) {
             // Preventing default fixes an issue in Safari+VO when VO additionally interprets arrow keys as its commands.
             event.preventDefault();
-            switch (event.keyCode) {
-                case KeyCode.left:
-                    return highlightLeft();
-                case KeyCode.right:
-                    return highlightRight();
-                default:
-                    return;
-            }
+            handleKey(event, {
+                onInlineStart: () => highlightInlineStart(),
+                onInlineEnd: () => highlightInlineEnd(),
+            });
         }
     };
     const handleSelection = (index) => {