npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.250 → 3.0.252 - Mend

@cloudscape-design/components-themeable 3.0.250 → 3.0.252

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (266) hide show

package/lib/internal/template/internal/components/chart-legend/index.js CHANGED Viewed

@@ -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/lib/internal/template/internal/components/chart-legend/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/chart-legend/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,~~eAAe,MAAM,2BAA2B,CAAC;AACxD,OAAO,~~WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,YAAuC,MAAM,wBAAwB,CAAC;AAC7E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAkBrC,eAAe,IAAI,CAAC,WAAW,CAAuB,CAAC;AAEvD,SAAS,WAAW,CAAI,EACtB,MAAM,EACN,iBAAiB,EACjB,iBAAiB,EACjB,WAAW,EACX,SAAS,EACT,gBAAgB,GACI;IACpB,MAAM,YAAY,GAAG,~~eAAe,EAAE,CAAC;IACvC,~~MAAM,~~YAAY,GAAG,MAAM,~~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~~6CACM~~,~~YAAY,IAChB,~~IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,KAAK,kBACI,aAAa,EAC3B,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;wBAC7B,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,EAAE,QAAQ;wBACpC,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAAE,aAAa;qBAC/C,CAAC,EACF,GAAG,EAAE,IAAI,CAAC,EAAE;wBACV,IAAI,IAAI,EAAE;4BACR,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;yBACnC;6BAAM;4BACL,OAAO,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;yBACnC;oBACH,CAAC,EACD,QAAQ,EACN,KAAK,KAAK,sBAAsB,IAAI,CAAC,sBAAsB,KAAK,SAAS,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAEpG,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,EACrC,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,EACrC,WAAW,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,EAC3C,YAAY,EAAE,gBAAgB;oBAE9B,oBAAC,YAAY,IAAC,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,GAAI;;oBAAE,CAAC,CAAC,KAAK,CACnD,CACP,CAAC;YACJ,CAAC,CAAC,CACE,CACF,CACL,CACJ,CAAC;AACJ,CAAC;AAED,SAAS,eAAe,CAAI,MAAyC,EAAE,YAAsB;IAC3F,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;QAClD,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,KAAK,YAAY,EAAE;YACxC,OAAO,KAAK,CAAC;SACd;KACF;IACD,OAAO,SAAS,CAAC;AACnB,CAAC","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"]}
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 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/lib/internal/template/internal/components/chart-legend/styles.css.js CHANGED Viewed

@@ -1,11 +1,11 @@
     import './styles.scoped.css';
     export default {
-  "marker": "awsui_marker_1kjc7_vd983_93",
-  "root": "awsui_root_1kjc7_vd983_111",
-  "title": "awsui_title_1kjc7_vd983_127",
-  "list": "awsui_list_1kjc7_vd983_131",
-  "marker--dimmed": "awsui_marker--dimmed_1kjc7_vd983_173",
-  "marker--highlighted": "awsui_marker--highlighted_1kjc7_vd983_176"
+  "marker": "awsui_marker_1kjc7_1fxtt_93",
+  "root": "awsui_root_1kjc7_1fxtt_111",
+  "title": "awsui_title_1kjc7_1fxtt_127",
+  "list": "awsui_list_1kjc7_1fxtt_131",
+  "marker--dimmed": "awsui_marker--dimmed_1kjc7_1fxtt_173",
+  "marker--highlighted": "awsui_marker--highlighted_1kjc7_1fxtt_176"
 };

package/lib/internal/template/internal/components/chart-legend/styles.scoped.css CHANGED Viewed

@@ -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_vd983_93:not(#\9) {
+.awsui_marker_1kjc7_1fxtt_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_vd983_93:not(#\9) {
+  .awsui_marker_1kjc7_1fxtt_93:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_marker_1kjc7_vd983_93:not(#\9), .awsui-mode-entering .awsui_marker_1kjc7_vd983_93:not(#\9) {
+.awsui-motion-disabled .awsui_marker_1kjc7_1fxtt_93:not(#\9), .awsui-mode-entering .awsui_marker_1kjc7_1fxtt_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_vd983_111:not(#\9) {
+.awsui_root_1kjc7_1fxtt_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_vd983_111:not(#\9):focus {
+.awsui_root_1kjc7_1fxtt_111:not(#\9):focus {
   outline: none;
 }
-.awsui_title_1kjc7_vd983_127:not(#\9) {
+.awsui_title_1kjc7_1fxtt_127:not(#\9) {
   /* used in test utils */
 }
-.awsui_list_1kjc7_vd983_131:not(#\9) {
+.awsui_list_1kjc7_1fxtt_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_vd983_93:not(#\9) {
+.awsui_marker_1kjc7_1fxtt_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_vd983_93:not(#\9):focus {
+.awsui_marker_1kjc7_1fxtt_93:not(#\9):focus {
   outline: none;
 }
-.awsui_marker_1kjc7_vd983_93[data-awsui-focus-visible=true]:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_marker_1kjc7_1fxtt_93:not(#\9):focus {
   position: relative;
 }
-.awsui_marker_1kjc7_vd983_93[data-awsui-focus-visible=true]:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_marker_1kjc7_1fxtt_93:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(2px - 1px);
 }
-.awsui_marker_1kjc7_vd983_93[data-awsui-focus-visible=true]:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_marker_1kjc7_1fxtt_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-hekmgc, 2px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-n5kd8g, #0073bb);
 }
-.awsui_marker_1kjc7_vd983_93:not(#\9):last-child {
+.awsui_marker_1kjc7_1fxtt_93:not(#\9):last-child {
   margin-right: 0;
 }
-.awsui_marker_1kjc7_vd983_93.awsui_marker--dimmed_1kjc7_vd983_173:not(#\9) {
+.awsui_marker_1kjc7_1fxtt_93.awsui_marker--dimmed_1kjc7_1fxtt_173:not(#\9) {
   opacity: 0.35;
 }
-.awsui_marker_1kjc7_vd983_93.awsui_marker--highlighted_1kjc7_vd983_176:not(#\9) {
+.awsui_marker_1kjc7_1fxtt_93.awsui_marker--highlighted_1kjc7_1fxtt_176:not(#\9) {
   /* used in test utils */
 }

package/lib/internal/template/internal/components/chart-legend/styles.selectors.js CHANGED Viewed

@@ -2,11 +2,11 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "marker": "awsui_marker_1kjc7_vd983_93",
-  "root": "awsui_root_1kjc7_vd983_111",
-  "title": "awsui_title_1kjc7_vd983_127",
-  "list": "awsui_list_1kjc7_vd983_131",
-  "marker--dimmed": "awsui_marker--dimmed_1kjc7_vd983_173",
-  "marker--highlighted": "awsui_marker--highlighted_1kjc7_vd983_176"
+  "marker": "awsui_marker_1kjc7_1fxtt_93",
+  "root": "awsui_root_1kjc7_1fxtt_111",
+  "title": "awsui_title_1kjc7_1fxtt_127",
+  "list": "awsui_list_1kjc7_1fxtt_131",
+  "marker--dimmed": "awsui_marker--dimmed_1kjc7_1fxtt_173",
+  "marker--highlighted": "awsui_marker--highlighted_1kjc7_1fxtt_176"
 };

package/lib/internal/template/internal/components/chart-plot/focus-outline.d.ts.map CHANGED Viewed

	@@ -1 +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"}
1	+ {"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/lib/internal/template/internal/components/chart-plot/focus-outline.js CHANGED Viewed

@@ -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/lib/internal/template/internal/components/chart-plot/focus-outline.js.map CHANGED Viewed

	@@ -1 +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"]}
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,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAQ1D,SAAS,oBAAoB;IAC3B,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,eAAe;YACtB,OAAO,eAAe,CAAC,KAAK,CAAC,CAAC;QAChC,CAAC;QAED,SAAS,aAAa,CAAC,KAAoB;YACzC,8CAA8C;YAC9C,gCAAgC;YAChC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE;gBACzB,eAAe,CAAC,IAAI,CAAC,CAAC;aACvB;QACH,CAAC;QAED,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;QACxD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACpD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;YAC3D,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACzD,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,YAAY,CAAC;AACtB,CAAC;AAED,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,YAAY,GAAG,oBAAoB,EAAE,CAAC;IAE5C,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, 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/lib/internal/template/internal/components/filtering-token/index.d.ts CHANGED Viewed

@@ -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/lib/internal/template/internal/components/filtering-token/index.d.ts.map CHANGED Viewed

	@@ -1 +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~~"}
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;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/lib/internal/template/internal/components/filtering-token/index.js CHANGED Viewed

@@ -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/lib/internal/template/internal/components/filtering-token/index.js.map CHANGED Viewed

	@@ -1 +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"]}
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;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/lib/internal/template/internal/components/filtering-token/styles.css.js CHANGED Viewed

@@ -1,12 +1,12 @@
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_10m3l_l33nj_97",
-  "token": "awsui_token_10m3l_l33nj_102",
-  "show-operation": "awsui_show-operation_10m3l_l33nj_113",
-  "select": "awsui_select_10m3l_l33nj_119",
-  "token-content": "awsui_token-content_10m3l_l33nj_123",
-  "dismiss-button": "awsui_dismiss-button_10m3l_l33nj_127",
-  "token-disabled": "awsui_token-disabled_10m3l_l33nj_163"
+  "root": "awsui_root_10m3l_ceye0_97",
+  "token": "awsui_token_10m3l_ceye0_102",
+  "show-operation": "awsui_show-operation_10m3l_ceye0_113",
+  "select": "awsui_select_10m3l_ceye0_119",
+  "token-content": "awsui_token-content_10m3l_ceye0_123",
+  "dismiss-button": "awsui_dismiss-button_10m3l_ceye0_127",
+  "token-disabled": "awsui_token-disabled_10m3l_ceye0_163"
 };

package/lib/internal/template/internal/components/filtering-token/styles.scoped.css CHANGED Viewed

@@ -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_l33nj_97:not(#\9) {
+.awsui_root_10m3l_ceye0_97:not(#\9) {
   display: flex;
   align-content: stretch;
 }
-.awsui_token_10m3l_l33nj_102:not(#\9) {
+.awsui_token_10m3l_ceye0_102:not(#\9) {
   border: var(--border-field-width-y6x4sn, 1px) solid var(--color-border-item-selected-pr9yuf, #00a1c9);
   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_l33nj_113:not(#\9) {
+.awsui_show-operation_10m3l_ceye0_113:not(#\9) {
   border-left: none;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-.awsui_select_10m3l_l33nj_119:not(#\9) {
+.awsui_select_10m3l_ceye0_119:not(#\9) {
   /* used in test-utils */
 }
-.awsui_token-content_10m3l_l33nj_123:not(#\9) {
+.awsui_token-content_10m3l_ceye0_123:not(#\9) {
   padding: var(--space-scaled-xxs-95dhkm, 4px) var(--space-field-horizontal-z3i1c8, 8px);
 }
-.awsui_dismiss-button_10m3l_l33nj_127:not(#\9) {
+.awsui_dismiss-button_10m3l_ceye0_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-y6x4sn, 1px) solid var(--color-border-item-selected-pr9yuf, #00a1c9);
 }
-.awsui_dismiss-button_10m3l_l33nj_127[data-awsui-focus-visible=true]:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_dismiss-button_10m3l_ceye0_127:not(#\9):focus {
   position: relative;
 }
-.awsui_dismiss-button_10m3l_l33nj_127[data-awsui-focus-visible=true]:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_dismiss-button_10m3l_ceye0_127:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-filtering-token-dismiss-button-focus-outline-gutter-25v038, 0px) - 1px);
 }
-.awsui_dismiss-button_10m3l_l33nj_127[data-awsui-focus-visible=true]:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_dismiss-button_10m3l_ceye0_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-hekmgc, 2px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-n5kd8g, #0073bb);
 }
-.awsui_dismiss-button_10m3l_l33nj_127:not(#\9):focus {
+.awsui_dismiss-button_10m3l_ceye0_127:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-.awsui_dismiss-button_10m3l_l33nj_127:not(#\9):hover {
+.awsui_dismiss-button_10m3l_ceye0_127:not(#\9):hover {
   cursor: pointer;
   color: var(--color-text-interactive-hover-79wpl9, #16191f);
 }
-.awsui_token-disabled_10m3l_l33nj_163:not(#\9) {
+.awsui_token-disabled_10m3l_ceye0_163:not(#\9) {
   border-color: var(--color-border-control-disabled-zgidl5, #d5dbdb);
   background-color: var(--color-background-container-content-o88wxm, #ffffff);
   color: var(--color-text-disabled-pjiy51, #aab7b8);
   pointer-events: none;
 }
-.awsui_token-disabled_10m3l_l33nj_163 > .awsui_dismiss-button_10m3l_l33nj_127:not(#\9) {
+.awsui_token-disabled_10m3l_ceye0_163 > .awsui_dismiss-button_10m3l_ceye0_127:not(#\9) {
   color: var(--color-text-interactive-disabled-jcikk2, #aab7b8);
   border-color: var(--color-border-control-disabled-zgidl5, #d5dbdb);
 }

package/lib/internal/template/internal/components/filtering-token/styles.selectors.js CHANGED Viewed

@@ -2,12 +2,12 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_10m3l_l33nj_97",
-  "token": "awsui_token_10m3l_l33nj_102",
-  "show-operation": "awsui_show-operation_10m3l_l33nj_113",
-  "select": "awsui_select_10m3l_l33nj_119",
-  "token-content": "awsui_token-content_10m3l_l33nj_123",
-  "dismiss-button": "awsui_dismiss-button_10m3l_l33nj_127",
-  "token-disabled": "awsui_token-disabled_10m3l_l33nj_163"
+  "root": "awsui_root_10m3l_ceye0_97",
+  "token": "awsui_token_10m3l_ceye0_102",
+  "show-operation": "awsui_show-operation_10m3l_ceye0_113",
+  "select": "awsui_select_10m3l_ceye0_119",
+  "token-content": "awsui_token-content_10m3l_ceye0_123",
+  "dismiss-button": "awsui_dismiss-button_10m3l_ceye0_127",
+  "token-disabled": "awsui_token-disabled_10m3l_ceye0_163"
 };

package/lib/internal/template/internal/components/menu-dropdown/index.d.ts.map CHANGED Viewed

	@@ -1 +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"}
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;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/lib/internal/template/internal/components/menu-dropdown/index.js CHANGED Viewed

@@ -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/lib/internal/template/internal/components/menu-dropdown/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/menu-dropdown/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,~~eAAe,MAAM,2BAA2B,CAAC;AACxD,OAAO,~~sBAAsB,MAAM,mCAAmC,CAAC;AACvE,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,oBAAoB,MAAM,wCAAwC,CAAC;AAC1E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAC3C,CACE,EACE,QAAQ,EACR,OAAO,EACP,OAAO,EACP,OAAO,EACP,KAAK,EACL,SAAS,EACT,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,OAAO,GACY,EACrB,GAAmB,EACnB,EAAE;IACF,MAAM,~~YAAY,GAAG,eAAe,EAAE,CAAC;IACvC,MAAM,~~OAAO,GAAG,QAAQ,IAAI,OAAO,IAAI,OAAO,CAAC;IAE/C,OAAO,CACL,~~gDACM~~,~~YAAY,IAChB,~~GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,gBAAgB,WAAW,EAAE,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC,gBAC1F,SAAS,mBACN,CAAC,CAAC,QAAQ,mBACV,IAAI,EACnB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,KAAK,CAAC,EAAE;YACf,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,OAAO,IAAI,OAAO,EAAE,CAAC;QACvB,CAAC;QAEA,OAAO,IAAI,CACV,oBAAC,YAAY,IACX,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,IAAI,EAAE,QAAQ,EACd,GAAG,EAAE,OAAO,EACZ,GAAG,EAAE,OAAO,EACZ,GAAG,EAAE,OAAO,EACZ,KAAK,EAAE,KAAK,GACZ,CACH;QACA,QAAQ,IAAI,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI,IAAG,QAAQ,CAAQ;QAC3D,QAAQ,IAAI,CACX,oBAAC,YAAY,IACX,IAAI,EAAC,mBAAmB,EACxB,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,oBAAoB,CAAC,aAAa,CAAC,GAC7F,CACH,CACM,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,EAUF,EAAE,EAAE;QAVF,EACpB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,OAAO,EACP,KAAK,EACL,SAAS,EACT,WAAW,EACX,QAAQ,OAEU,EADf,KAAK,cATY,8FAUrB,CADS;IAER,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IAEtC,MAAM,eAAe,GAAG,CAAC,YAAwB,EAAE,GAAmB,EAAE,UAAmB,EAAE,UAAmB,EAAE,EAAE;QAClH,OAAO,CACL,oBAAC,aAAa,IACZ,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,YAAY,IAEpB,QAAQ,CACK,CACjB,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,sBAAsB,oBACjB,SAAS,EACT,KAAK,IACT,OAAO,EAAC,YAAY,EACpB,oBAAoB,EAAE,eAAe,EACrC,YAAY,EAAE,IAAI,IAClB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;AAC/C,eAAe,YAAY,CAAC","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"]}
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 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/lib/internal/template/internal/components/menu-dropdown/styles.css.js CHANGED Viewed

@@ -1,12 +1,12 @@
     import './styles.scoped.css';
     export default {
-  "button": "awsui_button_m5h9f_6cnro_93",
-  "expanded": "awsui_expanded_m5h9f_6cnro_127",
-  "offset-right-none": "awsui_offset-right-none_m5h9f_6cnro_138",
-  "offset-right-l": "awsui_offset-right-l_m5h9f_6cnro_141",
-  "offset-right-xxl": "awsui_offset-right-xxl_m5h9f_6cnro_144",
-  "text": "awsui_text_m5h9f_6cnro_166",
-  "icon": "awsui_icon_m5h9f_6cnro_170"
+  "button": "awsui_button_m5h9f_1u666_93",
+  "expanded": "awsui_expanded_m5h9f_1u666_127",
+  "offset-right-none": "awsui_offset-right-none_m5h9f_1u666_138",
+  "offset-right-l": "awsui_offset-right-l_m5h9f_1u666_141",
+  "offset-right-xxl": "awsui_offset-right-xxl_m5h9f_1u666_144",
+  "text": "awsui_text_m5h9f_1u666_166",
+  "icon": "awsui_icon_m5h9f_1u666_170"
 };