import { jsx } from 'react/jsx-runtime';
import * as React from 'react';
import * as Dialog from '@radix-ui/react-dialog';
import { Flex, Box, IconButton, ScrollArea } from '@strapi/design-system';
import { Cross } from '@strapi/icons';
import { useIntl } from 'react-intl';
import { keyframes, styled } from 'styled-components';

/** Duration of the close animation in ms. Use for timing cleanup (e.g. removing URL params). */ const DRAWER_CLOSE_ANIMATION_MS = 300;
/* -------------------------------------------------------------------------------------------------
 * Animations
 * -----------------------------------------------------------------------------------------------*/ // Direction: up
const slideUpFromBottomIn = keyframes`
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
`;
const slideUpFromBottomOut = keyframes`
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(100%);
  }
`;
// Direction: left
const slideLeftFromRightIn = keyframes`
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
`;
const slideLeftFromRightOut = keyframes`
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
`;
const DrawerContainer = styled(Flex)`
  flex-direction: column;
  position: fixed;
  bottom: 0;
  right: 0;
  padding: ${({ theme })=>theme.spaces[2]};
  max-width: 100%;
  /* Sit just below the overlay token (300) so that:
     - popovers (500) and tooltips (1000) rendered from descendant components
       surface above the drawer panel,
     - AlertDialog overlays (300) and contents (310) opened from inside the
       drawer (e.g. the asset details "delete" confirm) cover the drawer. */
  z-index: 200;
  overflow: hidden;
  width: ${({ width })=>width ?? '400px'};
  max-height: ${({ maxHeight })=>maxHeight ?? '100vh'};

  &:focus {
    outline: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    &[data-state='open'] {
      animation: ${({ $animationDirection })=>$animationDirection === 'up' ? slideUpFromBottomIn : slideLeftFromRightIn}
        ${DRAWER_CLOSE_ANIMATION_MS}ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
    }

    &[data-state='closed'] {
      animation: ${({ $animationDirection })=>$animationDirection === 'up' ? slideUpFromBottomOut : slideLeftFromRightOut}
        ${DRAWER_CLOSE_ANIMATION_MS}ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
      pointer-events: none;
    }
  }
`;
const DrawerContent = styled(Box)`
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  background-color: ${({ theme })=>theme.colors.neutral0};
  border-radius: ${({ theme })=>theme.borderRadius};
  box-shadow: ${({ theme })=>theme.shadows.popupShadow};
  overflow: hidden;
  border: 1px solid ${({ theme })=>theme.colors.neutral150};
`;
const CollapsibleContent = styled(Box)`
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-rows: ${({ $isVisible })=>$isVisible ? '1fr' : '0fr'};
  transition: grid-template-rows 0.3s ease-in-out;

  > div {
    overflow: hidden;
    min-height: 0;
  }
`;
const CloseIconButton = styled(IconButton)`
  &:hover {
    background: transparent;
  }
`;
const DrawerBody = /*#__PURE__*/ React.forwardRef(({ animationDirection, children, ...props }, ref)=>/*#__PURE__*/ jsx(Dialog.Content, {
        ref: ref,
        forceMount: true,
        asChild: true,
        onPointerDownOutside: (e)=>e.preventDefault(),
        onInteractOutside: (e)=>e.preventDefault(),
        "data-animation-direction": animationDirection,
        children: /*#__PURE__*/ jsx(DrawerContainer, {
            $animationDirection: animationDirection,
            ...props,
            children: /*#__PURE__*/ jsx(DrawerContent, {
                children: children
            })
        })
    }));
DrawerBody.displayName = 'DrawerBody';
const DrawerRoot = ({ isVisible, onClose, children })=>/*#__PURE__*/ jsx(Dialog.Root, {
        open: isVisible,
        onOpenChange: (nextVisible)=>!nextVisible && onClose?.(),
        modal: false,
        children: /*#__PURE__*/ jsx(Dialog.Portal, {
            children: children
        })
    });
const DrawerScrollableContent = ({ children, isContentExpanded = true })=>/*#__PURE__*/ jsx(CollapsibleContent, {
        $isVisible: isContentExpanded,
        "data-collapsed": !isContentExpanded,
        children: /*#__PURE__*/ jsx(ScrollArea, {
            children: children
        })
    });
const DrawerCloseButton = ({ onClose, label, children })=>{
    const { formatMessage } = useIntl();
    const labelMessage = label ?? formatMessage({
        id: 'global.close',
        defaultMessage: 'Close'
    });
    return /*#__PURE__*/ jsx(CloseIconButton, {
        onClick: onClose,
        label: labelMessage,
        variant: "ghost",
        children: children ?? /*#__PURE__*/ jsx(Cross, {})
    });
};
const Drawer = {
    Root: DrawerRoot,
    Body: DrawerBody,
    ScrollableContent: DrawerScrollableContent,
    CloseButton: DrawerCloseButton,
    Title: Dialog.Title,
    Description: Dialog.Description
};

export { DRAWER_CLOSE_ANIMATION_MS, Drawer };
//# sourceMappingURL=Drawer.mjs.map