@itwin/appui-react 4.17.0 → 5.0.0-dev.2

package/lib/appui-react/layout/widget/TabBar.js

@@ -0,0 +1,126 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 "./TabBar.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { assert } from "@itwin/core-bentley";
+import { Timer } from "@itwin/core-react";
+import { Point } from "@itwin/core-react/internal";
+import { useDragWidget } from "../base/DragManager.js";
+import { NineZoneDispatchContext } from "../base/NineZone.js";
+import { usePointerCaptor } from "../base/usePointerCaptor.js";
+import { TabBarButtons } from "./Buttons.js";
+import { WidgetTabs } from "./Tabs.js";
+import { WidgetIdContext } from "./Widget.js";
+import { useDoubleClick } from "../widget-panels/Grip.js";
+import { useFloatingWidgetId } from "./FloatingWidget.js";
+import { useMaximizedWidgetTabBarHandle } from "../../preview/enable-maximized-widget/useMaximizedWidget.js";
+/** @internal */
+export function WidgetTabBar(props) {
+    const dispatch = React.useContext(NineZoneDispatchContext);
+    const id = React.useContext(WidgetIdContext);
+    const floatingWidgetId = useFloatingWidgetId();
+    assert(!!id);
+    const widgetId = floatingWidgetId === undefined ? id : floatingWidgetId;
+    const handleDoubleClick = React.useCallback(() => {
+        floatingWidgetId &&
+            dispatch({
+                type: "FLOATING_WIDGET_CLEAR_USER_SIZED",
+                id: floatingWidgetId,
+            });
+    }, [dispatch, floatingWidgetId]);
+    const handleActionAreaClick = useDoubleClick(handleDoubleClick);
+    const onDrag = React.useCallback((dragBy) => {
+        floatingWidgetId !== undefined &&
+            dispatch({
+                type: "WIDGET_DRAG",
+                dragBy,
+                floatingWidgetId,
+            });
+    }, [dispatch, floatingWidgetId]);
+    const onDragEnd = React.useCallback((target) => {
+        floatingWidgetId !== undefined && handleActionAreaClick();
+        floatingWidgetId !== undefined &&
+            dispatch({
+                type: "WIDGET_DRAG_END",
+                floatingWidgetId,
+                target,
+            });
+    }, [dispatch, floatingWidgetId, handleActionAreaClick]);
+    const handleWidgetDragStart = useDragWidget({
+        widgetId,
+        onDrag,
+        onDragEnd,
+    });
+    const containerRef = React.useRef(null);
+    const handleDragStart = React.useCallback((initialPointerPosition, pointerPosition) => {
+        handleWidgetDragStart({
+            initialPointerPosition,
+            pointerPosition,
+        });
+    }, [handleWidgetDragStart]);
+    const handleTouchStart = React.useCallback(() => {
+        floatingWidgetId &&
+            dispatch({
+                type: "FLOATING_WIDGET_BRING_TO_FRONT",
+                id: floatingWidgetId,
+            });
+    }, [dispatch, floatingWidgetId]);
+    const ref = useDrag(handleDragStart, undefined, undefined, handleTouchStart, handleDoubleClick);
+    const maximizedWidgetHandle = useMaximizedWidgetTabBarHandle();
+    const className = classnames("nz-widget-tabBar", props.separator && "nz-separator");
+    const handleClassName = classnames("nz-handle", maximizedWidgetHandle);
+    return (React.createElement("div", { ref: containerRef, className: className },
+        React.createElement("div", { className: handleClassName, ref: ref }),
+        React.createElement(WidgetTabs, null),
+        React.createElement(TabBarButtons, null)));
+}
+/** Hook to control drag interactions.
+ * Starts drag interaction after pointer moves or after timeout.
+ * @internal
+ */
+export function useDrag(onDragStart, onDrag, onDragEnd, onTouchStart, onDoubleClick) {
+    // eslint-disable-next-line deprecation/deprecation
+    const doubleClickTimer = React.useRef(new Timer(300));
+    const clickCount = React.useRef(0);
+    const initialPointerPosition = React.useRef();
+    React.useEffect(() => {
+        const handleExecute = () => {
+            if (clickCount.current === 2)
+                onDoubleClick && onDoubleClick();
+            clickCount.current = 0;
+        };
+        const timer = doubleClickTimer.current;
+        timer.setOnExecute(handleExecute);
+        return () => {
+            timer.setOnExecute(undefined);
+        };
+    }, [onDoubleClick]);
+    const handlePointerDown = React.useCallback((args, e) => {
+        initialPointerPosition.current = new Point(args.clientX, args.clientY);
+        e.type === "touchstart" && onTouchStart && onTouchStart();
+    }, [onTouchStart]);
+    const handlePointerMove = React.useCallback((args) => {
+        if (initialPointerPosition.current) {
+            onDragStart &&
+                onDragStart(initialPointerPosition.current, new Point(args.clientX, args.clientY));
+            initialPointerPosition.current = undefined;
+            return;
+        }
+        onDrag && onDrag(new Point(args.clientX, args.clientY));
+    }, [onDragStart, onDrag]);
+    const handlePointerUp = React.useCallback(() => {
+        clickCount.current++;
+        doubleClickTimer.current.start();
+        initialPointerPosition.current = undefined;
+        onDragEnd && onDragEnd();
+    }, [onDragEnd]);
+    const ref = usePointerCaptor(handlePointerDown, handlePointerMove, handlePointerUp);
+    return ref;
+}
+//# sourceMappingURL=TabBar.js.map

package/lib/appui-react/layout/widget/TabBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBar.js","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget/TabBar.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 \"./TabBar.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { assert } from \"@itwin/core-bentley\";\nimport { Timer } from \"@itwin/core-react\";\nimport { Point } from \"@itwin/core-react/internal\";\nimport type { UseDragWidgetArgs } from \"../base/DragManager.js\";\nimport { useDragWidget } from \"../base/DragManager.js\";\nimport { NineZoneDispatchContext } from \"../base/NineZone.js\";\nimport type {\n  PointerCaptorArgs,\n  PointerCaptorEvent,\n} from \"../base/usePointerCaptor.js\";\nimport { usePointerCaptor } from \"../base/usePointerCaptor.js\";\nimport { TabBarButtons } from \"./Buttons.js\";\nimport { WidgetTabs } from \"./Tabs.js\";\nimport { WidgetIdContext } from \"./Widget.js\";\nimport { useDoubleClick } from \"../widget-panels/Grip.js\";\nimport { useFloatingWidgetId } from \"./FloatingWidget.js\";\nimport { useMaximizedWidgetTabBarHandle } from \"../../preview/enable-maximized-widget/useMaximizedWidget.js\";\n\n/** @internal */\nexport interface WidgetTabBarProps {\n  separator?: boolean;\n}\n\n/** @internal */\nexport function WidgetTabBar(props: WidgetTabBarProps) {\n  const dispatch = React.useContext(NineZoneDispatchContext);\n  const id = React.useContext(WidgetIdContext);\n  const floatingWidgetId = useFloatingWidgetId();\n  assert(!!id);\n  const widgetId = floatingWidgetId === undefined ? id : floatingWidgetId;\n  const handleDoubleClick = React.useCallback(() => {\n    floatingWidgetId &&\n      dispatch({\n        type: \"FLOATING_WIDGET_CLEAR_USER_SIZED\",\n        id: floatingWidgetId,\n      });\n  }, [dispatch, floatingWidgetId]);\n  const handleActionAreaClick = useDoubleClick(handleDoubleClick);\n\n  const onDrag = React.useCallback<NonNullable<UseDragWidgetArgs[\"onDrag\"]>>(\n    (dragBy) => {\n      floatingWidgetId !== undefined &&\n        dispatch({\n          type: \"WIDGET_DRAG\",\n          dragBy,\n          floatingWidgetId,\n        });\n    },\n    [dispatch, floatingWidgetId]\n  );\n  const onDragEnd = React.useCallback<\n    NonNullable<UseDragWidgetArgs[\"onDragEnd\"]>\n  >(\n    (target) => {\n      floatingWidgetId !== undefined && handleActionAreaClick();\n      floatingWidgetId !== undefined &&\n        dispatch({\n          type: \"WIDGET_DRAG_END\",\n          floatingWidgetId,\n          target,\n        });\n    },\n    [dispatch, floatingWidgetId, handleActionAreaClick]\n  );\n  const handleWidgetDragStart = useDragWidget({\n    widgetId,\n    onDrag,\n    onDragEnd,\n  });\n\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const handleDragStart = React.useCallback(\n    (initialPointerPosition: Point, pointerPosition: Point) => {\n      handleWidgetDragStart({\n        initialPointerPosition,\n        pointerPosition,\n      });\n    },\n    [handleWidgetDragStart]\n  );\n  const handleTouchStart = React.useCallback(() => {\n    floatingWidgetId &&\n      dispatch({\n        type: \"FLOATING_WIDGET_BRING_TO_FRONT\",\n        id: floatingWidgetId,\n      });\n  }, [dispatch, floatingWidgetId]);\n  const ref = useDrag(\n    handleDragStart,\n    undefined,\n    undefined,\n    handleTouchStart,\n    handleDoubleClick\n  );\n  const maximizedWidgetHandle = useMaximizedWidgetTabBarHandle();\n  const className = classnames(\n    \"nz-widget-tabBar\",\n    props.separator && \"nz-separator\"\n  );\n  const handleClassName = classnames(\"nz-handle\", maximizedWidgetHandle);\n  return (\n    <div ref={containerRef} className={className}>\n      <div className={handleClassName} ref={ref} />\n      <WidgetTabs />\n      <TabBarButtons />\n    </div>\n  );\n}\n\n/** Hook to control drag interactions.\n * Starts drag interaction after pointer moves or after timeout.\n * @internal\n */\nexport function useDrag<T extends HTMLElement>(\n  onDragStart?: (initialPointerPosition: Point, pointerPosition: Point) => void,\n  onDrag?: (position: Point) => void,\n  onDragEnd?: () => void,\n  onTouchStart?: () => void,\n  onDoubleClick?: () => void\n) {\n  // eslint-disable-next-line deprecation/deprecation\n  const doubleClickTimer = React.useRef(new Timer(300));\n  const clickCount = React.useRef(0);\n  const initialPointerPosition = React.useRef<Point>();\n\n  React.useEffect(() => {\n    const handleExecute = () => {\n      if (clickCount.current === 2) onDoubleClick && onDoubleClick();\n      clickCount.current = 0;\n    };\n    const timer = doubleClickTimer.current;\n    timer.setOnExecute(handleExecute);\n    return () => {\n      timer.setOnExecute(undefined);\n    };\n  }, [onDoubleClick]);\n\n  const handlePointerDown = React.useCallback(\n    (args: PointerCaptorArgs, e: PointerCaptorEvent) => {\n      initialPointerPosition.current = new Point(args.clientX, args.clientY);\n      e.type === \"touchstart\" && onTouchStart && onTouchStart();\n    },\n    [onTouchStart]\n  );\n  const handlePointerMove = React.useCallback(\n    (args: PointerCaptorArgs) => {\n      if (initialPointerPosition.current) {\n        onDragStart &&\n          onDragStart(\n            initialPointerPosition.current,\n            new Point(args.clientX, args.clientY)\n          );\n        initialPointerPosition.current = undefined;\n        return;\n      }\n      onDrag && onDrag(new Point(args.clientX, args.clientY));\n    },\n    [onDragStart, onDrag]\n  );\n  const handlePointerUp = React.useCallback(() => {\n    clickCount.current++;\n    doubleClickTimer.current.start();\n    initialPointerPosition.current = undefined;\n    onDragEnd && onDragEnd();\n  }, [onDragEnd]);\n  const ref = usePointerCaptor<T>(\n    handlePointerDown,\n    handlePointerMove,\n    handlePointerUp\n  );\n  return ref;\n}\n"]}

package/lib/appui-react/layout/widget/TabBar.scss

@@ -0,0 +1,29 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "variables" as *;
+
+@layer appui.component {
+  .nz-widget-tabBar {
+    background: var(--iui-color-background-backdrop);
+    display: flex;
+    border-radius: $nz-widget-tab-border-radius $nz-widget-tab-border-radius 0 0;
+    flex: 0 0 auto;
+    position: relative;
+    height: $nz-widget-tab-height;
+
+    &.nz-separator {
+      border-bottom: 1px solid var(--iui-color-border);
+    }
+
+    > .nz-handle {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      cursor: auto;
+      user-select: none;
+      -webkit-user-select: none;
+    }
+  }
+}

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget/Tabs.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,aAAa,CAAC;AACrB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,gBAAgB;AAChB,wBAAgB,UAAU,sBA4FzB;AAED,UAAU,0BAA0B;IAClC,QAAQ,CAAC,gBAAgB,EAAE,OAAO,CAAC;IACnC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,gBAAgB;AAChB,eAAO,MAAM,sBAAsB,uDAEvB,CAAC;AAGb,gBAAgB;AAChB,MAAM,WAAW,mCAAmC;IAClD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,gBAAgB,EAAE,OAAO,CAAC;CAC3B;AAED,gBAAgB;AAChB,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,mCAAmC,qBAY3C"}

package/lib/appui-react/layout/widget/Tabs.js

@@ -0,0 +1,83 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 "./Tabs.scss";
+import * as React from "react";
+import { assert } from "@itwin/core-bentley";
+import { useResizeObserver } from "@itwin/core-react/internal";
+import { ShowWidgetIconContext } from "../base/NineZone.js";
+import { getChildKey, useOverflow } from "../tool-settings/Docked.js";
+import { isHorizontalPanelSide, PanelSideContext, } from "../widget-panels/Panel.js";
+import { WidgetOverflow } from "./Overflow.js";
+import { WidgetTabProvider } from "./Tab.js";
+import { TitleBarTarget } from "../target/TitleBarTarget.js";
+import { useLayout } from "../base/LayoutStore.js";
+import { WidgetIdContext } from "./Widget.js";
+import { getWidgetState } from "../state/internal/WidgetStateHelpers.js";
+/** @internal */
+export function WidgetTabs() {
+    const side = React.useContext(PanelSideContext);
+    const widgetId = React.useContext(WidgetIdContext);
+    const showWidgetIcon = React.useContext(ShowWidgetIconContext);
+    assert(!!widgetId);
+    const tabIds = useLayout((state) => getWidgetState(state, widgetId).tabs);
+    const activeTabId = useLayout((state) => getWidgetState(state, widgetId).activeTabId);
+    const minimized = useLayout((state) => getWidgetState(state, widgetId).minimized);
+    const [showOnlyTabIcon, setShowOnlyTabIcon] = React.useState(false);
+    const activeTabIndex = tabIds.findIndex((id) => id === activeTabId);
+    const children = React.useMemo(() => {
+        return tabIds.map((id, index, array) => {
+            const firstInactive = activeTabIndex + 1 === index;
+            return (React.createElement(WidgetTabProvider, { key: id, id: id, first: index === 0, firstInactive: firstInactive, last: index === array.length - 1, showOnlyTabIcon: showOnlyTabIcon && showWidgetIcon }));
+        });
+    }, [tabIds, activeTabIndex, showOnlyTabIcon, showWidgetIcon]);
+    const [overflown, handleResize, handleOverflowResize, handleEntryResize] = useOverflow(children, activeTabIndex);
+    const horizontal = side && isHorizontalPanelSide(side);
+    const handleContainerResize = React.useCallback((w) => {
+        if (showWidgetIcon)
+            setShowOnlyTabIcon(tabIds.length * 158 > w); // 158px per text tab
+        handleResize && handleResize(w);
+    }, [handleResize, showWidgetIcon, tabIds]);
+    const ref = useResizeObserver(handleContainerResize);
+    const childrenArray = React.useMemo(() => React.Children.toArray(children), [children]);
+    const tabChildren = childrenArray.reduce((acc, child, index) => {
+        const key = getChildKey(child, index);
+        if (!overflown) {
+            acc.push([key, child]);
+            return acc;
+        }
+        if (horizontal && minimized)
+            return acc;
+        overflown.indexOf(key) < 0 && acc.push([key, child]);
+        return acc;
+    }, []);
+    const panelChildren = tabChildren.length !== childrenArray.length
+        ? childrenArray.map((child, index) => {
+            const key = getChildKey(child, index);
+            return [key, child];
+        })
+        : [];
+    return (React.createElement("div", { className: "nz-widget-tabs", ref: ref, role: "tablist" },
+        tabChildren.map(([key, child], index, array) => {
+            return (React.createElement(WidgetTabsEntryProvider, { children: child, key: key, id: key, lastNotOverflown: index === array.length - 1 && panelChildren.length > 0, getOnResize: handleEntryResize }));
+        }),
+        React.createElement(TitleBarTarget, null),
+        React.createElement(WidgetOverflow, { hidden: overflown && panelChildren.length === 0, onResize: handleOverflowResize }, panelChildren.map(([key, child]) => {
+            return React.createElement(React.Fragment, { key: key }, child);
+        }))));
+}
+/** @internal */
+export const WidgetTabsEntryContext = React.createContext(undefined);
+WidgetTabsEntryContext.displayName = "nz:WidgetTabsEntryContext";
+/** @internal */
+export function WidgetTabsEntryProvider(props) {
+    return (React.createElement(WidgetTabsEntryContext.Provider, { value: {
+            lastNotOverflown: props.lastNotOverflown,
+            onResize: props.getOnResize(props.id),
+        } }, props.children));
+}
+//# sourceMappingURL=Tabs.js.map

package/lib/appui-react/layout/widget/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget/Tabs.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 \"./Tabs.scss\";\nimport * as React from \"react\";\nimport { assert } from \"@itwin/core-bentley\";\nimport { useResizeObserver } from \"@itwin/core-react/internal\";\nimport { ShowWidgetIconContext } from \"../base/NineZone.js\";\nimport { getChildKey, useOverflow } from \"../tool-settings/Docked.js\";\nimport {\n  isHorizontalPanelSide,\n  PanelSideContext,\n} from \"../widget-panels/Panel.js\";\nimport { WidgetOverflow } from \"./Overflow.js\";\nimport { WidgetTabProvider } from \"./Tab.js\";\nimport { TitleBarTarget } from \"../target/TitleBarTarget.js\";\nimport { useLayout } from \"../base/LayoutStore.js\";\nimport { WidgetIdContext } from \"./Widget.js\";\nimport { getWidgetState } from \"../state/internal/WidgetStateHelpers.js\";\n\n/** @internal */\nexport function WidgetTabs() {\n  const side = React.useContext(PanelSideContext);\n  const widgetId = React.useContext(WidgetIdContext);\n  const showWidgetIcon = React.useContext(ShowWidgetIconContext);\n  assert(!!widgetId);\n  const tabIds = useLayout((state) => getWidgetState(state, widgetId).tabs);\n  const activeTabId = useLayout(\n    (state) => getWidgetState(state, widgetId).activeTabId\n  );\n  const minimized = useLayout(\n    (state) => getWidgetState(state, widgetId).minimized\n  );\n  const [showOnlyTabIcon, setShowOnlyTabIcon] = React.useState(false);\n\n  const activeTabIndex = tabIds.findIndex((id) => id === activeTabId);\n  const children = React.useMemo<React.ReactNode>(() => {\n    return tabIds.map((id, index, array) => {\n      const firstInactive = activeTabIndex + 1 === index;\n      return (\n        <WidgetTabProvider\n          key={id}\n          id={id}\n          first={index === 0}\n          firstInactive={firstInactive}\n          last={index === array.length - 1}\n          showOnlyTabIcon={showOnlyTabIcon && showWidgetIcon}\n        />\n      );\n    });\n  }, [tabIds, activeTabIndex, showOnlyTabIcon, showWidgetIcon]);\n  const [overflown, handleResize, handleOverflowResize, handleEntryResize] =\n    useOverflow(children, activeTabIndex);\n  const horizontal = side && isHorizontalPanelSide(side);\n  const handleContainerResize = React.useCallback(\n    (w: number) => {\n      if (showWidgetIcon) setShowOnlyTabIcon(tabIds.length * 158 > w); // 158px per text tab\n      handleResize && handleResize(w);\n    },\n    [handleResize, showWidgetIcon, tabIds]\n  );\n\n  const ref = useResizeObserver(handleContainerResize);\n  const childrenArray = React.useMemo(\n    () => React.Children.toArray(children),\n    [children]\n  );\n  const tabChildren = childrenArray.reduce<Array<[string, React.ReactNode]>>(\n    (acc, child, index) => {\n      const key = getChildKey(child, index);\n      if (!overflown) {\n        acc.push([key, child]);\n        return acc;\n      }\n      if (horizontal && minimized) return acc;\n      overflown.indexOf(key) < 0 && acc.push([key, child]);\n      return acc;\n    },\n    []\n  );\n  const panelChildren =\n    tabChildren.length !== childrenArray.length\n      ? childrenArray.map<[string, React.ReactNode]>((child, index) => {\n          const key = getChildKey(child, index);\n          return [key, child];\n        })\n      : [];\n  return (\n    <div className=\"nz-widget-tabs\" ref={ref} role=\"tablist\">\n      {tabChildren.map(([key, child], index, array) => {\n        return (\n          <WidgetTabsEntryProvider\n            children={child} // eslint-disable-line react/no-children-prop\n            key={key}\n            id={key}\n            lastNotOverflown={\n              index === array.length - 1 && panelChildren.length > 0\n            }\n            getOnResize={handleEntryResize}\n          />\n        );\n      })}\n      <TitleBarTarget />\n      <WidgetOverflow\n        hidden={overflown && panelChildren.length === 0}\n        onResize={handleOverflowResize}\n      >\n        {panelChildren.map(([key, child]) => {\n          return <React.Fragment key={key}>{child}</React.Fragment>;\n        })}\n      </WidgetOverflow>\n    </div>\n  );\n}\n\ninterface WidgetTabsEntryContextArgs {\n  readonly lastNotOverflown: boolean;\n  readonly onResize?: (w: number) => void;\n}\n\n/** @internal */\nexport const WidgetTabsEntryContext = React.createContext<\n  WidgetTabsEntryContextArgs | undefined\n>(undefined);\nWidgetTabsEntryContext.displayName = \"nz:WidgetTabsEntryContext\";\n\n/** @internal */\nexport interface WidgetTabsEntryContextProviderProps {\n  children?: React.ReactNode;\n  id: string;\n  getOnResize: (id: string) => (w: number) => void;\n  lastNotOverflown: boolean;\n}\n\n/** @internal */\nexport function WidgetTabsEntryProvider(\n  props: WidgetTabsEntryContextProviderProps\n) {\n  return (\n    <WidgetTabsEntryContext.Provider\n      value={{\n        lastNotOverflown: props.lastNotOverflown,\n        onResize: props.getOnResize(props.id),\n      }}\n    >\n      {props.children}\n    </WidgetTabsEntryContext.Provider>\n  );\n}\n"]}

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolsArea.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget/ToolsArea.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGtE;;GAEG;AAEH,MAAM,WAAW,cAAe,SAAQ,WAAW,EAAE,eAAe;IAClE;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,wCAAwC;IACxC,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,8BAA8B;IAC9B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC1E,8BAA8B;IAC9B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CAC3E;AAED;;;GAGG;AACH,qBAAa,SAAU,SAAQ,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC;IAChD,MAAM;CAgCvB"}

package/lib/appui-react/layout/widget/ToolsArea.js

@@ -0,0 +1,27 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 "./ToolsArea.scss";
+import classnames from "classnames";
+import * as React from "react";
+/** ToolsArea widget is used in ToolsArea (top left) and Navigation (top right) zones of 9-Zone UI.
+ * @note Should be placed in [[Zone]] component.
+ * @internal
+ */
+export class ToolsArea extends React.PureComponent {
+    render() {
+        const button = React.isValidElement(this.props.button)
+            ? React.cloneElement(this.props.button, { small: true })
+            : null; // ensure button is small
+        const className = classnames("nz-tools-widget", this.props.className);
+        return (React.createElement("div", { className: className, style: this.props.style },
+            React.createElement("div", { className: "nz-app-button", onMouseEnter: this.props.onMouseEnter, onMouseLeave: this.props.onMouseLeave }, button),
+            React.createElement("div", { className: "nz-vertical-toolbar-container", onMouseEnter: this.props.onMouseEnter, onMouseLeave: this.props.onMouseLeave }, this.props.verticalToolbar),
+            React.createElement("div", { className: "nz-horizontal-toolbar-container", onMouseEnter: this.props.onMouseEnter, onMouseLeave: this.props.onMouseLeave }, this.props.horizontalToolbar)));
+    }
+}
+//# sourceMappingURL=ToolsArea.js.map

package/lib/appui-react/layout/widget/ToolsArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolsArea.js","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget/ToolsArea.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAwB/B;;;GAGG;AACH,MAAM,OAAO,SAAU,SAAQ,KAAK,CAAC,aAA6B;IAChD,MAAM;QACpB,MAAM,MAAM,GAAG,KAAK,CAAC,cAAc,CAAqB,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;YACxE,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;YACxD,CAAC,CAAC,IAAI,CAAC,CAAC,yBAAyB;QACnC,MAAM,SAAS,GAAG,UAAU,CAAC,iBAAiB,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAEtE,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YAChD,6BACE,SAAS,EAAC,eAAe,EACzB,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,EACrC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,IAEpC,MAAM,CACH;YACN,6BACE,SAAS,EAAC,+BAA+B,EACzC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,EACrC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,IAEpC,IAAI,CAAC,KAAK,CAAC,eAAe,CACvB;YACN,6BACE,SAAS,EAAC,iCAAiC,EAC3C,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,EACrC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,IAEpC,IAAI,CAAC,KAAK,CAAC,iBAAiB,CACzB,CACF,CACP,CAAC;IACJ,CAAC;CACF","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 \"./ToolsArea.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps, NoChildrenProps } from \"@itwin/core-react\";\nimport type { ToolbarButtonProps } from \"./tools/button/Button.js\";\n\n/** Properties of [[ToolsArea]] component.\n * @internal\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface ToolsAreaProps extends CommonProps, NoChildrenProps {\n  /**\n   * Button displayed between horizontal and vertical toolbars.\n   * I.e. [[AppButton]] in ToolsArea zone.\n   */\n  button?: React.ReactNode;\n  /** Horizontal toolbar. See [[Toolbar]] */\n  horizontalToolbar?: React.ReactNode;\n  /** Vertical toolbar. See [[Toolbar]] */\n  verticalToolbar?: React.ReactNode;\n  /** Handler for mouse enter */\n  onMouseEnter?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Handler for mouse leave */\n  onMouseLeave?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n}\n\n/** ToolsArea widget is used in ToolsArea (top left) and Navigation (top right) zones of 9-Zone UI.\n * @note Should be placed in [[Zone]] component.\n * @internal\n */\nexport class ToolsArea extends React.PureComponent<ToolsAreaProps> {\n  public override render() {\n    const button = React.isValidElement<ToolbarButtonProps>(this.props.button)\n      ? React.cloneElement(this.props.button, { small: true })\n      : null; // ensure button is small\n    const className = classnames(\"nz-tools-widget\", this.props.className);\n\n    return (\n      <div className={className} style={this.props.style}>\n        <div\n          className=\"nz-app-button\"\n          onMouseEnter={this.props.onMouseEnter}\n          onMouseLeave={this.props.onMouseLeave}\n        >\n          {button}\n        </div>\n        <div\n          className=\"nz-vertical-toolbar-container\"\n          onMouseEnter={this.props.onMouseEnter}\n          onMouseLeave={this.props.onMouseLeave}\n        >\n          {this.props.verticalToolbar}\n        </div>\n        <div\n          className=\"nz-horizontal-toolbar-container\"\n          onMouseEnter={this.props.onMouseEnter}\n          onMouseLeave={this.props.onMouseLeave}\n        >\n          {this.props.horizontalToolbar}\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/lib/appui-react/layout/widget/ToolsArea.scss

@@ -0,0 +1,51 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "../widgetopacity" as *;
+
+.nz-tools-widget {
+  transition: visibility var(--iui-duration-2) ease,
+    opacity var(--iui-duration-2) ease;
+  box-sizing: border-box;
+  height: 100%;
+  grid-column: 1;
+
+  display: grid;
+  grid-gap: 6px;
+  grid-template:
+    "appButton htools" auto
+    "vtools ." 1fr / auto 1fr;
+  align-items: start;
+  justify-items: start;
+
+  &.nz-hidden {
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  > .nz-app-button {
+    grid-area: appButton;
+
+    pointer-events: auto;
+    @include nz-widget-opacity;
+  }
+
+  > .nz-vertical-toolbar-container {
+    grid-area: vtools;
+
+    height: calc(100% - 60px);
+    display: inline-flex;
+    flex-direction: column;
+    @include nz-widget-opacity;
+  }
+
+  > .nz-horizontal-toolbar-container {
+    grid-area: htools;
+
+    width: 100%;
+    min-width: 0;
+
+    @include nz-widget-opacity;
+  }
+}

package/lib/appui-react/layout/widget/Widget.d.ts

@@ -0,0 +1,39 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import "./Widget.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+import { Rectangle } from "@itwin/core-react/internal";
+import type { WidgetState } from "../state/WidgetState.js";
+import type { SizeProps } from "../../utils/SizeProps.js";
+/** @internal */
+export interface WidgetProviderProps {
+    id: WidgetState["id"];
+    children?: React.ReactNode;
+}
+/** @internal */
+export declare function WidgetProvider(props: WidgetProviderProps): React.JSX.Element;
+/** @internal */
+export interface WidgetProps extends CommonProps {
+    children?: React.ReactNode;
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    onTransitionEnd?(): void;
+    widgetId?: string;
+}
+/** @internal */
+export declare const Widget: React.ForwardRefExoticComponent<WidgetProps & React.RefAttributes<HTMLDivElement>>;
+/** @internal */
+export declare const WidgetIdContext: React.Context<string | undefined>;
+/** @internal */
+export interface WidgetContextArgs {
+    measure: () => Rectangle;
+}
+/** @internal */
+export declare const WidgetContext: React.Context<WidgetContextArgs>;
+/** @internal */
+export declare function restrainInitialWidgetSize(size: SizeProps, nzSize: SizeProps): SizeProps;
+/** @internal */
+export declare function useActiveTabId(): string;
+//# sourceMappingURL=Widget.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Widget.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget/Widget.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,eAAe,CAAC;AAEvB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAW,MAAM,4BAA4B,CAAC;AAQhE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAK3D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAE1D,gBAAgB;AAChB,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,gBAAgB;AAChB,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAMxD;AAED,gBAAgB;AAEhB,MAAM,WAAW,WAAY,SAAQ,WAAW;IAC9C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,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;IAC1E,eAAe,CAAC,IAAI,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,gBAAgB;AAChB,eAAO,MAAM,MAAM,oFA4HlB,CAAC;AAEF,gBAAgB;AAChB,eAAO,MAAM,eAAe,mCAEhB,CAAC;AAGb,gBAAgB;AAChB,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,SAAS,CAAC;CAC1B;AAED,gBAAgB;AAChB,eAAO,MAAM,aAAa,kCAAgD,CAAC;AAM3E,gBAAgB;AAChB,wBAAgB,yBAAyB,CACvC,IAAI,EAAE,SAAS,EACf,MAAM,EAAE,SAAS,GAChB,SAAS,CAOX;AAED,gBAAgB;AAChB,wBAAgB,cAAc,WAO7B"}

package/lib/appui-react/layout/widget/Widget.js

@@ -0,0 +1,140 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 "./Widget.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { assert } from "@itwin/core-bentley";
+import { Rectangle, useRefs } from "@itwin/core-react/internal";
+import { useDragWidget } from "../base/DragManager.js";
+import { getUniqueId, MeasureContext, NineZoneDispatchContext, } from "../base/NineZone.js";
+import { PanelSideContext } from "../widget-panels/Panel.js";
+import { useLayout } from "../base/LayoutStore.js";
+import { getWidgetState } from "../state/internal/WidgetStateHelpers.js";
+import { useFloatingWidgetId } from "./FloatingWidget.js";
+/** @internal */
+export function WidgetProvider(props) {
+    return (React.createElement(WidgetIdContext.Provider, { value: props.id }, props.children));
+}
+/** @internal */
+export const Widget = React.forwardRef(function Widget(props, forwardedRef) {
+    const dispatch = React.useContext(NineZoneDispatchContext);
+    const side = React.useContext(PanelSideContext);
+    const id = React.useContext(WidgetIdContext);
+    const measureNz = React.useContext(MeasureContext);
+    const floatingWidgetId = useFloatingWidgetId();
+    assert(!!id);
+    const { preferredFloatingWidgetSize, userSized } = useLayout((state) => {
+        const widget = getWidgetState(state, id);
+        const tab = state.tabs[widget.activeTabId];
+        return {
+            preferredFloatingWidgetSize: tab.preferredFloatingWidgetSize,
+            userSized: tab.userSized ||
+                (tab.isFloatingWidgetResizable && !!tab.preferredFloatingWidgetSize),
+        };
+    }, true);
+    const elementRef = React.useRef(null);
+    const widgetId = floatingWidgetId === undefined ? id : floatingWidgetId;
+    const onDragStart = React.useCallback((updateId, initialPointerPosition, pointerPosition) => {
+        assert(!!elementRef.current);
+        if (floatingWidgetId !== undefined)
+            return;
+        const nzBounds = measureNz();
+        let bounds = Rectangle.create(elementRef.current.getBoundingClientRect());
+        const size = restrainInitialWidgetSize(bounds.getSize(), nzBounds.getSize());
+        bounds = bounds.setSize(size);
+        if (preferredFloatingWidgetSize) {
+            bounds = bounds.setSize(preferredFloatingWidgetSize);
+        }
+        // Pointer is outside of tab area. Need to re-adjust widget bounds so that tab is behind pointer
+        if (initialPointerPosition.x > bounds.right) {
+            const offset = initialPointerPosition.x - bounds.right + 20;
+            bounds = bounds.offsetX(offset);
+        }
+        const dragOffset = initialPointerPosition.getOffsetTo(pointerPosition);
+        bounds = bounds.offset(dragOffset);
+        // Adjust bounds to be relative to 9z origin
+        bounds = bounds.offset({ x: -nzBounds.left, y: -nzBounds.top });
+        const newFloatingWidgetId = getUniqueId();
+        updateId(newFloatingWidgetId);
+        assert(!!side);
+        dispatch({
+            type: "PANEL_WIDGET_DRAG_START",
+            newFloatingWidgetId,
+            id,
+            bounds,
+            side,
+            userSized,
+        });
+    }, [
+        dispatch,
+        floatingWidgetId,
+        id,
+        side,
+        measureNz,
+        preferredFloatingWidgetSize,
+        userSized,
+    ]);
+    useDragWidget({
+        widgetId,
+        onDragStart,
+    });
+    React.useEffect(() => {
+        const listener = () => {
+            floatingWidgetId &&
+                dispatch({
+                    type: "FLOATING_WIDGET_BRING_TO_FRONT",
+                    id: floatingWidgetId,
+                });
+        };
+        const element = elementRef.current;
+        element?.addEventListener("click", listener);
+        return () => {
+            element?.removeEventListener("click", listener);
+        };
+    }, [dispatch, floatingWidgetId]);
+    const measure = React.useCallback(() => {
+        if (!elementRef.current)
+            return new Rectangle();
+        const bounds = elementRef.current.getBoundingClientRect();
+        return Rectangle.create(bounds);
+    }, []);
+    const widgetContextValue = React.useMemo(() => ({
+        measure,
+    }), [measure]);
+    const ref = useRefs(forwardedRef, elementRef);
+    const className = classnames("nz-widget-widget", props.className);
+    return (React.createElement(WidgetContext.Provider, { value: widgetContextValue },
+        React.createElement("div", { className: className, onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave, onTransitionEnd: props.onTransitionEnd, ref: ref, style: props.style, "data-widget-id": props.widgetId }, props.children)));
+});
+/** @internal */
+export const WidgetIdContext = React.createContext(undefined);
+WidgetIdContext.displayName = "nz:WidgetIdContext";
+/** @internal */
+export const WidgetContext = React.createContext(null);
+WidgetContext.displayName = "nz:WidgetContext";
+const minWidth = 200;
+const minHeight = 200;
+/** @internal */
+export function restrainInitialWidgetSize(size, nzSize) {
+    const width = Math.max(Math.min(nzSize.width / 3, size.width), minWidth);
+    const height = Math.max(Math.min(nzSize.height / 3, size.height), minHeight);
+    return {
+        width,
+        height,
+    };
+}
+/** @internal */
+export function useActiveTabId() {
+    const id = React.useContext(WidgetIdContext);
+    assert(!!id);
+    return useLayout((state) => {
+        const widget = getWidgetState(state, id);
+        return widget.activeTabId;
+    });
+}
+//# sourceMappingURL=Widget.js.map

package/lib/appui-react/layout/widget/Widget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Widget.js","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget/Widget.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 \"./Widget.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { assert } from \"@itwin/core-bentley\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Rectangle, useRefs } from \"@itwin/core-react/internal\";\nimport type { UseDragWidgetArgs } from \"../base/DragManager.js\";\nimport { useDragWidget } from \"../base/DragManager.js\";\nimport {\n  getUniqueId,\n  MeasureContext,\n  NineZoneDispatchContext,\n} from \"../base/NineZone.js\";\nimport type { WidgetState } from \"../state/WidgetState.js\";\nimport { PanelSideContext } from \"../widget-panels/Panel.js\";\nimport { useLayout } from \"../base/LayoutStore.js\";\nimport { getWidgetState } from \"../state/internal/WidgetStateHelpers.js\";\nimport { useFloatingWidgetId } from \"./FloatingWidget.js\";\nimport type { SizeProps } from \"../../utils/SizeProps.js\";\n\n/** @internal */\nexport interface WidgetProviderProps {\n  id: WidgetState[\"id\"];\n  children?: React.ReactNode;\n}\n\n/** @internal */\nexport function WidgetProvider(props: WidgetProviderProps) {\n  return (\n    <WidgetIdContext.Provider value={props.id}>\n      {props.children}\n    </WidgetIdContext.Provider>\n  );\n}\n\n/** @internal */\n// eslint-disable-next-line deprecation/deprecation\nexport interface WidgetProps extends CommonProps {\n  children?: React.ReactNode;\n  onMouseEnter?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  onMouseLeave?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  onTransitionEnd?(): void;\n  widgetId?: string;\n}\n\n/** @internal */\nexport const Widget = React.forwardRef<HTMLDivElement, WidgetProps>(\n  function Widget(props, forwardedRef) {\n    const dispatch = React.useContext(NineZoneDispatchContext);\n    const side = React.useContext(PanelSideContext);\n    const id = React.useContext(WidgetIdContext);\n    const measureNz = React.useContext(MeasureContext);\n    const floatingWidgetId = useFloatingWidgetId();\n    assert(!!id);\n    const { preferredFloatingWidgetSize, userSized } = useLayout((state) => {\n      const widget = getWidgetState(state, id);\n      const tab = state.tabs[widget.activeTabId];\n      return {\n        preferredFloatingWidgetSize: tab.preferredFloatingWidgetSize,\n        userSized:\n          tab.userSized ||\n          (tab.isFloatingWidgetResizable && !!tab.preferredFloatingWidgetSize),\n      };\n    }, true);\n    const elementRef = React.useRef<HTMLDivElement>(null);\n    const widgetId = floatingWidgetId === undefined ? id : floatingWidgetId;\n    const onDragStart = React.useCallback<\n      NonNullable<UseDragWidgetArgs[\"onDragStart\"]>\n    >(\n      (updateId, initialPointerPosition, pointerPosition) => {\n        assert(!!elementRef.current);\n        if (floatingWidgetId !== undefined) return;\n        const nzBounds = measureNz();\n        let bounds = Rectangle.create(\n          elementRef.current.getBoundingClientRect()\n        );\n\n        const size = restrainInitialWidgetSize(\n          bounds.getSize(),\n          nzBounds.getSize()\n        );\n        bounds = bounds.setSize(size);\n\n        if (preferredFloatingWidgetSize) {\n          bounds = bounds.setSize(preferredFloatingWidgetSize);\n        }\n\n        // Pointer is outside of tab area. Need to re-adjust widget bounds so that tab is behind pointer\n        if (initialPointerPosition.x > bounds.right) {\n          const offset = initialPointerPosition.x - bounds.right + 20;\n          bounds = bounds.offsetX(offset);\n        }\n\n        const dragOffset = initialPointerPosition.getOffsetTo(pointerPosition);\n        bounds = bounds.offset(dragOffset);\n\n        // Adjust bounds to be relative to 9z origin\n        bounds = bounds.offset({ x: -nzBounds.left, y: -nzBounds.top });\n\n        const newFloatingWidgetId = getUniqueId();\n        updateId(newFloatingWidgetId);\n\n        assert(!!side);\n        dispatch({\n          type: \"PANEL_WIDGET_DRAG_START\",\n          newFloatingWidgetId,\n          id,\n          bounds,\n          side,\n          userSized,\n        });\n      },\n      [\n        dispatch,\n        floatingWidgetId,\n        id,\n        side,\n        measureNz,\n        preferredFloatingWidgetSize,\n        userSized,\n      ]\n    );\n    useDragWidget({\n      widgetId,\n      onDragStart,\n    });\n    React.useEffect(() => {\n      const listener = () => {\n        floatingWidgetId &&\n          dispatch({\n            type: \"FLOATING_WIDGET_BRING_TO_FRONT\",\n            id: floatingWidgetId,\n          });\n      };\n      const element = elementRef.current;\n      element?.addEventListener(\"click\", listener);\n      return () => {\n        element?.removeEventListener(\"click\", listener);\n      };\n    }, [dispatch, floatingWidgetId]);\n    const measure = React.useCallback<WidgetContextArgs[\"measure\"]>(() => {\n      if (!elementRef.current) return new Rectangle();\n      const bounds = elementRef.current.getBoundingClientRect();\n      return Rectangle.create(bounds);\n    }, []);\n    const widgetContextValue = React.useMemo<WidgetContextArgs>(\n      () => ({\n        measure,\n      }),\n      [measure]\n    );\n\n    const ref = useRefs(forwardedRef, elementRef);\n    const className = classnames(\"nz-widget-widget\", props.className);\n    return (\n      <WidgetContext.Provider value={widgetContextValue}>\n        <div\n          className={className}\n          onMouseEnter={props.onMouseEnter}\n          onMouseLeave={props.onMouseLeave}\n          onTransitionEnd={props.onTransitionEnd}\n          ref={ref}\n          style={props.style}\n          data-widget-id={props.widgetId}\n        >\n          {props.children}\n        </div>\n      </WidgetContext.Provider>\n    );\n  }\n);\n\n/** @internal */\nexport const WidgetIdContext = React.createContext<\n  WidgetState[\"id\"] | undefined\n>(undefined);\nWidgetIdContext.displayName = \"nz:WidgetIdContext\";\n\n/** @internal */\nexport interface WidgetContextArgs {\n  measure: () => Rectangle;\n}\n\n/** @internal */\nexport const WidgetContext = React.createContext<WidgetContextArgs>(null!);\nWidgetContext.displayName = \"nz:WidgetContext\";\n\nconst minWidth = 200;\nconst minHeight = 200;\n\n/** @internal */\nexport function restrainInitialWidgetSize(\n  size: SizeProps,\n  nzSize: SizeProps\n): SizeProps {\n  const width = Math.max(Math.min(nzSize.width / 3, size.width), minWidth);\n  const height = Math.max(Math.min(nzSize.height / 3, size.height), minHeight);\n  return {\n    width,\n    height,\n  };\n}\n\n/** @internal */\nexport function useActiveTabId() {\n  const id = React.useContext(WidgetIdContext);\n  assert(!!id);\n  return useLayout((state) => {\n    const widget = getWidgetState(state, id);\n    return widget.activeTabId;\n  });\n}\n"]}