@itwin/itwinui-react 3.0.0-dev.4 → 3.0.0-dev.5

package/esm/core/utils/components/VirtualScroll.js

@@ -4,48 +4,64 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { mergeRefs, useResizeObserver, useIsomorphicLayoutEffect, } from '../hooks/index.js';
-const unstable_batchedUpdates = ReactDOM.unstable_batchedUpdates ?? ((cb) => void cb());
+import {
+  mergeRefs,
+  useResizeObserver,
+  useIsomorphicLayoutEffect,
+} from '../hooks/index.js';
+const unstable_batchedUpdates =
+  ReactDOM.unstable_batchedUpdates ?? ((cb) => void cb());
 const getScrollableParent = (element, ownerDocument = document) => {
-    if (!element || element === ownerDocument.body) {
-        return ownerDocument.body;
-    }
-    return isElementScrollable(element)
-        ? element
-        : getScrollableParent(element.parentElement, ownerDocument);
+  if (!element || element === ownerDocument.body) {
+    return ownerDocument.body;
+  }
+  return isElementScrollable(element)
+    ? element
+    : getScrollableParent(element.parentElement, ownerDocument);
 };
 const isElementScrollable = (element) => {
-    return /(auto|scroll|overlay)/.test(getElementStyle(element, 'overflow') +
-        getElementStyle(element, 'overflow-y'));
+  return /(auto|scroll|overlay)/.test(
+    getElementStyle(element, 'overflow') +
+      getElementStyle(element, 'overflow-y'),
+  );
 };
 const getElementStyle = (element, prop) => {
-    return getComputedStyle(element, null).getPropertyValue(prop);
+  return getComputedStyle(element, null).getPropertyValue(prop);
 };
 const getElementHeight = (element) => {
-    return element?.getBoundingClientRect().height ?? 0;
+  return element?.getBoundingClientRect().height ?? 0;
 };
 const getElementHeightWithMargins = (element) => {
-    if (!element) {
-        return undefined;
-    }
-    const margin = parseFloat(getElementStyle(element, 'margin-top')) +
-        parseFloat(getElementStyle(element, 'margin-bottom'));
-    return getElementHeight(element) + (isNaN(margin) ? 0 : margin);
+  if (!element) {
+    return undefined;
+  }
+  const margin =
+    parseFloat(getElementStyle(element, 'margin-top')) +
+    parseFloat(getElementStyle(element, 'margin-bottom'));
+  return getElementHeight(element) + (isNaN(margin) ? 0 : margin);
 };
 const getNumberOfNodesInHeight = (childHeight, totalHeight) => {
-    if (!childHeight) {
-        return 0;
-    }
-    return Math.floor(totalHeight / childHeight);
+  if (!childHeight) {
+    return 0;
+  }
+  return Math.floor(totalHeight / childHeight);
 };
 const getTranslateValue = (childHeight, startIndex) => {
-    if (startIndex > 0) {
-        return childHeight * startIndex;
-    }
-    return 0;
+  if (startIndex > 0) {
+    return childHeight * startIndex;
+  }
+  return 0;
 };
-const getVisibleNodeCount = (childHeight, startIndex, childrenLength, scrollContainer) => {
-    return Math.min(childrenLength - startIndex, getNumberOfNodesInHeight(childHeight, getElementHeight(scrollContainer)));
+const getVisibleNodeCount = (
+  childHeight,
+  startIndex,
+  childrenLength,
+  scrollContainer,
+) => {
+  return Math.min(
+    childrenLength - startIndex,
+    getNumberOfNodesInHeight(childHeight, getElementHeight(scrollContainer)),
+  );
 };
 /**
  * `VirtualScroll` component is used to render a huge amount of items in the DOM. It renders only the ones which are visible
@@ -69,9 +85,12 @@ const getVisibleNodeCount = (childHeight, startIndex, childrenLength, scrollCont
  * @private
  */
 export const VirtualScroll = React.forwardRef((props, ref) => {
-    const { innerProps, outerProps, visibleChildren } = useVirtualization(props);
-    return (React.createElement("div", { ...outerProps, ref: ref },
-        React.createElement("div", { ...innerProps }, visibleChildren)));
+  const { innerProps, outerProps, visibleChildren } = useVirtualization(props);
+  return React.createElement(
+    'div',
+    { ...outerProps, ref: ref },
+    React.createElement('div', { ...innerProps }, visibleChildren),
+  );
 });
 /**
  * `useVirtualization` is used for efficiently rendering only the visible rows from a large list.
@@ -94,193 +113,253 @@ export const VirtualScroll = React.forwardRef((props, ref) => {
  * @private
  */
 export const useVirtualization = (props) => {
-    const { itemsLength, itemRenderer, bufferSize = 10, scrollToIndex, style, ...rest } = props;
-    const [startNode, setStartNode] = React.useState(0);
-    const [visibleNodeCount, setVisibleNodeCount] = React.useState(0);
-    const scrollContainer = React.useRef();
-    const parentRef = React.useRef(null);
-    const childHeight = React.useRef({ first: 0, middle: 0, last: 0 });
-    const onScrollRef = React.useRef();
-    // Used only to recalculate on resize
-    const [scrollContainerHeight, setScrollContainerHeight] = React.useState(0);
-    const visibleIndex = React.useRef({ start: 0, end: 0 });
-    // Used to mark when scroll container has height (updated by resize observer)
-    // because before that calculations are not right
-    const [isMounted, setIsMounted] = React.useState(false);
-    const getScrollableContainer = () => scrollContainer.current ??
-        parentRef.current?.ownerDocument.scrollingElement;
-    const visibleChildren = React.useMemo(() => {
-        const arr = [];
-        const endIndex = Math.min(itemsLength, startNode + visibleNodeCount + bufferSize * 2);
-        for (let i = startNode; i < endIndex; i++) {
-            arr.push(itemRenderer(i));
-        }
-        return arr;
-    }, [itemsLength, itemRenderer, bufferSize, startNode, visibleNodeCount]);
-    const updateChildHeight = React.useCallback(() => {
-        if (!parentRef.current || !visibleChildren.length) {
-            return;
-        }
-        const firstChild = parentRef.current.children.item(0);
-        const secondChild = parentRef.current.children.item(1);
-        const lastChild = parentRef.current.children.item(parentRef.current.children.length - 1);
-        const firstChildHeight = Number(getElementHeightWithMargins(firstChild)?.toFixed(2) ?? 0);
-        childHeight.current = {
-            first: firstChildHeight,
-            middle: Number(getElementHeightWithMargins(secondChild)?.toFixed(2) ??
-                firstChildHeight),
-            last: Number(getElementHeightWithMargins(lastChild)?.toFixed(2) ?? firstChildHeight),
-        };
-    }, [visibleChildren.length]);
-    const onResize = React.useCallback(({ height }) => {
-        // Initial value returned by resize observer is 0
-        // So wait for the next one
-        if (height > 0) {
-            setIsMounted(true);
-        }
-        unstable_batchedUpdates(() => {
-            setScrollContainerHeight(height);
-            updateChildHeight();
-        });
-    }, [updateChildHeight]);
-    const [resizeRef, resizeObserver] = useResizeObserver(onResize);
-    // Find scrollable parent
-    // Needed only on init
-    useIsomorphicLayoutEffect(() => {
-        const scrollableParent = getScrollableParent(parentRef.current, parentRef.current?.ownerDocument);
-        scrollContainer.current = scrollableParent;
-        resizeRef(scrollableParent);
-    }, [resizeRef]);
-    // Stop watching resize, when virtual scroll is unmounted
-    useIsomorphicLayoutEffect(() => {
-        return () => resizeObserver?.disconnect();
-    }, [resizeObserver]);
-    // Get child height when children available
-    useIsomorphicLayoutEffect(() => updateChildHeight(), [updateChildHeight]);
-    const updateVirtualScroll = React.useCallback(() => {
-        const scrollableContainer = getScrollableContainer();
-        if (!scrollableContainer) {
-            return;
-        }
-        const start = getNumberOfNodesInHeight(childHeight.current.middle, Math.round(scrollableContainer.scrollTop));
-        const visibleNodes = getVisibleNodeCount(childHeight.current.middle, start, itemsLength, scrollableContainer);
-        // If there are less items at the end than buffer size
-        // show more items at the start.
-        // Have boundaries for edge cases, e.g. 1 item length
-        const startIndex = Math.min(Math.max(0, start - bufferSize), Math.max(0, itemsLength - bufferSize * 2 - visibleNodes));
-        visibleIndex.current = { start: start, end: start + visibleNodes };
-        setStartNode(startIndex);
-        setVisibleNodeCount(visibleNodes);
-        if (!parentRef.current) {
-            return;
-        }
-        parentRef.current.style.transform = `translateY(${getTranslateValue(childHeight.current.middle, startIndex)}px)`;
-    }, [bufferSize, itemsLength]);
-    const onScroll = React.useCallback(() => {
-        updateVirtualScroll();
-    }, [updateVirtualScroll]);
-    const removeScrollListener = React.useCallback(() => {
-        if (!onScrollRef.current) {
-            return;
-        }
-        !scrollContainer.current ||
-            scrollContainer.current === parentRef.current?.ownerDocument.body
-            ? parentRef.current?.ownerDocument.removeEventListener('scroll', onScrollRef.current)
-            : scrollContainer.current.removeEventListener('scroll', onScrollRef.current);
-    }, []);
-    // Add event listener to the scrollable container.
-    useIsomorphicLayoutEffect(() => {
-        removeScrollListener();
-        onScrollRef.current = onScroll;
-        if (!scrollContainer.current ||
-            scrollContainer.current === parentRef.current?.ownerDocument.body) {
-            parentRef.current?.ownerDocument.addEventListener('scroll', onScroll);
-        }
-        else {
-            scrollContainer.current.addEventListener('scroll', onScroll);
-        }
-        return removeScrollListener;
-    }, [onScroll, removeScrollListener]);
-    useIsomorphicLayoutEffect(() => {
-        if (!isMounted) {
-            return;
-        }
-        const scrollableContainer = getScrollableContainer();
-        if (!scrollableContainer || scrollToIndex == null) {
-            return;
-        }
-        // if `scrollToIndex` is not visible, scroll to it
-        if (scrollToIndex > visibleIndex.current.end ||
-            scrollToIndex < visibleIndex.current.start) {
-            const indexDiff = scrollToIndex > visibleIndex.current.end
-                ? scrollToIndex - visibleIndex.current.end
-                : scrollToIndex - visibleIndex.current.start;
-            if (scrollToIndex === 0) {
-                scrollableContainer.scrollTo({ top: 0 });
-                return;
-            }
-            // If go down: add to the existing scrollTop needed height
-            // If go up: calculate the exact scroll top
-            scrollableContainer.scrollTo({
-                top: indexDiff > 0
-                    ? Math.ceil(scrollableContainer.scrollTop) +
-                        indexDiff * childHeight.current.middle
-                    : scrollToIndex * childHeight.current.middle,
-            });
-            // update visible index
-            const start = getNumberOfNodesInHeight(childHeight.current.middle, Math.round(scrollableContainer.scrollTop));
-            const visibleNodes = getVisibleNodeCount(childHeight.current.middle, start, itemsLength, scrollableContainer);
-            visibleIndex.current = { start: start, end: start + visibleNodes };
-        }
-        // if `scrollToIndex` is the first visible node
-        // ensure it is fully visible
-        if (scrollToIndex === visibleIndex.current.start) {
-            const roundedScrollTop = Math.round(scrollableContainer.scrollTop);
-            const diff = roundedScrollTop % childHeight.current.middle;
-            diff > 0 &&
-                scrollableContainer.scrollTo({
-                    top: roundedScrollTop - diff,
-                });
-            return;
-        }
-        // if `scrollToIndex` is the last visible node
-        // ensure it is fully visible
-        if (scrollToIndex === visibleIndex.current.end) {
-            const diff = (scrollableContainer.offsetHeight - childHeight.current.first) %
-                childHeight.current.middle;
-            const roundedScrollTop = Math.ceil(scrollableContainer.scrollTop);
-            const scrollTopMod = roundedScrollTop % childHeight.current.middle;
-            if (diff > 0 && scrollTopMod === 0) {
-                scrollableContainer.scrollTo({
-                    top: roundedScrollTop + childHeight.current.middle - diff,
-                });
-            }
-        }
-    }, [scrollToIndex, isMounted]);
-    useIsomorphicLayoutEffect(() => {
-        if (!scrollContainerHeight) {
-            return;
-        }
-        updateVirtualScroll();
-    }, [scrollContainerHeight, updateVirtualScroll]);
-    return {
-        outerProps: {
-            style: {
-                minHeight: itemsLength > 1
-                    ? Math.max(itemsLength - 2, 0) * childHeight.current.middle +
-                        childHeight.current.first +
-                        childHeight.current.last
-                    : childHeight.current.middle,
-                minWidth: '100%',
-                ...style,
-            },
-            ...rest,
-        },
-        innerProps: {
-            style: { willChange: 'transform' },
-            ref: mergeRefs(parentRef), // convert object ref to callback ref for better types
-        },
-        visibleChildren,
+  const {
+    itemsLength,
+    itemRenderer,
+    bufferSize = 10,
+    scrollToIndex,
+    style,
+    ...rest
+  } = props;
+  const [startNode, setStartNode] = React.useState(0);
+  const [visibleNodeCount, setVisibleNodeCount] = React.useState(0);
+  const scrollContainer = React.useRef();
+  const parentRef = React.useRef(null);
+  const childHeight = React.useRef({ first: 0, middle: 0, last: 0 });
+  const onScrollRef = React.useRef();
+  // Used only to recalculate on resize
+  const [scrollContainerHeight, setScrollContainerHeight] = React.useState(0);
+  const visibleIndex = React.useRef({ start: 0, end: 0 });
+  // Used to mark when scroll container has height (updated by resize observer)
+  // because before that calculations are not right
+  const [isMounted, setIsMounted] = React.useState(false);
+  const getScrollableContainer = () =>
+    scrollContainer.current ??
+    parentRef.current?.ownerDocument.scrollingElement;
+  const visibleChildren = React.useMemo(() => {
+    const arr = [];
+    const endIndex = Math.min(
+      itemsLength,
+      startNode + visibleNodeCount + bufferSize * 2,
+    );
+    for (let i = startNode; i < endIndex; i++) {
+      arr.push(itemRenderer(i));
+    }
+    return arr;
+  }, [itemsLength, itemRenderer, bufferSize, startNode, visibleNodeCount]);
+  const updateChildHeight = React.useCallback(() => {
+    if (!parentRef.current || !visibleChildren.length) {
+      return;
+    }
+    const firstChild = parentRef.current.children.item(0);
+    const secondChild = parentRef.current.children.item(1);
+    const lastChild = parentRef.current.children.item(
+      parentRef.current.children.length - 1,
+    );
+    const firstChildHeight = Number(
+      getElementHeightWithMargins(firstChild)?.toFixed(2) ?? 0,
+    );
+    childHeight.current = {
+      first: firstChildHeight,
+      middle: Number(
+        getElementHeightWithMargins(secondChild)?.toFixed(2) ??
+          firstChildHeight,
+      ),
+      last: Number(
+        getElementHeightWithMargins(lastChild)?.toFixed(2) ?? firstChildHeight,
+      ),
     };
+  }, [visibleChildren.length]);
+  const onResize = React.useCallback(
+    ({ height }) => {
+      // Initial value returned by resize observer is 0
+      // So wait for the next one
+      if (height > 0) {
+        setIsMounted(true);
+      }
+      unstable_batchedUpdates(() => {
+        setScrollContainerHeight(height);
+        updateChildHeight();
+      });
+    },
+    [updateChildHeight],
+  );
+  const [resizeRef, resizeObserver] = useResizeObserver(onResize);
+  // Find scrollable parent
+  // Needed only on init
+  useIsomorphicLayoutEffect(() => {
+    const scrollableParent = getScrollableParent(
+      parentRef.current,
+      parentRef.current?.ownerDocument,
+    );
+    scrollContainer.current = scrollableParent;
+    resizeRef(scrollableParent);
+  }, [resizeRef]);
+  // Stop watching resize, when virtual scroll is unmounted
+  useIsomorphicLayoutEffect(() => {
+    return () => resizeObserver?.disconnect();
+  }, [resizeObserver]);
+  // Get child height when children available
+  useIsomorphicLayoutEffect(() => updateChildHeight(), [updateChildHeight]);
+  const updateVirtualScroll = React.useCallback(() => {
+    const scrollableContainer = getScrollableContainer();
+    if (!scrollableContainer) {
+      return;
+    }
+    const start = getNumberOfNodesInHeight(
+      childHeight.current.middle,
+      Math.round(scrollableContainer.scrollTop),
+    );
+    const visibleNodes = getVisibleNodeCount(
+      childHeight.current.middle,
+      start,
+      itemsLength,
+      scrollableContainer,
+    );
+    // If there are less items at the end than buffer size
+    // show more items at the start.
+    // Have boundaries for edge cases, e.g. 1 item length
+    const startIndex = Math.min(
+      Math.max(0, start - bufferSize),
+      Math.max(0, itemsLength - bufferSize * 2 - visibleNodes),
+    );
+    visibleIndex.current = { start: start, end: start + visibleNodes };
+    setStartNode(startIndex);
+    setVisibleNodeCount(visibleNodes);
+    if (!parentRef.current) {
+      return;
+    }
+    parentRef.current.style.transform = `translateY(${getTranslateValue(
+      childHeight.current.middle,
+      startIndex,
+    )}px)`;
+  }, [bufferSize, itemsLength]);
+  const onScroll = React.useCallback(() => {
+    updateVirtualScroll();
+  }, [updateVirtualScroll]);
+  const removeScrollListener = React.useCallback(() => {
+    if (!onScrollRef.current) {
+      return;
+    }
+    !scrollContainer.current ||
+    scrollContainer.current === parentRef.current?.ownerDocument.body
+      ? parentRef.current?.ownerDocument.removeEventListener(
+          'scroll',
+          onScrollRef.current,
+        )
+      : scrollContainer.current.removeEventListener(
+          'scroll',
+          onScrollRef.current,
+        );
+  }, []);
+  // Add event listener to the scrollable container.
+  useIsomorphicLayoutEffect(() => {
+    removeScrollListener();
+    onScrollRef.current = onScroll;
+    if (
+      !scrollContainer.current ||
+      scrollContainer.current === parentRef.current?.ownerDocument.body
+    ) {
+      parentRef.current?.ownerDocument.addEventListener('scroll', onScroll);
+    } else {
+      scrollContainer.current.addEventListener('scroll', onScroll);
+    }
+    return removeScrollListener;
+  }, [onScroll, removeScrollListener]);
+  useIsomorphicLayoutEffect(() => {
+    if (!isMounted) {
+      return;
+    }
+    const scrollableContainer = getScrollableContainer();
+    if (!scrollableContainer || scrollToIndex == null) {
+      return;
+    }
+    // if `scrollToIndex` is not visible, scroll to it
+    if (
+      scrollToIndex > visibleIndex.current.end ||
+      scrollToIndex < visibleIndex.current.start
+    ) {
+      const indexDiff =
+        scrollToIndex > visibleIndex.current.end
+          ? scrollToIndex - visibleIndex.current.end
+          : scrollToIndex - visibleIndex.current.start;
+      if (scrollToIndex === 0) {
+        scrollableContainer.scrollTo({ top: 0 });
+        return;
+      }
+      // If go down: add to the existing scrollTop needed height
+      // If go up: calculate the exact scroll top
+      scrollableContainer.scrollTo({
+        top:
+          indexDiff > 0
+            ? Math.ceil(scrollableContainer.scrollTop) +
+              indexDiff * childHeight.current.middle
+            : scrollToIndex * childHeight.current.middle,
+      });
+      // update visible index
+      const start = getNumberOfNodesInHeight(
+        childHeight.current.middle,
+        Math.round(scrollableContainer.scrollTop),
+      );
+      const visibleNodes = getVisibleNodeCount(
+        childHeight.current.middle,
+        start,
+        itemsLength,
+        scrollableContainer,
+      );
+      visibleIndex.current = { start: start, end: start + visibleNodes };
+    }
+    // if `scrollToIndex` is the first visible node
+    // ensure it is fully visible
+    if (scrollToIndex === visibleIndex.current.start) {
+      const roundedScrollTop = Math.round(scrollableContainer.scrollTop);
+      const diff = roundedScrollTop % childHeight.current.middle;
+      diff > 0 &&
+        scrollableContainer.scrollTo({
+          top: roundedScrollTop - diff,
+        });
+      return;
+    }
+    // if `scrollToIndex` is the last visible node
+    // ensure it is fully visible
+    if (scrollToIndex === visibleIndex.current.end) {
+      const diff =
+        (scrollableContainer.offsetHeight - childHeight.current.first) %
+        childHeight.current.middle;
+      const roundedScrollTop = Math.ceil(scrollableContainer.scrollTop);
+      const scrollTopMod = roundedScrollTop % childHeight.current.middle;
+      if (diff > 0 && scrollTopMod === 0) {
+        scrollableContainer.scrollTo({
+          top: roundedScrollTop + childHeight.current.middle - diff,
+        });
+      }
+    }
+  }, [scrollToIndex, isMounted]);
+  useIsomorphicLayoutEffect(() => {
+    if (!scrollContainerHeight) {
+      return;
+    }
+    updateVirtualScroll();
+  }, [scrollContainerHeight, updateVirtualScroll]);
+  return {
+    outerProps: {
+      style: {
+        minHeight:
+          itemsLength > 1
+            ? Math.max(itemsLength - 2, 0) * childHeight.current.middle +
+              childHeight.current.first +
+              childHeight.current.last
+            : childHeight.current.middle,
+        minWidth: '100%',
+        ...style,
+      },
+      ...rest,
+    },
+    innerProps: {
+      style: { willChange: 'transform' },
+      ref: mergeRefs(parentRef), // convert object ref to callback ref for better types
+    },
+    visibleChildren,
+  };
 };
 export default VirtualScroll;

package/esm/core/utils/components/VisuallyHidden.d.ts

@@ -1,5 +1,5 @@
 import type { PolymorphicForwardRefComponent } from '../props.js';
-declare type VisuallyHiddenOwnProps = {
+type VisuallyHiddenOwnProps = {
     /**
      * When VisuallyHidden is used with an interactive element (e.g. button),
      * that element will "unhide" (become visible again) when focused.

package/esm/core/utils/components/VisuallyHidden.js

@@ -16,7 +16,13 @@ import { Box } from './Box.js';
  * @see https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
  */
 export const VisuallyHidden = React.forwardRef((props, ref) => {
-    const { className, unhideOnFocus = true, ...rest } = props;
-    return (React.createElement(Box, { as: 'span', className: cx('iui-visually-hidden', className), "data-iui-unhide-on-focus": unhideOnFocus ? true : undefined, ref: ref, ...rest }));
+  const { className, unhideOnFocus = true, ...rest } = props;
+  return React.createElement(Box, {
+    as: 'span',
+    className: cx('iui-visually-hidden', className),
+    'data-iui-unhide-on-focus': unhideOnFocus ? true : undefined,
+    ref: ref,
+    ...rest,
+  });
 });
 export default VisuallyHidden;

package/esm/core/utils/components/WithCSSTransition.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import * as React from 'react';
 import type { CSSTransitionProps } from 'react-transition-group/CSSTransition';
 export declare const WithCSSTransition: (props: Partial<CSSTransitionProps> & {
     children: JSX.Element;
     dimension?: 'height' | 'width';
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default WithCSSTransition;

package/esm/core/utils/components/WithCSSTransition.js

@@ -5,28 +5,45 @@
 import * as React from 'react';
 import { CSSTransition } from 'react-transition-group';
 export const WithCSSTransition = (props) => {
-    const { in: visible, dimension = 'height', children, ...rest } = props;
-    const expandedSize = React.useRef(0);
-    const dimensionCamelCase = dimension === 'height' ? 'Height' : 'Width';
-    return (React.createElement(CSSTransition, { in: visible, timeout: 200, unmountOnExit: true, onEnter: (node) => {
-            node.style[`min${dimensionCamelCase}`] = 'initial';
-            node.style[dimension] = '0px';
-        }, onEntering: (node) => {
-            node.style[dimension] = `${expandedSize.current}px`;
-        }, onEntered: (node) => {
-            node.style[`min${dimensionCamelCase}`] = '';
-            node.style[dimension] = '';
-        }, onExit: (node) => {
-            node.style[dimension] = `${expandedSize.current}px`;
-        }, onExiting: (node) => {
-            node.style[`min${dimensionCamelCase}`] = 'initial';
-            node.style[dimension] = '0px';
-        }, classNames: 'iui', ...rest }, React.cloneElement(children, {
-        ref: (el) => {
+  const { in: visible, dimension = 'height', children, ...rest } = props;
+  const expandedSize = React.useRef(0);
+  const dimensionCamelCase = dimension === 'height' ? 'Height' : 'Width';
+  return React.createElement(
+    CSSTransition,
+    {
+      in: visible,
+      timeout: 200,
+      unmountOnExit: true,
+      onEnter: (node) => {
+        node.style[`min${dimensionCamelCase}`] = 'initial';
+        node.style[dimension] = '0px';
+      },
+      onEntering: (node) => {
+        node.style[dimension] = `${expandedSize.current}px`;
+      },
+      onEntered: (node) => {
+        node.style[`min${dimensionCamelCase}`] = '';
+        node.style[dimension] = '';
+      },
+      onExit: (node) => {
+        node.style[dimension] = `${expandedSize.current}px`;
+      },
+      onExiting: (node) => {
+        node.style[`min${dimensionCamelCase}`] = 'initial';
+        node.style[dimension] = '0px';
+      },
+      classNames: 'iui',
+      ...rest,
+    },
+    React.isValidElement(children)
+      ? React.cloneElement(children, {
+          ref: (el) => {
             if (el) {
-                expandedSize.current = el.getBoundingClientRect()[dimension];
+              expandedSize.current = el.getBoundingClientRect()[dimension];
             }
-        },
-    })));
+          },
+        })
+      : React.createElement(React.Fragment, null),
+  );
 };
 export default WithCSSTransition;