@czi-sds/components 22.5.4 → 22.5.6

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.
Files changed (4) hide show
  1. package/dist/index.cjs.js +5 -5
  2. package/dist/index.esm.js +5 -5
  3. package/dist/tsconfig.tsbuildinfo +1 -1
  4. package/package.json +2 -2
package/dist/index.cjs.js CHANGED
@@ -14561,7 +14561,7 @@ var StyledDrawer$1 = styled__default.default(material.Drawer, {
14561
14561
  shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
14562
14562
  })(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
14563
14563
  var colors = getSemanticColors(props);
14564
- return "\n .MuiDrawer-paper {\n background: ".concat(props.hasInvertedStyle ? colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimaryInverse : colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimary, ";\n width: 100%;\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n justify-content: space-between;\n }\n ");
14564
+ return "\n .MuiDrawer-paper {\n background: ".concat(props.hasInvertedStyle ? colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimaryInverse : colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimary, ";\n width: 100%;\n display: flex;\n flex-direction: column;\n min-height: 100dvh;\n justify-content: space-between;\n }\n ");
14565
14565
  });
14566
14566
  var StyledNarrowButton = styled__default.default(Button, {
14567
14567
  shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
@@ -15098,7 +15098,7 @@ var StyledTabs$1 = styled__default.default(material.Tabs, {
15098
15098
  shouldForwardProp: function (prop) { return !doNotForwardProps$5.includes(prop); },
15099
15099
  })(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
15100
15100
  var _a, _b;
15101
- var _c = props.width, width = _c === void 0 ? "180px" : _c;
15101
+ var _c = props.width, width = _c === void 0 ? "100%" : _c;
15102
15102
  var spaces = getSpaces(props);
15103
15103
  var semanticColors = getSemanticColors(props);
15104
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 ");
@@ -15171,8 +15171,8 @@ function useInView(items, offsetTop) {
15171
15171
  return elements;
15172
15172
  }
15173
15173
 
15174
- var scrollIntoViewWithOffset = function (selector, offset) {
15175
- var element = document.querySelector(selector);
15174
+ var scrollIntoViewWithOffset = function (id, offset) {
15175
+ var element = document.getElementById(id);
15176
15176
  if (!element)
15177
15177
  return;
15178
15178
  window.scrollTo({
@@ -15208,7 +15208,7 @@ var NavigationJumpTo = React.forwardRef(function (props, ref) {
15208
15208
  setNavItemClicked(true);
15209
15209
  // Smoothly scroll to the section of the page referenced by the clicked nav item
15210
15210
  if (offsetTop) {
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);
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);
15212
15212
  }
15213
15213
  else {
15214
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({
package/dist/index.esm.js CHANGED
@@ -14538,7 +14538,7 @@ var StyledDrawer$1 = styled$2(Drawer, {
14538
14538
  shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
14539
14539
  })(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
14540
14540
  var colors = getSemanticColors(props);
14541
- return "\n .MuiDrawer-paper {\n background: ".concat(props.hasInvertedStyle ? colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimaryInverse : colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimary, ";\n width: 100%;\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n justify-content: space-between;\n }\n ");
14541
+ return "\n .MuiDrawer-paper {\n background: ".concat(props.hasInvertedStyle ? colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimaryInverse : colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimary, ";\n width: 100%;\n display: flex;\n flex-direction: column;\n min-height: 100dvh;\n justify-content: space-between;\n }\n ");
14542
14542
  });
14543
14543
  var StyledNarrowButton = styled$2(Button, {
14544
14544
  shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
@@ -15075,7 +15075,7 @@ var StyledTabs$1 = styled$2(Tabs$1, {
15075
15075
  shouldForwardProp: function (prop) { return !doNotForwardProps$5.includes(prop); },
15076
15076
  })(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
15077
15077
  var _a, _b;
15078
- var _c = props.width, width = _c === void 0 ? "180px" : _c;
15078
+ var _c = props.width, width = _c === void 0 ? "100%" : _c;
15079
15079
  var spaces = getSpaces(props);
15080
15080
  var semanticColors = getSemanticColors(props);
15081
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 ");
@@ -15148,8 +15148,8 @@ function useInView(items, offsetTop) {
15148
15148
  return elements;
15149
15149
  }
15150
15150
 
15151
- var scrollIntoViewWithOffset = function (selector, offset) {
15152
- var element = document.querySelector(selector);
15151
+ var scrollIntoViewWithOffset = function (id, offset) {
15152
+ var element = document.getElementById(id);
15153
15153
  if (!element)
15154
15154
  return;
15155
15155
  window.scrollTo({
@@ -15185,7 +15185,7 @@ var NavigationJumpTo = forwardRef(function (props, ref) {
15185
15185
  setNavItemClicked(true);
15186
15186
  // Smoothly scroll to the section of the page referenced by the clicked nav item
15187
15187
  if (offsetTop) {
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);
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);
15189
15189
  }
15190
15190
  else {
15191
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({