@deephaven/components 0.13.4 → 0.13.7

package/dist/Button.d.ts

@@ -24,6 +24,6 @@ declare type IconOnlyButton = BaseButtonProps & {
     icon: IconDefinition | JSX.Element;
     children?: undefined;
 };
-declare const Button: React.ForwardRefExoticComponent<(Pick<ButtonWithChildren, "className" | "data-testid" | "dir" | "form" | "slot" | "style" | "title" | "children" | "tooltip" | "onClick" | "onKeyDown" | "onBlur" | "tabIndex" | "role" | "value" | "onChange" | "disabled" | "spellCheck" | "type" | "onFocus" | "placeholder" | "id" | "onMouseDown" | "onPaste" | "key" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "kind" | "icon" | "variant" | "active"> | Pick<IconOnlyButton, "className" | "data-testid" | "dir" | "form" | "slot" | "style" | "title" | "children" | "tooltip" | "onClick" | "onKeyDown" | "onBlur" | "tabIndex" | "role" | "value" | "onChange" | "disabled" | "spellCheck" | "type" | "onFocus" | "placeholder" | "id" | "onMouseDown" | "onPaste" | "key" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "kind" | "icon" | "variant" | "active">) & React.RefAttributes<HTMLButtonElement>>;
+declare const Button: React.ForwardRefExoticComponent<(Pick<ButtonWithChildren, "className" | "placeholder" | "value" | "onChange" | "onSelect" | "onFocus" | "onBlur" | "data-testid" | "key" | "form" | "slot" | "style" | "title" | "color" | "hidden" | "type" | "onKeyDown" | "onSelectCapture" | "dir" | "defaultChecked" | "defaultValue" | "disabled" | "formAction" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "children" | "tooltip" | "onClick" | "tabIndex" | "role" | "spellCheck" | "id" | "onMouseDown" | "onPaste" | "autoFocus" | "formEncType" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "lang" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "kind" | "icon" | "variant" | "active"> | Pick<IconOnlyButton, "className" | "placeholder" | "value" | "onChange" | "onSelect" | "onFocus" | "onBlur" | "data-testid" | "key" | "form" | "slot" | "style" | "title" | "color" | "hidden" | "type" | "onKeyDown" | "onSelectCapture" | "dir" | "defaultChecked" | "defaultValue" | "disabled" | "formAction" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "children" | "tooltip" | "onClick" | "tabIndex" | "role" | "spellCheck" | "id" | "onMouseDown" | "onPaste" | "autoFocus" | "formEncType" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "lang" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "kind" | "icon" | "variant" | "active">) & React.RefAttributes<HTMLButtonElement>>;
 export default Button;
 //# sourceMappingURL=Button.d.ts.map

package/dist/DateInput.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+declare type DateInputProps = {
+    className?: string;
+    onChange?(date?: string): void;
+    defaultValue?: string;
+    onFocus?(): void;
+    onBlur?(): void;
+    'data-testid'?: string;
+};
+declare const DateInput: React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<HTMLInputElement>>;
+export default DateInput;
+//# sourceMappingURL=DateInput.d.ts.map

package/dist/DateInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../src/DateInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAYrD,aAAK,cAAc,GAAG;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,MAAM,CAAC,IAAI,IAAI,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,QAAA,MAAM,SAAS,yFA0Cd,CAAC;AAaF,eAAe,SAAS,CAAC"}

package/dist/DateInput.js

@@ -0,0 +1,54 @@
+import React, { useCallback, useState } from 'react';
+import classNames from 'classnames';
+import Log from '@deephaven/log';
+import MaskedInput from "./MaskedInput.js";
+import { getNextSegmentValue } from "./DateInputUtils.js";
+var log = Log.module('DateInput');
+var DATE_PATTERN = '[12][0-9]{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])';
+var EXAMPLES = ['2000-01-01', '2022-12-31'];
+var DATE_FORMAT = 'YYYY-MM-DD';
+var DateInput = /*#__PURE__*/React.forwardRef((props, ref) => {
+  var {
+    className = '',
+    onChange = () => undefined,
+    defaultValue = '',
+    onFocus = () => undefined,
+    onBlur = () => undefined,
+    'data-testid': dataTestId
+  } = props;
+  var [value, setValue] = useState(defaultValue);
+  var [selection, setSelection] = useState();
+  var handleChange = useCallback(newValue => {
+    log.debug('handleChange', newValue);
+    setValue(newValue);
+    onChange(newValue);
+  }, [onChange]);
+  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,
+    pattern: DATE_PATTERN,
+    placeholder: DATE_FORMAT,
+    selection: selection,
+    value: value,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    "data-testid": dataTestId
+  }));
+});
+DateInput.displayName = 'DateInput';
+DateInput.defaultProps = {
+  className: '',
+  onChange: () => false,
+  defaultValue: '',
+  onFocus: () => false,
+  onBlur: () => false,
+  'data-testid': undefined
+};
+export default DateInput;
+//# sourceMappingURL=DateInput.js.map

package/dist/DateInput.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/DateInput.tsx"],"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"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,QAA7B,QAA6C,OAA7C;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,GAAP,MAAgB,gBAAhB;OACOC,W;SACEC,mB;AAET,IAAMC,GAAG,GAAGH,GAAG,CAACI,MAAJ,CAAW,WAAX,CAAZ;AAEA,IAAMC,YAAY,GAAG,yDAArB;AACA,IAAMC,QAAQ,GAAG,CAAC,YAAD,EAAe,YAAf,CAAjB;AACA,IAAMC,WAAW,GAAG,YAApB;AAWA,IAAMC,SAAS,gBAAGZ,KAAK,CAACa,UAAN,CAChB,CAACC,KAAD,EAAwBC,GAAxB,KAAgC;AAC9B,MAAM;AACJC,IAAAA,SAAS,GAAG,EADR;AAEJC,IAAAA,QAAQ,GAAG,MAAMC,SAFb;AAGJC,IAAAA,YAAY,GAAG,EAHX;AAIJC,IAAAA,OAAO,GAAG,MAAMF,SAJZ;AAKJG,IAAAA,MAAM,GAAG,MAAMH,SALX;AAMJ,mBAAeI;AANX,MAOFR,KAPJ;AAQA,MAAM,CAACS,KAAD,EAAQC,QAAR,IAAoBtB,QAAQ,CAACiB,YAAD,CAAlC;AACA,MAAM,CAACM,SAAD,EAAYC,YAAZ,IAA4BxB,QAAQ,EAA1C;AAEA,MAAMyB,YAAY,GAAG1B,WAAW,CAC7B2B,QAAD,IAA4B;AAC1BrB,IAAAA,GAAG,CAACsB,KAAJ,CAAU,cAAV,EAA0BD,QAA1B;AACAJ,IAAAA,QAAQ,CAACI,QAAD,CAAR;AACAX,IAAAA,QAAQ,CAACW,QAAD,CAAR;AACD,GAL6B,EAM9B,CAACX,QAAD,CAN8B,CAAhC;AASA,sBACE;AAAK,IAAA,SAAS,EAAC;AAAf,kBACE,oBAAC,WAAD;AACE,IAAA,GAAG,EAAEF,GADP;AAEE,IAAA,SAAS,EAAEZ,UAAU,CAACa,SAAD,CAFvB;AAGE,IAAA,OAAO,EAAEN,QAHX;AAIE,IAAA,mBAAmB,EAAEJ,mBAJvB;AAKE,IAAA,QAAQ,EAAEqB,YALZ;AAME,IAAA,QAAQ,EAAED,YANZ;AAOE,IAAA,OAAO,EAAEjB,YAPX;AAQE,IAAA,WAAW,EAAEE,WARf;AASE,IAAA,SAAS,EAAEc,SATb;AAUE,IAAA,KAAK,EAAEF,KAVT;AAWE,IAAA,OAAO,EAAEH,OAXX;AAYE,IAAA,MAAM,EAAEC,MAZV;AAaE,mBAAaC;AAbf,IADF,CADF;AAmBD,CAzCe,CAAlB;AA4CAV,SAAS,CAACkB,WAAV,GAAwB,WAAxB;AAEAlB,SAAS,CAACmB,YAAV,GAAyB;AACvBf,EAAAA,SAAS,EAAE,EADY;AAEvBC,EAAAA,QAAQ,EAAE,MAAM,KAFO;AAGvBE,EAAAA,YAAY,EAAE,EAHS;AAIvBC,EAAAA,OAAO,EAAE,MAAM,KAJQ;AAKvBC,EAAAA,MAAM,EAAE,MAAM,KALS;AAMvB,iBAAeH;AANQ,CAAzB;AASA,eAAeN,SAAf","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"],"file":"DateInput.js"}

package/dist/DateInputUtils.d.ts

@@ -0,0 +1,4 @@
+import { SelectionSegment } from './MaskedInput';
+export declare function getNextNumberSegmentValue(delta: number, segmentValue: string, lowerBound: number, upperBound: number, length: number): string;
+export declare function getNextSegmentValue(range: SelectionSegment, delta: number, segmentValue: string): string;
+//# sourceMappingURL=DateInputUtils.d.ts.map

package/dist/DateInputUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInputUtils.d.ts","sourceRoot":"","sources":["../src/DateInputUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEjD,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,MAAM,EACpB,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,MAAM,GACb,MAAM,CAQR;AAED,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,gBAAgB,EACvB,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,MAAM,GACnB,MAAM,CAyBR"}

package/dist/DateInputUtils.js

@@ -0,0 +1,40 @@
+export function getNextNumberSegmentValue(delta, segmentValue, lowerBound, upperBound, length) {
+  var modValue = upperBound - lowerBound + 1;
+  var newSegmentValue = ((parseInt(segmentValue, 10) - delta - lowerBound) % modValue + modValue) % modValue + lowerBound;
+  return "".concat(newSegmentValue).padStart(length, '0');
+}
+export function getNextSegmentValue(range, delta, segmentValue) {
+  var {
+    selectionStart
+  } = range;
+
+  if (selectionStart === 0) {
+    return getNextNumberSegmentValue(delta, segmentValue, 1900, 2099, 4);
+  }
+
+  if (selectionStart === 5) {
+    return getNextNumberSegmentValue(delta, segmentValue, 1, 12, 2);
+  }
+
+  if (selectionStart === 8) {
+    return getNextNumberSegmentValue(delta, segmentValue, 1, 31, 2);
+  }
+
+  if (selectionStart === 11) {
+    // Hours input
+    return getNextNumberSegmentValue(delta, segmentValue, 0, 23, 2);
+  }
+
+  if (selectionStart === 17 || selectionStart === 14) {
+    // Minutes/seconds input
+    return getNextNumberSegmentValue(delta, segmentValue, 0, 59, 2);
+  }
+
+  if (selectionStart === 20 || selectionStart === 24 || selectionStart === 28) {
+    // Milli, micro, and nanosecond input
+    return getNextNumberSegmentValue(delta, segmentValue, 0, 999, 3);
+  }
+
+  return segmentValue;
+}
+//# sourceMappingURL=DateInputUtils.js.map

package/dist/DateInputUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/DateInputUtils.ts"],"names":["getNextNumberSegmentValue","delta","segmentValue","lowerBound","upperBound","length","modValue","newSegmentValue","parseInt","padStart","getNextSegmentValue","range","selectionStart"],"mappings":"AAEA,OAAO,SAASA,yBAAT,CACLC,KADK,EAELC,YAFK,EAGLC,UAHK,EAILC,UAJK,EAKLC,MALK,EAMG;AACR,MAAMC,QAAQ,GAAGF,UAAU,GAAGD,UAAb,GAA0B,CAA3C;AACA,MAAMI,eAAe,GAClB,CAAE,CAACC,QAAQ,CAACN,YAAD,EAAe,EAAf,CAAR,GAA6BD,KAA7B,GAAqCE,UAAtC,IAAoDG,QAArD,GACAA,QADD,IAECA,QAFF,GAGAH,UAJF;AAKA,SAAO,UAAGI,eAAH,EAAqBE,QAArB,CAA8BJ,MAA9B,EAAsC,GAAtC,CAAP;AACD;AAED,OAAO,SAASK,mBAAT,CACLC,KADK,EAELV,KAFK,EAGLC,YAHK,EAIG;AACR,MAAM;AAAEU,IAAAA;AAAF,MAAqBD,KAA3B;;AACA,MAAIC,cAAc,KAAK,CAAvB,EAA0B;AACxB,WAAOZ,yBAAyB,CAACC,KAAD,EAAQC,YAAR,EAAsB,IAAtB,EAA4B,IAA5B,EAAkC,CAAlC,CAAhC;AACD;;AACD,MAAIU,cAAc,KAAK,CAAvB,EAA0B;AACxB,WAAOZ,yBAAyB,CAACC,KAAD,EAAQC,YAAR,EAAsB,CAAtB,EAAyB,EAAzB,EAA6B,CAA7B,CAAhC;AACD;;AACD,MAAIU,cAAc,KAAK,CAAvB,EAA0B;AACxB,WAAOZ,yBAAyB,CAACC,KAAD,EAAQC,YAAR,EAAsB,CAAtB,EAAyB,EAAzB,EAA6B,CAA7B,CAAhC;AACD;;AACD,MAAIU,cAAc,KAAK,EAAvB,EAA2B;AACzB;AACA,WAAOZ,yBAAyB,CAACC,KAAD,EAAQC,YAAR,EAAsB,CAAtB,EAAyB,EAAzB,EAA6B,CAA7B,CAAhC;AACD;;AACD,MAAIU,cAAc,KAAK,EAAnB,IAAyBA,cAAc,KAAK,EAAhD,EAAoD;AAClD;AACA,WAAOZ,yBAAyB,CAACC,KAAD,EAAQC,YAAR,EAAsB,CAAtB,EAAyB,EAAzB,EAA6B,CAA7B,CAAhC;AACD;;AACD,MAAIU,cAAc,KAAK,EAAnB,IAAyBA,cAAc,KAAK,EAA5C,IAAkDA,cAAc,KAAK,EAAzE,EAA6E;AAC3E;AACA,WAAOZ,yBAAyB,CAACC,KAAD,EAAQC,YAAR,EAAsB,CAAtB,EAAyB,GAAzB,EAA8B,CAA9B,CAAhC;AACD;;AAED,SAAOA,YAAP;AACD","sourcesContent":["import { SelectionSegment } from './MaskedInput';\n\nexport function getNextNumberSegmentValue(\n  delta: number,\n  segmentValue: string,\n  lowerBound: number,\n  upperBound: number,\n  length: number\n): string {\n  const modValue = upperBound - lowerBound + 1;\n  const newSegmentValue =\n    ((((parseInt(segmentValue, 10) - delta - lowerBound) % modValue) +\n      modValue) %\n      modValue) +\n    lowerBound;\n  return `${newSegmentValue}`.padStart(length, '0');\n}\n\nexport function getNextSegmentValue(\n  range: SelectionSegment,\n  delta: number,\n  segmentValue: string\n): string {\n  const { selectionStart } = range;\n  if (selectionStart === 0) {\n    return getNextNumberSegmentValue(delta, segmentValue, 1900, 2099, 4);\n  }\n  if (selectionStart === 5) {\n    return getNextNumberSegmentValue(delta, segmentValue, 1, 12, 2);\n  }\n  if (selectionStart === 8) {\n    return getNextNumberSegmentValue(delta, segmentValue, 1, 31, 2);\n  }\n  if (selectionStart === 11) {\n    // Hours input\n    return getNextNumberSegmentValue(delta, segmentValue, 0, 23, 2);\n  }\n  if (selectionStart === 17 || selectionStart === 14) {\n    // Minutes/seconds input\n    return getNextNumberSegmentValue(delta, segmentValue, 0, 59, 2);\n  }\n  if (selectionStart === 20 || selectionStart === 24 || selectionStart === 28) {\n    // Milli, micro, and nanosecond input\n    return getNextNumberSegmentValue(delta, segmentValue, 0, 999, 3);\n  }\n\n  return segmentValue;\n}\n"],"file":"DateInputUtils.js"}

package/dist/DateTimeInput.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+declare type DateTimeInputProps = {
+    className?: string;
+    onChange?(value?: string): void;
+    defaultValue?: string;
+    onFocus?(): void;
+    onBlur?(): void;
+    'data-testid'?: string;
+};
+export declare function addSeparators(value: string): string;
+declare const DateTimeInput: React.ForwardRefExoticComponent<DateTimeInputProps & React.RefAttributes<HTMLInputElement>>;
+export default DateTimeInput;
+//# sourceMappingURL=DateTimeInput.d.ts.map

package/dist/DateTimeInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../src/DateTimeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAkBrD,aAAK,kBAAkB,GAAG;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,MAAM,CAAC,IAAI,IAAI,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAKnD;AAMD,QAAA,MAAM,aAAa,6FA4ClB,CAAC;AAaF,eAAe,aAAa,CAAC"}

package/dist/DateTimeInput.js

@@ -0,0 +1,69 @@
+import React, { useCallback, useState } from 'react';
+import classNames from 'classnames';
+import Log from '@deephaven/log';
+import MaskedInput from "./MaskedInput.js";
+import { getNextSegmentValue } from "./DateInputUtils.js";
+var log = Log.module('DateTimeInput'); // This could be more restrictive and restrict days to the number of days in the month...
+// But then gotta take leap year into account and everything.
+
+var DATE_PATTERN = '[12][0-9]{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])'; // Put zero width spaces in the nanosecond part of the date to allow jumping between segments
+
+var TIME_PATTERN = '([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}';
+var FULL_DATE_PATTERN = "".concat(DATE_PATTERN, " ").concat(TIME_PATTERN);
+var DEFAULT_VALUE_STRING = '2022-01-01 00:00:00.000000000';
+var FULL_DATE_FORMAT = 'YYYY-MM-DD HH:MM:SS.SSSSSSSSS';
+export function addSeparators(value) {
+  var dateTimeMillis = value.substring(0, 23);
+  var micros = value.substring(23, 26);
+  var nanos = value.substring(26);
+  return [dateTimeMillis, micros, nanos].filter(v => v !== '').join('\u200B');
+}
+
+var removeSeparators = value => value.replace(/\u200B/g, '');
+
+var EXAMPLES = [addSeparators(DEFAULT_VALUE_STRING)];
+var DateTimeInput = /*#__PURE__*/React.forwardRef((props, ref) => {
+  var {
+    className = '',
+    onChange = () => undefined,
+    defaultValue = '',
+    onFocus = () => undefined,
+    onBlur = () => undefined,
+    'data-testid': dataTestId
+  } = props;
+  var [value, setValue] = useState(defaultValue.length > 0 ? addSeparators(defaultValue) : '');
+  var [selection, setSelection] = useState();
+  var handleChange = useCallback(newValue => {
+    log.debug('handleChange', newValue);
+    setValue(newValue);
+    onChange(removeSeparators(newValue));
+  }, [onChange]);
+  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,
+    pattern: FULL_DATE_PATTERN,
+    placeholder: FULL_DATE_FORMAT,
+    selection: selection,
+    value: value,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    "data-testid": dataTestId
+  }));
+});
+DateTimeInput.displayName = 'DateTimeInput';
+DateTimeInput.defaultProps = {
+  className: '',
+  onChange: () => undefined,
+  defaultValue: '',
+  onFocus: () => undefined,
+  onBlur: () => undefined,
+  'data-testid': undefined
+};
+export default DateTimeInput;
+//# sourceMappingURL=DateTimeInput.js.map

package/dist/DateTimeInput.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/DateTimeInput.tsx"],"names":["React","useCallback","useState","classNames","Log","MaskedInput","getNextSegmentValue","log","module","DATE_PATTERN","TIME_PATTERN","FULL_DATE_PATTERN","DEFAULT_VALUE_STRING","FULL_DATE_FORMAT","addSeparators","value","dateTimeMillis","substring","micros","nanos","filter","v","join","removeSeparators","replace","EXAMPLES","DateTimeInput","forwardRef","props","ref","className","onChange","undefined","defaultValue","onFocus","onBlur","dataTestId","setValue","length","selection","setSelection","handleChange","newValue","debug","displayName","defaultProps"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,QAA7B,QAA6C,OAA7C;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,GAAP,MAAgB,gBAAhB;OACOC,W;SACEC,mB;AAET,IAAMC,GAAG,GAAGH,GAAG,CAACI,MAAJ,CAAW,eAAX,CAAZ,C,CAEA;AACA;;AACA,IAAMC,YAAY,GAAG,yDAArB,C,CACA;;AACA,IAAMC,YAAY,GAChB,iFADF;AAEA,IAAMC,iBAAiB,aAAMF,YAAN,cAAsBC,YAAtB,CAAvB;AACA,IAAME,oBAAoB,GAAG,+BAA7B;AACA,IAAMC,gBAAgB,GAAG,+BAAzB;AAWA,OAAO,SAASC,aAAT,CAAuBC,KAAvB,EAA8C;AACnD,MAAMC,cAAc,GAAGD,KAAK,CAACE,SAAN,CAAgB,CAAhB,EAAmB,EAAnB,CAAvB;AACA,MAAMC,MAAM,GAAGH,KAAK,CAACE,SAAN,CAAgB,EAAhB,EAAoB,EAApB,CAAf;AACA,MAAME,KAAK,GAAGJ,KAAK,CAACE,SAAN,CAAgB,EAAhB,CAAd;AACA,SAAO,CAACD,cAAD,EAAiBE,MAAjB,EAAyBC,KAAzB,EAAgCC,MAAhC,CAAuCC,CAAC,IAAIA,CAAC,KAAK,EAAlD,EAAsDC,IAAtD,CAA2D,QAA3D,CAAP;AACD;;AAED,IAAMC,gBAAgB,GAAIR,KAAD,IAAmBA,KAAK,CAACS,OAAN,CAAc,SAAd,EAAyB,EAAzB,CAA5C;;AAEA,IAAMC,QAAQ,GAAG,CAACX,aAAa,CAACF,oBAAD,CAAd,CAAjB;AAEA,IAAMc,aAAa,gBAAG1B,KAAK,CAAC2B,UAAN,CACpB,CAACC,KAAD,EAA4BC,GAA5B,KAAoC;AAClC,MAAM;AACJC,IAAAA,SAAS,GAAG,EADR;AAEJC,IAAAA,QAAQ,GAAG,MAAMC,SAFb;AAGJC,IAAAA,YAAY,GAAG,EAHX;AAIJC,IAAAA,OAAO,GAAG,MAAMF,SAJZ;AAKJG,IAAAA,MAAM,GAAG,MAAMH,SALX;AAMJ,mBAAeI;AANX,MAOFR,KAPJ;AAQA,MAAM,CAACb,KAAD,EAAQsB,QAAR,IAAoBnC,QAAQ,CAChC+B,YAAY,CAACK,MAAb,GAAsB,CAAtB,GAA0BxB,aAAa,CAACmB,YAAD,CAAvC,GAAwD,EADxB,CAAlC;AAGA,MAAM,CAACM,SAAD,EAAYC,YAAZ,IAA4BtC,QAAQ,EAA1C;AAEA,MAAMuC,YAAY,GAAGxC,WAAW,CAC7ByC,QAAD,IAA4B;AAC1BnC,IAAAA,GAAG,CAACoC,KAAJ,CAAU,cAAV,EAA0BD,QAA1B;AACAL,IAAAA,QAAQ,CAACK,QAAD,CAAR;AACAX,IAAAA,QAAQ,CAACR,gBAAgB,CAACmB,QAAD,CAAjB,CAAR;AACD,GAL6B,EAM9B,CAACX,QAAD,CAN8B,CAAhC;AASA,sBACE;AAAK,IAAA,SAAS,EAAC;AAAf,kBACE,oBAAC,WAAD;AACE,IAAA,GAAG,EAAEF,GADP;AAEE,IAAA,SAAS,EAAE1B,UAAU,CAAC2B,SAAD,CAFvB;AAGE,IAAA,OAAO,EAAEL,QAHX;AAIE,IAAA,mBAAmB,EAAEnB,mBAJvB;AAKE,IAAA,QAAQ,EAAEmC,YALZ;AAME,IAAA,QAAQ,EAAED,YANZ;AAOE,IAAA,OAAO,EAAE7B,iBAPX;AAQE,IAAA,WAAW,EAAEE,gBARf;AASE,IAAA,SAAS,EAAE0B,SATb;AAUE,IAAA,KAAK,EAAExB,KAVT;AAWE,IAAA,OAAO,EAAEmB,OAXX;AAYE,IAAA,MAAM,EAAEC,MAZV;AAaE,mBAAaC;AAbf,IADF,CADF;AAmBD,CA3CmB,CAAtB;AA8CAV,aAAa,CAACkB,WAAd,GAA4B,eAA5B;AAEAlB,aAAa,CAACmB,YAAd,GAA6B;AAC3Bf,EAAAA,SAAS,EAAE,EADgB;AAE3BC,EAAAA,QAAQ,EAAE,MAAMC,SAFW;AAG3BC,EAAAA,YAAY,EAAE,EAHa;AAI3BC,EAAAA,OAAO,EAAE,MAAMF,SAJY;AAK3BG,EAAAA,MAAM,EAAE,MAAMH,SALa;AAM3B,iBAAeA;AANY,CAA7B;AASA,eAAeN,aAAf","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('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 DEFAULT_VALUE_STRING = '2022-01-01 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  'data-testid'?: string;\n};\n\nexport function addSeparators(value: string): string {\n  const dateTimeMillis = value.substring(0, 23);\n  const micros = value.substring(23, 26);\n  const nanos = value.substring(26);\n  return [dateTimeMillis, micros, nanos].filter(v => v !== '').join('\\u200B');\n}\n\nconst removeSeparators = (value: string) => value.replace(/\\u200B/g, '');\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      '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(removeSeparators(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={FULL_DATE_PATTERN}\n          placeholder={FULL_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\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"],"file":"DateTimeInput.js"}

package/dist/EditableItemList.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface EditableItemListProps {
+    isInvalid?: boolean;
+    items: string[];
+    onDelete: (item: string) => void;
+    onAdd: (item: string) => void;
+    validate?: (item: string) => Error | null;
+}
+declare const EditableItemList: (props: EditableItemListProps) => React.ReactElement;
+export default EditableItemList;
+//# sourceMappingURL=EditableItemList.d.ts.map

package/dist/EditableItemList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableItemList.d.ts","sourceRoot":"","sources":["../src/EditableItemList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAOf,UAAU,qBAAqB;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,KAAK,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,GAAG,IAAI,CAAC;CAC3C;AAGD,QAAA,MAAM,gBAAgB,UAAW,qBAAqB,KAAG,MAAM,YA0H9D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/EditableItemList.js

@@ -0,0 +1,107 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import classNames from 'classnames';
+import clamp from 'lodash.clamp';
+import { vsAdd, vsTrash } from '@deephaven/icons';
+import { Button, ItemList } from "./index.js";
+
+// Display a list of items with an input for adding new items, and Add/Delete buttons
+var EditableItemList = props => {
+  var {
+    isInvalid = false,
+    items,
+    onAdd = () => undefined,
+    onDelete = () => undefined,
+    validate = () => null
+  } = props;
+  var [inputError, setInputError] = useState(null);
+  var [selectedIndex, setSelectedIndex] = useState();
+  var [value, setValue] = useState('');
+  var handleSelect = useCallback(index => {
+    setSelectedIndex(index);
+  }, []);
+  var handleDelete = useCallback(() => {
+    var newIndex = selectedIndex === items.length - 1 ? items.length - 2 : selectedIndex;
+
+    if (selectedIndex !== undefined && selectedIndex >= 0 && selectedIndex < items.length) {
+      onDelete(items[selectedIndex]);
+    }
+
+    setSelectedIndex(newIndex === -1 ? undefined : newIndex);
+  }, [items, selectedIndex, onDelete]);
+  var handleAdd = useCallback(() => {
+    var validationError = validate(value);
+
+    if (validationError == null) {
+      onAdd(value);
+      setValue('');
+    } else {
+      setInputError(validationError);
+    }
+  }, [value, onAdd, validate]);
+  var handleInputChange = useCallback(event => {
+    var {
+      value: inputValue
+    } = event.target;
+    setValue(inputValue);
+    setInputError(validate(inputValue));
+  }, [validate]);
+  var handleInputFocus = useCallback(() => {
+    setSelectedIndex(undefined);
+  }, []);
+  var handleInputKeyDown = useCallback(event => {
+    if (event.key === 'Enter') {
+      handleAdd();
+    }
+  }, [handleAdd]);
+  var selectedRanges = useMemo(() => selectedIndex === undefined ? [] : [[selectedIndex, selectedIndex]], [selectedIndex]);
+  var containerHeight = useMemo(() => 14 + clamp(items.length, 1, 6) * ItemList.DEFAULT_ROW_HEIGHT, [items.length]);
+  return /*#__PURE__*/React.createElement("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: index === selectedIndex
+    })),
+    offset: 0,
+    onSelect: handleSelect,
+    selectedRanges: selectedRanges
+  })), /*#__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 == null || value === '',
+    icon: vsAdd,
+    tooltip: "Add new item"
+  }), /*#__PURE__*/React.createElement(Button, {
+    kind: "ghost",
+    onClick: handleDelete,
+    disabled: selectedIndex === undefined,
+    icon: vsTrash,
+    tooltip: "Delete selected item"
+  }))));
+};
+
+export default EditableItemList;
+//# sourceMappingURL=EditableItemList.js.map

package/dist/EditableItemList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/EditableItemList.tsx"],"names":["React","useCallback","useMemo","useState","classNames","clamp","vsAdd","vsTrash","Button","ItemList","EditableItemList","props","isInvalid","items","onAdd","undefined","onDelete","validate","inputError","setInputError","selectedIndex","setSelectedIndex","value","setValue","handleSelect","index","handleDelete","newIndex","length","handleAdd","validationError","handleInputChange","event","inputValue","target","handleInputFocus","handleInputKeyDown","key","selectedRanges","containerHeight","DEFAULT_ROW_HEIGHT","height","map","item","isSelected"],"mappings":"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","sourcesContent":["import React, {\n  ChangeEvent,\n  KeyboardEvent,\n  useCallback,\n  useMemo,\n  useState,\n} from 'react';\nimport classNames from 'classnames';\nimport clamp from 'lodash.clamp';\nimport { vsAdd, vsTrash } from '@deephaven/icons';\nimport { Range } from '@deephaven/utils';\nimport { Button, ItemList } from '.';\n\ninterface EditableItemListProps {\n  isInvalid?: boolean;\n  items: string[];\n  onDelete: (item: string) => void;\n  onAdd: (item: string) => void;\n  validate?: (item: string) => Error | null;\n}\n\n// Display a list of items with an input for adding new items, and Add/Delete buttons\nconst EditableItemList = (props: EditableItemListProps): React.ReactElement => {\n  const {\n    isInvalid = false,\n    items,\n    onAdd = () => undefined,\n    onDelete = () => undefined,\n    validate = () => null,\n  } = props;\n  const [inputError, setInputError] = useState<Error | null>(null);\n  const [selectedIndex, setSelectedIndex] = useState<number | undefined>();\n  const [value, setValue] = useState('');\n\n  const handleSelect = useCallback(index => {\n    setSelectedIndex(index);\n  }, []);\n\n  const handleDelete = useCallback(() => {\n    const newIndex =\n      selectedIndex === items.length - 1 ? items.length - 2 : selectedIndex;\n    if (\n      selectedIndex !== undefined &&\n      selectedIndex >= 0 &&\n      selectedIndex < items.length\n    ) {\n      onDelete(items[selectedIndex]);\n    }\n    setSelectedIndex(newIndex === -1 ? undefined : newIndex);\n  }, [items, selectedIndex, onDelete]);\n\n  const handleAdd = useCallback(() => {\n    const validationError = validate(value);\n    if (validationError == null) {\n      onAdd(value);\n      setValue('');\n    } else {\n      setInputError(validationError);\n    }\n  }, [value, onAdd, validate]);\n\n  const handleInputChange = useCallback(\n    (event: ChangeEvent<HTMLInputElement>) => {\n      const { value: inputValue } = event.target;\n      setValue(inputValue);\n      setInputError(validate(inputValue));\n    },\n    [validate]\n  );\n\n  const handleInputFocus = useCallback(() => {\n    setSelectedIndex(undefined);\n  }, []);\n\n  const handleInputKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key === 'Enter') {\n        handleAdd();\n      }\n    },\n    [handleAdd]\n  );\n\n  const selectedRanges = useMemo(\n    (): Range[] =>\n      selectedIndex === undefined ? [] : [[selectedIndex, selectedIndex]],\n    [selectedIndex]\n  );\n  const containerHeight = useMemo(\n    (): number => 14 + clamp(items.length, 1, 6) * ItemList.DEFAULT_ROW_HEIGHT,\n    [items.length]\n  );\n\n  return (\n    <div\n      className={classNames('editable-item-list-container', {\n        'is-invalid': isInvalid,\n      })}\n    >\n      <div style={{ height: containerHeight }}>\n        <ItemList\n          itemCount={items.length}\n          items={items.map((item, index) => ({\n            value: item,\n            isSelected: index === selectedIndex,\n          }))}\n          offset={0}\n          onSelect={handleSelect}\n          selectedRanges={selectedRanges}\n        />\n      </div>\n      <div className=\"d-flex flex-row pt-2\">\n        <div className=\"d-flex flex-grow-1\">\n          <input\n            className={classNames('form-control', {\n              'is-invalid': inputError != null,\n            })}\n            placeholder=\"Enter value\"\n            type=\"text\"\n            value={value}\n            onChange={handleInputChange}\n            onFocus={handleInputFocus}\n            onKeyDown={handleInputKeyDown}\n          />\n        </div>\n        <div className=\"d-flex align-items-start mt-1 ml-2\">\n          <Button\n            kind=\"ghost\"\n            onClick={handleAdd}\n            disabled={inputError != null || value == null || value === ''}\n            icon={vsAdd}\n            tooltip=\"Add new item\"\n          />\n          <Button\n            kind=\"ghost\"\n            onClick={handleDelete}\n            disabled={selectedIndex === undefined}\n            icon={vsTrash}\n            tooltip=\"Delete selected item\"\n          />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default EditableItemList;\n"],"file":"EditableItemList.js"}

package/dist/MaskedInput.d.ts

@@ -6,6 +6,21 @@ declare const SELECTION_DIRECTION: {
     readonly NONE: "none";
 };
 export declare function DEFAULT_GET_PREFERRED_REPLACEMENT_STRING(value: string, replaceIndex: number, newChar: string): string;
+/**
+ * Fill the string on the right side with the example value to the given length
+ * @param checkValue Initial string to pad
+ * @param exampleValue Example value
+ * @param length Target length
+ * @returns String padded with the given example value
+ */
+export declare function fillToLength(checkValue: string, exampleValue: string, length: number): string;
+/**
+ * Trim all characters matching the empty mask on the right side of the given value
+ * @param value String to trim
+ * @param emptyMask Empty mask
+ * @returns Trimmed string
+ */
+export declare function trimTrailingMask(value: string, emptyMask: string): string;
 export declare type SelectionSegment = {
     selectionStart: number;
     selectionEnd: number;
@@ -16,6 +31,8 @@ declare type MaskedInputProps = {
     className?: string;
     /** The regex pattern this masked input must match */
     pattern: string;
+    /** Input placeholder */
+    placeholder?: string;
     /** The current value to display */
     value: string;
     /** One or more examples of valid values. Used when deciding if next keystroke is valid (as rest of the current value may be incomplete) */

package/dist/MaskedInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MaskedInput.d.ts","sourceRoot":"","sources":["../src/MaskedInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAIlD,OAAO,oBAAoB,CAAC;AAI5B,QAAA,MAAM,mBAAmB;;;;CAIf,CAAC;AAQX,wBAAgB,wCAAwC,CACtD,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,MAAM,EACpB,OAAO,EAAE,MAAM,GACd,MAAM,CAMR;AAED,oBAAY,gBAAgB,GAAG;IAC7B,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,mBAAmB,CAAC,MAAM,OAAO,mBAAmB,CAAC,CAAC;CACnF,CAAC;AAEF,aAAK,gBAAgB,GAAG;IACtB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,OAAO,EAAE,MAAM,CAAC;IAChB,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,2IAA2I;IAC3I,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC3B,iDAAiD;IACjD,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,6EAA6E;IAC7E,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,oCAAoC;IACpC,QAAQ,CAAC,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC3C,qDAAqD;IACrD,mBAAmB,CAAC,CAClB,OAAO,EAAE,gBAAgB,EACzB,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,MAAM,EACpB,KAAK,EAAE,MAAM,GACZ,MAAM,CAAC;IACV,6BAA6B,CAAC,CAC5B,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,MAAM,EACpB,WAAW,EAAE,MAAM,EACnB,cAAc,EAAE,MAAM,EACtB,YAAY,EAAE,MAAM,GACnB,MAAM,CAAC;IACV,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAEjC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;GAGG;AAIH,QAAA,MAAM,WAAW,2FAiahB,CAAC;AAsBF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MaskedInput.d.ts","sourceRoot":"","sources":["../src/MaskedInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAIlD,OAAO,oBAAoB,CAAC;AAI5B,QAAA,MAAM,mBAAmB;;;;CAIf,CAAC;AAQX,wBAAgB,wCAAwC,CACtD,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,MAAM,EACpB,OAAO,EAAE,MAAM,GACd,MAAM,CAMR;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAC1B,UAAU,EAAE,MAAM,EAClB,YAAY,EAAE,MAAM,EACpB,MAAM,EAAE,MAAM,GACb,MAAM,CAIR;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAUzE;AAED,oBAAY,gBAAgB,GAAG;IAC7B,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,mBAAmB,CAAC,MAAM,OAAO,mBAAmB,CAAC,CAAC;CACnF,CAAC;AAEF,aAAK,gBAAgB,GAAG;IACtB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,OAAO,EAAE,MAAM,CAAC;IAChB,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,2IAA2I;IAC3I,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC3B,iDAAiD;IACjD,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,6EAA6E;IAC7E,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,oCAAoC;IACpC,QAAQ,CAAC,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC3C,qDAAqD;IACrD,mBAAmB,CAAC,CAClB,OAAO,EAAE,gBAAgB,EACzB,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,MAAM,EACpB,KAAK,EAAE,MAAM,GACZ,MAAM,CAAC;IACV,6BAA6B,CAAC,CAC5B,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,MAAM,EACpB,WAAW,EAAE,MAAM,EACnB,cAAc,EAAE,MAAM,EACtB,YAAY,EAAE,MAAM,GACnB,MAAM,CAAC;IACV,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAEjC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;GAGG;AAIH,QAAA,MAAM,WAAW,2FAkchB,CAAC;AAuBF,eAAe,WAAW,CAAC"}

package/dist/MaskedInput.js

@@ -18,6 +18,39 @@ var FIXED_WIDTH_SPACE = '\u2007';
 export function DEFAULT_GET_PREFERRED_REPLACEMENT_STRING(value, replaceIndex, newChar) {
   return value.substring(0, replaceIndex) + newChar + value.substring(replaceIndex + 1);
 }
+/**
+ * Fill the string on the right side with the example value to the given length
+ * @param checkValue Initial string to pad
+ * @param exampleValue Example value
+ * @param length Target length
+ * @returns String padded with the given example value
+ */
+
+export function fillToLength(checkValue, exampleValue, length) {
+  return checkValue.length < length ? "".concat(checkValue).concat(exampleValue.substring(checkValue.length, length)) : checkValue;
+}
+/**
+ * Trim all characters matching the empty mask on the right side of the given value
+ * @param value String to trim
+ * @param emptyMask Empty mask
+ * @returns Trimmed string
+ */
+
+export function trimTrailingMask(value, emptyMask) {
+  var {
+    length
+  } = value;
+
+  for (var i = value.length - 1; i >= 0; i -= 1) {
+    if (emptyMask[i] === value[i]) {
+      length = i;
+    } else {
+      break;
+    }
+  }
+
+  return value.substring(0, length);
+}
 
 /**
  * A masked input for entering data from a template.
@@ -35,6 +68,7 @@ var MaskedInput = /*#__PURE__*/React.forwardRef((props, ref) => {
     onChange = () => false,
     onSelect = () => false,
     pattern,
+    placeholder,
     selection,
     value,
     onFocus = () => false,
@@ -43,6 +77,7 @@ var MaskedInput = /*#__PURE__*/React.forwardRef((props, ref) => {
   } = props;
   var input = useForwardedRef(ref);
   var examples = useMemo(() => Array.isArray(example) ? example : [example], [example]);
+  var emptyMask = useMemo(() => examples[0].replace(/[a-zA-Z0-9]/g, FIXED_WIDTH_SPACE), [examples]);
   useEffect(function setSelectedSegment() {
     if (selection != null) {
       var _input$current;
@@ -124,7 +159,7 @@ var MaskedInput = /*#__PURE__*/React.forwardRef((props, ref) => {
 
   function isValid(checkValue) {
     var cursorPosition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : checkValue.length;
-    var patternRegex = new RegExp(pattern);
+    var patternRegex = new RegExp("^".concat(pattern, "$"));
 
     if (patternRegex.test(checkValue)) {
       return true;
@@ -290,13 +325,31 @@ var MaskedInput = /*#__PURE__*/React.forwardRef((props, ref) => {
 
     if (key === 'Delete' || key === 'Backspace') {
       event.preventDefault();
-      event.stopPropagation();
+      event.stopPropagation(); // Deleting at the end of the value
+
+      if (selectionEnd >= trimTrailingMask(value, emptyMask).length) {
+        var newValue = value.substring(0, // Delete whole selection or just the char before the cursor
+        selectionStart === selectionEnd ? selectionStart - 1 : selectionStart);
+        var trimmedValue = trimTrailingMask(newValue, emptyMask);
+
+        if (trimmedValue !== value) {
+          onChange(trimmedValue);
+          onSelect({
+            selectionStart: trimmedValue.length,
+            selectionEnd: trimmedValue.length,
+            selectionDirection: SELECTION_DIRECTION.NONE
+          });
+        }
+
+        return;
+      }
 
       if (selectionStart !== selectionEnd) {
         // Replace all non-masked characters with blanks, set selection to start
-        var newValue = value.substring(0, selectionStart) + value.substring(selectionStart, selectionEnd).replace(/[a-zA-Z0-9]/g, FIXED_WIDTH_SPACE) + value.substring(selectionEnd);
-        log.debug('Range ', selectionStart, selectionEnd, 'deleted, setting value', newValue);
-        onChange(newValue);
+        var _newValue = value.substring(0, selectionStart) + value.substring(selectionStart, selectionEnd).replace(/[a-zA-Z0-9]/g, FIXED_WIDTH_SPACE) + value.substring(selectionEnd);
+
+        log.debug('Range ', selectionStart, selectionEnd, 'deleted, setting value', _newValue);
+        onChange(_newValue);
         onSelect({
           selectionStart,
           selectionEnd: selectionStart,
@@ -305,10 +358,10 @@ var MaskedInput = /*#__PURE__*/React.forwardRef((props, ref) => {
       } else if (selectionStart > 0) {
         for (var i = selectionStart - 1; i >= 0; i -= 1) {
           // Only replace non placeholder text
-          var _newValue = value.substring(0, i) + value.substring(i, selectionStart).replace(/[a-zA-Z0-9]/g, FIXED_WIDTH_SPACE) + value.substring(selectionStart);
+          var _newValue2 = value.substring(0, i) + value.substring(i, selectionStart).replace(/[a-zA-Z0-9]/g, FIXED_WIDTH_SPACE) + value.substring(selectionStart);
 
-          if (_newValue !== value) {
-            onChange(_newValue);
+          if (_newValue2 !== value) {
+            onChange(_newValue2);
             onSelect({
               selectionStart: i,
               selectionEnd: i,
@@ -334,12 +387,15 @@ var MaskedInput = /*#__PURE__*/React.forwardRef((props, ref) => {
     for (var _i2 = 0; _i2 < newChars.length; _i2 += 1) {
       var newChar = newChars[_i2]; // If they're typing an alphanumeric character, be smart and allow it to jump ahead
 
-      var maxReplaceIndex = /[a-zA-Z0-9]/g.test(newChar) ? value.length - 1 : selectionStart;
+      var maxReplaceIndex = /[a-zA-Z0-9]/g.test(newChar) ? examples[0].length - 1 : selectionStart;
 
       for (var _replaceIndex = selectionStart; _replaceIndex <= maxReplaceIndex; _replaceIndex += 1) {
-        var _newValue2 = getPreferredReplacementString(value, _replaceIndex, newChar, selectionStart, selectionEnd);
+        // Fill with the example chars if necessary
+        var filledValue = fillToLength(value, examples[0], _replaceIndex + 1);
+
+        var _newValue3 = getPreferredReplacementString(filledValue, _replaceIndex, newChar, selectionStart, selectionEnd);
 
-        if (isValid(_newValue2, _replaceIndex + 1)) {
+        if (isValid(_newValue3, _replaceIndex + 1)) {
           var currentSegment = getSegment(_replaceIndex);
           var newSelectionStart = _replaceIndex + 1;
           var newSelection = {
@@ -356,8 +412,8 @@ var MaskedInput = /*#__PURE__*/React.forwardRef((props, ref) => {
             }
           }
 
-          log.debug('handleKeyDown', key, '=>', _newValue2, newSelection);
-          onChange(_newValue2);
+          log.debug('handleKeyDown', key, '=>', _newValue3, newSelection);
+          onChange(_newValue3);
           onSelect(newSelection);
           return;
         }
@@ -371,6 +427,7 @@ var MaskedInput = /*#__PURE__*/React.forwardRef((props, ref) => {
     className: classNames('form-control masked-input', className),
     type: "text",
     pattern: pattern,
+    placeholder: placeholder,
     value: value,
     onChange: () => undefined,
     onKeyDown: handleKeyDown,
@@ -383,6 +440,7 @@ var MaskedInput = /*#__PURE__*/React.forwardRef((props, ref) => {
 });
 MaskedInput.defaultProps = {
   className: '',
+  placeholder: undefined,
 
   onChange() {// no-op
   },

package/dist/MaskedInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/MaskedInput.tsx"],"names":["React","useMemo","useEffect","classNames","Log","useForwardedRef","log","module","SELECTION_DIRECTION","FORWARD","BACKWARD","NONE","FIXED_WIDTH_SPACE","DEFAULT_GET_PREFERRED_REPLACEMENT_STRING","value","replaceIndex","newChar","substring","MaskedInput","forwardRef","props","ref","className","example","getNextSegmentValue","range","delta","segmentValue","getPreferredReplacementString","onChange","onSelect","pattern","selection","onFocus","onBlur","dataTestId","input","examples","Array","isArray","setSelectedSegment","debug","selectionStart","selectionEnd","selectionDirection","current","setSelectionRange","getSegment","cursorPosition","testValue","length","i","test","charAt","fillValue","checkValue","exampleValue","filledValue","concat","isValid","patternRegex","RegExp","nextSegment","position","currentSegment","nextPosition","previousSegment","previousPosition","nextSegmentValue","segment","newSegmentValue","newValue","handleSelect","event","target","error","debug2","newSelection","handleSelectCapture","preventDefault","stopPropagation","handleArrowKey","key","handleKeyDown","startsWith","replace","altKey","metaKey","ctrlKey","newChars","from","Set","toUpperCase","toLowerCase","maxReplaceIndex","newSelectionStart","nextSegmentSelection","undefined","defaultProps"],"mappings":"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","sourcesContent":["import React, { useMemo, useEffect } from 'react';\nimport classNames from 'classnames';\nimport Log from '@deephaven/log';\nimport { useForwardedRef } from '@deephaven/react-hooks';\nimport './MaskedInput.scss';\n\nconst log = Log.module('MaskedInput');\n\nconst SELECTION_DIRECTION = {\n  FORWARD: 'forward',\n  BACKWARD: 'backward',\n  NONE: 'none',\n} as const;\n\n/**\n * Special space character that's the same size as tabular numbers\n * https://www.fileformat.info/info/unicode/char/2007/index.htm\n */\nconst FIXED_WIDTH_SPACE = '\\u2007';\n\nexport function DEFAULT_GET_PREFERRED_REPLACEMENT_STRING(\n  value: string,\n  replaceIndex: number,\n  newChar: string\n): string {\n  return (\n    value.substring(0, replaceIndex) +\n    newChar +\n    value.substring(replaceIndex + 1)\n  );\n}\n\nexport type SelectionSegment = {\n  selectionStart: number;\n  selectionEnd: number;\n  selectionDirection?: typeof SELECTION_DIRECTION[keyof typeof SELECTION_DIRECTION];\n};\n\ntype MaskedInputProps = {\n  /** An extra class name to add to the component */\n  className?: string;\n  /** The regex pattern this masked input must match */\n  pattern: string;\n  /** The current value to display */\n  value: string;\n  /** One or more examples of valid values. Used when deciding if next keystroke is valid (as rest of the current value may be incomplete) */\n  example: string | string[];\n  /** The current selection to use for the input */\n  selection?: SelectionSegment;\n  /** Called when the value changes. Note the value may still be incomplete. */\n  onChange?(value: string): void;\n  /** Called when selection changes */\n  onSelect?(segment: SelectionSegment): void;\n  /** Retrieve the next value for a provided segment */\n  getNextSegmentValue?(\n    segment: SelectionSegment,\n    delta: number,\n    segmentValue: string,\n    value: string\n  ): string;\n  getPreferredReplacementString?(\n    value: string,\n    replaceIndex: number,\n    replaceChar: string,\n    selectionStart: number,\n    selectionEnd: number\n  ): string;\n  onFocus?: React.FocusEventHandler;\n  onBlur?: React.FocusEventHandler;\n\n  'data-testid'?: string;\n};\n\n/**\n * A masked input for entering data from a template.\n * Won't work by itself, must use within another component and handle updating the value/selection.\n */\n// Forward ref causes a false positive for display-name in eslint:\n// https://github.com/yannickcr/eslint-plugin-react/issues/2269\n// eslint-disable-next-line react/display-name\nconst MaskedInput = React.forwardRef<HTMLInputElement, MaskedInputProps>(\n  (props: MaskedInputProps, ref) => {\n    const {\n      className,\n      example,\n      getNextSegmentValue = (range, delta, segmentValue) => segmentValue,\n      getPreferredReplacementString = DEFAULT_GET_PREFERRED_REPLACEMENT_STRING,\n      onChange = () => false,\n      onSelect = () => false,\n      pattern,\n      selection,\n      value,\n      onFocus = () => false,\n      onBlur = () => false,\n      'data-testid': dataTestId,\n    } = props;\n    const input = useForwardedRef(ref);\n    const examples = useMemo(\n      () => (Array.isArray(example) ? example : [example]),\n      [example]\n    );\n\n    useEffect(\n      function setSelectedSegment() {\n        if (selection != null) {\n          log.debug('setting selection...', selection);\n          const {\n            selectionStart,\n            selectionEnd,\n            selectionDirection,\n          } = selection;\n          input.current?.setSelectionRange(\n            selectionStart,\n            selectionEnd,\n            selectionDirection\n          );\n          log.debug('selection set!');\n        }\n      },\n      [selection, input]\n    );\n\n    /**\n     * Returns the selection range for the segment at the given cursor position\n     * @param cursorPosition The current position of the cursor\n     */\n    function getSegment(cursorPosition: number) {\n      let selectionStart = cursorPosition;\n      let selectionEnd = cursorPosition;\n      const testValue = examples.length > 0 ? examples[0] : value;\n\n      for (let i = selectionStart - 1; i >= 0; i -= 1) {\n        if (!/[a-zA-Z0-9]/g.test(testValue.charAt(i))) {\n          break;\n        }\n\n        selectionStart = i;\n      }\n\n      for (let i = selectionEnd; i < testValue.length; i += 1) {\n        if (!/[a-zA-Z0-9]/g.test(testValue.charAt(i))) {\n          break;\n        }\n\n        selectionEnd = i + 1;\n      }\n\n      const selectionDirection =\n        selectionStart === selectionEnd\n          ? SELECTION_DIRECTION.NONE\n          : SELECTION_DIRECTION.BACKWARD;\n\n      return {\n        selectionStart,\n        selectionEnd,\n        selectionDirection,\n      };\n    }\n\n    /**\n     * Replaces all blank spaces and everything after the current cursor position with the example value\n     * @param checkValue The value to check/fill in\n     * @param exampleValue The example to fill in the value from\n     * @param cursorPosition The cursor position\n     * @returns The filled in value\n     */\n    function fillValue(\n      checkValue: string,\n      exampleValue: string,\n      cursorPosition = checkValue.length\n    ): string {\n      let filledValue = '';\n      for (let i = 0; i < cursorPosition; i += 1) {\n        if (checkValue.charAt(i) !== FIXED_WIDTH_SPACE) {\n          filledValue = filledValue.concat(checkValue[i]);\n        } else {\n          filledValue = filledValue.concat(exampleValue[i]);\n        }\n      }\n      filledValue = filledValue.concat(exampleValue.substring(cursorPosition));\n\n      return filledValue;\n    }\n\n    /**\n     * Checks if a given `value` is valid up until the `cursorPosition`.\n     * Uses the examples to build the rest of the string\n     * @param checkValue The value to check validity of\n     * @param cursorPosition The position of the cursor to check up to\n     */\n    function isValid(\n      checkValue: string,\n      cursorPosition = checkValue.length\n    ): boolean {\n      const patternRegex = new RegExp(pattern);\n      if (patternRegex.test(checkValue)) {\n        return true;\n      }\n\n      for (let i = 0; i < examples.length; i += 1) {\n        const filledValue = fillValue(checkValue, examples[i], cursorPosition);\n        if (patternRegex.test(filledValue)) {\n          return true;\n        }\n      }\n      return false;\n    }\n\n    /**\n     * Returns the next segment after the given position\n     * @param position The cursor position to start at\n     * @returns The new selection range\n     */\n    function nextSegment(position: number): SelectionSegment {\n      const currentSegment = getSegment(position);\n      const nextPosition = currentSegment.selectionEnd + 1;\n      if (nextPosition >= value.length) {\n        return currentSegment;\n      }\n\n      return getSegment(nextPosition);\n    }\n\n    /**\n     * Returns the previous segment before the given position\n     * @param position The cursor position to start at\n     * @returns The new selection range\n     */\n    function previousSegment(position: number): SelectionSegment {\n      const currentSegment = getSegment(position);\n      const previousPosition = currentSegment.selectionStart - 1;\n      if (previousPosition <= 0) {\n        return currentSegment;\n      }\n\n      return getSegment(previousPosition);\n    }\n\n    function nextSegmentValue(position: number, delta: number): void {\n      const segment = getSegment(position);\n      const segmentValue = value.substring(\n        segment.selectionStart,\n        segment.selectionEnd\n      );\n      const newSegmentValue = getNextSegmentValue(\n        segment,\n        delta,\n        segmentValue,\n        value\n      );\n      const newValue =\n        value.substring(0, segment.selectionStart) +\n        newSegmentValue +\n        value.substring(segment.selectionEnd);\n      if (isValid(newValue, segment.selectionEnd)) {\n        onChange(newValue);\n        onSelect(segment);\n      }\n    }\n\n    function handleSelect(event: React.UIEvent<HTMLInputElement>) {\n      const {\n        selectionStart = 0,\n        selectionEnd = 0,\n        selectionDirection = 'none',\n      } = event.target as HTMLInputElement;\n\n      if (\n        selectionStart === null ||\n        selectionEnd === null ||\n        selectionDirection === null\n      ) {\n        log.error(\n          'Selection attempted on non-text input element',\n          event.target\n        );\n        return;\n      }\n\n      log.debug2(\n        'handleSelect',\n        selectionStart,\n        selectionEnd,\n        selectionDirection\n      );\n      if (\n        selection != null &&\n        selectionStart === selection.selectionStart &&\n        selectionEnd === selection.selectionEnd\n      ) {\n        return;\n      }\n      if (selectionStart === selectionEnd) {\n        const newSelection = getSegment(selectionStart);\n        log.debug(\n          'Selection segment from ',\n          selectionStart,\n          selectionEnd,\n          '=>',\n          newSelection\n        );\n        onSelect(newSelection);\n      } else {\n        onSelect({ selectionStart, selectionEnd, selectionDirection });\n      }\n    }\n\n    function handleSelectCapture(event: React.UIEvent<HTMLInputElement>) {\n      if (!input.current) {\n        return;\n      }\n      log.debug('handleSelectCapture', event);\n      const selectionStart = input.current.selectionStart || 0;\n      if (\n        selectionStart === value.length &&\n        selection != null &&\n        selectionStart !== selection.selectionStart\n      ) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    }\n\n    function handleArrowKey(event: React.KeyboardEvent<HTMLInputElement>) {\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (!input.current) {\n        return;\n      }\n\n      const { key } = event;\n      const { selectionStart = 0, selectionEnd = 0 } = input.current;\n      if (selectionStart === null || selectionEnd === null) {\n        log.error(\n          'Selection arrow nvaigation attempted on non-text input element',\n          event.target\n        );\n        return;\n      }\n\n      if (key === 'ArrowLeft') {\n        onSelect(previousSegment(selectionStart));\n      } else if (key === 'ArrowRight') {\n        onSelect(nextSegment(selectionEnd));\n      } else if (key === 'ArrowUp') {\n        nextSegmentValue(selectionStart, -1);\n      } else if (key === 'ArrowDown') {\n        nextSegmentValue(selectionStart, 1);\n      }\n    }\n\n    function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {\n      if (!input.current) {\n        return;\n      }\n      log.debug('handleKeyDown', event);\n      const { key } = event;\n      const { selectionStart = 0, selectionEnd = 0 } = input.current;\n      if (selectionStart === null || selectionEnd === null) {\n        log.error(\n          'Selection key event on non-text input element',\n          event.target\n        );\n        return;\n      }\n\n      if (key.startsWith('Arrow')) {\n        handleArrowKey(event);\n        return;\n      }\n\n      if (key === 'Delete' || key === 'Backspace') {\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (selectionStart !== selectionEnd) {\n          // Replace all non-masked characters with blanks, set selection to start\n          const newValue =\n            value.substring(0, selectionStart) +\n            value\n              .substring(selectionStart, selectionEnd)\n              .replace(/[a-zA-Z0-9]/g, FIXED_WIDTH_SPACE) +\n            value.substring(selectionEnd);\n          log.debug(\n            'Range ',\n            selectionStart,\n            selectionEnd,\n            'deleted, setting value',\n            newValue\n          );\n\n          onChange(newValue);\n          onSelect({\n            selectionStart,\n            selectionEnd: selectionStart,\n            selectionDirection: SELECTION_DIRECTION.NONE,\n          });\n        } else if (selectionStart > 0) {\n          for (let i = selectionStart - 1; i >= 0; i -= 1) {\n            // Only replace non placeholder text\n            const newValue =\n              value.substring(0, i) +\n              value\n                .substring(i, selectionStart)\n                .replace(/[a-zA-Z0-9]/g, FIXED_WIDTH_SPACE) +\n              value.substring(selectionStart);\n\n            if (newValue !== value) {\n              onChange(newValue);\n              onSelect({\n                selectionStart: i,\n                selectionEnd: i,\n                selectionDirection: SELECTION_DIRECTION.NONE,\n              });\n              return;\n            }\n          }\n        }\n\n        return;\n      }\n\n      if (event.altKey || event.metaKey || event.ctrlKey || key.length > 1) {\n        return;\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      // Get the different permutations of the character they entered, remove duplicates\n      const newChars = Array.from(\n        new Set([key, key.toUpperCase(), key.toLowerCase()])\n      );\n      for (let i = 0; i < newChars.length; i += 1) {\n        const newChar = newChars[i];\n\n        // If they're typing an alphanumeric character, be smart and allow it to jump ahead\n        const maxReplaceIndex = /[a-zA-Z0-9]/g.test(newChar)\n          ? value.length - 1\n          : selectionStart;\n        for (\n          let replaceIndex = selectionStart;\n          replaceIndex <= maxReplaceIndex;\n          replaceIndex += 1\n        ) {\n          const newValue = getPreferredReplacementString(\n            value,\n            replaceIndex,\n            newChar,\n            selectionStart,\n            selectionEnd\n          );\n          if (isValid(newValue, replaceIndex + 1)) {\n            const currentSegment = getSegment(replaceIndex);\n            const newSelectionStart = replaceIndex + 1;\n            let newSelection: SelectionSegment = {\n              selectionStart: newSelectionStart,\n              selectionEnd: newSelectionStart,\n              selectionDirection: SELECTION_DIRECTION.NONE,\n            };\n            if (newSelectionStart >= currentSegment.selectionEnd) {\n              const nextSegmentSelection = nextSegment(replaceIndex);\n              if (\n                nextSegmentSelection.selectionStart !==\n                currentSegment.selectionStart\n              ) {\n                newSelection = nextSegmentSelection;\n              }\n            }\n            log.debug('handleKeyDown', key, '=>', newValue, newSelection);\n            onChange(newValue);\n            onSelect(newSelection);\n            return;\n          }\n        }\n      }\n    }\n\n    // Need to use \"text\" type so we can apply a pattern and make selection properly\n    return (\n      <input\n        ref={input}\n        className={classNames('form-control masked-input', className)}\n        type=\"text\"\n        pattern={pattern}\n        value={value}\n        onChange={() => undefined}\n        onKeyDown={handleKeyDown}\n        onSelect={handleSelect}\n        onSelectCapture={handleSelectCapture}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        data-testid={dataTestId}\n      />\n    );\n  }\n);\n\nMaskedInput.defaultProps = {\n  className: '',\n  onChange(): void {\n    // no-op\n  },\n  onSelect(): void {\n    // no-op\n  },\n  getNextSegmentValue: (range, delta, segmentValue) => segmentValue,\n  getPreferredReplacementString: DEFAULT_GET_PREFERRED_REPLACEMENT_STRING,\n  selection: undefined,\n  onFocus(): void {\n    // no-op\n  },\n  onBlur(): void {\n    // no-op\n  },\n  'data-testid': undefined,\n};\n\nexport default MaskedInput;\n"],"file":"MaskedInput.js"}
+{"version":3,"sources":["../src/MaskedInput.tsx"],"names":["React","useMemo","useEffect","classNames","Log","useForwardedRef","log","module","SELECTION_DIRECTION","FORWARD","BACKWARD","NONE","FIXED_WIDTH_SPACE","DEFAULT_GET_PREFERRED_REPLACEMENT_STRING","value","replaceIndex","newChar","substring","fillToLength","checkValue","exampleValue","length","trimTrailingMask","emptyMask","i","MaskedInput","forwardRef","props","ref","className","example","getNextSegmentValue","range","delta","segmentValue","getPreferredReplacementString","onChange","onSelect","pattern","placeholder","selection","onFocus","onBlur","dataTestId","input","examples","Array","isArray","replace","setSelectedSegment","debug","selectionStart","selectionEnd","selectionDirection","current","setSelectionRange","getSegment","cursorPosition","testValue","test","charAt","fillValue","filledValue","concat","isValid","patternRegex","RegExp","nextSegment","position","currentSegment","nextPosition","previousSegment","previousPosition","nextSegmentValue","segment","newSegmentValue","newValue","handleSelect","event","target","error","debug2","newSelection","handleSelectCapture","preventDefault","stopPropagation","handleArrowKey","key","handleKeyDown","startsWith","trimmedValue","altKey","metaKey","ctrlKey","newChars","from","Set","toUpperCase","toLowerCase","maxReplaceIndex","newSelectionStart","nextSegmentSelection","undefined","defaultProps"],"mappings":"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","sourcesContent":["import React, { useMemo, useEffect } from 'react';\nimport classNames from 'classnames';\nimport Log from '@deephaven/log';\nimport { useForwardedRef } from '@deephaven/react-hooks';\nimport './MaskedInput.scss';\n\nconst log = Log.module('MaskedInput');\n\nconst SELECTION_DIRECTION = {\n  FORWARD: 'forward',\n  BACKWARD: 'backward',\n  NONE: 'none',\n} as const;\n\n/**\n * Special space character that's the same size as tabular numbers\n * https://www.fileformat.info/info/unicode/char/2007/index.htm\n */\nconst FIXED_WIDTH_SPACE = '\\u2007';\n\nexport function DEFAULT_GET_PREFERRED_REPLACEMENT_STRING(\n  value: string,\n  replaceIndex: number,\n  newChar: string\n): string {\n  return (\n    value.substring(0, replaceIndex) +\n    newChar +\n    value.substring(replaceIndex + 1)\n  );\n}\n\n/**\n * Fill the string on the right side with the example value to the given length\n * @param checkValue Initial string to pad\n * @param exampleValue Example value\n * @param length Target length\n * @returns String padded with the given example value\n */\nexport function fillToLength(\n  checkValue: string,\n  exampleValue: string,\n  length: number\n): string {\n  return checkValue.length < length\n    ? `${checkValue}${exampleValue.substring(checkValue.length, length)}`\n    : checkValue;\n}\n\n/**\n * Trim all characters matching the empty mask on the right side of the given value\n * @param value String to trim\n * @param emptyMask Empty mask\n * @returns Trimmed string\n */\nexport function trimTrailingMask(value: string, emptyMask: string): string {\n  let { length } = value;\n  for (let i = value.length - 1; i >= 0; i -= 1) {\n    if (emptyMask[i] === value[i]) {\n      length = i;\n    } else {\n      break;\n    }\n  }\n  return value.substring(0, length);\n}\n\nexport type SelectionSegment = {\n  selectionStart: number;\n  selectionEnd: number;\n  selectionDirection?: typeof SELECTION_DIRECTION[keyof typeof SELECTION_DIRECTION];\n};\n\ntype MaskedInputProps = {\n  /** An extra class name to add to the component */\n  className?: string;\n  /** The regex pattern this masked input must match */\n  pattern: string;\n  /** Input placeholder */\n  placeholder?: string;\n  /** The current value to display */\n  value: string;\n  /** One or more examples of valid values. Used when deciding if next keystroke is valid (as rest of the current value may be incomplete) */\n  example: string | string[];\n  /** The current selection to use for the input */\n  selection?: SelectionSegment;\n  /** Called when the value changes. Note the value may still be incomplete. */\n  onChange?(value: string): void;\n  /** Called when selection changes */\n  onSelect?(segment: SelectionSegment): void;\n  /** Retrieve the next value for a provided segment */\n  getNextSegmentValue?(\n    segment: SelectionSegment,\n    delta: number,\n    segmentValue: string,\n    value: string\n  ): string;\n  getPreferredReplacementString?(\n    value: string,\n    replaceIndex: number,\n    replaceChar: string,\n    selectionStart: number,\n    selectionEnd: number\n  ): string;\n  onFocus?: React.FocusEventHandler;\n  onBlur?: React.FocusEventHandler;\n\n  'data-testid'?: string;\n};\n\n/**\n * A masked input for entering data from a template.\n * Won't work by itself, must use within another component and handle updating the value/selection.\n */\n// Forward ref causes a false positive for display-name in eslint:\n// https://github.com/yannickcr/eslint-plugin-react/issues/2269\n// eslint-disable-next-line react/display-name\nconst MaskedInput = React.forwardRef<HTMLInputElement, MaskedInputProps>(\n  (props: MaskedInputProps, ref) => {\n    const {\n      className,\n      example,\n      getNextSegmentValue = (range, delta, segmentValue) => segmentValue,\n      getPreferredReplacementString = DEFAULT_GET_PREFERRED_REPLACEMENT_STRING,\n      onChange = () => false,\n      onSelect = () => false,\n      pattern,\n      placeholder,\n      selection,\n      value,\n      onFocus = () => false,\n      onBlur = () => false,\n      'data-testid': dataTestId,\n    } = props;\n    const input = useForwardedRef(ref);\n    const examples = useMemo(\n      () => (Array.isArray(example) ? example : [example]),\n      [example]\n    );\n    const emptyMask = useMemo(\n      () => examples[0].replace(/[a-zA-Z0-9]/g, FIXED_WIDTH_SPACE),\n      [examples]\n    );\n\n    useEffect(\n      function setSelectedSegment() {\n        if (selection != null) {\n          log.debug('setting selection...', selection);\n          const {\n            selectionStart,\n            selectionEnd,\n            selectionDirection,\n          } = selection;\n          input.current?.setSelectionRange(\n            selectionStart,\n            selectionEnd,\n            selectionDirection\n          );\n          log.debug('selection set!');\n        }\n      },\n      [selection, input]\n    );\n\n    /**\n     * Returns the selection range for the segment at the given cursor position\n     * @param cursorPosition The current position of the cursor\n     */\n    function getSegment(cursorPosition: number) {\n      let selectionStart = cursorPosition;\n      let selectionEnd = cursorPosition;\n      const testValue = examples.length > 0 ? examples[0] : value;\n\n      for (let i = selectionStart - 1; i >= 0; i -= 1) {\n        if (!/[a-zA-Z0-9]/g.test(testValue.charAt(i))) {\n          break;\n        }\n\n        selectionStart = i;\n      }\n\n      for (let i = selectionEnd; i < testValue.length; i += 1) {\n        if (!/[a-zA-Z0-9]/g.test(testValue.charAt(i))) {\n          break;\n        }\n\n        selectionEnd = i + 1;\n      }\n\n      const selectionDirection =\n        selectionStart === selectionEnd\n          ? SELECTION_DIRECTION.NONE\n          : SELECTION_DIRECTION.BACKWARD;\n\n      return {\n        selectionStart,\n        selectionEnd,\n        selectionDirection,\n      };\n    }\n\n    /**\n     * Replaces all blank spaces and everything after the current cursor position with the example value\n     * @param checkValue The value to check/fill in\n     * @param exampleValue The example to fill in the value from\n     * @param cursorPosition The cursor position\n     * @returns The filled in value\n     */\n    function fillValue(\n      checkValue: string,\n      exampleValue: string,\n      cursorPosition = checkValue.length\n    ): string {\n      let filledValue = '';\n      for (let i = 0; i < cursorPosition; i += 1) {\n        if (checkValue.charAt(i) !== FIXED_WIDTH_SPACE) {\n          filledValue = filledValue.concat(checkValue[i]);\n        } else {\n          filledValue = filledValue.concat(exampleValue[i]);\n        }\n      }\n      filledValue = filledValue.concat(exampleValue.substring(cursorPosition));\n\n      return filledValue;\n    }\n\n    /**\n     * Checks if a given `value` is valid up until the `cursorPosition`.\n     * Uses the examples to build the rest of the string\n     * @param checkValue The value to check validity of\n     * @param cursorPosition The position of the cursor to check up to\n     */\n    function isValid(\n      checkValue: string,\n      cursorPosition = checkValue.length\n    ): boolean {\n      const patternRegex = new RegExp(`^${pattern}$`);\n      if (patternRegex.test(checkValue)) {\n        return true;\n      }\n\n      for (let i = 0; i < examples.length; i += 1) {\n        const filledValue = fillValue(checkValue, examples[i], cursorPosition);\n        if (patternRegex.test(filledValue)) {\n          return true;\n        }\n      }\n      return false;\n    }\n\n    /**\n     * Returns the next segment after the given position\n     * @param position The cursor position to start at\n     * @returns The new selection range\n     */\n    function nextSegment(position: number): SelectionSegment {\n      const currentSegment = getSegment(position);\n      const nextPosition = currentSegment.selectionEnd + 1;\n      if (nextPosition >= value.length) {\n        return currentSegment;\n      }\n\n      return getSegment(nextPosition);\n    }\n\n    /**\n     * Returns the previous segment before the given position\n     * @param position The cursor position to start at\n     * @returns The new selection range\n     */\n    function previousSegment(position: number): SelectionSegment {\n      const currentSegment = getSegment(position);\n      const previousPosition = currentSegment.selectionStart - 1;\n      if (previousPosition <= 0) {\n        return currentSegment;\n      }\n\n      return getSegment(previousPosition);\n    }\n\n    function nextSegmentValue(position: number, delta: number): void {\n      const segment = getSegment(position);\n      const segmentValue = value.substring(\n        segment.selectionStart,\n        segment.selectionEnd\n      );\n      const newSegmentValue = getNextSegmentValue(\n        segment,\n        delta,\n        segmentValue,\n        value\n      );\n      const newValue =\n        value.substring(0, segment.selectionStart) +\n        newSegmentValue +\n        value.substring(segment.selectionEnd);\n      if (isValid(newValue, segment.selectionEnd)) {\n        onChange(newValue);\n        onSelect(segment);\n      }\n    }\n\n    function handleSelect(event: React.UIEvent<HTMLInputElement>) {\n      const {\n        selectionStart = 0,\n        selectionEnd = 0,\n        selectionDirection = 'none',\n      } = event.target as HTMLInputElement;\n\n      if (\n        selectionStart === null ||\n        selectionEnd === null ||\n        selectionDirection === null\n      ) {\n        log.error(\n          'Selection attempted on non-text input element',\n          event.target\n        );\n        return;\n      }\n\n      log.debug2(\n        'handleSelect',\n        selectionStart,\n        selectionEnd,\n        selectionDirection\n      );\n      if (\n        selection != null &&\n        selectionStart === selection.selectionStart &&\n        selectionEnd === selection.selectionEnd\n      ) {\n        return;\n      }\n      if (selectionStart === selectionEnd) {\n        const newSelection = getSegment(selectionStart);\n        log.debug(\n          'Selection segment from ',\n          selectionStart,\n          selectionEnd,\n          '=>',\n          newSelection\n        );\n        onSelect(newSelection);\n      } else {\n        onSelect({ selectionStart, selectionEnd, selectionDirection });\n      }\n    }\n\n    function handleSelectCapture(event: React.UIEvent<HTMLInputElement>) {\n      if (!input.current) {\n        return;\n      }\n      log.debug('handleSelectCapture', event);\n      const selectionStart = input.current.selectionStart || 0;\n      if (\n        selectionStart === value.length &&\n        selection != null &&\n        selectionStart !== selection.selectionStart\n      ) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    }\n\n    function handleArrowKey(event: React.KeyboardEvent<HTMLInputElement>) {\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (!input.current) {\n        return;\n      }\n\n      const { key } = event;\n      const { selectionStart = 0, selectionEnd = 0 } = input.current;\n      if (selectionStart === null || selectionEnd === null) {\n        log.error(\n          'Selection arrow nvaigation attempted on non-text input element',\n          event.target\n        );\n        return;\n      }\n\n      if (key === 'ArrowLeft') {\n        onSelect(previousSegment(selectionStart));\n      } else if (key === 'ArrowRight') {\n        onSelect(nextSegment(selectionEnd));\n      } else if (key === 'ArrowUp') {\n        nextSegmentValue(selectionStart, -1);\n      } else if (key === 'ArrowDown') {\n        nextSegmentValue(selectionStart, 1);\n      }\n    }\n\n    function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {\n      if (!input.current) {\n        return;\n      }\n      log.debug('handleKeyDown', event);\n      const { key } = event;\n      const { selectionStart = 0, selectionEnd = 0 } = input.current;\n      if (selectionStart === null || selectionEnd === null) {\n        log.error(\n          'Selection key event on non-text input element',\n          event.target\n        );\n        return;\n      }\n\n      if (key.startsWith('Arrow')) {\n        handleArrowKey(event);\n        return;\n      }\n\n      if (key === 'Delete' || key === 'Backspace') {\n        event.preventDefault();\n        event.stopPropagation();\n\n        // Deleting at the end of the value\n        if (selectionEnd >= trimTrailingMask(value, emptyMask).length) {\n          const newValue = value.substring(\n            0,\n            // Delete whole selection or just the char before the cursor\n            selectionStart === selectionEnd\n              ? selectionStart - 1\n              : selectionStart\n          );\n          const trimmedValue = trimTrailingMask(newValue, emptyMask);\n          if (trimmedValue !== value) {\n            onChange(trimmedValue);\n            onSelect({\n              selectionStart: trimmedValue.length,\n              selectionEnd: trimmedValue.length,\n              selectionDirection: SELECTION_DIRECTION.NONE,\n            });\n          }\n          return;\n        }\n\n        if (selectionStart !== selectionEnd) {\n          // Replace all non-masked characters with blanks, set selection to start\n          const newValue =\n            value.substring(0, selectionStart) +\n            value\n              .substring(selectionStart, selectionEnd)\n              .replace(/[a-zA-Z0-9]/g, FIXED_WIDTH_SPACE) +\n            value.substring(selectionEnd);\n          log.debug(\n            'Range ',\n            selectionStart,\n            selectionEnd,\n            'deleted, setting value',\n            newValue\n          );\n\n          onChange(newValue);\n          onSelect({\n            selectionStart,\n            selectionEnd: selectionStart,\n            selectionDirection: SELECTION_DIRECTION.NONE,\n          });\n        } else if (selectionStart > 0) {\n          for (let i = selectionStart - 1; i >= 0; i -= 1) {\n            // Only replace non placeholder text\n            const newValue =\n              value.substring(0, i) +\n              value\n                .substring(i, selectionStart)\n                .replace(/[a-zA-Z0-9]/g, FIXED_WIDTH_SPACE) +\n              value.substring(selectionStart);\n\n            if (newValue !== value) {\n              onChange(newValue);\n              onSelect({\n                selectionStart: i,\n                selectionEnd: i,\n                selectionDirection: SELECTION_DIRECTION.NONE,\n              });\n              return;\n            }\n          }\n        }\n\n        return;\n      }\n\n      if (event.altKey || event.metaKey || event.ctrlKey || key.length > 1) {\n        return;\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      // Get the different permutations of the character they entered, remove duplicates\n      const newChars = Array.from(\n        new Set([key, key.toUpperCase(), key.toLowerCase()])\n      );\n      for (let i = 0; i < newChars.length; i += 1) {\n        const newChar = newChars[i];\n\n        // If they're typing an alphanumeric character, be smart and allow it to jump ahead\n        const maxReplaceIndex = /[a-zA-Z0-9]/g.test(newChar)\n          ? examples[0].length - 1\n          : selectionStart;\n        for (\n          let replaceIndex = selectionStart;\n          replaceIndex <= maxReplaceIndex;\n          replaceIndex += 1\n        ) {\n          // Fill with the example chars if necessary\n          const filledValue = fillToLength(\n            value,\n            examples[0],\n            replaceIndex + 1\n          );\n          const newValue = getPreferredReplacementString(\n            filledValue,\n            replaceIndex,\n            newChar,\n            selectionStart,\n            selectionEnd\n          );\n          if (isValid(newValue, replaceIndex + 1)) {\n            const currentSegment = getSegment(replaceIndex);\n            const newSelectionStart = replaceIndex + 1;\n            let newSelection: SelectionSegment = {\n              selectionStart: newSelectionStart,\n              selectionEnd: newSelectionStart,\n              selectionDirection: SELECTION_DIRECTION.NONE,\n            };\n            if (newSelectionStart >= currentSegment.selectionEnd) {\n              const nextSegmentSelection = nextSegment(replaceIndex);\n              if (\n                nextSegmentSelection.selectionStart !==\n                currentSegment.selectionStart\n              ) {\n                newSelection = nextSegmentSelection;\n              }\n            }\n            log.debug('handleKeyDown', key, '=>', newValue, newSelection);\n            onChange(newValue);\n            onSelect(newSelection);\n            return;\n          }\n        }\n      }\n    }\n\n    // Need to use \"text\" type so we can apply a pattern and make selection properly\n    return (\n      <input\n        ref={input}\n        className={classNames('form-control masked-input', className)}\n        type=\"text\"\n        pattern={pattern}\n        placeholder={placeholder}\n        value={value}\n        onChange={() => undefined}\n        onKeyDown={handleKeyDown}\n        onSelect={handleSelect}\n        onSelectCapture={handleSelectCapture}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        data-testid={dataTestId}\n      />\n    );\n  }\n);\n\nMaskedInput.defaultProps = {\n  className: '',\n  placeholder: undefined,\n  onChange(): void {\n    // no-op\n  },\n  onSelect(): void {\n    // no-op\n  },\n  getNextSegmentValue: (range, delta, segmentValue) => segmentValue,\n  getPreferredReplacementString: DEFAULT_GET_PREFERRED_REPLACEMENT_STRING,\n  selection: undefined,\n  onFocus(): void {\n    // no-op\n  },\n  onBlur(): void {\n    // no-op\n  },\n  'data-testid': undefined,\n};\n\nexport default MaskedInput;\n"],"file":"MaskedInput.js"}

package/dist/SearchInput.d.ts

@@ -3,9 +3,11 @@ import './SearchInput.scss';
 interface SearchInputProps {
     value: string;
     placeholder: string;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
     onChange: React.ChangeEventHandler<HTMLInputElement>;
     onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;
     className: string;
+    disabled?: boolean;
     matchCount: number;
     id: string;
     'data-testid'?: string;

package/dist/SearchInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../src/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAI7C,OAAO,oBAAoB,CAAC;AAE5B,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACrD,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACxD,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,cAAM,WAAY,SAAQ,aAAa,CAAC,gBAAgB,CAAC;IACvD,MAAM,CAAC,YAAY;;;;qBAIJ,IAAI;;;MAKjB;gBAEU,KAAK,EAAE,gBAAgB;IAKnC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAE9C,KAAK,IAAI,IAAI;IAIb,MAAM,IAAI,GAAG,CAAC,OAAO;CAiCtB;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../src/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAI7C,OAAO,oBAAoB,CAAC;AAE5B,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACnD,QAAQ,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACrD,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACxD,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,cAAM,WAAY,SAAQ,aAAa,CAAC,gBAAgB,CAAC;IACvD,MAAM,CAAC,YAAY;;;;qBAIJ,IAAI;;;MAKjB;gBAEU,KAAK,EAAE,gBAAgB;IAKnC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAE9C,KAAK,IAAI,IAAI;IAIb,MAAM,IAAI,GAAG,CAAC,OAAO;CAqCtB;AAED,eAAe,WAAW,CAAC"}

package/dist/SearchInput.js

@@ -25,8 +25,10 @@ class SearchInput extends PureComponent {
     var {
       value,
       placeholder,
+      onBlur,
       onChange,
       className,
+      disabled,
       matchCount,
       id,
       onKeyDown,
@@ -37,9 +39,11 @@ class SearchInput extends PureComponent {
     }, /*#__PURE__*/React.createElement("input", {
       type: "search",
       value: value,
+      onBlur: onBlur,
       onChange: onChange,
       onKeyDown: onKeyDown,
       className: "form-control",
+      disabled: disabled,
       placeholder: placeholder,
       ref: this.inputField,
       id: id,

package/dist/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/SearchInput.tsx"],"names":["React","PureComponent","FontAwesomeIcon","vsSearch","classNames","SearchInput","constructor","props","inputField","createRef","focus","current","render","value","placeholder","onChange","className","matchCount","id","onKeyDown","dataTestId","undefined"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,aAAhB,QAAqC,OAArC;AACA,SAASC,eAAT,QAAgC,gCAAhC;AACA,SAASC,QAAT,QAAyB,kBAAzB;AACA,OAAOC,UAAP,MAAuB,YAAvB;;;AAcA,MAAMC,WAAN,SAA0BJ,aAA1B,CAA0D;AAYxDK,EAAAA,WAAW,CAACC,KAAD,EAA0B;AACnC,UAAMA,KAAN;;AADmC;;AAEnC,SAAKC,UAAL,gBAAkBR,KAAK,CAACS,SAAN,EAAlB;AACD;;AAIDC,EAAAA,KAAK,GAAS;AAAA;;AACZ,kCAAKF,UAAL,CAAgBG,OAAhB,gFAAyBD,KAAzB;AACD;;AAEDE,EAAAA,MAAM,GAAgB;AACpB,QAAM;AACJC,MAAAA,KADI;AAEJC,MAAAA,WAFI;AAGJC,MAAAA,QAHI;AAIJC,MAAAA,SAJI;AAKJC,MAAAA,UALI;AAMJC,MAAAA,EANI;AAOJC,MAAAA,SAPI;AAQJ,qBAAeC;AARX,QASF,KAAKb,KATT;AAUA,wBACE;AAAK,MAAA,SAAS,EAAEH,UAAU,CAAC,cAAD,EAAiBY,SAAjB;AAA1B,oBACE;AACE,MAAA,IAAI,EAAC,QADP;AAEE,MAAA,KAAK,EAAEH,KAFT;AAGE,MAAA,QAAQ,EAAEE,QAHZ;AAIE,MAAA,SAAS,EAAEI,SAJb;AAKE,MAAA,SAAS,EAAC,cALZ;AAME,MAAA,WAAW,EAAEL,WANf;AAOE,MAAA,GAAG,EAAE,KAAKN,UAPZ;AAQE,MAAA,EAAE,EAAEU,EARN;AASE,qBAAaE;AATf,MADF,EAYGH,UAAU,IAAI,IAAd,iBACC;AAAM,MAAA,SAAS,EAAC;AAAhB,OAAgCA,UAAhC,CAbJ,eAeE;AAAM,MAAA,SAAS,EAAC;AAAhB,oBACE,oBAAC,eAAD;AAAiB,MAAA,IAAI,EAAEd;AAAvB,MADF,CAfF,CADF;AAqBD;;AAvDuD;;gBAApDE,W,kBACkB;AACpBS,EAAAA,WAAW,EAAE,QADO;AAEpBE,EAAAA,SAAS,EAAE,EAFS;AAGpBC,EAAAA,UAAU,EAAE,IAHQ;;AAIpBE,EAAAA,SAAS,GAAS,CAChB;AACD,GANmB;;AAOpBD,EAAAA,EAAE,EAAE,EAPgB;AAQpB,iBAAeG;AARK,C;;AAyDxB,eAAehB,WAAf","sourcesContent":["import React, { PureComponent } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { vsSearch } from '@deephaven/icons';\nimport classNames from 'classnames';\nimport './SearchInput.scss';\n\ninterface SearchInputProps {\n  value: string;\n  placeholder: string;\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;\n  className: string;\n  matchCount: number;\n  id: string;\n  'data-testid'?: string;\n}\n\nclass SearchInput extends PureComponent<SearchInputProps> {\n  static defaultProps = {\n    placeholder: 'Search',\n    className: '',\n    matchCount: null,\n    onKeyDown(): void {\n      // no-op\n    },\n    id: '',\n    'data-testid': undefined,\n  };\n\n  constructor(props: SearchInputProps) {\n    super(props);\n    this.inputField = React.createRef();\n  }\n\n  inputField: React.RefObject<HTMLInputElement>;\n\n  focus(): void {\n    this.inputField.current?.focus();\n  }\n\n  render(): JSX.Element {\n    const {\n      value,\n      placeholder,\n      onChange,\n      className,\n      matchCount,\n      id,\n      onKeyDown,\n      'data-testid': dataTestId,\n    } = this.props;\n    return (\n      <div className={classNames('search-group', className)}>\n        <input\n          type=\"search\"\n          value={value}\n          onChange={onChange}\n          onKeyDown={onKeyDown}\n          className=\"form-control\"\n          placeholder={placeholder}\n          ref={this.inputField}\n          id={id}\n          data-testid={dataTestId}\n        />\n        {matchCount != null && (\n          <span className=\"search-match\">{matchCount}</span>\n        )}\n        <span className=\"search-icon\">\n          <FontAwesomeIcon icon={vsSearch} />\n        </span>\n      </div>\n    );\n  }\n}\n\nexport default SearchInput;\n"],"file":"SearchInput.js"}
+{"version":3,"sources":["../src/SearchInput.tsx"],"names":["React","PureComponent","FontAwesomeIcon","vsSearch","classNames","SearchInput","constructor","props","inputField","createRef","focus","current","render","value","placeholder","onBlur","onChange","className","disabled","matchCount","id","onKeyDown","dataTestId","undefined"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,aAAhB,QAAqC,OAArC;AACA,SAASC,eAAT,QAAgC,gCAAhC;AACA,SAASC,QAAT,QAAyB,kBAAzB;AACA,OAAOC,UAAP,MAAuB,YAAvB;;;AAgBA,MAAMC,WAAN,SAA0BJ,aAA1B,CAA0D;AAYxDK,EAAAA,WAAW,CAACC,KAAD,EAA0B;AACnC,UAAMA,KAAN;;AADmC;;AAEnC,SAAKC,UAAL,gBAAkBR,KAAK,CAACS,SAAN,EAAlB;AACD;;AAIDC,EAAAA,KAAK,GAAS;AAAA;;AACZ,kCAAKF,UAAL,CAAgBG,OAAhB,gFAAyBD,KAAzB;AACD;;AAEDE,EAAAA,MAAM,GAAgB;AACpB,QAAM;AACJC,MAAAA,KADI;AAEJC,MAAAA,WAFI;AAGJC,MAAAA,MAHI;AAIJC,MAAAA,QAJI;AAKJC,MAAAA,SALI;AAMJC,MAAAA,QANI;AAOJC,MAAAA,UAPI;AAQJC,MAAAA,EARI;AASJC,MAAAA,SATI;AAUJ,qBAAeC;AAVX,QAWF,KAAKf,KAXT;AAYA,wBACE;AAAK,MAAA,SAAS,EAAEH,UAAU,CAAC,cAAD,EAAiBa,SAAjB;AAA1B,oBACE;AACE,MAAA,IAAI,EAAC,QADP;AAEE,MAAA,KAAK,EAAEJ,KAFT;AAGE,MAAA,MAAM,EAAEE,MAHV;AAIE,MAAA,QAAQ,EAAEC,QAJZ;AAKE,MAAA,SAAS,EAAEK,SALb;AAME,MAAA,SAAS,EAAC,cANZ;AAOE,MAAA,QAAQ,EAAEH,QAPZ;AAQE,MAAA,WAAW,EAAEJ,WARf;AASE,MAAA,GAAG,EAAE,KAAKN,UATZ;AAUE,MAAA,EAAE,EAAEY,EAVN;AAWE,qBAAaE;AAXf,MADF,EAcGH,UAAU,IAAI,IAAd,iBACC;AAAM,MAAA,SAAS,EAAC;AAAhB,OAAgCA,UAAhC,CAfJ,eAiBE;AAAM,MAAA,SAAS,EAAC;AAAhB,oBACE,oBAAC,eAAD;AAAiB,MAAA,IAAI,EAAEhB;AAAvB,MADF,CAjBF,CADF;AAuBD;;AA3DuD;;gBAApDE,W,kBACkB;AACpBS,EAAAA,WAAW,EAAE,QADO;AAEpBG,EAAAA,SAAS,EAAE,EAFS;AAGpBE,EAAAA,UAAU,EAAE,IAHQ;;AAIpBE,EAAAA,SAAS,GAAS,CAChB;AACD,GANmB;;AAOpBD,EAAAA,EAAE,EAAE,EAPgB;AAQpB,iBAAeG;AARK,C;;AA6DxB,eAAelB,WAAf","sourcesContent":["import React, { PureComponent } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { vsSearch } from '@deephaven/icons';\nimport classNames from 'classnames';\nimport './SearchInput.scss';\n\ninterface SearchInputProps {\n  value: string;\n  placeholder: string;\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;\n  className: string;\n  disabled?: boolean;\n  matchCount: number;\n  id: string;\n  'data-testid'?: string;\n}\n\nclass SearchInput extends PureComponent<SearchInputProps> {\n  static defaultProps = {\n    placeholder: 'Search',\n    className: '',\n    matchCount: null,\n    onKeyDown(): void {\n      // no-op\n    },\n    id: '',\n    'data-testid': undefined,\n  };\n\n  constructor(props: SearchInputProps) {\n    super(props);\n    this.inputField = React.createRef();\n  }\n\n  inputField: React.RefObject<HTMLInputElement>;\n\n  focus(): void {\n    this.inputField.current?.focus();\n  }\n\n  render(): JSX.Element {\n    const {\n      value,\n      placeholder,\n      onBlur,\n      onChange,\n      className,\n      disabled,\n      matchCount,\n      id,\n      onKeyDown,\n      'data-testid': dataTestId,\n    } = this.props;\n    return (\n      <div className={classNames('search-group', className)}>\n        <input\n          type=\"search\"\n          value={value}\n          onBlur={onBlur}\n          onChange={onChange}\n          onKeyDown={onKeyDown}\n          className=\"form-control\"\n          disabled={disabled}\n          placeholder={placeholder}\n          ref={this.inputField}\n          id={id}\n          data-testid={dataTestId}\n        />\n        {matchCount != null && (\n          <span className=\"search-match\">{matchCount}</span>\n        )}\n        <span className=\"search-icon\">\n          <FontAwesomeIcon icon={vsSearch} />\n        </span>\n      </div>\n    );\n  }\n}\n\nexport default SearchInput;\n"],"file":"SearchInput.js"}

package/dist/SelectValueList.d.ts

@@ -14,6 +14,7 @@ declare type SelectValueListProps<T> = {
     rowHeight: number;
     offset: number;
     items: SelectItem<T>[];
+    onBlur?: React.FocusEventHandler<Element>;
     onSelect(itemIndex: number, value: T | null): void;
     onViewportChange(topRow: number, bottomRow: number): void;
     'data-testid'?: string;
@@ -26,6 +27,7 @@ declare class SelectValueList<T> extends PureComponent<SelectValueListProps<T>>
     static defaultProps: {
         disabled: boolean;
         rowHeight: number;
+        onBlur: () => void;
         'data-testid': undefined;
     };
     constructor(props: SelectValueListProps<T>);
@@ -36,9 +38,12 @@ declare class SelectValueList<T> extends PureComponent<SelectValueListProps<T>>
     bottomRow: number | null;
     getCachedItem: ((itemIndex: number, key: number, value: T, displayValue: string | undefined, rowHeight: number, isSelected: boolean, disabled: boolean) => JSX.Element) & memoize.Memoized<(itemIndex: number, key: number, value: T, displayValue: string | undefined, rowHeight: number, isSelected: boolean, disabled: boolean) => JSX.Element>;
     getCachedItems: ((items: SelectItem<T>[], rowHeight: number, offset: number, disabled: boolean) => React.ReactNode) & memoize.Memoized<(items: SelectItem<T>[], rowHeight: number, offset: number, disabled: boolean) => React.ReactNode>;
+    handleBlur(e: React.FocusEvent): void;
     handleScroll(): void;
     handleSelect(itemIndex: number): void;
     sendViewportUpdate(): void;
+    getElement(itemIndex: number): Element | null;
+    scrollIntoView(index: number): void;
     render(): JSX.Element;
 }
 export default SelectValueList;

package/dist/SelectValueList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectValueList.d.ts","sourceRoot":"","sources":["../src/SelectValueList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,wBAAwB,CAAC;AAEhC,OAAO,OAAO,MAAM,UAAU,CAAC;AAG/B,UAAU,UAAU,CAAC,CAAC;IACpB,KAAK,EAAE,CAAC,CAAC;IACT,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,aAAK,oBAAoB,CAAC,CAAC,IAAI;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAGlB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IAEvB,QAAQ,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,GAAG,IAAI,GAAG,IAAI,CAAC;IACnD,gBAAgB,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IAE1D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;GAGG;AACH,cAAM,eAAe,CAAC,CAAC,CAAE,SAAQ,aAAa,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC;IACrE,MAAM,CAAC,YAAY;;;;MAIjB;gBAEU,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAW1C,iBAAiB,IAAI,IAAI;IAIzB,kBAAkB,IAAI,IAAI;IAI1B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAEtC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAEtB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IAEzB,aAAa,eAEE,MAAM,OACZ,MAAM,SACJ,CAAC,gBACM,MAAM,GAAG,SAAS,aACrB,MAAM,cACL,OAAO,YACT,OAAO,KAChB,WAAW,iCAPD,MAAM,OACZ,MAAM,SACJ,CAAC,gBACM,MAAM,GAAG,SAAS,aACrB,MAAM,cACL,OAAO,YACT,OAAO,KAChB,WAAW,EAmBd;IAEF,cAAc,WAEH,WAAW,CAAC,CAAC,EAAE,aACX,MAAM,UACT,MAAM,YACJ,OAAO,KAChB,MAAM,SAAS,6BAJT,WAAW,CAAC,CAAC,EAAE,aACX,MAAM,UACT,MAAM,YACJ,OAAO,KAChB,MAAM,SAAS,EAqBlB;IAEF,YAAY,IAAI,IAAI;IAIpB,YAAY,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI;IAYrC,kBAAkB,IAAI,IAAI;IAmB1B,MAAM,IAAI,GAAG,CAAC,OAAO;CAgDtB;AAED,eAAe,eAAe,CAAC"}
+{"version":3,"file":"SelectValueList.d.ts","sourceRoot":"","sources":["../src/SelectValueList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,wBAAwB,CAAC;AAEhC,OAAO,OAAO,MAAM,UAAU,CAAC;AAG/B,UAAU,UAAU,CAAC,CAAC;IACpB,KAAK,EAAE,CAAC,CAAC;IACT,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,aAAK,oBAAoB,CAAC,CAAC,IAAI;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAGlB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IAEvB,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAC1C,QAAQ,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,GAAG,IAAI,GAAG,IAAI,CAAC;IACnD,gBAAgB,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IAE1D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;GAGG;AACH,cAAM,eAAe,CAAC,CAAC,CAAE,SAAQ,aAAa,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC;IACrE,MAAM,CAAC,YAAY;;;sBAGL,IAAI;;MAEhB;gBAEU,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAY1C,iBAAiB,IAAI,IAAI;IAIzB,kBAAkB,IAAI,IAAI;IAI1B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAEtC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAEtB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IAEzB,aAAa,eAEE,MAAM,OACZ,MAAM,SACJ,CAAC,gBACM,MAAM,GAAG,SAAS,aACrB,MAAM,cACL,OAAO,YACT,OAAO,KAChB,WAAW,iCAPD,MAAM,OACZ,MAAM,SACJ,CAAC,gBACM,MAAM,GAAG,SAAS,aACrB,MAAM,cACL,OAAO,YACT,OAAO,KAChB,WAAW,EAoBd;IAEF,cAAc,WAEH,WAAW,CAAC,CAAC,EAAE,aACX,MAAM,UACT,MAAM,YACJ,OAAO,KAChB,MAAM,SAAS,6BAJT,WAAW,CAAC,CAAC,EAAE,aACX,MAAM,UACT,MAAM,YACJ,OAAO,KAChB,MAAM,SAAS,EAqBlB;IAEF,UAAU,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,GAAG,IAAI;IAarC,YAAY,IAAI,IAAI;IAIpB,YAAY,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI;IAYrC,kBAAkB,IAAI,IAAI;IAmB1B,UAAU,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAQ7C,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKnC,MAAM,IAAI,GAAG,CAAC,OAAO;CAiDtB;AAED,eAAe,eAAe,CAAC"}

package/dist/SelectValueList.js

@@ -25,15 +25,20 @@ class SelectValueList extends PureComponent {
         height: rowHeight
       };
       var text = displayValue != null ? displayValue : value;
-      return /*#__PURE__*/React.createElement("li", {
-        className: "value-list-item",
-        style: style,
-        key: key
-      }, /*#__PURE__*/React.createElement(Checkbox, {
-        checked: isSelected,
-        disabled: disabled,
-        onChange: () => this.handleSelect(itemIndex)
-      }, text));
+      return (
+        /*#__PURE__*/
+        // Tab index is needed so the item could be a related target in the blur event details
+        React.createElement("li", {
+          className: "value-list-item",
+          style: style,
+          key: key,
+          tabIndex: -1
+        }, /*#__PURE__*/React.createElement(Checkbox, {
+          checked: isSelected,
+          disabled: disabled,
+          onChange: () => this.handleSelect(itemIndex)
+        }, text))
+      );
     }, {
       max: 1000
     }));
@@ -61,6 +66,7 @@ class SelectValueList extends PureComponent {
       max: 1
     }));
 
+    this.handleBlur = this.handleBlur.bind(this);
     this.handleScroll = this.handleScroll.bind(this);
     this.handleSelect = this.handleSelect.bind(this);
     this.list = /*#__PURE__*/React.createRef();
@@ -76,6 +82,16 @@ class SelectValueList extends PureComponent {
     this.sendViewportUpdate();
   }
 
+  handleBlur(e) {
+    if (!e.relatedTarget || this.list.current && e.relatedTarget instanceof HTMLElement && !this.list.current.contains(e.relatedTarget)) {
+      // Next focused element is outside of the list
+      var {
+        onBlur
+      } = this.props;
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+    }
+  }
+
   handleScroll() {
     this.sendViewportUpdate();
   }
@@ -120,6 +136,22 @@ class SelectValueList extends PureComponent {
     }
   }
 
+  getElement(itemIndex) {
+    if (this.list.current == null) {
+      return null;
+    }
+
+    var elements = this.list.current.querySelectorAll('.value-list-item');
+    return elements[itemIndex];
+  }
+
+  scrollIntoView(index) {
+    var element = this.getElement(index);
+    element === null || element === void 0 ? void 0 : element.scrollIntoView({
+      block: 'center'
+    });
+  }
+
   render() {
     var {
       className,
@@ -136,6 +168,7 @@ class SelectValueList extends PureComponent {
       className: classNames('select-value-list-scroll-pane h-100 w-100', {
         'is-invalid': isInvalid
       }, className),
+      onBlur: this.handleBlur,
       onScroll: this.handleScroll,
       ref: this.list,
       "data-testid": dataTestId
@@ -160,6 +193,7 @@ class SelectValueList extends PureComponent {
 _defineProperty(SelectValueList, "defaultProps", {
   disabled: false,
   rowHeight: 21,
+  onBlur: () => undefined,
   'data-testid': undefined
 });
 

package/dist/SelectValueList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/SelectValueList.tsx"],"names":["React","PureComponent","classNames","memoize","Checkbox","SelectValueList","constructor","props","itemIndex","key","value","displayValue","rowHeight","isSelected","disabled","style","height","text","handleSelect","max","items","offset","itemElements","i","length","item","element","getCachedItem","push","handleScroll","bind","list","createRef","topRow","bottomRow","componentDidMount","sendViewportUpdate","componentDidUpdate","onSelect","visibleItemIndex","current","clientHeight","onViewportChange","top","scrollTop","bottom","Math","floor","ceil","render","className","isInvalid","itemCount","dataTestId","getCachedItems","position","left","undefined"],"mappings":"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","sourcesContent":["import React, { PureComponent } from 'react';\nimport './SelectValueList.scss';\nimport classNames from 'classnames';\nimport memoize from 'memoizee';\nimport Checkbox from './Checkbox';\n\ninterface SelectItem<T> {\n  value: T;\n  displayValue?: string;\n  isSelected: boolean;\n}\n\ntype SelectValueListProps<T> = {\n  className?: string;\n  disabled: boolean;\n  isInvalid?: boolean;\n  // Total item count\n  itemCount: number;\n  rowHeight: number;\n\n  // Offset of the top item in the items array\n  offset: number;\n  items: SelectItem<T>[];\n\n  onSelect(itemIndex: number, value: T | null): void;\n  onViewportChange(topRow: number, bottomRow: number): void;\n\n  'data-testid'?: string;\n};\n\n/**\n * Select values from a long scrollable list.\n * Swaps items in and out for infinite scrolling\n */\nclass SelectValueList<T> extends PureComponent<SelectValueListProps<T>> {\n  static defaultProps = {\n    disabled: false,\n    rowHeight: 21,\n    'data-testid': undefined,\n  };\n\n  constructor(props: SelectValueListProps<T>) {\n    super(props);\n\n    this.handleScroll = this.handleScroll.bind(this);\n    this.handleSelect = this.handleSelect.bind(this);\n\n    this.list = React.createRef();\n    this.topRow = null;\n    this.bottomRow = null;\n  }\n\n  componentDidMount(): void {\n    this.sendViewportUpdate();\n  }\n\n  componentDidUpdate(): void {\n    this.sendViewportUpdate();\n  }\n\n  list: React.RefObject<HTMLDivElement>;\n\n  topRow: number | null;\n\n  bottomRow: number | null;\n\n  getCachedItem = memoize(\n    (\n      itemIndex: number,\n      key: number,\n      value: T,\n      displayValue: string | undefined,\n      rowHeight: number,\n      isSelected: boolean,\n      disabled: boolean\n    ): JSX.Element => {\n      const style = {\n        height: rowHeight,\n      };\n      const text = displayValue != null ? displayValue : value;\n\n      return (\n        <li className=\"value-list-item\" style={style} key={key}>\n          <Checkbox\n            checked={isSelected}\n            disabled={disabled}\n            onChange={() => this.handleSelect(itemIndex)}\n          >\n            {text}\n          </Checkbox>\n        </li>\n      );\n    },\n    { max: 1000 }\n  );\n\n  getCachedItems = memoize(\n    (\n      items: SelectItem<T>[],\n      rowHeight: number,\n      offset: number,\n      disabled: boolean\n    ): React.ReactNode => {\n      const itemElements: JSX.Element[] = [];\n      for (let i = 0; i < items.length; i += 1) {\n        const item = items[i];\n        const { value, displayValue, isSelected } = item;\n        const itemIndex = offset + i;\n        const key = itemIndex;\n        const element = this.getCachedItem(\n          itemIndex,\n          key,\n          value,\n          displayValue,\n          rowHeight,\n          isSelected,\n          disabled\n        );\n        itemElements.push(element);\n      }\n      return itemElements;\n    },\n    { max: 1 }\n  );\n\n  handleScroll(): void {\n    this.sendViewportUpdate();\n  }\n\n  handleSelect(itemIndex: number): void {\n    const { items, offset, onSelect } = this.props;\n    const visibleItemIndex = itemIndex - offset;\n    if (visibleItemIndex >= 0 && visibleItemIndex < items.length) {\n      const item = items[visibleItemIndex];\n      const { value } = item;\n      onSelect(itemIndex, value);\n    } else {\n      onSelect(itemIndex, null);\n    }\n  }\n\n  sendViewportUpdate(): void {\n    if (!this.list.current || this.list.current.clientHeight === 0) {\n      return;\n    }\n\n    const { onViewportChange, rowHeight } = this.props;\n    const top = this.list.current.scrollTop;\n    const bottom = top + this.list.current.clientHeight;\n\n    const topRow = Math.floor(top / rowHeight);\n    const bottomRow = Math.ceil(bottom / rowHeight);\n\n    if (this.topRow !== topRow || this.bottomRow !== bottomRow) {\n      this.topRow = topRow;\n      this.bottomRow = bottomRow;\n      onViewportChange(topRow, bottomRow);\n    }\n  }\n\n  render(): JSX.Element {\n    const {\n      className,\n      disabled,\n      isInvalid,\n      items,\n      itemCount,\n      offset,\n      rowHeight,\n      'data-testid': dataTestId,\n    } = this.props;\n    const itemElements = this.getCachedItems(\n      items,\n      rowHeight,\n      offset,\n      disabled\n    );\n\n    return (\n      <div\n        className={classNames(\n          'select-value-list-scroll-pane h-100 w-100',\n          { 'is-invalid': isInvalid },\n          className\n        )}\n        onScroll={this.handleScroll}\n        ref={this.list}\n        data-testid={dataTestId}\n      >\n        <div\n          className=\"select-value-list\"\n          style={{ height: itemCount * rowHeight }}\n        >\n          <ol\n            className=\"select-value-list-content\"\n            style={{\n              position: 'absolute',\n              height: items.length * rowHeight,\n              top: offset * rowHeight,\n              left: 0,\n            }}\n          >\n            {itemElements}\n          </ol>\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default SelectValueList;\n"],"file":"SelectValueList.js"}
+{"version":3,"sources":["../src/SelectValueList.tsx"],"names":["React","PureComponent","classNames","memoize","Checkbox","SelectValueList","constructor","props","itemIndex","key","value","displayValue","rowHeight","isSelected","disabled","style","height","text","handleSelect","max","items","offset","itemElements","i","length","item","element","getCachedItem","push","handleBlur","bind","handleScroll","list","createRef","topRow","bottomRow","componentDidMount","sendViewportUpdate","componentDidUpdate","e","relatedTarget","current","HTMLElement","contains","onBlur","onSelect","visibleItemIndex","clientHeight","onViewportChange","top","scrollTop","bottom","Math","floor","ceil","getElement","elements","querySelectorAll","scrollIntoView","index","block","render","className","isInvalid","itemCount","dataTestId","getCachedItems","position","left","undefined"],"mappings":"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","sourcesContent":["import React, { PureComponent } from 'react';\nimport './SelectValueList.scss';\nimport classNames from 'classnames';\nimport memoize from 'memoizee';\nimport Checkbox from './Checkbox';\n\ninterface SelectItem<T> {\n  value: T;\n  displayValue?: string;\n  isSelected: boolean;\n}\n\ntype SelectValueListProps<T> = {\n  className?: string;\n  disabled: boolean;\n  isInvalid?: boolean;\n  // Total item count\n  itemCount: number;\n  rowHeight: number;\n\n  // Offset of the top item in the items array\n  offset: number;\n  items: SelectItem<T>[];\n\n  onBlur?: React.FocusEventHandler<Element>;\n  onSelect(itemIndex: number, value: T | null): void;\n  onViewportChange(topRow: number, bottomRow: number): void;\n\n  'data-testid'?: string;\n};\n\n/**\n * Select values from a long scrollable list.\n * Swaps items in and out for infinite scrolling\n */\nclass SelectValueList<T> extends PureComponent<SelectValueListProps<T>> {\n  static defaultProps = {\n    disabled: false,\n    rowHeight: 21,\n    onBlur: (): void => undefined,\n    'data-testid': undefined,\n  };\n\n  constructor(props: SelectValueListProps<T>) {\n    super(props);\n\n    this.handleBlur = this.handleBlur.bind(this);\n    this.handleScroll = this.handleScroll.bind(this);\n    this.handleSelect = this.handleSelect.bind(this);\n\n    this.list = React.createRef();\n    this.topRow = null;\n    this.bottomRow = null;\n  }\n\n  componentDidMount(): void {\n    this.sendViewportUpdate();\n  }\n\n  componentDidUpdate(): void {\n    this.sendViewportUpdate();\n  }\n\n  list: React.RefObject<HTMLDivElement>;\n\n  topRow: number | null;\n\n  bottomRow: number | null;\n\n  getCachedItem = memoize(\n    (\n      itemIndex: number,\n      key: number,\n      value: T,\n      displayValue: string | undefined,\n      rowHeight: number,\n      isSelected: boolean,\n      disabled: boolean\n    ): JSX.Element => {\n      const style = {\n        height: rowHeight,\n      };\n      const text = displayValue != null ? displayValue : value;\n\n      return (\n        // Tab index is needed so the item could be a related target in the blur event details\n        <li className=\"value-list-item\" style={style} key={key} tabIndex={-1}>\n          <Checkbox\n            checked={isSelected}\n            disabled={disabled}\n            onChange={() => this.handleSelect(itemIndex)}\n          >\n            {text}\n          </Checkbox>\n        </li>\n      );\n    },\n    { max: 1000 }\n  );\n\n  getCachedItems = memoize(\n    (\n      items: SelectItem<T>[],\n      rowHeight: number,\n      offset: number,\n      disabled: boolean\n    ): React.ReactNode => {\n      const itemElements: JSX.Element[] = [];\n      for (let i = 0; i < items.length; i += 1) {\n        const item = items[i];\n        const { value, displayValue, isSelected } = item;\n        const itemIndex = offset + i;\n        const key = itemIndex;\n        const element = this.getCachedItem(\n          itemIndex,\n          key,\n          value,\n          displayValue,\n          rowHeight,\n          isSelected,\n          disabled\n        );\n        itemElements.push(element);\n      }\n      return itemElements;\n    },\n    { max: 1 }\n  );\n\n  handleBlur(e: React.FocusEvent): void {\n    if (\n      !e.relatedTarget ||\n      (this.list.current &&\n        e.relatedTarget instanceof HTMLElement &&\n        !this.list.current.contains(e.relatedTarget))\n    ) {\n      // Next focused element is outside of the list\n      const { onBlur } = this.props;\n      onBlur?.(e);\n    }\n  }\n\n  handleScroll(): void {\n    this.sendViewportUpdate();\n  }\n\n  handleSelect(itemIndex: number): void {\n    const { items, offset, onSelect } = this.props;\n    const visibleItemIndex = itemIndex - offset;\n    if (visibleItemIndex >= 0 && visibleItemIndex < items.length) {\n      const item = items[visibleItemIndex];\n      const { value } = item;\n      onSelect(itemIndex, value);\n    } else {\n      onSelect(itemIndex, null);\n    }\n  }\n\n  sendViewportUpdate(): void {\n    if (!this.list.current || this.list.current.clientHeight === 0) {\n      return;\n    }\n\n    const { onViewportChange, rowHeight } = this.props;\n    const top = this.list.current.scrollTop;\n    const bottom = top + this.list.current.clientHeight;\n\n    const topRow = Math.floor(top / rowHeight);\n    const bottomRow = Math.ceil(bottom / rowHeight);\n\n    if (this.topRow !== topRow || this.bottomRow !== bottomRow) {\n      this.topRow = topRow;\n      this.bottomRow = bottomRow;\n      onViewportChange(topRow, bottomRow);\n    }\n  }\n\n  getElement(itemIndex: number): Element | null {\n    if (this.list.current == null) {\n      return null;\n    }\n    const elements = this.list.current.querySelectorAll('.value-list-item');\n    return elements[itemIndex];\n  }\n\n  scrollIntoView(index: number): void {\n    const element = this.getElement(index);\n    element?.scrollIntoView({ block: 'center' });\n  }\n\n  render(): JSX.Element {\n    const {\n      className,\n      disabled,\n      isInvalid,\n      items,\n      itemCount,\n      offset,\n      rowHeight,\n      'data-testid': dataTestId,\n    } = this.props;\n    const itemElements = this.getCachedItems(\n      items,\n      rowHeight,\n      offset,\n      disabled\n    );\n\n    return (\n      <div\n        className={classNames(\n          'select-value-list-scroll-pane h-100 w-100',\n          { 'is-invalid': isInvalid },\n          className\n        )}\n        onBlur={this.handleBlur}\n        onScroll={this.handleScroll}\n        ref={this.list}\n        data-testid={dataTestId}\n      >\n        <div\n          className=\"select-value-list\"\n          style={{ height: itemCount * rowHeight }}\n        >\n          <ol\n            className=\"select-value-list-content\"\n            style={{\n              position: 'absolute',\n              height: items.length * rowHeight,\n              top: offset * rowHeight,\n              left: 0,\n            }}\n          >\n            {itemElements}\n          </ol>\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default SelectValueList;\n"],"file":"SelectValueList.js"}

package/dist/index.d.ts

@@ -19,11 +19,14 @@ export { default as Collapse } from './Collapse';
 export { default as Checkbox } from './Checkbox';
 export { default as ComboBox } from './ComboBox';
 export { default as CustomTimeSelect } from './CustomTimeSelect';
+export { default as DateTimeInput } from './DateTimeInput';
+export { default as DateInput } from './DateInput';
 export { default as DebouncedSearchInput } from './DebouncedSearchInput';
 export { default as DeephavenSpinner } from './DeephavenSpinner';
 export { default as DraggableItemList } from './DraggableItemList';
 export * from './DraggableItemList';
 export { default as DragUtils } from './DragUtils';
+export { default as EditableItemList } from './EditableItemList';
 export { default as HierarchicalCheckboxMenu } from './HierarchicalCheckboxMenu';
 export * from './HierarchicalCheckboxMenu';
 export * from './ItemList';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -14,11 +14,14 @@ export { default as Collapse } from "./Collapse.js";
 export { default as Checkbox } from "./Checkbox.js";
 export { default as ComboBox } from "./ComboBox.js";
 export { default as CustomTimeSelect } from "./CustomTimeSelect.js";
+export { default as DateTimeInput } from "./DateTimeInput.js";
+export { default as DateInput } from "./DateInput.js";
 export { default as DebouncedSearchInput } from "./DebouncedSearchInput.js";
 export { default as DeephavenSpinner } from "./DeephavenSpinner.js";
 export { default as DraggableItemList } from "./DraggableItemList.js";
 export * from "./DraggableItemList.js";
 export { default as DragUtils } from "./DragUtils.js";
+export { default as EditableItemList } from "./EditableItemList.js";
 export { default as HierarchicalCheckboxMenu } from "./HierarchicalCheckboxMenu.js";
 export * from "./HierarchicalCheckboxMenu.js";
 export * from "./ItemList.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":["$","window","jQuery","default","AutoCompleteInput","AutoResizeTextarea","BasicModal","Button","ButtonGroup","ButtonOld","CardFlip","Collapse","Checkbox","ComboBox","CustomTimeSelect","DebouncedSearchInput","DeephavenSpinner","DraggableItemList","DragUtils","HierarchicalCheckboxMenu","ItemListItem","LoadingOverlay","LoadingSpinner","DropdownMenu","MaskedInput","Option","RadioGroup","RadioItem","Select","SearchInput","SelectValueList","SocketedButton","ThemeExport","TimeInput","TimeSlider","ToastNotification","UISwitch"],"mappings":"AAAA;AACA,OAAO,KAAKA,CAAZ,MAAmB,QAAnB;AASAC,MAAM,CAACD,CAAP,GAAWA,CAAX;AACAC,MAAM,CAACC,MAAP,GAAgBF,CAAhB;SAGSG,OAAO,IAAIC,iB;SACXD,OAAO,IAAIE,kB;SACXF,OAAO,IAAIG,U;SACXH,OAAO,IAAII,M;SACXJ,OAAO,IAAIK,W;SACXL,OAAO,IAAIM,S;SACXN,OAAO,IAAIO,Q;;SAEXP,OAAO,IAAIQ,Q;SACXR,OAAO,IAAIS,Q;SACXT,OAAO,IAAIU,Q;SACXV,OAAO,IAAIW,gB;SACXX,OAAO,IAAIY,oB;SACXZ,OAAO,IAAIa,gB;SACXb,OAAO,IAAIc,iB;;SAEXd,OAAO,IAAIe,S;SACXf,OAAO,IAAIgB,wB;;;SAGXhB,OAAO,IAAIiB,Y;SACXjB,OAAO,IAAIkB,c;SACXlB,OAAO,IAAImB,c;SACXnB,OAAO,IAAIoB,Y;;SAEXpB,OAAO,IAAIqB,W;;SAEXrB,OAAO,IAAIsB,M;;SAEXtB,OAAO,IAAIuB,U;SACXvB,OAAO,IAAIwB,S;SACXxB,OAAO,IAAIyB,M;SACXzB,OAAO,IAAI0B,W;SACX1B,OAAO,IAAI2B,e;;SAEX3B,OAAO,IAAI4B,c;SACX5B,OAAO,IAAI6B,W;SACX7B,OAAO,IAAI8B,S;SACX9B,OAAO,IAAI+B,U;SACX/B,OAAO,IAAIgC,iB;SACXhC,OAAO,IAAIiC,Q","sourcesContent":["/** Shim for using jquery in frameworks included by react (such as bootstrap) */\nimport * as $ from 'jquery';\n\ndeclare global {\n  interface Window {\n    $: typeof $;\n    jQuery: typeof $;\n  }\n}\n\nwindow.$ = $;\nwindow.jQuery = $;\n\nexport type { Range } from '@deephaven/utils';\nexport { default as AutoCompleteInput } from './AutoCompleteInput';\nexport { default as AutoResizeTextarea } from './AutoResizeTextarea';\nexport { default as BasicModal } from './BasicModal';\nexport { default as Button } from './Button';\nexport { default as ButtonGroup } from './ButtonGroup';\nexport { default as ButtonOld } from './ButtonOld';\nexport { default as CardFlip } from './CardFlip';\nexport * from './context-actions';\nexport { default as Collapse } from './Collapse';\nexport { default as Checkbox } from './Checkbox';\nexport { default as ComboBox } from './ComboBox';\nexport { default as CustomTimeSelect } from './CustomTimeSelect';\nexport { default as DebouncedSearchInput } from './DebouncedSearchInput';\nexport { default as DeephavenSpinner } from './DeephavenSpinner';\nexport { default as DraggableItemList } from './DraggableItemList';\nexport * from './DraggableItemList';\nexport { default as DragUtils } from './DragUtils';\nexport { default as HierarchicalCheckboxMenu } from './HierarchicalCheckboxMenu';\nexport * from './HierarchicalCheckboxMenu';\nexport * from './ItemList';\nexport { default as ItemListItem } from './ItemListItem';\nexport { default as LoadingOverlay } from './LoadingOverlay';\nexport { default as LoadingSpinner } from './LoadingSpinner';\nexport { default as DropdownMenu } from './menu-actions';\nexport * from './menu-actions';\nexport { default as MaskedInput } from './MaskedInput';\nexport * from './navigation';\nexport { default as Option } from './Option';\nexport * from './popper';\nexport { default as RadioGroup } from './RadioGroup';\nexport { default as RadioItem } from './RadioItem';\nexport { default as Select } from './Select';\nexport { default as SearchInput } from './SearchInput';\nexport { default as SelectValueList } from './SelectValueList';\nexport * from './shortcuts';\nexport { default as SocketedButton } from './SocketedButton';\nexport { default as ThemeExport } from './ThemeExport';\nexport { default as TimeInput } from './TimeInput';\nexport { default as TimeSlider } from './TimeSlider';\nexport { default as ToastNotification } from './ToastNotification';\nexport { default as UISwitch } from './UISwitch';\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.ts"],"names":["$","window","jQuery","default","AutoCompleteInput","AutoResizeTextarea","BasicModal","Button","ButtonGroup","ButtonOld","CardFlip","Collapse","Checkbox","ComboBox","CustomTimeSelect","DateTimeInput","DateInput","DebouncedSearchInput","DeephavenSpinner","DraggableItemList","DragUtils","EditableItemList","HierarchicalCheckboxMenu","ItemListItem","LoadingOverlay","LoadingSpinner","DropdownMenu","MaskedInput","Option","RadioGroup","RadioItem","Select","SearchInput","SelectValueList","SocketedButton","ThemeExport","TimeInput","TimeSlider","ToastNotification","UISwitch"],"mappings":"AAAA;AACA,OAAO,KAAKA,CAAZ,MAAmB,QAAnB;AASAC,MAAM,CAACD,CAAP,GAAWA,CAAX;AACAC,MAAM,CAACC,MAAP,GAAgBF,CAAhB;SAGSG,OAAO,IAAIC,iB;SACXD,OAAO,IAAIE,kB;SACXF,OAAO,IAAIG,U;SACXH,OAAO,IAAII,M;SACXJ,OAAO,IAAIK,W;SACXL,OAAO,IAAIM,S;SACXN,OAAO,IAAIO,Q;;SAEXP,OAAO,IAAIQ,Q;SACXR,OAAO,IAAIS,Q;SACXT,OAAO,IAAIU,Q;SACXV,OAAO,IAAIW,gB;SACXX,OAAO,IAAIY,a;SACXZ,OAAO,IAAIa,S;SACXb,OAAO,IAAIc,oB;SACXd,OAAO,IAAIe,gB;SACXf,OAAO,IAAIgB,iB;;SAEXhB,OAAO,IAAIiB,S;SACXjB,OAAO,IAAIkB,gB;SACXlB,OAAO,IAAImB,wB;;;SAGXnB,OAAO,IAAIoB,Y;SACXpB,OAAO,IAAIqB,c;SACXrB,OAAO,IAAIsB,c;SACXtB,OAAO,IAAIuB,Y;;SAEXvB,OAAO,IAAIwB,W;;SAEXxB,OAAO,IAAIyB,M;;SAEXzB,OAAO,IAAI0B,U;SACX1B,OAAO,IAAI2B,S;SACX3B,OAAO,IAAI4B,M;SACX5B,OAAO,IAAI6B,W;SACX7B,OAAO,IAAI8B,e;;SAEX9B,OAAO,IAAI+B,c;SACX/B,OAAO,IAAIgC,W;SACXhC,OAAO,IAAIiC,S;SACXjC,OAAO,IAAIkC,U;SACXlC,OAAO,IAAImC,iB;SACXnC,OAAO,IAAIoC,Q","sourcesContent":["/** Shim for using jquery in frameworks included by react (such as bootstrap) */\nimport * as $ from 'jquery';\n\ndeclare global {\n  interface Window {\n    $: typeof $;\n    jQuery: typeof $;\n  }\n}\n\nwindow.$ = $;\nwindow.jQuery = $;\n\nexport type { Range } from '@deephaven/utils';\nexport { default as AutoCompleteInput } from './AutoCompleteInput';\nexport { default as AutoResizeTextarea } from './AutoResizeTextarea';\nexport { default as BasicModal } from './BasicModal';\nexport { default as Button } from './Button';\nexport { default as ButtonGroup } from './ButtonGroup';\nexport { default as ButtonOld } from './ButtonOld';\nexport { default as CardFlip } from './CardFlip';\nexport * from './context-actions';\nexport { default as Collapse } from './Collapse';\nexport { default as Checkbox } from './Checkbox';\nexport { default as ComboBox } from './ComboBox';\nexport { default as CustomTimeSelect } from './CustomTimeSelect';\nexport { default as DateTimeInput } from './DateTimeInput';\nexport { default as DateInput } from './DateInput';\nexport { default as DebouncedSearchInput } from './DebouncedSearchInput';\nexport { default as DeephavenSpinner } from './DeephavenSpinner';\nexport { default as DraggableItemList } from './DraggableItemList';\nexport * from './DraggableItemList';\nexport { default as DragUtils } from './DragUtils';\nexport { default as EditableItemList } from './EditableItemList';\nexport { default as HierarchicalCheckboxMenu } from './HierarchicalCheckboxMenu';\nexport * from './HierarchicalCheckboxMenu';\nexport * from './ItemList';\nexport { default as ItemListItem } from './ItemListItem';\nexport { default as LoadingOverlay } from './LoadingOverlay';\nexport { default as LoadingSpinner } from './LoadingSpinner';\nexport { default as DropdownMenu } from './menu-actions';\nexport * from './menu-actions';\nexport { default as MaskedInput } from './MaskedInput';\nexport * from './navigation';\nexport { default as Option } from './Option';\nexport * from './popper';\nexport { default as RadioGroup } from './RadioGroup';\nexport { default as RadioItem } from './RadioItem';\nexport { default as Select } from './Select';\nexport { default as SearchInput } from './SearchInput';\nexport { default as SelectValueList } from './SelectValueList';\nexport * from './shortcuts';\nexport { default as SocketedButton } from './SocketedButton';\nexport { default as ThemeExport } from './ThemeExport';\nexport { default as TimeInput } from './TimeInput';\nexport { default as TimeSlider } from './TimeSlider';\nexport { default as ToastNotification } from './ToastNotification';\nexport { default as UISwitch } from './UISwitch';\n"],"file":"index.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/components",
-  "version": "0.13.4",
+  "version": "0.13.7",
   "description": "Deephaven React component library",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
@@ -40,6 +40,7 @@
     "classnames": "^2.3.1",
     "event-target-shim": "^6.0.2",
     "jquery": "^3.6.0",
+    "lodash.clamp": "^4.0.3",
     "lodash.debounce": "^4.0.8",
     "lodash.flatten": "^4.4.0",
     "memoizee": "^0.4.15",
@@ -70,5 +71,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4b0b60b8840ad524ec482a57fb75939e0e5896be"
+  "gitHead": "0f9ce526883e2d117359ccc232c10aaa09405554"
 }