@cloudscape-design/components 3.0.244 → 3.0.246

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

@@ -2,14 +2,12 @@
 // SPDX-License-Identifier: Apache-2.0
 import clsx from 'clsx';
 import React, { useRef, memo } from 'react';
-import useFocusVisible from '../../hooks/focus-visible';
 import InternalBox from '../../../box/internal';
 import { KeyCode } from '../../keycode';
 import SeriesMarker from '../chart-series-marker';
 import styles from './styles.css.js';
 export default memo(ChartLegend);
 function ChartLegend({ series, onHighlightChange, highlightedSeries, legendTitle, ariaLabel, plotContainerRef, }) {
-    const focusVisible = useFocusVisible();
     const containerRef = useRef(null);
     const segmentsRef = useRef([]);
     const highlightedSeriesIndex = findSeriesIndex(series, highlightedSeries);
@@ -71,7 +69,7 @@ function ChartLegend({ series, onHighlightChange, highlightedSeries, legendTitle
                 const someHighlighted = highlightedSeries !== null;
                 const isHighlighted = highlightedSeries === s.datum;
                 const isDimmed = someHighlighted && !isHighlighted;
-                return (React.createElement("div", Object.assign({}, focusVisible, { role: "button", key: index, "aria-pressed": isHighlighted, className: clsx(styles.marker, {
+                return (React.createElement("div", { role: "button", key: index, "aria-pressed": isHighlighted, className: clsx(styles.marker, {
                         [styles['marker--dimmed']]: isDimmed,
                         [styles['marker--highlighted']]: isHighlighted,
                     }), ref: elem => {
@@ -81,7 +79,7 @@ function ChartLegend({ series, onHighlightChange, highlightedSeries, legendTitle
                         else {
                             delete segmentsRef.current[index];
                         }
-                    }, tabIndex: index === highlightedSeriesIndex || (highlightedSeriesIndex === undefined && index === 0) ? 0 : -1, onFocus: () => handleSelection(index), onClick: () => handleSelection(index), onMouseOver: () => handleMouseOver(s.datum), onMouseLeave: handleMouseLeave }),
+                    }, tabIndex: index === highlightedSeriesIndex || (highlightedSeriesIndex === undefined && index === 0) ? 0 : -1, onFocus: () => handleSelection(index), onClick: () => handleSelection(index), onMouseOver: () => handleMouseOver(s.datum), onMouseLeave: handleMouseLeave },
                     React.createElement(SeriesMarker, { color: s.color, type: s.type }),
                     " ",
                     s.label));

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["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\nimport clsx from 'clsx';\nimport React, { useRef, memo } from 'react';\n\nimport useFocusVisible from '../../hooks/focus-visible';\nimport InternalBox from '../../../box/internal';\nimport { KeyCode } from '../../keycode';\nimport SeriesMarker, { ChartSeriesMarkerType } from '../chart-series-marker';\nimport styles from './styles.css.js';\n\nexport interface ChartLegendItem<T> {\n  label: string;\n  color: string;\n  type: ChartSeriesMarkerType;\n  datum: T;\n}\n\nexport interface ChartLegendProps<T> {\n  series: ReadonlyArray<ChartLegendItem<T>>;\n  highlightedSeries: T | null;\n  legendTitle?: string;\n  ariaLabel?: string;\n  plotContainerRef?: React.RefObject<HTMLDivElement>;\n  onHighlightChange: (series: T | null) => void;\n}\n\nexport default memo(ChartLegend) as typeof ChartLegend;\n\nfunction ChartLegend<T>({\n  series,\n  onHighlightChange,\n  highlightedSeries,\n  legendTitle,\n  ariaLabel,\n  plotContainerRef,\n}: ChartLegendProps<T>) {\n  const focusVisible = useFocusVisible();\n  const containerRef = useRef<HTMLDivElement>(null);\n  const segmentsRef = useRef<Record<number, HTMLElement>>([]);\n\n  const highlightedSeriesIndex = findSeriesIndex(series, highlightedSeries);\n\n  const highlightLeft = () => {\n    const currentIndex = highlightedSeriesIndex ?? 0;\n    const nextIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : series.length - 1;\n    segmentsRef.current[nextIndex]?.focus();\n  };\n\n  const highlightRight = () => {\n    const currentIndex = highlightedSeriesIndex ?? 0;\n    const nextIndex = currentIndex + 1 < series.length ? currentIndex + 1 : 0;\n    segmentsRef.current[nextIndex]?.focus();\n  };\n\n  const handleKeyPress = (event: React.KeyboardEvent) => {\n    if (event.keyCode === KeyCode.right || event.keyCode === KeyCode.left) {\n      // Preventing default fixes an issue in Safari+VO when VO additionally interprets arrow keys as its commands.\n      event.preventDefault();\n\n      switch (event.keyCode) {\n        case KeyCode.left:\n          return highlightLeft();\n\n        case KeyCode.right:\n          return highlightRight();\n\n        default:\n          return;\n      }\n    }\n  };\n\n  const handleSelection = (index: number) => {\n    if (series[index].datum !== highlightedSeries) {\n      onHighlightChange(series[index].datum);\n    }\n  };\n\n  const handleBlur = (event: React.FocusEvent<Element>) => {\n    // We need to check if the next element to be focused inside the plot container or not\n    // so we don't clear the selected legend in case we are still focusing elements ( legend elements )\n    // inside the plot container\n    if (\n      event.relatedTarget === null ||\n      (containerRef.current &&\n        !containerRef.current.contains(event.relatedTarget) &&\n        !plotContainerRef?.current?.contains(event.relatedTarget))\n    ) {\n      onHighlightChange(null);\n    }\n  };\n\n  const handleMouseOver = (s: T) => {\n    if (s !== highlightedSeries) {\n      onHighlightChange(s);\n    }\n  };\n\n  const handleMouseLeave = () => {\n    onHighlightChange(null);\n  };\n\n  return (\n    <>\n      <div\n        ref={containerRef}\n        role=\"toolbar\"\n        aria-label={legendTitle || ariaLabel}\n        className={styles.root}\n        onKeyDown={handleKeyPress}\n        onBlur={handleBlur}\n      >\n        {legendTitle && (\n          <InternalBox fontWeight=\"bold\" className={styles.title}>\n            {legendTitle}\n          </InternalBox>\n        )}\n\n        <div className={styles.list}>\n          {series.map((s, index) => {\n            const someHighlighted = highlightedSeries !== null;\n            const isHighlighted = highlightedSeries === s.datum;\n            const isDimmed = someHighlighted && !isHighlighted;\n            return (\n              <div\n                {...focusVisible}\n                role=\"button\"\n                key={index}\n                aria-pressed={isHighlighted}\n                className={clsx(styles.marker, {\n                  [styles['marker--dimmed']]: isDimmed,\n                  [styles['marker--highlighted']]: isHighlighted,\n                })}\n                ref={elem => {\n                  if (elem) {\n                    segmentsRef.current[index] = elem;\n                  } else {\n                    delete segmentsRef.current[index];\n                  }\n                }}\n                tabIndex={\n                  index === highlightedSeriesIndex || (highlightedSeriesIndex === undefined && index === 0) ? 0 : -1\n                }\n                onFocus={() => handleSelection(index)}\n                onClick={() => handleSelection(index)}\n                onMouseOver={() => handleMouseOver(s.datum)}\n                onMouseLeave={handleMouseLeave}\n              >\n                <SeriesMarker color={s.color} type={s.type} /> {s.label}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </>\n  );\n}\n\nfunction findSeriesIndex<T>(series: ReadonlyArray<ChartLegendItem<T>>, targetSeries: null | T): undefined | number {\n  for (let index = 0; index < series.length; index++) {\n    if (series[index].datum === targetSeries) {\n      return index;\n    }\n  }\n  return undefined;\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["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\nimport clsx from 'clsx';\nimport React, { useRef, memo } from 'react';\n\nimport InternalBox from '../../../box/internal';\nimport { KeyCode } from '../../keycode';\nimport SeriesMarker, { ChartSeriesMarkerType } from '../chart-series-marker';\nimport styles from './styles.css.js';\n\nexport interface ChartLegendItem<T> {\n  label: string;\n  color: string;\n  type: ChartSeriesMarkerType;\n  datum: T;\n}\n\nexport interface ChartLegendProps<T> {\n  series: ReadonlyArray<ChartLegendItem<T>>;\n  highlightedSeries: T | null;\n  legendTitle?: string;\n  ariaLabel?: string;\n  plotContainerRef?: React.RefObject<HTMLDivElement>;\n  onHighlightChange: (series: T | null) => void;\n}\n\nexport default memo(ChartLegend) as typeof ChartLegend;\n\nfunction ChartLegend<T>({\n  series,\n  onHighlightChange,\n  highlightedSeries,\n  legendTitle,\n  ariaLabel,\n  plotContainerRef,\n}: ChartLegendProps<T>) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const segmentsRef = useRef<Record<number, HTMLElement>>([]);\n\n  const highlightedSeriesIndex = findSeriesIndex(series, highlightedSeries);\n\n  const highlightLeft = () => {\n    const currentIndex = highlightedSeriesIndex ?? 0;\n    const nextIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : series.length - 1;\n    segmentsRef.current[nextIndex]?.focus();\n  };\n\n  const highlightRight = () => {\n    const currentIndex = highlightedSeriesIndex ?? 0;\n    const nextIndex = currentIndex + 1 < series.length ? currentIndex + 1 : 0;\n    segmentsRef.current[nextIndex]?.focus();\n  };\n\n  const handleKeyPress = (event: React.KeyboardEvent) => {\n    if (event.keyCode === KeyCode.right || event.keyCode === KeyCode.left) {\n      // Preventing default fixes an issue in Safari+VO when VO additionally interprets arrow keys as its commands.\n      event.preventDefault();\n\n      switch (event.keyCode) {\n        case KeyCode.left:\n          return highlightLeft();\n\n        case KeyCode.right:\n          return highlightRight();\n\n        default:\n          return;\n      }\n    }\n  };\n\n  const handleSelection = (index: number) => {\n    if (series[index].datum !== highlightedSeries) {\n      onHighlightChange(series[index].datum);\n    }\n  };\n\n  const handleBlur = (event: React.FocusEvent<Element>) => {\n    // We need to check if the next element to be focused inside the plot container or not\n    // so we don't clear the selected legend in case we are still focusing elements ( legend elements )\n    // inside the plot container\n    if (\n      event.relatedTarget === null ||\n      (containerRef.current &&\n        !containerRef.current.contains(event.relatedTarget) &&\n        !plotContainerRef?.current?.contains(event.relatedTarget))\n    ) {\n      onHighlightChange(null);\n    }\n  };\n\n  const handleMouseOver = (s: T) => {\n    if (s !== highlightedSeries) {\n      onHighlightChange(s);\n    }\n  };\n\n  const handleMouseLeave = () => {\n    onHighlightChange(null);\n  };\n\n  return (\n    <>\n      <div\n        ref={containerRef}\n        role=\"toolbar\"\n        aria-label={legendTitle || ariaLabel}\n        className={styles.root}\n        onKeyDown={handleKeyPress}\n        onBlur={handleBlur}\n      >\n        {legendTitle && (\n          <InternalBox fontWeight=\"bold\" className={styles.title}>\n            {legendTitle}\n          </InternalBox>\n        )}\n\n        <div className={styles.list}>\n          {series.map((s, index) => {\n            const someHighlighted = highlightedSeries !== null;\n            const isHighlighted = highlightedSeries === s.datum;\n            const isDimmed = someHighlighted && !isHighlighted;\n            return (\n              <div\n                role=\"button\"\n                key={index}\n                aria-pressed={isHighlighted}\n                className={clsx(styles.marker, {\n                  [styles['marker--dimmed']]: isDimmed,\n                  [styles['marker--highlighted']]: isHighlighted,\n                })}\n                ref={elem => {\n                  if (elem) {\n                    segmentsRef.current[index] = elem;\n                  } else {\n                    delete segmentsRef.current[index];\n                  }\n                }}\n                tabIndex={\n                  index === highlightedSeriesIndex || (highlightedSeriesIndex === undefined && index === 0) ? 0 : -1\n                }\n                onFocus={() => handleSelection(index)}\n                onClick={() => handleSelection(index)}\n                onMouseOver={() => handleMouseOver(s.datum)}\n                onMouseLeave={handleMouseLeave}\n              >\n                <SeriesMarker color={s.color} type={s.type} /> {s.label}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </>\n  );\n}\n\nfunction findSeriesIndex<T>(series: ReadonlyArray<ChartLegendItem<T>>, targetSeries: null | T): undefined | number {\n  for (let index = 0; index < series.length; index++) {\n    if (series[index].datum === targetSeries) {\n      return index;\n    }\n  }\n  return undefined;\n}\n"]}

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

@@ -1,11 +1,11 @@
 
     import './styles.scoped.css';
     export default {
-  "marker": "awsui_marker_1kjc7_6thzz_93",
-  "root": "awsui_root_1kjc7_6thzz_111",
-  "title": "awsui_title_1kjc7_6thzz_127",
-  "list": "awsui_list_1kjc7_6thzz_131",
-  "marker--dimmed": "awsui_marker--dimmed_1kjc7_6thzz_173",
-  "marker--highlighted": "awsui_marker--highlighted_1kjc7_6thzz_176"
+  "marker": "awsui_marker_1kjc7_frtmv_93",
+  "root": "awsui_root_1kjc7_frtmv_111",
+  "title": "awsui_title_1kjc7_frtmv_127",
+  "list": "awsui_list_1kjc7_frtmv_131",
+  "marker--dimmed": "awsui_marker--dimmed_1kjc7_frtmv_173",
+  "marker--highlighted": "awsui_marker--highlighted_1kjc7_frtmv_176"
 };
   

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

@@ -90,16 +90,16 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_marker_1kjc7_6thzz_93:not(#\9) {
+.awsui_marker_1kjc7_frtmv_93:not(#\9) {
   transition: opacity var(--motion-duration-transition-quick-x85tae, 90ms) var(--motion-easing-transition-quick-lukbd8, linear);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_marker_1kjc7_6thzz_93:not(#\9) {
+  .awsui_marker_1kjc7_frtmv_93:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_marker_1kjc7_6thzz_93:not(#\9), .awsui-mode-entering .awsui_marker_1kjc7_6thzz_93:not(#\9) {
+.awsui-motion-disabled .awsui_marker_1kjc7_frtmv_93:not(#\9), .awsui-mode-entering .awsui_marker_1kjc7_frtmv_93:not(#\9) {
   animation: none;
   transition: none;
 }
@@ -108,7 +108,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_1kjc7_6thzz_111:not(#\9) {
+.awsui_root_1kjc7_frtmv_111:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -146,15 +146,15 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
 }
-.awsui_root_1kjc7_6thzz_111:not(#\9):focus {
+.awsui_root_1kjc7_frtmv_111:not(#\9):focus {
   outline: none;
 }
 
-.awsui_title_1kjc7_6thzz_127:not(#\9) {
+.awsui_title_1kjc7_frtmv_127:not(#\9) {
   /* used in test utils */
 }
 
-.awsui_list_1kjc7_6thzz_131:not(#\9) {
+.awsui_list_1kjc7_frtmv_131:not(#\9) {
   display: flex;
   flex-wrap: wrap;
   list-style: none;
@@ -162,7 +162,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding: 0;
 }
 
-.awsui_marker_1kjc7_6thzz_93:not(#\9) {
+.awsui_marker_1kjc7_frtmv_93:not(#\9) {
   display: inline-flex;
   align-items: flex-start;
   margin-right: var(--space-m-17eucw, 16px);
@@ -172,17 +172,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   cursor: pointer;
   opacity: 1;
 }
-.awsui_marker_1kjc7_6thzz_93:not(#\9):focus {
+.awsui_marker_1kjc7_frtmv_93:not(#\9):focus {
   outline: none;
 }
-.awsui_marker_1kjc7_6thzz_93[data-awsui-focus-visible=true]:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_marker_1kjc7_frtmv_93:not(#\9):focus {
   position: relative;
 }
-.awsui_marker_1kjc7_6thzz_93[data-awsui-focus-visible=true]:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_marker_1kjc7_frtmv_93:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(2px - 1px);
 }
-.awsui_marker_1kjc7_6thzz_93[data-awsui-focus-visible=true]:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_marker_1kjc7_frtmv_93:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -193,12 +193,12 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-radius: var(--border-radius-control-default-focus-ring-7661kz, 4px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
 }
-.awsui_marker_1kjc7_6thzz_93:not(#\9):last-child {
+.awsui_marker_1kjc7_frtmv_93:not(#\9):last-child {
   margin-right: 0;
 }
-.awsui_marker_1kjc7_6thzz_93.awsui_marker--dimmed_1kjc7_6thzz_173:not(#\9) {
+.awsui_marker_1kjc7_frtmv_93.awsui_marker--dimmed_1kjc7_frtmv_173:not(#\9) {
   opacity: 0.35;
 }
-.awsui_marker_1kjc7_6thzz_93.awsui_marker--highlighted_1kjc7_6thzz_176:not(#\9) {
+.awsui_marker_1kjc7_frtmv_93.awsui_marker--highlighted_1kjc7_frtmv_176:not(#\9) {
   /* used in test utils */
 }

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

@@ -2,11 +2,11 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "marker": "awsui_marker_1kjc7_6thzz_93",
-  "root": "awsui_root_1kjc7_6thzz_111",
-  "title": "awsui_title_1kjc7_6thzz_127",
-  "list": "awsui_list_1kjc7_6thzz_131",
-  "marker--dimmed": "awsui_marker--dimmed_1kjc7_6thzz_173",
-  "marker--highlighted": "awsui_marker--highlighted_1kjc7_6thzz_176"
+  "marker": "awsui_marker_1kjc7_frtmv_93",
+  "root": "awsui_root_1kjc7_frtmv_111",
+  "title": "awsui_title_1kjc7_frtmv_127",
+  "list": "awsui_list_1kjc7_frtmv_131",
+  "marker--dimmed": "awsui_marker--dimmed_1kjc7_frtmv_173",
+  "marker--highlighted": "awsui_marker--highlighted_1kjc7_frtmv_176"
 };
   

package/internal/components/chart-plot/focus-outline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"focus-outline.d.ts","sourceRoot":"lib/default/","sources":["internal/components/chart-plot/focus-outline.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEvC,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IAC9C,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,GAAG,WAAW,CAAC,CAAC;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,MAAU,EAAE,EAAE,iBAAiB,eAkB7F"}
+{"version":3,"file":"focus-outline.d.ts","sourceRoot":"lib/default/","sources":["internal/components/chart-plot/focus-outline.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAGvC,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IAC9C,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,GAAG,WAAW,CAAC,CAAC;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA4BD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,MAAU,EAAE,EAAE,iBAAiB,eAkB7F"}

package/internal/components/chart-plot/focus-outline.js

@@ -1,11 +1,33 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import styles from './styles.css.js';
-import useFocusVisible from '../../hooks/focus-visible/index';
+import { isModifierKey } from '../../hooks/focus-visible';
+function useFocusVisibleState() {
+    const [focusVisible, setFocusVisible] = useState(false);
+    useEffect(() => {
+        function handleMousedown() {
+            return setFocusVisible(false);
+        }
+        function handleKeydown(event) {
+            // we do not want to highlight focused element
+            // when special keys are pressed
+            if (!isModifierKey(event)) {
+                setFocusVisible(true);
+            }
+        }
+        document.addEventListener('mousedown', handleMousedown);
+        document.addEventListener('keydown', handleKeydown);
+        return () => {
+            document.removeEventListener('mousedown', handleMousedown);
+            document.removeEventListener('keydown', handleKeydown);
+        };
+    });
+    return focusVisible;
+}
 export default function FocusOutline({ elementKey, elementRef, offset = 0 }) {
     const ref = useRef(null);
-    const { 'data-awsui-focus-visible': focusVisible } = useFocusVisible();
+    const focusVisible = useFocusVisibleState();
     useEffect(() => {
         if (!ref.current) {
             return;

package/internal/components/chart-plot/focus-outline.js.map

@@ -1 +1 @@
-{"version":3,"file":"focus-outline.js","sourceRoot":"lib/default/","sources":["internal/components/chart-plot/focus-outline.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,eAAe,MAAM,iCAAiC,CAAC;AAS9D,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,GAAG,CAAC,EAAqB;IAC5F,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,MAAM,EAAE,0BAA0B,EAAE,YAAY,EAAE,GAAG,eAAe,EAAE,CAAC;IAEvE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE;YAChB,OAAO;SACR;QAED,IAAI,YAAY,IAAI,UAAU,IAAI,UAAU,IAAI,UAAU,CAAC,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,OAAO,EAAE;YAChG,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;YAC7C,WAAW,CAAC,GAAG,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;SAC3C;aAAM;YACL,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;SAC1B;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC;IAEnD,OAAO,8BAAM,GAAG,EAAE,GAAG,iBAAc,MAAM,EAAC,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,EAAE,EAAE,EAAC,GAAG,GAAG,CAAC;AAC1F,CAAC;AAED,SAAS,WAAW,CAClB,EAAkB,EAClB,QAAiE,EACjE,MAAc;IAEd,MAAM,OAAO,GAAG,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;IAC/D,MAAM,OAAO,GAAG,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;IAC/D,EAAE,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;IACxD,EAAE,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;IACxD,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC,QAAQ,CAAC,KAAK,GAAG,CAAC,GAAG,OAAO,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;IACpE,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,OAAO,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;IACtE,EAAE,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS,CAAC;AAClC,CAAC;AAED,SAAS,WAAW,CAAC,EAAkB;IACrC,EAAE,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;IAC/B,EAAE,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;IACxB,EAAE,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;IACxB,EAAE,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;IAC5B,EAAE,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;AAC/B,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\n\nimport styles from './styles.css.js';\nimport useFocusVisible from '../../hooks/focus-visible/index';\nimport { Offset } from '../interfaces';\n\nexport interface FocusOutlineProps {\n  elementKey?: null | string | number | boolean;\n  elementRef?: React.RefObject<SVGSVGElement | SVGGElement>;\n  offset?: Offset;\n}\n\nexport default function FocusOutline({ elementKey, elementRef, offset = 0 }: FocusOutlineProps) {\n  const ref = useRef<SVGRectElement>(null);\n  const { 'data-awsui-focus-visible': focusVisible } = useFocusVisible();\n\n  useEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    if (focusVisible && elementKey && elementRef && elementRef.current && elementRef.current.getBBox) {\n      const element = elementRef.current.getBBox();\n      showOutline(ref.current, element, offset);\n    } else {\n      hideOutline(ref.current);\n    }\n  }, [focusVisible, elementKey, elementRef, offset]);\n\n  return <rect ref={ref} aria-hidden=\"true\" className={styles['focus-outline']} rx=\"2\" />;\n}\n\nfunction showOutline(\n  el: SVGRectElement,\n  position: { x: number; y: number; width: number; height: number },\n  offset: Offset\n) {\n  const offsetX = typeof offset === 'number' ? offset : offset.x;\n  const offsetY = typeof offset === 'number' ? offset : offset.y;\n  el.setAttribute('x', (position.x - offsetX).toString());\n  el.setAttribute('y', (position.y - offsetY).toString());\n  el.setAttribute('width', (position.width + 2 * offsetX).toString());\n  el.setAttribute('height', (position.height + 2 * offsetY).toString());\n  el.style.visibility = 'visible';\n}\n\nfunction hideOutline(el: SVGRectElement) {\n  el.style.visibility = 'hidden';\n  el.removeAttribute('x');\n  el.removeAttribute('y');\n  el.removeAttribute('width');\n  el.removeAttribute('height');\n}\n"]}
+{"version":3,"file":"focus-outline.js","sourceRoot":"lib/default/","sources":["internal/components/chart-plot/focus-outline.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport styles from './styles.css.js';\nimport { Offset } from '../interfaces';\nimport { isModifierKey } from '../../hooks/focus-visible';\n\nexport interface FocusOutlineProps {\n  elementKey?: null | string | number | boolean;\n  elementRef?: React.RefObject<SVGSVGElement | SVGGElement>;\n  offset?: Offset;\n}\n\nfunction useFocusVisibleState() {\n  const [focusVisible, setFocusVisible] = useState(false);\n  useEffect(() => {\n    function handleMousedown() {\n      return setFocusVisible(false);\n    }\n\n    function handleKeydown(event: KeyboardEvent) {\n      // we do not want to highlight focused element\n      // when special keys are pressed\n      if (!isModifierKey(event)) {\n        setFocusVisible(true);\n      }\n    }\n\n    document.addEventListener('mousedown', handleMousedown);\n    document.addEventListener('keydown', handleKeydown);\n    return () => {\n      document.removeEventListener('mousedown', handleMousedown);\n      document.removeEventListener('keydown', handleKeydown);\n    };\n  });\n\n  return focusVisible;\n}\n\nexport default function FocusOutline({ elementKey, elementRef, offset = 0 }: FocusOutlineProps) {\n  const ref = useRef<SVGRectElement>(null);\n  const focusVisible = useFocusVisibleState();\n\n  useEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    if (focusVisible && elementKey && elementRef && elementRef.current && elementRef.current.getBBox) {\n      const element = elementRef.current.getBBox();\n      showOutline(ref.current, element, offset);\n    } else {\n      hideOutline(ref.current);\n    }\n  }, [focusVisible, elementKey, elementRef, offset]);\n\n  return <rect ref={ref} aria-hidden=\"true\" className={styles['focus-outline']} rx=\"2\" />;\n}\n\nfunction showOutline(\n  el: SVGRectElement,\n  position: { x: number; y: number; width: number; height: number },\n  offset: Offset\n) {\n  const offsetX = typeof offset === 'number' ? offset : offset.x;\n  const offsetY = typeof offset === 'number' ? offset : offset.y;\n  el.setAttribute('x', (position.x - offsetX).toString());\n  el.setAttribute('y', (position.y - offsetY).toString());\n  el.setAttribute('width', (position.width + 2 * offsetX).toString());\n  el.setAttribute('height', (position.height + 2 * offsetY).toString());\n  el.style.visibility = 'visible';\n}\n\nfunction hideOutline(el: SVGRectElement) {\n  el.style.visibility = 'hidden';\n  el.removeAttribute('x');\n  el.removeAttribute('y');\n  el.removeAttribute('width');\n  el.removeAttribute('height');\n}\n"]}

package/internal/components/filtering-token/index.d.ts

@@ -3,6 +3,7 @@ export declare namespace FilteringTokenProps {
     type Operation = 'and' | 'or';
 }
 export interface FilteringTokenProps {
+    ariaLabel?: string;
     showOperation: boolean;
     operation: FilteringTokenProps.Operation;
     andText: string;
@@ -14,5 +15,5 @@ export interface FilteringTokenProps {
     onChange: (op: FilteringTokenProps.Operation) => void;
     onDismiss: () => void;
 }
-export default function FilteringToken({ showOperation, operation, andText, orText, dismissAriaLabel, operatorAriaLabel, disabled, children, onChange, onDismiss, }: FilteringTokenProps): JSX.Element;
+export default function FilteringToken({ ariaLabel, showOperation, operation, andText, orText, dismissAriaLabel, operatorAriaLabel, disabled, children, onChange, onDismiss, }: FilteringTokenProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/internal/components/filtering-token/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/components/filtering-token/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,yBAAiB,mBAAmB,CAAC;IACnC,KAAY,SAAS,GAAG,KAAK,GAAG,IAAI,CAAC;CACtC;AAED,MAAM,WAAW,mBAAmB;IAClC,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,EAAE,mBAAmB,CAAC,SAAS,CAAC;IACzC,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,QAAQ,EAAE,CAAC,EAAE,EAAE,mBAAmB,CAAC,SAAS,KAAK,IAAI,CAAC;IACtD,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,aAAa,EACb,SAAS,EACT,OAAO,EACP,MAAM,EACN,gBAAgB,EAChB,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,GACV,EAAE,mBAAmB,eAoCrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/components/filtering-token/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,yBAAiB,mBAAmB,CAAC;IACnC,KAAY,SAAS,GAAG,KAAK,GAAG,IAAI,CAAC;CACtC;AAED,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,EAAE,mBAAmB,CAAC,SAAS,CAAC;IACzC,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,QAAQ,EAAE,CAAC,EAAE,EAAE,mBAAmB,CAAC,SAAS,KAAK,IAAI,CAAC;IACtD,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,SAAS,EACT,aAAa,EACb,SAAS,EACT,OAAO,EACP,MAAM,EACN,gBAAgB,EAChB,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,GACV,EAAE,mBAAmB,eAkCrB"}

package/internal/components/filtering-token/index.js

@@ -4,18 +4,16 @@ import React from 'react';
 import clsx from 'clsx';
 import InternalSelect from '../../../select/internal';
 import InternalIcon from '../../../icon/internal';
-import useFocusVisible from '../../hooks/focus-visible';
 import styles from './styles.css.js';
-export default function FilteringToken({ showOperation, operation, andText, orText, dismissAriaLabel, operatorAriaLabel, disabled, children, onChange, onDismiss, }) {
-    const focusVisible = useFocusVisible();
-    return (React.createElement("div", { className: styles.root },
+export default function FilteringToken({ ariaLabel, showOperation, operation, andText, orText, dismissAriaLabel, operatorAriaLabel, disabled, children, onChange, onDismiss, }) {
+    return (React.createElement("div", { className: styles.root, role: "group", "aria-label": ariaLabel },
         showOperation && (React.createElement(InternalSelect, { __inFilteringToken: true, className: styles.select, options: [
                 { value: 'and', label: andText },
                 { value: 'or', label: orText },
             ], selectedOption: { value: operation, label: operation === 'and' ? andText : orText }, onChange: e => onChange(e.detail.selectedOption.value), disabled: disabled, ariaLabel: operatorAriaLabel })),
         React.createElement("div", { className: clsx(styles.token, showOperation && styles['show-operation'], disabled && styles['token-disabled']), "aria-disabled": disabled },
             React.createElement("div", { className: styles['token-content'] }, children),
-            React.createElement("button", Object.assign({}, focusVisible, { type: "button", className: styles['dismiss-button'], "aria-label": dismissAriaLabel, onClick: onDismiss, disabled: disabled }),
+            React.createElement("button", { type: "button", className: styles['dismiss-button'], "aria-label": dismissAriaLabel, onClick: onDismiss, disabled: disabled },
                 React.createElement(InternalIcon, { name: "close" })))));
 }
 //# sourceMappingURL=index.js.map

package/internal/components/filtering-token/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/filtering-token/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,cAAc,MAAM,0BAA0B,CAAC;AACtD,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,eAAe,MAAM,2BAA2B,CAAC;AAExD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAqBrC,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,aAAa,EACb,SAAS,EACT,OAAO,EACP,MAAM,EACN,gBAAgB,EAChB,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,GACW;IACpB,MAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IACvC,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI;QACxB,aAAa,IAAI,CAChB,oBAAC,cAAc,IACb,kBAAkB,EAAE,IAAI,EACxB,SAAS,EAAE,MAAM,CAAC,MAAM,EACxB,OAAO,EAAE;gBACP,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE;gBAChC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE;aAC/B,EACD,cAAc,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,EACnF,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,KAAsC,CAAC,EACvF,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,iBAAiB,GAC5B,CACH;QACD,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,aAAa,IAAI,MAAM,CAAC,gBAAgB,CAAC,EAAE,QAAQ,IAAI,MAAM,CAAC,gBAAgB,CAAC,CAAC,mBAC/F,QAAQ;YAEvB,6BAAK,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,IAAG,QAAQ,CAAO;YACzD,gDACM,YAAY,IAChB,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,gBACvB,gBAAgB,EAC5B,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,QAAQ;gBAElB,oBAAC,YAAY,IAAC,IAAI,EAAC,OAAO,GAAG,CACtB,CACL,CACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport InternalSelect from '../../../select/internal';\nimport InternalIcon from '../../../icon/internal';\nimport useFocusVisible from '../../hooks/focus-visible';\n\nimport styles from './styles.css.js';\n\nexport namespace FilteringTokenProps {\n  export type Operation = 'and' | 'or';\n}\n\nexport interface FilteringTokenProps {\n  showOperation: boolean;\n  operation: FilteringTokenProps.Operation;\n  andText: string;\n  orText: string;\n  dismissAriaLabel?: string;\n  operatorAriaLabel?: string;\n  disabled?: boolean;\n\n  children: React.ReactNode;\n\n  onChange: (op: FilteringTokenProps.Operation) => void;\n  onDismiss: () => void;\n}\n\nexport default function FilteringToken({\n  showOperation,\n  operation,\n  andText,\n  orText,\n  dismissAriaLabel,\n  operatorAriaLabel,\n  disabled,\n  children,\n  onChange,\n  onDismiss,\n}: FilteringTokenProps) {\n  const focusVisible = useFocusVisible();\n  return (\n    <div className={styles.root}>\n      {showOperation && (\n        <InternalSelect\n          __inFilteringToken={true}\n          className={styles.select}\n          options={[\n            { value: 'and', label: andText },\n            { value: 'or', label: orText },\n          ]}\n          selectedOption={{ value: operation, label: operation === 'and' ? andText : orText }}\n          onChange={e => onChange(e.detail.selectedOption.value as FilteringTokenProps.Operation)}\n          disabled={disabled}\n          ariaLabel={operatorAriaLabel}\n        />\n      )}\n      <div\n        className={clsx(styles.token, showOperation && styles['show-operation'], disabled && styles['token-disabled'])}\n        aria-disabled={disabled}\n      >\n        <div className={styles['token-content']}>{children}</div>\n        <button\n          {...focusVisible}\n          type=\"button\"\n          className={styles['dismiss-button']}\n          aria-label={dismissAriaLabel}\n          onClick={onDismiss}\n          disabled={disabled}\n        >\n          <InternalIcon name=\"close\" />\n        </button>\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/filtering-token/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,cAAc,MAAM,0BAA0B,CAAC;AACtD,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAElD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAsBrC,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,SAAS,EACT,aAAa,EACb,SAAS,EACT,OAAO,EACP,MAAM,EACN,gBAAgB,EAChB,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,GACW;IACpB,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,IAAI,EAAC,OAAO,gBAAa,SAAS;QAC5D,aAAa,IAAI,CAChB,oBAAC,cAAc,IACb,kBAAkB,EAAE,IAAI,EACxB,SAAS,EAAE,MAAM,CAAC,MAAM,EACxB,OAAO,EAAE;gBACP,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE;gBAChC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE;aAC/B,EACD,cAAc,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,EACnF,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,KAAsC,CAAC,EACvF,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,iBAAiB,GAC5B,CACH;QACD,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,aAAa,IAAI,MAAM,CAAC,gBAAgB,CAAC,EAAE,QAAQ,IAAI,MAAM,CAAC,gBAAgB,CAAC,CAAC,mBAC/F,QAAQ;YAEvB,6BAAK,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,IAAG,QAAQ,CAAO;YACzD,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,gBACvB,gBAAgB,EAC5B,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,QAAQ;gBAElB,oBAAC,YAAY,IAAC,IAAI,EAAC,OAAO,GAAG,CACtB,CACL,CACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport InternalSelect from '../../../select/internal';\nimport InternalIcon from '../../../icon/internal';\n\nimport styles from './styles.css.js';\n\nexport namespace FilteringTokenProps {\n  export type Operation = 'and' | 'or';\n}\n\nexport interface FilteringTokenProps {\n  ariaLabel?: string;\n  showOperation: boolean;\n  operation: FilteringTokenProps.Operation;\n  andText: string;\n  orText: string;\n  dismissAriaLabel?: string;\n  operatorAriaLabel?: string;\n  disabled?: boolean;\n\n  children: React.ReactNode;\n\n  onChange: (op: FilteringTokenProps.Operation) => void;\n  onDismiss: () => void;\n}\n\nexport default function FilteringToken({\n  ariaLabel,\n  showOperation,\n  operation,\n  andText,\n  orText,\n  dismissAriaLabel,\n  operatorAriaLabel,\n  disabled,\n  children,\n  onChange,\n  onDismiss,\n}: FilteringTokenProps) {\n  return (\n    <div className={styles.root} role=\"group\" aria-label={ariaLabel}>\n      {showOperation && (\n        <InternalSelect\n          __inFilteringToken={true}\n          className={styles.select}\n          options={[\n            { value: 'and', label: andText },\n            { value: 'or', label: orText },\n          ]}\n          selectedOption={{ value: operation, label: operation === 'and' ? andText : orText }}\n          onChange={e => onChange(e.detail.selectedOption.value as FilteringTokenProps.Operation)}\n          disabled={disabled}\n          ariaLabel={operatorAriaLabel}\n        />\n      )}\n      <div\n        className={clsx(styles.token, showOperation && styles['show-operation'], disabled && styles['token-disabled'])}\n        aria-disabled={disabled}\n      >\n        <div className={styles['token-content']}>{children}</div>\n        <button\n          type=\"button\"\n          className={styles['dismiss-button']}\n          aria-label={dismissAriaLabel}\n          onClick={onDismiss}\n          disabled={disabled}\n        >\n          <InternalIcon name=\"close\" />\n        </button>\n      </div>\n    </div>\n  );\n}\n"]}

package/internal/components/filtering-token/styles.css.js

@@ -1,12 +1,12 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_10m3l_jlr8x_97",
-  "token": "awsui_token_10m3l_jlr8x_102",
-  "show-operation": "awsui_show-operation_10m3l_jlr8x_113",
-  "select": "awsui_select_10m3l_jlr8x_119",
-  "token-content": "awsui_token-content_10m3l_jlr8x_123",
-  "dismiss-button": "awsui_dismiss-button_10m3l_jlr8x_127",
-  "token-disabled": "awsui_token-disabled_10m3l_jlr8x_163"
+  "root": "awsui_root_10m3l_ujfpz_97",
+  "token": "awsui_token_10m3l_ujfpz_102",
+  "show-operation": "awsui_show-operation_10m3l_ujfpz_113",
+  "select": "awsui_select_10m3l_ujfpz_119",
+  "token-content": "awsui_token-content_10m3l_ujfpz_123",
+  "dismiss-button": "awsui_dismiss-button_10m3l_ujfpz_127",
+  "token-disabled": "awsui_token-disabled_10m3l_ujfpz_163"
 };
   

package/internal/components/filtering-token/styles.scoped.css

@@ -94,12 +94,12 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_10m3l_jlr8x_97:not(#\9) {
+.awsui_root_10m3l_ujfpz_97:not(#\9) {
   display: flex;
   align-content: stretch;
 }
 
-.awsui_token_10m3l_jlr8x_102:not(#\9) {
+.awsui_token_10m3l_ujfpz_102:not(#\9) {
   border: var(--border-field-width-idlekx, 2px) solid var(--color-border-item-selected-ppkssz, #0972d3);
   display: flex;
   align-items: stretch;
@@ -110,21 +110,21 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   box-sizing: border-box;
 }
 
-.awsui_show-operation_10m3l_jlr8x_113:not(#\9) {
+.awsui_show-operation_10m3l_ujfpz_113:not(#\9) {
   border-left: none;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.awsui_select_10m3l_jlr8x_119:not(#\9) {
+.awsui_select_10m3l_ujfpz_119:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_token-content_10m3l_jlr8x_123:not(#\9) {
+.awsui_token-content_10m3l_ujfpz_123:not(#\9) {
   padding: var(--space-scaled-xxs-95dhkm, 4px) var(--space-field-horizontal-89h2yr, 12px);
 }
 
-.awsui_dismiss-button_10m3l_jlr8x_127:not(#\9) {
+.awsui_dismiss-button_10m3l_ujfpz_127:not(#\9) {
   width: 30px;
   margin: 0;
   border: none;
@@ -133,14 +133,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   background-color: transparent;
   border-left: var(--border-field-width-idlekx, 2px) solid var(--color-border-item-selected-ppkssz, #0972d3);
 }
-.awsui_dismiss-button_10m3l_jlr8x_127[data-awsui-focus-visible=true]:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_dismiss-button_10m3l_ujfpz_127:not(#\9):focus {
   position: relative;
 }
-.awsui_dismiss-button_10m3l_jlr8x_127[data-awsui-focus-visible=true]:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_dismiss-button_10m3l_ujfpz_127:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-filtering-token-dismiss-button-focus-outline-gutter-itb5fd, -5px) - 1px);
 }
-.awsui_dismiss-button_10m3l_jlr8x_127[data-awsui-focus-visible=true]:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_dismiss-button_10m3l_ujfpz_127:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -151,22 +151,22 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-radius: var(--border-radius-control-default-focus-ring-7661kz, 4px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
 }
-.awsui_dismiss-button_10m3l_jlr8x_127:not(#\9):focus {
+.awsui_dismiss-button_10m3l_ujfpz_127:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-.awsui_dismiss-button_10m3l_jlr8x_127:not(#\9):hover {
+.awsui_dismiss-button_10m3l_ujfpz_127:not(#\9):hover {
   cursor: pointer;
   color: var(--color-text-interactive-hover-v3lasm, #000716);
 }
 
-.awsui_token-disabled_10m3l_jlr8x_163:not(#\9) {
+.awsui_token-disabled_10m3l_ujfpz_163:not(#\9) {
   border-color: var(--color-border-control-disabled-vx8bco, #d1d5db);
   background-color: var(--color-background-container-content-i8i4a0, #ffffff);
   color: var(--color-text-disabled-a2nkh4, #9ba7b6);
   pointer-events: none;
 }
-.awsui_token-disabled_10m3l_jlr8x_163 > .awsui_dismiss-button_10m3l_jlr8x_127:not(#\9) {
+.awsui_token-disabled_10m3l_ujfpz_163 > .awsui_dismiss-button_10m3l_ujfpz_127:not(#\9) {
   color: var(--color-text-interactive-disabled-3pbb07, #9ba7b6);
   border-color: var(--color-border-control-disabled-vx8bco, #d1d5db);
 }

package/internal/components/filtering-token/styles.selectors.js

@@ -2,12 +2,12 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_10m3l_jlr8x_97",
-  "token": "awsui_token_10m3l_jlr8x_102",
-  "show-operation": "awsui_show-operation_10m3l_jlr8x_113",
-  "select": "awsui_select_10m3l_jlr8x_119",
-  "token-content": "awsui_token-content_10m3l_jlr8x_123",
-  "dismiss-button": "awsui_dismiss-button_10m3l_jlr8x_127",
-  "token-disabled": "awsui_token-disabled_10m3l_jlr8x_163"
+  "root": "awsui_root_10m3l_ujfpz_97",
+  "token": "awsui_token_10m3l_ujfpz_102",
+  "show-operation": "awsui_show-operation_10m3l_ujfpz_113",
+  "select": "awsui_select_10m3l_ujfpz_119",
+  "token-content": "awsui_token-content_10m3l_ujfpz_123",
+  "dismiss-button": "awsui_dismiss-button_10m3l_ujfpz_127",
+  "token-disabled": "awsui_token-disabled_10m3l_ujfpz_163"
 };
   

package/internal/components/menu-dropdown/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/components/menu-dropdown/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AASrE,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAE7B,eAAO,MAAM,aAAa,gFAuDzB,CAAC;AAEF,QAAA,MAAM,YAAY,+FAUf,iBAAiB,gBAgCnB,CAAC;AAGF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/components/menu-dropdown/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAQrE,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAE7B,eAAO,MAAM,aAAa,gFAqDzB,CAAC;AAEF,QAAA,MAAM,YAAY,+FAUf,iBAAiB,gBAgCnB,CAAC;AAGF,eAAe,YAAY,CAAC"}

package/internal/components/menu-dropdown/index.js

@@ -5,18 +5,16 @@ import clsx from 'clsx';
 import React from 'react';
 import { getBaseProps } from '../../base-component';
 import { applyDisplayName } from '../../utils/apply-display-name';
-import useFocusVisible from '../../hooks/focus-visible';
 import InternalButtonDropdown from '../../../button-dropdown/internal';
 import InternalIcon from '../../../icon/internal';
 import buttonDropdownStyles from '../../../button-dropdown/styles.css.js';
 import styles from './styles.css.js';
 export const ButtonTrigger = React.forwardRef(({ iconName, iconUrl, iconAlt, iconSvg, badge, ariaLabel, offsetRight, disabled, expanded, children, onClick, }, ref) => {
-    const focusVisible = useFocusVisible();
     const hasIcon = iconName || iconUrl || iconSvg;
-    return (React.createElement("button", Object.assign({}, focusVisible, { ref: ref, type: "button", className: clsx(styles.button, styles[`offset-right-${offsetRight}`], { [styles.expanded]: expanded }), "aria-label": ariaLabel, "aria-expanded": !!expanded, "aria-haspopup": true, disabled: disabled, onClick: event => {
+    return (React.createElement("button", { ref: ref, type: "button", className: clsx(styles.button, styles[`offset-right-${offsetRight}`], { [styles.expanded]: expanded }), "aria-label": ariaLabel, "aria-expanded": !!expanded, "aria-haspopup": true, disabled: disabled, onClick: event => {
             event.preventDefault();
             onClick && onClick();
-        } }),
+        } },
         hasIcon && (React.createElement(InternalIcon, { className: styles.icon, name: iconName, url: iconUrl, alt: iconAlt, svg: iconSvg, badge: badge })),
         children && React.createElement("span", { className: styles.text }, children),
         children && (React.createElement(InternalIcon, { name: "caret-down-filled", className: expanded ? buttonDropdownStyles['rotate-up'] : buttonDropdownStyles['rotate-down'] }))));

package/internal/components/menu-dropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/menu-dropdown/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\n\nimport { MenuDropdownProps, ButtonTriggerProps } from './interfaces';\nimport { getBaseProps } from '../../base-component';\nimport { applyDisplayName } from '../../utils/apply-display-name';\nimport useFocusVisible from '../../hooks/focus-visible';\nimport InternalButtonDropdown from '../../../button-dropdown/internal';\nimport InternalIcon from '../../../icon/internal';\nimport buttonDropdownStyles from '../../../button-dropdown/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { MenuDropdownProps };\n\nexport const ButtonTrigger = React.forwardRef(\n  (\n    {\n      iconName,\n      iconUrl,\n      iconAlt,\n      iconSvg,\n      badge,\n      ariaLabel,\n      offsetRight,\n      disabled,\n      expanded,\n      children,\n      onClick,\n    }: ButtonTriggerProps,\n    ref: React.Ref<any>\n  ) => {\n    const focusVisible = useFocusVisible();\n    const hasIcon = iconName || iconUrl || iconSvg;\n\n    return (\n      <button\n        {...focusVisible}\n        ref={ref}\n        type=\"button\"\n        className={clsx(styles.button, styles[`offset-right-${offsetRight}`], { [styles.expanded]: expanded })}\n        aria-label={ariaLabel}\n        aria-expanded={!!expanded}\n        aria-haspopup={true}\n        disabled={disabled}\n        onClick={event => {\n          event.preventDefault();\n          onClick && onClick();\n        }}\n      >\n        {hasIcon && (\n          <InternalIcon\n            className={styles.icon}\n            name={iconName}\n            url={iconUrl}\n            alt={iconAlt}\n            svg={iconSvg}\n            badge={badge}\n          />\n        )}\n        {children && <span className={styles.text}>{children}</span>}\n        {children && (\n          <InternalIcon\n            name=\"caret-down-filled\"\n            className={expanded ? buttonDropdownStyles['rotate-up'] : buttonDropdownStyles['rotate-down']}\n          />\n        )}\n      </button>\n    );\n  }\n);\n\nconst MenuDropdown = ({\n  iconName,\n  iconUrl,\n  iconAlt,\n  iconSvg,\n  badge,\n  ariaLabel,\n  offsetRight,\n  children,\n  ...props\n}: MenuDropdownProps) => {\n  const baseProps = getBaseProps(props);\n\n  const dropdownTrigger = (clickHandler: () => void, ref: React.Ref<any>, isDisabled: boolean, isExpanded: boolean) => {\n    return (\n      <ButtonTrigger\n        ref={ref}\n        disabled={isDisabled}\n        expanded={isExpanded}\n        iconName={iconName}\n        iconUrl={iconUrl}\n        iconAlt={iconAlt}\n        iconSvg={iconSvg}\n        badge={badge}\n        ariaLabel={ariaLabel}\n        offsetRight={offsetRight}\n        onClick={clickHandler}\n      >\n        {children}\n      </ButtonTrigger>\n    );\n  };\n\n  return (\n    <InternalButtonDropdown\n      {...baseProps}\n      {...props}\n      variant=\"navigation\"\n      customTriggerBuilder={dropdownTrigger}\n      preferCenter={true}\n    />\n  );\n};\n\napplyDisplayName(MenuDropdown, 'MenuDropdown');\nexport default MenuDropdown;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/menu-dropdown/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\n\nimport { MenuDropdownProps, ButtonTriggerProps } from './interfaces';\nimport { getBaseProps } from '../../base-component';\nimport { applyDisplayName } from '../../utils/apply-display-name';\nimport InternalButtonDropdown from '../../../button-dropdown/internal';\nimport InternalIcon from '../../../icon/internal';\nimport buttonDropdownStyles from '../../../button-dropdown/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { MenuDropdownProps };\n\nexport const ButtonTrigger = React.forwardRef(\n  (\n    {\n      iconName,\n      iconUrl,\n      iconAlt,\n      iconSvg,\n      badge,\n      ariaLabel,\n      offsetRight,\n      disabled,\n      expanded,\n      children,\n      onClick,\n    }: ButtonTriggerProps,\n    ref: React.Ref<any>\n  ) => {\n    const hasIcon = iconName || iconUrl || iconSvg;\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        className={clsx(styles.button, styles[`offset-right-${offsetRight}`], { [styles.expanded]: expanded })}\n        aria-label={ariaLabel}\n        aria-expanded={!!expanded}\n        aria-haspopup={true}\n        disabled={disabled}\n        onClick={event => {\n          event.preventDefault();\n          onClick && onClick();\n        }}\n      >\n        {hasIcon && (\n          <InternalIcon\n            className={styles.icon}\n            name={iconName}\n            url={iconUrl}\n            alt={iconAlt}\n            svg={iconSvg}\n            badge={badge}\n          />\n        )}\n        {children && <span className={styles.text}>{children}</span>}\n        {children && (\n          <InternalIcon\n            name=\"caret-down-filled\"\n            className={expanded ? buttonDropdownStyles['rotate-up'] : buttonDropdownStyles['rotate-down']}\n          />\n        )}\n      </button>\n    );\n  }\n);\n\nconst MenuDropdown = ({\n  iconName,\n  iconUrl,\n  iconAlt,\n  iconSvg,\n  badge,\n  ariaLabel,\n  offsetRight,\n  children,\n  ...props\n}: MenuDropdownProps) => {\n  const baseProps = getBaseProps(props);\n\n  const dropdownTrigger = (clickHandler: () => void, ref: React.Ref<any>, isDisabled: boolean, isExpanded: boolean) => {\n    return (\n      <ButtonTrigger\n        ref={ref}\n        disabled={isDisabled}\n        expanded={isExpanded}\n        iconName={iconName}\n        iconUrl={iconUrl}\n        iconAlt={iconAlt}\n        iconSvg={iconSvg}\n        badge={badge}\n        ariaLabel={ariaLabel}\n        offsetRight={offsetRight}\n        onClick={clickHandler}\n      >\n        {children}\n      </ButtonTrigger>\n    );\n  };\n\n  return (\n    <InternalButtonDropdown\n      {...baseProps}\n      {...props}\n      variant=\"navigation\"\n      customTriggerBuilder={dropdownTrigger}\n      preferCenter={true}\n    />\n  );\n};\n\napplyDisplayName(MenuDropdown, 'MenuDropdown');\nexport default MenuDropdown;\n"]}

package/internal/components/menu-dropdown/styles.css.js

@@ -1,12 +1,12 @@
 
     import './styles.scoped.css';
     export default {
-  "button": "awsui_button_m5h9f_5k6gw_93",
-  "expanded": "awsui_expanded_m5h9f_5k6gw_127",
-  "offset-right-none": "awsui_offset-right-none_m5h9f_5k6gw_138",
-  "offset-right-l": "awsui_offset-right-l_m5h9f_5k6gw_141",
-  "offset-right-xxl": "awsui_offset-right-xxl_m5h9f_5k6gw_144",
-  "text": "awsui_text_m5h9f_5k6gw_166",
-  "icon": "awsui_icon_m5h9f_5k6gw_170"
+  "button": "awsui_button_m5h9f_1yya9_93",
+  "expanded": "awsui_expanded_m5h9f_1yya9_127",
+  "offset-right-none": "awsui_offset-right-none_m5h9f_1yya9_138",
+  "offset-right-l": "awsui_offset-right-l_m5h9f_1yya9_141",
+  "offset-right-xxl": "awsui_offset-right-xxl_m5h9f_1yya9_144",
+  "text": "awsui_text_m5h9f_1yya9_166",
+  "icon": "awsui_icon_m5h9f_1yya9_170"
 };