@platformatic/ui-components 0.1.138 → 0.1.140

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@platformatic/ui-components",
   "description": "Platformatic UI Components",
-  "version": "0.1.138",
+  "version": "0.1.140",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {

package/src/components/DropDown.jsx

@@ -5,7 +5,17 @@ import styles from './DropDown.module.css'
 import commonStyles from './Common.module.css'
 import PlatformaticIcon from './PlatformaticIcon'
 import { DARK_BLUE, LIGHT_BLUE, MAIN_DARK_BLUE, RICH_BLACK, WHITE } from './constants'
-function DropDown ({ pictureUrl, header, items, align, backgroundColor, textColor, borderColor, headerColor, lastButton }) {
+function DropDown ({
+  pictureUrl,
+  header,
+  items,
+  align,
+  backgroundColor,
+  textColor,
+  borderColor,
+  headerColor,
+  lastButton
+}) {
   const [open, setOpen] = useState(false)
   const borderClass = commonStyles[`bordered--${borderColor}-30`]
 
@@ -47,7 +57,7 @@ function DropDown ({ pictureUrl, header, items, align, backgroundColor, textColo
         <div className={classNameMenu}>
           {items.map((item, index) => {
             return (
-              <div className={classNameItem} key={index}>
+              <div className={classNameItem} key={index} onClick={handleOpen}>
                 {item}
               </div>
             )
@@ -95,7 +105,11 @@ DropDown.propTypes = {
   /**
    * lastButton
    */
-  lastButton: PropTypes.node
+  lastButton: PropTypes.node,
+  /**
+   * callBackClose
+   */
+  callBackClose: PropTypes.func
 }
 
 DropDown.defaultProps = {
@@ -107,6 +121,7 @@ DropDown.defaultProps = {
   textColor: MAIN_DARK_BLUE,
   headerColor: WHITE,
   borderColor: WHITE,
-  lastButton: null
+  lastButton: null,
+  callBackClose: () => {}
 }
 export default DropDown

package/src/components/SearchBarV2.jsx

@@ -13,11 +13,13 @@ function SearchBarV2 ({
   backgroundColor,
   placeholder,
   dataAttrName,
-  dataAttrValue
+  dataAttrValue,
+  inputTextClassName
 }) {
   const inputRef = useRef()
   const baseClassName = `${styles.container} ${styles.wrapperPadding} ` + commonStyles[`background-color-${backgroundColor}`]
   const [wrapperClassName, setWrapperClassName] = useState(normalClassName())
+  const inputClassName = `${styles.input} ${inputTextClassName} `
   const [isOnFocus, setIsOnFocus] = useState(false)
   const [showClear, setShowClear] = useState(false)
   const dataProps = {}
@@ -68,7 +70,7 @@ function SearchBarV2 ({
   return (
     <div className={wrapperClassName} {...dataProps}>
       <PlatformaticIcon iconName='LensIcon' color={color} disabled={!isOnFocus} size={SMALL} onClick={handleSearch} />
-      <input type='text' placeholder={placeholder} className={styles.input} ref={inputRef} onChange={handleChange} onFocus={onFocus} onBlur={onBlur} />
+      <input type='text' placeholder={placeholder} className={inputClassName} ref={inputRef} onChange={handleChange} onFocus={onFocus} onBlur={onBlur} />
       {showClear && (
         <div className={styles.clearContainer}>
           <PlatformaticIcon iconName='CircleCloseIcon' color={color} size={SMALL} onClick={handleClear} />
@@ -110,7 +112,11 @@ SearchBarV2.propTypes = {
   /**
    * dataAttrValue
   */
-  dataAttrValue: PropTypes.string
+  dataAttrValue: PropTypes.string,
+  /**
+   * inputTextClassName
+  */
+  inputTextClassName: PropTypes.string
 }
 
 SearchBarV2.defaultProps = {
@@ -121,7 +127,9 @@ SearchBarV2.defaultProps = {
   onClear: () => { },
   placeholder: 'Search',
   dataAttrName: '',
-  dataAttrValue: ''
+  dataAttrValue: '',
+  inputTextClassName: ''
+
 }
 
 export default SearchBarV2

package/src/components/SearchBarV2.module.css

@@ -1,14 +1,16 @@
 .container {
-  @apply relative flex gap-x-2 w-full h-auto border border-solid box-border rounded-md;
+  @apply flex items-center gap-x-2 w-full h-auto border border-solid box-border rounded-md relative ;
 }
 .input {
   @apply w-full p-0 bg-transparent border-none text-white ;
+  padding-block: 0px;
+  padding-inline: 0px;
 }
 .onFocus {
   @apply border-white;
 }
 .onBlur {
-  @apply border-white/15;
+  @apply border-white/70;
 }
 .fillWhite {
   @apply fill-white;
@@ -23,6 +25,6 @@
   @apply absolute right-[1rem];
 }
 .wrapperPadding {
-  @apply px-2 py-1.5;
+  @apply px-2 py-1.5 md:px-3 md:py-[8.5px];
 }
 

package/src/components/forms/Input.module.css

@@ -14,7 +14,8 @@
 }
 .afterInputIcon,
 .beforeInputIcon {
-  @apply absolute top-[50%] translate-y-[-50%] z-20;
+  @apply absolute top-[50%] z-20;
+  transform: translateY(-50%);
 }
 .beforeInputIcon {
   @apply left-0 ml-2

package/src/components/forms/Password.module.css

@@ -8,7 +8,8 @@
   @apply border border-solid box-border rounded-md px-2 py-2.5;
 }
 .afterInputIcon {
-  @apply absolute top-[50%] translate-y-[-50%] z-10 ;
+  @apply absolute top-[50%] z-10 ;
+  transform: translateY(-50%);
 }
 .afterInputIcon {
   @apply right-0 mr-2

package/src/components/forms/Select.jsx

@@ -25,8 +25,8 @@ function Select ({
   optionSelected,
   dataAttrName,
   dataAttrValue,
-  backgroundColor
-
+  backgroundColor,
+  inputTextClassName
 }) {
   const inputRef = useRef()
   const [showOptions, setShowOptions] = useState(false)
@@ -34,7 +34,7 @@ function Select ({
   const [isOnFocus, setIsOnFocus] = useState(false)
   const showError = errorMessage.length > 0
   const containerClassName = `${styles.container} ${defaultContainerClassName} `
-  let inputClassName = `${commonStyles.fullWidth} ${styles.select}`
+  let inputClassName = `${commonStyles.fullWidth} ${styles.select} ${inputTextClassName}`
   inputClassName += ' ' + styles[`select-${mainColor}`]
   inputClassName += ' ' + commonStyles[`text--${borderColor}`]
   let optionsClassName = `${styles.options} ${defaultOptionsClassName} `
@@ -47,7 +47,7 @@ function Select ({
     optionsClassName += ' ' + styles['bordered-options']
     optionsClassName += ' ' + commonStyles[`bordered--${borderListColor}-30`]
   }
-  let singleOptionClassName = `${styles.option} ` + commonStyles[`bordered--${mainColor}-15`] + ' ' + commonStyles[`hover-background-color-opaque-${mainColor}`]
+  let singleOptionClassName = `${styles.option} ` + commonStyles[`bordered--${mainColor}-70`] + ' ' + commonStyles[`hover-background-color-opaque-${mainColor}`]
   if (optionsBorderedBottom) {
     singleOptionClassName += ` ${styles['bordered-bottom']}`
   }
@@ -60,7 +60,7 @@ function Select ({
   }
 
   function normalClassName () {
-    return inputClassName + ' ' + commonStyles[`bordered--${borderColor}-15`]
+    return inputClassName + ' ' + commonStyles[`bordered--${borderColor}-70`]
   }
 
   const dataProps = {}
@@ -112,7 +112,7 @@ function Select ({
         }}
       >
         <div className={styles.liContent}>
-          {option.iconName && <PlatformaticIcon iconName={option.iconName} color={mainColor} size={SMALL} onClick={null} />}
+          {option.iconName && <PlatformaticIcon iconName={option.iconName} color={option.iconColor || mainColor} size={option.iconSize ?? SMALL} onClick={null} />}
           <span className={optionSpanClassName}>{option.label}</span>
         </div>
         {option.descriptionValue && <span className={`${optionSpanClassName} ${styles.descriptionValue}`}>{option.descriptionValue}</span>}
@@ -212,7 +212,9 @@ Select.propTypes = {
       PropTypes.string,
       PropTypes.number
     ]),
-    icon: PropTypes.string,
+    iconName: PropTypes.string,
+    iconSize: PropTypes.string,
+    iconColor: PropTypes.string,
     notSelectable: PropTypes.bool,
     notFilterable: PropTypes.bool,
     onClick: PropTypes.func,
@@ -275,7 +277,11 @@ Select.propTypes = {
   /**
    * backgroundColor
   */
-  backgroundColor: PropTypes.oneOf([MAIN_DARK_BLUE, WHITE, RICH_BLACK])
+  backgroundColor: PropTypes.oneOf([MAIN_DARK_BLUE, WHITE, RICH_BLACK]),
+  /**
+   * inputTextClassName
+  */
+  inputTextClassName: PropTypes.string
 }
 
 Select.defaultProps = {
@@ -298,7 +304,8 @@ Select.defaultProps = {
   optionSelected: null,
   dataAttrName: '',
   dataAttrValue: '',
-  backgroundColor: WHITE
+  backgroundColor: WHITE,
+  inputTextClassName: ''
 }
 
 export default Select

package/src/components/forms/Select.module.css

@@ -5,7 +5,7 @@
   @apply w-full flex items-center relative z-10;
 } 
 .select {
-  @apply px-2 h-full border border-solid box-border rounded-md py-1.5;
+  @apply py-1.5 px-2 md:px-3 md:py-[10.5px] h-full border border-solid box-border rounded-md ;
 }
 
 .select-main-dark-blue.active,