es-grid-template 1.9.53 → 1.9.56

package/es/table-component/body/EditableCell.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext } from "react";
 import { DatePicker, TimePicker, ColorPicker, Input } from "rc-master-ui";
-import { Divider, Row, Col, Button } from "antd";
+import { Divider, Row, Col, Button } from "rc-master-ui";
 import { checkDecimalSeparator, checkThousandSeparator, checkFieldKey, convertArrayWithIndent, convertDateToDayjs, convertLabelToTitle, getDatepickerFormat, isDisable, isEmpty, isNullOrUndefined, customWeekStartEndFormat, convertDayjsToDate, parseBooleanToValue, isColor, genPresets, getFormat, removeVietnameseTones, getDateValueType } from "../hook/utils";
 import classNames from "classnames";
 import { NumericFormat } from "react-numeric-component";
@@ -71,6 +71,7 @@ const EditableCell = props => {
     const date = !isEmpty(value) ? convertDateToDayjs(new Date(value), dateFormat) : null;
     const maxDate = convertDateToDayjs(column.maxDate, dateFormat) ?? undefined;
     const minDate = convertDateToDayjs(column.minDate, dateFormat) ?? undefined;
+    const formValues = getValues();
     const {
       fieldValue,
       columns: selectColumns,
@@ -196,41 +197,6 @@ const EditableCell = props => {
           maxDate: maxDate,
           minDate: minDate
           // mode="date"
-
-          // onChange={(newDate, dateString) => {
-
-          //   const newDateValue = dateString ? moment(convertDayjsToDate(dateString as string, dateFormat)).format() : null
-
-          //   onChange(newDateValue)
-
-          //   setTimeout(() => {
-          //     // @ts-ignore
-          //     dateTimePickerRef.current?.focus()
-          //   }, 0)
-
-          // }}
-
-          // onBlur={() => {
-          //   const formState = getValues()
-          //   const itemState = getValues(dataIndex)
-          //   // @ts-ignore
-          //   const prevState = record[dataIndex]
-          //   const newState = itemState
-
-          //   if (prevState !== newState) {
-          //     handleCellChange?.({
-          //       key: key as any,
-          //       field: column.field ?? column.field as any,
-          //       record: formState,
-          //       prevState,
-          //       newState,
-          //       option: newState,
-          //       indexCol,
-          //       indexRow,
-          //       type: 'blur'
-          //     })
-          //   }
-          // }}
           ,
 
           popupClassName: 'be-popup-container',
@@ -238,8 +204,10 @@ const EditableCell = props => {
           "data-tooltip-content": message,
           "data-tooltip-id": `${id}-tooltip-error`,
           autoFocus: column.field === startCell?.colId,
-          defaultOpen: column.field === startCell?.colId,
-          needConfirm: false,
+          defaultOpen: column.field === startCell?.colId
+          // needConfirm={true}
+          ,
+
           onCalendarChange: (newDate, dateString) => {
             const newDateValue = dateString ? moment(convertDayjsToDate(dateString, dateFormat)).format() : null;
             onChange(newDateValue);
@@ -499,10 +467,10 @@ const EditableCell = props => {
             align: colSelect.textAlign
           };
         });
-        let valueSelectTable = value;
+        let valueSelectTable = formValues[dataIndex];
         if (fieldValue) {
           // @ts-ignore
-          valueSelectTable = record[fieldValue] ?? value;
+          valueSelectTable = record[fieldValue] ?? formValues[dataIndex];
         }
         return /*#__PURE__*/React.createElement(AsyncTableSelect, {
           columns: columnsTable,
@@ -511,17 +479,19 @@ const EditableCell = props => {
           value: valueSelectTable ?? undefined,
           autoDestroy: true,
           onChange: (val, option) => {
-            onChange(val);
+            onChange(val ?? '');
             const formState = getValues();
-            // const itemState = getValues(dataIndex)
+            const formNewState = {
+              ...getValues(),
+              [dataIndex]: formState[dataIndex] || undefined
+            };
             // @ts-ignore
-            const prevState = record[dataIndex];
-            const newState = val;
+            const prevState = record[dataIndex] ?? undefined;
+            const newState = val ?? undefined;
             handleCellChange?.({
-              // @ts-ignore
-              key: record[rowKey],
+              key,
               field: column.field ?? column.field,
-              record: formState,
+              record: formNewState,
               prevState,
               newState,
               option: option,
@@ -584,82 +554,90 @@ const EditableCell = props => {
           fieldNames: fieldNames ? fieldNames : {
             value: keySelect,
             label: inputKey ?? 'label'
-          },
-          onBlur: event => {
-            if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
-              const val = event.inputValue;
-              onChange(val ?? undefined);
-              const formState = getValues();
-              // const itemState = getValues(dataIndex)
-              // @ts-ignore
-              const prevState = record[dataIndex];
-              const newState = val;
-              handleCellChange?.({
-                key,
-                field: column.field ?? column.field,
-                record: formState,
-                prevState,
-                newState,
-                option: {
-                  value: val,
-                  label: val,
-                  searchTextAsValue: true
-                },
-                indexCol,
-                indexRow,
-                type: 'blur'
-              });
-            }
-          },
-          onKeyDown: event => {
-            if (event.key === 'Enter' && event.target?.value && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
-              const val = event.target.value;
-              onChange(val);
-              const formState = getValues();
-              // const itemState = getValues(dataIndex)
-              // @ts-ignore
-              const prevState = record[dataIndex];
-              const newState = val;
-              handleCellChange?.({
-                key,
-                field: column.field ?? column.field,
-                record: formState,
-                prevState,
-                newState,
-                option: {
-                  value: val,
-                  label: val,
-                  searchTextAsValue: true
-                },
-                indexCol,
-                indexRow,
-                type: 'blur'
-              });
-            }
-          },
+          }
+
+          // onBlur={(event: any) => {
+
+          //   if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
+          //     const val = event.inputValue
+          //     onChange(val ?? undefined)
+
+          //     const formState = getValues()
+          //     // const itemState = getValues(dataIndex)
+          //     // @ts-ignore
+          //     const prevState = record[dataIndex]
+          //     const newState = val
+
+          //     handleCellChange?.({
+          //       key,
+          //       field: column.field ?? column.field as any,
+          //       record: formState,
+          //       prevState,
+          //       newState,
+          //       option: { value: val, label: val, searchTextAsValue: true } as any,
+          //       indexCol,
+          //       indexRow,
+          //       type: 'blur'
+          //     })
+          //   }
+          // }}
+
+          // onKeyDown={(event: any) => {
+
+          //   if (event.key === 'Enter' && event.target?.value && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
+
+          //     const val = event.target.value
+          //     onChange(val)
+
+          //     const formState = getValues()
+          //     // const itemState = getValues(dataIndex)
+          //     // @ts-ignore
+          //     const prevState = record[dataIndex]
+          //     const newState = val
+
+          //     handleCellChange?.({
+          //       key,
+          //       field: column.field ?? column.field as any,
+          //       record: formState,
+          //       prevState,
+          //       newState,
+          //       option: { value: val, label: val, searchTextAsValue: true } as any,
+          //       indexCol,
+          //       indexRow,
+          //       type: 'blur'
+          //     })
+
+          //   }
+
+          // }}
+          ,
+
           "data-tooltip-content": message,
           "data-tooltip-id": `${id}-tooltip-error`
         });
       case 'select':
-        let valueSelect = value;
+        let valueSelect = formValues[dataIndex];
         if (fieldValue) {
           // @ts-ignore
-          valueSelect = record[fieldValue] ?? value;
+          valueSelect = record[fieldValue] ?? formValues[dataIndex];
         }
         return /*#__PURE__*/React.createElement(Select, {
           options: options,
-          value: valueSelect ?? undefined,
+          value: valueSelect ?? '',
           onChange: (val, option) => {
-            onChange(val);
+            onChange(val ?? '');
             const formState = getValues();
-            // const itemState = getValues(dataIndex)
+            const formNewState = {
+              ...getValues(),
+              [dataIndex]: formState[dataIndex] || undefined
+            };
             // @ts-ignore
-            const prevState = record[dataIndex];
-            const newState = val;
+            const prevState = record[dataIndex] ?? undefined;
+            const newState = val ?? undefined;
             handleCellChange?.({
               key,
               field: column.field ?? column.field,
-              record: formState,
+              record: formNewState,
               prevState,
               newState,
               option: option,
@@ -667,8 +645,11 @@ const EditableCell = props => {
               indexRow,
               type: 'blur'
             });
-          },
-          autoDestroy: true,
+          }
+          // destroyOnHidden
+          // des
+          // autoDestroy={true}
+          ,
           showSearch: true,
           mode: isMulti || selectMode === 'checkbox' ? 'multiple' : undefined,
           valueSelectAble: true,
@@ -778,26 +759,29 @@ const EditableCell = props => {
           "data-tooltip-id": `${id}-tooltip-error`
         });
       case 'asyncSelect':
-        let valueAsyncSelect = value;
+        let valueAsyncSelect = formValues[dataIndex];
         if (fieldValue) {
           // @ts-ignore
-          valueAsyncSelect = record[fieldValue] ?? value;
+          valueAsyncSelect = record[fieldValue] ?? formValues[dataIndex];
         }
         return /*#__PURE__*/React.createElement(AsyncSelect, {
           options: options,
           defaultOptions: options,
           value: valueAsyncSelect ?? undefined,
           onChange: (val, option) => {
-            onChange(val);
+            onChange(val ?? '');
             const formState = getValues();
-            // const itemState = getValues(dataIndex)
+            const formNewState = {
+              ...getValues(),
+              [dataIndex]: formState[dataIndex] || undefined
+            };
             // @ts-ignore
-            const prevState = record[dataIndex];
-            const newState = val;
+            const prevState = record[dataIndex] ?? undefined;
+            const newState = val ?? undefined;
             handleCellChange?.({
               key,
               field: column.field ?? column.field,
-              record: formState,
+              record: formNewState,
               prevState,
               newState,
               option: option,
@@ -805,8 +789,9 @@ const EditableCell = props => {
               indexRow,
               type: 'blur'
             });
-          },
-          autoDestroy: true,
+          }
+          // autoDestroy={true}
+          ,
           showSearch: true,
           defaultOpen: column.field === startCell?.colId,
           autoFocus: column.field === startCell?.colId,

package/es/table-component/body/TableBodyCellEdit.js

@@ -1311,7 +1311,7 @@ const TableBodyCellEdit = props => {
     // rowKey={rowKey}
   }) : /*#__PURE__*/React.createElement("div", {
     className: classNames('ui-rc_cell-content', {
-      'select-cell': canEdit && ['select', 'selectTable', 'asyncSelect'].includes(getEditType(columnMeta, record))
+      'select-cell': canEdit && ['select', 'selectTable', 'asyncSelect', 'treeSelect'].includes(getEditType(columnMeta, record))
     })
   }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
     className: "ui-rc-table-row-expand-trigger",

package/es/table-component/body/TableBodyRow.js

@@ -59,17 +59,12 @@ const TableBodyRow = ({
       [`${prefix}-grid-row-even`]: striped && virtualRow.index % 2 === 0
     }),
     style: {
-      // display: 'flex',
       display: 'grid',
-      // position: 'absolute',
       transform: `translateY(${virtualRow.start}px)`,
       //this should always be a `style` as it changes on scroll
-      // height: isEditing ? '36px' : undefined,
       gridTemplateColumns: `${templateColumns.map(n => `${n}fr`).join(" ")}`,
       height: isEditing ? virtualRow.size : undefined,
       minHeight: isEditing ? undefined : virtualRow.size,
-      // backgroundColor: Array.isArray(row.originalSubRows) ? '#f5f5f5' : undefined,
-      // fontWeight: Array.isArray(row.originalSubRows) ? '500' : undefined,
       ...rowStyles
     },
     onDoubleClick: e => {

package/es/table-component/components/EditForm/EditForm.js

@@ -4,10 +4,7 @@ import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { Col, Row } from "rc-master-ui/es/grid";
 import { isNullOrUndefined, isObjEmpty } from "../../hook/utils";
-import { Input } from "rc-master-ui";
-import { Dropdown } from "antd";
-import Divider from "rc-master-ui/es/divider";
-import Button from "rc-master-ui/es/button";
+import { Input, Dropdown, Divider, Button } from "rc-master-ui";
 import InputControl from "../InputControl/InputControl";
 export const SelectStyle = styled.div.withConfig({
   displayName: "SelectStyle",

package/es/table-component/components/InputControl/InputControl.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { Controller } from "react-hook-form";
 import { Input } from "rc-master-ui";
-import { Typography } from "antd";
+import { Typography } from "rc-master-ui";
 import classnames from "classnames";
 import React, { Fragment } from "react";
 import { Col, Row } from "rc-master-ui/es/grid";

package/es/table-component/components/checkbox-filter/CheckboxFilter.js

@@ -1,7 +1,6 @@
 import * as React from "react";
 import classNames from "classnames";
-import { Checkbox, Menu, Radio, Empty } from "rc-master-ui";
-import { Tree } from "antd";
+import { Checkbox, Menu, Radio, Empty, Tree } from "rc-master-ui";
 import { flattenKeys } from "rc-master-ui/es/table/hooks/useFilter";
 import FilterSearch from "./FilterSearch";
 function searchValueMatched(searchValue, text) {

package/es/table-component/components/checkbox-filter/FilterSearch.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { FilterSearchType, TableLocale } from "antd/es/table/interface";
 import type { AnyObject } from '../../../grid-component/type';
+import type { FilterSearchType, TableLocale } from 'rc-master-ui/es/table/interface';
 interface FilterSearchProps<RecordType = AnyObject> {
     value: string;
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;

package/es/table-component/components/checkbox-filter/FilterSearch.js

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import SearchOutlined from '@ant-design/icons/SearchOutlined';
 import { Input } from 'rc-master-ui';
+// import type {FilterSearchType, TableLocale} from "antd/es/table/interface"
 
+// import type { TableLocale } from 'rc-master-ui/es/locales';
 // import type {AnyObject} from "./../grid-component/type"
 
 const FilterSearch = props => {
@@ -9,8 +11,8 @@ const FilterSearch = props => {
     value,
     filterSearch,
     tablePrefixCls,
-    locale,
-    onChange
+    onChange,
+    locale
   } = props;
   if (!filterSearch) {
     return null;

package/es/table-component/header/TableHeadCell.js

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { Button, Space } from 'antd';
+import { Button, Space } from 'rc-master-ui';
 import { ArrowDown, ArrowUp, FilterFill, SortCancel } from 'becoxy-icons';
 import classNames from 'classnames';
 import { Checkbox, Dropdown, Select } from 'rc-master-ui';

package/es/table-component/header/TableHeadCell2.js

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { Space } from 'antd';
+import { Space } from 'rc-master-ui';
 import Button from 'rc-master-ui/es/button';
 import { ArrowDown, ArrowUp, FilterFill, SortCancel } from 'becoxy-icons';
 import classNames from 'classnames';

package/es/table-component/header/TableHeadRow.js

@@ -1,4 +1,5 @@
-import { horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable';
+// import { horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable'
+
 import React from 'react';
 import { TableContext } from "../useContext";
 import TableHeadCell from "./TableHeadCell";
@@ -11,7 +12,9 @@ const TableHeadRow = ({
     prefix,
     onRowHeaderStyles
   } = React.useContext(TableContext);
-  const columnOrder = table.getState().columnOrder;
+
+  // const columnOrder = table.getState().columnOrder
+
   const rowStyles = typeof onRowHeaderStyles === 'function' ? onRowHeaderStyles() : onRowHeaderStyles;
   return /*#__PURE__*/React.createElement("div", {
     key: headerGroup.id
@@ -26,9 +29,6 @@ const TableHeadRow = ({
       ...rowStyles,
       width: '100%'
     }
-  }, /*#__PURE__*/React.createElement(SortableContext, {
-    items: columnOrder,
-    strategy: horizontalListSortingStrategy
   }, headerGroup.headers.map(header => {
     const columnRelativeDepth = header.depth - header.column.depth;
     if (columnRelativeDepth > 1) {
@@ -47,6 +47,6 @@ const TableHeadRow = ({
       colSpan: header.colSpan,
       rowSpan: rowSpan
     });
-  })));
+  }));
 };
 export default TableHeadRow;

package/es/table-component/hook/utils.d.ts

@@ -1,13 +1,13 @@
 import type { Row, Table } from "@tanstack/react-table";
 import type { Column } from "@tanstack/react-table";
 import type { VirtualItem } from "@tanstack/react-virtual";
-import type { AnyObject, ColumnsTable, ColumnTable, EditType, FilterItem, FilterOperator, IColumnType, IFormat, RangeState, Sorter, TypeFilter } from "./../../grid-component/type";
+import type { AnyObject, ColumnsTable, ColumnTable, EditType, FilterItem, FilterOperator, IColumnType, IFormat, RangeState, RowDnd, Sorter, TypeFilter } from "./../../grid-component/type";
 import type { Key } from "react";
 import type { CSSProperties } from "react";
 import dayjs from "dayjs";
 import type { IPositionCell } from "../useContext";
 import type { ColumnDef } from "@tanstack/react-table";
-import type { TreeDataNode } from "antd";
+import type { TreeDataNode } from "rc-master-ui";
 import type { FilterState } from "../../ali-table/interfaces";
 export declare const newGuid: () => any;
 export declare const convertDayjsToDate: (dateString: string, format?: string) => Date;
@@ -136,7 +136,7 @@ export declare const getVisibleColumnKeys: (columns: any[]) => string[];
 export declare const getVisibleColumnKeys1: (columns: any[]) => string[];
 export declare function getVisibleFields(columns: ColumnTable[]): string[];
 export declare function isObjEqual(obj1: any, obj2: any): boolean;
-export declare const sortByType: <T>(arr: ColumnTable<T>[]) => ColumnTable<T>[];
+export declare const sortByType: <T>(arr: ColumnTable<T>[], rowDnd?: RowDnd) => ColumnTable<T>[];
 export declare function convertColumnsToTreeData<T>(columns: ColumnDef<T, any>[], groupColumns?: string[]): TreeDataNode[];
 export declare const updateColumns1: (columns: ColumnTable[], includes: string[]) => ColumnTable[];
 export declare const convertToObj: (arr: any) => {

package/es/table-component/hook/utils.js

@@ -2243,9 +2243,21 @@ export function isObjEqual(obj1, obj2) {
 }
 
 // Sorting function
-export const sortByType = arr => {
-  if (arr) {
-    return arr.sort((a, b) => {
+export const sortByType = (arr, rowDnd) => {
+  const colDnd = {
+    field: 'drag-handle',
+    width: 50,
+    fixed: 'left',
+    headerText: '',
+    allowFiltering: false,
+    allowResizing: false,
+    allowSortering: false
+  };
+  const cols = rowDnd?.enabled ? [{
+    ...colDnd
+  }, ...arr] : [...arr];
+  if (cols) {
+    return cols.sort((a, b) => {
       if ((a.fixed ?? a.fixedType) === 'left' && (b.fixed ?? b.fixedType) !== 'left') {
         return -1;
       } else if ((a.fixed ?? a.fixedType) !== 'left' && (b.fixed ?? b.fixedType) === 'left') {
@@ -2397,7 +2409,19 @@ export function updateColumnWidthsRecursive(columns, sizing) {
     return updated;
   });
 }
-export function updateWidthsByOther(source, target) {
+export function updateWidthsByOther(source, target
+// rowDnd?: RowDnd
+) {
+  // const columnDnd  = {
+  //   field: 'drag-handle',
+  //   headerText: '',
+  //   fixed: 'left',
+  //   width: 50
+  // }
+
+  // const tg = rowDnd?.enabled ? [{...columnDnd}, ...target] : [...target]
+  // const sour = rowDnd?.enabled ? [{...columnDnd}, ...source] : [...source]
+
   const targetMap = new Map();
 
   // tạo map {field -> width} từ target

package/es/table-component/style.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 // const prefix = "ui-rc";
-// const antdPrefix = "ant";
+// const rcUiPrefix = "ant";
 const fontFamily = 'Montserrat, Helvetica, Arial, serif ';
 // const borderRadius = "6px";
 
@@ -48,4 +48,4 @@ const colorDark = '#e6e4f3e6 ';
 export const GridStyle = styled.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-hdqm5k-0"
-})(["&.", "-grid{color:", ";font-size:", ";background-color:", ";font-family:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:'';pointer-events:none;}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{justify-content:flex-end;text-align:right;}&.", "-grid-cell-ellipsis{.ui-rc_cell-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;&.select-cell{padding-right:18px;position:relative;}.caret-down{float:right;position:absolute;right:0;&::before{content:'';display:inline-block;margin-left:4px;vertical-align:middle;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #6f7777;}}}}&.", "-grid-cell-wrap{white-space:normal;text-overflow:ellipsis;word-break:break-word;}.", "-grid-header-text-wrap{white-space:normal;overflow:hidden;text-overflow:ellipsis;word-break:break-word;}}.", "-grid-thead{background-color:", ";font-weight:", ";.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;z-index:3;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{font-weight:", ";background-color:", ";color:", ";&.", "-grid-row-odd{background-color:#f9f8fd;}&.", "-grid-row-even{}&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}.ui-rc-toolbar-bottom{border-right:1px solid #e0e0e0;border-left:1px solid #e0e0e0;.be-toolbar-item{.ui-rc-btn{font-size:12px;line-height:1.5}.toolbar-dropdown-button{font-size:12px;.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-color:#28c76f;}.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-color:#28c76f;.ui-rc-btn-icon{color:#28c76f;}}}}}.ui-rc-toolbar-bottom_border-bottom{border-bottom:1px solid #e0e0e0;}.ui-rc-toolbar-bottom{position:relative;padding:.15rem 0.5rem;background-color:#ffffff;.toolbar-button{border-radius:3px;}.ui-rc-btn{border-radius:3px;height:28px;&.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-start-start-radius:0;border-end-start-radius:0;}&.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-start-end-radius:0;border-end-end-radius:0;}}}}"], props => props.$prefix, color, fontSize, BgColor, fontFamily, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, fwHeader, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, fwBody, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);
+})(["&.", "-grid{color:", ";font-size:", ";background-color:", ";font-family:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:'';pointer-events:none;}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{justify-content:flex-end;text-align:right;}&.editable{.ui-rc_cell-content{height:100%}}&.", "-grid-cell-ellipsis{.ui-rc_cell-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;&.select-cell{padding-right:18px;position:relative;}.caret-down{float:right;position:absolute;right:0;&::before{content:'';display:inline-block;margin-left:4px;vertical-align:middle;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #6f7777;}}}}&.", "-grid-cell-wrap{white-space:normal;text-overflow:ellipsis;word-break:break-word;}.", "-grid-header-text-wrap{white-space:normal;overflow:hidden;text-overflow:ellipsis;word-break:break-word;}}.", "-grid-thead{background-color:", ";font-weight:", ";.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;z-index:3;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{font-weight:", ";background-color:", ";color:", ";&.", "-grid-row-odd{background-color:#f9f8fd;}&.", "-grid-row-even{}&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}.ui-rc-toolbar-bottom{border-right:1px solid #e0e0e0;border-left:1px solid #e0e0e0;.be-toolbar-item{.ui-rc-btn{font-size:12px;line-height:1.5}.toolbar-dropdown-button{font-size:12px;.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-color:#28c76f;}.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-color:#28c76f;.ui-rc-btn-icon{color:#28c76f;}}}}}.ui-rc-toolbar-bottom_border-bottom{border-bottom:1px solid #e0e0e0;}.ui-rc-toolbar-bottom{position:relative;padding:.15rem 0.5rem;background-color:#ffffff;.toolbar-button{border-radius:3px;}.ui-rc-btn{border-radius:3px;height:28px;&.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-start-start-radius:0;border-end-start-radius:0;}&.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-start-end-radius:0;border-end-end-radius:0;}}}}"], props => props.$prefix, color, fontSize, BgColor, fontFamily, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, fwHeader, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, fwBody, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);

package/es/table-component/table/Grid.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { Modal } from 'antd';
+import { Modal } from 'rc-master-ui';
 import { faker } from '@faker-js/faker';
 import { getCoreRowModel, getExpandedRowModel,
 // getFilteredRowModel,
@@ -277,6 +277,7 @@ const Grid = props => {
       active,
       over
     } = event;
+    //  column dnd
     if (active && over && active.id !== over.id) {
       setColumnOrder(cols => {
         const oldIndex = cols.indexOf(active.id);

package/es/table-virtuoso/ColumnsGroup/ColumnsGroup.js

@@ -6,7 +6,7 @@ import React, { useRef, useState } from "react";
 //   // useOnClickOutside
 // } from "../../hooks"
 
-import { Button, Popover } from "antd";
+import { Button, Popover } from "rc-master-ui";
 // import {SettingOutlined} from "@ant-design/icons";
 import { Select } from "rc-master-ui";
 import styled from "styled-components";

package/es/table-virtuoso/header/TableHeadCell.js

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { Button, Space } from 'antd';
+import { Button, Space } from 'rc-master-ui';
 import { ArrowDown, ArrowUp, FilterFill, SortCancel } from 'becoxy-icons';
 import classNames from 'classnames';
 import { Checkbox, Dropdown, Select } from 'rc-master-ui';

package/es/table-virtuoso/hook/utils.d.ts

@@ -6,7 +6,7 @@ import type { Key } from "react";
 import type { CSSProperties } from "react";
 import dayjs from "dayjs";
 import type { ColumnDef } from "@tanstack/react-table";
-import type { TreeDataNode } from "antd";
+import type { TreeDataNode } from "rc-master-ui";
 import type { IPositionCell } from "../../table-component/useContext";
 export declare const newGuid: () => any;
 export declare const convertDayjsToDate: (dateString: string, format?: string) => Date;

package/es/table-virtuoso/table/Grid.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { Modal } from 'antd';
+import { Modal } from 'rc-master-ui';
 import { faker } from '@faker-js/faker';
 import { DndContext, KeyboardSensor, MouseSensor, TouchSensor, closestCenter, useSensor, useSensors } from '@dnd-kit/core';
 import { restrictToHorizontalAxis } from '@dnd-kit/modifiers';

package/es/table-virtuoso/table/TableContainer.js

@@ -113,7 +113,7 @@ const TableContainer = props => {
     if (!toolbarItems) {
       return undefined;
     }
-    return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight !== false);
+    return toolbarItems.filter(it => it.position !== 'Bottom' && it.visible !== false && it.fixedRight !== true);
   }, [toolbarItems]);
   const toolbarItemTopRight = React.useMemo(() => {
     if (!toolbarItems) {