fix: reakit state props (#2086)

* fix: reakit state props * fix: missing state props on drawer
WTTJ · Jun 15, 2023 · f38f3db · f38f3db
1 parent 6dcd82a
commit f38f3db
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 22 deletions.
diff --git a/packages/Drawer/src/index.tsx b/packages/Drawer/src/index.tsx
@@ -13,7 +13,7 @@ import {
 import { Box, BoxProps } from '@welcome-ui/box'
 import { CloseButtonProps } from '@welcome-ui/close-button'
 import { Text, TextProps } from '@welcome-ui/text'
-import { As, CreateWuiProps, forwardRef } from '@welcome-ui/system'
+import { As, CreateWuiProps, forwardRef, OmitReakitState } from '@welcome-ui/system'
 
 import * as S from './styles'
 
@@ -23,10 +23,10 @@ export type Size = 'sm' | 'md' | 'lg' | 'auto' | string
 export interface DrawerOptions {
   placement?: Placement
   size?: Size
-  state?: DialogOptions
+  state: DialogStateReturn
 }
 
-export type DrawerProps = CreateWuiProps<'div', DrawerOptions>
+export type DrawerProps = CreateWuiProps<'div', OmitReakitState<DrawerOptions, DialogOptions>>
 
 const DrawerComponent = forwardRef<'div', DrawerProps>(
   ({ as, children, placement = 'right', size = 'lg', state, ...rest }, ref) => {
@@ -35,7 +35,7 @@ const DrawerComponent = forwardRef<'div', DrawerProps>(
       // see: https://reakit.io/docs/styling/#css-in-js
       <Dialog as={as} ref={ref} {...state} {...rest}>
         {props => (
-          <S.Drawer {...props} placement={placement} size={size}>
+          <S.Drawer state={state} {...props} placement={placement} size={size}>
             {children}
           </S.Drawer>
         )}

diff --git a/packages/DropdownMenu/src/index.tsx b/packages/DropdownMenu/src/index.tsx
@@ -8,7 +8,7 @@ import {
   useMenuState,
 } from 'reakit'
 import { useNextFrame } from '@welcome-ui/utils'
-import { CreateWuiProps, forwardRef, WuiProps } from '@welcome-ui/system'
+import { CreateWuiProps, forwardRef, OmitReakitState, WuiProps } from '@welcome-ui/system'
 
 import { Arrow } from './Arrow'
 import { Item } from './Item'
@@ -18,7 +18,7 @@ import * as S from './styles'
 export interface DropdownMenuOptions {
   /** add custom props from styled system on DropdownMenu inner */
   innerProps?: WuiProps
-  state: MenuOptions & {
+  state: MenuStateReturn & {
     /**
      * @deprecated
      * will be replace by open on ariakit (reakit v2)
@@ -31,7 +31,10 @@ export interface DropdownMenuOptions {
   }
 }
 
-export type DropdownMenuProps = CreateWuiProps<'div', DropdownMenuOptions>
+export type DropdownMenuProps = CreateWuiProps<
+  'div',
+  OmitReakitState<DropdownMenuOptions, MenuOptions>
+>
 
 const DropdownMenuComponent = forwardRef<'div', DropdownMenuProps>(
   ({ children, dataTestId, innerProps = {}, state = {}, ...props }, ref) => {

diff --git a/packages/EmojiPicker/src/index.tsx b/packages/EmojiPicker/src/index.tsx
@@ -2,14 +2,14 @@ import React, { Children, cloneElement, useCallback, useMemo } from 'react'
 import { useTabState } from '@welcome-ui/tabs'
 import {
   Popover,
-  PopoverProps,
+  PopoverOptions,
   usePopoverState,
   UsePopoverStateOptions,
   UsePopoverStateReturn,
 } from '@welcome-ui/popover'
 import { Tab } from '@welcome-ui/tabs'
 import { TabInitialState } from 'reakit'
-import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
+import { CreateWuiProps, forwardRef, OmitReakitState } from '@welcome-ui/system'
 
 import * as S from './styles'
 import { List } from './List'
@@ -25,9 +25,13 @@ export interface EmojiPickerOptions {
   popoverAriaLabel?: string
   tabListAriaLabel?: string
   value: string | null
+  state: UsePopoverStateReturn
 }
 
-export type EmojiPickerProps = CreateWuiProps<'div', EmojiPickerOptions & PopoverProps>
+export type EmojiPickerProps = CreateWuiProps<
+  'div',
+  OmitReakitState<EmojiPickerOptions, PopoverOptions>
+>
 
 const EmojiPickerComponent = forwardRef<'div', EmojiPickerProps>(
   (

diff --git a/packages/Modal/src/index.tsx b/packages/Modal/src/index.tsx
@@ -1,7 +1,13 @@
 import React from 'react'
-import { DialogDisclosure, DialogInitialState, DialogStateReturn, useDialogState } from 'reakit'
+import {
+  DialogDisclosure,
+  DialogInitialState,
+  DialogOptions,
+  DialogStateReturn,
+  useDialogState,
+} from 'reakit'
 import { BoxProps } from '@welcome-ui/box'
-import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
+import { CreateWuiProps, forwardRef, OmitReakitState } from '@welcome-ui/system'
 import { useTheme } from '@xstyled/styled-components'
 import { Shape, ShapeProps } from '@welcome-ui/shape'
 
@@ -14,6 +20,8 @@ import { ModalProvider } from './context'
 
 export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'auto'
 
+export type ModalStateReturn = DialogStateReturn & { open: DialogStateReturn['visible'] }
+
 export interface ModalOptions {
   ariaLabel: string
   closeElement?: React.ElementType
@@ -23,10 +31,8 @@ export interface ModalOptions {
   children: React.ReactElement
 }
 
-export type ModalProps = CreateWuiProps<'div', ModalOptions>
-export type ModalStateReturn = DialogStateReturn & {
-  open: DialogStateReturn['visible']
-}
+export type ModalProps = CreateWuiProps<'div', OmitReakitState<ModalOptions, DialogOptions>>
+
 export type ModalInitialState = DialogInitialState & {
   /**
    * @deprecated

diff --git a/packages/Popover/src/index.tsx b/packages/Popover/src/index.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { Box } from '@welcome-ui/box'
 import { Button } from '@welcome-ui/button'
 import { CrossIcon } from '@welcome-ui/icons'
-import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
+import { CreateWuiProps, forwardRef, OmitReakitState } from '@welcome-ui/system'
 import { PopoverOptions as ReakitPopoverOptions } from 'reakit'
 
 import * as S from './styles'
@@ -17,7 +17,7 @@ export interface PopoverOptions {
 
 export type PopoverProps = CreateWuiProps<
   'div',
-  PopoverOptions & Omit<ReakitPopoverOptions, keyof UsePopoverStateReturn>
+  OmitReakitState<PopoverOptions, ReakitPopoverOptions>
 >
 
 /* eslint-disable @typescript-eslint/no-unused-vars */

diff --git a/packages/System/src/index.tsx b/packages/System/src/index.tsx
@@ -158,3 +158,9 @@ export const forwardRef = <Component extends As, Props = {}>(
 }
 
 export type ExtraSize = number | string
+
+/* utility type to remove state properties from options (will be corrected when migrating to ariakit) */
+export type OmitReakitState<
+  ComponentOptions extends { state: unknown },
+  ReakitOptions
+> = ComponentOptions & Omit<ReakitOptions, keyof ComponentOptions['state']>
diff --git a/packages/Tabs/src/index.tsx b/packages/Tabs/src/index.tsx
@@ -1,13 +1,13 @@
 import React from 'react'
-import { Tab as ReakitTab, TabOptions as ReakitTabOptions } from 'reakit'
-import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
+import { Tab as ReakitTab, TabOptions as ReakitTabOptions, TabStateReturn } from 'reakit'
+import { CreateWuiProps, forwardRef, OmitReakitState } from '@welcome-ui/system'
 
 import { TabList } from './TabList'
 import { TabPanel } from './TabPanel'
 import * as S from './styles'
 
-export type TabOptions = { state: ReakitTabOptions }
-export type TabProps = CreateWuiProps<'button', TabOptions>
+export type TabOptions = { state: TabStateReturn }
+export type TabProps = CreateWuiProps<'button', OmitReakitState<TabOptions, ReakitTabOptions>>
 
 /**
  * @name Tabs