@czi-sds/components 22.5.2 → 22.5.4
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 +4 -0
- package/dist/index.cjs.js +35 -39
- package/dist/index.esm.d.ts +4 -0
- package/dist/index.esm.js +35 -39
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
package/dist/index.cjs.d.ts
CHANGED
|
@@ -1135,6 +1135,8 @@ interface InputDropdownProps extends CommonThemeProps, Omit<ButtonProps$0, (type
|
|
|
1135
1135
|
value?: ReactNode;
|
|
1136
1136
|
shouldTruncateMinimalDetails?: boolean;
|
|
1137
1137
|
shouldPutAColonAfterLabel?: boolean;
|
|
1138
|
+
width?: number;
|
|
1139
|
+
className?: string;
|
|
1138
1140
|
// (masoudmanson): This is a temporary fix for the issue where the style prop
|
|
1139
1141
|
// is not correctly passed to the underlying Button component when asserting as
|
|
1140
1142
|
// a React.ComponentType<InputDropdownProps>. This is a workaround until a more
|
|
@@ -1632,6 +1634,7 @@ type IconButtonProps = SdsIconButtonProps & {
|
|
|
1632
1634
|
};
|
|
1633
1635
|
declare const NavigationHeader: React.ForwardRefExoticComponent<Omit<NavigationHeaderProps<string>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
1634
1636
|
interface NavigationJumpToExtraProps extends Omit<TabsProps, "onChange">, CommonThemeProps {
|
|
1637
|
+
width?: CSSProperties["width"];
|
|
1635
1638
|
}
|
|
1636
1639
|
type Item = {
|
|
1637
1640
|
title: string;
|
|
@@ -1641,6 +1644,7 @@ interface NavigationJumpToProps extends NavigationJumpToExtraProps {
|
|
|
1641
1644
|
items: Array<Item>;
|
|
1642
1645
|
offsetTop?: number;
|
|
1643
1646
|
onChange?: (value: number, event?: React.SyntheticEvent, type?: "click" | "scroll") => void;
|
|
1647
|
+
width?: CSSProperties["width"];
|
|
1644
1648
|
}
|
|
1645
1649
|
declare const NavigationJumpTo: React.ForwardRefExoticComponent<Omit<NavigationJumpToProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
1646
1650
|
type NotificationIntentType = "info" | "negative" | "positive" | "notice";
|
package/dist/index.cjs.js
CHANGED
|
@@ -6434,6 +6434,7 @@ var labelFontBodyS = fontBody("s", "regular");
|
|
|
6434
6434
|
var labelFontBodyXs = fontBody("xs", "regular");
|
|
6435
6435
|
var inputDropdownStyles = function (props) {
|
|
6436
6436
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
6437
|
+
var _m = props.width, width = _m === void 0 ? "auto" : _m;
|
|
6437
6438
|
var spaces = getSpaces(props);
|
|
6438
6439
|
var borders = getBorders(props);
|
|
6439
6440
|
var semanticColors = getSemanticColors(props);
|
|
@@ -6442,21 +6443,21 @@ var inputDropdownStyles = function (props) {
|
|
|
6442
6443
|
* The top/bottom padding is set to 1px less than the actual value to account for the border.
|
|
6443
6444
|
*/
|
|
6444
6445
|
var padding = "".concat(((_a = spaces === null || spaces === void 0 ? void 0 : spaces.xs) !== null && _a !== void 0 ? _a : 6) - 1, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px");
|
|
6445
|
-
return react.css(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n ", "\n\n border: ", ";\n box-shadow: none !important;\n cursor: pointer;\n padding: ", ";\n justify-content: start;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: transparent;\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: transparent;\n border: ", ";\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: ", ";\n box-shadow: none !important;\n cursor: pointer;\n padding: ", ";\n justify-content: start;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: transparent;\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: transparent;\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n background-color: transparent;\n outline-offset: -1px;\n }\n "])), labelStyle(props), (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.default, padding, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentSecondary, (_e = borders === null || borders === void 0 ? void 0 : borders.base) === null || _e === void 0 ? void 0 : _e.hover, (_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 = borders === null || borders === void 0 ? void 0 : borders.base) === null || _j === void 0 ? void 0 : _j.pressed, (_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);
|
|
6446
|
+
return react.css(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n ", "\n\n border: ", ";\n box-shadow: none !important;\n cursor: pointer;\n padding: ", ";\n justify-content: start;\n width: ", "px;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: transparent;\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: transparent;\n border: ", ";\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: ", ";\n box-shadow: none !important;\n cursor: pointer;\n padding: ", ";\n justify-content: start;\n width: ", "px;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: transparent;\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: transparent;\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n background-color: transparent;\n outline-offset: -1px;\n }\n "])), labelStyle(props), (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.default, padding, width, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentSecondary, (_e = borders === null || borders === void 0 ? void 0 : borders.base) === null || _e === void 0 ? void 0 : _e.hover, (_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 = borders === null || borders === void 0 ? void 0 : borders.base) === null || _j === void 0 ? void 0 : _j.pressed, (_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);
|
|
6446
6447
|
};
|
|
6447
6448
|
var minimal$1 = function (props) {
|
|
6448
6449
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
6449
6450
|
var spaces = getSpaces(props);
|
|
6450
6451
|
var semanticColors = getSemanticColors(props);
|
|
6451
|
-
return react.css(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n ", "\n ", "\n\n /* this is needed to left align the label text */\n align-items: flex-start;\n border: none !important;\n flex-direction: column;\n padding: ", "px ", "px;\n background-color: transparent;\n min-width:
|
|
6452
|
+
return react.css(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n ", "\n ", "\n\n /* this is needed to left align the label text */\n align-items: flex-start;\n border: none !important;\n flex-direction: column;\n padding: ", "px ", "px;\n background-color: transparent;\n min-width: auto;\n /* Nesting to increase CSS specificity for style override */\n &.MuiButton-text {\n .styled-label {\n margin: 0;\n }\n }\n\n span {\n color: ", ";\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border: none;\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: ", ";\n border: none;\n }\n\n &.MuiButton-root.MuiButton-text > span {\n ", "\n margin-left: 0;\n }\n\n &.MuiButton-root.MuiButton-text svg {\n margin-left: ", "px;\n margin-right: 0;\n }\n "], ["\n ", "\n ", "\n\n /* this is needed to left align the label text */\n align-items: flex-start;\n border: none !important;\n flex-direction: column;\n padding: ", "px ", "px;\n background-color: transparent;\n min-width: auto;\n /* Nesting to increase CSS specificity for style override */\n &.MuiButton-text {\n .styled-label {\n margin: 0;\n }\n }\n\n span {\n color: ", ";\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border: none;\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: ", ";\n border: none;\n }\n\n &.MuiButton-root.MuiButton-text > span {\n ", "\n margin-left: 0;\n }\n\n &.MuiButton-root.MuiButton-text svg {\n margin-left: ", "px;\n margin-right: 0;\n }\n "])), labelStyle(props), focusVisibleA11yStyle(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondary, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentSecondaryHover, (_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.fillHover, labelFontBodyS(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs);
|
|
6452
6453
|
};
|
|
6453
6454
|
var square$1 = function (props) {
|
|
6454
6455
|
var corners = getCorners(props);
|
|
6455
|
-
return react.css(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n border-radius: ", "px;\n min-width:
|
|
6456
|
+
return react.css(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n border-radius: ", "px;\n min-width: auto;\n background-color: transparent;\n "], ["\n border-radius: ", "px;\n min-width: auto;\n background-color: transparent;\n "])), corners === null || corners === void 0 ? void 0 : corners.m);
|
|
6456
6457
|
};
|
|
6457
6458
|
var rounded$1 = function (props) {
|
|
6458
6459
|
var corners = getCorners(props);
|
|
6459
|
-
return react.css(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n border-radius: ", "px;\n min-width:
|
|
6460
|
+
return react.css(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n border-radius: ", "px;\n min-width: auto;\n background-color: transparent;\n "], ["\n border-radius: ", "px;\n min-width: auto;\n background-color: transparent;\n "])), corners === null || corners === void 0 ? void 0 : corners.l);
|
|
6460
6461
|
};
|
|
6461
6462
|
var userInput = function (props) {
|
|
6462
6463
|
var _a, _b, _c, _d;
|
|
@@ -15092,14 +15093,15 @@ var useScrollStopListener = function (callback, timeout) {
|
|
|
15092
15093
|
}, [timeout]);
|
|
15093
15094
|
};
|
|
15094
15095
|
|
|
15095
|
-
var doNotForwardProps$5 = ["items", "sdsIndicatorColor"];
|
|
15096
|
+
var doNotForwardProps$5 = ["items", "sdsIndicatorColor", "width"];
|
|
15096
15097
|
var StyledTabs$1 = styled__default.default(material.Tabs, {
|
|
15097
15098
|
shouldForwardProp: function (prop) { return !doNotForwardProps$5.includes(prop); },
|
|
15098
15099
|
})(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
15099
15100
|
var _a, _b;
|
|
15101
|
+
var _c = props.width, width = _c === void 0 ? "180px" : _c;
|
|
15100
15102
|
var spaces = getSpaces(props);
|
|
15101
15103
|
var semanticColors = getSemanticColors(props);
|
|
15102
|
-
return "\n &:before {\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.divider, ";\n border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n content: \"\";\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n }\n\n
|
|
15104
|
+
return "\n &:before {\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.divider, ";\n border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n content: \"\";\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n }\n\n width: ").concat(width, ";\n top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;\n margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n position: sticky;\n overflow: visible;\n\n .").concat(material.tabsClasses.indicator, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.borderSelected, " !important;\n border-radius: 2px;\n left: 0;\n width: 2px;\n }\n\n .").concat(material.tabsClasses.scroller, " {\n overflow: visible !important;\n }\n ");
|
|
15103
15105
|
});
|
|
15104
15106
|
var StyledTab$1 = styled__default.default(material.Tab, {
|
|
15105
15107
|
shouldForwardProp: function (prop) { return !doNotForwardProps$5.includes(prop); },
|
|
@@ -15107,7 +15109,7 @@ var StyledTab$1 = styled__default.default(material.Tab, {
|
|
|
15107
15109
|
var _a, _b, _c;
|
|
15108
15110
|
var spaces = getSpaces(props);
|
|
15109
15111
|
var semanticColors = getSemanticColors(props);
|
|
15110
|
-
return "\n ".concat(focusVisibleA11yStyle(props), "\n box-sizing: border-box;\n
|
|
15112
|
+
return "\n ".concat(focusVisibleA11yStyle(props), "\n box-sizing: border-box;\n padding-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n margin: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n align-items: start;\n min-height: unset;\n max-height: unset;\n text-transform: none;\n &:last-child {\n margin-bottom: 0;\n }\n &:before {\n content: \"\";\n position: absolute;\n left: -").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n height: 100%;\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimary, ";\n display: none;\n border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n }\n &:hover {\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, ";\n &:before {\n display: block;\n }\n }\n &.Mui-selected {\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, ";\n font-weight: 600;\n }\n &.MuiButtonBase-root {\n text-align: left;\n padding: 0;\n overflow: visible;\n }\n ");
|
|
15111
15113
|
});
|
|
15112
15114
|
var templateObject_1$f, templateObject_2$8;
|
|
15113
15115
|
|
|
@@ -15115,9 +15117,12 @@ var templateObject_1$f, templateObject_2$8;
|
|
|
15115
15117
|
* Custom hook that observes elements to determine if they are in the viewport.
|
|
15116
15118
|
*
|
|
15117
15119
|
* @param items - Array of items to observe.
|
|
15120
|
+
* @param offsetTop - Offset from the top of the viewport to consider when
|
|
15121
|
+
* determining if an element is in view. The default is 0.
|
|
15118
15122
|
* @returns Object containing the visibility status of each observed item.
|
|
15119
15123
|
*/
|
|
15120
|
-
function useInView(items) {
|
|
15124
|
+
function useInView(items, offsetTop) {
|
|
15125
|
+
if (offsetTop === void 0) { offsetTop = 0; }
|
|
15121
15126
|
var _a = React.useState({}), elements = _a[0], setElements = _a[1];
|
|
15122
15127
|
React.useEffect(function () {
|
|
15123
15128
|
/**
|
|
@@ -15138,7 +15143,9 @@ function useInView(items) {
|
|
|
15138
15143
|
});
|
|
15139
15144
|
});
|
|
15140
15145
|
};
|
|
15141
|
-
var observer = new IntersectionObserver(observerCallback
|
|
15146
|
+
var observer = new IntersectionObserver(observerCallback, {
|
|
15147
|
+
rootMargin: "-".concat(offsetTop, "px 0px 0px 0px"),
|
|
15148
|
+
});
|
|
15142
15149
|
// Observe each item's element
|
|
15143
15150
|
items.forEach(function (item) {
|
|
15144
15151
|
if (item.elementRef.current) {
|
|
@@ -15149,7 +15156,7 @@ function useInView(items) {
|
|
|
15149
15156
|
return function () {
|
|
15150
15157
|
observer.disconnect();
|
|
15151
15158
|
};
|
|
15152
|
-
}, [items]);
|
|
15159
|
+
}, [items, offsetTop]);
|
|
15153
15160
|
// If the window object is not available (e.g., in a node environment) or
|
|
15154
15161
|
// If the IntersectionObserver is not available (e.g., in a test environment),
|
|
15155
15162
|
// return a default result indicating that all elements are not in view
|
|
@@ -15164,31 +15171,23 @@ function useInView(items) {
|
|
|
15164
15171
|
return elements;
|
|
15165
15172
|
}
|
|
15166
15173
|
|
|
15174
|
+
var scrollIntoViewWithOffset = function (selector, offset) {
|
|
15175
|
+
var element = document.querySelector(selector);
|
|
15176
|
+
if (!element)
|
|
15177
|
+
return;
|
|
15178
|
+
window.scrollTo({
|
|
15179
|
+
behavior: "smooth",
|
|
15180
|
+
top: element.getBoundingClientRect().top -
|
|
15181
|
+
document.body.getBoundingClientRect().top -
|
|
15182
|
+
offset,
|
|
15183
|
+
});
|
|
15184
|
+
};
|
|
15167
15185
|
var NavigationJumpTo = React.forwardRef(function (props, ref) {
|
|
15168
|
-
var items = props.items, _a = props.offsetTop, offsetTop = _a === void 0 ? 0 : _a, onChange = props.onChange, rest = __rest(props, ["items", "offsetTop", "onChange"]);
|
|
15186
|
+
var items = props.items, _a = props.offsetTop, offsetTop = _a === void 0 ? 0 : _a, onChange = props.onChange, width = props.width, rest = __rest(props, ["items", "offsetTop", "onChange", "width"]);
|
|
15169
15187
|
var _b = React.useState(false), navItemClicked = _b[0], setNavItemClicked = _b[1];
|
|
15170
15188
|
var _c = React.useState(0), firstTabIndexInview = _c[0], setFirstTabIndexInview = _c[1];
|
|
15171
15189
|
var _d = React.useState(-1), emittedValue = _d[0], setEmittedValue = _d[1];
|
|
15172
|
-
var sectionIsInView = useInView(items);
|
|
15173
|
-
React.useEffect(function () {
|
|
15174
|
-
items.forEach(function (item) {
|
|
15175
|
-
var _a, _b;
|
|
15176
|
-
if (offsetTop) {
|
|
15177
|
-
var wrapper = document.createElement("div");
|
|
15178
|
-
wrapper.style.position = "relative";
|
|
15179
|
-
var hiddenDiv = document.createElement("div");
|
|
15180
|
-
hiddenDiv.style.height = "".concat(offsetTop, "px");
|
|
15181
|
-
hiddenDiv.style.top = "-".concat(offsetTop, "px");
|
|
15182
|
-
hiddenDiv.style.position = "absolute";
|
|
15183
|
-
hiddenDiv.style.pointerEvents = "none";
|
|
15184
|
-
hiddenDiv.setAttribute("id", "".concat((_a = item.elementRef.current) === null || _a === void 0 ? void 0 : _a.getAttribute("id"), "-hiddenDiv"));
|
|
15185
|
-
wrapper.appendChild(hiddenDiv);
|
|
15186
|
-
(_b = item.elementRef.current) === null || _b === void 0 ? void 0 : _b.before(wrapper);
|
|
15187
|
-
if (item.elementRef.current)
|
|
15188
|
-
wrapper.appendChild(item.elementRef.current);
|
|
15189
|
-
}
|
|
15190
|
-
});
|
|
15191
|
-
}, [items, offsetTop]);
|
|
15190
|
+
var sectionIsInView = useInView(items, offsetTop);
|
|
15192
15191
|
var a11yProps = function (title, elementId) {
|
|
15193
15192
|
return {
|
|
15194
15193
|
"aria-controls": elementId,
|
|
@@ -15209,11 +15208,7 @@ var NavigationJumpTo = React.forwardRef(function (props, ref) {
|
|
|
15209
15208
|
setNavItemClicked(true);
|
|
15210
15209
|
// Smoothly scroll to the section of the page referenced by the clicked nav item
|
|
15211
15210
|
if (offsetTop) {
|
|
15212
|
-
|
|
15213
|
-
hiddenDiv === null || hiddenDiv === void 0 ? void 0 : hiddenDiv.scrollIntoView({
|
|
15214
|
-
behavior: "smooth",
|
|
15215
|
-
block: "start",
|
|
15216
|
-
});
|
|
15211
|
+
scrollIntoViewWithOffset("#".concat((_c = (_b = (_a = items[newValue]) === null || _a === void 0 ? void 0 : _a.elementRef) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.getAttribute("id")), offsetTop);
|
|
15217
15212
|
}
|
|
15218
15213
|
else {
|
|
15219
15214
|
(_f = (_e = (_d = items[newValue]) === null || _d === void 0 ? void 0 : _d.elementRef) === null || _e === void 0 ? void 0 : _e.current) === null || _f === void 0 ? void 0 : _f.scrollIntoView({
|
|
@@ -15242,16 +15237,17 @@ var NavigationJumpTo = React.forwardRef(function (props, ref) {
|
|
|
15242
15237
|
type: "scroll",
|
|
15243
15238
|
}, "scroll");
|
|
15244
15239
|
}
|
|
15245
|
-
|
|
15240
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
15241
|
+
}, [handleOnChange, items, sectionIsInView]);
|
|
15246
15242
|
// Set navItemClicked to false to re-enable the option
|
|
15247
15243
|
// to update the tab value based on scroll.
|
|
15248
15244
|
useScrollStopListener(function () {
|
|
15249
15245
|
setNavItemClicked(false);
|
|
15250
15246
|
});
|
|
15251
|
-
return (jsxRuntime.jsx(StyledTabs$1, __assign({ ref: ref, orientation: "vertical", variant: "fullWidth", value: firstTabIndexInview, onChange: handleChange, "aria-label": "navigation-jump-to" }, rest, { children: items.map(function (_a, index) {
|
|
15247
|
+
return (jsxRuntime.jsx(StyledTabs$1, __assign({ ref: ref, orientation: "vertical", variant: "fullWidth", value: firstTabIndexInview, onChange: handleChange, "aria-label": "navigation-jump-to", width: width }, rest, { children: items.map(function (_a, index) {
|
|
15252
15248
|
var _b;
|
|
15253
15249
|
var title = _a.title, elementRef = _a.elementRef;
|
|
15254
|
-
return (jsxRuntime.jsx(StyledTab$1, __assign({ label: title, tabIndex: 0 }, a11yProps(toKebabCase(title), ((_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.getAttribute("id")) ||
|
|
15250
|
+
return (jsxRuntime.jsx(StyledTab$1, __assign({ label: title, tabIndex: 0, width: width }, a11yProps(toKebabCase(title), ((_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.getAttribute("id")) ||
|
|
15255
15251
|
"navigation-panel-".concat(index + 1))), toKebabCase(title)));
|
|
15256
15252
|
}) })));
|
|
15257
15253
|
});
|
package/dist/index.esm.d.ts
CHANGED
|
@@ -1135,6 +1135,8 @@ interface InputDropdownProps extends CommonThemeProps, Omit<ButtonProps$0, (type
|
|
|
1135
1135
|
value?: ReactNode;
|
|
1136
1136
|
shouldTruncateMinimalDetails?: boolean;
|
|
1137
1137
|
shouldPutAColonAfterLabel?: boolean;
|
|
1138
|
+
width?: number;
|
|
1139
|
+
className?: string;
|
|
1138
1140
|
// (masoudmanson): This is a temporary fix for the issue where the style prop
|
|
1139
1141
|
// is not correctly passed to the underlying Button component when asserting as
|
|
1140
1142
|
// a React.ComponentType<InputDropdownProps>. This is a workaround until a more
|
|
@@ -1632,6 +1634,7 @@ type IconButtonProps = SdsIconButtonProps & {
|
|
|
1632
1634
|
};
|
|
1633
1635
|
declare const NavigationHeader: React.ForwardRefExoticComponent<Omit<NavigationHeaderProps<string>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
1634
1636
|
interface NavigationJumpToExtraProps extends Omit<TabsProps, "onChange">, CommonThemeProps {
|
|
1637
|
+
width?: CSSProperties["width"];
|
|
1635
1638
|
}
|
|
1636
1639
|
type Item = {
|
|
1637
1640
|
title: string;
|
|
@@ -1641,6 +1644,7 @@ interface NavigationJumpToProps extends NavigationJumpToExtraProps {
|
|
|
1641
1644
|
items: Array<Item>;
|
|
1642
1645
|
offsetTop?: number;
|
|
1643
1646
|
onChange?: (value: number, event?: React.SyntheticEvent, type?: "click" | "scroll") => void;
|
|
1647
|
+
width?: CSSProperties["width"];
|
|
1644
1648
|
}
|
|
1645
1649
|
declare const NavigationJumpTo: React.ForwardRefExoticComponent<Omit<NavigationJumpToProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
1646
1650
|
type NotificationIntentType = "info" | "negative" | "positive" | "notice";
|
package/dist/index.esm.js
CHANGED
|
@@ -6411,6 +6411,7 @@ var labelFontBodyS = fontBody("s", "regular");
|
|
|
6411
6411
|
var labelFontBodyXs = fontBody("xs", "regular");
|
|
6412
6412
|
var inputDropdownStyles = function (props) {
|
|
6413
6413
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
6414
|
+
var _m = props.width, width = _m === void 0 ? "auto" : _m;
|
|
6414
6415
|
var spaces = getSpaces(props);
|
|
6415
6416
|
var borders = getBorders(props);
|
|
6416
6417
|
var semanticColors = getSemanticColors(props);
|
|
@@ -6419,21 +6420,21 @@ var inputDropdownStyles = function (props) {
|
|
|
6419
6420
|
* The top/bottom padding is set to 1px less than the actual value to account for the border.
|
|
6420
6421
|
*/
|
|
6421
6422
|
var padding = "".concat(((_a = spaces === null || spaces === void 0 ? void 0 : spaces.xs) !== null && _a !== void 0 ? _a : 6) - 1, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px");
|
|
6422
|
-
return css(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n ", "\n\n border: ", ";\n box-shadow: none !important;\n cursor: pointer;\n padding: ", ";\n justify-content: start;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: transparent;\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: transparent;\n border: ", ";\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: ", ";\n box-shadow: none !important;\n cursor: pointer;\n padding: ", ";\n justify-content: start;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: transparent;\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: transparent;\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n background-color: transparent;\n outline-offset: -1px;\n }\n "])), labelStyle(props), (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.default, padding, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentSecondary, (_e = borders === null || borders === void 0 ? void 0 : borders.base) === null || _e === void 0 ? void 0 : _e.hover, (_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 = borders === null || borders === void 0 ? void 0 : borders.base) === null || _j === void 0 ? void 0 : _j.pressed, (_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);
|
|
6423
|
+
return css(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n ", "\n\n border: ", ";\n box-shadow: none !important;\n cursor: pointer;\n padding: ", ";\n justify-content: start;\n width: ", "px;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: transparent;\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: transparent;\n border: ", ";\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: ", ";\n box-shadow: none !important;\n cursor: pointer;\n padding: ", ";\n justify-content: start;\n width: ", "px;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: transparent;\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: transparent;\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n background-color: transparent;\n outline-offset: -1px;\n }\n "])), labelStyle(props), (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.default, padding, width, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentSecondary, (_e = borders === null || borders === void 0 ? void 0 : borders.base) === null || _e === void 0 ? void 0 : _e.hover, (_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 = borders === null || borders === void 0 ? void 0 : borders.base) === null || _j === void 0 ? void 0 : _j.pressed, (_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);
|
|
6423
6424
|
};
|
|
6424
6425
|
var minimal$1 = function (props) {
|
|
6425
6426
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
6426
6427
|
var spaces = getSpaces(props);
|
|
6427
6428
|
var semanticColors = getSemanticColors(props);
|
|
6428
|
-
return css(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n ", "\n ", "\n\n /* this is needed to left align the label text */\n align-items: flex-start;\n border: none !important;\n flex-direction: column;\n padding: ", "px ", "px;\n background-color: transparent;\n min-width:
|
|
6429
|
+
return css(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n ", "\n ", "\n\n /* this is needed to left align the label text */\n align-items: flex-start;\n border: none !important;\n flex-direction: column;\n padding: ", "px ", "px;\n background-color: transparent;\n min-width: auto;\n /* Nesting to increase CSS specificity for style override */\n &.MuiButton-text {\n .styled-label {\n margin: 0;\n }\n }\n\n span {\n color: ", ";\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border: none;\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: ", ";\n border: none;\n }\n\n &.MuiButton-root.MuiButton-text > span {\n ", "\n margin-left: 0;\n }\n\n &.MuiButton-root.MuiButton-text svg {\n margin-left: ", "px;\n margin-right: 0;\n }\n "], ["\n ", "\n ", "\n\n /* this is needed to left align the label text */\n align-items: flex-start;\n border: none !important;\n flex-direction: column;\n padding: ", "px ", "px;\n background-color: transparent;\n min-width: auto;\n /* Nesting to increase CSS specificity for style override */\n &.MuiButton-text {\n .styled-label {\n margin: 0;\n }\n }\n\n span {\n color: ", ";\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border: none;\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: ", ";\n border: none;\n }\n\n &.MuiButton-root.MuiButton-text > span {\n ", "\n margin-left: 0;\n }\n\n &.MuiButton-root.MuiButton-text svg {\n margin-left: ", "px;\n margin-right: 0;\n }\n "])), labelStyle(props), focusVisibleA11yStyle(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondary, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentSecondaryHover, (_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.fillHover, labelFontBodyS(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs);
|
|
6429
6430
|
};
|
|
6430
6431
|
var square$1 = function (props) {
|
|
6431
6432
|
var corners = getCorners(props);
|
|
6432
|
-
return css(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n border-radius: ", "px;\n min-width:
|
|
6433
|
+
return css(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n border-radius: ", "px;\n min-width: auto;\n background-color: transparent;\n "], ["\n border-radius: ", "px;\n min-width: auto;\n background-color: transparent;\n "])), corners === null || corners === void 0 ? void 0 : corners.m);
|
|
6433
6434
|
};
|
|
6434
6435
|
var rounded$1 = function (props) {
|
|
6435
6436
|
var corners = getCorners(props);
|
|
6436
|
-
return css(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n border-radius: ", "px;\n min-width:
|
|
6437
|
+
return css(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n border-radius: ", "px;\n min-width: auto;\n background-color: transparent;\n "], ["\n border-radius: ", "px;\n min-width: auto;\n background-color: transparent;\n "])), corners === null || corners === void 0 ? void 0 : corners.l);
|
|
6437
6438
|
};
|
|
6438
6439
|
var userInput = function (props) {
|
|
6439
6440
|
var _a, _b, _c, _d;
|
|
@@ -15069,14 +15070,15 @@ var useScrollStopListener = function (callback, timeout) {
|
|
|
15069
15070
|
}, [timeout]);
|
|
15070
15071
|
};
|
|
15071
15072
|
|
|
15072
|
-
var doNotForwardProps$5 = ["items", "sdsIndicatorColor"];
|
|
15073
|
+
var doNotForwardProps$5 = ["items", "sdsIndicatorColor", "width"];
|
|
15073
15074
|
var StyledTabs$1 = styled$2(Tabs$1, {
|
|
15074
15075
|
shouldForwardProp: function (prop) { return !doNotForwardProps$5.includes(prop); },
|
|
15075
15076
|
})(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
15076
15077
|
var _a, _b;
|
|
15078
|
+
var _c = props.width, width = _c === void 0 ? "180px" : _c;
|
|
15077
15079
|
var spaces = getSpaces(props);
|
|
15078
15080
|
var semanticColors = getSemanticColors(props);
|
|
15079
|
-
return "\n &:before {\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.divider, ";\n border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n content: \"\";\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n }\n\n
|
|
15081
|
+
return "\n &:before {\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.divider, ";\n border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n content: \"\";\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n }\n\n width: ").concat(width, ";\n top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;\n margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n position: sticky;\n overflow: visible;\n\n .").concat(tabsClasses.indicator, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.borderSelected, " !important;\n border-radius: 2px;\n left: 0;\n width: 2px;\n }\n\n .").concat(tabsClasses.scroller, " {\n overflow: visible !important;\n }\n ");
|
|
15080
15082
|
});
|
|
15081
15083
|
var StyledTab$1 = styled$2(Tab$1, {
|
|
15082
15084
|
shouldForwardProp: function (prop) { return !doNotForwardProps$5.includes(prop); },
|
|
@@ -15084,7 +15086,7 @@ var StyledTab$1 = styled$2(Tab$1, {
|
|
|
15084
15086
|
var _a, _b, _c;
|
|
15085
15087
|
var spaces = getSpaces(props);
|
|
15086
15088
|
var semanticColors = getSemanticColors(props);
|
|
15087
|
-
return "\n ".concat(focusVisibleA11yStyle(props), "\n box-sizing: border-box;\n
|
|
15089
|
+
return "\n ".concat(focusVisibleA11yStyle(props), "\n box-sizing: border-box;\n padding-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n margin: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n align-items: start;\n min-height: unset;\n max-height: unset;\n text-transform: none;\n &:last-child {\n margin-bottom: 0;\n }\n &:before {\n content: \"\";\n position: absolute;\n left: -").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n height: 100%;\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimary, ";\n display: none;\n border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n }\n &:hover {\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, ";\n &:before {\n display: block;\n }\n }\n &.Mui-selected {\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, ";\n font-weight: 600;\n }\n &.MuiButtonBase-root {\n text-align: left;\n padding: 0;\n overflow: visible;\n }\n ");
|
|
15088
15090
|
});
|
|
15089
15091
|
var templateObject_1$f, templateObject_2$8;
|
|
15090
15092
|
|
|
@@ -15092,9 +15094,12 @@ var templateObject_1$f, templateObject_2$8;
|
|
|
15092
15094
|
* Custom hook that observes elements to determine if they are in the viewport.
|
|
15093
15095
|
*
|
|
15094
15096
|
* @param items - Array of items to observe.
|
|
15097
|
+
* @param offsetTop - Offset from the top of the viewport to consider when
|
|
15098
|
+
* determining if an element is in view. The default is 0.
|
|
15095
15099
|
* @returns Object containing the visibility status of each observed item.
|
|
15096
15100
|
*/
|
|
15097
|
-
function useInView(items) {
|
|
15101
|
+
function useInView(items, offsetTop) {
|
|
15102
|
+
if (offsetTop === void 0) { offsetTop = 0; }
|
|
15098
15103
|
var _a = useState({}), elements = _a[0], setElements = _a[1];
|
|
15099
15104
|
useEffect(function () {
|
|
15100
15105
|
/**
|
|
@@ -15115,7 +15120,9 @@ function useInView(items) {
|
|
|
15115
15120
|
});
|
|
15116
15121
|
});
|
|
15117
15122
|
};
|
|
15118
|
-
var observer = new IntersectionObserver(observerCallback
|
|
15123
|
+
var observer = new IntersectionObserver(observerCallback, {
|
|
15124
|
+
rootMargin: "-".concat(offsetTop, "px 0px 0px 0px"),
|
|
15125
|
+
});
|
|
15119
15126
|
// Observe each item's element
|
|
15120
15127
|
items.forEach(function (item) {
|
|
15121
15128
|
if (item.elementRef.current) {
|
|
@@ -15126,7 +15133,7 @@ function useInView(items) {
|
|
|
15126
15133
|
return function () {
|
|
15127
15134
|
observer.disconnect();
|
|
15128
15135
|
};
|
|
15129
|
-
}, [items]);
|
|
15136
|
+
}, [items, offsetTop]);
|
|
15130
15137
|
// If the window object is not available (e.g., in a node environment) or
|
|
15131
15138
|
// If the IntersectionObserver is not available (e.g., in a test environment),
|
|
15132
15139
|
// return a default result indicating that all elements are not in view
|
|
@@ -15141,31 +15148,23 @@ function useInView(items) {
|
|
|
15141
15148
|
return elements;
|
|
15142
15149
|
}
|
|
15143
15150
|
|
|
15151
|
+
var scrollIntoViewWithOffset = function (selector, offset) {
|
|
15152
|
+
var element = document.querySelector(selector);
|
|
15153
|
+
if (!element)
|
|
15154
|
+
return;
|
|
15155
|
+
window.scrollTo({
|
|
15156
|
+
behavior: "smooth",
|
|
15157
|
+
top: element.getBoundingClientRect().top -
|
|
15158
|
+
document.body.getBoundingClientRect().top -
|
|
15159
|
+
offset,
|
|
15160
|
+
});
|
|
15161
|
+
};
|
|
15144
15162
|
var NavigationJumpTo = forwardRef(function (props, ref) {
|
|
15145
|
-
var items = props.items, _a = props.offsetTop, offsetTop = _a === void 0 ? 0 : _a, onChange = props.onChange, rest = __rest(props, ["items", "offsetTop", "onChange"]);
|
|
15163
|
+
var items = props.items, _a = props.offsetTop, offsetTop = _a === void 0 ? 0 : _a, onChange = props.onChange, width = props.width, rest = __rest(props, ["items", "offsetTop", "onChange", "width"]);
|
|
15146
15164
|
var _b = useState(false), navItemClicked = _b[0], setNavItemClicked = _b[1];
|
|
15147
15165
|
var _c = useState(0), firstTabIndexInview = _c[0], setFirstTabIndexInview = _c[1];
|
|
15148
15166
|
var _d = useState(-1), emittedValue = _d[0], setEmittedValue = _d[1];
|
|
15149
|
-
var sectionIsInView = useInView(items);
|
|
15150
|
-
useEffect(function () {
|
|
15151
|
-
items.forEach(function (item) {
|
|
15152
|
-
var _a, _b;
|
|
15153
|
-
if (offsetTop) {
|
|
15154
|
-
var wrapper = document.createElement("div");
|
|
15155
|
-
wrapper.style.position = "relative";
|
|
15156
|
-
var hiddenDiv = document.createElement("div");
|
|
15157
|
-
hiddenDiv.style.height = "".concat(offsetTop, "px");
|
|
15158
|
-
hiddenDiv.style.top = "-".concat(offsetTop, "px");
|
|
15159
|
-
hiddenDiv.style.position = "absolute";
|
|
15160
|
-
hiddenDiv.style.pointerEvents = "none";
|
|
15161
|
-
hiddenDiv.setAttribute("id", "".concat((_a = item.elementRef.current) === null || _a === void 0 ? void 0 : _a.getAttribute("id"), "-hiddenDiv"));
|
|
15162
|
-
wrapper.appendChild(hiddenDiv);
|
|
15163
|
-
(_b = item.elementRef.current) === null || _b === void 0 ? void 0 : _b.before(wrapper);
|
|
15164
|
-
if (item.elementRef.current)
|
|
15165
|
-
wrapper.appendChild(item.elementRef.current);
|
|
15166
|
-
}
|
|
15167
|
-
});
|
|
15168
|
-
}, [items, offsetTop]);
|
|
15167
|
+
var sectionIsInView = useInView(items, offsetTop);
|
|
15169
15168
|
var a11yProps = function (title, elementId) {
|
|
15170
15169
|
return {
|
|
15171
15170
|
"aria-controls": elementId,
|
|
@@ -15186,11 +15185,7 @@ var NavigationJumpTo = forwardRef(function (props, ref) {
|
|
|
15186
15185
|
setNavItemClicked(true);
|
|
15187
15186
|
// Smoothly scroll to the section of the page referenced by the clicked nav item
|
|
15188
15187
|
if (offsetTop) {
|
|
15189
|
-
|
|
15190
|
-
hiddenDiv === null || hiddenDiv === void 0 ? void 0 : hiddenDiv.scrollIntoView({
|
|
15191
|
-
behavior: "smooth",
|
|
15192
|
-
block: "start",
|
|
15193
|
-
});
|
|
15188
|
+
scrollIntoViewWithOffset("#".concat((_c = (_b = (_a = items[newValue]) === null || _a === void 0 ? void 0 : _a.elementRef) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.getAttribute("id")), offsetTop);
|
|
15194
15189
|
}
|
|
15195
15190
|
else {
|
|
15196
15191
|
(_f = (_e = (_d = items[newValue]) === null || _d === void 0 ? void 0 : _d.elementRef) === null || _e === void 0 ? void 0 : _e.current) === null || _f === void 0 ? void 0 : _f.scrollIntoView({
|
|
@@ -15219,16 +15214,17 @@ var NavigationJumpTo = forwardRef(function (props, ref) {
|
|
|
15219
15214
|
type: "scroll",
|
|
15220
15215
|
}, "scroll");
|
|
15221
15216
|
}
|
|
15222
|
-
|
|
15217
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
15218
|
+
}, [handleOnChange, items, sectionIsInView]);
|
|
15223
15219
|
// Set navItemClicked to false to re-enable the option
|
|
15224
15220
|
// to update the tab value based on scroll.
|
|
15225
15221
|
useScrollStopListener(function () {
|
|
15226
15222
|
setNavItemClicked(false);
|
|
15227
15223
|
});
|
|
15228
|
-
return (jsx(StyledTabs$1, __assign({ ref: ref, orientation: "vertical", variant: "fullWidth", value: firstTabIndexInview, onChange: handleChange, "aria-label": "navigation-jump-to" }, rest, { children: items.map(function (_a, index) {
|
|
15224
|
+
return (jsx(StyledTabs$1, __assign({ ref: ref, orientation: "vertical", variant: "fullWidth", value: firstTabIndexInview, onChange: handleChange, "aria-label": "navigation-jump-to", width: width }, rest, { children: items.map(function (_a, index) {
|
|
15229
15225
|
var _b;
|
|
15230
15226
|
var title = _a.title, elementRef = _a.elementRef;
|
|
15231
|
-
return (jsx(StyledTab$1, __assign({ label: title, tabIndex: 0 }, a11yProps(toKebabCase(title), ((_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.getAttribute("id")) ||
|
|
15227
|
+
return (jsx(StyledTab$1, __assign({ label: title, tabIndex: 0, width: width }, a11yProps(toKebabCase(title), ((_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.getAttribute("id")) ||
|
|
15232
15228
|
"navigation-panel-".concat(index + 1))), toKebabCase(title)));
|
|
15233
15229
|
}) })));
|
|
15234
15230
|
});
|