@widergy/energy-ui 3.172.1 → 3.172.3

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

@@ -1,98 +1 @@
-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;
+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;

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

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

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

@@ -1,254 +1 @@
-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;
+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;

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

@@ -1,54 +1 @@
-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,111 +1 @@
-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);
-};
+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);

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

@@ -1,10 +1 @@
-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"};