@topconsultnpm/sdkui-react 6.21.0-dev2.2 → 6.21.0-dev2.4

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 (3) hide show
  1. package/lib/components/base/TMAccordionNew.d.ts +1 -0
  2. package/lib/components/base/TMAccordionNew.js +5 -5
  3. package/package.json +54 -54
package/lib/components/base/TMAccordionNew.d.ts CHANGED
@@ -23,6 +23,7 @@ export interface TMAccordionProps {
23
23
  localStorageKey?: string;
24
24
  selectedItem?: any;
25
25
  onSelectedItemChange?: (item: any) => void;
26
+ itemMarginBottom?: number;
26
27
  }
27
28
  declare const TMAccordion: React.FC<TMAccordionProps>;
28
29
  export default TMAccordion;
package/lib/components/base/TMAccordionNew.js CHANGED
@@ -41,7 +41,7 @@ const Container = styled.div `
41
41
  }
42
42
  `;
43
43
  const AccordionItem = styled.div `
44
- margin-bottom: 16px;
44
+ margin-bottom: ${props => props.$marginBottom}px;
45
45
  border-radius: 5px;
46
46
  background: white;
47
47
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
@@ -152,7 +152,7 @@ const LoadingContainer = styled.div `
152
152
  min-height: 200px;
153
153
  `;
154
154
  const DEFAULT_COLORS = ['#339af0', '#fa5252', '#40c057', '#f59f00', '#e64980', '#7950f2'];
155
- const TMAccordion = ({ groups, localStorageKey, selectedItem, onSelectedItemChange }) => {
155
+ const TMAccordion = ({ groups, localStorageKey, selectedItem, onSelectedItemChange, itemMarginBottom = 16 }) => {
156
156
  const [openAccordions, setOpenAccordions] = useState({});
157
157
  const [isInitialized, setIsInitialized] = useState(false);
158
158
  const [focusedItem, setFocusedItem] = useState(undefined);
@@ -308,16 +308,16 @@ const TMAccordion = ({ groups, localStorageKey, selectedItem, onSelectedItemChan
308
308
  const color = getGroupColor(group, index);
309
309
  const isOpen = openAccordions[group.id] ?? true;
310
310
  if (group.customComponent) {
311
- return (_jsxs(AccordionItem, { children: [_jsxs(AccordionHeader, { id: `accordion-header-${group.id}`, "$color": color, "$isOpen": isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { "$isOpen": isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), isOpen && (_jsx(CustomComponentContainer, { children: group.customComponent }))] }, group.id));
311
+ return (_jsxs(AccordionItem, { "$marginBottom": itemMarginBottom, children: [_jsxs(AccordionHeader, { id: `accordion-header-${group.id}`, "$color": color, "$isOpen": isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { "$isOpen": isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), isOpen && (_jsx(CustomComponentContainer, { children: group.customComponent }))] }, group.id));
312
312
  }
313
313
  if (!group.dataSource || group.dataSource.length === 0)
314
314
  return null;
315
315
  if (!group.renderItem) {
316
- return (_jsxs(AccordionItem, { children: [_jsxs(AccordionHeader, { id: `accordion-header-${group.id}`, "$color": color, "$isOpen": isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { "$isOpen": isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), _jsx(AccordionContent, { "$isOpen": isOpen, "$maxHeight": 100, children: _jsxs(ErrorMessage, { children: ["\u26A0\uFE0F renderItem function is required for \"", group.title, "\" group"] }) })] }, group.id));
316
+ return (_jsxs(AccordionItem, { "$marginBottom": itemMarginBottom, children: [_jsxs(AccordionHeader, { id: `accordion-header-${group.id}`, "$color": color, "$isOpen": isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { "$isOpen": isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), _jsx(AccordionContent, { "$isOpen": isOpen, "$maxHeight": 100, children: _jsxs(ErrorMessage, { children: ["\u26A0\uFE0F renderItem function is required for \"", group.title, "\" group"] }) })] }, group.id));
317
317
  }
318
318
  const itemHeight = group.itemHeight || 80;
319
319
  const maxHeight = group.dataSource.length * itemHeight + 20;
320
- return (_jsxs(AccordionItem, { children: [_jsxs(AccordionHeader, { id: `accordion-header-${group.id}`, "$color": color, "$isOpen": isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { "$isOpen": isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), _jsx(AccordionContent, { "$isOpen": isOpen, "$maxHeight": maxHeight, children: _jsx(ItemsList, { children: group.dataSource.map((item, itemIndex) => {
320
+ return (_jsxs(AccordionItem, { "$marginBottom": itemMarginBottom, children: [_jsxs(AccordionHeader, { id: `accordion-header-${group.id}`, "$color": color, "$isOpen": isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { "$isOpen": isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), _jsx(AccordionContent, { "$isOpen": isOpen, "$maxHeight": maxHeight, children: _jsx(ItemsList, { children: group.dataSource.map((item, itemIndex) => {
321
321
  const isSelected = selectedItem === item;
322
322
  const isFocused = focusedItem === item;
323
323
  return (_jsx(ListItem, { id: `accordion-item-${group.id}-${itemIndex}`, className: "tm-accordion-list-item", "$isSelected": isSelected, "$color": color, onClick: () => handleItemClick(item, group), onDoubleClick: () => handleItemDoubleClick(item, group), onMouseEnter: () => setFocusedItem(item), onMouseLeave: () => setFocusedItem(undefined), onContextMenu: (e) => handleContextMenu(e, item, group), children: group.renderItem(item, isSelected, isFocused, color) }, itemIndex * 2));
package/package.json CHANGED
@@ -1,56 +1,56 @@
1
1
  {
2
- "name": "@topconsultnpm/sdkui-react",
3
- "version": "6.21.0-dev2.2",
4
- "description": "",
5
- "scripts": {
6
- "test": "echo \"Error: no test specified\" \u0026\u0026 exit 1",
7
- "clean": "powershell Remove-Item lib/ -recurse",
8
- "copy-files": "copyfiles -u 1 src/assets/*.* src/assets/ImageLibrary/*.* src/assets/thumbnails/*.* src/assets/IconsS4t/*.* src/assets/Metadata/*.* src/css/tm-sdkui.css lib/",
9
- "tm-build": "npm run clean \u0026\u0026 tsc \u0026\u0026 npm run copy-files",
10
- "tm-watch": "tsc -w",
11
- "tm-publish": "npm publish --tag latest",
12
- "tm-publish_wl": "npm publish",
13
- "storybook": "storybook dev -p 6006",
14
- "build-storybook": "storybook build"
15
- },
16
- "author": "TopConsult",
17
- "license": "ISC",
18
- "devDependencies": {
19
- "@chromatic-com/storybook": "^5.1.2",
20
- "@storybook/addon-docs": "^10.3.5",
21
- "@storybook/addon-onboarding": "^10.3.5",
22
- "@storybook/react-vite": "^10.3.5",
23
- "@types/htmlparser2": "^3.10.7",
24
- "@types/node": "^24.12.2",
25
- "@types/react": "^18.3.3",
26
- "@types/react-dom": "^18.3.3",
27
- "copyfiles": "^2.4.1",
28
- "esbuild": "^0.25.0",
29
- "react": "^18.3.1",
30
- "react-dom": "^18.3.1",
31
- "storybook": "^10.3.5",
32
- "typescript": "^5.9.3",
33
- "vite": "^6.1.1"
34
- },
35
- "main": "dist/cjs/index.js",
36
- "types": "./index.d.ts",
37
- "module": "lib/esm/index.js",
38
- "files": [
39
- "dist",
40
- "lib"
41
- ],
42
- "dependencies": {
43
- "react-router-dom": "^6.15.0",
44
- "react-pdf": "^10.4.1",
45
- "htmlparser2": "^10.0.0",
46
- "buffer": "^6.0.3",
47
- "@topconsultnpm/sdk-ts": "6.21.0-t1",
48
- "exceljs": "^4.4.0",
49
- "devextreme": "^25.2.6",
50
- "styled-components": "^6.1.1",
51
- "devextreme-react": "^25.2.6"
52
- },
53
- "overrides": {
54
- "esbuild": "^0.25.0"
55
- }
2
+ "name": "@topconsultnpm/sdkui-react",
3
+ "version": "6.21.0-dev2.4",
4
+ "description": "",
5
+ "scripts": {
6
+ "test": "echo \"Error: no test specified\" && exit 1",
7
+ "clean": "powershell Remove-Item lib/ -recurse",
8
+ "copy-files": "copyfiles -u 1 src/assets/*.* src/assets/ImageLibrary/*.* src/assets/thumbnails/*.* src/assets/IconsS4t/*.* src/assets/Metadata/*.* src/css/tm-sdkui.css lib/",
9
+ "tm-build": "npm run clean && tsc && npm run copy-files",
10
+ "tm-watch": "tsc -w",
11
+ "tm-publish": "npm publish --tag latest",
12
+ "tm-publish_wl": "npm publish",
13
+ "storybook": "storybook dev -p 6006",
14
+ "build-storybook": "storybook build"
15
+ },
16
+ "author": "TopConsult",
17
+ "license": "ISC",
18
+ "devDependencies": {
19
+ "@chromatic-com/storybook": "^5.1.2",
20
+ "@storybook/addon-docs": "^10.3.5",
21
+ "@storybook/addon-onboarding": "^10.3.5",
22
+ "@storybook/react-vite": "^10.3.5",
23
+ "@types/htmlparser2": "^3.10.7",
24
+ "@types/node": "^24.12.2",
25
+ "@types/react": "^18.3.3",
26
+ "@types/react-dom": "^18.3.3",
27
+ "copyfiles": "^2.4.1",
28
+ "esbuild": "^0.25.0",
29
+ "react": "^18.3.1",
30
+ "react-dom": "^18.3.1",
31
+ "storybook": "^10.3.5",
32
+ "typescript": "^5.9.3",
33
+ "vite": "^6.1.1"
34
+ },
35
+ "main": "dist/cjs/index.js",
36
+ "types": "./index.d.ts",
37
+ "module": "lib/esm/index.js",
38
+ "files": [
39
+ "dist",
40
+ "lib"
41
+ ],
42
+ "dependencies": {
43
+ "@topconsultnpm/sdk-ts": "6.21.0-dev2.2",
44
+ "buffer": "^6.0.3",
45
+ "devextreme": "^25.2.6",
46
+ "devextreme-react": "^25.2.6",
47
+ "exceljs": "^4.4.0",
48
+ "htmlparser2": "^10.0.0",
49
+ "react-pdf": "^10.4.1",
50
+ "react-router-dom": "^6.15.0",
51
+ "styled-components": "^6.1.1"
52
+ },
53
+ "overrides": {
54
+ "esbuild": "^0.25.0"
55
+ }
56
56
  }