@ceed/cds 1.15.0-next.8 → 1.15.0

package/dist/index.js

@@ -3466,10 +3466,8 @@ TableBody.displayName = "TableBody";
 
 // src/components/Pagination/Pagination.tsx
 import React24, { useCallback as useCallback10, useEffect as useEffect6 } from "react";
-import PreviousIcon from "@mui/icons-material/ChevronLeftRounded";
-import NextIcon from "@mui/icons-material/ChevronRightRounded";
-import FirstPageIcon from "@mui/icons-material/FirstPageRounded";
-import LastPageIcon from "@mui/icons-material/LastPageRounded";
+import PreviousIcon from "@mui/icons-material/ChevronLeft";
+import NextIcon from "@mui/icons-material/ChevronRight";
 import { styled as styled13 } from "@mui/joy";
 var PaginationButton = styled13(Button_default, {
   name: "Pagination",
@@ -3528,7 +3526,6 @@ function Pagination(props) {
     onPageChange,
     rowCount,
     size = "md",
-    variant = "standard",
     ...innerProps
   } = props;
   const [paginationModel, setPaginationModel] = useControlledState(
@@ -3555,87 +3552,6 @@ function Pagination(props) {
       setPaginationModel({ ...paginationModel, page: lastPage });
     }
   }, [rowCount, paginationModel, lastPage, setPaginationModel]);
-  const pageOptions = Array.from({ length: lastPage }, (_, i) => ({
-    label: `${i + 1}`,
-    value: `${i + 1}`
-  }));
-  if (variant === "compact") {
-    return /* @__PURE__ */ React24.createElement(PaginationRoot, { ...innerProps }, /* @__PURE__ */ React24.createElement(PaginationContainer, { direction: "row", size, alignItems: "center" }, /* @__PURE__ */ React24.createElement(Stack_default, { direction: "row" }, /* @__PURE__ */ React24.createElement(
-      PaginationIconButton,
-      {
-        size,
-        variant: "plain",
-        color: "neutral",
-        onClick: () => handlePageChange(firstPage),
-        disabled: paginationModel.page === firstPage,
-        "aria-label": "First page"
-      },
-      /* @__PURE__ */ React24.createElement(FirstPageIcon, null)
-    ), /* @__PURE__ */ React24.createElement(
-      PaginationIconButton,
-      {
-        size,
-        variant: "plain",
-        color: "neutral",
-        onClick: () => handlePageChange(paginationModel.page - 1),
-        disabled: paginationModel.page === firstPage,
-        "aria-label": "Previous page"
-      },
-      /* @__PURE__ */ React24.createElement(PreviousIcon, null)
-    )), /* @__PURE__ */ React24.createElement(
-      Autocomplete_default,
-      {
-        size,
-        value: `${paginationModel.page}`,
-        onChange: (event) => {
-          if (event.target.value) {
-            handlePageChange(parseInt(event.target.value, 10));
-          }
-        },
-        options: pageOptions,
-        sx: {
-          width: {
-            sm: "80px",
-            md: "100px",
-            lg: "120px"
-          }[size]
-        }
-      }
-    ), /* @__PURE__ */ React24.createElement(
-      Typography_default,
-      {
-        level: `body-${size}`,
-        sx: (theme) => ({
-          color: theme.palette.text.secondary,
-          fontWeight: 500
-        })
-      },
-      "/ ",
-      lastPage
-    ), /* @__PURE__ */ React24.createElement(Stack_default, { direction: "row" }, /* @__PURE__ */ React24.createElement(
-      PaginationIconButton,
-      {
-        size,
-        variant: "plain",
-        color: "neutral",
-        onClick: () => handlePageChange(paginationModel.page + 1),
-        disabled: paginationModel.page === lastPage,
-        "aria-label": "Next page"
-      },
-      /* @__PURE__ */ React24.createElement(NextIcon, null)
-    ), /* @__PURE__ */ React24.createElement(
-      PaginationIconButton,
-      {
-        size,
-        variant: "plain",
-        color: "neutral",
-        onClick: () => handlePageChange(lastPage),
-        disabled: paginationModel.page === lastPage,
-        "aria-label": "Last page"
-      },
-      /* @__PURE__ */ React24.createElement(LastPageIcon, null)
-    ))));
-  }
   return /* @__PURE__ */ React24.createElement(PaginationRoot, { ...innerProps }, /* @__PURE__ */ React24.createElement(PaginationContainer, { direction: "row", size, alignItems: "center" }, /* @__PURE__ */ React24.createElement(
     PaginationIconButton,
     {
@@ -3657,7 +3573,7 @@ function Pagination(props) {
       "aria-label": "More previous pages"
     },
     "..."
-  ), beforePages.map((p) => /* @__PURE__ */ React24.createElement(PaginationButton, { key: p, size, variant: "plain", color: "neutral", onClick: () => handlePageChange(p) }, p)), /* @__PURE__ */ React24.createElement(PaginationButton, { active: "true", size, "aria-current": "page" }, paginationModel.page), afterPages.map((p) => /* @__PURE__ */ React24.createElement(PaginationButton, { key: p, size, variant: "plain", color: "neutral", onClick: () => handlePageChange(p) }, p)), isMoreAfterPages && /* @__PURE__ */ React24.createElement(
+  ), beforePages.map((p) => /* @__PURE__ */ React24.createElement(PaginationButton, { key: p, size, variant: "plain", color: "neutral", onClick: () => handlePageChange(p) }, p)), /* @__PURE__ */ React24.createElement(PaginationButton, { active: "active", size, "aria-current": "page" }, paginationModel.page), afterPages.map((p) => /* @__PURE__ */ React24.createElement(PaginationButton, { key: p, size, variant: "plain", color: "neutral", onClick: () => handlePageChange(p) }, p)), isMoreAfterPages && /* @__PURE__ */ React24.createElement(
     PaginationButton,
     {
       size,
@@ -4528,11 +4444,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(
@@ -4542,6 +4499,7 @@ function FilterableCheckboxGroup(props) {
   );
   const parentRef = useRef8(null);
   const isInitialSortRef = useRef8(false);
+  const prevOptionsRef = useRef8([...options]);
   const filteredOptions = useMemo12(() => {
     if (!searchTerm) return sortedOptions;
     return sortedOptions.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()));
@@ -4556,16 +4514,6 @@ function FilterableCheckboxGroup(props) {
         return 36;
     }
   }, [size]);
-  const noOptionsFontSize = useMemo12(() => {
-    switch (size) {
-      case "sm":
-        return "14px";
-      case "md":
-        return "16px";
-      case "lg":
-        return "18px";
-    }
-  }, [size]);
   const virtualizer = useVirtualizer3({
     count: filteredOptions.length,
     estimateSize: () => itemSize,
@@ -4575,27 +4523,34 @@ function FilterableCheckboxGroup(props) {
   });
   const items = virtualizer.getVirtualItems();
   useEffect8(() => {
-    if (isInitialSortRef.current) return;
-    const initialValue = value ?? [];
-    const sorted = [...options].sort((a, b) => {
-      const aSelected = initialValue.includes(a.value);
-      const bSelected = initialValue.includes(b.value);
-      if (aSelected !== bSelected) {
-        return aSelected ? -1 : 1;
-      }
-      const aIsAlpha = /^[a-zA-Z]/.test(a.label);
-      const bIsAlpha = /^[a-zA-Z]/.test(b.label);
-      if (aIsAlpha !== bIsAlpha) {
-        return aIsAlpha ? -1 : 1;
+    const optionsChanged = prevOptionsRef.current.length !== options.length || prevOptionsRef.current.some(
+      (prevOption, index) => prevOption.value !== options[index]?.value || prevOption.label !== options[index]?.label || prevOption.disabled !== options[index]?.disabled
+    );
+    if (!isInitialSortRef.current || optionsChanged) {
+      const initialValue = value ?? [];
+      const sorted = [...options].sort((a, b) => {
+        const aSelected = initialValue.includes(a.value);
+        const bSelected = initialValue.includes(b.value);
+        if (aSelected !== bSelected) {
+          return aSelected ? -1 : 1;
+        }
+        const aIsAlpha = /^[a-zA-Z]/.test(a.label);
+        const bIsAlpha = /^[a-zA-Z]/.test(b.label);
+        if (aIsAlpha !== bIsAlpha) {
+          return aIsAlpha ? -1 : 1;
+        }
+        return a.label.localeCompare(b.label);
+      });
+      setSortedOptions(sorted);
+      prevOptionsRef.current = [...options];
+      if (!isInitialSortRef.current) {
+        isInitialSortRef.current = true;
       }
-      return a.label.localeCompare(b.label);
-    });
-    setSortedOptions(sorted);
-    isInitialSortRef.current = true;
+    }
   }, [options, value]);
   useEffect8(() => {
     virtualizer.measure();
-  }, [virtualizer, filteredOptions]);
+  }, [virtualizer, filteredOptions, size]);
   const handleSearchChange = useCallback13((event) => {
     setSearchTerm(event.target.value);
   }, []);
@@ -4610,40 +4565,38 @@ 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,
-    {
-      sx: {
-        padding: "20px 12px",
-        justifyContent: "center",
-        alignItems: "center",
-        fontSize: noOptionsFontSize,
-        color: "#A2AAB8"
-      }
-    },
-    "No options found."
-  ) : /* @__PURE__ */ React31.createElement(
+  ), filteredOptions.length === 0 ? /* @__PURE__ */ React31.createElement(Typography_default, { level: `body-${size}`, textColor: "neutral.softDisabledColor", padding: "20px 12px", textAlign: "center" }, "No options found.") : /* @__PURE__ */ React31.createElement(
     "div",
     {
       ref: parentRef,
@@ -4662,6 +4615,7 @@ function FilterableCheckboxGroup(props) {
         indeterminate: isIndeterminate,
         onChange: handleSelectAll,
         size,
+        disabled,
         slotProps: {
           action: {
             sx: { top: 0, left: 0, bottom: 0, right: 0 }
@@ -4671,7 +4625,7 @@ function FilterableCheckboxGroup(props) {
       }
     ),
     /* @__PURE__ */ React31.createElement(
-      Stack2,
+      Stack_default,
       {
         sx: {
           height: `${virtualizer.getTotalSize()}px`,
@@ -4684,13 +4638,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 +5331,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 +5355,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 +6018,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 +6040,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",