@deephaven/iris-grid 0.43.0 → 0.44.1-beta.0

package/dist/sidebar/RollupRows.css

@@ -0,0 +1,120 @@
+/* stylelint-disable scss/at-import-no-partial-leading-underscore */
+.rollup-rows {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  outline: 0;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+.rollup-rows .section-title {
+  margin: 0 0.5rem;
+  padding-bottom: 0;
+}
+.rollup-rows .top-menu,
+.rollup-rows .bottom-menu {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 0.25rem;
+  z-index: 2;
+}
+.rollup-rows .top-menu .btn-link-icon,
+.rollup-rows .bottom-menu .btn-link-icon {
+  min-width: 1rem;
+  padding: 0 0.5rem;
+  margin-right: 0.25rem;
+}
+.rollup-rows .top-menu .btn-link-icon:first-of-type,
+.rollup-rows .bottom-menu .btn-link-icon:first-of-type {
+  margin-left: 0.25rem;
+}
+.rollup-rows .top-menu .btn-link-icon.active,
+.rollup-rows .bottom-menu .btn-link-icon.active {
+  color: #f0f0ee;
+}
+.rollup-rows .top-menu .btn-link-icon:hover,
+.rollup-rows .bottom-menu .btn-link-icon:hover {
+  color: #4878ea;
+}
+.rollup-rows .top-menu .label,
+.rollup-rows .bottom-menu .label {
+  font-weight: 500;
+}
+.rollup-rows .bottom-menu {
+  margin-left: 0;
+  padding-left: 0.5rem;
+  border-top: 1px solid #1a171a;
+  padding-top: 0.5rem;
+}
+.rollup-rows .bottom-menu .custom-checkbox {
+  font-size: smaller;
+  margin-left: 0.25rem;
+}
+.rollup-rows .bottom-menu .custom-checkbox .custom-control-label {
+  padding-top: 2px;
+}
+.rollup-rows .item-list-scroll-pane {
+  border: none;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.rollup-rows .rollup-rows-group-by {
+  display: flex;
+  flex-direction: column;
+  background-color: #373438;
+}
+.rollup-rows .rollup-rows-group-by .draggable-item-list {
+  flex-grow: 1;
+  transition: height 0.15s;
+}
+.rollup-rows .rollup-rows-group-by .btn-delete-grouping {
+  margin-right: 0.5rem;
+  padding: 0 0.5rem;
+}
+.rollup-rows .rollup-rows-group-by .placeholder {
+  margin: 0.5rem;
+  padding: 1rem;
+  text-align: center;
+  border: dashed 1px;
+}
+.rollup-rows .rollup-rows-available-columns {
+  display: flex;
+  flex-direction: column;
+  background-color: #403e41;
+  flex-grow: 1;
+}
+.rollup-rows .rollup-rows-available-columns .draggable-item-list {
+  flex-grow: 1;
+}
+.rollup-rows.is-dragging .rollup-rows-group-by .placeholder {
+  border: dashed 1px transparent;
+  background-image: linear-gradient(to right, #1a171a 50%, #f0f0ee 50%), linear-gradient(to right, #1a171a 50%, #f0f0ee 50%), linear-gradient(to bottom, #1a171a 50%, #f0f0ee 50%), linear-gradient(to bottom, #1a171a 50%, #f0f0ee 50%);
+  background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
+  background-position: 0 top, 0 bottom, left 0, right 0;
+  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
+  animation: march 0.5s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+.rollup-rows.is-dragging .rollup-rows-group-by .item-list-scroll-pane {
+  background-image: linear-gradient(to right, #1a171a 50%, #f0f0ee 50%), linear-gradient(to right, #1a171a 50%, #f0f0ee 50%), linear-gradient(to bottom, #1a171a 50%, #f0f0ee 50%), linear-gradient(to bottom, #1a171a 50%, #f0f0ee 50%);
+  background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
+  background-position: 0 top, 0 bottom, left 0, right 0;
+  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
+  animation: march 0.5s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+.rollup-rows.is-dragging .rollup-rows-available-columns .draggable-item-list:not(.is-dragging-from-this) .item-list-scroll-pane {
+  background-image: linear-gradient(to right, #1a171a 50%, #f0f0ee 50%), linear-gradient(to right, #1a171a 50%, #f0f0ee 50%), linear-gradient(to bottom, #1a171a 50%, #f0f0ee 50%), linear-gradient(to bottom, #1a171a 50%, #f0f0ee 50%);
+  background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
+  background-position: 0 top, 0 bottom, left 0, right 0;
+  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
+  animation: march 0.5s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
+/*# sourceMappingURL=RollupRows.css.map */

package/dist/sidebar/RollupRows.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../../node_modules/@deephaven/components/scss/custom.scss","../../src/sidebar/RollupRows.scss","../../../../node_modules/@deephaven/components/scss/new_variables.scss","../../../../node_modules/@deephaven/components/scss/bootstrap_overrides.scss"],"names":[],"mappings":"AAAA;ACQA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;AAAA;EAEE;EACA;EACA;EACA,SCzBO;ED0BP;;AAEA;AAAA;EACE;EACA;EACA,cC/BK;;ADgCL;AAAA;EACE,aCjCG;;ADoCL;AAAA;EACE,OE1BS;;AF6BX;AAAA;EACE,OE/BQ;;AFmCZ;AAAA;EACE;;AAIJ;EACE;EACA,cCnDO;EDoDP;EACA,aCrDO;;ADsDP;EACE;EACA,aCzDK;;AD0DL;EACE;;AAKN;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA,kBElDO;;AFoDP;EACE;EACA;;AAGF;EACE,cChFK;EDiFL;;AAGF;EACE,QCrFK;EDsFL,SCrFK;EDsFL;EACA;;AAIJ;EACE;EACA;EACA,kBE1EO;EF2EP;;AACA;EACE;;AAMA;EACE;EC1FN;EAIA;EAEA;EACA;EACA;EACA;EACA;;ADoFI;EC9FJ;EAIA;EAEA;EACA;EACA;EACA;EACA;;AD2FI;ECrGJ;EAIA;EAEA;EACA;EACA;EACA;EACA","file":"RollupRows.css","sourcesContent":["/* stylelint-disable scss/at-import-no-partial-leading-underscore */\n// Consumers should be able to resolve bootstrap/ to node_modules/bootstrap\n\n//Make bootstrap functions available for use in overrides\n@import 'bootstrap/scss/_functions.scss';\n@import './bootstrap_overrides.scss';\n\n//_variable imports come after bootstrap default overrides,\n// makes all other variables and mixins from bootstrap available\n/// with just importing customer.scss\n@import 'bootstrap/scss/_variables.scss';\n@import 'bootstrap/scss/_mixins.scss';\n\n//New variables come after imports\n@import './new_variables.scss';\n","@import '@deephaven/components/scss/custom.scss';\n\n$draggable-item-hover-bg: $secondary;\n$draggable-item-selected-bg: rgba($primary, 0.4);\n$draggable-item-selected-hover-bg: $primary;\n$draggable-item-border: $input-border-width solid transparent;\n$row-selected-bg-color: rgba($primary, 0.4);\n\n.rollup-rows {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  outline: 0;\n  margin: 0;\n  padding: 0;\n  height: 100%;\n\n  .section-title {\n    margin: 0 $spacer-2;\n    padding-bottom: 0;\n  }\n\n  .top-menu,\n  .bottom-menu {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    padding: $spacer-1;\n    z-index: 2;\n\n    .btn-link-icon {\n      min-width: 1rem;\n      padding: 0 $spacer-2;\n      margin-right: $spacer-1;\n      &:first-of-type {\n        margin-left: $spacer-1;\n      }\n\n      &.active {\n        color: $foreground;\n      }\n\n      &:hover {\n        color: $primary;\n      }\n    }\n\n    .label {\n      font-weight: 500;\n    }\n  }\n\n  .bottom-menu {\n    margin-left: 0;\n    padding-left: $spacer-2;\n    border-top: 1px solid $background;\n    padding-top: $spacer-2;\n    .custom-checkbox {\n      font-size: smaller;\n      margin-left: $spacer-1;\n      .custom-control-label {\n        padding-top: 2px;\n      }\n    }\n  }\n\n  .item-list-scroll-pane {\n    border: none;\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n\n  .rollup-rows-group-by {\n    display: flex;\n    flex-direction: column;\n    background-color: $gray-800;\n\n    .draggable-item-list {\n      flex-grow: 1;\n      transition: height $transition;\n    }\n\n    .btn-delete-grouping {\n      margin-right: $spacer-2;\n      padding: 0 $spacer-2;\n    }\n\n    .placeholder {\n      margin: $spacer-2;\n      padding: $spacer-3;\n      text-align: center;\n      border: dashed 1px;\n    }\n  }\n\n  .rollup-rows-available-columns {\n    display: flex;\n    flex-direction: column;\n    background-color: $gray-700;\n    flex-grow: 1;\n    .draggable-item-list {\n      flex-grow: 1;\n    }\n  }\n\n  &.is-dragging {\n    .rollup-rows-group-by {\n      .placeholder {\n        border: dashed 1px transparent;\n        @include ants-base($foreground, $background);\n      }\n\n      .item-list-scroll-pane {\n        @include ants-base($foreground, $background);\n      }\n    }\n\n    .rollup-rows-available-columns\n      .draggable-item-list:not(.is-dragging-from-this) {\n      .item-list-scroll-pane {\n        @include ants-base($foreground, $background);\n      }\n    }\n  }\n}\n","//Set of spacer variables from the spacer map\n$spacer-0: map-get($spacers, 0); //0\n$spacer-1: map-get($spacers, 1);\n$spacer-2: map-get($spacers, 2);\n$spacer-3: map-get($spacers, 3);\n$spacer-4: map-get($spacers, 4);\n$spacer-5: map-get($spacers, 5);\n\n//Marching Ants for golden layout dropzone and drag and drop\n//top bottom, left right.\n//create 4 background images that are 50% color 1, 50% color 2 using graidents,  two veritical, two horizontal\n//size them to ant-size and thickness\n//position those images along the egdes and make top/bottom repeat-x and left/right repeat-y\n//then offest each of those background positions by ant-size in animation to make them march.\n$ant-size: 8px;\n$ant-thickness: 1px;\n\n@mixin ants-base($color-1: black, $color-2: white) {\n  background-image: linear-gradient(to right, $color-2 50%, $color-1 50%),\n    linear-gradient(to right, $color-2 50%, $color-1 50%),\n    linear-gradient(to bottom, $color-2 50%, $color-1 50%),\n    linear-gradient(to bottom, $color-2 50%, $color-1 50%);\n  background-size: $ant-size $ant-thickness, $ant-size $ant-thickness,\n    $ant-thickness $ant-size, $ant-thickness $ant-size;\n  background-position: 0 top, 0 bottom, left 0, right 0;\n  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;\n  animation: march 0.5s;\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n}\n\n@mixin drag-stack($pseudo-element) {\n  &::#{$pseudo-element} {\n    content: ' ';\n    background: $primary;\n    box-shadow: $box-shadow;\n    border-radius: $border-radius;\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    @content;\n  }\n}\n\n$focus-bg-transparency: 0.12;\n$hover-bg-transparency: 0.14;\n$active-bg-transparency: 0.28;\n$exception-transparency: 0.13;\n","// Styling overrides for bootstrap\n\n// Override / set color variables\n$red: #f95d84;\n$orange: #f37e3f;\n$yellow: #fcd65b;\n$green: #9edc6f;\n$blue: #76d9e4;\n$purple: #aa9af4;\n\n//Define some UI colors\n$interfacegray: #2d2a2e;\n$interfaceblue: #4878ea;\n$interfacewhite: #f0f0ee; //same as gray-200\n$interfaceblack: #1a171a;\n\n//Define our Gray scale\n$white: $interfacewhite;\n$gray-100: #fcfcfa;\n$gray-200: $interfacewhite;\n$gray-300: #c0bfbf;\n$gray-400: #929192;\n$gray-500: #5b5a5c;\n$gray-600: #555356;\n$gray-700: #403e41;\n$gray-800: #373438;\n$gray-850: #322f33;\n$gray-900: #211f22;\n$black: $interfaceblack;\n$content-bg: $interfacegray;\n$background: $interfaceblack;\n$foreground: $interfacewhite;\n\n//Load colors into map\n$colors: ();\n$colors: map-merge(\n  (\n    'red': $red,\n    'orange': $orange,\n    'yellow': $yellow,\n    'green': $green,\n    'blue': $blue,\n    'purple': $purple,\n    'white': $white,\n    'black': $black,\n  ),\n  $colors\n);\n\n//Set default colors\n$body-bg: $black;\n$body-color: $interfacewhite;\n\n// Set brand colors\n$primary: $interfaceblue;\n$primary-hover: darken($primary, 8%);\n$primary-dark: mix($primary, $content-bg, 25%);\n$primary-light: scale-color($primary, $lightness: -25%);\n$secondary: $gray-500;\n$secondary-hover: darken($secondary, 8%);\n$success: $green;\n$info: $yellow;\n$warning: $orange;\n$danger: $red;\n$danger-hover: darken($danger, 8%);\n$light: $gray-100;\n$mid: $gray-400; //Added a mid color, useful for input styling\n$dark: $gray-800;\n$green-dark: scale-color($green, $lightness: -45%, $saturation: -10%);\n\n$theme-colors: () !default;\n$theme-colors: map-merge(\n  (\n    'primary': $primary,\n    'primary-hover': $primary-hover,\n    'primary-light': $primary-light,\n    'primary-dark': $primary-dark,\n    'secondary': $secondary,\n    'success': $success,\n    'info': $info,\n    'warning': $warning,\n    'danger': $danger,\n    'light': $light,\n    'dark': $dark,\n    'mid': $mid,\n    'content-bg': $interfacegray,\n    'background': $interfaceblack,\n    'foreground': $interfacewhite,\n  ),\n  $theme-colors\n);\n\n$component-active-bg: $primary;\n$theme-color-interval: 9%;\n$yiq-contrasted-threshold: 180;\n\n// Override fonts\n$font-family-sans-serif: 'Fira Sans', -apple-system, blinkmacsystemfont,\n  'Segoe UI', 'Roboto', 'Helvetica Neue', arial, sans-serif; //fira sans then native system ui fallbacks\n$font-family-monospace: 'Fira Mono', menlo, monaco, consolas, 'Liberation Mono',\n  'Courier New', monospace;\n$font-family-base: $font-family-sans-serif;\n\n$headings-font-weight: 400;\n\n//Text overides\n$text-muted: $gray-400;\n\n//Style Selection highlight color\n//so browsers add alpha to your color by default, ignoring opacity 1\n//by setting rgba with 0.99 it tricks browser into thinking there is alpha applied\n$text-select-color: $primary-hover;\n$text-select-color-editor: lighten(\n  $gray-700,\n  15%\n); //we lighten it abit to account for that 0.01 loss, and because it needs some anyways.\n\n//Grid variables, same value as default just making easily accessible\n$grid-gutter-width: 30px;\n\n//Visual Overrides\n$border-radius: 4px;\n$box-shadow: 0 0.1rem 1rem rgba($black, 45%); //because our UI is so dark, we need darker default shadows\n$box-shadow-900: 0 0.1rem 1rem rgba(0, 0, 0, 45%); //darkest shadow for $black popups over $black UI\n\n//Override Btn\n$btn-border-radius: 4rem;\n$btn-padding-x: 1.5rem;\n$btn-transition: color 0.12s ease-in-out, background-color 0.12s ease-in-out,\n  border-color 0.12s ease-in-out, box-shadow 0.12s ease-in-out; //default 0.15 is too long\n$btn-border-width: 2px;\n\n//Override Inputs\n$input-bg: $gray-600;\n$input-disabled-bg: $gray-800;\n$input-color: $foreground;\n$input-border-color: $gray-400;\n$input-placeholder-color: $gray-400;\n$input-focus-border-color: rgba($primary, 85%);\n\n$input-btn-focus-width: 0.2rem;\n$input-btn-focus-color: rgba($component-active-bg, 35%);\n$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;\n\n//checkbox\n$custom-control-indicator-bg: $gray-600;\n$custom-control-indicator-bg-size: 75% 75%;\n$custom-control-indicator-disabled-bg: $gray-800;\n$custom-control-indicator-checked-disabled-bg: $gray-800;\n$custom-control-label-disabled-color: $gray-400;\n\n//Custom Select\n$custom-select-indicator-color: $gray-400;\n$custom-select-bg-size: 16px 16px;\n//dhSort icon encoded\n$custom-select-indicator: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M4 7l-.4-.8 4-3.7h.8l4 3.7-.4.8H4zm0 2l-.4.8 4 3.7h.8l4-3.7L12 9H4z'/%3E%3C/svg%3E\"),\n  '#',\n  '%23'\n);\n$custom-select-focus-box-shadow: $input-btn-focus-box-shadow;\n$custom-select-disabled-color: darken($gray-400, 5%);\n$custom-select-disabled-bg: $gray-800;\n\n//modal\n$modal-content-bg: $gray-200;\n$modal-content-border-width: 0;\n$modal-md: 550px;\n\n// Toast notification\n$toast-bg: $primary-dark;\n$toast-color: $foreground;\n$toast-error-bg: mix($danger, $content-bg, 15%);\n$toast-error-color: $foreground;\n\n//tooltips\n$tooltip-bg: $gray-700;\n$tooltip-color: $foreground;\n$tooltip-box-shadow: 0 0.1rem 1.5rem 0.1rem rgba($black, 80%);\n\n//drowdowns\n$dropdown-bg: $gray-600;\n$dropdown-link-color: $foreground;\n$dropdown-link-hover-color: $foreground;\n$dropdown-link-hover-bg: $primary;\n$dropdown-divider-bg: $gray-700;\n\n//context menus\n$contextmenu-bg: $gray-600;\n$contextmenu-color: $foreground;\n$contextmenu-disabled-color: $text-muted;\n$contextmenu-keyboard-selected-bg: rgba($primary, 50%);\n$contextmenu-selected-bg: $primary;\n$contextmenu-selected-color: $foreground;\n\n//links\n$link-color: $gray-400;\n$link-hover-color: $foreground;\n\n//progress-bar\n$progress-bg: $gray-600;\n$progress-border-radius: 1rem;\n\n// Set global options\n$enable-shadows: false;\n$enable-gradients: false;\n$enable-print-styles: false; //I don't think anyone should expect to \"print\" this app.\n\n// Transition times\n$transition: 0.15s;\n$transition-mid: 0.2s;\n$transition-long: 0.3s;\n$transition-slow: 0.6s;\n\n//form-validation icon, uses vsWarning icon encoded here as svg\n$form-feedback-icon-invalid-color: theme-color('danger');\n$form-feedback-icon-invalid: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none'%3E%3Cg fill='#{$form-feedback-icon-invalid-color}'%3E%3Cpath d='M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26 7.56 1zM8 2.28 2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E \"),\n  '#',\n  '%23'\n);\n"]}

package/dist/sidebar/RollupRows.js

@@ -0,0 +1,519 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React, { Component } from 'react';
+import classNames from 'classnames';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { DragDropContext, Droppable } from 'react-beautiful-dnd';
+import { Checkbox, DraggableItemList, DragUtils, SearchInput, Tooltip, Button } from '@deephaven/components';
+import { vsTrash, dhSortAlphaDown, dhSortAlphaUp } from '@deephaven/icons';
+import { TableUtils } from '@deephaven/jsapi-utils';
+import memoize from 'memoizee';
+import debounce from 'lodash.debounce';
+import Log from '@deephaven/log';
+import { assertNotNull } from '@deephaven/utils';
+import "./RollupRows.css";
+var log = Log.module('RollupRows');
+var DEBOUNCE_SEARCH = 150;
+var GROUPED_LIST_ID = 'grouped-rollup-rows';
+var UNGROUPED_LIST_ID = 'ungrouped-rollup-rows';
+class RollupRows extends Component {
+  static renderColumn(_ref) {
+    var {
+      item,
+      isClone,
+      selectedCount
+    } = _ref;
+    var text = item === null || item === void 0 ? void 0 : item.name;
+    var badgeText = isClone !== undefined && isClone ? "".concat(selectedCount) : undefined;
+    var className = isClone !== undefined && isClone ? 'item-list-item-clone' : '';
+    return DraggableItemList.renderTextItem({
+      text,
+      badgeText,
+      className
+    });
+  }
+  static addGroupings(currentGroupings, newGroupings) {
+    var index = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : currentGroupings.length;
+    if (newGroupings == null || newGroupings.length === 0) {
+      return currentGroupings;
+    }
+    var insertIndex = index;
+    var groupings = currentGroupings.filter((grouping, i) => {
+      if (newGroupings.includes(grouping)) {
+        if (i < insertIndex) {
+          insertIndex -= 1;
+        }
+        return false;
+      }
+      return true;
+    });
+    groupings.splice(insertIndex, 0, ...newGroupings);
+    return groupings;
+  }
+  static isGroupable(column) {
+    return !TableUtils.isDecimalType(column.type);
+  }
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "ungroupedList", void 0);
+    _defineProperty(this, "groupedList", void 0);
+    _defineProperty(this, "search", debounce(searchFilter => {
+      var columns = this.getSortedUngroupedColumns();
+      var selectedRanges = [];
+      var focusIndex = null;
+      for (var i = 0; i < columns.length; i += 1) {
+        var column = columns[i];
+        if (column.name.toLowerCase().includes(searchFilter.toLowerCase())) {
+          if (focusIndex == null) {
+            focusIndex = i;
+          }
+          selectedRanges.push([i, i]);
+        }
+      }
+      assertNotNull(focusIndex);
+      this.setState({
+        ungroupedSelectedRanges: selectedRanges
+      });
+      if (selectedRanges.length > 0 && this.ungroupedList.current) {
+        this.ungroupedList.current.scrollToItem(focusIndex);
+      }
+    }, DEBOUNCE_SEARCH));
+    _defineProperty(this, "getCachedUngroupedColumns", memoize((columns, groupedColumns) => columns.filter(column => RollupRows.isGroupable(column) && groupedColumns.find(name => name === column.name) == null)));
+    _defineProperty(this, "getCachedSortedColumns", memoize((columns, sort) => sort == null ? [...columns] : TableUtils.sortColumns(columns, sort === RollupRows.SORT.ASCENDING)));
+    this.handleDeleteClicked = this.handleDeleteClicked.bind(this);
+    this.handleSearchChange = this.handleSearchChange.bind(this);
+    this.handleUngroupedSelect = this.handleUngroupedSelect.bind(this);
+    this.handleUngroupedSelectionChange = this.handleUngroupedSelectionChange.bind(this);
+    this.handleDragStart = this.handleDragStart.bind(this);
+    this.handleDragEnd = this.handleDragEnd.bind(this);
+    this.handleGroupedSelectionChange = this.handleGroupedSelectionChange.bind(this);
+    this.handleShowConstituentsChange = this.handleShowConstituentsChange.bind(this);
+    this.handleShowNonAggregatedColumnsChange = this.handleShowNonAggregatedColumnsChange.bind(this);
+    this.handleSortAscending = this.handleSortAscending.bind(this);
+    this.handleSortDescending = this.handleSortDescending.bind(this);
+    this.renderGroupedItem = this.renderGroupedItem.bind(this);
+    this.ungroupedList = /*#__PURE__*/React.createRef();
+    this.groupedList = /*#__PURE__*/React.createRef();
+    var {
+      config
+    } = props;
+    var {
+      columns: _columns = [],
+      showConstituents = true,
+      showNonAggregatedColumns = true
+    } = config !== null && config !== void 0 ? config : {};
+    this.state = {
+      ungroupedSelectedRanges: [],
+      columns: _columns,
+      groupedSelectedRanges: [],
+      searchFilter: '',
+      showConstituents,
+      showNonAggregatedColumns,
+      dragSource: null,
+      sort: null
+    };
+  }
+  componentDidUpdate(prevProps, prevState) {
+    var {
+      config
+    } = this.props;
+    var {
+      columns,
+      showConstituents,
+      showNonAggregatedColumns
+    } = this.state;
+    if (config !== prevProps.config) {
+      this.updateFromConfig();
+    } else if (columns !== prevState.columns || showConstituents !== prevState.showConstituents || showNonAggregatedColumns !== prevState.showNonAggregatedColumns) {
+      if (config == null || columns !== config.columns || showConstituents !== config.showConstituents || showNonAggregatedColumns !== config.showNonAggregatedColumns) {
+        this.sendChange();
+      }
+    }
+  }
+  componentWillUnmount() {
+    this.search.cancel();
+  }
+  handleSearchChange(event) {
+    var searchFilter = event.target.value;
+    this.setState({
+      searchFilter
+    });
+    if (!searchFilter) {
+      this.search.cancel();
+      this.resetSelection();
+      return;
+    }
+    this.search(searchFilter);
+  }
+  handleSortAscending() {
+    this.setState(_ref2 => {
+      var {
+        sort
+      } = _ref2;
+      return {
+        sort: sort === RollupRows.SORT.ASCENDING ? null : RollupRows.SORT.ASCENDING
+      };
+    });
+  }
+  handleSortDescending() {
+    this.setState(_ref3 => {
+      var {
+        sort
+      } = _ref3;
+      return {
+        sort: sort === RollupRows.SORT.DESCENDING ? null : RollupRows.SORT.DESCENDING
+      };
+    });
+  }
+  resetSelection() {
+    this.setState({
+      ungroupedSelectedRanges: [],
+      groupedSelectedRanges: []
+    });
+  }
+  handleDragStart(e) {
+    log.debug('handleDragStart', e);
+    document.documentElement.classList.add('drag-pointer-events-none');
+    this.setState({
+      dragSource: e.source
+    });
+  }
+  handleDragEnd(e) {
+    log.debug('handleDragEnd', e);
+    document.documentElement.classList.remove('drag-pointer-events-none');
+    this.setState({
+      dragSource: null
+    });
+    var {
+      destination,
+      source
+    } = e;
+    if (destination == null || source == null) {
+      return;
+    }
+
+    // We don't allow dragging within the ungrouped list, so if we're dragging into the ungrouped list,
+    // it must have came from the grouped list. Remove those grouped columns.
+    if (destination.droppableId === UNGROUPED_LIST_ID) {
+      this.setState(_ref4 => {
+        var {
+          groupedSelectedRanges,
+          columns
+        } = _ref4;
+        var newColumns = [...columns];
+        DragUtils.reorder(newColumns, groupedSelectedRanges, [], 0);
+        return {
+          columns: newColumns,
+          ungroupedSelectedRanges: [],
+          groupedSelectedRanges: []
+        };
+      });
+      return;
+    }
+
+    // Otherwise, it must be dropping into the grouped list, so we just need to check the source
+    var isSameList = source.droppableId === GROUPED_LIST_ID;
+    var destinationIndex = destination.index;
+    if (isSameList && source.index < destination.index) {
+      // react-beautiful-dnd adjusts the index when dragging within a list already, however that only supports single selection
+      // We need to change it back to the index we actually want it to drop at before adjusting for the removed source index, as
+      // we adjust the index based on all the selected ranges, not just the source.index.
+      destinationIndex += 1;
+    }
+    this.setState(_ref5 => {
+      var {
+        columns,
+        ungroupedSelectedRanges,
+        groupedSelectedRanges
+      } = _ref5;
+      var newColumns = [...columns];
+      var sourceItems = isSameList ? newColumns : this.getSortedUngroupedColumns().map(c => c.name);
+      var sourceRanges = isSameList ? groupedSelectedRanges : ungroupedSelectedRanges;
+      var draggedItems = DragUtils.reorder(sourceItems, sourceRanges, newColumns, destinationIndex);
+
+      // Select the newly dropped items
+      var insertIndex = isSameList ? DragUtils.adjustDestinationIndex(destinationIndex, groupedSelectedRanges) : destinationIndex;
+      var newSelectedRanges = [[insertIndex, insertIndex + draggedItems.length - 1]];
+      return {
+        columns: newColumns,
+        ungroupedSelectedRanges: [],
+        groupedSelectedRanges: newSelectedRanges
+      };
+    });
+    this.resetSelection();
+  }
+  handleUngroupedSelect(itemIndex) {
+    log.debug('handleUngroupedSelect');
+    this.setState(_ref6 => {
+      var {
+        columns
+      } = _ref6;
+      return {
+        columns: RollupRows.addGroupings(columns, [this.getSortedUngroupedColumns()[itemIndex].name]),
+        ungroupedSelectedRanges: [],
+        groupedSelectedRanges: []
+      };
+    });
+  }
+  handleUngroupedSelectionChange(ungroupedSelectedRanges) {
+    log.debug2('handleUngroupedSelectionChange', ungroupedSelectedRanges);
+    this.setState(_ref7 => {
+      var {
+        ungroupedSelectedRanges: stateUngroupedSelectedRanges
+      } = _ref7;
+      if (ungroupedSelectedRanges === stateUngroupedSelectedRanges) {
+        return null;
+      }
+      return {
+        ungroupedSelectedRanges,
+        groupedSelectedRanges: []
+      };
+    });
+  }
+  handleGroupedSelectionChange(groupedSelectedRanges) {
+    log.debug2('handleGroupedSelectedRanges', groupedSelectedRanges);
+    this.setState(_ref8 => {
+      var {
+        groupedSelectedRanges: stateGroupedSelectedRanges
+      } = _ref8;
+      if (groupedSelectedRanges === stateGroupedSelectedRanges) {
+        return null;
+      }
+      return {
+        groupedSelectedRanges,
+        ungroupedSelectedRanges: []
+      };
+    });
+  }
+  handleDeleteClicked(index) {
+    this.setState(_ref9 => {
+      var {
+        columns
+      } = _ref9;
+      var newColumns = columns.slice();
+      newColumns.splice(index, 1);
+      return {
+        columns: newColumns
+      };
+    });
+  }
+  handleShowConstituentsChange() {
+    this.setState(_ref10 => {
+      var {
+        showConstituents
+      } = _ref10;
+      return {
+        showConstituents: !showConstituents
+      };
+    });
+  }
+  handleShowNonAggregatedColumnsChange() {
+    this.setState(_ref11 => {
+      var {
+        showNonAggregatedColumns
+      } = _ref11;
+      return {
+        showNonAggregatedColumns: !showNonAggregatedColumns
+      };
+    });
+  }
+  updateFromConfig() {
+    var {
+      config
+    } = this.props;
+    var {
+      columns = [],
+      showConstituents = true,
+      showNonAggregatedColumns = true
+    } = config !== null && config !== void 0 ? config : {};
+    this.setState({
+      columns,
+      showConstituents,
+      showNonAggregatedColumns
+    });
+  }
+  sendChange() {
+    var {
+      onChange
+    } = this.props;
+    var {
+      columns,
+      showConstituents,
+      showNonAggregatedColumns
+    } = this.state;
+    onChange({
+      columns,
+      showConstituents,
+      showNonAggregatedColumns
+    });
+  }
+  getUngroupedColumns() {
+    var {
+      model
+    } = this.props;
+    var {
+      columns
+    } = this.state;
+    var {
+      originalColumns
+    } = model;
+    return this.getCachedUngroupedColumns(originalColumns, columns);
+  }
+  getSortedUngroupedColumns() {
+    var {
+      sort
+    } = this.state;
+    var columns = this.getUngroupedColumns();
+    return this.getCachedSortedColumns(columns, sort);
+  }
+  renderGroupedItem(_ref12) {
+    var {
+      item,
+      itemIndex,
+      isClone,
+      selectedCount
+    } = _ref12;
+    var indent = isClone !== undefined && isClone ? '' : '\u00A0\u00A0'.repeat(itemIndex);
+    var text = "".concat(indent).concat(item);
+    var badgeText = isClone !== undefined && isClone ? "".concat(selectedCount) : undefined;
+    var className = isClone !== undefined && isClone ? 'item-list-item-clone' : '';
+    return /*#__PURE__*/React.createElement(React.Fragment, null, DraggableItemList.renderTextItem({
+      text,
+      badgeText,
+      className
+    }), (isClone === undefined || !isClone) && /*#__PURE__*/React.createElement(Button, {
+      kind: "ghost",
+      className: "btn btn-link btn-link-icon btn-delete-grouping float-right",
+      onClick: () => this.handleDeleteClicked(itemIndex)
+    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: vsTrash
+    })));
+  }
+  render() {
+    var {
+      columns,
+      dragSource,
+      searchFilter,
+      groupedSelectedRanges,
+      ungroupedSelectedRanges,
+      showConstituents,
+      showNonAggregatedColumns,
+      sort
+    } = this.state;
+    var ungroupedColumns = this.getSortedUngroupedColumns();
+    var groupListHeight = columns.length * DraggableItemList.DEFAULT_ROW_HEIGHT;
+    if ((dragSource === null || dragSource === void 0 ? void 0 : dragSource.droppableId) === UNGROUPED_LIST_ID) {
+      groupListHeight += DraggableItemList.DEFAULT_ROW_HEIGHT;
+    }
+    var ungroupMaxListHeight = ungroupedColumns.length * DraggableItemList.DEFAULT_ROW_HEIGHT + 10;
+    var ungroupMinListHeight = Math.min(3 * DraggableItemList.DEFAULT_ROW_HEIGHT, ungroupMaxListHeight);
+    return /*#__PURE__*/React.createElement("div", {
+      role: "menu",
+      className: classNames('rollup-rows', {
+        'is-dragging': dragSource != null
+      }),
+      tabIndex: 0
+    }, /*#__PURE__*/React.createElement(DragDropContext, {
+      onDragEnd: this.handleDragEnd,
+      onDragStart: this.handleDragStart
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "rollup-rows-group-by"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "section-title"
+    }, "Group By"), columns.length === 0 && /*#__PURE__*/React.createElement(Droppable, {
+      droppableId: "placeholder"
+    }, (provided, snapshot) => /*#__PURE__*/React.createElement("div", _extends({
+      className: classNames('placeholder', 'text-muted', {
+        'is-dragging-from-this': snapshot.draggingFromThisWith,
+        'is-dragging-over': snapshot.isDraggingOver,
+        'is-dropping': snapshot.draggingOverWith
+      }),
+      ref: provided.innerRef
+      // eslint-disable-next-line react/jsx-props-no-spreading
+    }, provided.droppableProps), "To create a rollup, drag columns from the list below and drop them into this area.")), columns.length > 0 && /*#__PURE__*/React.createElement(DraggableItemList, {
+      draggingItemClassName: "rollup-rows-dragging-grouped-item",
+      draggablePrefix: GROUPED_LIST_ID,
+      droppableId: GROUPED_LIST_ID,
+      itemCount: columns.length,
+      items: columns,
+      offset: 0,
+      onSelectionChange: this.handleGroupedSelectionChange,
+      ref: this.groupedList,
+      renderItem: this.renderGroupedItem,
+      selectedRanges: groupedSelectedRanges,
+      style: {
+        height: groupListHeight
+      },
+      isMultiSelect: true
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "rollup-rows-available-columns"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "section-title"
+    }, "Available Grouping Columns"), /*#__PURE__*/React.createElement("div", {
+      className: "top-menu"
+    }, /*#__PURE__*/React.createElement(SearchInput, {
+      className: "w-100",
+      value: searchFilter,
+      matchCount: searchFilter ? ungroupedSelectedRanges.length : undefined,
+      placeholder: "Find column...",
+      onChange: this.handleSearchChange
+    }), /*#__PURE__*/React.createElement(Button, {
+      kind: "ghost",
+      className: classNames('btn-link btn-link-icon', {
+        active: sort === RollupRows.SORT.ASCENDING
+      }),
+      onClick: this.handleSortAscending
+    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: dhSortAlphaDown
+    }), /*#__PURE__*/React.createElement(Tooltip, null, "Sort ascending")), /*#__PURE__*/React.createElement(Button, {
+      kind: "ghost",
+      className: classNames('btn-link btn-link-icon', {
+        active: sort === RollupRows.SORT.DESCENDING
+      }),
+      onClick: this.handleSortDescending
+    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: dhSortAlphaUp
+    }), /*#__PURE__*/React.createElement(Tooltip, null, "Sort descending"))), /*#__PURE__*/React.createElement(DraggableItemList, {
+      className: "rollup-available-grouping-columns",
+      draggablePrefix: UNGROUPED_LIST_ID,
+      droppableId: UNGROUPED_LIST_ID,
+      itemCount: ungroupedColumns.length,
+      items: ungroupedColumns,
+      renderItem: RollupRows.renderColumn,
+      offset: 0,
+      onSelect: this.handleUngroupedSelect,
+      onSelectionChange: this.handleUngroupedSelectionChange,
+      ref: this.ungroupedList,
+      selectedRanges: ungroupedSelectedRanges,
+      style: {
+        maxHeight: ungroupMaxListHeight,
+        minHeight: ungroupMinListHeight
+      },
+      isDropDisabled: (dragSource === null || dragSource === void 0 ? void 0 : dragSource.droppableId) !== GROUPED_LIST_ID,
+      isMultiSelect: true
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "bottom-menu"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "label"
+    }, "Show:"), /*#__PURE__*/React.createElement(Checkbox, {
+      checked: showConstituents,
+      onChange: this.handleShowConstituentsChange
+    }, "Constituents"), /*#__PURE__*/React.createElement(Checkbox, {
+      checked: showNonAggregatedColumns,
+      onChange: this.handleShowNonAggregatedColumnsChange
+    }, "Non-Aggregated Columns")))));
+  }
+}
+_defineProperty(RollupRows, "SORT", Object.freeze({
+  ASCENDING: 'ASC',
+  DESCENDING: 'DESC'
+}));
+_defineProperty(RollupRows, "defaultProps", {
+  config: null,
+  onChange: () => undefined
+});
+export default RollupRows;
+//# sourceMappingURL=RollupRows.js.map