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

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

@@ -0,0 +1,327 @@
+/*---------------------------------------------------------------------------------------------
+ * 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";
+
+.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: $buic-background-2;
+  }
+
+  &.nz-transition {
+    transition-duration: var(--iui-duration-2);
+    transition-timing-function: ease-in;
+  }
+
+  &.nz-left,
+  &.nz-right {
+    max-width: 100%;
+    min-height: 0;
+
+    > .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 {
+    grid-column: 1/2;
+
+    &[data-preview-horizontal-panel-align-top="right"],
+    &[data-preview-horizontal-panel-align-top="center"] {
+      grid-row-start: 1;
+    }
+    &[data-preview-horizontal-panel-align-top="left"],
+    &[data-preview-horizontal-panel-align-top="justify"] {
+      grid-row-start: 2;
+    }
+    &[data-preview-horizontal-panel-align-bottom="right"],
+    &[data-preview-horizontal-panel-align-bottom="center"] {
+      grid-row-end: 4;
+    }
+    &[data-preview-horizontal-panel-align-bottom="left"],
+    &[data-preview-horizontal-panel-align-bottom="justify"] {
+      grid-row-end: 3;
+    }
+
+    > .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 {
+    grid-column: 3/4;
+
+    &[data-preview-horizontal-panel-align-top="right"],
+    &[data-preview-horizontal-panel-align-top="justify"] {
+      grid-row-start: 2;
+    }
+    &[data-preview-horizontal-panel-align-top="left"],
+    &[data-preview-horizontal-panel-align-top="center"] {
+      grid-row-start: 1;
+    }
+    &[data-preview-horizontal-panel-align-bottom="right"],
+    &[data-preview-horizontal-panel-align-bottom="justify"] {
+      grid-row-end: 3;
+    }
+    &[data-preview-horizontal-panel-align-bottom="left"],
+    &[data-preview-horizontal-panel-align-bottom="center"] {
+      grid-row-end: 4;
+    }
+
+    > .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 {
+    grid-row: 1;
+
+    > .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;
+    }
+
+    &[data-preview-horizontal-panel-align-top="left"],
+    &[data-preview-horizontal-panel-align-top="justify"] {
+      grid-column-start: 1;
+    }
+    &[data-preview-horizontal-panel-align-top="right"],
+    &[data-preview-horizontal-panel-align-top="center"] {
+      grid-column-start: 2;
+    }
+    &[data-preview-horizontal-panel-align-top="right"],
+    &[data-preview-horizontal-panel-align-top="justify"] {
+      grid-column-end: 4;
+    }
+    &[data-preview-horizontal-panel-align-top="left"],
+    &[data-preview-horizontal-panel-align-top="center"] {
+      grid-column-end: 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 {
+    grid-row: 3;
+
+    > .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;
+    }
+
+    &[data-preview-horizontal-panel-align-bottom="left"],
+    &[data-preview-horizontal-panel-align-bottom="justify"] {
+      grid-column-start: 1;
+    }
+    &[data-preview-horizontal-panel-align-bottom="right"],
+    &[data-preview-horizontal-panel-align-bottom="center"] {
+      grid-column-start: 2;
+    }
+    &[data-preview-horizontal-panel-align-bottom="right"],
+    &[data-preview-horizontal-panel-align-bottom="justify"] {
+      grid-column-end: 4;
+    }
+    &[data-preview-horizontal-panel-align-bottom="left"],
+    &[data-preview-horizontal-panel-align-bottom="center"] {
+      grid-column-end: 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%;
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+/** @packageDocumentation
+ * @module WidgetPanels
+ */
+import * as React from "react";
+/** @internal */
+export declare function PanelSections(): React.JSX.Element;
+//# sourceMappingURL=PanelSections.d.ts.map

package/lib/cjs/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;AAGH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkH/B,gBAAgB;AAChB,wBAAgB,aAAa,sBAsD5B"}

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

@@ -0,0 +1,121 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * 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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelSections = void 0;
+const classnames_1 = require("classnames");
+const React = require("react");
+const core_bentley_1 = require("@itwin/core-bentley");
+const NineZone_1 = require("../base/NineZone");
+const PanelWidget_1 = require("../widget/PanelWidget");
+const LayoutStore_1 = require("../base/LayoutStore");
+const Panel_1 = require("./Panel");
+// istanbul ignore next
+function PanelSplitter() {
+    const dispatch = React.useContext(NineZone_1.NineZoneDispatchContext);
+    const side = React.useContext(Panel_1.PanelSideContext);
+    (0, core_bentley_1.assert)(!!side);
+    const containerRef = React.useRef(null);
+    const splitterProcessingActiveRef = React.useRef(false);
+    const isHorizontal = (0, Panel_1.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) => {
+        var _a, _b;
+        updatePanelSize(event);
+        event.preventDefault();
+        event.stopPropagation();
+        (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.removeEventListener("pointermove", handlePointerMove);
+        (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.removeEventListener("pointerup", handlePointerUp);
+    }, [handlePointerMove, updatePanelSize]);
+    const handlePointerDownOnSplitter = React.useCallback((event) => {
+        var _a, _b;
+        if (containerRef.current) {
+            (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.addEventListener("pointermove", handlePointerMove);
+            (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.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 */
+function PanelSections() {
+    const side = React.useContext(Panel_1.PanelSideContext);
+    (0, core_bentley_1.assert)(!!side);
+    const panel = (0, LayoutStore_1.useLayout)((state) => {
+        const p = state.panels[side];
+        return {
+            splitterPercent: p.splitterPercent,
+            widgets: p.widgets,
+        };
+    }, true);
+    const isHorizontal = (0, Panel_1.isHorizontalPanelSide)(side);
+    const splitterControlledPanelStyle = React.useMemo(() => {
+        var _a;
+        // istanbul ignore next
+        const splitterPercent = (_a = panel.splitterPercent) !== null && _a !== void 0 ? _a : 50;
+        if (isHorizontal) {
+            return {
+                width: `${splitterPercent}%`,
+            };
+        }
+        return {
+            height: `${splitterPercent}%`,
+        };
+    }, [isHorizontal, panel.splitterPercent]);
+    /* istanbul ignore next */
+    return (React.createElement(React.Fragment, null, panel.widgets.map((widgetId, index, array) => {
+        const last = index === array.length - 1;
+        const sectionClassName = (0, classnames_1.default)(`nz-panel-section-${index}`, isHorizontal
+            ? "nz-widgetPanels-horizontal"
+            : "nz-widgetPanels-vertical", last && 0 === index && "nz-panel-section-full-size");
+        const panelStyle = index === 0 && array.length > 1
+            ? splitterControlledPanelStyle
+            : undefined;
+        return (React.createElement("div", { key: widgetId, className: sectionClassName, style: panelStyle },
+            React.createElement(PanelWidget_1.PanelWidget, { widgetId: widgetId }),
+            !last && 0 === index && React.createElement(PanelSplitter, null)));
+    })));
+}
+exports.PanelSections = PanelSections;
+//# sourceMappingURL=PanelSections.js.map

package/lib/cjs/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 classnames from \"classnames\";\nimport * as React from \"react\";\nimport { assert } from \"@itwin/core-bentley\";\nimport { NineZoneDispatchContext } from \"../base/NineZone\";\nimport { PanelWidget } from \"../widget/PanelWidget\";\nimport { useLayout } from \"../base/LayoutStore\";\nimport { isHorizontalPanelSide, PanelSideContext } from \"./Panel\";\n\n// istanbul ignore next\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 panel = useLayout((state) => {\n    const p = state.panels[side];\n    return {\n      splitterPercent: p.splitterPercent,\n      widgets: p.widgets,\n    };\n  }, true);\n\n  const isHorizontal = isHorizontalPanelSide(side);\n\n  const splitterControlledPanelStyle = React.useMemo(() => {\n    // istanbul ignore next\n    const splitterPercent = panel.splitterPercent ?? 50;\n    if (isHorizontal) {\n      return {\n        width: `${splitterPercent}%`,\n      };\n    }\n    return {\n      height: `${splitterPercent}%`,\n    };\n  }, [isHorizontal, panel.splitterPercent]);\n\n  /* istanbul ignore next */\n  return (\n    <>\n      {panel.widgets.map((widgetId, index, array) => {\n        const last = index === array.length - 1;\n\n        const sectionClassName = classnames(\n          `nz-panel-section-${index}`,\n          isHorizontal\n            ? \"nz-widgetPanels-horizontal\"\n            : \"nz-widgetPanels-vertical\",\n          last && 0 === index && \"nz-panel-section-full-size\"\n        );\n\n        const panelStyle =\n          index === 0 && array.length > 1\n            ? splitterControlledPanelStyle\n            : undefined;\n        return (\n          <div key={widgetId} className={sectionClassName} style={panelStyle}>\n            <PanelWidget widgetId={widgetId} />\n            {!last && 0 === index && <PanelSplitter />}\n          </div>\n        );\n      })}\n    </>\n  );\n}\n"]}

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

@@ -0,0 +1,15 @@
+/** @internal */
+export type TopPanelSide = "top";
+/** @internal */
+export type BottomPanelSide = "bottom";
+/** @internal */
+export type LeftPanelSide = "left";
+/** @internal */
+export type RightPanelSide = "right";
+/** @internal */
+export type HorizontalPanelSide = TopPanelSide | BottomPanelSide;
+/** @internal */
+export type VerticalPanelSide = LeftPanelSide | RightPanelSide;
+/** @internal */
+export type PanelSide = VerticalPanelSide | HorizontalPanelSide;
+//# sourceMappingURL=PanelTypes.d.ts.map

package/lib/cjs/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/cjs/appui-react/layout/widget-panels/PanelTypes.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=PanelTypes.js.map

package/lib/cjs/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/cjs/appui-react/layout/widget-panels/Panels.d.ts

@@ -0,0 +1,24 @@
+/** @packageDocumentation
+ * @module WidgetPanels
+ */
+import "./Panels.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** Properties of [[WidgetPanels]] component.
+ * @internal
+ */
+export interface WidgetPanelsProps extends CommonProps {
+    /** Content that is affected by pinned state of panels. */
+    children?: React.ReactNode;
+    /** Content that is always rendered as if panels are in a pinned state. */
+    centerContent?: React.ReactNode;
+}
+/** Component that displays widget panels.
+ * @internal
+ */
+export declare function WidgetPanels(props: WidgetPanelsProps): React.JSX.Element;
+/** @internal */
+export declare const ContentNodeContext: React.Context<React.ReactNode>;
+/** @internal */
+export declare const CenterContentNodeContext: React.Context<React.ReactNode>;
+//# sourceMappingURL=Panels.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Panels.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget-panels/Panels.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,eAAe,CAAC;AAEvB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAQrD;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0EAA0E;IAC1E,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAWpD;AAmBD,gBAAgB;AAChB,eAAO,MAAM,kBAAkB,gCAA6C,CAAC;AAG7E,gBAAgB;AAChB,eAAO,MAAM,wBAAwB,gCACO,CAAC"}

package/lib/cjs/appui-react/layout/widget-panels/Panels.js

@@ -0,0 +1,48 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * 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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CenterContentNodeContext = exports.ContentNodeContext = exports.WidgetPanels = void 0;
+require("./Panels.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const ContentRenderer_1 = require("../widget/ContentRenderer");
+const AppContent_1 = require("./AppContent");
+const CenterContent_1 = require("./CenterContent");
+const CursorOverlay_1 = require("./CursorOverlay");
+const Panel_1 = require("./Panel");
+const Expander_1 = require("./Expander");
+/** Component that displays widget panels.
+ * @internal
+ */
+function WidgetPanels(props) {
+    return (React.createElement(exports.ContentNodeContext.Provider, { value: props.children },
+        React.createElement(exports.CenterContentNodeContext.Provider, { value: props.centerContent },
+            React.createElement(WidgetPanelsComponent, { className: props.className, style: props.style }))));
+}
+exports.WidgetPanels = WidgetPanels;
+/** @internal */
+function WidgetPanelsComponent(props) {
+    (0, CursorOverlay_1.useCursor)();
+    const className = (0, classnames_1.default)("nz-widgetPanels-panels", props.className);
+    return (React.createElement("div", { className: className, style: props.style },
+        React.createElement(ContentRenderer_1.WidgetContentRenderers, null),
+        React.createElement(AppContent_1.AppContent, null),
+        React.createElement(Expander_1.WidgetPanelExpanders, null),
+        React.createElement(CenterContent_1.CenterContent, null),
+        Panel_1.panelSides.map((side) => {
+            return React.createElement(Panel_1.WidgetPanelProvider, { key: side, side: side });
+        })));
+}
+/** @internal */
+exports.ContentNodeContext = React.createContext(null);
+exports.ContentNodeContext.displayName = "nz:ContentNodeContext";
+/** @internal */
+exports.CenterContentNodeContext = React.createContext(null);
+exports.CenterContentNodeContext.displayName = "nz:CenterContentNodeContext";
+//# sourceMappingURL=Panels.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Panels.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget-panels/Panels.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,yBAAuB;AACvB,2CAAoC;AACpC,+BAA+B;AAE/B,+DAAmE;AACnE,6CAA0C;AAC1C,mDAAgD;AAChD,mDAA4C;AAC5C,mCAA0D;AAC1D,yCAAkD;AAYlD;;GAEG;AACH,SAAgB,YAAY,CAAC,KAAwB;IACnD,OAAO,CACL,oBAAC,0BAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,CAAC,QAAQ;QAChD,oBAAC,gCAAwB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,CAAC,aAAa;YAC3D,oBAAC,qBAAqB,IACpB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,GAClB,CACgC,CACR,CAC/B,CAAC;AACJ,CAAC;AAXD,oCAWC;AAED,gBAAgB;AAChB,SAAS,qBAAqB,CAAC,KAAkB;IAC/C,IAAA,yBAAS,GAAE,CAAC;IACZ,MAAM,SAAS,GAAG,IAAA,oBAAU,EAAC,wBAAwB,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IACxE,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK;QAC3C,oBAAC,wCAAsB,OAAG;QAC1B,oBAAC,uBAAU,OAAG;QACd,oBAAC,+BAAoB,OAAG;QACxB,oBAAC,6BAAa,OAAG;QAChB,kBAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YACvB,OAAO,oBAAC,2BAAmB,IAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;QACxD,CAAC,CAAC,CACE,CACP,CAAC;AACJ,CAAC;AAED,gBAAgB;AACH,QAAA,kBAAkB,GAAG,KAAK,CAAC,aAAa,CAAkB,IAAI,CAAC,CAAC;AAC7E,0BAAkB,CAAC,WAAW,GAAG,uBAAuB,CAAC;AAEzD,gBAAgB;AACH,QAAA,wBAAwB,GACnC,KAAK,CAAC,aAAa,CAAkB,IAAI,CAAC,CAAC;AAC7C,gCAAwB,CAAC,WAAW,GAAG,6BAA6B,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 \"./Panels.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { WidgetContentRenderers } from \"../widget/ContentRenderer\";\nimport { AppContent } from \"./AppContent\";\nimport { CenterContent } from \"./CenterContent\";\nimport { useCursor } from \"./CursorOverlay\";\nimport { panelSides, WidgetPanelProvider } from \"./Panel\";\nimport { WidgetPanelExpanders } from \"./Expander\";\n\n/** Properties of [[WidgetPanels]] component.\n * @internal\n */\nexport interface WidgetPanelsProps extends CommonProps {\n  /** Content that is affected by pinned state of panels. */\n  children?: React.ReactNode;\n  /** Content that is always rendered as if panels are in a pinned state. */\n  centerContent?: React.ReactNode;\n}\n\n/** Component that displays widget panels.\n * @internal\n */\nexport function WidgetPanels(props: WidgetPanelsProps) {\n  return (\n    <ContentNodeContext.Provider value={props.children}>\n      <CenterContentNodeContext.Provider value={props.centerContent}>\n        <WidgetPanelsComponent\n          className={props.className}\n          style={props.style}\n        />\n      </CenterContentNodeContext.Provider>\n    </ContentNodeContext.Provider>\n  );\n}\n\n/** @internal */\nfunction WidgetPanelsComponent(props: CommonProps) {\n  useCursor();\n  const className = classnames(\"nz-widgetPanels-panels\", props.className);\n  return (\n    <div className={className} style={props.style}>\n      <WidgetContentRenderers />\n      <AppContent />\n      <WidgetPanelExpanders />\n      <CenterContent />\n      {panelSides.map((side) => {\n        return <WidgetPanelProvider key={side} side={side} />;\n      })}\n    </div>\n  );\n}\n\n/** @internal */\nexport const ContentNodeContext = React.createContext<React.ReactNode>(null);\nContentNodeContext.displayName = \"nz:ContentNodeContext\";\n\n/** @internal */\nexport const CenterContentNodeContext =\n  React.createContext<React.ReactNode>(null);\nCenterContentNodeContext.displayName = \"nz:CenterContentNodeContext\";\n"]}

package/lib/cjs/appui-react/layout/widget-panels/Panels.scss

@@ -0,0 +1,70 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 "~@itwin/core-react/lib/cjs/core-react/z-index";
+
+.nz-widgetPanels-panels {
+  display: grid;
+  background-color: $buic-background-widget-panel;
+  grid-template-columns: minmax(0, auto) 1fr minmax(0, auto);
+  grid-template-rows: minmax(0, auto) 1fr minmax(0, auto);
+  overflow: hidden;
+  position: relative;
+
+  .nz-widgetPanels-vertical {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-height: 100px;
+
+    /* if only one panel section set flex:1 */
+    &:first-child.nz-panel-section-full-size {
+      flex: 1;
+    }
+
+    &:not(:first-child) {
+      flex: 1;
+    }
+  }
+
+  .nz-vertical-panel-splitter {
+    position: absolute;
+    bottom: -5px;
+    background-color: transparent;
+    display: flex;
+    width: 100%;
+    height: 10px;
+    cursor: row-resize;
+    z-index: 1;
+  }
+
+  .nz-widgetPanels-horizontal {
+    position: relative;
+    display: flex;
+    min-width: 100px;
+
+    /* if only one panel section set flex:1 */
+    &:first-child.nz-panel-section-full-size {
+      flex: 1;
+    }
+
+    &:not(:first-child) {
+      flex: 1;
+    }
+  }
+
+  .nz-horizontal-panel-splitter {
+    position: absolute;
+    right: -5px;
+    background-color: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 10px;
+    cursor: col-resize;
+    z-index: 1;
+  }
+}

package/lib/cjs/appui-react/layout/widget-panels/_variables.scss

@@ -0,0 +1,6 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+$nz-grip-width: 0.75em;
+$nz-grip-height: 2em;