@itwin/appui-react 4.10.0-dev.1 → 4.11.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);
@@ -53,16 +55,18 @@ function PanelSplitter() {
         }
     }, [updatePanelSize]);
     const handlePointerUp = React.useCallback((event) => {
+        var _a, _b;
         updatePanelSize(event);
         event.preventDefault();
         event.stopPropagation();
-        containerRef.current?.ownerDocument.removeEventListener("pointermove", handlePointerMove);
-        containerRef.current?.ownerDocument.removeEventListener("pointerup", handlePointerUp);
+        (_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) {
-            containerRef.current?.ownerDocument.addEventListener("pointermove", handlePointerMove);
-            containerRef.current?.ownerDocument.addEventListener("pointerup", handlePointerUp);
+            (_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();
@@ -77,38 +81,41 @@ 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) => {
+        var _a;
+        return (_a = state.panels[side].splitterPercent) !== null && _a !== void 0 ? _a : 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