npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.315 → 3.0.317 - Mend

@cloudscape-design/components-themeable 3.0.315 → 3.0.317

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

Files changed (75) hide show

package/lib/internal/manifest.json CHANGED Viewed

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

package/lib/internal/scss/column-layout/flexible-column-layout/styles.scss ADDED Viewed

@@ -0,0 +1,27 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+@use '../../internal/styles/tokens' as awsui;
+.css-grid {
+  display: grid;
+  gap: awsui.$space-grid-gutter;
+  &.grid-no-gutters {
+    gap: 0;
+  }
+  &.grid-variant-text-grid {
+    > .item {
+      border-left: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+      padding-left: awsui.$space-grid-gutter;
+      padding-right: awsui.$space-grid-gutter;
+      &.first-column {
+        border-left: 0;
+        padding-left: 0;
+      }
+    }
+  }
+}

package/lib/internal/scss/expandable-section/styles.scss CHANGED Viewed

@@ -34,8 +34,7 @@
   }
 }
-.trigger {
-  cursor: pointer;
+.wrapper {
   box-sizing: border-box;
   display: flex;
   border: none;
@@ -83,7 +82,7 @@
     }
   }
-  &-default.trigger-expanded {
+  &-default.wrapper-expanded {
     border-bottom-color: awsui.$color-border-divider-default;
   }
 }
@@ -102,13 +101,19 @@
   &-button {
     box-sizing: border-box;
     display: flex;
+  }
-    // Header buttons for non-container variants show the focus ring directly
+  &-button,
+  &-container-button {
     @include focus-visible.when-visible {
       @include styles.focus-highlight(0px);
     }
   }
+  &:not(.with-interactive-elements) {
+    cursor: pointer;
+  }
   &-container {
     width: 100%;
     // The icon-container style is kept for variant='container' and header
@@ -117,20 +122,8 @@
     }
     // stylelint-disable-next-line selector-combinator-disallowed-list
-    body[data-awsui-focus-visible='true'] &:focus-within {
-      outline: none;
-      text-decoration: none;
-      padding: container.$header-focus-visible-padding;
-      @include styles.form-focus-element(awsui.$border-radius-control-default-focus-ring);
-    }
-    // Header buttons that sit in a container should not show focus because the parent container has a focus ring already
-    &-button {
-      @include focus-visible.when-visible {
-        outline: none;
-        text-decoration: none;
-      }
+    &.with-interactive-elements &-button {
+      cursor: pointer;
     }
   }

package/lib/internal/scss/split-panel/styles.scss CHANGED Viewed

@@ -221,6 +221,8 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
 .content-bottom {
   padding: 0 awsui.$space-scaled-2x-xxxl;
   margin-top: awsui.$space-panel-split-top;
+  position: relative;
+  z-index: 0; // the content inside .content-bottom should not be above pane-header-wrapper-bottom
   .drawer-mobile > .drawer-content-bottom > & {
     padding: 0 awsui.$space-l;
   }

package/lib/internal/template/alert/internal.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["alert/internal.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;~~AAUjD~~,KAAK,kBAAkB,GAAG,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,GAAG,0BAA0B,CAAC;AAExF,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,IAAI,EACJ,mBAAmB,EACnB,OAAc,EACd,WAAW,EACX,gBAAgB,EAChB,QAAQ,EACR,MAAM,EACN,UAAU,EACV,MAAM,EACN,SAAS,EACT,aAAa,EACb,iBAAwB,EACxB,GAAG,IAAI,EACR,EAAE,kBAAkB,~~eA+DpB~~"}
1	+ {"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["alert/internal.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAWjD,KAAK,kBAAkB,GAAG,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,GAAG,0BAA0B,CAAC;AAExF,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,IAAI,EACJ,mBAAmB,EACnB,OAAc,EACd,WAAW,EACX,gBAAgB,EAChB,QAAQ,EACR,MAAM,EACN,UAAU,EACV,MAAM,EACN,SAAS,EACT,aAAa,EACb,iBAAwB,EACxB,GAAG,IAAI,EACR,EAAE,kBAAkB,eAkEpB"}

package/lib/internal/template/alert/internal.js CHANGED Viewed

@@ -13,6 +13,7 @@ import { useContainerBreakpoints } from '../internal/hooks/container-queries';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { useInternalI18n } from '../internal/i18n/context';
+import { DATA_ATTR_ANALYTICS_ALERT } from '../internal/analytics/selectors';
 const typeToIcon = {
     error: 'status-negative',
     warning: 'status-warning',
@@ -29,7 +30,10 @@ export default function InternalAlert(_a) {
     const size = isRefresh ? 'normal' : header && children ? 'big' : 'normal';
     const actionButton = action || (React.createElement(InternalButton, { className: styles['action-button'], onClick: () => fireNonCancelableEvent(onButtonClick), formAction: "none" }, buttonText));
     const hasAction = Boolean(action || buttonText);
-    return (React.createElement("div", Object.assign({}, baseProps, { "data-analytics-alert": type, "aria-hidden": !visible, className: clsx(styles.root, { [styles.hidden]: !visible }, baseProps.className, styles[`breakpoint-${breakpoint}`]), ref: mergedRef }),
+    const analyticsAttributes = {
+        [DATA_ATTR_ANALYTICS_ALERT]: type,
+    };
+    return (React.createElement("div", Object.assign({}, baseProps, analyticsAttributes, { "aria-hidden": !visible, className: clsx(styles.root, { [styles.hidden]: !visible }, baseProps.className, styles[`breakpoint-${breakpoint}`]), ref: mergedRef }),
         React.createElement(VisualContext, { contextName: "alert" },
             React.createElement("div", { className: clsx(styles.alert, styles[`type-${type}`]) },
                 React.createElement("div", { className: clsx(styles.icon, styles.text), role: "img", "aria-label": statusIconAriaLabel },

package/lib/internal/template/alert/internal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["alert/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,aAAa,MAAM,uCAAuC,CAAC;AAClE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAGrE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAEhE,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;~~AAE3D~~,MAAM,UAAU,GAA+C;IAC7D,KAAK,EAAE,iBAAiB;IACxB,OAAO,EAAE,gBAAgB;IACzB,OAAO,EAAE,iBAAiB;IAC1B,IAAI,EAAE,aAAa;CACpB,CAAC;AAIF,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAcjB;QAdiB,EACpC,IAAI,EACJ,mBAAmB,EACnB,OAAO,GAAG,IAAI,EACd,WAAW,EACX,gBAAgB,EAChB,QAAQ,EACR,MAAM,EACN,UAAU,EACV,MAAM,EACN,SAAS,EACT,aAAa,EACb,iBAAiB,GAAG,IAAI,OAEL,EADhB,IAAI,cAb6B,8KAcrC,CADQ;IAEP,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,IAAI,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC;IAEtC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,uBAAuB,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;IACpE,MAAM,SAAS,GAAG,YAAY,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC;IAEjE,MAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IACrC,MAAM,IAAI,GAAG,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;IAE1E,MAAM,YAAY,GAAG,MAAM,IAAI,CAC7B,oBAAC,cAAc,IACb,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,EAClC,OAAO,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,aAAa,CAAC,EACpD,UAAU,EAAC,MAAM,IAEhB,UAAU,CACI,CAClB,CAAC;IAEF,MAAM,SAAS,GAAG,OAAO,CAAC,MAAM,IAAI,UAAU,CAAC,CAAC;~~IAEhD~~,OAAO,CACL,6CACM,SAAS,~~4BACS~~,~~IAAI~~,~~iBACb~~,CAAC,OAAO,EACrB,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,IAAI,EACX,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,EAC7B,SAAS,CAAC,SAAS,EACnB,MAAM,CAAC,cAAc,UAAU,EAAE,CAAC,CACnC,EACD,GAAG,EAAE,SAAS;QAEd,oBAAC,aAAa,IAAC,WAAW,EAAC,OAAO;YAChC,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC;gBACxD,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAC,KAAK,gBAAa,mBAAmB;oBACxF,oBAAC,YAAY,IAAC,IAAI,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,GAAI,CAChD;gBACN,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI;oBACzB,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC;wBAC9C,MAAM,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,MAAM,CAAO;wBACxD,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,QAAQ,CAAO,CAC5C;oBACL,SAAS,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,YAAY,CAAO,CAC7D;gBACL,WAAW,IAAI,CACd,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO;oBAC5B,oBAAC,cAAc,IACb,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,EACnC,OAAO,EAAC,MAAM,EACd,QAAQ,EAAC,OAAO,EAChB,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,EACrD,OAAO,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,SAAS,CAAC,GAChD,CACE,CACP,CACG,CACQ,CACZ,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 { InternalButton } from '../button/internal';\nimport { IconProps } from '../icon/interfaces';\nimport InternalIcon from '../icon/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport VisualContext from '../internal/components/visual-context';\nimport styles from './styles.css.js';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { AlertProps } from './interfaces';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { SomeRequired } from '../internal/types';\nimport { useInternalI18n } from '../internal/i18n/context';\n\nconst typeToIcon: Record<AlertProps.Type, IconProps['name']> = {\n error: 'status-negative',\n warning: 'status-warning',\n success: 'status-positive',\n info: 'status-info',\n};\n\ntype InternalAlertProps = SomeRequired<AlertProps, 'type'> & InternalBaseComponentProps;\n\nexport default function InternalAlert({\n type,\n statusIconAriaLabel,\n visible = true,\n dismissible,\n dismissAriaLabel,\n children,\n header,\n buttonText,\n action,\n onDismiss,\n onButtonClick,\n __internalRootRef = null,\n ...rest\n}: InternalAlertProps) {\n const baseProps = getBaseProps(rest);\n const i18n = useInternalI18n('alert');\n\n const [breakpoint, breakpointRef] = useContainerBreakpoints(['xs']);\n const mergedRef = useMergeRefs(breakpointRef, __internalRootRef);\n\n const isRefresh = useVisualRefresh();\n const size = isRefresh ? 'normal' : header && children ? 'big' : 'normal';\n\n const actionButton = action \|\| (\n <InternalButton\n className={styles['action-button']}\n onClick={() => fireNonCancelableEvent(onButtonClick)}\n formAction=\"none\"\n >\n {buttonText}\n </InternalButton>\n );\n\n const hasAction = Boolean(action \|\| buttonText);\n\n return (\n <div\n {...baseProps}\n ~~data-analytics-alert=~~{~~type~~}\n aria-hidden={!visible}\n className={clsx(\n styles.root,\n { [styles.hidden]: !visible },\n baseProps.className,\n styles[`breakpoint-${breakpoint}`]\n )}\n ref={mergedRef}\n >\n <VisualContext contextName=\"alert\">\n <div className={clsx(styles.alert, styles[`type-${type}`])}>\n <div className={clsx(styles.icon, styles.text)} role=\"img\" aria-label={statusIconAriaLabel}>\n <InternalIcon name={typeToIcon[type]} size={size} />\n </div>\n <div className={styles.body}>\n <div className={clsx(styles.message, styles.text)}>\n {header && <div className={styles.header}>{header}</div>}\n <div className={styles.content}>{children}</div>\n </div>\n {hasAction && <div className={styles.action}>{actionButton}</div>}\n </div>\n {dismissible && (\n <div className={styles.dismiss}>\n <InternalButton\n className={styles['dismiss-button']}\n variant=\"icon\"\n iconName=\"close\"\n formAction=\"none\"\n ariaLabel={i18n('dismissAriaLabel', dismissAriaLabel)}\n onClick={() => fireNonCancelableEvent(onDismiss)}\n />\n </div>\n )}\n </div>\n </VisualContext>\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["alert/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 from 'react';\nimport clsx from 'clsx';\nimport { InternalButton } from '../button/internal';\nimport { IconProps } from '../icon/interfaces';\nimport InternalIcon from '../icon/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport VisualContext from '../internal/components/visual-context';\nimport styles from './styles.css.js';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { AlertProps } from './interfaces';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { SomeRequired } from '../internal/types';\nimport { useInternalI18n } from '../internal/i18n/context';\nimport { DATA_ATTR_ANALYTICS_ALERT } from '../internal/analytics/selectors';\n\nconst typeToIcon: Record<AlertProps.Type, IconProps['name']> = {\n error: 'status-negative',\n warning: 'status-warning',\n success: 'status-positive',\n info: 'status-info',\n};\n\ntype InternalAlertProps = SomeRequired<AlertProps, 'type'> & InternalBaseComponentProps;\n\nexport default function InternalAlert({\n type,\n statusIconAriaLabel,\n visible = true,\n dismissible,\n dismissAriaLabel,\n children,\n header,\n buttonText,\n action,\n onDismiss,\n onButtonClick,\n __internalRootRef = null,\n ...rest\n}: InternalAlertProps) {\n const baseProps = getBaseProps(rest);\n const i18n = useInternalI18n('alert');\n\n const [breakpoint, breakpointRef] = useContainerBreakpoints(['xs']);\n const mergedRef = useMergeRefs(breakpointRef, __internalRootRef);\n\n const isRefresh = useVisualRefresh();\n const size = isRefresh ? 'normal' : header && children ? 'big' : 'normal';\n\n const actionButton = action \|\| (\n <InternalButton\n className={styles['action-button']}\n onClick={() => fireNonCancelableEvent(onButtonClick)}\n formAction=\"none\"\n >\n {buttonText}\n </InternalButton>\n );\n\n const hasAction = Boolean(action \|\| buttonText);\n const analyticsAttributes = {\n [DATA_ATTR_ANALYTICS_ALERT]: type,\n };\n\n return (\n <div\n {...baseProps}\n {...analyticsAttributes}\n aria-hidden={!visible}\n className={clsx(\n styles.root,\n { [styles.hidden]: !visible },\n baseProps.className,\n styles[`breakpoint-${breakpoint}`]\n )}\n ref={mergedRef}\n >\n <VisualContext contextName=\"alert\">\n <div className={clsx(styles.alert, styles[`type-${type}`])}>\n <div className={clsx(styles.icon, styles.text)} role=\"img\" aria-label={statusIconAriaLabel}>\n <InternalIcon name={typeToIcon[type]} size={size} />\n </div>\n <div className={styles.body}>\n <div className={clsx(styles.message, styles.text)}>\n {header && <div className={styles.header}>{header}</div>}\n <div className={styles.content}>{children}</div>\n </div>\n {hasAction && <div className={styles.action}>{actionButton}</div>}\n </div>\n {dismissible && (\n <div className={styles.dismiss}>\n <InternalButton\n className={styles['dismiss-button']}\n variant=\"icon\"\n iconName=\"close\"\n formAction=\"none\"\n ariaLabel={i18n('dismissAriaLabel', dismissAriaLabel)}\n onClick={() => fireNonCancelableEvent(onDismiss)}\n />\n </div>\n )}\n </div>\n </VisualContext>\n </div>\n );\n}\n"]}

package/lib/internal/template/breadcrumb-group/item/item.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"item.d.ts","sourceRoot":"lib/default/","sources":["breadcrumb-group/item/item.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;~~AAyH1E~~,wBAAgB,cAAc,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,EAAE,EAClE,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,WAAW,EACX,MAAc,EACd,YAAoB,GACrB,EAAE,mBAAmB,CAAC,CAAC,CAAC,eA2CxB"}
1	+ {"version":3,"file":"item.d.ts","sourceRoot":"lib/default/","sources":["breadcrumb-group/item/item.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AA8H1E,wBAAgB,cAAc,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,EAAE,EAClE,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,WAAW,EACX,MAAc,EACd,YAAoB,GACrB,EAAE,mBAAmB,CAAC,CAAC,CAAC,eA2CxB"}

package/lib/internal/template/breadcrumb-group/item/item.js CHANGED Viewed

@@ -12,6 +12,8 @@ import PopoverContainer from '../../popover/container';
 import PopoverBody from '../../popover/body';
 import Portal from '../../internal/components/portal';
 import popoverStyles from '../../popover/styles.css.js';
+import { DATA_ATTR_FUNNEL_KEY } from '../../internal/analytics/selectors';
+import { FUNNEL_KEY_FUNNEL_NAME } from '../../internal/analytics/selectors';
 const BreadcrumbItemWithPopover = (_a) => {
     var { item, isLast, anchorAttributes } = _a, itemAttributes = __rest(_a, ["item", "isLast", "anchorAttributes"]);
     const [showPopover, setShowPopover] = useState(false);
@@ -58,8 +60,8 @@ const BreadcrumbItemWithPopover = (_a) => {
         showPopover && popoverContent));
 };
 const Item = (_a) => {
-    var { anchorAttributes, children, isLast } = _a, itemAttributes = __rest(_a, ["anchorAttributes", "children", "isLast"]);
-    return isLast ? (React.createElement("span", Object.assign({}, itemAttributes), children)) : (React.createElement("a", Object.assign({}, itemAttributes, anchorAttributes), children));
+    var { anchorAttributes, dataAttributes, children, isLast } = _a, itemAttributes = __rest(_a, ["anchorAttributes", "dataAttributes", "children", "isLast"]);
+    return isLast ? (React.createElement("span", Object.assign({}, itemAttributes, dataAttributes), children)) : (React.createElement("a", Object.assign({}, itemAttributes, anchorAttributes, dataAttributes), children));
 };
 export function BreadcrumbItem({ item, onClick, onFollow, isDisplayed, isLast = false, isCompressed = false, }) {
     const preventDefault = (event) => event.preventDefault();
@@ -78,10 +80,10 @@ export function BreadcrumbItem({ item, onClick, onFollow, isDisplayed, isLast =
     };
     const dataAttibutes = {};
     if (isLast) {
-        dataAttibutes['data-analytics-context'] = 'breadcrumb';
+        dataAttibutes[DATA_ATTR_FUNNEL_KEY] = FUNNEL_KEY_FUNNEL_NAME;
     }
-    return (React.createElement("div", Object.assign({ className: clsx(styles.breadcrumb, isLast && styles.last) }, dataAttibutes),
-        isDisplayed && isCompressed ? (React.createElement(BreadcrumbItemWithPopover, Object.assign({ item: item, isLast: isLast, anchorAttributes: anchorAttributes }, itemAttributes))) : (React.createElement(Item, Object.assign({ isLast: isLast, anchorAttributes: anchorAttributes }, itemAttributes),
+    return (React.createElement("div", { className: clsx(styles.breadcrumb, isLast && styles.last) },
+        isDisplayed && isCompressed ? (React.createElement(BreadcrumbItemWithPopover, Object.assign({ item: item, isLast: isLast, anchorAttributes: anchorAttributes }, itemAttributes))) : (React.createElement(Item, Object.assign({ isLast: isLast, anchorAttributes: anchorAttributes }, itemAttributes, dataAttibutes),
             React.createElement("span", { className: styles.text }, item.text))),
         !isLast ? (React.createElement("span", { className: styles.icon },
             React.createElement(InternalIcon, { name: "angle-right" }))) : null));

package/lib/internal/template/breadcrumb-group/item/item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"item.js","sourceRoot":"lib/default/","sources":["breadcrumb-group/item/item.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport { BreadcrumbGroupProps, BreadcrumbItemProps } from '../interfaces';\nimport InternalIcon from '../../icon/internal';\nimport styles from './styles.css.js';\nimport clsx from 'clsx';\nimport { fireCancelableEvent, isPlainLeftClick } from '../../internal/events';\nimport { getEventDetail } from '../internal';\nimport { Transition } from '../../internal/components/transition';\nimport PopoverContainer from '../../popover/container';\nimport PopoverBody from '../../popover/body';\nimport Portal from '../../internal/components/portal';\nimport popoverStyles from '../../popover/styles.css.js';\n\ntype BreadcrumbItemWithPopoverProps<T extends BreadcrumbGroupProps.Item> = React.HTMLAttributes<HTMLElement> & {\n item: T;\n isLast: boolean;\n anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement>;\n};\n\nconst BreadcrumbItemWithPopover = <T extends BreadcrumbGroupProps.Item>({\n item,\n isLast,\n anchorAttributes,\n ...itemAttributes\n}: BreadcrumbItemWithPopoverProps<T>) => {\n const [showPopover, setShowPopover] = useState(false);\n const textRef = useRef<HTMLElement>(null);\n const virtualTextRef = useRef<HTMLElement>(null);\n\n const isTruncated = (textRef: React.RefObject<HTMLElement>, virtualTextRef: React.RefObject<HTMLElement>) => {\n if (!textRef \|\| !virtualTextRef \|\| !textRef.current \|\| !virtualTextRef.current) {\n return false;\n }\n const virtualTextWidth = virtualTextRef.current.getBoundingClientRect().width;\n const textWidth = textRef.current.getBoundingClientRect().width;\n if (virtualTextWidth > textWidth) {\n return true;\n }\n return false;\n };\n\n const popoverContent = (\n <Portal>\n <div className={styles['item-popover']}>\n <Transition in={true}>\n {() => (\n <PopoverContainer\n trackRef={textRef}\n size=\"small\"\n fixedWidth={false}\n position=\"bottom\"\n arrow={position => (\n <div className={clsx(popoverStyles.arrow, popoverStyles[`arrow-position-${position}`])}>\n <div className={popoverStyles['arrow-outer']} />\n <div className={popoverStyles['arrow-inner']} />\n </div>\n )}\n >\n <PopoverBody dismissButton={false} dismissAriaLabel={undefined} onDismiss={() => {}} header={undefined}>\n {item.text}\n </PopoverBody>\n </PopoverContainer>\n )}\n </Transition>\n </div>\n </Portal>\n );\n\n useEffect(() => {\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n setShowPopover(false);\n }\n };\n if (showPopover) {\n document.addEventListener('keydown', onKeyDown);\n }\n return () => {\n document.removeEventListener('keydown', onKeyDown);\n };\n }, [showPopover]);\n\n return (\n <>\n <Item\n isLast={isLast}\n {...itemAttributes}\n onFocus={() => {\n isTruncated(textRef, virtualTextRef) && setShowPopover(true);\n }}\n onBlur={() => setShowPopover(false)}\n onMouseEnter={() => {\n isTruncated(textRef, virtualTextRef) && setShowPopover(true);\n }}\n onMouseLeave={() => setShowPopover(false)}\n anchorAttributes={anchorAttributes}\n >\n <span className={styles.text} ref={textRef}>\n {item.text}\n </span>\n <span className={styles['virtual-item']} ref={virtualTextRef}>\n {item.text}\n </span>\n </Item>\n {showPopover && popoverContent}\n </>\n );\n};\n\ntype ItemProps = React.HTMLAttributes<HTMLElement> & {\n anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement>;\n isLast: boolean;\n};\nconst Item = ({ anchorAttributes, children, isLast, ...itemAttributes }: ItemProps) =>\n isLast ? (\n <span {...itemAttributes}>{children}</span>\n ) : (\n <a {...itemAttributes} {...anchorAttributes}>\n {children}\n </a>\n );\n\nexport function BreadcrumbItem<T extends BreadcrumbGroupProps.Item>({\n item,\n onClick,\n onFollow,\n isDisplayed,\n isLast = false,\n isCompressed = false,\n}: BreadcrumbItemProps<T>) {\n const preventDefault = (event: React.MouseEvent) => event.preventDefault();\n const onClickHandler = (event: React.MouseEvent) => {\n if (isPlainLeftClick(event)) {\n fireCancelableEvent(onFollow, getEventDetail(item), event);\n }\n fireCancelableEvent(onClick, getEventDetail(item), event);\n };\n\n const itemAttributes: React.HTMLAttributes<HTMLElement> = {\n className: clsx(styles.anchor, { [styles.compressed]: isCompressed }),\n };\n const anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement> = {\n href: item.href \|\| '#',\n onClick: isLast ? preventDefault : onClickHandler,\n };\n\n const dataAttibutes: Record<string, string> = {};\n if (isLast) {\n dataAttibutes['data-analytics-context'] = 'breadcrumb';\n }\n\n return (\n <div className={clsx(styles.breadcrumb, isLast && styles.last)} {...dataAttibutes}>\n {isDisplayed && isCompressed ? (\n <BreadcrumbItemWithPopover\n item={item}\n isLast={isLast}\n anchorAttributes={anchorAttributes}\n {...itemAttributes}\n />\n ) : (\n <Item isLast={isLast} anchorAttributes={anchorAttributes} {...itemAttributes}>\n <span className={styles.text}>{item.text}</span>\n </Item>\n )}\n {!isLast ? (\n <span className={styles.icon}>\n <InternalIcon name=\"angle-right\" />\n </span>\n ) : null}\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"item.js","sourceRoot":"lib/default/","sources":["breadcrumb-group/item/item.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport { BreadcrumbGroupProps, BreadcrumbItemProps } from '../interfaces';\nimport InternalIcon from '../../icon/internal';\nimport styles from './styles.css.js';\nimport clsx from 'clsx';\nimport { fireCancelableEvent, isPlainLeftClick } from '../../internal/events';\nimport { getEventDetail } from '../internal';\nimport { Transition } from '../../internal/components/transition';\nimport PopoverContainer from '../../popover/container';\nimport PopoverBody from '../../popover/body';\nimport Portal from '../../internal/components/portal';\nimport popoverStyles from '../../popover/styles.css.js';\nimport { DATA_ATTR_FUNNEL_KEY } from '../../internal/analytics/selectors';\nimport { FUNNEL_KEY_FUNNEL_NAME } from '../../internal/analytics/selectors';\n\ntype BreadcrumbItemWithPopoverProps<T extends BreadcrumbGroupProps.Item> = React.HTMLAttributes<HTMLElement> & {\n item: T;\n isLast: boolean;\n anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement>;\n};\n\nconst BreadcrumbItemWithPopover = <T extends BreadcrumbGroupProps.Item>({\n item,\n isLast,\n anchorAttributes,\n ...itemAttributes\n}: BreadcrumbItemWithPopoverProps<T>) => {\n const [showPopover, setShowPopover] = useState(false);\n const textRef = useRef<HTMLElement>(null);\n const virtualTextRef = useRef<HTMLElement>(null);\n\n const isTruncated = (textRef: React.RefObject<HTMLElement>, virtualTextRef: React.RefObject<HTMLElement>) => {\n if (!textRef \|\| !virtualTextRef \|\| !textRef.current \|\| !virtualTextRef.current) {\n return false;\n }\n const virtualTextWidth = virtualTextRef.current.getBoundingClientRect().width;\n const textWidth = textRef.current.getBoundingClientRect().width;\n if (virtualTextWidth > textWidth) {\n return true;\n }\n return false;\n };\n\n const popoverContent = (\n <Portal>\n <div className={styles['item-popover']}>\n <Transition in={true}>\n {() => (\n <PopoverContainer\n trackRef={textRef}\n size=\"small\"\n fixedWidth={false}\n position=\"bottom\"\n arrow={position => (\n <div className={clsx(popoverStyles.arrow, popoverStyles[`arrow-position-${position}`])}>\n <div className={popoverStyles['arrow-outer']} />\n <div className={popoverStyles['arrow-inner']} />\n </div>\n )}\n >\n <PopoverBody dismissButton={false} dismissAriaLabel={undefined} onDismiss={() => {}} header={undefined}>\n {item.text}\n </PopoverBody>\n </PopoverContainer>\n )}\n </Transition>\n </div>\n </Portal>\n );\n\n useEffect(() => {\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n setShowPopover(false);\n }\n };\n if (showPopover) {\n document.addEventListener('keydown', onKeyDown);\n }\n return () => {\n document.removeEventListener('keydown', onKeyDown);\n };\n }, [showPopover]);\n\n return (\n <>\n <Item\n isLast={isLast}\n {...itemAttributes}\n onFocus={() => {\n isTruncated(textRef, virtualTextRef) && setShowPopover(true);\n }}\n onBlur={() => setShowPopover(false)}\n onMouseEnter={() => {\n isTruncated(textRef, virtualTextRef) && setShowPopover(true);\n }}\n onMouseLeave={() => setShowPopover(false)}\n anchorAttributes={anchorAttributes}\n >\n <span className={styles.text} ref={textRef}>\n {item.text}\n </span>\n <span className={styles['virtual-item']} ref={virtualTextRef}>\n {item.text}\n </span>\n </Item>\n {showPopover && popoverContent}\n </>\n );\n};\n\ntype ItemProps = React.HTMLAttributes<HTMLElement> & {\n dataAttributes?: React.DataHTMLAttributes<HTMLElement>;\n anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement>;\n isLast: boolean;\n};\nconst Item = ({ anchorAttributes, dataAttributes, children, isLast, ...itemAttributes }: ItemProps) =>\n isLast ? (\n <span {...itemAttributes} {...dataAttributes}>\n {children}\n </span>\n ) : (\n <a {...itemAttributes} {...anchorAttributes} {...dataAttributes}>\n {children}\n </a>\n );\n\nexport function BreadcrumbItem<T extends BreadcrumbGroupProps.Item>({\n item,\n onClick,\n onFollow,\n isDisplayed,\n isLast = false,\n isCompressed = false,\n}: BreadcrumbItemProps<T>) {\n const preventDefault = (event: React.MouseEvent) => event.preventDefault();\n const onClickHandler = (event: React.MouseEvent) => {\n if (isPlainLeftClick(event)) {\n fireCancelableEvent(onFollow, getEventDetail(item), event);\n }\n fireCancelableEvent(onClick, getEventDetail(item), event);\n };\n\n const itemAttributes: React.HTMLAttributes<HTMLElement> = {\n className: clsx(styles.anchor, { [styles.compressed]: isCompressed }),\n };\n const anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement> = {\n href: item.href \|\| '#',\n onClick: isLast ? preventDefault : onClickHandler,\n };\n\n const dataAttibutes: Record<string, string> = {};\n if (isLast) {\n dataAttibutes[DATA_ATTR_FUNNEL_KEY] = FUNNEL_KEY_FUNNEL_NAME;\n }\n\n return (\n <div className={clsx(styles.breadcrumb, isLast && styles.last)}>\n {isDisplayed && isCompressed ? (\n <BreadcrumbItemWithPopover\n item={item}\n isLast={isLast}\n anchorAttributes={anchorAttributes}\n {...itemAttributes}\n />\n ) : (\n <Item isLast={isLast} anchorAttributes={anchorAttributes} {...itemAttributes} {...dataAttibutes}>\n <span className={styles.text}>{item.text}</span>\n </Item>\n )}\n {!isLast ? (\n <span className={styles.icon}>\n <InternalIcon name=\"angle-right\" />\n </span>\n ) : null}\n </div>\n );\n}\n"]}

package/lib/internal/template/column-layout/flexible-column-layout/index.d.ts ADDED Viewed

@@ -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/lib/internal/template/column-layout/flexible-column-layout/index.d.ts.map ADDED Viewed

@@ -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/lib/internal/template/column-layout/flexible-column-layout/index.js ADDED Viewed

@@ -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/lib/internal/template/column-layout/flexible-column-layout/index.js.map ADDED Viewed

@@ -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/lib/internal/template/column-layout/flexible-column-layout/styles.css.js ADDED Viewed

@@ -0,0 +1,10 @@
+    import './styles.scoped.css';
+    export default {
+  "css-grid": "awsui_css-grid_zqq3x_dgfws_9",
+  "grid-no-gutters": "awsui_grid-no-gutters_zqq3x_dgfws_13",
+  "grid-variant-text-grid": "awsui_grid-variant-text-grid_zqq3x_dgfws_16",
+  "item": "awsui_item_zqq3x_dgfws_16",
+  "first-column": "awsui_first-column_zqq3x_dgfws_21"
+};

package/lib/internal/template/column-layout/flexible-column-layout/styles.scoped.css ADDED Viewed

@@ -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_dgfws_9:not(#\9) {
+  display: grid;
+  gap: var(--space-grid-gutter-jlj43y, 20px);
+}
+.awsui_css-grid_zqq3x_dgfws_9.awsui_grid-no-gutters_zqq3x_dgfws_13:not(#\9) {
+  gap: 0;
+}
+.awsui_css-grid_zqq3x_dgfws_9.awsui_grid-variant-text-grid_zqq3x_dgfws_16 > .awsui_item_zqq3x_dgfws_16:not(#\9) {
+  border-left: var(--border-divider-section-width-p0xg84, 1px) solid var(--color-border-divider-default-uqjcpn, #eaeded);
+  padding-left: var(--space-grid-gutter-jlj43y, 20px);
+  padding-right: var(--space-grid-gutter-jlj43y, 20px);
+}
+.awsui_css-grid_zqq3x_dgfws_9.awsui_grid-variant-text-grid_zqq3x_dgfws_16 > .awsui_item_zqq3x_dgfws_16.awsui_first-column_zqq3x_dgfws_21:not(#\9) {
+  border-left: 0;
+  padding-left: 0;
+}

package/lib/internal/template/column-layout/flexible-column-layout/styles.selectors.js ADDED Viewed

@@ -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_dgfws_9",
+  "grid-no-gutters": "awsui_grid-no-gutters_zqq3x_dgfws_13",
+  "grid-variant-text-grid": "awsui_grid-variant-text-grid_zqq3x_dgfws_16",
+  "item": "awsui_item_zqq3x_dgfws_16",
+  "first-column": "awsui_first-column_zqq3x_dgfws_21"
+};

package/lib/internal/template/column-layout/grid-column-layout.d.ts ADDED Viewed

@@ -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/lib/internal/template/column-layout/grid-column-layout.d.ts.map ADDED Viewed

@@ -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/lib/internal/template/column-layout/grid-column-layout.js ADDED Viewed

@@ -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/lib/internal/template/column-layout/grid-column-layout.js.map ADDED Viewed

@@ -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/lib/internal/template/column-layout/index.d.ts.map CHANGED Viewed

	@@ -1 +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~~"}
1	+ {"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/lib/internal/template/column-layout/index.js CHANGED Viewed

@@ -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/lib/internal/template/column-layout/index.js.map CHANGED Viewed

	@@ -1 +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"]}
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,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/lib/internal/template/column-layout/interfaces.d.ts CHANGED Viewed

@@ -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/lib/internal/template/column-layout/interfaces.d.ts.map CHANGED Viewed

	@@ -1 +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"}
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;;;;;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/lib/internal/template/column-layout/interfaces.js.map CHANGED Viewed

	@@ -1 +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"]}
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 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/lib/internal/template/column-layout/internal.d.ts CHANGED Viewed

@@ -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/lib/internal/template/column-layout/internal.d.ts.map CHANGED Viewed

	@@ -1 +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~~"}
1	+ {"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/lib/internal/template/column-layout/internal.js CHANGED Viewed

@@ -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