@lunit/oui 2.2.16 → 2.2.17

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

@@ -3,9 +3,10 @@ import { Theme } from '@mui/material';
 import { InputMsg } from '../BaseTextField/BaseTextField.styled';
 import type { RootTextInputProps } from './TextInput.types';
 declare const BaseTextInput: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme> & RootTextInputProps, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+declare const FileInputLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme> & RootTextInputProps, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
 declare const LeftIconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 declare const RightIconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme> & {
     error?: string | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 declare const ButtonWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-export { BaseTextInput, InputMsg, LeftIconContainer, RightIconContainer, ButtonWrapper };
+export { BaseTextInput, FileInputLabel, InputMsg, LeftIconContainer, RightIconContainer, ButtonWrapper, };

package/dist/components/TextField/TextInput.styled.js

@@ -51,6 +51,59 @@ const BaseTextInput = styled('input', {
     }
     return resultStyle;
 });
+const FileInputLabel = styled('label', {
+    shouldForwardProp: (prop) => ![
+        'error',
+        'large',
+        'showClear',
+        'leftIcon',
+        'width',
+        'OuterBoxProps',
+        'InputContainerProps',
+        'sx',
+    ].includes(prop.toString()),
+})(({ theme, large, error, leftIcon, width, disabled, readOnly }) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let resultStyle = {
+        ...baseTextInputStyle(theme),
+        width: 
+        // eslint-disable-next-line no-nested-ternary
+        typeof width !== 'undefined' ? (typeof width === 'number' ? `${width}px` : width) : width,
+    };
+    if (error) {
+        resultStyle = {
+            ...resultStyle,
+            ...styles.baseTextFieldErrorStyle(theme),
+        };
+    }
+    if (large) {
+        resultStyle = {
+            ...resultStyle,
+            ...textInputLarge,
+        };
+    }
+    if (leftIcon) {
+        resultStyle = {
+            ...resultStyle,
+            ...textInputWithLeftIcon,
+        };
+    }
+    if (disabled || readOnly) {
+        resultStyle = {
+            ...resultStyle,
+            opacity: '0.8',
+            border: `1px solid ${theme.palette.neutralGrey[70]}`,
+            borderColor: 'unset',
+            backgroundColor: 'transparent',
+            color: theme.palette.neutralGrey[45],
+            pointerEvents: 'none',
+        };
+    }
+    return {
+        ...resultStyle,
+        '&:read-only': undefined,
+    };
+});
 const LeftIconContainer = styled('div')(() => {
     return {
         position: 'absolute',
@@ -100,4 +153,4 @@ const ButtonWrapper = styled('button')(({ theme }) => {
         },
     };
 });
-export { BaseTextInput, InputMsg, LeftIconContainer, RightIconContainer, ButtonWrapper };
+export { BaseTextInput, FileInputLabel, InputMsg, LeftIconContainer, RightIconContainer, ButtonWrapper, };

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

@@ -1,24 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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 { forwardRef, useState } from 'react';
 import { uniqueId } from 'lodash';
+import { Box, Typography } from '@mui/material';
+import { Project } from '../../../icons';
+import theme from '../../../theme';
+import { InputMsg, BaseTextFieldContainer, BaseTextFieldBox, } from '../../BaseTextField/BaseTextField.styled';
+import { FileInputLabel, LeftIconContainer, RightIconContainer } from '../TextInput.styled';
+function fileNameFromFullPath(path) {
+    return path.split('\\').pop();
+}
 const FileInput = forwardRef((props, ref) => {
     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 baseSX = inputSX ?? {
         paddingRight: '44px',
-        pointerEvents: 'none',
         width: '100%',
     };
-    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,
-                                    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 }))] }));
+    const [labelText, setLabelText] = useState('');
+    const handleChange = (event) => {
+        const filePath = event.target.value;
+        if (filePath) {
+            setLabelText(fileNameFromFullPath(filePath));
+        }
+        onChange?.(event);
+    };
+    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 })), _jsxs(FileInputLabel, { disabled: props.disabled, readOnly: props.readOnly, large: props.large, error: !!error, leftIcon: leftIcon, sx: baseSX, children: [_jsx("input", { ref: ref, type: "file", name: uID, accept: props.accept, style: { display: 'none' }, disabled: inputProps.disabled, onChange: handleChange, readOnly: false }), labelText ? (_jsx(Box, { children: labelText })) : (_jsx(Typography, { variant: "body5", sx: { color: theme.palette.neutralGrey[45] }, children: props.placeholder })), _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/Histogram/Histogram.styled.js

@@ -9,6 +9,8 @@ export const HistogramContainer = styled(Box)({
 export const HistogramTitle = styled(Typography)({
     width: '100%',
     paddingBottom: '12px',
+    textWrap: 'wrap',
+    wordBreak: 'break-all',
 });
 export const HistogramNoData = styled(Typography)(({ theme }) => ({
     top: '42%',

package/package.json

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