@czi-sds/components 22.16.2 → 22.16.3
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.js +14 -9
- package/dist/index.esm.js +14 -9
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
package/dist/index.cjs.js
CHANGED
|
@@ -14809,13 +14809,15 @@ var StyledNavItemLink = styled__default.default(Link, {
|
|
|
14809
14809
|
var semanticColors = getSemanticColors(props);
|
|
14810
14810
|
var spaces = getSpaces(props);
|
|
14811
14811
|
var corners = getCorners(props);
|
|
14812
|
-
return material.css(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n color: ", ";\n background-color: transparent;\n white-space: nowrap;\n padding: ", "px ", "px;\n border-radius: ", "px;\n\n &:hover {\n color: ", ";\n background-color: ", ";\n text-decoration: none;\n }\n\n ", "\n "], ["\n color: ", ";\n background-color: transparent;\n white-space: nowrap;\n padding: ", "px ", "px;\n border-radius: ", "px;\n\n &:hover {\n color: ", ";\n background-color: ", ";\n text-decoration: none;\n }\n\n ", "\n "])), props.hasInvertedStyle
|
|
14812
|
+
return material.css(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n color: ", ";\n background-color: transparent;\n white-space: nowrap;\n padding: ", "px ", "px;\n border-radius: ", "px;\n\n &:hover {\n color: ", ";\n background-color: ", ";\n text-decoration: none;\n }\n\n &:active,\n &:focus {\n color: ", ";\n }\n\n ", "\n "], ["\n color: ", ";\n background-color: transparent;\n white-space: nowrap;\n padding: ", "px ", "px;\n border-radius: ", "px;\n\n &:hover {\n color: ", ";\n background-color: ", ";\n text-decoration: none;\n }\n\n &:active,\n &:focus {\n color: ", ";\n }\n\n ", "\n "])), props.hasInvertedStyle
|
|
14813
14813
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondaryOnDark
|
|
14814
14814
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondary, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, spaces === null || spaces === void 0 ? void 0 : spaces.m, corners === null || corners === void 0 ? void 0 : corners.l, props.hasInvertedStyle
|
|
14815
14815
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryOnDark
|
|
14816
14816
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, props.hasInvertedStyle
|
|
14817
14817
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.fillHoverOnDark
|
|
14818
|
-
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.fillHover,
|
|
14818
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.fillHover, props.hasInvertedStyle
|
|
14819
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryOnDark
|
|
14820
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent.textActionPressed, isNarrow && NarrowNavItemLinkStyles(props));
|
|
14819
14821
|
});
|
|
14820
14822
|
var templateObject_1$n, templateObject_2$f, templateObject_3$b;
|
|
14821
14823
|
|
|
@@ -14832,11 +14834,13 @@ var StyledLinkItemLink = styled__default.default(Link, {
|
|
|
14832
14834
|
var showDivider = props.showDivider, hasInvertedStyle = props.hasInvertedStyle;
|
|
14833
14835
|
var spaces = getSpaces(props);
|
|
14834
14836
|
var semanticColors = getSemanticColors(props);
|
|
14835
|
-
return material.css(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n color: ", ";\n white-space: nowrap;\n position: relative;\n\n &:hover {\n color: ", ";\n text-decoration: none;\n }\n\n ", "\n "], ["\n color: ", ";\n white-space: nowrap;\n position: relative;\n\n &:hover {\n color: ", ";\n text-decoration: none;\n }\n\n ", "\n "])), hasInvertedStyle
|
|
14837
|
+
return material.css(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n color: ", ";\n white-space: nowrap;\n position: relative;\n\n &:hover {\n color: ", ";\n text-decoration: none;\n }\n\n &:active,\n &:focus {\n color: ", ";\n }\n\n ", "\n "], ["\n color: ", ";\n white-space: nowrap;\n position: relative;\n\n &:hover {\n color: ", ";\n text-decoration: none;\n }\n\n &:active,\n &:focus {\n color: ", ";\n }\n\n ", "\n "])), hasInvertedStyle
|
|
14836
14838
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondaryOnDark
|
|
14837
14839
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondary, hasInvertedStyle
|
|
14838
14840
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryOnDark
|
|
14839
|
-
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary,
|
|
14841
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, hasInvertedStyle
|
|
14842
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryOnDark
|
|
14843
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent.textActionPressed, showDivider && material.css(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n &:after {\n content: \"\";\n position: absolute;\n top: 0;\n right: -", "px;\n display: block;\n height: 100%;\n width: 1px;\n margin-left: ", "px;\n background-color: ", ";\n }\n "], ["\n &:after {\n content: \"\";\n position: absolute;\n top: 0;\n right: -", "px;\n display: block;\n height: 100%;\n width: 1px;\n margin-left: ", "px;\n background-color: ", ";\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.s, hasInvertedStyle
|
|
14840
14844
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.dividerOnDark
|
|
14841
14845
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.divider));
|
|
14842
14846
|
});
|
|
@@ -15355,7 +15359,7 @@ var StyledHoverDrawerItem = styled__default.default(Button, {
|
|
|
15355
15359
|
var semanticColors = getSemanticColors(props);
|
|
15356
15360
|
var corners = getCorners(props);
|
|
15357
15361
|
var spaces = getSpaces(props);
|
|
15358
|
-
return material.css(templateObject_53 || (templateObject_53 = __makeTemplateObject(["\n border: none;\n outline: none;\n background: transparent;\n box-shadow: none;\n justify-content: flex-start;\n text-align: left;\n padding: ", "px ", "px;\n margin-bottom: ", "px;\n border-radius: ", "px;\n min-height: auto;\n width: 100%;\n white-space: wrap;\n\n &:hover {\n border: none;\n outline: none;\n box-shadow: none;\n cursor: pointer;\n background: ", ";\n svg {\n color: ", ";\n }\n }\n "], ["\n border: none;\n outline: none;\n background: transparent;\n box-shadow: none;\n justify-content: flex-start;\n text-align: left;\n padding: ", "px ", "px;\n margin-bottom: ", "px;\n border-radius: ", "px;\n min-height: auto;\n width: 100%;\n white-space: wrap;\n\n &:hover {\n border: none;\n outline: none;\n box-shadow: none;\n cursor: pointer;\n background: ", ";\n svg {\n color: ", ";\n }\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.
|
|
15362
|
+
return material.css(templateObject_53 || (templateObject_53 = __makeTemplateObject(["\n border: none;\n outline: none;\n background: transparent;\n box-shadow: none;\n justify-content: flex-start;\n text-align: left;\n padding: ", "px ", "px;\n margin-bottom: ", "px;\n border-radius: ", "px;\n min-height: auto;\n width: 100%;\n white-space: wrap;\n\n &:hover {\n border: none;\n outline: none;\n box-shadow: none;\n cursor: pointer;\n background: ", ";\n svg {\n color: ", ";\n }\n }\n "], ["\n border: none;\n outline: none;\n background: transparent;\n box-shadow: none;\n justify-content: flex-start;\n text-align: left;\n padding: ", "px ", "px;\n margin-bottom: ", "px;\n border-radius: ", "px;\n min-height: auto;\n width: 100%;\n white-space: wrap;\n\n &:hover {\n border: none;\n outline: none;\n box-shadow: none;\n cursor: pointer;\n background: ", ";\n svg {\n color: ", ";\n }\n }\n "])), hasDetails ? spaces === null || spaces === void 0 ? void 0 : spaces.l : spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.l, hasDetails ? spaces === null || spaces === void 0 ? void 0 : spaces.s : 0, corners === null || corners === void 0 ? void 0 : corners.xl, hasInvertedStyle
|
|
15359
15363
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.fillHoverOnDark
|
|
15360
15364
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.fillHover, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.ornament);
|
|
15361
15365
|
});
|
|
@@ -16464,16 +16468,17 @@ var NavigationHeader = React.forwardRef(function (props, ref) {
|
|
|
16464
16468
|
var navRef = React.useRef(null);
|
|
16465
16469
|
var topSlotRef = React.useRef(null);
|
|
16466
16470
|
var _j = React.useState(0), topOffset = _j[0], setTopOffset = _j[1];
|
|
16467
|
-
// Use controlled
|
|
16471
|
+
// Use hybrid controlled/uncontrolled active key state
|
|
16472
|
+
// Internal state is always maintained, external prop can override
|
|
16468
16473
|
var _k = React.useState(""), internalActivePrimaryNavKey = _k[0], setInternalActivePrimaryNavKey = _k[1];
|
|
16469
16474
|
var activePrimaryNavKey = controlledActivePrimaryNavKey !== null && controlledActivePrimaryNavKey !== void 0 ? controlledActivePrimaryNavKey : internalActivePrimaryNavKey;
|
|
16470
16475
|
var setActivePrimaryNavKey = function (key) {
|
|
16476
|
+
// Always update internal state
|
|
16477
|
+
setInternalActivePrimaryNavKey(key);
|
|
16478
|
+
// Also call the callback if provided (for external consumers)
|
|
16471
16479
|
if (onActivePrimaryNavKeyChange) {
|
|
16472
16480
|
onActivePrimaryNavKeyChange(key);
|
|
16473
16481
|
}
|
|
16474
|
-
else {
|
|
16475
|
-
setInternalActivePrimaryNavKey(key);
|
|
16476
|
-
}
|
|
16477
16482
|
};
|
|
16478
16483
|
var theme = useTheme();
|
|
16479
16484
|
var mode = getMode({ theme: theme });
|
package/dist/index.esm.js
CHANGED
|
@@ -14786,13 +14786,15 @@ var StyledNavItemLink = styled$2(Link, {
|
|
|
14786
14786
|
var semanticColors = getSemanticColors(props);
|
|
14787
14787
|
var spaces = getSpaces(props);
|
|
14788
14788
|
var corners = getCorners(props);
|
|
14789
|
-
return css$2(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n color: ", ";\n background-color: transparent;\n white-space: nowrap;\n padding: ", "px ", "px;\n border-radius: ", "px;\n\n &:hover {\n color: ", ";\n background-color: ", ";\n text-decoration: none;\n }\n\n ", "\n "], ["\n color: ", ";\n background-color: transparent;\n white-space: nowrap;\n padding: ", "px ", "px;\n border-radius: ", "px;\n\n &:hover {\n color: ", ";\n background-color: ", ";\n text-decoration: none;\n }\n\n ", "\n "])), props.hasInvertedStyle
|
|
14789
|
+
return css$2(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n color: ", ";\n background-color: transparent;\n white-space: nowrap;\n padding: ", "px ", "px;\n border-radius: ", "px;\n\n &:hover {\n color: ", ";\n background-color: ", ";\n text-decoration: none;\n }\n\n &:active,\n &:focus {\n color: ", ";\n }\n\n ", "\n "], ["\n color: ", ";\n background-color: transparent;\n white-space: nowrap;\n padding: ", "px ", "px;\n border-radius: ", "px;\n\n &:hover {\n color: ", ";\n background-color: ", ";\n text-decoration: none;\n }\n\n &:active,\n &:focus {\n color: ", ";\n }\n\n ", "\n "])), props.hasInvertedStyle
|
|
14790
14790
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondaryOnDark
|
|
14791
14791
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondary, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, spaces === null || spaces === void 0 ? void 0 : spaces.m, corners === null || corners === void 0 ? void 0 : corners.l, props.hasInvertedStyle
|
|
14792
14792
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryOnDark
|
|
14793
14793
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, props.hasInvertedStyle
|
|
14794
14794
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.fillHoverOnDark
|
|
14795
|
-
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.fillHover,
|
|
14795
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.fillHover, props.hasInvertedStyle
|
|
14796
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryOnDark
|
|
14797
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent.textActionPressed, isNarrow && NarrowNavItemLinkStyles(props));
|
|
14796
14798
|
});
|
|
14797
14799
|
var templateObject_1$n, templateObject_2$f, templateObject_3$b;
|
|
14798
14800
|
|
|
@@ -14809,11 +14811,13 @@ var StyledLinkItemLink = styled$2(Link, {
|
|
|
14809
14811
|
var showDivider = props.showDivider, hasInvertedStyle = props.hasInvertedStyle;
|
|
14810
14812
|
var spaces = getSpaces(props);
|
|
14811
14813
|
var semanticColors = getSemanticColors(props);
|
|
14812
|
-
return css$2(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n color: ", ";\n white-space: nowrap;\n position: relative;\n\n &:hover {\n color: ", ";\n text-decoration: none;\n }\n\n ", "\n "], ["\n color: ", ";\n white-space: nowrap;\n position: relative;\n\n &:hover {\n color: ", ";\n text-decoration: none;\n }\n\n ", "\n "])), hasInvertedStyle
|
|
14814
|
+
return css$2(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n color: ", ";\n white-space: nowrap;\n position: relative;\n\n &:hover {\n color: ", ";\n text-decoration: none;\n }\n\n &:active,\n &:focus {\n color: ", ";\n }\n\n ", "\n "], ["\n color: ", ";\n white-space: nowrap;\n position: relative;\n\n &:hover {\n color: ", ";\n text-decoration: none;\n }\n\n &:active,\n &:focus {\n color: ", ";\n }\n\n ", "\n "])), hasInvertedStyle
|
|
14813
14815
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondaryOnDark
|
|
14814
14816
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondary, hasInvertedStyle
|
|
14815
14817
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryOnDark
|
|
14816
|
-
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary,
|
|
14818
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, hasInvertedStyle
|
|
14819
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryOnDark
|
|
14820
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent.textActionPressed, showDivider && css$2(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n &:after {\n content: \"\";\n position: absolute;\n top: 0;\n right: -", "px;\n display: block;\n height: 100%;\n width: 1px;\n margin-left: ", "px;\n background-color: ", ";\n }\n "], ["\n &:after {\n content: \"\";\n position: absolute;\n top: 0;\n right: -", "px;\n display: block;\n height: 100%;\n width: 1px;\n margin-left: ", "px;\n background-color: ", ";\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.s, hasInvertedStyle
|
|
14817
14821
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.dividerOnDark
|
|
14818
14822
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.divider));
|
|
14819
14823
|
});
|
|
@@ -15332,7 +15336,7 @@ var StyledHoverDrawerItem = styled$2(Button, {
|
|
|
15332
15336
|
var semanticColors = getSemanticColors(props);
|
|
15333
15337
|
var corners = getCorners(props);
|
|
15334
15338
|
var spaces = getSpaces(props);
|
|
15335
|
-
return css$2(templateObject_53 || (templateObject_53 = __makeTemplateObject(["\n border: none;\n outline: none;\n background: transparent;\n box-shadow: none;\n justify-content: flex-start;\n text-align: left;\n padding: ", "px ", "px;\n margin-bottom: ", "px;\n border-radius: ", "px;\n min-height: auto;\n width: 100%;\n white-space: wrap;\n\n &:hover {\n border: none;\n outline: none;\n box-shadow: none;\n cursor: pointer;\n background: ", ";\n svg {\n color: ", ";\n }\n }\n "], ["\n border: none;\n outline: none;\n background: transparent;\n box-shadow: none;\n justify-content: flex-start;\n text-align: left;\n padding: ", "px ", "px;\n margin-bottom: ", "px;\n border-radius: ", "px;\n min-height: auto;\n width: 100%;\n white-space: wrap;\n\n &:hover {\n border: none;\n outline: none;\n box-shadow: none;\n cursor: pointer;\n background: ", ";\n svg {\n color: ", ";\n }\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.
|
|
15339
|
+
return css$2(templateObject_53 || (templateObject_53 = __makeTemplateObject(["\n border: none;\n outline: none;\n background: transparent;\n box-shadow: none;\n justify-content: flex-start;\n text-align: left;\n padding: ", "px ", "px;\n margin-bottom: ", "px;\n border-radius: ", "px;\n min-height: auto;\n width: 100%;\n white-space: wrap;\n\n &:hover {\n border: none;\n outline: none;\n box-shadow: none;\n cursor: pointer;\n background: ", ";\n svg {\n color: ", ";\n }\n }\n "], ["\n border: none;\n outline: none;\n background: transparent;\n box-shadow: none;\n justify-content: flex-start;\n text-align: left;\n padding: ", "px ", "px;\n margin-bottom: ", "px;\n border-radius: ", "px;\n min-height: auto;\n width: 100%;\n white-space: wrap;\n\n &:hover {\n border: none;\n outline: none;\n box-shadow: none;\n cursor: pointer;\n background: ", ";\n svg {\n color: ", ";\n }\n }\n "])), hasDetails ? spaces === null || spaces === void 0 ? void 0 : spaces.l : spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.l, hasDetails ? spaces === null || spaces === void 0 ? void 0 : spaces.s : 0, corners === null || corners === void 0 ? void 0 : corners.xl, hasInvertedStyle
|
|
15336
15340
|
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.fillHoverOnDark
|
|
15337
15341
|
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.fillHover, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.ornament);
|
|
15338
15342
|
});
|
|
@@ -16441,16 +16445,17 @@ var NavigationHeader = forwardRef(function (props, ref) {
|
|
|
16441
16445
|
var navRef = useRef(null);
|
|
16442
16446
|
var topSlotRef = useRef(null);
|
|
16443
16447
|
var _j = useState(0), topOffset = _j[0], setTopOffset = _j[1];
|
|
16444
|
-
// Use controlled
|
|
16448
|
+
// Use hybrid controlled/uncontrolled active key state
|
|
16449
|
+
// Internal state is always maintained, external prop can override
|
|
16445
16450
|
var _k = useState(""), internalActivePrimaryNavKey = _k[0], setInternalActivePrimaryNavKey = _k[1];
|
|
16446
16451
|
var activePrimaryNavKey = controlledActivePrimaryNavKey !== null && controlledActivePrimaryNavKey !== void 0 ? controlledActivePrimaryNavKey : internalActivePrimaryNavKey;
|
|
16447
16452
|
var setActivePrimaryNavKey = function (key) {
|
|
16453
|
+
// Always update internal state
|
|
16454
|
+
setInternalActivePrimaryNavKey(key);
|
|
16455
|
+
// Also call the callback if provided (for external consumers)
|
|
16448
16456
|
if (onActivePrimaryNavKeyChange) {
|
|
16449
16457
|
onActivePrimaryNavKeyChange(key);
|
|
16450
16458
|
}
|
|
16451
|
-
else {
|
|
16452
|
-
setInternalActivePrimaryNavKey(key);
|
|
16453
|
-
}
|
|
16454
16459
|
};
|
|
16455
16460
|
var theme = useTheme();
|
|
16456
16461
|
var mode = getMode({ theme: theme });
|