@itwin/components-react 4.17.1 → 5.0.0-dev.2

package/lib/components-react/toolbar/Item.scss

@@ -0,0 +1,94 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "variables" as *;
+
+.components-toolbar-button-item {
+  box-sizing: border-box;
+  background-origin: border-box;
+  border-color: transparent;
+  border-style: solid;
+  border-radius: var(--iui-border-radius-1);
+  cursor: pointer;
+  transition: background-color var(--iui-duration-1) ease;
+  position: relative;
+  background: transparent;
+  height: 100%;
+  width: 100%;
+  outline-style: solid;
+  outline-width: 0;
+
+  > .components-icon {
+    font-size: $icon-size;
+    width: 100%;
+    height: 100%;
+    display: grid;
+    align-content: center;
+    justify-content: center;
+    color: var(--iui-color-icon);
+    transition: color var(--iui-duration-1) ease;
+
+    img {
+      width: $icon-size;
+      height: $icon-size;
+    }
+  }
+
+  &:not(.components-disabled) > .components-icon {
+    filter: $icon-shadow;
+  }
+
+  &:focus-visible:not(.components-disabled):not(.components-active),
+  &:hover:not(.components-disabled):not(.components-active),
+  &:active:not(.components-disabled):not(.components-active) {
+    color: var(--iui-color-icon-hover);
+    background-color: var(--iui-color-background-transparent-hover);
+  }
+
+  &.components-active {
+    color: var(--iui-color-icon-accent);
+    background-color: var(--iui-color-background-accent-muted);
+    // background-color: hsl(var(--iui-color-accent-hsl) / var(--iui-opacity-5));
+    border: solid 2px var(--iui-color-border-accent);
+
+    &:not(:active):not(.components-disabled) {
+      transition-duration: 0s;
+
+      > .components-icon {
+        color: var(--iui-color-icon-accent);
+        transition-duration: var(--iui-duration-1);
+        transition-timing-function: cubic-bezier(1, 0.1, 1, 0.5);
+      }
+    }
+  }
+
+  &.components-disabled {
+    cursor: not-allowed;
+
+    > .components-icon {
+      color: var(--iui-color-icon-disabled);
+    }
+
+    &:hover {
+      cursor: auto;
+    }
+
+    &:active {
+      pointer-events: none;
+    }
+  }
+
+  > .components-badge {
+    display: none;
+  }
+}
+
+div.components-toolbar-items-container.components-toolbar-show-decorators
+  .components-toolbar-button-item
+  > .components-badge {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+}

package/lib/components-react/toolbar/ItemWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemWrapper.d.ts","sourceRoot":"","sources":["../../../src/components-react/toolbar/ItemWrapper.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAWrD;;GAEG;AAEH,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAwBlD;AAED,gBAAgB;AAChB,wBAAgB,gCAAgC,CAAC,CAAC,SAAS,OAAO,EAChE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,EAChC,SAAS,EAAE,OAAO,sCAUnB"}

package/lib/components-react/toolbar/ItemWrapper.js

@@ -0,0 +1,33 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 "./ItemWrapper.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { useResizeObserver } from "@itwin/core-react/internal";
+import { useToolbarWithOverflowDirectionContext, useToolItemEntryContext, } from "./InternalToolbarComponent.js";
+import { DirectionHelpers, OrthogonalDirectionHelpers, } from "./utilities/Direction.js";
+/** Used in a [[ItemWrapper]] component to display a setting.
+ * @internal future
+ */
+export function ItemWrapper(props) {
+    const { expandsTo, direction, overflowExpandsTo, overflowDirection } = useToolbarWithOverflowDirectionContext();
+    const { hasOverflow, onResize, useHeight } = useToolItemEntryContext();
+    const ref = useResizeObserverSingleDimension(onResize, useHeight);
+    const className = classnames("components-toolbar-item-container", hasOverflow && "components-overflown", OrthogonalDirectionHelpers.getCssClassName(hasOverflow ? overflowDirection : direction), DirectionHelpers.getCssClassName(hasOverflow ? overflowExpandsTo : expandsTo), props.className);
+    return (React.createElement("div", { className: className, ref: ref, style: props.style }, props.children));
+}
+/** @internal */
+export function useResizeObserverSingleDimension(onResize, useHeight) {
+    const handleResize = React.useCallback((w, h) => {
+        if (useHeight)
+            return onResize(h);
+        return onResize(w);
+    }, [useHeight, onResize]);
+    return useResizeObserver(handleResize);
+}
+//# sourceMappingURL=ItemWrapper.js.map

package/lib/components-react/toolbar/ItemWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemWrapper.js","sourceRoot":"","sources":["../../../src/components-react/toolbar/ItemWrapper.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAC5B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EACL,sCAAsC,EACtC,uBAAuB,GACxB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACL,gBAAgB,EAChB,0BAA0B,GAC3B,MAAM,0BAA0B,CAAC;AAWlC;;GAEG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAClE,sCAAsC,EAAE,CAAC;IAC3C,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,uBAAuB,EAAE,CAAC;IACvE,MAAM,GAAG,GAAG,gCAAgC,CAC1C,QAAQ,EACR,SAAS,CACV,CAAC;IACF,MAAM,SAAS,GAAG,UAAU,CAC1B,mCAAmC,EACnC,WAAW,IAAI,sBAAsB,EACrC,0BAA0B,CAAC,eAAe,CACxC,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAC5C,EACD,gBAAgB,CAAC,eAAe,CAC9B,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAC5C,EACD,KAAK,CAAC,SAAS,CAChB,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IACpD,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,gCAAgC,CAC9C,QAAgC,EAChC,SAAkB;IAElB,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,CAAS,EAAE,CAAS,EAAE,EAAE;QACvB,IAAI,SAAS;YAAE,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC;QAClC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC;IACrB,CAAC,EACD,CAAC,SAAS,EAAE,QAAQ,CAAC,CACtB,CAAC;IACF,OAAO,iBAAiB,CAAI,YAAY,CAAC,CAAC;AAC5C,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 \"./ItemWrapper.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { useResizeObserver } from \"@itwin/core-react/internal\";\nimport {\n  useToolbarWithOverflowDirectionContext,\n  useToolItemEntryContext,\n} from \"./InternalToolbarComponent.js\";\nimport {\n  DirectionHelpers,\n  OrthogonalDirectionHelpers,\n} from \"./utilities/Direction.js\";\n\n/** Properties of [[ItemWrapper]] component.\n * @internal future\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface ItemWrapperProps extends CommonProps {\n  /** Tool setting content. */\n  children?: React.ReactNode;\n}\n\n/** Used in a [[ItemWrapper]] component to display a setting.\n * @internal future\n */\nexport function ItemWrapper(props: ItemWrapperProps) {\n  const { expandsTo, direction, overflowExpandsTo, overflowDirection } =\n    useToolbarWithOverflowDirectionContext();\n  const { hasOverflow, onResize, useHeight } = useToolItemEntryContext();\n  const ref = useResizeObserverSingleDimension<HTMLDivElement>(\n    onResize,\n    useHeight\n  );\n  const className = classnames(\n    \"components-toolbar-item-container\",\n    hasOverflow && \"components-overflown\",\n    OrthogonalDirectionHelpers.getCssClassName(\n      hasOverflow ? overflowDirection : direction\n    ),\n    DirectionHelpers.getCssClassName(\n      hasOverflow ? overflowExpandsTo : expandsTo\n    ),\n    props.className\n  );\n  return (\n    <div className={className} ref={ref} style={props.style}>\n      {props.children}\n    </div>\n  );\n}\n\n/** @internal */\nexport function useResizeObserverSingleDimension<T extends Element>(\n  onResize: (size: number) => void,\n  useHeight: boolean\n) {\n  const handleResize = React.useCallback(\n    (w: number, h: number) => {\n      if (useHeight) return onResize(h);\n      return onResize(w);\n    },\n    [useHeight, onResize]\n  );\n  return useResizeObserver<T>(handleResize);\n}\n"]}

package/lib/components-react/toolbar/Items.d.ts

@@ -0,0 +1,21 @@
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import "./Items.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+import type { OrthogonalDirection } from "./utilities/Direction.js";
+/** Properties of [[ToolbarItems]] component.
+ * @internal
+ */
+export interface ToolbarItemsProps extends CommonProps {
+    /** Toolbar items. */
+    children?: React.ReactNode;
+    /** Toolbar items direction. */
+    direction: OrthogonalDirection;
+}
+/** Toolbar items container. Used in [[ToolbarWithOverflow]] component.
+ * @internal
+ */
+export declare function ToolbarItems(props: ToolbarItemsProps): React.JSX.Element;
+//# sourceMappingURL=Items.d.ts.map

package/lib/components-react/toolbar/Items.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Items.d.ts","sourceRoot":"","sources":["../../../src/components-react/toolbar/Items.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;AAgBrD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAGpE;;GAEG;AAEH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,qBAAqB;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,+BAA+B;IAC/B,SAAS,EAAE,mBAAmB,CAAC;CAChC;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAsDpD"}

package/lib/components-react/toolbar/Items.js

@@ -0,0 +1,49 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import "./Items.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { calculateBackdropFilterBlur, calculateBoxShadowOpacity, calculateToolbarOpacity, getToolbarBackdropFilter, getToolbarBackgroundColor, getToolbarBoxShadow, TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT, TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT, useWidgetOpacityContext, } from "@itwin/core-react/internal";
+import { ToolbarOpacitySetting, useToolbarWithOverflowDirectionContext, } from "./InternalToolbarComponent.js";
+import { OrthogonalDirectionHelpers } from "./utilities/Direction.js";
+/** Toolbar items container. Used in [[ToolbarWithOverflow]] component.
+ * @internal
+ */
+export function ToolbarItems(props) {
+    const { toolbarOpacitySetting, openPopupCount, overflowDisplayActive } = useToolbarWithOverflowDirectionContext();
+    const useTransparentBackground = toolbarOpacitySetting === ToolbarOpacitySetting.Transparent;
+    let toolbarOpacity = useTransparentBackground
+        ? 0
+        : Number(document.documentElement.style.getPropertyValue("--buic-toolbar-opacity"));
+    let boxShadowOpacity = useTransparentBackground
+        ? 0
+        : TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT;
+    let filterBlur = useTransparentBackground
+        ? 0
+        : TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT;
+    let showSeparators = toolbarOpacitySetting === ToolbarOpacitySetting.Transparent ? false : true;
+    const { ref, proximityScale } = useWidgetOpacityContext();
+    if (toolbarOpacitySetting === ToolbarOpacitySetting.Proximity &&
+        openPopupCount < 1 &&
+        !overflowDisplayActive) {
+        toolbarOpacity = calculateToolbarOpacity(proximityScale);
+        boxShadowOpacity = calculateBoxShadowOpacity(proximityScale);
+        filterBlur = calculateBackdropFilterBlur(proximityScale);
+        if (proximityScale < 0.25)
+            showSeparators = false;
+    }
+    const divStyle = {
+        backgroundColor: getToolbarBackgroundColor(toolbarOpacity),
+        boxShadow: getToolbarBoxShadow(boxShadowOpacity),
+        backdropFilter: getToolbarBackdropFilter(filterBlur),
+        ...props.style,
+    };
+    const className = classnames("components-toolbar-items-container", OrthogonalDirectionHelpers.getCssClassName(props.direction), showSeparators && "components-toolbar-show-decorators", props.className);
+    return (React.createElement("div", { className: className, style: divStyle, ref: ref }, props.children));
+}
+//# sourceMappingURL=Items.js.map

package/lib/components-react/toolbar/Items.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Items.js","sourceRoot":"","sources":["../../../src/components-react/toolbar/Items.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,EACL,2BAA2B,EAC3B,yBAAyB,EACzB,uBAAuB,EACvB,wBAAwB,EACxB,yBAAyB,EACzB,mBAAmB,EACnB,oCAAoC,EACpC,kCAAkC,EAClC,uBAAuB,GACxB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,qBAAqB,EACrB,sCAAsC,GACvC,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAatE;;GAEG;AACH,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,EAAE,qBAAqB,EAAE,cAAc,EAAE,qBAAqB,EAAE,GACpE,sCAAsC,EAAE,CAAC;IAC3C,MAAM,wBAAwB,GAC5B,qBAAqB,KAAK,qBAAqB,CAAC,WAAW,CAAC;IAE9D,IAAI,cAAc,GAAG,wBAAwB;QAC3C,CAAC,CAAC,CAAC;QACH,CAAC,CAAC,MAAM,CACJ,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,gBAAgB,CAC7C,wBAAwB,CACzB,CACF,CAAC;IACN,IAAI,gBAAgB,GAAG,wBAAwB;QAC7C,CAAC,CAAC,CAAC;QACH,CAAC,CAAC,kCAAkC,CAAC;IACvC,IAAI,UAAU,GAAG,wBAAwB;QACvC,CAAC,CAAC,CAAC;QACH,CAAC,CAAC,oCAAoC,CAAC;IACzC,IAAI,cAAc,GAChB,qBAAqB,KAAK,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IAE7E,MAAM,EAAE,GAAG,EAAE,cAAc,EAAE,GAAG,uBAAuB,EAAkB,CAAC;IAE1E,IACE,qBAAqB,KAAK,qBAAqB,CAAC,SAAS;QACzD,cAAc,GAAG,CAAC;QAClB,CAAC,qBAAqB,EACtB,CAAC;QACD,cAAc,GAAG,uBAAuB,CAAC,cAAc,CAAC,CAAC;QACzD,gBAAgB,GAAG,yBAAyB,CAAC,cAAc,CAAC,CAAC;QAC7D,UAAU,GAAG,2BAA2B,CAAC,cAAc,CAAC,CAAC;QACzD,IAAI,cAAc,GAAG,IAAI;YAAE,cAAc,GAAG,KAAK,CAAC;IACpD,CAAC;IAED,MAAM,QAAQ,GAAwB;QACpC,eAAe,EAAE,yBAAyB,CAAC,cAAc,CAAC;QAC1D,SAAS,EAAE,mBAAmB,CAAC,gBAAgB,CAAC;QAChD,cAAc,EAAE,wBAAwB,CAAC,UAAU,CAAC;QACpD,GAAG,KAAK,CAAC,KAAK;KACf,CAAC;IAEF,MAAM,SAAS,GAAG,UAAU,CAC1B,oCAAoC,EACpC,0BAA0B,CAAC,eAAe,CAAC,KAAK,CAAC,SAAS,CAAC,EAC3D,cAAc,IAAI,oCAAoC,EACtD,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,IACjD,KAAK,CAAC,QAAQ,CACX,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 Toolbar\n */\n\nimport \"./Items.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport {\n  calculateBackdropFilterBlur,\n  calculateBoxShadowOpacity,\n  calculateToolbarOpacity,\n  getToolbarBackdropFilter,\n  getToolbarBackgroundColor,\n  getToolbarBoxShadow,\n  TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT,\n  TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT,\n  useWidgetOpacityContext,\n} from \"@itwin/core-react/internal\";\nimport {\n  ToolbarOpacitySetting,\n  useToolbarWithOverflowDirectionContext,\n} from \"./InternalToolbarComponent.js\";\nimport type { OrthogonalDirection } from \"./utilities/Direction.js\";\nimport { OrthogonalDirectionHelpers } from \"./utilities/Direction.js\";\n\n/** Properties of [[ToolbarItems]] component.\n * @internal\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface ToolbarItemsProps extends CommonProps {\n  /** Toolbar items. */\n  children?: React.ReactNode;\n  /** Toolbar items direction. */\n  direction: OrthogonalDirection;\n}\n\n/** Toolbar items container. Used in [[ToolbarWithOverflow]] component.\n * @internal\n */\nexport function ToolbarItems(props: ToolbarItemsProps) {\n  const { toolbarOpacitySetting, openPopupCount, overflowDisplayActive } =\n    useToolbarWithOverflowDirectionContext();\n  const useTransparentBackground =\n    toolbarOpacitySetting === ToolbarOpacitySetting.Transparent;\n\n  let toolbarOpacity = useTransparentBackground\n    ? 0\n    : Number(\n        document.documentElement.style.getPropertyValue(\n          \"--buic-toolbar-opacity\"\n        )\n      );\n  let boxShadowOpacity = useTransparentBackground\n    ? 0\n    : TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT;\n  let filterBlur = useTransparentBackground\n    ? 0\n    : TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT;\n  let showSeparators =\n    toolbarOpacitySetting === ToolbarOpacitySetting.Transparent ? false : true;\n\n  const { ref, proximityScale } = useWidgetOpacityContext<HTMLDivElement>();\n\n  if (\n    toolbarOpacitySetting === ToolbarOpacitySetting.Proximity &&\n    openPopupCount < 1 &&\n    !overflowDisplayActive\n  ) {\n    toolbarOpacity = calculateToolbarOpacity(proximityScale);\n    boxShadowOpacity = calculateBoxShadowOpacity(proximityScale);\n    filterBlur = calculateBackdropFilterBlur(proximityScale);\n    if (proximityScale < 0.25) showSeparators = false;\n  }\n\n  const divStyle: React.CSSProperties = {\n    backgroundColor: getToolbarBackgroundColor(toolbarOpacity),\n    boxShadow: getToolbarBoxShadow(boxShadowOpacity),\n    backdropFilter: getToolbarBackdropFilter(filterBlur),\n    ...props.style,\n  };\n\n  const className = classnames(\n    \"components-toolbar-items-container\",\n    OrthogonalDirectionHelpers.getCssClassName(props.direction),\n    showSeparators && \"components-toolbar-show-decorators\",\n    props.className\n  );\n\n  return (\n    <div className={className} style={divStyle} ref={ref}>\n      {props.children}\n    </div>\n  );\n}\n"]}

package/lib/components-react/toolbar/Items.scss

@@ -0,0 +1,96 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "variables" as *;
+
+$separator-color: var(--iui-color-border-subtle);
+
+.components-toolbar-items-container {
+  $border-radius: var(--iui-border-radius-1);
+
+  border-radius: $border-radius;
+  display: inline-block;
+  vertical-align: bottom;
+  box-sizing: border-box;
+
+  box-shadow: var(--iui-shadow-1);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  pointer-events: auto;
+
+  &.components-vertical {
+    width: $components-desktop-toolbar-width;
+
+    > * {
+      height: $components-desktop-item-height;
+
+      &:not(:first-child) {
+        margin-top: $components-desktop-space-between-toolbar-items;
+
+        &:before {
+          content: "";
+          display: block;
+          position: absolute;
+          pointer-events: none;
+          height: $components-desktop-space-between-toolbar-items;
+          width: 100%;
+          left: 0;
+          top: -$components-desktop-space-between-toolbar-items;
+        }
+      }
+    }
+  }
+
+  &.components-horizontal {
+    height: $components-desktop-toolbar-height;
+
+    > * {
+      display: inline-block;
+      height: 100%;
+      width: $components-desktop-item-width;
+
+      &:not(:first-child) {
+        margin-left: $components-desktop-space-between-toolbar-items;
+
+        &:before {
+          content: "";
+          display: block;
+          position: absolute;
+          pointer-events: none;
+          width: $components-desktop-space-between-toolbar-items;
+          height: 100%;
+          left: -$components-desktop-space-between-toolbar-items;
+          top: 0;
+        }
+      }
+    }
+  }
+
+  > * {
+    vertical-align: bottom;
+  }
+}
+
+/* modifications to the style to support the appearance of a tool button separator  */
+.components-toolbar-item-container.components-horizontal.components-toolbar-button-add-gap-before {
+  margin-left: $components-desktop-separator-gap-between-toolbar-items;
+}
+
+div.components-toolbar-items-container.components-toolbar-show-decorators
+  .components-toolbar-item-container.components-horizontal.components-toolbar-button-add-gap-before::before {
+  width: $components-desktop-separator-thickness;
+  background-color: $separator-color;
+  left: $components-desktop-separator-center-offset;
+}
+
+.components-toolbar-item-container.components-vertical.components-toolbar-button-add-gap-before {
+  margin-top: $components-desktop-separator-gap-between-toolbar-items;
+}
+
+div.components-toolbar-items-container.components-toolbar-show-decorators
+  .components-toolbar-item-container.components-vertical.components-toolbar-button-add-gap-before::before {
+  height: $components-desktop-separator-thickness;
+  background-color: $separator-color;
+  top: $components-desktop-separator-center-offset;
+}

package/lib/components-react/toolbar/Overflow.d.ts

@@ -0,0 +1,33 @@
+/** @packageDocumentation
+ * @module ToolSettings
+ */
+import "./Overflow.scss";
+import * as React from "react";
+import type { CommonProps, NoChildrenProps } from "@itwin/core-react";
+import { Direction } from "./utilities/Direction.js";
+import { RelativePosition } from "@itwin/appui-abstract";
+/** Properties of [[ToolbarOverflowButton]] component.
+ * @internal
+ */
+export interface ToolbarOverflowButtonProps extends CommonProps, // eslint-disable-line deprecation/deprecation
+NoChildrenProps {
+    /** Function called when button is clicked. */
+    onClick?: () => void;
+    /** Function called when panel is closed. */
+    onClose?: () => void;
+    /** Describes if the panel is open. */
+    open?: boolean;
+    /** Panel expand direction. */
+    expandsTo: Direction;
+    /** Panel element containing the overflown buttons */
+    panelNode?: React.ReactNode;
+    /** Title for the item. */
+    title?: string;
+}
+/** Button to toggle display of overflown tools.
+ * @internal
+ */
+export declare function ToolbarOverflowButton(props: ToolbarOverflowButtonProps): React.JSX.Element;
+/** @internal */
+export declare function toToolbarOverflowRelativePosition(expandsTo: Direction): RelativePosition;
+//# sourceMappingURL=Overflow.d.ts.map

package/lib/components-react/toolbar/Overflow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overflow.d.ts","sourceRoot":"","sources":["../../../src/components-react/toolbar/Overflow.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,iBAAiB,CAAC;AAEzB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAQtE,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD;;GAEG;AACH,MAAM,WAAW,0BACf,SAAQ,WAAW,EAAE,8CAA8C;AAEjE,eAAe;IACjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,sCAAsC;IACtC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,8BAA8B;IAC9B,SAAS,EAAE,SAAS,CAAC;IACrB,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,qBAiDtE;AAED,gBAAgB;AAChB,wBAAgB,iCAAiC,CAC/C,SAAS,EAAE,SAAS,GACnB,gBAAgB,CAWlB"}

package/lib/components-react/toolbar/Overflow.js

@@ -0,0 +1,47 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 { Popup } from "@itwin/core-react";
+import { useRefState } from "@itwin/core-react/internal";
+import { useToolbarPopupAutoHideContext, useToolItemEntryContext, } from "./InternalToolbarComponent.js";
+import { useResizeObserverSingleDimension } from "./ItemWrapper.js";
+import { Direction } from "./utilities/Direction.js";
+import { RelativePosition } from "@itwin/appui-abstract";
+/** Button to toggle display of overflown tools.
+ * @internal
+ */
+export function ToolbarOverflowButton(props) {
+    const { onResize, useHeight } = useToolItemEntryContext();
+    const [targetRef, target] = useRefState();
+    const ref = useResizeObserverSingleDimension(onResize, useHeight);
+    const isHidden = useToolbarPopupAutoHideContext();
+    const popupClassName = classnames("components-toolbar-overflow_popup", isHidden && "nz-hidden");
+    const className = classnames("components-toolbar-item-container", "components-toolbar-overflow-button", props.className);
+    const buttonClassName = classnames("components-toolbar-button-item", "components-ellipsis-icon");
+    return (React.createElement("div", { className: className, ref: targetRef },
+        React.createElement("button", { ref: ref, onClick: props.onClick, className: buttonClassName, style: props.style, title: props.title },
+            React.createElement("div", { className: "components-icon" },
+                React.createElement("div", { className: "components-ellipsis" }))),
+        React.createElement(Popup, { className: popupClassName, offset: 0, showShadow: false, isOpen: props.open, onClose: props.onClose, position: toToolbarOverflowRelativePosition(props.expandsTo), target: target }, props.panelNode)));
+}
+/** @internal */
+export function toToolbarOverflowRelativePosition(expandsTo) {
+    switch (expandsTo) {
+        case Direction.Bottom:
+            return RelativePosition.Bottom;
+        case Direction.Left:
+            return RelativePosition.Left;
+        case Direction.Right:
+            return RelativePosition.Right;
+        case Direction.Top:
+            return RelativePosition.Top;
+    }
+}
+//# sourceMappingURL=Overflow.js.map

package/lib/components-react/toolbar/Overflow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overflow.js","sourceRoot":"","sources":["../../../src/components-react/toolbar/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,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EACL,8BAA8B,EAC9B,uBAAuB,GACxB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,gCAAgC,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAuBzD;;GAEG;AACH,MAAM,UAAU,qBAAqB,CAAC,KAAiC;IACrE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,uBAAuB,EAAE,CAAC;IAC1D,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,GAAG,WAAW,EAAkB,CAAC;IAC1D,MAAM,GAAG,GAAG,gCAAgC,CAC1C,QAAQ,EACR,SAAS,CACV,CAAC;IACF,MAAM,QAAQ,GAAG,8BAA8B,EAAE,CAAC;IAClD,MAAM,cAAc,GAAG,UAAU,CAC/B,mCAAmC,EACnC,QAAQ,IAAI,WAAW,CACxB,CAAC;IAEF,MAAM,SAAS,GAAG,UAAU,CAC1B,mCAAmC,EACnC,oCAAoC,EACpC,KAAK,CAAC,SAAS,CAChB,CAAC;IACF,MAAM,eAAe,GAAG,UAAU,CAChC,gCAAgC,EAChC,0BAA0B,CAC3B,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS;QACvC,gCACE,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,KAAK,EAAE,KAAK,CAAC,KAAK;YAElB,6BAAK,SAAS,EAAC,iBAAiB;gBAC9B,6BAAK,SAAS,EAAC,qBAAqB,GAAG,CACnC,CACC;QAET,oBAAC,KAAK,IACJ,SAAS,EAAE,cAAc,EACzB,MAAM,EAAE,CAAC,EACT,UAAU,EAAE,KAAK,EACjB,MAAM,EAAE,KAAK,CAAC,IAAI,EAClB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,iCAAiC,CAAC,KAAK,CAAC,SAAS,CAAC,EAC5D,MAAM,EAAE,MAAM,IAEb,KAAK,CAAC,SAAS,CACV,CACJ,CACP,CAAC;AACJ,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,iCAAiC,CAC/C,SAAoB;IAEpB,QAAQ,SAAS,EAAE,CAAC;QAClB,KAAK,SAAS,CAAC,MAAM;YACnB,OAAO,gBAAgB,CAAC,MAAM,CAAC;QACjC,KAAK,SAAS,CAAC,IAAI;YACjB,OAAO,gBAAgB,CAAC,IAAI,CAAC;QAC/B,KAAK,SAAS,CAAC,KAAK;YAClB,OAAO,gBAAgB,CAAC,KAAK,CAAC;QAChC,KAAK,SAAS,CAAC,GAAG;YAChB,OAAO,gBAAgB,CAAC,GAAG,CAAC;IAChC,CAAC;AACH,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, NoChildrenProps } from \"@itwin/core-react\";\nimport { Popup } from \"@itwin/core-react\";\nimport { useRefState } from \"@itwin/core-react/internal\";\nimport {\n  useToolbarPopupAutoHideContext,\n  useToolItemEntryContext,\n} from \"./InternalToolbarComponent.js\";\nimport { useResizeObserverSingleDimension } from \"./ItemWrapper.js\";\nimport { Direction } from \"./utilities/Direction.js\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\n\n/** Properties of [[ToolbarOverflowButton]] component.\n * @internal\n */\nexport interface ToolbarOverflowButtonProps\n  extends CommonProps, // eslint-disable-line deprecation/deprecation\n    // eslint-disable-next-line deprecation/deprecation\n    NoChildrenProps {\n  /** Function called when button is clicked. */\n  onClick?: () => void;\n  /** Function called when panel is closed. */\n  onClose?: () => void;\n  /** Describes if the panel is open. */\n  open?: boolean;\n  /** Panel expand direction. */\n  expandsTo: Direction;\n  /** Panel element containing the overflown buttons */\n  panelNode?: React.ReactNode;\n  /** Title for the item. */\n  title?: string;\n}\n\n/** Button to toggle display of overflown tools.\n * @internal\n */\nexport function ToolbarOverflowButton(props: ToolbarOverflowButtonProps) {\n  const { onResize, useHeight } = useToolItemEntryContext();\n  const [targetRef, target] = useRefState<HTMLDivElement>();\n  const ref = useResizeObserverSingleDimension<HTMLButtonElement>(\n    onResize,\n    useHeight\n  );\n  const isHidden = useToolbarPopupAutoHideContext();\n  const popupClassName = classnames(\n    \"components-toolbar-overflow_popup\",\n    isHidden && \"nz-hidden\"\n  );\n\n  const className = classnames(\n    \"components-toolbar-item-container\",\n    \"components-toolbar-overflow-button\",\n    props.className\n  );\n  const buttonClassName = classnames(\n    \"components-toolbar-button-item\",\n    \"components-ellipsis-icon\"\n  );\n  return (\n    <div className={className} ref={targetRef}>\n      <button\n        ref={ref}\n        onClick={props.onClick}\n        className={buttonClassName}\n        style={props.style}\n        title={props.title}\n      >\n        <div className=\"components-icon\">\n          <div className=\"components-ellipsis\" />\n        </div>\n      </button>\n      {/* eslint-disable-next-line deprecation/deprecation */}\n      <Popup\n        className={popupClassName}\n        offset={0}\n        showShadow={false}\n        isOpen={props.open}\n        onClose={props.onClose}\n        position={toToolbarOverflowRelativePosition(props.expandsTo)}\n        target={target}\n      >\n        {props.panelNode}\n      </Popup>\n    </div>\n  );\n}\n\n/** @internal */\nexport function toToolbarOverflowRelativePosition(\n  expandsTo: Direction\n): RelativePosition {\n  switch (expandsTo) {\n    case Direction.Bottom:\n      return RelativePosition.Bottom;\n    case Direction.Left:\n      return RelativePosition.Left;\n    case Direction.Right:\n      return RelativePosition.Right;\n    case Direction.Top:\n      return RelativePosition.Top;\n  }\n}\n"]}

package/lib/components-react/toolbar/Overflow.scss

@@ -0,0 +1,57 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "~@itwin/core-react/lib/core-react/z-index" as *;
+@use "variables" as *;
+
+.components-toolbar-button-item.components-ellipsis-icon {
+  position: relative;
+  $ellipsis-size: 4px;
+  $ellipsis-spacing: 8px;
+
+  > .components-icon {
+    .components-ellipsis {
+      position: relative;
+      width: $ellipsis-size;
+      height: $ellipsis-size;
+      border-radius: 50%;
+      background-color: currentColor;
+    }
+
+    .components-ellipsis:before {
+      content: "";
+      position: absolute;
+      left: -$ellipsis-spacing;
+      width: $ellipsis-size;
+      height: $ellipsis-size;
+      border-radius: 50%;
+      background-color: currentColor;
+    }
+
+    .components-ellipsis:after {
+      content: "";
+      position: absolute;
+      left: $ellipsis-spacing;
+      width: $ellipsis-size;
+      height: $ellipsis-size;
+      border-radius: 50%;
+      background-color: currentColor;
+    }
+  }
+}
+
+.components-toolbar-overflow_popup {
+  border: none;
+  background: none;
+
+  @include uicore-z-index(toolbar-panels);
+
+  transition: visibility var(--iui-duration-2) ease,
+    opacity var(--iui-duration-2) ease;
+
+  &.nz-hidden {
+    opacity: 0;
+    visibility: hidden;
+  }
+}

package/lib/components-react/toolbar/OverflowPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowPanel.d.ts","sourceRoot":"","sources":["../../../src/components-react/toolbar/OverflowPanel.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAuBrD;;GAEG;AAEH,MAAM,WAAW,yBAA0B,SAAQ,WAAW;IAC5D,qBAAqB;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,qBA0DpE"}

package/lib/components-react/toolbar/OverflowPanel.js

@@ -0,0 +1,47 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 "./OverflowPanel.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { calculateBackdropFilterBlur, calculateBoxShadowOpacity, calculateToolbarOpacity, getToolbarBackdropFilter, getToolbarBackgroundColor, getToolbarBoxShadow, TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT, TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT, TOOLBAR_OPACITY_DEFAULT, useWidgetOpacityContext, } from "@itwin/core-react/internal";
+import { ToolbarOpacitySetting, useToolbarWithOverflowDirectionContext, } from "./InternalToolbarComponent.js";
+import { DirectionHelpers, OrthogonalDirectionHelpers, } from "./utilities/Direction.js";
+/** Displays overflown tool settings.
+ * @internal
+ */
+export function ToolbarOverflowPanel(props) {
+    const { toolbarOpacitySetting, openPopupCount, overflowDisplayActive, expandsTo, overflowExpandsTo, overflowDirection, } = useToolbarWithOverflowDirectionContext();
+    const { proximityScale } = useWidgetOpacityContext();
+    const useTransparentBackground = toolbarOpacitySetting === ToolbarOpacitySetting.Transparent;
+    let toolbarOpacity = useTransparentBackground ? 0 : TOOLBAR_OPACITY_DEFAULT;
+    let boxShadowOpacity = useTransparentBackground
+        ? 0
+        : TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT;
+    let filterBlur = useTransparentBackground
+        ? 0
+        : TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT;
+    let showSeparators = toolbarOpacitySetting === ToolbarOpacitySetting.Transparent ? false : true;
+    if (toolbarOpacitySetting === ToolbarOpacitySetting.Proximity &&
+        openPopupCount < 1 &&
+        !overflowDisplayActive) {
+        toolbarOpacity = calculateToolbarOpacity(proximityScale);
+        boxShadowOpacity = calculateBoxShadowOpacity(proximityScale);
+        filterBlur = calculateBackdropFilterBlur(proximityScale);
+        if (proximityScale < 0.25)
+            showSeparators = false;
+    }
+    const divStyle = {
+        backgroundColor: getToolbarBackgroundColor(toolbarOpacity),
+        boxShadow: getToolbarBoxShadow(boxShadowOpacity),
+        backdropFilter: getToolbarBackdropFilter(filterBlur),
+        ...props.style,
+    };
+    const className = classnames("components-toolbar-overflow-panel", "components-toolbar-items-container", OrthogonalDirectionHelpers.getCssClassName(overflowDirection), `${OrthogonalDirectionHelpers.getCssClassName(overflowDirection)}-${DirectionHelpers.getCssClassName(expandsTo)}`, showSeparators && "components-toolbar-show-decorators", DirectionHelpers.getCssClassName(overflowExpandsTo), props.className);
+    return (React.createElement("div", { className: className, style: divStyle }, props.children));
+}
+//# sourceMappingURL=OverflowPanel.js.map

package/lib/components-react/toolbar/OverflowPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowPanel.js","sourceRoot":"","sources":["../../../src/components-react/toolbar/OverflowPanel.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAC9B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,2BAA2B,EAC3B,yBAAyB,EACzB,uBAAuB,EACvB,wBAAwB,EACxB,yBAAyB,EACzB,mBAAmB,EACnB,oCAAoC,EACpC,kCAAkC,EAClC,uBAAuB,EACvB,uBAAuB,GACxB,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EACL,qBAAqB,EACrB,sCAAsC,GACvC,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACL,gBAAgB,EAChB,0BAA0B,GAC3B,MAAM,0BAA0B,CAAC;AAWlC;;GAEG;AACH,MAAM,UAAU,oBAAoB,CAAC,KAAgC;IACnE,MAAM,EACJ,qBAAqB,EACrB,cAAc,EACd,qBAAqB,EACrB,SAAS,EACT,iBAAiB,EACjB,iBAAiB,GAClB,GAAG,sCAAsC,EAAE,CAAC;IAC7C,MAAM,EAAE,cAAc,EAAE,GAAG,uBAAuB,EAAE,CAAC;IAErD,MAAM,wBAAwB,GAC5B,qBAAqB,KAAK,qBAAqB,CAAC,WAAW,CAAC;IAC9D,IAAI,cAAc,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,uBAAuB,CAAC;IAC5E,IAAI,gBAAgB,GAAG,wBAAwB;QAC7C,CAAC,CAAC,CAAC;QACH,CAAC,CAAC,kCAAkC,CAAC;IACvC,IAAI,UAAU,GAAG,wBAAwB;QACvC,CAAC,CAAC,CAAC;QACH,CAAC,CAAC,oCAAoC,CAAC;IACzC,IAAI,cAAc,GAChB,qBAAqB,KAAK,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IAE7E,IACE,qBAAqB,KAAK,qBAAqB,CAAC,SAAS;QACzD,cAAc,GAAG,CAAC;QAClB,CAAC,qBAAqB,EACtB,CAAC;QACD,cAAc,GAAG,uBAAuB,CAAC,cAAc,CAAC,CAAC;QACzD,gBAAgB,GAAG,yBAAyB,CAAC,cAAc,CAAC,CAAC;QAC7D,UAAU,GAAG,2BAA2B,CAAC,cAAc,CAAC,CAAC;QACzD,IAAI,cAAc,GAAG,IAAI;YAAE,cAAc,GAAG,KAAK,CAAC;IACpD,CAAC;IAED,MAAM,QAAQ,GAAwB;QACpC,eAAe,EAAE,yBAAyB,CAAC,cAAc,CAAC;QAC1D,SAAS,EAAE,mBAAmB,CAAC,gBAAgB,CAAC;QAChD,cAAc,EAAE,wBAAwB,CAAC,UAAU,CAAC;QACpD,GAAG,KAAK,CAAC,KAAK;KACf,CAAC;IAEF,MAAM,SAAS,GAAG,UAAU,CAC1B,mCAAmC,EACnC,oCAAoC,EACpC,0BAA0B,CAAC,eAAe,CAAC,iBAAiB,CAAC,EAC7D,GAAG,0BAA0B,CAAC,eAAe,CAC3C,iBAAiB,CAClB,IAAI,gBAAgB,CAAC,eAAe,CAAC,SAAS,CAAC,EAAE,EAClD,cAAc,IAAI,oCAAoC,EACtD,gBAAgB,CAAC,eAAe,CAAC,iBAAiB,CAAC,EACnD,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,IACvC,KAAK,CAAC,QAAQ,CACX,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 \"./OverflowPanel.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport {\n  calculateBackdropFilterBlur,\n  calculateBoxShadowOpacity,\n  calculateToolbarOpacity,\n  getToolbarBackdropFilter,\n  getToolbarBackgroundColor,\n  getToolbarBoxShadow,\n  TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT,\n  TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT,\n  TOOLBAR_OPACITY_DEFAULT,\n  useWidgetOpacityContext,\n} from \"@itwin/core-react/internal\";\n\nimport {\n  ToolbarOpacitySetting,\n  useToolbarWithOverflowDirectionContext,\n} from \"./InternalToolbarComponent.js\";\nimport {\n  DirectionHelpers,\n  OrthogonalDirectionHelpers,\n} from \"./utilities/Direction.js\";\n\n/** Properties of [[ToolbarOverflowPanel]] component.\n * @internal\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface ToolbarOverflowPanelProps extends CommonProps {\n  /** Panel content. */\n  children?: React.ReactNode;\n}\n\n/** Displays overflown tool settings.\n * @internal\n */\nexport function ToolbarOverflowPanel(props: ToolbarOverflowPanelProps) {\n  const {\n    toolbarOpacitySetting,\n    openPopupCount,\n    overflowDisplayActive,\n    expandsTo,\n    overflowExpandsTo,\n    overflowDirection,\n  } = useToolbarWithOverflowDirectionContext();\n  const { proximityScale } = useWidgetOpacityContext();\n\n  const useTransparentBackground =\n    toolbarOpacitySetting === ToolbarOpacitySetting.Transparent;\n  let toolbarOpacity = useTransparentBackground ? 0 : TOOLBAR_OPACITY_DEFAULT;\n  let boxShadowOpacity = useTransparentBackground\n    ? 0\n    : TOOLBAR_BOX_SHADOW_OPACITY_DEFAULT;\n  let filterBlur = useTransparentBackground\n    ? 0\n    : TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT;\n  let showSeparators =\n    toolbarOpacitySetting === ToolbarOpacitySetting.Transparent ? false : true;\n\n  if (\n    toolbarOpacitySetting === ToolbarOpacitySetting.Proximity &&\n    openPopupCount < 1 &&\n    !overflowDisplayActive\n  ) {\n    toolbarOpacity = calculateToolbarOpacity(proximityScale);\n    boxShadowOpacity = calculateBoxShadowOpacity(proximityScale);\n    filterBlur = calculateBackdropFilterBlur(proximityScale);\n    if (proximityScale < 0.25) showSeparators = false;\n  }\n\n  const divStyle: React.CSSProperties = {\n    backgroundColor: getToolbarBackgroundColor(toolbarOpacity),\n    boxShadow: getToolbarBoxShadow(boxShadowOpacity),\n    backdropFilter: getToolbarBackdropFilter(filterBlur),\n    ...props.style,\n  };\n\n  const className = classnames(\n    \"components-toolbar-overflow-panel\",\n    \"components-toolbar-items-container\",\n    OrthogonalDirectionHelpers.getCssClassName(overflowDirection),\n    `${OrthogonalDirectionHelpers.getCssClassName(\n      overflowDirection\n    )}-${DirectionHelpers.getCssClassName(expandsTo)}`,\n    showSeparators && \"components-toolbar-show-decorators\",\n    DirectionHelpers.getCssClassName(overflowExpandsTo),\n    props.className\n  );\n\n  return (\n    <div className={className} style={divStyle}>\n      {props.children}\n    </div>\n  );\n}\n"]}

package/lib/components-react/toolbar/OverflowPanel.scss

@@ -0,0 +1,37 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "variables" as *;
+
+.components-toolbar-overflow-panel {
+  background: var(--iui-color-background);
+  border-radius: var(--iui-border-radius-1);
+  display: flex;
+  height: unset;
+  width: fit-content;
+  padding: unset;
+
+  &.components-vertical-components-direction-bottom {
+    right: -$components-items-border-width;
+    flex-direction: column;
+    top: 100%;
+  }
+
+  &.components-vertical-components-direction-top {
+    right: -$components-items-border-width;
+    flex-direction: column;
+    bottom: 100%;
+  }
+
+  &.components-horizontal-components-direction-right {
+    left: 100%;
+    bottom: -$components-items-border-width;
+    flex-direction: row;
+  }
+  &.components-horizontal-components-direction-left {
+    right: 100%;
+    bottom: -$components-items-border-width;
+    flex-direction: row;
+  }
+}

package/lib/components-react/toolbar/PopupItem.d.ts

@@ -0,0 +1,55 @@
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import "./PopupItem.scss";
+import * as React from "react";
+import type { ActionButton, RelativePosition } from "@itwin/appui-abstract";
+import type { ToolbarButtonItemProps } from "./Item.js";
+/**
+ * @public
+ * @deprecated in 4.16.0. Props of deprecated {@link ToolbarPopupContext} context.
+ */
+export interface ToolbarPopupContextProps {
+    readonly closePanel: () => void;
+    readonly setSelectedItem?: (buttonItem: ActionButton) => void;
+}
+/** Context used by Toolbar items in popups to close the popup panel.
+ * @public
+ * @deprecated in 4.16.0. Used in deprecated {@link PopupItem} and {@link PopupItemWithDrag} components.
+ */
+export declare const ToolbarPopupContext: React.Context<ToolbarPopupContextProps>;
+/** React hook used to retrieve the ToolbarPopupContext.
+ * @public
+ * @deprecated in 4.16.0. Uses deprecated {@link ToolbarPopupContext} context.
+ */
+export declare function useToolbarPopupContext(): ToolbarPopupContextProps;
+/** Properties of [[PopupItem]] component.
+ * @public
+ * @deprecated in 4.16.0. Props of deprecated {@link PopupItem} component.
+ */
+export interface PopupItemProps extends ToolbarButtonItemProps {
+    /** Describes if expandable item triangle indicator should be hidden. */
+    hideIndicator?: boolean;
+    /** Panel of the toolbar. */
+    panel?: React.ReactNode;
+    /** If true the popup panel is mounted once and unmounted when button is unmounted. If false the
+     * content node is unmounted each time the popup is closed. */
+    keepContentsMounted?: boolean;
+}
+/** Popup toolbar item that displays a panel.
+ * @public
+ * @deprecated in 4.16.0. Used internally to construct toolbars.
+ */
+export declare function PopupItem(props: PopupItemProps): React.JSX.Element;
+interface PopupItemPopupProps {
+    children?: React.ReactNode;
+    isOpen?: boolean;
+    onClose(): void;
+    position: RelativePosition;
+    target?: HTMLElement;
+    keepContentsMounted?: boolean;
+}
+/** @internal */
+export declare function PopupItemPopup(props: PopupItemPopupProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=PopupItem.d.ts.map