@czi-sds/components 22.13.0 → 22.13.2
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 +16 -2
- package/dist/index.cjs.js +27 -25
- package/dist/index.esm.d.ts +16 -2
- package/dist/index.esm.js +27 -25
- 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
|
|
@@ -1506,12 +1507,22 @@ interface RadioExtraProps extends CommonThemeProps {
|
|
|
1506
1507
|
disabled?: boolean;
|
|
1507
1508
|
}
|
|
1508
1509
|
interface RadioContentProps extends Omit<MUIRadioProps, "color" | "defaultChecked"> {
|
|
1509
|
-
caption?:
|
|
1510
|
+
caption?: React.ReactNode;
|
|
1510
1511
|
intent?: "default" | "negative" | "notice" | "positive";
|
|
1511
1512
|
label?: React.ReactNode;
|
|
1512
1513
|
radioProps?: Partial<MUIRadioProps>;
|
|
1513
1514
|
stage?: "checked" | "unchecked";
|
|
1514
1515
|
value?: string;
|
|
1516
|
+
classes?: {
|
|
1517
|
+
root?: string;
|
|
1518
|
+
labelCaptionContainer?: string;
|
|
1519
|
+
label?: string;
|
|
1520
|
+
caption?: string;
|
|
1521
|
+
radioButton?: string;
|
|
1522
|
+
radioCheckedIcon?: string;
|
|
1523
|
+
radioCheckedIconDot?: string;
|
|
1524
|
+
radioDefaultIcon?: string;
|
|
1525
|
+
};
|
|
1515
1526
|
}
|
|
1516
1527
|
type RadioProps = RadioContentProps & RadioExtraProps;
|
|
1517
1528
|
/**
|
|
@@ -1734,6 +1745,7 @@ interface DropdownNavigationHeaderPrimaryNavItem<T extends string> extends BaseN
|
|
|
1734
1745
|
}
|
|
1735
1746
|
type NavigationHeaderPrimaryNavItem<T extends string> = TextNavigationHeaderPrimaryNavItem<T> | DropdownNavigationHeaderPrimaryNavItem<T>;
|
|
1736
1747
|
interface NavigationHeaderPrimaryNavProps<T extends string> {
|
|
1748
|
+
menuProps?: Partial<MenuProps$0>;
|
|
1737
1749
|
hasInvertedStyle?: boolean;
|
|
1738
1750
|
isNarrow?: boolean;
|
|
1739
1751
|
items: NavigationHeaderPrimaryNavItem<T>[];
|
|
@@ -1751,6 +1763,7 @@ interface DropdownHeaderSecondaryNavItem extends Partial<SdsMinimalButtonProps>
|
|
|
1751
1763
|
}
|
|
1752
1764
|
type NavigationHeaderSecondaryNavItem = TextHeaderSecondaryNavItem | DropdownHeaderSecondaryNavItem;
|
|
1753
1765
|
interface NavigationHeaderSecondaryNavProps {
|
|
1766
|
+
menuProps?: Partial<MenuProps$0>;
|
|
1754
1767
|
items: NavigationHeaderSecondaryNavItem[];
|
|
1755
1768
|
hasInvertedStyle?: boolean;
|
|
1756
1769
|
isNarrow?: boolean;
|
|
@@ -1775,6 +1788,7 @@ interface NavigationHeaderProps<T extends string = string> extends AppBarProps {
|
|
|
1775
1788
|
title: string;
|
|
1776
1789
|
drawerOpen?: boolean;
|
|
1777
1790
|
setDrawerOpen?: (open: boolean) => void;
|
|
1791
|
+
menuProps?: Partial<MenuProps$0>;
|
|
1778
1792
|
}
|
|
1779
1793
|
type IconButtonProps = SdsIconButtonProps & {
|
|
1780
1794
|
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;
|
|
@@ -8006,10 +8004,11 @@ var templateObject_1$x, templateObject_2$k, templateObject_3$f, templateObject_4
|
|
|
8006
8004
|
* @see https://mui.com/material-ui/react-radio-button/
|
|
8007
8005
|
*/
|
|
8008
8006
|
var InputRadio = function (props) {
|
|
8009
|
-
var caption = props.caption, disabled = props.disabled, _a = props.intent, intent = _a === void 0 ? "default" : _a, radioProps = props.radioProps, stage = props.stage, value = props.value;
|
|
8007
|
+
var caption = props.caption, disabled = props.disabled, _a = props.intent, intent = _a === void 0 ? "default" : _a, radioProps = props.radioProps, stage = props.stage, value = props.value, _b = props.classes, classes = _b === void 0 ? EMPTY_OBJECT : _b;
|
|
8010
8008
|
// (masoudmanson): We don't need to pass the label prop to the radio component
|
|
8011
8009
|
// so we are destructuring it here.
|
|
8012
8010
|
var label = props.label, restProps = __rest(props, ["label"]);
|
|
8011
|
+
var root = classes.root, labelCaptionContainer = classes.labelCaptionContainer, labelClassName = classes.label, captionClassName = classes.caption, radioButtonClassName = classes.radioButton, radioCheckedIconClassName = classes.radioCheckedIcon, radioCheckedIconDotClassName = classes.radioCheckedIconDot, radioDefaultIconClassName = classes.radioDefaultIcon;
|
|
8013
8012
|
var newProps;
|
|
8014
8013
|
switch (stage) {
|
|
8015
8014
|
case "checked":
|
|
@@ -8025,8 +8024,8 @@ var InputRadio = function (props) {
|
|
|
8025
8024
|
// Otherwise, the screen reader will read the label twice!
|
|
8026
8025
|
var labelId = "".concat(value, "-label");
|
|
8027
8026
|
var captionId = caption ? "".concat(value, "-caption") : undefined;
|
|
8028
|
-
var finalLabel = caption ? (jsxRuntime.jsxs(StyledLabelContainer, { children: [jsxRuntime.jsx(StyledRadioLabel, { id: labelId, children: label }), jsxRuntime.jsx(StyledRadioCaption, { id: captionId, children: caption })] })) : (jsxRuntime.jsx(StyledLabelContainer, { children: jsxRuntime.jsx(StyledRadioLabel, { id: labelId, children: label }) }));
|
|
8029
|
-
return (jsxRuntime.jsx(StyledFormControlLabel, { control: jsxRuntime.jsx(StyledRadioButton, __assign({ checkedIcon: jsxRuntime.jsx(StyledRadioCheckedIcon, { children: jsxRuntime.jsx(StyledRadioDot, {}) }), icon: jsxRuntime.jsx(StyledRadioDefaultIcon, { intent: intent }), intent: intent }, radioProps, newProps)), disabled: disabled, label: finalLabel, value: value }));
|
|
8027
|
+
var finalLabel = caption ? (jsxRuntime.jsxs(StyledLabelContainer, { className: labelCaptionContainer, children: [jsxRuntime.jsx(StyledRadioLabel, { id: labelId, className: labelClassName, children: label }), jsxRuntime.jsx(StyledRadioCaption, { id: captionId, className: captionClassName, children: caption })] })) : (jsxRuntime.jsx(StyledLabelContainer, { className: labelCaptionContainer, children: jsxRuntime.jsx(StyledRadioLabel, { id: labelId, className: labelClassName, children: label }) }));
|
|
8028
|
+
return (jsxRuntime.jsx(StyledFormControlLabel, { control: jsxRuntime.jsx(StyledRadioButton, __assign({ className: radioButtonClassName, checkedIcon: jsxRuntime.jsx(StyledRadioCheckedIcon, { className: radioCheckedIconClassName, children: jsxRuntime.jsx(StyledRadioDot, { className: radioCheckedIconDotClassName }) }), icon: jsxRuntime.jsx(StyledRadioDefaultIcon, { intent: intent, className: radioDefaultIconClassName }), intent: intent }, radioProps, newProps)), disabled: disabled, label: finalLabel, value: value, className: root }));
|
|
8030
8029
|
};
|
|
8031
8030
|
|
|
8032
8031
|
var inputSlider = function (props) {
|
|
@@ -15040,7 +15039,7 @@ var StyledSectionHeader = styled__default.default(ListSubheader, {
|
|
|
15040
15039
|
}
|
|
15041
15040
|
return (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary;
|
|
15042
15041
|
}
|
|
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.
|
|
15042
|
+
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
15043
|
});
|
|
15045
15044
|
var StyledDivider = styled__default.default(material.Divider, {
|
|
15046
15045
|
shouldForwardProp: function (prop) { return !doNotForwardProps$6.includes(prop); },
|
|
@@ -15092,7 +15091,7 @@ function groupItemsBySection(items) {
|
|
|
15092
15091
|
}
|
|
15093
15092
|
|
|
15094
15093
|
function NavigationHeaderPrimaryNav(_a) {
|
|
15095
|
-
var hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow, items = _a.items, onChange = _a.onChange, value = _a.value;
|
|
15094
|
+
var menuProps = _a.menuProps, hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow, items = _a.items, onChange = _a.onChange, value = _a.value;
|
|
15096
15095
|
var theme = material.useTheme();
|
|
15097
15096
|
var _b = React.useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
|
|
15098
15097
|
var _c = React.useState(null), activeDropdownKey = _c[0], setActiveDropdownKey = _c[1];
|
|
@@ -15122,7 +15121,7 @@ function NavigationHeaderPrimaryNav(_a) {
|
|
|
15122
15121
|
setActiveDropdownKey(key);
|
|
15123
15122
|
onChange(key);
|
|
15124
15123
|
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: {
|
|
15124
|
+
}, 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
15125
|
paper: {
|
|
15127
15126
|
style: {
|
|
15128
15127
|
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 +15133,7 @@ function NavigationHeaderPrimaryNav(_a) {
|
|
|
15134
15133
|
}, transformOrigin: {
|
|
15135
15134
|
horizontal: "left",
|
|
15136
15135
|
vertical: "top",
|
|
15137
|
-
}, children: (function () {
|
|
15136
|
+
} }, menuProps, { disablePortal: true, children: (function () {
|
|
15138
15137
|
var groupedItems = groupItemsBySection(dropdownItem_1.items);
|
|
15139
15138
|
var sections = Object.keys(groupedItems);
|
|
15140
15139
|
var hasMultipleSections = sections.length > 1 ||
|
|
@@ -15150,7 +15149,7 @@ function NavigationHeaderPrimaryNav(_a) {
|
|
|
15150
15149
|
}, sdsType: "action", sx: { minWidth: menuWidth } }, subItemRest, { children: subLabel }), "menu-item-".concat(subLabel)));
|
|
15151
15150
|
})] }, "section-".concat(section || "default")));
|
|
15152
15151
|
});
|
|
15153
|
-
})() })] }, key));
|
|
15152
|
+
})() }))] }, key));
|
|
15154
15153
|
}
|
|
15155
15154
|
if (item.itemType === "dropdown" && isNarrow) {
|
|
15156
15155
|
var dropdownItem_2 = item;
|
|
@@ -15230,7 +15229,7 @@ var StyledTextItem = styled__default.default(Button, {
|
|
|
15230
15229
|
var templateObject_1$g, templateObject_2$8, templateObject_3$4;
|
|
15231
15230
|
|
|
15232
15231
|
function NavigationHeaderSecondaryNav(_a) {
|
|
15233
|
-
var items = _a.items, hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow;
|
|
15232
|
+
var menuProps = _a.menuProps, items = _a.items, hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow;
|
|
15234
15233
|
var _b = React.useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
|
|
15235
15234
|
var _c = React.useState(null), activeDropdownKey = _c[0], setActiveDropdownKey = _c[1];
|
|
15236
15235
|
var theme = material.useTheme();
|
|
@@ -15260,7 +15259,7 @@ function NavigationHeaderSecondaryNav(_a) {
|
|
|
15260
15259
|
setAnchorEl(event.currentTarget);
|
|
15261
15260
|
setActiveDropdownKey(itemKey);
|
|
15262
15261
|
(_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: {
|
|
15262
|
+
}, 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
15263
|
paper: {
|
|
15265
15264
|
style: {
|
|
15266
15265
|
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 +15271,7 @@ function NavigationHeaderSecondaryNav(_a) {
|
|
|
15272
15271
|
}, transformOrigin: {
|
|
15273
15272
|
horizontal: "left",
|
|
15274
15273
|
vertical: "top",
|
|
15275
|
-
}, children: (function () {
|
|
15274
|
+
} }, menuProps, { disablePortal: true, children: (function () {
|
|
15276
15275
|
var groupedItems = groupItemsBySection(item.items);
|
|
15277
15276
|
var sections = Object.keys(groupedItems);
|
|
15278
15277
|
var hasMultipleSections = sections.length > 1 ||
|
|
@@ -15288,7 +15287,7 @@ function NavigationHeaderSecondaryNav(_a) {
|
|
|
15288
15287
|
}, sdsType: "action", sx: { minWidth: menuWidth } }, subItemRest, { children: subLabel }), "menu-item-".concat(subLabel)));
|
|
15289
15288
|
})] }, "section-".concat(section || "default")));
|
|
15290
15289
|
});
|
|
15291
|
-
})() })] }, "".concat(itemKey, "-").concat(label, "-dropdown")));
|
|
15290
|
+
})() }))] }, "".concat(itemKey, "-").concat(label, "-dropdown")));
|
|
15292
15291
|
}
|
|
15293
15292
|
if (itemType === "dropdown" && isNarrow) {
|
|
15294
15293
|
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 +15345,15 @@ function ElevationScroll(elevationProps) {
|
|
|
15346
15345
|
var templateObject_1$f;
|
|
15347
15346
|
|
|
15348
15347
|
var NavigationHeader = React.forwardRef(function (props, ref) {
|
|
15349
|
-
var _a = props.activePrimaryNavKey, activePrimaryNavKey = _a === void 0 ? "" : _a, buttons = props.buttons,
|
|
15348
|
+
var _a = props.activePrimaryNavKey, activePrimaryNavKey = _a === void 0 ? "" : _a, buttons = props.buttons, _b = props.menuProps, menuProps = _b === void 0 ? {
|
|
15349
|
+
disableScrollLock: true,
|
|
15350
|
+
disablePortal: true,
|
|
15351
|
+
} : _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
15352
|
var navRef = React.useRef(null);
|
|
15351
15353
|
var theme = useTheme();
|
|
15352
15354
|
var isMdScreen = material.useMediaQuery(theme.breakpoints.down("md"));
|
|
15353
15355
|
// Use controlled or uncontrolled drawer state
|
|
15354
|
-
var
|
|
15356
|
+
var _g = React.useState(false), internalDrawerOpen = _g[0], setInternalDrawerOpen = _g[1];
|
|
15355
15357
|
var drawerOpen = controlledDrawerOpen !== null && controlledDrawerOpen !== void 0 ? controlledDrawerOpen : internalDrawerOpen;
|
|
15356
15358
|
var setDrawerOpen = function (open) {
|
|
15357
15359
|
var newOpen = typeof open === "function" ? open(drawerOpen) : open;
|
|
@@ -15362,10 +15364,10 @@ var NavigationHeader = React.forwardRef(function (props, ref) {
|
|
|
15362
15364
|
setInternalDrawerOpen(newOpen);
|
|
15363
15365
|
}
|
|
15364
15366
|
};
|
|
15365
|
-
var
|
|
15367
|
+
var _h = React.useState({
|
|
15366
15368
|
breakpoint: 0,
|
|
15367
15369
|
isNarrow: isMdScreen,
|
|
15368
|
-
}), dimensions =
|
|
15370
|
+
}), dimensions = _h[0], setDimensions = _h[1];
|
|
15369
15371
|
React.useEffect(function () {
|
|
15370
15372
|
setDimensions(function (prev) { return (__assign(__assign({}, prev), { isNarrow: isMdScreen })); });
|
|
15371
15373
|
}, [isMdScreen]);
|
|
@@ -15413,11 +15415,11 @@ var NavigationHeader = React.forwardRef(function (props, ref) {
|
|
|
15413
15415
|
var renderPrimaryNav = function () {
|
|
15414
15416
|
return (setActivePrimaryNavKey &&
|
|
15415
15417
|
primaryNavItems &&
|
|
15416
|
-
primaryNavItems.length > 0 && (jsxRuntime.jsx(NavigationHeaderPrimaryNav, { items: primaryNavItems, value: activePrimaryNavKey, onChange: setActivePrimaryNavKey, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow })));
|
|
15418
|
+
primaryNavItems.length > 0 && (jsxRuntime.jsx(NavigationHeaderPrimaryNav, { items: primaryNavItems, value: activePrimaryNavKey, onChange: setActivePrimaryNavKey, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, menuProps: menuProps })));
|
|
15417
15419
|
};
|
|
15418
15420
|
var renderSecondaryNav = function () {
|
|
15419
15421
|
return (secondaryNavItems &&
|
|
15420
|
-
secondaryNavItems.length > 0 && (jsxRuntime.jsx(NavigationHeaderSecondaryNav, { items: secondaryNavItems, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow })));
|
|
15422
|
+
secondaryNavItems.length > 0 && (jsxRuntime.jsx(NavigationHeaderSecondaryNav, { items: secondaryNavItems, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, menuProps: menuProps })));
|
|
15421
15423
|
};
|
|
15422
15424
|
var renderButtonsNode = function () {
|
|
15423
15425
|
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
|
|
@@ -1506,12 +1507,22 @@ interface RadioExtraProps extends CommonThemeProps {
|
|
|
1506
1507
|
disabled?: boolean;
|
|
1507
1508
|
}
|
|
1508
1509
|
interface RadioContentProps extends Omit<MUIRadioProps, "color" | "defaultChecked"> {
|
|
1509
|
-
caption?:
|
|
1510
|
+
caption?: React.ReactNode;
|
|
1510
1511
|
intent?: "default" | "negative" | "notice" | "positive";
|
|
1511
1512
|
label?: React.ReactNode;
|
|
1512
1513
|
radioProps?: Partial<MUIRadioProps>;
|
|
1513
1514
|
stage?: "checked" | "unchecked";
|
|
1514
1515
|
value?: string;
|
|
1516
|
+
classes?: {
|
|
1517
|
+
root?: string;
|
|
1518
|
+
labelCaptionContainer?: string;
|
|
1519
|
+
label?: string;
|
|
1520
|
+
caption?: string;
|
|
1521
|
+
radioButton?: string;
|
|
1522
|
+
radioCheckedIcon?: string;
|
|
1523
|
+
radioCheckedIconDot?: string;
|
|
1524
|
+
radioDefaultIcon?: string;
|
|
1525
|
+
};
|
|
1515
1526
|
}
|
|
1516
1527
|
type RadioProps = RadioContentProps & RadioExtraProps;
|
|
1517
1528
|
/**
|
|
@@ -1734,6 +1745,7 @@ interface DropdownNavigationHeaderPrimaryNavItem<T extends string> extends BaseN
|
|
|
1734
1745
|
}
|
|
1735
1746
|
type NavigationHeaderPrimaryNavItem<T extends string> = TextNavigationHeaderPrimaryNavItem<T> | DropdownNavigationHeaderPrimaryNavItem<T>;
|
|
1736
1747
|
interface NavigationHeaderPrimaryNavProps<T extends string> {
|
|
1748
|
+
menuProps?: Partial<MenuProps$0>;
|
|
1737
1749
|
hasInvertedStyle?: boolean;
|
|
1738
1750
|
isNarrow?: boolean;
|
|
1739
1751
|
items: NavigationHeaderPrimaryNavItem<T>[];
|
|
@@ -1751,6 +1763,7 @@ interface DropdownHeaderSecondaryNavItem extends Partial<SdsMinimalButtonProps>
|
|
|
1751
1763
|
}
|
|
1752
1764
|
type NavigationHeaderSecondaryNavItem = TextHeaderSecondaryNavItem | DropdownHeaderSecondaryNavItem;
|
|
1753
1765
|
interface NavigationHeaderSecondaryNavProps {
|
|
1766
|
+
menuProps?: Partial<MenuProps$0>;
|
|
1754
1767
|
items: NavigationHeaderSecondaryNavItem[];
|
|
1755
1768
|
hasInvertedStyle?: boolean;
|
|
1756
1769
|
isNarrow?: boolean;
|
|
@@ -1775,6 +1788,7 @@ interface NavigationHeaderProps<T extends string = string> extends AppBarProps {
|
|
|
1775
1788
|
title: string;
|
|
1776
1789
|
drawerOpen?: boolean;
|
|
1777
1790
|
setDrawerOpen?: (open: boolean) => void;
|
|
1791
|
+
menuProps?: Partial<MenuProps$0>;
|
|
1778
1792
|
}
|
|
1779
1793
|
type IconButtonProps = SdsIconButtonProps & {
|
|
1780
1794
|
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;
|
|
@@ -7983,10 +7981,11 @@ var templateObject_1$x, templateObject_2$k, templateObject_3$f, templateObject_4
|
|
|
7983
7981
|
* @see https://mui.com/material-ui/react-radio-button/
|
|
7984
7982
|
*/
|
|
7985
7983
|
var InputRadio = function (props) {
|
|
7986
|
-
var caption = props.caption, disabled = props.disabled, _a = props.intent, intent = _a === void 0 ? "default" : _a, radioProps = props.radioProps, stage = props.stage, value = props.value;
|
|
7984
|
+
var caption = props.caption, disabled = props.disabled, _a = props.intent, intent = _a === void 0 ? "default" : _a, radioProps = props.radioProps, stage = props.stage, value = props.value, _b = props.classes, classes = _b === void 0 ? EMPTY_OBJECT : _b;
|
|
7987
7985
|
// (masoudmanson): We don't need to pass the label prop to the radio component
|
|
7988
7986
|
// so we are destructuring it here.
|
|
7989
7987
|
var label = props.label, restProps = __rest(props, ["label"]);
|
|
7988
|
+
var root = classes.root, labelCaptionContainer = classes.labelCaptionContainer, labelClassName = classes.label, captionClassName = classes.caption, radioButtonClassName = classes.radioButton, radioCheckedIconClassName = classes.radioCheckedIcon, radioCheckedIconDotClassName = classes.radioCheckedIconDot, radioDefaultIconClassName = classes.radioDefaultIcon;
|
|
7990
7989
|
var newProps;
|
|
7991
7990
|
switch (stage) {
|
|
7992
7991
|
case "checked":
|
|
@@ -8002,8 +8001,8 @@ var InputRadio = function (props) {
|
|
|
8002
8001
|
// Otherwise, the screen reader will read the label twice!
|
|
8003
8002
|
var labelId = "".concat(value, "-label");
|
|
8004
8003
|
var captionId = caption ? "".concat(value, "-caption") : undefined;
|
|
8005
|
-
var finalLabel = caption ? (jsxs(StyledLabelContainer, { children: [jsx(StyledRadioLabel, { id: labelId, children: label }), jsx(StyledRadioCaption, { id: captionId, children: caption })] })) : (jsx(StyledLabelContainer, { children: jsx(StyledRadioLabel, { id: labelId, children: label }) }));
|
|
8006
|
-
return (jsx(StyledFormControlLabel, { control: jsx(StyledRadioButton, __assign({ checkedIcon: jsx(StyledRadioCheckedIcon, { children: jsx(StyledRadioDot, {}) }), icon: jsx(StyledRadioDefaultIcon, { intent: intent }), intent: intent }, radioProps, newProps)), disabled: disabled, label: finalLabel, value: value }));
|
|
8004
|
+
var finalLabel = caption ? (jsxs(StyledLabelContainer, { className: labelCaptionContainer, children: [jsx(StyledRadioLabel, { id: labelId, className: labelClassName, children: label }), jsx(StyledRadioCaption, { id: captionId, className: captionClassName, children: caption })] })) : (jsx(StyledLabelContainer, { className: labelCaptionContainer, children: jsx(StyledRadioLabel, { id: labelId, className: labelClassName, children: label }) }));
|
|
8005
|
+
return (jsx(StyledFormControlLabel, { control: jsx(StyledRadioButton, __assign({ className: radioButtonClassName, checkedIcon: jsx(StyledRadioCheckedIcon, { className: radioCheckedIconClassName, children: jsx(StyledRadioDot, { className: radioCheckedIconDotClassName }) }), icon: jsx(StyledRadioDefaultIcon, { intent: intent, className: radioDefaultIconClassName }), intent: intent }, radioProps, newProps)), disabled: disabled, label: finalLabel, value: value, className: root }));
|
|
8007
8006
|
};
|
|
8008
8007
|
|
|
8009
8008
|
var inputSlider = function (props) {
|
|
@@ -15017,7 +15016,7 @@ var StyledSectionHeader = styled$2(ListSubheader, {
|
|
|
15017
15016
|
}
|
|
15018
15017
|
return (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary;
|
|
15019
15018
|
}
|
|
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.
|
|
15019
|
+
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
15020
|
});
|
|
15022
15021
|
var StyledDivider = styled$2(Divider, {
|
|
15023
15022
|
shouldForwardProp: function (prop) { return !doNotForwardProps$6.includes(prop); },
|
|
@@ -15069,7 +15068,7 @@ function groupItemsBySection(items) {
|
|
|
15069
15068
|
}
|
|
15070
15069
|
|
|
15071
15070
|
function NavigationHeaderPrimaryNav(_a) {
|
|
15072
|
-
var hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow, items = _a.items, onChange = _a.onChange, value = _a.value;
|
|
15071
|
+
var menuProps = _a.menuProps, hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow, items = _a.items, onChange = _a.onChange, value = _a.value;
|
|
15073
15072
|
var theme = useTheme$4();
|
|
15074
15073
|
var _b = useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
|
|
15075
15074
|
var _c = useState(null), activeDropdownKey = _c[0], setActiveDropdownKey = _c[1];
|
|
@@ -15099,7 +15098,7 @@ function NavigationHeaderPrimaryNav(_a) {
|
|
|
15099
15098
|
setActiveDropdownKey(key);
|
|
15100
15099
|
onChange(key);
|
|
15101
15100
|
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: {
|
|
15101
|
+
}, 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
15102
|
paper: {
|
|
15104
15103
|
style: {
|
|
15105
15104
|
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 +15110,7 @@ function NavigationHeaderPrimaryNav(_a) {
|
|
|
15111
15110
|
}, transformOrigin: {
|
|
15112
15111
|
horizontal: "left",
|
|
15113
15112
|
vertical: "top",
|
|
15114
|
-
}, children: (function () {
|
|
15113
|
+
} }, menuProps, { disablePortal: true, children: (function () {
|
|
15115
15114
|
var groupedItems = groupItemsBySection(dropdownItem_1.items);
|
|
15116
15115
|
var sections = Object.keys(groupedItems);
|
|
15117
15116
|
var hasMultipleSections = sections.length > 1 ||
|
|
@@ -15127,7 +15126,7 @@ function NavigationHeaderPrimaryNav(_a) {
|
|
|
15127
15126
|
}, sdsType: "action", sx: { minWidth: menuWidth } }, subItemRest, { children: subLabel }), "menu-item-".concat(subLabel)));
|
|
15128
15127
|
})] }, "section-".concat(section || "default")));
|
|
15129
15128
|
});
|
|
15130
|
-
})() })] }, key));
|
|
15129
|
+
})() }))] }, key));
|
|
15131
15130
|
}
|
|
15132
15131
|
if (item.itemType === "dropdown" && isNarrow) {
|
|
15133
15132
|
var dropdownItem_2 = item;
|
|
@@ -15207,7 +15206,7 @@ var StyledTextItem = styled$2(Button, {
|
|
|
15207
15206
|
var templateObject_1$g, templateObject_2$8, templateObject_3$4;
|
|
15208
15207
|
|
|
15209
15208
|
function NavigationHeaderSecondaryNav(_a) {
|
|
15210
|
-
var items = _a.items, hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow;
|
|
15209
|
+
var menuProps = _a.menuProps, items = _a.items, hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow;
|
|
15211
15210
|
var _b = useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
|
|
15212
15211
|
var _c = useState(null), activeDropdownKey = _c[0], setActiveDropdownKey = _c[1];
|
|
15213
15212
|
var theme = useTheme$4();
|
|
@@ -15237,7 +15236,7 @@ function NavigationHeaderSecondaryNav(_a) {
|
|
|
15237
15236
|
setAnchorEl(event.currentTarget);
|
|
15238
15237
|
setActiveDropdownKey(itemKey);
|
|
15239
15238
|
(_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: {
|
|
15239
|
+
}, 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
15240
|
paper: {
|
|
15242
15241
|
style: {
|
|
15243
15242
|
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 +15248,7 @@ function NavigationHeaderSecondaryNav(_a) {
|
|
|
15249
15248
|
}, transformOrigin: {
|
|
15250
15249
|
horizontal: "left",
|
|
15251
15250
|
vertical: "top",
|
|
15252
|
-
}, children: (function () {
|
|
15251
|
+
} }, menuProps, { disablePortal: true, children: (function () {
|
|
15253
15252
|
var groupedItems = groupItemsBySection(item.items);
|
|
15254
15253
|
var sections = Object.keys(groupedItems);
|
|
15255
15254
|
var hasMultipleSections = sections.length > 1 ||
|
|
@@ -15265,7 +15264,7 @@ function NavigationHeaderSecondaryNav(_a) {
|
|
|
15265
15264
|
}, sdsType: "action", sx: { minWidth: menuWidth } }, subItemRest, { children: subLabel }), "menu-item-".concat(subLabel)));
|
|
15266
15265
|
})] }, "section-".concat(section || "default")));
|
|
15267
15266
|
});
|
|
15268
|
-
})() })] }, "".concat(itemKey, "-").concat(label, "-dropdown")));
|
|
15267
|
+
})() }))] }, "".concat(itemKey, "-").concat(label, "-dropdown")));
|
|
15269
15268
|
}
|
|
15270
15269
|
if (itemType === "dropdown" && isNarrow) {
|
|
15271
15270
|
return (jsxs(StyledAccordion, { id: "".concat(labelKebabCase, "-dropdown"), hasInvertedStyle: hasInvertedStyle, children: [jsx(AccordionHeader, { chevronSize: "s", children: label }), jsx(AccordionDetails, { children: (function () {
|
|
@@ -15323,12 +15322,15 @@ function ElevationScroll(elevationProps) {
|
|
|
15323
15322
|
var templateObject_1$f;
|
|
15324
15323
|
|
|
15325
15324
|
var NavigationHeader = forwardRef(function (props, ref) {
|
|
15326
|
-
var _a = props.activePrimaryNavKey, activePrimaryNavKey = _a === void 0 ? "" : _a, buttons = props.buttons,
|
|
15325
|
+
var _a = props.activePrimaryNavKey, activePrimaryNavKey = _a === void 0 ? "" : _a, buttons = props.buttons, _b = props.menuProps, menuProps = _b === void 0 ? {
|
|
15326
|
+
disableScrollLock: true,
|
|
15327
|
+
disablePortal: true,
|
|
15328
|
+
} : _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
15329
|
var navRef = useRef(null);
|
|
15328
15330
|
var theme = useTheme();
|
|
15329
15331
|
var isMdScreen = useMediaQuery(theme.breakpoints.down("md"));
|
|
15330
15332
|
// Use controlled or uncontrolled drawer state
|
|
15331
|
-
var
|
|
15333
|
+
var _g = useState(false), internalDrawerOpen = _g[0], setInternalDrawerOpen = _g[1];
|
|
15332
15334
|
var drawerOpen = controlledDrawerOpen !== null && controlledDrawerOpen !== void 0 ? controlledDrawerOpen : internalDrawerOpen;
|
|
15333
15335
|
var setDrawerOpen = function (open) {
|
|
15334
15336
|
var newOpen = typeof open === "function" ? open(drawerOpen) : open;
|
|
@@ -15339,10 +15341,10 @@ var NavigationHeader = forwardRef(function (props, ref) {
|
|
|
15339
15341
|
setInternalDrawerOpen(newOpen);
|
|
15340
15342
|
}
|
|
15341
15343
|
};
|
|
15342
|
-
var
|
|
15344
|
+
var _h = useState({
|
|
15343
15345
|
breakpoint: 0,
|
|
15344
15346
|
isNarrow: isMdScreen,
|
|
15345
|
-
}), dimensions =
|
|
15347
|
+
}), dimensions = _h[0], setDimensions = _h[1];
|
|
15346
15348
|
useEffect(function () {
|
|
15347
15349
|
setDimensions(function (prev) { return (__assign(__assign({}, prev), { isNarrow: isMdScreen })); });
|
|
15348
15350
|
}, [isMdScreen]);
|
|
@@ -15390,11 +15392,11 @@ var NavigationHeader = forwardRef(function (props, ref) {
|
|
|
15390
15392
|
var renderPrimaryNav = function () {
|
|
15391
15393
|
return (setActivePrimaryNavKey &&
|
|
15392
15394
|
primaryNavItems &&
|
|
15393
|
-
primaryNavItems.length > 0 && (jsx(NavigationHeaderPrimaryNav, { items: primaryNavItems, value: activePrimaryNavKey, onChange: setActivePrimaryNavKey, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow })));
|
|
15395
|
+
primaryNavItems.length > 0 && (jsx(NavigationHeaderPrimaryNav, { items: primaryNavItems, value: activePrimaryNavKey, onChange: setActivePrimaryNavKey, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, menuProps: menuProps })));
|
|
15394
15396
|
};
|
|
15395
15397
|
var renderSecondaryNav = function () {
|
|
15396
15398
|
return (secondaryNavItems &&
|
|
15397
|
-
secondaryNavItems.length > 0 && (jsx(NavigationHeaderSecondaryNav, { items: secondaryNavItems, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow })));
|
|
15399
|
+
secondaryNavItems.length > 0 && (jsx(NavigationHeaderSecondaryNav, { items: secondaryNavItems, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, menuProps: menuProps })));
|
|
15398
15400
|
};
|
|
15399
15401
|
var renderButtonsNode = function () {
|
|
15400
15402
|
if (!buttons || buttons.length === 0)
|