@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/components/UTPhoneInput/versions/V1/index.js

@@ -1 +1,258 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_propTypes=require("prop-types"),_UTBaseInputField=_interopRequireDefault(require("../../../UTBaseInputField")),_UTFieldLabel=_interopRequireDefault(require("../../../UTFieldLabel")),_UTLabel=_interopRequireDefault(require("../../../UTLabel")),_UTValidation=_interopRequireWildcard(require("../../../UTValidation")),_buttonTypes=require("../../../../types/buttonTypes"),_constants=require("../../../UTBaseInputField/constants"),_utils=require("../../../UTValidation/utils"),_UTSelect=_interopRequireDefault(require("../../../UTSelect")),_countries=_interopRequireDefault(require("../../../../constants/countries")),_constants2=require("./constants"),_stylesModule=_interopRequireDefault(require("./styles.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var o,i,f={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return f;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,f)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(i.get||i.set)?o(f,t,i):f[t]=e[t]);return f})(e,t)}const UTPhoneInput=_ref=>{var _countries$find;let{actions:actions,areaCodeDataTestId:areaCodeDataTestId,areaCodePlaceholder:areaCodePlaceholder,disabled:disabled,editablePrefix:editablePrefix=!1,error:error,helpText:helpText,inputSize:inputSize,maxLength:maxLength=10,onChange:onChange,prefix:prefix,prefixDataTestId:prefixDataTestId,phoneNumberDataTestId:phoneNumberDataTestId,placeholder:placeholder,readOnly:readOnly,required:required,title:title,titleVariant:titleVariant,translations:translations={areaCodeMinLenghtError:"El código de área debe contener al menos 2 dígitos.",areaCodeWithoutZeroError:"El código de área debe comenzar sin 0.",invalidAreaCodeError:"No pudimos reconocer el código de área ingresado. Intenta con uno diferente."},validationDataTestId:validationDataTestId,validations:validations,value:value,withAreaCode:withAreaCode=!0}=_ref;const[areaCodeState,setAreaCodeState]=(0,_react.useState)({code:"",error:""}),[blurWithError,setBlurWithError]=(0,_react.useState)(!1),[phoneNumber,setPhoneNumber]=(0,_react.useState)(""),[prefixState,setPrefixState]=(0,_react.useState)((null==value?void 0:value.prefix)||prefix),{areaCodeWithoutZeroError:areaCodeWithoutZeroError,invalidAreaCodeError:invalidAreaCodeError,areaCodeMinLenghtError:areaCodeMinLenghtError}=translations;(0,_react.useEffect)(()=>{const{number:valueNumber}="string"==typeof value?{number:value}:value;if(prefix)valueNumber&&valueNumber!==phoneNumber&&setPhoneNumber(valueNumber);else if(valueNumber&&withAreaCode){const[code,phone]=valueNumber.split("-");setAreaCodeState(prevState=>({...prevState,code:code||""})),setPhoneNumber(phone||"")}else valueNumber&&!withAreaCode&&setPhoneNumber(valueNumber)},[value,withAreaCode]);const validateAreaCode=code=>{if(!code)return"";if(1===code.length)return areaCodeMinLenghtError;if(code.startsWith("0"))return areaCodeWithoutZeroError;return _constants2.AREA_CODES.find(element=>element.code===code)?"":invalidAreaCodeError};(0,_react.useEffect)(()=>{if(blurWithError){const validationError=validateAreaCode(areaCodeState.code);setAreaCodeState(prevState=>({...prevState,error:validationError}))}},[areaCodeState.code,blurWithError]);const handleChangePhoneNumber=(0,_react.useCallback)(phoneNumberValue=>{setPhoneNumber(phoneNumberValue)},[]);(0,_react.useEffect)(()=>{if(prefix)!phoneNumber||phoneNumber===(null==value?void 0:value.number)&&prefixState===(null==value?void 0:value.prefix)||onChange({number:phoneNumber,prefix:prefixState});else if(""!==areaCodeState.code||""!==phoneNumber){const newValue=withAreaCode?"".concat(areaCodeState.code,"-").concat(phoneNumber):phoneNumber;newValue!==value&&onChange(newValue)}else onChange("")},[areaCodeState.code,phoneNumber,withAreaCode,onChange,value,prefixState,prefix]);const validationData=validations||areaCodeState.error&&(0,_utils.formatErrorToValidation)(areaCodeState.error)||error&&(0,_utils.formatErrorToValidation)(error),hasError=(null==validationData?void 0:validationData.length)>0;return _react.default.createElement("div",{className:_stylesModule.default.container},title&&_react.default.createElement(_UTFieldLabel.default,{actions:actions,readOnly:readOnly,required:required,size:titleVariant},title),_react.default.createElement("div",{className:_stylesModule.default.inputsContainer},prefix&&_react.default.createElement(_UTSelect.default,{autocompleteProps:{classes:{popper:_stylesModule.default.popper}},className:_stylesModule.default.countryCodeSelect,classNames:{container:_stylesModule.default.countryCodeContainer},clearable:!1,dataTestId:prefixDataTestId,disabled:disabled||!editablePrefix,icon:null===(_countries$find=_countries.default.find(_ref2=>{let{prefix:prefixValue}=_ref2;return prefixValue===prefixState}))||void 0===_countries$find?void 0:_countries$find.code,inputSize:inputSize,onChange:setPrefixState,options:_countries.default.map(_ref3=>{let{code:code,prefix:prefixValue}=_ref3;return{name:"".concat(prefixValue," (").concat(code,")"),value:prefixValue,icon:code}}),value:prefixState,version:"V1"}),!prefix&&withAreaCode&&_react.default.createElement(_UTBaseInputField.default,{alwaysShowPlaceholder:!0,classNames:{container:_stylesModule.default.areaCodeContainer},dataTestId:areaCodeDataTestId,disabled:disabled,error:hasError,inputSize:inputSize,maxLength:Math.min(maxLength-phoneNumber.length,4),onBlur:()=>{const validationError=validateAreaCode(areaCodeState.code);setAreaCodeState(prevState=>({...prevState,error:validationError})),setBlurWithError(!!validationError)},onChange:areaCodeValue=>{setAreaCodeState(prevState=>({...prevState,code:areaCodeValue}))},placeholder:areaCodePlaceholder,readOnly:readOnly,rightAdornments:[{name:_constants.COMPONENT_KEYS.ICON,props:{showOnlyOnError:!0}}],type:"numeric",value:areaCodeState.code}),_react.default.createElement(_UTBaseInputField.default,{alwaysShowPlaceholder:!0,classNames:{container:_stylesModule.default.phoneContainer,root:_stylesModule.default.phoneContainerRoot},dataTestId:phoneNumberDataTestId,disabled:disabled,error:hasError&&!areaCodeState.error,inputSize:inputSize,maxLength:withAreaCode?Math.min(maxLength-areaCodeState.code.length,maxLength-2):maxLength,onChange:handleChangePhoneNumber,placeholder:placeholder,rightAdornments:[{name:_constants.COMPONENT_KEYS.ICON,props:{showOnlyOnError:!0}}],type:"numeric",value:phoneNumber})),helpText&&_react.default.createElement(_UTLabel.default,{colorTheme:"gray",variant:"small"},helpText),validationData&&_react.default.createElement(_UTValidation.default,{dataTestId:validationDataTestId,validationData:validationData}))};UTPhoneInput.propTypes={actions:(0,_propTypes.arrayOf)(_buttonTypes.buttonTypes),areaCodeDataTestId:_propTypes.string,areaCodePlaceholder:_propTypes.string,prefix:_propTypes.string,disabled:_propTypes.bool,editablePrefix:_propTypes.bool,error:_propTypes.string,helpText:_propTypes.string,inputSize:_propTypes.string,prefixDataTestId:_propTypes.string,maxLength:_propTypes.number,onChange:_propTypes.func,phoneNumberDataTestId:_propTypes.string,placeholder:_propTypes.string,readOnly:_propTypes.bool,required:_propTypes.bool,title:_propTypes.string,titleVariant:_propTypes.string,translations:(0,_propTypes.shape)({areaCodeWithoutZeroError:_propTypes.string,invalidAreaCodeError:_propTypes.string}),validationDataTestId:_propTypes.string,validations:_UTValidation.validationDataProptypes,value:_propTypes.string,withAreaCode:_propTypes.bool};var _default=exports.default=UTPhoneInput;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _UTBaseInputField = _interopRequireDefault(require("../../../UTBaseInputField"));
+var _UTFieldLabel = _interopRequireDefault(require("../../../UTFieldLabel"));
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _UTValidation = _interopRequireWildcard(require("../../../UTValidation"));
+var _buttonTypes = require("../../../../types/buttonTypes");
+var _constants = require("../../../UTBaseInputField/constants");
+var _utils = require("../../../UTValidation/utils");
+var _UTSelect = _interopRequireDefault(require("../../../UTSelect"));
+var _countries = _interopRequireDefault(require("../../../../constants/countries"));
+var _constants2 = require("./constants");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const UTPhoneInput = _ref => {
+  var _countries$find;
+  let {
+    actions,
+    areaCodeDataTestId,
+    areaCodePlaceholder,
+    disabled,
+    editablePrefix = false,
+    error,
+    helpText,
+    inputSize,
+    maxLength = 10,
+    onChange,
+    prefix,
+    prefixDataTestId,
+    phoneNumberDataTestId,
+    placeholder,
+    readOnly,
+    required,
+    title,
+    titleVariant,
+    translations = {
+      areaCodeMinLenghtError: 'El código de área debe contener al menos 2 dígitos.',
+      areaCodeWithoutZeroError: 'El código de área debe comenzar sin 0.',
+      invalidAreaCodeError: 'No pudimos reconocer el código de área ingresado. Intenta con uno diferente.'
+    },
+    validationDataTestId,
+    validations,
+    value,
+    withAreaCode = true
+  } = _ref;
+  const [areaCodeState, setAreaCodeState] = (0, _react.useState)({
+    code: '',
+    error: ''
+  });
+  const [blurWithError, setBlurWithError] = (0, _react.useState)(false);
+  const [phoneNumber, setPhoneNumber] = (0, _react.useState)('');
+  const [prefixState, setPrefixState] = (0, _react.useState)((value === null || value === void 0 ? void 0 : value.prefix) || prefix);
+  const {
+    areaCodeWithoutZeroError,
+    invalidAreaCodeError,
+    areaCodeMinLenghtError
+  } = translations;
+  (0, _react.useEffect)(() => {
+    const {
+      number: valueNumber
+    } = typeof value === 'string' ? {
+      number: value
+    } : value;
+    if (prefix) {
+      if (valueNumber && valueNumber !== phoneNumber) setPhoneNumber(valueNumber);
+    } else if (valueNumber && withAreaCode) {
+      const [code, phone] = valueNumber.split('-');
+      setAreaCodeState(prevState => ({
+        ...prevState,
+        code: code || ''
+      }));
+      setPhoneNumber(phone || '');
+    } else if (valueNumber && !withAreaCode) {
+      setPhoneNumber(valueNumber);
+    }
+  }, [value, withAreaCode]);
+  const validateAreaCode = code => {
+    if (!code) return '';
+    if (code.length === 1) return areaCodeMinLenghtError;
+    if (code.startsWith('0')) return areaCodeWithoutZeroError;
+    const isValidCode = _constants2.AREA_CODES.find(element => element.code === code);
+    return !isValidCode ? invalidAreaCodeError : '';
+  };
+  const handleOnBlur = () => {
+    const validationError = validateAreaCode(areaCodeState.code);
+    setAreaCodeState(prevState => ({
+      ...prevState,
+      error: validationError
+    }));
+    setBlurWithError(!!validationError);
+  };
+  (0, _react.useEffect)(() => {
+    if (blurWithError) {
+      const validationError = validateAreaCode(areaCodeState.code);
+      setAreaCodeState(prevState => ({
+        ...prevState,
+        error: validationError
+      }));
+    }
+  }, [areaCodeState.code, blurWithError]);
+  const handleChangeAreaCode = areaCodeValue => {
+    setAreaCodeState(prevState => ({
+      ...prevState,
+      code: areaCodeValue
+    }));
+  };
+  const handleChangePhoneNumber = (0, _react.useCallback)(phoneNumberValue => {
+    setPhoneNumber(phoneNumberValue);
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (prefix) {
+      if (phoneNumber && (phoneNumber !== (value === null || value === void 0 ? void 0 : value.number) || prefixState !== (value === null || value === void 0 ? void 0 : value.prefix))) onChange({
+        number: phoneNumber,
+        prefix: prefixState
+      });
+    } else if (areaCodeState.code !== '' || phoneNumber !== '') {
+      const newValue = withAreaCode ? "".concat(areaCodeState.code, "-").concat(phoneNumber) : phoneNumber;
+      if (newValue !== value) {
+        onChange(newValue);
+      }
+    } else {
+      onChange('');
+    }
+  }, [areaCodeState.code, phoneNumber, withAreaCode, onChange, value, prefixState, prefix]);
+  const validationData = validations || areaCodeState.error && (0, _utils.formatErrorToValidation)(areaCodeState.error) || error && (0, _utils.formatErrorToValidation)(error);
+  const hasError = (validationData === null || validationData === void 0 ? void 0 : validationData.length) > 0;
+  const getAreaCodeMaxLength = () => Math.min(maxLength - phoneNumber.length, 4);
+  const getPhoneNumberMaxLength = () => withAreaCode ? Math.min(maxLength - areaCodeState.code.length, maxLength - 2) : maxLength;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.container
+  }, title && /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, {
+    actions: actions,
+    readOnly: readOnly,
+    required: required,
+    size: titleVariant
+  }, title), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.inputsContainer
+  }, prefix && /*#__PURE__*/_react.default.createElement(_UTSelect.default, {
+    autocompleteProps: {
+      classes: {
+        popper: _stylesModule.default.popper
+      }
+    },
+    className: _stylesModule.default.countryCodeSelect,
+    classNames: {
+      container: _stylesModule.default.countryCodeContainer
+    },
+    clearable: false,
+    dataTestId: prefixDataTestId,
+    disabled: disabled || !editablePrefix,
+    icon: (_countries$find = _countries.default.find(_ref2 => {
+      let {
+        prefix: prefixValue
+      } = _ref2;
+      return prefixValue === prefixState;
+    })) === null || _countries$find === void 0 ? void 0 : _countries$find.code,
+    inputSize: inputSize,
+    onChange: setPrefixState,
+    options: _countries.default.map(_ref3 => {
+      let {
+        code,
+        prefix: prefixValue
+      } = _ref3;
+      return {
+        name: "".concat(prefixValue, " (").concat(code, ")"),
+        value: prefixValue,
+        icon: code
+      };
+    }),
+    value: prefixState,
+    version: "V1"
+  }), !prefix && withAreaCode && /*#__PURE__*/_react.default.createElement(_UTBaseInputField.default, {
+    alwaysShowPlaceholder: true,
+    classNames: {
+      container: _stylesModule.default.areaCodeContainer
+    },
+    dataTestId: areaCodeDataTestId,
+    disabled: disabled,
+    error: hasError,
+    inputSize: inputSize,
+    maxLength: getAreaCodeMaxLength(),
+    onBlur: handleOnBlur,
+    onChange: handleChangeAreaCode,
+    placeholder: areaCodePlaceholder,
+    readOnly: readOnly,
+    rightAdornments: [{
+      name: _constants.COMPONENT_KEYS.ICON,
+      props: {
+        showOnlyOnError: true
+      }
+    }],
+    type: "numeric",
+    value: areaCodeState.code
+  }), /*#__PURE__*/_react.default.createElement(_UTBaseInputField.default, {
+    alwaysShowPlaceholder: true,
+    classNames: {
+      container: _stylesModule.default.phoneContainer,
+      root: _stylesModule.default.phoneContainerRoot
+    },
+    dataTestId: phoneNumberDataTestId,
+    disabled: disabled,
+    error: hasError && !areaCodeState.error,
+    inputSize: inputSize,
+    maxLength: getPhoneNumberMaxLength(),
+    onChange: handleChangePhoneNumber,
+    placeholder: placeholder,
+    rightAdornments: [{
+      name: _constants.COMPONENT_KEYS.ICON,
+      props: {
+        showOnlyOnError: true
+      }
+    }],
+    type: "numeric",
+    value: phoneNumber
+  })), helpText && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: "gray",
+    variant: "small"
+  }, helpText), validationData && /*#__PURE__*/_react.default.createElement(_UTValidation.default, {
+    dataTestId: validationDataTestId,
+    validationData: validationData
+  }));
+};
+UTPhoneInput.propTypes = {
+  actions: (0, _propTypes.arrayOf)(_buttonTypes.buttonTypes),
+  areaCodeDataTestId: _propTypes.string,
+  areaCodePlaceholder: _propTypes.string,
+  prefix: _propTypes.string,
+  disabled: _propTypes.bool,
+  editablePrefix: _propTypes.bool,
+  error: _propTypes.string,
+  helpText: _propTypes.string,
+  inputSize: _propTypes.string,
+  prefixDataTestId: _propTypes.string,
+  maxLength: _propTypes.number,
+  onChange: _propTypes.func,
+  phoneNumberDataTestId: _propTypes.string,
+  placeholder: _propTypes.string,
+  readOnly: _propTypes.bool,
+  required: _propTypes.bool,
+  title: _propTypes.string,
+  titleVariant: _propTypes.string,
+  translations: (0, _propTypes.shape)({
+    areaCodeWithoutZeroError: _propTypes.string,
+    invalidAreaCodeError: _propTypes.string
+  }),
+  validationDataTestId: _propTypes.string,
+  validations: _UTValidation.validationDataProptypes,
+  value: _propTypes.string,
+  withAreaCode: _propTypes.bool
+};
+var _default = exports.default = UTPhoneInput;

package/dist/components/UTPopUp/README.md

@@ -0,0 +1,50 @@
+# UTPopUp
+
+## Description
+
+`UTPopUp` is a configurable floating component with actions.
+
+## Props
+
+| Name                   | Type      | Default            | Description                                                                                             |
+| ---------------------- | --------- | ------------------ | ------------------------------------------------------------------------------------------------------- |
+| `checkBox`             | string    |                    | Title for the checkbox input.                                                                           |
+| `children`             | element   |                    | The content to be rendered inside the component.                                                        |
+| `dataTestId`           | string    |                    | Unique identifier for testing purposes.                                                                 |
+| `enabled`              | bool      | `true`             | Indicates whether the component is enabled or not.                                                      |
+| `onClose`              | func      |                    | Callback for the close button.                                                                          |
+| `position`             | string    | `bottomRight`      | Defines the position of the component.                                                                  |
+| `primaryAction`        | func      |                    | Callback function for the primary action.                                                               |
+| `primaryActionProps`   | object    |                    | Props to be applied to the primary action button.                                                       |
+| `primaryActionText`    | string    |                    | Text for the primary action button.                                                                     |
+| `progress`             | number    |                    | Width of the progress bar                                                                               |
+| `secondaryAction`      | func      |                    | Callback function for the secondary action .                                                            |
+| `secondaryActionProps` | object    |                    | Props to be applied to the secondary action button.                                                     |
+| `secondaryActionText`  | string    |                    | Text for the secondary action button.                                                                   |
+| `size`                 | string    | `medium`           | Defines the size of the component.                                                                      |
+| `withBodyPadding`      | bool      | `false`            | Indicates whether the body of the component should have horizontal padding around its content.          |
+
+
+### checkBox
+
+`checkBox` is the title and enabler for the UTCheckBox. Its value is passed as a parameter to `onClose`, `primaryAction`, and `secondaryAction`
+
+### progress
+
+Enables the progress bar. The value of `progress` must be between 0 and 1.
+
+### position 
+
+The value of `position` must be one of the following:
+
+- "bottomLeft"
+- "bottomRight"
+- "topLeft"
+- "topRight"
+
+### size
+
+The value of `size` must be one of the following:
+
+- "medium"
+- "large"

package/dist/components/UTPopUp/constants.js

@@ -1 +1,16 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SIZES=exports.POSITIONS=void 0;const SIZES=exports.SIZES={LARGE:"large",MEDIUM:"medium"},POSITIONS=exports.POSITIONS={BOTTOM_LEFT:"bottomLeft",BOTTOM_RIGHT:"bottomRight",TOP_LEFT:"topLeft",TOP_RIGHT:"topRight"};
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SIZES = exports.POSITIONS = void 0;
+const SIZES = exports.SIZES = {
+  LARGE: 'large',
+  MEDIUM: 'medium'
+};
+const POSITIONS = exports.POSITIONS = {
+  BOTTOM_LEFT: 'bottomLeft',
+  BOTTOM_RIGHT: 'bottomRight',
+  TOP_LEFT: 'topLeft',
+  TOP_RIGHT: 'topRight'
+};

package/dist/components/UTPopUp/index.js

@@ -1 +1,90 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _propTypes=require("prop-types"),_react=_interopRequireWildcard(require("react")),_UTButton=_interopRequireDefault(require("../UTButton")),_UTCheckbox=_interopRequireDefault(require("../UTCheckbox")),_WithTheme=_interopRequireDefault(require("../WithTheme")),_theme=require("./theme"),_stylesModule=_interopRequireDefault(require("./styles.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var o,i,f={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return f;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,f)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(i.get||i.set)?o(f,t,i):f[t]=e[t]);return f})(e,t)}function _extends(){return _extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},_extends.apply(null,arguments)}const UTPopUp=_ref=>{let{checkBox:checkBox,children:children,classes:theme,dataTestId:dataTestId,enabled:enabled=!0,onClose:onClose,primaryAction:primaryAction,primaryActionProps:primaryActionProps,primaryActionText:primaryActionText,progress:progress,secondaryAction:secondaryAction,secondaryActionProps:secondaryActionProps,secondaryActionText:secondaryActionText,withBodyPadding:withBodyPadding}=_ref;const[checked,setChecked]=(0,_react.useState)(!1),hasProgress="number"==typeof progress;return enabled?_react.default.createElement("div",{className:"".concat(theme.container," ").concat(_stylesModule.default.container),"data-testid":dataTestId},(onClose||hasProgress)&&_react.default.createElement("div",{className:_stylesModule.default.header},hasProgress&&_react.default.createElement("div",{className:theme.progressBar},_react.default.createElement("div",{className:theme.progress,style:{width:"".concat(101*progress,"%")}})),onClose&&_react.default.createElement(_UTButton.default,{Icon:"IconX",onClick:()=>onClose(checked),variant:"text"})),children&&_react.default.createElement("div",{className:withBodyPadding?_stylesModule.default.withBodyPadding:_stylesModule.default.body},children),(checkBox||primaryAction||secondaryAction)&&_react.default.createElement("div",{className:_stylesModule.default.footer},checkBox&&_react.default.createElement(_UTCheckbox.default,{version:"V1",title:checkBox,spacing:"small",value:checked,onChange:setChecked,classNames:{container:_stylesModule.default.checkBox}}),secondaryAction&&_react.default.createElement(_UTButton.default,_extends({onClick:()=>secondaryAction(checked),variant:"text"},secondaryActionProps),secondaryActionText),primaryAction&&_react.default.createElement(_UTButton.default,_extends({onClick:()=>primaryAction(checked)},primaryActionProps),primaryActionText))):null};UTPopUp.propTypes={checkBox:_propTypes.string,children:_propTypes.element,classes:_propTypes.object,dataTestId:_propTypes.string,enabled:_propTypes.bool,onClose:_propTypes.func,position:_propTypes.string,primaryAction:_propTypes.func,primaryActionProps:_propTypes.object,primaryActionText:_propTypes.string,progress:_propTypes.number,secondaryAction:_propTypes.func,secondaryActionProps:_propTypes.object,secondaryActionText:_propTypes.string,size:_propTypes.string,withBodyPadding:_propTypes.bool};var _default=exports.default=(0,_WithTheme.default)(_theme.retrieveStyle)(UTPopUp);
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = require("prop-types");
+var _react = _interopRequireWildcard(require("react"));
+var _UTButton = _interopRequireDefault(require("../UTButton"));
+var _UTCheckbox = _interopRequireDefault(require("../UTCheckbox"));
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _theme = require("./theme");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const UTPopUp = _ref => {
+  let {
+    checkBox,
+    children,
+    classes: theme,
+    dataTestId,
+    enabled = true,
+    onClose,
+    primaryAction,
+    primaryActionProps,
+    primaryActionText,
+    progress,
+    secondaryAction,
+    secondaryActionProps,
+    secondaryActionText,
+    withBodyPadding
+  } = _ref;
+  const [checked, setChecked] = (0, _react.useState)(false);
+  const hasProgress = typeof progress === 'number';
+  return enabled ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(theme.container, " ").concat(_stylesModule.default.container),
+    "data-testid": dataTestId
+  }, (onClose || hasProgress) && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.header
+  }, hasProgress && /*#__PURE__*/_react.default.createElement("div", {
+    className: theme.progressBar
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: theme.progress,
+    style: {
+      width: "".concat(progress * 101, "%")
+    }
+  })), onClose && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    Icon: "IconX",
+    onClick: () => onClose(checked),
+    variant: "text"
+  })), children && /*#__PURE__*/_react.default.createElement("div", {
+    className: withBodyPadding ? _stylesModule.default.withBodyPadding : _stylesModule.default.body
+  }, children), (checkBox || primaryAction || secondaryAction) && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.footer
+  }, checkBox && /*#__PURE__*/_react.default.createElement(_UTCheckbox.default, {
+    version: "V1",
+    title: checkBox,
+    spacing: "small",
+    value: checked,
+    onChange: setChecked,
+    classNames: {
+      container: _stylesModule.default.checkBox
+    }
+  }), secondaryAction && /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
+    onClick: () => secondaryAction(checked),
+    variant: "text"
+  }, secondaryActionProps), secondaryActionText), primaryAction && /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
+    onClick: () => primaryAction(checked)
+  }, primaryActionProps), primaryActionText))) : null;
+};
+UTPopUp.propTypes = {
+  checkBox: _propTypes.string,
+  children: _propTypes.element,
+  classes: _propTypes.object,
+  dataTestId: _propTypes.string,
+  enabled: _propTypes.bool,
+  onClose: _propTypes.func,
+  position: _propTypes.string,
+  primaryAction: _propTypes.func,
+  primaryActionProps: _propTypes.object,
+  primaryActionText: _propTypes.string,
+  progress: _propTypes.number,
+  secondaryAction: _propTypes.func,
+  secondaryActionProps: _propTypes.object,
+  secondaryActionText: _propTypes.string,
+  size: _propTypes.string,
+  withBodyPadding: _propTypes.bool
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTPopUp);

package/dist/components/UTPopUp/theme.js

@@ -1 +1,63 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.retrieveStyle=void 0;var _shadowUtils=require("../../utils/shadowUtils"),_constants=require("./constants");const retrieveStyle=_ref=>{var _theme$Palette$shadow,_theme$Palette;let{theme:theme,position:position=_constants.POSITIONS.BOTTOM_RIGHT,size:size=_constants.SIZES.MEDIUM}=_ref;return{container:{backgroundColor:theme.Palette.light["01"],borderRadius:"4px",boxShadow:(0,_shadowUtils.getShadow)({color:null===(_theme$Palette$shadow=theme.Palette.shadows)||void 0===_theme$Palette$shadow?void 0:_theme$Palette$shadow.grayscale,level:2}),position:"absolute",width:{[_constants.SIZES.MEDIUM]:"381px",[_constants.SIZES.LARGE]:"600px"}[size],zIndex:1e3,...{[_constants.POSITIONS.BOTTOM_LEFT]:{bottom:"30px",left:"30px"},[_constants.POSITIONS.BOTTOM_RIGHT]:{bottom:"30px",right:"30px"},[_constants.POSITIONS.TOP_LEFT]:{left:"30px",top:"30px"},[_constants.POSITIONS.TOP_RIGHT]:{right:"30px",top:"30px"}}[position]},progressBar:{backgroundColor:theme.Palette.light["04"],height:"8px",overflow:"hidden",width:"100%"},progress:{background:null===(_theme$Palette=theme.Palette)||void 0===_theme$Palette||null===(_theme$Palette=_theme$Palette.identityGradient)||void 0===_theme$Palette?void 0:_theme$Palette.horizontal,borderRadius:"0 4px 4px 0",height:"100%",transition:"width 1s ease-in-out"}}};exports.retrieveStyle=retrieveStyle;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = void 0;
+var _shadowUtils = require("../../utils/shadowUtils");
+var _constants = require("./constants");
+const retrieveStyle = _ref => {
+  var _theme$Palette$shadow, _theme$Palette;
+  let {
+    theme,
+    position = _constants.POSITIONS.BOTTOM_RIGHT,
+    size = _constants.SIZES.MEDIUM
+  } = _ref;
+  return {
+    container: {
+      backgroundColor: theme.Palette.light['01'],
+      borderRadius: '4px',
+      boxShadow: (0, _shadowUtils.getShadow)({
+        color: (_theme$Palette$shadow = theme.Palette.shadows) === null || _theme$Palette$shadow === void 0 ? void 0 : _theme$Palette$shadow.grayscale,
+        level: 2
+      }),
+      position: 'absolute',
+      width: {
+        [_constants.SIZES.MEDIUM]: '381px',
+        [_constants.SIZES.LARGE]: '600px'
+      }[size],
+      zIndex: 1000,
+      ...{
+        [_constants.POSITIONS.BOTTOM_LEFT]: {
+          bottom: '30px',
+          left: '30px'
+        },
+        [_constants.POSITIONS.BOTTOM_RIGHT]: {
+          bottom: '30px',
+          right: '30px'
+        },
+        [_constants.POSITIONS.TOP_LEFT]: {
+          left: '30px',
+          top: '30px'
+        },
+        [_constants.POSITIONS.TOP_RIGHT]: {
+          right: '30px',
+          top: '30px'
+        }
+      }[position]
+    },
+    progressBar: {
+      backgroundColor: theme.Palette.light['04'],
+      height: '8px',
+      overflow: 'hidden',
+      width: '100%'
+    },
+    progress: {
+      background: (_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 || (_theme$Palette = _theme$Palette.identityGradient) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.horizontal,
+      borderRadius: '0 4px 4px 0',
+      height: '100%',
+      transition: 'width 1s ease-in-out'
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/components/UTPopper/README.md

@@ -0,0 +1,17 @@
+# UTPopper
+
+## Description
+
+Component meant to be used as a PopUp anchored to other elements
+
+## Props
+
+| Name                    | Type                               | Default | Description                                       |
+| ----------------------- | ---------------------------------- | ------- | ------------------------------------------------- |
+| anchor                  | oneOfType([refType, elementType]), |         | Element to which the popper is anchored           |
+| children,               | object                             |         | Elements to render within the popper              |
+| classes,                | objectOf( string)                  |         | CSS classes                                       |
+| clickAwayListenerProps, | object                             |         | Props handed over to ClickawayListener            |
+| onClose,                | func                               |         | Close function                                    |
+| paperProps,             | object                             |         | Props to hand over to the UTPapper                |
+| ...popperProps          | object                             |         | Spread of props compatible with materialUIs props |

package/dist/components/UTPopper/index.js

@@ -1 +1,49 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _isEmpty=_interopRequireDefault(require("lodash/isEmpty")),_react=_interopRequireWildcard(require("react")),_core=require("@material-ui/core"),_propTypes=require("prop-types"),_commonTypes=require("../../types/commonTypes");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var o,i,f={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return f;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,f)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(i.get||i.set)?o(f,t,i):f[t]=e[t]);return f})(e,t)}function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _extends(){return _extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},_extends.apply(null,arguments)}const UTPopper=_ref=>{let{anchor:anchor,children:children,classes:classes,clickAwayListenerProps:clickAwayListenerProps,onClose:onClose,paperProps:paperProps,...popperProps}=_ref;const[open,handleOpenState]=(0,_react.useState)(!1);return(0,_react.useEffect)(()=>{const shouldOpen=!!anchor&&!(0,_isEmpty.default)(children);handleOpenState(shouldOpen)},[anchor,children]),anchor?_react.default.createElement(_core.ClickAwayListener,_extends({onClickAway:onClose},clickAwayListenerProps),_react.default.createElement(_core.Popper,_extends({anchorEl:anchor,open:open,transition:!0},popperProps),_react.default.createElement(_core.Paper,_extends({className:null==classes?void 0:classes.paper},paperProps),children))):null};UTPopper.propTypes={anchor:(0,_propTypes.oneOfType)([_commonTypes.refType,_propTypes.elementType]),children:_propTypes.object,classes:(0,_propTypes.objectOf)(_propTypes.string),clickAwayListenerProps:_propTypes.object,onClose:_propTypes.func,paperProps:_propTypes.object,popperProps:_propTypes.object};var _default=exports.default=UTPopper;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _react = _interopRequireWildcard(require("react"));
+var _core = require("@material-ui/core");
+var _propTypes = require("prop-types");
+var _commonTypes = require("../../types/commonTypes");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const UTPopper = _ref => {
+  let {
+    anchor,
+    children,
+    classes,
+    clickAwayListenerProps,
+    onClose,
+    paperProps,
+    ...popperProps
+  } = _ref;
+  const [open, handleOpenState] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    const shouldOpen = !!anchor && !(0, _isEmpty.default)(children);
+    handleOpenState(shouldOpen);
+  }, [anchor, children]);
+  return anchor ? /*#__PURE__*/_react.default.createElement(_core.ClickAwayListener, _extends({
+    onClickAway: onClose
+  }, clickAwayListenerProps), /*#__PURE__*/_react.default.createElement(_core.Popper, _extends({
+    anchorEl: anchor,
+    open: open,
+    transition: true
+  }, popperProps), /*#__PURE__*/_react.default.createElement(_core.Paper, _extends({
+    className: classes === null || classes === void 0 ? void 0 : classes.paper
+  }, paperProps), children))) : null;
+};
+UTPopper.propTypes = {
+  anchor: (0, _propTypes.oneOfType)([_commonTypes.refType, _propTypes.elementType]),
+  children: _propTypes.object,
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  clickAwayListenerProps: _propTypes.object,
+  onClose: _propTypes.func,
+  paperProps: _propTypes.object,
+  popperProps: _propTypes.object
+};
+var _default = exports.default = UTPopper;

package/dist/components/UTProductItem/README.md

@@ -0,0 +1,28 @@
+# UTProductItem
+
+### Description
+Product item component.
+
+### Action
+This action object will wait for a function and a type to apply a determinate style to the action button:
+Available types:
+- `add`
+- `modify`
+- `detail`
+- `modifyDetail`
+
+Also, you can pass a CustomIcon if you want to.
+
+### Props
+
+| Name                 | Type                                                                                                            | Default   |Description                      |
+|----------------------|-----------------------------------------------------------------------------------------------------------------|-----------|---------------------------------|
+| action               | object: {CustomIcon: ReactComponent, type: 'add' \| 'modify' \| 'detail' \| 'modifyDetail', onClick: () => () } |           | The action definition.          |
+| additionalInfo       | string                                                                                                          |           | The additional info to detail.  |
+| amount               |                                                                                                                 |           | The current amount.             |
+| discount             | number                                                                                                          |           | Current discount.               |
+| discountSize         | 'small' \| 'medium'                                                                                             | medium    | UTLabel component variant.      | 
+| Image                | asset                                                                                                           |           | Image of the product.           |
+| previousAmount       | number                                                                                                          |           | Amount without discount applied.|
+| selectedQuantity     | number                                                                                                          |           | Selected item product quantity. |
+| title                | string                                                                                                          |           | Product name.                   |

package/dist/components/UTProductItem/constants.js

@@ -1 +1,34 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.actionMapper=void 0;const ADD="add",MODIFY="modify",DETAIL="detail",MODIFY_DETAIL="modifyDetail",actionMapper=exports.actionMapper={[ADD]:{colorTheme:"secondary",Icon:"IconPlus",size:"medium",variant:"semitransparent"},[MODIFY]:{colorTheme:"secondary",Icon:"IconPencil",size:"medium",variant:"text"},[DETAIL]:{colorTheme:"primary",Icon:"IconChevronRight",size:"medium"},[MODIFY_DETAIL]:{colorTheme:"primary",Icon:"IconPencil",size:"medium"}};
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.actionMapper = void 0;
+const ADD = 'add';
+const MODIFY = 'modify';
+const DETAIL = 'detail';
+const MODIFY_DETAIL = 'modifyDetail';
+const actionMapper = exports.actionMapper = {
+  [ADD]: {
+    colorTheme: 'secondary',
+    Icon: 'IconPlus',
+    size: 'medium',
+    variant: 'semitransparent'
+  },
+  [MODIFY]: {
+    colorTheme: 'secondary',
+    Icon: 'IconPencil',
+    size: 'medium',
+    variant: 'text'
+  },
+  [DETAIL]: {
+    colorTheme: 'primary',
+    Icon: 'IconChevronRight',
+    size: 'medium'
+  },
+  [MODIFY_DETAIL]: {
+    colorTheme: 'primary',
+    Icon: 'IconPencil',
+    size: 'medium'
+  }
+};