@widergy/energy-ui 3.172.3 → 3.173.0

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

@@ -1 +1,85 @@
-import{getIn}from"seamless-immutable";import Colors from"../../../../scss/variables/colors.module.scss";export const retrieveStyle=_ref=>{let{theme:theme}=_ref;return{faceButtonConfuzed:{"&:hover path, &$faceButtonSelected path":{fill:theme.Palette.error["05"]},"&:hover + $label, &$faceButtonSelected + $label":{color:theme.Palette.error["05"]}},faceButtonSad:{"&:hover path, &$faceButtonSelected path":{fill:theme.Palette.error["03"]},"&:hover + $label, &$faceButtonSelected + $label":{color:theme.Palette.error["03"]}},faceButtonEmpty:{"&:hover path, &$faceButtonSelected path":{fill:theme.Palette.warning["04"]},"&:hover + $label, &$faceButtonSelected + $label":{color:theme.Palette.warning["04"]}},faceButtonSmile:{"&:hover path, &$faceButtonSelected path":{fill:theme.Palette.success["03"]},"&:hover + $label, &$faceButtonSelected + $label":{color:theme.Palette.success["03"]}},faceButtonHappy:{"&:hover path, &$faceButtonSelected path":{fill:theme.Palette.success["05"]},"&:hover + $label, &$faceButtonSelected + $label":{color:theme.Palette.success["05"]}},faceButtonSelected:{},label:{color:"".concat(getIn(theme,["UTRating","label","color"])),fontSize:"".concat(getIn(theme,["UTRating","label","fontSize"])),right:"".concat(getIn(theme,["UTRating","label","right"]))},labelBottomFirst:{alignSelf:"".concat(getIn(theme,["UTRating","labelBottomFirst","alignSelf"])),position:"".concat(getIn(theme,["UTRating","labelBottomFirst","position"])),right:"".concat(getIn(theme,["UTRating","labelBottomFirst","right"])),top:"".concat(getIn(theme,["UTRating","labelBottomFirst","top"])),width:"".concat(getIn(theme,["UTRating","labelBottomFirst","width"]))},labelBottomLast:{alignSelf:"".concat(getIn(theme,["UTRating","labelBottomLast","alignSelf"])),position:"".concat(getIn(theme,["UTRating","labelBottomLast","position"])),right:"".concat(getIn(theme,["UTRating","labelBottomLast","right"])),top:"".concat(getIn(theme,["UTRating","labelBottomLast","top"])),width:"".concat(getIn(theme,["UTRating","labelBottomLast","width"]))},avatar:{color:"".concat(getIn(theme,["UTRating","avatar","color"],Colors.gray3)," !important")},container:{justifyContent:"".concat(getIn(theme,["UTRating","container","justifyContent"])),pointerEvents:"".concat(getIn(theme,["UTRating","container","pointerEvents"]))},circleWithTextBottom:{margin:"".concat(getIn(theme,["UTRating","circleWithTextBottom","margin"])),width:"".concat(getIn(theme,["UTRating","circleWithTextBottom","width"]))},title:{fontWeight:"".concat(getIn(theme,["UTRating","title","fontWeight"])),marginBottom:"".concat(getIn(theme,["UTRating","title","marginBottom"])),textAlign:"".concat(getIn(theme,["UTRating","title","textAlign"]))}}};
+import { getIn } from 'seamless-immutable';
+import Colors from '../../../../scss/variables/colors.module.scss';
+export const retrieveStyle = _ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    faceButtonConfuzed: {
+      '&:hover path, &$faceButtonSelected path': {
+        fill: theme.Palette.error['05']
+      },
+      '&:hover + $label, &$faceButtonSelected + $label': {
+        color: theme.Palette.error['05']
+      }
+    },
+    faceButtonSad: {
+      '&:hover path, &$faceButtonSelected path': {
+        fill: theme.Palette.error['03']
+      },
+      '&:hover + $label, &$faceButtonSelected + $label': {
+        color: theme.Palette.error['03']
+      }
+    },
+    faceButtonEmpty: {
+      '&:hover path, &$faceButtonSelected path': {
+        fill: theme.Palette.warning['04']
+      },
+      '&:hover + $label, &$faceButtonSelected + $label': {
+        color: theme.Palette.warning['04']
+      }
+    },
+    faceButtonSmile: {
+      '&:hover path, &$faceButtonSelected path': {
+        fill: theme.Palette.success['03']
+      },
+      '&:hover + $label, &$faceButtonSelected + $label': {
+        color: theme.Palette.success['03']
+      }
+    },
+    faceButtonHappy: {
+      '&:hover path, &$faceButtonSelected path': {
+        fill: theme.Palette.success['05']
+      },
+      '&:hover + $label, &$faceButtonSelected + $label': {
+        color: theme.Palette.success['05']
+      }
+    },
+    faceButtonSelected: {},
+    label: {
+      color: "".concat(getIn(theme, ['UTRating', 'label', 'color'])),
+      fontSize: "".concat(getIn(theme, ['UTRating', 'label', 'fontSize'])),
+      right: "".concat(getIn(theme, ['UTRating', 'label', 'right']))
+    },
+    labelBottomFirst: {
+      alignSelf: "".concat(getIn(theme, ['UTRating', 'labelBottomFirst', 'alignSelf'])),
+      position: "".concat(getIn(theme, ['UTRating', 'labelBottomFirst', 'position'])),
+      right: "".concat(getIn(theme, ['UTRating', 'labelBottomFirst', 'right'])),
+      top: "".concat(getIn(theme, ['UTRating', 'labelBottomFirst', 'top'])),
+      width: "".concat(getIn(theme, ['UTRating', 'labelBottomFirst', 'width']))
+    },
+    labelBottomLast: {
+      alignSelf: "".concat(getIn(theme, ['UTRating', 'labelBottomLast', 'alignSelf'])),
+      position: "".concat(getIn(theme, ['UTRating', 'labelBottomLast', 'position'])),
+      right: "".concat(getIn(theme, ['UTRating', 'labelBottomLast', 'right'])),
+      top: "".concat(getIn(theme, ['UTRating', 'labelBottomLast', 'top'])),
+      width: "".concat(getIn(theme, ['UTRating', 'labelBottomLast', 'width']))
+    },
+    avatar: {
+      color: "".concat(getIn(theme, ['UTRating', 'avatar', 'color'], Colors.gray3), " !important")
+    },
+    container: {
+      justifyContent: "".concat(getIn(theme, ['UTRating', 'container', 'justifyContent'])),
+      pointerEvents: "".concat(getIn(theme, ['UTRating', 'container', 'pointerEvents']))
+    },
+    circleWithTextBottom: {
+      margin: "".concat(getIn(theme, ['UTRating', 'circleWithTextBottom', 'margin'])),
+      width: "".concat(getIn(theme, ['UTRating', 'circleWithTextBottom', 'width']))
+    },
+    title: {
+      fontWeight: "".concat(getIn(theme, ['UTRating', 'title', 'fontWeight'])),
+      marginBottom: "".concat(getIn(theme, ['UTRating', 'title', 'marginBottom'])),
+      textAlign: "".concat(getIn(theme, ['UTRating', 'title', 'textAlign']))
+    }
+  };
+};

package/dist/esm/components/UTRating/versions/V1/README.md

@@ -0,0 +1,44 @@
+# UTRating
+
+## Description
+
+`UTRating` is a configurable rating input component that enables users to easily provide feedback through visual indicators.
+
+## Props
+
+| Name                | Type      | Default | Description                                                                                               |
+| ------------------- | --------- | ------- | --------------------------------------------------------------------------------------------------------  |
+| classNames          | object    |         | Custom CSS class names for styling the component.                                                         |
+| dataTestId          | string    |         | Unique identifier for testing purposes.                                                                   |
+| disabled            | bool      | false   | Indicates whether the input is disabled and cannot be interacted with.                                    |
+| error               | string    |         | Error message to display when validation fails or an issue occurs.                                        |
+| helpTextEnd         | string    |         | Additional help text displayed at the end of the input for user guidance.                                 |
+| helpTextStart       | string    |         | Additional help text displayed at the beginning of the input for user guidance.                           |
+| onChange            | func      |         | Callback function invoked when the input value changes.                                                   |
+| options             | array     |         | Array of options available for selection.                                                                 |
+| required            | bool      | false   | Indicates whether the input is mandatory for form submission.                                             |
+| title               | string    |         | Title for the input, providing context to the user.                                                       |
+| validations         | array     |         | Array of validation rules to be applied to the input value.                                               |
+| value               | string    |         | The current value of the input.                                                                           |
+| variant             | string    | `star`  | Defines the visual style component.                                                                       |
+
+
+### options
+
+`options` is an array of objects with a `value` and a `name` key. The values should be in the range of 0-10, except for the `faces` variant. In desktop view, all options are displayed in one row; in responsive view, they are broken into 2 rows if there are more than 5 options.
+
+### variant
+
+The value of `variant` must be one of the following:
+
+- `faces`: the options are represented as face icons. Option values should exclusively be between 1 and 5, values outside this range are not supported.
+- `star`: the options are represented as star icons.
+- `text`: the options are represented as the option's `text`.
+
+### Structure of Validations
+
+For detailed information about the structure of validations, please refer to the UTValidation component documentation.
+
+### Handling Errors
+
+Errors can be displayed below the text input using either the `error` prop or the `validations` prop.

package/dist/esm/components/UTRating/versions/V1/components/Option/index.js

@@ -1 +1,46 @@
-import{bool,func,object,string}from"prop-types";import React from"react";import{RATING_VARIANTS}from"../../constants";import UTButton from"../../../../../UTButton";import WithTheme from"../../../../../WithTheme";import{getIcon,getVariant}from"./utils";import{retrieveStyle}from"./theme";import styles from"./styles.module.scss";const Option=_ref=>{let{classes:classes,disabled:disabled,error:error,isSelected:isSelected,name:name,onChange:onChange,value:value,variant:variant,wrapperStyle:wrapperStyle}=_ref;return React.createElement("div",{style:wrapperStyle},React.createElement(UTButton,{classNames:{root:"".concat(styles.option," ").concat(error?classes.error:""),text:styles.text},colorTheme:isSelected?"primary":"secondary",disabled:disabled,Icon:getIcon(variant,value,isSelected),onClick:()=>onChange(value),variant:getVariant(variant,isSelected)},RATING_VARIANTS.TEXT===variant?name:null))};Option.propTypes={classes:object,disabled:bool,error:string,isSelected:bool,name:string,onChange:func,value:string,variant:string,wrapperStyle:object};export default WithTheme(retrieveStyle)(Option);
+import { bool, func, object, string } from 'prop-types';
+import React from 'react';
+import { RATING_VARIANTS } from '../../constants';
+import UTButton from '../../../../../UTButton';
+import WithTheme from '../../../../../WithTheme';
+import { getIcon, getVariant } from './utils';
+import { retrieveStyle } from './theme';
+import styles from './styles.module.scss';
+const Option = _ref => {
+  let {
+    classes,
+    disabled,
+    error,
+    isSelected,
+    name,
+    onChange,
+    value,
+    variant,
+    wrapperStyle
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    style: wrapperStyle
+  }, /*#__PURE__*/React.createElement(UTButton, {
+    classNames: {
+      root: "".concat(styles.option, " ").concat(error ? classes.error : ''),
+      text: styles.text
+    },
+    colorTheme: isSelected ? 'primary' : 'secondary',
+    disabled: disabled,
+    Icon: getIcon(variant, value, isSelected),
+    onClick: () => onChange(value),
+    variant: getVariant(variant, isSelected)
+  }, RATING_VARIANTS.TEXT === variant ? name : null));
+};
+Option.propTypes = {
+  classes: object,
+  disabled: bool,
+  error: string,
+  isSelected: bool,
+  name: string,
+  onChange: func,
+  value: string,
+  variant: string,
+  wrapperStyle: object
+};
+export default WithTheme(retrieveStyle)(Option);

package/dist/esm/components/UTRating/versions/V1/components/Option/theme.js

@@ -1 +1,10 @@
-export const retrieveStyle=_ref=>{let{theme:theme}=_ref;return{error:{borderColor:"".concat(theme.Palette.error["05"]," !important")}}};
+export const retrieveStyle = _ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    error: {
+      borderColor: "".concat(theme.Palette.error['05'], " !important")
+    }
+  };
+};

package/dist/esm/components/UTRating/versions/V1/components/Option/utils.js

@@ -1 +1,13 @@
-import{RATING_VARIANTS}from"../../constants";export const getIcon=(variant,value,isSelected)=>({[RATING_VARIANTS.TEXT]:null,[RATING_VARIANTS.FACES]:{1:"IconMoodSad",2:"IconMoodConfuzed",3:"IconMoodEmpty",4:"IconMoodSmile",5:"IconMoodHappy"}[value],[RATING_VARIANTS.STAR]:isSelected?"IconStarFilled":"IconStar"}[variant]);export const getVariant=(variant,isSelected)=>isSelected&&variant!==RATING_VARIANTS.STAR?"outlined":"shadow";
+import { RATING_VARIANTS } from '../../constants';
+export const getIcon = (variant, value, isSelected) => ({
+  [RATING_VARIANTS.TEXT]: null,
+  [RATING_VARIANTS.FACES]: {
+    1: 'IconMoodSad',
+    2: 'IconMoodConfuzed',
+    3: 'IconMoodEmpty',
+    4: 'IconMoodSmile',
+    5: 'IconMoodHappy'
+  }[value],
+  [RATING_VARIANTS.STAR]: isSelected ? 'IconStarFilled' : 'IconStar'
+})[variant];
+export const getVariant = (variant, isSelected) => !isSelected || variant === RATING_VARIANTS.STAR ? 'shadow' : 'outlined';

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

@@ -1 +1,5 @@
-export const RATING_VARIANTS={FACES:"faces",STAR:"star",TEXT:"text"};
+export const RATING_VARIANTS = {
+  FACES: 'faces',
+  STAR: 'star',
+  TEXT: 'text'
+};

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

@@ -1 +1,88 @@
-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,{useMemo}from"react";import{func,string,bool,object,array}from"prop-types";import UTLabel from"../../../UTLabel";import UTFieldLabel from"../../../UTFieldLabel";import{formatErrorToValidation}from"../../../UTValidation/utils";import UTValidation from"../../../UTValidation";import{useScreenSize}from"../../../../utils/useScreenSize";import styles from"./styles.module.scss";import Option from"./components/Option";import{RATING_VARIANTS}from"./constants";const UTRating=_ref=>{let{classNames:classNames={},dataTestId:dataTestId,disabled:disabled,error:error,forceMultiRow:forceMultiRow,helpTextEnd:helpTextEnd,helpTextStart:helpTextStart,onChange:onChange,options:options=[],required:required,title:title,validations:validations,value:value,variant:variant=RATING_VARIANTS.STAR}=_ref;const{isMobileOrTablet:isMobileOrTablet}=useScreenSize(),validationData=useMemo(()=>validations||error&&formatErrorToValidation(error),[error,validations]),valueIndex=options.map(_ref2=>{let{value:optionValue}=_ref2;return optionValue}).indexOf(value),isSelected=index=>-1!==valueIndex&&variant===RATING_VARIANTS.STAR?index<=valueIndex:index===valueIndex,wrapperStyle={boxSizing:"border-box",display:"flex",flex:(isMobileOrTablet||forceMultiRow)&&options.length>5?"0 0 calc(".concat(100/Math.ceil(options.length/2),"% - 4px)"):"1 "};return React.createElement("div",{className:"".concat(styles.container," ").concat(classNames.container),"data-testid":dataTestId},title&&React.createElement(UTFieldLabel,{required:required},title),React.createElement("div",{className:"".concat(styles.optionsContainer," ").concat(classNames.optionsContainer," ").concat(isMobileOrTablet?styles.responsive:""," ").concat(forceMultiRow?styles.forceMultiRow:"")},options.map((option,index)=>React.createElement(Option,_extends({},option,{disabled:disabled,error:error,isSelected:isSelected(index),key:option.value,onChange:onChange,variant:variant,wrapperStyle:wrapperStyle})))),helpTextStart&&React.createElement("div",{className:"".concat(styles.helpTextContainer," ").concat(classNames.helpTextContainer)},React.createElement(UTLabel,{colorTheme:"gray",variant:"small"},helpTextStart),helpTextEnd&&React.createElement(UTLabel,{colorTheme:"gray",variant:"small"},helpTextEnd)),validationData&&React.createElement(UTValidation,{validationData:validationData}))};UTRating.propTypes={classNames:object,dataTestId:string,disabled:bool,error:string,forceMultiRow:bool,helpTextEnd:string,helpTextStart:string,onChange:func,options:array,required:bool,title:string,validations:array,value:string,variant:string};export default UTRating;
+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, { useMemo } from 'react';
+import { func, string, bool, object, array } from 'prop-types';
+import UTLabel from '../../../UTLabel';
+import UTFieldLabel from '../../../UTFieldLabel';
+import { formatErrorToValidation } from '../../../UTValidation/utils';
+import UTValidation from '../../../UTValidation';
+import { useScreenSize } from '../../../../utils/useScreenSize';
+import styles from './styles.module.scss';
+import Option from './components/Option';
+import { RATING_VARIANTS } from './constants';
+const UTRating = _ref => {
+  let {
+    classNames = {},
+    dataTestId,
+    disabled,
+    error,
+    forceMultiRow,
+    helpTextEnd,
+    helpTextStart,
+    onChange,
+    options = [],
+    required,
+    title,
+    validations,
+    value,
+    variant = RATING_VARIANTS.STAR
+  } = _ref;
+  const {
+    isMobileOrTablet
+  } = useScreenSize();
+  const validationData = useMemo(() => validations || error && formatErrorToValidation(error), [error, validations]);
+  const valueIndex = options.map(_ref2 => {
+    let {
+      value: optionValue
+    } = _ref2;
+    return optionValue;
+  }).indexOf(value);
+  const isSelected = index => valueIndex !== -1 && variant === RATING_VARIANTS.STAR ? index <= valueIndex : index === valueIndex;
+  const wrapperStyle = {
+    boxSizing: 'border-box',
+    display: 'flex',
+    flex: (isMobileOrTablet || forceMultiRow) && options.length > 5 ? "0 0 calc(".concat(100 / Math.ceil(options.length / 2), "% - 4px)") : '1 '
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.container, " ").concat(classNames.container),
+    "data-testid": dataTestId
+  }, title && /*#__PURE__*/React.createElement(UTFieldLabel, {
+    required: required
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.optionsContainer, " ").concat(classNames.optionsContainer, " ").concat(isMobileOrTablet ? styles.responsive : '', " ").concat(forceMultiRow ? styles.forceMultiRow : '')
+  }, options.map((option, index) => /*#__PURE__*/React.createElement(Option, _extends({}, option, {
+    disabled: disabled,
+    error: error,
+    isSelected: isSelected(index),
+    key: option.value,
+    onChange: onChange,
+    variant: variant,
+    wrapperStyle: wrapperStyle
+  })))), helpTextStart && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.helpTextContainer, " ").concat(classNames.helpTextContainer)
+  }, /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "gray",
+    variant: "small"
+  }, helpTextStart), helpTextEnd && /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "gray",
+    variant: "small"
+  }, helpTextEnd)), validationData && /*#__PURE__*/React.createElement(UTValidation, {
+    validationData: validationData
+  }));
+};
+UTRating.propTypes = {
+  classNames: object,
+  dataTestId: string,
+  disabled: bool,
+  error: string,
+  forceMultiRow: bool,
+  helpTextEnd: string,
+  helpTextStart: string,
+  onChange: func,
+  options: array,
+  required: bool,
+  title: string,
+  validations: array,
+  value: string,
+  variant: string
+};
+export default UTRating;

package/dist/esm/components/UTRipple/Ripple.js

@@ -1 +1,60 @@
-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,{useState}from"react";import{Transition}from"react-transition-group";import{element,any}from"prop-types";import styles from"./styles.module.scss";const Ripple=_ref=>{let{elem:elem,event:event,...other}=_ref;const[enter,setEnter]=useState(!1),[leaving,setLeaving]=useState(!1),rect=elem?elem.getBoundingClientRect():{width:0,height:0,left:0,top:0};let rippleX,rippleY;if(0===event.clientX&&0===event.clientY||!event.clientX&&!event.touches)rippleX=Math.round(rect.width/2),rippleY=Math.round(rect.height/2);else{const clientX=event.clientX?event.clientX:event.touches[0].clientX,clientY=event.clientY?event.clientY:event.touches[0].clientY;rippleX=Math.round(clientX-rect.left),rippleY=Math.round(clientY-rect.top)}const sizeX=2*Math.max(Math.abs((elem?elem.clientWidth:0)-rippleX),rippleX)+2,sizeY=2*Math.max(Math.abs((elem?elem.clientHeight:0)-rippleY),rippleY)+2,rippleSize=Math.sqrt(sizeX**2+sizeY**2),rippleStyles={width:rippleSize,height:rippleSize,top:-rippleSize/2+rippleY,left:-rippleSize/2+rippleX};return React.createElement(Transition,_extends({timeout:500,onEnter:()=>setEnter(!0),unmountOnExit:!0,onExit:()=>{setLeaving(!0)}},other),React.createElement("span",{className:"".concat(styles.ripple," ").concat(enter&&styles.rippleEnter),style:rippleStyles},React.createElement("span",{className:"".concat(styles.child," ").concat(leaving&&styles.rippleExit)})))};Ripple.propTypes={elem:element,event:any};export default Ripple;
+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, { useState } from 'react';
+import { Transition } from 'react-transition-group';
+import { element, any } from 'prop-types';
+import styles from './styles.module.scss';
+const Ripple = _ref => {
+  let {
+    elem,
+    event,
+    ...other
+  } = _ref;
+  const [enter, setEnter] = useState(false);
+  const [leaving, setLeaving] = useState(false);
+  const handleEnter = () => setEnter(true);
+  const handleExit = () => {
+    setLeaving(true);
+  };
+  const rect = elem ? elem.getBoundingClientRect() : {
+    width: 0,
+    height: 0,
+    left: 0,
+    top: 0
+  };
+  let rippleX;
+  let rippleY;
+  if (event.clientX === 0 && event.clientY === 0 || !event.clientX && !event.touches) {
+    rippleX = Math.round(rect.width / 2);
+    rippleY = Math.round(rect.height / 2);
+  } else {
+    const clientX = event.clientX ? event.clientX : event.touches[0].clientX;
+    const clientY = event.clientY ? event.clientY : event.touches[0].clientY;
+    rippleX = Math.round(clientX - rect.left);
+    rippleY = Math.round(clientY - rect.top);
+  }
+  const sizeX = Math.max(Math.abs((elem ? elem.clientWidth : 0) - rippleX), rippleX) * 2 + 2;
+  const sizeY = Math.max(Math.abs((elem ? elem.clientHeight : 0) - rippleY), rippleY) * 2 + 2;
+  const rippleSize = Math.sqrt(sizeX ** 2 + sizeY ** 2);
+  const rippleStyles = {
+    width: rippleSize,
+    height: rippleSize,
+    top: -(rippleSize / 2) + rippleY,
+    left: -(rippleSize / 2) + rippleX
+  };
+  return /*#__PURE__*/React.createElement(Transition, _extends({
+    timeout: 500,
+    onEnter: handleEnter,
+    unmountOnExit: true,
+    onExit: handleExit
+  }, other), /*#__PURE__*/React.createElement("span", {
+    className: "".concat(styles.ripple, " ").concat(enter && styles.rippleEnter),
+    style: rippleStyles
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "".concat(styles.child, " ").concat(leaving && styles.rippleExit)
+  })));
+};
+Ripple.propTypes = {
+  elem: element,
+  event: any
+};
+export default Ripple;

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

@@ -1 +1,44 @@
-import React,{useState,useEffect,useCallback}from"react";import{TransitionGroup}from"react-transition-group";import{bool}from"prop-types";import{refType}from"../../types/commonTypes";import Ripple from"./Ripple";import styles from"./styles.module.scss";const UTRipple=_ref=>{let{elem:elem,withRipple:withRipple}=_ref;const[ripples,setRipples]=useState([]),setNewRipples=useCallback(event=>{setRipples(prevRipples=>[...prevRipples,React.createElement(Ripple,{event:event,elem:elem,key:Math.random()})])},[elem]),removeRipple=useCallback(()=>setRipples(prevRipples=>prevRipples.slice(1)),[]);return useEffect(()=>(withRipple&&elem&&(elem.addEventListener("mousedown",setNewRipples),elem.addEventListener("mouseup",removeRipple),elem.addEventListener("mouseleave",removeRipple)),()=>{withRipple&&elem&&(elem.removeEventListener("mousedown",setNewRipples),elem.removeEventListener("mouseup",removeRipple),elem.removeEventListener("mouseleave",removeRipple))}),[elem,setNewRipples,removeRipple,withRipple]),React.createElement(TransitionGroup,{component:"span",className:styles.root},ripples)};UTRipple.propTypes={elem:refType,withRipple:bool};export default UTRipple;
+import React, { useState, useEffect, useCallback } from 'react';
+import { TransitionGroup } from 'react-transition-group';
+import { bool } from 'prop-types';
+import { refType } from '../../types/commonTypes';
+import Ripple from './Ripple';
+import styles from './styles.module.scss';
+const UTRipple = _ref => {
+  let {
+    elem,
+    withRipple
+  } = _ref;
+  const [ripples, setRipples] = useState([]);
+  const setNewRipples = useCallback(event => {
+    setRipples(prevRipples => [...prevRipples, /*#__PURE__*/React.createElement(Ripple, {
+      event: event,
+      elem: elem,
+      key: Math.random()
+    })]);
+  }, [elem]);
+  const removeRipple = useCallback(() => setRipples(prevRipples => prevRipples.slice(1)), []);
+  useEffect(() => {
+    if (withRipple && elem) {
+      elem.addEventListener('mousedown', setNewRipples);
+      elem.addEventListener('mouseup', removeRipple);
+      elem.addEventListener('mouseleave', removeRipple);
+    }
+    return () => {
+      if (withRipple && elem) {
+        elem.removeEventListener('mousedown', setNewRipples);
+        elem.removeEventListener('mouseup', removeRipple);
+        elem.removeEventListener('mouseleave', removeRipple);
+      }
+    };
+  }, [elem, setNewRipples, removeRipple, withRipple]);
+  return /*#__PURE__*/React.createElement(TransitionGroup, {
+    component: "span",
+    className: styles.root
+  }, ripples);
+};
+UTRipple.propTypes = {
+  elem: refType,
+  withRipple: bool
+};
+export default UTRipple;

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

@@ -0,0 +1,36 @@
+# UTSearchField
+
+## Description
+
+`UTSearchField` is a customizable search field component. It includes a search icon on the left and an optional clear button on the right when there is text in the input field.
+
+## Props
+
+| Name         | Type   | Default | Description                                                 |
+| ------------ | ------ | ------- | ----------------------------------------------------------- |
+| className    | string |         | CSS class to customize the root element of the input field. |
+| dataTestId   | string |         | Identifier used for testing purposes.                       |
+| dataKeyboard | string |         | Identifier used for keyboardSupport.                        |
+| disabled     | bool   |         | Disables the input field if set to true.                    |
+| id           | string |         | Unique identifier for the input field.                      |
+| onBlur       | func   |         | Function to call when the input field loses focus.          |
+| onChange     | func   |         | Function to call when the input field value changes.        |
+| onFocus      | func   |         | Function to call when the input field gains focus.          |
+| placeholder  | string |         | Placeholder text for the input field.                       |
+| size         | string |         | Size of the input field. One of: `small`, `large`.          |
+| type         | string |         | Type of input (e.g., 'numeric', 'password', 'text' ).       |
+| value        | string | null    | The value of the input field.                               |
+| variant      | string | gray    | Variant of the input field. One of: `white`, `gray`.        |
+
+### Adornments
+
+`UTSearchField` utilizes adornments on both sides of the input field:
+
+- **Left Adornment**: A search icon is always displayed on the left side of the input field.
+- **Right Adornment**: A clear (reset) button is displayed on the right side only when there is a value in the input field.
+
+## Additional Information
+
+- The clear button appears when the input field contains text and clears the input when clicked.
+- The search icon can change its style based on the focus state of the input field.
+- The component is built on top of `UTBaseInputField`, inheriting its flexible adornment handling.

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

@@ -1 +1,92 @@
-import{string,bool,func,objectOf,shape}from"prop-types";import React from"react";import{COMPONENT_KEYS}from"../UTBaseInputField/constants";import UTBaseInputField from"../UTBaseInputField";import WithTheme from"../WithTheme";import{retrieveStyle}from"./theme";import styles from"./styles.module.scss";const UTSearchField=_ref=>{let{classes:classes,className:className,customAction:customAction,dataKeyboard:dataKeyboard,dataTestId:dataTestId,disabled:disabled,id:id,onBlur:onBlur,onChange:onChange=()=>{},onFocus:onFocus,placeholder:placeholder,size:size,type:type,value:value=null,variant:variant="gray"}=_ref;const action={Icon:"IconX",onClick:()=>{onChange("")},size:"small"},leftAdornments=[{name:COMPONENT_KEYS.ICON,props:{Icon:"IconSearch",changeOnFocus:!0,shade:"02"}}],rightAdornments=value||customAction?[{name:COMPONENT_KEYS.ACTION,props:{action:customAction||action}}]:[];return React.createElement(UTBaseInputField,{alwaysShowPlaceholder:!0,classNames:{container:"".concat(styles.container," ").concat(className),input:classes.input},dataKeyboard:dataKeyboard||"search",dataTestId:dataTestId,disabled:disabled,id:id,inputSize:size,leftAdornments:leftAdornments,onBlur:onBlur,onChange:onChange,onFocus:onFocus,placeholder:placeholder,rightAdornments:rightAdornments,type:type,value:value,variant:variant})};export const propTypes={className:string,classes:objectOf(string),customAction:shape({Icon:string,onClick:func,size:string}),dataKeyboard:string,dataTestId:string,disabled:bool,id:string,onBlur:func,onChange:func,onFocus:func,placeholder:string,size:string,type:string,value:string,variant:string};UTSearchField.propTypes=propTypes;export default WithTheme(retrieveStyle)(UTSearchField);
+import { string, bool, func, objectOf, shape } from 'prop-types';
+import React from 'react';
+import { COMPONENT_KEYS } from '../UTBaseInputField/constants';
+import UTBaseInputField from '../UTBaseInputField';
+import WithTheme from '../WithTheme';
+import { retrieveStyle } from './theme';
+import styles from './styles.module.scss';
+const UTSearchField = _ref => {
+  let {
+    classes,
+    className,
+    customAction,
+    dataKeyboard,
+    dataTestId,
+    disabled,
+    id,
+    onBlur,
+    onChange = () => {},
+    onFocus,
+    placeholder,
+    size,
+    type,
+    value = null,
+    variant = 'gray'
+  } = _ref;
+  const clearText = () => {
+    onChange('');
+  };
+  const action = {
+    Icon: 'IconX',
+    onClick: clearText,
+    size: 'small'
+  };
+  const leftAdornments = [{
+    name: COMPONENT_KEYS.ICON,
+    props: {
+      Icon: 'IconSearch',
+      changeOnFocus: true,
+      shade: '02'
+    }
+  }];
+  const rightAdornments = value || customAction ? [{
+    name: COMPONENT_KEYS.ACTION,
+    props: {
+      action: customAction || action
+    }
+  }] : [];
+  return /*#__PURE__*/React.createElement(UTBaseInputField, {
+    alwaysShowPlaceholder: true,
+    classNames: {
+      container: "".concat(styles.container, " ").concat(className),
+      input: classes.input
+    },
+    dataKeyboard: dataKeyboard || 'search',
+    dataTestId: dataTestId,
+    disabled: disabled,
+    id: id,
+    inputSize: size,
+    leftAdornments: leftAdornments,
+    onBlur: onBlur,
+    onChange: onChange,
+    onFocus: onFocus,
+    placeholder: placeholder,
+    rightAdornments: rightAdornments,
+    type: type,
+    value: value,
+    variant: variant
+  });
+};
+export const propTypes = {
+  className: string,
+  classes: objectOf(string),
+  customAction: shape({
+    Icon: string,
+    onClick: func,
+    size: string
+  }),
+  dataKeyboard: string,
+  dataTestId: string,
+  disabled: bool,
+  id: string,
+  onBlur: func,
+  onChange: func,
+  onFocus: func,
+  placeholder: string,
+  size: string,
+  type: string,
+  value: string,
+  variant: string
+};
+UTSearchField.propTypes = propTypes;
+export default WithTheme(retrieveStyle)(UTSearchField);