awing-library 2.1.2-dev.72 → 2.1.2-dev.74

package/dist/esm/AWING/TableEditableCollapsible/interface.d.ts

@@ -92,5 +92,8 @@ export interface TableRowEditableProps<T> {
 export interface TableCellEditableProps<T extends object> {
     cellDefinition: CellDefinition<T>;
     isContainer?: boolean;
+    isShowCollapsible?: boolean;
+    isCollapsed?: boolean;
     numOfRowSpan?: number;
+    onToggleCollapsible?: () => void;
 }

package/dist/esm/index.js

@@ -177625,7 +177625,10 @@ function TableCellEditable(props) {
   const {
     isContainer,
     cellDefinition,
-    numOfRowSpan
+    numOfRowSpan,
+    isShowCollapsible,
+    isCollapsed,
+    onToggleCollapsible
   } = props;
   const {
     TableCellProps,
@@ -177664,13 +177667,28 @@ function TableCellEditable(props) {
     },
     rowSpan: numOfRowSpan
   }, TableCellProps, {
-    children: isTooltip ? jsxRuntimeExports.jsx(StyleTooltip$1, {
-      title: getTitleTooltip && getTitleTooltip(value) || '',
-      placement: "top-start",
-      children: jsxRuntimeExports.jsx(Stack, {
-        children: renderDataInput()
-      })
-    }) : renderDataInput()
+    children: jsxRuntimeExports.jsxs(Box$1, {
+      display: "flex",
+      alignItems: "center",
+      gap: 0.5,
+      children: [!!isShowCollapsible &&
+      // Hiển thị icon mở rộng, ở cột đầu tiên
+      jsxRuntimeExports.jsx(IconButton$1, {
+        sx: {
+          width: 24,
+          height: 24
+        },
+        size: "small",
+        onClick: onToggleCollapsible,
+        children: isCollapsed ? jsxRuntimeExports.jsx(KeyboardArrowDown, {}) : jsxRuntimeExports.jsx(KeyboardArrowRight, {})
+      }), isTooltip ? jsxRuntimeExports.jsx(StyleTooltip$1, {
+        title: getTitleTooltip && getTitleTooltip(value) || '',
+        placement: "top-start",
+        children: jsxRuntimeExports.jsx(Stack, {
+          children: renderDataInput()
+        })
+      }) : renderDataInput()]
+    })
   }));
 }
 
@@ -177742,7 +177760,7 @@ function TableRowEditable(props) {
             const isMergeColumn = fieldName === mergeRowsBy;
             const isDisplay = isMergeColumn ? itemIndex === 0 || convertItems[itemIndex - 1][fieldName] !== row[fieldName] : true;
             const numOfRowSpan = isMergeColumn ? convertItems.filter(c => c[fieldName] === row[fieldName]).length : 1;
-            return isDisplay && jsxRuntimeExports.jsxs(TableCell, Object.assign({
+            return isDisplay && jsxRuntimeExports.jsx(TableCell, Object.assign({
               sx: {
                 border: '1px solid rgb(224, 224, 224)'
               }
@@ -177751,20 +177769,28 @@ function TableRowEditable(props) {
             }, idx === 0 ? {
               width: '15%'
             } : {}, {
-              children: [idx === 0 &&
-              // Hiển thị icon mở rộng, ở cột đầu tiên
-              jsxRuntimeExports.jsx(IconButton$1, {
-                "aria-label": "expand row",
-                size: "small",
-                onClick: () => setOpen(!open),
-                children: open ? jsxRuntimeExports.jsx(KeyboardArrowDown, {}) : jsxRuntimeExports.jsx(KeyboardArrowRight, {})
-              }), colDef.isTooltip ? jsxRuntimeExports.jsx(StyleTooltip, {
-                title: colDef.getTitleTooltip && colDef.getTitleTooltip(content),
-                placement: "top-start",
-                children: jsxRuntimeExports.jsx("div", {
-                  children: content
-                })
-              }) : colDef.contentGetter(row, rowIdx)]
+              children: jsxRuntimeExports.jsxs(Box$1, {
+                display: "flex",
+                alignItems: "center",
+                gap: 0.5,
+                children: [idx === 0 &&
+                // Hiển thị icon mở rộng, ở cột đầu tiên
+                jsxRuntimeExports.jsx(IconButton$1, {
+                  sx: {
+                    width: 24,
+                    height: 24
+                  },
+                  size: "small",
+                  onClick: () => setOpen(!open),
+                  children: open ? jsxRuntimeExports.jsx(KeyboardArrowDown, {}) : jsxRuntimeExports.jsx(KeyboardArrowRight, {})
+                }), colDef.isTooltip ? jsxRuntimeExports.jsx(StyleTooltip, {
+                  title: colDef.getTitleTooltip && colDef.getTitleTooltip(content),
+                  placement: "top-start",
+                  children: jsxRuntimeExports.jsx("div", {
+                    children: content
+                  })
+                }) : colDef.contentGetter(row, rowIdx)]
+              })
             }), idx);
           }
           if (colDef.editFieldDefinition) {
@@ -177777,6 +177803,9 @@ function TableRowEditable(props) {
             const numOfRowSpan = isMergeColumn ? convertItems.filter(c => c[fieldName] === row[fieldName]).length : 1;
             const error = ((_c = dataValidation === null || dataValidation === void 0 ? void 0 : dataValidation[rowIdx]) === null || _c === void 0 ? void 0 : _c[fieldName]) !== undefined && !((_d = dataValidation === null || dataValidation === void 0 ? void 0 : dataValidation[rowIdx]) === null || _d === void 0 ? void 0 : _d[fieldName]);
             return isDisplay && jsxRuntimeExports.jsx(TableCellEditable, {
+              isShowCollapsible: idx === 0,
+              isCollapsed: open,
+              onToggleCollapsible: () => setOpen(!open),
               cellDefinition: Object.assign(Object.assign({}, colDef.editFieldDefinition), {
                 row,
                 TableCellProps: colDef.TableCellProps,

package/dist/index.d.ts

@@ -1875,7 +1875,10 @@ interface TableEditableBodyProps<T> {
 interface TableCellEditableProps<T extends object> {
     cellDefinition: CellDefinition<T>;
     isContainer?: boolean;
+    isShowCollapsible?: boolean;
+    isCollapsed?: boolean;
     numOfRowSpan?: number;
+    onToggleCollapsible?: () => void;
 }
 
 declare function TableEditable<T>(props: TableEditableProps<T>): react_jsx_runtime.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "awing-library",
-    "version": "2.1.2-dev.72",
+    "version": "2.1.2-dev.74",
     "main": "dist/esm/index.js",
     "module": "dist/esm/index.js",
     "types": "dist/index.d.ts",