@bccampus/ui-components 0.4.1 → 0.4.2

package/dist/listbox.js

@@ -0,0 +1,76 @@
+import { jsx as y } from "react/jsx-runtime";
+import { C as d } from "./composite-component-DSUbd1XS.js";
+import { useMemo as m, useRef as a, useCallback as u } from "react";
+const h = /* @__PURE__ */ new Set(["ctrl", "shift", "alt", "meta"]), f = {
+  " ": "space"
+};
+function K(e) {
+  const r = [];
+  for (const [t, n] of Object.entries(e)) {
+    const o = t.toLowerCase().trim().split(/\s*\+\s*/g);
+    o.length === 1 && h.has(o[0]) ? console.error(`[useKeyboardEvent] '${t}': A key sequence cannot be only a modifier key.`) : o.includes("") ? console.error(`[useKeyboardEvent] '${t}': Invalid key sequence defined in the sequence.`) : r.push({
+      sequence: new RegExp("^" + o.join("\\+") + "$"),
+      handler: n
+    });
+  }
+  return r;
+}
+const l = {
+  eventKeyProp: "key"
+};
+function v(e, r = l) {
+  const t = { ...r, ...l }, n = K(e);
+  return (o) => {
+    const c = o[t.eventKeyProp], s = [];
+    o.ctrlKey && s.push("ctrl"), o.shiftKey && s.push("shift"), o.altKey && s.push("alt"), o.metaKey && s.push("meta"), f[c] ? s.push(f[c]) : s.push(c.toLowerCase());
+    const i = n.find((p) => p.sequence.test(s.join("+")));
+    i && (o.preventDefault(), o.stopPropagation(), i.handler(o));
+  };
+}
+function P(e, r) {
+  return m(() => v(e, r), [e, r]);
+}
+function k({ data: e, ...r }) {
+  const t = a(null), n = u(() => {
+    const s = e.focusProvider.focusedItem.get()?.key;
+    if (s && t.current) {
+      const i = t.current.querySelector(`[data-key="${s}"]`);
+      i && i.focus();
+    }
+  }, [e]), o = P({
+    ArrowUp: () => {
+      e.focusProvider.focusUp(), n();
+    },
+    ArrowDown: () => {
+      e.focusProvider.focusDown(), n();
+    },
+    Home: () => {
+      e.focusProvider.focusToFirst(), n();
+    },
+    End: () => {
+      e.focusProvider.focusToLast(), n();
+    },
+    Space: () => {
+      e.selectionProvider?.toggleSelect(), n();
+    }
+  }), c = u(
+    (s) => {
+      e.focusProvider.focus(s.key), e.selectionProvider?.toggleSelect(s), n();
+    },
+    [e.focusProvider, e.selectionProvider, n]
+  );
+  return /* @__PURE__ */ y(
+    d,
+    {
+      ref: t,
+      variant: "listbox",
+      data: e,
+      onKeyDown: o,
+      itemMouseEventHandler: c,
+      ...r
+    }
+  );
+}
+export {
+  k as Listbox
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bccampus/ui-components",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "type": "module",
   "packageManager": "yarn@4.10.3",
   "exports": {
@@ -12,6 +12,10 @@
       "types": "./dist/composite.d.ts",
       "import": "./dist/composite.js"
     },
+    "./listbox": {
+      "types": "./dist/listbox.d.ts",
+      "import": "./dist/listbox.js"
+    },
     "./icon-generator": {
       "types": "./dist/icon-generator.d.ts",
       "import": "./dist/icon-generator.js"

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

@@ -1,21 +1,22 @@
-import { difference, union } from "@/lib/set-operations";
-import { atom, type PreinitializedWritableAtom } from "nanostores";
-import type { CompositeDataOptions, CompositeItemKey, CompositeOptions } from "./types";
+import type { CompositeDataOptions, CompositeItemKey, CompositeOptions, CompositeProviderOptions } from "./types";
 import { CompositeDataItem } from "./CompositeDataItem";
+import type { AbstractFocusProvider } from "./FocusProvider/AbstractFocusProvider";
+import type { AbstractSelectionProvider } from "./SelectionProvider/AbstractSelectionProvider";
+import { union } from "@/lib/set-operations";
 
 export class CompositeData<T extends object> implements Iterable<CompositeDataItem<T>> {
   #options: CompositeDataOptions<T>;
 
   lookup: Map<CompositeItemKey, CompositeDataItem<T>> = new Map();
 
-  firstFocusableItem!: CompositeDataItem<T> | null;
-  focusedItem: PreinitializedWritableAtom<CompositeDataItem<T> | null> = atom(null);
-  disabledKeys: PreinitializedWritableAtom<Set<CompositeItemKey>> = atom(new Set());
-  selectedKeys: PreinitializedWritableAtom<Set<CompositeItemKey>> = atom(new Set());
+  focusProvider: AbstractFocusProvider<T>;
+  selectionProvider?: AbstractSelectionProvider<T>;
+
+  disabledKeys: Set<CompositeItemKey> = new Set();
 
   root!: CompositeDataItem<T>;
 
-  constructor(items: T[], options?: CompositeOptions) {
+  constructor(items: T[], providerOptions: CompositeProviderOptions<T>, options?: CompositeOptions) {
     this.#options = {
       itemKeyProp: "key",
       itemChildrenProp: "children",
@@ -29,6 +30,9 @@ export class CompositeData<T extends object> implements Iterable<CompositeDataIt
       ...options
     };
 
+    this.focusProvider = providerOptions.focusProvider;
+    this.selectionProvider = providerOptions.selectionProvider;
+
     this.init(items);
   }
 
@@ -49,7 +53,6 @@ export class CompositeData<T extends object> implements Iterable<CompositeDataIt
 
 
   init(items: T[]) {
-    // this.itemAtoms = this.#setItemMap(items);
     this.root = new CompositeDataItem(
       { [this.#options.itemKeyProp]: "ALL", [this.#options.itemChildrenProp]: items } as T,
       this.#options,
@@ -60,50 +63,12 @@ export class CompositeData<T extends object> implements Iterable<CompositeDataIt
     this.lookup = new Map([...this.root].map(item => [item.key, item]));
 
     // Set initially disabled items
-    this.#options.disabledKeys.forEach(disabledKey => this.disable(disabledKey));
-
-    // Set initially selected items : SelectionProvider
-    this.#options.selectedKeys.forEach(selectedKey => this.select(selectedKey));
-
-    // Set initially focused items : FocusProvider
-    this.firstFocusableItem = this.getFirstFocusableItem() ?? null;
-    if (this.firstFocusableItem) {
-      this.firstFocusableItem.state.setKey("focused", true);
-      this.focusedItem.set(this.firstFocusableItem);
-    }
-
-    // Set focus pointers: FocusProvider
-    const lookupData = [...this.lookup];
-    for (let index = 0; index < lookupData.length; index++) {
-      const [key, item] = lookupData[index];
-
-      if (!this.isFocusable(item)) continue;
-
-      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;
-      }
-    }
-  }
+    this.#options.disabledKeys.forEach(disabledKey => this.#disable(disabledKey));
 
+    if (this.selectionProvider)
+      this.selectionProvider.init(this, this.#options);
 
-  isFocusable(itemAtom: CompositeDataItem<T>) {
-    return !itemAtom.state.get().disabled;
-  }
-
-  getFirstFocusableItem() {
-    let iterItem = this.lookup.values().next();
-
-    while (iterItem.value && !this.isFocusable(iterItem.value)) {
-      iterItem = this.lookup.values().next();
-    }
-
-    return iterItem.value;
+    this.focusProvider.init(this, this.#options);
   }
 
   item(key: CompositeItemKey) { return this.lookup.get(key) };
@@ -122,71 +87,14 @@ export class CompositeData<T extends object> implements Iterable<CompositeDataIt
     return item.ancestors();
   }
 
-  focus(itemKey: CompositeItemKey): void;
-  focus(item: CompositeDataItem<T>): void;
-  focus(item: CompositeDataItem<T> | CompositeItemKey) {
-    const _item = item instanceof CompositeDataItem ? item : this.lookup.get(item);
-    if (!_item) return;
-
-    if (this.focusedItem.get()) {
-      if (_item.key === this.focusedItem.get()?.key) return;
-
-      this.focusedItem.get()!.state.setKey("focused", false);
-    }
-
-    _item.state.setKey("focused", true);
-    this.focusedItem.set(_item);
-  }
-
-  toggleSelect(itemKey: CompositeItemKey, recursive?: boolean): void;
-  toggleSelect(item: CompositeDataItem<T>, recursive?: boolean): void;
-  toggleSelect(item: CompositeDataItem<T> | CompositeItemKey, recursive: boolean = false) {
-    const _item = item instanceof CompositeDataItem ? item : this.lookup.get(item);
-    if (!_item) return;
-
-    if (_item.state.get().selected) this.deselect(_item, recursive);
-    else this.select(_item, recursive);
-  }
-
-  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.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.lookup.get(item);
-    if (!_item) return;
-
-    const deselectedKeys = _item.deselect(recursive);
-    this.selectedKeys.set(difference(this.selectedKeys.get(), deselectedKeys));
-  }
-
-  disable(itemKey: CompositeItemKey, recursive?: boolean): void;
-  disable(item: CompositeDataItem<T>, recursive?: boolean): void;
-  disable(item: CompositeDataItem<T> | CompositeItemKey, recursive: boolean = false) {
+  #disable(itemKey: CompositeItemKey, recursive?: boolean): void;
+  #disable(item: CompositeDataItem<T>, recursive?: boolean): void;
+  #disable(item: CompositeDataItem<T> | CompositeItemKey, recursive: boolean = false) {
     const _item = item instanceof CompositeDataItem ? item : this.lookup.get(item);
     if (!_item) return;
 
     const disabledKeys = _item.disable(recursive);
-    this.disabledKeys.set(union(this.selectedKeys.get(), disabledKeys));
-  }
-
-
-  enable(itemKey: CompositeItemKey, recursive?: boolean): void;
-  enable(item: CompositeDataItem<T>, recursive?: boolean): void;
-  enable(item: CompositeDataItem<T> | CompositeItemKey, recursive: boolean = false) {
-    const _item = item instanceof CompositeDataItem ? item : this.lookup.get(item);
-    if (!_item) return;
-
-    const enabledKeys = _item.enable(recursive);
-    this.disabledKeys.set(union(this.selectedKeys.get(), enabledKeys));
+    this.disabledKeys = union(this.disabledKeys, disabledKeys);
   }
 
 
@@ -208,8 +116,8 @@ export class CompositeData<T extends object> implements Iterable<CompositeDataIt
   }
 
   #updateIfSelectedItem(key: CompositeItemKey) {
-    if (this.selectedKeys.get().has(key)) {
-      this.selectedKeys.set(new Set([...this.selectedKeys.get()]));
+    if (this.selectionProvider && this.selectionProvider.selectedKeys.get().has(key)) {
+      this.selectionProvider.selectedKeys.set(new Set([...this.selectionProvider.selectedKeys.get()]));
     }
   }
 }

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

@@ -0,0 +1,83 @@
+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;
+
+  focusUp(): void;
+  focusDown(): void;
+  focusLeft(): void;
+  focusRight(): void;
+  focusPageUp(): void;
+  focesPageDown(): void;
+  focusToFirst(): void;
+  focusToLast(): void;
+  focusToFirstInRow(): void;
+  focusToLastInRow(): void;
+  focusToTypeAheadMatch(): void;
+}
+
+export 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> = atom(null);
+
+  init(data: CompositeData<T>, dataOptions: CompositeDataOptions<T>) {
+    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) {
+    const _item = item instanceof CompositeDataItem ? item : this.data.lookup.get(item);
+    if (!_item) return;
+
+    if (this.focusedItem.get()) {
+      if (_item.key === this.focusedItem.get()?.key) return;
+
+      this.focusedItem.get()!.state.setKey("focused", false);
+    }
+
+    _item.state.setKey("focused", true);
+    this.focusedItem.set(_item);
+  }
+
+  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;
+
+}

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>