@aws-amplify/ui-react 6.11.2 → 6.12.0

package/dist/esm/primitives/Collection/Collection.mjs

@@ -10,11 +10,20 @@ import { SearchField } from '../SearchField/SearchField.mjs';
 import { ComponentText } from '../shared/constants.mjs';
 import { strHasLength } from '../shared/utils.mjs';
 import { itemHasText, getPageCount, getItemsAtPage } from './utils.mjs';
+import { Table } from '../Table/Table.mjs';
+import { TableBody } from '../Table/TableBody.mjs';
+import '../Table/TableCell.mjs';
+import '../Table/TableFoot.mjs';
+import '../Table/TableHead.mjs';
+import '../Table/TableRow.mjs';
 
 const DEFAULT_PAGE_SIZE = 10;
 const TYPEAHEAD_DELAY_MS = 300;
 const ListCollection = ({ children, direction = 'column', items, ...rest }) => (React.createElement(Flex, { direction: direction, ...rest }, Array.isArray(items) ? items.map(children) : null));
 const GridCollection = ({ children, items, ...rest }) => (React.createElement(Grid, { ...rest }, Array.isArray(items) ? items.map(children) : null));
+const TableCollection = ({ children, items, tableHeader: TableHeader, ...rest }) => (React.createElement(Table, { ...rest },
+    React.createElement(TableHeader, null),
+    React.createElement(TableBody, null, Array.isArray(items) ? items.map(children) : null)));
 const renderCollectionOrNoResultsFound = (collection, items, searchNoResultsFound) => {
     if (items.length) {
         return collection;
@@ -45,7 +54,7 @@ const Collection = ({ className, isSearchable, isPaginated, items, itemsPerPage
     if (isPaginated) {
         items = getItemsAtPage(items, pagination.currentPage, itemsPerPage);
     }
-    const collection = type === 'list' ? (React.createElement(ListCollection, { className: ComponentClassName.CollectionItems, items: items, ...rest })) : type === 'grid' ? (React.createElement(GridCollection, { className: ComponentClassName.CollectionItems, items: items, ...rest })) : null;
+    const collection = type === 'list' ? (React.createElement(ListCollection, { className: ComponentClassName.CollectionItems, items: items, ...rest })) : type === 'grid' ? (React.createElement(GridCollection, { className: ComponentClassName.CollectionItems, items: items, ...rest })) : type === 'table' ? (React.createElement(TableCollection, { className: ComponentClassName.CollectionItems, items: items, tableHeader: rest.tableHeader, ...rest })) : null;
     return (React.createElement(Flex, { testId: testId, className: classNames(ComponentClassName.Collection, className) },
         isSearchable ? (React.createElement(Flex, { className: ComponentClassName.CollectionSearch },
             React.createElement(SearchField, { label: searchLabel, placeholder: searchPlaceholder, onChange: (e) => onSearch(e.target.value), onClear: () => setSearchText('') }))) : null,

package/dist/esm/version.mjs

@@ -1,3 +1,3 @@
-const VERSION = '6.11.2';
+const VERSION = '6.12.0';
 
 export { VERSION };

package/dist/index.js

@@ -1062,10 +1062,47 @@ const itemHasText = (item, text) => {
  */
 const getPageCount = (totalItems, itemsPerPage) => Math.ceil(totalItems / itemsPerPage);
 
+const TablePrimitive = ({ caption, children, className, highlightOnHover = false, size, variation, ...rest }, ref) => {
+    const componentClasses = ui.classNames(ui.ComponentClassName.Table, ui.classNameModifier(ui.ComponentClassName.Table, size), ui.classNameModifier(ui.ComponentClassName.Table, variation), className);
+    return (React__namespace.createElement(Field.View, { as: "table", className: componentClasses, "data-highlightonhover": highlightOnHover, ref: ref, ...rest },
+        caption && (React__namespace.createElement(Field.View, { as: "caption", className: ui.ComponentClassName.TableCaption }, caption)),
+        children));
+};
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/table)
+ */
+const Table = Field.primitiveWithForwardRef(TablePrimitive);
+Table.displayName = 'Table';
+
+const TableBodyPrimitive = ({ children, className, ...rest }, ref) => (React__namespace.createElement(Field.View, { as: "tbody", className: ui.classNames(ui.ComponentClassName.TableBody, className), ref: ref, ...rest }, children));
+const TableBody = Field.primitiveWithForwardRef(TableBodyPrimitive);
+TableBody.displayName = 'TableBody';
+
+const TableCellPrimitive = ({ as: asElementTag = 'td', children, className, ...rest }, ref) => (React__namespace.createElement(Field.View, { as: asElementTag, className: ui.classNames(asElementTag === 'td'
+        ? ui.ComponentClassName.TableTd
+        : ui.ComponentClassName.TableTh, className), ref: ref, ...rest }, children));
+const TableCell = Field.primitiveWithForwardRef(TableCellPrimitive);
+TableCell.displayName = 'TableCell';
+
+const TableFootPrimitive = ({ children, className, ...rest }, ref) => (React__namespace.createElement(Field.View, { as: "tfoot", className: ui.classNames(ui.ComponentClassName.TableFoot, className), ref: ref, ...rest }, children));
+const TableFoot = Field.primitiveWithForwardRef(TableFootPrimitive);
+TableFoot.displayName = 'TableFoot';
+
+const TableHeadPrimitive = ({ children, className, ...rest }, ref) => (React__namespace.createElement(Field.View, { as: "thead", className: ui.classNames(ui.ComponentClassName.TableHead, className), ref: ref, ...rest }, children));
+const TableHead = Field.primitiveWithForwardRef(TableHeadPrimitive);
+TableHead.displayName = 'TableHead';
+
+const TableRowPrimitive = ({ children, className, ...rest }, ref) => (React__namespace.createElement(Field.View, { as: "tr", className: ui.classNames(ui.ComponentClassName.TableRow, className), ref: ref, ...rest }, children));
+const TableRow = Field.primitiveWithForwardRef(TableRowPrimitive);
+TableRow.displayName = 'TableRow';
+
 const DEFAULT_PAGE_SIZE = 10;
 const TYPEAHEAD_DELAY_MS = 300;
 const ListCollection = ({ children, direction = 'column', items, ...rest }) => (React__namespace.createElement(Field.Flex, { direction: direction, ...rest }, Array.isArray(items) ? items.map(children) : null));
 const GridCollection = ({ children, items, ...rest }) => (React__namespace.createElement(Grid, { ...rest }, Array.isArray(items) ? items.map(children) : null));
+const TableCollection = ({ children, items, tableHeader: TableHeader, ...rest }) => (React__namespace.createElement(Table, { ...rest },
+    React__namespace.createElement(TableHeader, null),
+    React__namespace.createElement(TableBody, null, Array.isArray(items) ? items.map(children) : null)));
 const renderCollectionOrNoResultsFound = (collection, items, searchNoResultsFound) => {
     if (items.length) {
         return collection;
@@ -1096,7 +1133,7 @@ const Collection = ({ className, isSearchable, isPaginated, items, itemsPerPage
     if (isPaginated) {
         items = getItemsAtPage(items, pagination.currentPage, itemsPerPage);
     }
-    const collection = type === 'list' ? (React__namespace.createElement(ListCollection, { className: ui.ComponentClassName.CollectionItems, items: items, ...rest })) : type === 'grid' ? (React__namespace.createElement(GridCollection, { className: ui.ComponentClassName.CollectionItems, items: items, ...rest })) : null;
+    const collection = type === 'list' ? (React__namespace.createElement(ListCollection, { className: ui.ComponentClassName.CollectionItems, items: items, ...rest })) : type === 'grid' ? (React__namespace.createElement(GridCollection, { className: ui.ComponentClassName.CollectionItems, items: items, ...rest })) : type === 'table' ? (React__namespace.createElement(TableCollection, { className: ui.ComponentClassName.CollectionItems, items: items, tableHeader: rest.tableHeader, ...rest })) : null;
     return (React__namespace.createElement(Field.Flex, { testId: testId, className: ui.classNames(ui.ComponentClassName.Collection, className) },
         isSearchable ? (React__namespace.createElement(Field.Flex, { className: ui.ComponentClassName.CollectionSearch },
             React__namespace.createElement(SearchField, { label: searchLabel, placeholder: searchPlaceholder, onChange: (e) => onSearch(e.target.value), onClear: () => setSearchText('') }))) : null,
@@ -1985,40 +2022,6 @@ const SwitchFieldPrimitive = ({ className, defaultChecked, id, isChecked, isDisa
 const SwitchField = Field.primitiveWithForwardRef(SwitchFieldPrimitive);
 SwitchField.displayName = 'SwitchField';
 
-const TablePrimitive = ({ caption, children, className, highlightOnHover = false, size, variation, ...rest }, ref) => {
-    const componentClasses = ui.classNames(ui.ComponentClassName.Table, ui.classNameModifier(ui.ComponentClassName.Table, size), ui.classNameModifier(ui.ComponentClassName.Table, variation), className);
-    return (React__namespace.createElement(Field.View, { as: "table", className: componentClasses, "data-highlightonhover": highlightOnHover, ref: ref, ...rest },
-        caption && (React__namespace.createElement(Field.View, { as: "caption", className: ui.ComponentClassName.TableCaption }, caption)),
-        children));
-};
-/**
- * [📖 Docs](https://ui.docs.amplify.aws/react/components/table)
- */
-const Table = Field.primitiveWithForwardRef(TablePrimitive);
-Table.displayName = 'Table';
-
-const TableBodyPrimitive = ({ children, className, ...rest }, ref) => (React__namespace.createElement(Field.View, { as: "tbody", className: ui.classNames(ui.ComponentClassName.TableBody, className), ref: ref, ...rest }, children));
-const TableBody = Field.primitiveWithForwardRef(TableBodyPrimitive);
-TableBody.displayName = 'TableBody';
-
-const TableCellPrimitive = ({ as: asElementTag = 'td', children, className, ...rest }, ref) => (React__namespace.createElement(Field.View, { as: asElementTag, className: ui.classNames(asElementTag === 'td'
-        ? ui.ComponentClassName.TableTd
-        : ui.ComponentClassName.TableTh, className), ref: ref, ...rest }, children));
-const TableCell = Field.primitiveWithForwardRef(TableCellPrimitive);
-TableCell.displayName = 'TableCell';
-
-const TableFootPrimitive = ({ children, className, ...rest }, ref) => (React__namespace.createElement(Field.View, { as: "tfoot", className: ui.classNames(ui.ComponentClassName.TableFoot, className), ref: ref, ...rest }, children));
-const TableFoot = Field.primitiveWithForwardRef(TableFootPrimitive);
-TableFoot.displayName = 'TableFoot';
-
-const TableHeadPrimitive = ({ children, className, ...rest }, ref) => (React__namespace.createElement(Field.View, { as: "thead", className: ui.classNames(ui.ComponentClassName.TableHead, className), ref: ref, ...rest }, children));
-const TableHead = Field.primitiveWithForwardRef(TableHeadPrimitive);
-TableHead.displayName = 'TableHead';
-
-const TableRowPrimitive = ({ children, className, ...rest }, ref) => (React__namespace.createElement(Field.View, { as: "tr", className: ui.classNames(ui.ComponentClassName.TableRow, className), ref: ref, ...rest }, children));
-const TableRow = Field.primitiveWithForwardRef(TableRowPrimitive);
-TableRow.displayName = 'TableRow';
-
 const TabsContext = React__namespace.createContext({
     groupId: '',
     activeTab: '',
@@ -2469,7 +2472,7 @@ const defaultDeleteUserDisplayText = {
     warningText: 'Deleting your account is not reversible. You will lose access to your account and all data associated with it.',
 };
 
-const VERSION = '6.11.2';
+const VERSION = '6.12.0';
 
 const logger$2 = ui.getLogger('AccountSettings');
 const getIsDisabled = (formValues, validationError) => {

package/dist/styles/liveness.css

@@ -67,11 +67,26 @@
   z-index: 1;
 }
 
-.amplify-liveness-loader {
+.amplify-liveness-loader .amplify-liveness-centered-loader {
+  transform: translate(-50%, -50%);
+}
+
+.amplify-liveness-centered-loader {
   position: absolute;
   left: 50%;
   top: 50%;
-  transform: translate(-50%, -50%);
+}
+
+.amplify-liveness-connecting-loader {
+  display: flex;
+  position: absolute;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 3;
+  width: 100%;
+  height: 100%;
+  background-color: var(--amplify-colors-background-primary);
 }
 
 .amplify-liveness-oval-canvas {

package/dist/styles/liveness.layer.css

@@ -68,11 +68,26 @@
   z-index: 1;
 }
 
-.amplify-liveness-loader {
+.amplify-liveness-loader .amplify-liveness-centered-loader {
+  transform: translate(-50%, -50%);
+}
+
+.amplify-liveness-centered-loader {
   position: absolute;
   left: 50%;
   top: 50%;
-  transform: translate(-50%, -50%);
+}
+
+.amplify-liveness-connecting-loader {
+  display: flex;
+  position: absolute;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 3;
+  width: 100%;
+  height: 100%;
+  background-color: var(--amplify-colors-background-primary);
 }
 
 .amplify-liveness-oval-canvas {

package/dist/styles.css

@@ -4250,11 +4250,26 @@ html[dir=rtl] .amplify-field-group__inner-start {
   z-index: 1;
 }
 
-.amplify-liveness-loader {
+.amplify-liveness-loader .amplify-liveness-centered-loader {
+  transform: translate(-50%, -50%);
+}
+
+.amplify-liveness-centered-loader {
   position: absolute;
   left: 50%;
   top: 50%;
-  transform: translate(-50%, -50%);
+}
+
+.amplify-liveness-connecting-loader {
+  display: flex;
+  position: absolute;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 3;
+  width: 100%;
+  height: 100%;
+  background-color: var(--amplify-colors-background-primary);
 }
 
 .amplify-liveness-oval-canvas {

package/dist/styles.layer.css

@@ -4251,11 +4251,26 @@ html[dir=rtl] .amplify-field-group__inner-start {
   z-index: 1;
 }
 
-.amplify-liveness-loader {
+.amplify-liveness-loader .amplify-liveness-centered-loader {
+  transform: translate(-50%, -50%);
+}
+
+.amplify-liveness-centered-loader {
   position: absolute;
   left: 50%;
   top: 50%;
-  transform: translate(-50%, -50%);
+}
+
+.amplify-liveness-connecting-loader {
+  display: flex;
+  position: absolute;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 3;
+  width: 100%;
+  height: 100%;
+  background-color: var(--amplify-colors-background-primary);
 }
 
 .amplify-liveness-oval-canvas {

package/dist/types/primitives/types/collection.d.ts

@@ -67,6 +67,13 @@ export interface CollectionBaseProps<Item> extends CollectionChildren<Item> {
 }
 export type ListCollectionProps<Item> = Omit<BaseFlexProps, 'children'> & CollectionBaseProps<Item>;
 export type GridCollectionProps<Item> = Omit<BaseGridProps, 'children'> & CollectionBaseProps<Item>;
+export type TableCollectionProps<Item> = Omit<BaseGridProps, 'children'> & CollectionBaseProps<Item> & {
+    /**
+     * @description
+     * Custom table header component to be rendered at the top of the table
+     */
+    tableHeader: () => React.ReactNode;
+};
 /**
  * Omits `React.ReactNode` as children to prevent intersection type for `children` of
  * `React.ReactNode & (item: Item, index: number) => React.JSX.Element`
@@ -78,7 +85,9 @@ export type BaseCollectionProps<Item, Element extends ElementType> = PrimitivePr
     type: 'list';
 } & ListCollectionProps<Item>, Item> | ReplaceChildren<{
     type: 'grid';
-} & GridCollectionProps<Item>, Item>);
+} & GridCollectionProps<Item>, Item> | ReplaceChildren<{
+    type: 'table';
+} & TableCollectionProps<Item>, Item>);
 export type CollectionProps<Item, Element extends ElementType = 'div'> = ReplaceChildren<PrimitiveProps<BaseCollectionProps<Item, Element> & {
     children: React.ReactNode;
 }, Element>, Item>;

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "6.11.2";
+export declare const VERSION = "6.12.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react",
-  "version": "6.11.2",
+  "version": "6.12.0",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {