@deephaven/components 1.20.0 → 1.21.1

package/dist/AutoResizeTextarea.d.ts

@@ -12,7 +12,7 @@ interface AutoResizeTextareaProps {
 }
 /**
  * Makes a textarea that auto resizes based on contents, its height grows with new lines.
- * If a delimeter is set, such as " -" or " ", as used by jvm args or env vars
+ * If a delimiter is set, such as " -" or " ", as used by jvm args or env vars
  * then the field will also "explode" the value by the delimiter over new lines
  * on focus, and implode on blur. By default, it doesn't word wrap.
  */

package/dist/AutoResizeTextarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutoResizeTextarea.d.ts","sourceRoot":"","sources":["../src/AutoResizeTextarea.tsx"],"names":[],"mappings":"AAGA,OAAO,2BAA2B,CAAC;AAEnC,UAAU,uBAAuB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;GAKG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,SAAc,EACd,KAAK,EAAE,UAAU,EACjB,QAAQ,EACR,UAAkB,EAClB,WAAgB,EAChB,QAAgB,EAChB,SAAc,EACd,EAAO,EACP,aAAa,EAAE,UAAU,GAC1B,EAAE,uBAAuB,GAAG,GAAG,CAAC,OAAO,CA8GvC;AAED,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"AutoResizeTextarea.d.ts","sourceRoot":"","sources":["../src/AutoResizeTextarea.tsx"],"names":[],"mappings":"AAGA,OAAO,2BAA2B,CAAC;AAEnC,UAAU,uBAAuB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAqBD;;;;;GAKG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,SAAc,EACd,KAAK,EAAE,UAAU,EACjB,QAAQ,EACR,UAAkB,EAClB,WAAgB,EAChB,QAAgB,EAChB,SAAc,EACd,EAAO,EACP,aAAa,EAAE,UAAU,GAC1B,EAAE,uBAAuB,GAAG,GAAG,CAAC,OAAO,CAyGvC;AAED,eAAe,kBAAkB,CAAC"}

package/dist/AutoResizeTextarea.js

@@ -2,9 +2,21 @@ import React, { useState, useRef, useEffect } from 'react';
 import classNames from 'classnames';
 import "./AutoResizeTextarea.css";
 import { jsx as _jsx } from "react/jsx-runtime";
+function implode(input) {
+  return input.split('\n').map(string => string.trim()).filter(string => string) // remove empty strings (e.g. from trailing newlines)
+  .join(' ');
+}
+function explode(input, delimiter) {
+  // split by delimiter, commonly " " or " -"
+  // strip empty strings (if delimiter is space, and there are multiple spaces in a row)
+  // and join with new line and a trimmed delimiter (get rid of leading spaces)
+  return input.trim().split(delimiter).filter(string => string) // remove empty strings
+  .join("\n".concat(delimiter.trim()));
+}
+
 /**
  * Makes a textarea that auto resizes based on contents, its height grows with new lines.
- * If a delimeter is set, such as " -" or " ", as used by jvm args or env vars
+ * If a delimiter is set, such as " -" or " ", as used by jvm args or env vars
  * then the field will also "explode" the value by the delimiter over new lines
  * on focus, and implode on blur. By default, it doesn't word wrap.
  */
@@ -23,20 +35,18 @@ function AutoResizeTextarea(_ref) {
   var [value, setValue] = useState(propsValue);
   var [isPastedChange, setIsPastedChange] = useState(false);
   var element = useRef(null);
+  var isFocused = useRef(false);
+  var valueRef = useRef(value);
+  valueRef.current = value;
   useEffect(function syncStateWithProp() {
-    // keep state value in sync with prop changes
-    setValue(propsValue);
-  }, [propsValue]);
-  function explode(input) {
-    // split by delimiter, commonly " " or " -"
-    // strip empty strings (if delimiter is space, and there are multiple spaces in a row)
-    // and join with new line and a trimmed delimeter (get rid of leading spaces)
-    return input.trim().split(delimiter).filter(string => string) // remove empty strings
-    .join("\n".concat(delimiter.trim()));
-  }
-  function implode(input) {
-    return input.split('\n').map(string => string.trim()).join(' ');
-  }
+    if (!isFocused.current || !delimiter) {
+      // When not focused (or no delimiter), always sync to the new prop value.
+      setValue(propsValue);
+    } else if (implode(valueRef.current) !== implode(propsValue)) {
+      // When focused with delimiter, only update if the imploded value changed to prevent clobbering delimiters
+      setValue(explode(propsValue, delimiter));
+    }
+  }, [propsValue, delimiter]);
   function reCalculateLayout() {
     if (!element.current) {
       return;
@@ -49,18 +59,22 @@ function AutoResizeTextarea(_ref) {
   function handleChange(event) {
     var newValue = event.target.value;
     if (isPastedChange) {
-      if (delimiter) newValue = explode(newValue);
+      if (delimiter) newValue = explode(newValue, delimiter);
       setIsPastedChange(false);
     }
     setValue(newValue);
-    onChange(newValue);
+    // If there is a delimiter, the onChange value should always be the imploded version
+    // to prevent mismatch when exiting without triggering onBlur
+    // The exploded version is display only
+    onChange(delimiter ? implode(newValue) : newValue);
   }
   function handleFocus() {
     if (!element.current) {
       return;
     }
+    isFocused.current = true;
     if (delimiter) {
-      setValue(explode(value));
+      setValue(explode(value, delimiter));
       reCalculateLayout();
     }
     element.current.scrollLeft = 0;
@@ -76,6 +90,7 @@ function AutoResizeTextarea(_ref) {
     element.current.focus();
   }
   function handleBlur() {
+    isFocused.current = false;
     if (delimiter) {
       setValue(implode(value));
       onChange(implode(value));

package/dist/AutoResizeTextarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutoResizeTextarea.js","names":["React","useState","useRef","useEffect","classNames","jsx","_jsx","AutoResizeTextarea","_ref","className","value","propsValue","onChange","spellCheck","placeholder","disabled","delimiter","id","dataTestId","setValue","isPastedChange","setIsPastedChange","element","syncStateWithProp","explode","input","trim","split","filter","string","join","concat","implode","map","reCalculateLayout","current","style","height","resizedHeight","scrollHeight","offsetHeight","clientHeight","handleChange","event","newValue","target","handleFocus","scrollLeft","handleMouseDown","document","activeElement","focus","handleBlur","handlePaste","reCalculate","ref","rows","onFocus","onMouseDown","onBlur","onPaste"],"sources":["../src/AutoResizeTextarea.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\nimport classNames from 'classnames';\n\nimport './AutoResizeTextarea.scss';\n\ninterface AutoResizeTextareaProps {\n  value: string;\n  onChange: (val: string) => void;\n  className?: string;\n  spellCheck?: boolean;\n  placeholder?: string;\n  disabled?: boolean;\n  delimiter?: string;\n  id?: string;\n  'data-testid'?: string;\n}\n\n/**\n * Makes a textarea that auto resizes based on contents, its height grows with new lines.\n * If a delimeter is set, such as \" -\" or \" \", as used by jvm args or env vars\n * then the field will also \"explode\" the value by the delimiter over new lines\n * on focus, and implode on blur. By default, it doesn't word wrap.\n */\nfunction AutoResizeTextarea({\n  className = '',\n  value: propsValue,\n  onChange,\n  spellCheck = false,\n  placeholder = '',\n  disabled = false,\n  delimiter = '',\n  id = '',\n  'data-testid': dataTestId,\n}: AutoResizeTextareaProps): JSX.Element {\n  const [value, setValue] = useState(propsValue);\n  const [isPastedChange, setIsPastedChange] = useState(false);\n  const element = useRef<HTMLTextAreaElement>(null);\n\n  useEffect(\n    function syncStateWithProp() {\n      // keep state value in sync with prop changes\n      setValue(propsValue);\n    },\n    [propsValue]\n  );\n\n  function explode(input: string): string {\n    // split by delimiter, commonly \" \" or \" -\"\n    // strip empty strings (if delimiter is space, and there are multiple spaces in a row)\n    // and join with new line and a trimmed delimeter (get rid of leading spaces)\n    return input\n      .trim()\n      .split(delimiter)\n      .filter(string => string) // remove empty strings\n      .join(`\\n${delimiter.trim()}`);\n  }\n\n  function implode(input: string): string {\n    return input\n      .split('\\n')\n      .map(string => string.trim())\n      .join(' ');\n  }\n\n  function reCalculateLayout(): void {\n    if (!element.current) {\n      return;\n    }\n    element.current.style.height = '0'; // shrink component to get scrollHeight\n    const resizedHeight =\n      element.current.scrollHeight +\n      (element.current.offsetHeight - element.current.clientHeight);\n    // accounts for border, padding is captured by scroll height\n    if (resizedHeight > 0) element.current.style.height = `${resizedHeight}px`;\n  }\n\n  function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>): void {\n    let newValue = event.target.value;\n    if (isPastedChange) {\n      if (delimiter) newValue = explode(newValue);\n      setIsPastedChange(false);\n    }\n    setValue(newValue);\n    onChange(newValue);\n  }\n\n  function handleFocus(): void {\n    if (!element.current) {\n      return;\n    }\n    if (delimiter) {\n      setValue(explode(value));\n      reCalculateLayout();\n    }\n    element.current.scrollLeft = 0;\n    // scroll left as it can be disorienting if you click on a long line\n  }\n\n  // make it explode when dragging the resize handle\n  // by making it trigger focus (which normally doesn't\n  // trigger when just resizing).\n  function handleMouseDown(): void {\n    if (!element.current) return;\n    if (document.activeElement === element.current) return;\n    element.current.focus();\n  }\n\n  function handleBlur(): void {\n    if (delimiter) {\n      setValue(implode(value));\n      onChange(implode(value));\n    }\n  }\n\n  function handlePaste(): void {\n    setIsPastedChange(true);\n  }\n\n  useEffect(\n    function reCalculate() {\n      reCalculateLayout();\n    },\n    [value]\n  );\n\n  return (\n    <textarea\n      ref={element}\n      id={id}\n      className={classNames(className, 'auto-resize-textarea form-control')}\n      placeholder={placeholder}\n      value={value}\n      rows={1}\n      onChange={handleChange}\n      onFocus={handleFocus}\n      onMouseDown={handleMouseDown}\n      onBlur={handleBlur}\n      onPaste={handlePaste}\n      spellCheck={spellCheck}\n      disabled={disabled}\n      data-testid={dataTestId}\n    />\n  );\n}\n\nexport default AutoResizeTextarea;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"AutoResizeTextarea.js","names":["React","useState","useRef","useEffect","classNames","jsx","_jsx","implode","input","split","map","string","trim","filter","join","explode","delimiter","concat","AutoResizeTextarea","_ref","className","value","propsValue","onChange","spellCheck","placeholder","disabled","id","dataTestId","setValue","isPastedChange","setIsPastedChange","element","isFocused","valueRef","current","syncStateWithProp","reCalculateLayout","style","height","resizedHeight","scrollHeight","offsetHeight","clientHeight","handleChange","event","newValue","target","handleFocus","scrollLeft","handleMouseDown","document","activeElement","focus","handleBlur","handlePaste","reCalculate","ref","rows","onFocus","onMouseDown","onBlur","onPaste"],"sources":["../src/AutoResizeTextarea.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\nimport classNames from 'classnames';\n\nimport './AutoResizeTextarea.scss';\n\ninterface AutoResizeTextareaProps {\n  value: string;\n  onChange: (val: string) => void;\n  className?: string;\n  spellCheck?: boolean;\n  placeholder?: string;\n  disabled?: boolean;\n  delimiter?: string;\n  id?: string;\n  'data-testid'?: string;\n}\n\nfunction implode(input: string): string {\n  return input\n    .split('\\n')\n    .map(string => string.trim())\n    .filter(string => string) // remove empty strings (e.g. from trailing newlines)\n    .join(' ');\n}\n\nfunction explode(input: string, delimiter: string): string {\n  // split by delimiter, commonly \" \" or \" -\"\n  // strip empty strings (if delimiter is space, and there are multiple spaces in a row)\n  // and join with new line and a trimmed delimiter (get rid of leading spaces)\n  return input\n    .trim()\n    .split(delimiter)\n    .filter(string => string) // remove empty strings\n    .join(`\\n${delimiter.trim()}`);\n}\n\n/**\n * Makes a textarea that auto resizes based on contents, its height grows with new lines.\n * If a delimiter is set, such as \" -\" or \" \", as used by jvm args or env vars\n * then the field will also \"explode\" the value by the delimiter over new lines\n * on focus, and implode on blur. By default, it doesn't word wrap.\n */\nfunction AutoResizeTextarea({\n  className = '',\n  value: propsValue,\n  onChange,\n  spellCheck = false,\n  placeholder = '',\n  disabled = false,\n  delimiter = '',\n  id = '',\n  'data-testid': dataTestId,\n}: AutoResizeTextareaProps): JSX.Element {\n  const [value, setValue] = useState(propsValue);\n  const [isPastedChange, setIsPastedChange] = useState(false);\n  const element = useRef<HTMLTextAreaElement>(null);\n  const isFocused = useRef(false);\n  const valueRef = useRef(value);\n  valueRef.current = value;\n\n  useEffect(\n    function syncStateWithProp() {\n      if (!isFocused.current || !delimiter) {\n        // When not focused (or no delimiter), always sync to the new prop value.\n        setValue(propsValue);\n      } else if (implode(valueRef.current) !== implode(propsValue)) {\n        // When focused with delimiter, only update if the imploded value changed to prevent clobbering delimiters\n        setValue(explode(propsValue, delimiter));\n      }\n    },\n    [propsValue, delimiter]\n  );\n\n  function reCalculateLayout(): void {\n    if (!element.current) {\n      return;\n    }\n    element.current.style.height = '0'; // shrink component to get scrollHeight\n    const resizedHeight =\n      element.current.scrollHeight +\n      (element.current.offsetHeight - element.current.clientHeight);\n    // accounts for border, padding is captured by scroll height\n    if (resizedHeight > 0) element.current.style.height = `${resizedHeight}px`;\n  }\n\n  function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>): void {\n    let newValue = event.target.value;\n    if (isPastedChange) {\n      if (delimiter) newValue = explode(newValue, delimiter);\n      setIsPastedChange(false);\n    }\n    setValue(newValue);\n    // If there is a delimiter, the onChange value should always be the imploded version\n    // to prevent mismatch when exiting without triggering onBlur\n    // The exploded version is display only\n    onChange(delimiter ? implode(newValue) : newValue);\n  }\n\n  function handleFocus(): void {\n    if (!element.current) {\n      return;\n    }\n    isFocused.current = true;\n    if (delimiter) {\n      setValue(explode(value, delimiter));\n      reCalculateLayout();\n    }\n    element.current.scrollLeft = 0;\n    // scroll left as it can be disorienting if you click on a long line\n  }\n\n  // make it explode when dragging the resize handle\n  // by making it trigger focus (which normally doesn't\n  // trigger when just resizing).\n  function handleMouseDown(): void {\n    if (!element.current) return;\n    if (document.activeElement === element.current) return;\n    element.current.focus();\n  }\n\n  function handleBlur(): void {\n    isFocused.current = false;\n    if (delimiter) {\n      setValue(implode(value));\n      onChange(implode(value));\n    }\n  }\n\n  function handlePaste(): void {\n    setIsPastedChange(true);\n  }\n\n  useEffect(\n    function reCalculate() {\n      reCalculateLayout();\n    },\n    [value]\n  );\n\n  return (\n    <textarea\n      ref={element}\n      id={id}\n      className={classNames(className, 'auto-resize-textarea form-control')}\n      placeholder={placeholder}\n      value={value}\n      rows={1}\n      onChange={handleChange}\n      onFocus={handleFocus}\n      onMouseDown={handleMouseDown}\n      onBlur={handleBlur}\n      onPaste={handlePaste}\n      spellCheck={spellCheck}\n      disabled={disabled}\n      data-testid={dataTestId}\n    />\n  );\n}\n\nexport default AutoResizeTextarea;\n"],"mappings":"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","ignoreList":[]}

package/dist/dialogs/ActionButtonDialogTrigger.d.ts

@@ -1,7 +1,7 @@
 import { type ReactElement } from 'react';
-import type { SpectrumDialogClose } from '@react-types/dialog';
 import type { StyleProps } from '@react-types/shared';
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types';
+import { type SpectrumDialogClose } from '../spectrum';
 export interface ActionButtonDialogTriggerProps extends StyleProps {
     icon: IconDefinition;
     isQuiet?: boolean;

package/dist/dialogs/ActionButtonDialogTrigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButtonDialogTrigger.d.ts","sourceRoot":"","sources":["../../src/dialogs/ActionButtonDialogTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAK5E,MAAM,WAAW,8BAA+B,SAAQ,UAAU;IAChE,IAAI,EAAE,cAAc,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,mBAAmB,GAAG,YAAY,CAAC;IAC7C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,SAAS,EACT,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,OAAO,EACP,GAAG,UAAU,EACd,EAAE,8BAA8B,GAAG,GAAG,CAAC,OAAO,CAuB9C;AAED,eAAe,yBAAyB,CAAC"}
+{"version":3,"file":"ActionButtonDialogTrigger.d.ts","sourceRoot":"","sources":["../../src/dialogs/ActionButtonDialogTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAE5E,OAAO,EAKL,KAAK,mBAAmB,EACzB,MAAM,aAAa,CAAC;AAGrB,MAAM,WAAW,8BAA+B,SAAQ,UAAU;IAChE,IAAI,EAAE,cAAc,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,mBAAmB,GAAG,YAAY,CAAC;IAC7C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,SAAS,EACT,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,OAAO,EACP,GAAG,UAAU,EACd,EAAE,8BAA8B,GAAG,GAAG,CAAC,OAAO,CAuB9C;AAED,eAAe,yBAAyB,CAAC"}

package/dist/dialogs/ActionButtonDialogTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButtonDialogTrigger.js","names":["FontAwesomeIcon","ActionButton","DialogTrigger","Icon","Text","Tooltip","jsx","_jsx","jsxs","_jsxs","ActionButtonDialogTrigger","_ref","ariaLabel","icon","isQuiet","labelText","children","onOpenChange","tooltip","styleProps","_objectWithoutProperties","_excluded","iconClassName","undefined","type","_objectSpread","UNSAFE_className"],"sources":["../../src/dialogs/ActionButtonDialogTrigger.tsx"],"sourcesContent":["import { type ReactElement } from 'react';\nimport type { SpectrumDialogClose } from '@react-types/dialog';\nimport type { StyleProps } from '@react-types/shared';\nimport type { IconDefinition } from '@fortawesome/fontawesome-common-types';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { ActionButton, DialogTrigger, Icon, Text } from '../spectrum';\nimport { Tooltip } from '../popper';\n\nexport interface ActionButtonDialogTriggerProps extends StyleProps {\n  icon: IconDefinition;\n  isQuiet?: boolean;\n  labelText?: string;\n  ariaLabel?: string;\n  tooltip?: string;\n  children: SpectrumDialogClose | ReactElement;\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\n/**\n * Dialog trigger based on an ActionButton.\n */\nexport function ActionButtonDialogTrigger({\n  ariaLabel,\n  icon,\n  isQuiet,\n  labelText,\n  children,\n  onOpenChange,\n  tooltip,\n  ...styleProps\n}: ActionButtonDialogTriggerProps): JSX.Element {\n  const iconClassName =\n    labelText == null && tooltip != null\n      ? 'action-button-icon-with-tooltip'\n      : undefined;\n\n  return (\n    <DialogTrigger type=\"popover\" onOpenChange={onOpenChange}>\n      <ActionButton\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...styleProps}\n        aria-label={ariaLabel ?? labelText}\n        isQuiet={isQuiet}\n      >\n        <Icon UNSAFE_className={iconClassName}>\n          <FontAwesomeIcon icon={icon} />\n        </Icon>\n        {labelText == null ? null : <Text>{labelText}</Text>}\n        {tooltip == null ? null : <Tooltip>{tooltip}</Tooltip>}\n      </ActionButton>\n      {children}\n    </DialogTrigger>\n  );\n}\n\nexport default ActionButtonDialogTrigger;\n"],"mappings":";;;;;;;;AAIA,SAASA,eAAe,QAAQ,gCAAgC;AAAC,SACxDC,YAAY,EAAEC,aAAa,EAAEC,IAAI,EAAEC,IAAI;AAAA,SACvCC,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAYhB;AACA;AACA;AACA,OAAO,SAASC,yBAAyBA,CAAAC,IAAA,EASO;EAAA,IATN;MACxCC,SAAS;MACTC,IAAI;MACJC,OAAO;MACPC,SAAS;MACTC,QAAQ;MACRC,YAAY;MACZC;IAE8B,CAAC,GAAAP,IAAA;IAD5BQ,UAAU,GAAAC,wBAAA,CAAAT,IAAA,EAAAU,SAAA;EAEb,IAAMC,aAAa,GACjBP,SAAS,IAAI,IAAI,IAAIG,OAAO,IAAI,IAAI,GAChC,iCAAiC,GACjCK,SAAS;EAEf,oBACEd,KAAA,CAACP,aAAa;IAACsB,IAAI,EAAC,SAAS;IAACP,YAAY,EAAEA,YAAa;IAAAD,QAAA,gBACvDP,KAAA,CAACR;IACC;IAAA,EAAAwB,aAAA,CAAAA,aAAA,KACIN,UAAU;MACd,cAAYP,SAAS,aAATA,SAAS,cAATA,SAAS,GAAIG,SAAU;MACnCD,OAAO,EAAEA,OAAQ;MAAAE,QAAA,gBAEjBT,IAAA,CAACJ,IAAI;QAACuB,gBAAgB,EAAEJ,aAAc;QAAAN,QAAA,eACpCT,IAAA,CAACP,eAAe;UAACa,IAAI,EAAEA;QAAK,CAAE;MAAC,CAC3B,CAAC,EACNE,SAAS,IAAI,IAAI,GAAG,IAAI,gBAAGR,IAAA,CAACH,IAAI;QAAAY,QAAA,EAAED;MAAS,CAAO,CAAC,EACnDG,OAAO,IAAI,IAAI,GAAG,IAAI,gBAAGX,IAAA,CAACF,OAAO;QAAAW,QAAA,EAAEE;MAAO,CAAU,CAAC;IAAA,EAC1C,CAAC,EACdF,QAAQ;EAAA,CACI,CAAC;AAEpB;AAEA,eAAeN,yBAAyB","ignoreList":[]}
+{"version":3,"file":"ActionButtonDialogTrigger.js","names":["FontAwesomeIcon","ActionButton","DialogTrigger","Icon","Text","Tooltip","jsx","_jsx","jsxs","_jsxs","ActionButtonDialogTrigger","_ref","ariaLabel","icon","isQuiet","labelText","children","onOpenChange","tooltip","styleProps","_objectWithoutProperties","_excluded","iconClassName","undefined","type","_objectSpread","UNSAFE_className"],"sources":["../../src/dialogs/ActionButtonDialogTrigger.tsx"],"sourcesContent":["import { type ReactElement } from 'react';\nimport type { StyleProps } from '@react-types/shared';\nimport type { IconDefinition } from '@fortawesome/fontawesome-common-types';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport {\n  ActionButton,\n  DialogTrigger,\n  Icon,\n  Text,\n  type SpectrumDialogClose,\n} from '../spectrum';\nimport { Tooltip } from '../popper';\n\nexport interface ActionButtonDialogTriggerProps extends StyleProps {\n  icon: IconDefinition;\n  isQuiet?: boolean;\n  labelText?: string;\n  ariaLabel?: string;\n  tooltip?: string;\n  children: SpectrumDialogClose | ReactElement;\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\n/**\n * Dialog trigger based on an ActionButton.\n */\nexport function ActionButtonDialogTrigger({\n  ariaLabel,\n  icon,\n  isQuiet,\n  labelText,\n  children,\n  onOpenChange,\n  tooltip,\n  ...styleProps\n}: ActionButtonDialogTriggerProps): JSX.Element {\n  const iconClassName =\n    labelText == null && tooltip != null\n      ? 'action-button-icon-with-tooltip'\n      : undefined;\n\n  return (\n    <DialogTrigger type=\"popover\" onOpenChange={onOpenChange}>\n      <ActionButton\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...styleProps}\n        aria-label={ariaLabel ?? labelText}\n        isQuiet={isQuiet}\n      >\n        <Icon UNSAFE_className={iconClassName}>\n          <FontAwesomeIcon icon={icon} />\n        </Icon>\n        {labelText == null ? null : <Text>{labelText}</Text>}\n        {tooltip == null ? null : <Tooltip>{tooltip}</Tooltip>}\n      </ActionButton>\n      {children}\n    </DialogTrigger>\n  );\n}\n\nexport default ActionButtonDialogTrigger;\n"],"mappings":";;;;;;;;AAGA,SAASA,eAAe,QAAQ,gCAAgC;AAAC,SAE/DC,YAAY,EACZC,aAAa,EACbC,IAAI,EACJC,IAAI;AAAA,SAGGC,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAYhB;AACA;AACA;AACA,OAAO,SAASC,yBAAyBA,CAAAC,IAAA,EASO;EAAA,IATN;MACxCC,SAAS;MACTC,IAAI;MACJC,OAAO;MACPC,SAAS;MACTC,QAAQ;MACRC,YAAY;MACZC;IAE8B,CAAC,GAAAP,IAAA;IAD5BQ,UAAU,GAAAC,wBAAA,CAAAT,IAAA,EAAAU,SAAA;EAEb,IAAMC,aAAa,GACjBP,SAAS,IAAI,IAAI,IAAIG,OAAO,IAAI,IAAI,GAChC,iCAAiC,GACjCK,SAAS;EAEf,oBACEd,KAAA,CAACP,aAAa;IAACsB,IAAI,EAAC,SAAS;IAACP,YAAY,EAAEA,YAAa;IAAAD,QAAA,gBACvDP,KAAA,CAACR;IACC;IAAA,EAAAwB,aAAA,CAAAA,aAAA,KACIN,UAAU;MACd,cAAYP,SAAS,aAATA,SAAS,cAATA,SAAS,GAAIG,SAAU;MACnCD,OAAO,EAAEA,OAAQ;MAAAE,QAAA,gBAEjBT,IAAA,CAACJ,IAAI;QAACuB,gBAAgB,EAAEJ,aAAc;QAAAN,QAAA,eACpCT,IAAA,CAACP,eAAe;UAACa,IAAI,EAAEA;QAAK,CAAE;MAAC,CAC3B,CAAC,EACNE,SAAS,IAAI,IAAI,GAAG,IAAI,gBAAGR,IAAA,CAACH,IAAI;QAAAY,QAAA,EAAED;MAAS,CAAO,CAAC,EACnDG,OAAO,IAAI,IAAI,GAAG,IAAI,gBAAGX,IAAA,CAACF,OAAO;QAAAW,QAAA,EAAEE;MAAO,CAAU,CAAC;IAAA,EAC1C,CAAC,EACdF,QAAQ;EAAA,CACI,CAAC;AAEpB;AAEA,eAAeN,yBAAyB","ignoreList":[]}

package/dist/spectrum/comboBox/ComboBox.d.ts

@@ -6,7 +6,7 @@ export type ComboBoxProps = PickerPropsT<SpectrumComboBoxProps<NormalizedItem>>;
 export type { MenuTriggerAction } from '@react-types/combobox';
 export { SpectrumComboBox };
 export declare const ComboBox: React.ForwardRefExoticComponent<Omit<SpectrumComboBoxProps<NormalizedItem>, "children" | "items" | "selectedKey" | "defaultSelectedKey" | "disabledKeys" | "onSelectionChange" | "defaultItems"> & {
-    children: import("../utils").ItemOrSection | import("../utils").ItemOrSection[];
+    children?: import("../utils").ItemOrSection | import("../utils").ItemOrSection[] | null | undefined;
     tooltip?: boolean | import("../utils").TooltipOptions;
     selectedKey?: import("../utils").ItemKey | null;
     defaultSelectedKey?: import("../utils").ItemKey;

package/dist/spectrum/index.d.ts

@@ -21,6 +21,7 @@ export * from './comboBox';
 export * from './ListActionGroup';
 export * from './ListActionMenu';
 export * from './listView';
+export * from './multiSelect';
 export * from './picker';
 export * from './Heading';
 export * from './Text';

package/dist/spectrum/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/spectrum/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AAEzB;;GAEG;AACH,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAEhC;;GAEG;AACH,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/spectrum/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AAEzB;;GAEG;AACH,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAEhC;;GAEG;AACH,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC"}

package/dist/spectrum/index.js

@@ -21,6 +21,7 @@ export * from "./comboBox/index.js";
 export * from "./ListActionGroup.js";
 export * from "./ListActionMenu.js";
 export * from "./listView/index.js";
+export * from "./multiSelect/index.js";
 export * from "./picker/index.js";
 export * from "./Heading.js";
 export * from "./Text.js";

package/dist/spectrum/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/spectrum/index.ts"],"sourcesContent":["/**\n * Re-exporting React Spectrum components + props.\n */\nexport * from './buttons';\nexport * from './collections';\nexport * from './content';\nexport * from './dateAndTime';\nexport * from './forms';\nexport * from './icons';\nexport * from './layout';\nexport * from './navigation';\nexport * from './overlays';\nexport * from './shared';\nexport * from './status';\n\n/**\n * Custom DH components wrapping React Spectrum components.\n */\nexport * from './ActionMenu';\nexport * from './ActionGroup';\nexport * from './comboBox';\nexport * from './ListActionGroup';\nexport * from './ListActionMenu';\nexport * from './listView';\nexport * from './picker';\nexport * from './Heading';\nexport * from './Text';\nexport * from './View';\nexport * from './CheckboxGroup';\n\n/**\n * Custom DH spectrum utils\n */\nexport * from './ItemContent';\nexport * from './ItemTooltip';\nexport * from './utils';\n"],"mappings":"AAAA;AACA;AACA;AAFA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeA;AACA;AACA;AAFA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeA;AACA;AACA;AAFA;AAAA;AAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/spectrum/index.ts"],"sourcesContent":["/**\n * Re-exporting React Spectrum components + props.\n */\nexport * from './buttons';\nexport * from './collections';\nexport * from './content';\nexport * from './dateAndTime';\nexport * from './forms';\nexport * from './icons';\nexport * from './layout';\nexport * from './navigation';\nexport * from './overlays';\nexport * from './shared';\nexport * from './status';\n\n/**\n * Custom DH components wrapping React Spectrum components.\n */\nexport * from './ActionMenu';\nexport * from './ActionGroup';\nexport * from './comboBox';\nexport * from './ListActionGroup';\nexport * from './ListActionMenu';\nexport * from './listView';\nexport * from './multiSelect';\nexport * from './picker';\nexport * from './Heading';\nexport * from './Text';\nexport * from './View';\nexport * from './CheckboxGroup';\n\n/**\n * Custom DH spectrum utils\n */\nexport * from './ItemContent';\nexport * from './ItemTooltip';\nexport * from './utils';\n"],"mappings":"AAAA;AACA;AACA;AAFA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeA;AACA;AACA;AAFA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBA;AACA;AACA;AAFA;AAAA;AAAA","ignoreList":[]}

package/dist/spectrum/listView/ListView.d.ts

@@ -2,7 +2,7 @@ import { type SpectrumListViewProps } from '@adobe/react-spectrum';
 import { type MultipleItemSelectionProps, type NormalizedItem, type TooltipOptions } from '../utils';
 import { type ItemElementOrPrimitive } from '../shared';
 export type ListViewProps = MultipleItemSelectionProps & {
-    children: ItemElementOrPrimitive | ItemElementOrPrimitive[];
+    children?: ItemElementOrPrimitive | ItemElementOrPrimitive[] | null | undefined;
     /** Can be set to true or a TooltipOptions to enable item tooltips */
     tooltip?: boolean | TooltipOptions;
     /** Handler that is called when the picker is scrolled. */

package/dist/spectrum/listView/ListView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../../src/spectrum/listView/ListView.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAGnE,OAAO,EACL,KAAK,0BAA0B,EAC/B,KAAK,cAAc,EAEnB,KAAK,cAAc,EAEpB,MAAM,UAAU,CAAC;AAElB,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,WAAW,CAAC;AAExD,MAAM,MAAM,aAAa,GAAG,0BAA0B,GAAG;IACvD,QAAQ,EAAE,sBAAsB,GAAG,sBAAsB,EAAE,CAAC;IAC5D,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC;IAEnC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACnC,GAAG,IAAI,CACJ,qBAAqB,CAAC,cAAc,CAAC,EACnC,UAAU,GACV,OAAO,GACP,cAAc,GACd,qBAAqB,GACrB,cAAc,GACd,mBAAmB,CACtB,CAAC;AAEJ,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,OAAc,EACd,YAAY,EACZ,mBAAmB,EACnB,YAAY,EACZ,gBAAgB,EAChB,QAAQ,EACR,QAAyB,EACzB,iBAAiB,EACjB,GAAG,qBAAqB,EACzB,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA+BpC;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../../src/spectrum/listView/ListView.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAGnE,OAAO,EACL,KAAK,0BAA0B,EAC/B,KAAK,cAAc,EAEnB,KAAK,cAAc,EAEpB,MAAM,UAAU,CAAC;AAElB,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,WAAW,CAAC;AAExD,MAAM,MAAM,aAAa,GAAG,0BAA0B,GAAG;IACvD,QAAQ,CAAC,EACL,sBAAsB,GACtB,sBAAsB,EAAE,GACxB,IAAI,GACJ,SAAS,CAAC;IACd,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC;IAEnC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACnC,GAAG,IAAI,CACJ,qBAAqB,CAAC,cAAc,CAAC,EACnC,UAAU,GACV,OAAO,GACP,cAAc,GACd,qBAAqB,GACrB,cAAc,GACd,mBAAmB,CACtB,CAAC;AAEJ,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,OAAc,EACd,YAAY,EACZ,mBAAmB,EACnB,YAAY,EACZ,gBAAgB,EAChB,QAAQ,EACR,QAAyB,EACzB,iBAAiB,EACjB,GAAG,qBAAqB,EACzB,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA+BpC;AAED,eAAe,QAAQ,CAAC"}

package/dist/spectrum/listView/ListView.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListView.js","names":["useMemo","cl","EMPTY_FUNCTION","normalizeTooltipOptions","wrapItemChildren","ListViewWrapper","jsx","_jsx","ListView","_ref","children","tooltip","selectedKeys","defaultSelectedKeys","disabledKeys","UNSAFE_className","onChange","onScroll","onSelectionChange","spectrumListViewProps","_objectWithoutProperties","_excluded","tooltipOptions","wrappedItems","_objectSpread"],"sources":["../../../src/spectrum/listView/ListView.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { type SpectrumListViewProps } from '@adobe/react-spectrum';\nimport cl from 'classnames';\nimport { EMPTY_FUNCTION } from '@deephaven/utils';\nimport {\n  type MultipleItemSelectionProps,\n  type NormalizedItem,\n  normalizeTooltipOptions,\n  type TooltipOptions,\n  wrapItemChildren,\n} from '../utils';\nimport { ListViewWrapper, type ListViewWrapperProps } from './ListViewWrapper';\nimport { type ItemElementOrPrimitive } from '../shared';\n\nexport type ListViewProps = MultipleItemSelectionProps & {\n  children: ItemElementOrPrimitive | ItemElementOrPrimitive[];\n  /** Can be set to true or a TooltipOptions to enable item tooltips */\n  tooltip?: boolean | TooltipOptions;\n\n  /** Handler that is called when the picker is scrolled. */\n  onScroll?: (event: Event) => void;\n} & Omit<\n    SpectrumListViewProps<NormalizedItem>,\n    | 'children'\n    | 'items'\n    | 'selectedKeys'\n    | 'defaultSelectedKeys'\n    | 'disabledKeys'\n    | 'onSelectionChange'\n  >;\n\nexport function ListView({\n  children,\n  tooltip = true,\n  selectedKeys,\n  defaultSelectedKeys,\n  disabledKeys,\n  UNSAFE_className,\n  onChange,\n  onScroll = EMPTY_FUNCTION,\n  onSelectionChange,\n  ...spectrumListViewProps\n}: ListViewProps): JSX.Element | null {\n  const tooltipOptions = useMemo(\n    () => normalizeTooltipOptions(tooltip, 'bottom'),\n    [tooltip]\n  );\n\n  const wrappedItems = useMemo(\n    () => wrapItemChildren(children, tooltipOptions),\n    [children, tooltipOptions]\n  );\n\n  return (\n    <ListViewWrapper\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...spectrumListViewProps}\n      UNSAFE_className={cl('dh-list-view', UNSAFE_className)}\n      selectedKeys={\n        selectedKeys as ListViewWrapperProps<unknown>['selectedKeys']\n      }\n      defaultSelectedKeys={\n        defaultSelectedKeys as ListViewWrapperProps<unknown>['defaultSelectedKeys']\n      }\n      disabledKeys={\n        disabledKeys as ListViewWrapperProps<unknown>['disabledKeys']\n      }\n      onScroll={onScroll}\n      onSelectionChange={onChange ?? onSelectionChange}\n    >\n      {wrappedItems}\n    </ListViewWrapper>\n  );\n}\n\nexport default ListView;\n"],"mappings":";;;;;;;;AAAA,SAASA,OAAO,QAAQ,OAAO;AAE/B,OAAOC,EAAE,MAAM,YAAY;AAC3B,SAASC,cAAc,QAAQ,kBAAkB;AAAC,SAIhDC,uBAAuB,EAEvBC,gBAAgB;AAAA,SAETC,eAAe;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAoBxB,OAAO,SAASC,QAAQA,CAAAC,IAAA,EAWc;EAAA,IAXb;MACvBC,QAAQ;MACRC,OAAO,GAAG,IAAI;MACdC,YAAY;MACZC,mBAAmB;MACnBC,YAAY;MACZC,gBAAgB;MAChBC,QAAQ;MACRC,QAAQ,GAAGf,cAAc;MACzBgB;IAEa,CAAC,GAAAT,IAAA;IADXU,qBAAqB,GAAAC,wBAAA,CAAAX,IAAA,EAAAY,SAAA;EAExB,IAAMC,cAAc,GAAGtB,OAAO,CAC5B,MAAMG,uBAAuB,CAACQ,OAAO,EAAE,QAAQ,CAAC,EAChD,CAACA,OAAO,CACV,CAAC;EAED,IAAMY,YAAY,GAAGvB,OAAO,CAC1B,MAAMI,gBAAgB,CAACM,QAAQ,EAAEY,cAAc,CAAC,EAChD,CAACZ,QAAQ,EAAEY,cAAc,CAC3B,CAAC;EAED,oBACEf,IAAA,CAACF;EACC;EAAA,EAAAmB,aAAA,CAAAA,aAAA,KACIL,qBAAqB;IACzBJ,gBAAgB,EAAEd,EAAE,CAAC,cAAc,EAAEc,gBAAgB,CAAE;IACvDH,YAAY,EACVA,YACD;IACDC,mBAAmB,EACjBA,mBACD;IACDC,YAAY,EACVA,YACD;IACDG,QAAQ,EAAEA,QAAS;IACnBC,iBAAiB,EAAEF,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAIE,iBAAkB;IAAAR,QAAA,EAEhDa;EAAY,EACE,CAAC;AAEtB;AAEA,eAAef,QAAQ","ignoreList":[]}
+{"version":3,"file":"ListView.js","names":["useMemo","cl","EMPTY_FUNCTION","normalizeTooltipOptions","wrapItemChildren","ListViewWrapper","jsx","_jsx","ListView","_ref","children","tooltip","selectedKeys","defaultSelectedKeys","disabledKeys","UNSAFE_className","onChange","onScroll","onSelectionChange","spectrumListViewProps","_objectWithoutProperties","_excluded","tooltipOptions","wrappedItems","_objectSpread"],"sources":["../../../src/spectrum/listView/ListView.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { type SpectrumListViewProps } from '@adobe/react-spectrum';\nimport cl from 'classnames';\nimport { EMPTY_FUNCTION } from '@deephaven/utils';\nimport {\n  type MultipleItemSelectionProps,\n  type NormalizedItem,\n  normalizeTooltipOptions,\n  type TooltipOptions,\n  wrapItemChildren,\n} from '../utils';\nimport { ListViewWrapper, type ListViewWrapperProps } from './ListViewWrapper';\nimport { type ItemElementOrPrimitive } from '../shared';\n\nexport type ListViewProps = MultipleItemSelectionProps & {\n  children?:\n    | ItemElementOrPrimitive\n    | ItemElementOrPrimitive[]\n    | null\n    | undefined;\n  /** Can be set to true or a TooltipOptions to enable item tooltips */\n  tooltip?: boolean | TooltipOptions;\n\n  /** Handler that is called when the picker is scrolled. */\n  onScroll?: (event: Event) => void;\n} & Omit<\n    SpectrumListViewProps<NormalizedItem>,\n    | 'children'\n    | 'items'\n    | 'selectedKeys'\n    | 'defaultSelectedKeys'\n    | 'disabledKeys'\n    | 'onSelectionChange'\n  >;\n\nexport function ListView({\n  children,\n  tooltip = true,\n  selectedKeys,\n  defaultSelectedKeys,\n  disabledKeys,\n  UNSAFE_className,\n  onChange,\n  onScroll = EMPTY_FUNCTION,\n  onSelectionChange,\n  ...spectrumListViewProps\n}: ListViewProps): JSX.Element | null {\n  const tooltipOptions = useMemo(\n    () => normalizeTooltipOptions(tooltip, 'bottom'),\n    [tooltip]\n  );\n\n  const wrappedItems = useMemo(\n    () => wrapItemChildren(children, tooltipOptions),\n    [children, tooltipOptions]\n  );\n\n  return (\n    <ListViewWrapper\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...spectrumListViewProps}\n      UNSAFE_className={cl('dh-list-view', UNSAFE_className)}\n      selectedKeys={\n        selectedKeys as ListViewWrapperProps<unknown>['selectedKeys']\n      }\n      defaultSelectedKeys={\n        defaultSelectedKeys as ListViewWrapperProps<unknown>['defaultSelectedKeys']\n      }\n      disabledKeys={\n        disabledKeys as ListViewWrapperProps<unknown>['disabledKeys']\n      }\n      onScroll={onScroll}\n      onSelectionChange={onChange ?? onSelectionChange}\n    >\n      {wrappedItems}\n    </ListViewWrapper>\n  );\n}\n\nexport default ListView;\n"],"mappings":";;;;;;;;AAAA,SAASA,OAAO,QAAQ,OAAO;AAE/B,OAAOC,EAAE,MAAM,YAAY;AAC3B,SAASC,cAAc,QAAQ,kBAAkB;AAAC,SAIhDC,uBAAuB,EAEvBC,gBAAgB;AAAA,SAETC,eAAe;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAwBxB,OAAO,SAASC,QAAQA,CAAAC,IAAA,EAWc;EAAA,IAXb;MACvBC,QAAQ;MACRC,OAAO,GAAG,IAAI;MACdC,YAAY;MACZC,mBAAmB;MACnBC,YAAY;MACZC,gBAAgB;MAChBC,QAAQ;MACRC,QAAQ,GAAGf,cAAc;MACzBgB;IAEa,CAAC,GAAAT,IAAA;IADXU,qBAAqB,GAAAC,wBAAA,CAAAX,IAAA,EAAAY,SAAA;EAExB,IAAMC,cAAc,GAAGtB,OAAO,CAC5B,MAAMG,uBAAuB,CAACQ,OAAO,EAAE,QAAQ,CAAC,EAChD,CAACA,OAAO,CACV,CAAC;EAED,IAAMY,YAAY,GAAGvB,OAAO,CAC1B,MAAMI,gBAAgB,CAACM,QAAQ,EAAEY,cAAc,CAAC,EAChD,CAACZ,QAAQ,EAAEY,cAAc,CAC3B,CAAC;EAED,oBACEf,IAAA,CAACF;EACC;EAAA,EAAAmB,aAAA,CAAAA,aAAA,KACIL,qBAAqB;IACzBJ,gBAAgB,EAAEd,EAAE,CAAC,cAAc,EAAEc,gBAAgB,CAAE;IACvDH,YAAY,EACVA,YACD;IACDC,mBAAmB,EACjBA,mBACD;IACDC,YAAY,EACVA,YACD;IACDG,QAAQ,EAAEA,QAAS;IACnBC,iBAAiB,EAAEF,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAIE,iBAAkB;IAAAR,QAAA,EAEhDa;EAAY,EACE,CAAC;AAEtB;AAEA,eAAef,QAAQ","ignoreList":[]}

package/dist/spectrum/multiSelect/MultiSelect.css

@@ -0,0 +1,326 @@
+/* stylelint-disable no-descending-specificity */
+.dh-multi-select-trigger {
+  display: flex;
+  align-items: stretch;
+  border: none;
+  border-radius: var(--spectrum-alias-border-radius-regular, 4px);
+  background-color: var(--dh-color-input-bg);
+  color: var(--dh-color-input-fg);
+  cursor: pointer;
+  outline: none;
+  position: relative;
+  min-height: var(--spectrum-alias-single-line-height, var(--spectrum-global-dimension-size-400, 32px));
+}
+.dh-multi-select-trigger::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border: 1px solid var(--dh-color-input-border);
+  border-radius: var(--spectrum-alias-border-radius-regular, 4px);
+  pointer-events: none;
+  transition: border-color 130ms ease-in-out;
+}
+.dh-multi-select-trigger:hover:not(.is-disabled):not(.is-read-only):not(.is-focused)::after {
+  border-color: var(--dh-color-input-hover-border);
+}
+.dh-multi-select-trigger:hover:not(.is-disabled):not(.is-read-only):not(.is-focused) .dh-multi-select-chevron {
+  color: var(--dh-color-selector-hover-fg);
+  background-color: var(--dh-color-selector-hover-bg);
+}
+.dh-multi-select-trigger:hover:not(.is-disabled):not(.is-read-only):not(.is-focused) .dh-multi-select-chevron::before {
+  border-left-color: var(--dh-color-input-hover-border);
+}
+.dh-multi-select-trigger.is-focused::after {
+  border-color: var(--dh-color-input-focus-border);
+}
+.dh-multi-select-trigger.is-focused .dh-multi-select-chevron:not(.is-open) {
+  background-color: var(--dh-color-selector-hover-bg);
+}
+.dh-multi-select-trigger.is-focused .dh-multi-select-chevron:not(.is-open)::before {
+  border-left-color: var(--dh-color-input-focus-border);
+}
+.dh-multi-select-trigger.focus-ring {
+  box-shadow: 0 0 0 1px var(--dh-color-input-focus-border);
+}
+.dh-multi-select-trigger.is-invalid::after {
+  border-color: var(--spectrum-textfield-border-color-error, var(--spectrum-red-900));
+}
+.dh-multi-select-trigger.is-invalid .dh-multi-select-chevron::before {
+  border-left-color: var(--spectrum-textfield-border-color-error, var(--spectrum-red-900));
+}
+.dh-multi-select-trigger.is-invalid:hover:not(.is-disabled):not(.is-read-only):not(.is-focused)::after {
+  border-color: var(--spectrum-textfield-border-color-error-hover, var(--spectrum-red-1000));
+}
+.dh-multi-select-trigger.is-invalid:hover:not(.is-disabled):not(.is-read-only):not(.is-focused) .dh-multi-select-chevron::before {
+  border-left-color: var(--spectrum-textfield-border-color-error-hover, var(--spectrum-red-1000));
+}
+.dh-multi-select-trigger.is-invalid:active:not(.is-disabled):not(.is-read-only)::after {
+  border-color: var(--spectrum-textfield-border-color-error-down, var(--spectrum-red-1100));
+}
+.dh-multi-select-trigger.is-invalid:active:not(.is-disabled):not(.is-read-only) .dh-multi-select-chevron::before {
+  border-left-color: var(--spectrum-textfield-border-color-error-down, var(--spectrum-red-1100));
+}
+.dh-multi-select-trigger.is-invalid.is-focused::after {
+  border-color: var(--dh-color-input-focus-border);
+}
+.dh-multi-select-trigger.is-invalid.is-focused .dh-multi-select-chevron::before {
+  border-left-color: var(--dh-color-input-focus-border);
+}
+.dh-multi-select-trigger.is-disabled {
+  background-color: var(--dh-color-input-disabled-bg);
+  color: var(--dh-color-input-disabled-fg);
+  cursor: default;
+}
+.dh-multi-select-trigger.is-disabled::after {
+  border-color: var(--dh-color-input-disabled-border);
+}
+.dh-multi-select-trigger.is-disabled .dh-multi-select-chevron {
+  color: var(--dh-color-selector-disabled-fg);
+  background-color: var(--dh-color-input-disabled-bg);
+}
+.dh-multi-select-trigger.is-disabled .dh-multi-select-chevron::before {
+  border-left-color: var(--dh-color-input-disabled-border);
+}
+.dh-multi-select-trigger.is-read-only {
+  cursor: default;
+}
+.dh-multi-select-trigger.is-quiet {
+  background: none;
+  border-radius: 0;
+  min-width: calc(2 * var(--spectrum-dropdown-height, var(--spectrum-global-dimension-size-400, 32px)));
+}
+.dh-multi-select-trigger.is-quiet::after {
+  border: none;
+  border-bottom: var(--spectrum-alias-input-border-size, 1px) solid var(--dh-color-input-border);
+  border-radius: 0;
+}
+.dh-multi-select-trigger.is-quiet:hover:not(.is-disabled):not(.is-read-only):not(.is-focused)::after {
+  border-bottom-color: var(--dh-color-input-hover-border);
+}
+.dh-multi-select-trigger.is-quiet:hover:not(.is-disabled):not(.is-read-only):not(.is-focused) .dh-multi-select-chevron {
+  background-color: transparent;
+}
+.dh-multi-select-trigger.is-quiet:hover:not(.is-disabled):not(.is-read-only):not(.is-focused) .dh-multi-select-chevron::before {
+  border-bottom-color: var(--dh-color-input-hover-border);
+}
+.dh-multi-select-trigger.is-quiet.is-focused::after {
+  border-bottom-color: var(--dh-color-input-focus-border);
+}
+.dh-multi-select-trigger.is-quiet.is-focused .dh-multi-select-chevron:not(.is-open) {
+  background-color: transparent;
+}
+.dh-multi-select-trigger.is-quiet.is-focused .dh-multi-select-chevron::before {
+  border-bottom-color: var(--dh-color-input-focus-border);
+}
+.dh-multi-select-trigger.is-quiet.focus-ring {
+  box-shadow: 0 2px 0 0 var(--dh-color-input-focus-border);
+}
+.dh-multi-select-trigger.is-quiet .dh-multi-select-chevron {
+  inline-size: auto;
+  padding-inline-start: var(--spectrum-global-dimension-size-130, 10px);
+  padding-inline-end: 0;
+  background-color: transparent;
+  border-radius: 0;
+}
+.dh-multi-select-trigger.is-quiet .dh-multi-select-chevron::before {
+  border-left: none;
+  border-bottom: var(--spectrum-alias-input-border-size, 1px) solid var(--dh-color-input-border);
+  border-radius: 0;
+  top: auto;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: auto;
+  height: 0;
+}
+.dh-multi-select-trigger.is-quiet .dh-multi-select-chevron.is-open {
+  background-color: var(--spectrum-alias-background-color-transparent, transparent);
+}
+.dh-multi-select-trigger.is-quiet.is-disabled .dh-multi-select-chevron {
+  border-radius: 0;
+}
+.dh-multi-select-trigger.is-quiet.is-disabled .dh-multi-select-chevron::before {
+  border-bottom-color: var(--dh-color-input-disabled-border);
+}
+.dh-multi-select-trigger.is-quiet.is-invalid::after {
+  border-bottom-color: var(--spectrum-textfield-border-color-error, var(--spectrum-red-900));
+}
+.dh-multi-select-trigger.is-quiet.is-invalid .dh-multi-select-chevron::before {
+  border-bottom-color: var(--spectrum-textfield-border-color-error, var(--spectrum-red-900));
+}
+.dh-multi-select-trigger.is-quiet.is-invalid:hover:not(.is-disabled):not(.is-read-only):not(.is-focused)::after {
+  border-bottom-color: var(--spectrum-textfield-border-color-error-hover, var(--spectrum-red-1000));
+}
+.dh-multi-select-trigger.is-quiet.is-invalid:hover:not(.is-disabled):not(.is-read-only):not(.is-focused) .dh-multi-select-chevron::before {
+  border-bottom-color: var(--spectrum-textfield-border-color-error-hover, var(--spectrum-red-1000));
+}
+.dh-multi-select-trigger.is-quiet.is-invalid:active:not(.is-disabled):not(.is-read-only)::after {
+  border-bottom-color: var(--spectrum-textfield-border-color-error-down, var(--spectrum-red-1100));
+}
+.dh-multi-select-trigger.is-quiet.is-invalid:active:not(.is-disabled):not(.is-read-only) .dh-multi-select-chevron::before {
+  border-bottom-color: var(--spectrum-textfield-border-color-error-down, var(--spectrum-red-1100));
+}
+.dh-multi-select-trigger.is-quiet.is-invalid.is-focused::after {
+  border-bottom-color: var(--dh-color-input-focus-border);
+}
+.dh-multi-select-trigger.is-quiet.is-invalid.is-focused .dh-multi-select-chevron::before {
+  border-bottom-color: var(--dh-color-input-focus-border);
+}
+
+.dh-multi-select-content {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  gap: calc(var(--spectrum-taggroup-tag-gap-y, var(--spectrum-global-dimension-size-100)) / 2) calc(var(--spectrum-taggroup-tag-gap-x, var(--spectrum-global-dimension-size-100)) / 2);
+  padding: 3px 0 3px 4px;
+}
+
+.dh-multi-select-tag {
+  display: inline-grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  box-sizing: border-box;
+  max-inline-size: 100%;
+  cursor: default;
+  user-select: none;
+  block-size: var(--spectrum-tag-height, var(--spectrum-global-dimension-size-300));
+  padding-inline-start: calc(var(--spectrum-tag-padding-x, var(--spectrum-global-dimension-size-125)) - var(--spectrum-tag-border-size, var(--spectrum-alias-border-size-thin)));
+  border-style: solid;
+  border-width: var(--spectrum-tag-border-size, var(--spectrum-alias-border-size-thin));
+  border-radius: var(--spectrum-tag-border-radius, var(--spectrum-alias-border-radius-regular));
+  color: var(--spectrum-tag-text-color, var(--spectrum-global-color-gray-700));
+  background-color: var(--spectrum-tag-background-color, var(--spectrum-global-color-gray-75));
+  border-color: var(--spectrum-tag-border-color, var(--spectrum-global-color-gray-600));
+  font-size: var(--spectrum-tag-text-size, var(--spectrum-global-dimension-font-size-75));
+  transition: border-color 0.13s ease-in-out, color 0.13s ease-in-out, box-shadow 0.13s ease-in-out, background-color 0.13s ease-in-out;
+}
+.dh-multi-select-tag:hover {
+  background-color: var(--spectrum-tag-background-color-hover, var(--spectrum-global-color-gray-75));
+  color: var(--spectrum-tag-text-color-hover, var(--spectrum-global-color-gray-900));
+  border-color: var(--spectrum-tag-border-color-hover, var(--spectrum-global-color-gray-900));
+}
+.is-disabled .dh-multi-select-tag {
+  color: var(--spectrum-tag-text-color-disabled, var(--spectrum-global-color-gray-500));
+  background-color: var(--spectrum-tag-background-color-disabled, var(--spectrum-global-color-gray-200));
+  border-color: var(--spectrum-tag-border-color-disabled, var(--spectrum-global-color-gray-200));
+  pointer-events: none;
+}
+
+.dh-multi-select-tag-label {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  line-height: calc(var(--spectrum-tag-height, var(--spectrum-global-dimension-size-300)) - var(--spectrum-tag-border-size, var(--spectrum-alias-border-size-thin)) * 2);
+  margin-inline-end: 0;
+}
+.dh-multi-select-tag-label:last-child {
+  margin-inline-end: var(--spectrum-tag-padding-x, var(--spectrum-global-dimension-size-125));
+}
+
+.dh-multi-select-tag-remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: inherit;
+  height: calc(var(--spectrum-tag-height, var(--spectrum-global-dimension-size-300)) - 2 * var(--spectrum-tag-border-size, var(--spectrum-alias-border-size-thin)));
+  width: var(--spectrum-global-dimension-size-300);
+}
+.dh-multi-select-tag-remove:hover {
+  color: var(--spectrum-tag-removable-button-icon-color-hover, var(--spectrum-global-color-gray-900));
+}
+.dh-multi-select-tag-remove svg {
+  width: 8px;
+  height: 8px;
+}
+
+.dh-multi-select-input {
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--dh-color-input-fg);
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  flex: 1;
+  min-width: 40px;
+  padding: 2px 0 2px 4px;
+  height: var(--spectrum-tag-height, var(--spectrum-global-dimension-size-300));
+}
+.dh-multi-select-input:disabled {
+  color: var(--dh-color-input-disabled-fg);
+  cursor: default;
+}
+
+.dh-multi-select-chevron {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--spectrum-global-dimension-size-400, 32px);
+  flex-shrink: 0;
+  align-self: stretch;
+  box-sizing: border-box;
+  position: relative;
+  padding: var(--spectrum-combobox-fieldbutton-inset, 0);
+  background-color: var(--dh-color-selector-bg);
+  background-clip: content-box;
+  color: var(--dh-color-selector-fg);
+  border-radius: 0 calc(var(--spectrum-alias-border-radius-regular, 4px) - 1px) calc(var(--spectrum-alias-border-radius-regular, 4px) - 1px) 0;
+  transition: background-color 130ms ease-in-out, color 130ms ease-in-out;
+}
+.dh-multi-select-chevron::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 0;
+  border-left: 1px solid var(--dh-color-input-border);
+  pointer-events: none;
+}
+.dh-multi-select-chevron.is-open {
+  background-color: var(--spectrum-fieldbutton-background-color-down, var(--spectrum-global-color-gray-200));
+  color: var(--spectrum-fieldbutton-icon-color-down, var(--spectrum-alias-icon-color-down));
+}
+.dh-multi-select-chevron.is-open::before {
+  border-left-color: var(--spectrum-fieldbutton-border-color-down, var(--spectrum-alias-border-color-down));
+}
+
+.dh-multi-select-invalid-icon {
+  display: flex;
+  align-items: center;
+  padding-inline-start: var(--spectrum-global-dimension-size-100, 8px);
+  padding-inline-end: var(--spectrum-global-dimension-size-100, 8px);
+  color: var(--spectrum-semantic-negative-color-icon);
+  flex-shrink: 0;
+}
+
+.dh-multi-select-empty {
+  display: block;
+  padding-top: var(--spectrum-selectlist-option-padding-height);
+  padding-inline-start: var(--spectrum-selectlist-option-padding, var(--spectrum-global-dimension-static-size-150));
+  font-size: var(--spectrum-selectlist-option-text-size, var(--spectrum-alias-font-size-default));
+  font-weight: var(--spectrum-selectlist-option-text-font-weight, var(--spectrum-global-font-weight-regular));
+}
+
+.dh-multi-select-loading-circle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-inline-end: 8px;
+  padding-inline-start: 4px;
+}
+
+[role=option][data-dh-focused=true] {
+  background-color: var(--dh-color-item-list-hover-bg);
+  border-inline-start-color: var(--spectrum-selectlist-option-focus-indicator-color, var(--spectrum-alias-border-color-focus));
+}
+
+/*# sourceMappingURL=MultiSelect.css.map */