jy-headless 0.0.20 → 0.0.21

package/dist/index.d.ts

@@ -4,5 +4,6 @@ import DesktopKeyboardInput from './components/input/DesktopKeyboardInput';
 import Spinner from './components/spinner/Spinner';
 import RadioInput from './components/radio/RadioInput';
 import RadioGroup from './components/radio/RadioGroup';
+import Modal from './components/modal/Modal';
 import { CallIcon, CloseIcon, HomeIcon, SearchIcon } from './components/icons';
-export { Button, Input, DesktopKeyboardInput, Spinner, CallIcon, CloseIcon, HomeIcon, SearchIcon, RadioInput, RadioGroup, };
+export { Button, Input, DesktopKeyboardInput, Spinner, CallIcon, CloseIcon, HomeIcon, SearchIcon, RadioInput, RadioGroup, Modal, };

package/dist/index.esm.js

@@ -1,4 +1,5 @@
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useEffect, useMemo, createContext, useContext } from 'react';
+import { createPortal } from 'react-dom';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -375,6 +376,45 @@ const RadioGroupItem = (_a) => {
 };
 RadioGroup.Item = RadioGroupItem;
 
+const ModalContext = createContext({
+    isShow: false,
+    setIsShow: (value) => { },
+});
+const Modal = ({ opener, children, targetSelector = 'root', }) => {
+    const [isShow, setIsShow] = useState(false);
+    const onHandleShow = () => {
+        setIsShow(true);
+    };
+    return (React.createElement(ModalContext, { value: { isShow, setIsShow } },
+        React.cloneElement(opener, {
+            onClick: onHandleShow,
+        }),
+        isShow &&
+            document.querySelector(targetSelector) &&
+            createPortal(children, document.querySelector(targetSelector))));
+};
+const ModalOverlay = ({ backgroundColor = 'rgba(0,0,0,0.5)', children, zIndex = 999, }) => {
+    return (React.createElement("div", { style: {
+            position: 'fixed',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            zIndex,
+            backgroundColor,
+        } }, children));
+};
+const ModalCloseButton = (_a) => {
+    var props = __rest(_a, []);
+    const { setIsShow } = useContext(ModalContext);
+    return React.createElement(Button, Object.assign({}, props, { onClick: () => setIsShow(false) }));
+};
+Modal.Overlay = ModalOverlay;
+Modal.Closer = ModalCloseButton;
+
 const CloseIcon = ({ color = '#000', size = '1em', bgColor = 'transparent', }) => {
     return (React.createElement("svg", { viewBox: "0 0 24 24", width: size, height: size, fill: "none", style: { backgroundColor: bgColor }, xmlns: "http://www.w3.org/2000/svg" },
         React.createElement("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0" }),
@@ -425,5 +465,5 @@ const SearchIcon = ({ color = '#000', size = '1em', bgColor = 'transparent', fil
 // AUTHOR: Ankush Syal
 // https://www.svgrepo.com/svg/520583/call
 
-export { Button, CallIcon, CloseIcon, DesktopKeyboardInput, HomeIcon, Input, RadioGroup, RadioInput, SearchIcon, Spinner };
+export { Button, CallIcon, CloseIcon, DesktopKeyboardInput, HomeIcon, Input, Modal, RadioGroup, RadioInput, SearchIcon, Spinner };
 //# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var React = require('react');
+var reactDom = require('react-dom');
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -377,6 +378,45 @@ const RadioGroupItem = (_a) => {
 };
 RadioGroup.Item = RadioGroupItem;
 
+const ModalContext = React.createContext({
+    isShow: false,
+    setIsShow: (value) => { },
+});
+const Modal = ({ opener, children, targetSelector = 'root', }) => {
+    const [isShow, setIsShow] = React.useState(false);
+    const onHandleShow = () => {
+        setIsShow(true);
+    };
+    return (React.createElement(ModalContext, { value: { isShow, setIsShow } },
+        React.cloneElement(opener, {
+            onClick: onHandleShow,
+        }),
+        isShow &&
+            document.querySelector(targetSelector) &&
+            reactDom.createPortal(children, document.querySelector(targetSelector))));
+};
+const ModalOverlay = ({ backgroundColor = 'rgba(0,0,0,0.5)', children, zIndex = 999, }) => {
+    return (React.createElement("div", { style: {
+            position: 'fixed',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            zIndex,
+            backgroundColor,
+        } }, children));
+};
+const ModalCloseButton = (_a) => {
+    var props = __rest(_a, []);
+    const { setIsShow } = React.useContext(ModalContext);
+    return React.createElement(Button, Object.assign({}, props, { onClick: () => setIsShow(false) }));
+};
+Modal.Overlay = ModalOverlay;
+Modal.Closer = ModalCloseButton;
+
 const CloseIcon = ({ color = '#000', size = '1em', bgColor = 'transparent', }) => {
     return (React.createElement("svg", { viewBox: "0 0 24 24", width: size, height: size, fill: "none", style: { backgroundColor: bgColor }, xmlns: "http://www.w3.org/2000/svg" },
         React.createElement("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0" }),
@@ -433,6 +473,7 @@ exports.CloseIcon = CloseIcon;
 exports.DesktopKeyboardInput = DesktopKeyboardInput;
 exports.HomeIcon = HomeIcon;
 exports.Input = Input;
+exports.Modal = Modal;
 exports.RadioGroup = RadioGroup;
 exports.RadioInput = RadioInput;
 exports.SearchIcon = SearchIcon;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jy-headless",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "description": "",
   "main": "dist/index.cjs",
   "typings": "dist/index.d.ts",