@toptal/picasso-page 5.2.0 → 5.2.1
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-package/src/SidebarItemContent/SidebarItemContent.d.ts.map +1 -1
- package/dist-package/src/SidebarItemContent/SidebarItemContent.js +8 -16
- package/dist-package/src/SidebarItemContent/SidebarItemContent.js.map +1 -1
- package/dist-package/src/SidebarItemContent/styles.d.ts +7 -2
- package/dist-package/src/SidebarItemContent/styles.d.ts.map +1 -1
- package/dist-package/src/SidebarItemContent/styles.js +7 -28
- package/dist-package/src/SidebarItemContent/styles.js.map +1 -1
- package/package.json +1 -1
- package/src/SidebarItem/__snapshots__/test.tsx.snap +22 -22
- package/src/SidebarItemContent/SidebarItemContent.tsx +11 -21
- package/src/SidebarItemContent/styles.ts +7 -30
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidebarItemContent.d.ts","sourceRoot":"","sources":["../../../src/SidebarItemContent/SidebarItemContent.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"SidebarItemContent.d.ts","sourceRoot":"","sources":["../../../src/SidebarItemContent/SidebarItemContent.tsx"],"names":[],"mappings":";AAWA,OAAO,KAAK,EAAE,KAAK,EAAqB,MAAM,SAAS,CAAA;AAuHvD,QAAA,MAAM,kBAAkB,UAAW,KAAK,gBA+BvC,CAAA;AAED,eAAe,kBAAkB,CAAA"}
|
|
@@ -11,19 +11,15 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
11
11
|
};
|
|
12
12
|
import React from 'react';
|
|
13
13
|
import { useTitleCase } from '@toptal/picasso-shared';
|
|
14
|
-
import cx from 'classnames';
|
|
15
|
-
import { makeStyles } from '@material-ui/core';
|
|
16
14
|
import { Typography } from '@toptal/picasso-typography';
|
|
17
15
|
import { Tooltip } from '@toptal/picasso-tooltip';
|
|
18
16
|
import { Container } from '@toptal/picasso-container';
|
|
19
17
|
import { Badge } from '@toptal/picasso-badge';
|
|
20
18
|
import { TagRectangular, Indicator } from '@toptal/picasso-tag';
|
|
21
19
|
import { getReactNodeTextContent } from '@toptal/picasso-utils';
|
|
22
|
-
import
|
|
20
|
+
import { twJoin } from '@toptal/picasso-tailwind-merge';
|
|
23
21
|
import useIndicatorOnParentItem from './use-indicator-on-parent-item';
|
|
24
|
-
|
|
25
|
-
name: 'PicassoSidebarItemContent',
|
|
26
|
-
});
|
|
22
|
+
import { styles } from './styles';
|
|
27
23
|
const resolveChildrenText = (text, titleCase) => typeof text === 'string' ? (React.createElement(Typography, { color: 'inherit', size: 'medium', titleCase: titleCase, noWrap: true }, text)) : (text);
|
|
28
24
|
const ItemContentBadge = (props) => {
|
|
29
25
|
const { children, variant = 'red' } = props, rest = __rest(props, ["children", "variant"]);
|
|
@@ -32,32 +28,28 @@ const ItemContentBadge = (props) => {
|
|
|
32
28
|
};
|
|
33
29
|
const CompactItemContent = (props) => {
|
|
34
30
|
const { icon, children, badge, isIndicatorVisible, menu } = props;
|
|
35
|
-
const classes = useStyles();
|
|
36
31
|
const hasBadge = badge != null;
|
|
37
32
|
const hasSubItems = menu != null;
|
|
38
33
|
const wrappedIcon = icon && hasBadge && !hasSubItems ? (React.createElement(ItemContentBadge, { content: badge.content, variant: badge.variant }, icon)) : (icon);
|
|
39
|
-
return (React.createElement(Container, { className:
|
|
34
|
+
return (React.createElement(Container, { className: styles.noWrap, inline: true, flex: true, alignItems: 'center', padded: 'small' },
|
|
40
35
|
React.createElement(Tooltip, { compact: true, placement: 'right', content: getReactNodeTextContent(children) },
|
|
41
|
-
React.createElement("div", { className:
|
|
36
|
+
React.createElement("div", { className: styles.iconWrapper },
|
|
42
37
|
wrappedIcon,
|
|
43
|
-
hasSubItems && isIndicatorVisible && (React.createElement(
|
|
38
|
+
hasSubItems && isIndicatorVisible && (React.createElement("div", { className: styles.compactIndicator },
|
|
44
39
|
React.createElement(Indicator, { color: 'red' })))))));
|
|
45
40
|
};
|
|
46
41
|
const ExpandedItemContent = (props) => {
|
|
47
42
|
const { icon, badge, children, testIds, tag, isIndicatorVisible, menu, isSubMenu, } = props;
|
|
48
|
-
const classes = useStyles();
|
|
49
43
|
const hasIcon = icon != null && !isSubMenu;
|
|
50
44
|
const hasBadge = badge != null;
|
|
51
45
|
const hasTag = tag != null;
|
|
52
46
|
const hasSubItems = menu != null;
|
|
53
|
-
return (React.createElement(Container, { className:
|
|
47
|
+
return (React.createElement(Container, { className: styles.noWrap, inline: true, flex: true, alignItems: 'center', gap: 'xsmall' },
|
|
54
48
|
!isSubMenu && icon,
|
|
55
|
-
React.createElement(Container, { className:
|
|
56
|
-
[classes.withIcon]: hasIcon,
|
|
57
|
-
}), flex: true, alignItems: 'center', "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.content }, children),
|
|
49
|
+
React.createElement(Container, { className: twJoin(styles.noWrap, hasIcon && styles.withIcon), flex: true, alignItems: 'center', "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.content }, children),
|
|
58
50
|
hasTag && !hasSubItems && (React.createElement(TagRectangular, { variant: tag.variant || 'red' }, tag.content)),
|
|
59
51
|
hasBadge && !hasSubItems && React.createElement(ItemContentBadge, Object.assign({}, badge)),
|
|
60
|
-
isIndicatorVisible && hasSubItems && (React.createElement(
|
|
52
|
+
isIndicatorVisible && hasSubItems && (React.createElement("div", { className: styles.expandedIndicator },
|
|
61
53
|
React.createElement(Indicator, { color: 'red' })))));
|
|
62
54
|
};
|
|
63
55
|
const SidebarItemContent = (props) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidebarItemContent.js","sourceRoot":"","sources":["../../../src/SidebarItemContent/SidebarItemContent.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACrD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"SidebarItemContent.js","sourceRoot":"","sources":["../../../src/SidebarItemContent/SidebarItemContent.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,3 +1,8 @@
|
|
|
1
|
-
declare const
|
|
2
|
-
|
|
1
|
+
export declare const styles: {
|
|
2
|
+
readonly noWrap: "flex-1 min-w-0";
|
|
3
|
+
readonly withIcon: "ml-[.375rem]";
|
|
4
|
+
readonly iconWrapper: "w-[1em] h-[1em] relative";
|
|
5
|
+
readonly compactIndicator: "absolute top-0 right-0 translate-x-1/2 -translate-y-1/2";
|
|
6
|
+
readonly expandedIndicator: "mr-[.375rem]";
|
|
7
|
+
};
|
|
3
8
|
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/SidebarItemContent/styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/SidebarItemContent/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;CAMT,CAAA"}
|
|
@@ -1,29 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
withIcon: {
|
|
9
|
-
marginLeft: rem('6px'),
|
|
10
|
-
},
|
|
11
|
-
hiddenContent: {
|
|
12
|
-
visibility: 'hidden',
|
|
13
|
-
},
|
|
14
|
-
iconWrapper: {
|
|
15
|
-
width: '1em',
|
|
16
|
-
height: '1em',
|
|
17
|
-
position: 'relative',
|
|
18
|
-
},
|
|
19
|
-
compactIndicator: {
|
|
20
|
-
position: 'absolute',
|
|
21
|
-
top: 0,
|
|
22
|
-
right: 0,
|
|
23
|
-
transform: 'translate(50%, -50%)',
|
|
24
|
-
},
|
|
25
|
-
expandedIndicator: {
|
|
26
|
-
marginRight: rem('6px'),
|
|
27
|
-
},
|
|
28
|
-
});
|
|
1
|
+
export const styles = {
|
|
2
|
+
noWrap: 'flex-1 min-w-0',
|
|
3
|
+
withIcon: 'ml-[.375rem]',
|
|
4
|
+
iconWrapper: 'w-[1em] h-[1em] relative',
|
|
5
|
+
compactIndicator: 'absolute top-0 right-0 translate-x-1/2 -translate-y-1/2',
|
|
6
|
+
expandedIndicator: 'mr-[.375rem]',
|
|
7
|
+
};
|
|
29
8
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/SidebarItemContent/styles.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/SidebarItemContent/styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,MAAM,EAAE,gBAAgB;IACxB,QAAQ,EAAE,cAAc;IACxB,WAAW,EAAE,0BAA0B;IACvC,gBAAgB,EAAE,yDAAyD;IAC3E,iBAAiB,EAAE,cAAc;CACzB,CAAA"}
|
package/package.json
CHANGED
|
@@ -51,10 +51,10 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
|
|
|
51
51
|
class="flex items-center"
|
|
52
52
|
>
|
|
53
53
|
<div
|
|
54
|
-
class="gap-2 items-center inline-flex
|
|
54
|
+
class="gap-2 items-center inline-flex flex-1 min-w"
|
|
55
55
|
>
|
|
56
56
|
<div
|
|
57
|
-
class="items-center flex
|
|
57
|
+
class="items-center flex flex-1 min-w"
|
|
58
58
|
>
|
|
59
59
|
<p
|
|
60
60
|
class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
|
|
@@ -115,10 +115,10 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
|
|
|
115
115
|
class="flex items-center"
|
|
116
116
|
>
|
|
117
117
|
<div
|
|
118
|
-
class="gap-2 items-center inline-flex
|
|
118
|
+
class="gap-2 items-center inline-flex flex-1 min-w"
|
|
119
119
|
>
|
|
120
120
|
<div
|
|
121
|
-
class="items-center flex
|
|
121
|
+
class="items-center flex flex-1 min-w"
|
|
122
122
|
>
|
|
123
123
|
<p
|
|
124
124
|
class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
|
|
@@ -197,10 +197,10 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
|
|
|
197
197
|
class="flex items-center"
|
|
198
198
|
>
|
|
199
199
|
<div
|
|
200
|
-
class="gap-2 items-center inline-flex
|
|
200
|
+
class="gap-2 items-center inline-flex flex-1 min-w"
|
|
201
201
|
>
|
|
202
202
|
<div
|
|
203
|
-
class="items-center flex
|
|
203
|
+
class="items-center flex flex-1 min-w"
|
|
204
204
|
>
|
|
205
205
|
<p
|
|
206
206
|
class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
|
|
@@ -261,10 +261,10 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
|
|
|
261
261
|
class="flex items-center"
|
|
262
262
|
>
|
|
263
263
|
<div
|
|
264
|
-
class="gap-2 items-center inline-flex
|
|
264
|
+
class="gap-2 items-center inline-flex flex-1 min-w"
|
|
265
265
|
>
|
|
266
266
|
<div
|
|
267
|
-
class="items-center flex
|
|
267
|
+
class="items-center flex flex-1 min-w"
|
|
268
268
|
>
|
|
269
269
|
<p
|
|
270
270
|
class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
|
|
@@ -313,7 +313,7 @@ exports[`SidebarItem don't use accordion for non-collapsible with menu 1`] = `
|
|
|
313
313
|
class="flex items-center"
|
|
314
314
|
>
|
|
315
315
|
<div
|
|
316
|
-
class="gap-2 items-center inline-flex
|
|
316
|
+
class="gap-2 items-center inline-flex flex-1 min-w"
|
|
317
317
|
>
|
|
318
318
|
<svg
|
|
319
319
|
class="PicassoSvgCandidates16-root"
|
|
@@ -325,7 +325,7 @@ exports[`SidebarItem don't use accordion for non-collapsible with menu 1`] = `
|
|
|
325
325
|
/>
|
|
326
326
|
</svg>
|
|
327
327
|
<div
|
|
328
|
-
class="items-center flex
|
|
328
|
+
class="items-center flex flex-1 min-w ml-[.375rem]"
|
|
329
329
|
>
|
|
330
330
|
<p
|
|
331
331
|
class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
|
|
@@ -360,10 +360,10 @@ exports[`SidebarItem don't use accordion for non-collapsible with menu 1`] = `
|
|
|
360
360
|
class="flex items-center"
|
|
361
361
|
>
|
|
362
362
|
<div
|
|
363
|
-
class="gap-2 items-center inline-flex
|
|
363
|
+
class="gap-2 items-center inline-flex flex-1 min-w"
|
|
364
364
|
>
|
|
365
365
|
<div
|
|
366
|
-
class="items-center flex
|
|
366
|
+
class="items-center flex flex-1 min-w"
|
|
367
367
|
>
|
|
368
368
|
<p
|
|
369
369
|
class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
|
|
@@ -403,7 +403,7 @@ exports[`SidebarItem is selected 1`] = `
|
|
|
403
403
|
class="flex items-center"
|
|
404
404
|
>
|
|
405
405
|
<div
|
|
406
|
-
class="gap-2 items-center inline-flex
|
|
406
|
+
class="gap-2 items-center inline-flex flex-1 min-w"
|
|
407
407
|
>
|
|
408
408
|
<svg
|
|
409
409
|
class="PicassoSvgCandidates16-root"
|
|
@@ -415,7 +415,7 @@ exports[`SidebarItem is selected 1`] = `
|
|
|
415
415
|
/>
|
|
416
416
|
</svg>
|
|
417
417
|
<div
|
|
418
|
-
class="items-center flex
|
|
418
|
+
class="items-center flex flex-1 min-w ml-[.375rem]"
|
|
419
419
|
>
|
|
420
420
|
<p
|
|
421
421
|
class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
|
|
@@ -453,10 +453,10 @@ exports[`SidebarItem renders 1`] = `
|
|
|
453
453
|
class="flex items-center"
|
|
454
454
|
>
|
|
455
455
|
<div
|
|
456
|
-
class="gap-2 items-center inline-flex
|
|
456
|
+
class="gap-2 items-center inline-flex flex-1 min-w"
|
|
457
457
|
>
|
|
458
458
|
<div
|
|
459
|
-
class="items-center flex
|
|
459
|
+
class="items-center flex flex-1 min-w"
|
|
460
460
|
>
|
|
461
461
|
<p
|
|
462
462
|
class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
|
|
@@ -507,7 +507,7 @@ exports[`SidebarItem use accordion for collapsible with menu 1`] = `
|
|
|
507
507
|
class="flex items-center"
|
|
508
508
|
>
|
|
509
509
|
<div
|
|
510
|
-
class="gap-2 items-center inline-flex
|
|
510
|
+
class="gap-2 items-center inline-flex flex-1 min-w"
|
|
511
511
|
>
|
|
512
512
|
<svg
|
|
513
513
|
class="PicassoSvgCandidates16-root"
|
|
@@ -519,7 +519,7 @@ exports[`SidebarItem use accordion for collapsible with menu 1`] = `
|
|
|
519
519
|
/>
|
|
520
520
|
</svg>
|
|
521
521
|
<div
|
|
522
|
-
class="items-center flex
|
|
522
|
+
class="items-center flex flex-1 min-w ml-[.375rem]"
|
|
523
523
|
>
|
|
524
524
|
<p
|
|
525
525
|
class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
|
|
@@ -580,10 +580,10 @@ exports[`SidebarItem use accordion for collapsible with menu 1`] = `
|
|
|
580
580
|
class="flex items-center"
|
|
581
581
|
>
|
|
582
582
|
<div
|
|
583
|
-
class="gap-2 items-center inline-flex
|
|
583
|
+
class="gap-2 items-center inline-flex flex-1 min-w"
|
|
584
584
|
>
|
|
585
585
|
<div
|
|
586
|
-
class="items-center flex
|
|
586
|
+
class="items-center flex flex-1 min-w"
|
|
587
587
|
>
|
|
588
588
|
<p
|
|
589
589
|
class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
|
|
@@ -628,7 +628,7 @@ exports[`SidebarItem with icon 1`] = `
|
|
|
628
628
|
class="flex items-center"
|
|
629
629
|
>
|
|
630
630
|
<div
|
|
631
|
-
class="gap-2 items-center inline-flex
|
|
631
|
+
class="gap-2 items-center inline-flex flex-1 min-w"
|
|
632
632
|
>
|
|
633
633
|
<svg
|
|
634
634
|
class="PicassoSvgCandidates16-root"
|
|
@@ -640,7 +640,7 @@ exports[`SidebarItem with icon 1`] = `
|
|
|
640
640
|
/>
|
|
641
641
|
</svg>
|
|
642
642
|
<div
|
|
643
|
-
class="items-center flex
|
|
643
|
+
class="items-center flex flex-1 min-w ml-[.375rem]"
|
|
644
644
|
>
|
|
645
645
|
<p
|
|
646
646
|
class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
|
|
@@ -1,23 +1,17 @@
|
|
|
1
1
|
import type { ReactNode } from 'react'
|
|
2
2
|
import React from 'react'
|
|
3
3
|
import { useTitleCase } from '@toptal/picasso-shared'
|
|
4
|
-
import cx from 'classnames'
|
|
5
|
-
import type { Theme } from '@material-ui/core'
|
|
6
|
-
import { makeStyles } from '@material-ui/core'
|
|
7
4
|
import { Typography } from '@toptal/picasso-typography'
|
|
8
5
|
import { Tooltip } from '@toptal/picasso-tooltip'
|
|
9
6
|
import { Container } from '@toptal/picasso-container'
|
|
10
7
|
import { Badge } from '@toptal/picasso-badge'
|
|
11
|
-
import { TagRectangular
|
|
8
|
+
import { TagRectangular, Indicator } from '@toptal/picasso-tag'
|
|
12
9
|
import { getReactNodeTextContent } from '@toptal/picasso-utils'
|
|
10
|
+
import { twJoin } from '@toptal/picasso-tailwind-merge'
|
|
13
11
|
|
|
14
|
-
import styles from './styles'
|
|
15
12
|
import type { Props, SidebarBadgeProps } from './types'
|
|
16
13
|
import useIndicatorOnParentItem from './use-indicator-on-parent-item'
|
|
17
|
-
|
|
18
|
-
const useStyles = makeStyles<Theme>(styles, {
|
|
19
|
-
name: 'PicassoSidebarItemContent',
|
|
20
|
-
})
|
|
14
|
+
import { styles } from './styles'
|
|
21
15
|
|
|
22
16
|
const resolveChildrenText = (text: ReactNode, titleCase: boolean) =>
|
|
23
17
|
typeof text === 'string' ? (
|
|
@@ -43,7 +37,6 @@ const ItemContentBadge = (
|
|
|
43
37
|
|
|
44
38
|
const CompactItemContent = (props: Props & { isIndicatorVisible: boolean }) => {
|
|
45
39
|
const { icon, children, badge, isIndicatorVisible, menu } = props
|
|
46
|
-
const classes = useStyles()
|
|
47
40
|
|
|
48
41
|
const hasBadge = badge != null
|
|
49
42
|
const hasSubItems = menu != null
|
|
@@ -59,7 +52,7 @@ const CompactItemContent = (props: Props & { isIndicatorVisible: boolean }) => {
|
|
|
59
52
|
|
|
60
53
|
return (
|
|
61
54
|
<Container
|
|
62
|
-
className={
|
|
55
|
+
className={styles.noWrap}
|
|
63
56
|
inline
|
|
64
57
|
flex
|
|
65
58
|
alignItems='center'
|
|
@@ -70,12 +63,12 @@ const CompactItemContent = (props: Props & { isIndicatorVisible: boolean }) => {
|
|
|
70
63
|
placement='right'
|
|
71
64
|
content={getReactNodeTextContent(children)}
|
|
72
65
|
>
|
|
73
|
-
<div className={
|
|
66
|
+
<div className={styles.iconWrapper}>
|
|
74
67
|
{wrappedIcon}
|
|
75
68
|
{hasSubItems && isIndicatorVisible && (
|
|
76
|
-
<
|
|
69
|
+
<div className={styles.compactIndicator}>
|
|
77
70
|
<Indicator color='red' />
|
|
78
|
-
</
|
|
71
|
+
</div>
|
|
79
72
|
)}
|
|
80
73
|
</div>
|
|
81
74
|
</Tooltip>
|
|
@@ -96,7 +89,6 @@ const ExpandedItemContent = (
|
|
|
96
89
|
menu,
|
|
97
90
|
isSubMenu,
|
|
98
91
|
} = props
|
|
99
|
-
const classes = useStyles()
|
|
100
92
|
|
|
101
93
|
const hasIcon = icon != null && !isSubMenu
|
|
102
94
|
const hasBadge = badge != null
|
|
@@ -105,7 +97,7 @@ const ExpandedItemContent = (
|
|
|
105
97
|
|
|
106
98
|
return (
|
|
107
99
|
<Container
|
|
108
|
-
className={
|
|
100
|
+
className={styles.noWrap}
|
|
109
101
|
inline
|
|
110
102
|
flex
|
|
111
103
|
alignItems='center'
|
|
@@ -114,9 +106,7 @@ const ExpandedItemContent = (
|
|
|
114
106
|
{!isSubMenu && icon}
|
|
115
107
|
|
|
116
108
|
<Container
|
|
117
|
-
className={
|
|
118
|
-
[classes.withIcon]: hasIcon,
|
|
119
|
-
})}
|
|
109
|
+
className={twJoin(styles.noWrap, hasIcon && styles.withIcon)}
|
|
120
110
|
flex
|
|
121
111
|
alignItems='center'
|
|
122
112
|
data-testid={testIds?.content}
|
|
@@ -130,9 +120,9 @@ const ExpandedItemContent = (
|
|
|
130
120
|
)}
|
|
131
121
|
{hasBadge && !hasSubItems && <ItemContentBadge {...badge} />}
|
|
132
122
|
{isIndicatorVisible && hasSubItems && (
|
|
133
|
-
<
|
|
123
|
+
<div className={styles.expandedIndicator}>
|
|
134
124
|
<Indicator color='red' />
|
|
135
|
-
</
|
|
125
|
+
</div>
|
|
136
126
|
)}
|
|
137
127
|
</Container>
|
|
138
128
|
)
|
|
@@ -1,30 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
minWidth: 0,
|
|
9
|
-
},
|
|
10
|
-
withIcon: {
|
|
11
|
-
marginLeft: rem('6px'),
|
|
12
|
-
},
|
|
13
|
-
hiddenContent: {
|
|
14
|
-
visibility: 'hidden',
|
|
15
|
-
},
|
|
16
|
-
iconWrapper: {
|
|
17
|
-
width: '1em',
|
|
18
|
-
height: '1em',
|
|
19
|
-
position: 'relative',
|
|
20
|
-
},
|
|
21
|
-
compactIndicator: {
|
|
22
|
-
position: 'absolute',
|
|
23
|
-
top: 0,
|
|
24
|
-
right: 0,
|
|
25
|
-
transform: 'translate(50%, -50%)',
|
|
26
|
-
},
|
|
27
|
-
expandedIndicator: {
|
|
28
|
-
marginRight: rem('6px'),
|
|
29
|
-
},
|
|
30
|
-
})
|
|
1
|
+
export const styles = {
|
|
2
|
+
noWrap: 'flex-1 min-w-0',
|
|
3
|
+
withIcon: 'ml-[.375rem]',
|
|
4
|
+
iconWrapper: 'w-[1em] h-[1em] relative',
|
|
5
|
+
compactIndicator: 'absolute top-0 right-0 translate-x-1/2 -translate-y-1/2',
|
|
6
|
+
expandedIndicator: 'mr-[.375rem]',
|
|
7
|
+
} as const
|