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

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

@@ -0,0 +1,140 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/z-index";
+@import "../widgetopacity";
+@import "variables";
+
+.nz-widget-floatingWidget {
+  position: absolute;
+  border: 1px solid $buic-background-5;
+  border-radius: var(--iui-border-radius-1);
+  min-width: 200px;
+  min-height: 120px;
+  transition: opacity var(--iui-duration-2) ease;
+
+  &.nz-floating-toolSettings {
+    min-height: 60px;
+  }
+
+  @include uicore-z-index(dragged-widget);
+  @include nz-widget-opacity;
+
+  &.nz-minimized {
+    flex-grow: 0;
+
+    > .nz-content {
+      width: 0;
+    }
+  }
+
+  &.nz-hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  &.nz-dragged {
+    pointer-events: none;
+    opacity: $nz-dragged-widget-opacity;
+
+    @include uicore-z-index(drag-preview);
+  }
+
+  &.nz-minimized {
+    min-height: 30px;
+
+    .nz-widget-floatingWidget_handle {
+      visibility: hidden;
+    }
+  }
+
+  &.preview-enableMaximizedFloatingWidget-maximized {
+    transform: unset !important;
+    height: unset !important;
+    width: unset !important;
+    max-height: unset !important;
+    max-width: unset !important;
+    opacity: 1 !important;
+    border-radius: unset !important;
+    inset: 0;
+
+    .nz-widget-floatingWidget_handle {
+      visibility: hidden;
+    }
+  }
+}
+
+.nz-widget-floatingWidget_handle {
+  $size: 0.5em;
+  $cornerSize: 1em;
+
+  position: absolute;
+  user-select: none;
+
+  &.nz-left,
+  &.nz-right {
+    height: 100%;
+    width: $size;
+    cursor: ew-resize;
+  }
+
+  &.nz-top,
+  &.nz-bottom {
+    width: 100%;
+    height: $size;
+    cursor: ns-resize;
+  }
+
+  &.nz-left {
+    left: -$size * 0.5;
+    top: 0;
+  }
+
+  &.nz-right {
+    right: -$size * 0.5;
+    top: 0;
+  }
+
+  &.nz-top {
+    left: 0;
+    top: -$size * 0.5;
+  }
+
+  &.nz-bottom {
+    left: 0;
+    bottom: -$size * 0.5;
+  }
+
+  &.nz-topLeft,
+  &.nz-topRight,
+  &.nz-bottomLeft,
+  &.nz-bottomRight {
+    height: $cornerSize;
+    width: $cornerSize;
+  }
+
+  &.nz-topLeft {
+    left: -$cornerSize * 0.3333;
+    top: -$cornerSize * 0.3333;
+    cursor: nwse-resize;
+  }
+
+  &.nz-topRight {
+    right: -$cornerSize * 0.3333;
+    top: -$cornerSize * 0.3333;
+    cursor: nesw-resize;
+  }
+
+  &.nz-bottomLeft {
+    left: -$cornerSize * 0.3333;
+    bottom: -$cornerSize * 0.3333;
+    cursor: nesw-resize;
+  }
+
+  &.nz-bottomRight {
+    right: -$cornerSize * 0.3333;
+    bottom: -$cornerSize * 0.3333;
+    cursor: nwse-resize;
+  }
+}

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

@@ -0,0 +1,9 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import * as React from "react";
+/** This component renders all floating widgets.
+ * @internal
+ */
+export declare function FloatingWidgets(): React.JSX.Element;
+//# sourceMappingURL=FloatingWidgets.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingWidgets.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/FloatingWidgets.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;GAEG;AACH,wBAAgB,eAAe,sBAU9B"}

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

@@ -0,0 +1,23 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Widget
+ */
+import * as React from "react";
+import { FloatingWidgetProvider } from "./FloatingWidget";
+import { FloatingTab } from "./FloatingTab";
+import { useLayout } from "../base/LayoutStore";
+/** This component renders all floating widgets.
+ * @internal
+ */
+export function FloatingWidgets() {
+    const ids = useLayout((state) => state.floatingWidgets.allIds);
+    return (React.createElement(React.Fragment, null,
+        ids.map((id) => {
+            return React.createElement(FloatingWidgetProvider, { key: id, id: id });
+        }),
+        React.createElement(FloatingTab, null)));
+}
+//# sourceMappingURL=FloatingWidgets.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingWidgets.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/FloatingWidgets.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD;;GAEG;AACH,MAAM,UAAU,eAAe;IAC7B,MAAM,GAAG,GAAG,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/D,OAAO,CACL;QACG,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE;YACd,OAAO,oBAAC,sBAAsB,IAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAI,CAAC;QACrD,CAAC,CAAC;QACF,oBAAC,WAAW,OAAG,CACd,CACJ,CAAC;AACJ,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 * as React from \"react\";\nimport { FloatingWidgetProvider } from \"./FloatingWidget\";\nimport { FloatingTab } from \"./FloatingTab\";\nimport { useLayout } from \"../base/LayoutStore\";\n\n/** This component renders all floating widgets.\n * @internal\n */\nexport function FloatingWidgets() {\n  const ids = useLayout((state) => state.floatingWidgets.allIds);\n  return (\n    <>\n      {ids.map((id) => {\n        return <FloatingWidgetProvider key={id} id={id} />;\n      })}\n      <FloatingTab />\n    </>\n  );\n}\n"]}

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

@@ -0,0 +1,16 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import "./Menu.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** @internal */
+export interface WidgetMenuProps extends CommonProps {
+    children?: React.ReactNode;
+    open?: boolean;
+    onClose?: () => void;
+    target?: HTMLElement;
+}
+/** @internal */
+export declare function WidgetMenu(props: WidgetMenuProps): React.JSX.Element;
+//# sourceMappingURL=Menu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/Menu.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIrD,gBAAgB;AAChB,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAED,gBAAgB;AAChB,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,qBAgBhD"}

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

@@ -0,0 +1,19 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 "./Menu.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { Popup } from "@itwin/core-react";
+import { RelativePosition } from "@itwin/appui-abstract";
+/** @internal */
+export function WidgetMenu(props) {
+    const className = classnames("nz-widget-menu", props.className);
+    return (React.createElement(Popup, { className: className, isOpen: props.open, offset: 0, onClose: props.onClose, position: RelativePosition.BottomLeft, style: props.style, showShadow: false, target: props.target },
+        React.createElement("div", { className: "nz-widget-menu_tabs" }, props.children)));
+}
+//# sourceMappingURL=Menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/Menu.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,aAAa,CAAC;AACrB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAUzD,gBAAgB;AAChB,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC/C,MAAM,SAAS,GAAG,UAAU,CAAC,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAChE,OAAO,CACL,oBAAC,KAAK,IACJ,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,KAAK,CAAC,IAAI,EAClB,MAAM,EAAE,CAAC,EACT,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,gBAAgB,CAAC,UAAU,EACrC,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,UAAU,EAAE,KAAK,EACjB,MAAM,EAAE,KAAK,CAAC,MAAM;QAEpB,6BAAK,SAAS,EAAC,qBAAqB,IAAE,KAAK,CAAC,QAAQ,CAAO,CACrD,CACT,CAAC;AACJ,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 \"./Menu.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Popup } from \"@itwin/core-react\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\n\n/** @internal */\nexport interface WidgetMenuProps extends CommonProps {\n  children?: React.ReactNode;\n  open?: boolean;\n  onClose?: () => void;\n  target?: HTMLElement;\n}\n\n/** @internal */\nexport function WidgetMenu(props: WidgetMenuProps) {\n  const className = classnames(\"nz-widget-menu\", props.className);\n  return (\n    <Popup\n      className={className}\n      isOpen={props.open}\n      offset={0}\n      onClose={props.onClose}\n      position={RelativePosition.BottomLeft}\n      style={props.style}\n      showShadow={false}\n      target={props.target}\n    >\n      <div className=\"nz-widget-menu_tabs\">{props.children}</div>\n    </Popup>\n  );\n}\n"]}

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

@@ -0,0 +1,14 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+
+.nz-widget-menu {
+  background: $buic-background-1;
+}
+
+.nz-widget-menu_tabs {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}

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

@@ -0,0 +1,13 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import "./MenuTab.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** @internal */
+export interface WidgetMenuTabProps extends CommonProps {
+    badge?: React.ReactNode;
+}
+/** @internal */
+export declare function WidgetMenuTab(props: WidgetMenuTabProps): React.JSX.Element;
+//# sourceMappingURL=MenuTab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuTab.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/MenuTab.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AAExB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AASrD,gBAAgB;AAChB,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAED,gBAAgB;AAChB,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBA+CtD"}

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

@@ -0,0 +1,52 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 "./MenuTab.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { assert } from "@itwin/core-bentley";
+import { Icon } from "@itwin/core-react";
+import { useTabInteractions } from "./Tab";
+import { useActiveTabId } from "./Widget";
+import { WidgetOverflowContext } from "./Overflow";
+import { ShowWidgetIconContext } from "../base/NineZone";
+import { useLayout } from "../base/LayoutStore";
+import { TabIdContext } from "./ContentRenderer";
+/** @internal */
+export function WidgetMenuTab(props) {
+    const id = React.useContext(TabIdContext);
+    const overflowContext = React.useContext(WidgetOverflowContext);
+    const showWidgetIcon = React.useContext(ShowWidgetIconContext);
+    assert(!!id);
+    const { label, iconSpec } = useLayout((state) => {
+        const tab = state.tabs[id];
+        return {
+            label: tab.label,
+            iconSpec: tab.iconSpec,
+        };
+    }, true);
+    assert(!!overflowContext);
+    const closeOverflow = React.useCallback(() => {
+        overflowContext.close();
+    }, [overflowContext]);
+    const ref = useTabInteractions({
+        onDragStart: closeOverflow,
+        onClick: closeOverflow,
+        onDoubleClick: closeOverflow,
+    });
+    const activeTabId = useActiveTabId();
+    const active = activeTabId === id;
+    const className = classnames("nz-widget-menuTab", !showWidgetIcon && "nz-no-icon", props.className);
+    return (React.createElement("div", { className: className, ref: ref, title: label },
+        props.badge && React.createElement("div", { className: "nz-badge" }, props.badge),
+        showWidgetIcon && (React.createElement("div", { className: "nz-icon" }, iconSpec && React.createElement(Icon, { iconSpec: iconSpec }))),
+        React.createElement("span", null, label),
+        React.createElement("div", { className: classnames("nz-checkmark", 
+            // istanbul ignore next
+            !active && "nz-hidden") })));
+}
+//# sourceMappingURL=MenuTab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuTab.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/MenuTab.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AACxB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOjD,gBAAgB;AAChB,MAAM,UAAU,aAAa,CAAC,KAAyB;IACrD,MAAM,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAC1C,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAC,qBAAqB,CAAC,CAAC;IAChE,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAAC,qBAAqB,CAAC,CAAC;IAC/D,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAEb,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;QAC9C,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC3B,OAAO;YACL,KAAK,EAAE,GAAG,CAAC,KAAK;YAChB,QAAQ,EAAE,GAAG,CAAC,QAAQ;SACvB,CAAC;IACJ,CAAC,EAAE,IAAI,CAAC,CAAC;IACT,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC;IAC1B,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC3C,eAAe,CAAC,KAAK,EAAE,CAAC;IAC1B,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IACtB,MAAM,GAAG,GAAG,kBAAkB,CAAC;QAC7B,WAAW,EAAE,aAAa;QAC1B,OAAO,EAAE,aAAa;QACtB,aAAa,EAAE,aAAa;KAC7B,CAAC,CAAC;IACH,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,MAAM,MAAM,GAAG,WAAW,KAAK,EAAE,CAAC;IAClC,MAAM,SAAS,GAAG,UAAU,CAC1B,mBAAmB,EACnB,CAAC,cAAc,IAAI,YAAY,EAC/B,KAAK,CAAC,SAAS,CAChB,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK;QAC9C,KAAK,CAAC,KAAK,IAAI,6BAAK,SAAS,EAAC,UAAU,IAAE,KAAK,CAAC,KAAK,CAAO;QAC5D,cAAc,IAAI,CACjB,6BAAK,SAAS,EAAC,SAAS,IACrB,QAAQ,IAAI,oBAAC,IAAI,IAAC,QAAQ,EAAE,QAAQ,GAAI,CACrC,CACP;QACD,kCAAO,KAAK,CAAQ;QACpB,6BACE,SAAS,EAAE,UAAU,CACnB,cAAc;YACd,uBAAuB;YACvB,CAAC,MAAM,IAAI,WAAW,CACvB,GACD,CACE,CACP,CAAC;AACJ,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 \"./MenuTab.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { assert } from \"@itwin/core-bentley\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Icon } from \"@itwin/core-react\";\nimport { useTabInteractions } from \"./Tab\";\nimport { useActiveTabId } from \"./Widget\";\nimport { WidgetOverflowContext } from \"./Overflow\";\nimport { ShowWidgetIconContext } from \"../base/NineZone\";\nimport { useLayout } from \"../base/LayoutStore\";\nimport { TabIdContext } from \"./ContentRenderer\";\n\n/** @internal */\nexport interface WidgetMenuTabProps extends CommonProps {\n  badge?: React.ReactNode;\n}\n\n/** @internal */\nexport function WidgetMenuTab(props: WidgetMenuTabProps) {\n  const id = React.useContext(TabIdContext);\n  const overflowContext = React.useContext(WidgetOverflowContext);\n  const showWidgetIcon = React.useContext(ShowWidgetIconContext);\n  assert(!!id);\n\n  const { label, iconSpec } = useLayout((state) => {\n    const tab = state.tabs[id];\n    return {\n      label: tab.label,\n      iconSpec: tab.iconSpec,\n    };\n  }, true);\n  assert(!!overflowContext);\n  const closeOverflow = React.useCallback(() => {\n    overflowContext.close();\n  }, [overflowContext]);\n  const ref = useTabInteractions({\n    onDragStart: closeOverflow,\n    onClick: closeOverflow,\n    onDoubleClick: closeOverflow,\n  });\n  const activeTabId = useActiveTabId();\n  const active = activeTabId === id;\n  const className = classnames(\n    \"nz-widget-menuTab\",\n    !showWidgetIcon && \"nz-no-icon\",\n    props.className\n  );\n  return (\n    <div className={className} ref={ref} title={label}>\n      {props.badge && <div className=\"nz-badge\">{props.badge}</div>}\n      {showWidgetIcon && (\n        <div className=\"nz-icon\">\n          {iconSpec && <Icon iconSpec={iconSpec} />}\n        </div>\n      )}\n      <span>{label}</span>\n      <div\n        className={classnames(\n          \"nz-checkmark\",\n          // istanbul ignore next\n          !active && \"nz-hidden\"\n        )}\n      />\n    </div>\n  );\n}\n"]}

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

@@ -0,0 +1,58 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * 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;
+  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 {
+    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);
+    }
+  }
+}

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

@@ -0,0 +1,30 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import "./NavigationArea.scss";
+import * as React from "react";
+import type { CommonProps, NoChildrenProps } from "@itwin/core-react";
+/** Properties of [[NavigationArea]] component.
+ * @internal
+ */
+export interface NavigationAreaProps extends CommonProps, NoChildrenProps {
+    /**
+     * Button displayed between horizontal and vertical toolbars.
+     * I.e. [[AppButton]] in NavigationArea zone or navigation aid control in Navigation zone.
+     */
+    navigationAid?: React.ReactNode;
+    /** Horizontal toolbar. See [[Toolbar]] */
+    horizontalToolbar?: React.ReactNode;
+    /** Vertical toolbar. See [[Toolbar]] */
+    verticalToolbar?: React.ReactNode;
+    /** Handler for mouse enter */
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    /** Handler for mouse leave */
+    onMouseLeave?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+}
+/** NavigationArea widget is used in NavigationArea (Zone 1) and Navigation (Zone 3???) zones of 9-Zone UI.
+ * @note Should be placed in [[Zone]] component.
+ * @internal
+ */
+export declare function NavigationArea(props: NavigationAreaProps): React.JSX.Element;
+//# sourceMappingURL=NavigationArea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationArea.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/NavigationArea.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEtE;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,WAAW,EAAE,eAAe;IACvE;;;OAGG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,wCAAwC;IACxC,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,8BAA8B;IAC9B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC1E,8BAA8B;IAC9B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CAC3E;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBA6BxD"}

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

@@ -0,0 +1,22 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 "./NavigationArea.scss";
+import classnames from "classnames";
+import * as React from "react";
+/** NavigationArea widget is used in NavigationArea (Zone 1) and Navigation (Zone 3???) zones of 9-Zone UI.
+ * @note Should be placed in [[Zone]] component.
+ * @internal
+ */
+export function NavigationArea(props) {
+    const className = classnames("nz-widget-navigationArea", props.className);
+    return (React.createElement("div", { className: className, style: props.style },
+        React.createElement("div", { className: "nz-horizontal-toolbar-container", onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave }, props.horizontalToolbar),
+        props.navigationAid && (React.createElement("div", { className: "nz-navigation-aid-container", onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave }, props.navigationAid)),
+        React.createElement("div", { className: "nz-vertical-toolbar-container", onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave }, props.verticalToolbar)));
+}
+//# sourceMappingURL=NavigationArea.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationArea.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/NavigationArea.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsB/B;;;GAGG;AACH,MAAM,UAAU,cAAc,CAAC,KAA0B;IACvD,MAAM,SAAS,GAAG,UAAU,CAAC,0BAA0B,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAC1E,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK;QAC3C,6BACE,SAAS,EAAC,iCAAiC,EAC3C,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,YAAY,EAAE,KAAK,CAAC,YAAY,IAE/B,KAAK,CAAC,iBAAiB,CACpB;QACL,KAAK,CAAC,aAAa,IAAI,CACtB,6BACE,SAAS,EAAC,6BAA6B,EACvC,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,YAAY,EAAE,KAAK,CAAC,YAAY,IAE/B,KAAK,CAAC,aAAa,CAChB,CACP;QACD,6BACE,SAAS,EAAC,+BAA+B,EACzC,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,YAAY,EAAE,KAAK,CAAC,YAAY,IAE/B,KAAK,CAAC,eAAe,CAClB,CACF,CACP,CAAC;AACJ,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 \"./NavigationArea.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps, NoChildrenProps } from \"@itwin/core-react\";\n\n/** Properties of [[NavigationArea]] component.\n * @internal\n */\nexport interface NavigationAreaProps extends CommonProps, NoChildrenProps {\n  /**\n   * Button displayed between horizontal and vertical toolbars.\n   * I.e. [[AppButton]] in NavigationArea zone or navigation aid control in Navigation zone.\n   */\n  navigationAid?: React.ReactNode;\n  /** Horizontal toolbar. See [[Toolbar]] */\n  horizontalToolbar?: React.ReactNode;\n  /** Vertical toolbar. See [[Toolbar]] */\n  verticalToolbar?: React.ReactNode;\n  /** Handler for mouse enter */\n  onMouseEnter?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Handler for mouse leave */\n  onMouseLeave?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n}\n\n/** NavigationArea widget is used in NavigationArea (Zone 1) and Navigation (Zone 3???) zones of 9-Zone UI.\n * @note Should be placed in [[Zone]] component.\n * @internal\n */\nexport function NavigationArea(props: NavigationAreaProps) {\n  const className = classnames(\"nz-widget-navigationArea\", props.className);\n  return (\n    <div className={className} style={props.style}>\n      <div\n        className=\"nz-horizontal-toolbar-container\"\n        onMouseEnter={props.onMouseEnter}\n        onMouseLeave={props.onMouseLeave}\n      >\n        {props.horizontalToolbar}\n      </div>\n      {props.navigationAid && (\n        <div\n          className=\"nz-navigation-aid-container\"\n          onMouseEnter={props.onMouseEnter}\n          onMouseLeave={props.onMouseLeave}\n        >\n          {props.navigationAid}\n        </div>\n      )}\n      <div\n        className=\"nz-vertical-toolbar-container\"\n        onMouseEnter={props.onMouseEnter}\n        onMouseLeave={props.onMouseLeave}\n      >\n        {props.verticalToolbar}\n      </div>\n    </div>\n  );\n}\n"]}

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

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

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

@@ -0,0 +1,20 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import "./Overflow.scss";
+import * as React from "react";
+/** @internal */
+export interface WidgetOverflowProps {
+    children?: React.ReactNode;
+    hidden?: boolean;
+    onResize?: (w: number) => void;
+}
+/** @internal */
+export declare function WidgetOverflow(props: WidgetOverflowProps): React.JSX.Element;
+interface WidgetOverflowContextArgs {
+    close(): void;
+}
+/** @internal */
+export declare const WidgetOverflowContext: React.Context<WidgetOverflowContextArgs | undefined>;
+export {};
+//# sourceMappingURL=Overflow.d.ts.map

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

@@ -0,0 +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;AAO/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,qBA8CxD;AAED,UAAU,yBAAyB;IACjC,KAAK,IAAI,IAAI,CAAC;CACf;AAED,gBAAgB;AAChB,eAAO,MAAM,qBAAqB,sDAEtB,CAAC"}

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

@@ -0,0 +1,56 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 "./Overflow.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { useRefs, useRefState, useResizeObserver } from "@itwin/core-react";
+import { WidgetMenu } from "./Menu";
+import { useLabel } from "../base/NineZone";
+import { PanelSideContext } from "../widget-panels/Panel";
+import { useLayout } from "../base/LayoutStore";
+/** @internal */
+export function WidgetOverflow(props) {
+    const [open, setOpen] = React.useState(false);
+    const ref = React.useRef(null);
+    const [targetRef, target] = useRefState();
+    const resizeObserverRef = useResizeObserver(props.onResize);
+    const refs = useRefs(ref, resizeObserverRef);
+    const handleClick = React.useCallback((e) => {
+        e.preventDefault();
+        setOpen((prev) => !prev);
+    }, []);
+    const handleClose = React.useCallback(() => {
+        setOpen(false);
+    }, []);
+    usePanelPopup(handleClose);
+    const className = classnames("nz-widget-overflow", props.hidden && "nz-hidden");
+    const overflowContext = React.useMemo(() => {
+        return {
+            close: handleClose,
+        };
+    }, [handleClose]);
+    const moreWidgetsTitle = useLabel("moreWidgetsTitle");
+    return (React.createElement("div", { className: className, ref: refs },
+        React.createElement("div", { className: "nz-button", onClick: handleClick, ref: targetRef, role: "button", tabIndex: -1, title: moreWidgetsTitle },
+            React.createElement("div", { className: "nz-icon" })),
+        React.createElement(WidgetOverflowContext.Provider, { value: overflowContext },
+            React.createElement(WidgetMenu, { children: props.children, open: open, onClose: handleClose, target: target }))));
+}
+/** @internal */
+export const WidgetOverflowContext = React.createContext(undefined);
+WidgetOverflowContext.displayName = "nz:WidgetOverflowContext";
+function usePanelPopup(onClose) {
+    const side = React.useContext(PanelSideContext);
+    const collapsed = useLayout((state) => side ? state.panels[side].collapsed : false);
+    React.useEffect(() => {
+        if (collapsed) {
+            onClose();
+        }
+    }, [collapsed, onClose]);
+}
+//# sourceMappingURL=Overflow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Overflow.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/Overflow.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 \"./Overflow.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { useRefs, useRefState, useResizeObserver } from \"@itwin/core-react\";\nimport { WidgetMenu } from \"./Menu\";\nimport { useLabel } from \"../base/NineZone\";\nimport { PanelSideContext } from \"../widget-panels/Panel\";\nimport { useLayout } from \"../base/LayoutStore\";\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 ref = React.useRef<HTMLDivElement>(null);\n  const [targetRef, target] = useRefState<HTMLDivElement>();\n  const resizeObserverRef = useResizeObserver<HTMLDivElement>(props.onResize);\n  const refs = useRefs(ref, resizeObserverRef);\n  const handleClick = React.useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n    setOpen((prev) => !prev);\n  }, []);\n  const handleClose = React.useCallback(() => {\n    setOpen(false);\n  }, []);\n  usePanelPopup(handleClose);\n  const className = classnames(\n    \"nz-widget-overflow\",\n    props.hidden && \"nz-hidden\"\n  );\n  const overflowContext = React.useMemo<WidgetOverflowContextArgs>(() => {\n    return {\n      close: handleClose,\n    };\n  }, [handleClose]);\n  const moreWidgetsTitle = useLabel(\"moreWidgetsTitle\");\n  return (\n    <div className={className} ref={refs}>\n      <div // eslint-disable-line jsx-a11y/click-events-have-key-events\n        className=\"nz-button\"\n        onClick={handleClick}\n        ref={targetRef}\n        role=\"button\"\n        tabIndex={-1}\n        title={moreWidgetsTitle}\n      >\n        <div className=\"nz-icon\" />\n      </div>\n      <WidgetOverflowContext.Provider value={overflowContext}>\n        <WidgetMenu\n          children={props.children} // eslint-disable-line react/no-children-prop\n          open={open}\n          onClose={handleClose}\n          target={target}\n        />\n      </WidgetOverflowContext.Provider>\n    </div>\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"]}