es-grid-template 0.0.13 → 0.1.1

package/lib/grid-component/{rc-table → table}/GridEdit.js

@@ -21,7 +21,8 @@ require("dayjs/locale/es");
 require("dayjs/locale/vi");
 var _TableGrid = _interopRequireDefault(require("../TableGrid"));
 var _hooks = require("../hooks");
-var _Message = _interopRequireDefault(require("./../Message/Message"));
+var _Message = _interopRequireDefault(require("../../Message/Message"));
+var _Command = _interopRequireDefault(require("../Command"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 _dayjs.default.extend(_customParseFormat.default);
@@ -32,6 +33,7 @@ const GridEdit = props => {
     t,
     columns,
     dataSource,
+    components,
     allowResizing,
     rowKey = 'id',
     selectionSettings,
@@ -40,9 +42,13 @@ const GridEdit = props => {
     onDataChange,
     onCellPaste,
     onCellChange,
-    components,
+    style,
+    getRowKey,
     ...rest
   } = props;
+
+  // const forceUpdate = useForceUpdate();
+  const [updateKey, setUpdateKey] = (0, _react.useState)(0);
   const isSelecting = (0, _react.useRef)(false);
   const startCell = (0, _react.useRef)(null);
   const isSelectingRow = (0, _react.useRef)(false);
@@ -125,6 +131,30 @@ const GridEdit = props => {
     }
     setSelectedCells(newSelectedCells);
   };
+  const handleClickRowHeader = (row, col) => {
+    const newSelectedCells = new Set();
+    for (let r = Math.min(row, row); r <= Math.max(row, row); r++) {
+      for (let c = Math.min(columns.length, col) + 1; c <= Math.max(columns.length, col); c++) {
+        newSelectedCells.add(`${r}-${c}`);
+      }
+    }
+    setSelectedCells(newSelectedCells);
+  };
+  const handleClickColHeader = (column, indexColumn) => {
+    const newSelectedCells = new Set();
+    for (let r = Math.min(dataSource.length, 0); r <= Math.max(dataSource.length - 1, 0); r++) {
+      for (let c = Math.min(indexColumn, indexColumn); c <= Math.max(indexColumn, indexColumn); c++) {
+        newSelectedCells.add(`${r}-${c}`);
+      }
+    }
+
+    // console.log('newSelectedCells', newSelectedCells)
+    // setSelectedCells(newSelectedCells)
+
+    setSelectedCells(new Set(newSelectedCells));
+    // forceUpdate();
+    setUpdateKey(prev => prev + 1); // Cập nhật key để trigger re-render
+  };
   const handleMouseDownColIndex = (row, col, e) => {
     if (e.button === 2) {
       e.stopPropagation();
@@ -347,15 +377,15 @@ const GridEdit = props => {
       record,
       type,
       newState,
-      prevState
+      prevState,
+      option
     } = args;
 
     // console.log('newState', newState)
     //
     // console.log('getValues()', getValues())
 
-    // const record = getValues()
-
+    const newRecord = getValues();
     if (type === 'enter') {
       console.log('aaaaaa enter');
     }
@@ -366,7 +396,16 @@ const GridEdit = props => {
         // const newDataUpdate  = updateData(data, callbackData, rowKey as any)
 
         console.log('callbackData', callbackData);
-        const newRecord = callbackData;
+        const callbackRecord = callbackData;
+        Object.entries(callbackRecord).forEach(([name, value]) => {
+          setValue(name, value);
+
+          // if (listObjectDate.includes(name) && value) {
+          //   setValue(name, new Date(value))
+          // }  else {
+          //   setValue(name, value)
+          // }
+        });
         onSubmit(newRecord);
       };
       if (onCellChange) {
@@ -376,8 +415,8 @@ const GridEdit = props => {
             field: '',
             indexCol: 1,
             type: 'onChange',
-            rows: [],
             value: newState,
+            option,
             indexRow: 1,
             rowData: record,
             rowId: '',
@@ -385,12 +424,14 @@ const GridEdit = props => {
             sumValue: []
           }, handleChangeCallback);
         } else {
+          // const aaaa  = updateData(dataSource, newRecord, rowKey as any)
+
           console.log('onCellChange');
           onCellChange({
             field: '',
             indexCol: 1,
             type: 'onChange',
-            rows: [],
+            option,
             value: newState,
             indexRow: 1,
             rowData: record,
@@ -555,6 +596,7 @@ const GridEdit = props => {
       if (col.dataIndex === 'index' || col.field === 'index' || col.dataIndex === '#' || col.dataIndex === '#') {
         return {
           ...col,
+          className: 'rc-ui-cell-editable',
           render: (value, record, rowIndex) => {
             return /*#__PURE__*/_react.default.createElement("div", {
               className: (0, _classnames.default)('ui-rc_cell-content ui-rc_cell-content--index', {
@@ -562,13 +604,45 @@ const GridEdit = props => {
                 focus: selectedCells && Array.from(selectedCells).some(item => item.startsWith(`${rowIndex}-`))
               }),
               onMouseDown: event => handleMouseDownColIndex(rowIndex, colIndex, event),
-              onMouseEnter: event => handleMouseEnterColIndex(rowIndex, colIndex, event)
+              onMouseEnter: event => handleMouseEnterColIndex(rowIndex, colIndex, event),
+              onClick: () => handleClickRowHeader(rowIndex, colIndex)
             }, /*#__PURE__*/_react.default.createElement("div", {
               className: 'ui-rc_content'
             }, rowIndex + 1));
           }
         };
       }
+      if (col.dataIndex === 'command' || col.field === 'command') {
+        return {
+          ...col,
+          title: col.headerText ?? col.title,
+          ellipsis: col.ellipsis !== false,
+          onCell: () => ({
+            className: 'ui-rc-cell-command'
+          }),
+          // render: (value: any, record: any, rowIndex: number) => {
+          render: () => {
+            return /*#__PURE__*/_react.default.createElement("div", {
+              className: (0, _classnames.default)('ui-rc-cell-command__content', {})
+            }, col.commandItems && col.commandItems?.map((item, indexComm) => {
+              if (item.visible !== false) {
+                // return  (
+                //   <span>{item.title}</span>
+                // )
+
+                return /*#__PURE__*/_react.default.createElement(_Command.default, {
+                  key: `command-${indexComm}`,
+                  item: item,
+                  onClick: e => {
+                    e.preventDefault();
+                    // handleCommandClick({command: item, rowData: record, index: rowIndex})
+                  }
+                });
+              }
+            }));
+          }
+        };
+      }
       return {
         ...col,
         onCell: (record, rowIndex) => ({
@@ -633,7 +707,7 @@ const GridEdit = props => {
               setEditingKey('');
             }
           },
-          className: isEditing(record) ? 'cell-editing' : 'cell-editable',
+          className: isEditing(record) ? 'rc-ui-cell-editable cell-editing' : 'rc-ui-cell-editable cell-editable',
           record,
           column: col,
           editType: (0, _hooks.getEditType)(col, record),
@@ -641,20 +715,25 @@ const GridEdit = props => {
           title: col.title,
           'data-col-index': colIndex,
           'data-row-index': rowIndex,
-          colIndex: colIndex,
+          // colIndex: colIndex,
           indexCol: colIndex,
           indexRow: rowIndex,
           editing: isEditing(record),
           tabIndex: (rowIndex ?? 0) * columns.length + colIndex
         }),
+        onHeaderCell: data => ({
+          ...col.onHeaderCell(),
+          onClick: () => {
+            handleClickColHeader(data, colIndex);
+          }
+        }),
         render: (value, record, rowIndex) => {
           return /*#__PURE__*/_react.default.createElement("div", {
             className: (0, _classnames.default)('ui-rc_cell-content', {
               selected: selectedCells.has(`${rowIndex}-${colIndex}`)
             }),
             onMouseDown: event => handleMouseDown(rowIndex, colIndex, event),
-            onMouseEnter: () => handleMouseEnter(rowIndex, colIndex),
-            onMouseLeave: () => {}
+            onMouseEnter: () => handleMouseEnter(rowIndex, colIndex)
           }, /*#__PURE__*/_react.default.createElement("div", {
             className: 'ui-rc_content'
           }, (0, _useColumns.renderContent)(col, value, record, rowIndex)));
@@ -677,12 +756,14 @@ const GridEdit = props => {
       control,
       trigger,
       getValues,
-      handleCellChange
+      handleCellChange,
+      getRowKey
     }
   }, /*#__PURE__*/_react.default.createElement("form", {
     onSubmit: handleSubmit(onSubmit)
   }, /*#__PURE__*/_react.default.createElement(_TableGrid.default, (0, _extends2.default)({}, rest, {
     t: t,
+    key: updateKey,
     tableRef: tableRef,
     dataSource: dataSource,
     components: {
@@ -703,8 +784,10 @@ const GridEdit = props => {
       checkboxOnly: true
     } : undefined,
     style: {
+      ...style,
       minHeight: height
-    }
+    },
+    rowHoverable: false
   }))))), /*#__PURE__*/_react.default.createElement(_reactHotToast.Toaster, {
     position: toast,
     toastOptions: {

package/lib/grid-component/type.d.ts

@@ -10,6 +10,7 @@ export type IColumnType = "number" | "time" | "date" | "week" | "month" | "file"
 export type AnyObject = Record<PropertyKey, any>;
 export type SelectMode = 'checkbox' | 'radio' | undefined;
 export type ITextAlign = 'center' | 'left' | 'right';
+export type Frozen = 'left' | 'right' | 'Left' | 'Right';
 export type ITemplateColumn = {
     value: any;
     column: any;
@@ -39,6 +40,7 @@ export type ColumnSelectTable = {
 };
 export type IEditSelectSettings = {
     fieldKey?: string;
+    options: any[];
     /**  get value form other field **/
     fieldValue?: string;
     /** get label form other field **/
@@ -46,7 +48,6 @@ export type IEditSelectSettings = {
     inputKey?: string;
     filterKey?: string[];
     selectMode?: SelectMode;
-    options: any[];
     getPasteValue?: (value: any) => Record<string, any> | null;
     validateOption?: (rowData: any, field: string) => any[];
     defaultOptions?: any[];
@@ -84,14 +85,18 @@ export type ColumnType<RecordType> = Omit<RcColumnType<RecordType>, 'headerTempl
     format?: IFormat;
     allowFiltering?: boolean;
     operator?: FilterOperator;
+    hideOperator?: boolean;
     placeholder?: string;
     showInColumnChoose?: boolean;
     typeFilter?: TypeFilter;
     headerText?: string;
+    textAlign?: ITextAlign;
+    frozen?: Frozen;
     template?: ReactNode | ReactElement | ((value: any, record: RecordType, index: number) => ReactNode | ReactElement);
     showTooltip?: boolean;
     tooltipDescription?: ReactNode | ReactElement | ((value: any, record: RecordType, index: number) => ReactNode | ReactElement);
     headerTemplate?: React.ReactNode | React.ReactElement | ((column: ColumnType<RecordType>) => React.ReactNode | React.ReactElement);
+    commandItems?: CommandItem[];
     children?: ColumnType<RecordType>[];
 };
 export type ColumnEditType<RecordType> = ColumnType<RecordType> & {
@@ -140,7 +145,7 @@ export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, '
         direction: 'Ascending' | 'Descending' | null;
     }) => void;
     selectionSettings?: SelectionSettings;
-    rowKey?: string;
+    rowKey?: string | keyof RecordType | GetRowKey<RecordType>;
     rowSelection?: RowSelection<RecordType>;
     rowSelected?: (args: {
         type: string;
@@ -156,15 +161,27 @@ export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, '
 export interface TableEditProps<RecordType = AnyObject> extends Omit<TableProps<RecordType>, 'columns'> {
     columns: ColumnsTable<RecordType>;
     onCellPaste?: ICellPasteModel<RecordType>;
-    onCellChange?: (args: CellChangeArgs, handleCallback: (rowData: any, index: any, value?: any) => void) => void;
+    onCellChange?: (args: CellChangeArgs<RecordType>, handleCallback: (rowData: any, index: any, value?: any) => void) => void;
 }
 export type GridTableProps<RecordType = AnyObject> = TableProps<RecordType> | TableEditProps<RecordType>;
-export type CellChangeArgs = {
+export interface CommandItem {
+    id: string;
+    type?: string;
+    visible?: boolean;
+    title: string;
+    color?: 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
+    tooltip?: string;
+    icon?: ReactNode | ReactElement | (() => ReactNode | ReactElement);
+    template?: ReactNode | ReactElement | (() => ReactNode | ReactElement);
+    client?: boolean;
+    confirmDialog?: boolean;
+}
+export type CellChangeArgs<T> = {
     type: 'onPaste' | 'onChange' | 'onCellPaste';
     value: any;
-    rowData: any;
-    rows: any[];
-    rowsData: any[];
+    option: AnyObject;
+    rowData: T;
+    rowsData: T[];
     indexRow: number;
     rowId?: string;
     field: string;
@@ -188,13 +205,10 @@ export type SourceFilter = {
     loadOptions?: (search: string, callback: (newOptions: any[]) => void) => void;
 };
 export type RowSelection<RecordType> = Omit<TableRowSelection<RecordType>, 'type' | 'columnWidth' | 'hideSelectAll' | 'defaultSelectedRowKeys'>;
-export type SelectionSettings = {
+export type SelectionSettings = Omit<TableRowSelection, 'type' | 'onChange' | 'onSelect' | 'onSelectAll' | 'onSelectNone' | 'onSelectMultiple'> & {
     mode?: 'checkbox' | 'radio';
     type?: 'single' | 'multiple';
     checkboxOnly?: boolean;
-    hideSelectAll?: boolean;
-    columnWidth?: number | string;
-    defaultSelectedRowKeys?: Key[];
 };
 export type RecordDoubleClickEventArgs<RecordType> = {
     rowData: RecordType;
@@ -223,3 +237,4 @@ export type IFormat = {
     monthFormat?: string;
     yearFormat?: string;
 };
+export type GetRowKey<RecordType> = (record: RecordType, index?: number) => Key;

package/lib/grid-component/useContext.d.ts

@@ -1,12 +1,13 @@
 /// <reference types="react" />
-import type { IFormat } from "./type";
+import type { AnyObject, IFormat } from "./type";
 import type { SubmitHandler } from "react-hook-form";
-export interface IContext {
+import type { GetRowKey } from "./type";
+export interface IContext<RecordType> {
     searchValue?: any;
     setSearchValue?: any;
     open?: boolean;
     setOpen?: any;
-    rowKey: string;
+    rowKey: string | keyof RecordType | GetRowKey<RecordType>;
     onSave?: any;
     form?: any;
     format?: IFormat;
@@ -15,13 +16,15 @@ export interface IContext {
     handleSubmit?: any;
     onSubmit?: SubmitHandler<any>;
     getValues?: any;
-    handleCellChange?: ({ key, record, type }: ContextCellChange) => void;
+    handleCellChange?: ({ key, record, type, option }: ContextCellChange<RecordType>) => void;
+    getRowKey?: GetRowKey<RecordType>;
 }
-export type ContextCellChange = {
-    key: string;
+export type ContextCellChange<RecordType = AnyObject> = {
+    key: string | keyof RecordType | GetRowKey<RecordType>;
     record: any;
+    option: any;
     newState?: any;
     prevState?: any;
     type: 'enter' | 'blur' | 'outClick';
 };
-export declare const TableContext: import("react").Context<IContext>;
+export declare const TableContext: import("react").Context<IContext<any>>;

package/lib/grid-component/useContext.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TableContext = void 0;
 var _react = require("react");
+// import {AnyObject} from "antd/es/_util/type";
+
 const TableContext = exports.TableContext = /*#__PURE__*/(0, _react.createContext)({
   rowKey: 'id'
 });

package/lib/index.d.ts

@@ -1 +1,2 @@
-export { default as GridTable } from './grid-component';
+export { default as GridComponent } from './grid-component';
+export type { ColumnsTable, TableProps, ColumnTable } from './grid-component';

package/lib/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "GridTable", {
+Object.defineProperty(exports, "GridComponent", {
   enumerable: true,
   get: function () {
     return _gridComponent.default;

package/package.json

@@ -1,86 +1,113 @@
-{
-  "name": "es-grid-template",
-  "version": "0.0.13",
-  "description": "es-grid-template",
-  "keywords": [
-    "react",
-    "react-component",
-    "grid",
-    "table"
-  ],
-  "license": "MIT",
-  "main": "lib/index",
-  "module": "es/index",
-  "files": [
-    "lib",
-    "es",
-    "assets/*.css",
-    "assets/*.less"
-  ],
-  "scripts": {
-    "compile": "father build",
-    "docs:build": "dumi build",
-    "__docs:deploy": "gh-pages -d dist",
-    "lint": "eslint src/ --ext .tsx,.ts,.jsx,.js",
-    "now-build": "npm run docs:build",
-    "prepare": "dumi setup",
-    "prepublishOnly": "npm run compile",
-    "postpublish": "npm run docs:build",
-    "__postpublish": "npm run docs:build && npm run docs:deploy",
-    "start": "dumi dev",
-    "test": "vitest --watch false",
-    "coverage": "vitest run --coverage"
-  },
-  "dependencies": {
-    "@babel/runtime": "^7.11.2",
-    "@faker-js/faker": "^9.5.0",
-    "@rc-component/father-plugin": "^2.0.1",
-    "@rc-component/trigger": "^2.0.0",
-    "@rc-component/util": "^1.0.1",
-    "@types/react-resizable": "^3.0.8",
-    "@types/styled-components": "^5.1.34",
-    "@vitest/coverage-v8": "^2.0.5",
-    "antd": "^5.24.1",
-    "antd-style": "^3.7.1",
-    "becoxy-icons": "^1.9.9",
-    "classnames": "^2.3.1",
-    "dayjs": "^1.11.13",
-    "moment": "^2.30.1",
-    "postcss": "^8.4.35",
-    "rc-master-ui": "^1.1.2",
-    "react-hook-form": "^7.54.2",
-    "react-hot-toast": "^2.5.2",
-    "react-numeric-component": "^1.0.7",
-    "react-resizable": "^3.0.5",
-    "styled-components": "^6.1.15",
-    "throttle-debounce": "^5.0.2",
-    "uuid": "^11.1.0",
-    "vitest": "^2.0.5"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.26.4",
-    "@babel/preset-env": "^7.26.9",
-    "@rc-component/np": "^1.0.3",
-    "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.4.0",
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.10",
-    "@types/warning": "^3.0.0",
-    "cross-env": "^7.0.0",
-    "dumi": "^2.2.13",
-    "eslint": "^8.56.0",
-    "eslint-plugin-unicorn": "^55.0.0",
-    "father": "^4.0.0",
-    "gh-pages": "^3.1.0",
-    "less": "^4.1.1",
-    "np": "^7.1.0",
-    "rc-test": "^7.0.9",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "typescript": "^4.0.5"
-  },
-  "peerDependencies": {
-    "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
-  }
-}
+{
+  "name": "es-grid-template",
+  "version": "0.1.1",
+  "description": "es-grid-template",
+  "keywords": [
+    "react",
+    "react-component",
+    "grid",
+    "table"
+  ],
+  "license": "MIT",
+  "main": "lib/index",
+  "module": "es/index",
+  "files": [
+    "lib",
+    "es",
+    "assets/*.css",
+    "assets/*.less"
+  ],
+  "scripts": {
+    "compile": "father build",
+    "docs:build": "dumi build",
+    "__docs:deploy": "gh-pages -d dist",
+    "lint": "eslint src/ --ext .tsx,.ts,.jsx,.js",
+    "now-build": "npm run docs:build",
+    "prepare": "dumi setup",
+    "prepublishOnly": "npm run compile",
+    "postpublish": "npm run docs:build",
+    "__postpublish": "npm run docs:build && npm run docs:deploy",
+    "start": "dumi dev",
+    "test": "vitest --watch false",
+    "coverage": "vitest run --coverage"
+  },
+  "dependencies": {
+    "@ant-design/cssinjs": "^1.22.0",
+    "@ant-design/cssinjs-utils": "^1.1.1",
+    "@ant-design/icons": "^5.5.2",
+    "@babel/runtime": "^7.11.2",
+    "@core-rc/rc-select": "^0.0.8",
+    "@ctrl/tinycolor": "^3.6.1",
+    "@faker-js/faker": "^9.5.0",
+    "@floating-ui/react": "^0.27.5",
+    "@rc-component/color-picker": "^2.0.1",
+    "@rc-component/father-plugin": "^2.0.1",
+    "@rc-component/trigger": "^2.0.0",
+    "@rc-component/util": "^1.0.1",
+    "@types/react-resizable": "^3.0.8",
+    "@types/styled-components": "^5.1.34",
+    "@vitest/coverage-v8": "^2.0.5",
+    "antd": "^5.24.1",
+    "antd-style": "^3.7.1",
+    "becoxy-icons": "^1.9.9",
+    "classnames": "^2.3.1",
+    "dayjs": "^1.11.13",
+    "lodash": "^4.17.21",
+    "moment": "^2.30.1",
+    "postcss": "^8.4.35",
+    "rc-base-table": "^1.0.1",
+    "rc-checkbox": "^3.5.0",
+    "rc-collapse": "^3.9.0",
+    "rc-dialog": "^9.6.0",
+    "rc-dropdown": "^4.2.1",
+    "rc-field-form": "^2.6.0",
+    "rc-input": "^1.6.3",
+    "rc-input-number": "^9.3.0",
+    "rc-master-ui": "^1.1.2",
+    "rc-menu": "^9.16.0",
+    "rc-pagination": "^4.3.0",
+    "rc-picker": "^4.11.2",
+    "rc-segmented": "^2.7.0",
+    "rc-select": "^14.16.3",
+    "rc-slider": "^11.1.7",
+    "rc-switch": "^4.1.0",
+    "rc-textarea": "^1.8.2",
+    "rc-tooltip": "^6.3.0",
+    "rc-tree": "^5.10.1",
+    "rc-tree-select": "^5.24.5",
+    "rc-ui-select": "^0.0.2",
+    "react-hook-form": "^7.54.2",
+    "react-hot-toast": "^2.5.2",
+    "react-numeric-component": "^1.0.7",
+    "react-resizable": "^3.0.5",
+    "styled-components": "^6.1.15",
+    "throttle-debounce": "^5.0.2",
+    "vitest": "^2.0.5"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.26.4",
+    "@babel/preset-env": "^7.26.9",
+    "@rc-component/np": "^1.0.3",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.4.0",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "@types/warning": "^3.0.0",
+    "cross-env": "^7.0.0",
+    "dumi": "^2.2.13",
+    "eslint": "^8.56.0",
+    "eslint-plugin-unicorn": "^55.0.0",
+    "father": "^4.0.0",
+    "gh-pages": "^3.1.0",
+    "less": "^4.1.1",
+    "np": "^7.1.0",
+    "rc-test": "^7.0.9",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^4.0.5"
+  },
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
+  }
+}