@bccampus/ui-components 0.3.0 → 0.4.1

package/dist/icon-generator.js

@@ -1,303 +1,6 @@
-import { jsx as h } from "react/jsx-runtime";
-import { useMemo as M } from "react";
-import { c as d } from "./utils-CRiPKpXj.js";
-const $ = {
-  Blank: 0,
-  Rand: 1,
-  Mosaic: 2,
-  MosaicCircle: 3,
-  MosaicDiamond: 4,
-  Square: 6,
-  Circle: 7,
-  Diamond: 8,
-  Hexagon: 9,
-  RandBasic: 10,
-  TriangleSE: 11,
-  TriangleSW: 12,
-  TriangleNW: 13,
-  TriangleNE: 14,
-  TriangleRand: 15,
-  CaretN: 16,
-  CaretE: 17,
-  CaretS: 18,
-  CaretW: 19,
-  CaretRand: 20,
-  PieSE: 21,
-  PieSW: 22,
-  PieNW: 23,
-  PieNE: 24,
-  PieRand: 25
-}, p = [
-  $.Square,
-  $.Circle,
-  $.Diamond,
-  $.Hexagon,
-  $.TriangleSE,
-  $.TriangleSW,
-  $.TriangleNW,
-  $.TriangleNE,
-  $.PieSE,
-  $.PieSW,
-  $.PieNW,
-  $.PieNE
-], N = {
-  [$.Blank]: () => null,
-  [$.Rand]: (c, r, a, s) => N[p[Math.floor(Math.random() * p.length)]](c, r, a, s),
-  [$.Mosaic]: (c, r, a, s) => N[Math.random() > 0.8 ? $.Blank : $.Square](c, r, a, s),
-  [$.MosaicCircle]: (c, r, a, s) => N[Math.random() > 0.8 ? $.Blank : $.Circle](c, r, a, s),
-  [$.MosaicDiamond]: (c, r, a, s) => N[Math.random() > 0.8 ? $.Blank : $.Diamond](c, r, a, s),
-  [$.Square]: (c, r, a, s) => /* @__PURE__ */ h(
-    "rect",
-    {
-      x: a * c,
-      y: a * r,
-      width: a * s.scale,
-      height: a * s.scale,
-      className: d("fill-current stroke-none", s?.className)
-    },
-    `tile-${c}-${r}`
-  ),
-  [$.Circle]: (c, r, a, s) => /* @__PURE__ */ h(
-    "circle",
-    {
-      cx: a * (c + 0.5 * s.scale),
-      cy: a * (r + 0.5 * s.scale),
-      r: a / 2 * s.scale,
-      className: d("fill-current stroke-none", s?.className)
-    },
-    `tile-${c}-${r}`
-  ),
-  [$.Diamond]: (c, r, a, s) => /* @__PURE__ */ h(
-    "path",
-    {
-      d: `M ${a * (c + 0.5 * s.scale)} ${a * r} 
-      L ${a * (c + s.scale)} ${a * (r + 0.5 * s.scale)} 
-      L ${a * (c + 0.5 * s.scale)} ${a * (r + s.scale)} 
-      L ${a * c} ${a * (r + 0.5 * s.scale)}  Z`,
-      className: d("fill-current stroke-none", s?.className)
-    },
-    `tile-${c}-${r}`
-  ),
-  [$.Hexagon]: (c, r, a, s) => {
-    const o = a / Math.sqrt(3), m = (a - o) / 2;
-    return /* @__PURE__ */ h(
-      "path",
-      {
-        rotate: 45,
-        d: `M ${a * c + m * s.scale} ${a * r}
-        L ${a * c + (m + o) * s.scale} ${a * r}
-        L ${a * (c + s.scale)} ${a * (r + 0.5 * s.scale)}
-        L ${a * c + (m + o) * s.scale} ${a * (r + s.scale)}
-        L ${a * c + m * s.scale} ${a * (r + s.scale)}
-        L ${a * c} ${a * (r + 0.5 * s.scale)}  Z`,
-        className: d("fill-current stroke-none", s?.className)
-      },
-      `tile-${c}-${r}`
-    );
-  },
-  [$.RandBasic]: (c, r, a, s) => N[$.Square + Math.floor(Math.random() * 4)](c, r, a, s),
-  [$.TriangleSE]: (c, r, a, s) => /* @__PURE__ */ h(
-    "path",
-    {
-      d: `M ${a * (c + s.scale)} ${a * r} 
-      L ${a * c} ${a * (r + s.scale)} 
-      L ${a * (c + s.scale)} ${a * (r + s.scale)}  Z`,
-      className: d("fill-current stroke-none", s?.className)
-    },
-    `tile-${c}-${r}`
-  ),
-  [$.TriangleSW]: (c, r, a, s) => /* @__PURE__ */ h(
-    "path",
-    {
-      d: `M ${a * c} ${a * r} 
-      L ${a * (c + s.scale)} ${a * (r + s.scale)} 
-      L ${a * c} ${a * (r + s.scale)}  Z`,
-      className: d("fill-current stroke-none", s?.className)
-    },
-    `tile-${c}-${r}`
-  ),
-  [$.TriangleNW]: (c, r, a, s) => /* @__PURE__ */ h(
-    "path",
-    {
-      d: `M ${a * (c + s.scale)} ${a * r} 
-      L ${a * c} ${a * (r + s.scale)} 
-      L ${a * c} ${a * r}  Z`,
-      className: d("fill-current stroke-none", s?.className)
-    },
-    `tile-${c}-${r}`
-  ),
-  [$.TriangleNE]: (c, r, a, s) => /* @__PURE__ */ h(
-    "path",
-    {
-      d: `M ${a * c} ${a * r} 
-      L ${a * (c + s.scale)} ${a * (r + s.scale)} 
-      L ${a * (c + s.scale)} ${a * r}  Z`,
-      className: d("fill-current stroke-none", s?.className)
-    },
-    `tile-${c}-${r}`
-  ),
-  [$.TriangleRand]: (c, r, a, s) => N[$.TriangleSE + Math.floor(Math.random() * 4)](
-    c,
-    r,
-    a,
-    s
-  ),
-  [$.CaretN]: (c, r, a, s) => /* @__PURE__ */ h(
-    "path",
-    {
-      d: `M ${a * c} ${a * (r + s.scale)} 
-      L ${a * (c + s.scale)} ${a * (r + s.scale)} 
-      L ${a * (c + 0.5 * s.scale)} ${a * r}  Z`,
-      className: d("fill-current stroke-none", s?.className)
-    },
-    `tile-${c}-${r}`
-  ),
-  [$.CaretE]: (c, r, a, s) => /* @__PURE__ */ h(
-    "path",
-    {
-      d: `M ${a * c} ${a * r} 
-      L ${a * (c + s.scale)} ${a * (r + 0.5 * s.scale)} 
-      L ${a * c} ${a * (r + s.scale)}  Z`,
-      className: d("fill-current stroke-none", s?.className)
-    },
-    `tile-${c}-${r}`
-  ),
-  [$.CaretS]: (c, r, a, s) => /* @__PURE__ */ h(
-    "path",
-    {
-      d: `M ${a * c} ${a * r} 
-      L ${a * (c + s.scale)} ${a * r} 
-      L ${a * (c + 0.5 * s.scale)} ${a * (r + s.scale)}  Z`,
-      className: d("fill-current stroke-none", s?.className)
-    },
-    `tile-${c}-${r}`
-  ),
-  [$.CaretW]: (c, r, a, s) => /* @__PURE__ */ h(
-    "path",
-    {
-      d: `M ${a * (c + s.scale)} ${a * r} 
-      L ${a * c} ${a * (r + 0.5 * s.scale)} 
-      L ${a * (c + s.scale)} ${a * (r + s.scale)}  Z`,
-      className: d("fill-current stroke-none", s?.className)
-    },
-    `tile-${c}-${r}`
-  ),
-  [$.CaretRand]: (c, r, a, s) => N[$.CaretN + Math.floor(Math.random() * 4)](c, r, a, s),
-  [$.PieSE]: (c, r, a, s) => /* @__PURE__ */ h(
-    "path",
-    {
-      d: `M ${a * s.scale + a * c} ${a * r} 
-      A ${a * s.scale} ${a * s.scale}, 0, 0, 0, ${a * c} ${a * s.scale + a * r} 
-      L ${a * s.scale + a * c} ${a * s.scale + a * r}  Z`,
-      className: d("fill-current stroke-none", s?.className)
-    },
-    `tile-${c}-${r}`
-  ),
-  [$.PieSW]: (c, r, a, s) => /* @__PURE__ */ h(
-    "path",
-    {
-      d: `M ${a * s.scale + a * c} ${a * s.scale + a * r} 
-      A ${a * s.scale} ${a * s.scale}, 0, 0, 0, ${a * c} ${a * r} 
-      L ${a * c} ${a * s.scale + a * r}  Z`,
-      className: d("fill-current stroke-none", s?.className)
-    },
-    `tile-${c}-${r}`
-  ),
-  [$.PieNW]: (c, r, a, s) => /* @__PURE__ */ h(
-    "path",
-    {
-      d: `M ${a * c} ${a * s.scale + a * r} 
-      A ${a * s.scale} ${a * s.scale}, 0, 0, 0, ${a * s.scale + a * c} ${a * r} 
-      L ${a * c} ${a * r}  Z`,
-      className: d("fill-current stroke-none", s?.className)
-    },
-    `tile-${c}-${r}`
-  ),
-  [$.PieNE]: (c, r, a, s) => /* @__PURE__ */ h(
-    "path",
-    {
-      d: `M ${a * c} ${a * r} 
-      A ${a * s.scale} ${a * s.scale}, 0, 0, 0, ${a * s.scale + a * c} ${a * s.scale + a * r} 
-      L ${a * s.scale + a * c} ${a * r}  Z`,
-      className: d("fill-current stroke-none", s?.className)
-    },
-    `tile-${c}-${r}`
-  ),
-  [$.PieRand]: (c, r, a, s) => N[$.PieSE + Math.floor(Math.random() * 4)](c, r, a, s)
-}, w = (c, r, a) => c.map(
-  (s, o) => s.map((m, L) => {
-    const n = typeof m == "object" ? { className: d(a, m.className), scale: m.scale ?? 1, shape: m.shape } : { className: a, scale: 1, shape: m };
-    return N[n.shape](L, o, r, n);
-  })
-).flat(), R = [
-  [$.PieRand, $.PieRand],
-  [$.PieRand, $.PieRand]
-];
-function x({
-  pattern: c = R,
-  tileSize: r = 64,
-  tileClassName: a,
-  tileBgClassName: s,
-  renderChildren: o,
-  fit: m = "none",
-  ...L
-}) {
-  const n = M(
-    () => ({
-      width: c.reduce((u, E) => Math.max(u, E.length), 0) * r,
-      height: c.length * r
-    }),
-    [c, r]
-  ), k = M(() => {
-    const u = w(c, r, a);
-    return s && u.unshift(
-      /* @__PURE__ */ h(
-        "rect",
-        {
-          x: 0,
-          y: 0,
-          width: n.width,
-          height: n.height,
-          className: d("fill-black stroke-2 stroke-black", s)
-        },
-        "svg-mask-invert"
-      )
-    ), u;
-  }, [c, n, a, s, r]), P = M(() => {
-    switch (m) {
-      case "fill":
-        return n.width <= n.height ? "100%" : void 0;
-      case "width":
-        return "100%";
-      case "none":
-        return n.width;
-      default:
-        return;
-    }
-  }, [m, n]), T = M(() => {
-    switch (m) {
-      case "fill":
-        return n.height < n.width ? "100%" : void 0;
-      case "height":
-        return "100%";
-      case "none":
-        return n.height;
-      default:
-        return;
-    }
-  }, [m, n]);
-  return /* @__PURE__ */ h(
-    "svg",
-    {
-      width: P,
-      height: T,
-      viewBox: `0 0 ${n.width} ${n.height}`,
-      overflow: "visible",
-      ...L,
-      children: o ? o(k, n.width, n.height) : k
-    }
-  );
-}
+import { I as r } from "./icon-generator-tuhuqdpL.js";
+import { T as p } from "./generate-tiles-DuagGD1d.js";
 export {
-  x as IconGenerator
+  r as IconGenerator,
+  p as TileShape
 };

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.3.0",
+  "version": "0.4.1",
   "type": "module",
   "packageManager": "yarn@4.10.3",
   "exports": {
@@ -8,10 +8,18 @@
       "types": "./dist/ui-components.d.ts",
       "import": "./dist/ui-components.js"
     },
+    "./composite": {
+      "types": "./dist/composite.d.ts",
+      "import": "./dist/composite.js"
+    },
     "./icon-generator": {
       "types": "./dist/icon-generator.d.ts",
       "import": "./dist/icon-generator.js"
     },
+    "./generate-tiles": {
+      "types": "./dist/generate-tiles.d.ts",
+      "import": "./dist/generate-tiles.js"
+    },
     "./masked-image-generator": {
       "types": "./dist/masked-image-generator.d.ts",
       "import": "./dist/masked-image-generator.js"
@@ -89,11 +97,14 @@
     "@bcgov/bc-sans": "^2.1.0",
     "@fontsource-variable/inter-tight": "^5.2.7",
     "@ladle/react": "^5.0.3",
+    "@nanostores/react": "^1.0.0",
     "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-slot": "^1.2.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.544.0",
+    "nanostores": "^1.0.1",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "tailwind-merge": "^3.3.1",

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

@@ -0,0 +1,215 @@
+import { difference, union } from "@/lib/set-operations";
+import { atom, type PreinitializedWritableAtom } from "nanostores";
+import type { CompositeDataOptions, CompositeItemKey, CompositeOptions } from "./types";
+import { CompositeDataItem } from "./CompositeDataItem";
+
+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());
+
+  root!: CompositeDataItem<T>;
+
+  constructor(items: T[], options?: CompositeOptions) {
+    this.#options = {
+      itemKeyProp: "key",
+      itemChildrenProp: "children",
+      disabledKeys: [],
+      selectedKeys: [],
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      getItemKey: (item: any) => item[this.#options.itemKeyProp] as CompositeItemKey,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      getItemChildren: (item: any) => item[this.#options.itemChildrenProp] ? item[this.#options.itemChildrenProp] as T[] : undefined,
+
+      ...options
+    };
+
+    this.init(items);
+  }
+
+  *[Symbol.iterator](): Iterator<CompositeDataItem<T>> {
+    if (this.root.children) {
+      for (const node of this.root.children) {
+        yield node;
+      }
+    }
+  }
+
+  toJSON() {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const json: any = this.root.toJSON()
+
+    return json[this.#options.itemChildrenProp] as T[];
+  }
+
+
+  init(items: T[]) {
+    // this.itemAtoms = this.#setItemMap(items);
+    this.root = new CompositeDataItem(
+      { [this.#options.itemKeyProp]: "ALL", [this.#options.itemChildrenProp]: items } as T,
+      this.#options,
+      null
+    );
+
+    // Build item lookup table
+    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;
+      }
+    }
+  }
+
+
+  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;
+  }
+
+  item(key: CompositeItemKey) { return this.lookup.get(key) };
+
+  descendants(itemKey: CompositeItemKey) {
+    const item = this.lookup.get(itemKey);
+    if (!item) return undefined;
+
+    return item.descendants();
+  }
+
+  ancestors(itemKey: CompositeItemKey) {
+    const item = this.lookup.get(itemKey);
+    if (!item) return undefined;
+
+    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) {
+    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));
+  }
+
+
+  updateItem(key: CompositeItemKey, data: Partial<T> | ((item: T) => Partial<T>)) {
+    const item = this.lookup.get(key);
+    if (item) {
+      const newData = {
+        ...item.data.get(), ...(
+          (typeof data === "function") ? data(item.data.get()) : data
+        )
+      };
+
+      const newKey = this.#options.getItemKey(newData);
+      if (item.key !== newKey) throw "Item key cannot be updated!";
+
+      this.#updateIfSelectedItem(key);
+      item.data.set(newData);
+    }
+  }
+
+  #updateIfSelectedItem(key: CompositeItemKey) {
+    if (this.selectedKeys.get().has(key)) {
+      this.selectedKeys.set(new Set([...this.selectedKeys.get()]));
+    }
+  }
+}