@grafana/scenes 2.5.1 → 2.6.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v2.6.0 (Mon Feb 05 2024)
+
+#### 🚀 Enhancement
+
+- SplitLayout: Make secondary pane optional [#546](https://github.com/grafana/scenes/pull/546) ([@cbos](https://github.com/cbos) [@dprokop](https://github.com/dprokop))
+
+#### Authors: 2
+
+- Cees Bos ([@cbos](https://github.com/cbos))
+- Dominik Prokop ([@dprokop](https://github.com/dprokop))
+
+---
+
 # v2.5.1 (Mon Feb 05 2024)
 
 #### 🐛 Bug Fix

package/dist/esm/components/layout/split/SplitLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitLayout.js","sources":["../../../../../src/components/layout/split/SplitLayout.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport { SceneObjectBase } from '../../../core/SceneObjectBase';\nimport { SceneObjectState } from '../../../core/types';\nimport { SceneFlexItemPlacement, SceneFlexItemLike } from '../SceneFlexLayout';\nimport { SplitLayoutRenderer } from './SplitLayoutRenderer';\n\ninterface SplitLayoutState extends SceneObjectState, SceneFlexItemPlacement {\n  primary: SceneFlexItemLike;\n  secondary: SceneFlexItemLike;\n  direction: 'row' | 'column';\n  initialSize?: number;\n  primaryPaneStyles?: CSSProperties;\n  secondaryPaneStyles?: CSSProperties;\n}\n\nexport class SplitLayout extends SceneObjectBase<SplitLayoutState> {\n  public static Component = SplitLayoutRenderer;\n\n  public toggleDirection() {\n    this.setState({\n      direction: this.state.direction === 'row' ? 'column' : 'row',\n    });\n  }\n\n  public isDraggable(): boolean {\n    return false;\n  }\n}\n"],"names":[],"mappings":";;;AAeO,MAAM,oBAAoB,eAAkC,CAAA;AAAA,EAG1D,eAAkB,GAAA;AACvB,IAAA,IAAA,CAAK,QAAS,CAAA;AAAA,MACZ,SAAW,EAAA,IAAA,CAAK,KAAM,CAAA,SAAA,KAAc,QAAQ,QAAW,GAAA,KAAA;AAAA,KACxD,CAAA,CAAA;AAAA,GACH;AAAA,EAEO,WAAuB,GAAA;AAC5B,IAAO,OAAA,KAAA,CAAA;AAAA,GACT;AACF,CAAA;AAZa,WAAA,CACG,SAAY,GAAA,mBAAA;;;;"}
+{"version":3,"file":"SplitLayout.js","sources":["../../../../../src/components/layout/split/SplitLayout.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport { SceneObjectBase } from '../../../core/SceneObjectBase';\nimport { SceneObjectState } from '../../../core/types';\nimport { SceneFlexItemPlacement, SceneFlexItemLike } from '../SceneFlexLayout';\nimport { SplitLayoutRenderer } from './SplitLayoutRenderer';\n\ninterface SplitLayoutState extends SceneObjectState, SceneFlexItemPlacement {\n  primary: SceneFlexItemLike;\n  secondary?: SceneFlexItemLike;\n  direction: 'row' | 'column';\n  initialSize?: number;\n  primaryPaneStyles?: CSSProperties;\n  secondaryPaneStyles?: CSSProperties;\n}\n\nexport class SplitLayout extends SceneObjectBase<SplitLayoutState> {\n  public static Component = SplitLayoutRenderer;\n\n  public toggleDirection() {\n    this.setState({\n      direction: this.state.direction === 'row' ? 'column' : 'row',\n    });\n  }\n\n  public isDraggable(): boolean {\n    return false;\n  }\n}\n"],"names":[],"mappings":";;;AAeO,MAAM,oBAAoB,eAAkC,CAAA;AAAA,EAG1D,eAAkB,GAAA;AACvB,IAAA,IAAA,CAAK,QAAS,CAAA;AAAA,MACZ,SAAW,EAAA,IAAA,CAAK,KAAM,CAAA,SAAA,KAAc,QAAQ,QAAW,GAAA,KAAA;AAAA,KACxD,CAAA,CAAA;AAAA,GACH;AAAA,EAEO,WAAuB,GAAA;AAC5B,IAAO,OAAA,KAAA,CAAA;AAAA,GACT;AACF,CAAA;AAZa,WAAA,CACG,SAAY,GAAA,mBAAA;;;;"}

package/dist/esm/components/layout/split/SplitLayoutRenderer.js

@@ -7,17 +7,18 @@ function SplitLayoutRenderer({ model }) {
     return null;
   }
   const Prim = primary.Component;
-  const Sec = secondary.Component;
+  const Sec = secondary == null ? void 0 : secondary.Component;
+  let startSize = secondary ? initialSize : 1;
   return /* @__PURE__ */ React.createElement(Splitter, {
     direction,
-    initialSize: initialSize != null ? initialSize : 0.5,
+    initialSize: startSize != null ? startSize : 0.5,
     primaryPaneStyles,
     secondaryPaneStyles
   }, /* @__PURE__ */ React.createElement(Prim, {
     key: primary.state.key,
     model: primary,
     parentState: model.state
-  }), /* @__PURE__ */ React.createElement(Sec, {
+  }), Sec && secondary && /* @__PURE__ */ React.createElement(Sec, {
     key: secondary.state.key,
     model: secondary,
     parentState: model.state

package/dist/esm/components/layout/split/SplitLayoutRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitLayoutRenderer.js","sources":["../../../../../src/components/layout/split/SplitLayoutRenderer.tsx"],"sourcesContent":["import React, { ComponentType } from 'react';\n\nimport { SceneComponentProps, SceneObjectState, SceneObject } from '../../../core/types';\nimport { SceneFlexItemPlacement } from '../SceneFlexLayout';\nimport { SplitLayout } from './SplitLayout';\nimport { Splitter } from './Splitter';\n\nexport function SplitLayoutRenderer({ model }: SceneFlexItemRenderProps<SplitLayout>) {\n  const { primary, secondary, direction, isHidden, initialSize, primaryPaneStyles, secondaryPaneStyles } =\n    model.useState();\n\n  if (isHidden) {\n    return null;\n  }\n\n  const Prim = primary.Component as ComponentType<SceneFlexItemRenderProps<SceneObject>>;\n  const Sec = secondary.Component as ComponentType<SceneFlexItemRenderProps<SceneObject>>;\n  return (\n    <Splitter\n      direction={direction}\n      initialSize={initialSize ?? 0.5}\n      primaryPaneStyles={primaryPaneStyles}\n      secondaryPaneStyles={secondaryPaneStyles}\n    >\n      <Prim key={primary.state.key} model={primary} parentState={model.state} />\n      <Sec key={secondary.state.key} model={secondary} parentState={model.state} />\n    </Splitter>\n  );\n}\n\nexport interface SceneFlexItemState extends SceneFlexItemPlacement, SceneObjectState {\n  body: SceneObject | undefined;\n}\n\ninterface SceneFlexItemRenderProps<T> extends SceneComponentProps<T> {\n  parentState?: SceneFlexItemPlacement;\n}\n"],"names":[],"mappings":";;;AAOgB,SAAA,mBAAA,CAAoB,EAAE,KAAA,EAAgD,EAAA;AACpF,EAAM,MAAA,EAAE,OAAS,EAAA,SAAA,EAAW,SAAW,EAAA,QAAA,EAAU,aAAa,iBAAmB,EAAA,mBAAA,EAC/E,GAAA,KAAA,CAAM,QAAS,EAAA,CAAA;AAEjB,EAAA,IAAI,QAAU,EAAA;AACZ,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,MAAM,OAAO,OAAQ,CAAA,SAAA,CAAA;AACrB,EAAA,MAAM,MAAM,SAAU,CAAA,SAAA,CAAA;AACtB,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAA,IACC,SAAA;AAAA,IACA,aAAa,WAAe,IAAA,IAAA,GAAA,WAAA,GAAA,GAAA;AAAA,IAC5B,iBAAA;AAAA,IACA,mBAAA;AAAA,GAAA,kBAEC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAK,GAAA,EAAK,QAAQ,KAAM,CAAA,GAAA;AAAA,IAAK,KAAO,EAAA,OAAA;AAAA,IAAS,aAAa,KAAM,CAAA,KAAA;AAAA,GAAO,mBACvE,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,IAAI,GAAA,EAAK,UAAU,KAAM,CAAA,GAAA;AAAA,IAAK,KAAO,EAAA,SAAA;AAAA,IAAW,aAAa,KAAM,CAAA,KAAA;AAAA,GAAO,CAC7E,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SplitLayoutRenderer.js","sources":["../../../../../src/components/layout/split/SplitLayoutRenderer.tsx"],"sourcesContent":["import React, { ComponentType } from 'react';\n\nimport { SceneComponentProps, SceneObjectState, SceneObject } from '../../../core/types';\nimport { SceneFlexItemPlacement } from '../SceneFlexLayout';\nimport { SplitLayout } from './SplitLayout';\nimport { Splitter } from './Splitter';\n\nexport function SplitLayoutRenderer({ model }: SceneFlexItemRenderProps<SplitLayout>) {\n  const { primary, secondary, direction, isHidden, initialSize, primaryPaneStyles, secondaryPaneStyles } =\n    model.useState();\n\n  if (isHidden) {\n    return null;\n  }\n\n  const Prim = primary.Component as ComponentType<SceneFlexItemRenderProps<SceneObject>>;\n  const Sec = secondary?.Component as ComponentType<SceneFlexItemRenderProps<SceneObject>>;\n  let startSize = secondary ? initialSize : 1;\n\n  return (\n    <Splitter\n      direction={direction}\n      initialSize={startSize ?? 0.5}\n      primaryPaneStyles={primaryPaneStyles}\n      secondaryPaneStyles={secondaryPaneStyles}\n    >\n      <Prim key={primary.state.key} model={primary} parentState={model.state} />\n      { Sec && secondary &&\n      <Sec key={secondary.state.key} model={secondary} parentState={model.state} />\n      }\n    </Splitter>\n  );\n}\n\nexport interface SceneFlexItemState extends SceneFlexItemPlacement, SceneObjectState {\n  body: SceneObject | undefined;\n}\n\ninterface SceneFlexItemRenderProps<T> extends SceneComponentProps<T> {\n  parentState?: SceneFlexItemPlacement;\n}\n"],"names":[],"mappings":";;;AAOgB,SAAA,mBAAA,CAAoB,EAAE,KAAA,EAAgD,EAAA;AACpF,EAAM,MAAA,EAAE,OAAS,EAAA,SAAA,EAAW,SAAW,EAAA,QAAA,EAAU,aAAa,iBAAmB,EAAA,mBAAA,EAC/E,GAAA,KAAA,CAAM,QAAS,EAAA,CAAA;AAEjB,EAAA,IAAI,QAAU,EAAA;AACZ,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,MAAM,OAAO,OAAQ,CAAA,SAAA,CAAA;AACrB,EAAA,MAAM,MAAM,SAAW,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,SAAA,CAAA;AACvB,EAAI,IAAA,SAAA,GAAY,YAAY,WAAc,GAAA,CAAA,CAAA;AAE1C,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAA,IACC,SAAA;AAAA,IACA,aAAa,SAAa,IAAA,IAAA,GAAA,SAAA,GAAA,GAAA;AAAA,IAC1B,iBAAA;AAAA,IACA,mBAAA;AAAA,GAAA,kBAEC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAK,GAAA,EAAK,QAAQ,KAAM,CAAA,GAAA;AAAA,IAAK,KAAO,EAAA,OAAA;AAAA,IAAS,aAAa,KAAM,CAAA,KAAA;AAAA,GAAO,CAAA,EACtE,GAAO,IAAA,SAAA,oBACR,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,IAAI,GAAA,EAAK,UAAU,KAAM,CAAA,GAAA;AAAA,IAAK,KAAO,EAAA,SAAA;AAAA,IAAW,aAAa,KAAM,CAAA,KAAA;AAAA,GAAO,CAE7E,CAAA,CAAA;AAEJ;;;;"}

package/dist/esm/components/layout/split/Splitter.js

@@ -239,6 +239,8 @@ function Splitter({
   }, [onDragFinished]);
   const styles = useStyles2(getStyles);
   const id = useUniqueId();
+  const secondAvailable = kids.length === 2;
+  const visibilitySecond = secondAvailable ? "visible" : "hidden";
   return /* @__PURE__ */ React.createElement("div", {
     ref: containerRef,
     className: styles.container,
@@ -253,7 +255,7 @@ function Splitter({
       [minDimProp]: "min-content"
     }, primaryPaneStyles),
     id: `start-panel-${id}`
-  }, kids[0]), /* @__PURE__ */ React.createElement("div", {
+  }, kids[0]), kids[1] && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
     ref: splitterRef,
     style: { [measurementProp]: `${handleSize}px` },
     className: cx(styles.handle, { [styles.handleHorizontal]: direction === "column" }),
@@ -276,10 +278,11 @@ function Splitter({
     className: styles.panel,
     style: __spreadValues({
       flexGrow: initialSize === "auto" ? 0.5 : clamp(1 - initialSize, 0, 1),
-      [minDimProp]: "min-content"
+      [minDimProp]: "min-content",
+      visibility: `${visibilitySecond}`
     }, secondaryPaneStyles),
     id: `end-panel-${id}`
-  }, kids[1]));
+  }, kids[1])));
 }
 function getStyles(theme) {
   return {

package/dist/esm/components/layout/split/Splitter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Splitter.js","sources":["../../../../../src/components/layout/split/Splitter.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2 } from '@grafana/ui';\nimport { clamp, throttle } from 'lodash';\nimport React, { useCallback, useLayoutEffect, useRef } from 'react';\nimport { useUniqueId } from '../LazyLoader';\n\ninterface Props {\n  handleSize?: number;\n  initialSize?: number | 'auto';\n  direction?: 'row' | 'column';\n  primary?: 'first' | 'second';\n  collapsedDefault?: boolean;\n  primaryPaneStyles?: React.CSSProperties;\n  secondaryPaneStyles?: React.CSSProperties;\n  onDragFinished?: (size: number) => void;\n  children: [React.ReactNode, React.ReactNode];\n}\n\nconst PIXELS_PER_MS = 0.3 as const;\nconst VERTICAL_KEYS = new Set(['ArrowUp', 'ArrowDown']);\nconst HORIZONTAL_KEYS = new Set(['ArrowLeft', 'ArrowRight']);\n\nconst propsForDirection = {\n  row: {\n    dim: 'width',\n    axis: 'clientX',\n    min: 'minWidth',\n    max: 'maxWidth',\n  },\n  column: {\n    dim: 'height',\n    axis: 'clientY',\n    min: 'minHeight',\n    max: 'maxHeight',\n  },\n} as const;\n\nexport function Splitter({\n  direction = 'row',\n  handleSize = 32,\n  initialSize = 'auto',\n  primaryPaneStyles,\n  secondaryPaneStyles,\n  onDragFinished,\n  children,\n}: Props) {\n  const kids = React.Children.toArray(children);\n\n  const splitterRef = useRef<HTMLDivElement | null>(null);\n  const firstPaneRef = useRef<HTMLDivElement | null>(null);\n  const secondPaneRef = useRef<HTMLDivElement | null>(null);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const containerSize = useRef<number | null>(null);\n  const primarySizeRef = useRef<'1fr' | number>('1fr');\n\n  const firstPaneMeasurements = useRef<ReturnType<typeof measureElement>>(undefined);\n  const savedPos = useRef<string | undefined>(undefined);\n\n  const measurementProp = propsForDirection[direction].dim;\n  const clientAxis = propsForDirection[direction].axis;\n  const minDimProp = propsForDirection[direction].min;\n  const maxDimProp = propsForDirection[direction].max;\n\n  // Using a resize observer here, as with content or screen based width/height the ratio between panes might\n  // change after a window resize, so ariaValueNow needs to be updated accordingly\n  useResizeObserver(\n    containerRef.current!,\n    (entries) => {\n      for (const entry of entries) {\n        if (!entry.target.isSameNode(containerRef.current)) {\n          return;\n        }\n\n        const curSize = firstPaneRef.current!.getBoundingClientRect()[measurementProp];\n        const newDims = measureElement(firstPaneRef.current!);\n        splitterRef.current!.ariaValueNow = `${clamp(\n          ((curSize - newDims[minDimProp]) / (newDims[maxDimProp] - newDims[minDimProp])) * 100,\n          0,\n          100\n        )}`;\n      }\n    },\n    500,\n    [maxDimProp, minDimProp, direction, measurementProp]\n  );\n\n  const dragStart = useRef<number | null>(null);\n  const onPointerDown = useCallback(\n    (e: React.PointerEvent<HTMLDivElement>) => {\n      // measure left-side width\n      primarySizeRef.current = firstPaneRef.current!.getBoundingClientRect()[measurementProp];\n      containerSize.current = containerRef.current!.getBoundingClientRect()[measurementProp];\n\n      // set position at start of drag\n      dragStart.current = e[clientAxis];\n      splitterRef.current!.setPointerCapture(e.pointerId);\n      firstPaneMeasurements.current = measureElement(firstPaneRef.current!);\n\n      savedPos.current = undefined;\n    },\n    [measurementProp, clientAxis]\n  );\n\n  const onPointerMove = useCallback(\n    (e: React.PointerEvent<HTMLDivElement>) => {\n      if (dragStart.current !== null && primarySizeRef.current !== '1fr') {\n        const diff = e[clientAxis] - dragStart.current;\n        const dims = firstPaneMeasurements.current!;\n        const newSize = clamp(primarySizeRef.current + diff, dims[minDimProp], dims[maxDimProp]);\n        const newFlex = newSize / (containerSize.current! - handleSize);\n        firstPaneRef.current!.style.flexGrow = `${newFlex}`;\n        secondPaneRef.current!.style.flexGrow = `${1 - newFlex}`;\n        const ariaValueNow = clamp(\n          ((newSize - dims[minDimProp]) / (dims[maxDimProp] - dims[minDimProp])) * 100,\n          0,\n          100\n        );\n\n        splitterRef.current!.ariaValueNow = `${ariaValueNow}`;\n      }\n    },\n    [handleSize, clientAxis, minDimProp, maxDimProp]\n  );\n\n  const onPointerUp = useCallback(\n    (e: React.PointerEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n      splitterRef.current!.releasePointerCapture(e.pointerId);\n      dragStart.current = null;\n      onDragFinished?.(parseFloat(firstPaneRef.current!.style.flexGrow));\n    },\n    [onDragFinished]\n  );\n\n  const pressedKeys = useRef(new Set<string>());\n  const keysLastHandledAt = useRef<number | null>(null);\n  const handlePressedKeys = useCallback(\n    (time: number) => {\n      const nothingPressed = pressedKeys.current.size === 0;\n      if (nothingPressed) {\n        keysLastHandledAt.current = null;\n        return;\n      } else if (primarySizeRef.current === '1fr') {\n        return;\n      }\n\n      const dt = time - (keysLastHandledAt.current ?? time);\n      const dx = dt * PIXELS_PER_MS;\n      let sizeChange = 0;\n\n      if (direction === 'row') {\n        if (pressedKeys.current.has('ArrowLeft')) {\n          sizeChange -= dx;\n        }\n        if (pressedKeys.current.has('ArrowRight')) {\n          sizeChange += dx;\n        }\n      } else {\n        if (pressedKeys.current.has('ArrowUp')) {\n          sizeChange -= dx;\n        }\n        if (pressedKeys.current.has('ArrowDown')) {\n          sizeChange += dx;\n        }\n      }\n\n      const firstPaneDims = firstPaneMeasurements.current!;\n      const curSize = firstPaneRef.current!.getBoundingClientRect()[measurementProp];\n      const newSize = clamp(curSize + sizeChange, firstPaneDims[minDimProp], firstPaneDims[maxDimProp]);\n\n      const newFlex = newSize / (containerSize.current! - handleSize);\n\n      firstPaneRef.current!.style.flexGrow = `${newFlex}`;\n      secondPaneRef.current!.style.flexGrow = `${1 - newFlex}`;\n      const ariaValueNow =\n        ((newSize - firstPaneDims[minDimProp]) / (firstPaneDims[maxDimProp] - firstPaneDims[minDimProp])) * 100;\n      splitterRef.current!.ariaValueNow = `${clamp(ariaValueNow, 0, 100)}`;\n\n      keysLastHandledAt.current = time;\n      window.requestAnimationFrame(handlePressedKeys);\n    },\n    [direction, handleSize, minDimProp, maxDimProp, measurementProp]\n  );\n\n  const onKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Enter') {\n        if (savedPos.current === undefined) {\n          savedPos.current = firstPaneRef.current!.style.flexGrow;\n          firstPaneRef.current!.style.flexGrow = '0';\n          secondPaneRef.current!.style.flexGrow = '1';\n        } else {\n          firstPaneRef.current!.style.flexGrow = savedPos.current;\n          secondPaneRef.current!.style.flexGrow = `${1 - parseFloat(savedPos.current)}`;\n          savedPos.current = undefined;\n        }\n        return;\n      } else if (e.key === 'Home') {\n        firstPaneMeasurements.current = measureElement(firstPaneRef.current!);\n        containerSize.current = containerRef.current!.getBoundingClientRect()[measurementProp];\n        const newFlex = firstPaneMeasurements.current[minDimProp] / (containerSize.current! - handleSize);\n        firstPaneRef.current!.style.flexGrow = `${newFlex}`;\n        secondPaneRef.current!.style.flexGrow = `${1 - newFlex}`;\n        splitterRef.current!.ariaValueNow = '0';\n        return;\n      } else if (e.key === 'End') {\n        firstPaneMeasurements.current = measureElement(firstPaneRef.current!);\n        containerSize.current = containerRef.current!.getBoundingClientRect()[measurementProp];\n        const newFlex = firstPaneMeasurements.current[maxDimProp] / (containerSize.current! - handleSize);\n        firstPaneRef.current!.style.flexGrow = `${newFlex}`;\n        secondPaneRef.current!.style.flexGrow = `${1 - newFlex}`;\n        splitterRef.current!.ariaValueNow = '100';\n        return;\n      }\n\n      if (\n        !(\n          (direction === 'column' && VERTICAL_KEYS.has(e.key)) ||\n          (direction === 'row' && HORIZONTAL_KEYS.has(e.key))\n        ) ||\n        pressedKeys.current.has(e.key)\n      ) {\n        return;\n      }\n\n      savedPos.current = undefined;\n      e.preventDefault();\n      e.stopPropagation();\n      primarySizeRef.current = firstPaneRef.current!.getBoundingClientRect()[measurementProp];\n      containerSize.current = containerRef.current!.getBoundingClientRect()[measurementProp];\n      firstPaneMeasurements.current = measureElement(firstPaneRef.current!);\n      const newKey = !pressedKeys.current.has(e.key);\n\n      if (newKey) {\n        const initiateAnimationLoop = pressedKeys.current.size === 0;\n        pressedKeys.current.add(e.key);\n\n        if (initiateAnimationLoop) {\n          window.requestAnimationFrame(handlePressedKeys);\n        }\n      }\n    },\n    [direction, handlePressedKeys, handleSize, maxDimProp, measurementProp, minDimProp]\n  );\n\n  const onKeyUp = useCallback(\n    (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (\n        (direction === 'row' && !HORIZONTAL_KEYS.has(e.key)) ||\n        (direction === 'column' && !VERTICAL_KEYS.has(e.key))\n      ) {\n        return;\n      }\n\n      pressedKeys.current.delete(e.key);\n      onDragFinished?.(parseFloat(firstPaneRef.current!.style.flexGrow));\n    },\n    [direction, onDragFinished]\n  );\n\n  const onDoubleClick = useCallback(() => {\n    firstPaneRef.current!.style.flexGrow = '0.5';\n    secondPaneRef.current!.style.flexGrow = '0.5';\n    const dim = measureElement(firstPaneRef.current!);\n    firstPaneMeasurements.current = dim;\n    primarySizeRef.current = firstPaneRef.current!.getBoundingClientRect()[measurementProp];\n    splitterRef.current!.ariaValueNow = `${\n      ((primarySizeRef.current - dim[minDimProp]) / (dim[maxDimProp] - dim[minDimProp])) * 100\n    }`;\n  }, [maxDimProp, measurementProp, minDimProp]);\n\n  const onBlur = useCallback(() => {\n    // If focus is lost while keys are held, stop changing panel sizes\n    if (pressedKeys.current.size > 0) {\n      pressedKeys.current.clear();\n      dragStart.current = null;\n      onDragFinished?.(parseFloat(firstPaneRef.current!.style.flexGrow));\n    }\n  }, [onDragFinished]);\n\n  const styles = useStyles2(getStyles);\n  const id = useUniqueId();\n\n  return (\n    <div\n      ref={containerRef}\n      className={styles.container}\n      style={{\n        flexDirection: direction,\n      }}\n    >\n      <div\n        ref={firstPaneRef}\n        className={styles.panel}\n        style={{\n          flexGrow: initialSize === 'auto' ? 0.5 : clamp(initialSize, 0, 1),\n          [minDimProp]: 'min-content',\n          ...primaryPaneStyles,\n        }}\n        id={`start-panel-${id}`}\n      >\n        {kids[0]}\n      </div>\n\n      <div\n        ref={splitterRef}\n        style={{ [measurementProp]: `${handleSize}px` }}\n        className={cx(styles.handle, { [styles.handleHorizontal]: direction === 'column' })}\n        onPointerUp={onPointerUp}\n        onPointerDown={onPointerDown}\n        onPointerMove={onPointerMove}\n        onKeyDown={onKeyDown}\n        onKeyUp={onKeyUp}\n        onDoubleClick={onDoubleClick}\n        onBlur={onBlur}\n        role=\"separator\"\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-valuenow={50}\n        aria-controls={`start-panel-${id}`}\n        aria-label=\"Pane resize widget\"\n        tabIndex={0}\n      ></div>\n\n      <div\n        ref={secondPaneRef}\n        className={styles.panel}\n        style={{\n          flexGrow: initialSize === 'auto' ? 0.5 : clamp(1 - initialSize, 0, 1),\n          [minDimProp]: 'min-content',\n          ...secondaryPaneStyles,\n        }}\n        id={`end-panel-${id}`}\n      >\n        {kids[1]}\n      </div>\n    </div>\n  );\n}\n\nfunction getStyles(theme: GrafanaTheme2) {\n  return {\n    handle: css({\n      cursor: 'col-resize',\n      position: 'relative',\n      flexShrink: 0,\n      userSelect: 'none',\n\n      '&::before': {\n        content: '\"\"',\n        position: 'absolute',\n        backgroundColor: theme.colors.primary.main,\n        left: '50%',\n        transform: 'translate(-50%)',\n        top: 0,\n        height: '100%',\n        width: '1px',\n        opacity: 0,\n        transition: 'opacity ease-in-out 0.2s',\n      },\n\n      '&::after': {\n        content: '\"\"',\n        width: '4px',\n        borderRadius: '4px',\n        backgroundColor: theme.colors.border.weak,\n        transition: 'background-color ease-in-out 0.2s',\n        height: '50%',\n        top: 'calc(50% - (50%) / 2)',\n        transform: 'translateX(-50%)',\n        position: 'absolute',\n        left: '50%',\n      },\n\n      '&:hover, &:focus-visible': {\n        outline: 'none',\n        '&::before': {\n          opacity: 1,\n        },\n\n        '&::after': {\n          backgroundColor: theme.colors.primary.main,\n        },\n      },\n    }),\n    handleHorizontal: css({\n      cursor: 'row-resize',\n\n      '&::before': {\n        left: 'inherit',\n        transform: 'translateY(-50%)',\n        top: '50%',\n        height: '1px',\n        width: '100%',\n      },\n\n      '&::after': {\n        width: '50%',\n        height: '4px',\n        top: '50%',\n        transform: 'translateY(-50%)',\n        left: 'calc(50% - (50%) / 2)',\n      },\n    }),\n    container: css({\n      display: 'flex',\n      width: '100%',\n      flexGrow: 1,\n      overflow: 'hidden',\n    }),\n    panel: css({ display: 'flex', position: 'relative', flexBasis: 0 }),\n  };\n}\n\ntype MeasureR<T> = T extends HTMLElement\n  ? { minWidth: number; maxWidth: number; minHeight: number; maxHeight: number }\n  : T extends null\n  ? undefined\n  : never;\ntype HTMLElementOrNull = HTMLElement | null;\n\nfunction measureElement<T extends HTMLElementOrNull>(ref: T): MeasureR<T> {\n  if (ref === null) {\n    return undefined as MeasureR<T>;\n  }\n\n  const savedBodyOverflow = document.body.style.overflow;\n  const savedWidth = ref.style.width;\n  const savedHeight = ref.style.height;\n  const savedFlex = ref.style.flexGrow;\n  document.body.style.overflow = 'hidden';\n  ref.style.flexGrow = '0';\n  const { width: minWidth, height: minHeight } = ref.getBoundingClientRect();\n\n  ref.style.flexGrow = '100';\n  const { width: maxWidth, height: maxHeight } = ref.getBoundingClientRect();\n\n  document.body.style.overflow = savedBodyOverflow;\n  ref.style.width = savedWidth;\n  ref.style.height = savedHeight;\n  ref.style.flexGrow = savedFlex;\n\n  return { minWidth, maxWidth, minHeight, maxHeight } as MeasureR<T>;\n}\n\nfunction useResizeObserver(\n  target: Element,\n  cb: (entries: ResizeObserverEntry[]) => void,\n  throttleWait = 0,\n  deps?: React.DependencyList\n) {\n  const throttledCallback = throttle(cb, throttleWait);\n\n  useLayoutEffect(() => {\n    if (!target) {\n      return;\n    }\n\n    const resizeObserver = new ResizeObserver(throttledCallback);\n\n    resizeObserver.observe(target, { box: 'device-pixel-content-box' });\n    return () => resizeObserver.disconnect();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAmBA,MAAM,aAAgB,GAAA,GAAA,CAAA;AACtB,MAAM,gCAAoB,IAAA,GAAA,CAAI,CAAC,SAAA,EAAW,WAAW,CAAC,CAAA,CAAA;AACtD,MAAM,kCAAsB,IAAA,GAAA,CAAI,CAAC,WAAA,EAAa,YAAY,CAAC,CAAA,CAAA;AAE3D,MAAM,iBAAoB,GAAA;AAAA,EACxB,GAAK,EAAA;AAAA,IACH,GAAK,EAAA,OAAA;AAAA,IACL,IAAM,EAAA,SAAA;AAAA,IACN,GAAK,EAAA,UAAA;AAAA,IACL,GAAK,EAAA,UAAA;AAAA,GACP;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,GAAK,EAAA,QAAA;AAAA,IACL,IAAM,EAAA,SAAA;AAAA,IACN,GAAK,EAAA,WAAA;AAAA,IACL,GAAK,EAAA,WAAA;AAAA,GACP;AACF,CAAA,CAAA;AAEO,SAAS,QAAS,CAAA;AAAA,EACvB,SAAY,GAAA,KAAA;AAAA,EACZ,UAAa,GAAA,EAAA;AAAA,EACb,WAAc,GAAA,MAAA;AAAA,EACd,iBAAA;AAAA,EACA,mBAAA;AAAA,EACA,cAAA;AAAA,EACA,QAAA;AACF,CAAU,EAAA;AACR,EAAA,MAAM,IAAO,GAAA,KAAA,CAAM,QAAS,CAAA,OAAA,CAAQ,QAAQ,CAAA,CAAA;AAE5C,EAAM,MAAA,WAAA,GAAc,OAA8B,IAAI,CAAA,CAAA;AACtD,EAAM,MAAA,YAAA,GAAe,OAA8B,IAAI,CAAA,CAAA;AACvD,EAAM,MAAA,aAAA,GAAgB,OAA8B,IAAI,CAAA,CAAA;AACxD,EAAM,MAAA,YAAA,GAAe,OAA8B,IAAI,CAAA,CAAA;AACvD,EAAM,MAAA,aAAA,GAAgB,OAAsB,IAAI,CAAA,CAAA;AAChD,EAAM,MAAA,cAAA,GAAiB,OAAuB,KAAK,CAAA,CAAA;AAEnD,EAAM,MAAA,qBAAA,GAAwB,OAA0C,KAAS,CAAA,CAAA,CAAA;AACjF,EAAM,MAAA,QAAA,GAAW,OAA2B,KAAS,CAAA,CAAA,CAAA;AAErD,EAAM,MAAA,eAAA,GAAkB,kBAAkB,SAAW,CAAA,CAAA,GAAA,CAAA;AACrD,EAAM,MAAA,UAAA,GAAa,kBAAkB,SAAW,CAAA,CAAA,IAAA,CAAA;AAChD,EAAM,MAAA,UAAA,GAAa,kBAAkB,SAAW,CAAA,CAAA,GAAA,CAAA;AAChD,EAAM,MAAA,UAAA,GAAa,kBAAkB,SAAW,CAAA,CAAA,GAAA,CAAA;AAIhD,EAAA,iBAAA;AAAA,IACE,YAAa,CAAA,OAAA;AAAA,IACb,CAAC,OAAY,KAAA;AACX,MAAA,KAAA,MAAW,SAAS,OAAS,EAAA;AAC3B,QAAA,IAAI,CAAC,KAAM,CAAA,MAAA,CAAO,UAAW,CAAA,YAAA,CAAa,OAAO,CAAG,EAAA;AAClD,UAAA,OAAA;AAAA,SACF;AAEA,QAAA,MAAM,OAAU,GAAA,YAAA,CAAa,OAAS,CAAA,qBAAA,EAAwB,CAAA,eAAA,CAAA,CAAA;AAC9D,QAAM,MAAA,OAAA,GAAU,cAAe,CAAA,YAAA,CAAa,OAAQ,CAAA,CAAA;AACpD,QAAY,WAAA,CAAA,OAAA,CAAS,eAAe,CAAG,EAAA,KAAA;AAAA,UAAA,CACnC,UAAU,OAAQ,CAAA,UAAA,CAAA,KAAgB,OAAQ,CAAA,UAAA,CAAA,GAAc,QAAQ,UAAgB,CAAA,CAAA,GAAA,GAAA;AAAA,UAClF,CAAA;AAAA,UACA,GAAA;AAAA,SACF,CAAA,CAAA,CAAA;AAAA,OACF;AAAA,KACF;AAAA,IACA,GAAA;AAAA,IACA,CAAC,UAAA,EAAY,UAAY,EAAA,SAAA,EAAW,eAAe,CAAA;AAAA,GACrD,CAAA;AAEA,EAAM,MAAA,SAAA,GAAY,OAAsB,IAAI,CAAA,CAAA;AAC5C,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,CAA0C,KAAA;AAEzC,MAAA,cAAA,CAAe,OAAU,GAAA,YAAA,CAAa,OAAS,CAAA,qBAAA,EAAwB,CAAA,eAAA,CAAA,CAAA;AACvE,MAAA,aAAA,CAAc,OAAU,GAAA,YAAA,CAAa,OAAS,CAAA,qBAAA,EAAwB,CAAA,eAAA,CAAA,CAAA;AAGtE,MAAA,SAAA,CAAU,UAAU,CAAE,CAAA,UAAA,CAAA,CAAA;AACtB,MAAY,WAAA,CAAA,OAAA,CAAS,iBAAkB,CAAA,CAAA,CAAE,SAAS,CAAA,CAAA;AAClD,MAAsB,qBAAA,CAAA,OAAA,GAAU,cAAe,CAAA,YAAA,CAAa,OAAQ,CAAA,CAAA;AAEpE,MAAA,QAAA,CAAS,OAAU,GAAA,KAAA,CAAA,CAAA;AAAA,KACrB;AAAA,IACA,CAAC,iBAAiB,UAAU,CAAA;AAAA,GAC9B,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,CAA0C,KAAA;AACzC,MAAA,IAAI,SAAU,CAAA,OAAA,KAAY,IAAQ,IAAA,cAAA,CAAe,YAAY,KAAO,EAAA;AAClE,QAAM,MAAA,IAAA,GAAO,CAAE,CAAA,UAAA,CAAA,GAAc,SAAU,CAAA,OAAA,CAAA;AACvC,QAAA,MAAM,OAAO,qBAAsB,CAAA,OAAA,CAAA;AACnC,QAAM,MAAA,OAAA,GAAU,MAAM,cAAe,CAAA,OAAA,GAAU,MAAM,IAAK,CAAA,UAAA,CAAA,EAAa,KAAK,UAAW,CAAA,CAAA,CAAA;AACvF,QAAM,MAAA,OAAA,GAAU,OAAW,IAAA,aAAA,CAAc,OAAW,GAAA,UAAA,CAAA,CAAA;AACpD,QAAa,YAAA,CAAA,OAAA,CAAS,KAAM,CAAA,QAAA,GAAW,CAAG,EAAA,OAAA,CAAA,CAAA,CAAA;AAC1C,QAAA,aAAA,CAAc,OAAS,CAAA,KAAA,CAAM,QAAW,GAAA,CAAA,EAAG,CAAI,GAAA,OAAA,CAAA,CAAA,CAAA;AAC/C,QAAA,MAAM,YAAe,GAAA,KAAA;AAAA,UAAA,CACjB,UAAU,IAAK,CAAA,UAAA,CAAA,KAAgB,IAAK,CAAA,UAAA,CAAA,GAAc,KAAK,UAAgB,CAAA,CAAA,GAAA,GAAA;AAAA,UACzE,CAAA;AAAA,UACA,GAAA;AAAA,SACF,CAAA;AAEA,QAAY,WAAA,CAAA,OAAA,CAAS,eAAe,CAAG,EAAA,YAAA,CAAA,CAAA,CAAA;AAAA,OACzC;AAAA,KACF;AAAA,IACA,CAAC,UAAA,EAAY,UAAY,EAAA,UAAA,EAAY,UAAU,CAAA;AAAA,GACjD,CAAA;AAEA,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,CAA0C,KAAA;AACzC,MAAA,CAAA,CAAE,cAAe,EAAA,CAAA;AACjB,MAAA,CAAA,CAAE,eAAgB,EAAA,CAAA;AAClB,MAAY,WAAA,CAAA,OAAA,CAAS,qBAAsB,CAAA,CAAA,CAAE,SAAS,CAAA,CAAA;AACtD,MAAA,SAAA,CAAU,OAAU,GAAA,IAAA,CAAA;AACpB,MAAA,cAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,cAAA,CAAiB,UAAW,CAAA,YAAA,CAAa,OAAS,CAAA,KAAA,CAAM,QAAQ,CAAA,CAAA,CAAA;AAAA,KAClE;AAAA,IACA,CAAC,cAAc,CAAA;AAAA,GACjB,CAAA;AAEA,EAAA,MAAM,WAAc,GAAA,MAAA,iBAAW,IAAA,GAAA,EAAa,CAAA,CAAA;AAC5C,EAAM,MAAA,iBAAA,GAAoB,OAAsB,IAAI,CAAA,CAAA;AACpD,EAAA,MAAM,iBAAoB,GAAA,WAAA;AAAA,IACxB,CAAC,IAAiB,KAAA;AA3ItB,MAAA,IAAA,EAAA,CAAA;AA4IM,MAAM,MAAA,cAAA,GAAiB,WAAY,CAAA,OAAA,CAAQ,IAAS,KAAA,CAAA,CAAA;AACpD,MAAA,IAAI,cAAgB,EAAA;AAClB,QAAA,iBAAA,CAAkB,OAAU,GAAA,IAAA,CAAA;AAC5B,QAAA,OAAA;AAAA,OACF,MAAA,IAAW,cAAe,CAAA,OAAA,KAAY,KAAO,EAAA;AAC3C,QAAA,OAAA;AAAA,OACF;AAEA,MAAA,MAAM,EAAK,GAAA,IAAA,IAAA,CAAQ,EAAkB,GAAA,iBAAA,CAAA,OAAA,KAAlB,IAA6B,GAAA,EAAA,GAAA,IAAA,CAAA,CAAA;AAChD,MAAA,MAAM,KAAK,EAAK,GAAA,aAAA,CAAA;AAChB,MAAA,IAAI,UAAa,GAAA,CAAA,CAAA;AAEjB,MAAA,IAAI,cAAc,KAAO,EAAA;AACvB,QAAA,IAAI,WAAY,CAAA,OAAA,CAAQ,GAAI,CAAA,WAAW,CAAG,EAAA;AACxC,UAAc,UAAA,IAAA,EAAA,CAAA;AAAA,SAChB;AACA,QAAA,IAAI,WAAY,CAAA,OAAA,CAAQ,GAAI,CAAA,YAAY,CAAG,EAAA;AACzC,UAAc,UAAA,IAAA,EAAA,CAAA;AAAA,SAChB;AAAA,OACK,MAAA;AACL,QAAA,IAAI,WAAY,CAAA,OAAA,CAAQ,GAAI,CAAA,SAAS,CAAG,EAAA;AACtC,UAAc,UAAA,IAAA,EAAA,CAAA;AAAA,SAChB;AACA,QAAA,IAAI,WAAY,CAAA,OAAA,CAAQ,GAAI,CAAA,WAAW,CAAG,EAAA;AACxC,UAAc,UAAA,IAAA,EAAA,CAAA;AAAA,SAChB;AAAA,OACF;AAEA,MAAA,MAAM,gBAAgB,qBAAsB,CAAA,OAAA,CAAA;AAC5C,MAAA,MAAM,OAAU,GAAA,YAAA,CAAa,OAAS,CAAA,qBAAA,EAAwB,CAAA,eAAA,CAAA,CAAA;AAC9D,MAAA,MAAM,UAAU,KAAM,CAAA,OAAA,GAAU,YAAY,aAAc,CAAA,UAAA,CAAA,EAAa,cAAc,UAAW,CAAA,CAAA,CAAA;AAEhG,MAAM,MAAA,OAAA,GAAU,OAAW,IAAA,aAAA,CAAc,OAAW,GAAA,UAAA,CAAA,CAAA;AAEpD,MAAa,YAAA,CAAA,OAAA,CAAS,KAAM,CAAA,QAAA,GAAW,CAAG,EAAA,OAAA,CAAA,CAAA,CAAA;AAC1C,MAAA,aAAA,CAAc,OAAS,CAAA,KAAA,CAAM,QAAW,GAAA,CAAA,EAAG,CAAI,GAAA,OAAA,CAAA,CAAA,CAAA;AAC/C,MAAA,MAAM,gBACF,OAAU,GAAA,aAAA,CAAc,gBAAgB,aAAc,CAAA,UAAA,CAAA,GAAc,cAAc,UAAgB,CAAA,CAAA,GAAA,GAAA,CAAA;AACtG,MAAA,WAAA,CAAY,QAAS,YAAe,GAAA,CAAA,EAAG,KAAM,CAAA,YAAA,EAAc,GAAG,GAAG,CAAA,CAAA,CAAA,CAAA;AAEjE,MAAA,iBAAA,CAAkB,OAAU,GAAA,IAAA,CAAA;AAC5B,MAAA,MAAA,CAAO,sBAAsB,iBAAiB,CAAA,CAAA;AAAA,KAChD;AAAA,IACA,CAAC,SAAA,EAAW,UAAY,EAAA,UAAA,EAAY,YAAY,eAAe,CAAA;AAAA,GACjE,CAAA;AAEA,EAAA,MAAM,SAAY,GAAA,WAAA;AAAA,IAChB,CAAC,CAA2C,KAAA;AAC1C,MAAI,IAAA,CAAA,CAAE,QAAQ,OAAS,EAAA;AACrB,QAAI,IAAA,QAAA,CAAS,YAAY,KAAW,CAAA,EAAA;AAClC,UAAS,QAAA,CAAA,OAAA,GAAU,YAAa,CAAA,OAAA,CAAS,KAAM,CAAA,QAAA,CAAA;AAC/C,UAAa,YAAA,CAAA,OAAA,CAAS,MAAM,QAAW,GAAA,GAAA,CAAA;AACvC,UAAc,aAAA,CAAA,OAAA,CAAS,MAAM,QAAW,GAAA,GAAA,CAAA;AAAA,SACnC,MAAA;AACL,UAAa,YAAA,CAAA,OAAA,CAAS,KAAM,CAAA,QAAA,GAAW,QAAS,CAAA,OAAA,CAAA;AAChD,UAAA,aAAA,CAAc,QAAS,KAAM,CAAA,QAAA,GAAW,GAAG,CAAI,GAAA,UAAA,CAAW,SAAS,OAAO,CAAA,CAAA,CAAA,CAAA;AAC1E,UAAA,QAAA,CAAS,OAAU,GAAA,KAAA,CAAA,CAAA;AAAA,SACrB;AACA,QAAA,OAAA;AAAA,OACF,MAAA,IAAW,CAAE,CAAA,GAAA,KAAQ,MAAQ,EAAA;AAC3B,QAAsB,qBAAA,CAAA,OAAA,GAAU,cAAe,CAAA,YAAA,CAAa,OAAQ,CAAA,CAAA;AACpE,QAAA,aAAA,CAAc,OAAU,GAAA,YAAA,CAAa,OAAS,CAAA,qBAAA,EAAwB,CAAA,eAAA,CAAA,CAAA;AACtE,QAAA,MAAM,OAAU,GAAA,qBAAA,CAAsB,OAAQ,CAAA,UAAA,CAAA,IAAe,cAAc,OAAW,GAAA,UAAA,CAAA,CAAA;AACtF,QAAa,YAAA,CAAA,OAAA,CAAS,KAAM,CAAA,QAAA,GAAW,CAAG,EAAA,OAAA,CAAA,CAAA,CAAA;AAC1C,QAAA,aAAA,CAAc,OAAS,CAAA,KAAA,CAAM,QAAW,GAAA,CAAA,EAAG,CAAI,GAAA,OAAA,CAAA,CAAA,CAAA;AAC/C,QAAA,WAAA,CAAY,QAAS,YAAe,GAAA,GAAA,CAAA;AACpC,QAAA,OAAA;AAAA,OACF,MAAA,IAAW,CAAE,CAAA,GAAA,KAAQ,KAAO,EAAA;AAC1B,QAAsB,qBAAA,CAAA,OAAA,GAAU,cAAe,CAAA,YAAA,CAAa,OAAQ,CAAA,CAAA;AACpE,QAAA,aAAA,CAAc,OAAU,GAAA,YAAA,CAAa,OAAS,CAAA,qBAAA,EAAwB,CAAA,eAAA,CAAA,CAAA;AACtE,QAAA,MAAM,OAAU,GAAA,qBAAA,CAAsB,OAAQ,CAAA,UAAA,CAAA,IAAe,cAAc,OAAW,GAAA,UAAA,CAAA,CAAA;AACtF,QAAa,YAAA,CAAA,OAAA,CAAS,KAAM,CAAA,QAAA,GAAW,CAAG,EAAA,OAAA,CAAA,CAAA,CAAA;AAC1C,QAAA,aAAA,CAAc,OAAS,CAAA,KAAA,CAAM,QAAW,GAAA,CAAA,EAAG,CAAI,GAAA,OAAA,CAAA,CAAA,CAAA;AAC/C,QAAA,WAAA,CAAY,QAAS,YAAe,GAAA,KAAA,CAAA;AACpC,QAAA,OAAA;AAAA,OACF;AAEA,MACE,IAAA,EACG,cAAc,QAAY,IAAA,aAAA,CAAc,IAAI,CAAE,CAAA,GAAG,KACjD,SAAc,KAAA,KAAA,IAAS,gBAAgB,GAAI,CAAA,CAAA,CAAE,GAAG,CAEnD,CAAA,IAAA,WAAA,CAAY,QAAQ,GAAI,CAAA,CAAA,CAAE,GAAG,CAC7B,EAAA;AACA,QAAA,OAAA;AAAA,OACF;AAEA,MAAA,QAAA,CAAS,OAAU,GAAA,KAAA,CAAA,CAAA;AACnB,MAAA,CAAA,CAAE,cAAe,EAAA,CAAA;AACjB,MAAA,CAAA,CAAE,eAAgB,EAAA,CAAA;AAClB,MAAA,cAAA,CAAe,OAAU,GAAA,YAAA,CAAa,OAAS,CAAA,qBAAA,EAAwB,CAAA,eAAA,CAAA,CAAA;AACvE,MAAA,aAAA,CAAc,OAAU,GAAA,YAAA,CAAa,OAAS,CAAA,qBAAA,EAAwB,CAAA,eAAA,CAAA,CAAA;AACtE,MAAsB,qBAAA,CAAA,OAAA,GAAU,cAAe,CAAA,YAAA,CAAa,OAAQ,CAAA,CAAA;AACpE,MAAA,MAAM,SAAS,CAAC,WAAA,CAAY,OAAQ,CAAA,GAAA,CAAI,EAAE,GAAG,CAAA,CAAA;AAE7C,MAAA,IAAI,MAAQ,EAAA;AACV,QAAM,MAAA,qBAAA,GAAwB,WAAY,CAAA,OAAA,CAAQ,IAAS,KAAA,CAAA,CAAA;AAC3D,QAAY,WAAA,CAAA,OAAA,CAAQ,GAAI,CAAA,CAAA,CAAE,GAAG,CAAA,CAAA;AAE7B,QAAA,IAAI,qBAAuB,EAAA;AACzB,UAAA,MAAA,CAAO,sBAAsB,iBAAiB,CAAA,CAAA;AAAA,SAChD;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,SAAW,EAAA,iBAAA,EAAmB,UAAY,EAAA,UAAA,EAAY,iBAAiB,UAAU,CAAA;AAAA,GACpF,CAAA;AAEA,EAAA,MAAM,OAAU,GAAA,WAAA;AAAA,IACd,CAAC,CAA2C,KAAA;AAC1C,MAAA,IACG,SAAc,KAAA,KAAA,IAAS,CAAC,eAAA,CAAgB,IAAI,CAAE,CAAA,GAAG,CACjD,IAAA,SAAA,KAAc,YAAY,CAAC,aAAA,CAAc,GAAI,CAAA,CAAA,CAAE,GAAG,CACnD,EAAA;AACA,QAAA,OAAA;AAAA,OACF;AAEA,MAAY,WAAA,CAAA,OAAA,CAAQ,MAAO,CAAA,CAAA,CAAE,GAAG,CAAA,CAAA;AAChC,MAAA,cAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,cAAA,CAAiB,UAAW,CAAA,YAAA,CAAa,OAAS,CAAA,KAAA,CAAM,QAAQ,CAAA,CAAA,CAAA;AAAA,KAClE;AAAA,IACA,CAAC,WAAW,cAAc,CAAA;AAAA,GAC5B,CAAA;AAEA,EAAM,MAAA,aAAA,GAAgB,YAAY,MAAM;AACtC,IAAa,YAAA,CAAA,OAAA,CAAS,MAAM,QAAW,GAAA,KAAA,CAAA;AACvC,IAAc,aAAA,CAAA,OAAA,CAAS,MAAM,QAAW,GAAA,KAAA,CAAA;AACxC,IAAM,MAAA,GAAA,GAAM,cAAe,CAAA,YAAA,CAAa,OAAQ,CAAA,CAAA;AAChD,IAAA,qBAAA,CAAsB,OAAU,GAAA,GAAA,CAAA;AAChC,IAAA,cAAA,CAAe,OAAU,GAAA,YAAA,CAAa,OAAS,CAAA,qBAAA,EAAwB,CAAA,eAAA,CAAA,CAAA;AACvE,IAAY,WAAA,CAAA,OAAA,CAAS,YAAe,GAAA,CAAA,EAAA,CAChC,cAAe,CAAA,OAAA,GAAU,IAAI,UAAgB,CAAA,KAAA,GAAA,CAAI,UAAc,CAAA,GAAA,GAAA,CAAI,UAAgB,CAAA,CAAA,GAAA,GAAA,CAAA,CAAA,CAAA;AAAA,GAEtF,EAAA,CAAC,UAAY,EAAA,eAAA,EAAiB,UAAU,CAAC,CAAA,CAAA;AAE5C,EAAM,MAAA,MAAA,GAAS,YAAY,MAAM;AAE/B,IAAI,IAAA,WAAA,CAAY,OAAQ,CAAA,IAAA,GAAO,CAAG,EAAA;AAChC,MAAA,WAAA,CAAY,QAAQ,KAAM,EAAA,CAAA;AAC1B,MAAA,SAAA,CAAU,OAAU,GAAA,IAAA,CAAA;AACpB,MAAA,cAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,cAAA,CAAiB,UAAW,CAAA,YAAA,CAAa,OAAS,CAAA,KAAA,CAAM,QAAQ,CAAA,CAAA,CAAA;AAAA,KAClE;AAAA,GACF,EAAG,CAAC,cAAc,CAAC,CAAA,CAAA;AAEnB,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA,CAAA;AACnC,EAAA,MAAM,KAAK,WAAY,EAAA,CAAA;AAEvB,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACC,GAAK,EAAA,YAAA;AAAA,IACL,WAAW,MAAO,CAAA,SAAA;AAAA,IAClB,KAAO,EAAA;AAAA,MACL,aAAe,EAAA,SAAA;AAAA,KACjB;AAAA,GAAA,kBAEC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACC,GAAK,EAAA,YAAA;AAAA,IACL,WAAW,MAAO,CAAA,KAAA;AAAA,IAClB,KAAO,EAAA,cAAA,CAAA;AAAA,MACL,UAAU,WAAgB,KAAA,MAAA,GAAS,MAAM,KAAM,CAAA,WAAA,EAAa,GAAG,CAAC,CAAA;AAAA,MAChE,CAAC,UAAa,GAAA,aAAA;AAAA,KACX,EAAA,iBAAA,CAAA;AAAA,IAEL,IAAI,CAAe,YAAA,EAAA,EAAA,CAAA,CAAA;AAAA,GAElB,EAAA,IAAA,CAAK,CACR,CAAA,CAAA,kBAEC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACC,GAAK,EAAA,WAAA;AAAA,IACL,KAAO,EAAA,EAAE,CAAC,eAAA,GAAkB,GAAG,UAAe,CAAA,EAAA,CAAA,EAAA;AAAA,IAC9C,SAAA,EAAW,EAAG,CAAA,MAAA,CAAO,MAAQ,EAAA,EAAE,CAAC,MAAO,CAAA,gBAAA,GAAmB,SAAc,KAAA,QAAA,EAAU,CAAA;AAAA,IAClF,WAAA;AAAA,IACA,aAAA;AAAA,IACA,aAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,aAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAK,EAAA,WAAA;AAAA,IACL,eAAe,EAAA,CAAA;AAAA,IACf,eAAe,EAAA,GAAA;AAAA,IACf,eAAe,EAAA,EAAA;AAAA,IACf,iBAAe,CAAe,YAAA,EAAA,EAAA,CAAA,CAAA;AAAA,IAC9B,YAAW,EAAA,oBAAA;AAAA,IACX,QAAU,EAAA,CAAA;AAAA,GACX,mBAEA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACC,GAAK,EAAA,aAAA;AAAA,IACL,WAAW,MAAO,CAAA,KAAA;AAAA,IAClB,KAAO,EAAA,cAAA,CAAA;AAAA,MACL,QAAA,EAAU,gBAAgB,MAAS,GAAA,GAAA,GAAM,MAAM,CAAI,GAAA,WAAA,EAAa,GAAG,CAAC,CAAA;AAAA,MACpE,CAAC,UAAa,GAAA,aAAA;AAAA,KACX,EAAA,mBAAA,CAAA;AAAA,IAEL,IAAI,CAAa,UAAA,EAAA,EAAA,CAAA,CAAA;AAAA,GAEhB,EAAA,IAAA,CAAK,EACR,CACF,CAAA,CAAA;AAEJ,CAAA;AAEA,SAAS,UAAU,KAAsB,EAAA;AACvC,EAAO,OAAA;AAAA,IACL,QAAQ,GAAI,CAAA;AAAA,MACV,MAAQ,EAAA,YAAA;AAAA,MACR,QAAU,EAAA,UAAA;AAAA,MACV,UAAY,EAAA,CAAA;AAAA,MACZ,UAAY,EAAA,MAAA;AAAA,MAEZ,WAAa,EAAA;AAAA,QACX,OAAS,EAAA,IAAA;AAAA,QACT,QAAU,EAAA,UAAA;AAAA,QACV,eAAA,EAAiB,KAAM,CAAA,MAAA,CAAO,OAAQ,CAAA,IAAA;AAAA,QACtC,IAAM,EAAA,KAAA;AAAA,QACN,SAAW,EAAA,iBAAA;AAAA,QACX,GAAK,EAAA,CAAA;AAAA,QACL,MAAQ,EAAA,MAAA;AAAA,QACR,KAAO,EAAA,KAAA;AAAA,QACP,OAAS,EAAA,CAAA;AAAA,QACT,UAAY,EAAA,0BAAA;AAAA,OACd;AAAA,MAEA,UAAY,EAAA;AAAA,QACV,OAAS,EAAA,IAAA;AAAA,QACT,KAAO,EAAA,KAAA;AAAA,QACP,YAAc,EAAA,KAAA;AAAA,QACd,eAAA,EAAiB,KAAM,CAAA,MAAA,CAAO,MAAO,CAAA,IAAA;AAAA,QACrC,UAAY,EAAA,mCAAA;AAAA,QACZ,MAAQ,EAAA,KAAA;AAAA,QACR,GAAK,EAAA,uBAAA;AAAA,QACL,SAAW,EAAA,kBAAA;AAAA,QACX,QAAU,EAAA,UAAA;AAAA,QACV,IAAM,EAAA,KAAA;AAAA,OACR;AAAA,MAEA,0BAA4B,EAAA;AAAA,QAC1B,OAAS,EAAA,MAAA;AAAA,QACT,WAAa,EAAA;AAAA,UACX,OAAS,EAAA,CAAA;AAAA,SACX;AAAA,QAEA,UAAY,EAAA;AAAA,UACV,eAAA,EAAiB,KAAM,CAAA,MAAA,CAAO,OAAQ,CAAA,IAAA;AAAA,SACxC;AAAA,OACF;AAAA,KACD,CAAA;AAAA,IACD,kBAAkB,GAAI,CAAA;AAAA,MACpB,MAAQ,EAAA,YAAA;AAAA,MAER,WAAa,EAAA;AAAA,QACX,IAAM,EAAA,SAAA;AAAA,QACN,SAAW,EAAA,kBAAA;AAAA,QACX,GAAK,EAAA,KAAA;AAAA,QACL,MAAQ,EAAA,KAAA;AAAA,QACR,KAAO,EAAA,MAAA;AAAA,OACT;AAAA,MAEA,UAAY,EAAA;AAAA,QACV,KAAO,EAAA,KAAA;AAAA,QACP,MAAQ,EAAA,KAAA;AAAA,QACR,GAAK,EAAA,KAAA;AAAA,QACL,SAAW,EAAA,kBAAA;AAAA,QACX,IAAM,EAAA,uBAAA;AAAA,OACR;AAAA,KACD,CAAA;AAAA,IACD,WAAW,GAAI,CAAA;AAAA,MACb,OAAS,EAAA,MAAA;AAAA,MACT,KAAO,EAAA,MAAA;AAAA,MACP,QAAU,EAAA,CAAA;AAAA,MACV,QAAU,EAAA,QAAA;AAAA,KACX,CAAA;AAAA,IACD,KAAA,EAAO,IAAI,EAAE,OAAA,EAAS,QAAQ,QAAU,EAAA,UAAA,EAAY,SAAW,EAAA,CAAA,EAAG,CAAA;AAAA,GACpE,CAAA;AACF,CAAA;AASA,SAAS,eAA4C,GAAqB,EAAA;AACxE,EAAA,IAAI,QAAQ,IAAM,EAAA;AAChB,IAAO,OAAA,KAAA,CAAA,CAAA;AAAA,GACT;AAEA,EAAM,MAAA,iBAAA,GAAoB,QAAS,CAAA,IAAA,CAAK,KAAM,CAAA,QAAA,CAAA;AAC9C,EAAM,MAAA,UAAA,GAAa,IAAI,KAAM,CAAA,KAAA,CAAA;AAC7B,EAAM,MAAA,WAAA,GAAc,IAAI,KAAM,CAAA,MAAA,CAAA;AAC9B,EAAM,MAAA,SAAA,GAAY,IAAI,KAAM,CAAA,QAAA,CAAA;AAC5B,EAAS,QAAA,CAAA,IAAA,CAAK,MAAM,QAAW,GAAA,QAAA,CAAA;AAC/B,EAAA,GAAA,CAAI,MAAM,QAAW,GAAA,GAAA,CAAA;AACrB,EAAA,MAAM,EAAE,KAAO,EAAA,QAAA,EAAU,QAAQ,SAAU,EAAA,GAAI,IAAI,qBAAsB,EAAA,CAAA;AAEzE,EAAA,GAAA,CAAI,MAAM,QAAW,GAAA,KAAA,CAAA;AACrB,EAAA,MAAM,EAAE,KAAO,EAAA,QAAA,EAAU,QAAQ,SAAU,EAAA,GAAI,IAAI,qBAAsB,EAAA,CAAA;AAEzE,EAAS,QAAA,CAAA,IAAA,CAAK,MAAM,QAAW,GAAA,iBAAA,CAAA;AAC/B,EAAA,GAAA,CAAI,MAAM,KAAQ,GAAA,UAAA,CAAA;AAClB,EAAA,GAAA,CAAI,MAAM,MAAS,GAAA,WAAA,CAAA;AACnB,EAAA,GAAA,CAAI,MAAM,QAAW,GAAA,SAAA,CAAA;AAErB,EAAA,OAAO,EAAE,QAAA,EAAU,QAAU,EAAA,SAAA,EAAW,SAAU,EAAA,CAAA;AACpD,CAAA;AAEA,SAAS,iBACP,CAAA,MAAA,EACA,EACA,EAAA,YAAA,GAAe,GACf,IACA,EAAA;AACA,EAAM,MAAA,iBAAA,GAAoB,QAAS,CAAA,EAAA,EAAI,YAAY,CAAA,CAAA;AAEnD,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,IAAI,CAAC,MAAQ,EAAA;AACX,MAAA,OAAA;AAAA,KACF;AAEA,IAAM,MAAA,cAAA,GAAiB,IAAI,cAAA,CAAe,iBAAiB,CAAA,CAAA;AAE3D,IAAA,cAAA,CAAe,OAAQ,CAAA,MAAA,EAAQ,EAAE,GAAA,EAAK,4BAA4B,CAAA,CAAA;AAClE,IAAO,OAAA,MAAM,eAAe,UAAW,EAAA,CAAA;AAAA,KAEtC,IAAI,CAAA,CAAA;AACT;;;;"}
+{"version":3,"file":"Splitter.js","sources":["../../../../../src/components/layout/split/Splitter.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2 } from '@grafana/ui';\nimport { clamp, throttle } from 'lodash';\nimport React, { useCallback, useLayoutEffect, useRef } from 'react';\nimport { useUniqueId } from '../LazyLoader';\n\ninterface Props {\n  handleSize?: number;\n  initialSize?: number | 'auto';\n  direction?: 'row' | 'column';\n  primary?: 'first' | 'second';\n  collapsedDefault?: boolean;\n  primaryPaneStyles?: React.CSSProperties;\n  secondaryPaneStyles?: React.CSSProperties;\n  onDragFinished?: (size: number) => void;\n  children: [React.ReactNode, React.ReactNode];\n}\n\nconst PIXELS_PER_MS = 0.3 as const;\nconst VERTICAL_KEYS = new Set(['ArrowUp', 'ArrowDown']);\nconst HORIZONTAL_KEYS = new Set(['ArrowLeft', 'ArrowRight']);\n\nconst propsForDirection = {\n  row: {\n    dim: 'width',\n    axis: 'clientX',\n    min: 'minWidth',\n    max: 'maxWidth',\n  },\n  column: {\n    dim: 'height',\n    axis: 'clientY',\n    min: 'minHeight',\n    max: 'maxHeight',\n  },\n} as const;\n\nexport function Splitter({\n  direction = 'row',\n  handleSize = 32,\n  initialSize = 'auto',\n  primaryPaneStyles,\n  secondaryPaneStyles,\n  onDragFinished,\n  children,\n}: Props) {\n  const kids = React.Children.toArray(children);\n\n  const splitterRef = useRef<HTMLDivElement | null>(null);\n  const firstPaneRef = useRef<HTMLDivElement | null>(null);\n  const secondPaneRef = useRef<HTMLDivElement | null>(null);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const containerSize = useRef<number | null>(null);\n  const primarySizeRef = useRef<'1fr' | number>('1fr');\n\n  const firstPaneMeasurements = useRef<ReturnType<typeof measureElement>>(undefined);\n  const savedPos = useRef<string | undefined>(undefined);\n\n  const measurementProp = propsForDirection[direction].dim;\n  const clientAxis = propsForDirection[direction].axis;\n  const minDimProp = propsForDirection[direction].min;\n  const maxDimProp = propsForDirection[direction].max;\n\n  // Using a resize observer here, as with content or screen based width/height the ratio between panes might\n  // change after a window resize, so ariaValueNow needs to be updated accordingly\n  useResizeObserver(\n    containerRef.current!,\n    (entries) => {\n      for (const entry of entries) {\n        if (!entry.target.isSameNode(containerRef.current)) {\n          return;\n        }\n\n        const curSize = firstPaneRef.current!.getBoundingClientRect()[measurementProp];\n        const newDims = measureElement(firstPaneRef.current!);\n        splitterRef.current!.ariaValueNow = `${clamp(\n          ((curSize - newDims[minDimProp]) / (newDims[maxDimProp] - newDims[minDimProp])) * 100,\n          0,\n          100\n        )}`;\n      }\n    },\n    500,\n    [maxDimProp, minDimProp, direction, measurementProp]\n  );\n\n  const dragStart = useRef<number | null>(null);\n  const onPointerDown = useCallback(\n    (e: React.PointerEvent<HTMLDivElement>) => {\n      // measure left-side width\n      primarySizeRef.current = firstPaneRef.current!.getBoundingClientRect()[measurementProp];\n      containerSize.current = containerRef.current!.getBoundingClientRect()[measurementProp];\n\n      // set position at start of drag\n      dragStart.current = e[clientAxis];\n      splitterRef.current!.setPointerCapture(e.pointerId);\n      firstPaneMeasurements.current = measureElement(firstPaneRef.current!);\n\n      savedPos.current = undefined;\n    },\n    [measurementProp, clientAxis]\n  );\n\n  const onPointerMove = useCallback(\n    (e: React.PointerEvent<HTMLDivElement>) => {\n      if (dragStart.current !== null && primarySizeRef.current !== '1fr') {\n        const diff = e[clientAxis] - dragStart.current;\n        const dims = firstPaneMeasurements.current!;\n        const newSize = clamp(primarySizeRef.current + diff, dims[minDimProp], dims[maxDimProp]);\n        const newFlex = newSize / (containerSize.current! - handleSize);\n        firstPaneRef.current!.style.flexGrow = `${newFlex}`;\n        secondPaneRef.current!.style.flexGrow = `${1 - newFlex}`;\n        const ariaValueNow = clamp(\n          ((newSize - dims[minDimProp]) / (dims[maxDimProp] - dims[minDimProp])) * 100,\n          0,\n          100\n        );\n\n        splitterRef.current!.ariaValueNow = `${ariaValueNow}`;\n      }\n    },\n    [handleSize, clientAxis, minDimProp, maxDimProp]\n  );\n\n  const onPointerUp = useCallback(\n    (e: React.PointerEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n      splitterRef.current!.releasePointerCapture(e.pointerId);\n      dragStart.current = null;\n      onDragFinished?.(parseFloat(firstPaneRef.current!.style.flexGrow));\n    },\n    [onDragFinished]\n  );\n\n  const pressedKeys = useRef(new Set<string>());\n  const keysLastHandledAt = useRef<number | null>(null);\n  const handlePressedKeys = useCallback(\n    (time: number) => {\n      const nothingPressed = pressedKeys.current.size === 0;\n      if (nothingPressed) {\n        keysLastHandledAt.current = null;\n        return;\n      } else if (primarySizeRef.current === '1fr') {\n        return;\n      }\n\n      const dt = time - (keysLastHandledAt.current ?? time);\n      const dx = dt * PIXELS_PER_MS;\n      let sizeChange = 0;\n\n      if (direction === 'row') {\n        if (pressedKeys.current.has('ArrowLeft')) {\n          sizeChange -= dx;\n        }\n        if (pressedKeys.current.has('ArrowRight')) {\n          sizeChange += dx;\n        }\n      } else {\n        if (pressedKeys.current.has('ArrowUp')) {\n          sizeChange -= dx;\n        }\n        if (pressedKeys.current.has('ArrowDown')) {\n          sizeChange += dx;\n        }\n      }\n\n      const firstPaneDims = firstPaneMeasurements.current!;\n      const curSize = firstPaneRef.current!.getBoundingClientRect()[measurementProp];\n      const newSize = clamp(curSize + sizeChange, firstPaneDims[minDimProp], firstPaneDims[maxDimProp]);\n\n      const newFlex = newSize / (containerSize.current! - handleSize);\n\n      firstPaneRef.current!.style.flexGrow = `${newFlex}`;\n      secondPaneRef.current!.style.flexGrow = `${1 - newFlex}`;\n      const ariaValueNow =\n        ((newSize - firstPaneDims[minDimProp]) / (firstPaneDims[maxDimProp] - firstPaneDims[minDimProp])) * 100;\n      splitterRef.current!.ariaValueNow = `${clamp(ariaValueNow, 0, 100)}`;\n\n      keysLastHandledAt.current = time;\n      window.requestAnimationFrame(handlePressedKeys);\n    },\n    [direction, handleSize, minDimProp, maxDimProp, measurementProp]\n  );\n\n  const onKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Enter') {\n        if (savedPos.current === undefined) {\n          savedPos.current = firstPaneRef.current!.style.flexGrow;\n          firstPaneRef.current!.style.flexGrow = '0';\n          secondPaneRef.current!.style.flexGrow = '1';\n        } else {\n          firstPaneRef.current!.style.flexGrow = savedPos.current;\n          secondPaneRef.current!.style.flexGrow = `${1 - parseFloat(savedPos.current)}`;\n          savedPos.current = undefined;\n        }\n        return;\n      } else if (e.key === 'Home') {\n        firstPaneMeasurements.current = measureElement(firstPaneRef.current!);\n        containerSize.current = containerRef.current!.getBoundingClientRect()[measurementProp];\n        const newFlex = firstPaneMeasurements.current[minDimProp] / (containerSize.current! - handleSize);\n        firstPaneRef.current!.style.flexGrow = `${newFlex}`;\n        secondPaneRef.current!.style.flexGrow = `${1 - newFlex}`;\n        splitterRef.current!.ariaValueNow = '0';\n        return;\n      } else if (e.key === 'End') {\n        firstPaneMeasurements.current = measureElement(firstPaneRef.current!);\n        containerSize.current = containerRef.current!.getBoundingClientRect()[measurementProp];\n        const newFlex = firstPaneMeasurements.current[maxDimProp] / (containerSize.current! - handleSize);\n        firstPaneRef.current!.style.flexGrow = `${newFlex}`;\n        secondPaneRef.current!.style.flexGrow = `${1 - newFlex}`;\n        splitterRef.current!.ariaValueNow = '100';\n        return;\n      }\n\n      if (\n        !(\n          (direction === 'column' && VERTICAL_KEYS.has(e.key)) ||\n          (direction === 'row' && HORIZONTAL_KEYS.has(e.key))\n        ) ||\n        pressedKeys.current.has(e.key)\n      ) {\n        return;\n      }\n\n      savedPos.current = undefined;\n      e.preventDefault();\n      e.stopPropagation();\n      primarySizeRef.current = firstPaneRef.current!.getBoundingClientRect()[measurementProp];\n      containerSize.current = containerRef.current!.getBoundingClientRect()[measurementProp];\n      firstPaneMeasurements.current = measureElement(firstPaneRef.current!);\n      const newKey = !pressedKeys.current.has(e.key);\n\n      if (newKey) {\n        const initiateAnimationLoop = pressedKeys.current.size === 0;\n        pressedKeys.current.add(e.key);\n\n        if (initiateAnimationLoop) {\n          window.requestAnimationFrame(handlePressedKeys);\n        }\n      }\n    },\n    [direction, handlePressedKeys, handleSize, maxDimProp, measurementProp, minDimProp]\n  );\n\n  const onKeyUp = useCallback(\n    (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (\n        (direction === 'row' && !HORIZONTAL_KEYS.has(e.key)) ||\n        (direction === 'column' && !VERTICAL_KEYS.has(e.key))\n      ) {\n        return;\n      }\n\n      pressedKeys.current.delete(e.key);\n      onDragFinished?.(parseFloat(firstPaneRef.current!.style.flexGrow));\n    },\n    [direction, onDragFinished]\n  );\n\n  const onDoubleClick = useCallback(() => {\n    firstPaneRef.current!.style.flexGrow = '0.5';\n    secondPaneRef.current!.style.flexGrow = '0.5';\n    const dim = measureElement(firstPaneRef.current!);\n    firstPaneMeasurements.current = dim;\n    primarySizeRef.current = firstPaneRef.current!.getBoundingClientRect()[measurementProp];\n    splitterRef.current!.ariaValueNow = `${\n      ((primarySizeRef.current - dim[minDimProp]) / (dim[maxDimProp] - dim[minDimProp])) * 100\n    }`;\n  }, [maxDimProp, measurementProp, minDimProp]);\n\n  const onBlur = useCallback(() => {\n    // If focus is lost while keys are held, stop changing panel sizes\n    if (pressedKeys.current.size > 0) {\n      pressedKeys.current.clear();\n      dragStart.current = null;\n      onDragFinished?.(parseFloat(firstPaneRef.current!.style.flexGrow));\n    }\n  }, [onDragFinished]);\n\n  const styles = useStyles2(getStyles);\n  const id = useUniqueId();\n\n  const secondAvailable = kids.length === 2;\n  const visibilitySecond = secondAvailable ? 'visible' : 'hidden';\n\n  return (\n    <div\n      ref={containerRef}\n      className={styles.container}\n      style={{\n        flexDirection: direction,\n      }}\n    >\n      <div\n        ref={firstPaneRef}\n        className={styles.panel}\n        style={{\n          flexGrow: initialSize === 'auto' ? 0.5 : clamp(initialSize, 0, 1),\n          [minDimProp]: 'min-content',\n          ...primaryPaneStyles,\n        }}\n        id={`start-panel-${id}`}\n      >\n        {kids[0]}\n      </div>\n\n      {kids[1] && (\n        <>\n          <div\n            ref={splitterRef}\n            style={{ [measurementProp]: `${handleSize}px` }}\n            className={cx(styles.handle, { [styles.handleHorizontal]: direction === 'column' })}\n            onPointerUp={onPointerUp}\n            onPointerDown={onPointerDown}\n            onPointerMove={onPointerMove}\n            onKeyDown={onKeyDown}\n            onKeyUp={onKeyUp}\n            onDoubleClick={onDoubleClick}\n            onBlur={onBlur}\n            role=\"separator\"\n            aria-valuemin={0}\n            aria-valuemax={100}\n            aria-valuenow={50}\n            aria-controls={`start-panel-${id}`}\n            aria-label=\"Pane resize widget\"\n            tabIndex={0}\n          ></div>\n\n          <div\n            ref={secondPaneRef}\n            className={styles.panel}\n            style={{\n              flexGrow: initialSize === 'auto' ? 0.5 : clamp(1 - initialSize, 0, 1),\n              [minDimProp]: 'min-content',\n              visibility: `${visibilitySecond}`,\n              ...secondaryPaneStyles,\n            }}\n            id={`end-panel-${id}`}\n          >\n            {kids[1]}\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n\nfunction getStyles(theme: GrafanaTheme2) {\n  return {\n    handle: css({\n      cursor: 'col-resize',\n      position: 'relative',\n      flexShrink: 0,\n      userSelect: 'none',\n\n      '&::before': {\n        content: '\"\"',\n        position: 'absolute',\n        backgroundColor: theme.colors.primary.main,\n        left: '50%',\n        transform: 'translate(-50%)',\n        top: 0,\n        height: '100%',\n        width: '1px',\n        opacity: 0,\n        transition: 'opacity ease-in-out 0.2s',\n      },\n\n      '&::after': {\n        content: '\"\"',\n        width: '4px',\n        borderRadius: '4px',\n        backgroundColor: theme.colors.border.weak,\n        transition: 'background-color ease-in-out 0.2s',\n        height: '50%',\n        top: 'calc(50% - (50%) / 2)',\n        transform: 'translateX(-50%)',\n        position: 'absolute',\n        left: '50%',\n      },\n\n      '&:hover, &:focus-visible': {\n        outline: 'none',\n        '&::before': {\n          opacity: 1,\n        },\n\n        '&::after': {\n          backgroundColor: theme.colors.primary.main,\n        },\n      },\n    }),\n    handleHorizontal: css({\n      cursor: 'row-resize',\n\n      '&::before': {\n        left: 'inherit',\n        transform: 'translateY(-50%)',\n        top: '50%',\n        height: '1px',\n        width: '100%',\n      },\n\n      '&::after': {\n        width: '50%',\n        height: '4px',\n        top: '50%',\n        transform: 'translateY(-50%)',\n        left: 'calc(50% - (50%) / 2)',\n      },\n    }),\n    container: css({\n      display: 'flex',\n      width: '100%',\n      flexGrow: 1,\n      overflow: 'hidden',\n    }),\n    panel: css({ display: 'flex', position: 'relative', flexBasis: 0 }),\n  };\n}\n\ntype MeasureR<T> = T extends HTMLElement\n  ? { minWidth: number; maxWidth: number; minHeight: number; maxHeight: number }\n  : T extends null\n  ? undefined\n  : never;\ntype HTMLElementOrNull = HTMLElement | null;\n\nfunction measureElement<T extends HTMLElementOrNull>(ref: T): MeasureR<T> {\n  if (ref === null) {\n    return undefined as MeasureR<T>;\n  }\n\n  const savedBodyOverflow = document.body.style.overflow;\n  const savedWidth = ref.style.width;\n  const savedHeight = ref.style.height;\n  const savedFlex = ref.style.flexGrow;\n  document.body.style.overflow = 'hidden';\n  ref.style.flexGrow = '0';\n  const { width: minWidth, height: minHeight } = ref.getBoundingClientRect();\n\n  ref.style.flexGrow = '100';\n  const { width: maxWidth, height: maxHeight } = ref.getBoundingClientRect();\n\n  document.body.style.overflow = savedBodyOverflow;\n  ref.style.width = savedWidth;\n  ref.style.height = savedHeight;\n  ref.style.flexGrow = savedFlex;\n\n  return { minWidth, maxWidth, minHeight, maxHeight } as MeasureR<T>;\n}\n\nfunction useResizeObserver(\n  target: Element,\n  cb: (entries: ResizeObserverEntry[]) => void,\n  throttleWait = 0,\n  deps?: React.DependencyList\n) {\n  const throttledCallback = throttle(cb, throttleWait);\n\n  useLayoutEffect(() => {\n    if (!target) {\n      return;\n    }\n\n    const resizeObserver = new ResizeObserver(throttledCallback);\n\n    resizeObserver.observe(target, { box: 'device-pixel-content-box' });\n    return () => resizeObserver.disconnect();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n}\n"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -1846,7 +1846,7 @@ interface SceneFlexItemRenderProps<T> extends SceneComponentProps<T> {
 
 interface SplitLayoutState extends SceneObjectState, SceneFlexItemPlacement {
     primary: SceneFlexItemLike;
-    secondary: SceneFlexItemLike;
+    secondary?: SceneFlexItemLike;
     direction: 'row' | 'column';
     initialSize?: number;
     primaryPaneStyles?: CSSProperties;

package/dist/index.js

@@ -8586,6 +8586,8 @@ function Splitter({
   }, [onDragFinished]);
   const styles = ui.useStyles2(getStyles$3);
   const id = useUniqueId();
+  const secondAvailable = kids.length === 2;
+  const visibilitySecond = secondAvailable ? "visible" : "hidden";
   return /* @__PURE__ */ React__default["default"].createElement("div", {
     ref: containerRef,
     className: styles.container,
@@ -8600,7 +8602,7 @@ function Splitter({
       [minDimProp]: "min-content"
     }, primaryPaneStyles),
     id: `start-panel-${id}`
-  }, kids[0]), /* @__PURE__ */ React__default["default"].createElement("div", {
+  }, kids[0]), kids[1] && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("div", {
     ref: splitterRef,
     style: { [measurementProp]: `${handleSize}px` },
     className: css.cx(styles.handle, { [styles.handleHorizontal]: direction === "column" }),
@@ -8623,10 +8625,11 @@ function Splitter({
     className: styles.panel,
     style: __spreadValues$3({
       flexGrow: initialSize === "auto" ? 0.5 : lodash.clamp(1 - initialSize, 0, 1),
-      [minDimProp]: "min-content"
+      [minDimProp]: "min-content",
+      visibility: `${visibilitySecond}`
     }, secondaryPaneStyles),
     id: `end-panel-${id}`
-  }, kids[1]));
+  }, kids[1])));
 }
 function getStyles$3(theme) {
   return {
@@ -8732,17 +8735,18 @@ function SplitLayoutRenderer({ model }) {
     return null;
   }
   const Prim = primary.Component;
-  const Sec = secondary.Component;
+  const Sec = secondary == null ? void 0 : secondary.Component;
+  let startSize = secondary ? initialSize : 1;
   return /* @__PURE__ */ React__default["default"].createElement(Splitter, {
     direction,
-    initialSize: initialSize != null ? initialSize : 0.5,
+    initialSize: startSize != null ? startSize : 0.5,
     primaryPaneStyles,
     secondaryPaneStyles
   }, /* @__PURE__ */ React__default["default"].createElement(Prim, {
     key: primary.state.key,
     model: primary,
     parentState: model.state
-  }), /* @__PURE__ */ React__default["default"].createElement(Sec, {
+  }), Sec && secondary && /* @__PURE__ */ React__default["default"].createElement(Sec, {
     key: secondary.state.key,
     model: secondary,
     parentState: model.state