ember-primitives 0.61.1 → 0.62.0

package/dist/components/command-palette.js

@@ -0,0 +1,363 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { assert } from '@ember/debug';
+import { registerDestructor } from '@ember/destroyable';
+import { hash } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { guidFor } from '@ember/object/internals';
+import { modifier } from 'ember-modifier';
+import { getTabster } from 'tabster';
+import { localCopy } from 'tracked-toolbox';
+import { Link } from './link.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import templateOnly from '@ember/component/template-only';
+import { g, i } from 'decorator-transforms/runtime';
+
+/**
+ * References:
+ * - https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
+ * - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-activedescendant
+ *
+ * A combobox (the input) over a listbox (the results).
+ *
+ * Focus never leaves the input; `aria-activedescendant` is what moves. This is
+ * why there is no tabster mover here: the arrow keys must not move focus, or
+ * the user stops being able to type. Tabster still does the finding.
+ *
+ * Filtering is not this component's job. Render the results you want, in the
+ * order you want.
+ */
+const OPTION = '[role="option"]';
+function isMac() {
+  return navigator.userAgent.includes("Mac OS");
+}
+/**
+ * Matches a hotkey description, such as `"mod+k"`, against a keyboard event.
+ *
+ * `mod` is <kbd>Meta</kbd> on macOS and <kbd>Control</kbd> everywhere else,
+ * the same normalization `<KeyCombo>` uses to render one.
+ */
+function matches(event, hotkey) {
+  const parts = hotkey.toLowerCase().split("+").map(part => part.trim());
+  const key = parts.pop();
+  const modifiers = new Set(parts);
+  const mod = modifiers.has("mod");
+  return event.key.toLowerCase() === key && event.metaKey === (modifiers.has("meta") || mod && isMac()) && event.ctrlKey === (modifiers.has("ctrl") || mod && !isMac()) && event.altKey === modifiers.has("alt") && event.shiftKey === modifiers.has("shift");
+}
+class Item extends Component {
+  id = guidFor(this);
+  get isActive() {
+    return this.args.activeId === this.id;
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<div id={{this.id}} role=\"option\" tabindex=\"-1\" aria-selected=\"{{this.isActive}}\" data-active=\"{{this.isActive}}\" ...attributes>\n  {{yield}}\n</div>", {
+      strictMode: true
+    }), this);
+  }
+}
+/**
+ * An option that is also a link. <kbd>Enter</kbd> dispatches a real click on
+ * the anchor, so the router navigates exactly as it would have for a mouse.
+ */
+class LinkItem extends Component {
+  id = guidFor(this);
+  get isActive() {
+    return this.args.activeId === this.id;
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<Link id={{this.id}} role=\"option\" tabindex=\"-1\" aria-selected=\"{{this.isActive}}\" data-active=\"{{this.isActive}}\" @href={{@href}} @includeActiveQueryParams={{@includeActiveQueryParams}} @activeOnSubPaths={{@activeOnSubPaths}} ...attributes>\n  {{yield}}\n</Link>", {
+      strictMode: true,
+      scope: () => ({
+        Link
+      })
+    }), this);
+  }
+}
+/**
+ * The pointer is handled here rather than on each option, and on
+ * `pointermove` rather than `pointerenter`, so that an option under a resting
+ * cursor re-activates when the cursor moves after the keyboard has activated
+ * something else. Native menus behave this way.
+ *
+ * `:hover` cannot do this job. There is one active option, it is what
+ * <kbd>Enter</kbd> chooses, and it is what `aria-activedescendant` reports.
+ * Hovering while the keyboard has a different option active would light two
+ * rows and tell a screen reader about neither, so the pointer sets the same
+ * state the arrow keys do instead of painting its own.
+ */
+const List = setComponentTemplate(precompileTemplate("<div id={{@id}} role=\"listbox\" {{@register}} {{on \"click\" @onClick}} {{on \"pointermove\" @onPointerMove}} ...attributes>\n  {{yield (hash Item=@Item LinkItem=@LinkItem)}}\n</div>", {
+  strictMode: true,
+  scope: () => ({
+    on,
+    hash
+  })
+}), templateOnly());
+const Input = setComponentTemplate(precompileTemplate("<input type=\"text\" role=\"combobox\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" aria-autocomplete=\"list\" aria-expanded=\"true\" aria-controls={{@listId}} aria-activedescendant={{@activeId}} value={{@query}} {{on \"input\" @onInput}} {{on \"keydown\" @onKeydown}} ...attributes />", {
+  strictMode: true,
+  scope: () => ({
+    on
+  })
+}), templateOnly());
+/**
+ * One entry in the default layout. A bare string is the label.
+ */
+
+const labelOf = item => typeof item === "string" ? item : item.label;
+const descriptionOf = item => typeof item === "string" ? undefined : item.description;
+const iconOf = item => typeof item === "string" ? undefined : item.icon;
+/**
+ * The default layout: hand it the rows and it renders the whole palette.
+ */
+
+/**
+ * The composed form: you render the rows.
+ */
+
+class CommandPalette extends Component {
+  listId = guidFor(this);
+  /**
+  * Held rather than looked up by id, because `document.getElementById` does
+  * not cross into a shadow root. A plain field: it is read when a key is
+  * pressed, never while rendering.
+  */
+  #list;
+  /**
+  * Which row is active, as an id rather than an element or a focus state.
+  *
+  * This is unusual for this library, where keyboard navigation means tabster
+  * moving focus. A combobox cannot do that: focus has to stay in the
+  * `<input>` or the reader stops being able to type. So nothing among the
+  * rows is ever focused, there is no focus for tabster to track, and what
+  * moves instead is `aria-activedescendant` -- which is an id, on the input,
+  * pointing at a row. Holding the id is holding exactly what that attribute
+  * needs.
+  *
+  * Tabster still does the finding, in `#find`. This only remembers which of
+  * the rows it landed on.
+  */
+  static {
+    g(this.prototype, "activeId", [tracked]);
+  }
+  #activeId = (i(this, "activeId"), void 0);
+  static {
+    g(this.prototype, "_query", [localCopy("args.query")]);
+  }
+  #_query = (i(this, "_query"), void 0); // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+  constructor(owner, args) {
+    super(owner, args);
+    document.addEventListener("keydown", this.handleHotkey);
+    registerDestructor(this, () => {
+      document.removeEventListener("keydown", this.handleHotkey);
+    });
+  }
+  get placeholder() {
+    return this.args.placeholder ?? "Search";
+  }
+  /**
+  * Whether `@items` was passed, not whether it has anything in it: an empty
+  * array is falsy in a template, and a palette whose results have gone away
+  * still has to render the input they would be typed into.
+  */
+  get hasItems() {
+    return this.args.items !== undefined;
+  }
+  /**
+  * Each form is called the way its own type describes: with the entry that
+  * was chosen, or with the event alone when the rows are the caller's.
+  *
+  * `@items` is what tells the two apart, and it is `never` on the form that
+  * does not take it, so testing it narrows `this.args` to one of them.
+  */
+  #select(option, event) {
+    if (this.args.items === undefined) {
+      this.args.onSelect?.(event);
+      return;
+    }
+    const entry = this.#entryFor(option, this.args.items);
+    assert("[BUG] a row of the default layout was chosen, but is not among `@items`", entry !== undefined);
+    this.args.onSelect?.(entry, event);
+  }
+  /**
+  * `@items` and a block are two ways to say the same thing, and saying both
+  * means one of them is being quietly ignored.
+  */
+  get bothGiven() {
+    assert("<CommandPalette> was given both `@items` and a block. Use one: `@items` renders the rows for you, a block renders them yourself.", false);
+    return "";
+  }
+  get query() {
+    return this._query ?? "";
+  }
+  set query(value) {
+    this._query = value;
+  }
+  registerList = modifier(element => {
+    this.#list = element;
+  });
+  get #activeElement() {
+    const {
+      activeId
+    } = this;
+    if (!activeId) return undefined;
+    // scoped to the listbox, so this works inside a shadow root
+    return this.#list?.querySelector(`[id="${activeId}"]`) ?? undefined;
+  }
+  /**
+  * The next, previous, first or last option.
+  *
+  * Tabster does the finding, so hidden and inert options are skipped by the
+  * same rules as everything else that moves around the page. It has to be
+  * set up by the app, the same way `<Menu>` requires it.
+  */
+  #find(direction) {
+    const container = this.#list;
+    if (!container) return undefined;
+    const tabster = getTabster(window);
+    assert("<CommandPalette> needs tabster, which the application sets up. " + "Call `setupTabster` from 'ember-primitives/tabster' in your application route. " + "See https://tabster.io/docs/core", tabster);
+    const options = {
+      container,
+      includeProgrammaticallyFocusable: true
+    };
+    const currentElement = this.#activeElement;
+    const {
+      focusable
+    } = tabster;
+    if (direction === "first") return focusable.findFirst(options);
+    if (direction === "last") return focusable.findLast(options);
+    if (!currentElement) {
+      return direction === "next" ? focusable.findFirst(options) : focusable.findLast(options);
+    }
+    const found = direction === "next" ? focusable.findNext({
+      ...options,
+      currentElement
+    }) : focusable.findPrev({
+      ...options,
+      currentElement
+    });
+    // wrap, rather than stop, at either end
+    return found ?? (direction === "next" ? focusable.findFirst(options) : focusable.findLast(options));
+  }
+  #activate(element) {
+    if (!element) return;
+    this.activeId = element.id;
+    element.scrollIntoView({
+      block: "nearest"
+    });
+  }
+  setQuery = query => {
+    this.query = query;
+    // the results are about to be somebody else's; whatever was active is not
+    this.activeId = undefined;
+    this.args.onQueryChange?.(query);
+  };
+  handleInput = event => {
+    const {
+      target
+    } = event;
+    assert("[BUG] input event without an input", target instanceof HTMLInputElement);
+    this.setQuery(target.value);
+  };
+  handlePointerMove = event => {
+    const {
+      target
+    } = event;
+    if (!(target instanceof Element)) return;
+    const option = target.closest(OPTION);
+    if (option) {
+      this.activeId = option.id;
+    }
+  };
+  handleKeydown = event => {
+    // mid-composition (IME), the arrow keys belong to the candidate window
+    if (event.isComposing) return;
+    switch (event.key) {
+      case "ArrowDown":
+        {
+          event.preventDefault();
+          this.#activate(this.#find("next"));
+          return;
+        }
+      case "ArrowUp":
+        {
+          event.preventDefault();
+          this.#activate(this.#find("prev"));
+          return;
+        }
+      case "Enter":
+        {
+          // nothing arrowed yet chooses the first result, so a reader can type
+          // and press Enter without leaving the keys they were already on
+          const active = this.#activeElement ?? this.#find("first");
+          if (!active) return;
+          event.preventDefault();
+          // a real click, so one handler covers the mouse and the keyboard, and
+          // an anchor navigates the way the browser would have
+          active.click();
+          return;
+        }
+    }
+  };
+  handleHotkey = event => {
+    const {
+      hotkey,
+      onOpen
+    } = this.args;
+    if (!hotkey || !onOpen) return;
+    if (!matches(event, hotkey)) return;
+    event.preventDefault();
+    onOpen();
+  };
+  /**
+  * The entry a row came from, for the default layout. Rows are rendered one
+  * per entry and in order, so a row's position among the options is its
+  * entry's position in `@items`. A block form has no entries, and gets
+  * `undefined`.
+  */
+  #entryFor(option, items) {
+    const options = this.#list?.querySelectorAll(OPTION);
+    for (let i = 0; i < (options?.length ?? 0); i++) {
+      if (options?.[i] === option) return items[i];
+    }
+    return undefined;
+  }
+  /**
+  * Choosing is delegated, so a row is markup rather than a listener, and
+  * `@onSelect` is reached the same way however the rows were rendered.
+  */
+  handleClick = event => {
+    const {
+      target
+    } = event;
+    if (!(target instanceof Element)) return;
+    const option = target.closest(OPTION);
+    if (!option) return;
+    /**
+    * A modified click on a link opens it somewhere else and leaves the
+    * reader where they are, so the palette stays where they left it.
+    */
+    if (option.closest("a")) {
+      if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+      if (event.button !== 0) return;
+    }
+    this.#select(option, event);
+  };
+  static {
+    setComponentTemplate(precompileTemplate("{{#let (component Input listId=this.listId activeId=this.activeId query=this.query onInput=this.handleInput onKeydown=this.handleKeydown) (component List id=this.listId register=this.registerList onPointerMove=this.handlePointerMove onClick=this.handleClick Item=(component Item activeId=this.activeId) LinkItem=(component LinkItem activeId=this.activeId)) as |PaletteInput PaletteList|}}\n  {{#if this.hasItems}}\n    {{#if (has-block)}}{{this.bothGiven}}{{/if}}\n\n    <PaletteInput class=\"ember-primitives__command-palette__input\" placeholder={{this.placeholder}} aria-label={{this.placeholder}} />\n\n    <PaletteList class=\"ember-primitives__command-palette__list\" as |l|>\n      {{#each @items as |item|}}\n        <l.Item class=\"ember-primitives__command-palette__item\">\n          {{#if (iconOf item)}}\n            <span class=\"ember-primitives__command-palette__icon\">{{iconOf item}}</span>\n          {{/if}}\n          <span class=\"ember-primitives__command-palette__label\">{{labelOf item}}</span>\n          {{#if (descriptionOf item)}}\n            <span class=\"ember-primitives__command-palette__description\">{{descriptionOf item}}</span>\n          {{/if}}\n        </l.Item>\n      {{/each}}\n    </PaletteList>\n  {{else}}\n    {{yield (hash query=this.query setQuery=this.setQuery Input=PaletteInput List=PaletteList)}}\n  {{/if}}\n{{/let}}", {
+      strictMode: true,
+      scope: () => ({
+        Input,
+        List,
+        Item,
+        LinkItem,
+        iconOf,
+        labelOf,
+        descriptionOf,
+        hash
+      })
+    }), this);
+  }
+}
+
+export { CommandPalette, CommandPalette as default };
+//# sourceMappingURL=command-palette.js.map

package/dist/components/command-palette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette.js","sources":["../../src/components/command-palette.gts"],"sourcesContent":["/**\n * References:\n * - https://www.w3.org/WAI/ARIA/apg/patterns/combobox/\n * - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-activedescendant\n *\n * A combobox (the input) over a listbox (the results).\n *\n * Focus never leaves the input; `aria-activedescendant` is what moves. This is\n * why there is no tabster mover here: the arrow keys must not move focus, or\n * the user stops being able to type. Tabster still does the finding.\n *\n * Filtering is not this component's job. Render the results you want, in the\n * order you want.\n */\nimport Component from \"@glimmer/component\";\nimport { tracked } from \"@glimmer/tracking\";\nimport { assert } from \"@ember/debug\";\nimport { registerDestructor } from \"@ember/destroyable\";\nimport { hash } from \"@ember/helper\";\nimport { on } from \"@ember/modifier\";\nimport { guidFor } from \"@ember/object/internals\";\n\nimport { modifier as eModifier } from \"ember-modifier\";\nimport { getTabster } from \"tabster\";\n// temp\n//  https://github.com/tracked-tools/tracked-toolbox/issues/38\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-expect-error\nimport { localCopy } from \"tracked-toolbox\";\n\nimport { Link, type Signature as LinkSignature } from \"./link.gts\";\n\nimport type { TOC } from \"@ember/component/template-only\";\nimport type Owner from \"@ember/owner\";\nimport type { ModifierLike, WithBoundArgs } from \"@glint/template\";\n\nconst OPTION = '[role=\"option\"]';\n\nfunction isMac() {\n  return navigator.userAgent.includes(\"Mac OS\");\n}\n\n/**\n * Matches a hotkey description, such as `\"mod+k\"`, against a keyboard event.\n *\n * `mod` is <kbd>Meta</kbd> on macOS and <kbd>Control</kbd> everywhere else,\n * the same normalization `<KeyCombo>` uses to render one.\n */\nfunction matches(event: KeyboardEvent, hotkey: string) {\n  const parts = hotkey\n    .toLowerCase()\n    .split(\"+\")\n    .map((part) => part.trim());\n  const key = parts.pop();\n  const modifiers = new Set(parts);\n  const mod = modifiers.has(\"mod\");\n\n  return (\n    event.key.toLowerCase() === key &&\n    event.metaKey === (modifiers.has(\"meta\") || (mod && isMac())) &&\n    event.ctrlKey === (modifiers.has(\"ctrl\") || (mod && !isMac())) &&\n    event.altKey === modifiers.has(\"alt\") &&\n    event.shiftKey === modifiers.has(\"shift\")\n  );\n}\n\nexport interface ItemSignature {\n  Element: HTMLDivElement;\n  Blocks: { default: [] };\n}\n\ninterface PrivateItemSignature {\n  Element: ItemSignature[\"Element\"];\n  Args: { activeId: string | undefined };\n  Blocks: ItemSignature[\"Blocks\"];\n}\n\nclass Item extends Component<PrivateItemSignature> {\n  id = guidFor(this);\n\n  get isActive() {\n    return this.args.activeId === this.id;\n  }\n\n  <template>\n    <div\n      id={{this.id}}\n      role=\"option\"\n      tabindex=\"-1\"\n      aria-selected=\"{{this.isActive}}\"\n      data-active=\"{{this.isActive}}\"\n      ...attributes\n    >\n      {{yield}}\n    </div>\n  </template>\n}\n\nexport interface LinkItemSignature {\n  Element: HTMLAnchorElement;\n  Args: LinkSignature[\"Args\"];\n  Blocks: { default: [] };\n}\n\ninterface PrivateLinkItemSignature {\n  Element: LinkItemSignature[\"Element\"];\n  Args: LinkItemSignature[\"Args\"] & { activeId: string | undefined };\n  Blocks: LinkItemSignature[\"Blocks\"];\n}\n\n/**\n * An option that is also a link. <kbd>Enter</kbd> dispatches a real click on\n * the anchor, so the router navigates exactly as it would have for a mouse.\n */\nclass LinkItem extends Component<PrivateLinkItemSignature> {\n  id = guidFor(this);\n\n  get isActive() {\n    return this.args.activeId === this.id;\n  }\n\n  <template>\n    <Link\n      id={{this.id}}\n      role=\"option\"\n      tabindex=\"-1\"\n      aria-selected=\"{{this.isActive}}\"\n      data-active=\"{{this.isActive}}\"\n      @href={{@href}}\n      @includeActiveQueryParams={{@includeActiveQueryParams}}\n      @activeOnSubPaths={{@activeOnSubPaths}}\n      ...attributes\n    >\n      {{yield}}\n    </Link>\n  </template>\n}\n\nexport interface ListSignature {\n  Element: HTMLDivElement;\n  Blocks: {\n    default: [\n      {\n        Item: WithBoundArgs<typeof Item, \"activeId\">;\n        LinkItem: WithBoundArgs<typeof LinkItem, \"activeId\">;\n      },\n    ];\n  };\n}\n\ninterface PrivateListSignature {\n  Element: ListSignature[\"Element\"];\n  Args: {\n    id: string;\n    register: ModifierLike<{ Element: HTMLElement }>;\n    onPointerMove: (event: PointerEvent) => void;\n    onClick: (event: MouseEvent) => void;\n    Item: ListSignature[\"Blocks\"][\"default\"][0][\"Item\"];\n    LinkItem: ListSignature[\"Blocks\"][\"default\"][0][\"LinkItem\"];\n  };\n  Blocks: ListSignature[\"Blocks\"];\n}\n\n/**\n * The pointer is handled here rather than on each option, and on\n * `pointermove` rather than `pointerenter`, so that an option under a resting\n * cursor re-activates when the cursor moves after the keyboard has activated\n * something else. Native menus behave this way.\n *\n * `:hover` cannot do this job. There is one active option, it is what\n * <kbd>Enter</kbd> chooses, and it is what `aria-activedescendant` reports.\n * Hovering while the keyboard has a different option active would light two\n * rows and tell a screen reader about neither, so the pointer sets the same\n * state the arrow keys do instead of painting its own.\n */\nconst List: TOC<PrivateListSignature> = <template>\n  <div\n    id={{@id}}\n    role=\"listbox\"\n    {{@register}}\n    {{on \"click\" @onClick}}\n    {{on \"pointermove\" @onPointerMove}}\n    ...attributes\n  >\n    {{yield (hash Item=@Item LinkItem=@LinkItem)}}\n  </div>\n</template>;\n\nexport interface InputSignature {\n  Element: HTMLInputElement;\n}\n\ninterface PrivateInputSignature {\n  Element: InputSignature[\"Element\"];\n  Args: {\n    listId: string;\n    activeId: string | undefined;\n    query: string;\n    onInput: (event: Event) => void;\n    onKeydown: (event: KeyboardEvent) => void;\n  };\n}\n\nconst Input: TOC<PrivateInputSignature> = <template>\n  <input\n    type=\"text\"\n    role=\"combobox\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    aria-autocomplete=\"list\"\n    aria-expanded=\"true\"\n    aria-controls={{@listId}}\n    aria-activedescendant={{@activeId}}\n    value={{@query}}\n    {{on \"input\" @onInput}}\n    {{on \"keydown\" @onKeydown}}\n    ...attributes\n  />\n</template>;\n\n/**\n * One entry in the default layout. A bare string is the label.\n */\nexport type PaletteItem =\n  | string\n  | {\n      label: string;\n      description?: string;\n      icon?: string;\n    };\n\nconst labelOf = (item: PaletteItem) => (typeof item === \"string\" ? item : item.label);\nconst descriptionOf = (item: PaletteItem) =>\n  typeof item === \"string\" ? undefined : item.description;\nconst iconOf = (item: PaletteItem) => (typeof item === \"string\" ? undefined : item.icon);\n\n/**\n * The default layout: hand it the rows and it renders the whole palette.\n */\nexport interface ItemsSignature {\n  Args: {\n    /**\n     * The text in the input.\n     *\n     * The state is managed internally, so this does not need to be a\n     * maintained value, but whenever it changes, the input reflects it. Pair\n     * it with `@onQueryChange` to keep the query somewhere else, such as a\n     * query param.\n     */\n    query?: string;\n    /**\n     * Called with the input's text every time it changes.\n     */\n    onQueryChange?: (query: string) => void;\n    /**\n     * A key combination that calls `@onOpen` from anywhere on the page, such\n     * as `\"mod+k\"`. `mod` is <kbd>Meta</kbd> on macOS and <kbd>Control</kbd>\n     * everywhere else.\n     *\n     * Needs `@onOpen` to have anything to do. No listener is installed\n     * without both.\n     */\n    hotkey?: string;\n    /**\n     * Called when `@hotkey` is pressed. Hand it the `open` of whatever the\n     * palette is in:\n     *\n     * ```hbs\n     * <CommandPalette @hotkey=\"mod+k\" @onOpen={{d.open}} />\n     * ```\n     */\n    onOpen?: () => void;\n    /**\n     * The entries to render. Each is a string, or an object with a `label`\n     * and optionally a `description` and an `icon`.\n     */\n    items: PaletteItem[];\n    /**\n     * Called every time a row is chosen, with the entry that was chosen.\n     * This is where a modal palette closes itself:\n     *\n     * ```hbs\n     * <Dialog as |d|>\n     *   <CommandPalette @items={{this.commands}} @onSelect={{d.close}} />\n     * </Dialog>\n     * ```\n     *\n     * Also where a row's own action goes, since the entry it is handed says\n     * which row was chosen.\n     */\n    onSelect?: (item: PaletteItem, event: Event) => void;\n    /**\n     * The input's placeholder, and its accessible name.\n     *\n     * Defaults to \"Search\".\n     */\n    placeholder?: string;\n  };\n  /**\n   * No blocks: this form renders the rows. Passing one is an error.\n   */\n  Blocks: Record<string, never>;\n}\n\n/**\n * The composed form: you render the rows.\n */\nexport interface BlockSignature {\n  Args: {\n    /**\n     * The text in the input.\n     *\n     * The state is managed internally, so this does not need to be a\n     * maintained value, but whenever it changes, the input reflects it. Pair\n     * it with `@onQueryChange` to keep the query somewhere else, such as a\n     * query param.\n     */\n    query?: string;\n    /**\n     * Called with the input's text every time it changes.\n     */\n    onQueryChange?: (query: string) => void;\n    /**\n     * A key combination that calls `@onOpen` from anywhere on the page, such\n     * as `\"mod+k\"`. `mod` is <kbd>Meta</kbd> on macOS and <kbd>Control</kbd>\n     * everywhere else.\n     *\n     * Needs `@onOpen` to have anything to do. No listener is installed\n     * without both.\n     */\n    hotkey?: string;\n    /**\n     * Called when `@hotkey` is pressed. Hand it the `open` of whatever the\n     * palette is in:\n     *\n     * ```hbs\n     * <CommandPalette @hotkey=\"mod+k\" @onOpen={{d.open}} />\n     * ```\n     */\n    onOpen?: () => void;\n    /**\n     * Not for this form: the rows come from the block.\n     */\n    items?: never;\n    /**\n     * Not for this form: set it on `Input` yourself.\n     */\n    placeholder?: never;\n    /**\n     * Called every time a row is chosen. Hand it `close` to make a modal\n     * palette close itself.\n     *\n     * The rows are yours here, so there is no entry to hand back. Which row\n     * was chosen is `event.target.closest(\"[role=option]\")`.\n     */\n    onSelect?: (event: Event) => void;\n  };\n  Blocks: {\n    default: [\n      {\n        /**\n         * The current text of the input.\n         */\n        query: string;\n        /**\n         * Sets the text of the input, for a \"clear\" button or a suggestion.\n         */\n        setQuery: (query: string) => void;\n        /**\n         * The `<input>`, wired as a combobox over `List`.\n         */\n        Input: WithBoundArgs<\n          typeof Input,\n          \"listId\" | \"activeId\" | \"query\" | \"onInput\" | \"onKeydown\"\n        >;\n        /**\n         * The listbox the rows are rendered into.\n         */\n        List: WithBoundArgs<\n          typeof List,\n          \"id\" | \"register\" | \"onPointerMove\" | \"onClick\" | \"Item\" | \"LinkItem\"\n        >;\n      },\n    ];\n  };\n}\n\nexport type Signature = ItemsSignature | BlockSignature;\n\nexport class CommandPalette extends Component<Signature> {\n  listId = guidFor(this);\n\n  /**\n   * Held rather than looked up by id, because `document.getElementById` does\n   * not cross into a shadow root. A plain field: it is read when a key is\n   * pressed, never while rendering.\n   */\n  #list: HTMLElement | undefined;\n\n  /**\n   * Which row is active, as an id rather than an element or a focus state.\n   *\n   * This is unusual for this library, where keyboard navigation means tabster\n   * moving focus. A combobox cannot do that: focus has to stay in the\n   * `<input>` or the reader stops being able to type. So nothing among the\n   * rows is ever focused, there is no focus for tabster to track, and what\n   * moves instead is `aria-activedescendant` -- which is an id, on the input,\n   * pointing at a row. Holding the id is holding exactly what that attribute\n   * needs.\n   *\n   * Tabster still does the finding, in `#find`. This only remembers which of\n   * the rows it landed on.\n   */\n  @tracked activeId: string | undefined;\n\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n  @localCopy(\"args.query\") declare _query: string;\n\n  constructor(owner: Owner, args: Signature[\"Args\"]) {\n    super(owner, args);\n\n    document.addEventListener(\"keydown\", this.handleHotkey);\n\n    registerDestructor(this, () => {\n      document.removeEventListener(\"keydown\", this.handleHotkey);\n    });\n  }\n\n  get placeholder() {\n    return this.args.placeholder ?? \"Search\";\n  }\n\n  /**\n   * Whether `@items` was passed, not whether it has anything in it: an empty\n   * array is falsy in a template, and a palette whose results have gone away\n   * still has to render the input they would be typed into.\n   */\n  get hasItems() {\n    return this.args.items !== undefined;\n  }\n\n  /**\n   * Each form is called the way its own type describes: with the entry that\n   * was chosen, or with the event alone when the rows are the caller's.\n   *\n   * `@items` is what tells the two apart, and it is `never` on the form that\n   * does not take it, so testing it narrows `this.args` to one of them.\n   */\n  #select(option: HTMLElement, event: Event) {\n    if (this.args.items === undefined) {\n      this.args.onSelect?.(event);\n\n      return;\n    }\n\n    const entry = this.#entryFor(option, this.args.items);\n\n    assert(\n      \"[BUG] a row of the default layout was chosen, but is not among `@items`\",\n      entry !== undefined,\n    );\n\n    this.args.onSelect?.(entry, event);\n  }\n\n  /**\n   * `@items` and a block are two ways to say the same thing, and saying both\n   * means one of them is being quietly ignored.\n   */\n  get bothGiven() {\n    assert(\n      \"<CommandPalette> was given both `@items` and a block. Use one: `@items` renders the rows for you, a block renders them yourself.\",\n      false,\n    );\n\n    return \"\";\n  }\n\n  get query() {\n    return this._query ?? \"\";\n  }\n  set query(value: string) {\n    this._query = value;\n  }\n\n  registerList = eModifier((element: HTMLElement) => {\n    this.#list = element;\n  });\n\n  get #activeElement() {\n    const { activeId } = this;\n\n    if (!activeId) return undefined;\n\n    // scoped to the listbox, so this works inside a shadow root\n    return this.#list?.querySelector<HTMLElement>(`[id=\"${activeId}\"]`) ?? undefined;\n  }\n\n  /**\n   * The next, previous, first or last option.\n   *\n   * Tabster does the finding, so hidden and inert options are skipped by the\n   * same rules as everything else that moves around the page. It has to be\n   * set up by the app, the same way `<Menu>` requires it.\n   */\n  #find(direction: \"next\" | \"prev\" | \"first\" | \"last\") {\n    const container = this.#list;\n\n    if (!container) return undefined;\n\n    const tabster = getTabster(window);\n\n    assert(\n      \"<CommandPalette> needs tabster, which the application sets up. \" +\n        \"Call `setupTabster` from 'ember-primitives/tabster' in your application route. \" +\n        \"See https://tabster.io/docs/core\",\n      tabster,\n    );\n\n    const options = { container, includeProgrammaticallyFocusable: true };\n    const currentElement = this.#activeElement;\n    const { focusable } = tabster;\n\n    if (direction === \"first\") return focusable.findFirst(options);\n    if (direction === \"last\") return focusable.findLast(options);\n\n    if (!currentElement) {\n      return direction === \"next\" ? focusable.findFirst(options) : focusable.findLast(options);\n    }\n\n    const found =\n      direction === \"next\"\n        ? focusable.findNext({ ...options, currentElement })\n        : focusable.findPrev({ ...options, currentElement });\n\n    // wrap, rather than stop, at either end\n    return (\n      found ?? (direction === \"next\" ? focusable.findFirst(options) : focusable.findLast(options))\n    );\n  }\n\n  #activate(element: HTMLElement | null | undefined) {\n    if (!element) return;\n\n    this.activeId = element.id;\n    element.scrollIntoView({ block: \"nearest\" });\n  }\n\n  setQuery = (query: string) => {\n    this.query = query;\n    // the results are about to be somebody else's; whatever was active is not\n    this.activeId = undefined;\n    this.args.onQueryChange?.(query);\n  };\n\n  handleInput = (event: Event) => {\n    const { target } = event;\n\n    assert(\"[BUG] input event without an input\", target instanceof HTMLInputElement);\n\n    this.setQuery(target.value);\n  };\n\n  handlePointerMove = (event: PointerEvent) => {\n    const { target } = event;\n\n    if (!(target instanceof Element)) return;\n\n    const option = target.closest<HTMLElement>(OPTION);\n\n    if (option) {\n      this.activeId = option.id;\n    }\n  };\n\n  handleKeydown = (event: KeyboardEvent) => {\n    // mid-composition (IME), the arrow keys belong to the candidate window\n    if (event.isComposing) return;\n\n    switch (event.key) {\n      case \"ArrowDown\": {\n        event.preventDefault();\n        this.#activate(this.#find(\"next\"));\n\n        return;\n      }\n      case \"ArrowUp\": {\n        event.preventDefault();\n        this.#activate(this.#find(\"prev\"));\n\n        return;\n      }\n      case \"Enter\": {\n        // nothing arrowed yet chooses the first result, so a reader can type\n        // and press Enter without leaving the keys they were already on\n        const active = this.#activeElement ?? this.#find(\"first\");\n\n        if (!active) return;\n\n        event.preventDefault();\n        // a real click, so one handler covers the mouse and the keyboard, and\n        // an anchor navigates the way the browser would have\n        active.click();\n\n        return;\n      }\n      /**\n       * Home and End are left to the browser: in an editable combobox they\n       * move the caret, which is what the APG asks for.\n       */\n    }\n  };\n\n  handleHotkey = (event: KeyboardEvent) => {\n    const { hotkey, onOpen } = this.args;\n\n    if (!hotkey || !onOpen) return;\n    if (!matches(event, hotkey)) return;\n\n    event.preventDefault();\n    onOpen();\n  };\n\n  /**\n   * The entry a row came from, for the default layout. Rows are rendered one\n   * per entry and in order, so a row's position among the options is its\n   * entry's position in `@items`. A block form has no entries, and gets\n   * `undefined`.\n   */\n  #entryFor(option: HTMLElement, items: PaletteItem[]) {\n    const options = this.#list?.querySelectorAll<HTMLElement>(OPTION);\n\n    for (let i = 0; i < (options?.length ?? 0); i++) {\n      if (options?.[i] === option) return items[i];\n    }\n\n    return undefined;\n  }\n\n  /**\n   * Choosing is delegated, so a row is markup rather than a listener, and\n   * `@onSelect` is reached the same way however the rows were rendered.\n   */\n  handleClick = (event: MouseEvent) => {\n    const { target } = event;\n\n    if (!(target instanceof Element)) return;\n\n    const option = target.closest<HTMLElement>(OPTION);\n\n    if (!option) return;\n\n    /**\n     * A modified click on a link opens it somewhere else and leaves the\n     * reader where they are, so the palette stays where they left it.\n     */\n    if (option.closest(\"a\")) {\n      if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;\n      if (event.button !== 0) return;\n    }\n\n    this.#select(option, event);\n  };\n\n  <template>\n    {{#let\n      (component\n        Input\n        listId=this.listId\n        activeId=this.activeId\n        query=this.query\n        onInput=this.handleInput\n        onKeydown=this.handleKeydown\n      )\n      (component\n        List\n        id=this.listId\n        register=this.registerList\n        onPointerMove=this.handlePointerMove\n        onClick=this.handleClick\n        Item=(component Item activeId=this.activeId)\n        LinkItem=(component LinkItem activeId=this.activeId)\n      )\n      as |PaletteInput PaletteList|\n    }}\n      {{#if this.hasItems}}\n        {{#if (has-block)}}{{this.bothGiven}}{{/if}}\n\n        <PaletteInput\n          class=\"ember-primitives__command-palette__input\"\n          placeholder={{this.placeholder}}\n          aria-label={{this.placeholder}}\n        />\n\n        <PaletteList class=\"ember-primitives__command-palette__list\" as |l|>\n          {{#each @items as |item|}}\n            <l.Item class=\"ember-primitives__command-palette__item\">\n              {{#if (iconOf item)}}\n                <span class=\"ember-primitives__command-palette__icon\">{{iconOf item}}</span>\n              {{/if}}\n              <span class=\"ember-primitives__command-palette__label\">{{labelOf item}}</span>\n              {{#if (descriptionOf item)}}\n                <span class=\"ember-primitives__command-palette__description\">{{descriptionOf\n                    item\n                  }}</span>\n              {{/if}}\n            </l.Item>\n          {{/each}}\n        </PaletteList>\n      {{else}}\n        {{yield (hash query=this.query setQuery=this.setQuery Input=PaletteInput List=PaletteList)}}\n      {{/if}}\n    {{/let}}\n  </template>\n}\n\nexport default CommandPalette;\n"],"names":["OPTION","isMac","navigator","userAgent","includes","matches","event","hotkey","parts","toLowerCase","split","map","part","trim","key","pop","modifiers","Set","mod","has","metaKey","ctrlKey","altKey","shiftKey","Item","Component","id","guidFor","isActive","args","activeId","setComponentTemplate","precompileTemplate","strictMode","LinkItem","scope","Link","List","on","hash","templateOnly","Input","labelOf","item","label","descriptionOf","undefined","description","iconOf","icon","CommandPalette","listId","g","prototype","tracked","i","localCopy","constructor","owner","document","addEventListener","handleHotkey","registerDestructor","removeEventListener","placeholder","hasItems","items","#select","option","onSelect","entry","assert","bothGiven","query","_query","value","registerList","eModifier","element","#activeElement","querySelector","#find","direction","container","tabster","getTabster","window","options","includeProgrammaticallyFocusable","currentElement","focusable","findFirst","findLast","found","findNext","findPrev","#activate","scrollIntoView","block","setQuery","onQueryChange","handleInput","target","HTMLInputElement","handlePointerMove","Element","closest","handleKeydown","isComposing","preventDefault","active","click","onOpen","#entryFor","querySelectorAll","length","handleClick","button"],"mappings":"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"}

package/dist/components/dialog.js

@@ -117,8 +117,57 @@ class ModalDialog extends Component {
     this.isOpen = true;
   };
 }
+/**
+ * A modal `<dialog>` around whatever you put in it, and the two things needed
+ * to drive it.
+ *
+ * ```gjs
+ * <Dialog as |d|>
+ *   <CommandPalette @onSelect={{d.close}} @onOpen={{d.open}} @hotkey="mod+k" />
+ * </Dialog>
+ * ```
+ *
+ * The element is here, so a trigger cannot be: whatever opens this either
+ * lives inside it, or is a key combination. For a dialog opened by a button
+ * beside it, use `<Modal>`, which hands you the element to place.
+ *
+ * <kbd>Escape</kbd> closes it and focus returns to whatever opened it, which
+ * is the `<dialog>` element's own behaviour. Set `closedby` to change which
+ * actions dismiss it.
+ */
+class Dialog extends Component {
+  /**
+  * A plain field rather than tracked state: it is read when somebody calls
+  * `open` or `close`, never while rendering, so nothing has to settle in a
+  * second pass.
+  */
+  #element;
+  register = modifier(element => {
+    this.#element = element;
+    return () => {
+      this.#element = undefined;
+    };
+  });
+  /**
+  * `showModal` on an open dialog, and `close` on a closed one, are both
+  * no-ops per spec, so neither needs guarding here.
+  */
+  open = () => {
+    this.#element?.showModal();
+  };
+  close = () => {
+    this.#element?.close();
+  };
+  static {
+    setComponentTemplate(precompileTemplate("<dialog {{this.register}} ...attributes>\n  {{yield (hash open=this.open close=this.close)}}\n</dialog>", {
+      strictMode: true,
+      scope: () => ({
+        hash
+      })
+    }), this);
+  }
+}
 const Modal = ModalDialog;
-const Dialog = ModalDialog;
 
 export { Dialog, Modal, ModalDialog as default };
 //# sourceMappingURL=dialog.js.map

package/dist/components/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sources":["../../src/components/dialog.gts"],"sourcesContent":["import Component from \"@glimmer/component\";\nimport { tracked } from \"@glimmer/tracking\";\nimport { assert } from \"@ember/debug\";\nimport { hash } from \"@ember/helper\";\nimport { on } from \"@ember/modifier\";\n\nimport { modifier as eModifier } from \"ember-modifier\";\n// temp\n//  https://github.com/tracked-tools/tracked-toolbox/issues/38\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-expect-error\nimport { localCopy } from \"tracked-toolbox\";\n\nimport type { TOC } from \"@ember/component/template-only\";\nimport type { ModifierLike, WithBoundArgs } from \"@glint/template\";\n\nconst DialogElement: TOC<{\n  Element: HTMLDialogElement;\n  Args: {\n    /**\n     * @internal\n     */\n    open: boolean | undefined;\n    /**\n     * @internal\n     */\n    onClose: () => void;\n\n    /**\n     * @internal\n     */\n    register: ModifierLike<{ Element: HTMLDialogElement }>;\n  };\n  Blocks: { default: [] };\n}> = <template>\n  <dialog ...attributes open={{@open}} {{on \"close\" @onClose}} {{@register}}>\n    {{yield}}\n  </dialog>\n</template>;\n\nexport interface Signature {\n  Args: {\n    /**\n     * Optionally set the open state of the `<dialog>`\n     * The state will still be managed internally,\n     * so this does not need to be a maintained value, but whenever it changes,\n     * the dialog element will reflect that change accordingly.\n     */\n    open?: boolean;\n    /**\n     * When the `<dialog>` is closed, this function will be called\n     * and the `<dialog>`'s `returnValue` will be passed.\n     *\n     * This can be used to determine which button was clicked to close the modal\n     *\n     * Note though that this value is only populated when using\n     * `<form method='dialog'>`\n     */\n    onClose?: (returnValue: string) => void;\n  };\n  Blocks: {\n    default: [\n      {\n        /**\n         * Represents the open state of the `<dialog>` element.\n         */\n        isOpen: boolean;\n\n        /**\n         * Closes the `<dialog>` element\n         * Will throw an error if `Dialog` is not rendered.\n         */\n        close: () => void;\n\n        /**\n         * Opens the `<dialog>` element.\n         * Will throw an error if `Dialog` is not rendered.\n         */\n        open: () => void;\n\n        /**\n         * This modifier should be applied to the button that opens the Dialog so that it can be re-focused when the dialog closes.\n         *\n         * Example:\n         *\n         * ```gjs\n         * <template>\n         *   <Modal as |m|>\n         *     <button {{m.focusOnClose}} {{on \"click\" m.open}}>Open</button>\n         *\n         *     <m.Dialog>...</m.Dialog>\n         *   </Modal>\n         * </template>\n         * ```\n         */\n        focusOnClose: ModifierLike<{ Element: HTMLElement }>;\n\n        /**\n         * This is the `<dialog>` element (with some defaults pre-wired).\n         * This is required to be rendered.\n         */\n        Dialog: WithBoundArgs<typeof DialogElement, \"onClose\" | \"register\" | \"open\">;\n      },\n    ];\n  };\n}\n\nclass ModalDialog extends Component<Signature> {\n  <template>\n    {{yield\n      (hash\n        isOpen=this.isOpen\n        open=this.open\n        close=this.close\n        focusOnClose=this.refocus\n        Dialog=(component DialogElement open=@open onClose=this.handleClose register=this.register)\n      )\n    }}\n  </template>\n\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n  @localCopy(\"args.open\") declare _isOpen: boolean;\n\n  get isOpen() {\n    /**\n     * Always fallback to false (closed)\n     */\n    return this._isOpen ?? false;\n  }\n  set isOpen(val: boolean) {\n    this._isOpen = val;\n  }\n\n  #lastIsOpen = false;\n  refocus = eModifier((element) => {\n    assert(`focusOnClose is only valid on a HTMLElement`, element instanceof HTMLElement);\n\n    if (!this.isOpen && this.#lastIsOpen) {\n      element.focus();\n    }\n\n    this.#lastIsOpen = this.isOpen;\n  });\n\n  @tracked declare dialogElement: HTMLDialogElement | undefined;\n\n  register = eModifier((element: HTMLDialogElement) => {\n    /**\n     * This is very sad.\n     *\n     * But we need the element to be 'root state'\n     * so that when we read things like \"isOpen\",\n     * when the dialog is finally rendered, all the\n     * downstream properties render.\n     *\n     * This has to be an async / delayed a bit, so that\n     * the tracking frame can exit, and we don't infinite loop\n     */\n    void (async () => {\n      await Promise.resolve();\n\n      this.dialogElement = element;\n    })();\n  });\n\n  /**\n   * Closes the dialog -- this will throw an error in development if the dialog element was not rendered\n   */\n  close = () => {\n    assert(\n      \"Cannot call `close` on <Dialog> without rendering the dialog element.\",\n      this.dialogElement,\n    );\n\n    /**\n     * If the element is already closed, don't run all this again\n     */\n    if (!this.dialogElement.hasAttribute(\"open\")) {\n      return;\n    }\n\n    /**\n     * removes the `open` attribute\n     * handleClose will be called because the dialog has bound the `close` event.\n     */\n    this.dialogElement.close();\n  };\n\n  /**\n   * @internal\n   *\n   * handles the <dialog> element's native close behavior.\n   * listened to via addEventListener('close', ...);\n   */\n  handleClose = () => {\n    assert(\n      \"Cannot call `handleDialogClose` on <Dialog> without rendering the dialog element. This is likely a bug in ember-primitives. Please open an issue <3\",\n      this.dialogElement,\n    );\n\n    this.isOpen = false;\n    this.args.onClose?.(this.dialogElement.returnValue);\n    // the return value ends up staying... which is annoying\n    this.dialogElement.returnValue = \"\";\n  };\n\n  /**\n   * Opens the dialog -- this will throw an error in development if the dialog element was not rendered\n   */\n  open = () => {\n    assert(\n      \"Cannot call `open` on <Dialog> without rendering the dialog element.\",\n      this.dialogElement,\n    );\n\n    /**\n     * If the element is already open, don't run all this again\n     */\n    if (this.dialogElement.hasAttribute(\"open\")) {\n      return;\n    }\n\n    /**\n     * adds the `open` attribute\n     */\n    this.dialogElement.showModal();\n    this.isOpen = true;\n  };\n}\n\nexport const Modal = ModalDialog;\nexport const Dialog = ModalDialog;\n\nexport default ModalDialog;\n"],"names":["DialogElement","setComponentTemplate","precompileTemplate","strictMode","scope","on","templateOnly","ModalDialog","Component","hash","g","prototype","localCopy","i","isOpen","_isOpen","val","refocus","eModifier","element","assert","HTMLElement","focus","tracked","register","Promise","resolve","dialogElement","close","hasAttribute","handleClose","args","onClose","returnValue","open","showModal","Modal","Dialog"],"mappings":"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"}
+{"version":3,"file":"dialog.js","sources":["../../src/components/dialog.gts"],"sourcesContent":["import Component from \"@glimmer/component\";\nimport { tracked } from \"@glimmer/tracking\";\nimport { assert } from \"@ember/debug\";\nimport { hash } from \"@ember/helper\";\nimport { on } from \"@ember/modifier\";\n\nimport { modifier as eModifier } from \"ember-modifier\";\n// temp\n//  https://github.com/tracked-tools/tracked-toolbox/issues/38\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-expect-error\nimport { localCopy } from \"tracked-toolbox\";\n\nimport type { TOC } from \"@ember/component/template-only\";\nimport type { ModifierLike, WithBoundArgs } from \"@glint/template\";\n\nconst DialogElement: TOC<{\n  Element: HTMLDialogElement;\n  Args: {\n    /**\n     * @internal\n     */\n    open: boolean | undefined;\n    /**\n     * @internal\n     */\n    onClose: () => void;\n\n    /**\n     * @internal\n     */\n    register: ModifierLike<{ Element: HTMLDialogElement }>;\n  };\n  Blocks: { default: [] };\n}> = <template>\n  <dialog ...attributes open={{@open}} {{on \"close\" @onClose}} {{@register}}>\n    {{yield}}\n  </dialog>\n</template>;\n\nexport interface Signature {\n  Args: {\n    /**\n     * Optionally set the open state of the `<dialog>`\n     * The state will still be managed internally,\n     * so this does not need to be a maintained value, but whenever it changes,\n     * the dialog element will reflect that change accordingly.\n     */\n    open?: boolean;\n    /**\n     * When the `<dialog>` is closed, this function will be called\n     * and the `<dialog>`'s `returnValue` will be passed.\n     *\n     * This can be used to determine which button was clicked to close the modal\n     *\n     * Note though that this value is only populated when using\n     * `<form method='dialog'>`\n     */\n    onClose?: (returnValue: string) => void;\n  };\n  Blocks: {\n    default: [\n      {\n        /**\n         * Represents the open state of the `<dialog>` element.\n         */\n        isOpen: boolean;\n\n        /**\n         * Closes the `<dialog>` element\n         * Will throw an error if `Dialog` is not rendered.\n         */\n        close: () => void;\n\n        /**\n         * Opens the `<dialog>` element.\n         * Will throw an error if `Dialog` is not rendered.\n         */\n        open: () => void;\n\n        /**\n         * This modifier should be applied to the button that opens the Dialog so that it can be re-focused when the dialog closes.\n         *\n         * Example:\n         *\n         * ```gjs\n         * <template>\n         *   <Modal as |m|>\n         *     <button {{m.focusOnClose}} {{on \"click\" m.open}}>Open</button>\n         *\n         *     <m.Dialog>...</m.Dialog>\n         *   </Modal>\n         * </template>\n         * ```\n         */\n        focusOnClose: ModifierLike<{ Element: HTMLElement }>;\n\n        /**\n         * This is the `<dialog>` element (with some defaults pre-wired).\n         * This is required to be rendered.\n         */\n        Dialog: WithBoundArgs<typeof DialogElement, \"onClose\" | \"register\" | \"open\">;\n      },\n    ];\n  };\n}\n\nclass ModalDialog extends Component<Signature> {\n  <template>\n    {{yield\n      (hash\n        isOpen=this.isOpen\n        open=this.open\n        close=this.close\n        focusOnClose=this.refocus\n        Dialog=(component DialogElement open=@open onClose=this.handleClose register=this.register)\n      )\n    }}\n  </template>\n\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n  @localCopy(\"args.open\") declare _isOpen: boolean;\n\n  get isOpen() {\n    /**\n     * Always fallback to false (closed)\n     */\n    return this._isOpen ?? false;\n  }\n  set isOpen(val: boolean) {\n    this._isOpen = val;\n  }\n\n  #lastIsOpen = false;\n  refocus = eModifier((element) => {\n    assert(`focusOnClose is only valid on a HTMLElement`, element instanceof HTMLElement);\n\n    if (!this.isOpen && this.#lastIsOpen) {\n      element.focus();\n    }\n\n    this.#lastIsOpen = this.isOpen;\n  });\n\n  @tracked declare dialogElement: HTMLDialogElement | undefined;\n\n  register = eModifier((element: HTMLDialogElement) => {\n    /**\n     * This is very sad.\n     *\n     * But we need the element to be 'root state'\n     * so that when we read things like \"isOpen\",\n     * when the dialog is finally rendered, all the\n     * downstream properties render.\n     *\n     * This has to be an async / delayed a bit, so that\n     * the tracking frame can exit, and we don't infinite loop\n     */\n    void (async () => {\n      await Promise.resolve();\n\n      this.dialogElement = element;\n    })();\n  });\n\n  /**\n   * Closes the dialog -- this will throw an error in development if the dialog element was not rendered\n   */\n  close = () => {\n    assert(\n      \"Cannot call `close` on <Dialog> without rendering the dialog element.\",\n      this.dialogElement,\n    );\n\n    /**\n     * If the element is already closed, don't run all this again\n     */\n    if (!this.dialogElement.hasAttribute(\"open\")) {\n      return;\n    }\n\n    /**\n     * removes the `open` attribute\n     * handleClose will be called because the dialog has bound the `close` event.\n     */\n    this.dialogElement.close();\n  };\n\n  /**\n   * @internal\n   *\n   * handles the <dialog> element's native close behavior.\n   * listened to via addEventListener('close', ...);\n   */\n  handleClose = () => {\n    assert(\n      \"Cannot call `handleDialogClose` on <Dialog> without rendering the dialog element. This is likely a bug in ember-primitives. Please open an issue <3\",\n      this.dialogElement,\n    );\n\n    this.isOpen = false;\n    this.args.onClose?.(this.dialogElement.returnValue);\n    // the return value ends up staying... which is annoying\n    this.dialogElement.returnValue = \"\";\n  };\n\n  /**\n   * Opens the dialog -- this will throw an error in development if the dialog element was not rendered\n   */\n  open = () => {\n    assert(\n      \"Cannot call `open` on <Dialog> without rendering the dialog element.\",\n      this.dialogElement,\n    );\n\n    /**\n     * If the element is already open, don't run all this again\n     */\n    if (this.dialogElement.hasAttribute(\"open\")) {\n      return;\n    }\n\n    /**\n     * adds the `open` attribute\n     */\n    this.dialogElement.showModal();\n    this.isOpen = true;\n  };\n}\n\nexport interface SimpleSignature {\n  Element: HTMLDialogElement;\n  Blocks: {\n    default: [\n      {\n        /**\n         * Opens the dialog, modally.\n         */\n        open: () => void;\n        /**\n         * Closes the dialog.\n         */\n        close: () => void;\n      },\n    ];\n  };\n}\n\n/**\n * A modal `<dialog>` around whatever you put in it, and the two things needed\n * to drive it.\n *\n * ```gjs\n * <Dialog as |d|>\n *   <CommandPalette @onSelect={{d.close}} @onOpen={{d.open}} @hotkey=\"mod+k\" />\n * </Dialog>\n * ```\n *\n * The element is here, so a trigger cannot be: whatever opens this either\n * lives inside it, or is a key combination. For a dialog opened by a button\n * beside it, use `<Modal>`, which hands you the element to place.\n *\n * <kbd>Escape</kbd> closes it and focus returns to whatever opened it, which\n * is the `<dialog>` element's own behaviour. Set `closedby` to change which\n * actions dismiss it.\n */\nexport class Dialog extends Component<SimpleSignature> {\n  /**\n   * A plain field rather than tracked state: it is read when somebody calls\n   * `open` or `close`, never while rendering, so nothing has to settle in a\n   * second pass.\n   */\n  #element: HTMLDialogElement | undefined;\n\n  register = eModifier((element: HTMLDialogElement) => {\n    this.#element = element;\n\n    return () => {\n      this.#element = undefined;\n    };\n  });\n\n  /**\n   * `showModal` on an open dialog, and `close` on a closed one, are both\n   * no-ops per spec, so neither needs guarding here.\n   */\n  open = () => {\n    this.#element?.showModal();\n  };\n\n  close = () => {\n    this.#element?.close();\n  };\n\n  <template>\n    <dialog {{this.register}} ...attributes>\n      {{yield (hash open=this.open close=this.close)}}\n    </dialog>\n  </template>\n}\n\nexport const Modal = ModalDialog;\n\nexport default ModalDialog;\n"],"names":["DialogElement","setComponentTemplate","precompileTemplate","strictMode","scope","on","templateOnly","ModalDialog","Component","hash","g","prototype","localCopy","i","isOpen","_isOpen","val","refocus","eModifier","element","assert","HTMLElement","focus","tracked","register","Promise","resolve","dialogElement","close","hasAttribute","handleClose","args","onClose","returnValue","open","showModal","Dialog","undefined","Modal"],"mappings":"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"}

package/dist/index.js

@@ -2,7 +2,8 @@ import { macroCondition, isDevelopingApp, importSync } from '@embroider/macros';
 export { Accordion } from './components/accordion.js';
 export { Avatar } from './components/avatar.js';
 export { Breadcrumb } from './components/breadcrumb.js';
-export { Dialog, Dialog as Modal } from './components/dialog.js';
+export { CommandPalette } from './components/command-palette.js';
+export { Dialog, Modal } from './components/dialog.js';
 export { Drawer } from './components/drawer.js';
 export { ExternalLink } from './components/external-link.js';
 export { Form } from './components/form.js';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["/**\n * DANGER: this is a *barrel file*\n *\n * It forces the whole library to be loaded and all dependencies.\n *\n * If you have a small app, you probably don't want to import from here -- instead import from each sub-path.\n */\nimport { importSync, isDevelopingApp, macroCondition } from '@embroider/macros';\n\nif (macroCondition(isDevelopingApp())) {\n  importSync('./components/violations.css');\n}\n\nexport { Accordion } from './components/accordion.gts';\nexport type {\n  AccordionContentExternalSignature,\n  AccordionHeaderExternalSignature,\n  AccordionItemExternalSignature,\n  AccordionTriggerExternalSignature,\n} from './components/accordion/public.ts';\nexport { Avatar } from './components/avatar.gts';\nexport { Breadcrumb } from './components/breadcrumb.gts';\nexport { Dialog, Dialog as Modal } from './components/dialog.gts';\nexport { Drawer } from './components/drawer.gts';\nexport { ExternalLink } from './components/external-link.gts';\nexport { Form } from './components/form.gts';\nexport { IncrementalEach } from './components/incremental-each.gts';\nexport { Key, KeyCombo } from './components/keys.gts';\nexport { StickyFooter } from './components/layout/sticky-footer.gts';\nexport { Link } from './components/link.gts';\nexport { Menu } from './components/menu.gts';\nexport { OTP, OTPInput } from './components/one-time-password.gts';\nexport { Popover } from './components/popover.gts';\nexport { Portal } from './components/portal.gts';\nexport { PortalTargets } from './components/portal-targets.gts';\nexport { TARGETS as PORTALS } from './components/portal-targets.gts';\nexport { Progress } from './components/progress.gts';\nexport { Rating } from './components/rating.gts';\nexport {\n  Resizable,\n  Handle as ResizableHandle,\n  Panel as ResizablePanel,\n} from './components/resizable.gts';\nexport { Scroller } from './components/scroller.gts';\nexport { Separator } from './components/separator.gts';\nexport { Shadowed } from './components/shadowed.gts';\nexport { Slider } from './components/slider.gts';\nexport { Switch } from './components/switch.gts';\nexport { Toggle } from './components/toggle.gts';\nexport { ToggleGroup } from './components/toggle-group.gts';\nexport { VisuallyHidden } from './components/visually-hidden.gts';\nexport { Zoetrope } from './components/zoetrope.ts';\nexport * from './helpers.ts';\n"],"names":["macroCondition","isDevelopingApp","importSync"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,IAAIA,cAAc,CAACC,eAAe,EAAE,CAAC,EAAE;EACrCC,UAAU,CAAC,6BAA6B,CAAC;AAC3C"}
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["/**\n * DANGER: this is a *barrel file*\n *\n * It forces the whole library to be loaded and all dependencies.\n *\n * If you have a small app, you probably don't want to import from here -- instead import from each sub-path.\n */\nimport { importSync, isDevelopingApp, macroCondition } from '@embroider/macros';\n\nif (macroCondition(isDevelopingApp())) {\n  importSync('./components/violations.css');\n}\n\nexport { Accordion } from './components/accordion.gts';\nexport type {\n  AccordionContentExternalSignature,\n  AccordionHeaderExternalSignature,\n  AccordionItemExternalSignature,\n  AccordionTriggerExternalSignature,\n} from './components/accordion/public.ts';\nexport { Avatar } from './components/avatar.gts';\nexport { Breadcrumb } from './components/breadcrumb.gts';\nexport { CommandPalette } from './components/command-palette.gts';\nexport { Dialog, Modal } from './components/dialog.gts';\nexport { Drawer } from './components/drawer.gts';\nexport { ExternalLink } from './components/external-link.gts';\nexport { Form } from './components/form.gts';\nexport { IncrementalEach } from './components/incremental-each.gts';\nexport { Key, KeyCombo } from './components/keys.gts';\nexport { StickyFooter } from './components/layout/sticky-footer.gts';\nexport { Link } from './components/link.gts';\nexport { Menu } from './components/menu.gts';\nexport { OTP, OTPInput } from './components/one-time-password.gts';\nexport { Popover } from './components/popover.gts';\nexport { Portal } from './components/portal.gts';\nexport { PortalTargets } from './components/portal-targets.gts';\nexport { TARGETS as PORTALS } from './components/portal-targets.gts';\nexport { Progress } from './components/progress.gts';\nexport { Rating } from './components/rating.gts';\nexport {\n  Resizable,\n  Handle as ResizableHandle,\n  Panel as ResizablePanel,\n} from './components/resizable.gts';\nexport { Scroller } from './components/scroller.gts';\nexport { Separator } from './components/separator.gts';\nexport { Shadowed } from './components/shadowed.gts';\nexport { Slider } from './components/slider.gts';\nexport { Switch } from './components/switch.gts';\nexport { Toggle } from './components/toggle.gts';\nexport { ToggleGroup } from './components/toggle-group.gts';\nexport { VisuallyHidden } from './components/visually-hidden.gts';\nexport { Zoetrope } from './components/zoetrope.ts';\nexport * from './helpers.ts';\n"],"names":["macroCondition","isDevelopingApp","importSync"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,IAAIA,cAAc,CAACC,eAAe,EAAE,CAAC,EAAE;EACrCC,UAAU,CAAC,6BAA6B,CAAC;AAC3C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-primitives",
-  "version": "0.61.1",
+  "version": "0.62.0",
   "description": "Making apps easier to build",
   "keywords": [
     "ember-addon"
@@ -138,6 +138,7 @@
   },
   "scripts": {
     "build": "rollup --config ./rollup.config.mjs",
+    "sync": "echo 'pnpm is syncing this package into the workspaces that inject it. (this is configured in .npmrc)'",
     "lint": "concurrently 'pnpm:lint:*(!fix)' --names 'lint:'",
     "lint:fix": "concurrently 'pnpm:lint:*:fix' --names 'fix:' && pnpm format",
     "lint:js": "eslint . --cache",