@hortonstudio/main 1.2.12 → 1.2.13

package/attributes-master/packages/combobox/CHANGELOG.md

@@ -1,99 +0,0 @@
-# @finsweet/attributes-combobox
-
-## 2.0.7
-
-### Patch Changes
-
-- Updated dependencies [2af0bad]
-  - @finsweet/attributes-utils@0.1.0
-
-## 2.0.6
-
-### Patch Changes
-
-- Updated dependencies [378d74d]
-  - @finsweet/attributes-utils@0.0.6
-
-## 2.0.5
-
-### Patch Changes
-
-- Updated dependencies [01973d8]
-  - @finsweet/attributes-utils@0.0.5
-
-## 2.0.4
-
-### Patch Changes
-
-- Updated dependencies [deef758]
-  - @finsweet/attributes-utils@0.0.4
-
-## 2.0.3
-
-### Patch Changes
-
-- Updated dependencies [d21cbca]
-  - @finsweet/attributes-utils@0.0.3
-
-## 2.0.2
-
-### Patch Changes
-
-- Updated dependencies [c7b544d]
-  - @finsweet/attributes-utils@0.0.2
-
-## 2.0.1
-
-### Patch Changes
-
-- b56e5e5: rename fsAttribute in places of usage to finsweetAttribute
-- Updated dependencies [b56e5e5]
-  - @finsweet/attributes-utils@0.0.1
-
-## 2.0.0
-
-### Major Changes
-
-- 589bd31: combobox: prepared for v2 release
-
-## 1.0.6
-
-### Patch Changes
-
-- 358dcc88: preventclear - if true this attribute will retain combobox input value when user types a value that does not exist in the options
-
-## 1.0.5
-
-### Patch Changes
-
-- 1cfbca90: Update examples data and use clear attribute value inplace of option-reset, reset will be used as a fallback, may be removed completely in future.
-
-## 1.0.4
-
-### Patch Changes
-
-- f8dfa119: Update combobox clear icon to `fs-combobox-element="clear"` instead of `fs-combobox-element="option-reset"` and also fix arrow down action when searching results.
-
-## 1.0.3
-
-### Patch Changes
-
-- 27807bca: revert to mousemove event when scrolling
-
-## 1.0.2
-
-### Patch Changes
-
-- 5e57f6b9: Update combobox default settings to remove unused variables, updated mouse and keyboard event listeners and renamed combobox clear icon from fs-combobox-element="clear" to fs-combobox-element="option-reset"
-
-## 1.0.1
-
-### Patch Changes
-
-- ae1a4ffe: Add combobox into attributes and add combobox examples data into combobox/api
-
-## 1.0.0
-
-### Major Changes
-
-- 239ba528: Initial release

package/attributes-master/packages/combobox/README.md

@@ -1,27 +0,0 @@
-# `combobox` Attribute
-
-A combo box that helps users select an item from a large list of options.
-
-## Getting Started
-
-Please follow the documentation at [finsweet.com/attributes](https://www.finsweet.com/attributes) to learn how to use Attributes in your Webflow projects.
-
-## Accessing the API
-
-To learn how to access the API, please check the general [API Reference](../attributes/README.md#api-reference) documentation:
-
-```javascript
-window.FinsweetAttributes ||= [];
-window.FinsweetAttributes.push([
-  'combobox',
-  (dropdownElements) => {
-    // Your code goes here.
-  },
-]);
-```
-
-The `result` object contains the dropdown elements that are currently active on the page.
-
-## License
-
-[Apache 2.0](../../LICENSE.md)

package/attributes-master/packages/combobox/package.json

@@ -1,23 +0,0 @@
-{
-  "name": "@finsweet/attributes-combobox",
-  "version": "2.0.7",
-  "description": "A combo box that helps users select an item from a large list of options.",
-  "private": true,
-  "type": "module",
-  "types": "src/index.ts",
-  "scripts": {
-    "lint": "eslint ./src && prettier --check ./src",
-    "lint:fix": "eslint ./src --fix && prettier --write ./src",
-    "check": "tsc --noEmit"
-  },
-  "exports": {
-    ".": {
-      "types": "./src/index.ts",
-      "import": "./src/index.ts"
-    }
-  },
-  "dependencies": {
-    "just-debounce": "^1.1.0",
-    "@finsweet/attributes-utils": "workspace:*"
-  }
-}

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

@@ -1,29 +0,0 @@
-import {
-  ARIA_HASPOPUP_KEY,
-  ARIA_MULTISELECTABLE_KEY,
-  ARIA_ROLE_KEY,
-  ARIA_ROLE_VALUES,
-  type DropdownList,
-  type DropdownToggle,
-} from '@finsweet/attributes-utils';
-
-import type { OptionData } from '../utils/types';
-
-/**
- * Adds `a11ty` attributes to the Dropdown elements.
- * @param dropdownToggle The {@link DropdownToggle} element.
- * @param dropdownList The {@link DropdownList} element.
- */
-export const setDropdownAria = (dropdownToggle: DropdownToggle, dropdownList: DropdownList) => {
-  dropdownToggle.setAttribute(ARIA_HASPOPUP_KEY, ARIA_ROLE_VALUES.listbox);
-  dropdownList.setAttribute(ARIA_ROLE_KEY, ARIA_ROLE_VALUES.listbox);
-  dropdownList.setAttribute(ARIA_MULTISELECTABLE_KEY, 'false');
-};
-
-/**
- * Sets the required aria attributes to a custom option element.
- * @param element
- */
-export const setOptionAria = (element: OptionData['element']) => {
-  element.setAttribute(ARIA_ROLE_KEY, ARIA_ROLE_VALUES.option);
-};

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

@@ -1,12 +0,0 @@
-import type { Settings } from '../../utils/types';
-
-/**
- * This handles mouse movements on the body element and manipulates dropdown list pointer events.
- * @param e MouseEvent
- * @param  settings {@link Settings}
- */
-export const handleBodyMouseMovements = (e: MouseEvent, settings: Settings) => {
-  if (settings.navListElement.style.pointerEvents === 'none') {
-    settings.navListElement.style.pointerEvents = 'auto';
-  }
-};

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

@@ -1,37 +0,0 @@
-import { ENTER_KEY, SPACE_KEY } from '@finsweet/attributes-utils';
-
-import { focusOnInput, toggleDropdownCloseIcon } from '../../utils';
-import type { Settings } from '../../utils/types';
-import { populateOptions } from '../populate';
-
-/**
- * Resets `combobox` selections and clears input field value
- * @param settings The instance {@link Settings}.
- */
-export const handleClearDropdownClickEvents = (e: MouseEvent | KeyboardEvent, settings: Settings) => {
-  const { selectElement, inputElement } = settings;
-  e.stopPropagation();
-  e.preventDefault();
-
-  inputElement.value = '';
-  selectElement.value = '';
-
-  populateOptions(settings, '', true, true);
-
-  focusOnInput(settings);
-
-  toggleDropdownCloseIcon(settings);
-};
-
-/**
- * Handles key events on the dropdown toggle. This resets the dropdown state.
- */
-export const handleClearDropdown = (e: KeyboardEvent | MouseEvent, settings: Settings) => {
-  const { key } = e as KeyboardEvent;
-  e.stopPropagation();
-
-  if (key === ENTER_KEY || key === SPACE_KEY) {
-    e.preventDefault();
-    handleClearDropdownClickEvents(e, settings);
-  }
-};

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

@@ -1,220 +0,0 @@
-import {
-  ARIA_ACTIVEDESCENDANT_KEY,
-  ARIA_EXPANDED_KEY,
-  ARROW_DOWN_KEY,
-  ARROW_UP_KEY,
-  CLICK,
-  ENTER_KEY,
-  ESCAPE_KEY,
-  ID_KEY,
-  setFormFieldValue,
-  TAB_KEY,
-  TABINDEX_KEY,
-} from '@finsweet/attributes-utils';
-
-import { focusOnInput, getClickedOptionData, setActiveDescendant, toggleDropdown } from '../../utils';
-import { CONTROL_KEYS } from '../../utils/constants';
-import type { OptionData, Settings } from '../../utils/types';
-import { handleClearInput } from '../input';
-import { updateOptionsState } from '../state';
-import { cleanupBubble } from './../../utils/dropdowns';
-
-let lastCursorPos = { x: 0, y: 0 };
-
-/**
- * Handles click events on the dropdown list.
- * @param e The Event object.
- * @param settings The instance {@link Settings}.
- */
-const handleDropdownListClickEvents = (e: MouseEvent | KeyboardEvent, optionData: OptionData, settings: Settings) => {
-  if (!optionData.selected) updateOptionsState(settings, optionData);
-
-  setFormFieldValue(settings.inputElement, optionData.text);
-  toggleDropdown(settings);
-};
-
-/**
- * Handles dropdown mouse events: hover
- * Updates input field aria-activedescendant attribute with the option id.
- * @param e The Event object.
- * @param settings The instance {@link Settings}.
- */
-export const handleDropdownListMouseEvents = (e: MouseEvent | KeyboardEvent, settings: Settings) => {
-  const target = e.target as HTMLElement;
-
-  if (target === settings.selectElement) return;
-
-  e.preventDefault();
-
-  if (target.tagName === 'A' && e.type === 'mousemove') {
-    const mouseEvent = e as MouseEvent;
-    const currentCursorPos = { x: mouseEvent.clientX, y: mouseEvent.clientY };
-    if (lastCursorPos.x !== currentCursorPos.x || lastCursorPos.y !== currentCursorPos.y) {
-      // mouse moved
-      lastCursorPos = currentCursorPos;
-
-      handleDropdownListFocusEvents(e as FocusEvent, true, settings);
-    }
-  }
-
-  const optionData = getClickedOptionData(e, settings);
-  if (!optionData) return;
-
-  const optionId = optionData?.element?.getAttribute(ID_KEY);
-  settings.inputElement.setAttribute(ARIA_ACTIVEDESCENDANT_KEY, `${optionId || ''}`);
-
-  const isClick = e.type === CLICK;
-
-  if (isClick) handleDropdownListClickEvents(e, optionData, settings);
-};
-
-/**
- * Handles focus events on the dropdown list.
- * @param e The Event object.
- * @param settings The instance {@link Settings}.
- */
-export const handleDropdownListFocusEvents = (e: FocusEvent, focused: boolean, settings: Settings) => {
-  const optionData = getClickedOptionData(e, settings);
-
-  if (!optionData) return;
-
-  if (e.type === 'focusout') return;
-
-  const previouslyFocused = settings.optionsStore.find(({ focused }) => focused);
-
-  if (previouslyFocused) {
-    previouslyFocused?.element.setAttribute(TABINDEX_KEY, '-1');
-    previouslyFocused.focused = false;
-  }
-
-  optionData.element.setAttribute(TABINDEX_KEY, '0');
-  optionData.focused = focused;
-  optionData.element.focus();
-
-  setActiveDescendant(settings.inputElement, optionData.element);
-};
-
-/**
- * Handles tab key events on the dropdown list.
- * @param e The Event object.
- * @param settings The instance {@link Settings}.
- */
-const handleTabKeyEvents = (e: KeyboardEvent, settings: Settings) => {
-  const { shiftKey } = e;
-
-  if (shiftKey) e.preventDefault();
-
-  if (e.target) {
-    (e.target as HTMLAnchorElement).click();
-    focusOnInput(settings);
-  }
-  toggleDropdown(settings);
-};
-
-/**
- * Handles arrow keys events on the dropdown list.
- * @param e The Event object.
- * @param settings The instance {@link Settings}.
- */
-const handleDropdownListArrowKeyEvents = (e: KeyboardEvent, settings: Settings) => {
-  cleanupBubble(e);
-  const { optionsStore, inputElement, navListElement } = settings;
-
-  const { key } = e;
-  const focusedOptionIndex = optionsStore.findIndex(({ focused }) => focused);
-  if (focusedOptionIndex < 0) return;
-
-  const nextOption = optionsStore[key === ARROW_UP_KEY ? focusedOptionIndex - 1 : focusedOptionIndex + 1];
-
-  if (key === ARROW_UP_KEY && !nextOption) {
-    toggleDropdown(settings);
-
-    return;
-  }
-
-  navListElement.style.pointerEvents = 'none';
-
-  const nextEl = nextOption?.element;
-
-  if (!nextEl) return;
-
-  const nextElBox = nextEl.getBoundingClientRect();
-  const navListBox = navListElement.getBoundingClientRect();
-
-  const navListBottom = navListBox.bottom - nextEl.offsetHeight;
-  const navListTop = navListBox.top + nextEl.offsetHeight;
-
-  const isAtBottom = nextElBox.bottom >= navListBottom;
-  const isAtTop = navListTop >= nextElBox.top;
-
-  nextEl.focus();
-
-  if (isAtTop) {
-    const optionBottom = nextEl.offsetTop + nextEl.offsetHeight;
-    const currentBottom = navListElement.scrollTop + navListElement.offsetHeight;
-
-    if (optionBottom > currentBottom) {
-      navListElement.scrollTop = optionBottom - navListElement.offsetHeight;
-      return;
-    }
-
-    if (nextEl.offsetTop < navListElement.scrollTop) {
-      navListElement.scrollTop = nextEl.offsetTop;
-      return;
-    }
-
-    navListElement.scrollTop = nextEl.offsetTop;
-  }
-
-  if (isAtBottom && key !== ARROW_UP_KEY) {
-    const optionBottom = nextEl.offsetTop + nextEl.offsetHeight;
-    const currentBottom = navListElement.scrollTop + navListElement.offsetHeight;
-
-    if (optionBottom < currentBottom) {
-      navListElement.scrollTop = optionBottom - navListElement.offsetHeight;
-      return;
-    }
-
-    if (nextEl.offsetTop > navListElement.scrollTop) {
-      navListElement.scrollTop = nextEl.offsetTop;
-      return;
-    }
-
-    navListElement.scrollTop = nextEl.offsetTop;
-  }
-
-  setActiveDescendant(inputElement, nextOption?.element);
-};
-
-/**
- * Handles keyboard keydown events on the dropdown list.
- * @param e The Event object.
- * @param settings The instance {@link Settings}.
- */
-export const handleDropdownListKeydownEvents = (e: KeyboardEvent, settings: Settings) => {
-  const { key } = e;
-
-  cleanupBubble(e);
-
-  if (key === ESCAPE_KEY) {
-    handleClearInput(e, settings);
-
-    const dropdownIsOpen = settings.dropdownToggle.getAttribute(ARIA_EXPANDED_KEY) === 'true';
-
-    if (dropdownIsOpen) {
-      toggleDropdown(settings);
-    }
-    return;
-  }
-
-  const enterKeyPressed = key === ENTER_KEY;
-
-  const optionData = getClickedOptionData(e, settings);
-
-  if (enterKeyPressed && optionData) handleDropdownListClickEvents(e, optionData, settings);
-
-  if (!CONTROL_KEYS.includes(key)) return;
-
-  if (key === TAB_KEY) handleTabKeyEvents(e, settings);
-  else if (key === ARROW_UP_KEY || key === ARROW_DOWN_KEY) handleDropdownListArrowKeyEvents(e, settings);
-};

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

@@ -1,34 +0,0 @@
-import { ARROW_DOWN_KEY } from '@finsweet/attributes-utils';
-
-import type { Settings } from '../../utils/types';
-
-/**
- * Handles arrow keys events on the dropdown list.
- * Targets the focused option, or the first option if none is focused.
- * @param e The Event object.
- * @param settings The instance {@link Settings}.
- */
-export const handleDropdownToggleArrowKeyEvents = (e: KeyboardEvent, { optionsStore }: Settings) => {
-  const { key } = e;
-
-  e.stopPropagation();
-
-  if (key !== ARROW_DOWN_KEY) return;
-
-  const firstOption = optionsStore.find(({ hidden }) => !hidden);
-  const focusedOption = optionsStore.find(({ focused }) => focused);
-
-  if (focusedOption) {
-    focusedOption.element.focus();
-
-    return;
-  }
-
-  if (firstOption) {
-    firstOption.element.focus();
-
-    return;
-  }
-
-  return;
-};

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

@@ -1,75 +0,0 @@
-import { addListener, ARIA_EXPANDED_KEY } from '@finsweet/attributes-utils';
-
-import { cleanupBubble, toggleDropdown } from '../utils';
-import type { Settings } from '../utils/types';
-import { handleBodyMouseMovements } from './body';
-import { handleClearDropdown, handleClearDropdownClickEvents } from './clearDropdown';
-import {
-  handleDropdownListFocusEvents,
-  handleDropdownListKeydownEvents,
-  handleDropdownListMouseEvents,
-} from './dropdownList';
-import { handleDropdownToggleArrowKeyEvents } from './dropdownToggle';
-import {
-  handleClearInput,
-  handleInputClickEvents,
-  handleInputKeyDownEvents,
-  handleInputKeyUpEvents,
-  updateInputField,
-} from './input';
-import { handleSelectChangeEvents } from './selectElement';
-
-/**
- * Listens for multiple 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, inputElement, clearDropdown, body } = settings;
-
-  dropdownToggle.onmouseup = (e) => {
-    // I believe webflow natively adds this event listener to the dropdown, we need to clear it out
-    // so we can handle the click event ourselves.
-    cleanupBubble(e);
-    return;
-  };
-
-  const cleanups = [
-    addListener(body, 'mousemove', (e) => handleBodyMouseMovements(e, settings)),
-    addListener(dropdownToggle, 'keydown', (e) => handleDropdownToggleArrowKeyEvents(e, settings)),
-    addListener(dropdownToggle, 'focus', () => inputElement.focus()),
-
-    addListener(dropdownList, 'click', (e) => handleDropdownListMouseEvents(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(dropdownList, 'mousemove', (e) => handleDropdownListMouseEvents(e, settings)),
-
-    addListener(dropdownList, 'mouseenter', cleanupBubble),
-    addListener(dropdownList, 'mouseup', cleanupBubble),
-
-    addListener(selectElement, 'change', () => handleSelectChangeEvents(settings)),
-
-    addListener(inputElement, 'keyup', (e) => handleInputKeyUpEvents(e, settings)),
-    addListener(inputElement, 'input', () => {
-      const dropdownIsOpen = dropdownToggle.getAttribute(ARIA_EXPANDED_KEY) === 'true';
-
-      if (!dropdownIsOpen) {
-        toggleDropdown(settings);
-      }
-    }),
-    addListener(inputElement, 'keydown', (e) => handleInputKeyDownEvents(e, settings)),
-    addListener(inputElement, 'click', (e) => handleInputClickEvents(e, settings)),
-    addListener(inputElement, 'mouseup', (e) => handleInputClickEvents(e, settings)),
-    addListener(inputElement, 'blur', (e) => handleClearInput(e, settings, true)),
-    addListener(inputElement, 'updateComboboxInputField', (e) => updateInputField(e, settings)),
-
-    addListener(clearDropdown, 'click', (e) => handleClearDropdownClickEvents(e, settings)),
-    addListener(clearDropdown, 'mouseup', (e) => handleClearDropdown(e, settings)),
-    addListener(clearDropdown, 'keydown', (e) => handleClearDropdown(e, settings)),
-  ];
-
-  return () => {
-    for (const cleanup of cleanups) cleanup();
-  };
-};