@cloudscape-design/components 3.0.873 → 3.0.875

package/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.js

@@ -84,11 +84,11 @@ function TriggerButton({ ariaLabel, className, iconName, iconSvg, ariaExpanded,
             };
             const wrapperDiv = containerRef.current;
             if (wrapperDiv) {
-                wrapperDiv.addEventListener('pointerdown', handlePointerDownEvent);
-                wrapperDiv.addEventListener('keydown', handleKeyDownEvent);
+                const controller = new AbortController();
+                wrapperDiv.addEventListener('pointerdown', handlePointerDownEvent, { signal: controller.signal });
+                wrapperDiv.addEventListener('keydown', handleKeyDownEvent, { signal: controller.signal });
                 return () => {
-                    wrapperDiv.removeEventListener('pointerdown', handlePointerDownEvent);
-                    wrapperDiv.removeEventListener('keydown', handleKeyDownEvent);
+                    controller.abort();
                 };
             }
         }

package/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.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, { Ref, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { ButtonProps } from '../../../../button/interfaces';\nimport { IconProps } from '../../../../icon/interfaces';\nimport Icon from '../../../../icon/internal';\nimport Tooltip from '../../../../internal/components/tooltip';\nimport { registerTooltip } from '../../../../internal/components/tooltip/registry';\n\nimport testutilStyles from '../../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface TriggerButtonProps {\n  ariaLabel?: string;\n  className?: string;\n  iconName?: IconProps.Name;\n  iconSvg?: React.ReactNode;\n  ariaExpanded: boolean | undefined;\n  ariaControls?: string;\n  disabled?: boolean;\n  /**\n   * Ovewrwrites any internal testIds when provided\n   */\n  testId?: string;\n  /**\n   * If button is selected. Used only for desktop and applies a selected class\n   */\n  selected?: boolean;\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n\n  badge?: boolean;\n  /**\n   * If the button is expected to have a tooltip. When false it will not set the event listeners\n   *\n   * defaults to false\n   */\n  hasTooltip?: boolean;\n  /**\n   * This text allows for a customized tooltip.\n   *\n   * When falsy, the tooltip will parse the tooltip form the aria-lable\n   */\n  tooltipText?: string;\n  hasOpenDrawer?: boolean;\n  /**\n   * If the AppLayout is in mobile mode\n   * Used to determine if and where to render tooltips\n   */\n  isMobile?: boolean;\n  /**\n   * set to true if the trigger button was used to open the last active drawer\n   * this is also used to hide the tooltip should the focus be set programmatically\n   * on focus from a drawer close using this\n   */\n  isForPreviousActiveDrawer?: boolean;\n  /**\n   * if the trigger button is for the split panel\n   */\n  isForSplitPanel?: boolean;\n  tabIndex?: number | undefined;\n}\n\nfunction TriggerButton(\n  {\n    ariaLabel,\n    className,\n    iconName,\n    iconSvg,\n    ariaExpanded,\n    ariaControls,\n    onClick,\n    testId,\n    disabled = false,\n    badge,\n    selected = false,\n    hasTooltip = false,\n    tooltipText,\n    hasOpenDrawer = false,\n    isMobile = false,\n    isForPreviousActiveDrawer = false,\n    isForSplitPanel = false,\n  }: TriggerButtonProps,\n  ref: React.Ref<ButtonProps.Ref>\n) {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const tooltipValue = tooltipText ? tooltipText : ariaLabel ? ariaLabel : '';\n  const [showTooltip, setShowTooltip] = useState<boolean>(false);\n  const [suppressTooltip, setSupressTooltip] = useState<boolean>(false);\n\n  const handleTriggerClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation(); // Stop the event from propagating to the badge icon\n    setShowTooltip(false);\n    setSupressTooltip(true);\n    onClick(event);\n  };\n\n  const handleBlur = (keepSupressed = false) => {\n    setSupressTooltip(keepSupressed);\n    setShowTooltip(false);\n  };\n\n  const handlePointerEnter = () => {\n    setSupressTooltip(false);\n    setShowTooltip(true);\n  };\n\n  /**\n   * Takes the drawer being closed and the data-shift-focus value from a close button on that drawer that persists\n   * on the event relatedTarget to determine not to show the tooltip\n   * @param event\n   */\n  const handleOnFocus = useCallback(\n    (event: FocusEvent) => {\n      let shouldShowTooltip = false;\n      const eventWithRelatedTarget = event as any;\n      const relatedTarget = eventWithRelatedTarget?.relatedTarget;\n      const isFromAnotherTrigger = relatedTarget?.dataset?.shiftFocus === 'awsui-layout-drawer-trigger';\n      if (\n        (isForSplitPanel && !!relatedTarget) || // relatedTarget is null when split panel is closed\n        (!isForSplitPanel &&\n          (isFromAnotherTrigger || // for key navigation from another trigger button\n            !isForPreviousActiveDrawer)) // for when the drawer was not opened recently\n      ) {\n        shouldShowTooltip = true;\n      }\n      setSupressTooltip(!shouldShowTooltip);\n      setShowTooltip(true);\n    },\n    [\n      // To assert reference equality check\n      isForPreviousActiveDrawer,\n      isForSplitPanel,\n    ]\n  );\n\n  const tooltipVisible = useMemo(() => {\n    return (\n      hasTooltip &&\n      showTooltip &&\n      !suppressTooltip &&\n      !!containerRef?.current &&\n      tooltipValue &&\n      !(isMobile && hasOpenDrawer)\n    );\n  }, [hasTooltip, showTooltip, containerRef, tooltipValue, isMobile, hasOpenDrawer, suppressTooltip]);\n\n  useEffect(() => {\n    if (hasTooltip && tooltipValue) {\n      const close = () => {\n        setShowTooltip(false);\n        setSupressTooltip(false);\n      };\n\n      const shouldCloseTooltip = (event: PointerEvent) => {\n        if (event.target && containerRef && (containerRef.current as any)?.contains(event.target as HTMLElement)) {\n          return false;\n        }\n        return true;\n      };\n\n      const handlePointerDownEvent = (event: PointerEvent) => {\n        if (shouldCloseTooltip(event)) {\n          close();\n        }\n      };\n\n      const handleKeyDownEvent = (event: KeyboardEvent) => {\n        if (event.key === 'Escape') {\n          close();\n        }\n      };\n\n      const wrapperDiv = containerRef.current;\n      if (wrapperDiv) {\n        wrapperDiv.addEventListener('pointerdown', handlePointerDownEvent);\n        wrapperDiv.addEventListener('keydown', handleKeyDownEvent);\n\n        return () => {\n          wrapperDiv.removeEventListener('pointerdown', handlePointerDownEvent);\n          wrapperDiv.removeEventListener('keydown', handleKeyDownEvent);\n        };\n      }\n    }\n  }, [containerRef, hasTooltip, tooltipValue]);\n\n  useEffect(() => {\n    if (tooltipVisible) {\n      return registerTooltip(() => {\n        setShowTooltip(false);\n        setSupressTooltip(false);\n      });\n    }\n  }, [tooltipVisible]);\n\n  return (\n    <div\n      ref={containerRef}\n      {...(hasTooltip && {\n        onPointerEnter: () => handlePointerEnter(),\n        onPointerLeave: () => handleBlur(true),\n        onFocus: e => handleOnFocus(e as any),\n        onBlur: () => handleBlur(true),\n      })}\n      className={styles['trigger-wrapper']}\n    >\n      <button\n        aria-expanded={ariaExpanded}\n        aria-controls={ariaControls}\n        aria-haspopup={true}\n        aria-label={ariaLabel}\n        aria-disabled={disabled}\n        disabled={disabled}\n        className={clsx(\n          styles.trigger,\n          styles['trigger-button-styles'],\n          {\n            [styles.selected]: selected,\n            [styles.badge]: badge,\n            [testutilStyles['drawers-trigger-with-badge']]: badge,\n          },\n          className\n        )}\n        onClick={handleTriggerClick}\n        ref={ref as Ref<HTMLButtonElement>}\n        type=\"button\"\n        data-testid={testId}\n        data-shift-focus=\"awsui-layout-drawer-trigger\"\n      >\n        <span className={clsx(badge && clsx(styles['trigger-badge-wrapper'], styles['trigger-button-styles']))}>\n          {(iconName || iconSvg) && <Icon name={iconName} svg={iconSvg} />}\n        </span>\n      </button>\n      {badge && <div className={styles.dot} />}\n      {tooltipVisible && (\n        <Tooltip trackRef={containerRef} value={tooltipValue} className={testutilStyles['trigger-tooltip']} />\n      )}\n    </div>\n  );\n}\n\nexport default React.forwardRef(TriggerButton);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.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, { Ref, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { ButtonProps } from '../../../../button/interfaces';\nimport { IconProps } from '../../../../icon/interfaces';\nimport Icon from '../../../../icon/internal';\nimport Tooltip from '../../../../internal/components/tooltip';\nimport { registerTooltip } from '../../../../internal/components/tooltip/registry';\n\nimport testutilStyles from '../../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface TriggerButtonProps {\n  ariaLabel?: string;\n  className?: string;\n  iconName?: IconProps.Name;\n  iconSvg?: React.ReactNode;\n  ariaExpanded: boolean | undefined;\n  ariaControls?: string;\n  disabled?: boolean;\n  /**\n   * Ovewrwrites any internal testIds when provided\n   */\n  testId?: string;\n  /**\n   * If button is selected. Used only for desktop and applies a selected class\n   */\n  selected?: boolean;\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n\n  badge?: boolean;\n  /**\n   * If the button is expected to have a tooltip. When false it will not set the event listeners\n   *\n   * defaults to false\n   */\n  hasTooltip?: boolean;\n  /**\n   * This text allows for a customized tooltip.\n   *\n   * When falsy, the tooltip will parse the tooltip form the aria-lable\n   */\n  tooltipText?: string;\n  hasOpenDrawer?: boolean;\n  /**\n   * If the AppLayout is in mobile mode\n   * Used to determine if and where to render tooltips\n   */\n  isMobile?: boolean;\n  /**\n   * set to true if the trigger button was used to open the last active drawer\n   * this is also used to hide the tooltip should the focus be set programmatically\n   * on focus from a drawer close using this\n   */\n  isForPreviousActiveDrawer?: boolean;\n  /**\n   * if the trigger button is for the split panel\n   */\n  isForSplitPanel?: boolean;\n  tabIndex?: number | undefined;\n}\n\nfunction TriggerButton(\n  {\n    ariaLabel,\n    className,\n    iconName,\n    iconSvg,\n    ariaExpanded,\n    ariaControls,\n    onClick,\n    testId,\n    disabled = false,\n    badge,\n    selected = false,\n    hasTooltip = false,\n    tooltipText,\n    hasOpenDrawer = false,\n    isMobile = false,\n    isForPreviousActiveDrawer = false,\n    isForSplitPanel = false,\n  }: TriggerButtonProps,\n  ref: React.Ref<ButtonProps.Ref>\n) {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const tooltipValue = tooltipText ? tooltipText : ariaLabel ? ariaLabel : '';\n  const [showTooltip, setShowTooltip] = useState<boolean>(false);\n  const [suppressTooltip, setSupressTooltip] = useState<boolean>(false);\n\n  const handleTriggerClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation(); // Stop the event from propagating to the badge icon\n    setShowTooltip(false);\n    setSupressTooltip(true);\n    onClick(event);\n  };\n\n  const handleBlur = (keepSupressed = false) => {\n    setSupressTooltip(keepSupressed);\n    setShowTooltip(false);\n  };\n\n  const handlePointerEnter = () => {\n    setSupressTooltip(false);\n    setShowTooltip(true);\n  };\n\n  /**\n   * Takes the drawer being closed and the data-shift-focus value from a close button on that drawer that persists\n   * on the event relatedTarget to determine not to show the tooltip\n   * @param event\n   */\n  const handleOnFocus = useCallback(\n    (event: FocusEvent) => {\n      let shouldShowTooltip = false;\n      const eventWithRelatedTarget = event as any;\n      const relatedTarget = eventWithRelatedTarget?.relatedTarget;\n      const isFromAnotherTrigger = relatedTarget?.dataset?.shiftFocus === 'awsui-layout-drawer-trigger';\n      if (\n        (isForSplitPanel && !!relatedTarget) || // relatedTarget is null when split panel is closed\n        (!isForSplitPanel &&\n          (isFromAnotherTrigger || // for key navigation from another trigger button\n            !isForPreviousActiveDrawer)) // for when the drawer was not opened recently\n      ) {\n        shouldShowTooltip = true;\n      }\n      setSupressTooltip(!shouldShowTooltip);\n      setShowTooltip(true);\n    },\n    [\n      // To assert reference equality check\n      isForPreviousActiveDrawer,\n      isForSplitPanel,\n    ]\n  );\n\n  const tooltipVisible = useMemo(() => {\n    return (\n      hasTooltip &&\n      showTooltip &&\n      !suppressTooltip &&\n      !!containerRef?.current &&\n      tooltipValue &&\n      !(isMobile && hasOpenDrawer)\n    );\n  }, [hasTooltip, showTooltip, containerRef, tooltipValue, isMobile, hasOpenDrawer, suppressTooltip]);\n\n  useEffect(() => {\n    if (hasTooltip && tooltipValue) {\n      const close = () => {\n        setShowTooltip(false);\n        setSupressTooltip(false);\n      };\n\n      const shouldCloseTooltip = (event: PointerEvent) => {\n        if (event.target && containerRef && (containerRef.current as any)?.contains(event.target as HTMLElement)) {\n          return false;\n        }\n        return true;\n      };\n\n      const handlePointerDownEvent = (event: PointerEvent) => {\n        if (shouldCloseTooltip(event)) {\n          close();\n        }\n      };\n\n      const handleKeyDownEvent = (event: KeyboardEvent) => {\n        if (event.key === 'Escape') {\n          close();\n        }\n      };\n\n      const wrapperDiv = containerRef.current;\n      if (wrapperDiv) {\n        const controller = new AbortController();\n        wrapperDiv.addEventListener('pointerdown', handlePointerDownEvent, { signal: controller.signal });\n        wrapperDiv.addEventListener('keydown', handleKeyDownEvent, { signal: controller.signal });\n\n        return () => {\n          controller.abort();\n        };\n      }\n    }\n  }, [containerRef, hasTooltip, tooltipValue]);\n\n  useEffect(() => {\n    if (tooltipVisible) {\n      return registerTooltip(() => {\n        setShowTooltip(false);\n        setSupressTooltip(false);\n      });\n    }\n  }, [tooltipVisible]);\n\n  return (\n    <div\n      ref={containerRef}\n      {...(hasTooltip && {\n        onPointerEnter: () => handlePointerEnter(),\n        onPointerLeave: () => handleBlur(true),\n        onFocus: e => handleOnFocus(e as any),\n        onBlur: () => handleBlur(true),\n      })}\n      className={styles['trigger-wrapper']}\n    >\n      <button\n        aria-expanded={ariaExpanded}\n        aria-controls={ariaControls}\n        aria-haspopup={true}\n        aria-label={ariaLabel}\n        aria-disabled={disabled}\n        disabled={disabled}\n        className={clsx(\n          styles.trigger,\n          styles['trigger-button-styles'],\n          {\n            [styles.selected]: selected,\n            [styles.badge]: badge,\n            [testutilStyles['drawers-trigger-with-badge']]: badge,\n          },\n          className\n        )}\n        onClick={handleTriggerClick}\n        ref={ref as Ref<HTMLButtonElement>}\n        type=\"button\"\n        data-testid={testId}\n        data-shift-focus=\"awsui-layout-drawer-trigger\"\n      >\n        <span className={clsx(badge && clsx(styles['trigger-badge-wrapper'], styles['trigger-button-styles']))}>\n          {(iconName || iconSvg) && <Icon name={iconName} svg={iconSvg} />}\n        </span>\n      </button>\n      {badge && <div className={styles.dot} />}\n      {tooltipVisible && (\n        <Tooltip trackRef={containerRef} value={tooltipValue} className={testutilStyles['trigger-tooltip']} />\n      )}\n    </div>\n  );\n}\n\nexport default React.forwardRef(TriggerButton);\n"]}

package/attribute-editor/grid-defaults.d.ts

@@ -0,0 +1,3 @@
+import { AttributeEditorProps } from './interfaces';
+export declare const gridDefaults: Record<number, AttributeEditorProps.GridLayout[]>;
+//# sourceMappingURL=grid-defaults.d.ts.map

package/attribute-editor/grid-defaults.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-defaults.d.ts","sourceRoot":"","sources":["../../../src/attribute-editor/grid-defaults.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAEpD,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,oBAAoB,CAAC,UAAU,EAAE,CAwH1E,CAAC"}

package/attribute-editor/grid-defaults.js

@@ -0,0 +1,122 @@
+export const gridDefaults = {
+    1: [
+        {
+            breakpoint: 'xxs',
+            rows: [[3]],
+        },
+        {
+            rows: [[1]],
+            removeButton: {
+                ownRow: true,
+            },
+        },
+    ],
+    2: [
+        {
+            breakpoint: 'xs',
+            rows: [[3, 3]],
+            removeButton: {
+                width: 2,
+            },
+        },
+        {
+            breakpoint: 'xxs',
+            rows: [[1, 1]],
+            removeButton: {
+                ownRow: true,
+            },
+        },
+        {
+            rows: [[1], [1]],
+        },
+    ],
+    3: [
+        {
+            breakpoint: 'xs',
+            rows: [[3, 3, 3]],
+            removeButton: {
+                width: 3,
+            },
+        },
+        {
+            breakpoint: 'xxs',
+            rows: [[1, 1], [1]],
+            removeButton: {
+                ownRow: true,
+            },
+        },
+        {
+            rows: [[1], [1], [1]],
+        },
+    ],
+    4: [
+        {
+            breakpoint: 'xs',
+            rows: [[3, 3, 3, 3]],
+            removeButton: {
+                width: 4,
+            },
+        },
+        {
+            breakpoint: 'xxs',
+            rows: [
+                [1, 1],
+                [1, 1],
+            ],
+        },
+        {
+            rows: [[1], [1], [1], [1]],
+        },
+    ],
+    5: [
+        {
+            breakpoint: 's',
+            rows: [[3, 3, 3, 3, 3]],
+            removeButton: {
+                width: 5,
+            },
+        },
+        {
+            breakpoint: 'xs',
+            rows: [
+                [1, 1, 1],
+                [1, 1],
+            ],
+        },
+        {
+            breakpoint: 'xxs',
+            rows: [[1, 1], [1, 1], [1]],
+        },
+        {
+            rows: [[1], [1], [1], [1], [1]],
+        },
+    ],
+    6: [
+        {
+            breakpoint: 's',
+            rows: [[3, 3, 3, 3, 3, 3]],
+            removeButton: {
+                width: 6,
+            },
+        },
+        {
+            breakpoint: 'xs',
+            rows: [
+                [1, 1, 1],
+                [1, 1, 1],
+            ],
+        },
+        {
+            breakpoint: 'xxs',
+            rows: [
+                [1, 1],
+                [1, 1],
+                [1, 1],
+            ],
+        },
+        {
+            rows: [[1], [1], [1], [1], [1], [1]],
+        },
+    ],
+};
+//# sourceMappingURL=grid-defaults.js.map

package/attribute-editor/grid-defaults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-defaults.js","sourceRoot":"","sources":["../../../src/attribute-editor/grid-defaults.ts"],"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 { AttributeEditorProps } from './interfaces';\n\nexport const gridDefaults: Record<number, AttributeEditorProps.GridLayout[]> = {\n  1: [\n    {\n      breakpoint: 'xxs',\n      rows: [[3]],\n    },\n    {\n      rows: [[1]],\n      removeButton: {\n        ownRow: true,\n      },\n    },\n  ],\n  2: [\n    {\n      breakpoint: 'xs',\n      rows: [[3, 3]],\n      removeButton: {\n        width: 2,\n      },\n    },\n    {\n      breakpoint: 'xxs',\n      rows: [[1, 1]],\n      removeButton: {\n        ownRow: true,\n      },\n    },\n    {\n      rows: [[1], [1]],\n    },\n  ],\n  3: [\n    {\n      breakpoint: 'xs',\n      rows: [[3, 3, 3]],\n      removeButton: {\n        width: 3,\n      },\n    },\n    {\n      breakpoint: 'xxs',\n      rows: [[1, 1], [1]],\n      removeButton: {\n        ownRow: true,\n      },\n    },\n    {\n      rows: [[1], [1], [1]],\n    },\n  ],\n  4: [\n    {\n      breakpoint: 'xs',\n      rows: [[3, 3, 3, 3]],\n      removeButton: {\n        width: 4,\n      },\n    },\n    {\n      breakpoint: 'xxs',\n      rows: [\n        [1, 1],\n        [1, 1],\n      ],\n    },\n    {\n      rows: [[1], [1], [1], [1]],\n    },\n  ],\n  5: [\n    {\n      breakpoint: 's',\n      rows: [[3, 3, 3, 3, 3]],\n      removeButton: {\n        width: 5,\n      },\n    },\n    {\n      breakpoint: 'xs',\n      rows: [\n        [1, 1, 1],\n        [1, 1],\n      ],\n    },\n    {\n      breakpoint: 'xxs',\n      rows: [[1, 1], [1, 1], [1]],\n    },\n    {\n      rows: [[1], [1], [1], [1], [1]],\n    },\n  ],\n  6: [\n    {\n      breakpoint: 's',\n      rows: [[3, 3, 3, 3, 3, 3]],\n      removeButton: {\n        width: 6,\n      },\n    },\n    {\n      breakpoint: 'xs',\n      rows: [\n        [1, 1, 1],\n        [1, 1, 1],\n      ],\n    },\n    {\n      breakpoint: 'xxs',\n      rows: [\n        [1, 1],\n        [1, 1],\n        [1, 1],\n      ],\n    },\n    {\n      rows: [[1], [1], [1], [1], [1], [1]],\n    },\n  ],\n};\n"]}

package/attribute-editor/interfaces.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
+import { ButtonDropdownProps } from '../button-dropdown/interfaces';
 import { BaseComponentProps } from '../internal/base-component';
+import { Breakpoint as InternalBreakpoint } from '../internal/breakpoints';
 import { NonCancelableEventHandler } from '../internal/events';
 export interface AttributeEditorForwardRefType {
     <T>(props: AttributeEditorProps<T> & {
@@ -33,6 +35,13 @@ export declare namespace AttributeEditorProps {
          */
         focusAddButton(): void;
     }
+    interface RowActionsProps<T> {
+        item: T;
+        itemIndex: number;
+        ref: React.Ref<ButtonDropdownProps.Ref>;
+        breakpoint: Breakpoint | null;
+        ownRow: boolean;
+    }
     interface I18nStrings<T = any> {
         errorIconAriaLabel?: string;
         warningIconAriaLabel?: string;
@@ -42,6 +51,15 @@ export declare namespace AttributeEditorProps {
          */
         removeButtonAriaLabel?: (item: T) => string;
     }
+    type Breakpoint = InternalBreakpoint;
+    interface GridLayout {
+        breakpoint?: Breakpoint;
+        rows: ReadonlyArray<ReadonlyArray<number>>;
+        removeButton?: {
+            ownRow?: boolean;
+            width?: number | 'auto';
+        };
+    }
 }
 export interface AttributeEditorProps<T> extends BaseComponentProps {
     /**
@@ -88,6 +106,7 @@ export interface AttributeEditorProps<T> extends BaseComponentProps {
     addButtonVariant?: AttributeEditorProps.AddButtonVariant;
     /**
      * Defines the editor configuration. Each object in the array represents one form field in the row.
+     * If more than 6 attributes are specified, a `gridLayout` must be provided.
      *
      * * `label` (ReactNode) - Text label for the form field.
      * * `info` (ReactNode) - Info link for the form field.
@@ -97,10 +116,38 @@ export interface AttributeEditorProps<T> extends BaseComponentProps {
      *    It renders the form field in a warning state if the returned value is not `null` or `undefined`.
      * * `constraintText` ((item, itemIndex) => ReactNode) - Text to display as a constraint message below the field.
      * * `control` ((item, itemIndex) => ReactNode) - A control to use as the input for the field.
-     *
-     * A maximum of four fields are supported.
      */
     definition: ReadonlyArray<AttributeEditorProps.FieldDefinition<T>>;
+    /**
+     * Optionally specifies the layout of the attributes. By default, all attributes will be
+     * equally spaced and wrapped into multiple rows on smaller viewports.
+     *
+     * A `gridLayout` is an array of breakpoint definitions. Each definition consists of:
+     * - `rows` (`number[][]`): the rows in which to display the attributes. Each row consists of a list of numbers indicating
+     *   the relative width of each attribute. For example, `[[1, 1, 1, 1]]` is a single row of four evenly-spaced attributes,
+     *   or `[[1, 2], [1, 1, 1]]` splits five attributes onto two rows.
+     * - `breakpoint` (`string`): optionally specifies that the given entry should only be used when at least that much width is available.
+     * - `removeButton`: optionally configures the remove (or row action) button placement. If this is not provided, the button will be
+     *   placed at the end of a single row, or below if multiple rows are present. The `removeButton` property supports contains two properties:
+     *   - `ownRow` (`boolean`): forces the remove button onto its own row.
+     *   - `width` (`number | 'auto'`): a number indicating the relative width (equivalent to a `rows` entry), or 'auto' to fit to the button width.
+     */
+    gridLayout?: ReadonlyArray<AttributeEditorProps.GridLayout>;
+    /**
+     * Specifies a custom action trigger for each row, in place of the remove button.
+     * Only button and button dropdown components are supported.
+     * If you provide this, `removeButtonText`, `removeButtonAriaLabel`,
+     * and `onRemoveButtonClick` will be ignored.
+     * The trigger must be given the provided `ref` in order for `focusRemoveButton`
+     * to work.
+     * The function receives the following properties:
+     * - `item`: The item being rendered in the current row.
+     * - `itemIndex` (`number`): The index of the item.
+     * - `ref` (`ReactRef`): A React ref that should be passed to the rendered button.
+     * - `breakpoint` (`Breakpoint`): The current breakpoint, for responsive behavior.
+     * - `ownRow` (`boolean`): Whether the button is rendered on its own row.
+     */
+    customRowActions?: (props: AttributeEditorProps.RowActionsProps<T>) => React.ReactNode;
     /**
      * Called when add button is clicked.
      */

package/attribute-editor/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/attribute-editor/interfaces.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/attribute-editor/interfaces.ts"],"names":[],"mappings":"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"}

package/attribute-editor/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/attribute-editor/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';\n\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\n/*\n * HACK: Cast the component to a named parametrized interface.\n *\n * This lets us use React.forwardRef and still let the component have type\n * parameters, and the naming convention lets the documenter know that this is\n * a forwardRef-wrapped component.\n *\n * We don't need to expose this type to customers because it's just a simple\n * function type.\n */\nexport interface AttributeEditorForwardRefType {\n  <T>(props: AttributeEditorProps<T> & { ref?: React.Ref<AttributeEditorProps.Ref> }): JSX.Element;\n}\n\nexport namespace AttributeEditorProps {\n  export interface IsItemRemovableFunction<T> {\n    (item: T): boolean;\n  }\n\n  export type FieldRenderable<T> = (item: T, itemIndex: number) => React.ReactNode;\n  export interface FieldDefinition<T> {\n    label?: React.ReactNode;\n    info?: React.ReactNode;\n    control?: FieldRenderable<T> | React.ReactNode;\n    errorText?: FieldRenderable<T> | React.ReactNode;\n    warningText?: FieldRenderable<T> | React.ReactNode;\n    constraintText?: FieldRenderable<T> | React.ReactNode;\n  }\n\n  export type AddButtonVariant = 'normal' | 'inline-link';\n\n  export interface RemoveButtonClickDetail {\n    itemIndex: number;\n  }\n\n  export interface Ref {\n    /**\n     * Focuses the 'remove' button for the given row index.\n     */\n    focusRemoveButton(itemIndex: number): void;\n    /**\n     * Focuses the 'add' button. Use this, for example, after a user removes the last row.\n     */\n    focusAddButton(): void;\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  export interface I18nStrings<T = any> {\n    errorIconAriaLabel?: string;\n    warningIconAriaLabel?: string;\n    itemRemovedAriaLive?: string;\n\n    /**\n     * @deprecated Use `removeButtonAriaLabel` on the component instead.\n     */\n    removeButtonAriaLabel?: (item: T) => string;\n  }\n}\n\nexport interface AttributeEditorProps<T> extends BaseComponentProps {\n  /**\n   * Displayed when there are no items to display.\n   */\n  empty?: React.ReactNode;\n\n  /**\n   * Displayed below the add button. Use it for additional information related to the attribute editor.\n   */\n  additionalInfo?: React.ReactNode;\n\n  /**\n   * Specifies the text that's displayed in the add button.\n   */\n  addButtonText: string;\n\n  /**\n   * Specifies the text that's displayed in the remove button.\n   * @i18n\n   */\n  removeButtonText?: string;\n\n  /**\n   * Adds an `aria-label` to the remove button.\n   */\n  removeButtonAriaLabel?: (item: T) => string;\n\n  /**\n   * Specifies the items that serve as the data source for all rows.\n   * The display of a row is handled by the `definition` property.\n   */\n  items?: ReadonlyArray<T>;\n\n  /**\n   * Function that determines whether an item is removable. When this function returns `false`, the remove\n   * button is not rendered and the user can't remove the item.\n   * By default, all items are removable.\n   */\n  isItemRemovable?: AttributeEditorProps.IsItemRemovableFunction<T>;\n\n  /**\n   * Determines whether the add button is disabled.\n   */\n  disableAddButton?: boolean;\n\n  /**\n   * Specifies the variant to use for the add button. By default a normal button is used.\n   * Use `inline-link` when using an attribute editor nested inside complex attribute editing\n   * with expandable sections.\n   */\n  addButtonVariant?: AttributeEditorProps.AddButtonVariant;\n\n  /**\n   * Defines the editor configuration. Each object in the array represents one form field in the row.\n   *\n   * * `label` (ReactNode) - Text label for the form field.\n   * * `info` (ReactNode) - Info link for the form field.\n   * * `errorText` ((item, itemIndex) => ReactNode) - Error message text to display as a control validation message.\n   *    It renders the form field as invalid if the returned value is not `null` or `undefined`.\n   * * `warningText` ((item, itemIndex) => ReactNode) - Warning message text to display as a control validation message.\n   *    It renders the form field in a warning state if the returned value is not `null` or `undefined`.\n   * * `constraintText` ((item, itemIndex) => ReactNode) - Text to display as a constraint message below the field.\n   * * `control` ((item, itemIndex) => ReactNode) - A control to use as the input for the field.\n   *\n   * A maximum of four fields are supported.\n   */\n  definition: ReadonlyArray<AttributeEditorProps.FieldDefinition<T>>;\n\n  /**\n   * Called when add button is clicked.\n   */\n  onAddButtonClick?: NonCancelableEventHandler;\n\n  /**\n   * Called when remove button is clicked.\n   * The event `detail` contains the index of the corresponding item.\n   */\n  onRemoveButtonClick?: NonCancelableEventHandler<AttributeEditorProps.RemoveButtonClickDetail>;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   */\n  i18nStrings?: AttributeEditorProps.I18nStrings<T>;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/attribute-editor/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';\n\nimport { ButtonDropdownProps } from '../button-dropdown/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { Breakpoint as InternalBreakpoint } from '../internal/breakpoints';\nimport { NonCancelableEventHandler } from '../internal/events';\n\n/*\n * HACK: Cast the component to a named parametrized interface.\n *\n * This lets us use React.forwardRef and still let the component have type\n * parameters, and the naming convention lets the documenter know that this is\n * a forwardRef-wrapped component.\n *\n * We don't need to expose this type to customers because it's just a simple\n * function type.\n */\nexport interface AttributeEditorForwardRefType {\n  <T>(props: AttributeEditorProps<T> & { ref?: React.Ref<AttributeEditorProps.Ref> }): JSX.Element;\n}\n\nexport namespace AttributeEditorProps {\n  export interface IsItemRemovableFunction<T> {\n    (item: T): boolean;\n  }\n\n  export type FieldRenderable<T> = (item: T, itemIndex: number) => React.ReactNode;\n  export interface FieldDefinition<T> {\n    label?: React.ReactNode;\n    info?: React.ReactNode;\n    control?: FieldRenderable<T> | React.ReactNode;\n    errorText?: FieldRenderable<T> | React.ReactNode;\n    warningText?: FieldRenderable<T> | React.ReactNode;\n    constraintText?: FieldRenderable<T> | React.ReactNode;\n  }\n\n  export type AddButtonVariant = 'normal' | 'inline-link';\n\n  export interface RemoveButtonClickDetail {\n    itemIndex: number;\n  }\n\n  export interface Ref {\n    /**\n     * Focuses the 'remove' button for the given row index.\n     */\n    focusRemoveButton(itemIndex: number): void;\n    /**\n     * Focuses the 'add' button. Use this, for example, after a user removes the last row.\n     */\n    focusAddButton(): void;\n  }\n\n  export interface RowActionsProps<T> {\n    item: T;\n    itemIndex: number;\n    ref: React.Ref<ButtonDropdownProps.Ref>;\n    breakpoint: Breakpoint | null;\n    ownRow: boolean;\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  export interface I18nStrings<T = any> {\n    errorIconAriaLabel?: string;\n    warningIconAriaLabel?: string;\n    itemRemovedAriaLive?: string;\n\n    /**\n     * @deprecated Use `removeButtonAriaLabel` on the component instead.\n     */\n    removeButtonAriaLabel?: (item: T) => string;\n  }\n\n  export type Breakpoint = InternalBreakpoint;\n\n  export interface GridLayout {\n    breakpoint?: Breakpoint;\n    rows: ReadonlyArray<ReadonlyArray<number>>;\n    removeButton?: {\n      ownRow?: boolean;\n      width?: number | 'auto';\n    };\n  }\n}\n\nexport interface AttributeEditorProps<T> extends BaseComponentProps {\n  /**\n   * Displayed when there are no items to display.\n   */\n  empty?: React.ReactNode;\n\n  /**\n   * Displayed below the add button. Use it for additional information related to the attribute editor.\n   */\n  additionalInfo?: React.ReactNode;\n\n  /**\n   * Specifies the text that's displayed in the add button.\n   */\n  addButtonText: string;\n\n  /**\n   * Specifies the text that's displayed in the remove button.\n   * @i18n\n   */\n  removeButtonText?: string;\n\n  /**\n   * Adds an `aria-label` to the remove button.\n   */\n  removeButtonAriaLabel?: (item: T) => string;\n\n  /**\n   * Specifies the items that serve as the data source for all rows.\n   * The display of a row is handled by the `definition` property.\n   */\n  items?: ReadonlyArray<T>;\n\n  /**\n   * Function that determines whether an item is removable. When this function returns `false`, the remove\n   * button is not rendered and the user can't remove the item.\n   * By default, all items are removable.\n   */\n  isItemRemovable?: AttributeEditorProps.IsItemRemovableFunction<T>;\n\n  /**\n   * Determines whether the add button is disabled.\n   */\n  disableAddButton?: boolean;\n\n  /**\n   * Specifies the variant to use for the add button. By default a normal button is used.\n   * Use `inline-link` when using an attribute editor nested inside complex attribute editing\n   * with expandable sections.\n   */\n  addButtonVariant?: AttributeEditorProps.AddButtonVariant;\n\n  /**\n   * Defines the editor configuration. Each object in the array represents one form field in the row.\n   * If more than 6 attributes are specified, a `gridLayout` must be provided.\n   *\n   * * `label` (ReactNode) - Text label for the form field.\n   * * `info` (ReactNode) - Info link for the form field.\n   * * `errorText` ((item, itemIndex) => ReactNode) - Error message text to display as a control validation message.\n   *    It renders the form field as invalid if the returned value is not `null` or `undefined`.\n   * * `warningText` ((item, itemIndex) => ReactNode) - Warning message text to display as a control validation message.\n   *    It renders the form field in a warning state if the returned value is not `null` or `undefined`.\n   * * `constraintText` ((item, itemIndex) => ReactNode) - Text to display as a constraint message below the field.\n   * * `control` ((item, itemIndex) => ReactNode) - A control to use as the input for the field.\n   */\n  definition: ReadonlyArray<AttributeEditorProps.FieldDefinition<T>>;\n\n  /**\n   * Optionally specifies the layout of the attributes. By default, all attributes will be\n   * equally spaced and wrapped into multiple rows on smaller viewports.\n   *\n   * A `gridLayout` is an array of breakpoint definitions. Each definition consists of:\n   * - `rows` (`number[][]`): the rows in which to display the attributes. Each row consists of a list of numbers indicating\n   *   the relative width of each attribute. For example, `[[1, 1, 1, 1]]` is a single row of four evenly-spaced attributes,\n   *   or `[[1, 2], [1, 1, 1]]` splits five attributes onto two rows.\n   * - `breakpoint` (`string`): optionally specifies that the given entry should only be used when at least that much width is available.\n   * - `removeButton`: optionally configures the remove (or row action) button placement. If this is not provided, the button will be\n   *   placed at the end of a single row, or below if multiple rows are present. The `removeButton` property supports contains two properties:\n   *   - `ownRow` (`boolean`): forces the remove button onto its own row.\n   *   - `width` (`number | 'auto'`): a number indicating the relative width (equivalent to a `rows` entry), or 'auto' to fit to the button width.\n   */\n  gridLayout?: ReadonlyArray<AttributeEditorProps.GridLayout>;\n\n  /**\n   * Specifies a custom action trigger for each row, in place of the remove button.\n   * Only button and button dropdown components are supported.\n   * If you provide this, `removeButtonText`, `removeButtonAriaLabel`,\n   * and `onRemoveButtonClick` will be ignored.\n   * The trigger must be given the provided `ref` in order for `focusRemoveButton`\n   * to work.\n   * The function receives the following properties:\n   * - `item`: The item being rendered in the current row.\n   * - `itemIndex` (`number`): The index of the item.\n   * - `ref` (`ReactRef`): A React ref that should be passed to the rendered button.\n   * - `breakpoint` (`Breakpoint`): The current breakpoint, for responsive behavior.\n   * - `ownRow` (`boolean`): Whether the button is rendered on its own row.\n   */\n  customRowActions?: (props: AttributeEditorProps.RowActionsProps<T>) => React.ReactNode;\n\n  /**\n   * Called when add button is clicked.\n   */\n  onAddButtonClick?: NonCancelableEventHandler;\n\n  /**\n   * Called when remove button is clicked.\n   * The event `detail` contains the index of the corresponding item.\n   */\n  onRemoveButtonClick?: NonCancelableEventHandler<AttributeEditorProps.RemoveButtonClickDetail>;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   */\n  i18nStrings?: AttributeEditorProps.I18nStrings<T>;\n}\n"]}

package/attribute-editor/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/attribute-editor/internal.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,6BAA6B,EAAwB,MAAM,cAAc,CAAC;AAOnF,QAAA,MAAM,uBAAuB,+BA6GK,CAAC;AAEnC,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/attribute-editor/internal.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAE,6BAA6B,EAAwB,MAAM,cAAc,CAAC;AAQnF,QAAA,MAAM,uBAAuB,+BAwJK,CAAC;AAEnC,eAAe,uBAAuB,CAAC"}

package/attribute-editor/internal.js

@@ -3,20 +3,21 @@ import { __rest } from "tslib";
 // SPDX-License-Identifier: Apache-2.0
 import React, { useImperativeHandle, useRef, useState } from 'react';
 import clsx from 'clsx';
-import InternalBox from '../box/internal';
 import { InternalButton } from '../button/internal';
 import { getBaseProps } from '../internal/base-component';
+import { matchBreakpointMapping } from '../internal/breakpoints';
 import { useContainerBreakpoints } from '../internal/hooks/container-queries';
 import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { usePrevious } from '../internal/hooks/use-previous';
 import { useUniqueId } from '../internal/hooks/use-unique-id';
 import InternalLiveRegion from '../live-region/internal';
 import { AdditionalInfo } from './additional-info';
+import { gridDefaults } from './grid-defaults';
 import { Row } from './row';
+import { getGridTemplateColumns } from './utils';
 import styles from './styles.css.js';
 const InternalAttributeEditor = React.forwardRef((_a, ref) => {
-    var { additionalInfo, disableAddButton, definition, items, isItemRemovable = () => true, empty, addButtonText, addButtonVariant = 'normal', removeButtonText, removeButtonAriaLabel, i18nStrings, onAddButtonClick, onRemoveButtonClick, __internalRootRef = null } = _a, props = __rest(_a, ["additionalInfo", "disableAddButton", "definition", "items", "isItemRemovable", "empty", "addButtonText", "addButtonVariant", "removeButtonText", "removeButtonAriaLabel", "i18nStrings", "onAddButtonClick", "onRemoveButtonClick", "__internalRootRef"]);
-    const [breakpoint, breakpointRef] = useContainerBreakpoints(['default', 'xxs', 'xs']);
+    var { additionalInfo, disableAddButton, definition = [{}], gridLayout, items, isItemRemovable = () => true, empty, addButtonText, addButtonVariant = 'normal', removeButtonText, removeButtonAriaLabel, customRowActions, i18nStrings, onAddButtonClick, onRemoveButtonClick, __internalRootRef = null } = _a, props = __rest(_a, ["additionalInfo", "disableAddButton", "definition", "gridLayout", "items", "isItemRemovable", "empty", "addButtonText", "addButtonVariant", "removeButtonText", "removeButtonAriaLabel", "customRowActions", "i18nStrings", "onAddButtonClick", "onRemoveButtonClick", "__internalRootRef"]);
     const removeButtonRefs = useRef([]);
     const addButtonRef = useRef(null);
     const wasNonEmpty = useRef(false);
@@ -34,7 +35,6 @@ const InternalAttributeEditor = React.forwardRef((_a, ref) => {
             (_a = addButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         },
     }));
-    const mergedRef = useMergeRefs(breakpointRef, __internalRootRef);
     const additionalInfoId = useUniqueId('attribute-editor-info');
     const infoAriaDescribedBy = additionalInfo ? additionalInfoId : undefined;
     const prevItemsLength = usePrevious(items.length);
@@ -48,17 +48,37 @@ const InternalAttributeEditor = React.forwardRef((_a, ref) => {
         // we only want to announce when the number of items decreases (i.e. when an item is removed)
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [items, i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.itemRemovedAriaLive]);
-    return (React.createElement("div", Object.assign({}, baseProps, { ref: mergedRef, className: clsx(baseProps.className, styles.root) }),
-        React.createElement(InternalBox, { margin: { bottom: 'l' } },
-            isEmpty && React.createElement("div", { className: clsx(styles.empty, wasNonEmpty.current && styles['empty-appear']) }, empty),
-            items.map((item, index) => (React.createElement(Row, { key: index, index: index, breakpoint: breakpoint, item: item, definition: definition, i18nStrings: i18nStrings, removable: isItemRemovable(item), removeButtonText: removeButtonText, removeButtonRefs: removeButtonRefs.current, onRemoveButtonClick: onRemoveButtonClick, removeButtonAriaLabel: removeButtonAriaLabel })))),
-        React.createElement(InternalButton, { className: styles['add-button'], disabled: disableAddButton, 
-            // Using aria-disabled="true" and tabindex="-1" instead of "disabled"
-            // because focus can be dynamically moved to this button by calling
-            // `focusAddButton()` on the ref.
-            __nativeAttributes: disableAddButton ? { tabIndex: -1 } : {}, __focusable: true, onClick: onAddButtonClick, formAction: "none", ref: addButtonRef, ariaDescribedby: infoAriaDescribedBy, variant: addButtonVariant, iconName: addButtonVariant === 'inline-link' ? 'add-plus' : undefined }, addButtonText),
-        React.createElement(InternalLiveRegion, { "data-testid": "removal-announcement", tagName: "span", hidden: true, delay: 5, key: items.length }, removalAnnouncement),
-        !!additionalInfo && React.createElement(AdditionalInfo, { id: infoAriaDescribedBy }, additionalInfo)));
+    if (!gridLayout) {
+        gridLayout = gridDefaults[definition.length];
+        if (!gridLayout) {
+            console.warn('AttributeEditor', '`gridLayout` is required for more than 6 attributes. Cannot render.');
+            gridLayout = [];
+        }
+    }
+    const gridLayoutBreakpoints = gridLayout.reduce((acc, layout) => (Object.assign(Object.assign({}, acc), { [layout.breakpoint || 'default']: layout })), {});
+    const [breakpoint, breakpointRef] = useContainerBreakpoints(Object.keys(gridLayoutBreakpoints));
+    const mergedRef = useMergeRefs(breakpointRef, __internalRootRef);
+    const gridLayoutForBreakpoint = matchBreakpointMapping(gridLayoutBreakpoints, breakpoint || 'default');
+    if (!gridLayoutForBreakpoint) {
+        console.warn('AttributeEditor', `No \`gridLayout\` entry found for breakpoint ${breakpoint}. Cannot render.`);
+        return React.createElement("div", null);
+    }
+    const totalColumnsInLayout = gridLayoutForBreakpoint.rows.reduce((total, columns) => total + columns.length, 0);
+    if (totalColumnsInLayout !== definition.length) {
+        console.warn('AttributeEditor', `Incorrect number of columns in layout (${totalColumnsInLayout}) for definition (${definition.length}). Cannot render.`);
+        return React.createElement("div", null);
+    }
+    return (React.createElement("div", Object.assign({}, baseProps, { ref: mergedRef, className: clsx(baseProps.className, styles.root), style: { gridTemplateColumns: getGridTemplateColumns(gridLayoutForBreakpoint) } }),
+        isEmpty && React.createElement("div", { className: clsx(styles.empty, wasNonEmpty.current && styles['empty-appear']) }, empty),
+        items.map((item, index) => (React.createElement(Row, { key: index, index: index, breakpoint: breakpoint, layout: gridLayoutForBreakpoint, item: item, definition: definition, i18nStrings: i18nStrings, removable: isItemRemovable(item), removeButtonText: removeButtonText, removeButtonRefs: removeButtonRefs.current, customRowActions: customRowActions, onRemoveButtonClick: onRemoveButtonClick, removeButtonAriaLabel: removeButtonAriaLabel }))),
+        React.createElement("div", { className: styles['add-row'] },
+            React.createElement(InternalButton, { className: styles['add-button'], disabled: disableAddButton, 
+                // Using aria-disabled="true" and tabindex="-1" instead of "disabled"
+                // because focus can be dynamically moved to this button by calling
+                // `focusAddButton()` on the ref.
+                __nativeAttributes: disableAddButton ? { tabIndex: -1 } : {}, __focusable: true, onClick: onAddButtonClick, formAction: "none", ref: addButtonRef, ariaDescribedby: infoAriaDescribedBy, variant: addButtonVariant, iconName: addButtonVariant === 'inline-link' ? 'add-plus' : undefined }, addButtonText),
+            React.createElement(InternalLiveRegion, { "data-testid": "removal-announcement", tagName: "span", hidden: true, delay: 5, key: items.length }, removalAnnouncement),
+            !!additionalInfo && React.createElement(AdditionalInfo, { id: infoAriaDescribedBy }, additionalInfo))));
 });
 export default InternalAttributeEditor;
 //# sourceMappingURL=internal.js.map

package/attribute-editor/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/attribute-editor/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, { useImperativeHandle, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport InternalBox from '../box/internal';\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { usePrevious } from '../internal/hooks/use-previous';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { SomeRequired } from '../internal/types';\nimport InternalLiveRegion from '../live-region/internal';\nimport { AdditionalInfo } from './additional-info';\nimport { AttributeEditorForwardRefType, AttributeEditorProps } from './interfaces';\nimport { Row } from './row';\n\nimport styles from './styles.css.js';\n\ntype InternalAttributeEditorProps<T> = SomeRequired<AttributeEditorProps<T>, 'items'> & InternalBaseComponentProps;\n\nconst InternalAttributeEditor = React.forwardRef(\n  <T,>(\n    {\n      additionalInfo,\n      disableAddButton,\n      definition,\n      items,\n      isItemRemovable = () => true,\n      empty,\n      addButtonText,\n      addButtonVariant = 'normal',\n      removeButtonText,\n      removeButtonAriaLabel,\n      i18nStrings,\n      onAddButtonClick,\n      onRemoveButtonClick,\n      __internalRootRef = null,\n      ...props\n    }: InternalAttributeEditorProps<T>,\n    ref: React.Ref<AttributeEditorProps.Ref>\n  ) => {\n    const [breakpoint, breakpointRef] = useContainerBreakpoints(['default', 'xxs', 'xs']);\n    const removeButtonRefs = useRef<Array<ButtonProps.Ref | undefined>>([]);\n    const addButtonRef = useRef<ButtonProps.Ref>(null);\n    const wasNonEmpty = useRef<boolean>(false);\n    const [removalAnnouncement, setRemovalAnnouncement] = useState<string>('');\n\n    const baseProps = getBaseProps(props);\n    const isEmpty = items && items.length === 0;\n\n    wasNonEmpty.current = wasNonEmpty.current || !isEmpty;\n\n    useImperativeHandle(ref, () => ({\n      focusRemoveButton(rowIndex: number) {\n        removeButtonRefs.current[rowIndex]?.focus();\n      },\n      focusAddButton() {\n        addButtonRef.current?.focus();\n      },\n    }));\n\n    const mergedRef = useMergeRefs(breakpointRef, __internalRootRef);\n\n    const additionalInfoId = useUniqueId('attribute-editor-info');\n    const infoAriaDescribedBy = additionalInfo ? additionalInfoId : undefined;\n\n    const prevItemsLength = usePrevious(items.length);\n\n    React.useEffect(() => {\n      if (prevItemsLength && prevItemsLength > items.length && i18nStrings?.itemRemovedAriaLive) {\n        setRemovalAnnouncement(i18nStrings.itemRemovedAriaLive);\n      } else {\n        setRemovalAnnouncement('');\n      }\n      // we only want to announce when the number of items decreases (i.e. when an item is removed)\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [items, i18nStrings?.itemRemovedAriaLive]);\n\n    return (\n      <div {...baseProps} ref={mergedRef} className={clsx(baseProps.className, styles.root)}>\n        <InternalBox margin={{ bottom: 'l' }}>\n          {isEmpty && <div className={clsx(styles.empty, wasNonEmpty.current && styles['empty-appear'])}>{empty}</div>}\n          {items.map((item, index) => (\n            <Row<T>\n              key={index}\n              index={index}\n              breakpoint={breakpoint}\n              item={item}\n              definition={definition}\n              i18nStrings={i18nStrings}\n              removable={isItemRemovable(item)}\n              removeButtonText={removeButtonText}\n              removeButtonRefs={removeButtonRefs.current}\n              onRemoveButtonClick={onRemoveButtonClick}\n              removeButtonAriaLabel={removeButtonAriaLabel}\n            />\n          ))}\n        </InternalBox>\n\n        <InternalButton\n          className={styles['add-button']}\n          disabled={disableAddButton}\n          // Using aria-disabled=\"true\" and tabindex=\"-1\" instead of \"disabled\"\n          // because focus can be dynamically moved to this button by calling\n          // `focusAddButton()` on the ref.\n          __nativeAttributes={disableAddButton ? { tabIndex: -1 } : {}}\n          __focusable={true}\n          onClick={onAddButtonClick}\n          formAction=\"none\"\n          ref={addButtonRef}\n          ariaDescribedby={infoAriaDescribedBy}\n          variant={addButtonVariant}\n          iconName={addButtonVariant === 'inline-link' ? 'add-plus' : undefined}\n        >\n          {addButtonText}\n        </InternalButton>\n        <InternalLiveRegion\n          data-testid=\"removal-announcement\"\n          tagName=\"span\"\n          hidden={true}\n          delay={5}\n          key={items.length}\n        >\n          {removalAnnouncement}\n        </InternalLiveRegion>\n        {!!additionalInfo && <AdditionalInfo id={infoAriaDescribedBy}>{additionalInfo}</AdditionalInfo>}\n      </div>\n    );\n  }\n) as AttributeEditorForwardRefType;\n\nexport default InternalAttributeEditor;\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/attribute-editor/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,mBAAmB,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAE9E,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAE9D,OAAO,kBAAkB,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEjD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,uBAAuB,GAAG,KAAK,CAAC,UAAU,CAC9C,CACE,EAkBkC,EAClC,GAAwC,EACxC,EAAE;QApBF,EACE,cAAc,EACd,gBAAgB,EAChB,UAAU,GAAG,CAAC,EAAE,CAAC,EACjB,UAAU,EACV,KAAK,EACL,eAAe,GAAG,GAAG,EAAE,CAAC,IAAI,EAC5B,KAAK,EACL,aAAa,EACb,gBAAgB,GAAG,QAAQ,EAC3B,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,mBAAmB,EACnB,iBAAiB,GAAG,IAAI,OAEQ,EAD7B,KAAK,cAjBV,4RAkBC,CADS;IAIV,MAAM,gBAAgB,GAAG,MAAM,CAAqC,EAAE,CAAC,CAAC;IACxE,MAAM,YAAY,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IACnD,MAAM,WAAW,GAAG,MAAM,CAAU,KAAK,CAAC,CAAC;IAC3C,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IAE3E,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,OAAO,GAAG,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC;IAE5C,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,OAAO,IAAI,CAAC,OAAO,CAAC;IAEtD,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B,iBAAiB,CAAC,QAAgB;;YAChC,MAAA,gBAAgB,CAAC,OAAO,CAAC,QAAQ,CAAC,0CAAE,KAAK,EAAE,CAAC;QAC9C,CAAC;QACD,cAAc;;YACZ,MAAA,YAAY,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;QAChC,CAAC;KACF,CAAC,CAAC,CAAC;IAEJ,MAAM,gBAAgB,GAAG,WAAW,CAAC,uBAAuB,CAAC,CAAC;IAC9D,MAAM,mBAAmB,GAAG,cAAc,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC;IAE1E,MAAM,eAAe,GAAG,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAElD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,eAAe,IAAI,eAAe,GAAG,KAAK,CAAC,MAAM,KAAI,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,mBAAmB,CAAA,EAAE;YACzF,sBAAsB,CAAC,WAAW,CAAC,mBAAmB,CAAC,CAAC;SACzD;aAAM;YACL,sBAAsB,CAAC,EAAE,CAAC,CAAC;SAC5B;QACD,6FAA6F;QAC7F,uDAAuD;IACzD,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,mBAAmB,CAAC,CAAC,CAAC;IAE9C,IAAI,CAAC,UAAU,EAAE;QACf,UAAU,GAAG,YAAY,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QAC7C,IAAI,CAAC,UAAU,EAAE;YACf,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,qEAAqE,CAAC,CAAC;YACvG,UAAU,GAAG,EAAE,CAAC;SACjB;KACF;IAED,MAAM,qBAAqB,GAAG,UAAU,CAAC,MAAM,CAC7C,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,CAAC,iCACZ,GAAG,KACN,CAAC,MAAM,CAAC,UAAU,IAAI,SAAS,CAAC,EAAE,MAAM,IACxC,EACF,EAA8E,CAC/E,CAAC;IAEF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,uBAAuB,CACzD,MAAM,CAAC,IAAI,CAAC,qBAAqB,CAAsC,CACxE,CAAC;IACF,MAAM,SAAS,GAAG,YAAY,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC;IAEjE,MAAM,uBAAuB,GAAG,sBAAsB,CAAC,qBAAqB,EAAE,UAAU,IAAI,SAAS,CAAC,CAAC;IAEvG,IAAI,CAAC,uBAAuB,EAAE;QAC5B,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,gDAAgD,UAAU,kBAAkB,CAAC,CAAC;QAC9G,OAAO,gCAAO,CAAC;KAChB;IAED,MAAM,oBAAoB,GAAG,uBAAuB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,OAAO,EAAE,EAAE,CAAC,KAAK,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;IAChH,IAAI,oBAAoB,KAAK,UAAU,CAAC,MAAM,EAAE;QAC9C,OAAO,CAAC,IAAI,CACV,iBAAiB,EACjB,0CAA0C,oBAAoB,qBAAqB,UAAU,CAAC,MAAM,mBAAmB,CACxH,CAAC;QACF,OAAO,gCAAO,CAAC;KAChB;IAED,OAAO,CACL,6CACM,SAAS,IACb,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,EACjD,KAAK,EAAE,EAAE,mBAAmB,EAAE,sBAAsB,CAAC,uBAAuB,CAAC,EAAE;QAE9E,OAAO,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,WAAW,CAAC,OAAO,IAAI,MAAM,CAAC,cAAc,CAAC,CAAC,IAAG,KAAK,CAAO;QAC3G,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,oBAAC,GAAG,IACF,GAAG,EAAE,KAAK,EACV,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,uBAAuB,EAC/B,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,EAChC,gBAAgB,EAAE,gBAAgB,EAClC,gBAAgB,EAAE,gBAAgB,CAAC,OAAO,EAC1C,gBAAgB,EAAE,gBAAgB,EAClC,mBAAmB,EAAE,mBAAmB,EACxC,qBAAqB,EAAE,qBAAqB,GAC5C,CACH,CAAC;QAEF,6BAAK,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC;YAC/B,oBAAC,cAAc,IACb,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,EAC/B,QAAQ,EAAE,gBAAgB;gBAC1B,qEAAqE;gBACrE,mEAAmE;gBACnE,iCAAiC;gBACjC,kBAAkB,EAAE,gBAAgB,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAC5D,WAAW,EAAE,IAAI,EACjB,OAAO,EAAE,gBAAgB,EACzB,UAAU,EAAC,MAAM,EACjB,GAAG,EAAE,YAAY,EACjB,eAAe,EAAE,mBAAmB,EACpC,OAAO,EAAE,gBAAgB,EACzB,QAAQ,EAAE,gBAAgB,KAAK,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,IAEpE,aAAa,CACC;YACjB,oBAAC,kBAAkB,mBACL,sBAAsB,EAClC,OAAO,EAAC,MAAM,EACd,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,CAAC,EACR,GAAG,EAAE,KAAK,CAAC,MAAM,IAEhB,mBAAmB,CACD;YACpB,CAAC,CAAC,cAAc,IAAI,oBAAC,cAAc,IAAC,EAAE,EAAE,mBAAmB,IAAG,cAAc,CAAkB,CAC3F,CACF,CACP,CAAC;AACJ,CAAC,CAC+B,CAAC;AAEnC,eAAe,uBAAuB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useImperativeHandle, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { matchBreakpointMapping } from '../internal/breakpoints';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { usePrevious } from '../internal/hooks/use-previous';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { SomeRequired } from '../internal/types';\nimport InternalLiveRegion from '../live-region/internal';\nimport { AdditionalInfo } from './additional-info';\nimport { gridDefaults } from './grid-defaults';\nimport { AttributeEditorForwardRefType, AttributeEditorProps } from './interfaces';\nimport { Row } from './row';\nimport { getGridTemplateColumns } from './utils';\n\nimport styles from './styles.css.js';\n\ntype InternalAttributeEditorProps<T> = SomeRequired<AttributeEditorProps<T>, 'items'> & InternalBaseComponentProps;\n\nconst InternalAttributeEditor = React.forwardRef(\n  <T,>(\n    {\n      additionalInfo,\n      disableAddButton,\n      definition = [{}],\n      gridLayout,\n      items,\n      isItemRemovable = () => true,\n      empty,\n      addButtonText,\n      addButtonVariant = 'normal',\n      removeButtonText,\n      removeButtonAriaLabel,\n      customRowActions,\n      i18nStrings,\n      onAddButtonClick,\n      onRemoveButtonClick,\n      __internalRootRef = null,\n      ...props\n    }: InternalAttributeEditorProps<T>,\n    ref: React.Ref<AttributeEditorProps.Ref>\n  ) => {\n    const removeButtonRefs = useRef<Array<ButtonProps.Ref | undefined>>([]);\n    const addButtonRef = useRef<ButtonProps.Ref>(null);\n    const wasNonEmpty = useRef<boolean>(false);\n    const [removalAnnouncement, setRemovalAnnouncement] = useState<string>('');\n\n    const baseProps = getBaseProps(props);\n    const isEmpty = items && items.length === 0;\n\n    wasNonEmpty.current = wasNonEmpty.current || !isEmpty;\n\n    useImperativeHandle(ref, () => ({\n      focusRemoveButton(rowIndex: number) {\n        removeButtonRefs.current[rowIndex]?.focus();\n      },\n      focusAddButton() {\n        addButtonRef.current?.focus();\n      },\n    }));\n\n    const additionalInfoId = useUniqueId('attribute-editor-info');\n    const infoAriaDescribedBy = additionalInfo ? additionalInfoId : undefined;\n\n    const prevItemsLength = usePrevious(items.length);\n\n    React.useEffect(() => {\n      if (prevItemsLength && prevItemsLength > items.length && i18nStrings?.itemRemovedAriaLive) {\n        setRemovalAnnouncement(i18nStrings.itemRemovedAriaLive);\n      } else {\n        setRemovalAnnouncement('');\n      }\n      // we only want to announce when the number of items decreases (i.e. when an item is removed)\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [items, i18nStrings?.itemRemovedAriaLive]);\n\n    if (!gridLayout) {\n      gridLayout = gridDefaults[definition.length];\n      if (!gridLayout) {\n        console.warn('AttributeEditor', '`gridLayout` is required for more than 6 attributes. Cannot render.');\n        gridLayout = [];\n      }\n    }\n\n    const gridLayoutBreakpoints = gridLayout.reduce(\n      (acc, layout) => ({\n        ...acc,\n        [layout.breakpoint || 'default']: layout,\n      }),\n      {} as Record<AttributeEditorProps.Breakpoint, AttributeEditorProps.GridLayout>\n    );\n\n    const [breakpoint, breakpointRef] = useContainerBreakpoints(\n      Object.keys(gridLayoutBreakpoints) as AttributeEditorProps.Breakpoint[]\n    );\n    const mergedRef = useMergeRefs(breakpointRef, __internalRootRef);\n\n    const gridLayoutForBreakpoint = matchBreakpointMapping(gridLayoutBreakpoints, breakpoint || 'default');\n\n    if (!gridLayoutForBreakpoint) {\n      console.warn('AttributeEditor', `No \\`gridLayout\\` entry found for breakpoint ${breakpoint}. Cannot render.`);\n      return <div />;\n    }\n\n    const totalColumnsInLayout = gridLayoutForBreakpoint.rows.reduce((total, columns) => total + columns.length, 0);\n    if (totalColumnsInLayout !== definition.length) {\n      console.warn(\n        'AttributeEditor',\n        `Incorrect number of columns in layout (${totalColumnsInLayout}) for definition (${definition.length}). Cannot render.`\n      );\n      return <div />;\n    }\n\n    return (\n      <div\n        {...baseProps}\n        ref={mergedRef}\n        className={clsx(baseProps.className, styles.root)}\n        style={{ gridTemplateColumns: getGridTemplateColumns(gridLayoutForBreakpoint) }}\n      >\n        {isEmpty && <div className={clsx(styles.empty, wasNonEmpty.current && styles['empty-appear'])}>{empty}</div>}\n        {items.map((item, index) => (\n          <Row<T>\n            key={index}\n            index={index}\n            breakpoint={breakpoint}\n            layout={gridLayoutForBreakpoint}\n            item={item}\n            definition={definition}\n            i18nStrings={i18nStrings}\n            removable={isItemRemovable(item)}\n            removeButtonText={removeButtonText}\n            removeButtonRefs={removeButtonRefs.current}\n            customRowActions={customRowActions}\n            onRemoveButtonClick={onRemoveButtonClick}\n            removeButtonAriaLabel={removeButtonAriaLabel}\n          />\n        ))}\n\n        <div className={styles['add-row']}>\n          <InternalButton\n            className={styles['add-button']}\n            disabled={disableAddButton}\n            // Using aria-disabled=\"true\" and tabindex=\"-1\" instead of \"disabled\"\n            // because focus can be dynamically moved to this button by calling\n            // `focusAddButton()` on the ref.\n            __nativeAttributes={disableAddButton ? { tabIndex: -1 } : {}}\n            __focusable={true}\n            onClick={onAddButtonClick}\n            formAction=\"none\"\n            ref={addButtonRef}\n            ariaDescribedby={infoAriaDescribedBy}\n            variant={addButtonVariant}\n            iconName={addButtonVariant === 'inline-link' ? 'add-plus' : undefined}\n          >\n            {addButtonText}\n          </InternalButton>\n          <InternalLiveRegion\n            data-testid=\"removal-announcement\"\n            tagName=\"span\"\n            hidden={true}\n            delay={5}\n            key={items.length}\n          >\n            {removalAnnouncement}\n          </InternalLiveRegion>\n          {!!additionalInfo && <AdditionalInfo id={infoAriaDescribedBy}>{additionalInfo}</AdditionalInfo>}\n        </div>\n      </div>\n    );\n  }\n) as AttributeEditorForwardRefType;\n\nexport default InternalAttributeEditor;\n"]}

package/attribute-editor/row.d.ts

@@ -1,10 +1,11 @@
-/// <reference types="react" />
+import React from 'react';
 import { ButtonProps } from '../button/interfaces';
-import { ColumnLayoutBreakpoint } from '../column-layout/internal';
+import { Breakpoint } from '../internal/breakpoints';
 import { NonCancelableEventHandler } from '../internal/events';
 import { AttributeEditorProps } from './interfaces';
 interface RowProps<T> {
-    breakpoint: ColumnLayoutBreakpoint | null;
+    breakpoint: Breakpoint | null;
+    layout: AttributeEditorProps.GridLayout;
     item: T;
     definition: ReadonlyArray<AttributeEditorProps.FieldDefinition<T>>;
     i18nStrings: AttributeEditorProps.I18nStrings | undefined;
@@ -12,6 +13,7 @@ interface RowProps<T> {
     removable: boolean;
     removeButtonText?: string;
     removeButtonRefs: Array<ButtonProps.Ref | undefined>;
+    customRowActions?: (props: AttributeEditorProps.RowActionsProps<T>) => React.ReactNode;
     onRemoveButtonClick?: NonCancelableEventHandler<AttributeEditorProps.RemoveButtonClickDetail>;
     removeButtonAriaLabel?: (item: T) => string;
 }

package/attribute-editor/row.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"row.d.ts","sourceRoot":"","sources":["../../../src/attribute-editor/row.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,OAA6B,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAIzF,OAAO,EAA0B,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAEvF,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAMpD,UAAU,QAAQ,CAAC,CAAC;IAClB,UAAU,EAAE,sBAAsB,GAAG,IAAI,CAAC;IAC1C,IAAI,EAAE,CAAC,CAAC;IACR,UAAU,EAAE,aAAa,CAAC,oBAAoB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IACnE,WAAW,EAAE,oBAAoB,CAAC,WAAW,GAAG,SAAS,CAAC;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,EAAE,KAAK,CAAC,WAAW,CAAC,GAAG,GAAG,SAAS,CAAC,CAAC;IACrD,mBAAmB,CAAC,EAAE,yBAAyB,CAAC,oBAAoB,CAAC,uBAAuB,CAAC,CAAC;IAC9F,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;CAC7C;AAmBD,eAAO,MAAM,GAAG,6BAiFgB,WAAW,CAAC"}
+{"version":3,"file":"row.d.ts","sourceRoot":"","sources":["../../../src/attribute-editor/row.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAG3C,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAInD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAA0B,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAEvF,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAKpD,UAAU,QAAQ,CAAC,CAAC;IAClB,UAAU,EAAE,UAAU,GAAG,IAAI,CAAC;IAC9B,MAAM,EAAE,oBAAoB,CAAC,UAAU,CAAC;IACxC,IAAI,EAAE,CAAC,CAAC;IACR,UAAU,EAAE,aAAa,CAAC,oBAAoB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IACnE,WAAW,EAAE,oBAAoB,CAAC,WAAW,GAAG,SAAS,CAAC;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,EAAE,KAAK,CAAC,WAAW,CAAC,GAAG,GAAG,SAAS,CAAC,CAAC;IACrD,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACvF,mBAAmB,CAAC,EAAE,yBAAyB,CAAC,oBAAoB,CAAC,uBAAuB,CAAC,CAAC;IAC9F,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;CAC7C;AAiBD,eAAO,MAAM,GAAG,6BA+FgB,WAAW,CAAC"}