@itwin/appui-react 5.19.0 → 5.21.0

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

@@ -3,57 +3,10 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 
-.nz-widget-menuTab {
-  display: flex;
-  line-height: 2em;
-  height: 2em;
-  cursor: pointer;
-  user-select: none;
-  -webkit-user-select: none;
-  padding-right: 3em;
-  padding-left: 0.5em;
-
-  &.nz-no-icon {
-    padding-left: 1.25em;
-  }
-
-  > .nz-icon {
-    width: 2em;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  > .nz-badge {
+@layer appui.component {
+  .nz-widget-menuTab_badge {
     position: absolute;
-    left: 0.25em;
-  }
-
-  > span {
-    max-width: 15em;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  > .nz-checkmark {
-    position: absolute;
-    right: 0.75em;
-    border-style: solid;
-    border-color: var(--iui-color-border-accent);
-    border-width: 0 0.15em 0.15em 0;
-    width: 0.5em;
-    height: 1em;
-    transform: rotate(45deg);
-
-    &.nz-hidden {
-      display: none;
-    }
-  }
-
-  @media (hover: hover) {
-    &:hover {
-      color: var(--iui-color-text-accent);
-    }
+    top: 0;
+    left: 0;
   }
 }

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

@@ -3,9 +3,8 @@
  */
 import "./Overflow.scss";
 import * as React from "react";
-/** @internal */
-export interface WidgetOverflowProps {
-    children?: React.ReactNode;
+interface WidgetOverflowProps {
+    items: React.ReactElement[];
     hidden?: boolean;
     onResize?: (w: number) => void;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Overflow.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget/Overflow.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,iBAAiB,CAAC;AAEzB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,gBAAgB;AAChB,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAED,gBAAgB;AAChB,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAqCxD;AAED,UAAU,yBAAyB;IACjC,KAAK,IAAI,IAAI,CAAC;CACf;AAED,gBAAgB;AAChB,eAAO,MAAM,qBAAqB,sDAEtB,CAAC"}
+{"version":3,"file":"Overflow.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget/Overflow.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,iBAAiB,CAAC;AAEzB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,UAAU,mBAAmB;IAC3B,KAAK,EAAE,KAAK,CAAC,YAAY,EAAE,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAED,gBAAgB;AAChB,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAoCxD;AAED,UAAU,yBAAyB;IACjC,KAAK,IAAI,IAAI,CAAC;CACf;AAED,gBAAgB;AAChB,eAAO,MAAM,qBAAqB,sDAEtB,CAAC"}

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

@@ -11,7 +11,7 @@ import * as React from "react";
 import { useResizeObserver } from "@itwin/core-react/internal";
 import { PanelSideContext } from "../widget-panels/Panel.js";
 import { useLayout } from "../base/LayoutStore.js";
-import { Popover } from "@itwin/itwinui-react";
+import { DropdownMenu } from "@itwin/itwinui-react";
 import { SvgChevronRightSmall } from "@itwin/itwinui-icons-react";
 import { TabBarButton } from "./Button.js";
 import { useTranslation } from "../../hooks/useTranslation.js";
@@ -31,7 +31,7 @@ export function WidgetOverflow(props) {
     const { translate } = useTranslation();
     const moreWidgetsTitle = translate("widget.tooltips.moreWidgets");
     return (React.createElement(WidgetOverflowContext.Provider, { value: overflowContext },
-        React.createElement(Popover, { className: "nz-widget-overflow_menu", visible: open, onVisibleChange: setOpen, content: props.children, applyBackground: true },
+        React.createElement(DropdownMenu, { className: "nz-widget-overflow_menu", menuItems: props.items, visible: open, onVisibleChange: setOpen },
             React.createElement(TabBarButton, { label: moreWidgetsTitle, className: classnames("nz-widget-overflow", props.hidden && "nz-hidden"), ref: resizeObserverRef },
                 React.createElement(SvgChevronRightSmall, null)))));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Overflow.js","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget/Overflow.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,iBAAiB,CAAC;AACzB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAS/D,gBAAgB;AAChB,MAAM,UAAU,cAAc,CAAC,KAA0B;IACvD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,iBAAiB,GAAG,iBAAiB,CAAiB,KAAK,CAAC,QAAQ,CAAC,CAAC;IAC5E,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,OAAO,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,aAAa,CAAC,WAAW,CAAC,CAAC;IAC3B,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,CAA4B,GAAG,EAAE;QACpE,OAAO;YACL,KAAK,EAAE,WAAW;SACnB,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,MAAM,EAAE,SAAS,EAAE,GAAG,cAAc,EAAE,CAAC;IACvC,MAAM,gBAAgB,GAAG,SAAS,CAAC,6BAA6B,CAAC,CAAC;IAClE,OAAO,CACL,oBAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,eAAe;QACpD,oBAAC,OAAO,IACN,SAAS,EAAC,yBAAyB,EACnC,OAAO,EAAE,IAAI,EACb,eAAe,EAAE,OAAO,EACxB,OAAO,EAAE,KAAK,CAAC,QAAQ,EACvB,eAAe;YAEf,oBAAC,YAAY,IACX,KAAK,EAAE,gBAAgB,EACvB,SAAS,EAAE,UAAU,CACnB,oBAAoB,EACpB,KAAK,CAAC,MAAM,IAAI,WAAW,CAC5B,EACD,GAAG,EAAE,iBAAiB;gBAEtB,oBAAC,oBAAoB,OAAG,CACX,CACP,CACqB,CAClC,CAAC;AACJ,CAAC;AAMD,gBAAgB;AAChB,MAAM,CAAC,MAAM,qBAAqB,GAAG,KAAK,CAAC,aAAa,CAEtD,SAAS,CAAC,CAAC;AACb,qBAAqB,CAAC,WAAW,GAAG,0BAA0B,CAAC;AAE/D,SAAS,aAAa,CAAC,OAAmB;IACxC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAChD,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE,CACpC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAC5C,CAAC;IACF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,SAAS,EAAE,CAAC;YACd,OAAO,EAAE,CAAC;QACZ,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;AAC3B,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 \"./Overflow.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { useResizeObserver } from \"@itwin/core-react/internal\";\nimport { PanelSideContext } from \"../widget-panels/Panel.js\";\nimport { useLayout } from \"../base/LayoutStore.js\";\nimport { Popover } from \"@itwin/itwinui-react\";\nimport { SvgChevronRightSmall } from \"@itwin/itwinui-icons-react\";\nimport { TabBarButton } from \"./Button.js\";\nimport { useTranslation } from \"../../hooks/useTranslation.js\";\n\n/** @internal */\nexport interface WidgetOverflowProps {\n  children?: React.ReactNode;\n  hidden?: boolean;\n  onResize?: (w: number) => void;\n}\n\n/** @internal */\nexport function WidgetOverflow(props: WidgetOverflowProps) {\n  const [open, setOpen] = React.useState(false);\n  const resizeObserverRef = useResizeObserver<HTMLDivElement>(props.onResize);\n  const handleClose = React.useCallback(() => {\n    setOpen(false);\n  }, []);\n  usePanelPopup(handleClose);\n  const overflowContext = React.useMemo<WidgetOverflowContextArgs>(() => {\n    return {\n      close: handleClose,\n    };\n  }, [handleClose]);\n\n  const { translate } = useTranslation();\n  const moreWidgetsTitle = translate(\"widget.tooltips.moreWidgets\");\n  return (\n    <WidgetOverflowContext.Provider value={overflowContext}>\n      <Popover\n        className=\"nz-widget-overflow_menu\"\n        visible={open}\n        onVisibleChange={setOpen}\n        content={props.children}\n        applyBackground\n      >\n        <TabBarButton\n          label={moreWidgetsTitle}\n          className={classnames(\n            \"nz-widget-overflow\",\n            props.hidden && \"nz-hidden\"\n          )}\n          ref={resizeObserverRef}\n        >\n          <SvgChevronRightSmall />\n        </TabBarButton>\n      </Popover>\n    </WidgetOverflowContext.Provider>\n  );\n}\n\ninterface WidgetOverflowContextArgs {\n  close(): void;\n}\n\n/** @internal */\nexport const WidgetOverflowContext = React.createContext<\n  WidgetOverflowContextArgs | undefined\n>(undefined);\nWidgetOverflowContext.displayName = \"nz:WidgetOverflowContext\";\n\nfunction usePanelPopup(onClose: () => void) {\n  const side = React.useContext(PanelSideContext);\n  const collapsed = useLayout((state) =>\n    side ? state.panels[side].collapsed : false\n  );\n  React.useEffect(() => {\n    if (collapsed) {\n      onClose();\n    }\n  }, [collapsed, onClose]);\n}\n"]}
+{"version":3,"file":"Overflow.js","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget/Overflow.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,iBAAiB,CAAC;AACzB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAQ/D,gBAAgB;AAChB,MAAM,UAAU,cAAc,CAAC,KAA0B;IACvD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,iBAAiB,GAAG,iBAAiB,CAAiB,KAAK,CAAC,QAAQ,CAAC,CAAC;IAC5E,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,OAAO,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,aAAa,CAAC,WAAW,CAAC,CAAC;IAC3B,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,CAA4B,GAAG,EAAE;QACpE,OAAO;YACL,KAAK,EAAE,WAAW;SACnB,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,MAAM,EAAE,SAAS,EAAE,GAAG,cAAc,EAAE,CAAC;IACvC,MAAM,gBAAgB,GAAG,SAAS,CAAC,6BAA6B,CAAC,CAAC;IAClE,OAAO,CACL,oBAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,eAAe;QACpD,oBAAC,YAAY,IACX,SAAS,EAAC,yBAAyB,EACnC,SAAS,EAAE,KAAK,CAAC,KAAK,EACtB,OAAO,EAAE,IAAI,EACb,eAAe,EAAE,OAAO;YAExB,oBAAC,YAAY,IACX,KAAK,EAAE,gBAAgB,EACvB,SAAS,EAAE,UAAU,CACnB,oBAAoB,EACpB,KAAK,CAAC,MAAM,IAAI,WAAW,CAC5B,EACD,GAAG,EAAE,iBAAiB;gBAEtB,oBAAC,oBAAoB,OAAG,CACX,CACF,CACgB,CAClC,CAAC;AACJ,CAAC;AAMD,gBAAgB;AAChB,MAAM,CAAC,MAAM,qBAAqB,GAAG,KAAK,CAAC,aAAa,CAEtD,SAAS,CAAC,CAAC;AACb,qBAAqB,CAAC,WAAW,GAAG,0BAA0B,CAAC;AAE/D,SAAS,aAAa,CAAC,OAAmB;IACxC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAChD,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE,CACpC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAC5C,CAAC;IACF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,SAAS,EAAE,CAAC;YACd,OAAO,EAAE,CAAC;QACZ,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;AAC3B,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 \"./Overflow.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { useResizeObserver } from \"@itwin/core-react/internal\";\nimport { PanelSideContext } from \"../widget-panels/Panel.js\";\nimport { useLayout } from \"../base/LayoutStore.js\";\nimport { DropdownMenu } from \"@itwin/itwinui-react\";\nimport { SvgChevronRightSmall } from \"@itwin/itwinui-icons-react\";\nimport { TabBarButton } from \"./Button.js\";\nimport { useTranslation } from \"../../hooks/useTranslation.js\";\n\ninterface WidgetOverflowProps {\n  items: React.ReactElement[];\n  hidden?: boolean;\n  onResize?: (w: number) => void;\n}\n\n/** @internal */\nexport function WidgetOverflow(props: WidgetOverflowProps) {\n  const [open, setOpen] = React.useState(false);\n  const resizeObserverRef = useResizeObserver<HTMLDivElement>(props.onResize);\n  const handleClose = React.useCallback(() => {\n    setOpen(false);\n  }, []);\n  usePanelPopup(handleClose);\n  const overflowContext = React.useMemo<WidgetOverflowContextArgs>(() => {\n    return {\n      close: handleClose,\n    };\n  }, [handleClose]);\n\n  const { translate } = useTranslation();\n  const moreWidgetsTitle = translate(\"widget.tooltips.moreWidgets\");\n  return (\n    <WidgetOverflowContext.Provider value={overflowContext}>\n      <DropdownMenu\n        className=\"nz-widget-overflow_menu\"\n        menuItems={props.items}\n        visible={open}\n        onVisibleChange={setOpen}\n      >\n        <TabBarButton\n          label={moreWidgetsTitle}\n          className={classnames(\n            \"nz-widget-overflow\",\n            props.hidden && \"nz-hidden\"\n          )}\n          ref={resizeObserverRef}\n        >\n          <SvgChevronRightSmall />\n        </TabBarButton>\n      </DropdownMenu>\n    </WidgetOverflowContext.Provider>\n  );\n}\n\ninterface WidgetOverflowContextArgs {\n  close(): void;\n}\n\n/** @internal */\nexport const WidgetOverflowContext = React.createContext<\n  WidgetOverflowContextArgs | undefined\n>(undefined);\nWidgetOverflowContext.displayName = \"nz:WidgetOverflowContext\";\n\nfunction usePanelPopup(onClose: () => void) {\n  const side = React.useContext(PanelSideContext);\n  const collapsed = useLayout((state) =>\n    side ? state.panels[side].collapsed : false\n  );\n  React.useEffect(() => {\n    if (collapsed) {\n      onClose();\n    }\n  }, [collapsed, onClose]);\n}\n"]}

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

@@ -7,7 +7,3 @@
     display: none;
   }
 }
-
-.nz-widget-overflow_menu {
-  padding-block: var(--iui-size-xs);
-}

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

@@ -3,7 +3,6 @@
  */
 import "./Tab.scss";
 import * as React from "react";
-import type { CommonProps } from "@itwin/core-react";
 import type { TabState } from "../state/TabState.js";
 /** @internal */
 export interface WidgetTabProviderProps extends TabPositionContextArgs {
@@ -12,12 +11,9 @@ export interface WidgetTabProviderProps extends TabPositionContextArgs {
 }
 /** @internal */
 export declare function WidgetTabProvider({ id, first, firstInactive, last, showOnlyTabIcon, }: WidgetTabProviderProps): React.JSX.Element;
-/** Properties of [[WidgetTab]] component.
- * @internal
- */
-export interface WidgetTabProps extends CommonProps {
+interface WidgetTabProps {
     badge?: React.ReactNode;
-    icon?: React.ReactNode;
+    icon?: React.ReactElement;
 }
 /** Component that displays a tab in a side panel widget.
  * @internal
@@ -44,4 +40,5 @@ export declare const TabPositionContext: React.Context<TabPositionContextArgs>;
 export declare const IconOnlyOnWidgetTabContext: React.Context<boolean>;
 /** @internal */
 export declare const ShowActiveWidgetLabelContext: React.Context<boolean>;
+export {};
 //# sourceMappingURL=Tab.d.ts.map

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

@@ -1 +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;AAG/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAerD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAuBrD,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;AAEH,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBAS9C;AAmED,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,4CAqLxB;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;AAG9E,gBAAgB;AAChB,eAAO,MAAM,4BAA4B,wBAAsC,CAAC"}
+{"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;AAkB/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAuBrD,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;AAGD,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAC3B;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBAS9C;AAkED,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,4CAqLxB;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;AAG9E,gBAAgB;AAChB,eAAO,MAAM,4BAA4B,wBAAsC,CAAC"}

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

@@ -12,6 +12,7 @@ import { Key } from "ts-key-enum";
 import { assert } from "@itwin/core-bentley";
 import { Timer } from "@itwin/core-react";
 import { Point, Rectangle, useRefs, useResizeObserver, } from "@itwin/core-react/internal";
+import { Tooltip } from "@itwin/itwinui-react";
 import { useDragTab } from "../base/DragManager.js";
 import { MeasureContext, NineZoneDispatchContext, ShowWidgetIconContext, TabNodeContext, } from "../base/NineZone.js";
 import { usePointerCaptor } from "../base/usePointerCaptor.js";
@@ -72,16 +73,17 @@ function WidgetTabComponent(props) {
     const pointerCaptorRef = useTabInteractions({ clickOnly: maximizedWidget });
     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 className = classnames("nz-widget-tab", active && "nz-active", undefined === side && minimized && "nz-minimized", first && "nz-first", last && "nz-last", firstInactive && "nz-first-inactive");
     const showLabel = (showActiveWidgetLabel && active) ||
         (showIconOnly && !props.icon) ||
         (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) && (React.createElement("span", { className: "nz-icon" }, props.icon)),
-        showLabel && React.createElement("span", { className: "nz-label" }, label),
-        props.badge && React.createElement("div", { className: "nz-badge" }, props.badge),
-        React.createElement(TabTarget, null)));
+    return (React.createElement(Tooltip, { content: label, ariaStrategy: showLabel ? "none" : "label" },
+        React.createElement("div", { "data-item-id": id, "data-item-type": "widget-tab", className: className, ref: refs, role: "tab", tabIndex: 0 },
+            (showWidgetIcon || showIconOnly) && (React.createElement("span", { className: "nz-icon" }, props.icon)),
+            showLabel && React.createElement("span", { className: "nz-label" }, label),
+            props.badge && React.createElement("div", { className: "nz-badge" }, props.badge),
+            React.createElement(TabTarget, null))));
 }
 /** @internal */
 export function useTabInteractions({ onClick, onDoubleClick, onDragStart, clickOnly, }) {

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

@@ -1 +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 { Key } from \"ts-key-enum\";\nimport { assert } from \"@itwin/core-bentley\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Timer } from \"@itwin/core-react\";\nimport {\n  Point,\n  Rectangle,\n  useRefs,\n  useResizeObserver,\n} from \"@itwin/core-react/internal\";\nimport { useDragTab } from \"../base/DragManager.js\";\nimport {\n  MeasureContext,\n  NineZoneDispatchContext,\n  ShowWidgetIconContext,\n  TabNodeContext,\n} from \"../base/NineZone.js\";\nimport type { TabState } from \"../state/TabState.js\";\nimport type {\n  PointerCaptorArgs,\n  PointerCaptorEvent,\n} from \"../base/usePointerCaptor.js\";\nimport { usePointerCaptor } from \"../base/usePointerCaptor.js\";\nimport { PanelSideContext } from \"../widget-panels/Panel.js\";\nimport { WidgetTabsEntryContext } from \"./Tabs.js\";\nimport {\n  restrainInitialWidgetSize,\n  WidgetContext,\n  WidgetIdContext,\n} from \"./Widget.js\";\nimport { TabIdContext } from \"./ContentRenderer.js\";\nimport { TabTarget } from \"../target/TabTarget.js\";\nimport { WidgetMenuTab } from \"./MenuTab.js\";\nimport { WidgetOverflowContext } from \"./Overflow.js\";\nimport { useLayout, useLayoutStore } from \"../base/LayoutStore.js\";\nimport { useFloatingWidgetId } from \"./FloatingWidget.js\";\nimport { getWidgetState } from \"../state/internal/WidgetStateHelpers.js\";\nimport { useIsMaximizedWidget } from \"../../preview/enable-maximized-widget/useMaximizedWidget.js\";\nimport { FloatingTab } from \"./FloatingTab.js\";\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 */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport interface WidgetTabProps extends CommonProps {\n  badge?: React.ReactNode;\n  icon?: 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 tabId = React.useContext(TabIdContext);\n  const overflown = !!widgetOverflow;\n  const floatingTabId = useLayout((state) => state.draggedTab?.tabId);\n\n  if (tabId === floatingTabId) return <FloatingTab {...props} />;\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  const showActiveWidgetLabel = React.useContext(ShowActiveWidgetLabelContext);\n  assert(!!id);\n  assert(!!widgetId);\n\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 maximizedWidget = useIsMaximizedWidget();\n\n  const resizeObserverRef = useResizeObserver<HTMLDivElement>(\n    widgetTabsEntryContext?.onResize\n  );\n  const pointerCaptorRef = useTabInteractions({ clickOnly: maximizedWidget });\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    (showActiveWidgetLabel && active) ||\n    (showIconOnly && !props.icon) ||\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) && (\n        <span className=\"nz-icon\">{props.icon}</span>\n      )}\n      {showLabel && <span className=\"nz-label\">{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  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  const doubleClickTimer = React.useRef(new Timer(300));\n  const initialPointerPosition = React.useRef<Point | undefined>(undefined);\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    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      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 && !!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      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 | undefined>(undefined);\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.valueOf()) {\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\n/** @internal */\nexport const ShowActiveWidgetLabelContext = React.createContext<boolean>(false);\nShowActiveWidgetLabelContext.displayName = \"nz:ShowActiveWidgetLabelContext\";\n"]}
+{"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 { Key } from \"ts-key-enum\";\nimport { assert } from \"@itwin/core-bentley\";\nimport { Timer } from \"@itwin/core-react\";\nimport {\n  Point,\n  Rectangle,\n  useRefs,\n  useResizeObserver,\n} from \"@itwin/core-react/internal\";\nimport { Tooltip } from \"@itwin/itwinui-react\";\nimport { useDragTab } from \"../base/DragManager.js\";\nimport {\n  MeasureContext,\n  NineZoneDispatchContext,\n  ShowWidgetIconContext,\n  TabNodeContext,\n} from \"../base/NineZone.js\";\nimport type { TabState } from \"../state/TabState.js\";\nimport type {\n  PointerCaptorArgs,\n  PointerCaptorEvent,\n} from \"../base/usePointerCaptor.js\";\nimport { usePointerCaptor } from \"../base/usePointerCaptor.js\";\nimport { PanelSideContext } from \"../widget-panels/Panel.js\";\nimport { WidgetTabsEntryContext } from \"./Tabs.js\";\nimport {\n  restrainInitialWidgetSize,\n  WidgetContext,\n  WidgetIdContext,\n} from \"./Widget.js\";\nimport { TabIdContext } from \"./ContentRenderer.js\";\nimport { TabTarget } from \"../target/TabTarget.js\";\nimport { WidgetMenuTab } from \"./MenuTab.js\";\nimport { WidgetOverflowContext } from \"./Overflow.js\";\nimport { useLayout, useLayoutStore } from \"../base/LayoutStore.js\";\nimport { useFloatingWidgetId } from \"./FloatingWidget.js\";\nimport { getWidgetState } from \"../state/internal/WidgetStateHelpers.js\";\nimport { useIsMaximizedWidget } from \"../../preview/enable-maximized-widget/useMaximizedWidget.js\";\nimport { FloatingTab } from \"./FloatingTab.js\";\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// eslint-disable-next-line @typescript-eslint/no-deprecated\ninterface WidgetTabProps {\n  badge?: React.ReactNode;\n  icon?: React.ReactElement;\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 tabId = React.useContext(TabIdContext);\n  const overflown = !!widgetOverflow;\n  const floatingTabId = useLayout((state) => state.draggedTab?.tabId);\n\n  if (tabId === floatingTabId) return <FloatingTab {...props} />;\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  const showActiveWidgetLabel = React.useContext(ShowActiveWidgetLabelContext);\n  assert(!!id);\n  assert(!!widgetId);\n\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 maximizedWidget = useIsMaximizedWidget();\n\n  const resizeObserverRef = useResizeObserver<HTMLDivElement>(\n    widgetTabsEntryContext?.onResize\n  );\n  const pointerCaptorRef = useTabInteractions({ clickOnly: maximizedWidget });\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  );\n\n  const showLabel =\n    (showActiveWidgetLabel && active) ||\n    (showIconOnly && !props.icon) ||\n    (showWidgetIcon && !showIconOnly) ||\n    !showWidgetIcon;\n  return (\n    <Tooltip content={label} ariaStrategy={showLabel ? \"none\" : \"label\"}>\n      <div\n        data-item-id={id}\n        data-item-type=\"widget-tab\"\n        className={className}\n        ref={refs}\n        role=\"tab\"\n        tabIndex={0}\n      >\n        {(showWidgetIcon || showIconOnly) && (\n          <span className=\"nz-icon\">{props.icon}</span>\n        )}\n        {showLabel && <span className=\"nz-label\">{label}</span>}\n        {props.badge && <div className=\"nz-badge\">{props.badge}</div>}\n        <TabTarget />\n      </div>\n    </Tooltip>\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  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  const doubleClickTimer = React.useRef(new Timer(300));\n  const initialPointerPosition = React.useRef<Point | undefined>(undefined);\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    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      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 && !!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      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 | undefined>(undefined);\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.valueOf()) {\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\n/** @internal */\nexport const ShowActiveWidgetLabelContext = React.createContext<boolean>(false);\nShowActiveWidgetLabelContext.displayName = \"nz:ShowActiveWidgetLabelContext\";\n"]}

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

@@ -62,14 +62,15 @@ export function WidgetTabs() {
             return [key, child];
         })
         : [];
+    const overflowItems = panelChildren.map(([key, child]) => {
+        return React.createElement(React.Fragment, { key: key }, child);
+    });
     return (React.createElement("div", { className: "nz-widget-tabs", ref: ref, role: "tablist" },
         tabChildren.map(([key, child], index, array) => {
             return (React.createElement(WidgetTabsEntryProvider, { children: child, key: key, id: key, lastNotOverflown: index === array.length - 1 && panelChildren.length > 0, getOnResize: handleEntryResize }));
         }),
         React.createElement(TitleBarTarget, null),
-        React.createElement(WidgetOverflow, { hidden: overflown && panelChildren.length === 0, onResize: handleOverflowResize }, panelChildren.map(([key, child]) => {
-            return React.createElement(React.Fragment, { key: key }, child);
-        }))));
+        React.createElement(WidgetOverflow, { hidden: overflown && panelChildren.length === 0, onResize: handleOverflowResize, items: overflowItems })));
 }
 /** @internal */
 export const WidgetTabsEntryContext = React.createContext(undefined);

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

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

package/lib/appui-react/messages/InputField.js

@@ -18,30 +18,12 @@ import { MessageManager } from "../messages/MessageManager.js";
  * @deprecated in 4.16.0. Component is used internally. Use {@link MessageManager.displayInputFieldMessage} instead to open the message.
  */
 export class InputFieldMessage extends React.PureComponent {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            message: "",
-            isVisible: false,
-            priority: OutputMessagePriority.None,
-            showCloseButton: !!this.props.showCloseButton,
-        };
-        this._onInputMessageClose = () => {
-            this.setState({ isVisible: false });
-        };
-        this._handleInputFieldMessageAddedEvent = (args) => {
-            this.setState({
-                inputFieldElement: args.target,
-                message: args.messageText,
-                isVisible: true,
-                priority: args.priority,
-                detailedMessage: args.detailedMessage,
-            });
-        };
-        this._handleInputFieldMessageRemovedEvent = () => {
-            this.setState({ isVisible: false });
-        };
-    }
+    state = {
+        message: "",
+        isVisible: false,
+        priority: OutputMessagePriority.None,
+        showCloseButton: !!this.props.showCloseButton,
+    };
     render() {
         const { isVisible, inputFieldElement, message, priority, detailedMessage, showCloseButton, } = this.state;
         if (!inputFieldElement || !message) {
@@ -72,6 +54,21 @@ export class InputFieldMessage extends React.PureComponent {
         MessageManager.onInputFieldMessageAddedEvent.removeListener(this._handleInputFieldMessageAddedEvent);
         MessageManager.onInputFieldMessageRemovedEvent.removeListener(this._handleInputFieldMessageRemovedEvent);
     }
+    _onInputMessageClose = () => {
+        this.setState({ isVisible: false });
+    };
+    _handleInputFieldMessageAddedEvent = (args) => {
+        this.setState({
+            inputFieldElement: args.target,
+            message: args.messageText,
+            isVisible: true,
+            priority: args.priority,
+            detailedMessage: args.detailedMessage,
+        });
+    };
+    _handleInputFieldMessageRemovedEvent = () => {
+        this.setState({ isVisible: false });
+    };
 }
 function FieldIcon({ priority }) {
     let svg = React.createElement(SvgInfoCircularHollow, null);

package/lib/appui-react/messages/InputField.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputField.js","sourceRoot":"","sources":["../../../src/appui-react/messages/InputField.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,mBAAmB,CAAC;AAC3B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC7E,OAAO,EACL,QAAQ,EACR,qBAAqB,EACrB,oBAAoB,EACpB,gBAAgB,EAChB,gBAAgB,GACjB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAsB/D;;;GAGG;AACH,MAAM,OAAO,iBAAkB,SAAQ,KAAK,CAAC,aAG5C;IAHD;;QAI2B,UAAK,GAAqC;YACjE,OAAO,EAAE,EAAE;YACX,SAAS,EAAE,KAAK;YAChB,QAAQ,EAAE,qBAAqB,CAAC,IAAI;YACpC,eAAe,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe;SAC9C,CAAC;QA+EM,yBAAoB,GAAG,GAAG,EAAE;YAClC,IAAI,CAAC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;QACtC,CAAC,CAAC;QAEM,uCAAkC,GAEtC,CAAC,IAAI,EAAE,EAAE;YACX,IAAI,CAAC,QAAQ,CAAC;gBACZ,iBAAiB,EAAE,IAAI,CAAC,MAAqB;gBAC7C,OAAO,EAAE,IAAI,CAAC,WAAW;gBACzB,SAAS,EAAE,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,eAAe,EAAE,IAAI,CAAC,eAAe;aACtC,CAAC,CAAC;QACL,CAAC,CAAC;QAEM,yCAAoC,GAExC,GAAG,EAAE;YACP,IAAI,CAAC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;QACtC,CAAC,CAAC;IACJ,CAAC;IAlGiB,MAAM;QACpB,MAAM,EACJ,SAAS,EACT,iBAAiB,EACjB,OAAO,EACP,QAAQ,EACR,eAAe,EACf,eAAe,GAChB,GAAG,IAAI,CAAC,KAAK,CAAC;QAEf,IAAI,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE,CAAC;YACnC,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO;QACL,4DAA4D;QAC5D,oBAAC,KAAK,IACJ,MAAM,EAAE,SAAS,EACjB,QAAQ,EAAE,gBAAgB,CAAC,UAAU,EACrC,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAClC,MAAM,EAAE,iBAAiB;YAEzB,6BAAK,SAAS,EAAC,+BAA+B;gBAC5C,6BAAK,SAAS,EAAC,uCAAuC;oBACpD,6BAAK,SAAS,EAAC,uCAAuC;wBACpD,oBAAC,SAAS,IAAC,QAAQ,EAAE,QAAQ,GAAI;wBACjC,8BAAM,SAAS,EAAC,yBAAyB;4BAEvC,oBAAC,eAAe,IACd,SAAS,EAAC,0BAA0B,EACpC,OAAO,EAAE,OAAO,GAChB;4BACD,eAAe,IAAI;4BAClB,4DAA4D;4BAC5D,oBAAC,eAAe,IACd,SAAS,EAAC,6BAA6B,EACvC,OAAO,EAAE,eAAe,GACxB,CACH,CACI,CACH,CACF;gBACL,eAAe,IAAI;gBAClB,iEAAiE;gBACjE,6BACE,SAAS,EAAC,0BAA0B,EACpC,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAClC,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,CAAC;oBAGZ,oBAAC,QAAQ,IAAC,QAAQ,EAAE,oBAAC,QAAQ,OAAG,GAAI,CAChC,CACP,CACG,CACA,CACT,CAAC;IACJ,CAAC;IAEe,iBAAiB;QAC/B,cAAc,CAAC,6BAA6B,CAAC,WAAW,CACtD,IAAI,CAAC,kCAAkC,CACxC,CAAC;QACF,cAAc,CAAC,+BAA+B,CAAC,WAAW,CACxD,IAAI,CAAC,oCAAoC,CAC1C,CAAC;IACJ,CAAC;IAEe,oBAAoB;QAClC,cAAc,CAAC,6BAA6B,CAAC,cAAc,CACzD,IAAI,CAAC,kCAAkC,CACxC,CAAC;QACF,cAAc,CAAC,+BAA+B,CAAC,cAAc,CAC3D,IAAI,CAAC,oCAAoC,CAC1C,CAAC;IACJ,CAAC;CAuBF;AAED,SAAS,SAAS,CAAC,EAAE,QAAQ,EAAuC;IAClE,IAAI,GAAG,GAAG,oBAAC,qBAAqB,OAAG,CAAC;IACpC,QAAQ,QAAQ,EAAE,CAAC;QACjB,KAAK,qBAAqB,CAAC,OAAO;YAChC,GAAG,GAAG,oBAAC,gBAAgB,OAAG,CAAC;YAC3B,MAAM;QACR,KAAK,qBAAqB,CAAC,OAAO;YAChC,GAAG,GAAG,oBAAC,gBAAgB,OAAG,CAAC;YAC3B,MAAM;QACR,KAAK,qBAAqB,CAAC,KAAK,CAAC;QACjC,KAAK,qBAAqB,CAAC,KAAK;YAC9B,GAAG,GAAG,oBAAC,oBAAoB,OAAG,CAAC;YAC/B,MAAM;IACV,CAAC;IAED,OAAO,oBAAC,IAAI,QAAE,GAAG,CAAQ,CAAC;AAC5B,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 Notification\n */\n\nimport \"./InputField.scss\";\nimport * as React from \"react\";\nimport { OutputMessagePriority } from \"@itwin/core-frontend\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\nimport type { ListenerType } from \"@itwin/core-react/internal\";\nimport { Icon as CoreIcon, MessageRenderer, Popup } from \"@itwin/core-react\";\nimport {\n  SvgClose,\n  SvgInfoCircularHollow,\n  SvgStatusErrorHollow,\n  SvgStatusSuccess,\n  SvgStatusWarning,\n} from \"@itwin/itwinui-icons-react\";\nimport { Icon } from \"@itwin/itwinui-react\";\nimport { MessageManager } from \"../messages/MessageManager.js\";\nimport type { NotifyMessageType } from \"./ReactNotifyMessageDetails.js\";\n\n/** Properties of [[InputFieldMessage]] component.\n * @public\n */\ninterface InputFieldMessageProps {\n  showCloseButton?: boolean;\n}\n\n/** [[InputFieldMessage]] state.\n * @internal\n */\ninterface InputFieldMessageState {\n  isVisible: boolean;\n  priority: OutputMessagePriority;\n  message: NotifyMessageType;\n  detailedMessage?: NotifyMessageType;\n  inputFieldElement?: HTMLElement;\n  showCloseButton?: boolean;\n}\n\n/** InputField message pops up near pointer when attempting an invalid interaction.\n * @public\n * @deprecated in 4.16.0. Component is used internally. Use {@link MessageManager.displayInputFieldMessage} instead to open the message.\n */\nexport class InputFieldMessage extends React.PureComponent<\n  InputFieldMessageProps,\n  InputFieldMessageState\n> {\n  public override readonly state: Readonly<InputFieldMessageState> = {\n    message: \"\",\n    isVisible: false,\n    priority: OutputMessagePriority.None,\n    showCloseButton: !!this.props.showCloseButton,\n  };\n\n  public override render(): React.ReactNode {\n    const {\n      isVisible,\n      inputFieldElement,\n      message,\n      priority,\n      detailedMessage,\n      showCloseButton,\n    } = this.state;\n\n    if (!inputFieldElement || !message) {\n      return null;\n    }\n\n    return (\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      <Popup\n        isOpen={isVisible}\n        position={RelativePosition.BottomLeft}\n        onClose={this._onInputMessageClose}\n        target={inputFieldElement}\n      >\n        <div className=\"uifw-popup-message-inputField\">\n          <div className=\"uifw-popup-message-inputField-content\">\n            <div className=\"uifw-popup-message-inputField-primary\">\n              <FieldIcon priority={priority} />\n              <span className=\"uifw-popup-message-text\">\n                {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}\n                <MessageRenderer\n                  className=\"uifw-popup-message-brief\"\n                  message={message}\n                />\n                {detailedMessage && (\n                  // eslint-disable-next-line @typescript-eslint/no-deprecated\n                  <MessageRenderer\n                    className=\"uifw-popup-message-detailed\"\n                    message={detailedMessage}\n                  />\n                )}\n              </span>\n            </div>\n          </div>\n          {showCloseButton && (\n            // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n            <div\n              className=\"uifw-popup-message-close\"\n              onClick={this._onInputMessageClose}\n              role=\"button\"\n              tabIndex={-1}\n            >\n              {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}\n              <CoreIcon iconSpec={<SvgClose />} />\n            </div>\n          )}\n        </div>\n      </Popup>\n    );\n  }\n\n  public override componentDidMount(): void {\n    MessageManager.onInputFieldMessageAddedEvent.addListener(\n      this._handleInputFieldMessageAddedEvent\n    );\n    MessageManager.onInputFieldMessageRemovedEvent.addListener(\n      this._handleInputFieldMessageRemovedEvent\n    );\n  }\n\n  public override componentWillUnmount(): void {\n    MessageManager.onInputFieldMessageAddedEvent.removeListener(\n      this._handleInputFieldMessageAddedEvent\n    );\n    MessageManager.onInputFieldMessageRemovedEvent.removeListener(\n      this._handleInputFieldMessageRemovedEvent\n    );\n  }\n\n  private _onInputMessageClose = () => {\n    this.setState({ isVisible: false });\n  };\n\n  private _handleInputFieldMessageAddedEvent: ListenerType<\n    typeof MessageManager.onInputFieldMessageAddedEvent\n  > = (args) => {\n    this.setState({\n      inputFieldElement: args.target as HTMLElement,\n      message: args.messageText,\n      isVisible: true,\n      priority: args.priority,\n      detailedMessage: args.detailedMessage,\n    });\n  };\n\n  private _handleInputFieldMessageRemovedEvent: ListenerType<\n    typeof MessageManager.onInputFieldMessageRemovedEvent\n  > = () => {\n    this.setState({ isVisible: false });\n  };\n}\n\nfunction FieldIcon({ priority }: { priority: OutputMessagePriority }) {\n  let svg = <SvgInfoCircularHollow />;\n  switch (priority) {\n    case OutputMessagePriority.Success:\n      svg = <SvgStatusSuccess />;\n      break;\n    case OutputMessagePriority.Warning:\n      svg = <SvgStatusWarning />;\n      break;\n    case OutputMessagePriority.Fatal:\n    case OutputMessagePriority.Error:\n      svg = <SvgStatusErrorHollow />;\n      break;\n  }\n\n  return <Icon>{svg}</Icon>;\n}\n"]}
+{"version":3,"file":"InputField.js","sourceRoot":"","sources":["../../../src/appui-react/messages/InputField.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 Notification\n */\n\nimport \"./InputField.scss\";\nimport * as React from \"react\";\nimport { OutputMessagePriority } from \"@itwin/core-frontend\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\nimport type { ListenerType } from \"@itwin/core-react/internal\";\nimport { Icon as CoreIcon, MessageRenderer, Popup } from \"@itwin/core-react\";\nimport {\n  SvgClose,\n  SvgInfoCircularHollow,\n  SvgStatusErrorHollow,\n  SvgStatusSuccess,\n  SvgStatusWarning,\n} from \"@itwin/itwinui-icons-react\";\nimport { Icon } from \"@itwin/itwinui-react\";\nimport { MessageManager } from \"../messages/MessageManager.js\";\nimport type { NotifyMessageType } from \"./ReactNotifyMessageDetails.js\";\n\n/** Properties of [[InputFieldMessage]] component.\n * @public\n */\ninterface InputFieldMessageProps {\n  showCloseButton?: boolean;\n}\n\n/** [[InputFieldMessage]] state.\n * @internal\n */\ninterface InputFieldMessageState {\n  isVisible: boolean;\n  priority: OutputMessagePriority;\n  message: NotifyMessageType;\n  detailedMessage?: NotifyMessageType;\n  inputFieldElement?: HTMLElement;\n  showCloseButton?: boolean;\n}\n\n/** InputField message pops up near pointer when attempting an invalid interaction.\n * @public\n * @deprecated in 4.16.0. Component is used internally. Use {@link MessageManager.displayInputFieldMessage} instead to open the message.\n */\nexport class InputFieldMessage extends React.PureComponent<\n  InputFieldMessageProps,\n  InputFieldMessageState\n> {\n  public override readonly state: Readonly<InputFieldMessageState> = {\n    message: \"\",\n    isVisible: false,\n    priority: OutputMessagePriority.None,\n    showCloseButton: !!this.props.showCloseButton,\n  };\n\n  public override render(): React.ReactNode {\n    const {\n      isVisible,\n      inputFieldElement,\n      message,\n      priority,\n      detailedMessage,\n      showCloseButton,\n    } = this.state;\n\n    if (!inputFieldElement || !message) {\n      return null;\n    }\n\n    return (\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      <Popup\n        isOpen={isVisible}\n        position={RelativePosition.BottomLeft}\n        onClose={this._onInputMessageClose}\n        target={inputFieldElement}\n      >\n        <div className=\"uifw-popup-message-inputField\">\n          <div className=\"uifw-popup-message-inputField-content\">\n            <div className=\"uifw-popup-message-inputField-primary\">\n              <FieldIcon priority={priority} />\n              <span className=\"uifw-popup-message-text\">\n                {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}\n                <MessageRenderer\n                  className=\"uifw-popup-message-brief\"\n                  message={message}\n                />\n                {detailedMessage && (\n                  // eslint-disable-next-line @typescript-eslint/no-deprecated\n                  <MessageRenderer\n                    className=\"uifw-popup-message-detailed\"\n                    message={detailedMessage}\n                  />\n                )}\n              </span>\n            </div>\n          </div>\n          {showCloseButton && (\n            // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n            <div\n              className=\"uifw-popup-message-close\"\n              onClick={this._onInputMessageClose}\n              role=\"button\"\n              tabIndex={-1}\n            >\n              {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}\n              <CoreIcon iconSpec={<SvgClose />} />\n            </div>\n          )}\n        </div>\n      </Popup>\n    );\n  }\n\n  public override componentDidMount(): void {\n    MessageManager.onInputFieldMessageAddedEvent.addListener(\n      this._handleInputFieldMessageAddedEvent\n    );\n    MessageManager.onInputFieldMessageRemovedEvent.addListener(\n      this._handleInputFieldMessageRemovedEvent\n    );\n  }\n\n  public override componentWillUnmount(): void {\n    MessageManager.onInputFieldMessageAddedEvent.removeListener(\n      this._handleInputFieldMessageAddedEvent\n    );\n    MessageManager.onInputFieldMessageRemovedEvent.removeListener(\n      this._handleInputFieldMessageRemovedEvent\n    );\n  }\n\n  private _onInputMessageClose = () => {\n    this.setState({ isVisible: false });\n  };\n\n  private _handleInputFieldMessageAddedEvent: ListenerType<\n    typeof MessageManager.onInputFieldMessageAddedEvent\n  > = (args) => {\n    this.setState({\n      inputFieldElement: args.target as HTMLElement,\n      message: args.messageText,\n      isVisible: true,\n      priority: args.priority,\n      detailedMessage: args.detailedMessage,\n    });\n  };\n\n  private _handleInputFieldMessageRemovedEvent: ListenerType<\n    typeof MessageManager.onInputFieldMessageRemovedEvent\n  > = () => {\n    this.setState({ isVisible: false });\n  };\n}\n\nfunction FieldIcon({ priority }: { priority: OutputMessagePriority }) {\n  let svg = <SvgInfoCircularHollow />;\n  switch (priority) {\n    case OutputMessagePriority.Success:\n      svg = <SvgStatusSuccess />;\n      break;\n    case OutputMessagePriority.Warning:\n      svg = <SvgStatusWarning />;\n      break;\n    case OutputMessagePriority.Fatal:\n    case OutputMessagePriority.Error:\n      svg = <SvgStatusErrorHollow />;\n      break;\n  }\n\n  return <Icon>{svg}</Icon>;\n}\n"]}

package/lib/appui-react/messages/MessageManager.js

@@ -22,13 +22,15 @@ import { BeUiEvent } from "@itwin/core-bentley";
 import { ConfigurableUiActionId } from "../redux/ConfigurableUiState.js";
 import { useTranslation } from "../hooks/useTranslation.js";
 class MessageBoxCallbacks {
+    onFulfilled;
+    onRejected;
     constructor(onFulfilled, onRejected) {
         this.onFulfilled = onFulfilled;
         this.onRejected = onRejected;
-        this.handleMessageBoxResult = (result) => {
-            this.onFulfilled(result);
-        };
     }
+    handleMessageBoxResult = (result) => {
+        this.onFulfilled(result);
+    };
 }
 /** Message Added Event class.
  * @public
@@ -93,17 +95,45 @@ export class ToolAssistanceChangedEvent extends UiEvent {
  * Used to display tracked progress in ActivityMessage.
  */
 class OngoingActivityMessage {
-    constructor() {
-        this.message = "";
-        this.percentage = 0;
-        this.details = new ActivityMessageDetails(true, true, true);
-        this.isRestored = false;
-    }
+    message = "";
+    percentage = 0;
+    details = new ActivityMessageDetails(true, true, true);
+    isRestored = false;
 }
 /** The MessageManager class manages messages and prompts. It is used by the [[AppNotificationManager]] class.
  * @public
  */
 export class MessageManager {
+    static _maxCachedMessages = 500;
+    static _maxDisplayedStickyMessages = 3;
+    static _messages = [];
+    static _ongoingActivityMessage = new OngoingActivityMessage();
+    static _lastMessage;
+    static _activeMessageManager = new StatusMessageManager();
+    static _animateOutToElement = [];
+    static _toastCloseCallbacks = [];
+    /** The MessageAddedEvent is fired when a message is added via outputMessage(). */
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    static onMessageAddedEvent = new MessageAddedEvent();
+    /** The MessagesUpdatedEvent is fired when a message is added or the messages are cleared. */
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    static onMessagesUpdatedEvent = new MessagesUpdatedEvent();
+    /** The ActivityMessageUpdatedEvent is fired when an Activity message updates via outputActivityMessage(). */
+    static onActivityMessageUpdatedEvent = new ActivityMessageUpdatedEvent(); // eslint-disable-line @typescript-eslint/no-deprecated
+    /** The ActivityMessageCancelledEvent is fired when an Activity message is cancelled via
+     * endActivityMessage(ActivityMessageEndReason.Cancelled) or
+     * by the user clicking the 'Cancel' link.
+     */
+    static onActivityMessageCancelledEvent = new ActivityMessageCancelledEvent(); // eslint-disable-line @typescript-eslint/no-deprecated
+    static onInputFieldMessageAddedEvent = new InputFieldMessageAddedEvent(); // eslint-disable-line @typescript-eslint/no-deprecated
+    static onInputFieldMessageRemovedEvent = new InputFieldMessageRemovedEvent(); // eslint-disable-line @typescript-eslint/no-deprecated
+    static onOpenMessageCenterEvent = new OpenMessageCenterEvent(); // eslint-disable-line @typescript-eslint/no-deprecated
+    /** @internal */
+    static onDisplayMessage = new BeUiEvent();
+    /** The ToolAssistanceChangedEvent is fired when a tool calls IModelApp.notifications.setToolAssistance().
+     * @public
+     */
+    static onToolAssistanceChangedEvent = new ToolAssistanceChangedEvent(); // eslint-disable-line @typescript-eslint/no-deprecated
     /** List of messages as NotifyMessageDetailsType. */
     static get messages() {
         return this._messages;
@@ -494,35 +524,6 @@ export class MessageManager {
         MessageManager.endActivityMessage(false);
     }
 }
-MessageManager._maxCachedMessages = 500;
-MessageManager._maxDisplayedStickyMessages = 3;
-MessageManager._messages = [];
-MessageManager._ongoingActivityMessage = new OngoingActivityMessage();
-MessageManager._activeMessageManager = new StatusMessageManager();
-MessageManager._animateOutToElement = [];
-MessageManager._toastCloseCallbacks = [];
-/** The MessageAddedEvent is fired when a message is added via outputMessage(). */
-// eslint-disable-next-line @typescript-eslint/no-deprecated
-MessageManager.onMessageAddedEvent = new MessageAddedEvent();
-/** The MessagesUpdatedEvent is fired when a message is added or the messages are cleared. */
-// eslint-disable-next-line @typescript-eslint/no-deprecated
-MessageManager.onMessagesUpdatedEvent = new MessagesUpdatedEvent();
-/** The ActivityMessageUpdatedEvent is fired when an Activity message updates via outputActivityMessage(). */
-MessageManager.onActivityMessageUpdatedEvent = new ActivityMessageUpdatedEvent(); // eslint-disable-line @typescript-eslint/no-deprecated
-/** The ActivityMessageCancelledEvent is fired when an Activity message is cancelled via
- * endActivityMessage(ActivityMessageEndReason.Cancelled) or
- * by the user clicking the 'Cancel' link.
- */
-MessageManager.onActivityMessageCancelledEvent = new ActivityMessageCancelledEvent(); // eslint-disable-line @typescript-eslint/no-deprecated
-MessageManager.onInputFieldMessageAddedEvent = new InputFieldMessageAddedEvent(); // eslint-disable-line @typescript-eslint/no-deprecated
-MessageManager.onInputFieldMessageRemovedEvent = new InputFieldMessageRemovedEvent(); // eslint-disable-line @typescript-eslint/no-deprecated
-MessageManager.onOpenMessageCenterEvent = new OpenMessageCenterEvent(); // eslint-disable-line @typescript-eslint/no-deprecated
-/** @internal */
-MessageManager.onDisplayMessage = new BeUiEvent();
-/** The ToolAssistanceChangedEvent is fired when a tool calls IModelApp.notifications.setToolAssistance().
- * @public
- */
-MessageManager.onToolAssistanceChangedEvent = new ToolAssistanceChangedEvent(); // eslint-disable-line @typescript-eslint/no-deprecated
 function AlertDialog({ messageDetails }) {
     const { briefMessage, detailedMessage, priority } = messageDetails;
     const iconType = MessageManager.getIconType(messageDetails);