@lunit/oui 2.2.14 → 2.2.15

package/dist/components/TextField/TextInput.types.d.ts

@@ -23,6 +23,7 @@ interface NormalTextInputProps extends InputWithHelperMsgProps {
 interface FileInputProps extends NormalTextInputProps {
     type: 'file';
     accept: string;
+    onClick: () => void;
 }
 interface PasswordTextInputProps extends PasswordInputWithHelperMsgProps {
 }

package/dist/components/TextField/components/FileInput.js

@@ -1,30 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useState } from 'react';
+import { forwardRef } from 'react';
 import { InputMsg, BaseTextFieldContainer, BaseTextFieldBox, } from '../../BaseTextField/BaseTextField.styled';
 import { BaseTextInput, LeftIconContainer, RightIconContainer } from '../TextInput.styled';
 import { FileInputWrapperButton } from './Buttons';
 import { Project } from '../../../icons';
 import { uniqueId } from 'lodash';
 const FileInput = forwardRef((props, ref) => {
-    const { error, helperMsg, leftIcon, rightIcon, onClearButtonClick, inputSX, type: inputType, ...inputProps } = props;
+    const { error, helperMsg, leftIcon, rightIcon, inputSX, type: inputType, value, onChange, onClick, ...inputProps } = props;
     // Unique ID used to select hidden file input and click on it
     const uID = uniqueId('hidden-file-input-');
-    const [fileName, setFileName] = useState('');
     const baseSX = inputSX ?? {
         paddingRight: '44px',
         pointerEvents: 'none',
         width: '100%',
     };
-    const handleButtonClicksFile = () => {
-        const fileInput = document.getElementsByName(uID);
-        if (!fileInput.length)
-            return;
-        fileInput[0].click();
-    };
-    return (_jsxs(BaseTextFieldBox, { ...props.OuterBoxProps, width: props.width, children: [_jsxs(BaseTextFieldContainer, { ...props.InputContainerProps, width: props.width, children: [leftIcon && (_jsx(LeftIconContainer, { sx: inputProps.disabled ? { opacity: '0.8' } : undefined, children: leftIcon })), _jsx("input", { ref: ref, type: "file", name: uID, accept: props.accept, style: { display: 'none' }, disabled: inputProps.disabled, onChange: (e) => {
-                            setFileName(e.target.value.split('\\').pop());
-                        } }), _jsxs(FileInputWrapperButton, { onClick: () => handleButtonClicksFile(), width: props.width, children: [_jsx(BaseTextInput, { ...inputProps, type: "text", error: !!error, value: fileName, 
+    return (_jsxs(BaseTextFieldBox, { ...props.OuterBoxProps, width: props.width, children: [_jsxs(BaseTextFieldContainer, { ...props.InputContainerProps, width: props.width, children: [leftIcon && (_jsx(LeftIconContainer, { sx: inputProps.disabled ? { opacity: '0.8' } : undefined, children: leftIcon })), _jsx("input", { ref: ref, type: "file", name: uID, accept: props.accept, style: { display: 'none' }, disabled: inputProps.disabled, onChange: onChange }), _jsxs(FileInputWrapperButton, { onClick: onClick, width: props.width, children: [_jsx(BaseTextInput, { ...inputProps, type: "text", error: !!error, value: value, 
                                 // @Tobio89: this dummy onchange clears an error without triggering unwanted style changes
-                                onChange: () => { }, leftIcon: leftIcon, sx: baseSX }), _jsx(RightIconContainer, { sx: { pointerEvents: 'none' }, children: _jsx(Project, {}) })] })] }), error ? (_jsx(InputMsg, { variant: "body5", error: true, children: error })) : (helperMsg && _jsx(InputMsg, { variant: "body5", children: helperMsg }))] }));
+                                onChange: () => { }, leftIcon: leftIcon, sx: {
+                                    ...baseSX,
+                                    cursor: 'pointer',
+                                } }), _jsx(RightIconContainer, { sx: { pointerEvents: 'none' }, children: _jsx(Project, {}) })] })] }), error ? (_jsx(InputMsg, { variant: "body5", error: true, children: error })) : (helperMsg && _jsx(InputMsg, { variant: "body5", children: helperMsg }))] }));
 });
 export default FileInput;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lunit/oui",
-  "version": "2.2.14",
+  "version": "2.2.15",
   "validate-branch-name": {
     "pattern": "^(main|develop)|(feature|fix|release|hotfix|qe)/.+$",
     "errorMsg": "The branch name is not correct. Please check the pattern. (ex. feature/add-something)"