@ceed/cds 1.15.0-next.8 → 1.15.0-next.9

package/dist/index.js

@@ -4528,11 +4528,52 @@ var InsetDrawer = styled20(JoyDrawer2)(({ theme }) => ({
 
 // src/components/FilterableCheckboxGroup/FilterableCheckboxGroup.tsx
 import React31, { 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__ */ React31.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__ */ React31.createElement(Tooltip_default, { variant: "solid", size, title: label, placement: "bottom-start" }, labelContent);
+  }
+  return labelContent;
+}
 function FilterableCheckboxGroup(props) {
-  const { value, options, label, placeholder, helperText, size = "md", required, onChange, maxHeight = 300 } = props;
+  const {
+    value,
+    options,
+    label,
+    placeholder,
+    helperText,
+    size = "md",
+    required,
+    onChange,
+    maxHeight = 300,
+    disabled
+  } = props;
   const [searchTerm, setSearchTerm] = useState10("");
   const [sortedOptions, setSortedOptions] = useState10(options);
   const [internalValue, setInternalValue] = useControlledState(
@@ -4610,37 +4651,47 @@ function FilterableCheckboxGroup(props) {
   const handleSelectAll = useCallback13(
     (event) => {
       const checked = event.target.checked;
+      const enabledOptions = filteredOptions.filter((option) => !option.disabled);
+      const disabledSelectedValues = internalValue.filter(
+        (v) => filteredOptions.some((opt) => opt.value === v && opt.disabled)
+      );
       if (checked) {
-        setInternalValue(filteredOptions.map((option) => option.value));
+        const enabledValues = enabledOptions.map((option) => option.value);
+        setInternalValue([...disabledSelectedValues, ...enabledValues]);
       } else {
-        setInternalValue([]);
+        setInternalValue(disabledSelectedValues);
       }
     },
-    [filteredOptions, setInternalValue]
+    [filteredOptions, internalValue, setInternalValue]
   );
-  const isAllSelected = filteredOptions.length > 0 && filteredOptions.every((option) => internalValue.includes(option.value));
-  const isIndeterminate = !isAllSelected && filteredOptions.some((option) => internalValue.includes(option.value));
-  return /* @__PURE__ */ React31.createElement("div", { style: { width: "100%" } }, /* @__PURE__ */ React31.createElement(FormControl_default, { required, size }, label && /* @__PURE__ */ React31.createElement(FormLabel_default, null, label), /* @__PURE__ */ React31.createElement(
-    Input2,
+  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__ */ React31.createElement("div", { style: { width: "100%" } }, /* @__PURE__ */ React31.createElement(
+    Input_default,
     {
+      label,
+      helperText,
+      required,
       variant: "outlined",
       color: "neutral",
       placeholder,
       value: searchTerm,
       onChange: handleSearchChange,
       size,
+      disabled,
       endDecorator: /* @__PURE__ */ React31.createElement(SearchIcon, null)
     }
-  ), helperText && /* @__PURE__ */ React31.createElement(FormHelperText_default, null, helperText)), filteredOptions.length === 0 ? /* @__PURE__ */ React31.createElement(
-    Stack2,
+  ), filteredOptions.length === 0 ? /* @__PURE__ */ React31.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__ */ React31.createElement(
@@ -4662,6 +4713,7 @@ function FilterableCheckboxGroup(props) {
         indeterminate: isIndeterminate,
         onChange: handleSelectAll,
         size,
+        disabled,
         slotProps: {
           action: {
             sx: { top: 0, left: 0, bottom: 0, right: 0 }
@@ -4671,7 +4723,7 @@ function FilterableCheckboxGroup(props) {
       }
     ),
     /* @__PURE__ */ React31.createElement(
-      Stack2,
+      Stack_default,
       {
         sx: {
           height: `${virtualizer.getTotalSize()}px`,
@@ -4684,13 +4736,15 @@ function FilterableCheckboxGroup(props) {
           Checkbox_default,
           {
             key: virtualRow.key,
-            label: option.label,
+            label: /* @__PURE__ */ React31.createElement(LabelWithTooltip, { label: option.label, size }),
             checked: internalValue.includes(option.value),
             onChange: handleCheckboxChange(option.value),
             size,
+            disabled: disabled || option.disabled,
             slotProps: {
               action: {
                 sx: { top: 0, left: 0, bottom: 0, right: 0 }
+                // NOTE: 불필요한 좌우 스크롤 방지
               }
             },
             sx: {
@@ -5375,7 +5429,7 @@ import {
   AccordionDetails as JoyAccordionDetails2,
   styled as styled23,
   accordionSummaryClasses,
-  Stack as Stack3
+  Stack as Stack2
 } from "@mui/joy";
 var AccordionSummary2 = styled23(JoyAccordionSummary2, {
   name: "NavigationGroup",
@@ -5399,7 +5453,7 @@ var AccordionDetails2 = styled23(JoyAccordionDetails2, {
 }));
 function NavigationGroup(props) {
   const { title, children, startDecorator, level, ...rest } = props;
-  return /* @__PURE__ */ React37.createElement(JoyAccordion2, { ...rest }, /* @__PURE__ */ React37.createElement(AccordionSummary2, { useIcon: !!startDecorator, level }, /* @__PURE__ */ React37.createElement(Stack3, { direction: "row", gap: 4 }, startDecorator, title)), /* @__PURE__ */ React37.createElement(AccordionDetails2, null, children));
+  return /* @__PURE__ */ React37.createElement(JoyAccordion2, { ...rest }, /* @__PURE__ */ React37.createElement(AccordionSummary2, { useIcon: !!startDecorator, level }, /* @__PURE__ */ React37.createElement(Stack2, { direction: "row", gap: 4 }, startDecorator, title)), /* @__PURE__ */ React37.createElement(AccordionDetails2, null, children));
 }
 
 // src/components/NavigationItem/NavigationItem.tsx
@@ -6062,7 +6116,7 @@ ThemeProvider.displayName = "ThemeProvider";
 
 // src/components/Uploader/Uploader.tsx
 import React46, { useCallback as useCallback17, useEffect as useEffect12, useMemo as useMemo15, useRef as useRef11, useState as useState15 } from "react";
-import { styled as styled29, Input as Input3 } from "@mui/joy";
+import { styled as styled29, 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";
@@ -6084,7 +6138,7 @@ var esmFiles = {
     "@atlaskit/pragmatic-drag-and-drop/dist/esm/entry-point/prevent-unhandled.js"
   )
 };
-var VisuallyHiddenInput = styled29(Input3)({
+var VisuallyHiddenInput = styled29(Input2)({
   width: "1px",
   height: "1px",
   overflow: "hidden",