ember-primitives 0.49.0 → 0.50.0

package/src/components/link.gts

@@ -0,0 +1,172 @@
+/**
+ * TODO: make template-only component,
+ * and use class-based modifier?
+ *
+ * This would require that modifiers could run pre-render
+ */
+import { hash } from '@ember/helper';
+import { on } from '@ember/modifier';
+
+import { link } from '../helpers/link.ts';
+import { ExternalLink } from './external-link.gts';
+
+import type { TOC } from '@ember/component/template-only';
+
+export interface Signature {
+  Element: HTMLAnchorElement;
+  Args: {
+    /**
+     * the `href` string value to set on the anchor element.
+     */
+    href: string;
+    /**
+     * When calculating the "active" state of the link, you may decide
+     * whether or not you want to _require_ that all query params be considered (true)
+     * or specify individual query params, ignoring anything not specified.
+     *
+     * For example:
+     *
+     * ```gjs live preview
+     * import { Link } from 'ember-primitives';
+     *
+     * <template>
+     *   <Link @href="/" @includeActiveQueryParams={{true}} as |a|>
+     *     ...
+     *   </Link>
+     * </template>
+     * ```
+     *
+     * the data-active state here will only be "true" on
+     * - `/`
+     * - `/?foo=2`
+     * - `/?foo=&bar=`
+     *
+     */
+    includeActiveQueryParams?: true | string[];
+    /**
+     * When calculating the "active" state of the link, you may decide
+     * whether or not you want to consider sub paths to be active when
+     * child routes/urls are active.
+     *
+     * For example:
+     *
+     * ```gjs live preview
+     * import { Link } from 'ember-primitives';
+     *
+     * <template>
+     *   <Link @href="/forum/1" @activeOnSubPaths={{true}} as |a|>
+     *     ...
+     *   </Link>
+     * </template>
+     * ```
+     *
+     * the data-active state here will be "true" on
+     * - `/forum/1`
+     * - `/forum/1/posts`
+     * - `/forum/1/posts/comments`
+     * - `/forum/1/*etc*`
+     *
+     * if `@activeOnSubPaths` is set to false or left off
+     * the data-active state here will only be "true" on
+     * - `/forum/1`
+     *
+     */
+    activeOnSubPaths?: true;
+  };
+  Blocks: {
+    default: [
+      {
+        /**
+         * Indicates if the passed `href` is pointing to an external site.
+         * Useful if you want your links to have additional context for when
+         * a user is about to leave your site.
+         *
+         * For example:
+         *
+         * ```gjs live preview
+         * import { Link } from 'ember-primitives';
+         *
+         * const MyLink = <template>
+         *   <Link @href={{@href}} as |a|>
+         *     {{yield}}
+         *     {{#if a.isExternal}}
+         *       ➚
+         *     {{/if}}
+         *   </Link>
+         * </template>;
+         *
+         * <template>
+         *   <MyLink @href="https://developer.mozilla.org">MDN</MyLink> &nbsp;&nbsp;
+         *   <MyLink @href="/">Home</MyLink>
+         *  </template>
+         * ```
+         */
+        isExternal: boolean;
+        /**
+         * Indicates if the passed `href` is *active*, or the user is on the same basepath.
+         * This allows consumers to style their link if they wish or style their text.
+         * The active state will also be present on a `data-active` attribute on the generated anchor tag.
+         *
+         *
+         * For example
+         * ```gjs
+         * import { Link, service } from 'ember-primitives';
+         *
+         * const MyLink = <template>
+         *   <Link @href="..."> as |a|>
+         *     <span class="{{if a.isActive 'underline'}}">
+         *     {{yield}}
+         *     </span>
+         *   </Link>
+         * </template>
+         *
+         * <template>
+         * {{#let (service 'router') as |router|}}
+         *     <MyLink @href={{router.currentURL}}>Ths page</MyLink> &nbsp;&nbsp;
+         *     <MyLink @href="/">Home</MyLink>
+         *   {{/let}}
+         *  </template>
+         * ```
+         *
+         * By default, the query params are omitted from `isActive` calculation, but you may
+         * configure the query params to be included if you wish
+         * See: `@includeActiveQueryParams`
+         *
+         * By default, only the exact route/url is considered for the `isActive` calculation,
+         * but you may configure sub routes/paths to also be considered active
+         * See: `@activeOnSubPaths`
+         *
+         * Note that external links are never active.
+         */
+        isActive: boolean;
+      },
+    ];
+  };
+}
+
+/**
+ * A light wrapper around the [Anchor element][mdn-a], which will appropriately make your link an external link if the passed `@href` is not on the same domain.
+ *
+ *
+ * [mdn-a]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
+ */
+export const Link: TOC<Signature> = <template>
+  {{#let (link @href includeActiveQueryParams=@includeActiveQueryParams activeOnSubPaths=@activeOnSubPaths) as |l|}}
+    {{#if l.isExternal}}
+      <ExternalLink href={{@href}} ...attributes>
+        {{yield (hash isExternal=true isActive=false)}}
+      </ExternalLink>
+    {{else}}
+      <a
+        data-active={{l.isActive}}
+        href={{if @href @href "##missing##"}}
+        {{on "click" l.handleClick}}
+        ...attributes
+      >
+        {{yield (hash isExternal=false isActive=l.isActive)}}
+      </a>
+    {{/if}}
+  {{/let}}
+</template>;
+
+export default Link;

package/src/components/menu.gts

@@ -0,0 +1,373 @@
+import Component from "@glimmer/component";
+import { hash } from "@ember/helper";
+import { on } from "@ember/modifier";
+import { guidFor } from "@ember/object/internals";
+
+import { modifier as eModifier } from "ember-modifier";
+import { cell } from "ember-resources";
+import { getTabster, getTabsterAttribute, MoverDirections, setTabsterAttribute } from "tabster";
+
+import { Link, type Signature as LinkSignature } from "./link.gts";
+import { Popover, type Signature as PopoverSignature } from "./popover.gts";
+
+import type { TOC } from "@ember/component/template-only";
+import type { WithBoundArgs } from "@glint/template";
+
+type Cell<V> = ReturnType<typeof cell<V>>;
+type LinkArgs = LinkSignature["Args"];
+type PopoverArgs = PopoverSignature["Args"];
+type PopoverBlockParams = PopoverSignature["Blocks"]["default"][0];
+
+const TABSTER_CONFIG_CONTENT = getTabsterAttribute(
+  {
+    mover: {
+      direction: MoverDirections.Both,
+      cyclic: true,
+    },
+    deloser: {},
+  },
+  true,
+);
+
+const TABSTER_CONFIG_TRIGGER = {
+  deloser: {},
+};
+
+export interface Signature {
+  Args: PopoverArgs;
+  Blocks: {
+    default: [
+      {
+        arrow: PopoverBlockParams["arrow"];
+        trigger: WithBoundArgs<
+          typeof trigger,
+          "triggerElement" | "contentId" | "isOpen" | "setReference"
+        >;
+        Trigger: WithBoundArgs<typeof Trigger, "triggerModifier">;
+        Content: WithBoundArgs<
+          typeof Content,
+          "triggerElement" | "contentId" | "isOpen" | "PopoverContent"
+        >;
+        isOpen: boolean;
+      },
+    ];
+  };
+}
+
+export interface SeparatorSignature {
+  Element: HTMLDivElement;
+  Blocks: { default: [] };
+}
+
+const Separator: TOC<SeparatorSignature> = <template>
+  <div role="separator" ...attributes>
+    {{yield}}
+  </div>
+</template>;
+
+/**
+ * We focus items on `pointerMove` to achieve the following:
+ *
+ * - Mouse over an item (it focuses)
+ * - Leave mouse where it is and use keyboard to focus a different item
+ * - Wiggle mouse without it leaving previously focused item
+ * - Previously focused item should re-focus
+ *
+ * If we used `mouseOver`/`mouseEnter` it would not re-focus when the mouse
+ * wiggles. This is to match native menu implementation.
+ */
+function focusOnHover(e: PointerEvent) {
+  const item = e.currentTarget;
+
+  if (item instanceof HTMLElement) {
+    item?.focus();
+  }
+}
+
+interface PrivateItemSignature {
+  Element: HTMLButtonElement;
+  Args: { onSelect?: (event: Event) => void; toggle: () => void };
+  Blocks: { default: [] };
+}
+
+export interface ItemSignature {
+  Element: PrivateItemSignature["Element"];
+  Args: Omit<PrivateItemSignature["Args"], "toggle">;
+  Blocks: PrivateItemSignature["Blocks"];
+}
+
+const Item: TOC<PrivateItemSignature> = <template>
+  {{! @glint-expect-error }}
+  {{#let (if @onSelect (modifier on "click" @onSelect)) as |maybeClick|}}
+    <button
+      type="button"
+      role="menuitem"
+      {{! @glint-expect-error }}
+      {{maybeClick}}
+      {{on "click" @toggle}}
+      {{on "pointermove" focusOnHover}}
+      ...attributes
+    >
+      {{yield}}
+    </button>
+  {{/let}}
+</template>;
+
+interface LinkItemArgs extends LinkArgs {
+  toggle: () => void;
+}
+
+interface PrivateLinkItemSignature {
+  Element: HTMLAnchorElement;
+  Args: LinkItemArgs;
+  Blocks: { default: [] };
+}
+
+export interface LinkItemSignature {
+  Element: PrivateLinkItemSignature["Element"];
+  Args: LinkArgs;
+  Blocks: PrivateLinkItemSignature["Blocks"];
+}
+
+const LinkItem: TOC<PrivateLinkItemSignature> = <template>
+  <Link
+    role="menuitem"
+    @href={{@href}}
+    @includeActiveQueryParams={{@includeActiveQueryParams}}
+    @activeOnSubPaths={{@activeOnSubPaths}}
+    {{on "click" @toggle}}
+    {{on "pointermove" focusOnHover}}
+    ...attributes
+  >
+    {{yield}}
+  </Link>
+</template>;
+
+const installContent = eModifier<{
+  Element: HTMLElement;
+  Args: {
+    Named: {
+      isOpen: Cell<boolean>;
+      triggerElement: Cell<HTMLElement>;
+    };
+  };
+}>((element, _: [], { isOpen, triggerElement }) => {
+  // focus first focusable element on the content
+  const tabster = getTabster(window);
+  const firstFocusable = tabster?.focusable.findFirst({
+    container: element,
+  });
+
+  firstFocusable?.focus();
+
+  // listen for "outside" clicks
+  function onDocumentClick(e: MouseEvent) {
+    if (
+      isOpen.current &&
+      e.target &&
+      !element.contains(e.target as HTMLElement) &&
+      !triggerElement.current?.contains(e.target as HTMLElement)
+    ) {
+      isOpen.current = false;
+    }
+  }
+
+  // listen for the escape key
+  function onDocumentKeydown(e: KeyboardEvent) {
+    if (isOpen.current && e.key === "Escape") {
+      isOpen.current = false;
+    }
+  }
+
+  document.addEventListener("click", onDocumentClick);
+  document.addEventListener("keydown", onDocumentKeydown);
+
+  return () => {
+    document.removeEventListener("click", onDocumentClick);
+    document.removeEventListener("keydown", onDocumentKeydown);
+  };
+});
+
+interface PrivateContentSignature {
+  Element: HTMLDivElement;
+  Args: {
+    triggerElement: Cell<HTMLElement>;
+    contentId: string;
+    isOpen: Cell<boolean>;
+    PopoverContent: PopoverBlockParams["Content"];
+  };
+  Blocks: {
+    default: [
+      {
+        Item: WithBoundArgs<typeof Item, "toggle">;
+        LinkItem: WithBoundArgs<typeof LinkItem, "toggle">;
+        Separator: typeof Separator;
+      },
+    ];
+  };
+}
+
+export interface ContentSignature {
+  Element: PrivateContentSignature["Element"];
+  Blocks: PrivateContentSignature["Blocks"];
+}
+
+const Content: TOC<PrivateContentSignature> = <template>
+  {{#if @isOpen.current}}
+    <@PopoverContent
+      id={{@contentId}}
+      role="menu"
+      data-tabster={{TABSTER_CONFIG_CONTENT}}
+      tabindex="0"
+      {{installContent isOpen=@isOpen triggerElement=@triggerElement}}
+      ...attributes
+    >
+      {{yield
+        (hash
+          Item=(component Item toggle=@isOpen.toggle)
+          LinkItem=(component LinkItem toggle=@isOpen.toggle)
+          Separator=Separator
+        )
+      }}
+    </@PopoverContent>
+  {{/if}}
+</template>;
+
+interface PrivateTriggerModifierSignature {
+  Element: HTMLElement;
+  Args: {
+    Named: {
+      triggerElement: Cell<HTMLElement>;
+      isOpen: Cell<boolean>;
+      contentId: string;
+      setReference: PopoverBlockParams["setReference"];
+      stopPropagation?: boolean;
+      preventDefault?: boolean;
+    };
+  };
+}
+
+export interface TriggerModifierSignature {
+  Element: PrivateTriggerModifierSignature["Element"];
+}
+
+const trigger = eModifier<PrivateTriggerModifierSignature>(
+  (
+    element,
+    _: [],
+    { triggerElement, isOpen, contentId, setReference, stopPropagation, preventDefault },
+  ) => {
+    element.setAttribute("aria-haspopup", "menu");
+
+    if (isOpen.current) {
+      element.setAttribute("aria-controls", contentId);
+      element.setAttribute("aria-expanded", "true");
+    } else {
+      element.removeAttribute("aria-controls");
+      element.setAttribute("aria-expanded", "false");
+    }
+
+    setTabsterAttribute(element, TABSTER_CONFIG_TRIGGER);
+
+    const onTriggerClick = (event: MouseEvent) => {
+      if (stopPropagation) {
+        event.stopPropagation();
+      }
+
+      if (preventDefault) {
+        event.preventDefault();
+      }
+
+      isOpen.toggle();
+    };
+
+    element.addEventListener("click", onTriggerClick);
+
+    triggerElement.current = element;
+
+    setReference(element);
+
+    return () => {
+      element.removeEventListener("click", onTriggerClick);
+    };
+  },
+);
+
+interface PrivateTriggerSignature {
+  Element: HTMLButtonElement;
+  Args: {
+    triggerModifier: WithBoundArgs<
+      typeof trigger,
+      "triggerElement" | "contentId" | "isOpen" | "setReference"
+    >;
+    stopPropagation?: boolean;
+    preventDefault?: boolean;
+  };
+  Blocks: { default: [] };
+}
+
+export interface TriggerSignature {
+  Element: PrivateTriggerSignature["Element"];
+  Blocks: PrivateTriggerSignature["Blocks"];
+}
+
+const Trigger: TOC<PrivateTriggerSignature> = <template>
+  <button
+    type="button"
+    {{@triggerModifier stopPropagation=@stopPropagation preventDefault=@preventDefault}}
+    ...attributes
+  >
+    {{yield}}
+  </button>
+</template>;
+
+const IsOpen = () => cell<boolean>(false);
+const TriggerElement = () => cell<HTMLElement>();
+
+export class Menu extends Component<Signature> {
+  contentId = guidFor(this);
+
+  <template>
+    {{#let (IsOpen) (TriggerElement) as |isOpen triggerEl|}}
+      <Popover
+        @flipOptions={{@flipOptions}}
+        @middleware={{@middleware}}
+        @offsetOptions={{@offsetOptions}}
+        @placement={{@placement}}
+        @shiftOptions={{@shiftOptions}}
+        @strategy={{@strategy}}
+        @inline={{@inline}}
+        as |p|
+      >
+        {{#let
+          (modifier
+            trigger
+            triggerElement=triggerEl
+            isOpen=isOpen
+            contentId=this.contentId
+            setReference=p.setReference
+          )
+          as |triggerModifier|
+        }}
+          {{yield
+            (hash
+              trigger=triggerModifier
+              Trigger=(component Trigger triggerModifier=triggerModifier)
+              Content=(component
+                Content
+                PopoverContent=p.Content
+                isOpen=isOpen
+                triggerElement=triggerEl
+                contentId=this.contentId
+              )
+              arrow=p.arrow
+              isOpen=isOpen.current
+            )
+          }}
+        {{/let}}
+      </Popover>
+    {{/let}}
+  </template>
+}
+
+export default Menu;

package/src/components/one-time-password/buttons.gts

@@ -0,0 +1,31 @@
+import { assert } from "@ember/debug";
+import { on } from "@ember/modifier";
+
+import type { TOC } from "@ember/component/template-only";
+
+const reset = (event: Event) => {
+  assert("[BUG]: reset called without an event.target", event.target instanceof HTMLElement);
+
+  const form = event.target.closest("form");
+
+  assert(
+    "Form is missing. Cannot use <Reset> without being contained within a <form>",
+    form instanceof HTMLFormElement,
+  );
+
+  form.reset();
+};
+
+export const Submit: TOC<{
+  Element: HTMLButtonElement;
+  Blocks: { default: [] };
+}> = <template>
+  <button type="submit" ...attributes>Submit</button>
+</template>;
+
+export const Reset: TOC<{
+  Element: HTMLButtonElement;
+  Blocks: { default: [] };
+}> = <template>
+  <button type="button" {{on "click" reset}} ...attributes>{{yield}}</button>
+</template>;