@ni/spright-components 3.0.9 → 4.0.0

package/dist/all-components-bundle.js

@@ -16216,6 +16216,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',
@@ -16708,6 +16709,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 +65619,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 +66954,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')};