npm - @cloudscape-design/components - Versions diffs - 3.0.208 → 3.0.209 - Mend

@cloudscape-design/components 3.0.208 → 3.0.209

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

Files changed (59) hide show

package/annotation-context/annotation/styles.css.js +24 -24
package/annotation-context/annotation/styles.scoped.css +30 -30
package/annotation-context/annotation/styles.selectors.js +24 -24
package/app-layout/index.d.ts.map +1 -1
package/app-layout/index.js +1 -1
package/app-layout/index.js.map +1 -1
package/app-layout/notifications/index.d.ts +0 -1
package/app-layout/notifications/index.d.ts.map +1 -1
package/app-layout/notifications/index.js +2 -2
package/app-layout/notifications/index.js.map +1 -1
package/app-layout/notifications/styles.css.js +2 -3
package/app-layout/notifications/styles.scoped.css +5 -13
package/app-layout/notifications/styles.selectors.js +2 -3
package/app-layout/visual-refresh/notifications.d.ts.map +1 -1
package/app-layout/visual-refresh/notifications.js +1 -6
package/app-layout/visual-refresh/notifications.js.map +1 -1
package/app-layout/visual-refresh/styles.css.js +60 -60
package/app-layout/visual-refresh/styles.scoped.css +223 -223
package/app-layout/visual-refresh/styles.selectors.js +60 -60
package/cards/interfaces.d.ts +2 -1
package/cards/interfaces.d.ts.map +1 -1
package/cards/interfaces.js.map +1 -1
package/content-layout/index.d.ts +1 -1
package/content-layout/index.d.ts.map +1 -1
package/content-layout/index.js +6 -32
package/content-layout/index.js.map +1 -1
package/content-layout/internal.d.ts +6 -0
package/content-layout/internal.d.ts.map +1 -0
package/content-layout/internal.js +35 -0
package/content-layout/internal.js.map +1 -0
package/flashbar/collapsible-flashbar.d.ts.map +1 -1
package/flashbar/collapsible-flashbar.js +4 -4
package/flashbar/collapsible-flashbar.js.map +1 -1
package/flashbar/styles.css.js +43 -45
package/flashbar/styles.scoped.css +166 -271
package/flashbar/styles.selectors.js +43 -45
package/form/index.d.ts +1 -1
package/form/index.d.ts.map +1 -1
package/form/index.js +4 -3
package/form/index.js.map +1 -1
package/form/interfaces.d.ts +12 -0
package/form/interfaces.d.ts.map +1 -1
package/form/interfaces.js.map +1 -1
package/form/internal.d.ts +1 -1
package/form/internal.d.ts.map +1 -1
package/form/internal.js +21 -14
package/form/internal.js.map +1 -1
package/form/styles.css.js +9 -8
package/form/styles.scoped.css +8 -8
package/form/styles.selectors.js +9 -8
package/internal/environment.js +1 -1
package/internal/generated/custom-css-properties/index.d.ts.map +1 -1
package/internal/generated/custom-css-properties/index.js +28 -29
package/internal/generated/custom-css-properties/index.js.map +1 -1
package/internal/manifest.json +1 -1
package/package.json +1 -1
package/table/interfaces.d.ts +2 -1
package/table/interfaces.d.ts.map +1 -1
package/table/interfaces.js.map +1 -1

package/app-layout/visual-refresh/styles.selectors.js CHANGED Viewed

@@ -2,65 +2,65 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "appbar": "awsui_appbar_hyvsj_vwhok_93",
-  "appbar-nav": "awsui_appbar-nav_hyvsj_vwhok_117",
-  "breadcrumbs": "awsui_breadcrumbs_hyvsj_vwhok_121",
-  "appbar-tools": "awsui_appbar-tools_hyvsj_vwhok_125",
-  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_vwhok_166",
-  "has-notifications-content": "awsui_has-notifications-content_hyvsj_vwhok_173",
-  "has-header": "awsui_has-header_hyvsj_vwhok_179",
-  "has-dynamic-overlap-height": "awsui_has-dynamic-overlap-height_hyvsj_vwhok_179",
-  "content-type-wizard": "awsui_content-type-wizard_hyvsj_vwhok_180",
-  "content-type-cards": "awsui_content-type-cards_hyvsj_vwhok_183",
-  "content-type-table": "awsui_content-type-table_hyvsj_vwhok_184",
-  "has-sticky-background": "awsui_has-sticky-background_hyvsj_vwhok_187",
-  "background": "awsui_background_hyvsj_vwhok_221",
-  "notifications-appbar-header": "awsui_notifications-appbar-header_hyvsj_vwhok_224",
-  "sticky-notifications": "awsui_sticky-notifications_hyvsj_vwhok_236",
-  "overlap": "awsui_overlap_hyvsj_vwhok_242",
-  "content": "awsui_content_hyvsj_vwhok_180",
-  "layout": "awsui_layout_hyvsj_vwhok_333",
-  "has-max-content-width": "awsui_has-max-content-width_hyvsj_vwhok_415",
-  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_vwhok_442",
-  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_vwhok_445",
-  "has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_vwhok_449",
-  "has-split-panel": "awsui_has-split-panel_hyvsj_vwhok_463",
-  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_vwhok_463",
-  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_vwhok_475",
-  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_vwhok_478",
-  "block-body-scroll": "awsui_block-body-scroll_hyvsj_vwhok_493",
-  "container": "awsui_container_hyvsj_vwhok_501",
-  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_vwhok_527",
-  "is-navigation-open": "awsui_is-navigation-open_hyvsj_vwhok_532",
-  "is-tools-open": "awsui_is-tools-open_hyvsj_vwhok_535",
-  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_vwhok_535",
-  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_vwhok_535",
-  "content-type-default": "awsui_content-type-default_hyvsj_vwhok_555",
-  "content-type-form": "awsui_content-type-form_hyvsj_vwhok_555",
-  "unfocusable": "awsui_unfocusable_hyvsj_vwhok_596",
-  "navigation-container": "awsui_navigation-container_hyvsj_vwhok_606",
-  "show-navigation": "awsui_show-navigation_hyvsj_vwhok_641",
-  "animating": "awsui_animating_hyvsj_vwhok_663",
-  "showButtons": "awsui_showButtons_hyvsj_vwhok_1",
-  "navigation": "awsui_navigation_hyvsj_vwhok_606",
-  "openNavigation": "awsui_openNavigation_hyvsj_vwhok_1",
-  "animated-content": "awsui_animated-content_hyvsj_vwhok_724",
-  "hide-navigation": "awsui_hide-navigation_hyvsj_vwhok_733",
-  "notifications": "awsui_notifications_hyvsj_vwhok_224",
-  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_vwhok_799",
-  "position-bottom": "awsui_position-bottom_hyvsj_vwhok_845",
-  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_vwhok_1",
-  "split-panel-side": "awsui_split-panel-side_hyvsj_vwhok_874",
-  "position-side": "awsui_position-side_hyvsj_vwhok_902",
-  "openSplitPanelSide": "awsui_openSplitPanelSide_hyvsj_vwhok_1",
-  "tools-container": "awsui_tools-container_hyvsj_vwhok_939",
-  "tools": "awsui_tools_hyvsj_vwhok_939",
-  "openTools": "awsui_openTools_hyvsj_vwhok_1",
-  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_vwhok_1024",
-  "hide-tools": "awsui_hide-tools_hyvsj_vwhok_1034",
-  "show-tools": "awsui_show-tools_hyvsj_vwhok_1046",
-  "has-tools-form": "awsui_has-tools-form_hyvsj_vwhok_1024",
-  "trigger": "awsui_trigger_hyvsj_vwhok_1103",
-  "selected": "awsui_selected_hyvsj_vwhok_1142"
+  "appbar": "awsui_appbar_hyvsj_ive4w_93",
+  "appbar-nav": "awsui_appbar-nav_hyvsj_ive4w_117",
+  "breadcrumbs": "awsui_breadcrumbs_hyvsj_ive4w_121",
+  "appbar-tools": "awsui_appbar-tools_hyvsj_ive4w_125",
+  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_ive4w_166",
+  "has-notifications-content": "awsui_has-notifications-content_hyvsj_ive4w_173",
+  "has-header": "awsui_has-header_hyvsj_ive4w_179",
+  "has-dynamic-overlap-height": "awsui_has-dynamic-overlap-height_hyvsj_ive4w_179",
+  "content-type-wizard": "awsui_content-type-wizard_hyvsj_ive4w_180",
+  "content-type-cards": "awsui_content-type-cards_hyvsj_ive4w_183",
+  "content-type-table": "awsui_content-type-table_hyvsj_ive4w_184",
+  "has-sticky-background": "awsui_has-sticky-background_hyvsj_ive4w_187",
+  "background": "awsui_background_hyvsj_ive4w_221",
+  "notifications-appbar-header": "awsui_notifications-appbar-header_hyvsj_ive4w_224",
+  "sticky-notifications": "awsui_sticky-notifications_hyvsj_ive4w_236",
+  "overlap": "awsui_overlap_hyvsj_ive4w_242",
+  "content": "awsui_content_hyvsj_ive4w_180",
+  "layout": "awsui_layout_hyvsj_ive4w_333",
+  "has-max-content-width": "awsui_has-max-content-width_hyvsj_ive4w_415",
+  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_ive4w_442",
+  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_ive4w_445",
+  "has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_ive4w_449",
+  "has-split-panel": "awsui_has-split-panel_hyvsj_ive4w_463",
+  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_ive4w_463",
+  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_ive4w_475",
+  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_ive4w_478",
+  "block-body-scroll": "awsui_block-body-scroll_hyvsj_ive4w_493",
+  "container": "awsui_container_hyvsj_ive4w_501",
+  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_ive4w_527",
+  "is-navigation-open": "awsui_is-navigation-open_hyvsj_ive4w_532",
+  "is-tools-open": "awsui_is-tools-open_hyvsj_ive4w_535",
+  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_ive4w_535",
+  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_ive4w_535",
+  "content-type-default": "awsui_content-type-default_hyvsj_ive4w_555",
+  "content-type-form": "awsui_content-type-form_hyvsj_ive4w_555",
+  "unfocusable": "awsui_unfocusable_hyvsj_ive4w_596",
+  "navigation-container": "awsui_navigation-container_hyvsj_ive4w_606",
+  "show-navigation": "awsui_show-navigation_hyvsj_ive4w_641",
+  "animating": "awsui_animating_hyvsj_ive4w_663",
+  "showButtons": "awsui_showButtons_hyvsj_ive4w_1",
+  "navigation": "awsui_navigation_hyvsj_ive4w_606",
+  "openNavigation": "awsui_openNavigation_hyvsj_ive4w_1",
+  "animated-content": "awsui_animated-content_hyvsj_ive4w_724",
+  "hide-navigation": "awsui_hide-navigation_hyvsj_ive4w_733",
+  "notifications": "awsui_notifications_hyvsj_ive4w_224",
+  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_ive4w_799",
+  "position-bottom": "awsui_position-bottom_hyvsj_ive4w_845",
+  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_ive4w_1",
+  "split-panel-side": "awsui_split-panel-side_hyvsj_ive4w_874",
+  "position-side": "awsui_position-side_hyvsj_ive4w_902",
+  "openSplitPanelSide": "awsui_openSplitPanelSide_hyvsj_ive4w_1",
+  "tools-container": "awsui_tools-container_hyvsj_ive4w_939",
+  "tools": "awsui_tools_hyvsj_ive4w_939",
+  "openTools": "awsui_openTools_hyvsj_ive4w_1",
+  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_ive4w_1024",
+  "hide-tools": "awsui_hide-tools_hyvsj_ive4w_1034",
+  "show-tools": "awsui_show-tools_hyvsj_ive4w_1046",
+  "has-tools-form": "awsui_has-tools-form_hyvsj_ive4w_1024",
+  "trigger": "awsui_trigger_hyvsj_ive4w_1103",
+  "selected": "awsui_selected_hyvsj_ive4w_1142"
 };

package/cards/interfaces.d.ts CHANGED Viewed

@@ -162,7 +162,8 @@ export interface CardsProps<T = any> extends BaseComponentProps {
     /**
      * Specify a cards variant with one of the following:
      * * `container` - Use this variant to have the cards displayed as a container.
-     * * `full-page` – Use this variant when cards is the primary element on the page.
+     * * `full-page` – Use this variant when cards are the entire content of a page. Full page variants
+     *                 implement the high contrast header and content behavior automatically.
      * @visualrefresh `full-page` variant
      */
     variant?: 'container' | 'full-page';

package/cards/interfaces.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/cards/interfaces.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAY/D,MAAM,WAAW,mBAAmB;IAClC,CAAC,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG;QAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,CAAA;KAAE,GAAG,GAAG,CAAC,OAAO,CAAC;CAC9E;AAED,MAAM,WAAW,UAAU,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,kBAAkB;IAC7D;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE7B;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;;;OAIG;IACH,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IAExB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;;;;;;;;;OAcG;IACH,cAAc,EAAE,UAAU,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;IAC7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA+CG;IACH,WAAW,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;IACpD;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IAChC;;OAEG;IACH,aAAa,CAAC,EAAE,UAAU,CAAC,aAAa,CAAC;IACzC;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IACjC;;OAEG;IACH,cAAc,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;IAC9C;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IACtC;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACxC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,CAAC;IACnF;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,0BAA0B,CAAC,EAAE,MAAM,CAAC;IAEpC~~;;;;;OAKG~~;IACH,OAAO,CAAC,EAAE,WAAW,GAAG,WAAW,CAAC;CACrC;AAED,yBAAiB,UAAU,CAAC;IAC1B,UAAiB,cAAc,CAAC,CAAC;QAC/B,MAAM,CAAC,CAAC,IAAI,EAAE,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;QAClC,QAAQ,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;KAChD;IAED,UAAiB,iBAAiB,CAAC,CAAC;QAClC,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;QACnC,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB;IAED,UAAiB,WAAW;QAC1B,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB;IAED,KAAY,OAAO,CAAC,CAAC,IAAI,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC,CAAC;IAExD,KAAY,aAAa,GAAG,QAAQ,GAAG,OAAO,CAAC;IAE/C,UAAiB,cAAc,CAAC,CAAC;QAC/B,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;KACjC;IAED,UAAiB,qBAAqB,CAAC,CAAC;QACtC,aAAa,EAAE,CAAC,EAAE,CAAC;KACpB;IAED,KAAY,cAAc,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IAErD,UAAiB,UAAU,CAAC,CAAC;QAC3B,kBAAkB,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,MAAM,CAAC;QAC3E,mBAAmB,EAAE,MAAM,CAAC;KAC7B;IACD,UAAiB,GAAG;QAClB;;;WAGG;QACH,WAAW,IAAI,IAAI,CAAC;KACrB;CACF"}
1	+ {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/cards/interfaces.tsx"],"names":[],"mappings":"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"}

package/cards/interfaces.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/cards/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 { NonCancelableEventHandler } from '../internal/events';\n\n/\n HACK: Cast the component to a named parametrized interface.\n \n This lets us use React.forwardRef and still let the component have type\n * parameters, and the naming convention lets the documenter know that this is\n * a forwardRef-wrapped component.\n \n We don't need to expose this type to customers because it's just a simple\n * function type.\n /\nexport interface CardsForwardRefType {\n <T>(props: CardsProps<T> & { ref?: React.Ref<CardsProps.Ref> }): JSX.Element;\n}\n\nexport interface CardsProps<T = any> extends BaseComponentProps {\n /\n Displayed only when the list of items is empty.\n /\n empty?: React.ReactNode;\n\n /\n Heading element of the table container. Use the [header component](/components/header/).\n /\n header?: React.ReactNode;\n\n /\n Use this slot to add filtering controls to the component.\n /\n filter?: React.ReactNode;\n\n /\n Use this slot to add the [pagination component](/components/pagination/) to the component.\n /\n pagination?: React.ReactNode;\n\n /\n Use this slot to add [collection preferences](/components/collection-preferences/) to the component.\n /\n preferences?: React.ReactNode;\n\n /\n Specifies the items that serve as data source for a card.\n \n The `cardDefinition` property handles the display of this data.\n /\n items: ReadonlyArray<T>;\n\n /\n Renders the cards in a loading state. We recommend that you also set a `loadingText`.\n /\n loading?: boolean;\n\n /\n Specifies the text to display when in loading state.\n /\n loadingText?: string;\n\n /\n Defines what to display in each card. It has the following properties:\n * * `header` ((item) => ReactNode) - Responsible for displaying the card header. You receive the current item as an argument.\n * Use `fontSize=\"heading-m\"` on [link](/components/link/) components inside card header.\n * * `sections` (array) - Responsible for displaying the card content. Cards can have many sections in their\n * body. Each entry in the array is responsible for displaying a section. An entry has the following properties:\n * * `id`: (string) - A unique identifier for the section. The property is used as a [keys](https://reactjs.org/docs/lists-and-keys.html#keys)\n * source for React rendering, and to match entries in the `visibleSections` property (if it's defined).\n * * `header`: (ReactNode) - Responsible for displaying the section header.\n * * `content`: ((item) => ReactNode) - Responsible for displaying the section content. You receive the current item as an argument.\n * * `width`: (number) - Specifies the width of the card section in percent. Use this to display multiple sections in\n * the same row. The default value is 100%.\n \n All of the above properties are optional.\n /\n cardDefinition: CardsProps.CardDefinition<T>;\n /\n Determines the number of cards per row for any interval of container width.\n * It's an array whose entries are objects containing the following:\n * - `cards` (number) - Specifies the number of cards per row.\n * - `minWidth` (number) - Specifies the minimum container width (in pixels) for which this configuration object should apply.\n \n For example, with this configuration:\n * ```\n * [{\n * cards: 1\n * }, {\n * minWidth: 500,\n * cards: 2\n * }, {\n * minWidth: 800,\n * cards: 3\n * }]\n * ```\n \n the cards component displays:\n * * 1 card per row when the container width is below 500px.\n * * 2 cards per row when the container width is between 500px and 799px.\n * * 3 cards per row when the container width is 800px or wider.\n \n The number of cards per row can't be greater than 20.\n \n Default value:\n * ```\n * [{\n * cards: 1\n * }, {\n * minWidth: 768,\n * cards: 2\n * }, {\n * minWidth: 992,\n * cards: 3\n * }, {\n * minWidth: 1200,\n * cards: 4\n * }, {\n * minWidth: 1400,\n * cards: 5\n * }, {\n * minWidth: 1920,\n * cards: 6\n * }]\n * ```\n /\n cardsPerRow?: ReadonlyArray<CardsProps.CardsLayout>;\n /\n Specifies the property inside items that uniquely identifies them.\n * When it's set, it's used to provide [keys for React](https://reactjs.org/docs/lists-and-keys.html#keys)\n * for performance optimizations.\n \n It's also used for connecting `items` and `selectedItems` values when they don't reference the same object.\n /\n trackBy?: CardsProps.TrackBy<T>;\n /\n Specifies the selection mode. It can be either `single` or `multi`.\n /\n selectionType?: CardsProps.SelectionType;\n /\n Specifies the list of selected items.\n /\n selectedItems?: ReadonlyArray<T>;\n /\n Determines which items are disabled. If an item is disabled, users can't select it.\n /\n isItemDisabled?: CardsProps.IsItemDisabled<T>;\n /\n Adds labels to the selection components (checkboxes and radio buttons) as follows:\n * * `itemSelectionLabel` ((SelectionState, Item) => string) - Determines the label for an item.\n * * `selectionGroupLabel` (string) - Specifies the label for the group selection control.\n \n You can use the first arguments of type `SelectionState` to access the current selection\n * state of the component (for example, the `selectedItems` list). The label function for individual\n * items also receives the corresponding `Item` object. You can use the group label to\n * add a meaningful description to the whole selection.\n /\n ariaLabels?: CardsProps.AriaLabels<T>;\n /\n Specifies an array containing the `id` of each visible section. If not set, all sections are displayed.\n \n Use it in conjunction with the visible content preference of the [collection preferences](/components/collection-preferences/) component.\n \n The order of `id`s doesn't influence the order of display of sections, which is controlled by the `cardDefinition` property.\n /\n visibleSections?: ReadonlyArray<string>;\n /\n Called when a user interaction causes a change in the list of selected items.\n * The event `detail` contains the current list of `selectedItems`.\n /\n onSelectionChange?: NonCancelableEventHandler<CardsProps.SelectionChangeDetail<T>>;\n /\n If set to true, the cards header remains visible when the user scrolls down.\n /\n stickyHeader?: boolean;\n /\n Optionally provide a vertical offset (in pixels) for the sticky header, for example if you\n * need to position the sticky header below other fixed position elements on the page.\n /\n stickyHeaderVerticalOffset?: number;\n\n /\n Specify a cards variant with one of the following:\n * * `container` - Use this variant to have the cards displayed as a container.\n * * `full-page` – Use this variant when cards is the ~~primary~~ ~~element~~ on the ~~page~~.\n * @visualrefresh `full-page` variant\n /\n variant?: 'container' \| 'full-page';\n}\n\nexport namespace CardsProps {\n export interface CardDefinition<T> {\n header?(item: T): React.ReactNode;\n sections?: ReadonlyArray<SectionDefinition<T>>;\n }\n\n export interface SectionDefinition<T> {\n id?: string;\n header?: React.ReactNode;\n content?(item: T): React.ReactNode;\n width?: number;\n }\n\n export interface CardsLayout {\n cards: number;\n minWidth?: number;\n }\n\n export type TrackBy<T> = string \| ((item: T) => string);\n\n export type SelectionType = 'single' \| 'multi';\n\n export interface SelectionState<T> {\n selectedItems: ReadonlyArray<T>;\n }\n\n export interface SelectionChangeDetail<T> {\n selectedItems: T[];\n }\n\n export type IsItemDisabled<T> = (item: T) => boolean;\n\n export interface AriaLabels<T> {\n itemSelectionLabel: (data: CardsProps.SelectionState<T>, row: T) => string;\n selectionGroupLabel: string;\n }\n export interface Ref {\n /\n When the sticky header is enabled, calling this function scrolls cards's\n * scroll parent up to reveal the first card or row of cards.\n */\n scrollToTop(): void;\n }\n}\n"]}
1	+ {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/cards/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 { NonCancelableEventHandler } from '../internal/events';\n\n/\n HACK: Cast the component to a named parametrized interface.\n \n This lets us use React.forwardRef and still let the component have type\n * parameters, and the naming convention lets the documenter know that this is\n * a forwardRef-wrapped component.\n \n We don't need to expose this type to customers because it's just a simple\n * function type.\n /\nexport interface CardsForwardRefType {\n <T>(props: CardsProps<T> & { ref?: React.Ref<CardsProps.Ref> }): JSX.Element;\n}\n\nexport interface CardsProps<T = any> extends BaseComponentProps {\n /\n Displayed only when the list of items is empty.\n /\n empty?: React.ReactNode;\n\n /\n Heading element of the table container. Use the [header component](/components/header/).\n /\n header?: React.ReactNode;\n\n /\n Use this slot to add filtering controls to the component.\n /\n filter?: React.ReactNode;\n\n /\n Use this slot to add the [pagination component](/components/pagination/) to the component.\n /\n pagination?: React.ReactNode;\n\n /\n Use this slot to add [collection preferences](/components/collection-preferences/) to the component.\n /\n preferences?: React.ReactNode;\n\n /\n Specifies the items that serve as data source for a card.\n \n The `cardDefinition` property handles the display of this data.\n /\n items: ReadonlyArray<T>;\n\n /\n Renders the cards in a loading state. We recommend that you also set a `loadingText`.\n /\n loading?: boolean;\n\n /\n Specifies the text to display when in loading state.\n /\n loadingText?: string;\n\n /\n Defines what to display in each card. It has the following properties:\n * * `header` ((item) => ReactNode) - Responsible for displaying the card header. You receive the current item as an argument.\n * Use `fontSize=\"heading-m\"` on [link](/components/link/) components inside card header.\n * * `sections` (array) - Responsible for displaying the card content. Cards can have many sections in their\n * body. Each entry in the array is responsible for displaying a section. An entry has the following properties:\n * * `id`: (string) - A unique identifier for the section. The property is used as a [keys](https://reactjs.org/docs/lists-and-keys.html#keys)\n * source for React rendering, and to match entries in the `visibleSections` property (if it's defined).\n * * `header`: (ReactNode) - Responsible for displaying the section header.\n * * `content`: ((item) => ReactNode) - Responsible for displaying the section content. You receive the current item as an argument.\n * * `width`: (number) - Specifies the width of the card section in percent. Use this to display multiple sections in\n * the same row. The default value is 100%.\n \n All of the above properties are optional.\n /\n cardDefinition: CardsProps.CardDefinition<T>;\n /\n Determines the number of cards per row for any interval of container width.\n * It's an array whose entries are objects containing the following:\n * - `cards` (number) - Specifies the number of cards per row.\n * - `minWidth` (number) - Specifies the minimum container width (in pixels) for which this configuration object should apply.\n \n For example, with this configuration:\n * ```\n * [{\n * cards: 1\n * }, {\n * minWidth: 500,\n * cards: 2\n * }, {\n * minWidth: 800,\n * cards: 3\n * }]\n * ```\n \n the cards component displays:\n * * 1 card per row when the container width is below 500px.\n * * 2 cards per row when the container width is between 500px and 799px.\n * * 3 cards per row when the container width is 800px or wider.\n \n The number of cards per row can't be greater than 20.\n \n Default value:\n * ```\n * [{\n * cards: 1\n * }, {\n * minWidth: 768,\n * cards: 2\n * }, {\n * minWidth: 992,\n * cards: 3\n * }, {\n * minWidth: 1200,\n * cards: 4\n * }, {\n * minWidth: 1400,\n * cards: 5\n * }, {\n * minWidth: 1920,\n * cards: 6\n * }]\n * ```\n /\n cardsPerRow?: ReadonlyArray<CardsProps.CardsLayout>;\n /\n Specifies the property inside items that uniquely identifies them.\n * When it's set, it's used to provide [keys for React](https://reactjs.org/docs/lists-and-keys.html#keys)\n * for performance optimizations.\n \n It's also used for connecting `items` and `selectedItems` values when they don't reference the same object.\n /\n trackBy?: CardsProps.TrackBy<T>;\n /\n Specifies the selection mode. It can be either `single` or `multi`.\n /\n selectionType?: CardsProps.SelectionType;\n /\n Specifies the list of selected items.\n /\n selectedItems?: ReadonlyArray<T>;\n /\n Determines which items are disabled. If an item is disabled, users can't select it.\n /\n isItemDisabled?: CardsProps.IsItemDisabled<T>;\n /\n Adds labels to the selection components (checkboxes and radio buttons) as follows:\n * * `itemSelectionLabel` ((SelectionState, Item) => string) - Determines the label for an item.\n * * `selectionGroupLabel` (string) - Specifies the label for the group selection control.\n \n You can use the first arguments of type `SelectionState` to access the current selection\n * state of the component (for example, the `selectedItems` list). The label function for individual\n * items also receives the corresponding `Item` object. You can use the group label to\n * add a meaningful description to the whole selection.\n /\n ariaLabels?: CardsProps.AriaLabels<T>;\n /\n Specifies an array containing the `id` of each visible section. If not set, all sections are displayed.\n \n Use it in conjunction with the visible content preference of the [collection preferences](/components/collection-preferences/) component.\n \n The order of `id`s doesn't influence the order of display of sections, which is controlled by the `cardDefinition` property.\n /\n visibleSections?: ReadonlyArray<string>;\n /\n Called when a user interaction causes a change in the list of selected items.\n * The event `detail` contains the current list of `selectedItems`.\n /\n onSelectionChange?: NonCancelableEventHandler<CardsProps.SelectionChangeDetail<T>>;\n /\n If set to true, the cards header remains visible when the user scrolls down.\n /\n stickyHeader?: boolean;\n /\n Optionally provide a vertical offset (in pixels) for the sticky header, for example if you\n * need to position the sticky header below other fixed position elements on the page.\n /\n stickyHeaderVerticalOffset?: number;\n\n /\n Specify a cards variant with one of the following:\n * * `container` - Use this variant to have the cards displayed as a container.\n * * `full-page` – Use this variant when cards are the entire content of a page. Full page variants\n * implement the high contrast header and content behavior automatically.\n * @visualrefresh `full-page` variant\n /\n variant?: 'container' \| 'full-page';\n}\n\nexport namespace CardsProps {\n export interface CardDefinition<T> {\n header?(item: T): React.ReactNode;\n sections?: ReadonlyArray<SectionDefinition<T>>;\n }\n\n export interface SectionDefinition<T> {\n id?: string;\n header?: React.ReactNode;\n content?(item: T): React.ReactNode;\n width?: number;\n }\n\n export interface CardsLayout {\n cards: number;\n minWidth?: number;\n }\n\n export type TrackBy<T> = string \| ((item: T) => string);\n\n export type SelectionType = 'single' \| 'multi';\n\n export interface SelectionState<T> {\n selectedItems: ReadonlyArray<T>;\n }\n\n export interface SelectionChangeDetail<T> {\n selectedItems: T[];\n }\n\n export type IsItemDisabled<T> = (item: T) => boolean;\n\n export interface AriaLabels<T> {\n itemSelectionLabel: (data: CardsProps.SelectionState<T>, row: T) => string;\n selectionGroupLabel: string;\n }\n export interface Ref {\n /\n When the sticky header is enabled, calling this function scrolls cards's\n * scroll parent up to reveal the first card or row of cards.\n */\n scrollToTop(): void;\n }\n}\n"]}

package/content-layout/index.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
 import { ContentLayoutProps } from './interfaces';
 export { ContentLayoutProps };
-export default function ContentLayout({ children, disableOverlap, header, ...rest }: ContentLayoutProps): JSX.Element;
+export default function ContentLayout(props: ContentLayoutProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/content-layout/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/content-layout/index.tsx"],"names":[],"mappings":"~~AAKA~~,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;~~AASlD~~,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAE9B,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,~~EAAE~~,~~QAAQ,~~EAAE,~~cAAc,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,~~kBAAkB,~~eAkDtG~~"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/content-layout/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAIlD,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAE9B,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,KAAK,EAAE,kBAAkB,eAG9D"}

package/content-layout/index.js CHANGED Viewed

@@ -1,39 +1,13 @@
-import { __assign, __rest } from "tslib";
+import { __assign } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useRef } from 'react';
-import clsx from 'clsx';
+import React from 'react';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
-import { getBaseProps } from '../internal/base-component';
-import { useAppLayoutContext } from '../internal/context/app-layout-context';
+import InternalContentLayout from './internal';
 import useBaseComponent from '../internal/hooks/use-base-component';
-import { useDynamicOverlap } from '../internal/hooks/use-dynamic-overlap';
-import { useMergeRefs } from '../internal/hooks/use-merge-refs';
-import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
-import styles from './styles.css.js';
-export default function ContentLayout(_a) {
-    var _b, _c, _d;
-    var children = _a.children, disableOverlap = _a.disableOverlap, header = _a.header, rest = __rest(_a, ["children", "disableOverlap", "header"]);
-    var baseProps = getBaseProps(rest);
-    var hasBreadcrumbs = useAppLayoutContext().hasBreadcrumbs;
-    var rootElement = useRef(null);
-    var __internalRootRef = useBaseComponent('ContentLayout').__internalRootRef;
-    var mergedRef = useMergeRefs(rootElement, __internalRootRef);
-    var overlapElement = useDynamicOverlap();
-    var isVisualRefresh = useVisualRefresh();
-    /**
-     * Disable the overlap if the component is missing either a header or child
-     * content. If the component is not using visual refresh then the overlap
-     * will not be displayed at all. This is handled in the CSS not the JavaScript.
-     */
-    var isOverlapDisabled = !children || !header || disableOverlap;
-    return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles.layout, (_b = {},
-            _b[styles['is-overlap-disabled']] = isOverlapDisabled,
-            _b[styles['is-visual-refresh']] = isVisualRefresh,
-            _b)), ref: mergedRef }),
-        React.createElement("div", { className: clsx(styles.background, (_c = {}, _c[styles['is-overlap-disabled']] = isOverlapDisabled, _c), 'awsui-context-content-header'), ref: overlapElement }),
-        header && (React.createElement("div", { className: clsx(styles.header, (_d = {}, _d[styles['has-breadcrumbs']] = isVisualRefresh && hasBreadcrumbs, _d), 'awsui-context-content-header') }, header)),
-        React.createElement("div", { className: styles.content }, children)));
+export default function ContentLayout(props) {
+    var baseComponentProps = useBaseComponent('ContentLayout');
+    return React.createElement(InternalContentLayout, __assign({}, props, baseComponentProps));
 }
 applyDisplayName(ContentLayout, 'ContentLayout');
 //# sourceMappingURL=index.js.map

package/content-layout/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/content-layout/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,~~EAAE,EAAE,~~MAAM,~~EAAE,MAAM,~~OAAO,CAAC;~~AACtC~~,OAAO,~~IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,~~EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,~~EAAE~~,~~YAAY,EAAE,~~MAAM,~~4BAA4B~~,CAAC;~~AAC1D~~,OAAO,~~EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC7E,OAAO,~~gBAAgB,MAAM,sCAAsC,CAAC;~~AACpE~~,~~OAAO,EAAE,iBAAiB,EAAE,~~MAAM,~~uCAAuC,~~CAAC~~;AAC1E~~,OAAO,~~EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,CAAC,OAAO,~~UAAU,aAAa,CAAC,~~EAAiE;;IAA/D,IAAA,QAAQ,cAAA,EAAE,cAAc,oBAAA,EAAE,MAAM,YAAA,EAAK,IAAI,cAA3C,wCAA6C,CAAF~~;~~IAC/E~~,IAAM,~~SAAS~~,GAAG,~~YAAY,CAAC,IAAI,CAAC,CAAC;IAC7B,IAAA,cAAc,GAAK,mBAAmB,EAAE,eAA1B,CAA2B;IAEjD,IAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,IAAA,iBAAiB,GAAK,~~gBAAgB,CAAC,eAAe,CAAC,~~kBAAtC,CAAuC;IAChE,IAAM,SAAS,GAAG,YAAY,~~CAAC~~,WAAW,EAAE,iBAAiB,CAAC,CAAC~~;~~IAC/D~~,~~IAAM,cAAc,GAAG,iBAAiB,EAAE,CAAC;IAC3C,IAAM,eAAe,GAAG,gBAAgB,EAAE,CAAC;IAE3C;;;;OAIG;IACH,IAAM,iBAAiB,GAAG,CAAC,QAAQ,IAAI,CAAC,MAAM,IAAI,cAAc,CAAC;IAEjE,~~OAAO,~~CACL~~,~~wCACM,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM;YAChD,GAAC,MAAM,CAAC,~~qBAAqB,~~CAAC~~,~~IAAG~~,~~iBAAiB;YAClD~~,~~GAAC~~,~~MAAM~~,CAAC~~,mBAAmB,CAAC,IAAG,eAAe~~;~~gBAC9C~~,~~EACF,GAAG,EAAE,SAAS;QAEd,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,~~CAAC~~,UAAU,YACf,GAAC,MAAM,CAAC,qBAAqB,CAAC,IAAG,iBAAiB,OACpD,8BAA8B,CAC/B,EACD,GAAG,EAAE,cAAc,GACnB~~;QAED,MAAM,IAAI,CACT,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,MAAM,YACX,GAAC,MAAM,CAAC,iBAAiB,CAAC,IAAG,eAAe,IAAI,cAAc,OAChE,8BAA8B,CAC/B,IAEA,MAAM,CACH,CACP;QAED,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,QAAQ,CAAO,CAC5C,CACP,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,aAAa,EAAE,eAAe,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, ~~{ useRef }~~ from 'react';\nimport ~~clsx from 'clsx';\nimport~~ { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { ContentLayoutProps } from './interfaces';\nimport { ~~getBaseProps }~~ from '~~../~~internal~~/base-component~~';\nimport ~~{ useAppLayoutContext } from '../internal/context/app-layout-context';\nimport~~ useBaseComponent from '../internal/hooks/use-base-component';\nimport { useDynamicOverlap } from '../internal/hooks/use-dynamic-overlap';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport styles from './styles.css.js';\n\nexport { ContentLayoutProps };\n\nexport default function ContentLayout(~~{ children, disableOverlap, header, ...rest }~~: ContentLayoutProps) {\n const ~~baseProps~~ = ~~getBaseProps(rest);\n const { hasBreadcrumbs } = useAppLayoutContext();\n\n const rootElement = useRef<HTMLDivElement>(null);\n const { __internalRootRef } =~~ useBaseComponent('ContentLayout');\n const mergedRef = useMergeRefs(rootElement, __internalRootRef);\n const overlapElement = useDynamicOverlap();\n const isVisualRefresh = useVisualRefresh();\n\n /*\n Disable the overlap if the component is missing either a header or child\n * content. If the component is not using visual refresh then the overlap\n * will not be displayed at all. This is handled in the CSS not the JavaScript.\n */\n const isOverlapDisabled = !children \|\| !header \|\| disableOverlap;\n\n return ~~(\n~~ <~~div\n~~ {...~~baseProps~~}~~\n className={clsx(baseProps.className,~~ ~~styles.layout,~~ {~~\n [styles['is-overlap-disabled']]: isOverlapDisabled,\n [styles['is-visual-refresh']]: isVisualRefresh,\n~~ }~~)}\n ref={mergedRef}\n >\n <div\n className={clsx(\n styles.background,\n {~~ ~~[styles['is-overlap-disabled']]: isOverlapDisabled },\~~n ~~'awsui-context-content-header'\n )~~}\n ~~ref={overlapElement}~~\n />\n\n {header && (\n <div\n className={clsx(\n styles.header,\n { [styles['has-breadcrumbs']]: isVisualRefresh && hasBreadcrumbs },\n 'awsui-context-content-header'\n )}\n >\n {header}\n </div>\n )}\n\n <div className={styles.content}>{children}</div>\n </div>\n );\n}\n\napplyDisplayName(ContentLayout, 'ContentLayout');\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/content-layout/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,qBAAqB,MAAM,YAAY,CAAC;AAC/C,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAIpE,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,KAAyB;IAC7D,IAAM,kBAAkB,GAAG,gBAAgB,CAAC,eAAe,CAAC,CAAC;IAC7D,OAAO,oBAAC,qBAAqB,eAAK,KAAK,EAAM,kBAAkB,EAAI,CAAC;AACtE,CAAC;AAED,gBAAgB,CAAC,aAAa,EAAE,eAAe,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 { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { ContentLayoutProps } from './interfaces';\nimport InternalContentLayout from './internal';\nimport useBaseComponent from '../internal/hooks/use-base-component';\n\nexport { ContentLayoutProps };\n\nexport default function ContentLayout(props: ContentLayoutProps) {\n const baseComponentProps = useBaseComponent('ContentLayout');\n return <InternalContentLayout {...props} {...baseComponentProps} />;\n}\n\napplyDisplayName(ContentLayout, 'ContentLayout');\n"]}

package/content-layout/internal.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { ContentLayoutProps } from './interfaces';
+import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
+type InternalContentLayoutProps = ContentLayoutProps & InternalBaseComponentProps;
+export default function InternalContentLayout({ children, disableOverlap, header, __internalRootRef, ...rest }: InternalContentLayoutProps): JSX.Element;
+export {};
+//# sourceMappingURL=internal.d.ts.map

package/content-layout/internal.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/content-layout/internal.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAOlF,KAAK,0BAA0B,GAAG,kBAAkB,GAAG,0BAA0B,CAAC;AAElF,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAC5C,QAAQ,EACR,cAAc,EACd,MAAM,EACN,iBAAiB,EACjB,GAAG,IAAI,EACR,EAAE,0BAA0B,eAiD5B"}

package/content-layout/internal.js ADDED Viewed

@@ -0,0 +1,35 @@
+import { __assign, __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useRef } from 'react';
+import clsx from 'clsx';
+import { getBaseProps } from '../internal/base-component';
+import { useAppLayoutContext } from '../internal/context/app-layout-context';
+import { useDynamicOverlap } from '../internal/hooks/use-dynamic-overlap';
+import { useMergeRefs } from '../internal/hooks/use-merge-refs';
+import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
+import styles from './styles.css.js';
+export default function InternalContentLayout(_a) {
+    var _b, _c, _d;
+    var children = _a.children, disableOverlap = _a.disableOverlap, header = _a.header, __internalRootRef = _a.__internalRootRef, rest = __rest(_a, ["children", "disableOverlap", "header", "__internalRootRef"]);
+    var baseProps = getBaseProps(rest);
+    var rootElement = useRef(null);
+    var mergedRef = useMergeRefs(rootElement, __internalRootRef);
+    var isVisualRefresh = useVisualRefresh();
+    var hasBreadcrumbs = useAppLayoutContext().hasBreadcrumbs;
+    var overlapElement = useDynamicOverlap();
+    /**
+     * Disable the overlap if the component is missing either a header or child
+     * content. If the component is not using visual refresh then the overlap
+     * will not be displayed at all. This is handled in the CSS not the JavaScript.
+     */
+    var isOverlapDisabled = !children || !header || disableOverlap;
+    return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles.layout, (_b = {},
+            _b[styles['is-overlap-disabled']] = isOverlapDisabled,
+            _b[styles['is-visual-refresh']] = isVisualRefresh,
+            _b)), ref: mergedRef }),
+        React.createElement("div", { className: clsx(styles.background, (_c = {}, _c[styles['is-overlap-disabled']] = isOverlapDisabled, _c), 'awsui-context-content-header'), ref: overlapElement }),
+        header && (React.createElement("div", { className: clsx(styles.header, (_d = {}, _d[styles['has-breadcrumbs']] = isVisualRefresh && hasBreadcrumbs, _d), 'awsui-context-content-header') }, header)),
+        React.createElement("div", { className: styles.content }, children)));
+}
+//# sourceMappingURL=internal.js.map

package/content-layout/internal.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/content-layout/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAMjB;;IAL3B,IAAA,QAAQ,cAAA,EACR,cAAc,oBAAA,EACd,MAAM,YAAA,EACN,iBAAiB,uBAAA,EACd,IAAI,cALqC,6DAM7C,CADQ;IAEP,IAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,IAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACjD,IAAM,SAAS,GAAG,YAAY,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAC;IAE/D,IAAM,eAAe,GAAG,gBAAgB,EAAE,CAAC;IACnC,IAAA,cAAc,GAAK,mBAAmB,EAAE,eAA1B,CAA2B;IACjD,IAAM,cAAc,GAAG,iBAAiB,EAAE,CAAC;IAE3C;;;;OAIG;IACH,IAAM,iBAAiB,GAAG,CAAC,QAAQ,IAAI,CAAC,MAAM,IAAI,cAAc,CAAC;IAEjE,OAAO,CACL,wCACM,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM;YAChD,GAAC,MAAM,CAAC,qBAAqB,CAAC,IAAG,iBAAiB;YAClD,GAAC,MAAM,CAAC,mBAAmB,CAAC,IAAG,eAAe;gBAC9C,EACF,GAAG,EAAE,SAAS;QAEd,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,UAAU,YACf,GAAC,MAAM,CAAC,qBAAqB,CAAC,IAAG,iBAAiB,OACpD,8BAA8B,CAC/B,EACD,GAAG,EAAE,cAAc,GACnB;QAED,MAAM,IAAI,CACT,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,MAAM,YACX,GAAC,MAAM,CAAC,iBAAiB,CAAC,IAAG,eAAe,IAAI,cAAc,OAChE,8BAA8B,CAC/B,IAEA,MAAM,CACH,CACP;QAED,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,QAAQ,CAAO,CAC5C,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\nimport { ContentLayoutProps } from './interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useAppLayoutContext } from '../internal/context/app-layout-context';\nimport { useDynamicOverlap } from '../internal/hooks/use-dynamic-overlap';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport styles from './styles.css.js';\n\ntype InternalContentLayoutProps = ContentLayoutProps & InternalBaseComponentProps;\n\nexport default function InternalContentLayout({\n children,\n disableOverlap,\n header,\n __internalRootRef,\n ...rest\n}: InternalContentLayoutProps) {\n const baseProps = getBaseProps(rest);\n const rootElement = useRef<HTMLDivElement>(null);\n const mergedRef = useMergeRefs(rootElement, __internalRootRef);\n\n const isVisualRefresh = useVisualRefresh();\n const { hasBreadcrumbs } = useAppLayoutContext();\n const overlapElement = useDynamicOverlap();\n\n /**\n * Disable the overlap if the component is missing either a header or child\n * content. If the component is not using visual refresh then the overlap\n * will not be displayed at all. This is handled in the CSS not the JavaScript.\n */\n const isOverlapDisabled = !children || !header || disableOverlap;\n\n return (\n <div\n {...baseProps}\n className={clsx(baseProps.className, styles.layout, {\n [styles['is-overlap-disabled']]: isOverlapDisabled,\n [styles['is-visual-refresh']]: isVisualRefresh,\n })}\n ref={mergedRef}\n >\n <div\n className={clsx(\n styles.background,\n { [styles['is-overlap-disabled']]: isOverlapDisabled },\n 'awsui-context-content-header'\n )}\n ref={overlapElement}\n />\n\n {header && (\n <div\n className={clsx(\n styles.header,\n { [styles['has-breadcrumbs']]: isVisualRefresh && hasBreadcrumbs },\n 'awsui-context-content-header'\n )}\n >\n {header}\n </div>\n )}\n\n <div className={styles.content}>{children}</div>\n </div>\n );\n}\n"]}

package/flashbar/collapsible-flashbar.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"collapsible-flashbar.d.ts","sourceRoot":"","sources":["../../../src/flashbar/collapsible-flashbar.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;~~AAkB7C~~,OAAO,EAAE,aAAa,EAAE,CAAC;AAQzB,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,EAAE,aAAa,~~eAmTjF~~"}
1	+ {"version":3,"file":"collapsible-flashbar.d.ts","sourceRoot":"","sources":["../../../src/flashbar/collapsible-flashbar.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAiB7C,OAAO,EAAE,aAAa,EAAE,CAAC;AAQzB,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,EAAE,aAAa,eA+SjF"}

package/flashbar/collapsible-flashbar.js CHANGED Viewed

@@ -18,7 +18,6 @@ import { sendToggleMetric } from './internal/analytics';
 import { useFlashbar } from './common';
 import { throttle } from '../internal/utils/throttle';
 import { scrollElementIntoView } from '../internal/utils/scrollable-containers';
-import { findUpUntil } from '../internal/utils/dom';
 // If the number of items is equal or less than this value,
 // the toggle element will not be displayed and the Flashbar will look like a regular single-item Flashbar.
 var maxNonCollapsibleItems = 1;
@@ -80,6 +79,7 @@ export default function CollapsibleFlashbar(_a) {
     }, [isFlashbarStackExpanded]);
     var updateBottomSpacing = useMemo(function () {
         return throttle(function () {
+            var _a;
             // Allow vertical space between Flashbar and page bottom only when the Flashbar is reaching the end of the page,
             // otherwise avoid spacing with eventual sticky elements below.
             var listElement = listElementRef === null || listElementRef === void 0 ? void 0 : listElementRef.current;
@@ -91,7 +91,7 @@ export default function CollapsibleFlashbar(_a) {
                 var windowHeight = window.innerHeight;
                 // Take the parent region into account if using the App Layout, because it might have additional margins.
                 // Otherwise we use the Flashbar component for this calculation.
-                var outerElement = findUpUntil(flashbar, function (element) { return element.getAttribute('role') === 'region'; }) || flashbar;
+                var outerElement = ((_a = flashbar.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement) || flashbar;
                 var applySpacing = isFlashbarStackExpanded && Math.ceil(outerElement.getBoundingClientRect().bottom) >= windowHeight;
                 if (!applySpacing) {
                     flashbar.classList.add(styles.floating);
@@ -188,10 +188,10 @@ export default function CollapsibleFlashbar(_a) {
                     className: clsx(animateFlash && styles['flash-with-motion'], isVisualRefresh && styles['flash-refresh']), key: getItemId(item), ref: shouldUseStandardAnimation(item, index) ? transitionRootElement : undefined, transitionState: shouldUseStandardAnimation(item, index) ? state : undefined }, item)))));
             })); }))));
     };
-    return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles.flashbar, styles["breakpoint-".concat(breakpoint)], styles.stack, isCollapsible && styles.collapsible, items.length === 2 && styles['short-list'], isFlashbarStackExpanded && styles.expanded, isVisualRefresh && styles['visual-refresh'], getVisualContextClassname('flashbar')), ref: mergedRef }),
+    return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles.flashbar, styles["breakpoint-".concat(breakpoint)], styles.stack, isFlashbarStackExpanded && styles.expanded, getVisualContextClassname('flashbar')), ref: mergedRef }),
         React.createElement(React.Fragment, null,
             isFlashbarStackExpanded && renderList(),
-            isCollapsible && (React.createElement("div", { className: clsx(styles['notification-bar'], isVisualRefresh && styles['visual-refresh'], isFlashbarStackExpanded ? styles.expanded : styles.collapsed, transitioning && styles['animation-running'], items.length === 2 && styles['short-list']), onClick: toggleCollapseExpand, ref: notificationBarRef },
+            isCollapsible && (React.createElement("div", { className: clsx(styles['notification-bar'], isVisualRefresh && styles['visual-refresh'], isFlashbarStackExpanded ? styles.expanded : styles.collapsed, transitioning && styles['animation-running']), onClick: toggleCollapseExpand, ref: notificationBarRef },
                 React.createElement("span", { "aria-live": "polite", className: styles.status, role: "status", id: itemCountElementId },
                     notificationBarText && React.createElement("h2", { className: styles.header }, notificationBarText),
                     React.createElement("span", { className: styles['item-count'] }, counterTypes.map(function (_a) {

package/flashbar/collapsible-flashbar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"collapsible-flashbar.js","sourceRoot":"","sources":["../../../src/flashbar/collapsible-flashbar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport customCssProps from '../internal/generated/custom-css-properties';\nimport { Flash, focusFlashById } from './flash';\nimport { FlashbarProps } from './interfaces';\nimport InternalIcon from '../icon/internal';\nimport { TransitionGroup } from 'react-transition-group';\nimport { Transition } from '../internal/components/transition';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport { getVisualContextClassname } from '../internal/components/visual-context';\n\nimport styles from './styles.css.js';\nimport { counterTypes, getFlashTypeCount, getVisibleCollapsedItems, StackableItem } from './utils';\nimport { animate, getDOMRects } from '../internal/animate';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { IconProps } from '../icon/interfaces';\nimport { sendToggleMetric } from './internal/analytics';\nimport { useFlashbar } from './common';\nimport { throttle } from '../internal/utils/throttle';\nimport { scrollElementIntoView } from '../internal/utils/scrollable-containers';\nimport { findUpUntil } from '../internal/utils/dom';\n\nexport { FlashbarProps };\n\n// If the number of items is equal or less than this value,\n// the toggle element will not be displayed and the Flashbar will look like a regular single-item Flashbar.\nconst maxNonCollapsibleItems = 1;\n\nconst resizeListenerThrottleDelay = 100;\n\nexport default function CollapsibleFlashbar({ items, ...restProps }: FlashbarProps) {\n const [enteringItems, setEnteringItems] = useState<ReadonlyArray<FlashbarProps.MessageDefinition>>([]);\n const [exitingItems, setExitingItems] = useState<ReadonlyArray<FlashbarProps.MessageDefinition>>([]);\n const [isFlashbarStackExpanded, setIsFlashbarStackExpanded] = useState(false);\n\n const getElementsToAnimate = useCallback(() => {\n const flashElements = isFlashbarStackExpanded ? expandedItemRefs.current : collapsedItemRefs.current;\n return { ...flashElements, notificationBar: notificationBarRef.current };\n }, [isFlashbarStackExpanded]);\n\n const prepareAnimations = useCallback(() => {\n const rects = getDOMRects(getElementsToAnimate());\n setInitialAnimationState(rects);\n }, [getElementsToAnimate]);\n\n const { ariaLabel, baseProps, breakpoint, isReducedMotion, isVisualRefresh, mergedRef, ref } = useFlashbar({\n items,\n ...restProps,\n onItemsAdded: newItems => {\n setEnteringItems([...enteringItems, ...newItems]);\n },\n onItemsChanged: options => {\n // If not all items have ID, we can still animate collapse/expand transitions\n // because we can rely on each item's index in the original array,\n // but we can't do that when elements are added or removed, since the index changes.\n if (options?.allItemsHaveId && !options?.isReducedMotion) {\n prepareAnimations();\n }\n },\n onItemsRemoved: removedItems => {\n setExitingItems([...exitingItems, ...removedItems]);\n },\n });\n\n const isFocusVisible = useFocusVisible();\n const collapsedItemRefs = useRef<Record<string \| number, HTMLElement \| null>>({});\n const expandedItemRefs = useRef<Record<string \| number, HTMLElement \| null>>({});\n const [initialAnimationState, setInitialAnimationState] = useState<Record<string \| number, DOMRect> \| null>(null);\n const listElementRef = useRef<HTMLUListElement \| null>(null);\n const notificationBarRef = useRef<HTMLDivElement \| null>(null);\n const [transitioning, setTransitioning] = useState(false);\n const flashbarElementId = useUniqueId('flashbar');\n const itemCountElementId = useUniqueId('item-count');\n\n if (items.length <= maxNonCollapsibleItems && isFlashbarStackExpanded) {\n setIsFlashbarStackExpanded(false);\n }\n\n const animateFlash = !isReducedMotion;\n\n function toggleCollapseExpand() {\n sendToggleMetric(items.length, !isFlashbarStackExpanded);\n if (!isReducedMotion) {\n prepareAnimations();\n }\n setIsFlashbarStackExpanded(prev => !prev);\n }\n\n useLayoutEffect(() => {\n if (isFlashbarStackExpanded && items?.length) {\n const mostRecentItem = items[0];\n if (mostRecentItem.id !== undefined) {\n focusFlashById(ref.current, mostRecentItem.id);\n }\n }\n // Run this after expanding, but not every time the items change.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isFlashbarStackExpanded]);\n\n const updateBottomSpacing = useMemo(\n () =>\n throttle(() => {\n // Allow vertical space between Flashbar and page bottom only when the Flashbar is reaching the end of the page,\n // otherwise avoid spacing with eventual sticky elements below.\n const listElement = listElementRef?.current;\n const flashbar = listElement?.parentElement;\n if (listElement && flashbar) {\n // Make sure the bottom padding is present when we make the calculations,\n // then we might decide to remove it or not.\n flashbar.classList.remove(styles.floating);\n const windowHeight = window.innerHeight;\n // Take the parent region into account if using the App Layout, because it might have additional margins.\n // Otherwise we use the Flashbar component for this calculation.\n const outerElement = findUpUntil(flashbar, element => element.getAttribute('role') === 'region') \|\| flashbar;\n const applySpacing =\n isFlashbarStackExpanded && Math.ceil(outerElement.getBoundingClientRect().bottom) >= windowHeight;\n if (!applySpacing) {\n flashbar.classList.add(styles.floating);\n }\n }\n }, resizeListenerThrottleDelay),\n [isFlashbarStackExpanded]\n );\n\n useLayoutEffect(() => {\n window.addEventListener('resize', updateBottomSpacing);\n return () => {\n window.removeEventListener('resize', updateBottomSpacing);\n updateBottomSpacing.cancel();\n };\n }, [updateBottomSpacing]);\n\n const { i18nStrings } = restProps;\n\n useLayoutEffect(() => {\n // When `useLayoutEffect` is called, the DOM is updated but has not been painted yet,\n // so it's a good moment to trigger animations that will make calculations based on old and new DOM state.\n // The old state is kept in `initialAnimationState`\n // and the new state can be retrieved from the current DOM elements.\n\n if (initialAnimationState) {\n updateBottomSpacing();\n\n animate({\n elements: getElementsToAnimate(),\n oldState: initialAnimationState,\n newElementInitialState: ({ top }) => ({ scale: 0.9, y: -0.2 * top }),\n onTransitionsEnd: () => setTransitioning(false),\n });\n\n // When collapsing, scroll up if necessary to avoid losing track of the focused button\n if (!isFlashbarStackExpanded && notificationBarRef.current) {\n scrollElementIntoView(notificationBarRef.current);\n }\n\n setTransitioning(true);\n setInitialAnimationState(null);\n }\n }, [updateBottomSpacing, getElementsToAnimate, initialAnimationState, isFlashbarStackExpanded]);\n\n const isCollapsible = items.length > maxNonCollapsibleItems;\n\n const countByType = getFlashTypeCount(items);\n\n const stackDepth = Math.min(3, items.length);\n\n const itemsToShow = isFlashbarStackExpanded\n ? items.map((item, index) => ({ ...item, expandedIndex: index }))\n : getVisibleCollapsedItems(items, stackDepth).map((item: StackableItem, index: number) => ({\n ...item,\n collapsedIndex: index,\n }));\n\n const notificationBarText = i18nStrings?.notificationBarText;\n\n const getItemId = (item: StackableItem \| FlashbarProps.MessageDefinition) =>\n item.id ?? (item as StackableItem).expandedIndex ?? 0;\n\n // This check allows us to use the standard \"enter\" Transition only when the notification was not existing before.\n // If instead it was moved to the top of the stack but was already present in the array\n // (e.g, after dismissing another notification),\n // we need to use different, more custom and more controlled animations.\n const hasEntered = (item: StackableItem \| FlashbarProps.MessageDefinition) =>\n enteringItems.some(_item => _item.id && _item.id === item.id);\n const hasLeft = (item: StackableItem \| FlashbarProps.MessageDefinition) => !('expandedIndex' in item);\n const hasEnteredOrLeft = (item: StackableItem \| FlashbarProps.MessageDefinition) => hasEntered(item) \|\| hasLeft(item);\n\n const showInnerContent = (item: StackableItem \| FlashbarProps.MessageDefinition) =>\n isFlashbarStackExpanded \|\| hasLeft(item) \|\| ('expandedIndex' in item && item.expandedIndex === 0);\n\n const shouldUseStandardAnimation = (item: StackableItem, index: number) => index === 0 && hasEnteredOrLeft(item);\n\n const getAnimationElementId = (item: StackableItem) => `flash-${getItemId(item)}`;\n\n const renderList = () => (\n <ul\n ref={listElementRef}\n className={clsx(\n styles['flash-list'],\n isFlashbarStackExpanded ? styles.expanded : styles.collapsed,\n transitioning && styles['animation-running'],\n initialAnimationState && styles['animation-ready'],\n isVisualRefresh && styles['visual-refresh']\n )}\n id={flashbarElementId}\n aria-label={ariaLabel}\n aria-describedby={isCollapsible ? itemCountElementId : undefined}\n style={\n !isFlashbarStackExpanded \|\| transitioning\n ? {\n [customCssProps.flashbarStackDepth]: stackDepth,\n }\n : undefined\n }\n >\n <TransitionGroup component={null}>\n {itemsToShow.map((item: StackableItem, index: number) => (\n <Transition\n key={getItemId(item)}\n in={!hasLeft(item)}\n onStatusChange={status => {\n if (status === 'entered') {\n setEnteringItems([]);\n } else if (status === 'exited') {\n setExitingItems([]);\n }\n }}\n >\n {(state: string, transitionRootElement: React.Ref<HTMLDivElement> \| undefined) => (\n <li\n aria-hidden={!showInnerContent(item)}\n className={\n showInnerContent(item)\n ? clsx(\n styles['flash-list-item'],\n !isFlashbarStackExpanded && styles.item,\n !collapsedItemRefs.current[getAnimationElementId(item)] && styles['expanded-only']\n )\n : clsx(styles.flash, styles[`flash-type-${item.type ?? 'info'}`], styles.item)\n }\n ref={element => {\n if (isFlashbarStackExpanded) {\n expandedItemRefs.current[getAnimationElementId(item)] = element;\n } else {\n collapsedItemRefs.current[getAnimationElementId(item)] = element;\n }\n }}\n style={\n !isFlashbarStackExpanded \|\| transitioning\n ? {\n [customCssProps.flashbarStackIndex]:\n (item as StackableItem).collapsedIndex ?? (item as StackableItem).expandedIndex ?? index,\n }\n : undefined\n }\n key={getItemId(item)}\n >\n {showInnerContent(item) && (\n <Flash\n // eslint-disable-next-line react/forbid-component-props\n className={clsx(\n animateFlash && styles['flash-with-motion'],\n isVisualRefresh && styles['flash-refresh']\n )}\n key={getItemId(item)}\n ref={shouldUseStandardAnimation(item, index) ? transitionRootElement : undefined}\n transitionState={shouldUseStandardAnimation(item, index) ? state : undefined}\n {...item}\n />\n )}\n </li>\n )}\n </Transition>\n ))}\n </TransitionGroup>\n </ul>\n );\n\n return (\n <div\n {...baseProps}\n className={clsx(\n baseProps.className,\n styles.flashbar,\n styles[`breakpoint-${breakpoint}`],\n styles.stack,\n isCollapsible && styles.collapsible,\n items.length === 2 && styles['short-list'],\n isFlashbarStackExpanded && styles.expanded,\n isVisualRefresh && styles['visual-refresh'],\n getVisualContextClassname('flashbar')\n )}\n ref={mergedRef}\n >\n <>\n {isFlashbarStackExpanded && renderList()}\n {isCollapsible && (\n <div\n className={clsx(\n styles['notification-bar'],\n isVisualRefresh && styles['visual-refresh'],\n isFlashbarStackExpanded ? styles.expanded : styles.collapsed,\n transitioning && styles['animation-running'],\n items.length === 2 && styles['short-list']\n )}\n onClick={toggleCollapseExpand}\n ref={notificationBarRef}\n >\n <span aria-live=\"polite\" className={styles.status} role=\"status\" id={itemCountElementId}>\n {notificationBarText && <h2 className={styles.header}>{notificationBarText}</h2>}\n <span className={styles['item-count']}>\n {counterTypes.map(({ type, labelName, iconName }) => (\n <NotificationTypeCount\n key={type}\n iconName={iconName}\n label={i18nStrings ? i18nStrings[labelName] : undefined}\n count={countByType[type]}\n />\n ))}\n </span>\n </span>\n <button\n aria-controls={flashbarElementId}\n aria-describedby={itemCountElementId}\n aria-expanded={isFlashbarStackExpanded}\n aria-label={i18nStrings?.notificationBarAriaLabel}\n className={clsx(styles.button, isFlashbarStackExpanded && styles.expanded)}\n {...isFocusVisible}\n >\n <InternalIcon className={styles.icon} size=\"normal\" name=\"angle-down\" />\n </button>\n </div>\n )}\n {!isFlashbarStackExpanded && renderList()}\n </>\n </div>\n );\n}\n\nconst NotificationTypeCount = ({\n iconName,\n label,\n count,\n}: {\n iconName: IconProps.Name;\n label?: string;\n count: number;\n}) => {\n return (\n <span className={styles['type-count']}>\n <span aria-label={label} role=\"img\">\n <span title={label} aria-hidden=\"true\">\n <InternalIcon name={iconName} />\n </span>\n </span>\n <span className={styles['count-number']}>{count}</span>\n </span>\n );\n};\n"]}
1	+ {"version":3,"file":"collapsible-flashbar.js","sourceRoot":"","sources":["../../../src/flashbar/collapsible-flashbar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport customCssProps from '../internal/generated/custom-css-properties';\nimport { Flash, focusFlashById } from './flash';\nimport { FlashbarProps } from './interfaces';\nimport InternalIcon from '../icon/internal';\nimport { TransitionGroup } from 'react-transition-group';\nimport { Transition } from '../internal/components/transition';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport { getVisualContextClassname } from '../internal/components/visual-context';\n\nimport styles from './styles.css.js';\nimport { counterTypes, getFlashTypeCount, getVisibleCollapsedItems, StackableItem } from './utils';\nimport { animate, getDOMRects } from '../internal/animate';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { IconProps } from '../icon/interfaces';\nimport { sendToggleMetric } from './internal/analytics';\nimport { useFlashbar } from './common';\nimport { throttle } from '../internal/utils/throttle';\nimport { scrollElementIntoView } from '../internal/utils/scrollable-containers';\n\nexport { FlashbarProps };\n\n// If the number of items is equal or less than this value,\n// the toggle element will not be displayed and the Flashbar will look like a regular single-item Flashbar.\nconst maxNonCollapsibleItems = 1;\n\nconst resizeListenerThrottleDelay = 100;\n\nexport default function CollapsibleFlashbar({ items, ...restProps }: FlashbarProps) {\n const [enteringItems, setEnteringItems] = useState<ReadonlyArray<FlashbarProps.MessageDefinition>>([]);\n const [exitingItems, setExitingItems] = useState<ReadonlyArray<FlashbarProps.MessageDefinition>>([]);\n const [isFlashbarStackExpanded, setIsFlashbarStackExpanded] = useState(false);\n\n const getElementsToAnimate = useCallback(() => {\n const flashElements = isFlashbarStackExpanded ? expandedItemRefs.current : collapsedItemRefs.current;\n return { ...flashElements, notificationBar: notificationBarRef.current };\n }, [isFlashbarStackExpanded]);\n\n const prepareAnimations = useCallback(() => {\n const rects = getDOMRects(getElementsToAnimate());\n setInitialAnimationState(rects);\n }, [getElementsToAnimate]);\n\n const { ariaLabel, baseProps, breakpoint, isReducedMotion, isVisualRefresh, mergedRef, ref } = useFlashbar({\n items,\n ...restProps,\n onItemsAdded: newItems => {\n setEnteringItems([...enteringItems, ...newItems]);\n },\n onItemsChanged: options => {\n // If not all items have ID, we can still animate collapse/expand transitions\n // because we can rely on each item's index in the original array,\n // but we can't do that when elements are added or removed, since the index changes.\n if (options?.allItemsHaveId && !options?.isReducedMotion) {\n prepareAnimations();\n }\n },\n onItemsRemoved: removedItems => {\n setExitingItems([...exitingItems, ...removedItems]);\n },\n });\n\n const isFocusVisible = useFocusVisible();\n const collapsedItemRefs = useRef<Record<string \| number, HTMLElement \| null>>({});\n const expandedItemRefs = useRef<Record<string \| number, HTMLElement \| null>>({});\n const [initialAnimationState, setInitialAnimationState] = useState<Record<string \| number, DOMRect> \| null>(null);\n const listElementRef = useRef<HTMLUListElement \| null>(null);\n const notificationBarRef = useRef<HTMLDivElement \| null>(null);\n const [transitioning, setTransitioning] = useState(false);\n const flashbarElementId = useUniqueId('flashbar');\n const itemCountElementId = useUniqueId('item-count');\n\n if (items.length <= maxNonCollapsibleItems && isFlashbarStackExpanded) {\n setIsFlashbarStackExpanded(false);\n }\n\n const animateFlash = !isReducedMotion;\n\n function toggleCollapseExpand() {\n sendToggleMetric(items.length, !isFlashbarStackExpanded);\n if (!isReducedMotion) {\n prepareAnimations();\n }\n setIsFlashbarStackExpanded(prev => !prev);\n }\n\n useLayoutEffect(() => {\n if (isFlashbarStackExpanded && items?.length) {\n const mostRecentItem = items[0];\n if (mostRecentItem.id !== undefined) {\n focusFlashById(ref.current, mostRecentItem.id);\n }\n }\n // Run this after expanding, but not every time the items change.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isFlashbarStackExpanded]);\n\n const updateBottomSpacing = useMemo(\n () =>\n throttle(() => {\n // Allow vertical space between Flashbar and page bottom only when the Flashbar is reaching the end of the page,\n // otherwise avoid spacing with eventual sticky elements below.\n const listElement = listElementRef?.current;\n const flashbar = listElement?.parentElement;\n if (listElement && flashbar) {\n // Make sure the bottom padding is present when we make the calculations,\n // then we might decide to remove it or not.\n flashbar.classList.remove(styles.floating);\n const windowHeight = window.innerHeight;\n // Take the parent region into account if using the App Layout, because it might have additional margins.\n // Otherwise we use the Flashbar component for this calculation.\n const outerElement = flashbar.parentElement?.parentElement \|\| flashbar;\n const applySpacing =\n isFlashbarStackExpanded && Math.ceil(outerElement.getBoundingClientRect().bottom) >= windowHeight;\n if (!applySpacing) {\n flashbar.classList.add(styles.floating);\n }\n }\n }, resizeListenerThrottleDelay),\n [isFlashbarStackExpanded]\n );\n\n useLayoutEffect(() => {\n window.addEventListener('resize', updateBottomSpacing);\n return () => {\n window.removeEventListener('resize', updateBottomSpacing);\n updateBottomSpacing.cancel();\n };\n }, [updateBottomSpacing]);\n\n const { i18nStrings } = restProps;\n\n useLayoutEffect(() => {\n // When `useLayoutEffect` is called, the DOM is updated but has not been painted yet,\n // so it's a good moment to trigger animations that will make calculations based on old and new DOM state.\n // The old state is kept in `initialAnimationState`\n // and the new state can be retrieved from the current DOM elements.\n\n if (initialAnimationState) {\n updateBottomSpacing();\n\n animate({\n elements: getElementsToAnimate(),\n oldState: initialAnimationState,\n newElementInitialState: ({ top }) => ({ scale: 0.9, y: -0.2 * top }),\n onTransitionsEnd: () => setTransitioning(false),\n });\n\n // When collapsing, scroll up if necessary to avoid losing track of the focused button\n if (!isFlashbarStackExpanded && notificationBarRef.current) {\n scrollElementIntoView(notificationBarRef.current);\n }\n\n setTransitioning(true);\n setInitialAnimationState(null);\n }\n }, [updateBottomSpacing, getElementsToAnimate, initialAnimationState, isFlashbarStackExpanded]);\n\n const isCollapsible = items.length > maxNonCollapsibleItems;\n\n const countByType = getFlashTypeCount(items);\n\n const stackDepth = Math.min(3, items.length);\n\n const itemsToShow = isFlashbarStackExpanded\n ? items.map((item, index) => ({ ...item, expandedIndex: index }))\n : getVisibleCollapsedItems(items, stackDepth).map((item: StackableItem, index: number) => ({\n ...item,\n collapsedIndex: index,\n }));\n\n const notificationBarText = i18nStrings?.notificationBarText;\n\n const getItemId = (item: StackableItem \| FlashbarProps.MessageDefinition) =>\n item.id ?? (item as StackableItem).expandedIndex ?? 0;\n\n // This check allows us to use the standard \"enter\" Transition only when the notification was not existing before.\n // If instead it was moved to the top of the stack but was already present in the array\n // (e.g, after dismissing another notification),\n // we need to use different, more custom and more controlled animations.\n const hasEntered = (item: StackableItem \| FlashbarProps.MessageDefinition) =>\n enteringItems.some(_item => _item.id && _item.id === item.id);\n const hasLeft = (item: StackableItem \| FlashbarProps.MessageDefinition) => !('expandedIndex' in item);\n const hasEnteredOrLeft = (item: StackableItem \| FlashbarProps.MessageDefinition) => hasEntered(item) \|\| hasLeft(item);\n\n const showInnerContent = (item: StackableItem \| FlashbarProps.MessageDefinition) =>\n isFlashbarStackExpanded \|\| hasLeft(item) \|\| ('expandedIndex' in item && item.expandedIndex === 0);\n\n const shouldUseStandardAnimation = (item: StackableItem, index: number) => index === 0 && hasEnteredOrLeft(item);\n\n const getAnimationElementId = (item: StackableItem) => `flash-${getItemId(item)}`;\n\n const renderList = () => (\n <ul\n ref={listElementRef}\n className={clsx(\n styles['flash-list'],\n isFlashbarStackExpanded ? styles.expanded : styles.collapsed,\n transitioning && styles['animation-running'],\n initialAnimationState && styles['animation-ready'],\n isVisualRefresh && styles['visual-refresh']\n )}\n id={flashbarElementId}\n aria-label={ariaLabel}\n aria-describedby={isCollapsible ? itemCountElementId : undefined}\n style={\n !isFlashbarStackExpanded \|\| transitioning\n ? {\n [customCssProps.flashbarStackDepth]: stackDepth,\n }\n : undefined\n }\n >\n <TransitionGroup component={null}>\n {itemsToShow.map((item: StackableItem, index: number) => (\n <Transition\n key={getItemId(item)}\n in={!hasLeft(item)}\n onStatusChange={status => {\n if (status === 'entered') {\n setEnteringItems([]);\n } else if (status === 'exited') {\n setExitingItems([]);\n }\n }}\n >\n {(state: string, transitionRootElement: React.Ref<HTMLDivElement> \| undefined) => (\n <li\n aria-hidden={!showInnerContent(item)}\n className={\n showInnerContent(item)\n ? clsx(\n styles['flash-list-item'],\n !isFlashbarStackExpanded && styles.item,\n !collapsedItemRefs.current[getAnimationElementId(item)] && styles['expanded-only']\n )\n : clsx(styles.flash, styles[`flash-type-${item.type ?? 'info'}`], styles.item)\n }\n ref={element => {\n if (isFlashbarStackExpanded) {\n expandedItemRefs.current[getAnimationElementId(item)] = element;\n } else {\n collapsedItemRefs.current[getAnimationElementId(item)] = element;\n }\n }}\n style={\n !isFlashbarStackExpanded \|\| transitioning\n ? {\n [customCssProps.flashbarStackIndex]:\n (item as StackableItem).collapsedIndex ?? (item as StackableItem).expandedIndex ?? index,\n }\n : undefined\n }\n key={getItemId(item)}\n >\n {showInnerContent(item) && (\n <Flash\n // eslint-disable-next-line react/forbid-component-props\n className={clsx(\n animateFlash && styles['flash-with-motion'],\n isVisualRefresh && styles['flash-refresh']\n )}\n key={getItemId(item)}\n ref={shouldUseStandardAnimation(item, index) ? transitionRootElement : undefined}\n transitionState={shouldUseStandardAnimation(item, index) ? state : undefined}\n {...item}\n />\n )}\n </li>\n )}\n </Transition>\n ))}\n </TransitionGroup>\n </ul>\n );\n\n return (\n <div\n {...baseProps}\n className={clsx(\n baseProps.className,\n styles.flashbar,\n styles[`breakpoint-${breakpoint}`],\n styles.stack,\n isFlashbarStackExpanded && styles.expanded,\n getVisualContextClassname('flashbar')\n )}\n ref={mergedRef}\n >\n <>\n {isFlashbarStackExpanded && renderList()}\n {isCollapsible && (\n <div\n className={clsx(\n styles['notification-bar'],\n isVisualRefresh && styles['visual-refresh'],\n isFlashbarStackExpanded ? styles.expanded : styles.collapsed,\n transitioning && styles['animation-running']\n )}\n onClick={toggleCollapseExpand}\n ref={notificationBarRef}\n >\n <span aria-live=\"polite\" className={styles.status} role=\"status\" id={itemCountElementId}>\n {notificationBarText && <h2 className={styles.header}>{notificationBarText}</h2>}\n <span className={styles['item-count']}>\n {counterTypes.map(({ type, labelName, iconName }) => (\n <NotificationTypeCount\n key={type}\n iconName={iconName}\n label={i18nStrings ? i18nStrings[labelName] : undefined}\n count={countByType[type]}\n />\n ))}\n </span>\n </span>\n <button\n aria-controls={flashbarElementId}\n aria-describedby={itemCountElementId}\n aria-expanded={isFlashbarStackExpanded}\n aria-label={i18nStrings?.notificationBarAriaLabel}\n className={clsx(styles.button, isFlashbarStackExpanded && styles.expanded)}\n {...isFocusVisible}\n >\n <InternalIcon className={styles.icon} size=\"normal\" name=\"angle-down\" />\n </button>\n </div>\n )}\n {!isFlashbarStackExpanded && renderList()}\n </>\n </div>\n );\n}\n\nconst NotificationTypeCount = ({\n iconName,\n label,\n count,\n}: {\n iconName: IconProps.Name;\n label?: string;\n count: number;\n}) => {\n return (\n <span className={styles['type-count']}>\n <span aria-label={label} role=\"img\">\n <span title={label} aria-hidden=\"true\">\n <InternalIcon name={iconName} />\n </span>\n </span>\n <span className={styles['count-number']}>{count}</span>\n </span>\n );\n};\n"]}