@lunit/oui 2.2.14 → 2.2.16

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/dist/presentations/Accordion/Accordion.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { v4 as uuidV4 } from 'uuid';
 import { Box } from '@mui/material';
 import theme from '../../theme';
@@ -16,7 +17,12 @@ const Accordion = ({ componentType = 'accordion', MuiAccordionProps, AccordionDe
         throw new Error("The 'title' prop is required.");
     if (!items.length)
         throw new Error("The 'items' prop must contain at least one item.");
-    return (_jsxs(BaseAccordion, { ...MuiAccordionProps, expanded: isOpen, onChange: onChange, sx: { alignItems: 'center' }, children: [_jsxs(BaseAccordionSummary, { expandIcon: _jsx(ArrowDown, { sx: { fill: theme.palette.neutralGrey[40] } }), ...AccordionSummaryProps, children: [!!tooltip.length && (_jsx(Tooltip, { arrow: true, size: "large", onClick: (event) => event.stopPropagation(), title: _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '8px' }, onClick: (event) => event.stopPropagation(), children: tooltip.map((item) => (_jsxs(Box, { children: [item.componentType === 'freeText' && (_jsx(FreeText, { componentType: item.componentType, size: item.size, content: item.content })), item.componentType === 'statistic' && (_jsx(Statistic, { componentType: item.componentType, title: item.title, size: item.size, layout: item.layout, symbol: item.symbol, color: item.color }))] }, uuidV4()))) }), children: _jsx(Box, { sx: {
+    const [isOpened, setIsOpened] = useState(isOpen);
+    const handleOnChange = (event) => {
+        setIsOpened(!isOpened);
+        onChange?.(event, !isOpened);
+    };
+    return (_jsxs(BaseAccordion, { ...MuiAccordionProps, expanded: isOpened, onChange: handleOnChange, sx: { alignItems: 'center' }, children: [_jsxs(BaseAccordionSummary, { expandIcon: _jsx(ArrowDown, { sx: { fill: theme.palette.neutralGrey[40] } }), ...AccordionSummaryProps, children: [!!tooltip.length && (_jsx(Tooltip, { arrow: true, size: "large", onClick: (event) => event.stopPropagation(), title: _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '8px' }, onClick: (event) => event.stopPropagation(), children: tooltip.map((item) => (_jsxs(Box, { children: [item.componentType === 'freeText' && (_jsx(FreeText, { componentType: item.componentType, size: item.size, content: item.content })), item.componentType === 'statistic' && (_jsx(Statistic, { componentType: item.componentType, title: item.title, size: item.size, layout: item.layout, symbol: item.symbol, color: item.color }))] }, uuidV4()))) }), children: _jsx(Box, { sx: {
                                 marginRight: size.includes('small') ? '4px' : '6px',
                                 display: 'flex',
                                 alignItems: 'center',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lunit/oui",
-  "version": "2.2.14",
+  "version": "2.2.16",
   "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)"