@leaflink/stash 53.4.5 → 53.4.7

package/dist/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../src/components/Select/Select.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { FieldProps } from '../Field/Field.types';\n\n  // Note: the `trackBy` prop, the `single` prop, and the fact that options can be strings prevents us from knowing the type of the selected options\n\n  type Option = any;\n\n  type SelectedOptions = Option | Option[];\n\n  export interface SelectProps extends FieldProps {\n    /**\n     * If there is only 1 option selected, it prevents that option from being de-selected\n     */\n    preventEmpty?: boolean;\n\n    /**\n     * @deprecated The `allowEmpty` prop is no longer supported; use `preventEmpty` instead.\n     */\n    allowEmpty?: string | boolean | null;\n\n    /**\n     * If `options` are an object, this is what prop to use for display.\n     */\n    displayBy?: string;\n\n    /**\n     * List of one or more fields to search on. When empty, displayBy will be used\n     */\n    searchBy?: string[];\n\n    /**\n     * Default field to track selected options by.\n     */\n    trackBy?: string;\n\n    /**\n     * Placeholder text.\n     */\n    placeholder?: string;\n\n    /**\n     * @deprecated Use the `error-text` prop instead\n     */\n    error?: string;\n\n    /**\n     * @deprecated Use the `hint-text` prop instead\n     */\n    hint?: string;\n\n    /**\n     * Sets a custom icon.\n     */\n    icon?: string | boolean;\n\n    /**\n     * Sets a name attribute on the native (hidden) select element\n     *\n     * Setting the default value to `undefined` so the attribute isn't rendered if not explicitly provided to ensure backwards compatibility with MP django forms\n     */\n    name?: string;\n\n    /**\n     * The list of all options to select from.\n     */\n    options?: Option[] | readonly Option[];\n\n    /**\n     * Lazily evaluate and set component `options`. Will execute upon user mouseover.\n     */\n    lazy?: () => Option[];\n\n    /**\n     * Sets the currently-selected value(s) for the component.\n     * Accepts an array of Objects, or a single Object (if `single` is true), or a string\n     */\n    modelValue?: SelectedOptions;\n\n    /**\n     * @deprecated Use :model-value or v-model instead of :value.\n     */\n    value?: SelectedOptions | null;\n\n    /**\n     * Hides the search input\n     */\n    hideSearch?: boolean;\n\n    /**\n     * @deprecated The `searchable` prop is no longer supported; Use `hideSearch` instead.\n     */\n    searchable?: string | boolean | null;\n\n    /**\n     * If true, prevents the search term from being cleared when the drawer is dismissed.\n     */\n    preserveSearchTerm?: boolean;\n\n    /**\n     * Prevents the options from being filtered when the search term changes.\n     * Allows the parent to filter the options.\n     */\n    disableFiltering?: boolean;\n\n    /**\n     * Functions as a single select, if true\n     */\n    single?: boolean;\n\n    /**\n     * Prevents the Selected Option from being truncated, if true\n     */\n    noTruncate?: boolean;\n\n    /**\n     * On an ajaxed request when the dropdown is open, we may be experiencing slower load times.\n     * This flag will drop a loader into the dropdown.  Note: This has never been design reviewed.\n     */\n    loading?: boolean;\n\n    /**\n     * @deprecated Instead, use the `@search` event (the onSearch prop) and ensure its event handler returns a Promise that resolves after the search is complete.\n     */\n    searchLoading?: boolean;\n\n    /**\n     * In the selection text we use this to give more visual distinction to what type of item(s) are selected\n     * E.g. 2 customers selected. An empty string will result in `2 selected`.\n     */\n    selectItemType?: string;\n\n    /**\n     * Hides the \"check\" icon if truthy\n     */\n    hideCheck?: boolean;\n\n    searchPlaceholder?: string;\n\n    /**\n     * Equivalent to emitting a \"search\" event, except this prop can be used to populate the list of `options` using an HTTP request because a prop's return value can be received and awaited, unlike an event.\n     *\n     * **Tip:** to show a loading indicator while searching, return a Promise that resolves after the search is complete.\n     *\n     * **Warning:** the search input is debounced so there is no need to debounce this function.\n     */\n    onSearch?: (searchTerm: string) => Promise<void> | void;\n\n    /**\n     * Uses the \"fuzzy search\" algorithm when searching, if true\n     */\n    useFuzzySearch?: boolean;\n\n    /**\n     * Sets the placement of the dropdown\n     * @default 'bottom-start'\n     */\n    menuPlacement?: Placement;\n\n    /**\n     * Enables teleporting the dropdown\n     * @default false\n     */\n    enableTeleport?: boolean;\n\n    /**\n     * The selector or element to which the dropdown should be teleported\n     * @default `'#stash-menus-mount-node'`\n     */\n    teleportTo?: string | HTMLElement;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import { autoUpdate, flip, offset, type Placement, type Side, size, useFloating } from '@floating-ui/vue';\n  import logger from '@leaflink/snitch';\n  import debounce from 'lodash-es/debounce';\n  import isEmpty from 'lodash-es/isEmpty';\n  import isEqual from 'lodash-es/isEqual';\n  import isPlainObject from 'lodash-es/isPlainObject';\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, nextTick, onMounted, onUnmounted, type Ref, ref, useAttrs, watch } from 'vue';\n\n  import useSearch from '../../composables/useSearch/useSearch';\n  import { DEBOUNCE, KEY_CODES } from '../../constants';\n  import vClickoutside from '../../directives/clickoutside/clickoutside';\n  import { DEFAULT_MENUS_PLUGIN_NODE_ID } from '../../plugins/MenusPlugin';\n  import Chip from '../Chip/Chip.vue';\n  import Field from '../Field/Field.vue';\n  import Icon, { IconName } from '../Icon/Icon.vue';\n\n  const GAP_HEIGHT = 6;\n\n  const MENU_MAX_HEIGHT_PX = 300;\n\n  defineOptions({\n    name: 'll-select',\n  });\n\n  const props = withDefaults(defineProps<SelectProps>(), {\n    preventEmpty: false,\n    allowEmpty: null,\n    displayBy: 'name',\n    searchBy: () => [],\n    trackBy: 'id',\n    placeholder: 'Select option',\n    error: '',\n    hint: '',\n    icon: 'caret-down',\n    name: undefined,\n    options: () => [],\n    lazy: undefined,\n    modelValue: () => [],\n    value: null,\n    hideSearch: false,\n    searchable: null,\n    preserveSearchTerm: false,\n    disableFiltering: false,\n    single: false,\n    noTruncate: false,\n    loading: false,\n    searchLoading: false,\n    selectItemType: '',\n    hideCheck: false,\n    searchPlaceholder: 'Search',\n    onSearch: undefined,\n    useFuzzySearch: false,\n    menuPlacement: 'bottom-start',\n    enableTeleport: false,\n    teleportTo: `#${DEFAULT_MENUS_PLUGIN_NODE_ID}`,\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the model value changes.\n     */\n    (e: 'update:model-value', selectedOptions: SelectedOptions): void;\n    /**\n     * Emitted the selected value(s) a cleared.\n     */\n    (e: 'clear'): void;\n    /**\n     * Emitted when an option is added.\n     */\n    (e: 'add', optionAdded: Option): void;\n    /**\n     * Emitted when an option is removed.\n     */\n    (e: 'remove', optionRemoved: Option, index: number): void;\n    /**\n     * Emitted when the select is opened.\n     */\n    (e: 'opened'): void;\n    /**\n     * Emitted when the select is closed.\n     */\n    (e: 'closed', selectedOptions: SelectedOptions): void;\n  }>();\n\n  const attrs = useAttrs();\n  const slots = defineSlots<{\n    /**\n     * Selected value(s) custom text. Exposes the option object and remove function.\n     */\n    selected(props: {\n      /**\n       * The selected option object.\n       */\n      option: Option;\n      /**\n       * Function to remove the selected option from the selection.\n       */\n      onRemove: () => void;\n      /**\n       * Class to apply to the selected chip.\n       */\n      chipSelectedClass: string;\n    }): unknown;\n    /**\n     * Select custom option text. Exposes the option object\n     */\n    option(props: {\n      /**\n       * Option The option instance for this list item.\n       */\n      option: Option;\n    }): unknown;\n    /**\n     * Slot for when there are no options available.\n     */\n    'no-options'(): unknown;\n    /**\n     * Slot to display a helpful hint message below the select field.\n     */\n    hint(): unknown;\n  }>();\n\n  const selectRef = ref<HTMLDivElement | null>(null);\n  const contentRef = ref<HTMLDivElement | null>(null);\n  const optionsWrapperRef = ref<HTMLDivElement | null>(null);\n  const chipsRef = ref<HTMLUListElement | null>(null);\n  const searchRef = ref<HTMLInputElement | null>(null);\n\n  const chipsHeight = ref(0);\n  const contentHeight = ref(0);\n  const internalValue = ref<Option[]>([]) as Ref<Option[]>;\n  const searchFor = ref<(searchTerm: string) => Option[]>(() => []); // initialized in the watch handler for options\n  const searchTerm = ref('');\n  const activeIndex = ref(-1);\n  const isActive = ref(false);\n  const pendingSearchRequests = ref({});\n  const shouldUseLazyOptions = ref(false);\n\n  const { floatingStyles, update: updateFloating } = useFloating(selectRef, optionsWrapperRef, {\n    whileElementsMounted: autoUpdate,\n    placement: props.menuPlacement,\n    middleware: [\n      flip(),\n      offset(({ rects, placement }) => {\n        // gets the current placement side, especially after flip() is run\n        const placementSide = placement.split('-')[0] as Side;\n        const isBottom = placementSide === ('bottom' satisfies Side);\n\n        // if the placement is at the bottom, we need to adjust the offset\n        if (isBottom && chipsHeight.value > contentHeight.value) {\n          return chipsHeight.value - rects.reference.height + GAP_HEIGHT;\n        } else {\n          return GAP_HEIGHT;\n        }\n      }),\n      size({\n        apply({ availableHeight, elements, rects }) {\n          if (props.enableTeleport) {\n            Object.assign(elements.floating.style, {\n              maxWidth: `${rects.reference.width}px`,\n              maxHeight: `${Math.min(availableHeight, MENU_MAX_HEIGHT_PX)}px`,\n            });\n          }\n        },\n      }),\n    ],\n  });\n  const resizeObserverChips = new ResizeObserver(() => debouncedUpdateChipsHeight());\n\n  const isSearchable = computed(() => !props.hideSearch && props.searchable !== 'false' && props.searchable !== false);\n\n  const internalOptions = computed(() => {\n    let OPTIONS = (shouldUseLazyOptions.value && props.lazy ? props.lazy() : props.options).filter(Boolean); // prevent [undefined]\n\n    // if `options` is an array... but not an array of objects\n    if (!isPlainObject(OPTIONS[0])) {\n      OPTIONS = OPTIONS.map((name, id) => ({ name, id }) as unknown as Option);\n    }\n\n    return OPTIONS;\n  });\n\n  const readOnlyValue = computed(() => {\n    if (!internalValue.value.length) {\n      return '';\n    }\n\n    return internalValue.value.map((option) => option[props.displayBy] || option).join(', ');\n  });\n\n  const isSearching = computed(() => props.searchLoading || Object.keys(pendingSearchRequests.value).length > 0);\n\n  const filteredOptions = computed(() => {\n    if (props.disableFiltering || !(searchTerm.value || '').trim()) {\n      return internalOptions.value;\n    }\n\n    return searchFor.value(searchTerm.value);\n  });\n\n  const isChipsOneLine = computed(() => chipsHeight.value <= contentHeight.value);\n\n  const shouldShowTotal = computed(\n    () => !isActive.value && !props.single && !isChipsOneLine.value && internalValue.value.length,\n  );\n\n  const clearSelectionText = computed(() => {\n    return [internalValue.value.length, props.selectItemType, 'selected'].filter(Boolean).join(' ');\n  });\n\n  const shouldPreventEmpty = computed(() => {\n    return props.preventEmpty || props.allowEmpty === 'false' || props.allowEmpty === false;\n  });\n\n  watch(searchTerm, (currentValue, oldValue) => oldValue !== currentValue && setIndex(-1));\n\n  watch(internalValue, () => debouncedUpdateChipsHeight(), { deep: true });\n\n  watch(\n    () => props.modelValue,\n    (value) => {\n      // multiple\n      if (Array.isArray(value)) {\n        const newValue = value.filter(Boolean); // sometimes modelValue is [undefined]\n\n        if (!isEqual(newValue, internalValue.value)) {\n          internalValue.value = newValue;\n        }\n\n        return;\n      }\n\n      // single; if value is a non-empty string or a non-empty object\n      if (!isEmpty(value)) {\n        if (!isEqual(value, internalValue.value[0])) {\n          internalValue.value[0] = value;\n        }\n\n        return;\n      }\n\n      // if value is an empty object or falsy\n      internalValue.value = [];\n    },\n    { immediate: true },\n  );\n\n  watch(\n    () => props.options,\n    () => {\n      const { searchFor: searchForFn } = useSearch<Option>({\n        items: computed(() => internalOptions.value),\n        fieldNames: props.searchBy.length ? props.searchBy : [props.displayBy],\n        trackBy: props.trackBy,\n      });\n\n      searchFor.value = (searchTerm) => searchForFn(searchTerm, { fuzzy: props.useFuzzySearch });\n    },\n    { immediate: true },\n  );\n\n  watch(chipsHeight, () => debouncedUpdateFloating());\n\n  const debouncedUpdateFloating = debounce(() => updateFloating(), 50);\n  const debouncedUpdateChipsHeight = debounce(() => updateChipsHeight(), 50);\n\n  const isOptionDisabled = (option: Option) => {\n    return option && typeof option === 'object' && 'disabled' in option && option?.disabled;\n  };\n\n  const clear = () => {\n    internalValue.value = [];\n    emit('update:model-value', props.single ? undefined : internalValue.value);\n    emit('clear');\n  };\n\n  /**\n   * Adds (or selects) an option.\n   * @param {Option} option The selected option\n   */\n  const handleSelect = (option?: Option) => {\n    if (props.disabled || !option || isOptionDisabled(option)) {\n      return;\n    }\n\n    if (!isSelected(option)) {\n      if (props.single) {\n        internalValue.value = [];\n      }\n\n      internalValue.value.push(option);\n      emit('update:model-value', props.single ? internalValue.value[0] : internalValue.value);\n      emit('add', option);\n    } else {\n      remove(option);\n    }\n\n    if (props.single) {\n      dismiss();\n    }\n  };\n\n  const handleSelectChange = (evt) => {\n    // If this is a single select, just pass along the option\n    // This short-circuit is purely for readability, as the iterations for multi would also work for single selects\n    if (props.single) {\n      const selectedOption = internalOptions.value.find((opt) => opt[props.trackBy]?.toString() === evt.target.value);\n      handleSelect(selectedOption);\n      return;\n    }\n\n    // Spread the HTMLCollection (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection) to array so we can invoke `find`\n    const selectedOptions = [...evt.target.selectedOptions];\n\n    // If it's a multiselect, the HTML select used for the screen reader can have multiple items\n    // deselected and a new one selected in one change event.\n    // We need to reconcile the new selected options with our internal state\n\n    // 1. remove all the items in our internal state that are no longer present\n    // (Spread this array so we can remove items from it while iterating)\n    for (const internalOption of [...internalValue.value]) {\n      const selectedOption = selectedOptions.find((opt) => opt.value === internalOption[props.trackBy]?.toString());\n\n      if (!selectedOption) {\n        remove(internalOption);\n      }\n    }\n\n    // 2. add all the items that are now selected if needed\n    for (const selectedOption of selectedOptions) {\n      const internalOption = internalOptions.value.find(\n        (opt) => opt[props.trackBy]?.toString() === selectedOption.value,\n      );\n\n      if (isSelected(internalOption)) {\n        continue;\n      } else {\n        handleSelect(internalOption);\n      }\n    }\n  };\n\n  /**\n   * Removes (or un-selects) an option.\n   * @param {Option} option The option to be removed\n   */\n  const remove = (option: Option) => {\n    if (props.disabled || (shouldPreventEmpty.value && internalValue.value.length === 1)) {\n      return;\n    }\n\n    const index = internalValue.value.findIndex((opt) => opt[props.trackBy] === option[props.trackBy]);\n\n    if (index === -1) {\n      logger.warn('ll-select: could not find option to remove', option);\n      return;\n    }\n\n    internalValue.value.splice(index, 1);\n    emit('update:model-value', props.single ? internalValue.value[0] : internalValue.value);\n    emit('remove', option, index);\n  };\n\n  /**\n   * Opens the `options` drawer and provides focus.\n   */\n  const open = () => {\n    if (isActive.value) {\n      return;\n    }\n\n    debouncedUpdateChipsHeight();\n\n    isActive.value = true;\n    emit('opened');\n\n    if (isSearchable.value) {\n      nextTick(() => {\n        searchRef.value?.focus({ preventScroll: true });\n      });\n    }\n  };\n\n  /**\n   * Closes the drawer and cleans up a few settings.\n   */\n  const dismiss = () => {\n    if (isActive.value) {\n      emit('closed', internalValue.value);\n    }\n\n    setIndex(-1);\n    isActive.value = false;\n\n    if (!props.preserveSearchTerm) {\n      searchTerm.value = '';\n    }\n\n    // The optional chaining here is required.\n    // There are cases when the component is removed from the DOM and the ref is lost.\n    // .ie when the component is used in a modal and the modal is dismissed.\n    // Tracked in this ticket: F-1893\n    contentRef.value?.blur(); // if the component remains in focus, clicking it again will not open the options list\n  };\n\n  /**\n   * Scroll list items when up and down keys are pressed\n   * @param {KeyboardEvent} e The native keydown event.\n   */\n  const scrollItems = async (e: KeyboardEvent) => {\n    await nextTick();\n\n    if (!contentRef.value) {\n      return;\n    }\n\n    const allowedKeyCodes = [KEY_CODES.ENTER, KEY_CODES.ESCAPE] as number[];\n\n    // Wait for highlighted item update after using keyboard (`onKeyDown`)\n    if (!allowedKeyCodes.includes(e.keyCode)) {\n      const el = contentRef.value.querySelector('.stash-select__option--highlighted');\n      const elBCR = el?.getBoundingClientRect();\n      const parentBCR = contentRef.value.getBoundingClientRect();\n\n      if (!elBCR || !parentBCR) {\n        return;\n      }\n\n      if (elBCR.bottom >= parentBCR.bottom || elBCR.top <= parentBCR.top + elBCR.height) {\n        el?.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n      }\n    }\n  };\n\n  /**\n   * Sets the `activeIndex` on hover, so that the user may then fine-tune\n   * their selection with the arrow keys.\n   */\n  const setIndex = (index: number) => {\n    activeIndex.value = index;\n  };\n\n  /**\n   * Handles all user keyboard input on the Dropdown.\n   * @param {KeyboardEvent} e The native keydown event.\n   */\n  const onKeyDown = (e: KeyboardEvent) => {\n    if (e.keyCode === KEY_CODES.ESCAPE) {\n      dismiss();\n    } else if (e.keyCode === KEY_CODES.DOWN && activeIndex.value < filteredOptions.value.length - 1 && isActive.value) {\n      activeIndex.value++;\n    } else if (e.keyCode === KEY_CODES.UP && activeIndex.value > 0) {\n      if (isActive.value) {\n        activeIndex.value--;\n      }\n\n      // Scroll to top when search is available and first element is highlighted (Using 100 to be sure that it'll be sure that search is visible)\n      if (optionsWrapperRef.value && isSearchable.value && activeIndex.value === 0) {\n        optionsWrapperRef.value.scrollTop -= 100;\n      }\n    } else if (e.keyCode === KEY_CODES.ENTER && activeIndex.value !== -1 && isActive.value) {\n      handleSelect(filteredOptions.value[activeIndex.value]);\n    } else {\n      return;\n    }\n\n    e.preventDefault(); // if keyDown did something / we didn't return\n    scrollItems(e);\n  };\n\n  const handleSearchInput = debounce(function () {\n    search();\n  }, DEBOUNCE.FAST);\n\n  const search = async function () {\n    if (!props.onSearch) {\n      return;\n    }\n\n    const requestId = uniqueId('search-request-');\n\n    try {\n      pendingSearchRequests.value[requestId] = true;\n      await props.onSearch(searchTerm.value);\n    } finally {\n      delete pendingSearchRequests.value[requestId];\n    }\n  };\n\n  /**\n   * Dynamically sets classes on an `option` in the drawer.\n   * @param {Option} option The `option` for which to generate classes\n   * @param {number} index The index of the `option` in the list of `options`\n   */\n  const optionClass = (option: Option, index: number) => {\n    return [\n      {\n        'stash-select__option': true,\n        'stash-select__option--disabled': isOptionDisabled(option),\n        'stash-select__option--highlighted': activeIndex.value === index,\n        'stash-select__option--selected': isSelected(option),\n      },\n\n      // @deprecated\n      // backwards compatibility\n      {\n        'is-selected': activeIndex.value === index,\n        'bg-ice-200': activeIndex.value === index,\n        'bg-blue-100 text-ice-700': isSelected(option),\n      },\n    ];\n  };\n\n  /**\n   * Finds out if the given item is already present in the selected options\n   * @param {Option} option The item to check\n   * @returns {boolean} Returns true if element is selected\n   */\n  const isSelected = (option?: Option | null): boolean => {\n    if (option === undefined || option === null) {\n      return false;\n    }\n\n    return internalValue.value.some((value) => value?.[props.trackBy] === option[props.trackBy]);\n  };\n\n  /**\n   * Checks if the element is within the Select menu by checking both the content and the teleportTo element\n   */\n  function isElementWithinSelectMenu(element: Node | null) {\n    if (!element) {\n      return false;\n    }\n\n    const isElementInMenu = contentRef.value?.contains(element);\n    const isElementInTeleportedMenu = optionsWrapperRef.value?.contains(element);\n\n    return isElementInMenu || isElementInTeleportedMenu;\n  }\n\n  function handleFocusOut(focusEvent: FocusEvent) {\n    const nextFocusedElement = focusEvent.relatedTarget as Node | null;\n    const isFocusedElementInMenu = isElementWithinSelectMenu(nextFocusedElement);\n\n    if (!isFocusedElementInMenu && nextFocusedElement) {\n      dismiss();\n    }\n  }\n\n  function handleOutsideClick(event: MouseEvent) {\n    const target = event.target as Node | null;\n    const isFocusedElementInMenu = isElementWithinSelectMenu(target);\n\n    if (!isFocusedElementInMenu) {\n      dismiss();\n    }\n  }\n\n  /**\n   * Handles the mouse leave of the select and clears item highlight\n   */\n  const handleMouseLeave = () => {\n    setIndex(-1);\n  };\n\n  /**\n   * Update height of chips container\n   */\n  const updateChipsHeight = async () => {\n    // Wait for the DOM to update so we can get an accurate value for chips' clientHeight\n    await nextTick();\n\n    if (chipsRef.value && contentRef.value) {\n      contentHeight.value = contentHeight.value === 0 ? contentRef.value.clientHeight : contentHeight.value;\n      chipsHeight.value = chipsRef.value.clientHeight;\n    }\n  };\n\n  onMounted(() => {\n    if (attrs.onInput) {\n      throw new Error('ll-select: use the @update:model-value event instead of @input.');\n    }\n\n    if (chipsRef.value) {\n      resizeObserverChips.observe(chipsRef.value);\n    }\n\n    window.addEventListener('resize', debouncedUpdateChipsHeight);\n\n    debouncedUpdateChipsHeight();\n  });\n\n  /**\n   * Remove event listener to handle component width when resizing window\n   */\n  onUnmounted(() => {\n    window.removeEventListener('resize', updateChipsHeight);\n    resizeObserverChips.disconnect();\n    debouncedUpdateChipsHeight.cancel();\n  });\n</script>\n\n<template>\n  <Field\n    v-bind=\"props\"\n    class=\"input ll-select stash-select\"\n    data-test=\"stash-select\"\n    :class=\"attrs.class\"\n    :error-text=\"props.errorText || props.error\"\n    :hint-text=\"props.hintText || props.hint\"\n  >\n    <template v-if=\"props.isReadOnly\" #default=\"{ fieldId, labelId }\">\n      <div class=\"flex h-input items-center text-sm\">\n        <span :id=\"fieldId\" :aria-labelledby=\"labelId\" class=\"show-empty h-min\">\n          {{ readOnlyValue }}\n        </span>\n      </div>\n    </template>\n    <template v-else #default=\"{ fieldId, fieldErrorId, hasError }\">\n      <!-- SCREEN READER ONLY -->\n      <select\n        :id=\"fieldId\"\n        :aria-errormessage=\"fieldErrorId\"\n        :aria-invalid=\"hasError\"\n        class=\"sr-only\"\n        :disabled=\"props.disabled\"\n        :multiple=\"!props.single\"\n        :name=\"props.name\"\n        @change=\"handleSelectChange\"\n      >\n        <option\n          v-for=\"(option, index) in filteredOptions\"\n          :key=\"`srOnlyOption-${index}`\"\n          :selected=\"isSelected(option)\"\n          :value=\"option[props.trackBy]\"\n          :disabled=\"isOptionDisabled(option)\"\n        >\n          {{ option[props.displayBy] || '' }}\n        </option>\n\n        <!-- Empty option to allow deselecting non-multiselects -->\n        <option value=\"\"></option>\n      </select>\n\n      <!-- SELECT -->\n      <div\n        ref=\"selectRef\"\n        v-clickoutside=\"handleOutsideClick\"\n        role=\"listbox\"\n        aria-hidden=\"true\"\n        class=\"stash-select__content-wrapper\"\n        :aria-controls=\"'listbox-' + fieldId\"\n        :aria-expanded=\"isActive\"\n        :aria-label=\"props.placeholder\"\n        :aria-disabled=\"props.disabled || undefined\"\n        :class=\"[\n          {\n            'stash-select--disabled': !!props.disabled,\n            'stash-select--error': !!(props.errorText || props.error),\n            'stash-select--active': isActive,\n            'stash-select--single': props.single,\n          },\n\n          // @deprecated\n          // backwards compatibility\n          {\n            'is-active': isActive,\n            'is-single': props.single,\n            'is-disabled': props.disabled,\n          },\n        ]\"\n        @keydown=\"onKeyDown\"\n        @keyup.esc=\"dismiss\"\n      >\n        <!-- CONTENT -->\n        <div\n          :id=\"'listbox-' + fieldId\"\n          ref=\"contentRef\"\n          class=\"input-field stash-select__content\"\n          tabindex=\"0\"\n          data-test=\"stash-select|dropdown-trigger\"\n          @focusin=\"open\"\n          @focusin.once=\"shouldUseLazyOptions = true\"\n          @focusout=\"handleFocusOut\"\n          @keydown=\"open\"\n          @mouseleave=\"handleMouseLeave\"\n        >\n          <!-- CHIPS -->\n          <ul ref=\"chipsRef\" class=\"stash-select__chips\">\n            <!-- PLACEHOLDER -->\n            <li\n              v-if=\"!internalValue.length\"\n              class=\"stash-select__placeholder mr-0 pl-1.5\"\n              :class=\"{ truncate: !props.noTruncate }\"\n            >\n              {{ props.placeholder }}\n            </li>\n\n            <template v-if=\"props.single\">\n              <li\n                v-for=\"option of internalValue\"\n                :key=\"`chip-${option[props.trackBy]}`\"\n                class=\"stash-select__selected mr-0 pl-1.5\"\n                :class=\"{ truncate: !props.noTruncate }\"\n              >\n                <slot\n                  name=\"selected\"\n                  :option=\"option\"\n                  :on-remove=\"() => remove(option)\"\n                  chip-selected-class=\"stash-select__chip\"\n                >\n                  {{ option[props.displayBy] || option }}\n                  <button\n                    tabindex=\"-1\"\n                    class=\"stash-select__remove\"\n                    @keypress.enter.prevent=\"remove(option)\"\n                    @mousedown.prevent.stop=\"remove(option)\"\n                  >\n                    <Icon icon=\"close\" name=\"close\" size=\"small\" />\n                  </button>\n                </slot>\n              </li>\n            </template>\n\n            <template v-else>\n              <li v-for=\"option of internalValue\" :key=\"`chip-${option[props.trackBy]}`\" class=\"inline-block\">\n                <slot\n                  name=\"selected\"\n                  :option=\"option\"\n                  :on-remove=\"() => remove(option)\"\n                  chip-selected-class=\"stash-select__chip\"\n                >\n                  <Chip\n                    bg-color=\"blue-500\"\n                    is-removable\n                    text-color=\"white\"\n                    class=\"stash-select__chip\"\n                    @remove=\"remove(option)\"\n                  >\n                    {{ option[props.displayBy] || option }}\n                  </Chip>\n                </slot>\n              </li>\n            </template>\n          </ul>\n\n          <!-- TOTAL -->\n          <div v-if=\"shouldShowTotal\" class=\"stash-select__total\">\n            <Chip bg-color=\"blue-500\" is-removable text-color=\"white\" class=\"stash-select__chip\" @remove=\"clear\">\n              {{ clearSelectionText }}\n            </Chip>\n          </div>\n\n          <!-- TOGGLE -->\n          <Icon\n            v-if=\"props.icon\"\n            class=\"stash-select__icon\"\n            data-test=\"stash-select|toggle-icon\"\n            :name=\"props.icon as IconName\"\n            :class=\"{ 'text-ice-500': props.disabled }\"\n            @mousedown.prevent=\"isActive && dismiss()\"\n          />\n          <!-- DRAWER -->\n          <Teleport :to=\"props.teleportTo\" :disabled=\"!props.enableTeleport\">\n            <transition name=\"fade\">\n              <div\n                v-show=\"isActive && !props.disabled\"\n                ref=\"optionsWrapperRef\"\n                class=\"stash-select__border-selector w-full shadow-2xl\"\n                :style=\"floatingStyles\"\n                @click.stop\n              >\n                <!-- SEARCH -->\n                <div v-if=\"isSearchable\" class=\"flex items-center border-b border-blue-500 pr-1.5\">\n                  <input\n                    ref=\"searchRef\"\n                    v-model=\"searchTerm\"\n                    type=\"text\"\n                    autocomplete=\"off\"\n                    class=\"stash-select__search\"\n                    :data-test=\"attrs['data-test'] ? attrs['data-test'] + '-search' : 'stash-select|search'\"\n                    :placeholder=\"props.searchPlaceholder\"\n                    :spellcheck=\"false\"\n                    @input=\"handleSearchInput\"\n                  />\n                  <Icon name=\"search\" class=\"text-ice-500\" />\n                </div>\n\n                <!-- OPTIONS -->\n                <ul class=\"stash-select__options options my-1.5 w-full border-white bg-white\">\n                  <li\n                    v-for=\"(option, index) in filteredOptions\"\n                    :key=\"`option-${option[props.trackBy]}`\"\n                    :data-test=\"option[props.trackBy]\"\n                    :class=\"optionClass(option, index)\"\n                    @click=\"handleSelect(option)\"\n                    @mouseenter.self=\"setIndex(index)\"\n                  >\n                    <slot name=\"option\" :option=\"option\">\n                      {{ option[props.displayBy] || option }}\n                    </slot>\n\n                    <span v-if=\"isSelected(option) && !props.hideCheck\" class=\"ml-auto pl-1.5\">\n                      <Icon class=\"text-blue-500\" name=\"check\" />\n                    </span>\n                  </li>\n                  <li v-show=\"props.loading || isSearching\" class=\"m-1.5 cursor-default p-1.5\">\n                    <Icon data-test=\"stash-select|options-loading\" name=\"working\" class=\"animate-spin text-ice-500\" />\n                  </li>\n                  <li\n                    v-show=\"!props.loading && !isSearching && !filteredOptions.length\"\n                    class=\"m-1.5 cursor-default p-1.5\"\n                    data-test=\"stash-select|no-options\"\n                  >\n                    <slot name=\"no-options\"> No options </slot>\n                  </li>\n                </ul>\n              </div>\n            </transition>\n          </Teleport>\n        </div>\n      </div>\n    </template>\n    <template v-if=\"slots.hint?.()\" #hint>\n      <slot name=\"hint\"></slot>\n    </template>\n  </Field>\n</template>\n\n<style scoped>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .stash-select {\n      position: relative;\n    }\n\n    .stash-select__content,\n    .stash-select__content-wrapper {\n      height: var(--height-input);\n    }\n\n    .stash-select__content {\n      cursor: pointer;\n      overflow: hidden;\n      position: absolute;\n      background: var(--color-white);\n      border: 1px solid var(--color-ice-500);\n      border-radius: var(--radius-sm);\n      color: var(--color-ice-700);\n      display: block;\n      font-family: var(--font-family-sofia);\n      font-size: var(--text-sm);\n      font-weight: normal;\n      outline: none;\n      padding: 0 !important;\n      width: 100%;\n\n      &:hover {\n        border-color: var(--color-ice-500);\n      }\n\n      &:focus-within {\n        border-color: var(--color-blue-500) !important;\n      }\n    }\n\n    .stash-select--disabled .stash-select__content {\n      background-color: var(--color-ice-100);\n      border-color: var(--color-ice-500);\n      color: var(--color-ice-500);\n      pointer-events: none !important;\n    }\n\n    .stash-select--active .stash-select__content {\n      cursor: default;\n      height: auto;\n      min-width: var(--width-select-menu);\n      overflow: visible;\n      z-index: var(--z-index-control);\n      box-shadow: var(--shadow-sm);\n    }\n\n    .stash-select--error :where(.stash-select__content, .stash-select__content:hover:not(:focus)) {\n      border-color: var(--color-red-500) !important;\n    }\n\n    .stash-select__placeholder {\n      color: var(--color-ice-500);\n    }\n\n    .stash-select--active .stash-select__placeholder {\n      cursor: default;\n    }\n\n    .stash-select__icon {\n      color: var(--color-ice-700);\n      cursor: pointer;\n      pointer-events: none;\n      position: absolute;\n      right: --spacing(1.5);\n      top: --spacing(1.5);\n    }\n\n    .stash-select--disabled .stash-select__icon {\n      color: var(--color-ice-500);\n    }\n\n    .stash-select--active .stash-select__icon {\n      pointer-events: auto;\n    }\n\n    .stash-select__chips {\n      /* distribute (or split?) the margin between chip and chips container. TODO? */\n      --half-space: calc(--spacing(1.5) / 2);\n\n      padding: var(--half-space);\n      padding-right: --spacing(9);\n    }\n\n    /* chip AND placeholder AND selected: */\n    .stash-select__chips > li {\n      cursor: pointer;\n      height: var(--height-chip);\n      margin: var(--half-space);\n      max-width: 100%;\n    }\n\n    .stash-select--disabled .stash-select__chips > li {\n      cursor: default;\n    }\n\n    .stash-select__content-wrapper:deep(.stash-select__chip) {\n      border-radius: var(--radius-sm);\n      font-size: var(--text-sm);\n      font-weight: normal;\n      height: var(--height-chip);\n      max-width: inherit;\n      text-transform: none;\n    }\n\n    .stash-select--disabled:deep(.stash-select__chip) {\n      background: var(--color-ice-500);\n      color: var(--color-white);\n    }\n\n    /* Base total chip styles moved above the more specific descendant rule to satisfy no-descending-specificity */\n    .stash-select__total {\n      display: block;\n      font-weight: var(--font-weight-semibold);\n      line-height: var(--line-height-button);\n      position: absolute;\n      right: --spacing(6);\n      white-space: nowrap;\n      z-index: var(--z-index-content);\n\n      /* -- design TBD --- */\n      top: 0;\n      left: 0;\n      bottom: 0;\n      color: var(--color-white);\n      background: white;\n      padding: --spacing(1.5);\n    }\n\n    .stash-select__content-wrapper .stash-select__total:deep(.stash-select__chip) {\n      font-weight: var(--font-weight-normal);\n    }\n\n    .stash-select__selected {\n      color: var(--color-ice-700);\n    }\n\n    .stash-select--disabled .stash-select__selected {\n      color: var(--color-ice-500);\n    }\n\n    .stash-select__selected :where(.stash-select__remove) {\n      display: none;\n    }\n\n    .stash-select__search {\n      position: relative;\n      width: 100%;\n      height: var(--height-input);\n      background: var(--color-white);\n      border-radius: var(--radius-sm);\n      color: var(--color-ice-700);\n      display: block;\n      font-family: var(--font-family-sofia);\n      font-size: var(--text-sm);\n      font-weight: var(--font-weight-normal);\n      outline: none;\n      padding: 0 --spacing(3);\n      border: 0 !important;\n    }\n\n    .stash-select__border-selector {\n      background: white;\n      border-radius: var(--radius-sm);\n      border: 1px solid var(--color-blue-500);\n      max-height: var(--max-height-select-menu);\n      overflow: auto;\n      z-index: var(--z-index-dialog);\n    }\n\n    .stash-select__option {\n      align-items: center;\n      border-radius: var(--radius-sm);\n      cursor: pointer;\n      display: flex;\n      line-height: --spacing(6);\n      margin: --spacing(1.5);\n      padding: --spacing(1.5);\n    }\n\n    .stash-select__option--disabled {\n      color: var(--color-ice-500);\n      cursor: not-allowed;\n    }\n\n    .stash-select__option--highlighted {\n      background-color: var(--color-ice-200);\n    }\n\n    .stash-select__option--selected {\n      background-color: var(--color-blue-100);\n      color: var(--color-ice-700);\n    }\n  }\n</style>\n"],"names":["props","__props","emit","__emit","attrs","useAttrs","slots","_useSlots","selectRef","ref","contentRef","optionsWrapperRef","chipsRef","searchRef","chipsHeight","contentHeight","internalValue","searchFor","searchTerm","activeIndex","isActive","pendingSearchRequests","shouldUseLazyOptions","floatingStyles","updateFloating","useFloating","autoUpdate","flip","offset","rects","placement","size","availableHeight","elements","resizeObserverChips","debouncedUpdateChipsHeight","isSearchable","computed","internalOptions","OPTIONS","isPlainObject","name","id","readOnlyValue","option","isSearching","filteredOptions","isChipsOneLine","shouldShowTotal","clearSelectionText","shouldPreventEmpty","watch","currentValue","oldValue","setIndex","value","newValue","isEqual","isEmpty","searchForFn","useSearch","debouncedUpdateFloating","debounce","updateChipsHeight","isOptionDisabled","clear","handleSelect","isSelected","remove","dismiss","handleSelectChange","evt","selectedOption","opt","_a","selectedOptions","internalOption","index","logger","open","nextTick","scrollItems","KEY_CODES","el","elBCR","parentBCR","onKeyDown","handleSearchInput","search","DEBOUNCE","requestId","uniqueId","optionClass","isElementWithinSelectMenu","element","isElementInMenu","isElementInTeleportedMenu","_b","handleFocusOut","focusEvent","nextFocusedElement","handleOutsideClick","event","target","handleMouseLeave","onMounted","onUnmounted","_createBlock","Field","_mergeProps","_unref","fieldId","labelId","_createElementVNode","_hoisted_1","_hoisted_2","_withCtx","fieldErrorId","hasError","_openBlock","_createElementBlock","_Fragment","_renderList","_hoisted_4","_normalizeClass","_toDisplayString","_renderSlot","_ctx","_createTextVNode","_withKeys","_withModifiers","$event","_createVNode","Icon","Chip","_hoisted_8","_cache","_Teleport","_Transition","_hoisted_9","args","_hoisted_11","_hoisted_13","_withDirectives","_hoisted_14","_hoisted_15","_vShow"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsME,UAAMA,IAAQC,IAiCRC,IAAOC,IA2BPC,IAAQC,GAAA,GACRC,IAAQC,GAAA,GAqCRC,KAAYC,EAA2B,IAAI,GAC3CC,IAAaD,EAA2B,IAAI,GAC5CE,IAAoBF,EAA2B,IAAI,GACnDG,IAAWH,EAA6B,IAAI,GAC5CI,KAAYJ,EAA6B,IAAI,GAE7CK,IAAcL,EAAI,CAAC,GACnBM,IAAgBN,EAAI,CAAC,GACrBO,IAAgBP,EAAc,EAAE,GAChCQ,KAAYR,EAAsC,MAAM,EAAE,GAC1DS,IAAaT,EAAI,EAAE,GACnBU,IAAcV,EAAI,EAAE,GACpBW,IAAWX,EAAI,EAAK,GACpBY,IAAwBZ,EAAI,EAAE,GAC9Ba,KAAuBb,EAAI,EAAK,GAEhC,EAAE,gBAAAc,IAAgB,QAAQC,OAAmBC,GAAYjB,IAAWG,GAAmB;AAAA,MAC3F,sBAAsBe;AAAA,MACtB,WAAW1B,EAAM;AAAA,MACjB,YAAY;AAAA,QACV2B,GAAA;AAAA,QACAC,GAAO,CAAC,EAAE,OAAAC,GAAO,WAAAC,QAEOA,EAAU,MAAM,GAAG,EAAE,CAAC,MACR,YAGpBhB,EAAY,QAAQC,EAAc,QACzCD,EAAY,QAAQe,EAAM,UAAU,SAAS,IAE7C,CAEV;AAAA,QACDE,GAAK;AAAA,UACH,MAAM,EAAE,iBAAAC,GAAiB,UAAAC,GAAU,OAAAJ,KAAS;AAC1C,YAAI7B,EAAM,kBACR,OAAO,OAAOiC,EAAS,SAAS,OAAO;AAAA,cACrC,UAAU,GAAGJ,EAAM,UAAU,KAAK;AAAA,cAClC,WAAW,GAAG,KAAK,IAAIG,GAAiB,GAAkB,CAAC;AAAA,YAAA,CAC5D;AAAA,UAEL;AAAA,QAAA,CACD;AAAA,MAAA;AAAA,IACH,CACD,GACKE,KAAsB,IAAI,eAAe,MAAMC,GAA4B,GAE3EC,IAAeC,EAAS,MAAM,CAACrC,EAAM,cAAcA,EAAM,eAAe,WAAWA,EAAM,eAAe,EAAK,GAE7GsC,IAAkBD,EAAS,MAAM;AACrC,UAAIE,KAAWjB,GAAqB,SAAStB,EAAM,OAAOA,EAAM,KAAA,IAASA,EAAM,SAAS,OAAO,OAAO;AAGtG,aAAKwC,GAAcD,EAAQ,CAAC,CAAC,MAC3BA,IAAUA,EAAQ,IAAI,CAACE,GAAMC,OAAQ,EAAE,MAAAD,GAAM,IAAAC,IAA0B,IAGlEH;AAAA,IACT,CAAC,GAEKI,KAAgBN,EAAS,MACxBrB,EAAc,MAAM,SAIlBA,EAAc,MAAM,IAAI,CAAC4B,MAAWA,EAAO5C,EAAM,SAAS,KAAK4C,CAAM,EAAE,KAAK,IAAI,IAH9E,EAIV,GAEKC,KAAcR,EAAS,MAAMrC,EAAM,iBAAiB,OAAO,KAAKqB,EAAsB,KAAK,EAAE,SAAS,CAAC,GAEvGyB,IAAkBT,EAAS,MAC3BrC,EAAM,oBAAoB,EAAEkB,EAAW,SAAS,IAAI,SAC/CoB,EAAgB,QAGlBrB,GAAU,MAAMC,EAAW,KAAK,CACxC,GAEK6B,KAAiBV,EAAS,MAAMvB,EAAY,SAASC,EAAc,KAAK,GAExEiC,KAAkBX;AAAA,MACtB,MAAM,CAACjB,EAAS,SAAS,CAACpB,EAAM,UAAU,CAAC+C,GAAe,SAAS/B,EAAc,MAAM;AAAA,IAAA,GAGnFiC,KAAqBZ,EAAS,MAC3B,CAACrB,EAAc,MAAM,QAAQhB,EAAM,gBAAgB,UAAU,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,CAC/F,GAEKkD,KAAqBb,EAAS,MAC3BrC,EAAM,gBAAgBA,EAAM,eAAe,WAAWA,EAAM,eAAe,EACnF;AAED,IAAAmD,EAAMjC,GAAY,CAACkC,GAAcC,MAAaA,MAAaD,KAAgBE,EAAS,EAAE,CAAC,GAEvFH,EAAMnC,GAAe,MAAMmB,EAAA,GAA8B,EAAE,MAAM,IAAM,GAEvEgB;AAAA,MACE,MAAMnD,EAAM;AAAA,MACZ,CAACuD,MAAU;AAET,YAAI,MAAM,QAAQA,CAAK,GAAG;AACxB,gBAAMC,IAAWD,EAAM,OAAO,OAAO;AAErC,UAAKE,GAAQD,GAAUxC,EAAc,KAAK,MACxCA,EAAc,QAAQwC;AAGxB;AAAA,QACF;AAGA,YAAI,CAACE,GAAQH,CAAK,GAAG;AACnB,UAAKE,GAAQF,GAAOvC,EAAc,MAAM,CAAC,CAAC,MACxCA,EAAc,MAAM,CAAC,IAAIuC;AAG3B;AAAA,QACF;AAGA,QAAAvC,EAAc,QAAQ,CAAA;AAAA,MACxB;AAAA,MACA,EAAE,WAAW,GAAA;AAAA,IAAK,GAGpBmC;AAAA,MACE,MAAMnD,EAAM;AAAA,MACZ,MAAM;AACJ,cAAM,EAAE,WAAW2D,EAAA,IAAgBC,GAAkB;AAAA,UACnD,OAAOvB,EAAS,MAAMC,EAAgB,KAAK;AAAA,UAC3C,YAAYtC,EAAM,SAAS,SAASA,EAAM,WAAW,CAACA,EAAM,SAAS;AAAA,UACrE,SAASA,EAAM;AAAA,QAAA,CAChB;AAED,QAAAiB,GAAU,QAAQ,CAACC,MAAeyC,EAAYzC,GAAY,EAAE,OAAOlB,EAAM,gBAAgB;AAAA,MAC3F;AAAA,MACA,EAAE,WAAW,GAAA;AAAA,IAAK,GAGpBmD,EAAMrC,GAAa,MAAM+C,IAAyB;AAElD,UAAMA,KAA0BC,GAAS,MAAMtC,GAAA,GAAkB,EAAE,GAC7DW,IAA6B2B,GAAS,MAAMC,GAAA,GAAqB,EAAE,GAEnEC,IAAmB,CAACpB,MACjBA,KAAU,OAAOA,KAAW,YAAY,cAAcA,MAAUA,KAAA,gBAAAA,EAAQ,WAG3EqB,KAAQ,MAAM;AAClB,MAAAjD,EAAc,QAAQ,CAAA,GACtBd,EAAK,sBAAsBF,EAAM,SAAS,SAAYgB,EAAc,KAAK,GACzEd,EAAK,OAAO;AAAA,IACd,GAMMgE,IAAe,CAACtB,MAAoB;AACxC,MAAI5C,EAAM,YAAY,CAAC4C,KAAUoB,EAAiBpB,CAAM,MAInDuB,EAAWvB,CAAM,IASpBwB,EAAOxB,CAAM,KART5C,EAAM,WACRgB,EAAc,QAAQ,CAAA,IAGxBA,EAAc,MAAM,KAAK4B,CAAM,GAC/B1C,EAAK,sBAAsBF,EAAM,SAASgB,EAAc,MAAM,CAAC,IAAIA,EAAc,KAAK,GACtFd,EAAK,OAAO0C,CAAM,IAKhB5C,EAAM,UACRqE,EAAA;AAAA,IAEJ,GAEMC,KAAqB,CAACC,MAAQ;AAGlC,UAAIvE,EAAM,QAAQ;AAChB,cAAMwE,IAAiBlC,EAAgB,MAAM,KAAK,CAACmC,MAAA;;AAAQ,mBAAAC,IAAAD,EAAIzE,EAAM,OAAO,MAAjB,gBAAA0E,EAAoB,gBAAeH,EAAI,OAAO;AAAA,SAAK;AAC9G,QAAAL,EAAaM,CAAc;AAC3B;AAAA,MACF;AAGA,YAAMG,IAAkB,CAAC,GAAGJ,EAAI,OAAO,eAAe;AAQtD,iBAAWK,KAAkB,CAAC,GAAG5D,EAAc,KAAK;AAGlD,QAFuB2D,EAAgB,KAAK,CAACF,MAAA;;AAAQ,iBAAAA,EAAI,YAAUC,IAAAE,EAAe5E,EAAM,OAAO,MAA5B,gBAAA0E,EAA+B;AAAA,SAAU,KAG1GN,EAAOQ,CAAc;AAKzB,iBAAWJ,KAAkBG,GAAiB;AAC5C,cAAMC,IAAiBtC,EAAgB,MAAM;AAAA,UAC3C,CAACmC;;AAAQ,qBAAAC,IAAAD,EAAIzE,EAAM,OAAO,MAAjB,gBAAA0E,EAAoB,gBAAeF,EAAe;AAAA;AAAA,QAAA;AAG7D,QAAIL,EAAWS,CAAc,KAG3BV,EAAaU,CAAc;AAAA,MAE/B;AAAA,IACF,GAMMR,IAAS,CAACxB,MAAmB;AACjC,UAAI5C,EAAM,YAAakD,GAAmB,SAASlC,EAAc,MAAM,WAAW;AAChF;AAGF,YAAM6D,IAAQ7D,EAAc,MAAM,UAAU,CAACyD,MAAQA,EAAIzE,EAAM,OAAO,MAAM4C,EAAO5C,EAAM,OAAO,CAAC;AAEjG,UAAI6E,MAAU,IAAI;AAChB,QAAAC,GAAO,KAAK,8CAA8ClC,CAAM;AAChE;AAAA,MACF;AAEA,MAAA5B,EAAc,MAAM,OAAO6D,GAAO,CAAC,GACnC3E,EAAK,sBAAsBF,EAAM,SAASgB,EAAc,MAAM,CAAC,IAAIA,EAAc,KAAK,GACtFd,EAAK,UAAU0C,GAAQiC,CAAK;AAAA,IAC9B,GAKME,KAAO,MAAM;AACjB,MAAI3D,EAAS,UAIbe,EAAA,GAEAf,EAAS,QAAQ,IACjBlB,EAAK,QAAQ,GAETkC,EAAa,SACf4C,EAAS,MAAM;;AACb,SAAAN,IAAA7D,GAAU,UAAV,QAAA6D,EAAiB,MAAM,EAAE,eAAe;MAC1C,CAAC;AAAA,IAEL,GAKML,IAAU,MAAM;;AACpB,MAAIjD,EAAS,SACXlB,EAAK,UAAUc,EAAc,KAAK,GAGpCsC,EAAS,EAAE,GACXlC,EAAS,QAAQ,IAEZpB,EAAM,uBACTkB,EAAW,QAAQ,MAOrBwD,IAAAhE,EAAW,UAAX,QAAAgE,EAAkB;AAAA,IACpB,GAMMO,KAAc,OAAO,MAAqB;AAG9C,UAFA,MAAMD,EAAA,GAEF,CAACtE,EAAW;AACd;AAMF,UAAI,CAHoB,CAACwE,EAAU,OAAOA,EAAU,MAAM,EAGrC,SAAS,EAAE,OAAO,GAAG;AACxC,cAAMC,IAAKzE,EAAW,MAAM,cAAc,oCAAoC,GACxE0E,IAAQD,KAAA,gBAAAA,EAAI,yBACZE,IAAY3E,EAAW,MAAM,sBAAA;AAEnC,YAAI,CAAC0E,KAAS,CAACC;AACb;AAGF,SAAID,EAAM,UAAUC,EAAU,UAAUD,EAAM,OAAOC,EAAU,MAAMD,EAAM,YACzED,KAAA,QAAAA,EAAI,eAAe,EAAE,OAAO,WAAW,QAAQ;MAEnD;AAAA,IACF,GAMM7B,IAAW,CAACuB,MAAkB;AAClC,MAAA1D,EAAY,QAAQ0D;AAAA,IACtB,GAMMS,KAAY,CAAC,MAAqB;AACtC,UAAI,EAAE,YAAYJ,EAAU;AAC1B,QAAAb,EAAA;AAAA,eACS,EAAE,YAAYa,EAAU,QAAQ/D,EAAY,QAAQ2B,EAAgB,MAAM,SAAS,KAAK1B,EAAS;AAC1G,QAAAD,EAAY;AAAA,eACH,EAAE,YAAY+D,EAAU,MAAM/D,EAAY,QAAQ;AAC3D,QAAIC,EAAS,SACXD,EAAY,SAIVR,EAAkB,SAASyB,EAAa,SAASjB,EAAY,UAAU,MACzER,EAAkB,MAAM,aAAa;AAAA,eAE9B,EAAE,YAAYuE,EAAU,SAAS/D,EAAY,UAAU,MAAMC,EAAS;AAC/E,QAAA8C,EAAapB,EAAgB,MAAM3B,EAAY,KAAK,CAAC;AAAA;AAErD;AAGF,QAAE,eAAA,GACF8D,GAAY,CAAC;AAAA,IACf,GAEMM,KAAoBzB,GAAS,WAAY;AAC7C,MAAA0B,GAAA;AAAA,IACF,GAAGC,GAAS,IAAI,GAEVD,KAAS,iBAAkB;AAC/B,UAAI,CAACxF,EAAM;AACT;AAGF,YAAM0F,IAAYC,GAAS,iBAAiB;AAE5C,UAAI;AACF,QAAAtE,EAAsB,MAAMqE,CAAS,IAAI,IACzC,MAAM1F,EAAM,SAASkB,EAAW,KAAK;AAAA,MACvC,UAAA;AACE,eAAOG,EAAsB,MAAMqE,CAAS;AAAA,MAC9C;AAAA,IACF,GAOME,KAAc,CAAChD,GAAgBiC,MAC5B;AAAA,MACL;AAAA,QACE,wBAAwB;AAAA,QACxB,kCAAkCb,EAAiBpB,CAAM;AAAA,QACzD,qCAAqCzB,EAAY,UAAU0D;AAAA,QAC3D,kCAAkCV,EAAWvB,CAAM;AAAA,MAAA;AAAA;AAAA;AAAA,MAKrD;AAAA,QACE,eAAezB,EAAY,UAAU0D;AAAA,QACrC,cAAc1D,EAAY,UAAU0D;AAAA,QACpC,4BAA4BV,EAAWvB,CAAM;AAAA,MAAA;AAAA,IAC/C,GASEuB,IAAa,CAACvB,MACUA,KAAW,OAC9B,KAGF5B,EAAc,MAAM,KAAK,CAACuC,OAAUA,KAAA,gBAAAA,EAAQvD,EAAM,cAAa4C,EAAO5C,EAAM,OAAO,CAAC;AAM7F,aAAS6F,GAA0BC,GAAsB;;AACvD,UAAI,CAACA;AACH,eAAO;AAGT,YAAMC,KAAkBrB,IAAAhE,EAAW,UAAX,gBAAAgE,EAAkB,SAASoB,IAC7CE,KAA4BC,IAAAtF,EAAkB,UAAlB,gBAAAsF,EAAyB,SAASH;AAEpE,aAAOC,KAAmBC;AAAA,IAC5B;AAEA,aAASE,GAAeC,GAAwB;AAC9C,YAAMC,IAAqBD,EAAW;AAGtC,MAAI,CAF2BN,GAA0BO,CAAkB,KAE5CA,KAC7B/B,EAAA;AAAA,IAEJ;AAEA,aAASgC,GAAmBC,GAAmB;AAC7C,YAAMC,IAASD,EAAM;AAGrB,MAF+BT,GAA0BU,CAAM,KAG7DlC,EAAA;AAAA,IAEJ;AAKA,UAAMmC,KAAmB,MAAM;AAC7B,MAAAlD,EAAS,EAAE;AAAA,IACb,GAKMS,KAAoB,YAAY;AAEpC,YAAMiB,EAAA,GAEFpE,EAAS,SAASF,EAAW,UAC/BK,EAAc,QAAQA,EAAc,UAAU,IAAIL,EAAW,MAAM,eAAeK,EAAc,OAChGD,EAAY,QAAQF,EAAS,MAAM;AAAA,IAEvC;AAEA,WAAA6F,GAAU,MAAM;AACd,UAAIrG,EAAM;AACR,cAAM,IAAI,MAAM,iEAAiE;AAGnF,MAAIQ,EAAS,SACXsB,GAAoB,QAAQtB,EAAS,KAAK,GAG5C,OAAO,iBAAiB,UAAUuB,CAA0B,GAE5DA,EAAA;AAAA,IACF,CAAC,GAKDuE,GAAY,MAAM;AAChB,aAAO,oBAAoB,UAAU3C,EAAiB,GACtD7B,GAAoB,WAAA,GACpBC,EAA2B,OAAA;AAAA,IAC7B,CAAC;;kBAIDwE,EA+NQC,IA/NRC,GA+NQ7G,GA9NO;AAAA,QACb,OAAK,CAAC,gCAEE8G,EAAA1G,CAAA,EAAM,KAAK;AAAA,QADnB,aAAU;AAAA,QAET,cAAYJ,EAAM,aAAaA,EAAM;AAAA,QACrC,aAAWA,EAAM,YAAYA,EAAM;AAAA,MAAA;QAEpBA,EAAM;gBAAa;AAAA,gBACjC,CAIM,EALsC,SAAA+G,GAAS,SAAAC,QAAO;AAAA,YAC5DC,EAIM,OAJNC,IAIM;AAAA,cAHJD,EAEO,QAAA;AAAA,gBAFA,IAAIF;AAAA,gBAAU,mBAAiBC;AAAA,gBAAS,OAAM;AAAA,cAAA,KAChDrE,GAAA,KAAa,GAAA,GAAAwE,EAAA;AAAA,YAAA;;;;gBAIJ;AAAA,UAEhB,IAAAC,EAAA,CAsBS,EAxBkB,SAAAL,GAAS,cAAAM,GAAc,UAAAC,QAAQ;AAAA,YAE1DL,EAsBS,UAAA;AAAA,cArBN,IAAIF;AAAA,cACJ,qBAAmBM;AAAA,cACnB,gBAAcC;AAAA,cACf,OAAM;AAAA,cACL,UAAUtH,EAAM;AAAA,cAChB,UAAQ,CAAGA,EAAM;AAAA,cACjB,MAAMA,EAAM;AAAA,cACZ,UAAQsE;AAAA,YAAA;eAETiD,EAAA,EAAA,GAAAC,EAQSC,GAAA,MAAAC,EAPmB5E,EAAA,OAAe,CAAjCF,GAAQiC,YADlB2C,EAQS,UAAA;AAAA,gBANN,qBAAqB3C,CAAK;AAAA,gBAC1B,UAAUV,EAAWvB,CAAM;AAAA,gBAC3B,OAAOA,EAAO5C,EAAM,OAAO;AAAA,gBAC3B,UAAUgE,EAAiBpB,CAAM;AAAA,cAAA,KAE/BA,EAAO5C,EAAM,SAAS,KAAA,EAAA,GAAA,GAAA2H,EAAA;8BAI3BV,EAA0B,UAAA,EAAlB,OAAM,MAAE,MAAA,EAAA;AAAA,YAAA;oBAIlBO,EAgLM,OAAA;AAAA,uBA/KA;AAAA,cAAJ,KAAIhH;AAAA,cAEJ,MAAK;AAAA,cACL,eAAY;AAAA,cACZ,UAAM,iCAA+B;AAAA;kBAKyB,0BAAA,CAAA,CAAAR,EAAM;AAAA,kBAAgD,uBAAA,CAAA,EAAAA,EAAM,aAAaA,EAAM;AAAA,0CAA4CoB,EAAA;AAAA,kBAA8C,wBAAApB,EAAM;AAAA,gBAAA;AAAA;AAAA;AAAA;+BAAyHoB,EAAA;AAAA,kBAAmC,aAAApB,EAAM;AAAA,kBAAmC,eAAAA,EAAM;AAAA,gBAAA;AAAA;cAJvb,8BAA4B+G;AAAA,cAC5B,iBAAe3F,EAAA;AAAA,cACf,cAAYpB,EAAM;AAAA,cAClB,iBAAeA,EAAM,YAAY;AAAA,cAiBjC,WAASsF;AAAA,cACT,YAAWjB,GAAO,CAAA,KAAA,CAAA;AAAA,YAAA;cAGnB4C,EAiJM,OAAA;AAAA,gBAhJH,iBAAiBF;AAAA,yBACd;AAAA,gBAAJ,KAAIrG;AAAA,gBACJ,OAAM;AAAA,gBACN,UAAS;AAAA,gBACT,aAAU;AAAA,gBACT,WAASqE;AAAA,sDACKzD,GAAA,QAAoB;AAAA,gBAClC,YAAU4E;AAAA,gBACV,WAASnB;AAAA,gBACT,cAAYyB;AAAA,cAAA;gBAGbS,EAwDK,MAAA;AAAA,2BAxDG;AAAA,kBAAJ,KAAIrG;AAAA,kBAAW,OAAM;AAAA,gBAAA;kBAGdI,EAAA,MAAc,2BADvBwG,EAMK,MAAA;AAAA;oBAJH,OAAKI,EAAA,CAAC,yCAAuC,EAAA,UAAA,CACxB5H,EAAM,YAAU,CAAA;AAAA,kBAAA,GAElC6H,EAAA7H,EAAM,WAAW,GAAA,CAAA;AAAA,kBAGNA,EAAM,iBACpBwH,EAsBKC,GAAA,EAAA,KAAA,KAAAC,EArBc1G,EAAA,OAAa,CAAvB4B,YADT4E,EAsBK,MAAA;AAAA,oBApBF,KAAG,QAAU5E,EAAO5C,EAAM,OAAO,CAAA;AAAA,oBAClC,OAAK4H,EAAA,CAAC,sCAAoC,EAAA,UAAA,CACrB5H,EAAM,YAAU,CAAA;AAAA,kBAAA;oBAErC8H,EAeOC,EAAA,QAAA,YAAA;AAAA,sBAbJ,QAAAnF;AAAA,sBACA,UAAS,MAAQwB,EAAOxB,CAAM;AAAA,sBAC/B,mBAAoB;AAAA,oBAAA,GAJtB,MAeO;AAAA,sBATFoF,EAAAH,EAAAjF,EAAO5C,EAAM,SAAS,KAAK4C,CAAM,IAAG,KACvC,CAAA;AAAA,sBAAAqE,EAOS,UAAA;AAAA,wBANP,UAAS;AAAA,wBACT,OAAM;AAAA,wBACL,YAAQgB,GAAAC,EAAA,CAAAC,MAAgB/D,EAAOxB,CAAM,GAAA,CAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA,wBACrC,aAASsF,EAAA,CAAAC,MAAe/D,EAAOxB,CAAM,GAAA,CAAA,WAAA,MAAA,CAAA;AAAA,sBAAA;wBAEtCwF,EAA+CC,GAAA;AAAA,0BAAzC,MAAK;AAAA,0BAAQ,MAAK;AAAA,0BAAQ,MAAK;AAAA,wBAAA;;;2CAO3Cb,EAiBKC,GAAA,EAAA,KAAA,EAAA,GAAAC,EAjBgB1G,EAAA,OAAa,CAAvB4B,YAAX4E,EAiBK,MAAA;AAAA,oBAjBgC,KAAG,QAAU5E,EAAO5C,EAAM,OAAO,CAAA;AAAA,oBAAK,OAAM;AAAA,kBAAA;oBAC/E8H,EAeOC,EAAA,QAAA,YAAA;AAAA,sBAbJ,QAAAnF;AAAA,sBACA,UAAS,MAAQwB,EAAOxB,CAAM;AAAA,sBAC/B,mBAAoB;AAAA,oBAAA,GAJtB,MAeO;AAAA,sBATLwF,EAQOE,IAAA;AAAA,wBAPL,YAAS;AAAA,wBACT,gBAAA;AAAA,wBACA,cAAW;AAAA,wBACX,OAAM;AAAA,wBACL,UAAM,CAAAH,MAAE/D,EAAOxB,CAAM;AAAA,sBAAA;mCAEtB,MAAuC;AAAA,0BAApCoF,EAAAH,EAAAjF,EAAO5C,EAAM,SAAS,KAAK4C,CAAM,GAAA,CAAA;AAAA,wBAAA;;;;;;gBAQnCI,GAAA,SAAXuE,EAAA,GAAAC,EAIM,OAJNe,IAIM;AAAA,kBAHJH,EAEOE,IAAA;AAAA,oBAFD,YAAS;AAAA,oBAAW,gBAAA;AAAA,oBAAa,cAAW;AAAA,oBAAQ,OAAM;AAAA,oBAAsB,UAAQrE;AAAA,kBAAA;+BAC5F,MAAwB;AAAA,0BAArBhB,GAAA,KAAkB,GAAA,CAAA;AAAA,oBAAA;;;;gBAMjBjD,EAAM,aADd2G,EAOE0B,GAAA;AAAA;kBALA,OAAKT,EAAA,CAAC,sBAAoB,EAAA,gBAGA5H,EAAM,SAAA,CAAQ,CAAA;AAAA,kBAFxC,aAAU;AAAA,kBACT,MAAMA,EAAM;AAAA,kBAEZ,aAASwI,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAN,EAAA,CAAAC,MAAU/G,EAAA,SAAYiD,EAAA,GAAO,CAAA,SAAA,CAAA;AAAA,gBAAA;sBAGzCsC,EAwDW8B,IAAA;AAAA,kBAxDA,IAAIzI,EAAM;AAAA,kBAAa,UAAQ,CAAGA,EAAM;AAAA,gBAAA;kBACjDoI,EAsDaM,IAAA,EAtDD,MAAK,UAAM;AAAA,+BACrB,MAoDM;AAAA,wBApDNzB,EAoDM,OAAA;AAAA,iCAlDA;AAAA,wBAAJ,KAAItG;AAAA,wBACJ,OAAM;AAAA,wBACL,UAAOmG,EAAAvF,EAAA,CAAc;AAAA,wBACrB,2BAAD,MAAA;AAAA,wBAAA,GAAW,CAAA,MAAA,CAAA;AAAA,sBAAA;wBAGAa,EAAA,SAAXmF,EAAA,GAAAC,EAaM,OAbNmB,IAaM;AAAA,4BAZJ1B,EAUE,SAAA;AAAA,qCATI;AAAA,4BAAJ,KAAIpG;AAAA,0EACKK,EAAU,QAAAiH;AAAA,4BACnB,MAAK;AAAA,4BACL,cAAa;AAAA,4BACb,OAAM;AAAA,4BACL,aAAWrB,EAAA1G,CAAA,EAAK,WAAA,IAAgB0G,EAAA1G,CAAA,EAAK,WAAA,IAAA,YAAA;AAAA,4BACrC,aAAaJ,EAAM;AAAA,4BACnB,YAAY;AAAA,4BACZ,SAAKwI,EAAA,CAAA,MAAAA,EAAA,CAAA;AAAA,sCAAE1B,EAAAvB,EAAA,KAAAuB,EAAAvB,EAAA,EAAA,GAAAqD,CAAA;AAAA,0BAAA;iCAPC1H,EAAA,KAAU;AAAA,0BAAA;0BASrBkH,EAA2CC,GAAA;AAAA,4BAArC,MAAK;AAAA,4BAAS,OAAM;AAAA,0BAAA;;wBAI5BpB,EA2BK,MA3BL4B,IA2BK;AAAA,2BA1BHtB,EAAA,EAAA,GAAAC,EAeKC,GAAA,MAAAC,EAduB5E,EAAA,OAAe,CAAjCF,GAAQiC,YADlB2C,EAeK,MAAA;AAAA,4BAbF,KAAG,UAAY5E,EAAO5C,EAAM,OAAO,CAAA;AAAA,4BACnC,aAAW4C,EAAO5C,EAAM,OAAO;AAAA,4BAC/B,OAAK4H,EAAEhC,GAAYhD,GAAQiC,CAAK,CAAA;AAAA,4BAChC,SAAK,CAAAsD,OAAEjE,EAAatB,CAAM;AAAA,4BAC1B,cAAUsF,EAAA,CAAAC,OAAO7E,EAASuB,CAAK,GAAA,CAAA,MAAA,CAAA;AAAA,0BAAA;4BAEhCiD,EAEOC,EAAA,QAAA,UAAA,EAFc,QAAAnF,EAAA,GAArB,MAEO;AAAA,8BADFoF,EAAAH,EAAAjF,EAAO5C,EAAM,SAAS,KAAK4C,CAAM,GAAA,CAAA;AAAA,4BAAA;4BAG1BuB,EAAWvB,CAAM,KAAA,CAAM5C,EAAM,aAAzCuH,KAAAC,EAEO,QAFPsB,IAEO;AAAA,8BADLV,EAA2CC,GAAA;AAAA,gCAArC,OAAM;AAAA,gCAAgB,MAAK;AAAA,8BAAA;;;0BAGrCU,EAAA9B,EAEK,MAFL+B,IAEK;AAAA,4BADHZ,EAAkGC,GAAA;AAAA,8BAA5F,aAAU;AAAA,8BAA+B,MAAK;AAAA,8BAAU,OAAM;AAAA,4BAAA;;iCAD1DrI,EAAM,WAAW6C,GAAA,KAAW;AAAA,0BAAA;0BAGxCkG,EAAA9B,EAMK,MANLgC,IAMK;AAAA,4BADHnB,EAA2CC,4BAA3C,MAA2C;AAAA,gDAAnB,gBAAY,EAAA;AAAA,4BAAA;;4BAJ3B,CAAAmB,IAAA,CAAAlJ,EAAM,WAAO,CAAK6C,YAAW,CAAKC,EAAA,MAAgB,MAAM;AAAA,0BAAA;;;6BA5C7D1B,EAAA,SAAQ,CAAKpB,EAAM,QAAQ;AAAA,sBAAA;;;;;;;sBAvH3BqG,EAAkB;AAAA,YAAA;;;;SAgLtB3B,IAAApE,EAAM,SAAN,QAAAoE,EAAA,KAAApE;gBAAiB;AAAA,gBAC/B,MAAyB;AAAA,YAAzBwH,EAAyBC,EAAA,QAAA,QAAA,CAAA,GAAA,QAAA,EAAA;AAAA,UAAA;;;;;;;"}
+{"version":3,"file":"Select.js","sources":["../src/components/Select/Select.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { FieldProps } from '../Field/Field.types';\n\n  // Note: the `trackBy` prop, the `single` prop, and the fact that options can be strings prevents us from knowing the type of the selected options\n\n  type Option = any;\n\n  type SelectedOptions = Option | Option[];\n\n  export interface SelectProps extends FieldProps {\n    /**\n     * If there is only 1 option selected, it prevents that option from being de-selected\n     */\n    preventEmpty?: boolean;\n\n    /**\n     * @deprecated The `allowEmpty` prop is no longer supported; use `preventEmpty` instead.\n     */\n    allowEmpty?: string | boolean | null;\n\n    /**\n     * If `options` are an object, this is what prop to use for display.\n     */\n    displayBy?: string;\n\n    /**\n     * List of one or more fields to search on. When empty, displayBy will be used\n     */\n    searchBy?: string[];\n\n    /**\n     * Default field to track selected options by.\n     */\n    trackBy?: string;\n\n    /**\n     * Placeholder text.\n     */\n    placeholder?: string;\n\n    /**\n     * @deprecated Use the `error-text` prop instead\n     */\n    error?: string;\n\n    /**\n     * @deprecated Use the `hint-text` prop instead\n     */\n    hint?: string;\n\n    /**\n     * Sets a custom icon.\n     */\n    icon?: string | boolean;\n\n    /**\n     * Sets a name attribute on the native (hidden) select element\n     *\n     * Setting the default value to `undefined` so the attribute isn't rendered if not explicitly provided to ensure backwards compatibility with MP django forms\n     */\n    name?: string;\n\n    /**\n     * The list of all options to select from.\n     */\n    options?: Option[] | readonly Option[];\n\n    /**\n     * Lazily evaluate and set component `options`. Will execute upon user mouseover.\n     */\n    lazy?: () => Option[];\n\n    /**\n     * Sets the currently-selected value(s) for the component.\n     * Accepts an array of Objects, or a single Object (if `single` is true), or a string\n     */\n    modelValue?: SelectedOptions;\n\n    /**\n     * @deprecated Use :model-value or v-model instead of :value.\n     */\n    value?: SelectedOptions | null;\n\n    /**\n     * Hides the search input\n     */\n    hideSearch?: boolean;\n\n    /**\n     * @deprecated The `searchable` prop is no longer supported; Use `hideSearch` instead.\n     */\n    searchable?: string | boolean | null;\n\n    /**\n     * If true, prevents the search term from being cleared when the drawer is dismissed.\n     */\n    preserveSearchTerm?: boolean;\n\n    /**\n     * Prevents the options from being filtered when the search term changes.\n     * Allows the parent to filter the options.\n     */\n    disableFiltering?: boolean;\n\n    /**\n     * Functions as a single select, if true\n     */\n    single?: boolean;\n\n    /**\n     * Prevents the Selected Option from being truncated, if true\n     */\n    noTruncate?: boolean;\n\n    /**\n     * On an ajaxed request when the dropdown is open, we may be experiencing slower load times.\n     * This flag will drop a loader into the dropdown.  Note: This has never been design reviewed.\n     */\n    loading?: boolean;\n\n    /**\n     * @deprecated Instead, use the `@search` event (the onSearch prop) and ensure its event handler returns a Promise that resolves after the search is complete.\n     */\n    searchLoading?: boolean;\n\n    /**\n     * In the selection text we use this to give more visual distinction to what type of item(s) are selected\n     * E.g. 2 customers selected. An empty string will result in `2 selected`.\n     */\n    selectItemType?: string;\n\n    /**\n     * Hides the \"check\" icon if truthy\n     */\n    hideCheck?: boolean;\n\n    searchPlaceholder?: string;\n\n    /**\n     * Equivalent to emitting a \"search\" event, except this prop can be used to populate the list of `options` using an HTTP request because a prop's return value can be received and awaited, unlike an event.\n     *\n     * **Tip:** to show a loading indicator while searching, return a Promise that resolves after the search is complete.\n     *\n     * **Warning:** the search input is debounced so there is no need to debounce this function.\n     */\n    onSearch?: (searchTerm: string) => Promise<void> | void;\n\n    /**\n     * Uses the \"fuzzy search\" algorithm when searching, if true\n     */\n    useFuzzySearch?: boolean;\n\n    /**\n     * Sets the placement of the dropdown\n     * @default 'bottom-start'\n     */\n    menuPlacement?: Placement;\n\n    /**\n     * Enables teleporting the dropdown\n     * @default false\n     */\n    enableTeleport?: boolean;\n\n    /**\n     * The selector or element to which the dropdown should be teleported\n     * @default `'#stash-menus-mount-node'`\n     */\n    teleportTo?: string | HTMLElement;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import { autoUpdate, flip, offset, type Placement, type Side, size, useFloating } from '@floating-ui/vue';\n  import logger from '@leaflink/snitch';\n  import debounce from 'lodash-es/debounce';\n  import isEmpty from 'lodash-es/isEmpty';\n  import isEqual from 'lodash-es/isEqual';\n  import isPlainObject from 'lodash-es/isPlainObject';\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, nextTick, onMounted, onUnmounted, type Ref, ref, useAttrs, watch } from 'vue';\n\n  import useSearch from '../../composables/useSearch/useSearch';\n  import { DEBOUNCE, KEY_CODES } from '../../constants';\n  import vClickoutside from '../../directives/clickoutside/clickoutside';\n  import { DEFAULT_MENUS_PLUGIN_NODE_ID } from '../../plugins/MenusPlugin';\n  import Chip from '../Chip/Chip.vue';\n  import Field from '../Field/Field.vue';\n  import Icon, { IconName } from '../Icon/Icon.vue';\n\n  const GAP_HEIGHT = 6;\n\n  const MENU_MAX_HEIGHT_PX = 300;\n\n  defineOptions({\n    name: 'll-select',\n  });\n\n  const props = withDefaults(defineProps<SelectProps>(), {\n    preventEmpty: false,\n    allowEmpty: null,\n    displayBy: 'name',\n    searchBy: () => [],\n    trackBy: 'id',\n    placeholder: 'Select option',\n    error: '',\n    hint: '',\n    icon: 'caret-down',\n    name: undefined,\n    options: () => [],\n    lazy: undefined,\n    modelValue: () => [],\n    value: null,\n    hideSearch: false,\n    searchable: null,\n    preserveSearchTerm: false,\n    disableFiltering: false,\n    single: false,\n    noTruncate: false,\n    loading: false,\n    searchLoading: false,\n    selectItemType: '',\n    hideCheck: false,\n    searchPlaceholder: 'Search',\n    onSearch: undefined,\n    useFuzzySearch: false,\n    menuPlacement: 'bottom-start',\n    enableTeleport: false,\n    teleportTo: `#${DEFAULT_MENUS_PLUGIN_NODE_ID}`,\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the model value changes.\n     */\n    (e: 'update:model-value', selectedOptions: SelectedOptions): void;\n    /**\n     * Emitted the selected value(s) a cleared.\n     */\n    (e: 'clear'): void;\n    /**\n     * Emitted when an option is added.\n     */\n    (e: 'add', optionAdded: Option): void;\n    /**\n     * Emitted when an option is removed.\n     */\n    (e: 'remove', optionRemoved: Option, index: number): void;\n    /**\n     * Emitted when the select is opened.\n     */\n    (e: 'opened'): void;\n    /**\n     * Emitted when the select is closed.\n     */\n    (e: 'closed', selectedOptions: SelectedOptions): void;\n  }>();\n\n  const attrs = useAttrs();\n  const slots = defineSlots<{\n    /**\n     * Selected value(s) custom text. Exposes the option object and remove function.\n     */\n    selected(props: {\n      /**\n       * The selected option object.\n       */\n      option: Option;\n      /**\n       * Function to remove the selected option from the selection.\n       */\n      onRemove: () => void;\n      /**\n       * Class to apply to the selected chip.\n       */\n      chipSelectedClass: string;\n    }): unknown;\n    /**\n     * Select custom option text. Exposes the option object\n     */\n    option(props: {\n      /**\n       * Option The option instance for this list item.\n       */\n      option: Option;\n    }): unknown;\n    /**\n     * Slot for when there are no options available.\n     */\n    'no-options'(): unknown;\n    /**\n     * Slot to display a helpful hint message below the select field.\n     */\n    hint(): unknown;\n  }>();\n\n  const selectRef = ref<HTMLDivElement | null>(null);\n  const contentRef = ref<HTMLDivElement | null>(null);\n  const optionsWrapperRef = ref<HTMLDivElement | null>(null);\n  const chipsRef = ref<HTMLUListElement | null>(null);\n  const searchRef = ref<HTMLInputElement | null>(null);\n\n  const chipsHeight = ref(0);\n  const contentHeight = ref(0);\n  const internalValue = ref<Option[]>([]) as Ref<Option[]>;\n  const searchFor = ref<(searchTerm: string) => Option[]>(() => []); // initialized in the watch handler for options\n  const searchTerm = ref('');\n  const activeIndex = ref(-1);\n  const isActive = ref(false);\n  const pendingSearchRequests = ref({});\n  const shouldUseLazyOptions = ref(false);\n\n  const { floatingStyles, update: updateFloating } = useFloating(selectRef, optionsWrapperRef, {\n    whileElementsMounted: autoUpdate,\n    placement: props.menuPlacement,\n    middleware: [\n      flip(),\n      offset(({ rects, placement }) => {\n        // gets the current placement side, especially after flip() is run\n        const placementSide = placement.split('-')[0] as Side;\n        const isBottom = placementSide === ('bottom' satisfies Side);\n\n        // if the placement is at the bottom, we need to adjust the offset\n        if (isBottom && chipsHeight.value > contentHeight.value) {\n          return chipsHeight.value - rects.reference.height + GAP_HEIGHT;\n        } else {\n          return GAP_HEIGHT;\n        }\n      }),\n      size({\n        apply({ availableHeight, elements, rects }) {\n          if (props.enableTeleport) {\n            Object.assign(elements.floating.style, {\n              maxWidth: `${rects.reference.width}px`,\n              maxHeight: `${Math.min(availableHeight, MENU_MAX_HEIGHT_PX)}px`,\n            });\n          }\n        },\n      }),\n    ],\n  });\n  // ResizeObserver is a browser API and is undefined in Node (SSR). Only create the observer when available\n  // so this component remains SSR-safe (e.g. VitePress, Nuxt). Use optional chaining where we observe/disconnect.\n  const resizeObserverChips =\n    typeof ResizeObserver !== 'undefined' ? new ResizeObserver(() => debouncedUpdateChipsHeight()) : null;\n\n  const isSearchable = computed(() => !props.hideSearch && props.searchable !== 'false' && props.searchable !== false);\n\n  const internalOptions = computed(() => {\n    let OPTIONS = (shouldUseLazyOptions.value && props.lazy ? props.lazy() : props.options).filter(Boolean); // prevent [undefined]\n\n    // if `options` is an array... but not an array of objects\n    if (!isPlainObject(OPTIONS[0])) {\n      OPTIONS = OPTIONS.map((name, id) => ({ name, id }) as unknown as Option);\n    }\n\n    return OPTIONS;\n  });\n\n  const readOnlyValue = computed(() => {\n    if (!internalValue.value.length) {\n      return '';\n    }\n\n    return internalValue.value.map((option) => option[props.displayBy] || option).join(', ');\n  });\n\n  const isSearching = computed(() => props.searchLoading || Object.keys(pendingSearchRequests.value).length > 0);\n\n  const filteredOptions = computed(() => {\n    if (props.disableFiltering || !(searchTerm.value || '').trim()) {\n      return internalOptions.value;\n    }\n\n    return searchFor.value(searchTerm.value);\n  });\n\n  const isChipsOneLine = computed(() => chipsHeight.value <= contentHeight.value);\n\n  const shouldShowTotal = computed(\n    () => !isActive.value && !props.single && !isChipsOneLine.value && internalValue.value.length,\n  );\n\n  const clearSelectionText = computed(() => {\n    return [internalValue.value.length, props.selectItemType, 'selected'].filter(Boolean).join(' ');\n  });\n\n  const shouldPreventEmpty = computed(() => {\n    return props.preventEmpty || props.allowEmpty === 'false' || props.allowEmpty === false;\n  });\n\n  watch(searchTerm, (currentValue, oldValue) => oldValue !== currentValue && setIndex(-1));\n\n  watch(internalValue, () => debouncedUpdateChipsHeight(), { deep: true });\n\n  watch(\n    () => props.modelValue,\n    (value) => {\n      // multiple\n      if (Array.isArray(value)) {\n        const newValue = value.filter(Boolean); // sometimes modelValue is [undefined]\n\n        if (!isEqual(newValue, internalValue.value)) {\n          internalValue.value = newValue;\n        }\n\n        return;\n      }\n\n      // single; if value is a non-empty string or a non-empty object\n      if (!isEmpty(value)) {\n        if (!isEqual(value, internalValue.value[0])) {\n          internalValue.value[0] = value;\n        }\n\n        return;\n      }\n\n      // if value is an empty object or falsy\n      internalValue.value = [];\n    },\n    { immediate: true },\n  );\n\n  watch(\n    () => props.options,\n    () => {\n      const { searchFor: searchForFn } = useSearch<Option>({\n        items: computed(() => internalOptions.value),\n        fieldNames: props.searchBy.length ? props.searchBy : [props.displayBy],\n        trackBy: props.trackBy,\n      });\n\n      searchFor.value = (searchTerm) => searchForFn(searchTerm, { fuzzy: props.useFuzzySearch });\n    },\n    { immediate: true },\n  );\n\n  watch(chipsHeight, () => debouncedUpdateFloating());\n\n  const debouncedUpdateFloating = debounce(() => updateFloating(), 50);\n  const debouncedUpdateChipsHeight = debounce(() => updateChipsHeight(), 50);\n\n  const isOptionDisabled = (option: Option) => {\n    return option && typeof option === 'object' && 'disabled' in option && option?.disabled;\n  };\n\n  const clear = () => {\n    internalValue.value = [];\n    emit('update:model-value', props.single ? undefined : internalValue.value);\n    emit('clear');\n  };\n\n  /**\n   * Adds (or selects) an option.\n   * @param {Option} option The selected option\n   */\n  const handleSelect = (option?: Option) => {\n    if (props.disabled || !option || isOptionDisabled(option)) {\n      return;\n    }\n\n    if (!isSelected(option)) {\n      if (props.single) {\n        internalValue.value = [];\n      }\n\n      internalValue.value.push(option);\n      emit('update:model-value', props.single ? internalValue.value[0] : internalValue.value);\n      emit('add', option);\n    } else {\n      remove(option);\n    }\n\n    if (props.single) {\n      dismiss();\n    }\n  };\n\n  const handleSelectChange = (evt) => {\n    // If this is a single select, just pass along the option\n    // This short-circuit is purely for readability, as the iterations for multi would also work for single selects\n    if (props.single) {\n      const selectedOption = internalOptions.value.find((opt) => opt[props.trackBy]?.toString() === evt.target.value);\n      handleSelect(selectedOption);\n      return;\n    }\n\n    // Spread the HTMLCollection (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection) to array so we can invoke `find`\n    const selectedOptions = [...evt.target.selectedOptions];\n\n    // If it's a multiselect, the HTML select used for the screen reader can have multiple items\n    // deselected and a new one selected in one change event.\n    // We need to reconcile the new selected options with our internal state\n\n    // 1. remove all the items in our internal state that are no longer present\n    // (Spread this array so we can remove items from it while iterating)\n    for (const internalOption of [...internalValue.value]) {\n      const selectedOption = selectedOptions.find((opt) => opt.value === internalOption[props.trackBy]?.toString());\n\n      if (!selectedOption) {\n        remove(internalOption);\n      }\n    }\n\n    // 2. add all the items that are now selected if needed\n    for (const selectedOption of selectedOptions) {\n      const internalOption = internalOptions.value.find(\n        (opt) => opt[props.trackBy]?.toString() === selectedOption.value,\n      );\n\n      if (isSelected(internalOption)) {\n        continue;\n      } else {\n        handleSelect(internalOption);\n      }\n    }\n  };\n\n  /**\n   * Removes (or un-selects) an option.\n   * @param {Option} option The option to be removed\n   */\n  const remove = (option: Option) => {\n    if (props.disabled || (shouldPreventEmpty.value && internalValue.value.length === 1)) {\n      return;\n    }\n\n    const index = internalValue.value.findIndex((opt) => opt[props.trackBy] === option[props.trackBy]);\n\n    if (index === -1) {\n      logger.warn('ll-select: could not find option to remove', option);\n      return;\n    }\n\n    internalValue.value.splice(index, 1);\n    emit('update:model-value', props.single ? internalValue.value[0] : internalValue.value);\n    emit('remove', option, index);\n  };\n\n  /**\n   * Opens the `options` drawer and provides focus.\n   */\n  const open = () => {\n    if (isActive.value) {\n      return;\n    }\n\n    debouncedUpdateChipsHeight();\n\n    isActive.value = true;\n    emit('opened');\n\n    if (isSearchable.value) {\n      nextTick(() => {\n        searchRef.value?.focus({ preventScroll: true });\n      });\n    }\n  };\n\n  /**\n   * Closes the drawer and cleans up a few settings.\n   */\n  const dismiss = () => {\n    if (isActive.value) {\n      emit('closed', internalValue.value);\n    }\n\n    setIndex(-1);\n    isActive.value = false;\n\n    if (!props.preserveSearchTerm) {\n      searchTerm.value = '';\n    }\n\n    // The optional chaining here is required.\n    // There are cases when the component is removed from the DOM and the ref is lost.\n    // .ie when the component is used in a modal and the modal is dismissed.\n    // Tracked in this ticket: F-1893\n    contentRef.value?.blur(); // if the component remains in focus, clicking it again will not open the options list\n  };\n\n  /**\n   * Scroll list items when up and down keys are pressed\n   * @param {KeyboardEvent} e The native keydown event.\n   */\n  const scrollItems = async (e: KeyboardEvent) => {\n    await nextTick();\n\n    if (!contentRef.value) {\n      return;\n    }\n\n    const allowedKeyCodes = [KEY_CODES.ENTER, KEY_CODES.ESCAPE] as number[];\n\n    // Wait for highlighted item update after using keyboard (`onKeyDown`)\n    if (!allowedKeyCodes.includes(e.keyCode)) {\n      const el = contentRef.value.querySelector('.stash-select__option--highlighted');\n      const elBCR = el?.getBoundingClientRect();\n      const parentBCR = contentRef.value.getBoundingClientRect();\n\n      if (!elBCR || !parentBCR) {\n        return;\n      }\n\n      if (elBCR.bottom >= parentBCR.bottom || elBCR.top <= parentBCR.top + elBCR.height) {\n        el?.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n      }\n    }\n  };\n\n  /**\n   * Sets the `activeIndex` on hover, so that the user may then fine-tune\n   * their selection with the arrow keys.\n   */\n  const setIndex = (index: number) => {\n    activeIndex.value = index;\n  };\n\n  /**\n   * Handles all user keyboard input on the Dropdown.\n   * @param {KeyboardEvent} e The native keydown event.\n   */\n  const onKeyDown = (e: KeyboardEvent) => {\n    if (e.keyCode === KEY_CODES.ESCAPE) {\n      dismiss();\n    } else if (e.keyCode === KEY_CODES.DOWN && activeIndex.value < filteredOptions.value.length - 1 && isActive.value) {\n      activeIndex.value++;\n    } else if (e.keyCode === KEY_CODES.UP && activeIndex.value > 0) {\n      if (isActive.value) {\n        activeIndex.value--;\n      }\n\n      // Scroll to top when search is available and first element is highlighted (Using 100 to be sure that it'll be sure that search is visible)\n      if (optionsWrapperRef.value && isSearchable.value && activeIndex.value === 0) {\n        optionsWrapperRef.value.scrollTop -= 100;\n      }\n    } else if (e.keyCode === KEY_CODES.ENTER && activeIndex.value !== -1 && isActive.value) {\n      handleSelect(filteredOptions.value[activeIndex.value]);\n    } else {\n      return;\n    }\n\n    e.preventDefault(); // if keyDown did something / we didn't return\n    scrollItems(e);\n  };\n\n  const handleSearchInput = debounce(function () {\n    search();\n  }, DEBOUNCE.FAST);\n\n  const search = async function () {\n    if (!props.onSearch) {\n      return;\n    }\n\n    const requestId = uniqueId('search-request-');\n\n    try {\n      pendingSearchRequests.value[requestId] = true;\n      await props.onSearch(searchTerm.value);\n    } finally {\n      delete pendingSearchRequests.value[requestId];\n    }\n  };\n\n  /**\n   * Dynamically sets classes on an `option` in the drawer.\n   * @param {Option} option The `option` for which to generate classes\n   * @param {number} index The index of the `option` in the list of `options`\n   */\n  const optionClass = (option: Option, index: number) => {\n    return [\n      {\n        'stash-select__option': true,\n        'stash-select__option--disabled': isOptionDisabled(option),\n        'stash-select__option--highlighted': activeIndex.value === index,\n        'stash-select__option--selected': isSelected(option),\n      },\n\n      // @deprecated\n      // backwards compatibility\n      {\n        'is-selected': activeIndex.value === index,\n        'bg-ice-200': activeIndex.value === index,\n        'bg-blue-100 text-ice-700': isSelected(option),\n      },\n    ];\n  };\n\n  /**\n   * Finds out if the given item is already present in the selected options\n   * @param {Option} option The item to check\n   * @returns {boolean} Returns true if element is selected\n   */\n  const isSelected = (option?: Option | null): boolean => {\n    if (option === undefined || option === null) {\n      return false;\n    }\n\n    return internalValue.value.some((value) => value?.[props.trackBy] === option[props.trackBy]);\n  };\n\n  /**\n   * Checks if the element is within the Select menu by checking both the content and the teleportTo element\n   */\n  function isElementWithinSelectMenu(element: Node | null) {\n    if (!element) {\n      return false;\n    }\n\n    const isElementInMenu = contentRef.value?.contains(element);\n    const isElementInTeleportedMenu = optionsWrapperRef.value?.contains(element);\n\n    return isElementInMenu || isElementInTeleportedMenu;\n  }\n\n  function handleFocusOut(focusEvent: FocusEvent) {\n    const nextFocusedElement = focusEvent.relatedTarget as Node | null;\n    const isFocusedElementInMenu = isElementWithinSelectMenu(nextFocusedElement);\n\n    if (!isFocusedElementInMenu && nextFocusedElement) {\n      dismiss();\n    }\n  }\n\n  function handleOutsideClick(event: MouseEvent) {\n    const target = event.target as Node | null;\n    const isFocusedElementInMenu = isElementWithinSelectMenu(target);\n\n    if (!isFocusedElementInMenu) {\n      dismiss();\n    }\n  }\n\n  /**\n   * Handles the mouse leave of the select and clears item highlight\n   */\n  const handleMouseLeave = () => {\n    setIndex(-1);\n  };\n\n  /**\n   * Update height of chips container\n   */\n  const updateChipsHeight = async () => {\n    // Wait for the DOM to update so we can get an accurate value for chips' clientHeight\n    await nextTick();\n\n    if (chipsRef.value && contentRef.value) {\n      contentHeight.value = contentHeight.value === 0 ? contentRef.value.clientHeight : contentHeight.value;\n      chipsHeight.value = chipsRef.value.clientHeight;\n    }\n  };\n\n  onMounted(() => {\n    if (attrs.onInput) {\n      throw new Error('ll-select: use the @update:model-value event instead of @input.');\n    }\n\n    if (resizeObserverChips && chipsRef.value) {\n      resizeObserverChips.observe(chipsRef.value); // no-op when null (SSR)\n    }\n\n    window.addEventListener('resize', debouncedUpdateChipsHeight);\n\n    debouncedUpdateChipsHeight();\n  });\n\n  /**\n   * Remove event listener to handle component width when resizing window\n   */\n  onUnmounted(() => {\n    window.removeEventListener('resize', updateChipsHeight);\n    resizeObserverChips?.disconnect(); // null during SSR\n    debouncedUpdateChipsHeight.cancel();\n  });\n</script>\n\n<template>\n  <Field\n    v-bind=\"props\"\n    class=\"input ll-select stash-select\"\n    data-test=\"stash-select\"\n    :class=\"attrs.class\"\n    :error-text=\"props.errorText || props.error\"\n    :hint-text=\"props.hintText || props.hint\"\n  >\n    <template v-if=\"props.isReadOnly\" #default=\"{ fieldId, labelId }\">\n      <div class=\"flex h-input items-center text-sm\">\n        <span :id=\"fieldId\" :aria-labelledby=\"labelId\" class=\"show-empty h-min\">\n          {{ readOnlyValue }}\n        </span>\n      </div>\n    </template>\n    <template v-else #default=\"{ fieldId, fieldErrorId, hasError }\">\n      <!-- SCREEN READER ONLY -->\n      <select\n        :id=\"fieldId\"\n        :aria-errormessage=\"fieldErrorId\"\n        :aria-invalid=\"hasError\"\n        class=\"sr-only\"\n        :disabled=\"props.disabled\"\n        :multiple=\"!props.single\"\n        :name=\"props.name\"\n        @change=\"handleSelectChange\"\n      >\n        <option\n          v-for=\"(option, index) in filteredOptions\"\n          :key=\"`srOnlyOption-${index}`\"\n          :selected=\"isSelected(option)\"\n          :value=\"option[props.trackBy]\"\n          :disabled=\"isOptionDisabled(option)\"\n        >\n          {{ option[props.displayBy] || '' }}\n        </option>\n\n        <!-- Empty option to allow deselecting non-multiselects -->\n        <option value=\"\"></option>\n      </select>\n\n      <!-- SELECT -->\n      <div\n        ref=\"selectRef\"\n        v-clickoutside=\"handleOutsideClick\"\n        role=\"listbox\"\n        aria-hidden=\"true\"\n        class=\"stash-select__content-wrapper\"\n        :aria-controls=\"'listbox-' + fieldId\"\n        :aria-expanded=\"isActive\"\n        :aria-label=\"props.placeholder\"\n        :aria-disabled=\"props.disabled || undefined\"\n        :class=\"[\n          {\n            'stash-select--disabled': !!props.disabled,\n            'stash-select--error': !!(props.errorText || props.error),\n            'stash-select--active': isActive,\n            'stash-select--single': props.single,\n          },\n\n          // @deprecated\n          // backwards compatibility\n          {\n            'is-active': isActive,\n            'is-single': props.single,\n            'is-disabled': props.disabled,\n          },\n        ]\"\n        @keydown=\"onKeyDown\"\n        @keyup.esc=\"dismiss\"\n      >\n        <!-- CONTENT -->\n        <div\n          :id=\"'listbox-' + fieldId\"\n          ref=\"contentRef\"\n          class=\"input-field stash-select__content\"\n          tabindex=\"0\"\n          data-test=\"stash-select|dropdown-trigger\"\n          @focusin=\"open\"\n          @focusin.once=\"shouldUseLazyOptions = true\"\n          @focusout=\"handleFocusOut\"\n          @keydown=\"open\"\n          @mouseleave=\"handleMouseLeave\"\n        >\n          <!-- CHIPS -->\n          <ul ref=\"chipsRef\" class=\"stash-select__chips\">\n            <!-- PLACEHOLDER -->\n            <li\n              v-if=\"!internalValue.length\"\n              class=\"stash-select__placeholder mr-0 pl-1.5\"\n              :class=\"{ truncate: !props.noTruncate }\"\n            >\n              {{ props.placeholder }}\n            </li>\n\n            <template v-if=\"props.single\">\n              <li\n                v-for=\"option of internalValue\"\n                :key=\"`chip-${option[props.trackBy]}`\"\n                class=\"stash-select__selected mr-0 pl-1.5\"\n                :class=\"{ truncate: !props.noTruncate }\"\n              >\n                <slot\n                  name=\"selected\"\n                  :option=\"option\"\n                  :on-remove=\"() => remove(option)\"\n                  chip-selected-class=\"stash-select__chip\"\n                >\n                  {{ option[props.displayBy] || option }}\n                  <button\n                    tabindex=\"-1\"\n                    class=\"stash-select__remove\"\n                    @keypress.enter.prevent=\"remove(option)\"\n                    @mousedown.prevent.stop=\"remove(option)\"\n                  >\n                    <Icon icon=\"close\" name=\"close\" size=\"small\" />\n                  </button>\n                </slot>\n              </li>\n            </template>\n\n            <template v-else>\n              <li v-for=\"option of internalValue\" :key=\"`chip-${option[props.trackBy]}`\" class=\"inline-block\">\n                <slot\n                  name=\"selected\"\n                  :option=\"option\"\n                  :on-remove=\"() => remove(option)\"\n                  chip-selected-class=\"stash-select__chip\"\n                >\n                  <Chip\n                    bg-color=\"blue-500\"\n                    is-removable\n                    text-color=\"white\"\n                    class=\"stash-select__chip\"\n                    @remove=\"remove(option)\"\n                  >\n                    {{ option[props.displayBy] || option }}\n                  </Chip>\n                </slot>\n              </li>\n            </template>\n          </ul>\n\n          <!-- TOTAL -->\n          <div v-if=\"shouldShowTotal\" class=\"stash-select__total\">\n            <Chip bg-color=\"blue-500\" is-removable text-color=\"white\" class=\"stash-select__chip\" @remove=\"clear\">\n              {{ clearSelectionText }}\n            </Chip>\n          </div>\n\n          <!-- TOGGLE -->\n          <Icon\n            v-if=\"props.icon\"\n            class=\"stash-select__icon\"\n            data-test=\"stash-select|toggle-icon\"\n            :name=\"props.icon as IconName\"\n            :class=\"{ 'text-ice-500': props.disabled }\"\n            @mousedown.prevent=\"isActive && dismiss()\"\n          />\n          <!-- DRAWER -->\n          <Teleport :to=\"props.teleportTo\" :disabled=\"!props.enableTeleport\">\n            <transition name=\"fade\">\n              <div\n                v-show=\"isActive && !props.disabled\"\n                ref=\"optionsWrapperRef\"\n                class=\"stash-select__border-selector w-full shadow-2xl\"\n                :style=\"floatingStyles\"\n                @click.stop\n              >\n                <!-- SEARCH -->\n                <div v-if=\"isSearchable\" class=\"flex items-center border-b border-blue-500 pr-1.5\">\n                  <input\n                    ref=\"searchRef\"\n                    v-model=\"searchTerm\"\n                    type=\"text\"\n                    autocomplete=\"off\"\n                    class=\"stash-select__search\"\n                    :data-test=\"attrs['data-test'] ? attrs['data-test'] + '-search' : 'stash-select|search'\"\n                    :placeholder=\"props.searchPlaceholder\"\n                    :spellcheck=\"false\"\n                    @input=\"handleSearchInput\"\n                  />\n                  <Icon name=\"search\" class=\"text-ice-500\" />\n                </div>\n\n                <!-- OPTIONS -->\n                <ul class=\"stash-select__options options my-1.5 w-full border-white bg-white\">\n                  <li\n                    v-for=\"(option, index) in filteredOptions\"\n                    :key=\"`option-${option[props.trackBy]}`\"\n                    :data-test=\"option[props.trackBy]\"\n                    :class=\"optionClass(option, index)\"\n                    @click=\"handleSelect(option)\"\n                    @mouseenter.self=\"setIndex(index)\"\n                  >\n                    <slot name=\"option\" :option=\"option\">\n                      {{ option[props.displayBy] || option }}\n                    </slot>\n\n                    <span v-if=\"isSelected(option) && !props.hideCheck\" class=\"ml-auto pl-1.5\">\n                      <Icon class=\"text-blue-500\" name=\"check\" />\n                    </span>\n                  </li>\n                  <li v-show=\"props.loading || isSearching\" class=\"m-1.5 cursor-default p-1.5\">\n                    <Icon data-test=\"stash-select|options-loading\" name=\"working\" class=\"animate-spin text-ice-500\" />\n                  </li>\n                  <li\n                    v-show=\"!props.loading && !isSearching && !filteredOptions.length\"\n                    class=\"m-1.5 cursor-default p-1.5\"\n                    data-test=\"stash-select|no-options\"\n                  >\n                    <slot name=\"no-options\"> No options </slot>\n                  </li>\n                </ul>\n              </div>\n            </transition>\n          </Teleport>\n        </div>\n      </div>\n    </template>\n    <template v-if=\"slots.hint?.()\" #hint>\n      <slot name=\"hint\"></slot>\n    </template>\n  </Field>\n</template>\n\n<style scoped>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .stash-select {\n      position: relative;\n    }\n\n    .stash-select__content,\n    .stash-select__content-wrapper {\n      height: var(--height-input);\n    }\n\n    .stash-select__content {\n      cursor: pointer;\n      overflow: hidden;\n      position: absolute;\n      background: var(--color-white);\n      border: 1px solid var(--color-ice-500);\n      border-radius: var(--radius-sm);\n      color: var(--color-ice-700);\n      display: block;\n      font-family: var(--font-family-sofia);\n      font-size: var(--text-sm);\n      font-weight: normal;\n      outline: none;\n      padding: 0 !important;\n      width: 100%;\n\n      &:hover {\n        border-color: var(--color-ice-500);\n      }\n\n      &:focus-within {\n        border-color: var(--color-blue-500) !important;\n      }\n    }\n\n    .stash-select--disabled .stash-select__content {\n      background-color: var(--color-ice-100);\n      border-color: var(--color-ice-500);\n      color: var(--color-ice-500);\n      pointer-events: none !important;\n    }\n\n    .stash-select--active .stash-select__content {\n      cursor: default;\n      height: auto;\n      min-width: var(--width-select-menu);\n      overflow: visible;\n      z-index: var(--z-index-control);\n      box-shadow: var(--shadow-sm);\n    }\n\n    .stash-select--error :where(.stash-select__content, .stash-select__content:hover:not(:focus)) {\n      border-color: var(--color-red-500) !important;\n    }\n\n    .stash-select__placeholder {\n      color: var(--color-ice-500);\n    }\n\n    .stash-select--active .stash-select__placeholder {\n      cursor: default;\n    }\n\n    .stash-select__icon {\n      color: var(--color-ice-700);\n      cursor: pointer;\n      pointer-events: none;\n      position: absolute;\n      right: --spacing(1.5);\n      top: --spacing(1.5);\n    }\n\n    .stash-select--disabled .stash-select__icon {\n      color: var(--color-ice-500);\n    }\n\n    .stash-select--active .stash-select__icon {\n      pointer-events: auto;\n    }\n\n    .stash-select__chips {\n      /* distribute (or split?) the margin between chip and chips container. TODO? */\n      --half-space: calc(--spacing(1.5) / 2);\n\n      padding: var(--half-space);\n      padding-right: --spacing(9);\n    }\n\n    /* chip AND placeholder AND selected: */\n    .stash-select__chips > li {\n      cursor: pointer;\n      height: var(--height-chip);\n      margin: var(--half-space);\n      max-width: 100%;\n    }\n\n    .stash-select--disabled .stash-select__chips > li {\n      cursor: default;\n    }\n\n    .stash-select__content-wrapper:deep(.stash-select__chip) {\n      border-radius: var(--radius-sm);\n      font-size: var(--text-sm);\n      font-weight: normal;\n      height: var(--height-chip);\n      max-width: inherit;\n      text-transform: none;\n    }\n\n    .stash-select--disabled:deep(.stash-select__chip) {\n      background: var(--color-ice-500);\n      color: var(--color-white);\n    }\n\n    /* Base total chip styles moved above the more specific descendant rule to satisfy no-descending-specificity */\n    .stash-select__total {\n      display: block;\n      font-weight: var(--font-weight-semibold);\n      line-height: var(--line-height-button);\n      position: absolute;\n      right: --spacing(6);\n      white-space: nowrap;\n      z-index: var(--z-index-content);\n\n      /* -- design TBD --- */\n      top: 0;\n      left: 0;\n      bottom: 0;\n      color: var(--color-white);\n      background: white;\n      padding: --spacing(1.5);\n    }\n\n    .stash-select__content-wrapper .stash-select__total:deep(.stash-select__chip) {\n      font-weight: var(--font-weight-normal);\n    }\n\n    .stash-select__selected {\n      color: var(--color-ice-700);\n    }\n\n    .stash-select--disabled .stash-select__selected {\n      color: var(--color-ice-500);\n    }\n\n    .stash-select__selected :where(.stash-select__remove) {\n      display: none;\n    }\n\n    .stash-select__search {\n      position: relative;\n      width: 100%;\n      height: var(--height-input);\n      background: var(--color-white);\n      border-radius: var(--radius-sm);\n      color: var(--color-ice-700);\n      display: block;\n      font-family: var(--font-family-sofia);\n      font-size: var(--text-sm);\n      font-weight: var(--font-weight-normal);\n      outline: none;\n      padding: 0 --spacing(3);\n      border: 0 !important;\n    }\n\n    .stash-select__border-selector {\n      background: white;\n      border-radius: var(--radius-sm);\n      border: 1px solid var(--color-blue-500);\n      max-height: var(--max-height-select-menu);\n      overflow: auto;\n      z-index: var(--z-index-dialog);\n    }\n\n    .stash-select__option {\n      align-items: center;\n      border-radius: var(--radius-sm);\n      cursor: pointer;\n      display: flex;\n      line-height: --spacing(6);\n      margin: --spacing(1.5);\n      padding: --spacing(1.5);\n    }\n\n    .stash-select__option--disabled {\n      color: var(--color-ice-500);\n      cursor: not-allowed;\n    }\n\n    .stash-select__option--highlighted {\n      background-color: var(--color-ice-200);\n    }\n\n    .stash-select__option--selected {\n      background-color: var(--color-blue-100);\n      color: var(--color-ice-700);\n    }\n  }\n</style>\n"],"names":["props","__props","emit","__emit","attrs","useAttrs","slots","_useSlots","selectRef","ref","contentRef","optionsWrapperRef","chipsRef","searchRef","chipsHeight","contentHeight","internalValue","searchFor","searchTerm","activeIndex","isActive","pendingSearchRequests","shouldUseLazyOptions","floatingStyles","updateFloating","useFloating","autoUpdate","flip","offset","rects","placement","size","availableHeight","elements","resizeObserverChips","debouncedUpdateChipsHeight","isSearchable","computed","internalOptions","OPTIONS","isPlainObject","name","id","readOnlyValue","option","isSearching","filteredOptions","isChipsOneLine","shouldShowTotal","clearSelectionText","shouldPreventEmpty","watch","currentValue","oldValue","setIndex","value","newValue","isEqual","isEmpty","searchForFn","useSearch","debouncedUpdateFloating","debounce","updateChipsHeight","isOptionDisabled","clear","handleSelect","isSelected","remove","dismiss","handleSelectChange","evt","selectedOption","opt","_a","selectedOptions","internalOption","index","logger","open","nextTick","scrollItems","KEY_CODES","el","elBCR","parentBCR","onKeyDown","handleSearchInput","search","DEBOUNCE","requestId","uniqueId","optionClass","isElementWithinSelectMenu","element","isElementInMenu","isElementInTeleportedMenu","_b","handleFocusOut","focusEvent","nextFocusedElement","handleOutsideClick","event","target","handleMouseLeave","onMounted","onUnmounted","_createBlock","Field","_mergeProps","_unref","fieldId","labelId","_createElementVNode","_hoisted_1","_hoisted_2","_withCtx","fieldErrorId","hasError","_openBlock","_createElementBlock","_Fragment","_renderList","_hoisted_4","_normalizeClass","_toDisplayString","_renderSlot","_ctx","_createTextVNode","_withKeys","_withModifiers","$event","_createVNode","Icon","Chip","_hoisted_8","_cache","_Teleport","_Transition","_hoisted_9","args","_hoisted_11","_hoisted_13","_withDirectives","_hoisted_14","_hoisted_15","_vShow"],"mappings":"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"}

package/dist/Stepper.js

@@ -1,5 +1,5 @@
 import { defineComponent as I, ref as N, computed as i, watch as o, watchEffect as g, provide as y, nextTick as E, createElementBlock as R, openBlock as n, createElementVNode as T, createBlock as d, createCommentVNode as v, normalizeClass as p, renderSlot as z, unref as f, withCtx as m, createVNode as h } from "vue";
-import A from "./useMediaQuery.js";
+import { a as A } from "./index-t9tXBnql.js";
 import B from "./useStepper.js";
 import x from "./Button.js";
 import S from "./Icon.js";

package/dist/Tab.js

@@ -1,7 +1,7 @@
 import { defineComponent as x, useCssModule as T, inject as y, computed as r, onMounted as k, nextTick as g, toRefs as c, createElementBlock as C, openBlock as u, withKeys as P, normalizeClass as $, unref as a, createBlock as B, resolveDynamicComponent as E, mergeProps as N, withCtx as b, createElementVNode as A, createVNode as I, renderSlot as M } from "vue";
 import j from "@leaflink/snitch";
 import D from "./Badge.js";
-import { T as L } from "./Tabs.vue_vue_type_script_setup_true_lang-B3FBaVP5.js";
+import { T as L } from "./Tabs.vue_vue_type_script_setup_true_lang-DEopbeSY.js";
 import { _ as V } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const K = ["id", "aria-selected", "aria-controls", "aria-disabled"], O = { class: "mt-0.5" }, S = /* @__PURE__ */ x({
   __name: "Tab",

package/dist/Table.js

@@ -1,19 +1,19 @@
-import { defineComponent as K, useCssModule as Q, inject as R, computed as l, useTemplateRef as O, ref as Y, provide as Z, watchEffect as ee, createElementBlock as v, openBlock as d, createElementVNode as u, createCommentVNode as _, normalizeStyle as k, normalizeClass as n, unref as b, renderSlot as S, createBlock as H, withCtx as f, createVNode as r, Fragment as I } from "vue";
-import { b as te, c as N, d as le } from "./index-DA70nQCT.js";
+import { defineComponent as K, useCssModule as Q, inject as R, computed as l, useTemplateRef as O, ref as Y, provide as Z, watchEffect as ee, createElementBlock as v, openBlock as d, createElementVNode as u, createCommentVNode as _, normalizeStyle as S, normalizeClass as n, unref as b, renderSlot as k, createBlock as H, withCtx as f, createVNode as r, Fragment as I } from "vue";
+import { d as te, e as N, f as le } from "./index-t9tXBnql.js";
 import A from "./Button.js";
 import "lodash-es/cloneDeep";
-import { M as z } from "./Module.keys-DcqBbvvT.js";
+import { M as D } from "./Module.keys-DcqBbvvT.js";
 import "lodash-es/get";
-import $ from "./Icon.js";
-import { D } from "./DataView.keys-aSOnA4AD.js";
+import z from "./Icon.js";
+import { D as $ } from "./DataView.keys-aSOnA4AD.js";
 import ae from "./EmptyState.js";
-import oe from "./Loading.js";
+import se from "./Loading.js";
 import M from "./TableCell.js";
 import J from "./TableRow.js";
-import { T as se } from "./Table.keys-LHQf6FEH.js";
+import { T as oe } from "./Table.keys-LHQf6FEH.js";
 import { S as re } from "./misc-CHQs-G03.js";
 import { _ as ne } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-var ie = /* @__PURE__ */ ((s) => (s.Scroll = "scroll", s.Stack = "stack", s))(ie || {}), ce = /* @__PURE__ */ ((s) => (s.None = "none", s.Rounded = "rounded", s.RoundedBottom = "rounded-bottom", s))(ce || {});
+var ie = /* @__PURE__ */ ((o) => (o.Scroll = "scroll", o.Stack = "stack", o))(ie || {}), ce = /* @__PURE__ */ ((o) => (o.None = "none", o.Rounded = "rounded", o.RoundedBottom = "rounded-bottom", o))(ce || {});
 const de = { class: "stash-table-wrapper relative" }, ue = ["aria-busy"], fe = /* @__PURE__ */ K({
   __name: "Table",
   props: {
@@ -22,6 +22,7 @@ const de = { class: "stash-table-wrapper relative" }, ue = ["aria-busy"], fe = /
     hasActions: { type: Boolean, default: !1 },
     hasCustomExpandToggle: { type: Boolean, default: !1 },
     isEmpty: { type: Boolean, default: !1 },
+    isSchemaDriven: { type: Boolean, default: !1 },
     isLoading: { type: Boolean, default: !1 },
     isExpandable: { type: Boolean, default: !1 },
     isSelectable: { type: Boolean, default: !1 },
@@ -29,14 +30,14 @@ const de = { class: "stash-table-wrapper relative" }, ue = ["aria-busy"], fe = /
     radius: { default: "rounded" },
     stickyHeader: { default: void 0 }
   },
-  setup(s) {
-    const e = s, m = Q(), {
+  setup(o) {
+    const e = o, m = Q(), {
       density: P,
       variant: p,
       isEmpty: h,
       isLoading: i,
       isSelectable: E
-    } = R(D.key, D.defaults), { variant: y } = R(z.key, z.defaults), C = l(() => (y == null ? void 0 : y.value) === "table" || p.value === "table" ? "rounded-bottom" : e.radius), o = l(() => e.stickyHeader ? "scroll" : e.layout), V = l(() => o.value === "scroll" && p.value === "table"), W = l(() => {
+    } = R($.key, $.defaults), { variant: y } = R(D.key, D.defaults), C = l(() => (y == null ? void 0 : y.value) === "table" || p.value === "table" ? "rounded-bottom" : e.radius), s = l(() => e.stickyHeader ? "scroll" : e.layout), V = l(() => s.value === "scroll" && p.value === "table"), W = l(() => {
       var t, a;
       return !!((t = e.stickyHeader) != null && t.maxHeight && ((a = e.stickyHeader) == null ? void 0 : a.listLength) > 3);
     }), X = l(() => {
@@ -44,10 +45,10 @@ const de = { class: "stash-table-wrapper relative" }, ue = ["aria-busy"], fe = /
       return {
         maxHeight: W.value ? (t = e.stickyHeader) == null ? void 0 : t.maxHeight : ""
       };
-    }), w = l(() => !!(e.isLoading || i != null && i.value)), c = O("scrollContainerRef"), x = O("tableRef"), T = Y(!1), { arrivedState: L, measure: j } = te(c, { behavior: "smooth" });
+    }), w = l(() => !!(e.isLoading || i != null && i.value)), c = O("scrollContainerRef"), x = O("tableRef"), T = Y(!1), { arrivedState: B, measure: j } = te(c, { behavior: "smooth" });
     function g() {
       const t = c.value;
-      !t || o.value !== "scroll" || (T.value = t.scrollWidth > t.clientWidth, j());
+      !t || s.value !== "scroll" || (T.value = t.scrollWidth > t.clientWidth, j());
     }
     N(c, g), N(x, g), le(
       c,
@@ -57,21 +58,22 @@ const de = { class: "stash-table-wrapper relative" }, ue = ["aria-busy"], fe = /
       },
       { threshold: 0.01 }
     );
-    const F = l(() => !L.left), U = l(() => !L.right), q = l(() => o.value === "scroll" && T.value);
-    function B(t) {
+    const F = l(() => !B.left), U = l(() => !B.right), q = l(() => s.value === "scroll" && T.value);
+    function L(t) {
       var a;
       (a = c.value) == null || a.scrollBy({ left: t, behavior: "smooth" });
     }
-    return Z(se.key, {
+    return Z(oe.key, {
       density: l(() => e.density || P.value || re.Comfortable),
       hasCustomExpandToggle: l(() => e.hasCustomExpandToggle),
       hasActions: l(() => e.hasActions),
+      isSchemaDriven: l(() => e.isSchemaDriven),
       isExpandable: l(() => e.isExpandable),
       isSelectable: l(
         () => e.isSelectable && !e.isLoading && !(i != null && i.value) && !e.isEmpty && !(h != null && h.value)
       ),
       isLoading: w,
-      layout: o
+      layout: s
     }), ee(() => {
       E && (E.value = e.isSelectable);
     }), (t, a) => (d(), v("div", de, [
@@ -82,15 +84,15 @@ const de = { class: "stash-table-wrapper relative" }, ue = ["aria-busy"], fe = /
           { rounded: C.value === "rounded" },
           { "rounded-b": C.value === "rounded-bottom" },
           { "border-t border-ice-200": b(p) === "table" },
-          { "overflow-auto scroll-smooth": o.value === "scroll" },
+          { "overflow-auto scroll-smooth": s.value === "scroll" },
           { shadow: V.value },
           {
-            "overflow-visible lg:overflow-auto lg:shadow": o.value === "stack"
+            "overflow-visible lg:overflow-auto lg:shadow": s.value === "stack"
           }
         ]]),
         "data-test": "stash-table",
         "aria-busy": w.value,
-        style: k(X.value)
+        style: S(X.value)
       }, [
         u("table", {
           ref_key: "tableRef",
@@ -98,22 +100,20 @@ const de = { class: "stash-table-wrapper relative" }, ue = ["aria-busy"], fe = /
           class: "relative w-full border-separate"
         }, [
           u("thead", {
-            class: n(["border-b border-ice-200", {
-              "hidden lg:table-header-group": o.value === "stack"
-            }])
+            class: n(["border-b border-ice-200", { "hidden lg:table-header-group": s.value === "stack" }])
           }, [
-            S(t.$slots, "head")
+            k(t.$slots, "head")
           ], 2),
           u("tbody", null, [
             w.value ? (d(), H(J, { key: 0 }, {
               default: f(() => [
                 r(M, {
                   colspan: "100%",
-                  class: n({ "relative! col-span-12": o.value === "stack" })
+                  class: n({ "relative! col-span-12": s.value === "stack" })
                 }, {
                   default: f(() => [
-                    r(oe, {
-                      style: k([o.value === "scroll" ? { "max-width": "100vw" } : {}])
+                    r(se, {
+                      style: S([s.value === "scroll" ? { "max-width": "100vw" } : {}])
                     }, null, 8, ["style"])
                   ]),
                   _: 1
@@ -124,14 +124,14 @@ const de = { class: "stash-table-wrapper relative" }, ue = ["aria-busy"], fe = /
               default: f(() => [
                 r(M, {
                   colspan: "100%",
-                  class: n({ "relative! col-span-12": o.value === "stack" })
+                  class: n({ "relative! col-span-12": s.value === "stack" })
                 }, {
                   default: f(() => [
-                    S(t.$slots, "empty", {}, () => [
+                    k(t.$slots, "empty", {}, () => [
                       r(ae, {
                         class: "w-full bg-white",
                         text: e.emptyStateText,
-                        style: k([o.value === "scroll" ? { "max-width": "100vw" } : {}])
+                        style: S([s.value === "scroll" ? { "max-width": "100vw" } : {}])
                       }, null, 8, ["text", "style"])
                     ])
                   ]),
@@ -139,7 +139,7 @@ const de = { class: "stash-table-wrapper relative" }, ue = ["aria-busy"], fe = /
                 }, 8, ["class"])
               ]),
               _: 3
-            })) : S(t.$slots, "body", { key: 2 })
+            })) : k(t.$slots, "body", { key: 2 })
           ])
         ], 512)
       ], 14, ue),
@@ -158,10 +158,10 @@ const de = { class: "stash-table-wrapper relative" }, ue = ["aria-busy"], fe = /
             icon: "",
             "aria-label": "Scroll table left",
             "data-test": "stash-table|scroll-left",
-            onClick: a[0] || (a[0] = (G) => B(-200))
+            onClick: a[0] || (a[0] = (G) => L(-200))
           }, {
             default: f(() => [
-              r($, { name: "chevron-left" })
+              r(z, { name: "chevron-left" })
             ]),
             _: 1
           })
@@ -177,10 +177,10 @@ const de = { class: "stash-table-wrapper relative" }, ue = ["aria-busy"], fe = /
             icon: "",
             "aria-label": "Scroll table right",
             "data-test": "stash-table|scroll-right",
-            onClick: a[1] || (a[1] = (G) => B(200))
+            onClick: a[1] || (a[1] = (G) => L(200))
           }, {
             default: f(() => [
-              r($, {
+              r(z, {
                 name: "chevron-right",
                 class: "text-ice-900"
               })
@@ -200,7 +200,7 @@ const de = { class: "stash-table-wrapper relative" }, ue = ["aria-busy"], fe = /
 }, Oe = /* @__PURE__ */ ne(fe, [["__cssModules", he]]);
 export {
   ie as Layout,
-  se as TABLE_INJECTION,
+  oe as TABLE_INJECTION,
   ce as TableRadius,
   Oe as default
 };

package/dist/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../src/components/Table/Table.types.ts","../src/components/Table/Table.vue"],"sourcesContent":["import type { ComputedRef } from 'vue';\n\nimport { SpacingDensities } from '../../../types/misc';\n\nexport enum Layout {\n  Scroll = 'scroll',\n  Stack = 'stack',\n}\n\nexport type Layouts = `${Layout}`;\n\nexport enum TableRadius {\n  None = 'none',\n  Rounded = 'rounded',\n  RoundedBottom = 'rounded-bottom',\n}\n\nexport type TableRadiuses = `${TableRadius}`;\n\n/**\n * Properties and utilities provided to children of a Table instance\n */\nexport interface TableInjection {\n  /**\n   * Controls the Table's padding; the default value is \"comfortable\". On small screens, the density will always be \"compact\".\n   */\n  density: ComputedRef<SpacingDensities>;\n\n  /**\n   * Styles the last column for \"row actions\"\n   */\n  hasActions: ComputedRef<boolean>;\n\n  /**\n   * If true, hides the default expansion toggle column\n   */\n  hasCustomExpandToggle: ComputedRef<boolean>;\n\n  /**\n   * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.\n   */\n  isExpandable: ComputedRef<boolean>;\n\n  /**\n   * Adds a checkbox column for selecting rows; intended for use with the `useSelection` composable.\n   */\n  isSelectable: ComputedRef<boolean>;\n\n  /**\n   * Sets the table layout; the default value is \"scroll\".\n   */\n  layout: ComputedRef<Layouts>;\n\n  /**\n   * Sets the table loading state.\n   */\n  isLoading: ComputedRef<boolean>;\n}\n","<script lang=\"ts\">\n  import { SpacingDensities, SpacingDensity } from '../../../types/misc';\n  import { MODULE_INJECTION } from '../Module/Module.keys';\n  import { Layouts, TableRadiuses } from './Table.types';\n\n  export * from './Table.keys';\n  export * from './Table.types';\n\n  export interface TableProps {\n    /**\n     * Controls the Table's padding; the default value is \"comfortable\". On small screens, \"compact\" density is applied regardless of this prop's value.\n     */\n    density?: SpacingDensities;\n\n    /**\n     * Sets the text for the empty state; the default value is \"No Results\".\n     */\n    emptyStateText?: string;\n\n    /**\n     * Styles the last column for \"row actions\"\n     */\n    hasActions?: boolean;\n\n    /**\n     * If true, hides the default expansion toggle column\n     */\n    hasCustomExpandToggle?: boolean;\n\n    /**\n     * Shows the empty state\n     */\n    isEmpty?: boolean;\n\n    /**\n     * Shows the loading state\n     */\n    isLoading?: boolean;\n\n    /**\n     * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.\n     */\n    isExpandable?: boolean;\n\n    /**\n     * Adds a checkbox column for selecting rows; intended for use with the `useSelection` composable.\n     */\n    isSelectable?: boolean;\n\n    /**\n     * Sets the table layout; the default value is \"scroll\".\n     */\n    layout?: Layouts;\n\n    /**\n     * Controls the corners of the table with the \"border-radius\" CSS property. The default value is \"rounded\".\n     */\n    radius?: TableRadiuses;\n\n    /**\n     * Allows the table head to be sticky when scrolling inside the table body\n     */\n    stickyHeader?: {\n      listLength: number;\n      maxHeight: string;\n    };\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import { useIntersectionObserver, useResizeObserver, useScroll } from '@vueuse/core';\n  import { computed, inject, provide, ref, useCssModule, useTemplateRef, watchEffect } from 'vue';\n\n  import Button from '../Button/Button.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import EmptyState from '../EmptyState/EmptyState.vue';\n  import Icon from '../Icon/Icon.vue';\n  import Loading from '../Loading/Loading.vue';\n  import TableCell from '../TableCell/TableCell.vue';\n  import TableRow from '../TableRow/TableRow.vue';\n  import { TABLE_INJECTION } from './Table.keys';\n\n  const SCROLL_DELTA_PX = 200;\n\n  const props = withDefaults(defineProps<TableProps>(), {\n    density: undefined,\n    emptyStateText: '',\n    hasActions: false,\n    hasCustomExpandToggle: false,\n    isEmpty: false,\n    isLoading: false,\n    isExpandable: false,\n    isSelectable: false,\n    layout: 'scroll',\n    radius: 'rounded',\n    stickyHeader: undefined,\n  });\n\n  const classes = useCssModule();\n\n  const {\n    density: dataViewDensity,\n    variant: dataViewVariant,\n    isEmpty: isDataViewEmpty,\n    isLoading: isDataViewLoading,\n    isSelectable: isDataViewSelectable,\n  } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const { variant: moduleVariant } = inject(MODULE_INJECTION.key, MODULE_INJECTION.defaults);\n\n  const computedRadius = computed<TableRadiuses>(() => {\n    // Will work for tables when rendered inside of a Module with OR without a DataView.\n    if (moduleVariant?.value === 'table') {\n      return 'rounded-bottom';\n    }\n\n    if (dataViewVariant.value === 'table') {\n      return 'rounded-bottom';\n    }\n\n    return props.radius;\n  });\n\n  const computedLayout = computed<Layouts>(() => {\n    if (props.stickyHeader) {\n      return 'scroll';\n    }\n\n    return props.layout;\n  });\n\n  const isShadowEnabled = computed<boolean>(() => {\n    return computedLayout.value === 'scroll' && dataViewVariant.value === 'table';\n  });\n\n  const isStickyHeaderEnabled = computed<boolean>(() => {\n    return !!(\n      (props.stickyHeader?.maxHeight && props.stickyHeader?.listLength > 3) // table can't scroll without a max height; sticky headers only needed for a scrollable table\n      // scrollable table and sticky headers not needed when list is small\n    );\n  });\n\n  const rootStyle = computed(() => ({\n    maxHeight: isStickyHeaderEnabled.value ? props.stickyHeader?.maxHeight : '',\n  }));\n\n  const isTableLoading = computed(() => Boolean(props.isLoading || isDataViewLoading?.value));\n\n  const scrollContainerRef = useTemplateRef<HTMLElement>('scrollContainerRef');\n  const tableRef = useTemplateRef<HTMLTableElement>('tableRef');\n  const hasHorizontalOverflow = ref(false);\n\n  const { arrivedState, measure } = useScroll(scrollContainerRef, { behavior: 'smooth' });\n\n  function updateOverflow() {\n    const el = scrollContainerRef.value;\n    if (!el || computedLayout.value !== 'scroll') return;\n    hasHorizontalOverflow.value = el.scrollWidth > el.clientWidth;\n    measure();\n  }\n\n  useResizeObserver(scrollContainerRef, updateOverflow);\n  useResizeObserver(tableRef, updateOverflow);\n\n  // recalculate overflow when the scroll container is intersected by the viewport.\n  // For instance when the table is inside a v-show container\n  useIntersectionObserver(\n    scrollContainerRef,\n    (entries) => {\n      if (entries[0]?.isIntersecting) updateOverflow();\n    },\n    { threshold: 0.01 },\n  );\n\n  const canScrollLeft = computed(() => !arrivedState.left);\n  const canScrollRight = computed(() => !arrivedState.right);\n  const showScrollButtons = computed(() => computedLayout.value === 'scroll' && hasHorizontalOverflow.value);\n\n  function scrollBy(delta: number) {\n    scrollContainerRef.value?.scrollBy({ left: delta, behavior: 'smooth' });\n  }\n\n  provide(TABLE_INJECTION.key, {\n    density: computed(() => props.density || dataViewDensity.value || SpacingDensity.Comfortable),\n    hasCustomExpandToggle: computed(() => props.hasCustomExpandToggle),\n    hasActions: computed(() => props.hasActions),\n    isExpandable: computed(() => props.isExpandable),\n    isSelectable: computed(\n      () =>\n        props.isSelectable &&\n        !props.isLoading &&\n        !isDataViewLoading?.value &&\n        !props.isEmpty &&\n        !isDataViewEmpty?.value,\n    ),\n    isLoading: isTableLoading,\n    layout: computedLayout,\n  });\n\n  watchEffect(() => {\n    // Table can be both casted within a DataView or standalone. useSelection is still possible to be used on both cases,\n    // making it important to have Table to control selection props.\n    // To avoid breaking changes and developer experience, a DataView injection is passed down and updated whenever it exists,\n    // and move the information up into DataView, that sometimes aren't used.\n    if (isDataViewSelectable) {\n      isDataViewSelectable.value = props.isSelectable;\n    }\n  });\n</script>\n\n<template>\n  <div class=\"stash-table-wrapper relative\">\n    <div\n      ref=\"scrollContainerRef\"\n      class=\"stash-table relative\"\n      :class=\"[\n        { rounded: computedRadius === 'rounded' },\n        { 'rounded-b': computedRadius === 'rounded-bottom' },\n        { 'border-t border-ice-200': dataViewVariant === 'table' },\n        { 'overflow-auto scroll-smooth': computedLayout === 'scroll' },\n        { shadow: isShadowEnabled },\n        {\n          'overflow-visible lg:overflow-auto lg:shadow': computedLayout === 'stack',\n        },\n      ]\"\n      data-test=\"stash-table\"\n      :aria-busy=\"isTableLoading\"\n      :style=\"rootStyle\"\n    >\n      <table ref=\"tableRef\" class=\"relative w-full border-separate\">\n        <thead\n          class=\"border-b border-ice-200\"\n          :class=\"{\n            'hidden lg:table-header-group': computedLayout === 'stack',\n          }\"\n        >\n          <!-- @slot head -->\n          <slot name=\"head\"> </slot>\n        </thead>\n        <tbody>\n          <!--\n            col-span-12 makes the td span all columns only when layout === 'stack' and the viewport is below lg (when table elements are using display: grid ).\n            The colspan attr does the same in all other cases when the table elements are using their native table styles.\n            relative prevents the loading/empty state from overflowing the table whenever the table has actions and the table cell applies position absolute.\n            \"max-width: '100vw'\" prevents the loading/empty state from overflowing the table whenever the table is in the scroll layout.\n            These are necessary in order to properly horizontally center Loading, and EmptyState\n          -->\n          <TableRow v-if=\"isTableLoading\">\n            <TableCell colspan=\"100%\" :class=\"{ 'relative! col-span-12': computedLayout === 'stack' }\">\n              <Loading :style=\"[computedLayout === 'scroll' ? { 'max-width': '100vw' } : {}]\" />\n            </TableCell>\n          </TableRow>\n          <!-- @slot empty -->\n          <template v-else-if=\"props.isEmpty || isDataViewEmpty\">\n            <TableRow>\n              <TableCell colspan=\"100%\" :class=\"{ 'relative! col-span-12': computedLayout === 'stack' }\">\n                <slot name=\"empty\">\n                  <EmptyState\n                    class=\"w-full bg-white\"\n                    :text=\"props.emptyStateText\"\n                    :style=\"[computedLayout === 'scroll' ? { 'max-width': '100vw' } : {}]\"\n                  />\n                </slot>\n              </TableCell>\n            </TableRow>\n          </template>\n          <!-- @slot body -->\n          <slot v-else name=\"body\"></slot>\n        </tbody>\n      </table>\n    </div>\n    <div\n      v-if=\"showScrollButtons\"\n      :class=\"classes['stash-table-scroll-overlay']\"\n      class=\"pointer-events-none absolute inset-0 flex items-center justify-between z-2\"\n    >\n      <template v-if=\"canScrollLeft\">\n        <div\n          :class=\"classes['stash-table-scroll-shadow-left']\"\n          class=\"stash-table-scroll-shadow border-l border-ice-100 absolute left-0 top-0 bottom-0 w-4\"\n          data-test=\"stash-table|scroll-shadow-left\"\n        />\n        <Button\n          class=\"pointer-events-auto absolute left-3 top-[7px] border border-ice-100 bg-white rounded-full shadow size-6 p-0 min-w-auto\"\n          secondary\n          icon\n          :aria-label=\"'Scroll table left'\"\n          data-test=\"stash-table|scroll-left\"\n          @click=\"scrollBy(-SCROLL_DELTA_PX)\"\n        >\n          <Icon name=\"chevron-left\" />\n        </Button>\n      </template>\n      <template v-if=\"canScrollRight\">\n        <div\n          :class=\"classes['stash-table-scroll-shadow-right']\"\n          class=\"stash-table-scroll-shadow border-r border-ice-100 absolute right-0 top-0 bottom-0 w-4\"\n          data-test=\"stash-table|scroll-shadow-right\"\n        />\n\n        <Button\n          class=\"pointer-events-auto absolute right-3 top-[7px] border border-ice-100 bg-white rounded-full shadow size-6 p-0 min-w-auto\"\n          secondary\n          icon\n          :aria-label=\"'Scroll table right'\"\n          data-test=\"stash-table|scroll-right\"\n          @click=\"scrollBy(SCROLL_DELTA_PX)\"\n        >\n          <Icon name=\"chevron-right\" class=\"text-ice-900\" />\n        </Button>\n      </template>\n    </div>\n  </div>\n</template>\n\n<style module>\n  .stash-table-scroll-shadow-left {\n    background: linear-gradient(90deg, rgb(38 38 38 / 10%) 0%, rgb(38 38 38 / 0%) 32.65%);\n  }\n\n  .stash-table-scroll-shadow-right {\n    background: linear-gradient(270deg, rgb(38 38 38 / 10%) 0%, rgb(38 38 38 / 0%) 32.65%);\n  }\n\n  @media print {\n    .stash-table-scroll-overlay {\n      display: none !important;\n    }\n  }\n</style>\n"],"names":["Layout","TableRadius","props","__props","classes","useCssModule","dataViewDensity","dataViewVariant","isDataViewEmpty","isDataViewLoading","isDataViewSelectable","inject","DATA_VIEW_INJECTION","moduleVariant","MODULE_INJECTION","computedRadius","computed","computedLayout","isShadowEnabled","isStickyHeaderEnabled","_a","_b","rootStyle","isTableLoading","scrollContainerRef","useTemplateRef","tableRef","hasHorizontalOverflow","ref","arrivedState","measure","useScroll","updateOverflow","el","useResizeObserver","useIntersectionObserver","entries","canScrollLeft","canScrollRight","showScrollButtons","scrollBy","delta","provide","TABLE_INJECTION","SpacingDensity","watchEffect","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_unref","_renderSlot","_ctx","_createBlock","TableRow","_createVNode","TableCell","Loading","EmptyState","_normalizeClass","_Fragment","Button","_cache","$event","Icon"],"mappings":";;;;;;;;;;;;;;;AAIO,IAAKA,uBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFEA,IAAAA,MAAA,CAAA,CAAA,GAOAC,uBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,UAAU,WACVA,EAAA,gBAAgB,kBAHNA,IAAAA,MAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;ACyEV,UAAMC,IAAQC,GAcRC,IAAUC,EAAA,GAEV;AAAA,MACJ,SAASC;AAAA,MACT,SAASC;AAAA,MACT,SAASC;AAAA,MACT,WAAWC;AAAA,MACX,cAAcC;AAAA,IAAA,IACZC,EAAOC,EAAoB,KAAKA,EAAoB,QAAQ,GAE1D,EAAE,SAASC,MAAkBF,EAAOG,EAAiB,KAAKA,EAAiB,QAAQ,GAEnFC,IAAiBC,EAAwB,OAEzCH,KAAA,gBAAAA,EAAe,WAAU,WAIzBN,EAAgB,UAAU,UACrB,mBAGFL,EAAM,MACd,GAEKe,IAAiBD,EAAkB,MACnCd,EAAM,eACD,WAGFA,EAAM,MACd,GAEKgB,IAAkBF,EAAkB,MACjCC,EAAe,UAAU,YAAYV,EAAgB,UAAU,OACvE,GAEKY,IAAwBH,EAAkB,MAAM;;AACpD,aAAO,CAAC,GACLI,IAAAlB,EAAM,iBAAN,QAAAkB,EAAoB,eAAaC,IAAAnB,EAAM,iBAAN,gBAAAmB,EAAoB,cAAa;AAAA,IAGvE,CAAC,GAEKC,IAAYN,EAAS,MAAA;;AAAO;AAAA,QAChC,WAAWG,EAAsB,SAAQC,IAAAlB,EAAM,iBAAN,gBAAAkB,EAAoB,YAAY;AAAA,MAAA;AAAA,KACzE,GAEIG,IAAiBP,EAAS,MAAM,GAAQd,EAAM,aAAaO,KAAA,QAAAA,EAAmB,MAAM,GAEpFe,IAAqBC,EAA4B,oBAAoB,GACrEC,IAAWD,EAAiC,UAAU,GACtDE,IAAwBC,EAAI,EAAK,GAEjC,EAAE,cAAAC,GAAc,SAAAC,MAAYC,GAAUP,GAAoB,EAAE,UAAU,UAAU;AAEtF,aAASQ,IAAiB;AACxB,YAAMC,IAAKT,EAAmB;AAC9B,MAAI,CAACS,KAAMhB,EAAe,UAAU,aACpCU,EAAsB,QAAQM,EAAG,cAAcA,EAAG,aAClDH,EAAA;AAAA,IACF;AAEA,IAAAI,EAAkBV,GAAoBQ,CAAc,GACpDE,EAAkBR,GAAUM,CAAc,GAI1CG;AAAA,MACEX;AAAA,MACA,CAACY,MAAY;;AACX,SAAIhB,IAAAgB,EAAQ,CAAC,MAAT,QAAAhB,EAAY,kBAAgBY,EAAA;AAAA,MAClC;AAAA,MACA,EAAE,WAAW,KAAA;AAAA,IAAK;AAGpB,UAAMK,IAAgBrB,EAAS,MAAM,CAACa,EAAa,IAAI,GACjDS,IAAiBtB,EAAS,MAAM,CAACa,EAAa,KAAK,GACnDU,IAAoBvB,EAAS,MAAMC,EAAe,UAAU,YAAYU,EAAsB,KAAK;AAEzG,aAASa,EAASC,GAAe;;AAC/B,OAAArB,IAAAI,EAAmB,UAAnB,QAAAJ,EAA0B,SAAS,EAAE,MAAMqB,GAAO,UAAU;IAC9D;AAEA,WAAAC,EAAQC,GAAgB,KAAK;AAAA,MAC3B,SAAS3B,EAAS,MAAMd,EAAM,WAAWI,EAAgB,SAASsC,GAAe,WAAW;AAAA,MAC5F,uBAAuB5B,EAAS,MAAMd,EAAM,qBAAqB;AAAA,MACjE,YAAYc,EAAS,MAAMd,EAAM,UAAU;AAAA,MAC3C,cAAcc,EAAS,MAAMd,EAAM,YAAY;AAAA,MAC/C,cAAcc;AAAA,QACZ,MACEd,EAAM,gBACN,CAACA,EAAM,aACP,EAACO,KAAA,QAAAA,EAAmB,UACpB,CAACP,EAAM,WACP,EAACM,KAAA,QAAAA,EAAiB;AAAA,MAAA;AAAA,MAEtB,WAAWe;AAAA,MACX,QAAQN;AAAA,IAAA,CACT,GAED4B,GAAY,MAAM;AAKhB,MAAInC,MACFA,EAAqB,QAAQR,EAAM;AAAA,IAEvC,CAAC,cAID4C,EAAA,GAAAC,EAqGM,OArGNC,IAqGM;AAAA,MApGJC,EA0DM,OAAA;AAAA,iBAzDA;AAAA,QAAJ,KAAIzB;AAAA,QACJ,UAAM,wBAAsB;AAAA,qBACCT,EAAA,UAAc,UAAA;AAAA,yBAAyCA,EAAA,UAAc,iBAAA;AAAA,uCAA8DmC,EAAA3C,CAAA,MAAe,QAAA;AAAA,2CAAyDU,EAAA,UAAc,SAAA;AAAA,oBAAmCC,EAAA,MAAA;AAAA;2DAAsFD,EAAA,UAAc;AAAA,UAAA;AAAA;QAU7X,aAAU;AAAA,QACT,aAAWM,EAAA;AAAA,QACX,SAAOD,EAAA,KAAS;AAAA,MAAA;QAEjB2B,EAwCQ,SAAA;AAAA,mBAxCG;AAAA,UAAJ,KAAIvB;AAAA,UAAW,OAAM;AAAA,QAAA;UAC1BuB,EAQQ,SAAA;AAAA,YAPN,UAAM,2BAAyB;AAAA,8CACuBhC,EAAA,UAAc;AAAA,YAAA;;YAKpEkC,EAA0BC,EAAA,QAAA,MAAA;AAAA,UAAA;UAE5BH,EA6BQ,SAAA,MAAA;AAAA,YArBU1B,EAAA,cAAhB8B,EAIWC,GAAA,EAAA,KAAA,KAAA;AAAA,yBAHT,MAEY;AAAA,gBAFZC,EAEYC,GAAA;AAAA,kBAFD,SAAQ;AAAA,kBAAQ,oCAAkCvC,EAAA,UAAc,SAAA;AAAA,gBAAA;6BACzE,MAAkF;AAAA,oBAAlFsC,EAAkFE,IAAA;AAAA,sBAAxE,UAAQxC,EAAA,UAAc,WAAA,EAAA,aAAA,QAAA,IAAA,EAAA,CAAA;AAAA,oBAAA;;;;;;kBAIff,EAAM,WAAWgD,EAAA1C,CAAA,UACpC6C,EAUWC,GAAA,EAAA,KAAA,KAAA;AAAA,yBATT,MAQY;AAAA,gBARZC,EAQYC,GAAA;AAAA,kBARD,SAAQ;AAAA,kBAAQ,oCAAkCvC,EAAA,UAAc,SAAA;AAAA,gBAAA;6BACzE,MAMO;AAAA,oBANPkC,EAMOC,uBANP,MAMO;AAAA,sBALLG,EAIEG,IAAA;AAAA,wBAHA,OAAM;AAAA,wBACL,MAAMxD,EAAM;AAAA,wBACZ,UAAQe,EAAA,UAAc,WAAA,EAAA,aAAA,QAAA,IAAA,EAAA,CAAA;AAAA,sBAAA;;;;;;;kBAOjCkC,EAAgCC,EAAA,QAAA,QAAA,EAAA,KAAA,EAAA,CAAA;AAAA,UAAA;;;MAK9Bb,EAAA,cADRQ,EAwCM,OAAA;AAAA;QAtCH,OAAKY,EAAA,CAAET,EAAA9C,CAAA,EAAO,4BAAA,GACT,4EAA4E,CAAA;AAAA,MAAA;QAElEiC,EAAA,cAAhBU,EAgBWa,GAAA,EAAA,KAAA,KAAA;AAAA,UAfTX,EAIE,OAAA;AAAA,YAHC,OAAKU,EAAA,CAAET,EAAA9C,CAAA,EAAO,gCAAA,GACT,sFAAsF,CAAA;AAAA,YAC5F,aAAU;AAAA,UAAA;UAEZmD,EASSM,GAAA;AAAA,YARP,OAAM;AAAA,YACN,WAAA;AAAA,YACA,MAAA;AAAA,YACC,cAAY;AAAA,YACb,aAAU;AAAA,YACT,SAAKC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAEvB,EAAQ,IAAiB;AAAA,UAAA;uBAEjC,MAA4B;AAAA,cAA5Be,EAA4BS,GAAA,EAAtB,MAAK,gBAAc;AAAA,YAAA;;;;QAGb1B,EAAA,cAAhBS,EAiBWa,GAAA,EAAA,KAAA,KAAA;AAAA,UAhBTX,EAIE,OAAA;AAAA,YAHC,OAAKU,EAAA,CAAET,EAAA9C,CAAA,EAAO,iCAAA,GACT,uFAAuF,CAAA;AAAA,YAC7F,aAAU;AAAA,UAAA;UAGZmD,EASSM,GAAA;AAAA,YARP,OAAM;AAAA,YACN,WAAA;AAAA,YACA,MAAA;AAAA,YACC,cAAY;AAAA,YACb,aAAU;AAAA,YACT,SAAKC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAEvB,EAAS,GAAe;AAAA,UAAA;uBAEhC,MAAkD;AAAA,cAAlDe,EAAkDS,GAAA;AAAA,gBAA5C,MAAK;AAAA,gBAAgB,OAAM;AAAA,cAAA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Table.js","sources":["../src/components/Table/Table.types.ts","../src/components/Table/Table.vue"],"sourcesContent":["import type { ComputedRef } from 'vue';\n\nimport { SpacingDensities } from '../../../types/misc';\n\nexport enum Layout {\n  Scroll = 'scroll',\n  Stack = 'stack',\n}\n\nexport type Layouts = `${Layout}`;\n\nexport enum TableRadius {\n  None = 'none',\n  Rounded = 'rounded',\n  RoundedBottom = 'rounded-bottom',\n}\n\nexport type TableRadiuses = `${TableRadius}`;\n\n/**\n * Properties and utilities provided to children of a Table instance\n */\nexport interface TableInjection {\n  /**\n   * Controls the Table's padding; the default value is \"comfortable\". On small screens, the density will always be \"compact\".\n   */\n  density: ComputedRef<SpacingDensities>;\n\n  /**\n   * Styles the last column for \"row actions\"\n   */\n  hasActions: ComputedRef<boolean>;\n\n  /**\n   * If true, hides the default expansion toggle column\n   */\n  hasCustomExpandToggle: ComputedRef<boolean>;\n\n  /**\n   * When true, the table is schema-driven (e.g. DataTable); selection column is rendered from the schema, not by TableRow/TableHeaderRow.\n   */\n  isSchemaDriven?: ComputedRef<boolean>;\n\n  /**\n   * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.\n   */\n  isExpandable: ComputedRef<boolean>;\n\n  /**\n   * Adds a checkbox column for selecting rows; intended for use with the `useSelection` composable.\n   */\n  isSelectable: ComputedRef<boolean>;\n\n  /**\n   * Sets the table layout; the default value is \"scroll\".\n   */\n  layout: ComputedRef<Layouts>;\n\n  /**\n   * Sets the table loading state.\n   */\n  isLoading: ComputedRef<boolean>;\n}\n","<script lang=\"ts\">\n  import { SpacingDensities, SpacingDensity } from '../../../types/misc';\n  import { MODULE_INJECTION } from '../Module/Module.keys';\n  import { Layouts, TableRadiuses } from './Table.types';\n\n  export * from './Table.keys';\n  export * from './Table.types';\n\n  export interface TableProps {\n    /**\n     * Controls the Table's padding; the default value is \"comfortable\". On small screens, \"compact\" density is applied regardless of this prop's value.\n     */\n    density?: SpacingDensities;\n\n    /**\n     * Sets the text for the empty state; the default value is \"No Results\".\n     */\n    emptyStateText?: string;\n\n    /**\n     * Styles the last column for \"row actions\"\n     */\n    hasActions?: boolean;\n\n    /**\n     * If true, hides the default expansion toggle column\n     */\n    hasCustomExpandToggle?: boolean;\n\n    /**\n     * Shows the empty state\n     */\n    isEmpty?: boolean;\n\n    /**\n     * When true, indicates the table is being composed by DataTable (schema-driven mode).\n     * TableRow/TableHeaderRow use this to suppress their built-in selection cells.\n     */\n    isSchemaDriven?: boolean;\n\n    /**\n     * Shows the loading state\n     */\n    isLoading?: boolean;\n\n    /**\n     * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.\n     */\n    isExpandable?: boolean;\n\n    /**\n     * Adds a checkbox column for selecting rows; intended for use with the `useSelection` composable.\n     */\n    isSelectable?: boolean;\n\n    /**\n     * Sets the table layout; the default value is \"scroll\".\n     */\n    layout?: Layouts;\n\n    /**\n     * Controls the corners of the table with the \"border-radius\" CSS property. The default value is \"rounded\".\n     */\n    radius?: TableRadiuses;\n\n    /**\n     * Allows the table head to be sticky when scrolling inside the table body\n     */\n    stickyHeader?: {\n      listLength: number;\n      maxHeight: string;\n    };\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import { useIntersectionObserver, useResizeObserver, useScroll } from '@vueuse/core';\n  import { computed, inject, provide, ref, useCssModule, useTemplateRef, watchEffect } from 'vue';\n\n  import Button from '../Button/Button.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import EmptyState from '../EmptyState/EmptyState.vue';\n  import Icon from '../Icon/Icon.vue';\n  import Loading from '../Loading/Loading.vue';\n  import TableCell from '../TableCell/TableCell.vue';\n  import TableRow from '../TableRow/TableRow.vue';\n  import { TABLE_INJECTION } from './Table.keys';\n\n  const SCROLL_DELTA_PX = 200;\n\n  const props = withDefaults(defineProps<TableProps>(), {\n    density: undefined,\n    emptyStateText: '',\n    hasActions: false,\n    hasCustomExpandToggle: false,\n    isEmpty: false,\n    isSchemaDriven: false,\n    isLoading: false,\n    isExpandable: false,\n    isSelectable: false,\n    layout: 'scroll',\n    radius: 'rounded',\n    stickyHeader: undefined,\n  });\n\n  const classes = useCssModule();\n\n  const {\n    density: dataViewDensity,\n    variant: dataViewVariant,\n    isEmpty: isDataViewEmpty,\n    isLoading: isDataViewLoading,\n    isSelectable: isDataViewSelectable,\n  } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const { variant: moduleVariant } = inject(MODULE_INJECTION.key, MODULE_INJECTION.defaults);\n\n  const computedRadius = computed<TableRadiuses>(() => {\n    // Will work for tables when rendered inside of a Module with OR without a DataView.\n    if (moduleVariant?.value === 'table') {\n      return 'rounded-bottom';\n    }\n\n    if (dataViewVariant.value === 'table') {\n      return 'rounded-bottom';\n    }\n\n    return props.radius;\n  });\n\n  const computedLayout = computed<Layouts>(() => {\n    if (props.stickyHeader) {\n      return 'scroll';\n    }\n\n    return props.layout;\n  });\n\n  const isShadowEnabled = computed<boolean>(() => {\n    return computedLayout.value === 'scroll' && dataViewVariant.value === 'table';\n  });\n\n  const isStickyHeaderEnabled = computed<boolean>(() => {\n    return !!(\n      (props.stickyHeader?.maxHeight && props.stickyHeader?.listLength > 3) // table can't scroll without a max height; sticky headers only needed for a scrollable table\n      // scrollable table and sticky headers not needed when list is small\n    );\n  });\n\n  const rootStyle = computed(() => ({\n    maxHeight: isStickyHeaderEnabled.value ? props.stickyHeader?.maxHeight : '',\n  }));\n\n  const isTableLoading = computed(() => Boolean(props.isLoading || isDataViewLoading?.value));\n\n  const scrollContainerRef = useTemplateRef<HTMLElement>('scrollContainerRef');\n  const tableRef = useTemplateRef<HTMLTableElement>('tableRef');\n  const hasHorizontalOverflow = ref(false);\n\n  const { arrivedState, measure } = useScroll(scrollContainerRef, { behavior: 'smooth' });\n\n  function updateOverflow() {\n    const el = scrollContainerRef.value;\n    if (!el || computedLayout.value !== 'scroll') return;\n    hasHorizontalOverflow.value = el.scrollWidth > el.clientWidth;\n    measure();\n  }\n\n  useResizeObserver(scrollContainerRef, updateOverflow);\n  useResizeObserver(tableRef, updateOverflow);\n\n  useIntersectionObserver(\n    scrollContainerRef,\n    (entries) => {\n      if (entries[0]?.isIntersecting) updateOverflow();\n    },\n    { threshold: 0.01 },\n  );\n\n  const canScrollLeft = computed(() => !arrivedState.left);\n  const canScrollRight = computed(() => !arrivedState.right);\n  const showScrollButtons = computed(() => computedLayout.value === 'scroll' && hasHorizontalOverflow.value);\n\n  function scrollBy(delta: number) {\n    scrollContainerRef.value?.scrollBy({ left: delta, behavior: 'smooth' });\n  }\n\n  provide(TABLE_INJECTION.key, {\n    density: computed(() => props.density || dataViewDensity.value || SpacingDensity.Comfortable),\n    hasCustomExpandToggle: computed(() => props.hasCustomExpandToggle),\n    hasActions: computed(() => props.hasActions),\n    isSchemaDriven: computed(() => props.isSchemaDriven),\n    isExpandable: computed(() => props.isExpandable),\n    isSelectable: computed(\n      () =>\n        props.isSelectable &&\n        !props.isLoading &&\n        !isDataViewLoading?.value &&\n        !props.isEmpty &&\n        !isDataViewEmpty?.value,\n    ),\n    isLoading: isTableLoading,\n    layout: computedLayout,\n  });\n\n  watchEffect(() => {\n    // Table can be both casted within a DataView or standalone. useSelection is still possible to be used on both cases,\n    // making it important to have Table to control selection props.\n    // To avoid breaking changes and developer experience, a DataView injection is passed down and updated whenever it exists,\n    // and move the information up into DataView, that sometimes aren't used.\n    if (isDataViewSelectable) {\n      isDataViewSelectable.value = props.isSelectable;\n    }\n  });\n</script>\n\n<template>\n  <div class=\"stash-table-wrapper relative\">\n    <div\n      ref=\"scrollContainerRef\"\n      class=\"stash-table relative\"\n      :class=\"[\n        { rounded: computedRadius === 'rounded' },\n        { 'rounded-b': computedRadius === 'rounded-bottom' },\n        { 'border-t border-ice-200': dataViewVariant === 'table' },\n        { 'overflow-auto scroll-smooth': computedLayout === 'scroll' },\n        { shadow: isShadowEnabled },\n        {\n          'overflow-visible lg:overflow-auto lg:shadow': computedLayout === 'stack',\n        },\n      ]\"\n      data-test=\"stash-table\"\n      :aria-busy=\"isTableLoading\"\n      :style=\"rootStyle\"\n    >\n      <table ref=\"tableRef\" class=\"relative w-full border-separate\">\n        <thead class=\"border-b border-ice-200\" :class=\"{ 'hidden lg:table-header-group': computedLayout === 'stack' }\">\n          <!-- @slot head -->\n          <slot name=\"head\"> </slot>\n        </thead>\n        <tbody>\n          <!--\n            col-span-12 makes the td span all columns only when layout === 'stack' and the viewport is below lg (when table elements are using display: grid ).\n            The colspan attr does the same in all other cases when the table elements are using their native table styles.\n            relative prevents the loading/empty state from overflowing the table whenever the table has actions and the table cell applies position absolute.\n            \"max-width: '100vw'\" prevents the loading/empty state from overflowing the table whenever the table is in the scroll layout.\n            These are necessary in order to properly horizontally center Loading, and EmptyState\n          -->\n          <TableRow v-if=\"isTableLoading\">\n            <TableCell colspan=\"100%\" :class=\"{ 'relative! col-span-12': computedLayout === 'stack' }\">\n              <Loading :style=\"[computedLayout === 'scroll' ? { 'max-width': '100vw' } : {}]\" />\n            </TableCell>\n          </TableRow>\n          <!-- @slot empty -->\n          <template v-else-if=\"props.isEmpty || isDataViewEmpty\">\n            <TableRow>\n              <TableCell colspan=\"100%\" :class=\"{ 'relative! col-span-12': computedLayout === 'stack' }\">\n                <slot name=\"empty\">\n                  <EmptyState\n                    class=\"w-full bg-white\"\n                    :text=\"props.emptyStateText\"\n                    :style=\"[computedLayout === 'scroll' ? { 'max-width': '100vw' } : {}]\"\n                  />\n                </slot>\n              </TableCell>\n            </TableRow>\n          </template>\n          <!-- @slot body -->\n          <slot v-else name=\"body\"></slot>\n        </tbody>\n      </table>\n    </div>\n    <div\n      v-if=\"showScrollButtons\"\n      :class=\"classes['stash-table-scroll-overlay']\"\n      class=\"pointer-events-none absolute inset-0 flex items-center justify-between z-2\"\n    >\n      <template v-if=\"canScrollLeft\">\n        <div\n          :class=\"classes['stash-table-scroll-shadow-left']\"\n          class=\"stash-table-scroll-shadow border-l border-ice-100 absolute left-0 top-0 bottom-0 w-4\"\n          data-test=\"stash-table|scroll-shadow-left\"\n        />\n        <Button\n          class=\"pointer-events-auto absolute left-3 top-[7px] border border-ice-100 bg-white rounded-full shadow size-6 p-0 min-w-auto\"\n          secondary\n          icon\n          :aria-label=\"'Scroll table left'\"\n          data-test=\"stash-table|scroll-left\"\n          @click=\"scrollBy(-SCROLL_DELTA_PX)\"\n        >\n          <Icon name=\"chevron-left\" />\n        </Button>\n      </template>\n      <template v-if=\"canScrollRight\">\n        <div\n          :class=\"classes['stash-table-scroll-shadow-right']\"\n          class=\"stash-table-scroll-shadow border-r border-ice-100 absolute right-0 top-0 bottom-0 w-4\"\n          data-test=\"stash-table|scroll-shadow-right\"\n        />\n\n        <Button\n          class=\"pointer-events-auto absolute right-3 top-[7px] border border-ice-100 bg-white rounded-full shadow size-6 p-0 min-w-auto\"\n          secondary\n          icon\n          :aria-label=\"'Scroll table right'\"\n          data-test=\"stash-table|scroll-right\"\n          @click=\"scrollBy(SCROLL_DELTA_PX)\"\n        >\n          <Icon name=\"chevron-right\" class=\"text-ice-900\" />\n        </Button>\n      </template>\n    </div>\n  </div>\n</template>\n\n<style module>\n  .stash-table-scroll-shadow-left {\n    background: linear-gradient(90deg, rgb(38 38 38 / 10%) 0%, rgb(38 38 38 / 0%) 32.65%);\n  }\n\n  .stash-table-scroll-shadow-right {\n    background: linear-gradient(270deg, rgb(38 38 38 / 10%) 0%, rgb(38 38 38 / 0%) 32.65%);\n  }\n\n  @media print {\n    .stash-table-scroll-overlay {\n      display: none !important;\n    }\n  }\n</style>\n"],"names":["Layout","TableRadius","props","__props","classes","useCssModule","dataViewDensity","dataViewVariant","isDataViewEmpty","isDataViewLoading","isDataViewSelectable","inject","DATA_VIEW_INJECTION","moduleVariant","MODULE_INJECTION","computedRadius","computed","computedLayout","isShadowEnabled","isStickyHeaderEnabled","_a","_b","rootStyle","isTableLoading","scrollContainerRef","useTemplateRef","tableRef","hasHorizontalOverflow","ref","arrivedState","measure","useScroll","updateOverflow","el","useResizeObserver","useIntersectionObserver","entries","canScrollLeft","canScrollRight","showScrollButtons","scrollBy","delta","provide","TABLE_INJECTION","SpacingDensity","watchEffect","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_unref","_normalizeClass","_renderSlot","_ctx","_createBlock","TableRow","_createVNode","TableCell","Loading","EmptyState","_Fragment","Button","_cache","$event","Icon"],"mappings":"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"}