@itwin/components-react 4.0.0-dev.12 → 4.0.0-dev.14

package/lib/esm/components-react/toolbar/Item.d.ts

@@ -1,38 +1,38 @@
-/** @packageDocumentation
- * @module Toolbar
- */
-import "./Item.scss";
-import * as React from "react";
-import { CommonProps } from "@itwin/core-react";
-/** Properties of [[ToolbarButtonItem]] component.
- * @public
- */
-export interface ToolbarButtonItemProps extends CommonProps {
-    /** button icon. */
-    icon?: React.ReactNode;
-    /** Describes if item is active. */
-    isActive?: boolean;
-    /** Describes if the item is disabled. */
-    isDisabled?: boolean;
-    /** Function called when the item is clicked. */
-    onClick?: () => void;
-    /** Function called when a key is pressed. */
-    onKeyDown?: (e: React.KeyboardEvent) => void;
-    /** Title for the item. */
-    title: string;
-    /** A badge to draw. */
-    badge?: React.ReactNode;
-    /** If true add a gap before button. Default to false. */
-    addGroupSeparator?: boolean;
-    /** value added to DOM element as a data attribute to hold name of items provider. If specified in `FrontstageProvider` then this will be undefined */
-    providerId?: string;
-    /** value added to DOM element as a data attribute, shows 0 is undefined */
-    itemPriority?: number;
-    /** value added to DOM element as a data attribute */
-    groupPriority?: number;
-}
-/** Toolbar item component. Used in [[Toolbar]] component.
- * @public
- */
-export declare const ToolbarButtonItem: React.MemoExoticComponent<React.FC<ToolbarButtonItemProps>>;
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import "./Item.scss";
+import * as React from "react";
+import { CommonProps } from "@itwin/core-react";
+/** Properties of [[ToolbarButtonItem]] component.
+ * @public
+ */
+export interface ToolbarButtonItemProps extends CommonProps {
+    /** button icon. */
+    icon?: React.ReactNode;
+    /** Describes if item is active. */
+    isActive?: boolean;
+    /** Describes if the item is disabled. */
+    isDisabled?: boolean;
+    /** Function called when the item is clicked. */
+    onClick?: () => void;
+    /** Function called when a key is pressed. */
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+    /** Title for the item. */
+    title: string;
+    /** A badge to draw. */
+    badge?: React.ReactNode;
+    /** If true add a gap before button. Default to false. */
+    addGroupSeparator?: boolean;
+    /** value added to DOM element as a data attribute to hold name of items provider. If specified in `FrontstageProvider` then this will be undefined */
+    providerId?: string;
+    /** value added to DOM element as a data attribute, shows 0 is undefined */
+    itemPriority?: number;
+    /** value added to DOM element as a data attribute */
+    groupPriority?: number;
+}
+/** Toolbar item component. Used in [[Toolbar]] component.
+ * @public
+ */
+export declare const ToolbarButtonItem: React.MemoExoticComponent<React.FC<ToolbarButtonItemProps>>;
 //# sourceMappingURL=Item.d.ts.map

package/lib/esm/components-react/toolbar/Item.js

@@ -1,22 +1,22 @@
-/*---------------------------------------------------------------------------------------------
-* 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 "./Item.scss";
-import classnames from "classnames";
-import * as React from "react";
-/** Toolbar item component. Used in [[Toolbar]] component.
- * @public
- */
-// eslint-disable-next-line react/display-name
-export const ToolbarButtonItem = React.memo((props) => {
-    const className = classnames("components-toolbar-button-item", props.isActive && "components-active", props.isDisabled && "components-disabled", props.className);
-    return (React.createElement("button", { "data-item-id": props.itemId, "data-item-type": "action-tool-button", "data-item-group-priority": props.groupPriority, "data-item-priority": props.itemPriority, "data-item-provider-id": props.providerId, disabled: props.isDisabled, onClick: props.onClick, onKeyDown: props.onKeyDown, className: className, style: props.style, title: props.title },
-        React.createElement("div", { className: "components-icon" }, props.icon),
-        props.badge &&
-            React.createElement("div", { className: "components-badge" }, props.badge)));
-});
+/*---------------------------------------------------------------------------------------------
+* 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 "./Item.scss";
+import classnames from "classnames";
+import * as React from "react";
+/** Toolbar item component. Used in [[Toolbar]] component.
+ * @public
+ */
+// eslint-disable-next-line react/display-name
+export const ToolbarButtonItem = React.memo((props) => {
+    const className = classnames("components-toolbar-button-item", props.isActive && "components-active", props.isDisabled && "components-disabled", props.className);
+    return (React.createElement("button", { "data-item-id": props.itemId, "data-item-type": "action-tool-button", "data-item-group-priority": props.groupPriority, "data-item-priority": props.itemPriority, "data-item-provider-id": props.providerId, disabled: props.isDisabled, onClick: props.onClick, onKeyDown: props.onKeyDown, className: className, style: props.style, title: props.title },
+        React.createElement("div", { className: "components-icon" }, props.icon),
+        props.badge &&
+            React.createElement("div", { className: "components-badge" }, props.badge)));
+});
 //# sourceMappingURL=Item.js.map

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

@@ -1,20 +1,20 @@
-/** @packageDocumentation
- * @module ToolSettings
- */
-import "./ItemWrapper.scss";
-import * as React from "react";
-import { CommonProps } from "@itwin/core-react";
-/** Properties of [[ItemWrapper]] component.
- * @internal future
- */
-export interface ItemWrapperProps extends CommonProps {
-    /** Tool setting content. */
-    children?: React.ReactNode;
-}
-/** Used in a [[ItemWrapper]] component to display a setting.
- * @internal future
- */
-export declare function ItemWrapper(props: ItemWrapperProps): JSX.Element;
-/** @internal */
-export declare function useResizeObserverSingleDimension<T extends Element>(onResize: (size: number) => void, useHeight: boolean): (instance: Element | null) => void;
+/** @packageDocumentation
+ * @module ToolSettings
+ */
+import "./ItemWrapper.scss";
+import * as React from "react";
+import { CommonProps } from "@itwin/core-react";
+/** Properties of [[ItemWrapper]] component.
+ * @internal future
+ */
+export interface ItemWrapperProps extends CommonProps {
+    /** Tool setting content. */
+    children?: React.ReactNode;
+}
+/** Used in a [[ItemWrapper]] component to display a setting.
+ * @internal future
+ */
+export declare function ItemWrapper(props: ItemWrapperProps): JSX.Element;
+/** @internal */
+export declare function useResizeObserverSingleDimension<T extends Element>(onResize: (size: number) => void, useHeight: boolean): (instance: Element | null) => void;
 //# sourceMappingURL=ItemWrapper.d.ts.map

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

@@ -1,33 +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";
-import { useToolbarWithOverflowDirectionContext, useToolItemEntryContext } from "./ToolbarWithOverflow";
-import { DirectionHelpers, OrthogonalDirectionHelpers } from "./utilities/Direction";
-/** 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);
-}
+/*---------------------------------------------------------------------------------------------
+* 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";
+import { useToolbarWithOverflowDirectionContext, useToolItemEntryContext } from "./ToolbarWithOverflow";
+import { DirectionHelpers, OrthogonalDirectionHelpers } from "./utilities/Direction";
+/** 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/esm/components-react/toolbar/Items.d.ts

@@ -1,21 +1,21 @@
-/** @packageDocumentation
- * @module Toolbar
- */
-import "./Items.scss";
-import * as React from "react";
-import { CommonProps } from "@itwin/core-react";
-import { OrthogonalDirection } from "./utilities/Direction";
-/** 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): JSX.Element;
+/** @packageDocumentation
+ * @module Toolbar
+ */
+import "./Items.scss";
+import * as React from "react";
+import { CommonProps } from "@itwin/core-react";
+import { OrthogonalDirection } from "./utilities/Direction";
+/** 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): JSX.Element;
 //# sourceMappingURL=Items.d.ts.map

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

@@ -1,51 +1,51 @@
-/*---------------------------------------------------------------------------------------------
-* 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";
-import { ToolbarOpacitySetting, useToolbarWithOverflowDirectionContext } from "./ToolbarWithOverflow";
-import { OrthogonalDirectionHelpers } from "./utilities/Direction";
-/** Toolbar items container. Used in [[ToolbarWithOverflow]] component.
- * @internal
- */
-export function ToolbarItems(props) {
-    const ref = React.useRef(null);
-    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 isInitialMount = React.useRef(true);
-    const { onElementRef, proximityScale } = useWidgetOpacityContext();
-    React.useEffect(() => {
-        // istanbul ignore else
-        if (isInitialMount.current) {
-            isInitialMount.current = false;
-            onElementRef(ref);
-        }
-    }, [onElementRef]);
-    if (toolbarOpacitySetting === ToolbarOpacitySetting.Proximity && openPopupCount < 1 && !overflowDisplayActive) {
-        toolbarOpacity = calculateToolbarOpacity(proximityScale);
-        boxShadowOpacity = calculateBoxShadowOpacity(proximityScale);
-        filterBlur = calculateBackdropFilterBlur(proximityScale);
-        // istanbul ignore next
-        if (proximityScale < .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));
-}
+/*---------------------------------------------------------------------------------------------
+* 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";
+import { ToolbarOpacitySetting, useToolbarWithOverflowDirectionContext } from "./ToolbarWithOverflow";
+import { OrthogonalDirectionHelpers } from "./utilities/Direction";
+/** Toolbar items container. Used in [[ToolbarWithOverflow]] component.
+ * @internal
+ */
+export function ToolbarItems(props) {
+    const ref = React.useRef(null);
+    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 isInitialMount = React.useRef(true);
+    const { onElementRef, proximityScale } = useWidgetOpacityContext();
+    React.useEffect(() => {
+        // istanbul ignore else
+        if (isInitialMount.current) {
+            isInitialMount.current = false;
+            onElementRef(ref);
+        }
+    }, [onElementRef]);
+    if (toolbarOpacitySetting === ToolbarOpacitySetting.Proximity && openPopupCount < 1 && !overflowDisplayActive) {
+        toolbarOpacity = calculateToolbarOpacity(proximityScale);
+        boxShadowOpacity = calculateBoxShadowOpacity(proximityScale);
+        filterBlur = calculateBackdropFilterBlur(proximityScale);
+        // istanbul ignore next
+        if (proximityScale < .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/esm/components-react/toolbar/Overflow.d.ts

@@ -1,32 +1,32 @@
-/** @packageDocumentation
- * @module ToolSettings
- */
-import "./Overflow.scss";
-import * as React from "react";
-import { CommonProps, NoChildrenProps } from "@itwin/core-react";
-import { Direction } from "./utilities/Direction";
-import { RelativePosition } from "@itwin/appui-abstract";
-/** Properties of [[ToolbarOverflowButton]] component.
- * @internal
- */
-export interface ToolbarOverflowButtonProps extends CommonProps, 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): JSX.Element;
-/** @internal */
-export declare function toToolbarOverflowRelativePosition(expandsTo: Direction): RelativePosition;
+/** @packageDocumentation
+ * @module ToolSettings
+ */
+import "./Overflow.scss";
+import * as React from "react";
+import { CommonProps, NoChildrenProps } from "@itwin/core-react";
+import { Direction } from "./utilities/Direction";
+import { RelativePosition } from "@itwin/appui-abstract";
+/** Properties of [[ToolbarOverflowButton]] component.
+ * @internal
+ */
+export interface ToolbarOverflowButtonProps extends CommonProps, 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): JSX.Element;
+/** @internal */
+export declare function toToolbarOverflowRelativePosition(expandsTo: Direction): RelativePosition;
 //# sourceMappingURL=Overflow.d.ts.map

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

@@ -1,46 +1,46 @@
-/*---------------------------------------------------------------------------------------------
-* 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, useRefState } from "@itwin/core-react";
-import { useToolbarPopupAutoHideContext, useToolItemEntryContext } from "./ToolbarWithOverflow";
-import { useResizeObserverSingleDimension } from "./ItemWrapper";
-import { Direction } from "./utilities/Direction";
-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;
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* 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, useRefState } from "@itwin/core-react";
+import { useToolbarPopupAutoHideContext, useToolItemEntryContext } from "./ToolbarWithOverflow";
+import { useResizeObserverSingleDimension } from "./ItemWrapper";
+import { Direction } from "./utilities/Direction";
+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/esm/components-react/toolbar/OverflowPanel.d.ts

@@ -1,18 +1,18 @@
-/** @packageDocumentation
- * @module ToolSettings
- */
-import "./OverflowPanel.scss";
-import * as React from "react";
-import { CommonProps } from "@itwin/core-react";
-/** Properties of [[ToolbarOverflowPanel]] component.
- * @internal
- */
-export interface ToolbarOverflowPanelProps extends CommonProps {
-    /** Panel content. */
-    children?: React.ReactNode;
-}
-/** Displays overflown tool settings.
- * @internal
- */
-export declare function ToolbarOverflowPanel(props: ToolbarOverflowPanelProps): JSX.Element;
+/** @packageDocumentation
+ * @module ToolSettings
+ */
+import "./OverflowPanel.scss";
+import * as React from "react";
+import { CommonProps } from "@itwin/core-react";
+/** Properties of [[ToolbarOverflowPanel]] component.
+ * @internal
+ */
+export interface ToolbarOverflowPanelProps extends CommonProps {
+    /** Panel content. */
+    children?: React.ReactNode;
+}
+/** Displays overflown tool settings.
+ * @internal
+ */
+export declare function ToolbarOverflowPanel(props: ToolbarOverflowPanelProps): JSX.Element;
 //# sourceMappingURL=OverflowPanel.d.ts.map