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

package/dist/composables/defaults/field.d.ts

@@ -0,0 +1,22 @@
+import type { ComputedRef, InjectionKey, MaybeRef, MaybeRefOrGetter } from 'vue';
+/**
+ * Where a field shows its label.
+ *
+ * - `top`: a label above a bordered field (the default).
+ * - `hidden`: no visible label; the label is still announced to screen readers.
+ *   For search and filter fields whose placeholder and icon say what they are.
+ */
+export type LabelPlacement = 'top' | 'hidden';
+export interface FieldOptions {
+    labelPlacement: MaybeRef<LabelPlacement>;
+}
+/** The app-wide default, set through `createRui({ defaults: { field } })`. */
+export declare const FieldSymbol: InjectionKey<FieldOptions>;
+export declare function createFieldDefaults(options?: Partial<FieldOptions>): FieldOptions;
+/** Sets the label placement for every field rendered below the calling component. */
+export declare function provideFieldDefaults(labelPlacement: MaybeRefOrGetter<LabelPlacement | undefined>): void;
+/**
+ * The placement a field uses: its own prop, then the nearest scope, then the
+ * app default, then `top`.
+ */
+export declare function useLabelPlacement(placement: MaybeRefOrGetter<LabelPlacement | undefined>): ComputedRef<LabelPlacement>;

package/dist/composables/defaults/field.js

@@ -0,0 +1,29 @@
+import { computed, inject, provide, toValue } from "vue";
+//#region src/composables/defaults/field.ts
+/** The app-wide default, set through `createRui({ defaults: { field } })`. */
+var FieldSymbol = Symbol.for("rui:field");
+/** A default for every field below a component, set with `provideFieldDefaults` or `RuiFieldDefaults`. */
+var FieldScopeSymbol = Symbol.for("rui:field-scope");
+function createFieldDefaults(options) {
+	return {
+		labelPlacement: "top",
+		...options
+	};
+}
+/** Sets the label placement for every field rendered below the calling component. */
+function provideFieldDefaults(labelPlacement) {
+	provide(FieldScopeSymbol, labelPlacement);
+}
+/**
+* The placement a field uses: its own prop, then the nearest scope, then the
+* app default, then `top`.
+*/
+function useLabelPlacement(placement) {
+	const scope = inject(FieldScopeSymbol, void 0);
+	const app = inject(FieldSymbol, void 0);
+	return computed(() => toValue(placement) ?? toValue(scope) ?? (app ? toValue(app.labelPlacement) : void 0) ?? "top");
+}
+//#endregion
+export { FieldSymbol, createFieldDefaults, provideFieldDefaults, useLabelPlacement };
+
+//# sourceMappingURL=field.js.map

package/dist/composables/defaults/field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","names":[],"sources":["../../../src/composables/defaults/field.ts"],"sourcesContent":["import type { ComputedRef, InjectionKey, MaybeRef, MaybeRefOrGetter } from 'vue';\n\n/**\n * Where a field shows its label.\n *\n * - `top`: a label above a bordered field (the default).\n * - `hidden`: no visible label; the label is still announced to screen readers.\n *   For search and filter fields whose placeholder and icon say what they are.\n */\nexport type LabelPlacement = 'top' | 'hidden';\n\nexport interface FieldOptions {\n  labelPlacement: MaybeRef<LabelPlacement>;\n}\n\n/** The app-wide default, set through `createRui({ defaults: { field } })`. */\nexport const FieldSymbol: InjectionKey<FieldOptions> = Symbol.for('rui:field');\n\n/** A default for every field below a component, set with `provideFieldDefaults` or `RuiFieldDefaults`. */\nconst FieldScopeSymbol: InjectionKey<MaybeRefOrGetter<LabelPlacement | undefined>> = Symbol.for('rui:field-scope');\n\nexport function createFieldDefaults(options?: Partial<FieldOptions>): FieldOptions {\n  return {\n    labelPlacement: 'top',\n    ...options,\n  };\n}\n\n/** Sets the label placement for every field rendered below the calling component. */\nexport function provideFieldDefaults(labelPlacement: MaybeRefOrGetter<LabelPlacement | undefined>): void {\n  provide(FieldScopeSymbol, labelPlacement);\n}\n\n/**\n * The placement a field uses: its own prop, then the nearest scope, then the\n * app default, then `top`.\n */\nexport function useLabelPlacement(placement: MaybeRefOrGetter<LabelPlacement | undefined>): ComputedRef<LabelPlacement> {\n  const scope = inject(FieldScopeSymbol, undefined);\n  const app = inject(FieldSymbol, undefined);\n\n  return computed<LabelPlacement>(() =>\n    toValue(placement)\n    ?? toValue(scope)\n    ?? (app ? toValue(app.labelPlacement) : undefined)\n    ?? 'top',\n  );\n}\n"],"mappings":";;;AAgBA,IAAa,cAA0C,OAAO,IAAI,WAAW;;AAG7E,IAAM,mBAA+E,OAAO,IAAI,iBAAiB;AAEjH,SAAgB,oBAAoB,SAA+C;CACjF,OAAO;EACL,gBAAgB;EAChB,GAAG;CACL;AACF;;AAGA,SAAgB,qBAAqB,gBAAoE;CACvG,QAAQ,kBAAkB,cAAc;AAC1C;;;;;AAMA,SAAgB,kBAAkB,WAAsF;CACtH,MAAM,QAAQ,OAAO,kBAAkB,KAAA,CAAS;CAChD,MAAM,MAAM,OAAO,aAAa,KAAA,CAAS;CAEzC,OAAO,eACL,QAAQ,SAAS,KACd,QAAQ,KAAK,MACZ,MAAM,QAAQ,IAAI,cAAc,IAAI,KAAA,MACrC,KACL;AACF"}

package/dist/composables/dropdown-menu.d.ts

@@ -6,8 +6,20 @@ export interface DropdownItemAttr<TValue, TItem> {
     keyAttr?: KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>;
     textAttr?: keyof TItem | ((item: TItem) => string);
 }
-export type GroupBy<TItem> = keyof TItem | ((item: TItem) => string);
-export type ItemDisabled<TItem> = keyof TItem | ((item: TItem) => boolean);
+/**
+ * An item key or a resolver. `& string` lets Vue's compiler infer a String runtime type for the key
+ * form; a bare generic `keyof` compiles to Function only, and a consumer's runtime warns.
+ */
+export type GroupBy<TItem> = (keyof TItem & string) | ((item: TItem) => string);
+export type ItemDisabled<TItem> = (keyof TItem & string) | ((item: TItem) => boolean);
+/**
+ * The rendered height of a default option row, a `list` button at its default or `sm` size.
+ * The virtual list reserves this much per row, so a mismatch leaves a gap under the last option.
+ *
+ * @param dense - whether the options render at the dense size
+ * @returns the row height in pixels
+ */
+export declare function getOptionHeight(dense: boolean | undefined): number;
 export interface DropdownOptionGroup<TItem> {
     group: string;
     items: TItem[];

package/dist/composables/dropdown-menu.js

@@ -2,6 +2,16 @@ import { computed, nextTick, ref, shallowRef, toValue, watch } from "vue";
 import { useArrayMap, useVirtualList } from "@vueuse/core";
 import { get as get$1, set as set$1 } from "@vueuse/shared";
 //#region src/composables/dropdown-menu.ts
+/**
+* The rendered height of a default option row, a `list` button at its default or `sm` size.
+* The virtual list reserves this much per row, so a mismatch leaves a gap under the last option.
+*
+* @param dense - whether the options render at the dense size
+* @returns the row height in pixels
+*/
+function getOptionHeight(dense) {
+	return dense ? 32 : 40;
+}
 function useDropdownOptionProperty({ keyAttr, textAttr }) {
 	function getText(item) {
 		if (textAttr) {
@@ -24,7 +34,7 @@ function toSelectedArray(val) {
 	if (val !== null && val !== void 0) return [val];
 	return [];
 }
-function useDropdownMenu({ appendWidth, autoSelectFirst, dense, disabled = false, getIdentifier: externalGetIdentifier, getText: externalGetText, hideSelected, isOpen: externalIsOpen, itemHeight = 48, keyAttr, menuRef: _menuRef, options: allOptions, overscan = 5, prependWidth, setValue, textAttr, value, groupBy, itemDisabled }) {
+function useDropdownMenu({ appendWidth, autoSelectFirst, dense, disabled = false, getIdentifier: externalGetIdentifier, getText: externalGetText, hideSelected, isOpen: externalIsOpen, itemHeight = getOptionHeight(false), keyAttr, menuRef: _menuRef, options: allOptions, overscan = 5, prependWidth, setValue, textAttr, value, groupBy, itemDisabled }) {
 	const { getIdentifier: defaultGetIdentifier, getText: defaultGetText } = useDropdownOptionProperty({
 		keyAttr,
 		textAttr
@@ -223,6 +233,6 @@ function useDropdownMenu({ appendWidth, autoSelectFirst, dense, disabled = false
 	};
 }
 //#endregion
-export { useDropdownMenu, useDropdownOptionProperty };
+export { getOptionHeight, useDropdownMenu, useDropdownOptionProperty };
 
 //# sourceMappingURL=dropdown-menu.js.map

package/dist/composables/dropdown-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu.js","names":[],"sources":["../../src/composables/dropdown-menu.ts"],"sourcesContent":["import type { MaybeRefOrGetter, Ref, TemplateRef } from 'vue';\n\nexport type KeyOfType<T, V> = T extends string | number | boolean | symbol | null | undefined\n  ? never\n  : V extends object\n    ? keyof T\n    : keyof {\n      [P in keyof T as T[P] extends V ? P : V extends T[P] ? P : never]: any;\n    };\n\nexport interface DropdownItemAttr<TValue, TItem> {\n  keyAttr?: KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>;\n  textAttr?: keyof TItem | ((item: TItem) => string);\n}\n\nexport type GroupBy<TItem> = keyof TItem | ((item: TItem) => string);\n\nexport type ItemDisabled<TItem> = keyof TItem | ((item: TItem) => boolean);\n\nexport interface DropdownOptionGroup<TItem> {\n  group: string;\n  items: TItem[];\n}\n\nexport interface DropdownOptions<TValue, TItem> {\n  options: MaybeRefOrGetter<TItem[]>;\n  dense?: MaybeRefOrGetter<boolean>;\n  disabled?: MaybeRefOrGetter<boolean>;\n  value: Ref<TItem | TItem[] | undefined>;\n  menuRef: Ref<HTMLElement> | TemplateRef<HTMLElement>;\n  keyAttr?: KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>;\n  textAttr?: keyof TItem | ((item: TItem) => string);\n  appendWidth?: number;\n  prependWidth?: number;\n  itemHeight?: number;\n  overscan?: number;\n  autoSelectFirst?: boolean;\n  setValue?: (val: TItem) => void;\n  hideSelected?: boolean;\n  isOpen?: Ref<boolean>;\n  getText?: (item: TItem) => string | undefined;\n  getIdentifier?: (item: TItem) => any;\n  groupBy?: MaybeRefOrGetter<GroupBy<TItem> | undefined>;\n  itemDisabled?: MaybeRefOrGetter<ItemDisabled<TItem> | undefined>;\n}\n\nexport function useDropdownOptionProperty<TValue, TItem>({\n  keyAttr,\n  textAttr,\n}: DropdownItemAttr<TValue, TItem>) {\n  function getText(item: TItem): string | undefined {\n    if (textAttr) {\n      if (typeof textAttr === 'function')\n        return textAttr(item);\n      else return item[textAttr]?.toString();\n    }\n\n    return item?.toString();\n  }\n\n  function getIdentifier(\n    item: TItem,\n  ): TItem | TItem[KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>] {\n    if (keyAttr)\n      return item[keyAttr];\n\n    return item;\n  }\n\n  return {\n    getIdentifier,\n    getText,\n  };\n}\n\nfunction toSelectedArray<TItem>(val: TItem | TItem[] | undefined): TItem[] {\n  if (Array.isArray(val))\n    return val;\n  if (val !== null && val !== undefined)\n    return [val];\n  return [];\n}\n\nexport function useDropdownMenu<TValue, TItem>({\n  appendWidth,\n  autoSelectFirst,\n  dense,\n  disabled = false,\n  getIdentifier: externalGetIdentifier,\n  getText: externalGetText,\n  hideSelected,\n  isOpen: externalIsOpen,\n  itemHeight = 48,\n  keyAttr,\n  menuRef: _menuRef,\n  options: allOptions,\n  overscan = 5,\n  prependWidth,\n  setValue,\n  textAttr,\n  value,\n  groupBy,\n  itemDisabled,\n}: DropdownOptions<TValue, TItem>) {\n  const { getIdentifier: defaultGetIdentifier, getText: defaultGetText } = useDropdownOptionProperty({\n    keyAttr,\n    textAttr,\n  });\n\n  const getIdentifier = externalGetIdentifier ?? defaultGetIdentifier;\n  const getText = externalGetText ?? defaultGetText;\n\n  const activeIdentifiers = computed<Set<any>>(() => {\n    const val = get(value);\n    const selected: TItem[] = toSelectedArray(val);\n    const identifiers = new Set<any>();\n    for (const item of selected) {\n      identifiers.add(getIdentifier(item));\n    }\n    return identifiers;\n  });\n\n  function isActiveItem(item: TItem): boolean {\n    return get(activeIdentifiers).has(getIdentifier(item));\n  }\n\n  const options = computed<TItem[]>(() => {\n    const options = toValue(allOptions);\n    if (!hideSelected)\n      return options;\n\n    return options.filter(item => !isActiveItem(item));\n  });\n\n  function getGroupKey(item: TItem): string {\n    const group = toValue(groupBy);\n    if (!group)\n      return '';\n\n    if (typeof group === 'function')\n      return group(item);\n\n    return String(item[group] ?? '');\n  }\n\n  function isItemDisabled(item: TItem): boolean {\n    const itemDisabledValue = toValue(itemDisabled);\n    if (!itemDisabledValue)\n      return false;\n\n    if (typeof itemDisabledValue === 'function')\n      return itemDisabledValue(item);\n\n    return Boolean(item[itemDisabledValue]);\n  }\n\n  const isGrouped = computed<boolean>(() => toValue(groupBy) !== undefined);\n\n  const groupedOptions = computed<DropdownOptionGroup<TItem>[]>(() => {\n    if (!get(isGrouped))\n      return [];\n\n    const buckets = new Map<string, TItem[]>();\n    for (const item of get(options)) {\n      const key = getGroupKey(item);\n      const list = buckets.get(key);\n      if (list)\n        list.push(item);\n      else\n        buckets.set(key, [item]);\n    }\n\n    return Array.from(buckets.entries()).map(([group, items]) => ({ group, items }));\n  });\n\n  const { containerProps, list, scrollTo, wrapperProps } = useVirtualList<TItem>(options, {\n    itemHeight,\n    overscan,\n  });\n\n  const renderedData = useArrayMap(list, ({ data, index: _index }) => ({ _index, item: data }));\n\n  const isOpen = externalIsOpen ?? shallowRef<boolean>(false);\n\n  const valueKey = computed(() => {\n    const selected = get(value);\n    if (!keyAttr || !selected)\n      return selected;\n    return Array.isArray(selected) ? selected.map(item => item[keyAttr]) : selected[keyAttr];\n  });\n\n  const modelHighlightedIndex: Ref<number> = ref(get(autoSelectFirst) ? 0 : -1);\n  const modelUserNavigated = shallowRef<boolean>(false);\n\n  const optionWidthBounds = computed<{ min: number; max: number }>(() => {\n    let min = 0;\n    let max = 0;\n    for (const option of get(options)) {\n      const length = getText(option)?.toString()?.length ?? 0;\n      if (min === 0 && max === 0) {\n        min = length;\n        max = length;\n      }\n      else if (length < min) {\n        min = length;\n      }\n      else if (length > max) {\n        max = length;\n      }\n    }\n    return { min, max };\n  });\n\n  const menuWidth = computed<string>(() => {\n    const { min, max } = get(optionWidthBounds);\n    const maxWidth = 30;\n    const paddingX = 1.5;\n    const fontMultiplier = toValue(dense) ? 12 : 13;\n    const difference = max - min;\n\n    function computeValue(width: number): string {\n      const additionalWidths =\n        (prependWidth ? prependWidth + 0.5 : 0) + (appendWidth ? appendWidth + 0.5 : 0);\n      return `${Math.min((width * fontMultiplier) / 16 + paddingX + additionalWidths, maxWidth)}rem`;\n    }\n\n    if (difference <= 5)\n      return computeValue(max);\n\n    return computeValue(min + difference / 2);\n  });\n\n  function toggle(state: boolean = false): void {\n    set(isOpen, state);\n  }\n\n  function itemIndexInValue(item: TItem): number {\n    const val = get(value);\n    const selected: TItem[] = toSelectedArray(val);\n\n    if (selected.length === 0)\n      return -1;\n\n    const itemId = getIdentifier(item);\n    return selected.findIndex(selectedItem => getIdentifier(selectedItem) === itemId);\n  }\n\n  function scrollHighlightedIntoView(): void {\n    get(_menuRef)\n      ?.querySelector<HTMLElement>('[data-highlighted=\"true\"]')\n      ?.scrollIntoView({ block: 'nearest' });\n  }\n\n  async function adjustScrollByHighlightedIndex(): Promise<void> {\n    const index = get(modelHighlightedIndex);\n    if (index === -1)\n      return;\n\n    await nextTick();\n    if (get(_menuRef)?.querySelector('[data-highlighted=\"true\"]')) {\n      scrollHighlightedIntoView();\n      return;\n    }\n\n    // Outside the virtual list's rendered window, so render it first, then nudge it fully into view\n    scrollTo(index);\n    await nextTick();\n    scrollHighlightedIntoView();\n  }\n\n  async function updateOpen(open: boolean): Promise<void> {\n    if (!open)\n      return;\n\n    const val = get(value);\n\n    // Set highlighted index to active item\n    if ((Array.isArray(val) && val.length > 0) || (val !== null && val !== undefined)) {\n      const index = get(options).findIndex(isActiveItem);\n      if (index > -1)\n        set(modelHighlightedIndex, index);\n    }\n\n    await adjustScrollByHighlightedIndex();\n  }\n\n  watch([isOpen, () => toValue(disabled)], async ([open, _]) => {\n    await updateOpen(open);\n  });\n\n  watch(modelHighlightedIndex, async () => {\n    await adjustScrollByHighlightedIndex();\n  });\n\n  watch(options, async () => {\n    set(modelUserNavigated, false);\n    if (get(modelHighlightedIndex) !== -1) {\n      if (get(autoSelectFirst)) {\n        set(modelHighlightedIndex, 0);\n        await adjustScrollByHighlightedIndex();\n      }\n      else {\n        set(modelHighlightedIndex, -1);\n        scrollTo(0);\n      }\n    }\n    else {\n      scrollTo(0);\n    }\n  });\n\n  watch(isOpen, (open) => {\n    if (!open)\n      set(modelUserNavigated, false);\n  });\n\n  const moveHighlight = (up: boolean): void => {\n    if (!get(isOpen)) {\n      toggle(true);\n      return;\n    }\n\n    set(modelUserNavigated, true);\n\n    const items = get(options);\n    const total = items.length;\n    if (total === 0)\n      return;\n\n    const move = up ? -1 : 1;\n    let position = get(modelHighlightedIndex);\n\n    for (let step = 0; step < total; step++) {\n      position += move;\n      if (position >= total)\n        position = 0;\n      else if (position < 0)\n        position = total - 1;\n\n      const candidate = items[position];\n      if (candidate !== undefined && !isItemDisabled(candidate)) {\n        set(modelHighlightedIndex, position);\n        return;\n      }\n    }\n  };\n\n  const applyHighlighted = (): void => {\n    if (!setValue || !get(isOpen))\n      return;\n\n    const highlightedIndexVal = get(modelHighlightedIndex);\n    if (highlightedIndexVal === -1)\n      return;\n\n    const entry = get(options)[highlightedIndexVal];\n    if (entry !== undefined && !isItemDisabled(entry))\n      setValue(entry);\n  };\n\n  return {\n    applyHighlighted,\n    containerProps,\n    getIdentifier,\n    getText,\n    groupedOptions,\n    modelHighlightedIndex,\n    isActiveItem,\n    isGrouped,\n    isItemDisabled,\n    isOpen,\n    itemIndexInValue,\n    menuWidth,\n    moveHighlight,\n    optionsWithSelectedHidden: options,\n    renderedData,\n    toggle,\n    modelUserNavigated,\n    valueKey,\n    wrapperProps,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"dropdown-menu.js","names":[],"sources":["../../src/composables/dropdown-menu.ts"],"sourcesContent":["import type { MaybeRefOrGetter, Ref, TemplateRef } from 'vue';\n\nexport type KeyOfType<T, V> = T extends string | number | boolean | symbol | null | undefined\n  ? never\n  : V extends object\n    ? keyof T\n    : keyof {\n      [P in keyof T as T[P] extends V ? P : V extends T[P] ? P : never]: any;\n    };\n\nexport interface DropdownItemAttr<TValue, TItem> {\n  keyAttr?: KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>;\n  textAttr?: keyof TItem | ((item: TItem) => string);\n}\n\n/**\n * An item key or a resolver. `& string` lets Vue's compiler infer a String runtime type for the key\n * form; a bare generic `keyof` compiles to Function only, and a consumer's runtime warns.\n */\nexport type GroupBy<TItem> = (keyof TItem & string) | ((item: TItem) => string);\n\nexport type ItemDisabled<TItem> = (keyof TItem & string) | ((item: TItem) => boolean);\n\n/**\n * The rendered height of a default option row, a `list` button at its default or `sm` size.\n * The virtual list reserves this much per row, so a mismatch leaves a gap under the last option.\n *\n * @param dense - whether the options render at the dense size\n * @returns the row height in pixels\n */\nexport function getOptionHeight(dense: boolean | undefined): number {\n  return dense ? 32 : 40;\n}\n\nexport interface DropdownOptionGroup<TItem> {\n  group: string;\n  items: TItem[];\n}\n\nexport interface DropdownOptions<TValue, TItem> {\n  options: MaybeRefOrGetter<TItem[]>;\n  dense?: MaybeRefOrGetter<boolean>;\n  disabled?: MaybeRefOrGetter<boolean>;\n  value: Ref<TItem | TItem[] | undefined>;\n  menuRef: Ref<HTMLElement> | TemplateRef<HTMLElement>;\n  keyAttr?: KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>;\n  textAttr?: keyof TItem | ((item: TItem) => string);\n  appendWidth?: number;\n  prependWidth?: number;\n  itemHeight?: number;\n  overscan?: number;\n  autoSelectFirst?: boolean;\n  setValue?: (val: TItem) => void;\n  hideSelected?: boolean;\n  isOpen?: Ref<boolean>;\n  getText?: (item: TItem) => string | undefined;\n  getIdentifier?: (item: TItem) => any;\n  groupBy?: MaybeRefOrGetter<GroupBy<TItem> | undefined>;\n  itemDisabled?: MaybeRefOrGetter<ItemDisabled<TItem> | undefined>;\n}\n\nexport function useDropdownOptionProperty<TValue, TItem>({\n  keyAttr,\n  textAttr,\n}: DropdownItemAttr<TValue, TItem>) {\n  function getText(item: TItem): string | undefined {\n    if (textAttr) {\n      if (typeof textAttr === 'function')\n        return textAttr(item);\n      else return item[textAttr]?.toString();\n    }\n\n    return item?.toString();\n  }\n\n  function getIdentifier(\n    item: TItem,\n  ): TItem | TItem[KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>] {\n    if (keyAttr)\n      return item[keyAttr];\n\n    return item;\n  }\n\n  return {\n    getIdentifier,\n    getText,\n  };\n}\n\nfunction toSelectedArray<TItem>(val: TItem | TItem[] | undefined): TItem[] {\n  if (Array.isArray(val))\n    return val;\n  if (val !== null && val !== undefined)\n    return [val];\n  return [];\n}\n\nexport function useDropdownMenu<TValue, TItem>({\n  appendWidth,\n  autoSelectFirst,\n  dense,\n  disabled = false,\n  getIdentifier: externalGetIdentifier,\n  getText: externalGetText,\n  hideSelected,\n  isOpen: externalIsOpen,\n  itemHeight = getOptionHeight(false),\n  keyAttr,\n  menuRef: _menuRef,\n  options: allOptions,\n  overscan = 5,\n  prependWidth,\n  setValue,\n  textAttr,\n  value,\n  groupBy,\n  itemDisabled,\n}: DropdownOptions<TValue, TItem>) {\n  const { getIdentifier: defaultGetIdentifier, getText: defaultGetText } = useDropdownOptionProperty({\n    keyAttr,\n    textAttr,\n  });\n\n  const getIdentifier = externalGetIdentifier ?? defaultGetIdentifier;\n  const getText = externalGetText ?? defaultGetText;\n\n  const activeIdentifiers = computed<Set<any>>(() => {\n    const val = get(value);\n    const selected: TItem[] = toSelectedArray(val);\n    const identifiers = new Set<any>();\n    for (const item of selected) {\n      identifiers.add(getIdentifier(item));\n    }\n    return identifiers;\n  });\n\n  function isActiveItem(item: TItem): boolean {\n    return get(activeIdentifiers).has(getIdentifier(item));\n  }\n\n  const options = computed<TItem[]>(() => {\n    const options = toValue(allOptions);\n    if (!hideSelected)\n      return options;\n\n    return options.filter(item => !isActiveItem(item));\n  });\n\n  function getGroupKey(item: TItem): string {\n    const group = toValue(groupBy);\n    if (!group)\n      return '';\n\n    if (typeof group === 'function')\n      return group(item);\n\n    return String(item[group] ?? '');\n  }\n\n  function isItemDisabled(item: TItem): boolean {\n    const itemDisabledValue = toValue(itemDisabled);\n    if (!itemDisabledValue)\n      return false;\n\n    if (typeof itemDisabledValue === 'function')\n      return itemDisabledValue(item);\n\n    return Boolean(item[itemDisabledValue]);\n  }\n\n  const isGrouped = computed<boolean>(() => toValue(groupBy) !== undefined);\n\n  const groupedOptions = computed<DropdownOptionGroup<TItem>[]>(() => {\n    if (!get(isGrouped))\n      return [];\n\n    const buckets = new Map<string, TItem[]>();\n    for (const item of get(options)) {\n      const key = getGroupKey(item);\n      const list = buckets.get(key);\n      if (list)\n        list.push(item);\n      else\n        buckets.set(key, [item]);\n    }\n\n    return Array.from(buckets.entries()).map(([group, items]) => ({ group, items }));\n  });\n\n  const { containerProps, list, scrollTo, wrapperProps } = useVirtualList<TItem>(options, {\n    itemHeight,\n    overscan,\n  });\n\n  const renderedData = useArrayMap(list, ({ data, index: _index }) => ({ _index, item: data }));\n\n  const isOpen = externalIsOpen ?? shallowRef<boolean>(false);\n\n  const valueKey = computed(() => {\n    const selected = get(value);\n    if (!keyAttr || !selected)\n      return selected;\n    return Array.isArray(selected) ? selected.map(item => item[keyAttr]) : selected[keyAttr];\n  });\n\n  const modelHighlightedIndex: Ref<number> = ref(get(autoSelectFirst) ? 0 : -1);\n  const modelUserNavigated = shallowRef<boolean>(false);\n\n  const optionWidthBounds = computed<{ min: number; max: number }>(() => {\n    let min = 0;\n    let max = 0;\n    for (const option of get(options)) {\n      const length = getText(option)?.toString()?.length ?? 0;\n      if (min === 0 && max === 0) {\n        min = length;\n        max = length;\n      }\n      else if (length < min) {\n        min = length;\n      }\n      else if (length > max) {\n        max = length;\n      }\n    }\n    return { min, max };\n  });\n\n  const menuWidth = computed<string>(() => {\n    const { min, max } = get(optionWidthBounds);\n    const maxWidth = 30;\n    const paddingX = 1.5;\n    const fontMultiplier = toValue(dense) ? 12 : 13;\n    const difference = max - min;\n\n    function computeValue(width: number): string {\n      const additionalWidths =\n        (prependWidth ? prependWidth + 0.5 : 0) + (appendWidth ? appendWidth + 0.5 : 0);\n      return `${Math.min((width * fontMultiplier) / 16 + paddingX + additionalWidths, maxWidth)}rem`;\n    }\n\n    if (difference <= 5)\n      return computeValue(max);\n\n    return computeValue(min + difference / 2);\n  });\n\n  function toggle(state: boolean = false): void {\n    set(isOpen, state);\n  }\n\n  function itemIndexInValue(item: TItem): number {\n    const val = get(value);\n    const selected: TItem[] = toSelectedArray(val);\n\n    if (selected.length === 0)\n      return -1;\n\n    const itemId = getIdentifier(item);\n    return selected.findIndex(selectedItem => getIdentifier(selectedItem) === itemId);\n  }\n\n  function scrollHighlightedIntoView(): void {\n    get(_menuRef)\n      ?.querySelector<HTMLElement>('[data-highlighted=\"true\"]')\n      ?.scrollIntoView({ block: 'nearest' });\n  }\n\n  async function adjustScrollByHighlightedIndex(): Promise<void> {\n    const index = get(modelHighlightedIndex);\n    if (index === -1)\n      return;\n\n    await nextTick();\n    if (get(_menuRef)?.querySelector('[data-highlighted=\"true\"]')) {\n      scrollHighlightedIntoView();\n      return;\n    }\n\n    // Outside the virtual list's rendered window, so render it first, then nudge it fully into view\n    scrollTo(index);\n    await nextTick();\n    scrollHighlightedIntoView();\n  }\n\n  async function updateOpen(open: boolean): Promise<void> {\n    if (!open)\n      return;\n\n    const val = get(value);\n\n    // Set highlighted index to active item\n    if ((Array.isArray(val) && val.length > 0) || (val !== null && val !== undefined)) {\n      const index = get(options).findIndex(isActiveItem);\n      if (index > -1)\n        set(modelHighlightedIndex, index);\n    }\n\n    await adjustScrollByHighlightedIndex();\n  }\n\n  watch([isOpen, () => toValue(disabled)], async ([open, _]) => {\n    await updateOpen(open);\n  });\n\n  watch(modelHighlightedIndex, async () => {\n    await adjustScrollByHighlightedIndex();\n  });\n\n  watch(options, async () => {\n    set(modelUserNavigated, false);\n    if (get(modelHighlightedIndex) !== -1) {\n      if (get(autoSelectFirst)) {\n        set(modelHighlightedIndex, 0);\n        await adjustScrollByHighlightedIndex();\n      }\n      else {\n        set(modelHighlightedIndex, -1);\n        scrollTo(0);\n      }\n    }\n    else {\n      scrollTo(0);\n    }\n  });\n\n  watch(isOpen, (open) => {\n    if (!open)\n      set(modelUserNavigated, false);\n  });\n\n  const moveHighlight = (up: boolean): void => {\n    if (!get(isOpen)) {\n      toggle(true);\n      return;\n    }\n\n    set(modelUserNavigated, true);\n\n    const items = get(options);\n    const total = items.length;\n    if (total === 0)\n      return;\n\n    const move = up ? -1 : 1;\n    let position = get(modelHighlightedIndex);\n\n    for (let step = 0; step < total; step++) {\n      position += move;\n      if (position >= total)\n        position = 0;\n      else if (position < 0)\n        position = total - 1;\n\n      const candidate = items[position];\n      if (candidate !== undefined && !isItemDisabled(candidate)) {\n        set(modelHighlightedIndex, position);\n        return;\n      }\n    }\n  };\n\n  const applyHighlighted = (): void => {\n    if (!setValue || !get(isOpen))\n      return;\n\n    const highlightedIndexVal = get(modelHighlightedIndex);\n    if (highlightedIndexVal === -1)\n      return;\n\n    const entry = get(options)[highlightedIndexVal];\n    if (entry !== undefined && !isItemDisabled(entry))\n      setValue(entry);\n  };\n\n  return {\n    applyHighlighted,\n    containerProps,\n    getIdentifier,\n    getText,\n    groupedOptions,\n    modelHighlightedIndex,\n    isActiveItem,\n    isGrouped,\n    isItemDisabled,\n    isOpen,\n    itemIndexInValue,\n    menuWidth,\n    moveHighlight,\n    optionsWithSelectedHidden: options,\n    renderedData,\n    toggle,\n    modelUserNavigated,\n    valueKey,\n    wrapperProps,\n  };\n}\n"],"mappings":"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"}

package/dist/composables/floating.d.ts

@@ -50,8 +50,6 @@ export interface FloatingOptions {
      */
     size?: boolean;
 }
-/** Custom property carrying the space-aware max height set by the size middleware. */
-export declare const FLOATING_MAX_HEIGHT_VAR = "--rui-floating-max-height";
 export declare const DEFAULT_FLOATING_OPTIONS: Required<FloatingOptions>;
 export interface UseFloatingReturn {
     currentPlacement: Readonly<Ref<Placement>>;

package/dist/composables/floating.js

@@ -64,7 +64,10 @@ function buildOffsetMiddleware(opts) {
 function buildMiddleware(opts, arrowEl) {
 	const mw = [buildOffsetMiddleware(opts)];
 	if (opts.flip !== false) mw.push(flip());
-	mw.push(shift({ padding: opts.shiftPadding ?? DEFAULT_FLOATING_OPTIONS.shiftPadding }));
+	mw.push(shift({
+		padding: opts.shiftPadding ?? DEFAULT_FLOATING_OPTIONS.shiftPadding,
+		crossAxis: true
+	}));
 	if (arrowEl) mw.push(arrow({
 		element: arrowEl,
 		padding: 4
@@ -186,6 +189,6 @@ function useFloating(options, disabled = false, openDelay = 0, closeDelay = 0, v
 	};
 }
 //#endregion
-export { DEFAULT_FLOATING_OPTIONS, FLOATING_MAX_HEIGHT_VAR, Placement, Strategy, useFloating };
+export { DEFAULT_FLOATING_OPTIONS, Placement, Strategy, useFloating };
 
 //# sourceMappingURL=floating.js.map

package/dist/composables/floating.js.map

@@ -1 +1 @@
-{"version":3,"file":"floating.js","names":[],"sources":["../../src/composables/floating.ts"],"sourcesContent":["import {\n  arrow,\n  autoUpdate,\n  computePosition,\n  type ComputePositionReturn,\n  flip,\n  type VirtualElement as FloatingVirtualElement,\n  type Middleware,\n  offset,\n  shift,\n  size,\n} from '@floating-ui/dom';\nimport { type MaybeElement, unrefElement } from '@vueuse/core';\nimport { type MaybeRefOrGetter, onMounted, type Ref, ref, watchEffect } from 'vue';\nimport { useTimeoutManager } from './timeout-manager';\n\ntype VirtualElement = FloatingVirtualElement;\n\nexport const Placement = {\n  bottom: 'bottom',\n  bottomEnd: 'bottom-end',\n  bottomStart: 'bottom-start',\n  left: 'left',\n  leftEnd: 'left-end',\n  leftStart: 'left-start',\n  right: 'right',\n  rightEnd: 'right-end',\n  rightStart: 'right-start',\n  top: 'top',\n  topEnd: 'top-end',\n  topStart: 'top-start',\n} as const;\n\nexport type Placement = (typeof Placement)[keyof typeof Placement];\n\nexport const Strategy = {\n  absolute: 'absolute',\n  fixed: 'fixed',\n} as const;\n\nexport type Strategy = (typeof Strategy)[keyof typeof Strategy];\n\nexport interface FloatingOptions {\n  /** Preferred placement relative to the reference element; defaults to `Placement.bottom`. */\n  placement?: Placement;\n  /** CSS positioning strategy; defaults to `Strategy.absolute`. */\n  strategy?: Strategy;\n  /** Main-axis and/or cross-axis offset from the reference element; defaults to 2. */\n  offset?: number | { mainAxis?: number; crossAxis?: number };\n  /** Whether to flip to the opposite side when overflowing; defaults to true. */\n  flip?: boolean;\n  /** Padding from viewport edges for shift middleware; defaults to 8. */\n  shiftPadding?: number;\n  /** Whether to auto-update position on scroll/resize; defaults to true. */\n  autoUpdate?: boolean | { scroll?: boolean; resize?: boolean };\n  /**\n   * Cap the floating element to the space available toward the viewport edge so\n   * it never overflows the window. Exposes the measured space as the\n   * `--rui-floating-max-height` custom property on the floating element; the\n   * content is responsible for consuming it by capping its own max-height to\n   * that variable and scrolling internally. Defaults to false.\n   */\n  size?: boolean;\n}\n\n/** Custom property carrying the space-aware max height set by the size middleware. */\nexport const FLOATING_MAX_HEIGHT_VAR = '--rui-floating-max-height';\n\nexport const DEFAULT_FLOATING_OPTIONS: Required<FloatingOptions> = {\n  autoUpdate: true,\n  flip: true,\n  offset: 2,\n  placement: Placement.bottom,\n  shiftPadding: 8,\n  size: false,\n  strategy: Strategy.absolute,\n};\n\nexport interface UseFloatingReturn {\n  currentPlacement: Readonly<Ref<Placement>>;\n  leavePending: Ref<boolean>;\n  onClose: (immediate?: boolean) => void;\n  onLeaveComplete: () => void;\n  onLeavePending: () => void;\n  onOpen: (immediate?: boolean) => void;\n  open: Ref<boolean>;\n  popover: Ref<MaybeElement>;\n  reference: Ref<HTMLElement | undefined>;\n  updatePosition: () => Promise<void>;\n  visible: Ref<boolean>;\n}\n\n/**\n * Cap the floating element to the space available toward the viewport edge and\n * expose it as {@link FLOATING_MAX_HEIGHT_VAR}. The content decides how to use\n * it (cap its own height and scroll internally); writing a custom property\n * instead of a hard max-height keeps this non-invasive for elements that opt in\n * but size themselves differently.\n */\nfunction buildSizeMiddleware(padding: number): Middleware {\n  return size({\n    padding,\n    apply({ availableHeight, elements }) {\n      elements.floating.style.setProperty(FLOATING_MAX_HEIGHT_VAR, `${Math.max(0, Math.floor(availableHeight))}px`);\n    },\n  });\n}\n\n/**\n * The offset middleware, from either the shorthand distance or the per-axis\n * form, falling back to the default distance on the main axis.\n */\nfunction buildOffsetMiddleware(opts: FloatingOptions): Middleware {\n  const off = opts.offset ?? DEFAULT_FLOATING_OPTIONS.offset;\n\n  if (typeof off === 'number')\n    return offset(off);\n\n  const defaultOffset = typeof DEFAULT_FLOATING_OPTIONS.offset === 'number' ? DEFAULT_FLOATING_OPTIONS.offset : 0;\n  return offset({ mainAxis: off.mainAxis ?? defaultOffset, crossAxis: off.crossAxis ?? 0 });\n}\n\nfunction buildMiddleware(opts: FloatingOptions, arrowEl: HTMLElement | null): Middleware[] {\n  const mw: Middleware[] = [buildOffsetMiddleware(opts)];\n\n  if (opts.flip !== false)\n    mw.push(flip());\n\n  mw.push(shift({ padding: opts.shiftPadding ?? DEFAULT_FLOATING_OPTIONS.shiftPadding }));\n\n  if (arrowEl)\n    mw.push(arrow({ element: arrowEl, padding: 4 }));\n\n  if (opts.size === true)\n    mw.push(buildSizeMiddleware(opts.shiftPadding ?? DEFAULT_FLOATING_OPTIONS.shiftPadding));\n\n  return mw;\n}\n\nfunction applyArrowStyles(arrowEl: HTMLElement | null, result: ComputePositionReturn): void {\n  const arrowData = result.middlewareData.arrow;\n  if (!arrowEl || !arrowData)\n    return;\n\n  Object.assign(arrowEl.style, {\n    left: arrowData.x != null ? `${arrowData.x}px` : '',\n    top: arrowData.y != null ? `${arrowData.y}px` : '',\n  });\n}\n\nexport function useFloating(\n  options: MaybeRefOrGetter<FloatingOptions>,\n  disabled: MaybeRefOrGetter<boolean> = false,\n  openDelay: MaybeRefOrGetter<number> = 0,\n  closeDelay: MaybeRefOrGetter<number> = 0,\n  virtualReference?: MaybeRefOrGetter<Element | VirtualElement | undefined>,\n): UseFloatingReturn {\n  const reference = ref<HTMLElement>();\n  const popover = ref<MaybeElement>();\n  const open = shallowRef<boolean>(false);\n  const visible = shallowRef<boolean>(false);\n  const leavePending = shallowRef<boolean>(false);\n  const currentPlacement = shallowRef<Placement>(toValue(options).placement ?? DEFAULT_FLOATING_OPTIONS.placement);\n\n  let cleanupAutoUpdate: (() => void) | null = null;\n\n  const openTimeoutManager = useTimeoutManager();\n  const closeTimeoutManager = useTimeoutManager();\n\n  function onLeaveComplete(): void {\n    set(visible, false);\n  }\n\n  function onOpen(immediate: boolean = false): void {\n    if (toValue(disabled))\n      return;\n\n    closeTimeoutManager.clear();\n\n    set(leavePending, false);\n    if (!openTimeoutManager.isActive()) {\n      set(visible, true);\n\n      openTimeoutManager.create(\n        () => {\n          set(open, true);\n        },\n        immediate ? 0 : toValue(openDelay),\n      );\n    }\n  }\n\n  function onClose(immediate: boolean = false): void {\n    if (toValue(disabled))\n      return;\n\n    openTimeoutManager.clear();\n\n    if (!closeTimeoutManager.isActive()) {\n      closeTimeoutManager.create(\n        () => {\n          if (!get(open))\n            onLeaveComplete();\n\n          set(open, false);\n        },\n        immediate ? 0 : toValue(closeDelay),\n      );\n    }\n  }\n\n  function onLeavePending(): void {\n    set(leavePending, true);\n  }\n\n  function getValidElements(): { popoverEl: HTMLElement; referenceEl: Element | VirtualElement } | null {\n    if (!get(popover) || (!get(reference) && !toValue(virtualReference)))\n      return null;\n\n    const popoverEl = unrefElement(popover);\n    const referenceEl = toValue(virtualReference) || unrefElement(reference);\n\n    if (!(popoverEl instanceof HTMLElement) || !referenceEl)\n      return null;\n\n    return { popoverEl, referenceEl };\n  }\n\n  async function updatePosition(): Promise<void> {\n    const elements = getValidElements();\n    if (!elements)\n      return;\n\n    const { popoverEl, referenceEl } = elements;\n    const opts = toValue(options);\n    const arrowEl = popoverEl.querySelector<HTMLElement>('[data-id=\"arrow\"]');\n    const strategy = opts.strategy ?? DEFAULT_FLOATING_OPTIONS.strategy;\n\n    const result = await computePosition(referenceEl, popoverEl, {\n      middleware: buildMiddleware(opts, arrowEl),\n      placement: opts.placement ?? DEFAULT_FLOATING_OPTIONS.placement,\n      strategy,\n    });\n\n    Object.assign(popoverEl.style, {\n      left: `${result.x}px`,\n      position: strategy,\n      top: `${result.y}px`,\n    });\n\n    set(currentPlacement, result.placement);\n    applyArrowStyles(arrowEl, result);\n  }\n\n  function startAutoUpdate(): void {\n    stopAutoUpdate();\n    const elements = getValidElements();\n    if (!elements)\n      return;\n\n    const { popoverEl, referenceEl } = elements;\n    const opts = toValue(options);\n    const autoUpdateOpt = opts.autoUpdate ?? DEFAULT_FLOATING_OPTIONS.autoUpdate;\n\n    if (autoUpdateOpt === false)\n      return;\n\n    const autoUpdateOptions = typeof autoUpdateOpt === 'object'\n      ? {\n          ancestorResize: autoUpdateOpt.resize ?? true,\n          ancestorScroll: autoUpdateOpt.scroll ?? true,\n          elementResize: true,\n        }\n      : undefined;\n\n    cleanupAutoUpdate = autoUpdate(\n      referenceEl,\n      popoverEl,\n      () => { updatePosition().catch(() => {}); },\n      autoUpdateOptions,\n    );\n  }\n\n  function stopAutoUpdate(): void {\n    cleanupAutoUpdate?.();\n    cleanupAutoUpdate = null;\n  }\n\n  onMounted(() => {\n    watchEffect((onCleanup) => {\n      startAutoUpdate();\n      onCleanup(stopAutoUpdate);\n    });\n  });\n\n  return {\n    currentPlacement: readonly(currentPlacement),\n    leavePending, // eslint-disable-line @rotki/composable-return-readonly -- written by consumer transition hooks\n    onClose,\n    onLeaveComplete,\n    onLeavePending,\n    onOpen,\n    open, // eslint-disable-line @rotki/composable-return-readonly -- v-model bound by consumers\n    popover, // eslint-disable-line @rotki/composable-return-readonly -- template ref bound by consumers\n    reference, // eslint-disable-line @rotki/composable-return-readonly -- template ref bound by consumers\n    updatePosition,\n    visible, // eslint-disable-line @rotki/composable-return-readonly -- used as v-if condition by consumers\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"floating.js","names":[],"sources":["../../src/composables/floating.ts"],"sourcesContent":["import {\n  arrow,\n  autoUpdate,\n  computePosition,\n  type ComputePositionReturn,\n  flip,\n  type VirtualElement as FloatingVirtualElement,\n  type Middleware,\n  offset,\n  shift,\n  size,\n} from '@floating-ui/dom';\nimport { type MaybeElement, unrefElement } from '@vueuse/core';\nimport { type MaybeRefOrGetter, onMounted, type Ref, ref, watchEffect } from 'vue';\nimport { useTimeoutManager } from './timeout-manager';\n\ntype VirtualElement = FloatingVirtualElement;\n\nexport const Placement = {\n  bottom: 'bottom',\n  bottomEnd: 'bottom-end',\n  bottomStart: 'bottom-start',\n  left: 'left',\n  leftEnd: 'left-end',\n  leftStart: 'left-start',\n  right: 'right',\n  rightEnd: 'right-end',\n  rightStart: 'right-start',\n  top: 'top',\n  topEnd: 'top-end',\n  topStart: 'top-start',\n} as const;\n\nexport type Placement = (typeof Placement)[keyof typeof Placement];\n\nexport const Strategy = {\n  absolute: 'absolute',\n  fixed: 'fixed',\n} as const;\n\nexport type Strategy = (typeof Strategy)[keyof typeof Strategy];\n\nexport interface FloatingOptions {\n  /** Preferred placement relative to the reference element; defaults to `Placement.bottom`. */\n  placement?: Placement;\n  /** CSS positioning strategy; defaults to `Strategy.absolute`. */\n  strategy?: Strategy;\n  /** Main-axis and/or cross-axis offset from the reference element; defaults to 2. */\n  offset?: number | { mainAxis?: number; crossAxis?: number };\n  /** Whether to flip to the opposite side when overflowing; defaults to true. */\n  flip?: boolean;\n  /** Padding from viewport edges for shift middleware; defaults to 8. */\n  shiftPadding?: number;\n  /** Whether to auto-update position on scroll/resize; defaults to true. */\n  autoUpdate?: boolean | { scroll?: boolean; resize?: boolean };\n  /**\n   * Cap the floating element to the space available toward the viewport edge so\n   * it never overflows the window. Exposes the measured space as the\n   * `--rui-floating-max-height` custom property on the floating element; the\n   * content is responsible for consuming it by capping its own max-height to\n   * that variable and scrolling internally. Defaults to false.\n   */\n  size?: boolean;\n}\n\n/** Custom property carrying the space-aware max height set by the size middleware. */\nconst FLOATING_MAX_HEIGHT_VAR = '--rui-floating-max-height';\n\nexport const DEFAULT_FLOATING_OPTIONS: Required<FloatingOptions> = {\n  autoUpdate: true,\n  flip: true,\n  offset: 2,\n  placement: Placement.bottom,\n  shiftPadding: 8,\n  size: false,\n  strategy: Strategy.absolute,\n};\n\nexport interface UseFloatingReturn {\n  currentPlacement: Readonly<Ref<Placement>>;\n  leavePending: Ref<boolean>;\n  onClose: (immediate?: boolean) => void;\n  onLeaveComplete: () => void;\n  onLeavePending: () => void;\n  onOpen: (immediate?: boolean) => void;\n  open: Ref<boolean>;\n  popover: Ref<MaybeElement>;\n  reference: Ref<HTMLElement | undefined>;\n  updatePosition: () => Promise<void>;\n  visible: Ref<boolean>;\n}\n\n/**\n * Cap the floating element to the space available toward the viewport edge and\n * expose it as {@link FLOATING_MAX_HEIGHT_VAR}. The content decides how to use\n * it (cap its own height and scroll internally); writing a custom property\n * instead of a hard max-height keeps this non-invasive for elements that opt in\n * but size themselves differently.\n */\nfunction buildSizeMiddleware(padding: number): Middleware {\n  return size({\n    padding,\n    apply({ availableHeight, elements }) {\n      elements.floating.style.setProperty(FLOATING_MAX_HEIGHT_VAR, `${Math.max(0, Math.floor(availableHeight))}px`);\n    },\n  });\n}\n\n/**\n * The offset middleware, from either the shorthand distance or the per-axis\n * form, falling back to the default distance on the main axis.\n */\nfunction buildOffsetMiddleware(opts: FloatingOptions): Middleware {\n  const off = opts.offset ?? DEFAULT_FLOATING_OPTIONS.offset;\n\n  if (typeof off === 'number')\n    return offset(off);\n\n  const defaultOffset = typeof DEFAULT_FLOATING_OPTIONS.offset === 'number' ? DEFAULT_FLOATING_OPTIONS.offset : 0;\n  return offset({ mainAxis: off.mainAxis ?? defaultOffset, crossAxis: off.crossAxis ?? 0 });\n}\n\nfunction buildMiddleware(opts: FloatingOptions, arrowEl: HTMLElement | null): Middleware[] {\n  const mw: Middleware[] = [buildOffsetMiddleware(opts)];\n\n  if (opts.flip !== false)\n    mw.push(flip());\n\n  // `crossAxis`: when neither side fits, overlap the activator rather than open past the viewport edge\n  mw.push(shift({ padding: opts.shiftPadding ?? DEFAULT_FLOATING_OPTIONS.shiftPadding, crossAxis: true }));\n\n  if (arrowEl)\n    mw.push(arrow({ element: arrowEl, padding: 4 }));\n\n  if (opts.size === true)\n    mw.push(buildSizeMiddleware(opts.shiftPadding ?? DEFAULT_FLOATING_OPTIONS.shiftPadding));\n\n  return mw;\n}\n\nfunction applyArrowStyles(arrowEl: HTMLElement | null, result: ComputePositionReturn): void {\n  const arrowData = result.middlewareData.arrow;\n  if (!arrowEl || !arrowData)\n    return;\n\n  Object.assign(arrowEl.style, {\n    left: arrowData.x != null ? `${arrowData.x}px` : '',\n    top: arrowData.y != null ? `${arrowData.y}px` : '',\n  });\n}\n\nexport function useFloating(\n  options: MaybeRefOrGetter<FloatingOptions>,\n  disabled: MaybeRefOrGetter<boolean> = false,\n  openDelay: MaybeRefOrGetter<number> = 0,\n  closeDelay: MaybeRefOrGetter<number> = 0,\n  virtualReference?: MaybeRefOrGetter<Element | VirtualElement | undefined>,\n): UseFloatingReturn {\n  const reference = ref<HTMLElement>();\n  const popover = ref<MaybeElement>();\n  const open = shallowRef<boolean>(false);\n  const visible = shallowRef<boolean>(false);\n  const leavePending = shallowRef<boolean>(false);\n  const currentPlacement = shallowRef<Placement>(toValue(options).placement ?? DEFAULT_FLOATING_OPTIONS.placement);\n\n  let cleanupAutoUpdate: (() => void) | null = null;\n\n  const openTimeoutManager = useTimeoutManager();\n  const closeTimeoutManager = useTimeoutManager();\n\n  function onLeaveComplete(): void {\n    set(visible, false);\n  }\n\n  function onOpen(immediate: boolean = false): void {\n    if (toValue(disabled))\n      return;\n\n    closeTimeoutManager.clear();\n\n    set(leavePending, false);\n    if (!openTimeoutManager.isActive()) {\n      set(visible, true);\n\n      openTimeoutManager.create(\n        () => {\n          set(open, true);\n        },\n        immediate ? 0 : toValue(openDelay),\n      );\n    }\n  }\n\n  function onClose(immediate: boolean = false): void {\n    if (toValue(disabled))\n      return;\n\n    openTimeoutManager.clear();\n\n    if (!closeTimeoutManager.isActive()) {\n      closeTimeoutManager.create(\n        () => {\n          if (!get(open))\n            onLeaveComplete();\n\n          set(open, false);\n        },\n        immediate ? 0 : toValue(closeDelay),\n      );\n    }\n  }\n\n  function onLeavePending(): void {\n    set(leavePending, true);\n  }\n\n  function getValidElements(): { popoverEl: HTMLElement; referenceEl: Element | VirtualElement } | null {\n    if (!get(popover) || (!get(reference) && !toValue(virtualReference)))\n      return null;\n\n    const popoverEl = unrefElement(popover);\n    const referenceEl = toValue(virtualReference) || unrefElement(reference);\n\n    if (!(popoverEl instanceof HTMLElement) || !referenceEl)\n      return null;\n\n    return { popoverEl, referenceEl };\n  }\n\n  async function updatePosition(): Promise<void> {\n    const elements = getValidElements();\n    if (!elements)\n      return;\n\n    const { popoverEl, referenceEl } = elements;\n    const opts = toValue(options);\n    const arrowEl = popoverEl.querySelector<HTMLElement>('[data-id=\"arrow\"]');\n    const strategy = opts.strategy ?? DEFAULT_FLOATING_OPTIONS.strategy;\n\n    const result = await computePosition(referenceEl, popoverEl, {\n      middleware: buildMiddleware(opts, arrowEl),\n      placement: opts.placement ?? DEFAULT_FLOATING_OPTIONS.placement,\n      strategy,\n    });\n\n    Object.assign(popoverEl.style, {\n      left: `${result.x}px`,\n      position: strategy,\n      top: `${result.y}px`,\n    });\n\n    set(currentPlacement, result.placement);\n    applyArrowStyles(arrowEl, result);\n  }\n\n  function startAutoUpdate(): void {\n    stopAutoUpdate();\n    const elements = getValidElements();\n    if (!elements)\n      return;\n\n    const { popoverEl, referenceEl } = elements;\n    const opts = toValue(options);\n    const autoUpdateOpt = opts.autoUpdate ?? DEFAULT_FLOATING_OPTIONS.autoUpdate;\n\n    if (autoUpdateOpt === false)\n      return;\n\n    const autoUpdateOptions = typeof autoUpdateOpt === 'object'\n      ? {\n          ancestorResize: autoUpdateOpt.resize ?? true,\n          ancestorScroll: autoUpdateOpt.scroll ?? true,\n          elementResize: true,\n        }\n      : undefined;\n\n    cleanupAutoUpdate = autoUpdate(\n      referenceEl,\n      popoverEl,\n      () => { updatePosition().catch(() => {}); },\n      autoUpdateOptions,\n    );\n  }\n\n  function stopAutoUpdate(): void {\n    cleanupAutoUpdate?.();\n    cleanupAutoUpdate = null;\n  }\n\n  onMounted(() => {\n    watchEffect((onCleanup) => {\n      startAutoUpdate();\n      onCleanup(stopAutoUpdate);\n    });\n  });\n\n  return {\n    currentPlacement: readonly(currentPlacement),\n    leavePending, // eslint-disable-line @rotki/composable-return-readonly -- written by consumer transition hooks\n    onClose,\n    onLeaveComplete,\n    onLeavePending,\n    onOpen,\n    open, // eslint-disable-line @rotki/composable-return-readonly -- v-model bound by consumers\n    popover, // eslint-disable-line @rotki/composable-return-readonly -- template ref bound by consumers\n    reference, // eslint-disable-line @rotki/composable-return-readonly -- template ref bound by consumers\n    updatePosition,\n    visible, // eslint-disable-line @rotki/composable-return-readonly -- used as v-if condition by consumers\n  };\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,22 @@
+export interface UseAutoCompleteChipsDeps<TItem> {
+    /** Moves focus to the search input, which keeps it while a chip is selected. */
+    focusInput: () => void;
+    getIdentifier: (item: TItem) => unknown;
+    /** Toggles an item in the selection, which removes a chip's item. */
+    setValue: (item: TItem) => void;
+    setValueFocus: (index: number) => void;
+}
+export interface UseAutoCompleteChipsReturn<TItem> {
+    chipAttrs: (item: TItem, index: number) => Record<string, unknown>;
+    /** Selects a clicked chip for Backspace and the arrow keys, with focus left in the input. */
+    selectChip: (index: number) => void;
+}
+/**
+ * The attributes and handlers each selected chip takes. A chip never takes focus: the input keeps
+ * it, where no browser shortcut can claim Backspace, and the chip the keys act on is only drawn as
+ * selected. A click selects a chip and its close button removes it.
+ *
+ * @param deps - the selection operations the handlers call
+ * @returns a function building one chip's attributes, and the click selection
+ */
+export declare function useAutoCompleteChips<TItem>(deps: UseAutoCompleteChipsDeps<TItem>): UseAutoCompleteChipsReturn<TItem>;

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

@@ -0,0 +1,42 @@
+//#region src/composables/forms/auto-complete/chips.ts
+/**
+* The attributes and handlers each selected chip takes. A chip never takes focus: the input keeps
+* it, where no browser shortcut can claim Backspace, and the chip the keys act on is only drawn as
+* selected. A click selects a chip and its close button removes it.
+*
+* @param deps - the selection operations the handlers call
+* @returns a function building one chip's attributes, and the click selection
+*/
+function useAutoCompleteChips(deps) {
+	/**
+	* Focuses the input before selecting, since the input's focus handler clears any selection.
+	*
+	* @param index - the clicked chip's place among the values
+	*/
+	function selectChip(index) {
+		deps.focusInput();
+		deps.setValueFocus(index);
+	}
+	function chipAttrs(item, index) {
+		return {
+			"data-index": index,
+			"data-value": deps.getIdentifier(item),
+			"onClick": (event) => {
+				event.stopPropagation();
+				selectChip(index);
+			},
+			"onClick:close": () => {
+				deps.focusInput();
+				deps.setValue(item);
+			}
+		};
+	}
+	return {
+		chipAttrs,
+		selectChip
+	};
+}
+//#endregion
+export { useAutoCompleteChips };
+
+//# sourceMappingURL=chips.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chips.js","names":[],"sources":["../../../../src/composables/forms/auto-complete/chips.ts"],"sourcesContent":["export interface UseAutoCompleteChipsDeps<TItem> {\n  /** Moves focus to the search input, which keeps it while a chip is selected. */\n  focusInput: () => void;\n  getIdentifier: (item: TItem) => unknown;\n  /** Toggles an item in the selection, which removes a chip's item. */\n  setValue: (item: TItem) => void;\n  setValueFocus: (index: number) => void;\n}\n\nexport interface UseAutoCompleteChipsReturn<TItem> {\n  chipAttrs: (item: TItem, index: number) => Record<string, unknown>;\n  /** Selects a clicked chip for Backspace and the arrow keys, with focus left in the input. */\n  selectChip: (index: number) => void;\n}\n\n/**\n * The attributes and handlers each selected chip takes. A chip never takes focus: the input keeps\n * it, where no browser shortcut can claim Backspace, and the chip the keys act on is only drawn as\n * selected. A click selects a chip and its close button removes it.\n *\n * @param deps - the selection operations the handlers call\n * @returns a function building one chip's attributes, and the click selection\n */\nexport function useAutoCompleteChips<TItem>(deps: UseAutoCompleteChipsDeps<TItem>): UseAutoCompleteChipsReturn<TItem> {\n  /**\n   * Focuses the input before selecting, since the input's focus handler clears any selection.\n   *\n   * @param index - the clicked chip's place among the values\n   */\n  function selectChip(index: number): void {\n    deps.focusInput();\n    deps.setValueFocus(index);\n  }\n\n  function chipAttrs(item: TItem, index: number): Record<string, unknown> {\n    return {\n      'data-index': index,\n      'data-value': deps.getIdentifier(item),\n      'onClick': (event: MouseEvent): void => {\n        event.stopPropagation();\n        selectChip(index);\n      },\n      'onClick:close': (): void => {\n        deps.focusInput();\n        deps.setValue(item);\n      },\n    };\n  }\n\n  return { chipAttrs, selectChip };\n}\n"],"mappings":";;;;;;;;;AAuBA,SAAgB,qBAA4B,MAA0E;;;;;;CAMpH,SAAS,WAAW,OAAqB;EACvC,KAAK,WAAW;EAChB,KAAK,cAAc,KAAK;CAC1B;CAEA,SAAS,UAAU,MAAa,OAAwC;EACtE,OAAO;GACL,cAAc;GACd,cAAc,KAAK,cAAc,IAAI;GACrC,YAAY,UAA4B;IACtC,MAAM,gBAAgB;IACtB,WAAW,KAAK;GAClB;GACA,uBAA6B;IAC3B,KAAK,WAAW;IAChB,KAAK,SAAS,IAAI;GACpB;EACF;CACF;CAEA,OAAO;EAAE;EAAW;CAAW;AACjC"}

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

@@ -0,0 +1,25 @@
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+export interface UseAutoCompleteComboboxReturn {
+    /** Prefix of each option's id, an option's id being `${prefix}-${index}` in the flat option list. */
+    optionIdPrefix: string;
+    /** The highlighted option, which a screen reader announces while focus stays in the input. */
+    activeDescendant: ComputedRef<string | undefined>;
+}
+/**
+ * The ARIA 1.2 combobox wiring of the auto-complete: the input is the combobox, and since focus
+ * never leaves it while the user arrows through the list, it names the highlighted option.
+ *
+ * @param isOpen - whether the listbox is open
+ * @param highlightedIndex - the highlighted option's place in the flat option list, -1 for none
+ * @returns the option id prefix and the active descendant to bind on the input
+ */
+export declare function useAutoCompleteCombobox(isOpen: MaybeRefOrGetter<boolean>, highlightedIndex: MaybeRefOrGetter<number>): UseAutoCompleteComboboxReturn;
+/**
+ * Splits a caller's attributes between the visual box and the input, which is the combobox: an
+ * `aria-label` or `aria-describedby` passed to the component has to name the combobox.
+ *
+ * @param attrs - the attributes passed to the component
+ * @param aria - true for the `aria-*` ones, false for the rest
+ * @returns the matching attributes
+ */
+export declare function splitAriaAttrs(attrs: Record<string, unknown>, aria: boolean): Record<string, unknown>;

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

@@ -0,0 +1,35 @@
+import { computed, toValue, useId } from "vue";
+//#region src/composables/forms/auto-complete/combobox.ts
+/**
+* The ARIA 1.2 combobox wiring of the auto-complete: the input is the combobox, and since focus
+* never leaves it while the user arrows through the list, it names the highlighted option.
+*
+* @param isOpen - whether the listbox is open
+* @param highlightedIndex - the highlighted option's place in the flat option list, -1 for none
+* @returns the option id prefix and the active descendant to bind on the input
+*/
+function useAutoCompleteCombobox(isOpen, highlightedIndex) {
+	const optionIdPrefix = useId();
+	return {
+		activeDescendant: computed(() => {
+			const index = toValue(highlightedIndex);
+			return toValue(isOpen) && index > -1 ? `${optionIdPrefix}-${index}` : void 0;
+		}),
+		optionIdPrefix
+	};
+}
+/**
+* Splits a caller's attributes between the visual box and the input, which is the combobox: an
+* `aria-label` or `aria-describedby` passed to the component has to name the combobox.
+*
+* @param attrs - the attributes passed to the component
+* @param aria - true for the `aria-*` ones, false for the rest
+* @returns the matching attributes
+*/
+function splitAriaAttrs(attrs, aria) {
+	return Object.fromEntries(Object.entries(attrs).filter(([key]) => key.startsWith("aria-") === aria));
+}
+//#endregion
+export { splitAriaAttrs, useAutoCompleteCombobox };
+
+//# sourceMappingURL=combobox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.js","names":[],"sources":["../../../../src/composables/forms/auto-complete/combobox.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter } from 'vue';\n\nexport interface UseAutoCompleteComboboxReturn {\n  /** Prefix of each option's id, an option's id being `${prefix}-${index}` in the flat option list. */\n  optionIdPrefix: string;\n  /** The highlighted option, which a screen reader announces while focus stays in the input. */\n  activeDescendant: ComputedRef<string | undefined>;\n}\n\n/**\n * The ARIA 1.2 combobox wiring of the auto-complete: the input is the combobox, and since focus\n * never leaves it while the user arrows through the list, it names the highlighted option.\n *\n * @param isOpen - whether the listbox is open\n * @param highlightedIndex - the highlighted option's place in the flat option list, -1 for none\n * @returns the option id prefix and the active descendant to bind on the input\n */\nexport function useAutoCompleteCombobox(\n  isOpen: MaybeRefOrGetter<boolean>,\n  highlightedIndex: MaybeRefOrGetter<number>,\n): UseAutoCompleteComboboxReturn {\n  const optionIdPrefix = useId();\n\n  const activeDescendant = computed<string | undefined>(() => {\n    const index = toValue(highlightedIndex);\n    return toValue(isOpen) && index > -1 ? `${optionIdPrefix}-${index}` : undefined;\n  });\n\n  return { activeDescendant, optionIdPrefix };\n}\n\n/**\n * Splits a caller's attributes between the visual box and the input, which is the combobox: an\n * `aria-label` or `aria-describedby` passed to the component has to name the combobox.\n *\n * @param attrs - the attributes passed to the component\n * @param aria - true for the `aria-*` ones, false for the rest\n * @returns the matching attributes\n */\nexport function splitAriaAttrs(attrs: Record<string, unknown>, aria: boolean): Record<string, unknown> {\n  return Object.fromEntries(Object.entries(attrs).filter(([key]) => key.startsWith('aria-') === aria));\n}\n"],"mappings":";;;;;;;;;;AAiBA,SAAgB,wBACd,QACA,kBAC+B;CAC/B,MAAM,iBAAiB,MAAM;CAO7B,OAAO;EAAE,kBALgB,eAAmC;GAC1D,MAAM,QAAQ,QAAQ,gBAAgB;GACtC,OAAO,QAAQ,MAAM,KAAK,QAAQ,KAAK,GAAG,eAAe,GAAG,UAAU,KAAA;EACxE,CAES;EAAkB;CAAe;AAC5C;;;;;;;;;AAUA,SAAgB,eAAe,OAAgC,MAAwC;CACrG,OAAO,OAAO,YAAY,OAAO,QAAQ,KAAK,CAAC,CAAC,QAAQ,CAAC,SAAS,IAAI,WAAW,OAAO,MAAM,IAAI,CAAC;AACrG"}

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

@@ -8,7 +8,6 @@ export interface UseAutoCompleteFocusOptions {
     disabled: MaybeRefOrGetter<boolean>;
 }
 export interface UseAutoCompleteFocusDeps {
-    activatorFocused: Ref<boolean>;
     activatorFocusedWithin: Ref<boolean>;
     focusedValueIndex: Ref<number>;
     internalSearch: Ref<string>;
@@ -22,9 +21,13 @@ export interface UseAutoCompleteFocusDeps {
 }
 export interface UseAutoCompleteFocusReturn {
     anyFocused: ComputedRef<boolean>;
+    /** Whether the user is searching: the input has focus and is not just showing a picked value. */
+    editing: ComputedRef<boolean>;
     inputClass: ComputedRef<string>;
-    onActivatorFocused: () => Promise<void>;
     onInputFocused: () => void;
+    onSettledKeydown: (event: KeyboardEvent) => void;
     setInputFocus: () => Promise<void>;
+    settleOnInput: () => void;
+    unsettle: () => void;
 }
 export declare function useAutoCompleteFocus(options: UseAutoCompleteFocusOptions, deps: UseAutoCompleteFocusDeps): UseAutoCompleteFocusReturn;

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;