@ceed/ads 1.16.0-next.8 → 1.16.0-next.9

package/dist/index.js

@@ -4495,9 +4495,39 @@ var InsetDrawer = styled19(JoyDrawer)(({ theme }) => ({
 
 // src/components/FilterableCheckboxGroup/FilterableCheckboxGroup.tsx
 import React30, { useCallback as useCallback13, useEffect as useEffect8, useMemo as useMemo12, useRef as useRef8, useState as useState10 } from "react";
-import { Input as Input2, Stack as Stack2 } from "@mui/joy";
 import SearchIcon from "@mui/icons-material/Search";
 import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
+function LabelWithTooltip(props) {
+  const { label, size } = props;
+  const labelContentRef = useRef8(null);
+  const [isOverflowing, setIsOverflowing] = useState10(false);
+  const labelContent = /* @__PURE__ */ React30.createElement(
+    "span",
+    {
+      ref: labelContentRef,
+      style: {
+        textOverflow: "ellipsis",
+        overflow: "hidden",
+        whiteSpace: "nowrap",
+        display: "block",
+        position: "relative",
+        zIndex: 1,
+        cursor: "pointer"
+      }
+    },
+    label
+  );
+  useEffect8(() => {
+    const element = labelContentRef.current;
+    if (element) {
+      setIsOverflowing(element.scrollWidth > element.clientWidth);
+    }
+  }, [label]);
+  if (isOverflowing) {
+    return /* @__PURE__ */ React30.createElement(Tooltip_default, { variant: "solid", size, title: label, placement: "bottom-start" }, labelContent);
+  }
+  return labelContent;
+}
 function FilterableCheckboxGroup(props) {
   const {
     value,
@@ -4601,15 +4631,15 @@ function FilterableCheckboxGroup(props) {
     },
     [filteredOptions, internalValue, setInternalValue]
   );
-  const enabledFilteredOptions = useMemo12(
-    () => filteredOptions.filter((option) => !option.disabled),
-    [filteredOptions]
-  );
+  const enabledFilteredOptions = useMemo12(() => filteredOptions.filter((option) => !option.disabled), [filteredOptions]);
   const isAllSelected = enabledFilteredOptions.length > 0 && enabledFilteredOptions.every((option) => internalValue.includes(option.value));
   const isIndeterminate = !isAllSelected && enabledFilteredOptions.some((option) => internalValue.includes(option.value));
-  return /* @__PURE__ */ React30.createElement("div", { style: { width: "100%" } }, /* @__PURE__ */ React30.createElement(FormControl_default, { required, size }, label && /* @__PURE__ */ React30.createElement(FormLabel_default, null, label), /* @__PURE__ */ React30.createElement(
-    Input2,
+  return /* @__PURE__ */ React30.createElement("div", { style: { width: "100%" } }, /* @__PURE__ */ React30.createElement(
+    Input_default,
     {
+      label,
+      helperText,
+      required,
       variant: "outlined",
       color: "neutral",
       placeholder,
@@ -4619,16 +4649,16 @@ function FilterableCheckboxGroup(props) {
       disabled,
       endDecorator: /* @__PURE__ */ React30.createElement(SearchIcon, null)
     }
-  ), helperText && /* @__PURE__ */ React30.createElement(FormHelperText_default, null, helperText)), filteredOptions.length === 0 ? /* @__PURE__ */ React30.createElement(
-    Stack2,
+  ), filteredOptions.length === 0 ? /* @__PURE__ */ React30.createElement(
+    Stack_default,
     {
-      sx: {
+      sx: (theme) => ({
         padding: "20px 12px",
         justifyContent: "center",
         alignItems: "center",
         fontSize: noOptionsFontSize,
-        color: "#A2AAB8"
-      }
+        color: theme.palette.neutral.softDisabledColor
+      })
     },
     "No options found."
   ) : /* @__PURE__ */ React30.createElement(
@@ -4660,7 +4690,7 @@ function FilterableCheckboxGroup(props) {
       }
     ),
     /* @__PURE__ */ React30.createElement(
-      Stack2,
+      Stack_default,
       {
         sx: {
           height: `${virtualizer.getTotalSize()}px`,
@@ -4673,7 +4703,7 @@ function FilterableCheckboxGroup(props) {
           Checkbox_default,
           {
             key: virtualRow.key,
-            label: option.label,
+            label: /* @__PURE__ */ React30.createElement(LabelWithTooltip, { label: option.label, size }),
             checked: internalValue.includes(option.value),
             onChange: handleCheckboxChange(option.value),
             size,
@@ -4681,6 +4711,7 @@ function FilterableCheckboxGroup(props) {
             slotProps: {
               action: {
                 sx: { top: 0, left: 0, bottom: 0, right: 0 }
+                // NOTE: 불필요한 좌우 스크롤 방지
               }
             },
             sx: {
@@ -4701,11 +4732,11 @@ FilterableCheckboxGroup.displayName = "FilterableCheckboxGroup";
 
 // src/components/FilterMenu/FilterMenu.tsx
 import React41, { useCallback as useCallback23 } from "react";
-import { Button as Button2, Stack as Stack12 } from "@mui/joy";
+import { Button as Button2, Stack as Stack11 } from "@mui/joy";
 
 // src/components/FilterMenu/components/CheckboxGroup.tsx
 import React31, { useCallback as useCallback14 } from "react";
-import { Stack as Stack3 } from "@mui/joy";
+import { Stack as Stack2 } from "@mui/joy";
 function CheckboxGroup(props) {
   const { id, label, options, value, onChange, hidden } = props;
   const [internalValue, setInternalValue] = useControlledState(value, [], onChange);
@@ -4725,7 +4756,7 @@ function CheckboxGroup(props) {
   if (hidden) {
     return null;
   }
-  return /* @__PURE__ */ React31.createElement(Stack3, { spacing: 3, role: "group", "aria-labelledby": id }, !!label && /* @__PURE__ */ React31.createElement(Typography_default, { id, level: "title-sm", component: "label", textColor: "text.tertiary" }, label), options.map((option) => /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React31.createElement(Stack2, { spacing: 3, role: "group", "aria-labelledby": id }, !!label && /* @__PURE__ */ React31.createElement(Typography_default, { id, level: "title-sm", component: "label", textColor: "text.tertiary" }, label), options.map((option) => /* @__PURE__ */ React31.createElement(
     Checkbox_default,
     {
       key: `${id}-${option.value}`,
@@ -4739,7 +4770,7 @@ CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/FilterMenu/components/FilterableCheckboxGroup.tsx
 import React32, { useCallback as useCallback15 } from "react";
-import { Stack as Stack4 } from "@mui/joy";
+import { Stack as Stack3 } from "@mui/joy";
 function FilterableCheckboxGroup2(props) {
   const { id, label, options, value, onChange, hidden, placeholder, maxHeight } = props;
   const [internalValue, setInternalValue] = useControlledState(value, [], onChange);
@@ -4752,7 +4783,7 @@ function FilterableCheckboxGroup2(props) {
   if (hidden) {
     return null;
   }
-  return /* @__PURE__ */ React32.createElement(Stack4, { spacing: 3, role: "group", "aria-labelledby": id }, !!label && /* @__PURE__ */ React32.createElement(Typography_default, { id, level: "title-sm", component: "label", textColor: "text.tertiary" }, label), /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React32.createElement(Stack3, { spacing: 3, role: "group", "aria-labelledby": id }, !!label && /* @__PURE__ */ React32.createElement(Typography_default, { id, level: "title-sm", component: "label", textColor: "text.tertiary" }, label), /* @__PURE__ */ React32.createElement(
     FilterableCheckboxGroup,
     {
       value: internalValue ?? [],
@@ -4780,7 +4811,7 @@ var RadioGroup = MotionRadioGroup;
 RadioGroup.displayName = "RadioGroup";
 
 // src/components/FilterMenu/components/RadioGroup.tsx
-import { Stack as Stack5 } from "@mui/joy";
+import { Stack as Stack4 } from "@mui/joy";
 function RadioGroup2(props) {
   const { id, label, options, value, onChange, hidden } = props;
   const [internalValue, setInternalValue] = useControlledState(value, value ?? "", onChange);
@@ -4796,13 +4827,13 @@ function RadioGroup2(props) {
   if (hidden) {
     return null;
   }
-  return /* @__PURE__ */ React33.createElement(Stack5, { spacing: 3, role: "group", "aria-labelledby": id }, !!label && /* @__PURE__ */ React33.createElement(Stack5, { spacing: 1 }, /* @__PURE__ */ React33.createElement(Typography_default, { id, level: "title-sm", component: "label", textColor: "text.tertiary" }, label)), /* @__PURE__ */ React33.createElement(RadioGroup, { name: id, value: internalValue?.toString(), onChange: handleRadioChange }, options.map((option) => /* @__PURE__ */ React33.createElement(Radio, { key: `${id}-${option.value}`, value: option.value.toString(), label: option.label }))));
+  return /* @__PURE__ */ React33.createElement(Stack4, { spacing: 3, role: "group", "aria-labelledby": id }, !!label && /* @__PURE__ */ React33.createElement(Stack4, { spacing: 1 }, /* @__PURE__ */ React33.createElement(Typography_default, { id, level: "title-sm", component: "label", textColor: "text.tertiary" }, label)), /* @__PURE__ */ React33.createElement(RadioGroup, { name: id, value: internalValue?.toString(), onChange: handleRadioChange }, options.map((option) => /* @__PURE__ */ React33.createElement(Radio, { key: `${id}-${option.value}`, value: option.value.toString(), label: option.label }))));
 }
 RadioGroup2.displayName = "RadioGroup";
 
 // src/components/FilterMenu/components/DateRange.tsx
 import React34, { useCallback as useCallback17, useMemo as useMemo13, useState as useState11, useEffect as useEffect9 } from "react";
-import { Stack as Stack6 } from "@mui/joy";
+import { Stack as Stack5 } from "@mui/joy";
 function DateRange(props) {
   const {
     id,
@@ -4923,7 +4954,7 @@ function DateRange(props) {
   if (hidden) {
     return null;
   }
-  return /* @__PURE__ */ React34.createElement(Stack6, { spacing: 3, role: "group", "aria-labelledby": id }, !!label && /* @__PURE__ */ React34.createElement(Typography_default, { id, level: "title-sm", component: "label", textColor: "text.tertiary" }, label), /* @__PURE__ */ React34.createElement(RadioGroup, { name: `${id}-options`, value: selectedOption, onChange: handleOptionChange }, dateRangeOptions.map((option) => /* @__PURE__ */ React34.createElement(Radio, { key: `${id}-${option.value}`, value: option.value, label: option.label }))), selectedOption === "custom" && /* @__PURE__ */ React34.createElement(
+  return /* @__PURE__ */ React34.createElement(Stack5, { spacing: 3, role: "group", "aria-labelledby": id }, !!label && /* @__PURE__ */ React34.createElement(Typography_default, { id, level: "title-sm", component: "label", textColor: "text.tertiary" }, label), /* @__PURE__ */ React34.createElement(RadioGroup, { name: `${id}-options`, value: selectedOption, onChange: handleOptionChange }, dateRangeOptions.map((option) => /* @__PURE__ */ React34.createElement(Radio, { key: `${id}-${option.value}`, value: option.value, label: option.label }))), selectedOption === "custom" && /* @__PURE__ */ React34.createElement(
     DateRangePicker,
     {
       value: customDateRangeValue,
@@ -4943,7 +4974,7 @@ DateRange.displayName = "DateRange";
 
 // src/components/FilterMenu/components/CurrencyInput.tsx
 import React35, { useCallback as useCallback18 } from "react";
-import { Stack as Stack7 } from "@mui/joy";
+import { Stack as Stack6 } from "@mui/joy";
 function CurrencyInput3(props) {
   const { id, label, value, onChange, hidden, max, placeholder, useMinorUnit, currency = "USD" } = props;
   const [internalValue, setInternalValue] = useControlledState(value, value, onChange);
@@ -4957,7 +4988,7 @@ function CurrencyInput3(props) {
   if (hidden) {
     return null;
   }
-  return /* @__PURE__ */ React35.createElement(Stack7, { spacing: 3, role: "group", "aria-labelledby": id }, !!label && /* @__PURE__ */ React35.createElement(Typography_default, { id, level: "title-sm", component: "label", textColor: "text.tertiary" }, label), /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React35.createElement(Stack6, { spacing: 3, role: "group", "aria-labelledby": id }, !!label && /* @__PURE__ */ React35.createElement(Typography_default, { id, level: "title-sm", component: "label", textColor: "text.tertiary" }, label), /* @__PURE__ */ React35.createElement(
     CurrencyInput,
     {
       value: internalValue,
@@ -4974,7 +5005,7 @@ CurrencyInput3.displayName = "CurrencyInput";
 
 // src/components/FilterMenu/components/CurrencyRange.tsx
 import React36, { useCallback as useCallback19 } from "react";
-import { Stack as Stack8 } from "@mui/joy";
+import { Stack as Stack7 } from "@mui/joy";
 function CurrencyRange(props) {
   const { id, label, value, onChange, hidden, max, placeholder, useMinorUnit, currency = "USD" } = props;
   const [internalValue, setInternalValue] = useControlledState(value, null, onChange);
@@ -5011,7 +5042,7 @@ function CurrencyRange(props) {
   if (hidden) {
     return null;
   }
-  return /* @__PURE__ */ React36.createElement(Stack8, { spacing: 3, role: "group", "aria-labelledby": id }, !!label && /* @__PURE__ */ React36.createElement(Typography_default, { id, level: "title-sm", component: "label", textColor: "text.tertiary" }, label), /* @__PURE__ */ React36.createElement(Stack8, { direction: "row", spacing: 2, alignItems: "flex-end" }, /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React36.createElement(Stack7, { spacing: 3, role: "group", "aria-labelledby": id }, !!label && /* @__PURE__ */ React36.createElement(Typography_default, { id, level: "title-sm", component: "label", textColor: "text.tertiary" }, label), /* @__PURE__ */ React36.createElement(Stack7, { direction: "row", spacing: 2, alignItems: "flex-end" }, /* @__PURE__ */ React36.createElement(
     CurrencyInput,
     {
       label: "Minimum",
@@ -5043,7 +5074,7 @@ CurrencyRange.displayName = "CurrencyRange";
 
 // src/components/FilterMenu/components/PercentageInput.tsx
 import React38 from "react";
-import { Stack as Stack9, Typography as Typography2 } from "@mui/joy";
+import { Stack as Stack8, Typography as Typography2 } from "@mui/joy";
 
 // src/components/PercentageInput/PercentageInput.tsx
 import React37, { useCallback as useCallback20, useMemo as useMemo14, useState as useState12 } from "react";
@@ -5178,7 +5209,7 @@ var PercentageInput3 = ({
   if (hidden) {
     return null;
   }
-  return /* @__PURE__ */ React38.createElement(Stack9, { spacing: 3, role: "group", "aria-labelledby": id }, !!label && /* @__PURE__ */ React38.createElement(Typography2, { id, level: "title-sm", component: "label", textColor: "text.tertiary" }, label), /* @__PURE__ */ React38.createElement(
+  return /* @__PURE__ */ React38.createElement(Stack8, { spacing: 3, role: "group", "aria-labelledby": id }, !!label && /* @__PURE__ */ React38.createElement(Typography2, { id, level: "title-sm", component: "label", textColor: "text.tertiary" }, label), /* @__PURE__ */ React38.createElement(
     PercentageInput,
     {
       value: _value,
@@ -5194,7 +5225,7 @@ var PercentageInput3 = ({
 
 // src/components/FilterMenu/components/PercentageRange.tsx
 import React39, { useCallback as useCallback21 } from "react";
-import { Stack as Stack10 } from "@mui/joy";
+import { Stack as Stack9 } from "@mui/joy";
 function PercentageRange(props) {
   const { id, label, value, onChange, hidden, useMinorUnit, maxDecimalScale, min, max } = props;
   const [internalValue, setInternalValue] = useControlledState(
@@ -5231,7 +5262,7 @@ function PercentageRange(props) {
   if (hidden) {
     return null;
   }
-  return /* @__PURE__ */ React39.createElement(Stack10, { spacing: 3, role: "group", "aria-labelledby": id }, !!label && /* @__PURE__ */ React39.createElement(Typography_default, { id, level: "title-sm", component: "label", textColor: "text.tertiary" }, label), /* @__PURE__ */ React39.createElement(Stack10, { direction: "row", spacing: 2, alignItems: "flex-end" }, /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React39.createElement(Stack9, { spacing: 3, role: "group", "aria-labelledby": id }, !!label && /* @__PURE__ */ React39.createElement(Typography_default, { id, level: "title-sm", component: "label", textColor: "text.tertiary" }, label), /* @__PURE__ */ React39.createElement(Stack9, { direction: "row", spacing: 2, alignItems: "flex-end" }, /* @__PURE__ */ React39.createElement(
     PercentageInput,
     {
       label: "Minimum",
@@ -5265,7 +5296,7 @@ PercentageRange.displayName = "PercentageRange";
 
 // src/components/FilterMenu/components/Autocomplete.tsx
 import React40, { useCallback as useCallback22 } from "react";
-import { Stack as Stack11 } from "@mui/joy";
+import { Stack as Stack10 } from "@mui/joy";
 function Autocomplete2(props) {
   const { id, label, value, onChange, options, multiple, hidden, placeholder } = props;
   const [internalValue, setInternalValue] = useControlledState(value, void 0, onChange);
@@ -5285,7 +5316,7 @@ function Autocomplete2(props) {
   if (hidden) {
     return null;
   }
-  return /* @__PURE__ */ React40.createElement(Stack11, { spacing: 3, role: "group", "aria-labelledby": id }, !!label && /* @__PURE__ */ React40.createElement(Typography_default, { id, level: "title-sm", component: "label", textColor: "text.tertiary" }, label), /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React40.createElement(Stack10, { spacing: 3, role: "group", "aria-labelledby": id }, !!label && /* @__PURE__ */ React40.createElement(Typography_default, { id, level: "title-sm", component: "label", textColor: "text.tertiary" }, label), /* @__PURE__ */ React40.createElement(
     Autocomplete,
     {
       value: autocompleteValue,
@@ -5348,7 +5379,7 @@ function FilterMenu(props) {
         top: "initial"
       }
     },
-    /* @__PURE__ */ React41.createElement(DialogContent, { sx: { paddingTop: 5 } }, /* @__PURE__ */ React41.createElement(Stack12, { spacing: 6 }, filters?.map((filter) => {
+    /* @__PURE__ */ React41.createElement(DialogContent, { sx: { paddingTop: 5 } }, /* @__PURE__ */ React41.createElement(Stack11, { spacing: 6 }, filters?.map((filter) => {
       const FilterComponent = componentMap[filter.type];
       return FilterComponent ? /* @__PURE__ */ React41.createElement(
         FilterComponent,
@@ -5369,7 +5400,7 @@ FilterMenu.displayName = "FilterMenu";
 
 // src/components/Uploader/Uploader.tsx
 import React42, { useCallback as useCallback24, useEffect as useEffect10, useMemo as useMemo15, useRef as useRef9, useState as useState13 } from "react";
-import { styled as styled21, Input as Input3 } from "@mui/joy";
+import { styled as styled21, Input as Input2 } from "@mui/joy";
 import MuiFileUploadIcon from "@mui/icons-material/CloudUploadRounded";
 import MuiUploadFileIcon from "@mui/icons-material/UploadFileRounded";
 import MuiClearIcon from "@mui/icons-material/ClearRounded";
@@ -5391,7 +5422,7 @@ var esmFiles = {
     "@atlaskit/pragmatic-drag-and-drop/dist/esm/entry-point/prevent-unhandled.js"
   )
 };
-var VisuallyHiddenInput = styled21(Input3)({
+var VisuallyHiddenInput = styled21(Input2)({
   width: "1px",
   height: "1px",
   overflow: "hidden",
@@ -6394,7 +6425,7 @@ import {
   AccordionDetails as JoyAccordionDetails2,
   styled as styled24,
   accordionSummaryClasses,
-  Stack as Stack13
+  Stack as Stack12
 } from "@mui/joy";
 var AccordionSummary2 = styled24(JoyAccordionSummary2, {
   name: "NavigationGroup",
@@ -6418,7 +6449,7 @@ var AccordionDetails2 = styled24(JoyAccordionDetails2, {
 }));
 function NavigationGroup(props) {
   const { title, children, startDecorator, level, ...rest } = props;
-  return /* @__PURE__ */ React48.createElement(JoyAccordion2, { ...rest }, /* @__PURE__ */ React48.createElement(AccordionSummary2, { useIcon: !!startDecorator, level }, /* @__PURE__ */ React48.createElement(Stack13, { direction: "row", gap: 4 }, startDecorator, title)), /* @__PURE__ */ React48.createElement(AccordionDetails2, null, children));
+  return /* @__PURE__ */ React48.createElement(JoyAccordion2, { ...rest }, /* @__PURE__ */ React48.createElement(AccordionSummary2, { useIcon: !!startDecorator, level }, /* @__PURE__ */ React48.createElement(Stack12, { direction: "row", gap: 4 }, startDecorator, title)), /* @__PURE__ */ React48.createElement(AccordionDetails2, null, children));
 }
 
 // src/components/NavigationItem/NavigationItem.tsx