@deephaven/iris-grid 0.46.1-beta.0 → 0.46.1-beta.4

package/dist/PartitionSelectorSearch.js

@@ -8,6 +8,8 @@ import { ItemList, LoadingSpinner } from '@deephaven/components';
 import Log from '@deephaven/log';
 import { CanceledPromiseError } from '@deephaven/utils';
 import "./PartitionSelectorSearch.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var log = Log.module('PartitionSelectorSearch');
 var DEBOUNCE_UPDATE_FILTER = 150;
 class PartitionSelectorSearch extends Component {
@@ -251,42 +253,47 @@ class PartitionSelectorSearch extends Component {
     var listHeight = Math.min(itemCount, PartitionSelectorSearch.MAX_VISIBLE_ITEMS) * ItemList.DEFAULT_ROW_HEIGHT +
     // Adjust for ListItem vertical padding - .375rem ~ 5.25px
     11;
-    return /*#__PURE__*/React.createElement("div", {
-      className: "iris-grid-partition-selector-search"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "search-container"
-    }, /*#__PURE__*/React.createElement("input", {
-      type: "text",
-      ref: searchInput => {
-        this.searchInput = searchInput;
-      },
-      value: text,
-      placeholder: "Available Partitions",
-      onChange: this.handleTextChange,
-      onFocus: this.handleInputFocus,
-      onKeyDown: this.handleKeyDown,
-      className: "form-control input-partition"
-    })), !isLoading && itemCount > 0 && /*#__PURE__*/React.createElement("div", {
-      className: "iris-grid-partition-selector-search-list",
-      onKeyDown: this.handleListKeydown,
-      role: "presentation",
-      style: {
-        height: listHeight
-      }
-    }, /*#__PURE__*/React.createElement(ItemList, {
-      ref: itemList => {
-        this.itemList = itemList;
-      },
-      itemCount: itemCount,
-      items: items,
-      offset: offset,
-      onSelect: this.handleSelect,
-      onViewportChange: this.handleViewportChange
-    })), !isLoading && itemCount === 0 && /*#__PURE__*/React.createElement("div", {
-      className: "iris-grid-partition-selector-search-empty"
-    }, "No results"), isLoading && /*#__PURE__*/React.createElement("div", {
-      className: "iris-grid-partition-selector-loading"
-    }, /*#__PURE__*/React.createElement(LoadingSpinner, null), "\xA0Loading..."));
+    return /*#__PURE__*/_jsxs("div", {
+      className: "iris-grid-partition-selector-search",
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "search-container",
+        children: /*#__PURE__*/_jsx("input", {
+          type: "text",
+          ref: searchInput => {
+            this.searchInput = searchInput;
+          },
+          value: text,
+          placeholder: "Available Partitions",
+          onChange: this.handleTextChange,
+          onFocus: this.handleInputFocus,
+          onKeyDown: this.handleKeyDown,
+          className: "form-control input-partition"
+        })
+      }), !isLoading && itemCount > 0 && /*#__PURE__*/_jsx("div", {
+        className: "iris-grid-partition-selector-search-list",
+        onKeyDown: this.handleListKeydown,
+        role: "presentation",
+        style: {
+          height: listHeight
+        },
+        children: /*#__PURE__*/_jsx(ItemList, {
+          ref: itemList => {
+            this.itemList = itemList;
+          },
+          itemCount: itemCount,
+          items: items,
+          offset: offset,
+          onSelect: this.handleSelect,
+          onViewportChange: this.handleViewportChange
+        })
+      }), !isLoading && itemCount === 0 && /*#__PURE__*/_jsx("div", {
+        className: "iris-grid-partition-selector-search-empty",
+        children: "No results"
+      }), isLoading && /*#__PURE__*/_jsxs("div", {
+        className: "iris-grid-partition-selector-loading",
+        children: [/*#__PURE__*/_jsx(LoadingSpinner, {}), "\xA0Loading..."]
+      })]
+    });
   }
 }
 _defineProperty(PartitionSelectorSearch, "MAX_VISIBLE_ITEMS", 12);

package/dist/PartitionSelectorSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"PartitionSelectorSearch.js","names":["React","Component","PropTypes","debounce","ItemList","LoadingSpinner","Log","CanceledPromiseError","log","module","DEBOUNCE_UPDATE_FILTER","PartitionSelectorSearch","handleError","error","constructor","props","updateFilter","handleFilterChange","bind","handleInputFocus","handleKeyDown","handleListKeydown","handleSelect","handleTableUpdate","handleTextChange","handleViewportChange","itemList","searchInput","timer","state","offset","itemCount","items","text","isLoading","componentDidMount","startListening","componentDidUpdate","prevProps","prevState","onListResized","componentWillUnmount","debounceUpdateFilter","cancel","stopListening","event","key","selectedValue","length","value","trim","onSelect","stopPropagation","preventDefault","focusItem","focus","debug2","table","size","setState","itemIndex","offsetIndex","data","detail","getFormattedString","column","columns","r","rows","row","get","displayValue","type","name","push","target","topRow","bottomRow","delta","Math","max","top","bottom","setViewport","dh","initialPageSize","addEventListener","Table","EVENT_UPDATED","EVENT_FILTERCHANGED","removeEventListener","filterText","filters","filter","invoke","FilterValue","ofString","applyFilter","render","listHeight","min","MAX_VISIBLE_ITEMS","DEFAULT_ROW_HEIGHT","height","undefined","func","isRequired","shape","arrayOf","string","number"],"sources":["../src/PartitionSelectorSearch.tsx"],"sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport debounce from 'lodash.debounce';\nimport type { dh as DhType, Table } from '@deephaven/jsapi-types';\nimport { ItemList, LoadingSpinner } from '@deephaven/components';\nimport Log from '@deephaven/log';\nimport { CanceledPromiseError } from '@deephaven/utils';\nimport './PartitionSelectorSearch.scss';\nimport { ModelIndex } from '@deephaven/grid';\n\nconst log = Log.module('PartitionSelectorSearch');\nconst DEBOUNCE_UPDATE_FILTER = 150;\n\ninterface Item {\n  value: string;\n  displayValue: string;\n}\n\ninterface PartitionSelectorSearchProps<T> {\n  dh: DhType;\n  getFormattedString: (value: T, type: string, name: string) => string;\n  table: Table;\n  initialPageSize: number;\n  onSelect: (value: string) => void;\n  onListResized: () => void;\n}\ninterface PartitionSelectorSearchState {\n  offset: number;\n  itemCount: number;\n  items: Item[];\n  text: string;\n  isLoading: boolean;\n}\nclass PartitionSelectorSearch<T> extends Component<\n  PartitionSelectorSearchProps<T>,\n  PartitionSelectorSearchState\n> {\n  static MAX_VISIBLE_ITEMS = 12;\n\n  static defaultProps = {\n    initialPageSize: 100,\n    onSelect: (): void => undefined,\n    onListResized: (): void => undefined,\n  };\n\n  static propTypes = {\n    getFormattedString: PropTypes.func.isRequired,\n    table: PropTypes.shape({\n      addEventListener: PropTypes.func.isRequired,\n      removeEventListener: PropTypes.func.isRequired,\n      columns: PropTypes.arrayOf(\n        PropTypes.shape({\n          name: PropTypes.string.isRequired,\n          type: PropTypes.string.isRequired,\n          filter: PropTypes.func.isRequired,\n        })\n      ),\n      size: PropTypes.number.isRequired,\n      applyFilter: PropTypes.func.isRequired,\n      setViewport: PropTypes.func.isRequired,\n    }).isRequired,\n    initialPageSize: PropTypes.number,\n    onSelect: PropTypes.func,\n    onListResized: PropTypes.func,\n  };\n\n  static handleError(error: unknown): void {\n    if (!(error instanceof CanceledPromiseError)) {\n      log.error(error);\n    }\n  }\n\n  constructor(props: PartitionSelectorSearchProps<T>) {\n    super(props);\n\n    this.handleFilterChange = this.handleFilterChange.bind(this);\n    this.handleInputFocus = this.handleInputFocus.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.handleListKeydown = this.handleListKeydown.bind(this);\n    this.handleSelect = this.handleSelect.bind(this);\n    this.handleTableUpdate = this.handleTableUpdate.bind(this);\n    this.handleTextChange = this.handleTextChange.bind(this);\n    this.handleViewportChange = this.handleViewportChange.bind(this);\n\n    this.itemList = null;\n    this.searchInput = null;\n    this.timer = null;\n\n    this.state = {\n      offset: 0,\n      itemCount: 0,\n      items: [],\n      text: '',\n      isLoading: true,\n    };\n  }\n\n  componentDidMount(): void {\n    this.startListening();\n  }\n\n  componentDidUpdate(\n    prevProps: PartitionSelectorSearchProps<T>,\n    prevState: PartitionSelectorSearchState\n  ): void {\n    const { isLoading, itemCount } = this.state;\n    const { onListResized } = this.props;\n    if (\n      itemCount !== prevState.itemCount ||\n      isLoading !== prevState.isLoading\n    ) {\n      onListResized();\n    }\n  }\n\n  componentWillUnmount(): void {\n    this.debounceUpdateFilter.cancel();\n\n    this.stopListening();\n  }\n\n  itemList: ItemList<Item> | null;\n\n  searchInput: HTMLInputElement | null;\n\n  timer: null;\n\n  handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>): boolean {\n    if (this.itemList == null) {\n      return false;\n    }\n\n    const { items, itemCount } = this.state;\n    switch (event.key) {\n      case 'Enter': {\n        let selectedValue = null;\n        if (items.length > 0) {\n          selectedValue = items[0].value;\n        } else {\n          const { text } = this.state;\n          selectedValue = text.trim();\n        }\n\n        if (selectedValue.length > 0) {\n          const { onSelect } = this.props;\n          onSelect(selectedValue);\n        }\n\n        event.stopPropagation();\n        event.preventDefault();\n        return true;\n      }\n      case 'ArrowDown':\n        if (itemCount > 0) {\n          this.itemList.focusItem(1);\n        }\n        event.stopPropagation();\n        event.preventDefault();\n        return true;\n      default:\n        return false;\n    }\n  }\n\n  handleListKeydown(event: React.KeyboardEvent<HTMLDivElement>): void {\n    switch (event.key) {\n      case 'Escape':\n        // Do nothing\n        break;\n      default:\n        this.focus();\n        break;\n    }\n  }\n\n  handleFilterChange(): void {\n    log.debug2('handleFilterChange');\n\n    const { table } = this.props;\n    const itemCount = table.size;\n    this.setState({ itemCount, isLoading: true });\n  }\n\n  handleInputFocus(): void {\n    if (this.itemList) {\n      this.itemList.focusItem(0);\n    }\n  }\n\n  handleSelect(itemIndex: ModelIndex): void {\n    log.debug2('handleSelect', itemIndex);\n\n    const { onSelect } = this.props;\n    const { offset, items } = this.state;\n    const offsetIndex = itemIndex - offset;\n    if (offsetIndex < 0 || items.length <= offsetIndex) {\n      log.error('No data for item', itemIndex);\n      return;\n    }\n\n    const { value } = items[offsetIndex];\n    onSelect(value);\n  }\n\n  handleTableUpdate(event: CustomEvent): void {\n    const data = event.detail;\n    const { offset } = data;\n\n    const items = [] as Item[];\n    const { getFormattedString, table } = this.props;\n    const column = table.columns[0];\n    for (let r = 0; r < data.rows.length; r += 1) {\n      const row = data.rows[r];\n      const value = row.get(column);\n      const displayValue = getFormattedString(value, column.type, column.name);\n      items.push({\n        displayValue,\n        value,\n      });\n    }\n\n    const itemCount = table.size;\n    log.debug2('handleTableUpdate', itemCount, offset, items.length);\n    this.setState({ itemCount, items, offset, isLoading: false });\n  }\n\n  handleTextChange(event: React.ChangeEvent<HTMLInputElement>): void {\n    log.debug2('handleTextChange');\n\n    const { value: text } = event.target;\n\n    this.setState({ text });\n\n    this.debounceUpdateFilter();\n  }\n\n  handleViewportChange(topRow: number, bottomRow: number): void {\n    log.debug2('handleViewportChange', topRow, bottomRow);\n\n    const delta = Math.max(1, bottomRow - topRow);\n    const top = Math.max(0, topRow - delta);\n    const bottom = bottomRow + delta;\n\n    const { table } = this.props;\n    table.setViewport(top, bottom);\n  }\n\n  debounceUpdateFilter = debounce((): void => {\n    this.updateFilter();\n  }, DEBOUNCE_UPDATE_FILTER);\n\n  focus(): void {\n    if (this.searchInput) {\n      this.searchInput.focus();\n    }\n  }\n\n  startListening(): void {\n    const { dh, initialPageSize, table } = this.props;\n    table.addEventListener(dh.Table.EVENT_UPDATED, this.handleTableUpdate);\n    table.addEventListener(\n      dh.Table.EVENT_FILTERCHANGED,\n      this.handleFilterChange\n    );\n    table.setViewport(0, initialPageSize);\n  }\n\n  stopListening(): void {\n    const { dh, table } = this.props;\n    table.removeEventListener(dh.Table.EVENT_UPDATED, this.handleTableUpdate);\n    table.removeEventListener(\n      dh.Table.EVENT_FILTERCHANGED,\n      this.handleFilterChange\n    );\n  }\n\n  updateFilter(): void {\n    const { dh, initialPageSize, table } = this.props;\n    const { text } = this.state;\n    const filterText = text.trim();\n    const filters = [];\n    if (filterText.length > 0) {\n      const column = table.columns[0];\n      const filter = column\n        .filter()\n        .invoke(\n          'matches',\n          dh.FilterValue.ofString(`(?s)(?i).*\\\\Q${filterText}\\\\E.*`)\n        );\n      filters.push(filter);\n    }\n\n    log.debug2('updateFilter', filters);\n\n    table.applyFilter(filters);\n    table.setViewport(0, initialPageSize);\n  }\n\n  render(): JSX.Element {\n    const { isLoading, itemCount, items, offset, text } = this.state;\n    const listHeight =\n      Math.min(itemCount, PartitionSelectorSearch.MAX_VISIBLE_ITEMS) *\n        ItemList.DEFAULT_ROW_HEIGHT +\n      // Adjust for ListItem vertical padding - .375rem ~ 5.25px\n      11;\n    return (\n      <div className=\"iris-grid-partition-selector-search\">\n        <div className=\"search-container\">\n          <input\n            type=\"text\"\n            ref={searchInput => {\n              this.searchInput = searchInput;\n            }}\n            value={text}\n            placeholder=\"Available Partitions\"\n            onChange={this.handleTextChange}\n            onFocus={this.handleInputFocus}\n            onKeyDown={this.handleKeyDown}\n            className=\"form-control input-partition\"\n          />\n        </div>\n        {!isLoading && itemCount > 0 && (\n          <div\n            className=\"iris-grid-partition-selector-search-list\"\n            onKeyDown={this.handleListKeydown}\n            role=\"presentation\"\n            style={{ height: listHeight }}\n          >\n            <ItemList\n              ref={itemList => {\n                this.itemList = itemList;\n              }}\n              itemCount={itemCount}\n              items={items}\n              offset={offset}\n              onSelect={this.handleSelect}\n              onViewportChange={this.handleViewportChange}\n            />\n          </div>\n        )}\n        {!isLoading && itemCount === 0 && (\n          <div className=\"iris-grid-partition-selector-search-empty\">\n            No results\n          </div>\n        )}\n        {isLoading && (\n          <div className=\"iris-grid-partition-selector-loading\">\n            <LoadingSpinner />\n            &nbsp;Loading...\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n\nexport default PartitionSelectorSearch;\n"],"mappings":"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"}
+{"version":3,"file":"PartitionSelectorSearch.js","names":["React","Component","PropTypes","debounce","ItemList","LoadingSpinner","Log","CanceledPromiseError","log","module","DEBOUNCE_UPDATE_FILTER","PartitionSelectorSearch","handleError","error","constructor","props","updateFilter","handleFilterChange","bind","handleInputFocus","handleKeyDown","handleListKeydown","handleSelect","handleTableUpdate","handleTextChange","handleViewportChange","itemList","searchInput","timer","state","offset","itemCount","items","text","isLoading","componentDidMount","startListening","componentDidUpdate","prevProps","prevState","onListResized","componentWillUnmount","debounceUpdateFilter","cancel","stopListening","event","key","selectedValue","length","value","trim","onSelect","stopPropagation","preventDefault","focusItem","focus","debug2","table","size","setState","itemIndex","offsetIndex","data","detail","getFormattedString","column","columns","r","rows","row","get","displayValue","type","name","push","target","topRow","bottomRow","delta","Math","max","top","bottom","setViewport","dh","initialPageSize","addEventListener","Table","EVENT_UPDATED","EVENT_FILTERCHANGED","removeEventListener","filterText","filters","filter","invoke","FilterValue","ofString","applyFilter","render","listHeight","min","MAX_VISIBLE_ITEMS","DEFAULT_ROW_HEIGHT","height","undefined","func","isRequired","shape","arrayOf","string","number"],"sources":["../src/PartitionSelectorSearch.tsx"],"sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport debounce from 'lodash.debounce';\nimport type { dh as DhType, Table } from '@deephaven/jsapi-types';\nimport { ItemList, LoadingSpinner } from '@deephaven/components';\nimport Log from '@deephaven/log';\nimport { CanceledPromiseError } from '@deephaven/utils';\nimport './PartitionSelectorSearch.scss';\nimport { ModelIndex } from '@deephaven/grid';\n\nconst log = Log.module('PartitionSelectorSearch');\nconst DEBOUNCE_UPDATE_FILTER = 150;\n\ninterface Item {\n  value: string;\n  displayValue: string;\n}\n\ninterface PartitionSelectorSearchProps<T> {\n  dh: DhType;\n  getFormattedString: (value: T, type: string, name: string) => string;\n  table: Table;\n  initialPageSize: number;\n  onSelect: (value: string) => void;\n  onListResized: () => void;\n}\ninterface PartitionSelectorSearchState {\n  offset: number;\n  itemCount: number;\n  items: Item[];\n  text: string;\n  isLoading: boolean;\n}\nclass PartitionSelectorSearch<T> extends Component<\n  PartitionSelectorSearchProps<T>,\n  PartitionSelectorSearchState\n> {\n  static MAX_VISIBLE_ITEMS = 12;\n\n  static defaultProps = {\n    initialPageSize: 100,\n    onSelect: (): void => undefined,\n    onListResized: (): void => undefined,\n  };\n\n  static propTypes = {\n    getFormattedString: PropTypes.func.isRequired,\n    table: PropTypes.shape({\n      addEventListener: PropTypes.func.isRequired,\n      removeEventListener: PropTypes.func.isRequired,\n      columns: PropTypes.arrayOf(\n        PropTypes.shape({\n          name: PropTypes.string.isRequired,\n          type: PropTypes.string.isRequired,\n          filter: PropTypes.func.isRequired,\n        })\n      ),\n      size: PropTypes.number.isRequired,\n      applyFilter: PropTypes.func.isRequired,\n      setViewport: PropTypes.func.isRequired,\n    }).isRequired,\n    initialPageSize: PropTypes.number,\n    onSelect: PropTypes.func,\n    onListResized: PropTypes.func,\n  };\n\n  static handleError(error: unknown): void {\n    if (!(error instanceof CanceledPromiseError)) {\n      log.error(error);\n    }\n  }\n\n  constructor(props: PartitionSelectorSearchProps<T>) {\n    super(props);\n\n    this.handleFilterChange = this.handleFilterChange.bind(this);\n    this.handleInputFocus = this.handleInputFocus.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.handleListKeydown = this.handleListKeydown.bind(this);\n    this.handleSelect = this.handleSelect.bind(this);\n    this.handleTableUpdate = this.handleTableUpdate.bind(this);\n    this.handleTextChange = this.handleTextChange.bind(this);\n    this.handleViewportChange = this.handleViewportChange.bind(this);\n\n    this.itemList = null;\n    this.searchInput = null;\n    this.timer = null;\n\n    this.state = {\n      offset: 0,\n      itemCount: 0,\n      items: [],\n      text: '',\n      isLoading: true,\n    };\n  }\n\n  componentDidMount(): void {\n    this.startListening();\n  }\n\n  componentDidUpdate(\n    prevProps: PartitionSelectorSearchProps<T>,\n    prevState: PartitionSelectorSearchState\n  ): void {\n    const { isLoading, itemCount } = this.state;\n    const { onListResized } = this.props;\n    if (\n      itemCount !== prevState.itemCount ||\n      isLoading !== prevState.isLoading\n    ) {\n      onListResized();\n    }\n  }\n\n  componentWillUnmount(): void {\n    this.debounceUpdateFilter.cancel();\n\n    this.stopListening();\n  }\n\n  itemList: ItemList<Item> | null;\n\n  searchInput: HTMLInputElement | null;\n\n  timer: null;\n\n  handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>): boolean {\n    if (this.itemList == null) {\n      return false;\n    }\n\n    const { items, itemCount } = this.state;\n    switch (event.key) {\n      case 'Enter': {\n        let selectedValue = null;\n        if (items.length > 0) {\n          selectedValue = items[0].value;\n        } else {\n          const { text } = this.state;\n          selectedValue = text.trim();\n        }\n\n        if (selectedValue.length > 0) {\n          const { onSelect } = this.props;\n          onSelect(selectedValue);\n        }\n\n        event.stopPropagation();\n        event.preventDefault();\n        return true;\n      }\n      case 'ArrowDown':\n        if (itemCount > 0) {\n          this.itemList.focusItem(1);\n        }\n        event.stopPropagation();\n        event.preventDefault();\n        return true;\n      default:\n        return false;\n    }\n  }\n\n  handleListKeydown(event: React.KeyboardEvent<HTMLDivElement>): void {\n    switch (event.key) {\n      case 'Escape':\n        // Do nothing\n        break;\n      default:\n        this.focus();\n        break;\n    }\n  }\n\n  handleFilterChange(): void {\n    log.debug2('handleFilterChange');\n\n    const { table } = this.props;\n    const itemCount = table.size;\n    this.setState({ itemCount, isLoading: true });\n  }\n\n  handleInputFocus(): void {\n    if (this.itemList) {\n      this.itemList.focusItem(0);\n    }\n  }\n\n  handleSelect(itemIndex: ModelIndex): void {\n    log.debug2('handleSelect', itemIndex);\n\n    const { onSelect } = this.props;\n    const { offset, items } = this.state;\n    const offsetIndex = itemIndex - offset;\n    if (offsetIndex < 0 || items.length <= offsetIndex) {\n      log.error('No data for item', itemIndex);\n      return;\n    }\n\n    const { value } = items[offsetIndex];\n    onSelect(value);\n  }\n\n  handleTableUpdate(event: CustomEvent): void {\n    const data = event.detail;\n    const { offset } = data;\n\n    const items = [] as Item[];\n    const { getFormattedString, table } = this.props;\n    const column = table.columns[0];\n    for (let r = 0; r < data.rows.length; r += 1) {\n      const row = data.rows[r];\n      const value = row.get(column);\n      const displayValue = getFormattedString(value, column.type, column.name);\n      items.push({\n        displayValue,\n        value,\n      });\n    }\n\n    const itemCount = table.size;\n    log.debug2('handleTableUpdate', itemCount, offset, items.length);\n    this.setState({ itemCount, items, offset, isLoading: false });\n  }\n\n  handleTextChange(event: React.ChangeEvent<HTMLInputElement>): void {\n    log.debug2('handleTextChange');\n\n    const { value: text } = event.target;\n\n    this.setState({ text });\n\n    this.debounceUpdateFilter();\n  }\n\n  handleViewportChange(topRow: number, bottomRow: number): void {\n    log.debug2('handleViewportChange', topRow, bottomRow);\n\n    const delta = Math.max(1, bottomRow - topRow);\n    const top = Math.max(0, topRow - delta);\n    const bottom = bottomRow + delta;\n\n    const { table } = this.props;\n    table.setViewport(top, bottom);\n  }\n\n  debounceUpdateFilter = debounce((): void => {\n    this.updateFilter();\n  }, DEBOUNCE_UPDATE_FILTER);\n\n  focus(): void {\n    if (this.searchInput) {\n      this.searchInput.focus();\n    }\n  }\n\n  startListening(): void {\n    const { dh, initialPageSize, table } = this.props;\n    table.addEventListener(dh.Table.EVENT_UPDATED, this.handleTableUpdate);\n    table.addEventListener(\n      dh.Table.EVENT_FILTERCHANGED,\n      this.handleFilterChange\n    );\n    table.setViewport(0, initialPageSize);\n  }\n\n  stopListening(): void {\n    const { dh, table } = this.props;\n    table.removeEventListener(dh.Table.EVENT_UPDATED, this.handleTableUpdate);\n    table.removeEventListener(\n      dh.Table.EVENT_FILTERCHANGED,\n      this.handleFilterChange\n    );\n  }\n\n  updateFilter(): void {\n    const { dh, initialPageSize, table } = this.props;\n    const { text } = this.state;\n    const filterText = text.trim();\n    const filters = [];\n    if (filterText.length > 0) {\n      const column = table.columns[0];\n      const filter = column\n        .filter()\n        .invoke(\n          'matches',\n          dh.FilterValue.ofString(`(?s)(?i).*\\\\Q${filterText}\\\\E.*`)\n        );\n      filters.push(filter);\n    }\n\n    log.debug2('updateFilter', filters);\n\n    table.applyFilter(filters);\n    table.setViewport(0, initialPageSize);\n  }\n\n  render(): JSX.Element {\n    const { isLoading, itemCount, items, offset, text } = this.state;\n    const listHeight =\n      Math.min(itemCount, PartitionSelectorSearch.MAX_VISIBLE_ITEMS) *\n        ItemList.DEFAULT_ROW_HEIGHT +\n      // Adjust for ListItem vertical padding - .375rem ~ 5.25px\n      11;\n    return (\n      <div className=\"iris-grid-partition-selector-search\">\n        <div className=\"search-container\">\n          <input\n            type=\"text\"\n            ref={searchInput => {\n              this.searchInput = searchInput;\n            }}\n            value={text}\n            placeholder=\"Available Partitions\"\n            onChange={this.handleTextChange}\n            onFocus={this.handleInputFocus}\n            onKeyDown={this.handleKeyDown}\n            className=\"form-control input-partition\"\n          />\n        </div>\n        {!isLoading && itemCount > 0 && (\n          <div\n            className=\"iris-grid-partition-selector-search-list\"\n            onKeyDown={this.handleListKeydown}\n            role=\"presentation\"\n            style={{ height: listHeight }}\n          >\n            <ItemList\n              ref={itemList => {\n                this.itemList = itemList;\n              }}\n              itemCount={itemCount}\n              items={items}\n              offset={offset}\n              onSelect={this.handleSelect}\n              onViewportChange={this.handleViewportChange}\n            />\n          </div>\n        )}\n        {!isLoading && itemCount === 0 && (\n          <div className=\"iris-grid-partition-selector-search-empty\">\n            No results\n          </div>\n        )}\n        {isLoading && (\n          <div className=\"iris-grid-partition-selector-loading\">\n            <LoadingSpinner />\n            &nbsp;Loading...\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n\nexport default PartitionSelectorSearch;\n"],"mappings":"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"}

package/dist/PendingDataBottomBar.js

@@ -5,6 +5,8 @@ import { Button, LoadingSpinner } from '@deephaven/components';
 import { usePrevious } from '@deephaven/react-hooks';
 import IrisGridBottomBar from "./IrisGridBottomBar.js";
 import "./PendingDataBottomBar.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var HIDE_TIMEOUT = 3000;
 var MAX_NUMBER_ROWS_SHOWN = 5;
 export function PendingDataBottomBar(_ref) {
@@ -58,11 +60,11 @@ export function PendingDataBottomBar(_ref) {
   var pendingRowCount = pendingDataMap.size;
   var commitIcon;
   if (isSaving) {
-    commitIcon = /*#__PURE__*/React.createElement(LoadingSpinner, null);
+    commitIcon = /*#__PURE__*/_jsx(LoadingSpinner, {});
   } else if (wasSuccessShown) {
     commitIcon = vsPass;
   }
-  return /*#__PURE__*/React.createElement(IrisGridBottomBar, {
+  return /*#__PURE__*/_jsxs(IrisGridBottomBar, {
     className: "pending-data-bottom-bar",
     isShown: pendingRowCount > 0 || isSuccessShown || errorMessage != null,
     onEntering: onEntering,
@@ -73,26 +75,36 @@ export function PendingDataBottomBar(_ref) {
       if (_onExited) {
         _onExited();
       }
-    }
-  }, errorMessage != null && errorMessage !== '' && /*#__PURE__*/React.createElement("div", {
-    className: "error-message"
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: vsWarning
-  }), /*#__PURE__*/React.createElement("span", null, "".concat(errorMessage))), (errorMessage == null || errorMessage === '') && /*#__PURE__*/React.createElement("div", {
-    className: "status-message"
-  }, pendingRowCount > 0 && /*#__PURE__*/React.createElement("span", null, "".concat(pendingRowCount, " row").concat(pendingRowCount > 1 ? 's' : '', " pending"))), /*#__PURE__*/React.createElement("div", {
-    className: "buttons-container"
-  }, !isSaving && !wasSuccessShown && /*#__PURE__*/React.createElement(Button, {
-    kind: "secondary",
-    onClick: onDiscard,
-    tooltip: discardTooltip
-  }, "Discard"), /*#__PURE__*/React.createElement(Button, {
-    kind: wasSuccessShown ? 'success' : 'primary',
-    onClick: onSave,
-    icon: commitIcon,
-    disabled: isSaving || wasSuccessShown || errorMessage != null,
-    tooltip: saveTooltip
-  }, isSaving && "Committing...", !isSaving && wasSuccessShown && "Success", !isSaving && !wasSuccessShown && "Commit")));
+    },
+    children: [errorMessage != null && errorMessage !== '' && /*#__PURE__*/_jsxs("div", {
+      className: "error-message",
+      children: [/*#__PURE__*/_jsx(FontAwesomeIcon, {
+        icon: vsWarning
+      }), /*#__PURE__*/_jsx("span", {
+        children: "".concat(errorMessage)
+      })]
+    }), (errorMessage == null || errorMessage === '') && /*#__PURE__*/_jsx("div", {
+      className: "status-message",
+      children: pendingRowCount > 0 && /*#__PURE__*/_jsx("span", {
+        children: "".concat(pendingRowCount, " row").concat(pendingRowCount > 1 ? 's' : '', " pending")
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "buttons-container",
+      children: [!isSaving && !wasSuccessShown && /*#__PURE__*/_jsx(Button, {
+        kind: "secondary",
+        onClick: onDiscard,
+        tooltip: discardTooltip,
+        children: "Discard"
+      }), /*#__PURE__*/_jsxs(Button, {
+        kind: wasSuccessShown ? 'success' : 'primary',
+        onClick: onSave,
+        icon: commitIcon,
+        disabled: isSaving || wasSuccessShown || errorMessage != null,
+        tooltip: saveTooltip,
+        children: [isSaving && "Committing...", !isSaving && wasSuccessShown && "Success", !isSaving && !wasSuccessShown && "Commit"]
+      })]
+    })]
+  });
 }
 export default PendingDataBottomBar;
 //# sourceMappingURL=PendingDataBottomBar.js.map

package/dist/PendingDataBottomBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"PendingDataBottomBar.js","names":["React","useEffect","useMemo","useRef","useState","FontAwesomeIcon","vsPass","vsWarning","Button","LoadingSpinner","usePrevious","IrisGridBottomBar","HIDE_TIMEOUT","MAX_NUMBER_ROWS_SHOWN","PendingDataBottomBar","isSaving","onSave","onDiscard","discardTooltip","saveTooltip","error","pendingDataErrors","pendingDataMap","onEntering","onEntered","onExiting","onExited","isSuccessShown","setIsSuccessShown","wasSuccessShown","setWasSuccessShown","successTimeout","prevIsSaving","errorMessage","size","Array","from","keys","join","trim","showSuccessMessage","current","setTimeout","hideSuccessMessage","clearTimeout","cleanupTimeout","undefined","pendingRowCount","commitIcon"],"sources":["../src/PendingDataBottomBar.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { vsPass, vsWarning } from '@deephaven/icons';\nimport { Button, LoadingSpinner } from '@deephaven/components';\nimport { usePrevious } from '@deephaven/react-hooks';\nimport IrisGridBottomBar from './IrisGridBottomBar';\nimport './PendingDataBottomBar.scss';\nimport { PendingDataErrorMap, PendingDataMap } from './CommonTypes';\n\nconst HIDE_TIMEOUT = 3000;\n\nconst MAX_NUMBER_ROWS_SHOWN = 5;\n\nexport type PendingDataBottomBarProps = {\n  onSave: () => Promise<void>;\n  onDiscard: () => Promise<void>;\n  discardTooltip?: string;\n  saveTooltip?: string;\n  isSaving?: boolean;\n  error?: string | null;\n  pendingDataErrors: PendingDataErrorMap;\n  pendingDataMap: PendingDataMap;\n  onEntering?: () => void;\n  onEntered?: () => void;\n  onExiting?: () => void;\n  onExited?: () => void;\n};\n\nexport function PendingDataBottomBar({\n  isSaving = false,\n  onSave,\n  onDiscard,\n  discardTooltip,\n  saveTooltip,\n  error,\n  pendingDataErrors,\n  pendingDataMap,\n  onEntering,\n  onEntered,\n  onExiting,\n  onExited,\n}: PendingDataBottomBarProps): JSX.Element {\n  const [isSuccessShown, setIsSuccessShown] = useState(false);\n  const [wasSuccessShown, setWasSuccessShown] = useState(false);\n  const successTimeout = useRef<ReturnType<typeof setTimeout>>();\n  const prevIsSaving = usePrevious(isSaving);\n  const errorMessage = useMemo(() => {\n    if (pendingDataErrors.size === 0) {\n      return error;\n    }\n    if (pendingDataErrors.size <= MAX_NUMBER_ROWS_SHOWN) {\n      return `Key can't be empty (on pending row${\n        pendingDataErrors.size > 1 ? 's' : ''\n      } ${Array.from(pendingDataErrors.keys()).join(', ').trim()})`;\n    }\n    return `Key can't be empty (on ${pendingDataErrors.size} rows)`;\n  }, [error, pendingDataErrors]);\n\n  useEffect(\n    function showSuccessMessage() {\n      if (\n        prevIsSaving != null &&\n        prevIsSaving &&\n        !isSaving &&\n        errorMessage == null\n      ) {\n        setIsSuccessShown(true);\n        setWasSuccessShown(true);\n        successTimeout.current = setTimeout(() => {\n          setIsSuccessShown(false);\n        }, HIDE_TIMEOUT);\n      }\n    },\n    [errorMessage, isSaving, prevIsSaving]\n  );\n\n  useEffect(\n    function hideSuccessMessage() {\n      if (successTimeout.current && pendingDataMap.size > 0) {\n        // A change just occurred while the success message was still being shown, just hide the success message\n        clearTimeout(successTimeout.current);\n        setIsSuccessShown(false);\n        setWasSuccessShown(false);\n      }\n    },\n    [pendingDataMap]\n  );\n\n  useEffect(function cleanupTimeout() {\n    return () =>\n      successTimeout.current ? clearTimeout(successTimeout.current) : undefined;\n  }, []);\n\n  const pendingRowCount = pendingDataMap.size;\n  let commitIcon;\n  if (isSaving) {\n    commitIcon = <LoadingSpinner />;\n  } else if (wasSuccessShown) {\n    commitIcon = vsPass;\n  }\n\n  return (\n    <IrisGridBottomBar\n      className=\"pending-data-bottom-bar\"\n      isShown={pendingRowCount > 0 || isSuccessShown || errorMessage != null}\n      onEntering={onEntering}\n      onEntered={onEntered}\n      onExiting={onExiting}\n      onExited={() => {\n        setWasSuccessShown(false);\n        if (onExited) {\n          onExited();\n        }\n      }}\n    >\n      {errorMessage != null && errorMessage !== '' && (\n        <div className=\"error-message\">\n          <FontAwesomeIcon icon={vsWarning} />\n          <span>{`${errorMessage}`}</span>\n        </div>\n      )}\n      {(errorMessage == null || errorMessage === '') && (\n        <div className=\"status-message\">\n          {pendingRowCount > 0 && (\n            <span>{`${pendingRowCount} row${\n              pendingRowCount > 1 ? 's' : ''\n            } pending`}</span>\n          )}\n        </div>\n      )}\n      <div className=\"buttons-container\">\n        {!isSaving && !wasSuccessShown && (\n          <Button kind=\"secondary\" onClick={onDiscard} tooltip={discardTooltip}>\n            Discard\n          </Button>\n        )}\n        <Button\n          kind={wasSuccessShown ? 'success' : 'primary'}\n          onClick={onSave}\n          icon={commitIcon}\n          disabled={isSaving || wasSuccessShown || errorMessage != null}\n          tooltip={saveTooltip}\n        >\n          {isSaving && `Committing...`}\n          {!isSaving && wasSuccessShown && `Success`}\n          {!isSaving && !wasSuccessShown && `Commit`}\n        </Button>\n      </div>\n    </IrisGridBottomBar>\n  );\n}\n\nexport default PendingDataBottomBar;\n"],"mappings":"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"}
+{"version":3,"file":"PendingDataBottomBar.js","names":["React","useEffect","useMemo","useRef","useState","FontAwesomeIcon","vsPass","vsWarning","Button","LoadingSpinner","usePrevious","IrisGridBottomBar","HIDE_TIMEOUT","MAX_NUMBER_ROWS_SHOWN","PendingDataBottomBar","isSaving","onSave","onDiscard","discardTooltip","saveTooltip","error","pendingDataErrors","pendingDataMap","onEntering","onEntered","onExiting","onExited","isSuccessShown","setIsSuccessShown","wasSuccessShown","setWasSuccessShown","successTimeout","prevIsSaving","errorMessage","size","Array","from","keys","join","trim","showSuccessMessage","current","setTimeout","hideSuccessMessage","clearTimeout","cleanupTimeout","undefined","pendingRowCount","commitIcon"],"sources":["../src/PendingDataBottomBar.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { vsPass, vsWarning } from '@deephaven/icons';\nimport { Button, LoadingSpinner } from '@deephaven/components';\nimport { usePrevious } from '@deephaven/react-hooks';\nimport IrisGridBottomBar from './IrisGridBottomBar';\nimport './PendingDataBottomBar.scss';\nimport { PendingDataErrorMap, PendingDataMap } from './CommonTypes';\n\nconst HIDE_TIMEOUT = 3000;\n\nconst MAX_NUMBER_ROWS_SHOWN = 5;\n\nexport type PendingDataBottomBarProps = {\n  onSave: () => Promise<void>;\n  onDiscard: () => Promise<void>;\n  discardTooltip?: string;\n  saveTooltip?: string;\n  isSaving?: boolean;\n  error?: string | null;\n  pendingDataErrors: PendingDataErrorMap;\n  pendingDataMap: PendingDataMap;\n  onEntering?: () => void;\n  onEntered?: () => void;\n  onExiting?: () => void;\n  onExited?: () => void;\n};\n\nexport function PendingDataBottomBar({\n  isSaving = false,\n  onSave,\n  onDiscard,\n  discardTooltip,\n  saveTooltip,\n  error,\n  pendingDataErrors,\n  pendingDataMap,\n  onEntering,\n  onEntered,\n  onExiting,\n  onExited,\n}: PendingDataBottomBarProps): JSX.Element {\n  const [isSuccessShown, setIsSuccessShown] = useState(false);\n  const [wasSuccessShown, setWasSuccessShown] = useState(false);\n  const successTimeout = useRef<ReturnType<typeof setTimeout>>();\n  const prevIsSaving = usePrevious(isSaving);\n  const errorMessage = useMemo(() => {\n    if (pendingDataErrors.size === 0) {\n      return error;\n    }\n    if (pendingDataErrors.size <= MAX_NUMBER_ROWS_SHOWN) {\n      return `Key can't be empty (on pending row${\n        pendingDataErrors.size > 1 ? 's' : ''\n      } ${Array.from(pendingDataErrors.keys()).join(', ').trim()})`;\n    }\n    return `Key can't be empty (on ${pendingDataErrors.size} rows)`;\n  }, [error, pendingDataErrors]);\n\n  useEffect(\n    function showSuccessMessage() {\n      if (\n        prevIsSaving != null &&\n        prevIsSaving &&\n        !isSaving &&\n        errorMessage == null\n      ) {\n        setIsSuccessShown(true);\n        setWasSuccessShown(true);\n        successTimeout.current = setTimeout(() => {\n          setIsSuccessShown(false);\n        }, HIDE_TIMEOUT);\n      }\n    },\n    [errorMessage, isSaving, prevIsSaving]\n  );\n\n  useEffect(\n    function hideSuccessMessage() {\n      if (successTimeout.current && pendingDataMap.size > 0) {\n        // A change just occurred while the success message was still being shown, just hide the success message\n        clearTimeout(successTimeout.current);\n        setIsSuccessShown(false);\n        setWasSuccessShown(false);\n      }\n    },\n    [pendingDataMap]\n  );\n\n  useEffect(function cleanupTimeout() {\n    return () =>\n      successTimeout.current ? clearTimeout(successTimeout.current) : undefined;\n  }, []);\n\n  const pendingRowCount = pendingDataMap.size;\n  let commitIcon;\n  if (isSaving) {\n    commitIcon = <LoadingSpinner />;\n  } else if (wasSuccessShown) {\n    commitIcon = vsPass;\n  }\n\n  return (\n    <IrisGridBottomBar\n      className=\"pending-data-bottom-bar\"\n      isShown={pendingRowCount > 0 || isSuccessShown || errorMessage != null}\n      onEntering={onEntering}\n      onEntered={onEntered}\n      onExiting={onExiting}\n      onExited={() => {\n        setWasSuccessShown(false);\n        if (onExited) {\n          onExited();\n        }\n      }}\n    >\n      {errorMessage != null && errorMessage !== '' && (\n        <div className=\"error-message\">\n          <FontAwesomeIcon icon={vsWarning} />\n          <span>{`${errorMessage}`}</span>\n        </div>\n      )}\n      {(errorMessage == null || errorMessage === '') && (\n        <div className=\"status-message\">\n          {pendingRowCount > 0 && (\n            <span>{`${pendingRowCount} row${\n              pendingRowCount > 1 ? 's' : ''\n            } pending`}</span>\n          )}\n        </div>\n      )}\n      <div className=\"buttons-container\">\n        {!isSaving && !wasSuccessShown && (\n          <Button kind=\"secondary\" onClick={onDiscard} tooltip={discardTooltip}>\n            Discard\n          </Button>\n        )}\n        <Button\n          kind={wasSuccessShown ? 'success' : 'primary'}\n          onClick={onSave}\n          icon={commitIcon}\n          disabled={isSaving || wasSuccessShown || errorMessage != null}\n          tooltip={saveTooltip}\n        >\n          {isSaving && `Committing...`}\n          {!isSaving && wasSuccessShown && `Success`}\n          {!isSaving && !wasSuccessShown && `Commit`}\n        </Button>\n      </div>\n    </IrisGridBottomBar>\n  );\n}\n\nexport default PendingDataBottomBar;\n"],"mappings":"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"}

package/dist/ToastBottomBar.js

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { usePrevious } from '@deephaven/react-hooks';
 import IrisGridBottomBar from "./IrisGridBottomBar.js";
 import "./PendingDataBottomBar.css";
+import { jsx as _jsx } from "react/jsx-runtime";
 var HIDE_TIMEOUT = 3000;
 export function ToastBottomBar(_ref) {
   var {
@@ -29,14 +30,15 @@ export function ToastBottomBar(_ref) {
     }
   }, [children, prevChildren, setIsShown, startTimer]);
   useEffect(() => () => timeout.current ? clearTimeout(timeout.current) : undefined, []);
-  return /*#__PURE__*/React.createElement(IrisGridBottomBar, {
+  return /*#__PURE__*/_jsx(IrisGridBottomBar, {
     className: "toast-bottom-bar",
     isShown: isShown,
     onEntering: onEntering,
     onEntered: onEntered,
     onExiting: onExiting,
-    onExited: onExited
-  }, children);
+    onExited: onExited,
+    children: children
+  });
 }
 export default ToastBottomBar;
 //# sourceMappingURL=ToastBottomBar.js.map

package/dist/ToastBottomBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastBottomBar.js","names":["React","useCallback","useEffect","useRef","useState","usePrevious","IrisGridBottomBar","HIDE_TIMEOUT","ToastBottomBar","children","onEntering","onEntered","onExiting","onExited","isShown","setIsShown","timeout","prevChildren","startTimer","current","clearTimeout","setTimeout","undefined"],"sources":["../src/ToastBottomBar.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { usePrevious } from '@deephaven/react-hooks';\nimport IrisGridBottomBar from './IrisGridBottomBar';\nimport './PendingDataBottomBar.scss';\n\nconst HIDE_TIMEOUT = 3000;\n\nexport type ToastBottomBarProps = {\n  children?: React.ReactNode;\n  onEntering?: () => void;\n  onEntered?: () => void;\n  onExiting?: () => void;\n  onExited?: () => void;\n};\n\nexport function ToastBottomBar({\n  children = null,\n  onEntering,\n  onEntered,\n  onExiting,\n  onExited,\n}: ToastBottomBarProps): JSX.Element {\n  const [isShown, setIsShown] = useState(false);\n  const timeout = useRef<ReturnType<typeof setTimeout>>();\n  const prevChildren = usePrevious(children);\n\n  const startTimer = useCallback(() => {\n    setIsShown(true);\n    if (timeout.current) {\n      clearTimeout(timeout.current);\n    }\n    timeout.current = setTimeout(() => {\n      setIsShown(false);\n    }, HIDE_TIMEOUT);\n  }, [setIsShown, timeout]);\n\n  useEffect(() => {\n    if (prevChildren !== children && children != null) {\n      startTimer();\n    }\n  }, [children, prevChildren, setIsShown, startTimer]);\n\n  useEffect(\n    () => () => (timeout.current ? clearTimeout(timeout.current) : undefined),\n    []\n  );\n\n  return (\n    <IrisGridBottomBar\n      className=\"toast-bottom-bar\"\n      isShown={isShown}\n      onEntering={onEntering}\n      onEntered={onEntered}\n      onExiting={onExiting}\n      onExited={onExited}\n    >\n      {children}\n    </IrisGridBottomBar>\n  );\n}\n\nexport default ToastBottomBar;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AACvE,SAASC,WAAW,QAAQ,wBAAwB;AAAC,OAC9CC,iBAAiB;AAAA;AAGxB,IAAMC,YAAY,GAAG,IAAI;AAUzB,OAAO,SAASC,cAAc,OAMO;EAAA,IANN;IAC7BC,QAAQ,GAAG,IAAI;IACfC,UAAU;IACVC,SAAS;IACTC,SAAS;IACTC;EACmB,CAAC;EACpB,IAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGX,QAAQ,CAAC,KAAK,CAAC;EAC7C,IAAMY,OAAO,GAAGb,MAAM,EAAiC;EACvD,IAAMc,YAAY,GAAGZ,WAAW,CAACI,QAAQ,CAAC;EAE1C,IAAMS,UAAU,GAAGjB,WAAW,CAAC,MAAM;IACnCc,UAAU,CAAC,IAAI,CAAC;IAChB,IAAIC,OAAO,CAACG,OAAO,EAAE;MACnBC,YAAY,CAACJ,OAAO,CAACG,OAAO,CAAC;IAC/B;IACAH,OAAO,CAACG,OAAO,GAAGE,UAAU,CAAC,MAAM;MACjCN,UAAU,CAAC,KAAK,CAAC;IACnB,CAAC,EAAER,YAAY,CAAC;EAClB,CAAC,EAAE,CAACQ,UAAU,EAAEC,OAAO,CAAC,CAAC;EAEzBd,SAAS,CAAC,MAAM;IACd,IAAIe,YAAY,KAAKR,QAAQ,IAAIA,QAAQ,IAAI,IAAI,EAAE;MACjDS,UAAU,EAAE;IACd;EACF,CAAC,EAAE,CAACT,QAAQ,EAAEQ,YAAY,EAAEF,UAAU,EAAEG,UAAU,CAAC,CAAC;EAEpDhB,SAAS,CACP,MAAM,MAAOc,OAAO,CAACG,OAAO,GAAGC,YAAY,CAACJ,OAAO,CAACG,OAAO,CAAC,GAAGG,SAAU,EACzE,EAAE,CACH;EAED,oBACE,oBAAC,iBAAiB;IAChB,SAAS,EAAC,kBAAkB;IAC5B,OAAO,EAAER,OAAQ;IACjB,UAAU,EAAEJ,UAAW;IACvB,SAAS,EAAEC,SAAU;IACrB,SAAS,EAAEC,SAAU;IACrB,QAAQ,EAAEC;EAAS,GAElBJ,QAAQ,CACS;AAExB;AAEA,eAAeD,cAAc"}
+{"version":3,"file":"ToastBottomBar.js","names":["React","useCallback","useEffect","useRef","useState","usePrevious","IrisGridBottomBar","HIDE_TIMEOUT","ToastBottomBar","children","onEntering","onEntered","onExiting","onExited","isShown","setIsShown","timeout","prevChildren","startTimer","current","clearTimeout","setTimeout","undefined"],"sources":["../src/ToastBottomBar.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { usePrevious } from '@deephaven/react-hooks';\nimport IrisGridBottomBar from './IrisGridBottomBar';\nimport './PendingDataBottomBar.scss';\n\nconst HIDE_TIMEOUT = 3000;\n\nexport type ToastBottomBarProps = {\n  children?: React.ReactNode;\n  onEntering?: () => void;\n  onEntered?: () => void;\n  onExiting?: () => void;\n  onExited?: () => void;\n};\n\nexport function ToastBottomBar({\n  children = null,\n  onEntering,\n  onEntered,\n  onExiting,\n  onExited,\n}: ToastBottomBarProps): JSX.Element {\n  const [isShown, setIsShown] = useState(false);\n  const timeout = useRef<ReturnType<typeof setTimeout>>();\n  const prevChildren = usePrevious(children);\n\n  const startTimer = useCallback(() => {\n    setIsShown(true);\n    if (timeout.current) {\n      clearTimeout(timeout.current);\n    }\n    timeout.current = setTimeout(() => {\n      setIsShown(false);\n    }, HIDE_TIMEOUT);\n  }, [setIsShown, timeout]);\n\n  useEffect(() => {\n    if (prevChildren !== children && children != null) {\n      startTimer();\n    }\n  }, [children, prevChildren, setIsShown, startTimer]);\n\n  useEffect(\n    () => () => (timeout.current ? clearTimeout(timeout.current) : undefined),\n    []\n  );\n\n  return (\n    <IrisGridBottomBar\n      className=\"toast-bottom-bar\"\n      isShown={isShown}\n      onEntering={onEntering}\n      onEntered={onEntered}\n      onExiting={onExiting}\n      onExited={onExited}\n    >\n      {children}\n    </IrisGridBottomBar>\n  );\n}\n\nexport default ToastBottomBar;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AACvE,SAASC,WAAW,QAAQ,wBAAwB;AAAC,OAC9CC,iBAAiB;AAAA;AAAA;AAGxB,IAAMC,YAAY,GAAG,IAAI;AAUzB,OAAO,SAASC,cAAc,OAMO;EAAA,IANN;IAC7BC,QAAQ,GAAG,IAAI;IACfC,UAAU;IACVC,SAAS;IACTC,SAAS;IACTC;EACmB,CAAC;EACpB,IAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGX,QAAQ,CAAC,KAAK,CAAC;EAC7C,IAAMY,OAAO,GAAGb,MAAM,EAAiC;EACvD,IAAMc,YAAY,GAAGZ,WAAW,CAACI,QAAQ,CAAC;EAE1C,IAAMS,UAAU,GAAGjB,WAAW,CAAC,MAAM;IACnCc,UAAU,CAAC,IAAI,CAAC;IAChB,IAAIC,OAAO,CAACG,OAAO,EAAE;MACnBC,YAAY,CAACJ,OAAO,CAACG,OAAO,CAAC;IAC/B;IACAH,OAAO,CAACG,OAAO,GAAGE,UAAU,CAAC,MAAM;MACjCN,UAAU,CAAC,KAAK,CAAC;IACnB,CAAC,EAAER,YAAY,CAAC;EAClB,CAAC,EAAE,CAACQ,UAAU,EAAEC,OAAO,CAAC,CAAC;EAEzBd,SAAS,CAAC,MAAM;IACd,IAAIe,YAAY,KAAKR,QAAQ,IAAIA,QAAQ,IAAI,IAAI,EAAE;MACjDS,UAAU,EAAE;IACd;EACF,CAAC,EAAE,CAACT,QAAQ,EAAEQ,YAAY,EAAEF,UAAU,EAAEG,UAAU,CAAC,CAAC;EAEpDhB,SAAS,CACP,MAAM,MAAOc,OAAO,CAACG,OAAO,GAAGC,YAAY,CAACJ,OAAO,CAACG,OAAO,CAAC,GAAGG,SAAU,EACzE,EAAE,CACH;EAED,oBACE,KAAC,iBAAiB;IAChB,SAAS,EAAC,kBAAkB;IAC5B,OAAO,EAAER,OAAQ;IACjB,UAAU,EAAEJ,UAAW;IACvB,SAAS,EAAEC,SAAU;IACrB,SAAS,EAAEC,SAAU;IACrB,QAAQ,EAAEC,QAAS;IAAA,UAElBJ;EAAQ,EACS;AAExB;AAEA,eAAeD,cAAc"}

package/dist/format-context-menus/CustomFormatAction.js

@@ -5,6 +5,8 @@ import React, { Component } from 'react';
 import { Tooltip } from '@deephaven/components';
 import { DOMUtils } from '@deephaven/utils';
 import "./CustomFormatAction.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Renders menuElement option with custom format input for use in formatting context menus
  *
@@ -86,31 +88,38 @@ class CustomFormatAction extends Component {
       },
       iconElement
     } = forwardedProps;
-    return /*#__PURE__*/React.createElement("div", {
-      className: "form-group flex-grow mb-0"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "custom-format-title"
-    }, /*#__PURE__*/React.createElement("span", {
-      className: "icon"
-    }, iconElement), /*#__PURE__*/React.createElement("label", {
-      className: "title mb-0",
-      htmlFor: "custom-format-input"
-    }, title, description != null && /*#__PURE__*/React.createElement(Tooltip, null, description))), /*#__PURE__*/React.createElement("div", {
-      className: "pl-2 pr-2 pb-2"
-    }, /*#__PURE__*/React.createElement("input", {
-      id: "custom-format-input",
-      className: "form-control text-right mb-0",
-      type: "text",
-      defaultValue: formatString,
-      ref: this.inputRef,
-      placeholder: placeholder,
-      onKeyDown: this.handleKeyDown,
-      onChange: this.handleInputChange,
-      autoComplete: "off",
-      autoCorrect: "off",
-      autoCapitalize: "off",
-      spellCheck: "false"
-    })));
+    return /*#__PURE__*/_jsxs("div", {
+      className: "form-group flex-grow mb-0",
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "custom-format-title",
+        children: [/*#__PURE__*/_jsx("span", {
+          className: "icon",
+          children: iconElement
+        }), /*#__PURE__*/_jsxs("label", {
+          className: "title mb-0",
+          htmlFor: "custom-format-input",
+          children: [title, description != null && /*#__PURE__*/_jsx(Tooltip, {
+            children: description
+          })]
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        className: "pl-2 pr-2 pb-2",
+        children: /*#__PURE__*/_jsx("input", {
+          id: "custom-format-input",
+          className: "form-control text-right mb-0",
+          type: "text",
+          defaultValue: formatString,
+          ref: this.inputRef,
+          placeholder: placeholder,
+          onKeyDown: this.handleKeyDown,
+          onChange: this.handleInputChange,
+          autoComplete: "off",
+          autoCorrect: "off",
+          autoCapitalize: "off",
+          spellCheck: "false"
+        })
+      })]
+    });
   }
 }
 _defineProperty(CustomFormatAction, "defaultProps", {

package/dist/format-context-menus/CustomFormatAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomFormatAction.js","names":["React","Component","Tooltip","DOMUtils","CustomFormatAction","constructor","props","defaultProps","handleInputChange","bind","handleKeyDown","inputRef","createRef","onChange","current","value","closeContextMenu","forwardedProps","closeMenu","revertToDefault","returnFocusToContextMenu","parentContextMenu","getClosestByClassName","HTMLElement","focus","event","key","stopPropagation","render","formatString","placeholder","title","menuItem","description","iconElement","focusInput"],"sources":["../../src/format-context-menus/CustomFormatAction.tsx"],"sourcesContent":["import React, { Component } from 'react';\nimport { Tooltip } from '@deephaven/components';\nimport { DOMUtils } from '@deephaven/utils';\n\nimport './CustomFormatAction.scss';\n\ntype CustomFormatActionProps = typeof CustomFormatAction.defaultProps & {\n  forwardedProps: {\n    menuItem: {\n      title?: string;\n      description?: string;\n    };\n  };\n};\n\n/**\n * Renders menuElement option with custom format input for use in formatting context menus\n *\n * TODO:\n * - capture focus when this menu action is selected via ArrowUp/ArrowDown keys\n * - dynamically update selected menu item when clicking on the input box\n */\nclass CustomFormatAction extends Component<CustomFormatActionProps> {\n  static defaultProps = {\n    formatString: '',\n    forwardedProps: {\n      menuItem: {},\n      closeMenu(focusInput: boolean): void {\n        // no-op\n      },\n      iconElement: null,\n    },\n    placeholder: '',\n    title: '',\n    onChange(value: string | null): void {\n      // no-op\n    },\n  };\n\n  constructor(\n    props: CustomFormatActionProps = CustomFormatAction.defaultProps\n  ) {\n    super(props);\n\n    this.handleInputChange = this.handleInputChange.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n\n    this.inputRef = React.createRef();\n  }\n\n  inputRef: React.RefObject<HTMLInputElement>;\n\n  handleInputChange(): void {\n    const { onChange } = this.props;\n    if (this.inputRef.current) {\n      onChange(this.inputRef.current.value);\n    }\n  }\n\n  closeContextMenu(): void {\n    const { forwardedProps } = this.props;\n    const { closeMenu } = forwardedProps;\n    closeMenu(true);\n  }\n\n  revertToDefault(): void {\n    const { onChange } = this.props;\n    onChange(null);\n  }\n\n  returnFocusToContextMenu(): void {\n    const parentContextMenu = DOMUtils.getClosestByClassName(\n      this.inputRef.current,\n      'context-menu-container'\n    );\n    if (parentContextMenu instanceof HTMLElement) {\n      parentContextMenu.focus();\n    }\n  }\n\n  handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void {\n    switch (event.key) {\n      case 'Enter':\n        event.stopPropagation();\n        this.closeContextMenu();\n        break;\n      case 'Escape':\n        event.stopPropagation();\n        this.revertToDefault();\n        this.closeContextMenu();\n        break;\n      case 'ArrowRight':\n      case 'ArrowLeft':\n        event.stopPropagation();\n        break;\n      case 'ArrowUp':\n      case 'ArrowDown':\n        this.returnFocusToContextMenu();\n        break;\n      default:\n        event.stopPropagation();\n    }\n  }\n\n  render(): JSX.Element {\n    const { formatString, forwardedProps, placeholder, title } = this.props;\n    const {\n      menuItem: { description },\n      iconElement,\n    } = forwardedProps;\n    return (\n      <div className=\"form-group flex-grow mb-0\">\n        <div className=\"custom-format-title\">\n          <span className=\"icon\">{iconElement}</span>\n          <label className=\"title mb-0\" htmlFor=\"custom-format-input\">\n            {title}\n            {description != null && <Tooltip>{description}</Tooltip>}\n          </label>\n        </div>\n        <div className=\"pl-2 pr-2 pb-2\">\n          <input\n            id=\"custom-format-input\"\n            className=\"form-control text-right mb-0\"\n            type=\"text\"\n            defaultValue={formatString}\n            ref={this.inputRef}\n            placeholder={placeholder}\n            onKeyDown={this.handleKeyDown}\n            onChange={this.handleInputChange}\n            autoComplete=\"off\"\n            autoCorrect=\"off\"\n            autoCapitalize=\"off\"\n            spellCheck=\"false\"\n          />\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default CustomFormatAction;\n"],"mappings":"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"}
+{"version":3,"file":"CustomFormatAction.js","names":["React","Component","Tooltip","DOMUtils","CustomFormatAction","constructor","props","defaultProps","handleInputChange","bind","handleKeyDown","inputRef","createRef","onChange","current","value","closeContextMenu","forwardedProps","closeMenu","revertToDefault","returnFocusToContextMenu","parentContextMenu","getClosestByClassName","HTMLElement","focus","event","key","stopPropagation","render","formatString","placeholder","title","menuItem","description","iconElement","focusInput"],"sources":["../../src/format-context-menus/CustomFormatAction.tsx"],"sourcesContent":["import React, { Component } from 'react';\nimport { Tooltip } from '@deephaven/components';\nimport { DOMUtils } from '@deephaven/utils';\n\nimport './CustomFormatAction.scss';\n\ntype CustomFormatActionProps = typeof CustomFormatAction.defaultProps & {\n  forwardedProps: {\n    menuItem: {\n      title?: string;\n      description?: string;\n    };\n  };\n};\n\n/**\n * Renders menuElement option with custom format input for use in formatting context menus\n *\n * TODO:\n * - capture focus when this menu action is selected via ArrowUp/ArrowDown keys\n * - dynamically update selected menu item when clicking on the input box\n */\nclass CustomFormatAction extends Component<CustomFormatActionProps> {\n  static defaultProps = {\n    formatString: '',\n    forwardedProps: {\n      menuItem: {},\n      closeMenu(focusInput: boolean): void {\n        // no-op\n      },\n      iconElement: null,\n    },\n    placeholder: '',\n    title: '',\n    onChange(value: string | null): void {\n      // no-op\n    },\n  };\n\n  constructor(\n    props: CustomFormatActionProps = CustomFormatAction.defaultProps\n  ) {\n    super(props);\n\n    this.handleInputChange = this.handleInputChange.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n\n    this.inputRef = React.createRef();\n  }\n\n  inputRef: React.RefObject<HTMLInputElement>;\n\n  handleInputChange(): void {\n    const { onChange } = this.props;\n    if (this.inputRef.current) {\n      onChange(this.inputRef.current.value);\n    }\n  }\n\n  closeContextMenu(): void {\n    const { forwardedProps } = this.props;\n    const { closeMenu } = forwardedProps;\n    closeMenu(true);\n  }\n\n  revertToDefault(): void {\n    const { onChange } = this.props;\n    onChange(null);\n  }\n\n  returnFocusToContextMenu(): void {\n    const parentContextMenu = DOMUtils.getClosestByClassName(\n      this.inputRef.current,\n      'context-menu-container'\n    );\n    if (parentContextMenu instanceof HTMLElement) {\n      parentContextMenu.focus();\n    }\n  }\n\n  handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void {\n    switch (event.key) {\n      case 'Enter':\n        event.stopPropagation();\n        this.closeContextMenu();\n        break;\n      case 'Escape':\n        event.stopPropagation();\n        this.revertToDefault();\n        this.closeContextMenu();\n        break;\n      case 'ArrowRight':\n      case 'ArrowLeft':\n        event.stopPropagation();\n        break;\n      case 'ArrowUp':\n      case 'ArrowDown':\n        this.returnFocusToContextMenu();\n        break;\n      default:\n        event.stopPropagation();\n    }\n  }\n\n  render(): JSX.Element {\n    const { formatString, forwardedProps, placeholder, title } = this.props;\n    const {\n      menuItem: { description },\n      iconElement,\n    } = forwardedProps;\n    return (\n      <div className=\"form-group flex-grow mb-0\">\n        <div className=\"custom-format-title\">\n          <span className=\"icon\">{iconElement}</span>\n          <label className=\"title mb-0\" htmlFor=\"custom-format-input\">\n            {title}\n            {description != null && <Tooltip>{description}</Tooltip>}\n          </label>\n        </div>\n        <div className=\"pl-2 pr-2 pb-2\">\n          <input\n            id=\"custom-format-input\"\n            className=\"form-control text-right mb-0\"\n            type=\"text\"\n            defaultValue={formatString}\n            ref={this.inputRef}\n            placeholder={placeholder}\n            onKeyDown={this.handleKeyDown}\n            onChange={this.handleInputChange}\n            autoComplete=\"off\"\n            autoCorrect=\"off\"\n            autoCapitalize=\"off\"\n            spellCheck=\"false\"\n          />\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default CustomFormatAction;\n"],"mappings":"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"}

package/dist/format-context-menus/FormatContextMenuUtils.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { TableColumnFormatter } from '@deephaven/jsapi-utils';
 import CustomFormatAction from "./CustomFormatAction.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 class FormatContextMenuUtils {
   /**
    * Returns true if default option should be active in the context menu
@@ -50,7 +51,7 @@ class FormatContextMenuUtils {
       format,
       group,
       isSelected,
-      menuElement: /*#__PURE__*/React.createElement(CustomFormatAction, {
+      menuElement: /*#__PURE__*/_jsx(CustomFormatAction, {
         formatString: format.formatString,
         title: format.label,
         placeholder: placeholder,

package/dist/format-context-menus/FormatContextMenuUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormatContextMenuUtils.js","names":["React","TableColumnFormatter","CustomFormatAction","FormatContextMenuUtils","isDefaultSelected","selectedFormat","TYPE_CONTEXT_CUSTOM","TYPE_CONTEXT_PRESET","includes","type","isCustomSelected","makeOption","title","format","group","isSelected","description","makeCustomFormatOption","placeholder","onChange","label","menuElement","formatString"],"sources":["../../src/format-context-menus/FormatContextMenuUtils.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  TableColumnFormat,\n  TableColumnFormatter,\n} from '@deephaven/jsapi-utils';\nimport CustomFormatAction from './CustomFormatAction';\n\nexport interface FormatContextMenuOption {\n  title: string;\n  description: string;\n  group: number;\n  format: TableColumnFormat | null;\n  isSelected: boolean;\n}\n\nexport interface CustomFormatOption extends FormatContextMenuOption {\n  menuElement: React.ReactElement;\n}\n\nclass FormatContextMenuUtils {\n  /**\n   * Returns true if default option should be active in the context menu\n   * @param selectedFormat selected format object or null\n   */\n  static isDefaultSelected(selectedFormat: TableColumnFormat | null): boolean {\n    return (\n      !selectedFormat ||\n      ![\n        TableColumnFormatter.TYPE_CONTEXT_CUSTOM,\n        TableColumnFormatter.TYPE_CONTEXT_PRESET,\n      ].includes(selectedFormat.type)\n    );\n  }\n\n  /**\n   * Returns true if custom format option should be active in the context menu\n   * @param selectedFormat selected format object or null\n   */\n  static isCustomSelected(selectedFormat: TableColumnFormat): boolean {\n    return (\n      selectedFormat != null &&\n      selectedFormat.type === TableColumnFormatter.TYPE_CONTEXT_CUSTOM\n    );\n  }\n\n  /**\n   * Creates context menu option\n   * @param title Context menu title\n   * @param format Format object\n   * @param group Context menu group\n   * @param isSelected Is current option selected\n   */\n  static makeOption(\n    title: string,\n    format: TableColumnFormat | null,\n    group: number,\n    isSelected: boolean\n  ): FormatContextMenuOption {\n    return {\n      title,\n      description: title,\n      group,\n      format,\n      isSelected,\n    };\n  }\n\n  /**\n   * Creates context menu option with an input element\n   * @param format Format object\n   * @param group Context menu group\n   * @param placeholder Input element placeholder\n   * @param isSelected Is current option selected\n   * @param onChange Input element onChange callback\n   */\n  static makeCustomFormatOption(\n    format: TableColumnFormat,\n    group: number,\n    placeholder: string,\n    isSelected: boolean,\n    onChange: (value: string | null) => void\n  ): CustomFormatOption {\n    return {\n      title: format.label,\n      description: format.label,\n      format,\n      group,\n      isSelected,\n      menuElement: (\n        <CustomFormatAction\n          formatString={format.formatString}\n          title={format.label}\n          placeholder={placeholder}\n          onChange={onChange}\n        />\n      ),\n    };\n  }\n}\n\nexport default FormatContextMenuUtils;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAEEC,oBAAoB,QACf,wBAAwB;AAAC,OACzBC,kBAAkB;AAczB,MAAMC,sBAAsB,CAAC;EAC3B;AACF;AACA;AACA;EACE,OAAOC,iBAAiB,CAACC,cAAwC,EAAW;IAC1E,OACE,CAACA,cAAc,IACf,CAAC,CACCJ,oBAAoB,CAACK,mBAAmB,EACxCL,oBAAoB,CAACM,mBAAmB,CACzC,CAACC,QAAQ,CAACH,cAAc,CAACI,IAAI,CAAC;EAEnC;;EAEA;AACF;AACA;AACA;EACE,OAAOC,gBAAgB,CAACL,cAAiC,EAAW;IAClE,OACEA,cAAc,IAAI,IAAI,IACtBA,cAAc,CAACI,IAAI,KAAKR,oBAAoB,CAACK,mBAAmB;EAEpE;;EAEA;AACF;AACA;AACA;AACA;AACA;AACA;EACE,OAAOK,UAAU,CACfC,KAAa,EACbC,MAAgC,EAChCC,KAAa,EACbC,UAAmB,EACM;IACzB,OAAO;MACLH,KAAK;MACLI,WAAW,EAAEJ,KAAK;MAClBE,KAAK;MACLD,MAAM;MACNE;IACF,CAAC;EACH;;EAEA;AACF;AACA;AACA;AACA;AACA;AACA;AACA;EACE,OAAOE,sBAAsB,CAC3BJ,MAAyB,EACzBC,KAAa,EACbI,WAAmB,EACnBH,UAAmB,EACnBI,QAAwC,EACpB;IACpB,OAAO;MACLP,KAAK,EAAEC,MAAM,CAACO,KAAK;MACnBJ,WAAW,EAAEH,MAAM,CAACO,KAAK;MACzBP,MAAM;MACNC,KAAK;MACLC,UAAU;MACVM,WAAW,eACT,oBAAC,kBAAkB;QACjB,YAAY,EAAER,MAAM,CAACS,YAAa;QAClC,KAAK,EAAET,MAAM,CAACO,KAAM;QACpB,WAAW,EAAEF,WAAY;QACzB,QAAQ,EAAEC;MAAS;IAGzB,CAAC;EACH;AACF;AAEA,eAAehB,sBAAsB"}
+{"version":3,"file":"FormatContextMenuUtils.js","names":["React","TableColumnFormatter","CustomFormatAction","FormatContextMenuUtils","isDefaultSelected","selectedFormat","TYPE_CONTEXT_CUSTOM","TYPE_CONTEXT_PRESET","includes","type","isCustomSelected","makeOption","title","format","group","isSelected","description","makeCustomFormatOption","placeholder","onChange","label","menuElement","formatString"],"sources":["../../src/format-context-menus/FormatContextMenuUtils.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  TableColumnFormat,\n  TableColumnFormatter,\n} from '@deephaven/jsapi-utils';\nimport CustomFormatAction from './CustomFormatAction';\n\nexport interface FormatContextMenuOption {\n  title: string;\n  description: string;\n  group: number;\n  format: TableColumnFormat | null;\n  isSelected: boolean;\n}\n\nexport interface CustomFormatOption extends FormatContextMenuOption {\n  menuElement: React.ReactElement;\n}\n\nclass FormatContextMenuUtils {\n  /**\n   * Returns true if default option should be active in the context menu\n   * @param selectedFormat selected format object or null\n   */\n  static isDefaultSelected(selectedFormat: TableColumnFormat | null): boolean {\n    return (\n      !selectedFormat ||\n      ![\n        TableColumnFormatter.TYPE_CONTEXT_CUSTOM,\n        TableColumnFormatter.TYPE_CONTEXT_PRESET,\n      ].includes(selectedFormat.type)\n    );\n  }\n\n  /**\n   * Returns true if custom format option should be active in the context menu\n   * @param selectedFormat selected format object or null\n   */\n  static isCustomSelected(selectedFormat: TableColumnFormat): boolean {\n    return (\n      selectedFormat != null &&\n      selectedFormat.type === TableColumnFormatter.TYPE_CONTEXT_CUSTOM\n    );\n  }\n\n  /**\n   * Creates context menu option\n   * @param title Context menu title\n   * @param format Format object\n   * @param group Context menu group\n   * @param isSelected Is current option selected\n   */\n  static makeOption(\n    title: string,\n    format: TableColumnFormat | null,\n    group: number,\n    isSelected: boolean\n  ): FormatContextMenuOption {\n    return {\n      title,\n      description: title,\n      group,\n      format,\n      isSelected,\n    };\n  }\n\n  /**\n   * Creates context menu option with an input element\n   * @param format Format object\n   * @param group Context menu group\n   * @param placeholder Input element placeholder\n   * @param isSelected Is current option selected\n   * @param onChange Input element onChange callback\n   */\n  static makeCustomFormatOption(\n    format: TableColumnFormat,\n    group: number,\n    placeholder: string,\n    isSelected: boolean,\n    onChange: (value: string | null) => void\n  ): CustomFormatOption {\n    return {\n      title: format.label,\n      description: format.label,\n      format,\n      group,\n      isSelected,\n      menuElement: (\n        <CustomFormatAction\n          formatString={format.formatString}\n          title={format.label}\n          placeholder={placeholder}\n          onChange={onChange}\n        />\n      ),\n    };\n  }\n}\n\nexport default FormatContextMenuUtils;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAEEC,oBAAoB,QACf,wBAAwB;AAAC,OACzBC,kBAAkB;AAAA;AAczB,MAAMC,sBAAsB,CAAC;EAC3B;AACF;AACA;AACA;EACE,OAAOC,iBAAiB,CAACC,cAAwC,EAAW;IAC1E,OACE,CAACA,cAAc,IACf,CAAC,CACCJ,oBAAoB,CAACK,mBAAmB,EACxCL,oBAAoB,CAACM,mBAAmB,CACzC,CAACC,QAAQ,CAACH,cAAc,CAACI,IAAI,CAAC;EAEnC;;EAEA;AACF;AACA;AACA;EACE,OAAOC,gBAAgB,CAACL,cAAiC,EAAW;IAClE,OACEA,cAAc,IAAI,IAAI,IACtBA,cAAc,CAACI,IAAI,KAAKR,oBAAoB,CAACK,mBAAmB;EAEpE;;EAEA;AACF;AACA;AACA;AACA;AACA;AACA;EACE,OAAOK,UAAU,CACfC,KAAa,EACbC,MAAgC,EAChCC,KAAa,EACbC,UAAmB,EACM;IACzB,OAAO;MACLH,KAAK;MACLI,WAAW,EAAEJ,KAAK;MAClBE,KAAK;MACLD,MAAM;MACNE;IACF,CAAC;EACH;;EAEA;AACF;AACA;AACA;AACA;AACA;AACA;AACA;EACE,OAAOE,sBAAsB,CAC3BJ,MAAyB,EACzBC,KAAa,EACbI,WAAmB,EACnBH,UAAmB,EACnBI,QAAwC,EACpB;IACpB,OAAO;MACLP,KAAK,EAAEC,MAAM,CAACO,KAAK;MACnBJ,WAAW,EAAEH,MAAM,CAACO,KAAK;MACzBP,MAAM;MACNC,KAAK;MACLC,UAAU;MACVM,WAAW,eACT,KAAC,kBAAkB;QACjB,YAAY,EAAER,MAAM,CAACS,YAAa;QAClC,KAAK,EAAET,MAAM,CAACO,KAAM;QACpB,WAAW,EAAEF,WAAY;QACzB,QAAQ,EAAEC;MAAS;IAGzB,CAAC;EACH;AACF;AAEA,eAAehB,sBAAsB"}