@hortonstudio/main 1.2.12 → 1.2.14

package/attributes-master/packages/selectcustom/src/actions/events.ts

@@ -1,159 +0,0 @@
-import {
-  addListener,
-  ARROW_DOWN_KEY,
-  ARROW_UP_KEY,
-  closeDropdown,
-  isElement,
-  SPACE_KEY,
-  TAB_KEY,
-} from '@finsweet/attributes-utils';
-
-import { CONTROL_KEYS } from '../utils/constants';
-import type { Settings } from '../utils/types';
-import { updateOptionsState } from './state';
-
-/**
- * Returns the {@link OptionData} of an event target.
- *
- * @param e The Event object.
- * @param settings The instance {@link Settings}.
- *
- * @returns The {@link OptionData} object, if found.
- */
-const getClickedOptionData = (e: Event, { optionsStore }: Settings) => {
-  const { target } = e;
-
-  if (!isElement(target)) return;
-
-  const optionElement = target.closest('a');
-  if (!optionElement) return;
-
-  const optionData = optionsStore.find(({ element }) => element === optionElement);
-  if (!optionData) return;
-
-  return optionData;
-};
-
-/**
- * Handles click events on the dropdown list.
- * @param e The Event object.
- * @param settings The instance {@link Settings}.
- */
-const handleDropdownListClickEvents = (e: MouseEvent | KeyboardEvent, settings: Settings) => {
-  if (e.target === settings.selectElement) return;
-
-  e.preventDefault();
-
-  const optionData = getClickedOptionData(e, settings);
-  if (!optionData) return;
-
-  if (!optionData.selected) updateOptionsState(settings, optionData);
-
-  closeDropdown(settings.dropdownToggle);
-};
-
-/**
- * Handles tab key events on the dropdown list.
- * @param e The Event object.
- * @param settings The instance {@link Settings}.
- */
-const handleTabKeyEvents = (e: KeyboardEvent, { dropdownToggle }: Settings) => {
-  const { shiftKey } = e;
-
-  if (shiftKey) e.preventDefault();
-
-  closeDropdown(dropdownToggle, shiftKey);
-};
-
-/**
- * Handles arrow keys events on the dropdown list.
- * @param e The Event object.
- * @param settings The instance {@link Settings}.
- */
-const handleDropdownListArrowKeyEvents = ({ key }: KeyboardEvent, { optionsStore }: Settings) => {
-  const focusedOptionIndex = optionsStore.findIndex(({ focused }) => focused);
-  if (focusedOptionIndex < 0) return;
-
-  const nextOption = optionsStore[key === ARROW_UP_KEY ? focusedOptionIndex - 1 : focusedOptionIndex + 1];
-  nextOption?.element.focus();
-};
-
-/**
- * Handles keyboard events on the dropdown list.
- * @param e The Event object.
- * @param settings The instance {@link Settings}.
- */
-const handleDropdownListKeydownEvents = (e: KeyboardEvent, settings: Settings) => {
-  const { key } = e;
-
-  if (!CONTROL_KEYS.includes(key)) return;
-
-  if (key === SPACE_KEY) handleDropdownListClickEvents(e, settings);
-  else if (key === TAB_KEY) handleTabKeyEvents(e, settings);
-  else if (key === ARROW_UP_KEY || key === ARROW_DOWN_KEY) handleDropdownListArrowKeyEvents(e, settings);
-};
-
-/**
- * Handles focus events on the dropdown list.
- * @param e The Event object.
- * @param settings The instance {@link Settings}.
- */
-const handleDropdownListFocusEvents = (e: FocusEvent, focused: boolean, settings: Settings) => {
-  const optionData = getClickedOptionData(e, settings);
-  if (!optionData) return;
-
-  optionData.focused = focused;
-};
-
-/**
- * Handles arrow keys events on the dropdown list.
- * @param e The Event object.
- * @param settings The instance {@link Settings}.
- */
-const handleDropdownToggleArrowKeyEvents = ({ key }: KeyboardEvent, { optionsStore }: Settings) => {
-  if (key !== ARROW_DOWN_KEY) return;
-
-  const firstOption = optionsStore.find(({ hidden }) => !hidden);
-  if (!firstOption) return;
-
-  firstOption.element.focus();
-};
-
-/**
- * Adds two way data binding.
- * Handles `change` events on the hidden `selectElement` and updates the dropdown.
- * @param settings The instance {@link Settings}.
- */
-const handleSelectChangeEvents = (settings: Settings) => {
-  const { selectElement, optionsStore } = settings;
-
-  const selectedOption = optionsStore.find(({ value }) => value === selectElement.value);
-  if (!selectedOption) return;
-
-  updateOptionsState(settings, selectedOption);
-};
-
-/**
- * Listens for click events on the custom elements.
- * @param settings The instance {@link Settings}.
- *
- * @returns A callback to remove all event listeners.
- */
-export const listenEvents = (settings: Settings) => {
-  const { dropdownToggle, dropdownList, selectElement } = settings;
-
-  const cleanups = [
-    addListener(dropdownToggle, 'keydown', (e) => handleDropdownToggleArrowKeyEvents(e, settings)),
-
-    addListener(dropdownList, 'click', (e) => handleDropdownListClickEvents(e, settings)),
-    addListener(dropdownList, 'keydown', (e) => handleDropdownListKeydownEvents(e, settings)),
-    addListener(dropdownList, 'focusin', (e) => handleDropdownListFocusEvents(e, true, settings)),
-    addListener(dropdownList, 'focusout', (e) => handleDropdownListFocusEvents(e, false, settings)),
-
-    addListener(selectElement, 'change', () => handleSelectChangeEvents(settings)),
-  ];
-
-  return () => {
-    for (const cleanup of cleanups) cleanup();
-  };
-};

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

@@ -1,83 +0,0 @@
-import { ARIA_EXPANDED_KEY, isHTMLOptionElement } from '@finsweet/attributes-utils';
-import debounce from 'just-debounce';
-
-import type { Settings } from '../utils/types';
-import { populateOptions } from './populate';
-import { toggleResetVisibility } from './state';
-
-/**
- * Observes when the dropdown list is opened/closed.
- * @param settings The instance {@link Settings}.
- *
- * @returns The MutationObserver.
- */
-const observeDropdownList = (settings: Settings) => {
-  const { dropdownToggle, dropdownList, optionsStore, hideInitial } = settings;
-
-  const callback: MutationCallback = debounce(() => {
-    const selectedOption = optionsStore.find(({ selected }) => selected);
-    const firstNonHiddenOption = optionsStore.find(({ hidden }) => !hidden);
-
-    if (!selectedOption || !firstNonHiddenOption) return;
-
-    const isOpen = dropdownToggle.getAttribute(ARIA_EXPANDED_KEY) === 'true';
-
-    if (isOpen) {
-      if (selectedOption.hidden) firstNonHiddenOption.element.focus();
-      else selectedOption.element.focus();
-
-      return;
-    }
-
-    if (hideInitial) window.requestAnimationFrame(() => toggleResetVisibility(!!selectedOption.value, settings));
-  }, 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/selectcustom/src/actions/populate.ts

@@ -1,67 +0,0 @@
-import { cloneNode, findTextNode } from '@finsweet/attributes-utils';
-
-import type { OptionData, Settings } from '../utils/types';
-import { setOptionAria } from './a11y';
-import { toggleResetVisibility, updateOptionsState } from './state';
-
-/**
- * Populates the custom options based on the `HTMLSelectElement`'s options.
- * @param settings The instance {@link Settings}.
- */
-export const populateOptions = (settings: Settings) => {
-  const {
-    optionsStore,
-    optionTemplate,
-    optionsList,
-    emptyOption,
-    hideInitial,
-    selectElement: { options, value: currentValue },
-  } = settings;
-
-  // Clear existing options
-  for (const { element } of optionsStore.values()) {
-    element.remove();
-  }
-
-  optionsStore.splice(0, optionsStore.length);
-
-  let selectedOption: OptionData | undefined;
-
-  // Create new options
-  for (const { value, text } of options) {
-    let element: HTMLAnchorElement | undefined;
-
-    if (!value && emptyOption) {
-      element = cloneNode(emptyOption);
-    } else {
-      element = cloneNode(optionTemplate);
-
-      const textNode = findTextNode(element) || element;
-      textNode.textContent = text;
-    }
-
-    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);
-  }
-
-  updateOptionsState(settings, selectedOption);
-
-  if (hideInitial) {
-    toggleResetVisibility(!!selectedOption?.value, settings);
-  }
-};

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

@@ -1,68 +0,0 @@
-import {
-  ARIA_CURRENT_KEY,
-  DROPDOWN_CSS_CLASSES,
-  type DropdownElement,
-  type DropdownList,
-  type DropdownToggle,
-  findTextNode,
-  isHTMLAnchorElement,
-  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');
-  if (!selectElement) return;
-
-  const dropdownToggle = dropdown.querySelector<DropdownToggle>(`.${DROPDOWN_CSS_CLASSES.dropdownToggle}`);
-  const dropdownList = dropdown.querySelector<DropdownList>(`.${DROPDOWN_CSS_CLASSES.dropdownList}`);
-  if (!dropdownToggle || !dropdownList) return;
-
-  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 emptyOption = queryElement<HTMLAnchorElement>('clear', { scope: dropdownList });
-
-  for (const element of [optionTemplate, emptyOption]) {
-    if (!element) continue;
-
-    element.href = '#';
-    element.setAttribute(TABINDEX_KEY, '-1');
-    element.removeAttribute(ARIA_CURRENT_KEY);
-    element.remove();
-  }
-
-  const hideInitial = hasAttributeValue(referenceElement, 'hideinitial', 'true');
-
-  return {
-    optionsStore,
-    selectElement,
-    dropdownToggle,
-    dropdownList,
-    label,
-    optionTemplate,
-    optionsList,
-    emptyOption,
-    hideInitial,
-  };
-};

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

@@ -1,41 +0,0 @@
-import { ARIA_SELECTED_KEY, CURRENT_CSS_CLASS, setFormFieldValue, TABINDEX_KEY } from '@finsweet/attributes-utils';
-
-import type { OptionData, Settings } from '../utils/types';
-
-/**
- * Sets the selected state to an option and removes it from a previous one, if existing.
- * @param settings The instance {@link Settings}.
- * @param selectedOption The selected {@link OptionData}, if existing.
- */
-export const updateOptionsState = (settings: Settings, selectedOption?: OptionData) => {
-  const { selectElement, optionsStore, label } = settings;
-
-  if (selectedOption) setFormFieldValue(selectElement, selectedOption.value);
-
-  for (const optionData of optionsStore) {
-    const { element } = optionData;
-
-    const selected = element === selectedOption?.element;
-
-    optionData.selected = selected;
-
-    element.classList[selected ? 'add' : 'remove'](CURRENT_CSS_CLASS);
-    element.setAttribute(ARIA_SELECTED_KEY, `${selected}`);
-    element.setAttribute(TABINDEX_KEY, selected ? '0' : '-1');
-  }
-
-  if (selectedOption) label.textContent = selectedOption.text;
-};
-
-/**
- * Toggles the visibility of the reset option.
- * @param show `true` to show, `false` to hide.
- * @param settings The instance {@link Settings}.
- */
-export const toggleResetVisibility = (show: boolean, { optionsStore }: Settings) => {
-  const resetOption = optionsStore.find(({ value }) => !value);
-  if (!resetOption) return;
-
-  resetOption.hidden = !show;
-  resetOption.element.style.display = show ? '' : 'none';
-};

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

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

package/attributes-master/packages/selectcustom/src/init.ts

@@ -1,51 +0,0 @@
-import {
-  type FinsweetAttributeInit,
-  isNotEmpty,
-  waitAttributeLoaded,
-  waitWebflowReady,
-} from '@finsweet/attributes-utils';
-
-import { listenEvents } from './actions/events';
-import { observeElements } from './actions/observe';
-import { populateOptions } from './actions/populate';
-import { collectSettings } from './actions/settings';
-import { queryAllElements } from './utils/selectors';
-
-/**
- * Inits the attribute.
- */
-export const init: FinsweetAttributeInit = async () => {
-  await waitWebflowReady();
-  await waitAttributeLoaded('list');
-
-  const referenceElements = queryAllElements('dropdown');
-
-  const cleanups = referenceElements.map(initCustomSelect).filter(isNotEmpty);
-
-  return {
-    result: referenceElements,
-    destroy() {
-      for (const cleanup of cleanups) cleanup();
-    },
-  };
-};
-
-/**
- * Inits a new custom select instance.
- * @param referenceElement The element that has the `dropdown` attribute.
- *
- * @returns A callback to destroy all listeners.
- */
-const initCustomSelect = (referenceElement: HTMLElement) => {
-  const settings = collectSettings(referenceElement);
-  if (!settings) return;
-
-  populateOptions(settings);
-  const disconnectObservers = observeElements(settings);
-  const removeEventListeners = listenEvents(settings);
-
-  return () => {
-    disconnectObservers();
-    removeEventListeners();
-  };
-};

package/attributes-master/packages/selectcustom/src/utils/constants.ts

@@ -1,34 +0,0 @@
-import {
-  ARROW_DOWN_KEY,
-  ARROW_UP_KEY,
-  type AttributeElements,
-  type AttributeSettings,
-  SPACE_KEY,
-  TAB_KEY,
-} from '@finsweet/attributes-utils';
-
-export const ELEMENTS = [
-  /**
-   * Defines a dropdown element.
-   */
-  'dropdown',
-
-  /**
-   * Defines the label that displays the currently selected option.
-   */
-  'label',
-
-  /**
-   * Defines an option that will remove the selected value.
-   */
-  'clear',
-] as const satisfies AttributeElements;
-
-export const SETTINGS = {
-  /**
-   * Defines if the reset option should be hidden whenever there isn't an active selection.
-   */
-  hideinitial: { key: 'hideinitial', values: ['true'] },
-} as const satisfies AttributeSettings;
-
-export const CONTROL_KEYS = [SPACE_KEY, TAB_KEY, ARROW_UP_KEY, ARROW_DOWN_KEY];

package/attributes-master/packages/selectcustom/src/utils/selectors.ts

@@ -1,9 +0,0 @@
-import { generateSelectors, SELECT_CUSTOM_ATTRIBUTE } from '@finsweet/attributes-utils';
-
-import { ELEMENTS, SETTINGS } from './constants';
-
-export const { queryElement, getElementSelector, hasAttributeValue, queryAllElements } = generateSelectors(
-  SELECT_CUSTOM_ATTRIBUTE,
-  ELEMENTS,
-  SETTINGS
-);

package/attributes-master/packages/selectcustom/src/utils/types.ts

@@ -1,14 +0,0 @@
-import type { collectSettings } from '../actions/settings';
-
-export type Settings = NonNullable<ReturnType<typeof collectSettings>>;
-
-export interface OptionData {
-  text: string;
-  value: string;
-  element: HTMLAnchorElement;
-  selected: boolean;
-  focused: boolean;
-  hidden?: boolean;
-}
-
-export type OptionsStore = OptionData[];

package/attributes-master/packages/selectcustom/tsconfig.json

@@ -1,3 +0,0 @@
-{
-  "extends": "../../tsconfig.json"
-}