@deephaven/iris-grid 0.46.1-beta.2 → 0.46.1-beta.7

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

@@ -1 +1 @@
-{"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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"}
+{"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/dist/sidebar/visibility-ordering-builder/VisibilityOrderingItem.js

@@ -1,4 +1,8 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 /* eslint-disable react/prop-types */
 import React, { forwardRef, useCallback, useRef } from 'react';
 import classNames from 'classnames';
@@ -6,6 +10,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { dhEye, dhEyeSlash, vsGripper } from '@deephaven/icons';
 import { Button, Tooltip } from '@deephaven/components';
 import VisibilityOrderingGroup from "./VisibilityOrderingGroup.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 function emptyOnClick() {
   // no-op
 }
@@ -42,7 +48,7 @@ var VisibilityOrderingItem = /*#__PURE__*/forwardRef(function VisibilityOrdering
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    React.createElement("div", _extends({
+    _jsxs("div", _objectSpread(_objectSpread({
       ref: ref,
       className: classNames('tree-item', {
         isSelected: item.selected,
@@ -51,30 +57,38 @@ var VisibilityOrderingItem = /*#__PURE__*/forwardRef(function VisibilityOrdering
       }),
       onClick: handleClick
       // eslint-disable-next-line react/jsx-props-no-spreading
-    }, handleProps), /*#__PURE__*/React.createElement(Button, {
-      ref: buttonRef,
-      kind: "ghost",
-      className: "px-1"
-      // We PropType validate onClick for Button
-      ,
-      onClick: emptyOnClick,
-      onMouseDown: handleVisibilityChange,
-      onMouseEnter: handleVisibilityChange,
-      icon: isVisible ? dhEye : dhEyeSlash,
-      tooltip: "Toggle visibility"
-    }), /*#__PURE__*/React.createElement("span", {
-      className: classNames('column-name', group && 'column-group')
-    }, group && !clone ? /*#__PURE__*/React.createElement(VisibilityOrderingGroup, {
-      group: group,
-      onDelete: onGroupDelete,
-      onColorChange: onGroupColorChange,
-      onNameChange: onGroupNameChange,
-      validateName: validateGroupName
-    }) : value), /*#__PURE__*/React.createElement("div", null, clone && childCount > 1 && /*#__PURE__*/React.createElement("span", {
-      className: "item-count"
-    }, childCount), /*#__PURE__*/React.createElement(Tooltip, null, "Drag to re-order"), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      icon: vsGripper
-    })))
+    }, handleProps), {}, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        ref: buttonRef,
+        kind: "ghost",
+        className: "px-1"
+        // We PropType validate onClick for Button
+        ,
+        onClick: emptyOnClick,
+        onMouseDown: handleVisibilityChange,
+        onMouseEnter: handleVisibilityChange,
+        icon: isVisible ? dhEye : dhEyeSlash,
+        tooltip: "Toggle visibility"
+      }), /*#__PURE__*/_jsx("span", {
+        className: classNames('column-name', group && 'column-group'),
+        children: group && !clone ? /*#__PURE__*/_jsx(VisibilityOrderingGroup, {
+          group: group,
+          onDelete: onGroupDelete,
+          onColorChange: onGroupColorChange,
+          onNameChange: onGroupNameChange,
+          validateName: validateGroupName
+        }) : value
+      }), /*#__PURE__*/_jsxs("div", {
+        children: [clone && childCount > 1 && /*#__PURE__*/_jsx("span", {
+          className: "item-count",
+          children: childCount
+        }), /*#__PURE__*/_jsx(Tooltip, {
+          children: "Drag to re-order"
+        }), /*#__PURE__*/_jsx(FontAwesomeIcon, {
+          icon: vsGripper
+        })]
+      })]
+    }))
   );
 });
 export default VisibilityOrderingItem;

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

@@ -1 +1 @@
-{"version":3,"file":"VisibilityOrderingItem.js","names":["React","forwardRef","useCallback","useRef","classNames","FontAwesomeIcon","dhEye","dhEyeSlash","vsGripper","Button","Tooltip","VisibilityOrderingGroup","emptyOnClick","VisibilityOrderingItem","props","ref","value","clone","childCount","item","onVisibilityChange","onClick","onGroupDelete","onGroupColorChange","onGroupNameChange","validateGroupName","handleProps","group","modelIndex","isVisible","data","buttonRef","handleVisibilityChange","e","buttons","flat","current","focus","handleClick","event","isSelected","selected"],"sources":["../../../src/sidebar/visibility-ordering-builder/VisibilityOrderingItem.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React, { forwardRef, useCallback, useRef } from 'react';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { dhEye, dhEyeSlash, vsGripper } from '@deephaven/icons';\nimport { Button, Tooltip } from '@deephaven/components';\nimport VisibilityOrderingGroup from './VisibilityOrderingGroup';\nimport { FlattenedIrisGridTreeItem } from './sortable-tree/utilities';\nimport type ColumnHeaderGroup from '../../ColumnHeaderGroup';\n\ntype VisibilityOrderingItemProps = {\n  value: string;\n  clone: boolean;\n  childCount: number;\n  item: FlattenedIrisGridTreeItem;\n  onVisibilityChange(modelIndexes: number[], isVisible: boolean): void;\n  onClick(name: string, event: React.MouseEvent): void;\n  onGroupDelete(group: ColumnHeaderGroup): void;\n  onGroupColorChange(group: ColumnHeaderGroup, color: string | undefined): void;\n  onGroupNameChange(group: ColumnHeaderGroup, name: string): void;\n  validateGroupName(name: string): string;\n  handleProps: Record<string, unknown>;\n};\n\nfunction emptyOnClick() {\n  // no-op\n}\n\nconst VisibilityOrderingItem = forwardRef<\n  HTMLDivElement,\n  VisibilityOrderingItemProps\n>(function VisibilityOrderingItem(props, ref) {\n  const {\n    value,\n    clone,\n    childCount,\n    item,\n    onVisibilityChange,\n    onClick,\n    onGroupDelete,\n    onGroupColorChange,\n    onGroupNameChange,\n    validateGroupName,\n    handleProps,\n  } = props;\n  const { group, modelIndex, isVisible } = item.data;\n  const buttonRef = useRef<HTMLButtonElement>(null);\n\n  const handleVisibilityChange = useCallback(\n    (e: React.MouseEvent) => {\n      if (e.buttons === 1) {\n        onVisibilityChange([modelIndex].flat(), !isVisible);\n        buttonRef.current?.focus();\n      }\n    },\n    [onVisibilityChange, modelIndex, isVisible]\n  );\n\n  const handleClick = useCallback(\n    (event: React.MouseEvent) => {\n      onClick(value, event);\n    },\n    [onClick, value]\n  );\n\n  return (\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n    <div\n      ref={ref}\n      className={classNames('tree-item', {\n        isSelected: item.selected,\n        'two-dragged': childCount === 2,\n        'multiple-dragged': childCount > 2,\n      })}\n      onClick={handleClick}\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...handleProps}\n    >\n      <Button\n        ref={buttonRef}\n        kind=\"ghost\"\n        className=\"px-1\"\n        // We PropType validate onClick for Button\n        onClick={emptyOnClick}\n        onMouseDown={handleVisibilityChange}\n        onMouseEnter={handleVisibilityChange}\n        icon={isVisible ? dhEye : dhEyeSlash}\n        tooltip=\"Toggle visibility\"\n      />\n      <span className={classNames('column-name', group && 'column-group')}>\n        {/* Display a normal item if this is the drag overlay clone, even if it's a group */}\n        {group && !clone ? (\n          <VisibilityOrderingGroup\n            group={group}\n            onDelete={onGroupDelete}\n            onColorChange={onGroupColorChange}\n            onNameChange={onGroupNameChange}\n            validateName={validateGroupName}\n          />\n        ) : (\n          value\n        )}\n      </span>\n      <div>\n        {clone && childCount > 1 && (\n          <span className=\"item-count\">{childCount}</span>\n        )}\n        <Tooltip>Drag to re-order</Tooltip>\n        <FontAwesomeIcon icon={vsGripper} />\n      </div>\n    </div>\n  );\n});\n\nexport default VisibilityOrderingItem;\n"],"mappings":";AAAA;AACA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,WAAW,EAAEC,MAAM,QAAQ,OAAO;AAC9D,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,eAAe,QAAQ,gCAAgC;AAChE,SAASC,KAAK,EAAEC,UAAU,EAAEC,SAAS,QAAQ,kBAAkB;AAC/D,SAASC,MAAM,EAAEC,OAAO,QAAQ,uBAAuB;AAAC,OACjDC,uBAAuB;AAkB9B,SAASC,YAAY,GAAG;EACtB;AAAA;AAGF,IAAMC,sBAAsB,gBAAGZ,UAAU,CAGvC,SAASY,sBAAsB,CAACC,KAAK,EAAEC,GAAG,EAAE;EAC5C,IAAM;IACJC,KAAK;IACLC,KAAK;IACLC,UAAU;IACVC,IAAI;IACJC,kBAAkB;IAClBC,OAAO;IACPC,aAAa;IACbC,kBAAkB;IAClBC,iBAAiB;IACjBC,iBAAiB;IACjBC;EACF,CAAC,GAAGZ,KAAK;EACT,IAAM;IAAEa,KAAK;IAAEC,UAAU;IAAEC;EAAU,CAAC,GAAGV,IAAI,CAACW,IAAI;EAClD,IAAMC,SAAS,GAAG5B,MAAM,CAAoB,IAAI,CAAC;EAEjD,IAAM6B,sBAAsB,GAAG9B,WAAW,CACvC+B,CAAmB,IAAK;IACvB,IAAIA,CAAC,CAACC,OAAO,KAAK,CAAC,EAAE;MAAA;MACnBd,kBAAkB,CAAC,CAACQ,UAAU,CAAC,CAACO,IAAI,EAAE,EAAE,CAACN,SAAS,CAAC;MACnD,sBAAAE,SAAS,CAACK,OAAO,uDAAjB,mBAAmBC,KAAK,EAAE;IAC5B;EACF,CAAC,EACD,CAACjB,kBAAkB,EAAEQ,UAAU,EAAEC,SAAS,CAAC,CAC5C;EAED,IAAMS,WAAW,GAAGpC,WAAW,CAC5BqC,KAAuB,IAAK;IAC3BlB,OAAO,CAACL,KAAK,EAAEuB,KAAK,CAAC;EACvB,CAAC,EACD,CAAClB,OAAO,EAAEL,KAAK,CAAC,CACjB;EAED;IAAA;IACE;IACA;MACE,GAAG,EAAED,GAAI;MACT,SAAS,EAAEX,UAAU,CAAC,WAAW,EAAE;QACjCoC,UAAU,EAAErB,IAAI,CAACsB,QAAQ;QACzB,aAAa,EAAEvB,UAAU,KAAK,CAAC;QAC/B,kBAAkB,EAAEA,UAAU,GAAG;MACnC,CAAC,CAAE;MACH,OAAO,EAAEoB;MACT;IAAA,GACIZ,WAAW,gBAEf,oBAAC,MAAM;MACL,GAAG,EAAEK,SAAU;MACf,IAAI,EAAC,OAAO;MACZ,SAAS,EAAC;MACV;MAAA;MACA,OAAO,EAAEnB,YAAa;MACtB,WAAW,EAAEoB,sBAAuB;MACpC,YAAY,EAAEA,sBAAuB;MACrC,IAAI,EAAEH,SAAS,GAAGvB,KAAK,GAAGC,UAAW;MACrC,OAAO,EAAC;IAAmB,EAC3B,eACF;MAAM,SAAS,EAAEH,UAAU,CAAC,aAAa,EAAEuB,KAAK,IAAI,cAAc;IAAE,GAEjEA,KAAK,IAAI,CAACV,KAAK,gBACd,oBAAC,uBAAuB;MACtB,KAAK,EAAEU,KAAM;MACb,QAAQ,EAAEL,aAAc;MACxB,aAAa,EAAEC,kBAAmB;MAClC,YAAY,EAAEC,iBAAkB;MAChC,YAAY,EAAEC;IAAkB,EAChC,GAEFT,KACD,CACI,eACP,iCACGC,KAAK,IAAIC,UAAU,GAAG,CAAC,iBACtB;MAAM,SAAS,EAAC;IAAY,GAAEA,UAAU,CACzC,eACD,oBAAC,OAAO,QAAC,kBAAgB,CAAU,eACnC,oBAAC,eAAe;MAAC,IAAI,EAAEV;IAAU,EAAG,CAChC;EACF;AAEV,CAAC,CAAC;AAEF,eAAeK,sBAAsB"}
+{"version":3,"file":"VisibilityOrderingItem.js","names":["React","forwardRef","useCallback","useRef","classNames","FontAwesomeIcon","dhEye","dhEyeSlash","vsGripper","Button","Tooltip","VisibilityOrderingGroup","emptyOnClick","VisibilityOrderingItem","props","ref","value","clone","childCount","item","onVisibilityChange","onClick","onGroupDelete","onGroupColorChange","onGroupNameChange","validateGroupName","handleProps","group","modelIndex","isVisible","data","buttonRef","handleVisibilityChange","e","buttons","flat","current","focus","handleClick","event","isSelected","selected"],"sources":["../../../src/sidebar/visibility-ordering-builder/VisibilityOrderingItem.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React, { forwardRef, useCallback, useRef } from 'react';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { dhEye, dhEyeSlash, vsGripper } from '@deephaven/icons';\nimport { Button, Tooltip } from '@deephaven/components';\nimport VisibilityOrderingGroup from './VisibilityOrderingGroup';\nimport { FlattenedIrisGridTreeItem } from './sortable-tree/utilities';\nimport type ColumnHeaderGroup from '../../ColumnHeaderGroup';\n\ntype VisibilityOrderingItemProps = {\n  value: string;\n  clone: boolean;\n  childCount: number;\n  item: FlattenedIrisGridTreeItem;\n  onVisibilityChange(modelIndexes: number[], isVisible: boolean): void;\n  onClick(name: string, event: React.MouseEvent): void;\n  onGroupDelete(group: ColumnHeaderGroup): void;\n  onGroupColorChange(group: ColumnHeaderGroup, color: string | undefined): void;\n  onGroupNameChange(group: ColumnHeaderGroup, name: string): void;\n  validateGroupName(name: string): string;\n  handleProps: Record<string, unknown>;\n};\n\nfunction emptyOnClick() {\n  // no-op\n}\n\nconst VisibilityOrderingItem = forwardRef<\n  HTMLDivElement,\n  VisibilityOrderingItemProps\n>(function VisibilityOrderingItem(props, ref) {\n  const {\n    value,\n    clone,\n    childCount,\n    item,\n    onVisibilityChange,\n    onClick,\n    onGroupDelete,\n    onGroupColorChange,\n    onGroupNameChange,\n    validateGroupName,\n    handleProps,\n  } = props;\n  const { group, modelIndex, isVisible } = item.data;\n  const buttonRef = useRef<HTMLButtonElement>(null);\n\n  const handleVisibilityChange = useCallback(\n    (e: React.MouseEvent) => {\n      if (e.buttons === 1) {\n        onVisibilityChange([modelIndex].flat(), !isVisible);\n        buttonRef.current?.focus();\n      }\n    },\n    [onVisibilityChange, modelIndex, isVisible]\n  );\n\n  const handleClick = useCallback(\n    (event: React.MouseEvent) => {\n      onClick(value, event);\n    },\n    [onClick, value]\n  );\n\n  return (\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n    <div\n      ref={ref}\n      className={classNames('tree-item', {\n        isSelected: item.selected,\n        'two-dragged': childCount === 2,\n        'multiple-dragged': childCount > 2,\n      })}\n      onClick={handleClick}\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...handleProps}\n    >\n      <Button\n        ref={buttonRef}\n        kind=\"ghost\"\n        className=\"px-1\"\n        // We PropType validate onClick for Button\n        onClick={emptyOnClick}\n        onMouseDown={handleVisibilityChange}\n        onMouseEnter={handleVisibilityChange}\n        icon={isVisible ? dhEye : dhEyeSlash}\n        tooltip=\"Toggle visibility\"\n      />\n      <span className={classNames('column-name', group && 'column-group')}>\n        {/* Display a normal item if this is the drag overlay clone, even if it's a group */}\n        {group && !clone ? (\n          <VisibilityOrderingGroup\n            group={group}\n            onDelete={onGroupDelete}\n            onColorChange={onGroupColorChange}\n            onNameChange={onGroupNameChange}\n            validateName={validateGroupName}\n          />\n        ) : (\n          value\n        )}\n      </span>\n      <div>\n        {clone && childCount > 1 && (\n          <span className=\"item-count\">{childCount}</span>\n        )}\n        <Tooltip>Drag to re-order</Tooltip>\n        <FontAwesomeIcon icon={vsGripper} />\n      </div>\n    </div>\n  );\n});\n\nexport default VisibilityOrderingItem;\n"],"mappings":";;;;;AAAA;AACA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,WAAW,EAAEC,MAAM,QAAQ,OAAO;AAC9D,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,eAAe,QAAQ,gCAAgC;AAChE,SAASC,KAAK,EAAEC,UAAU,EAAEC,SAAS,QAAQ,kBAAkB;AAC/D,SAASC,MAAM,EAAEC,OAAO,QAAQ,uBAAuB;AAAC,OACjDC,uBAAuB;AAAA;AAAA;AAkB9B,SAASC,YAAY,GAAG;EACtB;AAAA;AAGF,IAAMC,sBAAsB,gBAAGZ,UAAU,CAGvC,SAASY,sBAAsB,CAACC,KAAK,EAAEC,GAAG,EAAE;EAC5C,IAAM;IACJC,KAAK;IACLC,KAAK;IACLC,UAAU;IACVC,IAAI;IACJC,kBAAkB;IAClBC,OAAO;IACPC,aAAa;IACbC,kBAAkB;IAClBC,iBAAiB;IACjBC,iBAAiB;IACjBC;EACF,CAAC,GAAGZ,KAAK;EACT,IAAM;IAAEa,KAAK;IAAEC,UAAU;IAAEC;EAAU,CAAC,GAAGV,IAAI,CAACW,IAAI;EAClD,IAAMC,SAAS,GAAG5B,MAAM,CAAoB,IAAI,CAAC;EAEjD,IAAM6B,sBAAsB,GAAG9B,WAAW,CACvC+B,CAAmB,IAAK;IACvB,IAAIA,CAAC,CAACC,OAAO,KAAK,CAAC,EAAE;MAAA;MACnBd,kBAAkB,CAAC,CAACQ,UAAU,CAAC,CAACO,IAAI,EAAE,EAAE,CAACN,SAAS,CAAC;MACnD,sBAAAE,SAAS,CAACK,OAAO,uDAAjB,mBAAmBC,KAAK,EAAE;IAC5B;EACF,CAAC,EACD,CAACjB,kBAAkB,EAAEQ,UAAU,EAAEC,SAAS,CAAC,CAC5C;EAED,IAAMS,WAAW,GAAGpC,WAAW,CAC5BqC,KAAuB,IAAK;IAC3BlB,OAAO,CAACL,KAAK,EAAEuB,KAAK,CAAC;EACvB,CAAC,EACD,CAAClB,OAAO,EAAEL,KAAK,CAAC,CACjB;EAED;IAAA;IACE;IACA;MACE,GAAG,EAAED,GAAI;MACT,SAAS,EAAEX,UAAU,CAAC,WAAW,EAAE;QACjCoC,UAAU,EAAErB,IAAI,CAACsB,QAAQ;QACzB,aAAa,EAAEvB,UAAU,KAAK,CAAC;QAC/B,kBAAkB,EAAEA,UAAU,GAAG;MACnC,CAAC,CAAE;MACH,OAAO,EAAEoB;MACT;IAAA,GACIZ,WAAW;MAAA,wBAEf,KAAC,MAAM;QACL,GAAG,EAAEK,SAAU;QACf,IAAI,EAAC,OAAO;QACZ,SAAS,EAAC;QACV;QAAA;QACA,OAAO,EAAEnB,YAAa;QACtB,WAAW,EAAEoB,sBAAuB;QACpC,YAAY,EAAEA,sBAAuB;QACrC,IAAI,EAAEH,SAAS,GAAGvB,KAAK,GAAGC,UAAW;QACrC,OAAO,EAAC;MAAmB,EAC3B,eACF;QAAM,SAAS,EAAEH,UAAU,CAAC,aAAa,EAAEuB,KAAK,IAAI,cAAc,CAAE;QAAA,UAEjEA,KAAK,IAAI,CAACV,KAAK,gBACd,KAAC,uBAAuB;UACtB,KAAK,EAAEU,KAAM;UACb,QAAQ,EAAEL,aAAc;UACxB,aAAa,EAAEC,kBAAmB;UAClC,YAAY,EAAEC,iBAAkB;UAChC,YAAY,EAAEC;QAAkB,EAChC,GAEFT;MACD,EACI,eACP;QAAA,WACGC,KAAK,IAAIC,UAAU,GAAG,CAAC,iBACtB;UAAM,SAAS,EAAC,YAAY;UAAA,UAAEA;QAAU,EACzC,eACD,KAAC,OAAO;UAAA,UAAC;QAAgB,EAAU,eACnC,KAAC,eAAe;UAAC,IAAI,EAAEV;QAAU,EAAG;MAAA,EAChC;IAAA;EACF;AAEV,CAAC,CAAC;AAEF,eAAeK,sBAAsB"}

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

@@ -10,6 +10,7 @@ import { flattenTree, getProjection } from "./utilities.js";
 import { sortableTreeKeyboardCoordinates } from "./keyboardCoordinates.js";
 import PointerSensorWithInteraction from "./PointerSensorWithInteraction.js";
 import SortableTreeInner from "./SortableTreeInner.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 var MEASURING = {
   droppable: {
     strategy: MeasuringStrategy.Always
@@ -133,7 +134,7 @@ export default function SortableTree(_ref) {
   var handleDragCancel = useCallback(() => {
     resetState();
   }, [resetState]);
-  return /*#__PURE__*/React.createElement(DndContext, {
+  return /*#__PURE__*/_jsx(DndContext, {
     sensors: sensors,
     collisionDetection: closestCenter,
     measuring: MEASURING,
@@ -141,18 +142,20 @@ export default function SortableTree(_ref) {
     onDragMove: handleDragMove,
     onDragOver: handleDragOver,
     onDragEnd: handleDragEnd,
-    onDragCancel: handleDragCancel
-  }, /*#__PURE__*/React.createElement(SortableContext, {
-    items: sortedIds,
-    strategy: verticalListSortingStrategy
-  }, /*#__PURE__*/React.createElement(SortableTreeInner, {
-    items: flattenedItems,
-    renderItem: renderItem,
-    indicator: indicator,
-    indentationWidth: indentationWidth,
-    activeId: activeId,
-    overId: overId,
-    offsetLeft: offsetLeft
-  })));
+    onDragCancel: handleDragCancel,
+    children: /*#__PURE__*/_jsx(SortableContext, {
+      items: sortedIds,
+      strategy: verticalListSortingStrategy,
+      children: /*#__PURE__*/_jsx(SortableTreeInner, {
+        items: flattenedItems,
+        renderItem: renderItem,
+        indicator: indicator,
+        indentationWidth: indentationWidth,
+        activeId: activeId,
+        overId: overId,
+        offsetLeft: offsetLeft
+      })
+    })
+  });
 }
 //# sourceMappingURL=SortableTree.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SortableTree.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","DndContext","closestCenter","KeyboardSensor","useSensor","useSensors","MeasuringStrategy","SortableContext","verticalListSortingStrategy","flattenTree","getProjection","sortableTreeKeyboardCoordinates","PointerSensorWithInteraction","SortableTreeInner","MEASURING","droppable","strategy","Always","CONSTRAINT","activationConstraint","distance","SortableTree","items","indicator","indentationWidth","onDragStart","onDragEnd","renderItem","activeId","setActiveId","overId","setOverId","offsetLeft","setOffsetLeft","flattenedItems","flattenedTree","filter","id","selected","projected","sensorContext","offset","keyboardOptions","coordinateGetter","sensors","sortedIds","map","current","handleDragStart","active","newActiveId","document","body","style","setProperty","handleDragMove","delta","x","handleDragOver","over","resetState","handleDragEnd","depth","parentId","clonedItems","JSON","parse","stringify","overIndex","findIndex","activeIndex","activeTreeItem","handleDragCancel"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/SortableTree.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  DndContext,\n  closestCenter,\n  KeyboardSensor,\n  useSensor,\n  useSensors,\n  DragStartEvent,\n  DragMoveEvent,\n  DragEndEvent,\n  DragOverEvent,\n  MeasuringStrategy,\n} from '@dnd-kit/core';\nimport {\n  SortableContext,\n  verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { flattenTree, getProjection } from './utilities';\nimport type { FlattenedItem, SensorContext, TreeItem } from './types';\nimport { sortableTreeKeyboardCoordinates } from './keyboardCoordinates';\nimport PointerSensorWithInteraction from './PointerSensorWithInteraction';\nimport SortableTreeInner from './SortableTreeInner';\n\nconst MEASURING = {\n  droppable: {\n    strategy: MeasuringStrategy.Always,\n  },\n};\n\nconst CONSTRAINT = {\n  activationConstraint: {\n    distance: 5,\n  },\n};\n\ninterface Props<T> {\n  items: TreeItem<T>[];\n  indentationWidth?: number;\n  indicator?: boolean;\n  onDragStart?(id: string): void;\n  onDragEnd?(from: FlattenedItem<T>, to: FlattenedItem<T>): void;\n  renderItem(props: {\n    clone: boolean;\n    childCount?: number;\n    value: string;\n    item: FlattenedItem<T>;\n  }): JSX.Element;\n}\n\nexport default function SortableTree<T>({\n  items,\n  indicator = false,\n  indentationWidth = 30,\n  onDragStart,\n  onDragEnd,\n  renderItem,\n}: Props<T>): JSX.Element {\n  const [activeId, setActiveId] = useState<string | null>(null);\n  const [overId, setOverId] = useState<string | null>(null);\n  const [offsetLeft, setOffsetLeft] = useState(0);\n\n  const flattenedItems = useMemo(() => {\n    const flattenedTree = flattenTree(items);\n\n    if (activeId != null) {\n      return flattenedTree.filter(\n        ({ id, selected }) => id === activeId || !selected\n      );\n    }\n\n    return flattenedTree;\n  }, [activeId, items]);\n\n  const projected =\n    activeId != null && overId != null\n      ? getProjection(\n          flattenedItems,\n          activeId,\n          overId,\n          offsetLeft,\n          indentationWidth\n        )\n      : null;\n  const sensorContext: SensorContext = useRef({\n    items: flattenedItems,\n    offset: offsetLeft,\n  });\n  const keyboardOptions = useMemo(\n    () => ({\n      coordinateGetter: sortableTreeKeyboardCoordinates(\n        sensorContext,\n        indicator,\n        indentationWidth\n      ),\n    }),\n    [indentationWidth, indicator]\n  );\n\n  const sensors = useSensors(\n    useSensor(PointerSensorWithInteraction, CONSTRAINT),\n    useSensor(KeyboardSensor, keyboardOptions)\n  );\n\n  const sortedIds = useMemo(\n    () => flattenedItems.map(({ id }) => id),\n    [flattenedItems]\n  );\n\n  useEffect(() => {\n    sensorContext.current = {\n      items: flattenedItems,\n      offset: offsetLeft,\n    };\n  }, [flattenedItems, offsetLeft]);\n\n  const handleDragStart = useCallback(\n    ({ active: { id: newActiveId } }: DragStartEvent) => {\n      setActiveId(newActiveId as string);\n      setOverId(newActiveId as string);\n      onDragStart?.(newActiveId as string);\n\n      document.body.style.setProperty('cursor', 'grabbing');\n    },\n    [onDragStart]\n  );\n\n  const handleDragMove = useCallback(({ delta }: DragMoveEvent) => {\n    setOffsetLeft(delta.x);\n  }, []);\n\n  const handleDragOver = useCallback(({ over }: DragOverEvent) => {\n    setOverId((over?.id as string) ?? null);\n  }, []);\n\n  const resetState = useCallback(() => {\n    setOverId(null);\n    setActiveId(null);\n    setOffsetLeft(0);\n\n    document.body.style.setProperty('cursor', '');\n  }, []);\n\n  const handleDragEnd = useCallback(\n    ({ active, over }: DragEndEvent) => {\n      resetState();\n\n      if (projected && over) {\n        const { depth, parentId } = projected;\n\n        const clonedItems: FlattenedItem<T>[] = JSON.parse(\n          JSON.stringify(flattenTree(items))\n        );\n        const overIndex = clonedItems.findIndex(({ id }) => id === over.id);\n        const activeIndex = clonedItems.findIndex(({ id }) => id === active.id);\n        const activeTreeItem = clonedItems[activeIndex];\n\n        clonedItems[activeIndex] = { ...activeTreeItem, depth, parentId };\n\n        onDragEnd?.(activeTreeItem, {\n          ...clonedItems[overIndex],\n          parentId: projected.parentId,\n        });\n      }\n    },\n    [items, onDragEnd, projected, resetState]\n  );\n\n  const handleDragCancel = useCallback(() => {\n    resetState();\n  }, [resetState]);\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      measuring={MEASURING}\n      onDragStart={handleDragStart}\n      onDragMove={handleDragMove}\n      onDragOver={handleDragOver}\n      onDragEnd={handleDragEnd}\n      onDragCancel={handleDragCancel}\n    >\n      <SortableContext items={sortedIds} strategy={verticalListSortingStrategy}>\n        <SortableTreeInner\n          items={flattenedItems}\n          renderItem={renderItem}\n          indicator={indicator}\n          indentationWidth={indentationWidth}\n          activeId={activeId}\n          overId={overId}\n          offsetLeft={offsetLeft}\n        />\n      </SortableContext>\n    </DndContext>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"SortableTree.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","DndContext","closestCenter","KeyboardSensor","useSensor","useSensors","MeasuringStrategy","SortableContext","verticalListSortingStrategy","flattenTree","getProjection","sortableTreeKeyboardCoordinates","PointerSensorWithInteraction","SortableTreeInner","MEASURING","droppable","strategy","Always","CONSTRAINT","activationConstraint","distance","SortableTree","items","indicator","indentationWidth","onDragStart","onDragEnd","renderItem","activeId","setActiveId","overId","setOverId","offsetLeft","setOffsetLeft","flattenedItems","flattenedTree","filter","id","selected","projected","sensorContext","offset","keyboardOptions","coordinateGetter","sensors","sortedIds","map","current","handleDragStart","active","newActiveId","document","body","style","setProperty","handleDragMove","delta","x","handleDragOver","over","resetState","handleDragEnd","depth","parentId","clonedItems","JSON","parse","stringify","overIndex","findIndex","activeIndex","activeTreeItem","handleDragCancel"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/SortableTree.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  DndContext,\n  closestCenter,\n  KeyboardSensor,\n  useSensor,\n  useSensors,\n  DragStartEvent,\n  DragMoveEvent,\n  DragEndEvent,\n  DragOverEvent,\n  MeasuringStrategy,\n} from '@dnd-kit/core';\nimport {\n  SortableContext,\n  verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { flattenTree, getProjection } from './utilities';\nimport type { FlattenedItem, SensorContext, TreeItem } from './types';\nimport { sortableTreeKeyboardCoordinates } from './keyboardCoordinates';\nimport PointerSensorWithInteraction from './PointerSensorWithInteraction';\nimport SortableTreeInner from './SortableTreeInner';\n\nconst MEASURING = {\n  droppable: {\n    strategy: MeasuringStrategy.Always,\n  },\n};\n\nconst CONSTRAINT = {\n  activationConstraint: {\n    distance: 5,\n  },\n};\n\ninterface Props<T> {\n  items: TreeItem<T>[];\n  indentationWidth?: number;\n  indicator?: boolean;\n  onDragStart?(id: string): void;\n  onDragEnd?(from: FlattenedItem<T>, to: FlattenedItem<T>): void;\n  renderItem(props: {\n    clone: boolean;\n    childCount?: number;\n    value: string;\n    item: FlattenedItem<T>;\n  }): JSX.Element;\n}\n\nexport default function SortableTree<T>({\n  items,\n  indicator = false,\n  indentationWidth = 30,\n  onDragStart,\n  onDragEnd,\n  renderItem,\n}: Props<T>): JSX.Element {\n  const [activeId, setActiveId] = useState<string | null>(null);\n  const [overId, setOverId] = useState<string | null>(null);\n  const [offsetLeft, setOffsetLeft] = useState(0);\n\n  const flattenedItems = useMemo(() => {\n    const flattenedTree = flattenTree(items);\n\n    if (activeId != null) {\n      return flattenedTree.filter(\n        ({ id, selected }) => id === activeId || !selected\n      );\n    }\n\n    return flattenedTree;\n  }, [activeId, items]);\n\n  const projected =\n    activeId != null && overId != null\n      ? getProjection(\n          flattenedItems,\n          activeId,\n          overId,\n          offsetLeft,\n          indentationWidth\n        )\n      : null;\n  const sensorContext: SensorContext = useRef({\n    items: flattenedItems,\n    offset: offsetLeft,\n  });\n  const keyboardOptions = useMemo(\n    () => ({\n      coordinateGetter: sortableTreeKeyboardCoordinates(\n        sensorContext,\n        indicator,\n        indentationWidth\n      ),\n    }),\n    [indentationWidth, indicator]\n  );\n\n  const sensors = useSensors(\n    useSensor(PointerSensorWithInteraction, CONSTRAINT),\n    useSensor(KeyboardSensor, keyboardOptions)\n  );\n\n  const sortedIds = useMemo(\n    () => flattenedItems.map(({ id }) => id),\n    [flattenedItems]\n  );\n\n  useEffect(() => {\n    sensorContext.current = {\n      items: flattenedItems,\n      offset: offsetLeft,\n    };\n  }, [flattenedItems, offsetLeft]);\n\n  const handleDragStart = useCallback(\n    ({ active: { id: newActiveId } }: DragStartEvent) => {\n      setActiveId(newActiveId as string);\n      setOverId(newActiveId as string);\n      onDragStart?.(newActiveId as string);\n\n      document.body.style.setProperty('cursor', 'grabbing');\n    },\n    [onDragStart]\n  );\n\n  const handleDragMove = useCallback(({ delta }: DragMoveEvent) => {\n    setOffsetLeft(delta.x);\n  }, []);\n\n  const handleDragOver = useCallback(({ over }: DragOverEvent) => {\n    setOverId((over?.id as string) ?? null);\n  }, []);\n\n  const resetState = useCallback(() => {\n    setOverId(null);\n    setActiveId(null);\n    setOffsetLeft(0);\n\n    document.body.style.setProperty('cursor', '');\n  }, []);\n\n  const handleDragEnd = useCallback(\n    ({ active, over }: DragEndEvent) => {\n      resetState();\n\n      if (projected && over) {\n        const { depth, parentId } = projected;\n\n        const clonedItems: FlattenedItem<T>[] = JSON.parse(\n          JSON.stringify(flattenTree(items))\n        );\n        const overIndex = clonedItems.findIndex(({ id }) => id === over.id);\n        const activeIndex = clonedItems.findIndex(({ id }) => id === active.id);\n        const activeTreeItem = clonedItems[activeIndex];\n\n        clonedItems[activeIndex] = { ...activeTreeItem, depth, parentId };\n\n        onDragEnd?.(activeTreeItem, {\n          ...clonedItems[overIndex],\n          parentId: projected.parentId,\n        });\n      }\n    },\n    [items, onDragEnd, projected, resetState]\n  );\n\n  const handleDragCancel = useCallback(() => {\n    resetState();\n  }, [resetState]);\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      measuring={MEASURING}\n      onDragStart={handleDragStart}\n      onDragMove={handleDragMove}\n      onDragOver={handleDragOver}\n      onDragEnd={handleDragEnd}\n      onDragCancel={handleDragCancel}\n    >\n      <SortableContext items={sortedIds} strategy={verticalListSortingStrategy}>\n        <SortableTreeInner\n          items={flattenedItems}\n          renderItem={renderItem}\n          indicator={indicator}\n          indentationWidth={indentationWidth}\n          activeId={activeId}\n          overId={overId}\n          offsetLeft={offsetLeft}\n        />\n      </SortableContext>\n    </DndContext>\n  );\n}\n"],"mappings":"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"}

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

@@ -10,6 +10,9 @@ import { DragOverlay, defaultDropAnimation, useDndContext } from '@dnd-kit/core'
 import { CSS } from '@dnd-kit/utilities';
 import { getProjection, getChildCount } from "./utilities.js";
 import { SortableTreeItem } from "./SortableTreeItem.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var dropAnimationConfig = {
   keyframes(_ref) {
     var {
@@ -114,33 +117,36 @@ export default function SortableTreeInner(_ref3) {
       offset: offsetLeft
     };
   }, [items, offsetLeft]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: classNames('tree-container', activeId != null && 'marching-ants')
-  }, items.map(item => {
-    var {
-      id,
-      depth
-    } = item;
-    return /*#__PURE__*/React.createElement(SortableTreeItem, {
-      key: id,
-      id: id,
-      value: id,
-      depth: id === activeId && projected ? projected.depth : depth,
-      item: item,
-      renderItem: renderItem
-    });
-  })), /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(DragOverlay, {
-    dropAnimation: dropAnimationConfig,
-    modifiers: [adjustToCursor],
-    className: "visibility-ordering-list"
-  }, activeId != null && activeItem ? /*#__PURE__*/React.createElement(SortableTreeItem, {
-    id: activeId,
-    depth: activeItem.depth,
-    clone: true,
-    childCount: getChildCount(items, activeId) + 1,
-    value: activeId.toString(),
-    renderItem: renderItem,
-    item: activeItem
-  }) : null), document.body));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("div", {
+      className: classNames('tree-container', activeId != null && 'marching-ants'),
+      children: items.map(item => {
+        var {
+          id,
+          depth
+        } = item;
+        return /*#__PURE__*/_jsx(SortableTreeItem, {
+          id: id,
+          value: id,
+          depth: id === activeId && projected ? projected.depth : depth,
+          item: item,
+          renderItem: renderItem
+        }, id);
+      })
+    }), /*#__PURE__*/createPortal( /*#__PURE__*/_jsx(DragOverlay, {
+      dropAnimation: dropAnimationConfig,
+      modifiers: [adjustToCursor],
+      className: "visibility-ordering-list",
+      children: activeId != null && activeItem ? /*#__PURE__*/_jsx(SortableTreeItem, {
+        id: activeId,
+        depth: activeItem.depth,
+        clone: true,
+        childCount: getChildCount(items, activeId) + 1,
+        value: activeId.toString(),
+        renderItem: renderItem,
+        item: activeItem
+      }) : null
+    }), document.body)]
+  });
 }
 //# sourceMappingURL=SortableTreeInner.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SortableTreeInner.js","names":["React","useEffect","useRef","createPortal","classNames","DragOverlay","defaultDropAnimation","useDndContext","CSS","getProjection","getChildCount","SortableTreeItem","dropAnimationConfig","keyframes","transform","opacity","Transform","toString","initial","final","x","y","easing","sideEffects","active","node","animate","duration","offsetY","adjustToCursor","args","activeNodeRect","activatorEvent","PointerEvent","Math","floor","clientY","top","height","SortableTreeInner","items","renderItem","indentationWidth","indicator","activeId","overId","offsetLeft","context","contextRef","updateContextRef","current","remeasureContainers","measureDroppableContainers","map","id","projected","sensorContext","offset","activeItem","find","item","depth","document","body"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/SortableTreeInner.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport classNames from 'classnames';\nimport {\n  DragOverlay,\n  DropAnimation,\n  Modifier,\n  defaultDropAnimation,\n  useDndContext,\n} from '@dnd-kit/core';\nimport { CSS } from '@dnd-kit/utilities';\nimport { getProjection, getChildCount } from './utilities';\nimport type { FlattenedItem, SensorContext } from './types';\nimport { SortableTreeItem } from './SortableTreeItem';\n\nconst dropAnimationConfig: DropAnimation = {\n  keyframes({ transform }) {\n    return [\n      { opacity: 1, transform: CSS.Transform.toString(transform.initial) },\n      {\n        opacity: 0,\n        transform: CSS.Transform.toString({\n          ...transform.final,\n          x: transform.final.x + 5,\n          y: transform.final.y + 5,\n        }),\n      },\n    ];\n  },\n  easing: 'ease-out',\n  sideEffects({ active }) {\n    active.node.animate([{ opacity: 0 }, { opacity: 1 }], {\n      duration: defaultDropAnimation.duration,\n      easing: defaultDropAnimation.easing,\n    });\n  },\n};\n\n// Used to track the offset for adjustToCursor\n// Once drag starts, set this. Once it ends, null this\nlet offsetY: number | null = null;\n\n/**\n * This adjusts the transform to move to the cursor if it gets shifted due to multi-select.\n * With multi-select, the selected items (except dragged) are removed on drag.\n * This can cause the overlay item to disconnect from the cursor in some cases.\n * E.g. select first 3 items, start dragging from 3rd item.\n * Without this modifier, the drag overlay will be shifted 60px up from the cursor after the items are removed.\n *\n * This assumes all items are the same height as the dragged item\n * @param args Modifier args from dnd-kit\n * @returns Transform so that the dragged item stays on the cursor\n */\nfunction adjustToCursor(args: Parameters<Modifier>[0]) {\n  if (\n    offsetY == null &&\n    args.activeNodeRect &&\n    args.activatorEvent instanceof PointerEvent\n  ) {\n    offsetY =\n      Math.floor(\n        (args.activatorEvent.clientY - args.activeNodeRect.top) /\n          args.activeNodeRect.height\n      ) * args.activeNodeRect.height;\n  }\n\n  if (!args.activeNodeRect) {\n    offsetY = null;\n  }\n\n  return { ...args.transform, y: args.transform.y + (offsetY ?? 0) };\n}\n\ninterface Props<T> {\n  items: FlattenedItem<T>[];\n  indentationWidth?: number;\n  indicator?: boolean;\n  renderItem(props: {\n    clone: boolean;\n    childCount?: number;\n    value: string;\n    item: FlattenedItem<T>;\n  }): JSX.Element;\n  activeId: string | null;\n  overId: string | null;\n  offsetLeft: number;\n}\n\nexport default function SortableTreeInner<T>({\n  items,\n  renderItem,\n  indentationWidth = 30,\n  indicator = false,\n  activeId,\n  overId,\n  offsetLeft,\n}: Props<T>): JSX.Element {\n  const context = useDndContext();\n  const contextRef = useRef(context);\n\n  useEffect(\n    function updateContextRef() {\n      contextRef.current = context;\n    },\n    [context]\n  );\n\n  // Without this, animations are funky when using the move/sort buttons\n  // dnd-kit only remeasures on drag/drop by default\n  // The context object changes while dragging (items don't)\n  // Using the context ref allows this to trigger properly on only items changes\n  useEffect(\n    function remeasureContainers() {\n      contextRef.current.measureDroppableContainers(items.map(({ id }) => id));\n    },\n    [items]\n  );\n\n  const projected =\n    activeId != null && overId != null\n      ? getProjection(items, activeId, overId, offsetLeft, indentationWidth)\n      : null;\n  const sensorContext: SensorContext = useRef({\n    items,\n    offset: offsetLeft,\n  });\n\n  const activeItem =\n    activeId != null ? items.find(({ id }) => id === activeId) : null;\n\n  useEffect(() => {\n    sensorContext.current = {\n      items,\n      offset: offsetLeft,\n    };\n  }, [items, offsetLeft]);\n\n  return (\n    <>\n      <div\n        className={classNames(\n          'tree-container',\n          activeId != null && 'marching-ants'\n        )}\n      >\n        {items.map(item => {\n          const { id, depth } = item;\n          return (\n            <SortableTreeItem\n              key={id}\n              id={id}\n              value={id}\n              depth={id === activeId && projected ? projected.depth : depth}\n              item={item}\n              renderItem={renderItem}\n            />\n          );\n        })}\n      </div>\n      {createPortal(\n        <DragOverlay\n          dropAnimation={dropAnimationConfig}\n          modifiers={[adjustToCursor]}\n          className=\"visibility-ordering-list\"\n        >\n          {activeId != null && activeItem ? (\n            <SortableTreeItem\n              id={activeId}\n              depth={activeItem.depth}\n              clone\n              childCount={getChildCount(items, activeId) + 1}\n              value={activeId.toString()}\n              renderItem={renderItem}\n              item={activeItem}\n            />\n          ) : null}\n        </DragOverlay>,\n        document.body\n      )}\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"SortableTreeInner.js","names":["React","useEffect","useRef","createPortal","classNames","DragOverlay","defaultDropAnimation","useDndContext","CSS","getProjection","getChildCount","SortableTreeItem","dropAnimationConfig","keyframes","transform","opacity","Transform","toString","initial","final","x","y","easing","sideEffects","active","node","animate","duration","offsetY","adjustToCursor","args","activeNodeRect","activatorEvent","PointerEvent","Math","floor","clientY","top","height","SortableTreeInner","items","renderItem","indentationWidth","indicator","activeId","overId","offsetLeft","context","contextRef","updateContextRef","current","remeasureContainers","measureDroppableContainers","map","id","projected","sensorContext","offset","activeItem","find","item","depth","document","body"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/SortableTreeInner.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport classNames from 'classnames';\nimport {\n  DragOverlay,\n  DropAnimation,\n  Modifier,\n  defaultDropAnimation,\n  useDndContext,\n} from '@dnd-kit/core';\nimport { CSS } from '@dnd-kit/utilities';\nimport { getProjection, getChildCount } from './utilities';\nimport type { FlattenedItem, SensorContext } from './types';\nimport { SortableTreeItem } from './SortableTreeItem';\n\nconst dropAnimationConfig: DropAnimation = {\n  keyframes({ transform }) {\n    return [\n      { opacity: 1, transform: CSS.Transform.toString(transform.initial) },\n      {\n        opacity: 0,\n        transform: CSS.Transform.toString({\n          ...transform.final,\n          x: transform.final.x + 5,\n          y: transform.final.y + 5,\n        }),\n      },\n    ];\n  },\n  easing: 'ease-out',\n  sideEffects({ active }) {\n    active.node.animate([{ opacity: 0 }, { opacity: 1 }], {\n      duration: defaultDropAnimation.duration,\n      easing: defaultDropAnimation.easing,\n    });\n  },\n};\n\n// Used to track the offset for adjustToCursor\n// Once drag starts, set this. Once it ends, null this\nlet offsetY: number | null = null;\n\n/**\n * This adjusts the transform to move to the cursor if it gets shifted due to multi-select.\n * With multi-select, the selected items (except dragged) are removed on drag.\n * This can cause the overlay item to disconnect from the cursor in some cases.\n * E.g. select first 3 items, start dragging from 3rd item.\n * Without this modifier, the drag overlay will be shifted 60px up from the cursor after the items are removed.\n *\n * This assumes all items are the same height as the dragged item\n * @param args Modifier args from dnd-kit\n * @returns Transform so that the dragged item stays on the cursor\n */\nfunction adjustToCursor(args: Parameters<Modifier>[0]) {\n  if (\n    offsetY == null &&\n    args.activeNodeRect &&\n    args.activatorEvent instanceof PointerEvent\n  ) {\n    offsetY =\n      Math.floor(\n        (args.activatorEvent.clientY - args.activeNodeRect.top) /\n          args.activeNodeRect.height\n      ) * args.activeNodeRect.height;\n  }\n\n  if (!args.activeNodeRect) {\n    offsetY = null;\n  }\n\n  return { ...args.transform, y: args.transform.y + (offsetY ?? 0) };\n}\n\ninterface Props<T> {\n  items: FlattenedItem<T>[];\n  indentationWidth?: number;\n  indicator?: boolean;\n  renderItem(props: {\n    clone: boolean;\n    childCount?: number;\n    value: string;\n    item: FlattenedItem<T>;\n  }): JSX.Element;\n  activeId: string | null;\n  overId: string | null;\n  offsetLeft: number;\n}\n\nexport default function SortableTreeInner<T>({\n  items,\n  renderItem,\n  indentationWidth = 30,\n  indicator = false,\n  activeId,\n  overId,\n  offsetLeft,\n}: Props<T>): JSX.Element {\n  const context = useDndContext();\n  const contextRef = useRef(context);\n\n  useEffect(\n    function updateContextRef() {\n      contextRef.current = context;\n    },\n    [context]\n  );\n\n  // Without this, animations are funky when using the move/sort buttons\n  // dnd-kit only remeasures on drag/drop by default\n  // The context object changes while dragging (items don't)\n  // Using the context ref allows this to trigger properly on only items changes\n  useEffect(\n    function remeasureContainers() {\n      contextRef.current.measureDroppableContainers(items.map(({ id }) => id));\n    },\n    [items]\n  );\n\n  const projected =\n    activeId != null && overId != null\n      ? getProjection(items, activeId, overId, offsetLeft, indentationWidth)\n      : null;\n  const sensorContext: SensorContext = useRef({\n    items,\n    offset: offsetLeft,\n  });\n\n  const activeItem =\n    activeId != null ? items.find(({ id }) => id === activeId) : null;\n\n  useEffect(() => {\n    sensorContext.current = {\n      items,\n      offset: offsetLeft,\n    };\n  }, [items, offsetLeft]);\n\n  return (\n    <>\n      <div\n        className={classNames(\n          'tree-container',\n          activeId != null && 'marching-ants'\n        )}\n      >\n        {items.map(item => {\n          const { id, depth } = item;\n          return (\n            <SortableTreeItem\n              key={id}\n              id={id}\n              value={id}\n              depth={id === activeId && projected ? projected.depth : depth}\n              item={item}\n              renderItem={renderItem}\n            />\n          );\n        })}\n      </div>\n      {createPortal(\n        <DragOverlay\n          dropAnimation={dropAnimationConfig}\n          modifiers={[adjustToCursor]}\n          className=\"visibility-ordering-list\"\n        >\n          {activeId != null && activeItem ? (\n            <SortableTreeItem\n              id={activeId}\n              depth={activeItem.depth}\n              clone\n              childCount={getChildCount(items, activeId) + 1}\n              value={activeId.toString()}\n              renderItem={renderItem}\n              item={activeItem}\n            />\n          ) : null}\n        </DragOverlay>,\n        document.body\n      )}\n    </>\n  );\n}\n"],"mappings":"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"}

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

@@ -1,5 +1,4 @@
 var _excluded = ["id", "depth"];
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -12,6 +11,7 @@ import React, { useMemo } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { TreeItem } from "./TreeItem.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 var animateLayoutChanges = _ref => {
   var {
     isSorting,
@@ -46,7 +46,7 @@ export function SortableTreeItem(_ref2) {
   var handleProps = useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, attributes), listeners), {}, {
     style
   }), [attributes, listeners, style]);
-  return /*#__PURE__*/React.createElement(TreeItem, _extends({
+  return /*#__PURE__*/_jsx(TreeItem, _objectSpread({
     dragRef: setDraggableNodeRef,
     wrapperRef: setDroppableNodeRef,
     depth: depth,

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

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

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

@@ -2,6 +2,8 @@
 import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import "./TreeItem.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export function TreeItem(props) {
   var {
     clone = false,
@@ -18,10 +20,9 @@ export function TreeItem(props) {
   } = props;
   var depthMarkers = useMemo(() => Array(depth).fill(0)
   // eslint-disable-next-line react/no-array-index-key
-  .map((_, i) => /*#__PURE__*/React.createElement("span", {
-    key: "depth-line-".concat(i),
+  .map((_, i) => /*#__PURE__*/_jsx("span", {
     className: "depth-line"
-  })), [depth]);
+  }, "depth-line-".concat(i))), [depth]);
   var renderItemProps = useMemo(() => ({
     ref: dragRef,
     clone,
@@ -30,15 +31,15 @@ export function TreeItem(props) {
     childCount,
     handleProps
   }), [dragRef, clone, value, item, childCount, handleProps]);
-  return /*#__PURE__*/React.createElement("li", {
-    key: value,
+  return /*#__PURE__*/_jsxs("li", {
     className: classNames('item-wrapper', {
       clone,
       ghost,
       disableInteraction
     }),
-    ref: wrapperRef
-  }, !clone && depthMarkers, renderItem(renderItemProps));
+    ref: wrapperRef,
+    children: [!clone && depthMarkers, renderItem(renderItemProps)]
+  }, value);
 }
 TreeItem.displayName = 'TreeItem';
 //# sourceMappingURL=TreeItem.js.map

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/iris-grid",
-  "version": "0.46.1-beta.2+a1893756",
+  "version": "0.46.1-beta.7+d59e9bed",
   "description": "Deephaven Iris Grid",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
@@ -31,17 +31,17 @@
     "build:sass": "sass --embed-sources --load-path=../../node_modules ./src:./dist"
   },
   "dependencies": {
-    "@deephaven/components": "^0.46.1-beta.2+a1893756",
-    "@deephaven/console": "^0.46.1-beta.2+a1893756",
-    "@deephaven/filters": "^0.46.1-beta.2+a1893756",
-    "@deephaven/grid": "^0.46.1-beta.2+a1893756",
-    "@deephaven/icons": "^0.46.1-beta.2+a1893756",
-    "@deephaven/jsapi-types": "^0.46.1-beta.2+a1893756",
-    "@deephaven/jsapi-utils": "^0.46.1-beta.2+a1893756",
-    "@deephaven/log": "^0.46.1-beta.2+a1893756",
-    "@deephaven/react-hooks": "^0.46.1-beta.2+a1893756",
-    "@deephaven/storage": "^0.46.1-beta.2+a1893756",
-    "@deephaven/utils": "^0.46.1-beta.2+a1893756",
+    "@deephaven/components": "^0.46.1-beta.7+d59e9bed",
+    "@deephaven/console": "^0.46.1-beta.7+d59e9bed",
+    "@deephaven/filters": "^0.46.1-beta.7+d59e9bed",
+    "@deephaven/grid": "^0.46.1-beta.7+d59e9bed",
+    "@deephaven/icons": "^0.46.1-beta.7+d59e9bed",
+    "@deephaven/jsapi-types": "^0.46.1-beta.7+d59e9bed",
+    "@deephaven/jsapi-utils": "^0.46.1-beta.7+d59e9bed",
+    "@deephaven/log": "^0.46.1-beta.7+d59e9bed",
+    "@deephaven/react-hooks": "^0.46.1-beta.7+d59e9bed",
+    "@deephaven/storage": "^0.46.1-beta.7+d59e9bed",
+    "@deephaven/utils": "^0.46.1-beta.7+d59e9bed",
     "@dnd-kit/core": "^6.0.5",
     "@dnd-kit/sortable": "^7.0.0",
     "@dnd-kit/utilities": "^3.2.0",
@@ -64,8 +64,8 @@
     "react-dom": "^17.x"
   },
   "devDependencies": {
-    "@deephaven/jsapi-shim": "^0.46.1-beta.2+a1893756",
-    "@deephaven/mocks": "^0.46.1-beta.2+a1893756"
+    "@deephaven/jsapi-shim": "^0.46.1-beta.7+d59e9bed",
+    "@deephaven/mocks": "^0.46.1-beta.7+d59e9bed"
   },
   "files": [
     "dist"
@@ -76,5 +76,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a18937562f6e9ce2d62b27f79a60adc341a435e9"
+  "gitHead": "d59e9bed95152170626265a00ea27d716e1b2bcb"
 }