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

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

@@ -5,323 +5,255 @@
 @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;
+@layer appui.component {
+  .nz-widgetPanels-panel {
     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;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      pointer-events: none;
 
       > .nz-grip {
-        top: 50%;
+        pointer-events: all;
+        position: absolute;
+        z-index: 1;
       }
     }
 
-    &.nz-transition {
-      transition-property: width;
-    }
-
-    &.nz-span-top {
-      grid-row-start: 2;
+    > .nz-content {
+      display: flex;
+      position: relative;
+      background: $buic-background-2;
     }
 
-    &:not(.nz-span-top) {
-      grid-row-start: 1;
+    &.nz-transition {
+      transition-duration: var(--iui-duration-2);
+      transition-timing-function: ease-in;
     }
 
-    &.nz-span-bottom {
-      grid-row-end: 3;
-    }
+    &.nz-left,
+    &.nz-right {
+      max-width: 100%;
+      min-height: 0;
+      height: 100%;
 
-    &:not(.nz-span-bottom) {
-      grid-row-end: 4;
-    }
-  }
+      > .nz-content {
+        flex-direction: column;
+        height: 100%;
+        width: 100%;
+      }
 
-  &.nz-left {
-    grid-column: 1/2;
+      > .nz-grip-container {
+        top: 0;
+        min-width: $nz-grip-width * 0.5;
 
-    &[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 {
+          top: 50%;
+        }
+      }
 
-    > .nz-grip-container {
-      left: 0;
+      &.nz-transition {
+        transition-property: width;
+      }
 
-      > .nz-grip.nz-grip {
-        right: calc(#{$nz-grip-width} * -0.5);
-        transform: translate(0, -50%);
+      &.nz-span-top {
+        grid-row-start: 2;
       }
-    }
 
-    &.nz-transition {
-      > .nz-content {
-        position: absolute;
-        right: 0;
+      &:not(.nz-span-top) {
+        grid-row-start: 1;
       }
-    }
 
-    &.nz-collapsed {
-      &.nz-captured {
-        &:not(.nz-transition) {
-          > .nz-content {
-            position: absolute;
-            width: unset;
-            right: -$nz-grip-width * 0.5;
-          }
-        }
+      &.nz-span-bottom {
+        grid-row-end: 3;
       }
 
-      > .nz-grip-container > .nz-grip {
-        right: 0;
+      &:not(.nz-span-bottom) {
+        grid-row-end: 4;
       }
     }
-  }
 
-  &.nz-right {
-    grid-column: 3/4;
+    &.nz-left {
+      > .nz-grip-container {
+        left: 0;
 
-    &[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.nz-grip {
+          right: calc(#{$nz-grip-width} * -0.5);
+          transform: translate(0, -50%);
+        }
+      }
 
-    > .nz-grip-container {
-      right: 0;
+      &.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.nz-grip {
-        left: calc(#{$nz-grip-width} * -0.5);
-        transform: translate(0, -50%);
+        > .nz-grip-container > .nz-grip {
+          right: 0;
+        }
       }
     }
 
-    > .nz-content {
-      left: 0;
-    }
+    &.nz-right {
+      > .nz-grip-container {
+        right: 0;
 
-    &.nz-collapsed {
-      &.nz-captured {
-        &:not(.nz-transition) {
-          > .nz-content {
-            position: absolute;
-            width: unset;
-            left: -$nz-grip-width * 0.5;
-          }
+        > .nz-grip.nz-grip {
+          left: calc(#{$nz-grip-width} * -0.5);
+          transform: translate(0, -50%);
         }
       }
 
-      > .nz-grip-container > .nz-grip {
+      > .nz-content {
         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-collapsed {
+        &.nz-captured {
+          &:not(.nz-transition) {
+            > .nz-content {
+              position: absolute;
+              width: unset;
+              left: -$nz-grip-width * 0.5;
+            }
+          }
+        }
 
-      > .nz-grip {
-        left: 50%;
+        > .nz-grip-container > .nz-grip {
+          left: 0;
+        }
       }
     }
 
-    > .nz-content {
-      flex-direction: row;
-      width: 100%;
-      height: 100%;
-    }
-  }
+    &.nz-top,
+    &.nz-bottom {
+      max-height: 100%;
+      min-width: 0;
 
-  &.nz-top {
-    grid-row: 1;
+      &.nz-transition {
+        transition-property: height;
+      }
 
-    > .nz-grip-container {
-      top: 0;
+      > .nz-grip-container {
+        left: 0;
+        min-height: $nz-grip-width * 0.5;
 
-      > .nz-grip.nz-grip {
-        bottom: calc(#{$nz-grip-width} * -0.5);
-        transform: translate(-50%, 0);
+        > .nz-grip {
+          left: 50%;
+        }
       }
-    }
 
-    &.nz-transition {
       > .nz-content {
-        position: absolute;
-        bottom: 0;
+        flex-direction: row;
+        width: 100%;
+        height: 100%;
       }
     }
 
-    &.nz-span {
-      grid-column: 1/4;
-    }
-
-    &:not(.nz-span) {
-      grid-column: 2/3;
-    }
+    &.nz-top {
+      > .nz-grip-container {
+        top: 0;
 
-    &[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-grip.nz-grip {
+          bottom: calc(#{$nz-grip-width} * -0.5);
+          transform: translate(-50%, 0);
+        }
+      }
 
-    &.nz-collapsed {
-      &.nz-captured {
-        &:not(.nz-transition) {
-          > .nz-content {
-            position: absolute;
-            height: unset;
-            bottom: -$nz-grip-width * 0.5;
-          }
+      &.nz-transition {
+        > .nz-content {
+          position: absolute;
+          bottom: 0;
         }
       }
 
-      > .nz-grip-container > .nz-grip {
-        bottom: 0;
+      &.nz-span {
+        grid-column: 1/4;
       }
-    }
-  }
 
-  &.nz-bottom {
-    grid-row: 3;
+      &:not(.nz-span) {
+        grid-column: 2/3;
+      }
 
-    > .nz-grip-container {
-      bottom: 0;
+      &.nz-collapsed {
+        &.nz-captured {
+          &:not(.nz-transition) {
+            > .nz-content {
+              position: absolute;
+              height: unset;
+              bottom: -$nz-grip-width * 0.5;
+            }
+          }
+        }
 
-      > .nz-grip {
-        top: 0;
-        transform: translate(-50%, 0);
+        > .nz-grip-container > .nz-grip {
+          bottom: 0;
+        }
       }
     }
 
-    &.nz-span {
-      grid-column: 1/4;
-    }
+    &.nz-bottom {
+      > .nz-grip-container {
+        bottom: 0;
 
-    &:not(.nz-span) {
-      grid-column: 2/3;
-    }
+        > .nz-grip {
+          top: 0;
+          transform: translate(-50%, 0);
+        }
+      }
 
-    &[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-span {
+        grid-column: 1/4;
+      }
 
-    &.nz-collapsed {
-      &.nz-captured {
-        &:not(.nz-transition) {
-          > .nz-content {
-            position: absolute;
-            height: unset;
-            top: -$nz-grip-width * 0.5;
+      &:not(.nz-span) {
+        grid-column: 2/3;
+      }
+
+      &.nz-collapsed {
+        &.nz-captured {
+          &:not(.nz-transition) {
+            > .nz-content {
+              position: absolute;
+              height: unset;
+              top: -$nz-grip-width * 0.5;
+            }
           }
         }
       }
     }
-  }
 
-  &.nz-collapsed {
-    > .nz-content {
-      overflow: hidden;
+    &.nz-collapsed {
+      > .nz-content {
+        overflow: hidden;
+      }
     }
-  }
 
-  &:not(.nz-collapsed) {
-    > .nz-content {
-      height: 100%;
-      width: 100%;
+    &:not(.nz-collapsed) {
+      > .nz-content {
+        height: 100%;
+        width: 100%;
+      }
     }
   }
+
+  .nz-widgetPanels_panelContainer {
+    position: relative;
+    height: 100%;
+  }
 }

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

@@ -1,6 +1,7 @@
 /** @packageDocumentation
  * @module WidgetPanels
  */
+import "./PanelSections.scss";
 import * as React from "react";
 /** @internal */
 export declare function PanelSections(): React.JSX.Element;

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

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

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

@@ -5,6 +5,7 @@
 /** @packageDocumentation
  * @module WidgetPanels
  */
+import "./PanelSections.scss";
 import classnames from "classnames";
 import * as React from "react";
 import { assert } from "@itwin/core-bentley";
@@ -12,6 +13,7 @@ import { NineZoneDispatchContext } from "../base/NineZone";
 import { PanelWidget } from "../widget/PanelWidget";
 import { useLayout } from "../base/LayoutStore";
 import { isHorizontalPanelSide, PanelSideContext } from "./Panel";
+import { useMaximizedPanel, useMaximizedSection, } from "../../preview/enable-maximized-widget/useMaximizedWidget";
 // istanbul ignore next
 function PanelSplitter() {
     const dispatch = React.useContext(NineZoneDispatchContext);
@@ -77,38 +79,40 @@ function PanelSplitter() {
 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 widgets = useLayout((state) => {
+        return state.panels[side].widgets;
+    });
+    return (React.createElement(React.Fragment, null, widgets.map((widgetId, index, array) => {
+        return (React.createElement(PanelSection, { key: widgetId, widgetId: widgetId, index: index, sectionLength: array.length }));
+    })));
+}
+function PanelSection({ widgetId, index, sectionLength }) {
+    const side = React.useContext(PanelSideContext);
+    assert(!!side);
+    const splitterPercent = useLayout((state) => {
+        return state.panels[side].splitterPercent ?? 50;
+    });
+    const maximizedSection = useMaximizedSection(widgetId);
+    const isMaximizedPanel = !!useMaximizedPanel(side);
     const isHorizontal = isHorizontalPanelSide(side);
-    const splitterControlledPanelStyle = React.useMemo(() => {
-        // istanbul ignore next
-        const splitterPercent = panel.splitterPercent ?? 50;
-        if (isHorizontal) {
-            return {
-                width: `${splitterPercent}%`,
-            };
-        }
+    const last = index === sectionLength - 1;
+    const className = classnames("nz-widgetPanels-panelSections_section", `nz-panel-section-${index}`, isHorizontal ? "nz-widgetPanels-horizontal" : "nz-widgetPanels-vertical", last && 0 === index && "nz-panel-section-full-size", maximizedSection);
+    const hasSplitter = !last && 0 === index && !isMaximizedPanel;
+    const panelStyle = hasSplitter
+        ? getSplitterStyle(isHorizontal, splitterPercent)
+        : undefined;
+    return (React.createElement("div", { className: className, style: panelStyle },
+        React.createElement(PanelWidget, { widgetId: widgetId }),
+        hasSplitter && React.createElement(PanelSplitter, null)));
+}
+function getSplitterStyle(isHorizontal, splitterPercent) {
+    if (isHorizontal) {
         return {
-            height: `${splitterPercent}%`,
+            width: `${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)));
-    })));
+    }
+    return {
+        height: `${splitterPercent}%`,
+    };
 }
 //# sourceMappingURL=PanelSections.js.map

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

@@ -1 +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"]}
+{"version":3,"file":"PanelSections.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget-panels/PanelSections.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module WidgetPanels\n */\n\nimport \"./PanelSections.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { assert } from \"@itwin/core-bentley\";\nimport { NineZoneDispatchContext } from \"../base/NineZone\";\nimport { PanelWidget } from \"../widget/PanelWidget\";\nimport { useLayout } from \"../base/LayoutStore\";\nimport { isHorizontalPanelSide, PanelSideContext } from \"./Panel\";\nimport type { WidgetState } from \"../state/WidgetState\";\nimport {\n  useMaximizedPanel,\n  useMaximizedSection,\n} from \"../../preview/enable-maximized-widget/useMaximizedWidget\";\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 widgets = useLayout((state) => {\n    return state.panels[side].widgets;\n  });\n\n  return (\n    <>\n      {widgets.map((widgetId, index, array) => {\n        return (\n          <PanelSection\n            key={widgetId}\n            widgetId={widgetId}\n            index={index}\n            sectionLength={array.length}\n          />\n        );\n      })}\n    </>\n  );\n}\n\ninterface PanelSectionProps {\n  widgetId: WidgetState[\"id\"];\n  index: number;\n  sectionLength: number;\n}\n\nfunction PanelSection({ widgetId, index, sectionLength }: PanelSectionProps) {\n  const side = React.useContext(PanelSideContext);\n  assert(!!side);\n\n  const splitterPercent = useLayout((state) => {\n    return state.panels[side].splitterPercent ?? 50;\n  });\n\n  const maximizedSection = useMaximizedSection(widgetId);\n  const isMaximizedPanel = !!useMaximizedPanel(side);\n\n  const isHorizontal = isHorizontalPanelSide(side);\n\n  const last = index === sectionLength - 1;\n  const className = classnames(\n    \"nz-widgetPanels-panelSections_section\",\n    `nz-panel-section-${index}`,\n    isHorizontal ? \"nz-widgetPanels-horizontal\" : \"nz-widgetPanels-vertical\",\n    last && 0 === index && \"nz-panel-section-full-size\",\n    maximizedSection\n  );\n\n  const hasSplitter = !last && 0 === index && !isMaximizedPanel;\n  const panelStyle = hasSplitter\n    ? getSplitterStyle(isHorizontal, splitterPercent)\n    : undefined;\n  return (\n    <div className={className} style={panelStyle}>\n      <PanelWidget widgetId={widgetId} />\n      {hasSplitter && <PanelSplitter />}\n    </div>\n  );\n}\n\nfunction getSplitterStyle(isHorizontal: boolean, splitterPercent: number) {\n  if (isHorizontal) {\n    return {\n      width: `${splitterPercent}%`,\n    } as const;\n  }\n  return {\n    height: `${splitterPercent}%`,\n  } as const;\n}\n"]}

package/lib/{cjs/appui-react/layout/widget-panels/Panels.scss → esm/appui-react/layout/widget-panels/PanelSections.scss}

@@ -2,17 +2,7 @@
  * 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;
-
+@layer appui.component {
   .nz-widgetPanels-vertical {
     position: relative;
     display: flex;