@deephaven/iris-grid 0.24.1-hierarchical-table.0 → 0.25.1-beta.0

package/dist/sidebar/visibility-ordering-builder/sortable-tree/SortableTreeItem.js

@@ -0,0 +1,57 @@
+var _excluded = ["id", "depth"];
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/* eslint-disable import/prefer-default-export */
+import React, { useMemo } from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { TreeItem } from "./TreeItem.js";
+var animateLayoutChanges = _ref => {
+  var {
+    isSorting,
+    wasDragging
+  } = _ref;
+  return !(isSorting || wasDragging);
+};
+export function SortableTreeItem(_ref2) {
+  var {
+      id,
+      depth
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  var {
+    attributes,
+    isDragging,
+    isSorting,
+    listeners,
+    setDraggableNodeRef,
+    setDroppableNodeRef,
+    transform,
+    transition
+  } = useSortable({
+    id,
+    animateLayoutChanges
+  });
+  var transformString = CSS.Translate.toString(transform);
+  var style = useMemo(() => ({
+    transform: transformString,
+    transition
+  }), [transformString, transition]);
+  var handleProps = useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, attributes), listeners), {}, {
+    style
+  }), [attributes, listeners, style]);
+  return /*#__PURE__*/React.createElement(TreeItem, _extends({
+    dragRef: setDraggableNodeRef,
+    wrapperRef: setDroppableNodeRef,
+    depth: depth,
+    ghost: isDragging,
+    disableInteraction: isSorting,
+    handleProps: handleProps
+    // eslint-disable-next-line react/jsx-props-no-spreading
+  }, props));
+}
+//# sourceMappingURL=SortableTreeItem.js.map

package/dist/sidebar/visibility-ordering-builder/sortable-tree/SortableTreeItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableTreeItem.js","names":["React","useMemo","useSortable","CSS","TreeItem","animateLayoutChanges","isSorting","wasDragging","SortableTreeItem","id","depth","props","attributes","isDragging","listeners","setDraggableNodeRef","setDroppableNodeRef","transform","transition","transformString","Translate","toString","style","handleProps"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/SortableTreeItem.tsx"],"sourcesContent":["/* eslint-disable import/prefer-default-export */\nimport React, { CSSProperties, useMemo } from 'react';\nimport { AnimateLayoutChanges, useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { TreeItem, Props as TreeItemProps } from './TreeItem';\n\nexport interface Props<T> extends Omit<TreeItemProps<T>, 'style'> {\n  id: string;\n}\n\nconst animateLayoutChanges: AnimateLayoutChanges = ({\n  isSorting,\n  wasDragging,\n}) => !(isSorting || wasDragging);\n\nexport function SortableTreeItem<T>({\n  id,\n  depth,\n  ...props\n}: Props<T>): JSX.Element {\n  const {\n    attributes,\n    isDragging,\n    isSorting,\n    listeners,\n    setDraggableNodeRef,\n    setDroppableNodeRef,\n    transform,\n    transition,\n  } = useSortable({\n    id,\n    animateLayoutChanges,\n  });\n\n  const transformString = CSS.Translate.toString(transform);\n\n  const style: CSSProperties = useMemo(\n    () => ({\n      transform: transformString,\n      transition,\n    }),\n    [transformString, transition]\n  );\n\n  const handleProps = useMemo(\n    () => ({\n      ...attributes,\n      ...listeners,\n      style,\n    }),\n    [attributes, listeners, style]\n  );\n\n  return (\n    <TreeItem\n      dragRef={setDraggableNodeRef}\n      wrapperRef={setDroppableNodeRef}\n      depth={depth}\n      ghost={isDragging}\n      disableInteraction={isSorting}\n      handleProps={handleProps}\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;;;;AAAA;AACA,OAAOA,KAAK,IAAmBC,OAAO,QAAQ,OAAO;AACrD,SAA+BC,WAAW,QAAQ,mBAAmB;AACrE,SAASC,GAAG,QAAQ,oBAAoB;AAAC,SAChCC,QAAQ;AAMjB,IAAMC,oBAA0C,GAAG;EAAA,IAAC;IAClDC,SAAS;IACTC;EACF,CAAC;EAAA,OAAK,EAAED,SAAS,IAAIC,WAAW,CAAC;AAAA;AAEjC,OAAO,SAASC,gBAAgB,QAIN;EAAA,IAJU;MAClCC,EAAE;MACFC;IAEQ,CAAC;IADNC,KAAK;EAER,IAAM;IACJC,UAAU;IACVC,UAAU;IACVP,SAAS;IACTQ,SAAS;IACTC,mBAAmB;IACnBC,mBAAmB;IACnBC,SAAS;IACTC;EACF,CAAC,GAAGhB,WAAW,CAAC;IACdO,EAAE;IACFJ;EACF,CAAC,CAAC;EAEF,IAAMc,eAAe,GAAGhB,GAAG,CAACiB,SAAS,CAACC,QAAQ,CAACJ,SAAS,CAAC;EAEzD,IAAMK,KAAoB,GAAGrB,OAAO,CAClC,OAAO;IACLgB,SAAS,EAAEE,eAAe;IAC1BD;EACF,CAAC,CAAC,EACF,CAACC,eAAe,EAAED,UAAU,CAAC,CAC9B;EAED,IAAMK,WAAW,GAAGtB,OAAO,CACzB,oDACKW,UAAU,GACVE,SAAS;IACZQ;EAAK,EACL,EACF,CAACV,UAAU,EAAEE,SAAS,EAAEQ,KAAK,CAAC,CAC/B;EAED,oBACE,oBAAC,QAAQ;IACP,OAAO,EAAEP,mBAAoB;IAC7B,UAAU,EAAEC,mBAAoB;IAChC,KAAK,EAAEN,KAAM;IACb,KAAK,EAAEG,UAAW;IAClB,kBAAkB,EAAEP,SAAU;IAC9B,WAAW,EAAEiB;IACb;EAAA,GACIZ,KAAK,EACT;AAEN"}

package/dist/sidebar/visibility-ordering-builder/sortable-tree/TreeItem.css

@@ -0,0 +1,139 @@
+/* stylelint-disable scss/at-import-no-partial-leading-underscore */
+.visibility-ordering-list .tree-item {
+  position: relative;
+  display: flex;
+  gap: 0.25rem;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  flex-grow: 1;
+  min-width: 0;
+  border: 1px solid transparent;
+  user-select: none;
+  border-radius: 4px;
+  padding: 0 0.25rem;
+}
+.visibility-ordering-list .tree-item svg:not(.color-swatch) {
+  color: #929192;
+}
+.visibility-ordering-list .tree-item:hover {
+  background: #5b5a5c;
+  cursor: grab;
+}
+.visibility-ordering-list .tree-item.isSelected {
+  background-color: rgba(72, 120, 234, 0.4);
+}
+.visibility-ordering-list .tree-item.isSelected:hover {
+  background-color: #4878ea;
+}
+.visibility-ordering-list .tree-item.isSelected:hover svg:not(.color-swatch) {
+  color: #f0f0ee;
+}
+.visibility-ordering-list .tree-item:focus {
+  outline: 0;
+  border: 1px solid rgba(72, 120, 234, 0.85);
+  box-shadow: 0 0 0 0.2rem rgba(72, 120, 234, 0.35);
+}
+.visibility-ordering-list .tree-item .column-name {
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+}
+.visibility-ordering-list .tree-item .item-count {
+  padding: 0 0.5rem;
+  border-radius: 1rem;
+  background-color: rgba(240, 240, 238, 0.25);
+  margin-right: 0.25rem;
+}
+.visibility-ordering-list .marching-ants {
+  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;
+}
+.visibility-ordering-list .item-wrapper {
+  list-style: none;
+  box-sizing: border-box;
+  margin-bottom: -1px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+.visibility-ordering-list .item-wrapper.clone {
+  pointer-events: none;
+  padding: 0;
+}
+.visibility-ordering-list .item-wrapper.clone .tree-item {
+  opacity: 1;
+  background-color: #4878ea;
+  box-shadow: 0 0.1rem 1rem rgba(26, 23, 26, 0.45);
+}
+.visibility-ordering-list .item-wrapper.clone .tree-item svg:not(.color-swatch) {
+  color: #f0f0ee;
+}
+.visibility-ordering-list .item-wrapper.clone .tree-item.two-dragged::before {
+  content: " ";
+  background: #4878ea;
+  box-shadow: 0 0.1rem 1rem rgba(26, 23, 26, 0.45);
+  border-radius: 4px;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 4px;
+  left: 2px;
+  opacity: 0.8;
+  z-index: -1;
+}
+.visibility-ordering-list .item-wrapper.clone .tree-item.multiple-dragged::before {
+  content: " ";
+  background: #4878ea;
+  box-shadow: 0 0.1rem 1rem rgba(26, 23, 26, 0.45);
+  border-radius: 4px;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 4px;
+  left: 2px;
+  opacity: 0.8;
+  z-index: -1;
+}
+.visibility-ordering-list .item-wrapper.clone .tree-item.multiple-dragged::after {
+  content: " ";
+  background: #4878ea;
+  box-shadow: 0 0.1rem 1rem rgba(26, 23, 26, 0.45);
+  border-radius: 4px;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 8px;
+  left: 4px;
+  opacity: 0.6;
+  z-index: -2;
+}
+.visibility-ordering-list .item-wrapper.ghost {
+  opacity: 0.5;
+}
+.visibility-ordering-list .item-wrapper.ghost .tree-item > * {
+  box-shadow: none;
+  background-color: transparent;
+}
+.visibility-ordering-list .item-wrapper.disableInteraction {
+  pointer-events: none;
+}
+.visibility-ordering-list .item-wrapper.disableInteraction:not(.ghost) .tree-item.isSelected {
+  opacity: 0.3;
+}
+.visibility-ordering-list .item-wrapper .depth-line {
+  margin-left: calc(0.5rem + 8px + 0.5px);
+  margin-right: 0.25rem;
+  padding-bottom: 2px;
+  border-left: 1px solid #555356;
+}
+
+/*# sourceMappingURL=TreeItem.css.map */

package/dist/sidebar/visibility-ordering-builder/sortable-tree/TreeItem.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../../../../node_modules/@deephaven/components/scss/custom.scss","../../../../src/sidebar/visibility-ordering-builder/sortable-tree/TreeItem.scss","../../../../../../node_modules/@deephaven/components/scss/new_variables.scss","../../../../../../node_modules/@deephaven/components/scss/bootstrap_overrides.scss"],"names":[],"mappings":"AAAA;ACQE;EACE;EACA;EACA,KCTO;EDUP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,eEqGY;EFpGZ;;AAEA;EACE,OEHK;;AFMP;EACE,YENK;EFOL;;AAGF;EACE;;AAEA;EACE,kBExBQ;;AF0BR;EACE,OE1BO;;AF+Bb;EACE;EACA;EACA,YE+FuB;;AF5FzB;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA,cC3DK;;AD+DT;EC/CA;EAIA;EAEA;EACA;EACA;EACA;EACA;;ADyCA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA,kBExEQ;EFyER,YEqCK;;AFnCL;EACE,OE3EO;;ADmBf;EACE;EACA,YCtBY;EDuBZ,YCuFS;EDtFT,eCqFY;EDpFZ;EACA;EACA;EDsDQ;EACA;EACA;EACA;;AChEV;EACE;EACA,YCtBY;EDuBZ,YCuFS;EDtFT,eCqFY;EDpFZ;EACA;EACA;ED+DQ;EACA;EACA;EACA;;ACzEV;EACE;EACA,YCtBY;EDuBZ,YCuFS;EDtFT,eCqFY;EDpFZ;EACA;EACA;EDqEQ;EACA;EACA;EACA;;AAMR;EACE;;AAEA;EACE;EACA;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EACE,aApIS;EAqIT,cCtIK;EDuIL;EACA","file":"TreeItem.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$depth-line-color: $gray-600;\n$depth-margin: calc(\n  0.5rem + 8px + 0.5px\n); // Tree item 0.25rem padding, Icon button 0.25rem, half of icon size, and half pixel to offset 1px border\n\n.visibility-ordering-list {\n  .tree-item {\n    position: relative;\n    display: flex;\n    gap: $spacer-1;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    align-items: center;\n    flex-grow: 1;\n    min-width: 0; // Needed so column names don't grow past the edge\n    border: $input-border-width solid transparent;\n    user-select: none;\n    border-radius: $border-radius;\n    padding: 0 $spacer-1; // space for focus border\n\n    svg:not(.color-swatch) {\n      color: $text-muted;\n    }\n\n    &:hover {\n      background: $gray-500;\n      cursor: grab;\n    }\n\n    &.isSelected {\n      background-color: rgba($primary, 0.4);\n\n      &:hover {\n        background-color: $primary;\n\n        svg:not(.color-swatch) {\n          color: $foreground;\n        }\n      }\n    }\n\n    &:focus {\n      outline: 0;\n      border: $input-border-width solid $input-focus-border-color;\n      box-shadow: $input-focus-box-shadow;\n    }\n\n    .column-name {\n      flex-grow: 1;\n      flex-shrink: 1;\n      overflow-x: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .item-count {\n      padding: 0 $spacer-2;\n      border-radius: 1rem;\n      background-color: rgba($foreground, 0.25);\n      margin-right: $spacer-1;\n    }\n  }\n\n  .marching-ants {\n    @include ants-base($foreground, $background);\n  }\n\n  .item-wrapper {\n    list-style: none;\n    box-sizing: border-box;\n    margin-bottom: -1px;\n    width: 100%;\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n\n    &.clone {\n      pointer-events: none;\n      padding: 0;\n\n      .tree-item {\n        opacity: 1;\n        background-color: $primary;\n        box-shadow: $box-shadow;\n\n        svg:not(.color-swatch) {\n          color: $foreground;\n        }\n\n        &.two-dragged {\n          @include drag-stack(before) {\n            top: 4px;\n            left: 2px;\n            opacity: 0.8;\n            z-index: -1;\n          }\n        }\n\n        &.multiple-dragged {\n          @include drag-stack(before) {\n            top: 4px;\n            left: 2px;\n            opacity: 0.8;\n            z-index: -1;\n          }\n          @include drag-stack(after) {\n            top: 8px;\n            left: 4px;\n            opacity: 0.6;\n            z-index: -2;\n          }\n        }\n      }\n    }\n\n    &.ghost {\n      opacity: 0.5;\n\n      .tree-item > * {\n        box-shadow: none;\n        background-color: transparent;\n      }\n    }\n\n    &.disableInteraction {\n      pointer-events: none;\n\n      &:not(.ghost) .tree-item.isSelected {\n        opacity: 0.3;\n      }\n    }\n\n    .depth-line {\n      margin-left: $depth-margin;\n      margin-right: $spacer-1; // Gives breathing room to the item boxes\n      padding-bottom: 2px;\n      border-left: 1px solid $depth-line-color;\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/visibility-ordering-builder/sortable-tree/TreeItem.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import type { FlattenedItem, TreeItem as TreeItemType } from './types';
+import './TreeItem.scss';
+export interface Props<T> {
+    childCount?: number;
+    clone?: boolean;
+    depth: number;
+    disableInteraction?: boolean;
+    ghost?: boolean;
+    handleProps?: unknown;
+    value: string;
+    item: FlattenedItem<T>;
+    dragRef?: React.Ref<HTMLDivElement> | null;
+    wrapperRef?: React.Ref<HTMLLIElement> | null;
+    renderItem(props: {
+        ref: React.Ref<HTMLDivElement> | null;
+        clone: boolean;
+        childCount?: number;
+        value: string;
+        item: FlattenedItem<T>;
+        handleProps: unknown;
+    }): JSX.Element;
+}
+export type TreeItemRenderFn<T> = (props: {
+    ref: React.Ref<HTMLDivElement> | null;
+    clone: boolean;
+    childCount?: number;
+    value: string;
+    item: T extends TreeItemType<infer D> ? FlattenedItem<D> : FlattenedItem<T>;
+    handleProps: Record<string, unknown>;
+}) => JSX.Element;
+export declare function TreeItem<T>(props: Props<T>): JSX.Element;
+export declare namespace TreeItem {
+    var displayName: string;
+}
+//# sourceMappingURL=TreeItem.d.ts.map

package/dist/sidebar/visibility-ordering-builder/sortable-tree/TreeItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeItem.d.ts","sourceRoot":"","sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/TreeItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,SAAS,CAAC;AACvE,OAAO,iBAAiB,CAAC;AAEzB,MAAM,WAAW,KAAK,CAAC,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC;IAC3C,UAAU,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC;IAC7C,UAAU,CAAC,KAAK,EAAE;QAChB,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC;QACtC,KAAK,EAAE,OAAO,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;QACvB,WAAW,EAAE,OAAO,CAAC;KACtB,GAAG,GAAG,CAAC,OAAO,CAAC;CACjB;AAED,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE;IACxC,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC;IACtC,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,CAAC,SAAS,YAAY,CAAC,MAAM,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;IAC5E,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACtC,KAAK,GAAG,CAAC,OAAO,CAAC;AAElB,wBAAgB,QAAQ,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,eAkD1C;yBAlDe,QAAQ"}

package/dist/sidebar/visibility-ordering-builder/sortable-tree/TreeItem.js

@@ -0,0 +1,44 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import "./TreeItem.css";
+export function TreeItem(props) {
+  var {
+    clone = false,
+    depth,
+    disableInteraction = false,
+    ghost = false,
+    handleProps,
+    value,
+    dragRef = null,
+    wrapperRef = null,
+    renderItem,
+    item,
+    childCount
+  } = props;
+  var depthMarkers = useMemo(() => Array(depth).fill(0)
+  // eslint-disable-next-line react/no-array-index-key
+  .map((_, i) => /*#__PURE__*/React.createElement("span", {
+    key: "depth-line-".concat(i),
+    className: "depth-line"
+  })), [depth]);
+  var renderItemProps = useMemo(() => ({
+    ref: dragRef,
+    clone,
+    value,
+    item,
+    childCount,
+    handleProps
+  }), [dragRef, clone, value, item, childCount, handleProps]);
+  return /*#__PURE__*/React.createElement("li", {
+    key: value,
+    className: classNames('item-wrapper', {
+      clone,
+      ghost,
+      disableInteraction
+    }),
+    ref: wrapperRef
+  }, !clone && depthMarkers, renderItem(renderItemProps));
+}
+TreeItem.displayName = 'TreeItem';
+//# sourceMappingURL=TreeItem.js.map

package/dist/sidebar/visibility-ordering-builder/sortable-tree/TreeItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeItem.js","names":["React","useMemo","classNames","TreeItem","props","clone","depth","disableInteraction","ghost","handleProps","value","dragRef","wrapperRef","renderItem","item","childCount","depthMarkers","Array","fill","map","_","i","renderItemProps","ref","displayName"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/TreeItem.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\nimport React, { useMemo } from 'react';\nimport classNames from 'classnames';\nimport type { FlattenedItem, TreeItem as TreeItemType } from './types';\nimport './TreeItem.scss';\n\nexport interface Props<T> {\n  childCount?: number;\n  clone?: boolean;\n  depth: number;\n  disableInteraction?: boolean;\n  ghost?: boolean;\n  handleProps?: unknown;\n  value: string;\n  item: FlattenedItem<T>;\n  dragRef?: React.Ref<HTMLDivElement> | null;\n  wrapperRef?: React.Ref<HTMLLIElement> | null;\n  renderItem(props: {\n    ref: React.Ref<HTMLDivElement> | null;\n    clone: boolean;\n    childCount?: number;\n    value: string;\n    item: FlattenedItem<T>;\n    handleProps: unknown;\n  }): JSX.Element;\n}\n\nexport type TreeItemRenderFn<T> = (props: {\n  ref: React.Ref<HTMLDivElement> | null;\n  clone: boolean;\n  childCount?: number;\n  value: string;\n  item: T extends TreeItemType<infer D> ? FlattenedItem<D> : FlattenedItem<T>;\n  handleProps: Record<string, unknown>;\n}) => JSX.Element;\n\nexport function TreeItem<T>(props: Props<T>) {\n  const {\n    clone = false,\n    depth,\n    disableInteraction = false,\n    ghost = false,\n    handleProps,\n    value,\n    dragRef = null,\n    wrapperRef = null,\n    renderItem,\n    item,\n    childCount,\n  } = props;\n\n  const depthMarkers = useMemo(\n    () =>\n      Array(depth)\n        .fill(0)\n        // eslint-disable-next-line react/no-array-index-key\n        .map((_, i) => <span key={`depth-line-${i}`} className=\"depth-line\" />),\n    [depth]\n  );\n\n  const renderItemProps = useMemo(\n    () => ({\n      ref: dragRef,\n      clone,\n      value,\n      item,\n      childCount,\n      handleProps,\n    }),\n    [dragRef, clone, value, item, childCount, handleProps]\n  );\n\n  return (\n    <li\n      key={value}\n      className={classNames('item-wrapper', {\n        clone,\n        ghost,\n        disableInteraction,\n      })}\n      ref={wrapperRef}\n    >\n      {!clone && depthMarkers}\n      {renderItem(renderItemProps)}\n    </li>\n  );\n}\n\nTreeItem.displayName = 'TreeItem';\n"],"mappings":"AAAA;AACA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,OAAOC,UAAU,MAAM,YAAY;AAAC;AAkCpC,OAAO,SAASC,QAAQ,CAAIC,KAAe,EAAE;EAC3C,IAAM;IACJC,KAAK,GAAG,KAAK;IACbC,KAAK;IACLC,kBAAkB,GAAG,KAAK;IAC1BC,KAAK,GAAG,KAAK;IACbC,WAAW;IACXC,KAAK;IACLC,OAAO,GAAG,IAAI;IACdC,UAAU,GAAG,IAAI;IACjBC,UAAU;IACVC,IAAI;IACJC;EACF,CAAC,GAAGX,KAAK;EAET,IAAMY,YAAY,GAAGf,OAAO,CAC1B,MACEgB,KAAK,CAACX,KAAK,CAAC,CACTY,IAAI,CAAC,CAAC;EACP;EAAA,CACCC,GAAG,CAAC,CAACC,CAAC,EAAEC,CAAC,kBAAK;IAAM,GAAG,uBAAgBA,CAAC,CAAG;IAAC,SAAS,EAAC;EAAY,EAAG,CAAC,EAC3E,CAACf,KAAK,CAAC,CACR;EAED,IAAMgB,eAAe,GAAGrB,OAAO,CAC7B,OAAO;IACLsB,GAAG,EAAEZ,OAAO;IACZN,KAAK;IACLK,KAAK;IACLI,IAAI;IACJC,UAAU;IACVN;EACF,CAAC,CAAC,EACF,CAACE,OAAO,EAAEN,KAAK,EAAEK,KAAK,EAAEI,IAAI,EAAEC,UAAU,EAAEN,WAAW,CAAC,CACvD;EAED,oBACE;IACE,GAAG,EAAEC,KAAM;IACX,SAAS,EAAER,UAAU,CAAC,cAAc,EAAE;MACpCG,KAAK;MACLG,KAAK;MACLD;IACF,CAAC,CAAE;IACH,GAAG,EAAEK;EAAW,GAEf,CAACP,KAAK,IAAIW,YAAY,EACtBH,UAAU,CAACS,eAAe,CAAC,CACzB;AAET;AAEAnB,QAAQ,CAACqB,WAAW,GAAG,UAAU"}

package/dist/sidebar/visibility-ordering-builder/sortable-tree/keyboardCoordinates.d.ts

@@ -0,0 +1,4 @@
+import { KeyboardCoordinateGetter } from '@dnd-kit/core';
+import type { SensorContext } from './types';
+export declare function sortableTreeKeyboardCoordinates(context: SensorContext, indicator: boolean, indentationWidth: number): KeyboardCoordinateGetter;
+//# sourceMappingURL=keyboardCoordinates.d.ts.map

package/dist/sidebar/visibility-ordering-builder/sortable-tree/keyboardCoordinates.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboardCoordinates.d.ts","sourceRoot":"","sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/keyboardCoordinates.ts"],"names":[],"mappings":"AACA,OAAO,EAIL,wBAAwB,EAEzB,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAY7C,wBAAgB,+BAA+B,CAC7C,OAAO,EAAE,aAAa,EACtB,SAAS,EAAE,OAAO,EAClB,gBAAgB,EAAE,MAAM,GACvB,wBAAwB,CAsI1B"}

package/dist/sidebar/visibility-ordering-builder/sortable-tree/keyboardCoordinates.js

@@ -0,0 +1,127 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+/* eslint-disable import/prefer-default-export */
+import { closestCorners, getFirstCollision, KeyboardCode } from '@dnd-kit/core';
+import { getProjection } from "./utilities.js";
+var DIRECTIONS = [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];
+var HORIZONTAL = [KeyboardCode.Left, KeyboardCode.Right];
+export function sortableTreeKeyboardCoordinates(context, indicator, indentationWidth) {
+  return (event, _ref) => {
+    var {
+      currentCoordinates,
+      context: {
+        active,
+        over,
+        collisionRect,
+        droppableRects,
+        droppableContainers
+      }
+    } = _ref;
+    if (DIRECTIONS.includes(event.code)) {
+      if (!active || !collisionRect) {
+        return;
+      }
+      event.preventDefault();
+      var {
+        current: {
+          items,
+          offset
+        }
+      } = context;
+      if (HORIZONTAL.includes(event.code) && (over === null || over === void 0 ? void 0 : over.id) != null) {
+        var {
+          depth,
+          maxDepth,
+          minDepth
+        } = getProjection(items, active.id, over.id, offset, indentationWidth);
+        switch (event.code) {
+          case KeyboardCode.Left:
+            if (depth > minDepth) {
+              return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
+                x: currentCoordinates.x - indentationWidth
+              });
+            }
+            break;
+          case KeyboardCode.Right:
+            if (depth < maxDepth) {
+              return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
+                x: currentCoordinates.x + indentationWidth
+              });
+            }
+            break;
+        }
+        return undefined;
+      }
+      var containers = [];
+      droppableContainers.forEach(container => {
+        if (container !== null && container !== void 0 && container.disabled || container.id === (over === null || over === void 0 ? void 0 : over.id)) {
+          return;
+        }
+        var rect = droppableRects.get(container.id);
+        if (!rect) {
+          return;
+        }
+        switch (event.code) {
+          case KeyboardCode.Down:
+            if (collisionRect.top < rect.top) {
+              containers.push(container);
+            }
+            break;
+          case KeyboardCode.Up:
+            if (collisionRect.top > rect.top) {
+              containers.push(container);
+            }
+            break;
+        }
+      });
+      var collisions = closestCorners({
+        active,
+        collisionRect,
+        pointerCoordinates: null,
+        droppableRects,
+        droppableContainers: containers
+      });
+      var closestId = getFirstCollision(collisions, 'id');
+      if (closestId === (over === null || over === void 0 ? void 0 : over.id) && collisions.length > 1) {
+        closestId = collisions[1].id;
+      }
+      if (closestId != null && (over === null || over === void 0 ? void 0 : over.id) != null) {
+        var activeRect = droppableRects.get(active.id);
+        var newRect = droppableRects.get(closestId);
+        var newDroppable = droppableContainers.get(closestId);
+        if (activeRect && newRect && newDroppable) {
+          var newIndex = items.findIndex(_ref2 => {
+            var {
+              id
+            } = _ref2;
+            return id === closestId;
+          });
+          var newItem = items[newIndex];
+          var activeIndex = items.findIndex(_ref3 => {
+            var {
+              id
+            } = _ref3;
+            return id === active.id;
+          });
+          var activeItem = items[activeIndex];
+          if (newItem != null && activeItem != null) {
+            var {
+              depth: _depth
+            } = getProjection(items, active.id, closestId, (newItem.depth - activeItem.depth) * indentationWidth, indentationWidth);
+            var isBelow = newIndex > activeIndex;
+            var modifier = isBelow ? 1 : -1;
+            var nextOffset = indicator ? (collisionRect.height - activeRect.height) / 2 : 0;
+            var newCoordinates = {
+              x: newRect.left + _depth * indentationWidth,
+              y: newRect.top + modifier * nextOffset
+            };
+            return newCoordinates;
+          }
+        }
+      }
+    }
+    return undefined;
+  };
+}
+//# sourceMappingURL=keyboardCoordinates.js.map

package/dist/sidebar/visibility-ordering-builder/sortable-tree/keyboardCoordinates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboardCoordinates.js","names":["closestCorners","getFirstCollision","KeyboardCode","getProjection","DIRECTIONS","Down","Right","Up","Left","HORIZONTAL","sortableTreeKeyboardCoordinates","context","indicator","indentationWidth","event","currentCoordinates","active","over","collisionRect","droppableRects","droppableContainers","includes","code","preventDefault","current","items","offset","id","depth","maxDepth","minDepth","x","undefined","containers","forEach","container","disabled","rect","get","top","push","collisions","pointerCoordinates","closestId","length","activeRect","newRect","newDroppable","newIndex","findIndex","newItem","activeIndex","activeItem","isBelow","modifier","nextOffset","height","newCoordinates","left","y"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/keyboardCoordinates.ts"],"sourcesContent":["/* eslint-disable import/prefer-default-export */\nimport {\n  closestCorners,\n  getFirstCollision,\n  KeyboardCode,\n  KeyboardCoordinateGetter,\n  DroppableContainer,\n} from '@dnd-kit/core';\nimport type { SensorContext } from './types';\nimport { getProjection } from './utilities';\n\nconst DIRECTIONS: string[] = [\n  KeyboardCode.Down,\n  KeyboardCode.Right,\n  KeyboardCode.Up,\n  KeyboardCode.Left,\n];\n\nconst HORIZONTAL: string[] = [KeyboardCode.Left, KeyboardCode.Right];\n\nexport function sortableTreeKeyboardCoordinates(\n  context: SensorContext,\n  indicator: boolean,\n  indentationWidth: number\n): KeyboardCoordinateGetter {\n  return (\n    event,\n    {\n      currentCoordinates,\n      context: {\n        active,\n        over,\n        collisionRect,\n        droppableRects,\n        droppableContainers,\n      },\n    }\n  ) => {\n    if (DIRECTIONS.includes(event.code)) {\n      if (!active || !collisionRect) {\n        return;\n      }\n\n      event.preventDefault();\n\n      const {\n        current: { items, offset },\n      } = context;\n\n      if (HORIZONTAL.includes(event.code) && over?.id != null) {\n        const { depth, maxDepth, minDepth } = getProjection(\n          items,\n          active.id as string,\n          over.id as string,\n          offset,\n          indentationWidth\n        );\n\n        switch (event.code) {\n          case KeyboardCode.Left:\n            if (depth > minDepth) {\n              return {\n                ...currentCoordinates,\n                x: currentCoordinates.x - indentationWidth,\n              };\n            }\n            break;\n          case KeyboardCode.Right:\n            if (depth < maxDepth) {\n              return {\n                ...currentCoordinates,\n                x: currentCoordinates.x + indentationWidth,\n              };\n            }\n            break;\n        }\n\n        return undefined;\n      }\n\n      const containers: DroppableContainer[] = [];\n\n      droppableContainers.forEach(container => {\n        if (container?.disabled || container.id === over?.id) {\n          return;\n        }\n\n        const rect = droppableRects.get(container.id);\n\n        if (!rect) {\n          return;\n        }\n\n        switch (event.code) {\n          case KeyboardCode.Down:\n            if (collisionRect.top < rect.top) {\n              containers.push(container);\n            }\n            break;\n          case KeyboardCode.Up:\n            if (collisionRect.top > rect.top) {\n              containers.push(container);\n            }\n            break;\n        }\n      });\n\n      const collisions = closestCorners({\n        active,\n        collisionRect,\n        pointerCoordinates: null,\n        droppableRects,\n        droppableContainers: containers,\n      });\n      let closestId = getFirstCollision(collisions, 'id');\n\n      if (closestId === over?.id && collisions.length > 1) {\n        closestId = collisions[1].id;\n      }\n\n      if (closestId != null && over?.id != null) {\n        const activeRect = droppableRects.get(active.id);\n        const newRect = droppableRects.get(closestId);\n        const newDroppable = droppableContainers.get(closestId);\n\n        if (activeRect && newRect && newDroppable) {\n          const newIndex = items.findIndex(({ id }) => id === closestId);\n          const newItem = items[newIndex];\n          const activeIndex = items.findIndex(({ id }) => id === active.id);\n          const activeItem = items[activeIndex];\n\n          if (newItem != null && activeItem != null) {\n            const { depth } = getProjection(\n              items,\n              active.id as string,\n              closestId as string,\n              (newItem.depth - activeItem.depth) * indentationWidth,\n              indentationWidth\n            );\n            const isBelow = newIndex > activeIndex;\n            const modifier = isBelow ? 1 : -1;\n            const nextOffset = indicator\n              ? (collisionRect.height - activeRect.height) / 2\n              : 0;\n\n            const newCoordinates = {\n              x: newRect.left + depth * indentationWidth,\n              y: newRect.top + modifier * nextOffset,\n            };\n\n            return newCoordinates;\n          }\n        }\n      }\n    }\n\n    return undefined;\n  };\n}\n"],"mappings":"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"}

package/dist/sidebar/visibility-ordering-builder/sortable-tree/types.d.ts

@@ -0,0 +1,20 @@
+import type { MutableRefObject } from 'react';
+export type TreeItem<T = undefined> = {
+    id: string;
+    children: TreeItem<T>[];
+    selected: boolean;
+} & (T extends undefined ? {} : {
+    data: T;
+});
+export type TreeItems<T = undefined> = TreeItem<T>[];
+export type FlattenedItem<T = undefined> = TreeItem<T> & {
+    parentId: string | null;
+    depth: number;
+    index: number;
+};
+export declare function isFlattenedTreeItem<T>(item: TreeItem<T>): item is FlattenedItem<T>;
+export type SensorContext = MutableRefObject<{
+    items: FlattenedItem[];
+    offset: number;
+}>;
+//# sourceMappingURL=types.d.ts.map

package/dist/sidebar/visibility-ordering-builder/sortable-tree/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAE9C,MAAM,MAAM,QAAQ,CAAC,CAAC,GAAG,SAAS,IAAI;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;CACnB,GAAG,CAAC,CAAC,SAAS,SAAS,GAEpB,EAAE,GACF;IACE,IAAI,EAAE,CAAC,CAAC;CACT,CAAC,CAAC;AAEP,MAAM,MAAM,SAAS,CAAC,CAAC,GAAG,SAAS,IAAI,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;AAErD,MAAM,MAAM,aAAa,CAAC,CAAC,GAAG,SAAS,IAAI,QAAQ,CAAC,CAAC,CAAC,GAAG;IACvD,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,CAAC,EACnC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,GAChB,IAAI,IAAI,aAAa,CAAC,CAAC,CAAC,CAE1B;AAED,MAAM,MAAM,aAAa,GAAG,gBAAgB,CAAC;IAC3C,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC"}

package/dist/sidebar/visibility-ordering-builder/sortable-tree/types.js

@@ -0,0 +1,4 @@
+export function isFlattenedTreeItem(item) {
+  return item.parentId !== undefined;
+}
+//# sourceMappingURL=types.js.map

package/dist/sidebar/visibility-ordering-builder/sortable-tree/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":["isFlattenedTreeItem","item","parentId","undefined"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/types.ts"],"sourcesContent":["import type { MutableRefObject } from 'react';\n\nexport type TreeItem<T = undefined> = {\n  id: string;\n  children: TreeItem<T>[];\n  selected: boolean;\n} & (T extends undefined\n  ? // eslint-disable-next-line @typescript-eslint/ban-types\n    {}\n  : {\n      data: T;\n    });\n\nexport type TreeItems<T = undefined> = TreeItem<T>[];\n\nexport type FlattenedItem<T = undefined> = TreeItem<T> & {\n  parentId: string | null;\n  depth: number;\n  index: number;\n};\n\nexport function isFlattenedTreeItem<T>(\n  item: TreeItem<T>\n): item is FlattenedItem<T> {\n  return (item as FlattenedItem<T>).parentId !== undefined;\n}\n\nexport type SensorContext = MutableRefObject<{\n  items: FlattenedItem[];\n  offset: number;\n}>;\n"],"mappings":"AAqBA,OAAO,SAASA,mBAAmB,CACjCC,IAAiB,EACS;EAC1B,OAAQA,IAAI,CAAsBC,QAAQ,KAAKC,SAAS;AAC1D"}

package/dist/sidebar/visibility-ordering-builder/sortable-tree/utilities.d.ts

@@ -0,0 +1,55 @@
+import type { Column } from '@deephaven/jsapi-shim';
+import { ModelSizeMap, MoveOperation } from '@deephaven/grid';
+import type ColumnHeaderGroup from '../../../ColumnHeaderGroup';
+import type { FlattenedItem, TreeItem, TreeItems } from './types';
+interface IrisGridTreeItemData {
+    modelIndex: number | number[];
+    visibleIndex: number | [number, number];
+    isVisible: boolean;
+    group?: ColumnHeaderGroup;
+}
+export type IrisGridTreeItem = TreeItem<IrisGridTreeItemData>;
+export type FlattenedIrisGridTreeItem = FlattenedItem<IrisGridTreeItemData>;
+export declare function getTreeItems(columns: Column[], movedColumns: MoveOperation[], columnHeaderGroups: ColumnHeaderGroup[], userColumnWidths: ModelSizeMap, selectedItems: string[]): IrisGridTreeItem[];
+/**
+ * Gets the projected drop position and depth of the dragged item
+ *
+ * @param items List of flattened items
+ * @param activeId ID of the actively dragged item
+ * @param overId ID of the item currently being dragged over
+ * @param dragOffset The x-axis offset of the dragged item
+ * @param indentationWidth The width for each level of the tree
+ * @returns The projected position and depth if the item were to be dropped
+ */
+export declare function getProjection(items: FlattenedItem[], activeId: string, overId: string, dragOffset: number, indentationWidth: number): {
+    depth: number;
+    maxDepth: number;
+    minDepth: number;
+    parentId: string | null;
+};
+/**
+ * Flattens a tree into a 1D array given the items
+ * @param items The tree items to flatten
+ * @returns The flattened tree items list
+ */
+export declare function flattenTree<T>(items: TreeItems<T>): FlattenedItem<T>[];
+/**
+ * Recursively checks for the item in a list of items.
+ * The list does not have to be flattened prior to searching.
+ *
+ * @param items Items to search
+ * @param itemId Item to find
+ * @returns The item if found
+ */
+export declare function findItemDeep(items: TreeItems, itemId: string): TreeItem | undefined;
+export declare function getChildCount(items: TreeItems, id: string): number;
+/**
+ * Removes the children of the list of parents from the list of flattened items
+ *
+ * @param items The flattened items to remove from
+ * @param ids The parents we want to remove the children of
+ * @returns The flattened items without the children of the parents
+ */
+export declare function removeChildrenOf<T>(items: FlattenedItem<T>[], ids: string[]): FlattenedItem<T>[];
+export {};
+//# sourceMappingURL=utilities.d.ts.map

package/dist/sidebar/visibility-ordering-builder/sortable-tree/utilities.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utilities.d.ts","sourceRoot":"","sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/utilities.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAa,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACzE,OAAO,KAAK,iBAAiB,MAAM,4BAA4B,CAAC;AAEhE,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAalE,UAAU,oBAAoB;IAC5B,UAAU,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,YAAY,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,iBAAiB,CAAC;CAC3B;AAED,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC,oBAAoB,CAAC,CAAC;AAE9D,MAAM,MAAM,yBAAyB,GAAG,aAAa,CAAC,oBAAoB,CAAC,CAAC;AAoE5E,wBAAgB,YAAY,CAC1B,OAAO,EAAE,MAAM,EAAE,EACjB,YAAY,EAAE,aAAa,EAAE,EAC7B,kBAAkB,EAAE,iBAAiB,EAAE,EACvC,gBAAgB,EAAE,YAAY,EAC9B,aAAa,EAAE,MAAM,EAAE,GACtB,gBAAgB,EAAE,CAsCpB;AAED;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,aAAa,EAAE,EACtB,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,MAAM,EAClB,gBAAgB,EAAE,MAAM;;;;;EA6CzB;AA2CD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,EAAE,CAMtE;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,MAAM,GACb,QAAQ,GAAG,SAAS,CAmBtB;AAYD,wBAAgB,aAAa,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAIlE;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAChC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,EACzB,GAAG,EAAE,MAAM,EAAE,GACZ,aAAa,CAAC,CAAC,CAAC,EAAE,CAapB"}