@nextui-org/react 1.0.1-alpha.48 → 1.0.1-alpha.51

package/cjs/modal/modal-footer.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _useTheme = _interopRequireDefault(require("../use-theme"));
+
+var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
+
+var _modalContext = require("./modal-context");
+
+var _clsx = _interopRequireDefault(require("../utils/clsx"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const defaultProps = {
+  className: '',
+  justify: 'flex-end',
+  autoMargin: true
+};
+
+const ModalFooter = ({
+  children,
+  className,
+  justify,
+  autoMargin: autoMarginProp,
+  ...props
+}) => {
+  const theme = (0, _useTheme.default)();
+  const {
+    autoMargin: autoMarginContext,
+    noPadding
+  } = (0, _react.useContext)(_modalContext.ModalContext);
+  const autoMargin = (0, _react.useMemo)(() => {
+    return autoMarginContext !== undefined ? autoMarginContext : autoMarginProp;
+  }, [autoMarginProp, autoMarginContext]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", { ...props,
+    className: _style.default.dynamic([["4275479145", [theme.layout.gapHalf, theme.layout.gap, justify]]]) + " " + (props && props.className != null && props.className || (0, _clsx.default)('modal-footer', {
+      'auto-margin': autoMargin,
+      'no-padding': noPadding
+    }, className) || ""),
+    children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
+      id: "4275479145",
+      dynamic: [theme.layout.gapHalf, theme.layout.gap, justify],
+      children: `.modal-footer.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;overflow:hidden;color:inherit;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:0.875rem;padding:${theme.layout.gapHalf} ${theme.layout.gap};-webkit-box-pack:${justify};-webkit-justify-content:${justify};-ms-flex-pack:${justify};justify-content:${justify};}.no-padding.__jsx-style-dynamic-selector{padding:0;}.auto-margin.__jsx-style-dynamic-selector>*{margin:0.25rem;}`
+    })]
+  });
+};
+
+const MemoModalFooter = /*#__PURE__*/_react.default.memo(ModalFooter);
+
+var _default = (0, _withDefaults.default)(MemoModalFooter, defaultProps);
+
+exports.default = _default;
+module.exports = exports.default;

package/cjs/modal/modal-header.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Justify } from '../utils/prop-types';
+interface Props {
+    className?: string;
+    justify?: Justify;
+    autoMargin?: boolean;
+}
+declare const defaultProps: {
+    className: string;
+    justify: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly";
+    autoMargin: boolean;
+};
+declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+export declare type ModalHeaderProps = Props & typeof defaultProps & NativeAttrs;
+declare const _default: React.ComponentType<Partial<{
+    className: string;
+    justify: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly";
+    autoMargin: boolean;
+}> & Omit<ModalHeaderProps, "className" | "justify" | "autoMargin">>;
+export default _default;

package/cjs/modal/modal-header.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _useTheme = _interopRequireDefault(require("../use-theme"));
+
+var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
+
+var _modalContext = require("./modal-context");
+
+var _clsx = _interopRequireDefault(require("../utils/clsx"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const defaultProps = {
+  className: '',
+  justify: 'center',
+  autoMargin: true
+};
+
+const ModalHeader = ({
+  children,
+  className,
+  justify,
+  autoMargin: autoMarginProp,
+  ...props
+}) => {
+  const theme = (0, _useTheme.default)();
+  const {
+    autoMargin: autoMarginContext,
+    noPadding
+  } = (0, _react.useContext)(_modalContext.ModalContext);
+  const autoMargin = (0, _react.useMemo)(() => {
+    return autoMarginContext !== undefined ? autoMarginContext : autoMarginProp;
+  }, [autoMarginProp, autoMarginContext]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", { ...props,
+    className: _style.default.dynamic([["1674202056", [justify, theme.layout.gapHalf, theme.layout.gap]]]) + " " + (props && props.className != null && props.className || (0, _clsx.default)('modal-header', {
+      'auto-margin': autoMargin,
+      'no-padding': noPadding
+    }, className) || ""),
+    children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
+      id: "1674202056",
+      dynamic: [justify, theme.layout.gapHalf, theme.layout.gap],
+      children: `.modal-header.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:${justify};-webkit-justify-content:${justify};-ms-flex-pack:${justify};justify-content:${justify};-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;color:inherit;font-size:0.875rem;padding:${theme.layout.gapHalf} calc(${theme.layout.gap} + 0.25rem);}.no-padding.__jsx-style-dynamic-selector{padding:0;}.auto-margin.__jsx-style-dynamic-selector>*:first-child{margin-top:0;}.auto-margin.__jsx-style-dynamic-selector>*:last-child{margin-bottom:0;}`
+    })]
+  });
+};
+
+const MemoModalHeader = /*#__PURE__*/_react.default.memo(ModalHeader);
+
+var _default = (0, _withDefaults.default)(MemoModalHeader, defaultProps);
+
+exports.default = _default;
+module.exports = exports.default;

package/cjs/modal/modal-wrapper.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+interface Props {
+    className?: string;
+    visible?: boolean;
+    scroll?: boolean;
+    rebound?: boolean;
+    onCloseButtonClick?: () => void;
+    fullScreen?: boolean;
+    closeButton?: boolean;
+}
+declare const defaultProps: {
+    className: string;
+    visible: boolean;
+    rebound: boolean;
+};
+export declare type ModalWrapperProps = Props & typeof defaultProps;
+declare const _default: React.ComponentType<Partial<{
+    className: string;
+    visible: boolean;
+    rebound: boolean;
+}> & Omit<React.PropsWithChildren<ModalWrapperProps>, "className" | "visible" | "rebound">>;
+export default _default;

package/cjs/modal/modal-wrapper.js

@@ -0,0 +1,128 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
+
+var _useTheme = _interopRequireDefault(require("../use-theme"));
+
+var _cssTransition = _interopRequireDefault(require("../utils/css-transition"));
+
+var _collections = require("../utils/collections");
+
+var _modalCloseButton = _interopRequireDefault(require("./modal-close-button"));
+
+var _clsx = _interopRequireDefault(require("../utils/clsx"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const defaultProps = {
+  className: '',
+  visible: false,
+  rebound: false
+};
+
+const ModalWrapper = ({
+  className,
+  children,
+  visible,
+  fullScreen,
+  closeButton,
+  rebound,
+  onCloseButtonClick,
+  scroll,
+  ...props
+}) => {
+  const theme = (0, _useTheme.default)();
+  const modalContent = (0, _react.useRef)(null);
+  const tabStart = (0, _react.useRef)(null);
+  const tabEnd = (0, _react.useRef)(null);
+  const [rendered, setRendered] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    setTimeout(() => {
+      setRendered(true);
+    }, 300);
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (!visible) return;
+    const activeElement = document.activeElement;
+    const isChild = (0, _collections.isChildElement)(modalContent.current, activeElement);
+    if (isChild) return;
+    tabStart.current && tabStart.current.focus();
+  }, [visible]);
+
+  const onKeyDown = event => {
+    const isTabDown = event.keyCode === 9;
+    if (!visible || !isTabDown) return;
+    const activeElement = document.activeElement;
+
+    if (event.shiftKey) {
+      if (activeElement === tabStart.current) {
+        tabEnd.current && tabEnd.current.focus();
+      }
+    } else {
+      if (activeElement === tabEnd.current) {
+        tabStart.current && tabStart.current.focus();
+      }
+    }
+  };
+
+  const handleClose = () => {
+    onCloseButtonClick && onCloseButtonClick();
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_cssTransition.default, {
+    name: "modal-wrapper",
+    visible: visible,
+    enterTime: 20,
+    leaveTime: 20,
+    clearTime: 300,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      role: "dialog",
+      "aria-modal": visible,
+      tabIndex: -1,
+      onKeyDown: onKeyDown,
+      ref: modalContent,
+      ...props,
+      className: _style.default.dynamic([["1270377280", [scroll ? 'calc(100vh - 200px)' : 'inherit', theme.type === 'light' ? theme.palette.background : theme.palette.accents_1, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gap, theme.layout.gap, theme.layout.gap]]]) + " " + (props && props.className != null && props.className || (0, _clsx.default)('modal-wrapper', {
+        fullscreen: fullScreen,
+        'with-close-button': closeButton,
+        'modal-rebound': rebound,
+        rendered
+      }, className) || ""),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        tabIndex: 0,
+        "aria-hidden": "true",
+        ref: tabStart,
+        className: _style.default.dynamic([["1270377280", [scroll ? 'calc(100vh - 200px)' : 'inherit', theme.type === 'light' ? theme.palette.background : theme.palette.accents_1, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gap, theme.layout.gap, theme.layout.gap]]]) + " " + "hide-tab"
+      }), closeButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_modalCloseButton.default, {
+        onClick: handleClose
+      }), children, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        tabIndex: 0,
+        "aria-hidden": "true",
+        ref: tabEnd,
+        className: _style.default.dynamic([["1270377280", [scroll ? 'calc(100vh - 200px)' : 'inherit', theme.type === 'light' ? theme.palette.background : theme.palette.accents_1, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gap, theme.layout.gap, theme.layout.gap]]]) + " " + "hide-tab"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
+        id: "1270377280",
+        dynamic: [scroll ? 'calc(100vh - 200px)' : 'inherit', theme.type === 'light' ? theme.palette.background : theme.palette.accents_1, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gap, theme.layout.gap, theme.layout.gap],
+        children: `.modal-wrapper.__jsx-style-dynamic-selector{max-width:100%;vertical-align:middle;overflow:hidden;height:-webkit-fit-content(20em);height:-moz-fit-content(20em);height:fit-content(20em);max-height:${scroll ? 'calc(100vh - 200px)' : 'inherit'};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:relative;box-sizing:border-box;background-color:${theme.type === 'light' ? theme.palette.background : theme.palette.accents_1};color:${theme.palette.foreground};border-radius:${theme.layout.radius};box-shadow:${theme.expressiveness.shadowLarge};outline:none;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}.hide-tab.__jsx-style-dynamic-selector{outline:none;overflow:hidden;width:0;height:0;opacity:0;}.fullscreen.__jsx-style-dynamic-selector{width:100%;height:100%;max-height:100%;}.modal-rebound.__jsx-style-dynamic-selector:not(.fullscreen){-webkit-animation-duration:250ms;animation-duration:250ms;-webkit-animation-name:rebound-__jsx-style-dynamic-selector;animation-name:rebound-__jsx-style-dynamic-selector;-webkit-animation-timing-function:ease;animation-timing-function:ease;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}.modal-wrapper-enter.__jsx-style-dynamic-selector:not(.rendered){-webkit-animation-name:appearance-in-__jsx-style-dynamic-selector;animation-name:appearance-in-__jsx-style-dynamic-selector;-webkit-animation-duration:200ms;animation-duration:200ms;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-animation-direction:normal;animation-direction:normal;}.modal-wrapper-leave.__jsx-style-dynamic-selector{-webkit-animation-name:appearance-out-__jsx-style-dynamic-selector;animation-name:appearance-out-__jsx-style-dynamic-selector;-webkit-animation-duration:50ms;animation-duration:50ms;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;}.with-close-button.__jsx-style-dynamic-selector{padding-top:${theme.layout.gap};}.fullscreen.__jsx-style-dynamic-selector .close-icon{top:${theme.layout.gap};right:calc(${theme.layout.gap} * 0.5);}.fullscreen.__jsx-style-dynamic-selector .close-icon svg{width:24px;height:24px;}@-webkit-keyframes appearance-in-__jsx-style-dynamic-selector{0%{opacity:0;-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}60%{opacity:0.75;-webkit-transform:scale(1.02);-ms-transform:scale(1.02);transform:scale(1.02);}100%{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}@keyframes appearance-in-__jsx-style-dynamic-selector{0%{opacity:0;-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}60%{opacity:0.75;-webkit-transform:scale(1.02);-ms-transform:scale(1.02);transform:scale(1.02);}100%{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}@-webkit-keyframes appearance-out-__jsx-style-dynamic-selector{0%{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}100%{opacity:0;-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}}@keyframes appearance-out-__jsx-style-dynamic-selector{0%{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}100%{opacity:0;-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}}@-webkit-keyframes rebound-__jsx-style-dynamic-selector{0%{-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}40%{-webkit-transform:scale(1.02);-ms-transform:scale(1.02);transform:scale(1.02);}80%{-webkit-transform:scale(0.98);-ms-transform:scale(0.98);transform:scale(0.98);}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}@keyframes rebound-__jsx-style-dynamic-selector{0%{-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}40%{-webkit-transform:scale(1.02);-ms-transform:scale(1.02);transform:scale(1.02);}80%{-webkit-transform:scale(0.98);-ms-transform:scale(0.98);transform:scale(0.98);}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}`
+      })]
+    })
+  });
+};
+
+var _default = (0, _withDefaults.default)(ModalWrapper, defaultProps);
+
+exports.default = _default;
+module.exports = exports.default;

package/cjs/modal/modal.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import ModalBody from './modal-body';
+import ModalHeader from './modal-header';
+import ModalFooter from './modal-footer';
+interface Props {
+    open?: boolean;
+    scroll?: boolean;
+    blur?: boolean;
+    noPadding?: boolean;
+    closeButton?: boolean;
+    fullScreen?: boolean;
+    autoMargin?: boolean;
+    width?: string;
+    preventClose?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+    className?: string;
+}
+declare const defaultProps: {
+    width: string;
+    className: string;
+    preventClose: boolean;
+    fullScreen: boolean;
+    closeButton: boolean;
+    blur: boolean;
+    scroll: boolean;
+    noPadding: boolean;
+};
+declare type NativeAttrs = Omit<React.DialogHTMLAttributes<unknown>, keyof Props>;
+export declare type ModalProps = Props & typeof defaultProps & NativeAttrs;
+declare type ModalComponent<P = {}> = React.FC<P> & {
+    Header: typeof ModalHeader;
+    Body: typeof ModalBody;
+    Footer: typeof ModalFooter;
+};
+declare type ComponentProps = Partial<typeof defaultProps> & Omit<Props, keyof typeof defaultProps> & NativeAttrs;
+declare const _default: ModalComponent<ComponentProps>;
+export default _default;

package/cjs/modal/modal.js

@@ -0,0 +1,152 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactDom = require("react-dom");
+
+var _usePortal = _interopRequireDefault(require("../use-portal"));
+
+var _modalWrapper = _interopRequireDefault(require("./modal-wrapper"));
+
+var _backdrop = _interopRequireDefault(require("../backdrop"));
+
+var _modalContext = require("./modal-context");
+
+var _useBodyScroll = _interopRequireDefault(require("../use-body-scroll"));
+
+var _useCurrentState = _interopRequireDefault(require("../use-current-state"));
+
+var _useKeyboard = _interopRequireWildcard(require("../use-keyboard"));
+
+var _assertion = require("../utils/assertion");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const defaultProps = {
+  width: '400px',
+  className: '',
+  preventClose: false,
+  fullScreen: false,
+  closeButton: false,
+  blur: false,
+  scroll: false,
+  noPadding: false
+};
+
+const Modal = ({
+  children,
+  onClose,
+  onOpen,
+  open,
+  autoMargin,
+  width: wrapperWidth,
+  className,
+  preventClose,
+  blur,
+  fullScreen,
+  noPadding,
+  ...props
+}) => {
+  const portal = (0, _usePortal.default)('modal');
+  const [, setBodyHidden] = (0, _useBodyScroll.default)(null, {
+    scrollLayer: true
+  });
+  const [visible, setVisible, visibleRef] = (0, _useCurrentState.default)(false);
+  const [rebound, setRebound] = (0, _react.useState)(false);
+
+  const closeModal = () => {
+    onClose && onClose();
+    setVisible(false);
+    setBodyHidden(false);
+  };
+
+  (0, _react.useEffect)(() => {
+    if (open === undefined) return;
+
+    if (open) {
+      onOpen && onOpen();
+    }
+
+    if (!open && visibleRef.current) {
+      onClose && onClose();
+    }
+
+    setVisible(open);
+    setBodyHidden(open);
+  }, [open]);
+
+  const toggleRebound = () => {
+    setRebound(true);
+    const timer = setTimeout(() => {
+      setRebound(false);
+      clearTimeout(timer);
+    }, 300);
+  };
+
+  const {
+    bindings
+  } = (0, _useKeyboard.default)(() => {
+    if (preventClose) {
+      toggleRebound();
+      return;
+    }
+
+    closeModal();
+  }, _useKeyboard.KeyCode.Escape, {
+    disableGlobalEvent: true
+  });
+
+  const closeFromBackdrop = () => {
+    if (preventClose) {
+      toggleRebound();
+      return;
+    }
+
+    closeModal();
+  };
+
+  const modalConfig = (0, _react.useMemo)(() => ({
+    close: closeModal,
+    autoMargin,
+    noPadding
+  }), []);
+  if (!portal) return null;
+  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_modalContext.ModalContext.Provider, {
+    value: modalConfig,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_backdrop.default, {
+      onClick: closeFromBackdrop,
+      visible: visible,
+      width: wrapperWidth,
+      fullScreenContent: fullScreen,
+      blur: blur,
+      ...bindings,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_modalWrapper.default, {
+        visible: visible,
+        onCloseButtonClick: closeModal,
+        className: className,
+        fullScreen: fullScreen,
+        rebound: rebound,
+        ...props,
+        children: children
+      })
+    })
+  }), portal);
+};
+
+if (_assertion.__DEV__) {
+  _backdrop.default.displayName = 'NextUI - Modal';
+}
+
+Modal.defaultProps = defaultProps;
+var _default = Modal;
+exports.default = _default;
+module.exports = exports.default;

package/cjs/modal/use-modal.d.ts

@@ -0,0 +1,11 @@
+import { Dispatch, MutableRefObject, SetStateAction } from 'react';
+declare const useModal: (initialVisible?: boolean) => {
+    visible: boolean;
+    setVisible: Dispatch<SetStateAction<boolean>>;
+    currentRef: MutableRefObject<boolean>;
+    bindings: {
+        open: boolean;
+        onClose: () => void;
+    };
+};
+export default useModal;

package/cjs/modal/use-modal.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _useCurrentState = _interopRequireDefault(require("../use-current-state"));
+
+const useModal = (initialVisible = false) => {
+  const [visible, setVisible, currentRef] = (0, _useCurrentState.default)(initialVisible);
+  return {
+    visible,
+    setVisible,
+    currentRef,
+    bindings: {
+      open: visible,
+      onClose: () => setVisible(false)
+    }
+  };
+};
+
+var _default = useModal;
+exports.default = _default;
+module.exports = exports.default;

package/cjs/radio/radio-group.js

@@ -80,13 +80,15 @@ const RadioGroup = ({
   }, [value]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_radioContext.RadioContext.Provider, {
     value: providerValue,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", { ...props,
-      className: _style.default.dynamic([["2490647175", [row ? 'row' : 'column', row ? 0 : groupGap, row ? groupGap : 0, fontSize]]]) + " " + (props && props.className != null && props.className || `radio-group ${className}`),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("fieldset", {
+      role: "radiogroup",
+      ...props,
+      className: _style.default.dynamic([["3133287453", [row ? 'row' : 'column', row ? 0 : groupGap, row ? groupGap : 0, fontSize]]]) + " " + (props && props.className != null && props.className || `radio-group ${className}`),
       children: children
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
-      id: "2490647175",
+      id: "3133287453",
       dynamic: [row ? 'row' : 'column', row ? 0 : groupGap, row ? groupGap : 0, fontSize],
-      children: `.radio-group.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:${row ? 'row' : 'column'};-ms-flex-direction:${row ? 'row' : 'column'};flex-direction:${row ? 'row' : 'column'};}.radio-group.__jsx-style-dynamic-selector .radio{margin-top:${row ? 0 : groupGap};margin-right:${row ? groupGap : 0};--radio-size:${fontSize};}`
+      children: `fieldset.__jsx-style-dynamic-selector{border:0;margin:0;padding:0;}.radio-group.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:${row ? 'row' : 'column'};-ms-flex-direction:${row ? 'row' : 'column'};flex-direction:${row ? 'row' : 'column'};}.radio-group.__jsx-style-dynamic-selector .radio{margin-top:${row ? 0 : groupGap};margin-right:${row ? groupGap : 0};--radio-size:${fontSize};}`
     })]
   });
 };

package/cjs/radio/radio.js

@@ -108,27 +108,30 @@ const Radio = ({
     if (checked === undefined) return;
     setSelfChecked(Boolean(checked));
   }, [checked]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", { ...props,
-    className: _style.default.dynamic([["4125369956", [fontSize, labelColor, isDisabled ? 'not-allowed' : 'pointer', radius, radius, theme.palette.border, radioColor, theme.palette.border]]]) + " " + (props && props.className != null && props.className || `radio ${className}`),
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    role: "radio",
+    "aria-checked": selfChecked,
+    ...props,
+    className: _style.default.dynamic([["3122260096", [fontSize, labelColor, isDisabled ? 'not-allowed' : 'pointer', radius, radius, theme.palette.border, radioColor, theme.palette.border]]]) + " " + (props && props.className != null && props.className || `radio ${className}`),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-      className: _style.default.dynamic([["4125369956", [fontSize, labelColor, isDisabled ? 'not-allowed' : 'pointer', radius, radius, theme.palette.border, radioColor, theme.palette.border]]]),
+      className: _style.default.dynamic([["3122260096", [fontSize, labelColor, isDisabled ? 'not-allowed' : 'pointer', radius, radius, theme.palette.border, radioColor, theme.palette.border]]]),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
         type: "radio",
         value: radioValue,
         checked: selfChecked,
         onChange: changeHandler,
         ...props,
-        className: _style.default.dynamic([["4125369956", [fontSize, labelColor, isDisabled ? 'not-allowed' : 'pointer', radius, radius, theme.palette.border, radioColor, theme.palette.border]]]) + " " + (props && props.className != null && props.className || "")
+        className: _style.default.dynamic([["3122260096", [fontSize, labelColor, isDisabled ? 'not-allowed' : 'pointer', radius, radius, theme.palette.border, radioColor, theme.palette.border]]]) + " " + (props && props.className != null && props.className || "")
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-        className: _style.default.dynamic([["4125369956", [fontSize, labelColor, isDisabled ? 'not-allowed' : 'pointer', radius, radius, theme.palette.border, radioColor, theme.palette.border]]]) + " " + "name",
+        className: _style.default.dynamic([["3122260096", [fontSize, labelColor, isDisabled ? 'not-allowed' : 'pointer', radius, radius, theme.palette.border, radioColor, theme.palette.border]]]) + " " + "name",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: _style.default.dynamic([["4125369956", [fontSize, labelColor, isDisabled ? 'not-allowed' : 'pointer', radius, radius, theme.palette.border, radioColor, theme.palette.border]]]) + " " + `point ${selfChecked ? 'active' : ''} ${isDisabled ? 'disabled' : ''}`
+          className: _style.default.dynamic([["3122260096", [fontSize, labelColor, isDisabled ? 'not-allowed' : 'pointer', radius, radius, theme.palette.border, radioColor, theme.palette.border]]]) + " " + `point ${selfChecked ? 'active' : ''} ${isDisabled ? 'disabled' : ''}`
         }), withoutDescChildren]
       }), DescChildren && DescChildren]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
-      id: "4125369956",
+      id: "3122260096",
       dynamic: [fontSize, labelColor, isDisabled ? 'not-allowed' : 'pointer', radius, radius, theme.palette.border, radioColor, theme.palette.border],
-      children: `input.__jsx-style-dynamic-selector{opacity:0;visibility:hidden;overflow:hidden;width:1px;height:1px;top:-1000px;right:-1000px;position:fixed;}.radio.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:initial;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;position:relative;--radio-size:${fontSize};}label.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;color:${labelColor};cursor:${isDisabled ? 'not-allowed' : 'pointer'};}.name.__jsx-style-dynamic-selector{font-size:var(--radio-size);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.point.__jsx-style-dynamic-selector{width:var(--radio-size);height:var(--radio-size);border-radius:${radius};-webkit-transition:all 0.25s ease;transition:all 0.25s ease;position:relative;display:inline-block;margin-right:calc(var(--radio-size) * 0.375);}.point.__jsx-style-dynamic-selector:after{content:'';display:block;position:absolute;width:var(--radio-size);height:var(--radio-size);border-radius:${radius};box-sizing:border-box;-webkit-transition:all 0.25s ease;transition:all 0.25s ease;border:2px solid ${theme.palette.border};}.point.active.__jsx-style-dynamic-selector:after{border:calc(var(--radio-size) * 0.34) solid ${radioColor};}label.__jsx-style-dynamic-selector:hover .point.__jsx-style-dynamic-selector:not(.active):not(.disabled){background:${theme.palette.border};}`
+      children: `input.__jsx-style-dynamic-selector{opacity:0;overflow:hidden;width:1px;height:1px;top:-1000px;right:-1000px;position:fixed;}.radio.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:initial;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;position:relative;--radio-size:${fontSize};}label.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;color:${labelColor};cursor:${isDisabled ? 'not-allowed' : 'pointer'};}.name.__jsx-style-dynamic-selector{font-size:var(--radio-size);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.point.__jsx-style-dynamic-selector{width:var(--radio-size);height:var(--radio-size);border-radius:${radius};-webkit-transition:all 0.25s ease;transition:all 0.25s ease;position:relative;display:inline-block;margin-right:calc(var(--radio-size) * 0.375);}.point.__jsx-style-dynamic-selector:after{content:'';display:block;position:absolute;width:var(--radio-size);height:var(--radio-size);border-radius:${radius};box-sizing:border-box;-webkit-transition:all 0.25s ease;transition:all 0.25s ease;border:2px solid ${theme.palette.border};}.point.active.__jsx-style-dynamic-selector:after{border:calc(var(--radio-size) * 0.34) solid ${radioColor};}label.__jsx-style-dynamic-selector:hover .point.__jsx-style-dynamic-selector:not(.active):not(.disabled){background:${theme.palette.border};}`
     })]
   });
 };

package/cjs/{input → shared}/clear-icon.d.ts

@@ -2,11 +2,13 @@ import * as React from 'react';
 interface Props {
     width?: number;
     height?: number;
+    plain?: boolean;
     size?: number;
     fill?: string;
 }
 declare const _default: React.ComponentType<Partial<{
     width: number;
     height: number;
-}> & Omit<Props, "width" | "height">>;
+    plain: boolean;
+}> & Omit<Props, "width" | "height" | "plain">>;
 export default _default;