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

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

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

package/lib/esm/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/esm/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/esm/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/esm/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 classnames from "classnames";
+import * as React from "react";
+import { assert } from "@itwin/core-bentley";
+import { NineZoneDispatchContext } from "../base/NineZone";
+import { PanelWidget } from "../widget/PanelWidget";
+import { useLayout } from "../base/LayoutStore";
+import { isHorizontalPanelSide, PanelSideContext } from "./Panel";
+// istanbul ignore next
+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) => {
+        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 */
+export function PanelSections() {
+    const side = React.useContext(PanelSideContext);
+    assert(!!side);
+    const panel = useLayout((state) => {
+        const p = state.panels[side];
+        return {
+            splitterPercent: p.splitterPercent,
+            widgets: p.widgets,
+        };
+    }, true);
+    const isHorizontal = 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 = classnames(`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, { widgetId: widgetId }),
+            !last && 0 === index && React.createElement(PanelSplitter, null)));
+    })));
+}
+//# sourceMappingURL=PanelSections.js.map

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=PanelTypes.js.map

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

@@ -0,0 +1,44 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 "./Panels.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { WidgetContentRenderers } from "../widget/ContentRenderer";
+import { AppContent } from "./AppContent";
+import { CenterContent } from "./CenterContent";
+import { useCursor } from "./CursorOverlay";
+import { panelSides, WidgetPanelProvider } from "./Panel";
+import { WidgetPanelExpanders } from "./Expander";
+/** Component that displays widget panels.
+ * @internal
+ */
+export function WidgetPanels(props) {
+    return (React.createElement(ContentNodeContext.Provider, { value: props.children },
+        React.createElement(CenterContentNodeContext.Provider, { value: props.centerContent },
+            React.createElement(WidgetPanelsComponent, { className: props.className, style: props.style }))));
+}
+/** @internal */
+function WidgetPanelsComponent(props) {
+    useCursor();
+    const className = classnames("nz-widgetPanels-panels", props.className);
+    return (React.createElement("div", { className: className, style: props.style },
+        React.createElement(WidgetContentRenderers, null),
+        React.createElement(AppContent, null),
+        React.createElement(WidgetPanelExpanders, null),
+        React.createElement(CenterContent, null),
+        panelSides.map((side) => {
+            return React.createElement(WidgetPanelProvider, { key: side, side: side });
+        })));
+}
+/** @internal */
+export const ContentNodeContext = React.createContext(null);
+ContentNodeContext.displayName = "nz:ContentNodeContext";
+/** @internal */
+export const CenterContentNodeContext = React.createContext(null);
+CenterContentNodeContext.displayName = "nz:CenterContentNodeContext";
+//# sourceMappingURL=Panels.js.map

package/lib/esm/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,OAAO,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAYlD;;GAEG;AACH,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,OAAO,CACL,oBAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,CAAC,QAAQ;QAChD,oBAAC,wBAAwB,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;AAED,gBAAgB;AAChB,SAAS,qBAAqB,CAAC,KAAkB;IAC/C,SAAS,EAAE,CAAC;IACZ,MAAM,SAAS,GAAG,UAAU,CAAC,wBAAwB,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IACxE,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK;QAC3C,oBAAC,sBAAsB,OAAG;QAC1B,oBAAC,UAAU,OAAG;QACd,oBAAC,oBAAoB,OAAG;QACxB,oBAAC,aAAa,OAAG;QAChB,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YACvB,OAAO,oBAAC,mBAAmB,IAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;QACxD,CAAC,CAAC,CACE,CACP,CAAC;AACJ,CAAC;AAED,gBAAgB;AAChB,MAAM,CAAC,MAAM,kBAAkB,GAAG,KAAK,CAAC,aAAa,CAAkB,IAAI,CAAC,CAAC;AAC7E,kBAAkB,CAAC,WAAW,GAAG,uBAAuB,CAAC;AAEzD,gBAAgB;AAChB,MAAM,CAAC,MAAM,wBAAwB,GACnC,KAAK,CAAC,aAAa,CAAkB,IAAI,CAAC,CAAC;AAC7C,wBAAwB,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"]}