@stack-spot/portal-components 2.8.1 → 2.10.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.
- package/CHANGELOG.md +14 -0
- package/dist/components/FileTreeView/More.d.ts +23 -0
- package/dist/components/FileTreeView/More.d.ts.map +1 -0
- package/dist/components/FileTreeView/More.js +55 -0
- package/dist/components/FileTreeView/More.js.map +1 -0
- package/dist/components/FileTreeView/index.d.ts +32 -0
- package/dist/components/FileTreeView/index.d.ts.map +1 -0
- package/dist/components/FileTreeView/index.js +80 -0
- package/dist/components/FileTreeView/index.js.map +1 -0
- package/dist/components/SelectionList.d.ts +5 -1
- package/dist/components/SelectionList.d.ts.map +1 -1
- package/dist/components/SelectionList.js +13 -6
- package/dist/components/SelectionList.js.map +1 -1
- package/package.json +3 -2
- package/src/components/FileTreeView/More.tsx +114 -0
- package/src/components/FileTreeView/index.tsx +175 -0
- package/src/components/SelectionList.tsx +18 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [2.10.0](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.9.0...portal-components@v2.10.0) (2024-11-21)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Features
|
|
7
|
+
|
|
8
|
+
* FileTree View component ([#496](https://github.com/stack-spot/portal-commons/issues/496)) ([d66e12d](https://github.com/stack-spot/portal-commons/commit/d66e12dd34e8314f7fb49e3a9cf7b8efc3e93fb2))
|
|
9
|
+
|
|
10
|
+
## [2.9.0](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.8.1...portal-components@v2.9.0) (2024-10-30)
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
|
|
15
|
+
* 1877 create button ([#471](https://github.com/stack-spot/portal-commons/issues/471)) ([a3b07d1](https://github.com/stack-spot/portal-commons/commit/a3b07d13a0c37afc8003b86e4c0e9d3e2e2c14ac))
|
|
16
|
+
|
|
3
17
|
## [2.8.1](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.8.0...portal-components@v2.8.1) (2024-10-28)
|
|
4
18
|
|
|
5
19
|
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import * as icons from '@citric/icons';
|
|
2
|
+
export type IconName = keyof typeof icons;
|
|
3
|
+
export type MenuOption = {
|
|
4
|
+
/**
|
|
5
|
+
* The text that will be displayed for the option.
|
|
6
|
+
*/
|
|
7
|
+
label: string;
|
|
8
|
+
/**
|
|
9
|
+
* The icon that will be displayed alongside the text.
|
|
10
|
+
*/
|
|
11
|
+
icon: IconName;
|
|
12
|
+
/**
|
|
13
|
+
* The function that will be executed when the option is clicked.
|
|
14
|
+
*/
|
|
15
|
+
onClick: VoidFunction;
|
|
16
|
+
};
|
|
17
|
+
interface Props {
|
|
18
|
+
loading?: boolean;
|
|
19
|
+
menu: MenuOption[];
|
|
20
|
+
}
|
|
21
|
+
export declare function More({ loading, menu }: Props): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export {};
|
|
23
|
+
//# sourceMappingURL=More.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"More.d.ts","sourceRoot":"","sources":["../../../src/components/FileTreeView/More.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,eAAe,CAAA;AAMtC,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,KAAK,CAAA;AAEzC,MAAM,MAAM,UAAU,GAAG;IACzB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,EAAE,QAAQ,CAAC;IACf;;OAEG;IACH,OAAO,EAAE,YAAY,CAAC;CACrB,CAAA;AAED,UAAU,KAAK;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,UAAU,EAAE,CAAC;CACpB;AA8CD,wBAAgB,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,KAAK,2CAuC5C"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Box, IconBox, Text } from '@citric/core';
|
|
3
|
+
import * as icons from '@citric/icons';
|
|
4
|
+
import { EllipsisVertical } from '@citric/icons';
|
|
5
|
+
import { IconButton } from '@citric/ui';
|
|
6
|
+
import { theme } from '@stack-spot/portal-theme';
|
|
7
|
+
import { createElement, useState } from 'react';
|
|
8
|
+
const styles = {
|
|
9
|
+
MoreWrapper: {
|
|
10
|
+
position: 'relative',
|
|
11
|
+
'button': {
|
|
12
|
+
width: '2rem',
|
|
13
|
+
height: '2rem',
|
|
14
|
+
},
|
|
15
|
+
'.drop': {
|
|
16
|
+
zIndex: 1,
|
|
17
|
+
position: 'absolute',
|
|
18
|
+
listStyle: 'none',
|
|
19
|
+
display: 'flex',
|
|
20
|
+
margin: '0',
|
|
21
|
+
padding: '0.25rem',
|
|
22
|
+
flexDirection: 'column',
|
|
23
|
+
justifyContent: 'center',
|
|
24
|
+
alignItems: 'flex-start',
|
|
25
|
+
gap: '0.5rem',
|
|
26
|
+
borderRadius: '0.25rem',
|
|
27
|
+
border: `0.063rem solid ${theme.color.light[400]}`,
|
|
28
|
+
backgroundColor: '${theme.color.light[500]}',
|
|
29
|
+
boxShadow: '0 0 0 0.125rem ${theme.color.gray[600]}',
|
|
30
|
+
right: '2px',
|
|
31
|
+
width: 'max-content',
|
|
32
|
+
'ul': {
|
|
33
|
+
padding: 0,
|
|
34
|
+
margin: 0,
|
|
35
|
+
},
|
|
36
|
+
'.item-list-float': {
|
|
37
|
+
minWidth: '230px',
|
|
38
|
+
listStyleType: 'none',
|
|
39
|
+
padding: '8px',
|
|
40
|
+
paddingRight: '12px',
|
|
41
|
+
display: 'flex',
|
|
42
|
+
alignItems: 'center',
|
|
43
|
+
cursor: 'pointer',
|
|
44
|
+
'&:hover': {
|
|
45
|
+
backgroundColor: `${theme.color.light[600]}`,
|
|
46
|
+
},
|
|
47
|
+
},
|
|
48
|
+
},
|
|
49
|
+
},
|
|
50
|
+
};
|
|
51
|
+
export function More({ loading, menu }) {
|
|
52
|
+
const [opened, setOpened] = useState(false);
|
|
53
|
+
return (_jsxs(Box, { sx: styles.MoreWrapper, children: [_jsx(IconButton, { color: "light", size: "sm", appearance: "circle", "aria-label": "More options", disabled: loading, onClick: () => setOpened((old) => !old), onBlur: () => setTimeout(() => setOpened(false), 200), children: _jsx(IconBox, { size: "xs", children: _jsx(EllipsisVertical, {}) }) }), opened && (_jsx("div", { className: "drop", children: _jsx("ul", { className: "drop-wrapper", children: menu.map((menuItem, key) => (_jsxs("li", { role: "button", className: "item-list-float", onClick: menuItem.onClick, children: [_jsx(IconBox, { size: "sm", children: createElement(icons[menuItem.icon]) }), _jsx(Text, { appearance: "body2", children: menuItem.label })] }, key))) }) }))] }));
|
|
54
|
+
}
|
|
55
|
+
//# sourceMappingURL=More.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"More.js","sourceRoot":"","sources":["../../../src/components/FileTreeView/More.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { MenuOption } from './More.js';
|
|
2
|
+
export interface FileDir {
|
|
3
|
+
/**
|
|
4
|
+
* The name of the directory or file.
|
|
5
|
+
* */
|
|
6
|
+
name: string;
|
|
7
|
+
/**
|
|
8
|
+
* dirs - An array containing the directories present in the file tree.
|
|
9
|
+
*/
|
|
10
|
+
dirs: FileDir[];
|
|
11
|
+
/**
|
|
12
|
+
* isFile - A flag indicating whether the item is a file (`true`) or a directory (`false`).
|
|
13
|
+
*/
|
|
14
|
+
isFile?: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* itemLink - The URL or path link associated with the item in the file tree.
|
|
17
|
+
*/
|
|
18
|
+
itemLink: string;
|
|
19
|
+
/**
|
|
20
|
+
* The menu options that will be rendered at the end of the line for this item.
|
|
21
|
+
*/
|
|
22
|
+
menuOptions?: MenuOption[];
|
|
23
|
+
}
|
|
24
|
+
interface Props {
|
|
25
|
+
/**
|
|
26
|
+
* Represents the hierarchical structure of directories and files, providing the component with an organized view of the file system.
|
|
27
|
+
*/
|
|
28
|
+
fileTree: FileDir;
|
|
29
|
+
}
|
|
30
|
+
export declare const FileTreeView: ({ fileTree }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
31
|
+
export {};
|
|
32
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FileTreeView/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAQ,MAAM,QAAQ,CAAA;AAiEzC,MAAM,WAAW,OAAO;IACtB;;SAEK;IACL,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;CAC5B;AAED,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,iBAAkB,KAAK,4CAwE/C,CAAA"}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { Box, IconBox, Text } from '@citric/core';
|
|
3
|
+
import { ChevronDown, Code, Folder } from '@citric/icons';
|
|
4
|
+
import { theme } from '@stack-spot/portal-theme';
|
|
5
|
+
import { useState } from 'react';
|
|
6
|
+
import { useAnchorTag } from '../../context/anchor.js';
|
|
7
|
+
import { More } from './More.js';
|
|
8
|
+
const styles = {
|
|
9
|
+
FileTreeViewWrapper: {
|
|
10
|
+
height: '100%',
|
|
11
|
+
display: 'flex',
|
|
12
|
+
flexDirection: 'column',
|
|
13
|
+
margin: '16px',
|
|
14
|
+
},
|
|
15
|
+
AccordionItemWrapper: {
|
|
16
|
+
width: '100%',
|
|
17
|
+
'ul': {
|
|
18
|
+
listStyleType: 'none',
|
|
19
|
+
margin: 0,
|
|
20
|
+
padding: 0,
|
|
21
|
+
flexDirection: 'column',
|
|
22
|
+
marginLeft: '20px',
|
|
23
|
+
justifyContent: 'center',
|
|
24
|
+
},
|
|
25
|
+
'li': {
|
|
26
|
+
display: 'flex',
|
|
27
|
+
listStyleType: 'none',
|
|
28
|
+
margin: '2px 0',
|
|
29
|
+
padding: 0,
|
|
30
|
+
flexDirection: 'row',
|
|
31
|
+
alignItems: 'center',
|
|
32
|
+
gap: '4px',
|
|
33
|
+
},
|
|
34
|
+
'.accordion-node-group': {
|
|
35
|
+
justifyContent: 'space-between',
|
|
36
|
+
width: '100%',
|
|
37
|
+
'&:hover': {
|
|
38
|
+
backgroundColor: `${theme.color.light[500]}`,
|
|
39
|
+
borderRadius: '4px',
|
|
40
|
+
},
|
|
41
|
+
'a': {
|
|
42
|
+
display: 'flex',
|
|
43
|
+
alignItems: 'center',
|
|
44
|
+
textDecoration: 'underline',
|
|
45
|
+
},
|
|
46
|
+
},
|
|
47
|
+
'.accordion-node': {
|
|
48
|
+
cursor: 'pointer',
|
|
49
|
+
flexDirection: 'row',
|
|
50
|
+
display: 'flex',
|
|
51
|
+
gap: '4px',
|
|
52
|
+
alignItems: 'center',
|
|
53
|
+
background: 'transparent',
|
|
54
|
+
color: 'inherit',
|
|
55
|
+
border: 'none',
|
|
56
|
+
},
|
|
57
|
+
'actions': {
|
|
58
|
+
display: 'flex',
|
|
59
|
+
flexDirection: 'row',
|
|
60
|
+
gap: '4px',
|
|
61
|
+
alignItems: 'center',
|
|
62
|
+
},
|
|
63
|
+
},
|
|
64
|
+
};
|
|
65
|
+
export const FileTreeView = ({ fileTree }) => {
|
|
66
|
+
const AccordionItem = ({ name, isFile, dirs, defaultOpened = false, menuOptions, itemLink }) => {
|
|
67
|
+
const Link = useAnchorTag();
|
|
68
|
+
const [opened, setOpened] = useState(defaultOpened);
|
|
69
|
+
const onExpand = () => {
|
|
70
|
+
setOpened(old => !old);
|
|
71
|
+
};
|
|
72
|
+
const FolderItem = () => (_jsxs("li", { className: "accordion-node-group", children: [_jsxs("button", { className: "accordion-node", onClick: onExpand, children: [_jsx(IconBox, { className: "icon", children: _jsx(ChevronDown, {}) }), _jsx(IconBox, { children: _jsx(Folder, {}) }), _jsx(Text, { children: name !== '' ? name : '/' })] }), menuOptions &&
|
|
73
|
+
_jsx("div", { className: "actions", children: _jsx(More, { menu: menuOptions }) })] }));
|
|
74
|
+
const FileItem = () => (_jsxs("li", { className: "accordion-node-group", children: [_jsxs(Link, { href: itemLink, children: [_jsx(IconBox, { children: _jsx(Code, {}) }), _jsx(Text, { as: "label", children: name })] }), menuOptions &&
|
|
75
|
+
_jsx("div", { className: "actions", children: _jsx(More, { menu: menuOptions }) })] }));
|
|
76
|
+
return (_jsxs(Box, { sx: styles.AccordionItemWrapper, children: [isFile ? _jsx(FileItem, {}) : _jsx(FolderItem, {}), _jsx("ul", { className: "accordion-children", children: opened && !isFile && dirs && dirs.length > 0 && (_jsx(_Fragment, { children: dirs?.map((subDir, index) => (_jsx("li", { children: _jsx(AccordionItem, { ...subDir }) }, index))) })) })] }));
|
|
77
|
+
};
|
|
78
|
+
return (_jsx(Box, { sx: styles.FileTreeViewWrapper, children: _jsx(AccordionItem, { ...fileTree, defaultOpened: true }) }));
|
|
79
|
+
};
|
|
80
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FileTreeView/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -128,6 +128,10 @@ export interface SelectionListProps extends WithStyle {
|
|
|
128
128
|
* Whether or not this list should be scrollable.
|
|
129
129
|
*/
|
|
130
130
|
scroll?: boolean;
|
|
131
|
+
/**
|
|
132
|
+
* Show list as card
|
|
133
|
+
*/
|
|
134
|
+
showListAsCard?: boolean;
|
|
131
135
|
}
|
|
132
136
|
/**
|
|
133
137
|
* Renders a component that allows the selection of one item. The list is show/hidden according to the prop `visible`.
|
|
@@ -138,6 +142,6 @@ export interface SelectionListProps extends WithStyle {
|
|
|
138
142
|
* This component implements keyboard controls and accessibility features.
|
|
139
143
|
* @param props the component's props {@link SelectionListProps}.
|
|
140
144
|
*/
|
|
141
|
-
export declare const SelectionList: ({ id, items, className, style, visible, maxHeight, onHide, before, after, scroll, }: SelectionListProps) => import("react/jsx-runtime").JSX.Element;
|
|
145
|
+
export declare const SelectionList: ({ id, items, className, style, visible, maxHeight, onHide, before, after, scroll, showListAsCard, }: SelectionListProps) => import("react/jsx-runtime").JSX.Element;
|
|
142
146
|
export {};
|
|
143
147
|
//# sourceMappingURL=SelectionList.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectionList.d.ts","sourceRoot":"","sources":["../../src/components/SelectionList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAsB,MAAM,0BAA0B,CAAA;AAExE,OAAO,EAAE,YAAY,EAA6C,MAAM,OAAO,CAAA;AAK/E,UAAU,WAAW;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,MAAM,WAAW,MAAM;IACrB;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,WAAW,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC7C;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,QAAQ,CAAC,CAAC;IACjE;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;IAC7D;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,UAAU,CAAC,CAAC;IACrE;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,YAAY;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAChC;AAED,MAAM,WAAW,UAAW,SAAQ,YAAY,EAAE,MAAM;IACtD;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,SAAS;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACjC;;OAEG;IACH,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB;;MAEE;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,WAAY,SAAQ,SAAS;IACrC,IAAI,EAAE,SAAS,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,eAAgB,SAAQ,SAAS,EAAE,YAAY;IACvD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,KAAK,QAAQ,GAAG,WAAW,GAAG,eAAe,GAAG,UAAU,CAAA;AAW1D,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"SelectionList.d.ts","sourceRoot":"","sources":["../../src/components/SelectionList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAsB,MAAM,0BAA0B,CAAA;AAExE,OAAO,EAAE,YAAY,EAA6C,MAAM,OAAO,CAAA;AAK/E,UAAU,WAAW;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,MAAM,WAAW,MAAM;IACrB;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,WAAW,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC7C;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,QAAQ,CAAC,CAAC;IACjE;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;IAC7D;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,UAAU,CAAC,CAAC;IACrE;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,YAAY;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAChC;AAED,MAAM,WAAW,UAAW,SAAQ,YAAY,EAAE,MAAM;IACtD;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,SAAS;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACjC;;OAEG;IACH,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB;;MAEE;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,WAAY,SAAQ,SAAS;IACrC,IAAI,EAAE,SAAS,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,eAAgB,SAAQ,SAAS,EAAE,YAAY;IACvD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,KAAK,QAAQ,GAAG,WAAW,GAAG,eAAe,GAAG,UAAU,CAAA;AAW1D,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAkID;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,wGAEvB,kBAAkB,4CA0FpB,CAAA"}
|
|
@@ -23,10 +23,9 @@ const SelectionBox = styled.div `
|
|
|
23
23
|
.selection-list-content {
|
|
24
24
|
display: flex;
|
|
25
25
|
flex-direction: column;
|
|
26
|
-
background: ${theme.color.light['500']};
|
|
27
26
|
border-radius: 0.5rem;
|
|
28
|
-
border: 1px solid ${theme.color.light['600']};
|
|
29
27
|
background-color: ${theme.color.light['300']};
|
|
28
|
+
padding-inline: ${({ $showListAsCard }) => $showListAsCard ? '8px' : '0'};
|
|
30
29
|
}
|
|
31
30
|
|
|
32
31
|
.section-title, li > a {
|
|
@@ -51,8 +50,16 @@ const SelectionBox = styled.div `
|
|
|
51
50
|
}
|
|
52
51
|
}
|
|
53
52
|
|
|
53
|
+
li.action {
|
|
54
|
+
background-color: ${({ $showListAsCard }) => $showListAsCard ? theme.color.light['400'] : ''};
|
|
55
|
+
border: ${({ $showListAsCard }) => '1px solid' + $showListAsCard ? theme.color.light['500'] : 'transparent'};
|
|
56
|
+
border-radius: ${({ $showListAsCard }) => $showListAsCard ? '4px' : '0'};
|
|
57
|
+
margin-bottom: ${({ $showListAsCard }) => $showListAsCard ? '8px' : '0'};
|
|
58
|
+
}
|
|
59
|
+
|
|
54
60
|
li.section {
|
|
55
|
-
border-bottom: 2px solid
|
|
61
|
+
border-bottom: 2px solid;
|
|
62
|
+
border-bottom-color: ${({ $showListAsCard }) => $showListAsCard ? 'transparent' : theme.color.light['600']};
|
|
56
63
|
&:last-child {
|
|
57
64
|
border-bottom: none;
|
|
58
65
|
}
|
|
@@ -81,7 +88,7 @@ function renderCollapsible({ label, icon, iconRight, className = '', children },
|
|
|
81
88
|
return (_jsx("li", { className: "collapsible", children: _jsxs(Link, { onClick: handleClick, tabIndex: 0, className: className, "aria-expanded": false, "aria-controls": controllerId, children: [icon && _jsx(IconBox, { children: icon }), _jsx(Text, { appearance: "body2", className: "label", children: label }), iconRight && _jsx(IconBox, { children: iconRight }), _jsx(IconBox, { children: _jsx(ChevronRight, {}) })] }) }, label));
|
|
82
89
|
}
|
|
83
90
|
function renderSection({ label, className = '', children }, options) {
|
|
84
|
-
return (_jsxs("li", { className: `${className} section`, children: [label && _jsx(Text, { appearance: "overheader2", colorScheme: "
|
|
91
|
+
return (_jsxs("li", { className: `${className} section`, children: [label && _jsx(Text, { appearance: "overheader2", colorScheme: "light.700", className: "section-title", children: label }), _jsx("ul", { children: children.map(i => renderItem(i, options)) })] }, label ?? children.map(c => c.label).join('-')));
|
|
85
92
|
}
|
|
86
93
|
function renderItem(item, options) {
|
|
87
94
|
if ('children' in item) {
|
|
@@ -98,7 +105,7 @@ function renderItem(item, options) {
|
|
|
98
105
|
* This component implements keyboard controls and accessibility features.
|
|
99
106
|
* @param props the component's props {@link SelectionListProps}.
|
|
100
107
|
*/
|
|
101
|
-
export const SelectionList = ({ id, items, className, style, visible = true, maxHeight = '300px', onHide, before, after, scroll, }) => {
|
|
108
|
+
export const SelectionList = ({ id, items, className, style, visible = true, maxHeight = '300px', onHide, before, after, scroll, showListAsCard, }) => {
|
|
102
109
|
const Link = useAnchorTag();
|
|
103
110
|
const t = useTranslate(dictionary);
|
|
104
111
|
const [current, setCurrent] = useState({ items });
|
|
@@ -134,7 +141,7 @@ export const SelectionList = ({ id, items, className, style, visible = true, max
|
|
|
134
141
|
}
|
|
135
142
|
return () => removeListeners();
|
|
136
143
|
}, [visible]);
|
|
137
|
-
return (_jsx(SelectionBox, { id: id, ref: wrapper, "$maxHeight": maxHeight, style: style, className: listToClass(['selection-list', visible ? 'visible' : undefined, className]), "$scroll": scroll, "aria-hidden": !visible, children: _jsxs("div", { className: "selection-list-content", children: [before, current.parent
|
|
144
|
+
return (_jsx(SelectionBox, { id: id, ref: wrapper, "$maxHeight": maxHeight, style: style, className: listToClass(['selection-list', visible ? 'visible' : undefined, className]), "$scroll": scroll, "aria-hidden": !visible, "$showListAsCard": showListAsCard, children: _jsxs("div", { className: "selection-list-content", children: [before, current.parent
|
|
138
145
|
? (_jsxs(Flex, { mt: 5, mb: 1, alignItems: "center", children: [_jsx(IconButton, { onClick: (ev) => {
|
|
139
146
|
// accessibility: this will tell the screen reader the section was collapsed before this button is removed from the DOM.
|
|
140
147
|
ev.target?.setAttribute?.('aria-expanded', 'false');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectionList.js","sourceRoot":"","sources":["../../src/components/SelectionList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,OAAO,EAAa,WAAW,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AACxE,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAgB,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC/E,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC1C,OAAO,EAAmB,YAAY,EAAE,MAAM,mBAAmB,CAAA;AACjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AA6GvD,MAAM,qBAAqB,GAAG,GAAG,CAAA;AACjC,MAAM,qBAAqB,GAAG,sBAAsB,qBAAqB,GAAG,IAAI,GAAG,CAAA;
|
|
1
|
+
{"version":3,"file":"SelectionList.js","sourceRoot":"","sources":["../../src/components/SelectionList.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stack-spot/portal-components",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.10.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -22,7 +22,8 @@
|
|
|
22
22
|
"./AnimatedHeight": "./dist/components/AnimatedHeight.js",
|
|
23
23
|
"./SearchInput": "./dist/components/form/SearchInput.js",
|
|
24
24
|
"./Select": "./dist/components/form/Select/index.js",
|
|
25
|
-
"./Stepper": "./dist/components/Stepper/index.js"
|
|
25
|
+
"./Stepper": "./dist/components/Stepper/index.js",
|
|
26
|
+
"./FileTreeView": "./dist/components/FileTreeView/index.js"
|
|
26
27
|
},
|
|
27
28
|
"scripts": {
|
|
28
29
|
"build": "rimraf dist && tsc && tsc-esm-fix --target='dist'",
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
import { Box, IconBox, Text } from '@citric/core'
|
|
2
|
+
import { SxProperties } from '@citric/core/dist/sx'
|
|
3
|
+
import * as icons from '@citric/icons'
|
|
4
|
+
import { EllipsisVertical } from '@citric/icons'
|
|
5
|
+
import { IconButton } from '@citric/ui'
|
|
6
|
+
import { theme } from '@stack-spot/portal-theme'
|
|
7
|
+
import { createElement, useState } from 'react'
|
|
8
|
+
|
|
9
|
+
export type IconName = keyof typeof icons
|
|
10
|
+
|
|
11
|
+
export type MenuOption = {
|
|
12
|
+
/**
|
|
13
|
+
* The text that will be displayed for the option.
|
|
14
|
+
*/
|
|
15
|
+
label: string,
|
|
16
|
+
/**
|
|
17
|
+
* The icon that will be displayed alongside the text.
|
|
18
|
+
*/
|
|
19
|
+
icon: IconName,
|
|
20
|
+
/**
|
|
21
|
+
* The function that will be executed when the option is clicked.
|
|
22
|
+
*/
|
|
23
|
+
onClick: VoidFunction,
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
interface Props {
|
|
27
|
+
loading?: boolean,
|
|
28
|
+
menu: MenuOption[],
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
const styles = {
|
|
32
|
+
MoreWrapper: {
|
|
33
|
+
position: 'relative',
|
|
34
|
+
'button': {
|
|
35
|
+
width: '2rem',
|
|
36
|
+
height: '2rem',
|
|
37
|
+
},
|
|
38
|
+
'.drop': {
|
|
39
|
+
zIndex: 1,
|
|
40
|
+
position: 'absolute',
|
|
41
|
+
listStyle: 'none',
|
|
42
|
+
display: 'flex',
|
|
43
|
+
margin: '0',
|
|
44
|
+
padding: '0.25rem',
|
|
45
|
+
flexDirection: 'column',
|
|
46
|
+
justifyContent: 'center',
|
|
47
|
+
alignItems: 'flex-start',
|
|
48
|
+
gap: '0.5rem',
|
|
49
|
+
borderRadius: '0.25rem',
|
|
50
|
+
border: `0.063rem solid ${theme.color.light[400]}`,
|
|
51
|
+
backgroundColor: '${theme.color.light[500]}',
|
|
52
|
+
boxShadow: '0 0 0 0.125rem ${theme.color.gray[600]}',
|
|
53
|
+
right: '2px',
|
|
54
|
+
width: 'max-content',
|
|
55
|
+
'ul': {
|
|
56
|
+
padding: 0,
|
|
57
|
+
margin: 0,
|
|
58
|
+
},
|
|
59
|
+
'.item-list-float': {
|
|
60
|
+
minWidth: '230px',
|
|
61
|
+
listStyleType: 'none',
|
|
62
|
+
padding: '8px',
|
|
63
|
+
paddingRight: '12px',
|
|
64
|
+
display: 'flex',
|
|
65
|
+
alignItems: 'center',
|
|
66
|
+
cursor: 'pointer',
|
|
67
|
+
'&:hover': {
|
|
68
|
+
backgroundColor: `${theme.color.light[600]}`,
|
|
69
|
+
},
|
|
70
|
+
},
|
|
71
|
+
},
|
|
72
|
+
},
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
export function More({ loading, menu }: Props) {
|
|
76
|
+
|
|
77
|
+
const [opened, setOpened] = useState(false)
|
|
78
|
+
|
|
79
|
+
return (
|
|
80
|
+
<Box sx={styles.MoreWrapper as SxProperties}>
|
|
81
|
+
<IconButton
|
|
82
|
+
color="light"
|
|
83
|
+
size="sm"
|
|
84
|
+
appearance="circle"
|
|
85
|
+
aria-label="More options"
|
|
86
|
+
disabled={loading}
|
|
87
|
+
onClick={() => setOpened((old) => !old)}
|
|
88
|
+
onBlur={() => setTimeout(() => setOpened(false), 200)}
|
|
89
|
+
>
|
|
90
|
+
<IconBox size="xs">
|
|
91
|
+
<EllipsisVertical />
|
|
92
|
+
</IconBox>
|
|
93
|
+
</IconButton>
|
|
94
|
+
{
|
|
95
|
+
opened && (
|
|
96
|
+
<div className="drop">
|
|
97
|
+
<ul className="drop-wrapper">
|
|
98
|
+
{
|
|
99
|
+
menu.map((menuItem, key) => (
|
|
100
|
+
<li role="button" className="item-list-float" key={key} onClick={menuItem.onClick}>
|
|
101
|
+
<IconBox size="sm">
|
|
102
|
+
{createElement(icons[menuItem.icon])}
|
|
103
|
+
</IconBox>
|
|
104
|
+
<Text appearance="body2">{menuItem.label}</Text>
|
|
105
|
+
</li>
|
|
106
|
+
))
|
|
107
|
+
}
|
|
108
|
+
</ul>
|
|
109
|
+
</div>
|
|
110
|
+
)
|
|
111
|
+
}
|
|
112
|
+
</Box>
|
|
113
|
+
)
|
|
114
|
+
}
|
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
|
|
2
|
+
import { Box, IconBox, Text } from '@citric/core'
|
|
3
|
+
import { SxProperties } from '@citric/core/dist/sx'
|
|
4
|
+
import { ChevronDown, Code, Folder } from '@citric/icons'
|
|
5
|
+
import { theme } from '@stack-spot/portal-theme'
|
|
6
|
+
import { useState } from 'react'
|
|
7
|
+
import { useAnchorTag } from '../../context/anchor'
|
|
8
|
+
import { MenuOption, More } from './More'
|
|
9
|
+
|
|
10
|
+
const styles = {
|
|
11
|
+
FileTreeViewWrapper: {
|
|
12
|
+
height: '100%',
|
|
13
|
+
display: 'flex',
|
|
14
|
+
flexDirection: 'column',
|
|
15
|
+
margin: '16px',
|
|
16
|
+
},
|
|
17
|
+
AccordionItemWrapper: {
|
|
18
|
+
width: '100%',
|
|
19
|
+
'ul': {
|
|
20
|
+
listStyleType: 'none',
|
|
21
|
+
margin: 0,
|
|
22
|
+
padding: 0,
|
|
23
|
+
flexDirection: 'column',
|
|
24
|
+
marginLeft: '20px',
|
|
25
|
+
justifyContent: 'center',
|
|
26
|
+
},
|
|
27
|
+
'li': {
|
|
28
|
+
display: 'flex',
|
|
29
|
+
listStyleType: 'none',
|
|
30
|
+
margin: '2px 0',
|
|
31
|
+
padding: 0,
|
|
32
|
+
flexDirection: 'row',
|
|
33
|
+
alignItems: 'center',
|
|
34
|
+
gap: '4px',
|
|
35
|
+
},
|
|
36
|
+
|
|
37
|
+
'.accordion-node-group': {
|
|
38
|
+
justifyContent: 'space-between',
|
|
39
|
+
width: '100%',
|
|
40
|
+
'&:hover': {
|
|
41
|
+
backgroundColor: `${theme.color.light[500]}`,
|
|
42
|
+
borderRadius: '4px',
|
|
43
|
+
},
|
|
44
|
+
|
|
45
|
+
'a': {
|
|
46
|
+
display: 'flex',
|
|
47
|
+
alignItems: 'center',
|
|
48
|
+
textDecoration: 'underline',
|
|
49
|
+
},
|
|
50
|
+
},
|
|
51
|
+
|
|
52
|
+
'.accordion-node': {
|
|
53
|
+
cursor: 'pointer',
|
|
54
|
+
flexDirection: 'row',
|
|
55
|
+
display: 'flex',
|
|
56
|
+
gap: '4px',
|
|
57
|
+
alignItems: 'center',
|
|
58
|
+
background: 'transparent',
|
|
59
|
+
color: 'inherit',
|
|
60
|
+
border: 'none',
|
|
61
|
+
},
|
|
62
|
+
|
|
63
|
+
'actions': {
|
|
64
|
+
display: 'flex',
|
|
65
|
+
flexDirection: 'row',
|
|
66
|
+
gap: '4px',
|
|
67
|
+
alignItems: 'center',
|
|
68
|
+
},
|
|
69
|
+
},
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
export interface FileDir {
|
|
74
|
+
/**
|
|
75
|
+
* The name of the directory or file.
|
|
76
|
+
* */
|
|
77
|
+
name: string,
|
|
78
|
+
/**
|
|
79
|
+
* dirs - An array containing the directories present in the file tree.
|
|
80
|
+
*/
|
|
81
|
+
dirs: FileDir[],
|
|
82
|
+
/**
|
|
83
|
+
* isFile - A flag indicating whether the item is a file (`true`) or a directory (`false`).
|
|
84
|
+
*/
|
|
85
|
+
isFile?: boolean,
|
|
86
|
+
/**
|
|
87
|
+
* itemLink - The URL or path link associated with the item in the file tree.
|
|
88
|
+
*/
|
|
89
|
+
itemLink: string,
|
|
90
|
+
/**
|
|
91
|
+
* The menu options that will be rendered at the end of the line for this item.
|
|
92
|
+
*/
|
|
93
|
+
menuOptions?: MenuOption[],
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
interface Props {
|
|
97
|
+
/**
|
|
98
|
+
* Represents the hierarchical structure of directories and files, providing the component with an organized view of the file system.
|
|
99
|
+
*/
|
|
100
|
+
fileTree: FileDir,
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
export const FileTreeView = ({ fileTree }: Props) => {
|
|
104
|
+
|
|
105
|
+
const AccordionItem = ({ name, isFile, dirs, defaultOpened = false, menuOptions, itemLink }: FileDir
|
|
106
|
+
& { defaultOpened?: boolean }) => {
|
|
107
|
+
|
|
108
|
+
const Link = useAnchorTag()
|
|
109
|
+
const [opened, setOpened] = useState<boolean>(defaultOpened)
|
|
110
|
+
|
|
111
|
+
const onExpand = () => {
|
|
112
|
+
setOpened(old => !old)
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
const FolderItem = () => (
|
|
116
|
+
<li className="accordion-node-group">
|
|
117
|
+
<button className="accordion-node" onClick={onExpand}>
|
|
118
|
+
<IconBox className="icon">
|
|
119
|
+
<ChevronDown />
|
|
120
|
+
</IconBox>
|
|
121
|
+
<IconBox>
|
|
122
|
+
<Folder />
|
|
123
|
+
</IconBox>
|
|
124
|
+
<Text>{name !== '' ? name : '/'}</Text>
|
|
125
|
+
</button>
|
|
126
|
+
{ menuOptions &&
|
|
127
|
+
<div className="actions">
|
|
128
|
+
<More menu={menuOptions} />
|
|
129
|
+
</div>
|
|
130
|
+
}
|
|
131
|
+
</li>
|
|
132
|
+
)
|
|
133
|
+
|
|
134
|
+
const FileItem = () => (
|
|
135
|
+
<li className="accordion-node-group">
|
|
136
|
+
<Link href={itemLink}>
|
|
137
|
+
<IconBox>
|
|
138
|
+
<Code />
|
|
139
|
+
</IconBox>
|
|
140
|
+
<Text as="label">{name}</Text>
|
|
141
|
+
</Link>
|
|
142
|
+
{ menuOptions &&
|
|
143
|
+
<div className="actions">
|
|
144
|
+
<More menu={menuOptions} />
|
|
145
|
+
</div>
|
|
146
|
+
}
|
|
147
|
+
</li >
|
|
148
|
+
)
|
|
149
|
+
|
|
150
|
+
return (
|
|
151
|
+
<Box sx={styles.AccordionItemWrapper}>
|
|
152
|
+
{
|
|
153
|
+
isFile ? <FileItem /> : <FolderItem />
|
|
154
|
+
}
|
|
155
|
+
<ul className="accordion-children">
|
|
156
|
+
{opened && !isFile && dirs && dirs.length > 0 && (
|
|
157
|
+
<>
|
|
158
|
+
{dirs?.map((subDir, index) => (
|
|
159
|
+
<li key={index}>{
|
|
160
|
+
<AccordionItem {...subDir} />
|
|
161
|
+
}</li>
|
|
162
|
+
))}
|
|
163
|
+
</>
|
|
164
|
+
)}
|
|
165
|
+
</ul>
|
|
166
|
+
</Box>
|
|
167
|
+
)
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
return (
|
|
171
|
+
<Box sx={styles.FileTreeViewWrapper as SxProperties}>
|
|
172
|
+
<AccordionItem {...fileTree} defaultOpened={true} />
|
|
173
|
+
</Box>
|
|
174
|
+
)
|
|
175
|
+
}
|
|
@@ -153,6 +153,10 @@ export interface SelectionListProps extends WithStyle {
|
|
|
153
153
|
* Whether or not this list should be scrollable.
|
|
154
154
|
*/
|
|
155
155
|
scroll?: boolean,
|
|
156
|
+
/**
|
|
157
|
+
* Show list as card
|
|
158
|
+
*/
|
|
159
|
+
showListAsCard?: boolean,
|
|
156
160
|
}
|
|
157
161
|
|
|
158
162
|
interface RenderOptions {
|
|
@@ -162,7 +166,7 @@ interface RenderOptions {
|
|
|
162
166
|
Link: AnchorComponent,
|
|
163
167
|
}
|
|
164
168
|
|
|
165
|
-
const SelectionBox = styled.div<{ $maxHeight: string, $scroll?: boolean }>`
|
|
169
|
+
const SelectionBox = styled.div<{ $maxHeight: string, $scroll?: boolean, $showListAsCard?: boolean }>`
|
|
166
170
|
max-height: 0;
|
|
167
171
|
overflow-y: ${({ $scroll }) => $scroll ? 'auto' : 'hidden'};
|
|
168
172
|
overflow-x: hidden;
|
|
@@ -175,10 +179,9 @@ const SelectionBox = styled.div<{ $maxHeight: string, $scroll?: boolean }>`
|
|
|
175
179
|
.selection-list-content {
|
|
176
180
|
display: flex;
|
|
177
181
|
flex-direction: column;
|
|
178
|
-
background: ${theme.color.light['500']};
|
|
179
182
|
border-radius: 0.5rem;
|
|
180
|
-
border: 1px solid ${theme.color.light['600']};
|
|
181
183
|
background-color: ${theme.color.light['300']};
|
|
184
|
+
padding-inline: ${({ $showListAsCard }) => $showListAsCard ? '8px' : '0'};
|
|
182
185
|
}
|
|
183
186
|
|
|
184
187
|
.section-title, li > a {
|
|
@@ -203,8 +206,16 @@ const SelectionBox = styled.div<{ $maxHeight: string, $scroll?: boolean }>`
|
|
|
203
206
|
}
|
|
204
207
|
}
|
|
205
208
|
|
|
209
|
+
li.action {
|
|
210
|
+
background-color: ${({ $showListAsCard }) => $showListAsCard ? theme.color.light['400'] : ''};
|
|
211
|
+
border: ${({ $showListAsCard }) => '1px solid' + $showListAsCard ? theme.color.light['500'] : 'transparent'};
|
|
212
|
+
border-radius: ${({ $showListAsCard }) => $showListAsCard ? '4px' : '0'};
|
|
213
|
+
margin-bottom: ${({ $showListAsCard }) => $showListAsCard ? '8px' : '0'};
|
|
214
|
+
}
|
|
215
|
+
|
|
206
216
|
li.section {
|
|
207
|
-
border-bottom: 2px solid
|
|
217
|
+
border-bottom: 2px solid;
|
|
218
|
+
border-bottom-color: ${({ $showListAsCard }) => $showListAsCard ? 'transparent' : theme.color.light['600']};
|
|
208
219
|
&:last-child {
|
|
209
220
|
border-bottom: none;
|
|
210
221
|
}
|
|
@@ -263,7 +274,7 @@ function renderCollapsible({ label, icon, iconRight, className = '', children }:
|
|
|
263
274
|
function renderSection({ label, className = '', children }: ListSection, options: RenderOptions) {
|
|
264
275
|
return (
|
|
265
276
|
<li key={label ?? children.map(c => c.label).join('-')} className={`${className} section`}>
|
|
266
|
-
{label && <Text appearance="overheader2" colorScheme="
|
|
277
|
+
{label && <Text appearance="overheader2" colorScheme="light.700" className="section-title">{label}</Text>}
|
|
267
278
|
<ul>{children.map(i => renderItem(i, options))}</ul>
|
|
268
279
|
</li>
|
|
269
280
|
)
|
|
@@ -286,7 +297,7 @@ function renderItem(item: ListItem, options: RenderOptions) {
|
|
|
286
297
|
* @param props the component's props {@link SelectionListProps}.
|
|
287
298
|
*/
|
|
288
299
|
export const SelectionList = ({
|
|
289
|
-
id, items, className, style, visible = true, maxHeight = '300px', onHide, before, after, scroll,
|
|
300
|
+
id, items, className, style, visible = true, maxHeight = '300px', onHide, before, after, scroll, showListAsCard,
|
|
290
301
|
}: SelectionListProps) => {
|
|
291
302
|
const Link = useAnchorTag()
|
|
292
303
|
const t = useTranslate(dictionary)
|
|
@@ -341,6 +352,7 @@ export const SelectionList = ({
|
|
|
341
352
|
className={listToClass(['selection-list', visible ? 'visible' : undefined, className])}
|
|
342
353
|
$scroll={scroll}
|
|
343
354
|
aria-hidden={!visible}
|
|
355
|
+
$showListAsCard={showListAsCard}
|
|
344
356
|
>
|
|
345
357
|
<div className="selection-list-content">
|
|
346
358
|
{before}
|