@persona/design-system 0.1.6 → 0.1.8

package/dist/{TableBox-D_B9atn2.cjs → TableBox-CiuXCXyv.cjs}

@@ -3,23 +3,23 @@ const require_mixins_focus = require("./mixins/focus.cjs");
 require("./variables/effect.cjs");
 require("./variables/transitions.cjs");
 const require_mixins_text = require("./mixins/text.cjs");
+const require_Stack = require("./Stack-UeifHn3c.cjs");
+const require_Tooltip = require("./Tooltip-olP3rdUO.cjs");
 const require_lib_reorderItems = require("./lib/reorderItems.cjs");
 const require_lib_useScrollOverflow = require("./lib/useScrollOverflow.cjs");
 const require_lib_zindex = require("./lib/zindex.cjs");
-const require_Stack = require("./Stack-BF-9YjA1.cjs");
-const require_IconButton = require("./IconButton-DNy7g5zh.cjs");
-const require_useFormGroup = require("./useFormGroup-DQJdKaL9.cjs");
-const require_Menu = require("./Menu-BLbEcodU.cjs");
-const require_DropdownMenu = require("./DropdownMenu-CeqZAxjs.cjs");
-const require_Combobox = require("./Combobox-R3_NDBi3.cjs");
-const require_Table = require("./Table-B3FJsvXP.cjs");
-const require_Popover = require("./Popover-jHZICnQt.cjs");
-const require_FormControl = require("./FormControl-DjxkL5Ft.cjs");
+const require_IconButton = require("./IconButton-nlgjJQCS.cjs");
+const require_DropdownMenu = require("./DropdownMenu-DnlQqTjs.cjs");
+const require_useFormGroup = require("./useFormGroup-Bmnzgq0S.cjs");
+const require_Table = require("./Table-DxLvJYWK.cjs");
+const require_Combobox = require("./Combobox-COXvmxlM.cjs");
+const require_Popover = require("./Popover-BzgMAhsX.cjs");
+const require_FormControl = require("./FormControl-MkBXuUF6.cjs");
 let _persona_design_tokens = require("@persona/design-tokens");
 let styled_components = require("styled-components");
 styled_components = require_chunk.__toESM(styled_components);
-let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
 let _persona_icons = require("@persona/icons");
 let _persona_icons_12px = require("@persona/icons/12px");
 let lodash_fp_uniqueId_js = require("lodash/fp/uniqueId.js");
@@ -81,7 +81,7 @@ const StyledCombobox = (0, styled_components.default)(require_Combobox.Combobox)
 `;
 const ChildrenOverlay = styled_components.default.div`
   position: absolute;
-  left: ${_persona_design_tokens.Spacing[2]};
+  left: ${({ $hasLeadingError }) => $hasLeadingError ? _persona_design_tokens.Spacing[1] : _persona_design_tokens.Spacing[2]};
   top: 50%;
   transform: translateY(-50%);
   z-index: 1;
@@ -96,18 +96,18 @@ const ComboboxWrapper = styled_components.default.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] = (0, react.useState)(false);
 	const context = (0, react.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 = (0, react.useCallback)((open) => {
 		setIsOpen(open);
-		onEditingChange?.(open);
-	}, [onEditingChange]);
+		setColumnWidthsLocked?.(open);
+	}, [setColumnWidthsLocked]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ComboboxWrapper, {
 		onKeyDownCapture: (event) => {
 			if (isOpen || event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
@@ -119,6 +119,7 @@ const InlineCombobox = ({ itemId, value, columnKey, inlineEditConfig, children,
 			}
 		},
 		children: [showOverlay && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChildrenOverlay, {
+			$hasLeadingError: hasLeadingError,
 			$truncate: inlineEditConfig?.truncateDisplay,
 			children
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCombobox, {
@@ -184,8 +185,8 @@ const InlineEditDisplay = styled_components.default.div`
           text-overflow: ellipsis;
         `}
 `;
-const InlineInput = ({ itemId, value, columnKey, inlineEditConfig, children }) => {
-	const { columns, newRowId, onEditingChange, scheduleCreateNewRowAfterCommit } = (0, react.useContext)(TableBoxContext) ?? {};
+const InlineInput = ({ itemId, value, columnKey, inlineEditConfig, onEditingEnd, children }) => {
+	const { columns, newRowId, setColumnWidthsLocked, scheduleCreateNewRowAfterCommit } = (0, react.useContext)(TableBoxContext) ?? {};
 	const rowContext = (0, react.useContext)(TableBoxRowContext);
 	const [isInlineEditing, setIsInlineEditing] = (0, react.useState)(itemId === newRowId && columnKey === columns?.[0]?.key);
 	const [editValue, setEditValue] = (0, react.useState)(value);
@@ -219,13 +220,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")) {
@@ -239,12 +245,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");
@@ -264,14 +272,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__ */ (0, react_jsx_runtime.jsx)(InlineEditTextarea, {
 		ref: textareaRef,
@@ -296,7 +304,7 @@ const InlineInput = ({ itemId, value, columnKey, inlineEditConfig, children }) =
 		$multiline: isMultiline,
 		onFocus: () => {
 			setEditValue(value);
-			onEditingChange?.(true);
+			setColumnWidthsLocked?.(true);
 			setIsInlineEditing(true);
 		},
 		children: children || value
@@ -390,7 +398,7 @@ const RowActions = ({ actions, onDelete, inDedicatedColumn, inCombobox }) => {
 				"aria-label": "Actions",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons_12px.MoreIcon, {})
 			}),
-			children: actions?.map(({ label, onClick, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Menu.MenuItem, {
+			children: actions?.map(({ label, onClick, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default.Item, {
 				...rest,
 				onClick,
 				size: "sm",
@@ -404,6 +412,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 = (0, react.useRef)(null);
+	const lastEditingEndAtRef = (0, react.useRef)(null);
+	const isEditingRef = (0, react.useRef)(false);
+	const errorTextRef = (0, react.useRef)(errorText);
+	errorTextRef.current = errorText;
+	const [isErrorVisible, setIsErrorVisible] = (0, react.useState)(Boolean(errorText));
+	const clearErrorTimer = (0, react.useCallback)(() => {
+		if (errorTimerRef.current != null) {
+			clearTimeout(errorTimerRef.current);
+			errorTimerRef.current = null;
+		}
+	}, []);
+	const scheduleError = (0, react.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]);
+	(0, react.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
+	]);
+	(0, react.useEffect)(() => clearErrorTimer, [clearErrorTimer]);
+	const onFocus = (0, react.useCallback)((event) => {
+		if (!isEditableTarget(event.target)) return;
+		isEditingRef.current = true;
+		lastEditingEndAtRef.current = null;
+		clearErrorTimer();
+		setIsErrorVisible(false);
+	}, [clearErrorTimer]);
+	const onEditingEnd = (0, react.useCallback)(() => {
+		if (!isEditingRef.current) return;
+		isEditingRef.current = false;
+		lastEditingEndAtRef.current = Date.now();
+		scheduleError();
+	}, [scheduleError]);
+	return {
+		isErrorVisible,
+		onBlur: (0, react.useCallback)((event) => {
+			if (!isEditableTarget(event.target)) return;
+			onEditingEnd();
+		}, [onEditingEnd]),
+		onEditingEnd,
+		onFocus
+	};
+};
+//#endregion
 //#region components/TableBox/TableBoxCell.tsx
 const CELL_VERTICAL_PADDING = _persona_design_tokens.Spacing[1];
 const CELL_HEIGHT = `calc(${_persona_design_tokens.Typography.TextSmall.lineHeight} + (${CELL_VERTICAL_PADDING} * 2))`;
@@ -422,9 +502,19 @@ const StyledCellContent = styled_components.default.div`
   flex-grow: 1;
   min-width: 0;
 `;
-const TableBoxCell = ({ children, itemId = "", value = "", columnKey, isLastCell = false, actions, onDelete, inlineEditConfigOverride, ...props }) => {
+const CellErrorContainer = styled_components.default.span`
+  display: inline-block;
+  line-height: ${_persona_design_tokens.Typography.TextSmall.lineHeight};
+  margin-right: ${({ $inset }) => $inset ? _persona_design_tokens.Spacing[0] : _persona_design_tokens.Spacing[1]};
+  padding-left: ${({ $inset }) => $inset ? _persona_design_tokens.Spacing[2] : _persona_design_tokens.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 = (0, react.useContext)(TableBoxContext);
 	const rowContext = (0, react.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 ? {
@@ -438,31 +528,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__ */ (0, react_jsx_runtime.jsx)(StyledCell, {
 		...props,
 		$noPadding: inlineEditConfig?.type === "combobox",
 		tabIndex: -1,
+		onBlur: handleBlur,
+		onFocus: handleFocus,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.HStack, {
 			align: "center",
 			spacing: _persona_design_tokens.Spacing[0],
-			children: [inlineEditConfig ? inlineEditConfig.type === "combobox" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineCombobox, {
-				itemId,
-				value,
-				columnKey,
-				inlineEditConfig,
-				rowRef: rowContext?.rowRef,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCellContent, { children })
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineInput, {
-				itemId,
-				value,
-				columnKey,
-				inlineEditConfig,
-				children
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCellContent, { children }), isLastCell && !context.disabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RowActions, {
-				actions,
-				onDelete: onDelete ? handleDelete : void 0,
-				inCombobox: inlineEditConfig?.type === "combobox"
-			})]
+			children: [
+				visibleErrorText != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CellErrorContainer, {
+					$inset: inlineEditConfig?.type === "combobox",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
+						"aria-label": `Error: ${visibleErrorText}`,
+						iconTrigger: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons_12px.CircleAlertIcon, {
+							color: _persona_design_tokens.Color.BorderIconDanger,
+							size: "12"
+						}),
+						side: "top",
+						size: "sm",
+						children: visibleErrorText
+					})
+				}),
+				inlineEditConfig ? inlineEditConfig.type === "combobox" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineCombobox, {
+					itemId,
+					value,
+					columnKey,
+					inlineEditConfig,
+					rowRef: rowContext?.rowRef,
+					hasLeadingError: visibleErrorText != null,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCellContent, { children })
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineInput, {
+					itemId,
+					value,
+					columnKey,
+					inlineEditConfig,
+					onEditingEnd: handleDelayedErrorEditingEnd,
+					children
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCellContent, { children }),
+				isLastCell && !context.disabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RowActions, {
+					actions,
+					onDelete: onDelete ? handleDelete : void 0,
+					inCombobox: inlineEditConfig?.type === "combobox"
+				})
+			]
 		})
 	});
 };
@@ -565,6 +684,18 @@ const StyledRow = (0, styled_components.default)(require_Table.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 = (0, styled_components.default)(require_Table.TableCell)`
   width: 24px;
@@ -666,7 +797,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 = (0, react.useContext)(TableBoxContext);
 	const isSelected = context?.selectedKey === id;
 	const isSelectable = context?.selectionMode === "single";
@@ -676,9 +807,18 @@ const TableBoxRow = ({ children, actions, onDelete, id, dropdownFormFields, drop
 	const hasActionsColumn = context?.hasActionsColumn ?? false;
 	const isDisabled = context?.disabled ?? false;
 	const rowRef = (0, react.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 = react.Children.toArray(children).every((child) => (0, react.isValidElement)(child) && child.props.value === "");
+	const areOtherCellsBlank = react.Children.toArray(children).filter((child) => (0, react.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);
 	};
@@ -688,12 +828,14 @@ const TableBoxRow = ({ children, actions, onDelete, id, dropdownFormFields, drop
 	const rowContextValue = (0, react.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 = (0, react.useMemo)(() => hasActionsColumn ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PinnedActionsCell, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RowActions, {
@@ -709,16 +851,23 @@ const TableBoxRow = ({ children, actions, onDelete, id, dropdownFormFields, drop
 		lastColumnIsCombobox
 	]);
 	const renderedChildren = (0, react.useMemo)(() => {
-		if (hasActionsColumn) return children;
-		const childrenArray = Array.isArray(children) ? children : [children];
+		if (hasActionsColumn && !isErrorVisible) return children;
+		const childrenArray = react.Children.toArray(children);
+		const firstChildIndex = isErrorVisible ? childrenArray.findIndex(react.isValidElement) : -1;
 		const lastChildIndex = childrenArray.length - 1;
 		return childrenArray.map((child, index) => {
-			if (!(0, react.isValidElement)(child) || index !== lastChildIndex) return child;
+			if (!(0, react.isValidElement)(child)) return child;
+			const isFirstCell = index === firstChildIndex;
+			const isLastCell = !hasActionsColumn && index === lastChildIndex;
+			if (!isFirstCell && !isLastCell) return child;
 			return (0, react.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) }
 			});
 		});
 	}, [
@@ -726,7 +875,9 @@ const TableBoxRow = ({ children, actions, onDelete, id, dropdownFormFields, drop
 		children,
 		effectiveActions,
 		effectiveOnDelete,
-		id
+		errorText,
+		id,
+		isErrorVisible
 	]);
 	const rowChildrenWithContext = (0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TableBoxRowContext.Provider, {
 		value: rowContextValue,
@@ -756,6 +907,8 @@ const TableBoxRow = ({ children, actions, onDelete, id, dropdownFormFields, drop
 		isSelected,
 		isSelectable,
 		onClick: handleClick,
+		onBlur: handleBlur,
+		onFocus: handleFocus,
 		rowRef,
 		draggedDirection,
 		children: rowChildrenWithContext
@@ -764,6 +917,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,
@@ -845,9 +1000,9 @@ const useColumnWidthLock = (tableRef, { enabled = true } = {}) => {
 	const [lockedColWidths, setLockedColWidths] = (0, react.useState)(null);
 	return {
 		lockedColWidths,
-		onEditingChange: (0, react.useCallback)((isEditing) => {
+		setColumnWidthsLocked: (0, react.useCallback)((isLocked) => {
 			if (!enabled) return;
-			if (!isEditing) {
+			if (!isLocked) {
 				setLockedColWidths(null);
 				return;
 			}
@@ -1061,6 +1216,15 @@ const EmptyStateCell = (0, styled_components.default)(require_Table.TableCell)`
   color: ${_persona_design_tokens.Color.TextSecondary};
   border-bottom: none;
 `;
+const EmptyStateButton = styled_components.default.button`
+  ${require_mixins_text.paragraphMixins.sm};
+  padding: 0;
+  color: inherit;
+  background: none;
+  border: none;
+  cursor: pointer;
+  ${require_mixins_focus.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 = (0, react.useRef)(null);
 	const scrollContainerRef = (0, react.useRef)(null);
@@ -1069,7 +1233,7 @@ const TableBox = ({ children, emptyText, selectedKey, defaultSelectedKey, column
 	const hasInlineEditableColumn = columns.some((c) => c.inlineEditConfig != null);
 	const disableHorizontalScroll = disableHorizontalScrollProp || hasInlineEditableColumn;
 	const { hasHorizontalOverflow, hasMoreScrollRight } = require_lib_useScrollOverflow.useScrollOverflow(scrollContainerRef, { enabled: !disableHorizontalScroll });
-	const { lockedColWidths, onEditingChange } = useColumnWidthLock(tableRef, { enabled: !disableHorizontalScroll });
+	const { lockedColWidths, setColumnWidthsLocked } = useColumnWidthLock(tableRef, { enabled: !disableHorizontalScroll });
 	const [internalSelectedKey, setInternalSelectedKey] = (0, react.useState)(defaultSelectedKey ?? null);
 	const [shouldCreateNewRowAfterCommit, setShouldCreateNewRowAfterCommit] = (0, react.useState)(false);
 	const currentSelectedKey = selectedKey ?? internalSelectedKey;
@@ -1124,7 +1288,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;
@@ -1159,7 +1323,11 @@ const TableBox = ({ children, emptyText, selectedKey, defaultSelectedKey, column
 					disableHoverBackground: true,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmptyStateCell, {
 						colSpan: totalColumnCount,
-						children: emptyText || "No data available."
+						children: onCreateNewRowProp && !disabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmptyStateButton, {
+							type: "button",
+							onClick: onCreateNewRowProp,
+							children: emptyText || "No data available."
+						}) : emptyText || "No data available."
 					})
 				}) : children })
 			]
@@ -1199,4 +1367,4 @@ Object.defineProperty(exports, "TableBoxContext", {
 	}
 });
 
-//# sourceMappingURL=TableBox-D_B9atn2.cjs.map
+//# sourceMappingURL=TableBox-CiuXCXyv.cjs.map