ember-primitives 0.49.0 → 0.50.0

package/src/color-scheme.ts

@@ -0,0 +1,165 @@
+import { waitForPromise } from '@ember/test-waiters';
+
+import { cell } from 'ember-resources';
+
+const _colorScheme = cell<string | undefined>();
+
+let callbacks: Set<(colorScheme: string) => void> = new Set();
+
+async function runCallbacks(theme: string) {
+  await Promise.resolve();
+
+  for (const callback of callbacks.values()) {
+    callback(theme);
+  }
+}
+
+/**
+ * Object for managing the color scheme
+ */
+export const colorScheme = {
+  /**
+   * Set's the current color scheme to the passed value
+   */
+  update: (value: string) => {
+    colorScheme.current = value;
+
+    void waitForPromise(runCallbacks(value));
+  },
+
+  on: {
+    /**
+     * register a function to be called when the color scheme changes.
+     */
+    update: (callback: (colorScheme: string) => void) => {
+      callbacks.add(callback);
+    },
+  },
+  off: {
+    /**
+     * unregister a function that would have been called when the color scheme changes.
+     */
+    update: (callback: (colorScheme: string) => void) => {
+      callbacks.delete(callback);
+    },
+  },
+
+  /**
+   * the current valuel of the "color scheme"
+   */
+  get current(): string | undefined {
+    return _colorScheme.current;
+  },
+  set current(value: string | undefined) {
+    _colorScheme.current = value;
+
+    if (!value) {
+      localPreference.delete();
+
+      return;
+    }
+
+    localPreference.update(value);
+    setColorScheme(value);
+  },
+};
+
+/**
+ * Synchronizes state of `colorScheme` with the users preferences as well as reconciles with previously set theme in local storage.
+ *
+ * This may only be called once per app.
+ */
+export function sync() {
+  /**
+   * reset the callbacks
+   */
+  callbacks = new Set();
+
+  /**
+   * If local prefs are set, then we don't care what prefers-color-scheme is
+   */
+  const userPreference = localPreference.read();
+
+  if (userPreference) {
+    setColorScheme(userPreference);
+    _colorScheme.current = userPreference;
+
+    return;
+  }
+
+  if (prefers.dark()) {
+    setColorScheme('dark');
+    _colorScheme.current = 'dark';
+  } else if (prefers.light()) {
+    setColorScheme('light');
+    _colorScheme.current = 'light';
+  }
+}
+
+/**
+ * Helper methods to determining what the user's preferred color scheme is
+ * based on the system preferences rather than the users explicit preference.
+ */
+export const prefers = {
+  dark: () => window.matchMedia('(prefers-color-scheme: dark)').matches,
+  light: () => window.matchMedia('(prefers-color-scheme: light)').matches,
+  custom: (name: string) => window.matchMedia(`(prefers-color-scheme: ${name})`).matches,
+  none: () => window.matchMedia('(prefers-color-scheme: no-preference)').matches,
+};
+
+const LOCAL_PREF_KEY = 'ember-primitives/color-scheme#local-preference';
+
+/**
+ * Helper methods for working with the color scheme preference in local storage
+ */
+export const localPreference = {
+  isSet: () => Boolean(localPreference.read()),
+  read: () => localStorage.getItem(LOCAL_PREF_KEY),
+  update: (value: string) => localStorage.setItem(LOCAL_PREF_KEY, value),
+  delete: () => localStorage.removeItem(LOCAL_PREF_KEY),
+};
+
+/**
+ * For the given element, returns the `color-scheme` of that element.
+ */
+export function getColorScheme(element?: HTMLElement) {
+  const style = styleOf(element);
+
+  return style.getPropertyValue('color-scheme');
+}
+
+export function setColorScheme(element: HTMLElement, value: string): void;
+export function setColorScheme(value: string): void;
+
+export function setColorScheme(...args: [string] | [HTMLElement, string]): void {
+  if (typeof args[0] === 'string') {
+    styleOf().setProperty('color-scheme', args[0]);
+
+    return;
+  }
+
+  if (typeof args[1] === 'string') {
+    styleOf(args[0]).setProperty('color-scheme', args[1]);
+
+    return;
+  }
+
+  throw new Error(`Invalid arity, expected up to 2 args, received ${args.length}`);
+}
+
+/**
+ * Removes the `color-scheme` from the given element
+ */
+export function removeColorScheme(element?: HTMLElement) {
+  const style = styleOf(element);
+
+  style.removeProperty('color-scheme');
+}
+
+function styleOf(element?: HTMLElement) {
+  if (element) {
+    return element.style;
+  }
+
+  return document.documentElement.style;
+}

package/src/components/-private/typed-elements.gts

@@ -0,0 +1,13 @@
+import type { TOC } from "@ember/component/template-only";
+
+export const Div: TOC<{ Element: HTMLDivElement; Blocks: { default: [] } }> = <template>
+  <div ...attributes>{{yield}}</div>
+</template>;
+
+export const Label: TOC<{
+  Element: HTMLLabelElement;
+  Args: { for: string };
+  Blocks: { default: [] };
+}> = <template>
+  <label for={{@for}} ...attributes>{{yield}}</label>
+</template>;

package/src/components/-private/utils.ts

@@ -0,0 +1,16 @@
+/**
+ * If the user provides an onChange or similar function, use that,
+ * otherwise fallback to the uncontrolled toggle
+ */
+export function toggleWithFallback(
+  uncontrolledToggle: (...args: unknown[]) => void,
+
+  controlledToggle?: (...args: any[]) => void,
+  ...args: unknown[]
+) {
+  if (controlledToggle) {
+    return controlledToggle(...args);
+  }
+
+  uncontrolledToggle(...args);
+}

package/src/components/accordion/content.gts

@@ -0,0 +1,34 @@
+import Component from "@glimmer/component";
+
+import { getDataState } from "./item.gts";
+
+import type { AccordionContentExternalSignature } from "./public.ts";
+
+interface Signature extends AccordionContentExternalSignature {
+  Args: {
+    isExpanded: boolean;
+    value: string;
+    disabled?: boolean;
+  };
+}
+
+export class AccordionContent extends Component<Signature> {
+  <template>
+    <div
+      role="region"
+      id={{@value}}
+      data-state={{getDataState @isExpanded}}
+      hidden={{this.isHidden}}
+      data-disabled={{@disabled}}
+      ...attributes
+    >
+      {{yield}}
+    </div>
+  </template>
+
+  get isHidden() {
+    return !this.args.isExpanded;
+  }
+}
+
+export default AccordionContent;

package/src/components/accordion/header.gts

@@ -0,0 +1,36 @@
+import { hash } from "@ember/helper";
+
+import { getDataState } from "./item.gts";
+import Trigger from "./trigger.gts";
+
+import type { AccordionHeaderExternalSignature } from "./public.ts";
+import type { TOC } from "@ember/component/template-only";
+
+interface Signature extends AccordionHeaderExternalSignature {
+  Args: {
+    value: string;
+    isExpanded: boolean;
+    disabled?: boolean;
+    toggleItem: () => void;
+  };
+}
+
+export const AccordionHeader: TOC<Signature> = <template>
+  <div
+    role="heading"
+    aria-level="3"
+    data-state={{getDataState @isExpanded}}
+    data-disabled={{@disabled}}
+    ...attributes
+  >
+    {{yield
+      (hash
+        Trigger=(component
+          Trigger value=@value isExpanded=@isExpanded disabled=@disabled toggleItem=@toggleItem
+        )
+      )
+    }}
+  </div>
+</template>;
+
+export default AccordionHeader;

package/src/components/accordion/item.gts

@@ -0,0 +1,55 @@
+import Component from "@glimmer/component";
+import { hash } from "@ember/helper";
+
+import Content from "./content.gts";
+import Header from "./header.gts";
+
+import type { AccordionItemExternalSignature } from "./public.ts";
+
+export function getDataState(isExpanded: boolean): string {
+  return isExpanded ? "open" : "closed";
+}
+
+interface Signature extends AccordionItemExternalSignature {
+  Args: AccordionItemExternalSignature["Args"] & {
+    selectedValue?: string | string[];
+    disabled?: boolean;
+    toggleItem: (value: string) => void;
+  };
+}
+
+export class AccordionItem extends Component<Signature> {
+  <template>
+    <div data-state={{getDataState this.isExpanded}} data-disabled={{@disabled}} ...attributes>
+      {{yield
+        (hash
+          isExpanded=this.isExpanded
+          Header=(component
+            Header
+            value=@value
+            isExpanded=this.isExpanded
+            disabled=@disabled
+            toggleItem=this.toggleItem
+          )
+          Content=(component Content value=@value isExpanded=this.isExpanded disabled=@disabled)
+        )
+      }}
+    </div>
+  </template>
+
+  get isExpanded(): boolean {
+    if (Array.isArray(this.args.selectedValue)) {
+      return this.args.selectedValue.includes(this.args.value);
+    }
+
+    return this.args.selectedValue === this.args.value;
+  }
+
+  toggleItem = (): void => {
+    if (this.args.disabled) return;
+
+    this.args.toggleItem(this.args.value);
+  };
+}
+
+export default AccordionItem;

package/src/components/accordion/public.ts

@@ -0,0 +1,64 @@
+import type Content from './content.gts';
+import type Header from './header.gts';
+import type Trigger from './trigger.gts';
+import type { WithBoundArgs } from '@glint/template';
+
+export interface AccordionTriggerExternalSignature {
+  Element: HTMLButtonElement;
+  Blocks: {
+    default: [];
+  };
+}
+
+export interface AccordionContentExternalSignature {
+  Element: HTMLDivElement;
+  Blocks: {
+    default: [];
+  };
+}
+
+export interface AccordionHeaderExternalSignature {
+  /**
+   * Add aria-level according to the heading level where the accordion is used (default: 3).
+   * See https://www.w3.org/WAI/ARIA/apg/patterns/accordion/ for more information.
+   */
+  Element: HTMLDivElement;
+  Blocks: {
+    default: [
+      {
+        /**
+         * The AccordionTrigger component.
+         */
+        Trigger: WithBoundArgs<typeof Trigger, 'value' | 'isExpanded' | 'disabled' | 'toggleItem'>;
+      },
+    ];
+  };
+}
+
+export interface AccordionItemExternalSignature {
+  Element: HTMLDivElement;
+  Blocks: {
+    default: [
+      {
+        /**
+         * Whether the accordion item is expanded.
+         */
+        isExpanded: boolean;
+        /**
+         * The AccordionHeader component.
+         */
+        Header: WithBoundArgs<typeof Header, 'value' | 'isExpanded' | 'disabled' | 'toggleItem'>;
+        /**
+         * The AccordionContent component.
+         */
+        Content: WithBoundArgs<typeof Content, 'value' | 'isExpanded' | 'disabled'>;
+      },
+    ];
+  };
+  Args: {
+    /**
+     * The value of the accordion item.
+     */
+    value: string;
+  };
+}

package/src/components/accordion/trigger.gts

@@ -0,0 +1,32 @@
+import { on } from "@ember/modifier";
+
+import { getDataState } from "./item.gts";
+
+import type { AccordionTriggerExternalSignature } from "./public.ts";
+import type { TOC } from "@ember/component/template-only";
+
+interface Signature extends AccordionTriggerExternalSignature {
+  Args: {
+    isExpanded: boolean;
+    value: string;
+    disabled?: boolean;
+    toggleItem: () => void;
+  };
+}
+
+export const AccordionTrigger: TOC<Signature> = <template>
+  <button
+    type="button"
+    aria-controls={{@value}}
+    aria-expanded={{@isExpanded}}
+    data-state={{getDataState @isExpanded}}
+    data-disabled={{@disabled}}
+    aria-disabled={{if @disabled "true" "false"}}
+    {{on "click" @toggleItem}}
+    ...attributes
+  >
+    {{yield}}
+  </button>
+</template>;
+
+export default AccordionTrigger;

package/src/components/accordion.gts

@@ -0,0 +1,195 @@
+import Component from "@glimmer/component";
+import { assert } from "@ember/debug";
+import { hash } from "@ember/helper";
+
+// temp
+//  https://github.com/tracked-tools/tracked-toolbox/issues/38
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { localCopy } from "tracked-toolbox";
+
+import AccordionItem from "./accordion/item.gts";
+
+import type { WithBoundArgs } from "@glint/template";
+
+type AccordionSingleArgs = {
+  /**
+   * The type of accordion. If `single`, only one item can be selected at a time. If `multiple`, multiple items can be selected at a time.
+   */
+  type: "single";
+  /**
+   * Whether the accordion is disabled. When `true`, all items cannot be expanded or collapsed.
+   */
+  disabled?: boolean;
+  /**
+   * When type is `single`, whether the accordion is collapsible. When `true`, the selected item can be collapsed by clicking its trigger.
+   */
+  collapsible?: boolean;
+} & (
+  | {
+      /**
+       * The currently selected value. To be used in a controlled fashion in conjunction with `onValueChange`.
+       */
+      value: string;
+      /**
+       * A callback that is called when the selected value changes. To be used in a controlled fashion in conjunction with `value`.
+       */
+      onValueChange: (value: string | undefined) => void;
+      /**
+       * Not available in a controlled fashion.
+       */
+      defaultValue?: never;
+    }
+  | {
+      /**
+       * Not available in an uncontrolled fashion.
+       */
+      value?: never;
+      /**
+       * Not available in an uncontrolled fashion.
+       */
+      onValueChange?: never;
+      /**
+       * The default value of the accordion. To be used in an uncontrolled fashion.
+       */
+      defaultValue?: string;
+    }
+);
+
+type AccordionMultipleArgs = {
+  /**
+   * The type of accordion. If `single`, only one item can be selected at a time. If `multiple`, multiple items can be selected at a time.
+   */
+  type: "multiple";
+  /**
+   * Whether the accordion is disabled. When `true`, all items cannot be expanded or collapsed.
+   */
+  disabled?: boolean;
+} & (
+  | {
+      /**
+       * The currently selected values. To be used in a controlled fashion in conjunction with `onValueChange`.
+       */
+      value: string[];
+      /**
+       * A callback that is called when the selected values change. To be used in a controlled fashion in conjunction with `value`.
+       */
+      onValueChange: (value?: string[]) => void;
+      /**
+       * Not available in a controlled fashion.
+       */
+      defaultValue?: never;
+    }
+  | {
+      /**
+       * Not available in an uncontrolled fashion.
+       */
+      value?: never;
+      /**
+       * Not available in an uncontrolled fashion.
+       */
+      onValueChange?: never;
+      /**
+       * The default values of the accordion. To be used in an uncontrolled fashion.
+       */
+      defaultValue?: string[];
+    }
+);
+
+export class Accordion extends Component<{
+  Element: HTMLDivElement;
+  Args: AccordionSingleArgs | AccordionMultipleArgs;
+  Blocks: {
+    default: [
+      {
+        /**
+         * The AccordionItem component.
+         */
+        Item: WithBoundArgs<typeof AccordionItem, "selectedValue" | "toggleItem" | "disabled">;
+      },
+    ];
+  };
+}> {
+  <template>
+    <div data-disabled={{@disabled}} ...attributes>
+      {{yield
+        (hash
+          Item=(component
+            AccordionItem
+            selectedValue=this.selectedValue
+            toggleItem=this.toggleItem
+            disabled=@disabled
+          )
+        )
+      }}
+    </div>
+  </template>
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+  @localCopy("args.defaultValue") declare _internallyManagedValue?: string | string[];
+
+  get selectedValue() {
+    return this.args.value ?? this._internallyManagedValue;
+  }
+
+  toggleItem = (value: string) => {
+    if (this.args.disabled) {
+      return;
+    }
+
+    if (this.args.type === "single") {
+      this.toggleItemSingle(value);
+    } else if (this.args.type === "multiple") {
+      this.toggleItemMultiple(value);
+    }
+  };
+
+  toggleItemSingle = (value: string) => {
+    assert("Cannot call `toggleItemSingle` when `disabled` is true.", !this.args.disabled);
+    assert(
+      "Cannot call `toggleItemSingle` when `type` is not `single`.",
+      this.args.type === "single",
+    );
+
+    if (value === this.selectedValue && !this.args.collapsible) {
+      return;
+    }
+
+    const newValue = value === this.selectedValue ? undefined : value;
+
+    if (this.args.onValueChange) {
+      this.args.onValueChange(newValue);
+    } else {
+      this._internallyManagedValue = newValue;
+    }
+  };
+
+  toggleItemMultiple = (value: string) => {
+    assert("Cannot call `toggleItemMultiple` when `disabled` is true.", !this.args.disabled);
+    assert(
+      "Cannot call `toggleItemMultiple` when `type` is not `multiple`.",
+      this.args.type === "multiple",
+    );
+
+    const currentValues = (this.selectedValue as string[] | undefined) ?? [];
+    const indexOfValue = currentValues.indexOf(value);
+    let newValue: string[];
+
+    if (indexOfValue === -1) {
+      newValue = [...currentValues, value];
+    } else {
+      newValue = [
+        ...currentValues.slice(0, indexOfValue),
+        ...currentValues.slice(indexOfValue + 1),
+      ];
+    }
+
+    if (this.args.onValueChange) {
+      this.args.onValueChange(newValue);
+    } else {
+      this._internallyManagedValue = newValue;
+    }
+  };
+}
+
+export default Accordion;