@pedidopago/ui 1.1.5 → 1.2.2

package/dist/components/Toast/styles.d.ts

@@ -1,23 +1,23 @@
-/// <reference types="react" />
-import { GenericStyledProps } from '../../@types';
-export declare const StyledToastContainerOverlay: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledToastManagerOverlay: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericStyledProps & {
-    position: 'top' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'bottom';
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledToastManagerInner: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericStyledProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledToastComponent: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    toastPos?: "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/// <reference types="react" />
+import { GenericStyledProps } from '../../@types';
+export declare const StyledToastContainerOverlay: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledToastManagerOverlay: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericStyledProps & {
+    position: 'top' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'bottom';
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledToastManagerInner: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericStyledProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledToastComponent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    toastPos?: "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

package/dist/components/Toast/toast.test.d.ts

@@ -1,2 +1,2 @@
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom';
 //# sourceMappingURL=toast.test.d.ts.map

package/dist/components/Toast/types.d.ts

@@ -1,34 +1,34 @@
-export declare type IToastConfig = {
-    title: string;
-    message: string;
-    position?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right';
-    type?: 'default' | 'success' | 'warning' | 'error' | 'critical';
-    buttonTitle?: string;
-    onButtonClick?: () => void;
-    duration?: number;
-    onClose?: (id: string) => void;
-};
-export declare type IToastConfigOnList = {
-    title: string;
-    message: string;
-    position: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right';
-    type: 'default' | 'success' | 'warning' | 'error' | 'critical';
-    buttonTitle?: string;
-    onButtonClick?: () => void;
-    duration: number;
-    onClose?: (id: string) => void;
-};
-export declare type IToastList = {
-    id: string;
-    config: IToastConfigOnList;
-};
-export declare type Toast = IToastConfigOnList & {
-    toastId: string;
-    close: (id: string) => void;
-};
-export declare type ToastProviderProps = {
-    add: (options: IToastConfig) => void;
-    remove: (id: string) => void;
-    toasts: IToastList[];
-};
+export declare type IToastConfig = {
+    title: string;
+    message: string;
+    position?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right';
+    type?: 'default' | 'success' | 'warning' | 'error' | 'critical';
+    buttonTitle?: string;
+    onButtonClick?: () => void;
+    duration?: number;
+    onClose?: (id: string) => void;
+};
+export declare type IToastConfigOnList = {
+    title: string;
+    message: string;
+    position: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right';
+    type: 'default' | 'success' | 'warning' | 'error' | 'critical';
+    buttonTitle?: string;
+    onButtonClick?: () => void;
+    duration: number;
+    onClose?: (id: string) => void;
+};
+export declare type IToastList = {
+    id: string;
+    config: IToastConfigOnList;
+};
+export declare type Toast = IToastConfigOnList & {
+    toastId: string;
+    close: (id: string) => void;
+};
+export declare type ToastProviderProps = {
+    add: (options: IToastConfig) => void;
+    remove: (id: string) => void;
+    toasts: IToastList[];
+};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Tooltip/componenteTeste.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import { ExtendThemeProps } from 'src';
-export declare function TesteComponent({ theme }: {
-    theme: ExtendThemeProps;
-}): JSX.Element;
-export declare function ComponentTeste(): JSX.Element;
+/// <reference types="react" />
+import { ExtendThemeProps } from 'src';
+export declare function TesteComponent({ theme }: {
+    theme: ExtendThemeProps;
+}): JSX.Element;
+export declare function ComponentTeste(): JSX.Element;
 //# sourceMappingURL=componenteTeste.d.ts.map

package/dist/components/Tooltip/componenteTeste.js

@@ -31,7 +31,7 @@ function TesteComponent(_ref) {
       children: "\xC9 a raz\xE3o entre o n\xFAmero de visitantes de uma loja e a quantidade de compras, efetivamente separadas por."
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-        children: "Convers\xE3o no cr\xE9tido"
+        children: "Convers\xE3o no cr\xE9dito"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
         children: "Convers\xE3o no pix"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
@@ -46,7 +46,7 @@ function TesteComponent(_ref) {
       children: "Trata-se apenas das porcentagens entre:"
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-        children: "Convers\xE3o no cr\xE9tido"
+        children: "Convers\xE3o no cr\xE9dito"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
         children: "Convers\xE3o no pix"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {

package/dist/components/Tooltip/index.d.ts

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { IInputProps } from './types';
-declare const Tooltip: FC<IInputProps>;
-export default Tooltip;
+import { FC } from 'react';
+import { IInputProps } from './types';
+declare const Tooltip: FC<IInputProps>;
+export default Tooltip;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Tooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAetC,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,WAAW,CAyE5B,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA+B,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAOtC,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,WAAW,CAsF5B,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/Tooltip/index.js

@@ -13,15 +13,15 @@ var _styles = require("./styles");
 
 var _componenteTeste = require("./componenteTeste");
 
-var _framerMotion = require("framer-motion");
+var _jsxRuntime = require("react/jsx-runtime");
 
-var _Icon = _interopRequireDefault(require("../Icon"));
+var _excluded = ["position", "maxWidth", "label", "labelColor", "animationDuration", "backgroundColor", "width", "children"];
 
-var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-var _excluded = ["position", "heightToExpand", "maxWidth", "label", "labelColor", "expandable", "hasArrow", "isOpen", "isExpanded", "animationDuration", "backgroundColor", "width", "children"];
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -42,23 +42,13 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var Tooltip = function Tooltip(_ref) {
   var _ref$position = _ref.position,
       position = _ref$position === void 0 ? 'top' : _ref$position,
-      _ref$heightToExpand = _ref.heightToExpand,
-      heightToExpand = _ref$heightToExpand === void 0 ? '200px' : _ref$heightToExpand,
       _ref$maxWidth = _ref.maxWidth,
       maxWidth = _ref$maxWidth === void 0 ? '280px' : _ref$maxWidth,
       _ref$label = _ref.label,
       label = _ref$label === void 0 ? 'Testin' : _ref$label,
       labelColor = _ref.labelColor,
-      _ref$expandable = _ref.expandable,
-      expandable = _ref$expandable === void 0 ? false : _ref$expandable,
-      _ref$hasArrow = _ref.hasArrow,
-      hasArrow = _ref$hasArrow === void 0 ? false : _ref$hasArrow,
-      _ref$isOpen = _ref.isOpen,
-      isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
-      _ref$isExpanded = _ref.isExpanded,
-      isExpanded = _ref$isExpanded === void 0 ? false : _ref$isExpanded,
       _ref$animationDuratio = _ref.animationDuration,
-      animationDuration = _ref$animationDuratio === void 0 ? 1 : _ref$animationDuratio,
+      animationDuration = _ref$animationDuratio === void 0 ? 0.2 : _ref$animationDuratio,
       backgroundColor = _ref.backgroundColor,
       width = _ref.width,
       children = _ref.children,
@@ -72,13 +62,40 @@ var Tooltip = function Tooltip(_ref) {
       showTooltip = _useState2[0],
       setShowTooltip = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      expanded = _useState4[0],
-      setExpanded = _useState4[1];
-
+  var motionDiv = (0, _react.useRef)(null);
+  var componentDiv = (0, _react.useRef)(null);
+
+  function positionTooltip() {
+    var tooltip = motionDiv.current;
+
+    var tooltipInitialValues = _objectSpread({}, tooltip);
+
+    var container = componentDiv.current;
+
+    if (tooltip !== null && container !== null) {
+      var tooltipDimensions = tooltip.getBoundingClientRect();
+      tooltip.style = _objectSpread({}, tooltipInitialValues.style);
+
+      if (window.innerWidth < 500 && (tooltipDimensions.x < 0 || tooltipDimensions.x > window.innerWidth)) {
+        tooltip.style.top = container.offsetHeight + 5 + 'px';
+        tooltip.style.left = '0px';
+        tooltip.style.right = '0px';
+      } else if (tooltipDimensions.x < 0) {
+        tooltip.style.left = container.offsetWidth + 5 + 'px';
+        tooltip.style.width = 'max-content';
+        tooltip.style.height = 'max-content';
+      } else if (tooltipDimensions.y < 0 || tooltipDimensions.x > window.innerWidth) {
+        tooltip.style.height = 'max-content';
+        tooltip.style.top = container.offsetHeight + 5 + 'px';
+        tooltip.style.left = container.offsetWidth / 2 - tooltip.offsetWidth / 2 + 'px';
+      }
+    }
+  }
+
+  (0, _react.useEffect)(function () {
+    positionTooltip();
+  }, [showTooltip]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.TooltipComponentWrapper, {
-    hasArrow: hasArrow,
     position: position,
     backgroundColor: backgroundColor,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.TooltipTarget, {
@@ -89,48 +106,34 @@ var Tooltip = function Tooltip(_ref) {
         return setShowTooltip(false);
       },
       "data-testid": "tooltip-target",
+      ref: componentDiv,
       children: children || /*#__PURE__*/(0, _jsxRuntime.jsx)(_componenteTeste.ComponentTeste, {})
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_framerMotion.AnimatePresence, {
-      children: (showTooltip || isExpanded || expanded || isOpen) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.MotionDiv, {
-        initial: {
-          height: expandable ? expanded ? 'max-content' : heightToExpand : '',
-          opacity: 0
-        },
-        animate: {
-          height: expandable ? expanded || isExpanded ? 'max-content' : heightToExpand : '',
-          opacity: 1
-        },
-        exit: {
-          opacity: 0
-        },
-        transition: {
-          duration: animationDuration
-        },
-        onMouseEnter: function onMouseEnter() {
-          return setExpanded(true);
-        },
-        onMouseLeave: function onMouseLeave() {
-          return setExpanded(false);
-        },
-        className: "TooltipArea",
-        "data-testid": "tooltip-area",
-        position: position,
-        backgroundColor: backgroundColor,
-        isLabelString: typeof label === 'string' && label.length > 0,
-        width: width,
-        maxWidth: maxWidth,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.TooltipWrapper, {
-          labelColor: labelColor,
-          children: label || /*#__PURE__*/(0, _jsxRuntime.jsx)(_componenteTeste.TesteComponent, {
-            theme: theme
-          })
-        }), expandable && !isExpanded && !expanded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.TooltipDots, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-            name: "chevron-down",
-            size: "40px",
-            color: "neutral.white"
-          })
-        })]
+    }), showTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.MotionDiv, {
+      initial: {
+        opacity: 0
+      },
+      animate: {
+        opacity: 1
+      },
+      exit: {
+        opacity: 0
+      },
+      transition: {
+        duration: animationDuration
+      },
+      className: "TooltipArea",
+      "data-testid": "tooltip-area",
+      ref: motionDiv,
+      position: position,
+      backgroundColor: backgroundColor,
+      isLabelString: typeof label === 'string' && label.length > 0,
+      width: width,
+      maxWidth: maxWidth,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.TooltipWrapper, {
+        labelColor: labelColor,
+        children: label || /*#__PURE__*/(0, _jsxRuntime.jsx)(_componenteTeste.TesteComponent, {
+          theme: theme
+        })
       })
     })]
   });