@ceed/ads 1.8.0-next.10 → 1.8.0-next.3

package/dist/components/DateRangePicker/DateRangePicker.d.ts

@@ -1,9 +1,6 @@
 import React from "react";
 import Input from "../Input";
 interface BaseDateRangePickerProps {
-    /**
-     * props.format 의 형식을 따라야 한다.
-     */
     value?: string;
     defaultValue?: string;
     onChange?: (event: {
@@ -22,14 +19,7 @@ interface BaseDateRangePickerProps {
     maxDate?: string;
     disableFuture?: boolean;
     disablePast?: boolean;
-    /**
-     * value, onChange의 값은 해당 포맷을 따른다.
-     */
     format?: string;
-    /**
-     * Input 에 표시되는 값의 포맷을 지정한다.
-     */
-    displayFormat?: string;
     inputReadOnly?: boolean;
     hideClearButton?: boolean;
 }

package/dist/components/FilterMenu/FilterMenu.d.ts

@@ -4,18 +4,8 @@ interface FilterMenuProps {
     filters?: FilterItem[];
     values?: Record<string, any>;
     defaultValues?: Record<string, any>;
-    resetValues?: Record<string, any>;
     onChange?: (values: Record<string, any>) => void;
     onClose?: () => void;
-    /**
-     * 필터에 있는 모든 옵션을 비우는 버튼을 제공하는 옵션.
-     * 일반적으로 아이콘 필터 버튼을 사용해서 필터가 모두 제공될 때 사용한다.
-     */
-    useReset?: boolean;
-    /**
-     * 하나의 필터 항목만 값을 비우는 버튼을 제공하는 옵션. filters가 1개만 있을때 Clear 버튼을 표시하고 2개 이상이면 의미 없다.
-     */
-    useClear?: boolean;
 }
 declare function FilterMenu(props: FilterMenuProps): React.JSX.Element;
 declare namespace FilterMenu {

package/dist/components/FilterMenu/components/PercentageRange.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { FilterPercentageRangeItem } from "../types";
 interface PercentageRangeProps extends FilterPercentageRangeItem {
-    onChange?: (value: [number | null, number | null] | null) => void;
+    onChange?: (value: [number, number] | null) => void;
 }
 declare function PercentageRange(props: PercentageRangeProps): React.JSX.Element | null;
 declare namespace PercentageRange {

package/dist/components/FilterMenu/types.d.ts

@@ -24,7 +24,7 @@ export interface FilterRadioGroupItem extends FilterBaseItem<string | number> {
         value: string | number;
     }[];
 }
-export interface FilterDateRangeItem extends FilterBaseItem<[DateTime, DateTime]>, Pick<DateRangePickerProps, "minDate" | "maxDate" | "disableFuture" | "disablePast" | "format" | "displayFormat" | "inputReadOnly" | "hideClearButton"> {
+export interface FilterDateRangeItem extends FilterBaseItem<[DateTime, DateTime]>, Pick<DateRangePickerProps, "minDate" | "maxDate" | "disableFuture" | "disablePast" | "format" | "inputReadOnly" | "hideClearButton"> {
     type: "date-range";
 }
 export interface FilterCurrencyInputItem extends FilterBaseItem<number>, Pick<CurrencyInputProps, "max" | "placeholder" | "useMinorUnit" | "currency"> {
@@ -39,7 +39,7 @@ export interface FilterPercentageInputItem extends FilterBaseItem<number>, Pick<
 export interface FilterPercentageRangeItem extends FilterBaseItem<[number, number]>, Pick<PercentageInputProps, "useMinorUnit" | "maxDecimalScale" | "min" | "max"> {
     type: "percentage-range";
 }
-export interface FilterAutocompleteItem extends FilterBaseItem<string | number>, Pick<AutocompleteProps<any, boolean>, "options" | "multiple" | "placeholder"> {
+export interface FilterAutocompleteItem extends FilterBaseItem<string | number>, Pick<AutocompleteProps<any, boolean>, "options" | "multiple"> {
     type: "autocomplete";
 }
 export type FilterItem = FilterCheckboxGroupItem | FilterRadioGroupItem | FilterDateRangeItem | FilterCurrencyInputItem | FilterCurrencyRangeItem | FilterPercentageInputItem | FilterPercentageRangeItem | FilterAutocompleteItem;

package/dist/components/index.d.ts

@@ -23,7 +23,6 @@ export { Divider } from "./Divider";
 export { InsetDrawer } from "./InsetDrawer";
 export { Dropdown } from "./Dropdown";
 export { FilterMenu } from "./FilterMenu";
-export type * from "./FilterMenu";
 export { Uploader } from "./Uploader";
 export { FormControl } from "./FormControl";
 export { FormHelperText } from "./FormHelperText";

package/dist/index.cjs

@@ -4157,9 +4157,7 @@ var CalendarButton2 = (0, import_joy34.styled)(IconButton_default, {
   "&:focus": {
     "--Icon-color": "currentColor",
     outlineOffset: `${theme.getCssVar("focus-thickness")}`,
-    outline: `${theme.getCssVar("focus-thickness")} solid ${theme.getCssVar(
-      "palette-focusVisible"
-    )}`
+    outline: `${theme.getCssVar("focus-thickness")} solid ${theme.getCssVar("palette-focusVisible")}`
   }
 }));
 var StyledPopper2 = (0, import_joy34.styled)(import_base3.Popper, {
@@ -4185,32 +4183,6 @@ var DateRangePickerRoot = (0, import_joy34.styled)("div", {
 })({
   width: "100%"
 });
-var validValueFormat2 = (value, format) => {
-  try {
-    const [date1Str, date2Str] = value.split(" - ");
-    if (!date1Str || !date2Str) {
-      return false;
-    }
-    const parsedDate1 = parseDate2(date1Str, format);
-    const parsedDate2 = parseDate2(date2Str, format);
-    if (parsedDate1.toString() === "Invalid Date" || parsedDate2.toString() === "Invalid Date") {
-      return false;
-    }
-    const formattedValue = formatValueString2(
-      [parsedDate1, parsedDate2],
-      format
-    );
-    if (value !== formattedValue) {
-      return false;
-    }
-    const regex = new RegExp(
-      `^${format.replace(/Y/g, "\\d").replace(/M/g, "\\d").replace(/D/g, "\\d")} - ${format.replace(/Y/g, "\\d").replace(/M/g, "\\d").replace(/D/g, "\\d")}$`
-    );
-    return regex.test(value);
-  } catch (e) {
-    return false;
-  }
-};
 var formatValueString2 = ([date1, date2], format) => {
   const getStr = (date) => {
     let day = `${date.getDate()}`;
@@ -4307,7 +4279,6 @@ var DateRangePicker = (0, import_react26.forwardRef)(
       sx,
       className,
       format = "YYYY/MM/DD",
-      displayFormat = "YYYY/MM/DD",
       size,
       inputReadOnly,
       hideClearButton,
@@ -4324,27 +4295,12 @@ var DateRangePicker = (0, import_react26.forwardRef)(
         [props.name, onChange]
       )
     );
-    const [displayValue, setDisplayValue] = (0, import_react26.useState)(
-      () => value ? formatValueString2(parseDates(value, format), displayFormat) : ""
-    );
     const [anchorEl, setAnchorEl] = (0, import_react26.useState)(null);
     const open = Boolean(anchorEl);
     const calendarValue = (0, import_react26.useMemo)(
       () => value ? parseDates(value, format) : void 0,
       [value, format]
     );
-    (0, import_react26.useEffect)(() => {
-      if (value) {
-        try {
-          const dates = parseDates(value, format);
-          const newDisplayValue = formatValueString2(dates, displayFormat);
-          setDisplayValue(newDisplayValue);
-        } catch (error2) {
-        }
-      } else {
-        setDisplayValue("");
-      }
-    }, [displayFormat, value, format]);
     (0, import_react26.useEffect)(() => {
       if (!anchorEl) {
         innerRef.current?.blur();
@@ -4355,41 +4311,9 @@ var DateRangePicker = (0, import_react26.forwardRef)(
     ]);
     const handleChange = (0, import_react26.useCallback)(
       (event) => {
-        const value2 = event.target.value;
-        setDisplayValue(
-          value2 ? formatValueString2(parseDates(value2, format), displayFormat) : value2
-        );
-        setValue(value2);
-      },
-      [displayFormat, format, setValue]
-    );
-    const handleDisplayInputChange = (0, import_react26.useCallback)(
-      (event) => {
-        if (event.target.value === "") {
-          handleChange({
-            target: {
-              name: props.name,
-              value: ""
-            }
-          });
-          return;
-        }
-        const isValidDisplayValue = validValueFormat2(
-          event.target.value,
-          displayFormat
-        );
-        if (isValidDisplayValue) {
-          const dates = parseDates(event.target.value, displayFormat);
-          const formattedValue = formatValueString2(dates, format);
-          handleChange({
-            target: {
-              name: props.name,
-              value: formattedValue
-            }
-          });
-        }
+        setValue(event.target.value);
       },
-      [displayFormat, format, handleChange, props.name]
+      [setValue]
     );
     const handleCalendarToggle = (0, import_react26.useCallback)(
       (event) => {
@@ -4401,26 +4325,10 @@ var DateRangePicker = (0, import_react26.forwardRef)(
     const handleCalendarChange = (0, import_react26.useCallback)(
       ([date1, date2]) => {
         if (!date1 || !date2) return;
-        const formattedValue = formatValueString2([date1, date2], format);
-        if (props.value !== void 0) {
-          onChange?.({ target: { name: props.name, value: formattedValue } });
-        } else {
-          setDisplayValue(
-            formatValueString2([date1, date2], displayFormat)
-          );
-          setValue(formattedValue);
-        }
+        setValue(formatValueString2([date1, date2], format));
         setAnchorEl(null);
       },
-      [
-        props.value,
-        props.name,
-        onChange,
-        setValue,
-        setAnchorEl,
-        format,
-        displayFormat
-      ]
+      [setValue, setAnchorEl, format]
     );
     const handleInputMouseDown = (0, import_react26.useCallback)(
       (event) => {
@@ -4438,21 +4346,17 @@ var DateRangePicker = (0, import_react26.forwardRef)(
         color: error ? "danger" : innerProps.color,
         ref,
         size,
-        value: displayValue,
-        onChange: handleDisplayInputChange,
+        value,
+        onChange: handleChange,
         disabled,
         required,
-        placeholder: `${displayFormat} - ${displayFormat}`,
+        placeholder: `${format} - ${format}`,
         slotProps: {
           input: {
             component: TextMaskAdapter5,
             ref: innerRef,
-            format: displayFormat,
-            sx: {
-              "&:hover": {
-                cursor: inputReadOnly || readOnly ? "default" : "text"
-              }
-            },
+            format,
+            sx: { "&:hover": { cursor: inputReadOnly || readOnly ? "default" : "text" } },
             onMouseDown: handleInputMouseDown
           }
         },
@@ -4522,7 +4426,6 @@ var DateRangePicker = (0, import_react26.forwardRef)(
             color: "neutral",
             onClick: () => {
               setValue("");
-              setDisplayValue("");
               setAnchorEl(null);
             }
           },
@@ -4679,7 +4582,7 @@ function CheckboxGroup(props) {
     {
       key: `${id}-${option.value}`,
       label: option.label,
-      checked: internalValue?.includes(option.value),
+      checked: internalValue.includes(option.value),
       onChange: handleCheckboxChange(option.value)
     }
   )));
@@ -4763,7 +4666,6 @@ function DateRange(props) {
     disableFuture,
     disablePast,
     format = "YYYY/MM/DD",
-    displayFormat,
     inputReadOnly,
     hideClearButton
   } = props;
@@ -4788,12 +4690,6 @@ function DateRange(props) {
       const now = /* @__PURE__ */ new Date();
       const currentYear = now.getFullYear();
       const currentMonth = now.getMonth();
-      const formatDate = (date) => {
-        const year = date.getFullYear();
-        const month = String(date.getMonth() + 1).padStart(2, "0");
-        const day = String(date.getDate()).padStart(2, "0");
-        return `${year}-${month}-${day}`;
-      };
       switch (option) {
         case "all-time":
           return null;
@@ -4801,26 +4697,24 @@ function DateRange(props) {
           const startOfMonth = new Date(currentYear, currentMonth, 1);
           const endOfMonth = new Date(currentYear, currentMonth + 1, 0);
           return [
-            formatDate(startOfMonth),
-            formatDate(endOfMonth)
+            startOfMonth.toISOString().split("T")[0],
+            endOfMonth.toISOString().split("T")[0]
           ];
         }
         case "this-year": {
           const startOfYear = new Date(currentYear, 0, 1);
           const endOfYear = new Date(currentYear, 11, 31);
           return [
-            formatDate(startOfYear),
-            formatDate(endOfYear)
+            startOfYear.toISOString().split("T")[0],
+            endOfYear.toISOString().split("T")[0]
           ];
         }
         case "last-month": {
-          const lastMonthYear = currentMonth === 0 ? currentYear - 1 : currentYear;
-          const lastMonth = currentMonth === 0 ? 11 : currentMonth - 1;
-          const startOfLastMonth = new Date(lastMonthYear, lastMonth, 1);
-          const endOfLastMonth = new Date(lastMonthYear, lastMonth + 1, 0);
+          const startOfLastMonth = new Date(currentYear, currentMonth - 1, 1);
+          const endOfLastMonth = new Date(currentYear, currentMonth, 0);
           return [
-            formatDate(startOfLastMonth),
-            formatDate(endOfLastMonth)
+            startOfLastMonth.toISOString().split("T")[0],
+            endOfLastMonth.toISOString().split("T")[0]
           ];
         }
         case "custom":
@@ -4831,32 +4725,12 @@ function DateRange(props) {
     },
     [internalValue]
   );
-  const determineOptionFromValue = (0, import_react32.useCallback)(
-    (value2) => {
-      if (!value2) {
-        return "all-time";
-      }
-      const options = ["this-month", "this-year", "last-month"];
-      for (const option of options) {
-        const optionRange = getDateRangeForOption(option);
-        if (optionRange && optionRange[0] === value2[0] && optionRange[1] === value2[1]) {
-          return option;
-        }
-      }
-      return "custom";
-    },
-    [getDateRangeForOption]
-  );
   const customDateRangeValue = (0, import_react32.useMemo)(() => {
     if (selectedOption === "custom" && internalValue) {
       return `${internalValue[0]} - ${internalValue[1]}`;
     }
     return "";
   }, [selectedOption, internalValue]);
-  (0, import_react32.useEffect)(() => {
-    const newOption = determineOptionFromValue(internalValue);
-    setSelectedOption(newOption);
-  }, [internalValue, determineOptionFromValue]);
   const handleOptionChange = (0, import_react32.useCallback)(
     (event) => {
       const newOption = event.target.value;
@@ -4918,7 +4792,6 @@ function DateRange(props) {
       disableFuture,
       disablePast,
       format,
-      displayFormat,
       inputReadOnly,
       hideClearButton
     }
@@ -5250,15 +5123,21 @@ function PercentageRange(props) {
     min,
     max
   } = props;
-  const [internalValue, setInternalValue] = useControlledState(value, null, onChange);
+  const [internalValue, setInternalValue] = useControlledState(
+    value,
+    null,
+    onChange
+  );
   const minValue = internalValue?.[0];
   const maxValue = internalValue?.[1];
   const handleMinChange = (0, import_react37.useCallback)(
     (event) => {
       const newMinValue = event.target.value;
       const currentMaxValue = maxValue;
-      if (newMinValue !== void 0) {
-        setInternalValue([newMinValue, currentMaxValue || null]);
+      if (newMinValue !== void 0 && currentMaxValue !== void 0) {
+        setInternalValue([newMinValue, currentMaxValue]);
+      } else if (newMinValue !== void 0) {
+        setInternalValue([newMinValue, newMinValue]);
       } else {
         setInternalValue(null);
       }
@@ -5269,8 +5148,10 @@ function PercentageRange(props) {
     (event) => {
       const newMaxValue = event.target.value;
       const currentMinValue = minValue;
-      if (newMaxValue !== void 0) {
-        setInternalValue([currentMinValue || null, newMaxValue]);
+      if (currentMinValue !== void 0 && newMaxValue !== void 0) {
+        setInternalValue([currentMinValue, newMaxValue]);
+      } else if (newMaxValue !== void 0) {
+        setInternalValue([newMaxValue, newMaxValue]);
       } else {
         setInternalValue(null);
       }
@@ -5293,7 +5174,7 @@ function PercentageRange(props) {
     PercentageInput,
     {
       label: "Minimum",
-      value: minValue ?? void 0,
+      value: minValue,
       onChange: handleMinChange,
       useMinorUnit,
       maxDecimalScale,
@@ -5307,7 +5188,7 @@ function PercentageRange(props) {
     PercentageInput,
     {
       label: "Maximum",
-      value: maxValue ?? void 0,
+      value: maxValue,
       onChange: handleMaxChange,
       useMinorUnit,
       maxDecimalScale,
@@ -5325,7 +5206,15 @@ PercentageRange.displayName = "PercentageRange";
 var import_react38 = __toESM(require("react"));
 var import_joy50 = require("@mui/joy");
 function Autocomplete2(props) {
-  const { id, label, value, onChange, options, multiple, hidden, placeholder } = props;
+  const {
+    id,
+    label,
+    value,
+    onChange,
+    options,
+    multiple,
+    hidden
+  } = props;
   const [internalValue, setInternalValue] = useControlledState(
     value,
     void 0,
@@ -5363,7 +5252,6 @@ function Autocomplete2(props) {
       onChange: handleChange,
       options,
       multiple,
-      placeholder,
       "aria-labelledby": label ? id : void 0
     }
   ));
@@ -5382,16 +5270,7 @@ var componentMap = {
   autocomplete: Autocomplete2
 };
 function FilterMenu(props) {
-  const {
-    filters,
-    values,
-    defaultValues,
-    resetValues = {},
-    onChange,
-    onClose,
-    useClear,
-    useReset
-  } = props;
+  const { filters, values, defaultValues, onChange, onClose } = props;
   const [internalValues, setInternalValues] = useControlledState(
     values,
     defaultValues || {},
@@ -5412,55 +5291,25 @@ function FilterMenu(props) {
     onClose?.();
   }, [onChange, onClose, internalValues]);
   const handleClear = (0, import_react39.useCallback)(() => {
-    const clearedValues = resetValues || {};
+    const clearedValues = defaultValues || {};
     setInternalValues(clearedValues);
     onChange?.(clearedValues);
     onClose?.();
-  }, [resetValues, setInternalValues, onChange, onClose]);
-  return /* @__PURE__ */ import_react39.default.createElement(
-    ModalDialog,
-    {
-      sx: {
-        position: "relative",
-        transform: "none",
-        left: "initial",
-        top: "initial"
-      }
-    },
-    /* @__PURE__ */ import_react39.default.createElement(DialogContent, { sx: { paddingTop: 5 } }, /* @__PURE__ */ import_react39.default.createElement(import_joy51.Stack, { spacing: 6 }, filters?.map((filter) => {
-      const FilterComponent = componentMap[filter.type];
-      return FilterComponent ? /* @__PURE__ */ import_react39.default.createElement(
-        FilterComponent,
-        {
-          key: filter.id,
-          ...filter,
-          value: internalValues[filter.id],
-          onChange: (value) => {
-            handleFilterChange(filter.id, value);
-          }
-        }
-      ) : null;
-    }))),
-    /* @__PURE__ */ import_react39.default.createElement(DialogActions, { sx: { justifyContent: "space-between" } }, useClear && filters?.length === 1 && /* @__PURE__ */ import_react39.default.createElement(
-      import_joy51.Button,
-      {
-        variant: "plain",
-        color: "neutral",
-        size: "md",
-        onClick: handleClear
-      },
-      "Clear"
-    ), useReset && !useClear && /* @__PURE__ */ import_react39.default.createElement(
-      import_joy51.Button,
+  }, [defaultValues, setInternalValues, onChange, onClose]);
+  return /* @__PURE__ */ import_react39.default.createElement(ModalDialog, null, /* @__PURE__ */ import_react39.default.createElement(DialogContent, { sx: { paddingTop: 5 } }, /* @__PURE__ */ import_react39.default.createElement(import_joy51.Stack, { spacing: 6 }, filters?.map((filter) => {
+    const FilterComponent = componentMap[filter.type];
+    return FilterComponent ? /* @__PURE__ */ import_react39.default.createElement(
+      FilterComponent,
       {
-        variant: "plain",
-        color: "neutral",
-        size: "md",
-        onClick: handleClear
-      },
-      "Reset"
-    ), /* @__PURE__ */ import_react39.default.createElement(import_joy51.Button, { variant: "solid", color: "primary", size: "md", onClick: handleApply }, "Apply"))
-  );
+        key: filter.id,
+        ...filter,
+        value: internalValues[filter.id],
+        onChange: (value) => {
+          handleFilterChange(filter.id, value);
+        }
+      }
+    ) : null;
+  }))), /* @__PURE__ */ import_react39.default.createElement(DialogActions, { sx: { justifyContent: "space-between" } }, /* @__PURE__ */ import_react39.default.createElement(import_joy51.Button, { variant: "plain", color: "neutral", size: "md", onClick: handleClear }, "Clear"), /* @__PURE__ */ import_react39.default.createElement(import_joy51.Button, { variant: "solid", color: "primary", size: "md", onClick: handleApply }, "Apply")));
 }
 FilterMenu.displayName = "FilterMenu";
 

package/dist/index.d.ts

@@ -1,4 +1,3 @@
 export { useTheme, useColorScheme, useThemeProps, ButtonGroup, alertClasses, boxClasses, buttonClasses, checkboxClasses, dividerClasses, iconButtonClasses, inputClasses, menuClasses, menuButtonClasses, menuItemClasses, optionClasses, radioClasses, radioGroupClasses, selectClasses, switchClasses, tableClasses, textareaClasses, typographyClasses, formControlClasses, formLabelClasses, formHelperTextClasses, gridClasses, stackClasses, sheetClasses, modalClasses, modalCloseClasses, modalDialogClasses, modalOverflowClasses, dialogTitleClasses, dialogContentClasses, dialogActionsClasses, tooltipClasses, tabsClasses, tabListClasses, tabPanelClasses, accordionClasses, accordionDetailsClasses, accordionGroupClasses as accordionsClasses, accordionSummaryClasses, AutocompleteListbox, AutocompleteOption, autocompleteClasses, autocompleteListboxClasses, autocompleteOptionClasses, avatarClasses, avatarGroupClasses, AspectRatio, aspectRatioClasses, Badge, badgeClasses, breadcrumbsClasses, cardClasses, cardActionsClasses, cardContentClasses, cardCoverClasses, cardOverflowClasses, chipClasses, CircularProgress, circularProgressClasses, Drawer, drawerClasses, LinearProgress, linearProgressClasses, List, listClasses, ListDivider, listDividerClasses, ListItem, listItemClasses, ListItemButton, listItemButtonClasses, ListItemContent, listItemContentClasses, ListItemDecorator, listItemDecoratorClasses, ListSubheader, listSubheaderClasses, Link, linkClasses, Slider, sliderClasses, stepClasses, StepButton, stepButtonClasses, stepperClasses, Skeleton, skeletonClasses, styled, } from "@mui/joy";
 export type { ButtonProps, Theme } from "@mui/joy";
 export { Accordion, Accordions, Alert, Autocomplete, AccordionDetails, AccordionSummary, Avatar, AvatarGroup, Box, Breadcrumbs, Button, Calendar, Card, CardActions, CardContent, CardCover, CardOverflow, Checkbox, Chip, Container, CssBaseline, CurrencyInput, DataTable, DatePicker, DateRangePicker, DialogActions, DialogContent, DialogTitle, DialogFrame, Divider, Dropdown, FilterMenu, extendTheme, InsetDrawer, Uploader, FormControl, FormHelperText, FormLabel, Grid, IconButton, IconMenuButton, InfoSign, Input, Markdown, Menu, MenuButton, MenuItem, Modal, ModalClose, ModalDialog, ModalOverflow, ModalFrame, MonthPicker, MonthRangePicker, PercentageInput, ProfileMenu, Pagination, NavigationGroup, NavigationItem, Navigator, Radio, RadioGroup, RadioList, Select, Option, Sheet, Stack, Step, StepIndicator, Stepper, Switch, theme, Table, TableHead, TableBody, Tabs, Tab, TabList, TabPanel, Textarea, ThemeProvider, Tooltip, Typography, } from "./components";
-export type * from "./components";