@cloudscape-design/components-themeable 3.0.520 → 3.0.521
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.
- package/lib/internal/manifest.json +1 -1
- package/lib/internal/scss/button-dropdown/category-elements/styles.scss +0 -14
- package/lib/internal/scss/button-dropdown/item-element/styles.scss +1 -1
- package/lib/internal/scss/expandable-section/styles.scss +1 -1
- package/lib/internal/template/app-layout/visual-refresh/background.js +2 -2
- package/lib/internal/template/app-layout/visual-refresh/background.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/breadcrumbs.js +2 -2
- package/lib/internal/template/app-layout/visual-refresh/breadcrumbs.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/header.js +2 -2
- package/lib/internal/template/app-layout/visual-refresh/header.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/mobile-toolbar.js +2 -2
- package/lib/internal/template/app-layout/visual-refresh/mobile-toolbar.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/notifications.js +2 -2
- package/lib/internal/template/app-layout/visual-refresh/notifications.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/trigger-button.js +1 -1
- package/lib/internal/template/app-layout/visual-refresh/trigger-button.js.map +1 -1
- package/lib/internal/template/button-dropdown/category-elements/category-element.d.ts +1 -1
- package/lib/internal/template/button-dropdown/category-elements/category-element.d.ts.map +1 -1
- package/lib/internal/template/button-dropdown/category-elements/category-element.js +2 -2
- package/lib/internal/template/button-dropdown/category-elements/category-element.js.map +1 -1
- package/lib/internal/template/button-dropdown/category-elements/expandable-category-element.d.ts +1 -1
- package/lib/internal/template/button-dropdown/category-elements/expandable-category-element.d.ts.map +1 -1
- package/lib/internal/template/button-dropdown/category-elements/expandable-category-element.js +2 -2
- package/lib/internal/template/button-dropdown/category-elements/expandable-category-element.js.map +1 -1
- package/lib/internal/template/button-dropdown/category-elements/mobile-expandable-category-element.d.ts +1 -1
- package/lib/internal/template/button-dropdown/category-elements/mobile-expandable-category-element.d.ts.map +1 -1
- package/lib/internal/template/button-dropdown/category-elements/mobile-expandable-category-element.js +2 -2
- package/lib/internal/template/button-dropdown/category-elements/mobile-expandable-category-element.js.map +1 -1
- package/lib/internal/template/button-dropdown/category-elements/styles.css.js +13 -13
- package/lib/internal/template/button-dropdown/category-elements/styles.scoped.css +21 -32
- package/lib/internal/template/button-dropdown/category-elements/styles.selectors.js +13 -13
- package/lib/internal/template/button-dropdown/interfaces.d.ts +2 -0
- package/lib/internal/template/button-dropdown/interfaces.d.ts.map +1 -1
- package/lib/internal/template/button-dropdown/interfaces.js.map +1 -1
- package/lib/internal/template/button-dropdown/item-element/index.d.ts +1 -1
- package/lib/internal/template/button-dropdown/item-element/index.d.ts.map +1 -1
- package/lib/internal/template/button-dropdown/item-element/index.js +6 -1
- package/lib/internal/template/button-dropdown/item-element/index.js.map +1 -1
- package/lib/internal/template/button-dropdown/item-element/styles.css.js +16 -15
- package/lib/internal/template/button-dropdown/item-element/styles.scoped.css +18 -18
- package/lib/internal/template/button-dropdown/item-element/styles.selectors.js +16 -15
- package/lib/internal/template/button-dropdown/items-list.d.ts.map +1 -1
- package/lib/internal/template/button-dropdown/items-list.js +3 -3
- package/lib/internal/template/button-dropdown/items-list.js.map +1 -1
- package/lib/internal/template/cards/index.js +2 -2
- package/lib/internal/template/cards/index.js.map +1 -1
- package/lib/internal/template/container/internal.js +4 -4
- package/lib/internal/template/container/internal.js.map +1 -1
- package/lib/internal/template/content-layout/internal.js +3 -3
- package/lib/internal/template/content-layout/internal.js.map +1 -1
- package/lib/internal/template/expandable-section/styles.css.js +32 -32
- package/lib/internal/template/expandable-section/styles.scoped.css +63 -63
- package/lib/internal/template/expandable-section/styles.selectors.js +32 -32
- package/lib/internal/template/internal/components/dark-ribbon/index.js +2 -2
- package/lib/internal/template/internal/components/dark-ribbon/index.js.map +1 -1
- package/lib/internal/template/internal/environment.js +1 -1
- package/lib/internal/template/internal/environment.json +1 -1
- package/lib/internal/template/internal/utils/content-header-utils.d.ts +2 -2
- package/lib/internal/template/internal/utils/content-header-utils.d.ts.map +1 -1
- package/lib/internal/template/internal/utils/content-header-utils.js +2 -2
- package/lib/internal/template/internal/utils/content-header-utils.js.map +1 -1
- package/lib/internal/template/split-panel/icons/bottom-icon-refresh.js +2 -2
- package/lib/internal/template/split-panel/icons/bottom-icon-refresh.js.map +1 -1
- package/lib/internal/template/split-panel/icons/side-position-refresh.js +2 -2
- package/lib/internal/template/split-panel/icons/side-position-refresh.js.map +1 -1
- package/lib/internal/template/table/internal.js +2 -2
- package/lib/internal/template/table/internal.js.map +1 -1
- package/lib/internal/template/top-navigation/interfaces.d.ts +2 -0
- package/lib/internal/template/top-navigation/interfaces.d.ts.map +1 -1
- package/lib/internal/template/top-navigation/interfaces.js.map +1 -1
- package/lib/internal/template/wizard/internal.js +4 -4
- package/lib/internal/template/wizard/internal.js.map +1 -1
- package/lib/internal/template/wizard/wizard-form-header.js +3 -3
- package/lib/internal/template/wizard/wizard-form-header.js.map +1 -1
- package/lib/internal/template/wizard/wizard-navigation.js +2 -2
- package/lib/internal/template/wizard/wizard-navigation.js.map +1 -1
- package/package.json +1 -1
|
@@ -59,20 +59,6 @@
|
|
|
59
59
|
box-shadow: inset 0 0 0 awsui.$border-control-focus-ring-shadow-spread awsui.$color-border-item-focused;
|
|
60
60
|
}
|
|
61
61
|
}
|
|
62
|
-
|
|
63
|
-
&.variant-navigation {
|
|
64
|
-
padding-top: awsui.$space-xs;
|
|
65
|
-
padding-bottom: awsui.$space-xs;
|
|
66
|
-
|
|
67
|
-
&.highlighted {
|
|
68
|
-
border-color: transparent;
|
|
69
|
-
border-top-color: awsui.$color-border-dropdown-group;
|
|
70
|
-
border-bottom-color: awsui.$color-border-dropdown-group;
|
|
71
|
-
|
|
72
|
-
background-color: transparent;
|
|
73
|
-
color: awsui.$color-text-accent;
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
62
|
}
|
|
77
63
|
}
|
|
78
64
|
|
|
@@ -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 {
|
|
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,
|
|
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,
|
|
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 {
|
|
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
|
-
},
|
|
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,
|
|
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 {
|
|
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
|
-
},
|
|
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,
|
|
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 {
|
|
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'],
|
|
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":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,
|
|
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 {
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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"]}
|
package/lib/internal/template/button-dropdown/category-elements/expandable-category-element.d.ts
CHANGED
|
@@ -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
|
package/lib/internal/template/button-dropdown/category-elements/expandable-category-element.d.ts.map
CHANGED
|
@@ -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,
|
|
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"}
|
package/lib/internal/template/button-dropdown/category-elements/expandable-category-element.js
CHANGED
|
@@ -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,
|
package/lib/internal/template/button-dropdown/category-elements/expandable-category-element.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"expandable-category-element.js","sourceRoot":"lib/default/","sources":["button-dropdown/category-elements/expandable-category-element.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAC/C,OAAO,SAAS,MAAM,eAAe,CAAC;AACtC,OAAO,QAAQ,MAAM,oCAAoC,CAAC;AAE1D,OAAO,oBAAoB,MAAM,iCAAiC,CAAC;AACnE,OAAO,OAAO,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,yBAAyB,GAAG,CAAC,EACjC,IAAI,EACJ,cAAc,EACd,aAAa,EACb,UAAU,EACV,aAAa,EACb,mBAAmB,EACnB,UAAU,EACV,aAAa,EACb,QAAQ,EACR,gBAAgB,EAChB,OAAO,
|
|
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,
|
|
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":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAC/C,OAAO,SAAS,MAAM,eAAe,CAAC;AACtC,OAAO,qBAAqB,MAAM,oDAAoD,CAAC;AAEvF,OAAO,OAAO,MAAM,eAAe,CAAC;AACpC,OAAO,oBAAoB,MAAM,oCAAoC,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,MAAM,+BAA+B,GAAG,CAAC,EACvC,IAAI,EACJ,cAAc,EACd,aAAa,EACb,UAAU,EACV,aAAa,EACb,mBAAmB,EACnB,UAAU,EACV,aAAa,EACb,QAAQ,EACR,OAAO,
|
|
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": "
|
|
5
|
-
"disabled": "
|
|
6
|
-
"expandable-header": "awsui_expandable-
|
|
7
|
-
"rolled-down": "awsui_rolled-
|
|
8
|
-
"highlighted": "
|
|
9
|
-
"is-focused": "awsui_is-
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"expand-icon": "awsui_expand-
|
|
14
|
-
"expand-icon-up": "awsui_expand-icon-
|
|
15
|
-
"expand-icon-right": "awsui_expand-icon-
|
|
16
|
-
"items-list-container": "awsui_items-list-
|
|
4
|
+
"header": "awsui_header_16mm3_oo6nj_93",
|
|
5
|
+
"disabled": "awsui_disabled_16mm3_oo6nj_108",
|
|
6
|
+
"expandable-header": "awsui_expandable-header_16mm3_oo6nj_112",
|
|
7
|
+
"rolled-down": "awsui_rolled-down_16mm3_oo6nj_123",
|
|
8
|
+
"highlighted": "awsui_highlighted_16mm3_oo6nj_126",
|
|
9
|
+
"is-focused": "awsui_is-focused_16mm3_oo6nj_139",
|
|
10
|
+
"category": "awsui_category_16mm3_oo6nj_144",
|
|
11
|
+
"expandable": "awsui_expandable_16mm3_oo6nj_112",
|
|
12
|
+
"variant-navigation": "awsui_variant-navigation_16mm3_oo6nj_158",
|
|
13
|
+
"expand-icon": "awsui_expand-icon_16mm3_oo6nj_165",
|
|
14
|
+
"expand-icon-up": "awsui_expand-icon-up_16mm3_oo6nj_172",
|
|
15
|
+
"expand-icon-right": "awsui_expand-icon-right_16mm3_oo6nj_175",
|
|
16
|
+
"items-list-container": "awsui_items-list-container_16mm3_oo6nj_189"
|
|
17
17
|
};
|
|
18
18
|
|