ember-primitives 0.49.0 → 0.50.0

package/src/components/scroller.gts

@@ -0,0 +1,179 @@
+import Component from "@glimmer/component";
+import { isDestroyed, isDestroying } from "@ember/destroyable";
+import { hash } from "@ember/helper";
+
+import { modifier } from "ember-modifier";
+
+/**
+ * Utility component for helping with scrolling in any direction within
+ * any of the 4 directions: up, down, left, right.
+ *
+ * This can be used to auto-scroll content as new content is inserted into the scrollable area, or possibly to bring focus to something on the page.
+ */
+export class Scroller extends Component<{
+  /**
+   * A containing element is required - in this case, a div.
+   * It must be scrollable for this component to work, but can be customized.
+   *
+   * By default, this element will have some styling applied:
+   *   overflow: auto;
+   *
+   * By default, this element will have tabindex="0" to support keyboard usage.
+   *
+   * The scroll-behavior is "auto", which can be controlled via CSS
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
+   *
+   */
+  Element: HTMLDivElement;
+  Blocks: {
+    default: [
+      {
+        /**
+         * Scroll the content to the bottom
+         *
+         * ```gjs
+         * import { Scroller } from 'ember-primitives';
+         *
+         * <template>
+         *   <Scroller as |s|>
+         *      ...
+         *
+         *      {{ (s.scrollToBottom) }}
+         *   </Scroller>
+         * </template>
+         * ```
+         */
+        scrollToBottom: () => void;
+        /**
+         * Scroll the content to the top
+         *
+         * ```gjs
+         * import { Scroller } from 'ember-primitives';
+         *
+         * <template>
+         *   <Scroller as |s|>
+         *      ...
+         *
+         *      {{ (s.scrollToTop) }}
+         *   </Scroller>
+         * </template>
+         * ```
+         */
+        scrollToTop: () => void;
+        /**
+         * Scroll the content to the left
+         *
+         * ```gjs
+         * import { Scroller } from 'ember-primitives';
+         *
+         * <template>
+         *   <Scroller as |s|>
+         *      ...
+         *
+         *      {{ (s.scrollToLeft) }}
+         *   </Scroller>
+         * </template>
+         * ```
+         */
+        scrollToLeft: () => void;
+        /**
+         * Scroll the content to the right
+         *
+         * ```gjs
+         * import { Scroller } from 'ember-primitives';
+         *
+         * <template>
+         *   <Scroller as |s|>
+         *      ...
+         *
+         *      {{ (s.scrollToRight) }}
+         *   </Scroller>
+         * </template>
+         * ```
+         */
+        scrollToRight: () => void;
+      },
+    ];
+  };
+}> {
+  declare withinElement: HTMLDivElement;
+
+  ref = modifier((el: HTMLDivElement) => {
+    this.withinElement = el;
+  });
+
+  #frame?: number;
+
+  scrollToBottom = () => {
+    if (this.#frame) {
+      cancelAnimationFrame(this.#frame);
+    }
+
+    this.#frame = requestAnimationFrame(() => {
+      if (isDestroyed(this) || isDestroying(this)) return;
+
+      this.withinElement.scrollTo({
+        top: this.withinElement.scrollHeight,
+        behavior: "auto",
+      });
+    });
+  };
+
+  scrollToTop = () => {
+    if (this.#frame) {
+      cancelAnimationFrame(this.#frame);
+    }
+
+    this.#frame = requestAnimationFrame(() => {
+      if (isDestroyed(this) || isDestroying(this)) return;
+
+      this.withinElement.scrollTo({
+        top: 0,
+        behavior: "auto",
+      });
+    });
+  };
+
+  scrollToLeft = () => {
+    if (this.#frame) {
+      cancelAnimationFrame(this.#frame);
+    }
+
+    this.#frame = requestAnimationFrame(() => {
+      if (isDestroyed(this) || isDestroying(this)) return;
+
+      this.withinElement.scrollTo({
+        left: 0,
+        behavior: "auto",
+      });
+    });
+  };
+
+  scrollToRight = () => {
+    if (this.#frame) {
+      cancelAnimationFrame(this.#frame);
+    }
+
+    this.#frame = requestAnimationFrame(() => {
+      if (isDestroyed(this) || isDestroying(this)) return;
+
+      this.withinElement.scrollTo({
+        left: this.withinElement.scrollWidth,
+        behavior: "auto",
+      });
+    });
+  };
+
+  <template>
+    <div tabindex="0" ...attributes {{this.ref}}>
+      {{yield
+        (hash
+          scrollToBottom=this.scrollToBottom
+          scrollToTop=this.scrollToTop
+          scrollToLeft=this.scrollToLeft
+          scrollToRight=this.scrollToRight
+        )
+      }}
+    </div>
+  </template>
+}

package/src/components/shadowed.gts

@@ -0,0 +1,110 @@
+import Component from "@glimmer/component";
+
+import type Owner from "@ember/owner";
+
+// index.html has the production-fingerprinted references to these links
+// Ideally, we'd have some pre-processor scan everything for references to
+// assets in public, but idk how to set that up
+const getStyles = () => [...document.querySelectorAll("link")].map((link) => link.href);
+
+/**
+ * style + native @import
+ * is the only robust way to load styles in a shadowroot.
+ *
+ * link is only valid in the head element.
+ */
+const Styles = <template>
+  <style>
+    {{#each (getStyles) as |styleHref|}}
+
+      @import "{{styleHref}}";
+
+    {{/each}}
+  </style>
+</template>;
+
+/**
+ * Render content in a shadow dom, attached to a div.
+ *
+ * Uses the [shadow DOM][mdn-shadow-dom] API.
+ *
+ * [mdn-shadow-dom]: https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM
+ *
+ * This is useful when you want to render content that escapes your app's styles.
+ */
+export class Shadowed extends Component<{
+  /**
+   * The shadow dom attaches to a div element.
+   * You may specify any attribute, and it'll be applied to this host element.
+   */
+  Element: HTMLDivElement;
+  Args: {
+    /**
+     * @public
+     *
+     * By default, shadow-dom does not include any styles.
+     * Setting this to true will include all the `<style>` tags
+     * that are present in the `<head>` element.
+     */
+    includeStyles?: boolean;
+  };
+  Blocks: {
+    /**
+     * Content to be placed within the ShadowDOM
+     */
+    default: [];
+  };
+}> {
+  shadow: HTMLDivElement;
+  host: HTMLDivElement;
+  /**
+   * ember-source 5.6 broke the ability to in-element
+   * natively into a shadowroot.
+   *
+   * We have two or three more dives than we should have here.
+   *
+   *
+   * See these ember-source bugs:
+   * - https://github.com/emberjs/ember.js/issues/20643
+   * - https://github.com/emberjs/ember.js/issues/20642
+   * - https://github.com/emberjs/ember.js/issues/20641
+   *
+   * Ideally, shadowdom should be built in.
+   * Couple paths forward:
+   *  - (as the overall template tag)
+   *     <template shadowrootmode="open">
+   *     </template>
+   *
+   *  - Build a component into the framework that does the above ^
+   *  - add additional parsing in content-tag to allow
+   *    nested <template>
+   *
+   */
+  constructor(owner: Owner, args: { includeStyles?: boolean }) {
+    super(owner, args);
+
+    const element = document.createElement("div");
+    const shadowRoot = element.attachShadow({ mode: "open" });
+    const div = document.createElement("div");
+
+    shadowRoot.appendChild(div);
+    this.host = element;
+    this.shadow = div;
+  }
+
+  <template>
+    <div ...attributes>{{this.host}}</div>
+
+    {{#in-element this.shadow}}
+
+      {{#if @includeStyles}}
+        <Styles />
+      {{/if}}
+
+      {{yield}}
+
+    {{/in-element}}
+  </template>
+}
+
+export default Shadowed;

package/src/components/switch.gts

@@ -0,0 +1,103 @@
+import { fn, hash } from "@ember/helper";
+import { on } from "@ember/modifier";
+
+import { cell } from "ember-resources";
+
+import { uniqueId } from "../utils.ts";
+import { Label } from "./-private/typed-elements.gts";
+import { toggleWithFallback } from "./-private/utils.ts";
+
+import type { TOC } from "@ember/component/template-only";
+import type { WithBoundArgs } from "@glint/template";
+
+export interface Signature {
+  Element: HTMLInputElement;
+  Args: {
+    /**
+     * The initial checked value of the Switch.
+     * This value is reactive, so if the value that
+     * `@checked` is set to updates, the state of the Switch will also update.
+     */
+    checked?: boolean;
+    /**
+     * Callback when the Switch state is toggled
+     */
+    onChange?: (checked: boolean, event: Event) => void;
+  };
+  Blocks: {
+    default?: [
+      {
+        /**
+         * The Switch Element.
+         * It has a pre-wired `id` so that the relevant Label is
+         * appropriately associated via the `for` property of the Label.
+         *
+         * ```gjs
+         * import { Switch } from 'ember-primitives';
+         *
+         * <template>
+         *   <Switch as |s|>
+         *     <s.Control />
+         *   </Switch>
+         * </template>
+         * ```
+         */
+        Control: WithBoundArgs<typeof Checkbox, "checked" | "id" | "onChange">;
+        /**
+         * The Switch element requires a label, and this label already has
+         * the association to the Control by setting the `for` attribute to the `id` of the Control
+         *
+         * ```gjs
+         * import { Switch } from 'ember-primitives';
+         *
+         * <template>
+         *   <Switch as |s|>
+         *     <s.Label />
+         *   </Switch>
+         * </template>
+         * ```
+         */
+        Label: WithBoundArgs<typeof Label, "for">;
+      },
+    ];
+  };
+}
+
+interface ControlSignature {
+  Element: HTMLInputElement;
+  Args: { id: string; checked?: boolean; onChange: () => void };
+}
+
+const Checkbox: TOC<ControlSignature> = <template>
+  {{#let (cell @checked) as |checked|}}
+    <input
+      id={{@id}}
+      type="checkbox"
+      role="switch"
+      checked={{checked.current}}
+      aria-checked={{checked.current}}
+      data-state={{if checked.current "on" "off"}}
+      {{on "click" (fn toggleWithFallback checked.toggle @onChange)}}
+      ...attributes
+    />
+  {{/let}}
+</template>;
+
+/**
+ * @public
+ */
+export const Switch: TOC<Signature> = <template>
+  <div ...attributes data-prim-switch>
+    {{! @glint-nocheck }}
+    {{#let (uniqueId) as |id|}}
+      {{yield
+        (hash
+          Control=(component Checkbox checked=@checked id=id onChange=@onChange)
+          Label=(component Label for=id)
+        )
+      }}
+    {{/let}}
+  </div>
+</template>;
+
+export default Switch;