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

package/esm/theme/theme-context.js

@@ -1,22 +1 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.defaultContext = exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _stitches = require("./stitches.config");
-
-const defaultContext = {
-  isDark: false,
-  theme: _stitches.theme,
-  type: 'light'
-};
-exports.defaultContext = defaultContext;
-
-const ThemeContext = /*#__PURE__*/_react.default.createContext(defaultContext);
-
-var _default = ThemeContext;
-exports.default = _default;
+import t from"react";import{theme as e}from"./stitches.config";export const defaultContext={isDark:!1,theme:e,type:"light"};const o=t.createContext(defaultContext);export default o;

package/esm/theme/theme-provider.js

@@ -1,115 +1 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _cssBaseline = _interopRequireDefault(require("../css-baseline"));
-
-var _themeContext = _interopRequireWildcard(require("./theme-context"));
-
-var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
-
-var _deepMerge = _interopRequireDefault(require("../utils/deep-merge"));
-
-var _object = require("../utils/object");
-
-var _ssrProvider = require("./ssr-provider");
-
-var _utils = require("./utils");
-
-var _useSsr = _interopRequireDefault(require("../use-ssr"));
-
-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 = {
-  disableBaseline: false
-};
-
-const ThemeProvider = ({
-  theme: userTheme,
-  disableBaseline,
-  children
-}) => {
-  const {
-    isBrowser
-  } = (0, _useSsr.default)();
-  const [currentTheme, setCurrentTheme] = (0, _react.useState)(_themeContext.defaultContext.type);
-
-  const changeCurrentTheme = type => {
-    setCurrentTheme(ct => ct !== type ? type : ct);
-  };
-
-  const changeTypeBaseEl = el => {
-    const themeValue = (0, _utils.getDocumentTheme)(el);
-    themeValue && changeCurrentTheme(themeValue);
-  };
-
-  const providerValue = (0, _react.useMemo)(() => {
-    const themeTokens = isBrowser ? (0, _utils.getDocumentCSSTokens)() : {};
-    const theme = (0, _deepMerge.default)((0, _object.copyObject)(_themeContext.defaultContext.theme), themeTokens);
-    const themeName = (0, _utils.getThemeName)(currentTheme);
-    return {
-      theme,
-      type: themeName,
-      isDark: themeName === 'dark'
-    };
-  }, [currentTheme, isBrowser]);
-  (0, _react.useEffect)(() => {
-    var _document, _document4, _document5;
-
-    // initial set
-    changeTypeBaseEl((_document = document) == null ? void 0 : _document.documentElement);
-    const observer = new MutationObserver(mutation => {
-      var _mutation$;
-
-      if (mutation && mutation.length > 0 && ((_mutation$ = mutation[0]) == null ? void 0 : _mutation$.target.nodeName) === 'BODY') {
-        var _document2, _document2$body, _document2$body$datas;
-
-        const documentTheme = (_document2 = document) == null ? void 0 : (_document2$body = _document2.body) == null ? void 0 : (_document2$body$datas = _document2$body.dataset) == null ? void 0 : _document2$body$datas.theme;
-        documentTheme && changeCurrentTheme(documentTheme);
-      } else {
-        var _document3;
-
-        changeTypeBaseEl((_document3 = document) == null ? void 0 : _document3.documentElement);
-      }
-    });
-    observer.observe((_document4 = document) == null ? void 0 : _document4.documentElement, {
-      attributes: true,
-      attributeFilter: ['data-theme', 'style']
-    });
-    observer.observe((_document5 = document) == null ? void 0 : _document5.body, {
-      attributes: true,
-      attributeFilter: ['data-theme', 'style']
-    });
-    return () => observer.disconnect();
-  }, []);
-  (0, _react.useEffect)(() => {
-    if (!isBrowser || !userTheme) {
-      return;
-    }
-
-    if (userTheme != null && userTheme.className) {
-      (0, _utils.changeTheme)(userTheme.className);
-      changeCurrentTheme((0, _utils.getThemeName)(userTheme.className));
-    }
-  }, [isBrowser, userTheme]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ssrProvider.SsrProvider, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_themeContext.default.Provider, {
-      value: providerValue,
-      children: [!disableBaseline && /*#__PURE__*/(0, _jsxRuntime.jsx)(_cssBaseline.default, {}), children]
-    })
-  });
-};
-
-var _default = (0, _withDefaults.default)(ThemeProvider, defaultProps);
-
-exports.default = _default;
-module.exports = exports.default;
+import e,{useState as t,useMemo as r,useEffect as o}from"react";import{SSRProvider as s}from"@react-aria/ssr";import m from"../css-baseline";import i,{defaultContext as l}from"./theme-context";import n from"../utils/with-defaults";import a from"../utils/deep-merge";import{copyObject as u}from"../utils/object";import{changeTheme as d,getThemeName as c,getDocumentCSSTokens as p,getDocumentTheme as v}from"./utils";import f from"../use-ssr";import{jsx as b}from"react/jsx-runtime";import{jsxs as h}from"react/jsx-runtime";export default n((({theme:e,disableBaseline:n,children:x})=>{const{isBrowser:y}=f(),[j,B]=t(l.type),N=e=>{B((t=>t!==e?e:t))},g=e=>{const t=v(e);t&&N(t)},w=r((()=>{const e=y?p():{},t=a(u(l.theme),e),r=c(j);return{theme:t,type:r,isDark:"dark"===r}}),[j,y]);return o((()=>{var e,t,r;g(null==(e=document)?void 0:e.documentElement);const o=new MutationObserver((e=>{var t;if(e&&e.length>0&&"BODY"===(null==(t=e[0])?void 0:t.target.nodeName)){var r,o,s;const e=null==(r=document)||null==(o=r.body)||null==(s=o.dataset)?void 0:s.theme;e&&N(e)}else{var m;g(null==(m=document)?void 0:m.documentElement)}}));return o.observe(null==(t=document)?void 0:t.documentElement,{attributes:!0,attributeFilter:["data-theme","style"]}),o.observe(null==(r=document)?void 0:r.body,{attributes:!0,attributeFilter:["data-theme","style"]}),()=>o.disconnect()}),[]),o((()=>{y&&e&&null!=e&&e.className&&(d(e.className),N(c(e.className)))}),[y,e]),b(i.Provider,{value:w,children:h(s,{children:[!n&&b(m,{}),x]})})}),{disableBaseline:!1});

package/esm/theme/types.js

@@ -1,3 +1 @@
-"use strict";
-
-exports.__esModule = true;
+export{};

package/esm/theme/utils.js

@@ -1,113 +1 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.getTokenValue = exports.getThemeName = exports.getDocumentTheme = exports.getDocumentCSSTokens = exports.changeTheme = void 0;
-
-var _common = _interopRequireDefault(require("./common"));
-
-var _lightTheme = _interopRequireDefault(require("./light-theme"));
-
-var _clsx = _interopRequireDefault(require("../utils/clsx"));
-
-const getTokenValue = (token, tokenName) => {
-  if (!document || !token) return '';
-  let docStyle = getComputedStyle(document.documentElement);
-  const tokenKey = `--${_common.default.prefix}-${token}-${tokenName}`;
-  const tokenValue = docStyle.getPropertyValue(tokenKey);
-
-  if (tokenValue && tokenValue.includes('var')) {
-    getTokenValue(token, tokenValue);
-  }
-
-  return tokenValue;
-};
-
-exports.getTokenValue = getTokenValue;
-
-const getDocumentCSSTokens = () => {
-  const colorKeys = [...Object.keys(_common.default.theme.colors), ...Object.keys(_lightTheme.default.colors)];
-  const shadowKeys = Object.keys(_lightTheme.default.shadows);
-  /**
-   * accents1: {
-   *    prefix: "nextui"
-   *    scale: "colors"
-   *    token: "accents1"
-   *    value: "var(--nextui-colors-gray100)"
-   * }
-   */
-
-  const colorTokens = colorKeys.reduce((acc, crr) => {
-    const color = getTokenValue('colors', crr);
-
-    if (color) {
-      acc[crr] = {
-        prefix: _common.default.prefix,
-        scale: 'colors',
-        token: crr,
-        value: color
-      };
-    }
-
-    return acc;
-  }, {});
-  const shadowTokens = shadowKeys.reduce((acc, crr) => {
-    const shadow = getTokenValue('shadows', crr);
-
-    if (shadow) {
-      acc[crr] = {
-        prefix: _common.default.prefix,
-        scale: 'shadows',
-        token: crr,
-        value: shadow
-      };
-    }
-
-    return acc;
-  }, {});
-  return {
-    colors: colorTokens,
-    shadows: shadowTokens
-  };
-};
-/**
- * Returns active theme according to the given document
- */
-
-
-exports.getDocumentCSSTokens = getDocumentCSSTokens;
-
-const getDocumentTheme = el => {
-  var _el$getAttribute;
-
-  const styleAttrValues = (el == null ? void 0 : (_el$getAttribute = el.getAttribute('style')) == null ? void 0 : _el$getAttribute.split(';').map(el => el.trim()).filter(el => el.includes('color-scheme'))) || [];
-  const colorScheme = styleAttrValues.length > 0 ? styleAttrValues[0].replace('color-scheme: ', '').replace(';', '') : '';
-  const documentTheme = el == null ? void 0 : el.getAttribute('data-theme');
-  return documentTheme || colorScheme;
-};
-
-exports.getDocumentTheme = getDocumentTheme;
-
-const getThemeName = theme => {
-  if (typeof theme === 'string') {
-    return theme != null && theme.includes('-theme') ? theme == null ? void 0 : theme.replace('-theme', '') : theme;
-  }
-
-  return theme;
-};
-
-exports.getThemeName = getThemeName;
-
-const changeTheme = theme => {
-  var _el$getAttribute2, _el$getAttribute3;
-
-  if (!document) return;
-  const el = document.documentElement;
-  const prevClasses = (el == null ? void 0 : (_el$getAttribute2 = el.getAttribute('class')) == null ? void 0 : _el$getAttribute2.split(' ').filter(cls => !cls.includes('theme') && !cls.includes('light') && !cls.includes('dark'))) || [];
-  const prevStyles = (el == null ? void 0 : (_el$getAttribute3 = el.getAttribute('style')) == null ? void 0 : _el$getAttribute3.split(';').filter(stl => !stl.includes('color-scheme')).map(el => `${el};`)) || [];
-  el == null ? void 0 : el.setAttribute('class', (0, _clsx.default)(prevClasses, `${getThemeName(theme)}-theme`));
-  el == null ? void 0 : el.setAttribute('style', (0, _clsx.default)(prevStyles, `color-scheme: ${theme};`));
-};
-
-exports.changeTheme = changeTheme;
+import e from"./common";import t from"./light-theme";import l from"../utils/clsx";export const getTokenValue=(t,l)=>{if(!document||!t)return"";let o=getComputedStyle(document.documentElement);const r=`--${e.prefix}-${t}-${l}`,n=o.getPropertyValue(r);return n&&n.includes("var")&&getTokenValue(t,n),n};export const getDocumentCSSTokens=()=>{const l=[...Object.keys(e.theme.colors),...Object.keys(t.colors)],o=Object.keys(t.shadows);return{colors:l.reduce(((t,l)=>{const o=getTokenValue("colors",l);return o&&(t[l]={prefix:e.prefix,scale:"colors",token:l,value:o}),t}),{}),shadows:o.reduce(((t,l)=>{const o=getTokenValue("shadows",l);return o&&(t[l]={prefix:e.prefix,scale:"shadows",token:l,value:o}),t}),{})}};export const getDocumentTheme=e=>{var t;const l=(null==e||null==(t=e.getAttribute("style"))?void 0:t.split(";").map((e=>e.trim())).filter((e=>e.includes("color-scheme"))))||[],o=l.length>0?l[0].replace("color-scheme: ","").replace(";",""):"";return(null==e?void 0:e.getAttribute("data-theme"))||o};export const getThemeName=e=>"string"==typeof e&&null!=e&&e.includes("-theme")?null==e?void 0:e.replace("-theme",""):e;export const changeTheme=e=>{var t,o;if(!document)return;const r=document.documentElement,n=(null==r||null==(t=r.getAttribute("class"))?void 0:t.split(" ").filter((e=>!e.includes("theme")&&!e.includes("light")&&!e.includes("dark"))))||[],s=(null==r||null==(o=r.getAttribute("style"))?void 0:o.split(";").filter((e=>!e.includes("color-scheme"))).map((e=>`${e};`)))||[];null==r||r.setAttribute("class",l(n,`${getThemeName(e)}-theme`)),null==r||r.setAttribute("style",l(s,`color-scheme: ${e};`))};

package/esm/tooltip/index.js

@@ -1,17 +1 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.default = exports.StyledTooltipTrigger = exports.StyledTooltipContent = exports.StyledTooltipArrow = exports.StyledTooltip = void 0;
-
-var _tooltip = _interopRequireDefault(require("./tooltip"));
-
-var _tooltip2 = require("./tooltip.styles");
-
-exports.StyledTooltipTrigger = _tooltip2.StyledTooltipTrigger;
-exports.StyledTooltipArrow = _tooltip2.StyledTooltipArrow;
-exports.StyledTooltipContent = _tooltip2.StyledTooltipContent;
-exports.StyledTooltip = _tooltip2.StyledTooltip;
-var _default = _tooltip.default;
-exports.default = _default;
+import o from"./tooltip";export{StyledTooltipTrigger,StyledTooltipArrow,StyledTooltipContent,StyledTooltip}from"./tooltip.styles";export default o;

package/esm/tooltip/placement.js

@@ -1,193 +1 @@
-"use strict";
-
-exports.__esModule = true;
-exports.getRect = exports.getPlacement = exports.getIconPlacement = exports.defaultTooltipPlacement = void 0;
-const defaultRect = {
-  top: -1000,
-  left: -1000,
-  right: -1000,
-  bottom: -1000,
-  width: 0,
-  height: 0
-};
-
-const getRect = ref => {
-  if (!ref || !ref.current) return defaultRect;
-  const rect = ref.current.getBoundingClientRect();
-  return { ...rect,
-    width: rect.width || rect.right - rect.left,
-    height: rect.height || rect.bottom - rect.top,
-    top: rect.top + document.documentElement.scrollTop,
-    bottom: rect.bottom + document.documentElement.scrollTop,
-    left: rect.left + document.documentElement.scrollLeft,
-    right: rect.right + document.documentElement.scrollLeft
-  };
-};
-
-exports.getRect = getRect;
-const defaultTooltipPlacement = {
-  top: '-1000px',
-  left: '-1000px',
-  transform: 'none'
-};
-exports.defaultTooltipPlacement = defaultTooltipPlacement;
-
-const getPlacement = (placement, rect, offset) => {
-  const placements = {
-    top: {
-      top: `${rect.top - offset}px`,
-      left: `${rect.left + rect.width / 2}px`,
-      transform: 'translate(-50%, -100%)'
-    },
-    topStart: {
-      top: `${rect.top - offset}px`,
-      left: `${rect.left}px`,
-      transform: 'translate(0, -100%)'
-    },
-    topEnd: {
-      top: `${rect.top - offset}px`,
-      left: `${rect.left + rect.width}px`,
-      transform: 'translate(-100%, -100%)'
-    },
-    bottom: {
-      top: `${rect.bottom + offset}px`,
-      left: `${rect.left + rect.width / 2}px`,
-      transform: 'translate(-50%, 0)'
-    },
-    bottomStart: {
-      top: `${rect.bottom + offset}px`,
-      left: `${rect.left}px`,
-      transform: 'translate(0, 0)'
-    },
-    bottomEnd: {
-      top: `${rect.bottom + offset}px`,
-      left: `${rect.left + rect.width}px`,
-      transform: 'translate(-100%, 0)'
-    },
-    left: {
-      top: `${rect.top + rect.height / 2}px`,
-      left: `${rect.left - offset}px`,
-      transform: 'translate(-100%, -50%)'
-    },
-    leftStart: {
-      top: `${rect.top}px`,
-      left: `${rect.left - offset}px`,
-      transform: 'translate(-100%, 0)'
-    },
-    leftEnd: {
-      top: `${rect.top + rect.height}px`,
-      left: `${rect.left - offset}px`,
-      transform: 'translate(-100%, -100%)'
-    },
-    right: {
-      top: `${rect.top + rect.height / 2}px`,
-      left: `${rect.right + offset}px`,
-      transform: 'translate(0, -50%)'
-    },
-    rightStart: {
-      top: `${rect.top}px`,
-      left: `${rect.right + offset}px`,
-      transform: 'translate(0, 0)'
-    },
-    rightEnd: {
-      top: `${rect.top + rect.height}px`,
-      left: `${rect.right + offset}px`,
-      transform: 'translate(0, -100%)'
-    }
-  };
-  return placements[placement] || placements.top;
-};
-
-exports.getPlacement = getPlacement;
-
-const getIconPlacement = (placement, offset) => {
-  const placements = {
-    top: {
-      top: 'auto',
-      right: 'auto',
-      left: '50%',
-      bottom: '0px',
-      transform: 'translate(-50%, 100%) rotate(45deg)'
-    },
-    topStart: {
-      top: 'auto',
-      right: 'auto',
-      left: '8%',
-      bottom: '0px',
-      transform: 'translate(8%, 100%) rotate(45deg)'
-    },
-    topEnd: {
-      top: 'auto',
-      right: '8%',
-      left: 'auto',
-      bottom: '0px',
-      transform: 'translate(8%, 100%) rotate(45deg)'
-    },
-    bottom: {
-      top: `0px`,
-      right: 'auto',
-      left: '50%',
-      bottom: 'auto',
-      transform: 'translate(-50%, -100%) rotate(225deg)'
-    },
-    bottomStart: {
-      top: `0px`,
-      right: 'auto',
-      left: '8%',
-      bottom: 'auto',
-      transform: 'translate(8%, -100%) rotate(225deg)'
-    },
-    bottomEnd: {
-      top: `0px`,
-      right: '8%',
-      left: 'auto',
-      bottom: 'auto',
-      transform: 'translate(8%, -100%) rotate(225deg)'
-    },
-    left: {
-      top: '50%',
-      right: `-${offset - 1}px`,
-      left: 'auto',
-      bottom: 'auto',
-      transform: 'translate(100%, -50%) rotate(-45deg)'
-    },
-    leftStart: {
-      top: 'calc(15% + 1px)',
-      right: `-${offset - 1}px`,
-      left: 'auto',
-      bottom: 'auto',
-      transform: 'translate(100%, 0) rotate(-45deg)'
-    },
-    leftEnd: {
-      top: 'auto',
-      right: `-${offset - 1}px`,
-      left: 'auto',
-      bottom: 'calc(15% + 1px)',
-      transform: 'translate(100%, 0) rotate(-45deg)'
-    },
-    right: {
-      top: '50%',
-      right: 'auto',
-      left: `-${offset - 1}px`,
-      bottom: 'auto',
-      transform: 'translate(-100%, -50%) rotate(135deg)'
-    },
-    rightStart: {
-      top: 'calc(15% + 1px)',
-      right: 'auto',
-      left: `-${offset - 1}px`,
-      bottom: 'auto',
-      transform: 'translate(-100%, 0) rotate(135deg)'
-    },
-    rightEnd: {
-      top: 'auto',
-      right: 'auto',
-      left: `-${offset - 1}px`,
-      bottom: 'calc(15% + 1px)',
-      transform: 'translate(-100%, 0) rotate(135deg)'
-    }
-  };
-  return placements[placement] || placements.top;
-};
-
-exports.getIconPlacement = getIconPlacement;
+const t={top:-1e3,left:-1e3,right:-1e3,bottom:-1e3,width:0,height:0};export const getRect=o=>{if(!o||!o.current)return t;const e=o.current.getBoundingClientRect();return{...e,width:e.width||e.right-e.left,height:e.height||e.bottom-e.top,top:e.top+document.documentElement.scrollTop,bottom:e.bottom+document.documentElement.scrollTop,left:e.left+document.documentElement.scrollLeft,right:e.right+document.documentElement.scrollLeft}};export const defaultTooltipPlacement={top:"-1000px",left:"-1000px",transform:"none"};export const getPlacement=(t,o,e)=>{const r={top:{top:o.top-e+"px",left:`${o.left+o.width/2}px`,transform:"translate(-50%, -100%)"},topStart:{top:o.top-e+"px",left:`${o.left}px`,transform:"translate(0, -100%)"},topEnd:{top:o.top-e+"px",left:`${o.left+o.width}px`,transform:"translate(-100%, -100%)"},bottom:{top:`${o.bottom+e}px`,left:`${o.left+o.width/2}px`,transform:"translate(-50%, 0)"},bottomStart:{top:`${o.bottom+e}px`,left:`${o.left}px`,transform:"translate(0, 0)"},bottomEnd:{top:`${o.bottom+e}px`,left:`${o.left+o.width}px`,transform:"translate(-100%, 0)"},left:{top:`${o.top+o.height/2}px`,left:o.left-e+"px",transform:"translate(-100%, -50%)"},leftStart:{top:`${o.top}px`,left:o.left-e+"px",transform:"translate(-100%, 0)"},leftEnd:{top:`${o.top+o.height}px`,left:o.left-e+"px",transform:"translate(-100%, -100%)"},right:{top:`${o.top+o.height/2}px`,left:`${o.right+e}px`,transform:"translate(0, -50%)"},rightStart:{top:`${o.top}px`,left:`${o.right+e}px`,transform:"translate(0, 0)"},rightEnd:{top:`${o.top+o.height}px`,left:`${o.right+e}px`,transform:"translate(0, -100%)"}};return r[t]||r.top};export const getIconPlacement=(t,o)=>{const e={top:{top:"auto",right:"auto",left:"50%",bottom:"0px",transform:"translate(-50%, 100%) rotate(45deg)"},topStart:{top:"auto",right:"auto",left:"8%",bottom:"0px",transform:"translate(8%, 100%) rotate(45deg)"},topEnd:{top:"auto",right:"8%",left:"auto",bottom:"0px",transform:"translate(8%, 100%) rotate(45deg)"},bottom:{top:"0px",right:"auto",left:"50%",bottom:"auto",transform:"translate(-50%, -100%) rotate(225deg)"},bottomStart:{top:"0px",right:"auto",left:"8%",bottom:"auto",transform:"translate(8%, -100%) rotate(225deg)"},bottomEnd:{top:"0px",right:"8%",left:"auto",bottom:"auto",transform:"translate(8%, -100%) rotate(225deg)"},left:{top:"50%",right:`-${o-1}px`,left:"auto",bottom:"auto",transform:"translate(100%, -50%) rotate(-45deg)"},leftStart:{top:"calc(15% + 1px)",right:`-${o-1}px`,left:"auto",bottom:"auto",transform:"translate(100%, 0) rotate(-45deg)"},leftEnd:{top:"auto",right:`-${o-1}px`,left:"auto",bottom:"calc(15% + 1px)",transform:"translate(100%, 0) rotate(-45deg)"},right:{top:"50%",right:"auto",left:`-${o-1}px`,bottom:"auto",transform:"translate(-100%, -50%) rotate(135deg)"},rightStart:{top:"calc(15% + 1px)",right:"auto",left:`-${o-1}px`,bottom:"auto",transform:"translate(-100%, 0) rotate(135deg)"},rightEnd:{top:"auto",right:"auto",left:`-${o-1}px`,bottom:"calc(15% + 1px)",transform:"translate(-100%, 0) rotate(135deg)"}};return e[t]||e.top};

package/esm/tooltip/tooltip-content.js

@@ -1,135 +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 _useResize = _interopRequireDefault(require("../use-resize"));
-
-var _cssTransition = _interopRequireDefault(require("../utils/css-transition"));
-
-var _useClickAnywhere = _interopRequireDefault(require("../use-click-anywhere"));
-
-var _placement = require("./placement");
-
-var _clsx = _interopRequireDefault(require("../utils/clsx"));
-
-var _tooltip = require("./tooltip.styles");
-
-var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
-
-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 = {
-  placement: 'top',
-  offset: 12,
-  className: ''
-};
-const preClass = 'nextui-tooltip';
-
-const TooltipContent = ({
-  children,
-  parent,
-  visible,
-  offset,
-  placement,
-  rounded,
-  animated,
-  className,
-  hideArrow,
-  css,
-  ...props
-}) => {
-  const el = (0, _usePortal.default)('tooltip');
-  const selfRef = (0, _react.useRef)(null);
-  const [rect, setRect] = (0, _react.useState)(_placement.defaultTooltipPlacement);
-  if (!parent) return null;
-
-  const updateRect = () => {
-    const pos = (0, _placement.getPlacement)(placement, (0, _placement.getRect)(parent), offset);
-    setRect(pos);
-  };
-
-  const {
-    transform,
-    top,
-    left,
-    right,
-    bottom
-  } = (0, _react.useMemo)(() => (0, _placement.getIconPlacement)(placement, 5), [placement]);
-  (0, _useResize.default)(updateRect);
-  (0, _useClickAnywhere.default)(() => updateRect());
-  (0, _react.useEffect)(() => {
-    updateRect();
-  }, [visible]);
-
-  const preventHandler = event => {
-    event.stopPropagation();
-    event.nativeEvent.stopImmediatePropagation();
-  };
-
-  const getState = (0, _react.useMemo)(() => {
-    return visible ? 'open' : 'closed';
-  }, [visible]);
-  if (!el) return null;
-  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_cssTransition.default, {
-    name: `${preClass}-wrapper`,
-    visible: visible,
-    enterTime: 20,
-    leaveTime: 20,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.StyledTooltipContent, {
-      className: (0, _clsx.default)(`${preClass}-content`, `${preClass}--${getState}`, className),
-      "data-state": getState,
-      ref: selfRef,
-      onClick: preventHandler,
-      animated: animated,
-      css: {
-        left: rect.left,
-        top: `calc(${rect.top} + 6px)`,
-        transform: rect.transform,
-        [`&.${preClass}-wrapper-enter-active`]: {
-          opacity: 1,
-          top: rect.top
-        },
-        ...css
-      },
-      ...props,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_tooltip.StyledTooltip, {
-        role: "tooltip",
-        "data-state": getState,
-        hideArrow: hideArrow,
-        className: (0, _clsx.default)(preClass, {
-          [`${preClass}--with-arrow`]: !hideArrow
-        }),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.StyledTooltipArrow, {
-          className: `${preClass}-arrow`,
-          css: {
-            left,
-            top,
-            right,
-            bottom,
-            transform
-          }
-        }), children]
-      })
-    })
-  }), el);
-};
-
-TooltipContent.toString = () => '.nextui-tooltip-content';
-
-var _default = (0, _withDefaults.default)(TooltipContent, defaultProps);
-
-exports.default = _default;
-module.exports = exports.default;
+import t,{useEffect as o,useMemo as e,useRef as r,useState as i}from"react";import{createPortal as s}from"react-dom";import a from"../use-portal";import m from"../use-resize";import n from"../utils/css-transition";import l from"../use-click-anywhere";import{getRect as p,getPlacement as c,defaultTooltipPlacement as f,getIconPlacement as u}from"./placement";import d from"../utils/clsx";import{StyledTooltipContent as h,StyledTooltip as w,StyledTooltipArrow as x}from"./tooltip.styles";import $ from"../utils/with-defaults";import{jsx as v}from"react/jsx-runtime";import{jsxs as g}from"react/jsx-runtime";const N="nextui-tooltip",b=({children:t,parent:$,visible:b,offset:j,placement:y,rounded:k,animated:A,className:P,hideArrow:T,css:z,...C})=>{const E=a("tooltip"),I=r(null),[S,q]=i(f);if(!$)return null;const B=()=>{const t=c(y,p($),j);q(t)},{transform:D,top:F,left:G,right:H,bottom:J}=e((()=>u(y,5)),[y]);m(B),l((()=>B())),o((()=>{B()}),[b]);const K=e((()=>b?"open":"closed"),[b]);return E?s(v(n,{name:`${N}-wrapper`,visible:b,enterTime:20,leaveTime:20,children:v(h,{className:d(`${N}-content`,`${N}--${K}`,P),"data-state":K,ref:I,onClick:t=>{t.stopPropagation(),t.nativeEvent.stopImmediatePropagation()},animated:A,css:{left:S.left,top:`calc(${S.top} + 6px)`,transform:S.transform,[`&.${N}-wrapper-enter-active`]:{opacity:1,top:S.top},...z},...C,children:g(w,{role:"tooltip","data-state":K,hideArrow:T,className:d(N,{[`${N}--with-arrow`]:!T}),children:[v(x,{className:`${N}-arrow`,css:{left:G,top:F,right:H,bottom:J,transform:D}}),t]})})}),E):null};b.toString=()=>".nextui-tooltip-content";export default $(b,{placement:"top",offset:12,className:""});