@platformatic/ui-components 0.1.118 → 0.1.120

package/.github/workflows/ci.yml

@@ -14,7 +14,7 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v3
         with:
           node-version: 18

package/.nvmrc

@@ -1 +1 @@
-18.17.1
+18.18.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@platformatic/ui-components",
   "description": "Platformatic UI Components",
-  "version": "0.1.118",
+  "version": "0.1.120",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {
@@ -45,7 +45,7 @@
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^4.0.0",
     "babel-loader": "^9.0.0",
-    "happy-dom": "^10.0.0",
+    "happy-dom": "^12.0.0",
     "jsdom": "^22.0.0",
     "react-test-renderer": "^18.2.0",
     "snazzy": "^9.0.0",

package/src/components/forms/RadioGroup.jsx

@@ -15,7 +15,7 @@ function RadioGroup ({ name, radios, errorMessage, onChange, disabled, value })
       <div className={styles.radioGroupContainer}>
         {radios.map(radio => (
           <div className={radioContainerClass} key={radio.value}>
-            <input className={styles.radio} type='radio' name={name} value={radio.value} onChange={onChange} disabled={disabled} checked={radio.value === value} />
+            <input className={styles.radio} type='radio' id={radio.name} name={name} value={radio.value} onChange={onChange} disabled={disabled} checked={radio.value === value} />
             <label className={styles.label} htmlFor={radio.name}>{radio.label}</label>
           </div>
         ))}

package/src/components/forms/Select.jsx

@@ -72,8 +72,10 @@ function Select ({
           return setSelected(option)
         }}
       >
-        {option.iconName && <PlatformaticIcon iconName={option.iconName} color={optionsIconColor} size={SMALL} onClick={null} />}
-        <span>{option.label}</span>
+        <div className={styles.liContent}>
+          {option.iconName && <PlatformaticIcon iconName={option.iconName} color={optionsIconColor} size={SMALL} onClick={null} />}
+          <span>{option.label}</span>
+        </div>
       </li>
     )
   }
@@ -82,7 +84,7 @@ function Select ({
     if (value.length === 0) {
       return (
         <ul className={styles.options}>
-          {options.length > 0 ? options.map((option, index) => renderLi(option, index)) : <li className={styles.option}>No data found</li>}
+          {options.length > 0 ? options.map((option, index) => renderLi(option, index)) : <li className={styles.option}><div className={styles.liContent}>No data found</div></li>}
         </ul>
       )
     }
@@ -91,7 +93,7 @@ function Select ({
 
     return (
       <ul className={styles.options}>
-        {filteredOptions.length > 0 ? filteredOptions.map((option, index) => renderLi(option, index)) : <li className={styles.option}>No data found</li>}
+        {filteredOptions.length > 0 ? filteredOptions.map((option, index) => renderLi(option, index)) : <li className={styles.option}><div className={styles.liContent}>No data found</div></li>}
         {notFilterableOptions.length > 0 && notFilterableOptions.map((option, index) => renderLi(option, index))}
       </ul>
     )
@@ -117,7 +119,7 @@ function Select ({
       if (showOptions) {
         setShowOptions(false)
       }
-    }, 100)
+    }, 250)
   }
 
   return (

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

@@ -16,8 +16,11 @@
   box-shadow: 0px 0px 10px rgb(0 40 61 / 25%);
 }
 .option {
-  @apply w-full px-4 py-2 border-b border-main-dark-blue/[.15] font-light cursor-pointer hover:bg-main-dark-blue hover:bg-opacity-10 inline-flex items-center gap-x-1
+  @apply w-full border-b border-main-dark-blue/[.15] font-light cursor-pointer hover:bg-main-dark-blue hover:bg-opacity-10 z-10;
 }
 .icons {
   @apply absolute top-[50%] right-[0.5rem] translate-y-[-50%] flex gap-x-2;
 }
+.liContent {
+  @apply px-4 py-2 inline-flex items-center gap-x-1 relative z-[-1];
+}