@itwin/appui-react 4.17.0 → 5.0.0-dev.2

package/lib/appui-react/layout/target/useAllowedSideTarget.d.ts

@@ -0,0 +1,9 @@
+import type { NineZoneState } from "../state/NineZoneState.js";
+import type { PanelSide } from "../widget-panels/PanelTypes.js";
+/** Check the docking side against allowed regions
+ * @internal
+ */
+export declare function useAllowedSideTarget(side: PanelSide): boolean;
+/** @internal */
+export declare function isAllowedSideTarget(state: NineZoneState, draggedWidget: string | undefined, side: PanelSide): boolean;
+//# sourceMappingURL=useAllowedSideTarget.d.ts.map

package/lib/appui-react/layout/target/useAllowedSideTarget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAllowedSideTarget.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/layout/target/useAllowedSideTarget.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAEhE;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,SAAS,WAKnD;AAED,gBAAgB;AAChB,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,aAAa,EACpB,aAAa,EAAE,MAAM,GAAG,SAAS,EACjC,IAAI,EAAE,SAAS,WAgChB"}

package/lib/appui-react/layout/target/useAllowedSideTarget.js

@@ -0,0 +1,50 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 { DraggedWidgetIdContext } from "../base/DragManager.js";
+import { useLayout } from "../base/LayoutStore.js";
+/** Check the docking side against allowed regions
+ * @internal
+ */
+export function useAllowedSideTarget(side) {
+    const draggedWidgetId = React.useContext(DraggedWidgetIdContext);
+    return useLayout((state) => isAllowedSideTarget(state, draggedWidgetId, side));
+}
+/** @internal */
+export function isAllowedSideTarget(state, draggedWidget, side) {
+    const draggedTab = state.draggedTab;
+    const tabsState = state.tabs;
+    const widgetsState = state.widgets;
+    let allowedPanelTargets;
+    if (draggedTab) {
+        const tab = tabsState[draggedTab.tabId];
+        allowedPanelTargets = tab.allowedPanelTargets;
+    }
+    else if (draggedWidget && draggedWidget in widgetsState) {
+        // handle a case where DraggedWidgetIdContext exists, but dragged widget is not in WidgetsStateContet
+        const widget = widgetsState[draggedWidget];
+        const activeTabId = widget.activeTabId;
+        const activeTab = tabsState[activeTabId];
+        allowedPanelTargets = activeTab.allowedPanelTargets;
+        widget.tabs.forEach((tabId) => {
+            const tab = tabsState[tabId];
+            if (!allowedPanelTargets) {
+                allowedPanelTargets = tab.allowedPanelTargets;
+            }
+            else if (tab.allowedPanelTargets !== undefined) {
+                const tabPanelTargets = tab.allowedPanelTargets;
+                allowedPanelTargets = allowedPanelTargets.filter((x) => tabPanelTargets.includes(x));
+            }
+        });
+    }
+    if (allowedPanelTargets) {
+        return allowedPanelTargets.includes(side);
+    }
+    return true;
+}
+//# sourceMappingURL=useAllowedSideTarget.js.map

package/lib/appui-react/layout/target/useAllowedSideTarget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAllowedSideTarget.js","sourceRoot":"","sources":["../../../../src/appui-react/layout/target/useAllowedSideTarget.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAInD;;GAEG;AACH,MAAM,UAAU,oBAAoB,CAAC,IAAe;IAClD,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAC,sBAAsB,CAAC,CAAC;IACjE,OAAO,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE,CACzB,mBAAmB,CAAC,KAAK,EAAE,eAAe,EAAE,IAAI,CAAC,CAClD,CAAC;AACJ,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,mBAAmB,CACjC,KAAoB,EACpB,aAAiC,EACjC,IAAe;IAEf,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC;IACpC,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC;IAC7B,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC;IAEnC,IAAI,mBAAyD,CAAC;IAC9D,IAAI,UAAU,EAAE,CAAC;QACf,MAAM,GAAG,GAAG,SAAS,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QACxC,mBAAmB,GAAG,GAAG,CAAC,mBAAmB,CAAC;IAChD,CAAC;SAAM,IAAI,aAAa,IAAI,aAAa,IAAI,YAAY,EAAE,CAAC;QAC1D,qGAAqG;QACrG,MAAM,MAAM,GAAG,YAAY,CAAC,aAAa,CAAC,CAAC;QAC3C,MAAM,WAAW,GAAG,MAAM,CAAC,WAAW,CAAC;QACvC,MAAM,SAAS,GAAG,SAAS,CAAC,WAAW,CAAC,CAAC;QACzC,mBAAmB,GAAG,SAAS,CAAC,mBAAmB,CAAC;QACpD,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;YAC5B,MAAM,GAAG,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;YAC7B,IAAI,CAAC,mBAAmB,EAAE,CAAC;gBACzB,mBAAmB,GAAG,GAAG,CAAC,mBAAmB,CAAC;YAChD,CAAC;iBAAM,IAAI,GAAG,CAAC,mBAAmB,KAAK,SAAS,EAAE,CAAC;gBACjD,MAAM,eAAe,GAAG,GAAG,CAAC,mBAAmB,CAAC;gBAChD,mBAAmB,GAAG,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CACrD,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,CAC5B,CAAC;YACJ,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IACD,IAAI,mBAAmB,EAAE,CAAC;QACxB,OAAO,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC5C,CAAC;IACD,OAAO,IAAI,CAAC;AACd,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 */\nimport * as React from \"react\";\nimport { DraggedWidgetIdContext } from \"../base/DragManager.js\";\nimport { useLayout } from \"../base/LayoutStore.js\";\nimport type { NineZoneState } from \"../state/NineZoneState.js\";\nimport type { PanelSide } from \"../widget-panels/PanelTypes.js\";\n\n/** Check the docking side against allowed regions\n * @internal\n */\nexport function useAllowedSideTarget(side: PanelSide) {\n  const draggedWidgetId = React.useContext(DraggedWidgetIdContext);\n  return useLayout((state) =>\n    isAllowedSideTarget(state, draggedWidgetId, side)\n  );\n}\n\n/** @internal */\nexport function isAllowedSideTarget(\n  state: NineZoneState,\n  draggedWidget: string | undefined,\n  side: PanelSide\n) {\n  const draggedTab = state.draggedTab;\n  const tabsState = state.tabs;\n  const widgetsState = state.widgets;\n\n  let allowedPanelTargets: ReadonlyArray<PanelSide> | undefined;\n  if (draggedTab) {\n    const tab = tabsState[draggedTab.tabId];\n    allowedPanelTargets = tab.allowedPanelTargets;\n  } else if (draggedWidget && draggedWidget in widgetsState) {\n    // handle a case where DraggedWidgetIdContext exists, but dragged widget is not in WidgetsStateContet\n    const widget = widgetsState[draggedWidget];\n    const activeTabId = widget.activeTabId;\n    const activeTab = tabsState[activeTabId];\n    allowedPanelTargets = activeTab.allowedPanelTargets;\n    widget.tabs.forEach((tabId) => {\n      const tab = tabsState[tabId];\n      if (!allowedPanelTargets) {\n        allowedPanelTargets = tab.allowedPanelTargets;\n      } else if (tab.allowedPanelTargets !== undefined) {\n        const tabPanelTargets = tab.allowedPanelTargets;\n        allowedPanelTargets = allowedPanelTargets.filter((x) =>\n          tabPanelTargets.includes(x)\n        );\n      }\n    });\n  }\n  if (allowedPanelTargets) {\n    return allowedPanelTargets.includes(side);\n  }\n  return true;\n}\n"]}

package/lib/appui-react/layout/target/useAllowedWidgetTarget.d.ts

@@ -0,0 +1,6 @@
+import type { WidgetState } from "../state/WidgetState.js";
+/** Checks the proposed docking target to see if it's allowed by the dragged widget or tab
+ * @internal
+ */
+export declare function useAllowedWidgetTarget(widgetId: WidgetState["id"]): boolean;
+//# sourceMappingURL=useAllowedWidgetTarget.d.ts.map

package/lib/appui-react/layout/target/useAllowedWidgetTarget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAllowedWidgetTarget.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/layout/target/useAllowedWidgetTarget.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAI3D;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,WAajE"}

package/lib/appui-react/layout/target/useAllowedWidgetTarget.js

@@ -0,0 +1,29 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 { getWidgetLocation, isFloatingWidgetLocation, isPopoutWidgetLocation, } from "../state/WidgetLocation.js";
+import { isAllowedSideTarget } from "./useAllowedSideTarget.js";
+import { useLayout } from "../base/LayoutStore.js";
+import { DraggedWidgetIdContext } from "../base/DragManager.js";
+/** Checks the proposed docking target to see if it's allowed by the dragged widget or tab
+ * @internal
+ */
+export function useAllowedWidgetTarget(widgetId) {
+    const draggedWidget = React.useContext(DraggedWidgetIdContext);
+    return useLayout((state) => {
+        const widgetLocation = getWidgetLocation(state, widgetId);
+        if (!widgetLocation || isPopoutWidgetLocation(widgetLocation)) {
+            return false;
+        }
+        else if (isFloatingWidgetLocation(widgetLocation)) {
+            return true;
+        }
+        return isAllowedSideTarget(state, draggedWidget, widgetLocation.side);
+    });
+}
+//# sourceMappingURL=useAllowedWidgetTarget.js.map

package/lib/appui-react/layout/target/useAllowedWidgetTarget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAllowedWidgetTarget.js","sourceRoot":"","sources":["../../../../src/appui-react/layout/target/useAllowedWidgetTarget.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,iBAAiB,EACjB,wBAAwB,EACxB,sBAAsB,GACvB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAEhE;;GAEG;AACH,MAAM,UAAU,sBAAsB,CAAC,QAA2B;IAChE,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAAC,sBAAsB,CAAC,CAAC;IAC/D,OAAO,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;QACzB,MAAM,cAAc,GAAG,iBAAiB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;QAE1D,IAAI,CAAC,cAAc,IAAI,sBAAsB,CAAC,cAAc,CAAC,EAAE,CAAC;YAC9D,OAAO,KAAK,CAAC;QACf,CAAC;aAAM,IAAI,wBAAwB,CAAC,cAAc,CAAC,EAAE,CAAC;YACpD,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,mBAAmB,CAAC,KAAK,EAAE,aAAa,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC;IACxE,CAAC,CAAC,CAAC;AACL,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 */\nimport * as React from \"react\";\nimport {\n  getWidgetLocation,\n  isFloatingWidgetLocation,\n  isPopoutWidgetLocation,\n} from \"../state/WidgetLocation.js\";\nimport { isAllowedSideTarget } from \"./useAllowedSideTarget.js\";\nimport type { WidgetState } from \"../state/WidgetState.js\";\nimport { useLayout } from \"../base/LayoutStore.js\";\nimport { DraggedWidgetIdContext } from \"../base/DragManager.js\";\n\n/** Checks the proposed docking target to see if it's allowed by the dragged widget or tab\n * @internal\n */\nexport function useAllowedWidgetTarget(widgetId: WidgetState[\"id\"]) {\n  const draggedWidget = React.useContext(DraggedWidgetIdContext);\n  return useLayout((state) => {\n    const widgetLocation = getWidgetLocation(state, widgetId);\n\n    if (!widgetLocation || isPopoutWidgetLocation(widgetLocation)) {\n      return false;\n    } else if (isFloatingWidgetLocation(widgetLocation)) {\n      return true;\n    }\n\n    return isAllowedSideTarget(state, draggedWidget, widgetLocation.side);\n  });\n}\n"]}

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

@@ -0,0 +1 @@
+{"version":3,"file":"Docked.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/layout/tool-settings/Docked.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,gBAAgB;AAChB,wBAAgB,8BAA8B,SAAK;AA0BnD;;GAEG;AAEH,MAAM,WAAW,uBAAwB,SAAQ,WAAW;IAC1D,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,uCAAuC;IACvC,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC;CACtE;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,qBAyIhE;AA+BD;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,KAAK,EAAE,MAAM,UAKhE;AAED;;GAEG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,aAAa,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EAChD,aAAa,EAAE,MAAM,EACrB,WAAW,CAAC,EAAE,MAAM,EACpB,OAAO,SAAI,YAwDZ;AAED;;GAEG;AACH,wBAAgB,WAAW,CACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,EACzB,gBAAgB,CAAC,EAAE,MAAM,GACxB;IACD,kCAAkC;IAClC,aAAa,CAAC,MAAM,CAAC,GAAG,SAAS;IACjC,yCAAyC;IACzC,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI;IAC/B,+CAA+C;IAC/C,CAAC,kBAAkB,EAAE,MAAM,KAAK,IAAI;IACpC,kEAAkE;IAClE,CAAC,GAAG,EAAE,MAAM,KAAK,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI;IAC5C,mCAAmC;IACnC,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI;CAC1B,CA0FA;AAED,UAAU,kCAAkC;IAC1C,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAOD,gBAAgB;AAChB,wBAAgB,oBAAoB,uCAEnC;AAeD,gBAAgB;AAChB,wBAAgB,YAAY,CAC1B,IAAI,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,EACnC,KAAK,EAAE,SAAS,MAAM,EAAE,WAUzB"}

package/lib/appui-react/layout/tool-settings/Docked.js

@@ -0,0 +1,287 @@
+/*---------------------------------------------------------------------------------------------
+ * 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
+ */
+import "./Docked.scss";
+import { assert } from "@itwin/core-bentley";
+import { getCssVariableAsNumber } from "@itwin/core-react";
+import { useRefs, useResizeObserver } from "@itwin/core-react/internal";
+import classnames from "classnames";
+import * as React from "react";
+import { CSSTransition, TransitionGroup } from "react-transition-group";
+import { AnimateDockedToolSettingsContext } from "../base/NineZone.js";
+import { DockedToolSettingsHandle } from "./Handle.js";
+import { DockedToolSettingsOverflow } from "./Overflow.js";
+import { ToolSettingsOverflowPanel } from "./Panel.js";
+/** @internal */
+export function onOverflowLabelAndEditorResize() { }
+/** This component takes a DockedToolSetting "wrapper" component and extract only the label and editor components from it */
+function OverflowLabelAndEditor({ wrapper }) {
+    assert(React.isValidElement(wrapper));
+    const entryValue = React.useMemo(() => ({
+        isOverflown: true,
+        onResize: onOverflowLabelAndEditorResize,
+    }), []);
+    const wrapperChildren = wrapper.props.children;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DockedToolSettingsEntryContext.Provider, { value: entryValue }, wrapperChildren &&
+            React.Children.map(wrapperChildren, (child) => child))));
+}
+/** Component that displays tool settings as a bar across the top of the content view.
+ * @internal
+ */
+export function DockedToolSettings(props) {
+    const [open, setOpen] = React.useState(false);
+    const animateToolSettings = React.useContext(AnimateDockedToolSettingsContext);
+    const ref = React.useRef(null);
+    const width = React.useRef(undefined);
+    const handleWidth = React.useRef(undefined);
+    const [overflown, handleContainerResize, handleOverflowResize, getOnEntryResize, handleGapResize,] = useOverflow(props.children);
+    const onResize = React.useCallback(() => {
+        let gapSize = 0;
+        if (ref.current) {
+            gapSize = getGapVariable(ref.current);
+            handleGapResize(gapSize);
+        }
+        width.current !== undefined &&
+            handleWidth.current !== undefined &&
+            handleContainerResize(width.current - handleWidth.current - gapSize);
+    }, [handleContainerResize, handleGapResize]);
+    const handleHandleResize = React.useCallback((w) => {
+        handleWidth.current = w;
+        onResize();
+    }, [onResize]);
+    const handleResize = React.useCallback((w) => {
+        width.current = w;
+        onResize();
+    }, [onResize]);
+    const resizeObserverRef = useResizeObserver(handleResize);
+    const onOverflowClick = React.useCallback(() => {
+        setOpen((prev) => !prev);
+    }, []);
+    const handleOnClose = React.useCallback(() => {
+        setOpen(false);
+    }, []);
+    const targetRef = React.useRef(null);
+    const refs = useRefs(ref, resizeObserverRef);
+    const children = React.useMemo(() => React.Children.toArray(props.children), [props.children]);
+    const dockedChildren = children.reduce((acc, child, index) => {
+        const key = getChildKey(child, index);
+        if (!overflown || overflown.indexOf(key) < 0) {
+            acc.push([key, child]);
+        }
+        return acc;
+    }, []);
+    const overflownChildren = overflown
+        ? children.reduce((acc, child, index) => {
+            const key = getChildKey(child, index);
+            if (overflown.indexOf(key) >= 0) {
+                acc.push([key, child]);
+            }
+            return acc;
+        }, [])
+        : [];
+    const PanelContainer = props.panelContainer
+        ? props.panelContainer
+        : DefaultPanelContainer;
+    const className = classnames("uifw-toolSettings-docked", props.className);
+    return (React.createElement("div", { "data-toolsettings-provider": props.itemId, className: className, ref: refs, style: props.style },
+        React.createElement(DockedToolSettingsHandle, { onResize: handleHandleResize }),
+        dockedChildren.map(([key, child]) => {
+            return (React.createElement(TransitionGroup, { appear: animateToolSettings, enter: animateToolSettings, key: key },
+                React.createElement(CSSTransition, { in: animateToolSettings, timeout: 400, classNames: {
+                        appear: "toolsettings-appear",
+                        enter: "toolsettings-appear",
+                        appearActive: "toolsettings-appear-active",
+                        enterActive: "toolsettings-appear-active",
+                    } },
+                    React.createElement(DockedToolSettingsEntry, { key: key, entryKey: key, getOnResize: getOnEntryResize }, child))));
+        }),
+        (!overflown || overflown.length > 0) && (React.createElement(React.Fragment, null,
+            React.createElement(DockedToolSettingsOverflow, { onClick: onOverflowClick, onResize: handleOverflowResize, ref: targetRef }),
+            overflownChildren.length > 0 && open && targetRef.current && (React.createElement(ToolSettingsOverflowPanel, { onClose: handleOnClose, open: true, target: targetRef.current },
+                React.createElement(PanelContainer, null, overflownChildren.map(([key, child]) => {
+                    return React.createElement(OverflowLabelAndEditor, { key: key, wrapper: child });
+                }))))))));
+}
+function DockedToolSettingsEntry({ children, entryKey, getOnResize, }) {
+    const onResize = React.useMemo(() => getOnResize(entryKey), [getOnResize, entryKey]);
+    const entry = React.useMemo(() => ({
+        isOverflown: false,
+        onResize,
+    }), [onResize]);
+    return (React.createElement(DockedToolSettingsEntryContext.Provider, { value: entry }, children));
+}
+/** Returns key of a child. Must be used along with React.Children.toArray to preserve the semantics of children.
+ * @internal
+ */
+export function getChildKey(child, index) {
+    if (React.isValidElement(child) && child.key !== null) {
+        return child.key.toString();
+    }
+    return index.toString();
+}
+/** Returns a subset of docked entry keys that exceed given width and should be overflown.
+ * @internal
+ */
+export function getOverflown(width, docked, overflowWidth, activeIndex, gapSize = 0) {
+    let settingsWidth = 0;
+    // Avoid adding gap to first item.
+    let firstItem = true;
+    const getGapSize = () => {
+        if (firstItem) {
+            firstItem = false;
+            return 0;
+        }
+        return gapSize;
+    };
+    // Make sure active item is always visible.
+    if (activeIndex !== undefined && docked.length > activeIndex) {
+        const activeWidth = docked[activeIndex];
+        settingsWidth += activeWidth[1] + getGapSize();
+    }
+    let i = 0;
+    for (; i < docked.length; i++) {
+        // Skip active item.
+        if (i === activeIndex)
+            continue;
+        const itemWidth = docked[i][1];
+        const newSettingsWidth = settingsWidth + itemWidth + getGapSize();
+        // Items overflow, add an overflow button.
+        if (newSettingsWidth > width) {
+            settingsWidth += overflowWidth + getGapSize();
+            break;
+        }
+        // Items fit, add an item.
+        settingsWidth = newSettingsWidth;
+    }
+    // Remove items until they fit.
+    let j = i;
+    if (j < docked.length) {
+        for (; j > 0; j--) {
+            if (j === activeIndex)
+                continue;
+            if (settingsWidth <= width)
+                break;
+            const itemWidth = docked[j][1];
+            settingsWidth -= itemWidth + gapSize;
+        }
+    }
+    const overflown = new Array();
+    for (i = j; i < docked.length; i++) {
+        if (i === activeIndex)
+            continue;
+        overflown.push(docked[i][0]);
+    }
+    return overflown;
+}
+/** Hook that returns a list of overflown children keys.
+ * @internal
+ */
+export function useOverflow(children, activeChildIndex) {
+    const [overflown, setOverflown] = React.useState();
+    const entryWidths = React.useRef(new Map());
+    const width = React.useRef(undefined);
+    const overflowWidth = React.useRef(undefined);
+    const gapSize = React.useRef(0);
+    const calculateOverflow = React.useCallback(() => {
+        const widths = verifiedMapEntries(entryWidths.current);
+        if (width.current === undefined ||
+            widths === undefined ||
+            overflowWidth.current === undefined) {
+            setOverflown(undefined);
+            return;
+        }
+        // Calculate overflow.
+        const newOverflown = getOverflown(width.current, [...widths.entries()], overflowWidth.current, activeChildIndex, gapSize.current);
+        setOverflown((prevOverflown) => {
+            return eqlOverflown(prevOverflown, newOverflown)
+                ? prevOverflown
+                : newOverflown;
+        });
+    }, [activeChildIndex]);
+    React.useLayoutEffect(() => {
+        const newEntryWidths = new Map();
+        const array = React.Children.toArray(children);
+        for (let i = 0; i < array.length; i++) {
+            const child = array[i];
+            const key = getChildKey(child, i);
+            const lastW = entryWidths.current.get(key);
+            newEntryWidths.set(key, lastW);
+        }
+        entryWidths.current = newEntryWidths;
+        calculateOverflow();
+    }, [children, calculateOverflow]);
+    const handleContainerResize = React.useCallback((w) => {
+        const calculate = width.current !== w;
+        width.current = w;
+        calculate && calculateOverflow();
+    }, [calculateOverflow]);
+    const handleOverflowResize = React.useCallback((w) => {
+        const calculate = overflowWidth.current !== w;
+        overflowWidth.current = w;
+        calculate && calculateOverflow();
+    }, [calculateOverflow]);
+    const handleEntryResize = React.useCallback((key) => (w) => {
+        const oldW = entryWidths.current.get(key);
+        if (oldW === w)
+            return;
+        entryWidths.current.set(key, w);
+        calculateOverflow();
+    }, [calculateOverflow]);
+    const handleGapResize = React.useCallback((w) => {
+        if (gapSize.current === w)
+            return;
+        gapSize.current = w;
+        calculateOverflow();
+    }, [calculateOverflow]);
+    return [
+        overflown,
+        handleContainerResize,
+        handleOverflowResize,
+        handleEntryResize,
+        handleGapResize,
+    ];
+}
+const DockedToolSettingsEntryContext = React.createContext(null);
+DockedToolSettingsEntryContext.displayName =
+    "nz:DockedToolSettingsEntryContext";
+/** @internal */
+export function useToolSettingsEntry() {
+    return React.useContext(DockedToolSettingsEntryContext);
+}
+function verifiedMapEntries(map) {
+    for (const [, val] of map) {
+        if (val === undefined)
+            return undefined;
+    }
+    return map;
+}
+function DefaultPanelContainer(props) {
+    return (React.createElement("div", { className: "uifw-toolSettings-docked_container" }, props.children));
+}
+/** @internal */
+export function eqlOverflown(prev, value) {
+    if (!prev)
+        return false;
+    if (prev.length !== value.length)
+        return false;
+    for (let i = 0; i < prev.length; i++) {
+        const p = prev[i];
+        const v = value[i];
+        if (p !== v)
+            return false;
+    }
+    return true;
+}
+function getGapVariable(htmlElement) {
+    // eslint-disable-next-line deprecation/deprecation
+    const gap = getCssVariableAsNumber("gap", htmlElement);
+    if (isNaN(gap))
+        return 0;
+    return gap;
+}
+//# sourceMappingURL=Docked.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Docked.js","sourceRoot":"","sources":["../../../../src/appui-react/layout/tool-settings/Docked.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 ToolSettings\n */\n\nimport \"./Docked.scss\";\nimport { assert } from \"@itwin/core-bentley\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { getCssVariableAsNumber } from \"@itwin/core-react\";\nimport { useRefs, useResizeObserver } from \"@itwin/core-react/internal\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { CSSTransition, TransitionGroup } from \"react-transition-group\";\nimport { AnimateDockedToolSettingsContext } from \"../base/NineZone.js\";\nimport { DockedToolSettingsHandle } from \"./Handle.js\";\nimport { DockedToolSettingsOverflow } from \"./Overflow.js\";\nimport { ToolSettingsOverflowPanel } from \"./Panel.js\";\n\n/** @internal */\nexport function onOverflowLabelAndEditorResize() {}\n\n/** This component takes a DockedToolSetting \"wrapper\" component and extract only the label and editor components from it */\nfunction OverflowLabelAndEditor({ wrapper }: { wrapper: React.ReactNode }) {\n  assert(React.isValidElement(wrapper));\n  const entryValue = React.useMemo<DockedToolSettingsEntryContextArgs>(\n    () => ({\n      isOverflown: true,\n      onResize: onOverflowLabelAndEditorResize,\n    }),\n    []\n  );\n  const wrapperChildren = (wrapper as React.ReactElement<any>).props.children;\n  return (\n    <>\n      <DockedToolSettingsEntryContext.Provider value={entryValue}>\n        {wrapperChildren &&\n          React.Children.map(\n            wrapperChildren,\n            (child: React.ReactNode) => child\n          )}\n      </DockedToolSettingsEntryContext.Provider>\n    </>\n  );\n}\n\n/** Properties of [[DockedToolSettings]] component.\n * @internal\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface DockedToolSettingsProps extends CommonProps {\n  /** Tool settings content. */\n  children?: React.ReactNode;\n  /** Container for overflown entries. */\n  panelContainer?: React.ComponentType<{ children?: React.ReactNode }>;\n}\n\n/** Component that displays tool settings as a bar across the top of the content view.\n * @internal\n */\nexport function DockedToolSettings(props: DockedToolSettingsProps) {\n  const [open, setOpen] = React.useState(false);\n  const animateToolSettings = React.useContext(\n    AnimateDockedToolSettingsContext\n  );\n\n  const ref = React.useRef<HTMLDivElement>(null);\n  const width = React.useRef<number | undefined>(undefined);\n  const handleWidth = React.useRef<number | undefined>(undefined);\n  const [\n    overflown,\n    handleContainerResize,\n    handleOverflowResize,\n    getOnEntryResize,\n    handleGapResize,\n  ] = useOverflow(props.children);\n  const onResize = React.useCallback(() => {\n    let gapSize = 0;\n    if (ref.current) {\n      gapSize = getGapVariable(ref.current);\n      handleGapResize(gapSize);\n    }\n    width.current !== undefined &&\n      handleWidth.current !== undefined &&\n      handleContainerResize(width.current - handleWidth.current - gapSize);\n  }, [handleContainerResize, handleGapResize]);\n  const handleHandleResize = React.useCallback(\n    (w: number) => {\n      handleWidth.current = w;\n      onResize();\n    },\n    [onResize]\n  );\n  const handleResize = React.useCallback(\n    (w: number) => {\n      width.current = w;\n      onResize();\n    },\n    [onResize]\n  );\n  const resizeObserverRef = useResizeObserver(handleResize);\n\n  const onOverflowClick = React.useCallback(() => {\n    setOpen((prev) => !prev);\n  }, []);\n  const handleOnClose = React.useCallback(() => {\n    setOpen(false);\n  }, []);\n  const targetRef = React.useRef<HTMLDivElement>(null);\n  const refs = useRefs(ref, resizeObserverRef);\n  const children = React.useMemo(\n    () => React.Children.toArray(props.children),\n    [props.children]\n  );\n  const dockedChildren = children.reduce<Array<[string, React.ReactNode]>>(\n    (acc, child, index) => {\n      const key = getChildKey(child, index);\n      if (!overflown || overflown.indexOf(key) < 0) {\n        acc.push([key, child]);\n      }\n      return acc;\n    },\n    []\n  );\n  const overflownChildren = overflown\n    ? children.reduce<Array<[string, React.ReactNode]>>((acc, child, index) => {\n        const key = getChildKey(child, index);\n        if (overflown.indexOf(key) >= 0) {\n          acc.push([key, child]);\n        }\n        return acc;\n      }, [])\n    : [];\n  const PanelContainer = props.panelContainer\n    ? props.panelContainer\n    : DefaultPanelContainer;\n  const className = classnames(\"uifw-toolSettings-docked\", props.className);\n  return (\n    <div\n      data-toolsettings-provider={props.itemId}\n      className={className}\n      ref={refs}\n      style={props.style}\n    >\n      <DockedToolSettingsHandle onResize={handleHandleResize} />\n      {dockedChildren.map(([key, child]) => {\n        return (\n          <TransitionGroup\n            appear={animateToolSettings}\n            enter={animateToolSettings}\n            key={key}\n          >\n            <CSSTransition\n              in={animateToolSettings}\n              timeout={400}\n              classNames={{\n                appear: \"toolsettings-appear\",\n                enter: \"toolsettings-appear\",\n                appearActive: \"toolsettings-appear-active\",\n                enterActive: \"toolsettings-appear-active\",\n              }}\n            >\n              <DockedToolSettingsEntry\n                key={key}\n                entryKey={key}\n                getOnResize={getOnEntryResize}\n              >\n                {child}\n              </DockedToolSettingsEntry>\n            </CSSTransition>\n          </TransitionGroup>\n        );\n      })}\n      {(!overflown || overflown.length > 0) && (\n        <>\n          <DockedToolSettingsOverflow\n            onClick={onOverflowClick}\n            onResize={handleOverflowResize}\n            ref={targetRef}\n          />\n          {overflownChildren.length > 0 && open && targetRef.current && (\n            <ToolSettingsOverflowPanel\n              onClose={handleOnClose}\n              open\n              target={targetRef.current}\n            >\n              <PanelContainer>\n                {overflownChildren.map(([key, child]) => {\n                  return <OverflowLabelAndEditor key={key} wrapper={child} />;\n                })}\n              </PanelContainer>\n            </ToolSettingsOverflowPanel>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n\ninterface DockedToolSettingsEntryProps {\n  children?: React.ReactNode;\n  entryKey: string;\n  getOnResize: (key: string) => (w: number) => void;\n}\n\nfunction DockedToolSettingsEntry({\n  children,\n  entryKey,\n  getOnResize,\n}: DockedToolSettingsEntryProps) {\n  const onResize = React.useMemo(\n    () => getOnResize(entryKey),\n    [getOnResize, entryKey]\n  );\n  const entry = React.useMemo<DockedToolSettingsEntryContextArgs>(\n    () => ({\n      isOverflown: false,\n      onResize,\n    }),\n    [onResize]\n  );\n  return (\n    <DockedToolSettingsEntryContext.Provider value={entry}>\n      {children}\n    </DockedToolSettingsEntryContext.Provider>\n  );\n}\n\n/** Returns key of a child. Must be used along with React.Children.toArray to preserve the semantics of children.\n * @internal\n */\nexport function getChildKey(child: React.ReactNode, index: number) {\n  if (React.isValidElement(child) && child.key !== null) {\n    return child.key.toString();\n  }\n  return index.toString();\n}\n\n/** Returns a subset of docked entry keys that exceed given width and should be overflown.\n * @internal\n */\nexport function getOverflown(\n  width: number,\n  docked: ReadonlyArray<readonly [string, number]>,\n  overflowWidth: number,\n  activeIndex?: number,\n  gapSize = 0\n) {\n  let settingsWidth = 0;\n\n  // Avoid adding gap to first item.\n  let firstItem = true;\n  const getGapSize = () => {\n    if (firstItem) {\n      firstItem = false;\n      return 0;\n    }\n    return gapSize;\n  };\n\n  // Make sure active item is always visible.\n  if (activeIndex !== undefined && docked.length > activeIndex) {\n    const activeWidth = docked[activeIndex];\n    settingsWidth += activeWidth[1] + getGapSize();\n  }\n\n  let i = 0;\n\n  for (; i < docked.length; i++) {\n    // Skip active item.\n    if (i === activeIndex) continue;\n\n    const itemWidth = docked[i][1];\n    const newSettingsWidth = settingsWidth + itemWidth + getGapSize();\n\n    // Items overflow, add an overflow button.\n    if (newSettingsWidth > width) {\n      settingsWidth += overflowWidth + getGapSize();\n      break;\n    }\n\n    // Items fit, add an item.\n    settingsWidth = newSettingsWidth;\n  }\n\n  // Remove items until they fit.\n  let j = i;\n  if (j < docked.length) {\n    for (; j > 0; j--) {\n      if (j === activeIndex) continue;\n      if (settingsWidth <= width) break;\n      const itemWidth = docked[j][1];\n      settingsWidth -= itemWidth + gapSize;\n    }\n  }\n\n  const overflown = new Array<string>();\n  for (i = j; i < docked.length; i++) {\n    if (i === activeIndex) continue;\n    overflown.push(docked[i][0]);\n  }\n  return overflown;\n}\n\n/** Hook that returns a list of overflown children keys.\n * @internal\n */\nexport function useOverflow(\n  children: React.ReactNode,\n  activeChildIndex?: number\n): [\n  /** Keys of overflown children. */\n  ReadonlyArray<string> | undefined,\n  /** Function to update container size. */\n  (containerSize: number) => void,\n  /** Function to update overflow button size. */\n  (overflowButtonSize: number) => void,\n  /** Returns a function to update an entry size for a given key. */\n  (key: string) => (entrySize: number) => void,\n  /** Function to update gap size. */\n  (gapSize: number) => void\n] {\n  const [overflown, setOverflown] = React.useState<ReadonlyArray<string>>();\n  const entryWidths = React.useRef(new Map<string, number | undefined>());\n  const width = React.useRef<number | undefined>(undefined);\n  const overflowWidth = React.useRef<number | undefined>(undefined);\n  const gapSize = React.useRef(0);\n\n  const calculateOverflow = React.useCallback(() => {\n    const widths = verifiedMapEntries(entryWidths.current);\n    if (\n      width.current === undefined ||\n      widths === undefined ||\n      overflowWidth.current === undefined\n    ) {\n      setOverflown(undefined);\n      return;\n    }\n\n    // Calculate overflow.\n    const newOverflown = getOverflown(\n      width.current,\n      [...widths.entries()],\n      overflowWidth.current,\n      activeChildIndex,\n      gapSize.current\n    );\n    setOverflown((prevOverflown) => {\n      return eqlOverflown(prevOverflown, newOverflown)\n        ? prevOverflown\n        : newOverflown;\n    });\n  }, [activeChildIndex]);\n\n  React.useLayoutEffect(() => {\n    const newEntryWidths = new Map<string, number | undefined>();\n    const array = React.Children.toArray(children);\n    for (let i = 0; i < array.length; i++) {\n      const child = array[i];\n      const key = getChildKey(child, i);\n      const lastW = entryWidths.current.get(key);\n      newEntryWidths.set(key, lastW);\n    }\n    entryWidths.current = newEntryWidths;\n    calculateOverflow();\n  }, [children, calculateOverflow]);\n\n  const handleContainerResize = React.useCallback(\n    (w: number) => {\n      const calculate = width.current !== w;\n      width.current = w;\n      calculate && calculateOverflow();\n    },\n    [calculateOverflow]\n  );\n\n  const handleOverflowResize = React.useCallback(\n    (w: number) => {\n      const calculate = overflowWidth.current !== w;\n      overflowWidth.current = w;\n      calculate && calculateOverflow();\n    },\n    [calculateOverflow]\n  );\n\n  const handleEntryResize = React.useCallback(\n    (key: string) => (w: number) => {\n      const oldW = entryWidths.current.get(key);\n      if (oldW === w) return;\n      entryWidths.current.set(key, w);\n      calculateOverflow();\n    },\n    [calculateOverflow]\n  );\n\n  const handleGapResize = React.useCallback(\n    (w: number) => {\n      if (gapSize.current === w) return;\n      gapSize.current = w;\n      calculateOverflow();\n    },\n    [calculateOverflow]\n  );\n\n  return [\n    overflown,\n    handleContainerResize,\n    handleOverflowResize,\n    handleEntryResize,\n    handleGapResize,\n  ];\n}\n\ninterface DockedToolSettingsEntryContextArgs {\n  readonly isOverflown: boolean;\n  readonly onResize: (w: number) => void;\n}\n\nconst DockedToolSettingsEntryContext =\n  React.createContext<DockedToolSettingsEntryContextArgs>(null!);\nDockedToolSettingsEntryContext.displayName =\n  \"nz:DockedToolSettingsEntryContext\";\n\n/** @internal */\nexport function useToolSettingsEntry() {\n  return React.useContext(DockedToolSettingsEntryContext);\n}\n\nfunction verifiedMapEntries<T>(map: Map<string, T | undefined>) {\n  for (const [, val] of map) {\n    if (val === undefined) return undefined;\n  }\n  return map as Map<string, T>;\n}\n\nfunction DefaultPanelContainer(props: { children: React.ReactNode }) {\n  return (\n    <div className=\"uifw-toolSettings-docked_container\">{props.children}</div>\n  );\n}\n\n/** @internal */\nexport function eqlOverflown(\n  prev: readonly string[] | undefined,\n  value: readonly string[]\n) {\n  if (!prev) return false;\n  if (prev.length !== value.length) return false;\n  for (let i = 0; i < prev.length; i++) {\n    const p = prev[i];\n    const v = value[i];\n    if (p !== v) return false;\n  }\n  return true;\n}\n\nfunction getGapVariable(htmlElement: HTMLElement) {\n  // eslint-disable-next-line deprecation/deprecation\n  const gap = getCssVariableAsNumber(\"gap\", htmlElement);\n  if (isNaN(gap)) return 0;\n  return gap;\n}\n"]}

package/lib/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,EAAE,MAAM,mBAAmB,CAAC;AAarD;;GAEG;AAEH,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,qBA8B5E"}

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

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

package/lib/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,OAAO,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AACxE,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EACL,WAAW,EACX,uBAAuB,EACvB,QAAQ,GACT,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAU5C;;GAEG;AACH,MAAM,UAAU,wBAAwB,CAAC,KAAoC;IAC3E,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,uBAAuB,CAAC,CAAC;IAC3D,MAAM,iBAAiB,GAAG,iBAAiB,CAAiB,KAAK,CAAC,QAAQ,CAAC,CAAC;IAC5E,MAAM,mBAAmB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,WAAW,EAAE,EAAE,EAAE,CAAC,CAAC;IACnE,MAAM,WAAW,GAAG,mBAAmB,CAAC,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,OAAO,CAAC,eAAe,CAAC,CAAC;IACzC,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;IACjD,MAAM,KAAK,GAAG,QAAQ,CAAC,yBAAyB,CAAC,CAAC;IAClD,MAAM,SAAS,GAAG,UAAU,CAAC,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,IAAI,IAAC,IAAI,EAAC,OAAO;YAChB,oBAAC,qBAAqB,OAAG,CACpB,CACH,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 ToolSettings\n */\n\nimport \"./Handle.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport type { Point } from \"@itwin/core-react/internal\";\nimport { useRefs, useResizeObserver } from \"@itwin/core-react/internal\";\nimport { useDragToolSettings } from \"../base/DragManager.js\";\nimport {\n  getUniqueId,\n  NineZoneDispatchContext,\n  useLabel,\n} from \"../base/NineZone.js\";\nimport { useDrag } from \"../widget/TabBar.js\";\nimport { SvgDragHandleVertical } from \"@itwin/itwinui-icons-react\";\nimport { Icon } from \"@itwin/itwinui-react\";\n\n/** Properties of [[DockedToolSettingsHandle]] component.\n * @internal\n */\n// eslint-disable-next-line deprecation/deprecation\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      <Icon size=\"large\">\n        <SvgDragHandleVertical />\n      </Icon>\n    </div>\n  );\n}\n"]}

package/lib/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;AAMrD;;GAEG;AAEH,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,wGAqBrC,CAAC"}

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

@@ -0,0 +1,26 @@
+/*---------------------------------------------------------------------------------------------
+ * 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
+ */
+import "./Overflow.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { useRefs, useResizeObserver } from "@itwin/core-react/internal";
+import { IconButton } from "@itwin/itwinui-react";
+import { SvgMore } from "@itwin/itwinui-icons-react";
+import { useLabel } from "../base/NineZone.js";
+/** Entry point to overflown tool settings of [[DockedToolSettings]] component.
+ * @internal
+ */
+export const DockedToolSettingsOverflow = React.forwardRef(function DockedToolSettingsOverflow(props, ref) {
+    const roRef = useResizeObserver(props.onResize);
+    const refs = useRefs(roRef, ref);
+    const className = classnames("nz-toolSettings-overflow", props.className);
+    const moreToolSettingsTitle = useLabel("moreToolSettingsTitle");
+    return (React.createElement(IconButton, { className: className, onClick: props.onClick, ref: refs, style: props.style, styleType: "borderless", label: moreToolSettingsTitle },
+        React.createElement(SvgMore, null)));
+});
+//# sourceMappingURL=Overflow.js.map

package/lib/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,OAAO,iBAAiB,CAAC;AACzB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAa/C;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,KAAK,CAAC,UAAU,CAGxD,SAAS,0BAA0B,CAAC,KAAK,EAAE,GAAG;IAC9C,MAAM,KAAK,GAAG,iBAAiB,CAAiB,KAAK,CAAC,QAAQ,CAAC,CAAC;IAChE,MAAM,IAAI,GAAG,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IACjC,MAAM,SAAS,GAAG,UAAU,CAAC,0BAA0B,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAC1E,MAAM,qBAAqB,GAAG,QAAQ,CAAC,uBAAuB,CAAC,CAAC;IAEhE,OAAO,CACL,oBAAC,UAAU,IACT,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,GAAG,EAAE,IAAI,EACT,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,SAAS,EAAC,YAAY,EACtB,KAAK,EAAE,qBAAqB;QAE5B,oBAAC,OAAO,OAAG,CACA,CACd,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/internal\";\nimport { IconButton } from \"@itwin/itwinui-react\";\nimport { SvgMore } from \"@itwin/itwinui-icons-react\";\nimport { useLabel } from \"../base/NineZone.js\";\n\n/** Properties of [[ToolSettingsOverflow]] component.\n * @internal\n */\n// eslint-disable-next-line deprecation/deprecation\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    <IconButton\n      className={className}\n      onClick={props.onClick}\n      ref={refs}\n      style={props.style}\n      styleType=\"borderless\"\n      label={moreToolSettingsTitle}\n    >\n      <SvgMore />\n    </IconButton>\n  );\n});\n"]}

package/lib/appui-react/layout/tool-settings/Overflow.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.
+ *--------------------------------------------------------------------------------------------*/
+.nz-toolSettings-overflow {
+  margin-left: auto;
+
+  &.nz-hidden {
+    visibility: hidden;
+  }
+}

package/lib/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;AAEH,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,qBAiBtC"}

package/lib/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,OAAO,cAAc,CAAC;AACtB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAc1C;;GAEG;AACH,MAAM,UAAU,yBAAyB,CACvC,KAAqC;IAErC,MAAM,SAAS,GAAG,UAAU,CAAC,uBAAuB,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IACvE,OAAO;IACL,mDAAmD;IACnD,oBAAC,KAAK,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","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 */\n// eslint-disable-next-line deprecation/deprecation\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    // eslint-disable-next-line deprecation/deprecation\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/appui-react/layout/tool-settings/Panel.scss

@@ -0,0 +1,8 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.nz-toolSettings-panel {
+  background: var(--iui-color-background);
+  padding: 0.5em;
+}

package/lib/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;AAEH,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"}