@cloudscape-design/components 3.0.1014 → 3.0.1016

package/list/interfaces.d.ts

@@ -0,0 +1,82 @@
+import { ReactNode } from 'react';
+import { SortableAreaProps } from '../internal/components/sortable-area';
+import { NonCancelableEventHandler } from '../internal/events';
+export interface ListProps<T = any> {
+  /**
+   * The items to display in the list.
+   */
+  items: ReadonlyArray<T>;
+  /**
+   * Render an item. The function should return an object with the following keys:
+   * * `id` (string) - A unique identifier for the item.
+   * * `content` (React.ReactNode) - The content of the item.
+   * * `secondaryContent` (React.ReactNode) - (Optional) Secondary content, for example item description.
+   * * `icon` (React.ReactNode) - (Optional) An icon, displayed at the start.
+   * * `action` (React.ReactNode) - (Optional) Action button(s).
+   * * `announcementLabel` (string) - (Optional) An announcement label for the item, used when sorting.
+   *    By default, the `content` is used: a custom label should be provided if `content` is not a string.
+   */
+  renderItem: (item: T) => {
+    id: string;
+    content: ReactNode;
+    secondaryContent?: ReactNode;
+    icon?: ReactNode;
+    action?: ReactNode;
+    announcementLabel?: string;
+  };
+  /**
+   * The HTML tag to render. By default `ul` is used for standard lists and `ol` for sortable lists.
+   */
+  tagOverride?: 'ol' | 'ul';
+  /**
+   * Adds an aria-label to the list.
+   */
+  ariaLabel?: string;
+  /**
+   * Adds an aria-labelledby to the list.
+   */
+  ariaLabelledby?: string;
+  /**
+   * Adds an aria-describedby to the list.
+   */
+  ariaDescribedby?: string;
+  /**
+   * Makes the list sortable by enabling drag and drop functionality.
+   */
+  sortable?: boolean;
+  /**
+   * Disables sorting drag handles. Use this to temporarily prevent users from reordering the list.
+   */
+  sortDisabled?: boolean;
+  /**
+   * Removes padding around and inside list items.
+   */
+  disableItemPaddings?: boolean;
+  /**
+   * Removes top and bottom padding around the list. Does not apply for sortable lists.
+   */
+  disablePaddings?: boolean;
+  /**
+   * Called when items are reordered in a sortable list.
+   */
+  onSortingChange?: NonCancelableEventHandler<ListProps.SortingState<T>>;
+  /**
+   * An object containing all the localized strings required by the component.
+   *
+   * - `liveAnnouncementDndStarted` ((position: number, total: number) => string) - (Optional) Adds a message to be announced by screen readers when an item is picked for reordering.
+   * - `liveAnnouncementDndDiscarded` (string) - (Optional) Adds a message to be announced by screen readers when a reordering action is canceled.
+   * - `liveAnnouncementDndItemReordered` ((initialPosition: number, currentPosition: number, total: number) => string) - (Optional) Adds a message to be announced by screen readers when an item is being moved.
+   * - `liveAnnouncementDndItemCommitted` ((initialPosition: number, finalPosition: number, total: number) => string) - (Optional) Adds a message to be announced by screen readers when a reordering action is committed.
+   * - `dragHandleAriaDescription` (string) - (Optional) Adds an ARIA description for the drag handle.
+   * - `dragHandleAriaLabel` (string) - (Optional) Adds an ARIA label for the drag handle.
+   *
+   * @i18n
+   */
+  i18nStrings?: ListProps.I18nStrings;
+}
+export declare namespace ListProps {
+  interface SortingState<T> {
+    items: ReadonlyArray<T>;
+  }
+  type I18nStrings = SortableAreaProps.DndAreaI18nStrings;
+}

package/list/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/list/interfaces.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AACzE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,SAAS,CAAC,CAAC,GAAG,GAAG;IAChC;;OAEG;IACH,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IAExB;;;;;;;;;OASG;IACH,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK;QACvB,EAAE,EAAE,MAAM,CAAC;QACX,OAAO,EAAE,SAAS,CAAC;QACnB,gBAAgB,CAAC,EAAE,SAAS,CAAC;QAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;QACjB,MAAM,CAAC,EAAE,SAAS,CAAC;QACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;KAC5B,CAAC;IAEF;;OAEG;IACH,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAE1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,yBAAyB,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;IACvE;;;;;;;;;;;OAWG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;CACrC;AAED,yBAAiB,SAAS,CAAC;IACzB,UAAiB,YAAY,CAAC,CAAC;QAC7B,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;KACzB;IAED,KAAY,WAAW,GAAG,iBAAiB,CAAC,kBAAkB,CAAC;CAChE"}

package/list/interfaces.js

@@ -0,0 +1,4 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+export {};
+//# sourceMappingURL=interfaces.js.map

package/list/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/list/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { ReactNode } from 'react';\n\nimport { SortableAreaProps } from '../internal/components/sortable-area';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface ListProps<T = any> {\n  /**\n   * The items to display in the list.\n   */\n  items: ReadonlyArray<T>;\n\n  /**\n   * Render an item. The function should return an object with the following keys:\n   * * `id` (string) - A unique identifier for the item.\n   * * `content` (React.ReactNode) - The content of the item.\n   * * `secondaryContent` (React.ReactNode) - (Optional) Secondary content, for example item description.\n   * * `icon` (React.ReactNode) - (Optional) An icon, displayed at the start.\n   * * `action` (React.ReactNode) - (Optional) Action button(s).\n   * * `announcementLabel` (string) - (Optional) An announcement label for the item, used when sorting.\n   *    By default, the `content` is used: a custom label should be provided if `content` is not a string.\n   */\n  renderItem: (item: T) => {\n    id: string;\n    content: ReactNode;\n    secondaryContent?: ReactNode;\n    icon?: ReactNode;\n    action?: ReactNode;\n    announcementLabel?: string;\n  };\n\n  /**\n   * The HTML tag to render. By default `ul` is used for standard lists and `ol` for sortable lists.\n   */\n  tagOverride?: 'ol' | 'ul';\n\n  /**\n   * Adds an aria-label to the list.\n   */\n  ariaLabel?: string;\n  /**\n   * Adds an aria-labelledby to the list.\n   */\n  ariaLabelledby?: string;\n  /**\n   * Adds an aria-describedby to the list.\n   */\n  ariaDescribedby?: string;\n  /**\n   * Makes the list sortable by enabling drag and drop functionality.\n   */\n  sortable?: boolean;\n  /**\n   * Disables sorting drag handles. Use this to temporarily prevent users from reordering the list.\n   */\n  sortDisabled?: boolean;\n  /**\n   * Removes padding around and inside list items.\n   */\n  disableItemPaddings?: boolean;\n  /**\n   * Removes top and bottom padding around the list. Does not apply for sortable lists.\n   */\n  disablePaddings?: boolean;\n  /**\n   * Called when items are reordered in a sortable list.\n   */\n  onSortingChange?: NonCancelableEventHandler<ListProps.SortingState<T>>;\n  /**\n   * An object containing all the localized strings required by the component.\n   *\n   * - `liveAnnouncementDndStarted` ((position: number, total: number) => string) - (Optional) Adds a message to be announced by screen readers when an item is picked for reordering.\n   * - `liveAnnouncementDndDiscarded` (string) - (Optional) Adds a message to be announced by screen readers when a reordering action is canceled.\n   * - `liveAnnouncementDndItemReordered` ((initialPosition: number, currentPosition: number, total: number) => string) - (Optional) Adds a message to be announced by screen readers when an item is being moved.\n   * - `liveAnnouncementDndItemCommitted` ((initialPosition: number, finalPosition: number, total: number) => string) - (Optional) Adds a message to be announced by screen readers when a reordering action is committed.\n   * - `dragHandleAriaDescription` (string) - (Optional) Adds an ARIA description for the drag handle.\n   * - `dragHandleAriaLabel` (string) - (Optional) Adds an ARIA label for the drag handle.\n   *\n   * @i18n\n   */\n  i18nStrings?: ListProps.I18nStrings;\n}\n\nexport namespace ListProps {\n  export interface SortingState<T> {\n    items: ReadonlyArray<T>;\n  }\n\n  export type I18nStrings = SortableAreaProps.DndAreaI18nStrings;\n}\n"]}

package/list/internal.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
+import { ListProps } from './interfaces';
+type InternalListProps<T = any> = InternalBaseComponentProps & ListProps<T>;
+export default function InternalList<T = any>({
+  items,
+  renderItem,
+  sortable,
+  sortDisabled,
+  tagOverride: Tag,
+  ariaLabel,
+  ariaLabelledby,
+  ariaDescribedby,
+  onSortingChange,
+  i18nStrings,
+  disablePaddings,
+  disableItemPaddings,
+  __internalRootRef,
+  ...rest
+}: InternalListProps<T>): JSX.Element;
+export {};

package/list/internal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/list/internal.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKzC,KAAK,iBAAiB,CAAC,CAAC,GAAG,GAAG,IAAI,0BAA0B,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;AAS5E,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,CAAC,GAAG,GAAG,EAAE,EAC5C,KAAK,EACL,UAAU,EACV,QAAgB,EAChB,YAAoB,EACpB,WAAW,EAAE,GAA4B,EACzC,SAAS,EACT,cAAc,EACd,eAAe,EACf,eAAe,EACf,WAAW,EACX,eAAe,EACf,mBAAmB,EACnB,iBAAwB,EACxB,GAAG,IAAI,EACR,EAAE,iBAAiB,CAAC,CAAC,CAAC,eAuGtB"}

package/list/internal.js

@@ -0,0 +1,62 @@
+import { __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import clsx from 'clsx';
+import { useInternalI18n } from '../i18n/context';
+import { getBaseProps } from '../internal/base-component';
+import InternalDragHandle from '../internal/components/drag-handle';
+import SortableArea from '../internal/components/sortable-area';
+import { formatDndItemCommitted, formatDndItemReordered, formatDndStarted, } from '../internal/components/sortable-area/use-live-announcements';
+import InternalStructuredItem from '../internal/components/structured-item';
+import { fireNonCancelableEvent } from '../internal/events';
+import styles from './styles.css.js';
+import testClasses from './test-classes/styles.css.js';
+const extractValidStructuredItemProps = ({ content, secondaryContent, icon, actions }) => ({
+    content,
+    secondaryContent,
+    icon,
+    actions,
+});
+export default function InternalList(_a) {
+    var { items, renderItem, sortable = false, sortDisabled = false, tagOverride: Tag = sortable ? 'ol' : 'ul', ariaLabel, ariaLabelledby, ariaDescribedby, onSortingChange, i18nStrings, disablePaddings, disableItemPaddings, __internalRootRef = null } = _a, rest = __rest(_a, ["items", "renderItem", "sortable", "sortDisabled", "tagOverride", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "onSortingChange", "i18nStrings", "disablePaddings", "disableItemPaddings", "__internalRootRef"]);
+    const baseProps = getBaseProps(rest);
+    const i18n = useInternalI18n('list');
+    let contents;
+    if (sortable) {
+        contents = (React.createElement(SortableArea, { items: items, disableReorder: sortDisabled, itemDefinition: {
+                id: item => renderItem(item).id,
+                label: item => {
+                    var _a;
+                    const details = renderItem(item);
+                    return (_a = details.announcementLabel) !== null && _a !== void 0 ? _a : details.content;
+                },
+            }, onItemsChange: event => fireNonCancelableEvent(onSortingChange, { items: event.detail.items }), i18nStrings: {
+                liveAnnouncementDndStarted: i18n('liveAnnouncementDndStarted', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.liveAnnouncementDndStarted, formatDndStarted),
+                liveAnnouncementDndItemReordered: i18n('liveAnnouncementDndItemReordered', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.liveAnnouncementDndItemReordered, formatDndItemReordered),
+                liveAnnouncementDndItemCommitted: i18n('liveAnnouncementDndItemCommitted', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.liveAnnouncementDndItemCommitted, formatDndItemCommitted),
+                liveAnnouncementDndDiscarded: i18n('liveAnnouncementDndDiscarded', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.liveAnnouncementDndDiscarded),
+                dragHandleAriaLabel: i18n('dragHandleAriaLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.dragHandleAriaLabel),
+                dragHandleAriaDescription: i18n('dragHandleAriaDescription', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.dragHandleAriaDescription),
+            }, renderItem: ({ ref, item, id, style, className, dragHandleProps, isDragGhost }) => {
+                const structuredItemProps = extractValidStructuredItemProps(renderItem(item));
+                const itemClass = clsx(styles.item, testClasses.item, disableItemPaddings && styles['disable-item-paddings'], styles['sortable-item'], className);
+                const content = (React.createElement(React.Fragment, null,
+                    React.createElement(InternalDragHandle, Object.assign({}, dragHandleProps)),
+                    React.createElement(InternalStructuredItem, Object.assign({}, structuredItemProps, { disablePaddings: disableItemPaddings }))));
+                if (isDragGhost) {
+                    return React.createElement("div", { className: itemClass }, content);
+                }
+                return (React.createElement("li", { ref: ref, className: itemClass, style: style, "data-testid": id }, content));
+            } }));
+    }
+    else {
+        contents = items === null || items === void 0 ? void 0 : items.map(item => {
+            const _a = renderItem(item), { id } = _a, structuredItemProps = __rest(_a, ["id"]);
+            return (React.createElement("li", { key: id, "data-testid": id, className: clsx(styles.item, testClasses.item, disablePaddings && styles['disable-paddings'], disableItemPaddings && styles['disable-item-paddings']) },
+                React.createElement(InternalStructuredItem, Object.assign({}, extractValidStructuredItemProps(structuredItemProps), { disablePaddings: disableItemPaddings }))));
+        });
+    }
+    return (React.createElement(Tag, Object.assign({ ref: __internalRootRef }, baseProps, { className: clsx(baseProps.className, styles.root, testClasses.root), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby }), contents));
+}
+//# sourceMappingURL=internal.js.map

package/list/internal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/list/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, { ReactNode } from 'react';\nimport clsx from 'clsx';\n\nimport { useInternalI18n } from '../i18n/context';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalDragHandle from '../internal/components/drag-handle';\nimport SortableArea from '../internal/components/sortable-area';\nimport {\n  formatDndItemCommitted,\n  formatDndItemReordered,\n  formatDndStarted,\n} from '../internal/components/sortable-area/use-live-announcements';\nimport InternalStructuredItem, { StructuredItemProps } from '../internal/components/structured-item';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { ListProps } from './interfaces';\n\nimport styles from './styles.css.js';\nimport testClasses from './test-classes/styles.css.js';\n\ntype InternalListProps<T = any> = InternalBaseComponentProps & ListProps<T>;\n\nconst extractValidStructuredItemProps = ({ content, secondaryContent, icon, actions }: StructuredItemProps) => ({\n  content,\n  secondaryContent,\n  icon,\n  actions,\n});\n\nexport default function InternalList<T = any>({\n  items,\n  renderItem,\n  sortable = false,\n  sortDisabled = false,\n  tagOverride: Tag = sortable ? 'ol' : 'ul',\n  ariaLabel,\n  ariaLabelledby,\n  ariaDescribedby,\n  onSortingChange,\n  i18nStrings,\n  disablePaddings,\n  disableItemPaddings,\n  __internalRootRef = null,\n  ...rest\n}: InternalListProps<T>) {\n  const baseProps = getBaseProps(rest);\n  const i18n = useInternalI18n('list');\n\n  let contents: ReactNode;\n  if (sortable) {\n    contents = (\n      <SortableArea\n        items={items}\n        disableReorder={sortDisabled}\n        itemDefinition={{\n          id: item => renderItem(item).id,\n          label: item => {\n            const details = renderItem(item);\n            return details.announcementLabel ?? (details.content as string);\n          },\n        }}\n        onItemsChange={event => fireNonCancelableEvent(onSortingChange, { items: event.detail.items })}\n        i18nStrings={{\n          liveAnnouncementDndStarted: i18n(\n            'liveAnnouncementDndStarted',\n            i18nStrings?.liveAnnouncementDndStarted,\n            formatDndStarted\n          ),\n          liveAnnouncementDndItemReordered: i18n(\n            'liveAnnouncementDndItemReordered',\n            i18nStrings?.liveAnnouncementDndItemReordered,\n            formatDndItemReordered\n          ),\n          liveAnnouncementDndItemCommitted: i18n(\n            'liveAnnouncementDndItemCommitted',\n            i18nStrings?.liveAnnouncementDndItemCommitted,\n            formatDndItemCommitted\n          ),\n          liveAnnouncementDndDiscarded: i18n('liveAnnouncementDndDiscarded', i18nStrings?.liveAnnouncementDndDiscarded),\n          dragHandleAriaLabel: i18n('dragHandleAriaLabel', i18nStrings?.dragHandleAriaLabel),\n          dragHandleAriaDescription: i18n('dragHandleAriaDescription', i18nStrings?.dragHandleAriaDescription),\n        }}\n        renderItem={({ ref, item, id, style, className, dragHandleProps, isDragGhost }) => {\n          const structuredItemProps = extractValidStructuredItemProps(renderItem(item));\n\n          const itemClass = clsx(\n            styles.item,\n            testClasses.item,\n            disableItemPaddings && styles['disable-item-paddings'],\n            styles['sortable-item'],\n            className\n          );\n\n          const content = (\n            <>\n              <InternalDragHandle {...dragHandleProps} />\n              <InternalStructuredItem {...structuredItemProps} disablePaddings={disableItemPaddings} />\n            </>\n          );\n\n          if (isDragGhost) {\n            return <div className={itemClass}>{content}</div>;\n          }\n\n          return (\n            <li ref={ref} className={itemClass} style={style} data-testid={id}>\n              {content}\n            </li>\n          );\n        }}\n      />\n    );\n  } else {\n    contents = items?.map(item => {\n      const { id, ...structuredItemProps } = renderItem(item);\n      return (\n        <li\n          key={id}\n          data-testid={id}\n          className={clsx(\n            styles.item,\n            testClasses.item,\n            disablePaddings && styles['disable-paddings'],\n            disableItemPaddings && styles['disable-item-paddings']\n          )}\n        >\n          <InternalStructuredItem\n            {...extractValidStructuredItemProps(structuredItemProps)}\n            disablePaddings={disableItemPaddings}\n          />\n        </li>\n      );\n    });\n  }\n\n  return (\n    <Tag\n      ref={__internalRootRef}\n      {...baseProps}\n      className={clsx(baseProps.className, styles.root, testClasses.root)}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n      aria-describedby={ariaDescribedby}\n    >\n      {contents}\n    </Tag>\n  );\n}\n"]}

package/list/styles.css.js

@@ -0,0 +1,10 @@
+
+    import './styles.scoped.css';
+    export default {
+  "root": "awsui_root_1axkx_1swaz_145",
+  "item": "awsui_item_1axkx_1swaz_183",
+  "disable-item-paddings": "awsui_disable-item-paddings_1axkx_1swaz_186",
+  "disable-paddings": "awsui_disable-paddings_1axkx_1swaz_189",
+  "sortable-item": "awsui_sortable-item_1axkx_1swaz_196"
+};
+  

package/list/styles.scoped.css

@@ -0,0 +1,202 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* Style used for links in slots/components that are text heavy, to help links stand out among
+surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
+.awsui_root_1axkx_1swaz_145:not(#\9) {
+  border-collapse: separate;
+  border-spacing: 0;
+  box-sizing: border-box;
+  caption-side: top;
+  cursor: auto;
+  direction: inherit;
+  empty-cells: show;
+  font-family: serif;
+  font-style: normal;
+  font-variant: normal;
+  font-stretch: normal;
+  hyphens: none;
+  letter-spacing: normal;
+  list-style: disc outside none;
+  tab-size: 8;
+  text-align: start;
+  text-indent: 0;
+  text-shadow: none;
+  text-transform: none;
+  visibility: visible;
+  white-space: normal;
+  word-spacing: normal;
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+  color: var(--color-text-body-default-vvtq8u, #0f141a);
+  font-weight: 400;
+  font-family: var(--font-family-base-gmnpzl, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+  list-style: none;
+  padding-block: 0;
+  padding-inline: 0;
+  margin-block: 0;
+  margin-inline: 0;
+  position: relative;
+}
+
+.awsui_item_1axkx_1swaz_183:not(#\9):not(:last-child) {
+  border-block-end: var(--border-divider-list-width-tdfx1x, 1px) solid var(--color-border-divider-secondary-qoitch, #ebebf0);
+}
+.awsui_item_1axkx_1swaz_183:not(#\9):not(.awsui_disable-item-paddings_1axkx_1swaz_186) {
+  padding-block: var(--space-scaled-xs-xwoogq, 8px);
+}
+.awsui_item_1axkx_1swaz_183:not(#\9):first-child.awsui_disable-paddings_1axkx_1swaz_189 {
+  padding-block-start: 0;
+}
+.awsui_item_1axkx_1swaz_183:not(#\9):last-child.awsui_disable-paddings_1axkx_1swaz_189 {
+  padding-block-end: 0;
+}
+
+.awsui_sortable-item_1axkx_1swaz_196:not(#\9) {
+  display: flex;
+  align-items: baseline;
+}
+.awsui_sortable-item_1axkx_1swaz_196:not(#\9):not(.awsui_disable-item-paddings_1axkx_1swaz_186) {
+  column-gap: var(--space-xxs-hwfkai, 4px);
+}

package/list/styles.selectors.js

@@ -0,0 +1,11 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "root": "awsui_root_1axkx_1swaz_145",
+  "item": "awsui_item_1axkx_1swaz_183",
+  "disable-item-paddings": "awsui_disable-item-paddings_1axkx_1swaz_186",
+  "disable-paddings": "awsui_disable-paddings_1axkx_1swaz_189",
+  "sortable-item": "awsui_sortable-item_1axkx_1swaz_196"
+};
+  

package/list/test-classes/styles.css.js

@@ -0,0 +1,7 @@
+
+    import './styles.scoped.css';
+    export default {
+  "root": "awsui_root_rckk5_b9f2m_5",
+  "item": "awsui_item_rckk5_b9f2m_6"
+};
+  

package/list/test-classes/styles.scoped.css

@@ -0,0 +1,8 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_root_rckk5_b9f2m_5:not(#\9),
+.awsui_item_rckk5_b9f2m_6:not(#\9) {
+  /* used in test-utils */
+}

package/list/test-classes/styles.selectors.js

@@ -0,0 +1,8 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "root": "awsui_root_rckk5_b9f2m_5",
+  "item": "awsui_item_rckk5_b9f2m_6"
+};
+  

package/package.json

@@ -74,6 +74,7 @@
     "./key-value-pairs": "./key-value-pairs/index.js",
     "./line-chart": "./line-chart/index.js",
     "./link": "./link/index.js",
+    "./list": "./list/index.js",
     "./live-region": "./live-region/index.js",
     "./mixed-line-bar-chart": "./mixed-line-bar-chart/index.js",
     "./modal": "./modal/index.js",
@@ -149,7 +150,7 @@
     "./internal/base-component/index.js",
     "./internal/base-component/styles.css.js"
   ],
-  "version": "3.0.1014",
+  "version": "3.0.1016",
   "repository": {
     "type": "git",
     "url": "https://github.com/cloudscape-design/components.git"

package/table/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/table/internal.tsx"],"names":[],"mappings":"AAyCA,OAAO,EAAE,mBAAmB,EAAwB,MAAM,cAAc,CAAC;AA2CzE,eAAO,MAAM,sBAAsB,qBAWX,CAAC;AAEzB,QAAA,MAAM,aAAa,qBAkpBK,CAAC;AAEzB,eAAe,aAAa,CAAC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/table/internal.tsx"],"names":[],"mappings":"AAyCA,OAAO,EAAE,mBAAmB,EAAwB,MAAM,cAAc,CAAC;AA2CzE,eAAO,MAAM,sBAAsB,qBAWX,CAAC;AAEzB,QAAA,MAAM,aAAa,qBAopBK,CAAC;AAEzB,eAAe,aAAa,CAAC"}

package/table/internal.js

@@ -366,7 +366,7 @@ const InternalTable = React.forwardRef((_a, ref) => {
                                                     (_a = stickyHeaderRef.current) === null || _a === void 0 ? void 0 : _a.scrollToRow(currentTarget);
                                                 }
                                             } }, focusMarkers.item, { onClick: onRowClickHandler && onRowClickHandler.bind(null, rowIndex, row.item), onContextMenu: onRowContextMenuHandler && onRowContextMenuHandler.bind(null, rowIndex, row.item) }, rowRoleProps),
-                                            getItemSelectionProps && (React.createElement(TableBodySelectionCell, Object.assign({}, sharedCellProps, { columnId: selectionColumnId, selectionControlProps: Object.assign(Object.assign({}, getItemSelectionProps(row.item)), { onFocusDown: moveFocusDown, onFocusUp: moveFocusUp, rowIndex, itemKey: rowId }), verticalAlign: cellVerticalAlign }))),
+                                            getItemSelectionProps && (React.createElement(TableBodySelectionCell, Object.assign({}, sharedCellProps, { columnId: selectionColumnId, selectionControlProps: Object.assign(Object.assign({}, getItemSelectionProps(row.item)), { onFocusDown: moveFocusDown, onFocusUp: moveFocusUp, rowIndex, itemKey: rowId }), verticalAlign: cellVerticalAlign, tableVariant: computedVariant }))),
                                             visibleColumnDefinitions.map((column, colIndex) => {
                                                 var _a, _b;
                                                 const colId = `${getColumnKey(column, colIndex)}`;
@@ -404,7 +404,7 @@ const InternalTable = React.forwardRef((_a, ref) => {
                                         renderLoaderEmpty,
                                     });
                                     return (loaderContent && (React.createElement("tr", Object.assign({ key: (row.item ? getTableItemKey(row.item) : 'root-' + rowIndex) + '-' + row.from, className: styles.row }, rowRoleProps),
-                                        getItemSelectionProps && (React.createElement(TableBodySelectionCell, Object.assign({}, sharedCellProps, { columnId: selectionColumnId, verticalAlign: cellVerticalAlign }))),
+                                        getItemSelectionProps && (React.createElement(TableBodySelectionCell, Object.assign({}, sharedCellProps, { columnId: selectionColumnId, verticalAlign: cellVerticalAlign, tableVariant: computedVariant }))),
                                         visibleColumnDefinitions.map((column, colIndex) => {
                                             var _a;
                                             return (React.createElement(TableLoaderCell, Object.assign({ key: getColumnKey(column, colIndex) }, sharedCellProps, { wrapLines: false, columnId: (_a = column.id) !== null && _a !== void 0 ? _a : colIndex, colIndex: colIndex + colIndexOffset, isRowHeader: colIndex === 0, level: row.level, item: row.item, trackBy: trackBy }), loaderContent));