@nextui-org/react 1.0.1-alpha.7 → 1.0.2-alpha.2

package/esm/tooltip/placement.js

@@ -0,0 +1,193 @@
+"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;

package/esm/tooltip/tooltip-content.d.ts

@@ -0,0 +1,27 @@
+import React, { MutableRefObject } from 'react';
+import { CSS } from '../theme/stitches.config';
+import { Placement } from '../utils/prop-types';
+import { TooltipContentVariantsProps } from './tooltip.styles';
+interface Props {
+    placement?: Placement;
+    visible?: boolean;
+    offset?: number;
+    parent?: MutableRefObject<HTMLElement | null> | undefined;
+    animated?: boolean;
+    rounded?: boolean;
+    hideArrow?: boolean;
+    className?: string;
+    css?: CSS;
+}
+declare const defaultProps: {
+    placement: "top" | "topStart" | "topEnd" | "left" | "leftStart" | "leftEnd" | "bottom" | "bottomStart" | "bottomEnd" | "right" | "rightStart" | "rightEnd";
+    offset: number;
+    className: string;
+};
+export declare type TooltipContentProps = Props & typeof defaultProps & TooltipContentVariantsProps;
+declare const _default: React.ComponentType<Partial<{
+    placement: "top" | "topStart" | "topEnd" | "left" | "leftStart" | "leftEnd" | "bottom" | "bottomStart" | "bottomEnd" | "right" | "rightStart" | "rightEnd";
+    offset: number;
+    className: string;
+}> & Omit<React.PropsWithChildren<TooltipContentProps>, "offset" | "className" | "placement">>;
+export default _default;

package/esm/tooltip/tooltip-content.js

@@ -0,0 +1,135 @@
+"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;

package/esm/tooltip/tooltip.d.ts

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Placement } from '../utils/prop-types';
+import { CSS } from '../theme/stitches.config';
+import { TriggerTypes } from '../utils/prop-types';
+import { TooltipContentProps } from './tooltip-content';
+import { TooltipContentVariantsProps } from './tooltip.styles';
+export declare type TooltipOnVisibleChange = (visible: boolean) => void;
+interface Props {
+    content: string | React.ReactNode;
+    placement?: Placement;
+    visible?: boolean;
+    shadow?: boolean;
+    rounded?: boolean;
+    initialVisible?: boolean;
+    animated?: boolean;
+    hideArrow?: boolean;
+    trigger?: TriggerTypes;
+    enterDelay?: number;
+    leaveDelay?: number;
+    offset?: number;
+    className?: string;
+    portalClassName?: string;
+    onClick?: () => void;
+    onVisibleChange?: TooltipOnVisibleChange;
+    as?: keyof JSX.IntrinsicElements;
+    triggerCss?: CSS;
+}
+declare const defaultProps: {
+    initialVisible: boolean;
+    hideArrow: boolean;
+    animated: boolean;
+    shadow: boolean;
+    rounded: boolean;
+    trigger: "hover" | "click";
+    enterDelay: number;
+    leaveDelay: number;
+    className: string;
+    portalClassName: string;
+    onVisibleChange: TooltipOnVisibleChange;
+};
+declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export declare type TooltipProps = Props & typeof defaultProps & NativeAttrs & Pick<TooltipContentVariantsProps, 'color' | 'contentColor'> & Pick<TooltipContentProps, 'css'>;
+declare const _default: React.ComponentType<Partial<{
+    initialVisible: boolean;
+    hideArrow: boolean;
+    animated: boolean;
+    shadow: boolean;
+    rounded: boolean;
+    trigger: "hover" | "click";
+    enterDelay: number;
+    leaveDelay: number;
+    className: string;
+    portalClassName: string;
+    onVisibleChange: TooltipOnVisibleChange;
+}> & Omit<React.PropsWithChildren<TooltipProps>, "rounded" | "className" | "animated" | "shadow" | "hideArrow" | "initialVisible" | "trigger" | "enterDelay" | "leaveDelay" | "portalClassName" | "onVisibleChange">>;
+export default _default;

package/esm/tooltip/tooltip.js

@@ -0,0 +1,141 @@
+"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 _tooltipContent = _interopRequireDefault(require("./tooltip-content"));
+
+var _useClickAway = _interopRequireDefault(require("../use-click-away"));
+
+var _tooltip = require("./tooltip.styles");
+
+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 = {
+  initialVisible: false,
+  hideArrow: false,
+  animated: true,
+  shadow: true,
+  rounded: false,
+  trigger: 'hover',
+  enterDelay: 0,
+  leaveDelay: 0,
+  className: '',
+  portalClassName: '',
+  onVisibleChange: () => {}
+};
+
+const Tooltip = ({
+  children,
+  initialVisible,
+  content,
+  offset,
+  placement,
+  portalClassName,
+  enterDelay,
+  leaveDelay,
+  trigger,
+  rounded,
+  animated,
+  shadow,
+  className,
+  color,
+  contentColor,
+  onVisibleChange,
+  hideArrow,
+  css,
+  triggerCss,
+  onClick,
+  visible: customVisible,
+  ...props
+}) => {
+  const timer = (0, _react.useRef)();
+  const ref = (0, _react.useRef)(null);
+  const [visible, setVisible] = (0, _react.useState)(initialVisible);
+  const contentProps = {
+    css,
+    animated,
+    visible,
+    shadow,
+    offset,
+    placement,
+    rounded,
+    color,
+    contentColor,
+    hideArrow,
+    parent: ref,
+    className: portalClassName
+  };
+
+  const changeVisible = nextState => {
+    const clear = () => {
+      clearTimeout(timer.current);
+      timer.current = undefined;
+    };
+
+    const handler = nextState => {
+      setVisible(nextState);
+      onVisibleChange(nextState);
+      clear();
+    };
+
+    clear();
+
+    if (nextState) {
+      timer.current = window.setTimeout(() => handler(true), enterDelay);
+      return;
+    }
+
+    timer.current = window.setTimeout(() => handler(false), leaveDelay);
+  };
+
+  const mouseEventHandler = next => {
+    trigger === 'hover' && changeVisible(next);
+  };
+
+  const clickEventHandler = () => {
+    trigger === 'click' && changeVisible(!visible);
+    onClick == null ? void 0 : onClick();
+  };
+
+  (0, _useClickAway.default)(ref, () => trigger === 'click' && changeVisible(false));
+  (0, _react.useEffect)(() => {
+    if (customVisible === undefined) return;
+    changeVisible(customVisible);
+  }, [customVisible]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_tooltip.StyledTooltipTrigger, {
+    ref: ref,
+    role: "button",
+    tabIndex: -1,
+    className: `nextui-tooltip-button ${className}`,
+    onClick: clickEventHandler,
+    onKeyUp: () => mouseEventHandler(true),
+    onMouseEnter: () => mouseEventHandler(true),
+    onMouseLeave: () => mouseEventHandler(false),
+    onFocus: () => mouseEventHandler(true),
+    onBlur: () => mouseEventHandler(false),
+    css: { ...triggerCss
+    },
+    ...props,
+    children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltipContent.default, { ...contentProps,
+      children: content
+    })]
+  });
+};
+
+Tooltip.toString = () => '.nextui-tooltip';
+
+var _default = (0, _withDefaults.default)(Tooltip, defaultProps);
+
+exports.default = _default;
+module.exports = exports.default;