@cloudscape-design/components 3.0.305 → 3.0.306

package/column-layout/flexible-column-layout/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { InternalColumnLayoutProps } from '../interfaces';
+export declare function calculcateCssColumnCount(columns: number, minColumnWidth: number, containerWidth: number | null): number;
+interface FlexibleColumnLayoutProps extends Pick<InternalColumnLayoutProps, 'minColumnWidth' | 'columns' | 'variant' | 'borders' | 'disableGutters'> {
+    children: React.ReactNode;
+}
+export default function FlexibleColumnLayout({ columns, minColumnWidth, disableGutters, variant, children, }: FlexibleColumnLayoutProps): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/column-layout/flexible-column-layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["column-layout/flexible-column-layout/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAC;AAK1D,wBAAgB,wBAAwB,CACtC,OAAO,EAAE,MAAM,EACf,cAAc,EAAE,MAAM,EACtB,cAAc,EAAE,MAAM,GAAG,IAAI,GAC5B,MAAM,CAaR;AAED,UAAU,yBACR,SAAQ,IAAI,CAAC,yBAAyB,EAAE,gBAAgB,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,gBAAgB,CAAC;IAChH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,OAAW,EACX,cAAkB,EAClB,cAAc,EACd,OAAO,EACP,QAAQ,GACT,EAAE,yBAAyB,eAqC3B"}

package/column-layout/flexible-column-layout/index.js

@@ -0,0 +1,33 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import clsx from 'clsx';
+import flattenChildren from 'react-keyed-flatten-children';
+import { useContainerQuery } from '../../internal/hooks/container-queries';
+import styles from './styles.css.js';
+const isOdd = (value) => value % 2 !== 0;
+export function calculcateCssColumnCount(columns, minColumnWidth, containerWidth) {
+    if (!containerWidth) {
+        return columns;
+    }
+    // First, calculate how many columns we can have based on the current container width and minColumnWidth.
+    const targetColumnCount = Math.min(columns, Math.floor(containerWidth / minColumnWidth));
+    // When we start wrapping into fewer columns than desired, we want to keep the number of columns even.
+    return Math.max(1, targetColumnCount < columns && isOdd(targetColumnCount) ? targetColumnCount - 1 : targetColumnCount);
+}
+export default function FlexibleColumnLayout({ columns = 1, minColumnWidth = 0, disableGutters, variant, children, }) {
+    const [containerWidth, containerRef] = useContainerQuery(rect => rect.width);
+    const columnCount = calculcateCssColumnCount(columns, minColumnWidth, containerWidth);
+    const shouldDisableGutters = variant !== 'text-grid' && disableGutters;
+    // Flattening the children allows us to "see through" React Fragments and nested arrays.
+    const flattenedChildren = flattenChildren(children);
+    return (React.createElement("div", { ref: containerRef, className: clsx(styles['css-grid'], styles[`grid-variant-${variant}`], shouldDisableGutters && [styles['grid-no-gutters']]), style: { gridTemplateColumns: `repeat(${columnCount}, 1fr)` } }, flattenedChildren.map((child, i) => {
+        // If this react child is a primitive value, the key will be undefined
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const key = child.key;
+        return (React.createElement("div", { key: key, className: clsx(styles.item, {
+                [styles['first-column']]: i % columnCount === 0,
+            }) }, child));
+    })));
+}
+//# sourceMappingURL=index.js.map

package/column-layout/flexible-column-layout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["column-layout/flexible-column-layout/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wCAAwC,CAAC;AAE3E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,KAAK,GAAG,CAAC,KAAa,EAAW,EAAE,CAAC,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC;AAE1D,MAAM,UAAU,wBAAwB,CACtC,OAAe,EACf,cAAsB,EACtB,cAA6B;IAE7B,IAAI,CAAC,cAAc,EAAE;QACnB,OAAO,OAAO,CAAC;KAChB;IAED,yGAAyG;IACzG,MAAM,iBAAiB,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,cAAc,CAAC,CAAC,CAAC;IAEzF,sGAAsG;IACtG,OAAO,IAAI,CAAC,GAAG,CACb,CAAC,EACD,iBAAiB,GAAG,OAAO,IAAI,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,iBAAiB,GAAG,CAAC,CAAC,CAAC,CAAC,iBAAiB,CACpG,CAAC;AACJ,CAAC;AAOD,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,OAAO,GAAG,CAAC,EACX,cAAc,GAAG,CAAC,EAClB,cAAc,EACd,OAAO,EACP,QAAQ,GACkB;IAC1B,MAAM,CAAC,cAAc,EAAE,YAAY,CAAC,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAE7E,MAAM,WAAW,GAAG,wBAAwB,CAAC,OAAO,EAAE,cAAc,EAAE,cAAc,CAAC,CAAC;IACtF,MAAM,oBAAoB,GAAG,OAAO,KAAK,WAAW,IAAI,cAAc,CAAC;IAEvE,wFAAwF;IACxF,MAAM,iBAAiB,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;IAEpD,OAAO,CACL,6BACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,UAAU,CAAC,EAClB,MAAM,CAAC,gBAAgB,OAAO,EAAE,CAAC,EACjC,oBAAoB,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,CACpD,EACD,KAAK,EAAE,EAAE,mBAAmB,EAAE,UAAU,WAAW,QAAQ,EAAE,IAE5D,iBAAiB,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;QAClC,sEAAsE;QACtE,8DAA8D;QAC9D,MAAM,GAAG,GAAI,KAAa,CAAC,GAAG,CAAC;QAE/B,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;gBAC3B,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,CAAC,GAAG,WAAW,KAAK,CAAC;aAChD,CAAC,IAED,KAAK,CACF,CACP,CAAC;IACJ,CAAC,CAAC,CACE,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport flattenChildren from 'react-keyed-flatten-children';\nimport { useContainerQuery } from '../../internal/hooks/container-queries';\nimport { InternalColumnLayoutProps } from '../interfaces';\nimport styles from './styles.css.js';\n\nconst isOdd = (value: number): boolean => value % 2 !== 0;\n\nexport function calculcateCssColumnCount(\n  columns: number,\n  minColumnWidth: number,\n  containerWidth: number | null\n): number {\n  if (!containerWidth) {\n    return columns;\n  }\n\n  // First, calculate how many columns we can have based on the current container width and minColumnWidth.\n  const targetColumnCount = Math.min(columns, Math.floor(containerWidth / minColumnWidth));\n\n  // When we start wrapping into fewer columns than desired, we want to keep the number of columns even.\n  return Math.max(\n    1,\n    targetColumnCount < columns && isOdd(targetColumnCount) ? targetColumnCount - 1 : targetColumnCount\n  );\n}\n\ninterface FlexibleColumnLayoutProps\n  extends Pick<InternalColumnLayoutProps, 'minColumnWidth' | 'columns' | 'variant' | 'borders' | 'disableGutters'> {\n  children: React.ReactNode;\n}\n\nexport default function FlexibleColumnLayout({\n  columns = 1,\n  minColumnWidth = 0,\n  disableGutters,\n  variant,\n  children,\n}: FlexibleColumnLayoutProps) {\n  const [containerWidth, containerRef] = useContainerQuery(rect => rect.width);\n\n  const columnCount = calculcateCssColumnCount(columns, minColumnWidth, containerWidth);\n  const shouldDisableGutters = variant !== 'text-grid' && disableGutters;\n\n  // Flattening the children allows us to \"see through\" React Fragments and nested arrays.\n  const flattenedChildren = flattenChildren(children);\n\n  return (\n    <div\n      ref={containerRef}\n      className={clsx(\n        styles['css-grid'],\n        styles[`grid-variant-${variant}`],\n        shouldDisableGutters && [styles['grid-no-gutters']]\n      )}\n      style={{ gridTemplateColumns: `repeat(${columnCount}, 1fr)` }}\n    >\n      {flattenedChildren.map((child, i) => {\n        // If this react child is a primitive value, the key will be undefined\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        const key = (child as any).key;\n\n        return (\n          <div\n            key={key}\n            className={clsx(styles.item, {\n              [styles['first-column']]: i % columnCount === 0,\n            })}\n          >\n            {child}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"]}

package/column-layout/flexible-column-layout/styles.css.js

@@ -0,0 +1,10 @@
+
+    import './styles.scoped.css';
+    export default {
+  "css-grid": "awsui_css-grid_zqq3x_19kru_9",
+  "grid-no-gutters": "awsui_grid-no-gutters_zqq3x_19kru_13",
+  "grid-variant-text-grid": "awsui_grid-variant-text-grid_zqq3x_19kru_16",
+  "item": "awsui_item_zqq3x_19kru_16",
+  "first-column": "awsui_first-column_zqq3x_19kru_21"
+};
+  

package/column-layout/flexible-column-layout/styles.scoped.css

@@ -0,0 +1,24 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_css-grid_zqq3x_19kru_9:not(#\9) {
+  display: grid;
+  gap: var(--space-grid-gutter-s46zha, 20px);
+}
+.awsui_css-grid_zqq3x_19kru_9.awsui_grid-no-gutters_zqq3x_19kru_13:not(#\9) {
+  gap: 0;
+}
+.awsui_css-grid_zqq3x_19kru_9.awsui_grid-variant-text-grid_zqq3x_19kru_16 > .awsui_item_zqq3x_19kru_16:not(#\9) {
+  border-left: var(--border-divider-section-width-orq175, 2px) solid var(--color-border-divider-default-9o8zql, #e9ebed);
+  padding-left: var(--space-grid-gutter-s46zha, 20px);
+  padding-right: var(--space-grid-gutter-s46zha, 20px);
+}
+.awsui_css-grid_zqq3x_19kru_9.awsui_grid-variant-text-grid_zqq3x_19kru_16 > .awsui_item_zqq3x_19kru_16.awsui_first-column_zqq3x_19kru_21:not(#\9) {
+  border-left: 0;
+  padding-left: 0;
+}

package/column-layout/flexible-column-layout/styles.selectors.js

@@ -0,0 +1,11 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "css-grid": "awsui_css-grid_zqq3x_19kru_9",
+  "grid-no-gutters": "awsui_grid-no-gutters_zqq3x_19kru_13",
+  "grid-variant-text-grid": "awsui_grid-variant-text-grid_zqq3x_19kru_16",
+  "item": "awsui_item_zqq3x_19kru_16",
+  "first-column": "awsui_first-column_zqq3x_19kru_21"
+};
+  

package/column-layout/grid-column-layout.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { InternalColumnLayoutProps } from './interfaces';
+import { ColumnLayoutBreakpoint } from './internal';
+interface GridColumnLayoutProps extends Required<Pick<InternalColumnLayoutProps, 'columns' | 'variant' | 'borders' | 'disableGutters'>> {
+    children: React.ReactNode;
+    __breakpoint?: ColumnLayoutBreakpoint;
+}
+export default function GridColumnLayout({ columns, variant, borders, disableGutters, __breakpoint, children, }: GridColumnLayoutProps): JSX.Element;
+export {};
+//# sourceMappingURL=grid-column-layout.d.ts.map

package/column-layout/grid-column-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-column-layout.d.ts","sourceRoot":"lib/default/","sources":["column-layout/grid-column-layout.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,EAAmB,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAUrE,UAAU,qBACR,SAAQ,QAAQ,CAAC,IAAI,CAAC,yBAAyB,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,gBAAgB,CAAC,CAAC;IACvG,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,sBAAsB,CAAC;CACvC;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,OAAO,EACP,OAAO,EACP,OAAO,EACP,cAAc,EACd,YAAY,EACZ,QAAQ,GACT,EAAE,qBAAqB,eA2BvB"}

package/column-layout/grid-column-layout.js

@@ -0,0 +1,32 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import clsx from 'clsx';
+import flattenChildren from 'react-keyed-flatten-children';
+import InternalGrid from '../grid/internal';
+import { useContainerBreakpoints } from '../internal/hooks/container-queries';
+import { repeat } from './util';
+import { COLUMN_TRIGGERS } from './internal';
+import styles from './styles.css.js';
+const COLUMN_DEFS = {
+    1: { colspan: { default: 12, xxs: 12, xs: 12 } },
+    2: { colspan: { default: 12, xxs: 6, xs: 6 } },
+    3: { colspan: { default: 12, xxs: 6, xs: 4 } },
+    4: { colspan: { default: 12, xxs: 6, xs: 3 } },
+};
+export default function GridColumnLayout({ columns, variant, borders, disableGutters, __breakpoint, children, }) {
+    var _a;
+    const isTextGridVariant = variant === 'text-grid';
+    const shouldDisableGutters = !isTextGridVariant && disableGutters;
+    const shouldHaveHorizontalBorders = !isTextGridVariant && (borders === 'horizontal' || borders === 'all');
+    const shouldHaveVerticalBorders = !isTextGridVariant && (borders === 'vertical' || borders === 'all');
+    // Flattening the children allows us to "see through" React Fragments and nested arrays.
+    const flattenedChildren = flattenChildren(children);
+    const [breakpoint, ref] = useContainerBreakpoints(COLUMN_TRIGGERS);
+    return (React.createElement(InternalGrid, { ref: ref, disableGutters: true, gridDefinition: repeat((_a = COLUMN_DEFS[columns]) !== null && _a !== void 0 ? _a : {}, flattenedChildren.length), className: clsx(styles.grid, styles[`grid-columns-${columns}`], styles[`grid-variant-${variant}`], {
+            [styles['grid-horizontal-borders']]: shouldHaveHorizontalBorders,
+            [styles['grid-vertical-borders']]: shouldHaveVerticalBorders,
+            [styles['grid-no-gutters']]: shouldDisableGutters,
+        }), __breakpoint: __breakpoint || breakpoint, __responsiveClassName: breakpoint => breakpoint && styles[`grid-breakpoint-${breakpoint}`] }, children));
+}
+//# sourceMappingURL=grid-column-layout.js.map

package/column-layout/grid-column-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-column-layout.js","sourceRoot":"lib/default/","sources":["column-layout/grid-column-layout.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAC3D,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAE5C,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,OAAO,EAAE,eAAe,EAA0B,MAAM,YAAY,CAAC;AACrE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,WAAW,GAA4D;IAC3E,CAAC,EAAE,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;IAChD,CAAC,EAAE,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE;IAC9C,CAAC,EAAE,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE;IAC9C,CAAC,EAAE,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE;CAC/C,CAAC;AAQF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,OAAO,EACP,OAAO,EACP,OAAO,EACP,cAAc,EACd,YAAY,EACZ,QAAQ,GACc;;IACtB,MAAM,iBAAiB,GAAG,OAAO,KAAK,WAAW,CAAC;IAClD,MAAM,oBAAoB,GAAG,CAAC,iBAAiB,IAAI,cAAc,CAAC;IAClE,MAAM,2BAA2B,GAAG,CAAC,iBAAiB,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,OAAO,KAAK,KAAK,CAAC,CAAC;IAC1G,MAAM,yBAAyB,GAAG,CAAC,iBAAiB,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,OAAO,KAAK,KAAK,CAAC,CAAC;IAEtG,wFAAwF;IACxF,MAAM,iBAAiB,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;IAEpD,MAAM,CAAC,UAAU,EAAE,GAAG,CAAC,GAAG,uBAAuB,CAAC,eAAe,CAAC,CAAC;IAEnE,OAAO,CACL,oBAAC,YAAY,IACX,GAAG,EAAE,GAAG,EACR,cAAc,EAAE,IAAI,EACpB,cAAc,EAAE,MAAM,CAAC,MAAA,WAAW,CAAC,OAAO,CAAC,mCAAI,EAAE,EAAE,iBAAiB,CAAC,MAAM,CAAC,EAC5E,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,gBAAgB,OAAO,EAAE,CAAC,EAAE,MAAM,CAAC,gBAAgB,OAAO,EAAE,CAAC,EAAE;YACjG,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAAC,EAAE,2BAA2B;YAChE,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,EAAE,yBAAyB;YAC5D,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,oBAAoB;SAClD,CAAC,EACF,YAAY,EAAE,YAAY,IAAI,UAAU,EACxC,qBAAqB,EAAE,UAAU,CAAC,EAAE,CAAC,UAAU,IAAI,MAAM,CAAC,mBAAmB,UAAU,EAAE,CAAC,IAEzF,QAAQ,CACI,CAChB,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport flattenChildren from 'react-keyed-flatten-children';\nimport InternalGrid from '../grid/internal';\nimport { GridProps } from '../grid/interfaces';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { repeat } from './util';\nimport { InternalColumnLayoutProps } from './interfaces';\nimport { COLUMN_TRIGGERS, ColumnLayoutBreakpoint } from './internal';\nimport styles from './styles.css.js';\n\nconst COLUMN_DEFS: Record<number, GridProps.ElementDefinition | undefined> = {\n  1: { colspan: { default: 12, xxs: 12, xs: 12 } },\n  2: { colspan: { default: 12, xxs: 6, xs: 6 } },\n  3: { colspan: { default: 12, xxs: 6, xs: 4 } },\n  4: { colspan: { default: 12, xxs: 6, xs: 3 } },\n};\n\ninterface GridColumnLayoutProps\n  extends Required<Pick<InternalColumnLayoutProps, 'columns' | 'variant' | 'borders' | 'disableGutters'>> {\n  children: React.ReactNode;\n  __breakpoint?: ColumnLayoutBreakpoint;\n}\n\nexport default function GridColumnLayout({\n  columns,\n  variant,\n  borders,\n  disableGutters,\n  __breakpoint,\n  children,\n}: GridColumnLayoutProps) {\n  const isTextGridVariant = variant === 'text-grid';\n  const shouldDisableGutters = !isTextGridVariant && disableGutters;\n  const shouldHaveHorizontalBorders = !isTextGridVariant && (borders === 'horizontal' || borders === 'all');\n  const shouldHaveVerticalBorders = !isTextGridVariant && (borders === 'vertical' || borders === 'all');\n\n  // Flattening the children allows us to \"see through\" React Fragments and nested arrays.\n  const flattenedChildren = flattenChildren(children);\n\n  const [breakpoint, ref] = useContainerBreakpoints(COLUMN_TRIGGERS);\n\n  return (\n    <InternalGrid\n      ref={ref}\n      disableGutters={true}\n      gridDefinition={repeat(COLUMN_DEFS[columns] ?? {}, flattenedChildren.length)}\n      className={clsx(styles.grid, styles[`grid-columns-${columns}`], styles[`grid-variant-${variant}`], {\n        [styles['grid-horizontal-borders']]: shouldHaveHorizontalBorders,\n        [styles['grid-vertical-borders']]: shouldHaveVerticalBorders,\n        [styles['grid-no-gutters']]: shouldDisableGutters,\n      })}\n      __breakpoint={__breakpoint || breakpoint}\n      __responsiveClassName={breakpoint => breakpoint && styles[`grid-breakpoint-${breakpoint}`]}\n    >\n      {children}\n    </InternalGrid>\n  );\n}\n"]}

package/column-layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["column-layout/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAE7B,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,OAAW,EACX,OAAmB,EACnB,OAAgB,EAChB,cAAsB,EACtB,GAAG,KAAK,EACT,EAAE,iBAAiB,eAgBnB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["column-layout/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAE7B,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,OAAW,EACX,OAAmB,EACnB,OAAgB,EAChB,cAAsB,EACtB,GAAG,KAAK,EACT,EAAE,iBAAiB,eAanB"}

package/column-layout/index.js

@@ -2,17 +2,15 @@ import { __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
-import InternalColumnLayout, { COLUMN_TRIGGERS } from './internal';
+import InternalColumnLayout from './internal';
 import { getExternalProps } from '../internal/utils/external-props';
-import { useContainerBreakpoints } from '../internal/hooks/container-queries';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import useBaseComponent from '../internal/hooks/use-base-component';
 export default function ColumnLayout(_a) {
     var { columns = 1, variant = 'default', borders = 'none', disableGutters = false } = _a, props = __rest(_a, ["columns", "variant", "borders", "disableGutters"]);
     const baseComponentProps = useBaseComponent('ColumnLayout');
-    const [breakpoint, ref] = useContainerBreakpoints(COLUMN_TRIGGERS);
     const externalProps = getExternalProps(props);
-    return (React.createElement(InternalColumnLayout, Object.assign({ columns: columns, variant: variant, borders: borders, disableGutters: disableGutters }, externalProps, baseComponentProps, { __breakpoint: breakpoint, ref: ref })));
+    return (React.createElement(InternalColumnLayout, Object.assign({ columns: columns, variant: variant, borders: borders, disableGutters: disableGutters }, externalProps, baseComponentProps)));
 }
 applyDisplayName(ColumnLayout, 'ColumnLayout');
 //# sourceMappingURL=index.js.map

package/column-layout/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["column-layout/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,oBAAoB,EAAE,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAKpE,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAMjB;QANiB,EACnC,OAAO,GAAG,CAAC,EACX,OAAO,GAAG,SAAS,EACnB,OAAO,GAAG,MAAM,EAChB,cAAc,GAAG,KAAK,OAEJ,EADf,KAAK,cAL2B,mDAMpC,CADS;IAER,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAC5D,MAAM,CAAC,UAAU,EAAE,GAAG,CAAC,GAAG,uBAAuB,CAAC,eAAe,CAAC,CAAC;IACnE,MAAM,aAAa,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CACL,oBAAC,oBAAoB,kBACnB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,IAC1B,aAAa,EACb,kBAAkB,IACtB,YAAY,EAAE,UAAU,EACxB,GAAG,EAAE,GAAG,IACR,CACH,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,YAAY,EAAE,cAAc,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 InternalColumnLayout, { COLUMN_TRIGGERS } from './internal';\nimport { getExternalProps } from '../internal/utils/external-props';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { ColumnLayoutProps } from './interfaces';\n\nexport { ColumnLayoutProps };\n\nexport default function ColumnLayout({\n  columns = 1,\n  variant = 'default',\n  borders = 'none',\n  disableGutters = false,\n  ...props\n}: ColumnLayoutProps) {\n  const baseComponentProps = useBaseComponent('ColumnLayout');\n  const [breakpoint, ref] = useContainerBreakpoints(COLUMN_TRIGGERS);\n  const externalProps = getExternalProps(props);\n  return (\n    <InternalColumnLayout\n      columns={columns}\n      variant={variant}\n      borders={borders}\n      disableGutters={disableGutters}\n      {...externalProps}\n      {...baseComponentProps}\n      __breakpoint={breakpoint}\n      ref={ref}\n    />\n  );\n}\n\napplyDisplayName(ColumnLayout, 'ColumnLayout');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["column-layout/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,oBAAoB,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAKpE,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAMjB;QANiB,EACnC,OAAO,GAAG,CAAC,EACX,OAAO,GAAG,SAAS,EACnB,OAAO,GAAG,MAAM,EAChB,cAAc,GAAG,KAAK,OAEJ,EADf,KAAK,cAL2B,mDAMpC,CADS;IAER,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAC5D,MAAM,aAAa,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CACL,oBAAC,oBAAoB,kBACnB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,IAC1B,aAAa,EACb,kBAAkB,EACtB,CACH,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,YAAY,EAAE,cAAc,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 InternalColumnLayout from './internal';\nimport { getExternalProps } from '../internal/utils/external-props';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { ColumnLayoutProps } from './interfaces';\n\nexport { ColumnLayoutProps };\n\nexport default function ColumnLayout({\n  columns = 1,\n  variant = 'default',\n  borders = 'none',\n  disableGutters = false,\n  ...props\n}: ColumnLayoutProps) {\n  const baseComponentProps = useBaseComponent('ColumnLayout');\n  const externalProps = getExternalProps(props);\n  return (\n    <InternalColumnLayout\n      columns={columns}\n      variant={variant}\n      borders={borders}\n      disableGutters={disableGutters}\n      {...externalProps}\n      {...baseComponentProps}\n    />\n  );\n}\n\napplyDisplayName(ColumnLayout, 'ColumnLayout');\n"]}

package/column-layout/interfaces.d.ts

@@ -6,6 +6,8 @@ export interface ColumnLayoutProps extends BaseComponentProps {
     /**
      * Specifies the number of columns in each grid row.
      * Valid values are any integer between 1 and 4.
+     *
+     * Note that there is no upper limit when used in combination with `minColumnWidth`.
      */
     columns?: number;
     /**
@@ -14,12 +16,21 @@ export interface ColumnLayoutProps extends BaseComponentProps {
     variant?: ColumnLayoutProps.Variant;
     /**
      * Controls whether dividers are placed between rows and columns.
+     *
+     * Note: This is not supported when used with `minColumnWidth`.
      */
     borders?: ColumnLayoutProps.Borders;
     /**
      * Determines whether the default gutters between columns are removed.
      */
     disableGutters?: boolean;
+    /**
+     * Use together with `columns` to specify the desired minimum width for each column in pixels.
+     *
+     * The number of columns is determined by the value of this property, the available space,
+     * and the maximum number of columns as defined by the `columns` property.
+     */
+    minColumnWidth?: number;
     /**
      * The columns to render.
      */

package/column-layout/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["column-layout/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAEpD,MAAM,WAAW,iBAAkB,SAAQ,kBAAkB;IAC3D;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC;IAEpC;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC;IAEpC;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,yBAAiB,iBAAiB,CAAC;IACjC,KAAY,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;IAC9C,KAAY,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,KAAK,CAAC;CAClE;AAED,MAAM,WAAW,yBAA0B,SAAQ,iBAAiB,EAAE,0BAA0B;IAC9F,YAAY,CAAC,EAAE,sBAAsB,CAAC;CACvC"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["column-layout/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAEpD,MAAM,WAAW,iBAAkB,SAAQ,kBAAkB;IAC3D;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC;IAEpC;;;;OAIG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC;IAEpC;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,yBAAiB,iBAAiB,CAAC;IACjC,KAAY,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;IAC9C,KAAY,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,KAAK,CAAC;CAClE;AAED,MAAM,WAAW,yBAA0B,SAAQ,iBAAiB,EAAE,0BAA0B;IAC9F,YAAY,CAAC,EAAE,sBAAsB,CAAC;CACvC"}

package/column-layout/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["column-layout/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 { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { ColumnLayoutBreakpoint } from './internal';\n\nexport interface ColumnLayoutProps extends BaseComponentProps {\n  /**\n   * Specifies the number of columns in each grid row.\n   * Valid values are any integer between 1 and 4.\n   */\n  columns?: number;\n\n  /**\n   * Specifies the content type. This determines the spacing of the grid.\n   */\n  variant?: ColumnLayoutProps.Variant;\n\n  /**\n   * Controls whether dividers are placed between rows and columns.\n   */\n  borders?: ColumnLayoutProps.Borders;\n\n  /**\n   * Determines whether the default gutters between columns are removed.\n   */\n  disableGutters?: boolean;\n\n  /**\n   * The columns to render.\n   */\n  children?: React.ReactNode;\n}\n\nexport namespace ColumnLayoutProps {\n  export type Variant = 'default' | 'text-grid';\n  export type Borders = 'none' | 'vertical' | 'horizontal' | 'all';\n}\n\nexport interface InternalColumnLayoutProps extends ColumnLayoutProps, InternalBaseComponentProps {\n  __breakpoint?: ColumnLayoutBreakpoint;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["column-layout/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 { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { ColumnLayoutBreakpoint } from './internal';\n\nexport interface ColumnLayoutProps extends BaseComponentProps {\n  /**\n   * Specifies the number of columns in each grid row.\n   * Valid values are any integer between 1 and 4.\n   *\n   * Note that there is no upper limit when used in combination with `minColumnWidth`.\n   */\n  columns?: number;\n\n  /**\n   * Specifies the content type. This determines the spacing of the grid.\n   */\n  variant?: ColumnLayoutProps.Variant;\n\n  /**\n   * Controls whether dividers are placed between rows and columns.\n   *\n   * Note: This is not supported when used with `minColumnWidth`.\n   */\n  borders?: ColumnLayoutProps.Borders;\n\n  /**\n   * Determines whether the default gutters between columns are removed.\n   */\n  disableGutters?: boolean;\n\n  /**\n   * Use together with `columns` to specify the desired minimum width for each column in pixels.\n   *\n   * The number of columns is determined by the value of this property, the available space,\n   * and the maximum number of columns as defined by the `columns` property.\n   */\n  minColumnWidth?: number;\n\n  /**\n   * The columns to render.\n   */\n  children?: React.ReactNode;\n}\n\nexport namespace ColumnLayoutProps {\n  export type Variant = 'default' | 'text-grid';\n  export type Borders = 'none' | 'vertical' | 'horizontal' | 'all';\n}\n\nexport interface InternalColumnLayoutProps extends ColumnLayoutProps, InternalBaseComponentProps {\n  __breakpoint?: ColumnLayoutBreakpoint;\n}\n"]}

package/column-layout/internal.d.ts

@@ -1,10 +1,9 @@
-import React from 'react';
+/// <reference types="react" />
 import { InternalColumnLayoutProps } from './interfaces';
 export declare const COLUMN_TRIGGERS: readonly ["default", "xxs", "xs"];
 export type ColumnLayoutBreakpoint = typeof COLUMN_TRIGGERS[number] | null;
 /**
  * A responsive grid layout.
  */
-declare const _default: React.ForwardRefExoticComponent<InternalColumnLayoutProps & React.RefAttributes<any>>;
-export default _default;
+export default function ColumnLayout({ columns, variant, borders, disableGutters, minColumnWidth, children, __breakpoint, __internalRootRef, ...restProps }: InternalColumnLayoutProps): JSX.Element;
 //# sourceMappingURL=internal.d.ts.map

package/column-layout/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["column-layout/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAC;AAEzD,eAAO,MAAM,eAAe,mCAAoC,CAAC;AACjE,MAAM,MAAM,sBAAsB,GAAG,OAAO,eAAe,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;AAQ3E;;GAEG;;AACH,wBAyCG"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["column-layout/internal.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAC;AAKzD,eAAO,MAAM,eAAe,mCAAoC,CAAC;AACjE,MAAM,MAAM,sBAAsB,GAAG,OAAO,eAAe,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;AAE3E;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,OAAW,EACX,OAAmB,EACnB,OAAgB,EAChB,cAAsB,EACtB,cAAc,EACd,QAAQ,EACR,YAAY,EACZ,iBAAiB,EACjB,GAAG,SAAS,EACb,EAAE,yBAAyB,eA4B3B"}

package/column-layout/internal.js

@@ -3,38 +3,17 @@ import { __rest } from "tslib";
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 import clsx from 'clsx';
-import flattenChildren from 'react-keyed-flatten-children';
-import InternalGrid from '../grid/internal';
 import { getBaseProps } from '../internal/base-component';
-import { repeat } from './util';
+import FlexibleColumnLayout from './flexible-column-layout';
+import GridColumnLayout from './grid-column-layout';
 import styles from './styles.css.js';
 export const COLUMN_TRIGGERS = ['default', 'xxs', 'xs'];
-const COLUMN_DEFS = {
-    1: { colspan: { default: 12, xxs: 12, xs: 12 } },
-    2: { colspan: { default: 12, xxs: 6, xs: 6 } },
-    3: { colspan: { default: 12, xxs: 6, xs: 4 } },
-    4: { colspan: { default: 12, xxs: 6, xs: 3 } },
-};
 /**
  * A responsive grid layout.
  */
-export default React.forwardRef(function ColumnLayout(_a, ref) {
-    var _b;
-    var { columns = 1, variant = 'default', borders = 'none', disableGutters = false, children, __breakpoint, __internalRootRef } = _a, restProps = __rest(_a, ["columns", "variant", "borders", "disableGutters", "children", "__breakpoint", "__internalRootRef"]);
+export default function ColumnLayout(_a) {
+    var { columns = 1, variant = 'default', borders = 'none', disableGutters = false, minColumnWidth, children, __breakpoint, __internalRootRef } = _a, restProps = __rest(_a, ["columns", "variant", "borders", "disableGutters", "minColumnWidth", "children", "__breakpoint", "__internalRootRef"]);
     const baseProps = getBaseProps(restProps);
-    const isTextGridVariant = variant === 'text-grid';
-    const shouldDisableGutters = !isTextGridVariant && disableGutters;
-    const shouldHaveHorizontalBorders = !isTextGridVariant && (borders === 'horizontal' || borders === 'all');
-    const shouldHaveVerticalBorders = !isTextGridVariant && (borders === 'vertical' || borders === 'all');
-    /*
-     Flattening the children allows us to "see through" React Fragments and nested arrays.
-     */
-    const flattenedChildren = flattenChildren(children);
-    return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles['column-layout']), ref: __internalRootRef }),
-        React.createElement(InternalGrid, { ref: ref, disableGutters: true, gridDefinition: repeat((_b = COLUMN_DEFS[columns]) !== null && _b !== void 0 ? _b : {}, flattenedChildren.length), className: clsx(styles.grid, styles[`grid-columns-${columns}`], styles[`grid-variant-${variant}`], {
-                [styles['grid-horizontal-borders']]: shouldHaveHorizontalBorders,
-                [styles['grid-vertical-borders']]: shouldHaveVerticalBorders,
-                [styles['grid-no-gutters']]: shouldDisableGutters,
-            }), __breakpoint: __breakpoint, __responsiveClassName: breakpoint => breakpoint && styles[`grid-breakpoint-${breakpoint}`] }, children)));
-});
+    return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles['column-layout']), ref: __internalRootRef }), minColumnWidth ? (React.createElement(FlexibleColumnLayout, { columns: columns, borders: borders, variant: variant, minColumnWidth: minColumnWidth, disableGutters: disableGutters }, children)) : (React.createElement(GridColumnLayout, { columns: columns, variant: variant, borders: borders, disableGutters: disableGutters, __breakpoint: __breakpoint }, children))));
+}
 //# sourceMappingURL=internal.js.map

package/column-layout/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["column-layout/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAC3D,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAE5C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAU,CAAC;AAEjE,MAAM,WAAW,GAA4D;IAC3E,CAAC,EAAE,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;IAChD,CAAC,EAAE,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE;IAC9C,CAAC,EAAE,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE;IAC9C,CAAC,EAAE,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE;CAC/C,CAAC;AAEF;;GAEG;AACH,eAAe,KAAK,CAAC,UAAU,CAAC,SAAS,YAAY,CACnD,EAS4B,EAC5B,GAAoB;;QAVpB,EACE,OAAO,GAAG,CAAC,EACX,OAAO,GAAG,SAAS,EACnB,OAAO,GAAG,MAAM,EAChB,cAAc,GAAG,KAAK,EACtB,QAAQ,EACR,YAAY,EACZ,iBAAiB,OAES,EADvB,SAAS,cARd,oGASC,CADa;IAId,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,iBAAiB,GAAG,OAAO,KAAK,WAAW,CAAC;IAClD,MAAM,oBAAoB,GAAG,CAAC,iBAAiB,IAAI,cAAc,CAAC;IAClE,MAAM,2BAA2B,GAAG,CAAC,iBAAiB,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,OAAO,KAAK,KAAK,CAAC,CAAC;IAC1G,MAAM,yBAAyB,GAAG,CAAC,iBAAiB,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,OAAO,KAAK,KAAK,CAAC,CAAC;IACtG;;OAEG;IACH,MAAM,iBAAiB,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;IAEpD,OAAO,CACL,6CAAS,SAAS,IAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,GAAG,EAAE,iBAAiB;QACvG,oBAAC,YAAY,IACX,GAAG,EAAE,GAAG,EACR,cAAc,EAAE,IAAI,EACpB,cAAc,EAAE,MAAM,CAAC,MAAA,WAAW,CAAC,OAAO,CAAC,mCAAI,EAAE,EAAE,iBAAiB,CAAC,MAAM,CAAC,EAC5E,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,gBAAgB,OAAO,EAAE,CAAC,EAAE,MAAM,CAAC,gBAAgB,OAAO,EAAE,CAAC,EAAE;gBACjG,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAAC,EAAE,2BAA2B;gBAChE,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,EAAE,yBAAyB;gBAC5D,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,oBAAoB;aAClD,CAAC,EACF,YAAY,EAAE,YAAY,EAC1B,qBAAqB,EAAE,UAAU,CAAC,EAAE,CAAC,UAAU,IAAI,MAAM,CAAC,mBAAmB,UAAU,EAAE,CAAC,IAEzF,QAAQ,CACI,CACX,CACP,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport flattenChildren from 'react-keyed-flatten-children';\nimport InternalGrid from '../grid/internal';\nimport { GridProps } from '../grid/interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport { repeat } from './util';\nimport styles from './styles.css.js';\nimport { InternalColumnLayoutProps } from './interfaces';\n\nexport const COLUMN_TRIGGERS = ['default', 'xxs', 'xs'] as const;\nexport type ColumnLayoutBreakpoint = typeof COLUMN_TRIGGERS[number] | null;\nconst COLUMN_DEFS: Record<number, GridProps.ElementDefinition | undefined> = {\n  1: { colspan: { default: 12, xxs: 12, xs: 12 } },\n  2: { colspan: { default: 12, xxs: 6, xs: 6 } },\n  3: { colspan: { default: 12, xxs: 6, xs: 4 } },\n  4: { colspan: { default: 12, xxs: 6, xs: 3 } },\n};\n\n/**\n * A responsive grid layout.\n */\nexport default React.forwardRef(function ColumnLayout(\n  {\n    columns = 1,\n    variant = 'default',\n    borders = 'none',\n    disableGutters = false,\n    children,\n    __breakpoint,\n    __internalRootRef,\n    ...restProps\n  }: InternalColumnLayoutProps,\n  ref?: React.Ref<any>\n) {\n  const baseProps = getBaseProps(restProps);\n  const isTextGridVariant = variant === 'text-grid';\n  const shouldDisableGutters = !isTextGridVariant && disableGutters;\n  const shouldHaveHorizontalBorders = !isTextGridVariant && (borders === 'horizontal' || borders === 'all');\n  const shouldHaveVerticalBorders = !isTextGridVariant && (borders === 'vertical' || borders === 'all');\n  /*\n   Flattening the children allows us to \"see through\" React Fragments and nested arrays.\n   */\n  const flattenedChildren = flattenChildren(children);\n\n  return (\n    <div {...baseProps} className={clsx(baseProps.className, styles['column-layout'])} ref={__internalRootRef}>\n      <InternalGrid\n        ref={ref}\n        disableGutters={true}\n        gridDefinition={repeat(COLUMN_DEFS[columns] ?? {}, flattenedChildren.length)}\n        className={clsx(styles.grid, styles[`grid-columns-${columns}`], styles[`grid-variant-${variant}`], {\n          [styles['grid-horizontal-borders']]: shouldHaveHorizontalBorders,\n          [styles['grid-vertical-borders']]: shouldHaveVerticalBorders,\n          [styles['grid-no-gutters']]: shouldDisableGutters,\n        })}\n        __breakpoint={__breakpoint}\n        __responsiveClassName={breakpoint => breakpoint && styles[`grid-breakpoint-${breakpoint}`]}\n      >\n        {children}\n      </InternalGrid>\n    </div>\n  );\n});\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["column-layout/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,oBAAoB,MAAM,0BAA0B,CAAC;AAC5D,OAAO,gBAAgB,MAAM,sBAAsB,CAAC;AACpD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAU,CAAC;AAGjE;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAUT;QAVS,EACnC,OAAO,GAAG,CAAC,EACX,OAAO,GAAG,SAAS,EACnB,OAAO,GAAG,MAAM,EAChB,cAAc,GAAG,KAAK,EACtB,cAAc,EACd,QAAQ,EACR,YAAY,EACZ,iBAAiB,OAES,EADvB,SAAS,cATuB,sHAUpC,CADa;IAEZ,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAE1C,OAAO,CACL,6CAAS,SAAS,IAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,GAAG,EAAE,iBAAiB,KACtG,cAAc,CAAC,CAAC,CAAC,CAChB,oBAAC,oBAAoB,IACnB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,IAE7B,QAAQ,CACY,CACxB,CAAC,CAAC,CAAC,CACF,oBAAC,gBAAgB,IACf,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAE,YAAY,IAEzB,QAAQ,CACQ,CACpB,CACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalColumnLayoutProps } from './interfaces';\nimport FlexibleColumnLayout from './flexible-column-layout';\nimport GridColumnLayout from './grid-column-layout';\nimport styles from './styles.css.js';\n\nexport const COLUMN_TRIGGERS = ['default', 'xxs', 'xs'] as const;\nexport type ColumnLayoutBreakpoint = typeof COLUMN_TRIGGERS[number] | null;\n\n/**\n * A responsive grid layout.\n */\nexport default function ColumnLayout({\n  columns = 1,\n  variant = 'default',\n  borders = 'none',\n  disableGutters = false,\n  minColumnWidth,\n  children,\n  __breakpoint,\n  __internalRootRef,\n  ...restProps\n}: InternalColumnLayoutProps) {\n  const baseProps = getBaseProps(restProps);\n\n  return (\n    <div {...baseProps} className={clsx(baseProps.className, styles['column-layout'])} ref={__internalRootRef}>\n      {minColumnWidth ? (\n        <FlexibleColumnLayout\n          columns={columns}\n          borders={borders}\n          variant={variant}\n          minColumnWidth={minColumnWidth}\n          disableGutters={disableGutters}\n        >\n          {children}\n        </FlexibleColumnLayout>\n      ) : (\n        <GridColumnLayout\n          columns={columns}\n          variant={variant}\n          borders={borders}\n          disableGutters={disableGutters}\n          __breakpoint={__breakpoint}\n        >\n          {children}\n        </GridColumnLayout>\n      )}\n    </div>\n  );\n}\n"]}

package/expandable-section/expandable-section-header.d.ts

@@ -1,5 +1,6 @@
 import { ExpandableSectionProps } from './interfaces';
 import { KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';
+export declare const componentName = "ExpandableSection";
 interface ExpandableDefaultHeaderProps {
     id: string;
     className?: string;
@@ -19,9 +20,11 @@ interface ExpandableSectionHeaderProps extends Omit<ExpandableDefaultHeaderProps
     headerText?: ReactNode;
     headerDescription?: ReactNode;
     headerCounter?: string;
+    headerInfo?: ReactNode;
+    headerActions?: ReactNode;
     headingTagOverride?: ExpandableSectionProps.HeadingTag;
     ariaLabelledBy?: string;
 }
-export declare const ExpandableSectionHeader: ({ id, className, variant, header, headerText, headerDescription, headerCounter, headingTagOverride, expanded, ariaControls, ariaLabel, ariaLabelledBy, onKeyUp, onKeyDown, onClick, }: ExpandableSectionHeaderProps) => JSX.Element;
+export declare const ExpandableSectionHeader: ({ id, className, variant, header, headerText, headerDescription, headerCounter, headerInfo, headerActions, headingTagOverride, expanded, ariaControls, ariaLabel, ariaLabelledBy, onKeyUp, onKeyDown, onClick, }: ExpandableSectionHeaderProps) => JSX.Element;
 export {};
 //# sourceMappingURL=expandable-section-header.d.ts.map

package/expandable-section/expandable-section-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"expandable-section-header.d.ts","sourceRoot":"lib/default/","sources":["expandable-section/expandable-section-header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAc,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUlF,UAAU,4BAA4B;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,oBAAoB,CAAC;IAC9B,SAAS,EAAE,oBAAoB,CAAC;IAChC,OAAO,EAAE,iBAAiB,CAAC;IAC3B,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;IAClB,OAAO,EAAE,sBAAsB,CAAC,OAAO,CAAC;CACzC;AAYD,UAAU,4BAA6B,SAAQ,IAAI,CAAC,4BAA4B,EAAE,UAAU,GAAG,MAAM,CAAC;IACpG,OAAO,EAAE,sBAAsB,CAAC,OAAO,CAAC;IACxC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,sBAAsB,CAAC,UAAU,CAAC;IACvD,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AA0HD,eAAO,MAAM,uBAAuB,0LAgBjC,4BAA4B,gBAgE9B,CAAC"}
+{"version":3,"file":"expandable-section-header.d.ts","sourceRoot":"lib/default/","sources":["expandable-section/expandable-section-header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAc,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUlF,eAAO,MAAM,aAAa,sBAAsB,CAAC;AAEjD,UAAU,4BAA4B;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,oBAAoB,CAAC;IAC9B,SAAS,EAAE,oBAAoB,CAAC;IAChC,OAAO,EAAE,iBAAiB,CAAC;IAC3B,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;IAClB,OAAO,EAAE,sBAAsB,CAAC,OAAO,CAAC;CACzC;AAcD,UAAU,4BAA6B,SAAQ,IAAI,CAAC,4BAA4B,EAAE,UAAU,GAAG,MAAM,CAAC;IACpG,OAAO,EAAE,sBAAsB,CAAC,OAAO,CAAC;IACxC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,kBAAkB,CAAC,EAAE,sBAAsB,CAAC,UAAU,CAAC;IACvD,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAiID,eAAO,MAAM,uBAAuB,qNAkBjC,4BAA4B,gBA4E9B,CAAC"}

package/expandable-section/expandable-section-header.js

@@ -7,6 +7,7 @@ import ScreenreaderOnly from '../internal/components/screenreader-only';
 import { useUniqueId } from '../internal/hooks/use-unique-id';
 import { isDevelopment } from '../internal/is-development';
 import { warnOnce } from '../internal/logging';
+export const componentName = 'ExpandableSection';
 const ExpandableDefaultHeader = ({ id, className, onClick, ariaLabel, ariaControls, expanded, children, icon, onKeyUp, onKeyDown, variant, }) => {
     return (React.createElement("div", { id: id, role: "button", className: className, tabIndex: 0, onKeyUp: onKeyUp, onKeyDown: onKeyDown, onClick: onClick, "aria-label": ariaLabel, "aria-controls": ariaControls, "aria-expanded": expanded },
         React.createElement("div", { className: clsx(styles['icon-container'], styles[`icon-container-${variant}`]) }, icon),
@@ -17,15 +18,19 @@ const ExpandableNavigationHeader = ({ id, className, onClick, ariaLabelledBy, ar
         React.createElement("button", { className: styles['icon-container'], "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, "aria-controls": ariaControls, "aria-expanded": expanded, type: "button" }, icon),
         children));
 };
-const ExpandableHeaderTextWrapper = ({ id, className, onClick, ariaLabel, ariaControls, expanded, children, icon, headerDescription, headerCounter, variant, headingTagOverride, onKeyUp, onKeyDown, }) => {
+const ExpandableHeaderTextWrapper = ({ id, className, onClick, ariaLabel, ariaControls, expanded, children, icon, headerDescription, headerCounter, headerInfo, headerActions, variant, headingTagOverride, onKeyUp, onKeyDown, }) => {
     const screenreaderContentId = useUniqueId('expandable-section-header-content-');
     const isContainer = variant === 'container';
     const HeadingTag = headingTagOverride || 'div';
-    const headerButton = (React.createElement("span", { className: isContainer ? styles['header-container-button'] : styles['header-button'], role: "button", tabIndex: 0, onKeyUp: onKeyUp, onKeyDown: onKeyDown, "aria-label": ariaLabel, "aria-labelledby": ariaLabel || !isContainer ? undefined : screenreaderContentId, "aria-controls": ariaControls, "aria-expanded": expanded },
+    const hasInteractiveElements = headerInfo || headerActions;
+    const listeners = { onClick, onKeyDown, onKeyUp };
+    const wrapperListeners = hasInteractiveElements ? undefined : listeners;
+    const headerButtonListeners = hasInteractiveElements ? listeners : undefined;
+    const headerButton = (React.createElement("span", Object.assign({ className: isContainer ? styles['header-container-button'] : styles['header-button'], role: "button", tabIndex: 0, "aria-label": ariaLabel, "aria-labelledby": ariaLabel || !isContainer ? undefined : screenreaderContentId, "aria-controls": ariaControls, "aria-expanded": expanded }, headerButtonListeners),
         React.createElement("span", { className: clsx(styles['icon-container'], styles[`icon-container-${variant}`]) }, icon),
         React.createElement("span", null, children)));
-    return (React.createElement("div", { id: id, className: className, onClick: onClick },
-        isContainer ? (React.createElement(InternalHeader, { variant: "h2", description: headerDescription, counter: headerCounter, headingTagOverride: headingTagOverride }, headerButton)) : (React.createElement(HeadingTag, { className: styles['header-wrapper'] }, headerButton)),
+    return (React.createElement("div", Object.assign({ id: id, className: className }, wrapperListeners),
+        isContainer ? (React.createElement(InternalHeader, { variant: "h2", description: headerDescription, counter: headerCounter, info: headerInfo, actions: headerActions, headingTagOverride: headingTagOverride }, headerButton)) : (React.createElement(HeadingTag, { className: styles['header-wrapper'] }, headerButton)),
         isContainer && (React.createElement(ScreenreaderOnly, { id: screenreaderContentId },
             children,
             " ",
@@ -33,7 +38,7 @@ const ExpandableHeaderTextWrapper = ({ id, className, onClick, ariaLabel, ariaCo
             " ",
             headerDescription))));
 };
-export const ExpandableSectionHeader = ({ id, className, variant, header, headerText, headerDescription, headerCounter, headingTagOverride, expanded, ariaControls, ariaLabel, ariaLabelledBy, onKeyUp, onKeyDown, onClick, }) => {
+export const ExpandableSectionHeader = ({ id, className, variant, header, headerText, headerDescription, headerCounter, headerInfo, headerActions, headingTagOverride, expanded, ariaControls, ariaLabel, ariaLabelledBy, onKeyUp, onKeyDown, onClick, }) => {
     const icon = (React.createElement(InternalIcon, { size: variant === 'container' ? 'medium' : 'normal', className: clsx(styles.icon, expanded && styles.expanded), name: "caret-down-filled" }));
     const defaultHeaderProps = {
         id: id,
@@ -44,16 +49,20 @@ export const ExpandableSectionHeader = ({ id, className, variant, header, header
         onClick: onClick,
         variant,
     };
-    const triggerClassName = clsx(styles.trigger, styles[`trigger-${variant}`], expanded && styles['trigger-expanded']);
+    if ((headerDescription || headerCounter || headerInfo || headerActions) && variant !== 'container' && isDevelopment) {
+        warnOnce(componentName, 'The `headerCounter`, `headerDescription`, `headerInfo` and `headerActions` props are only supported for the "container" variant.');
+    }
+    const wrapperClassName = clsx(styles.wrapper, styles[`wrapper-${variant}`], expanded && styles['wrapper-expanded']);
     if (variant === 'navigation') {
-        return (React.createElement(ExpandableNavigationHeader, Object.assign({ className: clsx(className, triggerClassName), ariaLabelledBy: ariaLabelledBy }, defaultHeaderProps), headerText !== null && headerText !== void 0 ? headerText : header));
+        return (React.createElement(ExpandableNavigationHeader, Object.assign({ className: clsx(className, wrapperClassName), ariaLabelledBy: ariaLabelledBy }, defaultHeaderProps), headerText !== null && headerText !== void 0 ? headerText : header));
     }
     if (headerText) {
-        return (React.createElement(ExpandableHeaderTextWrapper, Object.assign({ className: clsx(className, triggerClassName, expanded && styles.expanded), headerDescription: headerDescription, headerCounter: headerCounter, headingTagOverride: headingTagOverride, onKeyUp: onKeyUp, onKeyDown: onKeyDown }, defaultHeaderProps), headerText));
+        const hasInteractiveElements = headerInfo || headerActions;
+        return (React.createElement(ExpandableHeaderTextWrapper, Object.assign({ className: clsx(className, wrapperClassName, hasInteractiveElements && styles['with-interactive-elements'], expanded && styles.expanded), headerDescription: headerDescription, headerCounter: headerCounter, headerInfo: headerInfo, headerActions: headerActions, headingTagOverride: headingTagOverride, onKeyUp: onKeyUp, onKeyDown: onKeyDown }, defaultHeaderProps), headerText));
     }
     if (variant === 'container' && header && isDevelopment) {
-        warnOnce('ExpandableSection', 'Use `headerText` instead of `header` to provide the button within the heading for a11y.');
+        warnOnce(componentName, 'Use `headerText` instead of `header` to provide the button within the heading for a11y.');
     }
-    return (React.createElement(ExpandableDefaultHeader, Object.assign({ className: clsx(className, triggerClassName, styles.focusable, expanded && styles.expanded), onKeyUp: onKeyUp, onKeyDown: onKeyDown }, defaultHeaderProps), header));
+    return (React.createElement(ExpandableDefaultHeader, Object.assign({ className: clsx(className, wrapperClassName, styles.focusable, expanded && styles.expanded), onKeyUp: onKeyUp, onKeyDown: onKeyDown }, defaultHeaderProps), header));
 };
 //# sourceMappingURL=expandable-section-header.js.map

package/expandable-section/expandable-section-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"expandable-section-header.js","sourceRoot":"lib/default/","sources":["expandable-section/expandable-section-header.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 { ExpandableSectionProps } from './interfaces';\nimport React, { KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';\nimport InternalIcon from '../icon/internal';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport InternalHeader from '../header/internal';\nimport ScreenreaderOnly from '../internal/components/screenreader-only';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { isDevelopment } from '../internal/is-development';\nimport { warnOnce } from '../internal/logging';\n\ninterface ExpandableDefaultHeaderProps {\n  id: string;\n  className?: string;\n  children?: ReactNode;\n  expanded: boolean;\n  ariaControls: string;\n  ariaLabel?: string;\n  onKeyUp: KeyboardEventHandler;\n  onKeyDown: KeyboardEventHandler;\n  onClick: MouseEventHandler;\n  icon: JSX.Element;\n  variant: ExpandableSectionProps.Variant;\n}\n\ninterface ExpandableNavigationHeaderProps extends Omit<ExpandableDefaultHeaderProps, 'onKeyUp' | 'onKeyDown'> {\n  ariaLabelledBy?: string;\n}\n\ninterface ExpandableHeaderTextWrapperProps extends ExpandableDefaultHeaderProps {\n  headerDescription?: ReactNode;\n  headerCounter?: string;\n  headingTagOverride?: ExpandableSectionProps.HeadingTag;\n}\n\ninterface ExpandableSectionHeaderProps extends Omit<ExpandableDefaultHeaderProps, 'children' | 'icon'> {\n  variant: ExpandableSectionProps.Variant;\n  header?: ReactNode;\n  headerText?: ReactNode;\n  headerDescription?: ReactNode;\n  headerCounter?: string;\n  headingTagOverride?: ExpandableSectionProps.HeadingTag;\n  ariaLabelledBy?: string;\n}\n\nconst ExpandableDefaultHeader = ({\n  id,\n  className,\n  onClick,\n  ariaLabel,\n  ariaControls,\n  expanded,\n  children,\n  icon,\n  onKeyUp,\n  onKeyDown,\n  variant,\n}: ExpandableDefaultHeaderProps) => {\n  return (\n    <div\n      id={id}\n      role=\"button\"\n      className={className}\n      tabIndex={0}\n      onKeyUp={onKeyUp}\n      onKeyDown={onKeyDown}\n      onClick={onClick}\n      aria-label={ariaLabel}\n      aria-controls={ariaControls}\n      aria-expanded={expanded}\n    >\n      <div className={clsx(styles['icon-container'], styles[`icon-container-${variant}`])}>{icon}</div>\n      {children}\n    </div>\n  );\n};\n\nconst ExpandableNavigationHeader = ({\n  id,\n  className,\n  onClick,\n  ariaLabelledBy,\n  ariaLabel,\n  ariaControls,\n  expanded,\n  children,\n  icon,\n}: ExpandableNavigationHeaderProps) => {\n  return (\n    <div id={id} className={className} onClick={onClick}>\n      <button\n        className={styles['icon-container']}\n        aria-labelledby={ariaLabelledBy}\n        aria-label={ariaLabel}\n        aria-controls={ariaControls}\n        aria-expanded={expanded}\n        type=\"button\"\n      >\n        {icon}\n      </button>\n      {children}\n    </div>\n  );\n};\n\nconst ExpandableHeaderTextWrapper = ({\n  id,\n  className,\n  onClick,\n  ariaLabel,\n  ariaControls,\n  expanded,\n  children,\n  icon,\n  headerDescription,\n  headerCounter,\n  variant,\n  headingTagOverride,\n  onKeyUp,\n  onKeyDown,\n}: ExpandableHeaderTextWrapperProps) => {\n  const screenreaderContentId = useUniqueId('expandable-section-header-content-');\n  const isContainer = variant === 'container';\n  const HeadingTag = headingTagOverride || 'div';\n  const headerButton = (\n    <span\n      className={isContainer ? styles['header-container-button'] : styles['header-button']}\n      role=\"button\"\n      tabIndex={0}\n      onKeyUp={onKeyUp}\n      onKeyDown={onKeyDown}\n      aria-label={ariaLabel}\n      // Do not use aria-labelledby={id} but ScreenreaderOnly because safari+VO does not read headerText in this case.\n      aria-labelledby={ariaLabel || !isContainer ? undefined : screenreaderContentId}\n      aria-controls={ariaControls}\n      aria-expanded={expanded}\n    >\n      <span className={clsx(styles['icon-container'], styles[`icon-container-${variant}`])}>{icon}</span>\n      <span>{children}</span>\n    </span>\n  );\n\n  return (\n    <div id={id} className={className} onClick={onClick}>\n      {isContainer ? (\n        <InternalHeader\n          variant=\"h2\"\n          description={headerDescription}\n          counter={headerCounter}\n          headingTagOverride={headingTagOverride}\n        >\n          {headerButton}\n        </InternalHeader>\n      ) : (\n        <HeadingTag className={styles['header-wrapper']}>{headerButton}</HeadingTag>\n      )}\n      {isContainer && (\n        <ScreenreaderOnly id={screenreaderContentId}>\n          {children} {headerCounter} {headerDescription}\n        </ScreenreaderOnly>\n      )}\n    </div>\n  );\n};\n\nexport const ExpandableSectionHeader = ({\n  id,\n  className,\n  variant,\n  header,\n  headerText,\n  headerDescription,\n  headerCounter,\n  headingTagOverride,\n  expanded,\n  ariaControls,\n  ariaLabel,\n  ariaLabelledBy,\n  onKeyUp,\n  onKeyDown,\n  onClick,\n}: ExpandableSectionHeaderProps) => {\n  const icon = (\n    <InternalIcon\n      size={variant === 'container' ? 'medium' : 'normal'}\n      className={clsx(styles.icon, expanded && styles.expanded)}\n      name=\"caret-down-filled\"\n    />\n  );\n  const defaultHeaderProps = {\n    id: id,\n    icon: icon,\n    expanded: expanded,\n    ariaControls: ariaControls,\n    ariaLabel: ariaLabel,\n    onClick: onClick,\n    variant,\n  };\n\n  const triggerClassName = clsx(styles.trigger, styles[`trigger-${variant}`], expanded && styles['trigger-expanded']);\n  if (variant === 'navigation') {\n    return (\n      <ExpandableNavigationHeader\n        className={clsx(className, triggerClassName)}\n        ariaLabelledBy={ariaLabelledBy}\n        {...defaultHeaderProps}\n      >\n        {headerText ?? header}\n      </ExpandableNavigationHeader>\n    );\n  }\n\n  if (headerText) {\n    return (\n      <ExpandableHeaderTextWrapper\n        className={clsx(className, triggerClassName, expanded && styles.expanded)}\n        headerDescription={headerDescription}\n        headerCounter={headerCounter}\n        headingTagOverride={headingTagOverride}\n        onKeyUp={onKeyUp}\n        onKeyDown={onKeyDown}\n        {...defaultHeaderProps}\n      >\n        {headerText}\n      </ExpandableHeaderTextWrapper>\n    );\n  }\n\n  if (variant === 'container' && header && isDevelopment) {\n    warnOnce(\n      'ExpandableSection',\n      'Use `headerText` instead of `header` to provide the button within the heading for a11y.'\n    );\n  }\n\n  return (\n    <ExpandableDefaultHeader\n      className={clsx(className, triggerClassName, styles.focusable, expanded && styles.expanded)}\n      onKeyUp={onKeyUp}\n      onKeyDown={onKeyDown}\n      {...defaultHeaderProps}\n    >\n      {header}\n    </ExpandableDefaultHeader>\n  );\n};\n"]}
+{"version":3,"file":"expandable-section-header.js","sourceRoot":"lib/default/","sources":["expandable-section/expandable-section-header.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA6D,MAAM,OAAO,CAAC;AAClF,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,oBAAoB,CAAC;AAChD,OAAO,gBAAgB,MAAM,0CAA0C,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C,MAAM,CAAC,MAAM,aAAa,GAAG,mBAAmB,CAAC;AAwCjD,MAAM,uBAAuB,GAAG,CAAC,EAC/B,EAAE,EACF,SAAS,EACT,OAAO,EACP,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EACT,OAAO,GACsB,EAAE,EAAE;IACjC,OAAO,CACL,6BACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,gBACJ,SAAS,mBACN,YAAY,mBACZ,QAAQ;QAEvB,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,kBAAkB,OAAO,EAAE,CAAC,CAAC,IAAG,IAAI,CAAO;QAChG,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,0BAA0B,GAAG,CAAC,EAClC,EAAE,EACF,SAAS,EACT,OAAO,EACP,cAAc,EACd,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,IAAI,GAC4B,EAAE,EAAE;IACpC,OAAO,CACL,6BAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO;QACjD,gCACE,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,qBAClB,cAAc,gBACnB,SAAS,mBACN,YAAY,mBACZ,QAAQ,EACvB,IAAI,EAAC,QAAQ,IAEZ,IAAI,CACE;QACR,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,2BAA2B,GAAG,CAAC,EACnC,EAAE,EACF,SAAS,EACT,OAAO,EACP,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,iBAAiB,EACjB,aAAa,EACb,UAAU,EACV,aAAa,EACb,OAAO,EACP,kBAAkB,EAClB,OAAO,EACP,SAAS,GACwB,EAAE,EAAE;IACrC,MAAM,qBAAqB,GAAG,WAAW,CAAC,oCAAoC,CAAC,CAAC;IAChF,MAAM,WAAW,GAAG,OAAO,KAAK,WAAW,CAAC;IAC5C,MAAM,UAAU,GAAG,kBAAkB,IAAI,KAAK,CAAC;IAC/C,MAAM,sBAAsB,GAAG,UAAU,IAAI,aAAa,CAAC;IAC3D,MAAM,SAAS,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC;IAClD,MAAM,gBAAgB,GAAG,sBAAsB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;IACxE,MAAM,qBAAqB,GAAG,sBAAsB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;IAC7E,MAAM,YAAY,GAAG,CACnB,4CACE,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,EACpF,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,gBACC,SAAS,qBAEJ,SAAS,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,qBAAqB,mBAC/D,YAAY,mBACZ,QAAQ,IACnB,qBAAqB;QAEzB,8BAAM,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,kBAAkB,OAAO,EAAE,CAAC,CAAC,IAAG,IAAI,CAAQ;QACnG,kCAAO,QAAQ,CAAQ,CAClB,CACR,CAAC;IAEF,OAAO,CACL,2CAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,IAAM,gBAAgB;QACpD,WAAW,CAAC,CAAC,CAAC,CACb,oBAAC,cAAc,IACb,OAAO,EAAC,IAAI,EACZ,WAAW,EAAE,iBAAiB,EAC9B,OAAO,EAAE,aAAa,EACtB,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,aAAa,EACtB,kBAAkB,EAAE,kBAAkB,IAErC,YAAY,CACE,CAClB,CAAC,CAAC,CAAC,CACF,oBAAC,UAAU,IAAC,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,IAAG,YAAY,CAAc,CAC7E;QACA,WAAW,IAAI,CACd,oBAAC,gBAAgB,IAAC,EAAE,EAAE,qBAAqB;YACxC,QAAQ;;YAAG,aAAa;;YAAG,iBAAiB,CAC5B,CACpB,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EACtC,EAAE,EACF,SAAS,EACT,OAAO,EACP,MAAM,EACN,UAAU,EACV,iBAAiB,EACjB,aAAa,EACb,UAAU,EACV,aAAa,EACb,kBAAkB,EAClB,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,cAAc,EACd,OAAO,EACP,SAAS,EACT,OAAO,GACsB,EAAE,EAAE;IACjC,MAAM,IAAI,GAAG,CACX,oBAAC,YAAY,IACX,IAAI,EAAE,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EACnD,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,EACzD,IAAI,EAAC,mBAAmB,GACxB,CACH,CAAC;IACF,MAAM,kBAAkB,GAAG;QACzB,EAAE,EAAE,EAAE;QACN,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,YAAY;QAC1B,SAAS,EAAE,SAAS;QACpB,OAAO,EAAE,OAAO;QAChB,OAAO;KACR,CAAC;IAEF,IAAI,CAAC,iBAAiB,IAAI,aAAa,IAAI,UAAU,IAAI,aAAa,CAAC,IAAI,OAAO,KAAK,WAAW,IAAI,aAAa,EAAE;QACnH,QAAQ,CACN,aAAa,EACb,kIAAkI,CACnI,CAAC;KACH;IAED,MAAM,gBAAgB,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,WAAW,OAAO,EAAE,CAAC,EAAE,QAAQ,IAAI,MAAM,CAAC,kBAAkB,CAAC,CAAC,CAAC;IACpH,IAAI,OAAO,KAAK,YAAY,EAAE;QAC5B,OAAO,CACL,oBAAC,0BAA0B,kBACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,gBAAgB,CAAC,EAC5C,cAAc,EAAE,cAAc,IAC1B,kBAAkB,GAErB,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,MAAM,CACM,CAC9B,CAAC;KACH;IAED,IAAI,UAAU,EAAE;QACd,MAAM,sBAAsB,GAAG,UAAU,IAAI,aAAa,CAAC;QAC3D,OAAO,CACL,oBAAC,2BAA2B,kBAC1B,SAAS,EAAE,IAAI,CACb,SAAS,EACT,gBAAgB,EAChB,sBAAsB,IAAI,MAAM,CAAC,2BAA2B,CAAC,EAC7D,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAC5B,EACD,iBAAiB,EAAE,iBAAiB,EACpC,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,kBAAkB,EAAE,kBAAkB,EACtC,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,IAChB,kBAAkB,GAErB,UAAU,CACiB,CAC/B,CAAC;KACH;IAED,IAAI,OAAO,KAAK,WAAW,IAAI,MAAM,IAAI,aAAa,EAAE;QACtD,QAAQ,CAAC,aAAa,EAAE,yFAAyF,CAAC,CAAC;KACpH;IAED,OAAO,CACL,oBAAC,uBAAuB,kBACtB,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,gBAAgB,EAAE,MAAM,CAAC,SAAS,EAAE,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,EAC3F,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,IAChB,kBAAkB,GAErB,MAAM,CACiB,CAC3B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ExpandableSectionProps } from './interfaces';\nimport React, { KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';\nimport InternalIcon from '../icon/internal';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport InternalHeader from '../header/internal';\nimport ScreenreaderOnly from '../internal/components/screenreader-only';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { isDevelopment } from '../internal/is-development';\nimport { warnOnce } from '../internal/logging';\n\nexport const componentName = 'ExpandableSection';\n\ninterface ExpandableDefaultHeaderProps {\n  id: string;\n  className?: string;\n  children?: ReactNode;\n  expanded: boolean;\n  ariaControls: string;\n  ariaLabel?: string;\n  onKeyUp: KeyboardEventHandler;\n  onKeyDown: KeyboardEventHandler;\n  onClick: MouseEventHandler;\n  icon: JSX.Element;\n  variant: ExpandableSectionProps.Variant;\n}\n\ninterface ExpandableNavigationHeaderProps extends Omit<ExpandableDefaultHeaderProps, 'onKeyUp' | 'onKeyDown'> {\n  ariaLabelledBy?: string;\n}\n\ninterface ExpandableHeaderTextWrapperProps extends ExpandableDefaultHeaderProps {\n  headerDescription?: ReactNode;\n  headerCounter?: string;\n  headerInfo?: ReactNode;\n  headerActions?: ReactNode;\n  headingTagOverride?: ExpandableSectionProps.HeadingTag;\n}\n\ninterface ExpandableSectionHeaderProps extends Omit<ExpandableDefaultHeaderProps, 'children' | 'icon'> {\n  variant: ExpandableSectionProps.Variant;\n  header?: ReactNode;\n  headerText?: ReactNode;\n  headerDescription?: ReactNode;\n  headerCounter?: string;\n  headerInfo?: ReactNode;\n  headerActions?: ReactNode;\n  headingTagOverride?: ExpandableSectionProps.HeadingTag;\n  ariaLabelledBy?: string;\n}\n\nconst ExpandableDefaultHeader = ({\n  id,\n  className,\n  onClick,\n  ariaLabel,\n  ariaControls,\n  expanded,\n  children,\n  icon,\n  onKeyUp,\n  onKeyDown,\n  variant,\n}: ExpandableDefaultHeaderProps) => {\n  return (\n    <div\n      id={id}\n      role=\"button\"\n      className={className}\n      tabIndex={0}\n      onKeyUp={onKeyUp}\n      onKeyDown={onKeyDown}\n      onClick={onClick}\n      aria-label={ariaLabel}\n      aria-controls={ariaControls}\n      aria-expanded={expanded}\n    >\n      <div className={clsx(styles['icon-container'], styles[`icon-container-${variant}`])}>{icon}</div>\n      {children}\n    </div>\n  );\n};\n\nconst ExpandableNavigationHeader = ({\n  id,\n  className,\n  onClick,\n  ariaLabelledBy,\n  ariaLabel,\n  ariaControls,\n  expanded,\n  children,\n  icon,\n}: ExpandableNavigationHeaderProps) => {\n  return (\n    <div id={id} className={className} onClick={onClick}>\n      <button\n        className={styles['icon-container']}\n        aria-labelledby={ariaLabelledBy}\n        aria-label={ariaLabel}\n        aria-controls={ariaControls}\n        aria-expanded={expanded}\n        type=\"button\"\n      >\n        {icon}\n      </button>\n      {children}\n    </div>\n  );\n};\n\nconst ExpandableHeaderTextWrapper = ({\n  id,\n  className,\n  onClick,\n  ariaLabel,\n  ariaControls,\n  expanded,\n  children,\n  icon,\n  headerDescription,\n  headerCounter,\n  headerInfo,\n  headerActions,\n  variant,\n  headingTagOverride,\n  onKeyUp,\n  onKeyDown,\n}: ExpandableHeaderTextWrapperProps) => {\n  const screenreaderContentId = useUniqueId('expandable-section-header-content-');\n  const isContainer = variant === 'container';\n  const HeadingTag = headingTagOverride || 'div';\n  const hasInteractiveElements = headerInfo || headerActions;\n  const listeners = { onClick, onKeyDown, onKeyUp };\n  const wrapperListeners = hasInteractiveElements ? undefined : listeners;\n  const headerButtonListeners = hasInteractiveElements ? listeners : undefined;\n  const headerButton = (\n    <span\n      className={isContainer ? styles['header-container-button'] : styles['header-button']}\n      role=\"button\"\n      tabIndex={0}\n      aria-label={ariaLabel}\n      // Do not use aria-labelledby={id} but ScreenreaderOnly because safari+VO does not read headerText in this case.\n      aria-labelledby={ariaLabel || !isContainer ? undefined : screenreaderContentId}\n      aria-controls={ariaControls}\n      aria-expanded={expanded}\n      {...headerButtonListeners}\n    >\n      <span className={clsx(styles['icon-container'], styles[`icon-container-${variant}`])}>{icon}</span>\n      <span>{children}</span>\n    </span>\n  );\n\n  return (\n    <div id={id} className={className} {...wrapperListeners}>\n      {isContainer ? (\n        <InternalHeader\n          variant=\"h2\"\n          description={headerDescription}\n          counter={headerCounter}\n          info={headerInfo}\n          actions={headerActions}\n          headingTagOverride={headingTagOverride}\n        >\n          {headerButton}\n        </InternalHeader>\n      ) : (\n        <HeadingTag className={styles['header-wrapper']}>{headerButton}</HeadingTag>\n      )}\n      {isContainer && (\n        <ScreenreaderOnly id={screenreaderContentId}>\n          {children} {headerCounter} {headerDescription}\n        </ScreenreaderOnly>\n      )}\n    </div>\n  );\n};\n\nexport const ExpandableSectionHeader = ({\n  id,\n  className,\n  variant,\n  header,\n  headerText,\n  headerDescription,\n  headerCounter,\n  headerInfo,\n  headerActions,\n  headingTagOverride,\n  expanded,\n  ariaControls,\n  ariaLabel,\n  ariaLabelledBy,\n  onKeyUp,\n  onKeyDown,\n  onClick,\n}: ExpandableSectionHeaderProps) => {\n  const icon = (\n    <InternalIcon\n      size={variant === 'container' ? 'medium' : 'normal'}\n      className={clsx(styles.icon, expanded && styles.expanded)}\n      name=\"caret-down-filled\"\n    />\n  );\n  const defaultHeaderProps = {\n    id: id,\n    icon: icon,\n    expanded: expanded,\n    ariaControls: ariaControls,\n    ariaLabel: ariaLabel,\n    onClick: onClick,\n    variant,\n  };\n\n  if ((headerDescription || headerCounter || headerInfo || headerActions) && variant !== 'container' && isDevelopment) {\n    warnOnce(\n      componentName,\n      'The `headerCounter`, `headerDescription`, `headerInfo` and `headerActions` props are only supported for the \"container\" variant.'\n    );\n  }\n\n  const wrapperClassName = clsx(styles.wrapper, styles[`wrapper-${variant}`], expanded && styles['wrapper-expanded']);\n  if (variant === 'navigation') {\n    return (\n      <ExpandableNavigationHeader\n        className={clsx(className, wrapperClassName)}\n        ariaLabelledBy={ariaLabelledBy}\n        {...defaultHeaderProps}\n      >\n        {headerText ?? header}\n      </ExpandableNavigationHeader>\n    );\n  }\n\n  if (headerText) {\n    const hasInteractiveElements = headerInfo || headerActions;\n    return (\n      <ExpandableHeaderTextWrapper\n        className={clsx(\n          className,\n          wrapperClassName,\n          hasInteractiveElements && styles['with-interactive-elements'],\n          expanded && styles.expanded\n        )}\n        headerDescription={headerDescription}\n        headerCounter={headerCounter}\n        headerInfo={headerInfo}\n        headerActions={headerActions}\n        headingTagOverride={headingTagOverride}\n        onKeyUp={onKeyUp}\n        onKeyDown={onKeyDown}\n        {...defaultHeaderProps}\n      >\n        {headerText}\n      </ExpandableHeaderTextWrapper>\n    );\n  }\n\n  if (variant === 'container' && header && isDevelopment) {\n    warnOnce(componentName, 'Use `headerText` instead of `header` to provide the button within the heading for a11y.');\n  }\n\n  return (\n    <ExpandableDefaultHeader\n      className={clsx(className, wrapperClassName, styles.focusable, expanded && styles.expanded)}\n      onKeyUp={onKeyUp}\n      onKeyDown={onKeyDown}\n      {...defaultHeaderProps}\n    >\n      {header}\n    </ExpandableDefaultHeader>\n  );\n};\n"]}

package/expandable-section/interfaces.d.ts

@@ -45,17 +45,17 @@ export interface ExpandableSectionProps extends BaseComponentProps {
      */
     headerText?: React.ReactNode;
     /**
-     * Supplementary text below the heading. Use with container variant.
+     * Supplementary text below the heading. Use with the container variant.
      */
     headerDescription?: string;
     /**
-     * Specifies secondary text that's displayed to the right of the heading title. Use with container variant.
+     * Specifies secondary text that's displayed to the right of the heading title. Use with the container variant.
      * Behaves similar to the Header component counter.
      */
     headerCounter?: string;
     /**
      * Overrides the default [HTML heading tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements).
-     * Use with container variant (which defaults to H2) or default/footer variants (which default to DIV). Note that this only
+     * Use with the container variant (which defaults to H2) or default/footer variants (which default to DIV). Note that this only
      * works with the `headerText` slot (not with the deprecated `header`), and not with the navigation variant.
      */
     headingTagOverride?: ExpandableSectionProps.HeadingTag;
@@ -69,5 +69,13 @@ export interface ExpandableSectionProps extends BaseComponentProps {
      * The event `detail` contains the current value of the `expanded` property.
      */
     onChange?: NonCancelableEventHandler<ExpandableSectionProps.ChangeDetail>;
+    /**
+     * The area next to the heading, used to display an Info link. Use with the container variant.
+     */
+    headerInfo?: React.ReactNode;
+    /**
+     * Actions for the header. Use with the container variant.
+     */
+    headerActions?: React.ReactNode;
 }
 //# sourceMappingURL=interfaces.d.ts.map

package/expandable-section/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["expandable-section/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,yBAAiB,sBAAsB,CAAC;IACtC,KAAY,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,WAAW,GAAG,YAAY,CAAC;IACxE,UAAiB,YAAY;QAC3B,QAAQ,EAAE,OAAO,CAAC;KACnB;IACD,KAAY,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3D;AAED,MAAM,WAAW,sBAAuB,SAAQ,kBAAkB;IAChE;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;SAOK;IACL,OAAO,CAAC,EAAE,sBAAsB,CAAC,OAAO,CAAC;IAEzC;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE7B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,sBAAsB,CAAC,UAAU,CAAC;IAEvD;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,sBAAsB,CAAC,YAAY,CAAC,CAAC;CAC3E"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["expandable-section/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,yBAAiB,sBAAsB,CAAC;IACtC,KAAY,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,WAAW,GAAG,YAAY,CAAC;IACxE,UAAiB,YAAY;QAC3B,QAAQ,EAAE,OAAO,CAAC;KACnB;IACD,KAAY,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3D;AAED,MAAM,WAAW,sBAAuB,SAAQ,kBAAkB;IAChE;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;SAOK;IACL,OAAO,CAAC,EAAE,sBAAsB,CAAC,OAAO,CAAC;IAEzC;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE7B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,sBAAsB,CAAC,UAAU,CAAC;IAEvD;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,sBAAsB,CAAC,YAAY,CAAC,CAAC;IAE1E;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE7B;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC"}

package/expandable-section/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["expandable-section/interfaces.ts"],"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\nexport namespace ExpandableSectionProps {\n  export type Variant = 'default' | 'footer' | 'container' | 'navigation';\n  export interface ChangeDetail {\n    expanded: boolean;\n  }\n  export type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5';\n}\n\nexport interface ExpandableSectionProps extends BaseComponentProps {\n  /**\n   * Determines whether the component initially displays in expanded state (that is, with content visible). The component operates in an uncontrolled\n   * manner even if you provide a value for this property.\n   */\n  defaultExpanded?: boolean;\n\n  /**\n   * Determines whether the component is in the expanded state (that is, with content visible). The component operates in a controlled\n   * manner if you provide a value for this property.\n   */\n  expanded?: boolean;\n\n  /**\n   * The possible variants of an expandable section are as follows:\n   *  * `default` - Use this variant in any context.\n   *  * `footer` - Use this variant in container footers.\n   *  * `container` - Use this variant in a detail page alongside other containers.\n   *  * `navigation` - Use this variant in the navigation panel with anchors and custom styled content.\n   *    It doesn't have any default styles.\n   * */\n  variant?: ExpandableSectionProps.Variant;\n\n  /**\n   * Determines whether the content section's default padding is removed. This default padding is only present for the `container` variant.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * Primary content displayed in the expandable section element.\n   */\n  children?: React.ReactNode;\n\n  /**\n   * @deprecated Use `headerText` instead.\n   */\n  header?: React.ReactNode;\n\n  /**\n   * The heading text. Use plain text. When using the container variant, you can use additional header props like `headerDescription` and `headerCounter` to display other elements in the header.\n   */\n  headerText?: React.ReactNode;\n\n  /**\n   * Supplementary text below the heading. Use with container variant.\n   */\n  headerDescription?: string;\n\n  /**\n   * Specifies secondary text that's displayed to the right of the heading title. Use with container variant.\n   * Behaves similar to the Header component counter.\n   */\n  headerCounter?: string;\n\n  /**\n   * Overrides the default [HTML heading tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements).\n   * Use with container variant (which defaults to H2) or default/footer variants (which default to DIV). Note that this only\n   * works with the `headerText` slot (not with the deprecated `header`), and not with the navigation variant.\n   */\n  headingTagOverride?: ExpandableSectionProps.HeadingTag;\n\n  /**\n   * Adds `aria-label` to the header element.\n   * Use to assign unique labels when there are multiple expandable sections with the same header text on one page.\n   */\n  headerAriaLabel?: string;\n\n  /**\n   * Called when the state changes (that is, when the user expands or collapses the component).\n   * The event `detail` contains the current value of the `expanded` property.\n   */\n  onChange?: NonCancelableEventHandler<ExpandableSectionProps.ChangeDetail>;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["expandable-section/interfaces.ts"],"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\nexport namespace ExpandableSectionProps {\n  export type Variant = 'default' | 'footer' | 'container' | 'navigation';\n  export interface ChangeDetail {\n    expanded: boolean;\n  }\n  export type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5';\n}\n\nexport interface ExpandableSectionProps extends BaseComponentProps {\n  /**\n   * Determines whether the component initially displays in expanded state (that is, with content visible). The component operates in an uncontrolled\n   * manner even if you provide a value for this property.\n   */\n  defaultExpanded?: boolean;\n\n  /**\n   * Determines whether the component is in the expanded state (that is, with content visible). The component operates in a controlled\n   * manner if you provide a value for this property.\n   */\n  expanded?: boolean;\n\n  /**\n   * The possible variants of an expandable section are as follows:\n   *  * `default` - Use this variant in any context.\n   *  * `footer` - Use this variant in container footers.\n   *  * `container` - Use this variant in a detail page alongside other containers.\n   *  * `navigation` - Use this variant in the navigation panel with anchors and custom styled content.\n   *    It doesn't have any default styles.\n   * */\n  variant?: ExpandableSectionProps.Variant;\n\n  /**\n   * Determines whether the content section's default padding is removed. This default padding is only present for the `container` variant.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * Primary content displayed in the expandable section element.\n   */\n  children?: React.ReactNode;\n\n  /**\n   * @deprecated Use `headerText` instead.\n   */\n  header?: React.ReactNode;\n\n  /**\n   * The heading text. Use plain text. When using the container variant, you can use additional header props like `headerDescription` and `headerCounter` to display other elements in the header.\n   */\n  headerText?: React.ReactNode;\n\n  /**\n   * Supplementary text below the heading. Use with the container variant.\n   */\n  headerDescription?: string;\n\n  /**\n   * Specifies secondary text that's displayed to the right of the heading title. Use with the container variant.\n   * Behaves similar to the Header component counter.\n   */\n  headerCounter?: string;\n\n  /**\n   * Overrides the default [HTML heading tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements).\n   * Use with the container variant (which defaults to H2) or default/footer variants (which default to DIV). Note that this only\n   * works with the `headerText` slot (not with the deprecated `header`), and not with the navigation variant.\n   */\n  headingTagOverride?: ExpandableSectionProps.HeadingTag;\n\n  /**\n   * Adds `aria-label` to the header element.\n   * Use to assign unique labels when there are multiple expandable sections with the same header text on one page.\n   */\n  headerAriaLabel?: string;\n\n  /**\n   * Called when the state changes (that is, when the user expands or collapses the component).\n   * The event `detail` contains the current value of the `expanded` property.\n   */\n  onChange?: NonCancelableEventHandler<ExpandableSectionProps.ChangeDetail>;\n\n  /**\n   * The area next to the heading, used to display an Info link. Use with the container variant.\n   */\n  headerInfo?: React.ReactNode;\n\n  /**\n   * Actions for the header. Use with the container variant.\n   */\n  headerActions?: React.ReactNode;\n}\n"]}

package/expandable-section/internal.d.ts

@@ -2,6 +2,6 @@
 import { ExpandableSectionProps } from './interfaces';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 type InternalExpandableSectionProps = ExpandableSectionProps & InternalBaseComponentProps;
-export default function InternalExpandableSection({ expanded: controlledExpanded, defaultExpanded, onChange, variant, children, header, headerText, headerCounter, headerDescription, headingTagOverride, disableContentPaddings, headerAriaLabel, __internalRootRef, ...props }: InternalExpandableSectionProps): JSX.Element;
+export default function InternalExpandableSection({ expanded: controlledExpanded, defaultExpanded, onChange, variant, children, header, headerText, headerCounter, headerDescription, headerInfo, headerActions, headingTagOverride, disableContentPaddings, headerAriaLabel, __internalRootRef, ...props }: InternalExpandableSectionProps): JSX.Element;
 export {};
 //# sourceMappingURL=internal.d.ts.map

package/expandable-section/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["expandable-section/internal.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAKtD,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,KAAK,8BAA8B,GAAG,sBAAsB,GAAG,0BAA0B,CAAC;AAE1F,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,EAChD,QAAQ,EAAE,kBAAkB,EAC5B,eAAe,EACf,QAAQ,EACR,OAAmB,EACnB,QAAQ,EACR,MAAM,EACN,UAAU,EACV,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,eAAe,EACf,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,8BAA8B,eAwFhC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["expandable-section/internal.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAKtD,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,KAAK,8BAA8B,GAAG,sBAAsB,GAAG,0BAA0B,CAAC;AAE1F,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,EAChD,QAAQ,EAAE,kBAAkB,EAC5B,eAAe,EACf,QAAQ,EACR,OAAmB,EACnB,QAAQ,EACR,MAAM,EACN,UAAU,EACV,aAAa,EACb,iBAAiB,EACjB,UAAU,EACV,aAAa,EACb,kBAAkB,EAClB,sBAAsB,EACtB,eAAe,EACf,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,8BAA8B,eA0FhC"}

package/expandable-section/internal.js

@@ -13,7 +13,7 @@ import styles from './styles.css.js';
 import { ExpandableSectionContainer } from './expandable-section-container';
 import { ExpandableSectionHeader } from './expandable-section-header';
 export default function InternalExpandableSection(_a) {
-    var { expanded: controlledExpanded, defaultExpanded, onChange, variant = 'default', children, header, headerText, headerCounter, headerDescription, headingTagOverride, disableContentPaddings, headerAriaLabel, __internalRootRef } = _a, props = __rest(_a, ["expanded", "defaultExpanded", "onChange", "variant", "children", "header", "headerText", "headerCounter", "headerDescription", "headingTagOverride", "disableContentPaddings", "headerAriaLabel", "__internalRootRef"]);
+    var { expanded: controlledExpanded, defaultExpanded, onChange, variant = 'default', children, header, headerText, headerCounter, headerDescription, headerInfo, headerActions, headingTagOverride, disableContentPaddings, headerAriaLabel, __internalRootRef } = _a, props = __rest(_a, ["expanded", "defaultExpanded", "onChange", "variant", "children", "header", "headerText", "headerCounter", "headerDescription", "headerInfo", "headerActions", "headingTagOverride", "disableContentPaddings", "headerAriaLabel", "__internalRootRef"]);
     const ref = useRef(null);
     const controlId = useUniqueId();
     const triggerControlId = `${controlId}-trigger`;
@@ -50,7 +50,7 @@ export default function InternalExpandableSection(_a) {
         onKeyDown,
         onClick,
     };
-    return (React.createElement(ExpandableSectionContainer, Object.assign({}, baseProps, { expanded: expanded, className: clsx(baseProps.className, styles.root), variant: variant, disableContentPaddings: disableContentPaddings, header: React.createElement(ExpandableSectionHeader, Object.assign({ id: triggerControlId, className: clsx(styles.header, styles[`header-${variant}`]), variant: variant, expanded: !!expanded, header: header, headerText: headerText, headerDescription: headerDescription, headerCounter: headerCounter, headingTagOverride: headingTagOverride }, triggerProps)), __internalRootRef: __internalRootRef }),
+    return (React.createElement(ExpandableSectionContainer, Object.assign({}, baseProps, { expanded: expanded, className: clsx(baseProps.className, styles.root), variant: variant, disableContentPaddings: disableContentPaddings, header: React.createElement(ExpandableSectionHeader, Object.assign({ id: triggerControlId, className: clsx(styles.header, styles[`header-${variant}`]), variant: variant, expanded: !!expanded, header: header, headerText: headerText, headerDescription: headerDescription, headerCounter: headerCounter, headerInfo: headerInfo, headerActions: headerActions, headingTagOverride: headingTagOverride }, triggerProps)), __internalRootRef: __internalRootRef }),
         React.createElement(CSSTransition, { in: expanded, timeout: 30, classNames: { enter: styles['content-enter'] }, nodeRef: ref },
             React.createElement("div", { id: controlId, ref: ref, className: clsx(styles.content, styles[`content-${variant}`], expanded && styles['content-expanded']), role: "group", "aria-label": triggerProps.ariaLabel, "aria-labelledby": triggerProps.ariaLabelledBy }, children))));
 }

package/expandable-section/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["expandable-section/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, { KeyboardEvent, useCallback, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { KeyCode } from '../internal/keycode';\nimport { fireNonCancelableEvent } from '../internal/events';\n\nimport { ExpandableSectionProps } from './interfaces';\n\nimport styles from './styles.css.js';\nimport { ExpandableSectionContainer } from './expandable-section-container';\nimport { ExpandableSectionHeader } from './expandable-section-header';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\ntype InternalExpandableSectionProps = ExpandableSectionProps & InternalBaseComponentProps;\n\nexport default function InternalExpandableSection({\n  expanded: controlledExpanded,\n  defaultExpanded,\n  onChange,\n  variant = 'default',\n  children,\n  header,\n  headerText,\n  headerCounter,\n  headerDescription,\n  headingTagOverride,\n  disableContentPaddings,\n  headerAriaLabel,\n  __internalRootRef,\n  ...props\n}: InternalExpandableSectionProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const controlId = useUniqueId();\n  const triggerControlId = `${controlId}-trigger`;\n\n  const baseProps = getBaseProps(props);\n  const [expanded, setExpanded] = useControllable(controlledExpanded, onChange, defaultExpanded, {\n    componentName: 'ExpandableSection',\n    controlledProp: 'expanded',\n    changeHandler: 'onChange',\n  });\n\n  const onExpandChange = useCallback(\n    (expanded: boolean) => {\n      setExpanded(expanded);\n      fireNonCancelableEvent(onChange, { expanded });\n    },\n    [onChange, setExpanded]\n  );\n\n  const onClick = useCallback(() => {\n    onExpandChange(!expanded);\n  }, [onExpandChange, expanded]);\n\n  const onKeyUp = useCallback(\n    (event: KeyboardEvent<Element>) => {\n      const interactionKeys = [KeyCode.enter, KeyCode.space];\n\n      if (interactionKeys.indexOf(event.keyCode) !== -1) {\n        onExpandChange(!expanded);\n      }\n    },\n    [onExpandChange, expanded]\n  );\n\n  const onKeyDown = useCallback((event: KeyboardEvent<Element>) => {\n    if (event.keyCode === KeyCode.space) {\n      // Prevent the page from scrolling when toggling the component with the space bar.\n      event.preventDefault();\n    }\n  }, []);\n\n  const triggerProps = {\n    ariaControls: controlId,\n    ariaLabel: headerAriaLabel,\n    ariaLabelledBy: headerAriaLabel ? undefined : triggerControlId,\n    onKeyUp,\n    onKeyDown,\n    onClick,\n  };\n\n  return (\n    <ExpandableSectionContainer\n      {...baseProps}\n      expanded={expanded}\n      className={clsx(baseProps.className, styles.root)}\n      variant={variant}\n      disableContentPaddings={disableContentPaddings}\n      header={\n        <ExpandableSectionHeader\n          id={triggerControlId}\n          className={clsx(styles.header, styles[`header-${variant}`])}\n          variant={variant}\n          expanded={!!expanded}\n          header={header}\n          headerText={headerText}\n          headerDescription={headerDescription}\n          headerCounter={headerCounter}\n          headingTagOverride={headingTagOverride}\n          {...triggerProps}\n        />\n      }\n      __internalRootRef={__internalRootRef}\n    >\n      <CSSTransition in={expanded} timeout={30} classNames={{ enter: styles['content-enter'] }} nodeRef={ref}>\n        <div\n          id={controlId}\n          ref={ref}\n          className={clsx(styles.content, styles[`content-${variant}`], expanded && styles['content-expanded'])}\n          role=\"group\"\n          aria-label={triggerProps.ariaLabel}\n          aria-labelledby={triggerProps.ariaLabelledBy}\n        >\n          {children}\n        </div>\n      </CSSTransition>\n    </ExpandableSectionContainer>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["expandable-section/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, { KeyboardEvent, useCallback, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { KeyCode } from '../internal/keycode';\nimport { fireNonCancelableEvent } from '../internal/events';\n\nimport { ExpandableSectionProps } from './interfaces';\n\nimport styles from './styles.css.js';\nimport { ExpandableSectionContainer } from './expandable-section-container';\nimport { ExpandableSectionHeader } from './expandable-section-header';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\ntype InternalExpandableSectionProps = ExpandableSectionProps & InternalBaseComponentProps;\n\nexport default function InternalExpandableSection({\n  expanded: controlledExpanded,\n  defaultExpanded,\n  onChange,\n  variant = 'default',\n  children,\n  header,\n  headerText,\n  headerCounter,\n  headerDescription,\n  headerInfo,\n  headerActions,\n  headingTagOverride,\n  disableContentPaddings,\n  headerAriaLabel,\n  __internalRootRef,\n  ...props\n}: InternalExpandableSectionProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const controlId = useUniqueId();\n  const triggerControlId = `${controlId}-trigger`;\n\n  const baseProps = getBaseProps(props);\n  const [expanded, setExpanded] = useControllable(controlledExpanded, onChange, defaultExpanded, {\n    componentName: 'ExpandableSection',\n    controlledProp: 'expanded',\n    changeHandler: 'onChange',\n  });\n\n  const onExpandChange = useCallback(\n    (expanded: boolean) => {\n      setExpanded(expanded);\n      fireNonCancelableEvent(onChange, { expanded });\n    },\n    [onChange, setExpanded]\n  );\n\n  const onClick = useCallback(() => {\n    onExpandChange(!expanded);\n  }, [onExpandChange, expanded]);\n\n  const onKeyUp = useCallback(\n    (event: KeyboardEvent<Element>) => {\n      const interactionKeys = [KeyCode.enter, KeyCode.space];\n\n      if (interactionKeys.indexOf(event.keyCode) !== -1) {\n        onExpandChange(!expanded);\n      }\n    },\n    [onExpandChange, expanded]\n  );\n\n  const onKeyDown = useCallback((event: KeyboardEvent<Element>) => {\n    if (event.keyCode === KeyCode.space) {\n      // Prevent the page from scrolling when toggling the component with the space bar.\n      event.preventDefault();\n    }\n  }, []);\n\n  const triggerProps = {\n    ariaControls: controlId,\n    ariaLabel: headerAriaLabel,\n    ariaLabelledBy: headerAriaLabel ? undefined : triggerControlId,\n    onKeyUp,\n    onKeyDown,\n    onClick,\n  };\n\n  return (\n    <ExpandableSectionContainer\n      {...baseProps}\n      expanded={expanded}\n      className={clsx(baseProps.className, styles.root)}\n      variant={variant}\n      disableContentPaddings={disableContentPaddings}\n      header={\n        <ExpandableSectionHeader\n          id={triggerControlId}\n          className={clsx(styles.header, styles[`header-${variant}`])}\n          variant={variant}\n          expanded={!!expanded}\n          header={header}\n          headerText={headerText}\n          headerDescription={headerDescription}\n          headerCounter={headerCounter}\n          headerInfo={headerInfo}\n          headerActions={headerActions}\n          headingTagOverride={headingTagOverride}\n          {...triggerProps}\n        />\n      }\n      __internalRootRef={__internalRootRef}\n    >\n      <CSSTransition in={expanded} timeout={30} classNames={{ enter: styles['content-enter'] }} nodeRef={ref}>\n        <div\n          id={controlId}\n          ref={ref}\n          className={clsx(styles.content, styles[`content-${variant}`], expanded && styles['content-expanded'])}\n          role=\"group\"\n          aria-label={triggerProps.ariaLabel}\n          aria-labelledby={triggerProps.ariaLabelledBy}\n        >\n          {children}\n        </div>\n      </CSSTransition>\n    </ExpandableSectionContainer>\n  );\n}\n"]}

package/expandable-section/styles.css.js

@@ -1,29 +1,31 @@
 
     import './styles.scoped.css';
     export default {
-  "content-enter": "awsui_content-enter_gwq0h_1rozr_97",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_1rozr_1",
-  "trigger-expanded": "awsui_trigger-expanded_gwq0h_1rozr_119",
-  "icon": "awsui_icon_gwq0h_1rozr_133",
-  "root": "awsui_root_gwq0h_1rozr_151",
-  "expanded": "awsui_expanded_gwq0h_1rozr_171",
-  "icon-container": "awsui_icon-container_gwq0h_1rozr_175",
-  "icon-container-container": "awsui_icon-container-container_gwq0h_1rozr_180",
-  "trigger": "awsui_trigger_gwq0h_1rozr_119",
-  "trigger-default": "awsui_trigger-default_gwq0h_1rozr_193",
-  "trigger-footer": "awsui_trigger-footer_gwq0h_1rozr_196",
-  "trigger-navigation": "awsui_trigger-navigation_gwq0h_1rozr_202",
-  "trigger-container": "awsui_trigger-container_gwq0h_1rozr_216",
-  "header": "awsui_header_gwq0h_1rozr_226",
-  "header-wrapper": "awsui_header-wrapper_gwq0h_1rozr_229",
-  "header-button": "awsui_header-button_gwq0h_1rozr_236",
-  "header-container": "awsui_header-container_gwq0h_1rozr_258",
-  "header-container-button": "awsui_header-container-button_gwq0h_1rozr_273",
-  "header-navigation": "awsui_header-navigation_gwq0h_1rozr_277",
-  "content": "awsui_content_gwq0h_1rozr_97",
-  "content-default": "awsui_content-default_gwq0h_1rozr_313",
-  "content-footer": "awsui_content-footer_gwq0h_1rozr_316",
-  "content-expanded": "awsui_content-expanded_gwq0h_1rozr_319",
-  "focusable": "awsui_focusable_gwq0h_1rozr_323"
+  "content-enter": "awsui_content-enter_gwq0h_1g95t_97",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_1g95t_1",
+  "trigger-expanded": "awsui_trigger-expanded_gwq0h_1g95t_119",
+  "icon": "awsui_icon_gwq0h_1g95t_133",
+  "root": "awsui_root_gwq0h_1g95t_151",
+  "expanded": "awsui_expanded_gwq0h_1g95t_171",
+  "icon-container": "awsui_icon-container_gwq0h_1g95t_175",
+  "icon-container-container": "awsui_icon-container-container_gwq0h_1g95t_180",
+  "wrapper": "awsui_wrapper_gwq0h_1g95t_184",
+  "wrapper-default": "awsui_wrapper-default_gwq0h_1g95t_192",
+  "wrapper-footer": "awsui_wrapper-footer_gwq0h_1g95t_195",
+  "wrapper-navigation": "awsui_wrapper-navigation_gwq0h_1g95t_201",
+  "wrapper-container": "awsui_wrapper-container_gwq0h_1g95t_215",
+  "wrapper-expanded": "awsui_wrapper-expanded_gwq0h_1g95t_221",
+  "header": "awsui_header_gwq0h_1g95t_225",
+  "header-wrapper": "awsui_header-wrapper_gwq0h_1g95t_228",
+  "header-button": "awsui_header-button_gwq0h_1g95t_235",
+  "header-container-button": "awsui_header-container-button_gwq0h_1g95t_239",
+  "with-interactive-elements": "awsui_with-interactive-elements_gwq0h_1g95t_257",
+  "header-container": "awsui_header-container_gwq0h_1g95t_239",
+  "header-navigation": "awsui_header-navigation_gwq0h_1g95t_269",
+  "content": "awsui_content_gwq0h_1g95t_97",
+  "content-default": "awsui_content-default_gwq0h_1g95t_305",
+  "content-footer": "awsui_content-footer_gwq0h_1g95t_308",
+  "content-expanded": "awsui_content-expanded_gwq0h_1g95t_311",
+  "focusable": "awsui_focusable_gwq0h_1g95t_315"
 };
   

package/expandable-section/styles.scoped.css

@@ -94,10 +94,10 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_content-enter_gwq0h_1rozr_97:not(#\9) {
-  animation: awsui_awsui-motion-fade-in_gwq0h_1rozr_1 var(--motion-duration-show-paced-uryptc, 180ms) var(--motion-easing-show-paced-tbgeqx, ease-out);
+.awsui_content-enter_gwq0h_1g95t_97:not(#\9) {
+  animation: awsui_awsui-motion-fade-in_gwq0h_1g95t_1 var(--motion-duration-show-paced-uryptc, 180ms) var(--motion-easing-show-paced-tbgeqx, ease-out);
 }
-@keyframes awsui_awsui-motion-fade-in_gwq0h_1rozr_1 {
+@keyframes awsui_awsui-motion-fade-in_gwq0h_1g95t_1 {
   from {
     opacity: 0.2;
   }
@@ -106,40 +106,40 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_content-enter_gwq0h_1rozr_97:not(#\9) {
+  .awsui_content-enter_gwq0h_1g95t_97:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_content-enter_gwq0h_1rozr_97:not(#\9), .awsui-mode-entering .awsui_content-enter_gwq0h_1rozr_97:not(#\9) {
+.awsui-motion-disabled .awsui_content-enter_gwq0h_1g95t_97:not(#\9), .awsui-mode-entering .awsui_content-enter_gwq0h_1g95t_97:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_trigger-expanded_gwq0h_1rozr_119:not(#\9) {
+.awsui_trigger-expanded_gwq0h_1g95t_119:not(#\9) {
   transition: border-bottom-color var(--motion-duration-show-paced-uryptc, 180ms) var(--motion-easing-show-paced-tbgeqx, ease-out);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_trigger-expanded_gwq0h_1rozr_119:not(#\9) {
+  .awsui_trigger-expanded_gwq0h_1g95t_119:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_trigger-expanded_gwq0h_1rozr_119:not(#\9), .awsui-mode-entering .awsui_trigger-expanded_gwq0h_1rozr_119:not(#\9) {
+.awsui-motion-disabled .awsui_trigger-expanded_gwq0h_1g95t_119:not(#\9), .awsui-mode-entering .awsui_trigger-expanded_gwq0h_1g95t_119:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_icon_gwq0h_1rozr_133:not(#\9) {
+.awsui_icon_gwq0h_1g95t_133:not(#\9) {
   transition: transform var(--motion-duration-rotate-90-jfxxiy, 135ms) var(--motion-easing-rotate-90-ax5lt7, cubic-bezier(0.165, 0.84, 0.44, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_icon_gwq0h_1rozr_133:not(#\9) {
+  .awsui_icon_gwq0h_1g95t_133:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_icon_gwq0h_1rozr_133:not(#\9), .awsui-mode-entering .awsui_icon_gwq0h_1rozr_133:not(#\9) {
+.awsui-motion-disabled .awsui_icon_gwq0h_1g95t_133:not(#\9), .awsui-mode-entering .awsui_icon_gwq0h_1g95t_133:not(#\9) {
   animation: none;
   transition: none;
 }
@@ -148,7 +148,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_gwq0h_1rozr_151:not(#\9) {
+.awsui_root_gwq0h_1g95t_151:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -191,24 +191,23 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   display: block;
 }
 
-.awsui_icon_gwq0h_1rozr_133:not(#\9) {
+.awsui_icon_gwq0h_1g95t_133:not(#\9) {
   transform: rotate(-90deg);
 }
-.awsui_icon_gwq0h_1rozr_133.awsui_expanded_gwq0h_1rozr_171:not(#\9) {
+.awsui_icon_gwq0h_1g95t_133.awsui_expanded_gwq0h_1g95t_171:not(#\9) {
   transform: rotate(0deg);
 }
 
-.awsui_icon-container_gwq0h_1rozr_175:not(#\9) {
+.awsui_icon-container_gwq0h_1g95t_175:not(#\9) {
   position: relative;
   margin-left: calc((var(--font-body-m-line-height-rfgrp9, 22px) - var(--size-icon-normal-jq6jat, 16px)) / -2);
   margin-right: calc(var(--space-xxs-ja5cp8, 4px) + var(--border-divider-list-width-um3zli, 1px));
 }
-.awsui_icon-container-container_gwq0h_1rozr_180:not(#\9) {
+.awsui_icon-container-container_gwq0h_1g95t_180:not(#\9) {
   margin-right: var(--space-xs-edba2s, 8px);
 }
 
-.awsui_trigger_gwq0h_1rozr_119:not(#\9) {
-  cursor: pointer;
+.awsui_wrapper_gwq0h_1g95t_184:not(#\9) {
   box-sizing: border-box;
   display: flex;
   border: none;
@@ -216,19 +215,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   line-height: var(--font-body-m-line-height-rfgrp9, 22px);
   text-align: left;
 }
-.awsui_trigger-default_gwq0h_1rozr_193:not(#\9) {
+.awsui_wrapper-default_gwq0h_1g95t_192:not(#\9) {
   padding: var(--space-scaled-xxs-t2t62i, 4px) var(--space-xxs-ja5cp8, 4px);
 }
-.awsui_trigger-footer_gwq0h_1rozr_196:not(#\9) {
+.awsui_wrapper-footer_gwq0h_1g95t_195:not(#\9) {
   padding: var(--space-scaled-xxs-t2t62i, 4px) 0;
 }
-.awsui_trigger-default_gwq0h_1rozr_193:not(#\9), .awsui_trigger-footer_gwq0h_1rozr_196:not(#\9) {
+.awsui_wrapper-default_gwq0h_1g95t_192:not(#\9), .awsui_wrapper-footer_gwq0h_1g95t_195:not(#\9) {
   border: var(--border-divider-section-width-orq175, 2px) solid transparent;
 }
-.awsui_trigger-navigation_gwq0h_1rozr_202:not(#\9) {
+.awsui_wrapper-navigation_gwq0h_1g95t_201:not(#\9) {
   border-left: var(--border-divider-section-width-orq175, 2px) solid transparent;
 }
-.awsui_trigger-default_gwq0h_1rozr_193:not(#\9), .awsui_trigger-navigation_gwq0h_1rozr_202:not(#\9), .awsui_trigger-footer_gwq0h_1rozr_196:not(#\9) {
+.awsui_wrapper-default_gwq0h_1g95t_192:not(#\9), .awsui_wrapper-navigation_gwq0h_1g95t_201:not(#\9), .awsui_wrapper-footer_gwq0h_1g95t_195:not(#\9) {
   color: var(--color-text-expandable-section-default-fvf8va, #000716);
   font-weight: var(--font-heading-s-weight-5y5giq, 800);
   -webkit-font-smoothing: var(--font-smoothing-webkit-fyh4as, antialiased);
@@ -236,41 +235,41 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   font-size: var(--font-expandable-heading-size-mkp9vq, 16px);
   letter-spacing: var(--font-heading-s-letter-spacing-j4vcrt, -0.005em);
 }
-.awsui_trigger-default_gwq0h_1rozr_193:not(#\9):hover, .awsui_trigger-navigation_gwq0h_1rozr_202:not(#\9):hover, .awsui_trigger-footer_gwq0h_1rozr_196:not(#\9):hover {
+.awsui_wrapper-default_gwq0h_1g95t_192:not(#\9):hover, .awsui_wrapper-navigation_gwq0h_1g95t_201:not(#\9):hover, .awsui_wrapper-footer_gwq0h_1g95t_195:not(#\9):hover {
   color: var(--color-text-expandable-section-hover-o9ggrx, #0972d3);
 }
-.awsui_trigger-container_gwq0h_1rozr_216:not(#\9) {
+.awsui_wrapper-container_gwq0h_1g95t_215:not(#\9) {
   padding: var(--space-container-header-vertical-di96ce, 12px) var(--space-container-horizontal-jxdgil, 20px);
 }
-body[data-awsui-focus-visible=true] .awsui_trigger-container_gwq0h_1rozr_216:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_wrapper-container_gwq0h_1g95t_215:not(#\9):focus {
   padding: calc(var(--space-scaled-s-913kwi, 12px) - var(--border-divider-section-width-orq175, 2px)) calc(var(--space-l-f4l5gr, 20px) - var(--border-divider-section-width-orq175, 2px));
 }
-.awsui_trigger-default_gwq0h_1rozr_193.awsui_trigger-expanded_gwq0h_1rozr_119:not(#\9) {
+.awsui_wrapper-default_gwq0h_1g95t_192.awsui_wrapper-expanded_gwq0h_1g95t_221:not(#\9) {
   border-bottom-color: var(--color-border-divider-default-9o8zql, #e9ebed);
 }
 
-.awsui_header_gwq0h_1rozr_226:not(#\9) {
+.awsui_header_gwq0h_1g95t_225:not(#\9) {
   display: flex;
 }
-.awsui_header-wrapper_gwq0h_1rozr_229:not(#\9) {
+.awsui_header-wrapper_gwq0h_1g95t_228:not(#\9) {
   font-weight: inherit;
   font-size: inherit;
   letter-spacing: inherit;
   margin: 0;
   padding: 0;
 }
-.awsui_header-button_gwq0h_1rozr_236:not(#\9) {
+.awsui_header-button_gwq0h_1g95t_235:not(#\9) {
   box-sizing: border-box;
   display: flex;
 }
-body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1rozr_236:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1g95t_235:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_1g95t_239:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1rozr_236:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1g95t_235:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_1g95t_239:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(0px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1rozr_236:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1g95t_235:not(#\9):focus::before, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_1g95t_239:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -281,26 +280,19 @@ body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1rozr_236:not(#\9
   border-radius: var(--border-radius-control-default-focus-ring-muizvi, 4px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-4t19h5, #0972d3);
 }
-.awsui_header-container_gwq0h_1rozr_258:not(#\9) {
+.awsui_header_gwq0h_1g95t_225:not(#\9):not(.awsui_with-interactive-elements_gwq0h_1g95t_257) {
+  cursor: pointer;
+}
+.awsui_header-container_gwq0h_1g95t_239:not(#\9) {
   width: 100%;
 }
-.awsui_header-container_gwq0h_1rozr_258 > .awsui_icon-container_gwq0h_1rozr_175:not(#\9) {
+.awsui_header-container_gwq0h_1g95t_239 > .awsui_icon-container_gwq0h_1g95t_175:not(#\9) {
   margin-top: var(--space-expandable-section-icon-offset-top-qfofw6, 4px);
 }
-body[data-awsui-focus-visible=true] .awsui_header-container_gwq0h_1rozr_258:not(#\9):focus-within {
-  outline: none;
-  text-decoration: none;
-  padding: calc(var(--space-scaled-s-913kwi, 12px) - var(--border-divider-section-width-orq175, 2px)) calc(var(--space-l-f4l5gr, 20px) - var(--border-divider-section-width-orq175, 2px));
-  outline: 2px dotted transparent;
-  border: var(--border-field-width-riro62, 2px) solid var(--color-border-item-focused-4t19h5, #0972d3);
-  border-radius: var(--border-radius-control-default-focus-ring-muizvi, 4px);
-  box-shadow: 0 0 0 var(--border-control-focus-ring-shadow-spread-cwek11, 0px) var(--color-border-item-focused-4t19h5, #0972d3);
-}
-body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_1rozr_273:not(#\9):focus {
-  outline: none;
-  text-decoration: none;
+.awsui_header-container_gwq0h_1g95t_239.awsui_with-interactive-elements_gwq0h_1g95t_257 .awsui_header-container-button_gwq0h_1g95t_239:not(#\9) {
+  cursor: pointer;
 }
-.awsui_header-navigation_gwq0h_1rozr_277 > .awsui_icon-container_gwq0h_1rozr_175:not(#\9) {
+.awsui_header-navigation_gwq0h_1g95t_269 > .awsui_icon-container_gwq0h_1g95t_175:not(#\9) {
   display: inline-flex;
   cursor: pointer;
   color: var(--color-text-expandable-section-navigation-icon-default-lzmj1u, #414d5c);
@@ -311,17 +303,17 @@ body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_1rozr_2
   text-decoration: none;
   flex-direction: column;
 }
-.awsui_header-navigation_gwq0h_1rozr_277 > .awsui_icon-container_gwq0h_1rozr_175:not(#\9):hover {
+.awsui_header-navigation_gwq0h_1g95t_269 > .awsui_icon-container_gwq0h_1g95t_175:not(#\9):hover {
   color: var(--color-text-expandable-section-hover-o9ggrx, #0972d3);
 }
-body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_1rozr_277 > .awsui_icon-container_gwq0h_1rozr_175:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_1g95t_269 > .awsui_icon-container_gwq0h_1g95t_175:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_1rozr_277 > .awsui_icon-container_gwq0h_1rozr_175:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_1g95t_269 > .awsui_icon-container_gwq0h_1g95t_175:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(2px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_1rozr_277 > .awsui_icon-container_gwq0h_1rozr_175:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_1g95t_269 > .awsui_icon-container_gwq0h_1g95t_175:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -333,24 +325,24 @@ body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_1rozr_277 > .
   box-shadow: 0 0 0 2px var(--color-border-item-focused-4t19h5, #0972d3);
 }
 
-.awsui_content_gwq0h_1rozr_97:not(#\9) {
+.awsui_content_gwq0h_1g95t_97:not(#\9) {
   display: none;
 }
-.awsui_content-default_gwq0h_1rozr_313:not(#\9) {
+.awsui_content-default_gwq0h_1g95t_305:not(#\9) {
   padding: var(--space-scaled-xs-wbfgrv, 8px) 0;
 }
-.awsui_content-footer_gwq0h_1rozr_316:not(#\9) {
+.awsui_content-footer_gwq0h_1g95t_308:not(#\9) {
   padding: var(--space-xs-edba2s, 8px) 0;
 }
-.awsui_content-expanded_gwq0h_1rozr_319:not(#\9) {
+.awsui_content-expanded_gwq0h_1g95t_311:not(#\9) {
   display: block;
 }
 
-.awsui_focusable_gwq0h_1rozr_323:not(#\9):focus {
+.awsui_focusable_gwq0h_1g95t_315:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-body[data-awsui-focus-visible=true] .awsui_focusable_gwq0h_1rozr_323:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_focusable_gwq0h_1g95t_315:not(#\9):focus {
   outline: 2px dotted transparent;
   border: var(--border-field-width-riro62, 2px) solid var(--color-border-item-focused-4t19h5, #0972d3);
   border-radius: var(--border-radius-control-default-focus-ring-muizvi, 4px);

package/expandable-section/styles.selectors.js

@@ -2,29 +2,31 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "content-enter": "awsui_content-enter_gwq0h_1rozr_97",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_1rozr_1",
-  "trigger-expanded": "awsui_trigger-expanded_gwq0h_1rozr_119",
-  "icon": "awsui_icon_gwq0h_1rozr_133",
-  "root": "awsui_root_gwq0h_1rozr_151",
-  "expanded": "awsui_expanded_gwq0h_1rozr_171",
-  "icon-container": "awsui_icon-container_gwq0h_1rozr_175",
-  "icon-container-container": "awsui_icon-container-container_gwq0h_1rozr_180",
-  "trigger": "awsui_trigger_gwq0h_1rozr_119",
-  "trigger-default": "awsui_trigger-default_gwq0h_1rozr_193",
-  "trigger-footer": "awsui_trigger-footer_gwq0h_1rozr_196",
-  "trigger-navigation": "awsui_trigger-navigation_gwq0h_1rozr_202",
-  "trigger-container": "awsui_trigger-container_gwq0h_1rozr_216",
-  "header": "awsui_header_gwq0h_1rozr_226",
-  "header-wrapper": "awsui_header-wrapper_gwq0h_1rozr_229",
-  "header-button": "awsui_header-button_gwq0h_1rozr_236",
-  "header-container": "awsui_header-container_gwq0h_1rozr_258",
-  "header-container-button": "awsui_header-container-button_gwq0h_1rozr_273",
-  "header-navigation": "awsui_header-navigation_gwq0h_1rozr_277",
-  "content": "awsui_content_gwq0h_1rozr_97",
-  "content-default": "awsui_content-default_gwq0h_1rozr_313",
-  "content-footer": "awsui_content-footer_gwq0h_1rozr_316",
-  "content-expanded": "awsui_content-expanded_gwq0h_1rozr_319",
-  "focusable": "awsui_focusable_gwq0h_1rozr_323"
+  "content-enter": "awsui_content-enter_gwq0h_1g95t_97",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_1g95t_1",
+  "trigger-expanded": "awsui_trigger-expanded_gwq0h_1g95t_119",
+  "icon": "awsui_icon_gwq0h_1g95t_133",
+  "root": "awsui_root_gwq0h_1g95t_151",
+  "expanded": "awsui_expanded_gwq0h_1g95t_171",
+  "icon-container": "awsui_icon-container_gwq0h_1g95t_175",
+  "icon-container-container": "awsui_icon-container-container_gwq0h_1g95t_180",
+  "wrapper": "awsui_wrapper_gwq0h_1g95t_184",
+  "wrapper-default": "awsui_wrapper-default_gwq0h_1g95t_192",
+  "wrapper-footer": "awsui_wrapper-footer_gwq0h_1g95t_195",
+  "wrapper-navigation": "awsui_wrapper-navigation_gwq0h_1g95t_201",
+  "wrapper-container": "awsui_wrapper-container_gwq0h_1g95t_215",
+  "wrapper-expanded": "awsui_wrapper-expanded_gwq0h_1g95t_221",
+  "header": "awsui_header_gwq0h_1g95t_225",
+  "header-wrapper": "awsui_header-wrapper_gwq0h_1g95t_228",
+  "header-button": "awsui_header-button_gwq0h_1g95t_235",
+  "header-container-button": "awsui_header-container-button_gwq0h_1g95t_239",
+  "with-interactive-elements": "awsui_with-interactive-elements_gwq0h_1g95t_257",
+  "header-container": "awsui_header-container_gwq0h_1g95t_239",
+  "header-navigation": "awsui_header-navigation_gwq0h_1g95t_269",
+  "content": "awsui_content_gwq0h_1g95t_97",
+  "content-default": "awsui_content-default_gwq0h_1g95t_305",
+  "content-footer": "awsui_content-footer_gwq0h_1g95t_308",
+  "content-expanded": "awsui_content-expanded_gwq0h_1g95t_311",
+  "focusable": "awsui_focusable_gwq0h_1g95t_315"
 };
   

package/internal/environment.js

@@ -1,6 +1,6 @@
 
     export var PACKAGE_SOURCE = 'components';
-    export var PACKAGE_VERSION = '3.0.0 (8a8d7f0)';
+    export var PACKAGE_VERSION = '3.0.0 (bfa6bc4)';
     export var THEME = 'open-source-visual-refresh';
     export var ALWAYS_VISUAL_REFRESH = true;
     

package/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "8a8d7f04ecd9cbcc0ccfc9daab11a2d5a10ff4ba"
+  "commit": "bfa6bc4f3a10f4d47841c4324d617db0adea028b"
 }

package/package.json

@@ -136,7 +136,7 @@
     "./internal/base-component/index.js",
     "./internal/base-component/styles.css.js"
   ],
-  "version": "3.0.305",
+  "version": "3.0.306",
   "repository": {
     "type": "git",
     "url": "https://github.com/cloudscape-design/components.git"