ember-primitives 0.48.2 → 0.50.0

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

@@ -0,0 +1,130 @@
+import { assert } from "@ember/debug";
+import { fn, hash } from "@ember/helper";
+import { on } from "@ember/modifier";
+import { buildWaiter } from "@ember/test-waiters";
+
+import { Reset, Submit } from "./buttons.gts";
+import { OTPInput } from "./input.gts";
+
+import type { TOC } from "@ember/component/template-only";
+import type { WithBoundArgs } from "@glint/template";
+
+const waiter = buildWaiter("ember-primitives:OTP:handleAutoSubmitAttempt");
+
+const handleFormSubmit = (submit: (data: { code: string }) => void, event: SubmitEvent) => {
+  event.preventDefault();
+
+  assert(
+    "[BUG]: handleFormSubmit was not attached to a form. Please open an issue.",
+    event.currentTarget instanceof HTMLFormElement,
+  );
+
+  const formData = new FormData(event.currentTarget);
+
+  let code = "";
+
+  for (const [key, value] of formData.entries()) {
+    if (key.startsWith("code")) {
+      // eslint-disable-next-line @typescript-eslint/restrict-plus-operands, @typescript-eslint/no-base-to-string
+      code += value;
+    }
+  }
+
+  submit({
+    code,
+  });
+};
+
+function handleChange(
+  autoSubmit: boolean | undefined,
+  data: { code: string; complete: boolean },
+  event: Event,
+) {
+  if (!autoSubmit) return;
+  if (!data.complete) return;
+
+  assert(
+    "[BUG]: event target is not a known element type",
+    event.target instanceof HTMLElement || event.target instanceof SVGElement,
+  );
+
+  const form = event.target.closest("form");
+
+  assert("[BUG]: Cannot handle event when <OTP> Inputs are not rendered within their <form>", form);
+
+  const token = waiter.beginAsync();
+  const finished = () => {
+    waiter.endAsync(token);
+    form.removeEventListener("submit", finished);
+  };
+
+  form.addEventListener("submit", finished);
+
+  // NOTE: when calling .submit() the submit event handlers are not run
+  form.requestSubmit();
+}
+
+export const OTP: TOC<{
+  /**
+   * The overall OTP Input is in its own form.
+   * Modern UI/UX Patterns usually have this sort of field
+   * as its own page, thus within its own form.
+   *
+   * By default, only the 'submit' event is bound, and is
+   * what calls the `@onSubmit` argument.
+   */
+  Element: HTMLFormElement;
+  Args: {
+    /**
+     * How many characters the one-time-password field should be
+     * Defaults to 6
+     */
+    length?: number;
+
+    /**
+     * The on submit callback will give you the entered
+     * one-time-password code.
+     *
+     * It will be called when the user manually clicks the 'submit'
+     * button or when the full code is pasted and meats the validation
+     * criteria.
+     */
+    onSubmit: (data: { code: string }) => void;
+
+    /**
+     * Whether or not to auto-submit after the code has been pasted
+     * in to the collective "field".  Default is true
+     */
+    autoSubmit?: boolean;
+  };
+  Blocks: {
+    default: [
+      {
+        /**
+         * The collective input field that the OTP code will be typed/pasted in to
+         */
+        Input: WithBoundArgs<typeof OTPInput, "length" | "onChange">;
+        /**
+         * Button with `type="submit"` to submit the form
+         */
+        Submit: typeof Submit;
+        /**
+         * Pre-wired button to reset the form
+         */
+        Reset: typeof Reset;
+      },
+    ];
+  };
+}> = <template>
+  <form {{on "submit" (fn handleFormSubmit @onSubmit)}} ...attributes>
+    {{yield
+      (hash
+        Input=(component
+          OTPInput length=@length onChange=(if @autoSubmit (fn handleChange @autoSubmit))
+        )
+        Submit=Submit
+        Reset=Reset
+      )
+    }}
+  </form>
+</template>;

package/src/components/one-time-password/utils.ts

@@ -0,0 +1,201 @@
+import { assert } from '@ember/debug';
+
+function getInputs(current: HTMLInputElement) {
+  const fieldset = current.closest('fieldset');
+
+  assert('[BUG]: fieldset went missing', fieldset);
+
+  return [...fieldset.querySelectorAll('input')];
+}
+
+function nextInput(current: HTMLInputElement) {
+  const inputs = getInputs(current);
+  const currentIndex = inputs.indexOf(current);
+
+  return inputs[currentIndex + 1];
+}
+
+export function selectAll(event: Event) {
+  const target = event.target;
+
+  assert(`selectAll is only meant for use with input elements`, target instanceof HTMLInputElement);
+
+  target.select();
+}
+
+export function handlePaste(event: Event) {
+  const target = event.target;
+
+  assert(
+    `handlePaste is only meant for use with input elements`,
+    target instanceof HTMLInputElement
+  );
+
+  const clipboardData = (event as ClipboardEvent).clipboardData;
+
+  assert(
+    `Could not get clipboardData while handling the paste event on OTP. Please report this issue on the ember-primitives repo with a reproduction. Thanks!`,
+    clipboardData
+  );
+
+  // This is typically not good to prevent paste.
+  // But because of the UX we're implementing,
+  // we want to split the pasted value across
+  // multiple text fields
+  event.preventDefault();
+
+  const value = clipboardData.getData('Text');
+  const digits = value;
+  let i = 0;
+  let currElement: HTMLInputElement | null = target;
+
+  while (currElement) {
+    currElement.value = digits[i++] || '';
+
+    const next = nextInput(currElement);
+
+    if (next instanceof HTMLInputElement) {
+      currElement = next;
+    } else {
+      break;
+    }
+  }
+
+  // We want to select the first field again
+  // so that if someone holds paste, or
+  // pastes again, they get the same result.
+  target.select();
+}
+
+export function handleNavigation(event: KeyboardEvent) {
+  switch (event.key) {
+    case 'Backspace':
+      return handleBackspace(event);
+    case 'ArrowLeft':
+      return focusLeft(event);
+    case 'ArrowRight':
+      return focusRight(event);
+  }
+}
+
+function focusLeft(event: Pick<Event, 'target'>) {
+  const target = event.target;
+
+  assert(`only allowed on input elements`, target instanceof HTMLInputElement);
+
+  const input = previousInput(target);
+
+  input?.focus();
+  requestAnimationFrame(() => {
+    input?.select();
+  });
+}
+
+function focusRight(event: Pick<Event, 'target'>) {
+  const target = event.target;
+
+  assert(`only allowed on input elements`, target instanceof HTMLInputElement);
+
+  const input = nextInput(target);
+
+  input?.focus();
+  requestAnimationFrame(() => {
+    input?.select();
+  });
+}
+
+const syntheticEvent = new InputEvent('input');
+
+function handleBackspace(event: KeyboardEvent) {
+  if (event.key !== 'Backspace') return;
+
+  /**
+   * We have to prevent default because we
+   * - want to clear the whole field
+   * - have the focus behavior keep up with the key-repeat
+   *   speed of the user's computer
+   */
+  event.preventDefault();
+
+  const target = event.target;
+
+  if (target && 'value' in target) {
+    if (target.value === '') {
+      focusLeft({ target });
+    } else {
+      target.value = '';
+    }
+  }
+
+  target?.dispatchEvent(syntheticEvent);
+}
+
+function previousInput(current: HTMLInputElement) {
+  const inputs = getInputs(current);
+  const currentIndex = inputs.indexOf(current);
+
+  return inputs[currentIndex - 1];
+}
+
+export const autoAdvance = (event: Event) => {
+  assert(
+    '[BUG]: autoAdvance called on non-input element',
+    event.target instanceof HTMLInputElement
+  );
+
+  const value = event.target.value;
+
+  if (value.length === 0) return;
+
+  if (value.length > 0) {
+    if ('data' in event && event.data && typeof event.data === 'string') {
+      event.target.value = event.data;
+    }
+
+    return focusRight(event);
+  }
+};
+
+export function getCollectiveValue(elementTarget: EventTarget | null, length: number) {
+  if (!elementTarget) return;
+
+  assert(
+    `[BUG]: somehow the element target is not HTMLElement`,
+    elementTarget instanceof HTMLElement
+  );
+
+  let parent: null | HTMLElement | ShadowRoot;
+
+  // TODO: should this logic be extracted?
+  //       why is getting the target element within a shadow root hard?
+  if (!(elementTarget instanceof HTMLInputElement)) {
+    if (elementTarget.shadowRoot) {
+      parent = elementTarget.shadowRoot;
+    } else {
+      parent = elementTarget.closest('fieldset');
+    }
+  } else {
+    parent = elementTarget.closest('fieldset');
+  }
+
+  assert(`[BUG]: somehow the input fields were rendered without a parent element`, parent);
+
+  const elements = parent.querySelectorAll('input');
+
+  let value = '';
+
+  assert(
+    `found elements (${elements.length}) do not match length (${length}). Was the same OTP input rendered more than once?`,
+    elements.length === length
+  );
+
+  for (const element of elements) {
+    assert(
+      '[BUG]: how did the queried elements become a non-input element?',
+      element instanceof HTMLInputElement
+    );
+    value += element.value;
+  }
+
+  return value;
+}

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

@@ -0,0 +1,2 @@
+export { OTPInput } from "./one-time-password/input.gts";
+export { OTP } from "./one-time-password/otp.gts";

package/src/components/popover.gts

@@ -0,0 +1,248 @@
+import { hash } from "@ember/helper";
+
+import { arrow } from "@floating-ui/dom";
+import { element } from "ember-element-helper";
+import { modifier as eModifier } from "ember-modifier";
+import { cell } from "ember-resources";
+
+import { FloatingUI } from "../floating-ui.ts";
+import { Portal } from "./portal.gts";
+import { TARGETS } from "./portal-targets.gts";
+
+import type { Signature as FloatingUiComponentSignature } from "../floating-ui/component.ts";
+import type { Signature as HookSignature } from "../floating-ui/modifier.ts";
+import type { TOC } from "@ember/component/template-only";
+import type { ElementContext, Middleware } from "@floating-ui/dom";
+import type { ModifierLike, WithBoundArgs } from "@glint/template";
+
+export interface Signature {
+  Args: {
+    /**
+     * See the Floating UI's [flip docs](https://floating-ui.com/docs/flip) for possible values.
+     *
+     * This argument is forwarded to the `<FloatingUI>` component.
+     */
+    flipOptions?: HookSignature["Args"]["Named"]["flipOptions"];
+    /**
+     * Array of one or more objects to add to Floating UI's list of [middleware](https://floating-ui.com/docs/middleware)
+     *
+     * This argument is forwarded to the `<FloatingUI>` component.
+     */
+    middleware?: HookSignature["Args"]["Named"]["middleware"];
+    /**
+     * See the Floating UI's [offset docs](https://floating-ui.com/docs/offset) for possible values.
+     *
+     * This argument is forwarded to the `<FloatingUI>` component.
+     */
+    offsetOptions?: HookSignature["Args"]["Named"]["offsetOptions"];
+    /**
+     * One of the possible [`placements`](https://floating-ui.com/docs/computeposition#placement). The default is 'bottom'.
+     *
+     * Possible values are
+     * - top
+     * - bottom
+     * - right
+     * - left
+     *
+     * And may optionally have `-start` or `-end` added to adjust position along the side.
+     *
+     * This argument is forwarded to the `<FloatingUI>` component.
+     */
+    placement?: `${"top" | "bottom" | "left" | "right"}${"" | "-start" | "-end"}`;
+    /**
+     * See the Floating UI's [shift docs](https://floating-ui.com/docs/shift) for possible values.
+     *
+     * This argument is forwarded to the `<FloatingUI>` component.
+     */
+    shiftOptions?: HookSignature["Args"]["Named"]["shiftOptions"];
+    /**
+     * CSS position property, either `fixed` or `absolute`.
+     *
+     * Pros and cons of each strategy are explained on [Floating UI's Docs](https://floating-ui.com/docs/computePosition#strategy)
+     *
+     * This argument is forwarded to the `<FloatingUI>` component.
+     */
+    strategy?: HookSignature["Args"]["Named"]["strategy"];
+
+    /**
+     * By default, the popover is portaled.
+     * If you don't control your CSS, and the positioning of the popover content
+     * is misbehaving, you may pass "@inline={{true}}" to opt out of portalling.
+     *
+     * Inline may also be useful in nested menus, where you know exactly how the nesting occurs
+     */
+    inline?: boolean;
+  };
+  Blocks: {
+    default: [
+      {
+        reference: FloatingUiComponentSignature["Blocks"]["default"][0];
+        setReference: FloatingUiComponentSignature["Blocks"]["default"][2]["setReference"];
+        Content: WithBoundArgs<typeof Content, "floating">;
+        data: FloatingUiComponentSignature["Blocks"]["default"][2]["data"];
+        arrow: ModifierLike<{ Element: HTMLElement }>;
+      },
+    ];
+  };
+}
+
+function getElementTag(tagName: undefined | string) {
+  return tagName || "div";
+}
+
+/**
+ * Allows lazy evaluation of the portal target (do nothing until rendered)
+ * This is useful because the algorithm for finding the portal target isn't cheap.
+ */
+const Content: TOC<{
+  Element: HTMLDivElement;
+  Args: {
+    floating: ModifierLike<{ Element: HTMLElement }>;
+    inline?: boolean;
+    /**
+     * By default the popover content is wrapped in a div.
+     * You may change this by supplying the name of an element here.
+     *
+     * For example:
+     * ```gjs
+     * <Popover as |p|>
+     *  <p.Content @as="dialog">
+     *    this is now focus trapped
+     *  </p.Content>
+     * </Popover>
+     * ```
+     */
+    as?: string;
+  };
+  Blocks: { default: [] };
+}> = <template>
+  {{#let (element (getElementTag @as)) as |El|}}
+    {{#if @inline}}
+      {{! @glint-ignore
+            https://github.com/tildeio/ember-element-helper/issues/91
+            https://github.com/typed-ember/glint/issues/610
+      }}
+      <El {{@floating}} ...attributes>
+        {{yield}}
+      </El>
+    {{else}}
+      <Portal @to={{TARGETS.popover}}>
+        {{! @glint-ignore
+              https://github.com/tildeio/ember-element-helper/issues/91
+              https://github.com/typed-ember/glint/issues/610
+        }}
+        <El {{@floating}} ...attributes>
+          {{yield}}
+        </El>
+      </Portal>
+    {{/if}}
+  {{/let}}
+</template>;
+
+interface AttachArrowSignature {
+  Element: HTMLElement;
+  Args: {
+    Named: {
+      arrowElement: ReturnType<typeof ArrowElement>;
+      data:
+        | undefined
+        | {
+            placement: string;
+            middlewareData?: {
+              arrow?: { x?: number; y?: number };
+            };
+          };
+    };
+  };
+}
+
+const arrowSides = {
+  top: "bottom",
+  right: "left",
+  bottom: "top",
+  left: "right",
+};
+
+type Direction = "top" | "bottom" | "left" | "right";
+type Placement = `${Direction}${"" | "-start" | "-end"}`;
+
+const attachArrow: ModifierLike<AttachArrowSignature> = eModifier<AttachArrowSignature>(
+  (element, _: [], named) => {
+    if (element === named.arrowElement.current) {
+      if (!named.data) return;
+      if (!named.data.middlewareData) return;
+
+      const { arrow } = named.data.middlewareData;
+      const { placement } = named.data;
+
+      if (!arrow) return;
+      if (!placement) return;
+
+      const { x: arrowX, y: arrowY } = arrow;
+      const otherSide = (placement as Placement).split("-")[0] as Direction;
+      const staticSide = arrowSides[otherSide];
+
+      Object.assign(named.arrowElement.current.style, {
+        left: arrowX != null ? `${arrowX}px` : "",
+        top: arrowY != null ? `${arrowY}px` : "",
+        right: "",
+        bottom: "",
+        [staticSide]: "-4px",
+      });
+
+      return;
+    }
+
+    void (async () => {
+      await Promise.resolve();
+      named.arrowElement.set(element);
+    })();
+  },
+);
+
+const ArrowElement: () => ReturnType<typeof cell<HTMLElement>> = () => cell<HTMLElement>();
+
+function maybeAddArrow(middleware: Middleware[] | undefined, element: Element | undefined) {
+  const result = [...(middleware || [])];
+
+  if (element) {
+    result.push(arrow({ element }));
+  }
+
+  return result;
+}
+
+function flipOptions(options: HookSignature["Args"]["Named"]["flipOptions"]) {
+  return {
+    elementContext: "reference" as ElementContext,
+    ...options,
+  };
+}
+
+export const Popover: TOC<Signature> = <template>
+  {{#let (ArrowElement) as |arrowElement|}}
+    <FloatingUI
+      @placement={{@placement}}
+      @strategy={{@strategy}}
+      @middleware={{maybeAddArrow @middleware arrowElement.current}}
+      @flipOptions={{flipOptions @flipOptions}}
+      @shiftOptions={{@shiftOptions}}
+      @offsetOptions={{@offsetOptions}}
+      as |reference floating extra|
+    >
+      {{#let (modifier attachArrow arrowElement=arrowElement data=extra.data) as |arrow|}}
+        {{yield
+          (hash
+            reference=reference
+            setReference=extra.setReference
+            Content=(component Content floating=floating inline=@inline)
+            data=extra.data
+            arrow=arrow
+          )
+        }}
+      {{/let}}
+    </FloatingUI>
+  {{/let}}
+</template>;
+
+export default Popover;