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

package/dist/components/date-time-picker/date-time-picker-styles.d.ts

@@ -1,78 +1,84 @@
-import { type TextInputVariant } from '../forms/text-input-styles.js';
-export type DateTimePickerVariant = TextInputVariant;
 /**
  * Overrides the `value` slot for flex-wrap + left padding (prepend icon),
  * and adds `iconPrepend` slot for the calendar icon.
  */
 export declare const dateTimePickerStyles: import("tailwind-variants").TVReturnType<{
-    filled: {
-        true: {};
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            value?: import("tailwind-variants").ClassValue;
+            iconPrepend?: import("tailwind-variants").ClassValue;
+        };
     };
-}, {
-    value: string;
-    iconPrepend: string;
-}, undefined, {
+} | {
     dense: {
-        true: {
-            activator: string;
+        true: import("tailwind-variants").ClassValue | {
+            value?: import("tailwind-variants").ClassValue;
+            iconPrepend?: import("tailwind-variants").ClassValue;
         };
     };
     disabled: {
-        true: {
-            activator: string;
+        true: import("tailwind-variants").ClassValue | {
+            value?: import("tailwind-variants").ClassValue;
+            iconPrepend?: import("tailwind-variants").ClassValue;
         };
     };
     readonly: {
-        true: {
-            activator: string;
+        true: import("tailwind-variants").ClassValue | {
+            value?: import("tailwind-variants").ClassValue;
+            iconPrepend?: import("tailwind-variants").ClassValue;
         };
     };
-    filled: {
-        true: {
-            activator: string;
+    hovered: {
+        true: import("tailwind-variants").ClassValue | {
+            value?: import("tailwind-variants").ClassValue;
+            iconPrepend?: import("tailwind-variants").ClassValue;
         };
     };
-    outlined: {
-        true: {
-            activator: string;
-            label: string;
-            fieldset: string;
-        };
-        false: {
-            activator: string;
+    opened: {
+        true: import("tailwind-variants").ClassValue | {
+            value?: import("tailwind-variants").ClassValue;
+            iconPrepend?: import("tailwind-variants").ClassValue;
         };
     };
-    float: {
-        true: {
-            label: string;
+    hasError: {
+        true: import("tailwind-variants").ClassValue | {
+            value?: import("tailwind-variants").ClassValue;
+            iconPrepend?: import("tailwind-variants").ClassValue;
         };
     };
-    opened: {
-        true: {
-            icon: string;
+    hasSuccess: {
+        true: import("tailwind-variants").ClassValue | {
+            value?: import("tailwind-variants").ClassValue;
+            iconPrepend?: import("tailwind-variants").ClassValue;
         };
     };
     active: {
-        true: {
-            highlighted: string;
+        true: import("tailwind-variants").ClassValue | {
+            value?: import("tailwind-variants").ClassValue;
+            iconPrepend?: import("tailwind-variants").ClassValue;
         };
     };
-    hasError: {
-        true: {};
-    };
-    hasSuccess: {
-        true: {};
-    };
-    hovered: {
-        true: {};
+}, {
+    value: string;
+    iconPrepend: string;
+}, undefined, {
+    dense: {
+        true: {
+            activator: string;
+        };
     };
-    showLabel: {
-        true: {};
+    disabled: {
+        true: {
+            activator: string;
+            icon: string;
+            fieldset: string;
+        };
     };
-} & {
-    focused: {
+    readonly: {
         true: {
+            activator: string;
             fieldset: string;
+            iconWrapper: string;
         };
     };
     hovered: {
@@ -80,42 +86,31 @@ export declare const dateTimePickerStyles: import("tailwind-variants").TVReturnT
             fieldset: string;
         };
     };
-    disabled: {
+    opened: {
         true: {
+            icon: string;
             fieldset: string;
-            label: string;
         };
     };
-    active: {
-        true: {};
-    };
-    showLabel: {
-        true: {};
-    };
-    validation: {
-        error: {
+    hasError: {
+        true: {
             fieldset: string;
-            label: string;
         };
-        success: {
+    };
+    hasSuccess: {
+        true: {
             fieldset: string;
-            label: string;
         };
     };
-    color: {
-        primary: {};
-        secondary: {};
-        error: {};
-        warning: {};
-        info: {};
-        success: {};
+    active: {
+        true: {
+            highlighted: string;
+        };
     };
 }, {
-    fieldset: string;
-    legend: string;
     wrapper: string;
     activator: string;
-    label: string;
+    fieldset: string;
     value: string;
     clear: string;
     menu: string;
@@ -123,11 +118,6 @@ export declare const dateTimePickerStyles: import("tailwind-variants").TVReturnT
     progress: string;
     icon: string;
     iconWrapper: string;
-    required: string;
-} & {
-    label: string;
-    fieldset: string;
-    legend: string;
 }, import("tailwind-variants").TVReturnType<{
     dense: {
         true: {
@@ -137,36 +127,36 @@ export declare const dateTimePickerStyles: import("tailwind-variants").TVReturnT
     disabled: {
         true: {
             activator: string;
+            icon: string;
+            fieldset: string;
         };
     };
     readonly: {
         true: {
             activator: string;
+            fieldset: string;
+            iconWrapper: string;
         };
     };
-    filled: {
+    hovered: {
         true: {
-            activator: string;
+            fieldset: string;
         };
     };
-    outlined: {
+    opened: {
         true: {
-            activator: string;
-            label: string;
+            icon: string;
             fieldset: string;
         };
-        false: {
-            activator: string;
-        };
     };
-    float: {
+    hasError: {
         true: {
-            label: string;
+            fieldset: string;
         };
     };
-    opened: {
+    hasSuccess: {
         true: {
-            icon: string;
+            fieldset: string;
         };
     };
     active: {
@@ -174,24 +164,10 @@ export declare const dateTimePickerStyles: import("tailwind-variants").TVReturnT
             highlighted: string;
         };
     };
-    hasError: {
-        true: {};
-    };
-    hasSuccess: {
-        true: {};
-    };
-    hovered: {
-        true: {};
-    };
-    showLabel: {
-        true: {};
-    };
 }, {
-    fieldset: string;
-    legend: string;
     wrapper: string;
     activator: string;
-    label: string;
+    fieldset: string;
     value: string;
     clear: string;
     menu: string;
@@ -199,185 +175,118 @@ export declare const dateTimePickerStyles: import("tailwind-variants").TVReturnT
     progress: string;
     icon: string;
     iconWrapper: string;
-    required: string;
 }, undefined, {
-    focused: {
+    dense: {
         true: {
-            fieldset: string;
+            activator: string;
         };
     };
-    hovered: {
+    disabled: {
         true: {
+            activator: string;
+            icon: string;
             fieldset: string;
         };
     };
-    disabled: {
+    readonly: {
         true: {
+            activator: string;
             fieldset: string;
-            label: string;
+            iconWrapper: string;
         };
     };
-    active: {
-        true: {};
-    };
-    showLabel: {
-        true: {};
-    };
-    validation: {
-        error: {
-            fieldset: string;
-            label: string;
-        };
-        success: {
+    hovered: {
+        true: {
             fieldset: string;
-            label: string;
         };
     };
-    color: {
-        primary: {};
-        secondary: {};
-        error: {};
-        warning: {};
-        info: {};
-        success: {};
-    };
-}, {
-    label: string;
-    fieldset: string;
-    legend: string;
-}, import("tailwind-variants").TVReturnType<{
-    focused: {
+    opened: {
         true: {
+            icon: string;
             fieldset: string;
         };
     };
-    hovered: {
+    hasError: {
         true: {
             fieldset: string;
         };
     };
-    disabled: {
+    hasSuccess: {
         true: {
             fieldset: string;
-            label: string;
         };
     };
     active: {
-        true: {};
-    };
-    showLabel: {
-        true: {};
-    };
-    validation: {
-        error: {
-            fieldset: string;
-            label: string;
-        };
-        success: {
-            fieldset: string;
-            label: string;
+        true: {
+            highlighted: string;
         };
     };
-    color: {
-        primary: {};
-        secondary: {};
-        error: {};
-        warning: {};
-        info: {};
-        success: {};
-    };
 }, {
-    label: string;
+    wrapper: string;
+    activator: string;
     fieldset: string;
-    legend: string;
-}, undefined, {
-    focused: {
+    value: string;
+    clear: string;
+    menu: string;
+    highlighted: string;
+    progress: string;
+    icon: string;
+    iconWrapper: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    dense: {
         true: {
-            fieldset: string;
+            activator: string;
         };
     };
-    hovered: {
+    disabled: {
         true: {
+            activator: string;
+            icon: string;
             fieldset: string;
         };
     };
-    disabled: {
+    readonly: {
         true: {
+            activator: string;
             fieldset: string;
-            label: string;
+            iconWrapper: string;
         };
     };
-    active: {
-        true: {};
-    };
-    showLabel: {
-        true: {};
-    };
-    validation: {
-        error: {
-            fieldset: string;
-            label: string;
-        };
-        success: {
+    hovered: {
+        true: {
             fieldset: string;
-            label: string;
         };
     };
-    color: {
-        primary: {};
-        secondary: {};
-        error: {};
-        warning: {};
-        info: {};
-        success: {};
-    };
-}, {
-    label: string;
-    fieldset: string;
-    legend: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    focused: {
+    opened: {
         true: {
+            icon: string;
             fieldset: string;
         };
     };
-    hovered: {
+    hasError: {
         true: {
             fieldset: string;
         };
     };
-    disabled: {
+    hasSuccess: {
         true: {
             fieldset: string;
-            label: string;
         };
     };
     active: {
-        true: {};
-    };
-    showLabel: {
-        true: {};
-    };
-    validation: {
-        error: {
-            fieldset: string;
-            label: string;
-        };
-        success: {
-            fieldset: string;
-            label: string;
+        true: {
+            highlighted: string;
         };
     };
-    color: {
-        primary: {};
-        secondary: {};
-        error: {};
-        warning: {};
-        info: {};
-        success: {};
-    };
 }, {
-    label: string;
+    wrapper: string;
+    activator: string;
     fieldset: string;
-    legend: string;
-}>>>>;
+    value: string;
+    clear: string;
+    menu: string;
+    highlighted: string;
+    progress: string;
+    icon: string;
+    iconWrapper: string;
+}>>>;

package/dist/components/date-time-picker/date-time-picker-styles.js

@@ -10,8 +10,7 @@ var dateTimePickerStyles = tv({
 	slots: {
 		value: "flex gap-1 flex-wrap flex-1 ps-8 transition-all duration-75",
 		iconPrepend: "flex items-center justify-end absolute top-px bottom-0 left-3"
-	},
-	variants: { filled: { true: {} } }
+	}
 });
 //#endregion
 export { dateTimePickerStyles };

package/dist/components/date-time-picker/date-time-picker-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-time-picker-styles.js","names":[],"sources":["../../../src/components/date-time-picker/date-time-picker-styles.ts"],"sourcesContent":["import { activatorStyles, type TextInputVariant } from '@/components/forms/text-input-styles';\nimport { tv } from '@/utils/tv';\n\nexport type DateTimePickerVariant = TextInputVariant;\n\n/**\n * Overrides the `value` slot for flex-wrap + left padding (prepend icon),\n * and adds `iconPrepend` slot for the calendar icon.\n */\nexport const dateTimePickerStyles = tv({\n  extend: activatorStyles,\n  slots: {\n    value: 'flex gap-1 flex-wrap flex-1 ps-8 transition-all duration-75',\n    iconPrepend: 'flex items-center justify-end absolute top-px bottom-0 left-3',\n  },\n  variants: {\n    // Re-declare for type inference — actual styles are in activatorStyles\n    filled: { true: {} },\n  },\n});\n"],"mappings":";;;;;;;AASA,IAAa,uBAAuB,GAAG;CACrC,QAAQ;CACR,OAAO;EACL,OAAO;EACP,aAAa;CACf;CACA,UAAU,EAER,QAAQ,EAAE,MAAM,CAAC,EAAE,EACrB;AACF,CAAC"}
+{"version":3,"file":"date-time-picker-styles.js","names":[],"sources":["../../../src/components/date-time-picker/date-time-picker-styles.ts"],"sourcesContent":["import { activatorStyles } from '@/components/forms/text-input-styles';\nimport { tv } from '@/utils/tv';\n\n/**\n * Overrides the `value` slot for flex-wrap + left padding (prepend icon),\n * and adds `iconPrepend` slot for the calendar icon.\n */\nexport const dateTimePickerStyles = tv({\n  extend: activatorStyles,\n  slots: {\n    value: 'flex gap-1 flex-wrap flex-1 ps-8 transition-all duration-75',\n    iconPrepend: 'flex items-center justify-end absolute top-px bottom-0 left-3',\n  },\n});\n"],"mappings":";;;;;;;AAOA,IAAa,uBAAuB,GAAG;CACrC,QAAQ;CACR,OAAO;EACL,OAAO;EACP,aAAa;CACf;AACF,CAAC"}

package/dist/components/forms/auto-complete/RuiAutoComplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiAutoComplete.js","names":[],"sources":["../../../../src/components/forms/auto-complete/RuiAutoComplete.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue, TItem\">\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { autoCompleteStyles, type AutoCompleteVariant } from '@/components/forms/auto-complete/auto-complete-styles';\nimport RuiAutoCompleteOptionList from '@/components/forms/auto-complete/RuiAutoCompleteOptionList.vue';\nimport RuiAutoCompleteSelection from '@/components/forms/auto-complete/RuiAutoCompleteSelection.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiMenu, { type MenuProps } from '@/components/overlays/menu/RuiMenu.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport {\n  type GroupBy,\n  type ItemDisabled,\n  type KeyOfType,\n  useDropdownMenu,\n  useDropdownOptionProperty,\n} from '@/composables/dropdown-menu';\nimport { type FloatingOptions, Placement } from '@/composables/floating';\nimport {\n  useAutoCompleteFocus,\n  useAutoCompleteKeyboardNavigation,\n  useAutoCompleteSearch,\n  useAutoCompleteValue,\n} from '@/composables/forms/auto-complete';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { isEqual } from '@/utils/is-equal';\nimport { cn } from '@/utils/tv';\n\nexport type AutoCompleteModelValue<TValue> =\n  TValue extends Array<infer U> ? U[] : TValue | undefined;\n\nexport interface RuiAutoCompleteClassNames {\n  root?: VueClassValue;\n  label?: VueClassValue;\n  menu?: VueClassValue;\n}\n\nexport interface AutoCompleteProps<TValue, TItem> {\n  options?: TItem[];\n  keyAttr?: KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>;\n  textAttr?: keyof TItem;\n  disabled?: boolean;\n  loading?: boolean;\n  readOnly?: boolean;\n  dense?: boolean;\n  clearable?: boolean;\n  label?: string;\n  menuOptions?: MenuProps;\n  classNames?: RuiAutoCompleteClassNames;\n  /** @deprecated Use `classNames.label` instead */\n  labelClass?: string;\n  /** @deprecated Use `classNames.menu` instead */\n  menuClass?: string;\n  prependWidth?: number;\n  appendWidth?: number;\n  itemHeight?: number;\n  variant?: AutoCompleteVariant;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  autoSelectFirst?: boolean;\n  chips?: boolean;\n  noFilter?: boolean;\n  hideNoData?: boolean;\n  noDataText?: string;\n  /**\n   * Custom search predicate. Receives the resolved group label as a third\n   * argument when `groupBy` is set, so callers don't have to re-run the\n   * `groupBy` resolver themselves.\n   */\n  filter?: (item: TItem, queryText: string, group?: string) => boolean;\n  hideSelected?: boolean;\n  placeholder?: string;\n  returnObject?: boolean;\n  customValue?: boolean;\n  hideCustomValue?: boolean;\n  required?: boolean;\n  hideSearchInput?: boolean;\n  hideSelectionWrapper?: boolean;\n  groupBy?: GroupBy<TItem>;\n  itemDisabled?: ItemDisabled<TItem>;\n  /**\n   * When true and `groupBy` is set, the default search predicate also matches\n   * against the resolved group label. Items belonging to a group whose label\n   * matches the query stay visible (group header included), even when the\n   * items themselves don't match. No effect when a custom `filter` is supplied\n   * or when `groupBy` is undefined.\n   */\n  searchIncludesGroupLabel?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiAutoComplete',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<AutoCompleteModelValue<TValue>>({ required: true });\n\nconst searchInputModel = defineModel<string>('searchInput', { default: '' });\n\nconst {\n  options = [],\n  disabled = false,\n  loading = false,\n  readOnly = false,\n  dense = false,\n  clearable = false,\n  hideDetails = false,\n  chips = false,\n  label = 'Select',\n  menuOptions,\n  classNames,\n  labelClass,\n  menuClass,\n  variant = 'default',\n  hint,\n  keyAttr,\n  textAttr,\n  itemHeight,\n  prependWidth,\n  appendWidth,\n  errorMessages = [],\n  successMessages = [],\n  autoSelectFirst = false,\n  noFilter = false,\n  hideNoData = false,\n  noDataText = 'No data available',\n  filter,\n  hideSelected = false,\n  placeholder = '',\n  returnObject = false,\n  customValue = false,\n  hideCustomValue = false,\n  required = false,\n  hideSearchInput = false,\n  hideSelectionWrapper = false,\n  groupBy,\n  itemDisabled,\n  searchIncludesGroupLabel = false,\n} = defineProps<AutoCompleteProps<TValue, TItem>>();\n\nconst slots = defineSlots<{\n  'activator'?: (props: {\n    disabled: boolean;\n    value: TItem[];\n    variant: string;\n    readOnly: boolean;\n    attrs: Record<string, unknown>;\n    open: boolean;\n    hasError: boolean;\n    hasSuccess: boolean;\n  }) => any;\n  'activator.label'?: (props: { value: TItem[] }) => any;\n  'selection.prepend'?: (props: { index: number; item: TItem }) => any;\n  'selection'?: (props: { index: number; item: TItem; chipAttrs: Record<string, unknown> }) => any;\n  'item.prepend'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n  'item'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n  'item.append'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n  'group-header'?: (props: { group: string; items: TItem[] }) => any;\n  'no-data'?: () => any;\n  'placeholder'?: (props: { disabled: boolean; readOnly: boolean }) => any;\n  'footer'?: () => any;\n}>();\n\nconst { getText, getIdentifier } = useDropdownOptionProperty<TValue, TItem>({\n  keyAttr,\n  textAttr,\n});\n\nconst textInput = useTemplateRef<HTMLInputElement>('textInput');\nconst activator = useTemplateRef<HTMLDivElement>('activator');\n// Owned by the option list, so it arrives through a ref callback rather than this template\nconst menuRef = shallowRef<HTMLElement | null>(null);\n\nfunction setMenuRef(element: Element | ComponentPublicInstance | null): void {\n  set(menuRef, element instanceof HTMLElement ? element : null);\n}\nconst menuWrapperRef = useTemplateRef<HTMLDivElement>('menuWrapperRef');\n\nconst { focused: activatorFocusedWithin } = useFocusWithin(activator);\nconst { focused: menuWrapperFocusedWithin } = useFocusWithin(menuWrapperRef);\nconst { focused: searchInputFocused } = useFocus(textInput);\nconst { focused: activatorFocused } = useFocus(activator);\n\nconst {\n  internalSearch,\n  filteredOptions,\n  justOpened,\n  updateInternalSearch,\n  textValueToProperValue,\n} = useAutoCompleteSearch<TItem>(\n  () => options,\n  searchInputModel,\n  {\n    keyAttr: () => keyAttr,\n    textAttr: () => textAttr,\n    noFilter: () => noFilter,\n    filter: () => filter,\n    customValue: () => customValue,\n    hideCustomValue: () => hideCustomValue,\n    returnObject: () => returnObject,\n    groupBy: () => groupBy,\n    searchIncludesGroupLabel: () => searchIncludesGroupLabel,\n  },\n);\n\nconst isOpen = ref<boolean>(false);\nconst isHovered = ref<boolean>(false);\n\n// Calculate multiple from modelValue directly to avoid circular dependency\nconst multiple = computed<boolean>(() => Array.isArray(get(modelValue)));\n\nconst shouldApplyValueAsSearch = computed<boolean>(\n  () => !(slots.selection || get(multiple) || chips),\n);\n\nconst { resolveIn, value, setSelected } = useAutoCompleteValue<AutoCompleteModelValue<TValue>, TItem>(\n  modelValue,\n  () => options,\n  {\n    keyAttr: () => keyAttr,\n    returnObject: () => returnObject,\n    customValue: () => customValue,\n  },\n  {\n    getIdentifier,\n    getText,\n    textValueToProperValue,\n    shouldApplyValueAsSearch,\n    isOpen,\n    multiple,\n    updateInternalSearch,\n  },\n);\n\nconst resolvedItemHeight = itemHeight ?? (dense ? 30 : 48);\n\nconst {\n  containerProps,\n  wrapperProps,\n  renderedData,\n  menuWidth,\n  isActiveItem,\n  itemIndexInValue,\n  modelHighlightedIndex,\n  moveHighlight,\n  applyHighlighted,\n  optionsWithSelectedHidden,\n  modelUserNavigated,\n  groupedOptions,\n  isGrouped,\n  isItemDisabled,\n} = useDropdownMenu<TValue, TItem>({\n  itemHeight: resolvedItemHeight,\n  keyAttr,\n  textAttr,\n  options: filteredOptions,\n  dense: () => dense,\n  value,\n  menuRef,\n  setValue,\n  autoSelectFirst,\n  hideSelected,\n  isOpen,\n  getText,\n  getIdentifier,\n  groupBy: () => groupBy,\n  itemDisabled: () => itemDisabled,\n  prependWidth,\n  appendWidth,\n});\n\nconst {\n  focusedValueIndex,\n  moveSelectedValueHighlight,\n  onEnter,\n  onInputDeletePressed,\n  onTab,\n  setValueFocus,\n} = useAutoCompleteKeyboardNavigation<TItem>(\n  {\n    chips: () => chips,\n    customValue: () => customValue,\n    multiple,\n  },\n  {\n    activator,\n    applyHighlighted,\n    clear,\n    filteredOptions,\n    getText,\n    highlightedIndex: modelHighlightedIndex,\n    internalSearch,\n    isOpen,\n    removeValue: (item: TItem): void => { setValue(item); },\n    searchInputFocused,\n    setSearchAsValue,\n    userNavigated: modelUserNavigated,\n    value,\n  },\n);\n\nconst {\n  anyFocused: focusAnyFocused,\n  inputClass: focusInputClass,\n  onActivatorFocused: focusOnActivatorFocused,\n  onInputFocused: focusOnInputFocused,\n  setInputFocus: focusSetInputFocus,\n} = useAutoCompleteFocus(\n  {\n    customValue: () => customValue,\n    disabled: () => disabled,\n    shouldApplyValueAsSearch,\n  },\n  {\n    activatorFocused,\n    activatorFocusedWithin,\n    focusedValueIndex,\n    internalSearch,\n    isOpen,\n    justOpened,\n    menuWrapperFocusedWithin,\n    searchInputFocused,\n    setSearchAsValue,\n    textInput,\n    updateInternalSearch,\n  },\n);\n\nconst menuMinHeight = computed<number>(\n  () => Math.min(5, get(optionsWithSelectedHidden).length) * resolvedItemHeight,\n);\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst valueSet = computed<boolean>(() => get(value).length > 0);\n\n/**\n * True while the consumer's `#placeholder` slot holds the resting content\n * area, where the resting label would overlap it and so hides instead.\n */\nconst placeholderSlotActive = computed<boolean>(() => Boolean(slots.placeholder) && !get(valueSet) && !get(searchInputFocused));\n\nconst usedPlaceholder = computed<string>(() => {\n  if (get(searchInputFocused))\n    return placeholder;\n  return '';\n});\n\nconst outlined = computed<boolean>(() => variant === 'outlined');\nconst float = computed<boolean>(() => (get(isOpen) || get(valueSet) || get(searchInputFocused)) && get(outlined));\n\nconst legendText = computed<string>(() => {\n  if (!get(float) || !label)\n    return '';\n  return required ? `${label} ﹡` : label;\n});\n\nconst ui = computed<ReturnType<typeof autoCompleteStyles>>(() => autoCompleteStyles({\n  filled: variant === 'filled',\n  outlined: get(outlined),\n  float: get(float),\n  showLabel: !!get(legendText),\n  opened: get(isOpen),\n  hovered: get(isHovered),\n  dense,\n  disabled,\n  readonly: readOnly,\n  hasError: get(hasError),\n  hasSuccess: get(hasSuccess) && !get(hasError),\n}));\n\nconst highlightedClass = autoCompleteStyles({}).highlighted();\n\nfunction updateSearchInput(event: Event): void {\n  const target = event.target;\n  if (!(target instanceof HTMLInputElement))\n    return;\n\n  const value = target.value;\n  set(isOpen, true);\n  updateInternalSearch(value);\n  set(justOpened, false);\n}\n\nasync function setValue(val: TItem, skipRefocused = false): Promise<void> {\n  const isMultiple = get(multiple);\n\n  if (isMultiple) {\n    const newValue = [...get(value)];\n    const indexInValue = itemIndexInValue(val);\n    if (indexInValue === -1) {\n      updateInternalSearch();\n      newValue.push(val);\n    }\n    else {\n      newValue.splice(indexInValue, 1);\n    }\n    set(value, newValue);\n  }\n  else {\n    if (get(shouldApplyValueAsSearch))\n      updateInternalSearch(getText(val));\n    else updateInternalSearch();\n\n    set(value, [val]);\n  }\n\n  if (!isMultiple) {\n    if (!skipRefocused) {\n      set(activatorFocused, true);\n      get(activator)?.focus();\n      await nextTick(() => {\n        set(isOpen, false);\n      });\n    }\n    else {\n      set(isOpen, false);\n    }\n  }\n  else if (!skipRefocused) {\n    set(searchInputFocused, true);\n  }\n}\n\nfunction setSearchAsValue(): void {\n  const searchToBeValue = get(internalSearch);\n  if (!searchToBeValue)\n    return;\n\n  const newValue: TItem = textValueToProperValue(searchToBeValue);\n  setValue(newValue, true);\n}\n\nfunction clear(): void {\n  updateInternalSearch();\n  set(modelValue, (Array.isArray(get(modelValue)) ? [] : undefined) as AutoCompleteModelValue<TValue>);\n}\n\nfunction chipAttrs(item: TItem, index: number): Record<string, unknown> {\n  return {\n    'data-index': index,\n    'data-value': getIdentifier(item),\n    'onKeydown': (event: KeyboardEvent): void => {\n      const { key } = event;\n      if (['Backspace', 'Delete'].includes(key)) {\n        event.stopPropagation();\n        event.preventDefault();\n        // Alt + delete restores the chip as search text, which only helps where custom values are accepted\n        if (event.altKey && customValue) {\n          const text = getText(item) ?? '';\n          setValue(item);\n          updateInternalSearch(text);\n        }\n        else {\n          setValue(item);\n        }\n      }\n    },\n    'onClick': (e: MouseEvent): void => {\n      e.stopPropagation();\n      setValueFocus(index);\n    },\n    'onClick:close': (): void => {\n      setValue(item);\n    },\n  };\n}\n\nfunction setSelectionRange(start: number, end: number): void {\n  set(searchInputFocused, true);\n  get(textInput)?.setSelectionRange?.(start, end);\n}\n\nfunction arrowClicked(event: MouseEvent): void {\n  if (get(isOpen)) {\n    set(isOpen, false);\n    event.stopPropagation();\n  }\n}\n\nfunction openMenu(): void {\n  set(isOpen, true);\n}\n\nfunction closeMenu(): void {\n  set(isOpen, false);\n}\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 */\nfunction onOptionsChanged(curr: TItem[], old: TItem[]): void {\n  if (curr === old || customValue || isEqual(curr, old))\n    return;\n\n  if (!get(multiple) && resolveIn(old).length === 0)\n    return;\n\n  setSelected(get(value));\n}\n\nwatch(() => options, onOptionsChanged);\n\nconst menuFloatingOptions = computed<FloatingOptions>(() => ({\n  placement: Placement.bottomStart,\n  ...menuOptions?.options,\n}));\n\ndefineExpose({\n  closeMenu,\n  focus: focusSetInputFocus,\n  openMenu,\n  setSelectionRange,\n});\n</script>\n\n<template>\n  <RuiMenu\n    v-model=\"isOpen\"\n    v-bind=\"{ ...getRootAttrs($attrs, []), ...menuOptions }\"\n    :class=\"ui.wrapper({ class: cn($attrs.class) })\"\n    :options=\"menuFloatingOptions\"\n    :close-on-content-click=\"false\"\n    full-width\n    persist-on-activator-click\n    :menu-class=\"[\n      { hidden: optionsWithSelectedHidden.length === 0 && customValue && !slots['no-data'] },\n      menuOptions?.menuClass,\n    ]\"\n    :error-messages=\"errorMessages\"\n    :success-messages=\"successMessages\"\n    :hint=\"hint\"\n    :dense=\"dense\"\n    :show-details=\"!hideDetails\"\n    :disabled=\"disabled\"\n    disable-auto-focus\n  >\n    <template #activator=\"{ attrs, open, hasError: slotHasError, hasSuccess: slotHasSuccess }\">\n      <slot\n        name=\"activator\"\n        v-bind=\"{ disabled, value, variant, readOnly, attrs, open, hasError: slotHasError, hasSuccess: slotHasSuccess }\"\n      >\n        <div\n          ref=\"activator\"\n          :class=\"ui.activator({ class: cn(classNames?.label) ?? labelClass })\"\n          v-bind=\"{\n            ...getNonRootAttrs($attrs, ['onClick', 'class']),\n            ...(readOnly ? {} : attrs),\n          }\"\n          role=\"combobox\"\n          :aria-expanded=\"open\"\n          :aria-disabled=\"disabled || undefined\"\n          :aria-readonly=\"readOnly || undefined\"\n          :aria-required=\"required || undefined\"\n          :aria-busy=\"loading || undefined\"\n          data-id=\"activator\"\n          :aria-invalid=\"hasError\"\n          :tabindex=\"disabled || readOnly ? -1 : 0\"\n          @mouseenter=\"isHovered = true\"\n          @mouseleave=\"isHovered = false\"\n          @click=\"focusSetInputFocus()\"\n          @focus=\"focusOnActivatorFocused()\"\n          @keydown.enter=\"onEnter($event)\"\n          @keydown.tab=\"onTab($event)\"\n          @keydown.left=\"moveSelectedValueHighlight($event, false)\"\n          @keydown.right=\"moveSelectedValueHighlight($event, true)\"\n          @keydown.up.prevent=\"moveHighlight(true)\"\n          @keydown.down.prevent=\"moveHighlight(false)\"\n          @keydown.home.prevent=\"modelHighlightedIndex = 0\"\n          @keydown.end.prevent=\"modelHighlightedIndex = optionsWithSelectedHidden.length - 1\"\n        >\n          <span\n            v-if=\"(outlined || (!valueSet && !searchInputFocused)) && !placeholderSlotActive\"\n            :class=\"[\n              ui.label(),\n              { 'pr-2': !valueSet && !open && outlined },\n            ]\"\n          >\n            <slot\n              name=\"activator.label\"\n              v-bind=\"{ value }\"\n            >\n              {{ label }}\n            </slot>\n            <span\n              v-if=\"required\"\n              :class=\"ui.required()\"\n            >\n              ﹡\n            </span>\n          </span>\n          <div\n            data-id=\"value\"\n            :class=\"ui.value()\"\n          >\n            <!--\n              Placeholder slot occupies the same flex space the input takes\n              when focused, so transitioning into the focused state doesn't\n              shift the activator's content. pointer-events-none is required\n              so clicks pass through to the activator (otherwise the slot\n              swallows the first click and the menu needs two taps to open).\n            -->\n            <div\n              v-if=\"!valueSet && !searchInputFocused && slots.placeholder\"\n              data-id=\"placeholder\"\n              class=\"flex-1 min-w-0 pointer-events-none\"\n            >\n              <slot\n                name=\"placeholder\"\n                v-bind=\"{ disabled, readOnly }\"\n              />\n            </div>\n            <RuiAutoCompleteSelection\n              :items=\"value\"\n              :chips=\"chips\"\n              :dense=\"dense\"\n              :multiple=\"multiple\"\n              :search-input-focused=\"searchInputFocused\"\n              :hide-selection-wrapper=\"hideSelectionWrapper\"\n              :get-identifier=\"getIdentifier\"\n              :get-text=\"getText\"\n              :chip-attrs=\"chipAttrs\"\n            >\n              <template\n                v-if=\"slots['selection.prepend']\"\n                #prepend=\"slotProps\"\n              >\n                <slot\n                  name=\"selection.prepend\"\n                  v-bind=\"slotProps\"\n                />\n              </template>\n              <template\n                v-if=\"slots.selection\"\n                #default=\"slotProps\"\n              >\n                <slot\n                  name=\"selection\"\n                  v-bind=\"slotProps\"\n                />\n              </template>\n            </RuiAutoCompleteSelection>\n            <input\n              ref=\"textInput\"\n              :disabled=\"disabled\"\n              :value=\"internalSearch\"\n              class=\"bg-transparent outline-none\"\n              type=\"text\"\n              :placeholder=\"usedPlaceholder\"\n              :class=\"[focusInputClass, { hidden: hideSearchInput }]\"\n              :aria-invalid=\"hasError\"\n              aria-autocomplete=\"list\"\n              @keydown.delete=\"onInputDeletePressed()\"\n              @input.stop=\"updateSearchInput($event)\"\n              @focus=\"focusOnInputFocused()\"\n            />\n          </div>\n\n          <RuiButton\n            v-if=\"clearable && valueSet && !disabled\"\n            variant=\"text\"\n            icon\n            size=\"sm\"\n            tabindex=\"-1\"\n            color=\"error\"\n            data-id=\"clear\"\n            :class=\"[\n              ui.clear(),\n              focusAnyFocused && '!visible',\n              { 'mr-2': !dense },\n            ]\"\n            @click.stop.prevent=\"clear()\"\n          >\n            <RuiIcon\n              name=\"lu-x\"\n              size=\"18\"\n            />\n          </RuiButton>\n\n          <span\n            :class=\"ui.iconWrapper()\"\n            @click=\"arrowClicked($event)\"\n          >\n            <RuiIcon\n              :class=\"ui.icon()\"\n              :size=\"dense ? 16 : 24\"\n              name=\"lu-chevron-down\"\n            />\n          </span>\n\n          <RuiProgress\n            v-if=\"loading\"\n            :class=\"ui.progress()\"\n            color=\"primary\"\n            thickness=\"3\"\n            variant=\"indeterminate\"\n          />\n        </div>\n        <fieldset\n          v-if=\"outlined\"\n          :class=\"ui.fieldset()\"\n        >\n          <legend :class=\"ui.legend()\">\n            {{ legendText }}\n          </legend>\n        </fieldset>\n      </slot>\n    </template>\n    <template #default=\"{ width }\">\n      <div ref=\"menuWrapperRef\">\n        <RuiAutoCompleteOptionList\n          v-if=\"optionsWithSelectedHidden.length > 0\"\n          :container-props=\"containerProps\"\n          :wrapper-props=\"wrapperProps\"\n          :set-menu-ref=\"setMenuRef\"\n          :is-grouped=\"isGrouped\"\n          :grouped-options=\"groupedOptions\"\n          :rendered-data=\"renderedData\"\n          :options=\"optionsWithSelectedHidden\"\n          :highlighted-index=\"modelHighlightedIndex\"\n          :highlighted-class=\"highlightedClass\"\n          :dense=\"dense\"\n          :menu-class=\"ui.menu({ class: cn(classNames?.menu) ?? menuClass })\"\n          :menu-style=\"{ width: `${width}px`, minWidth: menuWidth, minHeight: `${menuMinHeight}px` }\"\n          :get-identifier=\"getIdentifier\"\n          :get-text=\"getText\"\n          :is-active-item=\"isActiveItem\"\n          :is-item-disabled=\"isItemDisabled\"\n          @select=\"setValue($event)\"\n          @move-highlight=\"moveHighlight($event)\"\n        >\n          <template\n            v-if=\"slots['group-header']\"\n            #group-header=\"slotProps\"\n          >\n            <slot\n              name=\"group-header\"\n              v-bind=\"slotProps\"\n            />\n          </template>\n          <template\n            v-if=\"slots['item.prepend']\"\n            #item.prepend=\"slotProps\"\n          >\n            <slot\n              name=\"item.prepend\"\n              v-bind=\"slotProps\"\n            />\n          </template>\n          <template\n            v-if=\"slots.item\"\n            #item=\"slotProps\"\n          >\n            <slot\n              name=\"item\"\n              v-bind=\"slotProps\"\n            />\n          </template>\n          <template\n            v-if=\"slots['item.append']\"\n            #item.append=\"slotProps\"\n          >\n            <slot\n              name=\"item.append\"\n              v-bind=\"slotProps\"\n            />\n          </template>\n        </RuiAutoCompleteOptionList>\n\n        <div\n          v-else-if=\"!hideNoData\"\n          :style=\"{ width: `${width}px`, minWidth: menuWidth }\"\n          :class=\"classNames?.menu ?? menuClass\"\n        >\n          <slot name=\"no-data\">\n            <div\n              v-if=\"!customValue\"\n              class=\"p-4\"\n              data-id=\"no-data\"\n            >\n              {{ noDataText }}\n            </div>\n          </slot>\n        </div>\n        <!--\n          The scroll container above reserves ~15px on the right for the\n          scrollbar gutter. We render an equivalent right-padding here so the\n          footer's content aligns with the option rows' content rather than\n          the menu's outer edge. `pr-[var(--rui-scrollbar-gutter,15px)]`\n          lets consumers override if their theme reserves a different width.\n        -->\n        <div\n          v-if=\"slots.footer\"\n          class=\"bg-white dark:bg-rui-grey-900 border-t border-black/[0.12] dark:border-white/[0.12] pr-[var(--rui-scrollbar-gutter,15px)] -mb-2\"\n          data-id=\"footer\"\n        >\n          <slot name=\"footer\" />\n        </div>\n      </div>\n    </template>\n  </RuiMenu>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiAutoComplete.js","names":[],"sources":["../../../../src/components/forms/auto-complete/RuiAutoComplete.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue, TItem\">\nimport type { AutoCompleteModelValue, AutoCompleteProps } from '@/components/forms/auto-complete/auto-complete-props';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { autoCompleteStyles } from '@/components/forms/auto-complete/auto-complete-styles';\nimport RuiAutoCompleteOptionList from '@/components/forms/auto-complete/RuiAutoCompleteOptionList.vue';\nimport RuiAutoCompleteSelection from '@/components/forms/auto-complete/RuiAutoCompleteSelection.vue';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { activatorHandlers } from '@/components/overlays/menu/activator-handlers';\nimport RuiMenu from '@/components/overlays/menu/RuiMenu.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { useLabelPlacement } from '@/composables/defaults/field';\nimport { getOptionHeight, useDropdownMenu, useDropdownOptionProperty } from '@/composables/dropdown-menu';\nimport { type FloatingOptions, Placement } from '@/composables/floating';\nimport {\n  splitAriaAttrs,\n  useAutoCompleteChips,\n  useAutoCompleteCombobox,\n  useAutoCompleteFocus,\n  useAutoCompleteKeyboardNavigation,\n  useAutoCompleteSearch,\n  useAutoCompleteSelection,\n  useAutoCompleteValue,\n} from '@/composables/forms/auto-complete';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { cn } from '@/utils/tv';\n\ndefineOptions({\n  name: 'RuiAutoComplete',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<AutoCompleteModelValue<TValue>>({ required: true });\n\nconst searchInputModel = defineModel<string>('searchInput', { default: '' });\n\nconst {\n  options = [],\n  disabled = false,\n  loading = false,\n  readOnly = false,\n  dense = false,\n  clearable = false,\n  hideDetails = false,\n  chips = false,\n  label = 'Select',\n  labelPlacement = undefined,\n  menuOptions,\n  classNames,\n  prependIcon,\n  hideArrow = false,\n  hint,\n  keyAttr,\n  textAttr,\n  itemHeight,\n  prependWidth,\n  appendWidth,\n  errorMessages = [],\n  successMessages = [],\n  autoSelectFirst = false,\n  noFilter = false,\n  hideNoData = false,\n  noDataText = 'No data available',\n  filter,\n  hideSelected = false,\n  placeholder = '',\n  returnObject = false,\n  customValue = false,\n  hideCustomValue = false,\n  required = false,\n  hideSearchInput = false,\n  hideSelectionWrapper = false,\n  groupBy,\n  itemDisabled,\n  searchIncludesGroupLabel = false,\n} = defineProps<AutoCompleteProps<TValue, TItem>>();\n\nconst slots = defineSlots<{\n  'activator'?: (props: {\n    disabled: boolean;\n    value: TItem[];\n    readOnly: boolean;\n    attrs: Record<string, unknown>;\n    open: boolean;\n    hasError: boolean;\n    hasSuccess: boolean;\n  }) => any;\n  'selection.prepend'?: (props: { index: number; item: TItem }) => any;\n  'selection'?: (props: { index: number; item: TItem; chipAttrs: Record<string, unknown> }) => any;\n  'item.prepend'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n  'item'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n  'item.append'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n  'group-header'?: (props: { group: string; items: TItem[] }) => any;\n  'no-data'?: () => any;\n  'placeholder'?: (props: { disabled: boolean; readOnly: boolean }) => any;\n  'footer'?: () => any;\n}>();\n\nconst { getText, getIdentifier } = useDropdownOptionProperty<TValue, TItem>({\n  keyAttr,\n  textAttr,\n});\n\nconst textInput = useTemplateRef<HTMLInputElement>('textInput');\nconst activator = useTemplateRef<HTMLDivElement>('activator');\n// Owned by the option list, so it arrives through a ref callback rather than this template\nconst menuRef = shallowRef<HTMLElement | null>(null);\n\nfunction setMenuRef(element: Element | ComponentPublicInstance | null): void {\n  set(menuRef, element instanceof HTMLElement ? element : null);\n}\nconst menuWrapperRef = useTemplateRef<HTMLDivElement>('menuWrapperRef');\n\nconst { focused: activatorFocusedWithin } = useFocusWithin(activator);\nconst { focused: menuWrapperFocusedWithin } = useFocusWithin(menuWrapperRef);\nconst { focused: searchInputFocused } = useFocus(textInput);\n\nconst {\n  internalSearch,\n  filteredOptions,\n  justOpened,\n  updateInternalSearch,\n  textValueToProperValue,\n} = useAutoCompleteSearch<TItem>(\n  () => options,\n  searchInputModel,\n  {\n    keyAttr: () => keyAttr,\n    textAttr: () => textAttr,\n    noFilter: () => noFilter,\n    filter: () => filter,\n    customValue: () => customValue,\n    hideCustomValue: () => hideCustomValue,\n    returnObject: () => returnObject,\n    groupBy: () => groupBy,\n    searchIncludesGroupLabel: () => searchIncludesGroupLabel,\n  },\n);\n\nconst isOpen = ref<boolean>(false);\nconst isHovered = ref<boolean>(false);\n\n// Calculate multiple from modelValue directly to avoid circular dependency\nconst multiple = computed<boolean>(() => Array.isArray(get(modelValue)));\n\nconst shouldApplyValueAsSearch = computed<boolean>(\n  () => !(slots.selection || get(multiple) || chips),\n);\n\nconst { value } = useAutoCompleteValue<AutoCompleteModelValue<TValue>, TItem>(\n  modelValue,\n  () => options,\n  {\n    keyAttr: () => keyAttr,\n    returnObject: () => returnObject,\n    customValue: () => customValue,\n  },\n  {\n    getIdentifier,\n    getText,\n    textValueToProperValue,\n    shouldApplyValueAsSearch,\n    isOpen,\n    multiple,\n    updateInternalSearch,\n  },\n);\n\nconst resolvedItemHeight = itemHeight ?? getOptionHeight(dense);\n\n/* eslint-disable @typescript-eslint/no-use-before-define -- these call the selection composable below, which needs their helpers; the calls run after setup */\nconst {\n  containerProps,\n  wrapperProps,\n  renderedData,\n  menuWidth,\n  isActiveItem,\n  itemIndexInValue,\n  modelHighlightedIndex,\n  moveHighlight,\n  applyHighlighted,\n  optionsWithSelectedHidden,\n  modelUserNavigated,\n  groupedOptions,\n  isGrouped,\n  isItemDisabled,\n} = useDropdownMenu<TValue, TItem>({\n  itemHeight: resolvedItemHeight,\n  keyAttr,\n  textAttr,\n  options: filteredOptions,\n  dense: () => dense,\n  value,\n  menuRef,\n  setValue: (item: TItem): void => { setValue(item); },\n  autoSelectFirst,\n  hideSelected,\n  isOpen,\n  getText,\n  getIdentifier,\n  groupBy: () => groupBy,\n  itemDisabled: () => itemDisabled,\n  prependWidth,\n  appendWidth,\n});\n\nconst {\n  focusedValueIndex,\n  moveSelectedValueHighlight,\n  onEnter,\n  onInputDeletePressed,\n  onInputKeydown,\n  onTab,\n  setValueFocus,\n} = useAutoCompleteKeyboardNavigation<TItem>(\n  {\n    chips: () => chips,\n    customValue: () => customValue,\n    multiple,\n  },\n  {\n    activator,\n    applyHighlighted,\n    clear: (): void => clear(),\n    filteredOptions,\n    getText,\n    highlightedIndex: modelHighlightedIndex,\n    internalSearch,\n    isOpen,\n    removeValue: (item: TItem): void => { setValue(item); },\n    searchInputFocused,\n    setSearchAsValue: (): void => setSearchAsValue(),\n    updateInternalSearch,\n    userNavigated: modelUserNavigated,\n    value,\n  },\n);\n\nconst { chipAttrs, selectChip } = useAutoCompleteChips<TItem>({\n  focusInput: (): void => get(textInput)?.focus(),\n  getIdentifier,\n  setValue: (item: TItem): void => { setValue(item); },\n  setValueFocus,\n});\n\n/** The selected chip's text, read out by the live region so the selection is heard, not only seen. */\nconst selectedChipAnnouncement = computed<string>(() => {\n  const item = get(value)[get(focusedValueIndex)];\n  return chips && item !== undefined ? `${getText(item) ?? ''}, press Backspace to remove` : '';\n});\n\nconst {\n  anyFocused: focusAnyFocused,\n  editing,\n  inputClass: focusInputClass,\n  onInputFocused: focusOnInputFocused,\n  onSettledKeydown,\n  setInputFocus: focusSetInputFocus,\n  settleOnInput,\n  unsettle,\n} = useAutoCompleteFocus(\n  {\n    customValue: () => customValue,\n    disabled: () => disabled,\n    shouldApplyValueAsSearch,\n  },\n  {\n    activatorFocusedWithin,\n    focusedValueIndex,\n    internalSearch,\n    isOpen,\n    justOpened,\n    menuWrapperFocusedWithin,\n    searchInputFocused,\n    setSearchAsValue: (): void => setSearchAsValue(),\n    textInput,\n    updateInternalSearch,\n  },\n);\n\n/* eslint-enable @typescript-eslint/no-use-before-define -- the wiring above ends here */\n\nconst { clear, setSearchAsValue, setValue } = useAutoCompleteSelection<TItem>({\n  getText,\n  internalSearch,\n  isOpen,\n  itemIndexInValue,\n  multiple,\n  resetModel: (): void => set(modelValue, (Array.isArray(get(modelValue)) ? [] : undefined) as AutoCompleteModelValue<TValue>),\n  searchInputFocused,\n  settleOnInput,\n  shouldApplyValueAsSearch,\n  textValueToProperValue,\n  updateInternalSearch,\n  value,\n});\n\nconst menuMinHeight = computed<number>(\n  () => Math.min(5, get(optionsWithSelectedHidden).length) * resolvedItemHeight,\n);\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst valueSet = computed<boolean>(() => get(value).length > 0);\n\nconst usedPlaceholder = computed<string>(() => {\n  if (get(editing))\n    return placeholder;\n  return '';\n});\n\nconst labelId = useId();\nconst placement = useLabelPlacement(() => labelPlacement);\nconst { activeDescendant, optionIdPrefix } = useAutoCompleteCombobox(isOpen, modelHighlightedIndex);\n\n// An empty, unfocused field shows the placeholder where the collapsed search input sits\nconst restingPlaceholder = computed<boolean>(() =>\n  !!placeholder && !get(valueSet) && !get(editing) && !slots.placeholder,\n);\n\nconst ui = computed<ReturnType<typeof autoCompleteStyles>>(() => autoCompleteStyles({\n  opened: get(isOpen),\n  hovered: get(isHovered),\n  dense,\n  disabled,\n  readonly: readOnly,\n  hasError: get(hasError),\n  hasSuccess: get(hasSuccess) && !get(hasError),\n}));\n\nconst highlightedClass = autoCompleteStyles({}).highlighted();\n\nfunction updateSearchInput(event: Event): void {\n  const target = event.target;\n  if (!(target instanceof HTMLInputElement))\n    return;\n\n  const value = target.value;\n  unsettle();\n  set(isOpen, true);\n  updateInternalSearch(value);\n  set(justOpened, false);\n}\n\n/**\n * Moves the highlight through the options, which also leaves the picked-value display for a search.\n *\n * @param up - whether to move towards the first option\n */\nfunction onArrow(up: boolean): void {\n  unsettle();\n  moveHighlight(up);\n}\n\nfunction setSelectionRange(start: number, end: number): void {\n  set(searchInputFocused, true);\n  get(textInput)?.setSelectionRange?.(start, end);\n}\n\nfunction arrowClicked(event: MouseEvent): void {\n  if (get(isOpen)) {\n    set(isOpen, false);\n    event.stopPropagation();\n  }\n}\n\nfunction openMenu(): void {\n  set(isOpen, true);\n}\n\nfunction closeMenu(): void {\n  set(isOpen, false);\n}\n\nconst menuFloatingOptions = computed<FloatingOptions>(() => ({\n  placement: Placement.bottomStart,\n  ...menuOptions?.options,\n}));\n\ndefineExpose({\n  closeMenu,\n  focus: focusSetInputFocus,\n  openMenu,\n  setSelectionRange,\n});\n</script>\n\n<template>\n  <RuiMenu\n    v-model=\"isOpen\"\n    v-bind=\"{ ...getRootAttrs($attrs, []), ...menuOptions }\"\n    :class=\"ui.wrapper({ class: cn($attrs.class) })\"\n    :class-names=\"{\n      ...menuOptions?.classNames,\n      details: ['px-0', cn(menuOptions?.classNames?.details) ?? ''],\n      menu: [\n        { hidden: optionsWithSelectedHidden.length === 0 && customValue && !slots['no-data'] },\n        cn(menuOptions?.classNames?.menu) ?? '',\n      ],\n    }\"\n    :options=\"menuFloatingOptions\"\n    :close-on-content-click=\"false\"\n    full-width\n    persist-on-activator-click\n    :error-messages=\"errorMessages\"\n    :success-messages=\"successMessages\"\n    :hint=\"hint\"\n    :dense=\"dense\"\n    :show-details=\"!hideDetails\"\n    :disabled=\"disabled\"\n    disable-auto-focus\n    role=\"listbox\"\n  >\n    <template\n      v-if=\"label\"\n      #label\n    >\n      <RuiFieldLabel\n        :id=\"labelId\"\n        :text=\"label\"\n        :hidden=\"placement === 'hidden'\"\n        :required=\"required\"\n        :disabled=\"disabled\"\n      />\n    </template>\n    <template #activator=\"{ attrs, open, hasError: slotHasError, hasSuccess: slotHasSuccess }\">\n      <slot\n        name=\"activator\"\n        v-bind=\"{ disabled, value, readOnly, attrs, open, hasError: slotHasError, hasSuccess: slotHasSuccess }\"\n      >\n        <!--\n          The visual box: it takes clicks and the keys that bubble from the input and the chips, but\n          is no tab stop and carries no role. The input inside is the combobox (ARIA 1.2), so the\n          chips sit beside it rather than nested in it.\n        -->\n        <div\n          ref=\"activator\"\n          :class=\"ui.activator({ class: cn([hideArrow && 'pr-3', classNames?.label]) })\"\n          v-bind=\"{\n            ...splitAriaAttrs(getNonRootAttrs($attrs, ['onClick', 'class']), false),\n            ...(readOnly ? {} : activatorHandlers(attrs)),\n          }\"\n          data-id=\"activator\"\n          @mouseenter=\"isHovered = true\"\n          @mouseleave=\"isHovered = false\"\n          @click=\"focusSetInputFocus()\"\n          @keydown.enter=\"onEnter($event)\"\n          @keydown.tab=\"onTab($event)\"\n          @keydown.left=\"moveSelectedValueHighlight($event, false)\"\n          @keydown.right=\"moveSelectedValueHighlight($event, true)\"\n          @keydown.up.prevent=\"onArrow(true)\"\n          @keydown.down.prevent=\"onArrow(false)\"\n          @keydown.home.prevent=\"modelHighlightedIndex = 0\"\n          @keydown.end.prevent=\"modelHighlightedIndex = optionsWithSelectedHidden.length - 1\"\n        >\n          <span\n            v-if=\"prependIcon\"\n            :class=\"ui.prepend()\"\n            data-id=\"prepend\"\n          >\n            <RuiIcon\n              :name=\"prependIcon\"\n              :size=\"dense ? 16 : 18\"\n            />\n          </span>\n          <div\n            data-id=\"value\"\n            :class=\"ui.value()\"\n          >\n            <!--\n              Placeholder slot occupies the same flex space the input takes\n              when focused, so transitioning into the focused state doesn't\n              shift the activator's content. pointer-events-none is required\n              so clicks pass through to the activator (otherwise the slot\n              swallows the first click and the menu needs two taps to open).\n            -->\n            <span\n              v-if=\"restingPlaceholder\"\n              data-id=\"resting-placeholder\"\n              class=\"truncate text-rui-text-secondary pointer-events-none\"\n            >\n              {{ placeholder }}\n            </span>\n            <div\n              v-if=\"!valueSet && !editing && slots.placeholder\"\n              data-id=\"placeholder\"\n              class=\"flex-1 min-w-0 pointer-events-none\"\n            >\n              <slot\n                name=\"placeholder\"\n                v-bind=\"{ disabled, readOnly }\"\n              />\n            </div>\n            <RuiAutoCompleteSelection\n              :items=\"value\"\n              :chips=\"chips\"\n              :dense=\"dense\"\n              :multiple=\"multiple\"\n              :search-input-focused=\"editing\"\n              :hide-selection-wrapper=\"hideSelectionWrapper\"\n              :get-identifier=\"getIdentifier\"\n              :get-text=\"getText\"\n              :chip-attrs=\"chipAttrs\"\n              :selected-index=\"focusedValueIndex\"\n              :select-chip=\"selectChip\"\n            >\n              <template\n                v-if=\"slots['selection.prepend']\"\n                #prepend=\"slotProps\"\n              >\n                <slot\n                  name=\"selection.prepend\"\n                  v-bind=\"slotProps\"\n                />\n              </template>\n              <template\n                v-if=\"slots.selection\"\n                #default=\"slotProps\"\n              >\n                <slot\n                  name=\"selection\"\n                  v-bind=\"slotProps\"\n                />\n              </template>\n            </RuiAutoCompleteSelection>\n            <!-- with hideSearchInput the input stays as a collapsed, read-only combobox, so the field keeps a focus target -->\n            <input\n              ref=\"textInput\"\n              :disabled=\"disabled\"\n              :readonly=\"readOnly || hideSearchInput\"\n              :value=\"internalSearch\"\n              class=\"bg-transparent outline-hidden\"\n              type=\"text\"\n              :placeholder=\"usedPlaceholder\"\n              :class=\"hideSearchInput ? 'w-0 h-0 min-w-0 opacity-0' : focusInputClass\"\n              role=\"combobox\"\n              :tabindex=\"readOnly ? -1 : undefined\"\n              :aria-labelledby=\"label ? labelId : undefined\"\n              :aria-expanded=\"open\"\n              aria-haspopup=\"listbox\"\n              :aria-controls=\"attrs['aria-controls']\"\n              :aria-activedescendant=\"activeDescendant\"\n              :aria-readonly=\"readOnly || undefined\"\n              :aria-required=\"required || undefined\"\n              :aria-busy=\"loading || undefined\"\n              :aria-invalid=\"hasError\"\n              aria-autocomplete=\"list\"\n              data-id=\"search-input\"\n              v-bind=\"splitAriaAttrs(getNonRootAttrs($attrs, ['onClick', 'class']), true)\"\n              @keydown=\"onSettledKeydown($event); onInputKeydown($event)\"\n              @keydown.delete=\"onInputDeletePressed($event)\"\n              @input.stop=\"updateSearchInput($event)\"\n              @focus=\"focusOnInputFocused()\"\n            />\n            <span\n              class=\"sr-only\"\n              aria-live=\"polite\"\n            >\n              {{ selectedChipAnnouncement }}\n            </span>\n          </div>\n\n          <RuiButton\n            v-if=\"clearable && valueSet && !disabled && !readOnly\"\n            variant=\"text\"\n            icon\n            size=\"sm\"\n            tabindex=\"-1\"\n            data-id=\"clear\"\n            aria-label=\"Clear\"\n            :class=\"[\n              ui.clear(),\n              focusAnyFocused && 'visible!',\n              { 'mr-2': !dense },\n            ]\"\n            @click.stop.prevent=\"clear()\"\n          >\n            <RuiIcon\n              name=\"lu-x\"\n              size=\"16\"\n            />\n          </RuiButton>\n\n          <span\n            v-if=\"!hideArrow\"\n            :class=\"ui.iconWrapper()\"\n            @click=\"arrowClicked($event)\"\n          >\n            <RuiIcon\n              :class=\"ui.icon()\"\n              :size=\"dense ? 16 : 20\"\n              name=\"lu-chevron-down\"\n            />\n          </span>\n\n          <RuiProgress\n            v-if=\"loading\"\n            :class=\"ui.progress()\"\n            color=\"primary\"\n            thickness=\"2\"\n            variant=\"indeterminate\"\n          />\n        </div>\n        <fieldset :class=\"ui.fieldset()\" />\n      </slot>\n    </template>\n    <template #default=\"{ width }\">\n      <div ref=\"menuWrapperRef\">\n        <RuiAutoCompleteOptionList\n          v-if=\"optionsWithSelectedHidden.length > 0\"\n          :container-props=\"containerProps\"\n          :wrapper-props=\"wrapperProps\"\n          :set-menu-ref=\"setMenuRef\"\n          :is-grouped=\"isGrouped\"\n          :grouped-options=\"groupedOptions\"\n          :rendered-data=\"renderedData\"\n          :options=\"optionsWithSelectedHidden\"\n          :highlighted-index=\"modelHighlightedIndex\"\n          :highlighted-class=\"highlightedClass\"\n          :dense=\"dense\"\n          :menu-class=\"ui.menu({ class: cn(classNames?.menu) })\"\n          :menu-style=\"{ width: `${width}px`, minWidth: menuWidth, minHeight: `${menuMinHeight}px` }\"\n          :get-identifier=\"getIdentifier\"\n          :get-text=\"getText\"\n          :is-active-item=\"isActiveItem\"\n          :is-item-disabled=\"isItemDisabled\"\n          :option-id-prefix=\"optionIdPrefix\"\n          @select=\"setValue($event)\"\n          @move-highlight=\"moveHighlight($event)\"\n        >\n          <template\n            v-if=\"slots['group-header']\"\n            #group-header=\"slotProps\"\n          >\n            <slot\n              name=\"group-header\"\n              v-bind=\"slotProps\"\n            />\n          </template>\n          <template\n            v-if=\"slots['item.prepend']\"\n            #item.prepend=\"slotProps\"\n          >\n            <slot\n              name=\"item.prepend\"\n              v-bind=\"slotProps\"\n            />\n          </template>\n          <template\n            v-if=\"slots.item\"\n            #item=\"slotProps\"\n          >\n            <slot\n              name=\"item\"\n              v-bind=\"slotProps\"\n            />\n          </template>\n          <template\n            v-if=\"slots['item.append']\"\n            #item.append=\"slotProps\"\n          >\n            <slot\n              name=\"item.append\"\n              v-bind=\"slotProps\"\n            />\n          </template>\n        </RuiAutoCompleteOptionList>\n\n        <div\n          v-else-if=\"!hideNoData\"\n          :style=\"{ width: `${width}px`, minWidth: menuWidth }\"\n          :class=\"classNames?.menu\"\n        >\n          <slot name=\"no-data\">\n            <div\n              v-if=\"!customValue\"\n              class=\"p-4\"\n              data-id=\"no-data\"\n            >\n              {{ noDataText }}\n            </div>\n          </slot>\n        </div>\n        <!--\n          The scroll container above reserves ~15px on the right for the\n          scrollbar gutter. We render an equivalent right-padding here so the\n          footer's content aligns with the option rows' content rather than\n          the menu's outer edge. `pr-(--rui-scrollbar-gutter,15px)`\n          lets consumers override if their theme reserves a different width.\n        -->\n        <div\n          v-if=\"slots.footer\"\n          class=\"bg-rui-menu border-t border-rui-divider pr-(--rui-scrollbar-gutter,15px) -mb-2\"\n          data-id=\"footer\"\n        >\n          <slot name=\"footer\" />\n        </div>\n      </div>\n    </template>\n  </RuiMenu>\n</template>\n"],"mappings":""}