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

package/README.md

@@ -14,6 +14,8 @@ npm install react react-dom styled-components @zendeskgarden/react-theming
 
 ## Usage
 
+### Modal
+
 ```jsx
 import { ThemeProvider } from '@zendeskgarden/react-theming';
 import { Modal, Header, Body, Footer, FooterItem, Close } from '@zendeskgarden/react-modals';
@@ -38,3 +40,59 @@ import { Button } from '@zendeskgarden/react-buttons';
   </Modal>
 </ThemeProvider>;
 ```
+
+### Drawer
+
+```jsx
+import { ThemeProvider } from '@zendeskgarden/react-theming';
+import { Drawer } from '@zendeskgarden/react-modals';
+import { Button } from '@zendeskgarden/react-buttons';
+
+const [isOpen, setIsOpen] = useState(false)
+
+<ThemeProvider>
+  <Button onClick={() => setIsOpen(true)}>
+    Open
+  </Button>
+  <Drawer isOpen={state.isOpen} onClose={() => setIsOpen(false)}>
+    <Drawer.Header>Example Title</Drawer.Header>
+    <Drawer.Body>Some content</Drawer.Body>
+    <Drawer.Footer>
+      <Drawer.FooterItem>
+        <Button>Click</Button>
+      </Drawer.FooterItem>
+    </Drawer.Footer>
+    <Drawer.Close aria-Label="Close" />
+  </Drawer>
+</ThemeProvider>
+```
+
+### TooltipModal
+
+```jsx
+import { ThemeProvider } from '@zendeskgarden/react-theming';
+import { TooltipModal } from '@zendeskgarden/react-modals';
+import { Button } from '@zendeskgarden/react-buttons';
+
+const [isOpen, setIsOpen] = useState(false);
+const buttonRef = useRef(null);
+
+<ThemeProvider>
+  <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
+    Open
+  </Button>
+  <TooltipModal
+    onClose={() => setIsOpen(false)}
+    referenceElement={isOpen && buttonRef.current ? buttonRef.current : undefined}
+  >
+    <TooltipModal.Title>Example Title</TooltipModal.Title>
+    <TooltipModal.Body>Some content</TooltipModal.Body>
+    <TooltipModal.Footer>
+      <TooltipModal.FooterItem>
+        <Button>Click</Button>
+      </TooltipModal.FooterItem>
+    </TooltipModal.Footer>
+    <TooltipModal.Close aria-label="Close" />
+  </TooltipModal>
+</ThemeProvider>;
+```

package/dist/index.cjs.js

@@ -20,8 +20,8 @@ var ownerDocument = require('dom-helpers/ownerDocument');
 var ownerWindow = require('dom-helpers/ownerWindow');
 var css = require('dom-helpers/css');
 var getScrollbarSize = require('dom-helpers/scrollbarSize');
-var reactPopper = require('react-popper');
 var reactTransitionGroup = require('react-transition-group');
+var reactDom = require('@floating-ui/react-dom');
 var activeElement = require('dom-helpers/activeElement');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -80,7 +80,7 @@ const animationStyles$1 = props => {
 };
 const StyledBackdrop = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledBackdrop",
   componentId: "sc-mzdjpo-0"
@@ -96,7 +96,7 @@ StyledBackdrop.propTypes = {
 const COMPONENT_ID$i = 'modals.body';
 const StyledBody = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-14rzecg-0"
@@ -121,7 +121,7 @@ const BASE_MULTIPLIERS$1 = {
 };
 const StyledClose = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledClose",
   componentId: "sc-iseudj-0"
@@ -133,7 +133,7 @@ StyledClose.defaultProps = {
 const COMPONENT_ID$g = 'modals.footer';
 const StyledFooter = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledFooter",
   componentId: "sc-d8pfdu-0"
@@ -145,7 +145,7 @@ StyledFooter.defaultProps = {
 const COMPONENT_ID$f = 'modals.footer_item';
 const StyledFooterItem = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledFooterItem",
   componentId: "sc-1mb76hl-0"
@@ -157,7 +157,7 @@ StyledFooterItem.defaultProps = {
 const COMPONENT_ID$e = 'modals.header';
 const StyledHeader = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-1787r9v-0"
@@ -228,7 +228,7 @@ const sizeStyles$1 = props => {
 };
 const StyledModal = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledModal",
   componentId: "sc-1pe1axu-0"
@@ -244,7 +244,7 @@ StyledModal.defaultProps = {
 const COMPONENT_ID$c = 'modals.tooltip_modal.backdrop';
 const StyledTooltipModalBackdrop = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledTooltipModalBackdrop",
   componentId: "sc-1yaomgq-0"
@@ -253,70 +253,14 @@ StyledTooltipModalBackdrop.defaultProps = {
   theme: reactTheming.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__default.default.div.attrs(props => ({
   className: props.isAnimated && 'is-animated'
 })).withConfig({
   displayName: "StyledTooltipWrapper",
   componentId: "sc-1xk05kf-0"
-})(["", ";"], props => reactTheming.menuStyles(getMenuPosition(props.placement), {
+})(["top:0;left:0;", ";"], props => reactTheming.menuStyles(reactTheming.getMenuPosition(props.placement), {
   theme: props.theme,
   hidden: false,
-  margin: '0',
   zIndex: props.zIndex,
   animationModifier: '.is-animated'
 }));
@@ -327,13 +271,13 @@ StyledTooltipWrapper.defaultProps = {
 const COMPONENT_ID$b = 'modals.tooltip_modal';
 const StyledTooltipModal = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.0',
+  '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 = reactTheming.arrowStyles(getArrowPosition(props.placement), {
+  const computedArrowStyles = reactTheming.arrowStyles(reactTheming.getArrowPosition(props.theme, props.placement), {
     size: `${props.theme.space.base * 2}px`,
     inset: '1px',
     animationModifier: '.is-animated'
@@ -356,7 +300,7 @@ const sizeStyles = props => `
 `;
 const StyledTooltipModalTitle = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledTooltipModalTitle",
   componentId: "sc-11xjgjs-0"
@@ -368,7 +312,7 @@ StyledTooltipModalTitle.defaultProps = {
 const COMPONENT_ID$9 = 'modals.tooltip_modal.body';
 const StyledTooltipModalBody = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledTooltipModalBody",
   componentId: "sc-195dkzj-0"
@@ -380,7 +324,7 @@ StyledTooltipModalBody.defaultProps = {
 const COMPONENT_ID$8 = 'modals.tooltip_modal.footer';
 const StyledTooltipModalFooter = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledTooltipModalFooter",
   componentId: "sc-fm36a9-0"
@@ -392,7 +336,7 @@ StyledTooltipModalFooter.defaultProps = {
 const COMPONENT_ID$7 = 'modals.tooltip_modal.footer_item';
 const StyledTooltipModalFooterItem = styled__default.default(StyledFooterItem).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledTooltipModalFooterItem",
   componentId: "sc-1nahj6p-0"
@@ -404,7 +348,7 @@ StyledTooltipModalFooterItem.defaultProps = {
 const COMPONENT_ID$6 = 'modals.tooltip_modal.close';
 const StyledTooltipModalClose = styled__default.default(StyledClose).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledTooltipModalClose",
   componentId: "sc-1h2ke3q-0"
@@ -428,14 +372,14 @@ const boxShadow = props => {
   const color = reactTheming.getColor('neutralHue', 800, theme, 0.35);
   return shadows.lg(offsetY, blurRadius, color);
 };
-const StyledDrawerModal = styled__default.default.div.attrs({
+const StyledDrawer = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.0'
+  '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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
-StyledDrawerModal.defaultProps = {
+StyledDrawer.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
@@ -445,62 +389,62 @@ const BASE_MULTIPLIERS = {
   side: 2,
   size: BASE_MULTIPLIERS$1.size
 };
-const StyledDrawerModalClose = styled__default.default(StyledClose).attrs({
+const StyledDrawerClose = styled__default.default(StyledClose).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.0'
+  '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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
-StyledDrawerModalClose.defaultProps = {
+StyledDrawerClose.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 const COMPONENT_ID$3 = 'modals.drawer_modal.header';
-const StyledDrawerModalHeader = styled__default.default(StyledHeader).attrs({
+const StyledDrawerHeader = styled__default.default(StyledHeader).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.0'
+  '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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
-StyledDrawerModalHeader.defaultProps = {
+StyledDrawerHeader.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 const COMPONENT_ID$2 = 'modals.drawer_modal.body';
-const StyledDrawerModalBody = styled__default.default(StyledBody).attrs({
+const StyledDrawerBody = styled__default.default(StyledBody).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.0'
+  '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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
-StyledDrawerModalBody.defaultProps = {
+StyledDrawerBody.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 const COMPONENT_ID$1 = 'modals.drawer_modal.footer';
-const StyledDrawerModalFooter = styled__default.default.div.attrs({
+const StyledDrawerFooter = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.0'
+  '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} ${reactTheming.getColor('neutralHue', 200, props.theme)}`, props => props.theme.space.base * 5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
-StyledDrawerModalFooter.defaultProps = {
+StyledDrawerFooter.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 const COMPONENT_ID = 'modals.drawer_modal.footer_item';
-const StyledDrawerModalFooterItem = styled__default.default(StyledFooterItem).attrs({
+const StyledDrawerFooterItem = styled__default.default(StyledFooterItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
-  displayName: "StyledDrawerModalFooterItem",
-  componentId: "sc-1vbl885-0"
+  displayName: "StyledDrawerFooterItem",
+  componentId: "sc-m2yul4-0"
 })(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
-StyledDrawerModalFooterItem.defaultProps = {
+StyledDrawerFooterItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
@@ -835,12 +779,12 @@ const FooterItemComponent$1 = React.forwardRef((props, ref) => React__namespace.
 FooterItemComponent$1.displayName = 'TooltipModal.FooterItem';
 const FooterItem$1 = FooterItemComponent$1;
 
+const PLACEMENT_DEFAULT = 'top';
 const TooltipModalComponent = React__namespace.default.forwardRef((_ref, ref) => {
   let {
     appendToNode,
     referenceElement,
-    popperModifiers,
-    placement,
+    placement: _placement,
     onClose,
     hasArrow,
     isAnimated,
@@ -851,11 +795,11 @@ const TooltipModalComponent = React__namespace.default.forwardRef((_ref, ref) =>
     id,
     ...props
   } = _ref;
-  const theme = React.useContext(styled.ThemeContext);
+  const theme = React.useContext(styled.ThemeContext) || reactTheming.DEFAULT_THEME;
   const previousReferenceElementRef = React.useRef();
   const modalRef = React.useRef(null);
   const transitionRef = React.useRef(null);
-  const [popperElement, setPopperElement] = React.useState();
+  const [floatingElement, setFloatingElement] = React.useState();
   const [hasTitle, setHasTitle] = React.useState(false);
   const {
     getTitleProps,
@@ -870,27 +814,37 @@ const TooltipModalComponent = React__namespace.default.forwardRef((_ref, ref) =>
     focusOnMount,
     restoreFocus: false
   });
+  const [floatingPlacement] = reactTheming.getFloatingPlacements(theme, _placement === 'auto' ? PLACEMENT_DEFAULT : _placement);
+  const {
+    refs,
+    placement,
+    update,
+    floatingStyles: {
+      transform
+    }
+  } = reactDom.useFloating({
+    elements: {
+      reference: referenceElement,
+      floating: floatingElement
+    },
+    placement: floatingPlacement,
+    middleware: [reactDom.offset(theme.space.base * 3), _placement === 'auto' ? reactDom.autoPlacement() : undefined]
+  });
+  React.useEffect(() => {
+    let cleanup;
+    if (referenceElement && floatingElement && refs.reference.current && refs.floating.current) {
+      cleanup = reactDom.autoUpdate(refs.reference.current, refs.floating.current, update, {
+        elementResize: typeof ResizeObserver === 'function'
+      });
+    }
+    return () => cleanup && cleanup();
+  }, [referenceElement, floatingElement, refs.reference, refs.floating, update]);
   React.useEffect(() => {
     if (!referenceElement && previousReferenceElementRef.current && restoreFocus) {
       previousReferenceElementRef.current.focus();
     }
     previousReferenceElementRef.current = referenceElement;
   }, [referenceElement, restoreFocus]);
-  const popperPlacement = React.useMemo(() => theme.rtl ? getRtlPopperPlacement(placement) : getPopperPlacement(placement), [placement, theme.rtl]);
-  const {
-    styles,
-    attributes,
-    state
-  } = reactPopper.usePopper(referenceElement, popperElement, {
-    placement: popperPlacement,
-    modifiers: [{
-      name: 'offset',
-      options: {
-        offset: [0, theme.space.base * 3]
-      }
-    },
-    ...(popperModifiers || [])]
-  });
   const modalProps = getModalProps({
     'aria-describedby': undefined,
     ...(hasTitle ? {} : {
@@ -923,15 +877,17 @@ const TooltipModalComponent = React__namespace.default.forwardRef((_ref, ref) =>
       value: value
     }, React__namespace.default.createElement(StyledTooltipModalBackdrop, _extends$2({}, getBackdropProps(), backdropProps, {
       ref: transitionRef
-    }), React__namespace.default.createElement(StyledTooltipWrapper, _extends$2({
-      ref: setPopperElement,
-      style: styles.popper,
-      placement: state ? state.placement : undefined,
+    }), React__namespace.default.createElement(StyledTooltipWrapper, {
+      ref: setFloatingElement,
+      style: {
+        transform
+      },
+      placement: placement,
       zIndex: zIndex,
       isAnimated: isAnimated
-    }, attributes.popper), React__namespace.default.createElement(StyledTooltipModal, _extends$2({
+    }, React__namespace.default.createElement(StyledTooltipModal, _extends$2({
       transitionState: transitionState,
-      placement: state ? state.placement : 'top',
+      placement: placement,
       hasArrow: hasArrow,
       isAnimated: isAnimated
     }, modalProps, ariaProps, props, {
@@ -950,7 +906,6 @@ TooltipModalComponent.defaultProps = {
 TooltipModalComponent.propTypes = {
   appendToNode: PropTypes__default.default.any,
   referenceElement: PropTypes__default.default.any,
-  popperModifiers: PropTypes__default.default.any,
   placement: PropTypes__default.default.any,
   isAnimated: PropTypes__default.default.bool,
   hasArrow: PropTypes__default.default.bool,
@@ -988,13 +943,13 @@ const HeaderComponent = React.forwardRef((_ref, ref) => {
       }
     };
   }, [hasHeader, setHasHeader]);
-  return React__namespace.default.createElement(StyledDrawerModalHeader, _extends$2({}, getTitleProps(other), {
+  return React__namespace.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__default.default.any
 };
@@ -1007,11 +962,11 @@ const BodyComponent = React.forwardRef((props, ref) => {
   const {
     getContentProps
   } = useModalContext();
-  return React__namespace.default.createElement(StyledDrawerModalBody, _extends$2({}, getContentProps(props), {
+  return React__namespace.default.createElement(StyledDrawerBody, _extends$2({}, getContentProps(props), {
     ref: ref
   }), props.children);
 });
-BodyComponent.displayName = 'DrawerModal.Body';
+BodyComponent.displayName = 'Drawer.Body';
 const Body = BodyComponent;
 
 const CloseComponent = React.forwardRef((props, ref) => {
@@ -1024,29 +979,29 @@ const CloseComponent = React.forwardRef((props, ref) => {
     return () => setIsCloseButtonPresent(false);
   });
   const ariaLabel = reactTheming.useText(CloseComponent, props, 'aria-label', 'Close drawer');
-  return React__namespace.default.createElement(StyledDrawerModalClose, _extends$2({}, getCloseProps({
+  return React__namespace.default.createElement(StyledDrawerClose, _extends$2({}, getCloseProps({
     ...props,
     'aria-label': ariaLabel
   }), {
     ref: ref
   }), React__namespace.default.createElement(SvgXStroke, null));
 });
-CloseComponent.displayName = 'DrawerModal.Close';
+CloseComponent.displayName = 'Drawer.Close';
 const Close = CloseComponent;
 
-const FooterComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledDrawerModalFooter, _extends$2({
+const FooterComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledDrawerFooter, _extends$2({
   ref: ref
 }, props)));
-FooterComponent.displayName = 'DrawerModal.Footer';
+FooterComponent.displayName = 'Drawer.Footer';
 const Footer = FooterComponent;
 
-const FooterItemComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledDrawerModalFooterItem, _extends$2({
+const FooterItemComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledDrawerFooterItem, _extends$2({
   ref: ref
 }, props)));
-FooterItemComponent.displayName = 'DrawerModal.FooterItem';
+FooterItemComponent.displayName = 'Drawer.FooterItem';
 const FooterItem = FooterItemComponent;
 
-const DrawerModalComponent = React.forwardRef((_ref, ref) => {
+const DrawerComponent = React.forwardRef((_ref, ref) => {
   let {
     id,
     isOpen,
@@ -1146,7 +1101,7 @@ const DrawerModalComponent = React.forwardRef((_ref, ref) => {
   const defaultValue = hasHeader ? modalProps['aria-labelledby'] : 'Modal dialog';
   const labelValue = hasHeader ? modalProps['aria-labelledby'] : props['aria-label'];
   const ariaProps = {
-    [attribute]: reactTheming.useText(DrawerModalComponent, {
+    [attribute]: reactTheming.useText(DrawerComponent, {
       [attribute]: labelValue
     }, attribute, defaultValue)
   };
@@ -1163,12 +1118,12 @@ const DrawerModalComponent = React.forwardRef((_ref, ref) => {
     nodeRef: transitionRef
   }, React__namespace.default.createElement(StyledBackdrop, _extends$2({
     isAnimated: true
-  }, getBackdropProps(backdropProps)), React__namespace.default.createElement(StyledDrawerModal, _extends$2({}, modalProps, ariaProps, props, {
+  }, getBackdropProps(backdropProps)), React__namespace.default.createElement(StyledDrawer, _extends$2({}, modalProps, ariaProps, props, {
     ref: reactMergeRefs.mergeRefs([ref, modalRef, transitionRef])
   }))))), rootNode);
 });
-DrawerModalComponent.displayName = 'DrawerModal';
-DrawerModalComponent.propTypes = {
+DrawerComponent.displayName = 'Drawer';
+DrawerComponent.propTypes = {
   backdropProps: PropTypes__default.default.object,
   focusOnMount: PropTypes__default.default.bool,
   restoreFocus: PropTypes__default.default.bool,
@@ -1176,22 +1131,22 @@ DrawerModalComponent.propTypes = {
   appendToNode: PropTypes__default.default.any,
   isOpen: PropTypes__default.default.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', ...reactTheming.PLACEMENT];
 
 exports.Body = Body$2;
 exports.Close = Close$2;
-exports.DrawerModal = DrawerModal;
+exports.Drawer = Drawer;
 exports.Footer = Footer$2;
 exports.FooterItem = FooterItem$2;
 exports.Header = Header$1;