@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/esm/components/UTCarousel/index.js

@@ -1 +1,61 @@
-import React from"react";import{shape,number,bool,arrayOf,string,node,func,objectOf,oneOfType}from"prop-types";import Sizes from"../../scss/variables/sizes.module.scss";import WithTheme from"../WithTheme";import{retrieveStyle}from"./theme";import Slider from"./components/Slider";const UTCarousel=_ref=>{let{arrow:arrow,legend:legend,imgArray:imgArray,borderSize:borderSize,autoPlay:autoPlay,autoPlayDelay:autoPlayDelay=2e3,classes:classes,height:height=Sizes.defaultCarrouselHeight,activeEvents:activeEvents,className:className}=_ref;return React.createElement(Slider,{arrow:arrow,legend:legend,slides:imgArray,withBorder:borderSize,autoPlay:autoPlay,autoPlayDelay:autoPlayDelay,classes:classes,height:height,activeEvents:activeEvents,className:className})};UTCarousel.propTypes={arrow:shape({position:string,arrowCustomLeft:node,arrowCustomRight:node,callbackLeft:func,callbackRight:func}),legend:shape({align:string,legendCustom:func,paddingBottom:string,paddingLeft:string,position:string}),imgArray:arrayOf(shape({id:oneOfType([number,string]),imgSrc:string,renderContent:node})),borderSize:number,autoPlay:bool,autoPlayDelay:number,height:string,activeEvents:bool,className:string,classes:objectOf(string)};export default WithTheme(retrieveStyle)(UTCarousel);
+import React from 'react';
+import { shape, number, bool, arrayOf, string, node, func, objectOf, oneOfType } from 'prop-types';
+import Sizes from '../../scss/variables/sizes.module.scss';
+import WithTheme from '../WithTheme';
+import { retrieveStyle } from './theme';
+import Slider from './components/Slider';
+const UTCarousel = _ref => {
+  let {
+    arrow,
+    legend,
+    imgArray,
+    borderSize,
+    autoPlay,
+    autoPlayDelay = 2000,
+    classes,
+    height = Sizes.defaultCarrouselHeight,
+    activeEvents,
+    className
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Slider, {
+    arrow: arrow,
+    legend: legend,
+    slides: imgArray,
+    withBorder: borderSize,
+    autoPlay: autoPlay,
+    autoPlayDelay: autoPlayDelay,
+    classes: classes,
+    height: height,
+    activeEvents: activeEvents,
+    className: className
+  });
+};
+UTCarousel.propTypes = {
+  arrow: shape({
+    position: string,
+    arrowCustomLeft: node,
+    arrowCustomRight: node,
+    callbackLeft: func,
+    callbackRight: func
+  }),
+  legend: shape({
+    align: string,
+    legendCustom: func,
+    paddingBottom: string,
+    paddingLeft: string,
+    position: string
+  }),
+  imgArray: arrayOf(shape({
+    id: oneOfType([number, string]),
+    imgSrc: string,
+    renderContent: node
+  })),
+  borderSize: number,
+  autoPlay: bool,
+  autoPlayDelay: number,
+  height: string,
+  activeEvents: bool,
+  className: string,
+  classes: objectOf(string)
+};
+export default WithTheme(retrieveStyle)(UTCarousel);

package/dist/esm/components/UTCarousel/theme.js

@@ -1 +1,44 @@
-import{getIn}from"seamless-immutable";import Colors from"../../scss/variables/colors.module.scss";import Sizes from"../../scss/variables/sizes.module.scss";export const retrieveStyle=_ref=>{let{theme:theme}=_ref;return{arrowStyle:{fontSize:getIn(theme,["UTCarousel","arrowStyle","fontSize"],Sizes.defaultCarrouselArrowSize),height:getIn(theme,["UTCarousel","arrowStyle","height"],Sizes.defaultCarrouselArrowSize),width:getIn(theme,["UTCarousel","arrowStyle","width"],Sizes.defaultCarrouselArrowSize),color:getIn(theme,["UTCarousel","arrowStyle","color"],Colors.white),backgroundColor:getIn(theme,["UTCarousel","arrowStyle","backgroundColor"],Colors.lightBlue),transition:"opacity 0.5s ease-out","&:hover":{backgroundColor:getIn(theme,["UTCarousel","arrowStyle","hover","backgroundColor"],Colors.lightBlue)}},legendStyleContainer:{backgroundColor:getIn(theme,["UTCarousel","legendStyleContainer","backgroundColor"],Colors.gray2),height:getIn(theme,["UTCarousel","legendStyleContainer","height"],Sizes.defaultCarrouselLegendSize),width:getIn(theme,["UTCarousel","legendStyleContainer","width"],Sizes.defaultCarrouselLegendSize),borderRadius:"100% ",userSelect:"none",boxShadow:"0px 1px 2px 0px rgba(0,0,0,0.75)",transition:"transform 0.3s ease-in, background-color 0.3s ease-in",transform:"scale(0.8)"},legendStyleIsActive:{backgroundColor:getIn(theme,["UTCarousel","legendStyleIsActive","backgroundColor"],Colors.white),userSelect:"none",transform:"scale(1)"},legendStyleTouchable:{alignItems:"center",height:getIn(theme,["UTCarousel","legendStyleTouchable","height"],Sizes.defaultCarrouselLegendTouchable),width:getIn(theme,["UTCarousel","legendStyleTouchable","width"],Sizes.defaultCarrouselLegendTouchable),justifyContent:"center",display:"flex",userSelect:"none"}}};
+import { getIn } from 'seamless-immutable';
+import Colors from '../../scss/variables/colors.module.scss';
+import Sizes from '../../scss/variables/sizes.module.scss';
+export const retrieveStyle = _ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    arrowStyle: {
+      fontSize: getIn(theme, ['UTCarousel', 'arrowStyle', 'fontSize'], Sizes.defaultCarrouselArrowSize),
+      height: getIn(theme, ['UTCarousel', 'arrowStyle', 'height'], Sizes.defaultCarrouselArrowSize),
+      width: getIn(theme, ['UTCarousel', 'arrowStyle', 'width'], Sizes.defaultCarrouselArrowSize),
+      color: getIn(theme, ['UTCarousel', 'arrowStyle', 'color'], Colors.white),
+      backgroundColor: getIn(theme, ['UTCarousel', 'arrowStyle', 'backgroundColor'], Colors.lightBlue),
+      transition: 'opacity 0.5s ease-out',
+      '&:hover': {
+        backgroundColor: getIn(theme, ['UTCarousel', 'arrowStyle', 'hover', 'backgroundColor'], Colors.lightBlue)
+      }
+    },
+    legendStyleContainer: {
+      backgroundColor: getIn(theme, ['UTCarousel', 'legendStyleContainer', 'backgroundColor'], Colors.gray2),
+      height: getIn(theme, ['UTCarousel', 'legendStyleContainer', 'height'], Sizes.defaultCarrouselLegendSize),
+      width: getIn(theme, ['UTCarousel', 'legendStyleContainer', 'width'], Sizes.defaultCarrouselLegendSize),
+      borderRadius: '100% ',
+      userSelect: 'none',
+      boxShadow: '0px 1px 2px 0px rgba(0,0,0,0.75)',
+      transition: 'transform 0.3s ease-in, background-color 0.3s ease-in',
+      transform: 'scale(0.8)'
+    },
+    legendStyleIsActive: {
+      backgroundColor: getIn(theme, ['UTCarousel', 'legendStyleIsActive', 'backgroundColor'], Colors.white),
+      userSelect: 'none',
+      transform: 'scale(1)'
+    },
+    legendStyleTouchable: {
+      alignItems: 'center',
+      height: getIn(theme, ['UTCarousel', 'legendStyleTouchable', 'height'], Sizes.defaultCarrouselLegendTouchable),
+      width: getIn(theme, ['UTCarousel', 'legendStyleTouchable', 'width'], Sizes.defaultCarrouselLegendTouchable),
+      justifyContent: 'center',
+      display: 'flex',
+      userSelect: 'none'
+    }
+  };
+};

package/dist/esm/components/UTCheckList/index.js

@@ -1 +1,19 @@
-import React from"react";import{string}from"prop-types";import V0 from"./versions/V0";import V1 from"./versions/V1";const UTCheckList=_ref=>{let{version:version="V0",...props}=_ref;const Component={V0:V0,V1:V1}[version];return React.createElement(Component,props)};UTCheckList.propTypes={version:string};export default UTCheckList;
+import React from 'react';
+import { string } from 'prop-types';
+import V0 from './versions/V0';
+import V1 from './versions/V1';
+const UTCheckList = _ref => {
+  let {
+    version = 'V0',
+    ...props
+  } = _ref;
+  const Component = {
+    V0,
+    V1
+  }[version];
+  return /*#__PURE__*/React.createElement(Component, props);
+};
+UTCheckList.propTypes = {
+  version: string
+};
+export default UTCheckList;

package/dist/esm/components/UTCheckList/versions/V0/constants.js

@@ -1 +1 @@
-export const defaultAdditionalInfoHeader="Seleccionar Todo";
+export const defaultAdditionalInfoHeader = 'Seleccionar Todo';

package/dist/esm/components/UTCheckList/versions/V0/index.js

@@ -1 +1,165 @@
-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)}import React,{useEffect}from"react";import{arrayOf,shape,number,string,any,func,bool,element,objectOf,object,oneOfType}from"prop-types";import{isEmpty}from"@widergy/web-utils/lib/array";import FormGroup from"@material-ui/core/FormGroup";import FormHelperText from"@material-ui/core/FormHelperText";import WithTheme from"../../../WithTheme";import UTCheckbox from"../../../UTCheckbox";import{mergeClasses}from"../../../../utils/classesUtils";import UTLabel from"../../../UTLabel";import{fieldType,metaPropTypes}from"../../../../types/formTypes";import{retrieveMuiTheme,retrieveStyle}from"./theme";import{defaultAdditionalInfoHeader}from"./constants";import styles from"./styles.module.scss";const UTCheckList=_ref=>{var _field$configuration;let{additionalInfo:additionalInfo,allChecked:allChecked,CustomCheckedIcon:CustomCheckedIcon,CustomUncheckedIcon:CustomUncheckedIcon,customRowLabel:CustomRowLabel,customSelectAllRowLabel:CustomSelectAllRowLabel,classes:themeClasses={},className:className,classNames:classNames,disabled:disabled,disabledItemTooltip:disabledItemTooltip,field:field,getSelectAllNewValues:getSelectAllNewValues,header:header,headerLabel:headerLabel,input:input,labelKey:labelKey,list:list,meta:meta,shouldShowErrors:shouldShowErrors,titleProps:titleProps,useCustomIcons:useCustomIcons,valueKey:valueKey,withCheckRow:withCheckRow,withUpperTitle:withUpperTitle}=_ref;const shouldShowUpperTitle=(null==field||null===(_field$configuration=field.configuration)||void 0===_field$configuration?void 0:_field$configuration.ignore_title)&&withUpperTitle,handleCheckAll=()=>{getSelectAllNewValues?input.onChange(getSelectAllNewValues()):list.length!==input.value.length?input.onChange(list.map(item=>item[valueKey])):input.onChange(null)};useEffect(()=>{allChecked&&handleCheckAll()},[]);const classes=mergeClasses(themeClasses,classNames);return React.createElement("div",{className:"".concat(styles.container," ").concat(className)},shouldShowUpperTitle&&React.createElement(UTLabel,_extends({className:classes.title},titleProps,{withMarkdown:!0}),field.title),React.createElement("div",{className:header?classes.tableHeader:classes.selectAll},header&&header.map(item=>React.createElement(UTLabel,{weight:"bold",className:classes.headerItem,key:item.text},item.text)),React.createElement(UTCheckbox,{disabled:disabled,onChange:handleCheckAll,value:list.length===input.value.length,label:header?headerLabel:additionalInfo&&additionalInfo.header||defaultAdditionalInfoHeader,classNames:{root:!header&&classes.selectAllRowRoot,checkedIcon:classes.checkedIcon,uncheckedIcon:classes.uncheckedIcon},customRowLabel:CustomSelectAllRowLabel,useCustomIcons:useCustomIcons,CustomCheckedIcon:CustomCheckedIcon,CustomUncheckedIcon:CustomUncheckedIcon})),React.createElement(FormGroup,{className:"".concat(styles.rows," ").concat(classes.rowContainerClassName)},list.map(item=>React.createElement("div",{className:"\n              ".concat(styles.row,"\n              ").concat(withCheckRow&&classes.checkRowContainer,"\n              ").concat(!isEmpty(input.value)&&!!input.value.find(val=>val===item[valueKey])&&classes.customRowRootChecked," "),key:item[valueKey]},withCheckRow&&function(){let item=arguments.length>1?arguments[1]:void 0;return(arguments.length>0&&void 0!==arguments[0]?arguments[0]:[]).map(keyValue=>React.createElement(UTLabel,{variant:"xsmall",className:classes.rowItem},item[keyValue]))}([valueKey,labelKey],item),React.createElement(UTCheckbox,{disabled:disabled||item.disabled,item:item,key:item[valueKey],value:-1!==input.value.indexOf(item[valueKey]),label:withCheckRow?"":item[labelKey],onChange:()=>(id=>{const newValues=-1===input.value.indexOf(id)?[...input.value,id]:input.value.filter(elem=>elem!==id);input.onChange(isEmpty(newValues)?null:newValues)})(item[valueKey]),customRowLabel:CustomRowLabel,classNames:{root:!withCheckRow&&classes.customRowRoot,checkedIcon:classes.checkedIcon,uncheckedIcon:classes.uncheckedIcon,label:classes.label},useCustomIcons:useCustomIcons,CustomCheckedIcon:CustomCheckedIcon,CustomUncheckedIcon:CustomUncheckedIcon,tooltipContent:item.disabled&&disabledItemTooltip?disabledItemTooltip(item,list):void 0})))),additionalInfo&&additionalInfo.footer&&React.createElement(FormHelperText,null,additionalInfo.footer),shouldShowErrors&&React.createElement(FormHelperText,{error:!0},meta&&meta.error))};UTCheckList.defaultProps={list:[]},UTCheckList.propTypes={additionalInfo:shape({header:string,footer:string}),allChecked:bool,classes:objectOf(string),className:string,classNames:objectOf(string),CustomCheckedIcon:element,customRowLabel:oneOfType([func,element,string]),customSelectAllRowLabel:oneOfType([func,element,string]),CustomUncheckedIcon:element,disabled:bool,disabledItemTooltip:func,field:fieldType,getSelectAllNewValues:func,header:shape({text:string}),headerLabel:string,input:shape({onChange:func,value:any}),labelKey:string.isRequired,list:arrayOf(shape({id:oneOfType([number,string]),label:string,checked:bool})),meta:metaPropTypes,shouldShowErrors:bool,titleProps:object,useCustomIcons:bool,valueKey:string.isRequired,withCheckRow:bool,withUpperTitle:bool};export default WithTheme(retrieveStyle,retrieveMuiTheme)(UTCheckList);
+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); }
+import React, { useEffect } from 'react';
+import { arrayOf, shape, number, string, any, func, bool, element, objectOf, object, oneOfType } from 'prop-types';
+import { isEmpty } from '@widergy/web-utils/lib/array';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import WithTheme from '../../../WithTheme';
+import UTCheckbox from '../../../UTCheckbox';
+import { mergeClasses } from '../../../../utils/classesUtils';
+import UTLabel from '../../../UTLabel';
+import { fieldType, metaPropTypes } from '../../../../types/formTypes';
+import { retrieveMuiTheme, retrieveStyle } from './theme';
+import { defaultAdditionalInfoHeader } from './constants';
+import styles from './styles.module.scss';
+const UTCheckList = _ref => {
+  var _field$configuration;
+  let {
+    additionalInfo,
+    allChecked,
+    CustomCheckedIcon,
+    CustomUncheckedIcon,
+    customRowLabel: CustomRowLabel,
+    customSelectAllRowLabel: CustomSelectAllRowLabel,
+    classes: themeClasses = {},
+    className,
+    classNames,
+    disabled,
+    disabledItemTooltip,
+    field,
+    getSelectAllNewValues,
+    header,
+    headerLabel,
+    input,
+    labelKey,
+    list,
+    meta,
+    shouldShowErrors,
+    titleProps,
+    useCustomIcons,
+    valueKey,
+    withCheckRow,
+    withUpperTitle
+  } = _ref;
+  const shouldShowUpperTitle = (field === null || field === void 0 || (_field$configuration = field.configuration) === null || _field$configuration === void 0 ? void 0 : _field$configuration.ignore_title) && withUpperTitle;
+  const handleChange = id => {
+    const newValues = input.value.indexOf(id) === -1 ? [...input.value, id] : input.value.filter(elem => elem !== id);
+    input.onChange(isEmpty(newValues) ? null : newValues);
+  };
+  const handleCheckAll = () => {
+    if (getSelectAllNewValues) {
+      input.onChange(getSelectAllNewValues());
+    } else if (list.length !== input.value.length) {
+      input.onChange(list.map(item => item[valueKey]));
+    } else {
+      input.onChange(null);
+    }
+  };
+  useEffect(() => {
+    if (allChecked) handleCheckAll();
+  }, []);
+  const classes = mergeClasses(themeClasses, classNames);
+  const label = function () {
+    let key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    let item = arguments.length > 1 ? arguments[1] : undefined;
+    return key.map(keyValue => /*#__PURE__*/React.createElement(UTLabel, {
+      variant: "xsmall",
+      className: classes.rowItem
+    }, item[keyValue]));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.container, " ").concat(className)
+  }, shouldShowUpperTitle && /*#__PURE__*/React.createElement(UTLabel, _extends({
+    className: classes.title
+  }, titleProps, {
+    withMarkdown: true
+  }), field.title), /*#__PURE__*/React.createElement("div", {
+    className: header ? classes.tableHeader : classes.selectAll
+  }, header && header.map(item => /*#__PURE__*/React.createElement(UTLabel, {
+    weight: "bold",
+    className: classes.headerItem,
+    key: item.text
+  }, item.text)), /*#__PURE__*/React.createElement(UTCheckbox, {
+    disabled: disabled,
+    onChange: handleCheckAll,
+    value: list.length === input.value.length,
+    label: header ? headerLabel : additionalInfo && additionalInfo.header || defaultAdditionalInfoHeader,
+    classNames: {
+      root: !header && classes.selectAllRowRoot,
+      checkedIcon: classes.checkedIcon,
+      uncheckedIcon: classes.uncheckedIcon
+    },
+    customRowLabel: CustomSelectAllRowLabel,
+    useCustomIcons: useCustomIcons,
+    CustomCheckedIcon: CustomCheckedIcon,
+    CustomUncheckedIcon: CustomUncheckedIcon
+  })), /*#__PURE__*/React.createElement(FormGroup, {
+    className: "".concat(styles.rows, " ").concat(classes.rowContainerClassName)
+  }, list.map(item => /*#__PURE__*/React.createElement("div", {
+    className: "\n              ".concat(styles.row, "\n              ").concat(withCheckRow && classes.checkRowContainer, "\n              ").concat(!isEmpty(input.value) && !!input.value.find(val => val === item[valueKey]) && classes.customRowRootChecked, " "),
+    key: item[valueKey]
+  }, withCheckRow && label([valueKey, labelKey], item), /*#__PURE__*/React.createElement(UTCheckbox, {
+    disabled: disabled || item.disabled,
+    item: item,
+    key: item[valueKey],
+    value: input.value.indexOf(item[valueKey]) !== -1,
+    label: withCheckRow ? '' : item[labelKey],
+    onChange: () => handleChange(item[valueKey]),
+    customRowLabel: CustomRowLabel,
+    classNames: {
+      root: !withCheckRow && classes.customRowRoot,
+      checkedIcon: classes.checkedIcon,
+      uncheckedIcon: classes.uncheckedIcon,
+      label: classes.label
+    },
+    useCustomIcons: useCustomIcons,
+    CustomCheckedIcon: CustomCheckedIcon,
+    CustomUncheckedIcon: CustomUncheckedIcon,
+    tooltipContent: item.disabled && disabledItemTooltip ? disabledItemTooltip(item, list) : undefined
+  })))), additionalInfo && additionalInfo.footer && /*#__PURE__*/React.createElement(FormHelperText, null, additionalInfo.footer), shouldShowErrors && /*#__PURE__*/React.createElement(FormHelperText, {
+    error: true
+  }, meta && meta.error));
+};
+UTCheckList.defaultProps = {
+  list: []
+};
+UTCheckList.propTypes = {
+  additionalInfo: shape({
+    header: string,
+    footer: string
+  }),
+  allChecked: bool,
+  classes: objectOf(string),
+  className: string,
+  classNames: objectOf(string),
+  CustomCheckedIcon: element,
+  customRowLabel: oneOfType([func, element, string]),
+  customSelectAllRowLabel: oneOfType([func, element, string]),
+  CustomUncheckedIcon: element,
+  disabled: bool,
+  disabledItemTooltip: func,
+  field: fieldType,
+  getSelectAllNewValues: func,
+  header: shape({
+    text: string
+  }),
+  headerLabel: string,
+  input: shape({
+    onChange: func,
+    value: any
+  }),
+  labelKey: string.isRequired,
+  list: arrayOf(shape({
+    id: oneOfType([number, string]),
+    label: string,
+    checked: bool
+  })),
+  meta: metaPropTypes,
+  shouldShowErrors: bool,
+  titleProps: object,
+  useCustomIcons: bool,
+  valueKey: string.isRequired,
+  withCheckRow: bool,
+  withUpperTitle: bool
+};
+export default WithTheme(retrieveStyle, retrieveMuiTheme)(UTCheckList);

package/dist/esm/components/UTCheckList/versions/V0/theme.js

@@ -1 +1,84 @@
-import{getIn}from"seamless-immutable";import{createTheme}from"@material-ui/core/styles";import Colors from"../../../../scss/variables/colors.module.scss";import{withImportant}from"../../../../utils/classesUtils";export const retrieveMuiTheme=theme=>createTheme({typography:{fontFamily:getIn(theme,["Fonts","fontFamily"])},overrides:{MuiFormControlLabel:{label:{fontSize:getIn(theme,["UTCheckList","label","fontSize"],14),color:getIn(theme,["UTCheckList","label","color"],Colors.primary)}},MuiFormHelperText:{root:{fontSize:getIn(theme,["UTCheckList","helperText","fontSize"],14),color:getIn(theme,["UTCheckList","helperText","color"],Colors.primary),"&$error":{color:theme.Palette.error["05"]}}},MuiCheckbox:{root:{color:getIn(theme,["UTCheckList","checkbox","color"],Colors.gray)},colorPrimary:{color:getIn(theme,["UTCheckList","checkbox","color"],Colors.gray),"&$checked":{color:getIn(theme,["UTCheckList","checkbox","checkedColor"],Colors.inputPrimary)}}}}});export const retrieveStyle=_ref=>{var _theme$UTCheckList,_theme$UTCheckList2;let{theme:theme}=_ref;return{selectAllRowRoot:{color:getIn(theme,["UTCheckList","selectAllRow","root","color"]),display:getIn(theme,["UTCheckList","selectAllRow","root","display"]),flexDirection:getIn(theme,["UTCheckList","selectAllRow","root","flexDirection"]),height:getIn(theme,["UTCheckList","selectAllRow","root","height"]),justifyContent:getIn(theme,["UTCheckList","selectAllRow","root","justifyContent"]),margin:getIn(theme,["UTCheckList","selectAllRow","root","margin"]),padding:getIn(theme,["UTCheckList","selectAllRow","root","padding"])},customRowRoot:{color:getIn(theme,["UTCheckList","customRow","root","color"]),display:getIn(theme,["UTCheckList","customRow","root","display"]),flexDirection:getIn(theme,["UTCheckList","customRow","root","flexDirection"]),height:getIn(theme,["UTCheckList","customRow","root","height"]),justifyContent:getIn(theme,["UTCheckList","customRow","root","justifyContent"]),margin:getIn(theme,["UTCheckList","customRow","root","margin"]),padding:getIn(theme,["UTCheckList","customRow","root","padding"])},headerItem:{marginRight:getIn(theme,["UTCheckList","customCheckRow","headerItem","marginRight"],"60px"),fontSize:withImportant((null==theme||null===(_theme$UTCheckList=theme.UTCheckList)||void 0===_theme$UTCheckList||null===(_theme$UTCheckList=_theme$UTCheckList.customCheckRow)||void 0===_theme$UTCheckList||null===(_theme$UTCheckList=_theme$UTCheckList.headerItem)||void 0===_theme$UTCheckList?void 0:_theme$UTCheckList.fontSize)||14)},checkRowContainer:{alignItems:getIn(theme,["UTCheckList","customCheckRow","container","alignItems"]),borderTop:getIn(theme,["UTCheckList","customCheckRow","container","borderTop"]),display:getIn(theme,["UTCheckList","customCheckRow","container","display"]),flexDirection:getIn(theme,["UTCheckList","customCheckRow","container","flexDirection"]),flexShrink:getIn(theme,["UTCheckList","customCheckRow","container","flexShrink"]),height:getIn(theme,["UTCheckList","customCheckRow","container","height"]),justifyContent:getIn(theme,["UTCheckList","customCheckRow","container","justifyContent"]),padding:getIn(theme,["UTCheckList","customCheckRow","container","padding"]),width:getIn(theme,["UTCheckList","customCheckRow","container","width"])},rowItem:{display:getIn(theme,["UTCheckList","customCheckRow","rowItem","display"]),fontSize:withImportant((null==theme||null===(_theme$UTCheckList2=theme.UTCheckList)||void 0===_theme$UTCheckList2||null===(_theme$UTCheckList2=_theme$UTCheckList2.customCheckRow)||void 0===_theme$UTCheckList2||null===(_theme$UTCheckList2=_theme$UTCheckList2.rowItem)||void 0===_theme$UTCheckList2?void 0:_theme$UTCheckList2.fontSize)||12),justifyContent:getIn(theme,["UTCheckList","customCheckRow","rowItem","justifyContent"]),width:getIn(theme,["UTCheckList","customCheckRow","rowItem","width"])}}};
+import { getIn } from 'seamless-immutable';
+import { createTheme } from '@material-ui/core/styles';
+import Colors from '../../../../scss/variables/colors.module.scss';
+import { withImportant } from '../../../../utils/classesUtils';
+export const retrieveMuiTheme = theme => createTheme({
+  typography: {
+    fontFamily: getIn(theme, ['Fonts', 'fontFamily'])
+  },
+  overrides: {
+    MuiFormControlLabel: {
+      label: {
+        fontSize: getIn(theme, ['UTCheckList', 'label', 'fontSize'], 14),
+        color: getIn(theme, ['UTCheckList', 'label', 'color'], Colors.primary)
+      }
+    },
+    MuiFormHelperText: {
+      root: {
+        fontSize: getIn(theme, ['UTCheckList', 'helperText', 'fontSize'], 14),
+        color: getIn(theme, ['UTCheckList', 'helperText', 'color'], Colors.primary),
+        '&$error': {
+          color: theme.Palette.error['05']
+        }
+      }
+    },
+    MuiCheckbox: {
+      root: {
+        color: getIn(theme, ['UTCheckList', 'checkbox', 'color'], Colors.gray)
+      },
+      colorPrimary: {
+        color: getIn(theme, ['UTCheckList', 'checkbox', 'color'], Colors.gray),
+        '&$checked': {
+          color: getIn(theme, ['UTCheckList', 'checkbox', 'checkedColor'], Colors.inputPrimary)
+        }
+      }
+    }
+  }
+});
+export const retrieveStyle = _ref => {
+  var _theme$UTCheckList, _theme$UTCheckList2;
+  let {
+    theme
+  } = _ref;
+  return {
+    selectAllRowRoot: {
+      color: getIn(theme, ['UTCheckList', 'selectAllRow', 'root', 'color']),
+      display: getIn(theme, ['UTCheckList', 'selectAllRow', 'root', 'display']),
+      flexDirection: getIn(theme, ['UTCheckList', 'selectAllRow', 'root', 'flexDirection']),
+      height: getIn(theme, ['UTCheckList', 'selectAllRow', 'root', 'height']),
+      justifyContent: getIn(theme, ['UTCheckList', 'selectAllRow', 'root', 'justifyContent']),
+      margin: getIn(theme, ['UTCheckList', 'selectAllRow', 'root', 'margin']),
+      padding: getIn(theme, ['UTCheckList', 'selectAllRow', 'root', 'padding'])
+    },
+    customRowRoot: {
+      color: getIn(theme, ['UTCheckList', 'customRow', 'root', 'color']),
+      display: getIn(theme, ['UTCheckList', 'customRow', 'root', 'display']),
+      flexDirection: getIn(theme, ['UTCheckList', 'customRow', 'root', 'flexDirection']),
+      height: getIn(theme, ['UTCheckList', 'customRow', 'root', 'height']),
+      justifyContent: getIn(theme, ['UTCheckList', 'customRow', 'root', 'justifyContent']),
+      margin: getIn(theme, ['UTCheckList', 'customRow', 'root', 'margin']),
+      padding: getIn(theme, ['UTCheckList', 'customRow', 'root', 'padding'])
+    },
+    headerItem: {
+      marginRight: getIn(theme, ['UTCheckList', 'customCheckRow', 'headerItem', 'marginRight'], '60px'),
+      fontSize: withImportant((theme === null || theme === void 0 || (_theme$UTCheckList = theme.UTCheckList) === null || _theme$UTCheckList === void 0 || (_theme$UTCheckList = _theme$UTCheckList.customCheckRow) === null || _theme$UTCheckList === void 0 || (_theme$UTCheckList = _theme$UTCheckList.headerItem) === null || _theme$UTCheckList === void 0 ? void 0 : _theme$UTCheckList.fontSize) || 14)
+    },
+    checkRowContainer: {
+      alignItems: getIn(theme, ['UTCheckList', 'customCheckRow', 'container', 'alignItems']),
+      borderTop: getIn(theme, ['UTCheckList', 'customCheckRow', 'container', 'borderTop']),
+      display: getIn(theme, ['UTCheckList', 'customCheckRow', 'container', 'display']),
+      flexDirection: getIn(theme, ['UTCheckList', 'customCheckRow', 'container', 'flexDirection']),
+      flexShrink: getIn(theme, ['UTCheckList', 'customCheckRow', 'container', 'flexShrink']),
+      height: getIn(theme, ['UTCheckList', 'customCheckRow', 'container', 'height']),
+      justifyContent: getIn(theme, ['UTCheckList', 'customCheckRow', 'container', 'justifyContent']),
+      padding: getIn(theme, ['UTCheckList', 'customCheckRow', 'container', 'padding']),
+      width: getIn(theme, ['UTCheckList', 'customCheckRow', 'container', 'width'])
+    },
+    rowItem: {
+      display: getIn(theme, ['UTCheckList', 'customCheckRow', 'rowItem', 'display']),
+      fontSize: withImportant((theme === null || theme === void 0 || (_theme$UTCheckList2 = theme.UTCheckList) === null || _theme$UTCheckList2 === void 0 || (_theme$UTCheckList2 = _theme$UTCheckList2.customCheckRow) === null || _theme$UTCheckList2 === void 0 || (_theme$UTCheckList2 = _theme$UTCheckList2.rowItem) === null || _theme$UTCheckList2 === void 0 ? void 0 : _theme$UTCheckList2.fontSize) || 12),
+      justifyContent: getIn(theme, ['UTCheckList', 'customCheckRow', 'rowItem', 'justifyContent']),
+      width: getIn(theme, ['UTCheckList', 'customCheckRow', 'rowItem', 'width'])
+    }
+  };
+};

package/dist/esm/components/UTCheckList/versions/V1/constants.js

@@ -1 +1,5 @@
-export const SPACING={SMALL:"small",MEDIUM:"medium"};export const NO_CATEGORY="No Category";
+export const SPACING = {
+  SMALL: 'small',
+  MEDIUM: 'medium'
+};
+export const NO_CATEGORY = 'No Category';

package/dist/esm/components/UTCheckList/versions/V1/index.js

@@ -1 +1,168 @@
-import React,{useEffect,useCallback,useMemo}from"react";import{arrayOf,bool,elementType,func,objectOf,shape,string}from"prop-types";import{buttonTypes}from"../../../../types/buttonTypes";import{formatErrorToValidation}from"../../../UTValidation/utils";import{SPACING,BUTTON_VARIANT}from"../../../UTCheckbox/versions/V1/constants";import UTCheckBox from"../../../UTCheckbox";import UTFieldLabel from"../../../UTFieldLabel";import UTLabel from"../../../UTLabel";import UTValidation from"../../../UTValidation";import{isChecked,convertIfIsString,getPropValueBasedOnVariant}from"./utils";import styles from"./styles.module.scss";import{NO_CATEGORY}from"./constants";const UTCheckList=_ref=>{let{actions:actions,classNames:classNames={},CustomRow:CustomRow,dataTestId:dataTestId,disabled:disabled,error:error,horizontalSpacing:horizontalSpacing="medium",isSimple:isSimple=!1,itemDataTestId:itemDataTestId,onChange:onChange=()=>{},options:options,required:required,reversed:reversed,selectAllLabel:selectAllLabel,showSelectAll:showSelectAll=!0,title:title,value:value=null,variant:variant,verticalSpacing:verticalSpacing="medium"}=_ref;const reversedBasedOnVariant=getPropValueBasedOnVariant(variant,reversed,!0),smallVerticalSpacingClass=getPropValueBasedOnVariant(variant,verticalSpacing,SPACING.SMALL)===SPACING.SMALL?styles.smallVerticalSpacing:"",validationData=useMemo(()=>error&&formatErrorToValidation(error,{withIcon:!1}),[error]);useEffect(()=>{if(value){const convertedValue=convertIfIsString(value);JSON.stringify(convertedValue)!==JSON.stringify(value)&&onChange(convertedValue)}},[value,onChange]);const categorizedOptions=useMemo(()=>{const optionsGrouped=options.reduce((groupedOptions,option)=>{const category=option.category||NO_CATEGORY;return groupedOptions[category]||(groupedOptions[category]=[]),groupedOptions[category].push(option),groupedOptions},{NO_CATEGORY:[]});return Object.entries(optionsGrouped).filter(_ref2=>{let[,categoryOptions]=_ref2;return categoryOptions.length>0}).sort((_ref3,_ref4)=>{let[categoryA]=_ref3,[categoryB]=_ref4;return categoryA===NO_CATEGORY?-1:categoryB===NO_CATEGORY?1:0})},[options]),enabledOptions=useMemo(()=>options.filter(option=>!option.disabled),[options]),areAllSelected=useMemo(()=>enabledOptions.every(option=>null==value?void 0:value.includes(option.value)),[enabledOptions,value]),isIndeterminate=useMemo(()=>enabledOptions.some(option=>null==value?void 0:value.includes(option.value))&&!areAllSelected,[enabledOptions,value,areAllSelected]),handleChange=useCallback(receivedValue=>{if(isSimple)onChange([receivedValue]);else{var _value$some;const newValues=null!=value&&null!==(_value$some=value.some)&&void 0!==_value$some&&_value$some.call(value,v=>v===receivedValue)?value.filter(elem=>elem!==receivedValue):[...value||[],receivedValue];onChange(newValues)}},[value,onChange,isSimple]),handleCheckAll=useCallback(()=>{onChange(areAllSelected?[]:enabledOptions.map(item=>item.value))},[areAllSelected,enabledOptions,onChange]);return React.createElement("div",{className:"".concat(styles.container," ").concat(smallVerticalSpacingClass," ").concat(classNames.root),"data-testid":dataTestId},(title||validationData)&&React.createElement("div",{className:"".concat(styles.headerContainer," ").concat(classNames.header)},title&&React.createElement(UTFieldLabel,{actions:actions,required:required},title),validationData&&React.createElement(UTValidation,{validationData:validationData})),React.createElement("div",{className:"".concat(styles.checkboxesContainer," ").concat(smallVerticalSpacingClass," ").concat(variant===BUTTON_VARIANT&&styles.buttonVariant," ").concat(classNames.checkboxesContainer)},showSelectAll&&!isSimple&&React.createElement(UTCheckBox,{className:classNames.selectAll,dataTestId:itemDataTestId?"".concat(itemDataTestId,".selectAll"):null,disabled:disabled,indeterminate:isIndeterminate,onChange:handleCheckAll,reversed:reversedBasedOnVariant,spacing:horizontalSpacing,title:selectAllLabel,value:areAllSelected,variant:variant,version:"V1"}),categorizedOptions.map((_ref5,catIndex)=>{let[category,categoryOptions]=_ref5;const categoryKey="".concat(category,"-").concat(categoryOptions.map(opt=>opt.value).join("-"));return React.createElement("div",{className:"".concat(styles.categoryContainer," ").concat(smallVerticalSpacingClass),key:categoryKey},category!==NO_CATEGORY&&React.createElement(UTLabel,{className:styles.categoryTitle,colorTheme:"gray",variant:"small",weight:"medium"},category.toUpperCase()),categoryOptions.map((item,index)=>React.createElement(UTCheckBox,{classNames:classNames.item,CustomComponent:CustomRow?React.createElement(CustomRow,{item:item,isChecked:isChecked(item,value)}):void 0,dataTestId:itemDataTestId?"".concat(itemDataTestId,".category_").concat(catIndex,".").concat(index):null,disabled:item.disabled||disabled,isSimple:isSimple,key:item.value,icon:item.icon,onChange:()=>handleChange(item.value),reversed:isSimple?reversedBasedOnVariant:reversed,spacing:horizontalSpacing,title:item.name,value:isChecked(item,value),variant:variant,version:"V1"})))})))};UTCheckList.propTypes={actions:arrayOf(buttonTypes),classNames:objectOf(string),CustomRow:elementType,dataTestId:string,disabled:bool,error:string,horizontalSpacing:string,isSimple:bool,itemDataTestId:string,onChange:func,options:arrayOf(shape({checked:bool,disabled:bool,icon:string,name:string,value:string,category:string})),required:bool,reversed:bool,selectAllLabel:string,showSelectAll:bool,title:string,value:arrayOf(string),variant:string,verticalSpacing:string};export default UTCheckList;
+import React, { useEffect, useCallback, useMemo } from 'react';
+import { arrayOf, bool, elementType, func, objectOf, shape, string } from 'prop-types';
+import { buttonTypes } from '../../../../types/buttonTypes';
+import { formatErrorToValidation } from '../../../UTValidation/utils';
+import { SPACING, BUTTON_VARIANT } from '../../../UTCheckbox/versions/V1/constants';
+import UTCheckBox from '../../../UTCheckbox';
+import UTFieldLabel from '../../../UTFieldLabel';
+import UTLabel from '../../../UTLabel';
+import UTValidation from '../../../UTValidation';
+import { isChecked, convertIfIsString, getPropValueBasedOnVariant } from './utils';
+import styles from './styles.module.scss';
+import { NO_CATEGORY } from './constants';
+const UTCheckList = _ref => {
+  let {
+    actions,
+    classNames = {},
+    CustomRow,
+    dataTestId,
+    disabled,
+    error,
+    horizontalSpacing = 'medium',
+    isSimple = false,
+    itemDataTestId,
+    onChange = () => {},
+    options,
+    required,
+    reversed,
+    selectAllLabel,
+    showSelectAll = true,
+    title,
+    value = null,
+    variant,
+    verticalSpacing = 'medium'
+  } = _ref;
+  const reversedBasedOnVariant = getPropValueBasedOnVariant(variant, reversed, true);
+  const verticalSpacingBasedOnVariant = getPropValueBasedOnVariant(variant, verticalSpacing, SPACING.SMALL);
+  const smallVerticalSpacingClass = verticalSpacingBasedOnVariant === SPACING.SMALL ? styles.smallVerticalSpacing : '';
+  const validationData = useMemo(() => error && formatErrorToValidation(error, {
+    withIcon: false
+  }), [error]);
+  useEffect(() => {
+    if (value) {
+      const convertedValue = convertIfIsString(value);
+      if (JSON.stringify(convertedValue) !== JSON.stringify(value)) {
+        onChange(convertedValue);
+      }
+    }
+  }, [value, onChange]);
+  const categorizedOptions = useMemo(() => {
+    const optionsGrouped = options.reduce((groupedOptions, option) => {
+      const category = option.category || NO_CATEGORY;
+      if (!groupedOptions[category]) {
+        groupedOptions[category] = [];
+      }
+      groupedOptions[category].push(option);
+      return groupedOptions;
+    }, {
+      NO_CATEGORY: []
+    });
+    return Object.entries(optionsGrouped).filter(_ref2 => {
+      let [, categoryOptions] = _ref2;
+      return categoryOptions.length > 0;
+    }).sort((_ref3, _ref4) => {
+      let [categoryA] = _ref3;
+      let [categoryB] = _ref4;
+      return categoryA === NO_CATEGORY ? -1 : categoryB === NO_CATEGORY ? 1 : 0;
+    });
+  }, [options]);
+  const enabledOptions = useMemo(() => options.filter(option => !option.disabled), [options]);
+  const areAllSelected = useMemo(() => enabledOptions.every(option => value === null || value === void 0 ? void 0 : value.includes(option.value)), [enabledOptions, value]);
+  const isIndeterminate = useMemo(() => enabledOptions.some(option => value === null || value === void 0 ? void 0 : value.includes(option.value)) && !areAllSelected, [enabledOptions, value, areAllSelected]);
+  const handleChange = useCallback(receivedValue => {
+    if (isSimple) {
+      onChange([receivedValue]);
+    } else {
+      var _value$some;
+      const newValues = value !== null && value !== void 0 && (_value$some = value.some) !== null && _value$some !== void 0 && _value$some.call(value, v => v === receivedValue) ? value.filter(elem => elem !== receivedValue) : [...(value || []), receivedValue];
+      onChange(newValues);
+    }
+  }, [value, onChange, isSimple]);
+  const handleCheckAll = useCallback(() => {
+    onChange(areAllSelected ? [] : enabledOptions.map(item => item.value));
+  }, [areAllSelected, enabledOptions, onChange]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.container, " ").concat(smallVerticalSpacingClass, " ").concat(classNames.root),
+    "data-testid": dataTestId
+  }, (title || validationData) && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.headerContainer, " ").concat(classNames.header)
+  }, title && /*#__PURE__*/React.createElement(UTFieldLabel, {
+    actions: actions,
+    required: required
+  }, title), validationData && /*#__PURE__*/React.createElement(UTValidation, {
+    validationData: validationData
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.checkboxesContainer, " ").concat(smallVerticalSpacingClass, " ").concat(variant === BUTTON_VARIANT && styles.buttonVariant, " ").concat(classNames.checkboxesContainer)
+  }, showSelectAll && !isSimple && /*#__PURE__*/React.createElement(UTCheckBox, {
+    className: classNames.selectAll,
+    dataTestId: itemDataTestId ? "".concat(itemDataTestId, ".selectAll") : null,
+    disabled: disabled,
+    indeterminate: isIndeterminate,
+    onChange: handleCheckAll,
+    reversed: reversedBasedOnVariant,
+    spacing: horizontalSpacing,
+    title: selectAllLabel,
+    value: areAllSelected,
+    variant: variant,
+    version: "V1"
+  }), categorizedOptions.map((_ref5, catIndex) => {
+    let [category, categoryOptions] = _ref5;
+    const categoryKey = "".concat(category, "-").concat(categoryOptions.map(opt => opt.value).join('-'));
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(styles.categoryContainer, " ").concat(smallVerticalSpacingClass),
+      key: categoryKey
+    }, category !== NO_CATEGORY && /*#__PURE__*/React.createElement(UTLabel, {
+      className: styles.categoryTitle,
+      colorTheme: "gray",
+      variant: "small",
+      weight: "medium"
+    }, category.toUpperCase()), categoryOptions.map((item, index) => /*#__PURE__*/React.createElement(UTCheckBox, {
+      classNames: classNames.item,
+      CustomComponent: CustomRow ? /*#__PURE__*/React.createElement(CustomRow, {
+        item: item,
+        isChecked: isChecked(item, value)
+      }) : undefined,
+      dataTestId: itemDataTestId ? "".concat(itemDataTestId, ".category_").concat(catIndex, ".").concat(index) : null,
+      disabled: item.disabled || disabled,
+      isSimple: isSimple,
+      key: item.value,
+      icon: item.icon,
+      onChange: () => handleChange(item.value),
+      reversed: isSimple ? reversedBasedOnVariant : reversed,
+      spacing: horizontalSpacing,
+      title: item.name,
+      value: isChecked(item, value),
+      variant: variant,
+      version: "V1"
+    })));
+  })));
+};
+UTCheckList.propTypes = {
+  actions: arrayOf(buttonTypes),
+  classNames: objectOf(string),
+  CustomRow: elementType,
+  dataTestId: string,
+  disabled: bool,
+  error: string,
+  horizontalSpacing: string,
+  isSimple: bool,
+  itemDataTestId: string,
+  onChange: func,
+  options: arrayOf(shape({
+    checked: bool,
+    disabled: bool,
+    icon: string,
+    name: string,
+    value: string,
+    category: string
+  })),
+  required: bool,
+  reversed: bool,
+  selectAllLabel: string,
+  showSelectAll: bool,
+  title: string,
+  value: arrayOf(string),
+  variant: string,
+  verticalSpacing: string
+};
+export default UTCheckList;

package/dist/esm/components/UTCheckList/versions/V1/utils.js

@@ -1 +1,11 @@
-import isString from"lodash/isString";import{BUTTON_VARIANT}from"../../../UTCheckbox/versions/V1/constants";export const isChecked=(item,inputValue)=>{var _inputValue$some;return(null==inputValue||null===(_inputValue$some=inputValue.some)||void 0===_inputValue$some?void 0:_inputValue$some.call(inputValue,elem=>elem===item.value))||item.disabled&&item.checked};export const convertIfIsString=value=>isString(value)?0===value.length?[]:JSON.parse(value.replace(/'/g,'"')):value;export const getPropValueBasedOnVariant=(variant,prop,defaultValue)=>variant===BUTTON_VARIANT?null!=prop?prop:defaultValue:prop;
+import isString from 'lodash/isString';
+import { BUTTON_VARIANT } from '../../../UTCheckbox/versions/V1/constants';
+export const isChecked = (item, inputValue) => {
+  var _inputValue$some;
+  return (inputValue === null || inputValue === void 0 || (_inputValue$some = inputValue.some) === null || _inputValue$some === void 0 ? void 0 : _inputValue$some.call(inputValue, elem => elem === item.value)) || item.disabled && item.checked;
+};
+export const convertIfIsString = value => isString(value) ? value.length === 0 ? [] : JSON.parse(value.replace(/'/g, '"')) : value;
+export const getPropValueBasedOnVariant = (variant, prop, defaultValue) => {
+  const defaultButtonProp = prop !== null && prop !== void 0 ? prop : defaultValue;
+  return variant === BUTTON_VARIANT ? defaultButtonProp : prop;
+};