@itwin/itwinui-react 3.11.3 → 3.12.0

package/esm/utils/components/VirtualScroll.js

@@ -1,285 +1,319 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { mergeRefs, useResizeObserver, useLayoutEffect, } from '../hooks/index.js';
-const unstable_batchedUpdates = ReactDOM.unstable_batchedUpdates ?? ((cb) => void cb());
+import {
+  mergeRefs,
+  useResizeObserver,
+  useLayoutEffect,
+} 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-block-start')) +
-        parseFloat(getElementStyle(element, 'margin-block-end'));
-    return getElementHeight(element) + (isNaN(margin) ? 0 : margin);
+  if (!element) {
+    return undefined;
+  }
+  const margin =
+    parseFloat(getElementStyle(element, 'margin-block-start')) +
+    parseFloat(getElementStyle(element, 'margin-block-end'));
+  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
- * and the amount provided through `bufferSize` prop at the start and the end. Can be used inside other components like `Table`.
- *
- * It has two wrapper elements, so DOM will be changed. One is used for setting full expected height in the scrollable container
- * and other is for transformation (translateY) to show the correct part of the list.
- *
- * Currently it works only with the direct vertically scrollable parent element. It does not work with body scroll.
- * It supports only static (same) height rows virtualization. Expect some issues, if list consists of different height elements.
- * @example
- * const itemRenderer = React.useCallback(() => (
- *  <div key={index}>
- *    This is my item #{index}
- *  </div>
- * ), [])
- * <VirtualScroll
- *  itemsLength={1000}
- *  itemRenderer={itemRenderer}
- * />
- * @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 _jsx('div', {
+    ...outerProps,
+    ref: ref,
+    children: _jsx('div', {
+      ...innerProps,
+      children: visibleChildren,
+    }),
+  });
 });
-/**
- * `useVirtualization` is used for efficiently rendering only the visible rows from a large list.
- * It returns `outerProps` and `innerProps`, which need to be applied on 2 container elements and `visibleChildren` which is a list of virtualized items.
- * @example
- * const itemRenderer = React.useCallback((index: number) => (
- *  <li key={index}>
- *    This is my item #{index}
- *  </li>
- * ), [])
- *
- * const { outerProps, innerProps, visibleChildren } = useVirtualization({itemsLength: 1000, itemRenderer: itemRenderer});
- * return (
- *  <div {...outerProps}>
- *   <ul {...innerProps}>
- *    {visibleChildren}
- *   </ul>
- *  </div>
- * );
- * @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
-    useLayoutEffect(() => {
-        const scrollableParent = getScrollableParent(parentRef.current, parentRef.current?.ownerDocument);
-        scrollContainer.current = scrollableParent;
-        resizeRef(scrollableParent);
-    }, [resizeRef]);
-    // Stop watching resize, when virtual scroll is unmounted
-    useLayoutEffect(() => {
-        return () => resizeObserver?.disconnect();
-    }, [resizeObserver]);
-    // Get child height when children available
-    useLayoutEffect(() => 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.
-    useLayoutEffect(() => {
-        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]);
-    useLayoutEffect(() => {
-        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, itemsLength]);
-    useLayoutEffect(() => {
-        if (!scrollContainerHeight) {
-            return;
-        }
-        updateVirtualScroll();
-    }, [scrollContainerHeight, updateVirtualScroll]);
-    return {
-        outerProps: {
-            style: {
-                minBlockSize: itemsLength > 1
-                    ? Math.max(itemsLength - 2, 0) * childHeight.current.middle +
-                        childHeight.current.first +
-                        childHeight.current.last
-                    : childHeight.current.middle,
-                minInlineSize: '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();
+  const [scrollContainerHeight, setScrollContainerHeight] = React.useState(0);
+  const visibleIndex = React.useRef({
+    start: 0,
+    end: 0,
+  });
+  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 }) => {
+      if (height > 0) {
+        setIsMounted(true);
+      }
+      unstable_batchedUpdates(() => {
+        setScrollContainerHeight(height);
+        updateChildHeight();
+      });
+    },
+    [updateChildHeight],
+  );
+  const [resizeRef, resizeObserver] = useResizeObserver(onResize);
+  useLayoutEffect(() => {
+    const scrollableParent = getScrollableParent(
+      parentRef.current,
+      parentRef.current?.ownerDocument,
+    );
+    scrollContainer.current = scrollableParent;
+    resizeRef(scrollableParent);
+  }, [resizeRef]);
+  useLayoutEffect(() => {
+    return () => resizeObserver?.disconnect();
+  }, [resizeObserver]);
+  useLayoutEffect(() => 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,
+    );
+    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,
+        );
+  }, []);
+  useLayoutEffect(() => {
+    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]);
+  useLayoutEffect(() => {
+    if (!isMounted) {
+      return;
+    }
+    const scrollableContainer = getScrollableContainer();
+    if (!scrollableContainer || scrollToIndex == null) {
+      return;
+    }
+    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;
+      }
+      scrollableContainer.scrollTo({
+        top:
+          indexDiff > 0
+            ? Math.ceil(scrollableContainer.scrollTop) +
+              indexDiff * childHeight.current.middle
+            : scrollToIndex * childHeight.current.middle,
+      });
+      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 === 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 === 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, itemsLength]);
+  useLayoutEffect(() => {
+    if (!scrollContainerHeight) {
+      return;
+    }
+    updateVirtualScroll();
+  }, [scrollContainerHeight, updateVirtualScroll]);
+  return {
+    outerProps: {
+      style: {
+        minBlockSize:
+          itemsLength > 1
+            ? Math.max(itemsLength - 2, 0) * childHeight.current.middle +
+              childHeight.current.first +
+              childHeight.current.last
+            : childHeight.current.middle,
+        minInlineSize: '100%',
+        ...style,
+      },
+      ...rest,
+    },
+    innerProps: {
+      style: {
+        willChange: 'transform',
+      },
+      ref: mergeRefs(parentRef),
+    },
+    visibleChildren,
+  };
 };

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

@@ -2,5 +2,5 @@ import * as React from 'react';
 import { CSSTransition } from 'react-transition-group';
 export declare const WithCSSTransition: (props: Partial<React.ComponentPropsWithoutRef<typeof CSSTransition>> & {
     children: JSX.Element;
-    dimension?: 'height' | 'width';
-}) => React.JSX.Element;
+    dimension?: "height" | "width";
+}) => import("react/jsx-runtime").JSX.Element;

package/esm/utils/components/WithCSSTransition.js

@@ -1,37 +1,48 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import { jsx as _jsx, Fragment as _Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { CSSTransition } from 'react-transition-group';
-import styles from '../../styles.js';
+import { styles } from '../../styles.js';
 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: {
-            enter: styles['iui-enter'],
-            enterActive: styles['iui-enter-active'],
-            exit: styles['iui-exit'],
-            exitActive: styles['iui-exit-active'],
-        }, ...rest }, React.isValidElement(children) ? (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 _jsx(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: {
+      enter: styles['iui-enter'],
+      enterActive: styles['iui-enter-active'],
+      exit: styles['iui-exit'],
+      exitActive: styles['iui-exit-active'],
+    },
+    ...rest,
+    children: 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))));
+          },
+        })
+      : _jsx(_Fragment, {}),
+  });
 };