@luscii-healthtech/web-ui 30.4.1 → 30.6.0

package/dist/components/Checkbox/Checkbox.d.ts

@@ -49,6 +49,7 @@ export interface CheckboxProps {
      */
     value?: string;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onClick?: (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
     className?: string;
     classNameCheckboxLabel?: string;
     /**

package/dist/components/Table/Table.d.ts

@@ -1,6 +1,10 @@
 import React from "react";
 import { PaginationMenuProps } from "../PaginationMenu/PaginationMenu.types";
 import { TableFieldConfig } from "./Table.types";
+type SelectableTableRow<Item> = {
+    index: number;
+    value: Item;
+};
 export interface TableProps<Item> extends React.HTMLAttributes<HTMLTableElement> {
     items?: Item[];
     fieldConfigurations: TableFieldConfig<Item>[];
@@ -12,5 +16,37 @@ export interface TableProps<Item> extends React.HTMLAttributes<HTMLTableElement>
     onRowClick?: (item: Item) => void;
     className?: string;
     dataTestId?: string;
+    /**
+     * When `true`, will render checkboxes as the first column of each row,
+     * including the header. Allowing for multiple rows to be selected.
+     *
+     * Two callbacks can control this behavior:
+     * - The one for each row selected `onSelectedRow`,
+     * triggered by the checkbox in the table row.
+     * - The one for all rows selected `onSelectedAllRows`,
+     * triggered by the checkbox in the table header.
+     *
+     * Turning this configuration on also requires `selectedItems` to be passed as a prop,
+     * the shape of this prop is:
+     *
+     * `Array<{ index: number; value: Item }>` -> Where `Item` is the generic shape
+     * passed to the table, in the `props.items` list.
+     *
+     * Also gives access to the `onSelectedRowsChange` callback, if you need to use it.
+     *
+     */
+    isSelectable?: boolean;
+    /**
+     * Used to render components on the header for when one or all
+     * rows are selected.
+     *
+     * Ideally this will be one or more buttons for specific actions.
+     *
+     *
+     */
+    rowSelectionHeaderAccessories?: React.ReactNode;
+    selectedItems?: Array<SelectableTableRow<Item>>;
+    onSelectedRowsChange?: (params: Array<SelectableTableRow<Item>>) => void;
 }
-export declare function Table<Item>({ items, fieldConfigurations, emptyRowsText, emptyFieldContentText, isLoading, showHeader, paginationMenuProps, onRowClick, className, dataTestId, ...otherAttributes }: TableProps<Item>): JSX.Element;
+export declare function Table<Item>({ items, fieldConfigurations, emptyRowsText, emptyFieldContentText, isLoading, showHeader, paginationMenuProps, onRowClick, className, dataTestId, isSelectable, selectedItems, onSelectedRowsChange, rowSelectionHeaderAccessories, ...otherAttributes }: TableProps<Item>): JSX.Element;
+export {};

package/dist/components/Table/Table.utils.d.ts

@@ -1,3 +1,56 @@
 import { TableFieldText, TableFieldAction, TableFieldContent } from "./Table.types";
 export declare function isTableFieldText<Item>(content: TableFieldContent<Item>): content is TableFieldText;
 export declare function isTableFieldAction<Item>(content: TableFieldContent<Item>): content is [TableFieldAction<Item>?, TableFieldAction<Item>?];
+/**
+ * This function is to be used when the data we need can be completely on the client side.
+ * By doing so we have a centralized way to deal with pagination.
+ *
+ * For server side data (e.g.: pagination on the API), do not use this and rely on the API instead.
+ *
+ * @example
+ * const chunkSize = 17;
+ * const totalItems = 200;
+ *
+ * // Create an array with 200 items [0, 1, 2, ..., 199]
+ * const array = Array.from(Array(totalItems).keys());
+ *
+ * // Split array into chunks of 17, where the least one will have only 13 items.
+ * const chunks = chunkArray(array, chunkSize);
+ *
+ * console.log(chunks);
+ * // Output:
+ * // [
+ * //   [0, 1, 2, ..., 16],
+ * //   [17, 18, 19, ..., 33],
+ * //   ...
+ * //   [187, 188, 189, ..., 199]
+ * // ]
+ */
+export declare function prepareClientSidePagination<Item>({ 
+/**
+ * The array to be split into chunks.
+ */
+items, 
+/**
+ * The size of each page.
+ */
+pageSize, }: {
+    items: Array<Item>;
+    pageSize: number;
+}): {
+    pageSlices: Array<Array<Item>>;
+    /**
+     * The size of the collection.
+     */
+    totalItems: number;
+    /**
+     * The amount of pages based on the number of items.
+     */
+    pages: number;
+    /**
+     * Utility function to help getting items from a specific page.
+     * @param pageNumber - the page being seeked
+     * @returns - the array containing the items of a specific page.
+     */
+    getItemsFromPage: (pageNumber: number) => Array<Item>;
+};

package/dist/components/Table/TableBody.d.ts

@@ -1,13 +1,33 @@
 /// <reference types="react" />
 import { TableFieldConfig } from "./Table.types";
-export interface TableBody<Item> {
-    items?: Item[];
-    fieldConfigurations: TableFieldConfig<Item>[];
+export interface TableBody<RowData> {
+    items?: RowData[];
+    selectedItems?: {
+        index: number;
+    }[];
+    fieldConfigurations: TableFieldConfig<RowData>[];
     emptyItemsText: string;
     emptyFieldContentText?: string;
     isLoading: boolean;
     showEmptyView: boolean;
-    onRowClick?: (item: Item) => void;
+    onRowClick?: (item: RowData) => void;
     className?: string;
+    /**
+     * Property to use when the table does not have a footer,
+     * and we want to preserve the rounded layout.
+     */
+    lastRowRounded: boolean;
+    /**
+     * Property to use when the table does not have a header,
+     * and we want to preserve the rounded layout.
+     */
+    topRowRounded: boolean;
+    isSelectable?: boolean;
+    onSelectRow?: (params: {
+        checked: boolean;
+        rowIndex: number;
+        value: RowData;
+    }) => void;
+    colSpan: number;
 }
 export declare function TableBody<Item>(props: TableBody<Item>): JSX.Element;

package/dist/components/Table/TableHeader.d.ts

@@ -1,7 +1,18 @@
-/// <reference types="react" />
+import React from "react";
 import { TableFieldConfig } from "./Table.types";
-export interface TableHeaderProps<Item> {
+export type TableHeaderProps<Item> = {
     fieldConfigurations: TableFieldConfig<Item>[];
     className?: string;
-}
+    /**
+     * The combination of checkbox and action button above the table,
+     * replaces the default header when there are one or more items selected.
+     *
+     */
+    selectAllComponent?: React.ReactNode;
+    /**
+     * The checkbox next to the other headers, can be used to select all items.
+     */
+    selectAllCheckbox?: React.ReactNode;
+    colSpan: number;
+};
 export declare function TableHeader<Item>(props: TableHeaderProps<Item>): JSX.Element;

package/dist/index.d.ts

@@ -38,6 +38,7 @@ export { FlyOutMenu } from "./components/FlyOutMenu/FlyOutMenu";
 export { StyledInput } from "./components/Input/StyledInput";
 export { default as Line } from "./components/Line/Line";
 export { Table, type TableProps } from "./components/Table/Table";
+export { prepareClientSidePagination } from "./components/Table/Table.utils";
 export { type TableFieldConfig, type TableFieldContent, type TableFieldText, type TableFieldAction, } from "./components/Table/Table.types";
 export { LoadingIndicator, type LoadingIndicatorProps, } from "./components/LoadingIndicator/LoadingIndicator";
 export { default as Menu } from "./components/Menu/Menu";

package/dist/index.development.js

@@ -2743,7 +2743,7 @@ var css_248z$b = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FI
 styleInject(css_248z$b);
 
 const CheckboxInner = (props) => {
-  const { id, explanation, type = "regular", isChecked = false, isIndeterminate = false, isDisabled, name, value, onChange, className, classNameCheckboxLabel, error, innerRef } = props;
+  const { id, explanation, type = "regular", isChecked = false, isIndeterminate = false, isDisabled, name, value, onChange, onClick, className, classNameCheckboxLabel, error, innerRef } = props;
   const [checked, setChecked] = React.useState(false);
   const [indeterminate, setIndeterminate] = React.useState(isIndeterminate);
   const [isFocused, setIsFocused] = React.useState(false);
@@ -2780,7 +2780,19 @@ const CheckboxInner = (props) => {
   const handleBlur = () => setIsFocused(false);
   return React__namespace.default.createElement(
     "div",
-    { className: containerClassName, "data-test-id": "checkbox" },
+    {
+      className: containerClassName,
+      /**
+       * This harms a11y since the div becomes an interactible element.
+       * The main interaction in this component happens between a styled label (looking like a checkbox)
+       * and the invisible input checkbox itself.
+       *
+       * This `onClick` event is a requirement from using this component in the table,
+       * since the row is clickable and we need to stop propagation to not invoking the row click
+       * upon marking the checkbox as checked/unchecked.
+       */
+      onClick
+    },
     React__namespace.default.createElement(
       "label",
       { className: classNames__default.default(classNameCheckboxLabel, "cweb-checkbox-label ui-group ui-relative ui-overflow-hidden", "ui-flex ui-w-full ui-cursor-pointer", {
@@ -3678,18 +3690,46 @@ Line.propTypes = {
   className: PropTypes__default.default.string
 };
 
+const THead = (props) => {
+  return React__namespace.default.createElement("thead", { className: classNames__default.default(
+    // Styles for all <th>
+    "[&>tr>th]:ui-border-neutral-interactive",
+    "[&>tr>th]:ui-border-y",
+    "[&>tr>th]:ui-px-xxs",
+    // Styles for the first <th> in the header row
+    "[&>tr>th:first-child]:ui-rounded-tl-2xl [&>tr>th:first-child]:ui-border-l [&>tr>th:first-child]:ui-pl-l",
+    // Styles for the last <th> in the table row
+    "[&>tr>th:last-child]:ui-rounded-tr-2xl [&>tr>th:last-child]:ui-border-r [&>tr>th:last-child]:ui-pr-l"
+  ) }, props.children);
+};
 function TableHeader(props) {
+  if (props.selectAllComponent) {
+    return React__namespace.default.createElement(
+      THead,
+      null,
+      React__namespace.default.createElement(
+        "tr",
+        { className: "ui-rounded-2xl" },
+        React__namespace.default.createElement("th", { colSpan: props.colSpan }, props.selectAllComponent)
+      )
+    );
+  }
   return React__namespace.default.createElement(
-    "thead",
-    { className: props.className },
-    React__namespace.default.createElement("tr", null, props.fieldConfigurations.map((fieldConfig) => {
-      var _a;
-      return React__namespace.default.createElement(
-        "th",
-        { className: "ui-px-2 first:ui-pl-6 last:ui-pr-6", key: fieldConfig.key },
-        React__namespace.default.createElement(Text, { text: (_a = fieldConfig.headerText) !== null && _a !== void 0 ? _a : "", type: "strong", className: "ui-truncate ui-py-4 ui-text-left ui-uppercase ui-leading-5" })
-      );
-    }))
+    THead,
+    null,
+    React__namespace.default.createElement(
+      "tr",
+      { className: "ui-rounded-2xl" },
+      props.selectAllCheckbox && React__namespace.default.createElement("th", null, props.selectAllCheckbox),
+      props.fieldConfigurations.map((fieldConfig) => {
+        var _a;
+        return React__namespace.default.createElement(
+          "th",
+          { key: fieldConfig.key },
+          React__namespace.default.createElement(Text, { variant: "strong", className: "ui-truncate ui-py-m ui-text-left ui-capitalize ui-leading-5" }, (_a = fieldConfig.headerText) !== null && _a !== void 0 ? _a : "")
+        );
+      })
+    )
   );
 }
 
@@ -3699,6 +3739,36 @@ function isTableFieldText(content) {
 function isTableFieldAction(content) {
   return Array.isArray(content) && content.some((action) => action && "key" in action && "icon" in action && "handleClick" in action);
 }
+function prepareClientSidePagination({
+  /**
+   * The array to be split into chunks.
+   */
+  items,
+  /**
+   * The size of each page.
+   */
+  pageSize
+}) {
+  const totalItems = items.length;
+  let pages = Math.floor(totalItems / pageSize);
+  const remainderFromChunk = totalItems % pageSize;
+  if (remainderFromChunk > 0) {
+    pages++;
+  }
+  const pageSlices = [];
+  for (let i = 0; i < pages; i++) {
+    const startOfSlice = i * pageSize;
+    const endOfSlice = startOfSlice + pageSize;
+    const chunkSlice = items.slice(startOfSlice, endOfSlice);
+    pageSlices.push(chunkSlice);
+  }
+  return {
+    pageSlices,
+    totalItems,
+    pages,
+    getItemsFromPage: (pageNumber) => pageSlices[pageNumber]
+  };
+}
 
 function TableBodyRowDataCell(props) {
   var _a;
@@ -3710,16 +3780,14 @@ function TableBodyRowDataCell(props) {
   const isTextCellEmpty = isTableFieldText(content) && !content.text && !content.tag;
   return React__namespace.default.createElement(
     "td",
-    { className: classNames__default.default("ui-px-2 first:ui-pl-6 last:ui-pr-6", {
-      "ui-align-top": !isTableFieldAction(content)
-    }) },
+    { className: classNames__default.default("ui-px-2 ui-align-middle first:ui-pl-6 last:ui-pr-6") },
     isTableFieldText(content) && React__namespace.default.createElement(
       "div",
-      { className: "ui-flex ui-flex-row" },
+      { className: "ui-flex ui-flex-row " },
       content.tag && React__namespace.default.createElement(
         "div",
         { className: "ui-mr-2 ui-mt-3" },
-        React__namespace.default.createElement(Tag, { text: content.tag.text, colorTheme: content.tag.color })
+        React__namespace.default.createElement(Tag, { colorTheme: content.tag.color }, content.tag.text)
       ),
       React__namespace.default.createElement(
         "div",
@@ -3727,11 +3795,11 @@ function TableBodyRowDataCell(props) {
         React__namespace.default.createElement(Text, { className: classNames__default.default("ui-text-left ui-leading-5", {
           "ui-break-all": content.breakAllWord,
           "ui-break-words": !content.breakAllWord
-        }), text: isTextCellEmpty ? emptyFieldContentText : content.text, type: "base" }),
+        }) }, isTextCellEmpty ? emptyFieldContentText : content.text),
         content.description && React__namespace.default.createElement(Text, { className: classNames__default.default({
           "ui-break-all": content.description.breakAllWord,
           "ui-break-words": !content.description.breakAllWord
-        }), text: content.description.content, type: "sm", color: "slate-500" })
+        }), variant: "sm", color: "slate-500" }, content.description.content)
       )
     ),
     isTableFieldAction(content) && React__namespace.default.createElement("div", { className: classNames__default.default("ui-flex ui-flex-row ui-justify-end", "ui-transition-opacity ui-duration-300 ui-ease-in-out", {
@@ -3748,30 +3816,76 @@ function TableBodyRowDataCell(props) {
   );
 }
 
-function TableBodyRow(props) {
-  const handleRowClick = (event) => {
-    var _a;
-    event.stopPropagation();
-    (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, props.item);
-  };
-  return React__namespace.default.createElement("tr", { tabIndex: 0, className: classNames__default.default("ui-group", {
-    "ui-cursor-pointer ui-transition-colors ui-duration-300 ui-ease-in-out hover:ui-bg-blue-50 focus:ui-outline-primary": props.onClick,
-    "ui-cursor-default hover:ui-bg-white": !props.onClick
-  }, props.className), onClick: handleRowClick }, props.fieldConfigurations.map((fieldConfig) => React__namespace.default.createElement(TableBodyRowDataCell, { key: fieldConfig.key, item: props.item, fieldConfig, emptyFieldContentText: props.emptyFieldContentText })));
-}
-
 function TableBody(props) {
   var _a;
+  const isItemChecked = (index) => {
+    if (!props.selectedItems) {
+      return false;
+    }
+    return Boolean(props.selectedItems.find((item) => item.index === index));
+  };
+  const generateRowClickHandler = (item) => {
+    return (event) => {
+      var _a2;
+      event.stopPropagation();
+      (_a2 = props.onRowClick) === null || _a2 === void 0 ? void 0 : _a2.call(props, item);
+    };
+  };
   return React__namespace.default.createElement(
     "tbody",
-    { className: props.className },
-    !props.isLoading && ((_a = props.items) === null || _a === void 0 ? void 0 : _a.map((item) => React__namespace.default.createElement(TableBodyRow, { className: classNames__default.default("ui-border-b ui-border-slate-100 last:ui-border-none"), key: JSON.stringify(item), item, fieldConfigurations: props.fieldConfigurations, emptyFieldContentText: props.emptyFieldContentText, onClick: props.onRowClick }))),
+    { className: classNames__default.default(
+      props.className,
+      // setting border color across all cells
+      "[&>tr>td]:ui-border-neutral-interactive",
+      // left border for first cell and right border for last cell
+      "[&>tr>td:first-child]:ui-border-l [&>tr>td:last-child]:ui-border-r",
+      "[&>tr>td]:ui-border-b",
+      /**
+       * Configuration for the top row to have rounded edges, in case
+       * there is no header.
+       */
+      {
+        "[&>tr:first-child>td]:ui-border-t": props.topRowRounded,
+        "[&>tr:first-child>td:first-child]:ui-rounded-tl-2xl": props.topRowRounded,
+        "[&>tr:first-child>td:last-child]:ui-rounded-tr-2xl": props.topRowRounded
+      },
+      /**
+       * Configuration for the last row to have rounded edges, in case
+       * there is no footer.
+       */
+      {
+        "[&>tr:last-child>td:first-child]:ui-rounded-bl-2xl": props.lastRowRounded,
+        "[&>tr:last-child>td:last-child]:ui-rounded-br-2xl": props.lastRowRounded
+      }
+    ) },
+    !props.isLoading && ((_a = props.items) === null || _a === void 0 ? void 0 : _a.map((item, index) => React__namespace.default.createElement(
+      "tr",
+      { tabIndex: 0, className: classNames__default.default("ui-group", {
+        "ui-cursor-pointer ui-transition-colors ui-duration-300 ui-ease-in-out hover:ui-bg-blue-50 focus:ui-outline-primary": props.onRowClick,
+        "ui-cursor-default hover:ui-bg-white": !props.onRowClick,
+        "ui-bg-blue-100": isItemChecked(index)
+      }, props.className), onClick: generateRowClickHandler(item) },
+      props.isSelectable && React__namespace.default.createElement(
+        "td",
+        { className: "ui-px-2 first:ui-pl-6 last:ui-pr-6" },
+        React__namespace.default.createElement(Checkbox, { isChecked: isItemChecked(index), onClick: (event) => event.stopPropagation(), onChange: (event) => {
+          var _a2;
+          event.stopPropagation();
+          (_a2 = props.onSelectRow) === null || _a2 === void 0 ? void 0 : _a2.call(props, {
+            rowIndex: index,
+            checked: event.target.checked,
+            value: item
+          });
+        } })
+      ),
+      props.fieldConfigurations.map((fieldConfig) => React__namespace.default.createElement(TableBodyRowDataCell, { key: fieldConfig.key, item, fieldConfig, emptyFieldContentText: props.emptyFieldContentText }))
+    ))),
     props.isLoading && React__namespace.default.createElement(
       "tr",
       null,
       React__namespace.default.createElement(
         "td",
-        { colSpan: props.fieldConfigurations.length },
+        { colSpan: props.colSpan },
         React__namespace.default.createElement(LoadingIndicator, { className: "ui-px-3 ui-py-0", asModal: false })
       )
     ),
@@ -3780,7 +3894,7 @@ function TableBody(props) {
       null,
       React__namespace.default.createElement(
         "td",
-        { colSpan: props.fieldConfigurations.length },
+        { colSpan: props.colSpan },
         React__namespace.default.createElement(EmptyListMessage, { className: "ui-py-6", text: props.emptyItemsText, imageName: "search-not-found" })
       )
     )
@@ -3997,7 +4111,7 @@ const TableFooter = (props) => {
       null,
       React__namespace.default.createElement(
         "td",
-        { colSpan: props.colSpan },
+        { className: "ui-rounded-b-2xl ui-border-x ui-border-b ui-border-neutral-interactive", colSpan: props.colSpan },
         React__namespace.default.createElement(PaginationMenu, Object.assign({ className: "ui-p-6" }, props.paginationMenuProps))
       )
     )
@@ -4005,20 +4119,83 @@ const TableFooter = (props) => {
 };
 
 function Table(_a) {
-  var { items, fieldConfigurations, emptyRowsText, emptyFieldContentText, isLoading = false, showHeader = true, paginationMenuProps, onRowClick, className, dataTestId } = _a, otherAttributes = __rest(_a, ["items", "fieldConfigurations", "emptyRowsText", "emptyFieldContentText", "isLoading", "showHeader", "paginationMenuProps", "onRowClick", "className", "dataTestId"]);
+  var { items, fieldConfigurations, emptyRowsText, emptyFieldContentText, isLoading = false, showHeader = true, paginationMenuProps, onRowClick, className, dataTestId, isSelectable, selectedItems, onSelectedRowsChange, rowSelectionHeaderAccessories } = _a, otherAttributes = __rest(_a, ["items", "fieldConfigurations", "emptyRowsText", "emptyFieldContentText", "isLoading", "showHeader", "paginationMenuProps", "onRowClick", "className", "dataTestId", "isSelectable", "selectedItems", "onSelectedRowsChange", "rowSelectionHeaderAccessories"]);
   const [isPristine, setIsPristine] = React.useState(true);
+  const getSelectAllCheckboxState = () => {
+    if (!items || !selectedItems) {
+      return "unchecked";
+    }
+    const totalItems = items.length;
+    if (selectedItems.length === 0) {
+      return "unchecked";
+    }
+    if (selectedItems.length === items.length) {
+      return "checked";
+    }
+    if (selectedItems.length !== totalItems) {
+      return "indeterminate";
+    }
+    return "unchecked";
+  };
   React.useEffect(() => {
     setIsPristine(false);
   }, [items, isLoading]);
   const showEmptyView = !isPristine && !isLoading && !(items && items.length > 0);
+  const showFooter = !isLoading && !showEmptyView && paginationMenuProps && paginationMenuProps.currentPageNumber > 0 && paginationMenuProps.pageCount > 0;
+  const colSpan = isSelectable ? fieldConfigurations.length + 1 : fieldConfigurations.length;
+  const handleOnToggleAll = () => {
+    const newState = getSelectAllCheckboxState() === "checked" ? [] : (items !== null && items !== void 0 ? items : []).map((value, index) => ({
+      index,
+      value
+    }));
+    onSelectedRowsChange === null || onSelectedRowsChange === void 0 ? void 0 : onSelectedRowsChange(newState);
+  };
+  const handleOnSelectRow = (params) => {
+    if (!selectedItems) {
+      return;
+    }
+    const newState = params.checked ? [...selectedItems, { value: params.value, index: params.rowIndex }] : selectedItems.filter((item) => item.index !== params.rowIndex);
+    onSelectedRowsChange === null || onSelectedRowsChange === void 0 ? void 0 : onSelectedRowsChange(newState);
+  };
+  const shouldDisplaySelectAllControls = isSelectable && rowSelectionHeaderAccessories && selectedItems && selectedItems.length > 0;
+  const toggleAllCheckbox = React__namespace.default.createElement(
+    "label",
+    null,
+    React__namespace.default.createElement("span", { className: "ui-sr-only" }, "Select all rows"),
+    React__namespace.default.createElement(Checkbox, { isChecked: getSelectAllCheckboxState() === "checked", isIndeterminate: getSelectAllCheckboxState() === "indeterminate", onChange: handleOnToggleAll })
+  );
   return React__namespace.default.createElement(
     "table",
-    Object.assign({ className: classNames__default.default("ui-w-full ui-table-auto ui-border-collapse ui-rounded-lg ui-bg-white", className), "data-test-id": dataTestId }, otherAttributes),
-    showHeader ? React__namespace.default.createElement(TableHeader, { className: "ui-border-b ui-border-slate-100", fieldConfigurations }) : null,
-    React__namespace.default.createElement(TableBody, { className: classNames__default.default({
-      "ui-border-b ui-border-slate-100": !isLoading && !showEmptyView && paginationMenuProps && paginationMenuProps.currentPageNumber > 0 && paginationMenuProps.pageCount > 0
-    }), items, fieldConfigurations, emptyItemsText: emptyRowsText, emptyFieldContentText, isLoading, showEmptyView, onRowClick }),
-    !isLoading && !showEmptyView && paginationMenuProps && paginationMenuProps.currentPageNumber > 0 && paginationMenuProps.pageCount > 0 ? React__namespace.default.createElement(TableFooter, { colSpan: fieldConfigurations.length, paginationMenuProps }) : null
+    Object.assign({ className: classNames__default.default("ui-w-full ui-table-auto ui-bg-white", "ui-border-separate ui-border-spacing-0 ui-rounded-2xl", className), "data-test-id": dataTestId }, otherAttributes),
+    showHeader ? React__namespace.default.createElement(TableHeader, { fieldConfigurations, colSpan, selectAllCheckbox: isSelectable ? toggleAllCheckbox : null, selectAllComponent: shouldDisplaySelectAllControls ? React__namespace.default.createElement(
+      Stack,
+      { axis: "x", align: "center", gap: "xs", my: "xxs" },
+      toggleAllCheckbox,
+      rowSelectionHeaderAccessories
+    ) : null }) : null,
+    React__namespace.default.createElement(
+      TableBody,
+      {
+        // TODO: early return to remove all the boolean juggling.
+        className: classNames__default.default({
+          "ui-border-b ui-border-neutral-interactive": showFooter
+        }),
+        items,
+        fieldConfigurations,
+        emptyItemsText: emptyRowsText,
+        emptyFieldContentText,
+        isLoading,
+        showEmptyView,
+        onRowClick,
+        lastRowRounded: !showFooter,
+        topRowRounded: !showHeader,
+        isSelectable,
+        onSelectRow: handleOnSelectRow,
+        selectedItems,
+        colSpan
+      }
+    ),
+    showFooter ? React__namespace.default.createElement(TableFooter, { colSpan, paginationMenuProps }) : null
   );
 }
 
@@ -6857,5 +7034,6 @@ exports.ViewItem = ViewItem;
 exports.WarningIcon = ExclamationMarkIcon;
 exports.WeekdaysPicker = WeekdaysPicker;
 exports.getDndListItemProps = getDndListItemProps;
+exports.prepareClientSidePagination = prepareClientSidePagination;
 exports.toast = toast;
 //# sourceMappingURL=index.development.js.map