@bccampus/ui-components 0.4.0 → 0.4.2

package/src/components/ui/composite/FocusProvider/ListboxFocusProvider.ts

@@ -0,0 +1,74 @@
+
+import type { CompositeDataItem } from "../CompositeDataItem";
+import { AbstractFocusProvider } from "./AbstractFocusProvider";
+
+export class ListboxFocusProvider<T extends object> extends AbstractFocusProvider<T> {
+  setFocusPointers() {
+    let first: CompositeDataItem<T> | null = null;
+    let last: CompositeDataItem<T> | null = null
+
+    const lookupData = [...this.data.lookup];
+    for (let index = 0; index < lookupData.length; index++) {
+      const [key, item] = lookupData[index];
+
+      if (!this.isFocusable(item)) continue;
+      if (!first) first = item;
+      last = item;
+
+      if (index < lookupData.length - 1) {
+        let newIndex = index === lookupData.length - 1 ? 0 : index + 1;
+        while (newIndex < lookupData.length && !this.isFocusable(lookupData[newIndex][1])) {
+          newIndex = (newIndex + 1) % lookupData.length;
+        }
+
+        item.pointers.down = lookupData[newIndex][0];
+        lookupData[newIndex][1].pointers.up = key;
+      }
+    }
+
+    return [first, last] as const;
+  }
+
+  focusUp(): void {
+    if (this.focusedItem.get()?.pointers.up) {
+      this.focus(this.focusedItem.get()!.pointers.up!);
+    }
+  }
+  focusDown(): void {
+    if (this.focusedItem.get()?.pointers.down) {
+      this.focus(this.focusedItem.get()!.pointers.down!);
+    }
+  }
+  focusLeft(): void {
+    throw new Error("Method not implemented.");
+  }
+  focusRight(): void {
+    throw new Error("Method not implemented.");
+  }
+  focusPageUp(): void {
+    throw new Error("Method not implemented.");
+  }
+  focesPageDown(): void {
+    throw new Error("Method not implemented.");
+  }
+  focusToFirst(): void {
+    if (this.firstFocusableItem) {
+      this.focus(this.firstFocusableItem);
+    }
+  }
+  focusToLast(): void {
+    if (this.lastFocusableItem) {
+      this.focus(this.lastFocusableItem);
+    }
+  }
+  focusToFirstInRow(): void {
+    throw new Error("Method not implemented.");
+  }
+  focusToLastInRow(): void {
+    throw new Error("Method not implemented.");
+  }
+  focusToTypeAheadMatch(): void {
+    throw new Error("Method not implemented.");
+  }
+
+}

package/src/components/ui/composite/SelectionProvider/AbstractSelectionProvider.ts

@@ -0,0 +1,45 @@
+import { atom, type PreinitializedWritableAtom } from 'nanostores';
+import type { CompositeData } from '../CompositeData';
+import { CompositeDataItem } from '../CompositeDataItem';
+import type { CompositeDataOptions, CompositeItemKey } from '../types';
+
+export interface SelectionProvider {
+  select(itemKey?: CompositeItemKey, recursive?: boolean): void;
+  deselect(itemKey?: CompositeItemKey, recursive?: boolean): void;
+  toggleSelect(itemKey?: CompositeItemKey, recursive?: boolean): void;
+}
+
+export abstract class AbstractSelectionProvider<T extends object> {
+  protected data!: CompositeData<T>;
+  protected dataOptions!: CompositeDataOptions<T>;
+
+  selectedKeys: PreinitializedWritableAtom<Set<CompositeItemKey>> = atom(new Set());
+
+  init(data: CompositeData<T>, dataOptions: CompositeDataOptions<T>) {
+    this.data = data;
+    this.dataOptions = dataOptions;
+
+    // Set initially selected items : SelectionProvider
+    this.dataOptions.selectedKeys.forEach(selectedKey => this.select(selectedKey));
+
+  }
+
+  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;
+  toggleSelect(item?: CompositeDataItem<T> | CompositeItemKey, recursive: boolean = false) {
+    const _item = item ? item instanceof CompositeDataItem ? item : this.data.lookup.get(item) : this.data.focusProvider.focusedItem.get();
+    if (!_item) return;
+
+    if (_item.state.get().selected) this.deselect(_item, recursive);
+    else this.select(_item, recursive);
+  }
+}

package/src/components/ui/composite/SelectionProvider/MultipleSelectionProvider.ts

@@ -0,0 +1,28 @@
+import { CompositeDataItem } from '../CompositeDataItem';
+import type { CompositeItemKey } from '../types';
+import { AbstractSelectionProvider } from './AbstractSelectionProvider';
+import { difference, union } from "@/lib/set-operations";
+
+export class SingleSelectionProvider<T extends object> extends AbstractSelectionProvider<T> {
+
+
+  select(itemKey: CompositeItemKey, recursive?: boolean): void;
+  select(item: CompositeDataItem<T>, recursive?: boolean): void;
+  select(item: CompositeDataItem<T> | CompositeItemKey, recursive: boolean = false) {
+    const _item = item instanceof CompositeDataItem ? item : this.data.lookup.get(item);
+    if (!_item) return;
+
+    const selectedKeys = _item.select(recursive);
+    this.selectedKeys.set(union(this.selectedKeys.get(), selectedKeys));
+  }
+
+  deselect(itemKey: CompositeItemKey, recursive?: boolean): void;
+  deselect(item: CompositeDataItem<T>, recursive?: boolean): void;
+  deselect(item: CompositeDataItem<T> | CompositeItemKey, recursive: boolean = false) {
+    const _item = item instanceof CompositeDataItem ? item : this.data.lookup.get(item);
+    if (!_item) return;
+
+    const deselectedKeys = _item.deselect(recursive);
+    this.selectedKeys.set(difference(this.selectedKeys.get(), deselectedKeys));
+  }
+}

package/src/components/ui/composite/SelectionProvider/SingleSelectionProvider.ts

@@ -0,0 +1,37 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+import { CompositeDataItem } from '../CompositeDataItem';
+import type { CompositeItemKey } from '../types';
+import { AbstractSelectionProvider } from './AbstractSelectionProvider';
+import { difference } from "@/lib/set-operations";
+
+export class SingleSelectionProvider<T extends object> extends AbstractSelectionProvider<T> {
+
+  select(itemKey?: CompositeItemKey, recursive?: boolean): void;
+  select(item: CompositeDataItem<T>, recursive?: boolean): void;
+  select(item?: CompositeDataItem<T> | CompositeItemKey, _recursive: boolean = false) {
+    const _item = item ? item instanceof CompositeDataItem ? item : this.data.lookup.get(item) : this.data.focusProvider.focusedItem.get();
+    if (!_item) return;
+
+    this.selectedKeys.get().forEach(selectedKey => {
+      const _item = this.data.lookup.get(selectedKey);
+      if (!_item) return;
+
+      _item.deselect(false);
+    });
+
+    const selectedKeys = _item.select(false);
+
+    this.selectedKeys.set(new Set(selectedKeys));
+  }
+
+  deselect(itemKey?: CompositeItemKey, recursive?: boolean): void;
+  deselect(item: CompositeDataItem<T>, recursive?: boolean): void;
+  deselect(item?: CompositeDataItem<T> | CompositeItemKey, _recursive: boolean = false) {
+    const _item = item ? item instanceof CompositeDataItem ? item : this.data.lookup.get(item) : this.data.focusProvider.focusedItem.get();
+    if (!_item) return;
+
+    const deselectedKeys = _item.deselect(false);
+    this.selectedKeys.set(difference(this.selectedKeys.get(), deselectedKeys));
+  }
+}

package/src/components/ui/composite/composite-component-item.tsx

@@ -1,31 +1,32 @@
 import { useMemo } from "react";
-import type { CompositeItemEventHandlers, CompositeItemProps } from "./types";
+import type { CompositeEventHandlers, CompositeItemProps } from "./types";
 import { useStore } from "@nanostores/react";
 
 export function CompositeComponentItem<T extends object>({
   id,
   className,
   item,
-  mouseEventHandler,
-  keyboardEventHandler,
+  role,
+  itemMouseEventHandler,
+  itemKeyboardEventHandler,
   render,
 }: CompositeItemProps<T>) {
   const data = useStore(item.data);
   const state = useStore(item.state);
 
-  const handlers: CompositeItemEventHandlers = useMemo(() => {
+  const handlers: CompositeEventHandlers = useMemo(() => {
     if (state.disabled) return {};
 
     return {
-      mouseEventHandler: () => mouseEventHandler?.(item),
-      keyboardEventHandler: () => keyboardEventHandler?.(item),
+      mouseEventHandler: () => itemMouseEventHandler?.(item),
+      keyboardEventHandler: () => itemKeyboardEventHandler?.(item),
     };
-  }, [state.disabled, item, keyboardEventHandler, mouseEventHandler]);
+  }, [state.disabled, item, itemKeyboardEventHandler, itemMouseEventHandler]);
 
   return (
     <div
       id={id}
-      role="option"
+      role={role}
       aria-disabled={state.disabled}
       data-key={item.key}
       tabIndex={!state.disabled ? (state.focused ? 0 : -1) : undefined}
@@ -37,12 +38,13 @@ export function CompositeComponentItem<T extends object>({
         [...item.children].map((child) => (
           <CompositeComponentItem
             id={`${id}-${item.key}`}
+            role={role}
             item={child}
             key={child.key}
             render={render}
             className={className}
-            mouseEventHandler={mouseEventHandler}
-            keyboardEventHandler={keyboardEventHandler}
+            itemMouseEventHandler={itemMouseEventHandler}
+            itemKeyboardEventHandler={itemKeyboardEventHandler}
           />
         ))}
     </div>

package/src/components/ui/composite/composite-component.tsx

@@ -1,98 +1,69 @@
-import { useCallback, useImperativeHandle, useRef } from "react";
-import { CompositeDataItem } from "./CompositeDataItem";
-import type { CompositeItemKey, CompositeProps } from "./types";
-import { useKeyboardEvent } from "@/hooks/use-keyboard-event";
-import { useCompositeContext } from "./composite-data-context";
+import { useImperativeHandle, useMemo } from "react";
+import type { CompositeProps } from "./types";
 import { CompositeComponentItem } from "./composite-component-item";
 import { useId } from "@/hooks/use-id";
 
+const defaultRoles = {
+  listbox: {
+    rootRole: "listbox",
+    groupRole: "group",
+    itemRole: "option",
+  },
+  grid: {
+    rootRole: "grid",
+    groupRole: "rowgroup",
+    itemRole: "row",
+  },
+  custom: undefined,
+};
+
 export function CompositeComponent<T extends object>({
+  data,
+  variant,
+  rootRole,
+  itemRole,
+  groupRole,
   renderItem,
   className,
   itemClassName,
   ref,
+  handleRef,
   id,
+  itemMouseEventHandler,
+  itemKeyboardEventHandler,
   ...props
 }: CompositeProps<T>) {
-  const compositeData = useCompositeContext<T>();
-  const compositeRef = useRef<HTMLDivElement>(null);
   const compositeId = useId(id);
 
-  const focus = useCallback(
-    (itemKey: CompositeItemKey) => {
-      compositeData.focus(itemKey);
-      // const focusedItemEl = compositeRef.current?.querySelector<HTMLDivElement>(`[data-key="${itemKey}"]`);
-      // if (focusedItemEl) focusedItemEl.focus();
-    },
-    [compositeData]
-  );
-
-  const focusDown = useCallback(() => {
-    if (compositeData.focusedItem.get()?.pointers.down) {
-      focus(compositeData.focusedItem.get()!.pointers.down!);
-    }
-  }, [compositeData, focus]);
-
-  const focusUp = useCallback(() => {
-    if (compositeData.focusedItem.get()?.pointers.up) {
-      focus(compositeData.focusedItem.get()!.pointers.up!);
-    }
-  }, [compositeData, focus]);
-
-  const handleKeyDown = useKeyboardEvent({
-    ArrowUp: focusUp,
-    ArrowLeft: focusUp,
-    ArrowDown: focusDown,
-    ArrowRight: focusDown,
-    Space: () => {
-      if (compositeData.focusedItem.get()) compositeData.toggleSelect(compositeData.focusedItem.get()!);
-    },
-  });
-
-  const handleItemMouseEvent = useCallback(
-    (item: CompositeDataItem<T>) => {
-      focus(item.key);
-      compositeData.toggleSelect(item);
-    },
-    [compositeData, focus]
-  );
-
   useImperativeHandle(
-    ref,
+    handleRef,
     () => {
       return {
-        focusDown() {
-          focusDown();
-        },
-        focusUp() {
-          focusUp();
-        },
-        select() {
-          if (compositeData.focusedItem.get()) compositeData.toggleSelect(compositeData.focusedItem.get()!);
-        },
+        focusProvider: data.focusProvider,
+        selectionProvider: data.selectionProvider,
       };
     },
-    [compositeData, focusDown, focusUp]
+    [data]
+  );
+
+  const roles = useMemo(
+    () => defaultRoles[variant] ?? { rootRole, groupRole, itemRole },
+    [groupRole, itemRole, rootRole, variant]
   );
 
   return (
-    <div
-      ref={compositeRef}
-      id={compositeId}
-      className={className}
-      tabIndex={-1}
-      role="listbox"
-      onKeyDown={handleKeyDown}
-      {...props}
-    >
-      {[...compositeData].map((item) => (
+    <div ref={ref} id={compositeId} className={className} tabIndex={-1} role={roles.rootRole} {...props}>
+      {[...data].map((item) => (
         <CompositeComponentItem
           className={itemClassName}
           id={`${compositeId}-${item.key}`}
+          role={roles.itemRole}
+          groupRole={roles.groupRole}
           item={item}
           key={item.key}
           render={renderItem}
-          mouseEventHandler={handleItemMouseEvent}
+          itemMouseEventHandler={itemMouseEventHandler}
+          itemKeyboardEventHandler={itemKeyboardEventHandler}
         />
       ))}
     </div>

package/src/components/ui/composite/index.ts

@@ -1,4 +1,7 @@
 export * from './composite-component.tsx'
 export * from './composite-component-item.tsx'
-export * from './composite-data-context.tsx'
+export * from './CompositeData.ts'
+export * from './CompositeDataItem.ts'
+export * from './FocusProvider/AbstractFocusProvider.ts'
+export * from './SelectionProvider/AbstractSelectionProvider.ts'
 export * from './types.ts'

package/src/components/ui/composite/listbox.tsx

@@ -0,0 +1,61 @@
+import { CompositeComponent } from "./composite-component";
+import { useCallback, useRef } from "react";
+import { CompositeDataItem } from "./CompositeDataItem";
+import type { BaseCompositeProps } from "./types";
+import { useKeyboardEvent } from "@/hooks/use-keyboard-event";
+
+export function Listbox<T extends object>({ data, ...props }: BaseCompositeProps<T>) {
+  const compositeRef = useRef<HTMLDivElement>(null);
+
+  const focusElement = useCallback(() => {
+    const itemKey = data.focusProvider.focusedItem.get()?.key;
+
+    if (itemKey && compositeRef.current) {
+      const focusedItemEl = compositeRef.current.querySelector<HTMLDivElement>(`[data-key="${itemKey}"]`);
+      if (focusedItemEl) focusedItemEl.focus();
+    }
+  }, [data]);
+
+  const handleKeyboardEvent = useKeyboardEvent({
+    ArrowUp: () => {
+      data.focusProvider.focusUp();
+      focusElement();
+    },
+    ArrowDown: () => {
+      data.focusProvider.focusDown();
+      focusElement();
+    },
+    Home: () => {
+      data.focusProvider.focusToFirst();
+      focusElement();
+    },
+    End: () => {
+      data.focusProvider.focusToLast();
+      focusElement();
+    },
+    Space: () => {
+      data.selectionProvider?.toggleSelect();
+      focusElement();
+    },
+  });
+
+  const handleItemMouseEvent = useCallback(
+    (item: CompositeDataItem<T>) => {
+      data.focusProvider.focus(item.key);
+      data.selectionProvider?.toggleSelect(item);
+      focusElement();
+    },
+    [data.focusProvider, data.selectionProvider, focusElement]
+  );
+
+  return (
+    <CompositeComponent
+      ref={compositeRef}
+      variant="listbox"
+      data={data}
+      onKeyDown={handleKeyboardEvent}
+      itemMouseEventHandler={handleItemMouseEvent}
+      {...props}
+    />
+  );
+}

package/src/components/ui/composite/types.ts

@@ -1,8 +1,29 @@
-import type { KeyboardEventHandler, MouseEventHandler, ReactNode } from "react";
+import type { AriaRole, KeyboardEventHandler, MouseEventHandler, ReactNode } from "react";
 import type { CompositeDataItem } from "./CompositeDataItem";
+import type { AbstractFocusProvider, FocusProvider } from "./FocusProvider/AbstractFocusProvider";
+import type { AbstractSelectionProvider, SelectionProvider } from "./SelectionProvider/AbstractSelectionProvider";
+import type { CompositeData } from "./CompositeData";
 
 export type CompositeItemKey = string | number;
 
+;
+export 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 interface CompositeOptions {
     disabledKeys?: CompositeItemKey[];
     selectedKeys?: CompositeItemKey[];
@@ -16,6 +37,11 @@ interface CompositeDataPropGetters<T> {
     getItemChildren: (item: T) => T[] | undefined;
 }
 
+export interface CompositeProviderOptions<T extends object> {
+    focusProvider: AbstractFocusProvider<T>;
+    selectionProvider?: AbstractSelectionProvider<T>;
+}
+
 export type CompositeDataOptions<T> = Required<CompositeOptions> & CompositeDataPropGetters<T>;
 
 export type CompositeDataItemOptions<T> = CompositeDataPropGetters<T> & {
@@ -29,53 +55,48 @@ export interface CompositeDataItemState {
     disabled: boolean;
 }
 
-export interface CompositeProps<T extends object> extends React.ComponentPropsWithoutRef<"div"> {
-    renderItem: CompositeItemRenderFn<T>;
+export interface CompositeEventHandlers {
+    mouseEventHandler?: MouseEventHandler<HTMLElement>;
+    keyboardEventHandler?: KeyboardEventHandler<HTMLElement>;
+}
+
+export interface CompositeItemEventHandlerFunctions<T extends object> {
+    itemMouseEventHandler?: (itemAtom: CompositeDataItem<T>) => void;
+    itemKeyboardEventHandler?: (itemAtom: CompositeDataItem<T>) => void;
+}
+
+export 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;
-    ref?: React.Ref<CompositeHandle>
+
 }
 
+export type CompositeProps<T extends object> = BaseCompositeProps<T> & CompositeItemEventHandlerFunctions<T> & CompositeRoles;
 
 export interface CompositeHandle {
-    focusUp: () => void;
-    focusDown: () => void;
-    select: () => void;
-}
-
-export interface CompositeItemEventHandlers {
-    mouseEventHandler?: MouseEventHandler<HTMLElement>;
-    keyboardEventHandler?: KeyboardEventHandler<HTMLElement>;
+    focusProvider: FocusProvider;
+    selectionProvider?: SelectionProvider;
 }
 
 export type CompositeItemRenderFn<T extends object> = (
     item: { data: T; level: number; key: CompositeItemKey },
     state: CompositeDataItemState,
-    eventHandlers: CompositeItemEventHandlers
+    eventHandlers: CompositeEventHandlers
 ) => ReactNode;
 
-export interface CompositeItemProps<T extends object> {
+export 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>;
 }
-
-export interface CompositeFocusProvider {
-    setPointers: () => void;
-
-    goFirst: () => void;
-    goLast: () => void;
-    
-    goUp: () => void;
-    goDown: () => void;
-    goLeft: () => void;
-    goRight: () => void;
-
-}

package/src/components/ui/icon-generator/index.ts

@@ -0,0 +1,2 @@
+export * from "./icon-generator.tsx"
+export * from "./types"