@itwin/appui-react 4.17.0 → 5.0.0-dev.2

package/lib/appui-react/layout/widget-panels/Panel.scss

@@ -0,0 +1,258 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "variables" as *;
+
+@layer appui.component {
+  .nz-widgetPanels-panel {
+    position: relative;
+
+    > .nz-grip-container {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      pointer-events: none;
+
+      > .nz-grip {
+        pointer-events: all;
+        position: absolute;
+        z-index: 1;
+      }
+    }
+
+    > .nz-content {
+      display: flex;
+      position: relative;
+      background: var(--iui-color-background-hover);
+    }
+
+    &.nz-transition {
+      transition-duration: var(--iui-duration-2);
+      transition-timing-function: ease-in;
+    }
+
+    &.nz-left,
+    &.nz-right {
+      max-width: 100%;
+      min-height: 0;
+      height: 100%;
+
+      > .nz-content {
+        flex-direction: column;
+        height: 100%;
+        width: 100%;
+      }
+
+      > .nz-grip-container {
+        top: 0;
+        min-width: $nz-grip-width * 0.5;
+
+        > .nz-grip {
+          top: 50%;
+        }
+      }
+
+      &.nz-transition {
+        transition-property: width;
+      }
+
+      &.nz-span-top {
+        grid-row-start: 2;
+      }
+
+      &:not(.nz-span-top) {
+        grid-row-start: 1;
+      }
+
+      &.nz-span-bottom {
+        grid-row-end: 3;
+      }
+
+      &:not(.nz-span-bottom) {
+        grid-row-end: 4;
+      }
+    }
+
+    &.nz-left {
+      > .nz-grip-container {
+        left: 0;
+
+        > .nz-grip.nz-grip {
+          right: calc(#{$nz-grip-width} * -0.5);
+          transform: translate(0, -50%);
+        }
+      }
+
+      &.nz-transition {
+        > .nz-content {
+          position: absolute;
+          right: 0;
+        }
+      }
+
+      &.nz-collapsed {
+        &.nz-captured {
+          &:not(.nz-transition) {
+            > .nz-content {
+              position: absolute;
+              width: unset;
+              right: -$nz-grip-width * 0.5;
+            }
+          }
+        }
+
+        > .nz-grip-container > .nz-grip {
+          right: 0;
+        }
+      }
+    }
+
+    &.nz-right {
+      > .nz-grip-container {
+        right: 0;
+
+        > .nz-grip.nz-grip {
+          left: calc(#{$nz-grip-width} * -0.5);
+          transform: translate(0, -50%);
+        }
+      }
+
+      > .nz-content {
+        left: 0;
+      }
+
+      &.nz-collapsed {
+        &.nz-captured {
+          &:not(.nz-transition) {
+            > .nz-content {
+              position: absolute;
+              width: unset;
+              left: -$nz-grip-width * 0.5;
+            }
+          }
+        }
+
+        > .nz-grip-container > .nz-grip {
+          left: 0;
+        }
+      }
+    }
+
+    &.nz-top,
+    &.nz-bottom {
+      max-height: 100%;
+      min-width: 0;
+
+      &.nz-transition {
+        transition-property: height;
+      }
+
+      > .nz-grip-container {
+        left: 0;
+        min-height: $nz-grip-width * 0.5;
+
+        > .nz-grip {
+          left: 50%;
+        }
+      }
+
+      > .nz-content {
+        flex-direction: row;
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    &.nz-top {
+      > .nz-grip-container {
+        top: 0;
+
+        > .nz-grip.nz-grip {
+          bottom: calc(#{$nz-grip-width} * -0.5);
+          transform: translate(-50%, 0);
+        }
+      }
+
+      &.nz-transition {
+        > .nz-content {
+          position: absolute;
+          bottom: 0;
+        }
+      }
+
+      &.nz-span {
+        grid-column: 1/4;
+      }
+
+      &:not(.nz-span) {
+        grid-column: 2/3;
+      }
+
+      &.nz-collapsed {
+        &.nz-captured {
+          &:not(.nz-transition) {
+            > .nz-content {
+              position: absolute;
+              height: unset;
+              bottom: -$nz-grip-width * 0.5;
+            }
+          }
+        }
+
+        > .nz-grip-container > .nz-grip {
+          bottom: 0;
+        }
+      }
+    }
+
+    &.nz-bottom {
+      > .nz-grip-container {
+        bottom: 0;
+
+        > .nz-grip {
+          top: 0;
+          transform: translate(-50%, 0);
+        }
+      }
+
+      &.nz-span {
+        grid-column: 1/4;
+      }
+
+      &:not(.nz-span) {
+        grid-column: 2/3;
+      }
+
+      &.nz-collapsed {
+        &.nz-captured {
+          &:not(.nz-transition) {
+            > .nz-content {
+              position: absolute;
+              height: unset;
+              top: -$nz-grip-width * 0.5;
+            }
+          }
+        }
+      }
+    }
+
+    &.nz-collapsed {
+      > .nz-content {
+        overflow: hidden;
+      }
+    }
+
+    &:not(.nz-collapsed) {
+      > .nz-content {
+        height: 100%;
+        width: 100%;
+      }
+    }
+  }
+
+  .nz-widgetPanels_panelContainer {
+    position: relative;
+    height: 100%;
+  }
+}

package/lib/appui-react/layout/widget-panels/PanelSections.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelSections.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget-panels/PanelSections.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsH/B,gBAAgB;AAChB,wBAAgB,aAAa,sBAsB5B"}

package/lib/appui-react/layout/widget-panels/PanelSections.js

@@ -0,0 +1,117 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module WidgetPanels
+ */
+import "./PanelSections.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { assert } from "@itwin/core-bentley";
+import { NineZoneDispatchContext } from "../base/NineZone.js";
+import { PanelWidget } from "../widget/PanelWidget.js";
+import { useLayout } from "../base/LayoutStore.js";
+import { isHorizontalPanelSide, PanelSideContext } from "./Panel.js";
+import { useMaximizedPanel, useMaximizedSection, } from "../../preview/enable-maximized-widget/useMaximizedWidget.js";
+function PanelSplitter() {
+    const dispatch = React.useContext(NineZoneDispatchContext);
+    const side = React.useContext(PanelSideContext);
+    assert(!!side);
+    const containerRef = React.useRef(null);
+    const splitterProcessingActiveRef = React.useRef(false);
+    const isHorizontal = isHorizontalPanelSide(side);
+    const getPercentage = React.useCallback((min, max, current) => {
+        const range = max - min;
+        const adjusted = Math.max(min, Math.min(max, current));
+        if (adjusted === min)
+            return 0;
+        if (adjusted === max)
+            return 100;
+        const percent = ((adjusted - min) * 100) / range;
+        return percent;
+    }, []);
+    const updatePanelSize = React.useCallback((event) => {
+        if (!containerRef.current)
+            return;
+        const parentPanel = containerRef.current.closest(".nz-widgetPanels-panel");
+        const sectionToResize = containerRef.current.parentElement;
+        if (parentPanel && sectionToResize) {
+            const rect = parentPanel.getBoundingClientRect();
+            const percent = getPercentage(isHorizontal ? rect.left : rect.top, isHorizontal ? rect.right : rect.bottom, isHorizontal ? event.clientX : event.clientY);
+            dispatch({
+                type: "PANEL_SET_SPLITTER_VALUE",
+                side,
+                percent,
+            });
+        }
+    }, [getPercentage, isHorizontal, side, dispatch]);
+    const handlePointerMove = React.useCallback((event) => {
+        if (splitterProcessingActiveRef.current) {
+            event.preventDefault();
+            event.stopPropagation();
+            updatePanelSize(event);
+        }
+    }, [updatePanelSize]);
+    const handlePointerUp = React.useCallback((event) => {
+        updatePanelSize(event);
+        event.preventDefault();
+        event.stopPropagation();
+        containerRef.current?.ownerDocument.removeEventListener("pointermove", handlePointerMove);
+        containerRef.current?.ownerDocument.removeEventListener("pointerup", handlePointerUp);
+    }, [handlePointerMove, updatePanelSize]);
+    const handlePointerDownOnSplitter = React.useCallback((event) => {
+        if (containerRef.current) {
+            containerRef.current?.ownerDocument.addEventListener("pointermove", handlePointerMove);
+            containerRef.current?.ownerDocument.addEventListener("pointerup", handlePointerUp);
+            splitterProcessingActiveRef.current = true;
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }, [handlePointerMove, handlePointerUp]);
+    const className = isHorizontal
+        ? "nz-horizontal-panel-splitter"
+        : "nz-vertical-panel-splitter";
+    return (React.createElement("div", { ref: containerRef, className: className, onPointerDown: handlePointerDownOnSplitter }));
+}
+/** @internal */
+export function PanelSections() {
+    const side = React.useContext(PanelSideContext);
+    assert(!!side);
+    const widgets = useLayout((state) => {
+        return state.panels[side].widgets;
+    });
+    return (React.createElement(React.Fragment, null, widgets.map((widgetId, index, array) => {
+        return (React.createElement(PanelSection, { key: widgetId, widgetId: widgetId, index: index, sectionLength: array.length }));
+    })));
+}
+function PanelSection({ widgetId, index, sectionLength }) {
+    const side = React.useContext(PanelSideContext);
+    assert(!!side);
+    const splitterPercent = useLayout((state) => {
+        return state.panels[side].splitterPercent ?? 50;
+    });
+    const maximizedSection = useMaximizedSection(widgetId);
+    const isMaximizedPanel = !!useMaximizedPanel(side);
+    const isHorizontal = isHorizontalPanelSide(side);
+    const last = index === sectionLength - 1;
+    const className = classnames("nz-widgetPanels-panelSections_section", `nz-panel-section-${index}`, isHorizontal ? "nz-widgetPanels-horizontal" : "nz-widgetPanels-vertical", last && 0 === index && "nz-panel-section-full-size", maximizedSection);
+    const hasSplitter = !last && 0 === index && !isMaximizedPanel;
+    const panelStyle = hasSplitter
+        ? getSplitterStyle(isHorizontal, splitterPercent)
+        : undefined;
+    return (React.createElement("div", { className: className, style: panelStyle },
+        React.createElement(PanelWidget, { widgetId: widgetId }),
+        hasSplitter && React.createElement(PanelSplitter, null)));
+}
+function getSplitterStyle(isHorizontal, splitterPercent) {
+    if (isHorizontal) {
+        return {
+            width: `${splitterPercent}%`,
+        };
+    }
+    return {
+        height: `${splitterPercent}%`,
+    };
+}
+//# sourceMappingURL=PanelSections.js.map

package/lib/appui-react/layout/widget-panels/PanelSections.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelSections.js","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget-panels/PanelSections.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module WidgetPanels\n */\n\nimport \"./PanelSections.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { assert } from \"@itwin/core-bentley\";\nimport { NineZoneDispatchContext } from \"../base/NineZone.js\";\nimport { PanelWidget } from \"../widget/PanelWidget.js\";\nimport { useLayout } from \"../base/LayoutStore.js\";\nimport { isHorizontalPanelSide, PanelSideContext } from \"./Panel.js\";\nimport type { WidgetState } from \"../state/WidgetState.js\";\nimport {\n  useMaximizedPanel,\n  useMaximizedSection,\n} from \"../../preview/enable-maximized-widget/useMaximizedWidget.js\";\n\nfunction PanelSplitter() {\n  const dispatch = React.useContext(NineZoneDispatchContext);\n  const side = React.useContext(PanelSideContext);\n  assert(!!side);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const splitterProcessingActiveRef = React.useRef<boolean>(false);\n\n  const isHorizontal = isHorizontalPanelSide(side);\n\n  const getPercentage = React.useCallback(\n    (min: number, max: number, current: number) => {\n      const range = max - min;\n      const adjusted = Math.max(min, Math.min(max, current));\n      if (adjusted === min) return 0;\n      if (adjusted === max) return 100;\n      const percent = ((adjusted - min) * 100) / range;\n      return percent;\n    },\n    []\n  );\n\n  const updatePanelSize = React.useCallback(\n    (event: PointerEvent) => {\n      if (!containerRef.current) return;\n\n      const parentPanel = containerRef.current.closest(\n        \".nz-widgetPanels-panel\"\n      );\n      const sectionToResize = containerRef.current.parentElement as HTMLElement;\n      if (parentPanel && sectionToResize) {\n        const rect = parentPanel.getBoundingClientRect();\n        const percent = getPercentage(\n          isHorizontal ? rect.left : rect.top,\n          isHorizontal ? rect.right : rect.bottom,\n          isHorizontal ? event.clientX : event.clientY\n        );\n\n        dispatch({\n          type: \"PANEL_SET_SPLITTER_VALUE\",\n          side,\n          percent,\n        });\n      }\n    },\n    [getPercentage, isHorizontal, side, dispatch]\n  );\n\n  const handlePointerMove = React.useCallback(\n    (event: Event): void => {\n      if (splitterProcessingActiveRef.current) {\n        event.preventDefault();\n        event.stopPropagation();\n        updatePanelSize(event as PointerEvent);\n      }\n    },\n    [updatePanelSize]\n  );\n\n  const handlePointerUp = React.useCallback(\n    (event: Event) => {\n      updatePanelSize(event as PointerEvent);\n      event.preventDefault();\n      event.stopPropagation();\n      containerRef.current?.ownerDocument.removeEventListener(\n        \"pointermove\",\n        handlePointerMove\n      );\n      containerRef.current?.ownerDocument.removeEventListener(\n        \"pointerup\",\n        handlePointerUp\n      );\n    },\n    [handlePointerMove, updatePanelSize]\n  );\n\n  const handlePointerDownOnSplitter = React.useCallback(\n    (event: React.PointerEvent) => {\n      if (containerRef.current) {\n        containerRef.current?.ownerDocument.addEventListener(\n          \"pointermove\",\n          handlePointerMove\n        );\n        containerRef.current?.ownerDocument.addEventListener(\n          \"pointerup\",\n          handlePointerUp\n        );\n        splitterProcessingActiveRef.current = true;\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [handlePointerMove, handlePointerUp]\n  );\n\n  const className = isHorizontal\n    ? \"nz-horizontal-panel-splitter\"\n    : \"nz-vertical-panel-splitter\";\n  return (\n    <div\n      ref={containerRef}\n      className={className}\n      onPointerDown={handlePointerDownOnSplitter}\n    />\n  );\n}\n\n/** @internal */\nexport function PanelSections() {\n  const side = React.useContext(PanelSideContext);\n  assert(!!side);\n\n  const widgets = useLayout((state) => {\n    return state.panels[side].widgets;\n  });\n\n  return (\n    <>\n      {widgets.map((widgetId, index, array) => {\n        return (\n          <PanelSection\n            key={widgetId}\n            widgetId={widgetId}\n            index={index}\n            sectionLength={array.length}\n          />\n        );\n      })}\n    </>\n  );\n}\n\ninterface PanelSectionProps {\n  widgetId: WidgetState[\"id\"];\n  index: number;\n  sectionLength: number;\n}\n\nfunction PanelSection({ widgetId, index, sectionLength }: PanelSectionProps) {\n  const side = React.useContext(PanelSideContext);\n  assert(!!side);\n\n  const splitterPercent = useLayout((state) => {\n    return state.panels[side].splitterPercent ?? 50;\n  });\n\n  const maximizedSection = useMaximizedSection(widgetId);\n  const isMaximizedPanel = !!useMaximizedPanel(side);\n\n  const isHorizontal = isHorizontalPanelSide(side);\n\n  const last = index === sectionLength - 1;\n  const className = classnames(\n    \"nz-widgetPanels-panelSections_section\",\n    `nz-panel-section-${index}`,\n    isHorizontal ? \"nz-widgetPanels-horizontal\" : \"nz-widgetPanels-vertical\",\n    last && 0 === index && \"nz-panel-section-full-size\",\n    maximizedSection\n  );\n\n  const hasSplitter = !last && 0 === index && !isMaximizedPanel;\n  const panelStyle = hasSplitter\n    ? getSplitterStyle(isHorizontal, splitterPercent)\n    : undefined;\n  return (\n    <div className={className} style={panelStyle}>\n      <PanelWidget widgetId={widgetId} />\n      {hasSplitter && <PanelSplitter />}\n    </div>\n  );\n}\n\nfunction getSplitterStyle(isHorizontal: boolean, splitterPercent: number) {\n  if (isHorizontal) {\n    return {\n      width: `${splitterPercent}%`,\n    } as const;\n  }\n  return {\n    height: `${splitterPercent}%`,\n  } as const;\n}\n"]}

package/lib/appui-react/layout/widget-panels/PanelTypes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelTypes.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget-panels/PanelTypes.ts"],"names":[],"mappings":"AAIA,gBAAgB;AAChB,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC;AAEjC,gBAAgB;AAChB,MAAM,MAAM,eAAe,GAAG,QAAQ,CAAC;AAEvC,gBAAgB;AAChB,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC;AAEnC,gBAAgB;AAChB,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC;AAErC,gBAAgB;AAChB,MAAM,MAAM,mBAAmB,GAAG,YAAY,GAAG,eAAe,CAAC;AAEjE,gBAAgB;AAChB,MAAM,MAAM,iBAAiB,GAAG,aAAa,GAAG,cAAc,CAAC;AAE/D,gBAAgB;AAChB,MAAM,MAAM,SAAS,GAAG,iBAAiB,GAAG,mBAAmB,CAAC"}

package/lib/appui-react/layout/widget-panels/PanelTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelTypes.js","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget-panels/PanelTypes.ts"],"names":[],"mappings":"","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @internal */\nexport type TopPanelSide = \"top\";\n\n/** @internal */\nexport type BottomPanelSide = \"bottom\";\n\n/** @internal */\nexport type LeftPanelSide = \"left\";\n\n/** @internal */\nexport type RightPanelSide = \"right\";\n\n/** @internal */\nexport type HorizontalPanelSide = TopPanelSide | BottomPanelSide;\n\n/** @internal */\nexport type VerticalPanelSide = LeftPanelSide | RightPanelSide;\n\n/** @internal */\nexport type PanelSide = VerticalPanelSide | HorizontalPanelSide;\n"]}

package/lib/appui-react/layout/widget-panels/useAnimatePanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnimatePanel.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget-panels/useAnimatePanel.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,gBAAgB;AAChB,wBAAgB,eAAe;;;6BAgJvB,qBAAqB,CAAC,cAAc,CAAC;;;EAkB5C"}

package/lib/appui-react/layout/widget-panels/useAnimatePanel.js

@@ -0,0 +1,165 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module WidgetPanels
+ */
+import * as React from "react";
+import { assert } from "@itwin/core-bentley";
+import { DraggedPanelSideContext } from "../base/DragManager.js";
+import { NineZoneDispatchContext } from "../base/NineZone.js";
+import { useLayout } from "../base/LayoutStore.js";
+import { isHorizontalPanelSide, PanelSideContext } from "./Panel.js";
+/** @internal */
+export function useAnimatePanel() {
+    const side = React.useContext(PanelSideContext);
+    assert(!!side);
+    const draggedPanelSide = React.useContext(DraggedPanelSideContext);
+    const dispatch = React.useContext(NineZoneDispatchContext);
+    const captured = draggedPanelSide === side;
+    const [contentSize, setContentSize] = React.useState();
+    const [prepareTransition, setPrepareTransition] = React.useState(false);
+    const [transition, setTransition] = React.useState();
+    const [panelSize, setPanelSize] = React.useState();
+    const [initializing, setInitializing] = React.useState(false);
+    const horizontal = isHorizontalPanelSide(side);
+    const animateFrom = React.useRef();
+    const animateTo = React.useRef(0);
+    const maxPanelSize = React.useRef();
+    const collapsing = React.useRef();
+    const ref = React.useRef(null);
+    const panel = useLayout((state) => {
+        const p = state.panels[side];
+        return {
+            collapsed: p.collapsed,
+            size: p.size,
+            minSize: p.minSize,
+        };
+    }, true);
+    const [prevCollapsed, setPrevCollapsed] = React.useState(panel.collapsed);
+    if (prevCollapsed !== panel.collapsed) {
+        setPrevCollapsed(panel.collapsed);
+        let from = animateFrom.current;
+        if (from === undefined && ref.current) {
+            const bounds = ref.current.getBoundingClientRect();
+            from = getPanelSize(horizontal, bounds);
+        }
+        animateFrom.current = from;
+        setPanelSize(undefined);
+        setContentSize(undefined);
+        setTransition(undefined);
+        setPrepareTransition(true);
+        if (panel.collapsed) {
+            collapsing.current = "collapsing";
+            maxPanelSize.current = from;
+        }
+        else {
+            collapsing.current = "expanding";
+        }
+    }
+    const [prevSize, setPrevSize] = React.useState(panel.size);
+    if (prevSize !== panel.size) {
+        setPrevSize(panel.size);
+        if (initializing) {
+            // Panel is initializing (via dispatched PANEL_INITIALIZE), need to re-measure animateTo.
+            maxPanelSize.current = undefined;
+            setPanelSize(undefined);
+            setContentSize(undefined);
+            setTransition(undefined);
+            setPrepareTransition(true);
+        }
+        else if (collapsing.current === "collapsing") {
+            // Panel is collapsing, ignore size changes.
+        }
+        else if (!captured && ref.current && prevSize !== undefined) {
+            // Panel is expanding
+            animateFrom.current = getPanelSize(horizontal, ref.current.getBoundingClientRect());
+            setPanelSize(undefined);
+            setContentSize(undefined);
+            setTransition(undefined);
+            setPrepareTransition(true);
+        }
+        else {
+            // Panel is resizing, do not transition.
+            setPanelSize(undefined);
+            setContentSize(undefined);
+            setTransition(undefined);
+            animateFrom.current = undefined;
+            collapsing.current = undefined;
+        }
+    }
+    React.useLayoutEffect(() => {
+        if (panel.size !== undefined || panel.collapsed)
+            return;
+        assert(!!ref.current);
+        const bounds = ref.current.getBoundingClientRect();
+        const newSize = getPanelSize(horizontal, bounds);
+        dispatch({
+            type: "PANEL_INITIALIZE",
+            side,
+            size: newSize,
+        });
+        setInitializing(true);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [panel.size, panel.collapsed]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    React.useLayoutEffect(() => {
+        if (!prepareTransition)
+            return;
+        setPrepareTransition(false);
+        assert(!!ref.current);
+        animateTo.current = getPanelSize(horizontal, ref.current.getBoundingClientRect());
+        if (animateFrom.current === animateTo.current) {
+            maxPanelSize.current = undefined;
+            animateFrom.current = undefined;
+            collapsing.current = undefined;
+            setPanelSize(undefined);
+            setContentSize(undefined);
+            setTransition(undefined);
+            return;
+        }
+        if (collapsing.current === "expanding" &&
+            maxPanelSize.current === undefined) {
+            maxPanelSize.current = animateTo.current;
+        }
+        setPanelSize(animateFrom.current);
+        setContentSize(maxPanelSize.current);
+        setTransition("init");
+    });
+    React.useLayoutEffect(() => {
+        if (transition !== "init")
+            return;
+        const handle = window.requestAnimationFrame(() => {
+            animateFrom.current = undefined;
+            setTransition("transition");
+            setPanelSize(animateTo.current);
+        });
+        return () => {
+            window.cancelAnimationFrame(handle);
+        };
+    });
+    React.useEffect(() => {
+        setInitializing(false);
+    }, [initializing]);
+    const handleTransitionEnd = React.useCallback((e) => {
+        if (e.target !== ref.current)
+            return;
+        maxPanelSize.current = undefined;
+        collapsing.current = undefined;
+        animateFrom.current = undefined;
+        setPanelSize(undefined);
+        setContentSize(undefined);
+        setTransition(undefined);
+    }, []);
+    const size = React.useMemo(() => {
+        if (panelSize !== undefined)
+            return panelSize;
+        return panel.collapsed ? 0 : panel.size ?? panel.minSize;
+    }, [panel.size, panel.collapsed, panel.minSize, panelSize]);
+    return { ref, size, handleTransitionEnd, contentSize, transition };
+}
+function getPanelSize(horizontal, size) {
+    return horizontal ? size.height : size.width;
+}
+//# sourceMappingURL=useAnimatePanel.js.map

package/lib/appui-react/layout/widget-panels/useAnimatePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnimatePanel.js","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget-panels/useAnimatePanel.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module WidgetPanels\n */\n\nimport * as React from \"react\";\nimport { assert } from \"@itwin/core-bentley\";\nimport { DraggedPanelSideContext } from \"../base/DragManager.js\";\nimport { NineZoneDispatchContext } from \"../base/NineZone.js\";\nimport { useLayout } from \"../base/LayoutStore.js\";\nimport { isHorizontalPanelSide, PanelSideContext } from \"./Panel.js\";\nimport type { SizeProps } from \"../../utils/SizeProps.js\";\n\n/** @internal */\nexport function useAnimatePanel() {\n  const side = React.useContext(PanelSideContext);\n  assert(!!side);\n  const draggedPanelSide = React.useContext(DraggedPanelSideContext);\n  const dispatch = React.useContext(NineZoneDispatchContext);\n  const captured = draggedPanelSide === side;\n  const [contentSize, setContentSize] = React.useState<number | undefined>();\n  const [prepareTransition, setPrepareTransition] = React.useState(false);\n  const [transition, setTransition] = React.useState<\n    \"init\" | \"transition\" | undefined\n  >();\n  const [panelSize, setPanelSize] = React.useState<number | undefined>();\n  const [initializing, setInitializing] = React.useState(false);\n  const horizontal = isHorizontalPanelSide(side);\n  const animateFrom = React.useRef<number | undefined>();\n  const animateTo = React.useRef(0);\n  const maxPanelSize = React.useRef<number | undefined>();\n  const collapsing = React.useRef<\"collapsing\" | \"expanding\" | undefined>();\n  const ref = React.useRef<HTMLDivElement>(null);\n\n  const panel = useLayout((state) => {\n    const p = state.panels[side];\n    return {\n      collapsed: p.collapsed,\n      size: p.size,\n      minSize: p.minSize,\n    };\n  }, true);\n\n  const [prevCollapsed, setPrevCollapsed] = React.useState(panel.collapsed);\n  if (prevCollapsed !== panel.collapsed) {\n    setPrevCollapsed(panel.collapsed);\n    let from = animateFrom.current;\n    if (from === undefined && ref.current) {\n      const bounds = ref.current.getBoundingClientRect();\n      from = getPanelSize(horizontal, bounds);\n    }\n\n    animateFrom.current = from;\n    setPanelSize(undefined);\n    setContentSize(undefined);\n    setTransition(undefined);\n    setPrepareTransition(true);\n    if (panel.collapsed) {\n      collapsing.current = \"collapsing\";\n      maxPanelSize.current = from;\n    } else {\n      collapsing.current = \"expanding\";\n    }\n  }\n\n  const [prevSize, setPrevSize] = React.useState(panel.size);\n  if (prevSize !== panel.size) {\n    setPrevSize(panel.size);\n\n    if (initializing) {\n      // Panel is initializing (via dispatched PANEL_INITIALIZE), need to re-measure animateTo.\n      maxPanelSize.current = undefined;\n      setPanelSize(undefined);\n      setContentSize(undefined);\n      setTransition(undefined);\n      setPrepareTransition(true);\n    } else if (collapsing.current === \"collapsing\") {\n      // Panel is collapsing, ignore size changes.\n    } else if (!captured && ref.current && prevSize !== undefined) {\n      // Panel is expanding\n      animateFrom.current = getPanelSize(\n        horizontal,\n        ref.current.getBoundingClientRect()\n      );\n      setPanelSize(undefined);\n      setContentSize(undefined);\n      setTransition(undefined);\n      setPrepareTransition(true);\n    } else {\n      // Panel is resizing, do not transition.\n      setPanelSize(undefined);\n      setContentSize(undefined);\n      setTransition(undefined);\n      animateFrom.current = undefined;\n      collapsing.current = undefined;\n    }\n  }\n\n  React.useLayoutEffect(() => {\n    if (panel.size !== undefined || panel.collapsed) return;\n    assert(!!ref.current);\n    const bounds = ref.current.getBoundingClientRect();\n    const newSize = getPanelSize(horizontal, bounds);\n    dispatch({\n      type: \"PANEL_INITIALIZE\",\n      side,\n      size: newSize,\n    });\n    setInitializing(true);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [panel.size, panel.collapsed]);\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  React.useLayoutEffect(() => {\n    if (!prepareTransition) return;\n\n    setPrepareTransition(false);\n    assert(!!ref.current);\n    animateTo.current = getPanelSize(\n      horizontal,\n      ref.current.getBoundingClientRect()\n    );\n    if (animateFrom.current === animateTo.current) {\n      maxPanelSize.current = undefined;\n      animateFrom.current = undefined;\n      collapsing.current = undefined;\n      setPanelSize(undefined);\n      setContentSize(undefined);\n      setTransition(undefined);\n      return;\n    }\n    if (\n      collapsing.current === \"expanding\" &&\n      maxPanelSize.current === undefined\n    ) {\n      maxPanelSize.current = animateTo.current;\n    }\n\n    setPanelSize(animateFrom.current);\n    setContentSize(maxPanelSize.current);\n    setTransition(\"init\");\n  });\n  React.useLayoutEffect(() => {\n    if (transition !== \"init\") return;\n\n    const handle = window.requestAnimationFrame(() => {\n      animateFrom.current = undefined;\n      setTransition(\"transition\");\n      setPanelSize(animateTo.current);\n    });\n    return () => {\n      window.cancelAnimationFrame(handle);\n    };\n  });\n  React.useEffect(() => {\n    setInitializing(false);\n  }, [initializing]);\n\n  const handleTransitionEnd = React.useCallback(\n    (e: React.TransitionEvent<HTMLDivElement>) => {\n      if (e.target !== ref.current) return;\n\n      maxPanelSize.current = undefined;\n      collapsing.current = undefined;\n      animateFrom.current = undefined;\n      setPanelSize(undefined);\n      setContentSize(undefined);\n      setTransition(undefined);\n    },\n    []\n  );\n\n  const size = React.useMemo(() => {\n    if (panelSize !== undefined) return panelSize;\n    return panel.collapsed ? 0 : panel.size ?? panel.minSize;\n  }, [panel.size, panel.collapsed, panel.minSize, panelSize]);\n  return { ref, size, handleTransitionEnd, contentSize, transition };\n}\n\nfunction getPanelSize(horizontal: boolean, size: SizeProps) {\n  return horizontal ? size.height : size.width;\n}\n"]}

package/lib/appui-react/layout/widget-panels/usePanelsAutoCollapse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePanelsAutoCollapse.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget-panels/usePanelsAutoCollapse.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,gBAAgB;AAChB,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,OAAO,KAAK,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAiDvE"}

package/lib/appui-react/layout/widget-panels/usePanelsAutoCollapse.js

@@ -0,0 +1,53 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module WidgetPanels
+ */
+import * as React from "react";
+import { useRefEffect, useRefs } from "@itwin/core-react/internal";
+import { AutoCollapseUnpinnedPanelsContext, NineZoneDispatchContext, } from "../base/NineZone.js";
+import { panelSides } from "./Panel.js";
+import { useLayoutStore } from "../base/LayoutStore.js";
+/** @internal */
+export function usePanelsAutoCollapse() {
+    const layoutStore = useLayoutStore();
+    const panelsRef = React.useRef(layoutStore.getState().panels);
+    const dispatch = React.useContext(NineZoneDispatchContext);
+    const autoCollapseUnpinnedPanels = React.useContext(AutoCollapseUnpinnedPanelsContext);
+    React.useEffect(() => layoutStore.subscribe((state) => {
+        panelsRef.current = state.panels;
+    }), [layoutStore]);
+    const collapsePanels = React.useCallback(() => {
+        for (const side of panelSides) {
+            const panel = panelsRef.current[side];
+            if (panel.collapsed || panel.pinned)
+                continue;
+            dispatch({
+                type: "PANEL_SET_COLLAPSED",
+                collapsed: true,
+                side: panel.side,
+            });
+        }
+    }, [dispatch]);
+    const mouseDownRef = useRefEffect((instance) => {
+        if (!instance)
+            return;
+        instance.addEventListener("mousedown", collapsePanels, true);
+        return () => {
+            instance.removeEventListener("mousedown", collapsePanels, true);
+        };
+    }, [collapsePanels]);
+    const mouseEnterRef = useRefEffect((instance) => {
+        if (!instance || !autoCollapseUnpinnedPanels)
+            return;
+        instance.addEventListener("mouseenter", collapsePanels, true);
+        return () => {
+            instance.removeEventListener("mouseenter", collapsePanels, true);
+        };
+    }, [collapsePanels, autoCollapseUnpinnedPanels]);
+    const ref = useRefs(mouseDownRef, mouseEnterRef);
+    return ref;
+}
+//# sourceMappingURL=usePanelsAutoCollapse.js.map