@loadsmart/loadsmart-ui 5.14.3 → 5.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loadsmart/loadsmart-ui",
-  "version": "5.14.3",
+  "version": "5.15.0",
   "description": "Miranda UI, a React UI library",
   "main": "dist",
   "files": [

package/src/components/Drawer/Drawer.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Story, Meta } from '@storybook/react/types-6-0'
+import type { Meta, Story } from '@storybook/react/types-6-0'
 
 import { Drawer, useDrawer } from '.'
 import type { DrawerProps } from './Drawer'
@@ -31,7 +31,7 @@ export const Playground: Story<DrawerProps> = ({ open, ...others }: DrawerProps)
     <div className="flex flex-col space-y-2">
       <div className="flex items-center">
         <Button onClick={show}>Open Drawer</Button>
-        <Drawer {...others} open={isOpen} onClose={hide}>
+        <Drawer {...others} open={isOpen} onClose={hide} onClickOutside={hide}>
           <Drawer.Header>Drawer Header</Drawer.Header>
           <Drawer.Body>
             {TWENTY_SIZE_ARR.map((_, index) => (
@@ -60,7 +60,7 @@ export const SmallerContentPlayground: Story<DrawerProps> = ({ open, ...others }
     <div className="flex flex-col space-y-2">
       <div className="flex items-center">
         <Button onClick={show}>Open Drawer</Button>
-        <Drawer {...others} open={isOpen} onClose={hide}>
+        <Drawer {...others} open={isOpen} onClose={hide} onClickOutside={hide}>
           <Drawer.Header>Drawer Header</Drawer.Header>
           <Drawer.Body>
             {TWENTY_SIZE_ARR.slice(0, 3).map((_, index) => (

package/src/components/Drawer/Drawer.test.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
-import renderer, { screen, fire } from '../../tests/renderer'
+import renderer, { fire, screen } from '../../tests/renderer'
 
-import Drawer from './Drawer'
 import type { DrawerProps } from './Drawer'
+import Drawer from './Drawer'
+import { fireEvent, waitFor } from '@testing-library/react'
 
 const setup = (props: DrawerProps) => renderer(<Drawer {...props} />).render()
 
@@ -28,6 +29,27 @@ describe('Drawer', () => {
     expect(props.onClose).toHaveBeenCalled()
   })
 
+  it('closes drawer only when clicking outside', async () => {
+    const props = {
+      open: true,
+      onClickOutside: jest.fn(),
+    }
+
+    setup(props)
+
+    fireEvent.mouseUp(screen.getByRole('dialog'))
+
+    await waitFor(() => {
+      expect(props.onClickOutside).not.toHaveBeenCalled()
+    })
+
+    fireEvent.mouseUp(screen.getByRole('complementary'))
+
+    await waitFor(() => {
+      expect(props.onClickOutside).toHaveBeenCalledTimes(1)
+    })
+  })
+
   it('renders without close button', () => {
     setup({
       open: true,

package/src/components/Drawer/Drawer.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode, useEffect, useState } from 'react'
+import type { PropsWithChildren } from 'react'
+import React, { ReactNode, useEffect, useRef, useState } from 'react'
 import ReactDOM from 'react-dom'
 import styled from 'styled-components'
 
@@ -7,13 +8,12 @@ import conditional, { whenProps } from 'tools/conditional'
 import { getToken as token } from 'theming'
 import DefaultCloseButton from 'common/CloseButton'
 
-import type { PropsWithChildren } from 'react'
-
 export interface DrawerProps {
   children?: ReactNode
   className?: string
   open: boolean
   onClose?: () => void
+  onClickOutside?: () => void
 }
 
 const StyledAside = styled.aside<Pick<DrawerProps, 'open'>>`
@@ -160,8 +160,16 @@ function DrawerFooter({
   )
 }
 
-function Drawer({ className, children, open, onClose, ...others }: DrawerProps): JSX.Element {
+function Drawer({
+  className,
+  children,
+  open,
+  onClose,
+  onClickOutside,
+  ...others
+}: DrawerProps): JSX.Element {
   const [invisible, setInvisible] = useState(!open)
+  const ref = useRef<HTMLElement>(null)
 
   function handleTransitionEnd() {
     if (!open) {
@@ -175,8 +183,24 @@ function Drawer({ className, children, open, onClose, ...others }: DrawerProps):
     }
   }, [open])
 
+  useEffect(() => {
+    const currentRef = ref.current
+
+    if (currentRef && onClickOutside) {
+      const handleClick = (event: MouseEvent) => {
+        const hasClickedOutside = currentRef.isSameNode(event.target as Element)
+
+        if (hasClickedOutside) onClickOutside()
+      }
+
+      currentRef.addEventListener('mouseup', handleClick)
+
+      return () => currentRef.removeEventListener('mouseup', handleClick)
+    }
+  }, [onClickOutside])
+
   return ReactDOM.createPortal(
-    <StyledAside open={!invisible}>
+    <StyledAside open={!invisible} ref={ref}>
       <StyledSection
         {...others}
         className={className}