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

package/lib/esm/appui-react/{layout/state → preview/activate-dropped-tab}/activateDroppedTab.js

@@ -3,10 +3,11 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { assert } from "@itwin/core-bentley";
-import { getTabLocation } from "./TabLocation";
-import { getWidgetState, setWidgetActiveTabId, } from "./internal/WidgetStateHelpers";
-/** Changes widget active tab after drag & drop
- * @internal */
+import { getTabLocation } from "../../layout/state/TabLocation";
+import { getWidgetState, setWidgetActiveTabId, } from "../../layout/state/internal/WidgetStateHelpers";
+/** Reducer factory to activate tab of a dragged widget when dropped in a container.
+ * @internal
+ */
 export const activateDroppedTab = (reducer) => (state, action) => {
     if (action.type === "WIDGET_TAB_DRAG_END") {
         const draggedTabId = action.id;

package/lib/esm/appui-react/preview/activate-dropped-tab/activateDroppedTab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"activateDroppedTab.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/activate-dropped-tab/activateDroppedTab.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EACL,cAAc,EACd,oBAAoB,GACrB,MAAM,gDAAgD,CAAC;AAExD;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAC7B,CAAC,OAAoC,EAA+B,EAAE,CACtE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE;IAChB,IAAI,MAAM,CAAC,IAAI,KAAK,qBAAqB,EAAE;QACzC,MAAM,YAAY,GAAG,MAAM,CAAC,EAAE,CAAC;QAE/B,KAAK,GAAG,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;QAC/B,MAAM,MAAM,GAAG,gBAAgB,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;QACrD,KAAK,GAAG,oBAAoB,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,EAAE,YAAY,CAAC,CAAC;KAC9D;SAAM,IAAI,MAAM,CAAC,IAAI,KAAK,iBAAiB,EAAE;QAC5C,MAAM,aAAa,GAAG,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,gBAAgB,CAAC,CAAC;QAErE,KAAK,GAAG,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;QAC/B,MAAM,MAAM,GAAG,gBAAgB,CAAC,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;QAClE,KAAK,GAAG,oBAAoB,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;KAC3E;SAAM;QACL,KAAK,GAAG,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;KAChC;IACD,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEJ,SAAS,gBAAgB,CAAC,KAAoB,EAAE,kBAA0B;IACxE,MAAM,QAAQ,GAAG,cAAc,CAAC,KAAK,EAAE,kBAAkB,CAAC,CAAC;IAC3D,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IAEnB,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAChD,OAAO,MAAM,CAAC;AAChB,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 *--------------------------------------------------------------------------------------------*/\nimport { assert } from \"@itwin/core-bentley\";\nimport type { NineZoneState } from \"../../layout/state/NineZoneState\";\nimport type { NineZoneStateReducer } from \"../../layout/state/NineZoneStateReducer\";\nimport { getTabLocation } from \"../../layout/state/TabLocation\";\nimport {\n  getWidgetState,\n  setWidgetActiveTabId,\n} from \"../../layout/state/internal/WidgetStateHelpers\";\n\n/** Reducer factory to activate tab of a dragged widget when dropped in a container.\n * @internal\n */\nexport const activateDroppedTab =\n  (reducer: typeof NineZoneStateReducer): typeof NineZoneStateReducer =>\n  (state, action) => {\n    if (action.type === \"WIDGET_TAB_DRAG_END\") {\n      const draggedTabId = action.id;\n\n      state = reducer(state, action);\n      const widget = getWidgetByTabId(state, draggedTabId);\n      state = setWidgetActiveTabId(state, widget.id, draggedTabId);\n    } else if (action.type === \"WIDGET_DRAG_END\") {\n      const draggedWidget = getWidgetState(state, action.floatingWidgetId);\n\n      state = reducer(state, action);\n      const widget = getWidgetByTabId(state, draggedWidget.activeTabId);\n      state = setWidgetActiveTabId(state, widget.id, draggedWidget.activeTabId);\n    } else {\n      state = reducer(state, action);\n    }\n    return state;\n  };\n\nfunction getWidgetByTabId(state: NineZoneState, draggedWidgetTabId: string) {\n  const location = getTabLocation(state, draggedWidgetTabId);\n  assert(!!location);\n\n  const widget = state.widgets[location.widgetId];\n  return widget;\n}\n"]}

package/lib/esm/appui-react/preview/content-always-max-size/useContentAlwaysMaxSize.d.ts

@@ -0,0 +1,6 @@
+import "./useContentAlwaysMaxSize.scss";
+/** @internal */
+export declare function useContentAlwaysMaxSize(): {
+    "uifw-preview-contentAlwaysMaxSize": boolean | undefined;
+};
+//# sourceMappingURL=useContentAlwaysMaxSize.d.ts.map

package/lib/esm/appui-react/preview/content-always-max-size/useContentAlwaysMaxSize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContentAlwaysMaxSize.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/preview/content-always-max-size/useContentAlwaysMaxSize.tsx"],"names":[],"mappings":"AAIA,OAAO,gCAAgC,CAAC;AAGxC,gBAAgB;AAChB,wBAAgB,uBAAuB;;EAKtC"}

package/lib/esm/appui-react/preview/content-always-max-size/useContentAlwaysMaxSize.js

@@ -0,0 +1,14 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import "./useContentAlwaysMaxSize.scss";
+import { usePreviewFeatures } from "../PreviewFeatures";
+/** @internal */
+export function useContentAlwaysMaxSize() {
+    const { contentAlwaysMaxSize } = usePreviewFeatures();
+    return {
+        "uifw-preview-contentAlwaysMaxSize": contentAlwaysMaxSize,
+    };
+}
+//# sourceMappingURL=useContentAlwaysMaxSize.js.map

package/lib/esm/appui-react/preview/content-always-max-size/useContentAlwaysMaxSize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContentAlwaysMaxSize.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/content-always-max-size/useContentAlwaysMaxSize.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG,OAAO,gCAAgC,CAAC;AACxC,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAExD,gBAAgB;AAChB,MAAM,UAAU,uBAAuB;IACrC,MAAM,EAAE,oBAAoB,EAAE,GAAG,kBAAkB,EAAE,CAAC;IACtD,OAAO;QACL,mCAAmC,EAAE,oBAAoB;KAC1D,CAAC;AACJ,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 *--------------------------------------------------------------------------------------------*/\nimport \"./useContentAlwaysMaxSize.scss\";\nimport { usePreviewFeatures } from \"../PreviewFeatures\";\n\n/** @internal */\nexport function useContentAlwaysMaxSize() {\n  const { contentAlwaysMaxSize } = usePreviewFeatures();\n  return {\n    \"uifw-preview-contentAlwaysMaxSize\": contentAlwaysMaxSize,\n  };\n}\n"]}

package/lib/esm/appui-react/{layout/widget-panels/CenterContent.scss → preview/content-always-max-size/useContentAlwaysMaxSize.scss}

@@ -2,6 +2,9 @@
  * 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;
+@layer appui.preview {
+  .uifw-preview-contentAlwaysMaxSize {
+    grid-row: 1 / -1;
+    grid-column: 1 / -1;
+  }
 }

package/lib/esm/appui-react/preview/enable-maximized-widget/MaximizeToggle.d.ts

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

package/lib/esm/appui-react/preview/enable-maximized-widget/MaximizeToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaximizeToggle.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/preview/enable-maximized-widget/MaximizeToggle.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,gBAAgB;AAChB,wBAAgB,cAAc,sBA4B7B;AAED,gBAAgB;AAChB,wBAAgB,iBAAiB,YAShC"}

package/lib/esm/appui-react/preview/enable-maximized-widget/MaximizeToggle.js

@@ -0,0 +1,46 @@
+/*---------------------------------------------------------------------------------------------
+ * 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
+ */
+import * as React from "react";
+import { SvgWindowMaximize, SvgWindowMinimize, } from "@itwin/itwinui-icons-react";
+import { ActionButton } from "../widget-action-dropdown/Button";
+import { WidgetIdContext } from "../../layout/widget/Widget";
+import { MaximizedWidgetContext } from "./MaximizedWidget";
+import { usePreviewFeatures } from "../PreviewFeatures";
+import { useFloatingWidgetId } from "../../layout/widget/FloatingWidget";
+import { usePanelWidgetId } from "../../layout/widget/usePanelWidgetId";
+/** @internal */
+export function MaximizeToggle() {
+    const widgetId = React.useContext(WidgetIdContext);
+    const { maximizedWidget, setMaximizedWidget } = React.useContext(MaximizedWidgetContext);
+    const { id, title, iconSpec } = maximizedWidget === widgetId
+        ? {
+            id: undefined,
+            title: "Restore",
+            iconSpec: React.createElement(SvgWindowMinimize, null),
+        }
+        : {
+            id: widgetId,
+            title: "Maximize",
+            iconSpec: React.createElement(SvgWindowMaximize, null),
+        };
+    return (React.createElement(ActionButton, { icon: iconSpec, title: title, onClick: () => {
+            setMaximizedWidget(id);
+        } }));
+}
+/** @internal */
+export function useMaximizeToggle() {
+    const { enableMaximizedFloatingWidget, enableMaximizedPanelWidget } = usePreviewFeatures();
+    const floatingWidgetId = useFloatingWidgetId();
+    const panelWidgetId = usePanelWidgetId();
+    if (enableMaximizedFloatingWidget && floatingWidgetId)
+        return true;
+    if (enableMaximizedPanelWidget && panelWidgetId)
+        return true;
+    return false;
+}
+//# sourceMappingURL=MaximizeToggle.js.map

package/lib/esm/appui-react/preview/enable-maximized-widget/MaximizeToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaximizeToggle.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/enable-maximized-widget/MaximizeToggle.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,gBAAgB;AAChB,MAAM,UAAU,cAAc;IAC5B,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IACnD,MAAM,EAAE,eAAe,EAAE,kBAAkB,EAAE,GAAG,KAAK,CAAC,UAAU,CAC9D,sBAAsB,CACvB,CAAC;IAEF,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,GAC3B,eAAe,KAAK,QAAQ;QAC1B,CAAC,CAAC;YACE,EAAE,EAAE,SAAS;YACb,KAAK,EAAE,SAAS;YAChB,QAAQ,EAAE,oBAAC,iBAAiB,OAAG;SAChC;QACH,CAAC,CAAC;YACE,EAAE,EAAE,QAAQ;YACZ,KAAK,EAAE,UAAU;YACjB,QAAQ,EAAE,oBAAC,iBAAiB,OAAG;SAChC,CAAC;IAER,OAAO,CACL,oBAAC,YAAY,IACX,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,GAAG,EAAE;YACZ,kBAAkB,CAAC,EAAE,CAAC,CAAC;QACzB,CAAC,GACD,CACH,CAAC;AACJ,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,iBAAiB;IAC/B,MAAM,EAAE,6BAA6B,EAAE,0BAA0B,EAAE,GACjE,kBAAkB,EAAE,CAAC;IACvB,MAAM,gBAAgB,GAAG,mBAAmB,EAAE,CAAC;IAC/C,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;IAEzC,IAAI,6BAA6B,IAAI,gBAAgB;QAAE,OAAO,IAAI,CAAC;IACnE,IAAI,0BAA0B,IAAI,aAAa;QAAE,OAAO,IAAI,CAAC;IAC7D,OAAO,KAAK,CAAC;AACf,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 * as React from \"react\";\nimport {\n  SvgWindowMaximize,\n  SvgWindowMinimize,\n} from \"@itwin/itwinui-icons-react\";\nimport { ActionButton } from \"../widget-action-dropdown/Button\";\nimport { WidgetIdContext } from \"../../layout/widget/Widget\";\nimport { MaximizedWidgetContext } from \"./MaximizedWidget\";\nimport { usePreviewFeatures } from \"../PreviewFeatures\";\nimport { useFloatingWidgetId } from \"../../layout/widget/FloatingWidget\";\nimport { usePanelWidgetId } from \"../../layout/widget/usePanelWidgetId\";\n\n/** @internal */\nexport function MaximizeToggle() {\n  const widgetId = React.useContext(WidgetIdContext);\n  const { maximizedWidget, setMaximizedWidget } = React.useContext(\n    MaximizedWidgetContext\n  );\n\n  const { id, title, iconSpec } =\n    maximizedWidget === widgetId\n      ? {\n          id: undefined,\n          title: \"Restore\",\n          iconSpec: <SvgWindowMinimize />,\n        }\n      : {\n          id: widgetId,\n          title: \"Maximize\",\n          iconSpec: <SvgWindowMaximize />,\n        };\n\n  return (\n    <ActionButton\n      icon={iconSpec}\n      title={title}\n      onClick={() => {\n        setMaximizedWidget(id);\n      }}\n    />\n  );\n}\n\n/** @internal */\nexport function useMaximizeToggle() {\n  const { enableMaximizedFloatingWidget, enableMaximizedPanelWidget } =\n    usePreviewFeatures();\n  const floatingWidgetId = useFloatingWidgetId();\n  const panelWidgetId = usePanelWidgetId();\n\n  if (enableMaximizedFloatingWidget && floatingWidgetId) return true;\n  if (enableMaximizedPanelWidget && panelWidgetId) return true;\n  return false;\n}\n"]}

package/lib/esm/appui-react/preview/enable-maximized-widget/MaximizedWidget.d.ts

@@ -0,0 +1,18 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import * as React from "react";
+interface MaximizedWidgetState {
+    maximizedWidget: string | undefined;
+    setMaximizedWidget: (id: string | undefined) => void;
+}
+/** Context containing configuration and state for maximized widget feature.
+ * @internal
+ */
+export declare const MaximizedWidgetContext: React.Context<MaximizedWidgetState>;
+/** Maximized widget feature provider.
+ * @internal
+ */
+export declare function MaximizedWidgetProvider({ children, }: React.PropsWithChildren<{}>): React.JSX.Element;
+export {};
+//# sourceMappingURL=MaximizedWidget.d.ts.map

package/lib/esm/appui-react/preview/enable-maximized-widget/MaximizedWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaximizedWidget.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/preview/enable-maximized-widget/MaximizedWidget.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,UAAU,oBAAoB;IAC5B,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,kBAAkB,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CACtD;AAED;;GAEG;AACH,eAAO,MAAM,sBAAsB,qCAKlC,CAAC;AAEF;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,GACT,EAAE,KAAK,CAAC,iBAAiB,CAAC,EAAE,CAAC,qBAW7B"}

package/lib/esm/appui-react/preview/enable-maximized-widget/MaximizedWidget.js

@@ -0,0 +1,23 @@
+/*---------------------------------------------------------------------------------------------
+ * 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
+ */
+import * as React from "react";
+/** Context containing configuration and state for maximized widget feature.
+ * @internal
+ */
+export const MaximizedWidgetContext = React.createContext({
+    maximizedWidget: undefined,
+    setMaximizedWidget: () => { },
+});
+/** Maximized widget feature provider.
+ * @internal
+ */
+export function MaximizedWidgetProvider({ children, }) {
+    const [maximizedWidget, setMaximizedWidget] = React.useState(undefined);
+    return (React.createElement(MaximizedWidgetContext.Provider, { value: { maximizedWidget, setMaximizedWidget } }, children));
+}
+//# sourceMappingURL=MaximizedWidget.js.map

package/lib/esm/appui-react/preview/enable-maximized-widget/MaximizedWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaximizedWidget.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/enable-maximized-widget/MaximizedWidget.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,KAAK,CAAC,aAAa,CACvD;IACE,eAAe,EAAE,SAAS;IAC1B,kBAAkB,EAAE,GAAG,EAAE,GAAE,CAAC;CAC7B,CACF,CAAC;AAEF;;GAEG;AACH,MAAM,UAAU,uBAAuB,CAAC,EACtC,QAAQ,GACoB;IAC5B,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAE1D,SAAS,CAAC,CAAC;IACb,OAAO,CACL,oBAAC,sBAAsB,CAAC,QAAQ,IAC9B,KAAK,EAAE,EAAE,eAAe,EAAE,kBAAkB,EAAE,IAE7C,QAAQ,CACuB,CACnC,CAAC;AACJ,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 * as React from \"react\";\n\ninterface MaximizedWidgetState {\n  maximizedWidget: string | undefined;\n  setMaximizedWidget: (id: string | undefined) => void;\n}\n\n/** Context containing configuration and state for maximized widget feature.\n * @internal\n */\nexport const MaximizedWidgetContext = React.createContext<MaximizedWidgetState>(\n  {\n    maximizedWidget: undefined,\n    setMaximizedWidget: () => {},\n  }\n);\n\n/** Maximized widget feature provider.\n * @internal\n */\nexport function MaximizedWidgetProvider({\n  children,\n}: React.PropsWithChildren<{}>) {\n  const [maximizedWidget, setMaximizedWidget] = React.useState<\n    string | undefined\n  >(undefined);\n  return (\n    <MaximizedWidgetContext.Provider\n      value={{ maximizedWidget, setMaximizedWidget }}\n    >\n      {children}\n    </MaximizedWidgetContext.Provider>\n  );\n}\n"]}

package/lib/esm/appui-react/preview/enable-maximized-widget/useMaximizedWidget.d.ts

@@ -0,0 +1,50 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import "./useMaximizedWidget.scss";
+import type { WidgetState } from "../../layout/state/WidgetState";
+import type { PanelSide } from "../../layout/widget-panels/PanelTypes";
+/** @internal */
+export declare function useIsMaximizedWidget(): boolean;
+/** @internal */
+export declare function useMaximizedPanelLayout(side: PanelSide): {
+    "uifw-preview-enableMaximizedWidget_panel-layout": boolean;
+};
+/** @internal */
+export declare function useMaximizedPanel(side: PanelSide): {
+    "uifw-preview-enableMaximizedWidget_panel": true;
+} | undefined;
+/** @internal */
+export declare function useMaximizedSection(widgetId: WidgetState["id"]): {
+    "uifw-preview-enableMaximizedWidget_section": boolean;
+    "uifw-preview-enableMaximizedWidget_section-sibling": boolean;
+} | undefined;
+/** @internal */
+export declare function useMaximizedFloatingWidget(): {
+    style: {
+        transform?: undefined;
+        height?: undefined;
+        width?: undefined;
+        "max-height"?: undefined;
+        "max-width"?: undefined;
+    };
+    classNames: {
+        "uifw-preview-enableMaximizedWidget_floatingWidget"?: undefined;
+    };
+} | {
+    style: {
+        transform: string;
+        height: string;
+        width: string;
+        "max-height": string;
+        "max-width": string;
+    };
+    classNames: {
+        "uifw-preview-enableMaximizedWidget_floatingWidget": boolean;
+    };
+};
+/** @internal */
+export declare function useMaximizedWidgetTabBarHandle(): {
+    "uifw-preview-enableMaximizedWidget_widget-tabBar": boolean;
+};
+//# sourceMappingURL=useMaximizedWidget.d.ts.map

package/lib/esm/appui-react/preview/enable-maximized-widget/useMaximizedWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMaximizedWidget.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/preview/enable-maximized-widget/useMaximizedWidget.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,2BAA2B,CAAC;AASnC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAGvE,gBAAgB;AAChB,wBAAgB,oBAAoB,YAMnC;AAED,gBAAgB;AAChB,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,SAAS;;EAKtD;AAED,gBAAgB;AAChB,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,SAAS;;cAMhD;AAED,gBAAgB;AAChB,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC;;;cAU9D;AAqCD,gBAAgB;AAChB,wBAAgB,0BAA0B;;;;;;;;;;;;;;;;;;;;;;EAkBzC;AAED,gBAAgB;AAChB,wBAAgB,8BAA8B;;EAK7C"}

package/lib/esm/appui-react/preview/enable-maximized-widget/useMaximizedWidget.js

@@ -0,0 +1,106 @@
+/*---------------------------------------------------------------------------------------------
+ * 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
+ */
+import "./useMaximizedWidget.scss";
+import * as React from "react";
+import { WidgetIdContext } from "../../layout/widget/Widget";
+import { MaximizedWidgetContext } from "./MaximizedWidget";
+import { useLayout } from "../../layout/base/LayoutStore";
+import { getWidgetLocation, isPanelWidgetLocation, } from "../../layout/state/WidgetLocation";
+import { usePreviewFeatures } from "../PreviewFeatures";
+/** @internal */
+export function useIsMaximizedWidget() {
+    const widgetId = React.useContext(WidgetIdContext);
+    const maximizedWidgetId = useMaximizedWidgetId();
+    if (maximizedWidgetId === undefined)
+        return false;
+    return widgetId === maximizedWidgetId;
+}
+/** @internal */
+export function useMaximizedPanelLayout(side) {
+    const location = useMaximizedPanelWidgetLocation();
+    return {
+        "uifw-preview-enableMaximizedWidget_panel-layout": (location === null || location === void 0 ? void 0 : location.side) === side,
+    };
+}
+/** @internal */
+export function useMaximizedPanel(side) {
+    const isMaximized = useIsMaximizedPanel(side);
+    if (!isMaximized)
+        return undefined;
+    return {
+        "uifw-preview-enableMaximizedWidget_panel": isMaximized,
+    };
+}
+/** @internal */
+export function useMaximizedSection(widgetId) {
+    const location = useMaximizedPanelWidgetLocation();
+    if (!location)
+        return undefined;
+    return {
+        "uifw-preview-enableMaximizedWidget_section": location.widgetId === widgetId,
+        "uifw-preview-enableMaximizedWidget_section-sibling": location.widgetId !== widgetId,
+    };
+}
+function useIsMaximizedPanel(side) {
+    const location = useMaximizedPanelWidgetLocation();
+    return (location === null || location === void 0 ? void 0 : location.side) === side;
+}
+function useMaximizedPanelWidgetLocation() {
+    const location = useMaximizedWidgetLocation();
+    if (!location)
+        return undefined;
+    if (!isPanelWidgetLocation(location))
+        return undefined;
+    return location;
+}
+function useMaximizedWidgetLocation() {
+    const widgetId = useMaximizedWidgetId();
+    const location = useLayout((state) => {
+        if (!widgetId)
+            return undefined;
+        return getWidgetLocation(state, widgetId);
+    }, true);
+    if (!widgetId || !location)
+        return undefined;
+    return { ...location, widgetId };
+}
+function useMaximizedWidgetId() {
+    const { maximizedWidget } = React.useContext(MaximizedWidgetContext);
+    const preview = usePreviewFeatures();
+    const enabled = preview.enableMaximizedFloatingWidget || preview.enableMaximizedPanelWidget;
+    if (!enabled)
+        return undefined;
+    return maximizedWidget;
+}
+/** @internal */
+export function useMaximizedFloatingWidget() {
+    const isMaximizedWidget = useIsMaximizedWidget();
+    if (!isMaximizedWidget)
+        return {
+            style: {},
+            classNames: {},
+        };
+    return {
+        style: {
+            transform: "unset",
+            height: "unset",
+            width: "unset",
+            "max-height": "unset",
+            "max-width": "unset",
+        },
+        classNames: { "uifw-preview-enableMaximizedWidget_floatingWidget": true },
+    };
+}
+/** @internal */
+export function useMaximizedWidgetTabBarHandle() {
+    const isMaximizedWidget = useIsMaximizedWidget();
+    return {
+        "uifw-preview-enableMaximizedWidget_widget-tabBar": isMaximizedWidget,
+    };
+}
+//# sourceMappingURL=useMaximizedWidget.js.map

package/lib/esm/appui-react/preview/enable-maximized-widget/useMaximizedWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMaximizedWidget.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/enable-maximized-widget/useMaximizedWidget.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,2BAA2B,CAAC;AACnC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EACL,iBAAiB,EACjB,qBAAqB,GACtB,MAAM,mCAAmC,CAAC;AAG3C,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAExD,gBAAgB;AAChB,MAAM,UAAU,oBAAoB;IAClC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IACnD,MAAM,iBAAiB,GAAG,oBAAoB,EAAE,CAAC;IACjD,IAAI,iBAAiB,KAAK,SAAS;QAAE,OAAO,KAAK,CAAC;IAElD,OAAO,QAAQ,KAAK,iBAAiB,CAAC;AACxC,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,uBAAuB,CAAC,IAAe;IACrD,MAAM,QAAQ,GAAG,+BAA+B,EAAE,CAAC;IACnD,OAAO;QACL,iDAAiD,EAAE,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,MAAK,IAAI;KAC3E,CAAC;AACJ,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,iBAAiB,CAAC,IAAe;IAC/C,MAAM,WAAW,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAC9C,IAAI,CAAC,WAAW;QAAE,OAAO,SAAS,CAAC;IACnC,OAAO;QACL,0CAA0C,EAAE,WAAW;KACxD,CAAC;AACJ,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,mBAAmB,CAAC,QAA2B;IAC7D,MAAM,QAAQ,GAAG,+BAA+B,EAAE,CAAC;IACnD,IAAI,CAAC,QAAQ;QAAE,OAAO,SAAS,CAAC;IAEhC,OAAO;QACL,4CAA4C,EAC1C,QAAQ,CAAC,QAAQ,KAAK,QAAQ;QAChC,oDAAoD,EAClD,QAAQ,CAAC,QAAQ,KAAK,QAAQ;KACjC,CAAC;AACJ,CAAC;AAED,SAAS,mBAAmB,CAAC,IAAe;IAC1C,MAAM,QAAQ,GAAG,+BAA+B,EAAE,CAAC;IACnD,OAAO,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,MAAK,IAAI,CAAC;AACjC,CAAC;AAED,SAAS,+BAA+B;IACtC,MAAM,QAAQ,GAAG,0BAA0B,EAAE,CAAC;IAE9C,IAAI,CAAC,QAAQ;QAAE,OAAO,SAAS,CAAC;IAChC,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC;QAAE,OAAO,SAAS,CAAC;IAEvD,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,SAAS,0BAA0B;IACjC,MAAM,QAAQ,GAAG,oBAAoB,EAAE,CAAC;IACxC,MAAM,QAAQ,GAAG,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;QACnC,IAAI,CAAC,QAAQ;YAAE,OAAO,SAAS,CAAC;QAChC,OAAO,iBAAiB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;IAC5C,CAAC,EAAE,IAAI,CAAC,CAAC;IAET,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ;QAAE,OAAO,SAAS,CAAC;IAC7C,OAAO,EAAE,GAAG,QAAQ,EAAE,QAAQ,EAAE,CAAC;AACnC,CAAC;AAED,SAAS,oBAAoB;IAC3B,MAAM,EAAE,eAAe,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,sBAAsB,CAAC,CAAC;IACrE,MAAM,OAAO,GAAG,kBAAkB,EAAE,CAAC;IACrC,MAAM,OAAO,GACX,OAAO,CAAC,6BAA6B,IAAI,OAAO,CAAC,0BAA0B,CAAC;IAC9E,IAAI,CAAC,OAAO;QAAE,OAAO,SAAS,CAAC;IAE/B,OAAO,eAAe,CAAC;AACzB,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,0BAA0B;IACxC,MAAM,iBAAiB,GAAG,oBAAoB,EAAE,CAAC;IACjD,IAAI,CAAC,iBAAiB;QACpB,OAAO;YACL,KAAK,EAAE,EAAE;YACT,UAAU,EAAE,EAAE;SACf,CAAC;IAEJ,OAAO;QACL,KAAK,EAAE;YACL,SAAS,EAAE,OAAO;YAClB,MAAM,EAAE,OAAO;YACf,KAAK,EAAE,OAAO;YACd,YAAY,EAAE,OAAO;YACrB,WAAW,EAAE,OAAO;SACrB;QACD,UAAU,EAAE,EAAE,mDAAmD,EAAE,IAAI,EAAE;KAC1E,CAAC;AACJ,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,8BAA8B;IAC5C,MAAM,iBAAiB,GAAG,oBAAoB,EAAE,CAAC;IACjD,OAAO;QACL,kDAAkD,EAAE,iBAAiB;KACtE,CAAC;AACJ,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 \"./useMaximizedWidget.scss\";\nimport * as React from \"react\";\nimport { WidgetIdContext } from \"../../layout/widget/Widget\";\nimport { MaximizedWidgetContext } from \"./MaximizedWidget\";\nimport { useLayout } from \"../../layout/base/LayoutStore\";\nimport {\n  getWidgetLocation,\n  isPanelWidgetLocation,\n} from \"../../layout/state/WidgetLocation\";\nimport type { WidgetState } from \"../../layout/state/WidgetState\";\nimport type { PanelSide } from \"../../layout/widget-panels/PanelTypes\";\nimport { usePreviewFeatures } from \"../PreviewFeatures\";\n\n/** @internal */\nexport function useIsMaximizedWidget() {\n  const widgetId = React.useContext(WidgetIdContext);\n  const maximizedWidgetId = useMaximizedWidgetId();\n  if (maximizedWidgetId === undefined) return false;\n\n  return widgetId === maximizedWidgetId;\n}\n\n/** @internal */\nexport function useMaximizedPanelLayout(side: PanelSide) {\n  const location = useMaximizedPanelWidgetLocation();\n  return {\n    \"uifw-preview-enableMaximizedWidget_panel-layout\": location?.side === side,\n  };\n}\n\n/** @internal */\nexport function useMaximizedPanel(side: PanelSide) {\n  const isMaximized = useIsMaximizedPanel(side);\n  if (!isMaximized) return undefined;\n  return {\n    \"uifw-preview-enableMaximizedWidget_panel\": isMaximized,\n  };\n}\n\n/** @internal */\nexport function useMaximizedSection(widgetId: WidgetState[\"id\"]) {\n  const location = useMaximizedPanelWidgetLocation();\n  if (!location) return undefined;\n\n  return {\n    \"uifw-preview-enableMaximizedWidget_section\":\n      location.widgetId === widgetId,\n    \"uifw-preview-enableMaximizedWidget_section-sibling\":\n      location.widgetId !== widgetId,\n  };\n}\n\nfunction useIsMaximizedPanel(side: PanelSide) {\n  const location = useMaximizedPanelWidgetLocation();\n  return location?.side === side;\n}\n\nfunction useMaximizedPanelWidgetLocation() {\n  const location = useMaximizedWidgetLocation();\n\n  if (!location) return undefined;\n  if (!isPanelWidgetLocation(location)) return undefined;\n\n  return location;\n}\n\nfunction useMaximizedWidgetLocation() {\n  const widgetId = useMaximizedWidgetId();\n  const location = useLayout((state) => {\n    if (!widgetId) return undefined;\n    return getWidgetLocation(state, widgetId);\n  }, true);\n\n  if (!widgetId || !location) return undefined;\n  return { ...location, widgetId };\n}\n\nfunction useMaximizedWidgetId() {\n  const { maximizedWidget } = React.useContext(MaximizedWidgetContext);\n  const preview = usePreviewFeatures();\n  const enabled =\n    preview.enableMaximizedFloatingWidget || preview.enableMaximizedPanelWidget;\n  if (!enabled) return undefined;\n\n  return maximizedWidget;\n}\n\n/** @internal */\nexport function useMaximizedFloatingWidget() {\n  const isMaximizedWidget = useIsMaximizedWidget();\n  if (!isMaximizedWidget)\n    return {\n      style: {},\n      classNames: {},\n    };\n\n  return {\n    style: {\n      transform: \"unset\",\n      height: \"unset\",\n      width: \"unset\",\n      \"max-height\": \"unset\",\n      \"max-width\": \"unset\",\n    },\n    classNames: { \"uifw-preview-enableMaximizedWidget_floatingWidget\": true },\n  };\n}\n\n/** @internal */\nexport function useMaximizedWidgetTabBarHandle() {\n  const isMaximizedWidget = useIsMaximizedWidget();\n  return {\n    \"uifw-preview-enableMaximizedWidget_widget-tabBar\": isMaximizedWidget,\n  };\n}\n"]}

package/lib/esm/appui-react/preview/enable-maximized-widget/useMaximizedWidget.scss

@@ -0,0 +1,36 @@
+/*---------------------------------------------------------------------------------------------
+ * 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";
+
+@layer appui.preview.enable-maximized-widget {
+  .uifw-preview-enableMaximizedWidget_panel-layout {
+    grid-row: 1 / -1;
+    grid-column: 1 / -1;
+
+    z-index: uicore-get-z-index(dragged-widget) + 1;
+  }
+
+  .uifw-preview-enableMaximizedWidget_panel {
+    height: 100%;
+  }
+
+  .uifw-preview-enableMaximizedWidget_section {
+    flex: 1;
+  }
+
+  .uifw-preview-enableMaximizedWidget_section-sibling {
+    display: none;
+  }
+
+  .uifw-preview-enableMaximizedWidget_floatingWidget {
+    opacity: 1;
+    border-radius: unset;
+    inset: 0;
+  }
+
+  .uifw-preview-enableMaximizedWidget_widget-tabBar {
+    pointer-events: none;
+  }
+}

package/lib/esm/appui-react/{layout/widget → preview/horizontal-panel-alignment}/PreviewHorizontalPanelAlign.d.ts

@@ -3,18 +3,16 @@
  */
 import * as React from "react";
 import { HorizontalAlignment } from "@itwin/core-react";
-import type { PanelSide } from "../widget-panels/PanelTypes";
-/** Horizontal panel alignment preview feature state.
- * @internal
- */
-export declare function usePreviewHorizontalPanelAlign(): {
+import type { HorizontalPanelSide, PanelSide } from "../../layout/widget-panels/PanelTypes";
+/** @internal */
+export declare const HorizontalPanelAlignContext: React.Context<{
     enabled: boolean;
     alignments: {
         bottom: HorizontalAlignment;
         top: HorizontalAlignment;
     };
     setAlignment: (panel: PanelSide | undefined, alignment: HorizontalAlignment) => void;
-};
+}>;
 /** Preview horizontal panel alignment feature provider.
  * @internal
  */

package/lib/esm/appui-react/preview/horizontal-panel-alignment/PreviewHorizontalPanelAlign.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewHorizontalPanelAlign.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/preview/horizontal-panel-alignment/PreviewHorizontalPanelAlign.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAMxD,OAAO,KAAK,EACV,mBAAmB,EACnB,SAAS,EACV,MAAM,uCAAuC,CAAC;AAY/C,gBAAgB;AAChB,eAAO,MAAM,2BAA2B;aAC7B,OAAO;;;;;0BAKP,SAAS,GAAG,SAAS,aACjB,mBAAmB,KAC3B,IAAI;EAKT,CAAC;AAEH;;GAEG;AACH,wBAAgB,0CAA0C,CAAC,EACzD,OAAO,EACP,QAAQ,GACT,EAAE;IACD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,qBA4BA;AA6DD,gBAAgB;AAChB,wBAAgB,iCAAiC,sBAgDhD;AAED,gBAAgB;AAChB,wBAAgB,6BAA6B,YAW5C"}

package/lib/esm/appui-react/{layout/widget → preview/horizontal-panel-alignment}/PreviewHorizontalPanelAlign.js

@@ -9,26 +9,22 @@ import * as React from "react";
 import { assert } from "@itwin/core-bentley";
 import { HorizontalAlignment } from "@itwin/core-react";
 import { DropdownMenu, MenuItem } from "@itwin/itwinui-react";
-import { isHorizontalPanelSide, PanelSideContext, } from "../widget-panels/Panel";
-import { useIsMainPanelWidget } from "./Buttons";
-import { WidgetActionDropdownContext } from "../../preview/widget-action-dropdown/MoreButton";
-import { TabBarButton } from "./Button";
+import { isHorizontalPanelSide, PanelSideContext, } from "../../layout/widget-panels/Panel";
+import { WidgetActionDropdownContext } from "../widget-action-dropdown/MoreButton";
+import { TabBarButton } from "../../layout/widget/Button";
+import { useMainPanelWidgetId } from "../../layout/widget/usePanelWidgetId";
+import { useIsMaximizedWidget } from "../enable-maximized-widget/useMaximizedWidget";
 /** Default value used when not provided or disabled. */
 const defaultAlignments = {
     top: HorizontalAlignment.Justify,
     bottom: HorizontalAlignment.Justify,
 };
-const HorizontalPanelAlignContext = React.createContext({
+/** @internal */
+export const HorizontalPanelAlignContext = React.createContext({
     enabled: false,
     alignments: defaultAlignments,
     setAlignment: () => { },
 });
-/** Horizontal panel alignment preview feature state.
- * @internal
- */
-export function usePreviewHorizontalPanelAlign() {
-    return React.useContext(HorizontalPanelAlignContext);
-}
 /** Preview horizontal panel alignment feature provider.
  * @internal
  */
@@ -80,7 +76,7 @@ export function PreviewHorizontalPanelAlignButton() {
     const side = React.useContext(PanelSideContext);
     assert(!!side);
     assert(isHorizontalPanelSide(side));
-    const { alignments, setAlignment } = usePreviewHorizontalPanelAlign();
+    const { alignments, setAlignment } = React.useContext(HorizontalPanelAlignContext);
     const title = "Align panel";
     const getMenuItems = (onClose) => [
         HorizontalAlignment.Justify,
@@ -90,7 +86,7 @@ export function PreviewHorizontalPanelAlignButton() {
     ].map((align) => {
         return (React.createElement(MenuItem, { key: align, onClick: () => {
                 setAlignment(side, align);
-                onClose?.();
+                onClose === null || onClose === void 0 ? void 0 : onClose();
             }, icon: getIcon(side, align), isSelected: alignments[side] === align }, capitalize(align)));
     });
     const dropdownContext = React.useContext(WidgetActionDropdownContext);
@@ -103,11 +99,12 @@ export function PreviewHorizontalPanelAlignButton() {
 /** @internal */
 export function useHorizontalPanelAlignButton() {
     const side = React.useContext(PanelSideContext);
-    const { enabled } = usePreviewHorizontalPanelAlign();
-    const isMainPanelWidget = useIsMainPanelWidget();
-    return !!(enabled &&
-        side &&
-        isHorizontalPanelSide(side) &&
-        isMainPanelWidget);
+    const { enabled } = React.useContext(HorizontalPanelAlignContext);
+    const isMainPanelWidget = !!useMainPanelWidgetId();
+    const isMaximizedWidget = useIsMaximizedWidget();
+    if (!side)
+        return false;
+    const isHorizontalPanel = isHorizontalPanelSide(side);
+    return (enabled && isHorizontalPanel && isMainPanelWidget && !isMaximizedWidget);
 }
 //# sourceMappingURL=PreviewHorizontalPanelAlign.js.map

package/lib/esm/appui-react/preview/horizontal-panel-alignment/PreviewHorizontalPanelAlign.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewHorizontalPanelAlign.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/horizontal-panel-alignment/PreviewHorizontalPanelAlign.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 * as React from \"react\";\nimport { assert } from \"@itwin/core-bentley\";\nimport { HorizontalAlignment } from \"@itwin/core-react\";\nimport { DropdownMenu, MenuItem } from \"@itwin/itwinui-react\";\nimport {\n  isHorizontalPanelSide,\n  PanelSideContext,\n} from \"../../layout/widget-panels/Panel\";\nimport type {\n  HorizontalPanelSide,\n  PanelSide,\n} from \"../../layout/widget-panels/PanelTypes\";\nimport { WidgetActionDropdownContext } from \"../widget-action-dropdown/MoreButton\";\nimport { TabBarButton } from \"../../layout/widget/Button\";\nimport { useMainPanelWidgetId } from \"../../layout/widget/usePanelWidgetId\";\nimport { useIsMaximizedWidget } from \"../enable-maximized-widget/useMaximizedWidget\";\n\n/** Default value used when not provided or disabled. */\nconst defaultAlignments = {\n  top: HorizontalAlignment.Justify,\n  bottom: HorizontalAlignment.Justify,\n};\n\n/** @internal */\nexport const HorizontalPanelAlignContext = React.createContext<{\n  enabled: boolean;\n  alignments: {\n    [side in HorizontalPanelSide]: HorizontalAlignment;\n  };\n  setAlignment: (\n    panel: PanelSide | undefined,\n    alignment: HorizontalAlignment\n  ) => void;\n}>({\n  enabled: false,\n  alignments: defaultAlignments,\n  setAlignment: () => {},\n});\n\n/** Preview horizontal panel alignment feature provider.\n * @internal\n */\nexport function PreviewHorizontalPanelAlignFeatureProvider({\n  enabled,\n  children,\n}: {\n  enabled?: boolean;\n  children?: React.ReactNode;\n}) {\n  const [alignments, setAlignments] = React.useState<{\n    [x in HorizontalPanelSide]: HorizontalAlignment;\n  }>({\n    top: HorizontalAlignment.Justify,\n    bottom: HorizontalAlignment.Justify,\n  });\n  const setAlignment = React.useCallback(\n    (panel: PanelSide | undefined, alignment: HorizontalAlignment) => {\n      if (!panel || !isHorizontalPanelSide(panel)) return;\n      setAlignments((prev) => ({\n        ...prev,\n        [panel]: alignment,\n      }));\n    },\n    []\n  );\n  return (\n    <HorizontalPanelAlignContext.Provider\n      value={{\n        enabled: !!enabled,\n        alignments: enabled ? alignments : defaultAlignments,\n        setAlignment,\n      }}\n    >\n      {children}\n    </HorizontalPanelAlignContext.Provider>\n  );\n}\n\nfunction SvgSide(props: React.SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"1rem\"\n      height=\"1rem\"\n      viewBox=\"0 0 16 16\"\n      fill=\"var(--iui-color-icon-muted, currentColor)\"\n      {...props}\n    >\n      <path d=\"M0 2v12h16V2H0Zm11 7H1V3h10v6Zm4 4h-3V3h3v10Z\" />\n    </svg>\n  );\n}\n\nfunction SvgJustify(props: React.SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"1rem\"\n      height=\"1rem\"\n      viewBox=\"0 0 16 16\"\n      fill=\"var(--iui-color-icon-muted, currentColor)\"\n      {...props}\n    >\n      <path d=\"M0 2v12h16V2H0Zm4 7H1V3h3v6Zm1 0V3h6v6H5Zm10 0h-3V3h3v6Z\" />\n    </svg>\n  );\n}\n\nfunction SvgCenter(props: React.SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"1rem\"\n      height=\"1rem\"\n      viewBox=\"0 0 16 16\"\n      fill=\"var(--iui-color-icon-muted, currentColor)\"\n      {...props}\n    >\n      <path d=\"M0 2v12h16V2H0Zm4 11H1V3h3v10Zm1-4V3h6v6H5Zm10 4h-3V3h3v10Z\" />\n    </svg>\n  );\n}\n\nfunction getIcon(side: HorizontalPanelSide, alignment: HorizontalAlignment) {\n  const scaleY = side === \"top\" ? \"-1\" : \"1\";\n  if (alignment === HorizontalAlignment.Justify)\n    return <SvgJustify transform={`scale(1, ${scaleY})`} />;\n  if (alignment === HorizontalAlignment.Center)\n    return <SvgCenter transform={`scale(1, ${scaleY})`} />;\n  const scaleX = alignment === HorizontalAlignment.Left ? \"1\" : \"-1\";\n  return <SvgSide transform={`scale(${scaleX}, ${scaleY})`} />;\n}\n\nfunction capitalize(s: string) {\n  return s.charAt(0).toUpperCase() + s.slice(1);\n}\n\n/** @internal */\nexport function PreviewHorizontalPanelAlignButton() {\n  const side = React.useContext(PanelSideContext);\n  assert(!!side);\n  assert(isHorizontalPanelSide(side));\n  const { alignments, setAlignment } = React.useContext(\n    HorizontalPanelAlignContext\n  );\n  const title = \"Align panel\";\n\n  const getMenuItems = (onClose?: () => void) =>\n    [\n      HorizontalAlignment.Justify,\n      HorizontalAlignment.Center,\n      HorizontalAlignment.Left,\n      HorizontalAlignment.Right,\n    ].map((align) => {\n      return (\n        <MenuItem\n          key={align}\n          onClick={() => {\n            setAlignment(side, align);\n            onClose?.();\n          }}\n          icon={getIcon(side, align)}\n          isSelected={alignments[side] === align}\n        >\n          {capitalize(align)}\n        </MenuItem>\n      );\n    });\n  const dropdownContext = React.useContext(WidgetActionDropdownContext);\n  if (dropdownContext !== undefined) {\n    return (\n      <MenuItem\n        icon={getIcon(side, alignments[side])}\n        subMenuItems={getMenuItems()}\n      >\n        {title}\n      </MenuItem>\n    );\n  }\n  return (\n    <DropdownMenu menuItems={(close) => getMenuItems(close)}>\n      <TabBarButton title={title}>\n        {getIcon(side, alignments[side])}\n      </TabBarButton>\n    </DropdownMenu>\n  );\n}\n\n/** @internal */\nexport function useHorizontalPanelAlignButton() {\n  const side = React.useContext(PanelSideContext);\n  const { enabled } = React.useContext(HorizontalPanelAlignContext);\n  const isMainPanelWidget = !!useMainPanelWidgetId();\n  const isMaximizedWidget = useIsMaximizedWidget();\n\n  if (!side) return false;\n  const isHorizontalPanel = isHorizontalPanelSide(side);\n  return (\n    enabled && isHorizontalPanel && isMainPanelWidget && !isMaximizedWidget\n  );\n}\n"]}

package/lib/esm/appui-react/preview/horizontal-panel-alignment/useHorizontalPanelAlignment.d.ts

@@ -0,0 +1,19 @@
+/** @packageDocumentation
+ * @module WidgetPanels
+ */
+import "./useHorizontalPanelAlignment.scss";
+import type { PanelSide } from "../../layout/widget-panels/PanelTypes";
+/** @internal */
+export declare function useHorizontalPanelAlignment(side: PanelSide): {
+    attributes: {
+        "data-preview-horizontal-panel-align-top": import("@itwin/core-react").HorizontalAlignment;
+        "data-preview-horizontal-panel-align-bottom": import("@itwin/core-react").HorizontalAlignment;
+    };
+    classNames: {
+        [x: string]: boolean;
+    };
+} | {
+    attributes?: undefined;
+    classNames?: undefined;
+};
+//# sourceMappingURL=useHorizontalPanelAlignment.d.ts.map

package/lib/esm/appui-react/preview/horizontal-panel-alignment/useHorizontalPanelAlignment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHorizontalPanelAlignment.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/preview/horizontal-panel-alignment/useHorizontalPanelAlignment.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,oCAAoC,CAAC;AAG5C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAEvE,gBAAgB;AAChB,wBAAgB,2BAA2B,CAAC,IAAI,EAAE,SAAS;;;;;;;;;;;EAc1D"}

package/lib/esm/appui-react/preview/horizontal-panel-alignment/useHorizontalPanelAlignment.js

@@ -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.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module WidgetPanels
+ */
+import "./useHorizontalPanelAlignment.scss";
+import * as React from "react";
+import { HorizontalPanelAlignContext } from "./PreviewHorizontalPanelAlign";
+/** @internal */
+export function useHorizontalPanelAlignment(side) {
+    const { enabled, alignments } = React.useContext(HorizontalPanelAlignContext);
+    return enabled
+        ? {
+            attributes: {
+                "data-preview-horizontal-panel-align-top": alignments.top,
+                "data-preview-horizontal-panel-align-bottom": alignments.bottom,
+            },
+            classNames: {
+                [`uifw-preview-horizontalPanelAlignment_${side}`]: true,
+            },
+        }
+        : {};
+}
+//# sourceMappingURL=useHorizontalPanelAlignment.js.map

package/lib/esm/appui-react/preview/horizontal-panel-alignment/useHorizontalPanelAlignment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHorizontalPanelAlignment.js","sourceRoot":"","sources":["../../../../../src/appui-react/preview/horizontal-panel-alignment/useHorizontalPanelAlignment.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,oCAAoC,CAAC;AAC5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAG5E,gBAAgB;AAChB,MAAM,UAAU,2BAA2B,CAAC,IAAe;IACzD,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,2BAA2B,CAAC,CAAC;IAE9E,OAAO,OAAO;QACZ,CAAC,CAAC;YACE,UAAU,EAAE;gBACV,yCAAyC,EAAE,UAAU,CAAC,GAAG;gBACzD,4CAA4C,EAAE,UAAU,CAAC,MAAM;aAChE;YACD,UAAU,EAAE;gBACV,CAAC,yCAAyC,IAAI,EAAE,CAAC,EAAE,IAAI;aACxD;SACF;QACH,CAAC,CAAC,EAAE,CAAC;AACT,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 \"./useHorizontalPanelAlignment.scss\";\nimport * as React from \"react\";\nimport { HorizontalPanelAlignContext } from \"./PreviewHorizontalPanelAlign\";\nimport type { PanelSide } from \"../../layout/widget-panels/PanelTypes\";\n\n/** @internal */\nexport function useHorizontalPanelAlignment(side: PanelSide) {\n  const { enabled, alignments } = React.useContext(HorizontalPanelAlignContext);\n\n  return enabled\n    ? {\n        attributes: {\n          \"data-preview-horizontal-panel-align-top\": alignments.top,\n          \"data-preview-horizontal-panel-align-bottom\": alignments.bottom,\n        },\n        classNames: {\n          [`uifw-preview-horizontalPanelAlignment_${side}`]: true,\n        },\n      }\n    : {};\n}\n"]}