@ni/nimble-components 31.3.0 → 32.1.0

package/dist/all-components-bundle.js

@@ -16053,6 +16053,7 @@
   const ForestGreen = "#074023";
   const DigitalGreenLight = "#009b65";
   const DigitalGreenLight10 = "#e6f5f0";
+  const DigitalGreenLight30 = "#b3e1d1";
   const NiSky = "#3cb4e7";
   const BannerFail100DarkUi = "#d63434";
   const Warning100LightUi = "#ff4b00";
@@ -16061,6 +16062,7 @@
   const DigitalGreenDark110 = "#00613f";
   const PowerGreen = "#32eb96";
   const PowerGreen10 = "#364941";
+  const PowerGreen30 = "#356d54";
   const Black22 = "#e6e6e6";
   const Black82 = "#434445";
   const NiHoneyLight = "#ffe76b";
@@ -16216,6 +16218,7 @@
       spinnerSmallHeight: 'spinner-small-height',
       spinnerMediumHeight: 'spinner-medium-height',
       spinnerLargeHeight: 'spinner-large-height',
+      tableFitRowsHeight: 'table-fit-rows-height',
       smallDelay: 'small-delay',
       mediumDelay: 'medium-delay',
       largeDelay: 'large-delay',
@@ -16678,7 +16681,7 @@
   DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventStaticFontColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark110, White, White));
   DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventDynamicFontColor)).withDefault((element) => getColorForTheme(element, White, White, White));
   DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventTransientFontColor)).withDefault((element) => getColorForTheme(element, White, White, White));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundHoverStaticColor)).withDefault((element) => getColorForTheme(element, hexToRgbaCssColor(DigitalGreenLight, 0.3), hexToRgbaCssColor(PowerGreen, 0.3), hexToRgbaCssColor(PowerGreen, 0.3)));
+  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundHoverStaticColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight30, PowerGreen30, PowerGreen30));
   DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundHoverDynamicColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark110, DigitalGreenDark105, DigitalGreenDark105));
   DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundHoverTransientColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark110, DigitalGreenDark105, DigitalGreenDark105));
   DesignToken.create(styleNameFromTokenName(tokenNames.calendarRowBackgroundSelectedColor)).withDefault((element) => getColorForTheme(element, hexToRgbaCssColor(DigitalGreenLight, 0.2), hexToRgbaCssColor(PowerGreen, 0.2), hexToRgbaCssColor(PowerGreen, 0.2)));
@@ -16708,6 +16711,9 @@
   const spinnerSmallHeight = DesignToken.create(styleNameFromTokenName(tokenNames.spinnerSmallHeight)).withDefault('16px');
   DesignToken.create(styleNameFromTokenName(tokenNames.spinnerMediumHeight)).withDefault('32px');
   DesignToken.create(styleNameFromTokenName(tokenNames.spinnerLargeHeight)).withDefault('64px');
+  // The token gets a default value of the table's default height (480px)
+  // but is given a calculated value in the table styles.
+  const tableFitRowsHeight = DesignToken.create(styleNameFromTokenName(tokenNames.tableFitRowsHeight)).withDefault('480px');
   // Drop Shadow Tokens
   DesignToken.create(styleNameFromTokenName(tokenNames.elevation1BoxShadow)).withDefault((element) => `0px 1px 4px ${hexToRgbaCssColor(getColorForTheme(element, Black, Black, Black), 0.16)}`);
   const elevation2BoxShadow = DesignToken.create(styleNameFromTokenName(tokenNames.elevation2BoxShadow)).withDefault((element) => `0px 2px 4px ${hexToRgbaCssColor(getColorForTheme(element, Black, Black, Black), 0.16)}`);
@@ -65615,6 +65621,15 @@ img.ProseMirror-separator {
 
     :host {
         height: 480px;
+        ${tableFitRowsHeight.cssCustomProperty}: calc(var(--ni-private-table-scroll-height) + ${controlHeight});
+        ${
+/**
+ * Set a default maximum height for the table of 40.5 rows plus the header row so
+ * that clients don't accidentally create a table that tries to render too many rows at once.
+ * If needed, the max-height can be overridden by the client, but setting a default ensures
+ * that the max-height is considered if a larger one is needed rather than being overlooked.
+ */ ''}
+        max-height: calc(${controlHeight} + (40.5 * (2 * ${borderWidth} + ${controlHeight})));
         --ni-private-column-divider-width: 2px;
         --ni-private-column-divider-padding: 3px;
     }
@@ -66941,11 +66956,11 @@ focus outline in that case.
         aria-multiselectable="${x => x.ariaMultiSelectable}"
         ${children$1({ property: 'childItems', filter: elements() })}
     >
+        <style>:host{ --ni-private-table-scroll-height: ${x => x.virtualizer.scrollHeight}px; }</style>
         <div class="table-container ${x => (x.windowShiftKeyDown ? 'disable-select' : '')}"
             style="
             --ni-private-table-scroll-x: -${x => x.scrollX}px;
             --ni-private-table-header-container-margin-right: ${x => x.virtualizer.headerContainerMarginRight}px;
-            --ni-private-table-scroll-height: ${x => x.virtualizer.scrollHeight}px;
             --ni-private-table-row-container-top: ${x => x.virtualizer.rowContainerYOffset}px;
             --ni-private-table-row-grid-columns: ${x => (x.rowGridColumns ? x.rowGridColumns : '')};
             --ni-private-table-cursor-override: ${x => (x.layoutManager.isColumnBeingSized ? 'col-resize' : 'default')};