ember-primitives 0.49.0 → 0.50.0

package/src/components/toggle-group.gts

@@ -0,0 +1,265 @@
+import Component from "@glimmer/component";
+import { cached } from "@glimmer/tracking";
+import { hash } from "@ember/helper";
+
+import { getTabsterAttribute, MoverDirections } from "tabster";
+import { TrackedSet } from "tracked-built-ins";
+// The consumer will need to provide types for tracked-toolbox.
+// Or.. better yet, we PR to trakcked-toolbox to provide them
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { localCopy } from "tracked-toolbox";
+
+import { Toggle } from "./toggle.gts";
+
+import type { ComponentLike } from "@glint/template";
+
+const TABSTER_CONFIG = getTabsterAttribute(
+  {
+    mover: {
+      direction: MoverDirections.Both,
+      cyclic: true,
+    },
+  },
+  true,
+);
+
+export interface ItemSignature<Value = any> {
+  /**
+   * The button element will have aria-pressed="true" on it when the button is in the pressed state.
+   */
+  Element: HTMLButtonElement;
+  Args: {
+    /**
+     * When used in a group of Toggles, this option will be helpful to
+     * know which toggle was pressed if you're using the same @onChange
+     * handler for multiple toggles.
+     */
+    value?: Value;
+  };
+  Blocks: {
+    default: [
+      /**
+       * the current pressed state of the toggle button
+       *
+       * Useful when using the toggle button as an uncontrolled component
+       */
+      pressed: boolean,
+    ];
+  };
+}
+
+export type Item<Value = any> = ComponentLike<ItemSignature<Value>>;
+
+export interface SingleSignature<Value> {
+  Element: HTMLDivElement;
+  Args: {
+    /**
+     * Optionally set the initial toggle state
+     */
+    value?: Value;
+    /**
+     * Callback for when the toggle-group's state is changed.
+     *
+     * Can be used to control the state of the component.
+     *
+     *
+     * When none of the toggles are selected, undefined will be passed.
+     */
+    onChange?: (value: Value | undefined) => void;
+  };
+  Blocks: {
+    default: [
+      {
+        /**
+         * The Toggle Switch
+         */
+        Item: Item;
+      },
+    ];
+  };
+}
+
+export interface MultiSignature<Value = any> {
+  Element: HTMLDivElement;
+  Args: {
+    /**
+     * Optionally set the initial toggle state
+     */
+    value?: Value[] | Set<Value> | Value;
+    /**
+     * Callback for when the toggle-group's state is changed.
+     *
+     * Can be used to control the state of the component.
+     *
+     *
+     * When none of the toggles are selected, undefined will be passed.
+     */
+    onChange?: (value: Set<Value>) => void;
+  };
+  Blocks: {
+    default: [
+      {
+        /**
+         * The Toggle Switch
+         */
+        Item: Item;
+      },
+    ];
+  };
+}
+
+interface PrivateSingleSignature<Value = any> {
+  Element: HTMLDivElement;
+  Args: {
+    type?: "single";
+
+    /**
+     * Optionally set the initial toggle state
+     */
+    value?: Value;
+    /**
+     * Callback for when the toggle-group's state is changed.
+     *
+     * Can be used to control the state of the component.
+     *
+     *
+     * When none of the toggles are selected, undefined will be passed.
+     */
+    onChange?: (value: Value | undefined) => void;
+  };
+  Blocks: {
+    default: [
+      {
+        Item: Item;
+      },
+    ];
+  };
+}
+
+interface PrivateMultiSignature<Value = any> {
+  Element: HTMLDivElement;
+  Args: {
+    type: "multi";
+    /**
+     * Optionally set the initial toggle state
+     */
+    value?: Value[] | Set<Value> | Value;
+    /**
+     * Callback for when the toggle-group's state is changed.
+     *
+     * Can be used to control the state of the component.
+     *
+     *
+     * When none of the toggles are selected, undefined will be passed.
+     */
+    onChange?: (value: Set<Value>) => void;
+  };
+  Blocks: {
+    default: [
+      {
+        Item: Item;
+      },
+    ];
+  };
+}
+
+function isMulti(x: "single" | "multi" | undefined): x is "multi" {
+  return x === "multi";
+}
+
+export class ToggleGroup<Value = any> extends Component<
+  PrivateSingleSignature<Value> | PrivateMultiSignature<Value>
+> {
+  // See: https://github.com/typed-ember/glint/issues/715
+  <template>
+    {{#if (isMulti this.args.type)}}
+      <MultiToggleGroup
+        @value={{this.args.value}}
+        @onChange={{this.args.onChange}}
+        ...attributes
+        as |x|
+      >
+        {{yield x}}
+      </MultiToggleGroup>
+    {{else}}
+      <SingleToggleGroup
+        @value={{this.args.value}}
+        @onChange={{this.args.onChange}}
+        ...attributes
+        as |x|
+      >
+        {{yield x}}
+      </SingleToggleGroup>
+    {{/if}}
+  </template>
+}
+
+class SingleToggleGroup<Value = any> extends Component<SingleSignature<Value>> {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+  @localCopy("args.value") activePressed?: Value;
+
+  handleToggle = (value: Value) => {
+    if (this.activePressed === value) {
+      this.activePressed = undefined;
+
+      return;
+    }
+
+    this.activePressed = value;
+
+    this.args.onChange?.(this.activePressed);
+  };
+
+  isPressed = (value: Value | undefined) => value === this.activePressed;
+
+  <template>
+    <div data-tabster={{TABSTER_CONFIG}} ...attributes>
+      {{yield (hash Item=(component Toggle onChange=this.handleToggle isPressed=this.isPressed))}}
+    </div>
+  </template>
+}
+
+class MultiToggleGroup<Value = any> extends Component<MultiSignature<Value>> {
+  /**
+   * Normalizes @value to a Set
+   * and makes sure that even if the input Set is reactive,
+   * we don't mistakenly dirty it.
+   */
+  @cached
+  get activePressed(): TrackedSet<Value> {
+    const value = this.args.value;
+
+    if (!value) {
+      return new TrackedSet();
+    }
+
+    if (Array.isArray(value)) {
+      return new TrackedSet(value);
+    }
+
+    if (value instanceof Set) {
+      return new TrackedSet(value);
+    }
+
+    return new TrackedSet([value]);
+  }
+
+  handleToggle = (value: Value) => {
+    if (this.activePressed.has(value)) {
+      this.activePressed.delete(value);
+    } else {
+      this.activePressed.add(value);
+    }
+
+    this.args.onChange?.(new Set<Value>(this.activePressed.values()));
+  };
+
+  isPressed = (value: Value) => this.activePressed.has(value);
+
+  <template>
+    <div data-tabster={{TABSTER_CONFIG}} ...attributes>
+      {{yield (hash Item=(component Toggle onChange=this.handleToggle isPressed=this.isPressed))}}
+    </div>
+  </template>
+}

package/src/components/toggle.gts

@@ -0,0 +1,81 @@
+// import Component from '@glimmer/component';
+import { fn } from "@ember/helper";
+import { on } from "@ember/modifier";
+
+import { cell } from "ember-resources";
+
+import { toggleWithFallback } from "./-private/utils.ts";
+
+import type { TOC } from "@ember/component/template-only";
+
+export interface Signature<Value = any> {
+  Element: HTMLButtonElement;
+  Args: {
+    /**
+     * The pressed-state of the toggle.
+     *
+     * Can be used to control the state of the component.
+     */
+    pressed?: boolean;
+    /**
+     * Callback for when the toggle's state is changed.
+     *
+     * Can be used to control the state of the component.
+     *
+     * if a `@value` is passed to this `<Toggle>`, that @value will
+     * be passed to the `@onChange` handler.
+     *
+     * This can be useful when using the same function for the `@onChange`
+     * handler with multiple `<Toggle>` components.
+     */
+    onChange?: (value: Value | undefined, pressed: boolean) => void;
+
+    /**
+     * When used in a group of Toggles, this option will be helpful to
+     * know which toggle was pressed if you're using the same @onChange
+     * handler for multiple toggles.
+     */
+    value?: Value;
+
+    /**
+     * When controlling state in a wrapping component, this function can be used in conjunction with `@value` to determine if this `<Toggle>` should appear pressed.
+     */
+    isPressed?: (value?: Value) => boolean;
+  };
+  Blocks: {
+    default: [
+      /**
+       * the current pressed state of the toggle button
+       *
+       * Useful when using the toggle button as an uncontrolled component
+       */
+      pressed: boolean,
+    ];
+  };
+}
+
+function isPressed(
+  pressed?: boolean,
+  value?: unknown,
+  isPressed?: (value?: unknown) => boolean,
+): boolean {
+  if (!value) return Boolean(pressed);
+  if (!isPressed) return Boolean(pressed);
+
+  return isPressed(value);
+}
+
+export const Toggle: TOC<Signature> = <template>
+  {{#let (cell (isPressed @pressed @value @isPressed)) as |pressed|}}
+    <button
+      type="button"
+      aria-pressed="{{pressed.current}}"
+      {{on "click" (fn toggleWithFallback pressed.toggle @onChange @value)}}
+      ...attributes
+    >
+      {{yield pressed.current}}
+    </button>
+  {{/let}}
+</template>;
+
+export default Toggle;

package/src/components/violations.css

@@ -0,0 +1,105 @@
+span[data-prim-avatar]:has(img[alt="__missing__"])::after,
+[aria-label="__missing__"] {
+  border: red;
+}
+label [aria-label="__missing__"] {
+  border: unset;
+}
+
+/**
+ * ExternalLink
+ */
+a[href='##missing##'],
+/**
+ * Avatar
+ */
+span[data-prim-avatar]:has(img[alt='__missing__'])::after,
+/**
+ * Switch
+ */
+div[data-prim-switch]:has(input[role="switch"]):not(:has(label)) input[role="switch"] {
+  position: relative;
+  border: 1px solid black;
+  padding: 0.125rem 0.25rem;
+  border-radius: 0.125rem;
+  min-width: 10px;
+}
+
+:is(
+  /**
+   * ExternalLink
+   */
+  a[href='##missing##'],
+  /**
+   * Avatar
+   */
+  span[data-prim-avatar]:has(img[alt='__missing__'])::after,
+  /**
+   * Switch
+   */
+  div[data-prim-switch]:not(:has(label)):has(input[role="switch"]) input[role="switch"]
+)::after {
+  color: red;
+  position: absolute;
+  font-size: 0.75rem;
+  font-family: monospace;
+  background: black;
+  padding: 0.125rem 0.25rem;
+  display: flex;
+  border-radius: 0.125rem;
+  transform: translate(0.5rem, 1rem);
+  left: 0;
+  bottom: 0;
+  width: max-content;
+  z-index: 10000000000000000;
+}
+
+a[href="##missing##"]::after {
+  content: "empty href";
+}
+
+span[data-prim-avatar]:has(img[alt="__missing__"])::after {
+  content: "missing alt";
+}
+
+div[data-prim-switch]:not(:has(label)):has(input[role="switch"]) input[role="switch"]::after {
+  content: "missing label";
+}
+
+@media (prefers-color-scheme: light) {
+  :is(
+    a[href="##missing##"],
+    span[data-prim-avatar]:has(img[alt="__missing__"]),
+    div[data-prim-switch]:has(input[role="switch"]):not(:has(label)) input[role="switch"]
+  ) {
+    border-color: black;
+  }
+  :is(
+    a[href="##missing##"],
+    span[data-prim-avatar]:has(img[alt="__missing__"]),
+    div[data-prim-switch]:not(:has(label)):has(input[role="switch"]) input[role="switch"]
+  ):after {
+    background: white;
+    border: 1px solid black;
+    color: darkred;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :is(
+    a[href="##missing##"],
+    span[data-prim-avatar]:has(img[alt="__missing__"]),
+    div[data-prim-switch]:has(input[role="switch"]):not(:has(label)) input[role="switch"]
+  ) {
+    border-color: red;
+  }
+  :is(
+    a[href="##missing##"],
+    span[data-prim-avatar]:has(img[alt="__missing__"]),
+    div[data-prim-switch]:not(:has(label)):has(input[role="switch"]) input[role="switch"]
+  ):after {
+    background: #222;
+    border: 1px solid red;
+    color: red;
+  }
+}

package/src/components/violations.css.ts

@@ -0,0 +1 @@
+import './violations.css';

package/src/components/visually-hidden.css

@@ -0,0 +1,14 @@
+/* See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss */
+.ember-primitives__visually-hidden,
+[visually-hidden] {
+  position: absolute;
+  border: 0;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  word-wrap: normal;
+}

package/src/components/visually-hidden.gts

@@ -0,0 +1,15 @@
+import "./visually-hidden.css";
+
+import type { TOC } from "@ember/component/template-only";
+
+export const VisuallyHidden: TOC<{
+  Element: HTMLSpanElement;
+  Blocks: {
+    /**
+     * Content to hide visually
+     */
+    default: [];
+  };
+}> = <template>
+  <span class="ember-primitives__visually-hidden" ...attributes>{{yield}}</span>
+</template>;