@enonic/ui 0.26.0 → 0.27.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 (30) hide show
  1. package/dist/enonic-ui.cjs +1 -1
  2. package/dist/enonic-ui.es.js +104 -93
  3. package/dist/styles/preset.css +1 -1
  4. package/dist/styles/style.css +1 -1
  5. package/dist/styles/tokens.css +1 -1
  6. package/dist/styles/utilities.css +1 -1
  7. package/dist/types/components/icon-button/icon-button.d.ts +1 -1
  8. package/dist/types/components/index.d.ts +2 -0
  9. package/dist/types/components/skeleton/index.d.ts +1 -0
  10. package/dist/types/components/skeleton/skeleton.d.ts +26 -0
  11. package/dist/types/components/tree-list/index.d.ts +2 -1
  12. package/dist/types/components/tree-list/tree-list.d.ts +141 -106
  13. package/dist/types/components/virtualized-tree-list/index.d.ts +2 -0
  14. package/dist/types/components/virtualized-tree-list/virtualized-tree-list.d.ts +195 -0
  15. package/dist/types/hooks/index.d.ts +1 -0
  16. package/dist/types/hooks/use-item-registry.d.ts +5 -0
  17. package/dist/types/hooks/use-virtualized-keyboard-navigation.d.ts +81 -0
  18. package/dist/types/icons/circle-disc.d.ts +7 -0
  19. package/dist/types/icons/filled-circle-alert.d.ts +8 -0
  20. package/dist/types/icons/filled-circle-check.d.ts +8 -0
  21. package/dist/types/icons/filled-circle-info.d.ts +8 -0
  22. package/dist/types/icons/filled-circle-x.d.ts +8 -0
  23. package/dist/types/icons/filled-square-check.d.ts +8 -0
  24. package/dist/types/icons/filled-square-minus.d.ts +8 -0
  25. package/dist/types/icons/index.d.ts +7 -0
  26. package/dist/types/index.d.ts +1 -0
  27. package/dist/types/providers/index.d.ts +1 -0
  28. package/dist/types/providers/tree-list-provider.d.ts +30 -17
  29. package/dist/types/providers/virtualized-tree-list-provider.d.ts +26 -0
  30. package/package.json +11 -7
@@ -0,0 +1,7 @@
1
+ export { CircleDisc, CircleDiscIcon } from './circle-disc';
2
+ export { FilledCircleAlert, FilledCircleAlertIcon } from './filled-circle-alert';
3
+ export { FilledCircleCheck, FilledCircleCheckIcon } from './filled-circle-check';
4
+ export { FilledCircleInfo, FilledCircleInfoIcon } from './filled-circle-info';
5
+ export { FilledCircleX, FilledCircleXIcon } from './filled-circle-x';
6
+ export { FilledSquareCheck, FilledSquareCheckIcon } from './filled-square-check';
7
+ export { FilledSquareMinus, FilledSquareMinusIcon } from './filled-square-minus';
@@ -1,5 +1,6 @@
1
1
  export * from './components';
2
2
  export * from './hooks';
3
+ export * from './icons';
3
4
  export * from './providers';
4
5
  export * from './types';
5
6
  export * from './utils';
@@ -13,3 +13,4 @@ export * from './tab-provider';
13
13
  export * from './toast-provider';
14
14
  export * from './toggle-group-provider';
15
15
  export * from './tree-list-provider';
16
+ export * from './virtualized-tree-list-provider';
@@ -1,23 +1,36 @@
1
1
  import { ReactElement, ReactNode, RefObject } from 'react';
2
- import { FlatTreeNode, TreeData } from '../components/tree-list/tree-list';
3
- export type TreeListContextValue<T extends TreeData = TreeData> = {
2
+ export type SelectionMode = 'single' | 'multiple' | 'none';
3
+ export type TreeListContextValue = {
4
4
  baseId: string;
5
- items: readonly FlatTreeNode<T>[];
6
- loadMore: (parent?: string) => Promise<void>;
7
- isItemSelectable: (item: T) => boolean;
8
- active?: string;
9
- selection?: ReadonlySet<string>;
10
- expanded?: ReadonlySet<string>;
11
- toggleSelection: (id: string) => void;
12
- toggleExpanded: (id: string) => void;
13
- updateActive: (id: string | undefined) => void;
14
- selectionMode: 'single' | 'multiple';
5
+ active: string | undefined;
6
+ setActive: (id: string | undefined) => void;
15
7
  isFocused: boolean;
16
- scrollRootRef?: RefObject<HTMLDivElement>;
8
+ selection: ReadonlySet<string>;
9
+ toggleSelection: (id: string) => void;
10
+ selectOnly: (id: string) => void;
11
+ selectRange: (fromId: string, toId: string) => void;
12
+ clearSelection: () => void;
13
+ selectAll: () => void;
14
+ selectionMode: SelectionMode;
15
+ anchorId: string | undefined;
16
+ setAnchorId: (id: string | undefined) => void;
17
+ registerItem: (id: string, disabled?: boolean) => void;
18
+ unregisterItem: (id: string) => void;
19
+ getItems: () => string[];
20
+ isItemDisabled: (id: string) => boolean;
21
+ scrollContainerRef: RefObject<HTMLDivElement | null>;
22
+ getParentId?: (id: string) => string | undefined;
23
+ getFirstChildId?: (id: string) => string | undefined;
24
+ isExpanded?: (id: string) => boolean;
25
+ toggleExpanded?: (id: string) => void;
26
+ onActivate?: (id: string) => void;
27
+ actionModeRowId: string | undefined;
28
+ enterActionMode: () => void;
29
+ exitActionMode: () => void;
17
30
  };
18
- export type TreeListProviderProps<T extends TreeData = TreeData> = {
19
- value: TreeListContextValue<T>;
31
+ export type TreeListProviderProps = {
32
+ value: TreeListContextValue;
20
33
  children?: ReactNode;
21
34
  };
22
- export declare const TreeListProvider: <T extends TreeData = TreeData>({ value, children, }: TreeListProviderProps<T>) => ReactElement;
23
- export declare const useTreeList: <T extends TreeData = TreeData>() => TreeListContextValue<T>;
35
+ export declare const TreeListProvider: ({ value, children }: TreeListProviderProps) => ReactElement;
36
+ export declare const useTreeList: () => TreeListContextValue;
@@ -0,0 +1,26 @@
1
+ import { ReactElement, ReactNode } from 'react';
2
+ import { FlatNodeBase } from '../hooks/use-virtualized-keyboard-navigation';
3
+ export type VirtualizedTreeListContextValue = {
4
+ baseId: string;
5
+ activeIndex: number | null;
6
+ activeId: string | null;
7
+ setActiveIndex: (index: number | null) => void;
8
+ selection: ReadonlySet<string>;
9
+ toggleSelection: (id: string, index: number) => void;
10
+ selectionMode: 'single' | 'multiple' | 'none';
11
+ isFocused: boolean;
12
+ items: readonly FlatNodeBase[];
13
+ getItemIndex: (id: string) => number;
14
+ scrollToIndex: (index: number) => void;
15
+ onExpand?: (id: string) => void;
16
+ onCollapse?: (id: string) => void;
17
+ onActivate?: (id: string) => void;
18
+ actionModeRowId: string | undefined;
19
+ exitActionMode: () => void;
20
+ };
21
+ export type VirtualizedTreeListProviderProps = {
22
+ value: VirtualizedTreeListContextValue;
23
+ children?: ReactNode;
24
+ };
25
+ export declare const VirtualizedTreeListProvider: ({ value, children }: VirtualizedTreeListProviderProps) => ReactElement;
26
+ export declare const useVirtualizedTreeList: () => VirtualizedTreeListContextValue;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@enonic/ui",
3
- "version": "0.26.0",
3
+ "version": "0.27.0",
4
4
  "description": "Enonic UI Component Library",
5
5
  "author": "Enonic",
6
6
  "license": "MIT",
@@ -58,7 +58,8 @@
58
58
  "lucide-react": ">=0.500.0",
59
59
  "preact": ">=10.0.0",
60
60
  "react": "^19.0.0",
61
- "react-dom": "^19.0.0"
61
+ "react-dom": "^19.0.0",
62
+ "react-virtuoso": "^4.0.0"
62
63
  },
63
64
  "peerDependenciesMeta": {
64
65
  "preact": {
@@ -69,6 +70,9 @@
69
70
  },
70
71
  "react-dom": {
71
72
  "optional": true
73
+ },
74
+ "react-virtuoso": {
75
+ "optional": true
72
76
  }
73
77
  },
74
78
  "devDependencies": {
@@ -97,6 +101,7 @@
97
101
  "lucide-preact": "~0.560.0",
98
102
  "lucide-react": "~0.560.0",
99
103
  "postcss": "~8.5.6",
104
+ "react-virtuoso": "~4.14.0",
100
105
  "rollup-plugin-visualizer": "~6.0.5",
101
106
  "size-limit": "~12.0.0",
102
107
  "storybook": "~10.1.6",
@@ -128,7 +133,7 @@
128
133
  },
129
134
  "lint-staged": {
130
135
  "*.{ts,tsx}": [
131
- "biome check --write --unsafe --no-errors-on-unmatched",
136
+ "biome check --write --unsafe --formatter-enabled=true --no-errors-on-unmatched",
132
137
  "eslint --cache --fix --no-warn-ignored --concurrency auto"
133
138
  ],
134
139
  "*.{json,css}": [
@@ -138,11 +143,11 @@
138
143
  "size-limit": [
139
144
  {
140
145
  "path": "dist/enonic-ui.es.js",
141
- "limit": "35 KB"
146
+ "limit": "40 KB"
142
147
  },
143
148
  {
144
149
  "path": "dist/enonic-ui.cjs",
145
- "limit": "35 KB"
150
+ "limit": "40 KB"
146
151
  },
147
152
  {
148
153
  "path": "dist/styles/style.css",
@@ -167,9 +172,8 @@
167
172
  "typecheck": "pnpm typecheck:app && pnpm typecheck:node",
168
173
  "typecheck:app": "tsc --noEmit --project tsconfig.app.json",
169
174
  "typecheck:node": "tsc --noEmit --project tsconfig.node.json",
170
- "lint": "biome check . && eslint --cache '**/*.{ts,tsx}' --max-warnings 0 --concurrency auto",
175
+ "lint": "biome check . && eslint --cache 'src/**/*.{ts,tsx}' --max-warnings 0 --concurrency auto",
171
176
  "lint:fix": "biome check --write --unsafe . && eslint --cache 'src/**/*.{ts,tsx}' --fix --concurrency auto",
172
- "lint:ci": "biome check . && eslint --no-cache 'src/**/*.{ts,tsx}' --max-warnings 0 --concurrency auto",
173
177
  "format": "biome format --write .",
174
178
  "format:check": "biome format .",
175
179
  "test": "exit 0",