@pedidopago/ui 1.5.1 → 1.5.3

package/dist/components/Toast/styles.js

@@ -19,7 +19,7 @@ exports.StyledToastContainerOverlay = StyledToastContainerOverlay;
 
 var StyledToastManagerOverlay = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: fixed;\n  pointer-events: none;\n  width: 100%;\n  height: 100%;\n  z-index: ", ";\n  top: 0;\n  left: 0;\n\n  & > div {\n    ", "\n\n    ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
-  return theme.zIndex.level24;
+  return theme.zIndex.level48;
 }, function (props) {
   return props.position === 'top' && "\n    top: 0;\n    left: 50%;\n    transform: translateX(-50%);\n  ";
 }, function (props) {

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,27 +1,27 @@
-import { ReactNode } from 'react';
-import { IconName } from '../Icon/types';
-export declare type IToastConfig = {
-    title: string;
-    content: ReactNode;
-    position?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right';
-    type?: 'default' | 'success' | 'warning' | 'error' | 'critical';
-    duration?: number;
-    icon?: IconName;
-    onClose?: (id: string) => void;
-};
-export declare type IToastList = {
-    id: string;
-    config: Required<Omit<IToastConfig, 'onClose'>> & {
-        onClose?: (id: string) => void;
-    };
-};
-export declare type Toast = IToastConfig & {
-    toastId: string;
-    close: (id: string) => void;
-};
-export declare type ToastProviderProps = {
-    add: (options: IToastConfig) => void;
-    remove: (id: string) => void;
-    toasts: IToastList[];
-};
+import { ReactNode } from 'react';
+import { IconName } from '../Icon/types';
+export declare type IToastConfig = {
+    title: string;
+    content: ReactNode;
+    position?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right';
+    type?: 'default' | 'success' | 'warning' | 'error' | 'critical';
+    duration?: number;
+    icon?: IconName;
+    onClose?: (id: string) => void;
+};
+export declare type IToastList = {
+    id: string;
+    config: Required<Omit<IToastConfig, 'onClose'>> & {
+        onClose?: (id: string) => void;
+    };
+};
+export declare type Toast = IToastConfig & {
+    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/components/TooltipLabel.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { TooltipLabelProps } from '../types';
-export declare function TooltipLabel({ tooltipPositions, handleRepositionTooltip, animationDuration, ...rest }: TooltipLabelProps): JSX.Element;
+/// <reference types="react" />
+import { TooltipLabelProps } from '../types';
+export declare function TooltipLabel({ tooltipPositions, handleRepositionTooltip, animationDuration, setShowTooltip, showLabelModal, setShowLabelModal, maxWidth, ...rest }: TooltipLabelProps): JSX.Element;
 //# sourceMappingURL=TooltipLabel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TooltipLabel.d.ts","sourceRoot":"","sources":["../../../../src/components/Tooltip/components/TooltipLabel.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,wBAAgB,YAAY,CAAC,EAC3B,gBAAgB,EAChB,uBAAuB,EACvB,iBAAuB,EACvB,GAAG,IAAI,EACR,EAAE,iBAAiB,eAgCnB"}
+{"version":3,"file":"TooltipLabel.d.ts","sourceRoot":"","sources":["../../../../src/components/Tooltip/components/TooltipLabel.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,wBAAgB,YAAY,CAAC,EAC3B,gBAAgB,EAChB,uBAAuB,EACvB,iBAAuB,EACvB,cAAc,EACd,cAAc,EACd,iBAAiB,EACjB,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,iBAAiB,eAyDnB"}

package/dist/components/Tooltip/components/TooltipLabel.js

@@ -7,11 +7,17 @@ exports.TooltipLabel = TooltipLabel;
 
 var _react = require("react");
 
+var _Flex = _interopRequireDefault(require("src/components/Flex"));
+
+var _Typography = _interopRequireDefault(require("src/components/Typography"));
+
 var _styles = require("../styles");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _excluded = ["tooltipPositions", "handleRepositionTooltip", "animationDuration"];
+var _excluded = ["tooltipPositions", "handleRepositionTooltip", "animationDuration", "setShowTooltip", "showLabelModal", "setShowLabelModal", "maxWidth"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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; }
 
@@ -28,6 +34,10 @@ function TooltipLabel(_ref) {
       handleRepositionTooltip = _ref.handleRepositionTooltip,
       _ref$animationDuratio = _ref.animationDuration,
       animationDuration = _ref$animationDuratio === void 0 ? 0.2 : _ref$animationDuratio,
+      setShowTooltip = _ref.setShowTooltip,
+      showLabelModal = _ref.showLabelModal,
+      setShowLabelModal = _ref.setShowLabelModal,
+      maxWidth = _ref.maxWidth,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var labelRef = (0, _react.useRef)(null);
@@ -52,8 +62,31 @@ function TooltipLabel(_ref) {
     transition: {
       duration: animationDuration
     },
-    style: tooltipPositions
+    style: tooltipPositions,
+    onMouseEnter: function onMouseEnter() {
+      setShowTooltip(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      setShowTooltip(false);
+    },
+    maxWidth: maxWidth
   }, rest), {}, {
-    children: rest.label
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Flex.default, {
+      direction: "column",
+      spacing: "0",
+      children: ! /*#__PURE__*/(0, _react.isValidElement)(rest.label) && String(rest === null || rest === void 0 ? void 0 : rest.label).length > 90 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+        children: [rest.label && String(rest.label).slice(0, 90), "...", /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ViewMoreButton, {
+          variant: "ghost",
+          onClick: function onClick() {
+            setShowTooltip(false);
+            setShowLabelModal(true);
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+            fontSize: "xxs",
+            children: "Ver mais"
+          })
+        })]
+      }) : rest.label
+    })
   }));
 }

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

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { TooltipProps } from './types';
-declare const Tooltip: FC<TooltipProps>;
-export default Tooltip;
+import { FC } from 'react';
+import { TooltipProps } from './types';
+declare const Tooltip: FC<TooltipProps>;
+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":"AACA,OAAO,EAAE,EAAE,EAA+B,MAAM,OAAO,CAAC;AAIxD,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAoG7B,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;AAWxD,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAuI7B,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/Tooltip/index.js

@@ -5,9 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _react = require("react");
+
 var _framerMotion = require("framer-motion");
 
-var _react = require("react");
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _Flex = _interopRequireDefault(require("../Flex"));
+
+var _Modal = require("../Modal");
 
 var _ReactPortal = require("../ReactPortal");
 
@@ -17,7 +23,9 @@ var _styles = require("./styles");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _excluded = ["position", "offset"];
+var _excluded = ["position", "offset", "maxWidth"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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; }
 
@@ -46,6 +54,8 @@ var Tooltip = function Tooltip(_ref) {
       position = _ref$position === void 0 ? 'bottom' : _ref$position,
       _ref$offset = _ref.offset,
       offset = _ref$offset === void 0 ? 10 : _ref$offset,
+      _ref$maxWidth = _ref.maxWidth,
+      maxWidth = _ref$maxWidth === void 0 ? 250 : _ref$maxWidth,
       props = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = (0, _react.useState)(false),
@@ -53,16 +63,22 @@ var Tooltip = function Tooltip(_ref) {
       showTooltip = _useState2[0],
       setShowTooltip = _useState2[1];
 
-  var _useState3 = (0, _react.useState)({
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      showLabelModal = _useState4[0],
+      setShowLabelModal = _useState4[1];
+
+  var _useState5 = (0, _react.useState)({
     top: 0,
     left: 0,
     transform: ''
   }),
-      _useState4 = _slicedToArray(_useState3, 2),
-      tooltipPositions = _useState4[0],
-      setTooltipPositions = _useState4[1];
+      _useState6 = _slicedToArray(_useState5, 2),
+      tooltipPositions = _useState6[0],
+      setTooltipPositions = _useState6[1];
 
   var tooltipContentRef = (0, _react.useRef)(null);
+  var isHidden = !showLabelModal;
   (0, _react.useEffect)(function () {
     window.addEventListener('scroll', handleScroll);
     return function () {
@@ -132,8 +148,8 @@ var Tooltip = function Tooltip(_ref) {
     }
   }
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.TooltipWrapper, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.TooltipWrapper, {
       ref: tooltipContentRef,
       onMouseEnter: function onMouseEnter() {
         refreshTooltipPosition(position);
@@ -142,16 +158,45 @@ var Tooltip = function Tooltip(_ref) {
       onMouseLeave: function onMouseLeave() {
         setShowTooltip(false);
       },
-      children: props.children
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReactPortal.ReactPortal, {
-      wrapperId: "tooltip-portal",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_framerMotion.AnimatePresence, {
-        children: showTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipLabel.TooltipLabel, _objectSpread({
-          tooltipPositions: tooltipPositions,
-          handleRepositionTooltip: handleRepositionTooltip
-        }, props))
-      })
-    })]
+      children: [props.children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReactPortal.ReactPortal, {
+        wrapperId: "tooltip-portal",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_framerMotion.AnimatePresence, {
+          exitBeforeEnter: true,
+          children: showTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipLabel.TooltipLabel, _objectSpread({
+            tooltipPositions: tooltipPositions,
+            handleRepositionTooltip: handleRepositionTooltip,
+            showLabelModal: showLabelModal,
+            setShowLabelModal: setShowLabelModal,
+            setShowTooltip: setShowTooltip,
+            maxWidth: maxWidth
+          }, props))
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, {
+        open: showLabelModal,
+        "aria-hidden": isHidden,
+        maxWidth: "465px",
+        onClose: function onClose() {
+          setShowLabelModal(false);
+          setShowTooltip(false);
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Flex.default, {
+          direction: "column",
+          spacing: "6",
+          style: {
+            margin: '2em 1.5em'
+          },
+          children: [props.label, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+            variant: "outline",
+            textColor: "tertiary.focus",
+            onClick: function onClick() {
+              setShowLabelModal(false);
+              setShowTooltip(false);
+            },
+            children: "Fechar"
+          })]
+        })
+      })]
+    })
   });
 };