@punkbit/cui 0.0.248-rc.1 → 0.2.0-rc.3

package/dist/esm/components/Table/index.js

@@ -0,0 +1,625 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useLayoutEffect, useMemo, useEffect, useCallback } from 'react';
+import { styled } from 'styled-components';
+import { MiddleTruncator } from '../MiddleTruncator/index.js';
+import { Checkbox } from '../Checkbox/index.js';
+import { IconButton } from '../IconButton/index.js';
+import { Icon as SvgImage } from '../Icon/index.js';
+import { Text } from '../Text/index.js';
+import { EllipsisContent } from '../EllipsisContent/index.js';
+
+const StyledHeader = styled.th.withConfig({
+  componentId: "sc-t8h5hv-0"
+})(["", " text-align:left;", ""], ({
+  theme,
+  $size
+}) => `
+    padding: ${theme.click.table.header.cell.space[$size].y} ${theme.click.table.body.cell.space[$size].x};
+    font: ${theme.click.table.header.title.default};
+    color: ${theme.click.table.header.color.title.default};
+  `, ({
+  $resizable
+}) => $resizable && `
+    position: relative;
+  `);
+const Resizer = styled.div.withConfig({
+  componentId: "sc-t8h5hv-1"
+})(["position:absolute;top:0;right:0;width:24px;height:100%;cursor:col-resize;user-select:none;z-index:1;transition:opacity 0.2s;border-radius:0.5rem;transform:translateX(50%);&:hover{opacity:0.6;}&::before{content:' ';background:", ";display:inline-block;top:25%;width:2px;height:20px;position:relative;left:50%;transform:translateX(-50%);}&:focus-visible{outline:2px solid ", ";outline-offset:2px;opacity:1;}"], ({
+  theme
+}) => theme.click.table.header.color.checkbox.border.default, ({
+  theme
+}) => theme.click.global.color.outline.default);
+const HeaderContentWrapper = styled.div.withConfig({
+  componentId: "sc-t8h5hv-2"
+})(["display:flex;align-items:center;justify-content:start;gap:inherit;", ""], ({
+  $interactive
+}) => $interactive && "cursor: pointer;");
+const SortIcon = styled(SvgImage).withConfig({
+  componentId: "sc-t8h5hv-3"
+})(["transition:all 200ms;transform:rotate(", ");"], ({
+  $sortDir
+}) => $sortDir === "desc" ? "180deg" : "0deg");
+const TableHeader = ({
+  label,
+  sortDir,
+  sortPosition = "end",
+  isSortable,
+  onSort,
+  onClick,
+  size,
+  resizable,
+  showResizer,
+  onResizeStart,
+  onKeyboardResize,
+  overflowMode,
+  ...props
+}) => {
+  if (overflowMode === "wrap" && resizable) {
+    console.warn(`"Wrap" overflow mode doesn't work well with resizable table columns. Consider using truncation instead, please!`);
+  }
+  const isSorted = typeof sortDir === "string";
+  const isInteractive = Boolean(typeof onClick === "function" || isSortable && typeof onSort === "function");
+  const resizerRef = useRef(null);
+  const onHeaderClick = (e) => {
+    if (typeof onClick === "function") {
+      onClick(e);
+    }
+    if (typeof onSort === "function") {
+      onSort();
+    }
+  };
+  const onResizerKeyDown = (e) => {
+    if (!onKeyboardResize) {
+      return;
+    }
+    if (["ArrowLeft", "ArrowRight"].includes(e.key)) {
+      e.preventDefault();
+    }
+    switch (e.key) {
+      case "ArrowLeft":
+        onKeyboardResize(e, "left");
+        break;
+      case "ArrowRight":
+        onKeyboardResize(e, "right");
+        break;
+      case "Escape":
+        resizerRef.current?.blur();
+        break;
+    }
+  };
+  return /* @__PURE__ */ jsxs(StyledHeader, { $size: size, $resizable: resizable, ...props, children: [
+    /* @__PURE__ */ jsxs(HeaderContentWrapper, { onClick: onHeaderClick, $interactive: isInteractive, children: [
+      isSorted && isSortable && sortPosition == "start" && /* @__PURE__ */ jsx(SortIcon, { $sortDir: sortDir, name: "arrow-down", size: "sm" }),
+      label,
+      isSorted && isSortable && sortPosition == "end" && /* @__PURE__ */ jsx(SortIcon, { $sortDir: sortDir, name: "arrow-down", size: "sm" })
+    ] }),
+    showResizer && /* @__PURE__ */ jsx(Resizer, { ref: resizerRef, onMouseDown: onResizeStart, role: "separator", "aria-orientation": "vertical", "aria-label": `Resize ${typeof label === "string" ? label : "column"}`, tabIndex: 0, onKeyDown: onResizerKeyDown })
+  ] });
+};
+const Thead = ({
+  headers,
+  isSelectable,
+  onSelectAll,
+  actionsList,
+  onSort: onSortProp,
+  size,
+  rows,
+  selectedIds,
+  resizableColumns,
+  columnWidths,
+  onResizeStart,
+  theadRef,
+  onKeyboardResize
+}) => {
+  const onSort = (header, headerIndex) => () => {
+    if (typeof onSortProp === "function" && header.isSortable) {
+      onSortProp(header.sortDir === "asc" ? "desc" : "asc", header, headerIndex);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(StyledColGroup, { children: [
+      isSelectable && /* @__PURE__ */ jsx("col", { width: 48 }),
+      headers.map((headerProps, index) => {
+        const headerLabel = typeof headerProps.label === "string" ? headerProps.label : `__index_${index}`;
+        const widthFromMap = columnWidths?.get(headerLabel);
+        return /* @__PURE__ */ jsx("col", { width: resizableColumns && widthFromMap && index < headers.length - 1 ? `${widthFromMap}px` : headerProps.width }, `header-col-${index}`);
+      }),
+      actionsList.length > 0 && /* @__PURE__ */ jsx("col", { width: (actionsList.length + 1) * 32 + 10 })
+    ] }),
+    /* @__PURE__ */ jsx(StyledThead, { ref: theadRef, children: /* @__PURE__ */ jsxs("tr", { children: [
+      isSelectable && /* @__PURE__ */ jsx(StyledHeader, { $size: size, "aria-label": "Select column", children: /* @__PURE__ */ jsx(SelectAllCheckbox, { onCheckedChange: onSelectAll, rows, selectedIds }) }),
+      headers.map((headerProps, index) => /* @__PURE__ */ jsx(TableHeader, { onSort: onSort(headerProps, index), size, resizable: resizableColumns, showResizer: resizableColumns && index < headers.length - 1, onResizeStart: onResizeStart?.(index), onKeyboardResize: onKeyboardResize?.(index), ...headerProps }, `table-header-${index}`)),
+      actionsList.length > 0 && /* @__PURE__ */ jsx(StyledHeader, { "aria-label": "Actions", $size: size })
+    ] }) })
+  ] });
+};
+const TableRow = styled.tr.withConfig({
+  componentId: "sc-t8h5hv-4"
+})(["overflow:hidden;", " &:last-of-type,&:last-child{border-bottom:none;}[data-mobile-layout='list'] &{@media (max-width:", "){position:relative;display:flex;flex-wrap:wrap;", "}}"], ({
+  theme,
+  $isDeleted,
+  $isDisabled,
+  $isActive,
+  $rowHeight
+}) => `
+    ${$rowHeight ? `height: ${$rowHeight};` : ""}
+    background-color: ${theme.click.table.row.color.background.default};
+    border-bottom: ${theme.click.table.cell.stroke} solid ${theme.click.table.row.color.stroke.default};
+
+    ${$isActive && `background-color: ${theme.click.table.row.color.background.active};`}
+
+    &:active {
+      background-color: ${theme.click.table.row.color.background.active};
+    }
+    &:hover {
+      background-color: ${theme.click.table.row.color.background.hover};
+    }
+    opacity: ${$isDeleted || $isDisabled ? 0.5 : 1};
+    cursor: ${$isDeleted || $isDisabled ? "not-allowed" : "default"}
+  `, ({
+  theme
+}) => theme.breakpoint.sizes.md, ({
+  theme,
+  $isSelectable = false,
+  $showActions = false
+}) => `
+        border: ${theme.click.table.cell.stroke} solid ${theme.click.table.row.color.stroke.default};
+        border-radius: ${theme.click.table.radii.all};
+        ${$isSelectable ? `padding-left: calc(${theme.click.table.body.cell.space.sm.x} + ${theme.click.table.body.cell.space.sm.x} + ${theme.click.checkbox.size.all});` : ""}
+        ${$showActions ? `padding-right: calc(${theme.click.table.body.cell.space.sm.x} + ${theme.click.table.body.cell.space.sm.x} + ${theme.click.image.sm.size.width} + ${theme.click.button.iconButton.default.space.x} + ${theme.click.button.iconButton.default.space.x});` : ""}
+      `);
+const TableData = styled.td.withConfig({
+  componentId: "sc-t8h5hv-5"
+})(["overflow:hidden;", " [data-mobile-layout='list'] &{@media (max-width:", "){width:auto;min-width:40%;", "}}"], ({
+  theme,
+  $size
+}) => `
+    color: ${theme.click.table.row.color.text.default};
+    font: ${theme.click.table.cell.text.default};
+    padding: ${theme.click.table.body.cell.space[$size].y} ${theme.click.table.body.cell.space[$size].x};
+  `, ({
+  theme
+}) => theme.breakpoint.sizes.md, ({
+  theme
+}) => `
+        padding: ${theme.click.table.body.cell.space.sm.y} ${theme.click.table.body.cell.space.sm.x};
+      `);
+const StyledColGroup = styled.colgroup.withConfig({
+  componentId: "sc-t8h5hv-6"
+})(["[data-mobile-layout='list'] &{@media (max-width:", "){display:none;}}"], ({
+  theme
+}) => theme.breakpoint.sizes.md);
+const StyledThead = styled.thead.withConfig({
+  componentId: "sc-t8h5hv-7"
+})(["tr{overflow:hidden;background-color:", ";", "}[data-mobile-layout='list'] &{@media (max-width:", "){display:none;}}"], ({
+  theme
+}) => theme.click.table.header.color.background.default, ({
+  theme
+}) => ` border-bottom: ${theme.click.table.cell.stroke} solid ${theme.click.table.row.color.stroke.default};
+  `, ({
+  theme
+}) => theme.breakpoint.sizes.md);
+const MobileHeader = styled.div.withConfig({
+  componentId: "sc-t8h5hv-8"
+})(["display:none;", " [data-mobile-layout='list'] &{@media (max-width:", "){display:block;}}"], ({
+  theme
+}) => `
+    color: ${theme.click.table.row.color.label.default};
+    font:  ${theme.click.table.cell.label.default};
+  `, ({
+  theme
+}) => theme.breakpoint.sizes.md);
+const Tbody = styled.tbody.withConfig({
+  componentId: "sc-t8h5hv-9"
+})(["[data-mobile-layout='list'] &{@media (max-width:", "){display:flex;flex-direction:column;gap:0.25rem;}}"], ({
+  theme
+}) => theme.breakpoint.sizes.md);
+const SelectData = styled.td.withConfig({
+  componentId: "sc-t8h5hv-10"
+})(["overflow:hidden;", " [data-mobile-layout='list'] &{@media (max-width:", "){width:auto;align-self:stretch;position:absolute;left:0;top:0;bottom:0;", "}}"], ({
+  theme,
+  $size
+}) => `
+    color: ${theme.click.table.row.color.text.default};
+    font: ${theme.click.table.cell.text.default};
+    padding: ${theme.click.table.body.cell.space[$size].y} ${theme.click.table.body.cell.space[$size].x};
+  `, ({
+  theme
+}) => theme.breakpoint.sizes.md, ({
+  theme
+}) => `
+        padding: ${theme.click.table.body.cell.space.sm.y} ${theme.click.table.body.cell.space.sm.x};
+        border-right: ${theme.click.table.cell.stroke} solid ${theme.click.table.row.color.stroke.default};
+      `);
+const ActionsList = styled.td.withConfig({
+  componentId: "sc-t8h5hv-11"
+})(["overflow:hidden;", " [data-mobile-layout='list'] &{@media (max-width:", "){width:auto;align-self:stretch;position:absolute;right:0;top:0;bottom:0;", "}}"], ({
+  theme,
+  $size
+}) => `
+    color: ${theme.click.table.row.color.text.default};
+    font: ${theme.click.table.cell.text.default};
+    padding: ${theme.click.table.body.cell.space[$size].y} ${theme.click.table.body.cell.space[$size].x};
+  `, ({
+  theme
+}) => theme.breakpoint.sizes.md, ({
+  theme
+}) => `
+        padding: ${theme.click.table.body.cell.space.sm.y} ${theme.click.table.body.cell.space.sm.x};
+        border-left: 1px solid ${theme.click.table.row.color.stroke.default};
+      `);
+const ActionsContainer = styled.div.withConfig({
+  componentId: "sc-t8h5hv-12"
+})(["display:flex;flex-wrap:wrap;gap:0.5rem;overflow:hidden;[data-mobile-layout='list'] &{@media (max-width:", "){flex-direction:column;overflow:auto;flex-wrap:nowrap;}}"], ({
+  theme
+}) => theme.breakpoint.sizes.md);
+const TableWrapper = styled.div.withConfig({
+  componentId: "sc-t8h5hv-13"
+})(["width:100%;height:100%;overflow-x:auto;", ""], ({
+  theme
+}) => `
+  border: ${theme.click.table.cell.stroke} solid ${theme.click.table.global.color.stroke.default};
+  border-radius: ${theme.click.table.radii.all}
+  `);
+const TableOuterContainer = styled.div.withConfig({
+  componentId: "sc-t8h5hv-14"
+})(["display:flex;flex-direction:column;gap:1rem;width:100%;"]);
+const MobileActions = styled.div.withConfig({
+  componentId: "sc-t8h5hv-15"
+})(["display:none;[data-mobile-layout='list'] &{@media (max-width:", "){display:flex;justify-content:space-between;align-items:center;padding:0 ", ";}}"], ({
+  theme
+}) => theme.breakpoint.sizes.md, ({
+  theme
+}) => theme.click.table.body.cell.space.sm.x);
+const EditButton = styled.button.withConfig({
+  componentId: "sc-t8h5hv-16"
+})(["&:disabled{background:transparent;}"]);
+const TableRowCloseButton = styled.button.withConfig({
+  componentId: "sc-t8h5hv-17"
+})(["svg{transition:transform 200ms;", "}&:disabled{background:transparent;}"], ({
+  $isDeleted
+}) => `
+    ${$isDeleted ? "transform: rotate(45deg)" : ""};
+    `);
+const TableBodyRow = ({
+  headers,
+  items,
+  onSelect,
+  isSelectable,
+  isSelected,
+  isIndeterminate,
+  onDelete,
+  onEdit,
+  isDeleted,
+  isActive,
+  isDisabled,
+  size,
+  actionsList,
+  rowHeight,
+  ...rowProps
+}) => {
+  const isDeletable = typeof onDelete === "function";
+  const isEditable = typeof onEdit === "function";
+  return /* @__PURE__ */ jsxs(TableRow, { $isSelectable: isSelectable, $isDeleted: isDeleted, $isDisabled: isDisabled, $isActive: isActive, $showActions: isDeletable || isEditable, $rowHeight: rowHeight, ...rowProps, children: [
+    isSelectable && /* @__PURE__ */ jsx(SelectData, { $size: size, children: /* @__PURE__ */ jsx(Checkbox, { checked: isIndeterminate ? "indeterminate" : isSelected, onCheckedChange: onSelect, disabled: isDisabled || isDeleted }) }),
+    items.map(({
+      label,
+      overflowMode,
+      ...cellProps
+    }, cellIndex) => /* @__PURE__ */ jsxs(TableData, { $size: size, ...cellProps, children: [
+      headers[cellIndex] && /* @__PURE__ */ jsx(MobileHeader, { children: headers[cellIndex].label }),
+      /* @__PURE__ */ jsx(Cell, { label, overflowMode: overflowMode ?? headers[cellIndex]?.overflowMode })
+    ] }, `table-cell-${cellIndex}`)),
+    actionsList.length > 0 && /* @__PURE__ */ jsx(ActionsList, { $size: size, children: /* @__PURE__ */ jsxs(ActionsContainer, { children: [
+      actionsList.includes("editAction") && /* @__PURE__ */ jsx(EditButton, { as: IconButton, type: "ghost", disabled: isDisabled || isDeleted || !isEditable, icon: "pencil", onClick: onEdit, "data-testid": "table-row-edit" }),
+      actionsList.includes("deleteAction") && /* @__PURE__ */ jsx(TableRowCloseButton, { as: IconButton, disabled: isDisabled || !isDeletable, $isDeleted: isDeleted, type: "ghost", icon: "cross", onClick: onDelete, "data-testid": "table-row-delete" })
+    ] }) })
+  ] });
+};
+const SpanedTableData = styled(TableData).withConfig({
+  componentId: "sc-t8h5hv-18"
+})(["text-align:center;"]);
+const CustomTableDataMessage = styled.div.withConfig({
+  componentId: "sc-t8h5hv-19"
+})(["display:flex;gap:0.5rem;justify-content:center;"]);
+const LoadingData = () => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SvgImage, { name: "loading-animated", size: "sm" }),
+    /* @__PURE__ */ jsx(Text, { size: "sm", children: "Loading data" })
+  ] });
+};
+const CustomTableRow = ({
+  loading,
+  noDataMessage,
+  colSpan,
+  size
+}) => {
+  return /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(SpanedTableData, { $size: size, colSpan, children: /* @__PURE__ */ jsx(CustomTableDataMessage, { children: loading ? /* @__PURE__ */ jsx(LoadingData, {}) : noDataMessage ?? "No Data available" }) }) });
+};
+const MIN_COLUMN_WIDTH = 120;
+const Table = forwardRef(({
+  headers,
+  rows,
+  isSelectable,
+  selectedIds = [],
+  onSelect,
+  onDelete,
+  onEdit,
+  onSort,
+  loading,
+  noDataMessage,
+  size = "sm",
+  showHeader = true,
+  rowHeight,
+  resizableColumns,
+  mobileLayout = "list",
+  ...props
+}, ref) => {
+  const isDeletable = typeof onDelete === "function";
+  const isEditable = typeof onEdit === "function";
+  const [columnWidths, setColumnWidths] = useState(null);
+  const theadRef = useRef(null);
+  useLayoutEffect(() => {
+    if (!resizableColumns || columnWidths !== null || !theadRef.current) {
+      return;
+    }
+    const headerCells = theadRef.current.querySelectorAll("th");
+    const widths = /* @__PURE__ */ new Map();
+    const startIndex = isSelectable ? 1 : 0;
+    const endIndex = headerCells.length - (isDeletable || isEditable ? 1 : 0);
+    let headerIndex = 0;
+    for (let i = startIndex; i < endIndex; i++) {
+      const header = headers[headerIndex];
+      if (header) {
+        const key = typeof header.label === "string" ? header.label : `__index_${headerIndex}`;
+        widths.set(key, headerCells[i].getBoundingClientRect().width);
+      }
+      headerIndex++;
+    }
+    if (widths.size === headers.length) {
+      setColumnWidths(widths);
+    }
+  }, [resizableColumns, columnWidths, isSelectable, isDeletable, isEditable]);
+  const headerKey = useMemo(() => headers.map((h, i) => typeof h.label === "string" ? h.label : `__index_${i}`).join(","), [headers]);
+  useEffect(() => {
+    setColumnWidths(null);
+  }, [headerKey]);
+  const resizeStateRef = useRef({
+    isResizing: false,
+    columnLabel: null,
+    nextColumnLabel: null,
+    startX: 0,
+    startWidth: 0,
+    nextStartWidth: 0
+  });
+  const onMouseMove = useCallback((e) => {
+    if (!resizeStateRef.current.isResizing) {
+      return;
+    }
+    const {
+      columnLabel,
+      nextColumnLabel,
+      startX,
+      startWidth,
+      nextStartWidth
+    } = resizeStateRef.current;
+    if (!columnLabel || !nextColumnLabel) {
+      return;
+    }
+    const diff = e.clientX - startX;
+    const newWidth = startWidth + diff;
+    const newNextWidth = nextStartWidth - diff;
+    if (Number.isNaN(newWidth) || Number.isNaN(newNextWidth)) {
+      console.warn("Unexpected computed values for resize width", {
+        newWidth,
+        newNextWidth
+      });
+      return;
+    }
+    if (newWidth >= MIN_COLUMN_WIDTH && newNextWidth >= MIN_COLUMN_WIDTH) {
+      setColumnWidths((prev) => {
+        if (!prev) {
+          return prev;
+        }
+        const updated = new Map(prev);
+        updated.set(columnLabel, newWidth);
+        updated.set(nextColumnLabel, newNextWidth);
+        return updated;
+      });
+    }
+  }, []);
+  const onMouseUp = useCallback(() => {
+    resizeStateRef.current.isResizing = false;
+  }, []);
+  useEffect(() => {
+    if (!resizableColumns) {
+      return;
+    }
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+  }, [resizableColumns, onMouseMove, onMouseUp]);
+  const handleResizeStart = useCallback((columnIndex) => (e) => {
+    e.preventDefault();
+    if (!columnWidths) {
+      return;
+    }
+    const currentHeader = headers[columnIndex];
+    const nextHeader = headers[columnIndex + 1];
+    if (!currentHeader || !nextHeader) {
+      return;
+    }
+    const currentLabel = typeof currentHeader.label === "string" ? currentHeader.label : `__index_${columnIndex}`;
+    const nextLabel = typeof nextHeader.label === "string" ? nextHeader.label : `__index_${columnIndex + 1}`;
+    const startWidth = columnWidths.get(currentLabel);
+    const nextStartWidth = columnWidths.get(nextLabel);
+    if (startWidth === void 0 || nextStartWidth === void 0) {
+      return;
+    }
+    resizeStateRef.current = {
+      isResizing: true,
+      columnLabel: currentLabel,
+      nextColumnLabel: nextLabel,
+      startX: e.clientX,
+      startWidth,
+      nextStartWidth
+    };
+  }, [headers, columnWidths]);
+  const onRowSelect = (id) => (checked) => {
+    if (typeof onSelect == "function") {
+      const selectedItems = rows.flatMap((row, index) => {
+        if (id === row.id && checked || selectedIds.includes(row.id) && id !== row.id) {
+          return {
+            item: row,
+            index
+          };
+        }
+        return [];
+      });
+      onSelect(selectedItems);
+    }
+  };
+  const hasRows = rows.length > 0;
+  const actionsList = [];
+  if (isDeletable) {
+    actionsList.push("deleteAction");
+  }
+  if (isEditable) {
+    actionsList.push("editAction");
+  }
+  const onKeyboardResize = useCallback((columnIndex) => (_e, direction) => {
+    if (!columnWidths) {
+      return;
+    }
+    const currentHeader = headers[columnIndex];
+    const nextHeader = headers[columnIndex + 1];
+    if (!currentHeader || !nextHeader) {
+      return;
+    }
+    const currentLabel = typeof currentHeader.label === "string" ? currentHeader.label : `__index_${columnIndex}`;
+    const nextLabel = typeof nextHeader.label === "string" ? nextHeader.label : `__index_${columnIndex + 1}`;
+    const increment = 2;
+    const multiplier = direction === "right" ? 1 : -1;
+    const diff = increment * multiplier;
+    const currentWidth = columnWidths.get(currentLabel);
+    const nextWidth = columnWidths.get(nextLabel);
+    if (currentWidth === void 0 || nextWidth === void 0) {
+      return;
+    }
+    const newWidth = currentWidth + diff;
+    const newNextWidth = nextWidth - diff;
+    const shouldUpdateColumnWidth = newWidth >= MIN_COLUMN_WIDTH && newNextWidth >= MIN_COLUMN_WIDTH;
+    if (!shouldUpdateColumnWidth) {
+      return;
+    }
+    setColumnWidths((prev) => {
+      if (!prev) {
+        return prev;
+      }
+      const updated = new Map(prev);
+      updated.set(currentLabel, newWidth);
+      updated.set(nextLabel, newNextWidth);
+      return updated;
+    });
+  }, [columnWidths, headers]);
+  return /* @__PURE__ */ jsxs(TableOuterContainer, { "data-mobile-layout": mobileLayout, children: [
+    hasRows && showHeader && /* @__PURE__ */ jsx(MobileActions, { children: isSelectable && /* @__PURE__ */ jsx(SelectAllCheckbox, { label: "Select All", onCheckedChange: onSelect, rows, selectedIds }) }),
+    /* @__PURE__ */ jsx(TableWrapper, { children: /* @__PURE__ */ jsxs(StyledTable, { ref, ...props, children: [
+      showHeader && /* @__PURE__ */ jsx(Thead, { headers, isSelectable, onSelectAll: onSelect, actionsList, onSort, size, rows, selectedIds, resizableColumns, columnWidths: resizableColumns ? columnWidths : void 0, onResizeStart: resizableColumns ? handleResizeStart : void 0, theadRef, onKeyboardResize: resizableColumns ? onKeyboardResize : void 0 }),
+      /* @__PURE__ */ jsxs(Tbody, { children: [
+        (loading || !hasRows) && /* @__PURE__ */ jsx(CustomTableRow, { colSpan: headers.length + (isEditable || isDeletable ? 1 : 0) + (isSelectable ? 1 : 0), loading, noDataMessage, size }),
+        rows.map(({
+          id,
+          ...rowProps
+        }, rowIndex) => /* @__PURE__ */ jsx(TableBodyRow, { headers, isSelectable, isSelected: selectedIds?.includes(id), onSelect: onRowSelect(id), actionsList, onDelete: isDeletable ? () => onDelete({
+          id,
+          ...rowProps,
+          isDeleted: !rowProps.isDeleted
+        }, rowIndex) : void 0, onEdit: isEditable ? () => onEdit({
+          id,
+          ...rowProps
+        }, rowIndex) : void 0, size, rowHeight, ...rowProps }, `table-body-row-${rowIndex}`))
+      ] })
+    ] }) })
+  ] });
+});
+const SelectAllCheckbox = ({
+  rows,
+  selectedIds,
+  onCheckedChange,
+  ...checkboxProps
+}) => {
+  const selectedIdSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+  const {
+    checked,
+    disabled
+  } = useMemo(() => {
+    let areAllChecked = true;
+    let maybeIndeterminate = false;
+    let disabled2 = true;
+    for (const row of rows) {
+      if (row.isDisabled || row.isDeleted) {
+        continue;
+      } else {
+        disabled2 = false;
+      }
+      if (selectedIdSet.has(row.id)) {
+        maybeIndeterminate = "indeterminate";
+      } else {
+        areAllChecked = false;
+      }
+    }
+    return {
+      checked: disabled2 ? false : areAllChecked || maybeIndeterminate,
+      disabled: disabled2
+    };
+  }, [rows, selectedIdSet]);
+  const handleCheckedChange = (checked2) => {
+    if (typeof onCheckedChange !== "function") {
+      return;
+    }
+    const newSelectedRows = rows.reduce((acc, row, index) => {
+      const isDisabled = row.isDisabled || row.isDeleted;
+      const shouldBeSelected = checked2 ? !isDisabled || selectedIdSet.has(row.id) : isDisabled && selectedIdSet.has(row.id);
+      if (shouldBeSelected) {
+        acc.push({
+          item: row,
+          index
+        });
+      }
+      return acc;
+    }, []);
+    onCheckedChange(newSelectedRows);
+  };
+  return /* @__PURE__ */ jsx(Checkbox, { checked, disabled, onCheckedChange: handleCheckedChange, ...checkboxProps });
+};
+const TextWrapped = styled.span.withConfig({
+  componentId: "sc-t8h5hv-20"
+})(["overflow-wrap:break-word;word-break:break-all;display:inline-block;max-width:100%;"]);
+const Cell = ({
+  label,
+  overflowMode = "truncated"
+}) => {
+  const isText = typeof label === "string";
+  if (!isText) {
+    return /* @__PURE__ */ jsx(Fragment, { children: label });
+  }
+  if (overflowMode === "truncate-middle") {
+    return /* @__PURE__ */ jsx(MiddleTruncator, { text: label });
+  }
+  if (overflowMode === "wrap") {
+    return /* @__PURE__ */ jsx(TextWrapped, { children: label });
+  }
+  return /* @__PURE__ */ jsx(EllipsisContent, { component: "div", children: label });
+};
+const StyledTable = styled.table.withConfig({
+  componentId: "sc-t8h5hv-21"
+})(["width:100%;border-collapse:collapse;overflow:visible;table-layout:fixed;[data-mobile-layout='list'] &{@media (max-width:", "){border:none;table-layout:auto;}}"], ({
+  theme
+}) => theme.breakpoint.sizes.md);
+
+export { Table };
+//# sourceMappingURL=index.js.map