@pdg/react-table 1.0.107 → 1.0.108

package/README.md

@@ -8,7 +8,7 @@ https://parkdigy.github.io/react-table/
 
 ## 설치
 ```shell
-npm install -D @pdg/react-table @dnd-kit/core @dnd-kit/sortable @emotion/react @emotion/styled @mui/icons-material @mui/material @mui/x-date-pickers @pdg/react-component @pdg/react-hook @pdg/react-form @tinymce/tinymce-react @types/react-copy-to-clipboard @types/uuid classnames dayjs react-copy-to-clipboard react-number-format react-resize-detector simplebar-react uuid
+npm install -D @pdg/react-table @dnd-kit/core @dnd-kit/sortable @emotion/react @emotion/styled @mui/icons-material @mui/material @mui/x-date-pickers @pdg/react-component @pdg/react-hook @pdg/react-form @tinymce/tinymce-react @types/uuid classnames dayjs copy-to-clipboard react-number-format react-resize-detector simplebar-react uuid
 ```
 
 ### simplebar-react css 추가

package/dist/TableBodyRow/TableBodyRow.d.ts

@@ -1,7 +1,5 @@
 import React from 'react';
 import { TableBodyRowProps as Props } from './TableBodyRow.types';
-export declare const StyledBodyRow: import("@emotion/styled").StyledComponent<import("@mui/material").TableRowOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
-    ref?: ((instance: HTMLTableRowElement | null) => void) | React.RefObject<HTMLTableRowElement> | null | undefined;
-}, "className" | "style" | "classes" | "children" | "hover" | "selected" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StyledBodyRow: import("@emotion/styled").StyledComponent<import("@mui/material").TableRowOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "className" | "style" | "classes" | "children" | "hover" | "selected" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 declare const TableBodyRow: React.FC<Props>;
 export default TableBodyRow;

package/dist/TableButton/TableButton.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { TableButtonProps as Props } from './TableButton.types';
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>>;
+declare const _default: React.NamedExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
 export default _default;

package/dist/TableContext/TableContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TableContextValue } from './TableContext.types';
 declare const TableContext: import("react").Context<TableContextValue>;
 export default TableContext;

package/dist/TableMenuButton/TableMenuButton.types.d.ts

@@ -1,9 +1,9 @@
 import { ReactElement } from 'react';
-import { PopperPlacementType } from '@mui/base/Popper/Popper.types';
 import { PdgButtonProps } from '@pdg/react-component';
+import { PopperPlacementType, MenuListProps } from '@mui/material';
 export interface TableMenuButtonProps extends Omit<PdgButtonProps, 'size' | 'onClick'> {
     placement?: PopperPlacementType;
     inModal?: boolean;
     zIndex?: number;
-    menuList: ReactElement;
+    menuList: ReactElement<MenuListProps>;
 }

package/dist/assets/output-DqXiI6rW.css

@@ -0,0 +1,15 @@
+.simplebar-track.simplebar-vertical {
+  width: 8px !important;
+}
+.simplebar-track.simplebar-vertical .simplebar-scrollbar.simplebar-visible:before {
+  opacity: 0.3 !important;
+}
+
+.Table .TableHead .TableHeadRow th {
+  position: relative;
+  transform: translateY(-100%);
+}
+.Table.sticky-header .TableHead .TableHeadRow th {
+  position: sticky;
+  transform: none;
+}

package/dist/index.esm.js

@@ -1,30 +1,4 @@
-import React,{createContext,useContext,useMemo,useCallback,useState,useEffect,useRef,useLayoutEffect,useId}from'react';import classNames from'classnames';import {styled,TableRow,lighten,TableCell,Box,Tooltip,Checkbox,Stack,Pagination,useTheme,TableHead,TableBody,Icon,TableFooter,Paper,Table as Table$1,Grid,Popper,Grow,ClickAwayListener,IconButton}from'@mui/material';import {useResizeDetector}from'react-resize-detector';import {useSortable,sortableKeyboardCoordinates,arrayMove,SortableContext,verticalListSortingStrategy}from'@dnd-kit/sortable';import dayjs from'dayjs';import {personalNoAutoDash,companyNoAutoDash,telNoAutoDash,numberFormat,notEmpty,equal,empty}from'@pdg/util';import {useAutoUpdateLayoutState}from'@pdg/react-hook';import {useSensors,useSensor,MouseSensor,TouchSensor,KeyboardSensor,DndContext,closestCenter}from'@dnd-kit/core';import SimpleBar from'simplebar-react';import'simplebar-react/dist/simplebar.min.css';import {v4}from'uuid';import {Search,SearchGroup,FormHidden}from'@pdg/react-form';import {PdgButton,PdgIcon}from'@pdg/react-component';import {CopyToClipboard}from'react-copy-to-clipboard';function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}var css_248z = ".simplebar-track.simplebar-vertical {\n  width: 8px !important;\n}\n.simplebar-track.simplebar-vertical .simplebar-scrollbar.simplebar-visible:before {\n  opacity: 0.3 !important;\n}\n\n.Table .TableHead .TableHeadRow th {\n  position: relative;\n  transform: translateY(-100%);\n}\n.Table.sticky-header .TableHead .TableHeadRow th {\n  position: sticky;\n  transform: none;\n}";
-styleInject(css_248z);/******************************************************************************
+import React,{createContext,useContext,useMemo,useCallback,useState,useEffect,useRef,useLayoutEffect,useId}from'react';import classNames from'classnames';import {styled,TableRow,lighten,TableCell,Box,Tooltip,Checkbox,Stack,Pagination,useTheme,TableHead,TableBody,Icon,TableFooter,Paper,Table as Table$1,Grid,Popper,Grow,ClickAwayListener,IconButton}from'@mui/material';import {useResizeDetector}from'react-resize-detector';import {useSortable,sortableKeyboardCoordinates,arrayMove,SortableContext,verticalListSortingStrategy}from'@dnd-kit/sortable';import dayjs from'dayjs';import {personalNoAutoDash,companyNoAutoDash,telNoAutoDash,numberFormat,notEmpty,equal,empty}from'@pdg/util';import {useAutoUpdateLayoutState}from'@pdg/react-hook';import {useSensors,useSensor,MouseSensor,TouchSensor,KeyboardSensor,DndContext,closestCenter}from'@dnd-kit/core';import SimpleBar from'simplebar-react';import'simplebar-react/dist/simplebar.min.css';import {v4}from'uuid';import {Search,SearchGroup,FormHidden}from'@pdg/react-form';import {PdgButton,PdgIcon,PdgCopyToClipboard}from'@pdg/react-component';/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -38,7 +12,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
 
 var __assign = function() {
@@ -772,7 +746,7 @@ var Table = React.forwardRef(function (_a, ref) {
     var className = _a.className, initStyle = _a.style, sx = _a.sx, caption = _a.caption, topHeadRows = _a.topHeadRows, initColumns = _a.columns, initItems = _a.items, initPaging = _a.paging, _b = _a.pagingAlign, pagingAlign = _b === void 0 ? 'center' : _b, _c = _a.defaultAlign, defaultAlign = _c === void 0 ? 'left' : _c, defaultEllipsis = _a.defaultEllipsis, initStickyHeader = _a.stickyHeader, height = _a.height, minHeight = _a.minHeight, maxHeight = _a.maxHeight, fullHeight = _a.fullHeight, showOddColor = _a.showOddColor, showEvenColor = _a.showEvenColor, _d = _a.cellPadding, cellPadding = _d === void 0 ? 13 : _d, footer = _a.footer, noData = _a.noData, pagination = _a.pagination, sortable = _a.sortable, onClick = _a.onClick, onGetBodyRowClassName = _a.onGetBodyRowClassName, onGetBodyRowStyle = _a.onGetBodyRowStyle, onGetBodyRowSx = _a.onGetBodyRowSx, onGetBodyColumnClassName = _a.onGetBodyColumnClassName, onGetBodyColumnStyle = _a.onGetBodyColumnStyle, onGetBodyColumnSx = _a.onGetBodyColumnSx, onPageChange = _a.onPageChange, onSortChange = _a.onSortChange, onCheckChange = _a.onCheckChange;
     var localHeaderDataRef = useRef({});
     var localBodyDataRef = useRef({});
-    var updateHeadCheckTimer = useRef();
+    var updateHeadCheckTimer = useRef(undefined);
     var fireOnCheckChangeTimer = useRef({});
     var simpleBarRef = useRef(null);
     var finalColumnsIdRef = useRef([]);
@@ -1276,8 +1250,8 @@ var deHash = function () {
      * ******************************************************************************************************************/
     var _b, _c;
     var className = _a.className, initStyle = _a.style, sx = _a.sx, color = _a.color, hash = _a.hash, stickyHeader = _a.stickyHeader, fullHeight = _a.fullHeight, search = _a.search, table = _a.table, betweenSearchTableComponent = _a.betweenSearchTableComponent, onGetData = _a.onGetData, onRequestHashChange = _a.onRequestHashChange;
-    var searchRef = useRef();
-    var tableRef = useRef();
+    var searchRef = useRef(undefined);
+    var tableRef = useRef(undefined);
     var lastGetDataDataRef = useRef({});
     /********************************************************************************************************************
      * State
@@ -1636,7 +1610,7 @@ var deHash = function () {
      * Render
      * ******************************************************************************************************************/
     return (React.createElement(Grid, { container: true, direction: 'column', spacing: 1, className: classNames('SearchTable', className), style: fullHeight ? __assign(__assign({}, initStyle), { flex: 1, display: 'flex' }) : initStyle, sx: sx },
-        React.createElement(Grid, { item: true, sx: { display: searchInfo.searchGroups ? undefined : 'none' } },
+        React.createElement(Grid, { sx: { display: searchInfo.searchGroups ? undefined : 'none' } },
             React.createElement(Search, __assign({ color: color }, searchInfo.props, { ref: function (commands) {
                     if (searchInfo.ref) {
                         if (typeof searchInfo.ref === 'function') {
@@ -1651,8 +1625,8 @@ var deHash = function () {
                 React.createElement(SearchGroup, { hidden: true },
                     React.createElement(FormHidden, { name: 'page', value: 1 })),
                 searchInfo.searchGroups)),
-        betweenSearchTableComponent && React.createElement(Grid, { item: true }, betweenSearchTableComponent),
-        React.createElement(Grid, { item: true, style: fullHeight ? { flex: 1, display: 'flex', flexDirection: 'column' } : undefined },
+        betweenSearchTableComponent && React.createElement(Grid, null, betweenSearchTableComponent),
+        React.createElement(Grid, { style: fullHeight ? { flex: 1, display: 'flex', flexDirection: 'column' } : undefined },
             React.createElement(Table, __assign({}, tableInfo.props, { stickyHeader: stickyHeader || ((_b = tableInfo.props) === null || _b === void 0 ? void 0 : _b.stickyHeader), fullHeight: fullHeight || ((_c = tableInfo.props) === null || _c === void 0 ? void 0 : _c.fullHeight), ref: function (commands) {
                     if (tableInfo.ref) {
                         if (typeof tableInfo.ref === 'function') {
@@ -1686,7 +1660,7 @@ var TableButton$1 = React.memo(TableButton);var TableMenuButton = React.forwardR
     /********************************************************************************************************************
      * Ref
      * ******************************************************************************************************************/
-    var anchorRef = useRef();
+    var anchorRef = useRef(null);
     /********************************************************************************************************************
      * State
      * ******************************************************************************************************************/
@@ -1979,19 +1953,19 @@ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, temp
             var valueUnderlineStyle = valueUnderline
                 ? { borderBottom: '1px solid #efefef', paddingBottom: 5 }
                 : undefined;
-            return item.type === 'divider' ? (React.createElement(Grid, { key: idx, item: true, xs: 12 },
+            return item.type === 'divider' ? (React.createElement(Grid, { key: idx, size: { xs: 12 } },
                 React.createElement(Stack, { direction: 'row', spacing: 0.5, alignItems: 'center' },
                     item.icon && (React.createElement(PdgIcon, { sx: { color: item.dividerColor || dividerColor }, size: 'small' }, item.icon)),
                     item.label && (React.createElement(Label, { className: classNames(labelClassName, item.labelClassName), style: __assign(__assign({}, item.labelStyle), labelStyle), sx: finalLabelSx }, item.label)),
                     item.dividerLine && (React.createElement(React.Fragment, null, item.icon || item.label ? (React.createElement("div", { style: { flex: 1, paddingLeft: 5 } },
-                        React.createElement(Line, null))) : (React.createElement(Line, null))))))) : (React.createElement(Grid, __assign({ key: idx, item: true }, sizeProps, { className: item.className, style: item.style, sx: item.sx }),
+                        React.createElement(Line, null))) : (React.createElement(Line, null))))))) : (React.createElement(Grid, { key: idx, size: sizeProps, className: item.className, style: item.style, sx: item.sx },
                 React.createElement(Stack, { direction: 'row', spacing: 0.5, alignItems: 'center' },
                     item.icon && (React.createElement(PdgIcon, { sx: { color: finalLabelColor }, size: 'small' }, "CalendarMonth")),
                     React.createElement(Label, { className: classNames(labelClassName, item.labelClassName), style: __assign(__assign({}, item.labelStyle), labelStyle), sx: finalLabelSx }, item.label)),
                 React.createElement(ValueWrap, { className: classNames(valueClassName, item.valueClassName), style: __assign(__assign(__assign({}, valueStyle), item.valueStyle), valueUnderlineStyle), sx: finalValueSx },
                     item.ellipsis || ellipsis ? React.createElement(ValueEllipsis, null, data) : React.createElement(Value, null, data),
                     item.clipboard && notEmpty(copyToClipboardText) && (React.createElement(ValueClipboard, null,
-                        React.createElement(CopyToClipboard, { text: copyToClipboardText, onCopy: onCopyToClipboard ? function () { return onCopyToClipboard(item, copyToClipboardText); } : undefined },
+                        React.createElement(PdgCopyToClipboard, { text: copyToClipboardText, onCopy: onCopyToClipboard ? function () { return onCopyToClipboard(item, copyToClipboardText); } : undefined },
                             React.createElement(ClipboardIconButton, __assign({ size: 'small', color: 'primary' }, item.clipboardProps),
                                 React.createElement(PdgIcon, null, item.clipboardIcon || 'ContentPaste'))))))));
         });

package/dist/index.js

@@ -1,30 +1,4 @@
-'use strict';var React=require('react'),classNames=require('classnames'),material=require('@mui/material'),reactResizeDetector=require('react-resize-detector'),sortable=require('@dnd-kit/sortable'),dayjs=require('dayjs'),util=require('@pdg/util'),reactHook=require('@pdg/react-hook'),core=require('@dnd-kit/core'),SimpleBar=require('simplebar-react');require('simplebar-react/dist/simplebar.min.css');var uuid=require('uuid'),reactForm=require('@pdg/react-form'),reactComponent=require('@pdg/react-component'),reactCopyToClipboard=require('react-copy-to-clipboard');function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}var css_248z = ".simplebar-track.simplebar-vertical {\n  width: 8px !important;\n}\n.simplebar-track.simplebar-vertical .simplebar-scrollbar.simplebar-visible:before {\n  opacity: 0.3 !important;\n}\n\n.Table .TableHead .TableHeadRow th {\n  position: relative;\n  transform: translateY(-100%);\n}\n.Table.sticky-header .TableHead .TableHeadRow th {\n  position: sticky;\n  transform: none;\n}";
-styleInject(css_248z);/******************************************************************************
+'use strict';var React=require('react'),classNames=require('classnames'),material=require('@mui/material'),reactResizeDetector=require('react-resize-detector'),sortable=require('@dnd-kit/sortable'),dayjs=require('dayjs'),util=require('@pdg/util'),reactHook=require('@pdg/react-hook'),core=require('@dnd-kit/core'),SimpleBar=require('simplebar-react');require('simplebar-react/dist/simplebar.min.css');var uuid=require('uuid'),reactForm=require('@pdg/react-form'),reactComponent=require('@pdg/react-component');/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -38,7 +12,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
 
 var __assign = function() {
@@ -772,7 +746,7 @@ var Table = React.forwardRef(function (_a, ref) {
     var className = _a.className, initStyle = _a.style, sx = _a.sx, caption = _a.caption, topHeadRows = _a.topHeadRows, initColumns = _a.columns, initItems = _a.items, initPaging = _a.paging, _b = _a.pagingAlign, pagingAlign = _b === void 0 ? 'center' : _b, _c = _a.defaultAlign, defaultAlign = _c === void 0 ? 'left' : _c, defaultEllipsis = _a.defaultEllipsis, initStickyHeader = _a.stickyHeader, height = _a.height, minHeight = _a.minHeight, maxHeight = _a.maxHeight, fullHeight = _a.fullHeight, showOddColor = _a.showOddColor, showEvenColor = _a.showEvenColor, _d = _a.cellPadding, cellPadding = _d === void 0 ? 13 : _d, footer = _a.footer, noData = _a.noData, pagination = _a.pagination, sortable$1 = _a.sortable, onClick = _a.onClick, onGetBodyRowClassName = _a.onGetBodyRowClassName, onGetBodyRowStyle = _a.onGetBodyRowStyle, onGetBodyRowSx = _a.onGetBodyRowSx, onGetBodyColumnClassName = _a.onGetBodyColumnClassName, onGetBodyColumnStyle = _a.onGetBodyColumnStyle, onGetBodyColumnSx = _a.onGetBodyColumnSx, onPageChange = _a.onPageChange, onSortChange = _a.onSortChange, onCheckChange = _a.onCheckChange;
     var localHeaderDataRef = React.useRef({});
     var localBodyDataRef = React.useRef({});
-    var updateHeadCheckTimer = React.useRef();
+    var updateHeadCheckTimer = React.useRef(undefined);
     var fireOnCheckChangeTimer = React.useRef({});
     var simpleBarRef = React.useRef(null);
     var finalColumnsIdRef = React.useRef([]);
@@ -1276,8 +1250,8 @@ var deHash = function () {
      * ******************************************************************************************************************/
     var _b, _c;
     var className = _a.className, initStyle = _a.style, sx = _a.sx, color = _a.color, hash = _a.hash, stickyHeader = _a.stickyHeader, fullHeight = _a.fullHeight, search = _a.search, table = _a.table, betweenSearchTableComponent = _a.betweenSearchTableComponent, onGetData = _a.onGetData, onRequestHashChange = _a.onRequestHashChange;
-    var searchRef = React.useRef();
-    var tableRef = React.useRef();
+    var searchRef = React.useRef(undefined);
+    var tableRef = React.useRef(undefined);
     var lastGetDataDataRef = React.useRef({});
     /********************************************************************************************************************
      * State
@@ -1636,7 +1610,7 @@ var deHash = function () {
      * Render
      * ******************************************************************************************************************/
     return (React.createElement(material.Grid, { container: true, direction: 'column', spacing: 1, className: classNames('SearchTable', className), style: fullHeight ? __assign(__assign({}, initStyle), { flex: 1, display: 'flex' }) : initStyle, sx: sx },
-        React.createElement(material.Grid, { item: true, sx: { display: searchInfo.searchGroups ? undefined : 'none' } },
+        React.createElement(material.Grid, { sx: { display: searchInfo.searchGroups ? undefined : 'none' } },
             React.createElement(reactForm.Search, __assign({ color: color }, searchInfo.props, { ref: function (commands) {
                     if (searchInfo.ref) {
                         if (typeof searchInfo.ref === 'function') {
@@ -1651,8 +1625,8 @@ var deHash = function () {
                 React.createElement(reactForm.SearchGroup, { hidden: true },
                     React.createElement(reactForm.FormHidden, { name: 'page', value: 1 })),
                 searchInfo.searchGroups)),
-        betweenSearchTableComponent && React.createElement(material.Grid, { item: true }, betweenSearchTableComponent),
-        React.createElement(material.Grid, { item: true, style: fullHeight ? { flex: 1, display: 'flex', flexDirection: 'column' } : undefined },
+        betweenSearchTableComponent && React.createElement(material.Grid, null, betweenSearchTableComponent),
+        React.createElement(material.Grid, { style: fullHeight ? { flex: 1, display: 'flex', flexDirection: 'column' } : undefined },
             React.createElement(Table, __assign({}, tableInfo.props, { stickyHeader: stickyHeader || ((_b = tableInfo.props) === null || _b === void 0 ? void 0 : _b.stickyHeader), fullHeight: fullHeight || ((_c = tableInfo.props) === null || _c === void 0 ? void 0 : _c.fullHeight), ref: function (commands) {
                     if (tableInfo.ref) {
                         if (typeof tableInfo.ref === 'function') {
@@ -1686,7 +1660,7 @@ var TableButton$1 = React.memo(TableButton);var TableMenuButton = React.forwardR
     /********************************************************************************************************************
      * Ref
      * ******************************************************************************************************************/
-    var anchorRef = React.useRef();
+    var anchorRef = React.useRef(null);
     /********************************************************************************************************************
      * State
      * ******************************************************************************************************************/
@@ -1979,19 +1953,19 @@ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, temp
             var valueUnderlineStyle = valueUnderline
                 ? { borderBottom: '1px solid #efefef', paddingBottom: 5 }
                 : undefined;
-            return item.type === 'divider' ? (React.createElement(material.Grid, { key: idx, item: true, xs: 12 },
+            return item.type === 'divider' ? (React.createElement(material.Grid, { key: idx, size: { xs: 12 } },
                 React.createElement(material.Stack, { direction: 'row', spacing: 0.5, alignItems: 'center' },
                     item.icon && (React.createElement(reactComponent.PdgIcon, { sx: { color: item.dividerColor || dividerColor }, size: 'small' }, item.icon)),
                     item.label && (React.createElement(Label, { className: classNames(labelClassName, item.labelClassName), style: __assign(__assign({}, item.labelStyle), labelStyle), sx: finalLabelSx }, item.label)),
                     item.dividerLine && (React.createElement(React.Fragment, null, item.icon || item.label ? (React.createElement("div", { style: { flex: 1, paddingLeft: 5 } },
-                        React.createElement(Line, null))) : (React.createElement(Line, null))))))) : (React.createElement(material.Grid, __assign({ key: idx, item: true }, sizeProps, { className: item.className, style: item.style, sx: item.sx }),
+                        React.createElement(Line, null))) : (React.createElement(Line, null))))))) : (React.createElement(material.Grid, { key: idx, size: sizeProps, className: item.className, style: item.style, sx: item.sx },
                 React.createElement(material.Stack, { direction: 'row', spacing: 0.5, alignItems: 'center' },
                     item.icon && (React.createElement(reactComponent.PdgIcon, { sx: { color: finalLabelColor }, size: 'small' }, "CalendarMonth")),
                     React.createElement(Label, { className: classNames(labelClassName, item.labelClassName), style: __assign(__assign({}, item.labelStyle), labelStyle), sx: finalLabelSx }, item.label)),
                 React.createElement(ValueWrap, { className: classNames(valueClassName, item.valueClassName), style: __assign(__assign(__assign({}, valueStyle), item.valueStyle), valueUnderlineStyle), sx: finalValueSx },
                     item.ellipsis || ellipsis ? React.createElement(ValueEllipsis, null, data) : React.createElement(Value, null, data),
                     item.clipboard && util.notEmpty(copyToClipboardText) && (React.createElement(ValueClipboard, null,
-                        React.createElement(reactCopyToClipboard.CopyToClipboard, { text: copyToClipboardText, onCopy: onCopyToClipboard ? function () { return onCopyToClipboard(item, copyToClipboardText); } : undefined },
+                        React.createElement(reactComponent.PdgCopyToClipboard, { text: copyToClipboardText, onCopy: onCopyToClipboard ? function () { return onCopyToClipboard(item, copyToClipboardText); } : undefined },
                             React.createElement(ClipboardIconButton, __assign({ size: 'small', color: 'primary' }, item.clipboardProps),
                                 React.createElement(reactComponent.PdgIcon, null, item.clipboardIcon || 'ContentPaste'))))))));
         });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pdg/react-table",
   "title": "React Table",
-  "version": "1.0.107",
+  "version": "1.0.108",
   "description": "React Table",
   "type": "module",
   "types": "dist/index.d.ts",
@@ -40,50 +40,49 @@
     "javascript"
   ],
   "peerDependencies": {
-    "@dnd-kit/core": "^6.1.0",
-    "@dnd-kit/sortable": "^8.0.0",
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
-    "@mui/icons-material": "^5.15.17",
-    "@mui/material": "^5.15.17",
-    "@mui/x-date-pickers": "^6.19.7",
-    "@pdg/react-component": "^1.0.25",
-    "@pdg/react-form": "^1.0.128",
-    "@pdg/react-hook": "^1.0.21",
-    "@pdg/util": "^1.0.22",
-    "@tinymce/tinymce-react": "^4.3.2",
-    "@types/react": "^17.0.0 || ^18.0.0",
-    "@types/react-copy-to-clipboard": "^5.0.7",
-    "@types/uuid": "^9.0.8",
-    "classnames": "^2.5.1",
-    "dayjs": "^1.11.11",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-copy-to-clipboard": "^5.1.0",
-    "react-dom": "^17.0.0 || ^18.0.0",
-    "react-number-format": "^5.3.4",
-    "react-resize-detector": "^10.0.1",
-    "simplebar-react": "^3.2.5",
-    "uuid": "^9.0.1"
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^7.0.2",
+    "@mui/material": "^7.0.2",
+    "@mui/x-date-pickers": "^7.28.3",
+    "@pdg/react-component": "^1.0.31",
+    "@pdg/react-form": "^1.0.133",
+    "@pdg/react-hook": "^1.0.26",
+    "@pdg/util": "^1.0.23",
+    "@tinymce/tinymce-react": "^6.1.0",
+    "@types/react": ">=17.0.0",
+    "@types/uuid": "^10.0.0",
+    "classnames": "^2.0.0",
+    "dayjs": "^1.0.0",
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0",
+    "react-number-format": "^5.0.0",
+    "react-resize-detector": "^12.0.0",
+    "simplebar-react": "^3.0.0",
+    "uuid": "^11.0.0"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-commonjs": "^28.0.3",
     "@rollup/plugin-eslint": "^9.0.5",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@typescript-eslint/eslint-plugin": "^7.8.0",
-    "@typescript-eslint/parser": "^7.8.0",
-    "eslint": "8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.1",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "prettier": "^3.2.5",
-    "rollup": "^4.17.2",
-    "rollup-plugin-delete": "^2.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@types/node": "^22.14.0",
+    "@typescript-eslint/eslint-plugin": "^8.29.1",
+    "@typescript-eslint/parser": "^8.29.1",
+    "eslint": "8.57.1",
+    "eslint-config-prettier": "^10.1.2",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prettier": "^5.2.6",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "prettier": "^3.5.3",
+    "rollup": "^4.39.0",
+    "rollup-plugin-delete": "^2.2.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-scss": "^4.0.1",
     "rollup-plugin-typescript2": "^0.36.0",
-    "sass": "^1.77.0",
-    "typescript": "^5.4.5"
+    "sass": "^1.86.3",
+    "typescript": "^5.8.3"
   }
 }