@persona/design-system 0.1.9 → 0.2.0

package/dist/{TableControls-DVTtNAPo.mjs → TableControls-51NYgFvI.mjs}

@@ -1,31 +1,31 @@
-import { isActive, isFocused, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
-import { focusOutline, focusWithinOutline } from "./mixins/focus.mjs";
-import "./variables/transitions.mjs";
-import { paragraphMixins } from "./mixins/text.mjs";
-import { n as Stack, t as HStack } from "./Stack-Bl54WmhY.mjs";
 import { TruncatedText } from "./lib/TruncatedText.mjs";
-import { t as Card_default } from "./Card-BMCB9eFC.mjs";
-import { t as Spacer_default } from "./Spacer-CJp0lwkL.mjs";
-import { i as Paragraph, r as Label$1 } from "./Text-RcEfNFLx.mjs";
-import { a as Tooltip } from "./Tooltip-BvDbmXak.mjs";
+import { paragraphMixins } from "./mixins/text.mjs";
+import { t as Card_default } from "./Card-CLTkZLKr.mjs";
+import { t as Spacer_default } from "./Spacer-Ln3KChb5.mjs";
+import { i as Paragraph, r as Label$1 } from "./Text-hEoPeOc9.mjs";
+import "./variables/transitions.mjs";
+import { a as Tooltip } from "./Tooltip-B-DDlRMw.mjs";
+import { isActive, isFocused, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
 import { useScrollOverflow } from "./lib/useScrollOverflow.mjs";
 import { Z_INDICES } from "./lib/zindex.mjs";
-import { n as Button, t as IconButton } from "./IconButton-P8w0JDI5.mjs";
-import { c as MenuList, s as MenuItem } from "./Menu-DmeMgN-i.mjs";
-import { n as DropdownMenu_default } from "./DropdownMenu-D25WBCah.mjs";
-import { r as InputGroup } from "./Input-QC6xla6I.mjs";
+import { focusOutline, focusWithinOutline } from "./mixins/focus.mjs";
+import { n as Stack, t as HStack } from "./Stack-ckRN7LrP.mjs";
+import { n as Button, t as IconButton } from "./IconButton-Bi4kdsbV.mjs";
+import { c as MenuList, s as MenuItem } from "./Menu-DDXR9uHy.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-B4f3LNoW.mjs";
+import { r as InputGroup } from "./Input-CSOxMzlt.mjs";
 import Input_default from "./components/Input/index.mjs";
-import { t as Combobox } from "./Combobox-B6JyLog8.mjs";
-import { s as Popover_default } from "./Popover-BkDpDdaO.mjs";
-import { i as TabBar, n as StyledTab, r as Tab } from "./TabBar-Bn8PHHBZ.mjs";
-import { t as Toggle } from "./Toggle-Bie9zCem.mjs";
-import { t as ListBox } from "./ListBox-TrL3Tb7X.mjs";
-import { m as FormField, o as ComboboxField } from "./FormField-DdmgSWq4.mjs";
-import { n as DatePicker } from "./DatePicker-Bw79p-Lx.mjs";
+import { t as Combobox } from "./Combobox-BzqlrMK0.mjs";
+import { s as Popover_default } from "./Popover-5y0p85Sw.mjs";
+import { i as TabBar, n as StyledTab, r as Tab } from "./TabBar-DX1Spi6D.mjs";
+import { t as Toggle } from "./Toggle-D1rEjYoN.mjs";
+import { t as ListBox } from "./ListBox-CSMVAgHm.mjs";
+import { m as FormField, o as ComboboxField } from "./FormField-Bol8gzNt.mjs";
+import { n as DatePicker } from "./DatePicker-CK2D9jvG.mjs";
 import { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
+import { Fragment, createContext, createElement, forwardRef, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import styled, { createGlobalStyle, css } from "styled-components";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1, createContext, createElement, forwardRef, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { CaretDownIcon, CheckIcon, CircleInfoIcon, CirclePlusIcon, CopyIcon, FilterIcon, MoreIcon, PlusIcon, RotateCcwIcon, SaveIcon, SearchIcon, SettingsIcon, TrashIcon, XIcon } from "@persona/icons";
 import { CaretDownIcon as CaretDownIcon$1, CircleInfoIcon as CircleInfoIcon$1, LockedIcon as LockedIcon$1, MoreIcon as MoreIcon$1, PlusIcon as PlusIcon$1, SearchIcon as SearchIcon$1, XIcon as XIcon$1 } from "@persona/icons/12px";
 import { debounce, union, uniqueId } from "lodash/fp.js";
@@ -52,7 +52,26 @@ const FormControlLabel = styled(Label$1).attrs(() => ({
 `;
 //#endregion
 //#region components/DataTable/SearchInput/SearchInput.tsx
-const SearchBar = styled.div``;
+/**
+* Matches the delay Tooltip applies to its own hover handling, which the cursor anchor bypasses by
+* controlling `open`.
+*/
+const TOOLTIP_DELAY_MS = 300;
+const SearchBar = styled.div`
+  position: relative;
+`;
+/**
+* Zero-size anchor that gets moved to the pointer, so the disabled tooltip surfaces next to the
+* cursor rather than in the middle of a search bar that can span the full width of the table.
+*/
+const CursorAnchor = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+`;
 const StyledInput = styled(Input_default)`
   ${({ theme, flattenDisplay }) => flattenDisplay && css`
       border-width: 0px;
@@ -63,7 +82,7 @@ const StyledInput = styled(Input_default)`
       }
     `}
 `;
-const SearchInput = ({ className, title = "Search", handleInput, handleOnFocus = noop, onBlur = noop, id, value, placeholder, dataTest, autoFocus, useClearIcon = false, disabled = false, disabledTooltip, size = "md", leftIcon = size === "sm" ? /* @__PURE__ */ jsx(SearchIcon$1, {}) : /* @__PURE__ */ jsx(SearchIcon, {}), flattenDisplay = false, maxLength }) => {
+const SearchInput = ({ className, title = "Search", handleInput, handleOnFocus = noop, onBlur = noop, id, value, placeholder, dataTest, autoFocus, useClearIcon = false, disabled = false, disabledTooltip, anchorTooltipToCursor = false, size = "md", leftIcon = size === "sm" ? /* @__PURE__ */ jsx(SearchIcon$1, {}) : /* @__PURE__ */ jsx(SearchIcon, {}), flattenDisplay = false, maxLength }) => {
 	const [innerValue, setInnerValue] = useState(value);
 	const handleChange = useCallback(({ target }) => {
 		setInnerValue(target.value);
@@ -84,40 +103,87 @@ const SearchInput = ({ className, title = "Search", handleInput, handleOnFocus =
 		inputRef,
 		setInnerValue
 	]);
+	const canClear = useClearIcon && !!innerValue;
+	const showDisabledTooltip = disabled && !!disabledTooltip;
+	const showCursorAnchoredTooltip = showDisabledTooltip && anchorTooltipToCursor;
+	const searchBarRef = useRef(null);
+	const cursorAnchorRef = useRef(null);
+	const tooltipDelayRef = useRef();
+	const [isTooltipOpen, setIsTooltipOpen] = useState(false);
+	useEffect(() => {
+		if (!showCursorAnchoredTooltip) {
+			clearTimeout(tooltipDelayRef.current);
+			tooltipDelayRef.current = void 0;
+			setIsTooltipOpen(false);
+		}
+		return () => clearTimeout(tooltipDelayRef.current);
+	}, [showCursorAnchoredTooltip]);
+	const handlePointerMove = useCallback((event) => {
+		const searchBarElement = searchBarRef.current;
+		const cursorAnchor = cursorAnchorRef.current;
+		if (!searchBarElement || !cursorAnchor || event.pointerType === "touch") return;
+		const { left, top } = searchBarElement.getBoundingClientRect();
+		const offsetX = event.clientX - left;
+		const offsetY = event.clientY - top;
+		cursorAnchor.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
+		tooltipDelayRef.current ??= setTimeout(() => setIsTooltipOpen(true), TOOLTIP_DELAY_MS);
+	}, []);
+	const handlePointerLeave = useCallback(() => {
+		clearTimeout(tooltipDelayRef.current);
+		tooltipDelayRef.current = void 0;
+		setIsTooltipOpen(false);
+	}, []);
 	const searchBar = /* @__PURE__ */ jsxs(SearchBar, {
+		ref: searchBarRef,
 		className,
 		"data-test": dataTest,
-		children: [title != null && /* @__PURE__ */ jsx(FormControlLabel, {
-			htmlFor: id,
-			children: title
-		}), /* @__PURE__ */ jsx(InputGroup, {
-			leftIcon,
-			onClear: useClearIcon && !!innerValue ? (e) => {
-				e.preventDefault();
-				e.stopPropagation();
-				handleClear();
-			} : void 0,
-			size,
-			children: /* @__PURE__ */ jsx(StyledInput, {
-				id,
-				onChange: handleChange,
-				placeholder,
-				value: innerValue,
-				autoFocus,
-				ref: inputRef,
-				onFocus: handleOnFocus,
-				onBlur,
-				disabled,
-				maxLength,
-				flattenDisplay
+		onPointerMove: showCursorAnchoredTooltip ? handlePointerMove : void 0,
+		onPointerLeave: showCursorAnchoredTooltip ? handlePointerLeave : void 0,
+		children: [
+			title != null && /* @__PURE__ */ jsx(FormControlLabel, {
+				htmlFor: id,
+				children: title
+			}),
+			/* @__PURE__ */ jsx(InputGroup, {
+				leftIcon,
+				onClear: canClear ? (e) => {
+					e.preventDefault();
+					e.stopPropagation();
+					handleClear();
+				} : void 0,
+				size,
+				children: /* @__PURE__ */ jsx(StyledInput, {
+					id,
+					onChange: handleChange,
+					placeholder,
+					value: innerValue,
+					autoFocus,
+					ref: inputRef,
+					onFocus: handleOnFocus,
+					onBlur,
+					disabled,
+					maxLength,
+					flattenDisplay
+				})
+			}),
+			showCursorAnchoredTooltip && /* @__PURE__ */ jsx(Tooltip, {
+				trigger: /* @__PURE__ */ jsx(CursorAnchor, {
+					ref: cursorAnchorRef,
+					"data-test": "search-input__cursor-anchor"
+				}),
+				open: isTooltipOpen,
+				side: "top",
+				updatePositionStrategy: "always",
+				children: disabledTooltip
 			})
-		})]
+		]
 	});
-	return disabled && disabledTooltip ? /* @__PURE__ */ jsx(Tooltip, {
+	if (showDisabledTooltip && !anchorTooltipToCursor) return /* @__PURE__ */ jsx(Tooltip, {
 		trigger: searchBar,
 		side: "top",
 		children: disabledTooltip
-	}) : searchBar;
+	});
+	return searchBar;
 };
 //#endregion
 //#region components/DataTable/TableControls/CompactBar.tsx
@@ -141,7 +207,7 @@ const CompactSearchInput = styled(SearchInput)`
 const CompactBar = ({ title, searchProps, showFilters, setShowFilters, filtersId, isLoading, propertiesButton, tableActions, "data-tour-target": dataTourTarget, filterPanel }) => {
 	const autoExpandSearch = !title;
 	const [showSearch, setShowSearch] = useState(autoExpandSearch);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(DataTableCompactBar, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(DataTableCompactBar, {
 		"data-tour-target": dataTourTarget,
 		justify: "space-between",
 		align: "center",
@@ -551,7 +617,7 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, onAddView,
 			children: displayLabel
 		}, key);
 	});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx(ProductTourStyles, {}),
 		(title || showViews || canEditViews && onSaveView || tableActions || bulkActions) && /* @__PURE__ */ jsx(ViewsBar, {
 			ref: tabListRef,
@@ -579,7 +645,7 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, onAddView,
 					tableActions
 				]
 			}),
-			children: showViews && /* @__PURE__ */ jsxs(Fragment, { children: [
+			children: showViews && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsx(LockedViewTab, {
 					id: `${TAB_ID_PREFIX}default`,
 					selected: !currentView,
@@ -1314,7 +1380,7 @@ function buildFieldPickerOptions(registry, visibleCustomFieldParents, excludeFie
 //#region components/DataTable/TableControls/FiltersV2/AdvancedFilterRulesPopover/RuleEditorFields.tsx
 function RuleEditorFields({ registry, field, groupIndex, ruleIndex, rule, size, operators, operatorConfigurable, onFieldChange, onOperatorChange, onValueChange, renderValueControl }) {
 	const fieldOptions = useMemo(() => buildFieldPickerOptions(registry), [registry]);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx(ComboboxField, {
 			label: "Value",
 			labelProps: { size },
@@ -1356,7 +1422,7 @@ function RuleEditorFields({ registry, field, groupIndex, ruleIndex, rule, size,
 		field && !isValuelessOperator(rule.operator) ? /* @__PURE__ */ jsx(FormField, {
 			label: "Value",
 			labelProps: { size },
-			children: /* @__PURE__ */ jsx(Fragment, { children: renderValueControl(field, rule.operator, rule.value, (next) => onValueChange(groupIndex, ruleIndex, next)) })
+			children: /* @__PURE__ */ jsx(Fragment$1, { children: renderValueControl(field, rule.operator, rule.value, (next) => onValueChange(groupIndex, ruleIndex, next)) })
 		}) : null
 	] });
 }
@@ -1736,7 +1802,7 @@ const AdvancedFilterRulesPopover = ({ registry, compound, onChange, trigger, ope
 					const isEmptyGroup = group.rules.length === 0;
 					const hideGroupMenu = isOnlyGroup && isEmptyGroup;
 					const deleteGroupLabel = isOnlyGroup && !isEmptyGroup ? "Clear all" : "Delete group";
-					return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs(GroupCard, {
+					return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(GroupCard, {
 						"data-test": `advanced-filter-rules__group-${groupIndex}`,
 						role: "group",
 						"aria-label": `Filter group ${groupIndex + 1}`,
@@ -2474,7 +2540,7 @@ const PillShell = forwardRef(function PillShell({ variant, children, bodyAriaLab
 			"aria-haspopup": "dialog",
 			"aria-expanded": ariaExpanded,
 			children
-		}), onDismiss ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DismissibleCaretWrapper, {
+		}), onDismiss ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DismissibleCaretWrapper, {
 			"aria-hidden": "true",
 			$size: resolvedSize,
 			children: /* @__PURE__ */ jsx(CaretIcon, {})
@@ -2723,7 +2789,7 @@ const Footer = styled(HStack).attrs({
 * back through `onChangeOperator` and forwards open/close transitions
 * through Radix's controlled props.
 */
-const FilterPopover = ({ field, operator, onChangeOperator, valueControlSlot, onClose, trigger, open, onOpenChange, size }) => {
+const FilterPopover = ({ field, operator, onChangeOperator, valueControlSlot, onClose, trigger, open, onOpenChange, size, portalContainer }) => {
 	const resolvedSize = useFilterBarSize(size);
 	const valueless = isValuelessOperator(operator);
 	const CaretIcon = resolvedSize === "sm" ? CaretDownIcon$1 : CaretDownIcon;
@@ -2761,12 +2827,15 @@ const FilterPopover = ({ field, operator, onChangeOperator, valueControlSlot, on
 	return /* @__PURE__ */ jsxs(Popover_default, {
 		open,
 		onOpenChange: handleOpenChange,
+		portalProps: portalContainer ? { container: portalContainer } : void 0,
 		children: [/* @__PURE__ */ jsx(Popover_default.Trigger, {
 			asChild: true,
 			children: trigger
 		}), /* @__PURE__ */ jsx(Popover_default.Card, {
 			align: "start",
 			sideOffset: 4,
+			avoidCollisions: portalContainer == null,
+			zIndex: Z_INDICES.dropdown,
 			"aria-label": `Edit filter for ${field.label}`,
 			noPadding: true,
 			children: /* @__PURE__ */ jsxs(PopoverPanel, {
@@ -2788,6 +2857,8 @@ const FilterPopover = ({ field, operator, onChangeOperator, valueControlSlot, on
 							}),
 							align: "start",
 							portal: true,
+							portalProps: portalContainer ? { container: portalContainer } : void 0,
+							zIndex: Z_INDICES.layeredDropdown,
 							children: operatorOptions.map((op) => /* @__PURE__ */ jsx(DropdownMenu_default.Item, {
 								size: resolvedSize,
 								onClick: () => onChangeOperator(op),
@@ -3424,7 +3495,7 @@ function useStableFieldIds(fieldIds) {
 	if (previous == null || fieldIds == null || previous.length !== fieldIds.length || fieldIds.some((id, index) => previous[index] !== id)) stable.current = fieldIds;
 	return stable.current;
 }
-function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = true, singleUseFields = false, size = "md", valueControlResolver }) {
+function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = true, singleUseFields = false, size = "md", valueControlResolver, portalContainer }) {
 	const filterState = useFilterStateV2({
 		registry,
 		initialState,
@@ -3551,7 +3622,7 @@ function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = tr
 					enabled: true,
 					isOpen: rulesPopoverOpen
 				})
-			}) : null, hasPills ? /* @__PURE__ */ jsxs(Fragment, { children: [filterState.advancedRulesEnabled ? /* @__PURE__ */ jsx(Divider, {
+			}) : null, hasPills ? /* @__PURE__ */ jsxs(Fragment$1, { children: [filterState.advancedRulesEnabled ? /* @__PURE__ */ jsx(Divider, {
 				"aria-hidden": "true",
 				$size: size
 			}) : null, /* @__PURE__ */ jsxs(PillsScrollRegion, {
@@ -3589,6 +3660,7 @@ function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = tr
 							onClose: () => setEditingRuleId(null),
 							open: isOpen,
 							onOpenChange: (open) => setEditingRuleId(open ? rule.id : null),
+							portalContainer,
 							trigger: /* @__PURE__ */ jsx(FilterPill, {
 								ref: (node) => {
 									if (node) pillNodesRef.current.set(rule.id, node);
@@ -3856,4 +3928,4 @@ function normalizeFieldSource(raw) {
 //#endregion
 export { DataTableCompactBar as S, useTableControls as _, hasCompleteValue as a, TableControls as b, EMPTY_FILTER_STATE as c, getDefaultOperatorForType as d, getOperatorsForField as f, TableControlsProvider as g, TableControlsContext as h, useFilterStateV2 as i, resolveValueControl as l, isValuelessOperator as m, buildFieldRegistry as n, isFilterStateV2 as o, getOperatorsForType as p, FilterBar_default as r, pruneToRegistry as s, FieldRegistry as t, useFilterBarSize as u, TableViewConfiguration as v, ControlBar as x, TableViewConfigurationDropdown as y };
 
-//# sourceMappingURL=TableControls-DVTtNAPo.mjs.map
+//# sourceMappingURL=TableControls-51NYgFvI.mjs.map