@cloudscape-design/chart-components 1.0.101 → 1.0.103

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.
@@ -53,7 +53,7 @@ export const ChartLegend = ({ items, legendTitle, ariaLabel, axisId, actions, al
53
53
  return () => {
54
54
  document.removeEventListener("keydown", onDocumentKeyDown, true);
55
55
  };
56
- }, [items, tooltipItemId, hideTooltip]);
56
+ }, [tooltipItemId, hideTooltip]);
57
57
  const isMouseInContainer = useRef(false);
58
58
  // Scrolling to the highlighted legend item.
59
59
  useEffect(() => {
@@ -91,9 +91,14 @@ export const ChartLegend = ({ items, legendTitle, ariaLabel, axisId, actions, al
91
91
  showTooltip(itemId);
92
92
  }
93
93
  function onBlur(event) {
94
+ var _a;
94
95
  navigationAPI.current.updateFocusTarget();
95
- // Hide tooltip and clear highlight unless focus moves inside tooltip;
96
- if (tooltipRef.current && event.relatedTarget && !tooltipRef.current.contains(event.relatedTarget)) {
96
+ // Hide tooltip and clear highlight unless focus moves inside the tooltip.
97
+ const next = event.relatedTarget;
98
+ if (next && ((_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.contains(next))) {
99
+ return;
100
+ }
101
+ if (next) {
97
102
  clearHighlight();
98
103
  hideTooltip();
99
104
  }
@@ -148,7 +153,7 @@ export const ChartLegend = ({ items, legendTitle, ariaLabel, axisId, actions, al
148
153
  tooltipTrack.current = tooltipItemId ? elementsByIdRef.current[tooltipItemId] : null;
149
154
  const tooltipContent = tooltipTarget && getTooltipContent({ legendItem: tooltipTarget });
150
155
  const tooltipPosition = isVertical ? "left" : "bottom";
151
- return (_jsx(SingleTabStopNavigationProvider, { ref: navigationAPI, navigationActive: true, getNextFocusTarget: () => getNextFocusTarget(), onUnregisterActive: (element) => onUnregisterActive(element, navigationAPI), children: _jsxs("div", { role: "toolbar", "aria-label": legendTitle || ariaLabel, className: clsx(testClasses.root, styles.root, className), "data-axisid": axisId, onMouseEnter: () => (isMouseInContainer.current = true), onMouseLeave: () => (isMouseInContainer.current = false), children: [legendTitle && (_jsx(Box, { fontWeight: "bold", className: testClasses.title, textAlign: getBoxTextAlignment(horizontalAlignment), children: legendTitle })), _jsxs("div", {
156
+ return (_jsxs("div", { role: "toolbar", "aria-label": legendTitle || ariaLabel, className: clsx(testClasses.root, styles.root, className), "data-axisid": axisId, onMouseEnter: () => (isMouseInContainer.current = true), onMouseLeave: () => (isMouseInContainer.current = false), children: [legendTitle && (_jsx(Box, { fontWeight: "bold", className: testClasses.title, textAlign: getBoxTextAlignment(horizontalAlignment), children: legendTitle })), _jsx(SingleTabStopNavigationProvider, { ref: navigationAPI, navigationActive: true, getNextFocusTarget: () => getNextFocusTarget(), onUnregisterActive: (element) => onUnregisterActive(element, navigationAPI), children: _jsxs("div", {
152
157
  // The list element is not focusable. However, the focus lands on it regardless, when testing in Firefox.
153
158
  // Setting the tab index to -1 does fix the problem.
154
159
  tabIndex: -1, ref: containerRef, className: clsx(styles.list, {
@@ -192,7 +197,11 @@ export const ChartLegend = ({ items, legendTitle, ariaLabel, axisId, actions, al
192
197
  onSelectItem(item.id);
193
198
  }
194
199
  }, isHighlighted: item.highlighted, someHighlighted: someHighlighted, itemId: item.id, label: item.name, visible: item.visible, marker: item.marker }, index));
195
- })] }), tooltipContent && (_jsx(InternalChartTooltip, { trackRef: tooltipTrack, triggerClampRef: containerRef, trackKey: tooltipTarget.id, container: null, dismissButton: false, onDismiss: () => { }, position: tooltipPosition, title: tooltipContent.header, onMouseEnter: () => showTooltip(tooltipTarget.id), onMouseLeave: () => hideTooltip(), onBlur: () => hideTooltip(), footer: tooltipContent.footer && (_jsxs(_Fragment, { children: [_jsx("hr", { "aria-hidden": true }), tooltipContent.footer] })), children: tooltipContent.body }))] }) }));
200
+ })] }) }), tooltipContent && (_jsx(InternalChartTooltip, { ref: tooltipRef, trackRef: tooltipTrack, triggerClampRef: containerRef, trackKey: tooltipTarget.id, container: null, dismissButton: true, disableDismissAutoFocus: true, onDismiss: () => {
201
+ var _a;
202
+ hideTooltip(true);
203
+ (_a = elementsByIdRef.current[tooltipTarget.id]) === null || _a === void 0 ? void 0 : _a.focus();
204
+ }, position: tooltipPosition, title: tooltipContent.header, onMouseEnter: () => showTooltip(tooltipTarget.id), onMouseLeave: () => hideTooltip(), footer: tooltipContent.footer && (_jsxs(_Fragment, { children: [_jsx("hr", { "aria-hidden": true }), tooltipContent.footer] })), children: tooltipContent.body }))] }));
196
205
  };
197
206
  function getBoxTextAlignment(horizontalAlignment) {
198
207
  switch (horizontalAlignment) {
@@ -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 { 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_SHOW_DELAY = 300;\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 axisId?: string;\n className?: string;\n actions?: React.ReactNode;\n someHighlighted: boolean;\n alignment: LegendAlignment;\n enableHorizontalScroll?: boolean;\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 axisId,\n actions,\n alignment,\n className,\n someHighlighted,\n onToggleItem,\n onSelectItem,\n onItemHighlightEnter,\n onItemHighlightExit,\n getTooltipContent,\n horizontalAlignment,\n enableHorizontalScroll,\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), TOOLTIP_SHOW_DELAY);\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 data-axisid={axisId}\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-horizontal-scroll\"]]: enableHorizontalScroll,\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 triggerClampRef={containerRef}\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_SHOW_DELAY = 300;\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 axisId?: string;\n className?: string;\n actions?: React.ReactNode;\n someHighlighted: boolean;\n alignment: LegendAlignment;\n enableHorizontalScroll?: boolean;\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 axisId,\n actions,\n alignment,\n className,\n someHighlighted,\n onToggleItem,\n onSelectItem,\n onItemHighlightEnter,\n onItemHighlightExit,\n getTooltipContent,\n horizontalAlignment,\n enableHorizontalScroll,\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), TOOLTIP_SHOW_DELAY);\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 }, [tooltipItemId, hideTooltip]);\n\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 the tooltip.\n const next = event.relatedTarget as Node | null;\n if (next && tooltipRef.current?.contains(next)) {\n return;\n }\n if (next) {\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 <div\n role=\"toolbar\"\n aria-label={legendTitle || ariaLabel}\n className={clsx(testClasses.root, styles.root, className)}\n data-axisid={axisId}\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 <SingleTabStopNavigationProvider\n ref={navigationAPI}\n navigationActive={true}\n getNextFocusTarget={() => getNextFocusTarget()}\n onUnregisterActive={(element: HTMLElement) => onUnregisterActive(element, navigationAPI)}\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-horizontal-scroll\"]]: enableHorizontalScroll,\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 </SingleTabStopNavigationProvider>\n {tooltipContent && (\n <InternalChartTooltip\n ref={tooltipRef}\n trackRef={tooltipTrack}\n triggerClampRef={containerRef}\n trackKey={tooltipTarget.id}\n container={null}\n dismissButton={true}\n disableDismissAutoFocus={true}\n onDismiss={() => {\n hideTooltip(true);\n elementsByIdRef.current[tooltipTarget.id]?.focus();\n }}\n position={tooltipPosition}\n title={tooltipContent.header}\n onMouseEnter={() => showTooltip(tooltipTarget.id)}\n onMouseLeave={() => 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 );\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,5 +1,5 @@
1
1
  export var PACKAGE_SOURCE = "chart-components";
2
- export var PACKAGE_VERSION = "1.0.0 (3b627b10)";
2
+ export var PACKAGE_VERSION = "1.0.0 (23d09e04)";
3
3
  export var THEME = "open-source-visual-refresh";
4
4
  export var ALWAYS_VISUAL_REFRESH = true;
5
5
  export var SYSTEM = "core";
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "PACKAGE_SOURCE": "chart-components",
3
- "PACKAGE_VERSION": "1.0.0 (3b627b10)",
3
+ "PACKAGE_VERSION": "1.0.0 (23d09e04)",
4
4
  "THEME": "open-source-visual-refresh",
5
5
  "ALWAYS_VISUAL_REFRESH": true,
6
6
  "SYSTEM": "core"
@@ -289,6 +289,7 @@ export const colorBackgroundButtonNormalDefault: string;
289
289
  export const colorBackgroundButtonNormalDisabled: string;
290
290
  export const colorBackgroundButtonNormalHover: string;
291
291
  export const colorBackgroundToggleButtonNormalPressed: string;
292
+ export const colorBackgroundToggleButtonNormalDefault: string;
292
293
  export const colorBackgroundButtonPrimaryActive: string;
293
294
  export const colorBackgroundButtonPrimaryDefault: string;
294
295
  export const colorBackgroundButtonPrimaryDisabled: string;
@@ -491,6 +492,7 @@ export const colorTextButtonPrimaryActive: string;
491
492
  export const colorTextButtonPrimaryDefault: string;
492
493
  export const colorTextButtonPrimaryHover: string;
493
494
  export const colorTextCalendarDateHover: string;
495
+ export const colorTextCalendarDateSelected: string;
494
496
  export const colorTextCalendarMonth: string;
495
497
  export const colorTextCodeEditorGutterActiveLine: string;
496
498
  export const colorTextCodeEditorGutterDefault: string;
@@ -726,17 +728,16 @@ export const borderWidthCard: string;
726
728
  export const borderWidthCardSelected: string;
727
729
  export const borderWidthDropdown: string;
728
730
  export const borderWidthField: string;
729
- export const borderWidthPopover: string;
730
- export const borderWidthToken: string;
731
- export const borderWidthIconXSmall: string;
732
- export const borderWidthIconSmall: string;
733
- export const borderWidthIconNormal: string;
734
- export const borderWidthIconMedium: string;
735
731
  export const borderWidthIconBig: string;
736
732
  export const borderWidthIconLarge: string;
733
+ export const borderWidthIconMedium: string;
734
+ export const borderWidthIconNormal: string;
735
+ export const borderWidthIconSmall: string;
737
736
  export const borderWidthItemCard: string;
738
737
  export const borderWidthItemCardHighlighted: string;
739
738
  export const borderWidthItemSelected: string;
739
+ export const borderWidthPopover: string;
740
+ export const borderWidthToken: string;
740
741
  export const motionDurationExtraFast: string;
741
742
  export const motionDurationExtraSlow: string;
742
743
  export const motionDurationFast: string;
@@ -784,7 +785,6 @@ export const sizeIconBig: string;
784
785
  export const sizeIconLarge: string;
785
786
  export const sizeIconMedium: string;
786
787
  export const sizeIconNormal: string;
787
- export const sizeIconXSmall: string;
788
788
  export const sizeTableSelectionHorizontal: string;
789
789
  export const sizeVerticalInput: string;
790
790
  export const sizeVerticalPanelIconOffset: string;
@@ -289,6 +289,7 @@ export var colorBackgroundButtonNormalDefault = "var(--color-background-button-n
289
289
  export var colorBackgroundButtonNormalDisabled = "var(--color-background-button-normal-disabled-hl039l, #ffffff)";
290
290
  export var colorBackgroundButtonNormalHover = "var(--color-background-button-normal-hover-53op9s, #f0fbff)";
291
291
  export var colorBackgroundToggleButtonNormalPressed = "var(--color-background-toggle-button-normal-pressed-4khex7, #d1f1ff)";
292
+ export var colorBackgroundToggleButtonNormalDefault = "var(--color-background-toggle-button-normal-default-ipnqr5, #ffffff)";
292
293
  export var colorBackgroundButtonPrimaryActive = "var(--color-background-button-primary-active-5cqoqt, #002b66)";
293
294
  export var colorBackgroundButtonPrimaryDefault = "var(--color-background-button-primary-default-vdt0fu, #006ce0)";
294
295
  export var colorBackgroundButtonPrimaryDisabled = "var(--color-background-button-primary-disabled-sgo4zo, #ebebf0)";
@@ -491,6 +492,7 @@ export var colorTextButtonPrimaryActive = "var(--color-text-button-primary-activ
491
492
  export var colorTextButtonPrimaryDefault = "var(--color-text-button-primary-default-mwl31m, #ffffff)";
492
493
  export var colorTextButtonPrimaryHover = "var(--color-text-button-primary-hover-pw12ep, #ffffff)";
493
494
  export var colorTextCalendarDateHover = "var(--color-text-calendar-date-hover-3fcriv, #0f141a)";
495
+ export var colorTextCalendarDateSelected = "var(--color-text-calendar-date-selected-m18pgv, #ffffff)";
494
496
  export var colorTextCalendarMonth = "var(--color-text-calendar-month-ea0e93, #656871)";
495
497
  export var colorTextCodeEditorGutterActiveLine = "var(--color-text-code-editor-gutter-active-line-2addhd, #ffffff)";
496
498
  export var colorTextCodeEditorGutterDefault = "var(--color-text-code-editor-gutter-default-nlshs8, #0f141a)";
@@ -726,17 +728,16 @@ export var borderWidthCard = "var(--border-width-card-x24gzt, 1px)";
726
728
  export var borderWidthCardSelected = "var(--border-width-card-selected-01i6br, 2px)";
727
729
  export var borderWidthDropdown = "var(--border-width-dropdown-youcay, 2px)";
728
730
  export var borderWidthField = "var(--border-width-field-2xc78x, 1px)";
729
- export var borderWidthPopover = "var(--border-width-popover-nflirh, 2px)";
730
- export var borderWidthToken = "var(--border-width-token-2ukdpu, 2px)";
731
- export var borderWidthIconXSmall = "var(--border-width-icon-x-small-45lnog, 1.5px)";
732
- export var borderWidthIconSmall = "var(--border-width-icon-small-z55i5t, 2px)";
733
- export var borderWidthIconNormal = "var(--border-width-icon-normal-9h7vj7, 2px)";
734
- export var borderWidthIconMedium = "var(--border-width-icon-medium-b7icqv, 2px)";
735
731
  export var borderWidthIconBig = "var(--border-width-icon-big-ymgy42, 3px)";
736
732
  export var borderWidthIconLarge = "var(--border-width-icon-large-u645rg, 4px)";
733
+ export var borderWidthIconMedium = "var(--border-width-icon-medium-b7icqv, 2px)";
734
+ export var borderWidthIconNormal = "var(--border-width-icon-normal-9h7vj7, 2px)";
735
+ export var borderWidthIconSmall = "var(--border-width-icon-small-z55i5t, 2px)";
737
736
  export var borderWidthItemCard = "var(--border-width-item-card-3wmyp3, 1px)";
738
737
  export var borderWidthItemCardHighlighted = "var(--border-width-item-card-highlighted-jay4ll, 2px)";
739
738
  export var borderWidthItemSelected = "var(--border-width-item-selected-yv93vd, 2px)";
739
+ export var borderWidthPopover = "var(--border-width-popover-nflirh, 2px)";
740
+ export var borderWidthToken = "var(--border-width-token-2ukdpu, 2px)";
740
741
  export var motionDurationExtraFast = "var(--motion-duration-extra-fast-l4w48j, 45ms)";
741
742
  export var motionDurationExtraSlow = "var(--motion-duration-extra-slow-29bqym, 270ms)";
742
743
  export var motionDurationFast = "var(--motion-duration-fast-unntf6, 90ms)";
@@ -784,7 +785,6 @@ export var sizeIconBig = "var(--size-icon-big-7pq9l3, 32px)";
784
785
  export var sizeIconLarge = "var(--size-icon-large-mb6y6y, 48px)";
785
786
  export var sizeIconMedium = "var(--size-icon-medium-uv8xcz, 20px)";
786
787
  export var sizeIconNormal = "var(--size-icon-normal-levt08, 16px)";
787
- export var sizeIconXSmall = "var(--size-icon-x-small-bajx8s, 12px)";
788
788
  export var sizeTableSelectionHorizontal = "var(--size-table-selection-horizontal-qqiajd, 40px)";
789
789
  export var sizeVerticalInput = "var(--size-vertical-input-p1d7xx, 32px)";
790
790
  export var sizeVerticalPanelIconOffset = "var(--size-vertical-panel-icon-offset-z959cw, 15px)";