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

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

@@ -0,0 +1,41 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import * as React from "react";
+import type { WidgetState } from "../state/WidgetState";
+import type { NineZoneState } from "../state/NineZoneState";
+/** @internal */
+export declare const useActiveSendBackWidgetIdStore: import("zustand").UseBoundStore<import("zustand").StoreApi<string | undefined>>;
+/** @internal */
+export declare function getSendBackHomeState(state: NineZoneState, widgetId: WidgetState["id"]): {
+    side: import("../widget-panels/PanelTypes").PanelSide;
+    widgetId: string;
+    sectionIndex?: undefined;
+} | {
+    side: import("../widget-panels/PanelTypes").PanelSide;
+    widgetId?: undefined;
+    sectionIndex?: undefined;
+} | {
+    side: import("../widget-panels/PanelTypes").PanelSide;
+    sectionIndex: number;
+    widgetId?: undefined;
+};
+/** @internal */
+export declare function useSendBackHomeState(): {
+    side: import("../widget-panels/PanelTypes").PanelSide;
+    widgetId: string;
+    sectionIndex?: undefined;
+} | {
+    side: import("../widget-panels/PanelTypes").PanelSide;
+    widgetId?: undefined;
+    sectionIndex?: undefined;
+} | {
+    side: import("../widget-panels/PanelTypes").PanelSide;
+    sectionIndex: number;
+    widgetId?: undefined;
+} | undefined;
+/** @internal */
+export declare function SendBack(): React.JSX.Element;
+/** @internal */
+export declare function useSendBack(): boolean;
+//# sourceMappingURL=SendBack.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SendBack.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/SendBack.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAK5D,gBAAgB;AAChB,eAAO,MAAM,8BAA8B,iFAEzB,CAAC;AAEnB,gBAAgB;AAChB,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,aAAa,EACpB,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC;;;;;;;;;;;;EAoC5B;AAED,gBAAgB;AAChB,wBAAgB,oBAAoB;;;;;;;;;;;;cAKnC;AAiBD,gBAAgB;AAChB,wBAAgB,QAAQ,sBAsCvB;AAED,gBAAgB;AAChB,wBAAgB,WAAW,YAQ1B"}

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

@@ -0,0 +1,104 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 { create } from "zustand";
+import { assert } from "@itwin/core-bentley";
+import { SvgDockBottom, SvgDockLeft, SvgDockRight, SvgDockTop, } from "@itwin/itwinui-icons-react";
+import { NineZoneDispatchContext, useLabel } from "../base/NineZone";
+import { useLayout } from "../base/LayoutStore";
+import { useFloatingWidgetId, useWidgetAllowedToDock } from "./FloatingWidget";
+import { getWidgetPanelSectionId } from "../state/PanelState";
+import { useIsToolSettingsTab } from "./useIsToolSettingsTab";
+import { usePreviewMaximizedWidget } from "./PreviewMaximizeToggle";
+import { ActionButton } from "../../preview/widget-action-dropdown/Button";
+/** @internal */
+export const useActiveSendBackWidgetIdStore = create(() => undefined);
+/** @internal */
+export function getSendBackHomeState(state, widgetId) {
+    const floatingWidget = state.floatingWidgets.byId[widgetId];
+    const home = floatingWidget.home;
+    const panel = state.panels[home.side];
+    const destinationWidgetId = home.widgetId
+        ? home.widgetId
+        : getWidgetPanelSectionId(panel.side, home.widgetIndex);
+    let destinationWidget = state.widgets[destinationWidgetId];
+    if (!destinationWidget && panel.widgets.length === panel.maxWidgetCount) {
+        const id = panel.widgets[home.widgetIndex];
+        destinationWidget = state.widgets[id];
+    }
+    // Widget would be added to an existing panel widget.
+    if (destinationWidget) {
+        return {
+            side: home.side,
+            widgetId: destinationWidget.id,
+        };
+    }
+    // Widget would be added to a panel as it's first panel widget.
+    if (panel.widgets.length === 0) {
+        return {
+            side: home.side,
+        };
+    }
+    // Widget would be added to a panel with an existing panel widget as a separate panel widget.
+    return {
+        side: home.side,
+        sectionIndex: destinationWidgetId.endsWith("End") ? 1 : 0,
+    };
+}
+/** @internal */
+export function useSendBackHomeState() {
+    const widgetId = useActiveSendBackWidgetIdStore((state) => state);
+    return useLayout((state) => widgetId ? getSendBackHomeState(state, widgetId) : undefined);
+}
+function Icon() {
+    const id = useFloatingWidgetId();
+    assert(!!id);
+    const home = useLayout((state) => state.floatingWidgets.byId[id].home);
+    return home.side === "left" ? (React.createElement(SvgDockLeft, null)) : home.side === "right" ? (React.createElement(SvgDockRight, null)) : home.side === "top" ? (React.createElement(SvgDockTop, null)) : (React.createElement(SvgDockBottom, null));
+}
+/** @internal */
+export function SendBack() {
+    const id = useFloatingWidgetId();
+    assert(!!id);
+    const dispatch = React.useContext(NineZoneDispatchContext);
+    const title = useLabel("sendWidgetHomeTitle");
+    const setActiveWidgetId = (newId) => useActiveSendBackWidgetIdStore.setState(newId);
+    const onClick = () => {
+        setActiveWidgetId(undefined);
+        dispatch({
+            type: "FLOATING_WIDGET_SEND_BACK",
+            id,
+        });
+    };
+    const onMouseOver = () => {
+        setActiveWidgetId(id);
+    };
+    const onFocus = () => {
+        setActiveWidgetId(id);
+    };
+    const onMouseOut = () => {
+        setActiveWidgetId(undefined);
+    };
+    const onBlur = () => {
+        setActiveWidgetId(undefined);
+    };
+    const eventHandlers = { onMouseOver, onFocus, onMouseOut, onBlur };
+    return (React.createElement(ActionButton, { icon: React.createElement(Icon, null), title: title, onClick: onClick, buttonProps: eventHandlers, 
+        // TODO: can not pass down event handlers due to iTwinUI type issues.
+        menuProps: eventHandlers }));
+}
+/** @internal */
+export function useSendBack() {
+    const { enabled, maximizedWidget } = usePreviewMaximizedWidget();
+    const isToolSettings = useIsToolSettingsTab();
+    const floatingWidgetId = useFloatingWidgetId();
+    const canBeDocked = useWidgetAllowedToDock();
+    const isMaximized = maximizedWidget === floatingWidgetId && enabled;
+    return !!(!isMaximized && floatingWidgetId && !isToolSettings && canBeDocked);
+}
+//# sourceMappingURL=SendBack.js.map

package/lib/esm/appui-react/layout/widget/SendBack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SendBack.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/SendBack.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 { create } from \"zustand\";\nimport { assert } from \"@itwin/core-bentley\";\nimport {\n  SvgDockBottom,\n  SvgDockLeft,\n  SvgDockRight,\n  SvgDockTop,\n} from \"@itwin/itwinui-icons-react\";\nimport { NineZoneDispatchContext, useLabel } from \"../base/NineZone\";\nimport { useLayout } from \"../base/LayoutStore\";\nimport { useFloatingWidgetId, useWidgetAllowedToDock } from \"./FloatingWidget\";\nimport type { WidgetState } from \"../state/WidgetState\";\nimport { getWidgetPanelSectionId } from \"../state/PanelState\";\nimport type { NineZoneState } from \"../state/NineZoneState\";\nimport { useIsToolSettingsTab } from \"./useIsToolSettingsTab\";\nimport { usePreviewMaximizedWidget } from \"./PreviewMaximizeToggle\";\nimport { ActionButton } from \"../../preview/widget-action-dropdown/Button\";\n\n/** @internal */\nexport const useActiveSendBackWidgetIdStore = create<\n  WidgetState[\"id\"] | undefined\n>(() => undefined);\n\n/** @internal */\nexport function getSendBackHomeState(\n  state: NineZoneState,\n  widgetId: WidgetState[\"id\"]\n) {\n  const floatingWidget = state.floatingWidgets.byId[widgetId];\n  const home = floatingWidget.home;\n  const panel = state.panels[home.side];\n  const destinationWidgetId = home.widgetId\n    ? home.widgetId\n    : getWidgetPanelSectionId(panel.side, home.widgetIndex);\n\n  let destinationWidget = state.widgets[destinationWidgetId];\n\n  if (!destinationWidget && panel.widgets.length === panel.maxWidgetCount) {\n    const id = panel.widgets[home.widgetIndex];\n    destinationWidget = state.widgets[id];\n  }\n\n  // Widget would be added to an existing panel widget.\n  if (destinationWidget) {\n    return {\n      side: home.side,\n      widgetId: destinationWidget.id,\n    };\n  }\n\n  // Widget would be added to a panel as it's first panel widget.\n  if (panel.widgets.length === 0) {\n    return {\n      side: home.side,\n    };\n  }\n\n  // Widget would be added to a panel with an existing panel widget as a separate panel widget.\n  return {\n    side: home.side,\n    sectionIndex: destinationWidgetId.endsWith(\"End\") ? 1 : 0,\n  };\n}\n\n/** @internal */\nexport function useSendBackHomeState() {\n  const widgetId = useActiveSendBackWidgetIdStore((state) => state);\n  return useLayout((state) =>\n    widgetId ? getSendBackHomeState(state, widgetId) : undefined\n  );\n}\n\nfunction Icon() {\n  const id = useFloatingWidgetId();\n  assert(!!id);\n  const home = useLayout((state) => state.floatingWidgets.byId[id].home);\n  return home.side === \"left\" ? (\n    <SvgDockLeft />\n  ) : home.side === \"right\" ? (\n    <SvgDockRight />\n  ) : home.side === \"top\" ? (\n    <SvgDockTop />\n  ) : (\n    <SvgDockBottom />\n  );\n}\n\n/** @internal */\nexport function SendBack() {\n  const id = useFloatingWidgetId();\n  assert(!!id);\n  const dispatch = React.useContext(NineZoneDispatchContext);\n  const title = useLabel(\"sendWidgetHomeTitle\");\n  const setActiveWidgetId = (newId: WidgetState[\"id\"] | undefined) =>\n    useActiveSendBackWidgetIdStore.setState(newId);\n\n  const onClick = () => {\n    setActiveWidgetId(undefined);\n    dispatch({\n      type: \"FLOATING_WIDGET_SEND_BACK\",\n      id,\n    });\n  };\n  const onMouseOver = () => {\n    setActiveWidgetId(id);\n  };\n  const onFocus = () => {\n    setActiveWidgetId(id);\n  };\n  const onMouseOut = () => {\n    setActiveWidgetId(undefined);\n  };\n  const onBlur = () => {\n    setActiveWidgetId(undefined);\n  };\n  const eventHandlers = { onMouseOver, onFocus, onMouseOut, onBlur };\n  return (\n    <ActionButton\n      icon={<Icon />}\n      title={title}\n      onClick={onClick}\n      buttonProps={eventHandlers}\n      // TODO: can not pass down event handlers due to iTwinUI type issues.\n      menuProps={eventHandlers as any}\n    />\n  );\n}\n\n/** @internal */\nexport function useSendBack() {\n  const { enabled, maximizedWidget } = usePreviewMaximizedWidget();\n  const isToolSettings = useIsToolSettingsTab();\n  const floatingWidgetId = useFloatingWidgetId();\n  const canBeDocked = useWidgetAllowedToDock();\n\n  const isMaximized = maximizedWidget === floatingWidgetId && enabled;\n  return !!(!isMaximized && floatingWidgetId && !isToolSettings && canBeDocked);\n}\n"]}

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

@@ -0,0 +1,44 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import "./Tab.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+import type { TabState } from "../state/TabState";
+/** @internal */
+export interface WidgetTabProviderProps extends TabPositionContextArgs {
+    id: TabState["id"];
+    showOnlyTabIcon?: boolean;
+}
+/** @internal */
+export declare function WidgetTabProvider({ id, first, firstInactive, last, showOnlyTabIcon, }: WidgetTabProviderProps): React.JSX.Element;
+/** Properties of [[WidgetTab]] component.
+ * @internal
+ */
+export interface WidgetTabProps extends CommonProps {
+    badge?: React.ReactNode;
+}
+/** Component that displays a tab in a side panel widget.
+ * @internal
+ */
+export declare function WidgetTab(props: WidgetTabProps): React.JSX.Element;
+/** @internal */
+export interface UseTabInteractionsArgs {
+    onClick?: () => void;
+    onDoubleClick?: () => void;
+    onDragStart?: () => void;
+    clickOnly?: boolean;
+}
+/** @internal */
+export declare function useTabInteractions<T extends HTMLElement>({ onClick, onDoubleClick, onDragStart, clickOnly, }: UseTabInteractionsArgs): (instance: T | null | undefined) => void;
+/** @internal */
+export interface TabPositionContextArgs {
+    first?: boolean;
+    last?: boolean;
+    firstInactive?: boolean;
+}
+/** @internal */
+export declare const TabPositionContext: React.Context<TabPositionContextArgs>;
+/** @internal */
+export declare const IconOnlyOnWidgetTabContext: React.Context<boolean>;
+//# sourceMappingURL=Tab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/Tab.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,YAAY,CAAC;AAEpB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAgBrD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAuBlD,gBAAgB;AAChB,MAAM,WAAW,sBAAuB,SAAQ,sBAAsB;IACpE,EAAE,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,gBAAgB;AAChB,wBAAgB,iBAAiB,CAAC,EAChC,EAAE,EACF,KAAK,EACL,aAAa,EACb,IAAI,EACJ,eAAe,GAChB,EAAE,sBAAsB,qBAmBxB;AAED;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBAK9C;AAyED,gBAAgB;AAChB,MAAM,WAAW,sBAAsB;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,gBAAgB;AAChB,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,WAAW,EAAE,EACxD,OAAO,EACP,aAAa,EACb,WAAW,EACX,SAAS,GACV,EAAE,sBAAsB,4CAwLxB;AAED,gBAAgB;AAChB,MAAM,WAAW,sBAAsB;IACrC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,gBAAgB;AAChB,eAAO,MAAM,kBAAkB,uCAE9B,CAAC;AAGF,gBAAgB;AAChB,eAAO,MAAM,0BAA0B,wBAAsC,CAAC"}

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

@@ -0,0 +1,246 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 "./Tab.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { assert } from "@itwin/core-bentley";
+import { Icon, Point, Rectangle, Timer, useRefs, useResizeObserver, } from "@itwin/core-react";
+import { useDragTab } from "../base/DragManager";
+import { MeasureContext, NineZoneDispatchContext, ShowWidgetIconContext, TabNodeContext, } from "../base/NineZone";
+import { usePointerCaptor } from "../base/usePointerCaptor";
+import { PanelSideContext } from "../widget-panels/Panel";
+import { WidgetTabsEntryContext } from "./Tabs";
+import { restrainInitialWidgetSize, WidgetContext, WidgetIdContext, } from "./Widget";
+import { TabIdContext } from "./ContentRenderer";
+import { TabTarget } from "../target/TabTarget";
+import { WidgetMenuTab } from "./MenuTab";
+import { WidgetOverflowContext } from "./Overflow";
+import { useLayout, useLayoutStore } from "../base/LayoutStore";
+import { useFloatingWidgetId } from "./FloatingWidget";
+import { getWidgetState } from "../state/internal/WidgetStateHelpers";
+import { Key } from "ts-key-enum";
+import { usePreviewMaximizedWidget } from "./PreviewMaximizeToggle";
+/** @internal */
+export function WidgetTabProvider({ id, first, firstInactive, last, showOnlyTabIcon, }) {
+    const tabNode = React.useContext(TabNodeContext);
+    const position = React.useMemo(() => ({
+        first,
+        firstInactive,
+        last,
+    }), [first, firstInactive, last]);
+    return (React.createElement(TabIdContext.Provider, { value: id },
+        React.createElement(TabPositionContext.Provider, { value: position },
+            React.createElement(IconOnlyOnWidgetTabContext.Provider, { value: !!showOnlyTabIcon }, tabNode))));
+}
+/** Component that displays a tab in a side panel widget.
+ * @internal
+ */
+export function WidgetTab(props) {
+    const widgetOverflow = React.useContext(WidgetOverflowContext);
+    const overflown = !!widgetOverflow;
+    if (overflown)
+        return React.createElement(WidgetMenuTab, { ...props });
+    return React.createElement(WidgetTabComponent, { ...props });
+}
+function WidgetTabComponent(props) {
+    const id = React.useContext(TabIdContext);
+    const { first, firstInactive, last } = React.useContext(TabPositionContext);
+    const widgetTabsEntryContext = React.useContext(WidgetTabsEntryContext);
+    const side = React.useContext(PanelSideContext);
+    const widgetId = React.useContext(WidgetIdContext);
+    const showIconOnly = React.useContext(IconOnlyOnWidgetTabContext);
+    const showWidgetIcon = React.useContext(ShowWidgetIconContext);
+    assert(!!id);
+    assert(!!widgetId);
+    const iconSpec = useLayout((state) => state.tabs[id].iconSpec);
+    const label = useLayout((state) => state.tabs[id].label);
+    const activeTabId = useLayout((state) => getWidgetState(state, widgetId).activeTabId);
+    const minimized = useLayout((state) => getWidgetState(state, widgetId).minimized);
+    const { enabled: enableMaximizedFloatingWidget, maximizedWidget } = usePreviewMaximizedWidget();
+    const floatingWidgetId = useFloatingWidgetId();
+    // istanbul ignore next (preview)
+    const maximized = !!floatingWidgetId &&
+        maximizedWidget === floatingWidgetId &&
+        enableMaximizedFloatingWidget;
+    const resizeObserverRef = useResizeObserver(widgetTabsEntryContext?.onResize);
+    const pointerCaptorRef = useTabInteractions({ clickOnly: maximized });
+    const refs = useRefs(resizeObserverRef, pointerCaptorRef);
+    const active = activeTabId === id;
+    const className = classnames("nz-widget-tab", active && "nz-active", undefined === side && minimized && "nz-minimized", first && "nz-first", last && "nz-last", firstInactive && "nz-first-inactive", props.className);
+    const showLabel = (showIconOnly && !iconSpec) ||
+        (showWidgetIcon && !showIconOnly) ||
+        !showWidgetIcon;
+    return (React.createElement("div", { "data-item-id": id, "data-item-type": "widget-tab", className: className, ref: refs, role: "tab", style: props.style, title: label, tabIndex: 0 },
+        (showWidgetIcon || showIconOnly) && iconSpec && (React.createElement(Icon, { iconSpec: iconSpec })),
+        showLabel && React.createElement("span", null, label),
+        props.badge && React.createElement("div", { className: "nz-badge" }, props.badge),
+        React.createElement(TabTarget, null)));
+}
+/** @internal */
+export function useTabInteractions({ onClick, onDoubleClick, onDragStart, clickOnly, }) {
+    const id = React.useContext(TabIdContext);
+    const widgetContext = React.useContext(WidgetContext);
+    const measure = React.useContext(MeasureContext);
+    const dispatch = React.useContext(NineZoneDispatchContext);
+    const side = React.useContext(PanelSideContext);
+    const widgetId = React.useContext(WidgetIdContext);
+    const widgetTabsEntryContext = React.useContext(WidgetTabsEntryContext);
+    const floatingWidgetId = useFloatingWidgetId();
+    assert(!!id);
+    assert(!!widgetId);
+    const layoutStore = useLayoutStore();
+    const tabRef = React.useRef(layoutStore.getState().tabs[id]);
+    const clickCount = React.useRef(0);
+    const doubleClickTimer = React.useRef(new Timer(300));
+    const initialPointerPosition = React.useRef();
+    const overflown = !widgetTabsEntryContext;
+    React.useEffect(() => layoutStore.subscribe((state) => {
+        tabRef.current = state.tabs[id];
+    }), [layoutStore, id]);
+    const handleClick = React.useCallback(() => {
+        dispatch({
+            type: "WIDGET_TAB_CLICK",
+            side,
+            widgetId,
+            id,
+        });
+        onClick?.();
+    }, [dispatch, widgetId, id, side, onClick]);
+    const handleDoubleClick = React.useCallback(() => {
+        // istanbul ignore next (preview)
+        if (clickOnly)
+            return;
+        dispatch({
+            type: "WIDGET_TAB_DOUBLE_CLICK",
+            side,
+            widgetId,
+            floatingWidgetId,
+            id,
+        });
+        onDoubleClick?.();
+    }, [
+        clickOnly,
+        dispatch,
+        floatingWidgetId,
+        widgetId,
+        id,
+        side,
+        onDoubleClick,
+    ]);
+    const handleDragTabStart = useDragTab({
+        tabId: id,
+    });
+    const handleDragStart = React.useCallback((pointerPosition) => {
+        // istanbul ignore next (preview)
+        if (clickOnly)
+            return;
+        assert(!!ref.current);
+        assert(!!initialPointerPosition.current);
+        const nzBounds = measure();
+        const nzOffset = new Point(-nzBounds.left, -nzBounds.top);
+        let bounds = Rectangle.create(ref.current.getBoundingClientRect());
+        bounds = bounds.offset(nzOffset);
+        const tab = tabRef.current;
+        const userSized = tab.userSized ||
+            (tab.isFloatingWidgetResizable &&
+                /* istanbul ignore next */ !!tab.preferredFloatingWidgetSize);
+        let position = bounds.topLeft();
+        const widgetBounds = widgetContext.measure();
+        const widgetSize = restrainInitialWidgetSize(widgetBounds.getSize(), nzBounds.getSize());
+        if (overflown) {
+            position = initialPointerPosition.current.offset(nzOffset);
+            position = position.offset({ x: -7, y: -7 });
+        }
+        const dragOffset = initialPointerPosition.current.getOffsetTo(pointerPosition);
+        position = position.offset(dragOffset);
+        handleDragTabStart({
+            initialPointerPosition: Point.create(initialPointerPosition.current),
+            pointerPosition,
+            widgetSize,
+        });
+        dispatch({
+            type: "WIDGET_TAB_DRAG_START",
+            floatingWidgetId,
+            side,
+            widgetId,
+            id,
+            position,
+            userSized,
+        });
+        onDragStart?.();
+        initialPointerPosition.current = undefined;
+    }, [
+        clickOnly,
+        measure,
+        widgetContext,
+        handleDragTabStart,
+        dispatch,
+        floatingWidgetId,
+        side,
+        widgetId,
+        id,
+        onDragStart,
+        overflown,
+    ]);
+    const handlePointerDown = React.useCallback((args, e) => {
+        e.type === "touchstart" &&
+            floatingWidgetId &&
+            dispatch({
+                type: "FLOATING_WIDGET_BRING_TO_FRONT",
+                id: floatingWidgetId,
+            });
+        initialPointerPosition.current = new Point(args.clientX, args.clientY);
+    }, [dispatch, floatingWidgetId]);
+    const handlePointerMove = React.useCallback((args) => {
+        // istanbul ignore next
+        if (!initialPointerPosition.current)
+            return;
+        const pointerPosition = new Point(args.clientX, args.clientY);
+        const distance = initialPointerPosition.current.getDistanceTo(pointerPosition);
+        if (distance < 10)
+            return;
+        handleDragStart(pointerPosition);
+    }, [handleDragStart]);
+    const handlePointerUp = React.useCallback(() => {
+        clickCount.current++;
+        initialPointerPosition.current = undefined;
+        doubleClickTimer.current.start();
+    }, []);
+    const pointerCaptorRef = usePointerCaptor(handlePointerDown, handlePointerMove, handlePointerUp);
+    const ref = React.useRef();
+    const refs = useRefs(pointerCaptorRef, ref);
+    React.useEffect(() => {
+        const timer = doubleClickTimer.current;
+        timer.setOnExecute(() => {
+            if (clickCount.current === 1)
+                handleClick();
+            else
+                handleDoubleClick();
+            clickCount.current = 0;
+        });
+        const keydown = (e) => {
+            if (e.key === " " || e.key === Key.Enter) {
+                handleClick();
+            }
+        };
+        const instance = ref.current;
+        instance && instance.addEventListener("keydown", keydown);
+        return () => {
+            timer.setOnExecute(undefined);
+            instance && instance.removeEventListener("keydown", keydown);
+        };
+    }, [handleClick, handleDoubleClick]);
+    return refs;
+}
+/** @internal */
+export const TabPositionContext = React.createContext(undefined);
+TabPositionContext.displayName = "nz:TabPositionContext";
+/** @internal */
+export const IconOnlyOnWidgetTabContext = React.createContext(false);
+IconOnlyOnWidgetTabContext.displayName = "nz:IconOnlyOnWidgetTabContext";
+//# sourceMappingURL=Tab.js.map

package/lib/esm/appui-react/layout/widget/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/Tab.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,YAAY,CAAC;AACpB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EACL,IAAI,EACJ,KAAK,EACL,SAAS,EACT,KAAK,EACL,OAAO,EACP,iBAAiB,GAClB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EACL,cAAc,EACd,uBAAuB,EACvB,qBAAqB,EACrB,cAAc,GACf,MAAM,kBAAkB,CAAC;AAM1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,QAAQ,CAAC;AAChD,OAAO,EACL,yBAAyB,EACzB,aAAa,EACb,eAAe,GAChB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAClC,OAAO,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAQpE,gBAAgB;AAChB,MAAM,UAAU,iBAAiB,CAAC,EAChC,EAAE,EACF,KAAK,EACL,aAAa,EACb,IAAI,EACJ,eAAe,GACQ;IACvB,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC;IACjD,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAC5B,GAAG,EAAE,CAAC,CAAC;QACL,KAAK;QACL,aAAa;QACb,IAAI;KACL,CAAC,EACF,CAAC,KAAK,EAAE,aAAa,EAAE,IAAI,CAAC,CAC7B,CAAC;IACF,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE;QAC9B,oBAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ;YAC1C,oBAAC,0BAA0B,CAAC,QAAQ,IAAC,KAAK,EAAE,CAAC,CAAC,eAAe,IAC1D,OAAO,CAC4B,CACV,CACR,CACzB,CAAC;AACJ,CAAC;AASD;;GAEG;AACH,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAAC,qBAAqB,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,CAAC,CAAC,cAAc,CAAC;IACnC,IAAI,SAAS;QAAE,OAAO,oBAAC,aAAa,OAAK,KAAK,GAAI,CAAC;IACnD,OAAO,oBAAC,kBAAkB,OAAK,KAAK,GAAI,CAAC;AAC3C,CAAC;AAED,SAAS,kBAAkB,CAAC,KAAqB;IAC/C,MAAM,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAC1C,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAC5E,MAAM,sBAAsB,GAAG,KAAK,CAAC,UAAU,CAAC,sBAAsB,CAAC,CAAC;IACxE,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAChD,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IACnD,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,0BAA0B,CAAC,CAAC;IAClE,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAAC,qBAAqB,CAAC,CAAC;IAC/D,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IACb,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IAEnB,MAAM,QAAQ,GAAG,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC/D,MAAM,KAAK,GAAG,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;IACzD,MAAM,WAAW,GAAG,SAAS,CAC3B,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,WAAW,CACvD,CAAC;IACF,MAAM,SAAS,GAAG,SAAS,CACzB,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,SAAS,CACrD,CAAC;IAEF,MAAM,EAAE,OAAO,EAAE,6BAA6B,EAAE,eAAe,EAAE,GAC/D,yBAAyB,EAAE,CAAC;IAC9B,MAAM,gBAAgB,GAAG,mBAAmB,EAAE,CAAC;IAC/C,iCAAiC;IACjC,MAAM,SAAS,GACb,CAAC,CAAC,gBAAgB;QAClB,eAAe,KAAK,gBAAgB;QACpC,6BAA6B,CAAC;IAEhC,MAAM,iBAAiB,GAAG,iBAAiB,CACzC,sBAAsB,EAAE,QAAQ,CACjC,CAAC;IACF,MAAM,gBAAgB,GAAG,kBAAkB,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,CAAC;IACtE,MAAM,IAAI,GAAG,OAAO,CAAiB,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IAE1E,MAAM,MAAM,GAAG,WAAW,KAAK,EAAE,CAAC;IAClC,MAAM,SAAS,GAAG,UAAU,CAC1B,eAAe,EACf,MAAM,IAAI,WAAW,EACrB,SAAS,KAAK,IAAI,IAAI,SAAS,IAAI,cAAc,EACjD,KAAK,IAAI,UAAU,EACnB,IAAI,IAAI,SAAS,EACjB,aAAa,IAAI,mBAAmB,EACpC,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,MAAM,SAAS,GACb,CAAC,YAAY,IAAI,CAAC,QAAQ,CAAC;QAC3B,CAAC,cAAc,IAAI,CAAC,YAAY,CAAC;QACjC,CAAC,cAAc,CAAC;IAClB,OAAO,CACL,6CACgB,EAAE,oBACD,YAAY,EAC3B,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,IAAI,EACT,IAAI,EAAC,KAAK,EACV,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC;QAEV,CAAC,cAAc,IAAI,YAAY,CAAC,IAAI,QAAQ,IAAI,CAC/C,oBAAC,IAAI,IAAC,QAAQ,EAAE,QAAQ,GAAI,CAC7B;QACA,SAAS,IAAI,kCAAO,KAAK,CAAQ;QACjC,KAAK,CAAC,KAAK,IAAI,6BAAK,SAAS,EAAC,UAAU,IAAE,KAAK,CAAC,KAAK,CAAO;QAC7D,oBAAC,SAAS,OAAG,CACT,CACP,CAAC;AACJ,CAAC;AAUD,gBAAgB;AAChB,MAAM,UAAU,kBAAkB,CAAwB,EACxD,OAAO,EACP,aAAa,EACb,WAAW,EACX,SAAS,GACc;IACvB,MAAM,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAC1C,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IACtD,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC;IACjD,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,uBAAuB,CAAC,CAAC;IAC3D,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAChD,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IACnD,MAAM,sBAAsB,GAAG,KAAK,CAAC,UAAU,CAAC,sBAAsB,CAAC,CAAC;IACxE,MAAM,gBAAgB,GAAG,mBAAmB,EAAE,CAAC;IAC/C,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IACb,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IAEnB,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;IAC7D,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IACnC,MAAM,gBAAgB,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;IACtD,MAAM,sBAAsB,GAAG,KAAK,CAAC,MAAM,EAAS,CAAC;IAErD,MAAM,SAAS,GAAG,CAAC,sBAAsB,CAAC;IAE1C,KAAK,CAAC,SAAS,CACb,GAAG,EAAE,CACH,WAAW,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;QAC9B,MAAM,CAAC,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAClC,CAAC,CAAC,EACJ,CAAC,WAAW,EAAE,EAAE,CAAC,CAClB,CAAC;IAEF,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,QAAQ,CAAC;YACP,IAAI,EAAE,kBAAkB;YACxB,IAAI;YACJ,QAAQ;YACR,EAAE;SACH,CAAC,CAAC;QACH,OAAO,EAAE,EAAE,CAAC;IACd,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;IAC5C,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC/C,iCAAiC;QACjC,IAAI,SAAS;YAAE,OAAO;QACtB,QAAQ,CAAC;YACP,IAAI,EAAE,yBAAyB;YAC/B,IAAI;YACJ,QAAQ;YACR,gBAAgB;YAChB,EAAE;SACH,CAAC,CAAC;QACH,aAAa,EAAE,EAAE,CAAC;IACpB,CAAC,EAAE;QACD,SAAS;QACT,QAAQ;QACR,gBAAgB;QAChB,QAAQ;QACR,EAAE;QACF,IAAI;QACJ,aAAa;KACd,CAAC,CAAC;IAEH,MAAM,kBAAkB,GAAG,UAAU,CAAC;QACpC,KAAK,EAAE,EAAE;KACV,CAAC,CAAC;IACH,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CACvC,CAAC,eAAsB,EAAE,EAAE;QACzB,iCAAiC;QACjC,IAAI,SAAS;YAAE,OAAO;QACtB,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QACtB,MAAM,CAAC,CAAC,CAAC,sBAAsB,CAAC,OAAO,CAAC,CAAC;QACzC,MAAM,QAAQ,GAAG,OAAO,EAAE,CAAC;QAC3B,MAAM,QAAQ,GAAG,IAAI,KAAK,CAAC,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC1D,IAAI,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,CAAC;QACnE,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAEjC,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,CAAC;QAC3B,MAAM,SAAS,GACb,GAAG,CAAC,SAAS;YACb,CAAC,GAAG,CAAC,yBAAyB;gBAC5B,0BAA0B,CAAC,CAAC,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC;QAClE,IAAI,QAAQ,GAAG,MAAM,CAAC,OAAO,EAAE,CAAC;QAChC,MAAM,YAAY,GAAG,aAAa,CAAC,OAAO,EAAE,CAAC;QAC7C,MAAM,UAAU,GAAG,yBAAyB,CAC1C,YAAY,CAAC,OAAO,EAAE,EACtB,QAAQ,CAAC,OAAO,EAAE,CACnB,CAAC;QACF,IAAI,SAAS,EAAE;YACb,QAAQ,GAAG,sBAAsB,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;YAC3D,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;SAC9C;QAED,MAAM,UAAU,GACd,sBAAsB,CAAC,OAAO,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;QAC9D,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QAEvC,kBAAkB,CAAC;YACjB,sBAAsB,EAAE,KAAK,CAAC,MAAM,CAAC,sBAAsB,CAAC,OAAO,CAAC;YACpE,eAAe;YACf,UAAU;SACX,CAAC,CAAC;QACH,QAAQ,CAAC;YACP,IAAI,EAAE,uBAAuB;YAC7B,gBAAgB;YAChB,IAAI;YACJ,QAAQ;YACR,EAAE;YACF,QAAQ;YACR,SAAS;SACV,CAAC,CAAC;QACH,WAAW,EAAE,EAAE,CAAC;QAEhB,sBAAsB,CAAC,OAAO,GAAG,SAAS,CAAC;IAC7C,CAAC,EACD;QACE,SAAS;QACT,OAAO;QACP,aAAa;QACb,kBAAkB;QAClB,QAAQ;QACR,gBAAgB;QAChB,IAAI;QACJ,QAAQ;QACR,EAAE;QACF,WAAW;QACX,SAAS;KACV,CACF,CAAC;IACF,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CACzC,CAAC,IAAuB,EAAE,CAAqB,EAAE,EAAE;QACjD,CAAC,CAAC,IAAI,KAAK,YAAY;YACrB,gBAAgB;YAChB,QAAQ,CAAC;gBACP,IAAI,EAAE,gCAAgC;gBACtC,EAAE,EAAE,gBAAgB;aACrB,CAAC,CAAC;QAEL,sBAAsB,CAAC,OAAO,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IACzE,CAAC,EACD,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAC7B,CAAC;IACF,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CACzC,CAAC,IAAuB,EAAE,EAAE;QAC1B,uBAAuB;QACvB,IAAI,CAAC,sBAAsB,CAAC,OAAO;YAAE,OAAO;QAE5C,MAAM,eAAe,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAC9D,MAAM,QAAQ,GACZ,sBAAsB,CAAC,OAAO,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QAChE,IAAI,QAAQ,GAAG,EAAE;YAAE,OAAO;QAC1B,eAAe,CAAC,eAAe,CAAC,CAAC;IACnC,CAAC,EACD,CAAC,eAAe,CAAC,CAClB,CAAC;IACF,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC7C,UAAU,CAAC,OAAO,EAAE,CAAC;QACrB,sBAAsB,CAAC,OAAO,GAAG,SAAS,CAAC;QAC3C,gBAAgB,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IACnC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,gBAAgB,GAAG,gBAAgB,CACvC,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,CAChB,CAAC;IACF,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,EAAK,CAAC;IAC9B,MAAM,IAAI,GAAG,OAAO,CAAC,gBAAgB,EAAE,GAAG,CAAC,CAAC;IAE5C,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,KAAK,GAAG,gBAAgB,CAAC,OAAO,CAAC;QACvC,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE;YACtB,IAAI,UAAU,CAAC,OAAO,KAAK,CAAC;gBAAE,WAAW,EAAE,CAAC;;gBACvC,iBAAiB,EAAE,CAAC;YACzB,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC;QACzB,CAAC,CAAC,CAAC;QACH,MAAM,OAAO,GAAG,CAAC,CAAgB,EAAE,EAAE;YACnC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,KAAK,EAAE;gBACxC,WAAW,EAAE,CAAC;aACf;QACH,CAAC,CAAC;QACF,MAAM,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAC;QAC7B,QAAQ,IAAI,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;QAC1D,OAAO,GAAG,EAAE;YACV,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;YAC9B,QAAQ,IAAI,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;QAC/D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAC,CAAC;IACrC,OAAO,IAAI,CAAC;AACd,CAAC;AASD,gBAAgB;AAChB,MAAM,CAAC,MAAM,kBAAkB,GAAG,KAAK,CAAC,aAAa,CACnD,SAAU,CACX,CAAC;AACF,kBAAkB,CAAC,WAAW,GAAG,uBAAuB,CAAC;AAEzD,gBAAgB;AAChB,MAAM,CAAC,MAAM,0BAA0B,GAAG,KAAK,CAAC,aAAa,CAAU,KAAK,CAAC,CAAC;AAC9E,0BAA0B,CAAC,WAAW,GAAG,+BAA+B,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 \"./Tab.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { assert } from \"@itwin/core-bentley\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport {\n  Icon,\n  Point,\n  Rectangle,\n  Timer,\n  useRefs,\n  useResizeObserver,\n} from \"@itwin/core-react\";\nimport { useDragTab } from \"../base/DragManager\";\nimport {\n  MeasureContext,\n  NineZoneDispatchContext,\n  ShowWidgetIconContext,\n  TabNodeContext,\n} from \"../base/NineZone\";\nimport type { TabState } from \"../state/TabState\";\nimport type {\n  PointerCaptorArgs,\n  PointerCaptorEvent,\n} from \"../base/usePointerCaptor\";\nimport { usePointerCaptor } from \"../base/usePointerCaptor\";\nimport { PanelSideContext } from \"../widget-panels/Panel\";\nimport { WidgetTabsEntryContext } from \"./Tabs\";\nimport {\n  restrainInitialWidgetSize,\n  WidgetContext,\n  WidgetIdContext,\n} from \"./Widget\";\nimport { TabIdContext } from \"./ContentRenderer\";\nimport { TabTarget } from \"../target/TabTarget\";\nimport { WidgetMenuTab } from \"./MenuTab\";\nimport { WidgetOverflowContext } from \"./Overflow\";\nimport { useLayout, useLayoutStore } from \"../base/LayoutStore\";\nimport { useFloatingWidgetId } from \"./FloatingWidget\";\nimport { getWidgetState } from \"../state/internal/WidgetStateHelpers\";\nimport { Key } from \"ts-key-enum\";\nimport { usePreviewMaximizedWidget } from \"./PreviewMaximizeToggle\";\n\n/** @internal */\nexport interface WidgetTabProviderProps extends TabPositionContextArgs {\n  id: TabState[\"id\"];\n  showOnlyTabIcon?: boolean;\n}\n\n/** @internal */\nexport function WidgetTabProvider({\n  id,\n  first,\n  firstInactive,\n  last,\n  showOnlyTabIcon,\n}: WidgetTabProviderProps) {\n  const tabNode = React.useContext(TabNodeContext);\n  const position = React.useMemo<TabPositionContextArgs>(\n    () => ({\n      first,\n      firstInactive,\n      last,\n    }),\n    [first, firstInactive, last]\n  );\n  return (\n    <TabIdContext.Provider value={id}>\n      <TabPositionContext.Provider value={position}>\n        <IconOnlyOnWidgetTabContext.Provider value={!!showOnlyTabIcon}>\n          {tabNode}\n        </IconOnlyOnWidgetTabContext.Provider>\n      </TabPositionContext.Provider>\n    </TabIdContext.Provider>\n  );\n}\n\n/** Properties of [[WidgetTab]] component.\n * @internal\n */\nexport interface WidgetTabProps extends CommonProps {\n  badge?: React.ReactNode;\n}\n\n/** Component that displays a tab in a side panel widget.\n * @internal\n */\nexport function WidgetTab(props: WidgetTabProps) {\n  const widgetOverflow = React.useContext(WidgetOverflowContext);\n  const overflown = !!widgetOverflow;\n  if (overflown) return <WidgetMenuTab {...props} />;\n  return <WidgetTabComponent {...props} />;\n}\n\nfunction WidgetTabComponent(props: WidgetTabProps) {\n  const id = React.useContext(TabIdContext);\n  const { first, firstInactive, last } = React.useContext(TabPositionContext);\n  const widgetTabsEntryContext = React.useContext(WidgetTabsEntryContext);\n  const side = React.useContext(PanelSideContext);\n  const widgetId = React.useContext(WidgetIdContext);\n  const showIconOnly = React.useContext(IconOnlyOnWidgetTabContext);\n  const showWidgetIcon = React.useContext(ShowWidgetIconContext);\n  assert(!!id);\n  assert(!!widgetId);\n\n  const iconSpec = useLayout((state) => state.tabs[id].iconSpec);\n  const label = useLayout((state) => state.tabs[id].label);\n  const activeTabId = useLayout(\n    (state) => getWidgetState(state, widgetId).activeTabId\n  );\n  const minimized = useLayout(\n    (state) => getWidgetState(state, widgetId).minimized\n  );\n\n  const { enabled: enableMaximizedFloatingWidget, maximizedWidget } =\n    usePreviewMaximizedWidget();\n  const floatingWidgetId = useFloatingWidgetId();\n  // istanbul ignore next (preview)\n  const maximized =\n    !!floatingWidgetId &&\n    maximizedWidget === floatingWidgetId &&\n    enableMaximizedFloatingWidget;\n\n  const resizeObserverRef = useResizeObserver<HTMLDivElement>(\n    widgetTabsEntryContext?.onResize\n  );\n  const pointerCaptorRef = useTabInteractions({ clickOnly: maximized });\n  const refs = useRefs<HTMLDivElement>(resizeObserverRef, pointerCaptorRef);\n\n  const active = activeTabId === id;\n  const className = classnames(\n    \"nz-widget-tab\",\n    active && \"nz-active\",\n    undefined === side && minimized && \"nz-minimized\",\n    first && \"nz-first\",\n    last && \"nz-last\",\n    firstInactive && \"nz-first-inactive\",\n    props.className\n  );\n\n  const showLabel =\n    (showIconOnly && !iconSpec) ||\n    (showWidgetIcon && !showIconOnly) ||\n    !showWidgetIcon;\n  return (\n    <div\n      data-item-id={id}\n      data-item-type=\"widget-tab\"\n      className={className}\n      ref={refs}\n      role=\"tab\"\n      style={props.style}\n      title={label}\n      tabIndex={0}\n    >\n      {(showWidgetIcon || showIconOnly) && iconSpec && (\n        <Icon iconSpec={iconSpec} />\n      )}\n      {showLabel && <span>{label}</span>}\n      {props.badge && <div className=\"nz-badge\">{props.badge}</div>}\n      <TabTarget />\n    </div>\n  );\n}\n\n/** @internal */\nexport interface UseTabInteractionsArgs {\n  onClick?: () => void;\n  onDoubleClick?: () => void;\n  onDragStart?: () => void;\n  clickOnly?: boolean;\n}\n\n/** @internal */\nexport function useTabInteractions<T extends HTMLElement>({\n  onClick,\n  onDoubleClick,\n  onDragStart,\n  clickOnly,\n}: UseTabInteractionsArgs) {\n  const id = React.useContext(TabIdContext);\n  const widgetContext = React.useContext(WidgetContext);\n  const measure = React.useContext(MeasureContext);\n  const dispatch = React.useContext(NineZoneDispatchContext);\n  const side = React.useContext(PanelSideContext);\n  const widgetId = React.useContext(WidgetIdContext);\n  const widgetTabsEntryContext = React.useContext(WidgetTabsEntryContext);\n  const floatingWidgetId = useFloatingWidgetId();\n  assert(!!id);\n  assert(!!widgetId);\n\n  const layoutStore = useLayoutStore();\n  const tabRef = React.useRef(layoutStore.getState().tabs[id]);\n  const clickCount = React.useRef(0);\n  const doubleClickTimer = React.useRef(new Timer(300));\n  const initialPointerPosition = React.useRef<Point>();\n\n  const overflown = !widgetTabsEntryContext;\n\n  React.useEffect(\n    () =>\n      layoutStore.subscribe((state) => {\n        tabRef.current = state.tabs[id];\n      }),\n    [layoutStore, id]\n  );\n\n  const handleClick = React.useCallback(() => {\n    dispatch({\n      type: \"WIDGET_TAB_CLICK\",\n      side,\n      widgetId,\n      id,\n    });\n    onClick?.();\n  }, [dispatch, widgetId, id, side, onClick]);\n  const handleDoubleClick = React.useCallback(() => {\n    // istanbul ignore next (preview)\n    if (clickOnly) return;\n    dispatch({\n      type: \"WIDGET_TAB_DOUBLE_CLICK\",\n      side,\n      widgetId,\n      floatingWidgetId,\n      id,\n    });\n    onDoubleClick?.();\n  }, [\n    clickOnly,\n    dispatch,\n    floatingWidgetId,\n    widgetId,\n    id,\n    side,\n    onDoubleClick,\n  ]);\n\n  const handleDragTabStart = useDragTab({\n    tabId: id,\n  });\n  const handleDragStart = React.useCallback(\n    (pointerPosition: Point) => {\n      // istanbul ignore next (preview)\n      if (clickOnly) return;\n      assert(!!ref.current);\n      assert(!!initialPointerPosition.current);\n      const nzBounds = measure();\n      const nzOffset = new Point(-nzBounds.left, -nzBounds.top);\n      let bounds = Rectangle.create(ref.current.getBoundingClientRect());\n      bounds = bounds.offset(nzOffset);\n\n      const tab = tabRef.current;\n      const userSized =\n        tab.userSized ||\n        (tab.isFloatingWidgetResizable &&\n          /* istanbul ignore next */ !!tab.preferredFloatingWidgetSize);\n      let position = bounds.topLeft();\n      const widgetBounds = widgetContext.measure();\n      const widgetSize = restrainInitialWidgetSize(\n        widgetBounds.getSize(),\n        nzBounds.getSize()\n      );\n      if (overflown) {\n        position = initialPointerPosition.current.offset(nzOffset);\n        position = position.offset({ x: -7, y: -7 });\n      }\n\n      const dragOffset =\n        initialPointerPosition.current.getOffsetTo(pointerPosition);\n      position = position.offset(dragOffset);\n\n      handleDragTabStart({\n        initialPointerPosition: Point.create(initialPointerPosition.current),\n        pointerPosition,\n        widgetSize,\n      });\n      dispatch({\n        type: \"WIDGET_TAB_DRAG_START\",\n        floatingWidgetId,\n        side,\n        widgetId,\n        id,\n        position,\n        userSized,\n      });\n      onDragStart?.();\n\n      initialPointerPosition.current = undefined;\n    },\n    [\n      clickOnly,\n      measure,\n      widgetContext,\n      handleDragTabStart,\n      dispatch,\n      floatingWidgetId,\n      side,\n      widgetId,\n      id,\n      onDragStart,\n      overflown,\n    ]\n  );\n  const handlePointerDown = React.useCallback(\n    (args: PointerCaptorArgs, e: PointerCaptorEvent) => {\n      e.type === \"touchstart\" &&\n        floatingWidgetId &&\n        dispatch({\n          type: \"FLOATING_WIDGET_BRING_TO_FRONT\",\n          id: floatingWidgetId,\n        });\n\n      initialPointerPosition.current = new Point(args.clientX, args.clientY);\n    },\n    [dispatch, floatingWidgetId]\n  );\n  const handlePointerMove = React.useCallback(\n    (args: PointerCaptorArgs) => {\n      // istanbul ignore next\n      if (!initialPointerPosition.current) return;\n\n      const pointerPosition = new Point(args.clientX, args.clientY);\n      const distance =\n        initialPointerPosition.current.getDistanceTo(pointerPosition);\n      if (distance < 10) return;\n      handleDragStart(pointerPosition);\n    },\n    [handleDragStart]\n  );\n  const handlePointerUp = React.useCallback(() => {\n    clickCount.current++;\n    initialPointerPosition.current = undefined;\n    doubleClickTimer.current.start();\n  }, []);\n\n  const pointerCaptorRef = usePointerCaptor<T>(\n    handlePointerDown,\n    handlePointerMove,\n    handlePointerUp\n  );\n  const ref = React.useRef<T>();\n  const refs = useRefs(pointerCaptorRef, ref);\n\n  React.useEffect(() => {\n    const timer = doubleClickTimer.current;\n    timer.setOnExecute(() => {\n      if (clickCount.current === 1) handleClick();\n      else handleDoubleClick();\n      clickCount.current = 0;\n    });\n    const keydown = (e: KeyboardEvent) => {\n      if (e.key === \" \" || e.key === Key.Enter) {\n        handleClick();\n      }\n    };\n    const instance = ref.current;\n    instance && instance.addEventListener(\"keydown\", keydown);\n    return () => {\n      timer.setOnExecute(undefined);\n      instance && instance.removeEventListener(\"keydown\", keydown);\n    };\n  }, [handleClick, handleDoubleClick]);\n  return refs;\n}\n\n/** @internal */\nexport interface TabPositionContextArgs {\n  first?: boolean;\n  last?: boolean;\n  firstInactive?: boolean;\n}\n\n/** @internal */\nexport const TabPositionContext = React.createContext<TabPositionContextArgs>(\n  undefined!\n);\nTabPositionContext.displayName = \"nz:TabPositionContext\";\n\n/** @internal */\nexport const IconOnlyOnWidgetTabContext = React.createContext<boolean>(false);\nIconOnlyOnWidgetTabContext.displayName = \"nz:IconOnlyOnWidgetTabContext\";\n"]}

package/lib/esm/appui-react/layout/widget/Tab.scss

@@ -0,0 +1,82 @@
+/*---------------------------------------------------------------------------------------------
+ * 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/style/themecolors";
+@import "../prefix";
+@import "variables";
+
+.nz-widget-tab {
+  user-select: none;
+  white-space: nowrap;
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  cursor: pointer;
+  padding: 4px 1em 0;
+  position: relative;
+  border: 0 solid var(--iui-color-border);
+  max-width: 9em;
+  background: var(--iui-color-background-backdrop);
+
+  > span {
+    font-size: $nz-widget-tab-font-size;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  > .nz-badge {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  &:not(.nz-minimized) {
+    &.nz-active {
+      background: var(--iui-color-background);
+      color: var(--iui-color-text-accent);
+      padding-bottom: 1px;
+      margin-bottom: -1px;
+
+      &:before {
+        $padding: 0.25em;
+        content: "";
+        position: absolute;
+        background: currentColor;
+        left: $padding;
+        top: 1px;
+        border-radius: 0.2em;
+        width: calc(100% - #{2 * $padding});
+        height: 0.15em;
+      }
+
+      &.nz-last {
+        border-right-width: 1px;
+      }
+    }
+  }
+
+  &:not(.nz-active),
+  &.nz-minimized {
+    color: var(--iui-color-text-muted);
+    border-right-width: 1px;
+  }
+
+  &:not(.nz-minimized) {
+    &.nz-first-inactive {
+      border-left-width: 1px;
+    }
+  }
+
+  &.nz-first {
+    border-top-left-radius: $nz-widget-tab-border-radius;
+  }
+
+  &:hover {
+    background: var(--iui-color-background);
+
+    &:not(.nz-active) {
+      color: var(--iui-color-text);
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import "./TabBar.scss";
+import * as React from "react";
+import { Point } from "@itwin/core-react";
+/** @internal */
+export interface WidgetTabBarProps {
+    separator?: boolean;
+}
+/** @internal */
+export declare function WidgetTabBar(props: WidgetTabBarProps): React.JSX.Element;
+/** Hook to control drag interactions.
+ * Starts drag interaction after pointer moves or after timeout.
+ * @internal
+ */
+export declare function useDrag<T extends HTMLElement>(onDragStart?: (initialPointerPosition: Point, pointerPosition: Point) => void, onDrag?: (position: Point) => void, onDragEnd?: () => void, onTouchStart?: () => void, onDoubleClick?: () => void): (instance: T | null) => void;
+//# sourceMappingURL=TabBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabBar.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/TabBar.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,eAAe,CAAC;AAEvB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAS,MAAM,mBAAmB,CAAC;AAejD,gBAAgB;AAChB,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,gBAAgB;AAChB,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAkFpD;AAED;;;GAGG;AACH,wBAAgB,OAAO,CAAC,CAAC,SAAS,WAAW,EAC3C,WAAW,CAAC,EAAE,CAAC,sBAAsB,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,KAAK,IAAI,EAC7E,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,KAAK,IAAI,EAClC,SAAS,CAAC,EAAE,MAAM,IAAI,EACtB,YAAY,CAAC,EAAE,MAAM,IAAI,EACzB,aAAa,CAAC,EAAE,MAAM,IAAI,gCAqD3B"}