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

package/lib/cjs/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,0BAAwB;AACxB,2CAAoC;AACpC,+BAA+B;AAC/B,sDAA6C;AAE7C,kDAAyC;AACzC,+BAA2C;AAC3C,qCAA0C;AAC1C,yCAAmD;AACnD,+CAAyD;AACzD,qDAAgD;AAChD,uDAAiD;AAOjD,gBAAgB;AAChB,SAAgB,aAAa,CAAC,KAAyB;IACrD,MAAM,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,8BAAY,CAAC,CAAC;IAC1C,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAC,gCAAqB,CAAC,CAAC;IAChE,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAAC,gCAAqB,CAAC,CAAC;IAC/D,IAAA,qBAAM,EAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAEb,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAA,uBAAS,EAAC,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,IAAA,qBAAM,EAAC,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,IAAA,wBAAkB,EAAC;QAC7B,WAAW,EAAE,aAAa;QAC1B,OAAO,EAAE,aAAa;QACtB,aAAa,EAAE,aAAa;KAC7B,CAAC,CAAC;IACH,MAAM,WAAW,GAAG,IAAA,uBAAc,GAAE,CAAC;IACrC,MAAM,MAAM,GAAG,WAAW,KAAK,EAAE,CAAC;IAClC,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,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,iBAAI,IAAC,QAAQ,EAAE,QAAQ,GAAI,CACrC,CACP;QACD,kCAAO,KAAK,CAAQ;QACpB,6BACE,SAAS,EAAE,IAAA,oBAAU,EACnB,cAAc;YACd,uBAAuB;YACvB,CAAC,MAAM,IAAI,WAAW,CACvB,GACD,CACE,CACP,CAAC;AACJ,CAAC;AA/CD,sCA+CC","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/cjs/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/cjs/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/cjs/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/cjs/appui-react/layout/widget/NavigationArea.js

@@ -0,0 +1,26 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Widget
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationArea = void 0;
+require("./NavigationArea.scss");
+const classnames_1 = require("classnames");
+const React = require("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
+ */
+function NavigationArea(props) {
+    const className = (0, classnames_1.default)("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)));
+}
+exports.NavigationArea = NavigationArea;
+//# sourceMappingURL=NavigationArea.js.map

package/lib/cjs/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,iCAA+B;AAC/B,2CAAoC;AACpC,+BAA+B;AAsB/B;;;GAGG;AACH,SAAgB,cAAc,CAAC,KAA0B;IACvD,MAAM,SAAS,GAAG,IAAA,oBAAU,EAAC,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;AA7BD,wCA6BC","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/cjs/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/cjs/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/cjs/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/cjs/appui-react/layout/widget/Overflow.js

@@ -0,0 +1,60 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Widget
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WidgetOverflowContext = exports.WidgetOverflow = void 0;
+require("./Overflow.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const core_react_1 = require("@itwin/core-react");
+const Menu_1 = require("./Menu");
+const NineZone_1 = require("../base/NineZone");
+const Panel_1 = require("../widget-panels/Panel");
+const LayoutStore_1 = require("../base/LayoutStore");
+/** @internal */
+function WidgetOverflow(props) {
+    const [open, setOpen] = React.useState(false);
+    const ref = React.useRef(null);
+    const [targetRef, target] = (0, core_react_1.useRefState)();
+    const resizeObserverRef = (0, core_react_1.useResizeObserver)(props.onResize);
+    const refs = (0, core_react_1.useRefs)(ref, resizeObserverRef);
+    const handleClick = React.useCallback((e) => {
+        e.preventDefault();
+        setOpen((prev) => !prev);
+    }, []);
+    const handleClose = React.useCallback(() => {
+        setOpen(false);
+    }, []);
+    usePanelPopup(handleClose);
+    const className = (0, classnames_1.default)("nz-widget-overflow", props.hidden && "nz-hidden");
+    const overflowContext = React.useMemo(() => {
+        return {
+            close: handleClose,
+        };
+    }, [handleClose]);
+    const moreWidgetsTitle = (0, NineZone_1.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(exports.WidgetOverflowContext.Provider, { value: overflowContext },
+            React.createElement(Menu_1.WidgetMenu, { children: props.children, open: open, onClose: handleClose, target: target }))));
+}
+exports.WidgetOverflow = WidgetOverflow;
+/** @internal */
+exports.WidgetOverflowContext = React.createContext(undefined);
+exports.WidgetOverflowContext.displayName = "nz:WidgetOverflowContext";
+function usePanelPopup(onClose) {
+    const side = React.useContext(Panel_1.PanelSideContext);
+    const collapsed = (0, LayoutStore_1.useLayout)((state) => side ? state.panels[side].collapsed : false);
+    React.useEffect(() => {
+        if (collapsed) {
+            onClose();
+        }
+    }, [collapsed, onClose]);
+}
+//# sourceMappingURL=Overflow.js.map

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

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

@@ -0,0 +1,59 @@
+/*---------------------------------------------------------------------------------------------
+ * 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-overflow {
+  width: 2em;
+  position: relative;
+
+  &.nz-hidden {
+    display: none;
+  }
+
+  > .nz-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    user-select: none;
+
+    > .nz-icon {
+      background: $buic-background-2;
+      width: 1em;
+      height: 1em;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:after {
+        content: "";
+        display: block;
+        border-color: $buic-foreground-disabled;
+        border-style: solid;
+        border-width: 0.15em 0.15em 0 0;
+        width: 0.5em;
+        height: 0.5em;
+        margin-left: -0.15em;
+        box-sizing: border-box;
+        transform: rotate(45deg);
+      }
+    }
+
+    &:hover {
+      > .nz-icon {
+        &:after {
+          border-color: $buic-foreground-activehover;
+        }
+      }
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+}

package/lib/cjs/appui-react/layout/widget/PanelWidget.d.ts

@@ -0,0 +1,22 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import "./PanelWidget.scss";
+import * as React from "react";
+import type { WidgetState } from "../state/WidgetState";
+/** @internal */
+export interface PanelWidgetProps {
+    widgetId: WidgetState["id"];
+}
+/** @internal */
+export declare const PanelWidget: React.ForwardRefExoticComponent<PanelWidgetProps & React.RefAttributes<HTMLDivElement>>;
+/** @internal */
+export declare function useMode(widgetId: string): "fit" | "fill" | "minimized";
+/** @internal */
+export declare function useBorders(widgetId: WidgetState["id"]): {
+    "nz-border-top": boolean;
+    "nz-border-bottom": boolean;
+    "nz-border-left": boolean;
+    "nz-border-right": boolean;
+};
+//# sourceMappingURL=PanelWidget.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PanelWidget.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/PanelWidget.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAgBxD,gBAAgB;AAChB,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;CAC7B;AAED,gBAAgB;AAChB,eAAO,MAAM,WAAW,yFA0CvB,CAAC;AAcF,gBAAgB;AAChB,wBAAgB,OAAO,CAAC,QAAQ,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,WAAW,CAwBtE;AAED,gBAAgB;AAChB,wBAAgB,UAAU,CAAC,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC;;;;;EAqErD"}

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

@@ -0,0 +1,154 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Widget
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBorders = exports.useMode = exports.PanelWidget = void 0;
+require("./PanelWidget.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const core_bentley_1 = require("@itwin/core-bentley");
+const Panel_1 = require("../widget-panels/Panel");
+const ContentContainer_1 = require("./ContentContainer");
+const TabBar_1 = require("./TabBar");
+const Widget_1 = require("./Widget");
+const WidgetOutline_1 = require("../outline/WidgetOutline");
+const WidgetTarget_1 = require("../target/WidgetTarget");
+const PanelState_1 = require("../state/PanelState");
+const LayoutStore_1 = require("../base/LayoutStore");
+const WidgetStateHelpers_1 = require("../state/internal/WidgetStateHelpers");
+/** @internal */
+exports.PanelWidget = React.forwardRef(function PanelWidget({ widgetId }, ref) {
+    const side = React.useContext(Panel_1.PanelSideContext);
+    (0, core_bentley_1.assert)(!!side);
+    const widgetsLength = (0, LayoutStore_1.useLayout)((state) => {
+        const panel = state.panels[side];
+        return panel.widgets.length;
+    });
+    const minimized = (0, LayoutStore_1.useLayout)((state) => {
+        const widget = (0, WidgetStateHelpers_1.getWidgetState)(state, widgetId);
+        return widget.minimized;
+    });
+    const horizontal = (0, Panel_1.isHorizontalPanelSide)(side);
+    const mode = useMode(widgetId);
+    const borders = useBorders(widgetId);
+    const showTarget = widgetsLength !== 1;
+    const className = (0, classnames_1.default)("nz-widget-panelWidget", horizontal && "nz-horizontal", `nz-${mode}`, borders);
+    const content = React.useMemo(() => (React.createElement(ContentContainer_1.WidgetContentContainer, null,
+        showTarget && React.createElement(WidgetTarget_1.WidgetTarget, null),
+        React.createElement(WidgetOutline_1.WidgetOutline, null))), [showTarget]);
+    return (React.createElement(Widget_1.WidgetProvider, { id: widgetId },
+        React.createElement(Widget_1.Widget, { className: className, ref: ref },
+            React.createElement(TabBar_1.WidgetTabBar, { separator: (0, Panel_1.isHorizontalPanelSide)(side) ? true : !minimized }),
+            content)));
+});
+function findFillWidget(state, side) {
+    const panelWidgets = state.panels[side].widgets;
+    return panelWidgets.find((widgetId) => {
+        const widget = (0, WidgetStateHelpers_1.getWidgetState)(state, widgetId);
+        if (widget.minimized)
+            return false;
+        const tabId = widget.activeTabId;
+        const tab = state.tabs[tabId];
+        if (!tab.preferredPanelWidgetSize)
+            return true;
+        return false;
+    });
+}
+/** @internal */
+function useMode(widgetId) {
+    const side = React.useContext(Panel_1.PanelSideContext);
+    (0, core_bentley_1.assert)(!!side);
+    return (0, LayoutStore_1.useLayout)((state) => {
+        const fillWidget = findFillWidget(state, side);
+        // Force `fill` for last panel widget that is not minimized.
+        if (!fillWidget) {
+            const panel = state.panels[side];
+            for (let i = panel.widgets.length - 1; i >= 0; i--) {
+                const wId = panel.widgets[i];
+                const w = (0, WidgetStateHelpers_1.getWidgetState)(state, wId);
+                if (w.minimized)
+                    continue;
+                if (wId === widgetId)
+                    return "fill";
+                break;
+            }
+        }
+        const widget = (0, WidgetStateHelpers_1.getWidgetState)(state, widgetId);
+        if (widget.minimized)
+            return "minimized";
+        const tabId = widget.activeTabId;
+        const tab = state.tabs[tabId];
+        return tab.preferredPanelWidgetSize ? "fit" : "fill";
+    });
+}
+exports.useMode = useMode;
+/** @internal */
+function useBorders(widgetId) {
+    const side = React.useContext(Panel_1.PanelSideContext);
+    (0, core_bentley_1.assert)(!!side);
+    return (0, LayoutStore_1.useLayout)((state) => {
+        const panels = state.panels;
+        const panel = panels[side];
+        const toolSettings = state.toolSettings;
+        const isHorizontal = (0, Panel_1.isHorizontalPanelSide)(panel.side);
+        const isVertical = !isHorizontal;
+        const isFirst = panel.widgets[0] === widgetId;
+        const isLast = panel.widgets[panel.widgets.length - 1] === widgetId;
+        const isTopMostPanelBorder = panel.side === "top" ||
+            (isVertical && !panels.top.span) ||
+            (isVertical && panels.top.span && panels.top.collapsed) ||
+            (isVertical && panels.top.widgets.length === 0);
+        let top = true;
+        let bottom = true;
+        let left = true;
+        let right = true;
+        if (panel.side === "bottom") {
+            bottom = false;
+        }
+        if (isVertical && isLast) {
+            bottom = false;
+        }
+        if (isTopMostPanelBorder && toolSettings?.type === "docked") {
+            top = false;
+        }
+        if (isVertical && !isFirst) {
+            top = false;
+        }
+        if (isVertical &&
+            panels.top.span &&
+            !panels.top.collapsed &&
+            panels.top.widgets.length > 0) {
+            top = false;
+        }
+        if (isHorizontal && !isFirst) {
+            left = false;
+        }
+        if ((0, PanelState_1.isHorizontalPanelState)(panel) &&
+            !panel.span &&
+            isFirst &&
+            !panels.left.collapsed &&
+            panels.left.widgets.length > 0) {
+            left = false;
+        }
+        if ((0, PanelState_1.isHorizontalPanelState)(panel) &&
+            !panel.span &&
+            isLast &&
+            !panels.right.collapsed &&
+            panels.right.widgets.length > 0) {
+            right = false;
+        }
+        return {
+            "nz-border-top": top,
+            "nz-border-bottom": bottom,
+            "nz-border-left": left,
+            "nz-border-right": right,
+        };
+    }, true);
+}
+exports.useBorders = useBorders;
+//# sourceMappingURL=PanelWidget.js.map

package/lib/cjs/appui-react/layout/widget/PanelWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelWidget.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/PanelWidget.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 \"./PanelWidget.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { assert } from \"@itwin/core-bentley\";\nimport type { WidgetState } from \"../state/WidgetState\";\nimport type { PanelSide } from \"../widget-panels/PanelTypes\";\nimport {\n  isHorizontalPanelSide,\n  PanelSideContext,\n} from \"../widget-panels/Panel\";\nimport { WidgetContentContainer } from \"./ContentContainer\";\nimport { WidgetTabBar } from \"./TabBar\";\nimport { Widget, WidgetProvider } from \"./Widget\";\nimport { WidgetOutline } from \"../outline/WidgetOutline\";\nimport { WidgetTarget } from \"../target/WidgetTarget\";\nimport { isHorizontalPanelState } from \"../state/PanelState\";\nimport { useLayout } from \"../base/LayoutStore\";\nimport { getWidgetState } from \"../state/internal/WidgetStateHelpers\";\nimport type { NineZoneState } from \"../state/NineZoneState\";\n\n/** @internal */\nexport interface PanelWidgetProps {\n  widgetId: WidgetState[\"id\"];\n}\n\n/** @internal */\nexport const PanelWidget = React.forwardRef<HTMLDivElement, PanelWidgetProps>(\n  function PanelWidget({ widgetId }, ref) {\n    const side = React.useContext(PanelSideContext);\n    assert(!!side);\n    const widgetsLength = useLayout((state) => {\n      const panel = state.panels[side];\n      return panel.widgets.length;\n    });\n    const minimized = useLayout((state) => {\n      const widget = getWidgetState(state, widgetId);\n      return widget.minimized;\n    });\n    const horizontal = isHorizontalPanelSide(side);\n    const mode = useMode(widgetId);\n    const borders = useBorders(widgetId);\n    const showTarget = widgetsLength !== 1;\n    const className = classnames(\n      \"nz-widget-panelWidget\",\n      horizontal && \"nz-horizontal\",\n      `nz-${mode}`,\n      borders\n    );\n    const content = React.useMemo(\n      () => (\n        <WidgetContentContainer>\n          {showTarget && <WidgetTarget />}\n          <WidgetOutline />\n        </WidgetContentContainer>\n      ),\n      [showTarget]\n    );\n    return (\n      <WidgetProvider id={widgetId}>\n        <Widget className={className} ref={ref}>\n          <WidgetTabBar\n            separator={isHorizontalPanelSide(side) ? true : !minimized}\n          />\n          {content}\n        </Widget>\n      </WidgetProvider>\n    );\n  }\n);\n\nfunction findFillWidget(state: NineZoneState, side: PanelSide) {\n  const panelWidgets = state.panels[side].widgets;\n  return panelWidgets.find((widgetId) => {\n    const widget = getWidgetState(state, widgetId);\n    if (widget.minimized) return false;\n    const tabId = widget.activeTabId;\n    const tab = state.tabs[tabId];\n    if (!tab.preferredPanelWidgetSize) return true;\n    return false;\n  });\n}\n\n/** @internal */\nexport function useMode(widgetId: string): \"fit\" | \"fill\" | \"minimized\" {\n  const side = React.useContext(PanelSideContext);\n  assert(!!side);\n  return useLayout((state) => {\n    const fillWidget = findFillWidget(state, side);\n\n    // Force `fill` for last panel widget that is not minimized.\n    if (!fillWidget) {\n      const panel = state.panels[side];\n      for (let i = panel.widgets.length - 1; i >= 0; i--) {\n        const wId = panel.widgets[i];\n        const w = getWidgetState(state, wId);\n        if (w.minimized) continue;\n        if (wId === widgetId) return \"fill\";\n        break;\n      }\n    }\n\n    const widget = getWidgetState(state, widgetId);\n    if (widget.minimized) return \"minimized\";\n    const tabId = widget.activeTabId;\n    const tab = state.tabs[tabId];\n    return tab.preferredPanelWidgetSize ? \"fit\" : \"fill\";\n  });\n}\n\n/** @internal */\nexport function useBorders(widgetId: WidgetState[\"id\"]) {\n  const side = React.useContext(PanelSideContext);\n  assert(!!side);\n  return useLayout((state) => {\n    const panels = state.panels;\n    const panel = panels[side];\n    const toolSettings = state.toolSettings;\n    const isHorizontal = isHorizontalPanelSide(panel.side);\n    const isVertical = !isHorizontal;\n    const isFirst = panel.widgets[0] === widgetId;\n    const isLast = panel.widgets[panel.widgets.length - 1] === widgetId;\n    const isTopMostPanelBorder =\n      panel.side === \"top\" ||\n      (isVertical && !panels.top.span) ||\n      (isVertical && panels.top.span && panels.top.collapsed) ||\n      (isVertical && panels.top.widgets.length === 0);\n\n    let top = true;\n    let bottom = true;\n    let left = true;\n    let right = true;\n    if (panel.side === \"bottom\") {\n      bottom = false;\n    }\n    if (isVertical && isLast) {\n      bottom = false;\n    }\n    if (isTopMostPanelBorder && toolSettings?.type === \"docked\") {\n      top = false;\n    }\n    if (isVertical && !isFirst) {\n      top = false;\n    }\n    if (\n      isVertical &&\n      panels.top.span &&\n      !panels.top.collapsed &&\n      panels.top.widgets.length > 0\n    ) {\n      top = false;\n    }\n    if (isHorizontal && !isFirst) {\n      left = false;\n    }\n    if (\n      isHorizontalPanelState(panel) &&\n      !panel.span &&\n      isFirst &&\n      !panels.left.collapsed &&\n      panels.left.widgets.length > 0\n    ) {\n      left = false;\n    }\n    if (\n      isHorizontalPanelState(panel) &&\n      !panel.span &&\n      isLast &&\n      !panels.right.collapsed &&\n      panels.right.widgets.length > 0\n    ) {\n      right = false;\n    }\n    return {\n      \"nz-border-top\": top,\n      \"nz-border-bottom\": bottom,\n      \"nz-border-left\": left,\n      \"nz-border-right\": right,\n    };\n  }, true);\n}\n"]}

package/lib/cjs/appui-react/layout/widget/PanelWidget.scss

@@ -0,0 +1,62 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+.nz-widget-panelWidget {
+  $border-width: 1px;
+  border: 0px solid var(--iui-color-border);
+
+  &.nz-border-top {
+    border-top-width: $border-width;
+  }
+
+  &.nz-border-bottom {
+    border-bottom-width: $border-width;
+  }
+
+  &.nz-border-left {
+    border-left-width: $border-width;
+  }
+
+  &.nz-border-right {
+    border-right-width: $border-width;
+  }
+
+  &.nz-widget-widget,
+  &.nz-init,
+  &.nz-transition {
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+
+  &.nz-horizontal {
+    &.nz-transition {
+      transition: flex-basis 0.25s ease-out;
+    }
+  }
+
+  &:not(.nz-horizontal) {
+    &.nz-transition {
+      transition: flex-basis 0.25s ease-out;
+    }
+  }
+
+  &.nz-fit {
+    flex: 0 1 auto;
+  }
+
+  &.nz-fill {
+    flex-grow: 1;
+    flex-shrink: 0;
+    flex-basis: 0px;
+    min-height: 0;
+  }
+
+  &:not(.nz-minimized) {
+    > .nz-content {
+      min-height: 0;
+      min-width: 0;
+    }
+  }
+}

package/lib/cjs/appui-react/layout/widget/PinToggle.d.ts

@@ -0,0 +1,7 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import * as React from "react";
+/** @internal */
+export declare function PinToggle(): React.JSX.Element;
+//# sourceMappingURL=PinToggle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PinToggle.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/PinToggle.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,gBAAgB;AAChB,wBAAgB,SAAS,sBAoBxB"}