@itwin/itwinui-react 3.0.4 → 3.0.5

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

@@ -1,67 +1,55 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.useVirtualization = exports.VirtualScroll = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const ReactDOM = tslib_1.__importStar(require('react-dom'));
-const index_js_1 = require('../hooks/index.js');
-const unstable_batchedUpdates =
-  ReactDOM.unstable_batchedUpdates ?? ((cb) => void cb());
+const React = tslib_1.__importStar(require("react"));
+const ReactDOM = tslib_1.__importStar(require("react-dom"));
+const index_js_1 = require("../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
@@ -85,13 +73,9 @@ const getVisibleNodeCount = (
  * @private
  */
 exports.VirtualScroll = React.forwardRef((props, ref) => {
-  const { innerProps, outerProps, visibleChildren } = (0,
-  exports.useVirtualization)(props);
-  return React.createElement(
-    'div',
-    { ...outerProps, ref: ref },
-    React.createElement('div', { ...innerProps }, visibleChildren),
-  );
+    const { innerProps, outerProps, visibleChildren } = (0, exports.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.
@@ -114,259 +98,194 @@ exports.VirtualScroll = React.forwardRef((props, ref) => {
  * @private
  */
 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] = (0, index_js_1.useResizeObserver)(
-    onResize,
-  );
-  // Find scrollable parent
-  // Needed only on init
-  (0, index_js_1.useIsomorphicLayoutEffect)(() => {
-    const scrollableParent = getScrollableParent(
-      parentRef.current,
-      parentRef.current?.ownerDocument,
-    );
-    scrollContainer.current = scrollableParent;
-    resizeRef(scrollableParent);
-  }, [resizeRef]);
-  // Stop watching resize, when virtual scroll is unmounted
-  (0, index_js_1.useIsomorphicLayoutEffect)(() => {
-    return () => resizeObserver?.disconnect();
-  }, [resizeObserver]);
-  // Get child height when children available
-  (0, index_js_1.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.
-  (0, index_js_1.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]);
-  (0, index_js_1.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,
+    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();
         });
-      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]);
-  (0, index_js_1.useIsomorphicLayoutEffect)(() => {
-    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: (0, index_js_1.mergeRefs)(parentRef), // convert object ref to callback ref for better types
-    },
-    visibleChildren,
-  };
+    }, [updateChildHeight]);
+    const [resizeRef, resizeObserver] = (0, index_js_1.useResizeObserver)(onResize);
+    // Find scrollable parent
+    // Needed only on init
+    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+        const scrollableParent = getScrollableParent(parentRef.current, parentRef.current?.ownerDocument);
+        scrollContainer.current = scrollableParent;
+        resizeRef(scrollableParent);
+    }, [resizeRef]);
+    // Stop watching resize, when virtual scroll is unmounted
+    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+        return () => resizeObserver?.disconnect();
+    }, [resizeObserver]);
+    // Get child height when children available
+    (0, index_js_1.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.
+    (0, index_js_1.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]);
+    (0, index_js_1.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]);
+    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+        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: (0, index_js_1.mergeRefs)(parentRef), // convert object ref to callback ref for better types
+        },
+        visibleChildren,
+    };
 };
 exports.useVirtualization = useVirtualization;
 exports.default = exports.VirtualScroll;

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

@@ -1,60 +1,43 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.WithCSSTransition = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const react_transition_group_1 = require('react-transition-group');
-const styles_js_1 = tslib_1.__importDefault(require('../../../styles.js'));
+const React = tslib_1.__importStar(require("react"));
+const react_transition_group_1 = require("react-transition-group");
+const styles_js_1 = tslib_1.__importDefault(require("../../../styles.js"));
 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(
-    react_transition_group_1.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_js_1.default['iui-enter'],
-        enterActive: styles_js_1.default['iui-enter-active'],
-        exit: styles_js_1.default['iui-exit'],
-        exitActive: styles_js_1.default['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 (React.createElement(react_transition_group_1.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_js_1.default['iui-enter'],
+            enterActive: styles_js_1.default['iui-enter-active'],
+            exit: styles_js_1.default['iui-exit'],
+            exitActive: styles_js_1.default['iui-exit-active'],
+        }, ...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),
-  );
+        },
+    })) : (React.createElement(React.Fragment, null))));
 };
 exports.WithCSSTransition = WithCSSTransition;
 exports.default = exports.WithCSSTransition;