@persona/design-system 0.1.5-pre.4 → 0.1.7

package/dist/components/Table/index.cjs

@@ -2,399 +2,20 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_chunk = require("../../chunk-CoPdw6nB.cjs");
-const require_lib_pseudoClass = require("../../lib/pseudoClass.cjs");
-require("../../variables/transitions.cjs");
-const require_mixins_text = require("../../mixins/text.cjs");
-require("../../variables/spacing.cjs");
-const require_Text = require("../../Text-DVz8erdF.cjs");
-const require_variables_keyframes = require("../../variables/keyframes.cjs");
-const require_Tooltip = require("../../Tooltip-0i_15ysU.cjs");
-const require_lib_zindex = require("../../lib/zindex.cjs");
-const require_Spinner = require("../../Spinner-z7DrPE1d.cjs");
-require("../Spinner/index.cjs");
-let _persona_design_tokens = require("@persona/design-tokens");
-let styled_components = require("styled-components");
-styled_components = require_chunk.__toESM(styled_components);
-let react_jsx_runtime = require("react/jsx-runtime");
-let react = require("react");
-let _persona_icons = require("@persona/icons");
-//#region components/Table/Table.tsx
-const slideKeyframes$1 = styled_components.keyframes`
-  0% {
-    transform: translateX(-50%) scaleX(0);
-  }
-  50% {
-    transform: translateX(0) scaleX(1);
-  }
-  100% {
-    transform: translateX(50%) scaleX(0);
-  }
-`;
-const Table = styled_components.default.table.attrs({ role: "table" })`
-  display: table;
-  width: 100%;
-  border-spacing: 0;
-  ${require_mixins_text.paragraphMixins.md};
-
-  ${({ size }) => size === "sm" && styled_components.css`
-      td,
-      th {
-        padding: ${_persona_design_tokens.Spacing[2]};
-      }
-    `}
-
-  ${({ isLoading }) => isLoading && styled_components.css`
-      thead {
-        &:after {
-          content: '';
-          display: block;
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          width: 100%;
-          border-bottom: 3px solid ${({ theme }) => theme.color.primary.brand};
-          animation: ${slideKeyframes$1} 3s infinite cubic-bezier(0.5, 0, 0.5, 1);
-        }
-      }
-    `}
-`;
-//#endregion
-//#region components/Table/TableHeaderCell.tsx
-const StyledTableHeaderCell = styled_components.default.th`
-  display: table-cell;
-
-  background-color: ${({ theme }) => theme.color.background.secondary};
-  padding: ${({ size }) => size === "sm" ? 8 : 8 * 1.5}px;
-  text-align: left;
-  white-space: nowrap;
-  ${({ size }) => size === "sm" ? require_mixins_text.paragraphMixins.sm : require_mixins_text.paragraphMixins.md};
-  line-height: 1;
-  width: ${({ width }) => {
-	switch (width) {
-		case "min": return "1px";
-		case "max": return "100%";
-		default: if (width) return width;
-		else return "auto";
-	}
-}};
-
-  &:first-child {
-    border-radius: ${({ theme }) => `${theme.element.borderRadius} 0 0 ${theme.element.borderRadius}`};
-  }
-
-  &:last-child {
-    border-radius: ${({ theme }) => `0 ${theme.element.borderRadius} ${theme.element.borderRadius} 0`};
-  }
-
-  ${({ sortable }) => sortable && styled_components.css`
-      cursor: pointer;
-
-      &:hover ${TableIconContainer} {
-        display: inline;
-        visibility: visible;
-      }
-    `};
-
-  ${({ isSticky }) => isSticky ? styled_components.css`
-          position: sticky;
-          top: 0;
-          z-index: 1;
-        ` : styled_components.css`
-          position: relative;
-        `}
-`;
-const VerticalAlign = styled_components.default.div`
-  display: flex;
-  align-items: center;
-  gap: ${_persona_design_tokens.Spacing[1]};
-`;
-const TableIconContainer = (0, styled_components.default)("div")`
-  display: inline-block;
-
-  ${({ sortDirection }) => {
-	if (sortDirection) return styled_components.css`
-        display: inline;
-      `;
-	else return styled_components.css`
-        display: inline;
-        visibility: hidden;
-        color: ${({ theme }) => theme.color.text.disabled};
-      `;
-}};
-`;
-const TableHeaderCell = (0, react.forwardRef)(function TableHeaderCell({ sortable, sortDirection, children, align, ...elemProps }, ref) {
-	let ariaSort = "none";
-	if (sortable && sortDirection) ariaSort = sortDirection === "asc" ? "ascending" : "descending";
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTableHeaderCell, {
-		sortable,
-		"aria-sort": ariaSort,
-		role: "columnheader",
-		...elemProps,
-		ref,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(VerticalAlign, {
-			css: { flexDirection: align === "right" ? "row-reverse" : "row" },
-			children: [children, sortable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableIconContainer, {
-				sortDirection,
-				children: sortDirection === "asc" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.CaretUpIcon, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.CaretDownIcon, {})
-			})]
-		})
-	});
-});
-//#endregion
-//#region components/Table/TableRow.tsx
-const TableRow = styled_components.default.tr.attrs({ role: "row" })`
-  display: table-row;
-
-  ${({ onClick }) => onClick != null && styled_components.css`
-      cursor: pointer;
-    `}
-
-  ${({ disableHoverBackground, theme }) => !disableHoverBackground && styled_components.css`
-      &${require_lib_pseudoClass.isHovered} {
-        background-color: ${theme.color.background.highlight};
-        transition-duration: ${"200ms"};
-      }
-    `}
-
-  ${require_lib_pseudoClass.isFocusedVisible}
-`;
-//#endregion
-//#region components/Table/TableTH.tsx
-const TableTH = (0, react.forwardRef)(function TableTH({ children, canSort, isSorted, isSticky, isDescending, helpText, align, size, ...props }, ref) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TableHeaderCell, {
-		sortable: canSort,
-		sortDirection: canSort && isSorted ? isDescending ? "desc" : "asc" : false,
-		ref,
-		isSticky,
-		align,
-		size,
-		...props,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "th__text",
-			children
-		}), helpText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.HelperTooltip, {
-			size: "sm",
-			css: {
-				height: 14,
-				marginLeft: _persona_design_tokens.Spacing[1]
-			},
-			children: helpText
-		})]
-	});
-});
-//#endregion
-//#region components/Table/TableCell.tsx
-const TableCell = styled_components.default.td.attrs({ role: "cell" })`
-  display: table-cell;
-  vertical-align: middle;
-
-  border-bottom: 1px solid ${({ theme }) => theme.color.border.primary};
-  text-align: left;
-  padding: ${({ size }) => size === "sm" ? 8 : 8 * 1.5}px;
-  color: ${({ theme }) => theme.color.text.primary};
-  white-space: nowrap;
-  ${require_mixins_text.paragraphMixins.md};
-  line-height: 1;
-  ${({ breakWord }) => breakWord ? `white-space: normal;
-         overflow-wrap: break-word;` : ""}
-`;
-const CellTitleContainer = styled_components.default.div`
-  display: flex;
-  flex-direction: column;
-`;
-const CellTitle = (0, styled_components.default)(require_Text.Paragraph).attrs({ color: "primary" })`
-  display: flex;
-  align-items: center;
-  gap: ${_persona_design_tokens.Spacing[2]};
-`;
-const TableCellTitle = ({ children, subtitle, ...elemProps }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CellTitleContainer, {
-		...elemProps,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CellTitle, { children }), subtitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Paragraph, { children: subtitle })]
-	});
-};
-const TableTD = (0, styled_components.default)(TableCell)`
-  white-space: normal;
-  overflow-wrap: break-word;
-  ${(props) => props.unclickable && styled_components.css`
-      cursor: default;
-    `}
-`;
-const TableIconTD = (0, styled_components.default)(TableTD)`
-  text-align: right;
-  line-height: 0; /* To center icon; cannot use flex here */
-  padding: 0;
-  padding-left: ${_persona_design_tokens.Spacing[4]};
-  width: 36px;
-`;
-const TableActionTD = (0, styled_components.default)(TableTD)`
-  text-align: right;
-  padding: 0;
-  padding-right: ${_persona_design_tokens.Spacing[4]};
-  width: 48px;
-`;
-const StickyTD = (0, styled_components.default)(TableTD)`
-  position: sticky;
-  left: ${({ left = 0 }) => `${left}px`}; // Default to 0 if not specified
-  background-color: ${({ theme }) => theme.color.background.primary};
-
-  ${({ hasRightBorder, theme }) => hasRightBorder && `border-right: 2px solid ${theme.color.border.primary};`}
-  z-index: 2;
-`;
-const StickyTH = (0, styled_components.default)(TableTH)`
-  position: sticky;
-  left: ${({ left = 0 }) => `${left}px`}; // Default to 0 if not specified
-  z-index: 2;
-  max-width: 10%;
-  background-color: ${({ theme }) => theme.color.background.secondary};
-  ${({ hasRightBorder, theme }) => hasRightBorder && `border-right: 2px solid ${theme.color.border.primary};`}
-`;
-const TableTR = (0, styled_components.default)(TableRow)`
-  ${({ disableHoverBackground }) => disableHoverBackground && styled_components.css`
-      &:hover {
-        background-color: transparent !important;
-      }
-    `}
-
-  ${({ $isActive }) => $isActive && styled_components.css`
-      background-color: ${({ theme }) => theme.color.background.highlight};
-      &:hover {
-        background-color: ${({ theme }) => theme.color.background.highlight};
-      }
-    `}
-
-  ${({ onClick, disableHoverBackground, $isActive }) => onClick != null && !disableHoverBackground && !$isActive && styled_components.css`
-      cursor: pointer;
-      :hover {
-        background-color: ${({ theme }) => theme.color.background.highlight};
-      }
-      transition-duration: ${"200ms"};
-    `}
-`;
-//#endregion
-//#region components/Table/TableHead.tsx
-const TableHead = styled_components.default.thead.attrs({ role: "rowgroup" })`
-  display: table-header-group;
-  ${({ sticky }) => sticky && styled_components.css`
-      position: sticky;
-      top: 0;
-      z-index: 1;
-    `}
-`;
-//#endregion
-//#region components/Table/TableBody.tsx
-const TableBody = styled_components.default.tbody.attrs({ role: "rowgroup" })`
-  display: table-row-group;
-`;
-//#endregion
-//#region components/Table/TableLayout.tsx
-const Container = styled_components.default.div`
-    position: relative;
-    z-index: 0;
-    overflow-x: auto;
-    ${({ maxHeight }) => {
-	if (maxHeight != null) return `max-height: ${maxHeight}px;`;
-}}
-  `;
-const slideKeyframes = styled_components.keyframes`
-    0% {
-      transform: translateX(-50%) scaleX(0);
-    }
-    50% {
-      transform: translateX(0) scaleX(1);
-    }
-    100% {
-      transform: translateX(50%) scaleX(0);
-    }
-  `;
-const Loader = styled_components.default.div`
-    position: absolute;
-    z-index: ${require_lib_zindex.Z_INDICES.loadingOverlays};
-    border-bottom: 3px solid ${({ theme }) => theme.color.primary.brand};
-    width: 100%;
-  
-    animation: ${slideKeyframes} 3s infinite cubic-bezier(0.5, 0, 0.5, 1);
-  `;
-const Overlay = styled_components.default.div`
-    position: absolute;
-    z-index: ${require_lib_zindex.Z_INDICES.loadingOverlays};
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: ${({ theme }) => theme.color.primary.white};
-    opacity: 50%;
-  `;
-const SpinnerWrapper = styled_components.default.div`
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: ${_persona_design_tokens.Spacing[5]} 0;
-    animation: ${require_variables_keyframes.fadeIn} 1s;
-    animation-delay: 0.5s;
-    animation-fill-mode: backwards;
-  `;
-const TableSpinner = (0, styled_components.default)(require_Spinner.Spinner)`
-    svg {
-      width: 120px;
-      height: 120px;
-    }
-  
-    path {
-      stroke: ${_persona_design_tokens.Color.CorePurple500};
-      stroke-width: 0.46;
-    }
-  `;
-const TableLayout = ({ children, className, containerMaxHeight, dataTest, headerTR, isEmpty, isLoading, nullState, showHeader, size = "md", stickyHeader = false }) => {
-	if (isEmpty && !showHeader) if (isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SpinnerWrapper, {
-		role: "status",
-		"aria-live": "polite",
-		"aria-busy": "true",
-		"aria-label": "Loading...",
-		"data-loading-indicator": "true",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableSpinner, { size: "md" })
-	});
-	else return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Container, {
-		"data-test": dataTest,
-		children: nullState
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container, {
-		"data-test": dataTest,
-		maxHeight: containerMaxHeight,
-		className,
-		children: [
-			isLoading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Loader, { "data-test": "table-layout__loader" }),
-			isLoading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Overlay, {}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Table, {
-				size,
-				"aria-busy": isLoading || void 0,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableHead, {
-					sticky: stickyHeader,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableRow, { children: headerTR })
-				}), !isEmpty && children]
-			}),
-			isEmpty && nullState
-		]
-	});
-};
-//#endregion
-exports.StickyTD = StickyTD;
-exports.StickyTH = StickyTH;
-exports.Table = Table;
-exports.TableActionTD = TableActionTD;
-exports.TableBody = TableBody;
-exports.TableCell = TableCell;
-exports.TableCellTitle = TableCellTitle;
-exports.TableHead = TableHead;
-exports.TableHeaderCell = TableHeaderCell;
-exports.TableIconTD = TableIconTD;
-exports.TableLayout = TableLayout;
-exports.TableRow = TableRow;
-exports.TableTD = TableTD;
-exports.TableTH = TableTH;
-exports.TableTR = TableTR;
-exports.default = Table;
-
-//# sourceMappingURL=index.cjs.map
+const require_Table = require("../../Table-C9rjUVpn.cjs");
+exports.StickyTD = require_Table.StickyTD;
+exports.StickyTH = require_Table.StickyTH;
+exports.Table = require_Table.Table;
+exports.TableActionTD = require_Table.TableActionTD;
+exports.TableBody = require_Table.TableBody;
+exports.TableCell = require_Table.TableCell;
+exports.TableCellTitle = require_Table.TableCellTitle;
+exports.TableHead = require_Table.TableHead;
+exports.TableHeaderCell = require_Table.TableHeaderCell;
+exports.TableIconTD = require_Table.TableIconTD;
+exports.TableLayout = require_Table.TableLayout;
+exports.TableRow = require_Table.TableRow;
+exports.TableTD = require_Table.TableTD;
+exports.TableTH = require_Table.TableTH;
+exports.TableTR = require_Table.TableTR;
+exports.default = require_Table.Table;

package/dist/components/Table/index.d.cts

@@ -1,8 +1,8 @@
-import { t as Table } from "../../Table-DkAA1lt_.cjs";
-import { t as TableBody } from "../../TableBody-5QcVMPP_.cjs";
-import { t as TableHeaderCell } from "../../TableHeaderCell-25lC9tNk.cjs";
-import { t as TableHead } from "../../TableHead-9LLM1B8I.cjs";
-import { t as TableRow } from "../../TableRow-IPjQnK2q.cjs";
-import { t as TableLayout } from "../../TableLayout-CmDKOu10.cjs";
-import { a as TableCellProps, c as TableTD, i as TableCell, l as TableTR, n as StickyTH, o as TableCellTitle, r as TableActionTD, s as TableIconTD, t as StickyTD, u as TableTH } from "../../TableCell-DIs9h97h.cjs";
+import { t as Table } from "../../Table-DJZtluW3.cjs";
+import { t as TableHeaderCell } from "../../TableHeaderCell-UoY92mzR.cjs";
+import { a as TableCellProps, c as TableTD, i as TableCell, l as TableTR, n as StickyTH, o as TableCellTitle, r as TableActionTD, s as TableIconTD, t as StickyTD, u as TableTH } from "../../index-_tQRydn9.cjs";
+import { t as TableRow } from "../../TableRow-BVzduO4G.cjs";
+import { t as TableHead } from "../../TableHead-CTsZNRJm.cjs";
+import { t as TableBody } from "../../TableBody-BFPF07n4.cjs";
+import { t as TableLayout } from "../../TableLayout-GyRS-Awa.cjs";
 export { StickyTD, StickyTH, Table, Table as default, TableActionTD, TableBody, TableCell, TableCellProps, TableCellTitle, TableHead, TableHeaderCell, TableIconTD, TableLayout, TableRow, TableTD, TableTH, TableTR };

package/dist/components/Table/index.d.mts

@@ -1,8 +1,8 @@
-import { t as Table } from "../../Table-34f5m7w5.mjs";
-import { t as TableBody } from "../../TableBody-Clf34yzJ.mjs";
-import { t as TableHeaderCell } from "../../TableHeaderCell-DzYZq7SG.mjs";
-import { t as TableHead } from "../../TableHead-DJBGHoUD.mjs";
-import { t as TableRow } from "../../TableRow-CBKpDeUV.mjs";
-import { t as TableLayout } from "../../TableLayout-BA3jbdbi.mjs";
-import { a as TableCellProps, c as TableTD, i as TableCell, l as TableTR, n as StickyTH, o as TableCellTitle, r as TableActionTD, s as TableIconTD, t as StickyTD, u as TableTH } from "../../TableCell-Dog4Blfq.mjs";
+import { t as Table } from "../../Table-D3nyiZt0.mjs";
+import { t as TableHeaderCell } from "../../TableHeaderCell-B2yiOw4w.mjs";
+import { a as TableCellProps, c as TableTD, i as TableCell, l as TableTR, n as StickyTH, o as TableCellTitle, r as TableActionTD, s as TableIconTD, t as StickyTD, u as TableTH } from "../../index-BPnJP0jZ.mjs";
+import { t as TableRow } from "../../TableRow-C-faHbkL.mjs";
+import { t as TableHead } from "../../TableHead-wl78HqPT.mjs";
+import { t as TableBody } from "../../TableBody-DpRjZgzU.mjs";
+import { t as TableLayout } from "../../TableLayout-_TWUnffx.mjs";
 export { StickyTD, StickyTH, Table, Table as default, TableActionTD, TableBody, TableCell, TableCellProps, TableCellTitle, TableHead, TableHeaderCell, TableIconTD, TableLayout, TableRow, TableTD, TableTH, TableTR };