@itwin/appui-react 5.24.2 → 5.26.0

package/lib/appui-react/preview/widget-tab-actions/Widget.js

@@ -0,0 +1,242 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Widget
+ */
+import "./Widget.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { assert } from "@itwin/core-bentley";
+import { Icon } from "@itwin/core-react";
+import { useRefs } from "@itwin/core-react/internal";
+import { IconButton, Tabs, VisuallyHidden } from "@itwin/itwinui-react";
+import { SvgCloseSmall } from "@itwin/itwinui-icons-react";
+import { useActiveTabId, useDragPanelWidget, useWidgetContextValue, WidgetContext, WidgetIdContext, } from "../../layout/widget/Widget.js";
+import { useSafeContext } from "../../hooks/useSafeContext.js";
+import { useLayout } from "../../layout/base/LayoutStore.js";
+import { getWidgetState } from "../../layout/state/internal/WidgetStateHelpers.js";
+import { TabIdContext } from "../../layout/widget/ContentRenderer.js";
+import { useWidgetContentContainer } from "../../layout/widget/ContentContainer.js";
+import { useTabInteractions } from "../../layout/widget/Tab.js";
+import { FloatingWidgetHandle, useFloatingWidget, } from "../../layout/widget/FloatingWidget.js";
+import { useWidgetTabCloseAction } from "./useWidgetTabActions.js";
+import { NineZoneDispatchContext } from "../../layout/base/NineZone.js";
+import { ConfigurableUiContext } from "../../configurableui/ConfigurableUiContent.js";
+import { WidgetActions } from "../../layout/widget/WidgetActions.js";
+import { TabTarget } from "../../layout/target/TabTarget.js";
+import { TitleBarTarget } from "../../layout/target/TitleBarTarget.js";
+import { WidgetTarget } from "../../layout/target/WidgetTarget.js";
+import { WidgetOutline } from "../../layout/outline/WidgetOutline.js";
+import { PanelSideContext } from "../../layout/widget-panels/Panel.js";
+import { useDragWidgetHandle } from "../../layout/widget/TabBar.js";
+import { useBorders } from "../../layout/widget/PanelWidget.js";
+import { useTranslation } from "../../hooks/useTranslation.js";
+import { useWidgetDef } from "../../widget-panels/Content.js";
+const TabsContext = React.createContext(undefined);
+const Widget = React.forwardRef((props, forwardedRef) => {
+    const { handles, minimized, ...rest } = props;
+    const widgetId = useSafeContext(WidgetIdContext);
+    const dispatch = React.useContext(NineZoneDispatchContext);
+    const tabIds = useLayout((state) => getWidgetState(state, widgetId).tabs);
+    const activeTabId = useActiveTabId();
+    const [actionTabId, setActionTabId] = React.useState(undefined);
+    const [focusedTabId, setFocusedTabId] = React.useState(undefined);
+    const [anchored, setAnchored] = React.useState(false);
+    const [actionFocused, setActionFocused] = React.useState(false);
+    const tabElementsRef = React.useRef(new Map());
+    const hideTab = React.useCallback((id) => {
+        setActionTabId(undefined);
+        dispatch({
+            type: "WIDGET_TAB_HIDE",
+            id,
+        });
+        const tabIndex = tabIds.indexOf(id);
+        const nextTabIndex = tabIndex + 1 > tabIds.length - 1 ? tabIndex - 1 : tabIndex + 1;
+        if (nextTabIndex < 0)
+            return;
+        const nextTabId = tabIds[nextTabIndex];
+        const tabEl = tabElementsRef.current.get(nextTabId);
+        tabEl?.focus();
+    }, [dispatch, tabIds]);
+    const setTabElement = React.useCallback((id, element) => {
+        tabElementsRef.current.set(id, element);
+    }, []);
+    const [widgetRef, value] = useWidgetContextValue();
+    const ref = useRefs(forwardedRef, widgetRef);
+    return (React.createElement(WidgetContext.Provider, { value: value },
+        React.createElement(TabsContext.Provider, { value: {
+                actionTabId,
+                setActionTabId,
+                hideTab,
+                setTabElement,
+                anchored,
+                setAnchored,
+                actionFocused,
+                setActionFocused,
+                focusedTabId,
+                setFocusedTabId,
+            } },
+            React.createElement(Tabs.Wrapper, { ...rest, className: classnames("uifw-preview-widgetTabActions-widget_wrapper", props.className), value: minimized ? "" : activeTabId, focusActivationMode: "manual", ref: ref },
+                React.createElement(WidgetHandle, null),
+                React.createElement(Tabs.TabList, { className: "uifw-preview-widgetTabActions-widget_tabList" }, tabIds.map((tabId) => {
+                    return (React.createElement(TabIdContext.Provider, { key: tabId, value: tabId },
+                        React.createElement(Tab, null)));
+                })),
+                React.createElement(TabsActions, null),
+                React.createElement(Tabs.Panel, { value: activeTabId, className: "uifw-preview-widgetTabActions-widget_panel" },
+                    React.createElement(PanelContent, null)),
+                handles))));
+});
+Widget.displayName = "Widget";
+function Tab() {
+    const { actionTabId, actionFocused, setActionTabId, hideTab, setTabElement, focusedTabId, setFocusedTabId, } = useSafeContext(TabsContext);
+    const id = useSafeContext(TabIdContext);
+    const label = useLayout((state) => state.tabs[id].label);
+    const closeAction = useWidgetTabCloseAction(id);
+    const interactionsRef = useTabInteractions({});
+    const ref = React.useCallback((el) => {
+        setTabElement(id, el ?? undefined);
+    }, [id, setTabElement]);
+    return (React.createElement(Tabs.Tab, { className: "uifw-preview-widgetTabActions-widget_tab", value: id, ref: useRefs(ref, interactionsRef), onKeyDown: (e) => {
+            if (e.key === "Delete") {
+                e.preventDefault();
+                hideTab(id);
+            }
+        }, onFocus: () => {
+            setActionTabId(id);
+            setFocusedTabId(id);
+        }, onBlur: () => {
+            setFocusedTabId(undefined);
+        }, "data-_appui-mask": id === actionTabId && actionFocused ? "true" : undefined, "data-_appui-decoration": closeAction ? "true" : undefined, ...(!!focusedTabId
+            ? {
+                tabIndex: -1,
+            }
+            : undefined) },
+        React.createElement(TabIcon, null),
+        React.createElement(Tabs.TabLabel, { className: "uifw-preview-widgetTabActions-widget_label" }, label),
+        closeAction && React.createElement(CloseTabDecoration, null),
+        React.createElement(TabTarget, null)));
+}
+function TabIcon() {
+    const widgetDef = useWidgetDef();
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    const iconSpec = widgetDef?.initialConfig?.icon;
+    const icon = widgetDef?.initialConfig?.iconNode ??
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        (iconSpec ? React.createElement(Icon, { iconSpec: iconSpec }) : undefined);
+    if (!icon)
+        return null;
+    return React.createElement(Tabs.TabIcon, null, icon);
+}
+/**
+ * Decorative button to close the tab.
+ */
+function CloseTabDecoration() {
+    const { actionTabId, hideTab, setAnchored } = useSafeContext(TabsContext);
+    const id = useSafeContext(TabIdContext);
+    const label = useLayout((state) => state.tabs[id].label);
+    const ref = React.useRef(null);
+    const isActionTab = actionTabId === id;
+    React.useEffect(() => {
+        if (!isActionTab || !ref.current)
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            const entry = entries[0];
+            setAnchored(entry.isIntersecting);
+        }, { threshold: 1 });
+        observer.observe(ref.current);
+        return () => {
+            setAnchored(false);
+            observer.disconnect();
+        };
+    }, [isActionTab, setAnchored]);
+    const { translate } = useTranslation();
+    const closeLabel = translate("dialog.close");
+    return (React.createElement(IconButton, { as: Tabs.TabIcon, className: "uifw-preview-widgetTabActions-widget_decoration", styleType: "borderless", size: "small", label: `${closeLabel} ${label}`, "aria-hidden": "true", onClick: () => {
+            hideTab(id);
+        }, "data-_appui-action": isActionTab ? "true" : undefined, ref: ref },
+        React.createElement(SvgCloseSmall, null)));
+}
+/**
+ * Visually hidden button to expose decorative close action to screen readers.
+ * The action is anchored to the respective decoration when decoration is visible.
+ */
+function CloseTabAction() {
+    const { setActionTabId, hideTab, anchored, actionTabId, setActionFocused } = useSafeContext(TabsContext);
+    assert(!!actionTabId);
+    const label = useLayout((state) => state.tabs[actionTabId].label);
+    const closeAction = useWidgetTabCloseAction(actionTabId);
+    const { translate } = useTranslation();
+    const closeLabel = translate("dialog.close");
+    if (!closeAction)
+        return null;
+    return (React.createElement(VisuallyHidden, { as: "span", className: "uifw-preview-widgetTabActions-widget_action", "data-_appui-anchor": anchored ? "true" : undefined },
+        React.createElement(IconButton, { onFocus: () => setActionFocused(true), onBlur: () => {
+                setActionTabId(undefined);
+                setActionFocused(false);
+            }, label: `${closeLabel} ${label}`, styleType: "borderless", size: "small", onClick: () => {
+                hideTab(actionTabId);
+            } },
+            React.createElement(SvgCloseSmall, null))));
+}
+function TabsActions() {
+    const { actionTabId } = useSafeContext(TabsContext);
+    const widgetId = useSafeContext(WidgetIdContext);
+    const { widgetActions } = React.useContext(ConfigurableUiContext);
+    const tabIds = useLayout((state) => getWidgetState(state, widgetId).tabs);
+    const actionTab = tabIds.find((id) => id === actionTabId);
+    return (React.createElement(Tabs.Actions, { className: "uifw-preview-widgetTabActions-widget_actions", wrapperProps: {
+            className: "uifw-preview-widgetTabActions-widget_actionsWrapper",
+        } },
+        React.createElement(TitleBarTarget, { className: "uifw-preview-widgetTabActions-widget_titleBarTarget" }),
+        actionTab && React.createElement(CloseTabAction, null),
+        widgetActions ?? React.createElement(WidgetActions, null)));
+}
+function PanelContent() {
+    const side = React.useContext(PanelSideContext);
+    const ref = useWidgetContentContainer();
+    const showTarget = useLayout((state) => {
+        if (side) {
+            const panel = state.panels[side];
+            return panel.widgets.length > 1;
+        }
+        return true;
+    });
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "uifw-preview-widgetTabActions-widget_content", ref: ref }),
+        showTarget && React.createElement(WidgetTarget, null),
+        React.createElement(WidgetOutline, null)));
+}
+function WidgetHandle() {
+    const ref = useDragWidgetHandle();
+    return (React.createElement("div", { className: "uifw-preview-widgetTabActions-widget_handle", ref: ref }));
+}
+/** @internal */
+export function PanelWidget() {
+    const widgetId = useSafeContext(WidgetIdContext);
+    const widgetRef = useDragPanelWidget();
+    const borders = useBorders(widgetId);
+    return (React.createElement(Widget, { className: classnames("uifw-preview-widgetTabActions-widget_panelWidget", borders), ref: widgetRef }));
+}
+/** @internal */
+export function FloatingWidget() {
+    const { ref, style, hidden, minimized, resizable, dragged, isToolSettingsTab, maximizedWidget, } = useFloatingWidget();
+    return (React.createElement(Widget, { className: classnames("uifw-preview-widgetTabActions-widget_floating", maximizedWidget.classNames), handles: resizable ? React.createElement(ResizeHandles, null) : undefined, minimized: minimized, "data-_appui-dragged": dragged ? "true" : undefined, "data-_appui-hidden": hidden ? "true" : undefined, "data-_appui-minimized": minimized ? "true" : undefined, "data-_appui-tool-settings": isToolSettingsTab ? "true" : undefined, style: style, ref: ref }));
+}
+function ResizeHandle(props) {
+    return (React.createElement(FloatingWidgetHandle, { ...props, className: "uifw-preview-widgetTabActions-widget_resizeHandle" }));
+}
+function ResizeHandles() {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ResizeHandle, { handle: "left" }),
+        React.createElement(ResizeHandle, { handle: "top" }),
+        React.createElement(ResizeHandle, { handle: "right" }),
+        React.createElement(ResizeHandle, { handle: "bottom" }),
+        React.createElement(ResizeHandle, { handle: "topLeft" }),
+        React.createElement(ResizeHandle, { handle: "topRight" }),
+        React.createElement(ResizeHandle, { handle: "bottomLeft" }),
+        React.createElement(ResizeHandle, { handle: "bottomRight" })));
+}
+//# sourceMappingURL=Widget.js.map

package/lib/appui-react/preview/widget-tab-actions/Widget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Widget.js","sourceRoot":"","sources":["../../../../src/appui-react/preview/widget-tab-actions/Widget.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Widget\n */\n\nimport \"./Widget.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { assert } from \"@itwin/core-bentley\";\nimport { Icon } from \"@itwin/core-react\";\nimport { useRefs } from \"@itwin/core-react/internal\";\nimport { IconButton, Tabs, VisuallyHidden } from \"@itwin/itwinui-react\";\nimport { SvgCloseSmall } from \"@itwin/itwinui-icons-react\";\n\nimport {\n  useActiveTabId,\n  useDragPanelWidget,\n  useWidgetContextValue,\n  WidgetContext,\n  WidgetIdContext,\n} from \"../../layout/widget/Widget.js\";\nimport { useSafeContext } from \"../../hooks/useSafeContext.js\";\nimport { useLayout } from \"../../layout/base/LayoutStore.js\";\nimport { getWidgetState } from \"../../layout/state/internal/WidgetStateHelpers.js\";\nimport { TabIdContext } from \"../../layout/widget/ContentRenderer.js\";\nimport { useWidgetContentContainer } from \"../../layout/widget/ContentContainer.js\";\nimport { useTabInteractions } from \"../../layout/widget/Tab.js\";\nimport {\n  FloatingWidgetHandle,\n  useFloatingWidget,\n} from \"../../layout/widget/FloatingWidget.js\";\nimport { useWidgetTabCloseAction } from \"./useWidgetTabActions.js\";\nimport { NineZoneDispatchContext } from \"../../layout/base/NineZone.js\";\nimport { ConfigurableUiContext } from \"../../configurableui/ConfigurableUiContent.js\";\nimport { WidgetActions } from \"../../layout/widget/WidgetActions.js\";\nimport { TabTarget } from \"../../layout/target/TabTarget.js\";\nimport { TitleBarTarget } from \"../../layout/target/TitleBarTarget.js\";\nimport { WidgetTarget } from \"../../layout/target/WidgetTarget.js\";\nimport { WidgetOutline } from \"../../layout/outline/WidgetOutline.js\";\nimport { PanelSideContext } from \"../../layout/widget-panels/Panel.js\";\nimport { useDragWidgetHandle } from \"../../layout/widget/TabBar.js\";\nimport { useBorders } from \"../../layout/widget/PanelWidget.js\";\nimport { useTranslation } from \"../../hooks/useTranslation.js\";\nimport { useWidgetDef } from \"../../widget-panels/Content.js\";\n\nconst TabsContext = React.createContext<\n  | {\n      // Last focused tab, used to expose decorative actions to screen readers.\n      actionTabId: string | undefined;\n      setActionTabId: (id: string | undefined) => void;\n      // Describes if the action should be anchored to the decorative tab action.\n      anchored: boolean;\n      setAnchored: (anchored: boolean) => void;\n      hideTab: (id: string) => void;\n      setTabElement: (id: string, element: HTMLElement | undefined) => void;\n      // Describes if the tab action is focused.\n      actionFocused: boolean;\n      setActionFocused: (focused: boolean) => void;\n      // Track focused tab to focus the action (skips focus of active tab)\n      focusedTabId: string | undefined;\n      setFocusedTabId: (id: string | undefined) => void;\n    }\n  | undefined\n>(undefined);\n\ntype WidgetProps = React.ComponentProps<typeof Tabs.Wrapper> & {\n  minimized?: boolean;\n  handles?: React.ReactNode;\n};\n\nconst Widget = React.forwardRef<HTMLElement, WidgetProps>(\n  (props, forwardedRef) => {\n    const { handles, minimized, ...rest } = props;\n    const widgetId = useSafeContext(WidgetIdContext);\n    const dispatch = React.useContext(NineZoneDispatchContext);\n    const tabIds = useLayout((state) => getWidgetState(state, widgetId).tabs);\n    const activeTabId = useActiveTabId();\n    const [actionTabId, setActionTabId] = React.useState<string | undefined>(\n      undefined\n    );\n    const [focusedTabId, setFocusedTabId] = React.useState<string | undefined>(\n      undefined\n    );\n    const [anchored, setAnchored] = React.useState(false);\n    const [actionFocused, setActionFocused] = React.useState(false);\n    const tabElementsRef = React.useRef(\n      new Map<string, HTMLElement | undefined>()\n    );\n    const hideTab = React.useCallback(\n      (id: string) => {\n        setActionTabId(undefined);\n        dispatch({\n          type: \"WIDGET_TAB_HIDE\",\n          id,\n        });\n\n        const tabIndex = tabIds.indexOf(id);\n        const nextTabIndex =\n          tabIndex + 1 > tabIds.length - 1 ? tabIndex - 1 : tabIndex + 1;\n\n        if (nextTabIndex < 0) return;\n        const nextTabId = tabIds[nextTabIndex];\n        const tabEl = tabElementsRef.current.get(nextTabId);\n        tabEl?.focus();\n      },\n      [dispatch, tabIds]\n    );\n    const setTabElement = React.useCallback(\n      (id: string, element: HTMLElement | undefined) => {\n        tabElementsRef.current.set(id, element);\n      },\n      []\n    );\n\n    const [widgetRef, value] = useWidgetContextValue();\n    const ref = useRefs(forwardedRef, widgetRef);\n    return (\n      <WidgetContext.Provider value={value}>\n        <TabsContext.Provider\n          value={{\n            actionTabId,\n            setActionTabId,\n            hideTab,\n            setTabElement,\n            anchored,\n            setAnchored,\n            actionFocused,\n            setActionFocused,\n            focusedTabId,\n            setFocusedTabId,\n          }}\n        >\n          <Tabs.Wrapper\n            {...rest}\n            className={classnames(\n              \"uifw-preview-widgetTabActions-widget_wrapper\",\n              props.className\n            )}\n            value={minimized ? \"\" : activeTabId}\n            focusActivationMode=\"manual\"\n            ref={ref}\n          >\n            <WidgetHandle />\n            <Tabs.TabList className=\"uifw-preview-widgetTabActions-widget_tabList\">\n              {tabIds.map((tabId) => {\n                return (\n                  <TabIdContext.Provider key={tabId} value={tabId}>\n                    <Tab />\n                  </TabIdContext.Provider>\n                );\n              })}\n            </Tabs.TabList>\n\n            <TabsActions />\n\n            <Tabs.Panel\n              value={activeTabId}\n              className=\"uifw-preview-widgetTabActions-widget_panel\"\n            >\n              <PanelContent />\n            </Tabs.Panel>\n\n            {handles}\n          </Tabs.Wrapper>\n        </TabsContext.Provider>\n      </WidgetContext.Provider>\n    );\n  }\n);\nWidget.displayName = \"Widget\";\n\nfunction Tab() {\n  const {\n    actionTabId,\n    actionFocused,\n    setActionTabId,\n    hideTab,\n    setTabElement,\n    focusedTabId,\n    setFocusedTabId,\n  } = useSafeContext(TabsContext);\n  const id = useSafeContext(TabIdContext);\n  const label = useLayout((state) => state.tabs[id].label);\n  const closeAction = useWidgetTabCloseAction(id);\n  const interactionsRef = useTabInteractions({});\n  const ref = React.useCallback(\n    (el: HTMLElement | null) => {\n      setTabElement(id, el ?? undefined);\n    },\n    [id, setTabElement]\n  );\n  return (\n    <Tabs.Tab\n      className=\"uifw-preview-widgetTabActions-widget_tab\"\n      value={id}\n      ref={useRefs(ref, interactionsRef)}\n      onKeyDown={(e) => {\n        if (e.key === \"Delete\") {\n          e.preventDefault();\n          hideTab(id);\n        }\n      }}\n      onFocus={() => {\n        setActionTabId(id);\n        setFocusedTabId(id);\n      }}\n      onBlur={() => {\n        setFocusedTabId(undefined);\n      }}\n      data-_appui-mask={\n        id === actionTabId && actionFocused ? \"true\" : undefined\n      }\n      data-_appui-decoration={closeAction ? \"true\" : undefined}\n      {...(!!focusedTabId\n        ? {\n            tabIndex: -1,\n          }\n        : undefined)}\n    >\n      <TabIcon />\n      <Tabs.TabLabel className=\"uifw-preview-widgetTabActions-widget_label\">\n        {label}\n      </Tabs.TabLabel>\n      {closeAction && <CloseTabDecoration />}\n      <TabTarget />\n    </Tabs.Tab>\n  );\n}\n\nfunction TabIcon() {\n  const widgetDef = useWidgetDef();\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  const iconSpec = widgetDef?.initialConfig?.icon;\n  const icon =\n    widgetDef?.initialConfig?.iconNode ??\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    (iconSpec ? <Icon iconSpec={iconSpec} /> : undefined);\n\n  if (!icon) return null;\n  return <Tabs.TabIcon>{icon}</Tabs.TabIcon>;\n}\n\n/**\n * Decorative button to close the tab.\n */\nfunction CloseTabDecoration() {\n  const { actionTabId, hideTab, setAnchored } = useSafeContext(TabsContext);\n  const id = useSafeContext(TabIdContext);\n  const label = useLayout((state) => state.tabs[id].label);\n\n  const ref = React.useRef<HTMLButtonElement | null>(null);\n  const isActionTab = actionTabId === id;\n  React.useEffect(() => {\n    if (!isActionTab || !ref.current) return;\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        const entry = entries[0];\n        setAnchored(entry.isIntersecting);\n      },\n      { threshold: 1 }\n    );\n    observer.observe(ref.current);\n    return () => {\n      setAnchored(false);\n      observer.disconnect();\n    };\n  }, [isActionTab, setAnchored]);\n\n  const { translate } = useTranslation();\n  const closeLabel = translate(\"dialog.close\");\n  return (\n    <IconButton\n      as={Tabs.TabIcon}\n      className=\"uifw-preview-widgetTabActions-widget_decoration\"\n      styleType=\"borderless\"\n      size=\"small\"\n      label={`${closeLabel} ${label}`}\n      aria-hidden=\"true\"\n      onClick={() => {\n        hideTab(id);\n      }}\n      data-_appui-action={isActionTab ? \"true\" : undefined}\n      ref={ref}\n    >\n      <SvgCloseSmall />\n    </IconButton>\n  );\n}\n\n/**\n * Visually hidden button to expose decorative close action to screen readers.\n * The action is anchored to the respective decoration when decoration is visible.\n */\nfunction CloseTabAction() {\n  const { setActionTabId, hideTab, anchored, actionTabId, setActionFocused } =\n    useSafeContext(TabsContext);\n  assert(!!actionTabId);\n  const label = useLayout((state) => state.tabs[actionTabId].label);\n  const closeAction = useWidgetTabCloseAction(actionTabId);\n\n  const { translate } = useTranslation();\n  const closeLabel = translate(\"dialog.close\");\n\n  if (!closeAction) return null;\n  return (\n    <VisuallyHidden\n      as=\"span\"\n      className=\"uifw-preview-widgetTabActions-widget_action\"\n      data-_appui-anchor={anchored ? \"true\" : undefined}\n    >\n      <IconButton\n        onFocus={() => setActionFocused(true)}\n        onBlur={() => {\n          setActionTabId(undefined);\n          setActionFocused(false);\n        }}\n        label={`${closeLabel} ${label}`}\n        styleType=\"borderless\"\n        size=\"small\"\n        onClick={() => {\n          hideTab(actionTabId);\n        }}\n      >\n        <SvgCloseSmall />\n      </IconButton>\n    </VisuallyHidden>\n  );\n}\n\nfunction TabsActions() {\n  const { actionTabId } = useSafeContext(TabsContext);\n  const widgetId = useSafeContext(WidgetIdContext);\n  const { widgetActions } = React.useContext(ConfigurableUiContext);\n  const tabIds = useLayout((state) => getWidgetState(state, widgetId).tabs);\n  const actionTab = tabIds.find((id) => id === actionTabId);\n  return (\n    <Tabs.Actions\n      className=\"uifw-preview-widgetTabActions-widget_actions\"\n      wrapperProps={{\n        className: \"uifw-preview-widgetTabActions-widget_actionsWrapper\",\n      }}\n    >\n      <TitleBarTarget className=\"uifw-preview-widgetTabActions-widget_titleBarTarget\" />\n      {actionTab && <CloseTabAction />}\n      {widgetActions ?? <WidgetActions />}\n    </Tabs.Actions>\n  );\n}\n\nfunction PanelContent() {\n  const side = React.useContext(PanelSideContext);\n  const ref = useWidgetContentContainer();\n  const showTarget = useLayout((state) => {\n    if (side) {\n      const panel = state.panels[side];\n      return panel.widgets.length > 1;\n    }\n    return true;\n  });\n  return (\n    <>\n      <div className=\"uifw-preview-widgetTabActions-widget_content\" ref={ref} />\n      {showTarget && <WidgetTarget />}\n      <WidgetOutline />\n    </>\n  );\n}\n\nfunction WidgetHandle() {\n  const ref = useDragWidgetHandle();\n  return (\n    <div className=\"uifw-preview-widgetTabActions-widget_handle\" ref={ref} />\n  );\n}\n\n/** @internal */\nexport function PanelWidget() {\n  const widgetId = useSafeContext(WidgetIdContext);\n  const widgetRef = useDragPanelWidget();\n  const borders = useBorders(widgetId);\n  return (\n    <Widget\n      className={classnames(\n        \"uifw-preview-widgetTabActions-widget_panelWidget\",\n        borders\n      )}\n      ref={widgetRef}\n    />\n  );\n}\n\n/** @internal */\nexport function FloatingWidget() {\n  const {\n    ref,\n    style,\n    hidden,\n    minimized,\n    resizable,\n    dragged,\n    isToolSettingsTab,\n    maximizedWidget,\n  } = useFloatingWidget();\n  return (\n    <Widget\n      className={classnames(\n        \"uifw-preview-widgetTabActions-widget_floating\",\n        maximizedWidget.classNames\n      )}\n      handles={resizable ? <ResizeHandles /> : undefined}\n      minimized={minimized}\n      data-_appui-dragged={dragged ? \"true\" : undefined}\n      data-_appui-hidden={hidden ? \"true\" : undefined}\n      data-_appui-minimized={minimized ? \"true\" : undefined}\n      data-_appui-tool-settings={isToolSettingsTab ? \"true\" : undefined}\n      style={style}\n      ref={ref}\n    />\n  );\n}\n\nfunction ResizeHandle(\n  props: Pick<React.ComponentProps<typeof FloatingWidgetHandle>, \"handle\">\n) {\n  return (\n    <FloatingWidgetHandle\n      {...props}\n      className=\"uifw-preview-widgetTabActions-widget_resizeHandle\"\n    />\n  );\n}\n\nfunction ResizeHandles() {\n  return (\n    <>\n      <ResizeHandle handle=\"left\" />\n      <ResizeHandle handle=\"top\" />\n      <ResizeHandle handle=\"right\" />\n      <ResizeHandle handle=\"bottom\" />\n      <ResizeHandle handle=\"topLeft\" />\n      <ResizeHandle handle=\"topRight\" />\n      <ResizeHandle handle=\"bottomLeft\" />\n      <ResizeHandle handle=\"bottomRight\" />\n    </>\n  );\n}\n"]}

package/lib/appui-react/preview/widget-tab-actions/Widget.scss

@@ -0,0 +1,198 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "~@itwin/core-react/lib/core-react/z-index" as *;
+@use "../../layout/widgetopacity" as *;
+@use "../../layout/widget/variables" as *;
+
+$border-width: 1px;
+
+@layer appui.preview {
+  .uifw-preview-widgetTabActions-widget_wrapper {
+    flex: 1;
+    grid-template-rows: min-content 1fr;
+    grid-template-columns: auto 1fr;
+    isolation: isolate;
+  }
+
+  .uifw-preview-widgetTabActions-widget_panelWidget {
+    border: 0px solid var(--iui-color-border);
+
+    &:where(.nz-border-top) {
+      border-block-start-width: $border-width;
+    }
+
+    &:where(.nz-border-bottom) {
+      border-block-end-width: $border-width;
+    }
+
+    &:where(.nz-border-left) {
+      border-inline-start-width: $border-width;
+    }
+
+    &:where(.nz-border-right) {
+      border-inline-end-width: $border-width;
+    }
+  }
+
+  .uifw-preview-widgetTabActions-widget_floating {
+    position: absolute;
+    min-inline-size: 200px;
+    min-block-size: 120px;
+    inline-size: auto;
+    transition: opacity var(--iui-duration-2) ease;
+    border: $border-width solid var(--iui-color-border);
+    contain: none;
+
+    @include uicore-z-index(dragged-widget);
+    @include nz-widget-opacity;
+
+    &:where([data-_appui-dragged="true"]) {
+      pointer-events: none;
+      opacity: $nz-dragged-widget-opacity;
+
+      @include uicore-z-index(drag-preview);
+    }
+
+    &:where([data-_appui-hidden="true"]) {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    &:where([data-_appui-minimized="true"]) {
+      .uifw-preview-widgetTabActions-widget_panel {
+        block-size: 0;
+        border: 0;
+        overflow: hidden;
+      }
+    }
+
+    &:where([data-_appui-tool-settings="true"]) {
+      min-block-size: 60px;
+    }
+  }
+
+  .uifw-preview-widgetTabActions-widget_handle {
+    grid-column: tabs / tabs-actions;
+    grid-row: tabs;
+    position: relative;
+    cursor: grab;
+    user-select: none;
+    -webkit-user-select: none;
+    background-color: var(--iui-color-background-hover);
+  }
+
+  .uifw-preview-widgetTabActions-widget_tabList {
+    grid-area: tabs;
+    z-index: 1;
+    overscroll-behavior-x: none;
+    margin-inline: -1px; // Don't use $border-width as this is accounting for iTwinUI's tab border
+    margin-block-start: -1px; // Don't use $border-width as this is accounting for iTwinUI's tab border
+    container-type: normal;
+  }
+
+  .uifw-preview-widgetTabActions-widget_tab {
+    grid-template-areas:
+      "icon label decoration"
+      "icon description decoration";
+    grid-template-rows: auto minmax(0, auto);
+    grid-template-columns: auto minmax(min-content, 1fr) auto;
+
+    min-inline-size: min-content;
+
+    @media (any-hover: hover) {
+      &:where(:not(:hover, :focus-visible)) {
+        --_appui-decoration-opacity: 0;
+      }
+    }
+
+    &:where([data-_appui-decoration]) {
+      &:where(:hover, :focus-visible, [data-_appui-mask="true"])
+        .uifw-preview-widgetTabActions-widget_label {
+        mask-image: linear-gradient(
+          270deg,
+          transparent 0%,
+          transparent 24px,
+          #000 32px,
+          #000 100%
+        );
+      }
+    }
+  }
+
+  .uifw-preview-widgetTabActions-widget_panel {
+    padding: 0;
+    position: relative;
+    display: flex;
+    border-block-end: 0;
+    border-inline: 0;
+    min-block-size: 0;
+  }
+
+  .uifw-preview-widgetTabActions-widget_content {
+    min-inline-size: 0;
+    display: flex;
+    inline-size: 100%;
+  }
+
+  .uifw-preview-widgetTabActions-widget_label {
+    grid-area: label / decoration;
+    -webkit-line-clamp: 1;
+    user-select: none;
+  }
+
+  .uifw-preview-widgetTabActions-widget_decoration {
+    grid-area: decoration;
+    justify-self: end;
+    opacity: var(--_appui-decoration-opacity);
+    block-size: var(--_iui-field-height);
+
+    &:where([data-_appui-action="true"]) {
+      anchor-name: --_appui-tab-action;
+    }
+  }
+
+  .uifw-preview-widgetTabActions-widget_actionsWrapper {
+    margin-inline-start: 0;
+    padding-inline-start: var(--iui-size-s);
+
+    &::before,
+    &::after {
+      display: none;
+    }
+
+    &:has(
+        .uifw-preview-widgetTabActions-widget_titleBarTarget:not(.nz-hidden)
+      ) {
+      position: relative;
+    }
+  }
+
+  .uifw-preview-widgetTabActions-widget_titleBarTarget {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+  }
+
+  .uifw-preview-widgetTabActions-widget_actions {
+    flex: 1;
+    justify-content: flex-end;
+  }
+
+  .uifw-preview-widgetTabActions-widget_resizeHandle {
+    z-index: 1;
+  }
+
+  @supports (anchor-name: --_appui-tab-action) {
+    .uifw-preview-widgetTabActions-widget_action {
+      &:where([data-_appui-anchor="true"]) {
+        position: absolute;
+        position-anchor: --_appui-tab-action;
+        right: anchor(right);
+        align-self: anchor-center;
+        z-index: 1;
+      }
+    }
+  }
+}

package/lib/appui-react/preview/widget-tab-actions/useWidgetTabActions.d.ts

@@ -0,0 +1,6 @@
+import type { TabState } from "../../layout/state/TabState.js";
+/** @internal */
+export declare function useWidgetTabActions(): boolean;
+/** @internal */
+export declare function useWidgetTabCloseAction(tabId: TabState["id"]): boolean;
+//# sourceMappingURL=useWidgetTabActions.d.ts.map

package/lib/appui-react/preview/widget-tab-actions/useWidgetTabActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWidgetTabActions.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/preview/widget-tab-actions/useWidgetTabActions.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAI/D,gBAAgB;AAChB,wBAAgB,mBAAmB,YAGlC;AAED,gBAAgB;AAChB,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,WAI5D"}

package/lib/appui-react/preview/widget-tab-actions/useWidgetTabActions.js

@@ -0,0 +1,18 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import { useControlWidgetVisibility } from "../control-widget-visibility/CloseWidgetButton.js";
+import { usePreviewFeatures } from "../PreviewFeatures.js";
+/** @internal */
+export function useWidgetTabActions() {
+    const { widgetTabActions } = usePreviewFeatures();
+    return !!widgetTabActions;
+}
+/** @internal */
+export function useWidgetTabCloseAction(tabId) {
+    const { widgetTabActions } = usePreviewFeatures();
+    const controlWidgetVisibility = useControlWidgetVisibility(tabId);
+    return !!widgetTabActions && !!controlWidgetVisibility;
+}
+//# sourceMappingURL=useWidgetTabActions.js.map

package/lib/appui-react/preview/widget-tab-actions/useWidgetTabActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWidgetTabActions.js","sourceRoot":"","sources":["../../../../src/appui-react/preview/widget-tab-actions/useWidgetTabActions.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAGhG,OAAO,EAAE,0BAA0B,EAAE,MAAM,mDAAmD,CAAC;AAC/F,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAE3D,gBAAgB;AAChB,MAAM,UAAU,mBAAmB;IACjC,MAAM,EAAE,gBAAgB,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAClD,OAAO,CAAC,CAAC,gBAAgB,CAAC;AAC5B,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,uBAAuB,CAAC,KAAqB;IAC3D,MAAM,EAAE,gBAAgB,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAClD,MAAM,uBAAuB,GAAG,0BAA0B,CAAC,KAAK,CAAC,CAAC;IAClE,OAAO,CAAC,CAAC,gBAAgB,IAAI,CAAC,CAAC,uBAAuB,CAAC;AACzD,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\nimport type { TabState } from \"../../layout/state/TabState.js\";\nimport { useControlWidgetVisibility } from \"../control-widget-visibility/CloseWidgetButton.js\";\nimport { usePreviewFeatures } from \"../PreviewFeatures.js\";\n\n/** @internal */\nexport function useWidgetTabActions() {\n  const { widgetTabActions } = usePreviewFeatures();\n  return !!widgetTabActions;\n}\n\n/** @internal */\nexport function useWidgetTabCloseAction(tabId: TabState[\"id\"]) {\n  const { widgetTabActions } = usePreviewFeatures();\n  const controlWidgetVisibility = useControlWidgetVisibility(tabId);\n  return !!widgetTabActions && !!controlWidgetVisibility;\n}\n"]}

package/lib/cjs/appui-react/layout/target/TitleBarTarget.scss

@@ -4,14 +4,16 @@
  *--------------------------------------------------------------------------------------------*/
 @use "~@itwin/core-react/lib/core-react/z-index" as *;
 
-.nz-target-titleBarTarget {
-  flex: 1 1 0;
-  position: relative;
-  overflow: hidden;
+@layer appui.component {
+  .nz-target-titleBarTarget {
+    flex: 1 1 0;
+    position: relative;
+    overflow: hidden;
 
-  @include uicore-z-index(drop-target);
+    @include uicore-z-index(drop-target);
 
-  &.nz-hidden {
-    display: none;
+    &.nz-hidden {
+      display: none;
+    }
   }
 }

package/lib/cjs/appui-react/layout/widget/widget-content-layout/header/HeaderIconToolbar.scss

@@ -1,16 +1,17 @@
 @layer appui.component {
   .nz-widget-widgetContentLayout-header-headerIconToolbar {
+    display: flex;
     --_appui-icon-size: var(--iui-component-height);
     --_appui-max-search-width: 200px;
     min-width: var(--_appui-icon-size);
     min-height: var(--_appui-icon-size);
 
     &[data-_appui-icon-size="small"] {
-      --icon-size: var(--iui-component-height-small);
+      --_appui-icon-size: var(--iui-component-height-small);
     }
 
     &[data-_appui-icon-size="large"] {
-      --icon-size: var(--iui-component-height-large);
+      --_appui-icon-size: var(--iui-component-height-large);
     }
 
     &[data-_appui-search-expanded="true"] {
@@ -40,5 +41,11 @@
         inset-block: unset;
       }
     }
+
+    // when icon-size is small, the button width is 2px wider than the icon size due to a transparent border,
+    // so we need to remove the border to make it the same width as the icon
+    .nz-header-overflow-button {
+      border: 0px;
+    }
   }
 }