@pedidopago/ui 1.6.6 → 1.6.8

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

@@ -1,5 +1,5 @@
 import { InputHTMLAttributes } from 'react';
-import { ICheckboxForwardProps, ICheckboxInputProps } from './types';
-declare const CheckboxInput: import("react").ForwardRefExoticComponent<ICheckboxInputProps & InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<ICheckboxForwardProps>>;
+import { ICheckboxInputProps } from './types';
+declare const CheckboxInput: import("react").ForwardRefExoticComponent<ICheckboxInputProps & InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;
 export default CheckboxInput;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CheckboxInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,mBAAmB,EAMpB,MAAM,OAAO,CAAC;AAOf,OAAO,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAErE,QAAA,MAAM,aAAa,+JA8ElB,CAAC;AAIF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CheckboxInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,mBAAmB,EAMpB,MAAM,OAAO,CAAC;AAOf,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAE9C,QAAA,MAAM,aAAa,0JAuElB,CAAC;AAIF,eAAe,aAAa,CAAC"}

package/dist/components/CheckboxInput/index.js

@@ -58,27 +58,19 @@ var CheckboxInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _useState = (0, _react.useState)(defaultIsChecked || false),
       _useState2 = _slicedToArray(_useState, 2),
       checked = _useState2[0],
-      _setChecked = _useState2[1];
+      setChecked = _useState2[1];
 
   var inputRef = (0, _react.useRef)(null);
   (0, _react.useImperativeHandle)(ref, function () {
-    return {
-      setChecked: function setChecked(value) {
-        return _setChecked(value);
-      },
-      toggle: function toggle() {
-        return _setChecked(!checked);
-      }
-    };
-  }, [checked]);
+    return inputRef.current;
+  });
   (0, _react.useEffect)(function () {
-    _setChecked(defaultIsChecked || false);
+    setChecked(defaultIsChecked || false);
   }, [defaultIsChecked]);
 
   function handleChange(e) {
     if (e !== null && e !== void 0 && e.currentTarget) {
-      _setChecked(e.currentTarget.checked);
-
+      setChecked(e.currentTarget.checked);
       onChangeValue === null || onChangeValue === void 0 ? void 0 : onChangeValue(e.currentTarget.checked);
     }
   }

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

@@ -1,13 +1,10 @@
+import { InputHTMLAttributes } from 'react';
 export declare type CheckboxChildren = {
     label: string;
     value: string;
     id: string;
 };
-export interface ICheckboxForwardProps {
-    setChecked: (value: boolean) => void;
-    toggle: () => void;
-}
-export interface ICheckboxInputProps {
+export interface ICheckboxInputProps extends InputHTMLAttributes<HTMLInputElement> {
     label?: string;
     id?: string;
     color?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/CheckboxInput/types.ts"],"names":[],"mappings":"AAAA,oBAAY,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACtC,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,gBAAgB,EAAE,KAAK,IAAI,CAAC;CACjE;AAED,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,YAAY,CAAC;IAC/C,gBAAgB,EAAE,gBAAgB,EAAE,CAAC;CACtC;AAED,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB;IAC7D,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,oBAAoB;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/CheckboxInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAE5C,oBAAY,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,WAAW,mBAAoB,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACtC,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,gBAAgB,EAAE,KAAK,IAAI,CAAC;CACjE;AAED,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,mBAAmB,EAAE,YAAY,CAAC;IACrF,gBAAgB,EAAE,gBAAgB,EAAE,CAAC;CACtC;AAED,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB;IAC7D,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,oBAAoB;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB"}

package/dist/components/MultipleSelect/components/OptionsArea/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/MultipleSelect/components/OptionsArea/styles.ts"],"names":[],"mappings":";AAIA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEtD,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAmC9B,CAAC;AAEF,eAAO,MAAM,UAAU;;;yGAuBtB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;mBAAiC,OAAO;gBAAc,UAAU;kHAe7F,CAAC;AAEF,eAAO,MAAM,IAAI;;;2GAIhB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/MultipleSelect/components/OptionsArea/styles.ts"],"names":[],"mappings":";AAIA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEtD,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAqC9B,CAAC;AAEF,eAAO,MAAM,UAAU;;;yGAuBtB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;mBAAiC,OAAO;gBAAc,UAAU;kHAe7F,CAAC;AAEF,eAAO,MAAM,IAAI;;;2GAIhB,CAAC"}

package/dist/components/MultipleSelect/components/OptionsArea/styles.js

@@ -21,8 +21,9 @@ var OptionsAreaWrapper = (0, _styled.default)(_framerMotion.motion.div)(function
   var theme = _ref.theme,
       top = _ref.top,
       selectType = _ref.selectType,
-      width = _ref.width;
-  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: fixed;\n      top: ", ";\n      display: flex;\n      scroll-behavior: smooth;\n      flex-direction: column;\n      box-sizing: border-box;\n      background-color: ", ";\n\n      color: ", ";\n\n      width: ", ";\n      max-height: 248px;\n      border-radius: ", ";\n\n      overflow-y: auto;\n\n      padding: 8px;\n\n      box-shadow: ", ";\n\n      &::-webkit-scrollbar {\n        width: 6px;\n      }\n\n      &::-webkit-scrollbar-thumb {\n        background-color: ", ";\n        border-radius: ", ";\n      }\n    "])), top, theme.colors.body.light, theme.colors.neutral.black, width + 'px', theme.borderRadius.default, theme.shadow.level3, selectType ? theme.colors[selectType].default : theme.colors.primary.default, theme.borderRadius.default);
+      width = _ref.width,
+      left = _ref.left;
+  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: fixed;\n      top: ", ";\n      left: ", ";\n      z-index: 999;\n      display: flex;\n      scroll-behavior: smooth;\n      flex-direction: column;\n      box-sizing: border-box;\n      background-color: ", ";\n\n      color: ", ";\n\n      width: ", ";\n      max-height: 248px;\n      border-radius: ", ";\n\n      overflow-y: auto;\n\n      padding: 8px;\n\n      box-shadow: ", ";\n\n      &::-webkit-scrollbar {\n        width: 6px;\n      }\n\n      &::-webkit-scrollbar-thumb {\n        background-color: ", ";\n        border-radius: ", ";\n      }\n    "])), top, left, theme.colors.body.light, theme.colors.neutral.black, width + 'px', theme.borderRadius.default, theme.shadow.level3, selectType ? theme.colors[selectType].default : theme.colors.primary.default, theme.borderRadius.default);
 });
 exports.OptionsAreaWrapper = OptionsAreaWrapper;
 

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MultipleSelect/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,wBAAwB,EACxB,EAAE,EAOH,MAAM,OAAO,CAAC;AAYf,OAAO,EAAc,iBAAiB,EAAc,MAAM,SAAS,CAAC;AAEpE,aAAK,KAAK,GAAG,wBAAwB,CAAC,GAAG,CAAC,CAAC;AAI3C,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,iBAAiB,GAAG,KAAK,CA6KjD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MultipleSelect/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,wBAAwB,EACxB,EAAE,EAOH,MAAM,OAAO,CAAC;AAaf,OAAO,EAAc,iBAAiB,EAAc,MAAM,SAAS,CAAC;AAEpE,aAAK,KAAK,GAAG,wBAAwB,CAAC,GAAG,CAAC,CAAC;AAI3C,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,iBAAiB,GAAG,KAAK,CA4KjD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/MultipleSelect/index.js

@@ -9,6 +9,8 @@ var _react = require("react");
 
 var _framerMotion = require("framer-motion");
 
+var _ReactPortal = require("../ReactPortal");
+
 var _Flex = _interopRequireDefault(require("../Flex"));
 
 var _useDisableBodyScroll = require("../../shared/hooks/useDisableBodyScroll");
@@ -156,10 +158,12 @@ var MultipleSelect = function MultipleSelect(_ref) {
       }, 500);
     }
   }, [onFinished]);
-  var toggleOptionsAreaView = (0, _react.useCallback)(function (event) {
+
+  var toggleOptionsAreaView = function toggleOptionsAreaView(event) {
     event.stopPropagation();
     !disabled && setShowOptionsArea(!showOptionsArea);
-  }, [disabled, setShowOptionsArea, showOptionsArea]);
+  };
+
   var chooseOption = (0, _react.useCallback)(function (option) {
     if (multiple) {
       if (!(selectedOptions.length >= maxSelects)) {
@@ -209,28 +213,31 @@ var MultipleSelect = function MultipleSelect(_ref) {
         inputAlert: inputAlert,
         placeholder: placeholder,
         dropDownIcon: dropDownIcon
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_framerMotion.AnimatePresence, {
-        exitBeforeEnter: true,
-        children: showOptionsArea && /*#__PURE__*/(0, _jsxRuntime.jsx)(_framerMotion.motion.div, _objectSpread(_objectSpread({}, _animations.multipleSelectAnimations), {}, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.OptionsArea, {
-            positionOptions: positionOptions || 0,
-            parentRef: selectAreaRef,
-            infiniteScroll: infiniteScroll,
-            AutoComplete: AutoComplete,
-            setShowOptionsArea: setShowOptionsArea,
-            inputAlert: inputAlert,
-            chooseOption: chooseOption,
-            selectedOptions: selectedOptions,
-            data: data,
-            loadMoreData: loadMoreData,
-            hasMoreData: hasMoreData,
-            scrollHandler: scrollHandler,
-            showOptionsArea: showOptionsArea,
-            onChangeSearch: onChangeSearch,
-            isLoadingData: isLoadingData,
-            autoCompleteHelperText: autoCompleteHelperText
-          })
-        }))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReactPortal.ReactPortal, {
+        wrapperId: "portal-root",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_framerMotion.AnimatePresence, {
+          exitBeforeEnter: true,
+          children: showOptionsArea && /*#__PURE__*/(0, _jsxRuntime.jsx)(_framerMotion.motion.div, _objectSpread(_objectSpread({}, _animations.multipleSelectAnimations), {}, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.OptionsArea, {
+              positionOptions: positionOptions || 0,
+              parentRef: selectAreaRef,
+              infiniteScroll: infiniteScroll,
+              AutoComplete: AutoComplete,
+              setShowOptionsArea: setShowOptionsArea,
+              inputAlert: inputAlert,
+              chooseOption: chooseOption,
+              selectedOptions: selectedOptions,
+              data: data,
+              loadMoreData: loadMoreData,
+              hasMoreData: hasMoreData,
+              scrollHandler: scrollHandler,
+              showOptionsArea: showOptionsArea,
+              onChangeSearch: onChangeSearch,
+              isLoadingData: isLoadingData,
+              autoCompleteHelperText: autoCompleteHelperText
+            })
+          }))
+        })
       })]
     }), !!helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.HelperText, {
       selectType: selectType,

package/package.json

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