fix: stop triggers propagating and callall functions

.github/workflows/quality.yml

@@ -13,9 +13,9 @@ jobs:
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
-      - uses: actions/checkout@v2
-        with:
-          token: ${{ secrets.SCRIPT_TOKEN }}
+      - uses: actions/checkout@v3
+        # with:
+        #   token: ${{ secrets.SCRIPT_TOKEN }}
 
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v2

packages/accordion/src/accordion.tsx

@@ -1,9 +1,9 @@
-import React from 'react'
 import { callAll } from '@dorai-ui/utils/call-all'
 import { GetId } from '@dorai-ui/utils/get-id'
+import { KeyBoardKeys } from '@dorai-ui/utils/keyboard'
 import { mergeRefs } from '@dorai-ui/utils/merge-refs'
 import * as Polymorphic from '@dorai-ui/utils/polymorphic'
-import { KeyBoardKeys } from '@dorai-ui/utils/keyboard'
+import React from 'react'
 
 enum TypeEnum {
   Single = 'single',
@@ -321,7 +321,7 @@ const Trigger: TriggerType = React.forwardRef(
         aria-expanded={open}
         aria-controls={contentIds?.panelId || undefined}
         onClick={handleClickEvent}
-        onKeyDown={(event) => handleKeyEvent(event)}
+        onKeyDown={callAll(props.onKeyDown, handleKeyEvent)}
         {...props}
         ref={ref}
       >

packages/alert-dialog/src/alert-dialog.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
 import { Modal, useModalContext } from '@dorai-ui/modal'
-import * as Polymorphic from '@dorai-ui/utils/polymorphic'
-import { mergeRefs } from '@dorai-ui/utils/merge-refs'
 import { callAll } from '@dorai-ui/utils/call-all'
+import { mergeRefs } from '@dorai-ui/utils/merge-refs'
+import * as Polymorphic from '@dorai-ui/utils/polymorphic'
+import React from 'react'
 
 /**
  * Alert Dialog Context
@@ -63,25 +63,27 @@ const Root = ({ children, ...props }: ModalType) => {
  *
  *
  */
-type GroupOwnProps = {
+type ModalGroupOwnProps = {
   children: React.ReactNode
 }
 
-type GroupProps<C extends React.ElementType> =
-  Polymorphic.ComponentPropsWithRef<C, GroupOwnProps>
+type ModalProps<C extends React.ElementType> =
+  Polymorphic.ComponentPropsWithRef<C, ModalGroupOwnProps>
 
-const __DEFAULT_GROUP_TAG__ = 'div'
+const __DEFAULT_MODAL_GROUP_TAG__ = 'div'
 
-type GroupType = <C extends React.ElementType = typeof __DEFAULT_GROUP_TAG__>(
-  props: GroupProps<C>
+type ModalGroupType = <
+  C extends React.ElementType = typeof __DEFAULT_MODAL_GROUP_TAG__
+>(
+  props: ModalProps<C>
 ) => React.ReactElement | null
 
-const Group: GroupType = React.forwardRef(
-  <C extends React.ElementType = typeof __DEFAULT_GROUP_TAG__>(
-    { as, children, ...props }: GroupProps<C>,
+const Group: ModalGroupType = React.forwardRef(
+  <C extends React.ElementType = typeof __DEFAULT_MODAL_GROUP_TAG__>(
+    { as, children, ...props }: ModalProps<C>,
     ref: Polymorphic.Ref<C>
   ) => {
-    const TagName = as || __DEFAULT_GROUP_TAG__
+    const TagName = as || __DEFAULT_MODAL_GROUP_TAG__
 
     return (
       <Modal.Group as={TagName} role='alertdialog' {...props} ref={ref}>
@@ -116,12 +118,12 @@ const Cancel: CancelType = React.forwardRef(
     { as, children, ...props }: CancelProps<C>,
     ref: Polymorphic.Ref<C>
   ) => {
+    const TagName = as || __DEFAULT_CANCEL_TAG__
+
     const { cancelRef } = useAlertDialogContext('Cancel')
 
     const mergedRef = mergeRefs([cancelRef, ref])
 
-    const TagName = as || __DEFAULT_CANCEL_TAG__
-
     return (
       <Modal.Close as={TagName} {...props} ref={mergedRef}>
         {children}
@@ -159,7 +161,14 @@ const Action: ActionType = React.forwardRef(
 
     const { setIsOpen } = useModalContext('Action')
 
-    const handleClickEvent = callAll(props.onClick, () => setIsOpen(false))
+    function propsClick(e: React.MouseEvent<HTMLElement, MouseEvent>) {
+      e.stopPropagation()
+      if (props.onClick) {
+        props.onClick(e)
+      }
+    }
+
+    const handleClickEvent = callAll(propsClick, () => setIsOpen(false))
 
     const propsHandled = {
       ...props,

packages/combobox/docs/combobox.stories.tsx

@@ -18,7 +18,7 @@ const Template: ComponentStory<typeof Combobox> = (args) => {
 
   return (
     <div>
-      <Combobox {...args} onSelect={setQuery} value={DATA[0].name}>
+      <Combobox {...args}>
         <Combobox.Input
           as='input'
           openOnFocus={true}

packages/modal/docs/modal.stories.tsx

@@ -44,7 +44,13 @@ export const Controlled: ComponentStory<typeof Modal> =
   function AccordionComponent({ ...args }) {
     return (
       <Modal {...args}>
-        <Modal.Trigger>Open Modal</Modal.Trigger>
+        <Modal.Trigger
+          onClick={(e: any) => {
+            console.log(e.target)
+          }}
+        >
+          Open Modal
+        </Modal.Trigger>
         <Modal.Group>
           <Modal.Overlay
             style={{
@@ -76,8 +82,10 @@ export default {
   component: Modal,
   args: {
     isOpen: false,
-    persistOnOpen: true,
+    persistOnOpen: false,
     // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onClick: () => {}
+    onClick: (e: any) => {
+      console.log(e)
+    }
   }
 } as ComponentMeta<typeof Modal>

packages/modal/src/modal.tsx

@@ -88,22 +88,43 @@ const useModalContext = (component: string) => {
  * Modal Group composes the other components
  *
  */
+// type ModalGroupOwnProps = {
+//   children: React.ReactNode
+// }
+// type ModalProps<C extends React.ElementType> =
+//   Polymorphic.ComponentPropsWithRef<C, ModalGroupOwnProps>
+
+// const __DEFAULT_MODAL_GROUP_TAG__ = 'div'
+
+// type ModalGroupType = <
+//   C extends React.ElementType = typeof __DEFAULT_MODAL_GROUP_TAG__
+// >(
+//   props: ModalProps<C>
+// ) => React.ReactElement | null
+
+// const Group: ModalGroupType = React.forwardRef(
+//   <C extends React.ElementType = typeof __DEFAULT_MODAL_GROUP_TAG__>(
+//     { as, children, ...props }: ModalProps<C>,
+//     ref: Polymorphic.Ref<C>
+//   )
+
 type ModalGroupOwnProps = {
   children: React.ReactNode
 }
+
 type ModalProps<C extends React.ElementType> =
   Polymorphic.ComponentPropsWithRef<C, ModalGroupOwnProps>
 
 const __DEFAULT_MODAL_GROUP_TAG__ = 'div'
 
 type ModalGroupType = <
-  C extends React.ElementType = typeof __DEFAULT_MODAL_GROUP_TAG__
+  C extends React.ElementType = typeof __DEFAULT_TRIGGER_TAG__
 >(
   props: ModalProps<C>
 ) => React.ReactElement | null
 
 const Group: ModalGroupType = React.forwardRef(
-  <C extends React.ElementType = typeof __DEFAULT_MODAL_GROUP_TAG__>(
+  <C extends React.ElementType = typeof __DEFAULT_TRIGGER_TAG__>(
     { as, children, ...props }: ModalProps<C>,
     ref: Polymorphic.Ref<C>
   ) => {
@@ -198,15 +219,17 @@ const Trigger: TriggerType = React.forwardRef(
 
     const TagName = as || __DEFAULT_TRIGGER_TAG__
 
-    const handleClicks = callAll(props.onClick, () => context.setIsOpen(true))
-
-    const propsHandled = {
-      ...props,
-      onClick: handleClicks
+    function propsClick(e: React.MouseEvent<HTMLElement, MouseEvent>) {
+      e.stopPropagation()
+      if (props.onClick) {
+        props.onClick(e)
+      }
     }
 
+    const handleClick = callAll(propsClick, () => context.setIsOpen(true))
+
     return (
-      <TagName {...propsHandled} ref={ref}>
+      <TagName {...props} ref={ref} onClick={handleClick}>
         {children}
       </TagName>
     )
@@ -240,11 +263,18 @@ const Close: CloseType = React.forwardRef(
 
     const TagName = as || __DEFAULT_CLOSE_TAG__
 
-    const handleClicks = callAll(props.onClick, () => context.setIsOpen(false))
+    function propsClick(e: React.MouseEvent<HTMLElement, MouseEvent>) {
+      e.stopPropagation()
+      if (props.onClick) {
+        props.onClick(e)
+      }
+    }
+
+    const handleClick = callAll(propsClick, () => context.setIsOpen(false))
 
     const propsHandled = {
       ...props,
-      onClick: handleClicks
+      onClick: handleClick
     }
 
     return (
@@ -318,20 +348,40 @@ const Overlay: OverlayType = React.forwardRef(
 
     const mergedRef = mergeRefs([overlayRef, ref])
 
-    const closeModal = callAll(props.onClick, () => context.setIsOpen(false))
+    function propsClick(
+      e:
+        | React.MouseEvent<HTMLElement, MouseEvent>
+        | React.KeyboardEvent<HTMLElement>
+    ) {
+      e.stopPropagation()
+
+      if (props.onClick) {
+        props.onClick(e)
+      }
+
+      if (props.onMouseDown) {
+        props.onMouseDown(e)
+      }
+
+      if (props.onKeyDown) {
+        props.onKeyDown(e)
+      }
+    }
+
+    const closeModal = callAll(propsClick, () => context.setIsOpen(false))
 
     const handleCloseOnOverlay = (
       event: React.MouseEvent<HTMLElement, MouseEvent>
     ) => {
       if (event.target === overlayRef.current && !context.persistOnOpen) {
-        closeModal()
+        closeModal(event)
       }
     }
 
     const handleEvent = (event: React.KeyboardEvent<HTMLElement>): void => {
       if (event.key === KeyBoardKeys.Escape) {
         event.stopPropagation()
-        closeModal()
+        closeModal(event)
       }
     }
 

packages/switch/src/switch.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 
+import { Label, LabelContextProvider, useLabelValue } from '@dorai-ui/label'
 import { callAll } from '@dorai-ui/utils/call-all'
 import { GetId } from '@dorai-ui/utils/get-id'
-import * as Polymorphic from '@dorai-ui/utils/polymorphic'
 import { KeyBoardKeys } from '@dorai-ui/utils/keyboard'
-import { LabelContextProvider, useLabelValue, Label } from '@dorai-ui/label'
+import * as Polymorphic from '@dorai-ui/utils/polymorphic'
 
 const GroupContext = React.createContext<{
   id: string
@@ -152,7 +152,7 @@ const SwitchRoot: RootType = React.forwardRef(
         aria-labelledby={ids}
         id={id}
         tabIndex={0}
-        onKeyDown={(e) => callAll(props.keyDown, () => handleKeyEvent(e))}
+        onKeyDown={callAll(props.keyDown, handleKeyEvent)}
         {...propsHandled}
         ref={ref}
         value={value}

packages/utils/src/call-all.ts

@@ -1,6 +1,6 @@
 const callAll =
-  (...fns: ((args: unknown[]) => void)[]) =>
-  (...args: unknown[]) =>
-    fns.forEach((fn) => fn && fn([...args]))
+  <T extends any[]>(...fns: Array<(...args: T) => void>) =>
+  (...args: T) =>
+    fns.forEach((fn) => fn?.(...args))
 
 export { callAll }