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

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

@@ -0,0 +1,122 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 { Point, Timer } from "@itwin/core-react";
+import { useDragWidget } from "../base/DragManager";
+import { NineZoneDispatchContext } from "../base/NineZone";
+import { usePointerCaptor } from "../base/usePointerCaptor";
+import { TabBarButtons } from "./Buttons";
+import { WidgetTabs } from "./Tabs";
+import { WidgetIdContext } from "./Widget";
+import { useDoubleClick } from "../widget-panels/Grip";
+import { useFloatingWidgetId } from "./FloatingWidget";
+/** @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 className = classnames("nz-widget-tabBar", props.separator && "nz-separator");
+    return (React.createElement("div", { ref: containerRef, className: className },
+        React.createElement("div", { className: "nz-handle", 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) {
+    const doubleClickTimer = React.useRef(new Timer(300));
+    const clickCount = React.useRef(0);
+    const initialPointerPosition = React.useRef();
+    React.useEffect(() => {
+        const handleExecute = () => {
+            // istanbul ignore else
+            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/esm/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 { Point, Timer } from \"@itwin/core-react\";\nimport type { UseDragWidgetArgs } from \"../base/DragManager\";\nimport { useDragWidget } from \"../base/DragManager\";\nimport { NineZoneDispatchContext } from \"../base/NineZone\";\nimport type {\n  PointerCaptorArgs,\n  PointerCaptorEvent,\n} from \"../base/usePointerCaptor\";\nimport { usePointerCaptor } from \"../base/usePointerCaptor\";\nimport { TabBarButtons } from \"./Buttons\";\nimport { WidgetTabs } from \"./Tabs\";\nimport { WidgetIdContext } from \"./Widget\";\nimport { useDoubleClick } from \"../widget-panels/Grip\";\nimport { useFloatingWidgetId } from \"./FloatingWidget\";\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 className = classnames(\n    \"nz-widget-tabBar\",\n    props.separator && \"nz-separator\"\n  );\n\n  return (\n    <div ref={containerRef} className={className}>\n      <div className=\"nz-handle\" 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  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      // istanbul ignore else\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/esm/appui-react/layout/widget/TabBar.scss

@@ -0,0 +1,30 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@import "variables";
+
+.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;
+
+    .preview-enableMaximizedFloatingWidget-maximized & {
+      pointer-events: none;
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import "./Tabs.scss";
+import * as React from "react";
+/** @internal */
+export declare function WidgetTabs(): React.JSX.Element;
+interface WidgetTabsEntryContextArgs {
+    readonly lastNotOverflown: boolean;
+    readonly onResize?: (w: number) => void;
+}
+/** @internal */
+export declare const WidgetTabsEntryContext: React.Context<WidgetTabsEntryContextArgs | undefined>;
+/** @internal */
+export interface WidgetTabsEntryContextProviderProps {
+    children?: React.ReactNode;
+    id: string;
+    getOnResize: (id: string) => (w: number) => void;
+    lastNotOverflown: boolean;
+}
+/** @internal */
+export declare function WidgetTabsEntryProvider(props: WidgetTabsEntryContextProviderProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=Tabs.d.ts.map

package/lib/esm/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/esm/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";
+import { ShowWidgetIconContext } from "../base/NineZone";
+import { getChildKey, useOverflow } from "../tool-settings/Docked";
+import { isHorizontalPanelSide, PanelSideContext, } from "../widget-panels/Panel";
+import { WidgetOverflow } from "./Overflow";
+import { WidgetTabProvider } from "./Tab";
+import { TitleBarTarget } from "../target/TitleBarTarget";
+import { useLayout } from "../base/LayoutStore";
+import { WidgetIdContext } from "./Widget";
+import { getWidgetState } from "../state/internal/WidgetStateHelpers";
+/** @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/esm/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\";\nimport { ShowWidgetIconContext } from \"../base/NineZone\";\nimport { getChildKey, useOverflow } from \"../tool-settings/Docked\";\nimport {\n  isHorizontalPanelSide,\n  PanelSideContext,\n} from \"../widget-panels/Panel\";\nimport { WidgetOverflow } from \"./Overflow\";\nimport { WidgetTabProvider } from \"./Tab\";\nimport { TitleBarTarget } from \"../target/TitleBarTarget\";\nimport { useLayout } from \"../base/LayoutStore\";\nimport { WidgetIdContext } from \"./Widget\";\nimport { getWidgetState } from \"../state/internal/WidgetStateHelpers\";\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/esm/appui-react/layout/widget/Tabs.scss

@@ -0,0 +1,10 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.nz-widget-tabs {
+  display: flex;
+  flex: 1;
+  max-width: 100%;
+  min-width: 0;
+}

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

@@ -0,0 +1,32 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import "./ToolsArea.scss";
+import * as React from "react";
+import type { CommonProps, NoChildrenProps } from "@itwin/core-react";
+/** Properties of [[ToolsArea]] component.
+ * @internal
+ */
+export interface ToolsAreaProps extends CommonProps, NoChildrenProps {
+    /**
+     * Button displayed between horizontal and vertical toolbars.
+     * I.e. [[AppButton]] in ToolsArea zone.
+     */
+    button?: React.ReactNode;
+    /** Horizontal toolbar. See [[Toolbar]] */
+    horizontalToolbar?: React.ReactNode;
+    /** Vertical toolbar. See [[Toolbar]] */
+    verticalToolbar?: React.ReactNode;
+    /** Handler for mouse enter */
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    /** Handler for mouse leave */
+    onMouseLeave?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+}
+/** 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 declare class ToolsArea extends React.PureComponent<ToolsAreaProps> {
+    render(): React.JSX.Element;
+}
+//# sourceMappingURL=ToolsArea.d.ts.map

package/lib/esm/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;AACH,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;CAkCvB"}

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

@@ -0,0 +1,28 @@
+/*---------------------------------------------------------------------------------------------
+ * 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-vertical-tool-area" },
+                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/esm/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;AAuB/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,6BAAK,SAAS,EAAC,uBAAuB;gBACpC,6BACE,SAAS,EAAC,eAAe,EACzB,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,EACrC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,IAEpC,MAAM,CACH;gBACN,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,CACF;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\";\n\n/** Properties of [[ToolsArea]] component.\n * @internal\n */\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 className=\"nz-vertical-tool-area\">\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        <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/esm/appui-react/layout/widget/ToolsArea.scss

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

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

@@ -0,0 +1,38 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import "./Widget.scss";
+import * as React from "react";
+import type { CommonProps, SizeProps } from "@itwin/core-react";
+import { Rectangle } from "@itwin/core-react";
+import type { WidgetState } from "../state/WidgetState";
+/** @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/esm/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,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAChE,OAAO,EAAE,SAAS,EAAW,MAAM,mBAAmB,CAAC;AAQvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAMxD,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;AAChB,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,oFA+HlB,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/esm/appui-react/layout/widget/Widget.js

@@ -0,0 +1,144 @@
+/*---------------------------------------------------------------------------------------------
+ * 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";
+import { useDragWidget } from "../base/DragManager";
+import { getUniqueId, MeasureContext, NineZoneDispatchContext, } from "../base/NineZone";
+import { PanelSideContext } from "../widget-panels/Panel";
+import { useLayout } from "../base/LayoutStore";
+import { getWidgetState } from "../state/internal/WidgetStateHelpers";
+import { useFloatingWidgetId } from "./FloatingWidget";
+/** @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];
+        // istanbul ignore next
+        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;
+        // istanbul ignore next
+        element?.addEventListener("click", listener);
+        return () => {
+            // istanbul ignore next
+            element?.removeEventListener("click", listener);
+        };
+    }, [dispatch, floatingWidgetId]);
+    const measure = React.useCallback(() => {
+        // istanbul ignore next
+        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