@xfers/design-system 8.0.0-dev.7f6932b25d → 8.0.0-dev.92c2f5ccd2
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 +178 -179
- package/cjs/index.js.map +1 -1
- package/dist/components/Sidebar/CompanyProfile.js +7 -45
- package/dist/components/Sidebar/CompanyProfile.js.map +1 -1
- package/dist/components/Sidebar/Sidebar.js +1 -1
- package/dist/components/Sidebar/dropdownStyles.js +5 -10
- package/dist/components/Sidebar/dropdownStyles.js.map +1 -1
- package/dist/types/components/Sidebar/dropdownStyles.d.ts +0 -1
- package/es/index.js +377 -378
- package/es/index.js.map +1 -1
- package/package.json +4 -3
|
@@ -37,59 +37,25 @@ 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");
|
|
41
40
|
const styles_1 = require("./styles");
|
|
42
|
-
const dropdownStyles_1 = require("./dropdownStyles");
|
|
43
41
|
const MaterialSymbols_1 = __importDefault(require("../../icons/MaterialSymbols/MaterialSymbols"));
|
|
44
42
|
const colors_1 = require("../../constants/Colors/colors");
|
|
45
43
|
const CompanyProfileDropdown_1 = __importDefault(require("./CompanyProfileDropdown"));
|
|
46
44
|
const CompanyProfile = ({ companyName = 'ABC Pte. Ltd', subtitle = 'Company', enableDropdown = true, switchOnly = false, companies, menuItems, onMenuItemClick, onClick, }) => {
|
|
47
45
|
const [isOpen, setIsOpen] = (0, react_1.useState)(false);
|
|
48
|
-
const [flyoutPos, setFlyoutPos] = (0, react_1.useState)(null);
|
|
49
46
|
const containerRef = (0, react_1.useRef)(null);
|
|
50
|
-
const triggerRef = (0, react_1.useRef)(null);
|
|
51
|
-
const flyoutRef = (0, react_1.useRef)(null);
|
|
52
47
|
const resolvedCompanies = companies !== null && companies !== void 0 ? companies : [
|
|
53
48
|
{ name: companyName, subtitle: 'Business Account', active: true },
|
|
54
49
|
];
|
|
55
|
-
//
|
|
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.
|
|
50
|
+
// Dismiss on outside click or Escape.
|
|
82
51
|
(0, react_1.useEffect)(() => {
|
|
83
52
|
if (!isOpen)
|
|
84
53
|
return undefined;
|
|
85
54
|
const handlePointerDown = (event) => {
|
|
86
|
-
var _a
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
if ((_b = flyoutRef.current) === null || _b === void 0 ? void 0 : _b.contains(target))
|
|
91
|
-
return;
|
|
92
|
-
setIsOpen(false);
|
|
55
|
+
var _a;
|
|
56
|
+
if (!((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
|
|
57
|
+
setIsOpen(false);
|
|
58
|
+
}
|
|
93
59
|
};
|
|
94
60
|
const handleKeyDown = (event) => {
|
|
95
61
|
if (event.key === 'Escape')
|
|
@@ -108,16 +74,12 @@ const CompanyProfile = ({ companyName = 'ABC Pte. Ltd', subtitle = 'Company', en
|
|
|
108
74
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
109
75
|
};
|
|
110
76
|
return (react_1.default.createElement(styles_1.CompanyProfileContainer, { ref: containerRef },
|
|
111
|
-
react_1.default.createElement(styles_1.CompanyProfileWrapper, {
|
|
77
|
+
react_1.default.createElement(styles_1.CompanyProfileWrapper, { onClick: handleClick },
|
|
112
78
|
react_1.default.createElement(styles_1.CompanyProfileContent, null,
|
|
113
79
|
react_1.default.createElement(styles_1.CompanyName, null, companyName),
|
|
114
80
|
react_1.default.createElement(styles_1.CompanySubtitle, null, subtitle)),
|
|
115
81
|
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 }))),
|
|
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)));
|
|
82
|
+
enableDropdown && isOpen && (react_1.default.createElement(CompanyProfileDropdown_1.default, { showMenuItems: !switchOnly, companies: resolvedCompanies, menuItems: menuItems, onMenuItemClick: onMenuItemClick }))));
|
|
121
83
|
};
|
|
122
84
|
exports.default = CompanyProfile;
|
|
123
85
|
//# 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0D;AAC1D,qCAMiB;AACjB,kGAAyE;AACzE,0DAAoD;AACpD,sFAA6D;AAgB7D,MAAM,cAAc,GAAG,CAAC,EACtB,WAAW,GAAG,cAAc,EAC5B,QAAQ,GAAG,SAAS,EACpB,cAAc,GAAG,IAAI,EACrB,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,SAAS,EACT,eAAe,EACf,OAAO,GACa,EAAE,EAAE;IACxB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAA;IAC3C,MAAM,YAAY,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAA;IAEjD,MAAM,iBAAiB,GAAoB,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI;QACtD,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,EAAE,IAAI,EAAE;KAClE,CAAA;IAED,sCAAsC;IACtC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM;YAAE,OAAO,SAAS,CAAA;QAE7B,MAAM,iBAAiB,GAAG,CAAC,KAAiB,EAAE,EAAE;;YAC9C,IAAI,CAAC,CAAA,MAAA,YAAY,CAAC,OAAO,0CAAE,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,CAAA,EAAE,CAAC;gBAC1D,SAAS,CAAC,KAAK,CAAC,CAAA;YAClB,CAAC;QACH,CAAC,CAAA;QACD,MAAM,aAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC7C,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ;gBAAE,SAAS,CAAC,KAAK,CAAC,CAAA;QAC9C,CAAC,CAAA;QAED,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAA;QACzD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAA;QACnD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAA;YAC5D,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAA;QACxD,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAEZ,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,cAAc;YAAE,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAA;QAC9C,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,CAAA;IACb,CAAC,CAAA;IAED,OAAO,CACL,8BAAC,gCAAuB,IAAC,GAAG,EAAE,YAAY;QACxC,8BAAC,8BAAqB,IAAC,OAAO,EAAE,WAAW;YACzC,8BAAC,8BAAqB;gBACpB,8BAAC,oBAAW,QAAE,WAAW,CAAe;gBACxC,8BAAC,wBAAe,QAAE,QAAQ,CAAmB,CACvB;YACvB,cAAc,IAAI,CACjB,8BAAC,yBAAe,IACd,IAAI,EAAC,qBAAqB,EAC1B,IAAI,EAAC,GAAG,EACR,KAAK,EAAE,aAAI,CAAC,oBAAoB,EAChC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC,CAAC,CAAC,SAAS,GAC3D,CACH,CACqB;QACvB,cAAc,IAAI,MAAM,IAAI,CAC3B,8BAAC,gCAAsB,IACrB,aAAa,EAAE,CAAC,UAAU,EAC1B,SAAS,EAAE,iBAAiB,EAC5B,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,eAAe,GAChC,CACH,CACuB,CAC3B,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,cAAc,CAAA"}
|
|
@@ -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 },
|
|
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,21 +3,16 @@ 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 =
|
|
6
|
+
exports.DropdownDivider = exports.DropdownMenuLabel = exports.DropdownSecondaryText = exports.DropdownPrimaryText = exports.DropdownRowContent = exports.DropdownMenuRow = exports.DropdownRow = exports.DropdownSectionLabel = exports.DropdownPanel = 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
|
-
`;
|
|
20
11
|
exports.DropdownPanel = styled_1.default.div `
|
|
12
|
+
position: absolute;
|
|
13
|
+
top: calc(100% + 4px);
|
|
14
|
+
left: 0;
|
|
15
|
+
z-index: 10;
|
|
21
16
|
width: 208px;
|
|
22
17
|
box-sizing: border-box;
|
|
23
18
|
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;AAEtB,QAAA,aAAa,GAAG,gBAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;sBAajB,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,4 +1,3 @@
|
|
|
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>;
|
|
2
1
|
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>;
|
|
3
2
|
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>;
|
|
4
3
|
export declare const DropdownRow: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|