@itwin/appui-react 4.9.0-dev.1 → 4.9.0

package/lib/esm/appui-react/layout/widget-panels/Expander.js

@@ -0,0 +1,58 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 "./Expander.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { panelSides } from "./Panel";
+import { NineZoneDispatchContext } from "../base/NineZone";
+import { Point, Timer } from "@itwin/core-react";
+import { useLayout } from "../base/LayoutStore";
+/** Component that is used to auto-expand unpinned widget panel.
+ * @internal
+ */
+export function WidgetPanelExpander({ side }) {
+    const timer = React.useRef(new Timer(200));
+    const lastPosition = React.useRef(new Point());
+    const dispatch = React.useContext(NineZoneDispatchContext);
+    React.useEffect(() => {
+        timer.current.setOnExecute(() => {
+            dispatch({
+                side,
+                collapsed: false,
+                type: "PANEL_SET_COLLAPSED",
+            });
+        });
+    }, [side, dispatch]);
+    const className = classnames("nz-widgetPanels-expander", `nz-${side}`);
+    return (React.createElement("div", { className: className, onMouseOverCapture: (e) => {
+            lastPosition.current = new Point(e.clientX, e.clientY);
+            timer.current.start();
+        }, onMouseOutCapture: () => {
+            timer.current.stop();
+        }, onMouseMoveCapture: (e) => {
+            const newPosition = new Point(e.clientX, e.clientY);
+            if (lastPosition.current.getDistanceTo(newPosition) > 5) {
+                timer.current.start();
+                lastPosition.current = newPosition;
+            }
+        } }));
+}
+/** @internal */
+export function WidgetPanelExpanders() {
+    const expanders = useLayout((state) => {
+        const panels = state.panels;
+        return panelSides.filter((side) => {
+            const panel = panels[side];
+            return !panel.pinned && panel.collapsed;
+        });
+    }, true);
+    return (React.createElement(React.Fragment, null, expanders.map((side) => {
+        return React.createElement(WidgetPanelExpander, { key: side, side: side });
+    })));
+}
+//# sourceMappingURL=Expander.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Expander.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget-panels/Expander.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,iBAAiB,CAAC;AACzB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAOhD;;GAEG;AACH,MAAM,UAAU,mBAAmB,CAAC,EAAE,IAAI,EAA4B;IACpE,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3C,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,KAAK,EAAE,CAAC,CAAC;IAC/C,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,uBAAuB,CAAC,CAAC;IAC3D,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,GAAG,EAAE;YAC9B,QAAQ,CAAC;gBACP,IAAI;gBACJ,SAAS,EAAE,KAAK;gBAChB,IAAI,EAAE,qBAAqB;aAC5B,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC;IACrB,MAAM,SAAS,GAAG,UAAU,CAAC,0BAA0B,EAAE,MAAM,IAAI,EAAE,CAAC,CAAC;IACvE,OAAO,CACL,6BACE,SAAS,EAAE,SAAS,EACpB,kBAAkB,EAAE,CAAC,CAAC,EAAE,EAAE;YACxB,YAAY,CAAC,OAAO,GAAG,IAAI,KAAK,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;YACvD,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QACxB,CAAC,EACD,iBAAiB,EAAE,GAAG,EAAE;YACtB,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QACvB,CAAC,EACD,kBAAkB,EAAE,CAAC,CAAC,EAAE,EAAE;YACxB,MAAM,WAAW,GAAG,IAAI,KAAK,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;YACpD,IAAI,YAAY,CAAC,OAAO,CAAC,aAAa,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE;gBACvD,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;gBACtB,YAAY,CAAC,OAAO,GAAG,WAAW,CAAC;aACpC;QACH,CAAC,GACD,CACH,CAAC;AACJ,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,oBAAoB;IAClC,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;QACpC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;QAC5B,OAAO,UAAU,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE;YAChC,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;YAC3B,OAAO,CAAC,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,SAAS,CAAC;QAC1C,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,IAAI,CAAC,CAAC;IAET,OAAO,CACL,0CACG,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QACtB,OAAO,oBAAC,mBAAmB,IAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;IACxD,CAAC,CAAC,CACD,CACJ,CAAC;AACJ,CAAC","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 \"./Expander.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { PanelSide } from \"./PanelTypes\";\nimport { panelSides } from \"./Panel\";\nimport { NineZoneDispatchContext } from \"../base/NineZone\";\nimport { Point, Timer } from \"@itwin/core-react\";\nimport { useLayout } from \"../base/LayoutStore\";\n\n/** @internal */\nexport interface WidgetPanelExpanderProps {\n  side: PanelSide;\n}\n\n/** Component that is used to auto-expand unpinned widget panel.\n * @internal\n */\nexport function WidgetPanelExpander({ side }: WidgetPanelExpanderProps) {\n  const timer = React.useRef(new Timer(200));\n  const lastPosition = React.useRef(new Point());\n  const dispatch = React.useContext(NineZoneDispatchContext);\n  React.useEffect(() => {\n    timer.current.setOnExecute(() => {\n      dispatch({\n        side,\n        collapsed: false,\n        type: \"PANEL_SET_COLLAPSED\",\n      });\n    });\n  }, [side, dispatch]);\n  const className = classnames(\"nz-widgetPanels-expander\", `nz-${side}`);\n  return (\n    <div\n      className={className}\n      onMouseOverCapture={(e) => {\n        lastPosition.current = new Point(e.clientX, e.clientY);\n        timer.current.start();\n      }}\n      onMouseOutCapture={() => {\n        timer.current.stop();\n      }}\n      onMouseMoveCapture={(e) => {\n        const newPosition = new Point(e.clientX, e.clientY);\n        if (lastPosition.current.getDistanceTo(newPosition) > 5) {\n          timer.current.start();\n          lastPosition.current = newPosition;\n        }\n      }}\n    />\n  );\n}\n\n/** @internal */\nexport function WidgetPanelExpanders() {\n  const expanders = useLayout((state) => {\n    const panels = state.panels;\n    return panelSides.filter((side) => {\n      const panel = panels[side];\n      return !panel.pinned && panel.collapsed;\n    });\n  }, true);\n\n  return (\n    <>\n      {expanders.map((side) => {\n        return <WidgetPanelExpander key={side} side={side} />;\n      })}\n    </>\n  );\n}\n"]}

package/lib/esm/appui-react/layout/widget-panels/Expander.scss

@@ -0,0 +1,37 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.nz-widgetPanels-expander {
+  $size: 1em;
+
+  position: absolute;
+
+  &.nz-left {
+    width: $size;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+
+  &.nz-right {
+    width: $size;
+    height: 100%;
+    top: 0;
+    right: 0;
+  }
+
+  &.nz-top {
+    width: 100%;
+    height: $size;
+    top: 0;
+    left: 0;
+  }
+
+  &.nz-bottom {
+    width: 100%;
+    height: $size;
+    bottom: 0;
+    left: 0;
+  }
+}

package/lib/esm/appui-react/layout/widget-panels/Grip.d.ts

@@ -0,0 +1,15 @@
+/** @packageDocumentation
+ * @module WidgetPanels
+ */
+import "./Grip.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** Resize grip of [[WidgetPanel]] component.
+ * @internal
+ */
+export declare function WidgetPanelGrip(props: CommonProps): React.JSX.Element;
+/** @internal */
+export declare const useResizeGrip: <T extends HTMLElement>() => [(instance: T | null) => void, boolean, boolean];
+/** @internal */
+export declare function useDoubleClick(onDoubleClick?: () => void): () => void;
+//# sourceMappingURL=Grip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grip.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget-panels/Grip.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAcrD;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,WAAW,qBAyCjD;AAED,gBAAgB;AAChB,eAAO,MAAM,aAAa,wDACA,IAAI,mBA+J7B,CAAC;AAEF,gBAAgB;AAChB,wBAAgB,cAAc,CAAC,aAAa,CAAC,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAgBrE"}

package/lib/esm/appui-react/layout/widget-panels/Grip.js

@@ -0,0 +1,203 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 "./Grip.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { assert } from "@itwin/core-bentley";
+import { Point, Rectangle, Timer } from "@itwin/core-react";
+import { useDragPanelGrip } from "../base/DragManager";
+import { NineZoneDispatchContext, useLabel } from "../base/NineZone";
+import { isHorizontalPanelSide, PanelSideContext, WidgetPanelContext, } from "./Panel";
+import { usePointerCaptor } from "../base/usePointerCaptor";
+import { useLayout, useLayoutStore } from "../base/LayoutStore";
+/** Resize grip of [[WidgetPanel]] component.
+ * @internal
+ */
+export function WidgetPanelGrip(props) {
+    const side = React.useContext(PanelSideContext);
+    assert(!!side);
+    const { collapsed, pinned } = useLayout((state) => {
+        const panel = state.panels[side];
+        return {
+            collapsed: panel.collapsed,
+            pinned: panel.pinned,
+        };
+    }, true);
+    const dispatch = React.useContext(NineZoneDispatchContext);
+    const [ref, resizing, active] = useResizeGrip();
+    const className = classnames("nz-widgetPanels-grip", `nz-${side}`, active && "nz-active", resizing && "nz-resizing", props.className);
+    const resizeGripTitle = useLabel("resizeGripTitle");
+    return (React.createElement("div", { className: className, title: resizeGripTitle, style: props.style },
+        React.createElement("div", { className: "nz-line-grip" },
+            React.createElement("div", { className: "nz-line-grip-detail" })),
+        React.createElement("div", { className: "nz-handle", ref: ref, onMouseOverCapture: () => {
+                collapsed &&
+                    !pinned &&
+                    !resizing &&
+                    dispatch({
+                        side,
+                        collapsed: false,
+                        type: "PANEL_SET_COLLAPSED",
+                    });
+            } })));
+}
+/** @internal */
+export const useResizeGrip = () => {
+    const widgetPanel = React.useContext(WidgetPanelContext);
+    const side = React.useContext(PanelSideContext);
+    const dispatch = React.useContext(NineZoneDispatchContext);
+    assert(!!side);
+    assert(!!widgetPanel);
+    const [resizing, setResizing] = React.useState(false);
+    const [active, setActive] = React.useState(false);
+    const initialPointerPosition = React.useRef();
+    const dragStartTimer = React.useRef(new Timer(300));
+    const ref = React.useRef(null);
+    const relativePosition = React.useRef(new Point());
+    const layoutStore = useLayoutStore();
+    const panelStateRef = React.useRef(layoutStore.getState().panels[side]);
+    React.useLayoutEffect(() => layoutStore.subscribe((state) => {
+        panelStateRef.current = state.panels[side];
+    }), [layoutStore, side]);
+    const handleDoubleClick = React.useCallback(() => {
+        dispatch({
+            type: "PANEL_TOGGLE_COLLAPSED",
+            side,
+        });
+    }, [dispatch, side]);
+    const handleClick = useDoubleClick(handleDoubleClick);
+    const onDrag = React.useCallback((pointerPosition, lastPointerPosition) => {
+        if (!ref.current)
+            return;
+        const direction = side === "left" || side === "top" ? 1 : -1;
+        const dragOffset = lastPointerPosition.getOffsetTo(pointerPosition);
+        const dragBy = isHorizontalPanelSide(side) ? dragOffset.y : dragOffset.x;
+        const resizeBy = direction * dragBy;
+        const bounds = widgetPanel.getBounds();
+        const outerEdge = bounds[side];
+        const innerEdge = isHorizontalPanelSide(side)
+            ? pointerPosition.y
+            : pointerPosition.x;
+        const size = (innerEdge - outerEdge) * direction;
+        const panel = panelStateRef.current;
+        if (resizeBy === 0)
+            return;
+        if (panel.collapsed) {
+            if (size >= panel.collapseOffset) {
+                dispatch({
+                    type: "PANEL_SET_COLLAPSED",
+                    side,
+                    collapsed: false,
+                });
+                return;
+            }
+            return;
+        }
+        if (panel.size === undefined)
+            return;
+        // New size should match drag direction (i.e. dragging `left` panel grip to the left should not increase left panel size).
+        const sizeDiff = size - panel.size;
+        if (sizeDiff * resizeBy < 0)
+            return;
+        const collapseThreshold = Math.max(panel.minSize - panel.collapseOffset, 0);
+        if (size <= collapseThreshold) {
+            dispatch({
+                type: "PANEL_SET_COLLAPSED",
+                side,
+                collapsed: true,
+            });
+            dispatch({
+                type: "PANEL_SET_SIZE",
+                side,
+                size: panel.minSize,
+            });
+            return;
+        }
+        dispatch({
+            type: "PANEL_SET_SIZE",
+            side,
+            size,
+        });
+    }, [dispatch, side, widgetPanel]);
+    const onDragEnd = React.useCallback(() => {
+        setResizing(false);
+    }, []);
+    const handlePanelGripDragStart = useDragPanelGrip({
+        side,
+        onDrag,
+        onDragEnd,
+    });
+    React.useEffect(() => {
+        const timer = dragStartTimer.current;
+        timer.setOnExecute(() => {
+            if (initialPointerPosition.current && ref.current) {
+                relativePosition.current = Rectangle.create(ref.current.getBoundingClientRect())
+                    .topLeft()
+                    .getOffsetTo(initialPointerPosition.current);
+                setResizing(true);
+                handlePanelGripDragStart({
+                    initialPointerPosition: initialPointerPosition.current,
+                    pointerPosition: initialPointerPosition.current,
+                });
+            }
+            initialPointerPosition.current = undefined;
+        });
+        return () => {
+            timer.setOnExecute(undefined);
+        };
+    }, [handlePanelGripDragStart]);
+    const handleDragEnd = React.useCallback(() => {
+        initialPointerPosition.current = undefined;
+        dragStartTimer.current.stop();
+        handleClick();
+        setActive(false);
+    }, [handleClick]);
+    const handlePointerDown = React.useCallback((args) => {
+        initialPointerPosition.current = new Point(args.clientX, args.clientY);
+        dragStartTimer.current.start();
+        setActive(true);
+    }, []);
+    const handlePointerMove = React.useCallback((args) => {
+        if (!initialPointerPosition.current)
+            return;
+        const position = new Point(args.clientX, args.clientY);
+        setResizing(true);
+        handlePanelGripDragStart({
+            initialPointerPosition: position,
+            pointerPosition: position,
+        });
+        onDrag(position, initialPointerPosition.current);
+        initialPointerPosition.current = undefined;
+        dragStartTimer.current.stop();
+    }, [handlePanelGripDragStart, onDrag]);
+    const handlePointerCaptorRef = usePointerCaptor(handlePointerDown, handlePointerMove, handleDragEnd);
+    const handleRef = React.useCallback((instance) => {
+        ref.current = instance;
+        handlePointerCaptorRef(instance);
+    }, [handlePointerCaptorRef]);
+    return [handleRef, resizing, active];
+};
+/** @internal */
+export function useDoubleClick(onDoubleClick) {
+    const timer = React.useRef(new Timer(300));
+    const clickCount = React.useRef(0);
+    timer.current.setOnExecute(() => {
+        clickCount.current = 0;
+    });
+    const handleClick = React.useCallback(() => {
+        timer.current.start();
+        clickCount.current++;
+        if (clickCount.current === 2) {
+            onDoubleClick && onDoubleClick();
+            clickCount.current = 0;
+            timer.current.stop();
+        }
+    }, [onDoubleClick]);
+    return handleClick;
+}
+//# sourceMappingURL=Grip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grip.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget-panels/Grip.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 \"./Grip.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { assert } from \"@itwin/core-bentley\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Point, Rectangle, Timer } from \"@itwin/core-react\";\nimport type { UseDragPanelGripArgs } from \"../base/DragManager\";\nimport { useDragPanelGrip } from \"../base/DragManager\";\nimport { NineZoneDispatchContext, useLabel } from \"../base/NineZone\";\nimport {\n  isHorizontalPanelSide,\n  PanelSideContext,\n  WidgetPanelContext,\n} from \"./Panel\";\nimport type { PointerCaptorArgs } from \"../base/usePointerCaptor\";\nimport { usePointerCaptor } from \"../base/usePointerCaptor\";\nimport { useLayout, useLayoutStore } from \"../base/LayoutStore\";\n\n/** Resize grip of [[WidgetPanel]] component.\n * @internal\n */\nexport function WidgetPanelGrip(props: CommonProps) {\n  const side = React.useContext(PanelSideContext);\n  assert(!!side);\n  const { collapsed, pinned } = useLayout((state) => {\n    const panel = state.panels[side];\n    return {\n      collapsed: panel.collapsed,\n      pinned: panel.pinned,\n    };\n  }, true);\n  const dispatch = React.useContext(NineZoneDispatchContext);\n  const [ref, resizing, active] = useResizeGrip<HTMLDivElement>();\n  const className = classnames(\n    \"nz-widgetPanels-grip\",\n    `nz-${side}`,\n    active && \"nz-active\",\n    resizing && \"nz-resizing\",\n    props.className\n  );\n  const resizeGripTitle = useLabel(\"resizeGripTitle\");\n  return (\n    <div className={className} title={resizeGripTitle} style={props.style}>\n      <div className=\"nz-line-grip\">\n        <div className=\"nz-line-grip-detail\" />\n      </div>\n      <div\n        className=\"nz-handle\"\n        ref={ref}\n        onMouseOverCapture={() => {\n          collapsed &&\n            !pinned &&\n            !resizing &&\n            dispatch({\n              side,\n              collapsed: false,\n              type: \"PANEL_SET_COLLAPSED\",\n            });\n        }}\n      />\n    </div>\n  );\n}\n\n/** @internal */\nexport const useResizeGrip = <T extends HTMLElement>(): [\n  (instance: T | null) => void,\n  boolean,\n  boolean\n] => {\n  const widgetPanel = React.useContext(WidgetPanelContext);\n  const side = React.useContext(PanelSideContext);\n  const dispatch = React.useContext(NineZoneDispatchContext);\n  assert(!!side);\n  assert(!!widgetPanel);\n  const [resizing, setResizing] = React.useState(false);\n  const [active, setActive] = React.useState(false);\n  const initialPointerPosition = React.useRef<Point>();\n  const dragStartTimer = React.useRef(new Timer(300));\n  const ref = React.useRef<T | null>(null);\n  const relativePosition = React.useRef(new Point());\n  const layoutStore = useLayoutStore();\n  const panelStateRef = React.useRef(layoutStore.getState().panels[side]);\n  React.useLayoutEffect(\n    () =>\n      layoutStore.subscribe((state) => {\n        panelStateRef.current = state.panels[side];\n      }),\n    [layoutStore, side]\n  );\n  const handleDoubleClick = React.useCallback(() => {\n    dispatch({\n      type: \"PANEL_TOGGLE_COLLAPSED\",\n      side,\n    });\n  }, [dispatch, side]);\n  const handleClick = useDoubleClick(handleDoubleClick);\n  const onDrag = React.useCallback<NonNullable<UseDragPanelGripArgs[\"onDrag\"]>>(\n    (pointerPosition, lastPointerPosition) => {\n      if (!ref.current) return;\n      const direction = side === \"left\" || side === \"top\" ? 1 : -1;\n      const dragOffset = lastPointerPosition.getOffsetTo(pointerPosition);\n      const dragBy = isHorizontalPanelSide(side) ? dragOffset.y : dragOffset.x;\n      const resizeBy = direction * dragBy;\n\n      const bounds = widgetPanel.getBounds();\n      const outerEdge = bounds[side];\n      const innerEdge = isHorizontalPanelSide(side)\n        ? pointerPosition.y\n        : pointerPosition.x;\n      const size = (innerEdge - outerEdge) * direction;\n\n      const panel = panelStateRef.current;\n      if (resizeBy === 0) return;\n      if (panel.collapsed) {\n        if (size >= panel.collapseOffset) {\n          dispatch({\n            type: \"PANEL_SET_COLLAPSED\",\n            side,\n            collapsed: false,\n          });\n          return;\n        }\n        return;\n      }\n\n      if (panel.size === undefined) return;\n\n      // New size should match drag direction (i.e. dragging `left` panel grip to the left should not increase left panel size).\n      const sizeDiff = size - panel.size;\n      if (sizeDiff * resizeBy < 0) return;\n      const collapseThreshold = Math.max(\n        panel.minSize - panel.collapseOffset,\n        0\n      );\n      if (size <= collapseThreshold) {\n        dispatch({\n          type: \"PANEL_SET_COLLAPSED\",\n          side,\n          collapsed: true,\n        });\n        dispatch({\n          type: \"PANEL_SET_SIZE\",\n          side,\n          size: panel.minSize,\n        });\n        return;\n      }\n\n      dispatch({\n        type: \"PANEL_SET_SIZE\",\n        side,\n        size,\n      });\n    },\n    [dispatch, side, widgetPanel]\n  );\n  const onDragEnd = React.useCallback(() => {\n    setResizing(false);\n  }, []);\n  const handlePanelGripDragStart = useDragPanelGrip({\n    side,\n    onDrag,\n    onDragEnd,\n  });\n  React.useEffect(() => {\n    const timer = dragStartTimer.current;\n    timer.setOnExecute(() => {\n      if (initialPointerPosition.current && ref.current) {\n        relativePosition.current = Rectangle.create(\n          ref.current.getBoundingClientRect()\n        )\n          .topLeft()\n          .getOffsetTo(initialPointerPosition.current);\n        setResizing(true);\n        handlePanelGripDragStart({\n          initialPointerPosition: initialPointerPosition.current,\n          pointerPosition: initialPointerPosition.current,\n        });\n      }\n      initialPointerPosition.current = undefined;\n    });\n    return () => {\n      timer.setOnExecute(undefined);\n    };\n  }, [handlePanelGripDragStart]);\n  const handleDragEnd = React.useCallback(() => {\n    initialPointerPosition.current = undefined;\n    dragStartTimer.current.stop();\n    handleClick();\n    setActive(false);\n  }, [handleClick]);\n  const handlePointerDown = React.useCallback((args: PointerCaptorArgs) => {\n    initialPointerPosition.current = new Point(args.clientX, args.clientY);\n    dragStartTimer.current.start();\n    setActive(true);\n  }, []);\n  const handlePointerMove = React.useCallback(\n    (args: PointerCaptorArgs) => {\n      if (!initialPointerPosition.current) return;\n      const position = new Point(args.clientX, args.clientY);\n      setResizing(true);\n      handlePanelGripDragStart({\n        initialPointerPosition: position,\n        pointerPosition: position,\n      });\n      onDrag(position, initialPointerPosition.current);\n      initialPointerPosition.current = undefined;\n      dragStartTimer.current.stop();\n    },\n    [handlePanelGripDragStart, onDrag]\n  );\n  const handlePointerCaptorRef = usePointerCaptor(\n    handlePointerDown,\n    handlePointerMove,\n    handleDragEnd\n  );\n  const handleRef = React.useCallback(\n    (instance: T | null) => {\n      ref.current = instance;\n      handlePointerCaptorRef(instance);\n    },\n    [handlePointerCaptorRef]\n  );\n  return [handleRef, resizing, active];\n};\n\n/** @internal */\nexport function useDoubleClick(onDoubleClick?: () => void): () => void {\n  const timer = React.useRef(new Timer(300));\n  const clickCount = React.useRef(0);\n  timer.current.setOnExecute(() => {\n    clickCount.current = 0;\n  });\n  const handleClick = React.useCallback(() => {\n    timer.current.start();\n    clickCount.current++;\n    if (clickCount.current === 2) {\n      onDoubleClick && onDoubleClick();\n      clickCount.current = 0;\n      timer.current.stop();\n    }\n  }, [onDoubleClick]);\n  return handleClick;\n}\n"]}

package/lib/esm/appui-react/layout/widget-panels/Grip.scss

@@ -0,0 +1,138 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+@import "variables";
+
+$line-grip-translate: 1px;
+$full-bar-width: calc(#{$nz-grip-width} * 0.5);
+$handle-width: calc(#{$nz-grip-width} + 1px);
+$line-grip-width: calc(#{$nz-grip-width} - 2px);
+
+.nz-widgetPanels-grip {
+  background-color: transparent;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  display: flex;
+  transition: 0.2s ease-out;
+
+  > .nz-handle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  &.nz-left {
+    transition-property: background-color, right;
+  }
+  &.nz-right {
+    transition-property: background-color, left;
+  }
+  &.nz-top {
+    transition-property: background-color, bottom;
+  }
+
+  &.nz-left,
+  &.nz-right {
+    flex-direction: column;
+    cursor: ew-resize;
+    width: $full-bar-width;
+    height: 100%;
+
+    > .nz-handle {
+      height: 100%;
+      width: $handle-width;
+    }
+  }
+
+  &.nz-top,
+  &.nz-bottom {
+    cursor: ns-resize;
+    width: 100%;
+    height: $full-bar-width;
+
+    > .nz-handle {
+      height: $handle-width;
+      width: 100%;
+    }
+  }
+
+  &:hover,
+  &.nz-resizing {
+    background-color: $buic-foreground-primary;
+  }
+}
+
+.nz-line-grip {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 0.2s ease-out, height 0.2s ease-out, width 0.2s ease-out;
+
+  .nz-captured &,
+  .nz-widgetPanels-grip.nz-resizing &,
+  .nz-collapsed .nz-widgetPanels-grip:hover & {
+    opacity: 0;
+    height: 100%;
+    width: 100%;
+  }
+
+  .nz-collapsed & {
+    display: flex;
+    background-color: $buic-background-5;
+    border: 1px solid var(--iui-color-border-subtle);
+    border-radius: 999px;
+    box-sizing: border-box;
+    opacity: 1;
+  }
+
+  .nz-left & {
+    transform: translateX($line-grip-translate);
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .nz-right & {
+    transform: translateX(calc(#{$line-grip-translate} * -1));
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .nz-top & {
+    transform: translateY($line-grip-translate);
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+  .nz-bottom & {
+    transform: translateY(calc(#{$line-grip-translate} * -1));
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .nz-left &,
+  .nz-right & {
+    height: 20%;
+    width: $line-grip-width;
+
+    .nz-line-grip-detail {
+      width: 1px;
+      height: 70%;
+    }
+  }
+
+  .nz-top &,
+  .nz-bottom & {
+    height: $line-grip-width;
+    width: 20%;
+
+    .nz-line-grip-detail {
+      width: 70%;
+      height: 1px;
+    }
+  }
+
+  .nz-line-grip-detail {
+    background-color: var(--iui-color-border-subtle);
+  }
+}

package/lib/esm/appui-react/layout/widget-panels/Panel.d.ts

@@ -0,0 +1,37 @@
+/** @packageDocumentation
+ * @module WidgetPanels
+ */
+import type { RectangleProps } from "@itwin/core-react";
+import * as React from "react";
+import "./Panel.scss";
+import type { BottomPanelSide, HorizontalPanelSide, LeftPanelSide, PanelSide, RightPanelSide, TopPanelSide } from "./PanelTypes";
+/** Properties of [[WidgetPanelProvider]] component.
+ * @internal
+ */
+export interface WidgetPanelProviderProps {
+    side: PanelSide;
+}
+/** Widget panel component is a side panel with multiple widgets.
+ * @internal
+ */
+export declare function WidgetPanelProvider({ side }: WidgetPanelProviderProps): React.JSX.Element;
+/** @internal */
+export declare function WidgetPanel(): React.JSX.Element;
+/** @internal */
+export declare const PanelSideContext: React.Context<PanelSide | undefined>;
+/** @internal */
+export interface WidgetPanelContextArgs {
+    getBounds(): RectangleProps;
+}
+/** @internal */
+export declare const WidgetPanelContext: React.Context<WidgetPanelContextArgs | undefined>;
+/** @internal */
+export declare const isHorizontalPanelSide: (side: PanelSide) => side is HorizontalPanelSide;
+/** @internal */
+export declare const panelSides: [
+    LeftPanelSide,
+    RightPanelSide,
+    TopPanelSide,
+    BottomPanelSide
+];
+//# sourceMappingURL=Panel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget-panels/Panel.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGxD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,cAAc,CAAC;AAEtB,OAAO,KAAK,EACV,eAAe,EACf,mBAAmB,EACnB,aAAa,EACb,SAAS,EACT,cAAc,EACd,YAAY,EACb,MAAM,cAAc,CAAC;AAGtB;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,SAAS,CAAC;CACjB;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE,EAAE,wBAAwB,qBAWrE;AAED,gBAAgB;AAChB,wBAAgB,WAAW,sBA+G1B;AAED,gBAAgB;AAChB,eAAO,MAAM,gBAAgB,sCAE5B,CAAC;AAGF,gBAAgB;AAChB,MAAM,WAAW,sBAAsB;IACrC,SAAS,IAAI,cAAc,CAAC;CAC7B;AAED,gBAAgB;AAChB,eAAO,MAAM,kBAAkB,mDAEnB,CAAC;AAGb,gBAAgB;AAChB,eAAO,MAAM,qBAAqB,SAC1B,SAAS,gCAGhB,CAAC;AAEF,gBAAgB;AAChB,eAAO,MAAM,UAAU,EAAE;IACvB,aAAa;IACb,cAAc;IACd,YAAY;IACZ,eAAe;CACqB,CAAC"}

package/lib/esm/appui-react/layout/widget-panels/Panel.js

@@ -0,0 +1,118 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 { assert } from "@itwin/core-bentley";
+import { useRefs } from "@itwin/core-react";
+import classnames from "classnames";
+import * as React from "react";
+import { DraggedPanelSideContext } from "../base/DragManager";
+import { useLayout } from "../base/LayoutStore";
+import { PanelOutline } from "../outline/PanelOutline";
+import { SectionOutline } from "../outline/SectionOutline";
+import { isHorizontalPanelState } from "../state/PanelState";
+import { PanelTargets } from "../target/PanelTargets";
+import { SectionTargets } from "../target/SectionTargets";
+import { usePreviewHorizontalPanelAlign } from "../widget/PreviewHorizontalPanelAlign";
+import { WidgetPanelGrip } from "./Grip";
+import "./Panel.scss";
+import { PanelSections } from "./PanelSections";
+import { useAnimatePanel } from "./useAnimatePanel";
+/** Widget panel component is a side panel with multiple widgets.
+ * @internal
+ */
+export function WidgetPanelProvider({ side }) {
+    const hasWidgets = useLayout((state) => state.panels[side].widgets.length > 0);
+    return (React.createElement(PanelSideContext.Provider, { value: side },
+        hasWidgets && React.createElement(WidgetPanel, null),
+        React.createElement(PanelTargets, null),
+        React.createElement(PanelOutline, null)));
+}
+/** @internal */
+export function WidgetPanel() {
+    const side = React.useContext(PanelSideContext);
+    const draggedPanelSide = React.useContext(DraggedPanelSideContext);
+    assert(!!side);
+    const { enabled: previewHorizontalPanelAlignmentEnabled, alignments } = usePreviewHorizontalPanelAlign();
+    const previewHorizontalPanelAlignAttributes = React.useMemo(() => previewHorizontalPanelAlignmentEnabled
+        ? {
+            "data-preview-horizontal-panel-align-top": alignments.top,
+            "data-preview-horizontal-panel-align-bottom": alignments.bottom,
+        }
+        : {}, [alignments.bottom, alignments.top, previewHorizontalPanelAlignmentEnabled]);
+    const spanTop = useLayout((state) => state.panels.top.span);
+    const spanBottom = useLayout((state) => state.panels.bottom.span);
+    const panel = useLayout((state) => {
+        const p = state.panels[side];
+        const span = isHorizontalPanelState(p) ? p.span : false;
+        return {
+            collapsed: p.collapsed,
+            widgets: p.widgets,
+            resizable: p.resizable,
+            span,
+        };
+    }, true);
+    const { handleTransitionEnd, size, contentSize, transition, ref: panelRef, } = useAnimatePanel();
+    const isHorizontal = isHorizontalPanelSide(side);
+    const style = React.useMemo(() => {
+        if (isHorizontal)
+            return {
+                height: `${size}px`,
+            };
+        return {
+            width: `${size}px`,
+        };
+    }, [size, isHorizontal]);
+    const contentStyle = React.useMemo(() => {
+        if (contentSize === undefined)
+            return undefined;
+        if (isHorizontal)
+            return {
+                minHeight: `${contentSize}px`,
+            };
+        return {
+            minWidth: `${contentSize}px`,
+        };
+    }, [contentSize, isHorizontal]);
+    const elementRef = React.useRef(null);
+    const getBounds = React.useCallback(() => {
+        assert(!!elementRef.current);
+        return elementRef.current.getBoundingClientRect();
+    }, []);
+    const widgetPanel = React.useMemo(() => {
+        return {
+            getBounds,
+        };
+    }, [getBounds]);
+    const captured = draggedPanelSide === side;
+    const className = classnames("nz-widgetPanels-panel", `nz-${side}`, panel.collapsed && "nz-collapsed", captured && "nz-captured", panel.span && "nz-span", spanTop && "nz-span-top", spanBottom && "nz-span-bottom", transition && `nz-${transition}`);
+    const singleSection = panel.widgets.length === 1;
+    const showSectionTargets = singleSection && !panel.collapsed;
+    const ref = useRefs(elementRef, panelRef);
+    /* istanbul ignore next */
+    return (React.createElement(WidgetPanelContext.Provider, { value: widgetPanel },
+        React.createElement("div", { className: className, ref: ref, style: style, onTransitionEnd: handleTransitionEnd, ...previewHorizontalPanelAlignAttributes },
+            React.createElement("div", { className: "nz-content", style: contentStyle },
+                singleSection && React.createElement(SectionOutline, { sectionIndex: 0 }),
+                React.createElement(PanelSections, null),
+                singleSection && React.createElement(SectionOutline, { sectionIndex: 1 })),
+            showSectionTargets && React.createElement(SectionTargets, { widgetId: panel.widgets[0] }),
+            panel.resizable && (React.createElement("div", { className: "nz-grip-container" },
+                React.createElement(WidgetPanelGrip, { className: "nz-grip" }))))));
+}
+/** @internal */
+export const PanelSideContext = React.createContext(undefined);
+PanelSideContext.displayName = "nz:PanelSideContext";
+/** @internal */
+export const WidgetPanelContext = React.createContext(undefined);
+WidgetPanelContext.displayName = "nz:WidgetPanelContext";
+/** @internal */
+export const isHorizontalPanelSide = (side) => {
+    return side === "top" || side === "bottom";
+};
+/** @internal */
+export const panelSides = ["left", "right", "top", "bottom"];
+//# sourceMappingURL=Panel.js.map