@cloudscape-design/components 3.0.181 → 3.0.183
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/flashbar/interfaces.d.ts +2 -4
- package/flashbar/interfaces.d.ts.map +1 -1
- package/flashbar/interfaces.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
- package/side-navigation/interfaces.d.ts +14 -2
- package/side-navigation/interfaces.d.ts.map +1 -1
- package/side-navigation/interfaces.js.map +1 -1
- package/side-navigation/internal.d.ts +1 -1
- package/side-navigation/internal.d.ts.map +1 -1
- package/side-navigation/internal.js +14 -6
- package/side-navigation/internal.js.map +1 -1
- package/side-navigation/styles.css.js +26 -22
- package/side-navigation/styles.scoped.css +57 -34
- package/side-navigation/styles.selectors.js +26 -22
- package/test-utils/dom/side-navigation/index.d.ts +3 -0
- package/test-utils/dom/side-navigation/index.js +9 -0
- package/test-utils/dom/side-navigation/index.js.map +1 -1
- package/test-utils/selectors/side-navigation/index.d.ts +3 -0
- package/test-utils/selectors/side-navigation/index.js +9 -0
- package/test-utils/selectors/side-navigation/index.js.map +1 -1
- package/test-utils/tsconfig.tsbuildinfo +1 -1
- package/top-navigation/internal.js +2 -1
- package/top-navigation/internal.js.map +1 -1
package/flashbar/interfaces.d.ts
CHANGED
|
@@ -34,7 +34,7 @@ export interface FlashbarProps extends BaseComponentProps {
|
|
|
34
34
|
* When a user clicks on this button the `onDismiss` handler is called.
|
|
35
35
|
* * `dismissLabel` (string) - Specifies an `aria-label` for to the dismiss icon button for improved accessibility.
|
|
36
36
|
* * `statusIconAriaLabel` (string) - Specifies an `aria-label` for to the status icon for improved accessibility.
|
|
37
|
-
* * `ariaRole` (
|
|
37
|
+
* * `ariaRole` (string) - For flash messages added after page load, specifies how this message is communicated to assistive
|
|
38
38
|
* technology. Use "status" for status updates or informational content. Use "alert" for important messages that need the
|
|
39
39
|
* user's attention.
|
|
40
40
|
* * `action` (ReactNode) - Specifies an action for the flash message. Although it is technically possible to insert any content,
|
|
@@ -44,11 +44,9 @@ export interface FlashbarProps extends BaseComponentProps {
|
|
|
44
44
|
* If the `action` property is set, this property is ignored. **Deprecated**, replaced by `action`.
|
|
45
45
|
* * `onButtonClick` (event => void) - Called when a user clicks on the action button. This is not called if you create a custom button
|
|
46
46
|
* using the `action` property. **Deprecated**, replaced by `action`.
|
|
47
|
-
* * `id` (string) - Specifies a unique flash message identifier. This property
|
|
47
|
+
* * `id` (string) - Specifies a unique flash message identifier. This property is used in two ways:
|
|
48
48
|
* 1. As a [keys](https://reactjs.org/docs/lists-and-keys.html#keys) source for React rendering.
|
|
49
49
|
* 2. To identify which flash message will be removed from the DOM when it is dismissed, to animate it out.
|
|
50
|
-
*
|
|
51
|
-
* @visualrefresh `id` property
|
|
52
50
|
*/
|
|
53
51
|
items: ReadonlyArray<FlashbarProps.MessageDefinition>;
|
|
54
52
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/flashbar/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,yBAAiB,aAAa,CAAC;IAC7B,UAAiB,iBAAiB;QAChC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,CAAC;QAC1B,QAAQ,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC;QAClC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,UAAU,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;QACrC,aAAa,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QACvC,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;KACpC;IAED,KAAY,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;IAC5D,KAAY,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;CAC3C;AAED,MAAM,WAAW,aAAc,SAAQ,kBAAkB;IACvD
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/flashbar/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,yBAAiB,aAAa,CAAC;IAC7B,UAAiB,iBAAiB;QAChC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,CAAC;QAC1B,QAAQ,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC;QAClC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,UAAU,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;QACrC,aAAa,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QACvC,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;KACpC;IAED,KAAY,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;IAC5D,KAAY,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;CAC3C;AAED,MAAM,WAAW,aAAc,SAAQ,kBAAkB;IACvD;;;;;;;;;;;;;;;;;;;;;;;;;;OA0BG;IACH,KAAK,EAAE,aAAa,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;CACvD;AAED,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,IAAI,CAAC;IACjB,UAAU,CAAC,EAAE,oBAAoB,CAAC,UAAU,CAAC;IAC7C,KAAK,EAAE,aAAa,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;CACvD;AAED,yBAAiB,oBAAoB,CAAC;IACpC,UAAiB,UAAU;QACzB,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;KAC3B;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/flashbar/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport React from 'react';\nimport { ButtonProps } from '../button/interfaces';\n\nexport namespace FlashbarProps {\n export interface MessageDefinition {\n header?: React.ReactNode;\n content?: React.ReactNode;\n dismissible?: boolean;\n dismissLabel?: string;\n statusIconAriaLabel?: string;\n loading?: boolean;\n type?: FlashbarProps.Type;\n ariaRole?: FlashbarProps.AriaRole;\n action?: React.ReactNode;\n id?: string;\n buttonText?: ButtonProps['children'];\n onButtonClick?: ButtonProps['onClick'];\n onDismiss?: ButtonProps['onClick'];\n }\n\n export type Type = 'success' | 'warning' | 'info' | 'error';\n export type AriaRole = 'alert' | 'status';\n}\n\nexport interface FlashbarProps extends BaseComponentProps {\n /**\n * Specifies flash messages that appear in the same order that they are listed.\n * The value is an array of flash message definition objects.\n *\n * A flash message object contains the following properties:\n * * `header` (ReactNode) - Specifies the heading text.\n * * `content` (ReactNode) - Specifies the primary text displayed in the flash element.\n * * `type` (string) - Indicates the type of the message to be displayed. Allowed values are as follows: `success, error, warning, info`. The default is `info`.\n * * `loading` (boolean) - Replaces the status icon with a spinner and forces the type to `info`.\n * * `dismissible` (boolean) - Determines whether the component includes a close button icon. By default, the close button is not included.\n * When a user clicks on this button the `onDismiss` handler is called.\n * * `dismissLabel` (string) - Specifies an `aria-label` for to the dismiss icon button for improved accessibility.\n * * `statusIconAriaLabel` (string) - Specifies an `aria-label` for to the status icon for improved accessibility.\n * * `ariaRole` (
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/flashbar/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport React from 'react';\nimport { ButtonProps } from '../button/interfaces';\n\nexport namespace FlashbarProps {\n export interface MessageDefinition {\n header?: React.ReactNode;\n content?: React.ReactNode;\n dismissible?: boolean;\n dismissLabel?: string;\n statusIconAriaLabel?: string;\n loading?: boolean;\n type?: FlashbarProps.Type;\n ariaRole?: FlashbarProps.AriaRole;\n action?: React.ReactNode;\n id?: string;\n buttonText?: ButtonProps['children'];\n onButtonClick?: ButtonProps['onClick'];\n onDismiss?: ButtonProps['onClick'];\n }\n\n export type Type = 'success' | 'warning' | 'info' | 'error';\n export type AriaRole = 'alert' | 'status';\n}\n\nexport interface FlashbarProps extends BaseComponentProps {\n /**\n * Specifies flash messages that appear in the same order that they are listed.\n * The value is an array of flash message definition objects.\n *\n * A flash message object contains the following properties:\n * * `header` (ReactNode) - Specifies the heading text.\n * * `content` (ReactNode) - Specifies the primary text displayed in the flash element.\n * * `type` (string) - Indicates the type of the message to be displayed. Allowed values are as follows: `success, error, warning, info`. The default is `info`.\n * * `loading` (boolean) - Replaces the status icon with a spinner and forces the type to `info`.\n * * `dismissible` (boolean) - Determines whether the component includes a close button icon. By default, the close button is not included.\n * When a user clicks on this button the `onDismiss` handler is called.\n * * `dismissLabel` (string) - Specifies an `aria-label` for to the dismiss icon button for improved accessibility.\n * * `statusIconAriaLabel` (string) - Specifies an `aria-label` for to the status icon for improved accessibility.\n * * `ariaRole` (string) - For flash messages added after page load, specifies how this message is communicated to assistive\n * technology. Use \"status\" for status updates or informational content. Use \"alert\" for important messages that need the\n * user's attention.\n * * `action` (ReactNode) - Specifies an action for the flash message. Although it is technically possible to insert any content,\n * our UX guidelines only allow you to add a button.\n * * `buttonText` (string) - Specifies that an action button should be displayed, with the specified text.\n * When a user clicks on this button the `onButtonClick` handler is called.\n * If the `action` property is set, this property is ignored. **Deprecated**, replaced by `action`.\n * * `onButtonClick` (event => void) - Called when a user clicks on the action button. This is not called if you create a custom button\n * using the `action` property. **Deprecated**, replaced by `action`.\n * * `id` (string) - Specifies a unique flash message identifier. This property is used in two ways:\n * 1. As a [keys](https://reactjs.org/docs/lists-and-keys.html#keys) source for React rendering.\n * 2. To identify which flash message will be removed from the DOM when it is dismissed, to animate it out.\n */\n items: ReadonlyArray<FlashbarProps.MessageDefinition>;\n}\n\nexport interface StackedFlashbarProps {\n stackItems: true;\n ariaLabels?: StackedFlashbarProps.AriaLabels;\n items: ReadonlyArray<FlashbarProps.MessageDefinition>;\n}\n\nexport namespace StackedFlashbarProps {\n export interface AriaLabels {\n stackCollapseLabel?: string;\n stackExpandLabel?: string;\n }\n}\n"]}
|
package/internal/environment.js
CHANGED
package/internal/manifest.json
CHANGED
package/package.json
CHANGED
|
@@ -55,6 +55,13 @@ export interface SideNavigationProps extends BaseComponentProps {
|
|
|
55
55
|
* Although there is no technical limitation to the nesting level,
|
|
56
56
|
* our UX recommendation is to use only one level.
|
|
57
57
|
*
|
|
58
|
+
* #### Section Group
|
|
59
|
+
* Aggregates a set of items that are conceptually related to each other, and can be displayed under a single heading to provide further organization.
|
|
60
|
+
* You can nest sections, links, link groups and expandable link groups within a section group depending on your information architecture needs.
|
|
61
|
+
* - `type`: `'section-group'`.
|
|
62
|
+
* - `title` (string) - Specifies the text to display as a title of the section group.
|
|
63
|
+
* - `items` (array) - Specifies the content of the section header group. You can use `Section`, `Link`, `LinkGroup`, `ExpandableLinkGroup`.
|
|
64
|
+
*
|
|
58
65
|
* #### LinkGroup
|
|
59
66
|
* Object that represents a group of links.
|
|
60
67
|
* - `type`: `'link-group'`.
|
|
@@ -130,6 +137,11 @@ export declare namespace SideNavigationProps {
|
|
|
130
137
|
items: ReadonlyArray<Item>;
|
|
131
138
|
defaultExpanded?: boolean;
|
|
132
139
|
}
|
|
140
|
+
interface SectionGroup {
|
|
141
|
+
type: 'section-group';
|
|
142
|
+
title: string;
|
|
143
|
+
items: ReadonlyArray<Section | Link | LinkGroup | ExpandableLinkGroup>;
|
|
144
|
+
}
|
|
133
145
|
interface LinkGroup {
|
|
134
146
|
type: 'link-group';
|
|
135
147
|
text: string;
|
|
@@ -143,7 +155,7 @@ export declare namespace SideNavigationProps {
|
|
|
143
155
|
items: ReadonlyArray<Item>;
|
|
144
156
|
defaultExpanded?: boolean;
|
|
145
157
|
}
|
|
146
|
-
type Item = Divider | Link | Section | LinkGroup | ExpandableLinkGroup;
|
|
158
|
+
type Item = Divider | Link | Section | LinkGroup | ExpandableLinkGroup | SectionGroup;
|
|
147
159
|
interface ChangeDetail {
|
|
148
160
|
item: Section | ExpandableLinkGroup;
|
|
149
161
|
expanded: boolean;
|
|
@@ -152,7 +164,7 @@ export declare namespace SideNavigationProps {
|
|
|
152
164
|
interface FollowDetail extends BaseNavigationDetail {
|
|
153
165
|
text?: string;
|
|
154
166
|
href: string;
|
|
155
|
-
type?: 'link' | 'link-group' | 'expandable-link-group';
|
|
167
|
+
type?: 'link' | 'link-group' | 'expandable-link-group' | 'section-header';
|
|
156
168
|
info?: React.ReactNode;
|
|
157
169
|
}
|
|
158
170
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/side-navigation/interfaces.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE7G,MAAM,WAAW,mBAAoB,SAAQ,kBAAkB;IAC7D;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC;IAEpC;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/side-navigation/interfaces.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/side-navigation/interfaces.tsx"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { BaseNavigationDetail, CancelableEventHandler, NonCancelableEventHandler } from '../internal/events';\n\nexport interface SideNavigationProps extends BaseComponentProps {\n /**\n * Controls the header that appears at the top of the navigation component.\n *\n * It contains the following:\n * - `text` (string) - Specifies the header text.\n * - `href` (string) - Specifies the `href` that the header links to.\n * - `logo` (object) - Specifies a logo image.\n */\n header?: SideNavigationProps.Header;\n\n /**\n * Specifies the `href` of the currently active link.\n * All items within the navigation with a matching `href` are highlighted.\n *\n * `Sections` and `Expandable Page Groups` that contain a highlighted item\n * are automatically expanded, unless their definitions have the `defaultExpanded`\n * property explicitly set to `false`.\n */\n activeHref?: string;\n\n /**\n * Specifies the items to be displayed in the navigation.\n * Allowed objects are: `Link`, `Divider`, `Section`, `LinkGroup` and `ExpandableLinkGroup`.\n *\n * You can inject extra properties (for example, an ID)\n * in order to identify the item when it's used in an event `detail`\n * (for more information, see the events section below).\n *\n * #### Link\n * Object that represents an anchor in the navigation.\n * Links are rendered as `<a>` tags.\n * - `type` - `'link'`.\n * - `text` (string) - Specifies the link text.\n * - `href` (string) - Specifies the `href` of the link.\n * - `external` (boolean) - Determines whether to display an external link icon next to the link.\n * If set to `true`, an external link icon appears next to the link.\n * The anchor also has the attributes `target=\"_blank\"` and `rel=\"noopener\"`.\n * Additionally, the `activeHref` property won't be modified when a user chooses the link.\n * - `externalIconAriaLabel` (string) - Adds an aria-label to the external icon.\n * - `info` (ReactNode) - Enables you to display content next to the link. Although it is technically possible to insert any content,\n * our UX guidelines allow only to add a Badge and/or a \"New\" label.\n *\n * #### Divider\n * Object that represents a horizontal divider between navigation content.\n * It contains `type`: `'divider'` only.\n *\n * #### Section\n * Object that represents a section within the navigation.\n * - `type`: `'section'`.\n * - `text` (string) - Specifies the text to display as a title of the section.\n * - `defaultExpanded` (boolean) - Determines whether the section should be expanded by default. Default value is `true`.\n * - `items` (array) - Specifies the content of the section. You can use any valid item from this list.\n * Although there is no technical limitation to the nesting level,\n * our UX recommendation is to use only one level.\n *\n * #### LinkGroup\n * Object that represents a group of links.\n * - `type`: `'link-group'`.\n * - `text` (string) - Specifies the text of the group link.\n * - `href` (string) - Specifies the `href` of the group link.\n * - `items` (array) - Specifies the content of the section. You can use any valid item from this list.\n * Although there is no technical limitation to the nesting level,\n * our UX recommendation is to use only one level.\n *\n * #### ExpandableLinkGroup\n *\n * Object that represents an expandable group of links.\n * - `type`: `'expandable-link-group'`.\n * - `text` (string) - Specifies the text of the group link.\n * - `href` (string) - Specifies the `href` of the group link.\n * - `defaultExpanded` (boolean) - Specifies whether the group should be expanded by default.\n * If not explicitly set, the group is collapsed by default, unless one of the nested links is active.\n * - `items` (array) - Specifies the content of the section. You can use any valid item from this list.\n * Although there is no technical limitation to the nesting level,\n * our UX recommendation is to use only one level.\n */\n items?: ReadonlyArray<SideNavigationProps.Item>;\n\n /**\n * Fired when an anchor is clicked without any modifier (that is, CTRL, ALT, SHIFT).\n * The event `detail` contains a definition of the clicked item.\n * Use this event to prevent default browser navigation (by calling `preventDefault` method)\n * and branch your own routing.\n *\n * If the event is prevented the `activeHref` property won't be automatically set\n * to the href of the clicked item so you'll have to do it yourself.\n */\n onFollow?: CancelableEventHandler<SideNavigationProps.FollowDetail>;\n\n /**\n * Fired when the expansion state of `Section` or `ExpandablePageGroup` items changes\n * as a result of a user interaction. The event `detail` contains an object with information about the changed item.\n *\n * - `item` (object) - Specifies the item that was changed.\n * - `expanded` (boolean) - Specifies whether the item is expanded or not.\n * - `expandableParents` (array) - A list of parent items that have a type of `Section`\n * or `ExpandablePageGroup`. Use this `expandableParents` array to set their expanded\n * state to `true` if you want your data model to keep track of the current state\n * of the navigation items.\n *\n * Note: If the expansion is a result of the activation of a nested link\n * upon changing the `activeHref` property, this event isn't raised.\n */\n onChange?: NonCancelableEventHandler<SideNavigationProps.ChangeDetail>;\n}\n\nexport namespace SideNavigationProps {\n export interface Logo {\n src: string;\n alt?: string;\n }\n export interface Header {\n text?: string;\n href: string;\n logo?: Logo;\n }\n\n export interface Divider {\n type: 'divider';\n }\n\n export interface Link {\n type: 'link';\n text: string;\n href: string;\n external?: boolean;\n externalIconAriaLabel?: string;\n info?: React.ReactNode;\n }\n\n export interface Section {\n type: 'section';\n text: string;\n items: ReadonlyArray<Item>;\n defaultExpanded?: boolean;\n }\n\n export interface LinkGroup {\n type: 'link-group';\n text: string;\n href: string;\n items: ReadonlyArray<Item>;\n }\n\n export interface ExpandableLinkGroup {\n type: 'expandable-link-group';\n text: string;\n href: string;\n items: ReadonlyArray<Item>;\n defaultExpanded?: boolean;\n }\n\n export type Item = Divider | Link | Section | LinkGroup | ExpandableLinkGroup;\n\n export interface ChangeDetail {\n item: Section | ExpandableLinkGroup;\n expanded: boolean;\n expandableParents: ReadonlyArray<Section | ExpandableLinkGroup>;\n }\n\n export interface FollowDetail extends BaseNavigationDetail {\n text?: string;\n href: string;\n type?: 'link' | 'link-group' | 'expandable-link-group';\n info?: React.ReactNode;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/side-navigation/interfaces.tsx"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { BaseNavigationDetail, CancelableEventHandler, NonCancelableEventHandler } from '../internal/events';\n\nexport interface SideNavigationProps extends BaseComponentProps {\n /**\n * Controls the header that appears at the top of the navigation component.\n *\n * It contains the following:\n * - `text` (string) - Specifies the header text.\n * - `href` (string) - Specifies the `href` that the header links to.\n * - `logo` (object) - Specifies a logo image.\n */\n header?: SideNavigationProps.Header;\n\n /**\n * Specifies the `href` of the currently active link.\n * All items within the navigation with a matching `href` are highlighted.\n *\n * `Sections` and `Expandable Page Groups` that contain a highlighted item\n * are automatically expanded, unless their definitions have the `defaultExpanded`\n * property explicitly set to `false`.\n */\n activeHref?: string;\n\n /**\n * Specifies the items to be displayed in the navigation.\n * Allowed objects are: `Link`, `Divider`, `Section`, `LinkGroup` and `ExpandableLinkGroup`.\n *\n * You can inject extra properties (for example, an ID)\n * in order to identify the item when it's used in an event `detail`\n * (for more information, see the events section below).\n *\n * #### Link\n * Object that represents an anchor in the navigation.\n * Links are rendered as `<a>` tags.\n * - `type` - `'link'`.\n * - `text` (string) - Specifies the link text.\n * - `href` (string) - Specifies the `href` of the link.\n * - `external` (boolean) - Determines whether to display an external link icon next to the link.\n * If set to `true`, an external link icon appears next to the link.\n * The anchor also has the attributes `target=\"_blank\"` and `rel=\"noopener\"`.\n * Additionally, the `activeHref` property won't be modified when a user chooses the link.\n * - `externalIconAriaLabel` (string) - Adds an aria-label to the external icon.\n * - `info` (ReactNode) - Enables you to display content next to the link. Although it is technically possible to insert any content,\n * our UX guidelines allow only to add a Badge and/or a \"New\" label.\n *\n * #### Divider\n * Object that represents a horizontal divider between navigation content.\n * It contains `type`: `'divider'` only.\n *\n * #### Section\n * Object that represents a section within the navigation.\n * - `type`: `'section'`.\n * - `text` (string) - Specifies the text to display as a title of the section.\n * - `defaultExpanded` (boolean) - Determines whether the section should be expanded by default. Default value is `true`.\n * - `items` (array) - Specifies the content of the section. You can use any valid item from this list.\n * Although there is no technical limitation to the nesting level,\n * our UX recommendation is to use only one level.\n *\n * #### Section Group\n * Aggregates a set of items that are conceptually related to each other, and can be displayed under a single heading to provide further organization.\n * You can nest sections, links, link groups and expandable link groups within a section group depending on your information architecture needs.\n * - `type`: `'section-group'`.\n * - `title` (string) - Specifies the text to display as a title of the section group.\n * - `items` (array) - Specifies the content of the section header group. You can use `Section`, `Link`, `LinkGroup`, `ExpandableLinkGroup`.\n *\n * #### LinkGroup\n * Object that represents a group of links.\n * - `type`: `'link-group'`.\n * - `text` (string) - Specifies the text of the group link.\n * - `href` (string) - Specifies the `href` of the group link.\n * - `items` (array) - Specifies the content of the section. You can use any valid item from this list.\n * Although there is no technical limitation to the nesting level,\n * our UX recommendation is to use only one level.\n *\n * #### ExpandableLinkGroup\n *\n * Object that represents an expandable group of links.\n * - `type`: `'expandable-link-group'`.\n * - `text` (string) - Specifies the text of the group link.\n * - `href` (string) - Specifies the `href` of the group link.\n * - `defaultExpanded` (boolean) - Specifies whether the group should be expanded by default.\n * If not explicitly set, the group is collapsed by default, unless one of the nested links is active.\n * - `items` (array) - Specifies the content of the section. You can use any valid item from this list.\n * Although there is no technical limitation to the nesting level,\n * our UX recommendation is to use only one level.\n */\n items?: ReadonlyArray<SideNavigationProps.Item>;\n\n /**\n * Fired when an anchor is clicked without any modifier (that is, CTRL, ALT, SHIFT).\n * The event `detail` contains a definition of the clicked item.\n * Use this event to prevent default browser navigation (by calling `preventDefault` method)\n * and branch your own routing.\n *\n * If the event is prevented the `activeHref` property won't be automatically set\n * to the href of the clicked item so you'll have to do it yourself.\n */\n onFollow?: CancelableEventHandler<SideNavigationProps.FollowDetail>;\n\n /**\n * Fired when the expansion state of `Section` or `ExpandablePageGroup` items changes\n * as a result of a user interaction. The event `detail` contains an object with information about the changed item.\n *\n * - `item` (object) - Specifies the item that was changed.\n * - `expanded` (boolean) - Specifies whether the item is expanded or not.\n * - `expandableParents` (array) - A list of parent items that have a type of `Section`\n * or `ExpandablePageGroup`. Use this `expandableParents` array to set their expanded\n * state to `true` if you want your data model to keep track of the current state\n * of the navigation items.\n *\n * Note: If the expansion is a result of the activation of a nested link\n * upon changing the `activeHref` property, this event isn't raised.\n */\n onChange?: NonCancelableEventHandler<SideNavigationProps.ChangeDetail>;\n}\n\nexport namespace SideNavigationProps {\n export interface Logo {\n src: string;\n alt?: string;\n }\n export interface Header {\n text?: string;\n href: string;\n logo?: Logo;\n }\n\n export interface Divider {\n type: 'divider';\n }\n\n export interface Link {\n type: 'link';\n text: string;\n href: string;\n external?: boolean;\n externalIconAriaLabel?: string;\n info?: React.ReactNode;\n }\n\n export interface Section {\n type: 'section';\n text: string;\n items: ReadonlyArray<Item>;\n defaultExpanded?: boolean;\n }\n\n export interface SectionGroup {\n type: 'section-group';\n title: string;\n items: ReadonlyArray<Section | Link | LinkGroup | ExpandableLinkGroup>;\n }\n export interface LinkGroup {\n type: 'link-group';\n text: string;\n href: string;\n items: ReadonlyArray<Item>;\n }\n\n export interface ExpandableLinkGroup {\n type: 'expandable-link-group';\n text: string;\n href: string;\n items: ReadonlyArray<Item>;\n defaultExpanded?: boolean;\n }\n\n export type Item = Divider | Link | Section | LinkGroup | ExpandableLinkGroup | SectionGroup;\n\n export interface ChangeDetail {\n item: Section | ExpandableLinkGroup;\n expanded: boolean;\n expandableParents: ReadonlyArray<Section | ExpandableLinkGroup>;\n }\n\n export interface FollowDetail extends BaseNavigationDetail {\n text?: string;\n href: string;\n type?: 'link' | 'link-group' | 'expandable-link-group' | 'section-header';\n info?: React.ReactNode;\n }\n}\n"]}
|
|
@@ -11,7 +11,7 @@ export interface HeaderProps extends BaseItemComponentProps {
|
|
|
11
11
|
export declare function Header({ definition, activeHref, fireFollow }: HeaderProps): JSX.Element;
|
|
12
12
|
export interface ItemListProps extends BaseItemComponentProps {
|
|
13
13
|
items: ReadonlyArray<SideNavigationProps.Item>;
|
|
14
|
-
variant: 'section' | 'link-group' | 'expandable-link-group' | 'root';
|
|
14
|
+
variant: 'section' | 'section-group' | 'link-group' | 'expandable-link-group' | 'root';
|
|
15
15
|
}
|
|
16
16
|
export declare function ItemList({ variant, items, activeHref, fireChange, fireFollow }: ItemListProps): JSX.Element;
|
|
17
17
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/side-navigation/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAMzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAOnD,UAAU,sBAAsB;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,CAAC,IAAI,EAAE,mBAAmB,CAAC,OAAO,GAAG,mBAAmB,CAAC,mBAAmB,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACrH,UAAU,EAAE,CACV,IAAI,EACA,mBAAmB,CAAC,IAAI,GACxB,mBAAmB,CAAC,MAAM,GAC1B,mBAAmB,CAAC,SAAS,GAC7B,mBAAmB,CAAC,mBAAmB,EAC3C,KAAK,EAAE,KAAK,CAAC,cAAc,GAAG,KAAK,KAChC,IAAI,CAAC;CACX;AAED,MAAM,WAAW,WAAY,SAAQ,sBAAsB;IACzD,UAAU,EAAE,mBAAmB,CAAC,MAAM,CAAC;CACxC;AAED,wBAAgB,MAAM,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,EAAE,WAAW,eAqCzE;AAED,MAAM,WAAW,aAAc,SAAQ,sBAAsB;IAC3D,KAAK,EAAE,aAAa,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAC/C,OAAO,EAAE,SAAS,GAAG,YAAY,GAAG,uBAAuB,GAAG,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/side-navigation/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAMzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAOnD,UAAU,sBAAsB;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,CAAC,IAAI,EAAE,mBAAmB,CAAC,OAAO,GAAG,mBAAmB,CAAC,mBAAmB,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACrH,UAAU,EAAE,CACV,IAAI,EACA,mBAAmB,CAAC,IAAI,GACxB,mBAAmB,CAAC,MAAM,GAC1B,mBAAmB,CAAC,SAAS,GAC7B,mBAAmB,CAAC,mBAAmB,EAC3C,KAAK,EAAE,KAAK,CAAC,cAAc,GAAG,KAAK,KAChC,IAAI,CAAC;CACX;AAED,MAAM,WAAW,WAAY,SAAQ,sBAAsB;IACzD,UAAU,EAAE,mBAAmB,CAAC,MAAM,CAAC;CACxC;AAED,wBAAgB,MAAM,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,EAAE,WAAW,eAqCzE;AAED,MAAM,WAAW,aAAc,SAAQ,sBAAsB;IAC3D,KAAK,EAAE,aAAa,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAC/C,OAAO,EAAE,SAAS,GAAG,eAAe,GAAG,YAAY,GAAG,uBAAuB,GAAG,MAAM,CAAC;CACxF;AAED,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,EAAE,aAAa,eAuC7F"}
|
|
@@ -5,6 +5,7 @@ import React, { useCallback, useState, useEffect, useMemo } from 'react';
|
|
|
5
5
|
import clsx from 'clsx';
|
|
6
6
|
import InternalExpandableSection from '../expandable-section/internal';
|
|
7
7
|
import InternalIcon from '../icon/internal';
|
|
8
|
+
import InternalBox from '../box/internal';
|
|
8
9
|
import styles from './styles.css.js';
|
|
9
10
|
import { isPlainLeftClick } from '../internal/events';
|
|
10
11
|
import useFocusVisible from '../internal/hooks/focus-visible';
|
|
@@ -33,9 +34,10 @@ export function ItemList(_a) {
|
|
|
33
34
|
var variant = _a.variant, items = _a.items, activeHref = _a.activeHref, fireChange = _a.fireChange, fireFollow = _a.fireFollow;
|
|
34
35
|
return (React.createElement("ul", { className: clsx(styles.list, styles["list-variant-".concat(variant)]) }, items.map(function (item, i) { return (React.createElement("li", { key: i, className: styles['list-item'] },
|
|
35
36
|
item.type === 'link' && (React.createElement(Link, { definition: item, activeHref: activeHref, fireChange: fireChange, fireFollow: fireFollow })),
|
|
36
|
-
item.type === 'section' && (React.createElement(Section, { definition: item, activeHref: activeHref, fireChange: fireChange, fireFollow: fireFollow })),
|
|
37
|
+
item.type === 'section' && (React.createElement(Section, { definition: item, activeHref: activeHref, fireChange: fireChange, fireFollow: fireFollow, variant: variant })),
|
|
38
|
+
item.type === 'section-group' && (React.createElement(SectionGroup, { definition: item, activeHref: activeHref, fireChange: fireChange, fireFollow: fireFollow })),
|
|
37
39
|
item.type === 'link-group' && (React.createElement(LinkGroup, { definition: item, activeHref: activeHref, fireChange: fireChange, fireFollow: fireFollow })),
|
|
38
|
-
item.type === 'expandable-link-group' && (React.createElement(ExpandableLinkGroup, { definition: item, activeHref: activeHref, fireChange: fireChange, fireFollow: fireFollow })),
|
|
40
|
+
item.type === 'expandable-link-group' && (React.createElement(ExpandableLinkGroup, { definition: item, activeHref: activeHref, fireChange: fireChange, fireFollow: fireFollow, variant: variant })),
|
|
39
41
|
((i === 0 && item.type === 'divider') || (items[i + 1] && items[i + 1].type === 'divider')) && (React.createElement(Divider, { variant: "default" })))); })));
|
|
40
42
|
}
|
|
41
43
|
function Divider(_a) {
|
|
@@ -64,7 +66,7 @@ function Link(_a) {
|
|
|
64
66
|
}
|
|
65
67
|
function Section(_a) {
|
|
66
68
|
var _b;
|
|
67
|
-
var definition = _a.definition, activeHref = _a.activeHref, fireFollow = _a.fireFollow, fireChange = _a.fireChange;
|
|
69
|
+
var definition = _a.definition, activeHref = _a.activeHref, fireFollow = _a.fireFollow, fireChange = _a.fireChange, variant = _a.variant;
|
|
68
70
|
var _c = useState((_b = definition.defaultExpanded) !== null && _b !== void 0 ? _b : true), expanded = _c[0], setExpanded = _c[1];
|
|
69
71
|
var onExpandedChange = useCallback(function (e) {
|
|
70
72
|
fireChange(definition, e.detail.expanded);
|
|
@@ -74,9 +76,15 @@ function Section(_a) {
|
|
|
74
76
|
var _a;
|
|
75
77
|
setExpanded((_a = definition.defaultExpanded) !== null && _a !== void 0 ? _a : true);
|
|
76
78
|
}, [definition]);
|
|
77
|
-
return (React.createElement(InternalExpandableSection, { variant: "footer", expanded: expanded, onChange: onExpandedChange, className: styles.section, headerText: definition.text },
|
|
79
|
+
return (React.createElement(InternalExpandableSection, { variant: "footer", expanded: expanded, onChange: onExpandedChange, className: clsx(styles.section, variant === 'section-group' && styles['section--no-ident']), headerText: definition.text },
|
|
78
80
|
React.createElement(ItemList, { variant: "section", items: definition.items, fireFollow: fireFollow, fireChange: fireChange, activeHref: activeHref })));
|
|
79
81
|
}
|
|
82
|
+
function SectionGroup(_a) {
|
|
83
|
+
var definition = _a.definition, activeHref = _a.activeHref, fireFollow = _a.fireFollow, fireChange = _a.fireChange;
|
|
84
|
+
return (React.createElement("div", { className: styles['section-group'] },
|
|
85
|
+
React.createElement(InternalBox, { className: styles['section-group-title'], variant: "h3" }, definition.title),
|
|
86
|
+
React.createElement(ItemList, { variant: "section-group", items: definition.items, fireFollow: fireFollow, fireChange: fireChange, activeHref: activeHref })));
|
|
87
|
+
}
|
|
80
88
|
function LinkGroup(_a) {
|
|
81
89
|
var definition = _a.definition, activeHref = _a.activeHref, fireFollow = _a.fireFollow, fireChange = _a.fireChange;
|
|
82
90
|
checkSafeUrl('SideNavigation', definition.href);
|
|
@@ -85,7 +93,7 @@ function LinkGroup(_a) {
|
|
|
85
93
|
React.createElement(ItemList, { variant: "link-group", items: definition.items, fireFollow: fireFollow, fireChange: fireChange, activeHref: activeHref })));
|
|
86
94
|
}
|
|
87
95
|
function ExpandableLinkGroup(_a) {
|
|
88
|
-
var definition = _a.definition, fireFollow = _a.fireFollow, fireChange = _a.fireChange, activeHref = _a.activeHref;
|
|
96
|
+
var definition = _a.definition, fireFollow = _a.fireFollow, fireChange = _a.fireChange, activeHref = _a.activeHref, variant = _a.variant;
|
|
89
97
|
// Check whether the definition contains an active link and memoize it to avoid
|
|
90
98
|
// rechecking every time.
|
|
91
99
|
var containsActiveLink = useMemo(function () {
|
|
@@ -119,7 +127,7 @@ function ExpandableLinkGroup(_a) {
|
|
|
119
127
|
fireChange(definition, true);
|
|
120
128
|
}
|
|
121
129
|
};
|
|
122
|
-
return (React.createElement(InternalExpandableSection, { className: styles['expandable-link-group'], variant: "navigation", expanded: userExpanded !== null && userExpanded !== void 0 ? userExpanded : expanded, onChange: onExpandedChange, headerText: React.createElement(Link, { definition: { type: 'link', href: definition.href, text: definition.text }, expanded: userExpanded !== null && userExpanded !== void 0 ? userExpanded : expanded, fireFollow: onHeaderFollow, fireChange: fireChange, activeHref: activeHref }) },
|
|
130
|
+
return (React.createElement(InternalExpandableSection, { className: clsx(styles['expandable-link-group'], variant === 'section-group' && styles['expandable-link-group--no-ident']), variant: "navigation", expanded: userExpanded !== null && userExpanded !== void 0 ? userExpanded : expanded, onChange: onExpandedChange, headerText: React.createElement(Link, { definition: { type: 'link', href: definition.href, text: definition.text }, expanded: userExpanded !== null && userExpanded !== void 0 ? userExpanded : expanded, fireFollow: onHeaderFollow, fireChange: fireChange, activeHref: activeHref }) },
|
|
123
131
|
React.createElement(ItemList, { variant: "expandable-link-group", items: definition.items, fireFollow: fireFollow, fireChange: fireChange, activeHref: activeHref })));
|
|
124
132
|
}
|
|
125
133
|
//# sourceMappingURL=internal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/side-navigation/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,yBAAyB,MAAM,gCAAgC,CAAC;AACvE,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAG5C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAA4B,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAChF,OAAO,eAAe,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAmBhE,MAAM,UAAU,MAAM,CAAC,EAAmD;;QAAjD,UAAU,gBAAA,EAAE,UAAU,gBAAA,EAAE,UAAU,gBAAA;IACzD,YAAY,CAAC,gBAAgB,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAChD,IAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IAEvC,IAAM,OAAO,GAAG,WAAW,CACzB,UAAC,KAAuB;QACtB,IAAI,gBAAgB,CAAC,KAAK,CAAC,EAAE;YAC3B,UAAU,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;SAC/B;IACH,CAAC,EACD,CAAC,UAAU,EAAE,UAAU,CAAC,CACzB,CAAC;IAEF,OAAO,CACL;QACE,4BAAI,SAAS,EAAE,MAAM,CAAC,MAAM;YAC1B,sCACM,YAAY,IAChB,IAAI,EAAE,UAAU,CAAC,IAAI,EACrB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,YAAI,GAAC,MAAM,CAAC,uBAAuB,CAAC,IAAG,CAAC,CAAC,UAAU,CAAC,IAAI,MAAG,kBAClF,UAAU,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACjE,OAAO,EAAE,OAAO;gBAEf,UAAU,CAAC,IAAI,IAAI,CAClB,sCACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC;wBACnC,GAAC,MAAM,CAAC,wBAAwB,CAAC,IAAG,CAAC,UAAU,CAAC,IAAI;4BACpD,IACE,UAAU,CAAC,IAAI,EACnB,CACH;gBACD,8BAAM,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,IAAG,UAAU,CAAC,IAAI,CAAQ,CACnE,CACD;QACL,oBAAC,OAAO,IAAC,OAAO,EAAC,QAAQ,GAAG,CAC3B,CACJ,CAAC;AACJ,CAAC;AAOD,MAAM,UAAU,QAAQ,CAAC,EAAqE;QAAnE,OAAO,aAAA,EAAE,KAAK,WAAA,EAAE,UAAU,gBAAA,EAAE,UAAU,gBAAA,EAAE,UAAU,gBAAA;IAC3E,OAAO,CACL,4BAAI,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,uBAAgB,OAAO,CAAE,CAAC,CAAC,IAChE,KAAK,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,CAAC,IAAK,OAAA,CACtB,4BAAI,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC;QACvC,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,CACvB,oBAAC,IAAI,IAAC,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,GAAI,CACnG;QACA,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,CAC1B,oBAAC,OAAO,IAAC,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,GAAI,CACtG;QACA,IAAI,CAAC,IAAI,KAAK,YAAY,IAAI,CAC7B,oBAAC,SAAS,IAAC,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,GAAI,CACxG;QACA,IAAI,CAAC,IAAI,KAAK,uBAAuB,IAAI,CACxC,oBAAC,mBAAmB,IAClB,UAAU,EAAE,IAAI,EAChB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,GACtB,CACH;QACA,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,IAAI,CAC9F,oBAAC,OAAO,IAAC,OAAO,EAAC,SAAS,GAAG,CAC9B,CACE,CACN,EAvBuB,CAuBvB,CAAC,CACC,CACN,CAAC;AACJ,CAAC;AAMD,SAAS,OAAO,CAAC,EAAqC;QAAnC,eAAmB,EAAnB,OAAO,mBAAG,SAAS,KAAA;IACpC,OAAO,4BAAI,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,kBAAW,OAAO,CAAE,CAAC,CAAC,GAAI,CAAC;AAC/E,CAAC;AAOD,SAAS,IAAI,CAAC,EAA2D;;QAAzD,UAAU,gBAAA,EAAE,QAAQ,cAAA,EAAE,UAAU,gBAAA,EAAE,UAAU,gBAAA;IAC1D,YAAY,CAAC,gBAAgB,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAChD,IAAM,QAAQ,GAAG,UAAU,CAAC,IAAI,KAAK,UAAU,CAAC;IAChD,IAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IAEvC,IAAM,OAAO,GAAG,WAAW,CACzB,UAAC,KAAuB;QACtB,mEAAmE;QACnE,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,IAAI,gBAAgB,CAAC,KAAK,CAAC,EAAE;YAC3B,UAAU,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;SAC/B;IACH,CAAC,EACD,CAAC,UAAU,EAAE,UAAU,CAAC,CACzB,CAAC;IAEF,OAAO,CACL;QAGE,sCACM,YAAY,IAChB,IAAI,EAAE,UAAU,CAAC,IAAI,EACrB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,YAAI,GAAC,MAAM,CAAC,aAAa,CAAC,IAAG,QAAQ,MAAG,EACnE,MAAM,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAClD,GAAG,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,mBAC7C,QAAQ,kBACT,UAAU,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACjE,OAAO,EAAE,OAAO;YAEf,UAAU,CAAC,IAAI;YACf,UAAU,CAAC,QAAQ,IAAI,CACtB,4CACc,UAAU,CAAC,qBAAqB,EAC5C,IAAI,EAAE,UAAU,CAAC,qBAAqB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;gBAE1D,oBAAC,YAAY,IAAC,IAAI,EAAC,UAAU,EAAC,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,GAAI,CAC/D,CACR,CACC;QACH,UAAU,CAAC,IAAI,IAAI,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI,IAAG,UAAU,CAAC,IAAI,CAAQ,CACzE,CACJ,CAAC;AACJ,CAAC;AAMD,SAAS,OAAO,CAAC,EAAgE;;QAA9D,UAAU,gBAAA,EAAE,UAAU,gBAAA,EAAE,UAAU,gBAAA,EAAE,UAAU,gBAAA;IACzD,IAAA,KAA0B,QAAQ,CAAU,MAAA,UAAU,CAAC,eAAe,mCAAI,IAAI,CAAC,EAA9E,QAAQ,QAAA,EAAE,WAAW,QAAyD,CAAC;IAEtF,IAAM,gBAAgB,GAAG,WAAW,CAClC,UAAC,CAAgE;QAC/D,UAAU,CAAC,UAAU,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAC1C,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IACjC,CAAC,EACD,CAAC,UAAU,EAAE,UAAU,CAAC,CACzB,CAAC;IAEF,SAAS,CAAC;;QACR,WAAW,CAAC,MAAA,UAAU,CAAC,eAAe,mCAAI,IAAI,CAAC,CAAC;IAClD,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL,oBAAC,yBAAyB,IACxB,OAAO,EAAC,QAAQ,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,gBAAgB,EAC1B,SAAS,EAAE,MAAM,CAAC,OAAO,EACzB,UAAU,EAAE,UAAU,CAAC,IAAI;QAE3B,oBAAC,QAAQ,IACP,OAAO,EAAC,SAAS,EACjB,KAAK,EAAE,UAAU,CAAC,KAAK,EACvB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,GACtB,CACwB,CAC7B,CAAC;AACJ,CAAC;AAMD,SAAS,SAAS,CAAC,EAAkE;QAAhE,UAAU,gBAAA,EAAE,UAAU,gBAAA,EAAE,UAAU,gBAAA,EAAE,UAAU,gBAAA;IACjE,YAAY,CAAC,gBAAgB,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAEhD,OAAO,CACL;QACE,oBAAC,IAAI,IACH,UAAU,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,CAAC,IAAI,EAAE,IAAI,EAAE,UAAU,CAAC,IAAI,EAAE,EAC1E,UAAU,EAAE,UAAC,CAAC,EAAE,KAAK,IAAK,OAAA,UAAU,CAAC,UAAU,EAAE,KAAK,CAAC,EAA7B,CAA6B,EACvD,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,GACtB;QACF,oBAAC,QAAQ,IACP,OAAO,EAAC,YAAY,EACpB,KAAK,EAAE,UAAU,CAAC,KAAK,EACvB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,GACtB,CACD,CACJ,CAAC;AACJ,CAAC;AAMD,SAAS,mBAAmB,CAAC,EAA4E;QAA1E,UAAU,gBAAA,EAAE,UAAU,gBAAA,EAAE,UAAU,gBAAA,EAAE,UAAU,gBAAA;IAC3E,+EAA+E;IAC/E,yBAAyB;IACzB,IAAM,kBAAkB,GAAG,OAAO,CAAC;QACjC,OAAO,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAC1E,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC;IAE7B,IAAA,KAA0B,QAAQ,CAAU;;QAChD,OAAO,MAAA,UAAU,CAAC,eAAe,mCAAI,CAAC,UAAU,CAAC,IAAI,KAAK,UAAU,IAAI,kBAAkB,CAAC,CAAC;IAC9F,CAAC,CAAC,EAFK,QAAQ,QAAA,EAAE,WAAW,QAE1B,CAAC;IAEG,IAAA,KAAkC,QAAQ,EAAuB,EAAhE,YAAY,QAAA,EAAE,eAAe,QAAmC,CAAC;IAExE,kEAAkE;IAClE,SAAS,CAAC,cAAM,OAAA,eAAe,CAAC,SAAS,CAAC,EAA1B,CAA0B,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAE1D,iFAAiF;IACjF,SAAS,CAAC;QACR,WAAW,CAAC,UAAU,CAAC,IAAI,KAAK,UAAU,IAAI,kBAAkB,CAAC,CAAC;IACpE,CAAC,EAAE,CAAC,UAAU,CAAC,IAAI,EAAE,kBAAkB,EAAE,UAAU,CAAC,CAAC,CAAC;IAEtD,oFAAoF;IACpF,SAAS,CAAC;QACR,IAAI,UAAU,CAAC,eAAe,KAAK,SAAS,EAAE;YAC5C,WAAW,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;SACzC;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,IAAM,gBAAgB,GAAG,WAAW,CAClC,UAAC,CAAgE;QAC/D,UAAU,CAAC,UAAU,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAC1C,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IACrC,CAAC,EACD,CAAC,UAAU,EAAE,UAAU,CAAC,CACzB,CAAC;IAEF,IAAM,cAAc,GAA4B,UAAC,CAAC,EAAE,KAAK;QACvD,UAAU,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;QAC9B,eAAe,CAAC,IAAI,CAAC,CAAC;QACtB,IAAI,CAAC,QAAQ,EAAE;YACb,UAAU,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;SAC9B;IACH,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,yBAAyB,IACxB,SAAS,EAAE,MAAM,CAAC,uBAAuB,CAAC,EAC1C,OAAO,EAAC,YAAY,EACpB,QAAQ,EAAE,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,QAAQ,EAClC,QAAQ,EAAE,gBAAgB,EAC1B,UAAU,EACR,oBAAC,IAAI,IACH,UAAU,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,CAAC,IAAI,EAAE,IAAI,EAAE,UAAU,CAAC,IAAI,EAAE,EAC1E,QAAQ,EAAE,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,QAAQ,EAClC,UAAU,EAAE,cAAc,EAC1B,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,GACtB;QAGJ,oBAAC,QAAQ,IACP,OAAO,EAAC,uBAAuB,EAC/B,KAAK,EAAE,UAAU,CAAC,KAAK,EACvB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,GACtB,CACwB,CAC7B,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useState, useEffect, useMemo } from 'react';\nimport clsx from 'clsx';\nimport { ExpandableSectionProps } from '../expandable-section/interfaces';\nimport InternalExpandableSection from '../expandable-section/internal';\nimport InternalIcon from '../icon/internal';\n\nimport { SideNavigationProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { NonCancelableCustomEvent, isPlainLeftClick } from '../internal/events';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport { hasActiveLink } from './util';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\n\ninterface BaseItemComponentProps {\n activeHref?: string;\n fireChange: (item: SideNavigationProps.Section | SideNavigationProps.ExpandableLinkGroup, expanded: boolean) => void;\n fireFollow: (\n item:\n | SideNavigationProps.Link\n | SideNavigationProps.Header\n | SideNavigationProps.LinkGroup\n | SideNavigationProps.ExpandableLinkGroup,\n event: React.SyntheticEvent | Event\n ) => void;\n}\n\nexport interface HeaderProps extends BaseItemComponentProps {\n definition: SideNavigationProps.Header;\n}\n\nexport function Header({ definition, activeHref, fireFollow }: HeaderProps) {\n checkSafeUrl('SideNavigation', definition.href);\n const focusVisible = useFocusVisible();\n\n const onClick = useCallback(\n (event: React.MouseEvent) => {\n if (isPlainLeftClick(event)) {\n fireFollow(definition, event);\n }\n },\n [fireFollow, definition]\n );\n\n return (\n <>\n <h2 className={styles.header}>\n <a\n {...focusVisible}\n href={definition.href}\n className={clsx(styles['header-link'], { [styles['header-link--has-logo']]: !!definition.logo })}\n aria-current={definition.href === activeHref ? 'page' : undefined}\n onClick={onClick}\n >\n {definition.logo && (\n <img\n className={clsx(styles['header-logo'], {\n [styles['header-logo--stretched']]: !definition.text,\n })}\n {...definition.logo}\n />\n )}\n <span className={styles['header-link-text']}>{definition.text}</span>\n </a>\n </h2>\n <Divider variant=\"header\" />\n </>\n );\n}\n\nexport interface ItemListProps extends BaseItemComponentProps {\n items: ReadonlyArray<SideNavigationProps.Item>;\n variant: 'section' | 'link-group' | 'expandable-link-group' | 'root';\n}\n\nexport function ItemList({ variant, items, activeHref, fireChange, fireFollow }: ItemListProps) {\n return (\n <ul className={clsx(styles.list, styles[`list-variant-${variant}`])}>\n {items.map((item, i) => (\n <li key={i} className={styles['list-item']}>\n {item.type === 'link' && (\n <Link definition={item} activeHref={activeHref} fireChange={fireChange} fireFollow={fireFollow} />\n )}\n {item.type === 'section' && (\n <Section definition={item} activeHref={activeHref} fireChange={fireChange} fireFollow={fireFollow} />\n )}\n {item.type === 'link-group' && (\n <LinkGroup definition={item} activeHref={activeHref} fireChange={fireChange} fireFollow={fireFollow} />\n )}\n {item.type === 'expandable-link-group' && (\n <ExpandableLinkGroup\n definition={item}\n activeHref={activeHref}\n fireChange={fireChange}\n fireFollow={fireFollow}\n />\n )}\n {((i === 0 && item.type === 'divider') || (items[i + 1] && items[i + 1].type === 'divider')) && (\n <Divider variant=\"default\" />\n )}\n </li>\n ))}\n </ul>\n );\n}\n\ninterface DividerProps {\n variant: 'default' | 'header';\n}\n\nfunction Divider({ variant = 'default' }: DividerProps) {\n return <hr className={clsx(styles.divider, styles[`divider-${variant}`])} />;\n}\n\ninterface LinkProps extends BaseItemComponentProps {\n definition: SideNavigationProps.Link;\n expanded?: boolean;\n}\n\nfunction Link({ definition, expanded, activeHref, fireFollow }: LinkProps) {\n checkSafeUrl('SideNavigation', definition.href);\n const isActive = definition.href === activeHref;\n const focusVisible = useFocusVisible();\n\n const onClick = useCallback(\n (event: React.MouseEvent) => {\n // Prevent the click event from toggling outer expandable sections.\n event.stopPropagation();\n\n if (isPlainLeftClick(event)) {\n fireFollow(definition, event);\n }\n },\n [fireFollow, definition]\n );\n\n return (\n <>\n {/* https://github.com/yannickcr/eslint-plugin-react/issues/2962 */}\n {/* eslint-disable-next-line react/jsx-no-target-blank */}\n <a\n {...focusVisible}\n href={definition.href}\n className={clsx(styles.link, { [styles['link-active']]: isActive })}\n target={definition.external ? '_blank' : undefined}\n rel={definition.external ? 'noopener noreferrer' : undefined}\n aria-expanded={expanded}\n aria-current={definition.href === activeHref ? 'page' : undefined}\n onClick={onClick}\n >\n {definition.text}\n {definition.external && (\n <span\n aria-label={definition.externalIconAriaLabel}\n role={definition.externalIconAriaLabel ? 'img' : undefined}\n >\n <InternalIcon name=\"external\" className={styles['external-icon']} />\n </span>\n )}\n </a>\n {definition.info && <span className={styles.info}>{definition.info}</span>}\n </>\n );\n}\n\ninterface SectionProps extends BaseItemComponentProps {\n definition: SideNavigationProps.Section;\n}\n\nfunction Section({ definition, activeHref, fireFollow, fireChange }: SectionProps) {\n const [expanded, setExpanded] = useState<boolean>(definition.defaultExpanded ?? true);\n\n const onExpandedChange = useCallback(\n (e: NonCancelableCustomEvent<ExpandableSectionProps.ChangeDetail>) => {\n fireChange(definition, e.detail.expanded);\n setExpanded(e.detail.expanded);\n },\n [definition, fireChange]\n );\n\n useEffect(() => {\n setExpanded(definition.defaultExpanded ?? true);\n }, [definition]);\n\n return (\n <InternalExpandableSection\n variant=\"footer\"\n expanded={expanded}\n onChange={onExpandedChange}\n className={styles.section}\n headerText={definition.text}\n >\n <ItemList\n variant=\"section\"\n items={definition.items}\n fireFollow={fireFollow}\n fireChange={fireChange}\n activeHref={activeHref}\n />\n </InternalExpandableSection>\n );\n}\n\ninterface LinkGroupProps extends BaseItemComponentProps {\n definition: SideNavigationProps.LinkGroup;\n}\n\nfunction LinkGroup({ definition, activeHref, fireFollow, fireChange }: LinkGroupProps) {\n checkSafeUrl('SideNavigation', definition.href);\n\n return (\n <>\n <Link\n definition={{ type: 'link', href: definition.href, text: definition.text }}\n fireFollow={(_, event) => fireFollow(definition, event)}\n fireChange={fireChange}\n activeHref={activeHref}\n />\n <ItemList\n variant=\"link-group\"\n items={definition.items}\n fireFollow={fireFollow}\n fireChange={fireChange}\n activeHref={activeHref}\n />\n </>\n );\n}\n\ninterface ExpandableLinkGroupProps extends BaseItemComponentProps {\n definition: SideNavigationProps.ExpandableLinkGroup;\n}\n\nfunction ExpandableLinkGroup({ definition, fireFollow, fireChange, activeHref }: ExpandableLinkGroupProps) {\n // Check whether the definition contains an active link and memoize it to avoid\n // rechecking every time.\n const containsActiveLink = useMemo(() => {\n return activeHref ? hasActiveLink(definition.items, activeHref) : false;\n }, [activeHref, definition.items]);\n\n const [expanded, setExpanded] = useState<boolean>(() => {\n return definition.defaultExpanded ?? (definition.href === activeHref || containsActiveLink);\n });\n\n const [userExpanded, setUserExpanded] = useState<boolean | undefined>();\n\n // Reset user expansion status when the items property is updated.\n useEffect(() => setUserExpanded(undefined), [definition]);\n\n // By default, the expandable section is open when there's an active link inside.\n useEffect(() => {\n setExpanded(definition.href === activeHref || containsActiveLink);\n }, [definition.href, containsActiveLink, activeHref]);\n\n // If the definition object itself is updated, reset the expansion state to default.\n useEffect(() => {\n if (definition.defaultExpanded !== undefined) {\n setExpanded(definition.defaultExpanded);\n }\n }, [definition]);\n\n const onExpandedChange = useCallback(\n (e: NonCancelableCustomEvent<ExpandableSectionProps.ChangeDetail>) => {\n fireChange(definition, e.detail.expanded);\n setUserExpanded(e.detail.expanded);\n },\n [definition, fireChange]\n );\n\n const onHeaderFollow: LinkProps['fireFollow'] = (_, event) => {\n fireFollow(definition, event);\n setUserExpanded(true);\n if (!expanded) {\n fireChange(definition, true);\n }\n };\n\n return (\n <InternalExpandableSection\n className={styles['expandable-link-group']}\n variant=\"navigation\"\n expanded={userExpanded ?? expanded}\n onChange={onExpandedChange}\n headerText={\n <Link\n definition={{ type: 'link', href: definition.href, text: definition.text }}\n expanded={userExpanded ?? expanded}\n fireFollow={onHeaderFollow}\n fireChange={fireChange}\n activeHref={activeHref}\n />\n }\n >\n <ItemList\n variant=\"expandable-link-group\"\n items={definition.items}\n fireFollow={fireFollow}\n fireChange={fireChange}\n activeHref={activeHref}\n />\n </InternalExpandableSection>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/side-navigation/internal.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, { useCallback, useState, useEffect, useMemo } from 'react';\nimport clsx from 'clsx';\nimport { ExpandableSectionProps } from '../expandable-section/interfaces';\nimport InternalExpandableSection from '../expandable-section/internal';\nimport InternalIcon from '../icon/internal';\nimport InternalBox from '../box/internal';\nimport { SideNavigationProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { NonCancelableCustomEvent, isPlainLeftClick } from '../internal/events';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport { hasActiveLink } from './util';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\n\ninterface BaseItemComponentProps {\n activeHref?: string;\n fireChange: (item: SideNavigationProps.Section | SideNavigationProps.ExpandableLinkGroup, expanded: boolean) => void;\n fireFollow: (\n item:\n | SideNavigationProps.Link\n | SideNavigationProps.Header\n | SideNavigationProps.LinkGroup\n | SideNavigationProps.ExpandableLinkGroup,\n event: React.SyntheticEvent | Event\n ) => void;\n}\n\nexport interface HeaderProps extends BaseItemComponentProps {\n definition: SideNavigationProps.Header;\n}\n\nexport function Header({ definition, activeHref, fireFollow }: HeaderProps) {\n checkSafeUrl('SideNavigation', definition.href);\n const focusVisible = useFocusVisible();\n\n const onClick = useCallback(\n (event: React.MouseEvent) => {\n if (isPlainLeftClick(event)) {\n fireFollow(definition, event);\n }\n },\n [fireFollow, definition]\n );\n\n return (\n <>\n <h2 className={styles.header}>\n <a\n {...focusVisible}\n href={definition.href}\n className={clsx(styles['header-link'], { [styles['header-link--has-logo']]: !!definition.logo })}\n aria-current={definition.href === activeHref ? 'page' : undefined}\n onClick={onClick}\n >\n {definition.logo && (\n <img\n className={clsx(styles['header-logo'], {\n [styles['header-logo--stretched']]: !definition.text,\n })}\n {...definition.logo}\n />\n )}\n <span className={styles['header-link-text']}>{definition.text}</span>\n </a>\n </h2>\n <Divider variant=\"header\" />\n </>\n );\n}\n\nexport interface ItemListProps extends BaseItemComponentProps {\n items: ReadonlyArray<SideNavigationProps.Item>;\n variant: 'section' | 'section-group' | 'link-group' | 'expandable-link-group' | 'root';\n}\n\nexport function ItemList({ variant, items, activeHref, fireChange, fireFollow }: ItemListProps) {\n return (\n <ul className={clsx(styles.list, styles[`list-variant-${variant}`])}>\n {items.map((item, i) => (\n <li key={i} className={styles['list-item']}>\n {item.type === 'link' && (\n <Link definition={item} activeHref={activeHref} fireChange={fireChange} fireFollow={fireFollow} />\n )}\n {item.type === 'section' && (\n <Section\n definition={item}\n activeHref={activeHref}\n fireChange={fireChange}\n fireFollow={fireFollow}\n variant={variant}\n />\n )}\n {item.type === 'section-group' && (\n <SectionGroup definition={item} activeHref={activeHref} fireChange={fireChange} fireFollow={fireFollow} />\n )}\n {item.type === 'link-group' && (\n <LinkGroup definition={item} activeHref={activeHref} fireChange={fireChange} fireFollow={fireFollow} />\n )}\n {item.type === 'expandable-link-group' && (\n <ExpandableLinkGroup\n definition={item}\n activeHref={activeHref}\n fireChange={fireChange}\n fireFollow={fireFollow}\n variant={variant}\n />\n )}\n {((i === 0 && item.type === 'divider') || (items[i + 1] && items[i + 1].type === 'divider')) && (\n <Divider variant=\"default\" />\n )}\n </li>\n ))}\n </ul>\n );\n}\n\ninterface DividerProps {\n variant: 'default' | 'header';\n}\n\nfunction Divider({ variant = 'default' }: DividerProps) {\n return <hr className={clsx(styles.divider, styles[`divider-${variant}`])} />;\n}\n\ninterface LinkProps extends BaseItemComponentProps {\n definition: SideNavigationProps.Link;\n expanded?: boolean;\n}\n\nfunction Link({ definition, expanded, activeHref, fireFollow }: LinkProps) {\n checkSafeUrl('SideNavigation', definition.href);\n const isActive = definition.href === activeHref;\n const focusVisible = useFocusVisible();\n\n const onClick = useCallback(\n (event: React.MouseEvent) => {\n // Prevent the click event from toggling outer expandable sections.\n event.stopPropagation();\n\n if (isPlainLeftClick(event)) {\n fireFollow(definition, event);\n }\n },\n [fireFollow, definition]\n );\n\n return (\n <>\n {/* https://github.com/yannickcr/eslint-plugin-react/issues/2962 */}\n {/* eslint-disable-next-line react/jsx-no-target-blank */}\n <a\n {...focusVisible}\n href={definition.href}\n className={clsx(styles.link, { [styles['link-active']]: isActive })}\n target={definition.external ? '_blank' : undefined}\n rel={definition.external ? 'noopener noreferrer' : undefined}\n aria-expanded={expanded}\n aria-current={definition.href === activeHref ? 'page' : undefined}\n onClick={onClick}\n >\n {definition.text}\n {definition.external && (\n <span\n aria-label={definition.externalIconAriaLabel}\n role={definition.externalIconAriaLabel ? 'img' : undefined}\n >\n <InternalIcon name=\"external\" className={styles['external-icon']} />\n </span>\n )}\n </a>\n {definition.info && <span className={styles.info}>{definition.info}</span>}\n </>\n );\n}\n\ninterface SectionProps extends BaseItemComponentProps {\n definition: SideNavigationProps.Section;\n variant: 'section' | 'section-group' | 'link-group' | 'expandable-link-group' | 'root';\n}\n\nfunction Section({ definition, activeHref, fireFollow, fireChange, variant }: SectionProps) {\n const [expanded, setExpanded] = useState<boolean>(definition.defaultExpanded ?? true);\n\n const onExpandedChange = useCallback(\n (e: NonCancelableCustomEvent<ExpandableSectionProps.ChangeDetail>) => {\n fireChange(definition, e.detail.expanded);\n setExpanded(e.detail.expanded);\n },\n [definition, fireChange]\n );\n\n useEffect(() => {\n setExpanded(definition.defaultExpanded ?? true);\n }, [definition]);\n\n return (\n <InternalExpandableSection\n variant=\"footer\"\n expanded={expanded}\n onChange={onExpandedChange}\n className={clsx(styles.section, variant === 'section-group' && styles['section--no-ident'])}\n headerText={definition.text}\n >\n <ItemList\n variant=\"section\"\n items={definition.items}\n fireFollow={fireFollow}\n fireChange={fireChange}\n activeHref={activeHref}\n />\n </InternalExpandableSection>\n );\n}\n\ninterface SectionGroupProps extends BaseItemComponentProps {\n definition: SideNavigationProps.SectionGroup;\n}\n\nfunction SectionGroup({ definition, activeHref, fireFollow, fireChange }: SectionGroupProps) {\n return (\n <div className={styles['section-group']}>\n <InternalBox className={styles['section-group-title']} variant=\"h3\">\n {definition.title}\n </InternalBox>\n <ItemList\n variant=\"section-group\"\n items={definition.items}\n fireFollow={fireFollow}\n fireChange={fireChange}\n activeHref={activeHref}\n />\n </div>\n );\n}\n\ninterface LinkGroupProps extends BaseItemComponentProps {\n definition: SideNavigationProps.LinkGroup;\n}\n\nfunction LinkGroup({ definition, activeHref, fireFollow, fireChange }: LinkGroupProps) {\n checkSafeUrl('SideNavigation', definition.href);\n\n return (\n <>\n <Link\n definition={{ type: 'link', href: definition.href, text: definition.text }}\n fireFollow={(_, event) => fireFollow(definition, event)}\n fireChange={fireChange}\n activeHref={activeHref}\n />\n <ItemList\n variant=\"link-group\"\n items={definition.items}\n fireFollow={fireFollow}\n fireChange={fireChange}\n activeHref={activeHref}\n />\n </>\n );\n}\n\ninterface ExpandableLinkGroupProps extends BaseItemComponentProps {\n definition: SideNavigationProps.ExpandableLinkGroup;\n variant: 'section' | 'section-group' | 'link-group' | 'expandable-link-group' | 'root';\n}\n\nfunction ExpandableLinkGroup({ definition, fireFollow, fireChange, activeHref, variant }: ExpandableLinkGroupProps) {\n // Check whether the definition contains an active link and memoize it to avoid\n // rechecking every time.\n const containsActiveLink = useMemo(() => {\n return activeHref ? hasActiveLink(definition.items, activeHref) : false;\n }, [activeHref, definition.items]);\n\n const [expanded, setExpanded] = useState<boolean>(() => {\n return definition.defaultExpanded ?? (definition.href === activeHref || containsActiveLink);\n });\n\n const [userExpanded, setUserExpanded] = useState<boolean | undefined>();\n\n // Reset user expansion status when the items property is updated.\n useEffect(() => setUserExpanded(undefined), [definition]);\n\n // By default, the expandable section is open when there's an active link inside.\n useEffect(() => {\n setExpanded(definition.href === activeHref || containsActiveLink);\n }, [definition.href, containsActiveLink, activeHref]);\n\n // If the definition object itself is updated, reset the expansion state to default.\n useEffect(() => {\n if (definition.defaultExpanded !== undefined) {\n setExpanded(definition.defaultExpanded);\n }\n }, [definition]);\n\n const onExpandedChange = useCallback(\n (e: NonCancelableCustomEvent<ExpandableSectionProps.ChangeDetail>) => {\n fireChange(definition, e.detail.expanded);\n setUserExpanded(e.detail.expanded);\n },\n [definition, fireChange]\n );\n\n const onHeaderFollow: LinkProps['fireFollow'] = (_, event) => {\n fireFollow(definition, event);\n setUserExpanded(true);\n if (!expanded) {\n fireChange(definition, true);\n }\n };\n\n return (\n <InternalExpandableSection\n className={clsx(\n styles['expandable-link-group'],\n variant === 'section-group' && styles['expandable-link-group--no-ident']\n )}\n variant=\"navigation\"\n expanded={userExpanded ?? expanded}\n onChange={onExpandedChange}\n headerText={\n <Link\n definition={{ type: 'link', href: definition.href, text: definition.text }}\n expanded={userExpanded ?? expanded}\n fireFollow={onHeaderFollow}\n fireChange={fireChange}\n activeHref={activeHref}\n />\n }\n >\n <ItemList\n variant=\"expandable-link-group\"\n items={definition.items}\n fireFollow={fireFollow}\n fireChange={fireChange}\n activeHref={activeHref}\n />\n </InternalExpandableSection>\n );\n}\n"]}
|
|
@@ -1,27 +1,31 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"root": "
|
|
5
|
-
"header": "
|
|
6
|
-
"header-link": "awsui_header-
|
|
7
|
-
"header-link--has-logo": "awsui_header-link--has-
|
|
8
|
-
"header-link-text": "awsui_header-link-
|
|
9
|
-
"header-logo": "awsui_header-
|
|
10
|
-
"header-logo--stretched": "awsui_header-logo--
|
|
11
|
-
"list-container": "awsui_list-
|
|
12
|
-
"list": "
|
|
13
|
-
"list-variant-root": "awsui_list-variant-
|
|
14
|
-
"list-variant-expandable-link-group": "awsui_list-variant-expandable-link-
|
|
15
|
-
"list-item": "awsui_list-
|
|
16
|
-
"section": "
|
|
17
|
-
"expandable-link-group": "awsui_expandable-link-
|
|
18
|
-
"section-
|
|
19
|
-
"link": "
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"
|
|
4
|
+
"root": "awsui_root_l0dv0_axmnk_93",
|
|
5
|
+
"header": "awsui_header_l0dv0_axmnk_109",
|
|
6
|
+
"header-link": "awsui_header-link_l0dv0_axmnk_120",
|
|
7
|
+
"header-link--has-logo": "awsui_header-link--has-logo_l0dv0_axmnk_130",
|
|
8
|
+
"header-link-text": "awsui_header-link-text_l0dv0_axmnk_130",
|
|
9
|
+
"header-logo": "awsui_header-logo_l0dv0_axmnk_134",
|
|
10
|
+
"header-logo--stretched": "awsui_header-logo--stretched_l0dv0_axmnk_140",
|
|
11
|
+
"list-container": "awsui_list-container_l0dv0_axmnk_145",
|
|
12
|
+
"list": "awsui_list_l0dv0_axmnk_145",
|
|
13
|
+
"list-variant-root": "awsui_list-variant-root_l0dv0_axmnk_155",
|
|
14
|
+
"list-variant-expandable-link-group": "awsui_list-variant-expandable-link-group_l0dv0_axmnk_161",
|
|
15
|
+
"list-item": "awsui_list-item_l0dv0_axmnk_165",
|
|
16
|
+
"section": "awsui_section_l0dv0_axmnk_171",
|
|
17
|
+
"expandable-link-group": "awsui_expandable-link-group_l0dv0_axmnk_172",
|
|
18
|
+
"section--no-ident": "awsui_section--no-ident_l0dv0_axmnk_175",
|
|
19
|
+
"expandable-link-group--no-ident": "awsui_expandable-link-group--no-ident_l0dv0_axmnk_176",
|
|
20
|
+
"list-variant-section-group": "awsui_list-variant-section-group_l0dv0_axmnk_189",
|
|
21
|
+
"section-group": "awsui_section-group_l0dv0_axmnk_194",
|
|
22
|
+
"section-group-title": "awsui_section-group-title_l0dv0_axmnk_204",
|
|
23
|
+
"link": "awsui_link_l0dv0_axmnk_208",
|
|
24
|
+
"link-active": "awsui_link-active_l0dv0_axmnk_217",
|
|
25
|
+
"info": "awsui_info_l0dv0_axmnk_251",
|
|
26
|
+
"external-icon": "awsui_external-icon_l0dv0_axmnk_255",
|
|
27
|
+
"divider": "awsui_divider_l0dv0_axmnk_259",
|
|
28
|
+
"divider-default": "awsui_divider-default_l0dv0_axmnk_264",
|
|
29
|
+
"divider-header": "awsui_divider-header_l0dv0_axmnk_268"
|
|
26
30
|
};
|
|
27
31
|
|
|
@@ -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
|
-
.
|
|
93
|
+
.awsui_root_l0dv0_axmnk_93:not(#\9) {
|
|
94
94
|
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
|
|
95
95
|
border-collapse: separate;
|
|
96
96
|
border-spacing: 0;
|
|
@@ -132,13 +132,18 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
132
132
|
word-break: break-word;
|
|
133
133
|
}
|
|
134
134
|
|
|
135
|
-
.
|
|
135
|
+
.awsui_header_l0dv0_axmnk_109:not(#\9) {
|
|
136
|
+
font-size: var(--font-panel-header-size-0vdgjc, 20px);
|
|
137
|
+
line-height: var(--font-panel-header-line-height-x2226j, 24px);
|
|
138
|
+
font-weight: var(--font-heading-l-weight-xm7ks9, 800);
|
|
139
|
+
-webkit-font-smoothing: var(--font-smoothing-webkit-vu3hx4, antialiased);
|
|
140
|
+
-moz-osx-font-smoothing: var(--font-smoothing-moz-osx-nkh1jb, grayscale);
|
|
136
141
|
margin: 0;
|
|
137
142
|
padding: var(--space-scaled-l-t03y3z, 20px) var(--space-panel-nav-left-o5fvw3, 28px);
|
|
138
143
|
padding-right: calc(var(--space-scaled-xxl-pfgv96, 32px) + var(--space-xl-a39hup, 24px));
|
|
139
144
|
}
|
|
140
145
|
|
|
141
|
-
.awsui_header-
|
|
146
|
+
.awsui_header-link_l0dv0_axmnk_120:not(#\9) {
|
|
142
147
|
font-size: var(--font-panel-header-size-0vdgjc, 20px);
|
|
143
148
|
line-height: var(--font-panel-header-line-height-x2226j, 24px);
|
|
144
149
|
font-weight: var(--font-heading-l-weight-xm7ks9, 800);
|
|
@@ -148,67 +153,85 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
148
153
|
min-height: var(--font-panel-header-line-height-x2226j, 24px);
|
|
149
154
|
display: flex;
|
|
150
155
|
}
|
|
151
|
-
.awsui_header-link--has-
|
|
156
|
+
.awsui_header-link--has-logo_l0dv0_axmnk_130 > .awsui_header-link-text_l0dv0_axmnk_130:not(#\9) {
|
|
152
157
|
font-weight: 400;
|
|
153
158
|
}
|
|
154
159
|
|
|
155
|
-
.awsui_header-
|
|
160
|
+
.awsui_header-logo_l0dv0_axmnk_134:not(#\9) {
|
|
156
161
|
margin-right: var(--space-s-hv8c1d, 12px);
|
|
157
162
|
margin-top: var(--space-xxxs-k2w98v, 2px);
|
|
158
163
|
max-width: calc(1.25 * var(--size-icon-big-cu55wt, 32px));
|
|
159
164
|
align-self: flex-start;
|
|
160
165
|
}
|
|
161
|
-
.awsui_header-logo--
|
|
166
|
+
.awsui_header-logo--stretched_l0dv0_axmnk_140:not(#\9) {
|
|
162
167
|
max-width: 100%;
|
|
163
168
|
margin-right: 0;
|
|
164
169
|
}
|
|
165
170
|
|
|
166
|
-
.awsui_list-
|
|
171
|
+
.awsui_list-container_l0dv0_axmnk_145:not(#\9) {
|
|
167
172
|
margin-top: var(--space-scaled-l-t03y3z, 20px);
|
|
168
173
|
}
|
|
169
174
|
|
|
170
|
-
.
|
|
175
|
+
.awsui_list_l0dv0_axmnk_145:not(#\9) {
|
|
171
176
|
margin: 0;
|
|
172
177
|
padding: 0;
|
|
173
178
|
padding-left: var(--space-l-4vl6xu, 20px);
|
|
174
179
|
}
|
|
175
180
|
|
|
176
|
-
.awsui_list-variant-
|
|
181
|
+
.awsui_list-variant-root_l0dv0_axmnk_155:not(#\9) {
|
|
177
182
|
margin: 0;
|
|
178
183
|
margin-bottom: var(--space-scaled-xxxl-ffokcj, 40px);
|
|
179
184
|
padding: 0 var(--space-panel-side-right-kev4k9, 24px) 0 var(--space-panel-nav-left-o5fvw3, 28px);
|
|
180
185
|
}
|
|
181
186
|
|
|
182
|
-
.awsui_list-variant-expandable-link-
|
|
187
|
+
.awsui_list-variant-expandable-link-group_l0dv0_axmnk_161:not(#\9) {
|
|
183
188
|
padding-left: var(--space-xxxl-bo9z7f, 40px);
|
|
184
189
|
}
|
|
185
190
|
|
|
186
|
-
.awsui_list-
|
|
191
|
+
.awsui_list-item_l0dv0_axmnk_165:not(#\9) {
|
|
187
192
|
margin: var(--space-scaled-xs-6859qs, 8px) 0;
|
|
188
193
|
padding: 0;
|
|
189
194
|
list-style: none;
|
|
190
195
|
}
|
|
191
196
|
|
|
192
|
-
.
|
|
193
|
-
.awsui_expandable-link-
|
|
197
|
+
.awsui_section_l0dv0_axmnk_171:not(#\9),
|
|
198
|
+
.awsui_expandable-link-group_l0dv0_axmnk_172:not(#\9) {
|
|
194
199
|
margin-left: calc(-1 * var(--space-l-4vl6xu, 20px));
|
|
195
200
|
}
|
|
201
|
+
.awsui_section--no-ident_l0dv0_axmnk_175:not(#\9),
|
|
202
|
+
.awsui_expandable-link-group--no-ident_l0dv0_axmnk_176:not(#\9) {
|
|
203
|
+
margin-left: 0;
|
|
204
|
+
}
|
|
196
205
|
|
|
197
|
-
.
|
|
206
|
+
.awsui_section_l0dv0_axmnk_171:not(#\9) {
|
|
198
207
|
margin-top: calc(var(--space-scaled-2x-l-yejodm, 20px) - var(--border-divider-section-width-4wm2it, 2px));
|
|
199
208
|
margin-bottom: calc(var(--space-scaled-2x-l-yejodm, 20px) - var(--border-divider-section-width-4wm2it, 2px));
|
|
200
209
|
/* stylelint-disable-next-line selector-max-type */
|
|
201
210
|
}
|
|
202
|
-
.
|
|
211
|
+
.awsui_section_l0dv0_axmnk_171 > div:not(#\9) {
|
|
203
212
|
padding: 0;
|
|
204
213
|
}
|
|
205
214
|
|
|
206
|
-
.
|
|
207
|
-
|
|
208
|
-
|
|
215
|
+
.awsui_list-variant-section-group_l0dv0_axmnk_189:not(#\9) {
|
|
216
|
+
margin: 0;
|
|
217
|
+
padding: 0;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.awsui_section-group_l0dv0_axmnk_194:not(#\9) {
|
|
221
|
+
font-size: var(--font-heading-m-size-6e3jmg, 20px);
|
|
222
|
+
line-height: var(--font-heading-m-line-height-u3t54f, 24px);
|
|
223
|
+
letter-spacing: var(--font-heading-m-letter-spacing-r00pg3, -0.01em);
|
|
224
|
+
font-weight: var(--font-heading-m-weight-hi5n0j, 800);
|
|
225
|
+
-webkit-font-smoothing: var(--font-smoothing-webkit-vu3hx4, antialiased);
|
|
226
|
+
-moz-osx-font-smoothing: var(--font-smoothing-moz-osx-nkh1jb, grayscale);
|
|
227
|
+
margin: 0;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.awsui_section-group-title_l0dv0_axmnk_204:not(#\9) {
|
|
231
|
+
/* used in test-utils */
|
|
209
232
|
}
|
|
210
233
|
|
|
211
|
-
.
|
|
234
|
+
.awsui_link_l0dv0_axmnk_208:not(#\9) {
|
|
212
235
|
font-size: var(--font-body-m-size-sregvd, 14px);
|
|
213
236
|
line-height: var(--font-body-m-line-height-i7xxvv, 22px);
|
|
214
237
|
color: var(--color-text-body-secondary-fdstdf, #414d5c);
|
|
@@ -217,30 +240,30 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
217
240
|
-moz-osx-font-smoothing: auto;
|
|
218
241
|
}
|
|
219
242
|
|
|
220
|
-
.awsui_link-
|
|
243
|
+
.awsui_link-active_l0dv0_axmnk_217:not(#\9) {
|
|
221
244
|
font-weight: var(--font-wayfinding-link-active-weight-l3fid7, 800);
|
|
222
245
|
-webkit-font-smoothing: var(--font-smoothing-webkit-vu3hx4, antialiased);
|
|
223
246
|
-moz-osx-font-smoothing: var(--font-smoothing-moz-osx-nkh1jb, grayscale);
|
|
224
247
|
color: var(--color-text-accent-s1eqko, #0972d3);
|
|
225
248
|
}
|
|
226
249
|
|
|
227
|
-
.awsui_header-
|
|
228
|
-
.
|
|
250
|
+
.awsui_header-link_l0dv0_axmnk_120:not(#\9),
|
|
251
|
+
.awsui_link_l0dv0_axmnk_208:not(#\9) {
|
|
229
252
|
text-decoration: none;
|
|
230
253
|
}
|
|
231
|
-
.awsui_header-
|
|
232
|
-
.
|
|
254
|
+
.awsui_header-link_l0dv0_axmnk_120:not(#\9):hover,
|
|
255
|
+
.awsui_link_l0dv0_axmnk_208:not(#\9):hover {
|
|
233
256
|
color: var(--color-text-accent-s1eqko, #0972d3);
|
|
234
257
|
}
|
|
235
|
-
.awsui_header-
|
|
236
|
-
.
|
|
258
|
+
.awsui_header-link_l0dv0_axmnk_120:not(#\9):focus,
|
|
259
|
+
.awsui_link_l0dv0_axmnk_208:not(#\9):focus {
|
|
237
260
|
outline: none;
|
|
238
261
|
}
|
|
239
|
-
.awsui_header-
|
|
262
|
+
.awsui_header-link_l0dv0_axmnk_120:not(#\9):hover, .awsui_header-link_l0dv0_axmnk_120:not(#\9):focus, .awsui_link_l0dv0_axmnk_208:not(#\9):hover, .awsui_link_l0dv0_axmnk_208:not(#\9):focus {
|
|
240
263
|
text-decoration: none;
|
|
241
264
|
}
|
|
242
|
-
.awsui_header-
|
|
243
|
-
.
|
|
265
|
+
.awsui_header-link_l0dv0_axmnk_120[data-awsui-focus-visible=true]:not(#\9):focus,
|
|
266
|
+
.awsui_link_l0dv0_axmnk_208[data-awsui-focus-visible=true]:not(#\9):focus {
|
|
244
267
|
outline: thin dotted;
|
|
245
268
|
outline: var(--border-link-focus-ring-outline-k2wccv, 0);
|
|
246
269
|
outline-offset: 2px;
|
|
@@ -249,23 +272,23 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
249
272
|
box-shadow: 0 0 0 var(--border-link-focus-ring-shadow-spread-nv4ahb, 2px) var(--color-border-item-focused-ap3b6s, #0972d3);
|
|
250
273
|
}
|
|
251
274
|
|
|
252
|
-
.
|
|
275
|
+
.awsui_info_l0dv0_axmnk_251:not(#\9) {
|
|
253
276
|
margin-left: var(--space-xs-rsr2qu, 8px);
|
|
254
277
|
}
|
|
255
278
|
|
|
256
|
-
.awsui_external-
|
|
279
|
+
.awsui_external-icon_l0dv0_axmnk_255:not(#\9) {
|
|
257
280
|
margin-left: var(--space-xxs-ynfts5, 4px);
|
|
258
281
|
}
|
|
259
282
|
|
|
260
|
-
.
|
|
283
|
+
.awsui_divider_l0dv0_axmnk_259:not(#\9) {
|
|
261
284
|
border: none;
|
|
262
285
|
border-top: var(--border-divider-section-width-4wm2it, 2px) solid var(--color-border-divider-default-7s2wjw, #e9ebed);
|
|
263
286
|
}
|
|
264
287
|
|
|
265
|
-
.awsui_divider-
|
|
288
|
+
.awsui_divider-default_l0dv0_axmnk_264:not(#\9) {
|
|
266
289
|
margin: var(--space-scaled-2x-xl-x30c9w, 24px) calc(-1 * var(--space-s-hv8c1d, 12px));
|
|
267
290
|
}
|
|
268
291
|
|
|
269
|
-
.awsui_divider-
|
|
292
|
+
.awsui_divider-header_l0dv0_axmnk_268:not(#\9) {
|
|
270
293
|
margin-top: 0;
|
|
271
294
|
}
|