@cloudscape-design/chart-components 1.0.23 → 1.0.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/internal/components/chart-legend/index.js +3 -11
  2. package/internal/components/chart-legend/index.js.map +1 -1
  3. package/internal/components/series-details/index.js +3 -2
  4. package/internal/components/series-details/index.js.map +1 -1
  5. package/internal/environment.js +1 -1
  6. package/internal/environment.json +1 -1
  7. package/internal/generated/styles/tokens.d.ts +5 -0
  8. package/internal/generated/styles/tokens.js +5 -0
  9. package/internal/generated/theming/index.cjs +26 -1
  10. package/internal/generated/theming/index.cjs.d.ts +45 -0
  11. package/internal/generated/theming/index.d.ts +45 -0
  12. package/internal/generated/theming/index.js +26 -1
  13. package/internal/manifest.json +1 -1
  14. package/internal/utils/dom.d.ts +11 -0
  15. package/internal/utils/dom.js +44 -0
  16. package/internal/utils/dom.js.map +1 -0
  17. package/package.json +1 -1
package/internal/components/chart-legend/index.js CHANGED
@@ -6,6 +6,7 @@ import clsx from "clsx";
6
6
  import { circleIndex, handleKey, KeyCode, SingleTabStopNavigationProvider, useMergeRefs, useSingleTabStopNavigation, } from "@cloudscape-design/component-toolkit/internal";
7
7
  import Box from "@cloudscape-design/components/box";
8
8
  import { InternalChartTooltip } from "@cloudscape-design/components/internal/do-not-use/chart-tooltip";
9
+ import { scrollIntoViewNearestContainer } from "../../utils/dom";
9
10
  import { DebouncedCall } from "../../utils/utils";
10
11
  import styles from "./styles.css.js";
11
12
  import testClasses from "./test-classes/styles.css.js";
@@ -64,20 +65,11 @@ export const ChartLegend = ({ items, legendTitle, ariaLabel, actions, alignment,
64
65
  if (isMouseInContainer.current) {
65
66
  return;
66
67
  }
67
- const container = containerRef.current;
68
68
  const element = (_a = elementsByIndexRef.current) === null || _a === void 0 ? void 0 : _a[highlightedIndex];
69
- if (!container || !element) {
69
+ if (!element) {
70
70
  return;
71
71
  }
72
- const elementRect = element.getBoundingClientRect();
73
- const containerRect = container.getBoundingClientRect();
74
- const isVisible = elementRect.top >= containerRect.top && elementRect.bottom <= containerRect.bottom;
75
- if (!isVisible) {
76
- const elementCenter = elementRect.top + elementRect.height / 2;
77
- const containerCenter = containerRect.top + containerRect.height / 2;
78
- const top = container.scrollTop + (elementCenter - containerCenter);
79
- container.scrollTo({ top, behavior: "smooth" });
80
- }
72
+ scrollIntoViewNearestContainer(element, { behavior: "smooth", scrollMode: "if-needed" });
81
73
  }, SCROLL_DELAY);
82
74
  }, [items, scrollIntoViewControl]);
83
75
  const showHighlight = (itemId) => {
package/internal/components/chart-legend/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/chart-legend/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\n\nimport { forwardRef, Ref, useEffect, useMemo, useRef, useState } from \"react\";\nimport clsx from \"clsx\";\n\nimport {\n circleIndex,\n handleKey,\n KeyCode,\n SingleTabStopNavigationAPI,\n SingleTabStopNavigationProvider,\n useMergeRefs,\n useSingleTabStopNavigation,\n} from \"@cloudscape-design/component-toolkit/internal\";\nimport Box, { BoxProps } from \"@cloudscape-design/components/box\";\nimport { InternalChartTooltip } from \"@cloudscape-design/components/internal/do-not-use/chart-tooltip\";\n\nimport { DebouncedCall } from \"../../utils/utils\";\nimport { GetLegendTooltipContentProps, LegendItem, LegendTooltipContent } from \"../interfaces\";\n\nimport styles from \"./styles.css.js\";\nimport testClasses from \"./test-classes/styles.css.js\";\n\nconst TOOLTIP_BLUR_DELAY = 50;\nconst HIGHLIGHT_LOST_DELAY = 50;\nconst SCROLL_DELAY = 100;\n\nexport type LegendAlignment = \"horizontal\" | \"vertical\";\nexport type LegendHorizontalAlignment = \"start\" | \"center\" | \"end\";\n\nexport interface ChartLegendProps {\n items: readonly LegendItem[];\n legendTitle?: string;\n ariaLabel?: string;\n className?: string;\n actions?: React.ReactNode;\n someHighlighted: boolean;\n alignment: LegendAlignment;\n horizontalAlignment: LegendHorizontalAlignment;\n onToggleItem: (itemId: string) => void;\n onSelectItem: (itemId: string) => void;\n onItemHighlightEnter: (item: LegendItem) => void;\n onItemHighlightExit: () => void;\n getTooltipContent: (props: GetLegendTooltipContentProps) => null | LegendTooltipContent;\n}\n\nexport const ChartLegend = ({\n items,\n legendTitle,\n ariaLabel,\n actions,\n alignment,\n className,\n someHighlighted,\n onToggleItem,\n onSelectItem,\n onItemHighlightEnter,\n onItemHighlightExit,\n getTooltipContent,\n horizontalAlignment,\n}: ChartLegendProps) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const elementsByIndexRef = useRef<Record<number, HTMLElement>>([]);\n const elementsByIdRef = useRef<Record<string, HTMLElement>>({});\n const tooltipRef = useRef<HTMLElement>(null);\n const highlightControl = useMemo(() => new DebouncedCall(), []);\n const scrollIntoViewControl = useMemo(() => new DebouncedCall(), []);\n const [selectedIndex, setSelectedIndex] = useState<number>(0);\n const [tooltipItemId, setTooltipItemId] = useState<string | null>(null);\n const { showTooltip, hideTooltip } = useMemo(() => {\n const control = new DebouncedCall();\n return {\n showTooltip(itemId: string) {\n control.call(() => setTooltipItemId(itemId));\n },\n hideTooltip(lock = false) {\n control.call(() => setTooltipItemId(null), TOOLTIP_BLUR_DELAY);\n if (lock) {\n control.lock(TOOLTIP_BLUR_DELAY);\n }\n },\n };\n }, []);\n\n useEffect(() => {\n if (!tooltipItemId) {\n return;\n }\n const onDocumentKeyDown = (event: KeyboardEvent) => {\n if (event.keyCode === KeyCode.escape) {\n hideTooltip(true);\n elementsByIdRef.current[tooltipItemId]?.focus();\n }\n };\n document.addEventListener(\"keydown\", onDocumentKeyDown, true);\n return () => {\n document.removeEventListener(\"keydown\", onDocumentKeyDown, true);\n };\n }, [items, tooltipItemId, hideTooltip]);\n const isMouseInContainer = useRef<boolean>(false);\n\n // Scrolling to the highlighted legend item.\n useEffect(() => {\n const highlightedIndex = items.findIndex((item) => item.highlighted);\n if (highlightedIndex === -1) {\n return;\n }\n scrollIntoViewControl.call(() => {\n if (isMouseInContainer.current) {\n return;\n }\n const container = containerRef.current;\n const element = elementsByIndexRef.current?.[highlightedIndex];\n if (!container || !element) {\n return;\n }\n const elementRect = element.getBoundingClientRect();\n const containerRect = container.getBoundingClientRect();\n const isVisible = elementRect.top >= containerRect.top && elementRect.bottom <= containerRect.bottom;\n if (!isVisible) {\n const elementCenter = elementRect.top + elementRect.height / 2;\n const containerCenter = containerRect.top + containerRect.height / 2;\n const top = container.scrollTop + (elementCenter - containerCenter);\n container.scrollTo({ top, behavior: \"smooth\" });\n }\n }, SCROLL_DELAY);\n }, [items, scrollIntoViewControl]);\n\n const showHighlight = (itemId: string) => {\n const item = items.find((item) => item.id === itemId);\n if (item?.visible) {\n highlightControl.cancelPrevious();\n onItemHighlightEnter(item);\n }\n };\n const clearHighlight = () => {\n highlightControl.call(onItemHighlightExit, HIGHLIGHT_LOST_DELAY);\n };\n\n const navigationAPI = useRef<SingleTabStopNavigationAPI>(null);\n\n function onFocus(index: number, itemId: string) {\n setSelectedIndex(index);\n navigationAPI.current!.updateFocusTarget();\n showHighlight(itemId);\n showTooltip(itemId);\n }\n\n function onBlur(event: React.FocusEvent) {\n navigationAPI.current!.updateFocusTarget();\n\n // Hide tooltip and clear highlight unless focus moves inside tooltip;\n if (tooltipRef.current && event.relatedTarget && !tooltipRef.current.contains(event.relatedTarget)) {\n clearHighlight();\n hideTooltip();\n }\n }\n\n function focusElement(index: number) {\n elementsByIndexRef.current[index]?.focus();\n }\n\n function onKeyDown(event: React.KeyboardEvent<HTMLElement>) {\n if (\n event.keyCode === KeyCode.right ||\n event.keyCode === KeyCode.left ||\n event.keyCode === KeyCode.up ||\n event.keyCode === KeyCode.down ||\n event.keyCode === KeyCode.home ||\n event.keyCode === KeyCode.end ||\n event.keyCode === KeyCode.escape\n ) {\n // Preventing default fixes an issue in Safari+VO when VO additionally interprets arrow keys as its commands.\n event.preventDefault();\n\n const range = [0, items.length - 1] as [number, number];\n\n handleKey(event, {\n onInlineStart: () => focusElement(circleIndex(selectedIndex - 1, range)),\n onInlineEnd: () => focusElement(circleIndex(selectedIndex + 1, range)),\n onBlockStart: () => focusElement(circleIndex(selectedIndex - 1, range)),\n onBlockEnd: () => focusElement(circleIndex(selectedIndex + 1, range)),\n onHome: () => focusElement(0),\n onEnd: () => focusElement(items.length - 1),\n onEscape: () => onItemHighlightExit(),\n });\n }\n }\n\n function getNextFocusTarget(): null | HTMLElement {\n if (containerRef.current) {\n const buttons: HTMLButtonElement[] = Array.from(containerRef.current.querySelectorAll(`.${styles.item}`));\n return buttons[selectedIndex] ?? null;\n }\n return null;\n }\n\n function onUnregisterActive(\n focusableElement: HTMLElement,\n navigationAPI: React.RefObject<{ getFocusTarget: () => HTMLElement | null }>,\n ) {\n const target = navigationAPI.current?.getFocusTarget();\n\n if (target && target.dataset.itemid !== focusableElement.dataset.itemid) {\n target.focus();\n }\n }\n\n useEffect(() => {\n navigationAPI.current!.updateFocusTarget();\n });\n\n const isVertical = alignment === \"vertical\";\n\n const tooltipTrack = useRef<null | HTMLElement>(null);\n const tooltipTarget = items.find((item) => item.id === tooltipItemId) ?? null;\n tooltipTrack.current = tooltipItemId ? elementsByIdRef.current[tooltipItemId] : null;\n const tooltipContent = tooltipTarget && getTooltipContent({ legendItem: tooltipTarget });\n const tooltipPosition = isVertical ? \"left\" : \"bottom\";\n\n return (\n <SingleTabStopNavigationProvider\n ref={navigationAPI}\n navigationActive={true}\n getNextFocusTarget={() => getNextFocusTarget()}\n onUnregisterActive={(element: HTMLElement) => onUnregisterActive(element, navigationAPI)}\n >\n <div\n role=\"toolbar\"\n aria-label={legendTitle || ariaLabel}\n className={clsx(testClasses.root, styles.root, className)}\n onMouseEnter={() => (isMouseInContainer.current = true)}\n onMouseLeave={() => (isMouseInContainer.current = false)}\n >\n {legendTitle && (\n <Box fontWeight=\"bold\" className={testClasses.title} textAlign={getBoxTextAlignment(horizontalAlignment)}>\n {legendTitle}\n </Box>\n )}\n <div\n // The list element is not focusable. However, the focus lands on it regardless, when testing in Firefox.\n // Setting the tab index to -1 does fix the problem.\n tabIndex={-1}\n ref={containerRef}\n className={clsx(styles.list, {\n [styles[`list-bottom-${horizontalAlignment}`]]: !isVertical,\n [styles[\"list-bottom\"]]: !isVertical,\n [styles[\"list-side\"]]: isVertical,\n })}\n >\n {actions && (\n <>\n <div className={clsx(testClasses.actions, styles.actions, styles[\"actions-bottom\"])}>\n {actions}\n {!isVertical && <div className={styles[\"actions-divider-bottom\"]} />}\n </div>\n {isVertical && <div className={styles[\"actions-divider-side\"]} />}\n </>\n )}\n {items.map((item, index) => {\n const handlers = {\n onMouseEnter: () => {\n showHighlight(item.id);\n showTooltip(item.id);\n },\n onMouseLeave: () => {\n clearHighlight();\n hideTooltip();\n },\n onFocus: () => {\n onFocus(index, item.id);\n },\n onBlur: (event: React.FocusEvent) => {\n onBlur(event);\n },\n onKeyDown,\n };\n const thisTriggerRef = (elem: null | HTMLElement) => {\n if (elem) {\n elementsByIndexRef.current[index] = elem;\n elementsByIdRef.current[item.id] = elem;\n } else {\n delete elementsByIndexRef.current[index];\n delete elementsByIdRef.current[item.id];\n }\n };\n return (\n <LegendItemTrigger\n key={index}\n {...handlers}\n ref={thisTriggerRef}\n onClick={(event) => {\n if (event.metaKey || event.ctrlKey) {\n onToggleItem(item.id);\n } else {\n onSelectItem(item.id);\n }\n }}\n isHighlighted={item.highlighted}\n someHighlighted={someHighlighted}\n itemId={item.id}\n label={item.name}\n visible={item.visible}\n marker={item.marker}\n />\n );\n })}\n </div>\n {tooltipContent && (\n <InternalChartTooltip\n trackRef={tooltipTrack}\n trackKey={tooltipTarget.id}\n container={null}\n dismissButton={false}\n onDismiss={() => {}}\n position={tooltipPosition}\n title={tooltipContent.header}\n onMouseEnter={() => showTooltip(tooltipTarget.id)}\n onMouseLeave={() => hideTooltip()}\n onBlur={() => hideTooltip()}\n footer={\n tooltipContent.footer && (\n <>\n <hr aria-hidden={true} />\n {tooltipContent.footer}\n </>\n )\n }\n >\n {tooltipContent.body}\n </InternalChartTooltip>\n )}\n </div>\n </SingleTabStopNavigationProvider>\n );\n};\n\nfunction getBoxTextAlignment(horizontalAlignment: LegendHorizontalAlignment): BoxProps.TextAlign {\n switch (horizontalAlignment) {\n case \"start\":\n return \"left\";\n case \"center\":\n return \"center\";\n case \"end\":\n return \"right\";\n }\n}\n\nconst LegendItemTrigger = forwardRef(\n (\n {\n isHighlighted,\n someHighlighted,\n itemId,\n label,\n marker,\n visible,\n onClick,\n triggerRef,\n onMouseEnter,\n onMouseLeave,\n onFocus,\n onBlur,\n onKeyDown,\n }: {\n isHighlighted?: boolean;\n someHighlighted?: boolean;\n itemId: string;\n label: string;\n marker?: React.ReactNode;\n visible: boolean;\n onClick: (event: React.MouseEvent) => void;\n onMarkerClick?: () => void;\n triggerRef?: Ref<HTMLElement>;\n onMouseEnter?: () => void;\n onMouseLeave?: () => void;\n onFocus?: () => void;\n onBlur?: (event: React.FocusEvent) => void;\n onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;\n },\n ref: Ref<HTMLButtonElement>,\n ) => {\n const refObject = useRef<HTMLDivElement>(null);\n const mergedRef = useMergeRefs(ref, triggerRef, refObject);\n const { tabIndex } = useSingleTabStopNavigation(refObject);\n return (\n <button\n data-itemid={itemId}\n aria-pressed={visible}\n aria-current={isHighlighted}\n className={clsx(testClasses.item, styles.item, {\n [styles[\"item--inactive\"]]: !visible,\n [testClasses[\"hidden-item\"]]: !visible,\n [styles[\"item--dimmed\"]]: someHighlighted && !isHighlighted,\n [testClasses[\"dimmed-item\"]]: someHighlighted && !isHighlighted,\n })}\n ref={mergedRef}\n tabIndex={tabIndex}\n onClick={onClick}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyDown={onKeyDown}\n >\n {marker}\n <span className={styles[\"item-label\"]}>{label}</span>\n </button>\n );\n },\n);\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/chart-legend/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\n\nimport { forwardRef, Ref, useEffect, useMemo, useRef, useState } from \"react\";\nimport clsx from \"clsx\";\n\nimport {\n circleIndex,\n handleKey,\n KeyCode,\n SingleTabStopNavigationAPI,\n SingleTabStopNavigationProvider,\n useMergeRefs,\n useSingleTabStopNavigation,\n} from \"@cloudscape-design/component-toolkit/internal\";\nimport Box, { BoxProps } from \"@cloudscape-design/components/box\";\nimport { InternalChartTooltip } from \"@cloudscape-design/components/internal/do-not-use/chart-tooltip\";\n\nimport { scrollIntoViewNearestContainer } from \"../../utils/dom\";\nimport { DebouncedCall } from \"../../utils/utils\";\nimport { GetLegendTooltipContentProps, LegendItem, LegendTooltipContent } from \"../interfaces\";\n\nimport styles from \"./styles.css.js\";\nimport testClasses from \"./test-classes/styles.css.js\";\n\nconst TOOLTIP_BLUR_DELAY = 50;\nconst HIGHLIGHT_LOST_DELAY = 50;\nconst SCROLL_DELAY = 100;\n\nexport type LegendAlignment = \"horizontal\" | \"vertical\";\nexport type LegendHorizontalAlignment = \"start\" | \"center\" | \"end\";\n\nexport interface ChartLegendProps {\n items: readonly LegendItem[];\n legendTitle?: string;\n ariaLabel?: string;\n className?: string;\n actions?: React.ReactNode;\n someHighlighted: boolean;\n alignment: LegendAlignment;\n horizontalAlignment: LegendHorizontalAlignment;\n onToggleItem: (itemId: string) => void;\n onSelectItem: (itemId: string) => void;\n onItemHighlightEnter: (item: LegendItem) => void;\n onItemHighlightExit: () => void;\n getTooltipContent: (props: GetLegendTooltipContentProps) => null | LegendTooltipContent;\n}\n\nexport const ChartLegend = ({\n items,\n legendTitle,\n ariaLabel,\n actions,\n alignment,\n className,\n someHighlighted,\n onToggleItem,\n onSelectItem,\n onItemHighlightEnter,\n onItemHighlightExit,\n getTooltipContent,\n horizontalAlignment,\n}: ChartLegendProps) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const elementsByIndexRef = useRef<Record<number, HTMLElement>>([]);\n const elementsByIdRef = useRef<Record<string, HTMLElement>>({});\n const tooltipRef = useRef<HTMLElement>(null);\n const highlightControl = useMemo(() => new DebouncedCall(), []);\n const scrollIntoViewControl = useMemo(() => new DebouncedCall(), []);\n const [selectedIndex, setSelectedIndex] = useState<number>(0);\n const [tooltipItemId, setTooltipItemId] = useState<string | null>(null);\n const { showTooltip, hideTooltip } = useMemo(() => {\n const control = new DebouncedCall();\n return {\n showTooltip(itemId: string) {\n control.call(() => setTooltipItemId(itemId));\n },\n hideTooltip(lock = false) {\n control.call(() => setTooltipItemId(null), TOOLTIP_BLUR_DELAY);\n if (lock) {\n control.lock(TOOLTIP_BLUR_DELAY);\n }\n },\n };\n }, []);\n\n useEffect(() => {\n if (!tooltipItemId) {\n return;\n }\n const onDocumentKeyDown = (event: KeyboardEvent) => {\n if (event.keyCode === KeyCode.escape) {\n hideTooltip(true);\n elementsByIdRef.current[tooltipItemId]?.focus();\n }\n };\n document.addEventListener(\"keydown\", onDocumentKeyDown, true);\n return () => {\n document.removeEventListener(\"keydown\", onDocumentKeyDown, true);\n };\n }, [items, tooltipItemId, hideTooltip]);\n const isMouseInContainer = useRef<boolean>(false);\n\n // Scrolling to the highlighted legend item.\n useEffect(() => {\n const highlightedIndex = items.findIndex((item) => item.highlighted);\n if (highlightedIndex === -1) {\n return;\n }\n scrollIntoViewControl.call(() => {\n if (isMouseInContainer.current) {\n return;\n }\n const element = elementsByIndexRef.current?.[highlightedIndex];\n if (!element) {\n return;\n }\n scrollIntoViewNearestContainer(element, { behavior: \"smooth\", scrollMode: \"if-needed\" });\n }, SCROLL_DELAY);\n }, [items, scrollIntoViewControl]);\n\n const showHighlight = (itemId: string) => {\n const item = items.find((item) => item.id === itemId);\n if (item?.visible) {\n highlightControl.cancelPrevious();\n onItemHighlightEnter(item);\n }\n };\n const clearHighlight = () => {\n highlightControl.call(onItemHighlightExit, HIGHLIGHT_LOST_DELAY);\n };\n\n const navigationAPI = useRef<SingleTabStopNavigationAPI>(null);\n\n function onFocus(index: number, itemId: string) {\n setSelectedIndex(index);\n navigationAPI.current!.updateFocusTarget();\n showHighlight(itemId);\n showTooltip(itemId);\n }\n\n function onBlur(event: React.FocusEvent) {\n navigationAPI.current!.updateFocusTarget();\n\n // Hide tooltip and clear highlight unless focus moves inside tooltip;\n if (tooltipRef.current && event.relatedTarget && !tooltipRef.current.contains(event.relatedTarget)) {\n clearHighlight();\n hideTooltip();\n }\n }\n\n function focusElement(index: number) {\n elementsByIndexRef.current[index]?.focus();\n }\n\n function onKeyDown(event: React.KeyboardEvent<HTMLElement>) {\n if (\n event.keyCode === KeyCode.right ||\n event.keyCode === KeyCode.left ||\n event.keyCode === KeyCode.up ||\n event.keyCode === KeyCode.down ||\n event.keyCode === KeyCode.home ||\n event.keyCode === KeyCode.end ||\n event.keyCode === KeyCode.escape\n ) {\n // Preventing default fixes an issue in Safari+VO when VO additionally interprets arrow keys as its commands.\n event.preventDefault();\n\n const range = [0, items.length - 1] as [number, number];\n\n handleKey(event, {\n onInlineStart: () => focusElement(circleIndex(selectedIndex - 1, range)),\n onInlineEnd: () => focusElement(circleIndex(selectedIndex + 1, range)),\n onBlockStart: () => focusElement(circleIndex(selectedIndex - 1, range)),\n onBlockEnd: () => focusElement(circleIndex(selectedIndex + 1, range)),\n onHome: () => focusElement(0),\n onEnd: () => focusElement(items.length - 1),\n onEscape: () => onItemHighlightExit(),\n });\n }\n }\n\n function getNextFocusTarget(): null | HTMLElement {\n if (containerRef.current) {\n const buttons: HTMLButtonElement[] = Array.from(containerRef.current.querySelectorAll(`.${styles.item}`));\n return buttons[selectedIndex] ?? null;\n }\n return null;\n }\n\n function onUnregisterActive(\n focusableElement: HTMLElement,\n navigationAPI: React.RefObject<{ getFocusTarget: () => HTMLElement | null }>,\n ) {\n const target = navigationAPI.current?.getFocusTarget();\n\n if (target && target.dataset.itemid !== focusableElement.dataset.itemid) {\n target.focus();\n }\n }\n\n useEffect(() => {\n navigationAPI.current!.updateFocusTarget();\n });\n\n const isVertical = alignment === \"vertical\";\n\n const tooltipTrack = useRef<null | HTMLElement>(null);\n const tooltipTarget = items.find((item) => item.id === tooltipItemId) ?? null;\n tooltipTrack.current = tooltipItemId ? elementsByIdRef.current[tooltipItemId] : null;\n const tooltipContent = tooltipTarget && getTooltipContent({ legendItem: tooltipTarget });\n const tooltipPosition = isVertical ? \"left\" : \"bottom\";\n\n return (\n <SingleTabStopNavigationProvider\n ref={navigationAPI}\n navigationActive={true}\n getNextFocusTarget={() => getNextFocusTarget()}\n onUnregisterActive={(element: HTMLElement) => onUnregisterActive(element, navigationAPI)}\n >\n <div\n role=\"toolbar\"\n aria-label={legendTitle || ariaLabel}\n className={clsx(testClasses.root, styles.root, className)}\n onMouseEnter={() => (isMouseInContainer.current = true)}\n onMouseLeave={() => (isMouseInContainer.current = false)}\n >\n {legendTitle && (\n <Box fontWeight=\"bold\" className={testClasses.title} textAlign={getBoxTextAlignment(horizontalAlignment)}>\n {legendTitle}\n </Box>\n )}\n <div\n // The list element is not focusable. However, the focus lands on it regardless, when testing in Firefox.\n // Setting the tab index to -1 does fix the problem.\n tabIndex={-1}\n ref={containerRef}\n className={clsx(styles.list, {\n [styles[`list-bottom-${horizontalAlignment}`]]: !isVertical,\n [styles[\"list-bottom\"]]: !isVertical,\n [styles[\"list-side\"]]: isVertical,\n })}\n >\n {actions && (\n <>\n <div className={clsx(testClasses.actions, styles.actions, styles[\"actions-bottom\"])}>\n {actions}\n {!isVertical && <div className={styles[\"actions-divider-bottom\"]} />}\n </div>\n {isVertical && <div className={styles[\"actions-divider-side\"]} />}\n </>\n )}\n {items.map((item, index) => {\n const handlers = {\n onMouseEnter: () => {\n showHighlight(item.id);\n showTooltip(item.id);\n },\n onMouseLeave: () => {\n clearHighlight();\n hideTooltip();\n },\n onFocus: () => {\n onFocus(index, item.id);\n },\n onBlur: (event: React.FocusEvent) => {\n onBlur(event);\n },\n onKeyDown,\n };\n const thisTriggerRef = (elem: null | HTMLElement) => {\n if (elem) {\n elementsByIndexRef.current[index] = elem;\n elementsByIdRef.current[item.id] = elem;\n } else {\n delete elementsByIndexRef.current[index];\n delete elementsByIdRef.current[item.id];\n }\n };\n return (\n <LegendItemTrigger\n key={index}\n {...handlers}\n ref={thisTriggerRef}\n onClick={(event) => {\n if (event.metaKey || event.ctrlKey) {\n onToggleItem(item.id);\n } else {\n onSelectItem(item.id);\n }\n }}\n isHighlighted={item.highlighted}\n someHighlighted={someHighlighted}\n itemId={item.id}\n label={item.name}\n visible={item.visible}\n marker={item.marker}\n />\n );\n })}\n </div>\n {tooltipContent && (\n <InternalChartTooltip\n trackRef={tooltipTrack}\n trackKey={tooltipTarget.id}\n container={null}\n dismissButton={false}\n onDismiss={() => {}}\n position={tooltipPosition}\n title={tooltipContent.header}\n onMouseEnter={() => showTooltip(tooltipTarget.id)}\n onMouseLeave={() => hideTooltip()}\n onBlur={() => hideTooltip()}\n footer={\n tooltipContent.footer && (\n <>\n <hr aria-hidden={true} />\n {tooltipContent.footer}\n </>\n )\n }\n >\n {tooltipContent.body}\n </InternalChartTooltip>\n )}\n </div>\n </SingleTabStopNavigationProvider>\n );\n};\n\nfunction getBoxTextAlignment(horizontalAlignment: LegendHorizontalAlignment): BoxProps.TextAlign {\n switch (horizontalAlignment) {\n case \"start\":\n return \"left\";\n case \"center\":\n return \"center\";\n case \"end\":\n return \"right\";\n }\n}\n\nconst LegendItemTrigger = forwardRef(\n (\n {\n isHighlighted,\n someHighlighted,\n itemId,\n label,\n marker,\n visible,\n onClick,\n triggerRef,\n onMouseEnter,\n onMouseLeave,\n onFocus,\n onBlur,\n onKeyDown,\n }: {\n isHighlighted?: boolean;\n someHighlighted?: boolean;\n itemId: string;\n label: string;\n marker?: React.ReactNode;\n visible: boolean;\n onClick: (event: React.MouseEvent) => void;\n onMarkerClick?: () => void;\n triggerRef?: Ref<HTMLElement>;\n onMouseEnter?: () => void;\n onMouseLeave?: () => void;\n onFocus?: () => void;\n onBlur?: (event: React.FocusEvent) => void;\n onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;\n },\n ref: Ref<HTMLButtonElement>,\n ) => {\n const refObject = useRef<HTMLDivElement>(null);\n const mergedRef = useMergeRefs(ref, triggerRef, refObject);\n const { tabIndex } = useSingleTabStopNavigation(refObject);\n return (\n <button\n data-itemid={itemId}\n aria-pressed={visible}\n aria-current={isHighlighted}\n className={clsx(testClasses.item, styles.item, {\n [styles[\"item--inactive\"]]: !visible,\n [testClasses[\"hidden-item\"]]: !visible,\n [styles[\"item--dimmed\"]]: someHighlighted && !isHighlighted,\n [testClasses[\"dimmed-item\"]]: someHighlighted && !isHighlighted,\n })}\n ref={mergedRef}\n tabIndex={tabIndex}\n onClick={onClick}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyDown={onKeyDown}\n >\n {marker}\n <span className={styles[\"item-label\"]}>{label}</span>\n </button>\n );\n },\n);\n"]}
package/internal/components/series-details/index.js CHANGED
@@ -6,6 +6,7 @@ import clsx from "clsx";
6
6
  import { useMergeRefs } from "@cloudscape-design/component-toolkit/internal";
7
7
  import { InternalExpandableSection } from "@cloudscape-design/components/internal/do-not-use/expandable-section";
8
8
  import { getDataAttributes } from "../../base-component/get-data-attributes";
9
+ import { scrollIntoViewNearestContainer } from "../../utils/dom";
9
10
  import styles from "./styles.css.js";
10
11
  import testClasses from "./test-classes/styles.css.js";
11
12
  export default memo(forwardRef(ChartSeriesDetails));
@@ -18,8 +19,8 @@ function ChartSeriesDetails({ details, expandedSeries, setExpandedState, compact
18
19
  const isExpanded = (seriesTitle) => !!expandedSeries && expandedSeries.has(seriesTitle);
19
20
  const selectedIndex = details.findIndex((d) => d.highlighted);
20
21
  useEffect(() => {
21
- if (selectedIndex !== -1 && selectedRef.current && "scrollIntoView" in selectedRef.current) {
22
- selectedRef.current.scrollIntoView({ behavior: "smooth", block: "center" });
22
+ if (selectedIndex !== -1 && selectedRef.current) {
23
+ scrollIntoViewNearestContainer(selectedRef.current, { behavior: "smooth", scrollMode: "always" });
23
24
  }
24
25
  }, [selectedIndex]);
25
26
  return (_jsx("div", { ...baseProps, className: className, ref: mergedRef, children: _jsx("ul", { className: clsx(styles.list, compactList && styles.compact), children: details.map(({ key, value, marker, isDimmed, subItems, expandableId, description, highlighted }, index) => (_jsxs("li", { className: clsx({
package/internal/components/series-details/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/series-details/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\n\nimport { forwardRef, memo, ReactNode, useEffect, useRef } from \"react\";\nimport clsx from \"clsx\";\n\nimport { useMergeRefs } from \"@cloudscape-design/component-toolkit/internal\";\nimport { BaseComponentProps } from \"@cloudscape-design/components/internal/base-component\";\nimport { InternalExpandableSection } from \"@cloudscape-design/components/internal/do-not-use/expandable-section\";\n\nimport { getDataAttributes } from \"../../base-component/get-data-attributes\";\n\nimport styles from \"./styles.css.js\";\nimport testClasses from \"./test-classes/styles.css.js\";\n\ninterface ChartDetailPair {\n key: ReactNode;\n value: ReactNode;\n}\n\ninterface ListItemProps {\n itemKey: ReactNode;\n value: ReactNode;\n subItems?: ReadonlyArray<ChartDetailPair>;\n marker?: React.ReactNode;\n description?: ReactNode;\n}\n\nexport interface ChartSeriesDetailItem extends ChartDetailPair {\n highlighted?: boolean;\n marker?: React.ReactNode;\n isDimmed?: boolean;\n subItems?: ReadonlyArray<ChartDetailPair>;\n expandableId?: string;\n description?: ReactNode;\n}\nexport type ExpandedSeries = Set<string>;\n\ninterface ChartSeriesDetailsProps extends BaseComponentProps {\n details: ReadonlyArray<ChartSeriesDetailItem>;\n expandedSeries?: ExpandedSeries;\n setExpandedState?: (seriesTitle: string, state: boolean) => void;\n compactList?: boolean;\n}\n\nexport default memo(forwardRef(ChartSeriesDetails));\n\nfunction ChartSeriesDetails(\n { details, expandedSeries, setExpandedState, compactList, ...restProps }: ChartSeriesDetailsProps,\n ref: React.Ref<HTMLDivElement>,\n) {\n const baseProps = getDataAttributes(restProps);\n const className = clsx(baseProps.className, styles.root);\n const detailsRef = useRef<HTMLDivElement | null>(null);\n const mergedRef = useMergeRefs(ref, detailsRef);\n const selectedRef = useRef<HTMLDivElement>(null);\n\n const isExpanded = (seriesTitle: string) => !!expandedSeries && expandedSeries.has(seriesTitle);\n\n const selectedIndex = details.findIndex((d) => d.highlighted);\n useEffect(() => {\n if (selectedIndex !== -1 && selectedRef.current && \"scrollIntoView\" in selectedRef.current) {\n selectedRef.current.scrollIntoView({ behavior: \"smooth\", block: \"center\" });\n }\n }, [selectedIndex]);\n\n return (\n <div {...baseProps} className={className} ref={mergedRef}>\n <ul className={clsx(styles.list, compactList && styles.compact)}>\n {details.map(({ key, value, marker, isDimmed, subItems, expandableId, description, highlighted }, index) => (\n <li\n // Include 'highlighted' in the key to force React re-render when highlight state changes.\n // Without this, the highlight indicator div may not be removed when cursor moves away from data points\n // due to React's reconciliation algorithm not detecting the state change in complex data scenarios.\n // This ensures proper cleanup of visual highlight indicators.\n key={[index, highlighted].join(\"-\")}\n className={clsx({\n [styles.dimmed]: isDimmed,\n [styles[\"list-item\"]]: true,\n [testClasses[\"list-item\"]]: true,\n [styles[\"with-sub-items\"]]: subItems?.length,\n [styles.expandable]: !!expandableId,\n })}\n >\n {details.length > 1 && highlighted ? (\n <div ref={selectedRef} className={styles[\"highlight-indicator\"]}></div>\n ) : null}\n {subItems?.length && !!expandableId ? (\n <ExpandableSeries\n itemKey={key}\n value={value}\n marker={marker}\n description={description}\n subItems={subItems}\n expanded={isExpanded(expandableId)}\n setExpandedState={(state) => setExpandedState && setExpandedState(expandableId, state)}\n />\n ) : (\n <NonExpandableSeries\n itemKey={key}\n value={value}\n marker={marker}\n description={description}\n subItems={subItems}\n />\n )}\n </li>\n ))}\n </ul>\n </div>\n );\n}\n\nfunction SubItems({\n items,\n expandable,\n expanded,\n}: {\n items: ReadonlyArray<ChartDetailPair>;\n expandable?: boolean;\n expanded?: boolean;\n}) {\n return (\n <ul className={clsx(styles[\"sub-items\"], expandable && styles.expandable)}>\n {items.map(({ key, value }, index) => (\n <li\n key={index}\n className={clsx(\n testClasses[\"inner-list-item\"],\n styles[\"inner-list-item\"],\n styles[\"key-value-pair\"],\n (expanded || !expandable) && styles.announced,\n )}\n >\n <span className={clsx(testClasses.key, styles.key)}>{key}</span>\n <span className={clsx(testClasses.value, styles.value)}>{value}</span>\n </li>\n ))}\n </ul>\n );\n}\n\nfunction ExpandableSeries({\n itemKey,\n value,\n subItems,\n marker,\n expanded,\n setExpandedState,\n description,\n}: ListItemProps &\n Required<Pick<ListItemProps, \"subItems\">> & {\n expanded: boolean;\n setExpandedState: (state: boolean) => void;\n }) {\n return (\n <div className={styles[\"expandable-section\"]}>\n {marker}\n <div className={styles[\"full-width\"]}>\n <InternalExpandableSection\n headerText={<span className={clsx(testClasses.key, styles.key)}>{itemKey}</span>}\n headerActions={<span className={clsx(testClasses.value, styles.value, styles.expandable)}>{value}</span>}\n expanded={expanded}\n onChange={({ detail }) => setExpandedState(detail.expanded)}\n variant=\"compact\"\n >\n <SubItems items={subItems} expandable={true} expanded={expanded} />\n </InternalExpandableSection>\n <Details>{description}</Details>\n </div>\n </div>\n );\n}\n\nfunction NonExpandableSeries({ itemKey, value, subItems, marker, description }: ListItemProps) {\n return (\n <>\n <div className={clsx(styles[\"key-value-pair\"], styles.announced)}>\n <div className={clsx(testClasses.key, styles.key)}>\n {marker}\n <span>{itemKey}</span>\n </div>\n <span className={clsx(testClasses.value, styles.value)}>{value}</span>\n </div>\n {subItems && <SubItems items={subItems} />}\n <Details>{description}</Details>\n </>\n );\n}\n\nfunction Details({ children }: { children: ReactNode }) {\n return children ? <div className={clsx(testClasses.description, styles.description)}>{children}</div> : null;\n}\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/series-details/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\n\nimport { forwardRef, memo, ReactNode, useEffect, useRef } from \"react\";\nimport clsx from \"clsx\";\n\nimport { useMergeRefs } from \"@cloudscape-design/component-toolkit/internal\";\nimport { BaseComponentProps } from \"@cloudscape-design/components/internal/base-component\";\nimport { InternalExpandableSection } from \"@cloudscape-design/components/internal/do-not-use/expandable-section\";\n\nimport { getDataAttributes } from \"../../base-component/get-data-attributes\";\nimport { scrollIntoViewNearestContainer } from \"../../utils/dom\";\n\nimport styles from \"./styles.css.js\";\nimport testClasses from \"./test-classes/styles.css.js\";\n\ninterface ChartDetailPair {\n key: ReactNode;\n value: ReactNode;\n}\n\ninterface ListItemProps {\n itemKey: ReactNode;\n value: ReactNode;\n subItems?: ReadonlyArray<ChartDetailPair>;\n marker?: React.ReactNode;\n description?: ReactNode;\n}\n\nexport interface ChartSeriesDetailItem extends ChartDetailPair {\n highlighted?: boolean;\n marker?: React.ReactNode;\n isDimmed?: boolean;\n subItems?: ReadonlyArray<ChartDetailPair>;\n expandableId?: string;\n description?: ReactNode;\n}\nexport type ExpandedSeries = Set<string>;\n\ninterface ChartSeriesDetailsProps extends BaseComponentProps {\n details: ReadonlyArray<ChartSeriesDetailItem>;\n expandedSeries?: ExpandedSeries;\n setExpandedState?: (seriesTitle: string, state: boolean) => void;\n compactList?: boolean;\n}\n\nexport default memo(forwardRef(ChartSeriesDetails));\n\nfunction ChartSeriesDetails(\n { details, expandedSeries, setExpandedState, compactList, ...restProps }: ChartSeriesDetailsProps,\n ref: React.Ref<HTMLDivElement>,\n) {\n const baseProps = getDataAttributes(restProps);\n const className = clsx(baseProps.className, styles.root);\n const detailsRef = useRef<HTMLDivElement | null>(null);\n const mergedRef = useMergeRefs(ref, detailsRef);\n const selectedRef = useRef<HTMLDivElement>(null);\n\n const isExpanded = (seriesTitle: string) => !!expandedSeries && expandedSeries.has(seriesTitle);\n\n const selectedIndex = details.findIndex((d) => d.highlighted);\n useEffect(() => {\n if (selectedIndex !== -1 && selectedRef.current) {\n scrollIntoViewNearestContainer(selectedRef.current, { behavior: \"smooth\", scrollMode: \"always\" });\n }\n }, [selectedIndex]);\n\n return (\n <div {...baseProps} className={className} ref={mergedRef}>\n <ul className={clsx(styles.list, compactList && styles.compact)}>\n {details.map(({ key, value, marker, isDimmed, subItems, expandableId, description, highlighted }, index) => (\n <li\n // Include 'highlighted' in the key to force React re-render when highlight state changes.\n // Without this, the highlight indicator div may not be removed when cursor moves away from data points\n // due to React's reconciliation algorithm not detecting the state change in complex data scenarios.\n // This ensures proper cleanup of visual highlight indicators.\n key={[index, highlighted].join(\"-\")}\n className={clsx({\n [styles.dimmed]: isDimmed,\n [styles[\"list-item\"]]: true,\n [testClasses[\"list-item\"]]: true,\n [styles[\"with-sub-items\"]]: subItems?.length,\n [styles.expandable]: !!expandableId,\n })}\n >\n {details.length > 1 && highlighted ? (\n <div ref={selectedRef} className={styles[\"highlight-indicator\"]}></div>\n ) : null}\n {subItems?.length && !!expandableId ? (\n <ExpandableSeries\n itemKey={key}\n value={value}\n marker={marker}\n description={description}\n subItems={subItems}\n expanded={isExpanded(expandableId)}\n setExpandedState={(state) => setExpandedState && setExpandedState(expandableId, state)}\n />\n ) : (\n <NonExpandableSeries\n itemKey={key}\n value={value}\n marker={marker}\n description={description}\n subItems={subItems}\n />\n )}\n </li>\n ))}\n </ul>\n </div>\n );\n}\n\nfunction SubItems({\n items,\n expandable,\n expanded,\n}: {\n items: ReadonlyArray<ChartDetailPair>;\n expandable?: boolean;\n expanded?: boolean;\n}) {\n return (\n <ul className={clsx(styles[\"sub-items\"], expandable && styles.expandable)}>\n {items.map(({ key, value }, index) => (\n <li\n key={index}\n className={clsx(\n testClasses[\"inner-list-item\"],\n styles[\"inner-list-item\"],\n styles[\"key-value-pair\"],\n (expanded || !expandable) && styles.announced,\n )}\n >\n <span className={clsx(testClasses.key, styles.key)}>{key}</span>\n <span className={clsx(testClasses.value, styles.value)}>{value}</span>\n </li>\n ))}\n </ul>\n );\n}\n\nfunction ExpandableSeries({\n itemKey,\n value,\n subItems,\n marker,\n expanded,\n setExpandedState,\n description,\n}: ListItemProps &\n Required<Pick<ListItemProps, \"subItems\">> & {\n expanded: boolean;\n setExpandedState: (state: boolean) => void;\n }) {\n return (\n <div className={styles[\"expandable-section\"]}>\n {marker}\n <div className={styles[\"full-width\"]}>\n <InternalExpandableSection\n headerText={<span className={clsx(testClasses.key, styles.key)}>{itemKey}</span>}\n headerActions={<span className={clsx(testClasses.value, styles.value, styles.expandable)}>{value}</span>}\n expanded={expanded}\n onChange={({ detail }) => setExpandedState(detail.expanded)}\n variant=\"compact\"\n >\n <SubItems items={subItems} expandable={true} expanded={expanded} />\n </InternalExpandableSection>\n <Details>{description}</Details>\n </div>\n </div>\n );\n}\n\nfunction NonExpandableSeries({ itemKey, value, subItems, marker, description }: ListItemProps) {\n return (\n <>\n <div className={clsx(styles[\"key-value-pair\"], styles.announced)}>\n <div className={clsx(testClasses.key, styles.key)}>\n {marker}\n <span>{itemKey}</span>\n </div>\n <span className={clsx(testClasses.value, styles.value)}>{value}</span>\n </div>\n {subItems && <SubItems items={subItems} />}\n <Details>{description}</Details>\n </>\n );\n}\n\nfunction Details({ children }: { children: ReactNode }) {\n return children ? <div className={clsx(testClasses.description, styles.description)}>{children}</div> : null;\n}\n"]}
package/internal/environment.js CHANGED
@@ -1,5 +1,5 @@
1
1
  export var PACKAGE_SOURCE = "chart-components";
2
- export var PACKAGE_VERSION = "1.0.0 (80443d98)";
2
+ export var PACKAGE_VERSION = "1.0.0 (1e9c64fd)";
3
3
  export var THEME = "open-source-visual-refresh";
4
4
  export var ALWAYS_VISUAL_REFRESH = true;
5
5
  export var SYSTEM = "console";
package/internal/environment.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "PACKAGE_SOURCE": "chart-components",
3
- "PACKAGE_VERSION": "1.0.0 (80443d98)",
3
+ "PACKAGE_VERSION": "1.0.0 (1e9c64fd)",
4
4
  "THEME": "open-source-visual-refresh",
5
5
  "ALWAYS_VISUAL_REFRESH": true,
6
6
  "SYSTEM": "console"
package/internal/generated/styles/tokens.d.ts CHANGED
@@ -638,6 +638,11 @@ export const borderWidthDropdown: string;
638
638
  export const borderWidthField: string;
639
639
  export const borderWidthPopover: string;
640
640
  export const borderWidthToken: string;
641
+ export const borderWidthIconSmall: string;
642
+ export const borderWidthIconNormal: string;
643
+ export const borderWidthIconMedium: string;
644
+ export const borderWidthIconBig: string;
645
+ export const borderWidthIconLarge: string;
641
646
  export const motionDurationExtraFast: string;
642
647
  export const motionDurationExtraSlow: string;
643
648
  export const motionDurationFast: string;
package/internal/generated/styles/tokens.js CHANGED
@@ -638,6 +638,11 @@ export var borderWidthDropdown = "var(--border-width-dropdown-youcay, 2px)";
638
638
  export var borderWidthField = "var(--border-width-field-2xc78x, 1px)";
639
639
  export var borderWidthPopover = "var(--border-width-popover-nflirh, 2px)";
640
640
  export var borderWidthToken = "var(--border-width-token-2ukdpu, 2px)";
641
+ export var borderWidthIconSmall = "var(--border-width-icon-small-z55i5t, 2px)";
642
+ export var borderWidthIconNormal = "var(--border-width-icon-normal-9h7vj7, 2px)";
643
+ export var borderWidthIconMedium = "var(--border-width-icon-medium-b7icqv, 2px)";
644
+ export var borderWidthIconBig = "var(--border-width-icon-big-ymgy42, 3px)";
645
+ export var borderWidthIconLarge = "var(--border-width-icon-large-u645rg, 4px)";
641
646
  export var motionDurationExtraFast = "var(--motion-duration-extra-fast-l4w48j, 45ms)";
642
647
  export var motionDurationExtraSlow = "var(--motion-duration-extra-slow-29bqym, 270ms)";
643
648
  export var motionDurationFast = "var(--motion-duration-fast-unntf6, 90ms)";
package/internal/generated/theming/index.cjs CHANGED
@@ -2173,6 +2173,11 @@ module.exports.preset = {
2173
2173
  "borderWidthField": "1px",
2174
2174
  "borderWidthPopover": "2px",
2175
2175
  "borderWidthToken": "2px",
2176
+ "borderWidthIconSmall": "2px",
2177
+ "borderWidthIconNormal": "2px",
2178
+ "borderWidthIconMedium": "2px",
2179
+ "borderWidthIconBig": "3px",
2180
+ "borderWidthIconLarge": "4px",
2176
2181
  "motionDurationExtraFast": {
2177
2182
  "default": "45ms",
2178
2183
  "disabled": "0ms"
@@ -11010,7 +11015,12 @@ module.exports.preset = {
11010
11015
  "borderWidthDropdown",
11011
11016
  "borderWidthField",
11012
11017
  "borderWidthPopover",
11013
- "borderWidthToken"
11018
+ "borderWidthToken",
11019
+ "borderWidthIconSmall",
11020
+ "borderWidthIconNormal",
11021
+ "borderWidthIconMedium",
11022
+ "borderWidthIconBig",
11023
+ "borderWidthIconLarge"
11014
11024
  ],
11015
11025
  "exposed": [
11016
11026
  "colorChartsRed300",
@@ -11378,6 +11388,11 @@ module.exports.preset = {
11378
11388
  "borderWidthField",
11379
11389
  "borderWidthPopover",
11380
11390
  "borderWidthToken",
11391
+ "borderWidthIconSmall",
11392
+ "borderWidthIconNormal",
11393
+ "borderWidthIconMedium",
11394
+ "borderWidthIconBig",
11395
+ "borderWidthIconLarge",
11381
11396
  "motionDurationAvatarGenAiGradient",
11382
11397
  "motionDurationAvatarLoadingDots",
11383
11398
  "motionEasingAvatarGenAiGradient",
@@ -12055,6 +12070,11 @@ module.exports.preset = {
12055
12070
  "borderWidthField": "border-width-field",
12056
12071
  "borderWidthPopover": "border-width-popover",
12057
12072
  "borderWidthToken": "border-width-token",
12073
+ "borderWidthIconSmall": "border-width-icon-small",
12074
+ "borderWidthIconNormal": "border-width-icon-normal",
12075
+ "borderWidthIconMedium": "border-width-icon-medium",
12076
+ "borderWidthIconBig": "border-width-icon-big",
12077
+ "borderWidthIconLarge": "border-width-icon-large",
12058
12078
  "motionDurationExtraFast": "motion-duration-extra-fast",
12059
12079
  "motionDurationExtraSlow": "motion-duration-extra-slow",
12060
12080
  "motionDurationFast": "motion-duration-fast",
@@ -12863,6 +12883,11 @@ module.exports.preset = {
12863
12883
  "borderWidthField": "--border-width-field-2xc78x",
12864
12884
  "borderWidthPopover": "--border-width-popover-nflirh",
12865
12885
  "borderWidthToken": "--border-width-token-2ukdpu",
12886
+ "borderWidthIconSmall": "--border-width-icon-small-z55i5t",
12887
+ "borderWidthIconNormal": "--border-width-icon-normal-9h7vj7",
12888
+ "borderWidthIconMedium": "--border-width-icon-medium-b7icqv",
12889
+ "borderWidthIconBig": "--border-width-icon-big-ymgy42",
12890
+ "borderWidthIconLarge": "--border-width-icon-large-u645rg",
12866
12891
  "motionDurationExtraFast": "--motion-duration-extra-fast-l4w48j",
12867
12892
  "motionDurationExtraSlow": "--motion-duration-extra-slow-29bqym",
12868
12893
  "motionDurationFast": "--motion-duration-fast-unntf6",
package/internal/generated/theming/index.cjs.d.ts CHANGED
@@ -268,6 +268,11 @@ export declare interface TypedOverride {
268
268
  borderWidthField?: GlobalValue;
269
269
  borderWidthPopover?: GlobalValue;
270
270
  borderWidthToken?: GlobalValue;
271
+ borderWidthIconSmall?: GlobalValue;
272
+ borderWidthIconNormal?: GlobalValue;
273
+ borderWidthIconMedium?: GlobalValue;
274
+ borderWidthIconBig?: GlobalValue;
275
+ borderWidthIconLarge?: GlobalValue;
271
276
  },
272
277
  contexts?: {
273
278
  'compact-table'?: {
@@ -538,6 +543,11 @@ export declare interface TypedOverride {
538
543
  borderWidthField?: GlobalValue;
539
544
  borderWidthPopover?: GlobalValue;
540
545
  borderWidthToken?: GlobalValue;
546
+ borderWidthIconSmall?: GlobalValue;
547
+ borderWidthIconNormal?: GlobalValue;
548
+ borderWidthIconMedium?: GlobalValue;
549
+ borderWidthIconBig?: GlobalValue;
550
+ borderWidthIconLarge?: GlobalValue;
541
551
  }
542
552
  };
543
553
  'top-navigation'?: {
@@ -808,6 +818,11 @@ export declare interface TypedOverride {
808
818
  borderWidthField?: GlobalValue;
809
819
  borderWidthPopover?: GlobalValue;
810
820
  borderWidthToken?: GlobalValue;
821
+ borderWidthIconSmall?: GlobalValue;
822
+ borderWidthIconNormal?: GlobalValue;
823
+ borderWidthIconMedium?: GlobalValue;
824
+ borderWidthIconBig?: GlobalValue;
825
+ borderWidthIconLarge?: GlobalValue;
811
826
  }
812
827
  };
813
828
  'header'?: {
@@ -1078,6 +1093,11 @@ export declare interface TypedOverride {
1078
1093
  borderWidthField?: GlobalValue;
1079
1094
  borderWidthPopover?: GlobalValue;
1080
1095
  borderWidthToken?: GlobalValue;
1096
+ borderWidthIconSmall?: GlobalValue;
1097
+ borderWidthIconNormal?: GlobalValue;
1098
+ borderWidthIconMedium?: GlobalValue;
1099
+ borderWidthIconBig?: GlobalValue;
1100
+ borderWidthIconLarge?: GlobalValue;
1081
1101
  }
1082
1102
  };
1083
1103
  'flashbar'?: {
@@ -1348,6 +1368,11 @@ export declare interface TypedOverride {
1348
1368
  borderWidthField?: GlobalValue;
1349
1369
  borderWidthPopover?: GlobalValue;
1350
1370
  borderWidthToken?: GlobalValue;
1371
+ borderWidthIconSmall?: GlobalValue;
1372
+ borderWidthIconNormal?: GlobalValue;
1373
+ borderWidthIconMedium?: GlobalValue;
1374
+ borderWidthIconBig?: GlobalValue;
1375
+ borderWidthIconLarge?: GlobalValue;
1351
1376
  }
1352
1377
  };
1353
1378
  'flashbar-warning'?: {
@@ -1618,6 +1643,11 @@ export declare interface TypedOverride {
1618
1643
  borderWidthField?: GlobalValue;
1619
1644
  borderWidthPopover?: GlobalValue;
1620
1645
  borderWidthToken?: GlobalValue;
1646
+ borderWidthIconSmall?: GlobalValue;
1647
+ borderWidthIconNormal?: GlobalValue;
1648
+ borderWidthIconMedium?: GlobalValue;
1649
+ borderWidthIconBig?: GlobalValue;
1650
+ borderWidthIconLarge?: GlobalValue;
1621
1651
  }
1622
1652
  };
1623
1653
  'alert'?: {
@@ -1888,6 +1918,11 @@ export declare interface TypedOverride {
1888
1918
  borderWidthField?: GlobalValue;
1889
1919
  borderWidthPopover?: GlobalValue;
1890
1920
  borderWidthToken?: GlobalValue;
1921
+ borderWidthIconSmall?: GlobalValue;
1922
+ borderWidthIconNormal?: GlobalValue;
1923
+ borderWidthIconMedium?: GlobalValue;
1924
+ borderWidthIconBig?: GlobalValue;
1925
+ borderWidthIconLarge?: GlobalValue;
1891
1926
  }
1892
1927
  };
1893
1928
  'alert-header'?: {
@@ -2158,6 +2193,11 @@ export declare interface TypedOverride {
2158
2193
  borderWidthField?: GlobalValue;
2159
2194
  borderWidthPopover?: GlobalValue;
2160
2195
  borderWidthToken?: GlobalValue;
2196
+ borderWidthIconSmall?: GlobalValue;
2197
+ borderWidthIconNormal?: GlobalValue;
2198
+ borderWidthIconMedium?: GlobalValue;
2199
+ borderWidthIconBig?: GlobalValue;
2200
+ borderWidthIconLarge?: GlobalValue;
2161
2201
  }
2162
2202
  };
2163
2203
  'app-layout-toolbar'?: {
@@ -2428,6 +2468,11 @@ export declare interface TypedOverride {
2428
2468
  borderWidthField?: GlobalValue;
2429
2469
  borderWidthPopover?: GlobalValue;
2430
2470
  borderWidthToken?: GlobalValue;
2471
+ borderWidthIconSmall?: GlobalValue;
2472
+ borderWidthIconNormal?: GlobalValue;
2473
+ borderWidthIconMedium?: GlobalValue;
2474
+ borderWidthIconBig?: GlobalValue;
2475
+ borderWidthIconLarge?: GlobalValue;
2431
2476
  }
2432
2477
  }
2433
2478
  }
package/internal/generated/theming/index.d.ts CHANGED
@@ -268,6 +268,11 @@ export declare interface TypedOverride {
268
268
  borderWidthField?: GlobalValue;
269
269
  borderWidthPopover?: GlobalValue;
270
270
  borderWidthToken?: GlobalValue;
271
+ borderWidthIconSmall?: GlobalValue;
272
+ borderWidthIconNormal?: GlobalValue;
273
+ borderWidthIconMedium?: GlobalValue;
274
+ borderWidthIconBig?: GlobalValue;
275
+ borderWidthIconLarge?: GlobalValue;
271
276
  },
272
277
  contexts?: {
273
278
  'compact-table'?: {
@@ -538,6 +543,11 @@ export declare interface TypedOverride {
538
543
  borderWidthField?: GlobalValue;
539
544
  borderWidthPopover?: GlobalValue;
540
545
  borderWidthToken?: GlobalValue;
546
+ borderWidthIconSmall?: GlobalValue;
547
+ borderWidthIconNormal?: GlobalValue;
548
+ borderWidthIconMedium?: GlobalValue;
549
+ borderWidthIconBig?: GlobalValue;
550
+ borderWidthIconLarge?: GlobalValue;
541
551
  }
542
552
  };
543
553
  'top-navigation'?: {
@@ -808,6 +818,11 @@ export declare interface TypedOverride {
808
818
  borderWidthField?: GlobalValue;
809
819
  borderWidthPopover?: GlobalValue;
810
820
  borderWidthToken?: GlobalValue;
821
+ borderWidthIconSmall?: GlobalValue;
822
+ borderWidthIconNormal?: GlobalValue;
823
+ borderWidthIconMedium?: GlobalValue;
824
+ borderWidthIconBig?: GlobalValue;
825
+ borderWidthIconLarge?: GlobalValue;
811
826
  }
812
827
  };
813
828
  'header'?: {
@@ -1078,6 +1093,11 @@ export declare interface TypedOverride {
1078
1093
  borderWidthField?: GlobalValue;
1079
1094
  borderWidthPopover?: GlobalValue;
1080
1095
  borderWidthToken?: GlobalValue;
1096
+ borderWidthIconSmall?: GlobalValue;
1097
+ borderWidthIconNormal?: GlobalValue;
1098
+ borderWidthIconMedium?: GlobalValue;
1099
+ borderWidthIconBig?: GlobalValue;
1100
+ borderWidthIconLarge?: GlobalValue;
1081
1101
  }
1082
1102
  };
1083
1103
  'flashbar'?: {
@@ -1348,6 +1368,11 @@ export declare interface TypedOverride {
1348
1368
  borderWidthField?: GlobalValue;
1349
1369
  borderWidthPopover?: GlobalValue;
1350
1370
  borderWidthToken?: GlobalValue;
1371
+ borderWidthIconSmall?: GlobalValue;
1372
+ borderWidthIconNormal?: GlobalValue;
1373
+ borderWidthIconMedium?: GlobalValue;
1374
+ borderWidthIconBig?: GlobalValue;
1375
+ borderWidthIconLarge?: GlobalValue;
1351
1376
  }
1352
1377
  };
1353
1378
  'flashbar-warning'?: {
@@ -1618,6 +1643,11 @@ export declare interface TypedOverride {
1618
1643
  borderWidthField?: GlobalValue;
1619
1644
  borderWidthPopover?: GlobalValue;
1620
1645
  borderWidthToken?: GlobalValue;
1646
+ borderWidthIconSmall?: GlobalValue;
1647
+ borderWidthIconNormal?: GlobalValue;
1648
+ borderWidthIconMedium?: GlobalValue;
1649
+ borderWidthIconBig?: GlobalValue;
1650
+ borderWidthIconLarge?: GlobalValue;
1621
1651
  }
1622
1652
  };
1623
1653
  'alert'?: {
@@ -1888,6 +1918,11 @@ export declare interface TypedOverride {
1888
1918
  borderWidthField?: GlobalValue;
1889
1919
  borderWidthPopover?: GlobalValue;
1890
1920
  borderWidthToken?: GlobalValue;
1921
+ borderWidthIconSmall?: GlobalValue;
1922
+ borderWidthIconNormal?: GlobalValue;
1923
+ borderWidthIconMedium?: GlobalValue;
1924
+ borderWidthIconBig?: GlobalValue;
1925
+ borderWidthIconLarge?: GlobalValue;
1891
1926
  }
1892
1927
  };
1893
1928
  'alert-header'?: {
@@ -2158,6 +2193,11 @@ export declare interface TypedOverride {
2158
2193
  borderWidthField?: GlobalValue;
2159
2194
  borderWidthPopover?: GlobalValue;
2160
2195
  borderWidthToken?: GlobalValue;
2196
+ borderWidthIconSmall?: GlobalValue;
2197
+ borderWidthIconNormal?: GlobalValue;
2198
+ borderWidthIconMedium?: GlobalValue;
2199
+ borderWidthIconBig?: GlobalValue;
2200
+ borderWidthIconLarge?: GlobalValue;
2161
2201
  }
2162
2202
  };
2163
2203
  'app-layout-toolbar'?: {
@@ -2428,6 +2468,11 @@ export declare interface TypedOverride {
2428
2468
  borderWidthField?: GlobalValue;
2429
2469
  borderWidthPopover?: GlobalValue;
2430
2470
  borderWidthToken?: GlobalValue;
2471
+ borderWidthIconSmall?: GlobalValue;
2472
+ borderWidthIconNormal?: GlobalValue;
2473
+ borderWidthIconMedium?: GlobalValue;
2474
+ borderWidthIconBig?: GlobalValue;
2475
+ borderWidthIconLarge?: GlobalValue;
2431
2476
  }
2432
2477
  }
2433
2478
  }
package/internal/generated/theming/index.js CHANGED
@@ -2173,6 +2173,11 @@ export var preset = {
2173
2173
  "borderWidthField": "1px",
2174
2174
  "borderWidthPopover": "2px",
2175
2175
  "borderWidthToken": "2px",
2176
+ "borderWidthIconSmall": "2px",
2177
+ "borderWidthIconNormal": "2px",
2178
+ "borderWidthIconMedium": "2px",
2179
+ "borderWidthIconBig": "3px",
2180
+ "borderWidthIconLarge": "4px",
2176
2181
  "motionDurationExtraFast": {
2177
2182
  "default": "45ms",
2178
2183
  "disabled": "0ms"
@@ -11010,7 +11015,12 @@ export var preset = {
11010
11015
  "borderWidthDropdown",
11011
11016
  "borderWidthField",
11012
11017
  "borderWidthPopover",
11013
- "borderWidthToken"
11018
+ "borderWidthToken",
11019
+ "borderWidthIconSmall",
11020
+ "borderWidthIconNormal",
11021
+ "borderWidthIconMedium",
11022
+ "borderWidthIconBig",
11023
+ "borderWidthIconLarge"
11014
11024
  ],
11015
11025
  "exposed": [
11016
11026
  "colorChartsRed300",
@@ -11378,6 +11388,11 @@ export var preset = {
11378
11388
  "borderWidthField",
11379
11389
  "borderWidthPopover",
11380
11390
  "borderWidthToken",
11391
+ "borderWidthIconSmall",
11392
+ "borderWidthIconNormal",
11393
+ "borderWidthIconMedium",
11394
+ "borderWidthIconBig",
11395
+ "borderWidthIconLarge",
11381
11396
  "motionDurationAvatarGenAiGradient",
11382
11397
  "motionDurationAvatarLoadingDots",
11383
11398
  "motionEasingAvatarGenAiGradient",
@@ -12055,6 +12070,11 @@ export var preset = {
12055
12070
  "borderWidthField": "border-width-field",
12056
12071
  "borderWidthPopover": "border-width-popover",
12057
12072
  "borderWidthToken": "border-width-token",
12073
+ "borderWidthIconSmall": "border-width-icon-small",
12074
+ "borderWidthIconNormal": "border-width-icon-normal",
12075
+ "borderWidthIconMedium": "border-width-icon-medium",
12076
+ "borderWidthIconBig": "border-width-icon-big",
12077
+ "borderWidthIconLarge": "border-width-icon-large",
12058
12078
  "motionDurationExtraFast": "motion-duration-extra-fast",
12059
12079
  "motionDurationExtraSlow": "motion-duration-extra-slow",
12060
12080
  "motionDurationFast": "motion-duration-fast",
@@ -12863,6 +12883,11 @@ export var preset = {
12863
12883
  "borderWidthField": "--border-width-field-2xc78x",
12864
12884
  "borderWidthPopover": "--border-width-popover-nflirh",
12865
12885
  "borderWidthToken": "--border-width-token-2ukdpu",
12886
+ "borderWidthIconSmall": "--border-width-icon-small-z55i5t",
12887
+ "borderWidthIconNormal": "--border-width-icon-normal-9h7vj7",
12888
+ "borderWidthIconMedium": "--border-width-icon-medium-b7icqv",
12889
+ "borderWidthIconBig": "--border-width-icon-big-ymgy42",
12890
+ "borderWidthIconLarge": "--border-width-icon-large-u645rg",
12866
12891
  "motionDurationExtraFast": "--motion-duration-extra-fast-l4w48j",
12867
12892
  "motionDurationExtraSlow": "--motion-duration-extra-slow-29bqym",
12868
12893
  "motionDurationFast": "--motion-duration-fast-unntf6",
package/internal/manifest.json CHANGED
@@ -1,3 +1,3 @@
1
1
  {
2
- "commit": "80443d98d82644ff80f45d92096981d2e829a672"
2
+ "commit": "1e9c64fdb944d339e7609cf8d7abe084835d035c"
3
3
  }
package/internal/utils/dom.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ /**
2
+ * Polyfill for `element.scrollIntoView({ container: "nearest", scrollMode: "..." })`
3
+ * For ease of implementation, behaves like `{ block: "center" }` is provided.
4
+ *
5
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView (for `container`)
6
+ * @see https://caniuse.com/wf-scroll-into-view-container (for `container` browser support)
7
+ * @see https://github.com/w3c/csswg-drafts/pull/5677 (for discussion of `if-needed`)
8
+ */
9
+ export declare function scrollIntoViewNearestContainer(element: HTMLElement, options?: ScrollOptions & {
10
+ scrollMode?: "always" | "if-needed";
11
+ }): void;
package/internal/utils/dom.js ADDED
@@ -0,0 +1,44 @@
1
+ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
+ // SPDX-License-Identifier: Apache-2.0
3
+ /**
4
+ * Polyfill for `element.scrollIntoView({ container: "nearest", scrollMode: "..." })`
5
+ * For ease of implementation, behaves like `{ block: "center" }` is provided.
6
+ *
7
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView (for `container`)
8
+ * @see https://caniuse.com/wf-scroll-into-view-container (for `container` browser support)
9
+ * @see https://github.com/w3c/csswg-drafts/pull/5677 (for discussion of `if-needed`)
10
+ */
11
+ export function scrollIntoViewNearestContainer(element, options) {
12
+ var _a;
13
+ // Scroll methods (scrollTo, scrollIntoView, etc) are not supported in test environments like JSDOM.
14
+ if (!("scrollTo" in element)) {
15
+ return;
16
+ }
17
+ // Get element boundaries to measure scroll offsets.
18
+ // In the future, could be replaced with a simple `element.scrollParent`.
19
+ // https://drafts.csswg.org/cssom-view/#dom-htmlelement-scrollparent
20
+ const scrollParent = (_a = getScrollParent(element)) !== null && _a !== void 0 ? _a : element.ownerDocument.documentElement;
21
+ const { top: elementTop, bottom: elementBottom, height: elementHeight } = element.getBoundingClientRect();
22
+ const { top: scrollTop, bottom: scrollBottom, height: scrollHeight } = scrollParent.getBoundingClientRect();
23
+ if ((options === null || options === void 0 ? void 0 : options.scrollMode) === "if-needed") {
24
+ // Technically, getBoundingClientRect() returns the border-box, which includes the border width.
25
+ // We should subtract the border width to get the padding box, but all that computation isn't worth it.
26
+ const isNeeded = elementTop < scrollTop || elementBottom > scrollBottom;
27
+ if (!isNeeded) {
28
+ return;
29
+ }
30
+ }
31
+ const topRelativeToParent = elementTop + scrollParent.scrollTop - scrollTop;
32
+ const blockCenterOffset = scrollHeight / 2 - elementHeight / 2;
33
+ scrollParent.scrollTo({ top: topRelativeToParent - blockCenterOffset, ...options });
34
+ }
35
+ function getScrollParent(element) {
36
+ for (let node = element.parentElement; node !== null && node !== element.ownerDocument.body; node = node.parentElement) {
37
+ const overflow = getComputedStyle(node).overflow;
38
+ if (overflow !== "visible" && overflow !== "hidden") {
39
+ return node;
40
+ }
41
+ }
42
+ return null;
43
+ }
44
+ //# sourceMappingURL=dom.js.map
package/internal/utils/dom.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"dom.js","sourceRoot":"","sources":["../../../../src/internal/utils/dom.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC;;;;;;;GAOG;AACH,MAAM,UAAU,8BAA8B,CAC5C,OAAoB,EACpB,OAAiE;;IAEjE,oGAAoG;IACpG,IAAI,CAAC,CAAC,UAAU,IAAI,OAAO,CAAC,EAAE;QAC5B,OAAO;KACR;IAED,oDAAoD;IACpD,yEAAyE;IACzE,oEAAoE;IACpE,MAAM,YAAY,GAAG,MAAA,eAAe,CAAC,OAAO,CAAC,mCAAI,OAAO,CAAC,aAAa,CAAC,eAAe,CAAC;IACvF,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;IAC1G,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,GAAG,YAAY,CAAC,qBAAqB,EAAE,CAAC;IAE5G,IAAI,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU,MAAK,WAAW,EAAE;QACvC,gGAAgG;QAChG,uGAAuG;QACvG,MAAM,QAAQ,GAAG,UAAU,GAAG,SAAS,IAAI,aAAa,GAAG,YAAY,CAAC;QACxE,IAAI,CAAC,QAAQ,EAAE;YACb,OAAO;SACR;KACF;IAED,MAAM,mBAAmB,GAAG,UAAU,GAAG,YAAY,CAAC,SAAS,GAAG,SAAS,CAAC;IAC5E,MAAM,iBAAiB,GAAG,YAAY,GAAG,CAAC,GAAG,aAAa,GAAG,CAAC,CAAC;IAC/D,YAAY,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,mBAAmB,GAAG,iBAAiB,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;AACtF,CAAC;AAED,SAAS,eAAe,CAAC,OAAoB;IAC3C,KACE,IAAI,IAAI,GAAuB,OAAO,CAAC,aAAa,EACpD,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,OAAO,CAAC,aAAa,CAAC,IAAI,EACpD,IAAI,GAAG,IAAI,CAAC,aAAa,EACzB;QACA,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC;QACjD,IAAI,QAAQ,KAAK,SAAS,IAAI,QAAQ,KAAK,QAAQ,EAAE;YACnD,OAAO,IAAI,CAAC;SACb;KACF;IACD,OAAO,IAAI,CAAC;AACd,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n/**\n * Polyfill for `element.scrollIntoView({ container: \"nearest\", scrollMode: \"...\" })`\n * For ease of implementation, behaves like `{ block: \"center\" }` is provided.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView (for `container`)\n * @see https://caniuse.com/wf-scroll-into-view-container (for `container` browser support)\n * @see https://github.com/w3c/csswg-drafts/pull/5677 (for discussion of `if-needed`)\n */\nexport function scrollIntoViewNearestContainer(\n element: HTMLElement,\n options?: ScrollOptions & { scrollMode?: \"always\" | \"if-needed\" },\n) {\n // Scroll methods (scrollTo, scrollIntoView, etc) are not supported in test environments like JSDOM.\n if (!(\"scrollTo\" in element)) {\n return;\n }\n\n // Get element boundaries to measure scroll offsets.\n // In the future, could be replaced with a simple `element.scrollParent`.\n // https://drafts.csswg.org/cssom-view/#dom-htmlelement-scrollparent\n const scrollParent = getScrollParent(element) ?? element.ownerDocument.documentElement;\n const { top: elementTop, bottom: elementBottom, height: elementHeight } = element.getBoundingClientRect();\n const { top: scrollTop, bottom: scrollBottom, height: scrollHeight } = scrollParent.getBoundingClientRect();\n\n if (options?.scrollMode === \"if-needed\") {\n // Technically, getBoundingClientRect() returns the border-box, which includes the border width.\n // We should subtract the border width to get the padding box, but all that computation isn't worth it.\n const isNeeded = elementTop < scrollTop || elementBottom > scrollBottom;\n if (!isNeeded) {\n return;\n }\n }\n\n const topRelativeToParent = elementTop + scrollParent.scrollTop - scrollTop;\n const blockCenterOffset = scrollHeight / 2 - elementHeight / 2;\n scrollParent.scrollTo({ top: topRelativeToParent - blockCenterOffset, ...options });\n}\n\nfunction getScrollParent(element: HTMLElement): HTMLElement | null {\n for (\n let node: HTMLElement | null = element.parentElement;\n node !== null && node !== element.ownerDocument.body;\n node = node.parentElement\n ) {\n const overflow = getComputedStyle(node).overflow;\n if (overflow !== \"visible\" && overflow !== \"hidden\") {\n return node;\n }\n }\n return null;\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cloudscape-design/chart-components",
3
- "version": "1.0.23",
3
+ "version": "1.0.25",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/cloudscape-design/chart-components.git"