@ceed/cds 1.7.0 → 1.7.1-next.2

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

@@ -104,7 +104,15 @@ export type LinkColumnDef<T extends Record<PropertyKey, string>, ID, C extends R
     component?: C;
     componentProps?: ComponentProperties<C, T, ID, string>;
 };
-export type ColumnDef<T extends Record<PropertyKey, any>, ID = unknown> = AutocompleteColumnDef<T, ID> | CurrencyColumnDef<T, ID> | DateColumnDef<T, ID> | NumberColumnDef<T, ID> | TextColumnDef<T, ID> | LongTextColumnDef<T, ID> | LinkColumnDef<T, ID> | SelectColumnDef<T, ID>;
+export type ActionsColumnDef<T extends Record<PropertyKey, string>, ID> = BaseColumnDef<T, string, ID> & {
+    type: "actions";
+    getActions: (params: {
+        row: T;
+        value?: any;
+        id: ID;
+    }) => ReactNode[];
+};
+export type ColumnDef<T extends Record<PropertyKey, any>, ID = unknown> = AutocompleteColumnDef<T, ID> | CurrencyColumnDef<T, ID> | DateColumnDef<T, ID> | NumberColumnDef<T, ID> | TextColumnDef<T, ID> | LongTextColumnDef<T, ID> | LinkColumnDef<T, ID> | SelectColumnDef<T, ID> | ActionsColumnDef<T, ID>;
 export type Sort = "asc" | "desc" | null;
 export type SortModel<T extends Record<PropertyKey, any>> = {
     [K in keyof T]: {

package/dist/components/IconMenuButton/IconMenuButton.d.ts

@@ -9,14 +9,11 @@ declare function IconMenuButton<T extends ElementType, P extends ElementType>(pr
     loading?: boolean;
     color?: MenuButtonProps<T, P>["color"];
     variant?: MenuButtonProps<T, P>["variant"];
-    endDecorator?: MenuButtonProps<T, P>["endDecorator"];
-    startDecorator?: MenuButtonProps<T, P>["startDecorator"];
     items?: {
         text: string;
         component?: P;
         componentProps?: ComponentProps<P>;
     }[];
-    showIcon?: boolean;
     placement?: "bottom-start" | "bottom" | "bottom-end";
 }): React.JSX.Element;
 declare namespace IconMenuButton {

package/dist/index.cjs

@@ -2989,13 +2989,17 @@ var VirtualizedTableBody = (0, import_joy33.styled)("tbody", {
   },
   // NOTE: 테이블 안에 버튼을 넣을 때 버튼의 높이가 테이블의 높이를 넘어가지 않도록 설정
   [`& .${import_joy33.buttonClasses.root}`]: {
-    "--Button-minHeight": "20px",
+    "--Button-minHeight": "26px",
     "--Button-paddingBlock": "0.25rem",
-    lineHeight: 1
+    lineHeight: 1,
+    marginTop: "-2px",
+    marginBottom: "-2px"
   },
   [`& .${import_joy33.iconButtonClasses.root}`]: {
-    "--IconButton-size": "21px",
-    verticalAlign: "middle"
+    "--IconButton-size": "26px",
+    verticalAlign: "middle",
+    marginTop: "-2px",
+    marginBottom: "-2px"
   }
 });
 var StyledTableRow = (0, import_joy33.styled)("tr", {
@@ -3059,13 +3063,14 @@ var HeadCell = (props) => {
     stickyHeader,
     resizable,
     field,
+    type,
     tableId,
     headerName,
     required,
     editMode,
     sort,
     onSortChange,
-    sortable = true,
+    sortable: _sortable = true,
     sortOrder,
     description,
     isPinned,
@@ -3075,6 +3080,7 @@ var HeadCell = (props) => {
   } = props;
   const theme = (0, import_joy33.useTheme)();
   const ref = headerRef;
+  const sortable = type === "actions" ? false : _sortable;
   const headId = (0, import_react25.useMemo)(
     () => `${tableId}_header_${headerName ?? field}`.trim(),
     [tableId, headerName, field]
@@ -3213,10 +3219,10 @@ var BodyCell = (props) => {
   );
   const componentProps = (0, import_react25.useMemo)(
     () => ({
-      ...typeof props.componentProps === "function" ? props.componentProps(params) : props.componentProps || {},
+      ..."componentProps" in props && (typeof props.componentProps === "function" ? props.componentProps(params) : props.componentProps || {}),
       size: "sm"
     }),
-    [props.componentProps, params]
+    ["componentProps" in props ? props.componentProps : null, params]
   );
   const editModeComponentProps = (0, import_react25.useMemo)(
     () => ({
@@ -3365,10 +3371,27 @@ var BodyCell = (props) => {
     }[type || "text"];
     return typedComponent || innerText;
   }, [value, renderCell, params, type, componentProps]);
-  const CellComponent = (0, import_react25.useMemo)(
-    () => editMode && EditModeComponent ? EditModeComponent : ReadModeComponent,
-    [editMode, EditModeComponent, ReadModeComponent]
-  );
+  const CellComponent = (0, import_react25.useMemo)(() => {
+    if (type === "actions") {
+      return /* @__PURE__ */ import_react25.default.createElement(
+        Stack_default,
+        {
+          direction: "row",
+          gap: 1,
+          justifyContent: "center",
+          alignItems: "center"
+        },
+        props.getActions?.(params)
+      );
+    }
+    return editMode && EditModeComponent ? EditModeComponent : ReadModeComponent;
+  }, [
+    type,
+    props.getActions,
+    editMode,
+    EditModeComponent,
+    ReadModeComponent
+  ]);
   const showTooltip = (0, import_react25.useMemo)(
     () => noWrap && type === "longText",
     [noWrap, type]

package/dist/index.js

@@ -2957,13 +2957,17 @@ var VirtualizedTableBody = styled12("tbody", {
   },
   // NOTE: 테이블 안에 버튼을 넣을 때 버튼의 높이가 테이블의 높이를 넘어가지 않도록 설정
   [`& .${buttonClasses.root}`]: {
-    "--Button-minHeight": "20px",
+    "--Button-minHeight": "26px",
     "--Button-paddingBlock": "0.25rem",
-    lineHeight: 1
+    lineHeight: 1,
+    marginTop: "-2px",
+    marginBottom: "-2px"
   },
   [`& .${iconButtonClasses.root}`]: {
-    "--IconButton-size": "21px",
-    verticalAlign: "middle"
+    "--IconButton-size": "26px",
+    verticalAlign: "middle",
+    marginTop: "-2px",
+    marginBottom: "-2px"
   }
 });
 var StyledTableRow = styled12("tr", {
@@ -3027,13 +3031,14 @@ var HeadCell = (props) => {
     stickyHeader,
     resizable,
     field,
+    type,
     tableId,
     headerName,
     required,
     editMode,
     sort,
     onSortChange,
-    sortable = true,
+    sortable: _sortable = true,
     sortOrder,
     description,
     isPinned,
@@ -3043,6 +3048,7 @@ var HeadCell = (props) => {
   } = props;
   const theme = useTheme();
   const ref = headerRef;
+  const sortable = type === "actions" ? false : _sortable;
   const headId = useMemo8(
     () => `${tableId}_header_${headerName ?? field}`.trim(),
     [tableId, headerName, field]
@@ -3181,10 +3187,10 @@ var BodyCell = (props) => {
   );
   const componentProps = useMemo8(
     () => ({
-      ...typeof props.componentProps === "function" ? props.componentProps(params) : props.componentProps || {},
+      ..."componentProps" in props && (typeof props.componentProps === "function" ? props.componentProps(params) : props.componentProps || {}),
       size: "sm"
     }),
-    [props.componentProps, params]
+    ["componentProps" in props ? props.componentProps : null, params]
   );
   const editModeComponentProps = useMemo8(
     () => ({
@@ -3333,10 +3339,27 @@ var BodyCell = (props) => {
     }[type || "text"];
     return typedComponent || innerText;
   }, [value, renderCell, params, type, componentProps]);
-  const CellComponent = useMemo8(
-    () => editMode && EditModeComponent ? EditModeComponent : ReadModeComponent,
-    [editMode, EditModeComponent, ReadModeComponent]
-  );
+  const CellComponent = useMemo8(() => {
+    if (type === "actions") {
+      return /* @__PURE__ */ React23.createElement(
+        Stack_default,
+        {
+          direction: "row",
+          gap: 1,
+          justifyContent: "center",
+          alignItems: "center"
+        },
+        props.getActions?.(params)
+      );
+    }
+    return editMode && EditModeComponent ? EditModeComponent : ReadModeComponent;
+  }, [
+    type,
+    props.getActions,
+    editMode,
+    EditModeComponent,
+    ReadModeComponent
+  ]);
   const showTooltip = useMemo8(
     () => noWrap && type === "longText",
     [noWrap, type]