@cloudscape-design/components 3.0.297 → 3.0.298

package/table/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["table/interfaces.tsx"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler, CancelableEventHandler } from '../internal/events';\nimport { Optional } from '../internal/types';\nimport ColumnDisplayProperties = TableProps.ColumnDisplayProperties;\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 TableForwardRefType {\n  <T>(props: TableProps<T> & { ref?: React.Ref<TableProps.Ref> }): JSX.Element;\n}\n\nexport interface TableProps<T = any> extends BaseComponentProps {\n  /**\n   * Heading element of the table container. Use the [header component](/components/header/).\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Footer of the table container.\n   */\n  footer?: React.ReactNode;\n\n  /**\n   * Displayed when the `items` property is an empty array. Use it to render an empty or no-match state.\n   */\n  empty?: React.ReactNode;\n\n  /**\n   * Specifies the data that's displayed in the table rows. Each item contains the data for one row. The display of a row is handled\n   * by the `cell` property of each column definition in the `columnDefinitions` property.\n   */\n  items: ReadonlyArray<T>;\n\n  /**\n   * Renders the table in a loading state. We recommend that you also set a `loadingText`.\n   */\n  loading?: boolean;\n\n  /**\n   * Specifies the text that's displayed when the table is in a loading state.\n   */\n  loadingText?: string;\n\n  /**\n   * Specifies a property that uniquely identifies an individual item.\n   * When it's set, it's used to provide [keys for React](https://reactjs.org/docs/lists-and-keys.html#keys)\n   * for performance optimizations.\n   *\n   * It's also used to connect `items` and `selectedItems` values when they reference different objects.\n   */\n  trackBy?: TableProps.TrackBy<T>;\n\n  /**\n   * The columns configuration object\n   * * `id` (string) - Specifies a unique column identifier. The property is used 1) as a [keys](https://reactjs.org/docs/lists-and-keys.html#keys) source for React rendering,\n   *   and 2) to match entries in the `columnDisplay` property, if defined.\n   * * `header` (ReactNode) - Determines the display of the column header.\n   * * `cell` ((item) => ReactNode) - Determines the display of a cell's content. You receive the current table row\n   *   item as an argument.\n   * * `width` (string | number) - Specifies the column width. Corresponds to the `width` css-property. If the width is not set,\n   *   the browser automatically adjusts the column width based on the content. When `resizableColumns` property is\n   *   set to `true`, additional constraints apply: 1) string values are not allowed, and 2) the last visible column always\n   *   fills the remaining space of the table so the specified width is ignored.\n   * * `minWidth` (string | number) - Specifies the minimum column width. Corresponds to the `min-width` css-property. When\n   *   `resizableColumns` property is set to `true`, additional constraints apply: 1) string values are not allowed,\n   *   and 2) the column can't resize below than the specified width (defaults to \"120px\"). We recommend that you set a minimum width\n   *   of at least 176px for columns that are editable.\n   * * `maxWidth` (string | number) - Specifies the maximum column width. Corresponds to the `max-width` css-property.\n   *   Note that when the `resizableColumns` property is set to `true` this property is ignored.\n   * * `ariaLabel` (LabelData => string) - An optional function that's called to provide an `aria-label` for the cell header.\n   *   It receives the current sorting state of this column, the direction it's sorted in, and an indication of\n   *   whether the sorting is disabled, as three Boolean values: `sorted`, `descending` and `disabled`.\n   *   We recommend that you use this for sortable columns to provide more meaningful labels based on the\n   *   current sorting direction.\n   * * `sortingField` (string) - Enables default column sorting. The value is used in [collection hooks](/get-started/dev-guides/collection-hooks/)\n   *   to reorder the items. Provide the name of the property within each item that should be used for sorting by this column.\n   *   For more complex sorting use `sortingComparator` instead.\n   * * `sortingComparator` ((T, T) => number) - Enables custom column sorting. The value is used in [collection hooks](/get-started/dev-guides/collection-hooks/)\n   *   to reorder the items. This property accepts a custom comparator that is used to compare two items.\n   *   The comparator must implement ascending ordering, and the output is inverted automatically in case of descending order.\n   *   If present, the `sortingField` property is ignored.\n   * * `editConfig` (EditConfig) - Enables inline editing in column when present. The value is used to configure the editing behavior.\n   * * * `editConfig.ariaLabel` (string) - Specifies a label for the edit control. Visually hidden but read by screen readers.\n   * * * `editConfig.errorIconAriaLabel` (string) - Specifies an ariaLabel for the error icon that is displayed when the validation fails.\n   * * * `editConfig.editIconAriaLabel` (string) - Specifies an alternate text for the edit icon used in column header.\n   * * * `editConfig.constraintText` (string) - Constraint text that is displayed below the edit control.\n   * * * `editConfig.validation` ((item, value) => string) - A function that allows you to validate the value of the edit control.\n   *            Return a string from the function to display an error message. Return `undefined` (or no return) from the function to indicate that the value is valid.\n   * * * `editConfig.editingCell` ((item, cellContext) => ReactNode) - Determines the display of a cell's content when inline editing is active on a cell;\n   *        You receive the current table row `item` and a `cellContext` object as arguments.\n   *        The `cellContext` object contains the following properties:\n   *  *  * `cellContext.currentValue` - State to keep track of a value in input fields while editing.\n   *  *  * `cellContext.setValue` - Function to update `currentValue`. This should be called when the value in input field changes.\n   *  * `isRowHeader` (boolean) - Specifies that cells in this column should be used as row headers.\n   */\n  columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<T>>;\n  /**\n   * Specifies the selection type (`'single' | 'multi'`).\n   */\n  selectionType?: TableProps.SelectionType;\n  /**\n   * List of selected items.\n   */\n  selectedItems?: ReadonlyArray<T>;\n\n  /**\n   * Use this slot to add filtering controls to the table.\n   */\n  filter?: React.ReactNode;\n\n  /**\n   * Use this slot to add the [pagination component](/components/pagination/) to the table.\n   */\n  pagination?: React.ReactNode;\n\n  /**\n   * Use this slot to add [collection preferences](/components/collection-preferences/) to the table.\n   */\n  preferences?: React.ReactNode;\n\n  /**\n   * Determines whether a given item is disabled. If an item is disabled, the user can't select it.\n   */\n  isItemDisabled?: TableProps.IsItemDisabled<T>;\n\n  /**\n   * Specifies if text wraps within table cells. If set to `true`, long text within cells may wrap onto\n   * multiple lines instead of being truncated with an ellipsis.\n   */\n  wrapLines?: boolean;\n\n  /**\n   * Specifies if table rows alternate being shaded and unshaded. If set to `true`, every other row will be shaded.\n   */\n  stripedRows?: boolean;\n\n  /**\n   * Toggles the content density of the table. Defaults to `'comfortable'`.\n   */\n  contentDensity?: 'comfortable' | 'compact';\n\n  /**\n   * Specifies if columns can be resized. If set to `true`, users can resize the columns in the table.\n   */\n  resizableColumns?: boolean;\n\n  /**\n   * Specifies alternative text for the selection components (checkboxes and radio buttons) as follows:\n   * * `itemSelectionLabel` ((SelectionState, Item) => string) - Specifies the alternative text for an item.\n   * * `allItemsSelectionLabel` ((SelectionState) => string) - Specifies the alternative text for multi-selection column header.\n   * * `selectionGroupLabel` (string) - Specifies the alternative text for the whole selection and single-selection column header.\n   *                                    It is prefixed to `itemSelectionLabel` and `allItemsSelectionLabel` when they are set.\n   * * `tableLabel` (string) - Provides an alternative text for the table. If you use a header for this table, you may reuse the string\n   *                           to provide a caption-like description. For example, tableLabel=Instances will be announced as 'Instances table'.\n   * You can use the first argument of type `SelectionState` to access the current selection\n   * state of the component (for example, the `selectedItems` list). The `itemSelectionLabel` for individual\n   * items also receives the corresponding  `Item` object. You can use the `selectionGroupLabel` to\n   * add a meaningful description to the whole selection.\n   *\n   * * `activateEditLabel` (EditableColumnDefinition, Item) => string -\n   *                      Specifies an alternative text for the edit button in editable cells.\n   * * `cancelEditLabel` (EditableColumnDefinition) => string -\n   *                      Specifies an alternative text for the cancel button in editable cells.\n   * * `submitEditLabel` (EditableColumnDefinition) => string -\n   *                      Specifies an alternative text for the submit button in editable cells.\n   * * `successfulEditLabel` (EditableColumnDefinition) => string -\n   *                      Specifies an alternative text for the success icon in editable cells. This text is also announced to screen readers.\n   * * `submittingEditText` (EditableColumnDefinition) => string -\n   *                      Specifies a text that is announced to screen readers when a cell edit operation is submitted.\n   */\n  ariaLabels?: TableProps.AriaLabels<T>;\n\n  /**\n   * Specifies the definition object of the currently sorted column. Make sure you pass an object that's\n   * present in the `columnDefinitions` array.\n   */\n  sortingColumn?: TableProps.SortingColumn<T>;\n  /**\n   * Specifies whether to use a descending sort order.\n   */\n  sortingDescending?: boolean;\n  /**\n   * Specifies if sorting buttons are disabled. For example, use this property\n   * to prevent the user from sorting before items are fully loaded.\n   */\n  sortingDisabled?: boolean;\n\n  /**\n   * Specifies the number of first and/or last columns that should be sticky.\n   *\n   * If the available scrollable space is less than a certain threshold, the feature is deactivated.\n   *\n   * Use it in conjunction with the sticky columns preference of the\n   * [collection preferences](/components/collection-preferences/) component.\n   *\n   */\n  stickyColumns?: TableProps.StickyColumns;\n\n  /**\n   * Specifies an array that represents the table columns in the order in which they will be displayed, together with their visibility.\n   *\n   * If not set, all columns are displayed and the order is dictated by the `columnDefinitions` property.\n   *\n   * Use it in conjunction with the content display preference of the [collection preferences](/components/collection-preferences/) component.\n   */\n  columnDisplay?: ReadonlyArray<ColumnDisplayProperties>;\n\n  /**\n   * Specifies an array containing the `id`s of visible columns. If not set, all columns are displayed.\n   *\n   * Use it in conjunction with the visible content preference of the [collection preferences](/components/collection-preferences/) component.\n   *\n   * The order of ids doesn't influence the order in which columns are displayed - this is dictated by the `columnDefinitions` property.\n   * */\n  visibleColumns?: ReadonlyArray<string>;\n\n  /**\n   * Fired when the user resizes a table column. The event detail contains an array of column widths in pixels,\n   * including the hidden via preferences columns. Use this event to persist the column widths.\n   */\n  onColumnWidthsChange?: NonCancelableEventHandler<TableProps.ColumnWidthsChangeDetail>;\n\n  /**\n   * Called when either the column to sort by or the direction of sorting changes upon user interaction.\n   * The event detail contains the current sortingColumn and isDescending.\n   */\n  onSortingChange?: NonCancelableEventHandler<TableProps.SortingState<T>>;\n\n  /**\n   * Fired when a user interaction triggers a change in the list of selected items.\n   * The event `detail` contains the current list of `selectedItems`.\n   */\n  onSelectionChange?: NonCancelableEventHandler<TableProps.SelectionChangeDetail<T>>;\n\n  /**\n   * Note: This feature is provided for backwards compatibility. Its use is not recommended,\n   * and it may be deprecated in the future.\n   *\n   * Called when the user clicked at a table row. The event detail contains the index of the\n   * clicked row and the row object itself. Use this event to define a row click behavior.\n   */\n  onRowClick?: NonCancelableEventHandler<TableProps.OnRowClickDetail<T>>;\n\n  /**\n   * Note: This feature is provided for backwards compatibility. Its use is not recommended,\n   * and it may be deprecated in the future.\n   *\n   * Called when the user clicked at a table row with the right mouse click. The event detail\n   * contains the index of the clicked row and the row object itself. Use this event to override\n   * the default browser context menu behavior.\n   */\n  onRowContextMenu?: CancelableEventHandler<TableProps.OnRowContextMenuDetail<T>>;\n\n  /**\n   * If set to `true`, the table header remains visible when the user scrolls down.\n   */\n  stickyHeader?: boolean;\n\n  /**\n   * Specifies a vertical offset (in pixels) for the sticky header. For example, use this if you\n   * need to position the sticky header below other fixed position elements on the page.\n   */\n  stickyHeaderVerticalOffset?: number;\n\n  /**\n   * Specify a table variant with one of the following:\n   * * `container` - Use this variant to have the table displayed within a container.\n   * * `borderless` - Use this variant when the table should have no outer borders or shadow\n   *                  (such as in a dashboard item container).\n   * * `embedded` - Use this variant within a parent container (such as a modal, expandable\n   *                section, container or split panel).\n   * * `stacked` - Use this variant adjacent to other stacked containers (such as a container,\n   *               table).\n   * * `full-page` – Use this variant when the table is the entire content of a page. Full page variants\n   *                 implement the high contrast header and content behavior automatically.\n   * @visualrefresh `embedded`, `stacked`, and `full-page` variants\n   */\n  variant?: TableProps.Variant;\n\n  /**\n   * Use this property to inform screen readers how many items there are in a table.\n   * It specifies the total count of all items in a table.\n   * If there is an unknown total of items in a table, leave this property undefined.   */\n  totalItemsCount?: number;\n  /**\n   *  Use this property to inform screen readers which range of items is currently displayed in the table.\n   *  It specifies the index (1-based) of the first item in the table.\n   *  If the table has no pagination, leave this property undefined.   */\n  firstIndex?: number;\n  /**\n   * Use this function to announce page changes to screen reader users.\n   * Requires the properties firstIndex and totalItemsCount to be set correctly.\n   */\n  renderAriaLive?: (data: TableProps.LiveAnnouncement) => string;\n  /**\n   * Specifies a function that will be called after user submits an inline edit.\n   * Return a promise to keep loading state while the submit request is in progress.\n   */\n  submitEdit?: TableProps.SubmitEditFunction<T>;\n\n  /**\n   * Called whenever user cancels an inline edit. Use this function to reset any\n   * validation states, or show warning for unsaved changes.\n   */\n  onEditCancel?: CancelableEventHandler;\n}\n\nexport namespace TableProps {\n  export type TrackBy<T> = string | ((item: T) => string);\n\n  export interface CellContext<V> {\n    currentValue: Optional<V>;\n    setValue: (value: V | undefined) => void;\n  }\n\n  export interface EditConfig<T, V = any> {\n    /**\n     * Specifies a label for the edit control. Visually hidden but read\n     * by screen readers.\n     */\n    ariaLabel?: string;\n    /**\n     * Specifies an ariaLabel for the error icon that is displayed when\n     * the validation fails.\n     */\n    errorIconAriaLabel?: string;\n    /**\n     * Specifies an alternate text for the edit icon used in column header.\n     */\n    editIconAriaLabel?: string;\n    /**\n     * Constraint text that is displayed below the edit control.\n     */\n    constraintText?: string;\n    /**\n     * A function that allows you to validate the value of the edit control. Return\n     * a string from the function to display an error message. Return\n     * `undefined` (or no return) from the function to indicate that the value is valid.\n     * @param item - The item that is being edited.\n     * @param value - The current value of the edit control.\n     */\n    validation?: (item: T, value: Optional<V>) => Optional<string>;\n\n    /**\n     * Determines the display of a cell's content when inline edit is active.\n     */\n    editingCell(item: T, ctx: TableProps.CellContext<any>): React.ReactNode;\n  }\n\n  export type ColumnDefinition<ItemType> = {\n    id?: string;\n    header: React.ReactNode;\n    ariaLabel?(data: LabelData): string;\n    width?: number | string;\n    minWidth?: number | string;\n    maxWidth?: number | string;\n    editConfig?: EditConfig<ItemType>;\n    isRowHeader?: boolean;\n    cell(item: ItemType): React.ReactNode;\n  } & SortingColumn<ItemType>;\n\n  export interface StickyColumns {\n    first?: number;\n    last?: number;\n  }\n\n  export type SelectionType = 'single' | 'multi';\n  export type Variant = 'container' | 'embedded' | 'borderless' | 'stacked' | 'full-page';\n  export interface SelectionState<T> {\n    selectedItems: ReadonlyArray<T>;\n  }\n  export interface SelectionChangeDetail<T> {\n    selectedItems: T[];\n  }\n  export type IsItemDisabled<T> = (item: T) => boolean;\n  export interface AriaLabels<T> {\n    allItemsSelectionLabel?: (data: TableProps.SelectionState<T>) => string;\n    itemSelectionLabel?: (data: TableProps.SelectionState<T>, row: T) => string;\n    selectionGroupLabel?: string;\n    tableLabel?: string;\n    // do not use <T> to prevent overly strict validation on consumer end\n    // it works, practically, we are only interested in `id` and `header` properties only\n    activateEditLabel?: (column: ColumnDefinition<any>, item: T) => string;\n    cancelEditLabel?: (column: ColumnDefinition<any>) => string;\n    submitEditLabel?: (column: ColumnDefinition<any>) => string;\n    submittingEditText?: (column: ColumnDefinition<any>) => string;\n    successfulEditLabel?: (column: ColumnDefinition<any>) => string;\n  }\n  export interface SortingState<T> {\n    isDescending?: boolean;\n    sortingColumn: SortingColumn<T>;\n  }\n  export interface SortingColumn<T> {\n    sortingField?: string;\n    sortingComparator?: (a: T, b: T) => number;\n  }\n  export interface LabelData {\n    sorted: boolean;\n    descending: boolean;\n    disabled: boolean;\n  }\n  export interface OnRowClickDetail<T> {\n    rowIndex: number;\n    item: T;\n  }\n  export interface OnRowContextMenuDetail<T> {\n    rowIndex: number;\n    item: T;\n    clientX: number;\n    clientY: number;\n  }\n\n  export interface ColumnWidthsChangeDetail {\n    widths: ReadonlyArray<number>;\n  }\n\n  export interface LiveAnnouncement {\n    totalItemsCount?: number;\n    firstIndex: number;\n    lastIndex: number;\n  }\n\n  export interface Ref {\n    /**\n     * When the sticky header is enabled and you call this function, the table\n     * scroll parent scrolls to reveal the first row of the table.\n     */\n    scrollToTop(): void;\n\n    /**\n     * Dismiss an inline edit if currently active.\n     */\n    cancelEdit?(): void;\n  }\n\n  export type SubmitEditFunction<ItemType, ValueType = unknown> = (\n    item: ItemType,\n    column: ColumnDefinition<ItemType>,\n    newValue: ValueType\n  ) => Promise<void> | void;\n\n  export interface ColumnDisplayProperties {\n    id: string;\n    visible: boolean;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["table/interfaces.tsx"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler, CancelableEventHandler } from '../internal/events';\nimport { Optional } from '../internal/types';\nimport ColumnDisplayProperties = TableProps.ColumnDisplayProperties;\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 TableForwardRefType {\n  <T>(props: TableProps<T> & { ref?: React.Ref<TableProps.Ref> }): JSX.Element;\n}\n\nexport interface TableProps<T = any> extends BaseComponentProps {\n  /**\n   * Heading element of the table container. Use the [header component](/components/header/).\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Footer of the table container.\n   */\n  footer?: React.ReactNode;\n\n  /**\n   * Displayed when the `items` property is an empty array. Use it to render an empty or no-match state.\n   */\n  empty?: React.ReactNode;\n\n  /**\n   * Specifies the data that's displayed in the table rows. Each item contains the data for one row. The display of a row is handled\n   * by the `cell` property of each column definition in the `columnDefinitions` property.\n   */\n  items: ReadonlyArray<T>;\n\n  /**\n   * Renders the table in a loading state. We recommend that you also set a `loadingText`.\n   */\n  loading?: boolean;\n\n  /**\n   * Specifies the text that's displayed when the table is in a loading state.\n   */\n  loadingText?: string;\n\n  /**\n   * Specifies a property that uniquely identifies an individual item.\n   * When it's set, it's used to provide [keys for React](https://reactjs.org/docs/lists-and-keys.html#keys)\n   * for performance optimizations.\n   *\n   * It's also used to connect `items` and `selectedItems` values when they reference different objects.\n   */\n  trackBy?: TableProps.TrackBy<T>;\n\n  /**\n   * The columns configuration object\n   * * `id` (string) - Specifies a unique column identifier. The property is used 1) as a [keys](https://reactjs.org/docs/lists-and-keys.html#keys) source for React rendering,\n   *   and 2) to match entries in the `columnDisplay` property, if defined.\n   * * `header` (ReactNode) - Determines the display of the column header.\n   * * `cell` ((item) => ReactNode) - Determines the display of a cell's content. You receive the current table row\n   *   item as an argument.\n   * * `width` (string | number) - Specifies the column width. Corresponds to the `width` css-property. If the width is not set,\n   *   the browser automatically adjusts the column width based on the content. When `resizableColumns` property is\n   *   set to `true`, additional constraints apply: 1) string values are not allowed, and 2) the last visible column always\n   *   fills the remaining space of the table so the specified width is ignored.\n   * * `minWidth` (string | number) - Specifies the minimum column width. Corresponds to the `min-width` css-property. When\n   *   `resizableColumns` property is set to `true`, additional constraints apply: 1) string values are not allowed,\n   *   and 2) the column can't resize below than the specified width (defaults to \"120px\"). We recommend that you set a minimum width\n   *   of at least 176px for columns that are editable.\n   * * `maxWidth` (string | number) - Specifies the maximum column width. Corresponds to the `max-width` css-property.\n   *   Note that when the `resizableColumns` property is set to `true` this property is ignored.\n   * * `ariaLabel` (LabelData => string) - An optional function that's called to provide an `aria-label` for the cell header.\n   *   It receives the current sorting state of this column, the direction it's sorted in, and an indication of\n   *   whether the sorting is disabled, as three Boolean values: `sorted`, `descending` and `disabled`.\n   *   We recommend that you use this for sortable columns to provide more meaningful labels based on the\n   *   current sorting direction.\n   * * `sortingField` (string) - Enables default column sorting. The value is used in [collection hooks](/get-started/dev-guides/collection-hooks/)\n   *   to reorder the items. Provide the name of the property within each item that should be used for sorting by this column.\n   *   For more complex sorting use `sortingComparator` instead.\n   * * `sortingComparator` ((T, T) => number) - Enables custom column sorting. The value is used in [collection hooks](/get-started/dev-guides/collection-hooks/)\n   *   to reorder the items. This property accepts a custom comparator that is used to compare two items.\n   *   The comparator must implement ascending ordering, and the output is inverted automatically in case of descending order.\n   *   If present, the `sortingField` property is ignored.\n   * * `editConfig` (EditConfig) - Enables inline editing in column when present. The value is used to configure the editing behavior.\n   * * * `editConfig.ariaLabel` (string) - Specifies a label for the edit control. Visually hidden but read by screen readers.\n   * * * `editConfig.errorIconAriaLabel` (string) - Specifies an ariaLabel for the error icon that is displayed when the validation fails.\n   * * * `editConfig.editIconAriaLabel` (string) - Specifies an alternate text for the edit icon used in column header.\n   * * * `editConfig.constraintText` (string) - Constraint text that is displayed below the edit control.\n   * * * `editConfig.validation` ((item, value) => string) - A function that allows you to validate the value of the edit control.\n   *            Return a string from the function to display an error message. Return `undefined` (or no return) from the function to indicate that the value is valid.\n   * * * `editConfig.editingCell` ((item, cellContext) => ReactNode) - Determines the display of a cell's content when inline editing is active on a cell;\n   *        You receive the current table row `item` and a `cellContext` object as arguments.\n   *        The `cellContext` object contains the following properties:\n   *  *  * `cellContext.currentValue` - State to keep track of a value in input fields while editing.\n   *  *  * `cellContext.setValue` - Function to update `currentValue`. This should be called when the value in input field changes.\n   *  * `isRowHeader` (boolean) - Specifies that cells in this column should be used as row headers.\n   */\n  columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<T>>;\n  /**\n   * Specifies the selection type (`'single' | 'multi'`).\n   */\n  selectionType?: TableProps.SelectionType;\n  /**\n   * List of selected items.\n   */\n  selectedItems?: ReadonlyArray<T>;\n\n  /**\n   * Use this slot to add filtering controls to the table.\n   */\n  filter?: React.ReactNode;\n\n  /**\n   * Use this slot to add the [pagination component](/components/pagination/) to the table.\n   */\n  pagination?: React.ReactNode;\n\n  /**\n   * Use this slot to add [collection preferences](/components/collection-preferences/) to the table.\n   */\n  preferences?: React.ReactNode;\n\n  /**\n   * Determines whether a given item is disabled. If an item is disabled, the user can't select it.\n   */\n  isItemDisabled?: TableProps.IsItemDisabled<T>;\n\n  /**\n   * Specifies if text wraps within table cells. If set to `true`, long text within cells may wrap onto\n   * multiple lines instead of being truncated with an ellipsis.\n   */\n  wrapLines?: boolean;\n\n  /**\n   * Specifies if table rows alternate being shaded and unshaded. If set to `true`, every other row will be shaded.\n   */\n  stripedRows?: boolean;\n\n  /**\n   * Toggles the content density of the table. Defaults to `'comfortable'`.\n   */\n  contentDensity?: 'comfortable' | 'compact';\n\n  /**\n   * Specifies if columns can be resized. If set to `true`, users can resize the columns in the table.\n   */\n  resizableColumns?: boolean;\n\n  /**\n   * Specifies alternative text for the selection components (checkboxes and radio buttons) as follows:\n   * * `itemSelectionLabel` ((SelectionState, Item) => string) - Specifies the alternative text for an item.\n   * * `allItemsSelectionLabel` ((SelectionState) => string) - Specifies the alternative text for multi-selection column header.\n   * * `selectionGroupLabel` (string) - Specifies the alternative text for the whole selection and single-selection column header.\n   *                                    It is prefixed to `itemSelectionLabel` and `allItemsSelectionLabel` when they are set.\n   * * `tableLabel` (string) - Provides an alternative text for the table. If you use a header for this table, you may reuse the string\n   *                           to provide a caption-like description. For example, tableLabel=Instances will be announced as 'Instances table'.\n   * You can use the first argument of type `SelectionState` to access the current selection\n   * state of the component (for example, the `selectedItems` list). The `itemSelectionLabel` for individual\n   * items also receives the corresponding  `Item` object. You can use the `selectionGroupLabel` to\n   * add a meaningful description to the whole selection.\n   *\n   * * `activateEditLabel` (EditableColumnDefinition, Item) => string -\n   *                      Specifies an alternative text for the edit button in editable cells.\n   * * `cancelEditLabel` (EditableColumnDefinition) => string -\n   *                      Specifies an alternative text for the cancel button in editable cells.\n   * * `submitEditLabel` (EditableColumnDefinition) => string -\n   *                      Specifies an alternative text for the submit button in editable cells.\n   * * `successfulEditLabel` (EditableColumnDefinition) => string -\n   *                      Specifies an alternative text for the success icon in editable cells. This text is also announced to screen readers.\n   * * `submittingEditText` (EditableColumnDefinition) => string -\n   *                      Specifies a text that is announced to screen readers when a cell edit operation is submitted.\n   * @i18n\n   */\n  ariaLabels?: TableProps.AriaLabels<T>;\n\n  /**\n   * Specifies the definition object of the currently sorted column. Make sure you pass an object that's\n   * present in the `columnDefinitions` array.\n   */\n  sortingColumn?: TableProps.SortingColumn<T>;\n  /**\n   * Specifies whether to use a descending sort order.\n   */\n  sortingDescending?: boolean;\n  /**\n   * Specifies if sorting buttons are disabled. For example, use this property\n   * to prevent the user from sorting before items are fully loaded.\n   */\n  sortingDisabled?: boolean;\n\n  /**\n   * Specifies the number of first and/or last columns that should be sticky.\n   *\n   * If the available scrollable space is less than a certain threshold, the feature is deactivated.\n   *\n   * Use it in conjunction with the sticky columns preference of the\n   * [collection preferences](/components/collection-preferences/) component.\n   *\n   */\n  stickyColumns?: TableProps.StickyColumns;\n\n  /**\n   * Specifies an array that represents the table columns in the order in which they will be displayed, together with their visibility.\n   *\n   * If not set, all columns are displayed and the order is dictated by the `columnDefinitions` property.\n   *\n   * Use it in conjunction with the content display preference of the [collection preferences](/components/collection-preferences/) component.\n   */\n  columnDisplay?: ReadonlyArray<ColumnDisplayProperties>;\n\n  /**\n   * Specifies an array containing the `id`s of visible columns. If not set, all columns are displayed.\n   *\n   * Use it in conjunction with the visible content preference of the [collection preferences](/components/collection-preferences/) component.\n   *\n   * The order of ids doesn't influence the order in which columns are displayed - this is dictated by the `columnDefinitions` property.\n   * */\n  visibleColumns?: ReadonlyArray<string>;\n\n  /**\n   * Fired when the user resizes a table column. The event detail contains an array of column widths in pixels,\n   * including the hidden via preferences columns. Use this event to persist the column widths.\n   */\n  onColumnWidthsChange?: NonCancelableEventHandler<TableProps.ColumnWidthsChangeDetail>;\n\n  /**\n   * Called when either the column to sort by or the direction of sorting changes upon user interaction.\n   * The event detail contains the current sortingColumn and isDescending.\n   */\n  onSortingChange?: NonCancelableEventHandler<TableProps.SortingState<T>>;\n\n  /**\n   * Fired when a user interaction triggers a change in the list of selected items.\n   * The event `detail` contains the current list of `selectedItems`.\n   */\n  onSelectionChange?: NonCancelableEventHandler<TableProps.SelectionChangeDetail<T>>;\n\n  /**\n   * Note: This feature is provided for backwards compatibility. Its use is not recommended,\n   * and it may be deprecated in the future.\n   *\n   * Called when the user clicked at a table row. The event detail contains the index of the\n   * clicked row and the row object itself. Use this event to define a row click behavior.\n   */\n  onRowClick?: NonCancelableEventHandler<TableProps.OnRowClickDetail<T>>;\n\n  /**\n   * Note: This feature is provided for backwards compatibility. Its use is not recommended,\n   * and it may be deprecated in the future.\n   *\n   * Called when the user clicked at a table row with the right mouse click. The event detail\n   * contains the index of the clicked row and the row object itself. Use this event to override\n   * the default browser context menu behavior.\n   */\n  onRowContextMenu?: CancelableEventHandler<TableProps.OnRowContextMenuDetail<T>>;\n\n  /**\n   * If set to `true`, the table header remains visible when the user scrolls down.\n   */\n  stickyHeader?: boolean;\n\n  /**\n   * Specifies a vertical offset (in pixels) for the sticky header. For example, use this if you\n   * need to position the sticky header below other fixed position elements on the page.\n   */\n  stickyHeaderVerticalOffset?: number;\n\n  /**\n   * Specify a table variant with one of the following:\n   * * `container` - Use this variant to have the table displayed within a container.\n   * * `borderless` - Use this variant when the table should have no outer borders or shadow\n   *                  (such as in a dashboard item container).\n   * * `embedded` - Use this variant within a parent container (such as a modal, expandable\n   *                section, container or split panel).\n   *                **Deprecated**, replaced by `borderless` and `container`.\n   * * `stacked` - Use this variant adjacent to other stacked containers (such as a container,\n   *               table).\n   * * `full-page` – Use this variant when the table is the entire content of a page. Full page variants\n   *                 implement the high contrast header and content behavior automatically.\n   * @visualrefresh `embedded`, `stacked`, and `full-page` variants\n   */\n  variant?: TableProps.Variant;\n\n  /**\n   * Use this property to inform screen readers how many items there are in a table.\n   * It specifies the total count of all items in a table.\n   * If there is an unknown total of items in a table, leave this property undefined.   */\n  totalItemsCount?: number;\n  /**\n   *  Use this property to inform screen readers which range of items is currently displayed in the table.\n   *  It specifies the index (1-based) of the first item in the table.\n   *  If the table has no pagination, leave this property undefined.   */\n  firstIndex?: number;\n  /**\n   * Use this function to announce page changes to screen reader users.\n   * Requires the properties firstIndex and totalItemsCount to be set correctly.\n   */\n  renderAriaLive?: (data: TableProps.LiveAnnouncement) => string;\n  /**\n   * Specifies a function that will be called after user submits an inline edit.\n   * Return a promise to keep loading state while the submit request is in progress.\n   */\n  submitEdit?: TableProps.SubmitEditFunction<T>;\n\n  /**\n   * Called whenever user cancels an inline edit. Use this function to reset any\n   * validation states, or show warning for unsaved changes.\n   */\n  onEditCancel?: CancelableEventHandler;\n}\n\nexport namespace TableProps {\n  export type TrackBy<T> = string | ((item: T) => string);\n\n  export interface CellContext<V> {\n    currentValue: Optional<V>;\n    setValue: (value: V | undefined) => void;\n  }\n\n  export interface EditConfig<T, V = any> {\n    /**\n     * Specifies a label for the edit control. Visually hidden but read\n     * by screen readers.\n     */\n    ariaLabel?: string;\n    /**\n     * Specifies an ariaLabel for the error icon that is displayed when\n     * the validation fails.\n     */\n    errorIconAriaLabel?: string;\n    /**\n     * Specifies an alternate text for the edit icon used in column header.\n     */\n    editIconAriaLabel?: string;\n    /**\n     * Constraint text that is displayed below the edit control.\n     */\n    constraintText?: string;\n    /**\n     * A function that allows you to validate the value of the edit control. Return\n     * a string from the function to display an error message. Return\n     * `undefined` (or no return) from the function to indicate that the value is valid.\n     * @param item - The item that is being edited.\n     * @param value - The current value of the edit control.\n     */\n    validation?: (item: T, value: Optional<V>) => Optional<string>;\n\n    /**\n     * Determines the display of a cell's content when inline edit is active.\n     */\n    editingCell(item: T, ctx: TableProps.CellContext<any>): React.ReactNode;\n  }\n\n  export type ColumnDefinition<ItemType> = {\n    id?: string;\n    header: React.ReactNode;\n    ariaLabel?(data: LabelData): string;\n    width?: number | string;\n    minWidth?: number | string;\n    maxWidth?: number | string;\n    editConfig?: EditConfig<ItemType>;\n    isRowHeader?: boolean;\n    cell(item: ItemType): React.ReactNode;\n  } & SortingColumn<ItemType>;\n\n  export interface StickyColumns {\n    first?: number;\n    last?: number;\n  }\n\n  export type SelectionType = 'single' | 'multi';\n  export type Variant = 'container' | 'embedded' | 'borderless' | 'stacked' | 'full-page';\n  export interface SelectionState<T> {\n    selectedItems: ReadonlyArray<T>;\n  }\n  export interface SelectionChangeDetail<T> {\n    selectedItems: T[];\n  }\n  export type IsItemDisabled<T> = (item: T) => boolean;\n  export interface AriaLabels<T> {\n    allItemsSelectionLabel?: (data: TableProps.SelectionState<T>) => string;\n    itemSelectionLabel?: (data: TableProps.SelectionState<T>, row: T) => string;\n    selectionGroupLabel?: string;\n    tableLabel?: string;\n    // do not use <T> to prevent overly strict validation on consumer end\n    // it works, practically, we are only interested in `id` and `header` properties only\n    activateEditLabel?: (column: ColumnDefinition<any>, item: T) => string;\n    cancelEditLabel?: (column: ColumnDefinition<any>) => string;\n    submitEditLabel?: (column: ColumnDefinition<any>) => string;\n    submittingEditText?: (column: ColumnDefinition<any>) => string;\n    successfulEditLabel?: (column: ColumnDefinition<any>) => string;\n  }\n  export interface SortingState<T> {\n    isDescending?: boolean;\n    sortingColumn: SortingColumn<T>;\n  }\n  export interface SortingColumn<T> {\n    sortingField?: string;\n    sortingComparator?: (a: T, b: T) => number;\n  }\n  export interface LabelData {\n    sorted: boolean;\n    descending: boolean;\n    disabled: boolean;\n  }\n  export interface OnRowClickDetail<T> {\n    rowIndex: number;\n    item: T;\n  }\n  export interface OnRowContextMenuDetail<T> {\n    rowIndex: number;\n    item: T;\n    clientX: number;\n    clientY: number;\n  }\n\n  export interface ColumnWidthsChangeDetail {\n    widths: ReadonlyArray<number>;\n  }\n\n  export interface LiveAnnouncement {\n    totalItemsCount?: number;\n    firstIndex: number;\n    lastIndex: number;\n  }\n\n  export interface Ref {\n    /**\n     * When the sticky header is enabled and you call this function, the table\n     * scroll parent scrolls to reveal the first row of the table.\n     */\n    scrollToTop(): void;\n\n    /**\n     * Dismiss an inline edit if currently active.\n     */\n    cancelEdit?(): void;\n  }\n\n  export type SubmitEditFunction<ItemType, ValueType = unknown> = (\n    item: ItemType,\n    column: ColumnDefinition<ItemType>,\n    newValue: ValueType\n  ) => Promise<void> | void;\n\n  export interface ColumnDisplayProperties {\n    id: string;\n    visible: boolean;\n  }\n}\n"]}

package/table/styles.css.js

@@ -1,40 +1,41 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_wih1l_16d38_97",
-  "tools": "awsui_tools_wih1l_16d38_108",
-  "tools-filtering": "awsui_tools-filtering_wih1l_16d38_114",
-  "tools-align-right": "awsui_tools-align-right_wih1l_16d38_128",
-  "tools-pagination": "awsui_tools-pagination_wih1l_16d38_132",
-  "tools-preferences": "awsui_tools-preferences_wih1l_16d38_132",
-  "tools-small": "awsui_tools-small_wih1l_16d38_138",
-  "table": "awsui_table_wih1l_16d38_144",
-  "table-layout-fixed": "awsui_table-layout-fixed_wih1l_16d38_150",
-  "wrapper": "awsui_wrapper_wih1l_16d38_154",
-  "variant-stacked": "awsui_variant-stacked_wih1l_16d38_163",
-  "variant-container": "awsui_variant-container_wih1l_16d38_163",
-  "variant-embedded": "awsui_variant-embedded_wih1l_16d38_167",
-  "variant-borderless": "awsui_variant-borderless_wih1l_16d38_167",
-  "has-header": "awsui_has-header_wih1l_16d38_170",
-  "has-footer": "awsui_has-footer_wih1l_16d38_173",
-  "cell-merged": "awsui_cell-merged_wih1l_16d38_190",
-  "cell-merged-content": "awsui_cell-merged-content_wih1l_16d38_201",
-  "empty": "awsui_empty_wih1l_16d38_216",
-  "loading": "awsui_loading_wih1l_16d38_220",
-  "selection-control": "awsui_selection-control_wih1l_16d38_229",
-  "selection-control-header": "awsui_selection-control-header_wih1l_16d38_236",
-  "sticky-scrollbar": "awsui_sticky-scrollbar_wih1l_16d38_241",
-  "sticky-scrollbar-content": "awsui_sticky-scrollbar-content_wih1l_16d38_250",
-  "sticky-scrollbar-visible": "awsui_sticky-scrollbar-visible_wih1l_16d38_253",
-  "sticky-scrollbar-native-invisible": "awsui_sticky-scrollbar-native-invisible_wih1l_16d38_256",
-  "dark-header": "awsui_dark-header_wih1l_16d38_264",
-  "header-secondary": "awsui_header-secondary_wih1l_16d38_269",
-  "table-has-header": "awsui_table-has-header_wih1l_16d38_285",
-  "header-controls": "awsui_header-controls_wih1l_16d38_289",
-  "footer-wrapper": "awsui_footer-wrapper_wih1l_16d38_303",
-  "footer": "awsui_footer_wih1l_16d38_303",
-  "thead-active": "awsui_thead-active_wih1l_16d38_312",
-  "row": "awsui_row_wih1l_16d38_313",
-  "row-selected": "awsui_row-selected_wih1l_16d38_314"
+  "root": "awsui_root_wih1l_nmxp4_97",
+  "tools": "awsui_tools_wih1l_nmxp4_108",
+  "tools-filtering": "awsui_tools-filtering_wih1l_nmxp4_114",
+  "tools-align-right": "awsui_tools-align-right_wih1l_nmxp4_128",
+  "tools-pagination": "awsui_tools-pagination_wih1l_nmxp4_132",
+  "tools-preferences": "awsui_tools-preferences_wih1l_nmxp4_132",
+  "tools-small": "awsui_tools-small_wih1l_nmxp4_138",
+  "table": "awsui_table_wih1l_nmxp4_144",
+  "table-layout-fixed": "awsui_table-layout-fixed_wih1l_nmxp4_150",
+  "wrapper": "awsui_wrapper_wih1l_nmxp4_154",
+  "variant-stacked": "awsui_variant-stacked_wih1l_nmxp4_163",
+  "variant-container": "awsui_variant-container_wih1l_nmxp4_163",
+  "variant-embedded": "awsui_variant-embedded_wih1l_nmxp4_167",
+  "variant-borderless": "awsui_variant-borderless_wih1l_nmxp4_167",
+  "has-header": "awsui_has-header_wih1l_nmxp4_170",
+  "has-footer": "awsui_has-footer_wih1l_nmxp4_173",
+  "cell-merged": "awsui_cell-merged_wih1l_nmxp4_190",
+  "cell-merged-content": "awsui_cell-merged-content_wih1l_nmxp4_201",
+  "empty": "awsui_empty_wih1l_nmxp4_216",
+  "loading": "awsui_loading_wih1l_nmxp4_220",
+  "selection-control": "awsui_selection-control_wih1l_nmxp4_229",
+  "selection-control-header": "awsui_selection-control-header_wih1l_nmxp4_236",
+  "sticky-scrollbar": "awsui_sticky-scrollbar_wih1l_nmxp4_241",
+  "sticky-scrollbar-content": "awsui_sticky-scrollbar-content_wih1l_nmxp4_250",
+  "sticky-scrollbar-visible": "awsui_sticky-scrollbar-visible_wih1l_nmxp4_253",
+  "sticky-scrollbar-native-invisible": "awsui_sticky-scrollbar-native-invisible_wih1l_nmxp4_256",
+  "dark-header": "awsui_dark-header_wih1l_nmxp4_264",
+  "header-secondary": "awsui_header-secondary_wih1l_nmxp4_269",
+  "table-has-header": "awsui_table-has-header_wih1l_nmxp4_285",
+  "header-controls": "awsui_header-controls_wih1l_nmxp4_289",
+  "variant-full-page": "awsui_variant-full-page_wih1l_nmxp4_293",
+  "footer-wrapper": "awsui_footer-wrapper_wih1l_nmxp4_306",
+  "footer": "awsui_footer_wih1l_nmxp4_306",
+  "thead-active": "awsui_thead-active_wih1l_nmxp4_315",
+  "row": "awsui_row_wih1l_nmxp4_316",
+  "row-selected": "awsui_row-selected_wih1l_nmxp4_317"
 };
   

package/table/styles.scoped.css

@@ -94,7 +94,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_wih1l_16d38_97:not(#\9) {
+.awsui_root_wih1l_nmxp4_97:not(#\9) {
   font-size: var(--font-body-m-size-cqtcam, 14px);
   line-height: var(--font-body-m-line-height-83azrc, 22px);
   color: var(--color-text-body-default-01bwmw, #000716);
@@ -105,53 +105,53 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   width: 100%;
 }
 
-.awsui_tools_wih1l_16d38_108:not(#\9) {
+.awsui_tools_wih1l_nmxp4_108:not(#\9) {
   display: flex;
   align-items: flex-end;
   flex-wrap: wrap;
   padding: var(--space-scaled-xs-u0e7ft, 8px) 0 var(--space-scaled-xxs-ugy2pw, 4px);
 }
-.awsui_tools-filtering_wih1l_16d38_114:not(#\9) {
+.awsui_tools-filtering_wih1l_nmxp4_114:not(#\9) {
   max-width: 100%;
   margin-right: var(--space-l-ds615y, 20px);
 }
 @supports (flex-basis: fit-content) {
-  .awsui_tools-filtering_wih1l_16d38_114:not(#\9) {
+  .awsui_tools-filtering_wih1l_nmxp4_114:not(#\9) {
     flex: 1 1 fit-content;
   }
 }
 @supports not (flex-basis: fit-content) {
-  .awsui_tools-filtering_wih1l_16d38_114:not(#\9) {
+  .awsui_tools-filtering_wih1l_nmxp4_114:not(#\9) {
     flex: 1 1 auto;
   }
 }
-.awsui_tools-align-right_wih1l_16d38_128:not(#\9) {
+.awsui_tools-align-right_wih1l_nmxp4_128:not(#\9) {
   display: flex;
   margin-left: auto;
 }
-.awsui_tools-pagination_wih1l_16d38_132 + .awsui_tools-preferences_wih1l_16d38_132:not(#\9) {
+.awsui_tools-pagination_wih1l_nmxp4_132 + .awsui_tools-preferences_wih1l_nmxp4_132:not(#\9) {
   border-left: var(--border-divider-section-width-g0ay3c, 2px) solid var(--color-border-divider-default-4spq70, #e9ebed);
   box-sizing: border-box;
   margin-left: var(--space-xs-inub5w, 8px);
   padding-left: var(--space-xs-inub5w, 8px);
 }
-.awsui_tools-small_wih1l_16d38_138 > .awsui_tools-filtering_wih1l_16d38_114:not(#\9) {
+.awsui_tools-small_wih1l_nmxp4_138 > .awsui_tools-filtering_wih1l_nmxp4_114:not(#\9) {
   margin-right: 0;
   margin-bottom: var(--space-scaled-xs-u0e7ft, 8px);
   flex-basis: 100%;
 }
 
-.awsui_table_wih1l_16d38_144:not(#\9) {
+.awsui_table_wih1l_nmxp4_144:not(#\9) {
   width: 100%;
   border-spacing: 0;
   position: relative;
   box-sizing: border-box;
 }
-.awsui_table-layout-fixed_wih1l_16d38_150:not(#\9) {
+.awsui_table-layout-fixed_wih1l_nmxp4_150:not(#\9) {
   table-layout: fixed;
 }
 
-.awsui_wrapper_wih1l_16d38_154:not(#\9) {
+.awsui_wrapper_wih1l_nmxp4_154:not(#\9) {
   position: relative;
   box-sizing: border-box;
   width: 100%;
@@ -160,45 +160,45 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   overflow-x: auto;
   scrollbar-width: none; /* Hide scrollbar in Firefox */
 }
-.awsui_wrapper_wih1l_16d38_154.awsui_variant-stacked_wih1l_16d38_163 > .awsui_table_wih1l_16d38_144:not(#\9), .awsui_wrapper_wih1l_16d38_154.awsui_variant-container_wih1l_16d38_163 > .awsui_table_wih1l_16d38_144:not(#\9) {
+.awsui_wrapper_wih1l_nmxp4_154.awsui_variant-stacked_wih1l_nmxp4_163 > .awsui_table_wih1l_nmxp4_144:not(#\9), .awsui_wrapper_wih1l_nmxp4_154.awsui_variant-container_wih1l_nmxp4_163 > .awsui_table_wih1l_nmxp4_144:not(#\9) {
   padding-left: var(--space-table-horizontal-nhrpfz, 20px);
   padding-right: var(--space-table-horizontal-nhrpfz, 20px);
 }
-.awsui_wrapper_wih1l_16d38_154.awsui_variant-embedded_wih1l_16d38_167:not(#\9), .awsui_wrapper_wih1l_16d38_154.awsui_variant-borderless_wih1l_16d38_167:not(#\9) {
+.awsui_wrapper_wih1l_nmxp4_154.awsui_variant-embedded_wih1l_nmxp4_167:not(#\9), .awsui_wrapper_wih1l_nmxp4_154.awsui_variant-borderless_wih1l_nmxp4_167:not(#\9) {
   padding-bottom: var(--space-table-embedded-content-bottom-cw037k, 0px);
 }
-.awsui_wrapper_wih1l_16d38_154.awsui_has-header_wih1l_16d38_170:not(#\9) {
+.awsui_wrapper_wih1l_nmxp4_154.awsui_has-header_wih1l_nmxp4_170:not(#\9) {
   padding-top: 0px;
 }
-.awsui_wrapper_wih1l_16d38_154.awsui_has-footer_wih1l_16d38_173:not(#\9) {
+.awsui_wrapper_wih1l_nmxp4_154.awsui_has-footer_wih1l_nmxp4_173:not(#\9) {
   padding-bottom: 0px;
 }
-.awsui_wrapper_wih1l_16d38_154:not(#\9):not(.awsui_has-header_wih1l_16d38_170) {
+.awsui_wrapper_wih1l_nmxp4_154:not(#\9):not(.awsui_has-header_wih1l_nmxp4_170) {
   border-top-right-radius: var(--border-radius-container-b3z48i, 16px);
   border-top-left-radius: var(--border-radius-container-b3z48i, 16px);
 }
-.awsui_wrapper_wih1l_16d38_154:not(#\9)::-webkit-scrollbar {
+.awsui_wrapper_wih1l_nmxp4_154:not(#\9)::-webkit-scrollbar {
   display: none; /* Hide scrollbar in Safari and Chrome */
 }
-body[data-awsui-focus-visible=true] .awsui_wrapper_wih1l_16d38_154:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_wrapper_wih1l_nmxp4_154:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: 2px;
   border-radius: var(--border-radius-container-b3z48i, 16px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-nwfxo7, #0972d3);
 }
 
-.awsui_cell-merged_wih1l_16d38_190:not(#\9) {
+.awsui_cell-merged_wih1l_nmxp4_190:not(#\9) {
   text-align: center;
   padding: 0;
 }
-.awsui_cell-merged_wih1l_16d38_190.awsui_has-footer_wih1l_16d38_173:not(#\9) {
+.awsui_cell-merged_wih1l_nmxp4_190.awsui_has-footer_wih1l_nmxp4_173:not(#\9) {
   /*
   Add a bottom border to the body cell of an empty table as a separator between the 
   table and the footer
   */
   border-bottom: var(--border-divider-section-width-g0ay3c, 2px) solid var(--color-border-divider-default-4spq70, #e9ebed);
 }
-.awsui_cell-merged-content_wih1l_16d38_201:not(#\9) {
+.awsui_cell-merged-content_wih1l_nmxp4_201:not(#\9) {
   box-sizing: border-box;
   width: 100%;
   padding: var(--space-scaled-m-9q5ipc, 16px) var(--space-l-ds615y, 20px) var(--space-scaled-l-x5pubp, 20px);
@@ -206,18 +206,18 @@ body[data-awsui-focus-visible=true] .awsui_wrapper_wih1l_16d38_154:not(#\9):focu
   /* stylelint-enable plugin/no-unsupported-browser-features */
 }
 @supports (position: sticky) {
-  .awsui_cell-merged-content_wih1l_16d38_201:not(#\9) {
+  .awsui_cell-merged-content_wih1l_nmxp4_201:not(#\9) {
     position: sticky;
     left: 0;
     margin: 0 calc(-2 * var(--space-table-horizontal-nhrpfz, 20px));
   }
 }
 
-.awsui_empty_wih1l_16d38_216:not(#\9) {
+.awsui_empty_wih1l_nmxp4_216:not(#\9) {
   color: var(--color-text-empty-qnnj2s, #5f6b7a);
 }
 
-.awsui_loading_wih1l_16d38_220:not(#\9) {
+.awsui_loading_wih1l_nmxp4_220:not(#\9) {
   /* used in test-utils */
 }
 
@@ -226,19 +226,19 @@ The min/max/width token values in Visual Refresh should align
 the table header and body cells selection control with the table
 filter search icon.
 */
-.awsui_selection-control_wih1l_16d38_229:not(#\9) {
+.awsui_selection-control_wih1l_nmxp4_229:not(#\9) {
   box-sizing: border-box;
   max-width: var(--size-table-selection-horizontal-dshi7g, 40px);
   min-width: var(--size-table-selection-horizontal-dshi7g, 40px);
   position: relative;
   width: var(--size-table-selection-horizontal-dshi7g, 40px);
 }
-.awsui_selection-control_wih1l_16d38_229.awsui_selection-control-header_wih1l_16d38_236:not(#\9) {
+.awsui_selection-control_wih1l_nmxp4_229.awsui_selection-control-header_wih1l_nmxp4_236:not(#\9) {
   padding: var(--space-scaled-xs-u0e7ft, 8px) var(--space-scaled-l-x5pubp, 20px);
   border-left: var(--border-item-width-4pi0dw, 2px) solid transparent;
 }
 
-.awsui_sticky-scrollbar_wih1l_16d38_241:not(#\9) {
+.awsui_sticky-scrollbar_wih1l_nmxp4_241:not(#\9) {
   height: 15px;
   position: sticky;
   display: none;
@@ -247,13 +247,13 @@ filter search icon.
   bottom: 0;
   width: 100%;
 }
-.awsui_sticky-scrollbar-content_wih1l_16d38_250:not(#\9) {
+.awsui_sticky-scrollbar-content_wih1l_nmxp4_250:not(#\9) {
   height: 15px;
 }
-.awsui_sticky-scrollbar-visible_wih1l_16d38_253:not(#\9) {
+.awsui_sticky-scrollbar-visible_wih1l_nmxp4_253:not(#\9) {
   display: block;
 }
-.awsui_sticky-scrollbar-native-invisible_wih1l_16d38_256:not(#\9) {
+.awsui_sticky-scrollbar-native-invisible_wih1l_nmxp4_256:not(#\9) {
   margin-top: -15px;
 }
 
@@ -261,12 +261,12 @@ filter search icon.
 The dynamic height dark header needs a background that will cover
 the default white background of the container component.
 */
-.awsui_dark-header_wih1l_16d38_264:not(#\9) {
+.awsui_dark-header_wih1l_nmxp4_264:not(#\9) {
   background-color: var(--color-background-layout-main-iz43sl, #ffffff);
   color: var(--color-text-body-default-01bwmw, #000716);
 }
 
-.awsui_header-secondary_wih1l_16d38_269:not(#\9) {
+.awsui_header-secondary_wih1l_nmxp4_269:not(#\9) {
   overflow: auto;
   -ms-overflow-style: none; /* Internet Explorer 10+ */
   scrollbar-width: none; /* Firefox */
@@ -275,42 +275,45 @@ the default white background of the container component.
   border-radius: 0;
   background: var(--color-background-table-header-shne10, #ffffff);
 }
-.awsui_header-secondary_wih1l_16d38_269.awsui_variant-stacked_wih1l_16d38_163 > .awsui_table_wih1l_16d38_144:not(#\9), .awsui_header-secondary_wih1l_16d38_269.awsui_variant-container_wih1l_16d38_163 > .awsui_table_wih1l_16d38_144:not(#\9) {
+.awsui_header-secondary_wih1l_nmxp4_269.awsui_variant-stacked_wih1l_nmxp4_163 > .awsui_table_wih1l_nmxp4_144:not(#\9), .awsui_header-secondary_wih1l_nmxp4_269.awsui_variant-container_wih1l_nmxp4_163 > .awsui_table_wih1l_nmxp4_144:not(#\9) {
   padding-left: var(--space-table-horizontal-nhrpfz, 20px);
   padding-right: var(--space-table-horizontal-nhrpfz, 20px);
 }
-.awsui_header-secondary_wih1l_16d38_269:not(#\9)::-webkit-scrollbar {
+.awsui_header-secondary_wih1l_nmxp4_269:not(#\9)::-webkit-scrollbar {
   display: none; /* Safari and Chrome */
 }
-.awsui_header-secondary_wih1l_16d38_269.awsui_table-has-header_wih1l_16d38_285:not(#\9) {
+.awsui_header-secondary_wih1l_nmxp4_269.awsui_table-has-header_wih1l_nmxp4_285:not(#\9) {
   border-top: var(--border-divider-list-width-fsy9j8, 1px) solid var(--color-border-container-divider-qsuvq6, transparent);
 }
 
-.awsui_header-controls_wih1l_16d38_289:not(#\9) {
+.awsui_header-controls_wih1l_nmxp4_289:not(#\9) {
   padding-top: var(--space-container-header-vertical-gho8eg, 12px);
   padding-bottom: var(--space-container-header-vertical-gho8eg, 12px);
 }
-.awsui_header-controls_wih1l_16d38_289.awsui_variant-stacked_wih1l_16d38_163:not(#\9), .awsui_header-controls_wih1l_16d38_289.awsui_variant-container_wih1l_16d38_163:not(#\9) {
+.awsui_header-controls_wih1l_nmxp4_289.awsui_variant-full-page_wih1l_nmxp4_293:not(#\9) {
+  padding-top: 0;
+}
+.awsui_header-controls_wih1l_nmxp4_289.awsui_variant-stacked_wih1l_nmxp4_163:not(#\9), .awsui_header-controls_wih1l_nmxp4_289.awsui_variant-container_wih1l_nmxp4_163:not(#\9) {
   padding-left: calc(var(--space-table-horizontal-nhrpfz, 20px) + var(--space-table-header-horizontal-jj2vbh, 0px));
   padding-right: calc(var(--space-table-horizontal-nhrpfz, 20px) + var(--space-table-header-horizontal-jj2vbh, 0px));
 }
-.awsui_header-controls_wih1l_16d38_289.awsui_variant-embedded_wih1l_16d38_167:not(#\9), .awsui_header-controls_wih1l_16d38_289.awsui_variant-borderless_wih1l_16d38_167:not(#\9) {
+.awsui_header-controls_wih1l_nmxp4_289.awsui_variant-embedded_wih1l_nmxp4_167:not(#\9), .awsui_header-controls_wih1l_nmxp4_289.awsui_variant-borderless_wih1l_nmxp4_167:not(#\9) {
   padding-left: var(--space-table-header-horizontal-jj2vbh, 0px);
   padding-right: var(--space-table-header-horizontal-jj2vbh, 0px);
   padding-top: var(--space-table-embedded-header-top-8tml9f, 0px);
 }
 
-.awsui_footer-wrapper_wih1l_16d38_303.awsui_variant-stacked_wih1l_16d38_163:not(#\9), .awsui_footer-wrapper_wih1l_16d38_303.awsui_variant-container_wih1l_16d38_163:not(#\9) {
+.awsui_footer-wrapper_wih1l_nmxp4_306.awsui_variant-stacked_wih1l_nmxp4_163:not(#\9), .awsui_footer-wrapper_wih1l_nmxp4_306.awsui_variant-container_wih1l_nmxp4_163:not(#\9) {
   padding-left: var(--space-table-horizontal-nhrpfz, 20px);
   padding-right: var(--space-table-horizontal-nhrpfz, 20px);
 }
 
-.awsui_footer_wih1l_16d38_303:not(#\9) {
+.awsui_footer_wih1l_nmxp4_306:not(#\9) {
   padding: var(--space-scaled-s-gczsk7, 12px) var(--space-table-footer-horizontal-ezw6u7, 0px);
 }
 
-.awsui_thead-active_wih1l_16d38_312:not(#\9),
-.awsui_row_wih1l_16d38_313:not(#\9),
-.awsui_row-selected_wih1l_16d38_314:not(#\9) {
+.awsui_thead-active_wih1l_nmxp4_315:not(#\9),
+.awsui_row_wih1l_nmxp4_316:not(#\9),
+.awsui_row-selected_wih1l_nmxp4_317:not(#\9) {
   /* used in test-utils */
 }

package/table/styles.selectors.js

@@ -2,40 +2,41 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_wih1l_16d38_97",
-  "tools": "awsui_tools_wih1l_16d38_108",
-  "tools-filtering": "awsui_tools-filtering_wih1l_16d38_114",
-  "tools-align-right": "awsui_tools-align-right_wih1l_16d38_128",
-  "tools-pagination": "awsui_tools-pagination_wih1l_16d38_132",
-  "tools-preferences": "awsui_tools-preferences_wih1l_16d38_132",
-  "tools-small": "awsui_tools-small_wih1l_16d38_138",
-  "table": "awsui_table_wih1l_16d38_144",
-  "table-layout-fixed": "awsui_table-layout-fixed_wih1l_16d38_150",
-  "wrapper": "awsui_wrapper_wih1l_16d38_154",
-  "variant-stacked": "awsui_variant-stacked_wih1l_16d38_163",
-  "variant-container": "awsui_variant-container_wih1l_16d38_163",
-  "variant-embedded": "awsui_variant-embedded_wih1l_16d38_167",
-  "variant-borderless": "awsui_variant-borderless_wih1l_16d38_167",
-  "has-header": "awsui_has-header_wih1l_16d38_170",
-  "has-footer": "awsui_has-footer_wih1l_16d38_173",
-  "cell-merged": "awsui_cell-merged_wih1l_16d38_190",
-  "cell-merged-content": "awsui_cell-merged-content_wih1l_16d38_201",
-  "empty": "awsui_empty_wih1l_16d38_216",
-  "loading": "awsui_loading_wih1l_16d38_220",
-  "selection-control": "awsui_selection-control_wih1l_16d38_229",
-  "selection-control-header": "awsui_selection-control-header_wih1l_16d38_236",
-  "sticky-scrollbar": "awsui_sticky-scrollbar_wih1l_16d38_241",
-  "sticky-scrollbar-content": "awsui_sticky-scrollbar-content_wih1l_16d38_250",
-  "sticky-scrollbar-visible": "awsui_sticky-scrollbar-visible_wih1l_16d38_253",
-  "sticky-scrollbar-native-invisible": "awsui_sticky-scrollbar-native-invisible_wih1l_16d38_256",
-  "dark-header": "awsui_dark-header_wih1l_16d38_264",
-  "header-secondary": "awsui_header-secondary_wih1l_16d38_269",
-  "table-has-header": "awsui_table-has-header_wih1l_16d38_285",
-  "header-controls": "awsui_header-controls_wih1l_16d38_289",
-  "footer-wrapper": "awsui_footer-wrapper_wih1l_16d38_303",
-  "footer": "awsui_footer_wih1l_16d38_303",
-  "thead-active": "awsui_thead-active_wih1l_16d38_312",
-  "row": "awsui_row_wih1l_16d38_313",
-  "row-selected": "awsui_row-selected_wih1l_16d38_314"
+  "root": "awsui_root_wih1l_nmxp4_97",
+  "tools": "awsui_tools_wih1l_nmxp4_108",
+  "tools-filtering": "awsui_tools-filtering_wih1l_nmxp4_114",
+  "tools-align-right": "awsui_tools-align-right_wih1l_nmxp4_128",
+  "tools-pagination": "awsui_tools-pagination_wih1l_nmxp4_132",
+  "tools-preferences": "awsui_tools-preferences_wih1l_nmxp4_132",
+  "tools-small": "awsui_tools-small_wih1l_nmxp4_138",
+  "table": "awsui_table_wih1l_nmxp4_144",
+  "table-layout-fixed": "awsui_table-layout-fixed_wih1l_nmxp4_150",
+  "wrapper": "awsui_wrapper_wih1l_nmxp4_154",
+  "variant-stacked": "awsui_variant-stacked_wih1l_nmxp4_163",
+  "variant-container": "awsui_variant-container_wih1l_nmxp4_163",
+  "variant-embedded": "awsui_variant-embedded_wih1l_nmxp4_167",
+  "variant-borderless": "awsui_variant-borderless_wih1l_nmxp4_167",
+  "has-header": "awsui_has-header_wih1l_nmxp4_170",
+  "has-footer": "awsui_has-footer_wih1l_nmxp4_173",
+  "cell-merged": "awsui_cell-merged_wih1l_nmxp4_190",
+  "cell-merged-content": "awsui_cell-merged-content_wih1l_nmxp4_201",
+  "empty": "awsui_empty_wih1l_nmxp4_216",
+  "loading": "awsui_loading_wih1l_nmxp4_220",
+  "selection-control": "awsui_selection-control_wih1l_nmxp4_229",
+  "selection-control-header": "awsui_selection-control-header_wih1l_nmxp4_236",
+  "sticky-scrollbar": "awsui_sticky-scrollbar_wih1l_nmxp4_241",
+  "sticky-scrollbar-content": "awsui_sticky-scrollbar-content_wih1l_nmxp4_250",
+  "sticky-scrollbar-visible": "awsui_sticky-scrollbar-visible_wih1l_nmxp4_253",
+  "sticky-scrollbar-native-invisible": "awsui_sticky-scrollbar-native-invisible_wih1l_nmxp4_256",
+  "dark-header": "awsui_dark-header_wih1l_nmxp4_264",
+  "header-secondary": "awsui_header-secondary_wih1l_nmxp4_269",
+  "table-has-header": "awsui_table-has-header_wih1l_nmxp4_285",
+  "header-controls": "awsui_header-controls_wih1l_nmxp4_289",
+  "variant-full-page": "awsui_variant-full-page_wih1l_nmxp4_293",
+  "footer-wrapper": "awsui_footer-wrapper_wih1l_nmxp4_306",
+  "footer": "awsui_footer_wih1l_nmxp4_306",
+  "thead-active": "awsui_thead-active_wih1l_nmxp4_315",
+  "row": "awsui_row_wih1l_nmxp4_316",
+  "row-selected": "awsui_row-selected_wih1l_nmxp4_317"
 };
   

package/tabs/interfaces.d.ts

@@ -52,6 +52,7 @@ export interface TabsProps extends BaseComponentProps {
     disableContentPaddings?: boolean;
     /**
      * An object containing all the necessary localized strings required by the component.
+     * @i18n
      */
     i18nStrings?: TabsProps.I18nStrings;
 }

package/tabs/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["tabs/interfaces.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,SAAU,SAAQ,kBAAkB;IACnD;;;;;;;;;;;;OAYG;IACH,IAAI,EAAE,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;IAEnC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC;IAE5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;IAE7D;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;CACrC;AACD,yBAAiB,SAAS,CAAC;IACzB,KAAY,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;IAE1D,UAAiB,GAAG;QAClB;;WAEG;QACH,EAAE,EAAE,MAAM,CAAC;QACX;;WAEG;QACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB;;WAEG;QACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B;;WAEG;QACH,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB;;;;;;WAMG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;KACf;IAED,UAAiB,YAAY;QAC3B;;WAEG;QACH,WAAW,EAAE,MAAM,CAAC;QACpB;;WAEG;QACH,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB;IAED,UAAiB,WAAW;QAC1B;;WAEG;QACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B;;WAEG;QACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;KAC/B;CACF"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["tabs/interfaces.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,SAAU,SAAQ,kBAAkB;IACnD;;;;;;;;;;;;OAYG;IACH,IAAI,EAAE,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;IAEnC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC;IAE5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;IAE7D;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;CACrC;AACD,yBAAiB,SAAS,CAAC;IACzB,KAAY,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;IAE1D,UAAiB,GAAG;QAClB;;WAEG;QACH,EAAE,EAAE,MAAM,CAAC;QACX;;WAEG;QACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB;;WAEG;QACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B;;WAEG;QACH,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB;;;;;;WAMG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;KACf;IAED,UAAiB,YAAY;QAC3B;;WAEG;QACH,WAAW,EAAE,MAAM,CAAC;QACpB;;WAEG;QACH,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB;IAED,UAAiB,WAAW;QAC1B;;WAEG;QACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B;;WAEG;QACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;KAC/B;CACF"}

package/tabs/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["tabs/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface TabsProps extends BaseComponentProps {\n  /**\n   * Specifies the tabs to display. Each tab object has the following properties:\n   *\n   * - `id` (string) - The tab identifier. This value needs to be passed to the Tabs component as `activeTabId` to select this tab.\n   * - `label` (ReactNode) - Tab label shown in the UI.\n   * - `content` (ReactNode) - (Optional) Tab content to render in the container.\n   * - `disabled` (boolean) - (Optional) Specifies if this tab is disabled.\n   * - `href` (string) - (Optional) You can use this parameter to change the default `href` of the internal tab anchor. The\n   *    `click` event default behavior is prevented, unless the user clicks the tab with a key modifier (that is, CTRL,\n   *    ALT, SHIFT, META). This enables the user to open new browser tabs with an initially selected component tab,\n   *    if your application routing can handle such deep links. You can manually update routing on the current page\n   *    using the `activeTabHref` property of the `change` event's detail.\n   */\n  tabs: ReadonlyArray<TabsProps.Tab>;\n\n  /**\n   * The possible visual variants of tabs are the following:\n   * * `default` - Use in any context.\n   * * `container` - Use this variant to have the tabs displayed within a container header.\n   * * `stacked` - Use this variant directly adjacent to other stacked containers (such as a container, table).\n   * @visualrefresh `stacked` variant\n   */\n  variant?: TabsProps.Variant;\n\n  /**\n   * Called whenever the user selects a different tab.\n   * The event's `detail` contains the new `activeTabId`.\n   */\n  onChange?: NonCancelableEventHandler<TabsProps.ChangeDetail>;\n\n  /**\n   * The `id` of the currently active tab.\n   * * If you don't set this property, the component activates the first tab and switches tabs automatically when a tab header is clicked (that is, uncontrolled behavior).\n   * * If you explicitly set this property, you must set define an `onChange` handler to update the property when a tab header is clicked (that is, controlled behavior).\n   */\n  activeTabId?: string;\n\n  /**\n   * Provides an `aria-label` to the tab container.\n   * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Sets the `aria-labelledby` property on the tab container.\n   * If there's a visible label element that you can reference, use this instead of `ariaLabel`.\n   * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n   */\n  ariaLabelledby?: string;\n\n  /**\n   * Determines whether the tab content has padding. If `true`, removes the default padding from the tab content area.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   */\n  i18nStrings?: TabsProps.I18nStrings;\n}\nexport namespace TabsProps {\n  export type Variant = 'default' | 'container' | 'stacked';\n\n  export interface Tab {\n    /**\n     * The tab id. This value will be need to be passed to the Tabs component as `activeTabId` to select this tab.\n     */\n    id: string;\n    /**\n     * Tab label shown in the UI.\n     */\n    label: React.ReactNode;\n    /**\n     * Tab content to render in the container.\n     */\n    content?: React.ReactNode;\n    /**\n     * Whether this tab is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * You can use this parameter to change the default `href` of the internal tab anchor. The\n     * `click` event default behavior is prevented, unless the user clicks the tab with a key modifier (CTRL,\n     * ALT, SHIFT, META). This allows to open new browser tabs with an initially selected component tab,\n     * when the routing can handle such deep links. You can manually update routing on the current page\n     * using the `activeTabHref` property of the `change` event's detail.\n     */\n    href?: string;\n  }\n\n  export interface ChangeDetail {\n    /**\n     * The ID of the clicked tab.\n     */\n    activeTabId: string;\n    /**\n     * The `href` attribute of the clicked tab, if defined.\n     */\n    activeTabHref?: string;\n  }\n\n  export interface I18nStrings {\n    /**\n     * ARIA label for the scroll left button that appears when the tab header is wider than the container.\n     */\n    scrollLeftAriaLabel?: string;\n    /**\n     * ARIA label for the scroll right button that appears when the tab header is wider than the container.\n     */\n    scrollRightAriaLabel?: string;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["tabs/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface TabsProps extends BaseComponentProps {\n  /**\n   * Specifies the tabs to display. Each tab object has the following properties:\n   *\n   * - `id` (string) - The tab identifier. This value needs to be passed to the Tabs component as `activeTabId` to select this tab.\n   * - `label` (ReactNode) - Tab label shown in the UI.\n   * - `content` (ReactNode) - (Optional) Tab content to render in the container.\n   * - `disabled` (boolean) - (Optional) Specifies if this tab is disabled.\n   * - `href` (string) - (Optional) You can use this parameter to change the default `href` of the internal tab anchor. The\n   *    `click` event default behavior is prevented, unless the user clicks the tab with a key modifier (that is, CTRL,\n   *    ALT, SHIFT, META). This enables the user to open new browser tabs with an initially selected component tab,\n   *    if your application routing can handle such deep links. You can manually update routing on the current page\n   *    using the `activeTabHref` property of the `change` event's detail.\n   */\n  tabs: ReadonlyArray<TabsProps.Tab>;\n\n  /**\n   * The possible visual variants of tabs are the following:\n   * * `default` - Use in any context.\n   * * `container` - Use this variant to have the tabs displayed within a container header.\n   * * `stacked` - Use this variant directly adjacent to other stacked containers (such as a container, table).\n   * @visualrefresh `stacked` variant\n   */\n  variant?: TabsProps.Variant;\n\n  /**\n   * Called whenever the user selects a different tab.\n   * The event's `detail` contains the new `activeTabId`.\n   */\n  onChange?: NonCancelableEventHandler<TabsProps.ChangeDetail>;\n\n  /**\n   * The `id` of the currently active tab.\n   * * If you don't set this property, the component activates the first tab and switches tabs automatically when a tab header is clicked (that is, uncontrolled behavior).\n   * * If you explicitly set this property, you must set define an `onChange` handler to update the property when a tab header is clicked (that is, controlled behavior).\n   */\n  activeTabId?: string;\n\n  /**\n   * Provides an `aria-label` to the tab container.\n   * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Sets the `aria-labelledby` property on the tab container.\n   * If there's a visible label element that you can reference, use this instead of `ariaLabel`.\n   * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n   */\n  ariaLabelledby?: string;\n\n  /**\n   * Determines whether the tab content has padding. If `true`, removes the default padding from the tab content area.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   * @i18n\n   */\n  i18nStrings?: TabsProps.I18nStrings;\n}\nexport namespace TabsProps {\n  export type Variant = 'default' | 'container' | 'stacked';\n\n  export interface Tab {\n    /**\n     * The tab id. This value will be need to be passed to the Tabs component as `activeTabId` to select this tab.\n     */\n    id: string;\n    /**\n     * Tab label shown in the UI.\n     */\n    label: React.ReactNode;\n    /**\n     * Tab content to render in the container.\n     */\n    content?: React.ReactNode;\n    /**\n     * Whether this tab is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * You can use this parameter to change the default `href` of the internal tab anchor. The\n     * `click` event default behavior is prevented, unless the user clicks the tab with a key modifier (CTRL,\n     * ALT, SHIFT, META). This allows to open new browser tabs with an initially selected component tab,\n     * when the routing can handle such deep links. You can manually update routing on the current page\n     * using the `activeTabHref` property of the `change` event's detail.\n     */\n    href?: string;\n  }\n\n  export interface ChangeDetail {\n    /**\n     * The ID of the clicked tab.\n     */\n    activeTabId: string;\n    /**\n     * The `href` attribute of the clicked tab, if defined.\n     */\n    activeTabHref?: string;\n  }\n\n  export interface I18nStrings {\n    /**\n     * ARIA label for the scroll left button that appears when the tab header is wider than the container.\n     */\n    scrollLeftAriaLabel?: string;\n    /**\n     * ARIA label for the scroll right button that appears when the tab header is wider than the container.\n     */\n    scrollRightAriaLabel?: string;\n  }\n}\n"]}

package/tag-editor/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["tag-editor/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6E,MAAM,OAAO,CAAC;AAgBlG,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAS9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAS1B,QAAA,MAAM,SAAS,2FAgRd,CAAC;AAGF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["tag-editor/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6E,MAAM,OAAO,CAAC;AAgBlG,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAU9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAS1B,QAAA,MAAM,SAAS,2FAkSd,CAAC;AAGF,eAAe,SAAS,CAAC"}