@deephaven/components 1.21.1 → 1.22.1-alpha-pivot-builder.0

package/dist/AutoResizeTextarea.d.ts.map

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

package/dist/AutoResizeTextarea.js

@@ -6,11 +6,68 @@ function implode(input) {
   return input.split('\n').map(string => string.trim()).filter(string => string) // remove empty strings (e.g. from trailing newlines)
   .join(' ');
 }
+
+/**
+ * Splits a string on a delimiter, respecting quoted spans.
+ * Delimiters that appear inside `"..."` or `'...'` are treated as literal
+ * characters and do not cause a split. Quotes are preserved in the returned
+ * tokens so the operation is lossless (suitable for display-only transformations
+ * where the original text must be recoverable).
+ *
+ * An unbalanced opening quote (no matching closing quote found ahead) is treated
+ * as a literal character and splitting proceeds normally.
+ *
+ * @param input The string to split.
+ * @param delimiter The delimiter to split on.
+ * @returns An array of tokens. Always contains at least one element.
+ */
+function splitOnDelimiter(input, delimiter) {
+  // Walk the string character by character, tracking quoted spans so that
+  // delimiters inside "..." or '...' are not treated as split points.
+  // Quotes are preserved in the output (not stripped) so the round-trip is lossless.
+  // An unbalanced quote is treated as a literal character — splitting continues normally.
+  var tokens = [];
+  var current = '';
+  var quoteChar = null;
+  var i = 0;
+  while (i < input.length) {
+    var ch = input[i];
+    if (quoteChar !== null) {
+      // Inside a quoted span — accumulate until we hit the matching closing quote
+      current += ch;
+      if (ch === quoteChar) {
+        quoteChar = null;
+      }
+      i += 1;
+    } else if (ch === '"' || ch === "'") {
+      // Only treat as a quoted span if there is a matching closing quote ahead.
+      // An unbalanced quote is treated as a literal character so the delimiter
+      // logic continues to work normally.
+      var closingIdx = input.indexOf(ch, i + 1);
+      if (closingIdx !== -1) {
+        quoteChar = ch;
+      }
+      current += ch;
+      i += 1;
+    } else if (input.startsWith(delimiter, i)) {
+      // Delimiter found outside a quoted span — emit the current token and advance
+      tokens.push(current);
+      current = '';
+      i += delimiter.length;
+    } else {
+      // Plain character outside any quoted span and not part of the delimiter — accumulate it
+      current += ch;
+      i += 1;
+    }
+  }
+  tokens.push(current);
+  return tokens;
+}
 function explode(input, delimiter) {
-  // split by delimiter, commonly " " or " -"
-  // strip empty strings (if delimiter is space, and there are multiple spaces in a row)
-  // and join with new line and a trimmed delimiter (get rid of leading spaces)
-  return input.trim().split(delimiter).filter(string => string) // remove empty strings
+  // Split by delimiter (commonly " " or " -") respecting quoted spans, then
+  // join with newline + trimmed delimiter so each token appears on its own line.
+  // Empty tokens (e.g. from multiple consecutive delimiters) are filtered out.
+  return splitOnDelimiter(input.trim(), delimiter).filter(token => token !== '') // remove empty strings
   .join("\n".concat(delimiter.trim()));
 }
 

package/dist/AutoResizeTextarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutoResizeTextarea.js","names":["React","useState","useRef","useEffect","classNames","jsx","_jsx","implode","input","split","map","string","trim","filter","join","explode","delimiter","concat","AutoResizeTextarea","_ref","className","value","propsValue","onChange","spellCheck","placeholder","disabled","id","dataTestId","setValue","isPastedChange","setIsPastedChange","element","isFocused","valueRef","current","syncStateWithProp","reCalculateLayout","style","height","resizedHeight","scrollHeight","offsetHeight","clientHeight","handleChange","event","newValue","target","handleFocus","scrollLeft","handleMouseDown","document","activeElement","focus","handleBlur","handlePaste","reCalculate","ref","rows","onFocus","onMouseDown","onBlur","onPaste"],"sources":["../src/AutoResizeTextarea.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\nimport classNames from 'classnames';\n\nimport './AutoResizeTextarea.scss';\n\ninterface AutoResizeTextareaProps {\n  value: string;\n  onChange: (val: string) => void;\n  className?: string;\n  spellCheck?: boolean;\n  placeholder?: string;\n  disabled?: boolean;\n  delimiter?: string;\n  id?: string;\n  'data-testid'?: string;\n}\n\nfunction implode(input: string): string {\n  return input\n    .split('\\n')\n    .map(string => string.trim())\n    .filter(string => string) // remove empty strings (e.g. from trailing newlines)\n    .join(' ');\n}\n\nfunction explode(input: string, delimiter: string): string {\n  // split by delimiter, commonly \" \" or \" -\"\n  // strip empty strings (if delimiter is space, and there are multiple spaces in a row)\n  // and join with new line and a trimmed delimiter (get rid of leading spaces)\n  return input\n    .trim()\n    .split(delimiter)\n    .filter(string => string) // remove empty strings\n    .join(`\\n${delimiter.trim()}`);\n}\n\n/**\n * Makes a textarea that auto resizes based on contents, its height grows with new lines.\n * If a delimiter is set, such as \" -\" or \" \", as used by jvm args or env vars\n * then the field will also \"explode\" the value by the delimiter over new lines\n * on focus, and implode on blur. By default, it doesn't word wrap.\n */\nfunction AutoResizeTextarea({\n  className = '',\n  value: propsValue,\n  onChange,\n  spellCheck = false,\n  placeholder = '',\n  disabled = false,\n  delimiter = '',\n  id = '',\n  'data-testid': dataTestId,\n}: AutoResizeTextareaProps): JSX.Element {\n  const [value, setValue] = useState(propsValue);\n  const [isPastedChange, setIsPastedChange] = useState(false);\n  const element = useRef<HTMLTextAreaElement>(null);\n  const isFocused = useRef(false);\n  const valueRef = useRef(value);\n  valueRef.current = value;\n\n  useEffect(\n    function syncStateWithProp() {\n      if (!isFocused.current || !delimiter) {\n        // When not focused (or no delimiter), always sync to the new prop value.\n        setValue(propsValue);\n      } else if (implode(valueRef.current) !== implode(propsValue)) {\n        // When focused with delimiter, only update if the imploded value changed to prevent clobbering delimiters\n        setValue(explode(propsValue, delimiter));\n      }\n    },\n    [propsValue, delimiter]\n  );\n\n  function reCalculateLayout(): void {\n    if (!element.current) {\n      return;\n    }\n    element.current.style.height = '0'; // shrink component to get scrollHeight\n    const resizedHeight =\n      element.current.scrollHeight +\n      (element.current.offsetHeight - element.current.clientHeight);\n    // accounts for border, padding is captured by scroll height\n    if (resizedHeight > 0) element.current.style.height = `${resizedHeight}px`;\n  }\n\n  function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>): void {\n    let newValue = event.target.value;\n    if (isPastedChange) {\n      if (delimiter) newValue = explode(newValue, delimiter);\n      setIsPastedChange(false);\n    }\n    setValue(newValue);\n    // If there is a delimiter, the onChange value should always be the imploded version\n    // to prevent mismatch when exiting without triggering onBlur\n    // The exploded version is display only\n    onChange(delimiter ? implode(newValue) : newValue);\n  }\n\n  function handleFocus(): void {\n    if (!element.current) {\n      return;\n    }\n    isFocused.current = true;\n    if (delimiter) {\n      setValue(explode(value, delimiter));\n      reCalculateLayout();\n    }\n    element.current.scrollLeft = 0;\n    // scroll left as it can be disorienting if you click on a long line\n  }\n\n  // make it explode when dragging the resize handle\n  // by making it trigger focus (which normally doesn't\n  // trigger when just resizing).\n  function handleMouseDown(): void {\n    if (!element.current) return;\n    if (document.activeElement === element.current) return;\n    element.current.focus();\n  }\n\n  function handleBlur(): void {\n    isFocused.current = false;\n    if (delimiter) {\n      setValue(implode(value));\n      onChange(implode(value));\n    }\n  }\n\n  function handlePaste(): void {\n    setIsPastedChange(true);\n  }\n\n  useEffect(\n    function reCalculate() {\n      reCalculateLayout();\n    },\n    [value]\n  );\n\n  return (\n    <textarea\n      ref={element}\n      id={id}\n      className={classNames(className, 'auto-resize-textarea form-control')}\n      placeholder={placeholder}\n      value={value}\n      rows={1}\n      onChange={handleChange}\n      onFocus={handleFocus}\n      onMouseDown={handleMouseDown}\n      onBlur={handleBlur}\n      onPaste={handlePaste}\n      spellCheck={spellCheck}\n      disabled={disabled}\n      data-testid={dataTestId}\n    />\n  );\n}\n\nexport default AutoResizeTextarea;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"AutoResizeTextarea.js","names":["React","useState","useRef","useEffect","classNames","jsx","_jsx","implode","input","split","map","string","trim","filter","join","splitOnDelimiter","delimiter","tokens","current","quoteChar","i","length","ch","closingIdx","indexOf","startsWith","push","explode","token","concat","AutoResizeTextarea","_ref","className","value","propsValue","onChange","spellCheck","placeholder","disabled","id","dataTestId","setValue","isPastedChange","setIsPastedChange","element","isFocused","valueRef","syncStateWithProp","reCalculateLayout","style","height","resizedHeight","scrollHeight","offsetHeight","clientHeight","handleChange","event","newValue","target","handleFocus","scrollLeft","handleMouseDown","document","activeElement","focus","handleBlur","handlePaste","reCalculate","ref","rows","onFocus","onMouseDown","onBlur","onPaste"],"sources":["../src/AutoResizeTextarea.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\nimport classNames from 'classnames';\n\nimport './AutoResizeTextarea.scss';\n\ninterface AutoResizeTextareaProps {\n  value: string;\n  onChange: (val: string) => void;\n  className?: string;\n  spellCheck?: boolean;\n  placeholder?: string;\n  disabled?: boolean;\n  delimiter?: string;\n  id?: string;\n  'data-testid'?: string;\n}\n\nfunction implode(input: string): string {\n  return input\n    .split('\\n')\n    .map(string => string.trim())\n    .filter(string => string) // remove empty strings (e.g. from trailing newlines)\n    .join(' ');\n}\n\n/**\n * Splits a string on a delimiter, respecting quoted spans.\n * Delimiters that appear inside `\"...\"` or `'...'` are treated as literal\n * characters and do not cause a split. Quotes are preserved in the returned\n * tokens so the operation is lossless (suitable for display-only transformations\n * where the original text must be recoverable).\n *\n * An unbalanced opening quote (no matching closing quote found ahead) is treated\n * as a literal character and splitting proceeds normally.\n *\n * @param input The string to split.\n * @param delimiter The delimiter to split on.\n * @returns An array of tokens. Always contains at least one element.\n */\nfunction splitOnDelimiter(input: string, delimiter: string): string[] {\n  // Walk the string character by character, tracking quoted spans so that\n  // delimiters inside \"...\" or '...' are not treated as split points.\n  // Quotes are preserved in the output (not stripped) so the round-trip is lossless.\n  // An unbalanced quote is treated as a literal character — splitting continues normally.\n  const tokens: string[] = [];\n  let current = '';\n  let quoteChar: '\"' | \"'\" | null = null;\n  let i = 0;\n\n  while (i < input.length) {\n    const ch = input[i];\n\n    if (quoteChar !== null) {\n      // Inside a quoted span — accumulate until we hit the matching closing quote\n      current += ch;\n      if (ch === quoteChar) {\n        quoteChar = null;\n      }\n      i += 1;\n    } else if (ch === '\"' || ch === \"'\") {\n      // Only treat as a quoted span if there is a matching closing quote ahead.\n      // An unbalanced quote is treated as a literal character so the delimiter\n      // logic continues to work normally.\n      const closingIdx = input.indexOf(ch, i + 1);\n      if (closingIdx !== -1) {\n        quoteChar = ch;\n      }\n      current += ch;\n      i += 1;\n    } else if (input.startsWith(delimiter, i)) {\n      // Delimiter found outside a quoted span — emit the current token and advance\n      tokens.push(current);\n      current = '';\n      i += delimiter.length;\n    } else {\n      // Plain character outside any quoted span and not part of the delimiter — accumulate it\n      current += ch;\n      i += 1;\n    }\n  }\n\n  tokens.push(current);\n  return tokens;\n}\n\nfunction explode(input: string, delimiter: string): string {\n  // Split by delimiter (commonly \" \" or \" -\") respecting quoted spans, then\n  // join with newline + trimmed delimiter so each token appears on its own line.\n  // Empty tokens (e.g. from multiple consecutive delimiters) are filtered out.\n  return splitOnDelimiter(input.trim(), delimiter)\n    .filter(token => token !== '') // remove empty strings\n    .join(`\\n${delimiter.trim()}`);\n}\n\n/**\n * Makes a textarea that auto resizes based on contents, its height grows with new lines.\n * If a delimiter is set, such as \" -\" or \" \", as used by jvm args or env vars\n * then the field will also \"explode\" the value by the delimiter over new lines\n * on focus, and implode on blur. By default, it doesn't word wrap.\n */\nfunction AutoResizeTextarea({\n  className = '',\n  value: propsValue,\n  onChange,\n  spellCheck = false,\n  placeholder = '',\n  disabled = false,\n  delimiter = '',\n  id = '',\n  'data-testid': dataTestId,\n}: AutoResizeTextareaProps): JSX.Element {\n  const [value, setValue] = useState(propsValue);\n  const [isPastedChange, setIsPastedChange] = useState(false);\n  const element = useRef<HTMLTextAreaElement>(null);\n  const isFocused = useRef(false);\n  const valueRef = useRef(value);\n  valueRef.current = value;\n\n  useEffect(\n    function syncStateWithProp() {\n      if (!isFocused.current || !delimiter) {\n        // When not focused (or no delimiter), always sync to the new prop value.\n        setValue(propsValue);\n      } else if (implode(valueRef.current) !== implode(propsValue)) {\n        // When focused with delimiter, only update if the imploded value changed to prevent clobbering delimiters\n        setValue(explode(propsValue, delimiter));\n      }\n    },\n    [propsValue, delimiter]\n  );\n\n  function reCalculateLayout(): void {\n    if (!element.current) {\n      return;\n    }\n    element.current.style.height = '0'; // shrink component to get scrollHeight\n    const resizedHeight =\n      element.current.scrollHeight +\n      (element.current.offsetHeight - element.current.clientHeight);\n    // accounts for border, padding is captured by scroll height\n    if (resizedHeight > 0) element.current.style.height = `${resizedHeight}px`;\n  }\n\n  function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>): void {\n    let newValue = event.target.value;\n    if (isPastedChange) {\n      if (delimiter) newValue = explode(newValue, delimiter);\n      setIsPastedChange(false);\n    }\n    setValue(newValue);\n    // If there is a delimiter, the onChange value should always be the imploded version\n    // to prevent mismatch when exiting without triggering onBlur\n    // The exploded version is display only\n    onChange(delimiter ? implode(newValue) : newValue);\n  }\n\n  function handleFocus(): void {\n    if (!element.current) {\n      return;\n    }\n    isFocused.current = true;\n    if (delimiter) {\n      setValue(explode(value, delimiter));\n      reCalculateLayout();\n    }\n    element.current.scrollLeft = 0;\n    // scroll left as it can be disorienting if you click on a long line\n  }\n\n  // make it explode when dragging the resize handle\n  // by making it trigger focus (which normally doesn't\n  // trigger when just resizing).\n  function handleMouseDown(): void {\n    if (!element.current) return;\n    if (document.activeElement === element.current) return;\n    element.current.focus();\n  }\n\n  function handleBlur(): void {\n    isFocused.current = false;\n    if (delimiter) {\n      setValue(implode(value));\n      onChange(implode(value));\n    }\n  }\n\n  function handlePaste(): void {\n    setIsPastedChange(true);\n  }\n\n  useEffect(\n    function reCalculate() {\n      reCalculateLayout();\n    },\n    [value]\n  );\n\n  return (\n    <textarea\n      ref={element}\n      id={id}\n      className={classNames(className, 'auto-resize-textarea form-control')}\n      placeholder={placeholder}\n      value={value}\n      rows={1}\n      onChange={handleChange}\n      onFocus={handleFocus}\n      onMouseDown={handleMouseDown}\n      onBlur={handleBlur}\n      onPaste={handlePaste}\n      spellCheck={spellCheck}\n      disabled={disabled}\n      data-testid={dataTestId}\n    />\n  );\n}\n\nexport default AutoResizeTextarea;\n"],"mappings":"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","ignoreList":[]}

package/dist/RemoteComponentModules.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Re-exports third-party module namespaces so plugins share the host app's
+ * single bundled copy via the remote component resolve map.
+ *
+ * `@deephaven/components` owns FontAwesome, so re-exporting it here ensures
+ * plugins use the same instance the design system has already initialized.
+ */
+export * as ReactFontAwesome from '@fortawesome/react-fontawesome';
+//# sourceMappingURL=RemoteComponentModules.d.ts.map

package/dist/RemoteComponentModules.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RemoteComponentModules.d.ts","sourceRoot":"","sources":["../src/RemoteComponentModules.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAK,gBAAgB,MAAM,gCAAgC,CAAC"}

package/dist/RemoteComponentModules.js

@@ -0,0 +1,10 @@
+/**
+ * Re-exports third-party module namespaces so plugins share the host app's
+ * single bundled copy via the remote component resolve map.
+ *
+ * `@deephaven/components` owns FontAwesome, so re-exporting it here ensures
+ * plugins use the same instance the design system has already initialized.
+ */
+import * as _ReactFontAwesome from '@fortawesome/react-fontawesome';
+export { _ReactFontAwesome as ReactFontAwesome };
+//# sourceMappingURL=RemoteComponentModules.js.map

package/dist/RemoteComponentModules.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RemoteComponentModules.js","names":["_ReactFontAwesome","ReactFontAwesome"],"sources":["../src/RemoteComponentModules.ts"],"sourcesContent":["/**\n * Re-exports third-party module namespaces so plugins share the host app's\n * single bundled copy via the remote component resolve map.\n *\n * `@deephaven/components` owns FontAwesome, so re-exporting it here ensures\n * plugins use the same instance the design system has already initialized.\n */\nexport * as ReactFontAwesome from '@fortawesome/react-fontawesome';\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AANA,YAAAA,iBAAA,MAOkC,gCAAgC;AAAA,SAAAA,iBAAA,IAAtDC,gBAAgB","ignoreList":[]}

package/dist/index.d.ts

@@ -59,4 +59,5 @@ export * from './UIConstants';
 export { default as UISwitch } from './UISwitch';
 export * from './XComponent';
 export * from './XComponentMap';
+export * from './RemoteComponentModules';
 //# sourceMappingURL=index.d.ts.map

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

@@ -58,4 +58,5 @@ export * from "./UIConstants.js";
 export { default as UISwitch } from "./UISwitch.js";
 export * from "./XComponent.js";
 export * from "./XComponentMap.js";
+export * from "./RemoteComponentModules.js";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","AutoCompleteInput","AutoResizeTextarea","BasicModal","CardFlip","Collapse","Checkbox","CopyButton","CustomTimeSelect","DateInput","DebouncedSearchInput","DraggableItemList","DragUtils","EditableItemList","ErrorView","HierarchicalCheckboxMenu","ItemListItem","LoadingOverlay","LoadingSpinner","DropdownMenu","MaskedInput","Option","RandomAreaPlotAnimation","Select","SearchInput","SelectValueList","SocketedButton","ThemeExport","TimeInput","TimeSlider","ToastNotification","UISwitch"],"sources":["../src/index.ts"],"sourcesContent":["export type { Range } from '@deephaven/utils';\nexport * from './actions';\nexport { default as AutoCompleteInput } from './AutoCompleteInput';\nexport { default as AutoResizeTextarea } from './AutoResizeTextarea';\nexport { default as BasicModal } from './BasicModal';\nexport * from './Button';\nexport * from './BulkActionBar';\nexport { default as CardFlip } from './CardFlip';\nexport * from './context-actions';\nexport { default as Collapse } from './Collapse';\nexport { default as Checkbox } from './Checkbox';\nexport * from './ComponentUtils';\nexport { default as CopyButton, type CopyButtonProps } from './CopyButton';\nexport { default as CustomTimeSelect } from './CustomTimeSelect';\nexport * from './DateTimeInput';\nexport { default as DateInput } from './DateInput';\nexport { default as DebouncedSearchInput } from './DebouncedSearchInput';\nexport * from './dialogs';\nexport { default as DraggableItemList } from './DraggableItemList';\nexport * from './DraggableItemList';\nexport { default as DragUtils } from './DragUtils';\nexport { default as EditableItemList } from './EditableItemList';\nexport * from './ErrorBoundary';\nexport { default as ErrorView } from './ErrorView';\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 './MaskedInput';\nexport * from './MaskedInputUtils';\nexport * from './navigation';\nexport { default as Option } from './Option';\nexport * from './popper';\nexport * from './modal';\nexport { default as RandomAreaPlotAnimation } from './RandomAreaPlotAnimation';\nexport * from './SearchableCombobox';\nexport { default as Select } from './Select';\nexport { default as SearchInput } from './SearchInput';\nexport { default as SelectValueList } from './SelectValueList';\nexport * from './SelectValueList';\nexport * from './shortcuts';\nexport { default as SocketedButton } from './SocketedButton';\nexport * from './spectrum';\nexport * from './SplitButtonGroup';\nexport * from './TableViewEmptyState';\nexport * from './TextWithTooltip';\nexport * from './theme';\nexport * from './transitions';\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 * from './UIConstants';\nexport { default as UISwitch } from './UISwitch';\nexport * from './XComponent';\nexport * from './XComponentMap';\n"],"mappings":";SAESA,OAAO,IAAIC,iBAAiB;AAAA,SAC5BD,OAAO,IAAIE,kBAAkB;AAAA,SAC7BF,OAAO,IAAIG,UAAU;AAAA;AAAA;AAAA,SAGrBH,OAAO,IAAII,QAAQ;AAAA;AAAA,SAEnBJ,OAAO,IAAIK,QAAQ;AAAA,SACnBL,OAAO,IAAIM,QAAQ;AAAA;AAAA,SAEnBN,OAAO,IAAIO,UAAU;AAAA,SACrBP,OAAO,IAAIQ,gBAAgB;AAAA;AAAA,SAE3BR,OAAO,IAAIS,SAAS;AAAA,SACpBT,OAAO,IAAIU,oBAAoB;AAAA;AAAA,SAE/BV,OAAO,IAAIW,iBAAiB;AAAA;AAAA,SAE5BX,OAAO,IAAIY,SAAS;AAAA,SACpBZ,OAAO,IAAIa,gBAAgB;AAAA;AAAA,SAE3Bb,OAAO,IAAIc,SAAS;AAAA,SACpBd,OAAO,IAAIe,wBAAwB;AAAA;AAAA;AAAA,SAGnCf,OAAO,IAAIgB,YAAY;AAAA,SACvBhB,OAAO,IAAIiB,cAAc;AAAA,SACzBjB,OAAO,IAAIkB,cAAc;AAAA,SACzBlB,OAAO,IAAImB,YAAY;AAAA;AAAA,SAEvBnB,OAAO,IAAIoB,WAAW;AAAA;AAAA;AAAA;AAAA,SAItBpB,OAAO,IAAIqB,MAAM;AAAA;AAAA;AAAA,SAGjBrB,OAAO,IAAIsB,uBAAuB;AAAA;AAAA,SAElCtB,OAAO,IAAIuB,MAAM;AAAA,SACjBvB,OAAO,IAAIwB,WAAW;AAAA,SACtBxB,OAAO,IAAIyB,eAAe;AAAA;AAAA;AAAA,SAG1BzB,OAAO,IAAI0B,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAOzB1B,OAAO,IAAI2B,WAAW;AAAA,SACtB3B,OAAO,IAAI4B,SAAS;AAAA,SACpB5B,OAAO,IAAI6B,UAAU;AAAA,SACrB7B,OAAO,IAAI8B,iBAAiB;AAAA;AAAA,SAE5B9B,OAAO,IAAI+B,QAAQ;AAAA;AAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["default","AutoCompleteInput","AutoResizeTextarea","BasicModal","CardFlip","Collapse","Checkbox","CopyButton","CustomTimeSelect","DateInput","DebouncedSearchInput","DraggableItemList","DragUtils","EditableItemList","ErrorView","HierarchicalCheckboxMenu","ItemListItem","LoadingOverlay","LoadingSpinner","DropdownMenu","MaskedInput","Option","RandomAreaPlotAnimation","Select","SearchInput","SelectValueList","SocketedButton","ThemeExport","TimeInput","TimeSlider","ToastNotification","UISwitch"],"sources":["../src/index.ts"],"sourcesContent":["export type { Range } from '@deephaven/utils';\nexport * from './actions';\nexport { default as AutoCompleteInput } from './AutoCompleteInput';\nexport { default as AutoResizeTextarea } from './AutoResizeTextarea';\nexport { default as BasicModal } from './BasicModal';\nexport * from './Button';\nexport * from './BulkActionBar';\nexport { default as CardFlip } from './CardFlip';\nexport * from './context-actions';\nexport { default as Collapse } from './Collapse';\nexport { default as Checkbox } from './Checkbox';\nexport * from './ComponentUtils';\nexport { default as CopyButton, type CopyButtonProps } from './CopyButton';\nexport { default as CustomTimeSelect } from './CustomTimeSelect';\nexport * from './DateTimeInput';\nexport { default as DateInput } from './DateInput';\nexport { default as DebouncedSearchInput } from './DebouncedSearchInput';\nexport * from './dialogs';\nexport { default as DraggableItemList } from './DraggableItemList';\nexport * from './DraggableItemList';\nexport { default as DragUtils } from './DragUtils';\nexport { default as EditableItemList } from './EditableItemList';\nexport * from './ErrorBoundary';\nexport { default as ErrorView } from './ErrorView';\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 './MaskedInput';\nexport * from './MaskedInputUtils';\nexport * from './navigation';\nexport { default as Option } from './Option';\nexport * from './popper';\nexport * from './modal';\nexport { default as RandomAreaPlotAnimation } from './RandomAreaPlotAnimation';\nexport * from './SearchableCombobox';\nexport { default as Select } from './Select';\nexport { default as SearchInput } from './SearchInput';\nexport { default as SelectValueList } from './SelectValueList';\nexport * from './SelectValueList';\nexport * from './shortcuts';\nexport { default as SocketedButton } from './SocketedButton';\nexport * from './spectrum';\nexport * from './SplitButtonGroup';\nexport * from './TableViewEmptyState';\nexport * from './TextWithTooltip';\nexport * from './theme';\nexport * from './transitions';\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 * from './UIConstants';\nexport { default as UISwitch } from './UISwitch';\nexport * from './XComponent';\nexport * from './XComponentMap';\nexport * from './RemoteComponentModules';\n"],"mappings":";SAESA,OAAO,IAAIC,iBAAiB;AAAA,SAC5BD,OAAO,IAAIE,kBAAkB;AAAA,SAC7BF,OAAO,IAAIG,UAAU;AAAA;AAAA;AAAA,SAGrBH,OAAO,IAAII,QAAQ;AAAA;AAAA,SAEnBJ,OAAO,IAAIK,QAAQ;AAAA,SACnBL,OAAO,IAAIM,QAAQ;AAAA;AAAA,SAEnBN,OAAO,IAAIO,UAAU;AAAA,SACrBP,OAAO,IAAIQ,gBAAgB;AAAA;AAAA,SAE3BR,OAAO,IAAIS,SAAS;AAAA,SACpBT,OAAO,IAAIU,oBAAoB;AAAA;AAAA,SAE/BV,OAAO,IAAIW,iBAAiB;AAAA;AAAA,SAE5BX,OAAO,IAAIY,SAAS;AAAA,SACpBZ,OAAO,IAAIa,gBAAgB;AAAA;AAAA,SAE3Bb,OAAO,IAAIc,SAAS;AAAA,SACpBd,OAAO,IAAIe,wBAAwB;AAAA;AAAA;AAAA,SAGnCf,OAAO,IAAIgB,YAAY;AAAA,SACvBhB,OAAO,IAAIiB,cAAc;AAAA,SACzBjB,OAAO,IAAIkB,cAAc;AAAA,SACzBlB,OAAO,IAAImB,YAAY;AAAA;AAAA,SAEvBnB,OAAO,IAAIoB,WAAW;AAAA;AAAA;AAAA;AAAA,SAItBpB,OAAO,IAAIqB,MAAM;AAAA;AAAA;AAAA,SAGjBrB,OAAO,IAAIsB,uBAAuB;AAAA;AAAA,SAElCtB,OAAO,IAAIuB,MAAM;AAAA,SACjBvB,OAAO,IAAIwB,WAAW;AAAA,SACtBxB,OAAO,IAAIyB,eAAe;AAAA;AAAA;AAAA,SAG1BzB,OAAO,IAAI0B,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAOzB1B,OAAO,IAAI2B,WAAW;AAAA,SACtB3B,OAAO,IAAI4B,SAAS;AAAA,SACpB5B,OAAO,IAAI6B,UAAU;AAAA,SACrB7B,OAAO,IAAI8B,iBAAiB;AAAA;AAAA,SAE5B9B,OAAO,IAAI+B,QAAQ;AAAA;AAAA;AAAA","ignoreList":[]}

package/dist/navigation/Stack.d.ts

@@ -1,7 +1,12 @@
 import React from 'react';
 import './Stack.scss';
 export type StackProps = {
-    children: React.ReactNode | React.ReactNode[];
+    /**
+     * Stack views to animate between. Each child must be a React element with a
+     * stable `key`; views are tracked by that key across re-renders (primitive
+     * nodes such as strings/numbers are not supported).
+     */
+    children: React.ReactElement | React.ReactElement[];
     'data-testid'?: string;
 };
 /**

package/dist/navigation/Stack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../src/navigation/Stack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAEzE,OAAO,cAAc,CAAC;AAGtB,MAAM,MAAM,UAAU,GAAG;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;IAC9C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,aAAa,EAAE,UAAU,GAC1B,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CA+F1B;AAED,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../src/navigation/Stack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAEzE,OAAO,cAAc,CAAC;AAGtB,MAAM,MAAM,UAAU,GAAG;IACvB;;;;OAIG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;IACpD,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAuCF;;;GAGG;AACH,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,aAAa,EAAE,UAAU,GAC1B,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CAsH1B;AAED,eAAe,KAAK,CAAC"}

package/dist/navigation/Stack.js

@@ -3,6 +3,41 @@ import { usePrevious } from '@deephaven/react-hooks';
 import "./Stack.css";
 import { SlideTransition } from "../transitions/index.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Returns the React `key` for an element, or `null` for non-elements.
+ *
+ * The parent that renders the stack may re-render frequently (e.g. an
+ * `IrisGrid` re-renders on every table tick) and hand us brand-new element
+ * objects that represent the same logical view. Tracking the animating views
+ * by `key` (rather than by element reference) means those re-renders neither
+ * retrigger the slide animation nor churn state every frame.
+ *
+ * Children are always run through `React.Children.toArray`, which assigns a
+ * stable key to every element, so element views always have a key.
+ */
+function getViewKey(node) {
+  return /*#__PURE__*/React.isValidElement(node) ? node.key : null;
+}
+
+/**
+ * Finds the child that currently represents the view identified by `key`.
+ *
+ * Returning the *current* element (instead of a stored copy) keeps the rendered
+ * view's content live: when a parent re-renders with a new element instance for
+ * the same logical view, the view's latest props are forwarded to the mounted
+ * component. This matters for prop-driven panels such as the "Organize Columns"
+ * (`VisibilityOrderingBuilder`) sidebar, whose list contents and Undo/Redo state
+ * arrive entirely via props from the grid - freezing those props would stop the
+ * panel from reflecting moves, hides, groupings, and undo/redo.
+ */
+function findViewByKey(views, key) {
+  var _views$find;
+  if (key == null) {
+    return null;
+  }
+  return (_views$find = views.find(view => getViewKey(view) === key)) !== null && _views$find !== void 0 ? _views$find : null;
+}
+
 /**
  * Pass a full navigation stack of children, and then automatically does a sliding animation when the stack changes.
  * Adding items to the stack will do a "push" animation, and removing items from the stack will do a "pop" animation.
@@ -14,8 +49,18 @@ export function Stack(_ref) {
   } = _ref;
   var childrenArray = useMemo(() => React.Children.toArray(children), [children]);
   var prevChildrenArray = usePrevious(childrenArray);
-  var [mainView, setMainView] = useState(childrenArray[childrenArray.length - 1]);
-  var [pushingView, setPushingView] = useState(null);
+
+  // The animating views are tracked by `key`, not element identity, so that
+  // frequent parent re-renders (which produce new-but-equivalent elements)
+  // neither retrigger animations nor freeze content. The element actually
+  // rendered is always looked up from the latest `childrenArray` via
+  // `findViewByKey`, keeping each view's props live.
+  var [mainViewKey, setMainViewKey] = useState(() => getViewKey(childrenArray[childrenArray.length - 1]));
+  var [pushingViewKey, setPushingViewKey] = useState(null);
+
+  // The popping view has already been removed from `children`, so we keep the
+  // element instance itself - it is only animating out and its content does not
+  // need to stay live.
   var [poppingView, setPoppingView] = useState(null);
 
   /**
@@ -26,37 +71,50 @@ export function Stack(_ref) {
    *
    * When the `pushingView` or `poppingView` is set, that will kick off their animation.
    * Completion of the animation is handled in `pushComplete` or `popComplete`, and then the stack is in an idle state again.
+   *
+   * Views are compared by `key` (see `getViewKey`) so that a parent that
+   * re-renders with new element instances for the same logical view does not
+   * retrigger animations or churn state on every render.
    */
   useEffect(function initAnimation() {
     if (prevChildrenArray === undefined || childrenArray === prevChildrenArray) {
       return;
     }
-    var topChild = childrenArray[childrenArray.length - 1];
-    if (childrenArray.length === prevChildrenArray.length || prevChildrenArray.length === 0 || pushingView !== null || poppingView !== null) {
-      // 1) Stack is the same size, we've just mounted, or we're already in an animation - just update the view
-      if (pushingView !== null && topChild !== pushingView) {
-        // Stack was updated mid animation
-        setPushingView(topChild);
-      } else if (topChild !== poppingView && topChild !== mainView) {
-        // Replace the current view
-        setMainView(topChild);
+    var topChildKey = getViewKey(childrenArray[childrenArray.length - 1]);
+    if (pushingViewKey !== null || poppingView !== null) {
+      // We're mid-animation. Keep the animating view pointed at the current
+      // top view, but don't start a new animation.
+      if (pushingViewKey !== null) {
+        if (topChildKey !== pushingViewKey) {
+          // A different view was pushed mid-animation - animate to it instead
+          setPushingViewKey(topChildKey);
+        }
+      } else if (topChildKey !== mainViewKey) {
+        setMainViewKey(topChildKey);
+      }
+    } else if (childrenArray.length === prevChildrenArray.length || prevChildrenArray.length === 0) {
+      // Stack is the same size or we've just mounted - just update the view
+      if (topChildKey !== mainViewKey) {
+        setMainViewKey(topChildKey);
       }
     } else if (childrenArray.length > prevChildrenArray.length) {
-      // 2) Stack has grown - start the push animation
-      setPushingView(topChild);
-    } else if (childrenArray.length < prevChildrenArray.length) {
-      // 3) Stack has shrunk - start the pop animation
-      setMainView(topChild);
+      // Stack has grown - start the push animation
+      setPushingViewKey(topChildKey);
+    } else {
+      // Stack has shrunk - start the pop animation
+      setMainViewKey(topChildKey);
       setPoppingView(prevChildrenArray[prevChildrenArray.length - 1]);
     }
-  }, [childrenArray, prevChildrenArray, pushingView, poppingView, mainView]);
+  }, [childrenArray, prevChildrenArray, pushingViewKey, poppingView, mainViewKey]);
   var pushComplete = useCallback(() => {
-    setMainView(pushingView);
-    setPushingView(null);
-  }, [pushingView]);
+    setMainViewKey(pushingViewKey);
+    setPushingViewKey(null);
+  }, [pushingViewKey]);
   var popComplete = useCallback(() => {
     setPoppingView(null);
   }, []);
+  var mainView = findViewByKey(childrenArray, mainViewKey);
+  var pushingView = findViewByKey(childrenArray, pushingViewKey);
   return /*#__PURE__*/_jsxs("div", {
     className: "navigation-stack",
     children: [/*#__PURE__*/_jsx("div", {

package/dist/navigation/Stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.js","names":["React","useState","useEffect","useMemo","useCallback","usePrevious","SlideTransition","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","Stack","_ref","children","dataTestId","childrenArray","Children","toArray","prevChildrenArray","mainView","setMainView","length","pushingView","setPushingView","poppingView","setPoppingView","initAnimation","undefined","topChild","pushComplete","popComplete","className","direction","in","onEntered"],"sources":["../../src/navigation/Stack.tsx"],"sourcesContent":["import React, { useState, useEffect, useMemo, useCallback } from 'react';\nimport { usePrevious } from '@deephaven/react-hooks';\nimport './Stack.scss';\nimport { SlideTransition } from '../transitions';\n\nexport type StackProps = {\n  children: React.ReactNode | React.ReactNode[];\n  'data-testid'?: string;\n};\n\n/**\n * Pass a full navigation stack of children, and then automatically does a sliding animation when the stack changes.\n * Adding items to the stack will do a \"push\" animation, and removing items from the stack will do a \"pop\" animation.\n */\nexport function Stack({\n  children,\n  'data-testid': dataTestId,\n}: StackProps): JSX.Element {\n  const childrenArray = useMemo(\n    () => React.Children.toArray(children),\n    [children]\n  );\n  const prevChildrenArray = usePrevious(childrenArray);\n  const [mainView, setMainView] = useState<React.ReactNode>(\n    childrenArray[childrenArray.length - 1]\n  );\n\n  const [pushingView, setPushingView] = useState<React.ReactNode>(null);\n  const [poppingView, setPoppingView] = useState<React.ReactNode>(null);\n\n  /**\n   * To do the animation effect, we just need to set the proper pushing/popping views when the stack changes.\n   * `mainView` - The main view of the stack, stationary, filling the container.\n   * `pushingView` - A view that's currently being pushed. Slides from off screen right to overtop of `mainView`.\n   * `poppingView` - A view that's currently being popped. Slides from overtop of `mainView` to right off screen.\n   *\n   * When the `pushingView` or `poppingView` is set, that will kick off their animation.\n   * Completion of the animation is handled in `pushComplete` or `popComplete`, and then the stack is in an idle state again.\n   */\n  useEffect(\n    function initAnimation() {\n      if (\n        prevChildrenArray === undefined ||\n        childrenArray === prevChildrenArray\n      ) {\n        return;\n      }\n      const topChild = childrenArray[childrenArray.length - 1];\n      if (\n        childrenArray.length === prevChildrenArray.length ||\n        prevChildrenArray.length === 0 ||\n        pushingView !== null ||\n        poppingView !== null\n      ) {\n        // 1) Stack is the same size, we've just mounted, or we're already in an animation - just update the view\n        if (pushingView !== null && topChild !== pushingView) {\n          // Stack was updated mid animation\n          setPushingView(topChild);\n        } else if (topChild !== poppingView && topChild !== mainView) {\n          // Replace the current view\n          setMainView(topChild);\n        }\n      } else if (childrenArray.length > prevChildrenArray.length) {\n        // 2) Stack has grown - start the push animation\n        setPushingView(topChild);\n      } else if (childrenArray.length < prevChildrenArray.length) {\n        // 3) Stack has shrunk - start the pop animation\n        setMainView(topChild);\n        setPoppingView(prevChildrenArray[prevChildrenArray.length - 1]);\n      }\n    },\n    [childrenArray, prevChildrenArray, pushingView, poppingView, mainView]\n  );\n\n  const pushComplete = useCallback(() => {\n    setMainView(pushingView);\n    setPushingView(null);\n  }, [pushingView]);\n\n  const popComplete = useCallback(() => {\n    setPoppingView(null);\n  }, []);\n\n  return (\n    <div className=\"navigation-stack\">\n      <div className=\"main-view\" data-testid={dataTestId}>\n        {mainView}\n      </div>\n\n      <SlideTransition\n        direction=\"right\"\n        in={poppingView != null}\n        onEntered={popComplete}\n      >\n        {/* Without the fragment, the transition doesn't work. Without the conditional render, the stack is blank */}\n        {/* eslint-disable-next-line react/jsx-no-useless-fragment */}\n        <>\n          {poppingView != null && (\n            <div className=\"popping-view\">{poppingView}</div>\n          )}\n        </>\n      </SlideTransition>\n      <SlideTransition in={pushingView != null} onEntered={pushComplete}>\n        {/* eslint-disable-next-line react/jsx-no-useless-fragment */}\n        <>\n          {pushingView != null && (\n            <div className=\"pushing-view\">{pushingView}</div>\n          )}\n        </>\n      </SlideTransition>\n    </div>\n  );\n}\n\nexport default Stack;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,SAAS,EAAEC,OAAO,EAAEC,WAAW,QAAQ,OAAO;AACxE,SAASC,WAAW,QAAQ,wBAAwB;AAAC;AAAA,SAE5CC,eAAe;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AAOxB;AACA;AACA;AACA;AACA,OAAO,SAASC,KAAKA,CAAAC,IAAA,EAGO;EAAA,IAHN;IACpBC,QAAQ;IACR,aAAa,EAAEC;EACL,CAAC,GAAAF,IAAA;EACX,IAAMG,aAAa,GAAGd,OAAO,CAC3B,MAAMH,KAAK,CAACkB,QAAQ,CAACC,OAAO,CAACJ,QAAQ,CAAC,EACtC,CAACA,QAAQ,CACX,CAAC;EACD,IAAMK,iBAAiB,GAAGf,WAAW,CAACY,aAAa,CAAC;EACpD,IAAM,CAACI,QAAQ,EAAEC,WAAW,CAAC,GAAGrB,QAAQ,CACtCgB,aAAa,CAACA,aAAa,CAACM,MAAM,GAAG,CAAC,CACxC,CAAC;EAED,IAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGxB,QAAQ,CAAkB,IAAI,CAAC;EACrE,IAAM,CAACyB,WAAW,EAAEC,cAAc,CAAC,GAAG1B,QAAQ,CAAkB,IAAI,CAAC;;EAErE;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEC,SAAS,CACP,SAAS0B,aAAaA,CAAA,EAAG;IACvB,IACER,iBAAiB,KAAKS,SAAS,IAC/BZ,aAAa,KAAKG,iBAAiB,EACnC;MACA;IACF;IACA,IAAMU,QAAQ,GAAGb,aAAa,CAACA,aAAa,CAACM,MAAM,GAAG,CAAC,CAAC;IACxD,IACEN,aAAa,CAACM,MAAM,KAAKH,iBAAiB,CAACG,MAAM,IACjDH,iBAAiB,CAACG,MAAM,KAAK,CAAC,IAC9BC,WAAW,KAAK,IAAI,IACpBE,WAAW,KAAK,IAAI,EACpB;MACA;MACA,IAAIF,WAAW,KAAK,IAAI,IAAIM,QAAQ,KAAKN,WAAW,EAAE;QACpD;QACAC,cAAc,CAACK,QAAQ,CAAC;MAC1B,CAAC,MAAM,IAAIA,QAAQ,KAAKJ,WAAW,IAAII,QAAQ,KAAKT,QAAQ,EAAE;QAC5D;QACAC,WAAW,CAACQ,QAAQ,CAAC;MACvB;IACF,CAAC,MAAM,IAAIb,aAAa,CAACM,MAAM,GAAGH,iBAAiB,CAACG,MAAM,EAAE;MAC1D;MACAE,cAAc,CAACK,QAAQ,CAAC;IAC1B,CAAC,MAAM,IAAIb,aAAa,CAACM,MAAM,GAAGH,iBAAiB,CAACG,MAAM,EAAE;MAC1D;MACAD,WAAW,CAACQ,QAAQ,CAAC;MACrBH,cAAc,CAACP,iBAAiB,CAACA,iBAAiB,CAACG,MAAM,GAAG,CAAC,CAAC,CAAC;IACjE;EACF,CAAC,EACD,CAACN,aAAa,EAAEG,iBAAiB,EAAEI,WAAW,EAAEE,WAAW,EAAEL,QAAQ,CACvE,CAAC;EAED,IAAMU,YAAY,GAAG3B,WAAW,CAAC,MAAM;IACrCkB,WAAW,CAACE,WAAW,CAAC;IACxBC,cAAc,CAAC,IAAI,CAAC;EACtB,CAAC,EAAE,CAACD,WAAW,CAAC,CAAC;EAEjB,IAAMQ,WAAW,GAAG5B,WAAW,CAAC,MAAM;IACpCuB,cAAc,CAAC,IAAI,CAAC;EACtB,CAAC,EAAE,EAAE,CAAC;EAEN,oBACEf,KAAA;IAAKqB,SAAS,EAAC,kBAAkB;IAAAlB,QAAA,gBAC/BP,IAAA;MAAKyB,SAAS,EAAC,WAAW;MAAC,eAAajB,UAAW;MAAAD,QAAA,EAChDM;IAAQ,CACN,CAAC,eAENb,IAAA,CAACF,eAAe;MACd4B,SAAS,EAAC,OAAO;MACjBC,EAAE,EAAET,WAAW,IAAI,IAAK;MACxBU,SAAS,EAAEJ,WAAY;MAAAjB,QAAA,eAIvBP,IAAA,CAAAE,SAAA;QAAAK,QAAA,EACGW,WAAW,IAAI,IAAI,iBAClBlB,IAAA;UAAKyB,SAAS,EAAC,cAAc;UAAAlB,QAAA,EAAEW;QAAW,CAAM;MACjD,CACD;IAAC,CACY,CAAC,eAClBlB,IAAA,CAACF,eAAe;MAAC6B,EAAE,EAAEX,WAAW,IAAI,IAAK;MAACY,SAAS,EAAEL,YAAa;MAAAhB,QAAA,eAEhEP,IAAA,CAAAE,SAAA;QAAAK,QAAA,EACGS,WAAW,IAAI,IAAI,iBAClBhB,IAAA;UAAKyB,SAAS,EAAC,cAAc;UAAAlB,QAAA,EAAES;QAAW,CAAM;MACjD,CACD;IAAC,CACY,CAAC;EAAA,CACf,CAAC;AAEV;AAEA,eAAeX,KAAK","ignoreList":[]}
+{"version":3,"file":"Stack.js","names":["React","useState","useEffect","useMemo","useCallback","usePrevious","SlideTransition","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","getViewKey","node","isValidElement","key","findViewByKey","views","_views$find","find","view","Stack","_ref","children","dataTestId","childrenArray","Children","toArray","prevChildrenArray","mainViewKey","setMainViewKey","length","pushingViewKey","setPushingViewKey","poppingView","setPoppingView","initAnimation","undefined","topChildKey","pushComplete","popComplete","mainView","pushingView","className","direction","in","onEntered"],"sources":["../../src/navigation/Stack.tsx"],"sourcesContent":["import React, { useState, useEffect, useMemo, useCallback } from 'react';\nimport { usePrevious } from '@deephaven/react-hooks';\nimport './Stack.scss';\nimport { SlideTransition } from '../transitions';\n\nexport type StackProps = {\n  /**\n   * Stack views to animate between. Each child must be a React element with a\n   * stable `key`; views are tracked by that key across re-renders (primitive\n   * nodes such as strings/numbers are not supported).\n   */\n  children: React.ReactElement | React.ReactElement[];\n  'data-testid'?: string;\n};\n\n/**\n * Returns the React `key` for an element, or `null` for non-elements.\n *\n * The parent that renders the stack may re-render frequently (e.g. an\n * `IrisGrid` re-renders on every table tick) and hand us brand-new element\n * objects that represent the same logical view. Tracking the animating views\n * by `key` (rather than by element reference) means those re-renders neither\n * retrigger the slide animation nor churn state every frame.\n *\n * Children are always run through `React.Children.toArray`, which assigns a\n * stable key to every element, so element views always have a key.\n */\nfunction getViewKey(node: React.ReactNode): React.Key | null {\n  return React.isValidElement(node) ? node.key : null;\n}\n\n/**\n * Finds the child that currently represents the view identified by `key`.\n *\n * Returning the *current* element (instead of a stored copy) keeps the rendered\n * view's content live: when a parent re-renders with a new element instance for\n * the same logical view, the view's latest props are forwarded to the mounted\n * component. This matters for prop-driven panels such as the \"Organize Columns\"\n * (`VisibilityOrderingBuilder`) sidebar, whose list contents and Undo/Redo state\n * arrive entirely via props from the grid - freezing those props would stop the\n * panel from reflecting moves, hides, groupings, and undo/redo.\n */\nfunction findViewByKey(\n  views: readonly React.ReactNode[],\n  key: React.Key | null\n): React.ReactNode {\n  if (key == null) {\n    return null;\n  }\n  return views.find(view => getViewKey(view) === key) ?? null;\n}\n\n/**\n * Pass a full navigation stack of children, and then automatically does a sliding animation when the stack changes.\n * Adding items to the stack will do a \"push\" animation, and removing items from the stack will do a \"pop\" animation.\n */\nexport function Stack({\n  children,\n  'data-testid': dataTestId,\n}: StackProps): JSX.Element {\n  const childrenArray = useMemo(\n    () => React.Children.toArray(children),\n    [children]\n  );\n  const prevChildrenArray = usePrevious(childrenArray);\n\n  // The animating views are tracked by `key`, not element identity, so that\n  // frequent parent re-renders (which produce new-but-equivalent elements)\n  // neither retrigger animations nor freeze content. The element actually\n  // rendered is always looked up from the latest `childrenArray` via\n  // `findViewByKey`, keeping each view's props live.\n  const [mainViewKey, setMainViewKey] = useState<React.Key | null>(() =>\n    getViewKey(childrenArray[childrenArray.length - 1])\n  );\n\n  const [pushingViewKey, setPushingViewKey] = useState<React.Key | null>(null);\n\n  // The popping view has already been removed from `children`, so we keep the\n  // element instance itself - it is only animating out and its content does not\n  // need to stay live.\n  const [poppingView, setPoppingView] = useState<React.ReactNode>(null);\n\n  /**\n   * To do the animation effect, we just need to set the proper pushing/popping views when the stack changes.\n   * `mainView` - The main view of the stack, stationary, filling the container.\n   * `pushingView` - A view that's currently being pushed. Slides from off screen right to overtop of `mainView`.\n   * `poppingView` - A view that's currently being popped. Slides from overtop of `mainView` to right off screen.\n   *\n   * When the `pushingView` or `poppingView` is set, that will kick off their animation.\n   * Completion of the animation is handled in `pushComplete` or `popComplete`, and then the stack is in an idle state again.\n   *\n   * Views are compared by `key` (see `getViewKey`) so that a parent that\n   * re-renders with new element instances for the same logical view does not\n   * retrigger animations or churn state on every render.\n   */\n  useEffect(\n    function initAnimation() {\n      if (\n        prevChildrenArray === undefined ||\n        childrenArray === prevChildrenArray\n      ) {\n        return;\n      }\n      const topChildKey = getViewKey(childrenArray[childrenArray.length - 1]);\n\n      if (pushingViewKey !== null || poppingView !== null) {\n        // We're mid-animation. Keep the animating view pointed at the current\n        // top view, but don't start a new animation.\n        if (pushingViewKey !== null) {\n          if (topChildKey !== pushingViewKey) {\n            // A different view was pushed mid-animation - animate to it instead\n            setPushingViewKey(topChildKey);\n          }\n        } else if (topChildKey !== mainViewKey) {\n          setMainViewKey(topChildKey);\n        }\n      } else if (\n        childrenArray.length === prevChildrenArray.length ||\n        prevChildrenArray.length === 0\n      ) {\n        // Stack is the same size or we've just mounted - just update the view\n        if (topChildKey !== mainViewKey) {\n          setMainViewKey(topChildKey);\n        }\n      } else if (childrenArray.length > prevChildrenArray.length) {\n        // Stack has grown - start the push animation\n        setPushingViewKey(topChildKey);\n      } else {\n        // Stack has shrunk - start the pop animation\n        setMainViewKey(topChildKey);\n        setPoppingView(prevChildrenArray[prevChildrenArray.length - 1]);\n      }\n    },\n    [childrenArray, prevChildrenArray, pushingViewKey, poppingView, mainViewKey]\n  );\n\n  const pushComplete = useCallback(() => {\n    setMainViewKey(pushingViewKey);\n    setPushingViewKey(null);\n  }, [pushingViewKey]);\n\n  const popComplete = useCallback(() => {\n    setPoppingView(null);\n  }, []);\n\n  const mainView = findViewByKey(childrenArray, mainViewKey);\n  const pushingView = findViewByKey(childrenArray, pushingViewKey);\n\n  return (\n    <div className=\"navigation-stack\">\n      <div className=\"main-view\" data-testid={dataTestId}>\n        {mainView}\n      </div>\n\n      <SlideTransition\n        direction=\"right\"\n        in={poppingView != null}\n        onEntered={popComplete}\n      >\n        {/* Without the fragment, the transition doesn't work. Without the conditional render, the stack is blank */}\n        {/* eslint-disable-next-line react/jsx-no-useless-fragment */}\n        <>\n          {poppingView != null && (\n            <div className=\"popping-view\">{poppingView}</div>\n          )}\n        </>\n      </SlideTransition>\n      <SlideTransition in={pushingView != null} onEntered={pushComplete}>\n        {/* eslint-disable-next-line react/jsx-no-useless-fragment */}\n        <>\n          {pushingView != null && (\n            <div className=\"pushing-view\">{pushingView}</div>\n          )}\n        </>\n      </SlideTransition>\n    </div>\n  );\n}\n\nexport default Stack;\n"],"mappings":"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","ignoreList":[]}

package/dist/popper/Popper.css

@@ -8,6 +8,13 @@
   max-height: inherit;
 }
 
+.popper-container.maximized {
+  position: fixed !important;
+  top: 50% !important;
+  left: 50% !important;
+  transform: translate(-50%, -50%) !important;
+}
+
 .popper.popper-tooltip {
   --background-color: var(--dh-color-tooltip-bg);
 }

package/dist/popper/Popper.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/custom.scss","../../scss/bootstrap_overrides.scss","../../src/popper/Popper.scss"],"names":[],"mappings":"AAAA;AC6LA;ACvLA;EACE;EACA;;AAEA;EACE;;;AAIJ;EACE;;;AAGF;EACE;EAEA;EACA;EACA,eDmIc;EClId,YDmIW;EClIX,YACE;EAEF;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA,QA9CU;EA+CV;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAME;;;AAGF;AAAA;EAME;;;AAGF;AAAA;EAME;;;AAGF;AAAA;EAME;;;AAGF;AAAA;AAAA;AAAA;EAYE;EACA;EACA;;;AAGF;EACE,eAvHY;;AAyHZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE,YArIY;;AAuIZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE,aAnJY;;AAqJZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE,cAjKY;;AAmKZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"Popper.css","sourcesContent":["/* stylelint-disable scss/at-import-no-partial-leading-underscore */\n// Consumers should be able to resolve bootstrap/ to node_modules/bootstrap\n\n//Make bootstrap functions available for use in overrides\n@import 'bootstrap/scss/_functions.scss';\n@import './bootstrap_overrides.scss';\n\n//_variable imports come after bootstrap default overrides,\n// makes all other variables and mixins from bootstrap available\n/// with just importing customer.scss\n@import 'bootstrap/scss/_variables.scss';\n@import 'bootstrap/scss/_mixins.scss';\n\n//New variables come after imports\n@import './new_variables.scss';\n@import './util.scss';\n","// Styling overrides for bootstrap\n@use 'sass:map';\n\n// Override / set color variables\n$red: var(--dh-color-visual-red);\n$orange: var(--dh-color-visual-orange);\n$yellow: var(--dh-color-visual-yellow);\n$green: var(--dh-color-visual-green);\n$blue: var(--dh-color-visual-blue);\n$purple: var(--dh-color-visual-purple);\n\n// Fallback colors are used if theme isn't loaded\n// this is required for error messages if the API doesn't load\n\n//Define our Gray scale\n$gray-100: var(--dh-color-gray-900, #fcfcfa);\n$gray-200: var(--dh-color-gray-800);\n$gray-300: var(--dh-color-gray-700);\n$gray-400: var(--dh-color-gray-600);\n$gray-500: var(--dh-color-gray-500);\n// intentional duplicate, scale doesn't line up otherwise\n// as we have gray-850 and spectrum doesn't and it is needed\n$gray-600: var(--dh-color-gray-500);\n$gray-700: var(--dh-color-gray-400);\n$gray-800: var(--dh-color-gray-300);\n$gray-850: var(--dh-color-gray-200);\n$gray-900: var(--dh-color-gray-75);\n$black: var(--dh-color-black, #1a171a);\n$white: var(--dh-color-white, #f0f0ee);\n\n//Define some UI colors\n$interfacegray: var(--dh-color-content-bg, #2d2a2e);\n$interfaceblue: var(--dh-color-accent-bg);\n$interfacewhite: $white;\n$interfaceblack: $black;\n$content-bg: var(--dh-color-content-bg, #2d2a2e);\n$background: var(--dh-color-bg, #1a171a);\n$foreground: var(--dh-color-fg, #f0f0ee);\n\n// Extend default Bootstrap $grays map\n$grays-custom: (\n  '850': $gray-850,\n);\n$grays: () !default;\n$grays: map-merge($grays, $grays-custom);\n\n// Extend default Bootstrap $colors map\n$colors-custom: (\n  'black': $black,\n);\n$colors: () !default;\n$colors: map-merge($colors, $colors-custom);\n\n// Override default Bootstrap $theme-colors map by mapping each key to itself.\n// These will then be re-mapped inside of `button-outline-variant` and\n// `button-outline-variant` mixins in `bootstrap_override_mixins_buttons.scss`\n$theme-colors-self-map: ();\n@each $key\n  in (\n    'primary',\n    'secondary',\n    'success',\n    'info',\n    'warning',\n    'danger',\n    'light',\n    'dark'\n  )\n{\n  $theme-colors-self-map: map.set($theme-colors-self-map, $key, $key);\n}\n$theme-colors: () !default;\n$theme-colors: map-merge($theme-colors, $theme-colors-self-map);\n\n// Used by bootstrap_override_mixins_buttons.scss to map Bootstrap colors to\n// DH semantic colors\n$bootstrap-dh-semantic-map: (\n  'primary': 'accent',\n  'secondary': 'neutral',\n  'success': 'positive',\n  'info': 'info',\n  'warning': 'notice',\n  'danger': 'negative',\n  // We shouldn't be using these, but mapping so they work with our custom\n  // `color-yiq` mixin. If we find a way to remove $light + $dark that are\n  // defined in Bootstrap _variables.scss, we should remove these\n  'light': 'neutral',\n  'dark': 'neutral',\n);\n\n//Set default colors\n$body-bg: $black;\n$body-color: $interfacewhite;\n\n// Set brand colors\n$primary: var(--dh-color-accent-bg);\n$primary-hover: var(--dh-color-accent-hover-bg);\n$primary-dark: var(--dh-color-accent-down-bg);\n$secondary: var(--dh-color-neutral-bg);\n$secondary-hover: var(--dh-color-neutral-hover-bg);\n$success: $green;\n$info: $yellow;\n$warning: $orange;\n$danger: var(--dh-color-negative-bg);\n$danger-hover: var(--dh-color-negative-hover-bg);\n// We really don't want to use $light or $dark variables, but Bootstrap defines\n// them in _variables.scss. Explicitly setting them to ensure we are in control\n// of their values. If we can find a way to remove them, we should\n$light: var(--dh-color-gray-light);\n$dark: var(--dh-color-gray-dark);\n// Bootstrap doesn't define $mid, and we want to move away from this particular\n// semantic. Should be deleted by #1635\n$mid: var(--dh-color-gray-mid);\n\n$semantic-colors: (\n  'primary-hover': $primary-hover,\n  'primary-dark': $primary-dark,\n  'mid': $mid,\n  'content-bg': $interfacegray,\n  'background': $interfaceblack,\n  'foreground': $interfacewhite,\n  'secondary-hover': $secondary-hover,\n  'danger-hover': $danger-hover,\n);\n\n$component-active-bg: $primary;\n$theme-color-interval: 9%;\n$yiq-contrasted-threshold: 180;\n\n// Override fonts\n$font-family-sans-serif:\n  'Fira Sans',\n  -apple-system,\n  blinkmacsystemfont,\n  'Segoe UI',\n  'Roboto',\n  'Helvetica Neue',\n  arial,\n  sans-serif; //fira sans then native system ui fallbacks\n$font-family-monospace: 'Fira Mono', menlo, monaco, consolas, 'Liberation Mono',\n  'Courier New', monospace;\n$font-family-base: $font-family-sans-serif;\n\n$headings-font-weight: 400;\n\n//Text overides\n$text-muted: $gray-400;\n\n//Style Selection highlight color\n$text-select-color: var(--dh-color-text-highlight);\n\n//Grid variables, same value as default just making easily accessible\n$grid-gutter-width: 30px;\n\n//Visual Overrides\n$border-radius: 4px;\n$box-shadow: 0 0.1rem 1rem var(--dh-color-dropshadow);\n\n//Override Btn\n$btn-border-radius: 4rem;\n$btn-padding-x: 1.5rem;\n$btn-transition:\n  color 0.12s ease-in-out,\n  background-color 0.12s ease-in-out,\n  border-color 0.12s ease-in-out,\n  box-shadow 0.12s ease-in-out; //default 0.15 is too long\n$btn-border-width: 2px;\n$btn-font-weight: var(--spectrum-global-font-weight-bold);\n$btn-line-height: 1.3;\n\n//Override Inputs\n$input-bg: var(--dh-color-input-bg);\n$input-disabled-bg: var(--dh-color-input-disabled-bg);\n$input-color: var(--dh-color-input-fg);\n$input-border-color: var(--dh-color-input-border);\n$input-placeholder-color: var(--dh-color-input-placeholder);\n$input-focus-border-color: var(--dh-color-input-focus-border);\n\n$input-btn-focus-width: 0.2rem;\n$input-btn-focus-color: color-mix(\n  in srgb,\n  var(--dh-color-accent) 35%,\n  transparent\n);\n$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;\n$input-btn-line-height: 1.3;\n// Bootstrap uses a calc expression to determine the input height (calc(line-height + 2*padding-y + border)).\n// The padding-y value has to be in rem to match units as it is a SASS calc.\n// Using 0.42145rem with 1.3 line height gets us to spectrum's 32px.\n/* stylelint-disable-next-line number-max-precision */\n$input-btn-padding-y: 0.42145rem;\n\n//checkbox\n$custom-control-indicator-bg: var(--dh-color-input-bg);\n$custom-control-indicator-border-color: var(--dh-color-input-border);\n$custom-checkbox-indicator-border-radius: 2px;\n$custom-control-indicator-border-width: 2px;\n$custom-control-indicator-active-bg: var(--dh-color-input-bg);\n$custom-control-indicator-active-border-color: var(--dh-color-input-fg);\n$custom-control-indicator-checked-bg: var(--dh-color-input-fg);\n$custom-control-indicator-checked-color: black; // used as mask fill color\n$custom-checkbox-indicator-indeterminate-bg: var(--dh-color-input-fg);\n$custom-control-indicator-bg-size: 75% 75%;\n$custom-control-indicator-disabled-bg: var(--dh-color-input-disabled-bg);\n$custom-control-indicator-checked-disabled-bg: var(\n  --dh-color-input-disabled-bg\n);\n$custom-control-label-disabled-color: var(--dh-color-input-disabled-fg);\n\n// The $custom-select-indicator variable is used by Bootstrap to provide the\n// icon for the select dropdown. Inline svgs can't use CSS variables, so we hard\n// code the color to #929192 (the default value of --dh-color-gray-600). PR #1651\n// overrides this icon altogether for known dropdowns, so technically we may not\n// need this, but it's here in case there are any remaining instances.\n$custom-select-indicator-color: #929192;\n$custom-select-bg: var(--dh-color-selector-bg);\n$custom-select-bg-size: 16px 16px;\n//dhSort icon encoded\n$custom-select-indicator: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M4 7l-.4-.8 4-3.7h.8l4 3.7-.4.8H4zm0 2l-.4.8 4 3.7h.8l4-3.7L12 9H4z'/%3E%3C/svg%3E\"),\n  '#',\n  '%23'\n);\n$custom-select-focus-box-shadow: $input-btn-focus-box-shadow;\n$custom-select-disabled-color: $gray-500;\n$custom-select-disabled-bg: $gray-800;\n\n//modal\n$modal-content-bg: $content-bg;\n$modal-content-border-width: 0;\n$modal-md: 550px;\n$close-color: var(--dh-color-text);\n$close-text-shadow: none;\n\n// Toast notification\n$toast-bg: var(--dh-color-accent-100);\n$toast-color: var(--dh-color-text);\n$toast-error-bg: var(--dh-color-negative-bg);\n$toast-error-color: var(--dh-color-text);\n\n//tooltips\n$tooltip-bg: var(--dh-color-tooltip-bg);\n$tooltip-color: var(--dh-color-tooltip-fg);\n$tooltip-box-shadow: 0 0.1rem 1.5rem 0.1rem var(--dh-color-tooltip-box-shadow);\n\n//drowdowns\n$dropdown-bg: $gray-600;\n$dropdown-link-color: $foreground;\n$dropdown-link-hover-color: $foreground;\n$dropdown-link-hover-bg: var(--dh-color-item-list-hover-bg);\n$dropdown-divider-bg: $gray-700;\n\n//context menus\n$contextmenu-bg: var(--dh-color-popover-bg);\n$contextmenu-color: var(--dh-color-text);\n$contextmenu-disabled-color: var(--dh-color-text-disabled);\n$contextmenu-keyboard-selected-bg: var(--dh-color-keyboard-selected-bg);\n$contextmenu-selected-bg: var(--dh-color-item-list-hover-bg);\n$contextmenu-selected-color: var(--dh-color-item-list-selected-fg);\n\n//hr\n$hr-border-color: var(--dh-color-hr);\n\n//links\n$link-color: $gray-400;\n$link-hover-color: $foreground;\n\n//progress-bar\n$progress-bg: $gray-600;\n$progress-border-radius: 1rem;\n\n// Set global options\n$enable-shadows: false;\n$enable-gradients: false;\n$enable-print-styles: false; //I don't think anyone should expect to \"print\" this app.\n\n// Transition times\n$transition: 0.15s;\n$transition-mid: 0.2s;\n$transition-long: 0.3s;\n$transition-slow: 0.6s;\n\n//form-validation icon, uses vsWarning icon encoded here as svg\n$form-feedback-icon-invalid-color: $danger;\n$form-feedback-icon-invalid: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none'%3E%3Cg fill='#{$form-feedback-icon-invalid-color}'%3E%3Cpath d='M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26 7.56 1zM8 2.28 2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E \"),\n  '#',\n  '%23'\n);\n\n// This section of variables is not consumed directly by DH, but they need to be\n// defined for sass to compile _variables\n$table-dark-bg: $gray-800;\n$table-dark-accent-bg: var(--dh-color-highlight-hover);\n$table-dark-hover-bg: var(--dh-color-highlight-active);\n$table-dark-border-color: $gray-700;\n$popover-bg: var(--dh-color-tooltip-bg);\n$popover-border-color: var(--dh-color-overlay-modal-bg);\n$popover-header-bg: #000;\n$popover-arrow-outer-color: var(--dh-color-dropshadow);\n$custom-range-thumb-active-bg: var(--dh-color-accent-1100);\n","@import '../../scss/custom.scss';\n\n$arrow-width: 5px;\n$animation-scale: 0.92;\n$animation-offset: 10px;\n\n.popper-container {\n  position: absolute;\n  z-index: 5000;\n\n  .spectrum-theme-provider {\n    max-height: inherit;\n  }\n}\n\n.popper.popper-tooltip {\n  --background-color: var(--dh-color-tooltip-bg);\n}\n\n.popper {\n  --background-color: var(--dh-color-popover-bg);\n\n  background: var(--background-color);\n  color: var(--dh-color-tooltip-fg);\n  border-radius: $border-radius;\n  box-shadow: $box-shadow;\n  transition:\n    visibility $transition,\n    opacity $transition;\n  pointer-events: none;\n  outline: 0;\n  max-height: inherit;\n\n  .popper-content {\n    position: relative;\n    max-height: inherit;\n\n    .tooltip-content {\n      text-align: center;\n      padding: $tooltip-padding-y $tooltip-padding-x;\n    }\n  }\n\n  .popper-arrow {\n    width: 0;\n    height: 0;\n    border-style: solid;\n    position: absolute;\n    margin: $arrow-width;\n    border-color: var(--background-color);\n  }\n}\n\n.popper.interactive {\n  pointer-events: auto;\n}\n\n.popper-transition-enter {\n  opacity: 0;\n  transition: none;\n}\n\n.popper-transition-exit {\n  opacity: 0;\n  transition: all $transition;\n}\n\n.popper-container[x-placement^='top']\n  > .spectrum-theme-provider\n  .popper-transition-enter,\n.popper-container[x-placement^='top']\n  > .spectrum-theme-provider\n  .popper-transition-exit {\n  transform: scale($animation-scale) translate(0, $animation-offset);\n}\n\n.popper-container[x-placement^='right']\n  > .spectrum-theme-provider\n  .popper-transition-enter,\n.popper-container[x-placement^='right']\n  > .spectrum-theme-provider\n  .popper-transition-exit {\n  transform: scale($animation-scale) translate(-$animation-offset, 0);\n}\n\n.popper-container[x-placement^='bottom']\n  > .spectrum-theme-provider\n  .popper-transition-enter,\n.popper-container[x-placement^='bottom']\n  > .spectrum-theme-provider\n  .popper-transition-exit {\n  transform: scale($animation-scale) translate(0, -$animation-offset);\n}\n\n.popper-container[x-placement^='left']\n  > .spectrum-theme-provider\n  .popper-transition-enter,\n.popper-container[x-placement^='left']\n  > .spectrum-theme-provider\n  .popper-transition-exit {\n  transform: scale($animation-scale) translate($animation-offset, 0);\n}\n\n.popper-container[x-placement^='top']\n  > .spectrum-theme-provider\n  .popper-transition-enter-active.popper,\n.popper-container[x-placement^='right']\n  > .spectrum-theme-provider\n  .popper-transition-enter-active.popper,\n.popper-container[x-placement^='bottom']\n  > .spectrum-theme-provider\n  .popper-transition-enter-active.popper,\n.popper-container[x-placement^='left']\n  > .spectrum-theme-provider\n  .popper-transition-enter-active.popper {\n  opacity: 1;\n  transform: none;\n  transition: all $transition ease-out;\n}\n\n.popper-container[x-placement^='top'] > .spectrum-theme-provider .popper {\n  margin-bottom: $arrow-width;\n\n  .popper-arrow {\n    border-width: $arrow-width $arrow-width 0 $arrow-width;\n    border-left-color: transparent;\n    border-right-color: transparent;\n    border-bottom-color: transparent;\n    bottom: -$arrow-width;\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n}\n\n.popper-container[x-placement^='bottom'] > .spectrum-theme-provider .popper {\n  margin-top: $arrow-width;\n\n  .popper-arrow {\n    border-width: 0 $arrow-width $arrow-width $arrow-width;\n    border-left-color: transparent;\n    border-right-color: transparent;\n    border-top-color: transparent;\n    top: -$arrow-width;\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n}\n\n.popper-container[x-placement^='right'] > .spectrum-theme-provider .popper {\n  margin-left: $arrow-width;\n\n  .popper-arrow {\n    border-width: $arrow-width $arrow-width $arrow-width 0;\n    border-left-color: transparent;\n    border-top-color: transparent;\n    border-bottom-color: transparent;\n    left: -$arrow-width;\n    margin-left: 0;\n    margin-right: 0;\n  }\n}\n\n.popper-container[x-placement^='left'] > .spectrum-theme-provider .popper {\n  margin-right: $arrow-width;\n\n  .popper-arrow {\n    border-width: $arrow-width 0 $arrow-width $arrow-width;\n    border-top-color: transparent;\n    border-right-color: transparent;\n    border-bottom-color: transparent;\n    right: -$arrow-width;\n    margin-left: 0;\n    margin-right: 0;\n  }\n}\n"]}
+{"version":3,"sourceRoot":"","sources":["../../scss/custom.scss","../../scss/bootstrap_overrides.scss","../../src/popper/Popper.scss"],"names":[],"mappings":"AAAA;AC6LA;ACvLA;EACE;EACA;;AAEA;EACE;;;AAMJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EAEA;EACA;EACA,eD0Hc;ECzHd,YD0HW;ECzHX,YACE;EAEF;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA,QAvDU;EAwDV;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAME;;;AAGF;AAAA;EAME;;;AAGF;AAAA;EAME;;;AAGF;AAAA;EAME;;;AAGF;AAAA;AAAA;AAAA;EAYE;EACA;EACA;;;AAGF;EACE,eAhIY;;AAkIZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE,YA9IY;;AAgJZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE,aA5JY;;AA8JZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE,cA1KY;;AA4KZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"Popper.css","sourcesContent":["/* stylelint-disable scss/at-import-no-partial-leading-underscore */\n// Consumers should be able to resolve bootstrap/ to node_modules/bootstrap\n\n//Make bootstrap functions available for use in overrides\n@import 'bootstrap/scss/_functions.scss';\n@import './bootstrap_overrides.scss';\n\n//_variable imports come after bootstrap default overrides,\n// makes all other variables and mixins from bootstrap available\n/// with just importing customer.scss\n@import 'bootstrap/scss/_variables.scss';\n@import 'bootstrap/scss/_mixins.scss';\n\n//New variables come after imports\n@import './new_variables.scss';\n@import './util.scss';\n","// Styling overrides for bootstrap\n@use 'sass:map';\n\n// Override / set color variables\n$red: var(--dh-color-visual-red);\n$orange: var(--dh-color-visual-orange);\n$yellow: var(--dh-color-visual-yellow);\n$green: var(--dh-color-visual-green);\n$blue: var(--dh-color-visual-blue);\n$purple: var(--dh-color-visual-purple);\n\n// Fallback colors are used if theme isn't loaded\n// this is required for error messages if the API doesn't load\n\n//Define our Gray scale\n$gray-100: var(--dh-color-gray-900, #fcfcfa);\n$gray-200: var(--dh-color-gray-800);\n$gray-300: var(--dh-color-gray-700);\n$gray-400: var(--dh-color-gray-600);\n$gray-500: var(--dh-color-gray-500);\n// intentional duplicate, scale doesn't line up otherwise\n// as we have gray-850 and spectrum doesn't and it is needed\n$gray-600: var(--dh-color-gray-500);\n$gray-700: var(--dh-color-gray-400);\n$gray-800: var(--dh-color-gray-300);\n$gray-850: var(--dh-color-gray-200);\n$gray-900: var(--dh-color-gray-75);\n$black: var(--dh-color-black, #1a171a);\n$white: var(--dh-color-white, #f0f0ee);\n\n//Define some UI colors\n$interfacegray: var(--dh-color-content-bg, #2d2a2e);\n$interfaceblue: var(--dh-color-accent-bg);\n$interfacewhite: $white;\n$interfaceblack: $black;\n$content-bg: var(--dh-color-content-bg, #2d2a2e);\n$background: var(--dh-color-bg, #1a171a);\n$foreground: var(--dh-color-fg, #f0f0ee);\n\n// Extend default Bootstrap $grays map\n$grays-custom: (\n  '850': $gray-850,\n);\n$grays: () !default;\n$grays: map-merge($grays, $grays-custom);\n\n// Extend default Bootstrap $colors map\n$colors-custom: (\n  'black': $black,\n);\n$colors: () !default;\n$colors: map-merge($colors, $colors-custom);\n\n// Override default Bootstrap $theme-colors map by mapping each key to itself.\n// These will then be re-mapped inside of `button-outline-variant` and\n// `button-outline-variant` mixins in `bootstrap_override_mixins_buttons.scss`\n$theme-colors-self-map: ();\n@each $key\n  in (\n    'primary',\n    'secondary',\n    'success',\n    'info',\n    'warning',\n    'danger',\n    'light',\n    'dark'\n  )\n{\n  $theme-colors-self-map: map.set($theme-colors-self-map, $key, $key);\n}\n$theme-colors: () !default;\n$theme-colors: map-merge($theme-colors, $theme-colors-self-map);\n\n// Used by bootstrap_override_mixins_buttons.scss to map Bootstrap colors to\n// DH semantic colors\n$bootstrap-dh-semantic-map: (\n  'primary': 'accent',\n  'secondary': 'neutral',\n  'success': 'positive',\n  'info': 'info',\n  'warning': 'notice',\n  'danger': 'negative',\n  // We shouldn't be using these, but mapping so they work with our custom\n  // `color-yiq` mixin. If we find a way to remove $light + $dark that are\n  // defined in Bootstrap _variables.scss, we should remove these\n  'light': 'neutral',\n  'dark': 'neutral',\n);\n\n//Set default colors\n$body-bg: $black;\n$body-color: $interfacewhite;\n\n// Set brand colors\n$primary: var(--dh-color-accent-bg);\n$primary-hover: var(--dh-color-accent-hover-bg);\n$primary-dark: var(--dh-color-accent-down-bg);\n$secondary: var(--dh-color-neutral-bg);\n$secondary-hover: var(--dh-color-neutral-hover-bg);\n$success: $green;\n$info: $yellow;\n$warning: $orange;\n$danger: var(--dh-color-negative-bg);\n$danger-hover: var(--dh-color-negative-hover-bg);\n// We really don't want to use $light or $dark variables, but Bootstrap defines\n// them in _variables.scss. Explicitly setting them to ensure we are in control\n// of their values. If we can find a way to remove them, we should\n$light: var(--dh-color-gray-light);\n$dark: var(--dh-color-gray-dark);\n// Bootstrap doesn't define $mid, and we want to move away from this particular\n// semantic. Should be deleted by #1635\n$mid: var(--dh-color-gray-mid);\n\n$semantic-colors: (\n  'primary-hover': $primary-hover,\n  'primary-dark': $primary-dark,\n  'mid': $mid,\n  'content-bg': $interfacegray,\n  'background': $interfaceblack,\n  'foreground': $interfacewhite,\n  'secondary-hover': $secondary-hover,\n  'danger-hover': $danger-hover,\n);\n\n$component-active-bg: $primary;\n$theme-color-interval: 9%;\n$yiq-contrasted-threshold: 180;\n\n// Override fonts\n$font-family-sans-serif:\n  'Fira Sans',\n  -apple-system,\n  blinkmacsystemfont,\n  'Segoe UI',\n  'Roboto',\n  'Helvetica Neue',\n  arial,\n  sans-serif; //fira sans then native system ui fallbacks\n$font-family-monospace: 'Fira Mono', menlo, monaco, consolas, 'Liberation Mono',\n  'Courier New', monospace;\n$font-family-base: $font-family-sans-serif;\n\n$headings-font-weight: 400;\n\n//Text overides\n$text-muted: $gray-400;\n\n//Style Selection highlight color\n$text-select-color: var(--dh-color-text-highlight);\n\n//Grid variables, same value as default just making easily accessible\n$grid-gutter-width: 30px;\n\n//Visual Overrides\n$border-radius: 4px;\n$box-shadow: 0 0.1rem 1rem var(--dh-color-dropshadow);\n\n//Override Btn\n$btn-border-radius: 4rem;\n$btn-padding-x: 1.5rem;\n$btn-transition:\n  color 0.12s ease-in-out,\n  background-color 0.12s ease-in-out,\n  border-color 0.12s ease-in-out,\n  box-shadow 0.12s ease-in-out; //default 0.15 is too long\n$btn-border-width: 2px;\n$btn-font-weight: var(--spectrum-global-font-weight-bold);\n$btn-line-height: 1.3;\n\n//Override Inputs\n$input-bg: var(--dh-color-input-bg);\n$input-disabled-bg: var(--dh-color-input-disabled-bg);\n$input-color: var(--dh-color-input-fg);\n$input-border-color: var(--dh-color-input-border);\n$input-placeholder-color: var(--dh-color-input-placeholder);\n$input-focus-border-color: var(--dh-color-input-focus-border);\n\n$input-btn-focus-width: 0.2rem;\n$input-btn-focus-color: color-mix(\n  in srgb,\n  var(--dh-color-accent) 35%,\n  transparent\n);\n$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;\n$input-btn-line-height: 1.3;\n// Bootstrap uses a calc expression to determine the input height (calc(line-height + 2*padding-y + border)).\n// The padding-y value has to be in rem to match units as it is a SASS calc.\n// Using 0.42145rem with 1.3 line height gets us to spectrum's 32px.\n/* stylelint-disable-next-line number-max-precision */\n$input-btn-padding-y: 0.42145rem;\n\n//checkbox\n$custom-control-indicator-bg: var(--dh-color-input-bg);\n$custom-control-indicator-border-color: var(--dh-color-input-border);\n$custom-checkbox-indicator-border-radius: 2px;\n$custom-control-indicator-border-width: 2px;\n$custom-control-indicator-active-bg: var(--dh-color-input-bg);\n$custom-control-indicator-active-border-color: var(--dh-color-input-fg);\n$custom-control-indicator-checked-bg: var(--dh-color-input-fg);\n$custom-control-indicator-checked-color: black; // used as mask fill color\n$custom-checkbox-indicator-indeterminate-bg: var(--dh-color-input-fg);\n$custom-control-indicator-bg-size: 75% 75%;\n$custom-control-indicator-disabled-bg: var(--dh-color-input-disabled-bg);\n$custom-control-indicator-checked-disabled-bg: var(\n  --dh-color-input-disabled-bg\n);\n$custom-control-label-disabled-color: var(--dh-color-input-disabled-fg);\n\n// The $custom-select-indicator variable is used by Bootstrap to provide the\n// icon for the select dropdown. Inline svgs can't use CSS variables, so we hard\n// code the color to #929192 (the default value of --dh-color-gray-600). PR #1651\n// overrides this icon altogether for known dropdowns, so technically we may not\n// need this, but it's here in case there are any remaining instances.\n$custom-select-indicator-color: #929192;\n$custom-select-bg: var(--dh-color-selector-bg);\n$custom-select-bg-size: 16px 16px;\n//dhSort icon encoded\n$custom-select-indicator: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M4 7l-.4-.8 4-3.7h.8l4 3.7-.4.8H4zm0 2l-.4.8 4 3.7h.8l4-3.7L12 9H4z'/%3E%3C/svg%3E\"),\n  '#',\n  '%23'\n);\n$custom-select-focus-box-shadow: $input-btn-focus-box-shadow;\n$custom-select-disabled-color: $gray-500;\n$custom-select-disabled-bg: $gray-800;\n\n//modal\n$modal-content-bg: $content-bg;\n$modal-content-border-width: 0;\n$modal-md: 550px;\n$close-color: var(--dh-color-text);\n$close-text-shadow: none;\n\n// Toast notification\n$toast-bg: var(--dh-color-accent-100);\n$toast-color: var(--dh-color-text);\n$toast-error-bg: var(--dh-color-negative-bg);\n$toast-error-color: var(--dh-color-text);\n\n//tooltips\n$tooltip-bg: var(--dh-color-tooltip-bg);\n$tooltip-color: var(--dh-color-tooltip-fg);\n$tooltip-box-shadow: 0 0.1rem 1.5rem 0.1rem var(--dh-color-tooltip-box-shadow);\n\n//drowdowns\n$dropdown-bg: $gray-600;\n$dropdown-link-color: $foreground;\n$dropdown-link-hover-color: $foreground;\n$dropdown-link-hover-bg: var(--dh-color-item-list-hover-bg);\n$dropdown-divider-bg: $gray-700;\n\n//context menus\n$contextmenu-bg: var(--dh-color-popover-bg);\n$contextmenu-color: var(--dh-color-text);\n$contextmenu-disabled-color: var(--dh-color-text-disabled);\n$contextmenu-keyboard-selected-bg: var(--dh-color-keyboard-selected-bg);\n$contextmenu-selected-bg: var(--dh-color-item-list-hover-bg);\n$contextmenu-selected-color: var(--dh-color-item-list-selected-fg);\n\n//hr\n$hr-border-color: var(--dh-color-hr);\n\n//links\n$link-color: $gray-400;\n$link-hover-color: $foreground;\n\n//progress-bar\n$progress-bg: $gray-600;\n$progress-border-radius: 1rem;\n\n// Set global options\n$enable-shadows: false;\n$enable-gradients: false;\n$enable-print-styles: false; //I don't think anyone should expect to \"print\" this app.\n\n// Transition times\n$transition: 0.15s;\n$transition-mid: 0.2s;\n$transition-long: 0.3s;\n$transition-slow: 0.6s;\n\n//form-validation icon, uses vsWarning icon encoded here as svg\n$form-feedback-icon-invalid-color: $danger;\n$form-feedback-icon-invalid: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none'%3E%3Cg fill='#{$form-feedback-icon-invalid-color}'%3E%3Cpath d='M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26 7.56 1zM8 2.28 2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E \"),\n  '#',\n  '%23'\n);\n\n// This section of variables is not consumed directly by DH, but they need to be\n// defined for sass to compile _variables\n$table-dark-bg: $gray-800;\n$table-dark-accent-bg: var(--dh-color-highlight-hover);\n$table-dark-hover-bg: var(--dh-color-highlight-active);\n$table-dark-border-color: $gray-700;\n$popover-bg: var(--dh-color-tooltip-bg);\n$popover-border-color: var(--dh-color-overlay-modal-bg);\n$popover-header-bg: #000;\n$popover-arrow-outer-color: var(--dh-color-dropshadow);\n$custom-range-thumb-active-bg: var(--dh-color-accent-1100);\n","@import '../../scss/custom.scss';\n\n$arrow-width: 5px;\n$animation-scale: 0.92;\n$animation-offset: 10px;\n\n.popper-container {\n  position: absolute;\n  z-index: 5000;\n\n  .spectrum-theme-provider {\n    max-height: inherit;\n  }\n}\n\n// Override popper.js inline positioning when a maximized popper should be\n// centered and fixed in the viewport.\n.popper-container.maximized {\n  position: fixed !important;\n  top: 50% !important;\n  left: 50% !important;\n  transform: translate(-50%, -50%) !important;\n}\n\n.popper.popper-tooltip {\n  --background-color: var(--dh-color-tooltip-bg);\n}\n\n.popper {\n  --background-color: var(--dh-color-popover-bg);\n\n  background: var(--background-color);\n  color: var(--dh-color-tooltip-fg);\n  border-radius: $border-radius;\n  box-shadow: $box-shadow;\n  transition:\n    visibility $transition,\n    opacity $transition;\n  pointer-events: none;\n  outline: 0;\n  max-height: inherit;\n\n  .popper-content {\n    position: relative;\n    max-height: inherit;\n\n    .tooltip-content {\n      text-align: center;\n      padding: $tooltip-padding-y $tooltip-padding-x;\n    }\n  }\n\n  .popper-arrow {\n    width: 0;\n    height: 0;\n    border-style: solid;\n    position: absolute;\n    margin: $arrow-width;\n    border-color: var(--background-color);\n  }\n}\n\n.popper.interactive {\n  pointer-events: auto;\n}\n\n.popper-transition-enter {\n  opacity: 0;\n  transition: none;\n}\n\n.popper-transition-exit {\n  opacity: 0;\n  transition: all $transition;\n}\n\n.popper-container[x-placement^='top']\n  > .spectrum-theme-provider\n  .popper-transition-enter,\n.popper-container[x-placement^='top']\n  > .spectrum-theme-provider\n  .popper-transition-exit {\n  transform: scale($animation-scale) translate(0, $animation-offset);\n}\n\n.popper-container[x-placement^='right']\n  > .spectrum-theme-provider\n  .popper-transition-enter,\n.popper-container[x-placement^='right']\n  > .spectrum-theme-provider\n  .popper-transition-exit {\n  transform: scale($animation-scale) translate(-$animation-offset, 0);\n}\n\n.popper-container[x-placement^='bottom']\n  > .spectrum-theme-provider\n  .popper-transition-enter,\n.popper-container[x-placement^='bottom']\n  > .spectrum-theme-provider\n  .popper-transition-exit {\n  transform: scale($animation-scale) translate(0, -$animation-offset);\n}\n\n.popper-container[x-placement^='left']\n  > .spectrum-theme-provider\n  .popper-transition-enter,\n.popper-container[x-placement^='left']\n  > .spectrum-theme-provider\n  .popper-transition-exit {\n  transform: scale($animation-scale) translate($animation-offset, 0);\n}\n\n.popper-container[x-placement^='top']\n  > .spectrum-theme-provider\n  .popper-transition-enter-active.popper,\n.popper-container[x-placement^='right']\n  > .spectrum-theme-provider\n  .popper-transition-enter-active.popper,\n.popper-container[x-placement^='bottom']\n  > .spectrum-theme-provider\n  .popper-transition-enter-active.popper,\n.popper-container[x-placement^='left']\n  > .spectrum-theme-provider\n  .popper-transition-enter-active.popper {\n  opacity: 1;\n  transform: none;\n  transition: all $transition ease-out;\n}\n\n.popper-container[x-placement^='top'] > .spectrum-theme-provider .popper {\n  margin-bottom: $arrow-width;\n\n  .popper-arrow {\n    border-width: $arrow-width $arrow-width 0 $arrow-width;\n    border-left-color: transparent;\n    border-right-color: transparent;\n    border-bottom-color: transparent;\n    bottom: -$arrow-width;\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n}\n\n.popper-container[x-placement^='bottom'] > .spectrum-theme-provider .popper {\n  margin-top: $arrow-width;\n\n  .popper-arrow {\n    border-width: 0 $arrow-width $arrow-width $arrow-width;\n    border-left-color: transparent;\n    border-right-color: transparent;\n    border-top-color: transparent;\n    top: -$arrow-width;\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n}\n\n.popper-container[x-placement^='right'] > .spectrum-theme-provider .popper {\n  margin-left: $arrow-width;\n\n  .popper-arrow {\n    border-width: $arrow-width $arrow-width $arrow-width 0;\n    border-left-color: transparent;\n    border-top-color: transparent;\n    border-bottom-color: transparent;\n    left: -$arrow-width;\n    margin-left: 0;\n    margin-right: 0;\n  }\n}\n\n.popper-container[x-placement^='left'] > .spectrum-theme-provider .popper {\n  margin-right: $arrow-width;\n\n  .popper-arrow {\n    border-width: $arrow-width 0 $arrow-width $arrow-width;\n    border-top-color: transparent;\n    border-right-color: transparent;\n    border-bottom-color: transparent;\n    right: -$arrow-width;\n    margin-left: 0;\n    margin-right: 0;\n  }\n}\n"]}

package/dist/popper/Popper.d.ts

@@ -21,6 +21,8 @@ interface PopperProps {
     children: React.ReactNode;
     options: PopperOptions;
     className: string;
+    containerClassName: string;
+    isMaximized: boolean;
     timeout: number;
     onEntered: () => void;
     onExited: () => void;
@@ -40,6 +42,8 @@ declare class Popper extends Component<PopperProps, PopperState> {
     static defaultProps: {
         options: {};
         className: string;
+        containerClassName: string;
+        isMaximized: boolean;
         timeout: 150;
         onEntered(): void;
         onExited(): void;
@@ -58,6 +62,7 @@ declare class Popper extends Component<PopperProps, PopperState> {
     container: React.RefObject<HTMLDivElement>;
     nodeRef: React.RefObject<HTMLDivElement>;
     rAF: number;
+    private updateContainerClassName;
     /** Goes through an element and it's parents until the first visible element is found */
     getVisibleElement(element: HTMLElement | null): HTMLElement | null;
     initPopper(): void;

package/dist/popper/Popper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../src/popper/Popper.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIzC,OAAO,QAAQ,EAAE,EAAE,KAAK,aAAa,EAAE,KAAK,eAAe,EAAE,MAAM,WAAW,CAAC;AAE/E,OAAO,eAAe,CAAC;AAmCvB,UAAU,WAAW;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,aAAa,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACtC,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,EAAE,eAAe,GAAG,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,WAAW;IACnB,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,QAAQ,GAAG,IAAI,CAAC;CACzB;AAED,cAAM,MAAO,SAAQ,SAAS,CAAC,WAAW,EAAE,WAAW,CAAC;IACtD,MAAM,CAAC,YAAY;;;;qBAIJ,IAAI;oBAGL,IAAI;kBAGN,IAAI;;;;;;;MASd;gBAEU,KAAK,EAAE,WAAW;IAsB9B,kBAAkB,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI;IAoBhD,oBAAoB,IAAI,IAAI;IAI5B,OAAO,EAAE,cAAc,CAAC;IAExB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAE3C,OAAO,kCAAqC;IAG5C,GAAG,EAAE,MAAM,CAAC;IAEZ,wFAAwF;IACxF,iBAAiB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,WAAW,GAAG,IAAI;IAYlE,UAAU,IAAI,IAAI;IAuElB,aAAa,CAAC,WAAW,UAAO,GAAG,IAAI;IAsBvC,IAAI,IAAI,IAAI;IASZ,IAAI,IAAI,IAAI;IAIZ,cAAc,IAAI,IAAI;IAKtB,UAAU,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,GAAG,IAAI;IAarC,WAAW,IAAI,IAAI;IAKnB,UAAU,IAAI,IAAI;IASlB,aAAa,IAAI,GAAG,CAAC,OAAO;IA4C5B,MAAM,IAAI,GAAG,CAAC,OAAO;CActB;AAED,eAAe,MAAM,CAAC;AACtB,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../src/popper/Popper.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIzC,OAAO,QAAQ,EAAE,EAAE,KAAK,aAAa,EAAE,KAAK,eAAe,EAAE,MAAM,WAAW,CAAC;AAE/E,OAAO,eAAe,CAAC;AAoCvB,UAAU,WAAW;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,aAAa,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,WAAW,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACtC,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,EAAE,eAAe,GAAG,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,WAAW;IACnB,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,QAAQ,GAAG,IAAI,CAAC;CACzB;AAED,cAAM,MAAO,SAAQ,SAAS,CAAC,WAAW,EAAE,WAAW,CAAC;IACtD,MAAM,CAAC,YAAY;;;;;;qBAMJ,IAAI;oBAGL,IAAI;kBAGN,IAAI;;;;;;;MASd;gBAEU,KAAK,EAAE,WAAW;IAsB9B,kBAAkB,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI;IA2BhD,oBAAoB,IAAI,IAAI;IAI5B,OAAO,EAAE,cAAc,CAAC;IAExB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAE3C,OAAO,kCAAqC;IAG5C,GAAG,EAAE,MAAM,CAAC;IAEZ,OAAO,CAAC,wBAAwB;IAahC,wFAAwF;IACxF,iBAAiB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,WAAW,GAAG,IAAI;IAYlE,UAAU,IAAI,IAAI;IAuElB,aAAa,CAAC,WAAW,UAAO,GAAG,IAAI;IAsBvC,IAAI,IAAI,IAAI;IASZ,IAAI,IAAI,IAAI;IAIZ,cAAc,IAAI,IAAI;IAKtB,UAAU,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,GAAG,IAAI;IAarC,WAAW,IAAI,IAAI;IAKnB,UAAU,IAAI,IAAI;IASlB,aAAa,IAAI,GAAG,CAAC,OAAO;IA4C5B,MAAM,IAAI,GAAG,CAAC,OAAO;CActB;AAED,eAAe,MAAM,CAAC;AACtB,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,CAAC"}

package/dist/popper/Popper.js

@@ -30,6 +30,7 @@ import "./Popper.css";
 import { SpectrumThemeProvider } from "../theme/SpectrumThemeProvider.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var POPPER_CLASS_NAME = 'popper';
+var POPPER_CONTAINER_CLASS_NAME = 'popper-container';
 var KEEP_IN_PARENT_OPTIONS = {
   placement: 'bottom-end',
   modifiers: {
@@ -64,7 +65,7 @@ class Popper extends Component {
     this.handleExit = this.handleExit.bind(this);
     this.handleBlur = this.handleBlur.bind(this);
     this.element = document.createElement('div');
-    this.element.className = 'popper-container';
+    this.updateContainerClassName(props.containerClassName, props.isMaximized);
     this.container = /*#__PURE__*/React.createRef();
 
     // cancelAnimationFrame does nothing if the handle isn't recognized
@@ -80,11 +81,16 @@ class Popper extends Component {
   }
   componentDidUpdate(prevProps) {
     var {
-      isShown
+      isShown,
+      containerClassName,
+      isMaximized
     } = this.props;
     var {
       popper
     } = this.state;
+    if (prevProps.containerClassName !== containerClassName || prevProps.isMaximized !== isMaximized) {
+      this.updateContainerClassName(containerClassName, isMaximized);
+    }
     if (prevProps.isShown !== isShown) {
       cancelAnimationFrame(this.rAF);
       this.rAF = window.requestAnimationFrame(() => {
@@ -102,6 +108,12 @@ class Popper extends Component {
   componentWillUnmount() {
     this.destroyPopper(false);
   }
+  updateContainerClassName(containerClassName, isMaximized) {
+    this.element.className = classNames(POPPER_CONTAINER_CLASS_NAME, containerClassName, {
+      maximized: isMaximized
+    });
+  }
+
   /** Goes through an element and it's parents until the first visible element is found */
   getVisibleElement(element) {
     if (element == null || element.clientHeight > 0 || element.clientWidth > 0) {
@@ -314,6 +326,8 @@ class Popper extends Component {
 _defineProperty(Popper, "defaultProps", {
   options: {},
   className: '',
+  containerClassName: '',
+  isMaximized: false,
   timeout: ThemeExport.transitionMs,
   onEntered() {
     // no-op

package/dist/popper/Popper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popper.js","names":["React","Component","ReactDOM","flushSync","classNames","CSSTransition","PopperJs","ThemeExport","SpectrumThemeProvider","jsx","_jsx","jsxs","_jsxs","POPPER_CLASS_NAME","KEEP_IN_PARENT_OPTIONS","placement","modifiers","preventOverflow","boundariesElement","fn","data","options","_PopperJs$Defaults$mo","_PopperJs$Defaults$mo2","modified","Defaults","call","styles","maxHeight","concat","document","documentElement","clientHeight","offsets","popper","top","padding","flip","enabled","Popper","constructor","props","_defineProperty","createRef","handleEnter","bind","handleExit","handleBlur","element","createElement","className","container","rAF","isShown","state","show","componentDidUpdate","prevProps","cancelAnimationFrame","window","requestAnimationFrame","hide","scheduleUpdate","componentWillUnmount","destroyPopper","getVisibleElement","clientWidth","parentElement","initPopper","_defaultOptions$modif","_optionsProp$modifier","statePopper","closeOnBlur","referenceObject","current","optionsProp","keepInParent","defaultOptions","_objectSpread","body","appendChild","parent","popperEl","querySelector","HTMLElement","contains","activeElement","focus","setState","updateState","arguments","length","undefined","destroy","removeChild","e","onBlur","relatedTarget","onEntered","onExited","renderContent","children","timeout","interactive","isPortal","in","nodeRef","ref","onClick","stopPropagation","onKeyDown","key","tabIndex","role","render","dataTestId","style","display","createPortal","transitionMs"],"sources":["../../src/popper/Popper.tsx"],"sourcesContent":["/**\n *  A component for creating popover dialogs. Only requires child element.\n *\n * <Popper\n *   options={popperOptions}\n *   className=\"whatever\"\n *   onEntered={this.handleEnter}\n *   onExited={this.handleExit}\n *   closeOnBlur // if you want dialog to self close, on click outside\n *   interactive // if popper contents will be interactable\n *   isShown={variable} // controls if its shown or not,\n *   ref={this.popper} // or via ref and this.popper.show() or this.popper.hide()\n *  >\n *   <ChildContent />\n * </Popper>\n */\n\nimport React, { Component } from 'react';\nimport ReactDOM, { flushSync } from 'react-dom';\nimport classNames from 'classnames';\nimport { CSSTransition } from 'react-transition-group';\nimport PopperJs, { type PopperOptions, type ReferenceObject } from 'popper.js';\nimport ThemeExport from '../ThemeExport';\nimport './Popper.scss';\nimport { SpectrumThemeProvider } from '../theme/SpectrumThemeProvider';\n\nconst POPPER_CLASS_NAME = 'popper';\n\nconst KEEP_IN_PARENT_OPTIONS: PopperOptions = {\n  placement: 'bottom-end',\n  modifiers: {\n    preventOverflow: {\n      boundariesElement: 'scrollParent',\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      fn: (data, options: any) => {\n        const modified = PopperJs.Defaults.modifiers?.preventOverflow?.fn?.(\n          data,\n          options\n        );\n\n        if (modified == null) {\n          return data;\n        }\n\n        modified.styles.maxHeight = `${\n          document.documentElement.clientHeight -\n          data.offsets.popper.top -\n          2 * options.padding // Double padding because there is top and bottom to account for\n        }px`;\n        return modified ?? data;\n      },\n    },\n    flip: {\n      enabled: false,\n    },\n  },\n};\n\ninterface PopperProps {\n  children: React.ReactNode;\n  options: PopperOptions;\n  className: string;\n  timeout: number;\n  onEntered: () => void;\n  onExited: () => void;\n  onBlur: (e: React.FocusEvent) => void;\n  isShown: boolean;\n  closeOnBlur: boolean;\n  interactive: boolean;\n  keepInParent: boolean;\n  referenceObject: ReferenceObject | null;\n  'data-testid'?: string;\n}\n\ninterface PopperState {\n  show: boolean;\n  popper: PopperJs | null;\n}\n\nclass Popper extends Component<PopperProps, PopperState> {\n  static defaultProps = {\n    options: {},\n    className: '',\n    timeout: ThemeExport.transitionMs,\n    onEntered(): void {\n      // no-op\n    },\n    onExited(): void {\n      // no-op\n    },\n    onBlur(): void {\n      // no-op\n    },\n    isShown: false,\n    interactive: false,\n    closeOnBlur: false,\n    keepInParent: false,\n    referenceObject: null,\n    'data-testid': undefined,\n  };\n\n  constructor(props: PopperProps) {\n    super(props);\n\n    this.handleEnter = this.handleEnter.bind(this);\n    this.handleExit = this.handleExit.bind(this);\n    this.handleBlur = this.handleBlur.bind(this);\n    this.element = document.createElement('div');\n    this.element.className = 'popper-container';\n    this.container = React.createRef<HTMLDivElement>();\n\n    // cancelAnimationFrame does nothing if the handle isn't recognized\n    // requestAnimationFrame provides a non-zero number, so 0 as a default should be safe\n    this.rAF = 0;\n\n    const { isShown } = this.props;\n\n    this.state = {\n      show: isShown,\n      popper: null,\n    };\n  }\n\n  componentDidUpdate(prevProps: PopperProps): void {\n    const { isShown } = this.props;\n    const { popper } = this.state;\n\n    if (prevProps.isShown !== isShown) {\n      cancelAnimationFrame(this.rAF);\n      this.rAF = window.requestAnimationFrame(() => {\n        if (isShown) {\n          this.show();\n        } else {\n          this.hide();\n        }\n      });\n    }\n\n    if (popper) {\n      popper.scheduleUpdate();\n    }\n  }\n\n  componentWillUnmount(): void {\n    this.destroyPopper(false);\n  }\n\n  element: HTMLDivElement;\n\n  container: React.RefObject<HTMLDivElement>;\n\n  nodeRef = React.createRef<HTMLDivElement>();\n\n  // This is the request animation frame handle number\n  rAF: number;\n\n  /** Goes through an element and it's parents until the first visible element is found */\n  getVisibleElement(element: HTMLElement | null): HTMLElement | null {\n    if (\n      element == null ||\n      element.clientHeight > 0 ||\n      element.clientWidth > 0\n    ) {\n      return element;\n    }\n\n    return this.getVisibleElement(element.parentElement);\n  }\n\n  initPopper(): void {\n    const { popper: statePopper } = this.state;\n    const { closeOnBlur, referenceObject } = this.props;\n\n    if (statePopper) {\n      return;\n    }\n\n    if (this.container.current === null) {\n      return;\n    }\n\n    const { options: optionsProp, keepInParent } = this.props;\n    const defaultOptions = keepInParent\n      ? KEEP_IN_PARENT_OPTIONS\n      : ({\n          placement: 'auto',\n          modifiers: { preventOverflow: { boundariesElement: 'viewport' } },\n        } satisfies PopperOptions);\n\n    const options = {\n      ...defaultOptions,\n      ...optionsProp,\n      modifiers: {\n        ...defaultOptions.modifiers,\n        ...optionsProp.modifiers,\n        preventOverflow: {\n          ...defaultOptions.modifiers?.preventOverflow,\n          ...optionsProp.modifiers?.preventOverflow,\n        },\n      },\n    } satisfies PopperOptions;\n\n    document.body.appendChild(this.element);\n\n    let parent = this.getVisibleElement(this.container.current);\n    if (parent == null) {\n      parent = this.container.current;\n    }\n\n    const popper = new PopperJs(\n      referenceObject || parent,\n      this.element,\n      options\n    );\n    popper.scheduleUpdate();\n\n    // delayed due to scheduleUpdate\n    cancelAnimationFrame(this.rAF);\n    this.rAF = window.requestAnimationFrame(() => {\n      // If the current focus is not on the .popper or one of its descendants,\n      // set the focus to the .popper element. This is necessary for close on\n      // blur to work.\n      if (closeOnBlur) {\n        const popperEl = this.element.querySelector(`.${POPPER_CLASS_NAME}`);\n\n        if (\n          popperEl instanceof HTMLElement &&\n          !popperEl.contains(document.activeElement)\n        ) {\n          popperEl.focus();\n        }\n      }\n    });\n\n    // Needed to make the animation work\n    flushSync(() => {\n      this.setState({ popper });\n    });\n  }\n\n  destroyPopper(updateState = true): void {\n    cancelAnimationFrame(this.rAF);\n\n    const { popper } = this.state;\n    if (!popper) {\n      return;\n    }\n\n    popper.destroy();\n\n    // If component is exiting and unmounted in\n    // the same frame, destroy can be called twice.\n    // Check to make sure removeChild isn't called twice.\n    if (document.body.contains(this.element)) {\n      document.body.removeChild(this.element);\n    }\n\n    if (updateState) {\n      this.setState({ popper: null });\n    }\n  }\n\n  show(): void {\n    this.initPopper();\n\n    // Needed to make the animation work\n    flushSync(() => {\n      this.setState({ show: true });\n    });\n  }\n\n  hide(): void {\n    this.setState({ show: false });\n  }\n\n  scheduleUpdate(): void {\n    const { popper } = this.state;\n    if (popper) popper.scheduleUpdate();\n  }\n\n  handleBlur(e: React.FocusEvent): void {\n    const { closeOnBlur, onBlur } = this.props;\n    if (!(e.relatedTarget instanceof HTMLElement)) {\n      return;\n    }\n    if (!this.element.contains(e.relatedTarget)) {\n      onBlur?.(e);\n      if (closeOnBlur) {\n        this.hide();\n      }\n    }\n  }\n\n  handleEnter(): void {\n    const { onEntered } = this.props;\n    onEntered(); // trigger any parent component waiting for enter handler\n  }\n\n  handleExit(): void {\n    const { onExited } = this.props;\n    const { show } = this.state;\n    if (!show) {\n      this.destroyPopper();\n    }\n    onExited(); // trigger any parent component waiting for exited handler\n  }\n\n  renderContent(): JSX.Element {\n    const { className, children, timeout, interactive, closeOnBlur } =\n      this.props;\n    const { show } = this.state;\n\n    return (\n      <SpectrumThemeProvider isPortal>\n        <CSSTransition\n          in={show}\n          timeout={timeout}\n          classNames=\"popper-transition\"\n          onEntered={this.handleEnter}\n          onExited={this.handleExit}\n          nodeRef={this.nodeRef}\n        >\n          <div\n            ref={this.nodeRef}\n            onClick={e => {\n              // stop click events from escaping popper\n              e.stopPropagation();\n            }}\n            onKeyDown={e => {\n              if (e.key === 'Escape') this.hide();\n            }}\n            className={classNames(\n              POPPER_CLASS_NAME,\n              { interactive },\n              className\n            )}\n            onBlur={this.handleBlur}\n            tabIndex={closeOnBlur ? -1 : undefined}\n            role=\"presentation\"\n          >\n            <div className=\"popper-content\">\n              {children}\n              {/* eslint-disable-next-line react/no-unknown-property */}\n              <div className=\"popper-arrow\" x-arrow=\"\" />\n            </div>\n          </div>\n        </CSSTransition>\n      </SpectrumThemeProvider>\n    );\n  }\n\n  render(): JSX.Element {\n    const { popper } = this.state;\n    const { 'data-testid': dataTestId } = this.props;\n    return (\n      <div\n        className=\"popper-parent-container\"\n        ref={this.container}\n        style={{ display: 'none' }}\n        data-testid={dataTestId}\n      >\n        {popper && ReactDOM.createPortal(this.renderContent(), this.element)}\n      </div>\n    );\n  }\n}\n\nexport default Popper;\nexport type { PopperOptions, ReferenceObject };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Popper.js","names":["React","Component","ReactDOM","flushSync","classNames","CSSTransition","PopperJs","ThemeExport","SpectrumThemeProvider","jsx","_jsx","jsxs","_jsxs","POPPER_CLASS_NAME","POPPER_CONTAINER_CLASS_NAME","KEEP_IN_PARENT_OPTIONS","placement","modifiers","preventOverflow","boundariesElement","fn","data","options","_PopperJs$Defaults$mo","_PopperJs$Defaults$mo2","modified","Defaults","call","styles","maxHeight","concat","document","documentElement","clientHeight","offsets","popper","top","padding","flip","enabled","Popper","constructor","props","_defineProperty","createRef","handleEnter","bind","handleExit","handleBlur","element","createElement","updateContainerClassName","containerClassName","isMaximized","container","rAF","isShown","state","show","componentDidUpdate","prevProps","cancelAnimationFrame","window","requestAnimationFrame","hide","scheduleUpdate","componentWillUnmount","destroyPopper","className","maximized","getVisibleElement","clientWidth","parentElement","initPopper","_defaultOptions$modif","_optionsProp$modifier","statePopper","closeOnBlur","referenceObject","current","optionsProp","keepInParent","defaultOptions","_objectSpread","body","appendChild","parent","popperEl","querySelector","HTMLElement","contains","activeElement","focus","setState","updateState","arguments","length","undefined","destroy","removeChild","e","onBlur","relatedTarget","onEntered","onExited","renderContent","children","timeout","interactive","isPortal","in","nodeRef","ref","onClick","stopPropagation","onKeyDown","key","tabIndex","role","render","dataTestId","style","display","createPortal","transitionMs"],"sources":["../../src/popper/Popper.tsx"],"sourcesContent":["/**\n *  A component for creating popover dialogs. Only requires child element.\n *\n * <Popper\n *   options={popperOptions}\n *   className=\"whatever\"\n *   onEntered={this.handleEnter}\n *   onExited={this.handleExit}\n *   closeOnBlur // if you want dialog to self close, on click outside\n *   interactive // if popper contents will be interactable\n *   isShown={variable} // controls if its shown or not,\n *   ref={this.popper} // or via ref and this.popper.show() or this.popper.hide()\n *  >\n *   <ChildContent />\n * </Popper>\n */\n\nimport React, { Component } from 'react';\nimport ReactDOM, { flushSync } from 'react-dom';\nimport classNames from 'classnames';\nimport { CSSTransition } from 'react-transition-group';\nimport PopperJs, { type PopperOptions, type ReferenceObject } from 'popper.js';\nimport ThemeExport from '../ThemeExport';\nimport './Popper.scss';\nimport { SpectrumThemeProvider } from '../theme/SpectrumThemeProvider';\n\nconst POPPER_CLASS_NAME = 'popper';\nconst POPPER_CONTAINER_CLASS_NAME = 'popper-container';\n\nconst KEEP_IN_PARENT_OPTIONS: PopperOptions = {\n  placement: 'bottom-end',\n  modifiers: {\n    preventOverflow: {\n      boundariesElement: 'scrollParent',\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      fn: (data, options: any) => {\n        const modified = PopperJs.Defaults.modifiers?.preventOverflow?.fn?.(\n          data,\n          options\n        );\n\n        if (modified == null) {\n          return data;\n        }\n\n        modified.styles.maxHeight = `${\n          document.documentElement.clientHeight -\n          data.offsets.popper.top -\n          2 * options.padding // Double padding because there is top and bottom to account for\n        }px`;\n        return modified ?? data;\n      },\n    },\n    flip: {\n      enabled: false,\n    },\n  },\n};\n\ninterface PopperProps {\n  children: React.ReactNode;\n  options: PopperOptions;\n  className: string;\n  containerClassName: string;\n  isMaximized: boolean;\n  timeout: number;\n  onEntered: () => void;\n  onExited: () => void;\n  onBlur: (e: React.FocusEvent) => void;\n  isShown: boolean;\n  closeOnBlur: boolean;\n  interactive: boolean;\n  keepInParent: boolean;\n  referenceObject: ReferenceObject | null;\n  'data-testid'?: string;\n}\n\ninterface PopperState {\n  show: boolean;\n  popper: PopperJs | null;\n}\n\nclass Popper extends Component<PopperProps, PopperState> {\n  static defaultProps = {\n    options: {},\n    className: '',\n    containerClassName: '',\n    isMaximized: false,\n    timeout: ThemeExport.transitionMs,\n    onEntered(): void {\n      // no-op\n    },\n    onExited(): void {\n      // no-op\n    },\n    onBlur(): void {\n      // no-op\n    },\n    isShown: false,\n    interactive: false,\n    closeOnBlur: false,\n    keepInParent: false,\n    referenceObject: null,\n    'data-testid': undefined,\n  };\n\n  constructor(props: PopperProps) {\n    super(props);\n\n    this.handleEnter = this.handleEnter.bind(this);\n    this.handleExit = this.handleExit.bind(this);\n    this.handleBlur = this.handleBlur.bind(this);\n    this.element = document.createElement('div');\n    this.updateContainerClassName(props.containerClassName, props.isMaximized);\n    this.container = React.createRef<HTMLDivElement>();\n\n    // cancelAnimationFrame does nothing if the handle isn't recognized\n    // requestAnimationFrame provides a non-zero number, so 0 as a default should be safe\n    this.rAF = 0;\n\n    const { isShown } = this.props;\n\n    this.state = {\n      show: isShown,\n      popper: null,\n    };\n  }\n\n  componentDidUpdate(prevProps: PopperProps): void {\n    const { isShown, containerClassName, isMaximized } = this.props;\n    const { popper } = this.state;\n\n    if (\n      prevProps.containerClassName !== containerClassName ||\n      prevProps.isMaximized !== isMaximized\n    ) {\n      this.updateContainerClassName(containerClassName, isMaximized);\n    }\n\n    if (prevProps.isShown !== isShown) {\n      cancelAnimationFrame(this.rAF);\n      this.rAF = window.requestAnimationFrame(() => {\n        if (isShown) {\n          this.show();\n        } else {\n          this.hide();\n        }\n      });\n    }\n\n    if (popper) {\n      popper.scheduleUpdate();\n    }\n  }\n\n  componentWillUnmount(): void {\n    this.destroyPopper(false);\n  }\n\n  element: HTMLDivElement;\n\n  container: React.RefObject<HTMLDivElement>;\n\n  nodeRef = React.createRef<HTMLDivElement>();\n\n  // This is the request animation frame handle number\n  rAF: number;\n\n  private updateContainerClassName(\n    containerClassName: string,\n    isMaximized: boolean\n  ): void {\n    this.element.className = classNames(\n      POPPER_CONTAINER_CLASS_NAME,\n      containerClassName,\n      {\n        maximized: isMaximized,\n      }\n    );\n  }\n\n  /** Goes through an element and it's parents until the first visible element is found */\n  getVisibleElement(element: HTMLElement | null): HTMLElement | null {\n    if (\n      element == null ||\n      element.clientHeight > 0 ||\n      element.clientWidth > 0\n    ) {\n      return element;\n    }\n\n    return this.getVisibleElement(element.parentElement);\n  }\n\n  initPopper(): void {\n    const { popper: statePopper } = this.state;\n    const { closeOnBlur, referenceObject } = this.props;\n\n    if (statePopper) {\n      return;\n    }\n\n    if (this.container.current === null) {\n      return;\n    }\n\n    const { options: optionsProp, keepInParent } = this.props;\n    const defaultOptions = keepInParent\n      ? KEEP_IN_PARENT_OPTIONS\n      : ({\n          placement: 'auto',\n          modifiers: { preventOverflow: { boundariesElement: 'viewport' } },\n        } satisfies PopperOptions);\n\n    const options = {\n      ...defaultOptions,\n      ...optionsProp,\n      modifiers: {\n        ...defaultOptions.modifiers,\n        ...optionsProp.modifiers,\n        preventOverflow: {\n          ...defaultOptions.modifiers?.preventOverflow,\n          ...optionsProp.modifiers?.preventOverflow,\n        },\n      },\n    } satisfies PopperOptions;\n\n    document.body.appendChild(this.element);\n\n    let parent = this.getVisibleElement(this.container.current);\n    if (parent == null) {\n      parent = this.container.current;\n    }\n\n    const popper = new PopperJs(\n      referenceObject || parent,\n      this.element,\n      options\n    );\n    popper.scheduleUpdate();\n\n    // delayed due to scheduleUpdate\n    cancelAnimationFrame(this.rAF);\n    this.rAF = window.requestAnimationFrame(() => {\n      // If the current focus is not on the .popper or one of its descendants,\n      // set the focus to the .popper element. This is necessary for close on\n      // blur to work.\n      if (closeOnBlur) {\n        const popperEl = this.element.querySelector(`.${POPPER_CLASS_NAME}`);\n\n        if (\n          popperEl instanceof HTMLElement &&\n          !popperEl.contains(document.activeElement)\n        ) {\n          popperEl.focus();\n        }\n      }\n    });\n\n    // Needed to make the animation work\n    flushSync(() => {\n      this.setState({ popper });\n    });\n  }\n\n  destroyPopper(updateState = true): void {\n    cancelAnimationFrame(this.rAF);\n\n    const { popper } = this.state;\n    if (!popper) {\n      return;\n    }\n\n    popper.destroy();\n\n    // If component is exiting and unmounted in\n    // the same frame, destroy can be called twice.\n    // Check to make sure removeChild isn't called twice.\n    if (document.body.contains(this.element)) {\n      document.body.removeChild(this.element);\n    }\n\n    if (updateState) {\n      this.setState({ popper: null });\n    }\n  }\n\n  show(): void {\n    this.initPopper();\n\n    // Needed to make the animation work\n    flushSync(() => {\n      this.setState({ show: true });\n    });\n  }\n\n  hide(): void {\n    this.setState({ show: false });\n  }\n\n  scheduleUpdate(): void {\n    const { popper } = this.state;\n    if (popper) popper.scheduleUpdate();\n  }\n\n  handleBlur(e: React.FocusEvent): void {\n    const { closeOnBlur, onBlur } = this.props;\n    if (!(e.relatedTarget instanceof HTMLElement)) {\n      return;\n    }\n    if (!this.element.contains(e.relatedTarget)) {\n      onBlur?.(e);\n      if (closeOnBlur) {\n        this.hide();\n      }\n    }\n  }\n\n  handleEnter(): void {\n    const { onEntered } = this.props;\n    onEntered(); // trigger any parent component waiting for enter handler\n  }\n\n  handleExit(): void {\n    const { onExited } = this.props;\n    const { show } = this.state;\n    if (!show) {\n      this.destroyPopper();\n    }\n    onExited(); // trigger any parent component waiting for exited handler\n  }\n\n  renderContent(): JSX.Element {\n    const { className, children, timeout, interactive, closeOnBlur } =\n      this.props;\n    const { show } = this.state;\n\n    return (\n      <SpectrumThemeProvider isPortal>\n        <CSSTransition\n          in={show}\n          timeout={timeout}\n          classNames=\"popper-transition\"\n          onEntered={this.handleEnter}\n          onExited={this.handleExit}\n          nodeRef={this.nodeRef}\n        >\n          <div\n            ref={this.nodeRef}\n            onClick={e => {\n              // stop click events from escaping popper\n              e.stopPropagation();\n            }}\n            onKeyDown={e => {\n              if (e.key === 'Escape') this.hide();\n            }}\n            className={classNames(\n              POPPER_CLASS_NAME,\n              { interactive },\n              className\n            )}\n            onBlur={this.handleBlur}\n            tabIndex={closeOnBlur ? -1 : undefined}\n            role=\"presentation\"\n          >\n            <div className=\"popper-content\">\n              {children}\n              {/* eslint-disable-next-line react/no-unknown-property */}\n              <div className=\"popper-arrow\" x-arrow=\"\" />\n            </div>\n          </div>\n        </CSSTransition>\n      </SpectrumThemeProvider>\n    );\n  }\n\n  render(): JSX.Element {\n    const { popper } = this.state;\n    const { 'data-testid': dataTestId } = this.props;\n    return (\n      <div\n        className=\"popper-parent-container\"\n        ref={this.container}\n        style={{ display: 'none' }}\n        data-testid={dataTestId}\n      >\n        {popper && ReactDOM.createPortal(this.renderContent(), this.element)}\n      </div>\n    );\n  }\n}\n\nexport default Popper;\nexport type { PopperOptions, ReferenceObject };\n"],"mappings":";;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AACxC,OAAOC,QAAQ,IAAIC,SAAS,QAAQ,WAAW;AAC/C,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,aAAa,QAAQ,wBAAwB;AACtD,OAAOC,QAAQ,MAAoD,WAAW;AAAC,OACxEC,WAAW;AAAA;AAAA,SAETC,qBAAqB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE9B,IAAMC,iBAAiB,GAAG,QAAQ;AAClC,IAAMC,2BAA2B,GAAG,kBAAkB;AAEtD,IAAMC,sBAAqC,GAAG;EAC5CC,SAAS,EAAE,YAAY;EACvBC,SAAS,EAAE;IACTC,eAAe,EAAE;MACfC,iBAAiB,EAAE,cAAc;MACjC;MACAC,EAAE,EAAEA,CAACC,IAAI,EAAEC,OAAY,KAAK;QAAA,IAAAC,qBAAA,EAAAC,sBAAA;QAC1B,IAAMC,QAAQ,IAAAF,qBAAA,GAAGjB,QAAQ,CAACoB,QAAQ,CAACT,SAAS,cAAAM,qBAAA,gBAAAA,qBAAA,GAA3BA,qBAAA,CAA6BL,eAAe,cAAAK,qBAAA,gBAAAC,sBAAA,GAA5CD,qBAAA,CAA8CH,EAAE,cAAAI,sBAAA,uBAAhDA,sBAAA,CAAAG,IAAA,CAAAJ,qBAAA,EACfF,IAAI,EACJC,OACF,CAAC;QAED,IAAIG,QAAQ,IAAI,IAAI,EAAE;UACpB,OAAOJ,IAAI;QACb;QAEAI,QAAQ,CAACG,MAAM,CAACC,SAAS,MAAAC,MAAA,CACvBC,QAAQ,CAACC,eAAe,CAACC,YAAY,GACrCZ,IAAI,CAACa,OAAO,CAACC,MAAM,CAACC,GAAG,GACvB,CAAC,GAAGd,OAAO,CAACe,OAAO,CAAC;QAAA,OAClB;QACJ,OAAOZ,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAIJ,IAAI;MACzB;IACF,CAAC;IACDiB,IAAI,EAAE;MACJC,OAAO,EAAE;IACX;EACF;AACF,CAAC;AAyBD,MAAMC,MAAM,SAASvC,SAAS,CAA2B;EAwBvDwC,WAAWA,CAACC,KAAkB,EAAE;IAC9B,KAAK,CAACA,KAAK,CAAC;IAACC,eAAA;IAAAA,eAAA;IAAAA,eAAA,+BAwDL3C,KAAK,CAAC4C,SAAS,CAAiB,CAAC;IAE3C;IAAAD,eAAA;IAxDE,IAAI,CAACE,WAAW,GAAG,IAAI,CAACA,WAAW,CAACC,IAAI,CAAC,IAAI,CAAC;IAC9C,IAAI,CAACC,UAAU,GAAG,IAAI,CAACA,UAAU,CAACD,IAAI,CAAC,IAAI,CAAC;IAC5C,IAAI,CAACE,UAAU,GAAG,IAAI,CAACA,UAAU,CAACF,IAAI,CAAC,IAAI,CAAC;IAC5C,IAAI,CAACG,OAAO,GAAGlB,QAAQ,CAACmB,aAAa,CAAC,KAAK,CAAC;IAC5C,IAAI,CAACC,wBAAwB,CAACT,KAAK,CAACU,kBAAkB,EAAEV,KAAK,CAACW,WAAW,CAAC;IAC1E,IAAI,CAACC,SAAS,gBAAGtD,KAAK,CAAC4C,SAAS,CAAiB,CAAC;;IAElD;IACA;IACA,IAAI,CAACW,GAAG,GAAG,CAAC;IAEZ,IAAM;MAAEC;IAAQ,CAAC,GAAG,IAAI,CAACd,KAAK;IAE9B,IAAI,CAACe,KAAK,GAAG;MACXC,IAAI,EAAEF,OAAO;MACbrB,MAAM,EAAE;IACV,CAAC;EACH;EAEAwB,kBAAkBA,CAACC,SAAsB,EAAQ;IAC/C,IAAM;MAAEJ,OAAO;MAAEJ,kBAAkB;MAAEC;IAAY,CAAC,GAAG,IAAI,CAACX,KAAK;IAC/D,IAAM;MAAEP;IAAO,CAAC,GAAG,IAAI,CAACsB,KAAK;IAE7B,IACEG,SAAS,CAACR,kBAAkB,KAAKA,kBAAkB,IACnDQ,SAAS,CAACP,WAAW,KAAKA,WAAW,EACrC;MACA,IAAI,CAACF,wBAAwB,CAACC,kBAAkB,EAAEC,WAAW,CAAC;IAChE;IAEA,IAAIO,SAAS,CAACJ,OAAO,KAAKA,OAAO,EAAE;MACjCK,oBAAoB,CAAC,IAAI,CAACN,GAAG,CAAC;MAC9B,IAAI,CAACA,GAAG,GAAGO,MAAM,CAACC,qBAAqB,CAAC,MAAM;QAC5C,IAAIP,OAAO,EAAE;UACX,IAAI,CAACE,IAAI,CAAC,CAAC;QACb,CAAC,MAAM;UACL,IAAI,CAACM,IAAI,CAAC,CAAC;QACb;MACF,CAAC,CAAC;IACJ;IAEA,IAAI7B,MAAM,EAAE;MACVA,MAAM,CAAC8B,cAAc,CAAC,CAAC;IACzB;EACF;EAEAC,oBAAoBA,CAAA,EAAS;IAC3B,IAAI,CAACC,aAAa,CAAC,KAAK,CAAC;EAC3B;EAWQhB,wBAAwBA,CAC9BC,kBAA0B,EAC1BC,WAAoB,EACd;IACN,IAAI,CAACJ,OAAO,CAACmB,SAAS,GAAGhE,UAAU,CACjCU,2BAA2B,EAC3BsC,kBAAkB,EAClB;MACEiB,SAAS,EAAEhB;IACb,CACF,CAAC;EACH;;EAEA;EACAiB,iBAAiBA,CAACrB,OAA2B,EAAsB;IACjE,IACEA,OAAO,IAAI,IAAI,IACfA,OAAO,CAAChB,YAAY,GAAG,CAAC,IACxBgB,OAAO,CAACsB,WAAW,GAAG,CAAC,EACvB;MACA,OAAOtB,OAAO;IAChB;IAEA,OAAO,IAAI,CAACqB,iBAAiB,CAACrB,OAAO,CAACuB,aAAa,CAAC;EACtD;EAEAC,UAAUA,CAAA,EAAS;IAAA,IAAAC,qBAAA,EAAAC,qBAAA;IACjB,IAAM;MAAExC,MAAM,EAAEyC;IAAY,CAAC,GAAG,IAAI,CAACnB,KAAK;IAC1C,IAAM;MAAEoB,WAAW;MAAEC;IAAgB,CAAC,GAAG,IAAI,CAACpC,KAAK;IAEnD,IAAIkC,WAAW,EAAE;MACf;IACF;IAEA,IAAI,IAAI,CAACtB,SAAS,CAACyB,OAAO,KAAK,IAAI,EAAE;MACnC;IACF;IAEA,IAAM;MAAEzD,OAAO,EAAE0D,WAAW;MAAEC;IAAa,CAAC,GAAG,IAAI,CAACvC,KAAK;IACzD,IAAMwC,cAAc,GAAGD,YAAY,GAC/BlE,sBAAsB,GACrB;MACCC,SAAS,EAAE,MAAM;MACjBC,SAAS,EAAE;QAAEC,eAAe,EAAE;UAAEC,iBAAiB,EAAE;QAAW;MAAE;IAClE,CAA0B;IAE9B,IAAMG,OAAO,GAAA6D,aAAA,CAAAA,aAAA,CAAAA,aAAA,KACRD,cAAc,GACdF,WAAW;MACd/D,SAAS,EAAAkE,aAAA,CAAAA,aAAA,CAAAA,aAAA,KACJD,cAAc,CAACjE,SAAS,GACxB+D,WAAW,CAAC/D,SAAS;QACxBC,eAAe,EAAAiE,aAAA,CAAAA,aAAA,MAAAT,qBAAA,GACVQ,cAAc,CAACjE,SAAS,cAAAyD,qBAAA,uBAAxBA,qBAAA,CAA0BxD,eAAe,IAAAyD,qBAAA,GACzCK,WAAW,CAAC/D,SAAS,cAAA0D,qBAAA,uBAArBA,qBAAA,CAAuBzD,eAAe;MAC1C;IACF,EACsB;IAEzBa,QAAQ,CAACqD,IAAI,CAACC,WAAW,CAAC,IAAI,CAACpC,OAAO,CAAC;IAEvC,IAAIqC,MAAM,GAAG,IAAI,CAAChB,iBAAiB,CAAC,IAAI,CAAChB,SAAS,CAACyB,OAAO,CAAC;IAC3D,IAAIO,MAAM,IAAI,IAAI,EAAE;MAClBA,MAAM,GAAG,IAAI,CAAChC,SAAS,CAACyB,OAAO;IACjC;IAEA,IAAM5C,MAAM,GAAG,IAAI7B,QAAQ,CACzBwE,eAAe,IAAIQ,MAAM,EACzB,IAAI,CAACrC,OAAO,EACZ3B,OACF,CAAC;IACDa,MAAM,CAAC8B,cAAc,CAAC,CAAC;;IAEvB;IACAJ,oBAAoB,CAAC,IAAI,CAACN,GAAG,CAAC;IAC9B,IAAI,CAACA,GAAG,GAAGO,MAAM,CAACC,qBAAqB,CAAC,MAAM;MAC5C;MACA;MACA;MACA,IAAIc,WAAW,EAAE;QACf,IAAMU,QAAQ,GAAG,IAAI,CAACtC,OAAO,CAACuC,aAAa,KAAA1D,MAAA,CAAKjB,iBAAiB,CAAE,CAAC;QAEpE,IACE0E,QAAQ,YAAYE,WAAW,IAC/B,CAACF,QAAQ,CAACG,QAAQ,CAAC3D,QAAQ,CAAC4D,aAAa,CAAC,EAC1C;UACAJ,QAAQ,CAACK,KAAK,CAAC,CAAC;QAClB;MACF;IACF,CAAC,CAAC;;IAEF;IACAzF,SAAS,CAAC,MAAM;MACd,IAAI,CAAC0F,QAAQ,CAAC;QAAE1D;MAAO,CAAC,CAAC;IAC3B,CAAC,CAAC;EACJ;EAEAgC,aAAaA,CAAA,EAA2B;IAAA,IAA1B2B,WAAW,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,IAAI;IAC9BlC,oBAAoB,CAAC,IAAI,CAACN,GAAG,CAAC;IAE9B,IAAM;MAAEpB;IAAO,CAAC,GAAG,IAAI,CAACsB,KAAK;IAC7B,IAAI,CAACtB,MAAM,EAAE;MACX;IACF;IAEAA,MAAM,CAAC+D,OAAO,CAAC,CAAC;;IAEhB;IACA;IACA;IACA,IAAInE,QAAQ,CAACqD,IAAI,CAACM,QAAQ,CAAC,IAAI,CAACzC,OAAO,CAAC,EAAE;MACxClB,QAAQ,CAACqD,IAAI,CAACe,WAAW,CAAC,IAAI,CAAClD,OAAO,CAAC;IACzC;IAEA,IAAI6C,WAAW,EAAE;MACf,IAAI,CAACD,QAAQ,CAAC;QAAE1D,MAAM,EAAE;MAAK,CAAC,CAAC;IACjC;EACF;EAEAuB,IAAIA,CAAA,EAAS;IACX,IAAI,CAACe,UAAU,CAAC,CAAC;;IAEjB;IACAtE,SAAS,CAAC,MAAM;MACd,IAAI,CAAC0F,QAAQ,CAAC;QAAEnC,IAAI,EAAE;MAAK,CAAC,CAAC;IAC/B,CAAC,CAAC;EACJ;EAEAM,IAAIA,CAAA,EAAS;IACX,IAAI,CAAC6B,QAAQ,CAAC;MAAEnC,IAAI,EAAE;IAAM,CAAC,CAAC;EAChC;EAEAO,cAAcA,CAAA,EAAS;IACrB,IAAM;MAAE9B;IAAO,CAAC,GAAG,IAAI,CAACsB,KAAK;IAC7B,IAAItB,MAAM,EAAEA,MAAM,CAAC8B,cAAc,CAAC,CAAC;EACrC;EAEAjB,UAAUA,CAACoD,CAAmB,EAAQ;IACpC,IAAM;MAAEvB,WAAW;MAAEwB;IAAO,CAAC,GAAG,IAAI,CAAC3D,KAAK;IAC1C,IAAI,EAAE0D,CAAC,CAACE,aAAa,YAAYb,WAAW,CAAC,EAAE;MAC7C;IACF;IACA,IAAI,CAAC,IAAI,CAACxC,OAAO,CAACyC,QAAQ,CAACU,CAAC,CAACE,aAAa,CAAC,EAAE;MAC3CD,MAAM,aAANA,MAAM,eAANA,MAAM,CAAGD,CAAC,CAAC;MACX,IAAIvB,WAAW,EAAE;QACf,IAAI,CAACb,IAAI,CAAC,CAAC;MACb;IACF;EACF;EAEAnB,WAAWA,CAAA,EAAS;IAClB,IAAM;MAAE0D;IAAU,CAAC,GAAG,IAAI,CAAC7D,KAAK;IAChC6D,SAAS,CAAC,CAAC,CAAC,CAAC;EACf;EAEAxD,UAAUA,CAAA,EAAS;IACjB,IAAM;MAAEyD;IAAS,CAAC,GAAG,IAAI,CAAC9D,KAAK;IAC/B,IAAM;MAAEgB;IAAK,CAAC,GAAG,IAAI,CAACD,KAAK;IAC3B,IAAI,CAACC,IAAI,EAAE;MACT,IAAI,CAACS,aAAa,CAAC,CAAC;IACtB;IACAqC,QAAQ,CAAC,CAAC,CAAC,CAAC;EACd;EAEAC,aAAaA,CAAA,EAAgB;IAC3B,IAAM;MAAErC,SAAS;MAAEsC,QAAQ;MAAEC,OAAO;MAAEC,WAAW;MAAE/B;IAAY,CAAC,GAC9D,IAAI,CAACnC,KAAK;IACZ,IAAM;MAAEgB;IAAK,CAAC,GAAG,IAAI,CAACD,KAAK;IAE3B,oBACE/C,IAAA,CAACF,qBAAqB;MAACqG,QAAQ;MAAAH,QAAA,eAC7BhG,IAAA,CAACL,aAAa;QACZyG,EAAE,EAAEpD,IAAK;QACTiD,OAAO,EAAEA,OAAQ;QACjBvG,UAAU,EAAC,mBAAmB;QAC9BmG,SAAS,EAAE,IAAI,CAAC1D,WAAY;QAC5B2D,QAAQ,EAAE,IAAI,CAACzD,UAAW;QAC1BgE,OAAO,EAAE,IAAI,CAACA,OAAQ;QAAAL,QAAA,eAEtBhG,IAAA;UACEsG,GAAG,EAAE,IAAI,CAACD,OAAQ;UAClBE,OAAO,EAAEb,CAAC,IAAI;YACZ;YACAA,CAAC,CAACc,eAAe,CAAC,CAAC;UACrB,CAAE;UACFC,SAAS,EAAEf,CAAC,IAAI;YACd,IAAIA,CAAC,CAACgB,GAAG,KAAK,QAAQ,EAAE,IAAI,CAACpD,IAAI,CAAC,CAAC;UACrC,CAAE;UACFI,SAAS,EAAEhE,UAAU,CACnBS,iBAAiB,EACjB;YAAE+F;UAAY,CAAC,EACfxC,SACF,CAAE;UACFiC,MAAM,EAAE,IAAI,CAACrD,UAAW;UACxBqE,QAAQ,EAAExC,WAAW,GAAG,CAAC,CAAC,GAAGoB,SAAU;UACvCqB,IAAI,EAAC,cAAc;UAAAZ,QAAA,eAEnB9F,KAAA;YAAKwD,SAAS,EAAC,gBAAgB;YAAAsC,QAAA,GAC5BA,QAAQ,eAEThG,IAAA;cAAK0D,SAAS,EAAC,cAAc;cAAC,WAAQ;YAAE,CAAE,CAAC;UAAA,CACxC;QAAC,CACH;MAAC,CACO;IAAC,CACK,CAAC;EAE5B;EAEAmD,MAAMA,CAAA,EAAgB;IACpB,IAAM;MAAEpF;IAAO,CAAC,GAAG,IAAI,CAACsB,KAAK;IAC7B,IAAM;MAAE,aAAa,EAAE+D;IAAW,CAAC,GAAG,IAAI,CAAC9E,KAAK;IAChD,oBACEhC,IAAA;MACE0D,SAAS,EAAC,yBAAyB;MACnC4C,GAAG,EAAE,IAAI,CAAC1D,SAAU;MACpBmE,KAAK,EAAE;QAAEC,OAAO,EAAE;MAAO,CAAE;MAC3B,eAAaF,UAAW;MAAAd,QAAA,EAEvBvE,MAAM,iBAAIjC,QAAQ,CAACyH,YAAY,CAAC,IAAI,CAAClB,aAAa,CAAC,CAAC,EAAE,IAAI,CAACxD,OAAO;IAAC,CACjE,CAAC;EAEV;AACF;AAACN,eAAA,CApTKH,MAAM,kBACY;EACpBlB,OAAO,EAAE,CAAC,CAAC;EACX8C,SAAS,EAAE,EAAE;EACbhB,kBAAkB,EAAE,EAAE;EACtBC,WAAW,EAAE,KAAK;EAClBsD,OAAO,EAAEpG,WAAW,CAACqH,YAAY;EACjCrB,SAASA,CAAA,EAAS;IAChB;EAAA,CACD;EACDC,QAAQA,CAAA,EAAS;IACf;EAAA,CACD;EACDH,MAAMA,CAAA,EAAS;IACb;EAAA,CACD;EACD7C,OAAO,EAAE,KAAK;EACdoD,WAAW,EAAE,KAAK;EAClB/B,WAAW,EAAE,KAAK;EAClBI,YAAY,EAAE,KAAK;EACnBH,eAAe,EAAE,IAAI;EACrB,aAAa,EAAEmB;AACjB,CAAC;AAgSH,eAAezD,MAAM","ignoreList":[]}

package/dist/transitions/SlideTransition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SlideTransition.d.ts","sourceRoot":"","sources":["../../src/transitions/SlideTransition.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAC/E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAEpE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAK7D,KAAK,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AAEvC,KAAK,oBAAoB,GAIvB,IAAI,CACF,oBAAoB,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC,EACrD,eAAe,CAChB,GAAG;IACF,aAAa,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,SAAS,CAAC;IACpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEJ;;;;GAIG;AACH,iBAAS,eAAe,CAAC,EACvB,SAAkB,EAClB,UAAU,EAAE,cAAc,EAC1B,QAAQ;AAER,sBAAsB;AACtB,OAAqC,EACrC,GAAG,KAAK,EACT,EAAE,oBAAoB,GAAG,GAAG,CAAC,OAAO,CAsBpC;AAED,eAAe,eAAe,CAAC"}
+{"version":3,"file":"SlideTransition.d.ts","sourceRoot":"","sources":["../../src/transitions/SlideTransition.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAC/E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAEpE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAK7D,KAAK,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AAEvC,KAAK,oBAAoB,GAIvB,IAAI,CACF,oBAAoB,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC,EACrD,eAAe,CAChB,GAAG;IACF,aAAa,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,SAAS,CAAC;IACpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEJ;;;;GAIG;AACH,iBAAS,eAAe,CAAC,EACvB,SAAkB,EAClB,UAAU,EAAE,cAAc,EAC1B,QAAQ;AAER,sBAAsB;AACtB,OAAqC,EACrC,GAAG,KAAK,EACT,EAAE,oBAAoB,GAAG,GAAG,CAAC,OAAO,CA8BpC;AAED,eAAe,eAAe,CAAC"}

package/dist/transitions/SlideTransition.js

@@ -31,11 +31,18 @@ function SlideTransition(_ref) {
     props = _objectWithoutProperties(_ref, _excluded);
   var nodeRef = useRef(null);
 
-  // Mimics findDOMNode for CSSTransition
-  // The ref should be set before CSSTransition does anything with it
+  // Mimics findDOMNode for CSSTransition.
+  // Keying on `in` rather than `children` avoids re-creating the ref callback
+  // on every render, which would needlessly detach/re-attach the ref.
   var setRef = useCallback(node => {
-    nodeRef.current = node === null || node === void 0 ? void 0 : node.firstElementChild;
-  }, []);
+    var _ref2;
+    nodeRef.current = (_ref2 = node === null || node === void 0 ? void 0 : node.firstElementChild) !== null && _ref2 !== void 0 ? _ref2 : null;
+  },
+  // `inProp` is intentionally a dependency: toggling `in` must re-create the
+  // callback so the ref re-attaches and re-reads `firstElementChild` when the
+  // child appears/disappears.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [props.in]);
   return /*#__PURE__*/_jsx(CSSTransition, _objectSpread(_objectSpread({
     nodeRef: nodeRef,
     timeout: timeout,

package/dist/transitions/SlideTransition.js.map

@@ -1 +1 @@
-{"version":3,"file":"SlideTransition.js","names":["useCallback","useRef","CSSTransition","classNames","ThemeExport","jsx","_jsx","DISPLAY_CONTENTS","display","SlideTransition","_ref","direction","classNamesProp","children","timeout","transitionMidMs","props","_objectWithoutProperties","_excluded","nodeRef","setRef","node","current","firstElementChild","_objectSpread","concat","ref","style"],"sources":["../../src/transitions/SlideTransition.tsx"],"sourcesContent":["// SlideTransition class uses CSSTransition with slide-left and slide-right classNames, depending on the prop direction. The transition is 250ms long.\nimport { useCallback, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport type { CSSTransitionProps } from 'react-transition-group/CSSTransition';\nimport type { EndHandler } from 'react-transition-group/Transition';\nimport classNames from 'classnames';\nimport type { RemoveIndexSignature } from '@deephaven/utils';\nimport ThemeExport from '../ThemeExport';\n\nconst DISPLAY_CONTENTS = { display: 'contents' };\n\ntype SlideDirection = 'left' | 'right';\n\ntype SlideTransitionProps =\n  // We default the timeout, so user doesn't need to provide it\n  // However, CSSTransitionProps get confused if you don't provide a timeout, it requires an endHandler\n  // We're just making the endHandler optional here, as the timeout has a default\n  Omit<\n    RemoveIndexSignature<CSSTransitionProps<HTMLElement>>,\n    'addEndHandler'\n  > & {\n    addEndHandler?: EndHandler<HTMLElement> | undefined;\n    children?: React.ReactNode;\n    /**\n     * The direction of the slide transition. Defaults to left.\n     */\n    direction?: SlideDirection;\n\n    timeout?: number;\n  };\n\n/**\n * Slides one component overtop of another component.\n * Defaults to sliding left, unless `direction='right'` is provided.\n * Timeout defaults to 200ms.\n */\nfunction SlideTransition({\n  direction = 'left',\n  classNames: classNamesProp,\n  children,\n\n  /** Defaults to mid */\n  timeout = ThemeExport.transitionMidMs,\n  ...props\n}: SlideTransitionProps): JSX.Element {\n  const nodeRef = useRef<HTMLElement | null>(null);\n\n  // Mimics findDOMNode for CSSTransition\n  // The ref should be set before CSSTransition does anything with it\n  const setRef = useCallback((node: HTMLElement | null) => {\n    nodeRef.current = node?.firstElementChild as HTMLElement;\n  }, []);\n\n  return (\n    <CSSTransition\n      nodeRef={nodeRef}\n      timeout={timeout}\n      classNames={classNames(`slide-${direction}`, classNamesProp)}\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...props}\n    >\n      <div ref={setRef} style={DISPLAY_CONTENTS}>\n        {children}\n      </div>\n    </CSSTransition>\n  );\n}\n\nexport default SlideTransition;\n"],"mappings":";;;;;;;;AAAA;AACA,SAASA,WAAW,EAAEC,MAAM,QAAQ,OAAO;AAC3C,SAASC,aAAa,QAAQ,wBAAwB;AAGtD,OAAOC,UAAU,MAAM,YAAY;AAAC,OAE7BC,WAAW;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAElB,IAAMC,gBAAgB,GAAG;EAAEC,OAAO,EAAE;AAAW,CAAC;AAsBhD;AACA;AACA;AACA;AACA;AACA,SAASC,eAAeA,CAAAC,IAAA,EAQc;EAAA,IARb;MACvBC,SAAS,GAAG,MAAM;MAClBR,UAAU,EAAES,cAAc;MAC1BC,QAAQ;MAER;MACAC,OAAO,GAAGV,WAAW,CAACW;IAEF,CAAC,GAAAL,IAAA;IADlBM,KAAK,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA;EAER,IAAMC,OAAO,GAAGlB,MAAM,CAAqB,IAAI,CAAC;;EAEhD;EACA;EACA,IAAMmB,MAAM,GAAGpB,WAAW,CAAEqB,IAAwB,IAAK;IACvDF,OAAO,CAACG,OAAO,GAAGD,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEE,iBAAgC;EAC1D,CAAC,EAAE,EAAE,CAAC;EAEN,oBACEjB,IAAA,CAACJ,aAAa,EAAAsB,aAAA,CAAAA,aAAA;IACZL,OAAO,EAAEA,OAAQ;IACjBL,OAAO,EAAEA,OAAQ;IACjBX,UAAU,EAAEA,UAAU,UAAAsB,MAAA,CAAUd,SAAS,GAAIC,cAAc;IAC3D;EAAA,GACII,KAAK;IAAAH,QAAA,eAETP,IAAA;MAAKoB,GAAG,EAAEN,MAAO;MAACO,KAAK,EAAEpB,gBAAiB;MAAAM,QAAA,EACvCA;IAAQ,CACN;EAAC,EACO,CAAC;AAEpB;AAEA,eAAeJ,eAAe","ignoreList":[]}
+{"version":3,"file":"SlideTransition.js","names":["useCallback","useRef","CSSTransition","classNames","ThemeExport","jsx","_jsx","DISPLAY_CONTENTS","display","SlideTransition","_ref","direction","classNamesProp","children","timeout","transitionMidMs","props","_objectWithoutProperties","_excluded","nodeRef","setRef","node","_ref2","current","firstElementChild","in","_objectSpread","concat","ref","style"],"sources":["../../src/transitions/SlideTransition.tsx"],"sourcesContent":["// SlideTransition class uses CSSTransition with slide-left and slide-right classNames, depending on the prop direction. The transition is 250ms long.\nimport { useCallback, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport type { CSSTransitionProps } from 'react-transition-group/CSSTransition';\nimport type { EndHandler } from 'react-transition-group/Transition';\nimport classNames from 'classnames';\nimport type { RemoveIndexSignature } from '@deephaven/utils';\nimport ThemeExport from '../ThemeExport';\n\nconst DISPLAY_CONTENTS = { display: 'contents' };\n\ntype SlideDirection = 'left' | 'right';\n\ntype SlideTransitionProps =\n  // We default the timeout, so user doesn't need to provide it\n  // However, CSSTransitionProps get confused if you don't provide a timeout, it requires an endHandler\n  // We're just making the endHandler optional here, as the timeout has a default\n  Omit<\n    RemoveIndexSignature<CSSTransitionProps<HTMLElement>>,\n    'addEndHandler'\n  > & {\n    addEndHandler?: EndHandler<HTMLElement> | undefined;\n    children?: React.ReactNode;\n    /**\n     * The direction of the slide transition. Defaults to left.\n     */\n    direction?: SlideDirection;\n\n    timeout?: number;\n  };\n\n/**\n * Slides one component overtop of another component.\n * Defaults to sliding left, unless `direction='right'` is provided.\n * Timeout defaults to 200ms.\n */\nfunction SlideTransition({\n  direction = 'left',\n  classNames: classNamesProp,\n  children,\n\n  /** Defaults to mid */\n  timeout = ThemeExport.transitionMidMs,\n  ...props\n}: SlideTransitionProps): JSX.Element {\n  const nodeRef = useRef<HTMLElement | null>(null);\n\n  // Mimics findDOMNode for CSSTransition.\n  // Keying on `in` rather than `children` avoids re-creating the ref callback\n  // on every render, which would needlessly detach/re-attach the ref.\n  const setRef = useCallback(\n    (node: HTMLElement | null) => {\n      nodeRef.current = (node?.firstElementChild as HTMLElement | null) ?? null;\n    },\n    // `inProp` is intentionally a dependency: toggling `in` must re-create the\n    // callback so the ref re-attaches and re-reads `firstElementChild` when the\n    // child appears/disappears.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [props.in]\n  );\n\n  return (\n    <CSSTransition\n      nodeRef={nodeRef}\n      timeout={timeout}\n      classNames={classNames(`slide-${direction}`, classNamesProp)}\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...props}\n    >\n      <div ref={setRef} style={DISPLAY_CONTENTS}>\n        {children}\n      </div>\n    </CSSTransition>\n  );\n}\n\nexport default SlideTransition;\n"],"mappings":";;;;;;;;AAAA;AACA,SAASA,WAAW,EAAEC,MAAM,QAAQ,OAAO;AAC3C,SAASC,aAAa,QAAQ,wBAAwB;AAGtD,OAAOC,UAAU,MAAM,YAAY;AAAC,OAE7BC,WAAW;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAElB,IAAMC,gBAAgB,GAAG;EAAEC,OAAO,EAAE;AAAW,CAAC;AAsBhD;AACA;AACA;AACA;AACA;AACA,SAASC,eAAeA,CAAAC,IAAA,EAQc;EAAA,IARb;MACvBC,SAAS,GAAG,MAAM;MAClBR,UAAU,EAAES,cAAc;MAC1BC,QAAQ;MAER;MACAC,OAAO,GAAGV,WAAW,CAACW;IAEF,CAAC,GAAAL,IAAA;IADlBM,KAAK,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA;EAER,IAAMC,OAAO,GAAGlB,MAAM,CAAqB,IAAI,CAAC;;EAEhD;EACA;EACA;EACA,IAAMmB,MAAM,GAAGpB,WAAW,CACvBqB,IAAwB,IAAK;IAAA,IAAAC,KAAA;IAC5BH,OAAO,CAACI,OAAO,IAAAD,KAAA,GAAID,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEG,iBAAiB,cAAAF,KAAA,cAAAA,KAAA,GAA2B,IAAI;EAC3E,CAAC;EACD;EACA;EACA;EACA;EACA,CAACN,KAAK,CAACS,EAAE,CACX,CAAC;EAED,oBACEnB,IAAA,CAACJ,aAAa,EAAAwB,aAAA,CAAAA,aAAA;IACZP,OAAO,EAAEA,OAAQ;IACjBL,OAAO,EAAEA,OAAQ;IACjBX,UAAU,EAAEA,UAAU,UAAAwB,MAAA,CAAUhB,SAAS,GAAIC,cAAc;IAC3D;EAAA,GACII,KAAK;IAAAH,QAAA,eAETP,IAAA;MAAKsB,GAAG,EAAER,MAAO;MAACS,KAAK,EAAEtB,gBAAiB;MAAAM,QAAA,EACvCA;IAAQ,CACN;EAAC,EACO,CAAC;AAEpB;AAEA,eAAeJ,eAAe","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/components",
-  "version": "1.21.1",
+  "version": "1.22.1-alpha-pivot-builder.0+fb17c45",
   "description": "Deephaven React component library",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
@@ -25,10 +25,10 @@
   },
   "dependencies": {
     "@adobe/react-spectrum": "3.47.0",
-    "@deephaven/icons": "^1.2.0",
-    "@deephaven/log": "^1.8.0",
-    "@deephaven/react-hooks": "^1.21.1",
-    "@deephaven/utils": "^1.10.0",
+    "@deephaven/icons": "^1.22.1-alpha-pivot-builder.0+fb17c45",
+    "@deephaven/log": "^1.22.1-alpha-pivot-builder.0+fb17c45",
+    "@deephaven/react-hooks": "^1.22.1-alpha-pivot-builder.0+fb17c45",
+    "@deephaven/utils": "^1.22.1-alpha-pivot-builder.0+fb17c45",
     "@fontsource/fira-mono": "5.0.13",
     "@fontsource/fira-sans": "5.0.20",
     "@fortawesome/fontawesome-svg-core": "^6.2.1",
@@ -69,8 +69,8 @@
     "react-is": ">=16.8.0"
   },
   "devDependencies": {
-    "@deephaven/mocks": "^1.1.0",
-    "@deephaven/test-utils": "^1.8.0",
+    "@deephaven/mocks": "^1.22.1-alpha-pivot-builder.0+fb17c45",
+    "@deephaven/test-utils": "^1.22.1-alpha-pivot-builder.0+fb17c45",
     "react-redux": "^7.2.7"
   },
   "files": [
@@ -85,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1b42d0daee02a340363c972ffb8fffce6da56968"
+  "gitHead": "fb17c45114ceb8f1ab670ac20dac74f8e8bd65fb"
 }