@cloudscape-design/components 3.0.505 → 3.0.506

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 (74) hide show
  1. package/app-layout/visual-refresh/background.js +2 -2
  2. package/app-layout/visual-refresh/background.js.map +1 -1
  3. package/app-layout/visual-refresh/breadcrumbs.js +2 -2
  4. package/app-layout/visual-refresh/breadcrumbs.js.map +1 -1
  5. package/app-layout/visual-refresh/header.js +2 -2
  6. package/app-layout/visual-refresh/header.js.map +1 -1
  7. package/app-layout/visual-refresh/mobile-toolbar.js +2 -2
  8. package/app-layout/visual-refresh/mobile-toolbar.js.map +1 -1
  9. package/app-layout/visual-refresh/notifications.js +2 -2
  10. package/app-layout/visual-refresh/notifications.js.map +1 -1
  11. package/app-layout/visual-refresh/trigger-button.js +1 -1
  12. package/app-layout/visual-refresh/trigger-button.js.map +1 -1
  13. package/button-dropdown/category-elements/category-element.d.ts +1 -1
  14. package/button-dropdown/category-elements/category-element.d.ts.map +1 -1
  15. package/button-dropdown/category-elements/category-element.js +2 -2
  16. package/button-dropdown/category-elements/category-element.js.map +1 -1
  17. package/button-dropdown/category-elements/expandable-category-element.d.ts +1 -1
  18. package/button-dropdown/category-elements/expandable-category-element.d.ts.map +1 -1
  19. package/button-dropdown/category-elements/expandable-category-element.js +2 -2
  20. package/button-dropdown/category-elements/expandable-category-element.js.map +1 -1
  21. package/button-dropdown/category-elements/mobile-expandable-category-element.d.ts +1 -1
  22. package/button-dropdown/category-elements/mobile-expandable-category-element.d.ts.map +1 -1
  23. package/button-dropdown/category-elements/mobile-expandable-category-element.js +2 -2
  24. package/button-dropdown/category-elements/mobile-expandable-category-element.js.map +1 -1
  25. package/button-dropdown/category-elements/styles.css.js +13 -13
  26. package/button-dropdown/category-elements/styles.scoped.css +21 -32
  27. package/button-dropdown/category-elements/styles.selectors.js +13 -13
  28. package/button-dropdown/interfaces.d.ts +2 -0
  29. package/button-dropdown/interfaces.d.ts.map +1 -1
  30. package/button-dropdown/interfaces.js.map +1 -1
  31. package/button-dropdown/item-element/index.d.ts +1 -1
  32. package/button-dropdown/item-element/index.d.ts.map +1 -1
  33. package/button-dropdown/item-element/index.js +6 -1
  34. package/button-dropdown/item-element/index.js.map +1 -1
  35. package/button-dropdown/item-element/styles.css.js +16 -15
  36. package/button-dropdown/item-element/styles.scoped.css +18 -18
  37. package/button-dropdown/item-element/styles.selectors.js +16 -15
  38. package/button-dropdown/items-list.d.ts.map +1 -1
  39. package/button-dropdown/items-list.js +3 -3
  40. package/button-dropdown/items-list.js.map +1 -1
  41. package/cards/index.js +2 -2
  42. package/cards/index.js.map +1 -1
  43. package/container/internal.js +4 -4
  44. package/container/internal.js.map +1 -1
  45. package/content-layout/internal.js +3 -3
  46. package/content-layout/internal.js.map +1 -1
  47. package/expandable-section/styles.css.js +32 -32
  48. package/expandable-section/styles.scoped.css +63 -63
  49. package/expandable-section/styles.selectors.js +32 -32
  50. package/internal/components/dark-ribbon/index.js +2 -2
  51. package/internal/components/dark-ribbon/index.js.map +1 -1
  52. package/internal/environment.js +1 -1
  53. package/internal/environment.json +1 -1
  54. package/internal/manifest.json +1 -1
  55. package/internal/utils/content-header-utils.d.ts +2 -2
  56. package/internal/utils/content-header-utils.d.ts.map +1 -1
  57. package/internal/utils/content-header-utils.js +2 -2
  58. package/internal/utils/content-header-utils.js.map +1 -1
  59. package/package.json +1 -1
  60. package/split-panel/icons/bottom-icon-refresh.js +2 -2
  61. package/split-panel/icons/bottom-icon-refresh.js.map +1 -1
  62. package/split-panel/icons/side-position-refresh.js +2 -2
  63. package/split-panel/icons/side-position-refresh.js.map +1 -1
  64. package/table/internal.js +2 -2
  65. package/table/internal.js.map +1 -1
  66. package/top-navigation/interfaces.d.ts +2 -0
  67. package/top-navigation/interfaces.d.ts.map +1 -1
  68. package/top-navigation/interfaces.js.map +1 -1
  69. package/wizard/internal.js +4 -4
  70. package/wizard/internal.js.map +1 -1
  71. package/wizard/wizard-form-header.js +3 -3
  72. package/wizard/wizard-form-header.js.map +1 -1
  73. package/wizard/wizard-navigation.js +2 -2
  74. package/wizard/wizard-navigation.js.map +1 -1
@@ -2,7 +2,7 @@
2
2
  // SPDX-License-Identifier: Apache-2.0
3
3
  import React from 'react';
4
4
  import clsx from 'clsx';
5
- import { contentHeaderClassName } from '../../internal/utils/content-header-utils';
5
+ import { getContentHeaderClassName } from '../../internal/utils/content-header-utils';
6
6
  import { useAppLayoutInternals } from './context';
7
7
  import styles from './styles.css.js';
8
8
  export default function Background() {
@@ -10,7 +10,7 @@ export default function Background() {
10
10
  if (!hasNotificationsContent && (!breadcrumbs || isMobile) && !hasBackgroundOverlap) {
11
11
  return null;
12
12
  }
13
- return (React.createElement("div", { className: clsx(styles.background, contentHeaderClassName) },
13
+ return (React.createElement("div", { className: clsx(styles.background, getContentHeaderClassName()) },
14
14
  React.createElement("div", { className: styles['scrolling-background'] }),
15
15
  !isMobile && hasStickyBackground && (React.createElement("div", { className: clsx(styles['sticky-background'], {
16
16
  [styles['has-sticky-notifications']]: stickyNotifications,
@@ -1 +1 @@
1
- {"version":3,"file":"background.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/background.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,sBAAsB,EAAE,MAAM,2CAA2C,CAAC;AACnF,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,OAAO,UAAU,UAAU;IAChC,MAAM,EACJ,WAAW,EACX,oBAAoB,EACpB,uBAAuB,EACvB,mBAAmB,EACnB,QAAQ,EACR,mBAAmB,GACpB,GAAG,qBAAqB,EAAE,CAAC;IAE5B,IAAI,CAAC,uBAAuB,IAAI,CAAC,CAAC,WAAW,IAAI,QAAQ,CAAC,IAAI,CAAC,oBAAoB,EAAE;QACnF,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,sBAAsB,CAAC;QAC7D,6BAAK,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC,GAAI;QAEjD,CAAC,QAAQ,IAAI,mBAAmB,IAAI,CACnC,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,EAAE;gBAC3C,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,EAAE,mBAAmB;aAC1D,CAAC,GACF,CACH,CACG,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';\nimport { contentHeaderClassName } from '../../internal/utils/content-header-utils';\nimport { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\n\nexport default function Background() {\n const {\n breadcrumbs,\n hasBackgroundOverlap,\n hasNotificationsContent,\n hasStickyBackground,\n isMobile,\n stickyNotifications,\n } = useAppLayoutInternals();\n\n if (!hasNotificationsContent && (!breadcrumbs || isMobile) && !hasBackgroundOverlap) {\n return null;\n }\n\n return (\n <div className={clsx(styles.background, contentHeaderClassName)}>\n <div className={styles['scrolling-background']} />\n\n {!isMobile && hasStickyBackground && (\n <div\n className={clsx(styles['sticky-background'], {\n [styles['has-sticky-notifications']]: stickyNotifications,\n })}\n />\n )}\n </div>\n );\n}\n"]}
1
+ {"version":3,"file":"background.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/background.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAC;AACtF,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,OAAO,UAAU,UAAU;IAChC,MAAM,EACJ,WAAW,EACX,oBAAoB,EACpB,uBAAuB,EACvB,mBAAmB,EACnB,QAAQ,EACR,mBAAmB,GACpB,GAAG,qBAAqB,EAAE,CAAC;IAE5B,IAAI,CAAC,uBAAuB,IAAI,CAAC,CAAC,WAAW,IAAI,QAAQ,CAAC,IAAI,CAAC,oBAAoB,EAAE;QACnF,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,yBAAyB,EAAE,CAAC;QAClE,6BAAK,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC,GAAI;QAEjD,CAAC,QAAQ,IAAI,mBAAmB,IAAI,CACnC,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,EAAE;gBAC3C,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,EAAE,mBAAmB;aAC1D,CAAC,GACF,CACH,CACG,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';\nimport { getContentHeaderClassName } from '../../internal/utils/content-header-utils';\nimport { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\n\nexport default function Background() {\n const {\n breadcrumbs,\n hasBackgroundOverlap,\n hasNotificationsContent,\n hasStickyBackground,\n isMobile,\n stickyNotifications,\n } = useAppLayoutInternals();\n\n if (!hasNotificationsContent && (!breadcrumbs || isMobile) && !hasBackgroundOverlap) {\n return null;\n }\n\n return (\n <div className={clsx(styles.background, getContentHeaderClassName())}>\n <div className={styles['scrolling-background']} />\n\n {!isMobile && hasStickyBackground && (\n <div\n className={clsx(styles['sticky-background'], {\n [styles['has-sticky-notifications']]: stickyNotifications,\n })}\n />\n )}\n </div>\n );\n}\n"]}
@@ -2,7 +2,7 @@
2
2
  // SPDX-License-Identifier: Apache-2.0
3
3
  import React from 'react';
4
4
  import clsx from 'clsx';
5
- import { contentHeaderClassName } from '../../internal/utils/content-header-utils';
5
+ import { getContentHeaderClassName } from '../../internal/utils/content-header-utils';
6
6
  import { useAppLayoutInternals } from './context';
7
7
  import styles from './styles.css.js';
8
8
  import testutilStyles from '../test-classes/styles.css.js';
@@ -13,6 +13,6 @@ export default function Breadcrumbs() {
13
13
  }
14
14
  return (React.createElement("div", { className: clsx(styles.breadcrumbs, testutilStyles.breadcrumbs, {
15
15
  [styles['has-sticky-background']]: hasStickyBackground,
16
- }, contentHeaderClassName) }, breadcrumbs));
16
+ }, getContentHeaderClassName()) }, breadcrumbs));
17
17
  }
18
18
  //# sourceMappingURL=breadcrumbs.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"breadcrumbs.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/breadcrumbs.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,sBAAsB,EAAE,MAAM,2CAA2C,CAAC;AACnF,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAE3D,MAAM,CAAC,OAAO,UAAU,WAAW;IACjC,MAAM,EAAE,WAAW,EAAE,mBAAmB,EAAE,QAAQ,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAE/E,IAAI,QAAQ,IAAI,CAAC,WAAW,EAAE;QAC5B,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,WAAW,EAClB,cAAc,CAAC,WAAW,EAC1B;YACE,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,EAAE,mBAAmB;SACvD,EACD,sBAAsB,CACvB,IAEA,WAAW,CACR,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';\nimport { contentHeaderClassName } from '../../internal/utils/content-header-utils';\nimport { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\nexport default function Breadcrumbs() {\n const { breadcrumbs, hasStickyBackground, isMobile } = useAppLayoutInternals();\n\n if (isMobile || !breadcrumbs) {\n return null;\n }\n\n return (\n <div\n className={clsx(\n styles.breadcrumbs,\n testutilStyles.breadcrumbs,\n {\n [styles['has-sticky-background']]: hasStickyBackground,\n },\n contentHeaderClassName\n )}\n >\n {breadcrumbs}\n </div>\n );\n}\n"]}
1
+ {"version":3,"file":"breadcrumbs.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/breadcrumbs.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAC;AACtF,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAE3D,MAAM,CAAC,OAAO,UAAU,WAAW;IACjC,MAAM,EAAE,WAAW,EAAE,mBAAmB,EAAE,QAAQ,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAE/E,IAAI,QAAQ,IAAI,CAAC,WAAW,EAAE;QAC5B,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,WAAW,EAClB,cAAc,CAAC,WAAW,EAC1B;YACE,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,EAAE,mBAAmB;SACvD,EACD,yBAAyB,EAAE,CAC5B,IAEA,WAAW,CACR,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';\nimport { getContentHeaderClassName } from '../../internal/utils/content-header-utils';\nimport { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\nexport default function Breadcrumbs() {\n const { breadcrumbs, hasStickyBackground, isMobile } = useAppLayoutInternals();\n\n if (isMobile || !breadcrumbs) {\n return null;\n }\n\n return (\n <div\n className={clsx(\n styles.breadcrumbs,\n testutilStyles.breadcrumbs,\n {\n [styles['has-sticky-background']]: hasStickyBackground,\n },\n getContentHeaderClassName()\n )}\n >\n {breadcrumbs}\n </div>\n );\n}\n"]}
@@ -2,7 +2,7 @@
2
2
  // SPDX-License-Identifier: Apache-2.0
3
3
  import React from 'react';
4
4
  import clsx from 'clsx';
5
- import { contentHeaderClassName } from '../../internal/utils/content-header-utils';
5
+ import { getContentHeaderClassName } from '../../internal/utils/content-header-utils';
6
6
  import { useAppLayoutInternals } from './context';
7
7
  import styles from './styles.css.js';
8
8
  export default function Header() {
@@ -14,6 +14,6 @@ export default function Header() {
14
14
  [styles['has-breadcrumbs']]: breadcrumbs,
15
15
  [styles['has-notifications-content']]: hasNotificationsContent,
16
16
  [styles.unfocusable]: hasDrawerViewportOverlay,
17
- }, contentHeaderClassName) }, contentHeader));
17
+ }, getContentHeaderClassName()) }, contentHeader));
18
18
  }
19
19
  //# sourceMappingURL=header.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"header.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/header.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,sBAAsB,EAAE,MAAM,2CAA2C,CAAC;AACnF,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,OAAO,UAAU,MAAM;IAC5B,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,wBAAwB,EAAE,uBAAuB,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAElH,IAAI,CAAC,aAAa,EAAE;QAClB,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,gCACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,OAAO,EACd;YACE,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,WAAW;YACxC,CAAC,MAAM,CAAC,2BAA2B,CAAC,CAAC,EAAE,uBAAuB;YAC9D,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,wBAAwB;SAC/C,EACD,sBAAsB,CACvB,IAEA,aAAa,CACP,CACV,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';\nimport { contentHeaderClassName } from '../../internal/utils/content-header-utils';\nimport { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\n\nexport default function Header() {\n const { breadcrumbs, contentHeader, hasDrawerViewportOverlay, hasNotificationsContent } = useAppLayoutInternals();\n\n if (!contentHeader) {\n return null;\n }\n\n return (\n <header\n className={clsx(\n styles.content,\n {\n [styles['has-breadcrumbs']]: breadcrumbs,\n [styles['has-notifications-content']]: hasNotificationsContent,\n [styles.unfocusable]: hasDrawerViewportOverlay,\n },\n contentHeaderClassName\n )}\n >\n {contentHeader}\n </header>\n );\n}\n"]}
1
+ {"version":3,"file":"header.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/header.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAC;AACtF,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,OAAO,UAAU,MAAM;IAC5B,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,wBAAwB,EAAE,uBAAuB,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAElH,IAAI,CAAC,aAAa,EAAE;QAClB,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,gCACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,OAAO,EACd;YACE,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,WAAW;YACxC,CAAC,MAAM,CAAC,2BAA2B,CAAC,CAAC,EAAE,uBAAuB;YAC9D,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,wBAAwB;SAC/C,EACD,yBAAyB,EAAE,CAC5B,IAEA,aAAa,CACP,CACV,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';\nimport { getContentHeaderClassName } from '../../internal/utils/content-header-utils';\nimport { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\n\nexport default function Header() {\n const { breadcrumbs, contentHeader, hasDrawerViewportOverlay, hasNotificationsContent } = useAppLayoutInternals();\n\n if (!contentHeader) {\n return null;\n }\n\n return (\n <header\n className={clsx(\n styles.content,\n {\n [styles['has-breadcrumbs']]: breadcrumbs,\n [styles['has-notifications-content']]: hasNotificationsContent,\n [styles.unfocusable]: hasDrawerViewportOverlay,\n },\n getContentHeaderClassName()\n )}\n >\n {contentHeader}\n </header>\n );\n}\n"]}
@@ -2,7 +2,7 @@
2
2
  // SPDX-License-Identifier: Apache-2.0
3
3
  import React from 'react';
4
4
  import clsx from 'clsx';
5
- import { contentHeaderClassName } from '../../internal/utils/content-header-utils';
5
+ import { getContentHeaderClassName } from '../../internal/utils/content-header-utils';
6
6
  import { InternalButton } from '../../button/internal';
7
7
  import { MobileTriggers as DrawersMobileTriggers } from './drawers';
8
8
  import { useAppLayoutInternals } from './context';
@@ -20,7 +20,7 @@ export default function MobileToolbar() {
20
20
  return (React.createElement("section", { className: clsx(styles['mobile-toolbar'], [testutilStyles['mobile-bar']], {
21
21
  [styles['has-breadcrumbs']]: breadcrumbs,
22
22
  [styles.unfocusable]: hasDrawerViewportOverlay,
23
- }, testutilStyles['mobile-bar'], contentHeaderClassName, shouldRemoveHighContrastHeader && styles['remove-high-contrast-header']) },
23
+ }, testutilStyles['mobile-bar'], getContentHeaderClassName(), shouldRemoveHighContrastHeader() && styles['remove-high-contrast-header']) },
24
24
  !navigationHide && (React.createElement("nav", { "aria-hidden": isNavigationOpen, className: clsx(styles['mobile-toolbar-nav'], { [testutilStyles['drawer-closed']]: !isNavigationOpen }) },
25
25
  React.createElement(InternalButton, { ariaLabel: (_a = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigationToggle) !== null && _a !== void 0 ? _a : undefined, ariaExpanded: isNavigationOpen ? undefined : false, iconName: "menu", formAction: "none", onClick: () => handleNavigationClick(true), variant: "icon", className: testutilStyles['navigation-toggle'], ref: navigationRefs.toggle, disabled: hasDrawerViewportOverlay, __nativeAttributes: { 'aria-haspopup': isNavigationOpen ? undefined : true } }))),
26
26
  breadcrumbs && (React.createElement("div", { className: clsx(styles['mobile-toolbar-breadcrumbs'], testutilStyles.breadcrumbs) }, breadcrumbs)),
@@ -1 +1 @@
1
- {"version":3,"file":"mobile-toolbar.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/mobile-toolbar.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 from 'react';\nimport clsx from 'clsx';\nimport { contentHeaderClassName } from '../../internal/utils/content-header-utils';\nimport { InternalButton } from '../../button/internal';\nimport { MobileTriggers as DrawersMobileTriggers } from './drawers';\nimport { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { shouldRemoveHighContrastHeader } from '../../internal/utils/content-header-utils';\n\nexport default function MobileToolbar() {\n const {\n ariaLabels,\n breadcrumbs,\n drawers,\n handleNavigationClick,\n handleToolsClick,\n hasDrawerViewportOverlay,\n isMobile,\n isNavigationOpen,\n __embeddedViewMode,\n isToolsOpen,\n navigationHide,\n navigationRefs,\n toolsHide,\n toolsRefs,\n } = useAppLayoutInternals();\n\n if (\n !isMobile ||\n __embeddedViewMode ||\n (navigationHide && !breadcrumbs && toolsHide && (!drawers || drawers.length === 0))\n ) {\n return null;\n }\n\n return (\n <section\n className={clsx(\n styles['mobile-toolbar'],\n [testutilStyles['mobile-bar']],\n {\n [styles['has-breadcrumbs']]: breadcrumbs,\n [styles.unfocusable]: hasDrawerViewportOverlay,\n },\n testutilStyles['mobile-bar'],\n contentHeaderClassName,\n shouldRemoveHighContrastHeader && styles['remove-high-contrast-header']\n )}\n >\n {!navigationHide && (\n <nav\n aria-hidden={isNavigationOpen}\n className={clsx(styles['mobile-toolbar-nav'], { [testutilStyles['drawer-closed']]: !isNavigationOpen })}\n >\n <InternalButton\n ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n ariaExpanded={isNavigationOpen ? undefined : false}\n iconName=\"menu\"\n formAction=\"none\"\n onClick={() => handleNavigationClick(true)}\n variant=\"icon\"\n className={testutilStyles['navigation-toggle']}\n ref={navigationRefs.toggle}\n disabled={hasDrawerViewportOverlay}\n __nativeAttributes={{ 'aria-haspopup': isNavigationOpen ? undefined : true }}\n />\n </nav>\n )}\n\n {breadcrumbs && (\n <div className={clsx(styles['mobile-toolbar-breadcrumbs'], testutilStyles.breadcrumbs)}>{breadcrumbs}</div>\n )}\n\n {drawers ? (\n <DrawersMobileTriggers />\n ) : (\n !toolsHide && (\n <aside\n aria-hidden={isToolsOpen}\n aria-label={ariaLabels?.tools ?? undefined}\n className={clsx(styles['mobile-toolbar-tools'], { [testutilStyles['drawer-closed']]: !isToolsOpen })}\n >\n <InternalButton\n className={testutilStyles['tools-toggle']}\n ariaExpanded={isToolsOpen}\n disabled={hasDrawerViewportOverlay}\n ariaLabel={ariaLabels?.toolsToggle ?? undefined}\n iconName=\"status-info\"\n formAction=\"none\"\n onClick={() => handleToolsClick(true)}\n variant=\"icon\"\n ref={toolsRefs.toggle}\n __nativeAttributes={{ 'aria-haspopup': true }}\n />\n </aside>\n )\n )}\n </section>\n );\n}\n"]}
1
+ {"version":3,"file":"mobile-toolbar.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/mobile-toolbar.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 from 'react';\nimport clsx from 'clsx';\nimport { getContentHeaderClassName } from '../../internal/utils/content-header-utils';\nimport { InternalButton } from '../../button/internal';\nimport { MobileTriggers as DrawersMobileTriggers } from './drawers';\nimport { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { shouldRemoveHighContrastHeader } from '../../internal/utils/content-header-utils';\n\nexport default function MobileToolbar() {\n const {\n ariaLabels,\n breadcrumbs,\n drawers,\n handleNavigationClick,\n handleToolsClick,\n hasDrawerViewportOverlay,\n isMobile,\n isNavigationOpen,\n __embeddedViewMode,\n isToolsOpen,\n navigationHide,\n navigationRefs,\n toolsHide,\n toolsRefs,\n } = useAppLayoutInternals();\n\n if (\n !isMobile ||\n __embeddedViewMode ||\n (navigationHide && !breadcrumbs && toolsHide && (!drawers || drawers.length === 0))\n ) {\n return null;\n }\n\n return (\n <section\n className={clsx(\n styles['mobile-toolbar'],\n [testutilStyles['mobile-bar']],\n {\n [styles['has-breadcrumbs']]: breadcrumbs,\n [styles.unfocusable]: hasDrawerViewportOverlay,\n },\n testutilStyles['mobile-bar'],\n getContentHeaderClassName(),\n shouldRemoveHighContrastHeader() && styles['remove-high-contrast-header']\n )}\n >\n {!navigationHide && (\n <nav\n aria-hidden={isNavigationOpen}\n className={clsx(styles['mobile-toolbar-nav'], { [testutilStyles['drawer-closed']]: !isNavigationOpen })}\n >\n <InternalButton\n ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n ariaExpanded={isNavigationOpen ? undefined : false}\n iconName=\"menu\"\n formAction=\"none\"\n onClick={() => handleNavigationClick(true)}\n variant=\"icon\"\n className={testutilStyles['navigation-toggle']}\n ref={navigationRefs.toggle}\n disabled={hasDrawerViewportOverlay}\n __nativeAttributes={{ 'aria-haspopup': isNavigationOpen ? undefined : true }}\n />\n </nav>\n )}\n\n {breadcrumbs && (\n <div className={clsx(styles['mobile-toolbar-breadcrumbs'], testutilStyles.breadcrumbs)}>{breadcrumbs}</div>\n )}\n\n {drawers ? (\n <DrawersMobileTriggers />\n ) : (\n !toolsHide && (\n <aside\n aria-hidden={isToolsOpen}\n aria-label={ariaLabels?.tools ?? undefined}\n className={clsx(styles['mobile-toolbar-tools'], { [testutilStyles['drawer-closed']]: !isToolsOpen })}\n >\n <InternalButton\n className={testutilStyles['tools-toggle']}\n ariaExpanded={isToolsOpen}\n disabled={hasDrawerViewportOverlay}\n ariaLabel={ariaLabels?.toolsToggle ?? undefined}\n iconName=\"status-info\"\n formAction=\"none\"\n onClick={() => handleToolsClick(true)}\n variant=\"icon\"\n ref={toolsRefs.toggle}\n __nativeAttributes={{ 'aria-haspopup': true }}\n />\n </aside>\n )\n )}\n </section>\n );\n}\n"]}
@@ -2,7 +2,7 @@
2
2
  // SPDX-License-Identifier: Apache-2.0
3
3
  import React from 'react';
4
4
  import clsx from 'clsx';
5
- import { contentHeaderClassName } from '../../internal/utils/content-header-utils';
5
+ import { getContentHeaderClassName } from '../../internal/utils/content-header-utils';
6
6
  import { useAppLayoutInternals } from './context';
7
7
  import styles from './styles.css.js';
8
8
  import testutilStyles from '../test-classes/styles.css.js';
@@ -19,7 +19,7 @@ export default function Notifications() {
19
19
  return (React.createElement("div", { role: "region", "aria-label": (_a = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.notifications) !== null && _a !== void 0 ? _a : undefined, className: clsx(styles.notifications, {
20
20
  [styles['sticky-notifications']]: stickyNotifications,
21
21
  [styles.unfocusable]: hasDrawerViewportOverlay,
22
- }, testutilStyles.notifications, contentHeaderClassName) },
22
+ }, testutilStyles.notifications, getContentHeaderClassName()) },
23
23
  React.createElement("div", { ref: notificationsElement }, notifications)));
24
24
  }
25
25
  //# sourceMappingURL=notifications.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"notifications.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/notifications.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,sBAAsB,EAAE,MAAM,2CAA2C,CAAC;AACnF,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAE3D,MAAM,CAAC,OAAO,UAAU,aAAa;;IACnC,MAAM,EAAE,UAAU,EAAE,wBAAwB,EAAE,aAAa,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,GACtG,qBAAqB,EAAE,CAAC;IAE1B,IAAI,CAAC,aAAa,EAAE;QAClB,OAAO,IAAI,CAAC;KACb;IAED;;;OAGG;IACH,OAAO,CACL,6BACE,IAAI,EAAC,QAAQ,gBACD,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,aAAa,mCAAI,SAAS,EAClD,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,aAAa,EACpB;YACE,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC,EAAE,mBAAmB;YACrD,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,wBAAwB;SAC/C,EACD,cAAc,CAAC,aAAa,EAC5B,sBAAsB,CACvB;QAED,6BAAK,GAAG,EAAE,oBAAoB,IAAG,aAAa,CAAO,CACjD,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';\nimport { contentHeaderClassName } from '../../internal/utils/content-header-utils';\nimport { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\nexport default function Notifications() {\n const { ariaLabels, hasDrawerViewportOverlay, notifications, notificationsElement, stickyNotifications } =\n useAppLayoutInternals();\n\n if (!notifications) {\n return null;\n }\n\n /**\n * The notificationsElement ref is assigned to an inner div to prevent internal bottom margin\n * from affecting the calculated height, which is used for sticky elements below.\n */\n return (\n <div\n role=\"region\"\n aria-label={ariaLabels?.notifications ?? undefined}\n className={clsx(\n styles.notifications,\n {\n [styles['sticky-notifications']]: stickyNotifications,\n [styles.unfocusable]: hasDrawerViewportOverlay,\n },\n testutilStyles.notifications,\n contentHeaderClassName\n )}\n >\n <div ref={notificationsElement}>{notifications}</div>\n </div>\n );\n}\n"]}
1
+ {"version":3,"file":"notifications.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/notifications.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAC;AACtF,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAE3D,MAAM,CAAC,OAAO,UAAU,aAAa;;IACnC,MAAM,EAAE,UAAU,EAAE,wBAAwB,EAAE,aAAa,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,GACtG,qBAAqB,EAAE,CAAC;IAE1B,IAAI,CAAC,aAAa,EAAE;QAClB,OAAO,IAAI,CAAC;KACb;IAED;;;OAGG;IACH,OAAO,CACL,6BACE,IAAI,EAAC,QAAQ,gBACD,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,aAAa,mCAAI,SAAS,EAClD,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,aAAa,EACpB;YACE,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC,EAAE,mBAAmB;YACrD,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,wBAAwB;SAC/C,EACD,cAAc,CAAC,aAAa,EAC5B,yBAAyB,EAAE,CAC5B;QAED,6BAAK,GAAG,EAAE,oBAAoB,IAAG,aAAa,CAAO,CACjD,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';\nimport { getContentHeaderClassName } from '../../internal/utils/content-header-utils';\nimport { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\nexport default function Notifications() {\n const { ariaLabels, hasDrawerViewportOverlay, notifications, notificationsElement, stickyNotifications } =\n useAppLayoutInternals();\n\n if (!notifications) {\n return null;\n }\n\n /**\n * The notificationsElement ref is assigned to an inner div to prevent internal bottom margin\n * from affecting the calculated height, which is used for sticky elements below.\n */\n return (\n <div\n role=\"region\"\n aria-label={ariaLabels?.notifications ?? undefined}\n className={clsx(\n styles.notifications,\n {\n [styles['sticky-notifications']]: stickyNotifications,\n [styles.unfocusable]: hasDrawerViewportOverlay,\n },\n testutilStyles.notifications,\n getContentHeaderClassName()\n )}\n >\n <div ref={notificationsElement}>{notifications}</div>\n </div>\n );\n}\n"]}
@@ -6,7 +6,7 @@ import Icon from '../../icon/internal';
6
6
  import styles from './styles.css.js';
7
7
  import { shouldRemoveHighContrastHeader } from '../../internal/utils/content-header-utils';
8
8
  function TriggerButton({ ariaLabel, className, iconName, iconSvg, ariaExpanded, ariaControls, onClick, testId, badge, selected = false, }, ref) {
9
- return (React.createElement("div", { className: clsx(styles['trigger-wrapper'], shouldRemoveHighContrastHeader && styles['remove-high-contrast-header']) },
9
+ return (React.createElement("div", { className: clsx(styles['trigger-wrapper'], shouldRemoveHighContrastHeader() && styles['remove-high-contrast-header']) },
10
10
  React.createElement("button", { "aria-expanded": ariaExpanded, "aria-controls": ariaControls, "aria-haspopup": true, "aria-label": ariaLabel, className: clsx(styles.trigger, {
11
11
  [styles.selected]: selected,
12
12
  [styles.badge]: badge,
@@ -1 +1 @@
1
- {"version":3,"file":"trigger-button.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/trigger-button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,IAAI,MAAM,qBAAqB,CAAC;AACvC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,EAAE,8BAA8B,EAAE,MAAM,2CAA2C,CAAC;AAe3F,SAAS,aAAa,CACpB,EACE,SAAS,EACT,SAAS,EACT,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,KAAK,EACL,QAAQ,GAAG,KAAK,GACG,EACrB,GAA+B;IAE/B,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,iBAAiB,CAAC,EACzB,8BAA8B,IAAI,MAAM,CAAC,6BAA6B,CAAC,CACxE;QAED,iDACiB,YAAY,mBACZ,YAAY,mBACZ,IAAI,gBACP,SAAS,EACrB,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,OAAO,EACd;gBACE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;gBAC3B,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,KAAK;aACtB,EACD,SAAS,CACV,EACD,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAmC,EACxC,IAAI,EAAC,QAAQ,iBACA,MAAM;YAEnB,8BAAM,SAAS,EAAE,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC,uBAAuB,CAAC,CAAC;gBAC7D,oBAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,OAAO,GAAI,CACjC,CACA;QACR,KAAK,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,GAAI,CAC1C,CACP,CAAC;AACJ,CAAC;AAED,eAAe,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,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';\nimport Icon from '../../icon/internal';\nimport styles from './styles.css.js';\nimport { ButtonProps } from '../../button/interfaces';\nimport { IconProps } from '../../icon/interfaces';\nimport { shouldRemoveHighContrastHeader } from '../../internal/utils/content-header-utils';\n\nexport interface TriggerButtonProps {\n ariaLabel?: string;\n className?: string;\n iconName?: IconProps.Name;\n iconSvg?: React.ReactNode;\n ariaExpanded: boolean | undefined;\n ariaControls?: string;\n testId?: string;\n onClick: React.MouseEventHandler<HTMLButtonElement>;\n selected?: boolean;\n badge?: boolean;\n}\n\nfunction TriggerButton(\n {\n ariaLabel,\n className,\n iconName,\n iconSvg,\n ariaExpanded,\n ariaControls,\n onClick,\n testId,\n badge,\n selected = false,\n }: TriggerButtonProps,\n ref: React.Ref<ButtonProps.Ref>\n) {\n return (\n <div\n className={clsx(\n styles['trigger-wrapper'],\n shouldRemoveHighContrastHeader && styles['remove-high-contrast-header']\n )}\n >\n <button\n aria-expanded={ariaExpanded}\n aria-controls={ariaControls}\n aria-haspopup={true}\n aria-label={ariaLabel}\n className={clsx(\n styles.trigger,\n {\n [styles.selected]: selected,\n [styles.badge]: badge,\n },\n className\n )}\n onClick={onClick}\n ref={ref as React.Ref<HTMLButtonElement>}\n type=\"button\"\n data-testid={testId}\n >\n <span className={clsx(badge && styles['trigger-badge-wrapper'])}>\n <Icon name={iconName} svg={iconSvg} />\n </span>\n </button>\n {badge && <div className={clsx(styles.dot)} />}\n </div>\n );\n}\n\nexport default React.forwardRef(TriggerButton);\n"]}
1
+ {"version":3,"file":"trigger-button.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/trigger-button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,IAAI,MAAM,qBAAqB,CAAC;AACvC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,EAAE,8BAA8B,EAAE,MAAM,2CAA2C,CAAC;AAe3F,SAAS,aAAa,CACpB,EACE,SAAS,EACT,SAAS,EACT,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,KAAK,EACL,QAAQ,GAAG,KAAK,GACG,EACrB,GAA+B;IAE/B,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,iBAAiB,CAAC,EACzB,8BAA8B,EAAE,IAAI,MAAM,CAAC,6BAA6B,CAAC,CAC1E;QAED,iDACiB,YAAY,mBACZ,YAAY,mBACZ,IAAI,gBACP,SAAS,EACrB,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,OAAO,EACd;gBACE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;gBAC3B,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,KAAK;aACtB,EACD,SAAS,CACV,EACD,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAmC,EACxC,IAAI,EAAC,QAAQ,iBACA,MAAM;YAEnB,8BAAM,SAAS,EAAE,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC,uBAAuB,CAAC,CAAC;gBAC7D,oBAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,OAAO,GAAI,CACjC,CACA;QACR,KAAK,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,GAAI,CAC1C,CACP,CAAC;AACJ,CAAC;AAED,eAAe,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,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';\nimport Icon from '../../icon/internal';\nimport styles from './styles.css.js';\nimport { ButtonProps } from '../../button/interfaces';\nimport { IconProps } from '../../icon/interfaces';\nimport { shouldRemoveHighContrastHeader } from '../../internal/utils/content-header-utils';\n\nexport interface TriggerButtonProps {\n ariaLabel?: string;\n className?: string;\n iconName?: IconProps.Name;\n iconSvg?: React.ReactNode;\n ariaExpanded: boolean | undefined;\n ariaControls?: string;\n testId?: string;\n onClick: React.MouseEventHandler<HTMLButtonElement>;\n selected?: boolean;\n badge?: boolean;\n}\n\nfunction TriggerButton(\n {\n ariaLabel,\n className,\n iconName,\n iconSvg,\n ariaExpanded,\n ariaControls,\n onClick,\n testId,\n badge,\n selected = false,\n }: TriggerButtonProps,\n ref: React.Ref<ButtonProps.Ref>\n) {\n return (\n <div\n className={clsx(\n styles['trigger-wrapper'],\n shouldRemoveHighContrastHeader() && styles['remove-high-contrast-header']\n )}\n >\n <button\n aria-expanded={ariaExpanded}\n aria-controls={ariaControls}\n aria-haspopup={true}\n aria-label={ariaLabel}\n className={clsx(\n styles.trigger,\n {\n [styles.selected]: selected,\n [styles.badge]: badge,\n },\n className\n )}\n onClick={onClick}\n ref={ref as React.Ref<HTMLButtonElement>}\n type=\"button\"\n data-testid={testId}\n >\n <span className={clsx(badge && styles['trigger-badge-wrapper'])}>\n <Icon name={iconName} svg={iconSvg} />\n </span>\n </button>\n {badge && <div className={clsx(styles.dot)} />}\n </div>\n );\n}\n\nexport default React.forwardRef(TriggerButton);\n"]}
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
2
  import { CategoryProps } from '../interfaces';
3
- declare const CategoryElement: ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, highlightItem, disabled, variant, }: CategoryProps) => JSX.Element;
3
+ declare const CategoryElement: ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, highlightItem, disabled, variant, hasExpandableGroups, }: CategoryProps) => JSX.Element;
4
4
  export default CategoryElement;
5
5
  //# sourceMappingURL=category-element.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"category-element.d.ts","sourceRoot":"lib/default/","sources":["button-dropdown/category-elements/category-element.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAM9C,QAAA,MAAM,eAAe,2IAWlB,aAAa,gBAiCf,CAAC;AAEF,eAAe,eAAe,CAAC"}
1
+ {"version":3,"file":"category-element.d.ts","sourceRoot":"lib/default/","sources":["button-dropdown/category-elements/category-element.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAM9C,QAAA,MAAM,eAAe,gKAYlB,aAAa,gBAkCf,CAAC;AAEF,eAAe,eAAe,CAAC"}
@@ -2,12 +2,12 @@ import React from 'react';
2
2
  import clsx from 'clsx';
3
3
  import styles from './styles.css.js';
4
4
  import ItemsList from '../items-list';
5
- const CategoryElement = ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, highlightItem, disabled, variant, }) => {
5
+ const CategoryElement = ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, highlightItem, disabled, variant, hasExpandableGroups, }) => {
6
6
  // Hide the category title element from screen readers because it will be
7
7
  // provided as an ARIA label.
8
8
  return (React.createElement("li", { className: clsx(styles.category, styles[`variant-${variant}`], disabled && styles.disabled), role: "presentation", "aria-disabled": disabled ? 'true' : undefined },
9
9
  item.text && (React.createElement("p", { className: clsx(styles.header, { [styles.disabled]: disabled }), "aria-hidden": "true" }, item.text)),
10
- React.createElement("ul", { className: clsx(styles['items-list-container']), role: "group", "aria-label": item.text }, item.items && (React.createElement(ItemsList, { items: item.items, onItemActivate: onItemActivate, onGroupToggle: onGroupToggle, targetItem: targetItem, isHighlighted: isHighlighted, isKeyboardHighlight: isKeyboardHighlight, isExpanded: isExpanded, highlightItem: highlightItem, categoryDisabled: disabled, hasCategoryHeader: !!item.text, variant: variant })))));
10
+ React.createElement("ul", { className: clsx(styles['items-list-container']), role: "group", "aria-label": item.text }, item.items && (React.createElement(ItemsList, { items: item.items, onItemActivate: onItemActivate, onGroupToggle: onGroupToggle, targetItem: targetItem, isHighlighted: isHighlighted, isKeyboardHighlight: isKeyboardHighlight, isExpanded: isExpanded, highlightItem: highlightItem, categoryDisabled: disabled, hasCategoryHeader: !!item.text, variant: variant, hasExpandableGroups: hasExpandableGroups })))));
11
11
  };
12
12
  export default CategoryElement;
13
13
  //# sourceMappingURL=category-element.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"category-element.js","sourceRoot":"lib/default/","sources":["button-dropdown/category-elements/category-element.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,eAAe,CAAC;AAEtC,MAAM,eAAe,GAAG,CAAC,EACvB,IAAI,EACJ,cAAc,EACd,aAAa,EACb,UAAU,EACV,aAAa,EACb,mBAAmB,EACnB,UAAU,EACV,aAAa,EACb,QAAQ,EACR,OAAO,GACO,EAAE,EAAE;IAClB,yEAAyE;IACzE,6BAA6B;IAC7B,OAAO,CACL,4BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,WAAW,OAAO,EAAE,CAAC,EAAE,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,EAC3F,IAAI,EAAC,cAAc,mBACJ,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;QAE3C,IAAI,CAAC,IAAI,IAAI,CACZ,2BAAG,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC,iBAAc,MAAM,IACnF,IAAI,CAAC,IAAI,CACR,CACL;QACD,4BAAI,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC,EAAE,IAAI,EAAC,OAAO,gBAAa,IAAI,CAAC,IAAI,IACpF,IAAI,CAAC,KAAK,IAAI,CACb,oBAAC,SAAS,IACR,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,mBAAmB,EAAE,mBAAmB,EACxC,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,QAAQ,EAC1B,iBAAiB,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,EAC9B,OAAO,EAAE,OAAO,GAChB,CACH,CACE,CACF,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { CategoryProps } from '../interfaces';\nimport React from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport ItemsList from '../items-list';\n\nconst CategoryElement = ({\n item,\n onItemActivate,\n onGroupToggle,\n targetItem,\n isHighlighted,\n isKeyboardHighlight,\n isExpanded,\n highlightItem,\n disabled,\n variant,\n}: CategoryProps) => {\n // Hide the category title element from screen readers because it will be\n // provided as an ARIA label.\n return (\n <li\n className={clsx(styles.category, styles[`variant-${variant}`], disabled && styles.disabled)}\n role=\"presentation\"\n aria-disabled={disabled ? 'true' : undefined}\n >\n {item.text && (\n <p className={clsx(styles.header, { [styles.disabled]: disabled })} aria-hidden=\"true\">\n {item.text}\n </p>\n )}\n <ul className={clsx(styles['items-list-container'])} role=\"group\" aria-label={item.text}>\n {item.items && (\n <ItemsList\n items={item.items}\n onItemActivate={onItemActivate}\n onGroupToggle={onGroupToggle}\n targetItem={targetItem}\n isHighlighted={isHighlighted}\n isKeyboardHighlight={isKeyboardHighlight}\n isExpanded={isExpanded}\n highlightItem={highlightItem}\n categoryDisabled={disabled}\n hasCategoryHeader={!!item.text}\n variant={variant}\n />\n )}\n </ul>\n </li>\n );\n};\n\nexport default CategoryElement;\n"]}
1
+ {"version":3,"file":"category-element.js","sourceRoot":"lib/default/","sources":["button-dropdown/category-elements/category-element.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,eAAe,CAAC;AAEtC,MAAM,eAAe,GAAG,CAAC,EACvB,IAAI,EACJ,cAAc,EACd,aAAa,EACb,UAAU,EACV,aAAa,EACb,mBAAmB,EACnB,UAAU,EACV,aAAa,EACb,QAAQ,EACR,OAAO,EACP,mBAAmB,GACL,EAAE,EAAE;IAClB,yEAAyE;IACzE,6BAA6B;IAC7B,OAAO,CACL,4BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,WAAW,OAAO,EAAE,CAAC,EAAE,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,EAC3F,IAAI,EAAC,cAAc,mBACJ,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;QAE3C,IAAI,CAAC,IAAI,IAAI,CACZ,2BAAG,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC,iBAAc,MAAM,IACnF,IAAI,CAAC,IAAI,CACR,CACL;QACD,4BAAI,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC,EAAE,IAAI,EAAC,OAAO,gBAAa,IAAI,CAAC,IAAI,IACpF,IAAI,CAAC,KAAK,IAAI,CACb,oBAAC,SAAS,IACR,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,mBAAmB,EAAE,mBAAmB,EACxC,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,QAAQ,EAC1B,iBAAiB,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,EAC9B,OAAO,EAAE,OAAO,EAChB,mBAAmB,EAAE,mBAAmB,GACxC,CACH,CACE,CACF,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { CategoryProps } from '../interfaces';\nimport React from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport ItemsList from '../items-list';\n\nconst CategoryElement = ({\n item,\n onItemActivate,\n onGroupToggle,\n targetItem,\n isHighlighted,\n isKeyboardHighlight,\n isExpanded,\n highlightItem,\n disabled,\n variant,\n hasExpandableGroups,\n}: CategoryProps) => {\n // Hide the category title element from screen readers because it will be\n // provided as an ARIA label.\n return (\n <li\n className={clsx(styles.category, styles[`variant-${variant}`], disabled && styles.disabled)}\n role=\"presentation\"\n aria-disabled={disabled ? 'true' : undefined}\n >\n {item.text && (\n <p className={clsx(styles.header, { [styles.disabled]: disabled })} aria-hidden=\"true\">\n {item.text}\n </p>\n )}\n <ul className={clsx(styles['items-list-container'])} role=\"group\" aria-label={item.text}>\n {item.items && (\n <ItemsList\n items={item.items}\n onItemActivate={onItemActivate}\n onGroupToggle={onGroupToggle}\n targetItem={targetItem}\n isHighlighted={isHighlighted}\n isKeyboardHighlight={isKeyboardHighlight}\n isExpanded={isExpanded}\n highlightItem={highlightItem}\n categoryDisabled={disabled}\n hasCategoryHeader={!!item.text}\n variant={variant}\n hasExpandableGroups={hasExpandableGroups}\n />\n )}\n </ul>\n </li>\n );\n};\n\nexport default CategoryElement;\n"]}
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
2
  import { CategoryProps } from '../interfaces';
3
- declare const ExpandableCategoryElement: ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, highlightItem, disabled, expandToViewport, variant, }: CategoryProps) => JSX.Element;
3
+ declare const ExpandableCategoryElement: ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, highlightItem, disabled, expandToViewport, variant, hasExpandableGroups, }: CategoryProps) => JSX.Element;
4
4
  export default ExpandableCategoryElement;
5
5
  //# sourceMappingURL=expandable-category-element.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"expandable-category-element.d.ts","sourceRoot":"lib/default/","sources":["button-dropdown/category-elements/expandable-category-element.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAK9C,QAAA,MAAM,yBAAyB,6JAY5B,aAAa,gBA0Gf,CAAC;AAEF,eAAe,yBAAyB,CAAC"}
1
+ {"version":3,"file":"expandable-category-element.d.ts","sourceRoot":"lib/default/","sources":["button-dropdown/category-elements/expandable-category-element.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAK9C,QAAA,MAAM,yBAAyB,kLAa5B,aAAa,gBA2Gf,CAAC;AAEF,eAAe,yBAAyB,CAAC"}
@@ -9,7 +9,7 @@ import Dropdown from '../../internal/components/dropdown';
9
9
  import useHiddenDescription from '../utils/use-hidden-description';
10
10
  import Tooltip from '../tooltip.js';
11
11
  import { getMenuItemProps } from '../utils/menu-item';
12
- const ExpandableCategoryElement = ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, highlightItem, disabled, expandToViewport, variant, }) => {
12
+ const ExpandableCategoryElement = ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, highlightItem, disabled, expandToViewport, variant, hasExpandableGroups, }) => {
13
13
  const highlighted = isHighlighted(item);
14
14
  const expanded = isExpanded(item);
15
15
  const isKeyboardHighlighted = isKeyboardHighlight(item);
@@ -58,7 +58,7 @@ const ExpandableCategoryElement = ({ item, onItemActivate, onGroupToggle, target
58
58
  }
59
59
  else {
60
60
  content = (React.createElement(Dropdown, { open: expanded, stretchWidth: false, interior: true, expandToViewport: expandToViewport, trigger: trigger }, item.items && expanded && (React.createElement("ul", { role: "menu", "aria-label": item.text, className: clsx(styles['items-list-container']) },
61
- React.createElement(ItemsList, { items: item.items, onItemActivate: onItemActivate, onGroupToggle: onGroupToggle, targetItem: targetItem, isHighlighted: isHighlighted, isKeyboardHighlight: isKeyboardHighlight, isExpanded: isExpanded, highlightItem: highlightItem, variant: variant })))));
61
+ React.createElement(ItemsList, { items: item.items, onItemActivate: onItemActivate, onGroupToggle: onGroupToggle, targetItem: targetItem, isHighlighted: isHighlighted, isKeyboardHighlight: isKeyboardHighlight, isExpanded: isExpanded, highlightItem: highlightItem, variant: variant, hasExpandableGroups: hasExpandableGroups })))));
62
62
  }
63
63
  return (React.createElement("li", { className: clsx(styles.category, styles[`variant-${variant}`], styles.expandable, {
64
64
  [styles.expanded]: expanded,
@@ -1 +1 @@
1
- {"version":3,"file":"expandable-category-element.js","sourceRoot":"lib/default/","sources":["button-dropdown/category-elements/expandable-category-element.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 } from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\n\nimport InternalIcon from '../../icon/internal';\nimport ItemsList from '../items-list';\nimport Dropdown from '../../internal/components/dropdown';\nimport { CategoryProps } from '../interfaces';\nimport useHiddenDescription from '../utils/use-hidden-description';\nimport Tooltip from '../tooltip.js';\nimport { getMenuItemProps } from '../utils/menu-item';\n\nconst ExpandableCategoryElement = ({\n item,\n onItemActivate,\n onGroupToggle,\n targetItem,\n isHighlighted,\n isKeyboardHighlight,\n isExpanded,\n highlightItem,\n disabled,\n expandToViewport,\n variant,\n}: CategoryProps) => {\n const highlighted = isHighlighted(item);\n const expanded = isExpanded(item);\n const isKeyboardHighlighted = isKeyboardHighlight(item);\n const triggerRef = React.useRef<HTMLSpanElement>(null);\n const ref = useRef<HTMLLIElement>(null);\n\n useEffect(() => {\n if (triggerRef.current && highlighted && !expanded) {\n triggerRef.current.focus();\n }\n }, [expanded, highlighted]);\n\n const onClick: React.MouseEventHandler = event => {\n if (!disabled) {\n event.preventDefault();\n onGroupToggle(item, event);\n triggerRef.current?.focus();\n }\n };\n\n const onHover = () => {\n highlightItem(item);\n };\n\n const isDisabledWithReason = !!item.disabledReason && item.disabled;\n const { targetProps, descriptionEl } = useHiddenDescription(item.disabledReason);\n const trigger = item.text && (\n <span\n className={clsx(styles.header, styles['expandable-header'], styles[`variant-${variant}`], {\n [styles.disabled]: disabled,\n [styles.highlighted]: highlighted,\n [styles['is-focused']]: isKeyboardHighlighted,\n })}\n // We are using the roving tabindex technique to manage the focus state of the dropdown.\n // The current element will always have tabindex=0 which means that it can be tabbed to,\n // while all other items have tabindex=-1 so we can focus them when necessary.\n tabIndex={highlighted ? 0 : -1}\n ref={triggerRef}\n {...getMenuItemProps({ parent: true, expanded, disabled })}\n {...(isDisabledWithReason ? targetProps : {})}\n >\n {item.text}\n <span className={clsx(styles['expand-icon'], styles['expand-icon-right'])}>\n <InternalIcon name=\"caret-down-filled\" />\n </span>\n </span>\n );\n\n let content: React.ReactNode;\n // If the category element is disabled, we do not render a dropdown.\n // Screenreaders are confused by additional sections\n if (isDisabledWithReason) {\n content = (\n <Tooltip content={item.disabledReason}>\n {trigger}\n {descriptionEl}\n </Tooltip>\n );\n } else if (disabled) {\n content = trigger;\n } else {\n content = (\n <Dropdown\n open={expanded}\n stretchWidth={false}\n interior={true}\n expandToViewport={expandToViewport}\n trigger={trigger}\n >\n {item.items && expanded && (\n <ul role=\"menu\" aria-label={item.text} className={clsx(styles['items-list-container'])}>\n <ItemsList\n items={item.items}\n onItemActivate={onItemActivate}\n onGroupToggle={onGroupToggle}\n targetItem={targetItem}\n isHighlighted={isHighlighted}\n isKeyboardHighlight={isKeyboardHighlight}\n isExpanded={isExpanded}\n highlightItem={highlightItem}\n variant={variant}\n />\n </ul>\n )}\n </Dropdown>\n );\n }\n\n return (\n <li\n className={clsx(styles.category, styles[`variant-${variant}`], styles.expandable, {\n [styles.expanded]: expanded,\n [styles.disabled]: disabled,\n [styles.highlighted]: highlighted,\n })}\n role=\"presentation\"\n data-testid={item.id}\n ref={ref}\n onClick={onClick}\n onMouseEnter={onHover}\n onTouchStart={onHover}\n >\n {content}\n </li>\n );\n};\n\nexport default ExpandableCategoryElement;\n"]}
1
+ {"version":3,"file":"expandable-category-element.js","sourceRoot":"lib/default/","sources":["button-dropdown/category-elements/expandable-category-element.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 } from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\n\nimport InternalIcon from '../../icon/internal';\nimport ItemsList from '../items-list';\nimport Dropdown from '../../internal/components/dropdown';\nimport { CategoryProps } from '../interfaces';\nimport useHiddenDescription from '../utils/use-hidden-description';\nimport Tooltip from '../tooltip.js';\nimport { getMenuItemProps } from '../utils/menu-item';\n\nconst ExpandableCategoryElement = ({\n item,\n onItemActivate,\n onGroupToggle,\n targetItem,\n isHighlighted,\n isKeyboardHighlight,\n isExpanded,\n highlightItem,\n disabled,\n expandToViewport,\n variant,\n hasExpandableGroups,\n}: CategoryProps) => {\n const highlighted = isHighlighted(item);\n const expanded = isExpanded(item);\n const isKeyboardHighlighted = isKeyboardHighlight(item);\n const triggerRef = React.useRef<HTMLSpanElement>(null);\n const ref = useRef<HTMLLIElement>(null);\n\n useEffect(() => {\n if (triggerRef.current && highlighted && !expanded) {\n triggerRef.current.focus();\n }\n }, [expanded, highlighted]);\n\n const onClick: React.MouseEventHandler = event => {\n if (!disabled) {\n event.preventDefault();\n onGroupToggle(item, event);\n triggerRef.current?.focus();\n }\n };\n\n const onHover = () => {\n highlightItem(item);\n };\n\n const isDisabledWithReason = !!item.disabledReason && item.disabled;\n const { targetProps, descriptionEl } = useHiddenDescription(item.disabledReason);\n const trigger = item.text && (\n <span\n className={clsx(styles.header, styles['expandable-header'], styles[`variant-${variant}`], {\n [styles.disabled]: disabled,\n [styles.highlighted]: highlighted,\n [styles['is-focused']]: isKeyboardHighlighted,\n })}\n // We are using the roving tabindex technique to manage the focus state of the dropdown.\n // The current element will always have tabindex=0 which means that it can be tabbed to,\n // while all other items have tabindex=-1 so we can focus them when necessary.\n tabIndex={highlighted ? 0 : -1}\n ref={triggerRef}\n {...getMenuItemProps({ parent: true, expanded, disabled })}\n {...(isDisabledWithReason ? targetProps : {})}\n >\n {item.text}\n <span className={clsx(styles['expand-icon'], styles['expand-icon-right'])}>\n <InternalIcon name=\"caret-down-filled\" />\n </span>\n </span>\n );\n\n let content: React.ReactNode;\n // If the category element is disabled, we do not render a dropdown.\n // Screenreaders are confused by additional sections\n if (isDisabledWithReason) {\n content = (\n <Tooltip content={item.disabledReason}>\n {trigger}\n {descriptionEl}\n </Tooltip>\n );\n } else if (disabled) {\n content = trigger;\n } else {\n content = (\n <Dropdown\n open={expanded}\n stretchWidth={false}\n interior={true}\n expandToViewport={expandToViewport}\n trigger={trigger}\n >\n {item.items && expanded && (\n <ul role=\"menu\" aria-label={item.text} className={clsx(styles['items-list-container'])}>\n <ItemsList\n items={item.items}\n onItemActivate={onItemActivate}\n onGroupToggle={onGroupToggle}\n targetItem={targetItem}\n isHighlighted={isHighlighted}\n isKeyboardHighlight={isKeyboardHighlight}\n isExpanded={isExpanded}\n highlightItem={highlightItem}\n variant={variant}\n hasExpandableGroups={hasExpandableGroups}\n />\n </ul>\n )}\n </Dropdown>\n );\n }\n\n return (\n <li\n className={clsx(styles.category, styles[`variant-${variant}`], styles.expandable, {\n [styles.expanded]: expanded,\n [styles.disabled]: disabled,\n [styles.highlighted]: highlighted,\n })}\n role=\"presentation\"\n data-testid={item.id}\n ref={ref}\n onClick={onClick}\n onMouseEnter={onHover}\n onTouchStart={onHover}\n >\n {content}\n </li>\n );\n};\n\nexport default ExpandableCategoryElement;\n"]}
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
2
  import { CategoryProps } from '../interfaces';
3
- declare const MobileExpandableCategoryElement: ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, highlightItem, disabled, variant, }: CategoryProps) => JSX.Element;
3
+ declare const MobileExpandableCategoryElement: ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, highlightItem, disabled, variant, hasExpandableGroups, }: CategoryProps) => JSX.Element;
4
4
  export default MobileExpandableCategoryElement;
5
5
  //# sourceMappingURL=mobile-expandable-category-element.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"mobile-expandable-category-element.d.ts","sourceRoot":"lib/default/","sources":["button-dropdown/category-elements/mobile-expandable-category-element.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAK9C,QAAA,MAAM,+BAA+B,2IAWlC,aAAa,gBAuGf,CAAC;AAEF,eAAe,+BAA+B,CAAC"}
1
+ {"version":3,"file":"mobile-expandable-category-element.d.ts","sourceRoot":"lib/default/","sources":["button-dropdown/category-elements/mobile-expandable-category-element.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAK9C,QAAA,MAAM,+BAA+B,gKAYlC,aAAa,gBAwGf,CAAC;AAEF,eAAe,+BAA+B,CAAC"}
@@ -9,7 +9,7 @@ import MobileExpandableGroup from '../mobile-expandable-group/mobile-expandable-
9
9
  import Tooltip from '../tooltip.js';
10
10
  import useHiddenDescription from '../utils/use-hidden-description.js';
11
11
  import { getMenuItemProps } from '../utils/menu-item.js';
12
- const MobileExpandableCategoryElement = ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, highlightItem, disabled, variant, }) => {
12
+ const MobileExpandableCategoryElement = ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, highlightItem, disabled, variant, hasExpandableGroups, }) => {
13
13
  const highlighted = isHighlighted(item);
14
14
  const expanded = isExpanded(item);
15
15
  const isKeyboardHighlighted = isKeyboardHighlight(item);
@@ -56,7 +56,7 @@ const MobileExpandableCategoryElement = ({ item, onItemActivate, onGroupToggle,
56
56
  }
57
57
  else {
58
58
  content = (React.createElement(MobileExpandableGroup, { open: expanded, trigger: trigger }, item.items && expanded && (React.createElement("ul", { role: "menu", "aria-label": item.text, className: clsx(styles['items-list-container']) },
59
- React.createElement(ItemsList, { items: item.items, onItemActivate: onItemActivate, onGroupToggle: onGroupToggle, targetItem: targetItem, isHighlighted: isHighlighted, isKeyboardHighlight: isKeyboardHighlight, isExpanded: isExpanded, highlightItem: highlightItem, hasCategoryHeader: true, variant: variant })))));
59
+ React.createElement(ItemsList, { items: item.items, onItemActivate: onItemActivate, onGroupToggle: onGroupToggle, targetItem: targetItem, isHighlighted: isHighlighted, isKeyboardHighlight: isKeyboardHighlight, isExpanded: isExpanded, highlightItem: highlightItem, hasCategoryHeader: true, variant: variant, hasExpandableGroups: hasExpandableGroups })))));
60
60
  }
61
61
  return (React.createElement("li", { className: clsx(styles.category, styles[`variant-${variant}`], styles.expandable, {
62
62
  [styles.expanded]: expanded,
@@ -1 +1 @@
1
- {"version":3,"file":"mobile-expandable-category-element.js","sourceRoot":"lib/default/","sources":["button-dropdown/category-elements/mobile-expandable-category-element.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 } from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\n\nimport InternalIcon from '../../icon/internal';\nimport ItemsList from '../items-list';\nimport MobileExpandableGroup from '../mobile-expandable-group/mobile-expandable-group';\nimport { CategoryProps } from '../interfaces';\nimport Tooltip from '../tooltip.js';\nimport useHiddenDescription from '../utils/use-hidden-description.js';\nimport { getMenuItemProps } from '../utils/menu-item.js';\n\nconst MobileExpandableCategoryElement = ({\n item,\n onItemActivate,\n onGroupToggle,\n targetItem,\n isHighlighted,\n isKeyboardHighlight,\n isExpanded,\n highlightItem,\n disabled,\n variant,\n}: CategoryProps) => {\n const highlighted = isHighlighted(item);\n const expanded = isExpanded(item);\n const isKeyboardHighlighted = isKeyboardHighlight(item);\n const triggerRef = React.useRef<HTMLSpanElement>(null);\n\n useEffect(() => {\n if (triggerRef.current && highlighted && !expanded) {\n triggerRef.current.focus();\n }\n }, [expanded, highlighted]);\n\n const onClick = (e: React.MouseEvent) => {\n if (!disabled) {\n e.preventDefault();\n onGroupToggle(item, e);\n }\n };\n\n const onHover = () => {\n highlightItem(item);\n };\n\n const isDisabledWithReason = !!item.disabledReason && item.disabled;\n const { targetProps, descriptionEl } = useHiddenDescription(item.disabledReason);\n const trigger = item.text && (\n <span\n className={clsx(styles.header, styles['expandable-header'], styles[`variant-${variant}`], {\n [styles.highlighted]: highlighted,\n [styles['rolled-down']]: expanded,\n [styles.disabled]: disabled,\n [styles['is-focused']]: isKeyboardHighlighted,\n })}\n // We are using the roving tabindex technique to manage the focus state of the dropdown.\n // The current element will always have tabindex=0 which means that it can be tabbed to,\n // while all other items have tabindex=-1 so we can focus them when necessary.\n tabIndex={highlighted ? 0 : -1}\n ref={triggerRef}\n {...getMenuItemProps({ parent: true, disabled, expanded })}\n {...(isDisabledWithReason ? targetProps : {})}\n >\n {item.text}\n <span\n className={clsx(styles['expand-icon'], {\n [styles['expand-icon-up']]: expanded,\n })}\n >\n <InternalIcon name=\"caret-down-filled\" />\n </span>\n </span>\n );\n\n let content: React.ReactNode;\n\n if (isDisabledWithReason) {\n content = (\n <>\n {descriptionEl}\n <Tooltip content={item.disabledReason}>{trigger}</Tooltip>\n </>\n );\n } else if (disabled) {\n content = trigger;\n } else {\n content = (\n <MobileExpandableGroup open={expanded} trigger={trigger}>\n {item.items && expanded && (\n <ul role=\"menu\" aria-label={item.text} className={clsx(styles['items-list-container'])}>\n <ItemsList\n items={item.items}\n onItemActivate={onItemActivate}\n onGroupToggle={onGroupToggle}\n targetItem={targetItem}\n isHighlighted={isHighlighted}\n isKeyboardHighlight={isKeyboardHighlight}\n isExpanded={isExpanded}\n highlightItem={highlightItem}\n hasCategoryHeader={true}\n variant={variant}\n />\n </ul>\n )}\n </MobileExpandableGroup>\n );\n }\n\n return (\n <li\n className={clsx(styles.category, styles[`variant-${variant}`], styles.expandable, {\n [styles.expanded]: expanded,\n [styles.disabled]: disabled,\n [styles.highlighted]: highlighted || expanded,\n [styles.expandable]: true,\n })}\n role=\"presentation\"\n onClick={onClick}\n onMouseEnter={onHover}\n onTouchStart={onHover}\n data-testid={item.id}\n >\n {content}\n </li>\n );\n};\n\nexport default MobileExpandableCategoryElement;\n"]}
1
+ {"version":3,"file":"mobile-expandable-category-element.js","sourceRoot":"lib/default/","sources":["button-dropdown/category-elements/mobile-expandable-category-element.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 } from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\n\nimport InternalIcon from '../../icon/internal';\nimport ItemsList from '../items-list';\nimport MobileExpandableGroup from '../mobile-expandable-group/mobile-expandable-group';\nimport { CategoryProps } from '../interfaces';\nimport Tooltip from '../tooltip.js';\nimport useHiddenDescription from '../utils/use-hidden-description.js';\nimport { getMenuItemProps } from '../utils/menu-item.js';\n\nconst MobileExpandableCategoryElement = ({\n item,\n onItemActivate,\n onGroupToggle,\n targetItem,\n isHighlighted,\n isKeyboardHighlight,\n isExpanded,\n highlightItem,\n disabled,\n variant,\n hasExpandableGroups,\n}: CategoryProps) => {\n const highlighted = isHighlighted(item);\n const expanded = isExpanded(item);\n const isKeyboardHighlighted = isKeyboardHighlight(item);\n const triggerRef = React.useRef<HTMLSpanElement>(null);\n\n useEffect(() => {\n if (triggerRef.current && highlighted && !expanded) {\n triggerRef.current.focus();\n }\n }, [expanded, highlighted]);\n\n const onClick = (e: React.MouseEvent) => {\n if (!disabled) {\n e.preventDefault();\n onGroupToggle(item, e);\n }\n };\n\n const onHover = () => {\n highlightItem(item);\n };\n\n const isDisabledWithReason = !!item.disabledReason && item.disabled;\n const { targetProps, descriptionEl } = useHiddenDescription(item.disabledReason);\n const trigger = item.text && (\n <span\n className={clsx(styles.header, styles['expandable-header'], styles[`variant-${variant}`], {\n [styles.highlighted]: highlighted,\n [styles['rolled-down']]: expanded,\n [styles.disabled]: disabled,\n [styles['is-focused']]: isKeyboardHighlighted,\n })}\n // We are using the roving tabindex technique to manage the focus state of the dropdown.\n // The current element will always have tabindex=0 which means that it can be tabbed to,\n // while all other items have tabindex=-1 so we can focus them when necessary.\n tabIndex={highlighted ? 0 : -1}\n ref={triggerRef}\n {...getMenuItemProps({ parent: true, disabled, expanded })}\n {...(isDisabledWithReason ? targetProps : {})}\n >\n {item.text}\n <span\n className={clsx(styles['expand-icon'], {\n [styles['expand-icon-up']]: expanded,\n })}\n >\n <InternalIcon name=\"caret-down-filled\" />\n </span>\n </span>\n );\n\n let content: React.ReactNode;\n\n if (isDisabledWithReason) {\n content = (\n <>\n {descriptionEl}\n <Tooltip content={item.disabledReason}>{trigger}</Tooltip>\n </>\n );\n } else if (disabled) {\n content = trigger;\n } else {\n content = (\n <MobileExpandableGroup open={expanded} trigger={trigger}>\n {item.items && expanded && (\n <ul role=\"menu\" aria-label={item.text} className={clsx(styles['items-list-container'])}>\n <ItemsList\n items={item.items}\n onItemActivate={onItemActivate}\n onGroupToggle={onGroupToggle}\n targetItem={targetItem}\n isHighlighted={isHighlighted}\n isKeyboardHighlight={isKeyboardHighlight}\n isExpanded={isExpanded}\n highlightItem={highlightItem}\n hasCategoryHeader={true}\n variant={variant}\n hasExpandableGroups={hasExpandableGroups}\n />\n </ul>\n )}\n </MobileExpandableGroup>\n );\n }\n\n return (\n <li\n className={clsx(styles.category, styles[`variant-${variant}`], styles.expandable, {\n [styles.expanded]: expanded,\n [styles.disabled]: disabled,\n [styles.highlighted]: highlighted || expanded,\n [styles.expandable]: true,\n })}\n role=\"presentation\"\n onClick={onClick}\n onMouseEnter={onHover}\n onTouchStart={onHover}\n data-testid={item.id}\n >\n {content}\n </li>\n );\n};\n\nexport default MobileExpandableCategoryElement;\n"]}
@@ -1,18 +1,18 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "header": "awsui_header_16mm3_q0qrm_93",
5
- "disabled": "awsui_disabled_16mm3_q0qrm_108",
6
- "expandable-header": "awsui_expandable-header_16mm3_q0qrm_112",
7
- "rolled-down": "awsui_rolled-down_16mm3_q0qrm_123",
8
- "highlighted": "awsui_highlighted_16mm3_q0qrm_126",
9
- "is-focused": "awsui_is-focused_16mm3_q0qrm_139",
10
- "variant-navigation": "awsui_variant-navigation_16mm3_q0qrm_143",
11
- "category": "awsui_category_16mm3_q0qrm_155",
12
- "expandable": "awsui_expandable_16mm3_q0qrm_112",
13
- "expand-icon": "awsui_expand-icon_16mm3_q0qrm_176",
14
- "expand-icon-up": "awsui_expand-icon-up_16mm3_q0qrm_183",
15
- "expand-icon-right": "awsui_expand-icon-right_16mm3_q0qrm_186",
16
- "items-list-container": "awsui_items-list-container_16mm3_q0qrm_200"
4
+ "header": "awsui_header_16mm3_1mgcq_93",
5
+ "disabled": "awsui_disabled_16mm3_1mgcq_108",
6
+ "expandable-header": "awsui_expandable-header_16mm3_1mgcq_112",
7
+ "rolled-down": "awsui_rolled-down_16mm3_1mgcq_123",
8
+ "highlighted": "awsui_highlighted_16mm3_1mgcq_126",
9
+ "is-focused": "awsui_is-focused_16mm3_1mgcq_139",
10
+ "category": "awsui_category_16mm3_1mgcq_144",
11
+ "expandable": "awsui_expandable_16mm3_1mgcq_112",
12
+ "variant-navigation": "awsui_variant-navigation_16mm3_1mgcq_158",
13
+ "expand-icon": "awsui_expand-icon_16mm3_1mgcq_165",
14
+ "expand-icon-up": "awsui_expand-icon-up_16mm3_1mgcq_172",
15
+ "expand-icon-right": "awsui_expand-icon-right_16mm3_1mgcq_175",
16
+ "items-list-container": "awsui_items-list-container_16mm3_1mgcq_189"
17
17
  };
18
18
 
@@ -90,7 +90,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
90
90
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
91
91
  SPDX-License-Identifier: Apache-2.0
92
92
  */
93
- .awsui_header_16mm3_q0qrm_93:not(#\9) {
93
+ .awsui_header_16mm3_1mgcq_93:not(#\9) {
94
94
  position: relative;
95
95
  margin: 0;
96
96
  color: var(--color-text-dropdown-group-label-4x4uyw, #414d5c);
@@ -105,25 +105,25 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
105
105
  ) calc(var(--space-button-horizontal-8jxzea, 20px) + var(--border-item-width-yel47s, 2px));
106
106
  z-index: 1;
107
107
  }
108
- .awsui_header_16mm3_q0qrm_93.awsui_disabled_16mm3_q0qrm_108:not(#\9) {
108
+ .awsui_header_16mm3_1mgcq_93.awsui_disabled_16mm3_1mgcq_108:not(#\9) {
109
109
  color: var(--color-text-dropdown-item-disabled-6oq3n6, #9ba7b6);
110
110
  cursor: default;
111
111
  }
112
- .awsui_header_16mm3_q0qrm_93.awsui_expandable-header_16mm3_q0qrm_112:not(#\9) {
112
+ .awsui_header_16mm3_1mgcq_93.awsui_expandable-header_16mm3_1mgcq_112:not(#\9) {
113
113
  border-top-color: var(--color-border-dropdown-group-yakmix, #b6bec9);
114
114
  border-bottom-color: var(--color-border-dropdown-group-yakmix, #b6bec9);
115
115
  cursor: pointer;
116
116
  }
117
- .awsui_header_16mm3_q0qrm_93.awsui_expandable-header_16mm3_q0qrm_112.awsui_disabled_16mm3_q0qrm_108:not(#\9) {
117
+ .awsui_header_16mm3_1mgcq_93.awsui_expandable-header_16mm3_1mgcq_112.awsui_disabled_16mm3_1mgcq_108:not(#\9) {
118
118
  cursor: default;
119
119
  }
120
- .awsui_header_16mm3_q0qrm_93.awsui_expandable-header_16mm3_q0qrm_112:not(#\9):focus {
120
+ .awsui_header_16mm3_1mgcq_93.awsui_expandable-header_16mm3_1mgcq_112:not(#\9):focus {
121
121
  outline: none;
122
122
  }
123
- .awsui_header_16mm3_q0qrm_93.awsui_expandable-header_16mm3_q0qrm_112.awsui_rolled-down_16mm3_q0qrm_123:not(#\9) {
123
+ .awsui_header_16mm3_1mgcq_93.awsui_expandable-header_16mm3_1mgcq_112.awsui_rolled-down_16mm3_1mgcq_123:not(#\9) {
124
124
  border-bottom-color: transparent;
125
125
  }
126
- .awsui_header_16mm3_q0qrm_93.awsui_expandable-header_16mm3_q0qrm_112.awsui_highlighted_16mm3_q0qrm_126:not(#\9) {
126
+ .awsui_header_16mm3_1mgcq_93.awsui_expandable-header_16mm3_1mgcq_112.awsui_highlighted_16mm3_1mgcq_126:not(#\9) {
127
127
  background-color: var(--color-background-dropdown-item-hover-swsulg, #f4f4f4);
128
128
  color: var(--color-text-dropdown-item-highlighted-a51hdb, #000716);
129
129
  padding: var(--space-xxs-p8yyaw, 4px) var(--space-button-horizontal-8jxzea, 20px);
@@ -131,73 +131,62 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
131
131
  border-radius: var(--border-radius-item-05df9h, 8px);
132
132
  z-index: 2;
133
133
  }
134
- .awsui_header_16mm3_q0qrm_93.awsui_expandable-header_16mm3_q0qrm_112.awsui_highlighted_16mm3_q0qrm_126.awsui_disabled_16mm3_q0qrm_108:not(#\9) {
134
+ .awsui_header_16mm3_1mgcq_93.awsui_expandable-header_16mm3_1mgcq_112.awsui_highlighted_16mm3_1mgcq_126.awsui_disabled_16mm3_1mgcq_108:not(#\9) {
135
135
  background-color: var(--color-background-dropdown-item-dimmed-dlm6wk, transparent);
136
136
  border-color: var(--color-border-dropdown-item-dimmed-hover-xdu0hf, #7d8998);
137
137
  color: var(--color-text-dropdown-item-dimmed-f2joj8, #9ba7b6);
138
138
  }
139
- .awsui_header_16mm3_q0qrm_93.awsui_expandable-header_16mm3_q0qrm_112.awsui_highlighted_16mm3_q0qrm_126.awsui_is-focused_16mm3_q0qrm_139:not(#\9) {
139
+ .awsui_header_16mm3_1mgcq_93.awsui_expandable-header_16mm3_1mgcq_112.awsui_highlighted_16mm3_1mgcq_126.awsui_is-focused_16mm3_1mgcq_139:not(#\9) {
140
140
  border-color: var(--color-border-dropdown-item-focused-5hbaf3, #414d5c);
141
141
  box-shadow: inset 0 0 0 var(--border-control-focus-ring-shadow-spread-0ctpjf, 0px) var(--color-border-item-focused-b2ntyl, #0972d3);
142
142
  }
143
- .awsui_header_16mm3_q0qrm_93.awsui_expandable-header_16mm3_q0qrm_112.awsui_variant-navigation_16mm3_q0qrm_143:not(#\9) {
144
- padding-top: var(--space-xs-zb16t3, 8px);
145
- padding-bottom: var(--space-xs-zb16t3, 8px);
146
- }
147
- .awsui_header_16mm3_q0qrm_93.awsui_expandable-header_16mm3_q0qrm_112.awsui_variant-navigation_16mm3_q0qrm_143.awsui_highlighted_16mm3_q0qrm_126:not(#\9) {
148
- border-color: transparent;
149
- border-top-color: var(--color-border-dropdown-group-yakmix, #b6bec9);
150
- border-bottom-color: var(--color-border-dropdown-group-yakmix, #b6bec9);
151
- background-color: transparent;
152
- color: var(--color-text-accent-n2acxv, #0972d3);
153
- }
154
143
 
155
- .awsui_category_16mm3_q0qrm_155:not(#\9) {
144
+ .awsui_category_16mm3_1mgcq_144:not(#\9) {
156
145
  list-style: none;
157
146
  margin-top: calc(-1 * var(--border-divider-list-width-27y3k5, 1px));
158
147
  padding: 0;
159
148
  }
160
- .awsui_category_16mm3_q0qrm_155:not(#\9):first-child {
149
+ .awsui_category_16mm3_1mgcq_144:not(#\9):first-child {
161
150
  margin-top: 0;
162
151
  }
163
- .awsui_category_16mm3_q0qrm_155.awsui_expandable_16mm3_q0qrm_112:not(#\9) {
152
+ .awsui_category_16mm3_1mgcq_144.awsui_expandable_16mm3_1mgcq_112:not(#\9) {
164
153
  border-top: 0;
165
154
  }
166
- .awsui_category_16mm3_q0qrm_155:not(#\9):last-child {
155
+ .awsui_category_16mm3_1mgcq_144:not(#\9):last-child {
167
156
  border-bottom: none;
168
157
  }
169
- .awsui_category_16mm3_q0qrm_155.awsui_variant-navigation_16mm3_q0qrm_143:not(#\9) {
158
+ .awsui_category_16mm3_1mgcq_144.awsui_variant-navigation_16mm3_1mgcq_158:not(#\9) {
170
159
  padding-top: var(--space-xxs-p8yyaw, 4px);
171
160
  }
172
- .awsui_category_16mm3_q0qrm_155.awsui_variant-navigation_16mm3_q0qrm_143.awsui_expandable_16mm3_q0qrm_112:not(#\9) {
161
+ .awsui_category_16mm3_1mgcq_144.awsui_variant-navigation_16mm3_1mgcq_158.awsui_expandable_16mm3_1mgcq_112:not(#\9) {
173
162
  padding-top: 0;
174
163
  }
175
164
 
176
- .awsui_expand-icon_16mm3_q0qrm_176:not(#\9) {
165
+ .awsui_expand-icon_16mm3_1mgcq_165:not(#\9) {
177
166
  position: relative;
178
167
  left: var(--space-s-34lx8l, 12px);
179
168
  width: var(--space-m-udix3p, 16px);
180
169
  display: inline-block;
181
170
  transition: transform var(--motion-duration-rotate-180-dpvl4m, 135ms) var(--motion-easing-rotate-180-e270ko, cubic-bezier(0.165, 0.84, 0.44, 1));
182
171
  }
183
- .awsui_expand-icon-up_16mm3_q0qrm_183:not(#\9) {
172
+ .awsui_expand-icon-up_16mm3_1mgcq_172:not(#\9) {
184
173
  transform: rotate(-180deg);
185
174
  }
186
- .awsui_expand-icon-right_16mm3_q0qrm_186:not(#\9) {
175
+ .awsui_expand-icon-right_16mm3_1mgcq_175:not(#\9) {
187
176
  transform: rotate(-90deg);
188
177
  }
189
178
  @media (prefers-reduced-motion: reduce) {
190
- .awsui_expand-icon_16mm3_q0qrm_176:not(#\9) {
179
+ .awsui_expand-icon_16mm3_1mgcq_165:not(#\9) {
191
180
  animation: none;
192
181
  transition: none;
193
182
  }
194
183
  }
195
- .awsui-motion-disabled .awsui_expand-icon_16mm3_q0qrm_176:not(#\9), .awsui-mode-entering .awsui_expand-icon_16mm3_q0qrm_176:not(#\9) {
184
+ .awsui-motion-disabled .awsui_expand-icon_16mm3_1mgcq_165:not(#\9), .awsui-mode-entering .awsui_expand-icon_16mm3_1mgcq_165:not(#\9) {
196
185
  animation: none;
197
186
  transition: none;
198
187
  }
199
188
 
200
- .awsui_items-list-container_16mm3_q0qrm_200:not(#\9) {
189
+ .awsui_items-list-container_16mm3_1mgcq_189:not(#\9) {
201
190
  padding: 0;
202
191
  margin: -1px 0 0 0;
203
192
  overflow-y: auto;