@bccampus/ui-components 0.4.1 → 0.4.2

package/dist/composite.js

@@ -1,472 +1,82 @@
-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 {
+import { C as m, a as u } from "./composite-component-DSUbd1XS.js";
+import { C as s } from "./CompositeDataItem-DuHOHCWy.js";
+import { u as n } from "./AbstractSelectionProvider-BtaROstC.js";
+import { A as P } from "./AbstractSelectionProvider-BtaROstC.js";
+import { A as v } from "./AbstractFocusProvider-CxvlcEki.js";
+class l {
   #e;
   lookup = /* @__PURE__ */ new Map();
-  firstFocusableItem;
-  focusedItem = K(null);
-  disabledKeys = K(/* @__PURE__ */ new Set());
-  selectedKeys = K(/* @__PURE__ */ new Set());
+  focusProvider;
+  selectionProvider;
+  disabledKeys = /* @__PURE__ */ new Set();
   root;
-  constructor(t, e) {
+  constructor(e, t, i) {
     this.#e = {
       itemKeyProp: "key",
       itemChildrenProp: "children",
       disabledKeys: [],
       selectedKeys: [],
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      getItemKey: (s) => s[this.#e.itemKeyProp],
+      getItemKey: (o) => o[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);
+      getItemChildren: (o) => o[this.#e.itemChildrenProp] ? o[this.#e.itemChildrenProp] : void 0,
+      ...i
+    }, this.focusProvider = t.focusProvider, this.selectionProvider = t.selectionProvider, this.init(e);
   }
   *[Symbol.iterator]() {
     if (this.root.children)
-      for (const t of this.root.children)
-        yield t;
+      for (const e of this.root.children)
+        yield e;
   }
   toJSON() {
     return this.root.toJSON()[this.#e.itemChildrenProp];
   }
-  init(t) {
-    this.root = new u(
-      { [this.#e.itemKeyProp]: "ALL", [this.#e.itemChildrenProp]: t },
+  init(e) {
+    this.root = new s(
+      { [this.#e.itemKeyProp]: "ALL", [this.#e.itemChildrenProp]: e },
       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;
-      }
+    ), this.lookup = new Map([...this.root].map((t) => [t.key, t])), this.#e.disabledKeys.forEach((t) => this.#t(t)), this.selectionProvider && this.selectionProvider.init(this, this.#e), this.focusProvider.init(this, this.#e);
+  }
+  item(e) {
+    return this.lookup.get(e);
+  }
+  descendants(e) {
+    const t = this.lookup.get(e);
+    if (t)
+      return t.descendants();
+  }
+  ancestors(e) {
+    const t = this.lookup.get(e);
+    if (t)
+      return t.ancestors();
+  }
+  #t(e, t = !1) {
+    const i = e instanceof s ? e : this.lookup.get(e);
+    if (!i) return;
+    const o = i.disable(t);
+    this.disabledKeys = n(this.disabledKeys, o);
+  }
+  updateItem(e, t) {
+    const i = this.lookup.get(e);
+    if (i) {
+      const o = {
+        ...i.data.get(),
+        ...typeof t == "function" ? t(i.data.get()) : t
+      }, r = this.#e.getItemKey(o);
+      if (i.key !== r) throw "Item key cannot be updated!";
+      this.#i(e), i.data.set(o);
     }
   }
-  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));
+  #i(e) {
+    this.selectionProvider && this.selectionProvider.selectedKeys.get().has(e) && this.selectionProvider.selectedKeys.set(/* @__PURE__ */ new Set([...this.selectionProvider.selectedKeys.get()]));
   }
-  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
+  v as AbstractFocusProvider,
+  P as AbstractSelectionProvider,
+  m as CompositeComponent,
+  u as CompositeComponentItem,
+  l as CompositeData,
+  s as CompositeDataItem
 };

package/dist/listbox.d.ts

@@ -0,0 +1,171 @@
+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';
+
+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 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;
+}
+
+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 interface CompositeEventHandlers {
+    mouseEventHandler?: MouseEventHandler<HTMLElement>;
+    keyboardEventHandler?: KeyboardEventHandler<HTMLElement>;
+}
+
+declare interface CompositeHandle {
+    focusProvider: FocusProvider;
+    selectionProvider?: SelectionProvider;
+}
+
+declare type CompositeItemKey = string | number;
+
+declare type CompositeItemRenderFn<T extends object> = (item: {
+    data: T;
+    level: number;
+    key: CompositeItemKey;
+}, state: CompositeDataItemState, eventHandlers: CompositeEventHandlers) => ReactNode;
+
+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 function Listbox<T extends object>({ data, ...props }: BaseCompositeProps<T>): JSX.Element;
+
+declare interface SelectionProvider {
+    select(itemKey?: CompositeItemKey, recursive?: boolean): void;
+    deselect(itemKey?: CompositeItemKey, recursive?: boolean): void;
+    toggleSelect(itemKey?: CompositeItemKey, recursive?: boolean): void;
+}
+
+export { }