@overlastic/react 0.8.0 → 0.8.3

package/dist/index.js

@@ -1,17 +1,16 @@
-// src/composable/define.ts
-import { delay, noop as noop2 } from "@overlastic/core";
-import { useContext, useEffect } from "react";
+// src/components/Provider.tsx
+import { useState } from "react";
 
 // src/internal/contexts.tsx
 import { noop } from "@overlastic/core";
 import { createContext } from "react";
 var ScriptsContext = createContext({
-  reject: noop,
-  resolve: noop,
-  setVisible: noop,
+  cancel: noop,
+  confirm: noop,
+  change: noop,
   vanish: noop,
   visible: false,
-  in_dec: true
+  __is_declarative: true
 });
 var InstancesContext = createContext({});
 InstancesContext.displayName = "OverlayInstancesContext";
@@ -22,43 +21,67 @@ function defineAnonymousComponent(component) {
   return { "--": component }["--"];
 }
 
+// src/components/Provider.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function OverlaysProvider(props) {
+  const [instances, setInstances] = useState([]);
+  function render(Instance, props2) {
+    setInstances((instances2) => [...instances2, { Instance, props: props2 }]);
+  }
+  function vanish(instance) {
+    setInstances((instances2) => [...instances2.filter(({ Instance }) => instance !== Instance)]);
+  }
+  return /* @__PURE__ */ jsxs(InstancesContext.Provider, { value: { render, vanish }, children: [
+    instances.map(({ Instance, props: props2 }, index) => /* @__PURE__ */ jsx(Instance, { ...props2 }, index)),
+    props.children
+  ] });
+}
+
 // src/composable/define.ts
-function useExtendOverlay(options = {}) {
-  const { immediate = true, duration = 0, automatic = true } = options;
+import { delay, noop as noop2 } from "@overlastic/core";
+import { useContext, useEffect } from "react";
+function useDisclosure(options = {}) {
+  const { immediate = true, duration = 300, automatic = true } = options;
   const context = useContext(ScriptsContext);
-  const dec = Reflect.get(context, "in_dec");
-  const overlay = dec ? useDeclarative(options) : context;
-  const { setVisible, vanish, deferred } = overlay;
+  const isDeclarative = Reflect.get(context, "__is_declarative");
+  const overlay = isDeclarative ? useDeclarative(options) : context;
   async function destroy() {
-    setVisible(false);
+    var _a;
+    overlay.change(false);
     await delay(duration);
-    vanish == null ? void 0 : vanish();
+    (_a = overlay.vanish) == null ? void 0 : _a.call(overlay);
     return Promise.resolve();
   }
-  useMount(() => immediate && setVisible(true));
+  useMount(() => immediate && overlay.change(true));
   useMount(() => {
-    if (!dec && automatic)
-      deferred == null ? void 0 : deferred.then(destroy).catch(destroy);
+    var _a;
+    if (!isDeclarative && automatic)
+      (_a = overlay.deferred) == null ? void 0 : _a.then(destroy).catch(destroy);
   });
   return overlay;
 }
 function useDeclarative(options = {}) {
   const { props = {}, model = "visible", events = {} } = options;
-  const { reject = "onReject", resolve = "onResolve" } = events;
-  const _reject = (value) => {
+  const { cancel = "onCancel", confirm = "onConfirm", close = "onClose" } = events;
+  const _cancel = (value) => {
+    var _a;
+    return (_a = props[cancel]) == null ? void 0 : _a.call(props, value);
+  };
+  const _confirm = (value) => {
     var _a;
-    (_a = props[reject]) == null ? void 0 : _a.call(props, value);
+    return (_a = props[confirm]) == null ? void 0 : _a.call(props, value);
   };
-  const _resolve = (value) => {
+  const _close = (value) => {
     var _a;
-    (_a = props[resolve]) == null ? void 0 : _a.call(props, value);
+    return (_a = props[close]) == null ? void 0 : _a.call(props, value);
   };
   return {
-    reject: _reject,
-    resolve: _resolve,
+    cancel: _cancel,
+    confirm: _confirm,
+    close: _close,
     visible: props[model],
     vanish: noop2,
-    setVisible: noop2,
+    change: noop2,
     deferred: void 0
   };
 }
@@ -66,73 +89,46 @@ function useMount(callback = noop2) {
   useEffect(() => callback(), []);
 }
 
-// src/composable/scripts.ts
-import { useState } from "react";
-function useScripts(options) {
-  const { reject: _reject } = options.deferred || {};
+// src/composable/utils/index.ts
+import { createDeferred } from "@overlastic/core";
+import { useRef, useState as useState2 } from "react";
+function createScripts(options) {
+  const { cancel: _cancel } = options.deferred || {};
   const { vanish: _vanish } = options;
-  const [visible, setVisible] = useState(false);
+  const [visible, change] = useState2(false);
   function vanish() {
     _vanish == null ? void 0 : _vanish();
-    _reject == null ? void 0 : _reject();
+    _cancel == null ? void 0 : _cancel();
   }
   return {
-    resolve: options.deferred.resolve,
-    reject: options.deferred.reject,
+    confirm: options.deferred.confirm,
+    cancel: options.deferred.cancel,
+    close: () => options.deferred.confirm(),
     deferred: options.deferred,
-    setVisible,
+    change,
     visible,
     vanish
   };
 }
-
-// src/composable/holder.tsx
-import { createDeferred, defineName } from "@overlastic/core";
-import { pascalCase } from "pascal-case";
-import { useRef, useState as useState2 } from "react";
-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);
-  function render() {
-    const root = options.root || (typeof document !== "undefined" ? document.body : void 0);
-    const Comp = component;
-    const content = /* @__PURE__ */ jsxs("div", { id: name, children: [
-      " ",
-      /* @__PURE__ */ jsx(Comp, { ...props }),
-      " "
-    ] });
-    return options.root !== false && root ? createPortal(content, root) : content;
-  }
-  const holder = /* @__PURE__ */ jsx(
-    ScriptsContext.Provider,
-    {
-      value: scripts,
-      ...{ id: pascalCase(name) },
-      children: refresh ? render() : null
-    }
-  );
-  return [holder, callback];
-}
-function useRefreshMetadata() {
+function createRefreshMetadata() {
   const [props, setProps] = useState2();
   const [refresh, setRefresh] = useState2(false);
-  const [visible, setVisible] = useState2(false);
+  const [visible, change] = useState2(false);
   const deferred = useRef({});
   const scripts = {
     deferred: deferred.current,
-    resolve: deferred.current.resolve,
-    reject: deferred.current.reject,
+    confirm: deferred.current.confirm,
+    cancel: deferred.current.cancel,
+    close: () => deferred.current.confirm(),
     vanish,
     visible,
-    setVisible
+    change
   };
   function vanish() {
     var _a;
     setRefresh(false);
     setProps({});
-    (_a = scripts.reject) == null ? void 0 : _a.call(scripts);
+    (_a = scripts.cancel) == null ? void 0 : _a.call(scripts);
   }
   async function callback(props2) {
     deferred.current = createDeferred();
@@ -143,38 +139,64 @@ function useRefreshMetadata() {
   return { callback, scripts, props, refresh };
 }
 
-// src/composable/inject.tsx
-import { createConstructor } from "@overlastic/core";
+// src/composable/overlay.tsx
+import { createConstructor, defineName } from "@overlastic/core";
+import { pascalCase } from "pascal-case";
 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);
+import { createPortal } from "react-dom";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var { define: defineInject } = createConstructor(
+  (Instance, props, options) => {
+    const { id, deferred, render, vanish: _vanish } = options;
+    const InstanceWithProvider = defineAnonymousComponent(() => {
+      const content = /* @__PURE__ */ jsx2(
+        ScriptsContext.Provider,
+        {
+          value: createScripts({ deferred, vanish }),
+          ...{ id: pascalCase(id) },
+          children: /* @__PURE__ */ jsx2(Instance, { ...props })
+        }
+      );
+      return content;
+    });
+    function vanish() {
+      _vanish(InstanceWithProvider);
+    }
+    render(InstanceWithProvider, props);
+  },
+  { container: false }
+);
+function defineHolder(component, options = {}) {
+  const { callback, scripts, props, refresh } = createRefreshMetadata();
+  const name = defineName(options.id, options.autoIncrement);
+  function render() {
+    const root = options.root || (typeof document !== "undefined" ? document.body : void 0);
+    const Comp = component;
+    const content = /* @__PURE__ */ jsxs2("div", { id: name, children: [
+      " ",
+      /* @__PURE__ */ jsx2(Comp, { ...props }),
+      " "
+    ] });
+    return options.root !== false && root ? createPortal(content, root) : content;
+  }
+  const holder = /* @__PURE__ */ jsx2(ScriptsContext.Provider, { value: scripts, ...{ id: pascalCase(name) }, children: refresh ? render() : null });
+  return [holder, callback];
+}
+function useOverlay(Instance, options = {}) {
+  const { type = "inject" } = options != null ? options : {};
+  if (type === "inject") {
+    const { render, vanish } = useContext2(InstancesContext);
+    return defineInject(Instance, { render, vanish });
+  }
+  if (type === "holder") {
+    return defineHolder(Instance, options);
   }
-  render(InstanceWithProvider, props);
-}, { container: false });
-function useOverlayInject(Instance) {
-  const { render, vanish } = useContext2(InstancesContext);
-  return define(Instance, { render, vanish });
 }
 
 // src/define/constructor.tsx
 import { createConstructor as createConstructor2 } from "@overlastic/core";
+import { pascalCase as pascalCase2 } from "pascal-case";
 import { createRoot } from "react-dom/client";
-import { pascalCase as pascalCase3 } from "pascal-case";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var constructor = createConstructor2((Instance, props, options) => {
   const { container, id, deferred } = options;
@@ -183,8 +205,8 @@ var constructor = createConstructor2((Instance, props, options) => {
     return /* @__PURE__ */ jsx3(
       ScriptsContext.Provider,
       {
-        value: useScripts({ deferred, vanish }),
-        ...{ id: pascalCase3(id) },
+        value: createScripts({ deferred, vanish }),
+        ...{ id: pascalCase2(id) },
         children: /* @__PURE__ */ jsx3(Instance, { ...props })
       }
     );
@@ -202,28 +224,10 @@ var constructor = createConstructor2((Instance, props, options) => {
 // src/define/index.ts
 var defineOverlay = constructor.define;
 var renderOverlay = constructor.render;
-
-// src/components/Provider.tsx
-import { useState as useState3 } from "react";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-function OverlaysProvider(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 {
   OverlaysProvider,
   defineOverlay,
   renderOverlay,
-  useExtendOverlay,
-  useOverlayHolder,
-  useOverlayInject
+  useDisclosure,
+  useOverlay
 };

package/package.json

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