@hortonstudio/main 1.2.4 → 1.2.6

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

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

@@ -0,0 +1,27 @@
+# `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

@@ -0,0 +1,23 @@
+{
+  "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

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

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

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

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

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

@@ -0,0 +1,75 @@
+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();
+  };
+};