@persona/design-system 0.1.8 → 0.2.0

package/dist/{TableBox-luasMC73.mjs → TableBox-BC5l3UMT.mjs}

@@ -1,23 +1,23 @@
-import { focusOutline } from "./mixins/focus.mjs";
-import "./variables/effect.mjs";
-import "./variables/transitions.mjs";
 import { paragraphMixins } from "./mixins/text.mjs";
-import { n as Stack, t as HStack } from "./Stack-Bl54WmhY.mjs";
-import { a as Tooltip } from "./Tooltip-C6AR1xT-.mjs";
+import "./variables/transitions.mjs";
+import { a as Tooltip } from "./Tooltip-B-DDlRMw.mjs";
 import { findIndexByKey, moveItemByIndex } from "./lib/reorderItems.mjs";
 import { useScrollOverflow } from "./lib/useScrollOverflow.mjs";
 import { Z_INDICES } from "./lib/zindex.mjs";
-import { t as IconButton } from "./IconButton-CIWiEsS-.mjs";
-import { n as DropdownMenu_default } from "./DropdownMenu-DGYexb7s.mjs";
+import { focusOutline } from "./mixins/focus.mjs";
+import "./variables/effect.mjs";
+import { n as Stack, t as HStack } from "./Stack-ckRN7LrP.mjs";
+import { t as IconButton } from "./IconButton-Bi4kdsbV.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-B4f3LNoW.mjs";
 import { t as FormGroupContext } from "./useFormGroup-DWVW7A9f.mjs";
-import { h as Table, m as TableHeaderCell, n as TableBody, p as TableRow, r as TableHead, s as TableCell } from "./Table-D8IcpACv.mjs";
-import { n as CaretButton, t as Combobox } from "./Combobox-BdqU5WLG.mjs";
-import { s as Popover_default } from "./Popover-BkDpDdaO.mjs";
-import { t as Container } from "./FormControl-B28qa7aQ.mjs";
+import { h as Table, m as TableHeaderCell, n as TableBody, p as TableRow, r as TableHead, s as TableCell } from "./Table-BnYZVCLj.mjs";
+import { n as CaretButton, t as Combobox } from "./Combobox-BzqlrMK0.mjs";
+import { s as Popover_default } from "./Popover-5y0p85Sw.mjs";
+import { t as Container } from "./FormControl-CFYlkv7E.mjs";
 import { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
-import styled, { css } from "styled-components";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import styled, { css } from "styled-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { DragIcon } from "@persona/icons";
 import { CircleAlertIcon as CircleAlertIcon$1, MoreIcon as MoreIcon$1, XIcon as XIcon$1 } from "@persona/icons/12px";
 import uniqueId from "lodash/fp/uniqueId.js";
@@ -518,7 +518,7 @@ const TableBoxCell = ({ children, itemId = "", value = "", columnKey, errorText,
 		...columnConfig,
 		...inlineEditConfigOverride
 	} : columnConfig;
-	if (inlineEditConfig?.type === "combobox" && (context.hasHorizontalOverflow || inlineEditConfig?.fullWidthComboboxDropdown)) inlineEditConfig = {
+	if (inlineEditConfig?.type === "combobox" && (context.clipsOverflow || inlineEditConfig?.fullWidthComboboxDropdown)) inlineEditConfig = {
 		...inlineEditConfig,
 		useComboboxPortal: true
 	};
@@ -642,55 +642,60 @@ const StyledRow = styled(TableRow)`
     color: ${({ theme }) => theme.color.text.brand};
   }
 
-  &:hover:not([aria-selected='true']) {
-    cursor: ${({ $isSelectable }) => $isSelectable ? "pointer" : "default"};
-    color: ${({ theme }) => theme.color.text.primary};
-    background: ${Color.BackgroundSecondary};
+  /* Hover and edit feedback is scoped to rows that respond to a pointer.
+     Display-only tables (no selection, reordering, actions or inline editing)
+     would otherwise read as clickable. */
+  &[data-interactive] {
+    &:hover:not([aria-selected='true']) {
+      cursor: ${({ $isSelectable }) => $isSelectable ? "pointer" : "default"};
+      color: ${({ theme }) => theme.color.text.primary};
+      background: ${Color.BackgroundSecondary};
 
-    ${RowActionsContainer} {
-      opacity: 1;
-      background: linear-gradient(to right, transparent, ${Color.BackgroundSecondary} 12px);
-    }
+      ${RowActionsContainer} {
+        opacity: 1;
+        background: linear-gradient(to right, transparent, ${Color.BackgroundSecondary} 12px);
+      }
 
-    ${CaretButton} {
-      opacity: 1;
+      ${CaretButton} {
+        opacity: 1;
+      }
     }
-  }
 
-  &:has(input:focus),
-  &:has(textarea:focus),
-  &:has(input[role='combobox'][aria-expanded='true']),
-  &:has(input:focus):hover,
-  &:has(textarea:focus):hover,
-  &:has(input[role='combobox'][aria-expanded='true']):hover,
-  &:has(button:focus),
-  &:has(button:focus):hover {
-    color: ${({ theme }) => theme.color.text.brand};
-    background-color: ${({ theme }) => theme.color.background.highlight};
+    &:has(input:focus),
+    &:has(textarea:focus),
+    &:has(input[role='combobox'][aria-expanded='true']),
+    &:has(input:focus):hover,
+    &:has(textarea:focus):hover,
+    &:has(input[role='combobox'][aria-expanded='true']):hover,
+    &:has(button:focus),
+    &:has(button:focus):hover {
+      color: ${({ theme }) => theme.color.text.brand};
+      background-color: ${({ theme }) => theme.color.background.highlight};
 
-    ${RowActionsContainer} {
-      opacity: 1;
-      background: linear-gradient(
-        to right,
-        transparent,
-        ${({ theme }) => theme.color.background.highlight} ${parseInt(Spacing[3])}px
-      );
-    }
+      ${RowActionsContainer} {
+        opacity: 1;
+        background: linear-gradient(
+          to right,
+          transparent,
+          ${({ theme }) => theme.color.background.highlight} ${parseInt(Spacing[3])}px
+        );
+      }
 
-    ${CaretButton} {
-      opacity: 1;
+      ${CaretButton} {
+        opacity: 1;
+      }
     }
-  }
 
-  /* In fixed-layout mode the actions overlay lives inside the furthest-right
-     column's cell, so revealing the delete (X) on focus would park it on top
-     of the text being edited. While that column's inline input holds focus,
-     keep it hidden; hovering the row still brings it back. */
-  &:not(:hover):has(
-      td:last-child :is(input:not([role='combobox']), textarea):focus
-    ) {
-    ${RowActionsContainer} {
-      opacity: 0;
+    /* In fixed-layout mode the actions overlay lives inside the furthest-right
+       column's cell, so revealing the delete (X) on focus would park it on top
+       of the text being edited. While that column's inline input holds focus,
+       keep it hidden; hovering the row still brings it back. */
+    &:not(:hover):has(
+        td:last-child :is(input:not([role='combobox']), textarea):focus
+      ) {
+      ${RowActionsContainer} {
+        opacity: 0;
+      }
     }
   }
 `;
@@ -807,6 +812,9 @@ const TableBoxRow = ({ children, actions, onDelete, errorText, id, dropdownFormF
 	const { isErrorVisible, onBlur: handleDelayedErrorBlur, onEditingEnd: handleDelayedErrorEditingEnd, onFocus: handleDelayedErrorFocus } = useDelayedInlineEditError(errorText);
 	const effectiveActions = isDisabled ? void 0 : actions;
 	const effectiveOnDelete = isDisabled ? void 0 : onDelete;
+	const hasRowDropdown = Boolean(dropdownFormFields || dropdownContent);
+	const hasInlineEditableColumn = !isDisabled && (context?.columns?.some((column) => column.inlineEditConfig != null) ?? false);
+	const isInteractive = isSelectable || isReorderable || hasInlineEditableColumn || (effectiveActions?.length ?? 0) > 0 || effectiveOnDelete != null;
 	const areOtherCellsBlank = Children.toArray(children).filter((child) => isValidElement(child)).slice(1).every((cell) => cell.props.value === "");
 	const handleFocus = (event) => {
 		handleDelayedErrorFocus(event);
@@ -897,9 +905,9 @@ const TableBoxRow = ({ children, actions, onDelete, errorText, id, dropdownFormF
 		rowChildrenWithContext,
 		rowRegistry
 	]);
-	const shouldRenderDropdown = dropdownFormFields || dropdownContent;
 	const rowContent = isReorderable ? /* @__PURE__ */ jsx(SortableTableBoxRowContent, {
 		...props,
+		"data-interactive": isInteractive || void 0,
 		id,
 		isSelected,
 		isSelectable,
@@ -911,6 +919,7 @@ const TableBoxRow = ({ children, actions, onDelete, errorText, id, dropdownFormF
 		children: rowChildrenWithContext
 	}) : /* @__PURE__ */ jsx(StyledRow, {
 		...props,
+		"data-interactive": isInteractive || void 0,
 		ref: rowRef,
 		id,
 		onClick: handleClick,
@@ -921,7 +930,7 @@ const TableBoxRow = ({ children, actions, onDelete, errorText, id, dropdownFormF
 		$isSelectable: isSelectable,
 		children: rowChildrenWithContext
 	});
-	if (shouldRenderDropdown) return /* @__PURE__ */ jsx(Popover_default, {
+	if (hasRowDropdown) return /* @__PURE__ */ jsx(Popover_default, {
 		trigger: rowContent,
 		open: isSelected,
 		children: /* @__PURE__ */ jsxs(Popover_default.Card, {
@@ -975,6 +984,7 @@ const OverlayTable = styled.table`
 const TableBoxRowOverlay = ({ children, cellWidths }) => /* @__PURE__ */ jsxs(OverlayTable, {
 	"aria-hidden": "true",
 	children: [/* @__PURE__ */ jsx("colgroup", { children: cellWidths.map((width, i) => /* @__PURE__ */ jsx("col", { style: { width: `${width}px` } }, i)) }), /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs(StyledRow, {
+		"data-interactive": true,
 		disableHoverBackground: true,
 		children: [/* @__PURE__ */ jsx(DragHandleCell, { children: /* @__PURE__ */ jsx(DragHandleButton, {
 			tabIndex: -1,
@@ -1087,42 +1097,58 @@ const useTableBoxDragAndDrop = ({ tableRef, reorderConfig }) => {
 const TableBoxContext = createContext(null);
 const DRAG_HANDLE_CELL_WIDTH = 24;
 const RIGHT_FADE_WIDTH = 48;
+const CONTAINER_BORDER_WIDTH_PX = 1;
+const STICKY_COLUMN_Z_INDEX = Z_INDICES.sticky;
+const BODY_FADE_Z_INDEX = Z_INDICES.sticky + 1;
+const PINNED_ACTIONS_Z_INDEX = Z_INDICES.sticky + 2;
+const STICKY_HEADER_Z_INDEX = Z_INDICES.sticky + 3;
+const STICKY_CORNER_Z_INDEX = Z_INDICES.sticky + 4;
+const HEADER_FADE_Z_INDEX = Z_INDICES.sticky + 5;
 const HEADER_HEIGHT_PX = parseInt(Spacing[1], 10) * 2 + parseInt(Typography.TextSmall.lineHeight, 10) + 1;
 const TableScrollContainer = styled.div`
-  border: 1px solid ${Color.BorderDivider};
+  border: ${CONTAINER_BORDER_WIDTH_PX}px solid ${Color.BorderDivider};
   border-radius: ${BorderRadius.Md};
   overflow-x: ${({ $fixedLayout, $hasHorizontalOverflow }) => $fixedLayout ? "visible" : $hasHorizontalOverflow ? "auto" : "visible"};
+  overflow-y: ${({ $maxHeight }) => $maxHeight != null ? "auto" : "visible"};
   overscroll-behavior-x: none;
+  ${({ $maxHeight }) => $maxHeight != null && css`
+      max-height: ${typeof $maxHeight === "number" ? `${$maxHeight}px` : $maxHeight};
+    `}
 `;
 const ScrollAffordanceWrapper = styled.div`
   position: relative;
 `;
 const RightFadeOverlay = styled.div`
   position: absolute;
-  top: 1px;
-  right: 1px;
-  bottom: 1px;
+  right: ${({ $scrollbarWidth }) => CONTAINER_BORDER_WIDTH_PX + $scrollbarWidth}px;
   width: ${RIGHT_FADE_WIDTH}px;
-  /* Sits above the sticky first column (z-index 2) but below the pinned
-     row actions (z-index 4) so action buttons stay legible. */
-  z-index: 3;
   pointer-events: none;
-  background:
-    linear-gradient(to right, transparent, ${Color.BackgroundSecondary}) top left / 100%
-      ${Math.max(0, HEADER_HEIGHT_PX - 1)}px no-repeat,
-    linear-gradient(to right, transparent, ${Color.BackgroundPrimary}) bottom left / 100%
-      calc(100% - ${HEADER_HEIGHT_PX}px) no-repeat;
-  border-top-right-radius: ${BorderRadius.Md};
-  border-bottom-right-radius: ${BorderRadius.Md};
   opacity: ${({ $visible }) => $visible ? 1 : 0};
   transition: opacity ${"200ms"} ease-out;
 `;
-const stickyContentColumn = (isReorderable) => css`
+const HeaderFadeOverlay = styled(RightFadeOverlay).attrs({ "data-scroll-affordance": "header-fade" })`
+  top: ${CONTAINER_BORDER_WIDTH_PX}px;
+  height: ${Math.max(0, HEADER_HEIGHT_PX - CONTAINER_BORDER_WIDTH_PX)}px;
+  z-index: ${HEADER_FADE_Z_INDEX};
+  background: linear-gradient(to right, transparent, ${Color.BackgroundSecondary});
+  border-top-right-radius: ${BorderRadius.Md};
+`;
+const BodyFadeOverlay = styled(RightFadeOverlay).attrs({ "data-scroll-affordance": "body-fade" })`
+  top: ${({ $hideHeader }) => $hideHeader ? `${CONTAINER_BORDER_WIDTH_PX}px` : `${CONTAINER_BORDER_WIDTH_PX + HEADER_HEIGHT_PX}px`};
+  bottom: ${({ $scrollbarHeight }) => CONTAINER_BORDER_WIDTH_PX + $scrollbarHeight}px;
+  z-index: ${BODY_FADE_Z_INDEX};
+  background: linear-gradient(to right, transparent, ${Color.BackgroundPrimary});
+  border-bottom-right-radius: ${BorderRadius.Md};
+  ${({ $hideHeader }) => $hideHeader && css`
+      border-top-right-radius: ${BorderRadius.Md};
+    `}
+`;
+const stickyContentColumn = (isReorderable, stickyHeader) => css`
   && thead th:first-child,
   && tbody td:first-child {
     position: sticky;
     left: 0;
-    z-index: 2;
+    z-index: ${STICKY_COLUMN_Z_INDEX};
   }
 
   && tbody td:first-child {
@@ -1134,13 +1160,26 @@ const stickyContentColumn = (isReorderable) => css`
     && tbody td:nth-child(2) {
       position: sticky;
       left: ${DRAG_HANDLE_CELL_WIDTH}px;
-      z-index: 2;
+      z-index: ${STICKY_COLUMN_Z_INDEX};
     }
 
     && tbody td:nth-child(2) {
       background-color: inherit;
     }
   `}
+
+  ${stickyHeader && css`
+      && thead th {
+        position: sticky;
+        top: 0;
+        z-index: ${STICKY_HEADER_Z_INDEX};
+        background-color: ${Color.BackgroundSecondary};
+      }
+
+      ${isReorderable ? `&& thead th:nth-child(-n+2)` : `&& thead th:first-child`} {
+        z-index: ${STICKY_CORNER_Z_INDEX};
+      }
+    `}
 `;
 const StyledTable = styled(Table)`
   caret-color: ${Color.BorderFocus};
@@ -1149,10 +1188,19 @@ const StyledTable = styled(Table)`
     background: ${Color.BackgroundLabelPurple};
   }
 
-  ${({ $fixedLayout, $isReorderable }) => $fixedLayout ? css`
+  ${({ $fixedLayout, $isReorderable, $stickyHeader }) => $fixedLayout ? css`
           /* Legacy: truncate long cell content to container width. */
           table-layout: fixed;
-        ` : stickyContentColumn($isReorderable)}
+
+          ${$stickyHeader && css`
+              && thead th {
+                position: sticky;
+                top: 0;
+                z-index: ${STICKY_HEADER_Z_INDEX};
+                background-color: ${Color.BackgroundSecondary};
+              }
+            `}
+        ` : stickyContentColumn($isReorderable, $stickyHeader)}
 
   /* Lock column widths while inline editing to prevent layout reflow. */
   ${({ $fixedLayout, $lockedWidth }) => !$fixedLayout && $lockedWidth != null && css`
@@ -1200,7 +1248,7 @@ const DragHandleHeaderCell = styled(StyledTableHeaderCell)`
 const PinnedActionsCell = styled(TableCell)`
   position: sticky;
   right: 0;
-  z-index: 4;
+  z-index: ${PINNED_ACTIONS_Z_INDEX};
   background: transparent;
   border-bottom: 1px solid ${Color.BorderHairline};
   padding: 0;
@@ -1209,7 +1257,9 @@ const PinnedActionsCell = styled(TableCell)`
 `;
 const EmptyStateCell = styled(TableCell)`
   ${paragraphMixins.sm};
-  padding: ${Spacing[2]};
+  /* Same vertical padding as TableBoxCell so empty and populated tables share a
+     stable row height. */
+  padding: ${Spacing[1]} ${Spacing[2]};
   color: ${Color.TextSecondary};
   border-bottom: none;
 `;
@@ -1222,14 +1272,14 @@ const EmptyStateButton = styled.button`
   cursor: pointer;
   ${focusOutline}
 `;
-const TableBox = ({ children, emptyText, selectedKey, defaultSelectedKey, columns, onSelectionChange, selectionMode = "none", newRowId, onCreateNewRow: onCreateNewRowProp, disabled = false, reorderConfig, disableHorizontalScroll: disableHorizontalScrollProp = false, hideHeader = false, "aria-label": ariaLabel, ...props }) => {
+const TableBox = ({ children, emptyText, selectedKey, defaultSelectedKey, columns, onSelectionChange, selectionMode = "none", newRowId, onCreateNewRow: onCreateNewRowProp, disabled = false, reorderConfig, disableHorizontalScroll: disableHorizontalScrollProp = false, hideHeader = false, maxHeight, "aria-label": ariaLabel, ...props }) => {
 	const tableRef = useRef(null);
 	const scrollContainerRef = useRef(null);
 	const tableBoxId = useMemo(() => uniqueId("tablebox-"), []);
 	const rowDropdownId = `${tableBoxId}-row-dropdown`;
 	const hasInlineEditableColumn = columns.some((c) => c.inlineEditConfig != null);
 	const disableHorizontalScroll = disableHorizontalScrollProp || hasInlineEditableColumn;
-	const { hasHorizontalOverflow, hasMoreScrollRight } = useScrollOverflow(scrollContainerRef, { enabled: !disableHorizontalScroll });
+	const { hasHorizontalOverflow, hasMoreScrollRight, scrollbarSize } = useScrollOverflow(scrollContainerRef, { enabled: !disableHorizontalScroll });
 	const { lockedColWidths, setColumnWidthsLocked } = useColumnWidthLock(tableRef, { enabled: !disableHorizontalScroll });
 	const [internalSelectedKey, setInternalSelectedKey] = useState(defaultSelectedKey ?? null);
 	const [shouldCreateNewRowAfterCommit, setShouldCreateNewRowAfterCommit] = useState(false);
@@ -1271,6 +1321,7 @@ const TableBox = ({ children, emptyText, selectedKey, defaultSelectedKey, column
 	});
 	const isReorderable = !disabled && reorderConfig != null;
 	const hasActionsColumn = !disableHorizontalScroll;
+	const stickyHeader = maxHeight != null && !hideHeader;
 	const contextValue = {
 		disabled,
 		newRowId,
@@ -1285,6 +1336,7 @@ const TableBox = ({ children, emptyText, selectedKey, defaultSelectedKey, column
 		draggedDirection,
 		hasActionsColumn,
 		hasHorizontalOverflow,
+		clipsOverflow: hasHorizontalOverflow || maxHeight != null,
 		setColumnWidthsLocked,
 		scheduleCreateNewRowAfterCommit: onCreateNewRowProp ? scheduleCreateNewRowAfterCommit : void 0
 	};
@@ -1295,6 +1347,7 @@ const TableBox = ({ children, emptyText, selectedKey, defaultSelectedKey, column
 		ref: scrollContainerRef,
 		$fixedLayout: disableHorizontalScroll,
 		$hasHorizontalOverflow: hasHorizontalOverflow,
+		$maxHeight: maxHeight,
 		children: /* @__PURE__ */ jsxs(StyledTable, {
 			ref: tableRef,
 			size: "md",
@@ -1304,6 +1357,7 @@ const TableBox = ({ children, emptyText, selectedKey, defaultSelectedKey, column
 			$hasHorizontalOverflow: hasHorizontalOverflow,
 			$fixedLayout: disableHorizontalScroll,
 			$hideHeader: hideHeader,
+			$stickyHeader: stickyHeader,
 			$lockedWidth: lockedColWidths != null ? lockedColWidths.reduce((sum, w) => sum + w, 0) : void 0,
 			...props,
 			children: [
@@ -1329,10 +1383,17 @@ const TableBox = ({ children, emptyText, selectedKey, defaultSelectedKey, column
 				}) : children })
 			]
 		})
-	}), !disableHorizontalScroll && /* @__PURE__ */ jsx(RightFadeOverlay, {
+	}), !disableHorizontalScroll && /* @__PURE__ */ jsxs(Fragment$1, { children: [!hideHeader && /* @__PURE__ */ jsx(HeaderFadeOverlay, {
+		"aria-hidden": "true",
+		$visible: hasMoreScrollRight,
+		$scrollbarWidth: scrollbarSize.vertical
+	}), /* @__PURE__ */ jsx(BodyFadeOverlay, {
 		"aria-hidden": "true",
-		$visible: hasMoreScrollRight
-	})] });
+		$visible: hasMoreScrollRight,
+		$hideHeader: hideHeader,
+		$scrollbarWidth: scrollbarSize.vertical,
+		$scrollbarHeight: scrollbarSize.horizontal
+	})] })] });
 	return /* @__PURE__ */ jsx(TableBoxContext.Provider, {
 		value: contextValue,
 		children: isReorderable ? /* @__PURE__ */ jsxs(DndContext, {
@@ -1353,4 +1414,4 @@ TableBox.Cell = TableBoxCell;
 //#endregion
 export { TableBoxContext as n, TableBox as t };
 
-//# sourceMappingURL=TableBox-luasMC73.mjs.map
+//# sourceMappingURL=TableBox-BC5l3UMT.mjs.map