@cloudscape-design/components 3.0.874 → 3.0.876

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":"AAIA,MAAM,CAAC,MAAM,YAAY,GAAsD;IAC7E,CAAC,EAAE;QACD;YACE,UAAU,EAAE,KAAK;YACjB,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;SACZ;QACD;YACE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;YACX,YAAY,EAAE;gBACZ,MAAM,EAAE,IAAI;aACb;SACF;KACF;IACD,CAAC,EAAE;QACD;YACE,UAAU,EAAE,IAAI;YAChB,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YACd,YAAY,EAAE;gBACZ,KAAK,EAAE,CAAC;aACT;SACF;QACD;YACE,UAAU,EAAE,KAAK;YACjB,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YACd,YAAY,EAAE;gBACZ,MAAM,EAAE,IAAI;aACb;SACF;QACD;YACE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;SACjB;KACF;IACD,CAAC,EAAE;QACD;YACE,UAAU,EAAE,IAAI;YAChB,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;YACjB,YAAY,EAAE;gBACZ,KAAK,EAAE,CAAC;aACT;SACF;QACD;YACE,UAAU,EAAE,KAAK;YACjB,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;YACnB,YAAY,EAAE;gBACZ,MAAM,EAAE,IAAI;aACb;SACF;QACD;YACE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;SACtB;KACF;IACD,CAAC,EAAE;QACD;YACE,UAAU,EAAE,IAAI;YAChB,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;YACpB,YAAY,EAAE;gBACZ,KAAK,EAAE,CAAC;aACT;SACF;QACD;YACE,UAAU,EAAE,KAAK;YACjB,IAAI,EAAE;gBACJ,CAAC,CAAC,EAAE,CAAC,CAAC;gBACN,CAAC,CAAC,EAAE,CAAC,CAAC;aACP;SACF;QACD;YACE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;SAC3B;KACF;IACD,CAAC,EAAE;QACD;YACE,UAAU,EAAE,GAAG;YACf,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;YACvB,YAAY,EAAE;gBACZ,KAAK,EAAE,CAAC;aACT;SACF;QACD;YACE,UAAU,EAAE,IAAI;YAChB,IAAI,EAAE;gBACJ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;gBACT,CAAC,CAAC,EAAE,CAAC,CAAC;aACP;SACF;QACD;YACE,UAAU,EAAE,KAAK;YACjB,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;SAC5B;QACD;YACE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;SAChC;KACF;IACD,CAAC,EAAE;QACD;YACE,UAAU,EAAE,GAAG;YACf,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;YAC1B,YAAY,EAAE;gBACZ,KAAK,EAAE,CAAC;aACT;SACF;QACD;YACE,UAAU,EAAE,IAAI;YAChB,IAAI,EAAE;gBACJ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;gBACT,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;aACV;SACF;QACD;YACE,UAAU,EAAE,KAAK;YACjB,IAAI,EAAE;gBACJ,CAAC,CAAC,EAAE,CAAC,CAAC;gBACN,CAAC,CAAC,EAAE,CAAC,CAAC;gBACN,CAAC,CAAC,EAAE,CAAC,CAAC;aACP;SACF;QACD;YACE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;SACrC;KACF;CACF,CAAC","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":"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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 { 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"}

package/attribute-editor/row.js

@@ -2,16 +2,13 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { useCallback } from 'react';
 import clsx from 'clsx';
-import InternalBox from '../box/internal';
 import { InternalButton } from '../button/internal';
-import InternalColumnLayout from '../column-layout/internal';
 import InternalFormField from '../form-field/internal';
-import InternalGrid from '../grid/internal';
 import { useInternalI18n } from '../i18n/context';
 import { fireNonCancelableEvent } from '../internal/events';
 import { useUniqueId } from '../internal/hooks/use-unique-id';
+import { getItemGridColumns, getRemoveButtonGridColumns, isRemoveButtonOnSameLine } from './utils';
 import styles from './styles.css.js';
-const Divider = () => React.createElement(InternalBox, { className: styles.divider, padding: { top: 'l' } });
 function render(item, itemIndex, slot) {
     if (isSlotFunction(slot)) {
         return slot(item, itemIndex);
@@ -21,33 +18,39 @@ function render(item, itemIndex, slot) {
         return typeof slot === 'function';
     }
 }
-const GRID_DEFINITION = [{ colspan: { default: 12, xs: 9 } }];
-const REMOVABLE_GRID_DEFINITION = [{ colspan: { default: 12, xs: 9 } }, { colspan: { default: 12, xs: 3 } }];
-export const Row = React.memo(({ breakpoint, item, definition, i18nStrings = {}, index, removable, removeButtonText, removeButtonRefs, onRemoveButtonClick, removeButtonAriaLabel, }) => {
+export const Row = React.memo(({ breakpoint, item, definition, layout, i18nStrings = {}, index, removable, removeButtonText, removeButtonRefs, customRowActions, onRemoveButtonClick, removeButtonAriaLabel, }) => {
     var _a;
     const i18n = useInternalI18n('attribute-editor');
-    const isNarrowViewport = breakpoint === 'default' || breakpoint === 'xxs';
-    const isWideViewport = !isNarrowViewport;
     const handleRemoveClick = useCallback(() => {
         fireNonCancelableEvent(onRemoveButtonClick, { itemIndex: index });
     }, [onRemoveButtonClick, index]);
     const firstControlId = useUniqueId('first-control-id-');
-    return (React.createElement(InternalBox, { className: styles.row, margin: { bottom: 's' } },
-        React.createElement("div", { role: "group", "aria-labelledby": `${firstControlId}-label ${firstControlId}` },
-            React.createElement(InternalGrid, { __breakpoint: breakpoint, gridDefinition: removable ? REMOVABLE_GRID_DEFINITION : GRID_DEFINITION },
-                React.createElement(InternalColumnLayout, { className: styles['row-control'], columns: definition.length, __breakpoint: breakpoint }, definition.map(({ info, label, constraintText, errorText, warningText, control }, defIndex) => (React.createElement(InternalFormField, { key: defIndex, className: styles.field, label: label, info: info, constraintText: render(item, index, constraintText), errorText: render(item, index, errorText), warningText: render(item, index, warningText), stretch: true, i18nStrings: {
-                        errorIconAriaLabel: i18nStrings.errorIconAriaLabel,
-                        warningIconAriaLabel: i18nStrings.warningIconAriaLabel,
-                    }, __hideLabel: isWideViewport && index > 0, controlId: defIndex === 0 ? firstControlId : undefined }, render(item, index, control))))),
-                removable && (React.createElement(ButtonContainer, { index: index, isNarrowViewport: isNarrowViewport, hasLabel: definition.some(row => row.label) },
-                    React.createElement(InternalButton, { className: styles['remove-button'], formAction: "none", ref: ref => {
-                            removeButtonRefs[index] = ref !== null && ref !== void 0 ? ref : undefined;
-                        }, ariaLabel: (_a = (removeButtonAriaLabel !== null && removeButtonAriaLabel !== void 0 ? removeButtonAriaLabel : i18nStrings.removeButtonAriaLabel)) === null || _a === void 0 ? void 0 : _a(item), onClick: handleRemoveClick }, i18n('removeButtonText', removeButtonText)))))),
-        isNarrowViewport && React.createElement(Divider, null)));
+    const buttonRef = (ref) => {
+        removeButtonRefs[index] = ref !== null && ref !== void 0 ? ref : undefined;
+    };
+    let gridColumnStart = 1;
+    let gridColumnEnd = 1;
+    const removeButtonOnSameLine = isRemoveButtonOnSameLine(layout);
+    const customActions = customRowActions === null || customRowActions === void 0 ? void 0 : customRowActions({
+        item,
+        itemIndex: index,
+        ref: buttonRef,
+        breakpoint,
+        ownRow: !removeButtonOnSameLine,
+    });
+    return (React.createElement("div", { className: clsx(styles.row, layout.rows.length === 1 && styles['single-row']), role: "group", "aria-labelledby": `${firstControlId}-label ${firstControlId}` },
+        definition.map(({ info, label, constraintText, errorText, warningText, control }, defIndex) => {
+            ({ gridColumnStart, gridColumnEnd } = getItemGridColumns(layout, defIndex));
+            return (React.createElement(InternalFormField, { key: defIndex, className: styles.field, __style: { gridColumnStart, gridColumnEnd }, label: label, info: info, constraintText: render(item, index, constraintText), errorText: render(item, index, errorText), warningText: render(item, index, warningText), stretch: true, i18nStrings: {
+                    errorIconAriaLabel: i18nStrings.errorIconAriaLabel,
+                    warningIconAriaLabel: i18nStrings.warningIconAriaLabel,
+                }, __hideLabel: index !== 0 && removeButtonOnSameLine, controlId: defIndex === 0 ? firstControlId : undefined }, render(item, index, control)));
+        }),
+        React.createElement("div", { className: clsx(styles['remove-button-container'], {
+                [styles['remove-button-field-padding']]: removeButtonOnSameLine && index === 0,
+                [styles['remove-button-own-row']]: !removeButtonOnSameLine,
+            }), style: Object.assign({}, getRemoveButtonGridColumns(layout, gridColumnEnd)) }, removable &&
+            (customActions !== undefined ? (customActions) : (React.createElement(InternalButton, { className: styles['remove-button'], formAction: "none", ref: buttonRef, ariaLabel: (_a = (removeButtonAriaLabel !== null && removeButtonAriaLabel !== void 0 ? removeButtonAriaLabel : i18nStrings.removeButtonAriaLabel)) === null || _a === void 0 ? void 0 : _a(item), onClick: handleRemoveClick }, i18n('removeButtonText', removeButtonText))))),
+        !removeButtonOnSameLine && React.createElement("div", { className: styles.divider })));
 });
-const ButtonContainer = ({ index, children, isNarrowViewport, hasLabel }) => (React.createElement("div", { className: clsx({
-        [styles['button-container-haslabel']]: !isNarrowViewport && index === 0 && hasLabel,
-        [styles['button-container-nolabel']]: !isNarrowViewport && index === 0 && !hasLabel,
-        [styles['right-align']]: isNarrowViewport,
-    }) }, children));
 //# sourceMappingURL=row.js.map

package/attribute-editor/row.js.map

@@ -1 +1 @@
-{"version":3,"file":"row.js","sourceRoot":"","sources":["../../../src/attribute-editor/row.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback } from 'react';\nimport clsx from 'clsx';\n\nimport InternalBox from '../box/internal';\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\nimport InternalColumnLayout, { ColumnLayoutBreakpoint } from '../column-layout/internal';\nimport InternalFormField from '../form-field/internal';\nimport InternalGrid from '../grid/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { AttributeEditorProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\nconst Divider = () => <InternalBox className={styles.divider} padding={{ top: 'l' }} />;\n\ninterface RowProps<T> {\n  breakpoint: ColumnLayoutBreakpoint | null;\n  item: T;\n  definition: ReadonlyArray<AttributeEditorProps.FieldDefinition<T>>;\n  i18nStrings: AttributeEditorProps.I18nStrings | undefined;\n  index: number;\n  removable: boolean;\n  removeButtonText?: string;\n  removeButtonRefs: Array<ButtonProps.Ref | undefined>;\n  onRemoveButtonClick?: NonCancelableEventHandler<AttributeEditorProps.RemoveButtonClickDetail>;\n  removeButtonAriaLabel?: (item: T) => string;\n}\n\nfunction render<T>(\n  item: T,\n  itemIndex: number,\n  slot: AttributeEditorProps.FieldRenderable<T> | React.ReactNode | undefined\n) {\n  if (isSlotFunction(slot)) {\n    return slot(item, itemIndex);\n  }\n  return slot;\n\n  function isSlotFunction(slot: unknown): slot is AttributeEditorProps.FieldRenderable<T> {\n    return typeof slot === 'function';\n  }\n}\n\nconst GRID_DEFINITION = [{ colspan: { default: 12, xs: 9 } }];\nconst REMOVABLE_GRID_DEFINITION = [{ colspan: { default: 12, xs: 9 } }, { colspan: { default: 12, xs: 3 } }];\nexport const Row = React.memo(\n  <T,>({\n    breakpoint,\n    item,\n    definition,\n    i18nStrings = {},\n    index,\n    removable,\n    removeButtonText,\n    removeButtonRefs,\n    onRemoveButtonClick,\n    removeButtonAriaLabel,\n  }: RowProps<T>) => {\n    const i18n = useInternalI18n('attribute-editor');\n    const isNarrowViewport = breakpoint === 'default' || breakpoint === 'xxs';\n    const isWideViewport = !isNarrowViewport;\n\n    const handleRemoveClick = useCallback(() => {\n      fireNonCancelableEvent(onRemoveButtonClick, { itemIndex: index });\n    }, [onRemoveButtonClick, index]);\n\n    const firstControlId = useUniqueId('first-control-id-');\n\n    return (\n      <InternalBox className={styles.row} margin={{ bottom: 's' }}>\n        <div role=\"group\" aria-labelledby={`${firstControlId}-label ${firstControlId}`}>\n          <InternalGrid\n            __breakpoint={breakpoint}\n            gridDefinition={removable ? REMOVABLE_GRID_DEFINITION : GRID_DEFINITION}\n          >\n            <InternalColumnLayout\n              className={styles['row-control']}\n              columns={definition.length}\n              __breakpoint={breakpoint}\n            >\n              {definition.map(({ info, label, constraintText, errorText, warningText, control }, defIndex) => (\n                <InternalFormField\n                  key={defIndex}\n                  className={styles.field}\n                  label={label}\n                  info={info}\n                  constraintText={render(item, index, constraintText)}\n                  errorText={render(item, index, errorText)}\n                  warningText={render(item, index, warningText)}\n                  stretch={true}\n                  i18nStrings={{\n                    errorIconAriaLabel: i18nStrings.errorIconAriaLabel,\n                    warningIconAriaLabel: i18nStrings.warningIconAriaLabel,\n                  }}\n                  __hideLabel={isWideViewport && index > 0}\n                  controlId={defIndex === 0 ? firstControlId : undefined}\n                >\n                  {render(item, index, control)}\n                </InternalFormField>\n              ))}\n            </InternalColumnLayout>\n            {removable && (\n              <ButtonContainer\n                index={index}\n                isNarrowViewport={isNarrowViewport}\n                hasLabel={definition.some(row => row.label)}\n              >\n                <InternalButton\n                  className={styles['remove-button']}\n                  formAction=\"none\"\n                  ref={ref => {\n                    removeButtonRefs[index] = ref ?? undefined;\n                  }}\n                  ariaLabel={(removeButtonAriaLabel ?? i18nStrings.removeButtonAriaLabel)?.(item)}\n                  onClick={handleRemoveClick}\n                >\n                  {i18n('removeButtonText', removeButtonText)}\n                </InternalButton>\n              </ButtonContainer>\n            )}\n          </InternalGrid>\n        </div>\n        {isNarrowViewport && <Divider />}\n      </InternalBox>\n    );\n  }\n) as <T>(props: RowProps<T>) => JSX.Element;\n\ninterface ButtonContainer {\n  index: number;\n  children: React.ReactNode;\n  isNarrowViewport: boolean;\n  hasLabel: boolean;\n}\n\nconst ButtonContainer = ({ index, children, isNarrowViewport, hasLabel }: ButtonContainer) => (\n  <div\n    className={clsx({\n      [styles['button-container-haslabel']]: !isNarrowViewport && index === 0 && hasLabel,\n      [styles['button-container-nolabel']]: !isNarrowViewport && index === 0 && !hasLabel,\n      [styles['right-align']]: isNarrowViewport,\n    })}\n  >\n    {children}\n  </div>\n);\n"]}
+{"version":3,"file":"row.js","sourceRoot":"","sources":["../../../src/attribute-editor/row.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback } from 'react';\nimport clsx from 'clsx';\n\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\nimport InternalFormField from '../form-field/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport { Breakpoint } from '../internal/breakpoints';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { AttributeEditorProps } from './interfaces';\nimport { getItemGridColumns, getRemoveButtonGridColumns, isRemoveButtonOnSameLine } from './utils';\n\nimport styles from './styles.css.js';\n\ninterface RowProps<T> {\n  breakpoint: Breakpoint | null;\n  layout: AttributeEditorProps.GridLayout;\n  item: T;\n  definition: ReadonlyArray<AttributeEditorProps.FieldDefinition<T>>;\n  i18nStrings: AttributeEditorProps.I18nStrings | undefined;\n  index: number;\n  removable: boolean;\n  removeButtonText?: string;\n  removeButtonRefs: Array<ButtonProps.Ref | undefined>;\n  customRowActions?: (props: AttributeEditorProps.RowActionsProps<T>) => React.ReactNode;\n  onRemoveButtonClick?: NonCancelableEventHandler<AttributeEditorProps.RemoveButtonClickDetail>;\n  removeButtonAriaLabel?: (item: T) => string;\n}\n\nfunction render<T>(\n  item: T,\n  itemIndex: number,\n  slot: AttributeEditorProps.FieldRenderable<T> | React.ReactNode | undefined\n) {\n  if (isSlotFunction(slot)) {\n    return slot(item, itemIndex);\n  }\n  return slot;\n\n  function isSlotFunction(slot: unknown): slot is AttributeEditorProps.FieldRenderable<T> {\n    return typeof slot === 'function';\n  }\n}\n\nexport const Row = React.memo(\n  <T,>({\n    breakpoint,\n    item,\n    definition,\n    layout,\n    i18nStrings = {},\n    index,\n    removable,\n    removeButtonText,\n    removeButtonRefs,\n    customRowActions,\n    onRemoveButtonClick,\n    removeButtonAriaLabel,\n  }: RowProps<T>) => {\n    const i18n = useInternalI18n('attribute-editor');\n\n    const handleRemoveClick = useCallback(() => {\n      fireNonCancelableEvent(onRemoveButtonClick, { itemIndex: index });\n    }, [onRemoveButtonClick, index]);\n\n    const firstControlId = useUniqueId('first-control-id-');\n\n    const buttonRef = (ref: ButtonProps.Ref | null) => {\n      removeButtonRefs[index] = ref ?? undefined;\n    };\n\n    let gridColumnStart = 1;\n    let gridColumnEnd = 1;\n    const removeButtonOnSameLine = isRemoveButtonOnSameLine(layout);\n\n    const customActions = customRowActions?.({\n      item,\n      itemIndex: index,\n      ref: buttonRef,\n      breakpoint,\n      ownRow: !removeButtonOnSameLine,\n    });\n\n    return (\n      <div\n        className={clsx(styles.row, layout.rows.length === 1 && styles['single-row'])}\n        role=\"group\"\n        aria-labelledby={`${firstControlId}-label ${firstControlId}`}\n      >\n        {definition.map(({ info, label, constraintText, errorText, warningText, control }, defIndex) => {\n          ({ gridColumnStart, gridColumnEnd } = getItemGridColumns(layout, defIndex));\n          return (\n            <InternalFormField\n              key={defIndex}\n              className={styles.field}\n              __style={{ gridColumnStart, gridColumnEnd }}\n              label={label}\n              info={info}\n              constraintText={render(item, index, constraintText)}\n              errorText={render(item, index, errorText)}\n              warningText={render(item, index, warningText)}\n              stretch={true}\n              i18nStrings={{\n                errorIconAriaLabel: i18nStrings.errorIconAriaLabel,\n                warningIconAriaLabel: i18nStrings.warningIconAriaLabel,\n              }}\n              __hideLabel={index !== 0 && removeButtonOnSameLine}\n              controlId={defIndex === 0 ? firstControlId : undefined}\n            >\n              {render(item, index, control)}\n            </InternalFormField>\n          );\n        })}\n        <div\n          className={clsx(styles['remove-button-container'], {\n            [styles['remove-button-field-padding']]: removeButtonOnSameLine && index === 0,\n            [styles['remove-button-own-row']]: !removeButtonOnSameLine,\n          })}\n          style={{ ...getRemoveButtonGridColumns(layout, gridColumnEnd) }}\n        >\n          {removable &&\n            (customActions !== undefined ? (\n              customActions\n            ) : (\n              <InternalButton\n                className={styles['remove-button']}\n                formAction=\"none\"\n                ref={buttonRef}\n                ariaLabel={(removeButtonAriaLabel ?? i18nStrings.removeButtonAriaLabel)?.(item)}\n                onClick={handleRemoveClick}\n              >\n                {i18n('removeButtonText', removeButtonText)}\n              </InternalButton>\n            ))}\n        </div>\n        {!removeButtonOnSameLine && <div className={styles.divider} />}\n      </div>\n    );\n  }\n) as <T>(props: RowProps<T>) => JSX.Element;\n"]}