@deephaven/file-explorer 0.43.0 → 0.44.1-beta.0

package/dist/FileList.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../node_modules/@deephaven/components/scss/custom.scss","../src/FileList.scss","../../../node_modules/@deephaven/components/scss/bootstrap_overrides.scss","../../../node_modules/@deephaven/components/scss/new_variables.scss"],"names":[],"mappings":"AAAA;ACcA;EACE;EACA;EACA;EACA;EACA;AA8EA;AA0BA;;AAtGA;EACE,aAnBW;EAoBX;EACA,OApBgB;EAqBhB;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA,OCfO;EDgBP,YC2Fa;ED1Fb;EACA;EACA;;AAEA;EACE,kBArC0B;;AAwC5B;EACE,kBAzC0B;;AA4C5B;EAIE,OCzCW;;AD6Cf;EACE;EACA;EACA;;AAGF;EACE,cE/DO;;AFmEP;EACE,kBA7DiB;;AAiEnB;EACE,kBApEkB;EAqElB,OC/DW;EDgEX,mBArE6B;EAsE7B,oBAtE6B;;AA0EjC;EACE;;AAGE;EACE;;AAIJ;AAAA;EAEE,OChFW;;ADsFb;EAEE,kBCzFU;ED0FV,OCzFW;ED0FX;;AAKJ;EAEE;;AAKF;EACE;;AAIF;EACE;;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA,YC7EW;ED8EX,OCzHa;ED0Hb,eCdY","file":"FileList.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: 5px;\n$depth-indentation: 8px;\n$item-list-color: $text-muted;\n$item-list-selected-nofocus-bg: mix($primary, $gray-700, 12%);\n$item-list-selected-bg: mix($primary, $gray-700, 35%);\n$item-list-selection-border-color: mix($primary, $gray-700, 55%);\n$item-list-focused-bg: rgba($primary, 0.75);\n$item-list-hover-bg: $primary;\n$item-list-selected-color: $white;\n$item-list-drop-target-color: $white;\n\n.file-list {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n\n  .file-list-depth-line {\n    margin-left: $depth-margin;\n    padding-bottom: 2px;\n    width: $depth-indentation;\n    height: 100%;\n    border-left: 1px solid $depth-line-color;\n    box-sizing: content-box;\n  }\n\n  .item-list-scroll-pane {\n    border: none;\n  }\n\n  .item-list-item {\n    padding: 0 $input-btn-padding-x;\n    color: $item-list-color;\n    transition: $btn-transition;\n    border: 1px solid transparent; // we need a spacer border so stuff doesn't move on us when we apply a border-color\n    -webkit-user-drag: none; // we need to disable webkit-user-drag or else Chrome switches to a Copy icon when dragging on Mac\n    cursor: pointer;\n\n    &.is-focused {\n      background-color: $item-list-selected-nofocus-bg;\n    }\n\n    &.active {\n      background-color: $item-list-selected-nofocus-bg;\n    }\n\n    &:focus,\n    &.active,\n    &:hover,\n    &.is-focused {\n      color: $item-list-selected-color;\n    }\n  }\n\n  .truncation-wrapper {\n    overflow-x: hidden;\n    text-overflow: ellipsis;\n    white-space: pre;\n  }\n\n  .item-icon {\n    margin-right: $spacer-1;\n  }\n\n  &:focus-within {\n    &.item-list-item.is-focused {\n      background-color: $item-list-focused-bg;\n    }\n\n    //for selected items, apply border on left and right\n    .item-list-item.active {\n      background-color: $item-list-selected-bg;\n      color: $item-list-selected-color;\n      border-left-color: $item-list-selection-border-color;\n      border-right-color: $item-list-selection-border-color;\n    }\n  }\n\n  &.is-dragging {\n    cursor: grabbing;\n\n    .item-list-item {\n      &.active {\n        opacity: 0.5;\n      }\n    }\n\n    .is-in-drop-target,\n    .is-exact-drop-target {\n      color: $item-list-drop-target-color;\n    }\n  }\n\n  /* stylelint-disable no-descending-specificity */\n  &:not(.is-dragging) {\n    .item-list-item:hover,\n    &:focus-within .item-list-item.active:hover {\n      background-color: $item-list-hover-bg;\n      color: $item-list-selected-color;\n      transition: none; //to make things feel more responsive don't transition the hover in\n    }\n  }\n\n  //apply border to top of the first item in the list if its selected, and the first selected after a non-selected item\n  &:focus-within .item-list-item:not(.active) + .active,\n  &:focus-within .item-list-item.active:first-of-type {\n    border-top: 1px solid $item-list-selection-border-color;\n  }\n\n  //there's no easy way to get the last select item in a grouping, so we apply the end border\n  //to the TOP of the first non-selected item, ie. the previous selection group\n  &:focus-within .item-list-item.active + .item-list-item:not(.active) {\n    border-top: 1px solid $item-list-selection-border-color;\n  }\n\n  //since there is no item after the last item in teh selection, we apply the border to the bottom of the last selected element\n  &:focus-within .item-list-item.active:last-of-type {\n    border-bottom: 1px solid $item-list-selection-border-color;\n  }\n  /* stylelint-enable no-descending-specificity */\n}\n\n.file-list-dnd-placeholder {\n  position: absolute;\n  top: -100px;\n  right: 0;\n\n  .dnd-placeholder-content {\n    padding: $spacer-1 $spacer-3;\n    background: $primary-dark;\n    color: $foreground;\n    border-radius: $border-radius;\n  }\n}\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","//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"]}

package/dist/FileList.js

@@ -0,0 +1,309 @@
+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) { 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); }
+import { ItemList } from '@deephaven/components';
+import Log from '@deephaven/log';
+import { RangeUtils } from '@deephaven/utils';
+import classNames from 'classnames';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { isDirectory } from "./FileStorage.js";
+import "./FileList.css";
+import { DEFAULT_ROW_HEIGHT, getMoveOperation } from "./FileListUtils.js";
+import { FileListItem } from "./FileListItem.js";
+var log = Log.module('FileList');
+// How long you need to hover over a directory before it expands
+var DRAG_HOVER_TIMEOUT = 500;
+var ITEM_LIST_CLASS_NAME = 'item-list-scroll-pane';
+
+/**
+ * Component that displays and allows interaction with the file system in the provided FileStorageTable.
+ */
+export function FileList(props) {
+  var {
+    isMultiSelect = false,
+    table,
+    onFocusChange = () => undefined,
+    onMove,
+    onSelect,
+    onSelectionChange = () => undefined,
+    renderItem = FileListItem,
+    rowHeight = DEFAULT_ROW_HEIGHT,
+    overscanCount = ItemList.DEFAULT_OVERSCAN
+  } = props;
+  var [loadedViewport, setLoadedViewport] = useState(() => ({
+    items: [],
+    offset: 0,
+    itemCount: 0
+  }));
+  var [viewport, setViewport] = useState({
+    top: 0,
+    bottom: 0
+  });
+  var [dropTargetItem, setDropTargetItem] = useState();
+  var [draggedItems, setDraggedItems] = useState();
+  var [dragPlaceholder, setDragPlaceholder] = useState();
+  var [selectedRanges, setSelectedRanges] = useState([]);
+  var itemList = useRef(null);
+  var fileList = useRef(null);
+  var getItems = useCallback(ranges => {
+    if (ranges.length === 0 || loadedViewport == null) {
+      return [];
+    }
+    var items = [];
+    for (var i = 0; i < ranges.length; i += 1) {
+      var range = ranges[i];
+      for (var j = range[0]; j <= range[1]; j += 1) {
+        if (j >= loadedViewport.offset && j < loadedViewport.offset + loadedViewport.items.length) {
+          items.push(loadedViewport.items[j - loadedViewport.offset]);
+        }
+      }
+    }
+    return items;
+  }, [loadedViewport]);
+  var getItem = useCallback(itemIndex => {
+    var items = getItems([[itemIndex, itemIndex]]);
+    if (items.length > 0) {
+      return items[0];
+    }
+  }, [getItems]);
+
+  /**
+   * Get the placeholder text to show when a drag operation is in progress
+   */
+  var getDragPlaceholderText = useCallback(() => {
+    var count = RangeUtils.count(selectedRanges);
+    if (count === 0) {
+      return null;
+    }
+    if (count === 1) {
+      var index = selectedRanges[0][0];
+      var item = getItem(index);
+      if (item != null) {
+        return item.filename;
+      }
+    }
+    return "".concat(count, " items");
+  }, [getItem, selectedRanges]);
+
+  /**
+   * Drop the currently dragged items at the currently set drop target.
+   * If an itemIndex is provided, focus that index after the drop.
+   */
+  var dropItems = useCallback(itemIndex => {
+    if (!draggedItems || !dropTargetItem) {
+      return;
+    }
+    log.debug('dropItems', draggedItems, 'to', itemIndex);
+    try {
+      var {
+        files: _files,
+        targetPath
+      } = getMoveOperation(draggedItems, dropTargetItem);
+      onMove === null || onMove === void 0 ? void 0 : onMove(_files, targetPath);
+      if (itemIndex != null) {
+        var _itemList$current;
+        setSelectedRanges([[itemIndex, itemIndex]]);
+        (_itemList$current = itemList.current) === null || _itemList$current === void 0 ? void 0 : _itemList$current.focusItem(itemIndex);
+      }
+    } catch (err) {
+      log.error('Unable to complete move', err);
+    }
+  }, [draggedItems, dropTargetItem, onMove]);
+  var handleSelect = useCallback((itemIndex, event) => {
+    var item = loadedViewport.items[itemIndex - loadedViewport.offset];
+    if (item !== undefined) {
+      log.debug('handleItemClick', item);
+      onSelect(item, event);
+      if (isDirectory(item)) {
+        table === null || table === void 0 ? void 0 : table.setExpanded(item.filename, !item.isExpanded);
+      }
+    }
+  }, [loadedViewport, onSelect, table]);
+  var handleItemDragStart = useCallback((itemIndex, e) => {
+    var _itemList$current2;
+    log.debug2('handleItemDragStart', itemIndex, selectedRanges);
+    var draggedRanges = selectedRanges;
+    if (!RangeUtils.isSelected(selectedRanges, itemIndex)) {
+      draggedRanges = [[itemIndex, itemIndex]];
+      setSelectedRanges(draggedRanges);
+    }
+    setDraggedItems(getItems(draggedRanges));
+
+    // We need to reset reset the mouse state since we steal the drag
+    (_itemList$current2 = itemList.current) === null || _itemList$current2 === void 0 ? void 0 : _itemList$current2.resetMouseState();
+    var newDragPlaceholder = document.createElement('div');
+    newDragPlaceholder.innerHTML = "<div class=\"dnd-placeholder-content\">".concat(getDragPlaceholderText(), "</div>");
+    newDragPlaceholder.className = 'file-list-dnd-placeholder';
+    document.body.appendChild(newDragPlaceholder);
+    e.dataTransfer.setDragImage(newDragPlaceholder, 0, 0);
+    e.dataTransfer.effectAllowed = 'move';
+    setDragPlaceholder(newDragPlaceholder);
+  }, [getDragPlaceholderText, getItems, selectedRanges]);
+  var handleItemDragOver = useCallback((itemIndex, e) => {
+    e.preventDefault();
+    log.debug2('handleItemDragOver', e);
+    setDropTargetItem(getItem(itemIndex));
+  }, [getItem]);
+  var handleItemDragEnd = useCallback((itemIndex, e) => {
+    log.debug('handleItemDragEnd', itemIndex);
+    dragPlaceholder === null || dragPlaceholder === void 0 ? void 0 : dragPlaceholder.remove();
+
+    // Drag end is triggered after drop
+    // Also drop isn't triggered if drag end is outside of the list
+    setDraggedItems(undefined);
+    setDropTargetItem(undefined);
+    setDragPlaceholder(undefined);
+  }, [dragPlaceholder]);
+  var handleItemDrop = useCallback((itemIndex, e) => {
+    dropItems(itemIndex);
+  }, [dropItems]);
+  var handleItemDragExit = useCallback(() => {
+    log.debug2('handleItemDragExit');
+    setDropTargetItem(undefined);
+  }, []);
+  var handleListDragOver = useCallback(e => {
+    if (e.target instanceof Element && e.target.classList.contains(ITEM_LIST_CLASS_NAME)) {
+      // Need to prevent default to enable drop
+      // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#droptargets
+      e.preventDefault();
+      log.debug2('handleListDragOver', e);
+      setDropTargetItem({
+        type: 'directory',
+        filename: '/',
+        basename: '/',
+        id: '/'
+      });
+    }
+  }, []);
+  var handleListDrop = useCallback(e => {
+    if (e.target instanceof Element && e.target.classList.contains(ITEM_LIST_CLASS_NAME)) {
+      log.debug('handleListDrop');
+      dropItems();
+    }
+  }, [dropItems]);
+  var handleSelectionChange = useCallback(newSelectedRanges => {
+    log.debug2('handleSelectionChange', newSelectedRanges);
+    if (newSelectedRanges !== selectedRanges) {
+      setSelectedRanges(newSelectedRanges);
+      var _selectedItems = getItems(newSelectedRanges);
+      onSelectionChange(_selectedItems);
+    }
+  }, [getItems, onSelectionChange, selectedRanges]);
+  var handleFocusChange = useCallback(focusIndex => {
+    log.debug2('handleFocusChange', focusIndex);
+    if (focusIndex != null) {
+      var [_focusedItem] = getItems([[focusIndex, focusIndex]]);
+      onFocusChange(_focusedItem);
+    } else {
+      onFocusChange();
+    }
+  }, [getItems, onFocusChange]);
+  var handleViewportChange = useCallback((top, bottom) => {
+    log.debug('handleViewportChange', top, bottom);
+    if (top !== viewport.top || bottom !== viewport.bottom) {
+      setViewport({
+        top,
+        bottom
+      });
+    }
+  }, [viewport]);
+  var isDropTargetValid = useMemo(() => {
+    if (!draggedItems || !dropTargetItem) {
+      return false;
+    }
+    try {
+      getMoveOperation(draggedItems, dropTargetItem);
+      log.debug('handleValidateDropTarget true');
+      return true;
+    } catch (e) {
+      log.debug('handleValidateDropTarget false');
+      return false;
+    }
+  }, [draggedItems, dropTargetItem]);
+  var {
+    focusedPath
+  } = props;
+  useEffect(() => {
+    if (focusedPath !== undefined) {
+      if (focusedPath === '/') {
+        table.collapseAll();
+      } else {
+        table.setExpanded(focusedPath, false);
+        table.setExpanded(focusedPath, true);
+      }
+    }
+  }, [table, focusedPath]);
+  useEffect(function updateTableViewport() {
+    log.debug('updating table viewport', viewport);
+    table === null || table === void 0 ? void 0 : table.setViewport({
+      top: Math.max(0, viewport.top - overscanCount),
+      bottom: viewport.bottom + overscanCount
+    });
+  }, [overscanCount, table, viewport]);
+
+  // Listen for table updates
+  useEffect(function setLoadedViewportAndReturnCleanup() {
+    var listenerRemover = table.onUpdate(newViewport => {
+      setLoadedViewport({
+        items: newViewport.items.map(item => _objectSpread(_objectSpread({}, item), {}, {
+          itemName: item.basename
+        })),
+        offset: newViewport.offset,
+        itemCount: table.size
+      });
+    });
+    return () => {
+      listenerRemover();
+    };
+  }, [table]);
+
+  // Expand a folder if hovering over it
+  useEffect(function expandFolderOnHover() {
+    if (dropTargetItem != null && isDirectory(dropTargetItem) && dropTargetItem.filename !== '/') {
+      var timeout = setTimeout(() => {
+        if (!dropTargetItem.isExpanded) {
+          table === null || table === void 0 ? void 0 : table.setExpanded(dropTargetItem.filename, true);
+        }
+      }, DRAG_HOVER_TIMEOUT);
+      return () => clearTimeout(timeout);
+    }
+  }, [dropTargetItem, table]);
+  var renderWrapper = useCallback(itemProps => renderItem(_objectSpread(_objectSpread({}, itemProps), {}, {
+    isDragInProgress: draggedItems != null,
+    dropTargetItem,
+    draggedItems,
+    isDropTargetValid,
+    onDragStart: handleItemDragStart,
+    onDragEnd: handleItemDragEnd,
+    onDragOver: handleItemDragOver,
+    onDragExit: handleItemDragExit,
+    onDrop: handleItemDrop
+  })), [handleItemDragEnd, handleItemDragExit, handleItemDragOver, handleItemDragStart, handleItemDrop, draggedItems, dropTargetItem, isDropTargetValid, renderItem]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: fileList,
+    className: classNames('file-list', {
+      'is-dragging': draggedItems != null
+    }),
+    onDragOver: handleListDragOver,
+    onDrop: handleListDrop
+  }, /*#__PURE__*/React.createElement(ItemList, {
+    ref: itemList,
+    items: loadedViewport.items,
+    itemCount: loadedViewport.itemCount,
+    offset: loadedViewport.offset,
+    onFocusChange: handleFocusChange,
+    onSelect: handleSelect,
+    onSelectionChange: handleSelectionChange,
+    onViewportChange: handleViewportChange,
+    selectedRanges: selectedRanges,
+    renderItem: renderWrapper,
+    rowHeight: rowHeight,
+    isMultiSelect: isMultiSelect,
+    isDragSelect: false,
+    isDeselectOnClick: false
+  }));
+}
+export default FileList;
+//# sourceMappingURL=FileList.js.map

package/dist/FileList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileList.js","names":["ItemList","Log","RangeUtils","classNames","React","useCallback","useEffect","useMemo","useRef","useState","isDirectory","DEFAULT_ROW_HEIGHT","getMoveOperation","FileListItem","log","module","DRAG_HOVER_TIMEOUT","ITEM_LIST_CLASS_NAME","FileList","props","isMultiSelect","table","onFocusChange","undefined","onMove","onSelect","onSelectionChange","renderItem","rowHeight","overscanCount","DEFAULT_OVERSCAN","loadedViewport","setLoadedViewport","items","offset","itemCount","viewport","setViewport","top","bottom","dropTargetItem","setDropTargetItem","draggedItems","setDraggedItems","dragPlaceholder","setDragPlaceholder","selectedRanges","setSelectedRanges","itemList","fileList","getItems","ranges","length","i","range","j","push","getItem","itemIndex","getDragPlaceholderText","count","index","item","filename","dropItems","debug","files","targetPath","current","focusItem","err","error","handleSelect","event","setExpanded","isExpanded","handleItemDragStart","e","debug2","draggedRanges","isSelected","resetMouseState","newDragPlaceholder","document","createElement","innerHTML","className","body","appendChild","dataTransfer","setDragImage","effectAllowed","handleItemDragOver","preventDefault","handleItemDragEnd","remove","handleItemDrop","handleItemDragExit","handleListDragOver","target","Element","classList","contains","type","basename","id","handleListDrop","handleSelectionChange","newSelectedRanges","selectedItems","handleFocusChange","focusIndex","focusedItem","handleViewportChange","isDropTargetValid","focusedPath","collapseAll","updateTableViewport","Math","max","setLoadedViewportAndReturnCleanup","listenerRemover","onUpdate","newViewport","map","itemName","size","expandFolderOnHover","timeout","setTimeout","clearTimeout","renderWrapper","itemProps","isDragInProgress","onDragStart","onDragEnd","onDragOver","onDragExit","onDrop"],"sources":["../src/FileList.tsx"],"sourcesContent":["import { ItemList, Range } from '@deephaven/components';\nimport Log from '@deephaven/log';\nimport { RangeUtils } from '@deephaven/utils';\nimport classNames from 'classnames';\nimport React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { FileStorageItem, FileStorageTable, isDirectory } from './FileStorage';\nimport './FileList.scss';\nimport { DEFAULT_ROW_HEIGHT, getMoveOperation } from './FileListUtils';\nimport { FileListItem, FileListRenderItemProps } from './FileListItem';\n\nconst log = Log.module('FileList');\n\nexport type LoadedViewport = {\n  items: FileStorageItem[];\n  offset: number;\n  itemCount: number;\n};\n\nexport type ListViewport = {\n  top: number;\n  bottom: number;\n};\n\nexport interface FileListProps {\n  table: FileStorageTable;\n\n  isMultiSelect?: boolean;\n  focusedPath?: string;\n\n  onFocusChange?: (focusedItem?: FileStorageItem) => void;\n  onMove?: (files: FileStorageItem[], path: string) => void;\n  onSelect: (file: FileStorageItem, event: React.SyntheticEvent) => void;\n  onSelectionChange?: (selectedItems: FileStorageItem[]) => void;\n\n  renderItem?: (props: FileListRenderItemProps) => JSX.Element;\n\n  /** Height of each item in the list */\n  rowHeight?: number;\n\n  overscanCount?: number;\n}\n\n// How long you need to hover over a directory before it expands\nconst DRAG_HOVER_TIMEOUT = 500;\n\nconst ITEM_LIST_CLASS_NAME = 'item-list-scroll-pane';\n\n/**\n * Component that displays and allows interaction with the file system in the provided FileStorageTable.\n */\nexport function FileList(props: FileListProps): JSX.Element {\n  const {\n    isMultiSelect = false,\n    table,\n    onFocusChange = () => undefined,\n    onMove,\n    onSelect,\n    onSelectionChange = () => undefined,\n    renderItem = FileListItem,\n    rowHeight = DEFAULT_ROW_HEIGHT,\n    overscanCount = ItemList.DEFAULT_OVERSCAN,\n  } = props;\n  const [loadedViewport, setLoadedViewport] = useState<LoadedViewport>(() => ({\n    items: [],\n    offset: 0,\n    itemCount: 0,\n  }));\n  const [viewport, setViewport] = useState<ListViewport>({\n    top: 0,\n    bottom: 0,\n  });\n\n  const [dropTargetItem, setDropTargetItem] = useState<FileStorageItem>();\n  const [draggedItems, setDraggedItems] = useState<FileStorageItem[]>();\n  const [dragPlaceholder, setDragPlaceholder] = useState<HTMLDivElement>();\n  const [selectedRanges, setSelectedRanges] = useState([] as Range[]);\n\n  const itemList = useRef<ItemList<FileStorageItem>>(null);\n  const fileList = useRef<HTMLDivElement>(null);\n\n  const getItems = useCallback(\n    (ranges: Range[]): FileStorageItem[] => {\n      if (ranges.length === 0 || loadedViewport == null) {\n        return [];\n      }\n\n      const items = [] as FileStorageItem[];\n      for (let i = 0; i < ranges.length; i += 1) {\n        const range = ranges[i];\n        for (let j = range[0]; j <= range[1]; j += 1) {\n          if (\n            j >= loadedViewport.offset &&\n            j < loadedViewport.offset + loadedViewport.items.length\n          ) {\n            items.push(loadedViewport.items[j - loadedViewport.offset]);\n          }\n        }\n      }\n      return items;\n    },\n    [loadedViewport]\n  );\n\n  const getItem = useCallback(\n    (itemIndex: number): FileStorageItem | undefined => {\n      const items = getItems([[itemIndex, itemIndex]]);\n      if (items.length > 0) {\n        return items[0];\n      }\n    },\n    [getItems]\n  );\n\n  /**\n   * Get the placeholder text to show when a drag operation is in progress\n   */\n  const getDragPlaceholderText = useCallback(() => {\n    const count = RangeUtils.count(selectedRanges);\n    if (count === 0) {\n      return null;\n    }\n\n    if (count === 1) {\n      const index = selectedRanges[0][0];\n      const item = getItem(index);\n      if (item != null) {\n        return item.filename;\n      }\n    }\n    return `${count} items`;\n  }, [getItem, selectedRanges]);\n\n  /**\n   * Drop the currently dragged items at the currently set drop target.\n   * If an itemIndex is provided, focus that index after the drop.\n   */\n  const dropItems = useCallback(\n    (itemIndex?: number) => {\n      if (!draggedItems || !dropTargetItem) {\n        return;\n      }\n\n      log.debug('dropItems', draggedItems, 'to', itemIndex);\n\n      try {\n        const { files, targetPath } = getMoveOperation(\n          draggedItems,\n          dropTargetItem\n        );\n        onMove?.(files, targetPath);\n        if (itemIndex != null) {\n          setSelectedRanges([[itemIndex, itemIndex]]);\n          itemList.current?.focusItem(itemIndex);\n        }\n      } catch (err) {\n        log.error('Unable to complete move', err);\n      }\n    },\n    [draggedItems, dropTargetItem, onMove]\n  );\n\n  const handleSelect = useCallback(\n    (itemIndex: number, event: React.SyntheticEvent) => {\n      const item = loadedViewport.items[itemIndex - loadedViewport.offset];\n      if (item !== undefined) {\n        log.debug('handleItemClick', item);\n\n        onSelect(item, event);\n        if (isDirectory(item)) {\n          table?.setExpanded(item.filename, !item.isExpanded);\n        }\n      }\n    },\n    [loadedViewport, onSelect, table]\n  );\n\n  const handleItemDragStart = useCallback(\n    (itemIndex: number, e: React.DragEvent<HTMLDivElement>) => {\n      log.debug2('handleItemDragStart', itemIndex, selectedRanges);\n\n      let draggedRanges = selectedRanges;\n      if (!RangeUtils.isSelected(selectedRanges, itemIndex)) {\n        draggedRanges = [[itemIndex, itemIndex]];\n        setSelectedRanges(draggedRanges);\n      }\n\n      setDraggedItems(getItems(draggedRanges));\n\n      // We need to reset reset the mouse state since we steal the drag\n      itemList.current?.resetMouseState();\n\n      const newDragPlaceholder = document.createElement('div');\n      newDragPlaceholder.innerHTML = `<div class=\"dnd-placeholder-content\">${getDragPlaceholderText()}</div>`;\n      newDragPlaceholder.className = 'file-list-dnd-placeholder';\n      document.body.appendChild(newDragPlaceholder);\n      e.dataTransfer.setDragImage(newDragPlaceholder, 0, 0);\n      e.dataTransfer.effectAllowed = 'move';\n      setDragPlaceholder(newDragPlaceholder);\n    },\n    [getDragPlaceholderText, getItems, selectedRanges]\n  );\n\n  const handleItemDragOver = useCallback(\n    (itemIndex: number, e: React.DragEvent<HTMLDivElement>) => {\n      e.preventDefault();\n\n      log.debug2('handleItemDragOver', e);\n      setDropTargetItem(getItem(itemIndex));\n    },\n    [getItem]\n  );\n\n  const handleItemDragEnd = useCallback(\n    (itemIndex: number, e: React.DragEvent<HTMLDivElement>) => {\n      log.debug('handleItemDragEnd', itemIndex);\n\n      dragPlaceholder?.remove();\n\n      // Drag end is triggered after drop\n      // Also drop isn't triggered if drag end is outside of the list\n      setDraggedItems(undefined);\n      setDropTargetItem(undefined);\n      setDragPlaceholder(undefined);\n    },\n    [dragPlaceholder]\n  );\n\n  const handleItemDrop = useCallback(\n    (itemIndex: number, e: React.DragEvent<HTMLDivElement>) => {\n      dropItems(itemIndex);\n    },\n    [dropItems]\n  );\n\n  const handleItemDragExit = useCallback(() => {\n    log.debug2('handleItemDragExit');\n    setDropTargetItem(undefined);\n  }, []);\n\n  const handleListDragOver = useCallback(\n    (e: React.DragEvent<HTMLDivElement>) => {\n      if (\n        e.target instanceof Element &&\n        e.target.classList.contains(ITEM_LIST_CLASS_NAME)\n      ) {\n        // Need to prevent default to enable drop\n        // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#droptargets\n        e.preventDefault();\n\n        log.debug2('handleListDragOver', e);\n        setDropTargetItem({\n          type: 'directory',\n          filename: '/',\n          basename: '/',\n          id: '/',\n        });\n      }\n    },\n    []\n  );\n\n  const handleListDrop = useCallback(\n    (e: React.DragEvent<HTMLDivElement>) => {\n      if (\n        e.target instanceof Element &&\n        e.target.classList.contains(ITEM_LIST_CLASS_NAME)\n      ) {\n        log.debug('handleListDrop');\n        dropItems();\n      }\n    },\n    [dropItems]\n  );\n\n  const handleSelectionChange = useCallback(\n    newSelectedRanges => {\n      log.debug2('handleSelectionChange', newSelectedRanges);\n      if (newSelectedRanges !== selectedRanges) {\n        setSelectedRanges(newSelectedRanges);\n        const selectedItems = getItems(newSelectedRanges);\n        onSelectionChange(selectedItems);\n      }\n    },\n    [getItems, onSelectionChange, selectedRanges]\n  );\n\n  const handleFocusChange = useCallback(\n    focusIndex => {\n      log.debug2('handleFocusChange', focusIndex);\n      if (focusIndex != null) {\n        const [focusedItem] = getItems([[focusIndex, focusIndex]]);\n        onFocusChange(focusedItem);\n      } else {\n        onFocusChange();\n      }\n    },\n    [getItems, onFocusChange]\n  );\n\n  const handleViewportChange = useCallback(\n    (top: number, bottom: number) => {\n      log.debug('handleViewportChange', top, bottom);\n      if (top !== viewport.top || bottom !== viewport.bottom) {\n        setViewport({ top, bottom });\n      }\n    },\n    [viewport]\n  );\n\n  const isDropTargetValid = useMemo(() => {\n    if (!draggedItems || !dropTargetItem) {\n      return false;\n    }\n\n    try {\n      getMoveOperation(draggedItems, dropTargetItem);\n      log.debug('handleValidateDropTarget true');\n      return true;\n    } catch (e) {\n      log.debug('handleValidateDropTarget false');\n      return false;\n    }\n  }, [draggedItems, dropTargetItem]);\n\n  const { focusedPath } = props;\n  useEffect(() => {\n    if (focusedPath !== undefined) {\n      if (focusedPath === '/') {\n        table.collapseAll();\n      } else {\n        table.setExpanded(focusedPath, false);\n        table.setExpanded(focusedPath, true);\n      }\n    }\n  }, [table, focusedPath]);\n\n  useEffect(\n    function updateTableViewport() {\n      log.debug('updating table viewport', viewport);\n      table?.setViewport({\n        top: Math.max(0, viewport.top - overscanCount),\n        bottom: viewport.bottom + overscanCount,\n      });\n    },\n    [overscanCount, table, viewport]\n  );\n\n  // Listen for table updates\n  useEffect(\n    function setLoadedViewportAndReturnCleanup() {\n      const listenerRemover = table.onUpdate(newViewport => {\n        setLoadedViewport({\n          items: newViewport.items.map(item => ({\n            ...item,\n            itemName: item.basename,\n          })),\n          offset: newViewport.offset,\n          itemCount: table.size,\n        });\n      });\n      return () => {\n        listenerRemover();\n      };\n    },\n    [table]\n  );\n\n  // Expand a folder if hovering over it\n  useEffect(\n    function expandFolderOnHover() {\n      if (\n        dropTargetItem != null &&\n        isDirectory(dropTargetItem) &&\n        dropTargetItem.filename !== '/'\n      ) {\n        const timeout = setTimeout(() => {\n          if (!dropTargetItem.isExpanded) {\n            table?.setExpanded(dropTargetItem.filename, true);\n          }\n        }, DRAG_HOVER_TIMEOUT);\n        return () => clearTimeout(timeout);\n      }\n    },\n    [dropTargetItem, table]\n  );\n\n  const renderWrapper = useCallback(\n    itemProps =>\n      renderItem({\n        ...itemProps,\n        isDragInProgress: draggedItems != null,\n        dropTargetItem,\n        draggedItems,\n        isDropTargetValid,\n        onDragStart: handleItemDragStart,\n        onDragEnd: handleItemDragEnd,\n        onDragOver: handleItemDragOver,\n        onDragExit: handleItemDragExit,\n        onDrop: handleItemDrop,\n      }),\n    [\n      handleItemDragEnd,\n      handleItemDragExit,\n      handleItemDragOver,\n      handleItemDragStart,\n      handleItemDrop,\n      draggedItems,\n      dropTargetItem,\n      isDropTargetValid,\n      renderItem,\n    ]\n  );\n\n  return (\n    <div\n      ref={fileList}\n      className={classNames('file-list', {\n        'is-dragging': draggedItems != null,\n      })}\n      onDragOver={handleListDragOver}\n      onDrop={handleListDrop}\n    >\n      <ItemList\n        ref={itemList}\n        items={loadedViewport.items}\n        itemCount={loadedViewport.itemCount}\n        offset={loadedViewport.offset}\n        onFocusChange={handleFocusChange}\n        onSelect={handleSelect}\n        onSelectionChange={handleSelectionChange}\n        onViewportChange={handleViewportChange}\n        selectedRanges={selectedRanges}\n        renderItem={renderWrapper}\n        rowHeight={rowHeight}\n        isMultiSelect={isMultiSelect}\n        isDragSelect={false}\n        isDeselectOnClick={false}\n      />\n    </div>\n  );\n}\n\nexport default FileList;\n"],"mappings":"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"}

package/dist/FileListContainer.js

@@ -0,0 +1,167 @@
+import { ContextActions } from '@deephaven/components';
+import { assertNotNull } from '@deephaven/utils';
+import React, { useCallback, useMemo, useState } from 'react';
+import FileList from "./FileList.js";
+import { FileListItem } from "./FileListItem.js";
+import { DEFAULT_ROW_HEIGHT } from "./FileListUtils.js";
+import { isDirectory } from "./FileStorage.js";
+import SHORTCUTS from "./FileExplorerShortcuts.js";
+import "./FileExplorer.css";
+import FileUtils from "./FileUtils.js";
+import FileListItemEditor from "./FileListItemEditor.js";
+/**
+ * Component that displays and allows interaction with the file system in the provided FileStorage.
+ */
+export function FileListContainer(props) {
+  var {
+    isMultiSelect = false,
+    focusedPath,
+    showContextMenu = false,
+    onCreateFile,
+    onCreateFolder,
+    onCopy,
+    onDelete,
+    onMove,
+    onRename,
+    onSelect,
+    onSelectionChange,
+    table,
+    rowHeight = DEFAULT_ROW_HEIGHT,
+    validateRename = () => Promise.resolve()
+  } = props;
+  var [renameItem, setRenameItem] = useState();
+  var [selectedItems, setSelectedItems] = useState([]);
+  var [focusedItem, setFocusedItem] = useState();
+  var handleSelectionChange = useCallback(newSelectedItems => {
+    setSelectedItems(newSelectedItems);
+    onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(newSelectedItems);
+  }, [onSelectionChange]);
+  var handleFocusChange = useCallback(newFocusedItem => {
+    setFocusedItem(newFocusedItem);
+  }, []);
+  var handleCopyAction = useCallback(() => {
+    if (focusedItem) {
+      onCopy === null || onCopy === void 0 ? void 0 : onCopy(focusedItem);
+    }
+  }, [focusedItem, onCopy]);
+  var handleDeleteAction = useCallback(() => {
+    if (selectedItems.length > 0) {
+      onDelete === null || onDelete === void 0 ? void 0 : onDelete(selectedItems);
+    }
+  }, [onDelete, selectedItems]);
+  var handleNewFileAction = useCallback(() => {
+    onCreateFile === null || onCreateFile === void 0 ? void 0 : onCreateFile();
+  }, [onCreateFile]);
+  var handleNewFolderAction = useCallback(() => {
+    if (focusedItem) {
+      onCreateFolder === null || onCreateFolder === void 0 ? void 0 : onCreateFolder(FileUtils.getPath(focusedItem.filename));
+    }
+  }, [focusedItem, onCreateFolder]);
+  var handleRenameAction = useCallback(() => {
+    if (focusedItem) {
+      setRenameItem(focusedItem);
+    }
+  }, [focusedItem]);
+  var handleRenameCancel = useCallback(() => {
+    setRenameItem(undefined);
+  }, []);
+  var handleRenameSubmit = useCallback(newName => {
+    if (renameItem) {
+      onRename === null || onRename === void 0 ? void 0 : onRename(renameItem, newName);
+      setRenameItem(undefined);
+    }
+  }, [onRename, renameItem]);
+  var actions = useMemo(() => {
+    if (renameItem) {
+      // While renaming, we don't want to enable any of the context actions or it may interfere with renaming input
+      return [];
+    }
+    var result = [];
+    if (onCreateFile) {
+      result.push({
+        title: 'New File',
+        description: 'Create new file',
+        action: handleNewFileAction,
+        group: ContextActions.groups.medium
+      });
+    }
+    if (onCreateFolder) {
+      result.push({
+        title: 'New Folder',
+        description: 'Create new folder',
+        action: handleNewFolderAction,
+        group: ContextActions.groups.medium
+      });
+    }
+    if (onCopy) {
+      result.push({
+        title: 'Copy',
+        description: 'Copy',
+        action: handleCopyAction,
+        group: ContextActions.groups.low,
+        disabled: focusedItem == null || isDirectory(focusedItem)
+      });
+    }
+    if (onDelete && selectedItems.length > 0) {
+      result.push({
+        title: 'Delete',
+        description: 'Delete',
+        shortcut: SHORTCUTS.FILE_EXPLORER.DELETE,
+        action: handleDeleteAction,
+        group: ContextActions.groups.low
+      });
+    }
+    if (onRename) {
+      result.push({
+        title: 'Rename',
+        description: 'Rename',
+        shortcut: SHORTCUTS.FILE_EXPLORER.RENAME,
+        action: handleRenameAction,
+        group: ContextActions.groups.low,
+        disabled: focusedItem == null
+      });
+    }
+    return result;
+  }, [handleCopyAction, handleDeleteAction, handleNewFileAction, handleNewFolderAction, handleRenameAction, focusedItem, onCopy, onCreateFile, onCreateFolder, onDelete, onRename, selectedItems, renameItem]);
+  var validateRenameItem = useCallback(newName => {
+    assertNotNull(renameItem);
+    return validateRename(renameItem, newName);
+  }, [renameItem, validateRename]);
+  var renderItem = useCallback(itemProps => {
+    var {
+      item
+    } = itemProps;
+    if (renameItem && renameItem.filename === item.filename) {
+      return (
+        /*#__PURE__*/
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        React.createElement(FileListItem, itemProps, /*#__PURE__*/React.createElement(FileListItemEditor, {
+          item: item,
+          validate: validateRenameItem,
+          onSubmit: handleRenameSubmit,
+          onCancel: handleRenameCancel
+        }))
+      );
+    }
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return /*#__PURE__*/React.createElement(FileListItem, itemProps);
+  }, [handleRenameCancel, handleRenameSubmit, renameItem, validateRenameItem]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "file-list-container"
+  }, table != null && /*#__PURE__*/React.createElement(FileList, {
+    onMove: onMove,
+    onSelect: onSelect,
+    onSelectionChange: handleSelectionChange,
+    onFocusChange: handleFocusChange,
+    renderItem: renderItem,
+    rowHeight: rowHeight,
+    table: table,
+    isMultiSelect: isMultiSelect,
+    focusedPath: focusedPath
+  }), showContextMenu && /*#__PURE__*/React.createElement(ContextActions, {
+    actions: actions
+  }));
+}
+FileListContainer.displayName = 'FileListContainer';
+export default FileListContainer;
+//# sourceMappingURL=FileListContainer.js.map

package/dist/FileListContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileListContainer.js","names":["ContextActions","assertNotNull","React","useCallback","useMemo","useState","FileList","FileListItem","DEFAULT_ROW_HEIGHT","isDirectory","SHORTCUTS","FileUtils","FileListItemEditor","FileListContainer","props","isMultiSelect","focusedPath","showContextMenu","onCreateFile","onCreateFolder","onCopy","onDelete","onMove","onRename","onSelect","onSelectionChange","table","rowHeight","validateRename","Promise","resolve","renameItem","setRenameItem","selectedItems","setSelectedItems","focusedItem","setFocusedItem","handleSelectionChange","newSelectedItems","handleFocusChange","newFocusedItem","handleCopyAction","handleDeleteAction","length","handleNewFileAction","handleNewFolderAction","getPath","filename","handleRenameAction","handleRenameCancel","undefined","handleRenameSubmit","newName","actions","result","push","title","description","action","group","groups","medium","low","disabled","shortcut","FILE_EXPLORER","DELETE","RENAME","validateRenameItem","renderItem","itemProps","item","displayName"],"sources":["../src/FileListContainer.tsx"],"sourcesContent":["import { ContextAction, ContextActions } from '@deephaven/components';\nimport { assertNotNull } from '@deephaven/utils';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport FileList from './FileList';\nimport { FileListItem, FileListRenderItemProps } from './FileListItem';\nimport { DEFAULT_ROW_HEIGHT } from './FileListUtils';\nimport { FileStorageItem, FileStorageTable, isDirectory } from './FileStorage';\nimport SHORTCUTS from './FileExplorerShortcuts';\nimport './FileExplorer.scss';\nimport FileUtils from './FileUtils';\nimport FileListItemEditor from './FileListItemEditor';\n\nexport interface FileListContainerProps {\n  showContextMenu?: boolean;\n  table: FileStorageTable;\n\n  isMultiSelect?: boolean;\n  focusedPath?: string;\n\n  onCreateFile?: (path?: string) => void;\n  onCreateFolder?: (path?: string) => void;\n  onCopy?: (file: FileStorageItem) => void;\n  onDelete?: (files: FileStorageItem[]) => void;\n  onMove?: (files: FileStorageItem[], path: string) => void;\n  onRename?: (file: FileStorageItem, newName: string) => void;\n  onSelect: (file: FileStorageItem, event: React.SyntheticEvent) => void;\n  validateRename?: (file: FileStorageItem, newName: string) => Promise<void>;\n  onSelectionChange?: (selectedItems: FileStorageItem[]) => void;\n\n  /** Height of each item in the list */\n  rowHeight?: number;\n}\n\n/**\n * Component that displays and allows interaction with the file system in the provided FileStorage.\n */\nexport function FileListContainer(props: FileListContainerProps): JSX.Element {\n  const {\n    isMultiSelect = false,\n    focusedPath,\n    showContextMenu = false,\n    onCreateFile,\n    onCreateFolder,\n    onCopy,\n    onDelete,\n    onMove,\n    onRename,\n    onSelect,\n    onSelectionChange,\n    table,\n    rowHeight = DEFAULT_ROW_HEIGHT,\n    validateRename = () => Promise.resolve(),\n  } = props;\n  const [renameItem, setRenameItem] = useState<FileStorageItem>();\n  const [selectedItems, setSelectedItems] = useState([] as FileStorageItem[]);\n  const [focusedItem, setFocusedItem] = useState<FileStorageItem>();\n\n  const handleSelectionChange = useCallback(\n    newSelectedItems => {\n      setSelectedItems(newSelectedItems);\n      onSelectionChange?.(newSelectedItems);\n    },\n    [onSelectionChange]\n  );\n\n  const handleFocusChange = useCallback(newFocusedItem => {\n    setFocusedItem(newFocusedItem);\n  }, []);\n\n  const handleCopyAction = useCallback(() => {\n    if (focusedItem) {\n      onCopy?.(focusedItem);\n    }\n  }, [focusedItem, onCopy]);\n\n  const handleDeleteAction = useCallback(() => {\n    if (selectedItems.length > 0) {\n      onDelete?.(selectedItems);\n    }\n  }, [onDelete, selectedItems]);\n\n  const handleNewFileAction = useCallback(() => {\n    onCreateFile?.();\n  }, [onCreateFile]);\n\n  const handleNewFolderAction = useCallback(() => {\n    if (focusedItem) {\n      onCreateFolder?.(FileUtils.getPath(focusedItem.filename));\n    }\n  }, [focusedItem, onCreateFolder]);\n\n  const handleRenameAction = useCallback(() => {\n    if (focusedItem) {\n      setRenameItem(focusedItem);\n    }\n  }, [focusedItem]);\n\n  const handleRenameCancel = useCallback((): void => {\n    setRenameItem(undefined);\n  }, []);\n\n  const handleRenameSubmit = useCallback(\n    (newName: string): void => {\n      if (renameItem) {\n        onRename?.(renameItem, newName);\n        setRenameItem(undefined);\n      }\n    },\n    [onRename, renameItem]\n  );\n\n  const actions = useMemo(() => {\n    if (renameItem) {\n      // While renaming, we don't want to enable any of the context actions or it may interfere with renaming input\n      return [];\n    }\n\n    const result = [] as ContextAction[];\n    if (onCreateFile) {\n      result.push({\n        title: 'New File',\n        description: 'Create new file',\n        action: handleNewFileAction,\n        group: ContextActions.groups.medium,\n      });\n    }\n    if (onCreateFolder) {\n      result.push({\n        title: 'New Folder',\n        description: 'Create new folder',\n        action: handleNewFolderAction,\n        group: ContextActions.groups.medium,\n      });\n    }\n    if (onCopy) {\n      result.push({\n        title: 'Copy',\n        description: 'Copy',\n        action: handleCopyAction,\n        group: ContextActions.groups.low,\n        disabled: focusedItem == null || isDirectory(focusedItem),\n      });\n    }\n    if (onDelete && selectedItems.length > 0) {\n      result.push({\n        title: 'Delete',\n        description: 'Delete',\n        shortcut: SHORTCUTS.FILE_EXPLORER.DELETE,\n        action: handleDeleteAction,\n        group: ContextActions.groups.low,\n      });\n    }\n    if (onRename) {\n      result.push({\n        title: 'Rename',\n        description: 'Rename',\n        shortcut: SHORTCUTS.FILE_EXPLORER.RENAME,\n        action: handleRenameAction,\n        group: ContextActions.groups.low,\n        disabled: focusedItem == null,\n      });\n    }\n    return result;\n  }, [\n    handleCopyAction,\n    handleDeleteAction,\n    handleNewFileAction,\n    handleNewFolderAction,\n    handleRenameAction,\n    focusedItem,\n    onCopy,\n    onCreateFile,\n    onCreateFolder,\n    onDelete,\n    onRename,\n    selectedItems,\n    renameItem,\n  ]);\n\n  const validateRenameItem = useCallback(\n    (newName: string): Promise<void> => {\n      assertNotNull(renameItem);\n      return validateRename(renameItem, newName);\n    },\n    [renameItem, validateRename]\n  );\n\n  const renderItem = useCallback(\n    (itemProps: FileListRenderItemProps): JSX.Element => {\n      const { item } = itemProps;\n      if (renameItem && renameItem.filename === item.filename) {\n        return (\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          <FileListItem {...itemProps}>\n            <FileListItemEditor\n              item={item}\n              validate={validateRenameItem}\n              onSubmit={handleRenameSubmit}\n              onCancel={handleRenameCancel}\n            />\n          </FileListItem>\n        );\n      }\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      return <FileListItem {...itemProps} />;\n    },\n    [handleRenameCancel, handleRenameSubmit, renameItem, validateRenameItem]\n  );\n\n  return (\n    <div className=\"file-list-container\">\n      {table != null && (\n        <FileList\n          onMove={onMove}\n          onSelect={onSelect}\n          onSelectionChange={handleSelectionChange}\n          onFocusChange={handleFocusChange}\n          renderItem={renderItem}\n          rowHeight={rowHeight}\n          table={table}\n          isMultiSelect={isMultiSelect}\n          focusedPath={focusedPath}\n        />\n      )}\n      {showContextMenu && <ContextActions actions={actions} />}\n    </div>\n  );\n}\n\nFileListContainer.displayName = 'FileListContainer';\n\nexport default FileListContainer;\n"],"mappings":"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"}