@codeleap/web 3.12.18 → 3.12.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "3.12.18",
+  "version": "3.12.19",
   "main": "src/index.ts",
   "repository": {
     "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",

package/src/components/FileInput.tsx

@@ -4,23 +4,30 @@ import React, {
   useImperativeHandle,
   useRef,
 } from 'react'
-import { WebInputFile } from '@codeleap/common'
+import { WebInputFile, useCallback } from '@codeleap/common'
 import { HTMLProps } from '../types'
 
 export type FileInputRef = {
   openFilePicker: () => Promise<WebInputFile[]>
+  clear: () => void
 }
 
-export type FileInputProps = Omit<HTMLProps<'input'>, 'type'|'ref'> & {
+export type FileInputProps = Omit<HTMLProps<'input'>, 'type' | 'ref'> & {
   onFileSelect?: (files: WebInputFile[]) => void
+  autoClear?: boolean
 }
 
-export const _FileInput = (inputProps: FileInputProps, ref:React.Ref<FileInputRef>) => {
+export const _FileInput = (inputProps: FileInputProps, ref: React.Ref<FileInputRef>) => {
   const inputRef = useRef<HTMLInputElement>(null)
 
-  const { onFileSelect, ...props } = inputProps
+  const { onFileSelect, autoClear = true, ...props } = inputProps
 
-  const resolveWithFile = useRef<(file:WebInputFile[]) => any>()
+  const resolveWithFile = useRef<(file: WebInputFile[]) => any>()
+
+  const clearInput = useCallback(() => {
+    if (!inputRef.current) return
+    inputRef.current.value = null
+  }, [])
 
   useImperativeHandle(ref, () => ({
     openFilePicker: () => {
@@ -30,9 +37,10 @@ export const _FileInput = (inputProps: FileInputProps, ref:React.Ref<FileInputRe
         resolveWithFile.current = resolve
       })
     },
+    clear: clearInput,
   }))
 
-  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+  async function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
     if (!e.target.files.length) return
     inputProps.onChange && inputProps.onChange(e)
     const fileArray = Array.from(e.target?.files || []) as File[]
@@ -45,9 +53,13 @@ export const _FileInput = (inputProps: FileInputProps, ref:React.Ref<FileInputRe
     onFileSelect && onFileSelect(files)
 
     if (resolveWithFile.current) {
-      resolveWithFile.current(files)
+      await resolveWithFile.current(files)
       resolveWithFile.current = undefined
     }
+
+    if (autoClear) {
+      clearInput()
+    }
   }
 
   return (
@@ -66,7 +78,7 @@ export const FileInput = React.forwardRef<FileInputRef, FileInputProps>(_FileInp
 )
 
 export const useFileInput = () => {
-  const inputRef = useRef<FileInputRef|null>(null)
+  const inputRef = useRef<FileInputRef | null>(null)
 
   const openFilePicker = () => {
     return inputRef.current?.openFilePicker()

package/src/components/Modal/index.tsx

@@ -335,9 +335,11 @@ export const Modal = (props) => {
     if (visible) {
       document.body.style.overflowY = 'hidden'
       document.body.style.overflowX = 'hidden'
+      document.body.style.maxHeight = '100svh'
     } else {
       document.body.style.overflowY = 'visible'
       document.body.style.overflowX = 'hidden'
+      document.body.style.maxHeight = 'unset'
     }
   }, [visible])
 

package/src/components/Select/index.tsx

@@ -377,7 +377,7 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
 
     const MenuComponent = React.useCallback((props) => {
       return <CustomMenu {...props} Footer={FooterComponent} />
-    }, [FooterComponent])
+    }, [])
 
     const MenuListComponent = React.useCallback((props) => {
       return <CustomMenuList {...props} defaultStyles={menuWrapperStyles} />