@pnx-mixtape/mxds 0.0.21 → 0.0.23

package/src/Component/DropMenu/DropMenu.stories.ts

@@ -3,6 +3,10 @@ import Component from "./drop-menu.twig"
 import "./drop-menu.css"
 import "./Elements/DropMenu"
 
+// Deps.
+import "../Popover/popover.css"
+import { PopoverPlacementModifier } from "@pnx-mixtape/ids-shape"
+
 type DropMenuItemType = {
   label: string
   href?: string
@@ -13,8 +17,14 @@ type DropMenuType = {
   items: DropMenuItemType[]
   label: string
   id?: string
+  role?: "menu" | "tablist"
+  placement?: PopoverPlacementModifier
 }
 
+/**
+ * The DropMenu extends [Popoover](/?path=/docs/component-popover--docs) to support a menu selection.
+ * It requires the `DropMenu` custom element javascript.
+ */
 const meta: Meta<DropMenuType> = {
   tags: ["autodocs", "ids-mvp"],
   component: Component,
@@ -23,8 +33,46 @@ const meta: Meta<DropMenuType> = {
     items: [
       { label: "News", href: "#news" },
       { label: "Events", href: "#events" },
-      { label: "Stories", id: "stories" },
+      { label: "Stories", href: "#stories" },
     ],
+    placement: PopoverPlacementModifier.BOTTOM_START,
+  },
+  argTypes: {
+    placement: {
+      description: "Places the DropMenu relative to the trigger element.",
+      control: "select",
+      options: Object.values(PopoverPlacementModifier),
+      table: {
+        defaultValue: { summary: `${PopoverPlacementModifier.BOTTOM_START}` },
+        type: { summary: "enum" },
+      },
+    },
+    label: {
+      description: "The text to display inside the trigger button",
+      type: {
+        name: "string",
+        required: true,
+      },
+    },
+    items: {
+      description:
+        "A list of `DropMenuItem<{ label: string, href?: string }>` objects for links or `DropMenuItem<{ label: string, id?: string }>` for buttons.",
+      type: {
+        name: "other",
+        required: true,
+        value: "array",
+      },
+      table: {
+        type: { summary: "DropMenuItem[]" },
+      },
+    },
+    role: {
+      description:
+        "An optional ARIA role attribute for the popover, for use when DropMenuItem is a list of buttons.",
+      control: "select",
+      options: ["menu", "tablist"],
+      type: "string",
+    },
   },
 }
 
@@ -34,3 +82,14 @@ type Story = StoryObj<DropMenuType>
 export const DropMenu: Story = {
   args: {},
 }
+
+export const Buttons: Story = {
+  args: {
+    role: "menu",
+    items: [
+      { label: "News", id: "news" },
+      { label: "Events", id: "events" },
+      { label: "Stories", id: "stories" },
+    ],
+  },
+}

package/src/Component/DropMenu/DropMenu.tsx

@@ -7,11 +7,7 @@ type ContainerProps = ComponentPropsWithoutRef<"div"> &
     condition: boolean
   }
 
-const Container = ({
-  condition,
-  children,
-  ...props
-}: ContainerProps): JSX.Element =>
+const Container = ({ condition, children, ...props }: ContainerProps): JSX.Element =>
   condition ? <div {...props}>{children}</div> : <>{children}</>
 
 type DropMenuProps = PropsWithChildren & {
@@ -42,8 +38,7 @@ const DropMenu = ({
   ariaLabel,
   description = "Results will update when you make a selection. Press escape to close.",
 }: DropMenuProps): JSX.Element => {
-  const { dropMenuId, triggerId, descriptionId, popoverRef } =
-    useDropMenuContext()
+  const { dropMenuId, triggerId, descriptionId, popoverRef } = useDropMenuContext()
 
   return (
     <Container className={classNames(className)} condition={!!className}>

package/src/Component/DropMenu/Elements/DropMenu.ts

@@ -1,51 +1,43 @@
 /**
  * DropMenu
- * @file Create a DropMenu using the Popover and Anchor APIs
+ * @file Create a DropMenu using the Popover and Anchor APIs.
+ * Handle's menu item select.
+ *
+ * Once polyfills are no longer needed, this can just extent HTMLElement
+ * instead of Popover.
  */
 
-import { Keyboard, makeAnchor } from "../../../Utility/utilities"
+import Popover from "../../Popover/Elements/Popover"
 
 export type DropMenuEvent = CustomEvent<{
   event: MouseEvent | KeyboardEvent
   target: HTMLButtonElement | HTMLAnchorElement
 }>
 
-export default class DropMenu extends HTMLElement {
-  internals_: ElementInternals
+export default class DropMenu extends Popover {
   controller: AbortController
-  keyboard: Keyboard = new Keyboard()
   closeOnClick: boolean
 
   constructor() {
     super()
-    this.internals_ = this.attachInternals()
     this.controller = new AbortController()
   }
 
   async connectedCallback() {
-    if (!this.menu || !this.trigger) return
+    await super.connectedCallback()
+    if (!this.container || !this.trigger) return
 
-    // Polyfill anchor (everywhere so far).
-    if (!("anchorName" in document.documentElement.style)) {
-      const { default: Polyfills } = await import("../polyfills.js")
-      new Polyfills(this.menu)
-    }
-    // Polyfill popover (FF only)
-    if (!Object.hasOwn(HTMLElement, "popover")) {
-      await import("@oddbird/popover-polyfill")
-    }
     this.closeOnClick = this.hasAttribute("closeonclick")
 
     const { signal }: AbortController = this.controller
     document.addEventListener(
       "click",
       (event: MouseEvent): void => {
-        const { target } = event
+        const targetElement = event.target as HTMLElement
+        const selectable = targetElement.closest("a, button")
         if (
-          (target as HTMLElement) !== this.menu &&
-          ![...this.items].includes(
-            target as HTMLButtonElement | HTMLAnchorElement,
-          )
+          (targetElement as HTMLElement) !== this.container &&
+          ![...this.items].includes(selectable as HTMLButtonElement | HTMLAnchorElement)
         )
           return
         this.handleSelect(event)
@@ -61,10 +53,8 @@ export default class DropMenu extends HTMLElement {
       (event: KeyboardEvent): void => {
         const { target, key } = event
         if (
-          (target as HTMLElement) !== this.menu &&
-          ![...this.items].includes(
-            target as HTMLButtonElement | HTMLAnchorElement,
-          )
+          (target as HTMLElement) !== this.container &&
+          ![...this.items].includes(target as HTMLButtonElement | HTMLAnchorElement)
         )
           return
         if (key === "Enter") this.handleSelect(event)
@@ -74,27 +64,15 @@ export default class DropMenu extends HTMLElement {
         signal,
       },
     )
-
-    this.keyboard.attachEventListeners(signal)
-    this.menu.addEventListener("focusin", this.attachKeyboardMenu, {
-      signal,
-    })
-    this.menu.addEventListener("focusout", this.detachKeyboardMenu, {
-      signal,
-    })
-    this.menu.addEventListener("toggle", this.handleToggle, {
-      signal,
-    })
   }
 
   disconnectedCallback(): void {
     this.controller.abort()
-    this.keyboard.detachMenu()
   }
 
   handleSelect = (event: MouseEvent | KeyboardEvent): void => {
     const target = event.target as HTMLButtonElement | HTMLAnchorElement
-    this.items.forEach(item => {
+    this.items?.forEach(item => {
       if (!(item instanceof HTMLButtonElement)) return
       item.setAttribute("aria-checked", String(item === target))
     })
@@ -106,64 +84,16 @@ export default class DropMenu extends HTMLElement {
         target,
       },
     })
-    this.menu.dispatchEvent(newEvent)
-    if (this.closeOnClick) this.menu.togglePopover()
-  }
-
-  handleToggle = ({ newState }: ToggleEvent): void => {
-    const handleClose = () => this.menu.togglePopover()
-    if (newState === "open") {
-      this.keyboard.attachPopup(this.menu.id, handleClose)
-    } else {
-      this.keyboard.detachPopup(this.menu.id)
-    }
-  }
-
-  attachKeyboardMenu = (): void => {
-    this.keyboard.attachMenu(this.menu, this.items)
-  }
-
-  detachKeyboardMenu = (): void => {
-    this.keyboard.detachMenu()
-  }
-
-  get menu(): HTMLDivElement | null {
-    const menu: HTMLDivElement | null = this.querySelector("[popover]")
-    if (!menu) {
-      throw new Error(`${this.localName} must contain a <div popover> element.`)
-    }
-    menu.id = menu.id || this.generatedId()
-    return menu
-  }
-
-  get items(): NodeListOf<HTMLButtonElement | HTMLAnchorElement> {
-    const items: NodeListOf<HTMLButtonElement | HTMLAnchorElement> =
-      this.menu.querySelectorAll(":scope > *")
-    if (!items) {
-      throw new Error(`${this.localName} must contain some menu items.`)
-    }
-    return items
-  }
-
-  get trigger(): HTMLButtonElement | null {
-    const trigger: HTMLButtonElement | null = this.querySelector(
-      `[popovertarget=${this.menu?.id}]`,
-    )
-    if (!trigger) {
-      throw new Error(
-        `${this.localName} must contain a <button popovertarget="${this.menu.id}">`,
-      )
-    }
-    return trigger
+    this.container.dispatchEvent(newEvent)
+    if (this.closeOnClick) this.container.togglePopover()
   }
 
-  generatedId = (): string => {
-    const string: string | undefined = this.trigger?.textContent?.trim()
-    return !string ? "" : makeAnchor(string)
+  get items(): NodeListOf<HTMLButtonElement | HTMLAnchorElement> | null {
+    return this.container.querySelectorAll("a, button")
   }
 }
 
-customElements.define("mx-dropmenu", DropMenu)
+if (!customElements.get("mx-dropmenu")) customElements.define("mx-dropmenu", DropMenu)
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/Component/DropMenu/__snapshots__/DropMenu.stories.ts.snap

@@ -1,29 +1,40 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`Component/DropMenu DropMenu smoke-test 1`] = `
+exports[`Component/DropMenu Buttons smoke-test 1`] = `
 <div class="mx-page default">
   <mx-dropmenu closeonclick>
     <button id="unique-0"
-            class="mx-drop-menu__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end"
+            class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end"
             popovertarget="dropdown-menu"
-            style="anchor-name: --drop-menu-dropdown-menu"
+            style="anchor-name: --dropdown-menu"
     >
       Categories
     </button>
-    <div class="mx-drop-menu"
+    <div class="mx-popover mx-drop-menu"
          id="dropdown-menu"
-         aria-labelledby="unique-0"
-         style="position-anchor: --drop-menu-dropdown-menu"
+         aria-describedby="unique-0"
+         style="position-anchor: --dropdown-menu"
+         data-placement="bottom-start"
          popover
+         role="menu"
     >
-      <a href="#news">
+      <button type="button"
+              data-id="news"
+              role="menuitemradio"
+              aria-checked="false"
+      >
         News
-      </a>
-      <a href="#events">
+      </button>
+      <button type="button"
+              data-id="events"
+              role="menuitemradio"
+              aria-checked="false"
+      >
         Events
-      </a>
+      </button>
       <button type="button"
               data-id="stories"
+              role="menuitemradio"
               aria-checked="false"
       >
         Stories
@@ -32,3 +43,34 @@ exports[`Component/DropMenu DropMenu smoke-test 1`] = `
   </mx-dropmenu>
 </div>
 `;
+
+exports[`Component/DropMenu DropMenu smoke-test 1`] = `
+<div class="mx-page default">
+  <mx-dropmenu closeonclick>
+    <button id="unique-0"
+            class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end"
+            popovertarget="dropdown-menu"
+            style="anchor-name: --dropdown-menu"
+    >
+      Categories
+    </button>
+    <div class="mx-popover mx-drop-menu"
+         id="dropdown-menu"
+         aria-describedby="unique-0"
+         style="position-anchor: --dropdown-menu"
+         data-placement="bottom-start"
+         popover
+    >
+      <a href="#news">
+        News
+      </a>
+      <a href="#events">
+        Events
+      </a>
+      <a href="#stories">
+        Stories
+      </a>
+    </div>
+  </mx-dropmenu>
+</div>
+`;

package/src/Component/DropMenu/__snapshots__/DropMenu.stories.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Component/DropMenu DropMenu smoke-test 1`] = `
 <button id="unique-0"

package/src/Component/DropMenu/drop-menu.css

@@ -6,51 +6,23 @@
  * **Experimental** Using new CSS Anchoring and Popover API's, requires JS polyfill.
  */
 
-@layer design-system.components {
-  .mx-drop-menu__trigger {
-    anchor-name: --drop-menu;
+@layer design-system.defaults {
+  mx-drop-menu {
+    display: block;
 
-    &:has(~ :popover-open)::before {
-      rotate: 180deg;
+    &:not(:defined) :where(.mx-drop-menu :is(a, button):not([class])) {
+      pointer-events: none;
+      opacity: 0.7;
     }
   }
+}
 
-  .mx-drop-menu {
-    display: none;
-    opacity: 0;
-    position: absolute;
-    background-color: var(
-      --drop-menu-background,
-      var(--background, var(--colour-background))
-    );
-    color: var(
-      --drop-menu-foreground,
-      var(--foreground, var(--colour-foreground))
-    );
-    border: var(--line-width, 2px) solid
-      var(--line-colour, var(--colour-border));
-    margin: 0;
-
-    @supports (inline-size: anchor-size(width)) {
-      position-anchor: --drop-menu;
-      inset-area: bottom;
-      position-area: bottom;
-      position-try-fallbacks: flip-block;
-      position-try-fallback: flip-block;
-      min-inline-size: anchor-size(width);
-    }
-
-    &:popover-open {
-      opacity: 1;
-      display: block;
-
-      @starting-style {
-        opacity: 0;
-        display: block;
-      }
-    }
+@layer design-system.components {
+  :where(.mx-drop-menu) {
+    --popover-padding: 0px;
+    --popover-top: 0px;
 
-    & button {
+    & :where(button:not([class])) {
       appearance: none;
       line-height: inherit;
       font-family: inherit;
@@ -65,7 +37,7 @@
       }
     }
 
-    & :is(a, button) {
+    & :where(:is(a, button):not([class])) {
       padding-block: var(--spacing-xxxs);
       padding-inline: var(--spacing-xs);
       cursor: pointer;

package/src/Component/DropMenu/drop-menu.twig

@@ -3,24 +3,26 @@
 {% set name = id ~ '-target' %}
 <button
     id="{{ name }}"
-    class="mx-drop-menu__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end"
+    class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end"
     popovertarget="{{ id }}"
-    style="anchor-name: --drop-menu-{{ id }}"
+    style="anchor-name: --{{ id }}"
 >
   {{ label }}
 </button>
 <div
-    class="mx-drop-menu"
+    class="mx-popover mx-drop-menu"
     id="{{ id }}"
-    aria-labelledby="{{ name }}"
-    style="position-anchor: --drop-menu-{{ id }}"
+    aria-describedby="{{ name }}"
+    style="position-anchor: --{{ id }}"
+    data-placement="{{ placement|default('bottom-start') }}"
     popover
+    {% if role %} role="{{ role }}"{% endif %}
 >
   {% for item in items %}
     {% if item.href is not empty %}
       <a href="{{ item.href }}">{{ item.label }}</a>
     {% else %}
-      <button type="button" data-id="{{ item.id }}" aria-checked="false">{{ item.label }}</button>
+      <button type="button" data-id="{{ item.id }}" role="{{ role == "menu" ? "menuitemradio" : "tab" }}" aria-checked="false">{{ item.label }}</button>
     {% endif %}
   {% endfor %}
 </div>

package/src/Component/Filters/Elements/Filters.ts

@@ -32,10 +32,13 @@ export default class Filters extends HTMLElement {
     this.closeBtn?.addEventListener("click", this.handleClose, {
       signal,
     })
+    this.showBtn?.previousElementSibling.setAttribute("hidden", "until-found")
     this.showBtn?.addEventListener("click", this.handleShow, {
       signal,
     })
 
+    this.resetBtn?.setAttribute("disabled", "")
+    this.submitBtn?.setAttribute("disabled", "")
     this.handleCounters()
     this.addEventListener("change", this.handleCounters, { signal })
     this.form?.addEventListener("submit", this.handleCounters, { signal })
@@ -46,11 +49,7 @@ export default class Filters extends HTMLElement {
     this.controller.abort()
   }
 
-  attributeChangedCallback(
-    name: string,
-    oldValue: string,
-    newValue: string,
-  ): void {
+  attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
     if (name === "count" && oldValue !== newValue) {
       const qualifier = parseInt(newValue, 10) > 0
       this.resetBtn?.toggleAttribute("disabled", !qualifier)
@@ -101,12 +100,9 @@ export default class Filters extends HTMLElement {
   }
 
   get items(): NodeListOf<HTMLElement> | null {
-    const items: NodeListOf<HTMLElement> =
-      this.querySelectorAll(".mx-filter-item")
+    const items: NodeListOf<HTMLElement> = this.querySelectorAll(".mx-filter-item")
     if (!items) {
-      throw new Error(
-        `${this.localName} must contain a .mx-filter-item element.`,
-      )
+      throw new Error(`${this.localName} must contain a .mx-filter-item element.`)
     }
     this.entries = new Map()
     items.forEach(item => {
@@ -148,7 +144,7 @@ export default class Filters extends HTMLElement {
   }
 }
 
-customElements.define("mx-filters", Filters)
+if (!customElements.get("mx-filters")) customElements.define("mx-filters", Filters)
 
 declare global {
   interface HTMLElementTagNameMap {