w-design-system 0.0.55 → 0.0.57
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/dist/components/DatePicker/index.d.ts +1 -0
- package/dist/components/DatePicker/index.d.ts.map +1 -1
- package/dist/components/Select/index.d.ts +3 -0
- package/dist/components/Select/index.d.ts.map +1 -1
- package/dist/components/Select/index.js +55 -6
- package/dist/components/Select/index.js.map +1 -1
- package/dist/components/Sidebar/index.d.ts +1 -1
- package/dist/components/Sidebar/index.d.ts.map +1 -1
- package/dist/components/Sidebar/index.js +12 -6
- package/dist/components/Sidebar/index.js.map +1 -1
- package/dist/components/Sidebar/stories.js +5 -5
- package/dist/components/Sidebar/stories.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Select/index.tsx +93 -25
- package/src/components/Sidebar/index.tsx +18 -5
- package/src/components/Sidebar/stories.tsx +6 -6
|
@@ -16,6 +16,7 @@ export declare const DatePicker: <T extends GetElementType<DateRangePickerProps[
|
|
|
16
16
|
text: string;
|
|
17
17
|
id: number;
|
|
18
18
|
icon?: React.ReactNode;
|
|
19
|
+
badge?: string | number;
|
|
19
20
|
}>({ onSelectedCustomDate, customDate, ...props }: DatePickerProps<T>) => React.JSX.Element;
|
|
20
21
|
export {};
|
|
21
22
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC7C,OAAO,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAA;AAE1E,KAAK,cAAc,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,KAAK,CAAA;AAE1D,MAAM,WAAW,eAAe,CAC9B,CAAC,SAAS,cAAc,CAAC,oBAAoB,CAAC,SAAS,CAAC,CAAC,GAAG,cAAc,CAAC,oBAAoB,CAAC,SAAS,CAAC,CAAC,CAC3G,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,CAAC,EAAE,CAAA;IACb,cAAc,CAAC,EAAE,CAAC,GAAG,IAAI,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sBAAsB,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAA;IACnD,UAAU,EAAE,IAAI,GAAG,IAAI,CAAA;IACvB,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAA;CACnD;AAED,eAAO,MAAM,UAAU,GACrB,CAAC,SAAS,cAAc,CAAC,oBAAoB,CAAC,SAAS,CAAC,CAAC
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC7C,OAAO,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAA;AAE1E,KAAK,cAAc,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,KAAK,CAAA;AAE1D,MAAM,WAAW,eAAe,CAC9B,CAAC,SAAS,cAAc,CAAC,oBAAoB,CAAC,SAAS,CAAC,CAAC,GAAG,cAAc,CAAC,oBAAoB,CAAC,SAAS,CAAC,CAAC,CAC3G,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,CAAC,EAAE,CAAA;IACb,cAAc,CAAC,EAAE,CAAC,GAAG,IAAI,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sBAAsB,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAA;IACnD,UAAU,EAAE,IAAI,GAAG,IAAI,CAAA;IACvB,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAA;CACnD;AAED,eAAO,MAAM,UAAU,GACrB,CAAC,SAAS,cAAc,CAAC,oBAAoB,CAAC,SAAS,CAAC,CAAC;;;;;mDAKxD,eAAe,CAAC,CAAC,CAAC,sBAapB,CAAA"}
|
|
@@ -3,10 +3,12 @@ export interface SelectProps<T extends {
|
|
|
3
3
|
text: string;
|
|
4
4
|
id: number;
|
|
5
5
|
icon?: ReactNode;
|
|
6
|
+
badge?: string | number;
|
|
6
7
|
} = {
|
|
7
8
|
text: string;
|
|
8
9
|
id: number;
|
|
9
10
|
icon?: ReactNode;
|
|
11
|
+
badge?: string | number;
|
|
10
12
|
}> extends HTMLAttributes<HTMLDivElement> {
|
|
11
13
|
disabled?: boolean;
|
|
12
14
|
label?: string;
|
|
@@ -29,6 +31,7 @@ export declare const Select: <T extends {
|
|
|
29
31
|
text: string;
|
|
30
32
|
id: number;
|
|
31
33
|
icon?: ReactNode;
|
|
34
|
+
badge?: any;
|
|
32
35
|
}>(props: PropsWithChildren<SelectProps<T>> & {
|
|
33
36
|
ref?: React.ForwardedRef<SelectRef>;
|
|
34
37
|
}) => React.ReactElement;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,cAAc,EACd,iBAAiB,EACjB,SAAS,EAMV,MAAM,OAAO,CAAA;AASd,MAAM,WAAW,WAAW,CAC1B,CAAC,SAAS;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAA;CAAE,GAAG;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,cAAc,EACd,iBAAiB,EACjB,SAAS,EAMV,MAAM,OAAO,CAAA;AASd,MAAM,WAAW,WAAW,CAC1B,CAAC,SAAS;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,GAAG;IAClF,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB,CACD,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAA;IAC3C,OAAO,CAAC,EAAE,CAAC,EAAE,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,cAAc,CAAC,EAAE,CAAC,GAAG,IAAI,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B;AAED,MAAM,WAAW,SAAS;IACxB,OAAO,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAA;CAC7B;AAuOD,eAAO,MAAM,MAAM,EAAwC,CACzD,CAAqE,SAA3D;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,GAAG,CAAA;CAAE,EAErE,KAAK,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAA;CAAE,KAC/E,KAAK,CAAC,YAAY,CAAA"}
|
|
@@ -97,6 +97,49 @@ const SelectFowardRef = (_a, ref) => {
|
|
|
97
97
|
}
|
|
98
98
|
return items;
|
|
99
99
|
}, [options, usingInput, disableSearch, computedValue]);
|
|
100
|
+
const dropdownRef = useRef(null);
|
|
101
|
+
const optionRefs = useRef([]);
|
|
102
|
+
const [highlightedIndex, setHighlightedIndex] = useState(null);
|
|
103
|
+
useEffect(() => {
|
|
104
|
+
if (!open) {
|
|
105
|
+
setHighlightedIndex(null);
|
|
106
|
+
return;
|
|
107
|
+
}
|
|
108
|
+
const handleKeyDown = (event) => {
|
|
109
|
+
if (!filteredOptions.length)
|
|
110
|
+
return;
|
|
111
|
+
if (event.key === 'ArrowDown') {
|
|
112
|
+
event.preventDefault();
|
|
113
|
+
setHighlightedIndex(prevIndex => {
|
|
114
|
+
const nextIndex = prevIndex === null || prevIndex === filteredOptions.length - 1 ? 0 : prevIndex + 1;
|
|
115
|
+
scrollIntoView(nextIndex);
|
|
116
|
+
return nextIndex;
|
|
117
|
+
});
|
|
118
|
+
}
|
|
119
|
+
if (event.key === 'ArrowUp') {
|
|
120
|
+
event.preventDefault();
|
|
121
|
+
setHighlightedIndex(prevIndex => {
|
|
122
|
+
const nextIndex = prevIndex === null || prevIndex === 0 ? filteredOptions.length - 1 : prevIndex - 1;
|
|
123
|
+
scrollIntoView(nextIndex);
|
|
124
|
+
return nextIndex;
|
|
125
|
+
});
|
|
126
|
+
}
|
|
127
|
+
if (event.key === 'Enter' && highlightedIndex !== null) {
|
|
128
|
+
event.preventDefault();
|
|
129
|
+
onOptionClick(filteredOptions[highlightedIndex]);
|
|
130
|
+
}
|
|
131
|
+
};
|
|
132
|
+
const scrollIntoView = (index) => {
|
|
133
|
+
const option = optionRefs.current[index];
|
|
134
|
+
if (option && dropdownRef.current) {
|
|
135
|
+
option.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
|
|
136
|
+
}
|
|
137
|
+
};
|
|
138
|
+
document.addEventListener('keydown', handleKeyDown);
|
|
139
|
+
return () => {
|
|
140
|
+
document.removeEventListener('keydown', handleKeyDown);
|
|
141
|
+
};
|
|
142
|
+
}, [open, filteredOptions, highlightedIndex]);
|
|
100
143
|
return (React.createElement(SelectWrapper, Object.assign({}, props, { ref: wrapperRef }),
|
|
101
144
|
React.createElement(Input, { disabled: disabled, leftIcon: leftIcon, rightIcon: React.createElement(React.Fragment, null,
|
|
102
145
|
rightIcon,
|
|
@@ -107,13 +150,19 @@ const SelectFowardRef = (_a, ref) => {
|
|
|
107
150
|
setOpen(true);
|
|
108
151
|
}
|
|
109
152
|
} }),
|
|
110
|
-
open && (React.createElement(DropdownWrapper,
|
|
153
|
+
open && (React.createElement(DropdownWrapper, { ref: dropdownRef },
|
|
111
154
|
React.createElement(Dropdown, { dropDownTop: props.dropDownTop, dropDownWidth: dropDownWidth, dropDownMaxHeight: props.dropDownMaxHeight },
|
|
112
|
-
((_b = options === null || options === void 0 ? void 0 : options.length) !== null && _b !== void 0 ? _b : 0) > 0 && (React.createElement("div", null, filteredOptions.map(
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
option.
|
|
116
|
-
|
|
155
|
+
((_b = options === null || options === void 0 ? void 0 : options.length) !== null && _b !== void 0 ? _b : 0) > 0 && (React.createElement("div", null, filteredOptions.map((option, index) => {
|
|
156
|
+
const isSelected = (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.id) === option.id;
|
|
157
|
+
const isHighlighted = highlightedIndex === index;
|
|
158
|
+
return (React.createElement(OptionButton, { selected: isSelected, key: option.id, onClick: () => onOptionClick(option), ref: el => (optionRefs.current[index] = el), style: {
|
|
159
|
+
backgroundColor: isHighlighted ? theme.colors.shade20 : 'transparent',
|
|
160
|
+
} }, (option === null || option === void 0 ? void 0 : option.badge) ? (React.createElement(OptionTextBadge, null,
|
|
161
|
+
React.createElement("div", null, option.text),
|
|
162
|
+
React.createElement(Paragraph, { strongBod: true, color: theme.colors.honey30 }, option.badge))) : (React.createElement(React.Fragment, null,
|
|
163
|
+
option.icon,
|
|
164
|
+
React.createElement(OptionText, null, option.text)))));
|
|
165
|
+
}))),
|
|
117
166
|
children)))));
|
|
118
167
|
};
|
|
119
168
|
export const Select = React.forwardRef(SelectFowardRef);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAIZ,SAAS,EACT,mBAAmB,EACnB,OAAO,EACP,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAExC,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -21,7 +21,7 @@ export interface SidebarGroupData {
|
|
|
21
21
|
name: string;
|
|
22
22
|
link?: string;
|
|
23
23
|
icon: string;
|
|
24
|
-
itemIds
|
|
24
|
+
itemIds?: string[];
|
|
25
25
|
}
|
|
26
26
|
export interface SidebarProps {
|
|
27
27
|
layout: (SidebarLayoutItemTypeItem | SidebarLayoutItemTypeGroup | SidebarLayoutItemTypeSpacer)[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,WAAW,yBAAyB;IACxC,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,0BAA0B;IACzC,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,OAAO,CAAA;CACd;AAED,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,QAAQ,CAAA;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,MAAM,EAAE,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,WAAW,yBAAyB;IACxC,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,0BAA0B;IACzC,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,OAAO,CAAA;CACd;AAED,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,QAAQ,CAAA;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;CACnB;AAED,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,CAAC,yBAAyB,GAAG,0BAA0B,GAAG,2BAA2B,CAAC,EAAE,CAAA;IAChG,aAAa,EAAE,MAAM,CAAA;IACrB,cAAc,EAAE,MAAM,CAAA;IACtB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAA;IACtC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAA;IACxC,OAAO,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,OAAO,wGAUjB,YAAY,sBAkFd,CAAA"}
|
|
@@ -25,12 +25,18 @@ export const Sidebar = ({ logoUrl, layout, currentItemId, currentGroupId, setLin
|
|
|
25
25
|
return (React.createElement(SidebarItem, { key: item.id, title: (_a = items[item.id]) === null || _a === void 0 ? void 0 : _a.menuTitle, icon: (_b = items[item.id]) === null || _b === void 0 ? void 0 : _b.icon, disabled: (_c = items[item.id]) === null || _c === void 0 ? void 0 : _c.disabled, onClick: () => sidebarItemClickHandler(item.id), sidebarOpen: sidebarOpen, isCurrentItem: currentItemId === item.id }));
|
|
26
26
|
if (item.type === 'group') {
|
|
27
27
|
const group = groups[item.id];
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
.
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
28
|
+
if (group.itemIds == null || group.itemIds.length === 0) {
|
|
29
|
+
const itemRouter = items[item.id];
|
|
30
|
+
return React.createElement(SidebarItem, { key: item.id, onClick: () => sidebarItemClickHandler(item.id), sidebarOpen: sidebarOpen, isCurrentItem: currentGroupId === item.id, disabled: itemRouter.disabled, title: itemRouter.menuTitle, icon: itemRouter.icon });
|
|
31
|
+
}
|
|
32
|
+
else {
|
|
33
|
+
return (React.createElement(SidebarGroup, { disabled: group.itemIds.every(id => { var _a; return (_a = items[id]) === null || _a === void 0 ? void 0 : _a.disabled; }), key: item.id, title: group.name, icon: group.icon, sidebarOpen: sidebarOpen, onClick: () => group.link && setLink(group.link), isCurrentGroup: currentGroupId === item.id }, group.itemIds
|
|
34
|
+
.filter(id => { var _a; return ((_a = items[id]) === null || _a === void 0 ? void 0 : _a.showInMenu) !== false; })
|
|
35
|
+
.map(id => {
|
|
36
|
+
var _a, _b;
|
|
37
|
+
return (React.createElement(SidebarItem, { key: id, title: (_a = items[id]) === null || _a === void 0 ? void 0 : _a.menuTitle, disabled: (_b = items[id]) === null || _b === void 0 ? void 0 : _b.disabled, onClick: () => sidebarItemClickHandler(id), isCurrentItem: currentItemId === id, sidebarOpen: sidebarOpen, isInsideGroup: true }));
|
|
38
|
+
})));
|
|
39
|
+
}
|
|
34
40
|
}
|
|
35
41
|
return null;
|
|
36
42
|
})))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Sidebar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,WAAW,MAAM,eAAe,CAAA;AACvC,OAAO,WAAW,MAAM,eAAe,CAAA;AAEvC,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,6BAA6B,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AA2CjH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACtB,OAAO,EACP,MAAM,EACN,aAAa,EACb,cAAc,EACd,OAAO,EACP,KAAK,EACL,WAAW,EACX,MAAM,EACN,SAAS,GACI,EAAE,EAAE;IACjB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;IACpD,MAAM,uBAAuB,GAAG,CAAC,MAAc,EAAE,EAAE;QACjD,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,CAAA;QAC1B,MAAM,IAAI,GAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,CAAA;QACvB,IAAI,IAAI;YAAE,OAAO,CAAC,IAAI,CAAC,CAAA;IACzB,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,gBAAgB,IAAC,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS;QAC9D,oBAAC,WAAW,IACV,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,GACpB;QACF,oBAAC,6BAA6B;YAC5B,oBAAC,sBAAsB,QACpB,MAAM;iBACJ,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,iBAAG,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,IAAK,IAAI,EAAG,CAAC;iBACnE,GAAG,CAAC,IAAI,CAAC,EAAE;;gBACV,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ;oBAAE,OAAO,oBAAC,aAAa,IAAC,GAAG,EAAE,IAAI,CAAC,EAAE,GAAI,CAAA;gBAClE,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM;oBACtB,OAAO,CACL,oBAAC,WAAW,IACV,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,KAAK,EAAE,MAAA,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,0CAAE,SAAS,EAChC,IAAI,EAAE,MAAA,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,0CAAE,IAAI,EAC1B,QAAQ,EAAE,MAAA,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,0CAAE,QAAQ,EAClC,OAAO,EAAE,GAAG,EAAE,CAAC,uBAAuB,CAAC,IAAI,CAAC,EAAE,CAAC,EAC/C,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,KAAK,IAAI,CAAC,EAAE,GACxC,CACH,CAAA;gBACH,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;oBAC1B,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;oBAC7B,OAAO,CACL,oBAAC,YAAY,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Sidebar/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -73,19 +73,19 @@ export const Playground = {
|
|
|
73
73
|
type: 'item',
|
|
74
74
|
id: 'DASHBOARD',
|
|
75
75
|
},
|
|
76
|
-
{ type: 'group', id: '
|
|
76
|
+
{ type: 'group', id: 'DASHBOARD' },
|
|
77
77
|
], items: {
|
|
78
78
|
DASHBOARD: {
|
|
79
79
|
menuTitle: 'Dashboard',
|
|
80
80
|
icon: dashboardSVG,
|
|
81
81
|
link: '/dashboard',
|
|
82
82
|
disabled: false,
|
|
83
|
-
}
|
|
84
|
-
}, currentItemId:
|
|
85
|
-
|
|
83
|
+
}
|
|
84
|
+
}, currentItemId: args.currentItemId, currentGroupId: args.currentGroupId, setLink: action('setLink'), groups: {
|
|
85
|
+
DASHBOARD: {
|
|
86
86
|
name: 'Group 1',
|
|
87
87
|
icon: dashboardSVG,
|
|
88
|
-
itemIds: [
|
|
88
|
+
itemIds: [],
|
|
89
89
|
},
|
|
90
90
|
}, logoUrl: '' })));
|
|
91
91
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/Sidebar/stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAA;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEhD,MAAM,IAAI,GAAyB;IACjC,KAAK,EAAE,oBAAoB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,SAAS,EAAE,OAAO;IAClB,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,yBAAyB;SACvC;QACD,aAAa,EAAE;YACb,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,iBAAiB;SAC/B;QACD,cAAc,EAAE;YACd,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,kBAAkB;SAChC;QACD,OAAO,EAAE;YACP,MAAM,EAAE,SAAS;YACjB,WAAW,EAAE,sBAAsB;SACpC;QACD,KAAK,EAAE;YACL,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,YAAY;SAC1B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,aAAa;SAC3B;QACD,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,UAAU;SACxB;KACF;IACD,IAAI,EAAE;QACJ,MAAM,EAAE;YACN;gBACE,IAAI,EAAE,MAAM;gBACZ,EAAE,EAAE,WAAW;aAChB;YACD,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE;SAChC;QACD,aAAa,EAAE,WAAW;QAC1B,cAAc,EAAE,WAAW;QAC3B,KAAK,EAAE;YACL,SAAS,EAAE;gBACT,SAAS,EAAE,WAAW;gBACtB,IAAI,EAAE,YAAY;gBAClB,IAAI,EAAE,YAAY;gBAClB,QAAQ,EAAE,IAAI;aACf;SACF;QACD,MAAM,EAAE;YACN,MAAM,EAAE;gBACN,IAAI,EAAE,SAAS;gBACf,IAAI,EAAE,YAAY;gBAClB,OAAO,EAAE,CAAC,WAAW,CAAC;aACvB;SACF;QACD,OAAO,EAAE,EAAE;QACX,SAAS,EAAE,EAAE;KACd;CAC6B,CAAA;AAEhC,eAAe,IAAI,CAAA;AAInB,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,MAAM,EAAE,IAAI,CAAC,EAAE;QACb,OAAO,CACL,oBAAC,OAAO,oBACF,IAAI,IACR,MAAM,EAAE;gBACN;oBACE,IAAI,EAAE,MAAM;oBACZ,EAAE,EAAE,WAAW;iBAChB;gBACD,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/Sidebar/stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAA;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEhD,MAAM,IAAI,GAAyB;IACjC,KAAK,EAAE,oBAAoB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,SAAS,EAAE,OAAO;IAClB,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,yBAAyB;SACvC;QACD,aAAa,EAAE;YACb,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,iBAAiB;SAC/B;QACD,cAAc,EAAE;YACd,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,kBAAkB;SAChC;QACD,OAAO,EAAE;YACP,MAAM,EAAE,SAAS;YACjB,WAAW,EAAE,sBAAsB;SACpC;QACD,KAAK,EAAE;YACL,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,YAAY;SAC1B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,aAAa;SAC3B;QACD,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,UAAU;SACxB;KACF;IACD,IAAI,EAAE;QACJ,MAAM,EAAE;YACN;gBACE,IAAI,EAAE,MAAM;gBACZ,EAAE,EAAE,WAAW;aAChB;YACD,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE;SAChC;QACD,aAAa,EAAE,WAAW;QAC1B,cAAc,EAAE,WAAW;QAC3B,KAAK,EAAE;YACL,SAAS,EAAE;gBACT,SAAS,EAAE,WAAW;gBACtB,IAAI,EAAE,YAAY;gBAClB,IAAI,EAAE,YAAY;gBAClB,QAAQ,EAAE,IAAI;aACf;SACF;QACD,MAAM,EAAE;YACN,MAAM,EAAE;gBACN,IAAI,EAAE,SAAS;gBACf,IAAI,EAAE,YAAY;gBAClB,OAAO,EAAE,CAAC,WAAW,CAAC;aACvB;SACF;QACD,OAAO,EAAE,EAAE;QACX,SAAS,EAAE,EAAE;KACd;CAC6B,CAAA;AAEhC,eAAe,IAAI,CAAA;AAInB,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,MAAM,EAAE,IAAI,CAAC,EAAE;QACb,OAAO,CACL,oBAAC,OAAO,oBACF,IAAI,IACR,MAAM,EAAE;gBACN;oBACE,IAAI,EAAE,MAAM;oBACZ,EAAE,EAAE,WAAW;iBAChB;gBACD,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE;aACnC,EACD,KAAK,EAAE;gBACL,SAAS,EAAE;oBACT,SAAS,EAAE,WAAW;oBACtB,IAAI,EAAE,YAAY;oBAClB,IAAI,EAAE,YAAY;oBAClB,QAAQ,EAAE,KAAK;iBAChB;aACF,EACD,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,OAAO,EAAE,MAAM,CAAC,SAAS,CAAC,EAC1B,MAAM,EAAE;gBACN,SAAS,EAAE;oBACT,IAAI,EAAE,SAAS;oBACf,IAAI,EAAE,YAAY;oBAClB,OAAO,EAAE,EAAE;iBACZ;aACF,EACD,OAAO,EAAE,EAAE,IACX,CACH,CAAA;IACH,CAAC;CACF,CAAA"}
|
package/package.json
CHANGED
|
@@ -17,7 +17,12 @@ import { theme } from '../Themes'
|
|
|
17
17
|
import { Dropdown, DropdownWrapper, OptionButton, OptionText, OptionTextBadge, SelectWrapper } from './styles'
|
|
18
18
|
|
|
19
19
|
export interface SelectProps<
|
|
20
|
-
T extends { text: string; id: number; icon?: ReactNode
|
|
20
|
+
T extends { text: string; id: number; icon?: ReactNode; badge?: string | number } = {
|
|
21
|
+
text: string
|
|
22
|
+
id: number
|
|
23
|
+
icon?: ReactNode
|
|
24
|
+
badge?: string | number
|
|
25
|
+
},
|
|
21
26
|
> extends HTMLAttributes<HTMLDivElement> {
|
|
22
27
|
disabled?: boolean
|
|
23
28
|
label?: string
|
|
@@ -38,7 +43,7 @@ export interface SelectRef {
|
|
|
38
43
|
setOpen(open: boolean): void
|
|
39
44
|
}
|
|
40
45
|
|
|
41
|
-
const SelectFowardRef = <T extends { text: string; id: number; icon?: ReactNode; badge?:
|
|
46
|
+
const SelectFowardRef = <T extends { text: string; id: number; icon?: ReactNode; badge?: any }>(
|
|
42
47
|
{
|
|
43
48
|
children,
|
|
44
49
|
label,
|
|
@@ -137,6 +142,58 @@ const SelectFowardRef = <T extends { text: string; id: number; icon?: ReactNode;
|
|
|
137
142
|
return items
|
|
138
143
|
}, [options, usingInput, disableSearch, computedValue])
|
|
139
144
|
|
|
145
|
+
const dropdownRef = useRef<HTMLDivElement>(null)
|
|
146
|
+
const optionRefs = useRef<(HTMLButtonElement | null)[]>([])
|
|
147
|
+
|
|
148
|
+
const [highlightedIndex, setHighlightedIndex] = useState<number | null>(null)
|
|
149
|
+
|
|
150
|
+
useEffect(() => {
|
|
151
|
+
if (!open) {
|
|
152
|
+
setHighlightedIndex(null)
|
|
153
|
+
return
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
const handleKeyDown = (event: KeyboardEvent) => {
|
|
157
|
+
if (!filteredOptions.length) return
|
|
158
|
+
|
|
159
|
+
if (event.key === 'ArrowDown') {
|
|
160
|
+
event.preventDefault()
|
|
161
|
+
setHighlightedIndex(prevIndex => {
|
|
162
|
+
const nextIndex = prevIndex === null || prevIndex === filteredOptions.length - 1 ? 0 : prevIndex + 1
|
|
163
|
+
scrollIntoView(nextIndex)
|
|
164
|
+
return nextIndex
|
|
165
|
+
})
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
if (event.key === 'ArrowUp') {
|
|
169
|
+
event.preventDefault()
|
|
170
|
+
setHighlightedIndex(prevIndex => {
|
|
171
|
+
const nextIndex = prevIndex === null || prevIndex === 0 ? filteredOptions.length - 1 : prevIndex - 1
|
|
172
|
+
scrollIntoView(nextIndex)
|
|
173
|
+
return nextIndex
|
|
174
|
+
})
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
if (event.key === 'Enter' && highlightedIndex !== null) {
|
|
178
|
+
event.preventDefault()
|
|
179
|
+
onOptionClick(filteredOptions[highlightedIndex])
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
const scrollIntoView = (index: number) => {
|
|
184
|
+
const option = optionRefs.current[index]
|
|
185
|
+
if (option && dropdownRef.current) {
|
|
186
|
+
option.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
document.addEventListener('keydown', handleKeyDown)
|
|
191
|
+
|
|
192
|
+
return () => {
|
|
193
|
+
document.removeEventListener('keydown', handleKeyDown)
|
|
194
|
+
}
|
|
195
|
+
}, [open, filteredOptions, highlightedIndex])
|
|
196
|
+
|
|
140
197
|
return (
|
|
141
198
|
<SelectWrapper {...props} ref={wrapperRef}>
|
|
142
199
|
<Input
|
|
@@ -167,7 +224,7 @@ const SelectFowardRef = <T extends { text: string; id: number; icon?: ReactNode;
|
|
|
167
224
|
}}
|
|
168
225
|
/>
|
|
169
226
|
{open && (
|
|
170
|
-
<DropdownWrapper>
|
|
227
|
+
<DropdownWrapper ref={dropdownRef}>
|
|
171
228
|
<Dropdown
|
|
172
229
|
dropDownTop={props.dropDownTop}
|
|
173
230
|
dropDownWidth={dropDownWidth}
|
|
@@ -175,27 +232,36 @@ const SelectFowardRef = <T extends { text: string; id: number; icon?: ReactNode;
|
|
|
175
232
|
>
|
|
176
233
|
{(options?.length ?? 0) > 0 && (
|
|
177
234
|
<div>
|
|
178
|
-
{filteredOptions.map(option =>
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
235
|
+
{filteredOptions.map((option, index) => {
|
|
236
|
+
const isSelected = selectedOption?.id === option.id
|
|
237
|
+
const isHighlighted = highlightedIndex === index
|
|
238
|
+
|
|
239
|
+
return (
|
|
240
|
+
<OptionButton
|
|
241
|
+
selected={isSelected}
|
|
242
|
+
key={option.id}
|
|
243
|
+
onClick={() => onOptionClick(option)}
|
|
244
|
+
ref={el => (optionRefs.current[index] = el)}
|
|
245
|
+
style={{
|
|
246
|
+
backgroundColor: isHighlighted ? theme.colors.shade20 : 'transparent',
|
|
247
|
+
}}
|
|
248
|
+
>
|
|
249
|
+
{option?.badge ? (
|
|
250
|
+
<OptionTextBadge>
|
|
251
|
+
<div>{option.text}</div>
|
|
252
|
+
<Paragraph strongBod color={theme.colors.honey30}>
|
|
253
|
+
{option.badge}
|
|
254
|
+
</Paragraph>
|
|
255
|
+
</OptionTextBadge>
|
|
256
|
+
) : (
|
|
257
|
+
<>
|
|
258
|
+
{option.icon}
|
|
259
|
+
<OptionText>{option.text}</OptionText>
|
|
260
|
+
</>
|
|
261
|
+
)}
|
|
262
|
+
</OptionButton>
|
|
263
|
+
)
|
|
264
|
+
})}
|
|
199
265
|
</div>
|
|
200
266
|
)}
|
|
201
267
|
{children}
|
|
@@ -206,6 +272,8 @@ const SelectFowardRef = <T extends { text: string; id: number; icon?: ReactNode;
|
|
|
206
272
|
)
|
|
207
273
|
}
|
|
208
274
|
|
|
209
|
-
export const Select = React.forwardRef(SelectFowardRef) as <
|
|
275
|
+
export const Select = React.forwardRef(SelectFowardRef) as <
|
|
276
|
+
T extends { text: string; id: number; icon?: ReactNode; badge?: any },
|
|
277
|
+
>(
|
|
210
278
|
props: PropsWithChildren<SelectProps<T>> & { ref?: React.ForwardedRef<SelectRef> },
|
|
211
279
|
) => React.ReactElement
|
|
@@ -32,7 +32,7 @@ export interface SidebarGroupData {
|
|
|
32
32
|
name: string
|
|
33
33
|
link?: string
|
|
34
34
|
icon: string
|
|
35
|
-
itemIds
|
|
35
|
+
itemIds?: string[]
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
export interface SidebarProps {
|
|
@@ -94,8 +94,20 @@ export const Sidebar = ({
|
|
|
94
94
|
)
|
|
95
95
|
if (item.type === 'group') {
|
|
96
96
|
const group = groups[item.id]
|
|
97
|
-
|
|
98
|
-
|
|
97
|
+
if (group.itemIds == null || group.itemIds.length === 0) {
|
|
98
|
+
const itemRouter = items[item.id]
|
|
99
|
+
return <SidebarItem
|
|
100
|
+
key={item.id}
|
|
101
|
+
onClick={() => sidebarItemClickHandler(item.id)}
|
|
102
|
+
sidebarOpen={sidebarOpen}
|
|
103
|
+
isCurrentItem={currentGroupId === item.id}
|
|
104
|
+
disabled={itemRouter.disabled}
|
|
105
|
+
title={itemRouter.menuTitle}
|
|
106
|
+
icon={itemRouter.icon}
|
|
107
|
+
/>
|
|
108
|
+
} else {
|
|
109
|
+
return (
|
|
110
|
+
<SidebarGroup
|
|
99
111
|
disabled={group.itemIds.every(id => items[id]?.disabled)}
|
|
100
112
|
key={item.id}
|
|
101
113
|
title={group.name}
|
|
@@ -115,11 +127,12 @@ export const Sidebar = ({
|
|
|
115
127
|
isCurrentItem={currentItemId === id}
|
|
116
128
|
sidebarOpen={sidebarOpen}
|
|
117
129
|
isInsideGroup
|
|
118
|
-
|
|
119
|
-
|
|
130
|
+
/>
|
|
131
|
+
))}
|
|
120
132
|
</SidebarGroup>
|
|
121
133
|
)
|
|
122
134
|
}
|
|
135
|
+
}
|
|
123
136
|
return null
|
|
124
137
|
})}
|
|
125
138
|
</SidebarScrollContainer>
|
|
@@ -82,7 +82,7 @@ export const Playground: Story = {
|
|
|
82
82
|
type: 'item',
|
|
83
83
|
id: 'DASHBOARD',
|
|
84
84
|
},
|
|
85
|
-
{ type: 'group', id: '
|
|
85
|
+
{ type: 'group', id: 'DASHBOARD' },
|
|
86
86
|
]}
|
|
87
87
|
items={{
|
|
88
88
|
DASHBOARD: {
|
|
@@ -90,16 +90,16 @@ export const Playground: Story = {
|
|
|
90
90
|
icon: dashboardSVG,
|
|
91
91
|
link: '/dashboard',
|
|
92
92
|
disabled: false,
|
|
93
|
-
}
|
|
93
|
+
}
|
|
94
94
|
}}
|
|
95
|
-
currentItemId={
|
|
96
|
-
currentGroupId={
|
|
95
|
+
currentItemId={args.currentItemId}
|
|
96
|
+
currentGroupId={args.currentGroupId}
|
|
97
97
|
setLink={action('setLink')}
|
|
98
98
|
groups={{
|
|
99
|
-
|
|
99
|
+
DASHBOARD: {
|
|
100
100
|
name: 'Group 1',
|
|
101
101
|
icon: dashboardSVG,
|
|
102
|
-
itemIds: [
|
|
102
|
+
itemIds: [],
|
|
103
103
|
},
|
|
104
104
|
}}
|
|
105
105
|
logoUrl={''}
|