@bccampus/ui-components 0.4.0 → 0.4.2

package/dist/SingleSelectionProvider.d.ts

@@ -0,0 +1,141 @@
+import { PreinitializedMapStore } from 'nanostores';
+import { PreinitializedWritableAtom } from 'nanostores';
+
+declare abstract class AbstractFocusProvider<T extends object> implements FocusProvider {
+    protected data: CompositeData<T>;
+    protected dataOptions: CompositeDataOptions<T>;
+    firstFocusableItem: CompositeDataItem<T> | null;
+    lastFocusableItem: CompositeDataItem<T> | null;
+    focusedItem: PreinitializedWritableAtom<CompositeDataItem<T> | null>;
+    init(data: CompositeData<T>, dataOptions: CompositeDataOptions<T>): void;
+    isFocusable(itemAtom: CompositeDataItem<T>): boolean;
+    focus(itemKey: CompositeItemKey): void;
+    focus(item: CompositeDataItem<T>): void;
+    abstract setFocusPointers(): readonly [first: CompositeDataItem<T> | null, last: CompositeDataItem<T> | null];
+    abstract focusUp(): void;
+    abstract focusDown(): void;
+    abstract focusLeft(): void;
+    abstract focusRight(): void;
+    abstract focusPageUp(): void;
+    abstract focesPageDown(): void;
+    abstract focusToFirst(): void;
+    abstract focusToLast(): void;
+    abstract focusToFirstInRow(): void;
+    abstract focusToLastInRow(): void;
+    abstract focusToTypeAheadMatch(): void;
+}
+
+declare abstract class AbstractSelectionProvider<T extends object> {
+    protected data: CompositeData<T>;
+    protected dataOptions: CompositeDataOptions<T>;
+    selectedKeys: PreinitializedWritableAtom<Set<CompositeItemKey>>;
+    init(data: CompositeData<T>, dataOptions: CompositeDataOptions<T>): void;
+    abstract select(itemKey?: CompositeItemKey, recursive?: boolean): void;
+    abstract select(item: CompositeDataItem<T>, recursive?: boolean): void;
+    abstract select(item?: CompositeDataItem<T> | CompositeItemKey, recursive?: boolean): void;
+    abstract deselect(itemKey?: CompositeItemKey, recursive?: boolean): void;
+    abstract deselect(item: CompositeDataItem<T>, recursive?: boolean): void;
+    abstract deselect(item?: CompositeDataItem<T> | CompositeItemKey, recursive?: boolean): void;
+    toggleSelect(itemKey?: CompositeItemKey, recursive?: boolean): void;
+    toggleSelect(item: CompositeDataItem<T>, recursive?: boolean): void;
+}
+
+declare class CompositeData<T extends object> implements Iterable<CompositeDataItem<T>> {
+    #private;
+    lookup: Map<CompositeItemKey, CompositeDataItem<T>>;
+    focusProvider: AbstractFocusProvider<T>;
+    selectionProvider?: AbstractSelectionProvider<T>;
+    disabledKeys: Set<CompositeItemKey>;
+    root: CompositeDataItem<T>;
+    constructor(items: T[], providerOptions: CompositeProviderOptions<T>, options?: CompositeOptions);
+    [Symbol.iterator](): Iterator<CompositeDataItem<T>>;
+    toJSON(): T[];
+    init(items: T[]): void;
+    item(key: CompositeItemKey): CompositeDataItem<T> | undefined;
+    descendants(itemKey: CompositeItemKey): CompositeDataItem<T>[] | undefined;
+    ancestors(itemKey: CompositeItemKey): CompositeDataItem<T>[] | undefined;
+    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[];
+}
+
+declare type CompositeDataItemOptions<T> = CompositeDataPropGetters<T> & {
+    initialState?: CompositeDataItemState;
+    itemChildrenProp: string;
+};
+
+declare interface CompositeDataItemState {
+    focused: boolean;
+    selected: boolean;
+    disabled: boolean;
+}
+
+declare type CompositeDataOptions<T> = Required<CompositeOptions> & CompositeDataPropGetters<T>;
+
+declare interface CompositeDataPropGetters<T> {
+    getItemKey: (item: T) => CompositeItemKey;
+    getItemChildren: (item: T) => T[] | undefined;
+}
+
+declare type CompositeItemKey = string | number;
+
+declare interface CompositeOptions {
+    disabledKeys?: CompositeItemKey[];
+    selectedKeys?: CompositeItemKey[];
+    itemKeyProp?: string;
+    itemChildrenProp?: string;
+}
+
+declare interface CompositeProviderOptions<T extends object> {
+    focusProvider: AbstractFocusProvider<T>;
+    selectionProvider?: AbstractSelectionProvider<T>;
+}
+
+declare interface FocusProvider {
+    focus(itemKey: CompositeItemKey): void;
+    focusUp(): void;
+    focusDown(): void;
+    focusLeft(): void;
+    focusRight(): void;
+    focusPageUp(): void;
+    focesPageDown(): void;
+    focusToFirst(): void;
+    focusToLast(): void;
+    focusToFirstInRow(): void;
+    focusToLastInRow(): void;
+    focusToTypeAheadMatch(): void;
+}
+
+export declare class SingleSelectionProvider<T extends object> extends AbstractSelectionProvider<T> {
+    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;
+}
+
+export { }

package/dist/SingleSelectionProvider.js

@@ -0,0 +1,23 @@
+import { C as c } from "./CompositeDataItem-DuHOHCWy.js";
+import { A as d, d as i } from "./AbstractSelectionProvider-BtaROstC.js";
+class u extends d {
+  select(e, r = !1) {
+    const t = e ? e instanceof c ? e : this.data.lookup.get(e) : this.data.focusProvider.focusedItem.get();
+    if (!t) return;
+    this.selectedKeys.get().forEach((a) => {
+      const o = this.data.lookup.get(a);
+      o && o.deselect(!1);
+    });
+    const s = t.select(!1);
+    this.selectedKeys.set(new Set(s));
+  }
+  deselect(e, r = !1) {
+    const t = e ? e instanceof c ? e : this.data.lookup.get(e) : this.data.focusProvider.focusedItem.get();
+    if (!t) return;
+    const s = t.deselect(!1);
+    this.selectedKeys.set(i(this.selectedKeys.get(), s));
+  }
+}
+export {
+  u as SingleSelectionProvider
+};

package/dist/composite-component-DSUbd1XS.js

@@ -0,0 +1,122 @@
+import { jsxs as h, jsx as b } from "react/jsx-runtime";
+import { useRef as S, useCallback as $, useSyncExternalStore as C, useMemo as g, useId as P, useImperativeHandle as m } from "react";
+function w(o, r, e) {
+  let t = new Set(r).add(void 0);
+  return o.listen((s, l, n) => {
+    t.has(n) && e(s, l, n);
+  });
+}
+let f = (o, r) => (e) => {
+  o.current !== e && (o.current = e, r());
+};
+function R(o, { keys: r, deps: e = [o, r] } = {}) {
+  let t = S();
+  t.current = o.get();
+  let s = $((n) => (f(t, n)(o.value), r?.length > 0 ? w(o, r, f(t, n)) : o.listen(f(t, n))), e), l = () => t.current;
+  return C(s, l, l);
+}
+function v({
+  id: o,
+  className: r,
+  item: e,
+  role: t,
+  itemMouseEventHandler: s,
+  itemKeyboardEventHandler: l,
+  render: n
+}) {
+  const i = R(e.data), u = R(e.state), c = g(() => u.disabled ? {} : {
+    mouseEventHandler: () => s?.(e),
+    keyboardEventHandler: () => l?.(e)
+  }, [u.disabled, e, l, s]);
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      id: o,
+      role: t,
+      "aria-disabled": u.disabled,
+      "data-key": e.key,
+      tabIndex: u.disabled ? void 0 : u.focused ? 0 : -1,
+      className: r,
+      children: [
+        n({ data: i, key: e.key, level: e.level }, u, c),
+        e.children && e.children.length > 0 && [...e.children].map((d) => /* @__PURE__ */ b(
+          v,
+          {
+            id: `${o}-${e.key}`,
+            role: t,
+            item: d,
+            render: n,
+            className: r,
+            itemMouseEventHandler: s,
+            itemKeyboardEventHandler: l
+          },
+          d.key
+        ))
+      ]
+    }
+  );
+}
+function j(o) {
+  return o ?? P();
+}
+const q = {
+  listbox: {
+    rootRole: "listbox",
+    groupRole: "group",
+    itemRole: "option"
+  },
+  grid: {
+    rootRole: "grid",
+    groupRole: "rowgroup",
+    itemRole: "row"
+  },
+  custom: void 0
+};
+function B({
+  data: o,
+  variant: r,
+  rootRole: e,
+  itemRole: t,
+  groupRole: s,
+  renderItem: l,
+  className: n,
+  itemClassName: i,
+  ref: u,
+  handleRef: c,
+  id: d,
+  itemMouseEventHandler: x,
+  itemKeyboardEventHandler: y,
+  ...I
+}) {
+  const k = j(d);
+  m(
+    c,
+    () => ({
+      focusProvider: o.focusProvider,
+      selectionProvider: o.selectionProvider
+    }),
+    [o]
+  );
+  const a = g(
+    () => q[r] ?? { rootRole: e, groupRole: s, itemRole: t },
+    [s, t, e, r]
+  );
+  return /* @__PURE__ */ b("div", { ref: u, id: k, className: n, tabIndex: -1, role: a.rootRole, ...I, children: [...o].map((p) => /* @__PURE__ */ b(
+    v,
+    {
+      className: i,
+      id: `${k}-${p.key}`,
+      role: a.itemRole,
+      groupRole: a.groupRole,
+      item: p,
+      render: l,
+      itemMouseEventHandler: x,
+      itemKeyboardEventHandler: y
+    },
+    p.key
+  )) });
+}
+export {
+  B as C,
+  v as a
+};

package/dist/composite.d.ts

@@ -1,3 +1,4 @@
+import { AriaRole } from 'react';
 import { JSX } from 'react/jsx-runtime';
 import { KeyboardEventHandler } from 'react';
 import { MouseEventHandler } from 'react';
@@ -5,50 +6,76 @@ 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 abstract class AbstractFocusProvider<T extends object> implements FocusProvider {
+    protected data: CompositeData<T>;
+    protected dataOptions: CompositeDataOptions<T>;
+    firstFocusableItem: CompositeDataItem<T> | null;
+    lastFocusableItem: CompositeDataItem<T> | null;
+    focusedItem: PreinitializedWritableAtom<CompositeDataItem<T> | null>;
+    init(data: CompositeData<T>, dataOptions: CompositeDataOptions<T>): void;
+    isFocusable(itemAtom: CompositeDataItem<T>): boolean;
+    focus(itemKey: CompositeItemKey): void;
+    focus(item: CompositeDataItem<T>): void;
+    abstract setFocusPointers(): readonly [first: CompositeDataItem<T> | null, last: CompositeDataItem<T> | null];
+    abstract focusUp(): void;
+    abstract focusDown(): void;
+    abstract focusLeft(): void;
+    abstract focusRight(): void;
+    abstract focusPageUp(): void;
+    abstract focesPageDown(): void;
+    abstract focusToFirst(): void;
+    abstract focusToLast(): void;
+    abstract focusToFirstInRow(): void;
+    abstract focusToLastInRow(): void;
+    abstract focusToTypeAheadMatch(): void;
+}
 
-export declare function CompositeComponentContext<T extends object>({ data, children, ...compositeOptions }: CompositeComponentContextProps<T>): JSX.Element;
+export declare abstract class AbstractSelectionProvider<T extends object> {
+    protected data: CompositeData<T>;
+    protected dataOptions: CompositeDataOptions<T>;
+    selectedKeys: PreinitializedWritableAtom<Set<CompositeItemKey>>;
+    init(data: CompositeData<T>, dataOptions: CompositeDataOptions<T>): void;
+    abstract select(itemKey?: CompositeItemKey, recursive?: boolean): void;
+    abstract select(item: CompositeDataItem<T>, recursive?: boolean): void;
+    abstract select(item?: CompositeDataItem<T> | CompositeItemKey, recursive?: boolean): void;
+    abstract deselect(itemKey?: CompositeItemKey, recursive?: boolean): void;
+    abstract deselect(item: CompositeDataItem<T>, recursive?: boolean): void;
+    abstract deselect(item?: CompositeDataItem<T> | CompositeItemKey, recursive?: boolean): void;
+    toggleSelect(itemKey?: CompositeItemKey, recursive?: boolean): void;
+    toggleSelect(item: CompositeDataItem<T>, recursive?: boolean): void;
+}
 
-declare interface CompositeComponentContextProps<T extends object> extends CompositeOptions {
-    data: T[];
-    children: React.ReactNode;
+export declare interface BaseCompositeProps<T extends object> extends React.ComponentPropsWithoutRef<"div"> {
+    data: CompositeData<T>;
+    className?: string;
+    ref?: React.Ref<HTMLDivElement>;
+    handleRef?: React.Ref<CompositeHandle>;
+    renderItem: CompositeItemRenderFn<T>;
+    itemClassName?: string;
 }
 
-export declare function CompositeComponentItem<T extends object>({ id, className, item, mouseEventHandler, keyboardEventHandler, render, }: CompositeItemProps<T>): JSX.Element;
+export declare function CompositeComponent<T extends object>({ data, variant, rootRole, itemRole, groupRole, renderItem, className, itemClassName, ref, handleRef, id, itemMouseEventHandler, itemKeyboardEventHandler, ...props }: CompositeProps<T>): JSX.Element;
+
+export declare function CompositeComponentItem<T extends object>({ id, className, item, role, itemMouseEventHandler, itemKeyboardEventHandler, render, }: CompositeItemProps<T>): JSX.Element;
 
-declare class CompositeData<T extends object> implements Iterable<CompositeDataItem<T>> {
+export 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>>;
+    focusProvider: AbstractFocusProvider<T>;
+    selectionProvider?: AbstractSelectionProvider<T>;
+    disabledKeys: Set<CompositeItemKey>;
     root: CompositeDataItem<T>;
-    constructor(items: T[], options?: CompositeOptions);
+    constructor(items: T[], providerOptions: CompositeProviderOptions<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>> {
+export declare class CompositeDataItem<T extends object> implements Iterable<CompositeDataItem<T>> {
     #private;
     parent: CompositeDataItem<T> | null;
     children?: CompositeDataItem<T>[];
@@ -93,35 +120,29 @@ declare interface CompositeDataPropGetters<T> {
     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 CompositeEventHandlers {
+    mouseEventHandler?: MouseEventHandler<HTMLElement>;
+    keyboardEventHandler?: KeyboardEventHandler<HTMLElement>;
 }
 
 export declare interface CompositeHandle {
-    focusUp: () => void;
-    focusDown: () => void;
-    select: () => void;
+    focusProvider: FocusProvider;
+    selectionProvider?: SelectionProvider;
 }
 
-export declare interface CompositeItemEventHandlers {
-    mouseEventHandler?: MouseEventHandler<HTMLElement>;
-    keyboardEventHandler?: KeyboardEventHandler<HTMLElement>;
+export declare interface CompositeItemEventHandlerFunctions<T extends object> {
+    itemMouseEventHandler?: (itemAtom: CompositeDataItem<T>) => void;
+    itemKeyboardEventHandler?: (itemAtom: CompositeDataItem<T>) => void;
 }
 
 export declare type CompositeItemKey = string | number;
 
-export declare interface CompositeItemProps<T extends object> {
+export declare interface CompositeItemProps<T extends object> extends CompositeItemEventHandlerFunctions<T> {
     id: string;
     className?: string;
+    role?: AriaRole;
+    groupRole?: AriaRole;
     item: CompositeDataItem<T>;
-    mouseEventHandler?: (itemAtom: CompositeDataItem<T>) => void;
-    keyboardEventHandler?: (itemAtom: CompositeDataItem<T>) => void;
     remove?: () => void;
     render: CompositeItemRenderFn<T>;
 }
@@ -130,7 +151,7 @@ export declare type CompositeItemRenderFn<T extends object> = (item: {
     data: T;
     level: number;
     key: CompositeItemKey;
-}, state: CompositeDataItemState, eventHandlers: CompositeItemEventHandlers) => ReactNode;
+}, state: CompositeDataItemState, eventHandlers: CompositeEventHandlers) => ReactNode;
 
 export declare interface CompositeOptions {
     disabledKeys?: CompositeItemKey[];
@@ -139,13 +160,49 @@ export declare interface CompositeOptions {
     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 type CompositeProps<T extends object> = BaseCompositeProps<T> & CompositeItemEventHandlerFunctions<T> & CompositeRoles;
+
+export declare interface CompositeProviderOptions<T extends object> {
+    focusProvider: AbstractFocusProvider<T>;
+    selectionProvider?: AbstractSelectionProvider<T>;
+}
+
+export declare type CompositeRoles = {
+    variant: 'listbox';
+    rootRole?: never;
+    itemRole?: never;
+    groupRole?: never;
+} | {
+    variant: 'grid';
+    rootRole?: never;
+    itemRole?: never;
+    groupRole?: never;
+} | {
+    variant: 'custom';
+    rootRole: AriaRole;
+    itemRole: AriaRole;
+    groupRole: AriaRole;
+};
+
+export declare interface FocusProvider {
+    focus(itemKey: CompositeItemKey): void;
+    focusUp(): void;
+    focusDown(): void;
+    focusLeft(): void;
+    focusRight(): void;
+    focusPageUp(): void;
+    focesPageDown(): void;
+    focusToFirst(): void;
+    focusToLast(): void;
+    focusToFirstInRow(): void;
+    focusToLastInRow(): void;
+    focusToTypeAheadMatch(): void;
 }
 
-export declare function useCompositeContext<T extends object>(): CompositeData<T>;
+export declare interface SelectionProvider {
+    select(itemKey?: CompositeItemKey, recursive?: boolean): void;
+    deselect(itemKey?: CompositeItemKey, recursive?: boolean): void;
+    toggleSelect(itemKey?: CompositeItemKey, recursive?: boolean): void;
+}
 
 export { }