@ceed/cds 1.13.2 → 1.13.4

package/dist/components/Input/Input.d.ts

@@ -5,11 +5,19 @@ declare const Input: React.ForwardRefExoticComponent<Omit<{
     helperText?: React.ReactNode;
     error?: boolean | undefined;
     enableClearable?: boolean | undefined;
+    /**
+     * Disables the password toggle button for password inputs.
+     * This has no effect when type is not "password".
+     */
+    disableTogglePasswordButton?: boolean | undefined;
 } & {
     component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
 } & Pick<React.InputHTMLAttributes<HTMLInputElement>, "defaultValue" | "autoFocus" | "id" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "onKeyUp" | "onClick" | "disabled" | "type" | "name" | "value" | "autoComplete" | "placeholder" | "readOnly" | "required"> & {
     className?: string | undefined;
-    color?: import("@mui/types").OverridableStringUnion<import("@mui/joy").ColorPaletteProp, import("@mui/joy").InputPropsColorOverrides> | undefined;
+    color?: import("@mui/types").OverridableStringUnion<import("@mui/joy").ColorPaletteProp, import("@mui/joy").InputPropsColorOverrides> | undefined; /**
+     * @see https://github.com/Ecube-Labs/hds/pull/36#discussion_r1722720909
+     * NOTE: onChange(React.SyntheticEvent)의 타입과 맞지 않아 타입 에러가 발생. 이대로 사용하다가 문제가 생기면 대응한다.
+     */
     endDecorator?: React.ReactNode;
     error?: boolean | undefined;
     fullWidth?: boolean | undefined;

package/dist/index.cjs

@@ -1569,6 +1569,8 @@ var import_react16 = __toESM(require("react"));
 var import_joy22 = require("@mui/joy");
 var import_framer_motion15 = require("framer-motion");
 var import_Close2 = __toESM(require("@mui/icons-material/Close"));
+var import_Visibility = __toESM(require("@mui/icons-material/Visibility"));
+var import_VisibilityOff = __toESM(require("@mui/icons-material/VisibilityOff"));
 var MotionInput = (0, import_framer_motion15.motion)(import_joy22.Input);
 var Input = import_react16.default.forwardRef((props, ref) => {
   const {
@@ -1582,12 +1584,18 @@ var Input = import_react16.default.forwardRef((props, ref) => {
     required,
     onChange,
     name,
+    type,
     // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
     sx,
     className,
     enableClearable,
+    disableTogglePasswordButton,
     ...innerProps
   } = props;
+  if (type === "password" && innerProps.endDecorator) {
+    console.warn('Input: endDecorator is not supported when type="password"');
+  }
+  const [passwordVisible, setPasswordVisible] = (0, import_react16.useState)(false);
   const [value, setValue] = useControlledState(
     props.value,
     props.defaultValue,
@@ -1611,6 +1619,12 @@ var Input = import_react16.default.forwardRef((props, ref) => {
   const handleClear = () => {
     setValue(props.defaultValue || "");
   };
+  const handleTogglePasswordVisibility = () => {
+    setPasswordVisible((prev) => !prev);
+  };
+  const actualType = type === "password" && passwordVisible ? "text" : type;
+  const isPasswordType = type === "password";
+  const showPasswordToggle = isPasswordType && !disableTogglePasswordButton;
   const input = /* @__PURE__ */ import_react16.default.createElement(
     MotionInput,
     {
@@ -1620,12 +1634,22 @@ var Input = import_react16.default.forwardRef((props, ref) => {
       required,
       color: error ? "danger" : color,
       disabled,
+      type: actualType,
       slotProps: {
         input: { ref, ...innerProps.slotProps?.input },
         ...innerProps.slotProps
       },
       ...innerProps,
-      endDecorator: enableClearable ? /* @__PURE__ */ import_react16.default.createElement(Stack_default, { gap: 1, direction: "row" }, innerProps.endDecorator, value && /* @__PURE__ */ import_react16.default.createElement(
+      endDecorator: isPasswordType ? showPasswordToggle ? /* @__PURE__ */ import_react16.default.createElement(Stack_default, { gap: 1, direction: "row" }, /* @__PURE__ */ import_react16.default.createElement(
+        IconButton_default,
+        {
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: handleTogglePasswordVisibility,
+          disabled,
+          "aria-label": passwordVisible ? "Hide password" : "Show password"
+        },
+        passwordVisible ? /* @__PURE__ */ import_react16.default.createElement(import_VisibilityOff.default, null) : /* @__PURE__ */ import_react16.default.createElement(import_Visibility.default, null)
+      )) : null : enableClearable ? /* @__PURE__ */ import_react16.default.createElement(Stack_default, { gap: 1, direction: "row" }, innerProps.endDecorator, value && /* @__PURE__ */ import_react16.default.createElement(
         IconButton_default,
         {
           onMouseDown: (e) => e.preventDefault(),

package/dist/index.js

@@ -1482,15 +1482,17 @@ var Container = forwardRef5(function Container2(props, ref) {
 Container.displayName = "Container";
 
 // src/components/CurrencyInput/CurrencyInput.tsx
-import React15, { useCallback as useCallback6, useMemo as useMemo5, useState as useState4 } from "react";
+import React15, { useCallback as useCallback6, useMemo as useMemo5, useState as useState5 } from "react";
 import { IntlMessageFormat as IntlMessageFormat2 } from "intl-messageformat";
 import { NumericFormat } from "react-number-format";
 
 // src/components/Input/Input.tsx
-import React14, { useCallback as useCallback5 } from "react";
+import React14, { useCallback as useCallback5, useState as useState4 } from "react";
 import { Input as JoyInput } from "@mui/joy";
 import { motion as motion15 } from "framer-motion";
 import ClearIcon from "@mui/icons-material/Close";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
 var MotionInput = motion15(JoyInput);
 var Input = React14.forwardRef((props, ref) => {
   const {
@@ -1504,12 +1506,18 @@ var Input = React14.forwardRef((props, ref) => {
     required,
     onChange,
     name,
+    type,
     // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
     sx,
     className,
     enableClearable,
+    disableTogglePasswordButton,
     ...innerProps
   } = props;
+  if (type === "password" && innerProps.endDecorator) {
+    console.warn('Input: endDecorator is not supported when type="password"');
+  }
+  const [passwordVisible, setPasswordVisible] = useState4(false);
   const [value, setValue] = useControlledState(
     props.value,
     props.defaultValue,
@@ -1533,6 +1541,12 @@ var Input = React14.forwardRef((props, ref) => {
   const handleClear = () => {
     setValue(props.defaultValue || "");
   };
+  const handleTogglePasswordVisibility = () => {
+    setPasswordVisible((prev) => !prev);
+  };
+  const actualType = type === "password" && passwordVisible ? "text" : type;
+  const isPasswordType = type === "password";
+  const showPasswordToggle = isPasswordType && !disableTogglePasswordButton;
   const input = /* @__PURE__ */ React14.createElement(
     MotionInput,
     {
@@ -1542,12 +1556,22 @@ var Input = React14.forwardRef((props, ref) => {
       required,
       color: error ? "danger" : color,
       disabled,
+      type: actualType,
       slotProps: {
         input: { ref, ...innerProps.slotProps?.input },
         ...innerProps.slotProps
       },
       ...innerProps,
-      endDecorator: enableClearable ? /* @__PURE__ */ React14.createElement(Stack_default, { gap: 1, direction: "row" }, innerProps.endDecorator, value && /* @__PURE__ */ React14.createElement(
+      endDecorator: isPasswordType ? showPasswordToggle ? /* @__PURE__ */ React14.createElement(Stack_default, { gap: 1, direction: "row" }, /* @__PURE__ */ React14.createElement(
+        IconButton_default,
+        {
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: handleTogglePasswordVisibility,
+          disabled,
+          "aria-label": passwordVisible ? "Hide password" : "Show password"
+        },
+        passwordVisible ? /* @__PURE__ */ React14.createElement(VisibilityOffIcon, null) : /* @__PURE__ */ React14.createElement(VisibilityIcon, null)
+      )) : null : enableClearable ? /* @__PURE__ */ React14.createElement(Stack_default, { gap: 1, direction: "row" }, innerProps.endDecorator, value && /* @__PURE__ */ React14.createElement(
         IconButton_default,
         {
           onMouseDown: (e) => e.preventDefault(),
@@ -1800,7 +1824,7 @@ var CurrencyInput = React15.forwardRef(function CurrencyInput2(inProps, ref) {
     }
     return props.max;
   }, [props.max, useMinorUnit, decimalScale]);
-  const [isOverLimit, setIsOverLimit] = useState4(!!max && !!value && value > max);
+  const [isOverLimit, setIsOverLimit] = useState5(!!max && !!value && value > max);
   const handleChange = useCallback6(
     (event) => {
       if (event.target.value === "") {
@@ -2118,7 +2142,7 @@ var Resizer = (ref, targetRef = ref) => /* @__PURE__ */ React16.createElement(
 // src/components/DataTable/components.tsx
 import React22, {
   useRef as useRef4,
-  useState as useState6,
+  useState as useState7,
   useLayoutEffect,
   useMemo as useMemo8,
   useCallback as useCallback8,
@@ -2130,7 +2154,7 @@ import { styled as styled12, useTheme } from "@mui/joy";
 import { AnimatePresence as AnimatePresence2 } from "framer-motion";
 
 // src/components/DatePicker/DatePicker.tsx
-import React17, { forwardRef as forwardRef6, useCallback as useCallback7, useEffect as useEffect3, useImperativeHandle, useRef as useRef3, useState as useState5 } from "react";
+import React17, { forwardRef as forwardRef6, useCallback as useCallback7, useEffect as useEffect3, useImperativeHandle, useRef as useRef3, useState as useState6 } from "react";
 import { IMaskInput, IMask } from "react-imask";
 import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
 import { styled as styled10, useThemeProps as useThemeProps4 } from "@mui/joy";
@@ -2311,10 +2335,10 @@ var DatePicker = forwardRef6((inProps, ref) => {
     props.defaultValue || "",
     useCallback7((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
   );
-  const [displayValue, setDisplayValue] = useState5(
+  const [displayValue, setDisplayValue] = useState6(
     () => value ? formatValueString(parseDate(value, format), displayFormat) : ""
   );
-  const [anchorEl, setAnchorEl] = useState5(null);
+  const [anchorEl, setAnchorEl] = useState6(null);
   const open = Boolean(anchorEl);
   useEffect3(() => {
     if (!anchorEl) {
@@ -2685,7 +2709,7 @@ var InfoSign_default = InfoSign;
 // src/components/DataTable/components.tsx
 var TextEllipsis = ({ children }) => {
   const textRef = useRef4(null);
-  const [showTooltip, setShowTooltip] = useState6(false);
+  const [showTooltip, setShowTooltip] = useState7(false);
   useLayoutEffect(() => {
     const element = textRef.current;
     if (element) {
@@ -2701,7 +2725,7 @@ var TextEllipsis = ({ children }) => {
 };
 var CellTextEllipsis = ({ children }) => {
   const textRef = useRef4(null);
-  const [showTooltip, setShowTooltip] = useState6(false);
+  const [showTooltip, setShowTooltip] = useState7(false);
   useLayoutEffect(() => {
     const element = textRef.current;
     if (element) {
@@ -2753,7 +2777,7 @@ var HeadCell = (props) => {
   const theme = useTheme();
   const ref = headerRef;
   const colRef = tableColRef;
-  const [isHovered, setIsHovered] = useState6(false);
+  const [isHovered, setIsHovered] = useState7(false);
   const sortable = type === "actions" ? false : _sortable;
   const headId = useMemo8(
     () => `${tableId}_header_${headerName ?? field}`.trim(),
@@ -2867,7 +2891,7 @@ var BodyCell = (props) => {
     onCellEditStop
   } = props;
   const theme = useTheme();
-  const [value, setValue] = useState6(row[field]);
+  const [value, setValue] = useState7(row[field]);
   const cellRef = useRef4(null);
   const params = useMemo8(
     () => ({
@@ -3083,9 +3107,9 @@ var VirtualizedTableRow = memo(StyledTableRow2, (prevProps, nextProps) => {
 });
 
 // src/components/DataTable/hooks.ts
-import { useState as useState7, useLayoutEffect as useLayoutEffect2, useRef as useRef5, useMemo as useMemo9, useCallback as useCallback9, useEffect as useEffect5, createRef } from "react";
+import { useState as useState8, useLayoutEffect as useLayoutEffect2, useRef as useRef5, useMemo as useMemo9, useCallback as useCallback9, useEffect as useEffect5, createRef } from "react";
 function useColumnWidths(columnsByField) {
-  const [widths, setWidths] = useState7({});
+  const [widths, setWidths] = useState8({});
   const roRef = useRef5();
   useLayoutEffect2(() => {
     if (roRef.current) roRef.current.disconnect();
@@ -3143,7 +3167,7 @@ function useDataTableRenderer({
   }
   const onSelectionModelChangeRef = useRef5(onSelectionModelChange);
   onSelectionModelChangeRef.current = onSelectionModelChange;
-  const [focusedRowId, setFocusedRowId] = useState7(null);
+  const [focusedRowId, setFocusedRowId] = useState8(null);
   const [sortModel, setSortModel] = useControlledState(
     controlledSortModel,
     initialState?.sorting?.sortModel ?? [],
@@ -3203,7 +3227,7 @@ function useDataTableRenderer({
     () => Array.from(new Set(_sortOrder || ["asc", "desc", null])),
     [_sortOrder]
   );
-  const [page, setPage] = useState7(paginationModel?.page || 1);
+  const [page, setPage] = useState8(paginationModel?.page || 1);
   const pageSize = paginationModel?.pageSize || 20;
   const getId = useCallback9(
     (row, index) => _getId?.(row) ?? row.id ?? `${(index || 0) + (page - 1) * pageSize}`,
@@ -3942,7 +3966,7 @@ var DataTable = forwardRef7(Component);
 DataTable.displayName = "DataTable";
 
 // src/components/DateRangePicker/DateRangePicker.tsx
-import React26, { forwardRef as forwardRef8, useCallback as useCallback12, useEffect as useEffect7, useImperativeHandle as useImperativeHandle3, useMemo as useMemo11, useRef as useRef7, useState as useState8 } from "react";
+import React26, { forwardRef as forwardRef8, useCallback as useCallback12, useEffect as useEffect7, useImperativeHandle as useImperativeHandle3, useMemo as useMemo11, useRef as useRef7, useState as useState9 } from "react";
 import { IMaskInput as IMaskInput2, IMask as IMask2 } from "react-imask";
 import CalendarTodayIcon2 from "@mui/icons-material/CalendarToday";
 import { styled as styled14, useThemeProps as useThemeProps5 } from "@mui/joy";
@@ -4110,10 +4134,10 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
     props.defaultValue || "",
     useCallback12((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
   );
-  const [displayValue, setDisplayValue] = useState8(
+  const [displayValue, setDisplayValue] = useState9(
     () => value ? formatValueString2(parseDates(value, format), displayFormat) : ""
   );
-  const [anchorEl, setAnchorEl] = useState8(null);
+  const [anchorEl, setAnchorEl] = useState9(null);
   const open = Boolean(anchorEl);
   const calendarValue = useMemo11(
     () => value ? parseDates(value, format) : void 0,
@@ -4476,13 +4500,13 @@ function IconMenuButton(props) {
 IconMenuButton.displayName = "IconMenuButton";
 
 // src/components/Markdown/Markdown.tsx
-import React32, { lazy, Suspense, useEffect as useEffect8, useState as useState9 } from "react";
+import React32, { lazy, Suspense, useEffect as useEffect8, useState as useState10 } from "react";
 import { Skeleton } from "@mui/joy";
 import { Link as Link2 } from "@mui/joy";
 import remarkGfm from "remark-gfm";
 var LazyReactMarkdown = lazy(() => import("react-markdown"));
 var Markdown = (props) => {
-  const [rehypeAccent2, setRehypeAccent] = useState9(null);
+  const [rehypeAccent2, setRehypeAccent] = useState10(null);
   useEffect8(() => {
     const loadRehypeAccent = async () => {
       const module = await Promise.resolve().then(() => (init_rehype_accent(), rehype_accent_exports));
@@ -4589,7 +4613,7 @@ function MenuButton(props) {
 MenuButton.displayName = "MenuButton";
 
 // src/components/MonthPicker/MonthPicker.tsx
-import React34, { forwardRef as forwardRef9, useCallback as useCallback13, useEffect as useEffect9, useImperativeHandle as useImperativeHandle4, useRef as useRef8, useState as useState10 } from "react";
+import React34, { forwardRef as forwardRef9, useCallback as useCallback13, useEffect as useEffect9, useImperativeHandle as useImperativeHandle4, useRef as useRef8, useState as useState11 } from "react";
 import CalendarTodayIcon3 from "@mui/icons-material/CalendarToday";
 import { styled as styled21, useThemeProps as useThemeProps6 } from "@mui/joy";
 import { FocusTrap as FocusTrap3, ClickAwayListener as ClickAwayListener3, Popper as Popper4 } from "@mui/base";
@@ -4689,8 +4713,8 @@ var MonthPicker = forwardRef9((inProps, ref) => {
     },
     [format, displayFormat, locale]
   );
-  const [displayValue, setDisplayValue] = useState10(() => getFormattedDisplayValue(value));
-  const [anchorEl, setAnchorEl] = useState10(null);
+  const [displayValue, setDisplayValue] = useState11(() => getFormattedDisplayValue(value));
+  const [anchorEl, setAnchorEl] = useState11(null);
   const open = Boolean(anchorEl);
   useEffect9(() => {
     if (!anchorEl) {
@@ -4842,7 +4866,7 @@ var MonthPicker = forwardRef9((inProps, ref) => {
 });
 
 // src/components/MonthRangePicker/MonthRangePicker.tsx
-import React35, { forwardRef as forwardRef10, useCallback as useCallback14, useEffect as useEffect10, useImperativeHandle as useImperativeHandle5, useMemo as useMemo12, useRef as useRef9, useState as useState11 } from "react";
+import React35, { forwardRef as forwardRef10, useCallback as useCallback14, useEffect as useEffect10, useImperativeHandle as useImperativeHandle5, useMemo as useMemo12, useRef as useRef9, useState as useState12 } from "react";
 import { IMaskInput as IMaskInput3, IMask as IMask3 } from "react-imask";
 import CalendarTodayIcon4 from "@mui/icons-material/CalendarToday";
 import { styled as styled22, useThemeProps as useThemeProps7 } from "@mui/joy";
@@ -4956,7 +4980,7 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
     props.defaultValue || "",
     useCallback14((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
   );
-  const [anchorEl, setAnchorEl] = useState11(null);
+  const [anchorEl, setAnchorEl] = useState12(null);
   const open = Boolean(anchorEl);
   const calendarValue = useMemo12(() => value ? parseDates2(value) : void 0, [value]);
   useEffect10(() => {
@@ -5205,7 +5229,7 @@ function Navigator(props) {
 Navigator.displayName = "Navigator";
 
 // src/components/PercentageInput/PercentageInput.tsx
-import React39, { useCallback as useCallback15, useMemo as useMemo13, useState as useState12 } from "react";
+import React39, { useCallback as useCallback15, useMemo as useMemo13, useState as useState13 } from "react";
 import { NumericFormat as NumericFormat2 } from "react-number-format";
 import { styled as styled25, useThemeProps as useThemeProps8 } from "@mui/joy";
 var padDecimal = (value, decimalScale) => {
@@ -5264,7 +5288,7 @@ var PercentageInput = React39.forwardRef(
       props.defaultValue,
       useCallback15((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
     );
-    const [internalError, setInternalError] = useState12(
+    const [internalError, setInternalError] = useState13(
       max && _value && _value > max || min && _value && _value < min
     );
     const value = useMemo13(() => {
@@ -5758,7 +5782,7 @@ function ThemeProvider(props) {
 ThemeProvider.displayName = "ThemeProvider";
 
 // src/components/Uploader/Uploader.tsx
-import React45, { useCallback as useCallback16, useEffect as useEffect11, useMemo as useMemo14, useRef as useRef10, useState as useState13 } from "react";
+import React45, { useCallback as useCallback16, useEffect as useEffect11, useMemo as useMemo14, useRef as useRef10, useState as useState14 } from "react";
 import { styled as styled29, Input as Input2 } from "@mui/joy";
 import MuiFileUploadIcon from "@mui/icons-material/CloudUploadRounded";
 import MuiUploadFileIcon from "@mui/icons-material/UploadFileRounded";
@@ -5909,10 +5933,10 @@ var Uploader = React45.memo(
     } = props;
     const dropZoneRef = useRef10(null);
     const inputRef = useRef10(null);
-    const [errorText, setErrorText] = useState13();
-    const [files, setFiles] = useState13([]);
-    const [uploaded, setUploaded] = useState13(props.uploaded || []);
-    const [previewState, setPreviewState] = useState13("idle");
+    const [errorText, setErrorText] = useState14();
+    const [files, setFiles] = useState14([]);
+    const [uploaded, setUploaded] = useState14(props.uploaded || []);
+    const [previewState, setPreviewState] = useState14("idle");
     const accepts = useMemo14(() => accept.split(",").map((accept2) => accept2.trim()), [accept]);
     const parsedAccepts = useMemo14(
       () => accepts.flatMap((type) => {