@bccampus/ui-components 0.7.0 → 0.7.1

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

@@ -1,144 +1,139 @@
 import { omit } from "@/lib/object";
-import { map, type PreinitializedMapStore, } from "nanostores";
+import { map, type PreinitializedMapStore } from "nanostores";
 import type { CompositeDataItemState, CompositeItemKey, CompositeDataItemOptions } from "./types";
 
 export class CompositeDataItem<T extends object> implements Iterable<CompositeDataItem<T>> {
-    #key: CompositeItemKey;
-    parent: CompositeDataItem<T> | null = 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) {
-        this.#key = options.getItemKey(item);
-        this.data = map(omit(item, [options.itemChildrenProp]));
-        this.state = map({
-            focused: false,
-            selected: false,
-            disabled: false,
-            ...options.initialState
-        })
-        this.pointers = {};
-        this.parent = parent;
-        this.level = parent ? parent.level + 1 : 0;
-
-        this.childrenProp = options.itemChildrenProp;
-
-        const children = options.getItemChildren(item);
-        if (children) {
-            this.children = children.map(child => {
-                const childItem = new CompositeDataItem(child, options, this);
-                return childItem;
-            })
-        }
+  #key: CompositeItemKey;
+  parent: CompositeDataItem<T> | null = 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) {
+    this.#key = options.getItemKey(item);
+    this.data = map(omit(item, [options.itemChildrenProp]));
+    this.state = map({
+      focused: false,
+      selected: false,
+      disabled: false,
+      ...options.initialState,
+    });
+    this.pointers = {};
+    this.parent = parent;
+    this.level = parent ? parent.level + 1 : 0;
+
+    this.childrenProp = options.itemChildrenProp;
+
+    const children = options.getItemChildren(item);
+    if (children) {
+      this.children = children.map((child) => {
+        const childItem = new CompositeDataItem(child, options, this);
+        return childItem;
+      });
     }
+  }
 
-    get key() {
-        return this.#key;
-    }
-
-    *[Symbol.iterator](): Iterator<CompositeDataItem<T>> {
-        if (this.key !== "ALL") yield this;
-        if (this.children)
-            for (const child of this.children)
-                for (const item of child) yield item;
-    }
+  get key() {
+    return this.#key;
+  }
 
-    toJSON() {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const json: any = { ...this.data.get() };
+  *[Symbol.iterator](): Iterator<CompositeDataItem<T>> {
+    if (this.key !== "ALL") yield this;
+    if (this.children) for (const child of this.children) for (const item of child) yield item;
+  }
 
-        if (this.children) {
-            json[this.childrenProp] = [];
-            for (const child of this.children)
-                json[this.childrenProp].push(child.toJSON());
-        }
+  toJSON() {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const json: any = { ...this.data.get() };
 
-        return json as T;
+    if (this.children) {
+      json[this.childrenProp] = [];
+      for (const child of this.children) json[this.childrenProp].push(child.toJSON());
     }
 
-    descendants() {
-        if (!this.children) return [];
+    return json as T;
+  }
 
-        const descendants: CompositeDataItem<T>[] = [];
-        this.children.forEach((child) => {
-            descendants.push(child);
-            const childDescendants = child.descendants();
-            if (childDescendants) descendants.push(...childDescendants);
-        }
-        )
+  descendants() {
+    if (!this.children) return [];
 
-        return descendants;
-    }
+    const descendants: CompositeDataItem<T>[] = [];
+    this.children.forEach((child) => {
+      descendants.push(child);
+      const childDescendants = child.descendants();
+      if (childDescendants) descendants.push(...childDescendants);
+    });
 
-    ancestors() {
-        const ancestors: CompositeDataItem<T>[] = [];
-        let parent = this.parent;
-        while (parent) {
-            ancestors.push(parent);
-            parent = parent.parent;
-        }
+    return descendants;
+  }
 
-        return ancestors;
+  ancestors() {
+    const ancestors: CompositeDataItem<T>[] = [];
+    let parent = this.parent;
+    while (parent) {
+      ancestors.push(parent);
+      parent = parent.parent;
     }
 
+    return ancestors;
+  }
 
-    toggleSelect(recursive: boolean = false) {
-        if (this.state.get().selected) this.deselect(recursive);
-        else this.select(recursive);
-    }
-
-    select(recursive: boolean = false): CompositeItemKey[] {
-        this.state.setKey("selected", true);
+  toggleSelect(recursive: boolean = false) {
+    if (this.state.get().selected) this.deselect(recursive);
+    else this.select(recursive);
+  }
 
-        if (recursive && this.children) {
-            const selectedChildKeys = this.children.map(child => child.select(true)).flat();
-            return [this.key, ...selectedChildKeys];
-        }
+  select(recursive: boolean = false): CompositeItemKey[] {
+    this.state.setKey("selected", true);
 
-        return [this.key]
+    if (recursive && this.children) {
+      const selectedChildKeys = this.children.map((child) => child.select(true)).flat();
+      return [this.key, ...selectedChildKeys];
     }
 
-    deselect(recursive: boolean = false): CompositeItemKey[] {
-        this.state.setKey("selected", false);
+    return [this.key];
+  }
 
-        if (recursive && this.children) {
-            const deselectedChildKeys = this.children.map(child => child.deselect(true)).flat();
-            return [this.key, ...deselectedChildKeys];
-        }
+  deselect(recursive: boolean = false): CompositeItemKey[] {
+    this.state.setKey("selected", false);
 
-        return [this.key];
+    if (recursive && this.children) {
+      const deselectedChildKeys = this.children.map((child) => child.deselect(true)).flat();
+      return [this.key, ...deselectedChildKeys];
     }
 
-    disable(recursive: boolean = false): CompositeItemKey[] {
-        this.state.setKey("disabled", true);
+    return [this.key];
+  }
 
-        if (recursive && this.children) {
-            const disabledChildKeys = this.children.map(child => child.disable(true)).flat();
-            return [this.key, ...disabledChildKeys];
-        }
+  disable(recursive: boolean = false): CompositeItemKey[] {
+    this.state.setKey("disabled", true);
 
-        return [this.key]
+    if (recursive && this.children) {
+      const disabledChildKeys = this.children.map((child) => child.disable(true)).flat();
+      return [this.key, ...disabledChildKeys];
     }
 
-    enable(recursive: boolean = false): CompositeItemKey[] {
-        this.state.setKey("disabled", false);
+    return [this.key];
+  }
 
-        if (recursive && this.children) {
-            const enabledChildKeys = this.children.map(child => child.enable(true)).flat();
-            return [this.key, ...enabledChildKeys];
-        }
+  enable(recursive: boolean = false): CompositeItemKey[] {
+    this.state.setKey("disabled", false);
 
-        return [this.key];
+    if (recursive && this.children) {
+      const enabledChildKeys = this.children.map((child) => child.enable(true)).flat();
+      return [this.key, ...enabledChildKeys];
     }
+
+    return [this.key];
+  }
 }

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

@@ -1,7 +1,7 @@
-import { atom, type PreinitializedWritableAtom } from 'nanostores';
-import type { CompositeData } from '../CompositeData';
-import { CompositeDataItem } from '../CompositeDataItem';
-import type { CompositeDataOptions, CompositeItemKey } from '../types';
+import { atom, type PreinitializedWritableAtom } from "nanostores";
+import type { CompositeData } from "../CompositeData";
+import { CompositeDataItem } from "../CompositeDataItem";
+import type { CompositeDataOptions, CompositeItemKey } from "../types";
 
 export interface FocusProvider {
   focus(itemKey: CompositeItemKey): void;
@@ -31,28 +31,23 @@ export abstract class AbstractFocusProvider<T extends object> implements FocusPr
     this.data = data;
     this.dataOptions = dataOptions;
 
-
     // Set focus pointers
     const [first, last] = this.setFocusPointers();
 
-    // Set initially focused items
     this.firstFocusableItem = first;
-    if (this.firstFocusableItem) {
-      this.firstFocusableItem.state.setKey("focused", true);
-      this.focusedItem.set(this.firstFocusableItem);
-    }
-
     this.lastFocusableItem = last;
   }
 
-
   isFocusable(itemAtom: CompositeDataItem<T>) {
     return !itemAtom.state.get().disabled;
   }
 
   focus(itemKey: CompositeItemKey): void;
   focus(item: CompositeDataItem<T>): void;
-  focus(item: CompositeDataItem<T> | CompositeItemKey) {
+  focus(item: CompositeDataItem<T> | CompositeItemKey | null): void;
+  focus(item: CompositeDataItem<T> | CompositeItemKey | null) {
+    if (!item) return;
+
     const _item = item instanceof CompositeDataItem ? item : this.data.lookup.get(item);
     if (!_item) return;
 
@@ -79,5 +74,4 @@ export abstract class AbstractFocusProvider<T extends object> implements FocusPr
   abstract focusToFirstInRow(): void;
   abstract focusToLastInRow(): void;
   abstract focusToTypeAheadMatch(): void;
-
 }

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

@@ -1,11 +1,10 @@
-
 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
+    let last: CompositeDataItem<T> | null = null;
 
     const lookupData = [...this.data.lookup];
     for (let index = 0; index < lookupData.length; index++) {
@@ -30,36 +29,24 @@ export class ListboxFocusProvider<T extends object> extends AbstractFocusProvide
   }
 
   focusUp(): void {
-    if (this.focusedItem.get()?.pointers.up) {
-      this.focus(this.focusedItem.get()!.pointers.up!);
-    }
+    const focusedItem = this.focusedItem.get();
+    const focusTarget = focusedItem ? focusedItem.pointers.up : this.firstFocusableItem;
+    if (focusTarget) this.focus(focusTarget);
   }
   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.");
-  }
+    const focusedItem = this.focusedItem.get();
+    const focusTarget = focusedItem ? focusedItem.pointers.down : this.firstFocusableItem;
+    if (focusTarget) this.focus(focusTarget);
+  }
+  focusLeft(): void {}
+  focusRight(): void {}
+  focusPageUp(): void {}
+  focesPageDown(): void {}
   focusToFirst(): void {
-    if (this.firstFocusableItem) {
-      this.focus(this.firstFocusableItem);
-    }
+    this.focus(this.firstFocusableItem);
   }
   focusToLast(): void {
-    if (this.lastFocusableItem) {
-      this.focus(this.lastFocusableItem);
-    }
+    this.focus(this.lastFocusableItem);
   }
   focusToFirstInRow(): void {
     throw new Error("Method not implemented.");
@@ -70,5 +57,4 @@ export class ListboxFocusProvider<T extends object> extends AbstractFocusProvide
   focusToTypeAheadMatch(): void {
     throw new Error("Method not implemented.");
   }
-
-}
+}

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

@@ -44,6 +44,7 @@ export abstract class AbstractSelectionProvider<T extends object> {
 
   toggleSelect(itemKey?: CompositeItemKey, recursive?: boolean): void;
   toggleSelect(item: CompositeDataItem<T>, recursive?: boolean): void;
+  toggleSelect(item: CompositeDataItem<T> | CompositeItemKey, recursive?: boolean): void;
   toggleSelect(item?: CompositeDataItem<T> | CompositeItemKey, recursive: boolean = false) {
     const _item = item
       ? item instanceof CompositeDataItem

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

@@ -10,6 +10,7 @@ export function CompositeComponentItem<T extends object>({
   itemMouseEventHandler,
   itemKeyboardEventHandler,
   render,
+  softFocus,
 }: CompositeItemProps<T>) {
   const data = useStore(item.data);
   const state = useStore(item.state);
@@ -29,7 +30,7 @@ export function CompositeComponentItem<T extends object>({
       role={role}
       aria-disabled={state.disabled}
       data-key={item.key}
-      tabIndex={!state.disabled ? (state.focused ? 0 : -1) : undefined}
+      tabIndex={!softFocus && !state.disabled ? (state.focused ? 0 : -1) : undefined}
       className={className}
     >
       {render({ data, key: item.key, level: item.level }, state, handlers)}
@@ -45,6 +46,7 @@ export function CompositeComponentItem<T extends object>({
             className={className}
             itemMouseEventHandler={itemMouseEventHandler}
             itemKeyboardEventHandler={itemKeyboardEventHandler}
+            softFocus={softFocus}
           />
         ))}
     </div>

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

@@ -1,7 +1,9 @@
-import { useImperativeHandle, useMemo } from "react";
-import type { CompositeProps } from "./types";
+import { useCallback, useEffect, useImperativeHandle, useMemo, type FocusEventHandler } from "react";
+import type { CompositeItemKey, CompositeProps } from "./types";
 import { CompositeComponentItem } from "./composite-component-item";
 import { useId } from "@/hooks/use-id";
+import { useRequiredRef } from "@/hooks/use-required-ref";
+import type { CompositeDataItem } from "./CompositeDataItem";
 
 const defaultRoles = {
   listbox: {
@@ -17,6 +19,13 @@ const defaultRoles = {
   custom: undefined,
 };
 
+const isOutsideElement = (parent: Element | null, el: Element | null) => {
+  if (parent === el) return false;
+
+  const nodeId = !!el?.id && CSS.escape(el.id);
+  return !nodeId || parent?.querySelector(`#${nodeId}`) === null;
+};
+
 export function CompositeComponent<T extends object>({
   data,
   variant,
@@ -26,33 +35,78 @@ export function CompositeComponent<T extends object>({
   renderItem,
   className,
   itemClassName,
-  ref,
+  rootRef,
   handleRef,
   id,
   itemMouseEventHandler,
   itemKeyboardEventHandler,
+  initialFocus = "None",
+  softFocus,
   ...props
 }: CompositeProps<T>) {
   const compositeId = useId(id);
+  const $rootRef = useRequiredRef(rootRef);
 
-  useImperativeHandle(
-    handleRef,
-    () => {
-      return {
-        focusProvider: data.focusProvider,
-        selectionProvider: data.selectionProvider,
-      };
-    },
-    [data]
-  );
+  const focusElement = useCallback(() => {
+    if (softFocus) return;
+
+    const itemKey = data.focusProvider.focusedItem.get()?.key;
+
+    if (itemKey && $rootRef.current) {
+      const focusedItemEl = $rootRef.current.querySelector<HTMLElement>(`[data-key="${itemKey}"]`);
+      if (focusedItemEl) focusedItemEl.focus();
+    }
+  }, [softFocus, data.focusProvider.focusedItem, $rootRef]);
+
+  useImperativeHandle(handleRef, () => {
+    return {
+      focusProvider: data.focusProvider,
+      selectionProvider: data.selectionProvider,
+      focusElement,
+    };
+  }, [data, focusElement]);
 
   const roles = useMemo(
     () => defaultRoles[variant] ?? { rootRole, groupRole, itemRole },
-    [groupRole, itemRole, rootRole, variant]
+    [groupRole, itemRole, rootRole, variant],
   );
 
+  const intiFocus = useCallback(
+    (onlyData: boolean) => {
+      let initialFocusItem: CompositeDataItem<T> | CompositeItemKey | null = null;
+
+      if (initialFocus === "FirstItem") initialFocusItem = data.focusProvider.firstFocusableItem;
+      else if (initialFocus === "SelectedItem") {
+        const selecedItem = data.selectionProvider?.selectedKeys.get().values().next().value;
+        initialFocusItem = selecedItem ?? data.focusProvider.firstFocusableItem;
+      }
+
+      data.focusProvider.focus(initialFocusItem);
+      if (!onlyData) focusElement();
+    },
+    [data.focusProvider, data.selectionProvider?.selectedKeys, focusElement, initialFocus],
+  );
+
+  const onFocusHandler: FocusEventHandler = useCallback(
+    (ev) => {
+      const fromOut = isOutsideElement($rootRef.current, ev.relatedTarget);
+      if (fromOut) intiFocus(false);
+    },
+    [$rootRef, intiFocus],
+  );
+
+  useEffect(() => intiFocus(true), [intiFocus]);
+
   return (
-    <div ref={ref} id={compositeId} className={className} tabIndex={-1} role={roles.rootRole} {...props}>
+    <div
+      ref={$rootRef}
+      id={compositeId}
+      className={className}
+      tabIndex={initialFocus === "None" ? 0 : -1}
+      role={roles.rootRole}
+      {...props}
+      onFocus={onFocusHandler}
+    >
       {[...data].map((item) => (
         <CompositeComponentItem
           className={itemClassName}
@@ -64,6 +118,7 @@ export function CompositeComponent<T extends object>({
           render={renderItem}
           itemMouseEventHandler={itemMouseEventHandler}
           itemKeyboardEventHandler={itemKeyboardEventHandler}
+          softFocus={softFocus}
         />
       ))}
     </div>

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

@@ -1,58 +1,61 @@
 import { CompositeComponent } from "./composite-component";
-import { useCallback, useRef } from "react";
+import { useCallback } from "react";
 import { CompositeDataItem } from "./CompositeDataItem";
 import type { BaseCompositeProps } from "./types";
 import { useKeyboardEvent } from "@/hooks/use-keyboard-event";
+import { useRequiredRef } from "@/hooks/use-required-ref";
 
-export function Listbox<T extends object>({ data, ...props }: BaseCompositeProps<T>) {
-  const compositeRef = useRef<HTMLDivElement>(null);
+export function Listbox<T extends object>({
+  data,
+  rootRef,
+  handleRef,
+  initialFocus = "SelectedItem",
+  ...props
+}: BaseCompositeProps<T>) {
+  const $handleRef = useRequiredRef(handleRef);
 
-  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();
+  const handleKeyboardEvent = useKeyboardEvent(
+    {
+      ArrowUp: () => {
+        data.focusProvider.focusUp();
+        $handleRef.current?.focusElement();
+      },
+      ArrowDown: () => {
+        data.focusProvider.focusDown();
+        $handleRef.current?.focusElement();
+      },
+      Home: () => {
+        data.focusProvider.focusToFirst();
+        $handleRef.current?.focusElement();
+      },
+      End: () => {
+        data.focusProvider.focusToLast();
+        $handleRef.current?.focusElement();
+      },
+      Space: () => {
+        data.selectionProvider?.toggleSelect();
+        $handleRef.current?.focusElement();
+      },
     },
-    End: () => {
-      data.focusProvider.focusToLast();
-      focusElement();
-    },
-    Space: () => {
-      data.selectionProvider?.toggleSelect();
-      focusElement();
-    },
-  });
+    [$handleRef, data.focusProvider],
+  );
 
   const handleItemMouseEvent = useCallback(
     (item: CompositeDataItem<T>) => {
       data.focusProvider.focus(item.key);
       data.selectionProvider?.toggleSelect(item);
-      focusElement();
+      $handleRef.current?.focusElement();
     },
-    [data.focusProvider, data.selectionProvider, focusElement]
+    [$handleRef, data.focusProvider, data.selectionProvider],
   );
 
   return (
     <CompositeComponent
-      ref={compositeRef}
+      rootRef={rootRef}
+      handleRef={$handleRef}
       variant="listbox"
       data={data}
+      initialFocus={initialFocus}
       onKeyDown={handleKeyboardEvent}
       itemMouseEventHandler={handleItemMouseEvent}
       {...props}