@1024pix/pix-ui 55.18.1 → 55.18.2

package/addon/components/pix-select-list.hbs

@@ -60,7 +60,9 @@
                 />
               {{/if}}
 
-              {{option.label}}
+              <span class="pix-select-list-category__option-label">
+                {{option.label}}
+              </span>
 
               {{#if (eq option.value @value)}}
                 <PixIcon
@@ -97,7 +99,9 @@
             />
           {{/if}}
 
-          {{option.label}}
+          <span class="pix-select-list-category__option-label">
+            {{option.label}}
+          </span>
 
           {{#if (eq option.value @value)}}
             <PixIcon

package/addon/components/pix-select.gjs

@@ -0,0 +1,235 @@
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import { guidFor } from '@ember/object/internals';
+import { inject as service } from '@ember/service';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import onClickOutsideModifier from 'ember-click-outside/modifiers/on-click-outside';
+import { FloatingUI } from 'ember-primitives/floating-ui';
+
+import onArrowDownUpAction from '../modifiers/on-arrow-down-up-action';
+import onEscapeAction from '../modifiers/on-escape-action';
+import PixIcon from './pix-icon';
+import PixLabel from './pix-label';
+import PixSelectList from './pix-select-list';
+
+export default class PixSelect extends Component {
+  @service elementHelper;
+  @tracked isExpanded = false;
+  @tracked searchValue = null;
+
+  constructor(...args) {
+    super(...args);
+
+    this.searchId = 'search-input-' + guidFor(this);
+    this.selectId = this.args.id ? this.args.id : 'select-' + guidFor(this);
+    this.listId = `listbox-${this.selectId}`;
+
+    if (!this.args.isComputeWidthDisabled) {
+      this.elementHelper.waitForElement(this.listId).then((elementList) => {
+        const baseFontRemRatio = Number(
+          getComputedStyle(document.querySelector('html')).fontSize.match(/\d+(\.\d+)?/)[0],
+        );
+
+        const listWidth = elementList.parentNode.getBoundingClientRect().width;
+        const selectWidth = listWidth / baseFontRemRatio;
+
+        const element = document.getElementById(`container-${this.selectId}`);
+        element.style.setProperty('--pix-select-width', `${selectWidth}rem`);
+      });
+    }
+  }
+
+  get displayDefaultOption() {
+    return !this.searchValue && !this.args.hideDefaultOption;
+  }
+
+  get className() {
+    const classes = ['pix-select-button'];
+    if (this.args.className) {
+      classes.push(this.args.className);
+    }
+    if (this.args.errorMessage) {
+      classes.push('pix-select-button--error');
+    }
+
+    return classes.join(' ');
+  }
+
+  get isAriaExpanded() {
+    return this.isExpanded ? 'true' : 'false';
+  }
+
+  get placeholder() {
+    if (!this.args.value) return this.args.placeholder;
+    const option = this.args.options.find((option) => option.value === this.args.value);
+    return option ? option.label : this.args.placeholder;
+  }
+
+  get defaultOption() {
+    return {
+      value: '',
+    };
+  }
+
+  @action
+  toggleDropdown(event) {
+    if (this.isExpanded) {
+      this.hideDropdown(event);
+    } else {
+      this.showDropdown(event);
+    }
+  }
+
+  @action
+  showDropdown(event) {
+    event.preventDefault();
+    if (this.args.isDisabled) return;
+
+    this.isExpanded = true;
+  }
+
+  @action
+  hideDropdown(event) {
+    if (this.isExpanded) {
+      event.preventDefault();
+
+      this.isExpanded = false;
+    }
+  }
+
+  @action
+  onChange(option, event) {
+    if (this.args.isDisabled) return;
+
+    this.args.onChange(option.value);
+
+    this.hideDropdown(event);
+    document.getElementById(this.selectId).focus();
+  }
+
+  @action
+  setSearchValue(event) {
+    this.searchValue = event.target.value.trim();
+  }
+
+  @action
+  lockTab(event) {
+    if (event.code === 'Tab' && this.isExpanded) {
+      event.preventDefault();
+      if (this.args.isSearchable) document.getElementById(this.searchId).focus();
+    }
+  }
+
+  @action
+  focus(event) {
+    if (!event.target) return;
+    if (!this.isExpanded) return;
+
+    if (this.args.value) {
+      event.target.querySelector("[aria-selected='true']")?.focus();
+    } else if (this.args.isSearchable) {
+      event.target.querySelector(`#${this.searchId}`)?.focus();
+    } else if (this.displayDefaultOption) {
+      event.target.querySelector("[aria-selected='true']")?.focus();
+    }
+  }
+
+  <template>
+    <div
+      class="pix-select {{if @inlineLabel ' pix-select--inline'}}"
+      id="container-{{this.selectId}}"
+      {{onClickOutsideModifier this.hideDropdown}}
+      {{onArrowDownUpAction this.listId this.showDropdown this.isExpanded}}
+      {{onEscapeAction this.hideDropdown this.selectId}}
+      {{on "keydown" this.lockTab}}
+      ...attributes
+    >
+      {{#if (has-block "label")}}
+        <PixLabel
+          @for={{this.selectId}}
+          @requiredLabel={{@requiredLabel}}
+          @subLabel={{@subLabel}}
+          @size={{@size}}
+          @screenReaderOnly={{@screenReaderOnly}}
+          @inlineLabel={{@inlineLabel}}
+        >
+          {{yield to="label"}}
+        </PixLabel>
+      {{/if}}
+
+      <FloatingUI @placement="bottom" as |reference floating|>
+        <div>
+          <button
+            {{reference}}
+            type="button"
+            id={{this.selectId}}
+            class={{this.className}}
+            {{on "click" this.toggleDropdown}}
+            aria-expanded={{this.isAriaExpanded}}
+            aria-controls={{this.listId}}
+            aria-disabled={{@isDisabled}}
+          >
+            {{#if @iconName}}
+              <PixIcon
+                @name={{@iconName}}
+                @plainIcon={{@plainIcon}}
+                @ariaHidden={{true}}
+                class="pix-select-button__icon"
+              />
+            {{/if}}
+
+            <span class="pix-select-button__text">{{this.placeholder}}</span>
+
+            <PixIcon
+              class="pix-select-button__dropdown-icon"
+              @ariaHidden={{true}}
+              @name={{if this.isExpanded "chevronTop" "chevronBottom"}}
+            />
+          </button>
+
+          <div class="pix-select__floating-container" {{floating}}>
+            <div
+              class="pix-select__dropdown
+                {{unless this.isExpanded ' pix-select__dropdown--closed'}}"
+              {{on "transitionend" this.focus}}
+            >
+              {{#if @isSearchable}}
+                <div class="pix-select__search">
+                  <PixIcon class="pix-select-search__icon" @name="search" @ariaHidden={{true}} />
+                  <label class="screen-reader-only" for={{this.searchId}}>{{@searchLabel}}</label>
+                  <input
+                    class="pix-select-search__input"
+                    id={{this.searchId}}
+                    autocomplete="off"
+                    tabindex={{if this.isExpanded "0" "-1"}}
+                    placeholder={{@searchPlaceholder}}
+                    {{on "input" this.setSearchValue}}
+                  />
+                </div>
+              {{/if}}
+              <PixSelectList
+                @hideDefaultOption={{@hideDefaultOption}}
+                @listId={{this.listId}}
+                @value={{@value}}
+                @displayDefaultOption={{this.displayDefaultOption}}
+                @searchValue={{this.searchValue}}
+                @onChange={{this.onChange}}
+                @defaultOption={{this.defaultOption}}
+                @selectId={{this.selectId}}
+                @isExpanded={{this.isExpanded}}
+                @options={{@options}}
+                @defaultOptionValue={{@placeholder}}
+                @emptySearchMessage={{@emptySearchMessage}}
+              />
+            </div>
+          </div>
+
+          {{#if @errorMessage}}
+            <p class="pix-select__error-message">{{@errorMessage}}</p>
+          {{/if}}
+        </div>
+      </FloatingUI>
+    </div>
+  </template>
+}

package/addon/modifiers/on-arrow-down-up-action.js

@@ -0,0 +1,82 @@
+import { modifier } from 'ember-modifier';
+
+export default modifier((element, [elementId, callback, isExpanded]) => {
+  const elementToTarget = document.getElementById(elementId);
+
+  element.addEventListener('keydown', handleKeyDown);
+
+  return () => {
+    element.removeEventListener('keydown', handleKeyDown);
+  };
+
+  function handleKeyDown(event) {
+    const ARROW_UP_KEY = 'ArrowUp';
+    const ARROW_DOWN_KEY = 'ArrowDown';
+
+    if (![ARROW_UP_KEY, ARROW_DOWN_KEY].includes(event.key)) {
+      return;
+    }
+    event.preventDefault();
+
+    const focusElement = () => {
+      const focusableElements = findFocusableElements(elementToTarget);
+
+      const [firstFocusableElement] = focusableElements;
+      const lastFocusableElement = focusableElements[focusableElements.length - 1];
+
+      const activeIndexElement = focusableElements.findIndex((elementToTarget) => {
+        return document.activeElement === elementToTarget;
+      });
+
+      const handleArrowDown = () => {
+        if (
+          !isExpanded ||
+          document.activeElement === lastFocusableElement ||
+          activeIndexElement === -1
+        ) {
+          firstFocusableElement?.focus();
+        } else {
+          focusableElements[activeIndexElement + 1].focus();
+        }
+      };
+
+      const handleArrowUp = () => {
+        if (
+          !isExpanded ||
+          document.activeElement === firstFocusableElement ||
+          activeIndexElement === -1
+        ) {
+          lastFocusableElement?.focus();
+        } else {
+          focusableElements[activeIndexElement - 1].focus();
+        }
+      };
+
+      if (ARROW_UP_KEY === event.key) {
+        handleArrowUp();
+      } else if (ARROW_DOWN_KEY === event.key) {
+        handleArrowDown();
+      }
+    };
+
+    if (!isExpanded) {
+      elementToTarget.addEventListener('transitionend', focusElement);
+
+      callback(event);
+
+      return () => {
+        elementToTarget.removeEventListener('transitionend', focusElement);
+      };
+    } else {
+      focusElement(elementToTarget);
+    }
+  }
+});
+
+function findFocusableElements(element) {
+  return [
+    ...element.querySelectorAll(
+      'a[href], button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])',
+    ),
+  ].filter((el) => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden'));
+}

package/addon/modifiers/on-enter-action.js

@@ -0,0 +1,28 @@
+import { modifier } from 'ember-modifier';
+
+export default modifier((element, [callback = null, focusId = null]) => {
+  function handleKeyUp(event) {
+    const ENTER_KEY = 'Enter';
+
+    if (event.key !== ENTER_KEY) {
+      return;
+    }
+
+    if (element.type === 'checkbox') {
+      element.checked = !element.checked;
+      element.dispatchEvent(new Event('change'));
+    }
+
+    if (focusId) {
+      document.getElementById(focusId).focus();
+    }
+
+    if (callback) callback(event);
+  }
+
+  element.addEventListener('keydown', handleKeyUp);
+
+  return () => {
+    element.removeEventListener('keydown', handleKeyUp);
+  };
+});

package/addon/modifiers/on-escape-action.js

@@ -0,0 +1,23 @@
+import { modifier } from 'ember-modifier';
+
+export default modifier((element, [callback, focusId = null]) => {
+  function handleKeyUp(event) {
+    const ESCAPE_KEY = 'Escape';
+
+    if (event.key !== ESCAPE_KEY) {
+      return;
+    }
+
+    callback(event);
+
+    if (focusId) {
+      document.getElementById(focusId).focus();
+    }
+  }
+
+  element.addEventListener('keyup', handleKeyUp);
+
+  return () => {
+    element.removeEventListener('keyup', handleKeyUp);
+  };
+});

package/addon/modifiers/on-space-action.js

@@ -0,0 +1,20 @@
+import { modifier } from 'ember-modifier';
+
+export default modifier((element, [callback]) => {
+  const listener = (event) => handleKeyUp(event, callback);
+  element.addEventListener('keydown', listener);
+
+  return () => {
+    element.removeEventListener('keydown', listener);
+  };
+});
+
+function handleKeyUp(event, callback) {
+  const SPACE_KEY = ' ';
+
+  if (event.key !== SPACE_KEY) {
+    return;
+  }
+
+  callback(event);
+}

package/addon/modifiers/on-window-resize.js

@@ -0,0 +1,12 @@
+import { modifier } from 'ember-modifier';
+
+export default modifier(function onWindowResize(element, [action]) {
+  const actionWithElement = () => action(element);
+
+  window.addEventListener('resize', actionWithElement);
+  actionWithElement();
+
+  return () => {
+    window.removeEventListener('resize', actionWithElement);
+  };
+});

package/addon/modifiers/trap-focus.js

@@ -0,0 +1,117 @@
+import { modifier } from 'ember-modifier';
+
+let sourceActiveElement = null;
+
+export default modifier(function trapFocus(element, [isOpen, focusOnClose = true]) {
+  const [firstFocusableElement] = findFocusableElements(element);
+
+  if (isOpen) {
+    preventPageScrolling();
+    sourceActiveElement = document.activeElement;
+    focusElement(firstFocusableElement, element);
+  } else if (sourceActiveElement) {
+    allowPageScrolling();
+
+    if (focusOnClose) {
+      focusElement(sourceActiveElement, element);
+    }
+    sourceActiveElement = null;
+  }
+
+  element.addEventListener('keydown', (event) => {
+    handleKeyDown(event, element);
+  });
+
+  return () => {
+    element.removeEventListener('keydown', (event) => {
+      handleKeyDown(event, element);
+    });
+    allowPageScrolling();
+  };
+});
+
+function findFocusableElements(element) {
+  return [
+    ...element.querySelectorAll(
+      'a[href], button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])',
+    ),
+  ].filter((el) => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden'));
+}
+
+function focusElement(elementToFocus, element) {
+  let focusOnce = false;
+
+  const handleTransitionEnd = () => {
+    if (!focusOnce) {
+      elementToFocus.focus();
+      focusOnce = true;
+    }
+  };
+
+  if (hasTransitionDuration(element)) {
+    element.addEventListener('transitionend', handleTransitionEnd);
+  } else if (hasAnimationDuration(element)) {
+    element.addEventListener('animationend', handleTransitionEnd);
+  } else {
+    elementToFocus.focus();
+  }
+
+  return () => {
+    if (hasTransitionDuration(element)) {
+      element.removeEventListener('transitionend', handleTransitionEnd);
+    } else if (hasAnimationDuration(element)) {
+      element.removeEventListener('animationend', handleTransitionEnd);
+    }
+  };
+}
+
+function preventPageScrolling() {
+  document.body.classList.add('body__trap-focus');
+}
+
+function allowPageScrolling() {
+  document.body.classList.remove('body__trap-focus');
+}
+
+function hasTransitionDuration(element) {
+  return hasDurationByKey(element, 'transition-duration');
+}
+
+function hasAnimationDuration(element) {
+  return hasDurationByKey(element, 'animation-duration');
+}
+
+function hasDurationByKey(element, key) {
+  return !['', '0s'].includes(getComputedStyle(element, null).getPropertyValue(key));
+}
+
+function handleKeyDown(event, element) {
+  const TAB_KEY = 'Tab';
+  const focusableElements = findFocusableElements(element);
+  const [firstFocusableElement] = focusableElements;
+  const lastFocusableElement = focusableElements[focusableElements.length - 1];
+
+  if (event.key !== TAB_KEY) {
+    return;
+  }
+
+  const handleBackwardTab = () => {
+    if (document.activeElement === firstFocusableElement) {
+      event.preventDefault();
+      lastFocusableElement.focus();
+    }
+  };
+
+  const handleForwardTab = () => {
+    if (document.activeElement === lastFocusableElement) {
+      event.preventDefault();
+      firstFocusableElement.focus();
+    }
+  };
+
+  if (event.shiftKey) {
+    handleBackwardTab();
+  } else {
+    handleForwardTab();
+  }
+}

package/addon/styles/_pix-select-list.scss

@@ -56,6 +56,11 @@
     }
   }
 
+  &__option-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   &__option-checked {
     position: absolute;
     top: 50%;

package/addon/styles/_pix-select.scss

@@ -8,6 +8,7 @@
   flex-direction: column;
   gap: var(--pix-spacing-1x);
   width: var(--pix-select-width);
+  min-width: fit-content;
   max-width: 100%;
 
   &--inline {
@@ -16,13 +17,15 @@
     align-items: center;
   }
 
+  &__floating-container {
+    z-index: 200;
+    width: min(var(--pix-select-width), 100%);
+  }
+
   &__dropdown {
     @extend %pix-shadow-xs;
 
-    position: absolute;
-    z-index: 200;
     width: 100%;
-    min-width: fit-content;
     max-height: 12rem;
     margin-top: var(--pix-spacing-1x);
     padding: 0;
@@ -32,7 +35,7 @@
     background-color: var(--pix-neutral-0);
     border-top: none;
     border-radius: 0 0 var(--pix-spacing-1x) var(--pix-spacing-1x);
-    transition: all 0.1s ease-in-out;
+    transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out, max-height 0s;
 
     &::-webkit-scrollbar {
       width: 0.5rem;
@@ -55,8 +58,10 @@
     }
 
     &--closed {
+      max-height: 0;
       visibility: hidden;
       opacity: 0;
+      transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out, max-height 0s 0.2s;
     }
   }
 

package/app/modifiers/on-arrow-down-up-action.js

@@ -1,82 +1 @@
-import { modifier } from 'ember-modifier';
-
-export default modifier((element, [elementId, callback, isExpanded]) => {
-  const elementToTarget = document.getElementById(elementId);
-
-  element.addEventListener('keydown', handleKeyDown);
-
-  return () => {
-    element.removeEventListener('keydown', handleKeyDown);
-  };
-
-  function handleKeyDown(event) {
-    const ARROW_UP_KEY = 'ArrowUp';
-    const ARROW_DOWN_KEY = 'ArrowDown';
-
-    if (![ARROW_UP_KEY, ARROW_DOWN_KEY].includes(event.key)) {
-      return;
-    }
-    event.preventDefault();
-
-    const focusElement = () => {
-      const focusableElements = findFocusableElements(elementToTarget);
-
-      const [firstFocusableElement] = focusableElements;
-      const lastFocusableElement = focusableElements[focusableElements.length - 1];
-
-      const activeIndexElement = focusableElements.findIndex((elementToTarget) => {
-        return document.activeElement === elementToTarget;
-      });
-
-      const handleArrowDown = () => {
-        if (
-          !isExpanded ||
-          document.activeElement === lastFocusableElement ||
-          activeIndexElement === -1
-        ) {
-          firstFocusableElement?.focus();
-        } else {
-          focusableElements[activeIndexElement + 1].focus();
-        }
-      };
-
-      const handleArrowUp = () => {
-        if (
-          !isExpanded ||
-          document.activeElement === firstFocusableElement ||
-          activeIndexElement === -1
-        ) {
-          lastFocusableElement?.focus();
-        } else {
-          focusableElements[activeIndexElement - 1].focus();
-        }
-      };
-
-      if (ARROW_UP_KEY === event.key) {
-        handleArrowUp();
-      } else if (ARROW_DOWN_KEY === event.key) {
-        handleArrowDown();
-      }
-    };
-
-    if (!isExpanded) {
-      elementToTarget.addEventListener('transitionend', focusElement);
-
-      callback(event);
-
-      return () => {
-        elementToTarget.removeEventListener('transitionend', focusElement);
-      };
-    } else {
-      focusElement(elementToTarget);
-    }
-  }
-});
-
-function findFocusableElements(element) {
-  return [
-    ...element.querySelectorAll(
-      'a[href], button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])',
-    ),
-  ].filter((el) => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden'));
-}
+export { default } from '@1024pix/pix-ui/modifiers/on-arrow-down-up-action';

package/app/modifiers/on-enter-action.js

@@ -1,28 +1 @@
-import { modifier } from 'ember-modifier';
-
-export default modifier((element, [callback = null, focusId = null]) => {
-  function handleKeyUp(event) {
-    const ENTER_KEY = 'Enter';
-
-    if (event.key !== ENTER_KEY) {
-      return;
-    }
-
-    if (element.type === 'checkbox') {
-      element.checked = !element.checked;
-      element.dispatchEvent(new Event('change'));
-    }
-
-    if (focusId) {
-      document.getElementById(focusId).focus();
-    }
-
-    if (callback) callback(event);
-  }
-
-  element.addEventListener('keydown', handleKeyUp);
-
-  return () => {
-    element.removeEventListener('keydown', handleKeyUp);
-  };
-});
+export { default } from '@1024pix/pix-ui/modifiers/on-enter-action';

package/app/modifiers/on-escape-action.js

@@ -1,23 +1 @@
-import { modifier } from 'ember-modifier';
-
-export default modifier((element, [callback, focusId = null]) => {
-  function handleKeyUp(event) {
-    const ESCAPE_KEY = 'Escape';
-
-    if (event.key !== ESCAPE_KEY) {
-      return;
-    }
-
-    callback(event);
-
-    if (focusId) {
-      document.getElementById(focusId).focus();
-    }
-  }
-
-  element.addEventListener('keyup', handleKeyUp);
-
-  return () => {
-    element.removeEventListener('keyup', handleKeyUp);
-  };
-});
+export { default } from '@1024pix/pix-ui/modifiers/on-escape-action';

package/app/modifiers/on-space-action.js

@@ -1,20 +1 @@
-import { modifier } from 'ember-modifier';
-
-export default modifier((element, [callback]) => {
-  const listener = (event) => handleKeyUp(event, callback);
-  element.addEventListener('keydown', listener);
-
-  return () => {
-    element.removeEventListener('keydown', listener);
-  };
-});
-
-function handleKeyUp(event, callback) {
-  const SPACE_KEY = ' ';
-
-  if (event.key !== SPACE_KEY) {
-    return;
-  }
-
-  callback(event);
-}
+export { default } from '@1024pix/pix-ui/modifiers/on-space-action';

package/app/modifiers/on-window-resize.js

@@ -1,12 +1 @@
-import { modifier } from 'ember-modifier';
-
-export default modifier(function onWindowResize(element, [action]) {
-  const actionWithElement = () => action(element);
-
-  window.addEventListener('resize', actionWithElement);
-  actionWithElement();
-
-  return () => {
-    window.removeEventListener('resize', actionWithElement);
-  };
-});
+export { default } from '@1024pix/pix-ui/modifiers/on-window-resize';

package/app/modifiers/trap-focus.js

@@ -1,117 +1 @@
-import { modifier } from 'ember-modifier';
-
-let sourceActiveElement = null;
-
-export default modifier(function trapFocus(element, [isOpen, focusOnClose = true]) {
-  const [firstFocusableElement] = findFocusableElements(element);
-
-  if (isOpen) {
-    preventPageScrolling();
-    sourceActiveElement = document.activeElement;
-    focusElement(firstFocusableElement, element);
-  } else if (sourceActiveElement) {
-    allowPageScrolling();
-
-    if (focusOnClose) {
-      focusElement(sourceActiveElement, element);
-    }
-    sourceActiveElement = null;
-  }
-
-  element.addEventListener('keydown', (event) => {
-    handleKeyDown(event, element);
-  });
-
-  return () => {
-    element.removeEventListener('keydown', (event) => {
-      handleKeyDown(event, element);
-    });
-    allowPageScrolling();
-  };
-});
-
-function findFocusableElements(element) {
-  return [
-    ...element.querySelectorAll(
-      'a[href], button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])',
-    ),
-  ].filter((el) => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden'));
-}
-
-function focusElement(elementToFocus, element) {
-  let focusOnce = false;
-
-  const handleTransitionEnd = () => {
-    if (!focusOnce) {
-      elementToFocus.focus();
-      focusOnce = true;
-    }
-  };
-
-  if (hasTransitionDuration(element)) {
-    element.addEventListener('transitionend', handleTransitionEnd);
-  } else if (hasAnimationDuration(element)) {
-    element.addEventListener('animationend', handleTransitionEnd);
-  } else {
-    elementToFocus.focus();
-  }
-
-  return () => {
-    if (hasTransitionDuration(element)) {
-      element.removeEventListener('transitionend', handleTransitionEnd);
-    } else if (hasAnimationDuration(element)) {
-      element.removeEventListener('animationend', handleTransitionEnd);
-    }
-  };
-}
-
-function preventPageScrolling() {
-  document.body.classList.add('body__trap-focus');
-}
-
-function allowPageScrolling() {
-  document.body.classList.remove('body__trap-focus');
-}
-
-function hasTransitionDuration(element) {
-  return hasDurationByKey(element, 'transition-duration');
-}
-
-function hasAnimationDuration(element) {
-  return hasDurationByKey(element, 'animation-duration');
-}
-
-function hasDurationByKey(element, key) {
-  return !['', '0s'].includes(getComputedStyle(element, null).getPropertyValue(key));
-}
-
-function handleKeyDown(event, element) {
-  const TAB_KEY = 'Tab';
-  const focusableElements = findFocusableElements(element);
-  const [firstFocusableElement] = focusableElements;
-  const lastFocusableElement = focusableElements[focusableElements.length - 1];
-
-  if (event.key !== TAB_KEY) {
-    return;
-  }
-
-  const handleBackwardTab = () => {
-    if (document.activeElement === firstFocusableElement) {
-      event.preventDefault();
-      lastFocusableElement.focus();
-    }
-  };
-
-  const handleForwardTab = () => {
-    if (document.activeElement === lastFocusableElement) {
-      event.preventDefault();
-      firstFocusableElement.focus();
-    }
-  };
-
-  if (event.shiftKey) {
-    handleBackwardTab();
-  } else {
-    handleForwardTab();
-  }
-}
+export { default } from '@1024pix/pix-ui/modifiers/trap-focus';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "55.18.1",
+  "version": "55.18.2",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -72,6 +72,7 @@
     "ember-lifeline": "^7.0.0",
     "ember-modifier": "^4.2.0",
     "ember-popperjs": "^3.0.0",
+    "ember-primitives": "^0.29.0",
     "ember-template-imports": "^4.3.0",
     "ember-truth-helpers": "^4.0.0"
   },

package/addon/components/pix-select.hbs

@@ -1,91 +0,0 @@
-<div
-  class="pix-select {{if @inlineLabel ' pix-select--inline'}}"
-  id="container-{{this.selectId}}"
-  {{on-click-outside this.hideDropdown}}
-  {{on-arrow-down-up-action this.listId this.showDropdown this.isExpanded}}
-  {{on-escape-action this.hideDropdown this.selectId}}
-  {{on "keydown" this.lockTab}}
-  ...attributes
->
-  {{#if (has-block "label")}}
-    <PixLabel
-      @for={{this.selectId}}
-      @requiredLabel={{@requiredLabel}}
-      @subLabel={{@subLabel}}
-      @size={{@size}}
-      @screenReaderOnly={{@screenReaderOnly}}
-      @inlineLabel={{@inlineLabel}}
-    >
-      {{yield to="label"}}
-    </PixLabel>
-  {{/if}}
-
-  <div>
-    <PopperJS @placement={{or @placement "bottom-start"}} as |reference popover|>
-      <button
-        {{reference}}
-        type="button"
-        id={{this.selectId}}
-        class={{this.className}}
-        {{on "click" this.toggleDropdown}}
-        aria-expanded={{this.isAriaExpanded}}
-        aria-controls={{this.listId}}
-        aria-disabled={{@isDisabled}}
-      >
-        {{#if @iconName}}
-          <PixIcon
-            @name={{@iconName}}
-            @plainIcon={{@plainIcon}}
-            @ariaHidden={{true}}
-            class="pix-select-button__icon"
-          />
-        {{/if}}
-
-        <span class="pix-select-button__text">{{this.placeholder}}</span>
-
-        <PixIcon
-          class="pix-select-button__dropdown-icon"
-          @ariaHidden={{true}}
-          @name={{if this.isExpanded "chevronTop" "chevronBottom"}}
-        />
-      </button>
-      <div
-        {{popover}}
-        class="pix-select__dropdown {{unless this.isExpanded ' pix-select__dropdown--closed'}}"
-        {{on "transitionend" this.focus}}
-      >
-        {{#if @isSearchable}}
-          <div class="pix-select__search">
-            <PixIcon class="pix-select-search__icon" @name="search" @ariaHidden={{true}} />
-            <label class="screen-reader-only" for={{this.searchId}}>{{@searchLabel}}</label>
-            <input
-              class="pix-select-search__input"
-              id={{this.searchId}}
-              autocomplete="off"
-              tabindex={{if this.isExpanded "0" "-1"}}
-              placeholder={{@searchPlaceholder}}
-              {{on "input" this.setSearchValue}}
-            />
-          </div>
-        {{/if}}
-        <PixSelectList
-          @hideDefaultOption={{@hideDefaultOption}}
-          @listId={{this.listId}}
-          @value={{@value}}
-          @displayDefaultOption={{this.displayDefaultOption}}
-          @searchValue={{this.searchValue}}
-          @onChange={{this.onChange}}
-          @defaultOption={{this.defaultOption}}
-          @selectId={{this.selectId}}
-          @isExpanded={{this.isExpanded}}
-          @options={{@options}}
-          @defaultOptionValue={{@placeholder}}
-          @emptySearchMessage={{@emptySearchMessage}}
-        />
-      </div>
-    </PopperJS>
-    {{#if @errorMessage}}
-      <p class="pix-select__error-message">{{@errorMessage}}</p>
-    {{/if}}
-  </div>
-</div>

package/addon/components/pix-select.js

@@ -1,127 +0,0 @@
-import { action } from '@ember/object';
-import { guidFor } from '@ember/object/internals';
-import { inject as service } from '@ember/service';
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-
-export default class PixSelect extends Component {
-  @service elementHelper;
-  @tracked isExpanded = false;
-  @tracked searchValue = null;
-
-  constructor(...args) {
-    super(...args);
-
-    this.searchId = 'search-input-' + guidFor(this);
-    this.selectId = this.args.id ? this.args.id : 'select-' + guidFor(this);
-    this.listId = `listbox-${this.selectId}`;
-
-    if (!this.args.isComputeWidthDisabled) {
-      this.elementHelper.waitForElement(this.listId).then((elementList) => {
-        const baseFontRemRatio = Number(
-          getComputedStyle(document.querySelector('html')).fontSize.match(/\d+(\.\d+)?/)[0],
-        );
-        const listWidth = elementList.getBoundingClientRect().width;
-        const selectWidth = listWidth / baseFontRemRatio;
-
-        const element = document.getElementById(`container-${this.selectId}`);
-        element.style.setProperty('--pix-select-width', `${selectWidth}rem`);
-      });
-    }
-  }
-
-  get displayDefaultOption() {
-    return !this.searchValue && !this.args.hideDefaultOption;
-  }
-
-  get className() {
-    const classes = ['pix-select-button'];
-    if (this.args.className) {
-      classes.push(this.args.className);
-    }
-    if (this.args.errorMessage) {
-      classes.push('pix-select-button--error');
-    }
-
-    return classes.join(' ');
-  }
-
-  get isAriaExpanded() {
-    return this.isExpanded ? 'true' : 'false';
-  }
-
-  get placeholder() {
-    if (!this.args.value) return this.args.placeholder;
-    const option = this.args.options.find((option) => option.value === this.args.value);
-    return option ? option.label : this.args.placeholder;
-  }
-
-  get defaultOption() {
-    return {
-      value: '',
-    };
-  }
-
-  @action
-  toggleDropdown(event) {
-    if (this.isExpanded) {
-      this.hideDropdown(event);
-    } else {
-      this.showDropdown(event);
-    }
-  }
-
-  @action
-  showDropdown(event) {
-    event.preventDefault();
-    if (this.args.isDisabled) return;
-
-    this.isExpanded = true;
-  }
-
-  @action
-  hideDropdown(event) {
-    if (this.isExpanded) {
-      event.preventDefault();
-
-      this.isExpanded = false;
-    }
-  }
-
-  @action
-  onChange(option, event) {
-    if (this.args.isDisabled) return;
-
-    this.args.onChange(option.value);
-
-    this.hideDropdown(event);
-    document.getElementById(this.selectId).focus();
-  }
-
-  @action
-  setSearchValue(event) {
-    this.searchValue = event.target.value.trim();
-  }
-
-  @action
-  lockTab(event) {
-    if (event.code === 'Tab' && this.isExpanded) {
-      event.preventDefault();
-      if (this.args.isSearchable) document.getElementById(this.searchId).focus();
-    }
-  }
-
-  @action
-  focus(event) {
-    if (!event.target) return;
-    if (!this.isExpanded) return;
-
-    if (this.args.value) {
-      event.target.querySelector("[aria-selected='true']")?.focus();
-    } else if (this.args.isSearchable) {
-      event.target.querySelector(`#${this.searchId}`)?.focus();
-    } else if (this.displayDefaultOption) {
-      event.target.querySelector("[aria-selected='true']")?.focus();
-    }
-  }
-}