@persona/design-system 0.1.6 → 0.1.8

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

@@ -2,24 +2,24 @@ 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 { findIndexByKey, moveItemByIndex } from "./lib/reorderItems.mjs";
 import { useScrollOverflow } from "./lib/useScrollOverflow.mjs";
 import { Z_INDICES } from "./lib/zindex.mjs";
-import { n as Stack, t as HStack } from "./Stack-ckRN7LrP.mjs";
-import { t as IconButton } from "./IconButton-DC4rh6ow.mjs";
-import { t as FormGroupContext } from "./useFormGroup-z0epBxXn.mjs";
-import { s as MenuItem } from "./Menu-BbSyWxFD.mjs";
-import { n as DropdownMenu_default } from "./DropdownMenu-cN_AnKAT.mjs";
-import { n as CaretButton, t as Combobox } from "./Combobox-I44W5oX0.mjs";
-import { h as Table, m as TableHeaderCell, n as TableBody, p as TableRow, r as TableHead, s as TableCell } from "./Table-CGtyWI6V.mjs";
-import { s as Popover_default } from "./Popover-D4_aqKlm.mjs";
-import { t as Container } from "./FormControl-fK4HA_yF.mjs";
+import { t as IconButton } from "./IconButton-CIWiEsS-.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-DGYexb7s.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 { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
 import styled, { css } from "styled-components";
-import { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { DragIcon } from "@persona/icons";
-import { MoreIcon as MoreIcon$1, XIcon as XIcon$1 } from "@persona/icons/12px";
+import { CircleAlertIcon as CircleAlertIcon$1, MoreIcon as MoreIcon$1, XIcon as XIcon$1 } from "@persona/icons/12px";
 import uniqueId from "lodash/fp/uniqueId.js";
 import { DndContext, DragOverlay, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
 import { SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
@@ -78,7 +78,7 @@ const StyledCombobox = styled(Combobox)`
 `;
 const ChildrenOverlay = styled.div`
   position: absolute;
-  left: ${Spacing[2]};
+  left: ${({ $hasLeadingError }) => $hasLeadingError ? Spacing[1] : Spacing[2]};
   top: 50%;
   transform: translateY(-50%);
   z-index: 1;
@@ -93,18 +93,18 @@ const ComboboxWrapper = styled.div`
   position: relative;
   width: 100%;
 `;
-const InlineCombobox = ({ itemId, value, columnKey, inlineEditConfig, children, rowRef }) => {
+const InlineCombobox = ({ itemId, value, columnKey, inlineEditConfig, children, rowRef, hasLeadingError }) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const context = useContext(TableBoxContext);
-	const onEditingChange = context?.onEditingChange;
+	const setColumnWidthsLocked = context?.setColumnWidthsLocked;
 	const currentColumn = context?.columns?.find((c) => c.key === columnKey);
 	const placeholder = inlineEditConfig?.placeholder || currentColumn?.title || "";
 	const portalContainerRef = (inlineEditConfig?.fullWidthComboboxDropdown || false) && rowRef ? rowRef : void 0;
 	const showOverlay = !isOpen && !!children;
 	const handleOpenChange = useCallback((open) => {
 		setIsOpen(open);
-		onEditingChange?.(open);
-	}, [onEditingChange]);
+		setColumnWidthsLocked?.(open);
+	}, [setColumnWidthsLocked]);
 	return /* @__PURE__ */ jsxs(ComboboxWrapper, {
 		onKeyDownCapture: (event) => {
 			if (isOpen || event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
@@ -116,6 +116,7 @@ const InlineCombobox = ({ itemId, value, columnKey, inlineEditConfig, children,
 			}
 		},
 		children: [showOverlay && /* @__PURE__ */ jsx(ChildrenOverlay, {
+			$hasLeadingError: hasLeadingError,
 			$truncate: inlineEditConfig?.truncateDisplay,
 			children
 		}), /* @__PURE__ */ jsx(StyledCombobox, {
@@ -181,8 +182,8 @@ const InlineEditDisplay = styled.div`
           text-overflow: ellipsis;
         `}
 `;
-const InlineInput = ({ itemId, value, columnKey, inlineEditConfig, children }) => {
-	const { columns, newRowId, onEditingChange, scheduleCreateNewRowAfterCommit } = useContext(TableBoxContext) ?? {};
+const InlineInput = ({ itemId, value, columnKey, inlineEditConfig, onEditingEnd, children }) => {
+	const { columns, newRowId, setColumnWidthsLocked, scheduleCreateNewRowAfterCommit } = useContext(TableBoxContext) ?? {};
 	const rowContext = useContext(TableBoxRowContext);
 	const [isInlineEditing, setIsInlineEditing] = useState(itemId === newRowId && columnKey === columns?.[0]?.key);
 	const [editValue, setEditValue] = useState(value);
@@ -216,13 +217,18 @@ const InlineInput = ({ itemId, value, columnKey, inlineEditConfig, children }) =
 		const column = columns?.find((c) => c.key === columnKey);
 		return column?.inlineEditConfig?.placeholder || column?.title || "";
 	}, [columns, columnKey]);
+	const notifyEditingEnd = () => {
+		onEditingEnd?.();
+		rowContext?.onEditingEnd();
+		setColumnWidthsLocked?.(false);
+	};
 	const handleInlineEditKeyDown = (e) => {
 		const isFirstCell = columnKey === columns?.[0]?.key;
-		if ((e.key === "Delete" || e.key === "Backspace") && isFirstCell && editValue === "" && rowContext?.isBlank && rowContext.onDelete) {
+		if ((e.key === "Delete" || e.key === "Backspace") && isFirstCell && editValue === "" && rowContext?.areOtherCellsBlank && rowContext.onDelete) {
 			e.preventDefault();
 			e.stopPropagation();
 			cancelledRef.current = true;
-			onEditingChange?.(false);
+			setColumnWidthsLocked?.(false);
 			if (!(focusAdjacentInlineEditor(e.currentTarget, "down") || focusAdjacentInlineEditor(e.currentTarget, "up"))) e.currentTarget.closest("table")?.focus();
 			rowContext.onDelete();
 		} else if (!isMultiline && (e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight")) {
@@ -236,12 +242,14 @@ const InlineInput = ({ itemId, value, columnKey, inlineEditConfig, children }) =
 				e.preventDefault();
 				e.stopPropagation();
 				handleInlineEditConfirm();
+				notifyEditingEnd();
 				setIsInlineEditing(false);
 			}
 		} else {
 			e.preventDefault();
 			e.stopPropagation();
 			handleInlineEditConfirm();
+			notifyEditingEnd();
 			setIsInlineEditing(false);
 			const isLastCell = columnKey === columns?.at(-1)?.key;
 			const currentRow = e.currentTarget.closest("tr");
@@ -261,14 +269,14 @@ const InlineInput = ({ itemId, value, columnKey, inlineEditConfig, children }) =
 	const handleInlineEditCancel = () => {
 		cancelledRef.current = true;
 		setEditValue(value);
+		notifyEditingEnd();
 		setIsInlineEditing(false);
-		onEditingChange?.(false);
 	};
 	const handleInlineEditBlur = () => {
 		if (!cancelledRef.current) handleInlineEditConfirm();
 		cancelledRef.current = false;
 		setIsInlineEditing(false);
-		onEditingChange?.(false);
+		setColumnWidthsLocked?.(false);
 	};
 	return isInlineEditing ? isMultiline ? /* @__PURE__ */ jsx(InlineEditTextarea, {
 		ref: textareaRef,
@@ -293,7 +301,7 @@ const InlineInput = ({ itemId, value, columnKey, inlineEditConfig, children }) =
 		$multiline: isMultiline,
 		onFocus: () => {
 			setEditValue(value);
-			onEditingChange?.(true);
+			setColumnWidthsLocked?.(true);
 			setIsInlineEditing(true);
 		},
 		children: children || value
@@ -387,7 +395,7 @@ const RowActions = ({ actions, onDelete, inDedicatedColumn, inCombobox }) => {
 				"aria-label": "Actions",
 				children: /* @__PURE__ */ jsx(MoreIcon$1, {})
 			}),
-			children: actions?.map(({ label, onClick, ...rest }) => /* @__PURE__ */ jsx(MenuItem, {
+			children: actions?.map(({ label, onClick, ...rest }) => /* @__PURE__ */ jsx(DropdownMenu_default.Item, {
 				...rest,
 				onClick,
 				size: "sm",
@@ -401,6 +409,78 @@ const RowActions = ({ actions, onDelete, inDedicatedColumn, inCombobox }) => {
 	});
 };
 //#endregion
+//#region components/TableBox/useDelayedInlineEditError.ts
+const ERROR_DELAY_MS = 500;
+const isEditableTarget = (target) => target instanceof HTMLElement && (target.matches("input, textarea") || target.isContentEditable);
+const useDelayedInlineEditError = (errorText) => {
+	const errorTimerRef = useRef(null);
+	const lastEditingEndAtRef = useRef(null);
+	const isEditingRef = useRef(false);
+	const errorTextRef = useRef(errorText);
+	errorTextRef.current = errorText;
+	const [isErrorVisible, setIsErrorVisible] = useState(Boolean(errorText));
+	const clearErrorTimer = useCallback(() => {
+		if (errorTimerRef.current != null) {
+			clearTimeout(errorTimerRef.current);
+			errorTimerRef.current = null;
+		}
+	}, []);
+	const scheduleError = useCallback((delay = ERROR_DELAY_MS) => {
+		clearErrorTimer();
+		if (!errorTextRef.current) return;
+		errorTimerRef.current = setTimeout(() => {
+			if (errorTextRef.current && !isEditingRef.current) setIsErrorVisible(true);
+			errorTimerRef.current = null;
+		}, delay);
+	}, [clearErrorTimer]);
+	useEffect(() => {
+		if (!errorText) {
+			clearErrorTimer();
+			setIsErrorVisible(false);
+			return;
+		}
+		if (isEditingRef.current) {
+			setIsErrorVisible(false);
+			return;
+		}
+		if (lastEditingEndAtRef.current == null) {
+			clearErrorTimer();
+			setIsErrorVisible(true);
+		} else if (!isErrorVisible) {
+			const elapsed = Date.now() - lastEditingEndAtRef.current;
+			scheduleError(Math.max(0, ERROR_DELAY_MS - elapsed));
+		}
+	}, [
+		clearErrorTimer,
+		errorText,
+		isErrorVisible,
+		scheduleError
+	]);
+	useEffect(() => clearErrorTimer, [clearErrorTimer]);
+	const onFocus = useCallback((event) => {
+		if (!isEditableTarget(event.target)) return;
+		isEditingRef.current = true;
+		lastEditingEndAtRef.current = null;
+		clearErrorTimer();
+		setIsErrorVisible(false);
+	}, [clearErrorTimer]);
+	const onEditingEnd = useCallback(() => {
+		if (!isEditingRef.current) return;
+		isEditingRef.current = false;
+		lastEditingEndAtRef.current = Date.now();
+		scheduleError();
+	}, [scheduleError]);
+	return {
+		isErrorVisible,
+		onBlur: useCallback((event) => {
+			if (!isEditableTarget(event.target)) return;
+			onEditingEnd();
+		}, [onEditingEnd]),
+		onEditingEnd,
+		onFocus
+	};
+};
+//#endregion
 //#region components/TableBox/TableBoxCell.tsx
 const CELL_VERTICAL_PADDING = Spacing[1];
 const CELL_HEIGHT = `calc(${Typography.TextSmall.lineHeight} + (${CELL_VERTICAL_PADDING} * 2))`;
@@ -419,9 +499,19 @@ const StyledCellContent = styled.div`
   flex-grow: 1;
   min-width: 0;
 `;
-const TableBoxCell = ({ children, itemId = "", value = "", columnKey, isLastCell = false, actions, onDelete, inlineEditConfigOverride, ...props }) => {
+const CellErrorContainer = styled.span`
+  display: inline-block;
+  line-height: ${Typography.TextSmall.lineHeight};
+  margin-right: ${({ $inset }) => $inset ? Spacing[0] : Spacing[1]};
+  padding-left: ${({ $inset }) => $inset ? Spacing[2] : Spacing[0]};
+  position: relative;
+  /* Optically center the 12px alert glyph against the text's visual bounds. */
+  top: 1px;
+`;
+const TableBoxCell = ({ children, itemId = "", value = "", columnKey, errorText, isLastCell = false, actions, onDelete, inlineEditConfigOverride, rowErrorText, onBlur, onFocus, ...props }) => {
 	const context = useContext(TableBoxContext);
 	const rowContext = useContext(TableBoxRowContext);
+	const { isErrorVisible, onBlur: handleDelayedErrorBlur, onEditingEnd: handleDelayedErrorEditingEnd, onFocus: handleDelayedErrorFocus } = useDelayedInlineEditError(errorText);
 	if (context == null) throw new Error("TableBox context is not set");
 	const columnConfig = context.columns.find((c) => c.key === columnKey)?.inlineEditConfig;
 	let inlineEditConfig = context.disabled || columnConfig == null ? void 0 : inlineEditConfigOverride ? {
@@ -435,31 +525,60 @@ const TableBoxCell = ({ children, itemId = "", value = "", columnKey, isLastCell
 	const handleDelete = () => {
 		if (onDelete && itemId) onDelete(itemId);
 	};
+	const handleFocus = (event) => {
+		handleDelayedErrorFocus(event);
+		onFocus?.(event);
+	};
+	const handleBlur = (event) => {
+		handleDelayedErrorBlur(event);
+		onBlur?.(event);
+	};
+	const visibleErrorText = isErrorVisible && errorText ? errorText : rowErrorText;
 	return /* @__PURE__ */ jsx(StyledCell, {
 		...props,
 		$noPadding: inlineEditConfig?.type === "combobox",
 		tabIndex: -1,
+		onBlur: handleBlur,
+		onFocus: handleFocus,
 		children: /* @__PURE__ */ jsxs(HStack, {
 			align: "center",
 			spacing: Spacing[0],
-			children: [inlineEditConfig ? inlineEditConfig.type === "combobox" ? /* @__PURE__ */ jsx(InlineCombobox, {
-				itemId,
-				value,
-				columnKey,
-				inlineEditConfig,
-				rowRef: rowContext?.rowRef,
-				children: /* @__PURE__ */ jsx(StyledCellContent, { children })
-			}) : /* @__PURE__ */ jsx(InlineInput, {
-				itemId,
-				value,
-				columnKey,
-				inlineEditConfig,
-				children
-			}) : /* @__PURE__ */ jsx(StyledCellContent, { children }), isLastCell && !context.disabled && /* @__PURE__ */ jsx(RowActions, {
-				actions,
-				onDelete: onDelete ? handleDelete : void 0,
-				inCombobox: inlineEditConfig?.type === "combobox"
-			})]
+			children: [
+				visibleErrorText != null && /* @__PURE__ */ jsx(CellErrorContainer, {
+					$inset: inlineEditConfig?.type === "combobox",
+					children: /* @__PURE__ */ jsx(Tooltip, {
+						"aria-label": `Error: ${visibleErrorText}`,
+						iconTrigger: /* @__PURE__ */ jsx(CircleAlertIcon$1, {
+							color: Color.BorderIconDanger,
+							size: "12"
+						}),
+						side: "top",
+						size: "sm",
+						children: visibleErrorText
+					})
+				}),
+				inlineEditConfig ? inlineEditConfig.type === "combobox" ? /* @__PURE__ */ jsx(InlineCombobox, {
+					itemId,
+					value,
+					columnKey,
+					inlineEditConfig,
+					rowRef: rowContext?.rowRef,
+					hasLeadingError: visibleErrorText != null,
+					children: /* @__PURE__ */ jsx(StyledCellContent, { children })
+				}) : /* @__PURE__ */ jsx(InlineInput, {
+					itemId,
+					value,
+					columnKey,
+					inlineEditConfig,
+					onEditingEnd: handleDelayedErrorEditingEnd,
+					children
+				}) : /* @__PURE__ */ jsx(StyledCellContent, { children }),
+				isLastCell && !context.disabled && /* @__PURE__ */ jsx(RowActions, {
+					actions,
+					onDelete: onDelete ? handleDelete : void 0,
+					inCombobox: inlineEditConfig?.type === "combobox"
+				})
+			]
 		})
 	});
 };
@@ -562,6 +681,18 @@ const StyledRow = styled(TableRow)`
       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;
+    }
+  }
 `;
 const DragHandleCell = styled(TableCell)`
   width: 24px;
@@ -663,7 +794,7 @@ const SortableTableBoxRowContent = ({ id, isSelected, isSelectable, onClick, row
 		}) }), children]
 	});
 };
-const TableBoxRow = ({ children, actions, onDelete, id, dropdownFormFields, dropdownContent, dropdownHeadingText, dropdownFooter, ...props }) => {
+const TableBoxRow = ({ children, actions, onDelete, errorText, id, dropdownFormFields, dropdownContent, dropdownHeadingText, dropdownFooter, onBlur, onFocus, ...props }) => {
 	const context = useContext(TableBoxContext);
 	const isSelected = context?.selectedKey === id;
 	const isSelectable = context?.selectionMode === "single";
@@ -673,9 +804,18 @@ const TableBoxRow = ({ children, actions, onDelete, id, dropdownFormFields, drop
 	const hasActionsColumn = context?.hasActionsColumn ?? false;
 	const isDisabled = context?.disabled ?? false;
 	const rowRef = useRef(null);
+	const { isErrorVisible, onBlur: handleDelayedErrorBlur, onEditingEnd: handleDelayedErrorEditingEnd, onFocus: handleDelayedErrorFocus } = useDelayedInlineEditError(errorText);
 	const effectiveActions = isDisabled ? void 0 : actions;
 	const effectiveOnDelete = isDisabled ? void 0 : onDelete;
-	const isBlank = Children.toArray(children).every((child) => isValidElement(child) && child.props.value === "");
+	const areOtherCellsBlank = Children.toArray(children).filter((child) => isValidElement(child)).slice(1).every((cell) => cell.props.value === "");
+	const handleFocus = (event) => {
+		handleDelayedErrorFocus(event);
+		onFocus?.(event);
+	};
+	const handleBlur = (event) => {
+		handleDelayedErrorBlur(event);
+		onBlur?.(event);
+	};
 	const handleClick = () => {
 		if (context?.onRowClick && id && isSelectable) context.onRowClick(id);
 	};
@@ -685,12 +825,14 @@ const TableBoxRow = ({ children, actions, onDelete, id, dropdownFormFields, drop
 	const rowContextValue = useMemo(() => ({
 		rowRef,
 		onDelete: effectiveOnDelete && id != null ? handleDelete : void 0,
-		isBlank
+		onEditingEnd: handleDelayedErrorEditingEnd,
+		areOtherCellsBlank
 	}), [
+		areOtherCellsBlank,
 		effectiveOnDelete,
+		handleDelayedErrorEditingEnd,
 		handleDelete,
-		id,
-		isBlank
+		id
 	]);
 	const lastColumnIsCombobox = context?.columns?.at(-1)?.inlineEditConfig?.type === "combobox";
 	const trailingActionsCell = useMemo(() => hasActionsColumn ? /* @__PURE__ */ jsx(PinnedActionsCell, { children: /* @__PURE__ */ jsx(RowActions, {
@@ -706,16 +848,23 @@ const TableBoxRow = ({ children, actions, onDelete, id, dropdownFormFields, drop
 		lastColumnIsCombobox
 	]);
 	const renderedChildren = useMemo(() => {
-		if (hasActionsColumn) return children;
-		const childrenArray = Array.isArray(children) ? children : [children];
+		if (hasActionsColumn && !isErrorVisible) return children;
+		const childrenArray = Children.toArray(children);
+		const firstChildIndex = isErrorVisible ? childrenArray.findIndex(isValidElement) : -1;
 		const lastChildIndex = childrenArray.length - 1;
 		return childrenArray.map((child, index) => {
-			if (!isValidElement(child) || index !== lastChildIndex) return child;
+			if (!isValidElement(child)) return child;
+			const isFirstCell = index === firstChildIndex;
+			const isLastCell = !hasActionsColumn && index === lastChildIndex;
+			if (!isFirstCell && !isLastCell) return child;
 			return cloneElement(child, {
-				isLastCell: true,
-				actions: effectiveActions,
-				onDelete: effectiveOnDelete,
-				...id != null && { itemId: String(id) }
+				...isFirstCell && { rowErrorText: errorText },
+				...isLastCell && {
+					isLastCell: true,
+					actions: effectiveActions,
+					onDelete: effectiveOnDelete
+				},
+				...isLastCell && id != null && { itemId: String(id) }
 			});
 		});
 	}, [
@@ -723,7 +872,9 @@ const TableBoxRow = ({ children, actions, onDelete, id, dropdownFormFields, drop
 		children,
 		effectiveActions,
 		effectiveOnDelete,
-		id
+		errorText,
+		id,
+		isErrorVisible
 	]);
 	const rowChildrenWithContext = useMemo(() => /* @__PURE__ */ jsxs(TableBoxRowContext.Provider, {
 		value: rowContextValue,
@@ -753,6 +904,8 @@ const TableBoxRow = ({ children, actions, onDelete, id, dropdownFormFields, drop
 		isSelected,
 		isSelectable,
 		onClick: handleClick,
+		onBlur: handleBlur,
+		onFocus: handleFocus,
 		rowRef,
 		draggedDirection,
 		children: rowChildrenWithContext
@@ -761,6 +914,8 @@ const TableBoxRow = ({ children, actions, onDelete, id, dropdownFormFields, drop
 		ref: rowRef,
 		id,
 		onClick: handleClick,
+		onBlur: handleBlur,
+		onFocus: handleFocus,
 		disableHoverBackground: true,
 		"aria-selected": isSelected,
 		$isSelectable: isSelectable,
@@ -842,9 +997,9 @@ const useColumnWidthLock = (tableRef, { enabled = true } = {}) => {
 	const [lockedColWidths, setLockedColWidths] = useState(null);
 	return {
 		lockedColWidths,
-		onEditingChange: useCallback((isEditing) => {
+		setColumnWidthsLocked: useCallback((isLocked) => {
 			if (!enabled) return;
-			if (!isEditing) {
+			if (!isLocked) {
 				setLockedColWidths(null);
 				return;
 			}
@@ -1058,6 +1213,15 @@ const EmptyStateCell = styled(TableCell)`
   color: ${Color.TextSecondary};
   border-bottom: none;
 `;
+const EmptyStateButton = styled.button`
+  ${paragraphMixins.sm};
+  padding: 0;
+  color: inherit;
+  background: none;
+  border: none;
+  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 tableRef = useRef(null);
 	const scrollContainerRef = useRef(null);
@@ -1066,7 +1230,7 @@ const TableBox = ({ children, emptyText, selectedKey, defaultSelectedKey, column
 	const hasInlineEditableColumn = columns.some((c) => c.inlineEditConfig != null);
 	const disableHorizontalScroll = disableHorizontalScrollProp || hasInlineEditableColumn;
 	const { hasHorizontalOverflow, hasMoreScrollRight } = useScrollOverflow(scrollContainerRef, { enabled: !disableHorizontalScroll });
-	const { lockedColWidths, onEditingChange } = useColumnWidthLock(tableRef, { enabled: !disableHorizontalScroll });
+	const { lockedColWidths, setColumnWidthsLocked } = useColumnWidthLock(tableRef, { enabled: !disableHorizontalScroll });
 	const [internalSelectedKey, setInternalSelectedKey] = useState(defaultSelectedKey ?? null);
 	const [shouldCreateNewRowAfterCommit, setShouldCreateNewRowAfterCommit] = useState(false);
 	const currentSelectedKey = selectedKey ?? internalSelectedKey;
@@ -1121,7 +1285,7 @@ const TableBox = ({ children, emptyText, selectedKey, defaultSelectedKey, column
 		draggedDirection,
 		hasActionsColumn,
 		hasHorizontalOverflow,
-		onEditingChange,
+		setColumnWidthsLocked,
 		scheduleCreateNewRowAfterCommit: onCreateNewRowProp ? scheduleCreateNewRowAfterCommit : void 0
 	};
 	const isEmpty = Array.isArray(children) ? children.length === 0 : children == null;
@@ -1156,7 +1320,11 @@ const TableBox = ({ children, emptyText, selectedKey, defaultSelectedKey, column
 					disableHoverBackground: true,
 					children: /* @__PURE__ */ jsx(EmptyStateCell, {
 						colSpan: totalColumnCount,
-						children: emptyText || "No data available."
+						children: onCreateNewRowProp && !disabled ? /* @__PURE__ */ jsx(EmptyStateButton, {
+							type: "button",
+							onClick: onCreateNewRowProp,
+							children: emptyText || "No data available."
+						}) : emptyText || "No data available."
 					})
 				}) : children })
 			]
@@ -1185,4 +1353,4 @@ TableBox.Cell = TableBoxCell;
 //#endregion
 export { TableBoxContext as n, TableBox as t };
 
-//# sourceMappingURL=TableBox-CPCWzwSl.mjs.map
+//# sourceMappingURL=TableBox-luasMC73.mjs.map