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

package/lib/cjs/appui-react/layout/tool-settings/Docked.scss

@@ -0,0 +1,48 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+.nz-toolSettings-docked {
+  height: 2.5em;
+  width: 100%;
+
+  display: flex;
+  position: relative;
+  background: var(--iui-color-background);
+  border: 1px solid var(--iui-color-border);
+
+  > .nz-container {
+    display: flex;
+  }
+
+  // Remove docked toolsettings from the flow causes the content to shift up.
+  // We then simply account for it by adding a margin to the top of the content.
+  &.preview-contentAlwaysMaxSize {
+    z-index: 1;
+    position: absolute;
+    // iTwinUI toast cause box-sizing to be border-box, so we need to override it.
+    box-sizing: content-box;
+  }
+}
+
+.nz-toolSettings-docked_container {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  row-gap: 4px;
+  column-gap: 4px;
+  align-items: flex-start;
+}
+
+.toolsettings-appear {
+  opacity: 0.1;
+  transition: opacity 150ms ease-in-out;
+  transform: translateY(-100%);
+}
+
+.toolsettings-appear-active {
+  opacity: 0.7;
+  transition: opacity 150ms ease-in-out;
+  transform: translateY(0);
+  transition: transform 400ms ease-out;
+}

package/lib/cjs/appui-react/layout/tool-settings/Handle.d.ts

@@ -0,0 +1,17 @@
+/** @packageDocumentation
+ * @module ToolSettings
+ */
+import "./Handle.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** Properties of [[DockedToolSettingsHandle]] component.
+ * @internal
+ */
+export interface DockedToolSettingsHandleProps extends CommonProps {
+    onResize?: (w: number) => void;
+}
+/** Component that displays tool settings as a bar across the top of the content view.
+ * @internal
+ */
+export declare function DockedToolSettingsHandle(props: DockedToolSettingsHandleProps): React.JSX.Element;
+//# sourceMappingURL=Handle.d.ts.map

package/lib/cjs/appui-react/layout/tool-settings/Handle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Handle.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/tool-settings/Handle.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,eAAe,CAAC;AAEvB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAS,MAAM,mBAAmB,CAAC;AAW5D;;GAEG;AACH,MAAM,WAAW,6BAA8B,SAAQ,WAAW;IAChE,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,6BAA6B,qBA4B5E"}

package/lib/cjs/appui-react/layout/tool-settings/Handle.js

@@ -0,0 +1,45 @@
+"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 ToolSettings
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DockedToolSettingsHandle = void 0;
+require("./Handle.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const core_react_1 = require("@itwin/core-react");
+const DragManager_1 = require("../base/DragManager");
+const NineZone_1 = require("../base/NineZone");
+const TabBar_1 = require("../widget/TabBar");
+const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
+/** Component that displays tool settings as a bar across the top of the content view.
+ * @internal
+ */
+function DockedToolSettingsHandle(props) {
+    const dispatch = React.useContext(NineZone_1.NineZoneDispatchContext);
+    const resizeObserverRef = (0, core_react_1.useResizeObserver)(props.onResize);
+    const newFloatingWidgetId = React.useMemo(() => (0, NineZone_1.getUniqueId)(), []);
+    const onDragStart = (0, DragManager_1.useDragToolSettings)({ newFloatingWidgetId });
+    const handleDragStart = React.useCallback((initialPointerPosition) => {
+        onDragStart({
+            initialPointerPosition,
+            pointerPosition: initialPointerPosition,
+        });
+        dispatch({
+            type: "TOOL_SETTINGS_DRAG_START",
+            newFloatingWidgetId,
+        });
+    }, [dispatch, newFloatingWidgetId, onDragStart]);
+    const dragRef = (0, TabBar_1.useDrag)(handleDragStart);
+    const refs = (0, core_react_1.useRefs)(dragRef, resizeObserverRef);
+    const title = (0, NineZone_1.useLabel)("toolSettingsHandleTitle");
+    const className = (0, classnames_1.default)("nz-toolSettings-handle", props.className);
+    return (React.createElement("div", { className: className, ref: refs, style: props.style, title: title },
+        React.createElement(itwinui_icons_react_1.SvgDragHandleVertical, null)));
+}
+exports.DockedToolSettingsHandle = DockedToolSettingsHandle;
+//# sourceMappingURL=Handle.js.map

package/lib/cjs/appui-react/layout/tool-settings/Handle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Handle.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/tool-settings/Handle.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,yBAAuB;AACvB,2CAAoC;AACpC,+BAA+B;AAE/B,kDAA+D;AAC/D,qDAA0D;AAC1D,+CAI0B;AAC1B,6CAA2C;AAC3C,oEAAmE;AASnE;;GAEG;AACH,SAAgB,wBAAwB,CAAC,KAAoC;IAC3E,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,kCAAuB,CAAC,CAAC;IAC3D,MAAM,iBAAiB,GAAG,IAAA,8BAAiB,EAAiB,KAAK,CAAC,QAAQ,CAAC,CAAC;IAC5E,MAAM,mBAAmB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,IAAA,sBAAW,GAAE,EAAE,EAAE,CAAC,CAAC;IACnE,MAAM,WAAW,GAAG,IAAA,iCAAmB,EAAC,EAAE,mBAAmB,EAAE,CAAC,CAAC;IACjE,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CACvC,CAAC,sBAA6B,EAAE,EAAE;QAChC,WAAW,CAAC;YACV,sBAAsB;YACtB,eAAe,EAAE,sBAAsB;SACxC,CAAC,CAAC;QACH,QAAQ,CAAC;YACP,IAAI,EAAE,0BAA0B;YAChC,mBAAmB;SACpB,CAAC,CAAC;IACL,CAAC,EACD,CAAC,QAAQ,EAAE,mBAAmB,EAAE,WAAW,CAAC,CAC7C,CAAC;IACF,MAAM,OAAO,GAAG,IAAA,gBAAO,EAAC,eAAe,CAAC,CAAC;IACzC,MAAM,IAAI,GAAG,IAAA,oBAAO,EAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;IACjD,MAAM,KAAK,GAAG,IAAA,mBAAQ,EAAC,yBAAyB,CAAC,CAAC;IAClD,MAAM,SAAS,GAAG,IAAA,oBAAU,EAAC,wBAAwB,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAExE,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK;QACpE,oBAAC,2CAAqB,OAAG,CACrB,CACP,CAAC;AACJ,CAAC;AA5BD,4DA4BC","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 ToolSettings\n */\n\nimport \"./Handle.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps, Point } from \"@itwin/core-react\";\nimport { useRefs, useResizeObserver } from \"@itwin/core-react\";\nimport { useDragToolSettings } from \"../base/DragManager\";\nimport {\n  getUniqueId,\n  NineZoneDispatchContext,\n  useLabel,\n} from \"../base/NineZone\";\nimport { useDrag } from \"../widget/TabBar\";\nimport { SvgDragHandleVertical } from \"@itwin/itwinui-icons-react\";\n\n/** Properties of [[DockedToolSettingsHandle]] component.\n * @internal\n */\nexport interface DockedToolSettingsHandleProps extends CommonProps {\n  onResize?: (w: number) => void;\n}\n\n/** Component that displays tool settings as a bar across the top of the content view.\n * @internal\n */\nexport function DockedToolSettingsHandle(props: DockedToolSettingsHandleProps) {\n  const dispatch = React.useContext(NineZoneDispatchContext);\n  const resizeObserverRef = useResizeObserver<HTMLDivElement>(props.onResize);\n  const newFloatingWidgetId = React.useMemo(() => getUniqueId(), []);\n  const onDragStart = useDragToolSettings({ newFloatingWidgetId });\n  const handleDragStart = React.useCallback(\n    (initialPointerPosition: Point) => {\n      onDragStart({\n        initialPointerPosition,\n        pointerPosition: initialPointerPosition,\n      });\n      dispatch({\n        type: \"TOOL_SETTINGS_DRAG_START\",\n        newFloatingWidgetId,\n      });\n    },\n    [dispatch, newFloatingWidgetId, onDragStart]\n  );\n  const dragRef = useDrag(handleDragStart);\n  const refs = useRefs(dragRef, resizeObserverRef);\n  const title = useLabel(\"toolSettingsHandleTitle\");\n  const className = classnames(\"nz-toolSettings-handle\", props.className);\n\n  return (\n    <div className={className} ref={refs} style={props.style} title={title}>\n      <SvgDragHandleVertical />\n    </div>\n  );\n}\n"]}

package/lib/cjs/appui-react/layout/tool-settings/Handle.scss

@@ -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.
+ *--------------------------------------------------------------------------------------------*/
+
+.nz-toolSettings-handle {
+  $dot-size: 0.25em;
+  $dot-gap: $dot-size;
+
+  height: 100%;
+  width: 2em;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: grab;
+  flex-shrink: 0;
+
+  svg {
+    width: 2em;
+    height: 2em;
+  }
+}

package/lib/cjs/appui-react/layout/tool-settings/Overflow.d.ts

@@ -0,0 +1,20 @@
+/** @packageDocumentation
+ * @module ToolSettings
+ */
+import "./Overflow.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** Properties of [[ToolSettingsOverflow]] component.
+ * @internal
+ */
+export interface DockedToolSettingsOverflowProps extends CommonProps {
+    /** Function called when button is clicked. */
+    onClick?: () => void;
+    /** Function called when button is resized. */
+    onResize?: (w: number) => void;
+}
+/** Entry point to overflown tool settings of [[DockedToolSettings]] component.
+ * @internal
+ */
+export declare const DockedToolSettingsOverflow: React.ForwardRefExoticComponent<DockedToolSettingsOverflowProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Overflow.d.ts.map

package/lib/cjs/appui-react/layout/tool-settings/Overflow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overflow.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/tool-settings/Overflow.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,iBAAiB,CAAC;AAEzB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAKrD;;GAEG;AACH,MAAM,WAAW,+BAAgC,SAAQ,WAAW;IAClE,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAED;;GAEG;AACH,eAAO,MAAM,0BAA0B,wGAuBrC,CAAC"}

package/lib/cjs/appui-react/layout/tool-settings/Overflow.js

@@ -0,0 +1,30 @@
+"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 ToolSettings
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DockedToolSettingsOverflow = void 0;
+require("./Overflow.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const core_react_1 = require("@itwin/core-react");
+const Ellipsis_1 = require("../base/Ellipsis");
+const NineZone_1 = require("../base/NineZone");
+/** Entry point to overflown tool settings of [[DockedToolSettings]] component.
+ * @internal
+ */
+exports.DockedToolSettingsOverflow = React.forwardRef(function DockedToolSettingsOverflow(props, ref) {
+    const roRef = (0, core_react_1.useResizeObserver)(props.onResize);
+    const refs = (0, core_react_1.useRefs)(roRef, ref);
+    const className = (0, classnames_1.default)("nz-toolSettings-overflow", props.className);
+    const moreToolSettingsTitle = (0, NineZone_1.useLabel)("moreToolSettingsTitle");
+    return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+    React.createElement("div", { className: className, onClick: props.onClick, ref: refs, style: props.style, role: "button", tabIndex: -1, title: moreToolSettingsTitle },
+        React.createElement(Ellipsis_1.Ellipsis, null)));
+});
+//# sourceMappingURL=Overflow.js.map

package/lib/cjs/appui-react/layout/tool-settings/Overflow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overflow.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/tool-settings/Overflow.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,2BAAyB;AACzB,2CAAoC;AACpC,+BAA+B;AAE/B,kDAA+D;AAC/D,+CAA4C;AAC5C,+CAA4C;AAY5C;;GAEG;AACU,QAAA,0BAA0B,GAAG,KAAK,CAAC,UAAU,CAGxD,SAAS,0BAA0B,CAAC,KAAK,EAAE,GAAG;IAC9C,MAAM,KAAK,GAAG,IAAA,8BAAiB,EAAiB,KAAK,CAAC,QAAQ,CAAC,CAAC;IAChE,MAAM,IAAI,GAAG,IAAA,oBAAO,EAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IACjC,MAAM,SAAS,GAAG,IAAA,oBAAU,EAAC,0BAA0B,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAC1E,MAAM,qBAAqB,GAAG,IAAA,mBAAQ,EAAC,uBAAuB,CAAC,CAAC;IAEhE,OAAO;IACL,iEAAiE;IACjE,6BACE,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,GAAG,EAAE,IAAI,EACT,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,CAAC,EACZ,KAAK,EAAE,qBAAqB;QAE5B,oBAAC,mBAAQ,OAAG,CACR,CACP,CAAC;AACJ,CAAC,CAAC,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 ToolSettings\n */\n\nimport \"./Overflow.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { useRefs, useResizeObserver } from \"@itwin/core-react\";\nimport { Ellipsis } from \"../base/Ellipsis\";\nimport { useLabel } from \"../base/NineZone\";\n\n/** Properties of [[ToolSettingsOverflow]] component.\n * @internal\n */\nexport interface DockedToolSettingsOverflowProps extends CommonProps {\n  /** Function called when button is clicked. */\n  onClick?: () => void;\n  /** Function called when button is resized. */\n  onResize?: (w: number) => void;\n}\n\n/** Entry point to overflown tool settings of [[DockedToolSettings]] component.\n * @internal\n */\nexport const DockedToolSettingsOverflow = React.forwardRef<\n  HTMLDivElement,\n  DockedToolSettingsOverflowProps\n>(function DockedToolSettingsOverflow(props, ref) {\n  const roRef = useResizeObserver<HTMLDivElement>(props.onResize);\n  const refs = useRefs(roRef, ref);\n  const className = classnames(\"nz-toolSettings-overflow\", props.className);\n  const moreToolSettingsTitle = useLabel(\"moreToolSettingsTitle\");\n\n  return (\n    // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n    <div\n      className={className}\n      onClick={props.onClick}\n      ref={refs}\n      style={props.style}\n      role=\"button\"\n      tabIndex={-1}\n      title={moreToolSettingsTitle}\n    >\n      <Ellipsis />\n    </div>\n  );\n});\n"]}

package/lib/cjs/appui-react/layout/tool-settings/Overflow.scss

@@ -0,0 +1,28 @@
+/*---------------------------------------------------------------------------------------------
+ * 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-toolSettings-overflow {
+  height: 100%;
+  width: 3em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+  cursor: pointer;
+  flex-shrink: 0;
+
+  &:hover {
+    background: $buic-background-2;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &.nz-hidden {
+    visibility: hidden;
+  }
+}

package/lib/cjs/appui-react/layout/tool-settings/Panel.d.ts

@@ -0,0 +1,21 @@
+/** @packageDocumentation
+ * @module ToolSettings
+ */
+import "./Panel.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** Properties of [[ToolSettingsOverflowPanel]] component.
+ * @internal
+ */
+export interface ToolSettingsOverflowPanelProps extends CommonProps {
+    /** Panel content. */
+    children?: React.ReactNode;
+    onClose: () => void;
+    target: HTMLElement | undefined;
+    open: boolean;
+}
+/** Displays overflown tool settings.
+ * @internal
+ */
+export declare function ToolSettingsOverflowPanel(props: ToolSettingsOverflowPanelProps): React.JSX.Element;
+//# sourceMappingURL=Panel.d.ts.map

package/lib/cjs/appui-react/layout/tool-settings/Panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/tool-settings/Panel.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,cAAc,CAAC;AAEtB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD;;GAEG;AACH,MAAM,WAAW,8BAA+B,SAAQ,WAAW;IACjE,qBAAqB;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,WAAW,GAAG,SAAS,CAAC;IAChC,IAAI,EAAE,OAAO,CAAC;CACf;AAED;;GAEG;AACH,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,8BAA8B,qBAgBtC"}

package/lib/cjs/appui-react/layout/tool-settings/Panel.js

@@ -0,0 +1,23 @@
+"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 ToolSettings
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolSettingsOverflowPanel = void 0;
+require("./Panel.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const core_react_1 = require("@itwin/core-react");
+/** Displays overflown tool settings.
+ * @internal
+ */
+function ToolSettingsOverflowPanel(props) {
+    const className = (0, classnames_1.default)("nz-toolSettings-panel", props.className);
+    return (React.createElement(core_react_1.Popup, { className: className, isOpen: props.open, offset: 0, onClose: props.onClose, style: props.style, showShadow: true, target: props.target }, props.children));
+}
+exports.ToolSettingsOverflowPanel = ToolSettingsOverflowPanel;
+//# sourceMappingURL=Panel.js.map

package/lib/cjs/appui-react/layout/tool-settings/Panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/tool-settings/Panel.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,wBAAsB;AACtB,2CAAoC;AACpC,+BAA+B;AAE/B,kDAA0C;AAa1C;;GAEG;AACH,SAAgB,yBAAyB,CACvC,KAAqC;IAErC,MAAM,SAAS,GAAG,IAAA,oBAAU,EAAC,uBAAuB,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IACvE,OAAO,CACL,oBAAC,kBAAK,IACJ,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,KAAK,CAAC,IAAI,EAClB,MAAM,EAAE,CAAC,EACT,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,UAAU,QACV,MAAM,EAAE,KAAK,CAAC,MAAM,IAEnB,KAAK,CAAC,QAAQ,CACT,CACT,CAAC;AACJ,CAAC;AAjBD,8DAiBC","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 ToolSettings\n */\n\nimport \"./Panel.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Popup } from \"@itwin/core-react\";\n\n/** Properties of [[ToolSettingsOverflowPanel]] component.\n * @internal\n */\nexport interface ToolSettingsOverflowPanelProps extends CommonProps {\n  /** Panel content. */\n  children?: React.ReactNode;\n  onClose: () => void;\n  target: HTMLElement | undefined;\n  open: boolean;\n}\n\n/** Displays overflown tool settings.\n * @internal\n */\nexport function ToolSettingsOverflowPanel(\n  props: ToolSettingsOverflowPanelProps\n) {\n  const className = classnames(\"nz-toolSettings-panel\", props.className);\n  return (\n    <Popup\n      className={className}\n      isOpen={props.open}\n      offset={0}\n      onClose={props.onClose}\n      style={props.style}\n      showShadow\n      target={props.target}\n    >\n      {props.children}\n    </Popup>\n  );\n}\n"]}

package/lib/cjs/appui-react/layout/tool-settings/Panel.scss

@@ -0,0 +1,11 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+
+.nz-toolSettings-panel {
+  background: $buic-background-1;
+  padding: 0.5em;
+}

package/lib/cjs/appui-react/layout/tool-settings/Setting.d.ts

@@ -0,0 +1,18 @@
+/** @packageDocumentation
+ * @module ToolSettings
+ */
+import "./Setting.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** Properties of [[ToolSetting]] component.
+ * @internal
+ */
+export interface ToolSettingProps extends CommonProps {
+    /** Tool setting content. */
+    children?: React.ReactNode;
+}
+/** Used in a [[DockedToolSettings]] component to display a setting.
+ * @internal
+ */
+export declare function DockedToolSetting(props: ToolSettingProps): React.JSX.Element;
+//# sourceMappingURL=Setting.d.ts.map

package/lib/cjs/appui-react/layout/tool-settings/Setting.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Setting.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/tool-settings/Setting.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AAExB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIrD;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,gBAAgB,qBASxD"}

package/lib/cjs/appui-react/layout/tool-settings/Setting.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 ToolSettings
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DockedToolSetting = void 0;
+require("./Setting.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const core_react_1 = require("@itwin/core-react");
+const Docked_1 = require("./Docked");
+/** Used in a [[DockedToolSettings]] component to display a setting.
+ * @internal
+ */
+function DockedToolSetting(props) {
+    const { onResize } = (0, Docked_1.useToolSettingsEntry)();
+    const ref = (0, core_react_1.useResizeObserver)(onResize);
+    const className = (0, classnames_1.default)("nz-toolSettings-setting", props.className);
+    return (React.createElement("div", { className: className, ref: ref, style: props.style }, props.children));
+}
+exports.DockedToolSetting = DockedToolSetting;
+//# sourceMappingURL=Setting.js.map

package/lib/cjs/appui-react/layout/tool-settings/Setting.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Setting.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/tool-settings/Setting.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,0BAAwB;AACxB,2CAAoC;AACpC,+BAA+B;AAE/B,kDAAsD;AACtD,qCAAgD;AAUhD;;GAEG;AACH,SAAgB,iBAAiB,CAAC,KAAuB;IACvD,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAA,6BAAoB,GAAE,CAAC;IAC5C,MAAM,GAAG,GAAG,IAAA,8BAAiB,EAAiB,QAAQ,CAAC,CAAC;IACxD,MAAM,SAAS,GAAG,IAAA,oBAAU,EAAC,yBAAyB,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IACzE,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IACpD,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AATD,8CASC","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 ToolSettings\n */\n\nimport \"./Setting.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { useResizeObserver } from \"@itwin/core-react\";\nimport { useToolSettingsEntry } from \"./Docked\";\n\n/** Properties of [[ToolSetting]] component.\n * @internal\n */\nexport interface ToolSettingProps extends CommonProps {\n  /** Tool setting content. */\n  children?: React.ReactNode;\n}\n\n/** Used in a [[DockedToolSettings]] component to display a setting.\n * @internal\n */\nexport function DockedToolSetting(props: ToolSettingProps) {\n  const { onResize } = useToolSettingsEntry();\n  const ref = useResizeObserver<HTMLDivElement>(onResize);\n  const className = classnames(\"nz-toolSettings-setting\", props.className);\n  return (\n    <div className={className} ref={ref} style={props.style}>\n      {props.children}\n    </div>\n  );\n}\n"]}

package/lib/cjs/appui-react/layout/tool-settings/Setting.scss

@@ -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.
+ *--------------------------------------------------------------------------------------------*/
+.nz-toolSettings-setting {
+  height: 100%;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+
+  &:not(.nz-overflown) {
+    &:before {
+      content: "";
+      padding-left: 1em;
+    }
+
+    &:after {
+      content: "";
+      padding-right: 1em;
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import { IconButton } from "@itwin/itwinui-react";
+/** @internal */
+export declare const TabBarButton: typeof IconButton;
+//# sourceMappingURL=Button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/Button.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAGH,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,gBAAgB;AAChB,eAAO,MAAM,YAAY,EAAE,OAAO,UAOhC,CAAC"}

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

@@ -0,0 +1,17 @@
+"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.TabBarButton = void 0;
+const React = require("react");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+/** @internal */
+exports.TabBarButton = React.forwardRef(function TabBarButton(props, ref) {
+    return (React.createElement(itwinui_react_1.IconButton, { ref: ref, styleType: "borderless", size: "small", ...props }));
+});
+//# sourceMappingURL=Button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/Button.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,+BAA+B;AAC/B,wDAAkD;AAElD,gBAAgB;AACH,QAAA,YAAY,GAAsB,KAAK,CAAC,UAAU,CAG7D,SAAS,YAAY,CAAC,KAAK,EAAE,GAAG;IAChC,OAAO,CACL,oBAAC,0BAAU,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,KAAK,KAAK,GAAI,CACxE,CAAC;AACJ,CAAC,CAAC,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 { IconButton } from \"@itwin/itwinui-react\";\n\n/** @internal */\nexport const TabBarButton: typeof IconButton = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof IconButton>\n>(function TabBarButton(props, ref) {\n  return (\n    <IconButton ref={ref} styleType=\"borderless\" size=\"small\" {...props} />\n  );\n});\n"]}

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

@@ -0,0 +1,12 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import * as React from "react";
+import "./Buttons.scss";
+/** @internal */
+export declare function TabBarButtons(): React.JSX.Element;
+/** @internal */
+export declare function useWidgetFeatures(): ("pin" | "maximize" | "popout" | "horizontalAlign" | "dock" | "sendBack")[];
+/** @internal */
+export declare function useIsMainPanelWidget(): boolean;
+//# sourceMappingURL=Buttons.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Buttons.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/Buttons.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAyB/B,OAAO,gBAAgB,CAAC;AAExB,gBAAgB;AAChB,wBAAgB,aAAa,sBA2B5B;AAED,gBAAgB;AAChB,wBAAgB,iBAAiB,gFAmBhC;AAED,gBAAgB;AAChB,wBAAgB,oBAAoB,YAYnC"}

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

@@ -0,0 +1,85 @@
+"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.useIsMainPanelWidget = exports.useWidgetFeatures = exports.TabBarButtons = void 0;
+const React = require("react");
+const core_bentley_1 = require("@itwin/core-bentley");
+const LayoutStore_1 = require("../base/LayoutStore");
+const Panel_1 = require("../widget-panels/Panel");
+const Dock_1 = require("./Dock");
+const PinToggle_1 = require("./PinToggle");
+const PopoutToggle_1 = require("./PopoutToggle");
+const PreviewHorizontalPanelAlign_1 = require("./PreviewHorizontalPanelAlign");
+const PreviewMaximizeToggle_1 = require("./PreviewMaximizeToggle");
+const SendBack_1 = require("./SendBack");
+const Widget_1 = require("./Widget");
+const MoreButton_1 = require("../../preview/widget-action-dropdown/MoreButton");
+const useIsToolSettingsTab_1 = require("./useIsToolSettingsTab");
+require("./Buttons.scss");
+/** @internal */
+function TabBarButtons() {
+    const features = useWidgetFeatures();
+    const [sortedFeatures, isDropdown] = (0, MoreButton_1.useDropdownFeatures)(features);
+    const buttons = sortedFeatures.map((feature) => {
+        switch (feature) {
+            case "popout":
+                return React.createElement(PopoutToggle_1.PopoutToggle, { key: "popout" });
+            case "maximize":
+                return React.createElement(PreviewMaximizeToggle_1.PreviewMaximizeToggle, { key: "maximize" });
+            case "sendBack":
+                return React.createElement(SendBack_1.SendBack, { key: "sendBack" });
+            case "dock":
+                return React.createElement(Dock_1.Dock, { key: "dock" });
+            case "horizontalAlign":
+                return React.createElement(PreviewHorizontalPanelAlign_1.PreviewHorizontalPanelAlignButton, { key: "horizontalAlign" });
+            case "pin":
+                return React.createElement(PinToggle_1.PinToggle, { key: "pin" });
+        }
+        return undefined;
+    });
+    return (React.createElement("div", { className: "nz-widget-buttons" }, isDropdown ? React.createElement(MoreButton_1.MoreButton, null, buttons) : buttons));
+}
+exports.TabBarButtons = TabBarButtons;
+/** @internal */
+function useWidgetFeatures() {
+    const isToolSettings = (0, useIsToolSettingsTab_1.useIsToolSettingsTab)();
+    const isMainPanelWidget = useIsMainPanelWidget();
+    const popoutToggle = (0, PopoutToggle_1.usePopoutToggle)();
+    const maximizeToggle = (0, PreviewMaximizeToggle_1.useMaximizeToggle)();
+    const sendBack = (0, SendBack_1.useSendBack)();
+    const dock = isToolSettings;
+    const horizontalPanelAlignButton = (0, PreviewHorizontalPanelAlign_1.useHorizontalPanelAlignButton)();
+    const pinToggle = isMainPanelWidget;
+    return [
+        ...(popoutToggle ? ["popout"] : []),
+        ...(maximizeToggle ? ["maximize"] : []),
+        ...(sendBack ? ["sendBack"] : []),
+        ...(dock ? ["dock"] : []),
+        ...(horizontalPanelAlignButton ? ["horizontalAlign"] : []),
+        ...(pinToggle ? ["pin"] : []),
+    ];
+}
+exports.useWidgetFeatures = useWidgetFeatures;
+/** @internal */
+function useIsMainPanelWidget() {
+    const side = React.useContext(Panel_1.PanelSideContext);
+    const widgetId = React.useContext(Widget_1.WidgetIdContext);
+    return (0, LayoutStore_1.useLayout)((state) => {
+        const widgets = side ? state.panels[side].widgets : undefined;
+        if (!widgets)
+            return false;
+        (0, core_bentley_1.assert)(!!side);
+        const mainWidget = (0, Panel_1.isHorizontalPanelSide)(side)
+            ? widgets[widgets.length - 1]
+            : widgets[0];
+        return mainWidget === widgetId;
+    });
+}
+exports.useIsMainPanelWidget = useIsMainPanelWidget;
+//# sourceMappingURL=Buttons.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Buttons.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/Buttons.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 * as React from \"react\";\nimport { assert } from \"@itwin/core-bentley\";\nimport { useLayout } from \"../base/LayoutStore\";\nimport {\n  isHorizontalPanelSide,\n  PanelSideContext,\n} from \"../widget-panels/Panel\";\nimport { Dock } from \"./Dock\";\nimport { PinToggle } from \"./PinToggle\";\nimport { PopoutToggle, usePopoutToggle } from \"./PopoutToggle\";\nimport {\n  PreviewHorizontalPanelAlignButton,\n  useHorizontalPanelAlignButton,\n} from \"./PreviewHorizontalPanelAlign\";\nimport {\n  PreviewMaximizeToggle,\n  useMaximizeToggle,\n} from \"./PreviewMaximizeToggle\";\nimport { SendBack, useSendBack } from \"./SendBack\";\nimport { WidgetIdContext } from \"./Widget\";\nimport {\n  MoreButton,\n  useDropdownFeatures,\n} from \"../../preview/widget-action-dropdown/MoreButton\";\nimport { useIsToolSettingsTab } from \"./useIsToolSettingsTab\";\nimport \"./Buttons.scss\";\n\n/** @internal */\nexport function TabBarButtons() {\n  const features = useWidgetFeatures();\n  const [sortedFeatures, isDropdown] = useDropdownFeatures(features);\n\n  const buttons = sortedFeatures.map((feature) => {\n    switch (feature) {\n      case \"popout\":\n        return <PopoutToggle key=\"popout\" />;\n      case \"maximize\":\n        return <PreviewMaximizeToggle key=\"maximize\" />;\n      case \"sendBack\":\n        return <SendBack key=\"sendBack\" />;\n      case \"dock\":\n        return <Dock key=\"dock\" />;\n      case \"horizontalAlign\":\n        return <PreviewHorizontalPanelAlignButton key=\"horizontalAlign\" />;\n      case \"pin\":\n        return <PinToggle key=\"pin\" />;\n    }\n    return undefined;\n  });\n\n  return (\n    <div className=\"nz-widget-buttons\">\n      {isDropdown ? <MoreButton>{buttons}</MoreButton> : buttons}\n    </div>\n  );\n}\n\n/** @internal */\nexport function useWidgetFeatures() {\n  const isToolSettings = useIsToolSettingsTab();\n  const isMainPanelWidget = useIsMainPanelWidget();\n\n  const popoutToggle = usePopoutToggle();\n  const maximizeToggle = useMaximizeToggle();\n  const sendBack = useSendBack();\n  const dock = isToolSettings;\n  const horizontalPanelAlignButton = useHorizontalPanelAlignButton();\n  const pinToggle = isMainPanelWidget;\n\n  return [\n    ...(popoutToggle ? ([\"popout\"] as const) : []),\n    ...(maximizeToggle ? ([\"maximize\"] as const) : []),\n    ...(sendBack ? ([\"sendBack\"] as const) : []),\n    ...(dock ? ([\"dock\"] as const) : []),\n    ...(horizontalPanelAlignButton ? ([\"horizontalAlign\"] as const) : []),\n    ...(pinToggle ? ([\"pin\"] as const) : []),\n  ];\n}\n\n/** @internal */\nexport function useIsMainPanelWidget() {\n  const side = React.useContext(PanelSideContext);\n  const widgetId = React.useContext(WidgetIdContext);\n  return useLayout((state) => {\n    const widgets = side ? state.panels[side].widgets : undefined;\n    if (!widgets) return false;\n    assert(!!side);\n    const mainWidget = isHorizontalPanelSide(side)\n      ? widgets[widgets.length - 1]\n      : widgets[0];\n    return mainWidget === widgetId;\n  });\n}\n"]}

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

@@ -0,0 +1,10 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.nz-widget-buttons {
+  display: flex;
+  align-items: center;
+  align-content: center;
+  height: 100%;
+}

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

@@ -0,0 +1,19 @@
+/** @packageDocumentation
+ * @module Widget
+ */
+import * as React from "react";
+import "./Content.scss";
+/** Properties of [[ScrollableWidgetContent]] component.
+ * @internal
+ */
+export interface ScrollableWidgetContentProps {
+    /** Optional unique identifier for item. If defined it will be added to DOM Element attribute as data-item-id */
+    itemId?: string;
+    providerId?: string;
+    children?: React.ReactNode;
+}
+/** Component that enables widget content scrolling.
+ * @internal
+ */
+export declare function ScrollableWidgetContent(props: ScrollableWidgetContentProps): React.JSX.Element;
+//# sourceMappingURL=Content.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Content.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget/Content.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAIH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,gBAAgB,CAAC;AAExB;;GAEG;AACH,MAAM,WAAW,4BAA4B;IAC3C,gHAAgH;IAChH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,qBA4B1E"}

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

@@ -0,0 +1,36 @@
+"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.ScrollableWidgetContent = void 0;
+const core_bentley_1 = require("@itwin/core-bentley");
+const core_react_1 = require("@itwin/core-react");
+const React = require("react");
+const useTransientState_1 = require("../../widget-panels/useTransientState");
+require("./Content.scss");
+/** Component that enables widget content scrolling.
+ * @internal
+ */
+function ScrollableWidgetContent(props) {
+    const scrollPosition = React.useRef(new core_react_1.Point());
+    const ref = React.useRef(null);
+    const onSave = React.useCallback(() => {
+        // istanbul ignore else
+        if (!!ref.current)
+            scrollPosition.current = new core_react_1.Point(ref.current.scrollLeft, ref.current.scrollTop);
+    }, []);
+    const onRestore = React.useCallback(() => {
+        (0, core_bentley_1.assert)(!!ref.current);
+        ref.current.scrollLeft = scrollPosition.current.x;
+        ref.current.scrollTop = scrollPosition.current.y;
+    }, []);
+    (0, useTransientState_1.useTransientState)(onSave, onRestore);
+    return (React.createElement("div", { "data-item-id": props.itemId, "data-item-provider-id": props.providerId, "data-item-type": "widget-content", className: "nz-widget-content", ref: ref }, props.children));
+}
+exports.ScrollableWidgetContent = ScrollableWidgetContent;
+//# sourceMappingURL=Content.js.map