@pedidopago/ui 1.3.21 → 1.3.22

package/README.md

@@ -1,93 +1,93 @@
-<h1 align="center">
-  <img src="https://user-images.githubusercontent.com/75874462/145101826-9244932f-7072-4727-9124-8c26620ad786.png" alt="Logo"/>
-  <br/>
-</h1>
-
-<div align="center">
-  <img src="https://img.shields.io/badge/React-v17.0.2-1DD195?style=for-the-badge&logo=react&link=http://google.com" />
-  <img src="https://img.shields.io/badge/Emotion-v11.3.0-1DD195?style=for-the-badge&logo=styled-components" />
-  <img src="https://img.shields.io/badge/Storybook-v6.3.7-1DD195?style=for-the-badge&logo=storybook" />
-  <img src="https://img.shields.io/badge/React Testing Library-v11.1.0-1DD195?style=for-the-badge&logo=testinglibrary" />
-  <img src="https://img.shields.io/badge/FrameMotion-v4.1.17-1DD195?style=for-the-badge&logo=framer" />
-  <img src="https://img.shields.io/badge/Typescript-v4.3.5-1DD195?style=for-the-badge&logo=typescript" />
-</div>
-
-<p align="center">
-  <a href="#iniciar-">Iniciar&nbsp;</a> | &nbsp;
-  <a href="#estrutura-de-codigo-">Estrutura de codigo&nbsp;</a> | &nbsp;
-  <a href="#roadmap-">Roadmap&nbsp;</a> | &nbsp;
-  <a href="#contribuir-">Contribuir&nbsp;</a> 
-</p>
-
-## Iniciar 🚀
-  
-  ### Requisitos:
-  - [Nodejs](https://github.com/nodejs/node)
-  - [Yarn](https://github.com/yarnpkg/yarn)
-
-  ### Instalação:
-
-  1. Clone o Repositorio
-  
-  ``` bash
-  git clone git@github.com:pedidopago/pedidopago-ui.git 
-  ```
-
-  2. Instalar as dependencias:
-  
-  ```bash 
-  yarn
-  ```
-
-  ### Executar o projeto localmente:
-  
-  Iniciar o projeto com o storybook:
-  
-  ```bash 
-  yarn storybook
-  ```
-
-  Para executar os testes use o script: 
-  
-  ```bash
-  yarn test
-  ```
-
-  > Para mais detalhes dos scripts considere consultar o package.json na raiz do projeto.
-
-  #### 📌 Ira precisar tambem das variaveis de ambiente `CHROMATIC_PROJECT_TOKEN` e `SKIP_PREFLIGHT_CHECK`.
-
-
-## Estrutura de codigo
-
-
-
-> Ao entrar no projeto sempre entre em `packages/pedidopago-ui` para trabalhar/executar os scripts
-
-## Roadmap 🌐
-
-- [ ] Mudar a estrutura de pastas
-
-- [ ] Sessão de novos componentes
-
-- [ ] Atualização de pacotes
-
-- [ ] Incrementação dos testes
-
-- [ ] Melhorias na documentação
-
-- [ ] Adicionar license
-
-## Contribuir 💡
-
-1. Crie uma branch apartir da **`dev`** com o prefixo **`lib`-[número da issue]-[nome da issue]**.
-exemplo:
-```bash
- git checkout -b lib-99-buttom
-```
-2. Desenvolver
-
-3. Criar a pull request
- - Número da issue no inicio da pr.
- - Descritivo com pontos importantes do que foi feito.
- - Print dos tests no terminal e video de apresentação que pode ser feito via [loom](https://www.loom.com/).
+<h1 align="center">
+  <img src="https://user-images.githubusercontent.com/75874462/145101826-9244932f-7072-4727-9124-8c26620ad786.png" alt="Logo"/>
+  <br/>
+</h1>
+
+<div align="center">
+  <img src="https://img.shields.io/badge/React-v17.0.2-1DD195?style=for-the-badge&logo=react&link=http://google.com" />
+  <img src="https://img.shields.io/badge/Emotion-v11.3.0-1DD195?style=for-the-badge&logo=styled-components" />
+  <img src="https://img.shields.io/badge/Storybook-v6.3.7-1DD195?style=for-the-badge&logo=storybook" />
+  <img src="https://img.shields.io/badge/React Testing Library-v11.1.0-1DD195?style=for-the-badge&logo=testinglibrary" />
+  <img src="https://img.shields.io/badge/FrameMotion-v4.1.17-1DD195?style=for-the-badge&logo=framer" />
+  <img src="https://img.shields.io/badge/Typescript-v4.3.5-1DD195?style=for-the-badge&logo=typescript" />
+</div>
+
+<p align="center">
+  <a href="#iniciar-">Iniciar&nbsp;</a> | &nbsp;
+  <a href="#estrutura-de-codigo-">Estrutura de codigo&nbsp;</a> | &nbsp;
+  <a href="#roadmap-">Roadmap&nbsp;</a> | &nbsp;
+  <a href="#contribuir-">Contribuir&nbsp;</a> 
+</p>
+
+## Iniciar 🚀
+  
+  ### Requisitos:
+  - [Nodejs](https://github.com/nodejs/node)
+  - [Yarn](https://github.com/yarnpkg/yarn)
+
+  ### Instalação:
+
+  1. Clone o Repositorio
+  
+  ``` bash
+  git clone git@github.com:pedidopago/pedidopago-ui.git 
+  ```
+
+  2. Instalar as dependencias:
+  
+  ```bash 
+  yarn
+  ```
+
+  ### Executar o projeto localmente:
+  
+  Iniciar o projeto com o storybook:
+  
+  ```bash 
+  yarn storybook
+  ```
+
+  Para executar os testes use o script: 
+  
+  ```bash
+  yarn test
+  ```
+
+  > Para mais detalhes dos scripts considere consultar o package.json na raiz do projeto.
+
+  #### 📌 Ira precisar tambem das variaveis de ambiente `CHROMATIC_PROJECT_TOKEN` e `SKIP_PREFLIGHT_CHECK`.
+
+
+## Estrutura de codigo
+
+
+
+> Ao entrar no projeto sempre entre em `packages/pedidopago-ui` para trabalhar/executar os scripts
+
+## Roadmap 🌐
+
+- [ ] Mudar a estrutura de pastas
+
+- [ ] Sessão de novos componentes
+
+- [ ] Atualização de pacotes
+
+- [ ] Incrementação dos testes
+
+- [ ] Melhorias na documentação
+
+- [ ] Adicionar license
+
+## Contribuir 💡
+
+1. Crie uma branch apartir da **`dev`** com o prefixo **`lib`-[número da issue]-[nome da issue]**.
+exemplo:
+```bash
+ git checkout -b lib-99-buttom
+```
+2. Desenvolver
+
+3. Criar a pull request
+ - Número da issue no inicio da pr.
+ - Descritivo com pontos importantes do que foi feito.
+ - Print dos tests no terminal e video de apresentação que pode ser feito via [loom](https://www.loom.com/).

package/dist/components/DateInput/index.js

@@ -93,7 +93,7 @@ function DateInput(_ref) {
   (0, _react.useEffect)(function () {
     setCurrentValue(value);
   }, [value]);
-  (0, _useDisableBodyScroll.useDisableBodyScroll)(datePickerOpen);
+  (0, _useDisableBodyScroll.useDisableBodyScroll)(datePickerOpen, 'child_element');
 
   function handleRepositionModal() {
     var _containerRef$current2;

package/dist/components/Modal/ModalExample.d.ts

@@ -1,4 +1,8 @@
 /// <reference types="react" />
 import { ModalProps } from './types';
+export declare const SelectOptionsPagination: {
+    label: string;
+    value: string;
+}[];
 export declare function ModalExample(props: ModalProps): JSX.Element;
 //# sourceMappingURL=ModalExample.d.ts.map

package/dist/components/Modal/ModalExample.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalExample.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/ModalExample.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,wBAAgB,YAAY,CAAC,KAAK,EAAE,UAAU,eAoB7C"}
+{"version":3,"file":"ModalExample.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/ModalExample.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,eAAO,MAAM,uBAAuB;;;GAGnC,CAAC;AAEF,wBAAgB,YAAY,CAAC,KAAK,EAAE,UAAU,eA8B7C"}

package/dist/components/Modal/ModalExample.js

@@ -4,14 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ModalExample = ModalExample;
+exports.SelectOptionsPagination = void 0;
 
 var _react = require("react");
 
 var _ = require(".");
 
+var _Flex = _interopRequireDefault(require("../Flex"));
+
 var _Button = _interopRequireDefault(require("../Button"));
 
-var _Flex = _interopRequireDefault(require("../Flex"));
+var _Select = _interopRequireDefault(require("../Select"));
+
+var _Typography = _interopRequireDefault(require("../Typography"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -35,6 +40,15 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+var SelectOptionsPagination = [{
+  label: 'Opcao01',
+  value: '1'
+}, {
+  label: 'Opcao02',
+  value: '2'
+}];
+exports.SelectOptionsPagination = SelectOptionsPagination;
+
 function ModalExample(props) {
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -53,13 +67,21 @@ function ModalExample(props) {
       maxWidth: props.maxWidth || '350px',
       open: props.open || modalOpen,
       onClose: handleModal,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Flex.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Flex.default, {
+        direction: "column",
         justifyContent: "center",
         alignItems: "center",
         style: {
-          height: '350px'
+          height: '350px',
+          padding: '1em'
         },
-        children: "Eu sou um modal :)"
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+          children: ["Eu sou um modal, com um select :", ")"]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, {
+          placeholder: "Selecione uma op\xE7\xE3o",
+          options: SelectOptionsPagination,
+          sizeSelect: "md"
+        })]
       })
     }))]
   });

package/dist/components/Modal/index.js

@@ -58,7 +58,7 @@ var Modal = function Modal(_ref) {
   (0, _useKeyPress.useKeyPress)('Escape', function () {
     return onClose && onClose();
   });
-  (0, _useDisableBodyScroll.useDisableBodyScroll)(open && disableScrollOnOpen);
+  (0, _useDisableBodyScroll.useDisableBodyScroll)(open && disableScrollOnOpen, 'modal');
 
   function getAnchorTranslate() {
     var percentageX = 0;

package/dist/components/Select/components/OptionsSelect/index.js

@@ -76,7 +76,7 @@ var OptionsSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       }
     });
   });
-  (0, _useDisableBodyScroll.useDisableBodyScroll)(open && disableScrollOnOpen);
+  (0, _useDisableBodyScroll.useDisableBodyScroll)(open && disableScrollOnOpen, 'child_element');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.OptionsContainer, {
     ref: optionsContainerRef,
     open: open,

package/dist/components/Toast/contexts/ToastProvider.js

@@ -50,7 +50,7 @@ var ToastProvider = function ToastProvider(_ref) {
       toasts = _useState2[0],
       setToasts = _useState2[1];
 
-  var addToast = function addToast(options) {
+  var addToast = (0, _react.useCallback)(function (options) {
     var toastOptions = {
       config: _objectSpread(_objectSpread({}, options), {}, {
         icon: options.icon || 'info',
@@ -62,8 +62,7 @@ var ToastProvider = function ToastProvider(_ref) {
       id: Math.random().toString(36).substring(2, 9)
     };
     setToasts([].concat(_toConsumableArray(toasts), [toastOptions]));
-  };
-
+  }, []);
   var remoteToast = (0, _react.useCallback)(function (id) {
     setToasts(function (prevState) {
       var _filterToast$0$config, _filterToast$0$config2;

package/dist/shared/hooks/useDisableBodyScroll.d.ts

@@ -1,2 +1,2 @@
-export declare const useDisableBodyScroll: (disable: boolean) => void;
+export declare const useDisableBodyScroll: (disable: boolean, type?: 'modal' | 'child_element') => void;
 //# sourceMappingURL=useDisableBodyScroll.d.ts.map

package/dist/shared/hooks/useDisableBodyScroll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDisableBodyScroll.d.ts","sourceRoot":"","sources":["../../../src/shared/hooks/useDisableBodyScroll.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB,YAAa,OAAO,SAWpD,CAAC"}
+{"version":3,"file":"useDisableBodyScroll.d.ts","sourceRoot":"","sources":["../../../src/shared/hooks/useDisableBodyScroll.tsx"],"names":[],"mappings":"AAaA,eAAO,MAAM,oBAAoB,YACtB,OAAO,SACV,OAAO,GAAG,eAAe,SAwBhC,CAAC"}

package/dist/shared/hooks/useDisableBodyScroll.js

@@ -7,15 +7,42 @@ exports.useDisableBodyScroll = void 0;
 
 var _react = require("react");
 
+function disableBodyOverflow() {
+  var scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
+  document.body.style.paddingRight = "".concat(scrollBarWidth, "px");
+  document.body.style.overflow = 'hidden';
+}
+
+function enableBodyOverflow() {
+  document.body.style.overflow = '';
+  document.body.style.paddingRight = '';
+}
+
 var useDisableBodyScroll = function useDisableBodyScroll(disable) {
+  var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'child_element';
   (0, _react.useEffect)(function () {
-    if (disable) {
-      var scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
-      document.body.style.paddingRight = "".concat(scrollBarWidth, "px");
-      document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.overflow = '';
-      document.body.style.paddingRight = '';
+    // disable body scroll when type modal:
+    if (disable && type === 'modal') {
+      document.body.setAttribute('data-modal-open', 'true');
+      return disableBodyOverflow();
+    } // enable body scroll when type modal:
+
+
+    if (!disable && type === 'modal') {
+      document.body.setAttribute('data-modal-open', 'false');
+      return enableBodyOverflow();
+    } // disable body scroll when type child_element:
+
+
+    if (disable && type === 'child_element') {
+      if (document.body.getAttribute('data-modal-open') === 'true') return;
+      return disableBodyOverflow();
+    } // enable body scroll when type child_element:
+
+
+    if (!disable && type === 'child_element') {
+      if (document.body.getAttribute('data-modal-open') === 'true') return;
+      return enableBodyOverflow();
     }
   }, [disable]);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pedidopago/ui",
-  "version": "1.3.21",
+  "version": "1.3.22",
   "description": "Quick build beatiful Pedido Pago apps",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",