@pedidopago/ui 1.3.19 → 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/Progress/style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/style.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAGpG,eAAO,MAAM,WAAW;;;gIAYvB,CAAC;AAEF,eAAO,MAAM,WAAW;;;kHA2BvB,CAAC;AAEF,eAAO,MAAM,UAAU;;;+HAOtB,CAAC;AAIF,eAAO,MAAM,UAAU;;;;;yGAKtB,CAAC;AAEF,eAAO,MAAM,KAAK;;;kHA0BjB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;+CAGnB,CAAC;AACF,eAAO,MAAM,SAAS;;;gEAWrB,CAAC;AAEF,eAAO,MAAM,eAAe;;;+DAW3B,CAAC"}
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/style.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAGpG,eAAO,MAAM,WAAW;;;gIAYvB,CAAC;AAEF,eAAO,MAAM,WAAW;;;kHA2BvB,CAAC;AAEF,eAAO,MAAM,UAAU;;;+HAOtB,CAAC;AAIF,eAAO,MAAM,UAAU;;;;;yGAKtB,CAAC;AAEF,eAAO,MAAM,KAAK;;;kHA0BjB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;+CAInB,CAAC;AACF,eAAO,MAAM,SAAS;;;gEAWrB,CAAC;AAEF,eAAO,MAAM,eAAe;;;+DAW3B,CAAC"}

package/dist/components/Progress/style.js

@@ -95,7 +95,7 @@ var Value = _styled.default.div(_templateObject5 || (_templateObject5 = _taggedT
 
 exports.Value = Value;
 
-var SVGArea = _styled.default.svg(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: ", "px;\n  height: ", "px;\n"])), function (_ref19) {
+var SVGArea = _styled.default.svg(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: ", "px;\n  height: ", "px;\n  transform: rotate(-90deg);\n"])), function (_ref19) {
   var size = _ref19.size;
   return size || 101;
 }, function (_ref20) {

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/Skeleton/types.d.ts

@@ -15,12 +15,12 @@ export declare type ISkeletonProps = {
      * The width of the skeleton
      * @default '100%'
      */
-    width?: number;
+    width?: number | string;
     /**
      * The height of the skeleton
      * @default '100%'
      */
-    height?: number;
+    height?: number | string;
     /**
      * The color of the skeleton
      * @default '#EEEEEE'

package/dist/components/Skeleton/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEnE,oBAAY,cAAc,GAAG;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAC;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACxC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC1C;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEnE,oBAAY,cAAc,GAAG;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAC;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACxC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC1C;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC"}

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/components/Typography/styles.d.ts

@@ -3,7 +3,7 @@ import { GenericStyledProps } from './../../@types/index';
 export declare const StyledText: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-} & GenericStyledProps & import("react").ClassAttributes<HTMLParagraphElement> & import("react").HTMLAttributes<HTMLParagraphElement> & {
+} & GenericStyledProps & import("react").HTMLAttributes<HTMLLabelElement | HTMLParagraphElement> & {
     variant?: "small" | "caption" | "em" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "p" | "span" | "strong" | undefined;
     color?: import("../..").GlobalColorsProps | (string & {}) | undefined;
     fontSize?: number | "display" | "tiny" | "xxxs" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | "giant" | undefined;

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

@@ -1,6 +1,6 @@
-import { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import { GlobalColorsProps, defaultTheme } from './../../shared/theme';
-export declare type TypographyProps = DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement> & {
+export declare type TypographyProps = HTMLAttributes<HTMLParagraphElement | HTMLLabelElement> & {
     variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'label' | 'caption' | 'small' | 'strong' | 'em';
     color?: GlobalColorsProps | (string & {});
     fontSize?: keyof typeof defaultTheme.fontSizes | number;

package/dist/components/Typography/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEvE,oBAAY,eAAe,GAAG,iBAAiB,CAC7C,cAAc,CAAC,oBAAoB,CAAC,EACpC,oBAAoB,CACrB,GAAG;IACF,OAAO,CAAC,EACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,GAAG,GACH,MAAM,GACN,OAAO,GACP,SAAS,GACT,OAAO,GACP,QAAQ,GACR,IAAI,CAAC;IACT,KAAK,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC1C,QAAQ,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC,SAAS,GAAG,MAAM,CAAC;IACxD,UAAU,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC,UAAU,CAAC;IAClD,SAAS,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;IACpE,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACvC,aAAa,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,YAAY,GAAG,MAAM,CAAC;IAClE,cAAc,CAAC,EAAE,WAAW,GAAG,cAAc,GAAG,MAAM,CAAC;IACvD,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEvE,oBAAY,eAAe,GAAG,cAAc,CAAC,oBAAoB,GAAG,gBAAgB,CAAC,GAAG;IACtF,OAAO,CAAC,EACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,GAAG,GACH,MAAM,GACN,OAAO,GACP,SAAS,GACT,OAAO,GACP,QAAQ,GACR,IAAI,CAAC;IACT,KAAK,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC1C,QAAQ,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC,SAAS,GAAG,MAAM,CAAC;IACxD,UAAU,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC,UAAU,CAAC;IAClD,SAAS,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;IACpE,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACvC,aAAa,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,YAAY,GAAG,MAAM,CAAC;IAClE,cAAc,CAAC,EAAE,WAAW,GAAG,cAAc,GAAG,MAAM,CAAC;IACvD,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC"}

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/dist/shared/theme/contexts/ThemeContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../../../src/shared/theme/contexts/ThemeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAuB,MAAM,OAAO,CAAC;AAQtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,aAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,gBAAgB,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAEF,aAAK,kBAAkB,GAAG;IACxB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,gBAAgB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACpC,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,YAAY,4CAAyC,CAAC;AAEnE,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,gBAAgB,EAAE,EAAE,kBAAkB,eA8B1F"}
+{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../../../src/shared/theme/contexts/ThemeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAuB,MAAM,OAAO,CAAC;AAQtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,aAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,gBAAgB,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAEF,aAAK,kBAAkB,GAAG;IACxB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,gBAAgB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACpC,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,YAAY,4CAAyC,CAAC;AAEnE,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,gBAAgB,EAAE,EAAE,kBAAkB,eAmC1F"}

package/dist/shared/theme/contexts/ThemeContext.js

@@ -51,6 +51,11 @@ function PPUIThemeProvider(_ref) {
       colorMode = _useState2[0],
       setColorMode = _useState2[1];
 
+  var _useState3 = (0, _react.useState)(theme || _.defaultTheme),
+      _useState4 = _slicedToArray(_useState3, 2),
+      currentTheme = _useState4[0],
+      setCurrentTheme = _useState4[1];
+
   (0, _react.useEffect)(function () {
     var localStorageColorMode = _localStorageController.localStorageController.get('UIColorMode');
 
@@ -58,6 +63,9 @@ function PPUIThemeProvider(_ref) {
       setColorMode(localStorageColorMode === 'dark');
     }
   }, [setColorMode]);
+  (0, _react.useEffect)(function () {
+    setCurrentTheme(theme || _.defaultTheme);
+  }, [theme]);
 
   function switchColorMode() {
     var newColorMode = !colorMode;
@@ -69,12 +77,12 @@ function PPUIThemeProvider(_ref) {
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ThemeContext.Provider, {
     value: {
-      theme: theme || _.defaultTheme,
+      theme: currentTheme,
       colorMode: colorMode,
       switchColorMode: switchColorMode
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.ThemeProvider, {
-      theme: _objectSpread(_objectSpread({}, theme || _.defaultTheme), {}, {
+      theme: _objectSpread(_objectSpread({}, currentTheme), {}, {
         colorMode: colorMode ? 'dark' : 'light'
       }),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToastProvider.default, {

package/package.json

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