@bccampus/ui-components 0.3.0 → 0.4.0

package/dist/composite.d.ts

@@ -0,0 +1,151 @@
+import { JSX } from 'react/jsx-runtime';
+import { KeyboardEventHandler } from 'react';
+import { MouseEventHandler } from 'react';
+import { PreinitializedMapStore } from 'nanostores';
+import { PreinitializedWritableAtom } from 'nanostores';
+import { ReactNode } from 'react';
+
+export declare function CompositeComponent<T extends object>({ renderItem, className, itemClassName, ref, id, ...props }: CompositeProps<T>): JSX.Element;
+
+export declare function CompositeComponentContext<T extends object>({ data, children, ...compositeOptions }: CompositeComponentContextProps<T>): JSX.Element;
+
+declare interface CompositeComponentContextProps<T extends object> extends CompositeOptions {
+    data: T[];
+    children: React.ReactNode;
+}
+
+export declare function CompositeComponentItem<T extends object>({ id, className, item, mouseEventHandler, keyboardEventHandler, render, }: CompositeItemProps<T>): JSX.Element;
+
+declare class CompositeData<T extends object> implements Iterable<CompositeDataItem<T>> {
+    #private;
+    lookup: Map<CompositeItemKey, CompositeDataItem<T>>;
+    firstFocusableItem: CompositeDataItem<T> | null;
+    focusedItem: PreinitializedWritableAtom<CompositeDataItem<T> | null>;
+    disabledKeys: PreinitializedWritableAtom<Set<CompositeItemKey>>;
+    selectedKeys: PreinitializedWritableAtom<Set<CompositeItemKey>>;
+    root: CompositeDataItem<T>;
+    constructor(items: T[], options?: CompositeOptions);
+    [Symbol.iterator](): Iterator<CompositeDataItem<T>>;
+    toJSON(): T[];
+    init(items: T[]): void;
+    isFocusable(itemAtom: CompositeDataItem<T>): boolean;
+    getFirstFocusableItem(): CompositeDataItem<T> | undefined;
+    item(key: CompositeItemKey): CompositeDataItem<T> | undefined;
+    descendants(itemKey: CompositeItemKey): CompositeDataItem<T>[] | undefined;
+    ancestors(itemKey: CompositeItemKey): CompositeDataItem<T>[] | undefined;
+    focus(itemKey: CompositeItemKey): void;
+    focus(item: CompositeDataItem<T>): void;
+    toggleSelect(itemKey: CompositeItemKey, recursive?: boolean): void;
+    toggleSelect(item: CompositeDataItem<T>, recursive?: boolean): void;
+    select(itemKey: CompositeItemKey, recursive?: boolean): void;
+    select(item: CompositeDataItem<T>, recursive?: boolean): void;
+    deselect(itemKey: CompositeItemKey, recursive?: boolean): void;
+    deselect(item: CompositeDataItem<T>, recursive?: boolean): void;
+    disable(itemKey: CompositeItemKey, recursive?: boolean): void;
+    disable(item: CompositeDataItem<T>, recursive?: boolean): void;
+    enable(itemKey: CompositeItemKey, recursive?: boolean): void;
+    enable(item: CompositeDataItem<T>, recursive?: boolean): void;
+    updateItem(key: CompositeItemKey, data: Partial<T> | ((item: T) => Partial<T>)): void;
+}
+
+declare class CompositeDataItem<T extends object> implements Iterable<CompositeDataItem<T>> {
+    #private;
+    parent: CompositeDataItem<T> | null;
+    children?: CompositeDataItem<T>[];
+    level: number;
+    data: PreinitializedMapStore<T>;
+    state: PreinitializedMapStore<CompositeDataItemState>;
+    pointers: {
+        left?: CompositeItemKey;
+        right?: CompositeItemKey;
+        up?: CompositeItemKey;
+        down?: CompositeItemKey;
+    };
+    childrenProp: string;
+    constructor(item: T, options: CompositeDataItemOptions<T>, parent: CompositeDataItem<T> | null);
+    get key(): CompositeItemKey;
+    [Symbol.iterator](): Iterator<CompositeDataItem<T>>;
+    toJSON(): T;
+    descendants(): CompositeDataItem<T>[];
+    ancestors(): CompositeDataItem<T>[];
+    toggleSelect(recursive?: boolean): void;
+    select(recursive?: boolean): CompositeItemKey[];
+    deselect(recursive?: boolean): CompositeItemKey[];
+    disable(recursive?: boolean): CompositeItemKey[];
+    enable(recursive?: boolean): CompositeItemKey[];
+}
+
+export declare type CompositeDataItemOptions<T> = CompositeDataPropGetters<T> & {
+    initialState?: CompositeDataItemState;
+    itemChildrenProp: string;
+};
+
+export declare interface CompositeDataItemState {
+    focused: boolean;
+    selected: boolean;
+    disabled: boolean;
+}
+
+export declare type CompositeDataOptions<T> = Required<CompositeOptions> & CompositeDataPropGetters<T>;
+
+declare interface CompositeDataPropGetters<T> {
+    getItemKey: (item: T) => CompositeItemKey;
+    getItemChildren: (item: T) => T[] | undefined;
+}
+
+export declare interface CompositeFocusProvider {
+    setPointers: () => void;
+    goFirst: () => void;
+    goLast: () => void;
+    goUp: () => void;
+    goDown: () => void;
+    goLeft: () => void;
+    goRight: () => void;
+}
+
+export declare interface CompositeHandle {
+    focusUp: () => void;
+    focusDown: () => void;
+    select: () => void;
+}
+
+export declare interface CompositeItemEventHandlers {
+    mouseEventHandler?: MouseEventHandler<HTMLElement>;
+    keyboardEventHandler?: KeyboardEventHandler<HTMLElement>;
+}
+
+export declare type CompositeItemKey = string | number;
+
+export declare interface CompositeItemProps<T extends object> {
+    id: string;
+    className?: string;
+    item: CompositeDataItem<T>;
+    mouseEventHandler?: (itemAtom: CompositeDataItem<T>) => void;
+    keyboardEventHandler?: (itemAtom: CompositeDataItem<T>) => void;
+    remove?: () => void;
+    render: CompositeItemRenderFn<T>;
+}
+
+export declare type CompositeItemRenderFn<T extends object> = (item: {
+    data: T;
+    level: number;
+    key: CompositeItemKey;
+}, state: CompositeDataItemState, eventHandlers: CompositeItemEventHandlers) => ReactNode;
+
+export declare interface CompositeOptions {
+    disabledKeys?: CompositeItemKey[];
+    selectedKeys?: CompositeItemKey[];
+    itemKeyProp?: string;
+    itemChildrenProp?: string;
+}
+
+export declare interface CompositeProps<T extends object> extends React.ComponentPropsWithoutRef<"div"> {
+    renderItem: CompositeItemRenderFn<T>;
+    className?: string;
+    itemClassName?: string;
+    ref?: React.Ref<CompositeHandle>;
+}
+
+export declare function useCompositeContext<T extends object>(): CompositeData<T>;
+
+export { }

package/dist/composite.js

@@ -0,0 +1,472 @@
+import { jsx as b, jsxs as q } from "react/jsx-runtime";
+import { useMemo as w, createContext as L, useContext as N, useRef as E, useCallback as p, useSyncExternalStore as $, useId as M, useImperativeHandle as A } from "react";
+const O = (o, t) => {
+  const e = { ...o };
+  return t.forEach((s) => {
+    const n = s.split("."), l = n.pop();
+    if (l) {
+      const i = n.reduce((r, d) => r && d in r ? r[d] : void 0, e);
+      i && l in i && delete i[l];
+    }
+  }), e;
+};
+let R = Symbol("clean"), c = [], f = 0;
+const g = 4;
+let K = (o) => {
+  let t = [], e = {
+    get() {
+      return e.lc || e.listen(() => {
+      })(), e.value;
+    },
+    lc: 0,
+    listen(s) {
+      return e.lc = t.push(s), () => {
+        for (let l = f + g; l < c.length; )
+          c[l] === s ? c.splice(l, g) : l += g;
+        let n = t.indexOf(s);
+        ~n && (t.splice(n, 1), --e.lc || e.off());
+      };
+    },
+    notify(s, n) {
+      let l = !c.length;
+      for (let i of t)
+        c.push(i, e.value, s, n);
+      if (l) {
+        for (f = 0; f < c.length; f += g)
+          c[f](
+            c[f + 1],
+            c[f + 2],
+            c[f + 3]
+          );
+        c.length = 0;
+      }
+    },
+    /* It will be called on last listener unsubscribing.
+       We will redefine it in onMount and onStop. */
+    off() {
+    },
+    set(s) {
+      let n = e.value;
+      n !== s && (e.value = s, e.notify(n));
+    },
+    subscribe(s) {
+      let n = e.listen(s);
+      return s(e.value), n;
+    },
+    value: o
+  };
+  return process.env.NODE_ENV !== "production" && (e[R] = () => {
+    t = [], e.lc = 0, e.off();
+  }), e;
+};
+function U(o, t, e) {
+  let s = new Set(t).add(void 0);
+  return o.listen((n, l, i) => {
+    s.has(i) && e(n, l, i);
+  });
+}
+let S = (o = {}) => {
+  let t = K(o);
+  return t.setKey = function(e, s) {
+    let n = t.value;
+    typeof s > "u" && e in t.value ? (t.value = { ...t.value }, delete t.value[e], t.notify(n, e)) : t.value[e] !== s && (t.value = {
+      ...t.value,
+      [e]: s
+    }, t.notify(n, e));
+  }, t;
+};
+class u {
+  #e;
+  parent = null;
+  children;
+  level;
+  data;
+  state;
+  pointers;
+  childrenProp;
+  constructor(t, e, s) {
+    this.#e = e.getItemKey(t), this.data = S(O(t, [e.itemChildrenProp])), this.state = S({
+      focused: !1,
+      selected: !1,
+      disabled: !1,
+      ...e.initialState
+    }), this.pointers = {}, this.parent = s, this.level = s ? s.level + 1 : 0, this.childrenProp = e.itemChildrenProp;
+    const n = e.getItemChildren(t);
+    n && (this.children = n.map((l) => new u(l, e, this)));
+  }
+  get key() {
+    return this.#e;
+  }
+  *[Symbol.iterator]() {
+    if (this.key !== "ALL" && (yield this), this.children)
+      for (const t of this.children)
+        for (const e of t) yield e;
+  }
+  toJSON() {
+    const t = { ...this.data.get() };
+    if (this.children) {
+      t[this.childrenProp] = [];
+      for (const e of this.children)
+        t[this.childrenProp].push(e.toJSON());
+    }
+    return t;
+  }
+  descendants() {
+    if (!this.children) return [];
+    const t = [];
+    return this.children.forEach(
+      (e) => {
+        t.push(e);
+        const s = e.descendants();
+        s && t.push(...s);
+      }
+    ), t;
+  }
+  ancestors() {
+    const t = [];
+    let e = this.parent;
+    for (; e; )
+      t.push(e), e = e.parent;
+    return t;
+  }
+  toggleSelect(t = !1) {
+    this.state.get().selected ? this.deselect(t) : this.select(t);
+  }
+  select(t = !1) {
+    if (this.state.setKey("selected", !0), t && this.children) {
+      const e = this.children.map((s) => s.select(!0)).flat();
+      return [this.key, ...e];
+    }
+    return [this.key];
+  }
+  deselect(t = !1) {
+    if (this.state.setKey("selected", !1), t && this.children) {
+      const e = this.children.map((s) => s.deselect(!0)).flat();
+      return [this.key, ...e];
+    }
+    return [this.key];
+  }
+  disable(t = !1) {
+    if (this.state.setKey("disabled", !0), t && this.children) {
+      const e = this.children.map((s) => s.disable(!0)).flat();
+      return [this.key, ...e];
+    }
+    return [this.key];
+  }
+  enable(t = !1) {
+    if (this.state.setKey("disabled", !1), t && this.children) {
+      const e = this.children.map((s) => s.enable(!0)).flat();
+      return [this.key, ...e];
+    }
+    return [this.key];
+  }
+}
+const j = /* @__PURE__ */ new Set(["ctrl", "shift", "alt", "meta"]), C = {
+  " ": "space"
+};
+function J(o, t) {
+  if (o.size !== t.size) return !1;
+  for (const e of t)
+    if (!o.has(e)) return !1;
+  return !0;
+}
+function Q(o) {
+  const t = [];
+  for (const [e, s] of Object.entries(o)) {
+    const n = e.toLowerCase().trim().split(/\s*\+\s*/);
+    n.length === 1 && j.has(n[0]) ? console.error(`[useKeyboardEvent] \`${e}\`: A key sequence cannot be only a modifier key.`) : n.includes("") ? console.error(`[useKeyboardEvent] \`${e}\`: Unknown key defined in the sequence.`) : t.push({
+      sequence: new Set(n),
+      handler: s
+    });
+  }
+  return t;
+}
+const v = {
+  eventKeyProp: "key"
+};
+function z(o, t = v) {
+  const e = { ...t, ...v }, s = Q(o);
+  return (n) => {
+    const l = /* @__PURE__ */ new Set(), i = n[e.eventKeyProp];
+    n.ctrlKey && l.add("ctrl"), n.shiftKey && l.add("shift"), n.altKey && l.add("alt"), n.metaKey && l.add("meta"), C[i] ? l.add(C[i]) : l.add(i.toLowerCase());
+    const r = s.find((d) => J(l, d.sequence));
+    r && (n.preventDefault(), n.stopPropagation(), r.handler(n));
+  };
+}
+function T(o, t) {
+  return w(() => z(o, t), [o, t]);
+}
+function I(o, t) {
+  const e = new Set(o);
+  for (const s of t)
+    e.add(s);
+  return e;
+}
+function Y(o, t) {
+  const e = new Set(o);
+  for (const s of t)
+    e.delete(s);
+  return e;
+}
+class G {
+  #e;
+  lookup = /* @__PURE__ */ new Map();
+  firstFocusableItem;
+  focusedItem = K(null);
+  disabledKeys = K(/* @__PURE__ */ new Set());
+  selectedKeys = K(/* @__PURE__ */ new Set());
+  root;
+  constructor(t, e) {
+    this.#e = {
+      itemKeyProp: "key",
+      itemChildrenProp: "children",
+      disabledKeys: [],
+      selectedKeys: [],
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      getItemKey: (s) => s[this.#e.itemKeyProp],
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      getItemChildren: (s) => s[this.#e.itemChildrenProp] ? s[this.#e.itemChildrenProp] : void 0,
+      ...e
+    }, this.init(t);
+  }
+  *[Symbol.iterator]() {
+    if (this.root.children)
+      for (const t of this.root.children)
+        yield t;
+  }
+  toJSON() {
+    return this.root.toJSON()[this.#e.itemChildrenProp];
+  }
+  init(t) {
+    this.root = new u(
+      { [this.#e.itemKeyProp]: "ALL", [this.#e.itemChildrenProp]: t },
+      this.#e,
+      null
+    ), this.lookup = new Map([...this.root].map((s) => [s.key, s])), this.#e.disabledKeys.forEach((s) => this.disable(s)), this.#e.selectedKeys.forEach((s) => this.select(s)), this.firstFocusableItem = this.getFirstFocusableItem() ?? null, this.firstFocusableItem && (this.firstFocusableItem.state.setKey("focused", !0), this.focusedItem.set(this.firstFocusableItem));
+    const e = [...this.lookup];
+    for (let s = 0; s < e.length; s++) {
+      const [n, l] = e[s];
+      if (this.isFocusable(l) && s < e.length - 1) {
+        let i = s === e.length - 1 ? 0 : s + 1;
+        for (; i < e.length && !this.isFocusable(e[i][1]); )
+          i = (i + 1) % e.length;
+        l.pointers.down = e[i][0], e[i][1].pointers.up = n;
+      }
+    }
+  }
+  isFocusable(t) {
+    return !t.state.get().disabled;
+  }
+  getFirstFocusableItem() {
+    let t = this.lookup.values().next();
+    for (; t.value && !this.isFocusable(t.value); )
+      t = this.lookup.values().next();
+    return t.value;
+  }
+  item(t) {
+    return this.lookup.get(t);
+  }
+  descendants(t) {
+    const e = this.lookup.get(t);
+    if (e)
+      return e.descendants();
+  }
+  ancestors(t) {
+    const e = this.lookup.get(t);
+    if (e)
+      return e.ancestors();
+  }
+  focus(t) {
+    const e = t instanceof u ? t : this.lookup.get(t);
+    if (e) {
+      if (this.focusedItem.get()) {
+        if (e.key === this.focusedItem.get()?.key) return;
+        this.focusedItem.get().state.setKey("focused", !1);
+      }
+      e.state.setKey("focused", !0), this.focusedItem.set(e);
+    }
+  }
+  toggleSelect(t, e = !1) {
+    const s = t instanceof u ? t : this.lookup.get(t);
+    s && (s.state.get().selected ? this.deselect(s, e) : this.select(s, e));
+  }
+  select(t, e = !1) {
+    const s = t instanceof u ? t : this.lookup.get(t);
+    if (!s) return;
+    const n = s.select(e);
+    this.selectedKeys.set(I(this.selectedKeys.get(), n));
+  }
+  deselect(t, e = !1) {
+    const s = t instanceof u ? t : this.lookup.get(t);
+    if (!s) return;
+    const n = s.deselect(e);
+    this.selectedKeys.set(Y(this.selectedKeys.get(), n));
+  }
+  disable(t, e = !1) {
+    const s = t instanceof u ? t : this.lookup.get(t);
+    if (!s) return;
+    const n = s.disable(e);
+    this.disabledKeys.set(I(this.selectedKeys.get(), n));
+  }
+  enable(t, e = !1) {
+    const s = t instanceof u ? t : this.lookup.get(t);
+    if (!s) return;
+    const n = s.enable(e);
+    this.disabledKeys.set(I(this.selectedKeys.get(), n));
+  }
+  updateItem(t, e) {
+    const s = this.lookup.get(t);
+    if (s) {
+      const n = {
+        ...s.data.get(),
+        ...typeof e == "function" ? e(s.data.get()) : e
+      }, l = this.#e.getItemKey(n);
+      if (s.key !== l) throw "Item key cannot be updated!";
+      this.#t(t), s.data.set(n);
+    }
+  }
+  #t(t) {
+    this.selectedKeys.get().has(t) && this.selectedKeys.set(/* @__PURE__ */ new Set([...this.selectedKeys.get()]));
+  }
+}
+const P = L(void 0);
+function H() {
+  const o = N(P);
+  if (!o)
+    throw new Error("No CompositeDataContext has been set, use CompositeDataContext to provide a context");
+  return o;
+}
+function X({
+  data: o,
+  children: t,
+  ...e
+}) {
+  const s = w(() => new G(o, e), [o, e]);
+  return /* @__PURE__ */ b(P, { value: s, children: t });
+}
+let k = (o, t) => (e) => {
+  o.current !== e && (o.current = e, t());
+};
+function x(o, { keys: t, deps: e = [o, t] } = {}) {
+  let s = E();
+  s.current = o.get();
+  let n = p((i) => (k(s, i)(o.value), t?.length > 0 ? U(o, t, k(s, i)) : o.listen(k(s, i))), e), l = () => s.current;
+  return $(n, l, l);
+}
+function D({
+  id: o,
+  className: t,
+  item: e,
+  mouseEventHandler: s,
+  keyboardEventHandler: n,
+  render: l
+}) {
+  const i = x(e.data), r = x(e.state), d = w(() => r.disabled ? {} : {
+    mouseEventHandler: () => s?.(e),
+    keyboardEventHandler: () => n?.(e)
+  }, [r.disabled, e, n, s]);
+  return /* @__PURE__ */ q(
+    "div",
+    {
+      id: o,
+      role: "option",
+      "aria-disabled": r.disabled,
+      "data-key": e.key,
+      tabIndex: r.disabled ? void 0 : r.focused ? 0 : -1,
+      className: t,
+      children: [
+        l({ data: i, key: e.key, level: e.level }, r, d),
+        e.children && e.children.length > 0 && [...e.children].map((a) => /* @__PURE__ */ b(
+          D,
+          {
+            id: `${o}-${e.key}`,
+            item: a,
+            render: l,
+            className: t,
+            mouseEventHandler: s,
+            keyboardEventHandler: n
+          },
+          a.key
+        ))
+      ]
+    }
+  );
+}
+function V(o) {
+  return o ?? M();
+}
+function Z({
+  renderItem: o,
+  className: t,
+  itemClassName: e,
+  ref: s,
+  id: n,
+  ...l
+}) {
+  const i = H(), r = E(null), d = V(n), a = p(
+    (h) => {
+      i.focus(h);
+    },
+    [i]
+  ), y = p(() => {
+    i.focusedItem.get()?.pointers.down && a(i.focusedItem.get().pointers.down);
+  }, [i, a]), m = p(() => {
+    i.focusedItem.get()?.pointers.up && a(i.focusedItem.get().pointers.up);
+  }, [i, a]), F = T({
+    ArrowUp: m,
+    ArrowLeft: m,
+    ArrowDown: y,
+    ArrowRight: y,
+    Space: () => {
+      i.focusedItem.get() && i.toggleSelect(i.focusedItem.get());
+    }
+  }), _ = p(
+    (h) => {
+      a(h.key), i.toggleSelect(h);
+    },
+    [i, a]
+  );
+  return A(
+    s,
+    () => ({
+      focusDown() {
+        y();
+      },
+      focusUp() {
+        m();
+      },
+      select() {
+        i.focusedItem.get() && i.toggleSelect(i.focusedItem.get());
+      }
+    }),
+    [i, y, m]
+  ), /* @__PURE__ */ b(
+    "div",
+    {
+      ref: r,
+      id: d,
+      className: t,
+      tabIndex: -1,
+      role: "listbox",
+      onKeyDown: F,
+      ...l,
+      children: [...i].map((h) => /* @__PURE__ */ b(
+        D,
+        {
+          className: e,
+          id: `${d}-${h.key}`,
+          item: h,
+          render: o,
+          mouseEventHandler: _
+        },
+        h.key
+      ))
+    }
+  );
+}
+export {
+  Z as CompositeComponent,
+  X as CompositeComponentContext,
+  D as CompositeComponentItem,
+  H as useCompositeContext
+};