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

package/esm/utils/css-transition.js

@@ -1,76 +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 _clsx = _interopRequireDefault(require("../utils/clsx"));
-
-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 = {
-  visible: false,
-  enterTime: 60,
-  leaveTime: 60,
-  clearTime: 60,
-  className: '',
-  name: 'transition'
-};
-
-const CSSTransition = ({
-  children,
-  className,
-  visible,
-  enterTime,
-  leaveTime,
-  clearTime,
-  name,
-  ...props
-}) => {
-  const [classes, setClasses] = (0, _react.useState)('');
-  const [renderable, setRenderable] = (0, _react.useState)(visible);
-  (0, _react.useEffect)(() => {
-    const statusClassName = visible ? 'enter' : 'leave';
-    const time = visible ? enterTime : leaveTime;
-
-    if (visible && !renderable) {
-      setRenderable(true);
-    }
-
-    setClasses(`${name}-${statusClassName}`); // set class to active
-
-    const timer = setTimeout(() => {
-      setClasses(`${name}-${statusClassName} ${name}-${statusClassName}-active`);
-      clearTimeout(timer);
-    }, time); // remove classess when animation over
-
-    const clearClassesTimer = setTimeout(() => {
-      if (!visible) {
-        setClasses('');
-        setRenderable(false);
-      }
-
-      clearTimeout(clearClassesTimer);
-    }, time + clearTime);
-    return () => {
-      clearTimeout(timer);
-      clearTimeout(clearClassesTimer);
-    };
-  }, [visible, renderable]);
-  if (! /*#__PURE__*/_react.default.isValidElement(children) || !renderable) return null;
-  return /*#__PURE__*/_react.default.cloneElement(children, { ...props,
-    className: (0, _clsx.default)(children.props.className, className, classes)
-  });
-};
-
-var _default = (0, _withDefaults.default)(CSSTransition, defaultProps);
-
-exports.default = _default;
-module.exports = exports.default;
+import e,{useEffect as t,useState as i}from"react";import l from"../utils/with-defaults";import m from"../utils/clsx";export default l((({children:l,className:a,visible:r,enterTime:s,leaveTime:o,clearTime:c,name:n,...u})=>{const[T,p]=i(""),[v,$]=i(r);return t((()=>{const e=r?"enter":"leave",t=r?s:o;r&&!v&&$(!0),p(`${n}-${e}`);const i=setTimeout((()=>{p(`${n}-${e} ${n}-${e}-active`),clearTimeout(i)}),t),l=setTimeout((()=>{r||(p(""),$(!1)),clearTimeout(l)}),t+c);return()=>{clearTimeout(i),clearTimeout(l)}}),[r,v]),e.isValidElement(l)&&v?e.cloneElement(l,{...u,className:m(l.props.className,a,T)}):null}),{visible:!1,enterTime:60,leaveTime:60,clearTime:60,className:"",name:"transition"});

package/esm/utils/deep-merge.js

@@ -1,33 +1 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = deepMerge;
-
-function deepMerge(result) {
-  var stack = Array.prototype.slice.call(arguments, 1);
-  var item;
-  var key;
-
-  while (stack.length) {
-    item = stack.shift();
-
-    for (key in item) {
-      // eslint-disable-next-line no-prototype-builtins
-      if (item.hasOwnProperty(key)) {
-        if (typeof result[key] === 'object' && result[key] && Object.prototype.toString.call(result[key]) !== '[object Array]') {
-          if (typeof item[key] === 'object' && item[key] !== null) {
-            result[key] = deepMerge({}, result[key], item[key]);
-          } else {
-            result[key] = item[key];
-          }
-        } else {
-          result[key] = item[key];
-        }
-      }
-    }
-  }
-
-  return result;
-}
-
-module.exports = exports.default;
+export default function t(o){for(var r,e,l=Array.prototype.slice.call(arguments,1);l.length;)for(e in r=l.shift())r.hasOwnProperty(e)&&("object"==typeof o[e]&&o[e]&&"[object Array]"!==Object.prototype.toString.call(o[e])&&"object"==typeof r[e]&&null!==r[e]?o[e]=t({},o[e],r[e]):o[e]=r[e]);return o}

package/esm/utils/dimensions.js

@@ -1,10 +1 @@
-"use strict";
-
-exports.__esModule = true;
-exports.getMargin = void 0;
-
-const getMargin = num => {
-  return `calc(${num * 15.25}pt + 1px * ${num - 1})`;
-};
-
-exports.getMargin = getMargin;
+export const getMargin=t=>`calc(${15.25*t}pt + 1px * ${t-1})`;

package/esm/utils/dom.js

@@ -1,110 +1 @@
-"use strict";
-
-exports.__esModule = true;
-exports.canUseDOM = canUseDOM;
-exports.detectBrowser = detectBrowser;
-exports.detectDeviceType = detectDeviceType;
-exports.detectOS = detectOS;
-exports.detectTouch = detectTouch;
-exports.isBrowser = void 0;
-
-function canUseDOM() {
-  return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
-}
-
-const isBrowser = canUseDOM();
-exports.isBrowser = isBrowser;
-
-function getUserAgentBrowser(navigator) {
-  const {
-    userAgent: ua,
-    vendor
-  } = navigator;
-  const android = /(android)/i.test(ua);
-
-  switch (true) {
-    case /CriOS/.test(ua):
-      return 'Chrome for iOS';
-
-    case /Edg\//.test(ua):
-      return 'Edge';
-
-    case android && /Silk\//.test(ua):
-      return 'Silk';
-
-    case /Chrome/.test(ua) && /Google Inc/.test(vendor):
-      return 'Chrome';
-
-    case /Firefox\/\d+\.\d+$/.test(ua):
-      return 'Firefox';
-
-    case android:
-      return 'AOSP';
-
-    case /MSIE|Trident/.test(ua):
-      return 'IE';
-
-    case /Safari/.test(navigator.userAgent) && /Apple Computer/.test(ua):
-      return 'Safari';
-
-    case /AppleWebKit/.test(ua):
-      return 'WebKit';
-
-    default:
-      return null;
-  }
-}
-
-function getUserAgentOS(navigator) {
-  const {
-    userAgent: ua,
-    platform
-  } = navigator;
-
-  switch (true) {
-    case /Android/.test(ua):
-      return 'Android';
-
-    case /iPhone|iPad|iPod/.test(platform):
-      return 'iOS';
-
-    case /Win/.test(platform):
-      return 'Windows';
-
-    case /Mac/.test(platform):
-      return 'Mac';
-
-    case /CrOS/.test(ua):
-      return 'Chrome OS';
-
-    case /Firefox/.test(ua):
-      return 'Firefox OS';
-
-    default:
-      return null;
-  }
-}
-
-function detectDeviceType(navigator) {
-  const {
-    userAgent: ua
-  } = navigator;
-  if (/(tablet)|(iPad)|(Nexus 9)/i.test(ua)) return 'tablet';
-  if (/(mobi)/i.test(ua)) return 'phone';
-  return 'desktop';
-}
-
-function detectOS(os) {
-  if (!isBrowser) return false;
-  return getUserAgentOS(window.navigator) === os;
-}
-
-function detectBrowser(browser) {
-  if (!isBrowser) return false;
-  return getUserAgentBrowser(window.navigator) === browser;
-}
-
-function detectTouch() {
-  if (!isBrowser) return false;
-  return window.ontouchstart === null && window.ontouchmove === null && window.ontouchend === null;
-}
+export function canUseDOM(){return!("undefined"==typeof window||!window.document||!window.document.createElement)}export const isBrowser=canUseDOM();export function detectDeviceType(e){const{userAgent:t}=e;return/(tablet)|(iPad)|(Nexus 9)/i.test(t)?"tablet":/(mobi)/i.test(t)?"phone":"desktop"}export function detectOS(e){return!!isBrowser&&function(e){const{userAgent:t,platform:r}=e;switch(!0){case/Android/.test(t):return"Android";case/iPhone|iPad|iPod/.test(r):return"iOS";case/Win/.test(r):return"Windows";case/Mac/.test(r):return"Mac";case/CrOS/.test(t):return"Chrome OS";case/Firefox/.test(t):return"Firefox OS";default:return null}}(window.navigator)===e}export function detectBrowser(e){return!!isBrowser&&function(e){const{userAgent:t,vendor:r}=e,n=/(android)/i.test(t);switch(!0){case/CriOS/.test(t):return"Chrome for iOS";case/Edg\//.test(t):return"Edge";case n&&/Silk\//.test(t):return"Silk";case/Chrome/.test(t)&&/Google Inc/.test(r):return"Chrome";case/Firefox\/\d+\.\d+$/.test(t):return"Firefox";case n:return"AOSP";case/MSIE|Trident/.test(t):return"IE";case/Safari/.test(e.userAgent)&&/Apple Computer/.test(t):return"Safari";case/AppleWebKit/.test(t):return"WebKit";default:return null}}(window.navigator)===e}export function detectTouch(){return!!isBrowser&&(null===window.ontouchstart&&null===window.ontouchmove&&null===window.ontouchend)}

package/esm/utils/drip.js

@@ -1,116 +1 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.default = exports.StyledDrip = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _stitches = require("../theme/stitches.config");
-
-var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
-
-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 = {
-  visible: false,
-  x: 0,
-  y: 0,
-  className: ''
-};
-const expand = (0, _stitches.keyframes)({
-  '0%': {
-    opacity: 0,
-    transform: 'scale(0.25)'
-  },
-  '30%': {
-    opacity: 1
-  },
-  '80%': {
-    opacity: 0.5
-  },
-  '100%': {
-    transform: 'scale(28)',
-    opacity: 0
-  }
-});
-const StyledDrip = (0, _stitches.styled)('div', {
-  position: 'absolute',
-  left: 0,
-  right: 0,
-  top: 0,
-  bottom: 0,
-  '& svg': {
-    position: 'absolute',
-    animation: `350ms linear ${expand}`,
-    animationFillMode: 'forwards',
-    width: '$md',
-    height: '$md'
-  }
-});
-exports.StyledDrip = StyledDrip;
-
-const Drip = ({
-  visible,
-  x,
-  y,
-  color,
-  onCompleted,
-  className,
-  ...props
-}) => {
-  const dripRef = (0, _react.useRef)(null);
-  const top = Number.isNaN(+y) ? 0 : y - 10;
-  const left = Number.isNaN(+x) ? 0 : x - 10;
-  (0, _react.useEffect)(() => {
-    if (!dripRef.current) return;
-    dripRef.current.addEventListener('animationend', onCompleted);
-    return () => {
-      if (!dripRef.current) return;
-      dripRef.current.removeEventListener('animationend', onCompleted);
-    };
-  });
-  if (!visible) return null;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledDrip, {
-    ref: dripRef,
-    className: (0, _clsx.default)('nextui-drip', className),
-    ...props,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
-      width: "20",
-      height: "20",
-      viewBox: "0 0 20 20",
-      style: {
-        top,
-        left
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
-        stroke: "none",
-        strokeWidth: "1",
-        fill: "none",
-        fillRule: "evenodd",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
-          className: "nextui-drip-filler",
-          fill: color,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
-            width: "100%",
-            height: "100%",
-            rx: "10"
-          })
-        })
-      })
-    })
-  });
-};
-
-const MemoDrip = /*#__PURE__*/_react.default.memo(Drip);
-
-var _default = (0, _withDefaults.default)(MemoDrip, defaultProps);
-
-exports.default = _default;
+import t,{useEffect as e,useRef as i}from"react";import{styled as r,keyframes as o}from"../theme/stitches.config";import n from"../utils/with-defaults";import l from"../utils/clsx";import{jsx as s}from"react/jsx-runtime";const a=o({"0%":{opacity:0,transform:"scale(0.25)"},"30%":{opacity:1},"80%":{opacity:.5},"100%":{transform:"scale(28)",opacity:0}});export const StyledDrip=r("div",{position:"absolute",left:0,right:0,top:0,bottom:0,"& svg":{position:"absolute",animation:`350ms linear ${a}`,animationFillMode:"forwards",width:"$md",height:"$md"}});const m=({visible:t,x:r,y:o,color:n,onCompleted:a,className:m,...c})=>{const d=i(null),p=Number.isNaN(+o)?0:o-10,u=Number.isNaN(+r)?0:r-10;return e((()=>{if(d.current)return d.current.addEventListener("animationend",a),()=>{d.current&&d.current.removeEventListener("animationend",a)}})),t?s(StyledDrip,{ref:d,className:l("nextui-drip",m),...c,children:s("svg",{width:"20",height:"20",viewBox:"0 0 20 20",style:{top:p,left:u},children:s("g",{stroke:"none",strokeWidth:"1",fill:"none",fillRule:"evenodd",children:s("g",{className:"nextui-drip-filler",fill:n,children:s("rect",{width:"100%",height:"100%",rx:"10"})})})})}):null},c=t.memo(m);export default n(c,{visible:!1,x:0,y:0,className:""});

package/esm/utils/expand.js

@@ -1,109 +1 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _stitches = require("../theme/stitches.config");
-
-var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
-
-var _useRealShape = _interopRequireDefault(require("../use-real-shape"));
-
-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 = {
-  isExpanded: false,
-  animated: true,
-  delay: 200
-};
-const StyledExpand = (0, _stitches.styled)('div', {
-  p: 0,
-  m: 0,
-  h: 0,
-  opacity: 0,
-  overflow: 'hidden',
-  variants: {
-    expanded: {
-      true: {
-        opacity: 1
-      }
-    }
-  }
-});
-
-const Expand = ({
-  isExpanded,
-  delay,
-  animated,
-  css,
-  children
-}) => {
-  const [height, setHeight] = (0, _react.useState)(isExpanded ? 'auto' : '0');
-  const [selfExpanded, setSelfExpanded] = (0, _react.useState)(isExpanded);
-  const contentRef = (0, _react.useRef)(null);
-  const entryTimer = (0, _react.useRef)();
-  const leaveTimer = (0, _react.useRef)();
-  const resetTimer = (0, _react.useRef)();
-  const [state, updateShape] = (0, _useRealShape.default)(contentRef);
-  (0, _react.useEffect)(() => setHeight(`${state.height}px`), [state.height]);
-  (0, _react.useEffect)(() => {
-    if (isExpanded === selfExpanded) return; // show element or reset height.
-    // force an update once manually, even if the element does not change.
-    // (the height of the element might be "auto")
-
-    if (!isExpanded) {
-      updateShape();
-      setHeight(`${state.height}px`);
-    } // show expand animation
-
-
-    entryTimer.current = window.setTimeout(() => {
-      setSelfExpanded(isExpanded);
-      clearTimeout(entryTimer.current);
-    }, 30); // Reset height after animation
-
-    if (isExpanded) {
-      resetTimer.current = window.setTimeout(() => {
-        setHeight('auto');
-        clearTimeout(resetTimer.current);
-      }, delay);
-    } else {
-      leaveTimer.current = window.setTimeout(() => {
-        clearTimeout(leaveTimer.current);
-      }, delay / 2);
-    }
-
-    return () => {
-      clearTimeout(entryTimer.current);
-      clearTimeout(leaveTimer.current);
-      clearTimeout(resetTimer.current);
-    };
-  }, [isExpanded]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledExpand, {
-    expanded: selfExpanded,
-    css: {
-      height: selfExpanded ? height : '0',
-      transition: animated ? `height ${delay}ms ease 0ms,
-    opacity ${delay * 1.5}ms ease 0ms;` : 'none',
-      ...css
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      ref: contentRef,
-      className: "nextui-expand-content",
-      children: children
-    })
-  });
-};
-
-var _default = (0, _withDefaults.default)(Expand, defaultProps);
-
-exports.default = _default;
-module.exports = exports.default;
+import e,{useEffect as t,useRef as r,useState as i}from"react";import{styled as n}from"../theme/stitches.config";import a from"../utils/with-defaults";import o from"../use-real-shape";import{jsx as c}from"react/jsx-runtime";const s=n("div",{p:0,m:0,h:0,opacity:0,overflow:"hidden",variants:{expanded:{true:{opacity:1}}}});export default a((({isExpanded:e,delay:n,animated:a,css:u,children:m})=>{const[d,h]=i(e?"auto":"0"),[l,p]=i(e),f=r(null),x=r(),T=r(),w=r(),[g,y]=o(f);return t((()=>h(`${g.height}px`)),[g.height]),t((()=>{if(e!==l)return e||(y(),h(`${g.height}px`)),x.current=window.setTimeout((()=>{p(e),clearTimeout(x.current)}),30),e?w.current=window.setTimeout((()=>{h("auto"),clearTimeout(w.current)}),n):T.current=window.setTimeout((()=>{clearTimeout(T.current)}),n/2),()=>{clearTimeout(x.current),clearTimeout(T.current),clearTimeout(w.current)}}),[e]),c(s,{expanded:l,css:{height:l?d:"0",transition:a?`height ${n}ms ease 0ms,\n    opacity ${1.5*n}ms ease 0ms;`:"none",...u},children:c("div",{ref:f,className:"nextui-expand-content",children:m})})}),{isExpanded:!1,animated:!0,delay:200});