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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Content.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/Content.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,sDAA6C;AAC7C,kDAA0C;AAC1C,+BAA+B;AAC/B,6EAA0E;AAC1E,0BAAwB;AAYxB;;GAEG;AACH,SAAgB,uBAAuB,CAAC,KAAmC;IACzE,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,kBAAK,EAAE,CAAC,CAAC;IACjD,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,MAAM,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACpC,uBAAuB;QACvB,IAAI,CAAC,CAAC,GAAG,CAAC,OAAO;YACf,cAAc,CAAC,OAAO,GAAG,IAAI,kBAAK,CAChC,GAAG,CAAC,OAAO,CAAC,UAAU,EACtB,GAAG,CAAC,OAAO,CAAC,SAAS,CACtB,CAAC;IACN,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACvC,IAAA,qBAAM,EAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QACtB,GAAG,CAAC,OAAO,CAAC,UAAU,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;QAClD,GAAG,CAAC,OAAO,CAAC,SAAS,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACnD,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,IAAA,qCAAiB,EAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACrC,OAAO,CACL,6CACgB,KAAK,CAAC,MAAM,2BACH,KAAK,CAAC,UAAU,oBACxB,gBAAgB,EAC/B,SAAS,EAAC,mBAAmB,EAC7B,GAAG,EAAE,GAAG,IAEP,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AA5BD,0DA4BC","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 Widget\n */\n\nimport { assert } from \"@itwin/core-bentley\";\nimport { Point } from \"@itwin/core-react\";\nimport * as React from \"react\";\nimport { useTransientState } from \"../../widget-panels/useTransientState\";\nimport \"./Content.scss\";\n\n/** Properties of [[ScrollableWidgetContent]] component.\n * @internal\n */\nexport interface ScrollableWidgetContentProps {\n  /** Optional unique identifier for item. If defined it will be added to DOM Element attribute as data-item-id */\n  itemId?: string;\n  providerId?: string;\n  children?: React.ReactNode;\n}\n\n/** Component that enables widget content scrolling.\n * @internal\n */\nexport function ScrollableWidgetContent(props: ScrollableWidgetContentProps) {\n  const scrollPosition = React.useRef(new Point());\n  const ref = React.useRef<HTMLDivElement>(null);\n  const onSave = React.useCallback(() => {\n    // istanbul ignore else\n    if (!!ref.current)\n      scrollPosition.current = new Point(\n        ref.current.scrollLeft,\n        ref.current.scrollTop\n      );\n  }, []);\n  const onRestore = React.useCallback(() => {\n    assert(!!ref.current);\n    ref.current.scrollLeft = scrollPosition.current.x;\n    ref.current.scrollTop = scrollPosition.current.y;\n  }, []);\n  useTransientState(onSave, onRestore);\n  return (\n    <div\n      data-item-id={props.itemId}\n      data-item-provider-id={props.providerId}\n      data-item-type=\"widget-content\"\n      className=\"nz-widget-content\"\n      ref={ref}\n    >\n      {props.children}\n    </div>\n  );\n}\n"]}

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

@@ -0,0 +1,13 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@import "../scrollbar";
+
+.nz-widget-content {
+  overflow: auto;
+  height: 100%;
+  width: 100%;
+
+  @include nz-scrollbar;
+}

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

@@ -0,0 +1,12 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import "./ContentContainer.scss";
+import * as React from "react";
+/** @internal */
+export interface WidgetContentContainerProps {
+    children?: React.ReactNode;
+}
+/** @internal */
+export declare function WidgetContentContainer(props: WidgetContentContainerProps): React.JSX.Element;
+//# sourceMappingURL=ContentContainer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContentContainer.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/ContentContainer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,yBAAyB,CAAC;AAEjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,gBAAgB;AAChB,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,gBAAgB;AAChB,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,qBA0BxE"}

package/lib/cjs/appui-react/layout/widget/ContentContainer.js

@@ -0,0 +1,39 @@
+"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 Widget
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WidgetContentContainer = void 0;
+require("./ContentContainer.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const core_bentley_1 = require("@itwin/core-bentley");
+const ContentManager_1 = require("./ContentManager");
+const Panel_1 = require("../widget-panels/Panel");
+const Widget_1 = require("./Widget");
+const LayoutStore_1 = require("../base/LayoutStore");
+const WidgetStateHelpers_1 = require("../state/internal/WidgetStateHelpers");
+/** @internal */
+function WidgetContentContainer(props) {
+    const widgetId = React.useContext(Widget_1.WidgetIdContext);
+    const widgetContentManager = React.useContext(ContentManager_1.WidgetContentManagerContext);
+    const side = React.useContext(Panel_1.PanelSideContext);
+    (0, core_bentley_1.assert)(!!widgetId);
+    const { minimized, activeTabId } = (0, LayoutStore_1.useLayout)((state) => {
+        const widget = (0, WidgetStateHelpers_1.getWidgetState)(state, widgetId);
+        return { minimized: widget.minimized, activeTabId: widget.activeTabId };
+    }, true);
+    const ref = React.useCallback((instance) => {
+        widgetContentManager.setContainer(activeTabId, instance);
+    }, [widgetContentManager, activeTabId]);
+    const className = (0, classnames_1.default)("nz-widget-contentContainer", undefined === side && minimized && "nz-minimized");
+    return (React.createElement("div", { className: className },
+        React.createElement("div", { className: "nz-content", ref: ref }),
+        props.children));
+}
+exports.WidgetContentContainer = WidgetContentContainer;
+//# sourceMappingURL=ContentContainer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContentContainer.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/ContentContainer.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,mCAAiC;AACjC,2CAAoC;AACpC,+BAA+B;AAC/B,sDAA6C;AAC7C,qDAA+D;AAC/D,kDAA0D;AAC1D,qCAA2C;AAC3C,qDAAgD;AAChD,6EAAsE;AAOtE,gBAAgB;AAChB,SAAgB,sBAAsB,CAAC,KAAkC;IACvE,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,wBAAe,CAAC,CAAC;IACnD,MAAM,oBAAoB,GAAG,KAAK,CAAC,UAAU,CAAC,4CAA2B,CAAC,CAAC;IAC3E,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,wBAAgB,CAAC,CAAC;IAChD,IAAA,qBAAM,EAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IACnB,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,IAAA,uBAAS,EAAC,CAAC,KAAK,EAAE,EAAE;QACrD,MAAM,MAAM,GAAG,IAAA,mCAAc,EAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;QAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,WAAW,EAAE,MAAM,CAAC,WAAW,EAAE,CAAC;IAC1E,CAAC,EAAE,IAAI,CAAC,CAAC;IACT,MAAM,GAAG,GAAG,KAAK,CAAC,WAAW,CAC3B,CAAC,QAAwB,EAAE,EAAE;QAC3B,oBAAoB,CAAC,YAAY,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;IAC3D,CAAC,EACD,CAAC,oBAAoB,EAAE,WAAW,CAAC,CACpC,CAAC;IAEF,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,4BAA4B,EAC5B,SAAS,KAAK,IAAI,IAAI,SAAS,IAAI,cAAc,CAClD,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS;QACvB,6BAAK,SAAS,EAAC,YAAY,EAAC,GAAG,EAAE,GAAG,GAAI;QACvC,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AA1BD,wDA0BC","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 Widget\n */\n\nimport \"./ContentContainer.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { assert } from \"@itwin/core-bentley\";\nimport { WidgetContentManagerContext } from \"./ContentManager\";\nimport { PanelSideContext } from \"../widget-panels/Panel\";\nimport { WidgetIdContext } from \"./Widget\";\nimport { useLayout } from \"../base/LayoutStore\";\nimport { getWidgetState } from \"../state/internal/WidgetStateHelpers\";\n\n/** @internal */\nexport interface WidgetContentContainerProps {\n  children?: React.ReactNode;\n}\n\n/** @internal */\nexport function WidgetContentContainer(props: WidgetContentContainerProps) {\n  const widgetId = React.useContext(WidgetIdContext);\n  const widgetContentManager = React.useContext(WidgetContentManagerContext);\n  const side = React.useContext(PanelSideContext);\n  assert(!!widgetId);\n  const { minimized, activeTabId } = useLayout((state) => {\n    const widget = getWidgetState(state, widgetId);\n    return { minimized: widget.minimized, activeTabId: widget.activeTabId };\n  }, true);\n  const ref = React.useCallback(\n    (instance: HTMLDivElement) => {\n      widgetContentManager.setContainer(activeTabId, instance);\n    },\n    [widgetContentManager, activeTabId]\n  );\n\n  const className = classnames(\n    \"nz-widget-contentContainer\",\n    undefined === side && minimized && \"nz-minimized\"\n  );\n  return (\n    <div className={className}>\n      <div className=\"nz-content\" ref={ref} />\n      {props.children}\n    </div>\n  );\n}\n"]}

package/lib/cjs/appui-react/layout/widget/ContentContainer.scss

@@ -0,0 +1,24 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.nz-widget-contentContainer {
+  flex: 1 1 auto;
+  min-height: 0;
+  min-width: 0;
+  position: relative;
+  display: flex;
+
+  > .nz-content {
+    flex: 1;
+    display: flex;
+    min-width: 0;
+  }
+}
+
+.nz-widget-floatingWidget {
+  .nz-widget-contentContainer.nz-minimized {
+    flex-basis: 0;
+    overflow: hidden;
+  }
+}

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

@@ -0,0 +1,30 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import * as React from "react";
+import { BeEvent } from "@itwin/core-bentley";
+import type { TabState } from "../state/TabState";
+/** @internal */
+export interface WidgetContentManagerProps {
+    children?: React.ReactNode;
+}
+/** @internal */
+export declare function WidgetContentManager(props: WidgetContentManagerProps): React.JSX.Element;
+interface ContainersStore {
+    setContainer: (tabId: TabState["id"], container: Element | null) => void;
+    containers: {
+        readonly [id in TabState["id"]]: Element | null;
+    };
+}
+/** @internal */
+export declare const useContainersStore: import("zustand").UseBoundStore<import("zustand").StoreApi<ContainersStore>>;
+/** @internal */
+export interface WidgetContentManagerContextArgs {
+    setContainer(tabId: TabState["id"], container: Element | null): void;
+    onSaveTransientState: BeEvent<(tabId: TabState["id"]) => void>;
+    onRestoreTransientState: BeEvent<(tabId: TabState["id"]) => void>;
+}
+/** @internal */
+export declare const WidgetContentManagerContext: React.Context<WidgetContentManagerContextArgs>;
+export {};
+//# sourceMappingURL=ContentManager.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContentManager.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/ContentManager.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAGH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAElD,gBAAgB;AAChB,MAAM,WAAW,yBAAyB;IACxC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,gBAAgB;AAChB,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,qBAiCpE;AAED,UAAU,eAAe;IACvB,YAAY,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;IACzE,UAAU,EAAE;QAAE,QAAQ,EAAE,EAAE,IAAI,QAAQ,CAAC,IAAI,CAAC,GAAG,OAAO,GAAG,IAAI;KAAE,CAAC;CACjE;AAED,gBAAgB;AAChB,eAAO,MAAM,kBAAkB,8EAS5B,CAAC;AAEJ,gBAAgB;AAChB,MAAM,WAAW,+BAA+B;IAC9C,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;IACrE,oBAAoB,EAAE,OAAO,CAAC,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC;IAC/D,uBAAuB,EAAE,OAAO,CAAC,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC;CACnE;AAED,gBAAgB;AAChB,eAAO,MAAM,2BAA2B,gDACqB,CAAC"}

package/lib/cjs/appui-react/layout/widget/ContentManager.js

@@ -0,0 +1,44 @@
+"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 Widget
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WidgetContentManagerContext = exports.useContainersStore = exports.WidgetContentManager = void 0;
+const immer_1 = require("immer");
+const React = require("react");
+const zustand_1 = require("zustand");
+const core_bentley_1 = require("@itwin/core-bentley");
+/** @internal */
+function WidgetContentManager(props) {
+    const setContentContainer = (0, exports.useContainersStore)((state) => state.setContainer);
+    const saveTransientStateRef = React.useRef(new core_bentley_1.BeEvent());
+    const restoreTransientStateRef = React.useRef(new core_bentley_1.BeEvent());
+    const setContainer = React.useCallback((tabId, container) => {
+        container === null && saveTransientStateRef.current.raiseEvent(tabId);
+        setContentContainer(tabId, container);
+    }, [setContentContainer]);
+    const widgetContentManagerContextValue = React.useMemo(() => ({
+        setContainer,
+        onSaveTransientState: saveTransientStateRef.current,
+        onRestoreTransientState: restoreTransientStateRef.current,
+    }), [setContainer]);
+    return (React.createElement(exports.WidgetContentManagerContext.Provider, { value: widgetContentManagerContextValue }, props.children));
+}
+exports.WidgetContentManager = WidgetContentManager;
+/** @internal */
+exports.useContainersStore = (0, zustand_1.create)((set) => ({
+    containers: {},
+    setContainer: (tabId, container) => {
+        set((state) => (0, immer_1.default)(state, (draft) => {
+            draft.containers[tabId] = (0, immer_1.castDraft)(container);
+        }));
+    },
+}));
+/** @internal */
+exports.WidgetContentManagerContext = React.createContext(null);
+exports.WidgetContentManagerContext.displayName = "nz:WidgetContentManagerContext";
+//# sourceMappingURL=ContentManager.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContentManager.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/ContentManager.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,iCAA2C;AAC3C,+BAA+B;AAC/B,qCAAiC;AACjC,sDAA8C;AAQ9C,gBAAgB;AAChB,SAAgB,oBAAoB,CAAC,KAAgC;IACnE,MAAM,mBAAmB,GAAG,IAAA,0BAAkB,EAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAC9E,MAAM,qBAAqB,GAAG,KAAK,CAAC,MAAM,CACxC,IAAI,sBAAO,EAAmC,CAC/C,CAAC;IACF,MAAM,wBAAwB,GAAG,KAAK,CAAC,MAAM,CAC3C,IAAI,sBAAO,EAAmC,CAC/C,CAAC;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAGpC,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE;QACnB,SAAS,KAAK,IAAI,IAAI,qBAAqB,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QACtE,mBAAmB,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;IACxC,CAAC,EACD,CAAC,mBAAmB,CAAC,CACtB,CAAC;IACF,MAAM,gCAAgC,GACpC,KAAK,CAAC,OAAO,CACX,GAAG,EAAE,CAAC,CAAC;QACL,YAAY;QACZ,oBAAoB,EAAE,qBAAqB,CAAC,OAAO;QACnD,uBAAuB,EAAE,wBAAwB,CAAC,OAAO;KAC1D,CAAC,EACF,CAAC,YAAY,CAAC,CACf,CAAC;IACJ,OAAO,CACL,oBAAC,mCAA2B,CAAC,QAAQ,IACnC,KAAK,EAAE,gCAAgC,IAEtC,KAAK,CAAC,QAAQ,CACsB,CACxC,CAAC;AACJ,CAAC;AAjCD,oDAiCC;AAOD,gBAAgB;AACH,QAAA,kBAAkB,GAAG,IAAA,gBAAM,EAAkB,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;IAClE,UAAU,EAAE,EAAE;IACd,YAAY,EAAE,CAAC,KAAqB,EAAE,SAAyB,EAAE,EAAE;QACjE,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CACZ,IAAA,eAAO,EAAC,KAAK,EAAE,CAAC,KAAK,EAAE,EAAE;YACvB,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,IAAA,iBAAS,EAAC,SAAS,CAAC,CAAC;QACjD,CAAC,CAAC,CACH,CAAC;IACJ,CAAC;CACF,CAAC,CAAC,CAAC;AASJ,gBAAgB;AACH,QAAA,2BAA2B,GACtC,KAAK,CAAC,aAAa,CAAkC,IAAK,CAAC,CAAC;AAC9D,mCAA2B,CAAC,WAAW,GAAG,gCAAgC,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 Widget\n */\n\nimport produce, { castDraft } from \"immer\";\nimport * as React from \"react\";\nimport { create } from \"zustand\";\nimport { BeEvent } from \"@itwin/core-bentley\";\nimport type { TabState } from \"../state/TabState\";\n\n/** @internal */\nexport interface WidgetContentManagerProps {\n  children?: React.ReactNode;\n}\n\n/** @internal */\nexport function WidgetContentManager(props: WidgetContentManagerProps) {\n  const setContentContainer = useContainersStore((state) => state.setContainer);\n  const saveTransientStateRef = React.useRef(\n    new BeEvent<(tabId: TabState[\"id\"]) => void>()\n  );\n  const restoreTransientStateRef = React.useRef(\n    new BeEvent<(tabId: TabState[\"id\"]) => void>()\n  );\n  const setContainer = React.useCallback<\n    WidgetContentManagerContextArgs[\"setContainer\"]\n  >(\n    (tabId, container) => {\n      container === null && saveTransientStateRef.current.raiseEvent(tabId);\n      setContentContainer(tabId, container);\n    },\n    [setContentContainer]\n  );\n  const widgetContentManagerContextValue =\n    React.useMemo<WidgetContentManagerContextArgs>(\n      () => ({\n        setContainer,\n        onSaveTransientState: saveTransientStateRef.current,\n        onRestoreTransientState: restoreTransientStateRef.current,\n      }),\n      [setContainer]\n    );\n  return (\n    <WidgetContentManagerContext.Provider\n      value={widgetContentManagerContextValue}\n    >\n      {props.children}\n    </WidgetContentManagerContext.Provider>\n  );\n}\n\ninterface ContainersStore {\n  setContainer: (tabId: TabState[\"id\"], container: Element | null) => void;\n  containers: { readonly [id in TabState[\"id\"]]: Element | null };\n}\n\n/** @internal */\nexport const useContainersStore = create<ContainersStore>((set) => ({\n  containers: {},\n  setContainer: (tabId: TabState[\"id\"], container: Element | null) => {\n    set((state) =>\n      produce(state, (draft) => {\n        draft.containers[tabId] = castDraft(container);\n      })\n    );\n  },\n}));\n\n/** @internal */\nexport interface WidgetContentManagerContextArgs {\n  setContainer(tabId: TabState[\"id\"], container: Element | null): void;\n  onSaveTransientState: BeEvent<(tabId: TabState[\"id\"]) => void>;\n  onRestoreTransientState: BeEvent<(tabId: TabState[\"id\"]) => void>;\n}\n\n/** @internal */\nexport const WidgetContentManagerContext =\n  React.createContext<WidgetContentManagerContextArgs>(null!);\nWidgetContentManagerContext.displayName = \"nz:WidgetContentManagerContext\";\n"]}

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

@@ -0,0 +1,20 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import "./ContentRenderer.scss";
+import * as React from "react";
+import type { TabState } from "../state/TabState";
+/** @internal */
+export declare function WidgetContentRenderers(): React.JSX.Element;
+interface WidgetContentRendererProps {
+    children?: React.ReactNode;
+    tabId: TabState["id"];
+}
+/** @internal */
+export declare function WidgetContentRenderer(props: WidgetContentRendererProps): React.ReactPortal;
+/** @internal */
+export declare const TabIdContext: React.Context<string | undefined>;
+/** @internal */
+export declare function useTabTransientState(tabId: string, onSave?: () => void, onRestore?: () => void): void;
+export {};
+//# sourceMappingURL=ContentRenderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContentRenderer.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/ContentRenderer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,wBAAwB,CAAC;AAChC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAOlD,gBAAgB;AAChB,wBAAgB,sBAAsB,sBAoBrC;AAED,UAAU,0BAA0B;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;CACvB;AAED,gBAAgB;AAChB,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,qBAuCtE;AAED,gBAAgB;AAChB,eAAO,MAAM,YAAY,mCAExB,CAAC;AAGF,gBAAgB;AAChB,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,MAAM,EACb,MAAM,CAAC,EAAE,MAAM,IAAI,EACnB,SAAS,CAAC,EAAE,MAAM,IAAI,QAavB"}

package/lib/cjs/appui-react/layout/widget/ContentRenderer.js

@@ -0,0 +1,81 @@
+"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 Widget
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTabTransientState = exports.TabIdContext = exports.WidgetContentRenderer = exports.WidgetContentRenderers = void 0;
+require("./ContentRenderer.scss");
+const React = require("react");
+const ReactDOM = require("react-dom");
+const NineZone_1 = require("../base/NineZone");
+const ContentManager_1 = require("./ContentManager");
+const LayoutStore_1 = require("../base/LayoutStore");
+/** @internal */
+function WidgetContentRenderers() {
+    const widgetContent = React.useContext(NineZone_1.WidgetContentNodeContext);
+    const toolSettingsContent = React.useContext(NineZone_1.ToolSettingsNodeContext);
+    const tabIds = (0, LayoutStore_1.useLayout)((state) => {
+        return Object.keys(state.tabs);
+    }, true);
+    const toolSettingsTabId = (0, LayoutStore_1.useLayout)((state) => state.toolSettings?.tabId);
+    return (React.createElement(React.Fragment, null, tabIds.map((tabId) => {
+        const children = tabId === toolSettingsTabId ? toolSettingsContent : widgetContent;
+        return (React.createElement(WidgetContentRenderer, { key: tabId, tabId: tabId }, children));
+    })));
+}
+exports.WidgetContentRenderers = WidgetContentRenderers;
+/** @internal */
+function WidgetContentRenderer(props) {
+    const renderTo = (0, ContentManager_1.useContainersStore)((state) => state.containers[props.tabId]);
+    const unloaded = (0, LayoutStore_1.useLayout)((state) => !!state.tabs[props.tabId].unloaded);
+    const widgetContentManager = React.useContext(ContentManager_1.WidgetContentManagerContext);
+    const container = React.useRef(undefined);
+    if (!container.current) {
+        container.current = document.createElement("div");
+        container.current.classList.add("nz-widget-contentRenderer");
+    }
+    React.useLayoutEffect(() => {
+        const parent = renderTo;
+        if (parent) {
+            while (parent.firstChild) {
+                parent.removeChild(parent.firstChild);
+            }
+            parent.appendChild(container.current);
+            widgetContentManager.onRestoreTransientState.raiseEvent(props.tabId);
+        }
+        return () => {
+            for (const child of parent?.children || []) {
+                if (child === container.current) {
+                    parent.removeChild(child);
+                    return;
+                }
+            }
+        };
+    }, [renderTo, widgetContentManager, props.tabId]);
+    return ReactDOM.createPortal(React.createElement("div", { style: { height: "100%", width: "100%" }, id: `content-container:${props.tabId}` },
+        React.createElement(exports.TabIdContext.Provider, { value: props.tabId }, unloaded ? null : props.children)), container.current);
+}
+exports.WidgetContentRenderer = WidgetContentRenderer;
+/** @internal */
+exports.TabIdContext = React.createContext(undefined);
+exports.TabIdContext.displayName = "nz:TabIdContext";
+/** @internal */
+function useTabTransientState(tabId, onSave, onRestore) {
+    const widgetContentManager = React.useContext(ContentManager_1.WidgetContentManagerContext);
+    React.useEffect(() => {
+        return widgetContentManager.onSaveTransientState.addListener((id) => {
+            tabId === id && onSave && onSave();
+        });
+    }, [widgetContentManager, onSave, tabId]);
+    React.useEffect(() => {
+        return widgetContentManager.onRestoreTransientState.addListener((id) => {
+            tabId === id && onRestore && onRestore();
+        });
+    }, [widgetContentManager, onRestore, tabId]);
+}
+exports.useTabTransientState = useTabTransientState;
+//# sourceMappingURL=ContentRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContentRenderer.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/ContentRenderer.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 Widget\n */\n\nimport \"./ContentRenderer.scss\";\nimport * as React from \"react\";\nimport * as ReactDOM from \"react-dom\";\nimport {\n  ToolSettingsNodeContext,\n  WidgetContentNodeContext,\n} from \"../base/NineZone\";\nimport type { TabState } from \"../state/TabState\";\nimport {\n  useContainersStore,\n  WidgetContentManagerContext,\n} from \"./ContentManager\";\nimport { useLayout } from \"../base/LayoutStore\";\n\n/** @internal */\nexport function WidgetContentRenderers() {\n  const widgetContent = React.useContext(WidgetContentNodeContext);\n  const toolSettingsContent = React.useContext(ToolSettingsNodeContext);\n  const tabIds = useLayout((state) => {\n    return Object.keys(state.tabs);\n  }, true);\n  const toolSettingsTabId = useLayout((state) => state.toolSettings?.tabId);\n  return (\n    <>\n      {tabIds.map((tabId) => {\n        const children =\n          tabId === toolSettingsTabId ? toolSettingsContent : widgetContent;\n        return (\n          <WidgetContentRenderer key={tabId} tabId={tabId}>\n            {children}\n          </WidgetContentRenderer>\n        );\n      })}\n    </>\n  );\n}\n\ninterface WidgetContentRendererProps {\n  children?: React.ReactNode;\n  tabId: TabState[\"id\"];\n}\n\n/** @internal */\nexport function WidgetContentRenderer(props: WidgetContentRendererProps) {\n  const renderTo = useContainersStore((state) => state.containers[props.tabId]);\n  const unloaded = useLayout((state) => !!state.tabs[props.tabId].unloaded);\n  const widgetContentManager = React.useContext(WidgetContentManagerContext);\n  const container = React.useRef<HTMLDivElement>(undefined!);\n  if (!container.current) {\n    container.current = document.createElement(\"div\");\n    container.current.classList.add(\"nz-widget-contentRenderer\");\n  }\n  React.useLayoutEffect(() => {\n    const parent = renderTo;\n    if (parent) {\n      while (parent.firstChild) {\n        parent.removeChild(parent.firstChild);\n      }\n\n      parent.appendChild(container.current);\n      widgetContentManager.onRestoreTransientState.raiseEvent(props.tabId);\n    }\n    return () => {\n      for (const child of parent?.children || []) {\n        if (child === container.current) {\n          parent!.removeChild(child);\n          return;\n        }\n      }\n    };\n  }, [renderTo, widgetContentManager, props.tabId]);\n  return ReactDOM.createPortal(\n    <div\n      style={{ height: \"100%\", width: \"100%\" }}\n      id={`content-container:${props.tabId}`}\n    >\n      <TabIdContext.Provider value={props.tabId}>\n        {unloaded ? null : props.children}\n      </TabIdContext.Provider>\n    </div>,\n    container.current\n  );\n}\n\n/** @internal */\nexport const TabIdContext = React.createContext<TabState[\"id\"] | undefined>(\n  undefined\n);\nTabIdContext.displayName = \"nz:TabIdContext\";\n\n/** @internal */\nexport function useTabTransientState(\n  tabId: string,\n  onSave?: () => void,\n  onRestore?: () => void\n) {\n  const widgetContentManager = React.useContext(WidgetContentManagerContext);\n  React.useEffect(() => {\n    return widgetContentManager.onSaveTransientState.addListener((id) => {\n      tabId === id && onSave && onSave();\n    });\n  }, [widgetContentManager, onSave, tabId]);\n  React.useEffect(() => {\n    return widgetContentManager.onRestoreTransientState.addListener((id) => {\n      tabId === id && onRestore && onRestore();\n    });\n  }, [widgetContentManager, onRestore, tabId]);\n}\n"]}

package/lib/cjs/appui-react/layout/widget/ContentRenderer.scss

@@ -0,0 +1,18 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.nz-widget-contentRenderer {
+  flex: 1 1 auto;
+  overflow: hidden;
+}
+
+.nz-widget-panelWidget {
+  &.nz-horizontal {
+    .nz-minimized {
+      .nz-widget-contentRenderer {
+        position: absolute;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import * as React from "react";
+/** @internal */
+export declare function Dock(): React.JSX.Element;
+//# sourceMappingURL=Dock.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dock.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/Dock.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,gBAAgB;AAChB,wBAAgB,IAAI,sBAcnB"}

package/lib/cjs/appui-react/layout/widget/Dock.js

@@ -0,0 +1,26 @@
+"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 Widget
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dock = void 0;
+const React = require("react");
+const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
+const NineZone_1 = require("../base/NineZone");
+const Button_1 = require("../../preview/widget-action-dropdown/Button");
+/** @internal */
+function Dock() {
+    const dispatch = React.useContext(NineZone_1.NineZoneDispatchContext);
+    const title = (0, NineZone_1.useLabel)("dockToolSettingsTitle");
+    return (React.createElement(Button_1.ActionButton, { icon: React.createElement(itwinui_icons_react_1.SvgDockTop, null), title: title, onClick: () => {
+            dispatch({
+                type: "TOOL_SETTINGS_DOCK",
+            });
+        } }));
+}
+exports.Dock = Dock;
+//# sourceMappingURL=Dock.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dock.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/Dock.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,+BAA+B;AAC/B,oEAAwD;AACxD,+CAAqE;AACrE,wEAA2E;AAE3E,gBAAgB;AAChB,SAAgB,IAAI;IAClB,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,kCAAuB,CAAC,CAAC;IAC3D,MAAM,KAAK,GAAG,IAAA,mBAAQ,EAAC,uBAAuB,CAAC,CAAC;IAChD,OAAO,CACL,oBAAC,qBAAY,IACX,IAAI,EAAE,oBAAC,gCAAU,OAAG,EACpB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,GAAG,EAAE;YACZ,QAAQ,CAAC;gBACP,IAAI,EAAE,oBAAoB;aAC3B,CAAC,CAAC;QACL,CAAC,GACD,CACH,CAAC;AACJ,CAAC;AAdD,oBAcC","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 Widget\n */\n\nimport * as React from \"react\";\nimport { SvgDockTop } from \"@itwin/itwinui-icons-react\";\nimport { NineZoneDispatchContext, useLabel } from \"../base/NineZone\";\nimport { ActionButton } from \"../../preview/widget-action-dropdown/Button\";\n\n/** @internal */\nexport function Dock() {\n  const dispatch = React.useContext(NineZoneDispatchContext);\n  const title = useLabel(\"dockToolSettingsTitle\");\n  return (\n    <ActionButton\n      icon={<SvgDockTop />}\n      title={title}\n      onClick={() => {\n        dispatch({\n          type: \"TOOL_SETTINGS_DOCK\",\n        });\n      }}\n    />\n  );\n}\n"]}

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

@@ -0,0 +1,10 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import "./FloatingTab.scss";
+import * as React from "react";
+/** Component that displays a floating tab.
+ * @internal
+ */
+export declare function FloatingTab(): React.JSX.Element;
+//# sourceMappingURL=FloatingTab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingTab.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/FloatingTab.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B;;GAEG;AACH,wBAAgB,WAAW,sBA0D1B"}

package/lib/cjs/appui-react/layout/widget/FloatingTab.js

@@ -0,0 +1,68 @@
+"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 Widget
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FloatingTab = void 0;
+require("./FloatingTab.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const core_react_1 = require("@itwin/core-react");
+const DragManager_1 = require("../base/DragManager");
+const NineZone_1 = require("../base/NineZone");
+const LayoutStore_1 = require("../base/LayoutStore");
+/** Component that displays a floating tab.
+ * @internal
+ */
+function FloatingTab() {
+    const { id, position } = (0, LayoutStore_1.useLayout)((state) => {
+        const draggedTab = state.draggedTab;
+        return {
+            id: draggedTab?.tabId,
+            position: draggedTab?.position,
+        };
+    }, true);
+    const { iconSpec, label } = (0, LayoutStore_1.useLayout)((state) => {
+        const tabId = state.draggedTab?.tabId;
+        const tab = tabId ? state.tabs[tabId] : undefined;
+        return {
+            iconSpec: tab?.iconSpec,
+            label: tab?.label,
+        };
+    }, true);
+    const dispatch = React.useContext(NineZone_1.NineZoneDispatchContext);
+    const onDrag = React.useCallback((dragBy) => {
+        id &&
+            dispatch({
+                type: "WIDGET_TAB_DRAG",
+                dragBy,
+            });
+    }, [dispatch, id]);
+    const onDragEnd = React.useCallback((target) => {
+        id &&
+            dispatch({
+                type: "WIDGET_TAB_DRAG_END",
+                id,
+                target,
+            });
+    }, [dispatch, id]);
+    (0, DragManager_1.useDragTab)({
+        tabId: id || "",
+        onDrag,
+        onDragEnd,
+    });
+    const showWidgetIcon = React.useContext(NineZone_1.ShowWidgetIconContext);
+    const style = position && {
+        transform: `translate(${position.x}px, ${position.y}px)`,
+    };
+    const className = (0, classnames_1.default)("nz-widget-floatingTab", !position && "nz-hidden");
+    return (React.createElement("div", { className: className, style: style },
+        showWidgetIcon && iconSpec && React.createElement(core_react_1.Icon, { iconSpec: iconSpec }),
+        React.createElement("span", null, label)));
+}
+exports.FloatingTab = FloatingTab;
+//# sourceMappingURL=FloatingTab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingTab.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/FloatingTab.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,8BAA4B;AAC5B,2CAAoC;AACpC,+BAA+B;AAC/B,kDAAyC;AAEzC,qDAAiD;AACjD,+CAG0B;AAC1B,qDAAgD;AAEhD;;GAEG;AACH,SAAgB,WAAW;IACzB,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,IAAA,uBAAS,EAAC,CAAC,KAAK,EAAE,EAAE;QAC3C,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC;QACpC,OAAO;YACL,EAAE,EAAE,UAAU,EAAE,KAAK;YACrB,QAAQ,EAAE,UAAU,EAAE,QAAQ;SAC/B,CAAC;IACJ,CAAC,EAAE,IAAI,CAAC,CAAC;IACT,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAA,uBAAS,EAAC,CAAC,KAAK,EAAE,EAAE;QAC9C,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,EAAE,KAAK,CAAC;QACtC,MAAM,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QAClD,OAAO;YACL,QAAQ,EAAE,GAAG,EAAE,QAAQ;YACvB,KAAK,EAAE,GAAG,EAAE,KAAK;SAClB,CAAC;IACJ,CAAC,EAAE,IAAI,CAAC,CAAC;IAET,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,kCAAuB,CAAC,CAAC;IAC3D,MAAM,MAAM,GAAG,KAAK,CAAC,WAAW,CAC9B,CAAC,MAAM,EAAE,EAAE;QACT,EAAE;YACA,QAAQ,CAAC;gBACP,IAAI,EAAE,iBAAiB;gBACvB,MAAM;aACP,CAAC,CAAC;IACP,CAAC,EACD,CAAC,QAAQ,EAAE,EAAE,CAAC,CACf,CAAC;IACF,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CACjC,CAAC,MAAM,EAAE,EAAE;QACT,EAAE;YACA,QAAQ,CAAC;gBACP,IAAI,EAAE,qBAAqB;gBAC3B,EAAE;gBACF,MAAM;aACP,CAAC,CAAC;IACP,CAAC,EACD,CAAC,QAAQ,EAAE,EAAE,CAAC,CACf,CAAC;IACF,IAAA,wBAAU,EAAC;QACT,KAAK,EAAE,EAAE,IAAI,EAAE;QACf,MAAM;QACN,SAAS;KACV,CAAC,CAAC;IACH,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAAC,gCAAqB,CAAC,CAAC;IAC/D,MAAM,KAAK,GAAG,QAAQ,IAAI;QACxB,SAAS,EAAE,aAAa,QAAQ,CAAC,CAAC,OAAO,QAAQ,CAAC,CAAC,KAAK;KACzD,CAAC;IACF,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,uBAAuB,EACvB,CAAC,QAAQ,IAAI,WAAW,CACzB,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK;QACpC,cAAc,IAAI,QAAQ,IAAI,oBAAC,iBAAI,IAAC,QAAQ,EAAE,QAAQ,GAAI;QAC3D,kCAAO,KAAK,CAAQ,CAChB,CACP,CAAC;AACJ,CAAC;AA1DD,kCA0DC","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 Widget\n */\n\nimport \"./FloatingTab.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Icon } from \"@itwin/core-react\";\nimport type { UseDragTabArgs } from \"../base/DragManager\";\nimport { useDragTab } from \"../base/DragManager\";\nimport {\n  NineZoneDispatchContext,\n  ShowWidgetIconContext,\n} from \"../base/NineZone\";\nimport { useLayout } from \"../base/LayoutStore\";\n\n/** Component that displays a floating tab.\n * @internal\n */\nexport function FloatingTab() {\n  const { id, position } = useLayout((state) => {\n    const draggedTab = state.draggedTab;\n    return {\n      id: draggedTab?.tabId,\n      position: draggedTab?.position,\n    };\n  }, true);\n  const { iconSpec, label } = useLayout((state) => {\n    const tabId = state.draggedTab?.tabId;\n    const tab = tabId ? state.tabs[tabId] : undefined;\n    return {\n      iconSpec: tab?.iconSpec,\n      label: tab?.label,\n    };\n  }, true);\n\n  const dispatch = React.useContext(NineZoneDispatchContext);\n  const onDrag = React.useCallback<NonNullable<UseDragTabArgs[\"onDrag\"]>>(\n    (dragBy) => {\n      id &&\n        dispatch({\n          type: \"WIDGET_TAB_DRAG\",\n          dragBy,\n        });\n    },\n    [dispatch, id]\n  );\n  const onDragEnd = React.useCallback<NonNullable<UseDragTabArgs[\"onDragEnd\"]>>(\n    (target) => {\n      id &&\n        dispatch({\n          type: \"WIDGET_TAB_DRAG_END\",\n          id,\n          target,\n        });\n    },\n    [dispatch, id]\n  );\n  useDragTab({\n    tabId: id || \"\",\n    onDrag,\n    onDragEnd,\n  });\n  const showWidgetIcon = React.useContext(ShowWidgetIconContext);\n  const style = position && {\n    transform: `translate(${position.x}px, ${position.y}px)`,\n  };\n  const className = classnames(\n    \"nz-widget-floatingTab\",\n    !position && \"nz-hidden\"\n  );\n  return (\n    <div className={className} style={style}>\n      {showWidgetIcon && iconSpec && <Icon iconSpec={iconSpec} />}\n      <span>{label}</span>\n    </div>\n  );\n}\n"]}

package/lib/cjs/appui-react/layout/widget/FloatingTab.scss

@@ -0,0 +1,35 @@
+/*---------------------------------------------------------------------------------------------
+ * 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";
+@import "variables";
+
+.nz-widget-floatingTab {
+  position: absolute;
+  padding: 0 1em;
+  display: flex;
+  align-items: center;
+  background: $buic-background-4;
+  user-select: none;
+  white-space: nowrap;
+  height: $nz-widget-tab-height;
+  border-radius: $nz-widget-tab-border-radius;
+  color: var(--iui-color-text-disabled);
+  pointer-events: none;
+  opacity: $nz-dragged-widget-opacity;
+  gap: 6px;
+
+  @include uicore-z-index(drag-preview);
+
+  &.nz-hidden {
+    display: none;
+  }
+
+  > span {
+    max-width: 12em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: $nz-widget-tab-font-size;
+  }
+}

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

@@ -0,0 +1,33 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import "./FloatingWidget.scss";
+import * as React from "react";
+import { Rectangle } from "@itwin/core-react";
+import type { FloatingWidgetState } from "../state/WidgetState";
+import type { XAndY } from "../state/internal/NineZoneStateHelpers";
+type FloatingWidgetEdgeHandle = "left" | "right" | "top" | "bottom";
+type FloatingWidgetCornerHandle = "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
+/** @internal */
+export type FloatingWidgetResizeHandle = FloatingWidgetEdgeHandle | FloatingWidgetCornerHandle;
+/** @internal */
+export interface FloatingWidgetProviderProps {
+    id: FloatingWidgetState["id"];
+}
+/** @internal */
+export declare function FloatingWidgetProvider(props: FloatingWidgetProviderProps): React.JSX.Element;
+/** @internal */
+export interface FloatingWidgetProps {
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+}
+/** @internal */
+export declare function FloatingWidget(props: FloatingWidgetProps): React.JSX.Element;
+/** @internal */
+export declare function getResizeBy(handle: FloatingWidgetResizeHandle, offset: XAndY): Rectangle;
+/** @internal */
+export declare function useFloatingWidgetId(): FloatingWidgetState["id"] | undefined;
+/** @internal */
+export declare function useWidgetAllowedToDock(): boolean;
+export {};
+//# sourceMappingURL=FloatingWidget.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingWidget.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/FloatingWidget.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,SAAS,EAGV,MAAM,mBAAmB,CAAC;AAa3B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAUhE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wCAAwC,CAAC;AAGpE,KAAK,wBAAwB,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AACpE,KAAK,0BAA0B,GAC3B,SAAS,GACT,UAAU,GACV,YAAY,GACZ,aAAa,CAAC;AAElB,gBAAgB;AAChB,MAAM,MAAM,0BAA0B,GAClC,wBAAwB,GACxB,0BAA0B,CAAC;AAE/B,gBAAgB;AAChB,MAAM,WAAW,2BAA2B;IAC1C,EAAE,EAAE,mBAAmB,CAAC,IAAI,CAAC,CAAC;CAC/B;AAED,gBAAgB;AAChB,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,qBAGxE;AAED,gBAAgB;AAChB,MAAM,WAAW,mBAAmB;IAClC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC1E,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CAC3E;AAED,gBAAgB;AAChB,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBA4FxD;AAuKD,gBAAgB;AAChB,wBAAgB,WAAW,CAAC,MAAM,EAAE,0BAA0B,EAAE,MAAM,EAAE,KAAK,aAmB5E;AAED,gBAAgB;AAChB,wBAAgB,mBAAmB,IAAI,mBAAmB,CAAC,IAAI,CAAC,GAAG,SAAS,CAS3E;AAED,gBAAgB;AAChB,wBAAgB,sBAAsB,IAAI,OAAO,CAYhD"}