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

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

@@ -10,129 +10,131 @@ $full-bar-width: calc(#{$nz-grip-width} * 0.5);
 $handle-width: calc(#{$nz-grip-width} + 1px);
 $line-grip-width: calc(#{$nz-grip-width} - 2px);
 
-.nz-widgetPanels-grip {
-  background-color: transparent;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  display: flex;
-  transition: 0.2s ease-out;
-
-  > .nz-handle {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
+@layer appui.component {
+  .nz-widgetPanels-grip {
+    background-color: transparent;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    display: flex;
+    transition: 0.2s ease-out;
 
-  &.nz-left {
-    transition-property: background-color, right;
-  }
-  &.nz-right {
-    transition-property: background-color, left;
-  }
-  &.nz-top {
-    transition-property: background-color, bottom;
-  }
+    > .nz-handle {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
 
-  &.nz-left,
-  &.nz-right {
-    flex-direction: column;
-    cursor: ew-resize;
-    width: $full-bar-width;
-    height: 100%;
+    &.nz-left {
+      transition-property: background-color, right;
+    }
+    &.nz-right {
+      transition-property: background-color, left;
+    }
+    &.nz-top {
+      transition-property: background-color, bottom;
+    }
 
-    > .nz-handle {
+    &.nz-left,
+    &.nz-right {
+      flex-direction: column;
+      cursor: ew-resize;
+      width: $full-bar-width;
       height: 100%;
-      width: $handle-width;
-    }
-  }
 
-  &.nz-top,
-  &.nz-bottom {
-    cursor: ns-resize;
-    width: 100%;
-    height: $full-bar-width;
+      > .nz-handle {
+        height: 100%;
+        width: $handle-width;
+      }
+    }
 
-    > .nz-handle {
-      height: $handle-width;
+    &.nz-top,
+    &.nz-bottom {
+      cursor: ns-resize;
       width: 100%;
+      height: $full-bar-width;
+
+      > .nz-handle {
+        height: $handle-width;
+        width: 100%;
+      }
     }
-  }
 
-  &:hover,
-  &.nz-resizing {
-    background-color: $buic-foreground-primary;
+    &:hover,
+    &.nz-resizing {
+      background-color: $buic-foreground-primary;
+    }
   }
-}
 
-.nz-line-grip {
-  display: none;
-  align-items: center;
-  justify-content: center;
-  transition: opacity 0.2s ease-out, height 0.2s ease-out, width 0.2s ease-out;
-
-  .nz-captured &,
-  .nz-widgetPanels-grip.nz-resizing &,
-  .nz-collapsed .nz-widgetPanels-grip:hover & {
-    opacity: 0;
-    height: 100%;
-    width: 100%;
-  }
+  .nz-line-grip {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    transition: opacity 0.2s ease-out, height 0.2s ease-out, width 0.2s ease-out;
 
-  .nz-collapsed & {
-    display: flex;
-    background-color: $buic-background-5;
-    border: 1px solid var(--iui-color-border-subtle);
-    border-radius: 999px;
-    box-sizing: border-box;
-    opacity: 1;
-  }
+    .nz-captured &,
+    .nz-widgetPanels-grip.nz-resizing &,
+    .nz-collapsed .nz-widgetPanels-grip:hover & {
+      opacity: 0;
+      height: 100%;
+      width: 100%;
+    }
 
-  .nz-left & {
-    transform: translateX($line-grip-translate);
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-  .nz-right & {
-    transform: translateX(calc(#{$line-grip-translate} * -1));
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-  .nz-top & {
-    transform: translateY($line-grip-translate);
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-  .nz-bottom & {
-    transform: translateY(calc(#{$line-grip-translate} * -1));
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
+    .nz-collapsed & {
+      display: flex;
+      background-color: $buic-background-5;
+      border: 1px solid var(--iui-color-border-subtle);
+      border-radius: 999px;
+      box-sizing: border-box;
+      opacity: 1;
+    }
+
+    .nz-left & {
+      transform: translateX($line-grip-translate);
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+    .nz-right & {
+      transform: translateX(calc(#{$line-grip-translate} * -1));
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    .nz-top & {
+      transform: translateY($line-grip-translate);
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+    .nz-bottom & {
+      transform: translateY(calc(#{$line-grip-translate} * -1));
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
 
-  .nz-left &,
-  .nz-right & {
-    height: 20%;
-    width: $line-grip-width;
+    .nz-left &,
+    .nz-right & {
+      height: 20%;
+      width: $line-grip-width;
 
-    .nz-line-grip-detail {
-      width: 1px;
-      height: 70%;
+      .nz-line-grip-detail {
+        width: 1px;
+        height: 70%;
+      }
     }
-  }
 
-  .nz-top &,
-  .nz-bottom & {
-    height: $line-grip-width;
-    width: 20%;
+    .nz-top &,
+    .nz-bottom & {
+      height: $line-grip-width;
+      width: 20%;
 
-    .nz-line-grip-detail {
-      width: 70%;
-      height: 1px;
+      .nz-line-grip-detail {
+        width: 70%;
+        height: 1px;
+      }
     }
-  }
 
-  .nz-line-grip-detail {
-    background-color: var(--iui-color-border-subtle);
+    .nz-line-grip-detail {
+      background-color: var(--iui-color-border-subtle);
+    }
   }
 }

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

@@ -1,9 +1,9 @@
 /** @packageDocumentation
  * @module WidgetPanels
  */
+import "./Panel.scss";
 import type { RectangleProps } from "@itwin/core-react";
 import * as React from "react";
-import "./Panel.scss";
 import type { BottomPanelSide, HorizontalPanelSide, LeftPanelSide, PanelSide, RightPanelSide, TopPanelSide } from "./PanelTypes";
 /** Properties of [[WidgetPanelProvider]] component.
  * @internal

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

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

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

@@ -8,6 +8,7 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.panelSides = exports.isHorizontalPanelSide = exports.WidgetPanelContext = exports.PanelSideContext = exports.WidgetPanel = exports.WidgetPanelProvider = void 0;
+require("./Panel.scss");
 const core_bentley_1 = require("@itwin/core-bentley");
 const core_react_1 = require("@itwin/core-react");
 const classnames_1 = require("classnames");
@@ -19,20 +20,20 @@ const SectionOutline_1 = require("../outline/SectionOutline");
 const PanelState_1 = require("../state/PanelState");
 const PanelTargets_1 = require("../target/PanelTargets");
 const SectionTargets_1 = require("../target/SectionTargets");
-const PreviewHorizontalPanelAlign_1 = require("../widget/PreviewHorizontalPanelAlign");
 const Grip_1 = require("./Grip");
-require("./Panel.scss");
 const PanelSections_1 = require("./PanelSections");
 const useAnimatePanel_1 = require("./useAnimatePanel");
+const useMaximizedWidget_1 = require("../../preview/enable-maximized-widget/useMaximizedWidget");
 /** Widget panel component is a side panel with multiple widgets.
  * @internal
  */
 function WidgetPanelProvider({ side }) {
     const hasWidgets = (0, LayoutStore_1.useLayout)((state) => state.panels[side].widgets.length > 0);
     return (React.createElement(exports.PanelSideContext.Provider, { value: side },
-        hasWidgets && React.createElement(WidgetPanel, null),
-        React.createElement(PanelTargets_1.PanelTargets, null),
-        React.createElement(PanelOutline_1.PanelOutline, null)));
+        React.createElement("div", { className: "nz-widgetPanels_panelContainer" },
+            hasWidgets && React.createElement(WidgetPanel, null),
+            React.createElement(PanelTargets_1.PanelTargets, null),
+            React.createElement(PanelOutline_1.PanelOutline, null))));
 }
 exports.WidgetPanelProvider = WidgetPanelProvider;
 /** @internal */
@@ -40,13 +41,7 @@ function WidgetPanel() {
     const side = React.useContext(exports.PanelSideContext);
     const draggedPanelSide = React.useContext(DragManager_1.DraggedPanelSideContext);
     (0, core_bentley_1.assert)(!!side);
-    const { enabled: previewHorizontalPanelAlignmentEnabled, alignments } = (0, PreviewHorizontalPanelAlign_1.usePreviewHorizontalPanelAlign)();
-    const previewHorizontalPanelAlignAttributes = React.useMemo(() => previewHorizontalPanelAlignmentEnabled
-        ? {
-            "data-preview-horizontal-panel-align-top": alignments.top,
-            "data-preview-horizontal-panel-align-bottom": alignments.bottom,
-        }
-        : {}, [alignments.bottom, alignments.top, previewHorizontalPanelAlignmentEnabled]);
+    const maximizedPanel = (0, useMaximizedWidget_1.useMaximizedPanel)(side);
     const spanTop = (0, LayoutStore_1.useLayout)((state) => state.panels.top.span);
     const spanBottom = (0, LayoutStore_1.useLayout)((state) => state.panels.bottom.span);
     const panel = (0, LayoutStore_1.useLayout)((state) => {
@@ -92,14 +87,13 @@ function WidgetPanel() {
         };
     }, [getBounds]);
     const captured = draggedPanelSide === side;
-    const className = (0, classnames_1.default)("nz-widgetPanels-panel", `nz-${side}`, panel.collapsed && "nz-collapsed", captured && "nz-captured", panel.span && "nz-span", spanTop && "nz-span-top", spanBottom && "nz-span-bottom", transition && `nz-${transition}`);
+    const className = (0, classnames_1.default)("nz-widgetPanels-panel", `nz-${side}`, panel.collapsed && "nz-collapsed", captured && "nz-captured", panel.span && "nz-span", spanTop && "nz-span-top", spanBottom && "nz-span-bottom", transition && `nz-${transition}`, maximizedPanel);
     const singleSection = panel.widgets.length === 1;
     const showSectionTargets = singleSection && !panel.collapsed;
     const ref = (0, core_react_1.useRefs)(elementRef, panelRef);
-    /* istanbul ignore next */
     return (React.createElement(exports.WidgetPanelContext.Provider, { value: widgetPanel },
-        React.createElement("div", { className: className, ref: ref, style: style, onTransitionEnd: handleTransitionEnd, ...previewHorizontalPanelAlignAttributes },
-            React.createElement("div", { className: "nz-content", style: contentStyle },
+        React.createElement("div", { className: className, ref: ref, style: maximizedPanel ? {} : style, onTransitionEnd: handleTransitionEnd },
+            React.createElement("div", { className: "nz-content", style: maximizedPanel ? {} : contentStyle },
                 singleSection && React.createElement(SectionOutline_1.SectionOutline, { sectionIndex: 0 }),
                 React.createElement(PanelSections_1.PanelSections, null),
                 singleSection && React.createElement(SectionOutline_1.SectionOutline, { sectionIndex: 1 })),

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

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget-panels/Panel.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,sDAA6C;AAE7C,kDAA4C;AAC5C,2CAAoC;AACpC,+BAA+B;AAC/B,qDAA8D;AAC9D,qDAAgD;AAChD,0DAAuD;AACvD,8DAA2D;AAC3D,oDAA6D;AAC7D,yDAAsD;AACtD,6DAA0D;AAC1D,uFAAuF;AACvF,iCAAyC;AACzC,wBAAsB;AACtB,mDAAgD;AAShD,uDAAoD;AASpD;;GAEG;AACH,SAAgB,mBAAmB,CAAC,EAAE,IAAI,EAA4B;IACpE,MAAM,UAAU,GAAG,IAAA,uBAAS,EAC1B,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CACjD,CAAC;IACF,OAAO,CACL,oBAAC,wBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI;QACnC,UAAU,IAAI,oBAAC,WAAW,OAAG;QAC9B,oBAAC,2BAAY,OAAG;QAChB,oBAAC,2BAAY,OAAG,CACU,CAC7B,CAAC;AACJ,CAAC;AAXD,kDAWC;AAED,gBAAgB;AAChB,SAAgB,WAAW;IACzB,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,wBAAgB,CAAC,CAAC;IAChD,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAAC,qCAAuB,CAAC,CAAC;IACnE,IAAA,qBAAM,EAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IACf,MAAM,EAAE,OAAO,EAAE,sCAAsC,EAAE,UAAU,EAAE,GACnE,IAAA,4DAA8B,GAAE,CAAC;IAEnC,MAAM,qCAAqC,GAAG,KAAK,CAAC,OAAO,CACzD,GAAG,EAAE,CACH,sCAAsC;QACpC,CAAC,CAAC;YACE,yCAAyC,EAAE,UAAU,CAAC,GAAG;YACzD,4CAA4C,EAAE,UAAU,CAAC,MAAM;SAChE;QACH,CAAC,CAAC,EAAE,EACR,CAAC,UAAU,CAAC,MAAM,EAAE,UAAU,CAAC,GAAG,EAAE,sCAAsC,CAAC,CAC5E,CAAC;IAEF,MAAM,OAAO,GAAG,IAAA,uBAAS,EAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAC5D,MAAM,UAAU,GAAG,IAAA,uBAAS,EAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAClE,MAAM,KAAK,GAAG,IAAA,uBAAS,EAAC,CAAC,KAAK,EAAE,EAAE;QAChC,MAAM,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAC7B,MAAM,IAAI,GAAG,IAAA,mCAAsB,EAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;QACxD,OAAO;YACL,SAAS,EAAE,CAAC,CAAC,SAAS;YACtB,OAAO,EAAE,CAAC,CAAC,OAAO;YAClB,SAAS,EAAE,CAAC,CAAC,SAAS;YACtB,IAAI;SACL,CAAC;IACJ,CAAC,EAAE,IAAI,CAAC,CAAC;IAET,MAAM,EACJ,mBAAmB,EACnB,IAAI,EACJ,WAAW,EACX,UAAU,EACV,GAAG,EAAE,QAAQ,GACd,GAAG,IAAA,iCAAe,GAAE,CAAC;IAEtB,MAAM,YAAY,GAAG,IAAA,6BAAqB,EAAC,IAAI,CAAC,CAAC;IACjD,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC/B,IAAI,YAAY;YACd,OAAO;gBACL,MAAM,EAAE,GAAG,IAAI,IAAI;aACpB,CAAC;QACJ,OAAO;YACL,KAAK,EAAE,GAAG,IAAI,IAAI;SACnB,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC;IACzB,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACtC,IAAI,WAAW,KAAK,SAAS;YAAE,OAAO,SAAS,CAAC;QAChD,IAAI,YAAY;YACd,OAAO;gBACL,SAAS,EAAE,GAAG,WAAW,IAAI;aAC9B,CAAC;QACJ,OAAO;YACL,QAAQ,EAAE,GAAG,WAAW,IAAI;SAC7B,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,CAAC;IAEhC,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACtD,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACvC,IAAA,qBAAM,EAAC,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAC7B,OAAO,UAAU,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;IACpD,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAAyB,GAAG,EAAE;QAC7D,OAAO;YACL,SAAS;SACV,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,QAAQ,GAAG,gBAAgB,KAAK,IAAI,CAAC;IAC3C,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,uBAAuB,EACvB,MAAM,IAAI,EAAE,EACZ,KAAK,CAAC,SAAS,IAAI,cAAc,EACjC,QAAQ,IAAI,aAAa,EACzB,KAAK,CAAC,IAAI,IAAI,SAAS,EACvB,OAAO,IAAI,aAAa,EACxB,UAAU,IAAI,gBAAgB,EAC9B,UAAU,IAAI,MAAM,UAAU,EAAE,CACjC,CAAC;IAEF,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,CAAC;IACjD,MAAM,kBAAkB,GAAG,aAAa,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC;IAC7D,MAAM,GAAG,GAAG,IAAA,oBAAO,EAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IAE1C,0BAA0B;IAC1B,OAAO,CACL,oBAAC,0BAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW;QAC7C,6BACE,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,eAAe,EAAE,mBAAmB,KAChC,qCAAqC;YAEzC,6BAAK,SAAS,EAAC,YAAY,EAAC,KAAK,EAAE,YAAY;gBAC5C,aAAa,IAAI,oBAAC,+BAAc,IAAC,YAAY,EAAE,CAAC,GAAI;gBACrD,oBAAC,6BAAa,OAAG;gBAChB,aAAa,IAAI,oBAAC,+BAAc,IAAC,YAAY,EAAE,CAAC,GAAI,CACjD;YACL,kBAAkB,IAAI,oBAAC,+BAAc,IAAC,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAI;YACpE,KAAK,CAAC,SAAS,IAAI,CAClB,6BAAK,SAAS,EAAC,mBAAmB;gBAChC,oBAAC,sBAAe,IAAC,SAAS,EAAC,SAAS,GAAG,CACnC,CACP,CACG,CACsB,CAC/B,CAAC;AACJ,CAAC;AA/GD,kCA+GC;AAED,gBAAgB;AACH,QAAA,gBAAgB,GAAG,KAAK,CAAC,aAAa,CACjD,SAAS,CACV,CAAC;AACF,wBAAgB,CAAC,WAAW,GAAG,qBAAqB,CAAC;AAOrD,gBAAgB;AACH,QAAA,kBAAkB,GAAG,KAAK,CAAC,aAAa,CAEnD,SAAS,CAAC,CAAC;AACb,0BAAkB,CAAC,WAAW,GAAG,uBAAuB,CAAC;AAEzD,gBAAgB;AACT,MAAM,qBAAqB,GAAG,CACnC,IAAe,EACc,EAAE;IAC/B,OAAO,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,QAAQ,CAAC;AAC7C,CAAC,CAAC;AAJW,QAAA,qBAAqB,yBAIhC;AAEF,gBAAgB;AACH,QAAA,UAAU,GAKnB,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,CAAC,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 { 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"]}
+{"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 \"./Panel.scss\";\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 { WidgetPanelGrip } from \"./Grip\";\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\";\nimport { useMaximizedPanel } from \"../../preview/enable-maximized-widget/useMaximizedWidget\";\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      <div className=\"nz-widgetPanels_panelContainer\">\n        {hasWidgets && <WidgetPanel />}\n        <PanelTargets />\n        <PanelOutline />\n      </div>\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 maximizedPanel = useMaximizedPanel(side);\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    maximizedPanel\n  );\n\n  const singleSection = panel.widgets.length === 1;\n  const showSectionTargets = singleSection && !panel.collapsed;\n  const ref = useRefs(elementRef, panelRef);\n\n  return (\n    <WidgetPanelContext.Provider value={widgetPanel}>\n      <div\n        className={className}\n        ref={ref}\n        style={maximizedPanel ? {} : style}\n        onTransitionEnd={handleTransitionEnd}\n      >\n        <div className=\"nz-content\" style={maximizedPanel ? {} : 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"]}