@ceed/ads 1.13.3 → 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

@@ -1568,6 +1568,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 {
@@ -1581,12 +1583,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,
@@ -1610,6 +1618,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,
     {
@@ -1619,12 +1633,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

@@ -1472,15 +1472,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 {
@@ -1494,12 +1496,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,
@@ -1523,6 +1531,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,
     {
@@ -1532,12 +1546,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(),
@@ -1790,7 +1814,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 === "") {
@@ -2108,7 +2132,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,
@@ -2120,7 +2144,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";
@@ -2301,10 +2325,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) {
@@ -2675,7 +2699,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) {
@@ -2691,7 +2715,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) {
@@ -2743,7 +2767,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(),
@@ -2857,7 +2881,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(
     () => ({
@@ -3073,9 +3097,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();
@@ -3133,7 +3157,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 ?? [],
@@ -3193,7 +3217,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}`,
@@ -3932,7 +3956,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";
@@ -4100,10 +4124,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,
@@ -4462,7 +4486,7 @@ function RadioGroup2(props) {
 RadioGroup2.displayName = "RadioGroup";
 
 // src/components/FilterMenu/components/DateRange.tsx
-import React32, { useCallback as useCallback15, useMemo as useMemo12, useState as useState9, useEffect as useEffect8 } from "react";
+import React32, { useCallback as useCallback15, useMemo as useMemo12, useState as useState10, useEffect as useEffect8 } from "react";
 import { Stack as Stack4 } from "@mui/joy";
 function DateRange(props) {
   const {
@@ -4481,7 +4505,7 @@ function DateRange(props) {
     hideClearButton
   } = props;
   const [internalValue, setInternalValue] = useControlledState(value, null, onChange);
-  const [selectedOption, setSelectedOption] = useState9("all-time");
+  const [selectedOption, setSelectedOption] = useState10("all-time");
   const dateRangeOptions = useMemo12(
     () => [
       { label: "All Time", value: "all-time" },
@@ -4707,7 +4731,7 @@ import React36 from "react";
 import { Stack as Stack7, Typography as Typography2 } from "@mui/joy";
 
 // src/components/PercentageInput/PercentageInput.tsx
-import React35, { useCallback as useCallback18, useMemo as useMemo13, useState as useState10 } from "react";
+import React35, { useCallback as useCallback18, useMemo as useMemo13, useState as useState11 } from "react";
 import { NumericFormat as NumericFormat2 } from "react-number-format";
 import { styled as styled20, useThemeProps as useThemeProps6 } from "@mui/joy";
 var padDecimal = (value, decimalScale) => {
@@ -4766,7 +4790,7 @@ var PercentageInput = React35.forwardRef(
       props.defaultValue,
       useCallback18((value2) => onChange?.({ target: { name, value: value2 } }), [onChange, name])
     );
-    const [internalError, setInternalError] = useState10(
+    const [internalError, setInternalError] = useState11(
       max && _value && _value > max || min && _value && _value < min
     );
     const value = useMemo13(() => {
@@ -5028,7 +5052,7 @@ function FilterMenu(props) {
 FilterMenu.displayName = "FilterMenu";
 
 // src/components/Uploader/Uploader.tsx
-import React40, { useCallback as useCallback22, useEffect as useEffect9, useMemo as useMemo14, useRef as useRef8, useState as useState11 } from "react";
+import React40, { useCallback as useCallback22, useEffect as useEffect9, useMemo as useMemo14, useRef as useRef8, useState as useState12 } from "react";
 import { styled as styled21, Input as Input2 } from "@mui/joy";
 import MuiFileUploadIcon from "@mui/icons-material/CloudUploadRounded";
 import MuiUploadFileIcon from "@mui/icons-material/UploadFileRounded";
@@ -5179,10 +5203,10 @@ var Uploader = React40.memo(
     } = props;
     const dropZoneRef = useRef8(null);
     const inputRef = useRef8(null);
-    const [errorText, setErrorText] = useState11();
-    const [files, setFiles] = useState11([]);
-    const [uploaded, setUploaded] = useState11(props.uploaded || []);
-    const [previewState, setPreviewState] = useState11("idle");
+    const [errorText, setErrorText] = useState12();
+    const [files, setFiles] = useState12([]);
+    const [uploaded, setUploaded] = useState12(props.uploaded || []);
+    const [previewState, setPreviewState] = useState12("idle");
     const accepts = useMemo14(() => accept.split(",").map((accept2) => accept2.trim()), [accept]);
     const parsedAccepts = useMemo14(
       () => accepts.flatMap((type) => {
@@ -5442,13 +5466,13 @@ function IconMenuButton(props) {
 IconMenuButton.displayName = "IconMenuButton";
 
 // src/components/Markdown/Markdown.tsx
-import React42, { lazy, Suspense, useEffect as useEffect10, useState as useState12 } from "react";
+import React42, { lazy, Suspense, useEffect as useEffect10, useState as useState13 } 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] = useState12(null);
+  const [rehypeAccent2, setRehypeAccent] = useState13(null);
   useEffect10(() => {
     const loadRehypeAccent = async () => {
       const module = await Promise.resolve().then(() => (init_rehype_accent(), rehype_accent_exports));
@@ -5555,7 +5579,7 @@ function MenuButton(props) {
 MenuButton.displayName = "MenuButton";
 
 // src/components/MonthPicker/MonthPicker.tsx
-import React44, { forwardRef as forwardRef9, useCallback as useCallback23, useEffect as useEffect11, useImperativeHandle as useImperativeHandle4, useRef as useRef9, useState as useState13 } from "react";
+import React44, { forwardRef as forwardRef9, useCallback as useCallback23, useEffect as useEffect11, useImperativeHandle as useImperativeHandle4, useRef as useRef9, useState as useState14 } from "react";
 import CalendarTodayIcon3 from "@mui/icons-material/CalendarToday";
 import { styled as styled22, useThemeProps as useThemeProps7 } from "@mui/joy";
 import { FocusTrap as FocusTrap3, ClickAwayListener as ClickAwayListener3, Popper as Popper4 } from "@mui/base";
@@ -5655,8 +5679,8 @@ var MonthPicker = forwardRef9((inProps, ref) => {
     },
     [format, displayFormat, locale]
   );
-  const [displayValue, setDisplayValue] = useState13(() => getFormattedDisplayValue(value));
-  const [anchorEl, setAnchorEl] = useState13(null);
+  const [displayValue, setDisplayValue] = useState14(() => getFormattedDisplayValue(value));
+  const [anchorEl, setAnchorEl] = useState14(null);
   const open = Boolean(anchorEl);
   useEffect11(() => {
     if (!anchorEl) {
@@ -5808,7 +5832,7 @@ var MonthPicker = forwardRef9((inProps, ref) => {
 });
 
 // src/components/MonthRangePicker/MonthRangePicker.tsx
-import React45, { forwardRef as forwardRef10, useCallback as useCallback24, useEffect as useEffect12, useImperativeHandle as useImperativeHandle5, useMemo as useMemo15, useRef as useRef10, useState as useState14 } from "react";
+import React45, { forwardRef as forwardRef10, useCallback as useCallback24, useEffect as useEffect12, useImperativeHandle as useImperativeHandle5, useMemo as useMemo15, useRef as useRef10, useState as useState15 } from "react";
 import { IMaskInput as IMaskInput3, IMask as IMask3 } from "react-imask";
 import CalendarTodayIcon4 from "@mui/icons-material/CalendarToday";
 import { styled as styled23, useThemeProps as useThemeProps8 } from "@mui/joy";
@@ -5922,7 +5946,7 @@ var MonthRangePicker = forwardRef10((inProps, ref) => {
     props.defaultValue || "",
     useCallback24((value2) => onChange?.({ target: { name: props.name, value: value2 } }), [props.name, onChange])
   );
-  const [anchorEl, setAnchorEl] = useState14(null);
+  const [anchorEl, setAnchorEl] = useState15(null);
   const open = Boolean(anchorEl);
   const calendarValue = useMemo15(() => value ? parseDates2(value) : void 0, [value]);
   useEffect12(() => {