@ni/spright-components 3.0.8 → 4.0.0

package/dist/all-components-bundle.js

@@ -16061,6 +16061,7 @@
   const DigitalGreenDark110 = "#00613f";
   const PowerGreen = "#32eb96";
   const PowerGreen10 = "#364941";
+  const Black22 = "#e6e6e6";
   const Black82 = "#434445";
   const NiHoneyLight = "#ffe76b";
   const NiScarlet = "#ef463f";
@@ -16215,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',
@@ -16406,7 +16408,9 @@
       calendarEventBackgroundHoverTransientColor: 'calendar-event-background-hover-transient-color',
       calendarRowBackgroundSelectedColor: 'calendar-row-background-selected-color',
       calendarEventFillBlockedColor: 'calendar-event-fill-blocked-color',
-      calendarGrabHandleBackgroundColor: 'calendar-grab-handle-background-color'
+      calendarGrabHandleBackgroundColor: 'calendar-grab-handle-background-color',
+      calendarGridBorderColor: 'calendar-grid-border-color',
+      calendarGroupHeaderBackgroundColor: 'calendar-group-header-background-color'
   };
   const prefix = 'ni-nimble';
   const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
@@ -16680,7 +16684,9 @@
   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)));
   DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventFillBlockedColor)).withDefault((element) => getColorForTheme(element, hexToRgbaCssColor(Black91, 0.07), Black82, Black82));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarGrabHandleBackgroundColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, DigitalGreenLight));
+  DesignToken.create(styleNameFromTokenName(tokenNames.calendarGrabHandleBackgroundColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, PowerGreen, PowerGreen));
+  DesignToken.create(styleNameFromTokenName(tokenNames.calendarGridBorderColor)).withDefault((element) => getColorForTheme(element, Black22, Black80, Black80));
+  DesignToken.create(styleNameFromTokenName(tokenNames.calendarGroupHeaderBackgroundColor)).withDefault((element) => getColorForTheme(element, Black7, hexToRgbaCssColor(Black91, 0.1), hexToRgbaCssColor(Black91, 0.1)));
   // Component Sizing Tokens
   const controlHeight = DesignToken.create(styleNameFromTokenName(tokenNames.controlHeight)).withDefault('32px');
   const controlSlimHeight = DesignToken.create(styleNameFromTokenName(tokenNames.controlSlimHeight)).withDefault('24px');
@@ -16703,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)}`);
@@ -65610,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;
     }
@@ -66936,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')};