@bccampus/ui-components 0.4.0 → 0.4.2

package/dist/icon-generator.js

@@ -1,76 +1,6 @@
-import { jsx as u } from "react/jsx-runtime";
-import { useMemo as r } from "react";
-import { T as o, g as l } from "./generate-tiles-DuagGD1d.js";
-import { c as m } from "./utils-CRiPKpXj.js";
-const k = [
-  [o.PieRand, o.PieRand],
-  [o.PieRand, o.PieRand]
-];
-function b({
-  pattern: e = k,
-  tileSize: h = 64,
-  tileClassName: s,
-  tileBgClassName: c,
-  renderChildren: d,
-  fit: i = "none",
-  ...g
-}) {
-  const t = r(
-    () => ({
-      width: e.reduce((n, v) => Math.max(n, v.length), 0) * h,
-      height: e.length * h
-    }),
-    [e, h]
-  ), a = r(() => {
-    const n = l(e, h, s);
-    return c && n.unshift(
-      /* @__PURE__ */ u(
-        "rect",
-        {
-          x: 0,
-          y: 0,
-          width: t.width,
-          height: t.height,
-          className: m("fill-black stroke-2 stroke-black", c)
-        },
-        "svg-mask-invert"
-      )
-    ), n;
-  }, [e, t, s, c, h]), w = r(() => {
-    switch (i) {
-      case "fill":
-        return t.width <= t.height ? "100%" : void 0;
-      case "width":
-        return "100%";
-      case "none":
-        return t.width;
-      default:
-        return;
-    }
-  }, [i, t]), f = r(() => {
-    switch (i) {
-      case "fill":
-        return t.height < t.width ? "100%" : void 0;
-      case "height":
-        return "100%";
-      case "none":
-        return t.height;
-      default:
-        return;
-    }
-  }, [i, t]);
-  return /* @__PURE__ */ u(
-    "svg",
-    {
-      width: w,
-      height: f,
-      viewBox: `0 0 ${t.width} ${t.height}`,
-      overflow: "visible",
-      ...g,
-      children: d ? d(a, t.width, t.height) : a
-    }
-  );
-}
+import { I as r } from "./icon-generator-tuhuqdpL.js";
+import { T as p } from "./generate-tiles-DuagGD1d.js";
 export {
-  b as IconGenerator
+  r as IconGenerator,
+  p as TileShape
 };

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 { }

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/dist/masked-image-generator.js

@@ -1,12 +1,12 @@
 import { jsx as o, jsxs as c, Fragment as d } from "react/jsx-runtime";
 import { useId as p, useMemo as l } from "react";
-import { IconGenerator as M } from "./icon-generator.js";
+import { I as M } from "./icon-generator-tuhuqdpL.js";
 const h = { cover: "slice", contain: "meet", fill: "none" }, k = { top: "xMidYMin", center: "xMidYMid", bottom: "xMidYMax" };
-function u({
-  src: n,
+function g({
+  src: s,
   imageFit: e = "cover",
   imagePosition: r = "top",
-  maskType: s = "alpha",
+  maskType: n = "alpha",
   ...a
 }) {
   const t = p(), i = l(
@@ -18,12 +18,12 @@ function u({
     {
       ...a,
       renderChildren: (m) => /* @__PURE__ */ c(d, { children: [
-        /* @__PURE__ */ o("mask", { id: `svg-mask${t}`, "mask-type": s, children: m }),
-        /* @__PURE__ */ o("image", { href: n, width: "100%", height: "100%", mask: `url(#svg-mask${t})`, preserveAspectRatio: i })
+        /* @__PURE__ */ o("mask", { id: `svg-mask${t}`, "mask-type": n, children: m }),
+        /* @__PURE__ */ o("image", { href: s, width: "100%", height: "100%", mask: `url(#svg-mask${t})`, preserveAspectRatio: i })
       ] })
     }
   );
 }
 export {
-  u as MaskedImageGenerator
+  g as MaskedImageGenerator
 };

package/dist/ui-components.js

@@ -1,9 +1,9 @@
-import { IconGenerator as o } from "./icon-generator.js";
+import { I as o } from "./icon-generator-tuhuqdpL.js";
 import { MaskedImageGenerator as e } from "./masked-image-generator.js";
 import { Caption as i, captionVariants as p } from "./caption.js";
 import { Banner as m } from "./banner.js";
 import { Button as u, buttonVariants as C } from "./button.js";
-import { Card as x, CardArea as M, CardCaption as v, CardContent as I, CardImage as N, CardItemGroup as c, CardMedia as l, CardMeta as s, CardSubcaption as S, CardSubtitle as T, CardTitle as b, CardToolbar as V } from "./card.js";
+import { Card as x, CardArea as M, CardCaption as v, CardContent as I, CardImage as N, CardItemGroup as s, CardMedia as c, CardMeta as l, CardSubcaption as S, CardSubtitle as T, CardTitle as b, CardToolbar as V } from "./card.js";
 import { HorizontalList as L } from "./horizontal-list.js";
 import { Input as k } from "./input.js";
 import { NavigationMenu as B, NavigationMenuContent as H, NavigationMenuIndicator as h, NavigationMenuItem as w, NavigationMenuLink as z, NavigationMenuList as A, NavigationMenuTrigger as O, NavigationMenuViewport as j, navigationMenuTriggerStyle as q } from "./navigation-menu.js";
@@ -22,9 +22,9 @@ export {
   v as CardCaption,
   I as CardContent,
   N as CardImage,
-  c as CardItemGroup,
-  l as CardMedia,
-  s as CardMeta,
+  s as CardItemGroup,
+  c as CardMedia,
+  l as CardMeta,
   S as CardSubcaption,
   T as CardSubtitle,
   b as CardTitle,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bccampus/ui-components",
-  "version": "0.4.0",
+  "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;
+
+}