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

package/dist/TableControls-B2ZsNlr6.mjs

@@ -0,0 +1,1029 @@
+import { isActive, isFocused, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
+import "./variables/transitions.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 } from "./Text-hEoPeOc9.mjs";
+import { a as Tooltip } from "./Tooltip-CDvOu1UN.mjs";
+import { Z_INDICES } from "./lib/zindex.mjs";
+import { n as Stack, t as HStack } from "./Stack-ckRN7LrP.mjs";
+import { n as Button, t as IconButton } from "./IconButton-DC4rh6ow.mjs";
+import { c as MenuList, s as MenuItem } from "./Menu-BbSyWxFD.mjs";
+import { r as InputGroup } from "./Input-Bl7633Ux.mjs";
+import Input_default from "./components/Input/index.mjs";
+import { s as Popover_default } from "./Popover-D4_aqKlm.mjs";
+import { i as TabBar, n as StyledTab, r as Tab } from "./TabBar-CAv10XAF.mjs";
+import { t as Toggle } from "./Toggle-DOo0cLmI.mjs";
+import { Color, Spacing } from "@persona/design-tokens";
+import styled, { createGlobalStyle, css } from "styled-components";
+import { createContext, createElement, forwardRef, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { CirclePlusIcon, CopyIcon, FilterIcon, MoreIcon, RotateCcwIcon, SaveIcon, SearchIcon, SettingsIcon, TrashIcon } from "@persona/icons";
+import { LockedIcon as LockedIcon$1, SearchIcon as SearchIcon$1 } from "@persona/icons/12px";
+import { useId } from "react-aria";
+import { union } from "lodash/fp.js";
+import { noop } from "lodash";
+import Fuse from "fuse.js";
+import { DragIcon as DragIcon$1 } from "@persona/icons/24px";
+import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
+//#region components/DataTable/FormControlLabel/FormControlLabel.ts
+const FormControlLabel = styled(Label).attrs(() => ({
+	size: "md",
+	weight: "bold"
+}))`
+  margin-bottom: ${Spacing[2]};
+  transition: ${"200ms"};
+  display: inline-block;
+
+  ${({ theme, isDisabled }) => css`
+    color: ${isDisabled ? theme.color.text.disabled : theme.color.text.primary};
+  `}
+`;
+//#endregion
+//#region components/DataTable/SearchInput/SearchInput.tsx
+const SearchBar = styled.div``;
+const StyledInput = styled(Input_default)`
+  ${({ theme, flattenDisplay }) => flattenDisplay && css`
+      border-width: 0px;
+
+      &${isActive}, &${isFocused}, &${isHovered}&${isNotDisabled}, &${isHovered}&${isFocused} {
+        border-color: ${theme.color.border.input};
+        box-shadow: none;
+      }
+    `}
+`;
+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 [innerValue, setInnerValue] = useState(value);
+	const handleChange = useCallback(({ target }) => {
+		setInnerValue(target.value);
+		handleInput(target.value);
+	}, [handleInput, setInnerValue]);
+	useEffect(() => {
+		setInnerValue(value);
+	}, [value]);
+	const inputRef = useRef(null);
+	const handleClear = useCallback(() => {
+		setInnerValue("");
+		handleInput("");
+		handleOnFocus();
+		inputRef.current?.focus();
+	}, [
+		handleInput,
+		handleOnFocus,
+		inputRef,
+		setInnerValue
+	]);
+	const searchBar = /* @__PURE__ */ jsxs(SearchBar, {
+		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
+			})
+		})]
+	});
+	return disabled && disabledTooltip ? /* @__PURE__ */ jsx(Tooltip, {
+		trigger: searchBar,
+		side: "top",
+		children: disabledTooltip
+	}) : searchBar;
+};
+//#endregion
+//#region components/DataTable/TableControls/CompactBar.tsx
+const DataTableCompactBar = styled(HStack)`
+  border-bottom: 1px solid ${({ theme }) => theme.color.border.secondary};
+  padding-bottom: ${Spacing[1]};
+`;
+const CompactSearchInput = styled(SearchInput)`
+  width: ${({ $autoExpand }) => $autoExpand ? "100%" : "240px"};
+  margin-right: ${Spacing[1]};
+`;
+/**
+* Compact variant of the ControlBar.
+* Not intended to be used by itself.
+*
+* Tested using the ControlBar specs.
+*
+* @see ControlBar.tsx
+* @see ControlBar.spec.tsx
+*/
+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$1, { children: [/* @__PURE__ */ jsxs(DataTableCompactBar, {
+		"data-tour-target": dataTourTarget,
+		justify: "space-between",
+		align: "center",
+		children: [title && /* @__PURE__ */ jsx(Paragraph, {
+			size: "md",
+			weight: "bold",
+			color: "primary",
+			children: title
+		}), /* @__PURE__ */ jsxs(HStack, {
+			spacing: Spacing[1],
+			align: "center",
+			justify: "right",
+			style: autoExpandSearch ? { width: "100%" } : { marginLeft: "auto" },
+			children: [/* @__PURE__ */ jsxs(HStack, {
+				spacing: Spacing[1],
+				align: "center",
+				style: { width: "100%" },
+				children: [
+					searchProps && (showSearch ? /* @__PURE__ */ jsx(CompactSearchInput, {
+						title: null,
+						size: "sm",
+						$autoExpand: autoExpandSearch,
+						autoFocus: !autoExpandSearch,
+						onBlur: autoExpandSearch ? void 0 : () => {
+							if (!searchProps.value) setShowSearch(false);
+						},
+						useClearIcon: true,
+						...searchProps
+					}) : /* @__PURE__ */ jsx(Button, {
+						id: "table-controls__compact-search-toggle",
+						variant: "text",
+						width: "icon",
+						size: "sm",
+						"aria-label": "Show search bar",
+						onClick: () => setShowSearch(true),
+						children: /* @__PURE__ */ jsx(SearchIcon, {})
+					})),
+					setShowFilters && /* @__PURE__ */ jsx(Button, {
+						id: "table-controls__view-tab-filters",
+						variant: "text",
+						onClick: () => setShowFilters?.(!showFilters),
+						"aria-label": showFilters ? "Hide filters" : "Show filters",
+						"aria-expanded": showFilters,
+						"aria-controls": filtersId,
+						disabled: isLoading,
+						active: showFilters,
+						width: "icon",
+						size: "sm",
+						children: /* @__PURE__ */ jsx(FilterIcon, {})
+					}),
+					propertiesButton
+				]
+			}), tableActions && Array.isArray(tableActions) ? tableActions.map((action) => /* @__PURE__ */ jsx(Button, {
+				id: `table-controls__compact-action-${action.label.toLowerCase().replace(/\s+/g, "-")}`,
+				variant: "basic",
+				size: "sm",
+				width: "auto",
+				onClick: action.onClick,
+				children: action.label
+			}, action.label)) : tableActions]
+		})]
+	}), showFilters && filterPanel] });
+};
+//#endregion
+//#region components/DataTable/TableControls/utils/positioning.ts
+/**
+* Check if a child rect is contained within a parent rect.
+* @param parent - The parent rect.
+* @param child - The child rect.
+* @returns True if the child rect is contained within the parent rect, false otherwise.
+*/
+const rectContainsRect = (parent, child) => {
+	return child.top >= parent.top && child.bottom <= parent.bottom && child.left >= parent.left && child.right <= parent.right;
+};
+//#endregion
+//#region components/DataTable/TableControls/ControlBar.tsx
+const TAB_ID_PREFIX = "table-controls__view-tab_";
+const OVERFLOW_TAB_ID_PREFIX = "table-controls__view-tab-overflow_";
+function enterProxiesClick(e) {
+	if (e.key === "Enter") e.target.dispatchEvent(new Event("click", { bubbles: true }));
+}
+const AddViewButton = styled(IconButton)`
+  color: ${({ theme }) => theme.color.text.secondary};
+`;
+const LockedTab = styled(Tab)`
+  svg {
+    height: 12px;
+    width: 12px;
+  }
+`;
+const OverflowMenuList = styled(MenuList)`
+  max-height: 300px;
+  overflow: auto;
+`;
+const ExpandedSearchInput = styled(SearchInput)`
+  flex-basis: 440px;
+  flex-grow: 1;
+`;
+const ViewsBar = styled(TabBar)`
+  ${AddViewButton} {
+    /* Shows button when view is in progress of being added */
+    opacity: ${({ $isAddingView }) => $isAddingView ? 1 : 0};
+  }
+
+  &:hover,
+  &:hover:focus,
+  &:focus-within {
+    ${AddViewButton} {
+      opacity: 1;
+    }
+  }
+`;
+const TabOverflowContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${Spacing[2]};
+  position: absolute;
+  height: 32px;
+`;
+const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditViews, handleNameChange, onDuplicateView, onDeleteView, onSelectView, onResetCurrentView, onSaveView, isViewDirty, showTabContextMenu, setShowTabContextMenu, className, ...rest }) => {
+	const inputRef = useRef(null);
+	const tab = /* @__PURE__ */ jsx(StyledTab, {
+		id: `${tabIdPrefix}${view.id}`,
+		selected,
+		"aria-selected": selected,
+		role: "tab",
+		onClick: !selected ? () => onSelectView?.(view.id) : void 0,
+		suffixIcon: selected && canEditViews ? /* @__PURE__ */ jsx(MoreIcon, {}) : void 0,
+		className,
+		...rest,
+		children: view.name
+	});
+	if (canEditViews && selected) return /* @__PURE__ */ jsx(Popover_default, {
+		trigger: tab,
+		open: showTabContextMenu,
+		onOpenChange: (open) => {
+			if (selected) setShowTabContextMenu(open);
+			if (!open && inputRef.current) handleNameChange?.(view, inputRef.current.value);
+		},
+		contentProps: {
+			align: "start",
+			padding: Spacing[2]
+		},
+		children: /* @__PURE__ */ jsxs(Stack, {
+			spacing: Spacing[3],
+			children: [/* @__PURE__ */ jsx(Input_default, {
+				defaultValue: view.name,
+				onBlur: (e) => handleNameChange?.(view, e.currentTarget.value),
+				onKeyDown: (e) => {
+					if (e.key === "Enter") handleNameChange?.(view, e.currentTarget.value);
+				},
+				disabled: !handleNameChange,
+				ref: inputRef
+			}), /* @__PURE__ */ jsxs(MenuList, {
+				padding: Spacing[0],
+				children: [
+					onDuplicateView && /* @__PURE__ */ jsx(MenuItem, {
+						id: "table-controls__view__menu-duplicate",
+						prefixIcon: /* @__PURE__ */ jsx(CopyIcon, {}),
+						onClick: async () => {
+							const newTableView = await onDuplicateView(view.id);
+							if (newTableView) {
+								const { id } = newTableView;
+								if (view.id !== id) {
+									onSelectView?.(id);
+									setShowTabContextMenu(true);
+								}
+							}
+						},
+						onKeyDown: enterProxiesClick,
+						children: "Duplicate"
+					}),
+					canEditViews && onResetCurrentView && /* @__PURE__ */ jsx(MenuItem, {
+						id: "table-controls__view__menu-reset",
+						prefixIcon: /* @__PURE__ */ jsx(RotateCcwIcon, {}),
+						onClick: onResetCurrentView,
+						onKeyDown: enterProxiesClick,
+						children: "Reset"
+					}),
+					canEditViews && onSaveView && /* @__PURE__ */ jsx(MenuItem, {
+						id: "table-controls__view__menu-save",
+						prefixIcon: /* @__PURE__ */ jsx(SaveIcon, {}),
+						disabled: !isViewDirty,
+						onClick: () => {
+							onSaveView();
+							setShowTabContextMenu(false);
+						},
+						onKeyDown: enterProxiesClick,
+						children: "Save"
+					}),
+					onDeleteView && /* @__PURE__ */ jsx(MenuItem, {
+						id: "table-controls__view__menu-delete",
+						prefixIcon: /* @__PURE__ */ jsx(TrashIcon, {}),
+						onClick: async () => {
+							await onDeleteView(view.id);
+							setShowTabContextMenu(false);
+						},
+						onKeyDown: enterProxiesClick,
+						children: "Delete"
+					})
+				]
+			})]
+		})
+	});
+	return tab;
+};
+/**
+* A tab that is locked and does not support editing or actions.
+*/
+const LockedViewTab = ({ id, selected, onClick, children, ...props }) => {
+	return /* @__PURE__ */ jsx(LockedTab, {
+		id,
+		selected,
+		onClick: selected ? void 0 : onClick,
+		suffixIcon: /* @__PURE__ */ jsx(LockedIcon$1, {}),
+		...props,
+		children
+	});
+};
+const OverflowSavedViewTab = styled(SavedViewTab)`
+  margin-left: ${Spacing[2]};
+`;
+const TabOverflow = forwardRef(function TabOverflow({ hiddenViews, currentView: currentViewId, handleAddView, onSelectView, canEditViews, lastVisibleViewElement, ...rest }, ref) {
+	const [filter, setFilter] = useState("");
+	const [openPopover, setOpenPopover] = useState(false);
+	const currentView = useMemo(() => {
+		return hiddenViews.find((view) => view.id === currentViewId);
+	}, [currentViewId, hiddenViews]);
+	const filteredViews = useMemo(() => hiddenViews.filter((view) => view.name.toLowerCase().includes(filter.toLowerCase()) && view.id !== currentView?.id), [
+		hiddenViews,
+		filter,
+		currentView
+	]);
+	return /* @__PURE__ */ jsxs(TabOverflowContainer, {
+		ref,
+		style: useMemo(() => {
+			if (!lastVisibleViewElement) return;
+			return { left: lastVisibleViewElement.offsetLeft + lastVisibleViewElement.offsetWidth + 8 };
+		}, [lastVisibleViewElement]),
+		children: [
+			currentView && /* @__PURE__ */ jsx(OverflowSavedViewTab, {
+				view: currentView,
+				canEditViews,
+				selected: true,
+				tabIdPrefix: OVERFLOW_TAB_ID_PREFIX,
+				...rest
+			}),
+			hiddenViews.length === 1 && currentView && hiddenViews[0].id !== currentView.id ? null : /* @__PURE__ */ jsxs(Popover_default, {
+				trigger: /* @__PURE__ */ jsxs(Button, {
+					variant: "basic",
+					size: "sm",
+					width: "auto",
+					children: [currentView ? hiddenViews.length - 1 : hiddenViews.length, " more…"]
+				}),
+				contentProps: {
+					align: "start",
+					padding: Spacing[2]
+				},
+				open: openPopover,
+				onOpenChange: (open) => {
+					if (!open) setFilter("");
+					setOpenPopover(open);
+				},
+				children: [/* @__PURE__ */ jsx(Input_default, {
+					value: filter,
+					onChange: (e) => setFilter(e.target.value),
+					placeholder: "Search for a view..."
+				}), /* @__PURE__ */ jsx(OverflowMenuList, {
+					padding: Spacing[0],
+					children: filteredViews.map((view) => {
+						return /* @__PURE__ */ jsx(MenuItem, {
+							id: `${OVERFLOW_TAB_ID_PREFIX}${view.id}`,
+							onClick: () => {
+								onSelectView?.(view.id);
+								setOpenPopover(false);
+							},
+							onKeyDown: enterProxiesClick,
+							children: view.name
+						}, view.id);
+					})
+				})]
+			}),
+			canEditViews && handleAddView && /* @__PURE__ */ jsx(AddViewButton, {
+				id: `${OVERFLOW_TAB_ID_PREFIX}overflow-new`,
+				onClick: handleAddView,
+				size: "md",
+				"aria-label": "Add new view",
+				children: /* @__PURE__ */ jsx(CirclePlusIcon, {})
+			})
+		]
+	});
+});
+/**
+* Force the add button to be visible when the product tour is active
+*/
+const ProductTourStyles = createGlobalStyle`
+  body:has(#react-joyride-portal) {
+    [data-tour-target='saved-views-add-button'] {
+      opacity: 1;
+    }
+  }
+`;
+const ControlBar = ({ presetViews, currentView, onSelectView, views, onAddView, onDuplicateView, onDeleteView, onViewNameChange, onSaveView, isViewDirty, canEditViews, showFilters, setShowFilters, searchProps, filtersId, propertiesButton, tableActions, isLoading, showViews, selectedRows = [], bulkActions, onResetCurrentView, onClearSelection, title, "data-tour-target": dataTourTarget, compact, onError, filterPanel }) => {
+	const tabListRef = useRef(null);
+	const tabOverflowRef = useRef(null);
+	const [hiddenViews, setHiddenViews] = useState([]);
+	const [showTabContextMenu, setShowTabContextMenu] = useState(false);
+	const [isAddingView, setIsAddingView] = useState(false);
+	const [lastVisibleViewElement, setLastVisibleViewElement] = useState(null);
+	const [tabOverflowWidth, setTabOverflowWidth] = useState(null);
+	const onResize = useCallback(() => {
+		if (!tabListRef.current) return;
+		const containerRect = tabListRef.current.getBoundingClientRect();
+		const tabListContainer = tabListRef.current;
+		const tabElements = Array.from(tabListContainer.querySelectorAll("[data-tab-view]"));
+		if (tabElements.length === 0 || rectContainsRect(containerRect, tabElements[tabElements.length - 1].getBoundingClientRect())) {
+			setHiddenViews([]);
+			return;
+		}
+		const firstHiddenIndex = tabElements.findIndex((el) => !rectContainsRect(containerRect, el.getBoundingClientRect()));
+		if (firstHiddenIndex === -1) setLastVisibleViewElement(null);
+		else {
+			const lastVisibleViewElement = tabElements[firstHiddenIndex - 1];
+			if (lastVisibleViewElement) setLastVisibleViewElement(lastVisibleViewElement);
+		}
+		setHiddenViews((firstHiddenIndex === -1 ? [] : views?.slice(firstHiddenIndex)) || []);
+		const tabOverflowWidth = tabOverflowRef.current?.getBoundingClientRect().width;
+		if (tabOverflowWidth) setTabOverflowWidth(tabOverflowWidth);
+	}, [setHiddenViews, views]);
+	useLayoutEffect(() => {
+		if (!showViews || !tabListRef.current) return;
+		const resizeObserver = new ResizeObserver(() => {
+			onResize();
+		});
+		resizeObserver.observe(tabListRef.current);
+		return () => {
+			resizeObserver.disconnect();
+		};
+	}, [onResize, showViews]);
+	useLayoutEffect(() => {
+		if (showViews) onResize();
+	}, [
+		onResize,
+		showViews,
+		views
+	]);
+	const currentViewHidden = useMemo(() => {
+		if (currentView) return !!hiddenViews.find((view) => view.id === currentView);
+		return false;
+	}, [currentView, hiddenViews]);
+	const handleAddView = async () => {
+		try {
+			setIsAddingView(true);
+			if (onAddView) {
+				const view = await onAddView();
+				if (!view || !view.id) return;
+				if (currentView !== view.id) onSelectView?.(view.id);
+				setShowTabContextMenu(true);
+			}
+		} catch {
+			onError?.(/* @__PURE__ */ new Error("Error adding view"));
+		} finally {
+			setIsAddingView(false);
+		}
+	};
+	const handleNameChange = (view, newName) => {
+		if (canEditViews && view.name !== newName) onViewNameChange?.(view.id, newName);
+	};
+	if (compact) return /* @__PURE__ */ jsx(CompactBar, {
+		"data-tour-target": dataTourTarget,
+		title,
+		searchProps,
+		showFilters,
+		setShowFilters,
+		filtersId,
+		isLoading,
+		propertiesButton,
+		tableActions,
+		filterPanel
+	});
+	const bulkActionButtons = bulkActions?.map((action, index) => {
+		const key = "label" in action ? action.label : `action-${index}`;
+		const isDisabled = selectedRows.length === 0 || action.disabled === true;
+		const selectedCount = selectedRows.length;
+		const clearSelection = () => {
+			onClearSelection?.();
+		};
+		if ("icon" in action && "aria-label" in action) return /* @__PURE__ */ jsx(IconButton, {
+			size: "sm",
+			"aria-label": action["aria-label"],
+			onClick: async () => {
+				await action.onClick(selectedRows, clearSelection);
+			},
+			disabled: isDisabled,
+			children: action.icon
+		}, key);
+		const displayLabel = "label" in action && selectedCount > 0 ? `${action.label} (${selectedCount})` : "label" in action ? action.label : "";
+		return /* @__PURE__ */ jsx(Button, {
+			id: `table-controls__view-tab-bulk-action-${index}`,
+			variant: "basic",
+			size: "sm",
+			width: "auto",
+			onClick: async () => {
+				await action.onClick(selectedRows, clearSelection);
+			},
+			disabled: isDisabled,
+			children: displayLabel
+		}, key);
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(ProductTourStyles, {}),
+		(title || showViews || canEditViews && onSaveView || tableActions || bulkActions) && /* @__PURE__ */ jsx(ViewsBar, {
+			ref: tabListRef,
+			title,
+			maxTabChars: 25,
+			$isAddingView: isAddingView,
+			"data-tour-target": dataTourTarget,
+			actions: /* @__PURE__ */ jsxs(HStack, {
+				spacing: Spacing[3],
+				align: "center",
+				style: tabOverflowWidth ? { paddingLeft: `${tabOverflowWidth + 16}px` } : void 0,
+				children: [
+					canEditViews && onSaveView && /* @__PURE__ */ jsx(Button, {
+						id: "table-controls__view-tab-save",
+						onClick: onSaveView,
+						"aria-label": "Save current view",
+						disabled: !isViewDirty || isLoading,
+						size: "sm",
+						variant: "basic",
+						width: "auto",
+						"data-tour-target": "saved-views-save-button",
+						children: "Save view"
+					}),
+					bulkActionButtons,
+					tableActions
+				]
+			}),
+			children: showViews && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx(LockedViewTab, {
+					id: `${TAB_ID_PREFIX}default`,
+					selected: !currentView,
+					onClick: () => onSelectView?.(null),
+					"data-tour-target": "saved-views-default-view",
+					children: "Default view"
+				}),
+				presetViews?.map((view) => {
+					const selected = view.id === currentView;
+					return /* @__PURE__ */ jsx(LockedViewTab, {
+						id: `${TAB_ID_PREFIX}preset-${view.id}`,
+						selected,
+						onClick: () => onSelectView?.(view.id),
+						children: view.name
+					}, view.id);
+				}),
+				views?.map((view) => {
+					return /* @__PURE__ */ jsx(SavedViewTab, {
+						view,
+						canEditViews: canEditViews ?? false,
+						handleNameChange,
+						onDuplicateView,
+						onDeleteView,
+						onSelectView,
+						onResetCurrentView,
+						onSaveView,
+						isViewDirty: isViewDirty ?? false,
+						selected: view.id === currentView,
+						showTabContextMenu: showTabContextMenu && !currentViewHidden,
+						setShowTabContextMenu,
+						"data-tab-view": true
+					}, view.id);
+				}),
+				canEditViews && onAddView && /* @__PURE__ */ jsx(AddViewButton, {
+					id: "table-controls__view-tab-new",
+					size: "md",
+					onClick: handleAddView,
+					"aria-label": "Add new view",
+					"data-tour-target": "saved-views-add-button",
+					children: /* @__PURE__ */ jsx(CirclePlusIcon, {})
+				}),
+				hiddenViews.length > 0 && /* @__PURE__ */ jsx(TabOverflow, {
+					ref: tabOverflowRef,
+					hiddenViews,
+					currentView,
+					onSelectView,
+					canEditViews: canEditViews ?? false,
+					handleAddView: onAddView ? handleAddView : null,
+					handleNameChange,
+					onDuplicateView,
+					onDeleteView,
+					onResetCurrentView,
+					onSaveView,
+					isViewDirty: isViewDirty ?? false,
+					showTabContextMenu: showTabContextMenu && currentViewHidden,
+					setShowTabContextMenu,
+					lastVisibleViewElement
+				})
+			] })
+		}),
+		/* @__PURE__ */ jsxs(HStack, {
+			align: "center",
+			spacing: Spacing[2],
+			justify: "right",
+			children: [
+				searchProps && /* @__PURE__ */ jsx(ExpandedSearchInput, {
+					title: null,
+					useClearIcon: true,
+					...searchProps,
+					size: "md"
+				}),
+				setShowFilters && /* @__PURE__ */ jsx(Button, {
+					id: "table-controls__view-tab-filters",
+					variant: "basic",
+					onClick: () => setShowFilters?.(!showFilters),
+					"aria-label": showFilters ? "Hide filters" : "Show filters",
+					"aria-expanded": showFilters,
+					"aria-controls": filtersId,
+					disabled: isLoading,
+					active: showFilters,
+					width: "icon",
+					size: "md",
+					"data-tour-target": "table-filters-toggle-button",
+					children: /* @__PURE__ */ jsx(FilterIcon, {})
+				}),
+				propertiesButton
+			]
+		}),
+		showFilters && filterPanel
+	] });
+};
+//#endregion
+//#region components/DataTable/TableControls/TableControls.tsx
+const TableControls = ({ filterPanel, searchProps, defaultShowFilters, showFilters: controlledShowFilters, setShowFilters: controlledSetShowFilters, className, tableActions, propertiesButton, isLoading, showViews, canEditViews, onSelectView, views, currentView, onAddView, onViewNameChange, onDuplicateView, onDeleteView, onSaveView, isViewDirty, selectedRows, bulkActions, onClearSelection, title, presetViews, compact, columnConfigurationProps, showFiltersAlways = false, onError, "data-tour-target": dataTourTarget }) => {
+	const filtersId = useId();
+	const [internalShowFilters, internalSetShowFilters] = useState(defaultShowFilters ?? false);
+	const showFilters = controlledShowFilters != null ? controlledShowFilters : internalShowFilters;
+	const setShowFilters = controlledSetShowFilters != null ? controlledSetShowFilters : internalSetShowFilters;
+	const enhancedPropertiesButton = useMemo(() => {
+		if (!columnConfigurationProps && !propertiesButton) return;
+		const elements = [];
+		if (propertiesButton) elements.push(propertiesButton);
+		if (columnConfigurationProps) elements.push(/* @__PURE__ */ jsx(TableViewConfigurationDropdown, {
+			disabled: false,
+			...columnConfigurationProps
+		}, "column-config"));
+		if (elements.length === 1) return elements[0];
+		return /* @__PURE__ */ jsx(StyledEnhancedPropertiesButton, { children: elements });
+	}, [columnConfigurationProps, propertiesButton]);
+	return /* @__PURE__ */ jsx(Container, {
+		className,
+		children: /* @__PURE__ */ jsx(ControlBar, {
+			showViews: compact ? false : showViews,
+			views: compact ? void 0 : views,
+			onSelectView: compact ? void 0 : onSelectView,
+			currentView: compact ? void 0 : currentView,
+			onAddView: compact ? void 0 : onAddView,
+			onDeleteView: compact ? void 0 : onDeleteView,
+			onDuplicateView: compact ? void 0 : onDuplicateView,
+			onViewNameChange: compact ? void 0 : onViewNameChange,
+			onSaveView: compact ? void 0 : onSaveView,
+			isViewDirty,
+			canEditViews: compact ? false : canEditViews,
+			showFilters,
+			setShowFilters: filterPanel != null && !showFiltersAlways ? setShowFilters : void 0,
+			filtersId,
+			searchProps,
+			propertiesButton: enhancedPropertiesButton,
+			tableActions,
+			isLoading,
+			selectedRows,
+			bulkActions,
+			onClearSelection,
+			title,
+			"data-tour-target": dataTourTarget,
+			presetViews: compact ? void 0 : presetViews,
+			compact,
+			onError,
+			filterPanel
+		})
+	});
+};
+const Container = styled(Stack)`
+  margin-bottom: ${Spacing[2]};
+`;
+const StyledEnhancedPropertiesButton = styled.div`
+  display: flex;
+  gap: ${Spacing[1]};
+`;
+//#endregion
+//#region components/DataTable/dnd/StyledIconDrag.tsx
+const StyledIconDrag = styled(DragIcon$1)`
+  display: ${({ $shouldHide = false }) => $shouldHide ? "none" : "inline"};
+
+  ${({ $horizontal = false }) => $horizontal ? css`
+          transform: rotate(90deg);
+        ` : ""}
+
+  ${({ $active = false, $hover = false }) => $active ? css`
+          cursor: grabbing;
+          opacity: 1;
+        ` : $hover ? css`
+            cursor: grab;
+            opacity: 1;
+          ` : css`
+            cursor: normal;
+            opacity: 0.4;
+          `}
+
+  transition: opacity 0.2s ease-in-out;
+
+  path {
+    stroke: ${Color.CoreSlate1000};
+    stroke-width: 1px;
+  }
+`;
+//#endregion
+//#region components/DataTable/dnd/utils.ts
+/**
+* reorder returns a reordered version of the inputed list by swapping the element
+* at startIndex with the one at endIndex
+*/
+function reorder(list, startIndex, endIndex) {
+	const result = Array.from(list);
+	const [removed] = result.splice(startIndex, 1);
+	result.splice(endIndex, 0, removed);
+	return result;
+}
+//#endregion
+//#region components/DataTable/TableControls/TableViewConfigurationDropdown.tsx
+const DndSection = styled("div")`
+  max-height: 400px;
+
+  overflow: scroll;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+`;
+const DndItemWrapper = styled("div")`
+  background: white;
+  width: 100%;
+  border-bottom: 1px solid ${({ theme }) => theme.color.border.secondary};
+  padding: ${Spacing[2]} ${Spacing[2]};
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: left;
+`;
+const SuffixContainer = styled("div")`
+  padding-left: ${Spacing[2]};
+  margin-left: auto;
+  align-self: center;
+`;
+const SearchContainer = styled.div`
+  display: flex;
+`;
+const StyledSearchInput = styled(SearchInput)`
+  width: 100%;
+`;
+const PopoverCard = styled(Card_default)`
+  width: 300px;
+  padding: ${Spacing[4]};
+`;
+const TriggerIconButton = forwardRef(function TriggerIconButton({ disabled, ...elemProps }, ref) {
+	return /* @__PURE__ */ jsx(Button, {
+		disabled,
+		width: "icon",
+		variant: "basic",
+		size: "md",
+		...elemProps,
+		ref,
+		"data-tour-target": "table-properties-button",
+		"aria-label": "Table Properties",
+		children: /* @__PURE__ */ jsx(SettingsIcon, {})
+	});
+});
+const TooltipButtonWrapper = styled("div")`
+  display: inline-block;
+`;
+const TableViewConfigurationDropdown = ({ disabled = false, disabledTooltipMessage = "Your role does not have permission to configure the view.", size = "md", variant = "basic", ...props }) => {
+	return disabled ? /* @__PURE__ */ jsx(Tooltip, {
+		trigger: /* @__PURE__ */ jsx(TooltipButtonWrapper, { children: /* @__PURE__ */ jsx(TriggerIconButton, {
+			disabled: true,
+			size,
+			variant
+		}) }),
+		children: disabledTooltipMessage
+	}) : /* @__PURE__ */ jsxs(Popover_default, { children: [/* @__PURE__ */ jsx(Popover_default.Trigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(TriggerIconButton, {
+			disabled: false,
+			size,
+			variant
+		})
+	}), /* @__PURE__ */ jsx(Popover_default.Content, {
+		style: { zIndex: Z_INDICES.dropdown },
+		sideOffset: 8,
+		side: "bottom",
+		align: "end",
+		children: /* @__PURE__ */ jsx(PopoverCard, {
+			elevated: true,
+			children: /* @__PURE__ */ jsx(TableViewConfiguration, { ...props })
+		})
+	})] });
+};
+const TableViewConfiguration = ({ columnConfiguration, attributeOptions, updateColumnConfiguration, getColumnDisabled }) => {
+	const [searchTerm, setSearchTerm] = useState("");
+	const fuse = useMemo(() => {
+		return new Fuse(attributeOptions, {
+			shouldSort: false,
+			threshold: .4,
+			location: 0,
+			distance: 100,
+			minMatchCharLength: 1,
+			keys: [{
+				name: "label",
+				weight: 1
+			}]
+		});
+	}, [attributeOptions]);
+	const allOptions = useMemo(() => union(attributeOptions, columnConfiguration), [attributeOptions, columnConfiguration]);
+	const filteredSearchOptions = searchTerm === "" ? allOptions : fuse.search(searchTerm).map(({ item }) => item);
+	const hiddenAttributes = useMemo(() => {
+		return filteredSearchOptions.filter((attribute) => {
+			return !columnConfiguration.map((c) => c.key).includes(attribute.key);
+		});
+	}, [columnConfiguration, filteredSearchOptions]);
+	const filteredShownAttributes = useMemo(() => {
+		return columnConfiguration.filter((column) => filteredSearchOptions.map((o) => o.key).includes(column.key));
+	}, [columnConfiguration, filteredSearchOptions]);
+	const handleDragEnd = (result, _provided) => {
+		const { destination, source } = result;
+		if (!destination || destination.droppableId === source.droppableId && destination.index === source.index) return;
+		updateColumnConfiguration(reorder(columnConfiguration, source.index, destination.index));
+	};
+	const generateShownAttributesToggle = (column) => () => {
+		updateColumnConfiguration(columnConfiguration.filter((a) => a.key !== column.key));
+	};
+	const generateHiddenAttributesToggle = (column) => () => {
+		updateColumnConfiguration(columnConfiguration.concat(column));
+	};
+	const shownColumnIds = useMemo(() => {
+		return columnConfiguration.map((c) => c.key);
+	}, [columnConfiguration]);
+	const shownDndItemProps = filteredShownAttributes.map((column, index) => {
+		const isDisabledByDefault = columnConfiguration.length === 1;
+		const isDisabledByCustom = getColumnDisabled?.(column.key, shownColumnIds) ?? false;
+		const shouldDisableDragForColumn = isDisabledByCustom && index === filteredShownAttributes.length - 1;
+		return {
+			column,
+			index,
+			isDisabled: isDisabledByDefault || isDisabledByCustom,
+			isToggled: true,
+			shouldDisableDrag: shouldDisableDragForColumn,
+			handleToggle: generateShownAttributesToggle(column)
+		};
+	});
+	const hiddenDndItemProps = hiddenAttributes.map((column, index) => {
+		return {
+			column,
+			index,
+			isToggled: false,
+			shouldDisableDrag: true,
+			handleToggle: generateHiddenAttributesToggle(column)
+		};
+	});
+	return /* @__PURE__ */ jsxs("div", { children: [
+		/* @__PURE__ */ jsx(Label, {
+			size: "lg",
+			weight: "bold",
+			children: "Configure columns"
+		}),
+		/* @__PURE__ */ jsx(Spacer_default, { height: 2 }),
+		/* @__PURE__ */ jsx(SearchContainer, { children: /* @__PURE__ */ jsx(StyledSearchInput, {
+			title: null,
+			value: searchTerm,
+			handleInput: setSearchTerm,
+			size: "md",
+			placeholder: "Search by item...",
+			dataTest: "checklist-item-panel-item-table__search"
+		}) }),
+		/* @__PURE__ */ jsx(Spacer_default, { height: 2 }),
+		shownDndItemProps.length > 0 || hiddenDndItemProps.length > 0 ? /* @__PURE__ */ jsxs(DndSection, { children: [
+			shownDndItemProps.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Paragraph, { children: "Shown attributes" }), /* @__PURE__ */ jsx(DragDropContext, {
+				onDragEnd: handleDragEnd,
+				children: /* @__PURE__ */ jsx(Droppable, {
+					droppableId: "cases-view__configure-shown-columns",
+					renderClone: (provided, _snapshot, rubric) => {
+						return /* @__PURE__ */ jsx("div", {
+							...provided.draggableProps,
+							...provided.dragHandleProps,
+							ref: provided.innerRef,
+							children: /* @__PURE__ */ jsx(AttributeDnd, { ...shownDndItemProps[rubric.source.index] })
+						});
+					},
+					children: (provided) => {
+						return /* @__PURE__ */ jsxs("div", {
+							ref: provided.innerRef,
+							...provided.droppableProps,
+							children: [shownDndItemProps.map((props, idx) => {
+								return /* @__PURE__ */ jsx(Draggable, {
+									draggableId: props.column.key,
+									index: idx,
+									isDragDisabled: props.shouldDisableDrag,
+									children: (provided) => {
+										return /* @__PURE__ */ jsx("div", {
+											ref: provided.innerRef,
+											...provided.draggableProps,
+											...provided.dragHandleProps,
+											children: /* @__PURE__ */ jsx(AttributeDnd, { ...props })
+										});
+									}
+								}, `${props.column.key}`);
+							}), provided.placeholder]
+						});
+					}
+				})
+			})] }),
+			/* @__PURE__ */ jsx(Spacer_default, { height: 2 }),
+			hiddenDndItemProps.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Paragraph, { children: "Hidden attributes" }), /* @__PURE__ */ jsx(DragDropContext, {
+				onDragEnd: handleDragEnd,
+				children: /* @__PURE__ */ jsx(Droppable, {
+					droppableId: "cases-view__configure-hidden-columns",
+					renderClone: (provided, _snapshot, rubric) => {
+						return /* @__PURE__ */ jsx("div", {
+							...provided.draggableProps,
+							...provided.dragHandleProps,
+							ref: provided.innerRef,
+							children: /* @__PURE__ */ jsx(AttributeDnd, { ...hiddenDndItemProps[rubric.source.index] })
+						});
+					},
+					children: (provided) => {
+						return /* @__PURE__ */ jsxs("div", {
+							ref: provided.innerRef,
+							...provided.droppableProps,
+							children: [hiddenDndItemProps.map((props, idx) => {
+								return /* @__PURE__ */ jsx(Draggable, {
+									draggableId: props.column.key,
+									index: idx,
+									isDragDisabled: props.shouldDisableDrag,
+									children: (provided) => {
+										return /* @__PURE__ */ jsx("div", {
+											ref: provided.innerRef,
+											...provided.draggableProps,
+											...provided.dragHandleProps,
+											children: /* @__PURE__ */ jsx(AttributeDnd, { ...props })
+										});
+									}
+								}, `${props.column.key}`);
+							}), provided.placeholder]
+						});
+					}
+				})
+			})] })
+		] }) : /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Paragraph, { children: "No matching attributes" }) })
+	] });
+};
+const OverflowText = styled("div")`
+  max-width: 160px;
+  flex-wrap: wrap;
+  display: flex;
+`;
+const AttributeDnd = ({ column, index, isDisabled = false, isToggled, shouldDisableDrag, handleToggle }) => {
+	return /* @__PURE__ */ jsxs(DndItemWrapper, { children: [
+		/* @__PURE__ */ jsx(StyledIconDrag, {
+			$active: true,
+			$shouldHide: shouldDisableDrag
+		}),
+		/* @__PURE__ */ jsx(OverflowText, { children: /* @__PURE__ */ jsx(Paragraph, {
+			color: "primary",
+			size: "sm",
+			children: column.label
+		}) }),
+		/* @__PURE__ */ jsx(SuffixContainer, { children: /* @__PURE__ */ jsx(Toggle, {
+			value: isToggled,
+			disabled: isDisabled,
+			onChange: handleToggle,
+			"aria-label": isToggled ? `Hide ${column.label}` : `Show ${column.label}`
+		}) })
+	] }, `${column.key}-${index}`);
+};
+//#endregion
+//#region components/DataTable/TableControls/TableControlsContext.ts
+const TableControlsContext = createContext({
+	filters: [],
+	activeFilters: [],
+	setActiveFilters: () => {}
+});
+function useTableControls() {
+	return useContext(TableControlsContext);
+}
+function TableControlsProvider({ children, ...value }) {
+	return createElement(TableControlsContext.Provider, { value }, children);
+}
+//#endregion
+export { TableViewConfigurationDropdown as a, DataTableCompactBar as c, TableViewConfiguration as i, TableControlsProvider as n, TableControls as o, useTableControls as r, ControlBar as s, TableControlsContext as t };
+
+//# sourceMappingURL=TableControls-B2ZsNlr6.mjs.map