@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/esm/components/UTSelect/versions/V1/components/ListboxComponent/index.js

@@ -1 +1,98 @@
-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 isEmpty from"lodash/isEmpty";import React,{useLayoutEffect,useMemo,useRef,useState}from"react";import ScrollBar from"react-perfect-scrollbar";import{arrayOf,bool,elementType,func,oneOfType,shape,string,number}from"prop-types";import isFinite from"lodash/isFinite";import UTLabel from"../../../../../UTLabel";import UTCheckList from"../../../../../UTCheckList";import{SPACING}from"../../../../../UTCheckList/versions/V1/constants";import styles from"./styles.module.scss";import{DEFAULT_MAX_HEIGHT}from"./constants";const ListboxComponent=_ref=>{let{CustomRow:CustomRow,dataTestId:dataTestId,filteredOptions:filteredOptions,fixedBottomOption:fixedBottomOption,handleSelectionChange:handleSelectionChange,horizontalSpacing:horizontalSpacing=SPACING.SMALL,itemDataTestId:itemDataTestId,maxHeight:maxHeight=DEFAULT_MAX_HEIGHT,multiple:multiple,noMatchesText:noMatchesText,value:value,verticalSpacing:verticalSpacing=SPACING.SMALL}=_ref;const hasNoOptions=useMemo(()=>isEmpty(filteredOptions),[filteredOptions]),maxHeightValid=useMemo(()=>isFinite(maxHeight)?maxHeight:DEFAULT_MAX_HEIGHT,[maxHeight]),fixedSectionRef=useRef(null),[reservedHeight,setReservedHeight]=useState(0);useLayoutEffect(()=>{fixedSectionRef.current&&setReservedHeight(fixedSectionRef.current.offsetHeight)},[fixedBottomOption]);const scrollMaxHeight=maxHeightValid-reservedHeight,checkListProps={CustomRow:CustomRow,horizontalSpacing:horizontalSpacing,isSimple:!multiple,itemDataTestId:itemDataTestId,onChange:handleSelectionChange,reversed:!0,showSelectAll:!1,value:multiple?value:[value],variant:"button",version:"V1",verticalSpacing:verticalSpacing};return React.createElement("div",{className:styles.listbox},hasNoOptions?React.createElement(UTLabel,{colorTheme:"gray",className:styles.noOptionsLabel},noMatchesText):React.createElement(ScrollBar,{style:{maxHeight:scrollMaxHeight}},React.createElement(UTCheckList,_extends({},checkListProps,{dataTestId:dataTestId,options:filteredOptions}))),fixedBottomOption&&React.createElement("div",{ref:fixedSectionRef},React.createElement("div",{className:styles.fixedOptionDivider}),React.createElement(UTCheckList,_extends({},checkListProps,{onChange:newValues=>{multiple||0!==newValues.length?handleSelectionChange(newValues):handleSelectionChange([fixedBottomOption.value])},options:[fixedBottomOption]}))))};ListboxComponent.propTypes={CustomRow:elementType,dataTestId:string,filteredOptions:arrayOf(shape({name:string,value:oneOfType([string,number])})),fixedBottomOption:shape({name:string,value:oneOfType([string,number])}),handleSelectionChange:func,horizontalSpacing:string,itemDataTestId:string,maxHeight:number,multiple:bool,noMatchesText:string,value:oneOfType([arrayOf(oneOfType([string,number])),string,number]),verticalSpacing:string};export default ListboxComponent;
+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 isEmpty from 'lodash/isEmpty';
+import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import ScrollBar from 'react-perfect-scrollbar';
+import { arrayOf, bool, elementType, func, oneOfType, shape, string, number } from 'prop-types';
+import isFinite from 'lodash/isFinite';
+import UTLabel from '../../../../../UTLabel';
+import UTCheckList from '../../../../../UTCheckList';
+import { SPACING } from '../../../../../UTCheckList/versions/V1/constants';
+import styles from './styles.module.scss';
+import { DEFAULT_MAX_HEIGHT } from './constants';
+const ListboxComponent = _ref => {
+  let {
+    CustomRow,
+    dataTestId,
+    filteredOptions,
+    fixedBottomOption,
+    handleSelectionChange,
+    horizontalSpacing = SPACING.SMALL,
+    itemDataTestId,
+    maxHeight = DEFAULT_MAX_HEIGHT,
+    multiple,
+    noMatchesText,
+    value,
+    verticalSpacing = SPACING.SMALL
+  } = _ref;
+  const hasNoOptions = useMemo(() => isEmpty(filteredOptions), [filteredOptions]);
+  const maxHeightValid = useMemo(() => isFinite(maxHeight) ? maxHeight : DEFAULT_MAX_HEIGHT, [maxHeight]);
+  const fixedSectionRef = useRef(null);
+  const [reservedHeight, setReservedHeight] = useState(0);
+  useLayoutEffect(() => {
+    if (fixedSectionRef.current) {
+      setReservedHeight(fixedSectionRef.current.offsetHeight);
+    }
+  }, [fixedBottomOption]);
+  const scrollMaxHeight = maxHeightValid - reservedHeight;
+  const handleFixedOptionChange = newValues => {
+    if (!multiple && newValues.length === 0) {
+      handleSelectionChange([fixedBottomOption.value]);
+    } else {
+      handleSelectionChange(newValues);
+    }
+  };
+  const checkListProps = {
+    CustomRow,
+    horizontalSpacing,
+    isSimple: !multiple,
+    itemDataTestId,
+    onChange: handleSelectionChange,
+    reversed: true,
+    showSelectAll: false,
+    value: multiple ? value : [value],
+    variant: 'button',
+    version: 'V1',
+    verticalSpacing
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.listbox
+  }, hasNoOptions ? /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "gray",
+    className: styles.noOptionsLabel
+  }, noMatchesText) : /*#__PURE__*/React.createElement(ScrollBar, {
+    style: {
+      maxHeight: scrollMaxHeight
+    }
+  }, /*#__PURE__*/React.createElement(UTCheckList, _extends({}, checkListProps, {
+    dataTestId: dataTestId,
+    options: filteredOptions
+  }))), fixedBottomOption && /*#__PURE__*/React.createElement("div", {
+    ref: fixedSectionRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.fixedOptionDivider
+  }), /*#__PURE__*/React.createElement(UTCheckList, _extends({}, checkListProps, {
+    onChange: handleFixedOptionChange,
+    options: [fixedBottomOption]
+  }))));
+};
+ListboxComponent.propTypes = {
+  CustomRow: elementType,
+  dataTestId: string,
+  filteredOptions: arrayOf(shape({
+    name: string,
+    value: oneOfType([string, number])
+  })),
+  fixedBottomOption: shape({
+    name: string,
+    value: oneOfType([string, number])
+  }),
+  handleSelectionChange: func,
+  horizontalSpacing: string,
+  itemDataTestId: string,
+  maxHeight: number,
+  multiple: bool,
+  noMatchesText: string,
+  value: oneOfType([arrayOf(oneOfType([string, number])), string, number]),
+  verticalSpacing: string
+};
+export default ListboxComponent;

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

@@ -1 +1,4 @@
-export const VARIANTS={picker:"picker",select:"select"};
+export const VARIANTS = {
+  picker: 'picker',
+  select: 'select'
+};

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

@@ -1 +1,254 @@
-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 clone from"lodash/clone";import React,{useMemo,useState,useRef,useCallback,useEffect}from"react";import{Autocomplete}from"@material-ui/lab";import Popper from"@material-ui/core/Popper";import UTFieldLabel from"../../../UTFieldLabel";import UTLabel from"../../../UTLabel";import UTPaper from"../../../UTPaper";import UTValidation from"../../../UTValidation";import{formatErrorToValidation}from"../../../UTValidation/utils";import{TITLE_VARIANTS}from"../../../../constants/inputs";import InputComponent from"./components/InputComponent";import ListboxComponent from"./components/ListboxComponent";import{utselectTypes}from"./types";import styles from"./styles.module.scss";import{VARIANTS}from"./constants";import{getLeftAdornments,getRightAdornments,shouldReset,getDisplayValue,sortOptions}from"./utils";const UTSelect=_ref=>{let{action:action,actions:titleActions,alwaysShowPlaceholder:alwaysShowPlaceholder=!0,autocompleteProps:autocompleteProps={},className:className,clearable:clearable=!0,CustomRow:CustomRow,dataTestId:dataTestId,disabled:disabled,disableFilterOptions:disableFilterOptions=!1,error:error,errorDataTestId:errorDataTestId,fixedBottomOption:fixedBottomOption,freeWidth:freeWidth=!1,hideSingleCategoryTitle:hideSingleCategoryTitle=!1,paperClassName:paperClassName,helpText:helpText,icon:icon,inputSize:inputSize,itemDataTestId:itemDataTestId,listDataTestId:listDataTestId,listProps:listProps={},menuWidth:menuWidth,multiple:multiple=!1,noMatchesText:noMatchesText="No hay coincidencias con tu búsqueda",noOptionsText:noOptionsText="No hay opciones disponibles",onChange:onChange=()=>{},onChangeSearchTerm:onChangeSearchTerm=()=>{},options:options=[],placeholder:placeholder,prefix:prefix,readOnly:readOnly,required:required,suffix:suffix,title:title,titleVariant:titleVariant=TITLE_VARIANTS.large,value:value=(multiple?[]:null),variant:variant=VARIANTS.select,withAutoReset:withAutoReset=!0}=_ref;const optionsSortedByCategory=useMemo(()=>{if(!options||0===options.length)return[];const clonedOptions=clone(options).map(option=>({...option,name:"".concat(option.name)})),categoryOrder=new Map;clonedOptions.forEach(option=>{categoryOrder.has(option.category)||categoryOrder.set(option.category,categoryOrder.size)});const sorted=clonedOptions.sort((a,b)=>categoryOrder.get(a.category)-categoryOrder.get(b.category));return hideSingleCategoryTitle&&categoryOrder.size<=1?sorted.map(_ref2=>{let{category:_category,...rest}=_ref2;return rest}):sorted},[options,hideSingleCategoryTitle]),displayOptions=useMemo(()=>fixedBottomOption?[...optionsSortedByCategory,fixedBottomOption]:optionsSortedByCategory,[optionsSortedByCategory,fixedBottomOption]),[isPopperOpen,setIsPopperOpen]=useState(!1),[searchTerm,setSearchTerm]=useState(getDisplayValue(value,displayOptions,multiple)),[showClearButton,setShowClearButton]=useState(!!searchTerm),[sortedOptions,setSortedOptions]=useState(optionsSortedByCategory),inputRef=useRef(null);useEffect(()=>{const fixedIsSelected=fixedBottomOption&&(multiple?Array.isArray(value)&&value.includes(fixedBottomOption.value):value===(null==fixedBottomOption?void 0:fixedBottomOption.value));withAutoReset&&!fixedIsSelected&&shouldReset(value,optionsSortedByCategory,multiple)&&(onChange(null),setSortedOptions(sortOptions(optionsSortedByCategory,null,multiple)))},[multiple,onChange,optionsSortedByCategory,value,withAutoReset,fixedBottomOption]),useEffect(()=>{if(!isPopperOpen){const displayValue=getDisplayValue(value,displayOptions,multiple);setSearchTerm(displayValue),setShowClearButton(displayValue)}},[value,displayOptions,multiple,isPopperOpen]),useEffect(()=>{isPopperOpen&&setSortedOptions(sortOptions(optionsSortedByCategory,value,multiple))},[optionsSortedByCategory]),useEffect(()=>{setSortedOptions(sortOptions(optionsSortedByCategory,value,multiple))},[]),useEffect(()=>{isPopperOpen&&setSortedOptions(sortOptions(optionsSortedByCategory,value,multiple))},[isPopperOpen]);const validationData=useMemo(()=>error&&formatErrorToValidation(error),[error]),isPicker=variant===VARIANTS.picker,filteredOptions=useMemo(()=>{const base=disableFilterOptions||isPicker?sortedOptions:sortedOptions.filter(option=>"".concat(option.name).toLowerCase().includes(searchTerm.toLowerCase()));return fixedBottomOption?base.filter(opt=>opt.value!==fixedBottomOption.value):base},[sortedOptions,searchTerm,disableFilterOptions,isPicker,fixedBottomOption]),handleSearchChange=useCallback(searchValue=>{null==onChangeSearchTerm||onChangeSearchTerm(searchValue),setSearchTerm(searchValue)},[onChangeSearchTerm]),clearSearchInputValue=useCallback(inputValue=>{setIsPopperOpen(!1);const displayValue=getDisplayValue(inputValue,displayOptions,multiple);handleSearchChange(displayValue),setShowClearButton(""!==displayValue)},[getDisplayValue,displayOptions,multiple,handleSearchChange]),handleSelectionChange=newValues=>{const selectedValue=multiple?newValues:newValues.length>0?newValues[0]:"";var _inputRef$current;(onChange(selectedValue),multiple)||(null===(_inputRef$current=inputRef.current)||void 0===_inputRef$current||_inputRef$current.blur(),clearSearchInputValue(selectedValue))},handleInputFocus=()=>{setShowClearButton(!1),handleSearchChange(""),setIsPopperOpen(!0)},handleInputBlur=()=>{clearSearchInputValue(value)},handleClearSelection=()=>{onChange(multiple?[]:null),handleSearchChange(""),setShowClearButton(!1),setIsPopperOpen(!1)},leftAdornments=useMemo(()=>getLeftAdornments({error:error,multiple:multiple,value:value,prefix:prefix,icon:icon}),[multiple,value,prefix,icon]),rightAdornments=useMemo(()=>getRightAdornments({action:action,clearable:clearable,disabled:disabled,handleClearSelection:handleClearSelection,readOnly:readOnly,showClearButton:showClearButton,suffix:suffix,variant:variant}),[suffix,showClearButton,clearable,disabled,action,handleClearSelection,variant]),listBoxProps=useMemo(()=>({CustomRow:CustomRow,dataTestId:listDataTestId,filteredOptions:filteredOptions,fixedBottomOption:fixedBottomOption,handleSelectionChange:handleSelectionChange,itemDataTestId:itemDataTestId,multiple:multiple,noMatchesText:noMatchesText,value:value,...listProps}),[CustomRow,filteredOptions,fixedBottomOption,handleSelectionChange,multiple,noMatchesText,value,listProps]),menuWidthRef=useRef(menuWidth);menuWidthRef.current=menuWidth;const CustomPopper=useCallback(props=>{const width=menuWidthRef.current;return React.createElement(Popper,_extends({},props,width?{placement:"bottom-start"}:{},{style:width?{...props.style,width:width}:props.style}))},[]),noOptionsTextComponent=React.createElement(UTLabel,{className:styles.noOptionsLabel,colorTheme:"gray"},noOptionsText);return React.createElement("div",{className:"".concat(styles.container," ").concat(className)},title&&React.createElement(UTFieldLabel,{actions:titleActions,required:required,size:titleVariant},title),React.createElement(Autocomplete,_extends({classes:{...freeWidth&&!menuWidth?{popper:styles.popper}:{},...paperClassName?{paper:paperClassName}:{}},PopperComponent:CustomPopper,disabled:disabled||readOnly,getOptionLabel:option=>"".concat(option.name),ListboxComponent:ListboxComponent,ListboxProps:listBoxProps,multiple:multiple,noOptionsText:noOptionsTextComponent,onClose:()=>setIsPopperOpen(!1),onOpen:()=>setIsPopperOpen(!0),open:isPopperOpen,options:optionsSortedByCategory,PaperComponent:UTPaper,renderInput:params=>React.createElement(InputComponent,{alwaysShowPlaceholder:alwaysShowPlaceholder,dataTestId:dataTestId,disabled:disabled,error:error,inputRef:inputRef,inputSize:inputSize,leftAdornments:leftAdornments,onBlur:handleInputBlur,onChange:handleSearchChange,onFocus:handleInputFocus,params:params,placeholder:placeholder,readOnly:readOnly,rightAdornments:rightAdornments,value:searchTerm,variant:variant})},autocompleteProps)),helpText&&React.createElement(UTLabel,{colorTheme:"gray",variant:"small"},helpText),validationData&&React.createElement(UTValidation,{dataTestId:errorDataTestId,validationData:validationData}))};UTSelect.propTypes=utselectTypes;export default UTSelect;
+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 clone from 'lodash/clone';
+import React, { useMemo, useState, useRef, useCallback, useEffect } from 'react';
+import { Autocomplete } from '@material-ui/lab';
+import Popper from '@material-ui/core/Popper';
+import UTFieldLabel from '../../../UTFieldLabel';
+import UTLabel from '../../../UTLabel';
+import UTPaper from '../../../UTPaper';
+import UTValidation from '../../../UTValidation';
+import { formatErrorToValidation } from '../../../UTValidation/utils';
+import { TITLE_VARIANTS } from '../../../../constants/inputs';
+import InputComponent from './components/InputComponent';
+import ListboxComponent from './components/ListboxComponent';
+import { utselectTypes } from './types';
+import styles from './styles.module.scss';
+import { VARIANTS } from './constants';
+import { getLeftAdornments, getRightAdornments, shouldReset, getDisplayValue, sortOptions } from './utils';
+const UTSelect = _ref => {
+  let {
+    action,
+    actions: titleActions,
+    alwaysShowPlaceholder = true,
+    autocompleteProps = {},
+    className,
+    clearable = true,
+    CustomRow,
+    dataTestId,
+    disabled,
+    disableFilterOptions = false,
+    error,
+    errorDataTestId,
+    fixedBottomOption,
+    freeWidth = false,
+    hideSingleCategoryTitle = false,
+    paperClassName,
+    helpText,
+    icon,
+    inputSize,
+    itemDataTestId,
+    listDataTestId,
+    listProps = {},
+    menuWidth,
+    multiple = false,
+    noMatchesText = 'No hay coincidencias con tu búsqueda',
+    noOptionsText = 'No hay opciones disponibles',
+    onChange = () => {},
+    onChangeSearchTerm = () => {},
+    options = [],
+    placeholder,
+    prefix,
+    readOnly,
+    required,
+    suffix,
+    title,
+    titleVariant = TITLE_VARIANTS.large,
+    value = multiple ? [] : null,
+    variant = VARIANTS.select,
+    withAutoReset = true
+  } = _ref;
+  const optionsSortedByCategory = useMemo(() => {
+    if (!options || options.length === 0) return [];
+    const clonedOptions = clone(options).map(option => ({
+      ...option,
+      name: "".concat(option.name)
+    }));
+    const categoryOrder = new Map();
+    clonedOptions.forEach(option => {
+      if (!categoryOrder.has(option.category)) categoryOrder.set(option.category, categoryOrder.size);
+    });
+    const sorted = clonedOptions.sort((a, b) => categoryOrder.get(a.category) - categoryOrder.get(b.category));
+    if (hideSingleCategoryTitle && categoryOrder.size <= 1) {
+      return sorted.map(_ref2 => {
+        let {
+          category: _category,
+          ...rest
+        } = _ref2;
+        return rest;
+      });
+    }
+    return sorted;
+  }, [options, hideSingleCategoryTitle]);
+  const displayOptions = useMemo(() => fixedBottomOption ? [...optionsSortedByCategory, fixedBottomOption] : optionsSortedByCategory, [optionsSortedByCategory, fixedBottomOption]);
+  const [isPopperOpen, setIsPopperOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState(getDisplayValue(value, displayOptions, multiple));
+  const [showClearButton, setShowClearButton] = useState(!!searchTerm);
+  const [sortedOptions, setSortedOptions] = useState(optionsSortedByCategory);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    const fixedIsSelected = fixedBottomOption && (multiple ? Array.isArray(value) && value.includes(fixedBottomOption.value) : value === (fixedBottomOption === null || fixedBottomOption === void 0 ? void 0 : fixedBottomOption.value));
+    if (withAutoReset && !fixedIsSelected && shouldReset(value, optionsSortedByCategory, multiple)) {
+      onChange(null);
+      setSortedOptions(sortOptions(optionsSortedByCategory, null, multiple));
+    }
+  }, [multiple, onChange, optionsSortedByCategory, value, withAutoReset, fixedBottomOption]);
+  useEffect(() => {
+    if (!isPopperOpen) {
+      const displayValue = getDisplayValue(value, displayOptions, multiple);
+      setSearchTerm(displayValue);
+      setShowClearButton(displayValue);
+    }
+  }, [value, displayOptions, multiple, isPopperOpen]);
+  useEffect(() => {
+    if (isPopperOpen) {
+      setSortedOptions(sortOptions(optionsSortedByCategory, value, multiple));
+    }
+  }, [optionsSortedByCategory]);
+  useEffect(() => {
+    setSortedOptions(sortOptions(optionsSortedByCategory, value, multiple));
+  }, []);
+  useEffect(() => {
+    if (isPopperOpen) setSortedOptions(sortOptions(optionsSortedByCategory, value, multiple));
+  }, [isPopperOpen]);
+  const validationData = useMemo(() => error && formatErrorToValidation(error), [error]);
+  const isPicker = variant === VARIANTS.picker;
+  const filteredOptions = useMemo(() => {
+    const base = disableFilterOptions || isPicker ? sortedOptions : sortedOptions.filter(option => "".concat(option.name).toLowerCase().includes(searchTerm.toLowerCase()));
+    if (!fixedBottomOption) return base;
+    return base.filter(opt => opt.value !== fixedBottomOption.value);
+  }, [sortedOptions, searchTerm, disableFilterOptions, isPicker, fixedBottomOption]);
+  const handleSearchChange = useCallback(searchValue => {
+    onChangeSearchTerm === null || onChangeSearchTerm === void 0 || onChangeSearchTerm(searchValue);
+    setSearchTerm(searchValue);
+  }, [onChangeSearchTerm]);
+  const clearSearchInputValue = useCallback(inputValue => {
+    setIsPopperOpen(false);
+    const displayValue = getDisplayValue(inputValue, displayOptions, multiple);
+    handleSearchChange(displayValue);
+    setShowClearButton(displayValue !== '');
+  }, [getDisplayValue, displayOptions, multiple, handleSearchChange]);
+  const handleSelectionChange = newValues => {
+    const selectedValue = multiple ? newValues : newValues.length > 0 ? newValues[0] : '';
+    onChange(selectedValue);
+    if (!multiple) {
+      var _inputRef$current;
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.blur();
+      clearSearchInputValue(selectedValue);
+    }
+  };
+  const handleInputFocus = () => {
+    setShowClearButton(false);
+    handleSearchChange('');
+    setIsPopperOpen(true);
+  };
+  const handleInputBlur = () => {
+    clearSearchInputValue(value);
+  };
+  const handleClearSelection = () => {
+    const clearedValue = multiple ? [] : null;
+    onChange(clearedValue);
+    handleSearchChange('');
+    setShowClearButton(false);
+    setIsPopperOpen(false);
+  };
+  const leftAdornments = useMemo(() => getLeftAdornments({
+    error,
+    multiple,
+    value,
+    prefix,
+    icon
+  }), [multiple, value, prefix, icon]);
+  const rightAdornments = useMemo(() => getRightAdornments({
+    action,
+    clearable,
+    disabled,
+    handleClearSelection,
+    readOnly,
+    showClearButton,
+    suffix,
+    variant
+  }), [suffix, showClearButton, clearable, disabled, action, handleClearSelection, variant]);
+  const listBoxProps = useMemo(() => ({
+    CustomRow,
+    dataTestId: listDataTestId,
+    filteredOptions,
+    fixedBottomOption,
+    handleSelectionChange,
+    itemDataTestId,
+    multiple,
+    noMatchesText,
+    value,
+    ...listProps
+  }), [CustomRow, filteredOptions, fixedBottomOption, handleSelectionChange, multiple, noMatchesText, value, listProps]);
+  const menuWidthRef = useRef(menuWidth);
+  menuWidthRef.current = menuWidth;
+  const CustomPopper = useCallback(props => {
+    const width = menuWidthRef.current;
+    return /*#__PURE__*/React.createElement(Popper, _extends({}, props, width ? {
+      placement: 'bottom-start'
+    } : {}, {
+      style: width ? {
+        ...props.style,
+        width
+      } : props.style
+    }));
+  }, []);
+  const noOptionsTextComponent = /*#__PURE__*/React.createElement(UTLabel, {
+    className: styles.noOptionsLabel,
+    colorTheme: "gray"
+  }, noOptionsText);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.container, " ").concat(className)
+  }, title && /*#__PURE__*/React.createElement(UTFieldLabel, {
+    actions: titleActions,
+    required: required,
+    size: titleVariant
+  }, title), /*#__PURE__*/React.createElement(Autocomplete, _extends({
+    classes: {
+      ...(freeWidth && !menuWidth ? {
+        popper: styles.popper
+      } : {}),
+      ...(paperClassName ? {
+        paper: paperClassName
+      } : {})
+    },
+    PopperComponent: CustomPopper,
+    disabled: disabled || readOnly,
+    getOptionLabel: option => "".concat(option.name),
+    ListboxComponent: ListboxComponent,
+    ListboxProps: listBoxProps,
+    multiple: multiple,
+    noOptionsText: noOptionsTextComponent,
+    onClose: () => setIsPopperOpen(false),
+    onOpen: () => setIsPopperOpen(true),
+    open: isPopperOpen,
+    options: optionsSortedByCategory,
+    PaperComponent: UTPaper,
+    renderInput: params => /*#__PURE__*/React.createElement(InputComponent, {
+      alwaysShowPlaceholder: alwaysShowPlaceholder,
+      dataTestId: dataTestId,
+      disabled: disabled,
+      error: error,
+      inputRef: inputRef,
+      inputSize: inputSize,
+      leftAdornments: leftAdornments,
+      onBlur: handleInputBlur,
+      onChange: handleSearchChange,
+      onFocus: handleInputFocus,
+      params: params,
+      placeholder: placeholder,
+      readOnly: readOnly,
+      rightAdornments: rightAdornments,
+      value: searchTerm,
+      variant: variant
+    })
+  }, autocompleteProps)), helpText && /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "gray",
+    variant: "small"
+  }, helpText), validationData && /*#__PURE__*/React.createElement(UTValidation, {
+    dataTestId: errorDataTestId,
+    validationData: validationData
+  }));
+};
+UTSelect.propTypes = utselectTypes;
+export default UTSelect;

package/dist/esm/components/UTSelect/versions/V1/types.js

@@ -1 +1,54 @@
-import{arrayOf,bool,elementType,func,number,object,oneOf,oneOfType,shape,string}from"prop-types";import{buttonTypes}from"../../../../types/buttonTypes";import{VARIANTS}from"./constants";export const utselectTypes={action:shape({Icon:string,onClick:func,size:string}),actions:arrayOf(buttonTypes),alwaysShowPlaceholder:bool,autocompleteProps:object,className:string,clearable:bool,CustomRow:elementType,dataTestId:string,disabled:bool,disableFilterOptions:bool,error:string,errorDataTestId:string,fixedBottomOption:shape({name:string,value:oneOfType([string,number])}),freeWidth:bool,hideSingleCategoryTitle:bool,paperClassName:string,helpText:string,icon:string,inputSize:string,itemDataTestId:string,listDataTestId:string,listProps:object,menuWidth:string,multiple:bool,noMatchesText:string,noOptionsText:string,onChange:func,onChangeSearchTerm:func,options:arrayOf(shape({name:string,value:oneOfType([string,number])})),placeholder:string,prefix:string,readOnly:bool,required:bool,suffix:string,title:string,titleVariant:string,value:oneOfType([string,arrayOf(oneOfType([string,number]))]),variant:oneOf(Object.values(VARIANTS)),withAutoReset:bool};
+import { arrayOf, bool, elementType, func, number, object, oneOf, oneOfType, shape, string } from 'prop-types';
+import { buttonTypes } from '../../../../types/buttonTypes';
+import { VARIANTS } from './constants';
+export const utselectTypes = {
+  action: shape({
+    Icon: string,
+    onClick: func,
+    size: string
+  }),
+  actions: arrayOf(buttonTypes),
+  alwaysShowPlaceholder: bool,
+  autocompleteProps: object,
+  className: string,
+  clearable: bool,
+  CustomRow: elementType,
+  dataTestId: string,
+  disabled: bool,
+  disableFilterOptions: bool,
+  error: string,
+  errorDataTestId: string,
+  fixedBottomOption: shape({
+    name: string,
+    value: oneOfType([string, number])
+  }),
+  freeWidth: bool,
+  hideSingleCategoryTitle: bool,
+  paperClassName: string,
+  helpText: string,
+  icon: string,
+  inputSize: string,
+  itemDataTestId: string,
+  listDataTestId: string,
+  listProps: object,
+  menuWidth: string,
+  multiple: bool,
+  noMatchesText: string,
+  noOptionsText: string,
+  onChange: func,
+  onChangeSearchTerm: func,
+  options: arrayOf(shape({
+    name: string,
+    value: oneOfType([string, number])
+  })),
+  placeholder: string,
+  prefix: string,
+  readOnly: bool,
+  required: bool,
+  suffix: string,
+  title: string,
+  titleVariant: string,
+  value: oneOfType([string, arrayOf(oneOfType([string, number]))]),
+  variant: oneOf(Object.values(VARIANTS)),
+  withAutoReset: bool
+};

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

@@ -1 +1,111 @@
-import clone from"lodash/clone";import isEmpty from"lodash/isEmpty";import{COLOR_THEMES}from"../../../../constants/Palette";import{COMPONENT_KEYS}from"../../../UTBaseInputField/constants";import{NO_CATEGORY}from"../../../UTCheckList/versions/V1/constants";import{VARIANTS}from"./constants";const shouldResetMultipleSelect=(value,options)=>!isEmpty(value)&&(isEmpty(options)||value.some(el=>!options.some(opt=>opt.value===el)&&!options.some(opt=>opt.subOptions&&opt.subOptions.some(sub=>sub.value===el)))),shouldResetSimpleSelect=(value,options)=>value&&(isEmpty(options)||!options.some(el=>el.value===value)&&!options.some(el=>el.subOptions&&el.subOptions.some(sub=>sub.value===value)));export const shouldReset=(value,options,isMultiple)=>isMultiple?shouldResetMultipleSelect(value,options):shouldResetSimpleSelect(value,options);export const getDisplayValue=(inputValue,options,multiple)=>{if(null==inputValue||""===inputValue)return"";const findLabel=optionValue=>{var _options$find;return"".concat(null===(_options$find=options.find(o=>o.value===optionValue))||void 0===_options$find?void 0:_options$find.name)||""};return multiple?inputValue.map(findLabel).join(", "):findLabel(inputValue)};export const getLeftAdornments=_ref=>{let{error:error,multiple:multiple,prefix:prefix,value:value,icon:icon}=_ref;const adornments=[];return error&&adornments.push({name:COMPONENT_KEYS.ICON,props:{showOnlyOnError:!0}}),multiple&&!isEmpty(value)&&adornments.push({name:COMPONENT_KEYS.BADGE,props:{text:value.length,colorTheme:error?COLOR_THEMES.error:COLOR_THEMES.accent}}),prefix&&adornments.push({name:COMPONENT_KEYS.PREFIX,props:{text:prefix}}),icon&&adornments.push({name:COMPONENT_KEYS.ICON,props:{Icon:icon}}),adornments};export const getRightAdornments=_ref2=>{let{action:action,clearable:clearable,disabled:disabled,handleClearSelection:handleClearSelection,readOnly:readOnly,showClearButton:showClearButton,suffix:suffix,variant:variant}=_ref2;const adornments=[];return suffix&&adornments.push({name:COMPONENT_KEYS.SUFFIX,props:{text:suffix}}),showClearButton&&clearable&&!disabled&&!readOnly?adornments.push({key:"clearAction",name:COMPONENT_KEYS.ACTION,props:{action:{Icon:"IconX",onClick:handleClearSelection,size:"small"}}}):adornments.push({name:COMPONENT_KEYS.ICON,props:{Icon:"IconChevronDown",changeIconOnError:!1,changeOnError:!0,...variant===VARIANTS.picker&&!disabled&&{colorTheme:COLOR_THEMES.dark}}}),action&&adornments.push({name:COMPONENT_KEYS.ACTION,props:{action:action}}),adornments};export const sortOptions=(options,value,multiple)=>clone(options).map(option=>({...option,category:multiple?null!=value&&value.includes(option.value)?NO_CATEGORY:option.category:option.value===value?NO_CATEGORY:option.category})).sort((a,b)=>a.category===NO_CATEGORY?-1:b.category===NO_CATEGORY?1:0);
+import clone from 'lodash/clone';
+import isEmpty from 'lodash/isEmpty';
+import { COLOR_THEMES } from '../../../../constants/Palette';
+import { COMPONENT_KEYS } from '../../../UTBaseInputField/constants';
+import { NO_CATEGORY } from '../../../UTCheckList/versions/V1/constants';
+import { VARIANTS } from './constants';
+const shouldResetMultipleSelect = (value, options) => !isEmpty(value) && (isEmpty(options) || value.some(el => !options.some(opt => opt.value === el) && !options.some(opt => opt.subOptions && opt.subOptions.some(sub => sub.value === el))));
+const shouldResetSimpleSelect = (value, options) => value && (isEmpty(options) || !options.some(el => el.value === value) && !options.some(el => el.subOptions && el.subOptions.some(sub => sub.value === value)));
+export const shouldReset = (value, options, isMultiple) => {
+  if (isMultiple) return shouldResetMultipleSelect(value, options);
+  return shouldResetSimpleSelect(value, options);
+};
+export const getDisplayValue = (inputValue, options, multiple) => {
+  if (inputValue === null || inputValue === undefined || inputValue === '') return '';
+  const findLabel = optionValue => {
+    var _options$find;
+    return "".concat((_options$find = options.find(o => o.value === optionValue)) === null || _options$find === void 0 ? void 0 : _options$find.name) || '';
+  };
+  const displayValue = multiple ? inputValue.map(findLabel).join(', ') : findLabel(inputValue);
+  return displayValue;
+};
+export const getLeftAdornments = _ref => {
+  let {
+    error,
+    multiple,
+    prefix,
+    value,
+    icon
+  } = _ref;
+  const adornments = [];
+  if (error) adornments.push({
+    name: COMPONENT_KEYS.ICON,
+    props: {
+      showOnlyOnError: true
+    }
+  });
+  if (multiple && !isEmpty(value)) adornments.push({
+    name: COMPONENT_KEYS.BADGE,
+    props: {
+      text: value.length,
+      colorTheme: error ? COLOR_THEMES.error : COLOR_THEMES.accent
+    }
+  });
+  if (prefix) adornments.push({
+    name: COMPONENT_KEYS.PREFIX,
+    props: {
+      text: prefix
+    }
+  });
+  if (icon) adornments.push({
+    name: COMPONENT_KEYS.ICON,
+    props: {
+      Icon: icon
+    }
+  });
+  return adornments;
+};
+export const getRightAdornments = _ref2 => {
+  let {
+    action,
+    clearable,
+    disabled,
+    handleClearSelection,
+    readOnly,
+    showClearButton,
+    suffix,
+    variant
+  } = _ref2;
+  const adornments = [];
+  if (suffix) adornments.push({
+    name: COMPONENT_KEYS.SUFFIX,
+    props: {
+      text: suffix
+    }
+  });
+  if (showClearButton && clearable && !disabled && !readOnly) adornments.push({
+    key: 'clearAction',
+    name: COMPONENT_KEYS.ACTION,
+    props: {
+      action: {
+        Icon: 'IconX',
+        onClick: handleClearSelection,
+        size: 'small'
+      }
+    }
+  });else adornments.push({
+    name: COMPONENT_KEYS.ICON,
+    props: {
+      Icon: 'IconChevronDown',
+      changeIconOnError: false,
+      changeOnError: true,
+      ...(variant === VARIANTS.picker && !disabled && {
+        colorTheme: COLOR_THEMES.dark
+      })
+    }
+  });
+  if (action) adornments.push({
+    name: COMPONENT_KEYS.ACTION,
+    props: {
+      action
+    }
+  });
+  return adornments;
+};
+export const sortOptions = (options, value, multiple) => {
+  const copiedOptions = clone(options);
+  return copiedOptions.map(option => ({
+    ...option,
+    category: multiple ? value !== null && value !== void 0 && value.includes(option.value) ? NO_CATEGORY : option.category : option.value === value ? NO_CATEGORY : option.category
+  })).sort((a, b) => a.category === NO_CATEGORY ? -1 : b.category === NO_CATEGORY ? 1 : 0);
+};

package/dist/esm/components/UTSelectableCard/README.md

@@ -0,0 +1,23 @@
+# UTSelectableCard
+
+### Description
+Selectable card component.
+
+### Props
+
+| Name            | Type                                     | Default   |Description                                                           |
+|-----------------|------------------------------------------|-----------|----------------------------------------------------------------------|
+| aditionalInfo   | object: { title: '', description: ''}    |           | Aditional information to show in the card                            |
+| appareance      | string: 'white' \| 'gray' \|             | white     | The card appareance.                                                 |
+| checkIcon       | bool                                     | true      | Indicates if on "active" status shows a check icon                   |
+| classes         | string                                   |           | Classes returned by UTLabel's own [theme](./theme.js#)retrieveStyle. |
+| className       | string                                   |           | Additional classes.                                                  |
+| description     | string                                   |           | Card description                                                     |
+| disabled        | bool                                     | false     | Indicates if the card is disabled                                    |
+| Icon            | node                                     |           | An Icon component that can be displayed.                             |
+| OnClick         | func                                     |           | Function to be executed when clicking the card                       |
+| selected        | bool                                     | false     | Indicates if the current card has "Active" status                    |
+| size            | string: 'medium' \| 'small' \|           | medium    | Card size                                                            |
+| titleText       | string                                   |           | Title to show in the card                                            |
+| tooltip         | string                                   |           | Help icon tooltip as text                                            |
+

package/dist/esm/components/UTSelectableCard/constants.js

@@ -1 +1,10 @@
-export const APPEARANCES={GRAY:"gray",WHITE:"white"};export const SIZES={XLARGE:"xlarge",LARGE:"large",MEDIUM:"medium",SMALL:"small"};
+export const APPEARANCES = {
+  GRAY: 'gray',
+  WHITE: 'white'
+};
+export const SIZES = {
+  XLARGE: 'xlarge',
+  LARGE: 'large',
+  MEDIUM: 'medium',
+  SMALL: 'small'
+};