@pedidopago/ui 1.5.1 → 1.5.2

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

@@ -1,4 +1,3 @@
-import { ReactNode } from 'react';
 declare type BreakpointsConfig = {
     base: number;
     sm: number;
@@ -8,8 +7,8 @@ declare type BreakpointsConfig = {
     xxl: number;
 };
 declare type BreakpointName = 'base' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-declare type BreakpointValue = {
-    [key in BreakpointName]?: ReactNode | string | number | undefined;
+declare type BreakpointValue<T> = {
+    [key in BreakpointName]?: T;
 };
 /**
  * It returns a function that takes a breakpoint value object and returns the value
@@ -20,7 +19,7 @@ declare type BreakpointValue = {
  * @example const flexDirection = breapointPicker({ sm: 'column', lg: 'row' });
  */
 export declare const useBreakpoints: (breakpointsConfig?: BreakpointsConfig | undefined) => {
-    breakpointPicker: (breakpointValues: BreakpointValue) => ReactNode;
+    breakpointPicker: <T = string>(breakpointValues: BreakpointValue<T>) => T | undefined;
 };
 export {};
 //# sourceMappingURL=useBreakpoints.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useBreakpoints.d.ts","sourceRoot":"","sources":["../../../src/shared/hooks/useBreakpoints.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAGvD,aAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,aAAK,cAAc,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAEjE,aAAK,eAAe,GAAG;KAEpB,GAAG,IAAI,cAAc,CAAC,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS;CAClE,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc;yCAcmB,eAAe;CAkF5D,CAAC"}
+{"version":3,"file":"useBreakpoints.d.ts","sourceRoot":"","sources":["../../../src/shared/hooks/useBreakpoints.tsx"],"names":[],"mappings":"AAGA,aAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,aAAK,cAAc,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAEjE,aAAK,eAAe,CAAC,CAAC,IAAI;KAEvB,GAAG,IAAI,cAAc,CAAC,CAAC,EAAE,CAAC;CAC5B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc;;CAoG1B,CAAC"}

package/dist/shared/hooks/useBreakpoints.js

@@ -36,7 +36,7 @@ var useBreakpoints = function useBreakpoints(breakpointsConfig) {
       setBreakpoint = _useState2[1];
 
   var defaultBreakpoints = {
-    base: 0,
+    base: 1,
     sm: 480,
     md: 768,
     lg: 1024,
@@ -56,27 +56,27 @@ var useBreakpoints = function useBreakpoints(breakpointsConfig) {
   function currentBreakpointWidth(windowSize, breakpoints) {
     var response;
 
-    if (breakpoints.base < windowSize.width) {
+    if (breakpoints.base <= windowSize.width) {
       response = breakpoints.base;
     }
 
-    if (breakpoints.sm < windowSize.width) {
+    if (breakpoints.sm <= windowSize.width) {
       response = breakpoints.sm;
     }
 
-    if (breakpoints.md < windowSize.width) {
+    if (breakpoints.md <= windowSize.width) {
       response = breakpoints.md;
     }
 
-    if (breakpoints.lg < windowSize.width) {
+    if (breakpoints.lg <= windowSize.width) {
       response = breakpoints.lg;
     }
 
-    if (breakpoints.xl < windowSize.width) {
+    if (breakpoints.xl <= windowSize.width) {
       response = breakpoints.xl;
     }
 
-    if (breakpoints.xxl < windowSize.width) {
+    if (breakpoints.xxl <= windowSize.width) {
       response = breakpoints.xxl;
     }
 

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

@@ -1,2 +1,2 @@
-export declare const useDisableBodyScroll: (disable: boolean, type?: 'modal' | 'child_element') => void;
+export declare const useDisableBodyScroll: (isDisabled: boolean, type?: 'modal' | 'child_element', noScrollbarPadding?: boolean) => 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":"AAoCA,eAAO,MAAM,oBAAoB,YACtB,OAAO,SACV,OAAO,GAAG,eAAe,SAehC,CAAC"}
+{"version":3,"file":"useDisableBodyScroll.d.ts","sourceRoot":"","sources":["../../../src/shared/hooks/useDisableBodyScroll.tsx"],"names":[],"mappings":"AA4CA,eAAO,MAAM,oBAAoB,eACnB,OAAO,SACb,OAAO,GAAG,eAAe,uCAgBhC,CAAC"}

package/dist/shared/hooks/useDisableBodyScroll.js

@@ -7,10 +7,15 @@ 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 disableBodyOverflow(noScrollbarPadding) {
+  if (noScrollbarPadding) {
+    document.body.style.paddingRight = "0px";
+    document.body.style.overflow = 'hidden';
+  } else {
+    var scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
+    document.body.style.paddingRight = "".concat(scrollBarWidth, "px");
+    document.body.style.overflow = 'hidden';
+  }
 }
 
 function enableBodyOverflow() {
@@ -18,45 +23,44 @@ function enableBodyOverflow() {
   document.body.style.paddingRight = '';
 }
 
-function setBodyOverflow(disable, type) {
-  // disable body scroll when type modal:
-  if (disable && type === 'modal') {
+function setBodyOverflow(isDisabled, type, noScrollbarPadding) {
+  // isDisabled body scroll when type modal:
+  if (isDisabled && type === 'modal') {
     document.body.setAttribute('data-modal-open', 'true');
-    return disableBodyOverflow();
+    return disableBodyOverflow(noScrollbarPadding);
   } // enable body scroll when type modal:
 
 
-  if (!disable && type === 'modal') {
+  if (!isDisabled && type === 'modal') {
     document.body.setAttribute('data-modal-open', 'false');
     return enableBodyOverflow();
-  } // disable body scroll when type child_element:
+  } // isDisabled body scroll when type child_element:
 
 
-  if (disable && type === 'child_element') {
-    if (document.body.getAttribute('data-modal-open') === 'true') return;
-    return disableBodyOverflow();
+  if (isDisabled && type === 'child_element') {
+    if (document.body.getAttribute('data-modal-open') === 'false') return disableBodyOverflow(noScrollbarPadding);
   } // enable body scroll when type child_element:
 
 
-  if (!disable && type === 'child_element') {
-    if (document.body.getAttribute('data-modal-open') === 'true') return;
-    return enableBodyOverflow();
+  if (!isDisabled && type === 'child_element') {
+    if (document.body.getAttribute('data-modal-open') === 'false') return enableBodyOverflow();
   }
 }
 
-var useDisableBodyScroll = function useDisableBodyScroll(disable) {
+var useDisableBodyScroll = function useDisableBodyScroll(isDisabled) {
   var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'child_element';
+  var noScrollbarPadding = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   (0, _react.useEffect)(function () {
-    setBodyOverflow(disable, type);
+    setBodyOverflow(isDisabled, type, noScrollbarPadding);
     document.body.addEventListener('data-modal-open', function () {
-      setBodyOverflow(disable, type);
+      setBodyOverflow(isDisabled, type, noScrollbarPadding);
     });
     return function () {
       document.body.removeEventListener('data-modal-open', function () {
-        setBodyOverflow(disable, type);
+        setBodyOverflow(isDisabled, type, noScrollbarPadding);
       });
     };
-  }, [disable, type]);
+  }, [isDisabled, type, noScrollbarPadding]);
 };
 
 exports.useDisableBodyScroll = useDisableBodyScroll;

package/package.json

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