packageDocumentation module import "./ItemWrapper.scss" ; import classnames from "classnames" ; import * as React from "react" ; import { CommonProps , useResizeObserver } from "@itwin/core-react" ; import { useToolbarWithOverflowDirectionContext , useToolItemEntryContext } from "./ToolbarWithOverflow" ; import { DirectionHelpers , OrthogonalDirectionHelpers } from "./utilities/Direction" ; internal export interface ItemWrapperProps extends CommonProps { /** Tool setting content. */ children ? : React . ReactNode ; } internal export function ItemWrapper ( props ) { const { expandsTo , direction , overflowExpandsTo , overflowDirection } = useToolbarWithOverflowDirectionContext ( ) ; const { hasOverflow , onResize , useHeight } = useToolItemEntryContext ( ) ; const ref = useResizeObserverSingleDimension < HTMLDivElement > ( 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 ( < div className = { className } ref = { ref } style = { props . style } > { props . children } < /div>); } internal export function useResizeObserverSingleDimension < T extends Element > ( onResize , useHeight ) { const handleResize = React . useCallback ( ( w , h ) => { if ( useHeight ) return onResize ( h ) ; return onResize ( w ) ; } , [ useHeight , onResize ] ) ; return useResizeObserver < T > ( handleResize ) ; }