ember-primitives 0.48.2 → 0.50.0

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>;

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

@@ -0,0 +1,198 @@
+import Component from "@glimmer/component";
+import { warn } from "@ember/debug";
+import { isDestroyed, isDestroying } from "@ember/destroyable";
+import { on } from "@ember/modifier";
+import { buildWaiter } from "@ember/test-waiters";
+
+import {
+  autoAdvance,
+  getCollectiveValue,
+  handleNavigation,
+  handlePaste,
+  selectAll,
+} from "./utils.ts";
+
+import type { TOC } from "@ember/component/template-only";
+import type { WithBoundArgs } from "@glint/template";
+
+const DEFAULT_LENGTH = 6;
+
+function labelFor(inputIndex: number, labelFn: undefined | ((index: number) => string)) {
+  if (labelFn) {
+    return labelFn(inputIndex);
+  }
+
+  return `Please enter OTP character ${inputIndex + 1}`;
+}
+
+const waiter = buildWaiter("ember-primitives:OTPInput:handleChange");
+
+const Fields: TOC<{
+  /**
+   * Any attributes passed to this component will be applied to each input.
+   */
+  Element: HTMLInputElement;
+  Args: {
+    fields: unknown[];
+    labelFn: (index: number) => string;
+    handleChange: (event: Event) => void;
+  };
+}> = <template>
+  {{#each @fields as |_field i|}}
+    <label>
+      <span class="ember-primitives__sr-only">{{labelFor i @labelFn}}</span>
+      <input
+        name="code{{i}}"
+        type="text"
+        inputmode="numeric"
+        autocomplete="off"
+        ...attributes
+        {{on "click" selectAll}}
+        {{on "paste" handlePaste}}
+        {{on "input" autoAdvance}}
+        {{on "input" @handleChange}}
+        {{on "keydown" handleNavigation}}
+      />
+    </label>
+  {{/each}}
+</template>;
+
+export class OTPInput extends Component<{
+  /**
+   * The collection of individual OTP inputs are contained by a fieldset.
+   * Applying the `disabled` attribute to this fieldset will disable
+   * all of the inputs, if that's desired.
+   */
+  Element: HTMLFieldSetElement;
+  Args: {
+    /**
+     * How many characters the one-time-password field should be
+     * Defaults to 6
+     */
+    length?: number;
+
+    /**
+     * To Customize the label of the input fields, you may pass a function.
+     * By default, this is `Please enter OTP character ${index + 1}`.
+     */
+    labelFn?: (index: number) => string;
+
+    /**
+     * If passed, this function will be called when the <Input> changes.
+     * All fields are considered one input.
+     */
+    onChange?: (
+      data: {
+        /**
+         * The text from the collective `<Input>`
+         *
+         * `code` _may_ be shorter than `length`
+         * if the user has not finished typing / pasting their code
+         */
+        code: string;
+        /**
+         * will be `true` if `code`'s length matches the passed `@length` or the default of 6
+         */
+        complete: boolean;
+      },
+      /**
+       * The last input event received
+       */
+      event: Event,
+    ) => void;
+  };
+  Blocks: {
+    /**
+     * Optionally, you may control how the Fields are rendered, with proceeding text,
+     * additional attributes added, etc.
+     *
+     * This is how you can add custom validation to each input field.
+     */
+    default?: [fields: WithBoundArgs<typeof Fields, "fields" | "handleChange" | "labelFn">];
+  };
+}> {
+  /**
+   * This is debounced, because we bind to each input,
+   * but only want to emit one change event if someone pastes
+   * multiple characters
+   */
+  handleChange = (event: Event) => {
+    if (!this.args.onChange) return;
+
+    if (!this.#token) {
+      this.#token = waiter.beginAsync();
+    }
+
+    if (this.#frame) {
+      cancelAnimationFrame(this.#frame);
+    }
+
+    // We  use requestAnimationFrame to be friendly to rendering.
+    // We don't know if onChange is going to want to cause paints
+    // (it's also how we debounce, under the assumption that "paste" behavior
+    //  would be fast enough to be quicker than individual frames
+    //   (see logic in autoAdvance)
+    //  )
+    this.#frame = requestAnimationFrame(() => {
+      waiter.endAsync(this.#token);
+
+      if (isDestroyed(this) || isDestroying(this)) return;
+      if (!this.args.onChange) return;
+
+      const value = getCollectiveValue(event.target, this.length);
+
+      if (value === undefined) {
+        warn(`Value could not be determined for the OTP field. was it removed from the DOM?`, {
+          id: "ember-primitives.OTPInput.missing-value",
+        });
+
+        return;
+      }
+
+      this.args.onChange({ code: value, complete: value.length === this.length }, event);
+    });
+  };
+
+  #token: unknown;
+  #frame: number | undefined;
+
+  get length() {
+    return this.args.length ?? DEFAULT_LENGTH;
+  }
+
+  get fields() {
+    // We only need to iterate a number of times,
+    // so we don't care about the actual value or
+    // referential integrity here
+    return new Array<undefined>(this.length);
+  }
+
+  <template>
+    <fieldset ...attributes>
+      {{#let
+        (component Fields fields=this.fields handleChange=this.handleChange labelFn=@labelFn)
+        as |CurriedFields|
+      }}
+        {{#if (has-block)}}
+          {{yield CurriedFields}}
+        {{else}}
+          <CurriedFields />
+        {{/if}}
+      {{/let}}
+
+      <style>
+        .ember-primitives__sr-only {
+          position: absolute;
+          width: 1px;
+          height: 1px;
+          padding: 0;
+          margin: -1px;
+          overflow: hidden;
+          clip: rect(0, 0, 0, 0);
+          white-space: nowrap;
+          border-width: 0;
+        }
+      </style>
+    </fieldset>
+  </template>
+}