@czi-sds/components 22.13.0 → 22.13.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/index.cjs.d.ts +5 -1
- package/dist/index.cjs.js +23 -22
- package/dist/index.esm.d.ts +5 -1
- package/dist/index.esm.js +23 -22
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
package/dist/index.cjs.d.ts
CHANGED
|
@@ -30,6 +30,7 @@ import { ListSubheaderProps as RawListSubheaderProps } from "@mui/material";
|
|
|
30
30
|
import { MenuProps as RawMenuProps } from "@mui/material";
|
|
31
31
|
import { ChipProps as ChipProps$0 } from "@mui/material";
|
|
32
32
|
import { LinkProps as LinkProps$1 } from "@mui/material";
|
|
33
|
+
import { MenuProps as MenuProps$0 } from "@mui/material";
|
|
33
34
|
import { TabProps as RawTabProps } from "@mui/material";
|
|
34
35
|
import { TabsProps as RawTabsProps } from "@mui/material";
|
|
35
36
|
import React from "react";
|
|
@@ -1297,7 +1298,7 @@ interface InputDropdownProps extends CommonThemeProps, Omit<ButtonProps$0, (type
|
|
|
1297
1298
|
value?: ReactNode;
|
|
1298
1299
|
shouldTruncateMinimalDetails?: boolean;
|
|
1299
1300
|
shouldPutAColonAfterLabel?: boolean;
|
|
1300
|
-
width?:
|
|
1301
|
+
width?: string;
|
|
1301
1302
|
className?: string;
|
|
1302
1303
|
// (masoudmanson): This is a temporary fix for the issue where the style prop
|
|
1303
1304
|
// is not correctly passed to the underlying Button component when asserting as
|
|
@@ -1734,6 +1735,7 @@ interface DropdownNavigationHeaderPrimaryNavItem<T extends string> extends BaseN
|
|
|
1734
1735
|
}
|
|
1735
1736
|
type NavigationHeaderPrimaryNavItem<T extends string> = TextNavigationHeaderPrimaryNavItem<T> | DropdownNavigationHeaderPrimaryNavItem<T>;
|
|
1736
1737
|
interface NavigationHeaderPrimaryNavProps<T extends string> {
|
|
1738
|
+
menuProps?: Partial<MenuProps$0>;
|
|
1737
1739
|
hasInvertedStyle?: boolean;
|
|
1738
1740
|
isNarrow?: boolean;
|
|
1739
1741
|
items: NavigationHeaderPrimaryNavItem<T>[];
|
|
@@ -1751,6 +1753,7 @@ interface DropdownHeaderSecondaryNavItem extends Partial<SdsMinimalButtonProps>
|
|
|
1751
1753
|
}
|
|
1752
1754
|
type NavigationHeaderSecondaryNavItem = TextHeaderSecondaryNavItem | DropdownHeaderSecondaryNavItem;
|
|
1753
1755
|
interface NavigationHeaderSecondaryNavProps {
|
|
1756
|
+
menuProps?: Partial<MenuProps$0>;
|
|
1754
1757
|
items: NavigationHeaderSecondaryNavItem[];
|
|
1755
1758
|
hasInvertedStyle?: boolean;
|
|
1756
1759
|
isNarrow?: boolean;
|
|
@@ -1775,6 +1778,7 @@ interface NavigationHeaderProps<T extends string = string> extends AppBarProps {
|
|
|
1775
1778
|
title: string;
|
|
1776
1779
|
drawerOpen?: boolean;
|
|
1777
1780
|
setDrawerOpen?: (open: boolean) => void;
|
|
1781
|
+
menuProps?: Partial<MenuProps$0>;
|
|
1778
1782
|
}
|
|
1779
1783
|
type IconButtonProps = SdsIconButtonProps & {
|
|
1780
1784
|
children?: string;
|
package/dist/index.cjs.js
CHANGED
|
@@ -6514,7 +6514,7 @@ var inputDropdownStyles = function (props) {
|
|
|
6514
6514
|
var _m = props.width, width = _m === void 0 ? "auto" : _m;
|
|
6515
6515
|
var spaces = getSpaces(props);
|
|
6516
6516
|
var semanticColors = getSemanticColors(props);
|
|
6517
|
-
return react.css(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n ", "\n\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n cursor: pointer;\n padding: ", "px ", "px;\n justify-content: start;\n width: ", "
|
|
6517
|
+
return react.css(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n ", "\n\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n cursor: pointer;\n padding: ", "px ", "px;\n justify-content: start;\n width: ", ";\n min-width: 90px !important;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n ", " {\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n box-shadow: inset 0 0 0 1px ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: transparent;\n box-shadow: inset 0 0 0 1px ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n background-color: transparent;\n outline-offset: -1px;\n }\n "], ["\n ", "\n\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n cursor: pointer;\n padding: ", "px ", "px;\n justify-content: start;\n width: ", ";\n min-width: 90px !important;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n ", " {\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n box-shadow: inset 0 0 0 1px ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: transparent;\n box-shadow: inset 0 0 0 1px ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n background-color: transparent;\n outline-offset: -1px;\n }\n "])), labelStyle(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.m, /^\d+$/.test(width) ? "".concat(width, "px") : width, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, IconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.m, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.ornamentSecondary, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.fillHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.borderPrimaryHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.ornamentSecondaryHover, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.textPrimary, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _j === void 0 ? void 0 : _j.border, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.textPrimary, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.ornamentSecondaryPressed);
|
|
6518
6518
|
};
|
|
6519
6519
|
var minimal$1 = function (props) {
|
|
6520
6520
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
@@ -6621,7 +6621,7 @@ var MinimalDetails = styled__default.default("div", {
|
|
|
6621
6621
|
});
|
|
6622
6622
|
var LabelWrapper = styled__default.default("span", {
|
|
6623
6623
|
shouldForwardProp: function (prop) { return !doNotForwardProps$s.includes(prop); },
|
|
6624
|
-
})(templateObject_15$3 || (templateObject_15$3 = __makeTemplateObject(["\n align-items: center;\n display: inline-flex;\n justify-content: space-between;\n width: 100%;\n\n & > div {\n align-items: center;\n display: inline-flex;\n justify-content: start;\n width:
|
|
6624
|
+
})(templateObject_15$3 || (templateObject_15$3 = __makeTemplateObject(["\n align-items: center;\n display: inline-flex;\n justify-content: space-between;\n width: 100%;\n\n & > div {\n align-items: center;\n display: inline-flex;\n justify-content: start;\n width: 100%;\n overflow: hidden;\n }\n"], ["\n align-items: center;\n display: inline-flex;\n justify-content: space-between;\n width: 100%;\n\n & > div {\n align-items: center;\n display: inline-flex;\n justify-content: start;\n width: 100%;\n overflow: hidden;\n }\n"])));
|
|
6625
6625
|
var IconWrapper = styled__default.default("span", {
|
|
6626
6626
|
shouldForwardProp: function (prop) { return !doNotForwardProps$s.includes(prop); },
|
|
6627
6627
|
})(templateObject_16$2 || (templateObject_16$2 = __makeTemplateObject(["\n margin-left: auto;\n display: flex;\n align-items: center;\n justify-self: end;\n"], ["\n margin-left: auto;\n display: flex;\n align-items: center;\n justify-self: end;\n"])));
|
|
@@ -6679,20 +6679,18 @@ function renderLabelTypeLabelText(_a) {
|
|
|
6679
6679
|
var isMinimal = _a.isMinimal, label = _a.label, counter = _a.counter, value = _a.value, shouldPutAColonAfterLabel = _a.shouldPutAColonAfterLabel;
|
|
6680
6680
|
if (isMinimal)
|
|
6681
6681
|
return label;
|
|
6682
|
-
return (counter || value) && shouldPutAColonAfterLabel ?
|
|
6682
|
+
return (counter || value) && shouldPutAColonAfterLabel ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label, ":"] })) : (label);
|
|
6683
6683
|
}
|
|
6684
6684
|
function renderValueTypeLabelText(_a) {
|
|
6685
6685
|
var value = _a.value, multiple = _a.multiple, isMinimal = _a.isMinimal, label = _a.label, counter = _a.counter, details = _a.details, shouldPutAColonAfterLabel = _a.shouldPutAColonAfterLabel;
|
|
6686
6686
|
if (!value || multiple) {
|
|
6687
6687
|
if (isMinimal)
|
|
6688
6688
|
return label;
|
|
6689
|
-
return !!counter && shouldPutAColonAfterLabel ?
|
|
6689
|
+
return !!counter && shouldPutAColonAfterLabel ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label, ":"] })) : (label);
|
|
6690
6690
|
}
|
|
6691
6691
|
if (isMinimal)
|
|
6692
6692
|
return value;
|
|
6693
|
-
return (!!counter || !!details) && shouldPutAColonAfterLabel
|
|
6694
|
-
? "".concat(value, ":")
|
|
6695
|
-
: value;
|
|
6693
|
+
return (!!counter || !!details) && shouldPutAColonAfterLabel ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [value, ":"] })) : (value);
|
|
6696
6694
|
}
|
|
6697
6695
|
function renderDetailsText(_a) {
|
|
6698
6696
|
var details = _a.details, sdsType = _a.sdsType, value = _a.value;
|
|
@@ -15040,7 +15038,7 @@ var StyledSectionHeader = styled__default.default(ListSubheader, {
|
|
|
15040
15038
|
}
|
|
15041
15039
|
return (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary;
|
|
15042
15040
|
}
|
|
15043
|
-
return react.css(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n &.MuiListSubheader-root {\n ", "\n top: 0;\n color: ", ";\n background-color: ", ";\n padding: ", "px ", "px;\n margin-bottom: 0;\n }\n "], ["\n &.MuiListSubheader-root {\n ", "\n top: 0;\n color: ", ";\n background-color: ", ";\n padding: ", "px ", "px;\n margin-bottom: 0;\n }\n "])), fontCapsXxxxs(props), getTextColor(), getBackgroundColor(), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, isNarrow ? spaces === null || spaces === void 0 ? void 0 : spaces.xl : spaces === null || spaces === void 0 ? void 0 : spaces.
|
|
15041
|
+
return react.css(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n &.MuiListSubheader-root {\n ", "\n top: 0;\n color: ", ";\n background-color: ", ";\n padding: ", "px ", "px;\n margin-bottom: 0;\n }\n "], ["\n &.MuiListSubheader-root {\n ", "\n top: 0;\n color: ", ";\n background-color: ", ";\n padding: ", "px ", "px;\n margin-bottom: 0;\n }\n "])), fontCapsXxxxs(props), getTextColor(), getBackgroundColor(), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, isNarrow ? spaces === null || spaces === void 0 ? void 0 : spaces.xl : spaces === null || spaces === void 0 ? void 0 : spaces.xs);
|
|
15044
15042
|
});
|
|
15045
15043
|
var StyledDivider = styled__default.default(material.Divider, {
|
|
15046
15044
|
shouldForwardProp: function (prop) { return !doNotForwardProps$6.includes(prop); },
|
|
@@ -15092,7 +15090,7 @@ function groupItemsBySection(items) {
|
|
|
15092
15090
|
}
|
|
15093
15091
|
|
|
15094
15092
|
function NavigationHeaderPrimaryNav(_a) {
|
|
15095
|
-
var hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow, items = _a.items, onChange = _a.onChange, value = _a.value;
|
|
15093
|
+
var menuProps = _a.menuProps, hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow, items = _a.items, onChange = _a.onChange, value = _a.value;
|
|
15096
15094
|
var theme = material.useTheme();
|
|
15097
15095
|
var _b = React.useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
|
|
15098
15096
|
var _c = React.useState(null), activeDropdownKey = _c[0], setActiveDropdownKey = _c[1];
|
|
@@ -15122,7 +15120,7 @@ function NavigationHeaderPrimaryNav(_a) {
|
|
|
15122
15120
|
setActiveDropdownKey(key);
|
|
15123
15121
|
onChange(key);
|
|
15124
15122
|
parentOnClick === null || parentOnClick === void 0 ? void 0 : parentOnClick(e);
|
|
15125
|
-
}, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: jsxRuntime.jsxs(StyledLabel, { itemType: item.itemType, active: isDropdownOpen, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [jsxRuntime.jsx(StyledLabelTextWrapper$1, { active: isActive, isNarrow: isNarrow, children: label }), jsxRuntime.jsx(StyledLabelTextWrapperShadow$1, { "aria-hidden": "true", isNarrow: isNarrow, children: label }), jsxRuntime.jsx(Icon, { sdsIcon: isDropdownOpen ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] }) })), jsxRuntime.jsx(Menu, { anchorEl: anchorEl, open: isDropdownOpen, onClose: onClose, slotProps: {
|
|
15123
|
+
}, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: jsxRuntime.jsxs(StyledLabel, { itemType: item.itemType, active: isDropdownOpen, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [jsxRuntime.jsx(StyledLabelTextWrapper$1, { active: isActive, isNarrow: isNarrow, children: label }), jsxRuntime.jsx(StyledLabelTextWrapperShadow$1, { "aria-hidden": "true", isNarrow: isNarrow, children: label }), jsxRuntime.jsx(Icon, { sdsIcon: isDropdownOpen ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] }) })), jsxRuntime.jsx(Menu, __assign({ anchorEl: anchorEl, open: isDropdownOpen, onClose: onClose, slotProps: {
|
|
15126
15124
|
paper: {
|
|
15127
15125
|
style: {
|
|
15128
15126
|
marginTop: (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.app) === null || _a === void 0 ? void 0 : _a.spacing) === null || _b === void 0 ? void 0 : _b.s,
|
|
@@ -15134,7 +15132,7 @@ function NavigationHeaderPrimaryNav(_a) {
|
|
|
15134
15132
|
}, transformOrigin: {
|
|
15135
15133
|
horizontal: "left",
|
|
15136
15134
|
vertical: "top",
|
|
15137
|
-
}, children: (function () {
|
|
15135
|
+
} }, menuProps, { disablePortal: true, children: (function () {
|
|
15138
15136
|
var groupedItems = groupItemsBySection(dropdownItem_1.items);
|
|
15139
15137
|
var sections = Object.keys(groupedItems);
|
|
15140
15138
|
var hasMultipleSections = sections.length > 1 ||
|
|
@@ -15150,7 +15148,7 @@ function NavigationHeaderPrimaryNav(_a) {
|
|
|
15150
15148
|
}, sdsType: "action", sx: { minWidth: menuWidth } }, subItemRest, { children: subLabel }), "menu-item-".concat(subLabel)));
|
|
15151
15149
|
})] }, "section-".concat(section || "default")));
|
|
15152
15150
|
});
|
|
15153
|
-
})() })] }, key));
|
|
15151
|
+
})() }))] }, key));
|
|
15154
15152
|
}
|
|
15155
15153
|
if (item.itemType === "dropdown" && isNarrow) {
|
|
15156
15154
|
var dropdownItem_2 = item;
|
|
@@ -15230,7 +15228,7 @@ var StyledTextItem = styled__default.default(Button, {
|
|
|
15230
15228
|
var templateObject_1$g, templateObject_2$8, templateObject_3$4;
|
|
15231
15229
|
|
|
15232
15230
|
function NavigationHeaderSecondaryNav(_a) {
|
|
15233
|
-
var items = _a.items, hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow;
|
|
15231
|
+
var menuProps = _a.menuProps, items = _a.items, hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow;
|
|
15234
15232
|
var _b = React.useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
|
|
15235
15233
|
var _c = React.useState(null), activeDropdownKey = _c[0], setActiveDropdownKey = _c[1];
|
|
15236
15234
|
var theme = material.useTheme();
|
|
@@ -15260,7 +15258,7 @@ function NavigationHeaderSecondaryNav(_a) {
|
|
|
15260
15258
|
setAnchorEl(event.currentTarget);
|
|
15261
15259
|
setActiveDropdownKey(itemKey);
|
|
15262
15260
|
(_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, event);
|
|
15263
|
-
}, children: [jsxRuntime.jsx(StyledLabelTextWrapper$1, { active: isDropdownOpen, isNarrow: isNarrow, children: label }), jsxRuntime.jsx(StyledLabelTextWrapperShadow$1, { "aria-hidden": "true", isNarrow: isNarrow, children: label }), jsxRuntime.jsx(Icon, { sdsIcon: isDropdownOpen ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] })), jsxRuntime.jsx(Menu, { anchorEl: anchorEl, open: isDropdownOpen, onClose: onClose, slotProps: {
|
|
15261
|
+
}, children: [jsxRuntime.jsx(StyledLabelTextWrapper$1, { active: isDropdownOpen, isNarrow: isNarrow, children: label }), jsxRuntime.jsx(StyledLabelTextWrapperShadow$1, { "aria-hidden": "true", isNarrow: isNarrow, children: label }), jsxRuntime.jsx(Icon, { sdsIcon: isDropdownOpen ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] })), jsxRuntime.jsx(Menu, __assign({ anchorEl: anchorEl, open: isDropdownOpen, onClose: onClose, slotProps: {
|
|
15264
15262
|
paper: {
|
|
15265
15263
|
style: {
|
|
15266
15264
|
marginTop: (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.app) === null || _a === void 0 ? void 0 : _a.spacing) === null || _b === void 0 ? void 0 : _b.s,
|
|
@@ -15272,7 +15270,7 @@ function NavigationHeaderSecondaryNav(_a) {
|
|
|
15272
15270
|
}, transformOrigin: {
|
|
15273
15271
|
horizontal: "left",
|
|
15274
15272
|
vertical: "top",
|
|
15275
|
-
}, children: (function () {
|
|
15273
|
+
} }, menuProps, { disablePortal: true, children: (function () {
|
|
15276
15274
|
var groupedItems = groupItemsBySection(item.items);
|
|
15277
15275
|
var sections = Object.keys(groupedItems);
|
|
15278
15276
|
var hasMultipleSections = sections.length > 1 ||
|
|
@@ -15288,7 +15286,7 @@ function NavigationHeaderSecondaryNav(_a) {
|
|
|
15288
15286
|
}, sdsType: "action", sx: { minWidth: menuWidth } }, subItemRest, { children: subLabel }), "menu-item-".concat(subLabel)));
|
|
15289
15287
|
})] }, "section-".concat(section || "default")));
|
|
15290
15288
|
});
|
|
15291
|
-
})() })] }, "".concat(itemKey, "-").concat(label, "-dropdown")));
|
|
15289
|
+
})() }))] }, "".concat(itemKey, "-").concat(label, "-dropdown")));
|
|
15292
15290
|
}
|
|
15293
15291
|
if (itemType === "dropdown" && isNarrow) {
|
|
15294
15292
|
return (jsxRuntime.jsxs(StyledAccordion, { id: "".concat(labelKebabCase, "-dropdown"), hasInvertedStyle: hasInvertedStyle, children: [jsxRuntime.jsx(AccordionHeader, { chevronSize: "s", children: label }), jsxRuntime.jsx(AccordionDetails, { children: (function () {
|
|
@@ -15346,12 +15344,15 @@ function ElevationScroll(elevationProps) {
|
|
|
15346
15344
|
var templateObject_1$f;
|
|
15347
15345
|
|
|
15348
15346
|
var NavigationHeader = React.forwardRef(function (props, ref) {
|
|
15349
|
-
var _a = props.activePrimaryNavKey, activePrimaryNavKey = _a === void 0 ? "" : _a, buttons = props.buttons,
|
|
15347
|
+
var _a = props.activePrimaryNavKey, activePrimaryNavKey = _a === void 0 ? "" : _a, buttons = props.buttons, _b = props.menuProps, menuProps = _b === void 0 ? {
|
|
15348
|
+
disableScrollLock: true,
|
|
15349
|
+
disablePortal: true,
|
|
15350
|
+
} : _b, hasInvertedStyle = props.hasInvertedStyle, logo = props.logo, logoUrl = props.logoUrl, _c = props.logoLinkComponent, logoLinkComponent = _c === void 0 ? "a" : _c, logoLinkProps = props.logoLinkProps, _d = props.scrollElevation, scrollElevation = _d === void 0 ? true : _d, primaryNavItems = props.primaryNavItems, _e = props.primaryNavPosition, primaryNavPosition = _e === void 0 ? "left" : _e, searchProps = props.searchProps, secondaryNavItems = props.secondaryNavItems, setActivePrimaryNavKey = props.setActivePrimaryNavKey, _f = props.showSearch, showSearch = _f === void 0 ? true : _f, tag = props.tag, tagColor = props.tagColor, title = props.title, controlledDrawerOpen = props.drawerOpen, onDrawerOpenChange = props.setDrawerOpen, rest = __rest(props, ["activePrimaryNavKey", "buttons", "menuProps", "hasInvertedStyle", "logo", "logoUrl", "logoLinkComponent", "logoLinkProps", "scrollElevation", "primaryNavItems", "primaryNavPosition", "searchProps", "secondaryNavItems", "setActivePrimaryNavKey", "showSearch", "tag", "tagColor", "title", "drawerOpen", "setDrawerOpen"]);
|
|
15350
15351
|
var navRef = React.useRef(null);
|
|
15351
15352
|
var theme = useTheme();
|
|
15352
15353
|
var isMdScreen = material.useMediaQuery(theme.breakpoints.down("md"));
|
|
15353
15354
|
// Use controlled or uncontrolled drawer state
|
|
15354
|
-
var
|
|
15355
|
+
var _g = React.useState(false), internalDrawerOpen = _g[0], setInternalDrawerOpen = _g[1];
|
|
15355
15356
|
var drawerOpen = controlledDrawerOpen !== null && controlledDrawerOpen !== void 0 ? controlledDrawerOpen : internalDrawerOpen;
|
|
15356
15357
|
var setDrawerOpen = function (open) {
|
|
15357
15358
|
var newOpen = typeof open === "function" ? open(drawerOpen) : open;
|
|
@@ -15362,10 +15363,10 @@ var NavigationHeader = React.forwardRef(function (props, ref) {
|
|
|
15362
15363
|
setInternalDrawerOpen(newOpen);
|
|
15363
15364
|
}
|
|
15364
15365
|
};
|
|
15365
|
-
var
|
|
15366
|
+
var _h = React.useState({
|
|
15366
15367
|
breakpoint: 0,
|
|
15367
15368
|
isNarrow: isMdScreen,
|
|
15368
|
-
}), dimensions =
|
|
15369
|
+
}), dimensions = _h[0], setDimensions = _h[1];
|
|
15369
15370
|
React.useEffect(function () {
|
|
15370
15371
|
setDimensions(function (prev) { return (__assign(__assign({}, prev), { isNarrow: isMdScreen })); });
|
|
15371
15372
|
}, [isMdScreen]);
|
|
@@ -15413,11 +15414,11 @@ var NavigationHeader = React.forwardRef(function (props, ref) {
|
|
|
15413
15414
|
var renderPrimaryNav = function () {
|
|
15414
15415
|
return (setActivePrimaryNavKey &&
|
|
15415
15416
|
primaryNavItems &&
|
|
15416
|
-
primaryNavItems.length > 0 && (jsxRuntime.jsx(NavigationHeaderPrimaryNav, { items: primaryNavItems, value: activePrimaryNavKey, onChange: setActivePrimaryNavKey, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow })));
|
|
15417
|
+
primaryNavItems.length > 0 && (jsxRuntime.jsx(NavigationHeaderPrimaryNav, { items: primaryNavItems, value: activePrimaryNavKey, onChange: setActivePrimaryNavKey, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, menuProps: menuProps })));
|
|
15417
15418
|
};
|
|
15418
15419
|
var renderSecondaryNav = function () {
|
|
15419
15420
|
return (secondaryNavItems &&
|
|
15420
|
-
secondaryNavItems.length > 0 && (jsxRuntime.jsx(NavigationHeaderSecondaryNav, { items: secondaryNavItems, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow })));
|
|
15421
|
+
secondaryNavItems.length > 0 && (jsxRuntime.jsx(NavigationHeaderSecondaryNav, { items: secondaryNavItems, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, menuProps: menuProps })));
|
|
15421
15422
|
};
|
|
15422
15423
|
var renderButtonsNode = function () {
|
|
15423
15424
|
if (!buttons || buttons.length === 0)
|
package/dist/index.esm.d.ts
CHANGED
|
@@ -30,6 +30,7 @@ import { ListSubheaderProps as RawListSubheaderProps } from "@mui/material";
|
|
|
30
30
|
import { MenuProps as RawMenuProps } from "@mui/material";
|
|
31
31
|
import { ChipProps as ChipProps$0 } from "@mui/material";
|
|
32
32
|
import { LinkProps as LinkProps$1 } from "@mui/material";
|
|
33
|
+
import { MenuProps as MenuProps$0 } from "@mui/material";
|
|
33
34
|
import { TabProps as RawTabProps } from "@mui/material";
|
|
34
35
|
import { TabsProps as RawTabsProps } from "@mui/material";
|
|
35
36
|
import React from "react";
|
|
@@ -1297,7 +1298,7 @@ interface InputDropdownProps extends CommonThemeProps, Omit<ButtonProps$0, (type
|
|
|
1297
1298
|
value?: ReactNode;
|
|
1298
1299
|
shouldTruncateMinimalDetails?: boolean;
|
|
1299
1300
|
shouldPutAColonAfterLabel?: boolean;
|
|
1300
|
-
width?:
|
|
1301
|
+
width?: string;
|
|
1301
1302
|
className?: string;
|
|
1302
1303
|
// (masoudmanson): This is a temporary fix for the issue where the style prop
|
|
1303
1304
|
// is not correctly passed to the underlying Button component when asserting as
|
|
@@ -1734,6 +1735,7 @@ interface DropdownNavigationHeaderPrimaryNavItem<T extends string> extends BaseN
|
|
|
1734
1735
|
}
|
|
1735
1736
|
type NavigationHeaderPrimaryNavItem<T extends string> = TextNavigationHeaderPrimaryNavItem<T> | DropdownNavigationHeaderPrimaryNavItem<T>;
|
|
1736
1737
|
interface NavigationHeaderPrimaryNavProps<T extends string> {
|
|
1738
|
+
menuProps?: Partial<MenuProps$0>;
|
|
1737
1739
|
hasInvertedStyle?: boolean;
|
|
1738
1740
|
isNarrow?: boolean;
|
|
1739
1741
|
items: NavigationHeaderPrimaryNavItem<T>[];
|
|
@@ -1751,6 +1753,7 @@ interface DropdownHeaderSecondaryNavItem extends Partial<SdsMinimalButtonProps>
|
|
|
1751
1753
|
}
|
|
1752
1754
|
type NavigationHeaderSecondaryNavItem = TextHeaderSecondaryNavItem | DropdownHeaderSecondaryNavItem;
|
|
1753
1755
|
interface NavigationHeaderSecondaryNavProps {
|
|
1756
|
+
menuProps?: Partial<MenuProps$0>;
|
|
1754
1757
|
items: NavigationHeaderSecondaryNavItem[];
|
|
1755
1758
|
hasInvertedStyle?: boolean;
|
|
1756
1759
|
isNarrow?: boolean;
|
|
@@ -1775,6 +1778,7 @@ interface NavigationHeaderProps<T extends string = string> extends AppBarProps {
|
|
|
1775
1778
|
title: string;
|
|
1776
1779
|
drawerOpen?: boolean;
|
|
1777
1780
|
setDrawerOpen?: (open: boolean) => void;
|
|
1781
|
+
menuProps?: Partial<MenuProps$0>;
|
|
1778
1782
|
}
|
|
1779
1783
|
type IconButtonProps = SdsIconButtonProps & {
|
|
1780
1784
|
children?: string;
|
package/dist/index.esm.js
CHANGED
|
@@ -6491,7 +6491,7 @@ var inputDropdownStyles = function (props) {
|
|
|
6491
6491
|
var _m = props.width, width = _m === void 0 ? "auto" : _m;
|
|
6492
6492
|
var spaces = getSpaces(props);
|
|
6493
6493
|
var semanticColors = getSemanticColors(props);
|
|
6494
|
-
return css(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n ", "\n\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n cursor: pointer;\n padding: ", "px ", "px;\n justify-content: start;\n width: ", "
|
|
6494
|
+
return css(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n ", "\n\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n cursor: pointer;\n padding: ", "px ", "px;\n justify-content: start;\n width: ", ";\n min-width: 90px !important;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n ", " {\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n box-shadow: inset 0 0 0 1px ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: transparent;\n box-shadow: inset 0 0 0 1px ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n background-color: transparent;\n outline-offset: -1px;\n }\n "], ["\n ", "\n\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n cursor: pointer;\n padding: ", "px ", "px;\n justify-content: start;\n width: ", ";\n min-width: 90px !important;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n ", " {\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n box-shadow: inset 0 0 0 1px ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: transparent;\n box-shadow: inset 0 0 0 1px ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n background-color: transparent;\n outline-offset: -1px;\n }\n "])), labelStyle(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.m, /^\d+$/.test(width) ? "".concat(width, "px") : width, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, IconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.m, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.ornamentSecondary, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.fillHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.borderPrimaryHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.ornamentSecondaryHover, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.textPrimary, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _j === void 0 ? void 0 : _j.border, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.textPrimary, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.ornamentSecondaryPressed);
|
|
6495
6495
|
};
|
|
6496
6496
|
var minimal$1 = function (props) {
|
|
6497
6497
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
@@ -6598,7 +6598,7 @@ var MinimalDetails = styled$2("div", {
|
|
|
6598
6598
|
});
|
|
6599
6599
|
var LabelWrapper = styled$2("span", {
|
|
6600
6600
|
shouldForwardProp: function (prop) { return !doNotForwardProps$s.includes(prop); },
|
|
6601
|
-
})(templateObject_15$3 || (templateObject_15$3 = __makeTemplateObject(["\n align-items: center;\n display: inline-flex;\n justify-content: space-between;\n width: 100%;\n\n & > div {\n align-items: center;\n display: inline-flex;\n justify-content: start;\n width:
|
|
6601
|
+
})(templateObject_15$3 || (templateObject_15$3 = __makeTemplateObject(["\n align-items: center;\n display: inline-flex;\n justify-content: space-between;\n width: 100%;\n\n & > div {\n align-items: center;\n display: inline-flex;\n justify-content: start;\n width: 100%;\n overflow: hidden;\n }\n"], ["\n align-items: center;\n display: inline-flex;\n justify-content: space-between;\n width: 100%;\n\n & > div {\n align-items: center;\n display: inline-flex;\n justify-content: start;\n width: 100%;\n overflow: hidden;\n }\n"])));
|
|
6602
6602
|
var IconWrapper = styled$2("span", {
|
|
6603
6603
|
shouldForwardProp: function (prop) { return !doNotForwardProps$s.includes(prop); },
|
|
6604
6604
|
})(templateObject_16$2 || (templateObject_16$2 = __makeTemplateObject(["\n margin-left: auto;\n display: flex;\n align-items: center;\n justify-self: end;\n"], ["\n margin-left: auto;\n display: flex;\n align-items: center;\n justify-self: end;\n"])));
|
|
@@ -6656,20 +6656,18 @@ function renderLabelTypeLabelText(_a) {
|
|
|
6656
6656
|
var isMinimal = _a.isMinimal, label = _a.label, counter = _a.counter, value = _a.value, shouldPutAColonAfterLabel = _a.shouldPutAColonAfterLabel;
|
|
6657
6657
|
if (isMinimal)
|
|
6658
6658
|
return label;
|
|
6659
|
-
return (counter || value) && shouldPutAColonAfterLabel ?
|
|
6659
|
+
return (counter || value) && shouldPutAColonAfterLabel ? (jsxs(Fragment, { children: [label, ":"] })) : (label);
|
|
6660
6660
|
}
|
|
6661
6661
|
function renderValueTypeLabelText(_a) {
|
|
6662
6662
|
var value = _a.value, multiple = _a.multiple, isMinimal = _a.isMinimal, label = _a.label, counter = _a.counter, details = _a.details, shouldPutAColonAfterLabel = _a.shouldPutAColonAfterLabel;
|
|
6663
6663
|
if (!value || multiple) {
|
|
6664
6664
|
if (isMinimal)
|
|
6665
6665
|
return label;
|
|
6666
|
-
return !!counter && shouldPutAColonAfterLabel ?
|
|
6666
|
+
return !!counter && shouldPutAColonAfterLabel ? (jsxs(Fragment, { children: [label, ":"] })) : (label);
|
|
6667
6667
|
}
|
|
6668
6668
|
if (isMinimal)
|
|
6669
6669
|
return value;
|
|
6670
|
-
return (!!counter || !!details) && shouldPutAColonAfterLabel
|
|
6671
|
-
? "".concat(value, ":")
|
|
6672
|
-
: value;
|
|
6670
|
+
return (!!counter || !!details) && shouldPutAColonAfterLabel ? (jsxs(Fragment, { children: [value, ":"] })) : (value);
|
|
6673
6671
|
}
|
|
6674
6672
|
function renderDetailsText(_a) {
|
|
6675
6673
|
var details = _a.details, sdsType = _a.sdsType, value = _a.value;
|
|
@@ -15017,7 +15015,7 @@ var StyledSectionHeader = styled$2(ListSubheader, {
|
|
|
15017
15015
|
}
|
|
15018
15016
|
return (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary;
|
|
15019
15017
|
}
|
|
15020
|
-
return css(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n &.MuiListSubheader-root {\n ", "\n top: 0;\n color: ", ";\n background-color: ", ";\n padding: ", "px ", "px;\n margin-bottom: 0;\n }\n "], ["\n &.MuiListSubheader-root {\n ", "\n top: 0;\n color: ", ";\n background-color: ", ";\n padding: ", "px ", "px;\n margin-bottom: 0;\n }\n "])), fontCapsXxxxs(props), getTextColor(), getBackgroundColor(), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, isNarrow ? spaces === null || spaces === void 0 ? void 0 : spaces.xl : spaces === null || spaces === void 0 ? void 0 : spaces.
|
|
15018
|
+
return css(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n &.MuiListSubheader-root {\n ", "\n top: 0;\n color: ", ";\n background-color: ", ";\n padding: ", "px ", "px;\n margin-bottom: 0;\n }\n "], ["\n &.MuiListSubheader-root {\n ", "\n top: 0;\n color: ", ";\n background-color: ", ";\n padding: ", "px ", "px;\n margin-bottom: 0;\n }\n "])), fontCapsXxxxs(props), getTextColor(), getBackgroundColor(), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, isNarrow ? spaces === null || spaces === void 0 ? void 0 : spaces.xl : spaces === null || spaces === void 0 ? void 0 : spaces.xs);
|
|
15021
15019
|
});
|
|
15022
15020
|
var StyledDivider = styled$2(Divider, {
|
|
15023
15021
|
shouldForwardProp: function (prop) { return !doNotForwardProps$6.includes(prop); },
|
|
@@ -15069,7 +15067,7 @@ function groupItemsBySection(items) {
|
|
|
15069
15067
|
}
|
|
15070
15068
|
|
|
15071
15069
|
function NavigationHeaderPrimaryNav(_a) {
|
|
15072
|
-
var hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow, items = _a.items, onChange = _a.onChange, value = _a.value;
|
|
15070
|
+
var menuProps = _a.menuProps, hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow, items = _a.items, onChange = _a.onChange, value = _a.value;
|
|
15073
15071
|
var theme = useTheme$4();
|
|
15074
15072
|
var _b = useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
|
|
15075
15073
|
var _c = useState(null), activeDropdownKey = _c[0], setActiveDropdownKey = _c[1];
|
|
@@ -15099,7 +15097,7 @@ function NavigationHeaderPrimaryNav(_a) {
|
|
|
15099
15097
|
setActiveDropdownKey(key);
|
|
15100
15098
|
onChange(key);
|
|
15101
15099
|
parentOnClick === null || parentOnClick === void 0 ? void 0 : parentOnClick(e);
|
|
15102
|
-
}, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: jsxs(StyledLabel, { itemType: item.itemType, active: isDropdownOpen, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [jsx(StyledLabelTextWrapper$1, { active: isActive, isNarrow: isNarrow, children: label }), jsx(StyledLabelTextWrapperShadow$1, { "aria-hidden": "true", isNarrow: isNarrow, children: label }), jsx(Icon, { sdsIcon: isDropdownOpen ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] }) })), jsx(Menu, { anchorEl: anchorEl, open: isDropdownOpen, onClose: onClose, slotProps: {
|
|
15100
|
+
}, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: jsxs(StyledLabel, { itemType: item.itemType, active: isDropdownOpen, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [jsx(StyledLabelTextWrapper$1, { active: isActive, isNarrow: isNarrow, children: label }), jsx(StyledLabelTextWrapperShadow$1, { "aria-hidden": "true", isNarrow: isNarrow, children: label }), jsx(Icon, { sdsIcon: isDropdownOpen ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] }) })), jsx(Menu, __assign({ anchorEl: anchorEl, open: isDropdownOpen, onClose: onClose, slotProps: {
|
|
15103
15101
|
paper: {
|
|
15104
15102
|
style: {
|
|
15105
15103
|
marginTop: (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.app) === null || _a === void 0 ? void 0 : _a.spacing) === null || _b === void 0 ? void 0 : _b.s,
|
|
@@ -15111,7 +15109,7 @@ function NavigationHeaderPrimaryNav(_a) {
|
|
|
15111
15109
|
}, transformOrigin: {
|
|
15112
15110
|
horizontal: "left",
|
|
15113
15111
|
vertical: "top",
|
|
15114
|
-
}, children: (function () {
|
|
15112
|
+
} }, menuProps, { disablePortal: true, children: (function () {
|
|
15115
15113
|
var groupedItems = groupItemsBySection(dropdownItem_1.items);
|
|
15116
15114
|
var sections = Object.keys(groupedItems);
|
|
15117
15115
|
var hasMultipleSections = sections.length > 1 ||
|
|
@@ -15127,7 +15125,7 @@ function NavigationHeaderPrimaryNav(_a) {
|
|
|
15127
15125
|
}, sdsType: "action", sx: { minWidth: menuWidth } }, subItemRest, { children: subLabel }), "menu-item-".concat(subLabel)));
|
|
15128
15126
|
})] }, "section-".concat(section || "default")));
|
|
15129
15127
|
});
|
|
15130
|
-
})() })] }, key));
|
|
15128
|
+
})() }))] }, key));
|
|
15131
15129
|
}
|
|
15132
15130
|
if (item.itemType === "dropdown" && isNarrow) {
|
|
15133
15131
|
var dropdownItem_2 = item;
|
|
@@ -15207,7 +15205,7 @@ var StyledTextItem = styled$2(Button, {
|
|
|
15207
15205
|
var templateObject_1$g, templateObject_2$8, templateObject_3$4;
|
|
15208
15206
|
|
|
15209
15207
|
function NavigationHeaderSecondaryNav(_a) {
|
|
15210
|
-
var items = _a.items, hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow;
|
|
15208
|
+
var menuProps = _a.menuProps, items = _a.items, hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow;
|
|
15211
15209
|
var _b = useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
|
|
15212
15210
|
var _c = useState(null), activeDropdownKey = _c[0], setActiveDropdownKey = _c[1];
|
|
15213
15211
|
var theme = useTheme$4();
|
|
@@ -15237,7 +15235,7 @@ function NavigationHeaderSecondaryNav(_a) {
|
|
|
15237
15235
|
setAnchorEl(event.currentTarget);
|
|
15238
15236
|
setActiveDropdownKey(itemKey);
|
|
15239
15237
|
(_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, event);
|
|
15240
|
-
}, children: [jsx(StyledLabelTextWrapper$1, { active: isDropdownOpen, isNarrow: isNarrow, children: label }), jsx(StyledLabelTextWrapperShadow$1, { "aria-hidden": "true", isNarrow: isNarrow, children: label }), jsx(Icon, { sdsIcon: isDropdownOpen ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] })), jsx(Menu, { anchorEl: anchorEl, open: isDropdownOpen, onClose: onClose, slotProps: {
|
|
15238
|
+
}, children: [jsx(StyledLabelTextWrapper$1, { active: isDropdownOpen, isNarrow: isNarrow, children: label }), jsx(StyledLabelTextWrapperShadow$1, { "aria-hidden": "true", isNarrow: isNarrow, children: label }), jsx(Icon, { sdsIcon: isDropdownOpen ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] })), jsx(Menu, __assign({ anchorEl: anchorEl, open: isDropdownOpen, onClose: onClose, slotProps: {
|
|
15241
15239
|
paper: {
|
|
15242
15240
|
style: {
|
|
15243
15241
|
marginTop: (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.app) === null || _a === void 0 ? void 0 : _a.spacing) === null || _b === void 0 ? void 0 : _b.s,
|
|
@@ -15249,7 +15247,7 @@ function NavigationHeaderSecondaryNav(_a) {
|
|
|
15249
15247
|
}, transformOrigin: {
|
|
15250
15248
|
horizontal: "left",
|
|
15251
15249
|
vertical: "top",
|
|
15252
|
-
}, children: (function () {
|
|
15250
|
+
} }, menuProps, { disablePortal: true, children: (function () {
|
|
15253
15251
|
var groupedItems = groupItemsBySection(item.items);
|
|
15254
15252
|
var sections = Object.keys(groupedItems);
|
|
15255
15253
|
var hasMultipleSections = sections.length > 1 ||
|
|
@@ -15265,7 +15263,7 @@ function NavigationHeaderSecondaryNav(_a) {
|
|
|
15265
15263
|
}, sdsType: "action", sx: { minWidth: menuWidth } }, subItemRest, { children: subLabel }), "menu-item-".concat(subLabel)));
|
|
15266
15264
|
})] }, "section-".concat(section || "default")));
|
|
15267
15265
|
});
|
|
15268
|
-
})() })] }, "".concat(itemKey, "-").concat(label, "-dropdown")));
|
|
15266
|
+
})() }))] }, "".concat(itemKey, "-").concat(label, "-dropdown")));
|
|
15269
15267
|
}
|
|
15270
15268
|
if (itemType === "dropdown" && isNarrow) {
|
|
15271
15269
|
return (jsxs(StyledAccordion, { id: "".concat(labelKebabCase, "-dropdown"), hasInvertedStyle: hasInvertedStyle, children: [jsx(AccordionHeader, { chevronSize: "s", children: label }), jsx(AccordionDetails, { children: (function () {
|
|
@@ -15323,12 +15321,15 @@ function ElevationScroll(elevationProps) {
|
|
|
15323
15321
|
var templateObject_1$f;
|
|
15324
15322
|
|
|
15325
15323
|
var NavigationHeader = forwardRef(function (props, ref) {
|
|
15326
|
-
var _a = props.activePrimaryNavKey, activePrimaryNavKey = _a === void 0 ? "" : _a, buttons = props.buttons,
|
|
15324
|
+
var _a = props.activePrimaryNavKey, activePrimaryNavKey = _a === void 0 ? "" : _a, buttons = props.buttons, _b = props.menuProps, menuProps = _b === void 0 ? {
|
|
15325
|
+
disableScrollLock: true,
|
|
15326
|
+
disablePortal: true,
|
|
15327
|
+
} : _b, hasInvertedStyle = props.hasInvertedStyle, logo = props.logo, logoUrl = props.logoUrl, _c = props.logoLinkComponent, logoLinkComponent = _c === void 0 ? "a" : _c, logoLinkProps = props.logoLinkProps, _d = props.scrollElevation, scrollElevation = _d === void 0 ? true : _d, primaryNavItems = props.primaryNavItems, _e = props.primaryNavPosition, primaryNavPosition = _e === void 0 ? "left" : _e, searchProps = props.searchProps, secondaryNavItems = props.secondaryNavItems, setActivePrimaryNavKey = props.setActivePrimaryNavKey, _f = props.showSearch, showSearch = _f === void 0 ? true : _f, tag = props.tag, tagColor = props.tagColor, title = props.title, controlledDrawerOpen = props.drawerOpen, onDrawerOpenChange = props.setDrawerOpen, rest = __rest(props, ["activePrimaryNavKey", "buttons", "menuProps", "hasInvertedStyle", "logo", "logoUrl", "logoLinkComponent", "logoLinkProps", "scrollElevation", "primaryNavItems", "primaryNavPosition", "searchProps", "secondaryNavItems", "setActivePrimaryNavKey", "showSearch", "tag", "tagColor", "title", "drawerOpen", "setDrawerOpen"]);
|
|
15327
15328
|
var navRef = useRef(null);
|
|
15328
15329
|
var theme = useTheme();
|
|
15329
15330
|
var isMdScreen = useMediaQuery(theme.breakpoints.down("md"));
|
|
15330
15331
|
// Use controlled or uncontrolled drawer state
|
|
15331
|
-
var
|
|
15332
|
+
var _g = useState(false), internalDrawerOpen = _g[0], setInternalDrawerOpen = _g[1];
|
|
15332
15333
|
var drawerOpen = controlledDrawerOpen !== null && controlledDrawerOpen !== void 0 ? controlledDrawerOpen : internalDrawerOpen;
|
|
15333
15334
|
var setDrawerOpen = function (open) {
|
|
15334
15335
|
var newOpen = typeof open === "function" ? open(drawerOpen) : open;
|
|
@@ -15339,10 +15340,10 @@ var NavigationHeader = forwardRef(function (props, ref) {
|
|
|
15339
15340
|
setInternalDrawerOpen(newOpen);
|
|
15340
15341
|
}
|
|
15341
15342
|
};
|
|
15342
|
-
var
|
|
15343
|
+
var _h = useState({
|
|
15343
15344
|
breakpoint: 0,
|
|
15344
15345
|
isNarrow: isMdScreen,
|
|
15345
|
-
}), dimensions =
|
|
15346
|
+
}), dimensions = _h[0], setDimensions = _h[1];
|
|
15346
15347
|
useEffect(function () {
|
|
15347
15348
|
setDimensions(function (prev) { return (__assign(__assign({}, prev), { isNarrow: isMdScreen })); });
|
|
15348
15349
|
}, [isMdScreen]);
|
|
@@ -15390,11 +15391,11 @@ var NavigationHeader = forwardRef(function (props, ref) {
|
|
|
15390
15391
|
var renderPrimaryNav = function () {
|
|
15391
15392
|
return (setActivePrimaryNavKey &&
|
|
15392
15393
|
primaryNavItems &&
|
|
15393
|
-
primaryNavItems.length > 0 && (jsx(NavigationHeaderPrimaryNav, { items: primaryNavItems, value: activePrimaryNavKey, onChange: setActivePrimaryNavKey, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow })));
|
|
15394
|
+
primaryNavItems.length > 0 && (jsx(NavigationHeaderPrimaryNav, { items: primaryNavItems, value: activePrimaryNavKey, onChange: setActivePrimaryNavKey, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, menuProps: menuProps })));
|
|
15394
15395
|
};
|
|
15395
15396
|
var renderSecondaryNav = function () {
|
|
15396
15397
|
return (secondaryNavItems &&
|
|
15397
|
-
secondaryNavItems.length > 0 && (jsx(NavigationHeaderSecondaryNav, { items: secondaryNavItems, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow })));
|
|
15398
|
+
secondaryNavItems.length > 0 && (jsx(NavigationHeaderSecondaryNav, { items: secondaryNavItems, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, menuProps: menuProps })));
|
|
15398
15399
|
};
|
|
15399
15400
|
var renderButtonsNode = function () {
|
|
15400
15401
|
if (!buttons || buttons.length === 0)
|