@persona/design-system 0.1.6 → 0.1.8

package/dist/TableControls-B2ZsNlr6.mjs

@@ -1,1029 +0,0 @@
-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