@persona/design-system 0.10.1 → 0.10.3

package/dist/{TableBoxCell-okcOQ5Ec.d.mts → TableBoxCell-v_ag22E0.d.mts}

@@ -1,8 +1,8 @@
-import { o as ComboboxOptionsOrGroups } from "./ComboboxBase-B7ZcqU9p.mjs";
+import { o as ComboboxOptionsOrGroups } from "./ComboboxBase-BMBdtP2Z.mjs";
 import { a as TableCellProps, i as TableCell } from "./TableCell-4u5_BgTC.mjs";
-import { r as TableBoxRowProps } from "./TableBoxRow-DiuAB_rV.mjs";
+import { r as TableBoxRowProps } from "./TableBoxRow-BBTztgTT.mjs";
 import { n as ReorderConfig, t as DragDirection } from "./useTableBoxDragAndDrop-CKPIY98e.mjs";
-import { t as RowAction } from "./TableBoxRowActions-Cm4KJsAD.mjs";
+import { t as RowAction } from "./TableBoxRowActions-B9QSVySz.mjs";
 import * as _$react from "react";
 import { ComponentPropsWithoutRef, PropsWithChildren } from "react";
 import * as _$styled_components0 from "styled-components";
@@ -273,4 +273,4 @@ declare const TableBoxCell: ({
 }: TableBoxCellProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TableBox as a, PinnedActionsCell as i, TableBoxCellProps as n, TableBoxContext as o, InlineEditConfig as r, TableBoxProps as s, TableBoxCell as t };
-//# sourceMappingURL=TableBoxCell-okcOQ5Ec.d.mts.map
+//# sourceMappingURL=TableBoxCell-v_ag22E0.d.mts.map

package/dist/TableBoxCell.d.mts

@@ -1,2 +1,2 @@
-import { n as TableBoxCellProps, t as TableBoxCell } from "./TableBoxCell-okcOQ5Ec.mjs";
+import { n as TableBoxCellProps, t as TableBoxCell } from "./TableBoxCell-v_ag22E0.mjs";
 export { TableBoxCellProps, TableBoxCell as default };

package/dist/{TableBoxField-DR-SJY9z.d.mts → TableBoxField-BTpSGmgW.d.mts}

@@ -1,7 +1,7 @@
-import { l as MenuItemProps } from "./Menu-CrThaUX2.mjs";
-import { o as ImplementsFormField } from "./inputFields-DVLg_2wz.mjs";
-import { r as TableBoxRowProps } from "./TableBoxRow-DiuAB_rV.mjs";
-import { n as TableBoxCellProps, s as TableBoxProps } from "./TableBoxCell-okcOQ5Ec.mjs";
+import { l as MenuItemProps } from "./Menu-5VknNr1T.mjs";
+import { o as ImplementsFormField } from "./inputFields-BZcm1UV5.mjs";
+import { r as TableBoxRowProps } from "./TableBoxRow-BBTztgTT.mjs";
+import { n as TableBoxCellProps, s as TableBoxProps } from "./TableBoxCell-v_ag22E0.mjs";
 import { MouseEvent, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -100,4 +100,4 @@ declare const TableBoxField: {
 };
 //#endregion
 export { TableBoxFieldActionGroup as a, TableBoxFieldActionEntry as i, TableBoxField as n, TableBoxFieldAction as r, TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL as t };
-//# sourceMappingURL=TableBoxField-DR-SJY9z.d.mts.map
+//# sourceMappingURL=TableBoxField-BTpSGmgW.d.mts.map

package/dist/TableBoxField.d.mts

@@ -1,2 +1,2 @@
-import { a as TableBoxFieldActionGroup, i as TableBoxFieldActionEntry, n as TableBoxField, r as TableBoxFieldAction, t as TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL } from "./TableBoxField-DR-SJY9z.mjs";
+import { a as TableBoxFieldActionGroup, i as TableBoxFieldActionEntry, n as TableBoxField, r as TableBoxFieldAction, t as TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL } from "./TableBoxField-BTpSGmgW.mjs";
 export { TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL, TableBoxFieldAction, TableBoxFieldActionEntry, TableBoxFieldActionGroup, TableBoxField as default };

package/dist/{TableBoxRow-DiuAB_rV.d.mts → TableBoxRow-BBTztgTT.d.mts}

@@ -1,4 +1,4 @@
-import { l as MenuItemProps } from "./Menu-CrThaUX2.mjs";
+import { l as MenuItemProps } from "./Menu-5VknNr1T.mjs";
 import { t as TableRow } from "./TableRow-lCsvG0a-.mjs";
 import { ComponentPropsWithoutRef, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -83,4 +83,4 @@ declare const TableBoxRowOverlay: ({
 }) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TableBoxRowOverlay as n, TableBoxRowProps as r, TableBoxRow as t };
-//# sourceMappingURL=TableBoxRow-DiuAB_rV.d.mts.map
+//# sourceMappingURL=TableBoxRow-BBTztgTT.d.mts.map

package/dist/TableBoxRow.d.mts

@@ -1,2 +1,2 @@
-import { n as TableBoxRowOverlay, r as TableBoxRowProps, t as TableBoxRow } from "./TableBoxRow-DiuAB_rV.mjs";
+import { n as TableBoxRowOverlay, r as TableBoxRowProps, t as TableBoxRow } from "./TableBoxRow-BBTztgTT.mjs";
 export { TableBoxRowOverlay, TableBoxRowProps, TableBoxRow as default };

package/dist/{TableBoxRowActions-Cm4KJsAD.d.mts → TableBoxRowActions-B9QSVySz.d.mts}

@@ -1,4 +1,4 @@
-import { l as MenuItemProps } from "./Menu-CrThaUX2.mjs";
+import { l as MenuItemProps } from "./Menu-5VknNr1T.mjs";
 import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -54,4 +54,4 @@ declare const RowActions: ({
 }: RowActionsProps) => _$react_jsx_runtime0.JSX.Element | null;
 //#endregion
 export { RowActionsContainerWithFadeWidth as i, RowActions as n, RowActionsContainer as r, RowAction as t };
-//# sourceMappingURL=TableBoxRowActions-Cm4KJsAD.d.mts.map
+//# sourceMappingURL=TableBoxRowActions-B9QSVySz.d.mts.map

package/dist/TableBoxRowActions.d.mts

@@ -1,2 +1,2 @@
-import { i as RowActionsContainerWithFadeWidth, n as RowActions, r as RowActionsContainer, t as RowAction } from "./TableBoxRowActions-Cm4KJsAD.mjs";
+import { i as RowActionsContainerWithFadeWidth, n as RowActions, r as RowActionsContainer, t as RowAction } from "./TableBoxRowActions-B9QSVySz.mjs";
 export { RowAction, RowActions, RowActionsContainer, RowActionsContainerWithFadeWidth };

package/dist/{TableControls-n16XKO9S.mjs → TableControls-qxoq5abn.mjs}

@@ -23,21 +23,21 @@ import { r as InputGroup } from "./Input-Dap055xf.mjs";
 import Input_default from "./components/Input/index.mjs";
 import { c as MenuList, s as MenuItem } from "./Menu-Dw6Rcpk6.mjs";
 import { n as DropdownMenu_default } from "./DropdownMenu-CedsmO5h.mjs";
-import { t as Combobox } from "./Combobox-CcFJo68g.mjs";
+import { t as Combobox } from "./Combobox-CBM-oY-e.mjs";
 import { n as Select, r as SelectHeader, t as Option } from "./Select-BJ9ACmRD.mjs";
 import { s as Popover_default } from "./Popover-BcII7usF.mjs";
 import { i as Modal_default } from "./Modal-kjUptzg1.mjs";
 import { r as DateRangePicker, t as DatePicker } from "./DatePicker-D0cvVbzq.mjs";
 import { t as ListBox } from "./ListBox-eoyBHtnJ.mjs";
 import { i as selectedPresetFor, n as parseDateFilterValue, r as resolveDateFilterValue, t as formatDateFilterValue } from "./date-filter-D0ys8s0D.mjs";
-import { m as FormField, o as ComboboxField } from "./FormField-C4B2qFgh.mjs";
+import { m as FormField, o as ComboboxField } from "./FormField-C0cd1zVd.mjs";
 import { t as Toggle } from "./Toggle-BsqSNYok.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 { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { DateTime, Settings } from "luxon";
 import { CaretDownIcon, CheckIcon, CircleInfoIcon, CirclePlusIcon, CopyIcon, EyeIcon, EyeOffIcon, FilterIcon, MoreIcon, PlusIcon, RotateCcwIcon, SaveIcon, SearchIcon, SettingsIcon, StarIcon, 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 { CaretDownIcon as CaretDownIcon$1, CircleInfoIcon as CircleInfoIcon$1, LockedIcon as LockedIcon$1, MoreIcon as MoreIcon$1, PlusIcon as PlusIcon$1, SearchIcon as SearchIcon$1, StarFillIcon, XIcon as XIcon$1 } from "@persona/icons/12px";
 import { debounce, isEqual, noop, partition, startCase, union, uniqueId } from "lodash-es";
 import { useId } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
@@ -404,7 +404,7 @@ const TabOverflowContainer = styled.div`
   position: absolute;
   height: 32px;
 `;
-const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditViews, handleNameChange, onDuplicateView, onRequestDeleteView, onSelectView, onResetCurrentView, onSaveView, onRequestSetDefaultView, onRequestUnsetDefaultView, onViewHiddenChange, onHideView, onKeyboardMove, isHidden = false, isViewDirty, showTabContextMenu, setShowTabContextMenu, className, ...rest }) => {
+const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditViews, handleNameChange, onDuplicateView, onRequestDeleteView, onSelectView, onResetCurrentView, onSaveView, onRequestSetDefaultView, onRequestUnsetDefaultView, onViewHiddenChange, onHideView, onKeyboardMove, isHidden = false, isViewDirty, showTabContextMenu, setShowTabContextMenu, isStarredDefault = false, className, ...rest }) => {
 	const strings = usePDSStrings();
 	const showMenu = selected && (canEditViews || !!onViewHiddenChange);
 	const onRequestDefaultViewChange = view.isDefault ? onRequestUnsetDefaultView : onRequestSetDefaultView;
@@ -429,7 +429,10 @@ const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditView
 			}
 		} : void 0,
 		"aria-keyshortcuts": onKeyboardMove ? "Alt+Shift+ArrowLeft Alt+Shift+ArrowRight" : void 0,
+		prefixIcon: isStarredDefault ? /* @__PURE__ */ jsx(StarFillIcon, { "aria-hidden": true }) : void 0,
 		suffixIcon: showMenu ? /* @__PURE__ */ jsx(MoreIcon, {}) : void 0,
+		"aria-description": isStarredDefault ? strings.defaultView : void 0,
+		"data-starred-default": isStarredDefault || void 0,
 		className,
 		...rest,
 		children: view.name
@@ -531,7 +534,7 @@ const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditView
 	return tab;
 };
 const SavedViewTabSlot = ({ slotRef, slotStyle, slotListeners, ...props }) => {
-	const { view, selected, onViewHiddenChange, onHideView } = props;
+	const { view, selected, onViewHiddenChange, onHideView, isStarredDefault } = props;
 	const strings = usePDSStrings();
 	const [slotElement, setSlotElement] = useState(null);
 	const mergedSlotRef = useMemo(() => mergeRefs(slotRef, setSlotElement), [slotRef]);
@@ -547,7 +550,7 @@ const SavedViewTabSlot = ({ slotRef, slotStyle, slotListeners, ...props }) => {
 	}, [slotElement, selected]);
 	return /* @__PURE__ */ jsxs(TabSlot, {
 		ref: mergedSlotRef,
-		"data-tab-view": true,
+		"data-tab-view": isStarredDefault ? void 0 : true,
 		"data-tab-slot": true,
 		style: slotStyle,
 		...slotListeners,
@@ -579,12 +582,16 @@ const SortableSavedViewTab = (props) => {
 /**
 * A tab that is locked and does not support editing or actions.
 */
-const LockedViewTab = ({ id, selected, onClick, children, ...props }) => {
+const LockedViewTab = ({ id, selected, onClick, icon = "locked", children, ...props }) => {
+	const strings = usePDSStrings();
 	return /* @__PURE__ */ jsx(LockedTab, {
 		id,
 		selected,
 		onClick: selected ? void 0 : onClick,
-		suffixIcon: /* @__PURE__ */ jsx(LockedIcon$1, {}),
+		prefixIcon: icon === "starred" ? /* @__PURE__ */ jsx(StarFillIcon, { "aria-hidden": true }) : void 0,
+		suffixIcon: icon === "locked" ? /* @__PURE__ */ jsx(LockedIcon$1, {}) : void 0,
+		"data-starred-default": icon === "starred" || void 0,
+		"aria-description": icon === "starred" ? strings.defaultView : void 0,
 		...props,
 		children
 	});
@@ -671,7 +678,7 @@ const ProductTourStyles = createGlobalStyle`
     }
   }
 `;
-const ControlBar = ({ presetViews, currentView, onSelectView, views, hiddenViewIds, onAddView, onDuplicateView, onDeleteView, onViewNameChange, onReorderViews, onViewHiddenChange, onSaveView, onSetDefaultView, onUnsetDefaultView, isViewDirty, canEditViews, showFilters, setShowFilters, searchProps, filtersId, propertiesButton, tableActions, isLoading, isFilterPanelLoading, showViews, selectedRows = [], bulkActions, onResetCurrentView, onClearSelection, title, "data-tour-target": dataTourTarget, compact, onError, filterPanel }) => {
+const ControlBar = ({ presetViews, currentView, onSelectView, views, starredDefaultView = false, hiddenViewIds, onAddView, onDuplicateView, onDeleteView, onViewNameChange, onReorderViews, onViewHiddenChange, onSaveView, onSetDefaultView, onUnsetDefaultView, isViewDirty, canEditViews, showFilters, setShowFilters, searchProps, filtersId, propertiesButton, tableActions, isLoading, isFilterPanelLoading, showViews, selectedRows = [], bulkActions, onResetCurrentView, onClearSelection, title, "data-tour-target": dataTourTarget, compact, onError, filterPanel }) => {
 	const strings = usePDSStrings();
 	const tabListRef = useRef(null);
 	const tabOverflowRef = useRef(null);
@@ -688,21 +695,60 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, hiddenViewI
 	const [isAddViewOverflowing, setIsAddViewOverflowing] = useState(false);
 	useEffect(() => {
 		const previousPendingView = previousPendingViewRef.current;
-		if (!pendingViewAction && previousPendingView) (document.getElementById(`${OVERFLOW_TAB_ID_PREFIX}${previousPendingView.id}`) ?? document.getElementById(`${TAB_ID_PREFIX}${previousPendingView.id}`))?.focus({ preventScroll: true });
+		if (!pendingViewAction && previousPendingView) (document.getElementById(`${OVERFLOW_TAB_ID_PREFIX}${previousPendingView.id}`) ?? document.getElementById(`${TAB_ID_PREFIX}${previousPendingView.id}`) ?? tabListRef.current?.querySelector("[data-starred-default]"))?.focus({ preventScroll: true });
 		previousPendingViewRef.current = pendingViewAction?.view ?? null;
 	}, [pendingViewAction]);
+	const focusedTabIdRef = useRef(null);
+	if (starredDefaultView && typeof document !== "undefined") {
+		const focusedId = document.activeElement?.id;
+		focusedTabIdRef.current = focusedId?.startsWith(TAB_ID_PREFIX) ? focusedId : null;
+	}
+	useLayoutEffect(() => {
+		const focusedTabId = focusedTabIdRef.current;
+		if (!starredDefaultView || !focusedTabId) return;
+		const activeElement = document.activeElement;
+		if (activeElement && activeElement !== document.body) return;
+		(document.getElementById(focusedTabId) ?? tabListRef.current?.querySelector("[data-starred-default]"))?.focus({ preventScroll: true });
+	});
+	const starredView = useMemo(() => starredDefaultView ? views?.find((view) => view.isDefault) : void 0, [starredDefaultView, views]);
+	const showBuiltInTab = !starredView;
+	const currentViewId = currentView ?? starredView?.id ?? null;
+	const unpinnedViews = useMemo(() => (views ?? []).filter((view) => view !== starredView), [starredView, views]);
 	const [shownViews, hiddenViews] = useMemo(() => {
 		const hiddenIds = new Set(hiddenViewIds);
-		const allViews = views ?? [];
+		const allViews = unpinnedViews;
 		return [allViews.filter((view) => !hiddenIds.has(view.id)), allViews.filter((view) => hiddenIds.has(view.id))];
-	}, [views, hiddenViewIds]);
+	}, [unpinnedViews, hiddenViewIds]);
+	const shownViewsKey = shownViews.map((view) => view.id).join("\n");
+	const [selectedSlot, setSelectedSlot] = useState(null);
+	const selectedSlotIndex = selectedSlot != null && selectedSlot.viewId === currentViewId && selectedSlot.shownViewsKey === shownViewsKey ? selectedSlot.index : null;
+	const stripViews = useMemo(() => {
+		const selectedView = shownViews.find((view) => view.id === currentViewId);
+		if (selectedSlotIndex == null || !selectedView) return shownViews;
+		const otherViews = shownViews.filter((view) => view !== selectedView);
+		return [
+			...otherViews.slice(0, selectedSlotIndex),
+			selectedView,
+			...otherViews.slice(selectedSlotIndex)
+		];
+	}, [
+		shownViews,
+		currentViewId,
+		selectedSlotIndex
+	]);
 	const onResize = useCallback(() => {
 		if (!tabListRef.current) return;
 		const containerRect = tabListRef.current.getBoundingClientRect();
 		const tabListContainer = tabListRef.current;
 		const firstOverflowIndex = Array.from(tabListContainer.querySelectorAll("[data-tab-view]")).findIndex((el) => !rectContainsRect(containerRect, el.getBoundingClientRect()));
-		const nextOverflowViews = firstOverflowIndex === -1 ? [] : shownViews.slice(firstOverflowIndex);
+		const nextOverflowViews = firstOverflowIndex === -1 ? [] : stripViews.slice(firstOverflowIndex);
 		setOverflowViews((prev) => prev.length === nextOverflowViews.length && prev.every((view, index) => view === nextOverflowViews[index]) ? prev : nextOverflowViews);
+		const selectedIndex = stripViews.findIndex((view) => view.id === currentViewId);
+		if (onReorderViews && currentViewId && firstOverflowIndex > 0 && selectedIndex >= firstOverflowIndex) setSelectedSlot({
+			viewId: currentViewId,
+			shownViewsKey,
+			index: firstOverflowIndex - 1
+		});
 		const firstRowElements = Array.from(tabListContainer.children).filter((el) => el instanceof HTMLElement && el !== tabOverflowRef.current && rectContainsRect(containerRect, el.getBoundingClientRect()));
 		const anchor = firstRowElements[firstRowElements.length - 1];
 		setOverflowLeft(anchor ? anchor.offsetLeft + anchor.offsetWidth + OVERFLOW_GAP : null);
@@ -710,7 +756,12 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, hiddenViewI
 		setIsAddViewOverflowing(addViewButton instanceof HTMLElement && !firstRowElements.includes(addViewButton));
 		const tabOverflowWidth = tabOverflowRef.current?.getBoundingClientRect().width;
 		if (tabOverflowWidth) setTabOverflowWidth((prev) => prev != null && prev > tabOverflowWidth && prev - tabOverflowWidth < OVERFLOW_WIDTH_SHRINK_THRESHOLD ? prev : tabOverflowWidth);
-	}, [shownViews]);
+	}, [
+		currentViewId,
+		onReorderViews,
+		shownViewsKey,
+		stripViews
+	]);
 	useLayoutEffect(() => {
 		const tabList = tabListRef.current;
 		if (!showViews || !tabList) return;
@@ -735,10 +786,10 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, hiddenViewI
 	}, [
 		onResize,
 		showViews,
-		shownViews
+		stripViews
 	]);
-	const isCurrentViewInOverflow = useMemo(() => !!currentView && [...overflowViews, ...hiddenViews].some((view) => view.id === currentView), [
-		currentView,
+	const isCurrentViewInOverflow = useMemo(() => !!currentViewId && [...overflowViews, ...hiddenViews].some((view) => view.id === currentViewId), [
+		currentViewId,
 		overflowViews,
 		hiddenViews
 	]);
@@ -781,13 +832,22 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, hiddenViewI
 			y: 0
 		};
 	}, []);
+	const orderedViewIds = useMemo(() => {
+		let shownIndex = 0;
+		const hiddenIds = new Set(hiddenViews.map((view) => view.id));
+		return unpinnedViews.map((view) => hiddenIds.has(view.id) ? view.id : stripViews[shownIndex++].id);
+	}, [
+		unpinnedViews,
+		hiddenViews,
+		stripViews
+	]);
 	const moveView = (viewId, toIndex) => {
 		if (!views || !onReorderViews) return;
-		const viewIds = views.map((view) => view.id);
+		const viewIds = orderedViewIds;
 		const reordered = moveItemByIndex(viewIds, viewIds.indexOf(viewId), toIndex);
-		if (reordered !== viewIds) onReorderViews(reordered);
+		if (reordered !== viewIds) onReorderViews(starredView ? [starredView.id, ...reordered] : reordered);
 	};
-	const indexOfView = (viewId) => views?.findIndex((view) => view.id === viewId) ?? -1;
+	const indexOfView = (viewId) => orderedViewIds.indexOf(viewId);
 	const openViewFromMenu = (viewId) => {
 		if (hiddenViews.some((view) => view.id === viewId)) onViewHiddenChange?.(viewId, false);
 		moveView(viewId, 0);
@@ -798,17 +858,20 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, hiddenViewI
 	};
 	const hideView = (viewId) => {
 		const overflowIds = new Set(overflowViews.map((view) => view.id));
-		const visibleViews = shownViews.filter((view) => !overflowIds.has(view.id));
+		const visibleViews = stripViews.filter((view) => !overflowIds.has(view.id));
 		const index = visibleViews.findIndex((view) => view.id === viewId);
-		const isCurrent = viewId === currentView;
+		const isCurrent = viewId === currentViewId;
 		const focusTarget = isCurrent || index === -1 ? void 0 : visibleViews[index + 1] ?? visibleViews[index - 1];
+		const fallbackViewId = starredView?.id ?? null;
 		onViewHiddenChange?.(viewId, true);
-		if (isCurrent) onSelectView?.(null);
-		document.getElementById(`${TAB_ID_PREFIX}${focusTarget ? focusTarget.id : "default"}`)?.focus({ preventScroll: true });
+		if (isCurrent) onSelectView?.(fallbackViewId);
+		document.getElementById(`${TAB_ID_PREFIX}${focusTarget ? focusTarget.id : fallbackViewId ?? "default"}`)?.focus({ preventScroll: true });
 	};
 	const moveViewWithKeyboard = (viewId, direction) => {
-		const neighbor = shownViews[shownViews.findIndex((view) => view.id === viewId) + direction];
+		const neighbor = stripViews[stripViews.findIndex((view) => view.id === viewId) + direction];
 		if (!neighbor) return;
+		const swapIds = [viewId, neighbor.id];
+		if (currentView != null && swapIds.includes(currentView) && swapIds.some((id) => overflowViews.some((view) => view.id === id))) return;
 		moveView(viewId, indexOfView(neighbor.id));
 	};
 	const handleAddView = async () => {
@@ -933,22 +996,28 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, hiddenViewI
 		}, key);
 	});
 	const showViewsBar = title || showViews || canEditViews && onSaveView || tableActions || bulkActions;
+	const getTabActionProps = (view) => {
+		const isStarred = !!view && view === starredView;
+		return {
+			onKeyboardMove: onReorderViews && !isStarred ? moveViewWithKeyboard : void 0,
+			onHideView: hideView,
+			handleNameChange,
+			onDuplicateView,
+			onRequestDeleteView: isStarred ? void 0 : onRequestDeleteView,
+			onSelectView,
+			onResetCurrentView: isStarred ? void 0 : onResetCurrentView,
+			onSaveView,
+			onRequestSetDefaultView: isStarred ? void 0 : onRequestSetDefaultView,
+			onRequestUnsetDefaultView: isStarred ? void 0 : onRequestUnsetDefaultView,
+			onViewHiddenChange: isStarred ? void 0 : onViewHiddenChange
+		};
+	};
 	const getSavedViewTabProps = (view) => ({
 		view,
-		onKeyboardMove: onReorderViews ? moveViewWithKeyboard : void 0,
-		onHideView: hideView,
+		...getTabActionProps(view),
 		canEditViews: canEditViews ?? false,
-		handleNameChange,
-		onDuplicateView,
-		onRequestDeleteView,
-		onSelectView,
-		onResetCurrentView,
-		onSaveView,
-		onRequestSetDefaultView,
-		onRequestUnsetDefaultView,
-		onViewHiddenChange,
 		isViewDirty: isViewDirty ?? false,
-		selected: view.id === currentView,
+		selected: view.id === currentViewId,
 		showTabContextMenu: showTabContextMenu && !isCurrentViewInOverflow,
 		setShowTabContextMenu
 	});
@@ -979,10 +1048,16 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, hiddenViewI
 			]
 		}),
 		children: showViews && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			/* @__PURE__ */ jsx(LockedViewTab, {
+			starredView && /* @__PURE__ */ jsx(SavedViewTabSlot, {
+				...getSavedViewTabProps(starredView),
+				isStarredDefault: true,
+				"data-tour-target": "saved-views-default-view"
+			}),
+			showBuiltInTab && /* @__PURE__ */ jsx(LockedViewTab, {
 				id: `${TAB_ID_PREFIX}default`,
 				selected: !currentView,
 				onClick: () => onSelectView?.(null),
+				icon: starredDefaultView ? "starred" : "locked",
 				"data-tour-target": "saved-views-default-view",
 				children: strings.defaultView
 			}),
@@ -996,10 +1071,10 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, hiddenViewI
 				}, view.id);
 			}),
 			onReorderViews ? /* @__PURE__ */ jsx(SortableContext, {
-				items: shownViews.map((view) => view.id),
+				items: stripViews.map((view) => view.id),
 				strategy: horizontalListSortingStrategy,
-				children: shownViews.map((view) => /* @__PURE__ */ jsx(SortableSavedViewTab, { ...getSavedViewTabProps(view) }, view.id))
-			}) : shownViews.map((view) => /* @__PURE__ */ jsx(SavedViewTabSlot, { ...getSavedViewTabProps(view) }, view.id)),
+				children: stripViews.map((view) => /* @__PURE__ */ jsx(SortableSavedViewTab, { ...getSavedViewTabProps(view) }, view.id))
+			}) : stripViews.map((view) => /* @__PURE__ */ jsx(SavedViewTabSlot, { ...getSavedViewTabProps(view) }, view.id)),
 			canEditViews && onAddView && /* @__PURE__ */ jsx(AddViewButton, {
 				id: ADD_VIEW_BUTTON_ID,
 				size: "md",
@@ -1012,20 +1087,12 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, hiddenViewI
 				ref: tabOverflowRef,
 				overflowViews,
 				hiddenViews,
-				currentView,
-				onSelectView,
+				currentView: currentViewId,
 				onOpenView: openViewFromMenu,
 				canEditViews: canEditViews ?? false,
 				handleAddView: onAddView && isAddViewOverflowing ? handleAddView : null,
-				handleNameChange,
-				onDuplicateView,
-				onRequestDeleteView,
-				onResetCurrentView,
-				onSaveView,
-				onRequestSetDefaultView,
-				onRequestUnsetDefaultView,
-				onViewHiddenChange,
-				onHideView: hideView,
+				...getTabActionProps([...overflowViews, ...hiddenViews].find((view) => view.id === currentViewId)),
+				onKeyboardMove: void 0,
 				isViewDirty: isViewDirty ?? false,
 				showTabContextMenu: showTabContextMenu && isCurrentViewInOverflow,
 				setShowTabContextMenu,
@@ -1174,7 +1241,7 @@ const FilterCombobox = styled.div`
     `}
 `;
 const InputFilter = ({ config, compact, onActiveChange }) => {
-	const [value, setValue] = useState(config.value);
+	const [value, setValue] = useState(config.value ?? "");
 	const onChangeRef = useRef(config.onChange);
 	onChangeRef.current = config.onChange;
 	const onActiveChangeRef = useRef(onActiveChange);
@@ -1183,13 +1250,13 @@ const InputFilter = ({ config, compact, onActiveChange }) => {
 		onActiveChangeRef.current(nextValue.length > 0);
 		onChangeRef.current(nextValue);
 	}, 300), []);
-	useEffect(() => setValue(config.value), [config.value]);
+	useEffect(() => setValue(config.value ?? ""), [config.value]);
 	useEffect(() => () => debouncedOnChange.cancel(), [debouncedOnChange]);
 	return /* @__PURE__ */ jsx(Input_default, {
 		"aria-label": config.name,
 		placeholder: config.placeholder,
 		size: compact ? "sm" : void 0,
-		value,
+		value: value ?? "",
 		onChange: ({ target: { value: nextValue } }) => {
 			setValue(nextValue);
 			debouncedOnChange(nextValue);
@@ -1201,7 +1268,7 @@ const SelectFilter = ({ config, compact, onActiveChange }) => {
 	return /* @__PURE__ */ jsx(Select, {
 		"aria-label": config.name,
 		placeholder: config.placeholder ?? strings.selectFilterOption,
-		value: config.value,
+		value: config.value ?? null,
 		width: "auto",
 		minWidth: 150,
 		size: compact ? "sm" : void 0,
@@ -1382,7 +1449,7 @@ const synchronizeActiveFilters = (filters, activeFilters, filterResolver) => {
 		...activeFromConfig,
 		...retainedDefaultVisible,
 		...configuring
-	].sort((first, second) => first.id - second.id);
+	].filter((active, index, all) => all.findIndex((other) => other.id === active.id) === index).sort((first, second) => first.id - second.id);
 	return next.length === 0 ? [createUnsetFilter(activeFilters)] : next;
 };
 const Filter = ({ config, compact, hideFilterSelection, filterResolver }) => {
@@ -1452,7 +1519,7 @@ const FilterSelection = ({ value, disabled, compact, filterResolver }) => {
 		width: "auto",
 		minWidth: 120,
 		placeholder: strings.selectFilterType,
-		value,
+		value: value ?? null,
 		size: compact ? "sm" : void 0,
 		disabled,
 		onValueChange: replaceFilter,
@@ -4290,7 +4357,7 @@ function useFilterStateV2(options) {
 					...prev.all,
 					topLevelRules: [...prev.all.topLevelRules, added]
 				},
-				heldIds: registry.get(rule.fieldId)?.condition != null || isHeldRule(added, registry) ? withId(prev.heldIds, id) : prev.heldIds
+				heldIds: isHeldOnAdd(added, registry) ? withId(prev.heldIds, id) : prev.heldIds
 			}));
 			return id;
 		}, [registry]),
@@ -4339,6 +4406,19 @@ function isHeldRule(rule, registry) {
 	if (registry.get(rule.fieldId)?.condition != null) return !hasCompleteValue(rule, registry);
 	return !isValuelessOperator(rule.operator) && rule.value == null;
 }
+/**
+* Whether a pill the picker just minted is held. A configurable condition is
+* held until the user confirms it, so a seeded value (`0`, a default string)
+* never filters on a guess. A valueless seed (`is true`, `is null`) is the
+* exception: it has no value left to enter, so holding it would leave a pill
+* with nothing to do but confirm, and it applies on pick like any complete
+* valueless rule.
+*/
+function isHeldOnAdd(rule, registry) {
+	const field = registry.get(rule.fieldId);
+	if (field?.condition == null) return isHeldRule(rule, registry);
+	return !(isValuelessOperator(rule.operator, field) && hasCompleteValue(rule, registry));
+}
 function heldRulesOf(state) {
 	return state.heldIds.size === 0 ? [] : state.all.topLevelRules.filter((rule) => state.heldIds.has(rule.id));
 }
@@ -5100,7 +5180,7 @@ const hasNewFilterId = (currentIds, previousIds) => {
 	const previous = new Set(previousIds.split("\0").filter(Boolean));
 	return currentIds.split("\0").some((id) => id !== "" && !previous.has(id));
 };
-const TableControls = ({ filters = EMPTY_FILTERS, filterResolver, filtersV2, filterPanel, searchProps, defaultShowFilters, showFilters: controlledShowFilters, setShowFilters: controlledSetShowFilters, className, tableActions, propertiesButton, isLoading, isFilterPanelLoading, showViews, canEditViews, onSelectView, views, hiddenViewIds, currentView, onAddView, onViewNameChange, onReorderViews, onViewHiddenChange, onDuplicateView, onDeleteView, onSaveView, onSetDefaultView, onUnsetDefaultView, isViewDirty, selectedRows, bulkActions, onClearSelection, title, presetViews, compact, columnConfigurationProps, showFiltersAlways = false, onError, "data-tour-target": dataTourTarget }) => {
+const TableControls = ({ filters = EMPTY_FILTERS, filterResolver, filtersV2, filterPanel, searchProps, defaultShowFilters, showFilters: controlledShowFilters, setShowFilters: controlledSetShowFilters, className, tableActions, propertiesButton, isLoading, isFilterPanelLoading, showViews, canEditViews, onSelectView, views, starredDefaultView, hiddenViewIds, currentView, onAddView, onViewNameChange, onReorderViews, onViewHiddenChange, onDuplicateView, onDeleteView, onSaveView, onSetDefaultView, onUnsetDefaultView, isViewDirty, selectedRows, bulkActions, onClearSelection, title, presetViews, compact, columnConfigurationProps, showFiltersAlways = false, onError, "data-tour-target": dataTourTarget }) => {
 	const filtersId = useId();
 	const enabledFilters = useMemo(() => filtersV2 != null ? EMPTY_FILTERS : filters.filter((filter) => filter.enabled !== false), [filters, filtersV2]);
 	const [activeFilters, setActiveFilters] = useState(() => getActiveFilters(enabledFilters, [], true, filterResolver));
@@ -5164,6 +5244,7 @@ const TableControls = ({ filters = EMPTY_FILTERS, filterResolver, filtersV2, fil
 		children: /* @__PURE__ */ jsx(ControlBar, {
 			showViews: compact ? false : showViews,
 			views: compact ? void 0 : views,
+			starredDefaultView: compact ? void 0 : starredDefaultView,
 			hiddenViewIds: compact ? void 0 : hiddenViewIds,
 			onSelectView: compact ? void 0 : onSelectView,
 			currentView: compact ? void 0 : currentView,
@@ -5504,4 +5585,4 @@ function decodeBase64(input) {
 //#endregion
 export { isNumericComparisonOperator as A, useTableControls as B, useFilterBarSize as C, getOperatorsForField as D, getDefaultOperatorForType as E, getActiveFilters as F, DataTableCompactBar as H, isFilterActive as I, resolveFilterTypeDefinition as L, isValuelessOperator as M, reconcileValueForOperator as N, getOperatorsForType as O, FiltersContainer as P, TableControlsContext as R, FILTER_SIZE_TOKENS as S, emptyValueForRule as T, ControlBar as V, EMPTY_FILTER_STATE as _, encodeFilterStateToUrlParam as a, resolveValueControl as b, FilterBar_default as c, TableViewConfiguration as d, TableViewConfigurationDropdown as f, pruneToRegistry as g, isFilterStateV2 as h, decodeFilterStateFromUrl as i, isRangeOperator as j, isCompleteDateRange as k, resolveDateRangeRuleValue as l, hasCompleteValue as m, applyFilterStateToSearchParams as n, FieldRegistry as o, useFilterStateV2 as p, decodeFilterStateFromString as r, buildFieldRegistry as s, FILTER_STATE_URL_PARAM as t, TableControls as u, isEmptyState as v, NUMERIC_COMPARISON_OPERATORS as w, dateRuleIntent as x, PillShell as y, TableControlsProvider as z };
 
-//# sourceMappingURL=TableControls-n16XKO9S.mjs.map
+//# sourceMappingURL=TableControls-qxoq5abn.mjs.map