How to use the dom-helpers/scrollbarSize function in dom-helpers

if (!isVerticallyScrollable) {
      // in case the the table is not scrollable - meaning there indeed is more
      // horizontal space then rows to fill it up with - set the height to the
      // exact height of all rows so there is no white space left below the table
      const horizontalScrollBarWidth = isHorizontallyScrollable
        ? getScrollbarSize()
        : 0;
      this.setState({ height: tableContentHeight + horizontalScrollBarWidth });
    } else if (this.state.height !== containerHeight) {
      // reset the height to the max height because rows were added that now do
      // fill up the max height
      this.setState({ height: containerHeight });
    }

    const verticalScrollBarWidth = isVerticallyScrollable
      ? getScrollbarSize()
      : 0;
    const remainingWidth =
      containerWidth - tableContentWidth - verticalScrollBarWidth;
    if (remainingWidth > 0) {
      // when the content of the table is smaller than the available width
      // we can distribute the remaining space among columns that have
      // specified flexGrow.
      // if there are none, the table shouldn't take up the full width
      const shouldFillHorizontalSpace = this.props.columns.some(
        col => col.flexGrow
      );
      if (shouldFillHorizontalSpace) {
        this.setState({
          width: containerWidth,
          // calculate the remaining width to be able to evenly distribute
          // it among the flex grow columns

const isVerticallyScrollable = tableContentHeight > containerHeight;

    // find out whether there is more horizontal space than we can fill up with
    // columns
    const tableContentWidth = this.calcTableContentWidth({
      measurementCache,
      containerWidth,
    });
    const isHorizontallyScrollable = tableContentWidth > containerWidth;

    if (!isVerticallyScrollable) {
      // in case the the table is not scrollable - meaning there indeed is more
      // horizontal space then rows to fill it up with - set the height to the
      // exact height of all rows so there is no white space left below the table
      const horizontalScrollBarWidth = isHorizontallyScrollable
        ? getScrollbarSize()
        : 0;
      this.setState({ height: tableContentHeight + horizontalScrollBarWidth });
    } else if (this.state.height !== containerHeight) {
      // reset the height to the max height because rows were added that now do
      // fill up the max height
      this.setState({ height: containerHeight });
    }

    const verticalScrollBarWidth = isVerticallyScrollable
      ? getScrollbarSize()
      : 0;
    const remainingWidth =
      containerWidth - tableContentWidth - verticalScrollBarWidth;
    if (remainingWidth > 0) {
      // when the content of the table is smaller than the available width
      // we can distribute the remaining space among columns that have

constructor(...args) {
    super(...args);

    // If this component is being rendered server-side, getScrollbarSize() will return undefined.
    // We handle this case in componentDidMount()
    this._scrollbarSize = getScrollbarSize();
    if (this._scrollbarSize === undefined) {
      this._scrollbarSizeMeasured = false;
      this._scrollbarSize = 0;
    } else {
      this._scrollbarSizeMeasured = true;
    }
  }

componentDidMount() {
    const {cellLayoutManager, scrollLeft, scrollToCell, scrollTop} = this.props;

    // If this component was first rendered server-side, scrollbar size will be undefined.
    // In that event we need to remeasure.
    if (!this._scrollbarSizeMeasured) {
      this._scrollbarSize = getScrollbarSize();
      this._scrollbarSizeMeasured = true;
      this.setState({});
    }

    if (scrollToCell >= 0) {
      this._updateScrollPositionForScrollToCell();
    } else if (scrollLeft >= 0 || scrollTop >= 0) {
      this._setScrollPosition({scrollLeft, scrollTop});
    }

    // Update onSectionRendered callback.
    this._invokeOnSectionRenderedHelper();

    const {
      height: totalHeight,
      width: totalWidth,

it('should set add to existing container padding', () => {
      let modal = new Modal({});
      manager.add(modal, container);

      expect(container.style.paddingRight).to.equal(
        `${getScrollbarSize() + 20}px`,
      );
    });

className={styles.LeftSideGridContainer}
                  style={{
                    position: 'absolute',
                    left: 0,
                    top: rowHeight,
                    color: leftColor,
                    backgroundColor: `rgb(${leftBackgroundColor.r},${leftBackgroundColor.g},${leftBackgroundColor.b})`,
                  }}>
                  
                
                <div>
                  
                    {({width}) =&gt; (
                      <div>
                        </div></div>

this.contentRef.current.clientHeight
    let widths = this._widths || []

    this._widths = [
      getWidth(firstRow.children[0]),
      getWidth(firstRow.children[1]),
    ]

    if (widths[0] !== this._widths[0] || widths[1] !== this._widths[1]) {
      this.dateColRef.current.style.width = this._widths[0] + 'px'
      this.timeColRef.current.style.width = this._widths[1] + 'px'
    }

    if (isOverflowing) {
      addClass(header, 'rbc-header-overflowing')
      header.style.marginRight = scrollbarSize() + 'px'
    } else {
      removeClass(header, 'rbc-header-overflowing')
    }
  }
}

useEffect(() => {
      const bodyElement = document.querySelector('body');
      let previousBodyPaddingRight;

      if (isOverflowing(bodyElement)) {
        const scrollbarSize = getScrollbarSize();
        const bodyPaddingRight = parseInt(css(bodyElement, 'paddingRight') || 0, 10);

        previousBodyPaddingRight = bodyElement.style.paddingRight;
        bodyElement.style.paddingRight = `${bodyPaddingRight + scrollbarSize}px`;
      }

      const previousBodyOverflow = bodyElement.style.overflow;

      bodyElement.style.overflow = 'hidden';

      return () => {
        bodyElement.style.overflow = previousBodyOverflow;
        bodyElement.style.paddingRight = previousBodyPaddingRight;
      };
    }, []);

setContainerStyle(containerState, container) {
    super.setContainerStyle(containerState, container);

    if (!containerState.overflowing) return;
    const size = getScrollbarSize();

    qsa(container, Selector.FIXED_CONTENT).forEach(el =>
      this.adjustAndStore('paddingRight', el, size),
    );
    qsa(container, Selector.STICKY_CONTENT).forEach(el =>
      this.adjustAndStore('margingRight', el, -size),
    );
    qsa(container, Selector.NAVBAR_TOGGLER).forEach(el =>
      this.adjustAndStore('margingRight', el, size),
    );
  }

<label>
					<input checked="{" value="{" type="{" name="posts">
					<span>
						{ decodeEntities( item.title || this.props.translate( 'Untitled' ) ) }
						{ this.isTypeLabelsVisible() &amp;&amp; (
							<span style="{">
								{ decodeEntities(
									get( this.props.postTypes, [ item.type, 'labels', 'singular_name' ], '' )
								) }
							</span>
						) }
					</span>
				</label>
				{ children.length &gt; 0 &amp;&amp; (
					<div>
						{ children.map( child =&gt; this.renderItem( child, true ) ) }
					</div>
				) }
			
		);