@persona/design-system 0.10.1 → 0.10.2

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

@@ -1,8 +1,8 @@
-import { o as ComboboxOptionsOrGroups } from "./ComboboxBase-B7ZcqU9p.mjs";
+import { o as ComboboxOptionsOrGroups } from "./ComboboxBase-BlNi9OnF.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-y5ay5lMt.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-CDdVjAPQ.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-Cag3ZYRs.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-Cag3ZYRs.mjs";
 export { TableBoxCellProps, TableBoxCell as default };

package/dist/{TableBoxField-DR-SJY9z.d.mts → TableBoxField-C3Cg6Lv5.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-DHnQZ5yN.mjs";
+import { o as ImplementsFormField } from "./inputFields-mUsms2tO.mjs";
+import { r as TableBoxRowProps } from "./TableBoxRow-y5ay5lMt.mjs";
+import { n as TableBoxCellProps, s as TableBoxProps } from "./TableBoxCell-Cag3ZYRs.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-C3Cg6Lv5.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-C3Cg6Lv5.mjs";
 export { TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL, TableBoxFieldAction, TableBoxFieldActionEntry, TableBoxFieldActionGroup, TableBoxField as default };

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

@@ -1,4 +1,4 @@
-import { l as MenuItemProps } from "./Menu-CrThaUX2.mjs";
+import { l as MenuItemProps } from "./Menu-DHnQZ5yN.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-y5ay5lMt.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-y5ay5lMt.mjs";
 export { TableBoxRowOverlay, TableBoxRowProps, TableBoxRow as default };

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

@@ -1,4 +1,4 @@
-import { l as MenuItemProps } from "./Menu-CrThaUX2.mjs";
+import { l as MenuItemProps } from "./Menu-DHnQZ5yN.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-CDdVjAPQ.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-CDdVjAPQ.mjs";
 export { RowAction, RowActions, RowActionsContainer, RowActionsContainerWithFadeWidth };

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

@@ -23,14 +23,14 @@ 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 { 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 { n as Select, r as SelectHeader, t as Option } from "./Select-hnXfPywt.mjs";
+import { s as Popover_default } from "./Popover-532iYFek.mjs";
+import { i as Modal_default } from "./Modal-IJdbLORi.mjs";
+import { t as Combobox } from "./Combobox-BXHCfVpE.mjs";
+import { r as DateRangePicker, t as DatePicker } from "./DatePicker-CkNQjfCN.mjs";
+import { t as ListBox } from "./ListBox-BLoJVezh.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-D0y1uRV5.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";
@@ -41,11 +41,11 @@ import { CaretDownIcon as CaretDownIcon$1, CircleInfoIcon as CircleInfoIcon$1, L
 import { debounce, isEqual, noop, partition, startCase, union, uniqueId } from "lodash-es";
 import { useId } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
-import Fuse from "fuse.js";
 import { DragIcon as DragIcon$1 } from "@persona/icons/24px";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { DndContext, PointerSensor, closestCenter, pointerWithin, useSensor, useSensors } from "@dnd-kit/core";
 import { SortableContext, horizontalListSortingStrategy, useSortable } from "@dnd-kit/sortable";
+import Fuse from "fuse.js";
 import { parseAbsolute, parseDate, toCalendarDate, toZoned } from "@internationalized/date";
 import { v4 } from "uuid";
 import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
@@ -696,13 +696,36 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, hiddenViewI
 		const allViews = views ?? [];
 		return [allViews.filter((view) => !hiddenIds.has(view.id)), allViews.filter((view) => hiddenIds.has(view.id))];
 	}, [views, hiddenViewIds]);
+	const shownViewsKey = shownViews.map((view) => view.id).join("\n");
+	const [selectedSlot, setSelectedSlot] = useState(null);
+	const selectedSlotIndex = selectedSlot != null && selectedSlot.viewId === currentView && selectedSlot.shownViewsKey === shownViewsKey ? selectedSlot.index : null;
+	const stripViews = useMemo(() => {
+		const selectedView = shownViews.find((view) => view.id === currentView);
+		if (selectedSlotIndex == null || !selectedView) return shownViews;
+		const otherViews = shownViews.filter((view) => view !== selectedView);
+		return [
+			...otherViews.slice(0, selectedSlotIndex),
+			selectedView,
+			...otherViews.slice(selectedSlotIndex)
+		];
+	}, [
+		shownViews,
+		currentView,
+		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 === currentView);
+		if (onReorderViews && currentView && firstOverflowIndex > 0 && selectedIndex >= firstOverflowIndex) setSelectedSlot({
+			viewId: currentView,
+			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 +733,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]);
+	}, [
+		currentView,
+		onReorderViews,
+		shownViewsKey,
+		stripViews
+	]);
 	useLayoutEffect(() => {
 		const tabList = tabListRef.current;
 		if (!showViews || !tabList) return;
@@ -735,7 +763,7 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, hiddenViewI
 	}, [
 		onResize,
 		showViews,
-		shownViews
+		stripViews
 	]);
 	const isCurrentViewInOverflow = useMemo(() => !!currentView && [...overflowViews, ...hiddenViews].some((view) => view.id === currentView), [
 		currentView,
@@ -781,13 +809,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 (views ?? []).map((view) => hiddenIds.has(view.id) ? view.id : stripViews[shownIndex++].id);
+	}, [
+		views,
+		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);
 	};
-	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,7 +835,7 @@ 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 focusTarget = isCurrent || index === -1 ? void 0 : visibleViews[index + 1] ?? visibleViews[index - 1];
@@ -807,8 +844,10 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, hiddenViewI
 		document.getElementById(`${TAB_ID_PREFIX}${focusTarget ? focusTarget.id : "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 () => {
@@ -996,10 +1035,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",
@@ -1174,7 +1213,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 +1222,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 +1240,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 +1421,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 +1491,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,
@@ -5504,4 +5543,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-C5fNNdmT.mjs.map