@lunit/oui 2.3.9 → 2.4.1

package/dist/components/TextField/components/Buttons.js

@@ -2,20 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { CloseSmall, HideSmall, ShowSmall } from '../../../icons';
 import { ButtonWrapper } from '../TextInput.styled';
 function ClearButton({ onClick }) {
-    return (_jsx(ButtonWrapper, { onClick: onClick, onKeyDown: (event) => {
-            if (event.key === 'Enter') {
-                event.preventDefault();
-                event.stopPropagation();
-            }
-        }, children: _jsx(CloseSmall, { fontSize: "small" }) }));
+    return (_jsx(ButtonWrapper, { onClick: onClick, children: _jsx(CloseSmall, { fontSize: "small" }) }));
 }
 function ShowHidePasswordButton({ onClick, isHidden, }) {
-    return (_jsx(ButtonWrapper, { onClick: onClick, onKeyDown: (event) => {
-            if (event.key === 'Enter') {
-                event.preventDefault();
-                event.stopPropagation();
-            }
-        }, children: isHidden ? _jsx(HideSmall, {}) : _jsx(ShowSmall, {}) }));
+    return (_jsx(ButtonWrapper, { onClick: onClick, children: isHidden ? _jsx(HideSmall, {}) : _jsx(ShowSmall, {}) }));
 }
 function FileInputWrapperButton({ children, onClick, width, }) {
     return (_jsx("button", { onClick: onClick, style: {

package/dist/components/TextField/components/NormalTextInput.js

@@ -5,7 +5,7 @@ import { BaseTextInput, LeftIconContainer, RightIconContainer } from '../TextInp
 import { ClearButton } from './Buttons';
 const NormalTextInput = forwardRef((props, ref) => {
     const { error, helperMsg, leftIcon, rightIcon, onClearButtonClick, inputSX, ...inputProps } = props;
-    const [showClear, setShowClear] = useState(!!props.defaultValue ?? false);
+    const [showClear, setShowClear] = useState(!!props.defaultValue);
     const showRightIcon = useMemo(() => {
         return (rightIcon ?? // if rightIcon is passed, use it, else use clear button
             (!props.disabled && // hide if disabled

package/dist/components/TextField/components/PasswordInput.js

@@ -11,11 +11,22 @@ function PasswordInputContainer(props) {
                     }, isHidden: hidePassword })) }), error ? (_jsx(InputMsg, { variant: "body5", error: true, children: error })) : (helperMsg && _jsx(InputMsg, { variant: "body5", children: helperMsg }))] }));
 }
 const PasswordInput = forwardRef((props, ref) => {
-    const { error, helperMsg, leftIcon, type, inputSX, ...otherInputProps } = props;
+    const { error, helperMsg, leftIcon, type, inputSX, onKeyDown, ...otherInputProps } = props;
     const [hidePassword, setHidePassword] = useState(true);
     function handlePasswordShowHide() {
         setHidePassword(!hidePassword);
     }
-    return (_jsx(PasswordInputContainer, { ...props, hidePassword: hidePassword, handlePasswordShowHide: () => handlePasswordShowHide(), children: _jsx(BaseTextInput, { type: hidePassword ? 'password' : 'text', ref: ref, ...otherInputProps, leftIcon: leftIcon, sx: inputSX }) }));
+    const handleKeyDown = (event) => {
+        // Call the original onKeyDown if provided
+        if (onKeyDown) {
+            onKeyDown(event);
+        }
+        // Prevent Enter key from changing password visibility
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    };
+    return (_jsx(PasswordInputContainer, { ...props, hidePassword: hidePassword, handlePasswordShowHide: () => handlePasswordShowHide(), children: _jsx(BaseTextInput, { type: hidePassword ? 'password' : 'text', ref: ref, ...otherInputProps, onKeyDown: handleKeyDown, leftIcon: leftIcon, sx: inputSX }) }));
 });
 export default PasswordInput;

package/dist/presentations/AnalysisBar/AnalysisBar.js

@@ -3,19 +3,19 @@ import { Box } from '@mui/material';
 import { AnalysisBarSegmentContainer, AnalysisBarOuter, AxisLabels, GraphAxisLabel, GraphScoreIndicator, GraphSegment, } from './AnalysisBar.styled';
 import { parseStringValToNumber } from './AnalysisBar.utils';
 import HeatmapGraphSVG from './HeatmapGraphIcon/HeatmapGraphSVG';
-const Segments = ({ segments, adjustForOnePercent }) => {
+const Segments = ({ segments }) => {
     if (!segments) {
         return null;
     }
-    const combinedWidth = segments.length > 1 ? segments[0].width + segments[1].width : 0;
+    const validSegments = segments.filter((segment) => segment.width > 0);
     if (segments?.length === 1 && segments[0].color === 'jet') {
         return (_jsx(Box, { sx: { width: '100%', height: '14px', transform: 'scaleY(0.8)' }, children: _jsx(HeatmapGraphSVG, {}) }));
     }
-    return (_jsx(_Fragment, { children: segments?.map((segment, i) => {
+    return (_jsx(_Fragment, { children: validSegments?.map((segment, i) => {
             if (segment.color === 'jet') {
                 return _jsx(HeatmapGraphSVG, { width: `${segment.width}%` });
             }
-            return (_jsx(GraphSegment, { color: segment.color, hasAdjustedOnePercentSegment: adjustForOnePercent, isOnePercentSegment: segment.width > 0 && segment.width <= 1, combinedWidth: combinedWidth, width: segment.width, isNextSegment: i === 1 }, i));
+            return (_jsx(GraphSegment, { color: segment.color, width: segment.width, isFirstSegment: i === 0, isLastSegment: i === segments.length - 1 }, i));
         }) }));
 };
 const AnalysisBar = ({ componentType = 'analysisBar', expressionValue, caption, expressionLevels = [], expressionLabels = [], segments, isDimmed = false, }) => {
@@ -23,11 +23,10 @@ const AnalysisBar = ({ componentType = 'analysisBar', expressionValue, caption,
         throw new Error("The 'componentType' prop is required.");
     if (!expressionLevels.length)
         throw new Error("The 'expressionLevels' prop must contain at least one item.");
-    const hasAdjustedOnePercentSegment = segments?.[0]?.width > 0 && segments?.[0]?.width <= 1;
-    return (_jsxs(AnalysisBarOuter, { className: "analysis-bar", isDimmed: isDimmed, children: [_jsxs(AnalysisBarSegmentContainer, { children: [expressionValue && (_jsx(GraphScoreIndicator, { adjustForOnePercent: hasAdjustedOnePercentSegment, value: expressionValue, isJet: segments?.[0].color === 'jet' })), _jsx(Segments, { segments: segments, adjustForOnePercent: hasAdjustedOnePercentSegment })] }), (expressionLevels.length > 0 || caption) && (_jsxs(AxisLabels, { children: [expressionLevels.length > 0 &&
+    const validSegments = segments.filter((segment) => segment.width > 0);
+    return (_jsxs(AnalysisBarOuter, { className: "analysis-bar", isDimmed: isDimmed, children: [_jsxs(AnalysisBarSegmentContainer, { children: [expressionValue && (_jsx(GraphScoreIndicator, { value: expressionValue, isJet: segments?.[0].color === 'jet' })), _jsx(Segments, { segments: validSegments })] }), (expressionLevels.length > 0 || caption) && (_jsxs(AxisLabels, { children: [expressionLevels.length > 0 &&
                         expressionLevels.map((val, i) => {
-                            const adjustedForOnePercent = +val <= 1 && +val > 0;
-                            return (_jsx(GraphAxisLabel, { label: expressionLabels[i] || val, adjustForOnePercent: adjustedForOnePercent, leftPos: parseStringValToNumber(val) }, i));
-                        }), caption && (_jsx(GraphAxisLabel, { label: caption, adjustForOnePercent: hasAdjustedOnePercentSegment, leftPos: 50 }))] }))] }));
+                            return (_jsx(GraphAxisLabel, { label: expressionLabels[i] || val, leftPos: parseStringValToNumber(val) }, i));
+                        }), caption && (_jsx(GraphAxisLabel, { label: caption, leftPos: 50 }))] }))] }));
 };
 export default AnalysisBar;

package/dist/presentations/AnalysisBar/AnalysisBar.styled.d.ts

@@ -7,15 +7,13 @@ export declare const AnalysisBarOuter: import("@emotion/styled").StyledComponent
 export declare const AnalysisBarSegmentContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const GraphScoreIndicator: ({ value, adjustForOnePercent, isJet, }: {
+export declare const GraphScoreIndicator: ({ value, isJet }: {
     value: string;
-    adjustForOnePercent: boolean;
     isJet?: boolean | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const GraphAxisLabel: ({ label, leftPos, adjustForOnePercent, }: {
+export declare const GraphAxisLabel: ({ label, leftPos }: {
     label: string;
     leftPos: number;
-    adjustForOnePercent: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const AxisLabels: ({ children }: {
     percent?: boolean;
@@ -26,11 +24,8 @@ export declare const AnalysisBarCaption: ({ label }: {
 interface GraphSegmentProps {
     color: string | undefined;
     width: number;
-    square?: boolean;
-    hasAdjustedOnePercentSegment?: boolean;
-    combinedWidth?: number;
-    isNextSegment?: boolean;
-    isOnePercentSegment?: boolean;
+    isFirstSegment: boolean;
+    isLastSegment: boolean;
 }
 export declare const GraphSegment: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & GraphSegmentProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export {};

package/dist/presentations/AnalysisBar/AnalysisBar.styled.js

@@ -17,8 +17,9 @@ export const AnalysisBarSegmentContainer = styled(Box)(() => ({
     alignItems: 'center',
     position: 'relative',
     width: '100%',
+    gap: '1px',
 }));
-const GraphScoreIndicatorContainer = styled('span', {
+const GraphScoreIndicatorContainer = styled(Box, {
     shouldForwardProp: (prop) => prop !== 'isJet',
 })(({ isJet }) => {
     return {
@@ -41,11 +42,8 @@ const GraphScoreIndicatorPip = styled('span')(() => {
         boxSizing: 'content-box',
     };
 });
-export const GraphScoreIndicator = ({ value, adjustForOnePercent, isJet, }) => {
-    let leftPos = `${parseStringValToNumber(value)}%`;
-    if (adjustForOnePercent && +value <= 1) {
-        leftPos = '12px';
-    }
+export const GraphScoreIndicator = ({ value, isJet }) => {
+    const leftPos = `${parseStringValToNumber(value)}%`;
     return (_jsxs(GraphScoreIndicatorContainer, { className: "analysis-bar-score-indicator", sx: {
             left: leftPos,
             transform: isJet ? 'translateX(-50%) translateY(8px)' : 'translateX(-50%)',
@@ -61,15 +59,12 @@ const GraphAxisLabelContainer = styled('span')(() => {
         alignItems: 'center',
     };
 });
-export const GraphAxisLabel = ({ label, leftPos, adjustForOnePercent, }) => {
-    const getLeft = (value, adjustForOnePercent) => {
-        if (adjustForOnePercent) {
-            return '12px';
-        }
+export const GraphAxisLabel = ({ label, leftPos }) => {
+    const getLeft = (value) => {
         return `${clampBarLabelPosition(value)}%`;
     };
     return (_jsx(GraphAxisLabelContainer, { sx: {
-            left: getLeft(leftPos, adjustForOnePercent),
+            left: getLeft(leftPos),
             transform: 'translateX(-50%)',
         }, className: "analysis-bar-axis-label", children: _jsx(Typography, { variant: "small_body_m5", sx: { textAlign: 'center' }, children: label }) }));
 };
@@ -89,43 +84,23 @@ export const AnalysisBarCaption = ({ label }) => {
             width: 'auto',
         }, className: "analysis-bar-caption", children: _jsx(Typography, { variant: "small_body_m5", sx: { textAlign: 'center' }, children: label }) }));
 };
-const segmentStyle = (color, width, square, hasAdjustedOnePercentSegment, combinedWidth, isNextSegment, isOnePercentSegment) => {
-    const baseStyle = {
+const segmentStyle = (color, width, isFirstSegment, isLastSegment) => {
+    return {
         backgroundColor: color,
         height: '8px',
-        borderRadius: square ? '0px' : '12px',
+        borderTopLeftRadius: isFirstSegment ? '2px' : '0px',
+        borderTopRightRadius: isLastSegment ? '2px' : '0px',
+        borderBottomLeftRadius: isFirstSegment ? '2px' : '0px',
+        borderBottomRightRadius: isLastSegment ? '2px' : '0px',
+        width: `${width}%`,
     };
-    if (isOnePercentSegment) {
-        return {
-            ...baseStyle,
-            width: '12px',
-            minWidth: '12px',
-            maxWidth: '12px',
-        };
-    }
-    else {
-        return {
-            ...baseStyle,
-            width: hasAdjustedOnePercentSegment && isNextSegment
-                ? `calc(${combinedWidth}% - 12px)`
-                : `${width}%`,
-        };
-    }
 };
 export const GraphSegment = styled('span', {
-    shouldForwardProp: (prop) => ![
-        'color',
-        'width',
-        'square',
-        'hasAdjustedOnePercentSegment',
-        'combinedWidth',
-        'isNextSegment',
-        'isOnePercentSegment',
-    ].includes(prop.toString()),
-})(({ color, width, square, hasAdjustedOnePercentSegment, combinedWidth, isNextSegment, isOnePercentSegment, }) => {
+    shouldForwardProp: (prop) => !['color', 'width', 'isFirstSegment', 'isLastSegment'].includes(prop.toString()),
+})(({ color, width, isFirstSegment, isLastSegment }) => {
     // cover undefined and empty string
     const barColor = color && color.length ? color : 'red';
     return {
-        ...segmentStyle(barColor, width, square ?? false, hasAdjustedOnePercentSegment ?? false, combinedWidth ?? 0, isNextSegment ?? false, isOnePercentSegment ?? false), // fallback color
+        ...segmentStyle(barColor, width, isFirstSegment, isLastSegment), // fallback color
     };
 });

package/dist/presentations/AnalysisBar/HeatmapGraphIcon/HeatmapGraphSVG.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const HeatmapGraphSVG = (props) => (_jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 234 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.30733e-07 4C5.85312e-08 1.79086 1.79086 5.86502e-08 4 1.30999e-07L230 7.53243e-06C232.209 7.60478e-06 234 1.79087 234 4.00001C234 6.20915 232.209 8.00001 230 8.00001L4 8C1.79086 8 2.02935e-07 6.20914 1.30733e-07 4Z", fill: "url(#paint0_linear_4060_316245)" }), _jsx("defs", { children: _jsxs("linearGradient", { id: "paint0_linear_4060_316245", x1: "-0.585003", y1: "5.99984", x2: "228.159", y2: "4.97311", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#3000FF" }), _jsx("stop", { offset: "0.239583", stopColor: "#5CFFE2" }), _jsx("stop", { offset: "0.447917", stopColor: "#E2FFA4" }), _jsx("stop", { offset: "0.546875", stopColor: "#FCFF75" }), _jsx("stop", { offset: "0.78125", stopColor: "#FDBA73" }), _jsx("stop", { offset: "1", stopColor: "#FF0F00" })] }) })] }));
+const HeatmapGraphSVG = (props) => (_jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 234 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2 0C0.895431 0 0 0.895431 0 2V6C0 7.10457 0.895431 8 2 8H232C233.105 8 234 7.10457 234 6V2C234 0.895431 233.105 0 232 0H2Z", fill: "url(#paint0_linear_4060_316245)" }), _jsx("defs", { children: _jsxs("linearGradient", { id: "paint0_linear_4060_316245", x1: "-0.585003", y1: "5.99984", x2: "228.159", y2: "4.97311", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#3000FF" }), _jsx("stop", { offset: "0.239583", stopColor: "#5CFFE2" }), _jsx("stop", { offset: "0.447917", stopColor: "#E2FFA4" }), _jsx("stop", { offset: "0.546875", stopColor: "#FCFF75" }), _jsx("stop", { offset: "0.78125", stopColor: "#FDBA73" }), _jsx("stop", { offset: "1", stopColor: "#FF0F00" })] }) })] }));
 export default HeatmapGraphSVG;

package/package.json

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