@pnx-mixtape/mxds 0.0.1

package/src/Component/Dialog/Dialog.tsx

@@ -0,0 +1,79 @@
+import {
+  JSX,
+  ReactNode,
+  PropsWithChildren,
+  ComponentPropsWithoutRef,
+  RefObject,
+  useRef,
+  useEffect,
+  useCallback,
+} from "react"
+import classNames from "classnames"
+import { DialogStyles } from "../../enums"
+
+type DialogProps = ComponentPropsWithoutRef<"dialog"> &
+  PropsWithChildren & {
+    modifier?: DialogStyles
+    actions?: ReactNode
+    className?: string
+    modal?: boolean
+    onClose?: () => void
+  }
+
+const defaultOnClose = (): void => {}
+
+const Dialog = ({
+  children,
+  modifier,
+  actions,
+  open = false,
+  onClose = defaultOnClose,
+  modal = true,
+  ...props
+}: DialogProps): JSX.Element => {
+  const dialogRef: RefObject<HTMLDialogElement> = useRef(null)
+
+  const handleClose = useCallback(() => {
+    if (!dialogRef.current) return
+    onClose()
+    dialogRef.current.close()
+  }, [dialogRef])
+
+  useEffect(() => {
+    if (!dialogRef.current) return
+
+    if (open) {
+      if (modal) {
+        dialogRef.current.showModal()
+      } else {
+        dialogRef.current.show()
+      }
+    } else {
+      dialogRef.current.close()
+    }
+  }, [open, dialogRef])
+
+  return (
+    <dialog
+      ref={dialogRef}
+      onClose={handleClose}
+      className={classNames("dialog", {
+        [`dialog--${modifier}`]: modifier,
+      })}
+      {...props}
+    >
+      <div className="dialog__content vertical-flow">{children}</div>
+      {actions}
+      <button
+        autoFocus
+        onClick={handleClose}
+        className="button button--icon-only icon icon--close"
+        type="button"
+      >
+        Close dialog
+      </button>
+    </dialog>
+  )
+}
+
+export default Dialog

package/src/Component/Dialog/Elements/Dialog.ts

@@ -0,0 +1,145 @@
+/**
+ * DialogBase
+ * @file Support opening/closing, and adding a scroll lock to the body.
+ */
+
+import { handleOutsideClick, handleEscape } from "../../../Utility/utilities"
+
+export default class Dialog extends HTMLElement {
+  internals_: ElementInternals
+  controller: AbortController
+  scrollLockClass: string = "body--scroll-lock"
+
+  constructor() {
+    super()
+    this.internals_ = this.attachInternals()
+    this.controller = new AbortController()
+  }
+
+  connectedCallback(): void {
+    if (!this.openBtns || !this.dialog) return
+
+    const { signal }: AbortController = this.controller
+
+    // Open on toggle click.
+    document.addEventListener(
+      "click",
+      (e: MouseEvent): void => {
+        if (![...this.openBtns].includes(e.target as HTMLButtonElement)) return
+        this.handleOpen()
+        e.preventDefault()
+      },
+      {
+        signal,
+      },
+    )
+
+    // Close on close button click.
+    this.dialog.addEventListener(
+      "click",
+      (e: MouseEvent): void => {
+        if (![...this.closeBtns].includes(e.target as HTMLButtonElement)) return
+        this.handleClose()
+        e.preventDefault()
+      },
+      {
+        signal,
+      },
+    )
+
+    // Close on outside click.
+    document.addEventListener(
+      "click",
+      (e: MouseEvent): void => {
+        if (!this.dialog?.open) return
+        handleOutsideClick(e, this.dialog as HTMLElement, this.handleClose, [
+          ...this.openBtns,
+          ...this.closeBtns,
+        ])
+      },
+      { signal },
+    )
+
+    // Close on escape keydown.
+    document.addEventListener(
+      "keydown",
+      (e: KeyboardEvent): void => {
+        if (!this.dialog?.open) return
+        handleEscape(e, this.handleClose)
+      },
+      { signal },
+    )
+  }
+
+  /**
+   * Disconnected.
+   */
+  disconnectedCallback(): void {
+    if (!this.dialog) return
+    if (typeof this.dialog.close === "function") this.dialog.close()
+    this.openBtns.forEach((btn: Element) =>
+      btn.setAttribute("aria-expanded", "false"),
+    )
+    document.body.classList.remove(this.scrollLockClass)
+    this.controller.abort()
+  }
+
+  handleOpen = (): void => {
+    if (!this.dialog) return
+    if (typeof this.dialog.show === "function") {
+      this.isModal ? this.dialog.showModal() : this.dialog.show()
+    }
+    this.openBtns.forEach((btn: Element) =>
+      btn.setAttribute("aria-expanded", "true"),
+    )
+    document.body.classList.add(this.scrollLockClass)
+  }
+
+  handleClose = (): void => {
+    if (!this.dialog) return
+    if (typeof this.dialog.close === "function") this.dialog.close()
+    this.openBtns.forEach((btn: Element) =>
+      btn.setAttribute("aria-expanded", "false"),
+    )
+    document.body.classList.remove(this.scrollLockClass)
+  }
+
+  get dialog(): HTMLDialogElement | null {
+    const dialog: HTMLDialogElement | null = this.querySelector("dialog")
+    if (!dialog) {
+      throw new Error(`${this.localName} must contain a <dialog> element.`)
+    }
+    return dialog
+  }
+
+  get openBtns(): NodeListOf<HTMLButtonElement> {
+    const btns: NodeListOf<HTMLButtonElement> = document.querySelectorAll(
+      `[href="#${this.id}"], [aria-controls="${this.id}"]`,
+    )
+    if (!btns) {
+      throw new Error(
+        `${this.localName} must have an associated opening element.`,
+      )
+    }
+    btns.forEach((btn: HTMLButtonElement): void => {
+      btn.setAttribute("aria-controls", this.id)
+    })
+    return btns
+  }
+
+  get closeBtns(): NodeListOf<HTMLButtonElement> {
+    return this.querySelectorAll("button[data-close]")
+  }
+
+  get isModal(): boolean {
+    return this.hasAttribute("data-modal")
+  }
+}
+
+customElements.define("mx-dialog", Dialog)
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "mx-dialog": Dialog
+  }
+}

package/src/Component/Dialog/README.md

@@ -0,0 +1,63 @@
+# Dialog
+
+### How to use
+
+**CSS**
+
+`@import '@pnx-mixtape/mxds/dialog.css';`
+
+**Web Components**
+
+Web Components are self defined, simply import the desired feature. These do not use the Shadow DOM. External CSS applies.
+
+- DialogBase import: `import '@pnx-mixtape/mxds/dialog/DialogBase';` and be sure to include `<mx-dialog>` around the `<dialog />` tag.
+- The triggering element should either have `aria-controls="[id]"` or `href="#[id]"` where the ID matches the dialog (required).
+- Use the `[data-modal]` attribute to trigger `HTMLDialogElement.showModal()` on open. When omitted `HTMLDialogElement.show()` is used.
+- Add `[data-close]` to any button that should call `HTMLDialogElement.close()`
+
+```html
+<button aria-controls="example-dialog" class="button button--primary">
+  Dialog trigger
+</button>
+<mx-dialog id="example-dialog" data-modal>
+  <dialog class="dialog">
+    <button
+      autofocus
+      class="button button--icon-only icon icon--close"
+      data-close
+    >
+      Close dialog
+    </button>
+    <div class="dialog__content">
+      <h2>Title</h2>
+      <p>Body content.</p>
+    </div>
+  </dialog>
+</mx-dialog>
+```
+
+See twig files for all HTML examples.
+
+**Vanilla JS (to be deprecated)**
+
+- ES6 import: `import Dialog from '@pnx-mixtape/mxds/dialog';`
+- Script tag: `<script src="dist/dialog.js" type="text/javascript"></script>`
+
+**HTML**
+
+```html
+<button
+  data-dialog
+  aria-controls="example-dialog"
+  class="button button--primary"
+>
+  Dialog trigger
+</button>
+
+<dialog class="dialog" id="example-dialog">
+  <div class="dialog__content">
+    <h2>Title</h2>
+    <p>Body content.</p>
+  </div>
+</dialog>
+```

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

@@ -0,0 +1,85 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Components/Dialog Dialog smoke-test 1`] = `
+<p>
+  <a href="#dialog-df"
+     class="button is-excluded"
+  >
+    Open Me
+  </a>
+</p>
+<mx-dialog id="dialog-df"
+           data-modal
+>
+  <dialog class="dialog">
+    <button autofocus
+            class="button button--icon-only icon icon--close"
+            data-close
+    >
+      Close dialog
+    </button>
+    <div class="dialog__content vertical-flow">
+      <h3>
+        Thanks you're almost done!
+      </h3>
+      <p>
+        To finish the process you will need to upload a few more documents. Please have your confirmation email ready before starting. Are you ready?
+      </p>
+    </div>
+    <div class="form__actions">
+      <button class="button button--primary"
+              data-close
+      >
+        Let's get started
+      </button>
+      <button class="button"
+              data-close
+      >
+        Cancel
+      </button>
+    </div>
+  </dialog>
+</mx-dialog>
+`;
+
+exports[`Components/Dialog Fullscreen smoke-test 1`] = `
+<p>
+  <a href="#dialog-df"
+     class="button is-excluded"
+  >
+    Open Me
+  </a>
+</p>
+<mx-dialog id="dialog-df"
+           data-modal
+>
+  <dialog class="dialog dialog--fullscreen">
+    <button autofocus
+            class="button button--icon-only icon icon--close"
+            data-close
+    >
+      Close dialog
+    </button>
+    <div class="dialog__content vertical-flow">
+      <h3>
+        Thanks you're almost done!
+      </h3>
+      <p>
+        To finish the process you will need to upload a few more documents. Please have your confirmation email ready before starting. Are you ready?
+      </p>
+    </div>
+    <div class="form__actions">
+      <button class="button button--primary"
+              data-close
+      >
+        Let's get started
+      </button>
+      <button class="button"
+              data-close
+      >
+        Cancel
+      </button>
+    </div>
+  </dialog>
+</mx-dialog>
+`;

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

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Components/Dialog Dialog smoke-test 1`] = `
+<dialog class="dialog"
+        open
+>
+  <div class="dialog__content vertical-flow">
+    <h2 class
+        level="h3"
+        id="thanks-youre-almost-d"
+    >
+      Thanks, you're almost done!
+    </h2>
+    <p class>
+      To finish the process, you will need to upload a few more documents. Please have your confirmation email ready before starting. Are you ready?
+    </p>
+  </div>
+  <form>
+    <div class="form__actions">
+      <button class="button button--primary"
+              type="button"
+      >
+        Let's get started
+      </button>
+      <button class="button"
+              formmethod="dialog"
+              type="button"
+      >
+        Cancel
+      </button>
+    </div>
+  </form>
+  <button class="button button--icon-only icon icon--close"
+          type="button"
+  >
+    Close dialog
+  </button>
+</dialog>
+`;

package/src/Component/Dialog/dialog.css

@@ -0,0 +1,85 @@
+/**
+ * Dialog
+ */
+
+@layer defaults {
+  mx-dialog {
+    display: block;
+  }
+}
+
+@layer components {
+  .dialog {
+    max-inline-size: var(--container-max-width);
+    max-block-size: 90vh;
+    overflow: auto hidden;
+    overscroll-behavior: contain;
+    background-color: var(--dialog-background, var(--colour-background));
+    border: var(--line-width, 1px) solid
+      var(--line-colour, var(--colour-border));
+    padding: 0;
+    margin: auto;
+
+    &::backdrop {
+      background-color: hsla(0deg 0% 100% / 75%);
+    }
+
+    & .dialog__content {
+      padding: var(--spacing-s);
+
+      @media (--medium-up) {
+        padding-block: var(--spacing-l);
+        padding-inline: var(--spacing-xl);
+      }
+    }
+
+    & > .icon--close {
+      position: absolute;
+      inset-block-start: var(--spacing-xxs);
+      inset-inline-end: var(--spacing-xxs);
+      border: 0;
+      z-index: 11;
+    }
+
+    & .form__actions {
+      border-block-start: var(--line-width, 1px) solid
+        var(--line-colour, var(--colour-border));
+      padding-block: var(--spacing-s);
+      place-content: center;
+    }
+  }
+}
+
+/**
+ * Dialog fullscreen.
+ */
+
+@layer components {
+  .dialog--fullscreen {
+    box-shadow: none;
+    border: 0;
+    inset-block-start: 0;
+    inline-size: 100%;
+    max-inline-size: none;
+    block-size: 100%;
+    max-block-size: none;
+
+    &[open] {
+      display: flex;
+      flex-direction: column;
+    }
+
+    & .dialog__content {
+      max-inline-size: var(--container-max-width);
+      margin: auto;
+    }
+  }
+}
+
+/* Prevent scrolling on the body. */
+.body--scroll-lock,
+.body-dialog--open {
+  overflow: hidden;
+  position: fixed;
+  inline-size: 100vw;
+}

package/src/Component/Dialog/dialog.twig

@@ -0,0 +1,19 @@
+<p><a href="#{{ id|default('dialog-df') }}" class="button is-excluded">{{ title | default('Open Me') }}</a></p>
+
+<mx-dialog id="{{ id|default('dialog-df') }}" data-modal>
+  <dialog class="dialog{% if fullscreen %} dialog--fullscreen{% endif %}">
+    <button autofocus class="button button--icon-only icon icon--close" data-close>Close dialog</button>
+    <div class="dialog__content vertical-flow">
+      {% block content %}
+        <h3>Thanks you're almost done!</h3>
+        <p>To finish the process you will need to upload a few more documents. Please have your confirmation email ready before starting. Are you ready?</p>
+      {% endblock %}
+    </div>
+    {% block actions %}
+      <div class="form__actions">
+        <button class="button button--primary" data-close>Let's get started</button>
+        <button class="button" data-close>Cancel</button>
+      </div>
+    {% endblock %}
+  </dialog>
+</mx-dialog>

package/src/Component/DropMenu/Components/DropMenuContext.tsx

@@ -0,0 +1,192 @@
+/* eslint-disable no-unused-vars, no-console, consistent-return, @eslint-react/web-api/no-leaked-event-listener */
+/**
+ * @file Drop Menu hook.
+ */
+import {
+  RefObject,
+  MouseEvent,
+  KeyboardEvent,
+  useEffect,
+  useRef,
+  useState,
+  useId,
+  Dispatch,
+  SetStateAction,
+  createContext,
+  useContext,
+  JSX,
+  useMemo,
+  PropsWithChildren,
+} from "react"
+import { Keyboard } from "../../../Utility/utilities"
+import useToggle from "../../../Utility/Hooks/useToggle"
+
+type DropMenuContextValues = {
+  selected?: string[]
+  setSelected?: Dispatch<SetStateAction<string[]>>
+  dropMenuId?: string
+  triggerId?: string
+  descriptionId?: string
+  on?: boolean
+  popoverRef?: RefObject<HTMLDivElement>
+  handleClick?: (event: MouseEvent | KeyboardEvent, key: string) => void
+  handleKeydown?: (event: KeyboardEvent, key: string) => void
+}
+
+type DropMenuProviderProps = PropsWithChildren & {
+  id: string
+  multiple?: boolean
+  onClick?: (
+    event: MouseEvent | KeyboardEvent,
+    key: string,
+    updated?: string[],
+  ) => void
+  closeOnClick?: boolean
+  selectedItem?: string[]
+  focusRef?: RefObject<HTMLElement>
+}
+
+const DropMenuContext = createContext<DropMenuContextValues>(null)
+export const useDropMenuContext = () => useContext(DropMenuContext)
+
+const defaultSelected: string[] = []
+const defaultOnClick = (): void => {}
+
+const DropMenuProvider = ({
+  id,
+  children,
+  multiple = false,
+  onClick = defaultOnClick,
+  closeOnClick = true,
+  selectedItem = defaultSelected,
+  focusRef,
+}: DropMenuProviderProps): JSX.Element => {
+  const polyfilled = useRef<boolean>(false)
+  const popoverRef = useRef<HTMLDivElement>(null)
+  const dropMenuId = id || useId()
+  const triggerId = `${dropMenuId}-target`
+  const descriptionId = `${dropMenuId}-description`
+  const [on, toggle] = useToggle(false)
+  const [selected, setSelected] = useState<string[]>(selectedItem)
+  const keyboard = new Keyboard()
+  const controller = new AbortController()
+  const { signal } = controller
+
+  // Polyfill anchor and popover APIs
+  useEffect(() => {
+    if (!popoverRef.current || polyfilled.current) return
+    const polyfill = async () => {
+      if (!("anchorName" in document.documentElement.style)) {
+        const { default: Polyfills } = await import("../polyfills")
+        new Polyfills(popoverRef.current)
+        polyfilled.current = true
+      }
+      if (!Object.hasOwn(HTMLElement, "popover")) {
+        await import("@oddbird/popover-polyfill")
+      }
+    }
+    polyfill().catch(error => console.warn(error))
+  }, [popoverRef, polyfilled])
+
+  const handleToggle = ({ newState }: ToggleEvent): void => {
+    toggle()
+    const handleClose = (): void => popoverRef.current?.togglePopover()
+    if (newState === "open") {
+      keyboard.attachPopup(popoverRef.current?.id, handleClose)
+    } else {
+      keyboard.detachPopup(popoverRef.current?.id)
+    }
+  }
+
+  // Toggle on state when popover toggle event occurs.
+  useEffect(() => {
+    if (!popoverRef.current) return
+    popoverRef.current.addEventListener("toggle", handleToggle, {
+      signal,
+    })
+    return () => {
+      if (!popoverRef.current) return
+      controller.abort()
+    }
+  }, [popoverRef])
+
+  // Attach keyboard when popover is open.
+  useEffect(() => {
+    if (!popoverRef.current || !on) return
+    const items: NodeListOf<HTMLButtonElement> =
+      popoverRef.current.querySelectorAll(":scope > button")
+    if (!items) return
+
+    const attachKeyboardMenu = () =>
+      keyboard.attachMenu(popoverRef.current, items)
+    popoverRef.current.addEventListener("focusin", attachKeyboardMenu, {
+      signal,
+    })
+    popoverRef.current.addEventListener("focusout", keyboard.detachMenu, {
+      signal,
+    })
+    keyboard.attachEventListeners(signal)
+
+    return () => {
+      if (!popoverRef.current) return
+      controller.abort()
+      keyboard.detachMenu()
+    }
+  }, [on, popoverRef])
+
+  // Handle item click events.
+  const handleClick = (
+    event: MouseEvent | KeyboardEvent,
+    key: string,
+  ): void => {
+    event.preventDefault()
+    let updated: string[] = []
+    if (selected.includes(key)) {
+      // Unselect
+      updated = selected.filter(item => item !== key)
+    } else if (multiple) {
+      // Add to selection.
+      updated = [...selected, key]
+    } else {
+      // Replace selection.
+      updated = [key]
+    }
+    setSelected(updated)
+    onClick(event, key, updated)
+    if (closeOnClick) {
+      popoverRef.current.togglePopover()
+    }
+  }
+
+  // Handle item keyboard events.
+  const handleKeyDown = (event: KeyboardEvent, key: string): void => {
+    if (event.key !== "Enter") return
+    handleClick(event, key)
+    if (focusRef && focusRef.current) {
+      focusRef.current.focus()
+    }
+  }
+
+  const values = useMemo<DropMenuContextValues>(
+    () => ({
+      dropMenuId,
+      triggerId,
+      descriptionId,
+      on,
+      popoverRef,
+      selected,
+      setSelected,
+      handleClick,
+      handleKeyDown,
+    }),
+    [dropMenuId, triggerId, descriptionId, on, popoverRef, selected],
+  )
+
+  return (
+    <DropMenuContext.Provider value={values}>
+      {children}
+    </DropMenuContext.Provider>
+  )
+}
+
+export default DropMenuProvider