@hortonstudio/main 1.2.12 → 1.2.13

package/attributes-master/packages/combobox/src/actions/input/index.ts

@@ -1,235 +0,0 @@
-import {
-  ARIA_EXPANDED_KEY,
-  ARROW_DOWN_KEY,
-  ARROW_LEFT_KEY,
-  ARROW_RIGHT_KEY,
-  ARROW_UP_KEY,
-  BACKSPACE_KEY,
-  CLICK,
-  ENTER_KEY,
-  ESCAPE_KEY,
-  SPACE_KEY,
-  TAB_KEY,
-} from '@finsweet/attributes-utils';
-
-import { focusOnInput, setActiveDescendant, toggleDropdown, toggleDropdownCloseIcon } from '../../utils';
-import { FS_DROPDOWN_TOGGLE_KEY } from '../../utils/constants';
-import type { Settings } from '../../utils/types';
-import { populateOptions } from '../populate';
-
-/**
- * Handles `keyup` events on the `inputElement` and updates the dropdown.
- * @param e The `keyup` event.
- * @param settings The instance {@link Settings}.
- */
-export const handleInputKeyUpEvents = (e: KeyboardEvent, settings: Settings) => {
-  e.stopPropagation();
-  e.stopImmediatePropagation();
-
-  const { dropdownToggle, inputElement } = settings;
-
-  const { key } = e;
-  const referenceInput = e.target as HTMLInputElement;
-
-  const inputValue = referenceInput.value.toLowerCase().trim() ?? '';
-  populateOptions(settings, inputValue, !inputValue, true);
-
-  const dropdownIsOpen = dropdownToggle.getAttribute(ARIA_EXPANDED_KEY) === 'true';
-
-  if (key === ARROW_DOWN_KEY) {
-    if (!dropdownIsOpen) toggleDropdown(settings);
-
-    if (inputValue.length > 0) {
-      const selected = settings.optionsStore.find(({ selected }) => selected);
-      const inputIsEqualToSelectedOption = selected?.value.toLocaleLowerCase() === inputValue.toLowerCase();
-
-      if (selected && inputIsEqualToSelectedOption) {
-        populateOptions(settings, inputValue, true, true);
-      } else {
-        populateOptions(settings, inputValue, false, true);
-      }
-    } else {
-      populateOptions(settings, '', true, true);
-    }
-
-    inputElement.setAttribute(FS_DROPDOWN_TOGGLE_KEY, ARROW_DOWN_KEY);
-
-    focusOnDropdownItem(settings);
-    return;
-  }
-};
-/**
- * Handles `keydown` events on the `inputElement` and updates the dropdown.
- * @param e The `keydown` event.
- * @param settings The instance {@link Settings}.
- */
-export const handleInputKeyDownEvents = (e: KeyboardEvent, settings: Settings) => {
-  e.stopPropagation();
-
-  const { key } = e;
-
-  const { dropdownToggle, inputElement } = settings;
-
-  inputElement.setAttribute(FS_DROPDOWN_TOGGLE_KEY, CLICK);
-
-  const referenceInput = e.target as HTMLInputElement;
-
-  const inputValue = referenceInput.value.toLowerCase().trim() ?? '';
-
-  const dropdownIsOpen = dropdownToggle.getAttribute(ARIA_EXPANDED_KEY) === 'true';
-
-  if (key === ESCAPE_KEY) {
-    handleClearInput(e, settings);
-
-    if (dropdownIsOpen) {
-      toggleDropdown(settings);
-    }
-    return;
-  }
-
-  if (
-    key === ENTER_KEY ||
-    key === ARROW_DOWN_KEY ||
-    key === TAB_KEY ||
-    key === SPACE_KEY ||
-    key === ARROW_RIGHT_KEY ||
-    key === ARROW_LEFT_KEY
-  )
-    return;
-
-  if (key === ARROW_UP_KEY && dropdownIsOpen) {
-    toggleDropdown(settings);
-    return;
-  }
-
-  if (key === BACKSPACE_KEY && inputValue.length === 0) {
-    populateOptions(settings, '', true, true);
-    return;
-  }
-
-  if (key === BACKSPACE_KEY && inputValue.length > 0) {
-    populateOptions(settings, inputValue, !inputValue, true);
-    if (!dropdownIsOpen) toggleDropdown(settings);
-    return;
-  }
-
-  if (!dropdownIsOpen && inputValue && key !== ARROW_UP_KEY) {
-    toggleDropdown(settings);
-  }
-
-  toggleDropdownCloseIcon(settings);
-  populateOptions(settings, inputValue, !inputValue, true);
-};
-
-/**
- * Shows the dropdown if hidden.
- * @param settings The instance {@link Settings}.
- */
-export const handleInputClickEvents = (e: MouseEvent, settings: Settings) => {
-  e.stopPropagation();
-  e.preventDefault();
-
-  const { dropdownToggle, inputElement } = settings;
-
-  inputElement.setAttribute(FS_DROPDOWN_TOGGLE_KEY, CLICK);
-
-  const toggled = dropdownToggle.getAttribute(ARIA_EXPANDED_KEY) === 'true';
-  inputElement.setAttribute(ARIA_EXPANDED_KEY, `${!toggled}`);
-
-  if (toggled) {
-    return;
-  }
-
-  populateOptions(settings, '', true, true);
-  toggleDropdown(settings);
-};
-
-/**
- * Listens to the `input` escape key or focusout events.
- * @param e The Event object.
- * @param settings The instance {@link Settings}.
- * @param fromInput Whether the event was triggered from the input element.
- */
-export const handleClearInput = (e: KeyboardEvent | FocusEvent, settings: Settings, fromInput = false) => {
-  const { inputElement, selectElement, preventClear } = settings;
-
-  if (!fromInput) {
-    focusOnInput(settings);
-  }
-
-  toggleDropdownCloseIcon(settings);
-
-  const selected = settings.optionsStore.find(({ selected }) => selected);
-
-  if (selected) return;
-
-  if (fromInput) {
-    const relatedTarget = (e as FocusEvent).relatedTarget as HTMLElement;
-    if (relatedTarget || preventClear) return;
-
-    inputElement.value = '';
-    selectElement.value = '';
-    return;
-  }
-
-  if (!selected) {
-    if (preventClear) return;
-
-    inputElement.value = '';
-    selectElement.value = '';
-  }
-
-  const dropdownIsOpen = settings.dropdownToggle.getAttribute(ARIA_EXPANDED_KEY) === 'true';
-
-  if (dropdownIsOpen) {
-    toggleDropdown(settings);
-  }
-};
-
-/**
- * Listens to `updateComboboxInputField` custom event and updates input value and select value
- * @param settings The instance {@link Settings}.
- */
-export const updateInputField = (e: Event, settings: Settings) => {
-  const { optionsStore, inputElement } = settings;
-  const input = e.target as HTMLInputElement;
-
-  const selectedOption = optionsStore.find(({ selected }) => selected);
-  const selectedText = selectedOption?.text ?? '';
-  const selectedValue = selectedOption?.value ?? '';
-  const inputValue = input.value;
-
-  if (selectedOption && selectedValue !== inputValue) {
-    inputElement.value = selectedText;
-
-    toggleDropdownCloseIcon(settings);
-    return;
-  }
-};
-
-/**
- * Focuses on the dropdown list item based on the current selection.
- * @param settings The instance {@link Settings}.
- * @returns void
- */
-const focusOnDropdownItem = (settings: Settings) => {
-  const { optionsStore, inputElement } = settings;
-  const selectedOption = optionsStore.find(({ selected }) => selected);
-
-  if (!selectedOption && optionsStore.length > 0) {
-    const [firstOption] = optionsStore.filter(({ hidden }) => !hidden);
-
-    firstOption.element.focus();
-    setActiveDescendant(inputElement, firstOption.element);
-
-    return;
-  }
-
-  if (selectedOption) {
-    selectedOption.element.focus();
-    setActiveDescendant(inputElement, selectedOption.element);
-
-    return;
-  }
-  return;
-};

package/attributes-master/packages/combobox/src/actions/observe.ts

@@ -1,158 +0,0 @@
-import {
-  ARIA_ACTIVEDESCENDANT_KEY,
-  ARIA_EXPANDED_KEY,
-  ARROW_DOWN_KEY,
-  CLICK,
-  ID_KEY,
-  isHTMLOptionElement,
-} from '@finsweet/attributes-utils';
-import debounce from 'just-debounce';
-
-import { focusOnInput, updateComboboxInputField } from '../utils';
-import { DROPDOWN_IS_OPEN, FS_DROPDOWN_TOGGLE_KEY } from '../utils/constants';
-import type { Settings } from '../utils/types';
-import { populateOptions } from './populate';
-
-/**
- * Observes when the dropdown list is opened/closed.
- * @param settings The instance {@link Settings}.
- *
- * @returns The MutationObserver.
- */
-const observeDropdownList = (settings: Settings) => {
-  const { dropdownList, navListElement, optionsStore, selectElement, inputElement } = settings;
-  let prevDropdownState = navListElement.classList.contains(DROPDOWN_IS_OPEN);
-  let currentStateIsOpen = false;
-
-  const callback: MutationCallback = debounce((mutations: MutationRecord[]) => {
-    mutations.forEach((mutation) => {
-      if (mutation.attributeName === 'class') {
-        const selectValue = selectElement.value;
-        const inputValue = inputElement.value;
-        const dropdownToggleKey = inputElement.getAttribute(FS_DROPDOWN_TOGGLE_KEY);
-        const firstOption = Array.from(optionsStore).find((el) => !el.hidden);
-
-        const selectedOption = Array.from(optionsStore).find(
-          (el) => el?.value.toLowerCase().trim() === selectValue?.toLowerCase().trim()
-        );
-
-        currentStateIsOpen = (mutation.target as HTMLDivElement).classList.contains(DROPDOWN_IS_OPEN);
-        if (prevDropdownState !== currentStateIsOpen) {
-          prevDropdownState = currentStateIsOpen;
-        }
-
-        if (!selectedOption && currentStateIsOpen) {
-          navListElement.scrollTop = 0;
-        }
-
-        if (currentStateIsOpen) {
-          const toFocus = selectedOption || firstOption;
-
-          if (toFocus) toFocus.element.focus();
-        }
-
-        inputElement.setAttribute(ARIA_EXPANDED_KEY, `${currentStateIsOpen}`);
-
-        if (selectedOption) {
-          const id = selectedOption.element.getAttribute(ID_KEY);
-          inputElement.setAttribute(ARIA_ACTIVEDESCENDANT_KEY, `${id}`);
-
-          if (currentStateIsOpen && dropdownToggleKey === ARROW_DOWN_KEY) {
-            selectedOption.element.focus();
-            return;
-          }
-          if (currentStateIsOpen && dropdownToggleKey === CLICK) {
-            selectedOption.element.focus();
-            focusOnInput(settings);
-            return;
-          }
-
-          if (!currentStateIsOpen) {
-            updateComboboxInputField(settings);
-            focusOnInput(settings);
-          }
-
-          return;
-        }
-
-        if (!selectedOption && inputValue && currentStateIsOpen && firstOption) {
-          if (dropdownToggleKey === ARROW_DOWN_KEY) firstOption.element.focus();
-          if (dropdownToggleKey === CLICK) focusOnInput(settings);
-
-          return;
-        }
-
-        if (currentStateIsOpen && !selectedOption) {
-          inputElement.setAttribute(ARIA_ACTIVEDESCENDANT_KEY, '');
-
-          if (dropdownToggleKey === ARROW_DOWN_KEY && firstOption) {
-            firstOption.element.focus();
-            return;
-          }
-
-          focusOnInput(settings);
-        }
-        if (!currentStateIsOpen) {
-          updateComboboxInputField(settings);
-          focusOnInput(settings);
-
-          if (!selectedOption) inputElement.setAttribute(ARIA_ACTIVEDESCENDANT_KEY, '');
-        }
-      }
-    });
-
-    const selectedOption = optionsStore.find(({ selected }) => selected);
-    const firstNonHiddenOption = optionsStore.find(({ hidden }) => !hidden);
-
-    if (!selectedOption || !firstNonHiddenOption) return;
-  }, 20);
-
-  const observer = new MutationObserver(callback);
-
-  observer.observe(dropdownList, {
-    attributes: true,
-    attributeFilter: ['class', 'style'],
-  });
-
-  return observer;
-};
-
-/**
- * Observes changes in the {@link HTMLSelectElement} options.
- * @param settings The instance {@link Settings}.
- *
- * @returns The MutationObserver.
- */
-const observeSelectElement = (settings: Settings) => {
-  const { selectElement } = settings;
-
-  const observer = new MutationObserver((mutations) => {
-    const hasMutatedOptions = mutations.some(({ addedNodes, removedNodes }) =>
-      [...addedNodes, ...removedNodes].some(isHTMLOptionElement)
-    );
-
-    if (hasMutatedOptions) populateOptions(settings);
-  });
-
-  observer.observe(selectElement, {
-    childList: true,
-  });
-
-  return observer;
-};
-
-/**
- * Observes mutations on elements of the instance.
- * @param settings The instance {@link Settings}.
- *
- * @returns A callback to destroy the MutationObservers.
- */
-export const observeElements = (settings: Settings) => {
-  const dropdownListObserver = observeDropdownList(settings);
-  const selectElementObserver = observeSelectElement(settings);
-
-  return () => {
-    dropdownListObserver.disconnect();
-    selectElementObserver.disconnect();
-  };
-};

package/attributes-master/packages/combobox/src/actions/populate.ts

@@ -1,97 +0,0 @@
-import { ARIA_POSINSET_KEY, ARIA_SETSIZE_KEY, cloneNode, findTextNode, ID_KEY } from '@finsweet/attributes-utils';
-
-import type { OptionData, Settings } from '../utils/types';
-import { setOptionAria } from './a11y';
-import { updateOptionsState } from './state';
-
-/**
- * Populates the custom options based on the `HTMLSelectElement`'s options.
- * @param settings The instance {@link Settings}.
- * @param {string} inputValue Value from input field.
- * @param {boolean} showAll if dropdown should show all or filtered options.
- * @param {boolean} isTyping user is searching.
- * @param {boolean} initialLoad if dropdown is loaded for the first time.
- */
-export const populateOptions = (
-  settings: Settings,
-  inputValue = '',
-  showAll = false,
-  isTyping = false,
-  initialLoad = false
-) => {
-  const {
-    optionsStore,
-    optionTemplate,
-    optionsList,
-    label,
-    noResultsTemplate,
-    selectElement: { options, value: currentValue },
-  } = settings;
-
-  // Clear existing options
-  noResultsTemplate?.remove();
-  for (const { element } of optionsStore.values()) {
-    element.remove();
-  }
-
-  optionsStore.splice(0, optionsStore.length);
-
-  let selectedOption: OptionData | undefined;
-
-  const optionsConfigured = Array.from(options).filter((item) => item.value && item.textContent);
-  const optionsFiltered = optionsConfigured.filter((item) =>
-    item.text.trim().toLowerCase().includes(inputValue.trim().toLowerCase())
-  );
-
-  if (optionsFiltered.length === 0 && noResultsTemplate) {
-    optionsList.appendChild(noResultsTemplate);
-
-    return;
-  }
-
-  const optionsArr = (showAll ? optionsConfigured : optionsFiltered).sort((a, b) => a.value.localeCompare(b.value));
-
-  // Create new options
-  for (const { value, text } of optionsArr) {
-    const element = cloneNode(optionTemplate) as HTMLAnchorElement;
-
-    const textNode = findTextNode(element) || element;
-    textNode.textContent = text;
-
-    const elementId = element.getAttribute(ID_KEY) || '';
-    const id = `fs-option-${value.toLowerCase().trim().replace(/\s/g, '-')}`;
-
-    element.setAttribute(ID_KEY, elementId || id);
-    element.setAttribute(ARIA_SETSIZE_KEY, `${optionsArr.length}`);
-
-    const index = optionsArr.findIndex((item) => item.value === value);
-    element.setAttribute(ARIA_POSINSET_KEY, `${index + 1}`);
-
-    setOptionAria(element);
-
-    optionsList.appendChild(element);
-
-    const selected = value === currentValue;
-
-    const optionData: OptionData = {
-      text,
-      value,
-      element,
-      selected,
-      focused: false,
-    };
-
-    if (selected) selectedOption = optionData;
-
-    optionsStore.push(optionData);
-  }
-  if (isTyping) {
-    updateOptionsState(settings, selectedOption);
-  }
-
-  if (!inputValue && selectedOption && label) {
-    const labelText = label.textContent || '';
-
-    updateOptionsState(settings, { ...selectedOption, value: '', text: labelText }, initialLoad);
-  }
-};

package/attributes-master/packages/combobox/src/actions/selectElement/index.ts

@@ -1,23 +0,0 @@
-import { setFormFieldValue } from '@finsweet/attributes-utils';
-
-import { toggleDropdownCloseIcon } from '../../utils';
-import type { Settings } from '../../utils/types';
-import { updateOptionsState } from '../state';
-
-/**
- * Adds two way data binding.
- * Handles `change` events on the hidden `selectElement` and updates the dropdown.
- * @param settings The instance {@link Settings}.
- */
-export const handleSelectChangeEvents = (settings: Settings) => {
-  const { selectElement, optionsStore } = settings;
-
-  const selectedOption = optionsStore.find(({ value }) => value === selectElement.value);
-  if (!selectedOption) return;
-
-  setFormFieldValue(settings.inputElement, selectedOption.text);
-  settings.inputElement.dispatchEvent(new Event('change'));
-
-  toggleDropdownCloseIcon(settings);
-  updateOptionsState(settings, selectedOption);
-};

package/attributes-master/packages/combobox/src/actions/settings.ts

@@ -1,134 +0,0 @@
-import {
-  ARIA_AUTOCOMPLETE_KEY,
-  ARIA_CONTROLS_KEY,
-  ARIA_CURRENT_KEY,
-  ARIA_EXPANDED_KEY,
-  ARIA_HIDDEN_KEY,
-  ARIA_OWNS_KEY,
-  AUTOCOMPLETE_KEY,
-  DROPDOWN_CSS_CLASSES,
-  type DropdownElement,
-  type DropdownList,
-  type DropdownToggle,
-  findTextNode,
-  isHTMLAnchorElement,
-  NAME_KEY,
-  REQUIRED_KEY,
-  ROLE_KEY,
-  TABINDEX_KEY,
-} from '@finsweet/attributes-utils';
-
-import { getElementSelector, hasAttributeValue, queryElement } from '../utils/selectors';
-import type { OptionsStore } from '../utils/types';
-import { setDropdownAria } from './a11y';
-
-/**
- * Collects the required elements/settings for the setup.
- * @param dropdown The {@link Dropdown} element.
- */
-export const collectSettings = (referenceElement: HTMLElement) => {
-  const optionsStore: OptionsStore = [];
-
-  const dropdown = referenceElement.closest<DropdownElement>(`.${DROPDOWN_CSS_CLASSES.dropdown}`);
-  if (!dropdown) return;
-
-  const selectElement = dropdown.querySelector('select');
-  const inputElement = dropdown.querySelector('input');
-  const navListElement = queryElement('dropdown')?.querySelector('nav');
-  const { body } = document;
-
-  if (!selectElement || !inputElement || !navListElement) return;
-
-  const dropdownToggle = dropdown.querySelector<DropdownToggle>(`.${DROPDOWN_CSS_CLASSES.dropdownToggle}`);
-  const dropdownList = dropdown.querySelector<DropdownList>(`.${DROPDOWN_CSS_CLASSES.dropdownList}`);
-
-  if (!dropdownToggle || !dropdownList) return;
-  dropdownToggle.setAttribute('disabled', 'disabled');
-
-  setDropdownAria(dropdownToggle, dropdownList);
-
-  const label = queryElement('label', { scope: dropdownToggle }) || findTextNode(dropdownToggle) || dropdownToggle;
-
-  const optionTemplate = dropdownList.querySelector(`a:not(${getElementSelector('clear')})`);
-  if (!isHTMLAnchorElement(optionTemplate)) return;
-
-  const optionsList = optionTemplate.parentElement;
-  if (!optionsList) return;
-
-  const defaultOption = Array.from(selectElement.querySelectorAll('option')).find((opt) => opt.value === '');
-
-  const noResultsTemplate = queryElement('empty', { scope: dropdown });
-  const clearDropdown = queryElement('clear', { scope: dropdown }) as HTMLElement;
-
-  for (const element of [optionTemplate]) {
-    if (!element) continue;
-
-    element.href = '#';
-    element.setAttribute(TABINDEX_KEY, '-1');
-    element.removeAttribute(ARIA_CURRENT_KEY);
-    element.remove();
-  }
-
-  const hideInitial = hasAttributeValue(referenceElement, 'hideinitial', 'true');
-  const preventClear = hasAttributeValue(referenceElement, 'preventclear', 'true');
-
-  initializeAttributes(inputElement, selectElement, navListElement, clearDropdown, preventClear);
-
-  return {
-    optionsStore,
-    selectElement,
-    dropdownToggle,
-    dropdownList,
-    label,
-    optionTemplate,
-    noResultsTemplate,
-    optionsList,
-    hideInitial,
-    preventClear,
-    inputElement,
-    clearDropdown,
-    defaultOption,
-    navListElement,
-    body,
-  };
-};
-
-/**
- * Initializes the attributes for the dropdown.
- * @param inputElement The input element.
- * @param selectElement The select element.
- * @param navListElement The nav list element.
- * @param clearDropdown The clear dropdown element.
- */
-const initializeAttributes = (
-  inputElement: HTMLInputElement,
-  selectElement: HTMLSelectElement,
-  navListElement: HTMLElement,
-  clearDropdown: HTMLElement,
-  preventClear: boolean
-) => {
-  inputElement?.parentElement?.setAttribute(TABINDEX_KEY, '-1');
-  if (!preventClear) inputElement?.removeAttribute(NAME_KEY);
-  inputElement?.setAttribute(TABINDEX_KEY, '0');
-  inputElement?.removeAttribute('data-name');
-  if (selectElement.hasAttribute(REQUIRED_KEY)) {
-    inputElement?.setAttribute(REQUIRED_KEY, 'required');
-  }
-  inputElement?.setAttribute(ROLE_KEY, 'combobox');
-
-  inputElement?.setAttribute(AUTOCOMPLETE_KEY, 'off');
-  const navListElementId = navListElement.getAttribute('id') || '';
-  inputElement?.setAttribute(ARIA_CONTROLS_KEY, navListElementId);
-  inputElement?.setAttribute(ARIA_OWNS_KEY, navListElementId);
-  inputElement?.setAttribute(ARIA_AUTOCOMPLETE_KEY, 'list');
-  inputElement?.setAttribute(ARIA_EXPANDED_KEY, 'false');
-
-  selectElement.setAttribute(ARIA_HIDDEN_KEY, 'true');
-  selectElement.setAttribute(TABINDEX_KEY, '-1');
-
-  navListElement.setAttribute(TABINDEX_KEY, '-1');
-
-  clearDropdown?.setAttribute(TABINDEX_KEY, '0');
-  clearDropdown?.setAttribute(ROLE_KEY, 'button');
-  clearDropdown.style.display = 'none';
-};

package/attributes-master/packages/combobox/src/actions/state.ts

@@ -1,34 +0,0 @@
-import { ARIA_SELECTED_KEY, CURRENT_CSS_CLASS, setFormFieldValue, TABINDEX_KEY } from '@finsweet/attributes-utils';
-
-import { toggleDropdown } from '../utils';
-import type { OptionData, Settings } from '../utils/types';
-
-/**
- * Sets the selected state to an option and removes it from a previous one, if existing.
- * This also determines whether the close icon should show or hide
- * @param settings The instance {@link Settings}.
- * @param selectedOption The selected {@link OptionData}, if existing.
- * @param {boolean} close if dropdown should be closed or opened
- */
-export const updateOptionsState = (settings: Settings, selectedOption?: OptionData, close = false) => {
-  const { selectElement, optionsStore } = settings;
-
-  if (selectedOption && selectedOption.value) {
-    setFormFieldValue(selectElement, selectedOption.value);
-  }
-
-  for (const optionData of optionsStore) {
-    const { element } = optionData;
-
-    const selected = element === selectedOption?.element;
-
-    optionData.selected = selected;
-    optionData.focused = selected;
-
-    element.classList[selected ? 'add' : 'remove'](CURRENT_CSS_CLASS);
-    element.setAttribute(ARIA_SELECTED_KEY, `${selected}`);
-    element.setAttribute(TABINDEX_KEY, '-1');
-  }
-
-  if (close) toggleDropdown(settings);
-};

package/attributes-master/packages/combobox/src/index.ts

@@ -1,3 +0,0 @@
-export { version } from '../package.json';
-export { init } from './init';
-export { ELEMENTS, SETTINGS } from './utils/constants';