@bccampus/ui-components 0.7.2 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (77) hide show
  1. package/.yarn/install-state.gz +0 -0
  2. package/.yarnrc.yml +0 -2
  3. package/dist/_chunks/createLucideIcon.js +11 -10
  4. package/dist/_chunks/index.js +2 -2
  5. package/dist/_chunks/index4.js +2 -2
  6. package/dist/components/index.js +18 -13
  7. package/dist/components/ui/composite/CompositeData.d.ts +9 -8
  8. package/dist/components/ui/composite/CompositeData.js +20 -14
  9. package/dist/components/ui/composite/{FocusProvider/AbstractFocusProvider.d.ts → FocusManager/AbstractFocusManager.d.ts} +2 -19
  10. package/dist/components/ui/composite/{FocusProvider/AbstractFocusProvider.js → FocusManager/AbstractFocusManager.js} +16 -5
  11. package/dist/components/ui/composite/{FocusProvider/ListboxFocusProvider.d.ts → FocusManager/ListboxFocusManager.d.ts} +2 -2
  12. package/dist/components/ui/composite/{FocusProvider/ListboxFocusProvider.js → FocusManager/ListboxFocusManager.js} +3 -3
  13. package/dist/components/ui/composite/FocusManager/index.d.ts +3 -0
  14. package/dist/components/ui/composite/FocusManager/index.js +6 -0
  15. package/dist/components/ui/composite/FocusManager/types.d.ts +20 -0
  16. package/dist/components/ui/composite/FocusManager/types.js +1 -0
  17. package/dist/components/ui/composite/{SelectionProvider/AbstractSelectionProvider.d.ts → SelectionManager/AbstractSelectionManager.d.ts} +5 -20
  18. package/dist/components/ui/composite/{SelectionProvider/AbstractSelectionProvider.js → SelectionManager/AbstractSelectionManager.js} +8 -4
  19. package/dist/components/ui/composite/{SelectionProvider/MultipleSelectionProvider.d.ts → SelectionManager/MultipleSelectionManager.d.ts} +3 -2
  20. package/dist/components/ui/composite/{SelectionProvider/MultipleSelectionProvider.js → SelectionManager/MultipleSelectionManager.js} +4 -3
  21. package/dist/components/ui/composite/{SelectionProvider/SingleSelectionProvider.d.ts → SelectionManager/SingleSelectionManager.d.ts} +3 -2
  22. package/dist/components/ui/composite/{SelectionProvider/SingleSelectionProvider.js → SelectionManager/SingleSelectionManager.js} +6 -5
  23. package/dist/components/ui/composite/SelectionManager/index.d.ts +4 -0
  24. package/dist/components/ui/composite/SelectionManager/index.js +8 -0
  25. package/dist/components/ui/composite/SelectionManager/types.d.ts +19 -0
  26. package/dist/components/ui/composite/SelectionManager/types.js +1 -0
  27. package/dist/components/ui/composite/components/composite-component.d.ts +2 -0
  28. package/dist/components/ui/composite/{composite-component.js → components/composite-component.js} +16 -38
  29. package/dist/components/ui/composite/components/index.d.ts +5 -0
  30. package/dist/components/ui/composite/components/index.js +10 -0
  31. package/dist/components/ui/composite/{listbox.d.ts → components/listbox.d.ts} +1 -1
  32. package/dist/components/ui/composite/{listbox.js → components/listbox.js} +17 -12
  33. package/dist/components/ui/composite/components/types.d.ts +53 -0
  34. package/dist/components/ui/composite/components/types.js +1 -0
  35. package/dist/components/ui/composite/components/utils.d.ts +1 -0
  36. package/dist/components/ui/composite/components/utils.js +8 -0
  37. package/dist/components/ui/composite/create-composite-data.d.ts +80 -0
  38. package/dist/components/ui/composite/create-composite-data.js +22 -0
  39. package/dist/components/ui/composite/index.d.ts +4 -5
  40. package/dist/components/ui/composite/index.js +18 -13
  41. package/dist/components/ui/composite/types.d.ts +5 -67
  42. package/dist/components/ui/navigation-menu.js +1 -1
  43. package/dist/components/ui/popover.js +1 -1
  44. package/dist/hooks/index.d.ts +1 -0
  45. package/dist/hooks/index.js +3 -1
  46. package/eslint.config.js +1 -1
  47. package/package.json +17 -16
  48. package/src/components/ui/composite/CompositeData.ts +38 -30
  49. package/src/components/ui/composite/{FocusProvider/AbstractFocusProvider.ts → FocusManager/AbstractFocusManager.ts} +19 -26
  50. package/src/components/ui/composite/{FocusProvider/ListboxFocusProvider.ts → FocusManager/ListboxFocusManager.ts} +2 -2
  51. package/src/components/ui/composite/FocusManager/index.ts +3 -0
  52. package/src/components/ui/composite/FocusManager/types.ts +23 -0
  53. package/src/components/ui/composite/{SelectionProvider/AbstractSelectionProvider.ts → SelectionManager/AbstractSelectionManager.ts} +13 -28
  54. package/src/components/ui/composite/{SelectionProvider/MultipleSelectionProvider.ts → SelectionManager/MultipleSelectionManager.ts} +4 -2
  55. package/src/components/ui/composite/{SelectionProvider/SingleSelectionProvider.ts → SelectionManager/SingleSelectionManager.ts} +6 -4
  56. package/src/components/ui/composite/SelectionManager/index.ts +4 -0
  57. package/src/components/ui/composite/SelectionManager/types.ts +24 -0
  58. package/src/components/ui/composite/{composite-component.tsx → components/composite-component.tsx} +17 -42
  59. package/src/components/ui/composite/components/index.ts +5 -0
  60. package/src/components/ui/composite/{listbox.tsx → components/listbox.tsx} +16 -11
  61. package/src/components/ui/composite/components/types.ts +66 -0
  62. package/src/components/ui/composite/components/utils.ts +6 -0
  63. package/src/components/ui/composite/create-composite-data.ts +98 -0
  64. package/src/components/ui/composite/index.ts +7 -8
  65. package/src/components/ui/composite/types.ts +5 -86
  66. package/src/hooks/index.ts +4 -3
  67. package/.yarn/releases/yarn-4.10.3.cjs +0 -942
  68. package/dist/components/ui/composite/FocusProvider/index.d.ts +0 -2
  69. package/dist/components/ui/composite/FocusProvider/index.js +0 -6
  70. package/dist/components/ui/composite/SelectionProvider/index.d.ts +0 -3
  71. package/dist/components/ui/composite/SelectionProvider/index.js +0 -8
  72. package/dist/components/ui/composite/composite-component.d.ts +0 -2
  73. package/src/components/ui/composite/FocusProvider/index.ts +0 -2
  74. package/src/components/ui/composite/SelectionProvider/index.ts +0 -3
  75. /package/dist/components/ui/composite/{composite-component-item.d.ts → components/composite-component-item.d.ts} +0 -0
  76. /package/dist/components/ui/composite/{composite-component-item.js → components/composite-component-item.js} +0 -0
  77. /package/src/components/ui/composite/{composite-component-item.tsx → components/composite-component-item.tsx} +0 -0
Binary file
package/.yarnrc.yml CHANGED
@@ -1,3 +1 @@
1
1
  nodeLinker: node-modules
2
-
3
- yarnPath: .yarn/releases/yarn-4.10.3.cjs
@@ -1,4 +1,7 @@
1
1
  import { forwardRef, createElement } from "react";
2
+ const mergeClasses = (...classes) => classes.filter((className, index, array) => {
3
+ return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
4
+ }).join(" ").trim();
2
5
  const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
3
6
  const toCamelCase = (string) => string.replace(
4
7
  /^([A-Z])|[\s-_]+(\w)/g,
@@ -8,16 +11,6 @@ const toPascalCase = (string) => {
8
11
  const camelCase = toCamelCase(string);
9
12
  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
10
13
  };
11
- const mergeClasses = (...classes) => classes.filter((className, index, array) => {
12
- return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
13
- }).join(" ").trim();
14
- const hasA11yProp = (props) => {
15
- for (const prop in props) {
16
- if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
17
- return true;
18
- }
19
- }
20
- };
21
14
  var defaultAttributes = {
22
15
  xmlns: "http://www.w3.org/2000/svg",
23
16
  width: 24,
@@ -29,6 +22,14 @@ var defaultAttributes = {
29
22
  strokeLinecap: "round",
30
23
  strokeLinejoin: "round"
31
24
  };
25
+ const hasA11yProp = (props) => {
26
+ for (const prop in props) {
27
+ if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
28
+ return true;
29
+ }
30
+ }
31
+ return false;
32
+ };
32
33
  const Icon = forwardRef(
33
34
  ({
34
35
  color = "currentColor",
@@ -1,7 +1,7 @@
1
1
  import * as React from "react";
2
2
  import { c as composeRefs } from "./index3.js";
3
3
  import { jsx, Fragment } from "react/jsx-runtime";
4
- var REACT_LAZY_TYPE = Symbol.for("react.lazy");
4
+ var REACT_LAZY_TYPE = /* @__PURE__ */ Symbol.for("react.lazy");
5
5
  var use = React[" use ".trim().toString()];
6
6
  function isPromiseLike(value) {
7
7
  return typeof value === "object" && value !== null && "then" in value;
@@ -57,7 +57,7 @@ function createSlotClone(ownerName) {
57
57
  SlotClone.displayName = `${ownerName}.SlotClone`;
58
58
  return SlotClone;
59
59
  }
60
- var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
60
+ var SLOTTABLE_IDENTIFIER = /* @__PURE__ */ Symbol("radix.slottable");
61
61
  // @__NO_SIDE_EFFECTS__
62
62
  function createSlottable(ownerName) {
63
63
  const Slottable2 = ({ children }) => {
@@ -108,7 +108,7 @@ function createSlotClone(ownerName) {
108
108
  SlotClone.displayName = `${ownerName}.SlotClone`;
109
109
  return SlotClone;
110
110
  }
111
- var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
111
+ var SLOTTABLE_IDENTIFIER = /* @__PURE__ */ Symbol("radix.slottable");
112
112
  function isSlottable(child) {
113
113
  return React.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
114
114
  }
@@ -174,7 +174,7 @@ var Primitive = NODES.reduce((primitive, node) => {
174
174
  const { asChild, ...primitiveProps } = props;
175
175
  const Comp = asChild ? Slot : node;
176
176
  if (typeof window !== "undefined") {
177
- window[Symbol.for("radix-ui")] = true;
177
+ window[/* @__PURE__ */ Symbol.for("radix-ui")] = true;
178
178
  }
179
179
  return /* @__PURE__ */ jsx(Comp, { ...primitiveProps, ref: forwardedRef });
180
180
  });
@@ -1,13 +1,15 @@
1
1
  import { CompositeData } from "./ui/composite/CompositeData.js";
2
2
  import { CompositeDataItem } from "./ui/composite/CompositeDataItem.js";
3
- import { AbstractFocusProvider } from "./ui/composite/FocusProvider/AbstractFocusProvider.js";
4
- import { ListboxFocusProvider } from "./ui/composite/FocusProvider/ListboxFocusProvider.js";
5
- import { AbstractSelectionProvider } from "./ui/composite/SelectionProvider/AbstractSelectionProvider.js";
6
- import { SingleSelectionProvider } from "./ui/composite/SelectionProvider/SingleSelectionProvider.js";
7
- import { MultipleSelectionProvider } from "./ui/composite/SelectionProvider/MultipleSelectionProvider.js";
8
- import { CompositeComponent } from "./ui/composite/composite-component.js";
9
- import { CompositeComponentItem } from "./ui/composite/composite-component-item.js";
10
- import { Listbox } from "./ui/composite/listbox.js";
3
+ import { AbstractFocusManager } from "./ui/composite/FocusManager/AbstractFocusManager.js";
4
+ import { ListboxFocusManager } from "./ui/composite/FocusManager/ListboxFocusManager.js";
5
+ import { AbstractSelectionManager } from "./ui/composite/SelectionManager/AbstractSelectionManager.js";
6
+ import { SingleSelectionManager } from "./ui/composite/SelectionManager/SingleSelectionManager.js";
7
+ import { MultipleSelectionManager } from "./ui/composite/SelectionManager/MultipleSelectionManager.js";
8
+ import { CompositeComponent } from "./ui/composite/components/composite-component.js";
9
+ import { CompositeComponentItem } from "./ui/composite/components/composite-component-item.js";
10
+ import { Listbox } from "./ui/composite/components/listbox.js";
11
+ import { isOutsideElement } from "./ui/composite/components/utils.js";
12
+ import { createAsyncCompositeData, createCompositeData } from "./ui/composite/create-composite-data.js";
11
13
  import { IconGenerator } from "./ui/icon-generator/icon-generator.js";
12
14
  import { generateIconPattern, generateTiles } from "./ui/icon-generator/generate-tiles.js";
13
15
  import { MaskedImageGenerator } from "./ui/icon-generator/masked-image-generator.js";
@@ -27,8 +29,8 @@ import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "./ui/pop
27
29
  import { SearchInput } from "./ui/search-input.js";
28
30
  import { Tag, tagVariants } from "./ui/tag.js";
29
31
  export {
30
- AbstractFocusProvider,
31
- AbstractSelectionProvider,
32
+ AbstractFocusManager,
33
+ AbstractSelectionManager,
32
34
  Banner,
33
35
  Button,
34
36
  Caption,
@@ -52,9 +54,9 @@ export {
52
54
  IconGenerator,
53
55
  Input,
54
56
  Listbox,
55
- ListboxFocusProvider,
57
+ ListboxFocusManager,
56
58
  MaskedImageGenerator,
57
- MultipleSelectionProvider,
59
+ MultipleSelectionManager,
58
60
  NavigationMenu,
59
61
  NavigationMenuContent,
60
62
  NavigationMenuIndicator,
@@ -72,13 +74,16 @@ export {
72
74
  PopoverContent,
73
75
  PopoverTrigger,
74
76
  SearchInput,
75
- SingleSelectionProvider,
77
+ SingleSelectionManager,
76
78
  Tag,
77
79
  TileShape,
78
80
  buttonVariants,
79
81
  captionVariants,
82
+ createAsyncCompositeData,
83
+ createCompositeData,
80
84
  generateIconPattern,
81
85
  generateTiles,
86
+ isOutsideElement,
82
87
  navigationMenuTriggerStyle,
83
88
  tagVariants
84
89
  };
@@ -1,18 +1,19 @@
1
- import { CompositeItemKey, CompositeOptions, CompositeProviderOptions } from './types';
1
+ import { CompositeItemKey, CompositeOptions, CompositeManagerOptions } from './types';
2
2
  import { CompositeDataItem } from './CompositeDataItem';
3
- import { AbstractFocusProvider } from './FocusProvider/AbstractFocusProvider';
4
- import { AbstractSelectionProvider } from './SelectionProvider/AbstractSelectionProvider';
3
+ import { AbstractFocusManager } from './FocusManager/AbstractFocusManager';
4
+ import { AbstractSelectionManager } from './SelectionManager/AbstractSelectionManager';
5
5
  export declare class CompositeData<T extends object> implements Iterable<CompositeDataItem<T>> {
6
6
  #private;
7
7
  lookup: Map<CompositeItemKey, CompositeDataItem<T>>;
8
- focusProvider: AbstractFocusProvider<T>;
9
- selectionProvider?: AbstractSelectionProvider<T>;
8
+ focusManager: AbstractFocusManager<T>;
9
+ selectionManager?: AbstractSelectionManager<T>;
10
10
  disabledKeys: Set<CompositeItemKey>;
11
- root: CompositeDataItem<T>;
12
- constructor(items: T[], providerOptions: CompositeProviderOptions<T>, options?: CompositeOptions);
11
+ root?: CompositeDataItem<T>;
12
+ constructor(items: T[] | null, managerOptions: CompositeManagerOptions<T>, options?: CompositeOptions);
13
13
  [Symbol.iterator](): Iterator<CompositeDataItem<T>>;
14
14
  toJSON(): T[];
15
- init(items: T[]): void;
15
+ get version(): import('nanostores').PreinitializedWritableAtom<number> & object;
16
+ setItems(items: T[]): void;
16
17
  item(key: CompositeItemKey): CompositeDataItem<T> | undefined;
17
18
  descendants(itemKey: CompositeItemKey): CompositeDataItem<T>[] | undefined;
18
19
  ancestors(itemKey: CompositeItemKey): CompositeDataItem<T>[] | undefined;
@@ -1,13 +1,15 @@
1
1
  import { CompositeDataItem } from "./CompositeDataItem.js";
2
2
  import { union } from "../../../lib/set-operations.js";
3
+ import { atom } from "nanostores";
3
4
  class CompositeData {
4
5
  #options;
6
+ #version = atom(0);
5
7
  lookup = /* @__PURE__ */ new Map();
6
- focusProvider;
7
- selectionProvider;
8
+ focusManager;
9
+ selectionManager;
8
10
  disabledKeys = /* @__PURE__ */ new Set();
9
- root;
10
- constructor(items, providerOptions, options) {
11
+ root = void 0;
12
+ constructor(items, managerOptions, options) {
11
13
  this.#options = {
12
14
  itemKeyProp: "key",
13
15
  itemChildrenProp: "children",
@@ -19,22 +21,26 @@ class CompositeData {
19
21
  getItemChildren: (item) => item[this.#options.itemChildrenProp] ? item[this.#options.itemChildrenProp] : void 0,
20
22
  ...options
21
23
  };
22
- this.focusProvider = providerOptions.focusProvider;
23
- this.selectionProvider = providerOptions.selectionProvider;
24
- this.init(items);
24
+ this.focusManager = managerOptions.focusManager;
25
+ this.selectionManager = managerOptions.selectionManager;
26
+ if (items) this.setItems(items);
25
27
  }
26
28
  *[Symbol.iterator]() {
27
- if (this.root.children) {
29
+ if (this.root?.children) {
28
30
  for (const node of this.root.children) {
29
31
  yield node;
30
32
  }
31
33
  }
32
34
  }
33
35
  toJSON() {
36
+ if (!this.root) return [];
34
37
  const json = this.root.toJSON();
35
38
  return json[this.#options.itemChildrenProp];
36
39
  }
37
- init(items) {
40
+ get version() {
41
+ return this.#version;
42
+ }
43
+ setItems(items) {
38
44
  this.root = new CompositeDataItem(
39
45
  { [this.#options.itemKeyProp]: "ALL", [this.#options.itemChildrenProp]: items },
40
46
  this.#options,
@@ -42,9 +48,9 @@ class CompositeData {
42
48
  );
43
49
  this.lookup = new Map([...this.root].map((item) => [item.key, item]));
44
50
  this.#options.disabledKeys.forEach((disabledKey) => this.#disable(disabledKey));
45
- if (this.selectionProvider)
46
- this.selectionProvider.init(this, this.#options);
47
- this.focusProvider.init(this, this.#options);
51
+ if (this.selectionManager) this.selectionManager.init(this, this.#options);
52
+ this.focusManager.init(this, this.#options);
53
+ this.#version.set(this.#version.value + 1);
48
54
  }
49
55
  item(key) {
50
56
  return this.lookup.get(key);
@@ -79,8 +85,8 @@ class CompositeData {
79
85
  }
80
86
  }
81
87
  #updateIfSelectedItem(key) {
82
- if (this.selectionProvider && this.selectionProvider.selectedKeys.get().has(key)) {
83
- this.selectionProvider.selectedKeys.set(/* @__PURE__ */ new Set([...this.selectionProvider.selectedKeys.get()]));
88
+ if (this.selectionManager && this.selectionManager.selectedKeys.get().has(key)) {
89
+ this.selectionManager.selectedKeys.set(/* @__PURE__ */ new Set([...this.selectionManager.selectedKeys.get()]));
84
90
  }
85
91
  }
86
92
  }
@@ -2,25 +2,8 @@ import { PreinitializedWritableAtom } from 'nanostores';
2
2
  import { CompositeData } from '../CompositeData';
3
3
  import { CompositeDataItem } from '../CompositeDataItem';
4
4
  import { CompositeDataOptions, CompositeItemKey } from '../types';
5
- export interface FocusProvider<T extends object> {
6
- getFocusedItem(): CompositeDataItem<T> | null;
7
- focus(itemKey: CompositeItemKey): void;
8
- focus(item: CompositeDataItem<T>): void;
9
- focus(item: CompositeDataItem<T> | CompositeItemKey | null): void;
10
- blur(): void;
11
- focusUp(): void;
12
- focusDown(): void;
13
- focusLeft(): void;
14
- focusRight(): void;
15
- focusPageUp(): void;
16
- focesPageDown(): void;
17
- focusToFirst(): void;
18
- focusToLast(): void;
19
- focusToFirstInRow(): void;
20
- focusToLastInRow(): void;
21
- focusToTypeAheadMatch(): void;
22
- }
23
- export declare abstract class AbstractFocusProvider<T extends object> implements FocusProvider<T> {
5
+ import { IFocusManager } from './types';
6
+ export declare abstract class AbstractFocusManager<T extends object> implements IFocusManager<T> {
24
7
  protected data: CompositeData<T>;
25
8
  protected dataOptions: CompositeDataOptions<T>;
26
9
  firstFocusableItem: CompositeDataItem<T> | null;
@@ -1,6 +1,6 @@
1
1
  import { atom } from "nanostores";
2
2
  import { CompositeDataItem } from "../CompositeDataItem.js";
3
- class AbstractFocusProvider {
3
+ class AbstractFocusManager {
4
4
  data;
5
5
  dataOptions;
6
6
  firstFocusableItem;
@@ -12,6 +12,16 @@ class AbstractFocusProvider {
12
12
  const [first, last] = this.setFocusPointers();
13
13
  this.firstFocusableItem = first;
14
14
  this.lastFocusableItem = last;
15
+ const prevFocusedItem = this.focusedItem.get();
16
+ if (prevFocusedItem) {
17
+ const _item = this.data.lookup.get(prevFocusedItem.key);
18
+ if (!_item) {
19
+ this.focusedItem.set(null);
20
+ return;
21
+ }
22
+ _item.state.setKey("focused", true);
23
+ this.focusedItem.set(_item);
24
+ }
15
25
  }
16
26
  isFocusable(itemAtom) {
17
27
  return !itemAtom.state.get().disabled;
@@ -23,9 +33,10 @@ class AbstractFocusProvider {
23
33
  if (!item) return;
24
34
  const _item = item instanceof CompositeDataItem ? item : this.data.lookup.get(item);
25
35
  if (!_item) return;
26
- if (this.focusedItem.get()) {
27
- if (_item.key === this.focusedItem.get()?.key) return;
28
- this.focusedItem.get().state.setKey("focused", false);
36
+ const focusedItem = this.focusedItem.get();
37
+ if (focusedItem) {
38
+ if (_item.key === focusedItem.key) return;
39
+ focusedItem.state.setKey("focused", false);
29
40
  }
30
41
  _item.state.setKey("focused", true);
31
42
  this.focusedItem.set(_item);
@@ -37,5 +48,5 @@ class AbstractFocusProvider {
37
48
  }
38
49
  }
39
50
  export {
40
- AbstractFocusProvider
51
+ AbstractFocusManager
41
52
  };
@@ -1,6 +1,6 @@
1
1
  import { CompositeDataItem } from '../CompositeDataItem';
2
- import { AbstractFocusProvider } from './AbstractFocusProvider';
3
- export declare class ListboxFocusProvider<T extends object> extends AbstractFocusProvider<T> {
2
+ import { AbstractFocusManager } from './AbstractFocusManager';
3
+ export declare class ListboxFocusManager<T extends object> extends AbstractFocusManager<T> {
4
4
  setFocusPointers(): readonly [CompositeDataItem<T> | null, CompositeDataItem<T> | null];
5
5
  focusUp(): void;
6
6
  focusDown(): void;
@@ -1,5 +1,5 @@
1
- import { AbstractFocusProvider } from "./AbstractFocusProvider.js";
2
- class ListboxFocusProvider extends AbstractFocusProvider {
1
+ import { AbstractFocusManager } from "./AbstractFocusManager.js";
2
+ class ListboxFocusManager extends AbstractFocusManager {
3
3
  setFocusPointers() {
4
4
  let first = null;
5
5
  let last = null;
@@ -55,5 +55,5 @@ class ListboxFocusProvider extends AbstractFocusProvider {
55
55
  }
56
56
  }
57
57
  export {
58
- ListboxFocusProvider
58
+ ListboxFocusManager
59
59
  };
@@ -0,0 +1,3 @@
1
+ export * from './AbstractFocusManager';
2
+ export * from './ListboxFocusManager';
3
+ export type * from './types';
@@ -0,0 +1,6 @@
1
+ import { AbstractFocusManager } from "./AbstractFocusManager.js";
2
+ import { ListboxFocusManager } from "./ListboxFocusManager.js";
3
+ export {
4
+ AbstractFocusManager,
5
+ ListboxFocusManager
6
+ };
@@ -0,0 +1,20 @@
1
+ import { CompositeDataItem } from '../CompositeDataItem';
2
+ import { CompositeItemKey } from '../types';
3
+ export interface IFocusManager<T extends object> {
4
+ getFocusedItem(): CompositeDataItem<T> | null;
5
+ focus(itemKey: CompositeItemKey): void;
6
+ focus(item: CompositeDataItem<T>): void;
7
+ focus(item: CompositeDataItem<T> | CompositeItemKey | null): void;
8
+ blur(): void;
9
+ focusUp(): void;
10
+ focusDown(): void;
11
+ focusLeft(): void;
12
+ focusRight(): void;
13
+ focusPageUp(): void;
14
+ focesPageDown(): void;
15
+ focusToFirst(): void;
16
+ focusToLast(): void;
17
+ focusToFirstInRow(): void;
18
+ focusToLastInRow(): void;
19
+ focusToTypeAheadMatch(): void;
20
+ }
@@ -2,29 +2,14 @@ import { PreinitializedWritableAtom } from 'nanostores';
2
2
  import { CompositeData } from '../CompositeData';
3
3
  import { CompositeDataItem } from '../CompositeDataItem';
4
4
  import { CompositeDataOptions, CompositeItemKey } from '../types';
5
- export interface SelectionProvider<T extends object> {
6
- getSelectedKeys(): Set<CompositeItemKey>;
7
- select(itemKey?: CompositeItemKey, recursive?: boolean): void;
8
- select(item: CompositeDataItem<T>, recursive?: boolean): void;
9
- select(item?: CompositeDataItem<T> | CompositeItemKey, recursive?: boolean): void;
10
- deselect(itemKey?: CompositeItemKey, recursive?: boolean): void;
11
- deselect(item: CompositeDataItem<T>, recursive?: boolean): void;
12
- deselect(item?: CompositeDataItem<T> | CompositeItemKey, recursive?: boolean): void;
13
- toggleSelect(itemKey?: CompositeItemKey, recursive?: boolean): void;
14
- toggleSelect(item: CompositeDataItem<T>, recursive?: boolean): void;
15
- toggleSelect(item: CompositeDataItem<T> | CompositeItemKey, recursive?: boolean): void;
16
- }
17
- export interface SelectionProviderOptions<T extends object> {
18
- onSelect?: (item: T) => void;
19
- onDeselect?: (item: T) => void;
20
- onChange?: (item: Set<CompositeItemKey>) => void;
21
- }
22
- export declare abstract class AbstractSelectionProvider<T extends object> {
5
+ import { SelectionManager, SelectionManagerOptions } from './types';
6
+ export declare abstract class AbstractSelectionManager<T extends object> implements SelectionManager<T> {
23
7
  protected data: CompositeData<T>;
24
8
  protected dataOptions: CompositeDataOptions<T>;
9
+ protected abstract multiselect: boolean;
25
10
  selectedKeys: PreinitializedWritableAtom<Set<CompositeItemKey>>;
26
- options?: SelectionProviderOptions<T>;
27
- constructor(options?: SelectionProviderOptions<T>);
11
+ options?: SelectionManagerOptions<T>;
12
+ constructor(options?: SelectionManagerOptions<T>);
28
13
  init(data: CompositeData<T>, dataOptions: CompositeDataOptions<T>): void;
29
14
  getSelectedKeys(): Set<CompositeItemKey>;
30
15
  abstract select(itemKey?: CompositeItemKey, recursive?: boolean): void;
@@ -1,6 +1,6 @@
1
1
  import { atom } from "nanostores";
2
2
  import { CompositeDataItem } from "../CompositeDataItem.js";
3
- class AbstractSelectionProvider {
3
+ class AbstractSelectionManager {
4
4
  data;
5
5
  dataOptions;
6
6
  selectedKeys = atom(/* @__PURE__ */ new Set());
@@ -11,18 +11,22 @@ class AbstractSelectionProvider {
11
11
  init(data, dataOptions) {
12
12
  this.data = data;
13
13
  this.dataOptions = dataOptions;
14
- this.dataOptions.selectedKeys.forEach((selectedKey) => this.select(selectedKey));
14
+ if (this.data.version.get() > 0) {
15
+ this.selectedKeys.get().forEach((key) => this.select(key));
16
+ } else {
17
+ this.dataOptions.selectedKeys.forEach((selectedKey) => this.select(selectedKey));
18
+ }
15
19
  }
16
20
  getSelectedKeys() {
17
21
  return this.selectedKeys.get();
18
22
  }
19
23
  toggleSelect(item, recursive = false) {
20
- const _item = item ? item instanceof CompositeDataItem ? item : this.data.lookup.get(item) : this.data.focusProvider.focusedItem.get();
24
+ const _item = item ? item instanceof CompositeDataItem ? item : this.data.lookup.get(item) : this.data.focusManager.focusedItem.get();
21
25
  if (!_item) return;
22
26
  if (_item.state.get().selected) this.deselect(_item, recursive);
23
27
  else this.select(_item, recursive);
24
28
  }
25
29
  }
26
30
  export {
27
- AbstractSelectionProvider
31
+ AbstractSelectionManager
28
32
  };
@@ -1,7 +1,8 @@
1
1
  import { CompositeDataItem } from '../CompositeDataItem';
2
2
  import { CompositeItemKey } from '../types';
3
- import { AbstractSelectionProvider } from './AbstractSelectionProvider';
4
- export declare class MultipleSelectionProvider<T extends object> extends AbstractSelectionProvider<T> {
3
+ import { AbstractSelectionManager } from './AbstractSelectionManager';
4
+ export declare class MultipleSelectionManager<T extends object> extends AbstractSelectionManager<T> {
5
+ protected multiselect: boolean;
5
6
  select(itemKey: CompositeItemKey, recursive?: boolean): void;
6
7
  select(item: CompositeDataItem<T>, recursive?: boolean): void;
7
8
  deselect(itemKey: CompositeItemKey, recursive?: boolean): void;
@@ -1,7 +1,8 @@
1
1
  import { CompositeDataItem } from "../CompositeDataItem.js";
2
- import { AbstractSelectionProvider } from "./AbstractSelectionProvider.js";
2
+ import { AbstractSelectionManager } from "./AbstractSelectionManager.js";
3
3
  import { union, difference } from "../../../../lib/set-operations.js";
4
- class MultipleSelectionProvider extends AbstractSelectionProvider {
4
+ class MultipleSelectionManager extends AbstractSelectionManager {
5
+ multiselect = true;
5
6
  select(item, recursive = false) {
6
7
  const _item = item instanceof CompositeDataItem ? item : this.data.lookup.get(item);
7
8
  if (!_item) return;
@@ -20,5 +21,5 @@ class MultipleSelectionProvider extends AbstractSelectionProvider {
20
21
  }
21
22
  }
22
23
  export {
23
- MultipleSelectionProvider
24
+ MultipleSelectionManager
24
25
  };
@@ -1,7 +1,8 @@
1
1
  import { CompositeDataItem } from '../CompositeDataItem';
2
2
  import { CompositeItemKey } from '../types';
3
- import { AbstractSelectionProvider } from './AbstractSelectionProvider';
4
- export declare class SingleSelectionProvider<T extends object> extends AbstractSelectionProvider<T> {
3
+ import { AbstractSelectionManager } from './AbstractSelectionManager';
4
+ export declare class SingleSelectionManager<T extends object> extends AbstractSelectionManager<T> {
5
+ protected multiselect: boolean;
5
6
  select(itemKey?: CompositeItemKey, recursive?: boolean): void;
6
7
  select(item: CompositeDataItem<T>, recursive?: boolean): void;
7
8
  deselect(itemKey?: CompositeItemKey, recursive?: boolean): void;
@@ -1,9 +1,10 @@
1
1
  import { CompositeDataItem } from "../CompositeDataItem.js";
2
- import { AbstractSelectionProvider } from "./AbstractSelectionProvider.js";
2
+ import { AbstractSelectionManager } from "./AbstractSelectionManager.js";
3
3
  import { difference } from "../../../../lib/set-operations.js";
4
- class SingleSelectionProvider extends AbstractSelectionProvider {
4
+ class SingleSelectionManager extends AbstractSelectionManager {
5
+ multiselect = false;
5
6
  select(item, _recursive = false) {
6
- const _item = item ? item instanceof CompositeDataItem ? item : this.data.lookup.get(item) : this.data.focusProvider.focusedItem.get();
7
+ const _item = item ? item instanceof CompositeDataItem ? item : this.data.lookup.get(item) : this.data.focusManager.focusedItem.get();
7
8
  if (!_item) return;
8
9
  this.selectedKeys.get().forEach((selectedKey) => {
9
10
  const _item2 = this.data.lookup.get(selectedKey);
@@ -17,7 +18,7 @@ class SingleSelectionProvider extends AbstractSelectionProvider {
17
18
  this.options?.onChange?.(this.selectedKeys.get());
18
19
  }
19
20
  deselect(item, _recursive = false) {
20
- const _item = item ? item instanceof CompositeDataItem ? item : this.data.lookup.get(item) : this.data.focusProvider.focusedItem.get();
21
+ const _item = item ? item instanceof CompositeDataItem ? item : this.data.lookup.get(item) : this.data.focusManager.focusedItem.get();
21
22
  if (!_item) return;
22
23
  const deselectedKeys = _item.deselect(false);
23
24
  this.options?.onDeselect?.(_item.data.get());
@@ -26,5 +27,5 @@ class SingleSelectionProvider extends AbstractSelectionProvider {
26
27
  }
27
28
  }
28
29
  export {
29
- SingleSelectionProvider
30
+ SingleSelectionManager
30
31
  };
@@ -0,0 +1,4 @@
1
+ export * from './AbstractSelectionManager';
2
+ export * from './SingleSelectionManager';
3
+ export * from './MultipleSelectionManager';
4
+ export type * from './types';
@@ -0,0 +1,8 @@
1
+ import { AbstractSelectionManager } from "./AbstractSelectionManager.js";
2
+ import { SingleSelectionManager } from "./SingleSelectionManager.js";
3
+ import { MultipleSelectionManager } from "./MultipleSelectionManager.js";
4
+ export {
5
+ AbstractSelectionManager,
6
+ MultipleSelectionManager,
7
+ SingleSelectionManager
8
+ };
@@ -0,0 +1,19 @@
1
+ import { CompositeDataItem } from '../CompositeDataItem';
2
+ import { CompositeItemKey } from '../types';
3
+ export interface SelectionManager<T extends object> {
4
+ getSelectedKeys(): Set<CompositeItemKey>;
5
+ select(itemKey?: CompositeItemKey, recursive?: boolean): void;
6
+ select(item: CompositeDataItem<T>, recursive?: boolean): void;
7
+ select(item?: CompositeDataItem<T> | CompositeItemKey, recursive?: boolean): void;
8
+ deselect(itemKey?: CompositeItemKey, recursive?: boolean): void;
9
+ deselect(item: CompositeDataItem<T>, recursive?: boolean): void;
10
+ deselect(item?: CompositeDataItem<T> | CompositeItemKey, recursive?: boolean): void;
11
+ toggleSelect(itemKey?: CompositeItemKey, recursive?: boolean): void;
12
+ toggleSelect(item: CompositeDataItem<T>, recursive?: boolean): void;
13
+ toggleSelect(item: CompositeDataItem<T> | CompositeItemKey, recursive?: boolean): void;
14
+ }
15
+ export interface SelectionManagerOptions<T extends object> {
16
+ onSelect?: (item: T) => void;
17
+ onDeselect?: (item: T) => void;
18
+ onChange?: (selectedKeys: Set<CompositeItemKey>) => void;
19
+ }
@@ -0,0 +1,2 @@
1
+ import { CompositeProps } from './types.ts';
2
+ export declare function CompositeComponent<T extends object>({ data, rootRole, itemRole, groupRole, renderItem, className, itemClassName, rootRef, handleRef, id, itemMouseEventHandler, itemKeyboardEventHandler, initialFocus, softFocus, ...props }: CompositeProps<T>): import("react").JSX.Element;