@zendeskgarden/react-modals 9.0.0-next.1 → 9.0.0-next.2

package/dist/index.esm.js

@@ -10,7 +10,7 @@ import React__default, { createContext, useContext, forwardRef, useRef, useState
 import ReactDOM, { createPortal } from 'react-dom';
 import styled, { keyframes, css, ThemeContext } from 'styled-components';
 import PropTypes from 'prop-types';
-import { getColor, retrieveComponentStyles, DEFAULT_THEME, getLineHeight, focusStyles, mediaQuery, menuStyles, arrowStyles, useDocument, useText } from '@zendeskgarden/react-theming';
+import { getColor, retrieveComponentStyles, DEFAULT_THEME, getLineHeight, focusStyles, mediaQuery, menuStyles, getMenuPosition, arrowStyles, getArrowPosition, useDocument, useText, getFloatingPlacements, PLACEMENT as PLACEMENT$1 } from '@zendeskgarden/react-theming';
 import { useModal } from '@zendeskgarden/container-modal';
 import { useFocusVisible } from '@zendeskgarden/container-focusvisible';
 import { mergeRefs } from 'react-merge-refs';
@@ -19,8 +19,8 @@ import ownerDocument from 'dom-helpers/ownerDocument';
 import ownerWindow from 'dom-helpers/ownerWindow';
 import css$1 from 'dom-helpers/css';
 import getScrollbarSize from 'dom-helpers/scrollbarSize';
-import { usePopper } from 'react-popper';
 import { CSSTransition } from 'react-transition-group';
+import { useFloating, offset, autoPlacement, autoUpdate } from '@floating-ui/react-dom';
 import activeElement from 'dom-helpers/activeElement';
 
 function _extends$2() {
@@ -48,7 +48,7 @@ const animationStyles$1 = props => {
 };
 const StyledBackdrop = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledBackdrop",
   componentId: "sc-mzdjpo-0"
@@ -64,7 +64,7 @@ StyledBackdrop.propTypes = {
 const COMPONENT_ID$i = 'modals.body';
 const StyledBody = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-14rzecg-0"
@@ -89,7 +89,7 @@ const BASE_MULTIPLIERS$1 = {
 };
 const StyledClose = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledClose",
   componentId: "sc-iseudj-0"
@@ -101,7 +101,7 @@ StyledClose.defaultProps = {
 const COMPONENT_ID$g = 'modals.footer';
 const StyledFooter = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledFooter",
   componentId: "sc-d8pfdu-0"
@@ -113,7 +113,7 @@ StyledFooter.defaultProps = {
 const COMPONENT_ID$f = 'modals.footer_item';
 const StyledFooterItem = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledFooterItem",
   componentId: "sc-1mb76hl-0"
@@ -125,7 +125,7 @@ StyledFooterItem.defaultProps = {
 const COMPONENT_ID$e = 'modals.header';
 const StyledHeader = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-1787r9v-0"
@@ -196,7 +196,7 @@ const sizeStyles$1 = props => {
 };
 const StyledModal = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledModal",
   componentId: "sc-1pe1axu-0"
@@ -212,7 +212,7 @@ StyledModal.defaultProps = {
 const COMPONENT_ID$c = 'modals.tooltip_modal.backdrop';
 const StyledTooltipModalBackdrop = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledTooltipModalBackdrop",
   componentId: "sc-1yaomgq-0"
@@ -221,70 +221,14 @@ StyledTooltipModalBackdrop.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-function getPopperPlacement(gardenPlacement) {
-  const gardenToPopperMapping = {
-    auto: 'auto',
-    top: 'top',
-    'top-start': 'top-start',
-    'top-end': 'top-end',
-    bottom: 'bottom',
-    'bottom-start': 'bottom-start',
-    'bottom-end': 'bottom-end',
-    end: 'right',
-    'end-top': 'right-start',
-    'end-bottom': 'right-end',
-    start: 'left',
-    'start-top': 'left-start',
-    'start-bottom': 'left-end'
-  };
-  return gardenToPopperMapping[gardenPlacement];
-}
-function getRtlPopperPlacement(gardenPlacement) {
-  const rtlPlacementMappings = {
-    left: 'right',
-    'left-start': 'right-start',
-    'left-end': 'right-end',
-    'top-start': 'top-end',
-    'top-end': 'top-start',
-    right: 'left',
-    'right-start': 'left-start',
-    'right-end': 'left-end',
-    'bottom-start': 'bottom-end',
-    'bottom-end': 'bottom-start'
-  };
-  const popperPlacement = getPopperPlacement(gardenPlacement);
-  return rtlPlacementMappings[popperPlacement] || popperPlacement;
-}
-function getArrowPosition(popperPlacement) {
-  const arrowPositionMappings = {
-    top: 'bottom',
-    'top-start': 'bottom-left',
-    'top-end': 'bottom-right',
-    right: 'left',
-    'right-start': 'left-top',
-    'right-end': 'left-bottom',
-    bottom: 'top',
-    'bottom-start': 'top-left',
-    'bottom-end': 'top-right',
-    left: 'right',
-    'left-start': 'right-top',
-    'left-end': 'right-bottom'
-  };
-  return arrowPositionMappings[popperPlacement] || 'top';
-}
-function getMenuPosition(popperPlacement) {
-  return popperPlacement ? popperPlacement.split('-')[0] : 'bottom';
-}
-
 const StyledTooltipWrapper = styled.div.attrs(props => ({
   className: props.isAnimated && 'is-animated'
 })).withConfig({
   displayName: "StyledTooltipWrapper",
   componentId: "sc-1xk05kf-0"
-})(["", ";"], props => menuStyles(getMenuPosition(props.placement), {
+})(["top:0;left:0;", ";"], props => menuStyles(getMenuPosition(props.placement), {
   theme: props.theme,
   hidden: false,
-  margin: '0',
   zIndex: props.zIndex,
   animationModifier: '.is-animated'
 }));
@@ -295,13 +239,13 @@ StyledTooltipWrapper.defaultProps = {
 const COMPONENT_ID$b = 'modals.tooltip_modal';
 const StyledTooltipModal = styled.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.1',
+  'data-garden-version': '9.0.0-next.2',
   className: props.isAnimated && 'is-animated'
 })).withConfig({
   displayName: "StyledTooltipModal",
   componentId: "sc-42ubfr-0"
 })(["padding:", "px;width:400px;", ";", ";"], props => props.theme.space.base * 5, props => {
-  const computedArrowStyles = arrowStyles(getArrowPosition(props.placement), {
+  const computedArrowStyles = arrowStyles(getArrowPosition(props.theme, props.placement), {
     size: `${props.theme.space.base * 2}px`,
     inset: '1px',
     animationModifier: '.is-animated'
@@ -324,7 +268,7 @@ const sizeStyles = props => `
 `;
 const StyledTooltipModalTitle = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledTooltipModalTitle",
   componentId: "sc-11xjgjs-0"
@@ -336,7 +280,7 @@ StyledTooltipModalTitle.defaultProps = {
 const COMPONENT_ID$9 = 'modals.tooltip_modal.body';
 const StyledTooltipModalBody = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledTooltipModalBody",
   componentId: "sc-195dkzj-0"
@@ -348,7 +292,7 @@ StyledTooltipModalBody.defaultProps = {
 const COMPONENT_ID$8 = 'modals.tooltip_modal.footer';
 const StyledTooltipModalFooter = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledTooltipModalFooter",
   componentId: "sc-fm36a9-0"
@@ -360,7 +304,7 @@ StyledTooltipModalFooter.defaultProps = {
 const COMPONENT_ID$7 = 'modals.tooltip_modal.footer_item';
 const StyledTooltipModalFooterItem = styled(StyledFooterItem).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledTooltipModalFooterItem",
   componentId: "sc-1nahj6p-0"
@@ -372,7 +316,7 @@ StyledTooltipModalFooterItem.defaultProps = {
 const COMPONENT_ID$6 = 'modals.tooltip_modal.close';
 const StyledTooltipModalClose = styled(StyledClose).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledTooltipModalClose",
   componentId: "sc-1h2ke3q-0"
@@ -396,14 +340,14 @@ const boxShadow = props => {
   const color = getColor('neutralHue', 800, theme, 0.35);
   return shadows.lg(offsetY, blurRadius, color);
 };
-const StyledDrawerModal = styled.div.attrs({
+const StyledDrawer = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
-  displayName: "StyledDrawerModal",
-  componentId: "sc-i1sake-0"
+  displayName: "StyledDrawer",
+  componentId: "sc-zp66t3-0"
 })(["display:flex;position:fixed;top:0;", ":0;flex-direction:column;z-index:500;box-shadow:", ";background:", ";width:", "px;height:100%;overflow:auto;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";&.garden-drawer-transition-enter{transform:translateX(", "px);}&.garden-drawer-transition-enter-active{transform:translateX(0);transition:transform 0.25s ease-in-out;}&.garden-drawer-transition-exit-active{transform:translateX(", "px);transition:transform 0.25s ease-in-out;}&:focus{outline:none;}", ";"], props => props.theme.rtl ? 'left' : 'right', boxShadow, props => props.theme.colors.background, DRAWER_WIDTH, props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', props => props.theme.rtl ? -DRAWER_WIDTH : DRAWER_WIDTH, props => props.theme.rtl ? -DRAWER_WIDTH : DRAWER_WIDTH, props => retrieveComponentStyles(COMPONENT_ID$5, props));
-StyledDrawerModal.defaultProps = {
+StyledDrawer.defaultProps = {
   theme: DEFAULT_THEME
 };
 
@@ -413,62 +357,62 @@ const BASE_MULTIPLIERS = {
   side: 2,
   size: BASE_MULTIPLIERS$1.size
 };
-const StyledDrawerModalClose = styled(StyledClose).attrs({
+const StyledDrawerClose = styled(StyledClose).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
-  displayName: "StyledDrawerModalClose",
-  componentId: "sc-hrnaom-0"
+  displayName: "StyledDrawerClose",
+  componentId: "sc-1a0xt3x-0"
 })(["", ":", ";", ";"], props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base * BASE_MULTIPLIERS.side}px`, props => retrieveComponentStyles(COMPONENT_ID$4, props));
-StyledDrawerModalClose.defaultProps = {
+StyledDrawerClose.defaultProps = {
   theme: DEFAULT_THEME
 };
 
 const COMPONENT_ID$3 = 'modals.drawer_modal.header';
-const StyledDrawerModalHeader = styled(StyledHeader).attrs({
+const StyledDrawerHeader = styled(StyledHeader).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
-  displayName: "StyledDrawerModalHeader",
-  componentId: "sc-1u04rqw-0"
+  displayName: "StyledDrawerHeader",
+  componentId: "sc-y4mgkj-0"
 })(["padding:", "px;", "  ", ";"], props => props.theme.space.base * 5, props => props.isCloseButtonPresent && `padding-${props.theme.rtl ? 'left' : 'right'}: ${props.theme.space.base * (BASE_MULTIPLIERS.size + BASE_MULTIPLIERS.side + 2)}px;`, props => retrieveComponentStyles(COMPONENT_ID$3, props));
-StyledDrawerModalHeader.defaultProps = {
+StyledDrawerHeader.defaultProps = {
   theme: DEFAULT_THEME
 };
 
 const COMPONENT_ID$2 = 'modals.drawer_modal.body';
-const StyledDrawerModalBody = styled(StyledBody).attrs({
+const StyledDrawerBody = styled(StyledBody).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
-  displayName: "StyledDrawerModalBody",
-  componentId: "sc-yafe2y-0"
+  displayName: "StyledDrawerBody",
+  componentId: "sc-13qufyn-0"
 })(["padding:", "px;", ";"], props => props.theme.space.base * 5, props => retrieveComponentStyles(COMPONENT_ID$2, props));
-StyledDrawerModalBody.defaultProps = {
+StyledDrawerBody.defaultProps = {
   theme: DEFAULT_THEME
 };
 
 const COMPONENT_ID$1 = 'modals.drawer_modal.footer';
-const StyledDrawerModalFooter = styled.div.attrs({
+const StyledDrawerFooter = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
-  displayName: "StyledDrawerModalFooter",
-  componentId: "sc-17if4ka-0"
+  displayName: "StyledDrawerFooter",
+  componentId: "sc-kc7e6p-0"
 })(["display:flex;flex-shrink:0;justify-content:flex-end;border-top:", ";padding:", "px;", ";"], props => `${props.theme.borders.sm} ${getColor('neutralHue', 200, props.theme)}`, props => props.theme.space.base * 5, props => retrieveComponentStyles(COMPONENT_ID$1, props));
-StyledDrawerModalFooter.defaultProps = {
+StyledDrawerFooter.defaultProps = {
   theme: DEFAULT_THEME
 };
 
 const COMPONENT_ID = 'modals.drawer_modal.footer_item';
-const StyledDrawerModalFooterItem = styled(StyledFooterItem).attrs({
+const StyledDrawerFooterItem = styled(StyledFooterItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
-  displayName: "StyledDrawerModalFooterItem",
-  componentId: "sc-1vbl885-0"
+  displayName: "StyledDrawerFooterItem",
+  componentId: "sc-m2yul4-0"
 })(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledDrawerModalFooterItem.defaultProps = {
+StyledDrawerFooterItem.defaultProps = {
   theme: DEFAULT_THEME
 };
 
@@ -803,12 +747,12 @@ const FooterItemComponent$1 = forwardRef((props, ref) => React__default.createEl
 FooterItemComponent$1.displayName = 'TooltipModal.FooterItem';
 const FooterItem$1 = FooterItemComponent$1;
 
+const PLACEMENT_DEFAULT = 'top';
 const TooltipModalComponent = React__default.forwardRef((_ref, ref) => {
   let {
     appendToNode,
     referenceElement,
-    popperModifiers,
-    placement,
+    placement: _placement,
     onClose,
     hasArrow,
     isAnimated,
@@ -819,11 +763,11 @@ const TooltipModalComponent = React__default.forwardRef((_ref, ref) => {
     id,
     ...props
   } = _ref;
-  const theme = useContext(ThemeContext);
+  const theme = useContext(ThemeContext) || DEFAULT_THEME;
   const previousReferenceElementRef = useRef();
   const modalRef = useRef(null);
   const transitionRef = useRef(null);
-  const [popperElement, setPopperElement] = useState();
+  const [floatingElement, setFloatingElement] = useState();
   const [hasTitle, setHasTitle] = useState(false);
   const {
     getTitleProps,
@@ -838,27 +782,37 @@ const TooltipModalComponent = React__default.forwardRef((_ref, ref) => {
     focusOnMount,
     restoreFocus: false
   });
+  const [floatingPlacement] = getFloatingPlacements(theme, _placement === 'auto' ? PLACEMENT_DEFAULT : _placement);
+  const {
+    refs,
+    placement,
+    update,
+    floatingStyles: {
+      transform
+    }
+  } = useFloating({
+    elements: {
+      reference: referenceElement,
+      floating: floatingElement
+    },
+    placement: floatingPlacement,
+    middleware: [offset(theme.space.base * 3), _placement === 'auto' ? autoPlacement() : undefined]
+  });
+  useEffect(() => {
+    let cleanup;
+    if (referenceElement && floatingElement && refs.reference.current && refs.floating.current) {
+      cleanup = autoUpdate(refs.reference.current, refs.floating.current, update, {
+        elementResize: typeof ResizeObserver === 'function'
+      });
+    }
+    return () => cleanup && cleanup();
+  }, [referenceElement, floatingElement, refs.reference, refs.floating, update]);
   useEffect(() => {
     if (!referenceElement && previousReferenceElementRef.current && restoreFocus) {
       previousReferenceElementRef.current.focus();
     }
     previousReferenceElementRef.current = referenceElement;
   }, [referenceElement, restoreFocus]);
-  const popperPlacement = useMemo(() => theme.rtl ? getRtlPopperPlacement(placement) : getPopperPlacement(placement), [placement, theme.rtl]);
-  const {
-    styles,
-    attributes,
-    state
-  } = usePopper(referenceElement, popperElement, {
-    placement: popperPlacement,
-    modifiers: [{
-      name: 'offset',
-      options: {
-        offset: [0, theme.space.base * 3]
-      }
-    },
-    ...(popperModifiers || [])]
-  });
   const modalProps = getModalProps({
     'aria-describedby': undefined,
     ...(hasTitle ? {} : {
@@ -891,15 +845,17 @@ const TooltipModalComponent = React__default.forwardRef((_ref, ref) => {
       value: value
     }, React__default.createElement(StyledTooltipModalBackdrop, _extends$2({}, getBackdropProps(), backdropProps, {
       ref: transitionRef
-    }), React__default.createElement(StyledTooltipWrapper, _extends$2({
-      ref: setPopperElement,
-      style: styles.popper,
-      placement: state ? state.placement : undefined,
+    }), React__default.createElement(StyledTooltipWrapper, {
+      ref: setFloatingElement,
+      style: {
+        transform
+      },
+      placement: placement,
       zIndex: zIndex,
       isAnimated: isAnimated
-    }, attributes.popper), React__default.createElement(StyledTooltipModal, _extends$2({
+    }, React__default.createElement(StyledTooltipModal, _extends$2({
       transitionState: transitionState,
-      placement: state ? state.placement : 'top',
+      placement: placement,
       hasArrow: hasArrow,
       isAnimated: isAnimated
     }, modalProps, ariaProps, props, {
@@ -918,7 +874,6 @@ TooltipModalComponent.defaultProps = {
 TooltipModalComponent.propTypes = {
   appendToNode: PropTypes.any,
   referenceElement: PropTypes.any,
-  popperModifiers: PropTypes.any,
   placement: PropTypes.any,
   isAnimated: PropTypes.bool,
   hasArrow: PropTypes.bool,
@@ -956,13 +911,13 @@ const HeaderComponent = forwardRef((_ref, ref) => {
       }
     };
   }, [hasHeader, setHasHeader]);
-  return React__default.createElement(StyledDrawerModalHeader, _extends$2({}, getTitleProps(other), {
+  return React__default.createElement(StyledDrawerHeader, _extends$2({}, getTitleProps(other), {
     as: tag,
     isCloseButtonPresent: isCloseButtonPresent,
     ref: ref
   }));
 });
-HeaderComponent.displayName = 'DrawerModal.Header';
+HeaderComponent.displayName = 'Drawer.Header';
 HeaderComponent.propTypes = {
   tag: PropTypes.any
 };
@@ -975,11 +930,11 @@ const BodyComponent = forwardRef((props, ref) => {
   const {
     getContentProps
   } = useModalContext();
-  return React__default.createElement(StyledDrawerModalBody, _extends$2({}, getContentProps(props), {
+  return React__default.createElement(StyledDrawerBody, _extends$2({}, getContentProps(props), {
     ref: ref
   }), props.children);
 });
-BodyComponent.displayName = 'DrawerModal.Body';
+BodyComponent.displayName = 'Drawer.Body';
 const Body = BodyComponent;
 
 const CloseComponent = forwardRef((props, ref) => {
@@ -992,29 +947,29 @@ const CloseComponent = forwardRef((props, ref) => {
     return () => setIsCloseButtonPresent(false);
   });
   const ariaLabel = useText(CloseComponent, props, 'aria-label', 'Close drawer');
-  return React__default.createElement(StyledDrawerModalClose, _extends$2({}, getCloseProps({
+  return React__default.createElement(StyledDrawerClose, _extends$2({}, getCloseProps({
     ...props,
     'aria-label': ariaLabel
   }), {
     ref: ref
   }), React__default.createElement(SvgXStroke, null));
 });
-CloseComponent.displayName = 'DrawerModal.Close';
+CloseComponent.displayName = 'Drawer.Close';
 const Close = CloseComponent;
 
-const FooterComponent = forwardRef((props, ref) => React__default.createElement(StyledDrawerModalFooter, _extends$2({
+const FooterComponent = forwardRef((props, ref) => React__default.createElement(StyledDrawerFooter, _extends$2({
   ref: ref
 }, props)));
-FooterComponent.displayName = 'DrawerModal.Footer';
+FooterComponent.displayName = 'Drawer.Footer';
 const Footer = FooterComponent;
 
-const FooterItemComponent = forwardRef((props, ref) => React__default.createElement(StyledDrawerModalFooterItem, _extends$2({
+const FooterItemComponent = forwardRef((props, ref) => React__default.createElement(StyledDrawerFooterItem, _extends$2({
   ref: ref
 }, props)));
-FooterItemComponent.displayName = 'DrawerModal.FooterItem';
+FooterItemComponent.displayName = 'Drawer.FooterItem';
 const FooterItem = FooterItemComponent;
 
-const DrawerModalComponent = forwardRef((_ref, ref) => {
+const DrawerComponent = forwardRef((_ref, ref) => {
   let {
     id,
     isOpen,
@@ -1114,7 +1069,7 @@ const DrawerModalComponent = forwardRef((_ref, ref) => {
   const defaultValue = hasHeader ? modalProps['aria-labelledby'] : 'Modal dialog';
   const labelValue = hasHeader ? modalProps['aria-labelledby'] : props['aria-label'];
   const ariaProps = {
-    [attribute]: useText(DrawerModalComponent, {
+    [attribute]: useText(DrawerComponent, {
       [attribute]: labelValue
     }, attribute, defaultValue)
   };
@@ -1131,12 +1086,12 @@ const DrawerModalComponent = forwardRef((_ref, ref) => {
     nodeRef: transitionRef
   }, React__default.createElement(StyledBackdrop, _extends$2({
     isAnimated: true
-  }, getBackdropProps(backdropProps)), React__default.createElement(StyledDrawerModal, _extends$2({}, modalProps, ariaProps, props, {
+  }, getBackdropProps(backdropProps)), React__default.createElement(StyledDrawer, _extends$2({}, modalProps, ariaProps, props, {
     ref: mergeRefs([ref, modalRef, transitionRef])
   }))))), rootNode);
 });
-DrawerModalComponent.displayName = 'DrawerModal';
-DrawerModalComponent.propTypes = {
+DrawerComponent.displayName = 'Drawer';
+DrawerComponent.propTypes = {
   backdropProps: PropTypes.object,
   focusOnMount: PropTypes.bool,
   restoreFocus: PropTypes.bool,
@@ -1144,17 +1099,17 @@ DrawerModalComponent.propTypes = {
   appendToNode: PropTypes.any,
   isOpen: PropTypes.bool
 };
-DrawerModalComponent.defaultProps = {
+DrawerComponent.defaultProps = {
   focusOnMount: true ,
   restoreFocus: true
 };
-const DrawerModal = DrawerModalComponent;
-DrawerModal.Body = Body;
-DrawerModal.Close = Close;
-DrawerModal.Footer = Footer;
-DrawerModal.FooterItem = FooterItem;
-DrawerModal.Header = Header;
+const Drawer = DrawerComponent;
+Drawer.Body = Body;
+Drawer.Close = Close;
+Drawer.Footer = Footer;
+Drawer.FooterItem = FooterItem;
+Drawer.Header = Header;
 
-const PLACEMENT = ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom'];
+const PLACEMENT = ['auto', ...PLACEMENT$1];
 
-export { Body$2 as Body, Close$2 as Close, DrawerModal, Footer$2 as Footer, FooterItem$2 as FooterItem, Header$1 as Header, Modal, PLACEMENT, TooltipModal };
+export { Body$2 as Body, Close$2 as Close, Drawer, Footer$2 as Footer, FooterItem$2 as FooterItem, Header$1 as Header, Modal, PLACEMENT, TooltipModal };

package/dist/typings/elements/{DrawerModal/DrawerModal.d.ts → Drawer/Drawer.d.ts}

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import React from 'react';
-import { IDrawerModalProps } from '../../types';
+import { IDrawerProps } from '../../types';
 import { Header } from './Header';
 import { Body } from './Body';
 import { Close } from './Close';
@@ -14,7 +14,7 @@ import { FooterItem } from './FooterItem';
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-export declare const DrawerModal: React.ForwardRefExoticComponent<IDrawerModalProps & React.RefAttributes<HTMLDivElement>> & {
+export declare const Drawer: React.ForwardRefExoticComponent<IDrawerProps & React.RefAttributes<HTMLDivElement>> & {
     Body: typeof Body;
     Close: typeof Close;
     Footer: typeof Footer;

package/dist/typings/elements/{DrawerModal → Drawer}/Header.d.ts

@@ -5,8 +5,8 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import React from 'react';
-import { IDrawerModalHeaderProps } from '../../types';
+import { IDrawerHeaderProps } from '../../types';
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-export declare const Header: React.ForwardRefExoticComponent<IDrawerModalHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Header: React.ForwardRefExoticComponent<IDrawerHeaderProps & React.RefAttributes<HTMLDivElement>>;

package/dist/typings/index.d.ts

@@ -11,5 +11,5 @@ export { Footer } from './elements/Footer';
 export { FooterItem } from './elements/FooterItem';
 export { Header } from './elements/Header';
 export { TooltipModal } from './elements/TooltipModal/TooltipModal';
-export { DrawerModal } from './elements/DrawerModal/DrawerModal';
-export { PLACEMENT, type IModalProps, type IDrawerModalProps, type ITooltipModalProps, type Placement as GARDEN_PLACEMENT } from './types';
+export { Drawer } from './elements/Drawer/Drawer';
+export { PLACEMENT, type IModalProps, type IDrawerProps, type ITooltipModalProps, type Placement as GARDEN_PLACEMENT } from './types';

package/dist/typings/styled/{StyledDrawerModal.d.ts → StyledDrawer.d.ts}

@@ -8,7 +8,7 @@ import { DefaultTheme } from 'styled-components';
 /**
  * 1. Smooth iOS scrolling.
  */
-export declare const StyledDrawerModal: import("styled-components").StyledComponent<"div", DefaultTheme, {
+export declare const StyledDrawer: import("styled-components").StyledComponent<"div", DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 }, "data-garden-id" | "data-garden-version">;

package/dist/typings/styled/{StyledDrawerModalBody.d.ts → StyledDrawerBody.d.ts}

@@ -4,7 +4,7 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-export declare const StyledDrawerModalBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+export declare const StyledDrawerBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 } & {

package/dist/typings/styled/{StyledDrawerModalClose.d.ts → StyledDrawerClose.d.ts}

@@ -9,7 +9,7 @@ export declare const BASE_MULTIPLIERS: {
     side: number;
     size: number;
 };
-export declare const StyledDrawerModalClose: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
+export declare const StyledDrawerClose: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 } & {

package/dist/typings/styled/{StyledDrawerModalFooterItem.d.ts → StyledDrawerFooter.d.ts}

@@ -4,7 +4,7 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-export declare const StyledDrawerModalFooterItem: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+export declare const StyledDrawerFooter: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 }, "data-garden-id" | "data-garden-version">;

package/dist/typings/styled/{StyledDrawerModalFooter.d.ts → StyledDrawerFooterItem.d.ts}

@@ -4,7 +4,7 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-export declare const StyledDrawerModalFooter: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+export declare const StyledDrawerFooterItem: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 }, "data-garden-id" | "data-garden-version">;

package/dist/typings/styled/{StyledDrawerModalHeader.d.ts → StyledDrawerHeader.d.ts}

@@ -8,7 +8,7 @@
  * 1. the padding added to the Header is based on the close button size and spacing,
  *    with additional padding (+ 2) between the Header content and Close button
  */
-export declare const StyledDrawerModalHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("./StyledHeader").IStyledHeaderProps & {
+export declare const StyledDrawerHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("./StyledHeader").IStyledHeaderProps & {
     'data-garden-id': string;
     'data-garden-version': string;
 }, "data-garden-id" | "data-garden-version">;