@itwin/appui-react 4.8.3 → 4.9.0

package/lib/cjs/appui-react/layout/target/_variables.scss

@@ -0,0 +1,64 @@
+/*---------------------------------------------------------------------------------------------
+ * 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";
+@import "~@itwin/core-react/lib/cjs/core-react/z-index";
+@import "../outline/variables";
+
+$nz-widget-target-border-color: $buic-background-5;
+$nz-widget-target-background: $buic-background-4;
+$nz-widget-target-border-size: 2px;
+
+@mixin nz-widget-target {
+  $length: 4em;
+
+  height: $length;
+  width: $length;
+  border: $nz-widget-target-border-size solid $nz-widget-target-border-color;
+  border-radius: var(--iui-border-radius-1);
+  box-sizing: border-box;
+  background-color: $nz-widget-target-background;
+  transition: transform var(--iui-duration-1) ease-in;
+  pointer-events: all;
+  display: flex;
+  box-shadow: var(--iui-shadow-3);
+
+  @include uicore-z-index(drop-target);
+
+  @media (prefers-reduced-motion: no-preference) {
+    @keyframes nz-pulse {
+      from {
+        transform: scale3d(1, 1, 1);
+      }
+
+      50% {
+        transform: scale3d(1.1, 1.1, 1.1);
+      }
+
+      to {
+        transform: scale3d(1, 1, 1);
+      }
+    }
+
+    @keyframes nz-grow {
+      from {
+        transform: scale3d(0, 0, 0);
+      }
+
+      to {
+        transform: scale3d(1, 1, 1);
+      }
+    }
+  }
+
+  animation: nz-grow var(--iui-duration-1) ease-in-out,
+    nz-pulse 3s ease-in-out 2s infinite;
+}
+
+@mixin nz-targeted-widget-target {
+  transform: scale(1.2);
+  background-color: $nz-opaque-outline-color;
+  box-shadow: var(--iui-shadow-4);
+  animation-iteration-count: 0, 0;
+}

package/lib/cjs/appui-react/layout/target/useAllowedPanelTarget.d.ts

@@ -0,0 +1,5 @@
+/** Check the docking side against allowed regions
+ * @internal
+ */
+export declare function useAllowedPanelTarget(): boolean;
+//# sourceMappingURL=useAllowedPanelTarget.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAllowedPanelTarget.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/target/useAllowedPanelTarget.tsx"],"names":[],"mappings":"AAYA;;GAEG;AACH,wBAAgB,qBAAqB,YAKpC"}

package/lib/cjs/appui-react/layout/target/useAllowedPanelTarget.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAllowedPanelTarget = void 0;
+/*---------------------------------------------------------------------------------------------
+ * 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
+ */
+const React = require("react");
+const core_bentley_1 = require("@itwin/core-bentley");
+const Panel_1 = require("../widget-panels/Panel");
+const useAllowedSideTarget_1 = require("./useAllowedSideTarget");
+/** Check the docking side against allowed regions
+ * @internal
+ */
+function useAllowedPanelTarget() {
+    const side = React.useContext(Panel_1.PanelSideContext);
+    (0, core_bentley_1.assert)(!!side);
+    return (0, useAllowedSideTarget_1.useAllowedSideTarget)(side);
+}
+exports.useAllowedPanelTarget = useAllowedPanelTarget;
+//# sourceMappingURL=useAllowedPanelTarget.js.map

package/lib/cjs/appui-react/layout/target/useAllowedPanelTarget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAllowedPanelTarget.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/target/useAllowedPanelTarget.tsx"],"names":[],"mappings":";;;AAAA;;;gGAGgG;AAChG;;GAEG;AACH,+BAA+B;AAC/B,sDAA6C;AAC7C,kDAA0D;AAC1D,iEAA8D;AAE9D;;GAEG;AACH,SAAgB,qBAAqB;IACnC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,wBAAgB,CAAC,CAAC;IAChD,IAAA,qBAAM,EAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAEf,OAAO,IAAA,2CAAoB,EAAC,IAAI,CAAC,CAAC;AACpC,CAAC;AALD,sDAKC","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 { assert } from \"@itwin/core-bentley\";\nimport { PanelSideContext } from \"../widget-panels/Panel\";\nimport { useAllowedSideTarget } from \"./useAllowedSideTarget\";\n\n/** Check the docking side against allowed regions\n * @internal\n */\nexport function useAllowedPanelTarget() {\n  const side = React.useContext(PanelSideContext);\n  assert(!!side);\n\n  return useAllowedSideTarget(side);\n}\n"]}

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

@@ -0,0 +1,9 @@
+import type { NineZoneState } from "../state/NineZoneState";
+import type { PanelSide } from "../widget-panels/PanelTypes";
+/** 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/cjs/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,wBAAwB,CAAC;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAE7D;;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,WAiChB"}

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

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isAllowedSideTarget = exports.useAllowedSideTarget = void 0;
+/*---------------------------------------------------------------------------------------------
+ * 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
+ */
+const React = require("react");
+const DragManager_1 = require("../base/DragManager");
+const LayoutStore_1 = require("../base/LayoutStore");
+/** Check the docking side against allowed regions
+ * @internal
+ */
+function useAllowedSideTarget(side) {
+    const draggedWidgetId = React.useContext(DragManager_1.DraggedWidgetIdContext);
+    return (0, LayoutStore_1.useLayout)((state) => isAllowedSideTarget(state, draggedWidgetId, side));
+}
+exports.useAllowedSideTarget = useAllowedSideTarget;
+/** @internal */
+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];
+            // istanbul ignore else
+            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;
+}
+exports.isAllowedSideTarget = isAllowedSideTarget;
+//# sourceMappingURL=useAllowedSideTarget.js.map

package/lib/cjs/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,+BAA+B;AAC/B,qDAA6D;AAC7D,qDAAgD;AAIhD;;GAEG;AACH,SAAgB,oBAAoB,CAAC,IAAe;IAClD,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAC,oCAAsB,CAAC,CAAC;IACjE,OAAO,IAAA,uBAAS,EAAC,CAAC,KAAK,EAAE,EAAE,CACzB,mBAAmB,CAAC,KAAK,EAAE,eAAe,EAAE,IAAI,CAAC,CAClD,CAAC;AACJ,CAAC;AALD,oDAKC;AAED,gBAAgB;AAChB,SAAgB,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;QACd,MAAM,GAAG,GAAG,SAAS,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QACxC,mBAAmB,GAAG,GAAG,CAAC,mBAAmB,CAAC;KAC/C;SAAM,IAAI,aAAa,IAAI,aAAa,IAAI,YAAY,EAAE;QACzD,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,uBAAuB;YACvB,IAAI,CAAC,mBAAmB,EAAE;gBACxB,mBAAmB,GAAG,GAAG,CAAC,mBAAmB,CAAC;aAC/C;iBAAM,IAAI,GAAG,CAAC,mBAAmB,KAAK,SAAS,EAAE;gBAChD,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;aACH;QACH,CAAC,CAAC,CAAC;KACJ;IACD,IAAI,mBAAmB,EAAE;QACvB,OAAO,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;KAC3C;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AApCD,kDAoCC","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\";\nimport { useLayout } from \"../base/LayoutStore\";\nimport type { NineZoneState } from \"../state/NineZoneState\";\nimport type { PanelSide } from \"../widget-panels/PanelTypes\";\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      // istanbul ignore else\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/cjs/appui-react/layout/target/useAllowedWidgetTarget.d.ts

@@ -0,0 +1,6 @@
+import type { WidgetState } from "../state/WidgetState";
+/** 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/cjs/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,sBAAsB,CAAC;AAIxD;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,WAajE"}

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

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAllowedWidgetTarget = void 0;
+/*---------------------------------------------------------------------------------------------
+ * 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
+ */
+const React = require("react");
+const WidgetLocation_1 = require("../state/WidgetLocation");
+const useAllowedSideTarget_1 = require("./useAllowedSideTarget");
+const LayoutStore_1 = require("../base/LayoutStore");
+const DragManager_1 = require("../base/DragManager");
+/** Checks the proposed docking target to see if it's allowed by the dragged widget or tab
+ * @internal
+ */
+function useAllowedWidgetTarget(widgetId) {
+    const draggedWidget = React.useContext(DragManager_1.DraggedWidgetIdContext);
+    return (0, LayoutStore_1.useLayout)((state) => {
+        const widgetLocation = (0, WidgetLocation_1.getWidgetLocation)(state, widgetId);
+        if (!widgetLocation || (0, WidgetLocation_1.isPopoutWidgetLocation)(widgetLocation)) {
+            return false;
+        }
+        else if ((0, WidgetLocation_1.isFloatingWidgetLocation)(widgetLocation)) {
+            return true;
+        }
+        return (0, useAllowedSideTarget_1.isAllowedSideTarget)(state, draggedWidget, widgetLocation.side);
+    });
+}
+exports.useAllowedWidgetTarget = useAllowedWidgetTarget;
+//# sourceMappingURL=useAllowedWidgetTarget.js.map

package/lib/cjs/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,+BAA+B;AAC/B,4DAIiC;AACjC,iEAA6D;AAE7D,qDAAgD;AAChD,qDAA6D;AAE7D;;GAEG;AACH,SAAgB,sBAAsB,CAAC,QAA2B;IAChE,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAAC,oCAAsB,CAAC,CAAC;IAC/D,OAAO,IAAA,uBAAS,EAAC,CAAC,KAAK,EAAE,EAAE;QACzB,MAAM,cAAc,GAAG,IAAA,kCAAiB,EAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;QAE1D,IAAI,CAAC,cAAc,IAAI,IAAA,uCAAsB,EAAC,cAAc,CAAC,EAAE;YAC7D,OAAO,KAAK,CAAC;SACd;aAAM,IAAI,IAAA,yCAAwB,EAAC,cAAc,CAAC,EAAE;YACnD,OAAO,IAAI,CAAC;SACb;QAED,OAAO,IAAA,0CAAmB,EAAC,KAAK,EAAE,aAAa,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC;IACxE,CAAC,CAAC,CAAC;AACL,CAAC;AAbD,wDAaC","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\";\nimport { isAllowedSideTarget } from \"./useAllowedSideTarget\";\nimport type { WidgetState } from \"../state/WidgetState\";\nimport { useLayout } from \"../base/LayoutStore\";\nimport { DraggedWidgetIdContext } from \"../base/DragManager\";\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/cjs/appui-react/layout/tool-settings/Docked.d.ts

@@ -0,0 +1,50 @@
+/** @packageDocumentation
+ * @module ToolSettings
+ */
+import type { CommonProps } from "@itwin/core-react";
+import * as React from "react";
+import "./Docked.scss";
+/** @internal */
+export declare function onOverflowLabelAndEditorResize(): void;
+/** Properties of [[DockedToolSettings]] component.
+ * @internal
+ */
+export interface DockedToolSettingsProps extends CommonProps {
+    /** Tool settings content. */
+    children?: React.ReactNode;
+    /** Container for overflown entries. */
+    panelContainer?: React.ComponentType<{
+        children?: React.ReactNode;
+    }>;
+}
+/** Component that displays tool settings as a bar across the top of the content view.
+ * @internal
+ */
+export declare function DockedToolSettings(props: DockedToolSettingsProps): React.JSX.Element;
+/** Returns key of a child. Must be used along with React.Children.toArray to preserve the semantics of children.
+ * @internal
+ */
+export declare function getChildKey(child: React.ReactNode, index: number): string;
+/** Returns a subset of docked entry keys that exceed given width and should be overflown.
+ * @internal
+ */
+export declare function getOverflown(width: number, docked: ReadonlyArray<readonly [string, number]>, overflowWidth: number, activeIndex?: number): string[];
+/** Hook that returns a list of overflown children.
+ * @internal
+ */
+export declare function useOverflow(children: React.ReactNode, activeChildIndex?: number): [
+    ReadonlyArray<string> | undefined,
+    (size: number) => void,
+    (size: number) => void,
+    (key: string) => (size: number) => void
+];
+interface DockedToolSettingsEntryContextArgs {
+    readonly isOverflown: boolean;
+    readonly onResize: (w: number) => void;
+}
+/** @internal */
+export declare function useToolSettingsEntry(): DockedToolSettingsEntryContextArgs;
+/** @internal */
+export declare function eqlOverflown(prev: readonly string[] | undefined, value: readonly string[]): boolean;
+export {};
+//# sourceMappingURL=Docked.d.ts.map

package/lib/cjs/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;AAGH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,eAAe,CAAC;AAKvB,gBAAgB;AAChB,wBAAgB,8BAA8B,SAAK;AA0BnD;;GAEG;AACH,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,YAoCrB;AAED;;GAEG;AACH,wBAAgB,WAAW,CACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,EACzB,gBAAgB,CAAC,EAAE,MAAM,GACxB;IACD,aAAa,CAAC,MAAM,CAAC,GAAG,SAAS;IACjC,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI;IACtB,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI;IACtB,CAAC,GAAG,EAAE,MAAM,KAAK,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI;CACxC,CA6EA;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/cjs/appui-react/layout/tool-settings/Docked.js

@@ -0,0 +1,265 @@
+"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.eqlOverflown = exports.useToolSettingsEntry = exports.useOverflow = exports.getOverflown = exports.getChildKey = exports.DockedToolSettings = exports.onOverflowLabelAndEditorResize = void 0;
+const core_bentley_1 = require("@itwin/core-bentley");
+const core_react_1 = require("@itwin/core-react");
+const classnames_1 = require("classnames");
+const React = require("react");
+const react_transition_group_1 = require("react-transition-group");
+const PreviewFeatures_1 = require("../../preview/PreviewFeatures");
+const NineZone_1 = require("../base/NineZone");
+require("./Docked.scss");
+const Handle_1 = require("./Handle");
+const Overflow_1 = require("./Overflow");
+const Panel_1 = require("./Panel");
+/** @internal */
+function onOverflowLabelAndEditorResize() { }
+exports.onOverflowLabelAndEditorResize = onOverflowLabelAndEditorResize;
+/** This component takes a DockedToolSetting "wrapper" component and extract only the label and editor components from it */
+function OverflowLabelAndEditor({ wrapper }) {
+    (0, core_bentley_1.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
+ */
+function DockedToolSettings(props) {
+    const [open, setOpen] = React.useState(false);
+    const { contentAlwaysMaxSize } = (0, PreviewFeatures_1.usePreviewFeatures)();
+    const animateToolSettings = React.useContext(NineZone_1.AnimateDockedToolSettingsContext);
+    const ref = React.useRef(null);
+    const width = React.useRef(undefined);
+    const handleWidth = React.useRef(undefined);
+    const [overflown, handleContainerResize, handleOverflowResize, handleEntryResize,] = useOverflow(props.children);
+    const onResize = React.useCallback(() => {
+        width.current !== undefined &&
+            handleWidth.current !== undefined &&
+            handleContainerResize(width.current - handleWidth.current);
+    }, [handleContainerResize]);
+    const handleHandleResize = React.useCallback((w) => {
+        handleWidth.current = w;
+        onResize();
+    }, [onResize]);
+    const handleResize = React.useCallback((w) => {
+        width.current = w;
+        onResize();
+    }, [onResize]);
+    const resizeObserverRef = (0, core_react_1.useResizeObserver)(handleResize);
+    const onOverflowClick = React.useCallback(() => {
+        setOpen((prev) => !prev);
+    }, []);
+    const handleOnClose = React.useCallback(() => {
+        setOpen(false);
+    }, []);
+    const targetRef = React.useRef(null);
+    const refs = (0, core_react_1.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 = (0, classnames_1.default)("nz-toolSettings-docked", props.className, 
+    // istanbul ignore next (preview)
+    contentAlwaysMaxSize && "preview-contentAlwaysMaxSize");
+    return (React.createElement("div", { "data-toolsettings-provider": props.itemId, className: className, ref: refs, style: props.style },
+        React.createElement(Handle_1.DockedToolSettingsHandle, { onResize: handleHandleResize }),
+        dockedChildren.map(([key, child]) => {
+            return (React.createElement(react_transition_group_1.TransitionGroup, { appear: animateToolSettings, enter: animateToolSettings, key: key },
+                React.createElement(react_transition_group_1.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: handleEntryResize }, child))));
+        }),
+        (!overflown || overflown.length > 0) && (React.createElement(React.Fragment, null,
+            React.createElement(Overflow_1.DockedToolSettingsOverflow, { onClick: onOverflowClick, onResize: handleOverflowResize, ref: targetRef }),
+            overflownChildren.length > 0 && open && targetRef.current && (React.createElement(Panel_1.ToolSettingsOverflowPanel, { onClose: handleOnClose, open: true, target: targetRef.current },
+                React.createElement(PanelContainer, null, overflownChildren.map(([key, child]) => {
+                    return React.createElement(OverflowLabelAndEditor, { key: key, wrapper: child });
+                }))))))));
+}
+exports.DockedToolSettings = DockedToolSettings;
+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
+ */
+function getChildKey(child, index) {
+    if (React.isValidElement(child) && child.key !== null) {
+        return child.key.toString();
+    }
+    return index.toString();
+}
+exports.getChildKey = getChildKey;
+/** Returns a subset of docked entry keys that exceed given width and should be overflown.
+ * @internal
+ */
+function getOverflown(width, docked, overflowWidth, activeIndex) {
+    let settingsWidth = 0;
+    if (activeIndex !== undefined && docked.length > activeIndex) {
+        const activeWidth = docked[activeIndex];
+        settingsWidth += activeWidth[1];
+    }
+    let i = 0;
+    for (; i < docked.length; i++) {
+        if (i === activeIndex)
+            continue;
+        const w = docked[i][1];
+        const newSettingsWidth = settingsWidth + w;
+        if (newSettingsWidth > width) {
+            settingsWidth += overflowWidth;
+            break;
+        }
+        settingsWidth = newSettingsWidth;
+    }
+    let j = i;
+    // istanbul ignore else
+    if (j < docked.length) {
+        for (; j > 0; j--) {
+            if (j === activeIndex)
+                continue;
+            if (settingsWidth <= width)
+                break;
+            const w = docked[j][1];
+            settingsWidth -= w;
+        }
+    }
+    const overflown = new Array();
+    for (i = j; i < docked.length; i++) {
+        if (i === activeIndex)
+            continue;
+        overflown.push(docked[i][0]);
+    }
+    return overflown;
+}
+exports.getOverflown = getOverflown;
+/** Hook that returns a list of overflown children.
+ * @internal
+ */
+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 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);
+        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);
+        oldW !== w && entryWidths.current.set(key, w);
+        oldW !== w && calculateOverflow();
+    }, [calculateOverflow]);
+    return [
+        overflown,
+        handleContainerResize,
+        handleOverflowResize,
+        handleEntryResize,
+    ];
+}
+exports.useOverflow = useOverflow;
+const DockedToolSettingsEntryContext = React.createContext(null);
+DockedToolSettingsEntryContext.displayName =
+    "nz:DockedToolSettingsEntryContext";
+/** @internal */
+function useToolSettingsEntry() {
+    return React.useContext(DockedToolSettingsEntryContext);
+}
+exports.useToolSettingsEntry = useToolSettingsEntry;
+function verifiedMapEntries(map) {
+    for (const [, val] of map) {
+        if (val === undefined)
+            return undefined;
+    }
+    return map;
+}
+function DefaultPanelContainer(props) {
+    return (React.createElement("div", { className: "nz-toolSettings-docked_container" }, props.children));
+}
+/** @internal */
+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;
+}
+exports.eqlOverflown = eqlOverflown;
+//# sourceMappingURL=Docked.js.map

package/lib/cjs/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 { assert } from \"@itwin/core-bentley\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { useRefs, useResizeObserver } from \"@itwin/core-react\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { CSSTransition, TransitionGroup } from \"react-transition-group\";\nimport { usePreviewFeatures } from \"../../preview/PreviewFeatures\";\nimport { AnimateDockedToolSettingsContext } from \"../base/NineZone\";\nimport \"./Docked.scss\";\nimport { DockedToolSettingsHandle } from \"./Handle\";\nimport { DockedToolSettingsOverflow } from \"./Overflow\";\nimport { ToolSettingsOverflowPanel } from \"./Panel\";\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 */\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 { contentAlwaysMaxSize } = usePreviewFeatures();\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    handleEntryResize,\n  ] = useOverflow(props.children);\n  const onResize = React.useCallback(() => {\n    width.current !== undefined &&\n      handleWidth.current !== undefined &&\n      handleContainerResize(width.current - handleWidth.current);\n  }, [handleContainerResize]);\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(\n    \"nz-toolSettings-docked\",\n    props.className,\n    // istanbul ignore next (preview)\n    contentAlwaysMaxSize && \"preview-contentAlwaysMaxSize\"\n  );\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={handleEntryResize}\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) {\n  let settingsWidth = 0;\n  if (activeIndex !== undefined && docked.length > activeIndex) {\n    const activeWidth = docked[activeIndex];\n    settingsWidth += activeWidth[1];\n  }\n  let i = 0;\n  for (; i < docked.length; i++) {\n    if (i === activeIndex) continue;\n    const w = docked[i][1];\n    const newSettingsWidth = settingsWidth + w;\n    if (newSettingsWidth > width) {\n      settingsWidth += overflowWidth;\n      break;\n    }\n    settingsWidth = newSettingsWidth;\n  }\n\n  let j = i;\n  // istanbul ignore else\n  if (j < docked.length) {\n    for (; j > 0; j--) {\n      if (j === activeIndex) continue;\n      if (settingsWidth <= width) break;\n      const w = docked[j][1];\n      settingsWidth -= w;\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.\n * @internal\n */\nexport function useOverflow(\n  children: React.ReactNode,\n  activeChildIndex?: number\n): [\n  ReadonlyArray<string> | undefined,\n  (size: number) => void,\n  (size: number) => void,\n  (key: string) => (size: 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\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    );\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      oldW !== w && entryWidths.current.set(key, w);\n      oldW !== w && calculateOverflow();\n    },\n    [calculateOverflow]\n  );\n\n  return [\n    overflown,\n    handleContainerResize,\n    handleOverflowResize,\n    handleEntryResize,\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=\"nz-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"]}