chore: misc tidy up

packages/ui-core/src/base/ButtonRow/index.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import classNames from 'classnames'
-import type { RowProps } from '../../types'
+import type { RowProps } from '../types'
 import classes from './index.module.scss'
 
 /**

packages/ui-core/src/base/PageRow/index.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import classNames from 'classnames'
-import type { RowProps } from '../../types'
+import type { RowProps } from '../types'
 import classes from './index.module.scss'
 
 /**

packages/ui-core/src/base/PageTitle/index.tsx

@@ -6,7 +6,7 @@ import classNames from 'classnames'
 import { useEffect, useRef, useState } from 'react'
 import { ButtonSecondary } from 'ui-buttons'
 import { PageTitleTabs } from 'ui-core/base'
-import type { PageTitleProps } from '../../types'
+import type { PageTitleProps } from '../types'
 import classes from './index.module.scss'
 
 /**

packages/ui-core/src/base/PageTitleTabs/index.tsx

@@ -3,7 +3,7 @@
 
 import classNames from 'classnames'
 import { ButtonTab } from 'ui-buttons'
-import type { PageTitleProps, PageTitleTabProps } from '../../types'
+import type { PageTitleProps, PageTitleTabProps } from '../types'
 import classes from './index.module.scss'
 
 /**

packages/ui-core/src/types.ts → packages/ui-core/src/base/types.ts

@@ -4,7 +4,6 @@
 import type { ComponentBase } from '@w3ux/types'
 
 export type RowProps = ComponentBase & {
-  // whether there is margin space vertically.
   yMargin?: boolean
 }
 
@@ -20,23 +19,15 @@ export type PageTitleProps = PageTitleTabsProps & {
 }
 
 export interface PageTitleTabsProps {
-  // whether the title stick on the same position.
   sticky?: boolean
-  // an array of tab pages.
   tabs?: PageTitleTabProps[]
 }
 
 export interface PageTitleTabProps {
-  // whether the title stick on the same position.
   sticky?: boolean
-  // title of the tab button.
   title: string
-  // whether it is clicked.
   active: boolean
-  // it leads to the corresponding tab page.
   onClick: () => void
-  // a badge that can have a glance at before visting the tab page.
   badge?: string | number
-  // whether the tab button is disabled.
   disabled?: boolean
 }

packages/ui-core/src/overlay/Backdrop/index.tsx

@@ -3,8 +3,8 @@
 
 import classNames from 'classnames'
 import { motion } from 'framer-motion'
-import type { ModalOverlayProps } from '../../../../ui-overlay/src/types'
 import commonClasses from '../common.module.scss'
+import type { ModalOverlayProps } from '../types'
 import classes from './index.module.scss'
 
 export const Backdrop = ({ children, blur, ...rest }: ModalOverlayProps) => {

packages/ui-core/src/overlay/CanvasContainer/index.tsx

@@ -3,8 +3,8 @@
 
 import classNames from 'classnames'
 import { motion } from 'framer-motion'
-import type { ModalAnimationProps } from '../../../../ui-overlay/src/types'
 import commonClasses from '../common.module.scss'
+import type { ModalAnimationProps } from '../types'
 import classes from './index.module.scss'
 
 export const CanvasContainer = ({ children, ...rest }: ModalAnimationProps) => {

packages/ui-core/src/overlay/CanvasScroll/index.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import { motion } from 'framer-motion'
-import type { CanvasScrollProps } from '../../../../ui-overlay/src/types'
+import type { CanvasScrollProps } from '../types'
 import classes from './index.module.scss'
 
 export const CanvasScroll = ({

packages/ui-core/src/overlay/ModalCard/index.tsx

@@ -4,7 +4,7 @@
 import classNames from 'classnames'
 import type { ForwardedRef } from 'react'
 import { forwardRef } from 'react'
-import type { ModalCardProps } from '../../../../ui-overlay/src/types'
+import type { ModalCardProps } from '../types'
 import classes from './index.module.scss'
 
 export const ModalCard = forwardRef(

packages/ui-core/src/overlay/ModalContainer/index.tsx

@@ -3,15 +3,15 @@
 
 import classNames from 'classnames'
 import { motion } from 'framer-motion'
-import { useOverlay } from '../../../../ui-overlay/src/Provider'
-import type { ModalAnimationProps } from '../../../../ui-overlay/src/types'
 import commonClasses from '../common.module.scss'
+import type { ModalContainerProps } from '../types'
 import classes from './index.module.scss'
 
-export const ModalContainer = ({ children, ...rest }: ModalAnimationProps) => {
-  const {
-    modal: { setModalStatus },
-  } = useOverlay()
+export const ModalContainer = ({
+  children,
+  onClose,
+  ...rest
+}: ModalContainerProps) => {
   const allClasses = classNames(
     commonClasses.fixedPosition,
     classes.modalContainer
@@ -23,7 +23,7 @@ export const ModalContainer = ({ children, ...rest }: ModalAnimationProps) => {
         <button
           type="button"
           className={classes.close}
-          onClick={() => setModalStatus('closing')}
+          onClick={() => onClose()}
         >
           &nbsp;
         </button>

packages/ui-core/src/overlay/ModalContent/index.tsx

@@ -3,7 +3,7 @@
 
 import classNames from 'classnames'
 import { motion } from 'framer-motion'
-import type { ModalContentProps } from '../../../../ui-overlay/src/types'
+import type { ModalContentProps } from '../types'
 import classes from './index.module.scss'
 
 export const ModalContent = ({

packages/ui-core/src/overlay/ModalFixedTitle/index.tsx

@@ -4,7 +4,7 @@
 import classNames from 'classnames'
 import type { ForwardedRef } from 'react'
 import { forwardRef } from 'react'
-import type { ModalFixedTitleProps } from '../../../../ui-overlay/src/types'
+import type { ModalFixedTitleProps } from '../types'
 import classes from './index.module.scss'
 
 export const ModalFixedTitle = forwardRef(

packages/ui-core/src/overlay/ModalMultiThree/index.tsx

@@ -3,8 +3,8 @@
 
 import classNames from 'classnames'
 import { motion } from 'framer-motion'
-import type { ModalAnimationProps } from '../../../../ui-overlay/src/types'
 import commonClasses from '../common.module.scss'
+import type { ModalAnimationProps } from '../types'
 import classes from './index.module.scss'
 
 export const ModalMultiThree = ({ children, ...rest }: ModalAnimationProps) => {

packages/ui-core/src/overlay/ModalMultiTwo/index.tsx

@@ -3,8 +3,8 @@
 
 import classNames from 'classnames'
 import { motion } from 'framer-motion'
-import type { ModalAnimationProps } from '../../../../ui-overlay/src/types'
 import commonClasses from '../common.module.scss'
+import type { ModalAnimationProps } from '../types'
 import classes from './index.module.scss'
 
 export const ModalMultiTwo = ({ children, ...rest }: ModalAnimationProps) => {

packages/ui-core/src/overlay/ModalNotes/index.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import classNames from 'classnames'
-import type { ModalNotesProps } from '../../../../ui-overlay/src/types'
+import type { ModalNotesProps } from '../types'
 import classes from './index.module.scss'
 
 export const ModalNotes = ({

packages/ui-core/src/overlay/ModalPadding/index.tsx

@@ -4,7 +4,7 @@
 import classNames from 'classnames'
 import type { ForwardedRef } from 'react'
 import { forwardRef } from 'react'
-import type { ModalPaddingProps } from '../../../../ui-overlay/src/types'
+import type { ModalPaddingProps } from '../types'
 import classes from './index.module.scss'
 
 export const ModalPadding = forwardRef(

packages/ui-core/src/overlay/ModalScroll/index.tsx

@@ -4,8 +4,8 @@
 import classNames from 'classnames'
 import type { ForwardedRef } from 'react'
 import { forwardRef } from 'react'
-import type { ModalScrollProps } from '../../../../ui-overlay/src/types'
 import commonClasses from '../common.module.scss'
+import type { ModalScrollProps } from '../types'
 import classes from './index.module.scss'
 
 export const ModalScroll = forwardRef(

packages/ui-core/src/overlay/ModalSection/index.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import classNames from 'classnames'
-import type { ModalSectionProps } from '../../../../ui-overlay/src/types'
+import type { ModalSectionProps } from '../types'
 import classes from './index.module.scss'
 
 export const ModalSection = ({ children, style, type }: ModalSectionProps) => {

packages/ui-overlay/src/types.ts → packages/ui-core/src/overlay/types.ts

@@ -41,3 +41,7 @@ export type ModalScrollProps = ComponentBase & {
 export type ModalSectionProps = ComponentBase & {
   type: 'tab' | 'carousel'
 }
+
+export type ModalContainerProps = ModalAnimationProps & {
+  onClose: () => void
+}

packages/ui-overlay/src/Modal.tsx

@@ -149,6 +149,7 @@ export const Modal = ({
         },
       }}
       style={{ opacity: status === 'opening' ? 0 : 1 }}
+      onClose={() => setModalStatus('closing')}
     >
       <ModalScroll
         ref={heightRef}