build: release v1.13.0

react/CHANGELOG.md

@@ -4,8 +4,11 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-#### [v1.12.0](https://github.com/opengovsg/design-system/compare/v1.10.0...v1.12.0)
+#### [v1.13.0](https://github.com/opengovsg/design-system/compare/v1.10.0...v1.13.0)
 
+- fix: allow correct toggling of datepicker/daterangepicker with calendar button [`#572`](https://github.com/opengovsg/design-system/pull/572)
+- chore: merge v1.12.0 back to main [`#571`](https://github.com/opengovsg/design-system/pull/571)
+- build: release v1.12.0 [`#570`](https://github.com/opengovsg/design-system/pull/570)
 - chore: merge v1.11.0 back to main [`#568`](https://github.com/opengovsg/design-system/pull/568)
 - fix: date picker mobile custom input [`#569`](https://github.com/opengovsg/design-system/pull/569)
 - build: release v1.11.0 [`#567`](https://github.com/opengovsg/design-system/pull/567)

react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengovsg/design-system-react",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "description": "React components",
   "homepage": "https://github.com/opengovsg/design-system/react#readme",
   "bugs": "https://github.com/opengovsg/design-system/issues",

react/src/DatePicker/components/CalendarButton.tsx

@@ -18,6 +18,7 @@ export const CalendarButton = (): JSX.Element => {
     <IconButton
       data-group
       size={size}
+      sx={styles.calendarButton}
       aria-invalid={isInvalid}
       onClick={onOpen}
       variant="inputAttached"

react/src/DatePicker/components/DatePickerOverlay.tsx

@@ -0,0 +1,22 @@
+import { Box } from '@chakra-ui/react'
+
+import { useDatePicker } from '../DatePickerContext'
+
+export const DatePickerOverlay = () => {
+  const {
+    disclosureProps: { isOpen },
+  } = useDatePicker()
+
+  return (
+    <Box
+      position="fixed"
+      left="0px"
+      top="0px"
+      width="100vw"
+      height="$100vh"
+      display={isOpen ? 'block' : 'none'}
+      aria-hidden
+      bg="transparent"
+    />
+  )
+}

react/src/DatePicker/components/DatePickerWrapper.tsx

@@ -4,6 +4,7 @@ import { Flex, Popover, PopoverAnchor } from '@chakra-ui/react'
 import { useDatePicker } from '../DatePickerContext'
 
 import { DatePickerInput } from './DatePickerInput'
+import { DatePickerOverlay } from './DatePickerOverlay'
 
 export const DatePickerWrapper = ({ children }: PropsWithChildren) => {
   const {
@@ -40,6 +41,7 @@ export const DatePickerWrapper = ({ children }: PropsWithChildren) => {
         <PopoverAnchor>{inputToRender}</PopoverAnchor>
         {children}
       </Popover>
+      <DatePickerOverlay />
     </Flex>
   )
 }

react/src/DateRangePicker/components/CalendarButton.tsx

@@ -21,6 +21,7 @@ export const CalendarButton = (): JSX.Element => {
       aria-invalid={isInvalid}
       onClick={onOpen}
       variant="inputAttached"
+      sx={styles.calendarButton}
       aria-label={calendarButtonAria}
       icon={<Icon as={BxCalendar} sx={styles.inputButton} />}
       isActive={isOpen}

react/src/DateRangePicker/components/DateRangePickerOverlay.tsx

@@ -0,0 +1,23 @@
+import { Box } from '@chakra-ui/react'
+
+import { useDateRangePicker } from '../DateRangePickerContext'
+
+export const DateRangePickerOverlay = () => {
+  const {
+    disclosureProps: { isOpen },
+  } = useDateRangePicker()
+
+  return (
+    <Box
+      position="fixed"
+      left="0px"
+      top="0px"
+      width="100vw"
+      height="$100vh"
+      display={isOpen ? 'block' : 'none'}
+      aria-hidden
+      bg="transparent"
+      zIndex={1}
+    />
+  )
+}

react/src/DateRangePicker/components/DateRangePickerWrapper.tsx

@@ -3,6 +3,7 @@ import { Flex, forwardRef, Popover, PopoverAnchor } from '@chakra-ui/react'
 import { useDateRangePicker } from '../DateRangePickerContext'
 
 import { DateRangePickerInput } from './DateRangePickerInput'
+import { DateRangePickerOverlay } from './DateRangePickerOverlay'
 
 // eslint-disable-next-line @typescript-eslint/ban-types
 export const DateRangePickerWrapper = forwardRef<{}, 'input'>(
@@ -58,6 +59,7 @@ export const DateRangePickerWrapper = forwardRef<{}, 'input'>(
           </PopoverAnchor>
           {children}
         </Popover>
+        <DateRangePickerOverlay />
       </Flex>
     )
   },

react/src/theme/components/DatePicker.ts

@@ -7,6 +7,7 @@ export const datepickerAnatomy = anatomy('datepicker').parts(
   'header',
   'inputButton',
   'container',
+  'calendarButton',
 )
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(datepickerAnatomy.keys)
@@ -34,6 +35,17 @@ export const DatePicker = defineMultiStyleConfig({
     container: {
       bg: 'utility.ui',
     },
+    calendarButton: {
+      _active: {
+        zIndex: '1',
+        borderColor: 'utility.focus-default',
+        bg: 'interaction.muted.main.hover',
+        boxShadow: 'none',
+        _disabled: {
+          bg: 'interaction.support.disabled',
+        },
+      },
+    },
     header: {
       h: '3.5rem',
       display: 'flex',