@xfers/design-system 8.0.0-dev.92c2f5ccd2 → 8.0.0-dev.b378854f3c
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 +179 -178
- 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/dropdownStyles.js +10 -5
- package/dist/components/Sidebar/dropdownStyles.js.map +1 -1
- package/dist/types/components/Sidebar/dropdownStyles.d.ts +1 -0
- package/es/index.js +378 -377
- 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,
|
|
@@ -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"}
|
|
@@ -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>, {
|