@overlastic/react 0.4.8 → 0.5.0

package/LICENSE

@@ -1,23 +1,23 @@
-MIT License
-
-Copyright (c) 2022-PRESENT Hairyf<https://github.com/hairyf>
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
-
+MIT License
+
+Copyright (c) 2022-PRESENT Hairyf<https://github.com/hairyf>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+

package/README.md

@@ -1,175 +1,183 @@
-# @overlastic/react
-
-@overlastic/react is used to define Overlay components in react and supports both imperative and declarative usage!
-
-## Install
-
-With pnpm: 
-```sh
-pnpm add @overlastic/react
-```
-
-With yarn:
-```sh
-yarn add @overlastic/react
-```
-
-## Usage
-
-### Step 1: Define Component
-
-```tsx
-// overlay.tsx
-export function Component(props) {
-  const { visible, resolve, reject } = usePrograms({
-    // Duration of overlay duration, helps prevent premature component destruction
-    duration: 200,
-  })
-
-  return <div className={visible && 'is--visible'}>
-    <span onClick={() => resolve(`${props.title}:confirmed`)}> Confirm </span>
-  </div>
-}
-```
-
-### Step 2: Create Overlay
-
-You can convert the component into a modal dialog box by using the `defineOverlay` method, which allows you to call it in Javascript / Typescript.
-```ts
-import { defineOverlay } from '@overlastic/react'
-import { Component } from './overlay'
-
-// Convert to imperative callback
-const callback = defineOverlay(Component)
-// Call the component and get the resolve callback value
-const value = await callback({ title: 'callbackOverlay' })
-// value === "callbackOverlay:confirmed"
-```
-
-You can also directly call the component through `renderOverlay`, bypassing the `defineOverlay` method.
-
-```ts
-import { renderOverlay } from '@overlastic/react'
-import { Component } from './overlay'
-
-const value = await renderOverlay(Component, {
-  title: 'usePrograms'
-})
-// value === "usePrograms:confirmed"
-```
-
-## Injection Holder
-
-In addition to using `defineOverlay` and `renderOverlay` to create popup components, you can also use useOverlayHolder to create popup components within a component and inherit the current context of the application.
-
-```tsx
-import { useOverlayHolder } from '@overlastic/react'
-import { OverlayComponent } from './overlay'
-
-export function Main() {
-  // Use useOverlayHolder(Component) to create a component holder that supports the current context.
-  const [holder, overlayApi] = useOverlayHolder(OverlayComponent)
-
-  function open() {
-    // Open the popup component
-    overlayApi()
-      .then((result) => {})
-  }
-  return (<>
-    <div onClick={open}> open </div>
-    {/* Mount the holder */}
-    {holder}
-  </>)
-}
-```
-
-## Define Component
-
-Components created using `@overlastic/react` support both imperative and declarative methods of calling. In addition to imperative methods, these components can also be used in JSX.
-
-> This is an optional option that is very useful when porting old components.
-
-```tsx
-// If using Typescript, use PropsWithOverlays to define props type
-import type { PropsWithOverlays } from '@overlastic/react'
-import { usePrograms } from '@overlastic/react'
-
-export function Component(props: PropsWithOverlays<{ /* ...you props */ }>) {
-  const { visible, resolve, reject } = usePrograms({
-    // pass props to usePrograms for processing
-    props
-  })
-
-  return <div className={visible && 'is--visible'}>
-    ...
-  </div>
-}
-```
-
-Once the Overlay component has received props, the popup layer component can be used in JSX.
-
-```tsx
-import { useState } from 'react'
-import { Component } from './overlay'
-
-export function Main() {
-  const [visible, setVisible] = useState(false)
-
-  function openOverlay() {
-    setVisible(true)
-  }
-
-  function onResolve(value) {
-    setVisible(false)
-  }
-
-  function onReject(value) {
-    setVisible(false)
-  }
-
-  return (
-    <Component visible={visible} onResolve={onResolve} onReject={onReject} />
-  )
-}
-```
-
-If you want to replace other fields and event names, you can do so using the `model` and `events` config of usePrograms.
-
-```jsx
-function Component(props: { onOn?: Function; onNook?: Function; open: boolean }) {
-  const { visible, resolve, reject } = usePrograms({
-    events: { resolve: 'onOk', reject: 'onNook' },
-    model: 'open',
-    props,
-  })
-  // ...
-}
-```
-
-## Customized
-
-You can use `@overlastic/react` to modify existing components or component libraries
-
-Take [antd(drawer)](https://ant.design/components/drawer-cn) as an example：
-
-```tsx
-import type { PropsWithOverlays } from '@overlastic/react'
-import { usePrograms } from '@overlastic/react'
-import { Button, Drawer } from 'antd'
-
-function MyDrawer(props: PropsWithOverlays<{ title: string }>) {
-  const { visible, resolve, reject } = usePrograms({
-    duration: 200,
-    props,
-  })
-
-  return (
-    <Drawer title={props.title} onClose={reject} open={visible}>
-      {/* Custom contents.... */}
-      <Button type="primary" onClick={() => resolve(`${props.title}:confirmed`)}>
-        Confirm
-      </Button>
-    </Drawer>
-  )
-}
-```
+# @overlastic/react
+
+@overlastic/react is used to define Overlay components in react and supports both imperative and declarative usage!
+
+## Install
+
+With pnpm:
+```sh
+pnpm add @overlastic/react
+```
+
+With yarn:
+```sh
+yarn add @overlastic/react
+```
+
+## Usage
+
+### Step 1: Define Component
+
+```tsx
+// overlay.tsx
+export function Component(props) {
+  const { visible, resolve, reject } = useOverlayDefine({
+    // Duration of overlay duration, helps prevent premature component destruction
+    duration: 200,
+  })
+
+  return (
+    <div className={visible && 'is--visible'}>
+      <span onClick={() => resolve(`${props.title}:confirmed`)}> Confirm </span>
+    </div>
+  )
+}
+```
+
+### Step 2: Create Overlay
+
+You can convert the component into a modal dialog box by using the `defineOverlay` method, which allows you to call it in Javascript / Typescript.
+```ts
+import { defineOverlay } from '@overlastic/react'
+import { Component } from './overlay'
+
+// Convert to imperative callback
+const callback = defineOverlay(Component)
+// Call the component and get the resolve callback value
+const value = await callback({ title: 'callbackOverlay' })
+// value === "callbackOverlay:confirmed"
+```
+
+You can also directly call the component through `renderOverlay`, bypassing the `defineOverlay` method.
+
+```ts
+import { renderOverlay } from '@overlastic/react'
+import { Component } from './overlay'
+
+const value = await renderOverlay(Component, {
+  title: 'useOverlayDefine'
+})
+// value === "useOverlayDefine:confirmed"
+```
+
+## Injection Holder
+
+In addition to using `defineOverlay` and `renderOverlay` to create popup components, you can also use useOverlayHolder to create popup components within a component and inherit the current context of the application.
+
+```tsx
+import { useOverlayHolder } from '@overlastic/react'
+import { OverlayComponent } from './overlay'
+
+export function Main() {
+  // Use useOverlayHolder(Component) to create a component holder that supports the current context.
+  const [holder, overlayApi] = useOverlayHolder(OverlayComponent)
+
+  function open() {
+    // Open the popup component
+    overlayApi()
+      .then((result) => {})
+  }
+  return (
+    <>
+      <div onClick={open}> open </div>
+      {/* Mount the holder */}
+      {holder}
+    </>
+  )
+}
+```
+
+## Define Component
+
+Components created using `@overlastic/react` support both imperative and declarative methods of calling. In addition to imperative methods, these components can also be used in JSX.
+
+> This is an optional option that is very useful when porting old components.
+
+```tsx
+// If using Typescript, use PropsWithOverlays to define props type
+import type { PropsWithOverlays } from '@overlastic/react'
+import { useOverlayDefine } from '@overlastic/react'
+
+export function Component(props: PropsWithOverlays<{ /* ...you props */ }>) {
+  const { visible, resolve, reject } = useOverlayDefine({
+    // pass props to useOverlayDefine for processing
+    props
+  })
+
+  return (
+    <div className={visible && 'is--visible'}>
+      ...
+    </div>
+  )
+}
+```
+
+Once the Overlay component has received props, the popup layer component can be used in JSX.
+
+```tsx
+import { useState } from 'react'
+import { Component } from './overlay'
+
+export function Main() {
+  const [visible, setVisible] = useState(false)
+
+  function openOverlay() {
+    setVisible(true)
+  }
+
+  function onResolve(value) {
+    setVisible(false)
+  }
+
+  function onReject(value) {
+    setVisible(false)
+  }
+
+  return (
+    <Component visible={visible} onResolve={onResolve} onReject={onReject} />
+  )
+}
+```
+
+If you want to replace other fields and event names, you can do so using the `model` and `events` config of useOverlayDefine.
+
+```jsx
+function Component(props: { onOn?: Function, onNook?: Function, open: boolean }) {
+  const { visible, resolve, reject } = useOverlayDefine({
+    events: { resolve: 'onOk', reject: 'onNook' },
+    model: 'open',
+    props,
+  })
+  // ...
+}
+```
+
+## Customized
+
+You can use `@overlastic/react` to modify existing components or component libraries
+
+Take [antd(drawer)](https://ant.design/components/drawer-cn) as an example：
+
+```tsx
+import type { PropsWithOverlays } from '@overlastic/react'
+import { useOverlayDefine } from '@overlastic/react'
+import { Button, Drawer } from 'antd'
+
+function MyDrawer(props: PropsWithOverlays<{ title: string }>) {
+  const { visible, resolve, reject } = useOverlayDefine({
+    duration: 200,
+    props,
+  })
+
+  return (
+    <Drawer title={props.title} onClose={reject} open={visible}>
+      {/* Custom contents.... */}
+      <Button type="primary" onClick={() => resolve(`${props.title}:confirmed`)}>
+        Confirm
+      </Button>
+    </Drawer>
+  )
+}
+
+export default MyDrawer
+```

package/dist/index.cjs

@@ -20,15 +20,16 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  OverlayProvider: () => OverlayProvider,
   defineOverlay: () => defineOverlay,
   renderOverlay: () => renderOverlay,
   useOverlay: () => useOverlay,
-  useOverlayHolder: () => useOverlayHolder,
-  usePrograms: () => usePrograms
+  useOverlayDefine: () => useOverlayDefine,
+  useOverlayHolder: () => useOverlayHolder
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/composable/usePrograms.ts
+// src/composable/define.ts
 var import_core2 = require("@overlastic/core");
 var import_react2 = require("react");
 
@@ -52,8 +53,8 @@ function defineAnonymousComponent(component) {
   return { "--": component }["--"];
 }
 
-// src/composable/usePrograms.ts
-function usePrograms(options = {}) {
+// src/composable/define.ts
+function useOverlayDefine(options = {}) {
   const { immediate = true, duration = 0, automatic = true } = options;
   const context = (0, import_react2.useContext)(ScriptsContext);
   const dec = Reflect.get(context, "in_dec");
@@ -96,7 +97,7 @@ function useMount(callback = import_core2.noop) {
   (0, import_react2.useEffect)(() => callback(), []);
 }
 
-// src/composable/useScripts.ts
+// src/composable/scripts.ts
 var import_react3 = require("react");
 function useScripts(options) {
   const { reject: _reject } = options.deferred || {};
@@ -116,69 +117,39 @@ function useScripts(options) {
   };
 }
 
-// src/composable/useOverlay.tsx
+// src/composable/holder.tsx
 var import_core3 = require("@overlastic/core");
-var import_react4 = require("react");
 var import_pascal_case = require("pascal-case");
+var import_react4 = require("react");
 var import_react_dom = require("react-dom");
 var import_jsx_runtime = require("react/jsx-runtime");
-var { define } = (0, import_core3.createConstructor)((Instance, props, options) => {
-  const { container, id, deferred, render, vanish: _vanish } = options;
-  const InstanceWithProvider = defineAnonymousComponent(() => {
-    const content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      ScriptsContext.Provider,
-      {
-        value: useScripts({ deferred, vanish }),
-        ...{ id: (0, import_pascal_case.pascalCase)(id) },
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Instance, { ...props })
-      }
-    );
-    return (0, import_react_dom.createPortal)(content, container);
-  });
-  function vanish() {
-    _vanish(InstanceWithProvider);
-    container.remove();
-  }
-  render(InstanceWithProvider, props);
-});
-function useOverlay(Instance) {
-  const { render, vanish } = (0, import_react4.useContext)(InstancesContext);
-  return define(Instance, { render, vanish });
-}
-
-// src/composable/useOverlayHolder.tsx
-var import_core4 = require("@overlastic/core");
-var import_pascal_case2 = require("pascal-case");
-var import_react5 = require("react");
-var import_react_dom2 = require("react-dom");
-var import_jsx_runtime2 = require("react/jsx-runtime");
 function useOverlayHolder(Component, options = {}) {
   const { callback, scripts, props, refresh } = useRefreshMetadata();
-  const name = (0, import_core4.defineName)(options.id, options.autoIncrement);
+  const name = (0, import_core3.defineName)(options.id, options.autoIncrement);
   function render() {
     const root = options.root || (typeof document !== "undefined" ? document.body : void 0);
-    const content = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { id: name, children: [
+    const content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { id: name, children: [
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { ...props }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props }),
       " "
     ] });
-    return options.root !== false && root ? (0, import_react_dom2.createPortal)(content, root) : content;
+    return options.root !== false && root ? (0, import_react_dom.createPortal)(content, root) : content;
   }
-  const holder = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  const holder = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     ScriptsContext.Provider,
     {
       value: scripts,
-      ...{ id: (0, import_pascal_case2.pascalCase)(name) },
+      ...{ id: (0, import_pascal_case.pascalCase)(name) },
       children: refresh ? render() : null
     }
   );
   return [holder, callback];
 }
 function useRefreshMetadata() {
-  const [props, setProps] = (0, import_react5.useState)();
-  const [refresh, setRefresh] = (0, import_react5.useState)(false);
-  const [visible, setVisible] = (0, import_react5.useState)(false);
-  const deferred = (0, import_react5.useRef)({});
+  const [props, setProps] = (0, import_react4.useState)();
+  const [refresh, setRefresh] = (0, import_react4.useState)(false);
+  const [visible, setVisible] = (0, import_react4.useState)(false);
+  const deferred = (0, import_react4.useRef)({});
   const scripts = {
     deferred: deferred.current,
     resolve: deferred.current.resolve,
@@ -194,7 +165,7 @@ function useRefreshMetadata() {
     (_a = scripts.reject) == null ? void 0 : _a.call(scripts);
   }
   async function callback(props2) {
-    deferred.current = (0, import_core4.createDeferred)();
+    deferred.current = (0, import_core3.createDeferred)();
     setProps(props2);
     setRefresh(true);
     return deferred.current;
@@ -202,6 +173,34 @@ function useRefreshMetadata() {
   return { callback, scripts, props, refresh };
 }
 
+// src/composable/overlay.tsx
+var import_core4 = require("@overlastic/core");
+var import_react5 = require("react");
+var import_pascal_case2 = require("pascal-case");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var { define } = (0, import_core4.createConstructor)((Instance, props, options) => {
+  const { id, deferred, render, vanish: _vanish } = options;
+  const InstanceWithProvider = defineAnonymousComponent(() => {
+    const content = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      ScriptsContext.Provider,
+      {
+        value: useScripts({ deferred, vanish }),
+        ...{ id: (0, import_pascal_case2.pascalCase)(id) },
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Instance, { ...props })
+      }
+    );
+    return content;
+  });
+  function vanish() {
+    _vanish(InstanceWithProvider);
+  }
+  render(InstanceWithProvider, props);
+}, { container: false });
+function useOverlay(Instance) {
+  const { render, vanish } = (0, import_react5.useContext)(InstancesContext);
+  return define(Instance, { render, vanish });
+}
+
 // src/define/constructor.tsx
 var import_core5 = require("@overlastic/core");
 var import_client = require("react-dom/client");
@@ -233,11 +232,29 @@ var constructor = (0, import_core5.createConstructor)((Instance, props, options)
 // src/define/index.ts
 var defineOverlay = constructor.define;
 var renderOverlay = constructor.render;
+
+// src/components/OverlayProvider.tsx
+var import_react6 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function OverlayProvider(props) {
+  const [instances, setInstances] = (0, import_react6.useState)([]);
+  function render(Instance, props2) {
+    setInstances((instances2) => [...instances2, { Instance, props: props2 }]);
+  }
+  function vanish(instance) {
+    setInstances((instances2) => [...instances2.filter(({ Instance }) => instance !== Instance)]);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(InstancesContext.Provider, { value: { render, vanish }, children: [
+    instances.map(({ Instance, props: props2 }, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Instance, { ...props2 }, index)),
+    props.children
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  OverlayProvider,
   defineOverlay,
   renderOverlay,
   useOverlay,
-  useOverlayHolder,
-  usePrograms
+  useOverlayDefine,
+  useOverlayHolder
 });

package/dist/index.d.cts

@@ -1,7 +1,8 @@
 import * as react from 'react';
-import { Dispatch, SetStateAction, FC } from 'react';
+import { Dispatch, SetStateAction, FC, PropsWithChildren } from 'react';
 import * as _overlastic_core from '@overlastic/core';
 import { ImperativeOverlay, MountOptions } from '@overlastic/core';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type PropsWidthOverlays<P = unknown> = P & {
     visible?: boolean;
@@ -23,7 +24,7 @@ interface PromptifyEvents {
      */
     resolve?: string;
 }
-interface ProgramsOptions {
+interface OverlayDefineOptions {
     /** animation duration to avoid premature destruction of components */
     duration?: number;
     /** whether to set visible to true immediately */
@@ -63,7 +64,10 @@ interface ProgramsReturn {
     /** current deferred */
     deferred?: Promise<any>;
 }
-declare function usePrograms(options?: ProgramsOptions): ProgramsReturn;
+declare function useOverlayDefine(options?: OverlayDefineOptions): ProgramsReturn;
+
+type InjectionHolder<Props, Resolved> = [JSX.Element, ImperativeOverlay<Props, Resolved>];
+declare function useOverlayHolder<Props, Resolved = void>(Component: FC<Props>, options?: MountOptions): InjectionHolder<Props, Resolved>;
 
 interface Options {
     render: (instance: FC, props: any) => void;
@@ -71,10 +75,9 @@ interface Options {
 }
 declare function useOverlay<Props, Resolved>(Instance: FC<Props>): _overlastic_core.ImperativeOverlay<Props, Resolved, Options>;
 
-type InjectionHolder<Props, Resolved> = [JSX.Element, ImperativeOverlay<Props, Resolved>];
-declare function useOverlayHolder<Props, Resolved = void>(Component: FC<Props>, options?: MountOptions): InjectionHolder<Props, Resolved>;
-
-declare const defineOverlay: <Props, Resolved = void>(instance: react.FC<any>, options?: _overlastic_core.GlobalMountOptions | undefined) => _overlastic_core.ImperativeOverlay<Props, Resolved, {}>;
+declare const defineOverlay: <Props, Resolved = void>(instance: react.FC<any>, options?: _overlastic_core.GlobalMountOptions | undefined) => _overlastic_core.ImperativeOverlay<Props, Resolved, unknown>;
 declare const renderOverlay: <Props, Resolved = void>(instance: react.FC<any>, props?: Props | undefined, options?: _overlastic_core.GlobalMountOptions | undefined) => Promise<Resolved>;
 
-export { type InjectionHolder, type ProgramsOptions, type ProgramsReturn, type PropsWidthOverlays, defineOverlay, renderOverlay, useOverlay, useOverlayHolder, usePrograms };
+declare function OverlayProvider(props: PropsWithChildren): react_jsx_runtime.JSX.Element;
+
+export { type InjectionHolder, type OverlayDefineOptions, OverlayProvider, type ProgramsReturn, type PropsWidthOverlays, defineOverlay, renderOverlay, useOverlay, useOverlayDefine, useOverlayHolder };

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 import * as react from 'react';
-import { Dispatch, SetStateAction, FC } from 'react';
+import { Dispatch, SetStateAction, FC, PropsWithChildren } from 'react';
 import * as _overlastic_core from '@overlastic/core';
 import { ImperativeOverlay, MountOptions } from '@overlastic/core';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type PropsWidthOverlays<P = unknown> = P & {
     visible?: boolean;
@@ -23,7 +24,7 @@ interface PromptifyEvents {
      */
     resolve?: string;
 }
-interface ProgramsOptions {
+interface OverlayDefineOptions {
     /** animation duration to avoid premature destruction of components */
     duration?: number;
     /** whether to set visible to true immediately */
@@ -63,7 +64,10 @@ interface ProgramsReturn {
     /** current deferred */
     deferred?: Promise<any>;
 }
-declare function usePrograms(options?: ProgramsOptions): ProgramsReturn;
+declare function useOverlayDefine(options?: OverlayDefineOptions): ProgramsReturn;
+
+type InjectionHolder<Props, Resolved> = [JSX.Element, ImperativeOverlay<Props, Resolved>];
+declare function useOverlayHolder<Props, Resolved = void>(Component: FC<Props>, options?: MountOptions): InjectionHolder<Props, Resolved>;
 
 interface Options {
     render: (instance: FC, props: any) => void;
@@ -71,10 +75,9 @@ interface Options {
 }
 declare function useOverlay<Props, Resolved>(Instance: FC<Props>): _overlastic_core.ImperativeOverlay<Props, Resolved, Options>;
 
-type InjectionHolder<Props, Resolved> = [JSX.Element, ImperativeOverlay<Props, Resolved>];
-declare function useOverlayHolder<Props, Resolved = void>(Component: FC<Props>, options?: MountOptions): InjectionHolder<Props, Resolved>;
-
-declare const defineOverlay: <Props, Resolved = void>(instance: react.FC<any>, options?: _overlastic_core.GlobalMountOptions | undefined) => _overlastic_core.ImperativeOverlay<Props, Resolved, {}>;
+declare const defineOverlay: <Props, Resolved = void>(instance: react.FC<any>, options?: _overlastic_core.GlobalMountOptions | undefined) => _overlastic_core.ImperativeOverlay<Props, Resolved, unknown>;
 declare const renderOverlay: <Props, Resolved = void>(instance: react.FC<any>, props?: Props | undefined, options?: _overlastic_core.GlobalMountOptions | undefined) => Promise<Resolved>;
 
-export { type InjectionHolder, type ProgramsOptions, type ProgramsReturn, type PropsWidthOverlays, defineOverlay, renderOverlay, useOverlay, useOverlayHolder, usePrograms };
+declare function OverlayProvider(props: PropsWithChildren): react_jsx_runtime.JSX.Element;
+
+export { type InjectionHolder, type OverlayDefineOptions, OverlayProvider, type ProgramsReturn, type PropsWidthOverlays, defineOverlay, renderOverlay, useOverlay, useOverlayDefine, useOverlayHolder };

package/dist/index.global.js

@@ -1389,7 +1389,7 @@ var OverlaysReact = (() => {
             }
             return dispatcher.useContext(Context);
           }
-          function useState3(initialState) {
+          function useState4(initialState) {
             var dispatcher = resolveDispatcher();
             return dispatcher.useState(initialState);
           }
@@ -2192,7 +2192,7 @@ var OverlaysReact = (() => {
           exports.useMemo = useMemo;
           exports.useReducer = useReducer;
           exports.useRef = useRef2;
-          exports.useState = useState3;
+          exports.useState = useState4;
           exports.useSyncExternalStore = useSyncExternalStore;
           exports.useTransition = useTransition;
           exports.version = ReactVersion;
@@ -30296,7 +30296,7 @@ var OverlaysReact = (() => {
             return root2;
           }
           var ReactVersion = "18.3.1";
-          function createPortal3(children, containerInfo, implementation) {
+          function createPortal2(children, containerInfo, implementation) {
             var key = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : null;
             {
               checkKeyStringCoercion(key);
@@ -31153,7 +31153,7 @@ var OverlaysReact = (() => {
             if (!isValidContainer(container)) {
               throw new Error("Target container is not a DOM element.");
             }
-            return createPortal3(children, container, null, key);
+            return createPortal2(children, container, null, key);
           }
           function renderSubtreeIntoContainer(parentComponent, element, containerNode, callback) {
             return unstable_renderSubtreeIntoContainer(parentComponent, element, containerNode, callback);
@@ -32161,11 +32161,11 @@ var OverlaysReact = (() => {
               return jsxWithValidation(type, props, key, false);
             }
           }
-          var jsx4 = jsxWithValidationDynamic;
-          var jsxs2 = jsxWithValidationStatic;
+          var jsx5 = jsxWithValidationDynamic;
+          var jsxs3 = jsxWithValidationStatic;
           exports.Fragment = REACT_FRAGMENT_TYPE;
-          exports.jsx = jsx4;
-          exports.jsxs = jsxs2;
+          exports.jsx = jsx5;
+          exports.jsxs = jsxs3;
         })();
       }
     }
@@ -32217,11 +32217,12 @@ var OverlaysReact = (() => {
   // src/index.ts
   var src_exports = {};
   __export(src_exports, {
+    OverlayProvider: () => OverlayProvider,
     defineOverlay: () => defineOverlay,
     renderOverlay: () => renderOverlay,
     useOverlay: () => useOverlay,
-    useOverlayHolder: () => useOverlayHolder,
-    usePrograms: () => usePrograms
+    useOverlayDefine: () => useOverlayDefine,
+    useOverlayHolder: () => useOverlayHolder
   });
 
   // ../@core/src/define/global.ts
@@ -32288,14 +32289,15 @@ var OverlaysReact = (() => {
   }
 
   // ../@core/src/constructor.ts
-  function createConstructor(mount) {
-    function define2(instance, options) {
-      function executor(props, options2) {
+  function createConstructor(mount, options = {}) {
+    const { container: globalContainer } = options;
+    function define2(instance, options2) {
+      function executor(props, options3) {
         const deferred = createDeferred();
-        const name = defineName(options2.id, options2.autoIncrement);
-        const index = getIndex(options2.id);
-        const container = defineGlobalElement(name, options2.root);
-        mount(instance, props, Object.assign(options2, {
+        const name = defineName(options3.id, options3.autoIncrement);
+        const index = getIndex(options3.id);
+        const container = globalContainer ? defineGlobalElement(name, options3.root) : document.body;
+        mount(instance, props, Object.assign(options3, {
           position: context.position,
           id: name,
           deferred,
@@ -32305,21 +32307,21 @@ var OverlaysReact = (() => {
         return deferred;
       }
       let inst;
-      function only(props, options2) {
+      function only(props, options3) {
         if (!inst) {
-          inst = executor(props, options2);
+          inst = executor(props, options3);
           inst.finally(() => inst = void 0);
         }
         return inst;
       }
       function caller(props, overrides) {
-        const opts = { ...options, ...overrides };
+        const opts = { ...options2, ...overrides };
         return opts.only ? only(props, opts) : executor(props, opts);
       }
       return caller;
     }
-    function render(instance, props, options) {
-      return define2(instance, options)(props);
+    function render(instance, props, options2) {
+      return define2(instance, options2)(props);
     }
     return { define: define2, render };
   }
@@ -32332,7 +32334,7 @@ var OverlaysReact = (() => {
     return new Promise((resolve) => setTimeout(resolve, milliseconds));
   }
 
-  // src/composable/usePrograms.ts
+  // src/composable/define.ts
   var import_react2 = __toESM(require_react(), 1);
 
   // src/internal/contexts.tsx
@@ -32354,8 +32356,8 @@ var OverlaysReact = (() => {
     return { "--": component }["--"];
   }
 
-  // src/composable/usePrograms.ts
-  function usePrograms(options = {}) {
+  // src/composable/define.ts
+  function useOverlayDefine(options = {}) {
     const { immediate = true, duration = 0, automatic = true } = options;
     const context2 = (0, import_react2.useContext)(ScriptsContext);
     const dec = Reflect.get(context2, "in_dec");
@@ -32398,7 +32400,7 @@ var OverlaysReact = (() => {
     (0, import_react2.useEffect)(() => callback(), []);
   }
 
-  // src/composable/useScripts.ts
+  // src/composable/scripts.ts
   var import_react3 = __toESM(require_react(), 1);
   function useScripts(options) {
     const { reject: _reject } = options.deferred || {};
@@ -32418,9 +32420,6 @@ var OverlaysReact = (() => {
     };
   }
 
-  // src/composable/useOverlay.tsx
-  var import_react4 = __toESM(require_react(), 1);
-
   // ../../node_modules/.pnpm/tslib@2.5.0/node_modules/tslib/tslib.es6.js
   var __assign = function() {
     __assign = Object.assign || function __assign2(t) {
@@ -32481,50 +32480,23 @@ var OverlaysReact = (() => {
     return noCase(input, __assign({ delimiter: "", transform: pascalCaseTransform }, options));
   }
 
-  // src/composable/useOverlay.tsx
+  // src/composable/holder.tsx
+  var import_react4 = __toESM(require_react(), 1);
   var import_react_dom = __toESM(require_react_dom(), 1);
   var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
-  var { define } = createConstructor((Instance, props, options) => {
-    const { container, id, deferred, render, vanish: _vanish } = options;
-    const InstanceWithProvider = defineAnonymousComponent(() => {
-      const content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        ScriptsContext.Provider,
-        {
-          value: useScripts({ deferred, vanish }),
-          ...{ id: pascalCase(id) },
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Instance, { ...props })
-        }
-      );
-      return (0, import_react_dom.createPortal)(content, container);
-    });
-    function vanish() {
-      _vanish(InstanceWithProvider);
-      container.remove();
-    }
-    render(InstanceWithProvider, props);
-  });
-  function useOverlay(Instance) {
-    const { render, vanish } = (0, import_react4.useContext)(InstancesContext);
-    return define(Instance, { render, vanish });
-  }
-
-  // src/composable/useOverlayHolder.tsx
-  var import_react5 = __toESM(require_react(), 1);
-  var import_react_dom2 = __toESM(require_react_dom(), 1);
-  var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
   function useOverlayHolder(Component, options = {}) {
     const { callback, scripts, props, refresh } = useRefreshMetadata();
     const name = defineName(options.id, options.autoIncrement);
     function render() {
       const root = options.root || (typeof document !== "undefined" ? document.body : void 0);
-      const content = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { id: name, children: [
+      const content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { id: name, children: [
         " ",
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { ...props }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props }),
         " "
       ] });
-      return options.root !== false && root ? (0, import_react_dom2.createPortal)(content, root) : content;
+      return options.root !== false && root ? (0, import_react_dom.createPortal)(content, root) : content;
     }
-    const holder = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    const holder = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       ScriptsContext.Provider,
       {
         value: scripts,
@@ -32535,10 +32507,10 @@ var OverlaysReact = (() => {
     return [holder, callback];
   }
   function useRefreshMetadata() {
-    const [props, setProps] = (0, import_react5.useState)();
-    const [refresh, setRefresh] = (0, import_react5.useState)(false);
-    const [visible, setVisible] = (0, import_react5.useState)(false);
-    const deferred = (0, import_react5.useRef)({});
+    const [props, setProps] = (0, import_react4.useState)();
+    const [refresh, setRefresh] = (0, import_react4.useState)(false);
+    const [visible, setVisible] = (0, import_react4.useState)(false);
+    const deferred = (0, import_react4.useRef)({});
     const scripts = {
       deferred: deferred.current,
       resolve: deferred.current.resolve,
@@ -32562,6 +32534,32 @@ var OverlaysReact = (() => {
     return { callback, scripts, props, refresh };
   }
 
+  // src/composable/overlay.tsx
+  var import_react5 = __toESM(require_react(), 1);
+  var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
+  var { define } = createConstructor((Instance, props, options) => {
+    const { id, deferred, render, vanish: _vanish } = options;
+    const InstanceWithProvider = defineAnonymousComponent(() => {
+      const content = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        ScriptsContext.Provider,
+        {
+          value: useScripts({ deferred, vanish }),
+          ...{ id: pascalCase(id) },
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Instance, { ...props })
+        }
+      );
+      return content;
+    });
+    function vanish() {
+      _vanish(InstanceWithProvider);
+    }
+    render(InstanceWithProvider, props);
+  }, { container: false });
+  function useOverlay(Instance) {
+    const { render, vanish } = (0, import_react5.useContext)(InstancesContext);
+    return define(Instance, { render, vanish });
+  }
+
   // src/define/constructor.tsx
   var import_client = __toESM(require_client(), 1);
   var import_jsx_runtime3 = __toESM(require_jsx_runtime(), 1);
@@ -32591,6 +32589,23 @@ var OverlaysReact = (() => {
   // src/define/index.ts
   var defineOverlay = constructor.define;
   var renderOverlay = constructor.render;
+
+  // src/components/OverlayProvider.tsx
+  var import_react6 = __toESM(require_react(), 1);
+  var import_jsx_runtime4 = __toESM(require_jsx_runtime(), 1);
+  function OverlayProvider(props) {
+    const [instances, setInstances] = (0, import_react6.useState)([]);
+    function render(Instance, props2) {
+      setInstances((instances2) => [...instances2, { Instance, props: props2 }]);
+    }
+    function vanish(instance) {
+      setInstances((instances2) => [...instances2.filter(({ Instance }) => instance !== Instance)]);
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(InstancesContext.Provider, { value: { render, vanish }, children: [
+      instances.map(({ Instance, props: props2 }, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Instance, { ...props2 }, index)),
+      props.children
+    ] });
+  }
   return __toCommonJS(src_exports);
 })();
 /*! Bundled license information:

package/dist/index.js

@@ -1,4 +1,4 @@
-// src/composable/usePrograms.ts
+// src/composable/define.ts
 import { delay, noop as noop2 } from "@overlastic/core";
 import { useContext, useEffect } from "react";
 
@@ -22,8 +22,8 @@ function defineAnonymousComponent(component) {
   return { "--": component }["--"];
 }
 
-// src/composable/usePrograms.ts
-function usePrograms(options = {}) {
+// src/composable/define.ts
+function useOverlayDefine(options = {}) {
   const { immediate = true, duration = 0, automatic = true } = options;
   const context = useContext(ScriptsContext);
   const dec = Reflect.get(context, "in_dec");
@@ -66,7 +66,7 @@ function useMount(callback = noop2) {
   useEffect(() => callback(), []);
 }
 
-// src/composable/useScripts.ts
+// src/composable/scripts.ts
 import { useState } from "react";
 function useScripts(options) {
   const { reject: _reject } = options.deferred || {};
@@ -86,42 +86,12 @@ function useScripts(options) {
   };
 }
 
-// src/composable/useOverlay.tsx
-import { createConstructor } from "@overlastic/core";
-import { useContext as useContext2 } from "react";
-import { pascalCase } from "pascal-case";
-import { createPortal } from "react-dom";
-import { jsx } from "react/jsx-runtime";
-var { define } = createConstructor((Instance, props, options) => {
-  const { container, id, deferred, render, vanish: _vanish } = options;
-  const InstanceWithProvider = defineAnonymousComponent(() => {
-    const content = /* @__PURE__ */ jsx(
-      ScriptsContext.Provider,
-      {
-        value: useScripts({ deferred, vanish }),
-        ...{ id: pascalCase(id) },
-        children: /* @__PURE__ */ jsx(Instance, { ...props })
-      }
-    );
-    return createPortal(content, container);
-  });
-  function vanish() {
-    _vanish(InstanceWithProvider);
-    container.remove();
-  }
-  render(InstanceWithProvider, props);
-});
-function useOverlay(Instance) {
-  const { render, vanish } = useContext2(InstancesContext);
-  return define(Instance, { render, vanish });
-}
-
-// src/composable/useOverlayHolder.tsx
+// src/composable/holder.tsx
 import { createDeferred, defineName } from "@overlastic/core";
-import { pascalCase as pascalCase2 } from "pascal-case";
+import { pascalCase } from "pascal-case";
 import { useRef, useState as useState2 } from "react";
-import { createPortal as createPortal2 } from "react-dom";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
 function useOverlayHolder(Component, options = {}) {
   const { callback, scripts, props, refresh } = useRefreshMetadata();
   const name = defineName(options.id, options.autoIncrement);
@@ -129,16 +99,16 @@ function useOverlayHolder(Component, options = {}) {
     const root = options.root || (typeof document !== "undefined" ? document.body : void 0);
     const content = /* @__PURE__ */ jsxs("div", { id: name, children: [
       " ",
-      /* @__PURE__ */ jsx2(Component, { ...props }),
+      /* @__PURE__ */ jsx(Component, { ...props }),
       " "
     ] });
-    return options.root !== false && root ? createPortal2(content, root) : content;
+    return options.root !== false && root ? createPortal(content, root) : content;
   }
-  const holder = /* @__PURE__ */ jsx2(
+  const holder = /* @__PURE__ */ jsx(
     ScriptsContext.Provider,
     {
       value: scripts,
-      ...{ id: pascalCase2(name) },
+      ...{ id: pascalCase(name) },
       children: refresh ? render() : null
     }
   );
@@ -172,6 +142,34 @@ function useRefreshMetadata() {
   return { callback, scripts, props, refresh };
 }
 
+// src/composable/overlay.tsx
+import { createConstructor } from "@overlastic/core";
+import { useContext as useContext2 } from "react";
+import { pascalCase as pascalCase2 } from "pascal-case";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var { define } = createConstructor((Instance, props, options) => {
+  const { id, deferred, render, vanish: _vanish } = options;
+  const InstanceWithProvider = defineAnonymousComponent(() => {
+    const content = /* @__PURE__ */ jsx2(
+      ScriptsContext.Provider,
+      {
+        value: useScripts({ deferred, vanish }),
+        ...{ id: pascalCase2(id) },
+        children: /* @__PURE__ */ jsx2(Instance, { ...props })
+      }
+    );
+    return content;
+  });
+  function vanish() {
+    _vanish(InstanceWithProvider);
+  }
+  render(InstanceWithProvider, props);
+}, { container: false });
+function useOverlay(Instance) {
+  const { render, vanish } = useContext2(InstancesContext);
+  return define(Instance, { render, vanish });
+}
+
 // src/define/constructor.tsx
 import { createConstructor as createConstructor2 } from "@overlastic/core";
 import { createRoot } from "react-dom/client";
@@ -203,10 +201,28 @@ var constructor = createConstructor2((Instance, props, options) => {
 // src/define/index.ts
 var defineOverlay = constructor.define;
 var renderOverlay = constructor.render;
+
+// src/components/OverlayProvider.tsx
+import { useState as useState3 } from "react";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function OverlayProvider(props) {
+  const [instances, setInstances] = useState3([]);
+  function render(Instance, props2) {
+    setInstances((instances2) => [...instances2, { Instance, props: props2 }]);
+  }
+  function vanish(instance) {
+    setInstances((instances2) => [...instances2.filter(({ Instance }) => instance !== Instance)]);
+  }
+  return /* @__PURE__ */ jsxs2(InstancesContext.Provider, { value: { render, vanish }, children: [
+    instances.map(({ Instance, props: props2 }, index) => /* @__PURE__ */ jsx4(Instance, { ...props2 }, index)),
+    props.children
+  ] });
+}
 export {
+  OverlayProvider,
   defineOverlay,
   renderOverlay,
   useOverlay,
-  useOverlayHolder,
-  usePrograms
+  useOverlayDefine,
+  useOverlayHolder
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@overlastic/react",
   "type": "module",
-  "version": "0.4.8",
+  "version": "0.5.0",
   "license": "MIT",
   "homepage": "https://github.com/hairyf/overlastic#readme",
   "repository": {
@@ -32,7 +32,7 @@
     "pascal-case": "3.1.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "@overlastic/core": "^0.4.3"
+    "@overlastic/core": "^0.5.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.2",