@1024pix/pix-ui 55.25.0 → 55.25.2

package/addon/components/pix-app-layout.gjs

@@ -0,0 +1,57 @@
+import { VARIANTS } from '@1024pix/pix-ui/helpers/variants';
+import { warn } from '@ember/debug';
+import Component from '@glimmer/component';
+
+import onWindowResize from '../modifiers/on-window-resize';
+
+export default class PixAppLayout extends Component {
+  #computeMarginTopElement(entries) {
+    for (const entry of entries) {
+      if (entry.target.id === 'pix-layout-banner-container') {
+        const baseFontRemRatio = Number(
+          getComputedStyle(document.querySelector('html')).fontSize.match(/\d+(\.\d+)?/)[0],
+        );
+        const bannerHeight = entry.target.getBoundingClientRect().height;
+        const top = bannerHeight / baseFontRemRatio;
+
+        const layoutElement = document.querySelector('.pix-app-layout');
+        layoutElement.style.setProperty('--pix-app-layout-top', `${top}rem`);
+      }
+    }
+  }
+
+  handleMarginContainerNavigation = (element) => {
+    this.#computeMarginTopElement(element);
+  };
+
+  get variant() {
+    const value = this.args.variant ?? 'primary';
+    warn(
+      `PixAppLayout: @variant "${value}" should be ${VARIANTS.join(', ')}`,
+      VARIANTS.includes(value),
+      {
+        id: 'pix-ui.pix-app-layout.variant.not-valid',
+      },
+    );
+
+    return value;
+  }
+  get classNames() {
+    return ['pix-app-layout', `pix-app-layout--${this.variant}`].join(' ');
+  }
+
+  <template>
+    <div class={{this.classNames}} ...attributes>
+      <section
+        class="pix-app-layout__banner"
+        id="pix-layout-banner-container"
+        {{onWindowResize this.handleMarginContainerNavigation}}
+      >
+        {{yield to="banner"}}
+      </section>
+      <div class="pix-app-layout__navigation">{{yield to="navigation"}}</div>
+      <div class="pix-app-layout__main">{{yield to="main"}}</div>
+      <div class="pix-app-layout__footer">{{yield to="footer"}}</div>
+    </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,20 @@
+import { modifier } from 'ember-modifier';
+
+const observerMap = new WeakMap();
+
+export default modifier(function onWindowResize(element, [changeHandler]) {
+  let observer;
+
+  if (observerMap.has(changeHandler)) {
+    observer = observerMap.get(changeHandler);
+  } else {
+    observer = new ResizeObserver(changeHandler);
+    observerMap.set(changeHandler, observer);
+  }
+
+  observer.observe(element);
+
+  return () => {
+    observer.unobserve(element);
+  };
+});

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-app-layout.scss

@@ -42,7 +42,7 @@
 
   &__main, &__footer {
     width: 100%;
-    max-width: min(calc(100vw - 2 * var(--pix-spacing-6x)), 93rem);
+    max-width: min(calc(100vw - var(--pix-navigation-width) - 3 * var(--pix-spacing-6x)), 93rem);
     margin: 0 auto;
     padding: 0 var(--pix-spacing-6x);
 

package/addon/styles/_pix-navigation.scss

@@ -1,10 +1,13 @@
 @use "pix-design-tokens/breakpoints";
 @use "pix-design-tokens/typography";
 
+:root {
+  --pix-navigation-width:  15rem;
+}
+
 .pix-navigation {
   --bg-color-focus: rgb(var(--pix-neutral-100-inline), 50%);
   --bg-color-active: rgb(var(--pix-neutral-100-inline), 30%);
-  --pix-navigation-width:  15rem;
 
   display: flex;
   flex-direction: column;

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.25.0",
+  "version": "55.25.2",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"

package/addon/components/pix-app-layout.hbs

@@ -1,12 +0,0 @@
-<div class={{this.classNames}} ...attributes>
-  <section
-    class="pix-app-layout__banner"
-    id="pix-layout-banner-container"
-    {{on-window-resize this.handleMarginContainerNavigation}}
-  >
-    {{yield to="banner"}}
-  </section>
-  <div class="pix-app-layout__navigation">{{yield to="navigation"}}</div>
-  <div class="pix-app-layout__main">{{yield to="main"}}</div>
-  <div class="pix-app-layout__footer">{{yield to="footer"}}</div>
-</div>

package/addon/components/pix-app-layout.js

@@ -1,46 +0,0 @@
-import { VARIANTS } from '@1024pix/pix-ui/helpers/variants';
-import { warn } from '@ember/debug';
-import { service } from '@ember/service';
-import Component from '@glimmer/component';
-export default class PixAppLayout extends Component {
-  @service elementHelper;
-
-  constructor(...args) {
-    super(...args);
-
-    this.elementHelper.waitForElement('pix-layout-banner-container').then((elementList) => {
-      this.#computeMarginTopElement(elementList);
-    });
-  }
-
-  #computeMarginTopElement(bannerContainer) {
-    const baseFontRemRatio = Number(
-      getComputedStyle(document.querySelector('html')).fontSize.match(/\d+(\.\d+)?/)[0],
-    );
-    const bannerHeight = bannerContainer.getBoundingClientRect().height;
-    const top = bannerHeight / baseFontRemRatio;
-
-    const layoutElement = document.querySelector('.pix-app-layout');
-    layoutElement.style.setProperty('--pix-app-layout-top', `${top}rem`);
-  }
-
-  handleMarginContainerNavigation = (element) => {
-    this.#computeMarginTopElement(element);
-  };
-
-  get variant() {
-    const value = this.args.variant ?? 'primary';
-    warn(
-      `PixAppLayout: @variant "${value}" should be ${VARIANTS.join(', ')}`,
-      VARIANTS.includes(value),
-      {
-        id: 'pix-ui.pix-app-layout.variant.not-valid',
-      },
-    );
-
-    return value;
-  }
-  get classNames() {
-    return ['pix-app-layout', `pix-app-layout--${this.variant}`].join(' ');
-  }
-}