@xfers/design-system 8.0.0-dev.1a0ffe113e → 8.0.0-dev.563b228943
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/cjs/index.js +187 -181
- package/cjs/index.js.map +1 -1
- package/dist/components/Sidebar/CompanyProfile.js +45 -7
- package/dist/components/Sidebar/CompanyProfile.js.map +1 -1
- package/dist/components/Sidebar/Sidebar.js +1 -1
- package/dist/components/Sidebar/SidebarNavItem.js +15 -2
- package/dist/components/Sidebar/SidebarNavItem.js.map +1 -1
- package/dist/components/Sidebar/dropdownStyles.js +10 -5
- package/dist/components/Sidebar/dropdownStyles.js.map +1 -1
- package/dist/components/Sidebar/styles.js +11 -5
- package/dist/components/Sidebar/styles.js.map +1 -1
- package/dist/types/components/Sidebar/SidebarNavItem.d.ts +7 -1
- package/dist/types/components/Sidebar/dropdownStyles.d.ts +1 -0
- package/es/index.js +386 -380
- package/es/index.js.map +1 -1
- package/package.json +1 -2
|
@@ -37,25 +37,59 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
37
37
|
};
|
|
38
38
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
39
39
|
const react_1 = __importStar(require("react"));
|
|
40
|
+
const react_dom_1 = require("react-dom");
|
|
40
41
|
const styles_1 = require("./styles");
|
|
42
|
+
const dropdownStyles_1 = require("./dropdownStyles");
|
|
41
43
|
const MaterialSymbols_1 = __importDefault(require("../../icons/MaterialSymbols/MaterialSymbols"));
|
|
42
44
|
const colors_1 = require("../../constants/Colors/colors");
|
|
43
45
|
const CompanyProfileDropdown_1 = __importDefault(require("./CompanyProfileDropdown"));
|
|
44
46
|
const CompanyProfile = ({ companyName = 'ABC Pte. Ltd', subtitle = 'Company', enableDropdown = true, switchOnly = false, companies, menuItems, onMenuItemClick, onClick, }) => {
|
|
45
47
|
const [isOpen, setIsOpen] = (0, react_1.useState)(false);
|
|
48
|
+
const [flyoutPos, setFlyoutPos] = (0, react_1.useState)(null);
|
|
46
49
|
const containerRef = (0, react_1.useRef)(null);
|
|
50
|
+
const triggerRef = (0, react_1.useRef)(null);
|
|
51
|
+
const flyoutRef = (0, react_1.useRef)(null);
|
|
47
52
|
const resolvedCompanies = companies !== null && companies !== void 0 ? companies : [
|
|
48
53
|
{ name: companyName, subtitle: 'Business Account', active: true },
|
|
49
54
|
];
|
|
50
|
-
//
|
|
55
|
+
// Position the flyout to the right of the sidebar. The dropdown is portaled
|
|
56
|
+
// to <body> so it escapes the sidebar's overflow clipping; we track the
|
|
57
|
+
// trigger's on-screen position to anchor it.
|
|
58
|
+
(0, react_1.useLayoutEffect)(() => {
|
|
59
|
+
if (!isOpen)
|
|
60
|
+
return undefined;
|
|
61
|
+
const el = triggerRef.current;
|
|
62
|
+
if (!el)
|
|
63
|
+
return undefined;
|
|
64
|
+
const measure = () => {
|
|
65
|
+
const rect = el.getBoundingClientRect();
|
|
66
|
+
const sidebar = el.closest('[data-sidebar-root]');
|
|
67
|
+
const rightEdge = sidebar
|
|
68
|
+
? sidebar.getBoundingClientRect().right
|
|
69
|
+
: rect.right;
|
|
70
|
+
setFlyoutPos({ top: rect.top, left: rightEdge + 8 });
|
|
71
|
+
};
|
|
72
|
+
measure();
|
|
73
|
+
window.addEventListener('resize', measure);
|
|
74
|
+
window.addEventListener('scroll', measure, true);
|
|
75
|
+
return () => {
|
|
76
|
+
window.removeEventListener('resize', measure);
|
|
77
|
+
window.removeEventListener('scroll', measure, true);
|
|
78
|
+
};
|
|
79
|
+
}, [isOpen]);
|
|
80
|
+
// Dismiss on outside click or Escape. The flyout is portaled, so an outside
|
|
81
|
+
// click is one landing on neither the trigger nor the portaled flyout.
|
|
51
82
|
(0, react_1.useEffect)(() => {
|
|
52
83
|
if (!isOpen)
|
|
53
84
|
return undefined;
|
|
54
85
|
const handlePointerDown = (event) => {
|
|
55
|
-
var _a;
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
86
|
+
var _a, _b;
|
|
87
|
+
const target = event.target;
|
|
88
|
+
if ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(target))
|
|
89
|
+
return;
|
|
90
|
+
if ((_b = flyoutRef.current) === null || _b === void 0 ? void 0 : _b.contains(target))
|
|
91
|
+
return;
|
|
92
|
+
setIsOpen(false);
|
|
59
93
|
};
|
|
60
94
|
const handleKeyDown = (event) => {
|
|
61
95
|
if (event.key === 'Escape')
|
|
@@ -74,12 +108,16 @@ const CompanyProfile = ({ companyName = 'ABC Pte. Ltd', subtitle = 'Company', en
|
|
|
74
108
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
75
109
|
};
|
|
76
110
|
return (react_1.default.createElement(styles_1.CompanyProfileContainer, { ref: containerRef },
|
|
77
|
-
react_1.default.createElement(styles_1.CompanyProfileWrapper, { onClick: handleClick },
|
|
111
|
+
react_1.default.createElement(styles_1.CompanyProfileWrapper, { ref: triggerRef, onClick: handleClick },
|
|
78
112
|
react_1.default.createElement(styles_1.CompanyProfileContent, null,
|
|
79
113
|
react_1.default.createElement(styles_1.CompanyName, null, companyName),
|
|
80
114
|
react_1.default.createElement(styles_1.CompanySubtitle, null, subtitle)),
|
|
81
115
|
enableDropdown && (react_1.default.createElement(MaterialSymbols_1.default, { icon: "keyboard_arrow_down", size: "m", color: colors_1.BASE.ON_NEUTRAL_SECONDARY, style: isOpen ? { transform: 'rotate(180deg)' } : undefined }))),
|
|
82
|
-
enableDropdown &&
|
|
116
|
+
enableDropdown &&
|
|
117
|
+
isOpen &&
|
|
118
|
+
flyoutPos &&
|
|
119
|
+
(0, react_dom_1.createPortal)(react_1.default.createElement(dropdownStyles_1.DropdownFlyout, { ref: flyoutRef, style: { top: flyoutPos.top, left: flyoutPos.left } },
|
|
120
|
+
react_1.default.createElement(CompanyProfileDropdown_1.default, { showMenuItems: !switchOnly, companies: resolvedCompanies, menuItems: menuItems, onMenuItemClick: onMenuItemClick })), document.body)));
|
|
83
121
|
};
|
|
84
122
|
exports.default = CompanyProfile;
|
|
85
123
|
//# sourceMappingURL=CompanyProfile.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CompanyProfile.js","sourceRoot":"","sources":["../../../src/components/Sidebar/CompanyProfile.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+
|
|
1
|
+
{"version":3,"file":"CompanyProfile.js","sourceRoot":"","sources":["../../../src/components/Sidebar/CompanyProfile.tsx"],"names":[],"mappings":"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"}
|
|
@@ -105,7 +105,7 @@ const SidebarBase = ({ variant = 'business', logo, companyProfile, children, foo
|
|
|
105
105
|
const context = (0, react_1.useContext)(SidebarContext);
|
|
106
106
|
const open = (_a = context === null || context === void 0 ? void 0 : context.open) !== null && _a !== void 0 ? _a : true;
|
|
107
107
|
const isMobile = (_b = context === null || context === void 0 ? void 0 : context.isMobile) !== null && _b !== void 0 ? _b : false;
|
|
108
|
-
const sidebarContent = (react_1.default.createElement(styles_1.SidebarWrapper, { variant: variant },
|
|
108
|
+
const sidebarContent = (react_1.default.createElement(styles_1.SidebarWrapper, { variant: variant, "data-sidebar-root": true },
|
|
109
109
|
react_1.default.createElement(styles_1.MenuHeader, null,
|
|
110
110
|
logo && react_1.default.createElement(styles_1.LogoWrapper, null, logo),
|
|
111
111
|
companyProfile,
|
|
@@ -8,11 +8,24 @@ const styles_1 = require("./styles");
|
|
|
8
8
|
const MaterialSymbols_1 = __importDefault(require("../../icons/MaterialSymbols/MaterialSymbols"));
|
|
9
9
|
const Tag_1 = __importDefault(require("../Tag"));
|
|
10
10
|
const SidebarSubItem_1 = __importDefault(require("./SidebarSubItem"));
|
|
11
|
-
const SidebarNavItem = ({ id, icon, label, variant = 'business', active = false, onClick, subItems, isExpanded = false, tag, }) => {
|
|
11
|
+
const SidebarNavItem = ({ id, icon, label, variant = 'business', active = false, onClick, subItems, isExpanded = false, tag, autoSelectFirstSubItem = false, }) => {
|
|
12
12
|
const color = (0, styles_1.itemTextColor)(variant, active);
|
|
13
13
|
const hasSubItems = Boolean(subItems && subItems.length > 0);
|
|
14
|
+
const handleClick = () => {
|
|
15
|
+
var _a, _b, _c;
|
|
16
|
+
// Fire the parent handler (consumer toggles expansion). If auto-select is
|
|
17
|
+
// on and this click is opening a collapsed group, also select the first
|
|
18
|
+
// sub-item so it's active without a second click.
|
|
19
|
+
if (autoSelectFirstSubItem &&
|
|
20
|
+
hasSubItems &&
|
|
21
|
+
!isExpanded &&
|
|
22
|
+
((_a = subItems === null || subItems === void 0 ? void 0 : subItems[0]) === null || _a === void 0 ? void 0 : _a.onClick)) {
|
|
23
|
+
(_c = (_b = subItems[0]).onClick) === null || _c === void 0 ? void 0 : _c.call(_b);
|
|
24
|
+
}
|
|
25
|
+
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
26
|
+
};
|
|
14
27
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
15
|
-
react_1.default.createElement(styles_1.NavItemWrapper, { variant: variant, active: active, onClick:
|
|
28
|
+
react_1.default.createElement(styles_1.NavItemWrapper, { variant: variant, active: active, onClick: handleClick, "data-id": id },
|
|
16
29
|
react_1.default.createElement(MaterialSymbols_1.default, { icon: icon, size: "m", fill: active ? 1 : 0, color: color }),
|
|
17
30
|
react_1.default.createElement(styles_1.NavItemLabel, { variant: variant, active: active }, label),
|
|
18
31
|
tag && (react_1.default.createElement(Tag_1.default, { type: "positive", variant: "filled", size: "sm" }, tag)),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidebarNavItem.js","sourceRoot":"","sources":["../../../src/components/Sidebar/SidebarNavItem.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AAEzB,qCAKiB;AAEjB,kGAAyE;AACzE,iDAAwB;AACxB,sEAA6C;
|
|
1
|
+
{"version":3,"file":"SidebarNavItem.js","sourceRoot":"","sources":["../../../src/components/Sidebar/SidebarNavItem.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AAEzB,qCAKiB;AAEjB,kGAAyE;AACzE,iDAAwB;AACxB,sEAA6C;AA6B7C,MAAM,cAAc,GAAG,CAAC,EACtB,EAAE,EACF,IAAI,EACJ,KAAK,EACL,OAAO,GAAG,UAAU,EACpB,MAAM,GAAG,KAAK,EACd,OAAO,EACP,QAAQ,EACR,UAAU,GAAG,KAAK,EAClB,GAAG,EACH,sBAAsB,GAAG,KAAK,GACV,EAAE,EAAE;IACxB,MAAM,KAAK,GAAG,IAAA,sBAAa,EAAC,OAAO,EAAE,MAAM,CAAC,CAAA;IAC5C,MAAM,WAAW,GAAG,OAAO,CAAC,QAAQ,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;IAE5D,MAAM,WAAW,GAAG,GAAG,EAAE;;QACvB,0EAA0E;QAC1E,wEAAwE;QACxE,kDAAkD;QAClD,IACE,sBAAsB;YACtB,WAAW;YACX,CAAC,UAAU;aACX,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,0CAAE,OAAO,CAAA,EACtB,CAAC;YACD,MAAA,MAAA,QAAQ,CAAC,CAAC,CAAC,EAAC,OAAO,kDAAI,CAAA;QACzB,CAAC;QACD,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,CAAA;IACb,CAAC,CAAA;IAED,OAAO,CACL;QACE,8BAAC,uBAAc,IACb,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,WAAW,aACX,EAAE;YAEX,8BAAC,yBAAe,IACd,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,GAAG,EACR,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACpB,KAAK,EAAE,KAAK,GACZ;YACF,8BAAC,qBAAY,IAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,IAC3C,KAAK,CACO;YACd,GAAG,IAAI,CACN,8BAAC,aAAG,IAAC,IAAI,EAAC,UAAU,EAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,IAC5C,GAAG,CACA,CACP;YACA,WAAW,IAAI,CACd,8BAAC,0BAAiB;gBAChB,8BAAC,yBAAe,IACd,IAAI,EAAC,qBAAqB,EAC1B,IAAI,EAAC,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC,CAAC,CAAC,SAAS,GAC/D,CACgB,CACrB,CACc;QAChB,UAAU;YACT,QAAQ;YACR,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACpB,8BAAC,wBAAc,IACb,GAAG,EAAE,GAAG,CAAC,EAAE,EACX,KAAK,EAAE,GAAG,CAAC,KAAK,EAChB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,GAAG,CAAC,MAAM,EAClB,OAAO,EAAE,GAAG,CAAC,OAAO,GACpB,CACH,CAAC,CACH,CACJ,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,cAAc,CAAA"}
|
|
@@ -3,16 +3,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.DropdownDivider = exports.DropdownMenuLabel = exports.DropdownSecondaryText = exports.DropdownPrimaryText = exports.DropdownRowContent = exports.DropdownMenuRow = exports.DropdownRow = exports.DropdownSectionLabel = exports.DropdownPanel = void 0;
|
|
6
|
+
exports.DropdownDivider = exports.DropdownMenuLabel = exports.DropdownSecondaryText = exports.DropdownPrimaryText = exports.DropdownRowContent = exports.DropdownMenuRow = exports.DropdownRow = exports.DropdownSectionLabel = exports.DropdownPanel = exports.DropdownFlyout = void 0;
|
|
7
7
|
const styled_1 = __importDefault(require("@emotion/styled"));
|
|
8
8
|
const fontStyles_1 = require("../../constants/fontStyles");
|
|
9
9
|
const colors_1 = require("../../constants/Colors/colors");
|
|
10
10
|
// ─── Company profile dropdown ───
|
|
11
|
+
/*
|
|
12
|
+
* Flyout wrapper: fixed-positioned so it escapes the sidebar's overflow
|
|
13
|
+
* clipping and opens to the right of the panel. CompanyProfile sets top/left
|
|
14
|
+
* inline from the trigger's measured position.
|
|
15
|
+
*/
|
|
16
|
+
exports.DropdownFlyout = styled_1.default.div `
|
|
17
|
+
position: fixed;
|
|
18
|
+
z-index: 1000;
|
|
19
|
+
`;
|
|
11
20
|
exports.DropdownPanel = styled_1.default.div `
|
|
12
|
-
position: absolute;
|
|
13
|
-
top: calc(100% + 4px);
|
|
14
|
-
left: 0;
|
|
15
|
-
z-index: 10;
|
|
16
21
|
width: 208px;
|
|
17
22
|
box-sizing: border-box;
|
|
18
23
|
padding: 8px 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdownStyles.js","sourceRoot":"","sources":["../../../src/components/Sidebar/dropdownStyles.ts"],"names":[],"mappings":";;;;;;AAAA,6DAAoC;AACpC,2DAAqE;AACrE,0DAKsC;AAEtC,mCAAmC;
|
|
1
|
+
{"version":3,"file":"dropdownStyles.js","sourceRoot":"","sources":["../../../src/components/Sidebar/dropdownStyles.ts"],"names":[],"mappings":";;;;;;AAAA,6DAAoC;AACpC,2DAAqE;AACrE,0DAKsC;AAEtC,mCAAmC;AAEnC;;;;GAIG;AACU,QAAA,cAAc,GAAG,gBAAM,CAAC,GAAG,CAAA;;;CAGvC,CAAA;AAEY,QAAA,aAAa,GAAG,gBAAM,CAAC,GAAG,CAAA;;;;;;;;;sBASjB,gBAAO,CAAC,OAAO;;;;CAIpC,CAAA;AAEY,QAAA,oBAAoB,GAAG,gBAAM,CAAC,GAAG,CAAA;;;;;;iBAM7B,sBAAS,KAAK,0BAAa;;;;WAIjC,aAAI,CAAC,oBAAoB;;CAEnC,CAAA;AAEY,QAAA,WAAW,GAAG,gBAAM,CAAC,GAAG,CAAsB;;;;;;;;sBAQrC,CAAC,KAAK,EAAE,EAAE,CAC5B,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,kBAAS,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa;;;wBAGnC,CAAC,KAAK,EAAE,EAAE,CAC5B,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,kBAAS,CAAC,cAAc,CAAC,CAAC,CAAC,oBAAW,CAAC,aAAa;;CAExE,CAAA;AAEY,QAAA,eAAe,GAAG,gBAAM,CAAC,GAAG,CAAA;;;;;;;;;;wBAUjB,oBAAW,CAAC,aAAa;;CAEhD,CAAA;AAEY,QAAA,kBAAkB,GAAG,gBAAM,CAAC,GAAG,CAAA;;;;;;;;CAQ3C,CAAA;AAEY,QAAA,mBAAmB,GAAG,gBAAM,CAAC,IAAI,CAAA;;iBAE7B,sBAAS,KAAK,0BAAa;;;;WAIjC,aAAI,CAAC,UAAU;;CAEzB,CAAA;AAEY,QAAA,qBAAqB,GAAG,gBAAM,CAAC,IAAI,CAAA;;iBAE/B,sBAAS,KAAK,0BAAa;;;;WAIjC,aAAI,CAAC,oBAAoB;;CAEnC,CAAA;AAEY,QAAA,iBAAiB,GAAG,gBAAM,CAAC,IAAI,CAAA;;iBAE3B,sBAAS,KAAK,0BAAa;;;;WAIjC,aAAI,CAAC,oBAAoB;;CAEnC,CAAA;AAEY,QAAA,eAAe,GAAG,gBAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;4BAYb,aAAI,CAAC,IAAI;;CAEpC,CAAA"}
|
|
@@ -34,7 +34,6 @@ exports.SidebarWrapper = styled_1.default.div `
|
|
|
34
34
|
width: 240px;
|
|
35
35
|
height: 100vh;
|
|
36
36
|
box-sizing: border-box;
|
|
37
|
-
padding: 32px 0;
|
|
38
37
|
background-color: ${(props) => ROOT_BACKGROUND[props.variant]};
|
|
39
38
|
display: flex;
|
|
40
39
|
flex-direction: column;
|
|
@@ -46,8 +45,9 @@ exports.SidebarWrapper = styled_1.default.div `
|
|
|
46
45
|
* Scrollable region holding logo, company profile, nav items, and the
|
|
47
46
|
* regulatory footer. Everything scrolls together as one list.
|
|
48
47
|
*
|
|
49
|
-
*
|
|
50
|
-
*
|
|
48
|
+
* All padding (vertical + horizontal) lives here rather than on the wrapper,
|
|
49
|
+
* so content can scroll all the way to the panel's edges and the scrollbar
|
|
50
|
+
* sits flush against the right edge.
|
|
51
51
|
*/
|
|
52
52
|
exports.MenuHeader = styled_1.default.div `
|
|
53
53
|
display: flex;
|
|
@@ -56,7 +56,7 @@ exports.MenuHeader = styled_1.default.div `
|
|
|
56
56
|
gap: 24px;
|
|
57
57
|
width: 100%;
|
|
58
58
|
box-sizing: border-box;
|
|
59
|
-
padding:
|
|
59
|
+
padding: 32px 16px;
|
|
60
60
|
flex: 1 1 auto;
|
|
61
61
|
min-height: 0;
|
|
62
62
|
overflow-y: auto;
|
|
@@ -192,7 +192,13 @@ exports.CopyrightNoticeWrapper = styled_1.default.div `
|
|
|
192
192
|
width: 100%;
|
|
193
193
|
box-sizing: border-box;
|
|
194
194
|
flex-shrink: 0;
|
|
195
|
-
|
|
195
|
+
/*
|
|
196
|
+
* margin-top: auto bottom-anchors the footer when the nav list is short
|
|
197
|
+
* (spare space in the flex column pushes it down). When the list overflows,
|
|
198
|
+
* auto resolves to 0 and the flex gap provides spacing, so the footer sits
|
|
199
|
+
* right after the last item and scrolls with the content.
|
|
200
|
+
*/
|
|
201
|
+
margin-top: auto;
|
|
196
202
|
background-color: ${colors_1.SURFACE.SECONDARY_NEUTRAL};
|
|
197
203
|
`;
|
|
198
204
|
exports.CopyrightNoticeText = styled_1.default.span `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Sidebar/styles.ts"],"names":[],"mappings":";;;;;;AAAA,6DAAoC;AACpC,2DAImC;AACnC,0DAMsC;AAItC,MAAM,SAAS,GAAG,CAAC,OAAuB,EAAE,EAAE,CAAC,OAAO,KAAK,SAAS,CAAA;AAEpE,MAAM,eAAe,GAAmC;IACtD,QAAQ,EAAE,gBAAO,CAAC,OAAO;IACzB,QAAQ,EAAE,gBAAO,CAAC,OAAO;IACzB,OAAO,EAAE,aAAI,CAAC,SAAS;CACxB,CAAA;AAED,MAAM,iBAAiB,GAAmC;IACxD,QAAQ,EAAE,kBAAS,CAAC,cAAc;IAClC,QAAQ,EAAE,kBAAS,CAAC,cAAc;IAClC,OAAO,EAAE,kBAAS,CAAC,sBAAsB;CAC1C,CAAA;AAED,MAAM,gBAAgB,GAAmC;IACvD,QAAQ,EAAE,oBAAW,CAAC,aAAa;IACnC,QAAQ,EAAE,oBAAW,CAAC,aAAa;IACnC,OAAO,EAAE,2BAA2B;CACrC,CAAA;AAEM,MAAM,aAAa,GAAG,CAAC,OAAuB,EAAE,MAAgB,EAAE,EAAE;IACzE,IAAI,SAAS,CAAC,OAAO,CAAC;QAAE,OAAO,aAAI,CAAC,YAAY,CAAA;IAChD,OAAO,MAAM,CAAC,CAAC,CAAC,eAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAI,CAAC,oBAAoB,CAAA;AAC7D,CAAC,CAAA;AAHY,QAAA,aAAa,iBAGzB;AAED,MAAM,OAAO,GAAG,CAAC,OAAuB,EAAE,MAAgB,EAAE,EAAE,CAC5D,MAAM,CAAC,CAAC,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAA;AAEpD,QAAA,cAAc,GAAG,gBAAM,CAAC,GAAG,CAA6B
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Sidebar/styles.ts"],"names":[],"mappings":"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"}
|
|
@@ -19,6 +19,12 @@ type SidebarNavItemProps = {
|
|
|
19
19
|
isExpanded?: boolean;
|
|
20
20
|
/** Optional trailing tag text (e.g. "New"). Uses DS Tag component. */
|
|
21
21
|
tag?: string;
|
|
22
|
+
/**
|
|
23
|
+
* When true and this item has sub-items, expanding the parent also fires
|
|
24
|
+
* the first sub-item's onClick, so the child is selected without an extra
|
|
25
|
+
* click. Only applies on expand (not collapse) and only to the first child.
|
|
26
|
+
*/
|
|
27
|
+
autoSelectFirstSubItem?: boolean;
|
|
22
28
|
};
|
|
23
|
-
declare const SidebarNavItem: ({ id, icon, label, variant, active, onClick, subItems, isExpanded, tag, }: SidebarNavItemProps) => React.JSX.Element;
|
|
29
|
+
declare const SidebarNavItem: ({ id, icon, label, variant, active, onClick, subItems, isExpanded, tag, autoSelectFirstSubItem, }: SidebarNavItemProps) => React.JSX.Element;
|
|
24
30
|
export default SidebarNavItem;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
export declare const DropdownFlyout: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
|
|
1
2
|
export declare const DropdownPanel: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
|
|
2
3
|
export declare const DropdownSectionLabel: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
|
|
3
4
|
export declare const DropdownRow: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|