@czi-sds/components 22.1.1 → 22.1.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 +2 -0
- package/dist/index.cjs.js +16 -9
- package/dist/index.esm.d.ts +2 -0
- package/dist/index.esm.js +16 -9
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
package/dist/index.cjs.d.ts
CHANGED
|
@@ -967,6 +967,7 @@ interface CellHeaderExtraProps extends CommonThemeProps {
|
|
|
967
967
|
active?: boolean;
|
|
968
968
|
hideSortIcon?: boolean;
|
|
969
969
|
horizontalAlign?: "left" | "center" | "right";
|
|
970
|
+
hover?: boolean;
|
|
970
971
|
}
|
|
971
972
|
type CellHeaderDirection = "asc" | "desc";
|
|
972
973
|
interface CellHeaderContentProps {
|
|
@@ -975,6 +976,7 @@ interface CellHeaderContentProps {
|
|
|
975
976
|
hideSortIcon?: boolean;
|
|
976
977
|
horizontalAlign?: "left" | "center" | "right";
|
|
977
978
|
children: React.ReactNode;
|
|
979
|
+
hover?: boolean;
|
|
978
980
|
}
|
|
979
981
|
interface CellHeaderRawProps extends Omit<React.HTMLProps<HTMLTableCellElement>, "as"> {
|
|
980
982
|
tooltipText?: string;
|
package/dist/index.cjs.js
CHANGED
|
@@ -6090,6 +6090,7 @@ var doNotForwardProps$i = [
|
|
|
6090
6090
|
"tooltipProps",
|
|
6091
6091
|
"tooltipText",
|
|
6092
6092
|
"hideSortIcon",
|
|
6093
|
+
"hover",
|
|
6093
6094
|
];
|
|
6094
6095
|
var StyledSortingIcon = styled__default.default(Icon, {
|
|
6095
6096
|
shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
|
|
@@ -6103,11 +6104,17 @@ var StyledSortingIcon = styled__default.default(Icon, {
|
|
|
6103
6104
|
var StyledTableHeader$1 = styled__default.default("th", {
|
|
6104
6105
|
shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
|
|
6105
6106
|
})(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontHeaderS, focusVisibleA11yStyle, function (props) {
|
|
6106
|
-
var _a, _b, _c, _d, _e, _f
|
|
6107
|
-
var
|
|
6107
|
+
var _a, _b, _c, _d, _e, _f;
|
|
6108
|
+
var _g = props.active, active = _g === void 0 ? false : _g, _h = props.horizontalAlign, horizontalAlign = _h === void 0 ? "left" : _h, _j = props.hover, hover = _j === void 0 ? true : _j;
|
|
6108
6109
|
var spaces = getSpaces(props);
|
|
6109
6110
|
var semanticColors = getSemanticColors(props);
|
|
6110
|
-
|
|
6111
|
+
var defaultColor = active
|
|
6112
|
+
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction
|
|
6113
|
+
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary;
|
|
6114
|
+
var hoverColor = active
|
|
6115
|
+
? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.textActionHover
|
|
6116
|
+
: (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary;
|
|
6117
|
+
return "\n color: ".concat(defaultColor, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n text-align: ").concat(horizontalAlign, ";\n min-width: 96px;\n cursor: ").concat(hover ? "pointer" : "default", ";\n vertical-align: bottom;\n\n & .MuiButtonBase-root {\n outline: none;\n }\n\n &:hover {\n color: ").concat(hover ? hoverColor : defaultColor, ";\n\n & .MuiButtonBase-root {\n color: ").concat(hoverColor, ";\n opacity: 1;\n }\n\n & svg {\n color: ").concat(active ? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.ornamentHover : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.ornamentSecondaryHover, ";\n }\n }\n ");
|
|
6111
6118
|
});
|
|
6112
6119
|
var StyledCellHeaderContainer = styled__default.default("div", {
|
|
6113
6120
|
shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
|
|
@@ -6118,19 +6125,19 @@ var StyledCellHeaderContainer = styled__default.default("div", {
|
|
|
6118
6125
|
var templateObject_1$E, templateObject_2$o, templateObject_3$f;
|
|
6119
6126
|
|
|
6120
6127
|
var CellHeaderContent = function (props) {
|
|
6121
|
-
var active = props.active, children = props.children, _a = props.direction, direction = _a === void 0 ? "desc" : _a, _b = props.hideSortIcon, hideSortIcon = _b === void 0 ? false : _b, horizontalAlign = props.horizontalAlign;
|
|
6128
|
+
var active = props.active, children = props.children, _a = props.direction, direction = _a === void 0 ? "desc" : _a, _b = props.hideSortIcon, hideSortIcon = _b === void 0 ? false : _b, horizontalAlign = props.horizontalAlign, hover = props.hover;
|
|
6122
6129
|
var sdsIconName = direction === "asc" ? "ChevronUp" : "ChevronDown";
|
|
6123
6130
|
var sortIcon = (jsxRuntime.jsx(StyledSortingIcon, { "aria-label": direction === "asc"
|
|
6124
6131
|
? "Change sort direction from ascending to descending"
|
|
6125
6132
|
: "Change sort direction from descending to ascending", sdsIcon: sdsIconName, sdsSize: "xs", active: active, hideSortIcon: hideSortIcon }));
|
|
6126
|
-
return (jsxRuntime.jsxs(StyledCellHeaderContainer, { horizontalAlign: horizontalAlign, children: [jsxRuntime.jsx("span", { children: children }), (!hideSortIcon || active) && sortIcon] }));
|
|
6133
|
+
return (jsxRuntime.jsxs(StyledCellHeaderContainer, { horizontalAlign: horizontalAlign, children: [jsxRuntime.jsx("span", { children: children }), (!hideSortIcon || active) && hover && sortIcon] }));
|
|
6127
6134
|
};
|
|
6128
6135
|
var CellHeader = React.forwardRef(function (props, ref) {
|
|
6129
|
-
var children = props.children, _a = props.shouldShowTooltipOnHover, shouldShowTooltipOnHover = _a === void 0 ? false : _a, tooltipProps = props.tooltipProps, _b = props.tooltipText, tooltipText = _b === void 0 ? "" : _b, tooltipSubtitle = props.tooltipSubtitle, rest = __rest(props, ["children", "shouldShowTooltipOnHover", "tooltipProps", "tooltipText", "tooltipSubtitle"]);
|
|
6130
|
-
if (shouldShowTooltipOnHover) {
|
|
6131
|
-
return (jsxRuntime.jsx(Tooltip, __assign({ arrow: true, placement: "top-start", sdsStyle: "dark", subtitle: tooltipSubtitle, title: tooltipText }, tooltipProps, { children: jsxRuntime.jsx(StyledTableHeader$1, __assign({ ref: ref }, rest, { children: jsxRuntime.jsx(CellHeaderContent, __assign({}, props, { children: children })) })) })));
|
|
6136
|
+
var children = props.children, _a = props.shouldShowTooltipOnHover, shouldShowTooltipOnHover = _a === void 0 ? false : _a, tooltipProps = props.tooltipProps, _b = props.tooltipText, tooltipText = _b === void 0 ? "" : _b, tooltipSubtitle = props.tooltipSubtitle, _c = props.hover, hover = _c === void 0 ? false : _c, rest = __rest(props, ["children", "shouldShowTooltipOnHover", "tooltipProps", "tooltipText", "tooltipSubtitle", "hover"]);
|
|
6137
|
+
if (shouldShowTooltipOnHover && hover) {
|
|
6138
|
+
return (jsxRuntime.jsx(Tooltip, __assign({ arrow: true, placement: "top-start", sdsStyle: "dark", subtitle: tooltipSubtitle, title: tooltipText }, tooltipProps, { children: jsxRuntime.jsx(StyledTableHeader$1, __assign({ ref: ref, hover: hover }, rest, { children: jsxRuntime.jsx(CellHeaderContent, __assign({}, props, { hover: hover, children: children })) })) })));
|
|
6132
6139
|
}
|
|
6133
|
-
return (jsxRuntime.jsx(StyledTableHeader$1, __assign({ ref: ref }, rest, { children: jsxRuntime.jsx(CellHeaderContent, __assign({}, props, { children: children })) })));
|
|
6140
|
+
return (jsxRuntime.jsx(StyledTableHeader$1, __assign({ ref: ref, hover: hover }, rest, { children: jsxRuntime.jsx(CellHeaderContent, __assign({ hover: hover }, props, { children: children })) })));
|
|
6134
6141
|
});
|
|
6135
6142
|
|
|
6136
6143
|
var small = function (props) {
|
package/dist/index.esm.d.ts
CHANGED
|
@@ -967,6 +967,7 @@ interface CellHeaderExtraProps extends CommonThemeProps {
|
|
|
967
967
|
active?: boolean;
|
|
968
968
|
hideSortIcon?: boolean;
|
|
969
969
|
horizontalAlign?: "left" | "center" | "right";
|
|
970
|
+
hover?: boolean;
|
|
970
971
|
}
|
|
971
972
|
type CellHeaderDirection = "asc" | "desc";
|
|
972
973
|
interface CellHeaderContentProps {
|
|
@@ -975,6 +976,7 @@ interface CellHeaderContentProps {
|
|
|
975
976
|
hideSortIcon?: boolean;
|
|
976
977
|
horizontalAlign?: "left" | "center" | "right";
|
|
977
978
|
children: React.ReactNode;
|
|
979
|
+
hover?: boolean;
|
|
978
980
|
}
|
|
979
981
|
interface CellHeaderRawProps extends Omit<React.HTMLProps<HTMLTableCellElement>, "as"> {
|
|
980
982
|
tooltipText?: string;
|
package/dist/index.esm.js
CHANGED
|
@@ -6066,6 +6066,7 @@ var doNotForwardProps$i = [
|
|
|
6066
6066
|
"tooltipProps",
|
|
6067
6067
|
"tooltipText",
|
|
6068
6068
|
"hideSortIcon",
|
|
6069
|
+
"hover",
|
|
6069
6070
|
];
|
|
6070
6071
|
var StyledSortingIcon = styled(Icon, {
|
|
6071
6072
|
shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
|
|
@@ -6079,11 +6080,17 @@ var StyledSortingIcon = styled(Icon, {
|
|
|
6079
6080
|
var StyledTableHeader$1 = styled("th", {
|
|
6080
6081
|
shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
|
|
6081
6082
|
})(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontHeaderS, focusVisibleA11yStyle, function (props) {
|
|
6082
|
-
var _a, _b, _c, _d, _e, _f
|
|
6083
|
-
var
|
|
6083
|
+
var _a, _b, _c, _d, _e, _f;
|
|
6084
|
+
var _g = props.active, active = _g === void 0 ? false : _g, _h = props.horizontalAlign, horizontalAlign = _h === void 0 ? "left" : _h, _j = props.hover, hover = _j === void 0 ? true : _j;
|
|
6084
6085
|
var spaces = getSpaces(props);
|
|
6085
6086
|
var semanticColors = getSemanticColors(props);
|
|
6086
|
-
|
|
6087
|
+
var defaultColor = active
|
|
6088
|
+
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction
|
|
6089
|
+
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary;
|
|
6090
|
+
var hoverColor = active
|
|
6091
|
+
? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.textActionHover
|
|
6092
|
+
: (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary;
|
|
6093
|
+
return "\n color: ".concat(defaultColor, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n text-align: ").concat(horizontalAlign, ";\n min-width: 96px;\n cursor: ").concat(hover ? "pointer" : "default", ";\n vertical-align: bottom;\n\n & .MuiButtonBase-root {\n outline: none;\n }\n\n &:hover {\n color: ").concat(hover ? hoverColor : defaultColor, ";\n\n & .MuiButtonBase-root {\n color: ").concat(hoverColor, ";\n opacity: 1;\n }\n\n & svg {\n color: ").concat(active ? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.ornamentHover : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.ornamentSecondaryHover, ";\n }\n }\n ");
|
|
6087
6094
|
});
|
|
6088
6095
|
var StyledCellHeaderContainer = styled("div", {
|
|
6089
6096
|
shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
|
|
@@ -6094,19 +6101,19 @@ var StyledCellHeaderContainer = styled("div", {
|
|
|
6094
6101
|
var templateObject_1$E, templateObject_2$o, templateObject_3$f;
|
|
6095
6102
|
|
|
6096
6103
|
var CellHeaderContent = function (props) {
|
|
6097
|
-
var active = props.active, children = props.children, _a = props.direction, direction = _a === void 0 ? "desc" : _a, _b = props.hideSortIcon, hideSortIcon = _b === void 0 ? false : _b, horizontalAlign = props.horizontalAlign;
|
|
6104
|
+
var active = props.active, children = props.children, _a = props.direction, direction = _a === void 0 ? "desc" : _a, _b = props.hideSortIcon, hideSortIcon = _b === void 0 ? false : _b, horizontalAlign = props.horizontalAlign, hover = props.hover;
|
|
6098
6105
|
var sdsIconName = direction === "asc" ? "ChevronUp" : "ChevronDown";
|
|
6099
6106
|
var sortIcon = (jsx(StyledSortingIcon, { "aria-label": direction === "asc"
|
|
6100
6107
|
? "Change sort direction from ascending to descending"
|
|
6101
6108
|
: "Change sort direction from descending to ascending", sdsIcon: sdsIconName, sdsSize: "xs", active: active, hideSortIcon: hideSortIcon }));
|
|
6102
|
-
return (jsxs(StyledCellHeaderContainer, { horizontalAlign: horizontalAlign, children: [jsx("span", { children: children }), (!hideSortIcon || active) && sortIcon] }));
|
|
6109
|
+
return (jsxs(StyledCellHeaderContainer, { horizontalAlign: horizontalAlign, children: [jsx("span", { children: children }), (!hideSortIcon || active) && hover && sortIcon] }));
|
|
6103
6110
|
};
|
|
6104
6111
|
var CellHeader = forwardRef(function (props, ref) {
|
|
6105
|
-
var children = props.children, _a = props.shouldShowTooltipOnHover, shouldShowTooltipOnHover = _a === void 0 ? false : _a, tooltipProps = props.tooltipProps, _b = props.tooltipText, tooltipText = _b === void 0 ? "" : _b, tooltipSubtitle = props.tooltipSubtitle, rest = __rest(props, ["children", "shouldShowTooltipOnHover", "tooltipProps", "tooltipText", "tooltipSubtitle"]);
|
|
6106
|
-
if (shouldShowTooltipOnHover) {
|
|
6107
|
-
return (jsx(Tooltip, __assign({ arrow: true, placement: "top-start", sdsStyle: "dark", subtitle: tooltipSubtitle, title: tooltipText }, tooltipProps, { children: jsx(StyledTableHeader$1, __assign({ ref: ref }, rest, { children: jsx(CellHeaderContent, __assign({}, props, { children: children })) })) })));
|
|
6112
|
+
var children = props.children, _a = props.shouldShowTooltipOnHover, shouldShowTooltipOnHover = _a === void 0 ? false : _a, tooltipProps = props.tooltipProps, _b = props.tooltipText, tooltipText = _b === void 0 ? "" : _b, tooltipSubtitle = props.tooltipSubtitle, _c = props.hover, hover = _c === void 0 ? false : _c, rest = __rest(props, ["children", "shouldShowTooltipOnHover", "tooltipProps", "tooltipText", "tooltipSubtitle", "hover"]);
|
|
6113
|
+
if (shouldShowTooltipOnHover && hover) {
|
|
6114
|
+
return (jsx(Tooltip, __assign({ arrow: true, placement: "top-start", sdsStyle: "dark", subtitle: tooltipSubtitle, title: tooltipText }, tooltipProps, { children: jsx(StyledTableHeader$1, __assign({ ref: ref, hover: hover }, rest, { children: jsx(CellHeaderContent, __assign({}, props, { hover: hover, children: children })) })) })));
|
|
6108
6115
|
}
|
|
6109
|
-
return (jsx(StyledTableHeader$1, __assign({ ref: ref }, rest, { children: jsx(CellHeaderContent, __assign({}, props, { children: children })) })));
|
|
6116
|
+
return (jsx(StyledTableHeader$1, __assign({ ref: ref, hover: hover }, rest, { children: jsx(CellHeaderContent, __assign({ hover: hover }, props, { children: children })) })));
|
|
6110
6117
|
});
|
|
6111
6118
|
|
|
6112
6119
|
var small = function (props) {
|