@nextui-org/react 1.0.2-alpha.2 → 1.0.2-beta.4

package/esm/modal/modal-footer.js

@@ -1,69 +1 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
-
-var _modalContext = require("./modal-context");
-
-var _modal = require("./modal.styles");
-
-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 preClass = 'nextui-modal-footer';
-
-const ModalFooter = ({
-  children,
-  className,
-  justify,
-  autoMargin: autoMarginProp,
-  css,
-  ...props
-}) => {
-  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.jsx)(_modal.StyledModalFooter, {
-    className: (0, _clsx.default)(preClass, {
-      [`${preClass}-auto-margin`]: autoMargin,
-      [`${preClass}-no-padding`]: noPadding
-    }, className),
-    noPadding: noPadding,
-    autoMargin: autoMargin,
-    css: {
-      justifyContent: justify,
-      ...css
-    },
-    ...props,
-    children: children
-  });
-};
-
-ModalFooter.toString = () => '.nextui-modal-footer';
-
-const MemoModalFooter = /*#__PURE__*/_react.default.memo(ModalFooter);
-
-var _default = (0, _withDefaults.default)(MemoModalFooter, defaultProps);
-
-exports.default = _default;
-module.exports = exports.default;
+import t,{useMemo as o,useContext as a}from"react";import r from"../utils/with-defaults";import{ModalContext as i}from"./modal-context";import{StyledModalFooter as n}from"./modal.styles";import s from"../utils/clsx";import{jsx as m}from"react/jsx-runtime";const e="nextui-modal-footer",d=({children:t,className:r,justify:d,autoMargin:l,css:u,...c})=>{const{autoMargin:f,noPadding:g}=a(i),p=o((()=>void 0!==f?f:l),[l,f]);return m(n,{className:s(e,{[`${e}-auto-margin`]:p,[`${e}-no-padding`]:g},r),noPadding:g,autoMargin:p,css:{justifyContent:d,...u},...c,children:t})};d.toString=()=>".nextui-modal-footer";const l=t.memo(d);export default r(l,{className:"",justify:"flex-end",autoMargin:!0});

package/esm/modal/modal-header.js

@@ -1,69 +1 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
-
-var _modalContext = require("./modal-context");
-
-var _modal = require("./modal.styles");
-
-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 preClass = 'nextui-modal-header';
-
-const ModalHeader = ({
-  children,
-  className,
-  justify,
-  autoMargin: autoMarginProp,
-  css,
-  ...props
-}) => {
-  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.jsx)(_modal.StyledModalHeader, {
-    className: (0, _clsx.default)(preClass, {
-      [`${preClass}-auto-margin`]: autoMargin,
-      [`${preClass}-no-padding`]: noPadding
-    }, className),
-    noPadding: noPadding,
-    autoMargin: autoMargin,
-    css: {
-      justifyContent: justify,
-      ...css
-    },
-    ...props,
-    children: children
-  });
-};
-
-ModalHeader.toString = () => '.nextui-modal-header';
-
-const MemoModalHeader = /*#__PURE__*/_react.default.memo(ModalHeader);
-
-var _default = (0, _withDefaults.default)(MemoModalHeader, defaultProps);
-
-exports.default = _default;
-module.exports = exports.default;
+import t,{useContext as o,useMemo as a}from"react";import r from"../utils/with-defaults";import{ModalContext as i}from"./modal-context";import{StyledModalHeader as n}from"./modal.styles";import s from"../utils/clsx";import{jsx as e}from"react/jsx-runtime";const m="nextui-modal-header",d=({children:t,className:r,justify:d,autoMargin:u,css:c,...l})=>{const{autoMargin:f,noPadding:g}=o(i),p=a((()=>void 0!==f?f:u),[u,f]);return e(n,{className:s(m,{[`${m}-auto-margin`]:p,[`${m}-no-padding`]:g},r),noPadding:g,autoMargin:p,css:{justifyContent:d,...c},...l,children:t})};d.toString=()=>".nextui-modal-header";const u=t.memo(d);export default r(u,{className:"",justify:"center",autoMargin:!0});

package/esm/modal/modal-wrapper.js

@@ -1,153 +1 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
-
-var _cssTransition = _interopRequireDefault(require("../utils/css-transition"));
-
-var _collections = require("../utils/collections");
-
-var _modalCloseButton = _interopRequireDefault(require("./modal-close-button"));
-
-var _useKeyboard = require("../use-keyboard");
-
-var _useTheme = _interopRequireDefault(require("../use-theme"));
-
-var _modal = require("./modal.styles");
-
-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 preClass = 'nextui-modal';
-
-const ModalWrapper = ({
-  className,
-  children,
-  visible,
-  fullScreen,
-  closeButton,
-  rebound,
-  animated,
-  onCloseButtonClick,
-  scroll,
-  ...props
-}) => {
-  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);
-  const {
-    isDark
-  } = (0, _useTheme.default)();
-  (0, _react.useEffect)(() => {
-    const timer = setTimeout(() => {
-      setRendered(true);
-      clearTimeout(timer);
-    }, 300);
-    return () => clearTimeout(timer);
-  }, []);
-  (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 === _useKeyboard.KeyCode.Tab;
-    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();
-  };
-
-  const getState = (0, _react.useMemo)(() => {
-    return visible ? 'open' : 'closed';
-  }, [visible]);
-  const renderChildren = (0, _react.useMemo)(() => {
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-      (0, _jsxRuntime.jsxs)(_modal.StyledModal, {
-        role: "dialog",
-        tabIndex: -1,
-        "aria-modal": visible,
-        ref: modalContent,
-        "data-state": getState,
-        fullScreen: fullScreen,
-        scroll: scroll,
-        closeButton: closeButton,
-        isDark: isDark,
-        className: (0, _clsx.default)(preClass, `${preClass}--${getState}`, {
-          [`${preClass}-fullscreen`]: fullScreen,
-          [`${preClass}-with-close-button`]: closeButton,
-          [`${preClass}-rebound`]: rebound,
-          [`${preClass}-rendered`]: rendered
-        }, className),
-        ...props,
-        onKeyDown: onKeyDown,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_modal.StyledModalHideTab, {
-          role: "button",
-          tabIndex: 0,
-          className: `${preClass}-hide-tab`,
-          "aria-hidden": "true",
-          ref: tabStart
-        }), closeButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_modalCloseButton.default, {
-          onClick: handleClose
-        }), children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_modal.StyledModalHideTab, {
-          role: "button",
-          tabIndex: 0,
-          className: `${preClass}-hide-tab`,
-          "aria-hidden": "true",
-          ref: tabEnd
-        })]
-      })
-    );
-  }, [rebound, children]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: animated ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_cssTransition.default, {
-      name: `${preClass}-wrapper`,
-      visible: visible,
-      enterTime: 20,
-      leaveTime: 20,
-      clearTime: 300,
-      children: renderChildren
-    }) : visible ? renderChildren : null
-  });
-};
-
-ModalWrapper.toString = () => '.nextui-modal-wrapper';
-
-var _default = (0, _withDefaults.default)(ModalWrapper, defaultProps);
-
-exports.default = _default;
-module.exports = exports.default;
+import e,{useEffect as r,useRef as t,useMemo as o,useState as n}from"react";import l from"../utils/with-defaults";import i from"../utils/css-transition";import{isChildElement as s}from"../utils/collections";import a from"./modal-close-button";import{KeyCode as c}from"../use-keyboard";import u from"../use-theme";import{StyledModal as m,StyledModalHideTab as d}from"./modal.styles";import f from"../utils/clsx";import{jsx as p}from"react/jsx-runtime";import{jsxs as b}from"react/jsx-runtime";import{Fragment as h}from"react/jsx-runtime";const x="nextui-modal",$=({className:e,children:l,visible:$,fullScreen:T,closeButton:k,rebound:v,animated:j,onCloseButtonClick:w,scroll:y,...N})=>{const C=t(null),g=t(null),B=t(null),[D,I]=n(!1),{isDark:S}=u();r((()=>{const e=setTimeout((()=>{I(!0),clearTimeout(e)}),300);return()=>clearTimeout(e)}),[]),r((()=>{if(!$)return;const e=document.activeElement;s(C.current,e)||g.current&&g.current.focus()}),[$]);const E=e=>{const r=e.keyCode===c.Tab;if(!$||!r)return;const t=document.activeElement;e.shiftKey?t===g.current&&B.current&&B.current.focus():t===B.current&&g.current&&g.current.focus()},K=()=>{w&&w()},F=o((()=>$?"open":"closed"),[$]),q=o((()=>b(m,{role:"dialog",tabIndex:-1,"aria-modal":$,ref:C,"data-state":F,fullScreen:T,scroll:y,closeButton:k,isDark:S,className:f(x,`${x}--${F}`,{[`${x}-fullscreen`]:T,[`${x}-with-close-button`]:k,[`${x}-rebound`]:v,[`${x}-rendered`]:D},e),...N,onKeyDown:E,children:[p(d,{role:"button",tabIndex:0,className:`${x}-hide-tab`,"aria-hidden":"true",ref:g}),k&&p(a,{onClick:K}),l,p(d,{role:"button",tabIndex:0,className:`${x}-hide-tab`,"aria-hidden":"true",ref:B})]})),[v,l]);return p(h,{children:j?p(i,{name:`${x}-wrapper`,visible:$,enterTime:20,leaveTime:20,clearTime:300,children:q}):$?q:null})};$.toString=()=>".nextui-modal-wrapper";export default l($,{className:"",visible:!1,rebound:!1});

package/esm/modal/modal.js

@@ -1,159 +1 @@
-"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,
-  animated: true,
-  blur: false,
-  scroll: false,
-  noPadding: false
-};
-
-const Modal = ({
-  children,
-  onClose,
-  onOpen,
-  open,
-  autoMargin,
-  width: wrapperWidth,
-  className,
-  preventClose,
-  blur,
-  animated,
-  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,
-    preventDefault: 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,
-      maxWidth: wrapperWidth,
-      fullScreen: fullScreen,
-      blur: blur,
-      animated: animated,
-      ...bindings,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_modalWrapper.default, {
-        visible: visible,
-        onCloseButtonClick: closeModal,
-        className: className,
-        fullScreen: fullScreen,
-        rebound: rebound,
-        animated: animated,
-        ...props,
-        children: children
-      })
-    })
-  }), portal);
-};
-
-if (_assertion.__DEV__) {
-  _backdrop.default.displayName = 'NextUI - Modal';
-}
-
-Modal.toString = () => '.nextui-modal';
-
-Modal.defaultProps = defaultProps;
-var _default = Modal;
-exports.default = _default;
-module.exports = exports.default;
+import e,{useEffect as o,useMemo as r,useState as t}from"react";import{createPortal as l}from"react-dom";import n from"../use-portal";import a from"./modal-wrapper";import i from"../backdrop";import{ModalContext as m}from"./modal-context";import s from"../use-body-scroll";import d from"../use-current-state";import c,{KeyCode as u}from"../use-keyboard";import{__DEV__ as p}from"../utils/assertion";import{jsx as f}from"react/jsx-runtime";const b=({children:e,onClose:p,onOpen:b,open:v,autoMargin:x,width:g,className:h,preventClose:C,blur:N,animated:P,fullScreen:S,noPadding:k,...y})=>{const w=n("modal"),[,M]=s(null,{scrollLayer:!0}),[j,B,E]=d(!1),[T,D]=t(!1),G=()=>{p&&p(),B(!1),M(!1)};o((()=>{void 0!==v&&(v&&b&&b(),!v&&E.current&&p&&p(),B(v),M(v))}),[v]);const I=()=>{D(!0);const e=setTimeout((()=>{D(!1),clearTimeout(e)}),300)},{bindings:L}=c((()=>{C?I():G()}),u.Escape,{disableGlobalEvent:!0,preventDefault:!0}),O=r((()=>({close:G,autoMargin:x,noPadding:k})),[]);return w?l(f(m.Provider,{value:O,children:f(i,{onClick:()=>{C?I():G()},visible:j,maxWidth:g,fullScreen:S,blur:N,animated:P,...L,children:f(a,{visible:j,onCloseButtonClick:G,className:h,fullScreen:S,rebound:T,animated:P,...y,children:e})})}),w):null};p&&(i.displayName="NextUI - Modal"),b.toString=()=>".nextui-modal",b.defaultProps={width:"400px",className:"",preventClose:!1,fullScreen:!1,closeButton:!1,animated:!0,blur:!1,scroll:!1,noPadding:!1};export default b;