@hortonstudio/main 1.2.5 → 1.2.7

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

@@ -0,0 +1,159 @@
+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

@@ -0,0 +1,83 @@
+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

@@ -0,0 +1,67 @@
+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

@@ -0,0 +1,68 @@
+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

@@ -0,0 +1,41 @@
+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

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

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

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,14 @@
+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

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