@deephaven/iris-grid 0.31.2-beta.3 → 0.31.2-beta.8

package/dist/sidebar/visibility-ordering-builder/VisibilityOrderingGroup.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState, useCallback } from 'react';
 import classNames from 'classnames';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Button, ThemeExport } from '@deephaven/components';
@@ -19,11 +19,15 @@ export default function VisibilityOrderingGroup(props) {
   var groupRef = useRef(group);
   var nameInputRef = useRef(null);
   var colorInputRef = useRef(null);
+  var [isColorInputOpen, setIsColorInputOpen] = useState(false);
   var [name, setName] = useState(isNew ? '' : group.name);
   var [isEditing, setIsEditing] = useState(isNew);
-  var [hasTyped, setHasTyped] = useState(false);
+  var [shouldValidate, setShouldValidate] = useState(false);
   var nameValidationError = name !== group.name ? validateName(name) : '';
-  var isValid = isNew && !hasTyped || nameValidationError === '';
+  var isValid = isNew && !shouldValidate || nameValidationError === '';
+  var colorInputBlurHandler = useCallback(() => {
+    setIsColorInputOpen(false);
+  }, []);
   useEffect(function focusEditInput() {
     if (isEditing && nameInputRef.current) {
       // This is solely b/c RTL doesn't count select as focusing the element
@@ -40,6 +44,30 @@ export default function VisibilityOrderingGroup(props) {
       }
     };
   }, [onDelete]);
+  useEffect(function openColorInput() {
+    if (isColorInputOpen) {
+      var _colorInputRef$curren, _colorInputRef$curren2;
+      (_colorInputRef$curren = colorInputRef.current) === null || _colorInputRef$curren === void 0 ? void 0 : _colorInputRef$curren.click();
+      // Mostly for testing. Chrome seems to not give the hidden input focus
+      // Really would only affect screen readers
+      (_colorInputRef$curren2 = colorInputRef.current) === null || _colorInputRef$curren2 === void 0 ? void 0 : _colorInputRef$curren2.focus();
+
+      /**
+       * Adding this event handler is for Firefox on Mac
+       * There seems to be buggy behavior when multiple color inputs are on the same page
+       * Clicking between the inputs without closing the previous causes a bad state
+       * The user gets to a point where they can't open most of the pickers
+       * https://bugzilla.mozilla.org/show_bug.cgi?id=1618418
+       * https://bugzilla.mozilla.org/show_bug.cgi?id=975468
+       * Instead, we remove the color input when any focus is returned to the window
+       * This causes Firefox on Mac to mostly operate correctly
+       * Firefox seems to ignore the first click back into the window and emit no event
+       * So opening a color picker when another is open requires 2 clicks in Firefox
+       */
+      window.addEventListener('click', colorInputBlurHandler, true);
+    }
+    return () => window.removeEventListener('click', colorInputBlurHandler, true);
+  }, [isColorInputOpen, colorInputBlurHandler]);
   var handleConfirm = () => {
     if (isValid) {
       onNameChange(group, name);
@@ -55,7 +83,7 @@ export default function VisibilityOrderingGroup(props) {
     setIsEditing(false);
   };
   var handleEditKeyDown = e => {
-    setHasTyped(true);
+    setShouldValidate(true);
     if (e.key === 'Enter') {
       e.stopPropagation();
       handleConfirm();
@@ -78,7 +106,8 @@ export default function VisibilityOrderingGroup(props) {
       value: name,
       placeholder: "Group Name",
       onChange: e => setName(e.target.value),
-      onKeyDown: handleEditKeyDown
+      onKeyDown: handleEditKeyDown,
+      onBlur: () => setShouldValidate(true)
     }), /*#__PURE__*/React.createElement(Button, {
       kind: "ghost",
       icon: vsCheck,
@@ -128,15 +157,14 @@ export default function VisibilityOrderingGroup(props) {
       color: group.color,
       transform: "shrink-2 down-1"
     })) : vsPaintcan,
-    tooltip: "Set color",
-    onClick: () => {
-      var _colorInputRef$curren, _colorInputRef$curren2;
-      (_colorInputRef$curren = colorInputRef.current) === null || _colorInputRef$curren === void 0 ? void 0 : _colorInputRef$curren.click();
-      // Mostly for testing. Chrome seems to not give the hidden input focus
-      // Really would only affect screen readers
-      (_colorInputRef$curren2 = colorInputRef.current) === null || _colorInputRef$curren2 === void 0 ? void 0 : _colorInputRef$curren2.focus();
-    }
-  }), /*#__PURE__*/React.createElement("input", {
+    tooltip: "Set color"
+    /**
+     * Toggle to close the picker on Chrome
+     * Prevents Firefox on Mac from getting into a stuck state
+     * Does not close on Firefox b/c the picker stays open when the element is removed
+     */,
+    onClick: () => setIsColorInputOpen(val => !val)
+  }), isColorInputOpen && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
     "aria-label": "Color input",
     ref: colorInputRef,
     type: "color",
@@ -155,6 +183,6 @@ export default function VisibilityOrderingGroup(props) {
     }
   }), /*#__PURE__*/React.createElement("datalist", {
     id: "presetColors"
-  }, /*#__PURE__*/React.createElement("option", null, ThemeExport['content-bg']), /*#__PURE__*/React.createElement("option", null, ThemeExport.primary), /*#__PURE__*/React.createElement("option", null, ThemeExport.foreground), /*#__PURE__*/React.createElement("option", null, ThemeExport.green), /*#__PURE__*/React.createElement("option", null, ThemeExport.yellow), /*#__PURE__*/React.createElement("option", null, ThemeExport.orange), /*#__PURE__*/React.createElement("option", null, ThemeExport.red), /*#__PURE__*/React.createElement("option", null, ThemeExport.purple), /*#__PURE__*/React.createElement("option", null, ThemeExport.blue), /*#__PURE__*/React.createElement("option", null, ThemeExport['gray-400']))));
+  }, /*#__PURE__*/React.createElement("option", null, ThemeExport['content-bg']), /*#__PURE__*/React.createElement("option", null, ThemeExport.primary), /*#__PURE__*/React.createElement("option", null, ThemeExport.foreground), /*#__PURE__*/React.createElement("option", null, ThemeExport.green), /*#__PURE__*/React.createElement("option", null, ThemeExport.yellow), /*#__PURE__*/React.createElement("option", null, ThemeExport.orange), /*#__PURE__*/React.createElement("option", null, ThemeExport.red), /*#__PURE__*/React.createElement("option", null, ThemeExport.purple), /*#__PURE__*/React.createElement("option", null, ThemeExport.blue), /*#__PURE__*/React.createElement("option", null, ThemeExport['gray-400'])))));
 }
 //# sourceMappingURL=VisibilityOrderingGroup.js.map

package/dist/sidebar/visibility-ordering-builder/VisibilityOrderingGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"VisibilityOrderingGroup.js","names":["React","useEffect","useRef","useState","classNames","FontAwesomeIcon","Button","ThemeExport","dhSquareFilled","vsCheck","vsChromeClose","vsEdit","vsPaintcan","vsTrash","VisibilityOrderingGroup","props","group","onDelete","onColorChange","onNameChange","validateName","isNew","groupRef","nameInputRef","colorInputRef","name","setName","isEditing","setIsEditing","hasTyped","setHasTyped","nameValidationError","isValid","focusEditInput","current","focus","select","deleteNewOnUnmount","handleConfirm","handleCancel","handleEditKeyDown","e","key","stopPropagation","target","value","color","undefined","white","click","visibility","width","height","padding","border","primary","foreground","green","yellow","orange","red","purple","blue"],"sources":["../../../src/sidebar/visibility-ordering-builder/VisibilityOrderingGroup.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { Button, ThemeExport } from '@deephaven/components';\nimport {\n  dhSquareFilled,\n  vsCheck,\n  vsChromeClose,\n  vsEdit,\n  vsPaintcan,\n  vsTrash,\n} from '@deephaven/icons';\nimport type ColumnHeaderGroup from '../../ColumnHeaderGroup';\nimport './VisibilityOrderingGroup.scss';\n\ninterface VisibilityOrderingGroupProps {\n  group: ColumnHeaderGroup;\n  onDelete(group: ColumnHeaderGroup): void;\n  onColorChange(group: ColumnHeaderGroup, color: string | undefined): void;\n  onNameChange(group: ColumnHeaderGroup, name: string): void;\n  validateName(name: string): string;\n}\n\nexport default function VisibilityOrderingGroup(\n  props: VisibilityOrderingGroupProps\n): JSX.Element {\n  const { group, onDelete, onColorChange, onNameChange, validateName } = props;\n  const { isNew } = group;\n  const groupRef = useRef(group);\n  const nameInputRef = useRef<HTMLInputElement>(null);\n  const colorInputRef = useRef<HTMLInputElement>(null);\n  const [name, setName] = useState(isNew ? '' : group.name);\n  const [isEditing, setIsEditing] = useState(isNew);\n  const [hasTyped, setHasTyped] = useState(false);\n  const nameValidationError = name !== group.name ? validateName(name) : '';\n  const isValid = (isNew && !hasTyped) || nameValidationError === '';\n\n  useEffect(\n    function focusEditInput() {\n      if (isEditing && nameInputRef.current) {\n        // This is solely b/c RTL doesn't count select as focusing the element\n        // Might be fixed in v13+ of RTL\n        nameInputRef.current.focus();\n        nameInputRef.current.select();\n      }\n    },\n    [isEditing]\n  );\n\n  useEffect(\n    function deleteNewOnUnmount() {\n      return () => {\n        if (groupRef.current.isNew) {\n          // eslint-disable-next-line react-hooks/exhaustive-deps\n          onDelete(groupRef.current);\n        }\n      };\n    },\n    [onDelete]\n  );\n\n  const handleConfirm = () => {\n    if (isValid) {\n      onNameChange(group, name);\n      setIsEditing(false);\n    }\n  };\n\n  const handleCancel = () => {\n    if (isNew) {\n      onDelete(group);\n      return;\n    }\n    setName(group.name);\n    setIsEditing(false);\n  };\n\n  const handleEditKeyDown = (e: React.KeyboardEvent): void => {\n    setHasTyped(true);\n    if (e.key === 'Enter') {\n      e.stopPropagation();\n      handleConfirm();\n    }\n\n    if (e.key === ' ') {\n      e.stopPropagation();\n    }\n\n    if (e.key === 'Escape') {\n      handleCancel();\n    }\n  };\n\n  if (isEditing) {\n    return (\n      <>\n        <div className=\"editing-container\">\n          <input\n            ref={nameInputRef}\n            className={classNames('form-control', {\n              'is-invalid': !isValid,\n            })}\n            value={name}\n            placeholder=\"Group Name\"\n            onChange={e => setName(e.target.value)}\n            onKeyDown={handleEditKeyDown}\n          />\n          <Button\n            kind=\"ghost\"\n            icon={vsCheck}\n            tooltip=\"Confirm\"\n            onClick={handleConfirm}\n          />\n          <Button\n            kind=\"ghost\"\n            icon={vsChromeClose}\n            tooltip=\"Cancel\"\n            onClick={handleCancel}\n          />\n        </div>\n        {!isValid && (\n          <p className=\"mb-0 validate-label-error text-danger\">\n            {nameValidationError}\n          </p>\n        )}\n      </>\n    );\n  }\n\n  return (\n    <div className=\"group-name-wrapper\">\n      <span className=\"column-name\">{name}</span>\n      <Button\n        className=\"p-1 mx-1\"\n        kind=\"ghost\"\n        icon={vsEdit}\n        tooltip=\"Edit\"\n        onClick={() => {\n          setIsEditing(true);\n        }}\n      />\n\n      <span className=\"right-buttons\">\n        <Button\n          kind=\"ghost\"\n          icon={vsTrash}\n          tooltip=\"Delete group\"\n          onClick={() => onDelete(group)}\n        />\n        <Button\n          kind=\"ghost\"\n          className=\"color-swatch mr-1\"\n          icon={\n            group.color !== undefined ? (\n              <span className=\"fa-layers\">\n                <FontAwesomeIcon\n                  className=\"color-swatch\"\n                  icon={dhSquareFilled}\n                  color={ThemeExport.white}\n                  transform=\"down-1\"\n                />\n                <FontAwesomeIcon\n                  className=\"color-swatch\"\n                  icon={dhSquareFilled}\n                  color={group.color}\n                  transform=\"shrink-2 down-1\"\n                />\n              </span>\n            ) : (\n              vsPaintcan\n            )\n          }\n          tooltip=\"Set color\"\n          onClick={() => {\n            colorInputRef.current?.click();\n            // Mostly for testing. Chrome seems to not give the hidden input focus\n            // Really would only affect screen readers\n            colorInputRef.current?.focus();\n          }}\n        />\n        <input\n          aria-label=\"Color input\"\n          ref={colorInputRef}\n          type=\"color\"\n          list=\"presetColors\"\n          value={group.color ?? ThemeExport['content-bg']}\n          style={{\n            visibility: 'hidden',\n            width: 0,\n            height: 0,\n            padding: 0,\n            border: 0,\n          }}\n          onChange={e => {\n            group.color = e.target.value;\n            onColorChange(group, e.target.value);\n          }}\n        />\n        <datalist id=\"presetColors\">\n          <option>{ThemeExport['content-bg']}</option>\n          <option>{ThemeExport.primary}</option>\n          <option>{ThemeExport.foreground}</option>\n          <option>{ThemeExport.green}</option>\n          <option>{ThemeExport.yellow}</option>\n          <option>{ThemeExport.orange}</option>\n          <option>{ThemeExport.red}</option>\n          <option>{ThemeExport.purple}</option>\n          <option>{ThemeExport.blue}</option>\n          <option>{ThemeExport['gray-400']}</option>\n        </datalist>\n      </span>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"VisibilityOrderingGroup.js","names":["React","useEffect","useRef","useState","useCallback","classNames","FontAwesomeIcon","Button","ThemeExport","dhSquareFilled","vsCheck","vsChromeClose","vsEdit","vsPaintcan","vsTrash","VisibilityOrderingGroup","props","group","onDelete","onColorChange","onNameChange","validateName","isNew","groupRef","nameInputRef","colorInputRef","isColorInputOpen","setIsColorInputOpen","name","setName","isEditing","setIsEditing","shouldValidate","setShouldValidate","nameValidationError","isValid","colorInputBlurHandler","focusEditInput","current","focus","select","deleteNewOnUnmount","openColorInput","click","window","addEventListener","removeEventListener","handleConfirm","handleCancel","handleEditKeyDown","e","key","stopPropagation","target","value","color","undefined","white","val","visibility","width","height","padding","border","primary","foreground","green","yellow","orange","red","purple","blue"],"sources":["../../../src/sidebar/visibility-ordering-builder/VisibilityOrderingGroup.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState, useCallback } from 'react';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { Button, ThemeExport } from '@deephaven/components';\nimport {\n  dhSquareFilled,\n  vsCheck,\n  vsChromeClose,\n  vsEdit,\n  vsPaintcan,\n  vsTrash,\n} from '@deephaven/icons';\nimport type ColumnHeaderGroup from '../../ColumnHeaderGroup';\nimport './VisibilityOrderingGroup.scss';\n\ninterface VisibilityOrderingGroupProps {\n  group: ColumnHeaderGroup;\n  onDelete(group: ColumnHeaderGroup): void;\n  onColorChange(group: ColumnHeaderGroup, color: string | undefined): void;\n  onNameChange(group: ColumnHeaderGroup, name: string): void;\n  validateName(name: string): string;\n}\n\nexport default function VisibilityOrderingGroup(\n  props: VisibilityOrderingGroupProps\n): JSX.Element {\n  const { group, onDelete, onColorChange, onNameChange, validateName } = props;\n  const { isNew } = group;\n  const groupRef = useRef(group);\n  const nameInputRef = useRef<HTMLInputElement>(null);\n  const colorInputRef = useRef<HTMLInputElement>(null);\n  const [isColorInputOpen, setIsColorInputOpen] = useState(false);\n  const [name, setName] = useState(isNew ? '' : group.name);\n  const [isEditing, setIsEditing] = useState(isNew);\n  const [shouldValidate, setShouldValidate] = useState(false);\n  const nameValidationError = name !== group.name ? validateName(name) : '';\n  const isValid = (isNew && !shouldValidate) || nameValidationError === '';\n  const colorInputBlurHandler = useCallback(() => {\n    setIsColorInputOpen(false);\n  }, []);\n\n  useEffect(\n    function focusEditInput() {\n      if (isEditing && nameInputRef.current) {\n        // This is solely b/c RTL doesn't count select as focusing the element\n        // Might be fixed in v13+ of RTL\n        nameInputRef.current.focus();\n        nameInputRef.current.select();\n      }\n    },\n    [isEditing]\n  );\n\n  useEffect(\n    function deleteNewOnUnmount() {\n      return () => {\n        if (groupRef.current.isNew) {\n          // eslint-disable-next-line react-hooks/exhaustive-deps\n          onDelete(groupRef.current);\n        }\n      };\n    },\n    [onDelete]\n  );\n\n  useEffect(\n    function openColorInput() {\n      if (isColorInputOpen) {\n        colorInputRef.current?.click();\n        // Mostly for testing. Chrome seems to not give the hidden input focus\n        // Really would only affect screen readers\n        colorInputRef.current?.focus();\n\n        /**\n         * Adding this event handler is for Firefox on Mac\n         * There seems to be buggy behavior when multiple color inputs are on the same page\n         * Clicking between the inputs without closing the previous causes a bad state\n         * The user gets to a point where they can't open most of the pickers\n         * https://bugzilla.mozilla.org/show_bug.cgi?id=1618418\n         * https://bugzilla.mozilla.org/show_bug.cgi?id=975468\n         * Instead, we remove the color input when any focus is returned to the window\n         * This causes Firefox on Mac to mostly operate correctly\n         * Firefox seems to ignore the first click back into the window and emit no event\n         * So opening a color picker when another is open requires 2 clicks in Firefox\n         */\n        window.addEventListener('click', colorInputBlurHandler, true);\n      }\n\n      return () =>\n        window.removeEventListener('click', colorInputBlurHandler, true);\n    },\n    [isColorInputOpen, colorInputBlurHandler]\n  );\n\n  const handleConfirm = () => {\n    if (isValid) {\n      onNameChange(group, name);\n      setIsEditing(false);\n    }\n  };\n\n  const handleCancel = () => {\n    if (isNew) {\n      onDelete(group);\n      return;\n    }\n    setName(group.name);\n    setIsEditing(false);\n  };\n\n  const handleEditKeyDown = (e: React.KeyboardEvent): void => {\n    setShouldValidate(true);\n    if (e.key === 'Enter') {\n      e.stopPropagation();\n      handleConfirm();\n    }\n\n    if (e.key === ' ') {\n      e.stopPropagation();\n    }\n\n    if (e.key === 'Escape') {\n      handleCancel();\n    }\n  };\n\n  if (isEditing) {\n    return (\n      <>\n        <div className=\"editing-container\">\n          <input\n            ref={nameInputRef}\n            className={classNames('form-control', {\n              'is-invalid': !isValid,\n            })}\n            value={name}\n            placeholder=\"Group Name\"\n            onChange={e => setName(e.target.value)}\n            onKeyDown={handleEditKeyDown}\n            onBlur={() => setShouldValidate(true)}\n          />\n          <Button\n            kind=\"ghost\"\n            icon={vsCheck}\n            tooltip=\"Confirm\"\n            onClick={handleConfirm}\n          />\n          <Button\n            kind=\"ghost\"\n            icon={vsChromeClose}\n            tooltip=\"Cancel\"\n            onClick={handleCancel}\n          />\n        </div>\n        {!isValid && (\n          <p className=\"mb-0 validate-label-error text-danger\">\n            {nameValidationError}\n          </p>\n        )}\n      </>\n    );\n  }\n\n  return (\n    <div className=\"group-name-wrapper\">\n      <span className=\"column-name\">{name}</span>\n      <Button\n        className=\"p-1 mx-1\"\n        kind=\"ghost\"\n        icon={vsEdit}\n        tooltip=\"Edit\"\n        onClick={() => {\n          setIsEditing(true);\n        }}\n      />\n\n      <span className=\"right-buttons\">\n        <Button\n          kind=\"ghost\"\n          icon={vsTrash}\n          tooltip=\"Delete group\"\n          onClick={() => onDelete(group)}\n        />\n        <Button\n          kind=\"ghost\"\n          className=\"color-swatch mr-1\"\n          icon={\n            group.color !== undefined ? (\n              <span className=\"fa-layers\">\n                <FontAwesomeIcon\n                  className=\"color-swatch\"\n                  icon={dhSquareFilled}\n                  color={ThemeExport.white}\n                  transform=\"down-1\"\n                />\n                <FontAwesomeIcon\n                  className=\"color-swatch\"\n                  icon={dhSquareFilled}\n                  color={group.color}\n                  transform=\"shrink-2 down-1\"\n                />\n              </span>\n            ) : (\n              vsPaintcan\n            )\n          }\n          tooltip=\"Set color\"\n          /**\n           * Toggle to close the picker on Chrome\n           * Prevents Firefox on Mac from getting into a stuck state\n           * Does not close on Firefox b/c the picker stays open when the element is removed\n           */\n          onClick={() => setIsColorInputOpen(val => !val)}\n        />\n        {isColorInputOpen && (\n          <>\n            <input\n              aria-label=\"Color input\"\n              ref={colorInputRef}\n              type=\"color\"\n              list=\"presetColors\"\n              value={group.color ?? ThemeExport['content-bg']}\n              style={{\n                visibility: 'hidden',\n                width: 0,\n                height: 0,\n                padding: 0,\n                border: 0,\n              }}\n              onChange={e => {\n                group.color = e.target.value;\n                onColorChange(group, e.target.value);\n              }}\n            />\n            <datalist id=\"presetColors\">\n              <option>{ThemeExport['content-bg']}</option>\n              <option>{ThemeExport.primary}</option>\n              <option>{ThemeExport.foreground}</option>\n              <option>{ThemeExport.green}</option>\n              <option>{ThemeExport.yellow}</option>\n              <option>{ThemeExport.orange}</option>\n              <option>{ThemeExport.red}</option>\n              <option>{ThemeExport.purple}</option>\n              <option>{ThemeExport.blue}</option>\n              <option>{ThemeExport['gray-400']}</option>\n            </datalist>\n          </>\n        )}\n      </span>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/iris-grid",
-  "version": "0.31.2-beta.3+7448a88",
+  "version": "0.31.2-beta.8+f7f918e",
   "description": "Deephaven Iris Grid",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
@@ -23,17 +23,17 @@
     "build:sass": "sass --embed-sources --load-path=../../node_modules ./src:./dist"
   },
   "dependencies": {
-    "@deephaven/components": "^0.31.2-beta.3+7448a88",
-    "@deephaven/console": "^0.31.2-beta.3+7448a88",
-    "@deephaven/filters": "^0.31.2-beta.3+7448a88",
-    "@deephaven/grid": "^0.31.2-beta.3+7448a88",
-    "@deephaven/icons": "^0.31.2-beta.3+7448a88",
-    "@deephaven/jsapi-shim": "^0.31.2-beta.3+7448a88",
-    "@deephaven/jsapi-utils": "^0.31.2-beta.3+7448a88",
-    "@deephaven/log": "^0.31.2-beta.3+7448a88",
-    "@deephaven/react-hooks": "^0.31.2-beta.3+7448a88",
-    "@deephaven/storage": "^0.31.2-beta.3+7448a88",
-    "@deephaven/utils": "^0.31.2-beta.3+7448a88",
+    "@deephaven/components": "^0.31.2-beta.8+f7f918e",
+    "@deephaven/console": "^0.31.2-beta.8+f7f918e",
+    "@deephaven/filters": "^0.31.2-beta.8+f7f918e",
+    "@deephaven/grid": "^0.31.2-beta.8+f7f918e",
+    "@deephaven/icons": "^0.31.2-beta.8+f7f918e",
+    "@deephaven/jsapi-shim": "^0.31.2-beta.8+f7f918e",
+    "@deephaven/jsapi-utils": "^0.31.2-beta.8+f7f918e",
+    "@deephaven/log": "^0.31.2-beta.8+f7f918e",
+    "@deephaven/react-hooks": "^0.31.2-beta.8+f7f918e",
+    "@deephaven/storage": "^0.31.2-beta.8+f7f918e",
+    "@deephaven/utils": "^0.31.2-beta.8+f7f918e",
     "@dnd-kit/core": "^6.0.5",
     "@dnd-kit/sortable": "^7.0.0",
     "@dnd-kit/utilities": "^3.2.0",
@@ -57,8 +57,8 @@
     "react-dom": "^17.x"
   },
   "devDependencies": {
-    "@deephaven/mocks": "^0.31.2-beta.3+7448a88",
-    "@deephaven/tsconfig": "^0.31.2-beta.3+7448a88"
+    "@deephaven/mocks": "^0.31.2-beta.8+f7f918e",
+    "@deephaven/tsconfig": "^0.31.2-beta.8+f7f918e"
   },
   "files": [
     "dist"
@@ -69,5 +69,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7448a88a651f82416de9c2aa0ebbbb217a6eae5c"
+  "gitHead": "f7f918e7f0c5f1b0fb4030eb748010aaf4d196df"
 }