@helloworldqq/react-modal 1.0.0

package/README.md

@@ -0,0 +1,581 @@
+# React Hook Disclosure Modal
+
+[![npm version](https://img.shields.io/npm/v/@vnquang24/react-modal.svg)](https://www.npmjs.com/package/@vnquang24/react-modal)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+Thư viện React hook mạnh mẽ và linh hoạt để quản lý modal với API khai báo rõ ràng. Hoàn hảo cho các ứng dụng cần quản lý nhiều modal với khả năng truyền dữ liệu.
+
+**Tương thích với React 16.8+, 17, 18 và 19 (bao gồm 19.2.3)** và hoạt động tốt với các thư viện UI như **Ant Design 6**, **Material UI**, **Chakra UI**, v.v.
+
+---
+
+## Mục Lục
+
+- [Cài Đặt](#cài-đặt)
+- [Bắt Đầu Nhanh](#bắt-đầu-nhanh)
+- [Tài Liệu API](#tài-liệu-api)
+  - [ReactHookModalProvider](#reacthookmodalprovider)
+  - [useDisclosure Hook](#usedisclosure-hook)
+  - [Các Tùy Chọn Hook (DisclosureHookProps)](#các-tùy-chọn-hook-disclosurehookprops)
+  - [Giá Trị Trả Về Của Hook](#giá-trị-trả-về-của-hook)
+- [Sử Dụng Nâng Cao](#sử-dụng-nâng-cao)
+  - [Truyền Dữ Liệu Vào Modal](#truyền-dữ-liệu-vào-modal)
+  - [Trả Dữ Liệu Từ Modal (onOk)](#trả-dữ-liệu-từ-modal-onok)
+  - [Sử Dụng Callbacks](#sử-dụng-callbacks)
+  - [Hỗ Trợ TypeScript](#hỗ-trợ-typescript)
+- [Ví Dụ](#ví-dụ)
+  - [Modal Cơ Bản](#modal-cơ-bản)
+  - [Modal Xác Nhận](#modal-xác-nhận)
+  - [Modal Form Với Trả Dữ Liệu](#modal-form-với-trả-dữ-liệu)
+  - [Với Ant Design 6](#với-ant-design-6)
+- [Tương Thích](#tương-thích)
+- [Giấy Phép](#giấy-phép)
+
+---
+
+## Cài Đặt
+
+```bash
+npm install @vnquang24/react-modal
+# hoặc
+yarn add @vnquang24/react-modal
+# hoặc
+pnpm add @vnquang24/react-modal
+```
+
+---
+
+## Bắt Đầu Nhanh
+
+```tsx
+import React from 'react'
+import { ReactHookModalProvider, useDisclosure } from '@vnquang24/react-modal'
+import { Modal, Button } from 'antd'
+
+// 1. Định nghĩa component modal của bạn
+const MyModal = () => {
+  const { isOpen, onClose } = useDisclosure({ tag: 'MyModal' })
+  
+  return (
+    <Modal open={isOpen} onCancel={onClose} onOk={onClose} title="Modal Của Tôi">
+      Xin chào!
+    </Modal>
+  )
+}
+
+// 2. Đăng ký modals và sử dụng
+const modals = { MyModal }
+
+const App = () => {
+  const { onOpen } = useDisclosure({ tag: 'MyModal' })
+  
+  return (
+    <ReactHookModalProvider modals={modals}>
+      <Button onClick={onOpen}>Mở Modal</Button>
+    </ReactHookModalProvider>
+  )
+}
+```
+
+---
+
+## Tài Liệu API
+
+### ReactHookModalProvider
+
+Component provider quản lý tất cả các modal đã đăng ký.
+
+```tsx
+<ReactHookModalProvider modals={modals}>
+  {children}
+</ReactHookModalProvider>
+```
+
+| Prop | Kiểu | Bắt buộc | Mô tả |
+|------|------|----------|-------|
+| `modals` | `Record<string, React.ComponentType>` | ✅ | Object chứa các component modal, key là tag |
+| `children` | `React.ReactNode` | ✅ | Các component con của ứng dụng |
+
+---
+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
+### useDisclosure Hook
+
+Hook chính để điều khiển trạng thái modal.
+
+```tsx
+const disclosure = useDisclosure<Input, Output>(options)
+```
+
+#### Kiểu Generic
+
+| Kiểu | Mặc định | Mô tả |
+|------|----------|-------|
+| `Input` | `Any` | Kiểu dữ liệu truyền VÀO modal qua `onOpen(input)` |
+| `Output` | `Any` | Kiểu dữ liệu trả về TỪ modal qua `onOk(output)` |
+
+---
+
+### Các Tùy Chọn Hook (DisclosureHookProps)
+
+```tsx
+interface DisclosureHookProps<Output> {
+  tag: string           // Bắt buộc: Định danh duy nhất cho modal
+  isOpen?: boolean      // Tùy chọn: Trạng thái mở ban đầu
+  onOpen?: () => void   // Tùy chọn: Callback khi modal mở
+  onClose?: () => void  // Tùy chọn: Callback khi modal đóng
+  onToggle?: () => void // Tùy chọn: Callback khi modal chuyển đổi trạng thái
+  onChange?: (isOpen: boolean) => void  // Tùy chọn: Callback khi trạng thái thay đổi
+  onOk?: (output?: Output) => void      // Tùy chọn: Callback khi onOk được gọi
+  onCancel?: () => void // Tùy chọn: Callback khi hủy
+}
+```
+
+| Tùy chọn | Kiểu | Bắt buộc | Mô tả |
+|----------|------|----------|-------|
+| `tag` | `string` | ✅ | Định danh duy nhất cho modal. Phải khớp với key trong object `modals` |
+| `isOpen` | `boolean` | ❌ | Trạng thái mở ban đầu (ít khi cần) |
+| `onOpen` | `() => void` | ❌ | Callback được kích hoạt khi modal mở |
+| `onClose` | `() => void` | ❌ | Callback được kích hoạt khi modal đóng |
+| `onToggle` | `() => void` | ❌ | Callback được kích hoạt khi modal chuyển đổi trạng thái |
+| `onChange` | `(isOpen: boolean) => void` | ❌ | Callback được kích hoạt khi trạng thái mở thay đổi |
+| `onOk` | `(output?: Output) => void` | ❌ | Callback được kích hoạt khi `onOk` được gọi với dữ liệu output |
+| `onCancel` | `() => void` | ❌ | Callback được kích hoạt khi hủy |
+
+---
+
+### Giá Trị Trả Về Của Hook
+
+```tsx
+const {
+  isOpen,      // boolean: Trạng thái mở hiện tại
+  input,       // Input | undefined: Dữ liệu được truyền vào modal
+  onOpen,      // (input?: Input) => void: Mở modal
+  onClose,     // () => void: Đóng modal
+  onToggle,    // () => void: Chuyển đổi trạng thái modal
+  onOk,        // (output?: Output) => void: Xác nhận và truyền dữ liệu về
+  onChange,    // (isOpen: boolean) => void: Đặt trạng thái mở trực tiếp
+  updateInput, // (input?: Input) => void: Cập nhật input mà không kích hoạt callback onOpen
+  store        // Store: Truy cập trực tiếp store (sử dụng nâng cao)
+} = useDisclosure(options)
+```
+
+| Giá trị trả về | Kiểu | Mô tả |
+|----------------|------|-------|
+| `isOpen` | `boolean` | Modal có đang mở hay không |
+| `input` | `Input \| undefined` | Dữ liệu được truyền vào modal qua `onOpen(data)` |
+| `onOpen` | `(input?: Input) => void` | Mở modal, có thể kèm dữ liệu input |
+| `onClose` | `() => void` | Đóng modal |
+| `onToggle` | `() => void` | Chuyển đổi trạng thái mở/đóng của modal |
+| `onOk` | `(output?: Output) => void` | Đóng modal và kích hoạt callback `onOk` với output |
+| `onChange` | `(isOpen: boolean) => void` | Đặt trạng thái mở trực tiếp |
+| `updateInput` | `(input?: Input) => void` | Cập nhật dữ liệu input mà không kích hoạt callbacks |
+| `store` | `Store` | Truy cập trực tiếp TanStack Store (nâng cao) |
+
+---
+
+## Sử Dụng Nâng Cao
+
+### Truyền Dữ Liệu Vào Modal
+
+Truyền dữ liệu khi mở modal:
+
+```tsx
+// Component cha
+const { onOpen } = useDisclosure<UserData>({ tag: 'EditUserModal' })
+
+// Mở với dữ liệu
+onOpen({ id: 1, name: 'Nguyễn Văn A', email: 'nguyenvana@example.com' })
+
+// Bên trong modal
+const EditUserModal = () => {
+  const { isOpen, input, onClose } = useDisclosure<UserData>({ tag: 'EditUserModal' })
+  
+  return (
+    <Modal open={isOpen} onCancel={onClose}>
+      <p>Đang chỉnh sửa: {input?.name}</p>
+      <p>Email: {input?.email}</p>
+    </Modal>
+  )
+}
+```
+
+---
+
+### Trả Dữ Liệu Từ Modal (onOk)
+
+Trả dữ liệu từ modal về component cha:
+
+```tsx
+// Component cha - nhận dữ liệu qua callback onOk
+const { onOpen } = useDisclosure<void, FormData>({
+  tag: 'FormModal',
+  onOk: (result) => {
+    console.log('Form đã gửi:', result)
+    // result được định kiểu là FormData
+  }
+})
+
+// Bên trong modal - gửi dữ liệu về
+const FormModal = () => {
+  const { isOpen, onClose, onOk } = useDisclosure<void, FormData>({ tag: 'FormModal' })
+  const [formData, setFormData] = useState<FormData>({ name: '', email: '' })
+  
+  const handleSubmit = () => {
+    onOk(formData)  // Kích hoạt callback onOk ở component cha
+    onClose()
+  }
+  
+  return (
+    <Modal open={isOpen} onCancel={onClose} onOk={handleSubmit}>
+      <input 
+        value={formData.name} 
+        onChange={(e) => setFormData({ ...formData, name: e.target.value })} 
+      />
+    </Modal>
+  )
+}
+```
+
+---
+
+### Sử Dụng Callbacks
+
+Tất cả các callback vòng đời:
+
+```tsx
+const { onOpen, onClose } = useDisclosure({
+  tag: 'MyModal',
+  
+  // Được gọi khi modal mở
+  onOpen: () => {
+    console.log('Modal đã mở')
+    analytics.track('modal_opened')
+  },
+  
+  // Được gọi khi modal đóng
+  onClose: () => {
+    console.log('Modal đã đóng')
+    form.reset()
+  },
+  
+  // Được gọi khi modal chuyển đổi trạng thái
+  onToggle: () => {
+    console.log('Modal đã chuyển đổi trạng thái')
+  },
+  
+  // Được gọi khi trạng thái mở thay đổi (cả hai hướng)
+  onChange: (isOpen) => {
+    console.log('Trạng thái modal đã thay đổi:', isOpen)
+  },
+  
+  // Được gọi khi onOk được kích hoạt với dữ liệu
+  onOk: (output) => {
+    console.log('Modal đã xác nhận với:', output)
+    saveData(output)
+  },
+  
+  // Được gọi khi hủy
+  onCancel: () => {
+    console.log('Modal đã bị hủy')
+  }
+})
+```
+
+---
+
+### Hỗ Trợ TypeScript
+
+Hỗ trợ TypeScript đầy đủ với generics:
+
+```tsx
+// Định nghĩa các kiểu của bạn
+interface UserInput {
+  userId: number
+  mode: 'edit' | 'view'
+}
+
+interface UserOutput {
+  name: string
+  email: string
+  saved: boolean
+}
+
+// Sử dụng với generics
+const { onOpen, input } = useDisclosure<UserInput, UserOutput>({
+  tag: 'UserModal',
+  onOk: (output) => {
+    // output được định kiểu là UserOutput | undefined
+    if (output?.saved) {
+      toast.success(`Đã lưu ${output.name}`)
+    }
+  }
+})
+
+// TypeScript biết các kiểu
+onOpen({ userId: 1, mode: 'edit' })  // ✅ Đúng
+onOpen({ wrong: 'data' })             // ❌ Lỗi kiểu
+```
+
+---
+
+## Ví Dụ
+
+### Modal Cơ Bản
+
+```tsx
+import { Modal, Button } from 'antd'
+import { useDisclosure } from '@vnquang24/react-modal'
+
+const BasicModal = () => {
+  const { isOpen, onClose } = useDisclosure({ tag: 'BasicModal' })
+  
+  return (
+    <Modal 
+      open={isOpen} 
+      onCancel={onClose} 
+      onOk={onClose}
+      title="Modal Cơ Bản"
+    >
+      <p>Đây là modal cơ bản không có truyền dữ liệu.</p>
+    </Modal>
+  )
+}
+
+// Sử dụng
+const { onOpen } = useDisclosure({ tag: 'BasicModal' })
+<Button onClick={onOpen}>Mở Modal Cơ Bản</Button>
+```
+
+---
+
+### Modal Xác Nhận
+
+```tsx
+const ConfirmDeleteModal = () => {
+  const { isOpen, input, onClose, onOk } = useDisclosure<{ itemId: number; itemName: string }, boolean>({
+    tag: 'ConfirmDelete'
+  })
+  
+  const handleConfirm = () => {
+    onOk(true)  // Trả về true để chỉ ra đã xác nhận
+    onClose()
+  }
+  
+  const handleCancel = () => {
+    onOk(false) // Trả về false để chỉ ra đã hủy
+    onClose()
+  }
+  
+  return (
+    <Modal 
+      open={isOpen} 
+      onCancel={handleCancel}
+      onOk={handleConfirm}
+      title="Xác Nhận Xóa"
+      okText="Xóa"
+      okType="danger"
+    >
+      <p>Bạn có chắc chắn muốn xóa "{input?.itemName}" không?</p>
+    </Modal>
+  )
+}
+
+// Sử dụng
+const { onOpen } = useDisclosure<{ itemId: number; itemName: string }, boolean>({
+  tag: 'ConfirmDelete',
+  onOk: (confirmed) => {
+    if (confirmed) {
+      deleteItem(itemId)
+      toast.success('Đã xóa thành công!')
+    }
+  }
+})
+
+<Button danger onClick={() => onOpen({ itemId: 123, itemName: 'Mục của tôi' })}>
+  Xóa Mục
+</Button>
+```
+
+---
+
+### Modal Form Với Trả Dữ Liệu
+
+```tsx
+interface FormInput {
+  initialData?: { name: string; email: string }
+}
+
+interface FormOutput {
+  name: string
+  email: string
+}
+
+const UserFormModal = () => {
+  const { isOpen, input, onClose, onOk } = useDisclosure<FormInput, FormOutput>({
+    tag: 'UserForm'
+  })
+  
+  const [form] = Form.useForm()
+  
+  useEffect(() => {
+    if (isOpen && input?.initialData) {
+      form.setFieldsValue(input.initialData)
+    }
+  }, [isOpen, input])
+  
+  const handleSubmit = async () => {
+    const values = await form.validateFields()
+    onOk(values)  // Trả dữ liệu form về component cha
+    onClose()
+    form.resetFields()
+  }
+  
+  return (
+    <Modal 
+      open={isOpen} 
+      onCancel={onClose}
+      onOk={handleSubmit}
+      title={input?.initialData ? 'Chỉnh Sửa Người Dùng' : 'Tạo Người Dùng'}
+    >
+      <Form form={form} layout="vertical">
+        <Form.Item name="name" label="Tên" rules={[{ required: true, message: 'Vui lòng nhập tên' }]}>
+          <Input />
+        </Form.Item>
+        <Form.Item name="email" label="Email" rules={[{ required: true, type: 'email', message: 'Vui lòng nhập email hợp lệ' }]}>
+          <Input />
+        </Form.Item>
+      </Form>
+    </Modal>
+  )
+}
+
+// Sử dụng - Tạo người dùng mới
+const { onOpen: openCreate } = useDisclosure<FormInput, FormOutput>({
+  tag: 'UserForm',
+  onOk: (userData) => {
+    createUser(userData)
+    toast.success('Đã tạo người dùng!')
+  }
+})
+
+// Sử dụng - Chỉnh sửa người dùng hiện có
+const { onOpen: openEdit } = useDisclosure<FormInput, FormOutput>({
+  tag: 'UserForm',
+  onOk: (userData) => {
+    updateUser(userId, userData)
+    toast.success('Đã cập nhật người dùng!')
+  }
+})
+
+<Button onClick={() => openCreate({})}>Tạo Người Dùng</Button>
+<Button onClick={() => openEdit({ initialData: existingUser })}>Chỉnh Sửa Người Dùng</Button>
+```
+
+---
+
+### Với Ant Design 6
+
+Ví dụ hoàn chỉnh với Ant Design 6:
+
+```tsx
+import React from 'react'
+import { Modal, Button, Space, Form, Input, message } from 'antd'
+import { ReactHookModalProvider, useDisclosure } from '@vnquang24/react-modal'
+
+// Các Component Modal
+const WelcomeModal = () => {
+  const { isOpen, onClose, input } = useDisclosure<{ username: string }>({
+    tag: 'WelcomeModal'
+  })
+  
+  return (
+    <Modal open={isOpen} onCancel={onClose} onOk={onClose} title="Chào Mừng!">
+      <p>Xin chào, {input?.username}! Chào mừng bạn đến với ứng dụng của chúng tôi.</p>
+    </Modal>
+  )
+}
+
+const SettingsModal = () => {
+  const { isOpen, onClose, onOk } = useDisclosure<void, { theme: string }>({
+    tag: 'SettingsModal'
+  })
+  
+  const handleSave = () => {
+    onOk({ theme: 'dark' })
+    onClose()
+  }
+  
+  return (
+    <Modal open={isOpen} onCancel={onClose} onOk={handleSave} title="Cài Đặt">
+      <p>Cấu hình cài đặt của bạn tại đây...</p>
+    </Modal>
+  )
+}
+
+// Đăng ký tất cả modals
+const modals = {
+  WelcomeModal,
+  SettingsModal
+}
+
+// Ứng dụng chính
+const App = () => {
+  const { onOpen: openWelcome } = useDisclosure<{ username: string }>({
+    tag: 'WelcomeModal'
+  })
+  
+  const { onOpen: openSettings } = useDisclosure<void, { theme: string }>({
+    tag: 'SettingsModal',
+    onOk: (settings) => {
+      message.success(`Đã đổi theme sang: ${settings?.theme}`)
+    }
+  })
+  
+  return (
+    <ReactHookModalProvider modals={modals}>
+      <Space>
+        <Button type="primary" onClick={() => openWelcome({ username: 'Nguyễn Văn A' })}>
+          Hiển Thị Chào Mừng
+        </Button>
+        <Button onClick={openSettings}>
+          Mở Cài Đặt
+        </Button>
+      </Space>
+    </ReactHookModalProvider>
+  )
+}
+
+export default App
+```
+
+---
+
+## Tương Thích
+
+| Phiên bản React | Hỗ trợ |
+|-----------------|--------|
+| 16.8+           | ✅     |
+| 17.x            | ✅     |
+| 18.x            | ✅     |
+| 19.x            | ✅     |
+
+| Thư viện UI     | Đã test |
+|-----------------|---------|
+| Ant Design 6    | ✅      |
+| Material UI 5+  | ✅      |
+| Chakra UI 2+    | ✅      |
+| Headless UI     | ✅      |
+| Radix UI        | ✅      |
+| Modal tự viết   | ✅      |
+
+---
+
+## Dependencies
+
+- `@tanstack/react-store` - Để quản lý state
+
+---
+
+## Giấy Phép
+
+MIT © [vnquang24](https://github.com/vnquang24)

package/dist/cli.d.ts

@@ -0,0 +1,10 @@
+#!/usr/bin/env node
+declare const writeFileSync: any;
+declare const Project: any;
+declare const pathFile: string;
+declare const project: any;
+declare const sourceFile: any;
+declare const exportedDeclarations: any;
+declare const pathGenerate = "node_modules/react-hook-disclosure-modal/dist/hook/tag.d.ts";
+declare const allTags: unknown[];
+//# sourceMappingURL=cli.d.ts.map

package/dist/cli.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.d.ts","sourceRoot":"","sources":["src/cli.ts"],"names":[],"mappings":";AACA,QAAA,MAAQ,aAAa,KAAkB,CAAA;AAEvC,QAAA,MAAQ,OAAO,KAAwB,CAAA;AACvC,QAAA,MAAM,QAAQ,QAAkB,CAAA;AAKhC,QAAA,MAAM,OAAO,KAIZ,CAAA;AACD,QAAA,MAAM,UAAU,KAAwC,CAAA;AACxD,QAAA,MAAM,oBAAoB,KAAuC,CAAA;AACjE,QAAA,MAAM,YAAY,gEAAgE,CAAA;AAClF,QAAA,MAAM,OAAO,WAAyD,CAAA"}

package/dist/hook/index.d.ts

@@ -0,0 +1,24 @@
+import { TagType } from './tag';
+export declare type Any = string | number | boolean | object | undefined | Record<string, any>;
+export interface DisclosureHookProps<O> {
+    tag: TagType;
+    isOpen?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+    onToggle?: () => void;
+    onChange?: (isOpen: boolean) => void;
+    onOk?: (output?: O) => void;
+    onCancel?: () => void;
+}
+export declare const useDisclosure: <Input = Any, Output = Any>(disclosureHook: DisclosureHookProps<Output>) => {
+    isOpen: boolean;
+    input: Input | undefined;
+    onOpen: (input?: Input | undefined) => void;
+    onClose: () => void;
+    onToggle: () => void;
+    onOk: (output?: Output | undefined) => void;
+    onChange: (isOpen: boolean) => void;
+    updateInput: (input?: Input | undefined) => void;
+    store: import("@tanstack/store").Store<import("../store").State, (cb: import("../store").State) => import("../store").State>;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/hook/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/hook/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAG/B,oBAAY,GAAG,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;AAEtF,MAAM,WAAW,mBAAmB,CAAC,CAAC;IACpC,GAAG,EAAE,OAAO,CAAA;IACZ,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACpC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,IAAI,CAAA;IAC3B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAED,eAAO,MAAM,aAAa;;;;;;;uBAqDc,OAAO;;;CAgC9C,CAAA"}

package/dist/hook/tag.d.ts

@@ -0,0 +1,2 @@
+export declare type TagType = string;
+//# sourceMappingURL=tag.d.ts.map

package/dist/hook/tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../src/hook/tag.ts"],"names":[],"mappings":"AAAA,oBAAY,OAAO,GAAG,MAAM,CAAA"}

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+declare type ModalComponent = React.FunctionComponent<any> | React.ComponentType<any>;
+export declare type ReactHookModalProviderProps = {
+    children: React.ReactNode;
+    modals: Record<string, ModalComponent>;
+};
+export declare const ReactHookModalProvider: ({ children, modals }: ReactHookModalProviderProps) => React.JSX.Element;
+export * from './hook';
+export * from './provider';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,aAAK,cAAc,GAAG,KAAK,CAAC,iBAAiB,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAA;AAE7E,oBAAY,2BAA2B,GAAG;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAA;CACvC,CAAA;AAED,eAAO,MAAM,sBAAsB,yBAGhC,2BAA2B,sBAO7B,CAAA;AAED,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA"}

package/dist/index.js

@@ -0,0 +1,208 @@
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var React = require('react');
+var React__default = _interopDefault(React);
+var reactStore = require('@tanstack/react-store');
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+
+var store = new reactStore.Store({
+  modalTags: {}
+});
+var openModal = function openModal(tag, input) {
+  store.setState(function (state) {
+    var _extends2;
+    return {
+      modalTags: _extends({}, state.modalTags, (_extends2 = {}, _extends2[tag] = _extends({}, state.modalTags[tag], {
+        input: input != null ? input : true
+      }), _extends2))
+    };
+  });
+};
+var okModal = function okModal(tag, output) {
+  store.setState(function (state) {
+    var _extends3;
+    return {
+      modalTags: _extends({}, state.modalTags, (_extends3 = {}, _extends3[tag] = _extends({}, state.modalTags[tag], {
+        output: output
+      }), _extends3))
+    };
+  });
+};
+var closeModal = function closeModal(tag) {
+  store.setState(function (state) {
+    var _extends4;
+    return {
+      modalTags: _extends({}, state.modalTags, (_extends4 = {}, _extends4[tag] = {
+        input: false
+      }, _extends4))
+    };
+  });
+};
+var toggleModal = function toggleModal(tag) {
+  store.setState(function (state) {
+    var _state$modalTags$tag, _extends5;
+    return {
+      modalTags: _extends({}, state.modalTags, (_extends5 = {}, _extends5[tag] = _extends({}, state.modalTags[tag], {
+        input: !((_state$modalTags$tag = state.modalTags[tag]) !== null && _state$modalTags$tag !== void 0 && _state$modalTags$tag.input)
+      }), _extends5))
+    };
+  });
+};
+var clearModalTag = function clearModalTag(tag) {
+  store.setState(function (state) {
+    var newModalTags = _extends({}, state.modalTags);
+    delete newModalTags[tag];
+    return {
+      modalTags: newModalTags
+    };
+  });
+};
+var clearAllModalTags = function clearAllModalTags() {
+  store.setState(function () {
+    return {
+      modalTags: {}
+    };
+  });
+};
+var useModalStore = function useModalStore(stateCallback) {
+  return reactStore.useStore(store, stateCallback);
+};
+var useModalActions = function useModalActions(actionCallback) {
+  return actionCallback({
+    openModal: openModal,
+    okModal: okModal,
+    closeModal: closeModal,
+    toggleModal: toggleModal,
+    clearModalTag: clearModalTag,
+    clearAllModalTags: clearAllModalTags
+  });
+};
+
+var ModalWrapper = React.memo(function ModalWrapper(_ref) {
+  var modals = _ref.modals;
+  var modalTags = useModalStore(function (state) {
+    return state.modalTags;
+  });
+  var modalOpened = React.useMemo(function () {
+    return Object.entries(modals).filter(function (_ref2) {
+      var _modalTags$tag;
+      var tag = _ref2[0];
+      return !!((_modalTags$tag = modalTags[tag]) !== null && _modalTags$tag !== void 0 && _modalTags$tag.input);
+    }).map(function (_ref3) {
+      var tag = _ref3[0],
+        Modal = _ref3[1];
+      return React__default.createElement(Modal, {
+        key: tag
+      });
+    });
+  }, [modals, modalTags]);
+  return React__default.createElement(React__default.Fragment, null, modalOpened);
+});
+
+var useDisclosure = function useDisclosure(disclosureHook) {
+  var tag = disclosureHook.tag;
+  var disclosureHookRef = React.useRef(disclosureHook);
+  disclosureHookRef.current = disclosureHook;
+  var inputState = useModalStore(function (state) {
+    var _state$modalTags$tag;
+    return (_state$modalTags$tag = state.modalTags[tag]) === null || _state$modalTags$tag === void 0 ? void 0 : _state$modalTags$tag.input;
+  });
+  var outputState = useModalStore(function (state) {
+    var _state$modalTags$tag2;
+    return (_state$modalTags$tag2 = state.modalTags[tag]) === null || _state$modalTags$tag2 === void 0 ? void 0 : _state$modalTags$tag2.output;
+  });
+  var clearDisclosureTag = useModalActions(function (actions) {
+    return actions.clearModalTag;
+  });
+  var onOpenAction = useModalActions(function (actions) {
+    return actions.openModal;
+  });
+  var okAction = useModalActions(function (actions) {
+    return actions.okModal;
+  });
+  var onCloseAction = useModalActions(function (actions) {
+    return actions.closeModal;
+  });
+  var onToggleAction = useModalActions(function (actions) {
+    return actions.toggleModal;
+  });
+  var updateInput = React.useCallback(function (input) {
+    var processedInput = input;
+    if (processedInput && typeof processedInput == 'object' && 'preventDefault' in processedInput) {
+      processedInput = undefined;
+    }
+    onOpenAction(tag, processedInput);
+  }, [tag, onOpenAction]);
+  var onOpen = React.useCallback(function (input) {
+    var _disclosureHookRef$cu, _disclosureHookRef$cu2;
+    updateInput(input);
+    (_disclosureHookRef$cu = disclosureHookRef.current) === null || _disclosureHookRef$cu === void 0 ? void 0 : (_disclosureHookRef$cu2 = _disclosureHookRef$cu.onOpen) === null || _disclosureHookRef$cu2 === void 0 ? void 0 : _disclosureHookRef$cu2.call(_disclosureHookRef$cu);
+  }, [updateInput]);
+  var onClose = React.useCallback(function () {
+    var _disclosureHookRef$cu3, _disclosureHookRef$cu4;
+    onCloseAction(tag);
+    (_disclosureHookRef$cu3 = disclosureHookRef.current) === null || _disclosureHookRef$cu3 === void 0 ? void 0 : (_disclosureHookRef$cu4 = _disclosureHookRef$cu3.onClose) === null || _disclosureHookRef$cu4 === void 0 ? void 0 : _disclosureHookRef$cu4.call(_disclosureHookRef$cu3);
+  }, [tag, onCloseAction]);
+  var onToggle = React.useCallback(function () {
+    var _disclosureHookRef$cu5, _disclosureHookRef$cu6;
+    onToggleAction(tag);
+    (_disclosureHookRef$cu5 = disclosureHookRef.current) === null || _disclosureHookRef$cu5 === void 0 ? void 0 : (_disclosureHookRef$cu6 = _disclosureHookRef$cu5.onToggle) === null || _disclosureHookRef$cu6 === void 0 ? void 0 : _disclosureHookRef$cu6.call(_disclosureHookRef$cu5);
+  }, [tag, onToggleAction]);
+  var onOk = React.useCallback(function (output) {
+    var _disclosureHookRef$cu7, _disclosureHookRef$cu8;
+    (_disclosureHookRef$cu7 = disclosureHookRef.current) === null || _disclosureHookRef$cu7 === void 0 ? void 0 : (_disclosureHookRef$cu8 = _disclosureHookRef$cu7.onOk) === null || _disclosureHookRef$cu8 === void 0 ? void 0 : _disclosureHookRef$cu8.call(_disclosureHookRef$cu7, output);
+    okAction(tag, output);
+  }, [tag, okAction]);
+  var onChange = React.useCallback(function (isOpen) {
+    var _disclosureHookRef$cu9, _disclosureHookRef$cu0;
+    if (isOpen) {
+      onOpen();
+    } else {
+      onClose();
+    }
+    (_disclosureHookRef$cu9 = disclosureHookRef.current) === null || _disclosureHookRef$cu9 === void 0 ? void 0 : (_disclosureHookRef$cu0 = _disclosureHookRef$cu9.onChange) === null || _disclosureHookRef$cu0 === void 0 ? void 0 : _disclosureHookRef$cu0.call(_disclosureHookRef$cu9, isOpen);
+  }, [onOpen, onClose]);
+  React.useEffect(function () {
+    return function () {
+      clearDisclosureTag(tag);
+    };
+  }, [tag, clearDisclosureTag]);
+  React.useEffect(function () {
+    if (outputState) {
+      onOk(outputState);
+    }
+  }, [outputState, onOk]);
+  return {
+    isOpen: !!inputState,
+    input: typeof inputState === 'boolean' ? undefined : inputState,
+    onOpen: onOpen,
+    onClose: onClose,
+    onToggle: onToggle,
+    onOk: onOk,
+    onChange: onChange,
+    updateInput: updateInput,
+    store: store
+  };
+};
+
+var ReactHookModalProvider = function ReactHookModalProvider(_ref) {
+  var children = _ref.children,
+    modals = _ref.modals;
+  return React.createElement(React.Fragment, null, React.createElement(ModalWrapper, {
+    modals: modals
+  }), children);
+};
+
+exports.ModalWrapper = ModalWrapper;
+exports.ReactHookModalProvider = ReactHookModalProvider;
+exports.useDisclosure = useDisclosure;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/store/index.ts","../src/provider/index.tsx","../src/hook/index.ts","../src/index.tsx"],"sourcesContent":["import { Store, useStore } from \"@tanstack/react-store\";\n\n// You can instantiate the store outside of React components too!\n\nimport { Any } from '../hook'\n\nexport type State = {\n  modalTags: {\n    [tag: string]: {\n      input?: Any\n      output?: Any\n    }\n  }\n}\n\nexport type Action = {\n  openModal: (tag: string, input?: Any) => void\n  okModal: (tag: string, output?: Any) => void\n  closeModal: (tag: string) => void\n  toggleModal: (tag: string) => void\n  clearModalTag: (tag: string) => void\n  clearAllModalTags: () => void\n}\nexport const store = new Store<State>({\n  modalTags: {}\n});\n\n\nconst openModal = (tag: string, input?: Any) => {\n  store.setState((state) => ({\n    modalTags: {\n      ...state.modalTags,\n      [tag]: {\n        ...state.modalTags[tag],\n        input: input ?? true // Default to true if no input is provided\n      }\n    }\n  }))\n}\nconst okModal = (tag: string, output?: Any) => {\n  store.setState((state) => ({\n    modalTags: {\n      ...state.modalTags,\n      [tag]: {\n        ...state.modalTags[tag],\n        output\n      }\n    }\n  }))\n}\nconst closeModal = (tag: string) => {\n  store.setState((state) => ({\n    modalTags: {\n      ...state.modalTags,\n      [tag]: { input: false }\n    }\n  }))\n}\nconst toggleModal = (tag: string) => {\n  store.setState((state) => ({\n    modalTags: {\n      ...state.modalTags,\n      [tag]: {\n        ...state.modalTags[tag],\n        input: !state.modalTags[tag]?.input\n      }\n    }\n  }))\n}\nconst clearModalTag = (tag: string) => {\n  store.setState((state) => {\n    const newModalTags = { ...state.modalTags };\n    delete newModalTags[tag];\n    return { modalTags: newModalTags };\n  })\n}\nconst clearAllModalTags = () => {\n  store.setState(() => ({ modalTags: {} }))\n}\n\nexport const useModalStore = <T>(\n  stateCallback: (state: State) => T,\n): T => {\n  return useStore(store, stateCallback)\n}\n\nexport const useModalActions = <T>(\n  actionCallback: (action: Action) => T\n): T => {\n  return actionCallback(\n    {\n      openModal,\n      okModal,\n      closeModal,\n      toggleModal,\n      clearModalTag,\n      clearAllModalTags\n    }\n  )\n}","import React, { useMemo, memo } from 'react'\nimport { useModalStore, State } from '../store'\n\ntype ModalComponent = React.FunctionComponent<any> | React.ComponentType<any>\n\nexport interface ModalWrapperProps {\n  modals: Record<string, ModalComponent>\n}\n\nexport const ModalWrapper = memo(function ModalWrapper({\n  modals\n}: ModalWrapperProps) {\n  const modalTags = useModalStore((state: State) => state.modalTags)\n  \n  const modalOpened = useMemo(() => {\n    return Object.entries(modals)\n      .filter(([tag]) => !!modalTags[tag]?.input)\n      .map(([tag, Modal]) => <Modal key={tag} />)\n  }, [modals, modalTags])\n  \n  return <React.Fragment>{modalOpened}</React.Fragment>\n})\n","import { useEffect, useCallback, useRef } from 'react'\nimport { TagType } from './tag'\nimport { useModalStore, useModalActions, store } from '../store'\n\nexport type Any = string | number | boolean | object | undefined | Record<string, any>\n\nexport interface DisclosureHookProps<O> {\n  tag: TagType\n  isOpen?: boolean\n  onOpen?: () => void\n  onClose?: () => void\n  onToggle?: () => void\n  onChange?: (isOpen: boolean) => void\n  onOk?: (output?: O) => void\n  onCancel?: () => void\n}\n\nexport const useDisclosure = <Input = Any, Output = Any>(\n  disclosureHook: DisclosureHookProps<Output>\n) => {\n  const tag = disclosureHook.tag\n  \n  // Use refs to store callbacks to avoid stale closures\n  const disclosureHookRef = useRef(disclosureHook)\n  disclosureHookRef.current = disclosureHook\n\n  const inputState = useModalStore(\n    (state) => state.modalTags[tag]?.input\n  ) as Input\n  const outputState = useModalStore(\n    (state) => state.modalTags[tag]?.output\n  ) as Output\n  const clearDisclosureTag = useModalActions(\n    (actions) => actions.clearModalTag\n  )\n\n  const onOpenAction = useModalActions((actions) => actions.openModal)\n  const okAction = useModalActions((actions) => actions.okModal)\n  const onCloseAction = useModalActions((actions) => actions.closeModal)\n  const onToggleAction = useModalActions((actions) => actions.toggleModal)\n\n  const updateInput = useCallback((input?: Input) => {\n    // If input is a function, call it and set the result as input\n    let processedInput = input\n    if (processedInput && typeof processedInput == 'object' && 'preventDefault' in processedInput) {\n      processedInput = undefined\n    }\n    onOpenAction(tag, processedInput as Any)\n  }, [tag, onOpenAction])\n\n  const onOpen = useCallback((input?: Input) => {\n    updateInput(input)\n    disclosureHookRef.current?.onOpen?.()\n  }, [updateInput])\n\n  const onClose = useCallback(() => {\n    onCloseAction(tag)\n    disclosureHookRef.current?.onClose?.()\n  }, [tag, onCloseAction])\n\n  const onToggle = useCallback(() => {\n    onToggleAction(tag)\n    disclosureHookRef.current?.onToggle?.()\n  }, [tag, onToggleAction])\n\n  const onOk = useCallback((output?: Output) => {\n    disclosureHookRef.current?.onOk?.(output)\n    okAction(tag, output as Any)\n  }, [tag, okAction])\n\n  const onChange = useCallback((isOpen: boolean) => {\n    if (isOpen) {\n      onOpen()\n    } else {\n      onClose()\n    }\n    disclosureHookRef.current?.onChange?.(isOpen)\n  }, [onOpen, onClose])\n\n  useEffect(() => {\n    return () => {\n      clearDisclosureTag(tag)\n    }\n  }, [tag, clearDisclosureTag])\n\n  useEffect(() => {\n    if (outputState) {\n      onOk(outputState as Output)\n    }\n  }, [outputState, onOk])\n\n  return {\n    isOpen: !!inputState,\n    input: typeof inputState === 'boolean' ? undefined : inputState,\n    onOpen,\n    onClose,\n    onToggle,\n    onOk,\n    onChange,\n    updateInput,\n    store\n  }\n}\n","import * as React from 'react'\nimport { ModalWrapper } from './provider'\n\ntype ModalComponent = React.FunctionComponent<any> | React.ComponentType<any>\n\nexport type ReactHookModalProviderProps = {\n  children: React.ReactNode\n  modals: Record<string, ModalComponent>\n}\n\nexport const ReactHookModalProvider = ({\n  children,\n  modals\n}: ReactHookModalProviderProps) => {\n  return (\n    <React.Fragment>\n      <ModalWrapper modals={modals} />\n      {children}\n    </React.Fragment>\n  )\n}\n\nexport * from './hook'\nexport * from './provider'\n"],"names":["store","Store","modalTags","openModal","tag","input","setState","state","_extends2","_extends","okModal","output","_extends3","closeModal","_extends4","toggleModal","_state$modalTags$tag","_extends5","clearModalTag","newModalTags","clearAllModalTags","useModalStore","stateCallback","useStore","useModalActions","actionCallback","ModalWrapper","memo","_ref","modals","modalOpened","useMemo","Object","entries","filter","_ref2","_modalTags$tag","map","_ref3","Modal","React","key","Fragment","useDisclosure","disclosureHook","disclosureHookRef","useRef","current","inputState","outputState","_state$modalTags$tag2","clearDisclosureTag","actions","onOpenAction","okAction","onCloseAction","onToggleAction","updateInput","useCallback","processedInput","undefined","onOpen","_disclosureHookRef$cu","_disclosureHookRef$cu2","call","onClose","_disclosureHookRef$cu3","_disclosureHookRef$cu4","onToggle","_disclosureHookRef$cu5","_disclosureHookRef$cu6","onOk","_disclosureHookRef$cu7","_disclosureHookRef$cu8","onChange","isOpen","_disclosureHookRef$cu9","_disclosureHookRef$cu0","useEffect","ReactHookModalProvider","children"],"mappings":"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"}

package/dist/index.modern.js

@@ -0,0 +1,203 @@
+import React__default, { memo, useMemo, useRef, useCallback, useEffect, createElement, Fragment } from 'react';
+import { Store, useStore } from '@tanstack/react-store';
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+
+var store = new Store({
+  modalTags: {}
+});
+var openModal = function openModal(tag, input) {
+  store.setState(function (state) {
+    var _extends2;
+    return {
+      modalTags: _extends({}, state.modalTags, (_extends2 = {}, _extends2[tag] = _extends({}, state.modalTags[tag], {
+        input: input != null ? input : true
+      }), _extends2))
+    };
+  });
+};
+var okModal = function okModal(tag, output) {
+  store.setState(function (state) {
+    var _extends3;
+    return {
+      modalTags: _extends({}, state.modalTags, (_extends3 = {}, _extends3[tag] = _extends({}, state.modalTags[tag], {
+        output: output
+      }), _extends3))
+    };
+  });
+};
+var closeModal = function closeModal(tag) {
+  store.setState(function (state) {
+    var _extends4;
+    return {
+      modalTags: _extends({}, state.modalTags, (_extends4 = {}, _extends4[tag] = {
+        input: false
+      }, _extends4))
+    };
+  });
+};
+var toggleModal = function toggleModal(tag) {
+  store.setState(function (state) {
+    var _state$modalTags$tag, _extends5;
+    return {
+      modalTags: _extends({}, state.modalTags, (_extends5 = {}, _extends5[tag] = _extends({}, state.modalTags[tag], {
+        input: !((_state$modalTags$tag = state.modalTags[tag]) !== null && _state$modalTags$tag !== void 0 && _state$modalTags$tag.input)
+      }), _extends5))
+    };
+  });
+};
+var clearModalTag = function clearModalTag(tag) {
+  store.setState(function (state) {
+    var newModalTags = _extends({}, state.modalTags);
+    delete newModalTags[tag];
+    return {
+      modalTags: newModalTags
+    };
+  });
+};
+var clearAllModalTags = function clearAllModalTags() {
+  store.setState(function () {
+    return {
+      modalTags: {}
+    };
+  });
+};
+var useModalStore = function useModalStore(stateCallback) {
+  return useStore(store, stateCallback);
+};
+var useModalActions = function useModalActions(actionCallback) {
+  return actionCallback({
+    openModal: openModal,
+    okModal: okModal,
+    closeModal: closeModal,
+    toggleModal: toggleModal,
+    clearModalTag: clearModalTag,
+    clearAllModalTags: clearAllModalTags
+  });
+};
+
+var ModalWrapper = memo(function ModalWrapper(_ref) {
+  var modals = _ref.modals;
+  var modalTags = useModalStore(function (state) {
+    return state.modalTags;
+  });
+  var modalOpened = useMemo(function () {
+    return Object.entries(modals).filter(function (_ref2) {
+      var _modalTags$tag;
+      var tag = _ref2[0];
+      return !!((_modalTags$tag = modalTags[tag]) !== null && _modalTags$tag !== void 0 && _modalTags$tag.input);
+    }).map(function (_ref3) {
+      var tag = _ref3[0],
+        Modal = _ref3[1];
+      return React__default.createElement(Modal, {
+        key: tag
+      });
+    });
+  }, [modals, modalTags]);
+  return React__default.createElement(React__default.Fragment, null, modalOpened);
+});
+
+var useDisclosure = function useDisclosure(disclosureHook) {
+  var tag = disclosureHook.tag;
+  var disclosureHookRef = useRef(disclosureHook);
+  disclosureHookRef.current = disclosureHook;
+  var inputState = useModalStore(function (state) {
+    var _state$modalTags$tag;
+    return (_state$modalTags$tag = state.modalTags[tag]) === null || _state$modalTags$tag === void 0 ? void 0 : _state$modalTags$tag.input;
+  });
+  var outputState = useModalStore(function (state) {
+    var _state$modalTags$tag2;
+    return (_state$modalTags$tag2 = state.modalTags[tag]) === null || _state$modalTags$tag2 === void 0 ? void 0 : _state$modalTags$tag2.output;
+  });
+  var clearDisclosureTag = useModalActions(function (actions) {
+    return actions.clearModalTag;
+  });
+  var onOpenAction = useModalActions(function (actions) {
+    return actions.openModal;
+  });
+  var okAction = useModalActions(function (actions) {
+    return actions.okModal;
+  });
+  var onCloseAction = useModalActions(function (actions) {
+    return actions.closeModal;
+  });
+  var onToggleAction = useModalActions(function (actions) {
+    return actions.toggleModal;
+  });
+  var updateInput = useCallback(function (input) {
+    var processedInput = input;
+    if (processedInput && typeof processedInput == 'object' && 'preventDefault' in processedInput) {
+      processedInput = undefined;
+    }
+    onOpenAction(tag, processedInput);
+  }, [tag, onOpenAction]);
+  var onOpen = useCallback(function (input) {
+    var _disclosureHookRef$cu, _disclosureHookRef$cu2;
+    updateInput(input);
+    (_disclosureHookRef$cu = disclosureHookRef.current) === null || _disclosureHookRef$cu === void 0 ? void 0 : (_disclosureHookRef$cu2 = _disclosureHookRef$cu.onOpen) === null || _disclosureHookRef$cu2 === void 0 ? void 0 : _disclosureHookRef$cu2.call(_disclosureHookRef$cu);
+  }, [updateInput]);
+  var onClose = useCallback(function () {
+    var _disclosureHookRef$cu3, _disclosureHookRef$cu4;
+    onCloseAction(tag);
+    (_disclosureHookRef$cu3 = disclosureHookRef.current) === null || _disclosureHookRef$cu3 === void 0 ? void 0 : (_disclosureHookRef$cu4 = _disclosureHookRef$cu3.onClose) === null || _disclosureHookRef$cu4 === void 0 ? void 0 : _disclosureHookRef$cu4.call(_disclosureHookRef$cu3);
+  }, [tag, onCloseAction]);
+  var onToggle = useCallback(function () {
+    var _disclosureHookRef$cu5, _disclosureHookRef$cu6;
+    onToggleAction(tag);
+    (_disclosureHookRef$cu5 = disclosureHookRef.current) === null || _disclosureHookRef$cu5 === void 0 ? void 0 : (_disclosureHookRef$cu6 = _disclosureHookRef$cu5.onToggle) === null || _disclosureHookRef$cu6 === void 0 ? void 0 : _disclosureHookRef$cu6.call(_disclosureHookRef$cu5);
+  }, [tag, onToggleAction]);
+  var onOk = useCallback(function (output) {
+    var _disclosureHookRef$cu7, _disclosureHookRef$cu8;
+    (_disclosureHookRef$cu7 = disclosureHookRef.current) === null || _disclosureHookRef$cu7 === void 0 ? void 0 : (_disclosureHookRef$cu8 = _disclosureHookRef$cu7.onOk) === null || _disclosureHookRef$cu8 === void 0 ? void 0 : _disclosureHookRef$cu8.call(_disclosureHookRef$cu7, output);
+    okAction(tag, output);
+  }, [tag, okAction]);
+  var onChange = useCallback(function (isOpen) {
+    var _disclosureHookRef$cu9, _disclosureHookRef$cu0;
+    if (isOpen) {
+      onOpen();
+    } else {
+      onClose();
+    }
+    (_disclosureHookRef$cu9 = disclosureHookRef.current) === null || _disclosureHookRef$cu9 === void 0 ? void 0 : (_disclosureHookRef$cu0 = _disclosureHookRef$cu9.onChange) === null || _disclosureHookRef$cu0 === void 0 ? void 0 : _disclosureHookRef$cu0.call(_disclosureHookRef$cu9, isOpen);
+  }, [onOpen, onClose]);
+  useEffect(function () {
+    return function () {
+      clearDisclosureTag(tag);
+    };
+  }, [tag, clearDisclosureTag]);
+  useEffect(function () {
+    if (outputState) {
+      onOk(outputState);
+    }
+  }, [outputState, onOk]);
+  return {
+    isOpen: !!inputState,
+    input: typeof inputState === 'boolean' ? undefined : inputState,
+    onOpen: onOpen,
+    onClose: onClose,
+    onToggle: onToggle,
+    onOk: onOk,
+    onChange: onChange,
+    updateInput: updateInput,
+    store: store
+  };
+};
+
+var ReactHookModalProvider = function ReactHookModalProvider(_ref) {
+  var children = _ref.children,
+    modals = _ref.modals;
+  return createElement(Fragment, null, createElement(ModalWrapper, {
+    modals: modals
+  }), children);
+};
+
+export { ModalWrapper, ReactHookModalProvider, useDisclosure };
+//# sourceMappingURL=index.modern.js.map

package/dist/index.modern.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.modern.js","sources":["../src/store/index.ts","../src/provider/index.tsx","../src/hook/index.ts","../src/index.tsx"],"sourcesContent":["import { Store, useStore } from \"@tanstack/react-store\";\n\n// You can instantiate the store outside of React components too!\n\nimport { Any } from '../hook'\n\nexport type State = {\n  modalTags: {\n    [tag: string]: {\n      input?: Any\n      output?: Any\n    }\n  }\n}\n\nexport type Action = {\n  openModal: (tag: string, input?: Any) => void\n  okModal: (tag: string, output?: Any) => void\n  closeModal: (tag: string) => void\n  toggleModal: (tag: string) => void\n  clearModalTag: (tag: string) => void\n  clearAllModalTags: () => void\n}\nexport const store = new Store<State>({\n  modalTags: {}\n});\n\n\nconst openModal = (tag: string, input?: Any) => {\n  store.setState((state) => ({\n    modalTags: {\n      ...state.modalTags,\n      [tag]: {\n        ...state.modalTags[tag],\n        input: input ?? true // Default to true if no input is provided\n      }\n    }\n  }))\n}\nconst okModal = (tag: string, output?: Any) => {\n  store.setState((state) => ({\n    modalTags: {\n      ...state.modalTags,\n      [tag]: {\n        ...state.modalTags[tag],\n        output\n      }\n    }\n  }))\n}\nconst closeModal = (tag: string) => {\n  store.setState((state) => ({\n    modalTags: {\n      ...state.modalTags,\n      [tag]: { input: false }\n    }\n  }))\n}\nconst toggleModal = (tag: string) => {\n  store.setState((state) => ({\n    modalTags: {\n      ...state.modalTags,\n      [tag]: {\n        ...state.modalTags[tag],\n        input: !state.modalTags[tag]?.input\n      }\n    }\n  }))\n}\nconst clearModalTag = (tag: string) => {\n  store.setState((state) => {\n    const newModalTags = { ...state.modalTags };\n    delete newModalTags[tag];\n    return { modalTags: newModalTags };\n  })\n}\nconst clearAllModalTags = () => {\n  store.setState(() => ({ modalTags: {} }))\n}\n\nexport const useModalStore = <T>(\n  stateCallback: (state: State) => T,\n): T => {\n  return useStore(store, stateCallback)\n}\n\nexport const useModalActions = <T>(\n  actionCallback: (action: Action) => T\n): T => {\n  return actionCallback(\n    {\n      openModal,\n      okModal,\n      closeModal,\n      toggleModal,\n      clearModalTag,\n      clearAllModalTags\n    }\n  )\n}","import React, { useMemo, memo } from 'react'\nimport { useModalStore, State } from '../store'\n\ntype ModalComponent = React.FunctionComponent<any> | React.ComponentType<any>\n\nexport interface ModalWrapperProps {\n  modals: Record<string, ModalComponent>\n}\n\nexport const ModalWrapper = memo(function ModalWrapper({\n  modals\n}: ModalWrapperProps) {\n  const modalTags = useModalStore((state: State) => state.modalTags)\n  \n  const modalOpened = useMemo(() => {\n    return Object.entries(modals)\n      .filter(([tag]) => !!modalTags[tag]?.input)\n      .map(([tag, Modal]) => <Modal key={tag} />)\n  }, [modals, modalTags])\n  \n  return <React.Fragment>{modalOpened}</React.Fragment>\n})\n","import { useEffect, useCallback, useRef } from 'react'\nimport { TagType } from './tag'\nimport { useModalStore, useModalActions, store } from '../store'\n\nexport type Any = string | number | boolean | object | undefined | Record<string, any>\n\nexport interface DisclosureHookProps<O> {\n  tag: TagType\n  isOpen?: boolean\n  onOpen?: () => void\n  onClose?: () => void\n  onToggle?: () => void\n  onChange?: (isOpen: boolean) => void\n  onOk?: (output?: O) => void\n  onCancel?: () => void\n}\n\nexport const useDisclosure = <Input = Any, Output = Any>(\n  disclosureHook: DisclosureHookProps<Output>\n) => {\n  const tag = disclosureHook.tag\n  \n  // Use refs to store callbacks to avoid stale closures\n  const disclosureHookRef = useRef(disclosureHook)\n  disclosureHookRef.current = disclosureHook\n\n  const inputState = useModalStore(\n    (state) => state.modalTags[tag]?.input\n  ) as Input\n  const outputState = useModalStore(\n    (state) => state.modalTags[tag]?.output\n  ) as Output\n  const clearDisclosureTag = useModalActions(\n    (actions) => actions.clearModalTag\n  )\n\n  const onOpenAction = useModalActions((actions) => actions.openModal)\n  const okAction = useModalActions((actions) => actions.okModal)\n  const onCloseAction = useModalActions((actions) => actions.closeModal)\n  const onToggleAction = useModalActions((actions) => actions.toggleModal)\n\n  const updateInput = useCallback((input?: Input) => {\n    // If input is a function, call it and set the result as input\n    let processedInput = input\n    if (processedInput && typeof processedInput == 'object' && 'preventDefault' in processedInput) {\n      processedInput = undefined\n    }\n    onOpenAction(tag, processedInput as Any)\n  }, [tag, onOpenAction])\n\n  const onOpen = useCallback((input?: Input) => {\n    updateInput(input)\n    disclosureHookRef.current?.onOpen?.()\n  }, [updateInput])\n\n  const onClose = useCallback(() => {\n    onCloseAction(tag)\n    disclosureHookRef.current?.onClose?.()\n  }, [tag, onCloseAction])\n\n  const onToggle = useCallback(() => {\n    onToggleAction(tag)\n    disclosureHookRef.current?.onToggle?.()\n  }, [tag, onToggleAction])\n\n  const onOk = useCallback((output?: Output) => {\n    disclosureHookRef.current?.onOk?.(output)\n    okAction(tag, output as Any)\n  }, [tag, okAction])\n\n  const onChange = useCallback((isOpen: boolean) => {\n    if (isOpen) {\n      onOpen()\n    } else {\n      onClose()\n    }\n    disclosureHookRef.current?.onChange?.(isOpen)\n  }, [onOpen, onClose])\n\n  useEffect(() => {\n    return () => {\n      clearDisclosureTag(tag)\n    }\n  }, [tag, clearDisclosureTag])\n\n  useEffect(() => {\n    if (outputState) {\n      onOk(outputState as Output)\n    }\n  }, [outputState, onOk])\n\n  return {\n    isOpen: !!inputState,\n    input: typeof inputState === 'boolean' ? undefined : inputState,\n    onOpen,\n    onClose,\n    onToggle,\n    onOk,\n    onChange,\n    updateInput,\n    store\n  }\n}\n","import * as React from 'react'\nimport { ModalWrapper } from './provider'\n\ntype ModalComponent = React.FunctionComponent<any> | React.ComponentType<any>\n\nexport type ReactHookModalProviderProps = {\n  children: React.ReactNode\n  modals: Record<string, ModalComponent>\n}\n\nexport const ReactHookModalProvider = ({\n  children,\n  modals\n}: ReactHookModalProviderProps) => {\n  return (\n    <React.Fragment>\n      <ModalWrapper modals={modals} />\n      {children}\n    </React.Fragment>\n  )\n}\n\nexport * from './hook'\nexport * from './provider'\n"],"names":["store","Store","modalTags","openModal","tag","input","setState","state","_extends2","_extends","okModal","output","_extends3","closeModal","_extends4","toggleModal","_state$modalTags$tag","_extends5","clearModalTag","newModalTags","clearAllModalTags","useModalStore","stateCallback","useStore","useModalActions","actionCallback","ModalWrapper","memo","_ref","modals","modalOpened","useMemo","Object","entries","filter","_ref2","_modalTags$tag","map","_ref3","Modal","React","key","Fragment","useDisclosure","disclosureHook","disclosureHookRef","useRef","current","inputState","outputState","_state$modalTags$tag2","clearDisclosureTag","actions","onOpenAction","okAction","onCloseAction","onToggleAction","updateInput","useCallback","processedInput","undefined","onOpen","_disclosureHookRef$cu","_disclosureHookRef$cu2","call","onClose","_disclosureHookRef$cu3","_disclosureHookRef$cu4","onToggle","_disclosureHookRef$cu5","_disclosureHookRef$cu6","onOk","_disclosureHookRef$cu7","_disclosureHookRef$cu8","onChange","isOpen","_disclosureHookRef$cu9","_disclosureHookRef$cu0","useEffect","ReactHookModalProvider","children"],"mappings":"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"}

package/dist/provider/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare type ModalComponent = React.FunctionComponent<any> | React.ComponentType<any>;
+export interface ModalWrapperProps {
+    modals: Record<string, ModalComponent>;
+}
+export declare const ModalWrapper: React.NamedExoticComponent<ModalWrapperProps>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/provider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/provider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAG5C,aAAK,cAAc,GAAG,KAAK,CAAC,iBAAiB,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAA;AAE7E,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAA;CACvC;AAED,eAAO,MAAM,YAAY,+CAYvB,CAAA"}

package/dist/store/index.d.ts

@@ -0,0 +1,22 @@
+import { Store } from "@tanstack/react-store";
+import { Any } from '../hook';
+export declare type State = {
+    modalTags: {
+        [tag: string]: {
+            input?: Any;
+            output?: Any;
+        };
+    };
+};
+export declare type Action = {
+    openModal: (tag: string, input?: Any) => void;
+    okModal: (tag: string, output?: Any) => void;
+    closeModal: (tag: string) => void;
+    toggleModal: (tag: string) => void;
+    clearModalTag: (tag: string) => void;
+    clearAllModalTags: () => void;
+};
+export declare const store: Store<State, (cb: State) => State>;
+export declare const useModalStore: <T>(stateCallback: (state: State) => T) => T;
+export declare const useModalActions: <T>(actionCallback: (action: Action) => T) => T;
+//# sourceMappingURL=index.d.ts.map

package/dist/store/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/store/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAY,MAAM,uBAAuB,CAAC;AAIxD,OAAO,EAAE,GAAG,EAAE,MAAM,SAAS,CAAA;AAE7B,oBAAY,KAAK,GAAG;IAClB,SAAS,EAAE;QACT,CAAC,GAAG,EAAE,MAAM,GAAG;YACb,KAAK,CAAC,EAAE,GAAG,CAAA;YACX,MAAM,CAAC,EAAE,GAAG,CAAA;SACb,CAAA;KACF,CAAA;CACF,CAAA;AAED,oBAAY,MAAM,GAAG;IACnB,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;IAC7C,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;IAC5C,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,iBAAiB,EAAE,MAAM,IAAI,CAAA;CAC9B,CAAA;AACD,eAAO,MAAM,KAAK,oCAEhB,CAAC;AAuDH,eAAO,MAAM,aAAa,6BACD,KAAK,YAG7B,CAAA;AAED,eAAO,MAAM,eAAe,+BACD,MAAM,YAYhC,CAAA"}

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@helloworldqq/react-modal",
+  "version": "1.0.0",
+  "description": "React hook disclosure modal - A powerful and flexible React hook library for managing modals",
+  "author": "helloworldqq",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vnquang24/react-modal.git"
+  },
+  "homepage": "https://github.com/vnquang24/react-modal#readme",
+  "bugs": {
+    "url": "https://github.com/vnquang24/react-modal/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "react",
+    "modal",
+    "hook",
+    "disclosure",
+    "dialog",
+    "react-modal",
+    "react-hook",
+    "antd",
+    "ant-design",
+    "react-19",
+    "typescript"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.modern.js",
+  "source": "src/index.tsx",
+  "types": "dist/index.d.ts",
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "microbundle-crl --no-compress --format modern,cjs",
+    "start": "microbundle-crl watch --no-compress --format modern,cjs",
+    "prepare": "run-s build",
+    "test": "run-s test:lint test:build",
+    "test:build": "run-s build",
+    "test:lint": "eslint .",
+    "format": "prettier --write ."
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.11.24",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@typescript-eslint/eslint-plugin": "^7.1.0",
+    "@typescript-eslint/parser": "^7.1.0",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "microbundle-crl": "^0.13.11",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.2.5",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "ts-morph": "^26.0.0",
+    "typescript": "^5.3.3"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@tanstack/react-store": "^0.7.3"
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+}