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

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

@@ -0,0 +1,252 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Widget
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconOnlyOnWidgetTabContext = exports.TabPositionContext = exports.useTabInteractions = exports.WidgetTab = exports.WidgetTabProvider = void 0;
+require("./Tab.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const core_bentley_1 = require("@itwin/core-bentley");
+const core_react_1 = require("@itwin/core-react");
+const DragManager_1 = require("../base/DragManager");
+const NineZone_1 = require("../base/NineZone");
+const usePointerCaptor_1 = require("../base/usePointerCaptor");
+const Panel_1 = require("../widget-panels/Panel");
+const Tabs_1 = require("./Tabs");
+const Widget_1 = require("./Widget");
+const ContentRenderer_1 = require("./ContentRenderer");
+const TabTarget_1 = require("../target/TabTarget");
+const MenuTab_1 = require("./MenuTab");
+const Overflow_1 = require("./Overflow");
+const LayoutStore_1 = require("../base/LayoutStore");
+const FloatingWidget_1 = require("./FloatingWidget");
+const WidgetStateHelpers_1 = require("../state/internal/WidgetStateHelpers");
+const ts_key_enum_1 = require("ts-key-enum");
+const PreviewMaximizeToggle_1 = require("./PreviewMaximizeToggle");
+/** @internal */
+function WidgetTabProvider({ id, first, firstInactive, last, showOnlyTabIcon, }) {
+    const tabNode = React.useContext(NineZone_1.TabNodeContext);
+    const position = React.useMemo(() => ({
+        first,
+        firstInactive,
+        last,
+    }), [first, firstInactive, last]);
+    return (React.createElement(ContentRenderer_1.TabIdContext.Provider, { value: id },
+        React.createElement(exports.TabPositionContext.Provider, { value: position },
+            React.createElement(exports.IconOnlyOnWidgetTabContext.Provider, { value: !!showOnlyTabIcon }, tabNode))));
+}
+exports.WidgetTabProvider = WidgetTabProvider;
+/** Component that displays a tab in a side panel widget.
+ * @internal
+ */
+function WidgetTab(props) {
+    const widgetOverflow = React.useContext(Overflow_1.WidgetOverflowContext);
+    const overflown = !!widgetOverflow;
+    if (overflown)
+        return React.createElement(MenuTab_1.WidgetMenuTab, { ...props });
+    return React.createElement(WidgetTabComponent, { ...props });
+}
+exports.WidgetTab = WidgetTab;
+function WidgetTabComponent(props) {
+    const id = React.useContext(ContentRenderer_1.TabIdContext);
+    const { first, firstInactive, last } = React.useContext(exports.TabPositionContext);
+    const widgetTabsEntryContext = React.useContext(Tabs_1.WidgetTabsEntryContext);
+    const side = React.useContext(Panel_1.PanelSideContext);
+    const widgetId = React.useContext(Widget_1.WidgetIdContext);
+    const showIconOnly = React.useContext(exports.IconOnlyOnWidgetTabContext);
+    const showWidgetIcon = React.useContext(NineZone_1.ShowWidgetIconContext);
+    (0, core_bentley_1.assert)(!!id);
+    (0, core_bentley_1.assert)(!!widgetId);
+    const iconSpec = (0, LayoutStore_1.useLayout)((state) => state.tabs[id].iconSpec);
+    const label = (0, LayoutStore_1.useLayout)((state) => state.tabs[id].label);
+    const activeTabId = (0, LayoutStore_1.useLayout)((state) => (0, WidgetStateHelpers_1.getWidgetState)(state, widgetId).activeTabId);
+    const minimized = (0, LayoutStore_1.useLayout)((state) => (0, WidgetStateHelpers_1.getWidgetState)(state, widgetId).minimized);
+    const { enabled: enableMaximizedFloatingWidget, maximizedWidget } = (0, PreviewMaximizeToggle_1.usePreviewMaximizedWidget)();
+    const floatingWidgetId = (0, FloatingWidget_1.useFloatingWidgetId)();
+    // istanbul ignore next (preview)
+    const maximized = !!floatingWidgetId &&
+        maximizedWidget === floatingWidgetId &&
+        enableMaximizedFloatingWidget;
+    const resizeObserverRef = (0, core_react_1.useResizeObserver)(widgetTabsEntryContext === null || widgetTabsEntryContext === void 0 ? void 0 : widgetTabsEntryContext.onResize);
+    const pointerCaptorRef = useTabInteractions({ clickOnly: maximized });
+    const refs = (0, core_react_1.useRefs)(resizeObserverRef, pointerCaptorRef);
+    const active = activeTabId === id;
+    const className = (0, classnames_1.default)("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(core_react_1.Icon, { iconSpec: iconSpec })),
+        showLabel && React.createElement("span", null, label),
+        props.badge && React.createElement("div", { className: "nz-badge" }, props.badge),
+        React.createElement(TabTarget_1.TabTarget, null)));
+}
+/** @internal */
+function useTabInteractions({ onClick, onDoubleClick, onDragStart, clickOnly, }) {
+    const id = React.useContext(ContentRenderer_1.TabIdContext);
+    const widgetContext = React.useContext(Widget_1.WidgetContext);
+    const measure = React.useContext(NineZone_1.MeasureContext);
+    const dispatch = React.useContext(NineZone_1.NineZoneDispatchContext);
+    const side = React.useContext(Panel_1.PanelSideContext);
+    const widgetId = React.useContext(Widget_1.WidgetIdContext);
+    const widgetTabsEntryContext = React.useContext(Tabs_1.WidgetTabsEntryContext);
+    const floatingWidgetId = (0, FloatingWidget_1.useFloatingWidgetId)();
+    (0, core_bentley_1.assert)(!!id);
+    (0, core_bentley_1.assert)(!!widgetId);
+    const layoutStore = (0, LayoutStore_1.useLayoutStore)();
+    const tabRef = React.useRef(layoutStore.getState().tabs[id]);
+    const clickCount = React.useRef(0);
+    const doubleClickTimer = React.useRef(new core_react_1.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 === null || onClick === void 0 ? void 0 : 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 === null || onDoubleClick === void 0 ? void 0 : onDoubleClick();
+    }, [
+        clickOnly,
+        dispatch,
+        floatingWidgetId,
+        widgetId,
+        id,
+        side,
+        onDoubleClick,
+    ]);
+    const handleDragTabStart = (0, DragManager_1.useDragTab)({
+        tabId: id,
+    });
+    const handleDragStart = React.useCallback((pointerPosition) => {
+        // istanbul ignore next (preview)
+        if (clickOnly)
+            return;
+        (0, core_bentley_1.assert)(!!ref.current);
+        (0, core_bentley_1.assert)(!!initialPointerPosition.current);
+        const nzBounds = measure();
+        const nzOffset = new core_react_1.Point(-nzBounds.left, -nzBounds.top);
+        let bounds = core_react_1.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 = (0, Widget_1.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: core_react_1.Point.create(initialPointerPosition.current),
+            pointerPosition,
+            widgetSize,
+        });
+        dispatch({
+            type: "WIDGET_TAB_DRAG_START",
+            floatingWidgetId,
+            side,
+            widgetId,
+            id,
+            position,
+            userSized,
+        });
+        onDragStart === null || onDragStart === void 0 ? void 0 : 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 core_react_1.Point(args.clientX, args.clientY);
+    }, [dispatch, floatingWidgetId]);
+    const handlePointerMove = React.useCallback((args) => {
+        // istanbul ignore next
+        if (!initialPointerPosition.current)
+            return;
+        const pointerPosition = new core_react_1.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 = (0, usePointerCaptor_1.usePointerCaptor)(handlePointerDown, handlePointerMove, handlePointerUp);
+    const ref = React.useRef();
+    const refs = (0, core_react_1.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 === ts_key_enum_1.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;
+}
+exports.useTabInteractions = useTabInteractions;
+/** @internal */
+exports.TabPositionContext = React.createContext(undefined);
+exports.TabPositionContext.displayName = "nz:TabPositionContext";
+/** @internal */
+exports.IconOnlyOnWidgetTabContext = React.createContext(false);
+exports.IconOnlyOnWidgetTabContext.displayName = "nz:IconOnlyOnWidgetTabContext";
+//# sourceMappingURL=Tab.js.map

package/lib/cjs/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":"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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 \"./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/cjs/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/cjs/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/cjs/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"}

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

@@ -0,0 +1,127 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Widget
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDrag = exports.WidgetTabBar = void 0;
+require("./TabBar.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const core_bentley_1 = require("@itwin/core-bentley");
+const core_react_1 = require("@itwin/core-react");
+const DragManager_1 = require("../base/DragManager");
+const NineZone_1 = require("../base/NineZone");
+const usePointerCaptor_1 = require("../base/usePointerCaptor");
+const Buttons_1 = require("./Buttons");
+const Tabs_1 = require("./Tabs");
+const Widget_1 = require("./Widget");
+const Grip_1 = require("../widget-panels/Grip");
+const FloatingWidget_1 = require("./FloatingWidget");
+/** @internal */
+function WidgetTabBar(props) {
+    const dispatch = React.useContext(NineZone_1.NineZoneDispatchContext);
+    const id = React.useContext(Widget_1.WidgetIdContext);
+    const floatingWidgetId = (0, FloatingWidget_1.useFloatingWidgetId)();
+    (0, core_bentley_1.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 = (0, Grip_1.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 = (0, DragManager_1.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 = (0, classnames_1.default)("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(Tabs_1.WidgetTabs, null),
+        React.createElement(Buttons_1.TabBarButtons, null)));
+}
+exports.WidgetTabBar = WidgetTabBar;
+/** Hook to control drag interactions.
+ * Starts drag interaction after pointer moves or after timeout.
+ * @internal
+ */
+function useDrag(onDragStart, onDrag, onDragEnd, onTouchStart, onDoubleClick) {
+    const doubleClickTimer = React.useRef(new core_react_1.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 core_react_1.Point(args.clientX, args.clientY);
+        e.type === "touchstart" && onTouchStart && onTouchStart();
+    }, [onTouchStart]);
+    const handlePointerMove = React.useCallback((args) => {
+        if (initialPointerPosition.current) {
+            onDragStart &&
+                onDragStart(initialPointerPosition.current, new core_react_1.Point(args.clientX, args.clientY));
+            initialPointerPosition.current = undefined;
+            return;
+        }
+        onDrag && onDrag(new core_react_1.Point(args.clientX, args.clientY));
+    }, [onDragStart, onDrag]);
+    const handlePointerUp = React.useCallback(() => {
+        clickCount.current++;
+        doubleClickTimer.current.start();
+        initialPointerPosition.current = undefined;
+        onDragEnd && onDragEnd();
+    }, [onDragEnd]);
+    const ref = (0, usePointerCaptor_1.usePointerCaptor)(handlePointerDown, handlePointerMove, handlePointerUp);
+    return ref;
+}
+exports.useDrag = useDrag;
+//# sourceMappingURL=TabBar.js.map

package/lib/cjs/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/cjs/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/cjs/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/cjs/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"}