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

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

@@ -0,0 +1,80 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module WidgetPanels
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePanelsAutoCollapse = exports.AppContent = void 0;
+const React = require("react");
+const NineZone_1 = require("../base/NineZone");
+const Content_1 = require("./Content");
+const Panels_1 = require("./Panels");
+const Panel_1 = require("./Panel");
+const core_react_1 = require("@itwin/core-react");
+const LayoutStore_1 = require("../base/LayoutStore");
+const PreviewFeatures_1 = require("../../preview/PreviewFeatures");
+/** Main app content (i.e. viewport) that will change bounds based on panel pinned settings.
+ * @internal
+ */
+function AppContent() {
+    const { contentAlwaysMaxSize } = (0, PreviewFeatures_1.usePreviewFeatures)();
+    const { pinnedLeft, pinnedRight, pinnedTop, pinnedBottom } = (0, LayoutStore_1.useLayout)((state) => {
+        const panels = state.panels;
+        return {
+            pinnedLeft: panels.left.pinned,
+            pinnedRight: panels.right.pinned,
+            pinnedTop: panels.top.pinned,
+            pinnedBottom: panels.bottom.pinned,
+        };
+    }, true);
+    const content = React.useContext(Panels_1.ContentNodeContext);
+    const ref = usePanelsAutoCollapse();
+    return (React.createElement(Content_1.WidgetPanelsContent, { className: "nz-widgetPanels-appContent", ref: ref, pinnedLeft: pinnedLeft && !contentAlwaysMaxSize, pinnedRight: pinnedRight && !contentAlwaysMaxSize, pinnedTop: pinnedTop && !contentAlwaysMaxSize, pinnedBottom: pinnedBottom && !contentAlwaysMaxSize }, content));
+}
+exports.AppContent = AppContent;
+/** @internal */
+function usePanelsAutoCollapse() {
+    const layoutStore = (0, LayoutStore_1.useLayoutStore)();
+    const panelsRef = React.useRef(layoutStore.getState().panels);
+    const dispatch = React.useContext(NineZone_1.NineZoneDispatchContext);
+    const autoCollapseUnpinnedPanels = React.useContext(NineZone_1.AutoCollapseUnpinnedPanelsContext);
+    // istanbul ignore next
+    React.useEffect(() => layoutStore.subscribe((state) => {
+        panelsRef.current = state.panels;
+    }), [layoutStore]);
+    const collapsePanels = React.useCallback(() => {
+        for (const side of Panel_1.panelSides) {
+            const panel = panelsRef.current[side];
+            if (panel.collapsed || panel.pinned)
+                continue;
+            dispatch({
+                type: "PANEL_SET_COLLAPSED",
+                collapsed: true,
+                side: panel.side,
+            });
+        }
+    }, [dispatch]);
+    const mouseDownRef = (0, core_react_1.useRefEffect)((instance) => {
+        if (!instance)
+            return;
+        instance.addEventListener("mousedown", collapsePanels, true);
+        return () => {
+            instance.removeEventListener("mousedown", collapsePanels, true);
+        };
+    }, [collapsePanels]);
+    const mouseEnterRef = (0, core_react_1.useRefEffect)((instance) => {
+        if (!instance || !autoCollapseUnpinnedPanels)
+            return;
+        instance.addEventListener("mouseenter", collapsePanels, true);
+        return () => {
+            instance.removeEventListener("mouseenter", collapsePanels, true);
+        };
+    }, [collapsePanels, autoCollapseUnpinnedPanels]);
+    const ref = (0, core_react_1.useRefs)(mouseDownRef, mouseEnterRef);
+    return ref;
+}
+exports.usePanelsAutoCollapse = usePanelsAutoCollapse;
+//# sourceMappingURL=AppContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppContent.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget-panels/AppContent.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 * as React from \"react\";\nimport {\n  AutoCollapseUnpinnedPanelsContext,\n  NineZoneDispatchContext,\n} from \"../base/NineZone\";\nimport { WidgetPanelsContent } from \"./Content\";\nimport { ContentNodeContext } from \"./Panels\";\nimport { panelSides } from \"./Panel\";\nimport { useRefEffect, useRefs } from \"@itwin/core-react\";\nimport { useLayout, useLayoutStore } from \"../base/LayoutStore\";\nimport { usePreviewFeatures } from \"../../preview/PreviewFeatures\";\n\n/** Main app content (i.e. viewport) that will change bounds based on panel pinned settings.\n * @internal\n */\nexport function AppContent() {\n  const { contentAlwaysMaxSize } = usePreviewFeatures();\n  const { pinnedLeft, pinnedRight, pinnedTop, pinnedBottom } = useLayout(\n    (state) => {\n      const panels = state.panels;\n      return {\n        pinnedLeft: panels.left.pinned,\n        pinnedRight: panels.right.pinned,\n        pinnedTop: panels.top.pinned,\n        pinnedBottom: panels.bottom.pinned,\n      };\n    },\n    true\n  );\n  const content = React.useContext(ContentNodeContext);\n  const ref = usePanelsAutoCollapse<HTMLDivElement>();\n  return (\n    <WidgetPanelsContent\n      className=\"nz-widgetPanels-appContent\"\n      ref={ref}\n      pinnedLeft={pinnedLeft && !contentAlwaysMaxSize}\n      pinnedRight={pinnedRight && !contentAlwaysMaxSize}\n      pinnedTop={pinnedTop && !contentAlwaysMaxSize}\n      pinnedBottom={pinnedBottom && !contentAlwaysMaxSize}\n    >\n      {content}\n    </WidgetPanelsContent>\n  );\n}\n\n/** @internal */\nexport function usePanelsAutoCollapse<T extends Element>(): React.Ref<T> {\n  const layoutStore = useLayoutStore();\n  const panelsRef = React.useRef(layoutStore.getState().panels);\n  const dispatch = React.useContext(NineZoneDispatchContext);\n  const autoCollapseUnpinnedPanels = React.useContext(\n    AutoCollapseUnpinnedPanelsContext\n  );\n\n  // istanbul ignore next\n  React.useEffect(\n    () =>\n      layoutStore.subscribe((state) => {\n        panelsRef.current = state.panels;\n      }),\n    [layoutStore]\n  );\n\n  const collapsePanels = React.useCallback(() => {\n    for (const side of panelSides) {\n      const panel = panelsRef.current[side];\n      if (panel.collapsed || panel.pinned) continue;\n      dispatch({\n        type: \"PANEL_SET_COLLAPSED\",\n        collapsed: true,\n        side: panel.side,\n      });\n    }\n  }, [dispatch]);\n  const mouseDownRef = useRefEffect<T>(\n    (instance) => {\n      if (!instance) return;\n      instance.addEventListener(\"mousedown\", collapsePanels, true);\n      return () => {\n        instance.removeEventListener(\"mousedown\", collapsePanels, true);\n      };\n    },\n    [collapsePanels]\n  );\n  const mouseEnterRef = useRefEffect<T>(\n    (instance) => {\n      if (!instance || !autoCollapseUnpinnedPanels) return;\n      instance.addEventListener(\"mouseenter\", collapsePanels, true);\n      return () => {\n        instance.removeEventListener(\"mouseenter\", collapsePanels, true);\n      };\n    },\n    [collapsePanels, autoCollapseUnpinnedPanels]\n  );\n  const ref = useRefs(mouseDownRef, mouseEnterRef);\n  return ref;\n}\n"]}

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

@@ -0,0 +1,10 @@
+/** @packageDocumentation
+ * @module WidgetPanels
+ */
+import "./CenterContent.scss";
+import * as React from "react";
+/** Component that displays center content (i.e. toolbars). Content is allways bound by widget panels (panel pinned setting is ignored).
+ * @internal
+ */
+export declare function CenterContent(): React.JSX.Element;
+//# sourceMappingURL=CenterContent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CenterContent.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget-panels/CenterContent.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAC9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;GAEG;AACH,wBAAgB,aAAa,sBAa5B"}

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

@@ -0,0 +1,23 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module WidgetPanels
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CenterContent = void 0;
+require("./CenterContent.scss");
+const React = require("react");
+const Content_1 = require("./Content");
+const Panels_1 = require("./Panels");
+/** Component that displays center content (i.e. toolbars). Content is allways bound by widget panels (panel pinned setting is ignored).
+ * @internal
+ */
+function CenterContent() {
+    const content = React.useContext(Panels_1.CenterContentNodeContext);
+    return (React.createElement(Content_1.WidgetPanelsContent, { className: "nz-widgetPanels-centerContent", pinnedLeft: true, pinnedRight: true, pinnedTop: true, pinnedBottom: true }, content));
+}
+exports.CenterContent = CenterContent;
+//# sourceMappingURL=CenterContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CenterContent.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget-panels/CenterContent.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,gCAA8B;AAC9B,+BAA+B;AAC/B,uCAAgD;AAChD,qCAAoD;AAEpD;;GAEG;AACH,SAAgB,aAAa;IAC3B,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,iCAAwB,CAAC,CAAC;IAC3D,OAAO,CACL,oBAAC,6BAAmB,IAClB,SAAS,EAAC,+BAA+B,EACzC,UAAU,QACV,WAAW,QACX,SAAS,QACT,YAAY,UAEX,OAAO,CACY,CACvB,CAAC;AACJ,CAAC;AAbD,sCAaC","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 \"./CenterContent.scss\";\nimport * as React from \"react\";\nimport { WidgetPanelsContent } from \"./Content\";\nimport { CenterContentNodeContext } from \"./Panels\";\n\n/** Component that displays center content (i.e. toolbars). Content is allways bound by widget panels (panel pinned setting is ignored).\n * @internal\n */\nexport function CenterContent() {\n  const content = React.useContext(CenterContentNodeContext);\n  return (\n    <WidgetPanelsContent\n      className=\"nz-widgetPanels-centerContent\"\n      pinnedLeft\n      pinnedRight\n      pinnedTop\n      pinnedBottom\n    >\n      {content}\n    </WidgetPanelsContent>\n  );\n}\n"]}

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

@@ -0,0 +1,7 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.nz-widgetPanels-centerContent {
+  pointer-events: none;
+}

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

@@ -0,0 +1,21 @@
+/** @packageDocumentation
+ * @module WidgetPanels
+ */
+import "./Content.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** Properties of [[WidgetPanelsContentProps]] component.
+ * @internal
+ */
+export interface WidgetPanelsContentProps extends CommonProps {
+    children?: React.ReactNode;
+    pinnedLeft?: boolean;
+    pinnedRight?: boolean;
+    pinnedTop?: boolean;
+    pinnedBottom?: boolean;
+}
+/** Component that displays widget panels content.
+ * @internal
+ */
+export declare const WidgetPanelsContent: React.ForwardRefExoticComponent<WidgetPanelsContentProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Content.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Content.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget-panels/Content.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AAExB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,wBAAyB,SAAQ,WAAW;IAC3D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,mBAAmB,iGAiB9B,CAAC"}

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

@@ -0,0 +1,21 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module WidgetPanels
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WidgetPanelsContent = void 0;
+require("./Content.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+/** Component that displays widget panels content.
+ * @internal
+ */
+exports.WidgetPanelsContent = React.forwardRef(function WidgetPanelsContent(props, ref) {
+    const className = (0, classnames_1.default)("nz-widgetPanels-content", props.pinnedLeft && "nz-pinned-left", props.pinnedRight && "nz-pinned-right", props.pinnedTop && "nz-pinned-top", props.pinnedBottom && "nz-pinned-bottom", props.className);
+    return (React.createElement("div", { className: className, ref: ref, style: props.style }, props.children));
+});
+//# sourceMappingURL=Content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Content.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget-panels/Content.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,0BAAwB;AACxB,2CAAoC;AACpC,+BAA+B;AAc/B;;GAEG;AACU,QAAA,mBAAmB,GAAG,KAAK,CAAC,UAAU,CAGjD,SAAS,mBAAmB,CAAC,KAAK,EAAE,GAAG;IACvC,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,yBAAyB,EACzB,KAAK,CAAC,UAAU,IAAI,gBAAgB,EACpC,KAAK,CAAC,WAAW,IAAI,iBAAiB,EACtC,KAAK,CAAC,SAAS,IAAI,eAAe,EAClC,KAAK,CAAC,YAAY,IAAI,kBAAkB,EACxC,KAAK,CAAC,SAAS,CAChB,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IACpD,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC,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 \"./Content.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\n/** Properties of [[WidgetPanelsContentProps]] component.\n * @internal\n */\nexport interface WidgetPanelsContentProps extends CommonProps {\n  children?: React.ReactNode;\n  pinnedLeft?: boolean;\n  pinnedRight?: boolean;\n  pinnedTop?: boolean;\n  pinnedBottom?: boolean;\n}\n\n/** Component that displays widget panels content.\n * @internal\n */\nexport const WidgetPanelsContent = React.forwardRef<\n  HTMLDivElement,\n  WidgetPanelsContentProps\n>(function WidgetPanelsContent(props, ref) {\n  const className = classnames(\n    \"nz-widgetPanels-content\",\n    props.pinnedLeft && \"nz-pinned-left\",\n    props.pinnedRight && \"nz-pinned-right\",\n    props.pinnedTop && \"nz-pinned-top\",\n    props.pinnedBottom && \"nz-pinned-bottom\",\n    props.className\n  );\n  return (\n    <div className={className} ref={ref} style={props.style}>\n      {props.children}\n    </div>\n  );\n});\n"]}

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

@@ -0,0 +1,37 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.nz-widgetPanels-content {
+  &:not(.nz-pinned-left) {
+    grid-column-start: 1;
+  }
+
+  &.nz-pinned-left {
+    grid-column-start: 2;
+  }
+
+  &:not(.nz-pinned-right) {
+    grid-column-end: 4;
+  }
+
+  &.nz-pinned-right {
+    grid-column-end: 3;
+  }
+
+  &:not(.nz-pinned-top) {
+    grid-row-start: 1;
+  }
+
+  &.nz-pinned-top {
+    grid-row-start: 2;
+  }
+
+  &:not(.nz-pinned-bottom) {
+    grid-row-end: 4;
+  }
+
+  &.nz-pinned-bottom {
+    grid-row-end: 3;
+  }
+}

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

@@ -0,0 +1,14 @@
+/** @packageDocumentation
+ * @module WidgetPanels
+ */
+import "./CursorOverlay.scss";
+/** @internal */
+export type CursorType = "nwse-resize" | "nesw-resize" | "ew-resize" | "ns-resize" | "grabbing";
+/** Controls cursor type of the application.
+ * I.e. when dragging a widget "grabbing" cursor should be displayed until user drops the widget.
+ * @internal
+ */
+export declare function useCursor(): void;
+/** @internal */
+export declare function getCursorClassName(type: CursorType): string;
+//# sourceMappingURL=CursorOverlay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CursorOverlay.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget-panels/CursorOverlay.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAI9B,gBAAgB;AAChB,MAAM,MAAM,UAAU,GAClB,aAAa,GACb,aAAa,GACb,WAAW,GACX,WAAW,GACX,UAAU,CAAC;AAEf;;;GAGG;AACH,wBAAgB,SAAS,SASxB;AAED,gBAAgB;AAChB,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,UAAU,UAElD"}

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

@@ -0,0 +1,34 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module WidgetPanels
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCursorClassName = exports.useCursor = void 0;
+require("./CursorOverlay.scss");
+const React = require("react");
+const NineZone_1 = require("../base/NineZone");
+/** Controls cursor type of the application.
+ * I.e. when dragging a widget "grabbing" cursor should be displayed until user drops the widget.
+ * @internal
+ */
+function useCursor() {
+    const type = React.useContext(NineZone_1.CursorTypeContext);
+    React.useEffect(() => {
+        const cursor = type ? `nz-${type}` : undefined;
+        cursor && document.body.classList.add(cursor);
+        return () => {
+            cursor && document.body.classList.remove(cursor);
+        };
+    }, [type]);
+}
+exports.useCursor = useCursor;
+/** @internal */
+function getCursorClassName(type) {
+    return `nz-widgetPanels-cursorOverlay_cursor nz-${type}`;
+}
+exports.getCursorClassName = getCursorClassName;
+//# sourceMappingURL=CursorOverlay.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CursorOverlay.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget-panels/CursorOverlay.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,gCAA8B;AAC9B,+BAA+B;AAC/B,+CAAqD;AAUrD;;;GAGG;AACH,SAAgB,SAAS;IACvB,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,4BAAiB,CAAC,CAAC;IACjD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;QAC/C,MAAM,IAAI,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAC9C,OAAO,GAAG,EAAE;YACV,MAAM,IAAI,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QACnD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;AACb,CAAC;AATD,8BASC;AAED,gBAAgB;AAChB,SAAgB,kBAAkB,CAAC,IAAgB;IACjD,OAAO,2CAA2C,IAAI,EAAE,CAAC;AAC3D,CAAC;AAFD,gDAEC","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 \"./CursorOverlay.scss\";\nimport * as React from \"react\";\nimport { CursorTypeContext } from \"../base/NineZone\";\n\n/** @internal */\nexport type CursorType =\n  | \"nwse-resize\"\n  | \"nesw-resize\"\n  | \"ew-resize\"\n  | \"ns-resize\"\n  | \"grabbing\";\n\n/** Controls cursor type of the application.\n * I.e. when dragging a widget \"grabbing\" cursor should be displayed until user drops the widget.\n * @internal\n */\nexport function useCursor() {\n  const type = React.useContext(CursorTypeContext);\n  React.useEffect(() => {\n    const cursor = type ? `nz-${type}` : undefined;\n    cursor && document.body.classList.add(cursor);\n    return () => {\n      cursor && document.body.classList.remove(cursor);\n    };\n  }, [type]);\n}\n\n/** @internal */\nexport function getCursorClassName(type: CursorType) {\n  return `nz-widgetPanels-cursorOverlay_cursor nz-${type}`;\n}\n"]}

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

@@ -0,0 +1,26 @@
+/*---------------------------------------------------------------------------------------------
+ * 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/z-index";
+
+$nz-cursors: (nwse-resize, nesw-resize, ew-resize, ns-resize, grabbing);
+
+body {
+  @each $cursor in $nz-cursors {
+    &.nz-#{$cursor} {
+      * {
+        cursor: $cursor !important;
+        user-select: none;
+      }
+    }
+  }
+}
+
+.nz-widgetPanels-cursorOverlay_cursor {
+  @each $cursor in $nz-cursors {
+    &.nz-#{$cursor} {
+      cursor: $cursor;
+    }
+  }
+}

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

@@ -0,0 +1,17 @@
+/** @packageDocumentation
+ * @module WidgetPanels
+ */
+import "./Expander.scss";
+import * as React from "react";
+import type { PanelSide } from "./PanelTypes";
+/** @internal */
+export interface WidgetPanelExpanderProps {
+    side: PanelSide;
+}
+/** Component that is used to auto-expand unpinned widget panel.
+ * @internal
+ */
+export declare function WidgetPanelExpander({ side }: WidgetPanelExpanderProps): React.JSX.Element;
+/** @internal */
+export declare function WidgetPanelExpanders(): React.JSX.Element;
+//# sourceMappingURL=Expander.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Expander.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget-panels/Expander.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,iBAAiB,CAAC;AAEzB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAM9C,gBAAgB;AAChB,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,SAAS,CAAC;CACjB;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE,EAAE,wBAAwB,qBAiCrE;AAED,gBAAgB;AAChB,wBAAgB,oBAAoB,sBAgBnC"}

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

@@ -0,0 +1,63 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module WidgetPanels
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WidgetPanelExpanders = exports.WidgetPanelExpander = void 0;
+require("./Expander.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const Panel_1 = require("./Panel");
+const NineZone_1 = require("../base/NineZone");
+const core_react_1 = require("@itwin/core-react");
+const LayoutStore_1 = require("../base/LayoutStore");
+/** Component that is used to auto-expand unpinned widget panel.
+ * @internal
+ */
+function WidgetPanelExpander({ side }) {
+    const timer = React.useRef(new core_react_1.Timer(200));
+    const lastPosition = React.useRef(new core_react_1.Point());
+    const dispatch = React.useContext(NineZone_1.NineZoneDispatchContext);
+    React.useEffect(() => {
+        timer.current.setOnExecute(() => {
+            dispatch({
+                side,
+                collapsed: false,
+                type: "PANEL_SET_COLLAPSED",
+            });
+        });
+    }, [side, dispatch]);
+    const className = (0, classnames_1.default)("nz-widgetPanels-expander", `nz-${side}`);
+    return (React.createElement("div", { className: className, onMouseOverCapture: (e) => {
+            lastPosition.current = new core_react_1.Point(e.clientX, e.clientY);
+            timer.current.start();
+        }, onMouseOutCapture: () => {
+            timer.current.stop();
+        }, onMouseMoveCapture: (e) => {
+            const newPosition = new core_react_1.Point(e.clientX, e.clientY);
+            if (lastPosition.current.getDistanceTo(newPosition) > 5) {
+                timer.current.start();
+                lastPosition.current = newPosition;
+            }
+        } }));
+}
+exports.WidgetPanelExpander = WidgetPanelExpander;
+/** @internal */
+function WidgetPanelExpanders() {
+    const expanders = (0, LayoutStore_1.useLayout)((state) => {
+        const panels = state.panels;
+        return Panel_1.panelSides.filter((side) => {
+            const panel = panels[side];
+            return !panel.pinned && panel.collapsed;
+        });
+    }, true);
+    return (React.createElement(React.Fragment, null, expanders.map((side) => {
+        return React.createElement(WidgetPanelExpander, { key: side, side: side });
+    })));
+}
+exports.WidgetPanelExpanders = WidgetPanelExpanders;
+//# sourceMappingURL=Expander.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Expander.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget-panels/Expander.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,2BAAyB;AACzB,2CAAoC;AACpC,+BAA+B;AAE/B,mCAAqC;AACrC,+CAA2D;AAC3D,kDAAiD;AACjD,qDAAgD;AAOhD;;GAEG;AACH,SAAgB,mBAAmB,CAAC,EAAE,IAAI,EAA4B;IACpE,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,kBAAK,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3C,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,kBAAK,EAAE,CAAC,CAAC;IAC/C,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,kCAAuB,CAAC,CAAC;IAC3D,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,GAAG,EAAE;YAC9B,QAAQ,CAAC;gBACP,IAAI;gBACJ,SAAS,EAAE,KAAK;gBAChB,IAAI,EAAE,qBAAqB;aAC5B,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC;IACrB,MAAM,SAAS,GAAG,IAAA,oBAAU,EAAC,0BAA0B,EAAE,MAAM,IAAI,EAAE,CAAC,CAAC;IACvE,OAAO,CACL,6BACE,SAAS,EAAE,SAAS,EACpB,kBAAkB,EAAE,CAAC,CAAC,EAAE,EAAE;YACxB,YAAY,CAAC,OAAO,GAAG,IAAI,kBAAK,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;YACvD,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QACxB,CAAC,EACD,iBAAiB,EAAE,GAAG,EAAE;YACtB,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QACvB,CAAC,EACD,kBAAkB,EAAE,CAAC,CAAC,EAAE,EAAE;YACxB,MAAM,WAAW,GAAG,IAAI,kBAAK,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;YACpD,IAAI,YAAY,CAAC,OAAO,CAAC,aAAa,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE;gBACvD,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;gBACtB,YAAY,CAAC,OAAO,GAAG,WAAW,CAAC;aACpC;QACH,CAAC,GACD,CACH,CAAC;AACJ,CAAC;AAjCD,kDAiCC;AAED,gBAAgB;AAChB,SAAgB,oBAAoB;IAClC,MAAM,SAAS,GAAG,IAAA,uBAAS,EAAC,CAAC,KAAK,EAAE,EAAE;QACpC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;QAC5B,OAAO,kBAAU,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE;YAChC,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;YAC3B,OAAO,CAAC,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,SAAS,CAAC;QAC1C,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,IAAI,CAAC,CAAC;IAET,OAAO,CACL,0CACG,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QACtB,OAAO,oBAAC,mBAAmB,IAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;IACxD,CAAC,CAAC,CACD,CACJ,CAAC;AACJ,CAAC;AAhBD,oDAgBC","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 \"./Expander.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { PanelSide } from \"./PanelTypes\";\nimport { panelSides } from \"./Panel\";\nimport { NineZoneDispatchContext } from \"../base/NineZone\";\nimport { Point, Timer } from \"@itwin/core-react\";\nimport { useLayout } from \"../base/LayoutStore\";\n\n/** @internal */\nexport interface WidgetPanelExpanderProps {\n  side: PanelSide;\n}\n\n/** Component that is used to auto-expand unpinned widget panel.\n * @internal\n */\nexport function WidgetPanelExpander({ side }: WidgetPanelExpanderProps) {\n  const timer = React.useRef(new Timer(200));\n  const lastPosition = React.useRef(new Point());\n  const dispatch = React.useContext(NineZoneDispatchContext);\n  React.useEffect(() => {\n    timer.current.setOnExecute(() => {\n      dispatch({\n        side,\n        collapsed: false,\n        type: \"PANEL_SET_COLLAPSED\",\n      });\n    });\n  }, [side, dispatch]);\n  const className = classnames(\"nz-widgetPanels-expander\", `nz-${side}`);\n  return (\n    <div\n      className={className}\n      onMouseOverCapture={(e) => {\n        lastPosition.current = new Point(e.clientX, e.clientY);\n        timer.current.start();\n      }}\n      onMouseOutCapture={() => {\n        timer.current.stop();\n      }}\n      onMouseMoveCapture={(e) => {\n        const newPosition = new Point(e.clientX, e.clientY);\n        if (lastPosition.current.getDistanceTo(newPosition) > 5) {\n          timer.current.start();\n          lastPosition.current = newPosition;\n        }\n      }}\n    />\n  );\n}\n\n/** @internal */\nexport function WidgetPanelExpanders() {\n  const expanders = useLayout((state) => {\n    const panels = state.panels;\n    return panelSides.filter((side) => {\n      const panel = panels[side];\n      return !panel.pinned && panel.collapsed;\n    });\n  }, true);\n\n  return (\n    <>\n      {expanders.map((side) => {\n        return <WidgetPanelExpander key={side} side={side} />;\n      })}\n    </>\n  );\n}\n"]}

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

@@ -0,0 +1,37 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.nz-widgetPanels-expander {
+  $size: 1em;
+
+  position: absolute;
+
+  &.nz-left {
+    width: $size;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+
+  &.nz-right {
+    width: $size;
+    height: 100%;
+    top: 0;
+    right: 0;
+  }
+
+  &.nz-top {
+    width: 100%;
+    height: $size;
+    top: 0;
+    left: 0;
+  }
+
+  &.nz-bottom {
+    width: 100%;
+    height: $size;
+    bottom: 0;
+    left: 0;
+  }
+}

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

@@ -0,0 +1,15 @@
+/** @packageDocumentation
+ * @module WidgetPanels
+ */
+import "./Grip.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** Resize grip of [[WidgetPanel]] component.
+ * @internal
+ */
+export declare function WidgetPanelGrip(props: CommonProps): React.JSX.Element;
+/** @internal */
+export declare const useResizeGrip: <T extends HTMLElement>() => [(instance: T | null) => void, boolean, boolean];
+/** @internal */
+export declare function useDoubleClick(onDoubleClick?: () => void): () => void;
+//# sourceMappingURL=Grip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grip.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget-panels/Grip.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAcrD;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,WAAW,qBAyCjD;AAED,gBAAgB;AAChB,eAAO,MAAM,aAAa,wDACA,IAAI,mBA+J7B,CAAC;AAEF,gBAAgB;AAChB,wBAAgB,cAAc,CAAC,aAAa,CAAC,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAgBrE"}