@platformatic/ui-components 0.8.6 → 0.8.8

package/package.json

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

package/src/components/Checkbox.module.css

@@ -1,5 +1,5 @@
 .checkbox {
-  @apply border border-solid rounded-sm relative inline-block m-0;
+  @apply border border-solid rounded-sm relative inline-block m-0 hover:cursor-pointer;
   -webkit-appearance: none;
 }
 

package/src/components/Modal.jsx

@@ -42,13 +42,15 @@ function Modal ({
   childrenClassContainer = '',
   modalCloseClassName = '',
   permanent = false,
-  showCloseButtonOnTop = true
+  showCloseButtonOnTop = true,
+  additionalModalClassName = ''
 }) {
   let contentFullscreen
   let titleFullscreen
-  let modalClassName = `${styles.modal}`
+  let modalClassName = `${styles.modal} `
   modalClassName += ' ' + styles[`modal--${layout}`]
   modalClassName += ' ' + styles[`modal--${size}`]
+  modalClassName += ` ${additionalModalClassName || styles.modalDefaultFlex}`
   let buttonFullRoundedClassName
   const blurRef = useRef()
 
@@ -309,7 +311,11 @@ Modal.propTypes = {
   /**
    * showCloseButtonOnTop: show button on X
    */
-  showCloseButtonOnTop: PropTypes.bool
+  showCloseButtonOnTop: PropTypes.bool,
+  /**
+   * additionalModalClassName: show button on X
+   */
+  additionalModalClassName: PropTypes.string
 }
 
 export default Modal

package/src/components/Modal.module.css

@@ -25,8 +25,12 @@
 .modal {
   @apply p-4 rounded-md mx-auto my-auto max-h-[85vh] overflow-y-auto;
 }
+.modalDefaultFlex {
+  @apply flex flex-col gap-y-2;
+}
 .modal--popup-v2 {
-  @apply bg-rich-black border border-solid border-white/30 flex flex-col gap-y-4;
+  @apply bg-rich-black border border-solid;
+  border-color: rgba(255, 255, 255, .3);
 }
 .modal--popup {
   @apply bg-light-blue;

package/src/components/forms/InputFileUpload.jsx

@@ -5,7 +5,7 @@ import styles from './InputFileUpload.module.css'
 import commonStyles from '../Common.module.css'
 import PlatformaticIcon from '../PlatformaticIcon'
 import Button from '../Button'
-import { ERROR_RED, MAIN_DARK_BLUE, MAIN_GREEN, RICH_BLACK, TRANSPARENT, WHITE } from '../constants'
+import { ACTIVE_AND_INACTIVE_STATUS, ERROR_RED, MAIN_DARK_BLUE, MAIN_GREEN, RICH_BLACK, TRANSPARENT, WHITE } from '../constants'
 
 function InputFileUpload ({
   idInputFile = 'fileUpload',
@@ -19,12 +19,13 @@ function InputFileUpload ({
   afterIcon = null,
   backgroundColor = WHITE,
   inputTextClassName = '',
-  detailTextClassName = '',
   verticalPaddingClassName = '',
   dataAttrName = '',
   dataAttrValue = '',
   readOnly = false,
   removeFileButton = {},
+  showDetailButton = true,
+  detailFileButton = {},
   onClickDetail = () => {},
   acceptFiles = '*'
 }) {
@@ -108,7 +109,20 @@ function InputFileUpload ({
           >
             {file !== null ? file.name : <span className={styles.inputPlaceholderClassName}>{inputPlaceholder}</span>}
           </label>
-          {file !== null && <span className={`${styles.afterInputDetail} ${detailTextClassName}`} onClick={() => onClickDetail()}>Detail</span>}
+          {file !== null && showDetailButton && (
+            <div className={styles.afterInputDetail}>
+              <Button
+                textClass={detailFileButton?.textClass ?? ''}
+                paddingClass={detailFileButton?.paddingClass ?? ''}
+                label={detailFileButton?.label ?? 'Details'}
+                color={detailFileButton?.color ?? WHITE}
+                type='button'
+                onClick={() => onClickDetail()}
+                bordered={false}
+                hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
+              />
+            </div>
+          )}
         </div>
         {file !== null && (
           <Button
@@ -211,6 +225,14 @@ InputFileUpload.propTypes = {
    * removeFileButton
   */
   removeFileButton: PropTypes.object,
+  /**
+   * showDetailButton
+  */
+  showDetailButton: PropTypes.bool,
+  /**
+   * detailFileButton
+  */
+  detailFileButton: PropTypes.object,
   /**
      * onClickDetail
     */

package/src/components/forms/Select.jsx

@@ -28,8 +28,10 @@ function Select ({
   backgroundColor = WHITE,
   inputTextClassName = '',
   beforeIcon = {},
-  paddingClass = ''
+  paddingClass = '',
+  handleClickOutside = false
 }) {
+  const wrapperRef = useRef(null)
   const inputRef = useRef()
   const [showOptions, setShowOptions] = useState(false)
   // eslint-disable-next-line  no-unused-vars
@@ -105,6 +107,22 @@ function Select ({
     }
   }, [value])
 
+  useEffect(() => {
+    if (showOptions && handleClickOutside) {
+      function innerHandleClickOutside (event) {
+        if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+          setShowOptions(false)
+        }
+      }
+      // Bind the event listener
+      document.addEventListener('mousedown', innerHandleClickOutside)
+      return () => {
+        // Unbind the event listener on clean up
+        document.removeEventListener('mousedown', innerHandleClickOutside)
+      }
+    }
+  }, [handleClickOutside, showOptions])
+
   useEffect(() => {
     if (disabled) {
       const className = normalClassName() + ' ' + commonStyles['apply-opacity-30']
@@ -170,7 +188,7 @@ function Select ({
   }
 
   return (
-    <div className={containerClassName} {...dataProps}>
+    <div className={containerClassName} {...dataProps} ref={wrapperRef}>
       <div className={wrapperClassName}>
         {beforeIcon?.iconName && getBeforeIcon()}
         <input type='text' name={name} value={value} className={inputClassName} ref={inputRef} disabled={disabled} placeholder={placeholder} onFocus={() => handleFocus()} onBlur={(e) => handleBlur(e)} readOnly />
@@ -285,7 +303,11 @@ Select.propTypes = {
   /**
    * paddingClass
   */
-  paddingClass: PropTypes.string
+  paddingClass: PropTypes.string,
+  /**
+   * handleClickOutside
+   */
+  handleClickOutside: PropTypes.bool
 }
 
 export default Select

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

@@ -1,5 +1,5 @@
 .container {
-  @apply flex w-full h-10 items-center gap-x-2;
+  @apply flex w-full items-center gap-x-2;
 }
 .switch {
   @apply relative inline-block cursor-pointer;

package/src/stories/forms/Select.stories.jsx

@@ -198,5 +198,6 @@ WithBeforeIcon.args = {
     iconName: 'AddIcon',
     color: ERROR_RED,
     size: LARGE
-  }
+  },
+  handleClickOutside: true
 }