import { clsx } from 'clsx';
import { forwardRef, useRef, useImperativeHandle, createElement } from 'react';
import { CSSTransition } from 'react-transition-group';
import { jsx } from 'react/jsx-runtime';

const EXIT_ANIMATION = 350;
const SlidingPanel = /*#__PURE__*/forwardRef(({
  position = 'left',
  open,
  showSlidingPanelBorder,
  slidingPanelPositionFixed,
  className,
  children,
  testId,
  ...rest
}, reference) => {
  const localReference = useRef(null);
  useImperativeHandle(reference, () => localReference.current, []);
  return /*#__PURE__*/createElement(CSSTransition, {
    ...rest,
    key: `sliding-panel--open-${position}`,
    nodeRef: localReference,
    in: open
    // Wait for animation to finish before unmount.
    ,
    timeout: {
      enter: 0,
      exit: EXIT_ANIMATION
    },
    classNames: "sliding-panel",
    appear: true,
    unmountOnExit: true
  }, /*#__PURE__*/jsx("div", {
    ref: localReference,
    "data-testid": testId,
    className: clsx('sliding-panel', `sliding-panel--open-${position}`, showSlidingPanelBorder && `sliding-panel--border-${position}`, slidingPanelPositionFixed && 'sliding-panel--fixed', className),
    children: children
  }));
});

export { EXIT_ANIMATION, SlidingPanel as default };
//# sourceMappingURL=SlidingPanel.mjs.map
