@rotki/ui-library 2.26.1 → 3.0.0-beta.1

package/dist/composables/forms/auto-complete/focus.js

@@ -1,9 +1,15 @@
-import { computed, nextTick, toValue, watch } from "vue";
+import { computed, nextTick, shallowRef, toValue, watch } from "vue";
 import { watchDebounced } from "@vueuse/core";
 import { get as get$1, set as set$1 } from "@vueuse/shared";
 //#region src/composables/forms/auto-complete/focus.ts
 function useAutoCompleteFocus(options, deps) {
+	/**
+	* The input holds focus after a pick, as the combobox, but shows the picked value rather than an
+	* empty search until the user types, clicks or opens the list again.
+	*/
+	const settled = shallowRef(false);
 	const anyFocused = computed(() => get$1(deps.activatorFocusedWithin) || get$1(deps.menuWrapperFocusedWithin));
+	const editing = computed(() => get$1(deps.searchInputFocused) && !get$1(settled));
 	const inputClass = computed(() => {
 		const isFocused = get$1(anyFocused);
 		const isDisabled = toValue(options.disabled);
@@ -13,19 +19,34 @@ function useAutoCompleteFocus(options, deps) {
 		if (hasSearch) return "flex-1 min-w-[4rem]";
 		return "flex-1 min-w-0";
 	});
+	function unsettle() {
+		set$1(settled, false);
+	}
+	/** Puts focus on the input, as the combobox, while it keeps showing the value just picked. */
+	function settleOnInput() {
+		set$1(settled, true);
+		set$1(deps.searchInputFocused, true);
+	}
+	/**
+	* The first character typed after a pick replaces the shown value, as it would after tabbing in,
+	* rather than adding to it.
+	*
+	* @param event - the key press on the input
+	*/
+	function onSettledKeydown(event) {
+		if (!get$1(settled) || event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey) return;
+		get$1(deps.textInput)?.select();
+		unsettle();
+	}
 	async function setInputFocus() {
+		unsettle();
 		await nextTick(() => {
 			set$1(deps.searchInputFocused, true);
 		});
 	}
-	async function onActivatorFocused() {
-		await nextTick(() => {
-			if (!get$1(deps.activatorFocused)) set$1(deps.searchInputFocused, true);
-		});
-	}
 	function onInputFocused() {
 		set$1(deps.focusedValueIndex, -1);
-		if (toValue(options.shouldApplyValueAsSearch)) get$1(deps.textInput)?.select();
+		if (toValue(options.shouldApplyValueAsSearch) && !get$1(settled)) get$1(deps.textInput)?.select();
 		if (!get$1(deps.isOpen)) set$1(deps.justOpened, true);
 	}
 	/**
@@ -35,7 +56,9 @@ function useAutoCompleteFocus(options, deps) {
 	*/
 	let pendingCustomSearch = "";
 	watch(anyFocused, (focused) => {
-		if (!focused && toValue(options.customValue)) pendingCustomSearch = get$1(deps.internalSearch);
+		if (focused) return;
+		unsettle();
+		if (toValue(options.customValue)) pendingCustomSearch = get$1(deps.internalSearch);
 	});
 	watchDebounced(anyFocused, (focused) => {
 		if (!focused) {
@@ -55,10 +78,13 @@ function useAutoCompleteFocus(options, deps) {
 	});
 	return {
 		anyFocused,
+		editing,
 		inputClass,
-		onActivatorFocused,
 		onInputFocused,
-		setInputFocus
+		onSettledKeydown,
+		setInputFocus,
+		settleOnInput,
+		unsettle
 	};
 }
 //#endregion

package/dist/composables/forms/auto-complete/focus.js.map

@@ -1 +1 @@
-{"version":3,"file":"focus.js","names":[],"sources":["../../../../src/composables/forms/auto-complete/focus.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter, Ref, TemplateRef } from 'vue';\n\nexport interface UseAutoCompleteFocusOptions {\n  /** Whether custom (free-text) values are allowed. */\n  customValue: MaybeRefOrGetter<boolean>;\n  /** Whether to apply the current value as the search text when focused. */\n  shouldApplyValueAsSearch: MaybeRefOrGetter<boolean>;\n  /** Whether the autocomplete is disabled. */\n  disabled: MaybeRefOrGetter<boolean>;\n}\n\nexport interface UseAutoCompleteFocusDeps {\n  activatorFocused: Ref<boolean>;\n  activatorFocusedWithin: Ref<boolean>;\n  focusedValueIndex: Ref<number>;\n  internalSearch: Ref<string>;\n  isOpen: Ref<boolean>;\n  justOpened: Ref<boolean>;\n  menuWrapperFocusedWithin: Ref<boolean>;\n  searchInputFocused: Ref<boolean>;\n  textInput: Ref<HTMLInputElement | undefined> | TemplateRef<HTMLInputElement>;\n  setSearchAsValue: () => void;\n  updateInternalSearch: (value?: string) => void;\n}\n\nexport interface UseAutoCompleteFocusReturn {\n  anyFocused: ComputedRef<boolean>;\n  inputClass: ComputedRef<string>;\n  onActivatorFocused: () => Promise<void>;\n  onInputFocused: () => void;\n  setInputFocus: () => Promise<void>;\n}\n\nexport function useAutoCompleteFocus(\n  options: UseAutoCompleteFocusOptions,\n  deps: UseAutoCompleteFocusDeps,\n): UseAutoCompleteFocusReturn {\n  const anyFocused = computed<boolean>(\n    () => get(deps.activatorFocusedWithin) || get(deps.menuWrapperFocusedWithin),\n  );\n\n  const inputClass = computed<string>(() => {\n    const isFocused = get(anyFocused);\n    const isDisabled = toValue(options.disabled);\n    const shouldApply = toValue(options.shouldApplyValueAsSearch);\n    const hasSearch = get(deps.internalSearch);\n\n    if ((!isFocused || isDisabled) && !shouldApply)\n      return 'w-0 h-0';\n    if (hasSearch)\n      return 'flex-1 min-w-[4rem]';\n    return 'flex-1 min-w-0';\n  });\n\n  async function setInputFocus(): Promise<void> {\n    await nextTick(() => {\n      set(deps.searchInputFocused, true);\n    });\n  }\n\n  async function onActivatorFocused(): Promise<void> {\n    await nextTick(() => {\n      if (!get(deps.activatorFocused)) {\n        set(deps.searchInputFocused, true);\n      }\n    });\n  }\n\n  function onInputFocused(): void {\n    set(deps.focusedValueIndex, -1);\n\n    const shouldApply = toValue(options.shouldApplyValueAsSearch);\n    if (shouldApply) {\n      const textInput = get(deps.textInput);\n      textInput?.select();\n    }\n\n    if (!get(deps.isOpen)) {\n      set(deps.justOpened, true);\n    }\n  }\n\n  /**\n   * The search text as it stood when focus was lost, kept for the custom-value\n   * blur flow: it is captured before the debounced handler runs, because the\n   * watchers in value.ts clear the search when the menu closes.\n   */\n  let pendingCustomSearch = '';\n\n  watch(anyFocused, (focused) => {\n    if (!focused && toValue(options.customValue)) {\n      pendingCustomSearch = get(deps.internalSearch);\n    }\n  });\n\n  // Debounced, so the menu does not close for a moment while focus moves between its own elements\n  watchDebounced(\n    anyFocused,\n    (focused) => {\n      if (!focused) {\n        set(deps.isOpen, false);\n\n        const customValue = toValue(options.customValue);\n        const searchToUse = pendingCustomSearch;\n        pendingCustomSearch = '';\n\n        if (customValue && searchToUse) {\n          deps.updateInternalSearch(searchToUse);\n          deps.setSearchAsValue();\n        }\n\n        const shouldApply = toValue(options.shouldApplyValueAsSearch);\n        if (!shouldApply) {\n          deps.updateInternalSearch();\n        }\n      }\n    },\n    {\n      debounce: 100,\n      maxWait: 200,\n    },\n  );\n\n  return {\n    anyFocused,\n    inputClass,\n    onActivatorFocused,\n    onInputFocused,\n    setInputFocus,\n  };\n}\n"],"mappings":";;;;AAiCA,SAAgB,qBACd,SACA,MAC4B;CAC5B,MAAM,aAAa,eACX,MAAI,KAAK,sBAAsB,KAAK,MAAI,KAAK,wBAAwB,CAC7E;CAEA,MAAM,aAAa,eAAuB;EACxC,MAAM,YAAY,MAAI,UAAU;EAChC,MAAM,aAAa,QAAQ,QAAQ,QAAQ;EAC3C,MAAM,cAAc,QAAQ,QAAQ,wBAAwB;EAC5D,MAAM,YAAY,MAAI,KAAK,cAAc;EAEzC,KAAK,CAAC,aAAa,eAAe,CAAC,aACjC,OAAO;EACT,IAAI,WACF,OAAO;EACT,OAAO;CACT,CAAC;CAED,eAAe,gBAA+B;EAC5C,MAAM,eAAe;GACnB,MAAI,KAAK,oBAAoB,IAAI;EACnC,CAAC;CACH;CAEA,eAAe,qBAAoC;EACjD,MAAM,eAAe;GACnB,IAAI,CAAC,MAAI,KAAK,gBAAgB,GAC5B,MAAI,KAAK,oBAAoB,IAAI;EAErC,CAAC;CACH;CAEA,SAAS,iBAAuB;EAC9B,MAAI,KAAK,mBAAmB,EAAE;EAG9B,IADoB,QAAQ,QAAQ,wBAChC,GAEF,MADsB,KAAK,SAC3B,CAAA,EAAW,OAAO;EAGpB,IAAI,CAAC,MAAI,KAAK,MAAM,GAClB,MAAI,KAAK,YAAY,IAAI;CAE7B;;;;;;CAOA,IAAI,sBAAsB;CAE1B,MAAM,aAAa,YAAY;EAC7B,IAAI,CAAC,WAAW,QAAQ,QAAQ,WAAW,GACzC,sBAAsB,MAAI,KAAK,cAAc;CAEjD,CAAC;CAGD,eACE,aACC,YAAY;EACX,IAAI,CAAC,SAAS;GACZ,MAAI,KAAK,QAAQ,KAAK;GAEtB,MAAM,cAAc,QAAQ,QAAQ,WAAW;GAC/C,MAAM,cAAc;GACpB,sBAAsB;GAEtB,IAAI,eAAe,aAAa;IAC9B,KAAK,qBAAqB,WAAW;IACrC,KAAK,iBAAiB;GACxB;GAGA,IAAI,CADgB,QAAQ,QAAQ,wBAC/B,GACH,KAAK,qBAAqB;EAE9B;CACF,GACA;EACE,UAAU;EACV,SAAS;CACX,CACF;CAEA,OAAO;EACL;EACA;EACA;EACA;EACA;CACF;AACF"}
+{"version":3,"file":"focus.js","names":[],"sources":["../../../../src/composables/forms/auto-complete/focus.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter, Ref, TemplateRef } from 'vue';\n\nexport interface UseAutoCompleteFocusOptions {\n  /** Whether custom (free-text) values are allowed. */\n  customValue: MaybeRefOrGetter<boolean>;\n  /** Whether to apply the current value as the search text when focused. */\n  shouldApplyValueAsSearch: MaybeRefOrGetter<boolean>;\n  /** Whether the autocomplete is disabled. */\n  disabled: MaybeRefOrGetter<boolean>;\n}\n\nexport interface UseAutoCompleteFocusDeps {\n  activatorFocusedWithin: Ref<boolean>;\n  focusedValueIndex: Ref<number>;\n  internalSearch: Ref<string>;\n  isOpen: Ref<boolean>;\n  justOpened: Ref<boolean>;\n  menuWrapperFocusedWithin: Ref<boolean>;\n  searchInputFocused: Ref<boolean>;\n  textInput: Ref<HTMLInputElement | undefined> | TemplateRef<HTMLInputElement>;\n  setSearchAsValue: () => void;\n  updateInternalSearch: (value?: string) => void;\n}\n\nexport interface UseAutoCompleteFocusReturn {\n  anyFocused: ComputedRef<boolean>;\n  /** Whether the user is searching: the input has focus and is not just showing a picked value. */\n  editing: ComputedRef<boolean>;\n  inputClass: ComputedRef<string>;\n  onInputFocused: () => void;\n  onSettledKeydown: (event: KeyboardEvent) => void;\n  setInputFocus: () => Promise<void>;\n  settleOnInput: () => void;\n  unsettle: () => void;\n}\n\nexport function useAutoCompleteFocus(\n  options: UseAutoCompleteFocusOptions,\n  deps: UseAutoCompleteFocusDeps,\n): UseAutoCompleteFocusReturn {\n  /**\n   * The input holds focus after a pick, as the combobox, but shows the picked value rather than an\n   * empty search until the user types, clicks or opens the list again.\n   */\n  const settled = shallowRef<boolean>(false);\n\n  const anyFocused = computed<boolean>(\n    () => get(deps.activatorFocusedWithin) || get(deps.menuWrapperFocusedWithin),\n  );\n\n  const editing = computed<boolean>(() => get(deps.searchInputFocused) && !get(settled));\n\n  const inputClass = computed<string>(() => {\n    const isFocused = get(anyFocused);\n    const isDisabled = toValue(options.disabled);\n    const shouldApply = toValue(options.shouldApplyValueAsSearch);\n    const hasSearch = get(deps.internalSearch);\n\n    if ((!isFocused || isDisabled) && !shouldApply)\n      return 'w-0 h-0';\n    if (hasSearch)\n      return 'flex-1 min-w-[4rem]';\n    return 'flex-1 min-w-0';\n  });\n\n  function unsettle(): void {\n    set(settled, false);\n  }\n\n  /** Puts focus on the input, as the combobox, while it keeps showing the value just picked. */\n  function settleOnInput(): void {\n    set(settled, true);\n    set(deps.searchInputFocused, true);\n  }\n\n  /**\n   * The first character typed after a pick replaces the shown value, as it would after tabbing in,\n   * rather than adding to it.\n   *\n   * @param event - the key press on the input\n   */\n  function onSettledKeydown(event: KeyboardEvent): void {\n    if (!get(settled) || event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey)\n      return;\n    get(deps.textInput)?.select();\n    unsettle();\n  }\n\n  async function setInputFocus(): Promise<void> {\n    unsettle();\n    await nextTick(() => {\n      set(deps.searchInputFocused, true);\n    });\n  }\n\n  function onInputFocused(): void {\n    set(deps.focusedValueIndex, -1);\n\n    // focus coming back after a pick keeps the value as it is, unselected\n    const shouldApply = toValue(options.shouldApplyValueAsSearch);\n    if (shouldApply && !get(settled)) {\n      const textInput = get(deps.textInput);\n      textInput?.select();\n    }\n\n    if (!get(deps.isOpen)) {\n      set(deps.justOpened, true);\n    }\n  }\n\n  /**\n   * The search text as it stood when focus was lost, kept for the custom-value\n   * blur flow: it is captured before the debounced handler runs, because the\n   * watchers in value.ts clear the search when the menu closes.\n   */\n  let pendingCustomSearch = '';\n\n  watch(anyFocused, (focused) => {\n    if (focused)\n      return;\n    unsettle();\n    if (toValue(options.customValue))\n      pendingCustomSearch = get(deps.internalSearch);\n  });\n\n  // Debounced, so the menu does not close for a moment while focus moves between its own elements\n  watchDebounced(\n    anyFocused,\n    (focused) => {\n      if (!focused) {\n        set(deps.isOpen, false);\n\n        const customValue = toValue(options.customValue);\n        const searchToUse = pendingCustomSearch;\n        pendingCustomSearch = '';\n\n        if (customValue && searchToUse) {\n          deps.updateInternalSearch(searchToUse);\n          deps.setSearchAsValue();\n        }\n\n        const shouldApply = toValue(options.shouldApplyValueAsSearch);\n        if (!shouldApply) {\n          deps.updateInternalSearch();\n        }\n      }\n    },\n    {\n      debounce: 100,\n      maxWait: 200,\n    },\n  );\n\n  return {\n    anyFocused,\n    editing,\n    inputClass,\n    onInputFocused,\n    onSettledKeydown,\n    setInputFocus,\n    settleOnInput,\n    unsettle,\n  };\n}\n"],"mappings":";;;;AAoCA,SAAgB,qBACd,SACA,MAC4B;;;;;CAK5B,MAAM,UAAU,WAAoB,KAAK;CAEzC,MAAM,aAAa,eACX,MAAI,KAAK,sBAAsB,KAAK,MAAI,KAAK,wBAAwB,CAC7E;CAEA,MAAM,UAAU,eAAwB,MAAI,KAAK,kBAAkB,KAAK,CAAC,MAAI,OAAO,CAAC;CAErF,MAAM,aAAa,eAAuB;EACxC,MAAM,YAAY,MAAI,UAAU;EAChC,MAAM,aAAa,QAAQ,QAAQ,QAAQ;EAC3C,MAAM,cAAc,QAAQ,QAAQ,wBAAwB;EAC5D,MAAM,YAAY,MAAI,KAAK,cAAc;EAEzC,KAAK,CAAC,aAAa,eAAe,CAAC,aACjC,OAAO;EACT,IAAI,WACF,OAAO;EACT,OAAO;CACT,CAAC;CAED,SAAS,WAAiB;EACxB,MAAI,SAAS,KAAK;CACpB;;CAGA,SAAS,gBAAsB;EAC7B,MAAI,SAAS,IAAI;EACjB,MAAI,KAAK,oBAAoB,IAAI;CACnC;;;;;;;CAQA,SAAS,iBAAiB,OAA4B;EACpD,IAAI,CAAC,MAAI,OAAO,KAAK,MAAM,IAAI,WAAW,KAAK,MAAM,WAAW,MAAM,WAAW,MAAM,QACrF;EACF,MAAI,KAAK,SAAS,CAAC,EAAE,OAAO;EAC5B,SAAS;CACX;CAEA,eAAe,gBAA+B;EAC5C,SAAS;EACT,MAAM,eAAe;GACnB,MAAI,KAAK,oBAAoB,IAAI;EACnC,CAAC;CACH;CAEA,SAAS,iBAAuB;EAC9B,MAAI,KAAK,mBAAmB,EAAE;EAI9B,IADoB,QAAQ,QAAQ,wBAChC,KAAe,CAAC,MAAI,OAAO,GAE7B,MADsB,KAAK,SAC3B,CAAA,EAAW,OAAO;EAGpB,IAAI,CAAC,MAAI,KAAK,MAAM,GAClB,MAAI,KAAK,YAAY,IAAI;CAE7B;;;;;;CAOA,IAAI,sBAAsB;CAE1B,MAAM,aAAa,YAAY;EAC7B,IAAI,SACF;EACF,SAAS;EACT,IAAI,QAAQ,QAAQ,WAAW,GAC7B,sBAAsB,MAAI,KAAK,cAAc;CACjD,CAAC;CAGD,eACE,aACC,YAAY;EACX,IAAI,CAAC,SAAS;GACZ,MAAI,KAAK,QAAQ,KAAK;GAEtB,MAAM,cAAc,QAAQ,QAAQ,WAAW;GAC/C,MAAM,cAAc;GACpB,sBAAsB;GAEtB,IAAI,eAAe,aAAa;IAC9B,KAAK,qBAAqB,WAAW;IACrC,KAAK,iBAAiB;GACxB;GAGA,IAAI,CADgB,QAAQ,QAAQ,wBAC/B,GACH,KAAK,qBAAqB;EAE9B;CACF,GACA;EACE,UAAU;EACV,SAAS;CACX,CACF;CAEA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}

package/dist/composables/forms/auto-complete/index.d.ts

@@ -1,4 +1,7 @@
+export * from './chips.js';
+export * from './combobox.js';
 export * from './focus.js';
 export * from './keyboard-navigation.js';
 export * from './search.js';
+export * from './selection.js';
 export * from './value.js';

package/dist/composables/forms/auto-complete/keyboard-navigation.d.ts

@@ -20,14 +20,21 @@ export interface UseAutoCompleteKeyboardNavigationDeps<TItem> {
     removeValue: (item: TItem) => void;
     setSearchAsValue: () => void;
     getText: (item: TItem) => string | undefined;
+    updateInternalSearch: (value?: string) => void;
     activator: Ref<HTMLElement | undefined> | TemplateRef<HTMLElement>;
 }
 export interface UseAutoCompleteKeyboardNavigationReturn {
+    /**
+     * The selected value (a chip) that Backspace or Delete would remove, -1 for none. It is only
+     * drawn as selected: focus stays in the input, where no browser shortcut takes the key.
+     */
     focusedValueIndex: Ref<number>;
     moveSelectedValueHighlight: (event: KeyboardEvent, next: boolean) => void;
     onEnter: (event: KeyboardEvent) => void;
     onTab: (event: KeyboardEvent) => void;
-    onInputDeletePressed: () => void;
+    onInputDeletePressed: (event: KeyboardEvent) => void;
+    /** Drops the value selection on any key that does not act on it. */
+    onInputKeydown: (event: KeyboardEvent) => void;
     setValueFocus: (index: number) => void;
 }
 export declare function useAutoCompleteKeyboardNavigation<TItem>(options: UseAutoCompleteKeyboardNavigationOptions, deps: UseAutoCompleteKeyboardNavigationDeps<TItem>): UseAutoCompleteKeyboardNavigationReturn;

package/dist/composables/forms/auto-complete/keyboard-navigation.js

@@ -1,4 +1,4 @@
-import { nextTick, ref, toValue, watch } from "vue";
+import { ref, toValue, watch } from "vue";
 import { get, set } from "@vueuse/shared";
 //#region src/composables/forms/auto-complete/keyboard-navigation.ts
 function useAutoCompleteKeyboardNavigation(options, deps) {
@@ -88,36 +88,64 @@ function useAutoCompleteKeyboardNavigation(options, deps) {
 			event.preventDefault();
 		}
 	}
-	function onInputDeletePressed() {
-		const internalSearch = get(deps.internalSearch);
+	/**
+	* Removes the selected value. Alt with it, where custom values are accepted, puts the value's
+	* text back in the search instead of dropping it.
+	*
+	* @param event - the Backspace or Delete press
+	* @param item - the value the highlighted chip stands for
+	*/
+	function removeSelectedValue(event, item) {
+		event.preventDefault();
+		set(focusedValueIndex, -1);
+		deps.removeValue(item);
+		if (event.altKey && toValue(options.customValue)) deps.updateInternalSearch(deps.getText(item) ?? "");
+	}
+	/** Backspace or Delete with nothing typed: steps onto the last value, or drops it outright. */
+	function deleteFromEmptySearch(value) {
+		if (!toValue(options.multiple)) {
+			deps.clear();
+			return;
+		}
+		if (toValue(options.chips)) {
+			set(focusedValueIndex, value.length - 1);
+			return;
+		}
+		const lastItem = value.at(-1);
+		if (lastItem !== void 0) deps.removeValue(lastItem);
+	}
+	function onInputDeletePressed(event) {
 		const value = get(deps.value);
-		const total = value.length;
-		const multiple = toValue(options.multiple);
-		if (!internalSearch && total > 0) {
-			if (multiple) {
-				if (toValue(options.chips)) set(focusedValueIndex, total - 1);
-				else {
-					const lastItem = value[total - 1];
-					if (lastItem !== void 0) deps.removeValue(lastItem);
-				}
-			} else deps.clear();
+		const selected = value[get(focusedValueIndex)];
+		if (selected !== void 0) {
+			removeSelectedValue(event, selected);
+			return;
 		}
+		if (!get(deps.internalSearch) && value.length > 0) deleteFromEmptySearch(value);
+	}
+	function onInputKeydown(event) {
+		if (get(focusedValueIndex) === -1) return;
+		if (![
+			"Backspace",
+			"Delete",
+			"ArrowLeft",
+			"ArrowRight",
+			"Alt",
+			"AltGraph",
+			"Control",
+			"Meta",
+			"Shift"
+		].includes(event.key)) set(focusedValueIndex, -1);
 	}
 	watch(deps.value, () => {
 		setValueFocus(-1);
 	});
-	watch(focusedValueIndex, async (index) => {
-		const multiple = toValue(options.multiple);
-		if (index === -1 || !multiple) return;
-		await nextTick(() => {
-			(get(deps.activator)?.querySelector(`[data-index="${index}"]`))?.focus();
-		});
-	});
 	return {
 		focusedValueIndex,
 		moveSelectedValueHighlight,
 		onEnter,
 		onInputDeletePressed,
+		onInputKeydown,
 		onTab,
 		setValueFocus
 	};

package/dist/composables/forms/auto-complete/keyboard-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard-navigation.js","names":[],"sources":["../../../../src/composables/forms/auto-complete/keyboard-navigation.ts"],"sourcesContent":["import type { MaybeRefOrGetter, Ref, TemplateRef } from 'vue';\nimport { get, set } from '@vueuse/shared';\n\nexport interface UseAutoCompleteKeyboardNavigationOptions {\n  /** Whether multiple items can be selected. */\n  multiple: MaybeRefOrGetter<boolean>;\n  /** Whether custom (free-text) values are allowed. */\n  customValue: MaybeRefOrGetter<boolean>;\n  /** Whether selected values are displayed as chips. */\n  chips: MaybeRefOrGetter<boolean>;\n}\n\nexport interface UseAutoCompleteKeyboardNavigationDeps<TItem> {\n  internalSearch: Ref<string>;\n  value: Ref<TItem[]>;\n  filteredOptions: Ref<TItem[]>;\n  isOpen: Ref<boolean>;\n  highlightedIndex: Ref<number>;\n  userNavigated: Ref<boolean>;\n  searchInputFocused: Ref<boolean>;\n  applyHighlighted: () => void;\n  clear: () => void;\n  removeValue: (item: TItem) => void;\n  setSearchAsValue: () => void;\n  getText: (item: TItem) => string | undefined;\n  activator: Ref<HTMLElement | undefined> | TemplateRef<HTMLElement>;\n}\n\nexport interface UseAutoCompleteKeyboardNavigationReturn {\n  focusedValueIndex: Ref<number>;\n  moveSelectedValueHighlight: (event: KeyboardEvent, next: boolean) => void;\n  onEnter: (event: KeyboardEvent) => void;\n  onTab: (event: KeyboardEvent) => void;\n  onInputDeletePressed: () => void;\n  setValueFocus: (index: number) => void;\n}\n\nexport function useAutoCompleteKeyboardNavigation<TItem>(\n  options: UseAutoCompleteKeyboardNavigationOptions,\n  deps: UseAutoCompleteKeyboardNavigationDeps<TItem>,\n): UseAutoCompleteKeyboardNavigationReturn {\n  const focusedValueIndex = ref<number>(-1);\n\n  function setValueFocus(index: number): void {\n    set(focusedValueIndex, index);\n  }\n\n  function moveSelectedValueHighlight(event: KeyboardEvent, next: boolean): void {\n    const multiple = toValue(options.multiple);\n    const internalSearchValue = get(deps.internalSearch);\n\n    if (!multiple || internalSearchValue.length > 0)\n      return;\n\n    event.preventDefault();\n    const total = get(deps.value).length;\n\n    let current = get(focusedValueIndex);\n\n    if (current === -1) {\n      set(focusedValueIndex, next ? 0 : total - 1);\n      return;\n    }\n\n    const move = next ? 1 : -1;\n    current += move;\n\n    if (current < 0 || current >= total) {\n      set(focusedValueIndex, -1);\n      set(deps.searchInputFocused, true);\n    }\n    else {\n      set(focusedValueIndex, current);\n    }\n  }\n\n  function highlightedMatchesSearch(filteredOptions: TItem[], highlightedIndex: number, search: string): boolean {\n    if (highlightedIndex < 0 || highlightedIndex >= filteredOptions.length)\n      return false;\n\n    const option = filteredOptions[highlightedIndex];\n    if (typeof option === 'string')\n      return option === search;\n\n    if (option && typeof option === 'object')\n      return (deps.getText(option) ?? '') === search;\n\n    return false;\n  }\n\n  function applyCustomValue(event: KeyboardEvent, multiple: boolean): void {\n    deps.setSearchAsValue();\n    if (!multiple)\n      set(deps.isOpen, false);\n    event.preventDefault();\n  }\n\n  function submitClosestForm(): void {\n    const activator = get(deps.activator);\n    const form = activator?.closest('form');\n    form?.dispatchEvent(new Event('submit'));\n  }\n\n  function tryApplyHighlight(event: KeyboardEvent): boolean {\n    const filteredOptions = get(deps.filteredOptions);\n    const highlightedIndex = get(deps.highlightedIndex);\n    if (highlightedIndex <= -1 || filteredOptions.length === 0)\n      return false;\n\n    deps.applyHighlighted();\n    event.preventDefault();\n    return true;\n  }\n\n  function tryApplyCustom(event: KeyboardEvent, requireEmptyOptions: boolean): boolean {\n    const customValue = toValue(options.customValue);\n    const internalSearch = get(deps.internalSearch);\n    if (!customValue || !internalSearch)\n      return false;\n\n    const filteredOptions = get(deps.filteredOptions);\n    if (requireEmptyOptions) {\n      if (filteredOptions.length > 0)\n        return false;\n    }\n    else {\n      const highlightedIndex = get(deps.highlightedIndex);\n      if (highlightedMatchesSearch(filteredOptions, highlightedIndex, internalSearch))\n        return false;\n    }\n\n    applyCustomValue(event, toValue(options.multiple));\n    return true;\n  }\n\n  /**\n   * Enter with the menu open, which takes the option the user navigated to\n   * before anything the component highlighted on its own.\n   */\n  function handleOpenMenuEnter(event: KeyboardEvent): boolean {\n    if (get(deps.userNavigated) && tryApplyHighlight(event))\n      return true;\n\n    // Fall back to a typed custom value when it differs from the highlight.\n    if (tryApplyCustom(event, false))\n      return true;\n\n    // Use the (auto-)highlighted option if there is one.\n    if (tryApplyHighlight(event))\n      return true;\n\n    // No options matched but custom values are allowed — accept the typed text.\n    return tryApplyCustom(event, true);\n  }\n\n  function onEnter(event: KeyboardEvent): void {\n    if (get(deps.isOpen)) {\n      if (handleOpenMenuEnter(event))\n        return;\n\n      // Open with nothing to act on, so Enter is swallowed rather than submitting a surrounding form\n      event.preventDefault();\n      return;\n    }\n\n    // Nothing selected, menu closed: open menu\n    if (get(deps.value).length === 0) {\n      set(deps.isOpen, true);\n      return event.preventDefault();\n    }\n\n    // Menu closed with a value selected: let Enter submit the parent form.\n    submitClosestForm();\n  }\n\n  function onTab(event: KeyboardEvent): void {\n    const isOpen = get(deps.isOpen);\n    const filteredOptions = get(deps.filteredOptions);\n    const highlightedIndex = get(deps.highlightedIndex);\n    const multiple = toValue(options.multiple);\n\n    if (isOpen && filteredOptions.length > 0 && highlightedIndex > -1 && !multiple) {\n      deps.applyHighlighted();\n      event.preventDefault();\n    }\n  }\n\n  function onInputDeletePressed(): void {\n    const internalSearch = get(deps.internalSearch);\n    const value = get(deps.value);\n    const total = value.length;\n    const multiple = toValue(options.multiple);\n\n    if (!internalSearch && total > 0) {\n      if (multiple) {\n        if (toValue(options.chips)) {\n          set(focusedValueIndex, total - 1);\n        }\n        else {\n          const lastItem = value[total - 1];\n          if (lastItem !== undefined)\n            deps.removeValue(lastItem);\n        }\n      }\n      else {\n        deps.clear();\n      }\n    }\n  }\n\n  // Watch value changes to reset focused index\n  watch(deps.value, () => {\n    setValueFocus(-1);\n  });\n\n  // Watch focused value index to handle chip focus\n  watch(focusedValueIndex, async (index) => {\n    const multiple = toValue(options.multiple);\n    if (index === -1 || !multiple)\n      return;\n\n    await nextTick(() => {\n      const activator = get(deps.activator);\n      const element = activator?.querySelector<HTMLElement>(`[data-index=\"${index}\"]`);\n      element?.focus();\n    });\n  });\n\n  return {\n    // eslint-disable-next-line @rotki/composable-return-readonly -- written by focus.ts onInputFocused\n    focusedValueIndex,\n    moveSelectedValueHighlight,\n    onEnter,\n    onInputDeletePressed,\n    onTab,\n    setValueFocus,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"keyboard-navigation.js","names":[],"sources":["../../../../src/composables/forms/auto-complete/keyboard-navigation.ts"],"sourcesContent":["import type { MaybeRefOrGetter, Ref, TemplateRef } from 'vue';\nimport { get, set } from '@vueuse/shared';\n\nexport interface UseAutoCompleteKeyboardNavigationOptions {\n  /** Whether multiple items can be selected. */\n  multiple: MaybeRefOrGetter<boolean>;\n  /** Whether custom (free-text) values are allowed. */\n  customValue: MaybeRefOrGetter<boolean>;\n  /** Whether selected values are displayed as chips. */\n  chips: MaybeRefOrGetter<boolean>;\n}\n\nexport interface UseAutoCompleteKeyboardNavigationDeps<TItem> {\n  internalSearch: Ref<string>;\n  value: Ref<TItem[]>;\n  filteredOptions: Ref<TItem[]>;\n  isOpen: Ref<boolean>;\n  highlightedIndex: Ref<number>;\n  userNavigated: Ref<boolean>;\n  searchInputFocused: Ref<boolean>;\n  applyHighlighted: () => void;\n  clear: () => void;\n  removeValue: (item: TItem) => void;\n  setSearchAsValue: () => void;\n  getText: (item: TItem) => string | undefined;\n  updateInternalSearch: (value?: string) => void;\n  activator: Ref<HTMLElement | undefined> | TemplateRef<HTMLElement>;\n}\n\nexport interface UseAutoCompleteKeyboardNavigationReturn {\n  /**\n   * The selected value (a chip) that Backspace or Delete would remove, -1 for none. It is only\n   * drawn as selected: focus stays in the input, where no browser shortcut takes the key.\n   */\n  focusedValueIndex: Ref<number>;\n  moveSelectedValueHighlight: (event: KeyboardEvent, next: boolean) => void;\n  onEnter: (event: KeyboardEvent) => void;\n  onTab: (event: KeyboardEvent) => void;\n  onInputDeletePressed: (event: KeyboardEvent) => void;\n  /** Drops the value selection on any key that does not act on it. */\n  onInputKeydown: (event: KeyboardEvent) => void;\n  setValueFocus: (index: number) => void;\n}\n\nexport function useAutoCompleteKeyboardNavigation<TItem>(\n  options: UseAutoCompleteKeyboardNavigationOptions,\n  deps: UseAutoCompleteKeyboardNavigationDeps<TItem>,\n): UseAutoCompleteKeyboardNavigationReturn {\n  const focusedValueIndex = ref<number>(-1);\n\n  function setValueFocus(index: number): void {\n    set(focusedValueIndex, index);\n  }\n\n  function moveSelectedValueHighlight(event: KeyboardEvent, next: boolean): void {\n    const multiple = toValue(options.multiple);\n    const internalSearchValue = get(deps.internalSearch);\n\n    if (!multiple || internalSearchValue.length > 0)\n      return;\n\n    event.preventDefault();\n    const total = get(deps.value).length;\n\n    let current = get(focusedValueIndex);\n\n    if (current === -1) {\n      set(focusedValueIndex, next ? 0 : total - 1);\n      return;\n    }\n\n    const move = next ? 1 : -1;\n    current += move;\n\n    if (current < 0 || current >= total) {\n      set(focusedValueIndex, -1);\n      set(deps.searchInputFocused, true);\n    }\n    else {\n      set(focusedValueIndex, current);\n    }\n  }\n\n  function highlightedMatchesSearch(filteredOptions: TItem[], highlightedIndex: number, search: string): boolean {\n    if (highlightedIndex < 0 || highlightedIndex >= filteredOptions.length)\n      return false;\n\n    const option = filteredOptions[highlightedIndex];\n    if (typeof option === 'string')\n      return option === search;\n\n    if (option && typeof option === 'object')\n      return (deps.getText(option) ?? '') === search;\n\n    return false;\n  }\n\n  function applyCustomValue(event: KeyboardEvent, multiple: boolean): void {\n    deps.setSearchAsValue();\n    if (!multiple)\n      set(deps.isOpen, false);\n    event.preventDefault();\n  }\n\n  function submitClosestForm(): void {\n    const activator = get(deps.activator);\n    const form = activator?.closest('form');\n    form?.dispatchEvent(new Event('submit'));\n  }\n\n  function tryApplyHighlight(event: KeyboardEvent): boolean {\n    const filteredOptions = get(deps.filteredOptions);\n    const highlightedIndex = get(deps.highlightedIndex);\n    if (highlightedIndex <= -1 || filteredOptions.length === 0)\n      return false;\n\n    deps.applyHighlighted();\n    event.preventDefault();\n    return true;\n  }\n\n  function tryApplyCustom(event: KeyboardEvent, requireEmptyOptions: boolean): boolean {\n    const customValue = toValue(options.customValue);\n    const internalSearch = get(deps.internalSearch);\n    if (!customValue || !internalSearch)\n      return false;\n\n    const filteredOptions = get(deps.filteredOptions);\n    if (requireEmptyOptions) {\n      if (filteredOptions.length > 0)\n        return false;\n    }\n    else {\n      const highlightedIndex = get(deps.highlightedIndex);\n      if (highlightedMatchesSearch(filteredOptions, highlightedIndex, internalSearch))\n        return false;\n    }\n\n    applyCustomValue(event, toValue(options.multiple));\n    return true;\n  }\n\n  /**\n   * Enter with the menu open, which takes the option the user navigated to\n   * before anything the component highlighted on its own.\n   */\n  function handleOpenMenuEnter(event: KeyboardEvent): boolean {\n    if (get(deps.userNavigated) && tryApplyHighlight(event))\n      return true;\n\n    // Fall back to a typed custom value when it differs from the highlight.\n    if (tryApplyCustom(event, false))\n      return true;\n\n    // Use the (auto-)highlighted option if there is one.\n    if (tryApplyHighlight(event))\n      return true;\n\n    // No options matched but custom values are allowed — accept the typed text.\n    return tryApplyCustom(event, true);\n  }\n\n  function onEnter(event: KeyboardEvent): void {\n    if (get(deps.isOpen)) {\n      if (handleOpenMenuEnter(event))\n        return;\n\n      // Open with nothing to act on, so Enter is swallowed rather than submitting a surrounding form\n      event.preventDefault();\n      return;\n    }\n\n    // Nothing selected, menu closed: open menu\n    if (get(deps.value).length === 0) {\n      set(deps.isOpen, true);\n      return event.preventDefault();\n    }\n\n    // Menu closed with a value selected: let Enter submit the parent form.\n    submitClosestForm();\n  }\n\n  function onTab(event: KeyboardEvent): void {\n    const isOpen = get(deps.isOpen);\n    const filteredOptions = get(deps.filteredOptions);\n    const highlightedIndex = get(deps.highlightedIndex);\n    const multiple = toValue(options.multiple);\n\n    if (isOpen && filteredOptions.length > 0 && highlightedIndex > -1 && !multiple) {\n      deps.applyHighlighted();\n      event.preventDefault();\n    }\n  }\n\n  /**\n   * Removes the selected value. Alt with it, where custom values are accepted, puts the value's\n   * text back in the search instead of dropping it.\n   *\n   * @param event - the Backspace or Delete press\n   * @param item - the value the highlighted chip stands for\n   */\n  function removeSelectedValue(event: KeyboardEvent, item: TItem): void {\n    event.preventDefault();\n    set(focusedValueIndex, -1);\n    deps.removeValue(item);\n    if (event.altKey && toValue(options.customValue))\n      deps.updateInternalSearch(deps.getText(item) ?? '');\n  }\n\n  /** Backspace or Delete with nothing typed: steps onto the last value, or drops it outright. */\n  function deleteFromEmptySearch(value: TItem[]): void {\n    if (!toValue(options.multiple)) {\n      deps.clear();\n      return;\n    }\n    if (toValue(options.chips)) {\n      set(focusedValueIndex, value.length - 1);\n      return;\n    }\n    const lastItem = value.at(-1);\n    if (lastItem !== undefined)\n      deps.removeValue(lastItem);\n  }\n\n  function onInputDeletePressed(event: KeyboardEvent): void {\n    const value = get(deps.value);\n    const selected = value[get(focusedValueIndex)];\n    if (selected !== undefined) {\n      removeSelectedValue(event, selected);\n      return;\n    }\n\n    if (!get(deps.internalSearch) && value.length > 0)\n      deleteFromEmptySearch(value);\n  }\n\n  function onInputKeydown(event: KeyboardEvent): void {\n    if (get(focusedValueIndex) === -1)\n      return;\n    // a modifier pressed on its own (the Alt of Alt + Backspace) keeps the selection for the key it modifies\n    const keepsSelection = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Alt', 'AltGraph', 'Control', 'Meta', 'Shift'].includes(event.key);\n    if (!keepsSelection)\n      set(focusedValueIndex, -1);\n  }\n\n  // Watch value changes to reset focused index\n  watch(deps.value, () => {\n    setValueFocus(-1);\n  });\n\n  return {\n    // eslint-disable-next-line @rotki/composable-return-readonly -- written by focus.ts onInputFocused\n    focusedValueIndex,\n    moveSelectedValueHighlight,\n    onEnter,\n    onInputDeletePressed,\n    onInputKeydown,\n    onTab,\n    setValueFocus,\n  };\n}\n"],"mappings":"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"}

package/dist/composables/forms/auto-complete/selection.d.ts

@@ -0,0 +1,37 @@
+import type { ComputedRef, Ref } from 'vue';
+export interface UseAutoCompleteSelectionDeps<TItem> {
+    value: Ref<TItem[]>;
+    multiple: ComputedRef<boolean>;
+    /** Whether a single pick shows its text in the input, rather than a slot or chip drawing it. */
+    shouldApplyValueAsSearch: ComputedRef<boolean>;
+    isOpen: Ref<boolean>;
+    searchInputFocused: Ref<boolean>;
+    internalSearch: Ref<string>;
+    /** The item's place in the selection, -1 when it is not picked. */
+    itemIndexInValue: (item: TItem) => number;
+    getText: (item: TItem) => string | undefined;
+    textValueToProperValue: (text: string) => TItem;
+    updateInternalSearch: (value?: string) => void;
+    /** Keeps focus on the input after a pick, showing the value rather than an empty search. */
+    settleOnInput: () => void;
+    /** Empties the model: an empty list when several values are picked, undefined otherwise. */
+    resetModel: () => void;
+}
+export interface UseAutoCompleteSelectionReturn<TItem> {
+    /**
+     * Picks an item, or drops it when several values are picked and it already is one.
+     * `skipRefocused` leaves focus where it is, for a value set from typed text.
+     */
+    setValue: (item: TItem, skipRefocused?: boolean) => Promise<void>;
+    /** Turns the typed search into a value, where custom values are accepted. */
+    setSearchAsValue: () => void;
+    clear: () => void;
+}
+/**
+ * The changes to the auto-complete's selection: picking or dropping an item, taking the typed text
+ * as a value, and clearing, with the search and focus that follow each.
+ *
+ * @param deps - the selection state and the operations it calls
+ * @returns the selection operations
+ */
+export declare function useAutoCompleteSelection<TItem>(deps: UseAutoCompleteSelectionDeps<TItem>): UseAutoCompleteSelectionReturn<TItem>;

package/dist/composables/forms/auto-complete/selection.js

@@ -0,0 +1,60 @@
+import { nextTick } from "vue";
+import { get, set } from "@vueuse/shared";
+//#region src/composables/forms/auto-complete/selection.ts
+/**
+* The changes to the auto-complete's selection: picking or dropping an item, taking the typed text
+* as a value, and clearing, with the search and focus that follow each.
+*
+* @param deps - the selection state and the operations it calls
+* @returns the selection operations
+*/
+function useAutoCompleteSelection(deps) {
+	function toggleInSelection(item) {
+		const newValue = [...get(deps.value)];
+		const indexInValue = deps.itemIndexInValue(item);
+		if (indexInValue === -1) {
+			deps.updateInternalSearch();
+			newValue.push(item);
+		} else newValue.splice(indexInValue, 1);
+		set(deps.value, newValue);
+	}
+	function replaceSelection(item) {
+		if (get(deps.shouldApplyValueAsSearch)) deps.updateInternalSearch(deps.getText(item));
+		else deps.updateInternalSearch();
+		set(deps.value, [item]);
+	}
+	async function setValue(item, skipRefocused = false) {
+		if (get(deps.multiple)) {
+			toggleInSelection(item);
+			if (!skipRefocused) set(deps.searchInputFocused, true);
+			return;
+		}
+		replaceSelection(item);
+		if (skipRefocused) {
+			set(deps.isOpen, false);
+			return;
+		}
+		deps.settleOnInput();
+		await nextTick(() => {
+			set(deps.isOpen, false);
+		});
+	}
+	function setSearchAsValue() {
+		const searchToBeValue = get(deps.internalSearch);
+		if (!searchToBeValue) return;
+		setValue(deps.textValueToProperValue(searchToBeValue), true);
+	}
+	function clear() {
+		deps.updateInternalSearch();
+		deps.resetModel();
+	}
+	return {
+		clear,
+		setSearchAsValue,
+		setValue
+	};
+}
+//#endregion
+export { useAutoCompleteSelection };
+
+//# sourceMappingURL=selection.js.map

package/dist/composables/forms/auto-complete/selection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection.js","names":[],"sources":["../../../../src/composables/forms/auto-complete/selection.ts"],"sourcesContent":["import type { ComputedRef, Ref } from 'vue';\n\nexport interface UseAutoCompleteSelectionDeps<TItem> {\n  value: Ref<TItem[]>;\n  multiple: ComputedRef<boolean>;\n  /** Whether a single pick shows its text in the input, rather than a slot or chip drawing it. */\n  shouldApplyValueAsSearch: ComputedRef<boolean>;\n  isOpen: Ref<boolean>;\n  searchInputFocused: Ref<boolean>;\n  internalSearch: Ref<string>;\n  /** The item's place in the selection, -1 when it is not picked. */\n  itemIndexInValue: (item: TItem) => number;\n  getText: (item: TItem) => string | undefined;\n  textValueToProperValue: (text: string) => TItem;\n  updateInternalSearch: (value?: string) => void;\n  /** Keeps focus on the input after a pick, showing the value rather than an empty search. */\n  settleOnInput: () => void;\n  /** Empties the model: an empty list when several values are picked, undefined otherwise. */\n  resetModel: () => void;\n}\n\nexport interface UseAutoCompleteSelectionReturn<TItem> {\n  /**\n   * Picks an item, or drops it when several values are picked and it already is one.\n   * `skipRefocused` leaves focus where it is, for a value set from typed text.\n   */\n  setValue: (item: TItem, skipRefocused?: boolean) => Promise<void>;\n  /** Turns the typed search into a value, where custom values are accepted. */\n  setSearchAsValue: () => void;\n  clear: () => void;\n}\n\n/**\n * The changes to the auto-complete's selection: picking or dropping an item, taking the typed text\n * as a value, and clearing, with the search and focus that follow each.\n *\n * @param deps - the selection state and the operations it calls\n * @returns the selection operations\n */\nexport function useAutoCompleteSelection<TItem>(deps: UseAutoCompleteSelectionDeps<TItem>): UseAutoCompleteSelectionReturn<TItem> {\n  function toggleInSelection(item: TItem): void {\n    const newValue = [...get(deps.value)];\n    const indexInValue = deps.itemIndexInValue(item);\n    if (indexInValue === -1) {\n      deps.updateInternalSearch();\n      newValue.push(item);\n    }\n    else {\n      newValue.splice(indexInValue, 1);\n    }\n    set(deps.value, newValue);\n  }\n\n  function replaceSelection(item: TItem): void {\n    if (get(deps.shouldApplyValueAsSearch))\n      deps.updateInternalSearch(deps.getText(item));\n    else deps.updateInternalSearch();\n    set(deps.value, [item]);\n  }\n\n  async function setValue(item: TItem, skipRefocused = false): Promise<void> {\n    if (get(deps.multiple)) {\n      toggleInSelection(item);\n      if (!skipRefocused)\n        set(deps.searchInputFocused, true);\n      return;\n    }\n\n    replaceSelection(item);\n    if (skipRefocused) {\n      set(deps.isOpen, false);\n      return;\n    }\n    // focus stays on the combobox, which keeps showing the value just picked\n    deps.settleOnInput();\n    await nextTick(() => {\n      set(deps.isOpen, false);\n    });\n  }\n\n  function setSearchAsValue(): void {\n    const searchToBeValue = get(deps.internalSearch);\n    if (!searchToBeValue)\n      return;\n\n    setValue(deps.textValueToProperValue(searchToBeValue), true);\n  }\n\n  function clear(): void {\n    deps.updateInternalSearch();\n    deps.resetModel();\n  }\n\n  return { clear, setSearchAsValue, setValue };\n}\n"],"mappings":";;;;;;;;;;AAuCA,SAAgB,yBAAgC,MAAkF;CAChI,SAAS,kBAAkB,MAAmB;EAC5C,MAAM,WAAW,CAAC,GAAG,IAAI,KAAK,KAAK,CAAC;EACpC,MAAM,eAAe,KAAK,iBAAiB,IAAI;EAC/C,IAAI,iBAAiB,IAAI;GACvB,KAAK,qBAAqB;GAC1B,SAAS,KAAK,IAAI;EACpB,OAEE,SAAS,OAAO,cAAc,CAAC;EAEjC,IAAI,KAAK,OAAO,QAAQ;CAC1B;CAEA,SAAS,iBAAiB,MAAmB;EAC3C,IAAI,IAAI,KAAK,wBAAwB,GACnC,KAAK,qBAAqB,KAAK,QAAQ,IAAI,CAAC;OACzC,KAAK,qBAAqB;EAC/B,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC;CACxB;CAEA,eAAe,SAAS,MAAa,gBAAgB,OAAsB;EACzE,IAAI,IAAI,KAAK,QAAQ,GAAG;GACtB,kBAAkB,IAAI;GACtB,IAAI,CAAC,eACH,IAAI,KAAK,oBAAoB,IAAI;GACnC;EACF;EAEA,iBAAiB,IAAI;EACrB,IAAI,eAAe;GACjB,IAAI,KAAK,QAAQ,KAAK;GACtB;EACF;EAEA,KAAK,cAAc;EACnB,MAAM,eAAe;GACnB,IAAI,KAAK,QAAQ,KAAK;EACxB,CAAC;CACH;CAEA,SAAS,mBAAyB;EAChC,MAAM,kBAAkB,IAAI,KAAK,cAAc;EAC/C,IAAI,CAAC,iBACH;EAEF,SAAS,KAAK,uBAAuB,eAAe,GAAG,IAAI;CAC7D;CAEA,SAAS,QAAc;EACrB,KAAK,qBAAqB;EAC1B,KAAK,WAAW;CAClB;CAEA,OAAO;EAAE;EAAO;EAAkB;CAAS;AAC7C"}

package/dist/composables/forms/auto-complete/value.js

@@ -1,4 +1,5 @@
 import { assert } from "../../../utils/assert.js";
+import { isEqual } from "../../../utils/is-equal.js";
 import { computed, toValue, watch } from "vue";
 import { get, set } from "@vueuse/shared";
 //#region src/composables/forms/auto-complete/value.ts
@@ -71,6 +72,24 @@ function useAutoCompleteValue(modelValue, options, opts, deps) {
 			deps.updateInternalSearch(deps.getText(firstItem));
 		}
 	}, { immediate: true });
+	/**
+	* Reconciles the selection against a new set of options, comparing by
+	* reference before by value so an unchanged list costs nothing.
+	*
+	* Only a selection the previous options could resolve is reconciled: a value
+	* that was already unresolvable is one the consumer set before its options
+	* arrived, since an async list starts empty, and clearing it here would
+	* discard a legitimate value.
+	*
+	* @param curr - the new options
+	* @param old - the options before them
+	*/
+	function onOptionsChanged(curr, old) {
+		if (curr === old || toValue(opts.customValue) || isEqual(curr, old)) return;
+		if (!toValue(deps.multiple) && resolveIn(old).length === 0) return;
+		setSelected(get(value));
+	}
+	watch(() => toValue(options), onOptionsChanged);
 	return {
 		resolveIn,
 		setSelected,

package/dist/composables/forms/auto-complete/value.js.map

@@ -1 +1 @@
-{"version":3,"file":"value.js","names":[],"sources":["../../../../src/composables/forms/auto-complete/value.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';\nimport { get, set } from '@vueuse/shared';\nimport { assert } from '@/utils/assert';\n\nexport interface UseAutoCompleteValueOptions<TItem> {\n  /** The property used as the unique identifier for each item. */\n  keyAttr?: MaybeRefOrGetter<keyof TItem | undefined>;\n  /** Whether to return the full item object instead of just the key. */\n  returnObject?: MaybeRefOrGetter<boolean>;\n  /** Whether custom (free-text) values are allowed. */\n  customValue?: MaybeRefOrGetter<boolean>;\n}\n\nexport interface UseAutoCompleteValueReturn<TItem> {\n  value: ComputedRef<TItem[]>;\n  setSelected: (selected: TItem[]) => void;\n  /** Resolves the current model value against an arbitrary options list. */\n  resolveIn: (options: TItem[]) => TItem[];\n}\n\nexport interface UseAutoCompleteValueDeps<TItem> {\n  getIdentifier: (item: TItem) => any;\n  getText: (item: TItem) => string | undefined;\n  textValueToProperValue: (val: any, returnObject?: boolean) => TItem;\n  shouldApplyValueAsSearch: MaybeRefOrGetter<boolean>;\n  isOpen: MaybeRefOrGetter<boolean>;\n  multiple: MaybeRefOrGetter<boolean>;\n  updateInternalSearch: (value?: string) => void;\n}\n\nexport function useAutoCompleteValue<TValue, TItem>(\n  modelValue: Ref<TValue | undefined>,\n  options: MaybeRefOrGetter<TItem[]>,\n  opts: UseAutoCompleteValueOptions<TItem>,\n  deps: UseAutoCompleteValueDeps<TItem>,\n): UseAutoCompleteValueReturn<TItem> {\n  function buildOptionsMap(optionsData: TItem[]): Map<any, TItem> {\n    const map = new Map<any, TItem>();\n    for (const item of optionsData) {\n      map.set(deps.getIdentifier(item), item);\n    }\n    return map;\n  }\n\n  // Create maps for O(1) lookup performance\n  const optionsMap = computed<Map<any, TItem>>(() => buildOptionsMap(toValue(options)));\n\n  function convertModelValueToArray(modelValueData: TValue | undefined): any[] {\n    if (modelValueData === null || modelValueData === undefined)\n      return [];\n    return Array.isArray(modelValueData) ? modelValueData : [modelValueData];\n  }\n\n  function filterValues(\n    valueArray: any[],\n    optionsMapData: Map<any, TItem>,\n    customValue: boolean,\n    returnObject: boolean,\n    getKey: (val: any) => any,\n  ): TItem[] {\n    const filtered: TItem[] = [];\n    for (const val of valueArray) {\n      const inOptions = optionsMapData.get(getKey(val));\n      if (inOptions !== undefined)\n        filtered.push(inOptions);\n      else if (customValue)\n        filtered.push(deps.textValueToProperValue(val, returnObject));\n    }\n    return filtered;\n  }\n\n  function processReturnObjectValue(\n    modelValueData: TValue | undefined,\n    optionsMapData: Map<any, TItem>,\n    returnObject: boolean,\n    customValue: boolean,\n  ): TItem[] {\n    const multipleValue = Array.isArray(modelValueData);\n    const valueArray = convertModelValueToArray(modelValueData);\n    const filtered = filterValues(valueArray, optionsMapData, customValue, returnObject, val => deps.getIdentifier(val));\n\n    if (multipleValue || filtered.length === 0)\n      return filtered;\n\n    const val = filtered[0];\n    assert(val !== undefined && val !== null);\n    return [val];\n  }\n\n  function processStandardValue(\n    modelValueData: TValue | undefined,\n    optionsMapData: Map<any, TItem>,\n    returnObject: boolean,\n    customValue: boolean,\n  ): TItem[] {\n    const valueArray = convertModelValueToArray(modelValueData);\n    return filterValues(valueArray, optionsMapData, customValue, returnObject, val => val);\n  }\n\n  function onUpdateModelValue(value: TValue | undefined): void {\n    set(modelValue, value);\n  }\n\n  function setSelected(selected: TItem[]): void {\n    const keyAttr = toValue(opts.keyAttr);\n    const returnObject = toValue(opts.returnObject);\n    const selection = keyAttr && !returnObject ? selected.map(item => item[keyAttr]) : selected;\n\n    if (toValue(deps.multiple))\n      return onUpdateModelValue(selection as TValue);\n\n    if (selection.length === 0)\n      return onUpdateModelValue(undefined);\n\n    return onUpdateModelValue(selection[0] as TValue);\n  }\n\n  function resolveAgainst(optionsMapData: Map<any, TItem>): TItem[] {\n    const modelValueData = get(modelValue);\n    const keyAttr = toValue(opts.keyAttr);\n    const returnObject = toValue(opts.returnObject) ?? false;\n    const customValue = toValue(opts.customValue) ?? false;\n\n    if (keyAttr && returnObject)\n      return processReturnObjectValue(modelValueData, optionsMapData, returnObject, customValue);\n\n    return processStandardValue(modelValueData, optionsMapData, returnObject, customValue);\n  }\n\n  function resolveIn(optionsData: TItem[]): TItem[] {\n    return resolveAgainst(buildOptionsMap(optionsData));\n  }\n\n  const value = computed<TItem[]>({\n    get: () => resolveAgainst(get(optionsMap)),\n    set: (selected: TItem[]): void => {\n      setSelected(selected);\n    },\n  });\n\n  // Watches `value` rather than `modelValue`, so the search text resyncs once late `options` resolve it\n  watch([value, () => toValue(deps.isOpen)], () => {\n    if (toValue(deps.isOpen) || !toValue(deps.shouldApplyValueAsSearch))\n      return;\n\n    const currentValue = get(value);\n    if (toValue(deps.multiple) || currentValue.length === 0) {\n      deps.updateInternalSearch();\n    }\n    else {\n      const firstItem = currentValue[0];\n      assert(firstItem !== undefined && firstItem !== null);\n      deps.updateInternalSearch(deps.getText(firstItem));\n    }\n  }, { immediate: true });\n\n  return {\n    resolveIn,\n    setSelected,\n    value,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"value.js","names":[],"sources":["../../../../src/composables/forms/auto-complete/value.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';\nimport { get, set } from '@vueuse/shared';\nimport { assert } from '@/utils/assert';\nimport { isEqual } from '@/utils/is-equal';\n\nexport interface UseAutoCompleteValueOptions<TItem> {\n  /** The property used as the unique identifier for each item. */\n  keyAttr?: MaybeRefOrGetter<keyof TItem | undefined>;\n  /** Whether to return the full item object instead of just the key. */\n  returnObject?: MaybeRefOrGetter<boolean>;\n  /** Whether custom (free-text) values are allowed. */\n  customValue?: MaybeRefOrGetter<boolean>;\n}\n\nexport interface UseAutoCompleteValueReturn<TItem> {\n  value: ComputedRef<TItem[]>;\n  setSelected: (selected: TItem[]) => void;\n  /** Resolves the current model value against an arbitrary options list. */\n  resolveIn: (options: TItem[]) => TItem[];\n}\n\nexport interface UseAutoCompleteValueDeps<TItem> {\n  getIdentifier: (item: TItem) => any;\n  getText: (item: TItem) => string | undefined;\n  textValueToProperValue: (val: any, returnObject?: boolean) => TItem;\n  shouldApplyValueAsSearch: MaybeRefOrGetter<boolean>;\n  isOpen: MaybeRefOrGetter<boolean>;\n  multiple: MaybeRefOrGetter<boolean>;\n  updateInternalSearch: (value?: string) => void;\n}\n\nexport function useAutoCompleteValue<TValue, TItem>(\n  modelValue: Ref<TValue | undefined>,\n  options: MaybeRefOrGetter<TItem[]>,\n  opts: UseAutoCompleteValueOptions<TItem>,\n  deps: UseAutoCompleteValueDeps<TItem>,\n): UseAutoCompleteValueReturn<TItem> {\n  function buildOptionsMap(optionsData: TItem[]): Map<any, TItem> {\n    const map = new Map<any, TItem>();\n    for (const item of optionsData) {\n      map.set(deps.getIdentifier(item), item);\n    }\n    return map;\n  }\n\n  // Create maps for O(1) lookup performance\n  const optionsMap = computed<Map<any, TItem>>(() => buildOptionsMap(toValue(options)));\n\n  function convertModelValueToArray(modelValueData: TValue | undefined): any[] {\n    if (modelValueData === null || modelValueData === undefined)\n      return [];\n    return Array.isArray(modelValueData) ? modelValueData : [modelValueData];\n  }\n\n  function filterValues(\n    valueArray: any[],\n    optionsMapData: Map<any, TItem>,\n    customValue: boolean,\n    returnObject: boolean,\n    getKey: (val: any) => any,\n  ): TItem[] {\n    const filtered: TItem[] = [];\n    for (const val of valueArray) {\n      const inOptions = optionsMapData.get(getKey(val));\n      if (inOptions !== undefined)\n        filtered.push(inOptions);\n      else if (customValue)\n        filtered.push(deps.textValueToProperValue(val, returnObject));\n    }\n    return filtered;\n  }\n\n  function processReturnObjectValue(\n    modelValueData: TValue | undefined,\n    optionsMapData: Map<any, TItem>,\n    returnObject: boolean,\n    customValue: boolean,\n  ): TItem[] {\n    const multipleValue = Array.isArray(modelValueData);\n    const valueArray = convertModelValueToArray(modelValueData);\n    const filtered = filterValues(valueArray, optionsMapData, customValue, returnObject, val => deps.getIdentifier(val));\n\n    if (multipleValue || filtered.length === 0)\n      return filtered;\n\n    const val = filtered[0];\n    assert(val !== undefined && val !== null);\n    return [val];\n  }\n\n  function processStandardValue(\n    modelValueData: TValue | undefined,\n    optionsMapData: Map<any, TItem>,\n    returnObject: boolean,\n    customValue: boolean,\n  ): TItem[] {\n    const valueArray = convertModelValueToArray(modelValueData);\n    return filterValues(valueArray, optionsMapData, customValue, returnObject, val => val);\n  }\n\n  function onUpdateModelValue(value: TValue | undefined): void {\n    set(modelValue, value);\n  }\n\n  function setSelected(selected: TItem[]): void {\n    const keyAttr = toValue(opts.keyAttr);\n    const returnObject = toValue(opts.returnObject);\n    const selection = keyAttr && !returnObject ? selected.map(item => item[keyAttr]) : selected;\n\n    if (toValue(deps.multiple))\n      return onUpdateModelValue(selection as TValue);\n\n    if (selection.length === 0)\n      return onUpdateModelValue(undefined);\n\n    return onUpdateModelValue(selection[0] as TValue);\n  }\n\n  function resolveAgainst(optionsMapData: Map<any, TItem>): TItem[] {\n    const modelValueData = get(modelValue);\n    const keyAttr = toValue(opts.keyAttr);\n    const returnObject = toValue(opts.returnObject) ?? false;\n    const customValue = toValue(opts.customValue) ?? false;\n\n    if (keyAttr && returnObject)\n      return processReturnObjectValue(modelValueData, optionsMapData, returnObject, customValue);\n\n    return processStandardValue(modelValueData, optionsMapData, returnObject, customValue);\n  }\n\n  function resolveIn(optionsData: TItem[]): TItem[] {\n    return resolveAgainst(buildOptionsMap(optionsData));\n  }\n\n  const value = computed<TItem[]>({\n    get: () => resolveAgainst(get(optionsMap)),\n    set: (selected: TItem[]): void => {\n      setSelected(selected);\n    },\n  });\n\n  // Watches `value` rather than `modelValue`, so the search text resyncs once late `options` resolve it\n  watch([value, () => toValue(deps.isOpen)], () => {\n    if (toValue(deps.isOpen) || !toValue(deps.shouldApplyValueAsSearch))\n      return;\n\n    const currentValue = get(value);\n    if (toValue(deps.multiple) || currentValue.length === 0) {\n      deps.updateInternalSearch();\n    }\n    else {\n      const firstItem = currentValue[0];\n      assert(firstItem !== undefined && firstItem !== null);\n      deps.updateInternalSearch(deps.getText(firstItem));\n    }\n  }, { immediate: true });\n\n  /**\n   * Reconciles the selection against a new set of options, comparing by\n   * reference before by value so an unchanged list costs nothing.\n   *\n   * Only a selection the previous options could resolve is reconciled: a value\n   * that was already unresolvable is one the consumer set before its options\n   * arrived, since an async list starts empty, and clearing it here would\n   * discard a legitimate value.\n   *\n   * @param curr - the new options\n   * @param old - the options before them\n   */\n  function onOptionsChanged(curr: TItem[], old: TItem[]): void {\n    if (curr === old || toValue(opts.customValue) || isEqual(curr, old))\n      return;\n\n    if (!toValue(deps.multiple) && resolveIn(old).length === 0)\n      return;\n\n    setSelected(get(value));\n  }\n\n  watch(() => toValue(options), onOptionsChanged);\n\n  return {\n    resolveIn,\n    setSelected,\n    value,\n  };\n}\n"],"mappings":"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"}

package/dist/composables/keyboard-scroll.d.ts

@@ -0,0 +1,17 @@
+import type { ComputedRef, Ref } from 'vue';
+/**
+ * Whether a box scrolls while holding nothing a keyboard user can reach, the case WCAG 2.1.1 and
+ * axe's scrollable-region-focusable rule cover: the arrow keys only scroll what has focus.
+ *
+ * @param element - the scrolling box
+ * @returns true when the box overflows and has no focusable content
+ */
+export declare function needsOwnFocus(element: HTMLElement): boolean;
+/**
+ * Makes a scrolling box a tab stop while, and only while, it overflows with nothing focusable
+ * inside, so keyboard users can scroll it without a stray tab stop on every box that fits.
+ *
+ * @param target - the scrolling box
+ * @returns the `tabindex` to bind on the box: 0 when it needs focus, otherwise undefined
+ */
+export declare function useKeyboardScroll(target: Readonly<Ref<HTMLElement | null | undefined>>): ComputedRef<0 | undefined>;

package/dist/composables/keyboard-scroll.js

@@ -0,0 +1,58 @@
+import { computed, onMounted, shallowRef } from "vue";
+import { useMutationObserver, useResizeObserver } from "@vueuse/core";
+import { get as get$1, set as set$1 } from "@vueuse/shared";
+//#region src/composables/keyboard-scroll.ts
+/** What a keyboard user can tab to inside a scrolling box, and so scroll it by. */
+var FOCUSABLE = [
+	"a[href]",
+	"button:not([disabled])",
+	"input:not([disabled]):not([type=hidden])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"[tabindex]:not([tabindex=\"-1\"])"
+].join(",");
+/**
+* Whether a box scrolls while holding nothing a keyboard user can reach, the case WCAG 2.1.1 and
+* axe's scrollable-region-focusable rule cover: the arrow keys only scroll what has focus.
+*
+* @param element - the scrolling box
+* @returns true when the box overflows and has no focusable content
+*/
+function needsOwnFocus(element) {
+	return (element.scrollWidth > element.clientWidth + 1 || element.scrollHeight > element.clientHeight + 1) && element.querySelector(FOCUSABLE) === null;
+}
+/**
+* Makes a scrolling box a tab stop while, and only while, it overflows with nothing focusable
+* inside, so keyboard users can scroll it without a stray tab stop on every box that fits.
+*
+* @param target - the scrolling box
+* @returns the `tabindex` to bind on the box: 0 when it needs focus, otherwise undefined
+*/
+function useKeyboardScroll(target) {
+	const focusable = shallowRef(false);
+	let scheduled = false;
+	function update() {
+		scheduled = false;
+		const element = get$1(target);
+		set$1(focusable, element ? needsOwnFocus(element) : false);
+	}
+	/** Reading the scroll sizes forces layout, so a burst of resizes and mutations is checked once a frame. */
+	function schedule() {
+		if (scheduled) return;
+		scheduled = true;
+		requestAnimationFrame(update);
+	}
+	onMounted(update);
+	useResizeObserver(target, schedule);
+	useMutationObserver(target, schedule, {
+		childList: true,
+		subtree: true,
+		attributes: true,
+		attributeFilter: ["disabled", "tabindex"]
+	});
+	return computed(() => get$1(focusable) ? 0 : void 0);
+}
+//#endregion
+export { needsOwnFocus, useKeyboardScroll };
+
+//# sourceMappingURL=keyboard-scroll.js.map

package/dist/composables/keyboard-scroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard-scroll.js","names":[],"sources":["../../src/composables/keyboard-scroll.ts"],"sourcesContent":["import type { ComputedRef, Ref } from 'vue';\nimport { useMutationObserver, useResizeObserver } from '@vueuse/core';\n\n/** What a keyboard user can tab to inside a scrolling box, and so scroll it by. */\nconst FOCUSABLE = [\n  'a[href]',\n  'button:not([disabled])',\n  'input:not([disabled]):not([type=hidden])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]:not([tabindex=\"-1\"])',\n].join(',');\n\n/**\n * Whether a box scrolls while holding nothing a keyboard user can reach, the case WCAG 2.1.1 and\n * axe's scrollable-region-focusable rule cover: the arrow keys only scroll what has focus.\n *\n * @param element - the scrolling box\n * @returns true when the box overflows and has no focusable content\n */\nexport function needsOwnFocus(element: HTMLElement): boolean {\n  const overflows = element.scrollWidth > element.clientWidth + 1 || element.scrollHeight > element.clientHeight + 1;\n  return overflows && element.querySelector(FOCUSABLE) === null;\n}\n\n/**\n * Makes a scrolling box a tab stop while, and only while, it overflows with nothing focusable\n * inside, so keyboard users can scroll it without a stray tab stop on every box that fits.\n *\n * @param target - the scrolling box\n * @returns the `tabindex` to bind on the box: 0 when it needs focus, otherwise undefined\n */\nexport function useKeyboardScroll(target: Readonly<Ref<HTMLElement | null | undefined>>): ComputedRef<0 | undefined> {\n  const focusable = shallowRef<boolean>(false);\n  let scheduled = false;\n\n  function update(): void {\n    scheduled = false;\n    const element = get(target);\n    set(focusable, element ? needsOwnFocus(element) : false);\n  }\n\n  /** Reading the scroll sizes forces layout, so a burst of resizes and mutations is checked once a frame. */\n  function schedule(): void {\n    if (scheduled)\n      return;\n    scheduled = true;\n    requestAnimationFrame(update);\n  }\n\n  // the first check runs at mount, so the box is reachable from its first render, not a frame later\n  onMounted(update);\n  useResizeObserver(target, schedule);\n  // the box keeps its size while its content grows or swaps, which changes whether it overflows\n  useMutationObserver(target, schedule, { childList: true, subtree: true, attributes: true, attributeFilter: ['disabled', 'tabindex'] });\n\n  return computed<0 | undefined>(() => (get(focusable) ? 0 : undefined));\n}\n"],"mappings":";;;;;AAIA,IAAM,YAAY;CAChB;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;;;;;;;;AASV,SAAgB,cAAc,SAA+B;CAE3D,QADkB,QAAQ,cAAc,QAAQ,cAAc,KAAK,QAAQ,eAAe,QAAQ,eAAe,MAC7F,QAAQ,cAAc,SAAS,MAAM;AAC3D;;;;;;;;AASA,SAAgB,kBAAkB,QAAmF;CACnH,MAAM,YAAY,WAAoB,KAAK;CAC3C,IAAI,YAAY;CAEhB,SAAS,SAAe;EACtB,YAAY;EACZ,MAAM,UAAU,MAAI,MAAM;EAC1B,MAAI,WAAW,UAAU,cAAc,OAAO,IAAI,KAAK;CACzD;;CAGA,SAAS,WAAiB;EACxB,IAAI,WACF;EACF,YAAY;EACZ,sBAAsB,MAAM;CAC9B;CAGA,UAAU,MAAM;CAChB,kBAAkB,QAAQ,QAAQ;CAElC,oBAAoB,QAAQ,UAAU;EAAE,WAAW;EAAM,SAAS;EAAM,YAAY;EAAM,iBAAiB,CAAC,YAAY,UAAU;CAAE,CAAC;CAErI,OAAO,eAA+B,MAAI,SAAS,IAAI,IAAI,KAAA,CAAU;AACvE"}

package/dist/composables/sticky-header.d.ts

@@ -5,6 +5,14 @@ export interface UseStickyTableHeaderRefs {
 interface UseStickyTableHeaderReturn {
     stick: Readonly<Ref<boolean>>;
 }
+/**
+ * Whether an element becomes the containing block of its `position: fixed`
+ * descendants. The individual `translate`, `rotate` and `scale` properties
+ * count like `transform`: Tailwind 4 writes its translate utilities to
+ * `translate`, so a dialog centred with `-translate-x-1/2` leaves `transform`
+ * at `none`.
+ */
+export declare function createsFixedContainingBlock(style: CSSStyleDeclaration): boolean;
 /**
  * Setup sticky table header
  */

package/dist/composables/sticky-header.js

@@ -50,8 +50,18 @@ function findScrollParent(element) {
 		parent = parent.parentElement;
 	}
 }
+function isSet(value) {
+	return value !== void 0 && value !== "" && value !== "none";
+}
+/**
+* Whether an element becomes the containing block of its `position: fixed`
+* descendants. The individual `translate`, `rotate` and `scale` properties
+* count like `transform`: Tailwind 4 writes its translate utilities to
+* `translate`, so a dialog centred with `-translate-x-1/2` leaves `transform`
+* at `none`.
+*/
 function createsFixedContainingBlock(style) {
-	return style.transform !== "none" || style.perspective !== "none" || style.filter !== "none" || style.backdropFilter !== void 0 && style.backdropFilter !== "none" || /transform|perspective|filter/.test(style.willChange) || /paint|layout|strict|content/.test(style.contain);
+	return isSet(style.transform) || isSet(style.translate) || isSet(style.rotate) || isSet(style.scale) || isSet(style.perspective) || isSet(style.filter) || isSet(style.backdropFilter) || /transform|translate|rotate|scale|perspective|filter/.test(style.willChange) || /paint|layout|strict|content/.test(style.contain);
 }
 /**
 * Where a `position: fixed` descendant's `top: 0; left: 0` lands in the viewport. That is the
@@ -101,6 +111,7 @@ function useStickyTableHeader(sticky = shallowRef(false), offsetTop, tableRefs)
 		syncRafId = requestAnimationFrame(() => {
 			syncRafId = null;
 			applyColumnWidths(mainColumns, readColumnWidths(cloneColumns));
+			toggleStickyClass();
 		});
 	}
 	function observeColumnResizes(cloneColumns, mainColumns) {
@@ -195,6 +206,6 @@ function useStickyTableHeader(sticky = shallowRef(false), offsetTop, tableRefs)
 	return { stick: readonly(stick) };
 }
 //#endregion
-export { useStickyTableHeader };
+export { createsFixedContainingBlock, useStickyTableHeader };
 
 //# sourceMappingURL=sticky-header.js.map