@platformatic/ui-components 0.7.1 → 0.7.2

package/package.json

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

package/src/components/ModalDirectional.jsx

@@ -18,7 +18,8 @@ function ModalDirectional ({
   titleClassName = '',
   smallLayout = false,
   classNameModalLefty = '',
-  permanent = false
+  permanent = false,
+  blurClassName = ''
 }) {
   const className = `${styles.container} ${styles.modalLeftCover} ${smallLayout ? styles.smallLayout : styles.normalLayout}`
   const [modalClassName] = useState(className)
@@ -40,7 +41,7 @@ function ModalDirectional ({
 
   return (
     <>
-      <div className={styles.blur} onClick={() => permanent ? {} : closeModal()} />
+      <div className={blurClassName || styles.blur} onClick={() => permanent ? {} : closeModal()} />
       <div className={variantModalClassName}>
         <div className={classNameLefty}>
           <div className={styles.headerClassName}>
@@ -94,7 +95,11 @@ ModalDirectional.propTypes = {
   /**
    * permanent: modal could be closed only with Esc, X or Cancel
    */
-  permanent: PropTypes.bool
+  permanent: PropTypes.bool,
+  /**
+   * blurClassName: override
+   */
+  blurClassName: PropTypes.string
 }
 
 export default ModalDirectional

package/src/components/forms/InputFileUpload.jsx

@@ -8,6 +8,7 @@ import Button from '../Button'
 import { ERROR_RED, MAIN_DARK_BLUE, MAIN_GREEN, RICH_BLACK, TRANSPARENT, WHITE } from '../constants'
 
 function InputFileUpload ({
+  idInputFile = 'fileUpload',
   placeholder = '',
   borderColor = MAIN_GREEN,
   errorMessage = '',
@@ -18,12 +19,14 @@ function InputFileUpload ({
   afterIcon = null,
   backgroundColor = WHITE,
   inputTextClassName = '',
+  detailTextClassName = '',
   verticalPaddingClassName = '',
   dataAttrName = '',
   dataAttrValue = '',
   readOnly = false,
   removeFileButton = {},
-  onClickDetail = () => {}
+  onClickDetail = () => {},
+  acceptFiles = '*'
 }) {
   let baseInputClassName = `${commonStyles.fullWidth} ${styles.input} ${inputTextClassName} `
   baseInputClassName += verticalPaddingClassName || ` ${styles.inputDefaultVerticalPadding} `
@@ -68,26 +71,31 @@ function InputFileUpload ({
   }
 
   function clearFile () {
+    document.getElementById(idInputFile).value = ''
     setFile(null)
     onFileSelect(null)
   }
 
   return (
     <div className={styles.container} {...dataProps}>
-      <div className={styles.inputContainer}>
-        {beforeIcon && <div className={styles.beforeInputIcon}><PlatformaticIcon iconName={beforeIcon.iconName} size='small' data-testid='before-icon' color={beforeIcon.color} onClick={() => beforeIcon.onClick()} /></div>}
-        <input
-          type='file'
-          className={focus ? focusedClassName() : normalClassName()}
-          onChange={handleFileInput}
-          disabled={disabled}
-          placeholder={inputPlaceholder}
-          readOnly={readOnly}
-          aria-readonly={readOnly}
-          onFocus={() => handleFocus()}
-          onBlur={() => handleBlur()}
-        />
-        {file !== null && <span onClick={() => onClickDetail()}>Detail</span>}
+      <div className={styles.content}>
+        <div className={styles.inputContainer}>
+          {beforeIcon && <div className={styles.beforeInputIcon}><PlatformaticIcon iconName={beforeIcon.iconName} size='small' data-testid='before-icon' color={beforeIcon.color} onClick={() => beforeIcon.onClick()} /></div>}
+          <input
+            id={idInputFile}
+            type='file'
+            className={focus ? focusedClassName() : normalClassName()}
+            onChange={handleFileInput}
+            disabled={disabled}
+            placeholder={inputPlaceholder}
+            readOnly={readOnly}
+            aria-readonly={readOnly}
+            onFocus={() => handleFocus()}
+            onBlur={() => handleBlur()}
+            accept={acceptFiles}
+          />
+          {file !== null && <span className={`${styles.afterInputDetail} ${detailTextClassName}`} onClick={() => onClickDetail()}>Detail</span>}
+        </div>
         {file !== null && (
           <Button
             textClass={removeFileButton?.textClass ?? ''}
@@ -105,6 +113,10 @@ function InputFileUpload ({
 }
 
 InputFileUpload.propTypes = {
+  /**
+   * idInputFile
+   */
+  idInputFile: PropTypes.string,
   /**
    * placeholder
    */
@@ -149,6 +161,14 @@ InputFileUpload.propTypes = {
    * inputTextClassName
    */
   inputTextClassName: PropTypes.string,
+  /**
+   * detailTextClassName
+   */
+  detailTextClassName: PropTypes.string,
+  /**
+   * accept
+   */
+  accept: PropTypes.string,
   /**
    * verticalPaddingClassName
    */

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

@@ -1,8 +1,9 @@
 .container {
   @apply flex flex-col w-full relative;
 }
+.content,
 .inputContainer {
-  @apply flex min-h-[2.5rem] relative z-20 gap-x-2 items-center;
+  @apply flex w-full relative z-20 gap-x-2 items-center;
 }
 .input {
   padding-block: 0px;
@@ -12,7 +13,7 @@
 .inputDefaultVerticalPadding {
   @apply py-2.5;
 }
-.afterInputIcon,
+.afterInputDetail,
 .beforeInputIcon {
   @apply absolute top-[50%] z-20;
   transform: translateY(-50%);
@@ -20,8 +21,8 @@
 .beforeInputIcon {
   @apply left-0 ml-2
 }
-.afterInputIcon {
-  @apply right-0 mr-2
+.afterInputDetail {
+  @apply right-0 mr-2 cursor-pointer
 }
 .beforeIconPadding {
   @apply pl-8