@deephaven/components 0.46.1-beta.2 → 0.46.1-beta.4

package/dist/DateInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.js","names":["React","useCallback","useState","classNames","Log","MaskedInput","getNextSegmentValue","log","module","DATE_PATTERN","EXAMPLES","DATE_FORMAT","DateInput","forwardRef","props","ref","className","onChange","undefined","defaultValue","onFocus","onBlur","dataTestId","value","setValue","selection","setSelection","handleChange","newValue","debug","displayName","defaultProps"],"sources":["../src/DateInput.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport classNames from 'classnames';\nimport Log from '@deephaven/log';\nimport MaskedInput, { SelectionSegment } from './MaskedInput';\nimport { getNextSegmentValue } from './DateInputUtils';\n\nconst log = Log.module('DateInput');\n\nconst DATE_PATTERN = '[12][0-9]{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])';\nconst EXAMPLES = ['2000-01-01', '2022-12-31'];\nconst DATE_FORMAT = 'YYYY-MM-DD';\n\ntype DateInputProps = {\n  className?: string;\n  onChange?(date?: string): void;\n  defaultValue?: string;\n  onFocus?(): void;\n  onBlur?(): void;\n  'data-testid'?: string;\n};\n\nconst DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(\n  (props: DateInputProps, ref) => {\n    const {\n      className = '',\n      onChange = () => undefined,\n      defaultValue = '',\n      onFocus = () => undefined,\n      onBlur = () => undefined,\n      'data-testid': dataTestId,\n    } = props;\n    const [value, setValue] = useState(defaultValue);\n    const [selection, setSelection] = useState<SelectionSegment>();\n\n    const handleChange = useCallback(\n      (newValue: string): void => {\n        log.debug('handleChange', newValue);\n        setValue(newValue);\n        onChange(newValue);\n      },\n      [onChange]\n    );\n\n    return (\n      <div className=\"d-flex flex-row align-items-center\">\n        <MaskedInput\n          ref={ref}\n          className={classNames(className)}\n          example={EXAMPLES}\n          getNextSegmentValue={getNextSegmentValue}\n          onChange={handleChange}\n          onSelect={setSelection}\n          pattern={DATE_PATTERN}\n          placeholder={DATE_FORMAT}\n          selection={selection}\n          value={value}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          data-testid={dataTestId}\n        />\n      </div>\n    );\n  }\n);\n\nDateInput.displayName = 'DateInput';\n\nDateInput.defaultProps = {\n  className: '',\n  onChange: () => false,\n  defaultValue: '',\n  onFocus: () => false,\n  onBlur: () => false,\n  'data-testid': undefined,\n};\n\nexport default DateInput;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,QAAQ,QAAQ,OAAO;AACpD,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,GAAG,MAAM,gBAAgB;AAAC,OAC1BC,WAAW;AAAA,SACTC,mBAAmB;AAE5B,IAAMC,GAAG,GAAGH,GAAG,CAACI,MAAM,CAAC,WAAW,CAAC;AAEnC,IAAMC,YAAY,GAAG,yDAAyD;AAC9E,IAAMC,QAAQ,GAAG,CAAC,YAAY,EAAE,YAAY,CAAC;AAC7C,IAAMC,WAAW,GAAG,YAAY;AAWhC,IAAMC,SAAS,gBAAGZ,KAAK,CAACa,UAAU,CAChC,CAACC,KAAqB,EAAEC,GAAG,KAAK;EAC9B,IAAM;IACJC,SAAS,GAAG,EAAE;IACdC,QAAQ,GAAG,MAAMC,SAAS;IAC1BC,YAAY,GAAG,EAAE;IACjBC,OAAO,GAAG,MAAMF,SAAS;IACzBG,MAAM,GAAG,MAAMH,SAAS;IACxB,aAAa,EAAEI;EACjB,CAAC,GAAGR,KAAK;EACT,IAAM,CAACS,KAAK,EAAEC,QAAQ,CAAC,GAAGtB,QAAQ,CAACiB,YAAY,CAAC;EAChD,IAAM,CAACM,SAAS,EAAEC,YAAY,CAAC,GAAGxB,QAAQ,EAAoB;EAE9D,IAAMyB,YAAY,GAAG1B,WAAW,CAC7B2B,QAAgB,IAAW;IAC1BrB,GAAG,CAACsB,KAAK,CAAC,cAAc,EAAED,QAAQ,CAAC;IACnCJ,QAAQ,CAACI,QAAQ,CAAC;IAClBX,QAAQ,CAACW,QAAQ,CAAC;EACpB,CAAC,EACD,CAACX,QAAQ,CAAC,CACX;EAED,oBACE;IAAK,SAAS,EAAC;EAAoC,gBACjD,oBAAC,WAAW;IACV,GAAG,EAAEF,GAAI;IACT,SAAS,EAAEZ,UAAU,CAACa,SAAS,CAAE;IACjC,OAAO,EAAEN,QAAS;IAClB,mBAAmB,EAAEJ,mBAAoB;IACzC,QAAQ,EAAEqB,YAAa;IACvB,QAAQ,EAAED,YAAa;IACvB,OAAO,EAAEjB,YAAa;IACtB,WAAW,EAAEE,WAAY;IACzB,SAAS,EAAEc,SAAU;IACrB,KAAK,EAAEF,KAAM;IACb,OAAO,EAAEH,OAAQ;IACjB,MAAM,EAAEC,MAAO;IACf,eAAaC;EAAW,EACxB,CACE;AAEV,CAAC,CACF;AAEDV,SAAS,CAACkB,WAAW,GAAG,WAAW;AAEnClB,SAAS,CAACmB,YAAY,GAAG;EACvBf,SAAS,EAAE,EAAE;EACbC,QAAQ,EAAE,MAAM,KAAK;EACrBE,YAAY,EAAE,EAAE;EAChBC,OAAO,EAAE,MAAM,KAAK;EACpBC,MAAM,EAAE,MAAM,KAAK;EACnB,aAAa,EAAEH;AACjB,CAAC;AAED,eAAeN,SAAS"}
+{"version":3,"file":"DateInput.js","names":["React","useCallback","useState","classNames","Log","MaskedInput","getNextSegmentValue","log","module","DATE_PATTERN","EXAMPLES","DATE_FORMAT","DateInput","forwardRef","props","ref","className","onChange","undefined","defaultValue","onFocus","onBlur","dataTestId","value","setValue","selection","setSelection","handleChange","newValue","debug","displayName","defaultProps"],"sources":["../src/DateInput.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport classNames from 'classnames';\nimport Log from '@deephaven/log';\nimport MaskedInput, { SelectionSegment } from './MaskedInput';\nimport { getNextSegmentValue } from './DateInputUtils';\n\nconst log = Log.module('DateInput');\n\nconst DATE_PATTERN = '[12][0-9]{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])';\nconst EXAMPLES = ['2000-01-01', '2022-12-31'];\nconst DATE_FORMAT = 'YYYY-MM-DD';\n\ntype DateInputProps = {\n  className?: string;\n  onChange?(date?: string): void;\n  defaultValue?: string;\n  onFocus?(): void;\n  onBlur?(): void;\n  'data-testid'?: string;\n};\n\nconst DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(\n  (props: DateInputProps, ref) => {\n    const {\n      className = '',\n      onChange = () => undefined,\n      defaultValue = '',\n      onFocus = () => undefined,\n      onBlur = () => undefined,\n      'data-testid': dataTestId,\n    } = props;\n    const [value, setValue] = useState(defaultValue);\n    const [selection, setSelection] = useState<SelectionSegment>();\n\n    const handleChange = useCallback(\n      (newValue: string): void => {\n        log.debug('handleChange', newValue);\n        setValue(newValue);\n        onChange(newValue);\n      },\n      [onChange]\n    );\n\n    return (\n      <div className=\"d-flex flex-row align-items-center\">\n        <MaskedInput\n          ref={ref}\n          className={classNames(className)}\n          example={EXAMPLES}\n          getNextSegmentValue={getNextSegmentValue}\n          onChange={handleChange}\n          onSelect={setSelection}\n          pattern={DATE_PATTERN}\n          placeholder={DATE_FORMAT}\n          selection={selection}\n          value={value}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          data-testid={dataTestId}\n        />\n      </div>\n    );\n  }\n);\n\nDateInput.displayName = 'DateInput';\n\nDateInput.defaultProps = {\n  className: '',\n  onChange: () => false,\n  defaultValue: '',\n  onFocus: () => false,\n  onBlur: () => false,\n  'data-testid': undefined,\n};\n\nexport default DateInput;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,QAAQ,QAAQ,OAAO;AACpD,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,GAAG,MAAM,gBAAgB;AAAC,OAC1BC,WAAW;AAAA,SACTC,mBAAmB;AAAA;AAE5B,IAAMC,GAAG,GAAGH,GAAG,CAACI,MAAM,CAAC,WAAW,CAAC;AAEnC,IAAMC,YAAY,GAAG,yDAAyD;AAC9E,IAAMC,QAAQ,GAAG,CAAC,YAAY,EAAE,YAAY,CAAC;AAC7C,IAAMC,WAAW,GAAG,YAAY;AAWhC,IAAMC,SAAS,gBAAGZ,KAAK,CAACa,UAAU,CAChC,CAACC,KAAqB,EAAEC,GAAG,KAAK;EAC9B,IAAM;IACJC,SAAS,GAAG,EAAE;IACdC,QAAQ,GAAG,MAAMC,SAAS;IAC1BC,YAAY,GAAG,EAAE;IACjBC,OAAO,GAAG,MAAMF,SAAS;IACzBG,MAAM,GAAG,MAAMH,SAAS;IACxB,aAAa,EAAEI;EACjB,CAAC,GAAGR,KAAK;EACT,IAAM,CAACS,KAAK,EAAEC,QAAQ,CAAC,GAAGtB,QAAQ,CAACiB,YAAY,CAAC;EAChD,IAAM,CAACM,SAAS,EAAEC,YAAY,CAAC,GAAGxB,QAAQ,EAAoB;EAE9D,IAAMyB,YAAY,GAAG1B,WAAW,CAC7B2B,QAAgB,IAAW;IAC1BrB,GAAG,CAACsB,KAAK,CAAC,cAAc,EAAED,QAAQ,CAAC;IACnCJ,QAAQ,CAACI,QAAQ,CAAC;IAClBX,QAAQ,CAACW,QAAQ,CAAC;EACpB,CAAC,EACD,CAACX,QAAQ,CAAC,CACX;EAED,oBACE;IAAK,SAAS,EAAC,oCAAoC;IAAA,uBACjD,KAAC,WAAW;MACV,GAAG,EAAEF,GAAI;MACT,SAAS,EAAEZ,UAAU,CAACa,SAAS,CAAE;MACjC,OAAO,EAAEN,QAAS;MAClB,mBAAmB,EAAEJ,mBAAoB;MACzC,QAAQ,EAAEqB,YAAa;MACvB,QAAQ,EAAED,YAAa;MACvB,OAAO,EAAEjB,YAAa;MACtB,WAAW,EAAEE,WAAY;MACzB,SAAS,EAAEc,SAAU;MACrB,KAAK,EAAEF,KAAM;MACb,OAAO,EAAEH,OAAQ;MACjB,MAAM,EAAEC,MAAO;MACf,eAAaC;IAAW;EACxB,EACE;AAEV,CAAC,CACF;AAEDV,SAAS,CAACkB,WAAW,GAAG,WAAW;AAEnClB,SAAS,CAACmB,YAAY,GAAG;EACvBf,SAAS,EAAE,EAAE;EACbC,QAAQ,EAAE,MAAM,KAAK;EACrBE,YAAY,EAAE,EAAE;EAChBC,OAAO,EAAE,MAAM,KAAK;EACpBC,MAAM,EAAE,MAAM,KAAK;EACnB,aAAa,EAAEH;AACjB,CAAC;AAED,eAAeN,SAAS"}

package/dist/DateTimeInput.js

@@ -4,6 +4,7 @@ import Log from '@deephaven/log';
 import MaskedInput from "./MaskedInput.js";
 import { getNextSegmentValue } from "./DateInputUtils.js";
 import { addSeparators } from "./DateTimeInputUtils.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 var log = Log.module('DateTimeInput');
 
 // This could be more restrictive and restrict days to the number of days in the month...
@@ -52,24 +53,25 @@ var DateTimeInput = /*#__PURE__*/React.forwardRef((props, ref) => {
     }
     onBlur();
   }, [value, onBlur]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "d-flex flex-row align-items-center"
-  }, /*#__PURE__*/React.createElement(MaskedInput, {
-    ref: ref,
-    className: classNames(className),
-    example: EXAMPLES,
-    getNextSegmentValue: getNextSegmentValue,
-    onChange: handleChange,
-    onSelect: setSelection,
-    onSubmit: onSubmit,
-    pattern: FULL_DATE_PATTERN,
-    placeholder: FULL_DATE_FORMAT,
-    selection: selection,
-    value: value,
-    onFocus: onFocus,
-    onBlur: handleBlur,
-    "data-testid": dataTestId
-  }));
+  return /*#__PURE__*/_jsx("div", {
+    className: "d-flex flex-row align-items-center",
+    children: /*#__PURE__*/_jsx(MaskedInput, {
+      ref: ref,
+      className: classNames(className),
+      example: EXAMPLES,
+      getNextSegmentValue: getNextSegmentValue,
+      onChange: handleChange,
+      onSelect: setSelection,
+      onSubmit: onSubmit,
+      pattern: FULL_DATE_PATTERN,
+      placeholder: FULL_DATE_FORMAT,
+      selection: selection,
+      value: value,
+      onFocus: onFocus,
+      onBlur: handleBlur,
+      "data-testid": dataTestId
+    })
+  });
 });
 DateTimeInput.displayName = 'DateTimeInput';
 DateTimeInput.defaultProps = {

package/dist/DateTimeInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeInput.js","names":["React","useCallback","useState","classNames","Log","MaskedInput","getNextSegmentValue","addSeparators","log","module","DATE_PATTERN","TIME_PATTERN","FULL_DATE_PATTERN","DATE_VALUE_STRING","DEFAULT_VALUE_STRING","FULL_DATE_FORMAT","fixIncompleteValue","value","length","substring","replace","removeSeparators","EXAMPLES","DateTimeInput","forwardRef","props","ref","className","onChange","undefined","defaultValue","onFocus","onBlur","onSubmit","dataTestId","setValue","selection","setSelection","handleChange","newValue","debug","handleBlur","prevValue","fixedValue","displayName","defaultProps"],"sources":["../src/DateTimeInput.tsx"],"sourcesContent":["import React, { KeyboardEvent, useCallback, useState } from 'react';\nimport classNames from 'classnames';\nimport Log from '@deephaven/log';\nimport MaskedInput, { SelectionSegment } from './MaskedInput';\nimport { getNextSegmentValue } from './DateInputUtils';\nimport { addSeparators } from './DateTimeInputUtils';\n\nconst log = Log.module('DateTimeInput');\n\n// This could be more restrictive and restrict days to the number of days in the month...\n// But then gotta take leap year into account and everything.\nconst DATE_PATTERN = '[12][0-9]{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])';\n// Put zero width spaces in the nanosecond part of the date to allow jumping between segments\nconst TIME_PATTERN =\n  '([01][0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]\\\\.[0-9]{3}\\u200B[0-9]{3}\\u200B[0-9]{3}';\nconst FULL_DATE_PATTERN = `${DATE_PATTERN} ${TIME_PATTERN}`;\nconst DATE_VALUE_STRING = '2022-01-01';\nconst DEFAULT_VALUE_STRING = `${DATE_VALUE_STRING} 00:00:00.000000000`;\nconst FULL_DATE_FORMAT = 'YYYY-MM-DD HH:MM:SS.SSSSSSSSS';\n\ntype DateTimeInputProps = {\n  className?: string;\n  onChange?(value?: string): void;\n  defaultValue?: string;\n  onFocus?(): void;\n  onBlur?(): void;\n  onSubmit?(event?: KeyboardEvent<HTMLInputElement>): void;\n  'data-testid'?: string;\n};\n\nfunction fixIncompleteValue(value: string): string {\n  if (value != null && value.length >= DATE_VALUE_STRING.length) {\n    return `${value.substring(0, DATE_VALUE_STRING.length)}${value\n      .substring(DATE_VALUE_STRING.length)\n      .replace(/\\u2007/g, '0')}${DEFAULT_VALUE_STRING.substring(value.length)}`;\n  }\n  return value;\n}\n\nfunction removeSeparators(value: string): string {\n  return value.replace(/\\u200B/g, '');\n}\n\nconst EXAMPLES = [addSeparators(DEFAULT_VALUE_STRING)];\n\nconst DateTimeInput = React.forwardRef<HTMLInputElement, DateTimeInputProps>(\n  (props: DateTimeInputProps, ref) => {\n    const {\n      className = '',\n      onChange = () => undefined,\n      defaultValue = '',\n      onFocus = () => undefined,\n      onBlur = () => undefined,\n      onSubmit,\n      'data-testid': dataTestId,\n    } = props;\n    const [value, setValue] = useState(\n      defaultValue.length > 0 ? addSeparators(defaultValue) : ''\n    );\n    const [selection, setSelection] = useState<SelectionSegment>();\n\n    const handleChange = useCallback(\n      (newValue: string): void => {\n        log.debug('handleChange', newValue);\n        setValue(newValue);\n        onChange(fixIncompleteValue(removeSeparators(newValue)));\n      },\n      [onChange]\n    );\n\n    const handleBlur = useCallback((): void => {\n      const prevValue = removeSeparators(value);\n      const fixedValue = fixIncompleteValue(prevValue);\n      // Update the value displayed in the input\n      // onChange with the fixed value already triggered in handleChange\n      if (fixedValue !== prevValue) {\n        setValue(addSeparators(fixedValue));\n      }\n      onBlur();\n    }, [value, onBlur]);\n\n    return (\n      <div className=\"d-flex flex-row align-items-center\">\n        <MaskedInput\n          ref={ref}\n          className={classNames(className)}\n          example={EXAMPLES}\n          getNextSegmentValue={getNextSegmentValue}\n          onChange={handleChange}\n          onSelect={setSelection}\n          onSubmit={onSubmit}\n          pattern={FULL_DATE_PATTERN}\n          placeholder={FULL_DATE_FORMAT}\n          selection={selection}\n          value={value}\n          onFocus={onFocus}\n          onBlur={handleBlur}\n          data-testid={dataTestId}\n        />\n      </div>\n    );\n  }\n);\n\nDateTimeInput.displayName = 'DateTimeInput';\n\nDateTimeInput.defaultProps = {\n  className: '',\n  onChange: () => undefined,\n  defaultValue: '',\n  onFocus: () => undefined,\n  onBlur: () => undefined,\n  'data-testid': undefined,\n};\n\nexport default DateTimeInput;\n"],"mappings":"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"}
+{"version":3,"file":"DateTimeInput.js","names":["React","useCallback","useState","classNames","Log","MaskedInput","getNextSegmentValue","addSeparators","log","module","DATE_PATTERN","TIME_PATTERN","FULL_DATE_PATTERN","DATE_VALUE_STRING","DEFAULT_VALUE_STRING","FULL_DATE_FORMAT","fixIncompleteValue","value","length","substring","replace","removeSeparators","EXAMPLES","DateTimeInput","forwardRef","props","ref","className","onChange","undefined","defaultValue","onFocus","onBlur","onSubmit","dataTestId","setValue","selection","setSelection","handleChange","newValue","debug","handleBlur","prevValue","fixedValue","displayName","defaultProps"],"sources":["../src/DateTimeInput.tsx"],"sourcesContent":["import React, { KeyboardEvent, useCallback, useState } from 'react';\nimport classNames from 'classnames';\nimport Log from '@deephaven/log';\nimport MaskedInput, { SelectionSegment } from './MaskedInput';\nimport { getNextSegmentValue } from './DateInputUtils';\nimport { addSeparators } from './DateTimeInputUtils';\n\nconst log = Log.module('DateTimeInput');\n\n// This could be more restrictive and restrict days to the number of days in the month...\n// But then gotta take leap year into account and everything.\nconst DATE_PATTERN = '[12][0-9]{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])';\n// Put zero width spaces in the nanosecond part of the date to allow jumping between segments\nconst TIME_PATTERN =\n  '([01][0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]\\\\.[0-9]{3}\\u200B[0-9]{3}\\u200B[0-9]{3}';\nconst FULL_DATE_PATTERN = `${DATE_PATTERN} ${TIME_PATTERN}`;\nconst DATE_VALUE_STRING = '2022-01-01';\nconst DEFAULT_VALUE_STRING = `${DATE_VALUE_STRING} 00:00:00.000000000`;\nconst FULL_DATE_FORMAT = 'YYYY-MM-DD HH:MM:SS.SSSSSSSSS';\n\ntype DateTimeInputProps = {\n  className?: string;\n  onChange?(value?: string): void;\n  defaultValue?: string;\n  onFocus?(): void;\n  onBlur?(): void;\n  onSubmit?(event?: KeyboardEvent<HTMLInputElement>): void;\n  'data-testid'?: string;\n};\n\nfunction fixIncompleteValue(value: string): string {\n  if (value != null && value.length >= DATE_VALUE_STRING.length) {\n    return `${value.substring(0, DATE_VALUE_STRING.length)}${value\n      .substring(DATE_VALUE_STRING.length)\n      .replace(/\\u2007/g, '0')}${DEFAULT_VALUE_STRING.substring(value.length)}`;\n  }\n  return value;\n}\n\nfunction removeSeparators(value: string): string {\n  return value.replace(/\\u200B/g, '');\n}\n\nconst EXAMPLES = [addSeparators(DEFAULT_VALUE_STRING)];\n\nconst DateTimeInput = React.forwardRef<HTMLInputElement, DateTimeInputProps>(\n  (props: DateTimeInputProps, ref) => {\n    const {\n      className = '',\n      onChange = () => undefined,\n      defaultValue = '',\n      onFocus = () => undefined,\n      onBlur = () => undefined,\n      onSubmit,\n      'data-testid': dataTestId,\n    } = props;\n    const [value, setValue] = useState(\n      defaultValue.length > 0 ? addSeparators(defaultValue) : ''\n    );\n    const [selection, setSelection] = useState<SelectionSegment>();\n\n    const handleChange = useCallback(\n      (newValue: string): void => {\n        log.debug('handleChange', newValue);\n        setValue(newValue);\n        onChange(fixIncompleteValue(removeSeparators(newValue)));\n      },\n      [onChange]\n    );\n\n    const handleBlur = useCallback((): void => {\n      const prevValue = removeSeparators(value);\n      const fixedValue = fixIncompleteValue(prevValue);\n      // Update the value displayed in the input\n      // onChange with the fixed value already triggered in handleChange\n      if (fixedValue !== prevValue) {\n        setValue(addSeparators(fixedValue));\n      }\n      onBlur();\n    }, [value, onBlur]);\n\n    return (\n      <div className=\"d-flex flex-row align-items-center\">\n        <MaskedInput\n          ref={ref}\n          className={classNames(className)}\n          example={EXAMPLES}\n          getNextSegmentValue={getNextSegmentValue}\n          onChange={handleChange}\n          onSelect={setSelection}\n          onSubmit={onSubmit}\n          pattern={FULL_DATE_PATTERN}\n          placeholder={FULL_DATE_FORMAT}\n          selection={selection}\n          value={value}\n          onFocus={onFocus}\n          onBlur={handleBlur}\n          data-testid={dataTestId}\n        />\n      </div>\n    );\n  }\n);\n\nDateTimeInput.displayName = 'DateTimeInput';\n\nDateTimeInput.defaultProps = {\n  className: '',\n  onChange: () => undefined,\n  defaultValue: '',\n  onFocus: () => undefined,\n  onBlur: () => undefined,\n  'data-testid': undefined,\n};\n\nexport default DateTimeInput;\n"],"mappings":"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"}

package/dist/DebouncedSearchInput.js

@@ -4,6 +4,7 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
 import React, { PureComponent } from 'react';
 import debounce from 'lodash.debounce';
 import SearchInput from "./SearchInput.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 class DebouncedSearchInput extends PureComponent {
   constructor(props) {
     super(props);
@@ -55,7 +56,7 @@ class DebouncedSearchInput extends PureComponent {
     var {
       value
     } = this.state;
-    return /*#__PURE__*/React.createElement(SearchInput, {
+    return /*#__PURE__*/_jsx(SearchInput, {
       value: value,
       placeholder: placeholder,
       onChange: this.handleChange,

package/dist/DebouncedSearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DebouncedSearchInput.js","names":["React","PureComponent","debounce","SearchInput","DebouncedSearchInput","constructor","props","searchInput","createRef","handleChange","bind","sendUpdate","debounceMs","state","value","componentDidUpdate","prevProps","setState","focus","current","event","target","onChange","render","placeholder","className","matchCount","id","dataTestId","undefined"],"sources":["../src/DebouncedSearchInput.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport debounce from 'lodash.debounce';\nimport SearchInput from './SearchInput';\n\ninterface DebouncedSearchInputProps {\n  value: string;\n  placeholder: string;\n  onChange(value: string): void;\n  className: string;\n  matchCount: number;\n  debounceMs: number;\n  id: string;\n  'data-testid'?: string;\n}\n\ninterface DebouncedSearchInputState {\n  value: string;\n}\n\nclass DebouncedSearchInput extends PureComponent<\n  DebouncedSearchInputProps,\n  DebouncedSearchInputState\n> {\n  static defaultProps = {\n    placeholder: 'Search',\n    className: '',\n    matchCount: null,\n    debounceMs: 250,\n    id: '',\n    'data-testid': undefined,\n  };\n\n  constructor(props: DebouncedSearchInputProps) {\n    super(props);\n    this.searchInput = React.createRef();\n    this.handleChange = this.handleChange.bind(this);\n    this.sendUpdate = debounce(this.sendUpdate.bind(this), props.debounceMs);\n\n    this.state = {\n      value: props.value,\n    };\n  }\n\n  componentDidUpdate(prevProps: DebouncedSearchInputProps): void {\n    const { value } = this.props;\n    if (prevProps.value !== value) {\n      // eslint-disable-next-line react/no-did-update-set-state\n      this.setState({ value });\n    }\n  }\n\n  searchInput: React.RefObject<SearchInput>;\n\n  focus(): void {\n    this.searchInput.current?.focus();\n  }\n\n  handleChange(event: React.ChangeEvent<HTMLInputElement>): void {\n    this.setState({ value: event.target.value }, this.sendUpdate);\n  }\n\n  sendUpdate(): void {\n    const { onChange } = this.props;\n    const { value } = this.state;\n    onChange(value);\n  }\n\n  render(): JSX.Element {\n    const {\n      placeholder,\n      className,\n      matchCount,\n      id,\n      'data-testid': dataTestId,\n    } = this.props;\n    const { value } = this.state;\n    return (\n      <SearchInput\n        value={value}\n        placeholder={placeholder}\n        onChange={this.handleChange}\n        className={className}\n        matchCount={matchCount}\n        ref={this.searchInput}\n        id={id}\n        data-testid={dataTestId}\n      />\n    );\n  }\n}\n\nexport default DebouncedSearchInput;\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,aAAa,QAAQ,OAAO;AAC5C,OAAOC,QAAQ,MAAM,iBAAiB;AAAC,OAChCC,WAAW;AAiBlB,MAAMC,oBAAoB,SAASH,aAAa,CAG9C;EAUAI,WAAW,CAACC,KAAgC,EAAE;IAC5C,KAAK,CAACA,KAAK,CAAC;IAAC;IACb,IAAI,CAACC,WAAW,gBAAGP,KAAK,CAACQ,SAAS,EAAE;IACpC,IAAI,CAACC,YAAY,GAAG,IAAI,CAACA,YAAY,CAACC,IAAI,CAAC,IAAI,CAAC;IAChD,IAAI,CAACC,UAAU,GAAGT,QAAQ,CAAC,IAAI,CAACS,UAAU,CAACD,IAAI,CAAC,IAAI,CAAC,EAAEJ,KAAK,CAACM,UAAU,CAAC;IAExE,IAAI,CAACC,KAAK,GAAG;MACXC,KAAK,EAAER,KAAK,CAACQ;IACf,CAAC;EACH;EAEAC,kBAAkB,CAACC,SAAoC,EAAQ;IAC7D,IAAM;MAAEF;IAAM,CAAC,GAAG,IAAI,CAACR,KAAK;IAC5B,IAAIU,SAAS,CAACF,KAAK,KAAKA,KAAK,EAAE;MAC7B;MACA,IAAI,CAACG,QAAQ,CAAC;QAAEH;MAAM,CAAC,CAAC;IAC1B;EACF;EAIAI,KAAK,GAAS;IAAA;IACZ,6BAAI,CAACX,WAAW,CAACY,OAAO,0DAAxB,sBAA0BD,KAAK,EAAE;EACnC;EAEAT,YAAY,CAACW,KAA0C,EAAQ;IAC7D,IAAI,CAACH,QAAQ,CAAC;MAAEH,KAAK,EAAEM,KAAK,CAACC,MAAM,CAACP;IAAM,CAAC,EAAE,IAAI,CAACH,UAAU,CAAC;EAC/D;EAEAA,UAAU,GAAS;IACjB,IAAM;MAAEW;IAAS,CAAC,GAAG,IAAI,CAAChB,KAAK;IAC/B,IAAM;MAAEQ;IAAM,CAAC,GAAG,IAAI,CAACD,KAAK;IAC5BS,QAAQ,CAACR,KAAK,CAAC;EACjB;EAEAS,MAAM,GAAgB;IACpB,IAAM;MACJC,WAAW;MACXC,SAAS;MACTC,UAAU;MACVC,EAAE;MACF,aAAa,EAAEC;IACjB,CAAC,GAAG,IAAI,CAACtB,KAAK;IACd,IAAM;MAAEQ;IAAM,CAAC,GAAG,IAAI,CAACD,KAAK;IAC5B,oBACE,oBAAC,WAAW;MACV,KAAK,EAAEC,KAAM;MACb,WAAW,EAAEU,WAAY;MACzB,QAAQ,EAAE,IAAI,CAACf,YAAa;MAC5B,SAAS,EAAEgB,SAAU;MACrB,UAAU,EAAEC,UAAW;MACvB,GAAG,EAAE,IAAI,CAACnB,WAAY;MACtB,EAAE,EAAEoB,EAAG;MACP,eAAaC;IAAW,EACxB;EAEN;AACF;AAAC,gBAtEKxB,oBAAoB,kBAIF;EACpBoB,WAAW,EAAE,QAAQ;EACrBC,SAAS,EAAE,EAAE;EACbC,UAAU,EAAE,IAAI;EAChBd,UAAU,EAAE,GAAG;EACfe,EAAE,EAAE,EAAE;EACN,aAAa,EAAEE;AACjB,CAAC;AA6DH,eAAezB,oBAAoB"}
+{"version":3,"file":"DebouncedSearchInput.js","names":["React","PureComponent","debounce","SearchInput","DebouncedSearchInput","constructor","props","searchInput","createRef","handleChange","bind","sendUpdate","debounceMs","state","value","componentDidUpdate","prevProps","setState","focus","current","event","target","onChange","render","placeholder","className","matchCount","id","dataTestId","undefined"],"sources":["../src/DebouncedSearchInput.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport debounce from 'lodash.debounce';\nimport SearchInput from './SearchInput';\n\ninterface DebouncedSearchInputProps {\n  value: string;\n  placeholder: string;\n  onChange(value: string): void;\n  className: string;\n  matchCount: number;\n  debounceMs: number;\n  id: string;\n  'data-testid'?: string;\n}\n\ninterface DebouncedSearchInputState {\n  value: string;\n}\n\nclass DebouncedSearchInput extends PureComponent<\n  DebouncedSearchInputProps,\n  DebouncedSearchInputState\n> {\n  static defaultProps = {\n    placeholder: 'Search',\n    className: '',\n    matchCount: null,\n    debounceMs: 250,\n    id: '',\n    'data-testid': undefined,\n  };\n\n  constructor(props: DebouncedSearchInputProps) {\n    super(props);\n    this.searchInput = React.createRef();\n    this.handleChange = this.handleChange.bind(this);\n    this.sendUpdate = debounce(this.sendUpdate.bind(this), props.debounceMs);\n\n    this.state = {\n      value: props.value,\n    };\n  }\n\n  componentDidUpdate(prevProps: DebouncedSearchInputProps): void {\n    const { value } = this.props;\n    if (prevProps.value !== value) {\n      // eslint-disable-next-line react/no-did-update-set-state\n      this.setState({ value });\n    }\n  }\n\n  searchInput: React.RefObject<SearchInput>;\n\n  focus(): void {\n    this.searchInput.current?.focus();\n  }\n\n  handleChange(event: React.ChangeEvent<HTMLInputElement>): void {\n    this.setState({ value: event.target.value }, this.sendUpdate);\n  }\n\n  sendUpdate(): void {\n    const { onChange } = this.props;\n    const { value } = this.state;\n    onChange(value);\n  }\n\n  render(): JSX.Element {\n    const {\n      placeholder,\n      className,\n      matchCount,\n      id,\n      'data-testid': dataTestId,\n    } = this.props;\n    const { value } = this.state;\n    return (\n      <SearchInput\n        value={value}\n        placeholder={placeholder}\n        onChange={this.handleChange}\n        className={className}\n        matchCount={matchCount}\n        ref={this.searchInput}\n        id={id}\n        data-testid={dataTestId}\n      />\n    );\n  }\n}\n\nexport default DebouncedSearchInput;\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,aAAa,QAAQ,OAAO;AAC5C,OAAOC,QAAQ,MAAM,iBAAiB;AAAC,OAChCC,WAAW;AAAA;AAiBlB,MAAMC,oBAAoB,SAASH,aAAa,CAG9C;EAUAI,WAAW,CAACC,KAAgC,EAAE;IAC5C,KAAK,CAACA,KAAK,CAAC;IAAC;IACb,IAAI,CAACC,WAAW,gBAAGP,KAAK,CAACQ,SAAS,EAAE;IACpC,IAAI,CAACC,YAAY,GAAG,IAAI,CAACA,YAAY,CAACC,IAAI,CAAC,IAAI,CAAC;IAChD,IAAI,CAACC,UAAU,GAAGT,QAAQ,CAAC,IAAI,CAACS,UAAU,CAACD,IAAI,CAAC,IAAI,CAAC,EAAEJ,KAAK,CAACM,UAAU,CAAC;IAExE,IAAI,CAACC,KAAK,GAAG;MACXC,KAAK,EAAER,KAAK,CAACQ;IACf,CAAC;EACH;EAEAC,kBAAkB,CAACC,SAAoC,EAAQ;IAC7D,IAAM;MAAEF;IAAM,CAAC,GAAG,IAAI,CAACR,KAAK;IAC5B,IAAIU,SAAS,CAACF,KAAK,KAAKA,KAAK,EAAE;MAC7B;MACA,IAAI,CAACG,QAAQ,CAAC;QAAEH;MAAM,CAAC,CAAC;IAC1B;EACF;EAIAI,KAAK,GAAS;IAAA;IACZ,6BAAI,CAACX,WAAW,CAACY,OAAO,0DAAxB,sBAA0BD,KAAK,EAAE;EACnC;EAEAT,YAAY,CAACW,KAA0C,EAAQ;IAC7D,IAAI,CAACH,QAAQ,CAAC;MAAEH,KAAK,EAAEM,KAAK,CAACC,MAAM,CAACP;IAAM,CAAC,EAAE,IAAI,CAACH,UAAU,CAAC;EAC/D;EAEAA,UAAU,GAAS;IACjB,IAAM;MAAEW;IAAS,CAAC,GAAG,IAAI,CAAChB,KAAK;IAC/B,IAAM;MAAEQ;IAAM,CAAC,GAAG,IAAI,CAACD,KAAK;IAC5BS,QAAQ,CAACR,KAAK,CAAC;EACjB;EAEAS,MAAM,GAAgB;IACpB,IAAM;MACJC,WAAW;MACXC,SAAS;MACTC,UAAU;MACVC,EAAE;MACF,aAAa,EAAEC;IACjB,CAAC,GAAG,IAAI,CAACtB,KAAK;IACd,IAAM;MAAEQ;IAAM,CAAC,GAAG,IAAI,CAACD,KAAK;IAC5B,oBACE,KAAC,WAAW;MACV,KAAK,EAAEC,KAAM;MACb,WAAW,EAAEU,WAAY;MACzB,QAAQ,EAAE,IAAI,CAACf,YAAa;MAC5B,SAAS,EAAEgB,SAAU;MACrB,UAAU,EAAEC,UAAW;MACvB,GAAG,EAAE,IAAI,CAACnB,WAAY;MACtB,EAAE,EAAEoB,EAAG;MACP,eAAaC;IAAW,EACxB;EAEN;AACF;AAAC,gBAtEKxB,oBAAoB,kBAIF;EACpBoB,WAAW,EAAE,QAAQ;EACrBC,SAAS,EAAE,EAAE;EACbC,UAAU,EAAE,IAAI;EAChBd,UAAU,EAAE,GAAG;EACfe,EAAE,EAAE,EAAE;EACN,aAAa,EAAEE;AACjB,CAAC;AA6DH,eAAezB,oBAAoB"}

package/dist/DraggableItemList.js

@@ -1,4 +1,5 @@
-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); }
@@ -12,6 +13,8 @@ import { RangeUtils } from '@deephaven/utils';
 import ItemList from "./ItemList.js";
 import { Tooltip } from "./popper/index.js";
 import "./DraggableItemList.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Show a draggable item list. It _must_ be used within a `DragDropContext`.
  * This implementation uses react-beautiful-dnd for handling dragging and dropping of items.
@@ -21,17 +24,22 @@ import "./DraggableItemList.css";
  */
 class DraggableItemList extends PureComponent {
   static renderHandle() {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Tooltip, null, "Drag to re-order"), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      icon: vsGripper
-    }));
+    return /*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx(Tooltip, {
+        children: "Drag to re-order"
+      }), /*#__PURE__*/_jsx(FontAwesomeIcon, {
+        icon: vsGripper
+      })]
+    });
   }
   static renderBadge(_ref) {
     var {
       text
     } = _ref;
-    return text != null && text.length > 0 ? /*#__PURE__*/React.createElement("span", {
-      className: "number-badge"
-    }, text) : null;
+    return text != null && text.length > 0 ? /*#__PURE__*/_jsx("span", {
+      className: "number-badge",
+      children: text
+    }) : null;
   }
   static renderTextItem(_ref2) {
     var {
@@ -39,13 +47,15 @@ class DraggableItemList extends PureComponent {
       badgeText = '',
       className = ''
     } = _ref2;
-    return /*#__PURE__*/React.createElement("div", {
-      className: classNames('item-list-item-content', 'draggable-item-list-item-content', className)
-    }, /*#__PURE__*/React.createElement("span", {
-      className: "title"
-    }, text), DraggableItemList.renderBadge({
-      text: badgeText
-    }), DraggableItemList.renderHandle());
+    return /*#__PURE__*/_jsxs("div", {
+      className: classNames('item-list-item-content', 'draggable-item-list-item-content', className),
+      children: [/*#__PURE__*/_jsx("span", {
+        className: "title",
+        children: text
+      }), DraggableItemList.renderBadge({
+        text: badgeText
+      }), DraggableItemList.renderHandle()]
+    });
   }
   static renderItem(_ref3) {
     var _ref4, _item$displayValue;
@@ -73,25 +83,27 @@ class DraggableItemList extends PureComponent {
   constructor(props) {
     super(props);
     _defineProperty(this, "itemList", void 0);
-    _defineProperty(this, "getCachedDraggableItem", memoize((draggablePrefix, renderItem, item, itemIndex, isFocused, isSelected, isDragDisabled, style) => /*#__PURE__*/React.createElement(Draggable, {
-      key: itemIndex,
+    _defineProperty(this, "getCachedDraggableItem", memoize((draggablePrefix, renderItem, item, itemIndex, isFocused, isSelected, isDragDisabled, style) => /*#__PURE__*/_jsx(Draggable, {
       draggableId: DraggableItemList.getDraggableId(draggablePrefix, itemIndex),
       index: itemIndex,
-      isDragDisabled: isDragDisabled
-    }, provided => /*#__PURE__*/React.createElement("div", _extends({
-      role: "menuitem",
-      className: "draggable-item-list-item",
-      ref: provided.innerRef,
-      tabIndex: -1
-      // eslint-disable-next-line react/jsx-props-no-spreading
-    }, provided.draggableProps, provided.dragHandleProps), renderItem({
-      item,
-      itemIndex,
-      isFocused,
-      isSelected,
-      style,
-      isClone: false
-    }))), {
+      isDragDisabled: isDragDisabled,
+      children: provided => /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread(_objectSpread({
+        role: "menuitem",
+        className: "draggable-item-list-item",
+        ref: provided.innerRef,
+        tabIndex: -1
+        // eslint-disable-next-line react/jsx-props-no-spreading
+      }, provided.draggableProps), provided.dragHandleProps), {}, {
+        children: renderItem({
+          item,
+          itemIndex,
+          isFocused,
+          isSelected,
+          style,
+          isClone: false
+        })
+      }))
+    }, itemIndex), {
       max: ItemList.CACHE_SIZE
     }));
     _defineProperty(this, "getCachedRenderDraggableItem", memoize((draggablePrefix, isDragDisabled, renderItem) => _ref5 => {
@@ -122,26 +134,28 @@ class DraggableItemList extends PureComponent {
         index: itemIndex
       } = rubric.source;
       var item = items[itemIndex - offset];
-      return /*#__PURE__*/React.createElement("div", _extends({
+      return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread(_objectSpread({
         className: classNames('draggable-item-list-dragging-item-container', draggingItemClassName)
         // eslint-disable-next-line react/jsx-props-no-spreading
-      }, draggableProps, dragHandleProps, {
-        ref: innerRef
-      }), /*#__PURE__*/React.createElement("div", {
-        className: classNames('draggable-item-list-dragging-item', {
-          'two-dragged': selectedCount === 2
-        }, {
-          'multiple-dragged': selectedCount > 2
+      }, draggableProps), dragHandleProps), {}, {
+        ref: innerRef,
+        children: /*#__PURE__*/_jsx("div", {
+          className: classNames('draggable-item-list-dragging-item', {
+            'two-dragged': selectedCount === 2
+          }, {
+            'multiple-dragged': selectedCount > 2
+          }),
+          children: renderItem({
+            item,
+            itemIndex,
+            isFocused: false,
+            isSelected: true,
+            style: {},
+            isClone: true,
+            selectedCount
+          })
         })
-      }, renderItem({
-        item,
-        itemIndex,
-        isFocused: false,
-        isSelected: true,
-        style: {},
-        isClone: true,
-        selectedCount
-      })));
+      }));
     }, {
       max: 1
     }));
@@ -195,42 +209,45 @@ class DraggableItemList extends PureComponent {
       style,
       'data-testid': dataTestId
     } = this.props;
-    return /*#__PURE__*/React.createElement(Droppable, {
+    return /*#__PURE__*/_jsx(Droppable, {
       isDropDisabled: isDropDisabled,
       droppableId: droppableId,
       mode: "virtual",
       renderClone: this.getCachedRenderClone(draggingItemClassName, items, offset, renderItem),
-      "data-testid": dataTestId
-    }, (provided, snapshot) => /*#__PURE__*/React.createElement("div", _extends({
-      role: "menu",
-      className: classNames('draggable-item-list', className, {
-        'is-drop-disabled': isDropDisabled,
-        'is-drag-disabled': isDragDisabled,
-        'is-dragging-from-this': snapshot.draggingFromThisWith,
-        'is-dragging-over': snapshot.isDraggingOver,
-        'is-dropping': snapshot.draggingOverWith
-      }),
-      style: style,
-      ref: provided.innerRef
-      // eslint-disable-next-line react/jsx-props-no-spreading
-    }, provided.droppableProps), /*#__PURE__*/React.createElement(ItemList, {
-      focusSelector: ".draggable-item-list-item",
-      isDoubleClickSelect: isDoubleClickSelect,
-      isDragSelect: false,
-      isMultiSelect: isMultiSelect,
-      isStickyBottom: isStickyBottom,
-      itemCount: itemCount,
-      items: items,
-      onFocusChange: onFocusChange,
-      onSelect: onSelect,
-      onSelectionChange: this.handleSelectionChange,
-      onViewportChange: onViewportChange,
-      offset: offset,
-      ref: this.itemList,
-      renderItem: this.getCachedRenderDraggableItem(draggablePrefix, isDragDisabled, renderItem),
-      rowHeight: rowHeight,
-      selectedRanges: selectedRanges
-    })));
+      "data-testid": dataTestId,
+      children: (provided, snapshot) => /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+        role: "menu",
+        className: classNames('draggable-item-list', className, {
+          'is-drop-disabled': isDropDisabled,
+          'is-drag-disabled': isDragDisabled,
+          'is-dragging-from-this': snapshot.draggingFromThisWith,
+          'is-dragging-over': snapshot.isDraggingOver,
+          'is-dropping': snapshot.draggingOverWith
+        }),
+        style: style,
+        ref: provided.innerRef
+        // eslint-disable-next-line react/jsx-props-no-spreading
+      }, provided.droppableProps), {}, {
+        children: /*#__PURE__*/_jsx(ItemList, {
+          focusSelector: ".draggable-item-list-item",
+          isDoubleClickSelect: isDoubleClickSelect,
+          isDragSelect: false,
+          isMultiSelect: isMultiSelect,
+          isStickyBottom: isStickyBottom,
+          itemCount: itemCount,
+          items: items,
+          onFocusChange: onFocusChange,
+          onSelect: onSelect,
+          onSelectionChange: this.handleSelectionChange,
+          onViewportChange: onViewportChange,
+          offset: offset,
+          ref: this.itemList,
+          renderItem: this.getCachedRenderDraggableItem(draggablePrefix, isDragDisabled, renderItem),
+          rowHeight: rowHeight,
+          selectedRanges: selectedRanges
+        })
+      }))
+    });
   }
 }
 _defineProperty(DraggableItemList, "DEFAULT_ROW_HEIGHT", 30);

package/dist/DraggableItemList.js.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableItemList.js","names":["React","PureComponent","classNames","memoize","Draggable","Droppable","FontAwesomeIcon","vsGripper","RangeUtils","ItemList","Tooltip","DraggableItemList","renderHandle","renderBadge","text","length","renderTextItem","badgeText","className","renderItem","item","isClone","selectedCount","displayValue","value","undefined","getDraggableId","draggablePrefix","itemIndex","getDraggableIndex","draggableId","num","split","pop","parseInt","constructor","props","isFocused","isSelected","isDragDisabled","style","provided","innerRef","draggableProps","dragHandleProps","max","CACHE_SIZE","getCachedDraggableItem","draggingItemClassName","items","offset","snapshot","rubric","state","index","source","handleSelectionChange","bind","itemList","createRef","selectItem","current","focusItem","scrollToItem","selectedRanges","setState","count","onSelectionChange","render","droppableId","isDoubleClickSelect","isDropDisabled","isMultiSelect","isStickyBottom","itemCount","onFocusChange","onSelect","onViewportChange","rowHeight","dataTestId","getCachedRenderClone","draggingFromThisWith","isDraggingOver","draggingOverWith","droppableProps","getCachedRenderDraggableItem","DEFAULT_ROW_HEIGHT","isDeselectOnClick","disableSelect"],"sources":["../src/DraggableItemList.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport classNames from 'classnames';\nimport memoize from 'memoizee';\nimport { Draggable, Droppable, DraggableChildrenFn } from 'react-beautiful-dnd';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { vsGripper } from '@deephaven/icons';\nimport { RangeUtils, Range } from '@deephaven/utils';\nimport ItemList, {\n  RenderItemProps,\n  DefaultListItem,\n  ItemListProps,\n} from './ItemList';\nimport { Tooltip } from './popper';\nimport './DraggableItemList.scss';\n\nexport type DraggableRenderItemProps<T> = RenderItemProps<T> & {\n  isClone?: boolean;\n  selectedCount?: number;\n};\n\ntype DraggableRenderItemFn<T> = (\n  props: DraggableRenderItemProps<T>\n) => React.ReactNode;\n\ntype DraggableItemListProps<T> = Omit<\n  ItemListProps<T>,\n  'overscanCount' | 'focusSelector' | 'isDragSelect'\n> & {\n  className: string;\n  draggingItemClassName: string;\n  isDropDisabled: boolean;\n  // Whether to allow dragging items from this list\n  isDragDisabled: boolean;\n\n  renderItem: DraggableRenderItemFn<T>;\n  style: React.CSSProperties;\n\n  // The prefix to add to all draggable item IDs\n  draggablePrefix: string;\n  // The ID to give the droppable list\n  droppableId: string;\n\n  'data-testid'?: string;\n};\n\ntype DraggableItemListState = {\n  selectedCount: number;\n};\n\n/**\n * Show a draggable item list. It _must_ be used within a `DragDropContext`.\n * This implementation uses react-beautiful-dnd for handling dragging and dropping of items.\n * We use ItemList to handle selection for multi drag and drop (not built in to react-beautiful-dnd).\n * One caveat with the use of react-beautiful-dnd is that it doesn't allow a drag to be initiated while\n * using a modifier key: https://github.com/atlassian/react-beautiful-dnd/issues/1678\n */\nclass DraggableItemList<T> extends PureComponent<\n  DraggableItemListProps<T>,\n  DraggableItemListState\n> {\n  static DEFAULT_ROW_HEIGHT = 30;\n\n  static defaultProps = {\n    className: '',\n    draggingItemClassName: '',\n    offset: 0,\n    items: [],\n    rowHeight: DraggableItemList.DEFAULT_ROW_HEIGHT,\n    isDeselectOnClick: true,\n    isDoubleClickSelect: true,\n    isDropDisabled: false,\n    isDragDisabled: false,\n    isMultiSelect: false,\n    isStickyBottom: false,\n    disableSelect: false,\n    style: null,\n    onFocusChange(): void {\n      // no-op\n    },\n    onSelect(): void {\n      // no-op\n    },\n    onSelectionChange(): void {\n      // no-op\n    },\n    onViewportChange(): void {\n      // no-op\n    },\n    renderItem: DraggableItemList.renderItem,\n    selectedRanges: [],\n    draggablePrefix: 'draggable-item',\n    droppableId: 'droppable-item-list',\n    'data-testid': undefined,\n  };\n\n  static renderHandle(): JSX.Element {\n    return (\n      <div>\n        <Tooltip>Drag to re-order</Tooltip>\n        <FontAwesomeIcon icon={vsGripper} />\n      </div>\n    );\n  }\n\n  static renderBadge({ text }: { text?: string }): React.ReactNode {\n    return text != null && text.length > 0 ? (\n      <span className=\"number-badge\">{text}</span>\n    ) : null;\n  }\n\n  static renderTextItem({\n    text,\n    badgeText = '',\n    className = '',\n  }: {\n    text?: string;\n    badgeText?: string;\n    className: string;\n  }): JSX.Element {\n    return (\n      <div\n        className={classNames(\n          'item-list-item-content',\n          'draggable-item-list-item-content',\n          className\n        )}\n      >\n        <span className=\"title\">{text}</span>\n        {DraggableItemList.renderBadge({ text: badgeText })}\n        {DraggableItemList.renderHandle()}\n      </div>\n    );\n  }\n\n  static renderItem<P extends DefaultListItem>({\n    item,\n    isClone,\n    selectedCount,\n  }: DraggableRenderItemProps<P>): JSX.Element {\n    const text =\n      item != null ? item.displayValue ?? item.value ?? `${item}` : '';\n    const badgeText =\n      isClone !== undefined && isClone ? `${selectedCount}` : '';\n    const className =\n      isClone !== undefined && isClone ? 'item-list-item-clone' : '';\n    return DraggableItemList.renderTextItem({ text, badgeText, className });\n  }\n\n  static getDraggableId(draggablePrefix: string, itemIndex: number): string {\n    return `${draggablePrefix}/${itemIndex}`;\n  }\n\n  static getDraggableIndex(draggableId: string): number {\n    const num = draggableId.split('/').pop();\n    return parseInt(num !== undefined ? num : '', 10);\n  }\n\n  constructor(props: DraggableItemListProps<T>) {\n    super(props);\n\n    this.handleSelectionChange = this.handleSelectionChange.bind(this);\n\n    this.itemList = React.createRef();\n\n    this.state = {\n      selectedCount: 0,\n    };\n  }\n\n  itemList: React.RefObject<ItemList<T>>;\n\n  selectItem(itemIndex: number): void {\n    this.itemList.current?.selectItem(itemIndex);\n  }\n\n  focusItem(itemIndex: number): void {\n    this.itemList.current?.focusItem(itemIndex);\n  }\n\n  scrollToItem(itemIndex: number): void {\n    this.itemList.current?.scrollToItem(itemIndex);\n  }\n\n  getCachedDraggableItem = memoize(\n    (\n      draggablePrefix: string,\n      renderItem: DraggableRenderItemFn<T>,\n      item: T,\n      itemIndex: number,\n      isFocused: boolean,\n      isSelected: boolean,\n      isDragDisabled: boolean,\n      style: React.CSSProperties\n    ) => (\n      <Draggable\n        key={itemIndex}\n        draggableId={DraggableItemList.getDraggableId(\n          draggablePrefix,\n          itemIndex\n        )}\n        index={itemIndex}\n        isDragDisabled={isDragDisabled}\n      >\n        {provided => (\n          <div\n            role=\"menuitem\"\n            className=\"draggable-item-list-item\"\n            ref={provided.innerRef}\n            tabIndex={-1}\n            // eslint-disable-next-line react/jsx-props-no-spreading\n            {...provided.draggableProps}\n            // eslint-disable-next-line react/jsx-props-no-spreading\n            {...provided.dragHandleProps}\n          >\n            {renderItem({\n              item,\n              itemIndex,\n              isFocused,\n              isSelected,\n              style,\n              isClone: false,\n            })}\n          </div>\n        )}\n      </Draggable>\n    ),\n    { max: ItemList.CACHE_SIZE }\n  );\n\n  handleSelectionChange(selectedRanges: Range[]): void {\n    this.setState({ selectedCount: RangeUtils.count(selectedRanges) });\n\n    const { onSelectionChange } = this.props;\n    onSelectionChange(selectedRanges);\n  }\n\n  getCachedRenderDraggableItem = memoize(\n    (\n      draggablePrefix: string,\n      isDragDisabled: boolean,\n      renderItem: DraggableRenderItemFn<T>\n    ) =>\n      ({ item, itemIndex, isFocused, isSelected, style }: RenderItemProps<T>) =>\n        this.getCachedDraggableItem(\n          draggablePrefix,\n          renderItem,\n          item,\n          itemIndex,\n          isFocused,\n          isSelected,\n          isDragDisabled,\n          style\n        ),\n    { max: 1 }\n  );\n\n  getCachedRenderClone = memoize(\n    (\n      draggingItemClassName: string,\n      items: readonly T[],\n      offset: number,\n      renderItem: DraggableRenderItemFn<T>\n    ): DraggableChildrenFn =>\n      // eslint-disable-next-line react/no-unstable-nested-components, react/display-name, react/function-component-definition\n      (provided, snapshot, rubric) => {\n        // eslint-disable-next-line react/no-this-in-sfc\n        const { selectedCount } = this.state;\n        const { draggableProps, dragHandleProps, innerRef } = provided;\n        const { index: itemIndex } = rubric.source;\n        const item = items[itemIndex - offset];\n        return (\n          <div\n            className={classNames(\n              'draggable-item-list-dragging-item-container',\n              draggingItemClassName\n            )}\n            // eslint-disable-next-line react/jsx-props-no-spreading\n            {...draggableProps}\n            // eslint-disable-next-line react/jsx-props-no-spreading\n            {...dragHandleProps}\n            ref={innerRef}\n          >\n            <div\n              className={classNames(\n                'draggable-item-list-dragging-item',\n                { 'two-dragged': selectedCount === 2 },\n                { 'multiple-dragged': selectedCount > 2 }\n              )}\n            >\n              {renderItem({\n                item,\n                itemIndex,\n                isFocused: false,\n                isSelected: true,\n                style: {},\n                isClone: true,\n                selectedCount,\n              })}\n            </div>\n          </div>\n        );\n      },\n    { max: 1 }\n  );\n\n  render(): JSX.Element {\n    const {\n      className,\n      draggablePrefix,\n      draggingItemClassName,\n      droppableId,\n      isDoubleClickSelect,\n      isDragDisabled,\n      isDropDisabled,\n      isMultiSelect,\n      isStickyBottom,\n      itemCount,\n      items,\n      offset,\n      onFocusChange,\n      onSelect,\n      onViewportChange,\n      renderItem,\n      rowHeight,\n      selectedRanges,\n      style,\n      'data-testid': dataTestId,\n    } = this.props;\n    return (\n      <Droppable\n        isDropDisabled={isDropDisabled}\n        droppableId={droppableId}\n        mode=\"virtual\"\n        renderClone={this.getCachedRenderClone(\n          draggingItemClassName,\n          items,\n          offset,\n          renderItem\n        )}\n        data-testid={dataTestId}\n      >\n        {(provided, snapshot) => (\n          <div\n            role=\"menu\"\n            className={classNames('draggable-item-list', className, {\n              'is-drop-disabled': isDropDisabled,\n              'is-drag-disabled': isDragDisabled,\n              'is-dragging-from-this': snapshot.draggingFromThisWith,\n              'is-dragging-over': snapshot.isDraggingOver,\n              'is-dropping': snapshot.draggingOverWith,\n            })}\n            style={style}\n            ref={provided.innerRef}\n            // eslint-disable-next-line react/jsx-props-no-spreading\n            {...provided.droppableProps}\n          >\n            <ItemList\n              focusSelector=\".draggable-item-list-item\"\n              isDoubleClickSelect={isDoubleClickSelect}\n              isDragSelect={false}\n              isMultiSelect={isMultiSelect}\n              isStickyBottom={isStickyBottom}\n              itemCount={itemCount}\n              items={items}\n              onFocusChange={onFocusChange}\n              onSelect={onSelect}\n              onSelectionChange={this.handleSelectionChange}\n              onViewportChange={onViewportChange}\n              offset={offset}\n              ref={this.itemList}\n              renderItem={this.getCachedRenderDraggableItem(\n                draggablePrefix,\n                isDragDisabled,\n                renderItem\n              )}\n              rowHeight={rowHeight}\n              selectedRanges={selectedRanges}\n            />\n          </div>\n        )}\n      </Droppable>\n    );\n  }\n}\n\nexport default DraggableItemList;\n"],"mappings":"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"}
+{"version":3,"file":"DraggableItemList.js","names":["React","PureComponent","classNames","memoize","Draggable","Droppable","FontAwesomeIcon","vsGripper","RangeUtils","ItemList","Tooltip","DraggableItemList","renderHandle","renderBadge","text","length","renderTextItem","badgeText","className","renderItem","item","isClone","selectedCount","displayValue","value","undefined","getDraggableId","draggablePrefix","itemIndex","getDraggableIndex","draggableId","num","split","pop","parseInt","constructor","props","isFocused","isSelected","isDragDisabled","style","provided","innerRef","draggableProps","dragHandleProps","max","CACHE_SIZE","getCachedDraggableItem","draggingItemClassName","items","offset","snapshot","rubric","state","index","source","handleSelectionChange","bind","itemList","createRef","selectItem","current","focusItem","scrollToItem","selectedRanges","setState","count","onSelectionChange","render","droppableId","isDoubleClickSelect","isDropDisabled","isMultiSelect","isStickyBottom","itemCount","onFocusChange","onSelect","onViewportChange","rowHeight","dataTestId","getCachedRenderClone","draggingFromThisWith","isDraggingOver","draggingOverWith","droppableProps","getCachedRenderDraggableItem","DEFAULT_ROW_HEIGHT","isDeselectOnClick","disableSelect"],"sources":["../src/DraggableItemList.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport classNames from 'classnames';\nimport memoize from 'memoizee';\nimport { Draggable, Droppable, DraggableChildrenFn } from 'react-beautiful-dnd';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { vsGripper } from '@deephaven/icons';\nimport { RangeUtils, Range } from '@deephaven/utils';\nimport ItemList, {\n  RenderItemProps,\n  DefaultListItem,\n  ItemListProps,\n} from './ItemList';\nimport { Tooltip } from './popper';\nimport './DraggableItemList.scss';\n\nexport type DraggableRenderItemProps<T> = RenderItemProps<T> & {\n  isClone?: boolean;\n  selectedCount?: number;\n};\n\ntype DraggableRenderItemFn<T> = (\n  props: DraggableRenderItemProps<T>\n) => React.ReactNode;\n\ntype DraggableItemListProps<T> = Omit<\n  ItemListProps<T>,\n  'overscanCount' | 'focusSelector' | 'isDragSelect'\n> & {\n  className: string;\n  draggingItemClassName: string;\n  isDropDisabled: boolean;\n  // Whether to allow dragging items from this list\n  isDragDisabled: boolean;\n\n  renderItem: DraggableRenderItemFn<T>;\n  style: React.CSSProperties;\n\n  // The prefix to add to all draggable item IDs\n  draggablePrefix: string;\n  // The ID to give the droppable list\n  droppableId: string;\n\n  'data-testid'?: string;\n};\n\ntype DraggableItemListState = {\n  selectedCount: number;\n};\n\n/**\n * Show a draggable item list. It _must_ be used within a `DragDropContext`.\n * This implementation uses react-beautiful-dnd for handling dragging and dropping of items.\n * We use ItemList to handle selection for multi drag and drop (not built in to react-beautiful-dnd).\n * One caveat with the use of react-beautiful-dnd is that it doesn't allow a drag to be initiated while\n * using a modifier key: https://github.com/atlassian/react-beautiful-dnd/issues/1678\n */\nclass DraggableItemList<T> extends PureComponent<\n  DraggableItemListProps<T>,\n  DraggableItemListState\n> {\n  static DEFAULT_ROW_HEIGHT = 30;\n\n  static defaultProps = {\n    className: '',\n    draggingItemClassName: '',\n    offset: 0,\n    items: [],\n    rowHeight: DraggableItemList.DEFAULT_ROW_HEIGHT,\n    isDeselectOnClick: true,\n    isDoubleClickSelect: true,\n    isDropDisabled: false,\n    isDragDisabled: false,\n    isMultiSelect: false,\n    isStickyBottom: false,\n    disableSelect: false,\n    style: null,\n    onFocusChange(): void {\n      // no-op\n    },\n    onSelect(): void {\n      // no-op\n    },\n    onSelectionChange(): void {\n      // no-op\n    },\n    onViewportChange(): void {\n      // no-op\n    },\n    renderItem: DraggableItemList.renderItem,\n    selectedRanges: [],\n    draggablePrefix: 'draggable-item',\n    droppableId: 'droppable-item-list',\n    'data-testid': undefined,\n  };\n\n  static renderHandle(): JSX.Element {\n    return (\n      <div>\n        <Tooltip>Drag to re-order</Tooltip>\n        <FontAwesomeIcon icon={vsGripper} />\n      </div>\n    );\n  }\n\n  static renderBadge({ text }: { text?: string }): React.ReactNode {\n    return text != null && text.length > 0 ? (\n      <span className=\"number-badge\">{text}</span>\n    ) : null;\n  }\n\n  static renderTextItem({\n    text,\n    badgeText = '',\n    className = '',\n  }: {\n    text?: string;\n    badgeText?: string;\n    className: string;\n  }): JSX.Element {\n    return (\n      <div\n        className={classNames(\n          'item-list-item-content',\n          'draggable-item-list-item-content',\n          className\n        )}\n      >\n        <span className=\"title\">{text}</span>\n        {DraggableItemList.renderBadge({ text: badgeText })}\n        {DraggableItemList.renderHandle()}\n      </div>\n    );\n  }\n\n  static renderItem<P extends DefaultListItem>({\n    item,\n    isClone,\n    selectedCount,\n  }: DraggableRenderItemProps<P>): JSX.Element {\n    const text =\n      item != null ? item.displayValue ?? item.value ?? `${item}` : '';\n    const badgeText =\n      isClone !== undefined && isClone ? `${selectedCount}` : '';\n    const className =\n      isClone !== undefined && isClone ? 'item-list-item-clone' : '';\n    return DraggableItemList.renderTextItem({ text, badgeText, className });\n  }\n\n  static getDraggableId(draggablePrefix: string, itemIndex: number): string {\n    return `${draggablePrefix}/${itemIndex}`;\n  }\n\n  static getDraggableIndex(draggableId: string): number {\n    const num = draggableId.split('/').pop();\n    return parseInt(num !== undefined ? num : '', 10);\n  }\n\n  constructor(props: DraggableItemListProps<T>) {\n    super(props);\n\n    this.handleSelectionChange = this.handleSelectionChange.bind(this);\n\n    this.itemList = React.createRef();\n\n    this.state = {\n      selectedCount: 0,\n    };\n  }\n\n  itemList: React.RefObject<ItemList<T>>;\n\n  selectItem(itemIndex: number): void {\n    this.itemList.current?.selectItem(itemIndex);\n  }\n\n  focusItem(itemIndex: number): void {\n    this.itemList.current?.focusItem(itemIndex);\n  }\n\n  scrollToItem(itemIndex: number): void {\n    this.itemList.current?.scrollToItem(itemIndex);\n  }\n\n  getCachedDraggableItem = memoize(\n    (\n      draggablePrefix: string,\n      renderItem: DraggableRenderItemFn<T>,\n      item: T,\n      itemIndex: number,\n      isFocused: boolean,\n      isSelected: boolean,\n      isDragDisabled: boolean,\n      style: React.CSSProperties\n    ) => (\n      <Draggable\n        key={itemIndex}\n        draggableId={DraggableItemList.getDraggableId(\n          draggablePrefix,\n          itemIndex\n        )}\n        index={itemIndex}\n        isDragDisabled={isDragDisabled}\n      >\n        {provided => (\n          <div\n            role=\"menuitem\"\n            className=\"draggable-item-list-item\"\n            ref={provided.innerRef}\n            tabIndex={-1}\n            // eslint-disable-next-line react/jsx-props-no-spreading\n            {...provided.draggableProps}\n            // eslint-disable-next-line react/jsx-props-no-spreading\n            {...provided.dragHandleProps}\n          >\n            {renderItem({\n              item,\n              itemIndex,\n              isFocused,\n              isSelected,\n              style,\n              isClone: false,\n            })}\n          </div>\n        )}\n      </Draggable>\n    ),\n    { max: ItemList.CACHE_SIZE }\n  );\n\n  handleSelectionChange(selectedRanges: Range[]): void {\n    this.setState({ selectedCount: RangeUtils.count(selectedRanges) });\n\n    const { onSelectionChange } = this.props;\n    onSelectionChange(selectedRanges);\n  }\n\n  getCachedRenderDraggableItem = memoize(\n    (\n      draggablePrefix: string,\n      isDragDisabled: boolean,\n      renderItem: DraggableRenderItemFn<T>\n    ) =>\n      ({ item, itemIndex, isFocused, isSelected, style }: RenderItemProps<T>) =>\n        this.getCachedDraggableItem(\n          draggablePrefix,\n          renderItem,\n          item,\n          itemIndex,\n          isFocused,\n          isSelected,\n          isDragDisabled,\n          style\n        ),\n    { max: 1 }\n  );\n\n  getCachedRenderClone = memoize(\n    (\n      draggingItemClassName: string,\n      items: readonly T[],\n      offset: number,\n      renderItem: DraggableRenderItemFn<T>\n    ): DraggableChildrenFn =>\n      // eslint-disable-next-line react/no-unstable-nested-components, react/display-name, react/function-component-definition\n      (provided, snapshot, rubric) => {\n        // eslint-disable-next-line react/no-this-in-sfc\n        const { selectedCount } = this.state;\n        const { draggableProps, dragHandleProps, innerRef } = provided;\n        const { index: itemIndex } = rubric.source;\n        const item = items[itemIndex - offset];\n        return (\n          <div\n            className={classNames(\n              'draggable-item-list-dragging-item-container',\n              draggingItemClassName\n            )}\n            // eslint-disable-next-line react/jsx-props-no-spreading\n            {...draggableProps}\n            // eslint-disable-next-line react/jsx-props-no-spreading\n            {...dragHandleProps}\n            ref={innerRef}\n          >\n            <div\n              className={classNames(\n                'draggable-item-list-dragging-item',\n                { 'two-dragged': selectedCount === 2 },\n                { 'multiple-dragged': selectedCount > 2 }\n              )}\n            >\n              {renderItem({\n                item,\n                itemIndex,\n                isFocused: false,\n                isSelected: true,\n                style: {},\n                isClone: true,\n                selectedCount,\n              })}\n            </div>\n          </div>\n        );\n      },\n    { max: 1 }\n  );\n\n  render(): JSX.Element {\n    const {\n      className,\n      draggablePrefix,\n      draggingItemClassName,\n      droppableId,\n      isDoubleClickSelect,\n      isDragDisabled,\n      isDropDisabled,\n      isMultiSelect,\n      isStickyBottom,\n      itemCount,\n      items,\n      offset,\n      onFocusChange,\n      onSelect,\n      onViewportChange,\n      renderItem,\n      rowHeight,\n      selectedRanges,\n      style,\n      'data-testid': dataTestId,\n    } = this.props;\n    return (\n      <Droppable\n        isDropDisabled={isDropDisabled}\n        droppableId={droppableId}\n        mode=\"virtual\"\n        renderClone={this.getCachedRenderClone(\n          draggingItemClassName,\n          items,\n          offset,\n          renderItem\n        )}\n        data-testid={dataTestId}\n      >\n        {(provided, snapshot) => (\n          <div\n            role=\"menu\"\n            className={classNames('draggable-item-list', className, {\n              'is-drop-disabled': isDropDisabled,\n              'is-drag-disabled': isDragDisabled,\n              'is-dragging-from-this': snapshot.draggingFromThisWith,\n              'is-dragging-over': snapshot.isDraggingOver,\n              'is-dropping': snapshot.draggingOverWith,\n            })}\n            style={style}\n            ref={provided.innerRef}\n            // eslint-disable-next-line react/jsx-props-no-spreading\n            {...provided.droppableProps}\n          >\n            <ItemList\n              focusSelector=\".draggable-item-list-item\"\n              isDoubleClickSelect={isDoubleClickSelect}\n              isDragSelect={false}\n              isMultiSelect={isMultiSelect}\n              isStickyBottom={isStickyBottom}\n              itemCount={itemCount}\n              items={items}\n              onFocusChange={onFocusChange}\n              onSelect={onSelect}\n              onSelectionChange={this.handleSelectionChange}\n              onViewportChange={onViewportChange}\n              offset={offset}\n              ref={this.itemList}\n              renderItem={this.getCachedRenderDraggableItem(\n                draggablePrefix,\n                isDragDisabled,\n                renderItem\n              )}\n              rowHeight={rowHeight}\n              selectedRanges={selectedRanges}\n            />\n          </div>\n        )}\n      </Droppable>\n    );\n  }\n}\n\nexport default DraggableItemList;\n"],"mappings":"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"}

package/dist/EditableItemList.js

@@ -4,6 +4,8 @@ import clamp from 'lodash.clamp';
 import { vsAdd, vsTrash } from '@deephaven/icons';
 import { RangeUtils } from '@deephaven/utils';
 import { Button, ItemList } from "./index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 // Display a list of items with an input for adding new items, and Add/Delete buttons
 function EditableItemList(props) {
   var {
@@ -51,55 +53,60 @@ function EditableItemList(props) {
     }
   }, [handleAdd]);
   var containerHeight = useMemo(() => 14 + clamp(items.length, 1, 6) * ItemList.DEFAULT_ROW_HEIGHT, [items.length]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: classNames('editable-item-list-container', {
       'is-invalid': isInvalid
-    })
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      height: containerHeight
-    }
-  }, /*#__PURE__*/React.createElement(ItemList, {
-    itemCount: items.length,
-    items: items.map((item, index) => ({
-      value: item,
-      isSelected: RangeUtils.isSelected(selectedRanges, index)
-    })),
-    offset: 0,
-    selectedRanges: selectedRanges,
-    onSelectionChange: handleSelectionChange,
-    isMultiSelect: true
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "d-flex flex-row pt-2"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "d-flex flex-grow-1"
-  }, /*#__PURE__*/React.createElement("input", {
-    className: classNames('form-control', {
-      'is-invalid': inputError != null
     }),
-    placeholder: "Enter value",
-    type: "text",
-    value: value,
-    onChange: handleInputChange,
-    onFocus: handleInputFocus,
-    onKeyDown: handleInputKeyDown
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "d-flex align-items-start mt-1 ml-2"
-  }, /*#__PURE__*/React.createElement(Button, {
-    kind: "ghost",
-    onClick: handleAdd,
-    disabled: inputError != null || value === '',
-    icon: vsAdd,
-    tooltip: "Add new item",
-    "data-testid": "add-item-button"
-  }), /*#__PURE__*/React.createElement(Button, {
-    kind: "ghost",
-    onClick: handleDelete,
-    disabled: selectedRanges.length === 0,
-    icon: vsTrash,
-    tooltip: "Delete selected items",
-    "data-testid": "delete-item-button"
-  }))));
+    children: [/*#__PURE__*/_jsx("div", {
+      style: {
+        height: containerHeight
+      },
+      children: /*#__PURE__*/_jsx(ItemList, {
+        itemCount: items.length,
+        items: items.map((item, index) => ({
+          value: item,
+          isSelected: RangeUtils.isSelected(selectedRanges, index)
+        })),
+        offset: 0,
+        selectedRanges: selectedRanges,
+        onSelectionChange: handleSelectionChange,
+        isMultiSelect: true
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "d-flex flex-row pt-2",
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "d-flex flex-grow-1",
+        children: /*#__PURE__*/_jsx("input", {
+          className: classNames('form-control', {
+            'is-invalid': inputError != null
+          }),
+          placeholder: "Enter value",
+          type: "text",
+          value: value,
+          onChange: handleInputChange,
+          onFocus: handleInputFocus,
+          onKeyDown: handleInputKeyDown
+        })
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "d-flex align-items-start mt-1 ml-2",
+        children: [/*#__PURE__*/_jsx(Button, {
+          kind: "ghost",
+          onClick: handleAdd,
+          disabled: inputError != null || value === '',
+          icon: vsAdd,
+          tooltip: "Add new item",
+          "data-testid": "add-item-button"
+        }), /*#__PURE__*/_jsx(Button, {
+          kind: "ghost",
+          onClick: handleDelete,
+          disabled: selectedRanges.length === 0,
+          icon: vsTrash,
+          tooltip: "Delete selected items",
+          "data-testid": "delete-item-button"
+        })]
+      })]
+    })]
+  });
 }
 export default EditableItemList;
 //# sourceMappingURL=EditableItemList.js.map