@ni/nimble-components 20.10.0 → 20.10.2

package/dist/all-components-bundle.js

@@ -16288,7 +16288,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Mon, 23 Oct 2023 13:57:47 GMT
+   * Generated on Thu, 26 Oct 2023 17:57:28 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -63078,7 +63078,7 @@ img.ProseMirror-separator {
       },
       subRows: subRows != null ? subRows : [],
       getLeafRows: () => flattenBy(row.subRows, d => d.subRows),
-      getParentRow: () => row.parentId ? table.getRow(row.parentId) : undefined,
+      getParentRow: () => row.parentId ? table.getRow(row.parentId, true) : undefined,
       getParentRows: () => {
         let parentRows = [];
         let currentRow = row;
@@ -63204,7 +63204,9 @@ img.ProseMirror-separator {
       const sortData = rows => {
         // This will also perform a stable sorting using the row index
         // if needed.
-        const sortedData = [...rows];
+        const sortedData = rows.map(row => ({
+          ...row
+        }));
         sortedData.sort((rowA, rowB) => {
           for (let i = 0; i < availableSorting.length; i += 1) {
             var _sortEntry$desc;
@@ -65283,10 +65285,7 @@ img.ProseMirror-separator {
         }
       };
     }();
-    this.range = {
-      startIndex: 0,
-      endIndex: 0
-    };
+    this.range = null;
     this.setOptions = function (opts) {
       Object.entries(opts).forEach(function (_ref3) {
         var key = _ref3[0],
@@ -65317,9 +65316,21 @@ img.ProseMirror-separator {
         lanes: 1
       }, opts);
     };
-    this.notify = function () {
-      _this.options.onChange == null ? void 0 : _this.options.onChange(_this);
+    this.notify = function (sync) {
+      _this.options.onChange == null ? void 0 : _this.options.onChange(_this, sync);
     };
+    this.maybeNotify = memo(function () {
+      _this.calculateRange();
+      return [_this.isScrolling, _this.range ? _this.range.startIndex : null, _this.range ? _this.range.endIndex : null];
+    }, function (isScrolling) {
+      _this.notify(isScrolling);
+    }, {
+      key: 'maybeNotify',
+      debug: function debug() {
+        return _this.options.debug;
+      },
+      initialDeps: [this.isScrolling, this.range ? this.range.startIndex : null, this.range ? this.range.endIndex : null]
+    });
     this.cleanup = function () {
       _this.unsubs.filter(Boolean).forEach(function (d) {
         return d();
@@ -65344,11 +65355,8 @@ img.ProseMirror-separator {
           behavior: undefined
         });
         _this.unsubs.push(_this.options.observeElementRect(_this, function (rect) {
-          var prev = _this.scrollRect;
           _this.scrollRect = rect;
-          if (_this.options.horizontal ? rect.width !== prev.width : rect.height !== prev.height) {
-            _this.maybeNotify();
-          }
+          _this.maybeNotify();
         }));
         _this.unsubs.push(_this.options.observeElementOffset(_this, function (offset) {
           _this.scrollAdjustments = 0;
@@ -65448,33 +65456,21 @@ img.ProseMirror-separator {
     this.calculateRange = memo(function () {
       return [_this.getMeasurements(), _this.getSize(), _this.scrollOffset];
     }, function (measurements, outerSize, scrollOffset) {
-      return _this.range = calculateRange({
+      return _this.range = measurements.length > 0 && outerSize > 0 ? calculateRange({
         measurements: measurements,
         outerSize: outerSize,
         scrollOffset: scrollOffset
-      });
+      }) : null;
     }, {
       key: 'calculateRange',
       debug: function debug() {
         return _this.options.debug;
       }
     });
-    this.maybeNotify = memo(function () {
-      var range = _this.calculateRange();
-      return [range.startIndex, range.endIndex, _this.isScrolling];
-    }, function () {
-      _this.notify();
-    }, {
-      key: 'maybeNotify',
-      debug: function debug() {
-        return _this.options.debug;
-      },
-      initialDeps: [this.range.startIndex, this.range.endIndex, this.isScrolling]
-    });
     this.getIndexes = memo(function () {
       return [_this.options.rangeExtractor, _this.calculateRange(), _this.options.overscan, _this.options.count];
     }, function (rangeExtractor, range, overscan, count) {
-      return rangeExtractor(_extends({}, range, {
+      return range === null ? [] : rangeExtractor(_extends({}, range, {
         overscan: overscan,
         count: count
       }));
@@ -65495,7 +65491,7 @@ img.ProseMirror-separator {
     };
     this._measureElement = function (node, entry) {
       var item = _this.measurementsCache[_this.indexFromElement(node)];
-      if (!item) {
+      if (!item || !node.isConnected) {
         _this.measureElementCache.forEach(function (cached, key) {
           if (cached === node) {
             _this.observer.unobserve(node);
@@ -65505,13 +65501,6 @@ img.ProseMirror-separator {
         return;
       }
       var prevNode = _this.measureElementCache.get(item.key);
-      if (!node.isConnected) {
-        if (prevNode) {
-          _this.observer.unobserve(prevNode);
-          _this.measureElementCache["delete"](item.key);
-        }
-        return;
-      }
       if (prevNode !== node) {
         if (prevNode) {
           _this.observer.unobserve(prevNode);
@@ -65538,7 +65527,7 @@ img.ProseMirror-separator {
         }
         _this.pendingMeasuredCacheIndexes.push(item.index);
         _this.itemSizeCache = new Map(_this.itemSizeCache.set(item.key, size));
-        _this.notify();
+        _this.notify(false);
       }
     };
     this.measureElement = function (node) {
@@ -65698,7 +65687,7 @@ img.ProseMirror-separator {
     };
     this.measure = function () {
       _this.itemSizeCache = new Map();
-      _this.notify();
+      _this.notify(false);
     };
     this.setOptions(_opts);
     this.scrollRect = this.options.initialRect;
@@ -68205,6 +68194,191 @@ img.ProseMirror-separator {
       .register(nimbleTableColumnDateText());
   DesignSystem.tagFor(TableColumnDateText);
 
+  /**
+   * A cell view for displaying duration fields as text
+   */
+  class TableColumnDurationTextCellView extends TableColumnTextCellViewBase {
+      columnConfigChanged() {
+          this.updateText();
+      }
+      cellRecordChanged() {
+          this.updateText();
+      }
+      updateText() {
+          this.text = this.columnConfig?.formatter.format(this.cellRecord?.value) ?? '';
+      }
+  }
+  const durationTextCellView = TableColumnDurationTextCellView.compose({
+      baseName: 'table-column-duration-text-cell-view',
+      template: template$8,
+      styles: styles$a
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('nimble')
+      .register(durationTextCellView());
+  const tableColumnDurationTextCellViewTag = DesignSystem.tagFor(TableColumnDurationTextCellView);
+
+  /**
+   * A class for formatting a numeric value in the unit of milliseconds into a display value representing its
+   *  days, hours, minutes, and seconds.
+   */
+  class DurationFormatter {
+      constructor(lang) {
+          this.lang = lang;
+          this.daysFormatter = new Intl.NumberFormat(this.lang, {
+              style: 'unit',
+              unit: 'day'
+          });
+          this.hoursFormatter = new Intl.NumberFormat(this.lang, {
+              style: 'unit',
+              unit: 'hour'
+          });
+          this.minutesFormatter = new Intl.NumberFormat(this.lang, {
+              style: 'unit',
+              unit: 'minute'
+          });
+          this.secondsFormatter = new Intl.NumberFormat(this.lang, {
+              style: 'unit',
+              unit: 'second'
+          });
+          this.scientificSecondsFormatter = new Intl.NumberFormat(this.lang, {
+              style: 'unit',
+              unit: 'second',
+              notation: 'scientific',
+              maximumFractionDigits: 3
+          });
+      }
+      format(milliseconds) {
+          if (typeof milliseconds !== 'number'
+              || milliseconds < 0
+              || !Number.isFinite(milliseconds)) {
+              return '';
+          }
+          const result = [];
+          const millisecondsPerSecond = 1000;
+          const millisecondsPerMinute = millisecondsPerSecond * 60;
+          const millisecondsPerHour = millisecondsPerMinute * 60;
+          const millisecondsPerDay = millisecondsPerHour * 24;
+          const fractionalDays = milliseconds / millisecondsPerDay;
+          const maximumDays = 999;
+          let remainingTime = milliseconds;
+          const days = Math.floor(fractionalDays);
+          if (days <= maximumDays && days > 0) {
+              const formattedDays = this.daysFormatter.format(days);
+              result.push(formattedDays);
+              remainingTime -= days * millisecondsPerDay;
+          }
+          else if (days > maximumDays) {
+              return this.scientificSecondsFormatter.format(milliseconds / millisecondsPerSecond);
+          }
+          const hours = Math.floor((milliseconds / millisecondsPerHour) % 24);
+          remainingTime -= hours * millisecondsPerHour;
+          if (hours) {
+              const formattedHours = this.hoursFormatter.format(hours);
+              result.push(formattedHours);
+          }
+          const minutes = Math.floor((milliseconds / millisecondsPerMinute) % 60);
+          remainingTime -= minutes * millisecondsPerMinute;
+          if (minutes) {
+              const formattedMinutes = this.minutesFormatter.format(minutes);
+              result.push(formattedMinutes);
+          }
+          const valueInSeconds = remainingTime / millisecondsPerSecond;
+          // if -0, coerce to 0
+          const seconds = valueInSeconds === 0 ? 0 : valueInSeconds % 60;
+          if (milliseconds < 1 && valueInSeconds !== 0) {
+              return this.scientificSecondsFormatter.format(valueInSeconds);
+          }
+          if (seconds >= 0.0005 || (seconds === 0 && result.length === 0)) {
+              const formattedSeconds = this.secondsFormatter.format(seconds);
+              result.push(formattedSeconds);
+          }
+          return result.join(', ');
+      }
+  }
+
+  /**
+   * The group header view for displaying duration fields as text.
+   */
+  class TableColumnDurationTextGroupHeaderView extends TableColumnTextGroupHeaderViewBase {
+      columnConfigChanged() {
+          this.updateText();
+      }
+      groupHeaderValueChanged() {
+          this.updateText();
+      }
+      updateText() {
+          if (this.columnConfig) {
+              this.text = this.columnConfig.formatter.format(this.groupHeaderValue);
+          }
+          else {
+              this.text = '';
+          }
+      }
+  }
+  const tableColumnDurationTextGroupHeaderView = TableColumnDurationTextGroupHeaderView.compose({
+      baseName: 'table-column-duration-text-group-header-view',
+      template: template$9,
+      styles: styles$b
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('nimble')
+      .register(tableColumnDurationTextGroupHeaderView());
+  const tableColumnDurationTextGroupHeaderViewTag = DesignSystem.tagFor(TableColumnDurationTextGroupHeaderView);
+
+  /**
+   * The table column for displaying a duration value as text.
+   */
+  class TableColumnDurationText extends TableColumnTextBase {
+      constructor() {
+          super(...arguments);
+          this.langSubscriber = {
+              handleChange: () => {
+                  this.updateColumnConfig();
+              }
+          };
+      }
+      connectedCallback() {
+          super.connectedCallback();
+          lang$1.subscribe(this.langSubscriber, this);
+          this.updateColumnConfig();
+      }
+      disconnectedCallback() {
+          super.disconnectedCallback();
+          lang$1.unsubscribe(this.langSubscriber, this);
+      }
+      getColumnInternalsOptions() {
+          return {
+              cellRecordFieldNames: ['value'],
+              cellViewTag: tableColumnDurationTextCellViewTag,
+              groupHeaderViewTag: tableColumnDurationTextGroupHeaderViewTag,
+              delegatedEvents: [],
+              sortOperation: TableColumnSortOperation.basic
+          };
+      }
+      updateColumnConfig() {
+          const formatter = new DurationFormatter(lang$1.getValueFor(this));
+          if (formatter) {
+              const columnConfig = {
+                  formatter
+              };
+              this.columnInternals.columnConfig = columnConfig;
+          }
+          else {
+              this.columnInternals.columnConfig = undefined;
+          }
+      }
+  }
+  const nimbleTableColumnDurationText = TableColumnDurationText.compose({
+      baseName: 'table-column-duration-text',
+      template: template$b,
+      styles: styles$d
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('nimble')
+      .register(nimbleTableColumnDurationText());
+  DesignSystem.tagFor(TableColumnDurationText);
+
   /**
    * Converts a Mapping key (which is a string when configured in HTML) to the
    * given keyType. The converted value can then be used to compare against