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

package/dist/index.js

@@ -3466,8 +3466,10 @@ TableBody.displayName = "TableBody";
 
 // src/components/Pagination/Pagination.tsx
 import React24, { useCallback as useCallback10, useEffect as useEffect6 } from "react";
-import PreviousIcon from "@mui/icons-material/ChevronLeft";
-import NextIcon from "@mui/icons-material/ChevronRight";
+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 { styled as styled13 } from "@mui/joy";
 var PaginationButton = styled13(Button_default, {
   name: "Pagination",
@@ -3526,6 +3528,7 @@ function Pagination(props) {
     onPageChange,
     rowCount,
     size = "md",
+    variant = "standard",
     ...innerProps
   } = props;
   const [paginationModel, setPaginationModel] = useControlledState(
@@ -3552,6 +3555,87 @@ 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,
     {
@@ -3573,7 +3657,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: "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(
+  ), 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(
     PaginationButton,
     {
       size,
@@ -4444,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(
@@ -4526,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(
@@ -4578,6 +4713,7 @@ function FilterableCheckboxGroup(props) {
         indeterminate: isIndeterminate,
         onChange: handleSelectAll,
         size,
+        disabled,
         slotProps: {
           action: {
             sx: { top: 0, left: 0, bottom: 0, right: 0 }
@@ -4587,7 +4723,7 @@ function FilterableCheckboxGroup(props) {
       }
     ),
     /* @__PURE__ */ React31.createElement(
-      Stack2,
+      Stack_default,
       {
         sx: {
           height: `${virtualizer.getTotalSize()}px`,
@@ -4600,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: {
@@ -5291,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",
@@ -5315,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
@@ -5978,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";
@@ -6000,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",