@pdg/react-table 1.0.104 → 1.0.106

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/@types/types.d.ts +2 -2
  2. package/dist/InfoTable/InfoTable.types.d.ts +10 -10
  3. package/dist/SearchTable/SearchTable.types.d.ts +11 -2
  4. package/dist/Table/Table.types.d.ts +29 -29
  5. package/dist/TableBodyCell/TableBodyCell.types.d.ts +4 -4
  6. package/dist/TableBodyRow/TableBodyRow.types.d.ts +4 -4
  7. package/dist/TableCommonCell/TableCommonCell.types.d.ts +2 -2
  8. package/dist/TablePagination/TablePagination.types.d.ts +2 -2
  9. package/dist/index.esm.js +96 -175
  10. package/dist/index.js +96 -175
  11. package/package.json +4 -4
package/dist/@types/types.d.ts CHANGED
@@ -1,11 +1,11 @@
1
1
  import { CSSProperties, ReactNode } from 'react';
2
2
  import { SxProps } from '@mui/system';
3
3
  import { Theme } from '@mui/material/styles';
4
- export interface CommonProps {
4
+ export interface TableCommonProps {
5
5
  children?: ReactNode;
6
6
  className?: string;
7
7
  style?: CSSProperties;
8
8
  }
9
- export interface CommonSxProps extends CommonProps {
9
+ export interface TableCommonSxProps extends TableCommonProps {
10
10
  sx?: SxProps<Theme>;
11
11
  }
package/dist/InfoTable/InfoTable.types.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ReactNode } from 'react';
2
2
  import { BoxProps, GridProps, IconButtonProps, TypographyProps } from '@mui/material';
3
- import { CommonSxProps } from '../@types';
3
+ import { TableCommonSxProps } from '../@types';
4
4
  import { PdgIconProps } from '@pdg/react-component';
5
5
  export interface InfoTableInfo {
6
6
  [key: string]: any;
@@ -19,15 +19,15 @@ export interface InfoTableItem<T = InfoTableInfo> {
19
19
  numberSuffix?: string;
20
20
  dividerColor?: TypographyProps['color'];
21
21
  dividerLine?: boolean;
22
- style?: CommonSxProps['style'];
22
+ style?: TableCommonSxProps['style'];
23
23
  sx?: BoxProps['sx'];
24
24
  labelClassName?: string;
25
25
  labelColor?: TypographyProps['color'];
26
- labelStyle?: CommonSxProps['style'];
26
+ labelStyle?: TableCommonSxProps['style'];
27
27
  labelSx?: BoxProps['sx'];
28
28
  valueClassName?: string;
29
- valueStyle?: CommonSxProps['style'];
30
- valueSx?: CommonSxProps['sx'];
29
+ valueStyle?: TableCommonSxProps['style'];
30
+ valueSx?: TableCommonSxProps['sx'];
31
31
  xs?: number;
32
32
  sm?: number;
33
33
  md?: number;
@@ -60,16 +60,16 @@ export interface InfoTableProps<T = InfoTableInfo> {
60
60
  columnSpacing?: GridProps['spacing'];
61
61
  rowSpacing?: GridProps['spacing'];
62
62
  className?: string;
63
- style?: CommonSxProps['style'];
64
- sx?: CommonSxProps['sx'];
63
+ style?: TableCommonSxProps['style'];
64
+ sx?: TableCommonSxProps['sx'];
65
65
  labelClassName?: string;
66
66
  labelColor?: TypographyProps['color'];
67
- labelStyle?: CommonSxProps['style'];
67
+ labelStyle?: TableCommonSxProps['style'];
68
68
  labelSx?: BoxProps['sx'];
69
69
  dividerColor?: TypographyProps['color'];
70
70
  valueClassName?: string;
71
- valueStyle?: CommonSxProps['style'];
72
- valueSx?: CommonSxProps['sx'];
71
+ valueStyle?: TableCommonSxProps['style'];
72
+ valueSx?: TableCommonSxProps['sx'];
73
73
  ellipsis?: boolean;
74
74
  valueUnderline?: boolean;
75
75
  info: T;
package/dist/SearchTable/SearchTable.types.d.ts CHANGED
@@ -2,7 +2,16 @@ import React from 'react';
2
2
  import { TableProps, TableCommands, TableItem } from '../Table';
3
3
  import { FormValueMap, SearchCommands, SearchProps } from '@pdg/react-form';
4
4
  import { ReactNode } from 'react';
5
- import { CommonSxProps } from '../@types';
5
+ import { TableCommonSxProps } from '../@types';
6
+ export interface SearchInfo {
7
+ ref?: SearchTableSearchProps['ref'];
8
+ searchGroups?: SearchTableSearchProps['searchGroups'];
9
+ props?: Omit<SearchTableSearchProps, 'ref' | 'searchGroups'>;
10
+ }
11
+ export interface TableInfo {
12
+ ref?: SearchTableTableProps['ref'];
13
+ props?: Omit<SearchTableTableProps, 'ref'>;
14
+ }
6
15
  export interface SearchTableData<T = TableItem> {
7
16
  items: TableProps<T>['items'];
8
17
  paging?: TableProps<T>['paging'];
@@ -14,7 +23,7 @@ export interface SearchTableSearchProps extends Omit<SearchProps, 'ref' | 'color
14
23
  export interface SearchTableTableProps<T = TableItem> extends Omit<TableProps<T>, 'ref' | 'items' | 'paging' | 'onPageChange'> {
15
24
  ref?: React.ForwardedRef<TableCommands<T>>;
16
25
  }
17
- export interface SearchTableProps<T = TableItem> extends CommonSxProps {
26
+ export interface SearchTableProps<T = TableItem> extends TableCommonSxProps {
18
27
  color?: SearchProps['color'];
19
28
  hash?: boolean;
20
29
  stickyHeader?: boolean;
package/dist/Table/Table.types.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { CSSProperties, ReactNode } from 'react';
2
2
  import { TableCellProps, TooltipProps } from '@mui/material';
3
3
  import { TablePaginationProps } from '../TablePagination/TablePagination.types';
4
- import { CommonSxProps } from '../@types';
4
+ import { TableCommonSxProps } from '../@types';
5
5
  import { TableTopHeadProps } from '../TableTopHead';
6
6
  /********************************************************************************************************************
7
7
  * TableItem
@@ -37,33 +37,33 @@ export interface TableColumn<T = TableItem> {
37
37
  paddingLeft?: number;
38
38
  paddingRight?: number;
39
39
  head?: {
40
- className?: CommonSxProps['className'];
41
- style?: CommonSxProps['style'];
40
+ className?: TableCommonSxProps['className'];
41
+ style?: TableCommonSxProps['style'];
42
42
  backgroundColor?: CSSProperties['backgroundColor'];
43
- sx?: CommonSxProps['sx'];
44
- onGetClassName?(): CommonSxProps['className'];
45
- onGetStyle?(): CommonSxProps['style'];
46
- onGetSx?(): CommonSxProps['sx'];
43
+ sx?: TableCommonSxProps['sx'];
44
+ onGetClassName?(): TableCommonSxProps['className'];
45
+ onGetStyle?(): TableCommonSxProps['style'];
46
+ onGetSx?(): TableCommonSxProps['sx'];
47
47
  onRender?(): ReactNode;
48
48
  };
49
49
  footer?: {
50
50
  value?: ReactNode;
51
- className?: CommonSxProps['className'];
52
- style?: CommonSxProps['style'];
51
+ className?: TableCommonSxProps['className'];
52
+ style?: TableCommonSxProps['style'];
53
53
  backgroundColor?: CSSProperties['backgroundColor'];
54
- sx?: CommonSxProps['sx'];
55
- onGetClassName?(): CommonSxProps['className'];
56
- onGetStyle?(): CommonSxProps['style'];
57
- onGetSx?(): CommonSxProps['sx'];
54
+ sx?: TableCommonSxProps['sx'];
55
+ onGetClassName?(): TableCommonSxProps['className'];
56
+ onGetStyle?(): TableCommonSxProps['style'];
57
+ onGetSx?(): TableCommonSxProps['sx'];
58
58
  onRender?(): ReactNode;
59
59
  };
60
- className?: CommonSxProps['className'];
61
- style?: CommonSxProps['style'];
60
+ className?: TableCommonSxProps['className'];
61
+ style?: TableCommonSxProps['style'];
62
62
  backgroundColor?: CSSProperties['backgroundColor'];
63
- sx?: CommonSxProps['sx'];
64
- onGetClassName?(item: T, index: number): CommonSxProps['className'];
65
- onGetStyle?(item: T, index: number): CommonSxProps['style'];
66
- onGetSx?(item: T, index: number): CommonSxProps['sx'];
63
+ sx?: TableCommonSxProps['sx'];
64
+ onGetClassName?(item: T, index: number): TableCommonSxProps['className'];
65
+ onGetStyle?(item: T, index: number): TableCommonSxProps['style'];
66
+ onGetSx?(item: T, index: number): TableCommonSxProps['sx'];
67
67
  onHide?(item: T, index: number): boolean;
68
68
  onGetTooltip?(item: T, index: number): ReactNode;
69
69
  onRender?(item: T, index: number): ReactNode;
@@ -77,7 +77,7 @@ export type TableColumns<T = TableItem> = (TableColumn<T> | false | undefined |
77
77
  /********************************************************************************************************************
78
78
  * TableProps
79
79
  * ******************************************************************************************************************/
80
- export interface TableProps<T = TableItem> extends CommonSxProps {
80
+ export interface TableProps<T = TableItem> extends TableCommonSxProps {
81
81
  caption?: ReactNode;
82
82
  topHeadRows?: TableTopHeadProps['rows'];
83
83
  columns?: TableColumns<T>;
@@ -97,18 +97,18 @@ export interface TableProps<T = TableItem> extends CommonSxProps {
97
97
  footer?: boolean;
98
98
  noData?: ReactNode;
99
99
  pagination?: {
100
- className?: CommonSxProps['className'];
101
- style?: CommonSxProps['style'];
102
- sx?: CommonSxProps['sx'];
100
+ className?: TableCommonSxProps['className'];
101
+ style?: TableCommonSxProps['style'];
102
+ sx?: TableCommonSxProps['sx'];
103
103
  };
104
104
  sortable?: boolean;
105
105
  onClick?(item: T, index: number): void;
106
- onGetBodyRowClassName?(item: T, index: number): CommonSxProps['className'] | undefined;
107
- onGetBodyRowStyle?(item: T, index: number): CommonSxProps['style'] | undefined;
108
- onGetBodyRowSx?(item: T, index: number): CommonSxProps['sx'] | undefined;
109
- onGetBodyColumnClassName?(column: TableColumn<T>, item: T, index: number): CommonSxProps['className'] | undefined;
110
- onGetBodyColumnStyle?(column: TableColumn<T>, item: T, index: number): CommonSxProps['style'] | undefined;
111
- onGetBodyColumnSx?(column: TableColumn<T>, item: T, index: number): CommonSxProps['sx'] | undefined;
106
+ onGetBodyRowClassName?(item: T, index: number): TableCommonSxProps['className'] | undefined;
107
+ onGetBodyRowStyle?(item: T, index: number): TableCommonSxProps['style'] | undefined;
108
+ onGetBodyRowSx?(item: T, index: number): TableCommonSxProps['sx'] | undefined;
109
+ onGetBodyColumnClassName?(column: TableColumn<T>, item: T, index: number): TableCommonSxProps['className'] | undefined;
110
+ onGetBodyColumnStyle?(column: TableColumn<T>, item: T, index: number): TableCommonSxProps['style'] | undefined;
111
+ onGetBodyColumnSx?(column: TableColumn<T>, item: T, index: number): TableCommonSxProps['sx'] | undefined;
112
112
  onPageChange?(page: number): void;
113
113
  onSortChange?(items: T[]): void;
114
114
  onCheckChange?(columnId: string, items: T[]): void;
package/dist/TableBodyCell/TableBodyCell.types.d.ts CHANGED
@@ -1,13 +1,13 @@
1
1
  import { TableColumn, TableItem, TableProps } from '../Table/Table.types';
2
- import { CommonSxProps } from '../@types';
2
+ import { TableCommonSxProps } from '../@types';
3
3
  export interface TableBodyCellCommands {
4
4
  setChecked(checked: boolean): void;
5
5
  setCheckDisabled(disabled: boolean): void;
6
6
  }
7
7
  export interface TableBodyCellProps {
8
- className?: CommonSxProps['className'];
9
- style?: CommonSxProps['style'];
10
- sx?: CommonSxProps['sx'];
8
+ className?: TableCommonSxProps['className'];
9
+ style?: TableCommonSxProps['style'];
10
+ sx?: TableCommonSxProps['sx'];
11
11
  index: number;
12
12
  item: TableItem;
13
13
  column: TableColumn;
package/dist/TableBodyRow/TableBodyRow.types.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { TableCellProps, TableRowProps } from '@mui/material';
2
2
  import { TableColumn, TableItem, TableProps } from '../Table';
3
3
  import { TableBodyCellProps } from '../TableBodyCell';
4
- import { CommonSxProps } from '../@types';
4
+ import { TableCommonSxProps } from '../@types';
5
5
  export interface TableBodyRowProps extends Omit<TableRowProps, 'id' | 'onClick'> {
6
6
  id: string | number;
7
7
  index: number;
@@ -12,7 +12,7 @@ export interface TableBodyRowProps extends Omit<TableRowProps, 'id' | 'onClick'>
12
12
  item: TableItem;
13
13
  onClick: TableProps['onClick'];
14
14
  onCheckChange: TableBodyCellProps['onCheckChange'];
15
- onGetColumnClassName?(column: TableColumn, item: TableItem, index: number): CommonSxProps['className'] | undefined;
16
- onGetColumnStyle?(column: TableColumn, item: TableItem, index: number): CommonSxProps['style'] | undefined;
17
- onGetColumnSx?(column: TableColumn, item: TableItem, index: number): CommonSxProps['sx'] | undefined;
15
+ onGetColumnClassName?(column: TableColumn, item: TableItem, index: number): TableCommonSxProps['className'] | undefined;
16
+ onGetColumnStyle?(column: TableColumn, item: TableItem, index: number): TableCommonSxProps['style'] | undefined;
17
+ onGetColumnSx?(column: TableColumn, item: TableItem, index: number): TableCommonSxProps['sx'] | undefined;
18
18
  }
package/dist/TableCommonCell/TableCommonCell.types.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { TableColumn, TableItem, TableProps } from '../Table/Table.types';
2
- import { CommonSxProps } from '../@types';
3
- export interface TableCommonCellProps extends CommonSxProps {
2
+ import { TableCommonSxProps } from '../@types';
3
+ export interface TableCommonCellProps extends TableCommonSxProps {
4
4
  type: 'head' | 'body' | 'footer';
5
5
  column: TableColumn;
6
6
  defaultAlign?: TableProps['defaultAlign'];
package/dist/TablePagination/TablePagination.types.d.ts CHANGED
@@ -1,12 +1,12 @@
1
1
  import { StackProps } from '@mui/material';
2
- import { CommonSxProps } from '../@types';
2
+ import { TableCommonSxProps } from '../@types';
3
3
  export interface TablePaging {
4
4
  current_page: number;
5
5
  per_page: number;
6
6
  last_page: number;
7
7
  total: number;
8
8
  }
9
- export interface TablePaginationProps extends Pick<CommonSxProps, 'className' | 'style' | 'sx'> {
9
+ export interface TablePaginationProps extends Pick<TableCommonSxProps, 'className' | 'style' | 'sx'> {
10
10
  paging: TablePaging;
11
11
  align?: StackProps['alignItems'];
12
12
  onChange?(page: number): void;
package/dist/index.esm.js CHANGED
@@ -1,4 +1,4 @@
1
- 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 {v4}from'uuid';import SimpleBar from'simplebar-react';import'simplebar-react/dist/simplebar.min.css';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) {
1
+ 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) {
2
2
  if ( ref === void 0 ) ref = {};
3
3
  var insertAt = ref.insertAt;
4
4
 
@@ -192,15 +192,16 @@ var TableCommonCell = function (_a) {
192
192
  /********************************************************************************************************************
193
193
  * Memo
194
194
  * ******************************************************************************************************************/
195
- var align = useMemo(function () { return getTableColumnAlign(column, defaultAlign); }, [column, defaultAlign]);
196
- var ellipsis = useMemo(function () {
197
- return type !== 'head' &&
195
+ var _b = useMemo(function () {
196
+ var align = getTableColumnAlign(column, defaultAlign);
197
+ var ellipsis = type !== 'head' &&
198
198
  (column.ellipsis ||
199
199
  (column.type !== 'img' &&
200
200
  column.type !== 'button' &&
201
201
  column.type !== 'buttons' &&
202
202
  (column.ellipsis == null ? !!initDefaultEllipsis : false)));
203
- }, [type, column, initDefaultEllipsis]);
203
+ return { align: align, ellipsis: ellipsis };
204
+ }, [column, defaultAlign, initDefaultEllipsis, type]), align = _b.align, ellipsis = _b.ellipsis;
204
205
  var className = useMemo(function () {
205
206
  var _a, _b, _c, _d, _e, _f;
206
207
  var className;
@@ -548,20 +549,15 @@ var TableBodyRow = function (_a) {
548
549
  var className = _a.className, style = _a.style, id = _a.id, index = _a.index, defaultAlign = _a.defaultAlign, defaultEllipsis = _a.defaultEllipsis, sortable = _a.sortable, columns = _a.columns, item = _a.item, onClick = _a.onClick, onCheckChange = _a.onCheckChange, onGetColumnClassName = _a.onGetColumnClassName, onGetColumnStyle = _a.onGetColumnStyle, onGetColumnSx = _a.onGetColumnSx, props = __rest(_a, ["className", "style", "id", "index", "defaultAlign", "defaultEllipsis", "sortable", "columns", "item", "onClick", "onCheckChange", "onGetColumnClassName", "onGetColumnStyle", "onGetColumnSx"]);
549
550
  var _b = useSortable({ id: id }), attributes = _b.attributes, listeners = _b.listeners, setNodeRef = _b.setNodeRef, transform = _b.transform, transition = _b.transition;
550
551
  /********************************************************************************************************************
551
- * Memo
552
+ * Variable
552
553
  * ******************************************************************************************************************/
553
- var finalStyle = useMemo(function () {
554
- return sortable
555
- ? __assign(__assign({}, style), { transform: CSS.Transform.toString(transform), transition: transition }) : style;
556
- }, [sortable, style, transform, transition]);
557
- var sortableProps = useMemo(function () {
558
- return sortable
559
- ? __assign(__assign({ ref: setNodeRef }, attributes), listeners) : {};
560
- }, [attributes, listeners, setNodeRef, sortable]);
554
+ var sortableProps = sortable
555
+ ? __assign(__assign({ ref: setNodeRef }, attributes), listeners) : {};
561
556
  /********************************************************************************************************************
562
557
  * Render
563
558
  * ******************************************************************************************************************/
564
- return (React.createElement(StyledBodyRow, __assign({ className: classNames('TableBodyRow', className), style: finalStyle }, props, sortableProps), columns.map(function (column, columnIdx) { return (React.createElement(TableBodyCell, { className: onGetColumnClassName ? onGetColumnClassName(column, item, index) : undefined, sx: onGetColumnSx ? onGetColumnSx(column, item, index) : undefined, style: onGetColumnStyle ? onGetColumnStyle(column, item, index) : undefined, key: columnIdx, index: index, item: item, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, column: column, onClick: onClick, onCheckChange: onCheckChange })); })));
559
+ return (React.createElement(StyledBodyRow, __assign({ className: classNames('TableBodyRow', className), style: sortable
560
+ ? __assign(__assign({}, style), { transform: CSS.Transform.toString(transform), transition: transition }) : style }, props, sortableProps), columns.map(function (column, columnIdx) { return (React.createElement(TableBodyCell, { className: onGetColumnClassName ? onGetColumnClassName(column, item, index) : undefined, sx: onGetColumnSx ? onGetColumnSx(column, item, index) : undefined, style: onGetColumnStyle ? onGetColumnStyle(column, item, index) : undefined, key: columnIdx, index: index, item: item, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, column: column, onClick: onClick, onCheckChange: onCheckChange })); })));
565
561
  };var TableFooterCell = function (_a) {
566
562
  /********************************************************************************************************************
567
563
  * Memo
@@ -635,7 +631,6 @@ var TableBodyRow = function (_a) {
635
631
  /********************************************************************************************************************
636
632
  * Memo
637
633
  * ******************************************************************************************************************/
638
- var style = useMemo(function () { return (top !== undefined ? { top: top } : undefined); }, [top]);
639
634
  var data = useMemo(function () {
640
635
  var _a, _b;
641
636
  if (column.type === 'check') {
@@ -661,7 +656,7 @@ var TableBodyRow = function (_a) {
661
656
  /********************************************************************************************************************
662
657
  * Render
663
658
  * ******************************************************************************************************************/
664
- return (React.createElement(TableCommonCell, { type: 'head', className: 'TableHeadCell', style: style, column: column, defaultAlign: defaultAlign }, data));
659
+ return (React.createElement(TableCommonCell, { type: 'head', className: 'TableHeadCell', style: top !== undefined ? { top: top } : undefined, column: column, defaultAlign: defaultAlign }, data));
665
660
  };var BottomLine = styled('div')(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n height: 1px;\n position: absolute;\n left: 3px;\n right: 3px;\n bottom: 0;\n"], ["\n height: 1px;\n position: absolute;\n left: 3px;\n right: 3px;\n bottom: 0;\n"])));
666
661
  var TableTopHead = function (_a) {
667
662
  /********************************************************************************************************************
@@ -690,10 +685,6 @@ var TableTopHead = function (_a) {
690
685
  /********************************************************************************************************************
691
686
  * Function
692
687
  * ******************************************************************************************************************/
693
- var captionRow = useMemo(function () {
694
- return !!caption && (React.createElement(TableTopHeadCaptionRow, { ref: captionRef, className: 'TableTopHeadCaptionRow' },
695
- React.createElement(TableCell, { colSpan: columns.length }, caption)));
696
- }, [caption, columns]);
697
688
  var makeRowCells = useCallback(function (row, top) {
698
689
  var totalColumns = 0;
699
690
  var cells = row
@@ -718,6 +709,11 @@ var TableTopHead = function (_a) {
718
709
  var top = (captionHeight || 0) + (row1Height || 0) + (row2Height || 0) + (row3Height || 0);
719
710
  return (React.createElement(TableRow, null, columns.map(function (column, idx) { return (React.createElement(TableHeadCell, { key: idx, column: column, defaultAlign: defaultAlign, top: top, onCheckChange: onCheckChange })); })));
720
711
  }, [captionHeight, columns, defaultAlign, onCheckChange, row1Height, row2Height, row3Height]);
712
+ /********************************************************************************************************************
713
+ * Variable
714
+ * ******************************************************************************************************************/
715
+ var captionRow = !!caption && (React.createElement(TableTopHeadCaptionRow, { ref: captionRef, className: 'TableTopHeadCaptionRow' },
716
+ React.createElement(TableCell, { colSpan: columns.length }, caption)));
721
717
  /********************************************************************************************************************
722
718
  * Render
723
719
  * ******************************************************************************************************************/
@@ -760,7 +756,12 @@ var TableTopHead = function (_a) {
760
756
  columnRow));
761
757
  }
762
758
  };
763
- var templateObject_1$1;function columnFilter(v) {
759
+ var templateObject_1$1;var makeSortableItems = function (items) {
760
+ return items === null || items === void 0 ? void 0 : items.map(function (_a, index) {
761
+ var id = _a.id, item = __rest(_a, ["id"]);
762
+ return __assign({ id: id == null ? "".concat(v4(), "_").concat(index) : id }, item);
763
+ });
764
+ };function columnFilter(v) {
764
765
  return v !== undefined && v !== null && v !== false;
765
766
  }
766
767
  var _columnId = 0;
@@ -850,12 +851,6 @@ var Table = React.forwardRef(function (_a, ref) {
850
851
  /********************************************************************************************************************
851
852
  * Function
852
853
  * ******************************************************************************************************************/
853
- var makeSortableItems = useCallback(function (items) {
854
- return items === null || items === void 0 ? void 0 : items.map(function (_a, index) {
855
- var id = _a.id, item = __rest(_a, ["id"]);
856
- return __assign({ id: id == null ? "".concat(v4(), "_").concat(index) : id }, item);
857
- });
858
- }, []);
859
854
  var getFinalColumnId = useCallback(function (column) {
860
855
  if (finalColumns && finalColumnsIdRef.current) {
861
856
  var idx = finalColumns.indexOf(column);
@@ -1066,18 +1061,7 @@ var Table = React.forwardRef(function (_a, ref) {
1066
1061
  ref.current = commands;
1067
1062
  }
1068
1063
  }
1069
- }, [
1070
- ref,
1071
- columns,
1072
- items,
1073
- paging,
1074
- makeSortableItems,
1075
- setColumns,
1076
- setItems,
1077
- setPaging,
1078
- getCheckedItems,
1079
- simpleBarScrollToTop,
1080
- ]);
1064
+ }, [ref, columns, items, paging, setColumns, setItems, setPaging, getCheckedItems, simpleBarScrollToTop]);
1081
1065
  /********************************************************************************************************************
1082
1066
  * Event Handler
1083
1067
  * ******************************************************************************************************************/
@@ -1184,67 +1168,29 @@ var Table = React.forwardRef(function (_a, ref) {
1184
1168
  /********************************************************************************************************************
1185
1169
  * Memo
1186
1170
  * ******************************************************************************************************************/
1187
- var tableContextValue = useMemo(function () { return ({
1188
- menuOpen: menuOpen,
1189
- openMenuId: openMenuId,
1190
- setMenuOpen: TableContextSetMenuOpen,
1191
- setItemColumnChecked: TableContextSetItemColumnChecked,
1192
- setItemColumnCheckDisabled: TableContextSetItemColumnCheckDisabled,
1193
- setItemColumnCommands: TableContextSetItemColumnCommands,
1194
- setHeadColumnChecked: TableContextSetHeadColumnChecked,
1195
- setHeadColumnCommands: TableContextSetHeadColumnCommands,
1196
- }); }, [
1197
- TableContextSetHeadColumnChecked,
1198
- TableContextSetHeadColumnCommands,
1199
- TableContextSetItemColumnCheckDisabled,
1200
- TableContextSetItemColumnChecked,
1201
- TableContextSetItemColumnCommands,
1202
- TableContextSetMenuOpen,
1203
- menuOpen,
1204
- openMenuId,
1205
- ]);
1206
- var isNoData = useMemo(function () { return !!sortableItems && sortableItems.length <= 0; }, [sortableItems]);
1207
- var finalPagingHeight = useMemo(function () { return (paging && paging.total > 0 ? pagingHeight || 0 : 0); }, [paging, pagingHeight]);
1208
- var stickyHeader = useMemo(function () { return !isNoData && initStickyHeader; }, [initStickyHeader, isNoData]);
1209
- var style = useMemo(function () {
1210
- if (fullHeight) {
1211
- return __assign(__assign({ width: '100%' }, initStyle), { flex: 1, justifyContent: 'flex-end', height: '100%', display: 'flex', flexDirection: 'column', position: 'relative' });
1212
- }
1213
- else {
1214
- return __assign({ width: '100%' }, initStyle);
1215
- }
1216
- }, [initStyle, fullHeight]);
1217
- var simpleBarStyle = useMemo(function () {
1218
- if (fullHeight) {
1219
- return {
1220
- height: (containerHeight || 0) - (finalPagingHeight || 0) - 1,
1221
- flex: 1,
1222
- position: 'absolute',
1223
- top: 0,
1224
- left: 0,
1225
- right: 0,
1226
- marginBottom: finalPagingHeight || 0,
1227
- };
1228
- }
1229
- else {
1230
- return { height: height, minHeight: minHeight, maxHeight: maxHeight, marginBottom: -1 };
1231
- }
1232
- }, [fullHeight, containerHeight, finalPagingHeight, height, minHeight, maxHeight]);
1233
- var tableStyle = useMemo(function () {
1234
- if (fullHeight && isNoData) {
1235
- return { flex: 1, height: (containerHeight || 0) - finalPagingHeight - 2 };
1236
- }
1237
- }, [fullHeight, isNoData, containerHeight, finalPagingHeight]);
1238
- var pagingStyle = useMemo(function () {
1239
- var style = { padding: '13px 0', borderTop: '1px solid rgba(224, 224, 224, 1)' };
1240
- if (fullHeight) {
1241
- return __assign({ position: 'sticky' }, style);
1242
- }
1243
- return style;
1244
- }, [fullHeight]);
1245
- var tableTopHead = useMemo(function () {
1246
- return finalColumns && (React.createElement(TableTopHead, { caption: caption, rows: topHeadRows, columns: finalColumns, defaultAlign: defaultAlign, onCheckChange: handleHeadCheckChange }));
1247
- }, [caption, defaultAlign, finalColumns, handleHeadCheckChange, topHeadRows]);
1171
+ var isNoData = !!sortableItems && sortableItems.length <= 0;
1172
+ var finalPagingHeight = paging && paging.total > 0 ? pagingHeight || 0 : 0;
1173
+ var stickyHeader = !isNoData && initStickyHeader;
1174
+ var style = fullHeight
1175
+ ? __assign(__assign({ width: '100%' }, initStyle), { flex: 1, justifyContent: 'flex-end', height: '100%', display: 'flex', flexDirection: 'column', position: 'relative' }) : __assign({ width: '100%' }, initStyle);
1176
+ var simpleBarStyle = fullHeight
1177
+ ? {
1178
+ height: (containerHeight || 0) - (finalPagingHeight || 0) - 1,
1179
+ flex: 1,
1180
+ position: 'absolute',
1181
+ top: 0,
1182
+ left: 0,
1183
+ right: 0,
1184
+ marginBottom: finalPagingHeight || 0,
1185
+ }
1186
+ : { height: height, minHeight: minHeight, maxHeight: maxHeight, marginBottom: -1 };
1187
+ var tableStyle = fullHeight && isNoData ? { flex: 1, height: (containerHeight || 0) - finalPagingHeight - 2 } : undefined;
1188
+ // pageStyle
1189
+ var pagingStyle = { padding: '13px 0', borderTop: '1px solid rgba(224, 224, 224, 1)' };
1190
+ if (fullHeight) {
1191
+ pagingStyle.position = 'sticky';
1192
+ }
1193
+ var tableTopHead = finalColumns && (React.createElement(TableTopHead, { caption: caption, rows: topHeadRows, columns: finalColumns, defaultAlign: defaultAlign, onCheckChange: handleHeadCheckChange }));
1248
1194
  var tableBody = useMemo(function () {
1249
1195
  return finalColumns && (React.createElement(TableBody, null, sortableItems ? (sortableItems.length > 0 ? (React.createElement(SortableContext, { items: sortableItems, strategy: verticalListSortingStrategy }, sortableItems.map(function (item, idx) { return (React.createElement(TableBodyRow, { key: item.id, className: classNames(!!showOddColor && 'odd-color', !!showEvenColor && 'even-color', onGetBodyRowClassName ? onGetBodyRowClassName(item, idx) : undefined), style: onGetBodyRowStyle ? onGetBodyRowStyle(item, idx) : undefined, sx: onGetBodyRowSx ? onGetBodyRowSx(item, idx) : undefined, onGetColumnClassName: onGetBodyColumnClassName, onGetColumnStyle: onGetBodyColumnStyle, onGetColumnSx: onGetBodyColumnSx, hover: true, id: item.id, index: idx, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, sortable: sortable, columns: finalColumns, item: item, onClick: onClick, onCheckChange: handleBodyCheckChange })); }))) : (React.createElement(StyledBodyRow$1, null,
1250
1196
  React.createElement(TableCell, { colSpan: finalColumns.length, style: { flex: 1 } }, noData ? (noData) : (React.createElement(StyledNoDataDiv, null,
@@ -1275,27 +1221,19 @@ var Table = React.forwardRef(function (_a, ref) {
1275
1221
  footer && (React.createElement(TableFooter, null,
1276
1222
  React.createElement(TableRow, null, finalColumns.map(function (column, idx) { return (React.createElement(TableFooterCell, { key: idx, column: column, defaultAlign: defaultAlign })); }))));
1277
1223
  }, [defaultAlign, finalColumns, footer, isNoData]);
1278
- var tablePaging = useMemo(function () {
1279
- return finalColumns &&
1280
- paging &&
1281
- paging.total > 0 && (React.createElement(Stack, { ref: fullHeight ? pagingHeightResizeDetector : undefined, alignItems: pagingAlign, style: pagingStyle },
1282
- React.createElement(TablePagination, { className: pagination === null || pagination === void 0 ? void 0 : pagination.className, style: pagination === null || pagination === void 0 ? void 0 : pagination.style, sx: pagination === null || pagination === void 0 ? void 0 : pagination.sx, paging: paging, align: pagingAlign, onChange: handlePageChange })));
1283
- }, [
1284
- finalColumns,
1285
- fullHeight,
1286
- handlePageChange,
1287
- pagination === null || pagination === void 0 ? void 0 : pagination.className,
1288
- pagination === null || pagination === void 0 ? void 0 : pagination.style,
1289
- pagination === null || pagination === void 0 ? void 0 : pagination.sx,
1290
- paging,
1291
- pagingAlign,
1292
- pagingHeightResizeDetector,
1293
- pagingStyle,
1294
- ]);
1295
1224
  /********************************************************************************************************************
1296
1225
  * Render
1297
1226
  * ******************************************************************************************************************/
1298
- return finalColumns ? (React.createElement(TableContextProvider, { value: tableContextValue },
1227
+ return finalColumns ? (React.createElement(TableContextProvider, { value: {
1228
+ menuOpen: menuOpen,
1229
+ openMenuId: openMenuId,
1230
+ setMenuOpen: TableContextSetMenuOpen,
1231
+ setItemColumnChecked: TableContextSetItemColumnChecked,
1232
+ setItemColumnCheckDisabled: TableContextSetItemColumnCheckDisabled,
1233
+ setItemColumnCommands: TableContextSetItemColumnCommands,
1234
+ setHeadColumnChecked: TableContextSetHeadColumnChecked,
1235
+ setHeadColumnCommands: TableContextSetHeadColumnCommands,
1236
+ } },
1299
1237
  React.createElement(Paper, { ref: fullHeight ? containerHeightDetector : undefined, className: classNames('Table', className, !!stickyHeader && 'sticky-header', !!fullHeight && 'full-height', !!showOddColor && 'odd-color', !!showEvenColor && 'even-color', !!sortable && 'sortable'), variant: 'outlined', style: style, sx: sx },
1300
1238
  React.createElement(SimpleBar, { ref: simpleBarRef, style: simpleBarStyle },
1301
1239
  React.createElement(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd },
@@ -1303,8 +1241,36 @@ var Table = React.forwardRef(function (_a, ref) {
1303
1241
  tableTopHead,
1304
1242
  tableBody,
1305
1243
  tableFooter))),
1306
- tablePaging))) : null;
1307
- });var SearchTable = React.forwardRef(function (_a, ref) {
1244
+ finalColumns && paging && paging.total > 0 && (React.createElement(Stack, { ref: fullHeight ? pagingHeightResizeDetector : undefined, alignItems: pagingAlign, style: pagingStyle },
1245
+ React.createElement(TablePagination, { className: pagination === null || pagination === void 0 ? void 0 : pagination.className, style: pagination === null || pagination === void 0 ? void 0 : pagination.style, sx: pagination === null || pagination === void 0 ? void 0 : pagination.sx, paging: paging, align: pagingAlign, onChange: handlePageChange })))))) : null;
1246
+ });var getSearchInfo = function (search) {
1247
+ var searchInfo = {};
1248
+ if (search) {
1249
+ var ref = search.ref, searchGroups = search.searchGroups, props = __rest(search, ["ref", "searchGroups"]);
1250
+ searchInfo.ref = ref;
1251
+ searchInfo.searchGroups = searchGroups;
1252
+ searchInfo.props = props;
1253
+ }
1254
+ return searchInfo;
1255
+ };
1256
+ var getTableInfo = function (table) {
1257
+ var tableInfo = {};
1258
+ if (table) {
1259
+ var ref = table.ref, props = __rest(table, ["ref"]);
1260
+ tableInfo.ref = ref;
1261
+ tableInfo.props = props;
1262
+ }
1263
+ return tableInfo;
1264
+ };
1265
+ var deHash = function () {
1266
+ var values = {};
1267
+ var hash = window.location.hash.substring(1);
1268
+ hash.replace(/([^=&]+)=([^&]*)/g, function (substring, key, value) {
1269
+ values[decodeURIComponent(key)] = decodeURIComponent(value);
1270
+ return substring;
1271
+ });
1272
+ return values;
1273
+ };var SearchTable = React.forwardRef(function (_a, ref) {
1308
1274
  /********************************************************************************************************************
1309
1275
  * Ref
1310
1276
  * ******************************************************************************************************************/
@@ -1313,28 +1279,6 @@ var Table = React.forwardRef(function (_a, ref) {
1313
1279
  var searchRef = useRef();
1314
1280
  var tableRef = useRef();
1315
1281
  var lastGetDataDataRef = useRef({});
1316
- /********************************************************************************************************************
1317
- * Function
1318
- * ******************************************************************************************************************/
1319
- var getSearchInfo = useCallback(function (search) {
1320
- var searchInfo = {};
1321
- if (search) {
1322
- var ref_1 = search.ref, searchGroups = search.searchGroups, props = __rest(search, ["ref", "searchGroups"]);
1323
- searchInfo.ref = ref_1;
1324
- searchInfo.searchGroups = searchGroups;
1325
- searchInfo.props = props;
1326
- }
1327
- return searchInfo;
1328
- }, []);
1329
- var getTableInfo = useCallback(function (table) {
1330
- var tableInfo = {};
1331
- if (table) {
1332
- var ref_2 = table.ref, props = __rest(table, ["ref"]);
1333
- tableInfo.ref = ref_2;
1334
- tableInfo.props = props;
1335
- }
1336
- return tableInfo;
1337
- }, []);
1338
1282
  /********************************************************************************************************************
1339
1283
  * State
1340
1284
  * ******************************************************************************************************************/
@@ -1352,7 +1296,6 @@ var Table = React.forwardRef(function (_a, ref) {
1352
1296
  else {
1353
1297
  setSearchInfo(getSearchInfo(search));
1354
1298
  }
1355
- // eslint-disable-next-line react-hooks/exhaustive-deps
1356
1299
  }, [search]);
1357
1300
  /********************************************************************************************************************
1358
1301
  * tableInfo
@@ -1366,7 +1309,6 @@ var Table = React.forwardRef(function (_a, ref) {
1366
1309
  else {
1367
1310
  setTableInfo(getTableInfo(table));
1368
1311
  }
1369
- // eslint-disable-next-line react-hooks/exhaustive-deps
1370
1312
  }, [table]);
1371
1313
  /********************************************************************************************************************
1372
1314
  * Function
@@ -1377,15 +1319,6 @@ var Table = React.forwardRef(function (_a, ref) {
1377
1319
  onGetData(data).then(setTableData);
1378
1320
  }
1379
1321
  }, [onGetData]);
1380
- var deHash = useCallback(function () {
1381
- var values = {};
1382
- var hash = window.location.hash.substring(1);
1383
- hash.replace(/([^=&]+)=([^&]*)/g, function (substring, key, value) {
1384
- values[decodeURIComponent(key)] = decodeURIComponent(value);
1385
- return substring;
1386
- });
1387
- return values;
1388
- }, []);
1389
1322
  var hashToSearchValue = useCallback(function () {
1390
1323
  var commands = searchRef.current;
1391
1324
  if (commands) {
@@ -1509,7 +1442,7 @@ var Table = React.forwardRef(function (_a, ref) {
1509
1442
  });
1510
1443
  return commands.getAllFormValue();
1511
1444
  }
1512
- }, [searchRef, deHash]);
1445
+ }, [searchRef]);
1513
1446
  /********************************************************************************************************************
1514
1447
  * Commands
1515
1448
  * ******************************************************************************************************************/
@@ -1699,21 +1632,10 @@ var Table = React.forwardRef(function (_a, ref) {
1699
1632
  }
1700
1633
  }
1701
1634
  }, [searchRef, hash, hashChange, getData, isFirstSearchSubmit]);
1702
- /********************************************************************************************************************
1703
- * Memo
1704
- * ******************************************************************************************************************/
1705
- var styles = useMemo(function () {
1706
- return fullHeight
1707
- ? {
1708
- containerStyle: __assign(__assign({}, initStyle), { flex: 1, display: 'flex' }),
1709
- tableContainerStyle: { flex: 1, display: 'flex', flexDirection: 'column' },
1710
- }
1711
- : { containerStyle: initStyle };
1712
- }, [initStyle, fullHeight]);
1713
1635
  /********************************************************************************************************************
1714
1636
  * Render
1715
1637
  * ******************************************************************************************************************/
1716
- return (React.createElement(Grid, { container: true, direction: 'column', spacing: 1, className: classNames('SearchTable', className), style: styles.containerStyle, sx: sx },
1638
+ 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 },
1717
1639
  React.createElement(Grid, { item: true, sx: { display: searchInfo.searchGroups ? undefined : 'none' } },
1718
1640
  React.createElement(Search, __assign({ color: color }, searchInfo.props, { ref: function (commands) {
1719
1641
  if (searchInfo.ref) {
@@ -1730,7 +1652,7 @@ var Table = React.forwardRef(function (_a, ref) {
1730
1652
  React.createElement(FormHidden, { name: 'page', value: 1 })),
1731
1653
  searchInfo.searchGroups)),
1732
1654
  betweenSearchTableComponent && React.createElement(Grid, { item: true }, betweenSearchTableComponent),
1733
- React.createElement(Grid, { item: true, style: styles.tableContainerStyle },
1655
+ React.createElement(Grid, { item: true, style: fullHeight ? { flex: 1, display: 'flex', flexDirection: 'column' } : undefined },
1734
1656
  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) {
1735
1657
  if (tableInfo.ref) {
1736
1658
  if (typeof tableInfo.ref === 'function') {
@@ -1769,11 +1691,6 @@ var TableButton$1 = React.memo(TableButton);var TableMenuButton = React.forwardR
1769
1691
  * State
1770
1692
  * ******************************************************************************************************************/
1771
1693
  var _f = useState(false), open = _f[0], setOpen = _f[1];
1772
- /********************************************************************************************************************
1773
- * Memo
1774
- * ******************************************************************************************************************/
1775
- var icon = useMemo(function () { return (!startIcon && !children ? 'MoreVert' : undefined); }, [startIcon, children]);
1776
- var sx = useMemo(function () { return (__assign({ minWidth: 0, pl: !children ? 0.7 : icon || startIcon ? 0.7 : variant === 'text' ? 1.2 : 0.7 }, initSx)); }, [children, icon, initSx, startIcon, variant]);
1777
1694
  /********************************************************************************************************************
1778
1695
  * Effect
1779
1696
  * ******************************************************************************************************************/
@@ -1827,6 +1744,10 @@ var TableButton$1 = React.memo(TableButton);var TableMenuButton = React.forwardR
1827
1744
  onClick: handleClose,
1828
1745
  });
1829
1746
  }, [buttonId, handleClose, handleListKeyDown, menuId, menuList, open]);
1747
+ /********************************************************************************************************************
1748
+ * Variable
1749
+ * ******************************************************************************************************************/
1750
+ var icon = !startIcon && !children ? 'MoreVert' : undefined;
1830
1751
  /********************************************************************************************************************
1831
1752
  * Render
1832
1753
  * ******************************************************************************************************************/
@@ -1841,11 +1762,11 @@ var TableButton$1 = React.memo(TableButton);var TableMenuButton = React.forwardR
1841
1762
  }
1842
1763
  }
1843
1764
  anchorRef.current = r;
1844
- }, id: buttonId, variant: variant, "aria-controls": open ? menuId : undefined, "aria-expanded": open ? 'true' : undefined, "aria-haspopup": 'true', className: classNames(className, 'TableMenuButton'), type: 'button', size: 'small', sx: sx, color: color, startIcon: icon, onClick: handleClick }, props), children),
1765
+ }, id: buttonId, variant: variant, "aria-controls": open ? menuId : undefined, "aria-expanded": open ? 'true' : undefined, "aria-haspopup": 'true', className: classNames(className, 'TableMenuButton'), type: 'button', size: 'small', sx: __assign({ minWidth: 0, pl: !children ? 0.7 : icon || startIcon ? 0.7 : variant === 'text' ? 1.2 : 0.7 }, initSx), color: color, startIcon: icon, onClick: handleClick }, props), children),
1845
1766
  React.createElement(Popper, { className: 'TableMenuButton-Popper', open: open, anchorEl: anchorRef.current, role: undefined, placement: placement, transition: true, style: { zIndex: inModal ? (zIndex === undefined ? 1301 : zIndex) : zIndex } }, function (_a) {
1846
1767
  var TransitionProps = _a.TransitionProps, placement = _a.placement;
1847
1768
  var placements = placement.split('-');
1848
- var transformOrigin = '';
1769
+ var transformOrigin;
1849
1770
  if (placements[0] === 'left') {
1850
1771
  transformOrigin = 'right';
1851
1772
  // if (placements.length > 1) {
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- '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'),uuid=require('uuid'),SimpleBar=require('simplebar-react');require('simplebar-react/dist/simplebar.min.css');var reactForm=require('@pdg/react-form'),reactComponent=require('@pdg/react-component'),reactCopyToClipboard=require('react-copy-to-clipboard');function styleInject(css, ref) {
1
+ '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) {
2
2
  if ( ref === void 0 ) ref = {};
3
3
  var insertAt = ref.insertAt;
4
4
 
@@ -192,15 +192,16 @@ var TableCommonCell = function (_a) {
192
192
  /********************************************************************************************************************
193
193
  * Memo
194
194
  * ******************************************************************************************************************/
195
- var align = React.useMemo(function () { return getTableColumnAlign(column, defaultAlign); }, [column, defaultAlign]);
196
- var ellipsis = React.useMemo(function () {
197
- return type !== 'head' &&
195
+ var _b = React.useMemo(function () {
196
+ var align = getTableColumnAlign(column, defaultAlign);
197
+ var ellipsis = type !== 'head' &&
198
198
  (column.ellipsis ||
199
199
  (column.type !== 'img' &&
200
200
  column.type !== 'button' &&
201
201
  column.type !== 'buttons' &&
202
202
  (column.ellipsis == null ? !!initDefaultEllipsis : false)));
203
- }, [type, column, initDefaultEllipsis]);
203
+ return { align: align, ellipsis: ellipsis };
204
+ }, [column, defaultAlign, initDefaultEllipsis, type]), align = _b.align, ellipsis = _b.ellipsis;
204
205
  var className = React.useMemo(function () {
205
206
  var _a, _b, _c, _d, _e, _f;
206
207
  var className;
@@ -548,20 +549,15 @@ var TableBodyRow = function (_a) {
548
549
  var className = _a.className, style = _a.style, id = _a.id, index = _a.index, defaultAlign = _a.defaultAlign, defaultEllipsis = _a.defaultEllipsis, sortable$1 = _a.sortable, columns = _a.columns, item = _a.item, onClick = _a.onClick, onCheckChange = _a.onCheckChange, onGetColumnClassName = _a.onGetColumnClassName, onGetColumnStyle = _a.onGetColumnStyle, onGetColumnSx = _a.onGetColumnSx, props = __rest(_a, ["className", "style", "id", "index", "defaultAlign", "defaultEllipsis", "sortable", "columns", "item", "onClick", "onCheckChange", "onGetColumnClassName", "onGetColumnStyle", "onGetColumnSx"]);
549
550
  var _b = sortable.useSortable({ id: id }), attributes = _b.attributes, listeners = _b.listeners, setNodeRef = _b.setNodeRef, transform = _b.transform, transition = _b.transition;
550
551
  /********************************************************************************************************************
551
- * Memo
552
+ * Variable
552
553
  * ******************************************************************************************************************/
553
- var finalStyle = React.useMemo(function () {
554
- return sortable$1
555
- ? __assign(__assign({}, style), { transform: CSS.Transform.toString(transform), transition: transition }) : style;
556
- }, [sortable$1, style, transform, transition]);
557
- var sortableProps = React.useMemo(function () {
558
- return sortable$1
559
- ? __assign(__assign({ ref: setNodeRef }, attributes), listeners) : {};
560
- }, [attributes, listeners, setNodeRef, sortable$1]);
554
+ var sortableProps = sortable$1
555
+ ? __assign(__assign({ ref: setNodeRef }, attributes), listeners) : {};
561
556
  /********************************************************************************************************************
562
557
  * Render
563
558
  * ******************************************************************************************************************/
564
- return (React.createElement(StyledBodyRow, __assign({ className: classNames('TableBodyRow', className), style: finalStyle }, props, sortableProps), columns.map(function (column, columnIdx) { return (React.createElement(TableBodyCell, { className: onGetColumnClassName ? onGetColumnClassName(column, item, index) : undefined, sx: onGetColumnSx ? onGetColumnSx(column, item, index) : undefined, style: onGetColumnStyle ? onGetColumnStyle(column, item, index) : undefined, key: columnIdx, index: index, item: item, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, column: column, onClick: onClick, onCheckChange: onCheckChange })); })));
559
+ return (React.createElement(StyledBodyRow, __assign({ className: classNames('TableBodyRow', className), style: sortable$1
560
+ ? __assign(__assign({}, style), { transform: CSS.Transform.toString(transform), transition: transition }) : style }, props, sortableProps), columns.map(function (column, columnIdx) { return (React.createElement(TableBodyCell, { className: onGetColumnClassName ? onGetColumnClassName(column, item, index) : undefined, sx: onGetColumnSx ? onGetColumnSx(column, item, index) : undefined, style: onGetColumnStyle ? onGetColumnStyle(column, item, index) : undefined, key: columnIdx, index: index, item: item, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, column: column, onClick: onClick, onCheckChange: onCheckChange })); })));
565
561
  };var TableFooterCell = function (_a) {
566
562
  /********************************************************************************************************************
567
563
  * Memo
@@ -635,7 +631,6 @@ var TableBodyRow = function (_a) {
635
631
  /********************************************************************************************************************
636
632
  * Memo
637
633
  * ******************************************************************************************************************/
638
- var style = React.useMemo(function () { return (top !== undefined ? { top: top } : undefined); }, [top]);
639
634
  var data = React.useMemo(function () {
640
635
  var _a, _b;
641
636
  if (column.type === 'check') {
@@ -661,7 +656,7 @@ var TableBodyRow = function (_a) {
661
656
  /********************************************************************************************************************
662
657
  * Render
663
658
  * ******************************************************************************************************************/
664
- return (React.createElement(TableCommonCell, { type: 'head', className: 'TableHeadCell', style: style, column: column, defaultAlign: defaultAlign }, data));
659
+ return (React.createElement(TableCommonCell, { type: 'head', className: 'TableHeadCell', style: top !== undefined ? { top: top } : undefined, column: column, defaultAlign: defaultAlign }, data));
665
660
  };var BottomLine = material.styled('div')(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n height: 1px;\n position: absolute;\n left: 3px;\n right: 3px;\n bottom: 0;\n"], ["\n height: 1px;\n position: absolute;\n left: 3px;\n right: 3px;\n bottom: 0;\n"])));
666
661
  var TableTopHead = function (_a) {
667
662
  /********************************************************************************************************************
@@ -690,10 +685,6 @@ var TableTopHead = function (_a) {
690
685
  /********************************************************************************************************************
691
686
  * Function
692
687
  * ******************************************************************************************************************/
693
- var captionRow = React.useMemo(function () {
694
- return !!caption && (React.createElement(TableTopHeadCaptionRow, { ref: captionRef, className: 'TableTopHeadCaptionRow' },
695
- React.createElement(material.TableCell, { colSpan: columns.length }, caption)));
696
- }, [caption, columns]);
697
688
  var makeRowCells = React.useCallback(function (row, top) {
698
689
  var totalColumns = 0;
699
690
  var cells = row
@@ -718,6 +709,11 @@ var TableTopHead = function (_a) {
718
709
  var top = (captionHeight || 0) + (row1Height || 0) + (row2Height || 0) + (row3Height || 0);
719
710
  return (React.createElement(material.TableRow, null, columns.map(function (column, idx) { return (React.createElement(TableHeadCell, { key: idx, column: column, defaultAlign: defaultAlign, top: top, onCheckChange: onCheckChange })); })));
720
711
  }, [captionHeight, columns, defaultAlign, onCheckChange, row1Height, row2Height, row3Height]);
712
+ /********************************************************************************************************************
713
+ * Variable
714
+ * ******************************************************************************************************************/
715
+ var captionRow = !!caption && (React.createElement(TableTopHeadCaptionRow, { ref: captionRef, className: 'TableTopHeadCaptionRow' },
716
+ React.createElement(material.TableCell, { colSpan: columns.length }, caption)));
721
717
  /********************************************************************************************************************
722
718
  * Render
723
719
  * ******************************************************************************************************************/
@@ -760,7 +756,12 @@ var TableTopHead = function (_a) {
760
756
  columnRow));
761
757
  }
762
758
  };
763
- var templateObject_1$1;function columnFilter(v) {
759
+ var templateObject_1$1;var makeSortableItems = function (items) {
760
+ return items === null || items === void 0 ? void 0 : items.map(function (_a, index) {
761
+ var id = _a.id, item = __rest(_a, ["id"]);
762
+ return __assign({ id: id == null ? "".concat(uuid.v4(), "_").concat(index) : id }, item);
763
+ });
764
+ };function columnFilter(v) {
764
765
  return v !== undefined && v !== null && v !== false;
765
766
  }
766
767
  var _columnId = 0;
@@ -850,12 +851,6 @@ var Table = React.forwardRef(function (_a, ref) {
850
851
  /********************************************************************************************************************
851
852
  * Function
852
853
  * ******************************************************************************************************************/
853
- var makeSortableItems = React.useCallback(function (items) {
854
- return items === null || items === void 0 ? void 0 : items.map(function (_a, index) {
855
- var id = _a.id, item = __rest(_a, ["id"]);
856
- return __assign({ id: id == null ? "".concat(uuid.v4(), "_").concat(index) : id }, item);
857
- });
858
- }, []);
859
854
  var getFinalColumnId = React.useCallback(function (column) {
860
855
  if (finalColumns && finalColumnsIdRef.current) {
861
856
  var idx = finalColumns.indexOf(column);
@@ -1066,18 +1061,7 @@ var Table = React.forwardRef(function (_a, ref) {
1066
1061
  ref.current = commands;
1067
1062
  }
1068
1063
  }
1069
- }, [
1070
- ref,
1071
- columns,
1072
- items,
1073
- paging,
1074
- makeSortableItems,
1075
- setColumns,
1076
- setItems,
1077
- setPaging,
1078
- getCheckedItems,
1079
- simpleBarScrollToTop,
1080
- ]);
1064
+ }, [ref, columns, items, paging, setColumns, setItems, setPaging, getCheckedItems, simpleBarScrollToTop]);
1081
1065
  /********************************************************************************************************************
1082
1066
  * Event Handler
1083
1067
  * ******************************************************************************************************************/
@@ -1184,67 +1168,29 @@ var Table = React.forwardRef(function (_a, ref) {
1184
1168
  /********************************************************************************************************************
1185
1169
  * Memo
1186
1170
  * ******************************************************************************************************************/
1187
- var tableContextValue = React.useMemo(function () { return ({
1188
- menuOpen: menuOpen,
1189
- openMenuId: openMenuId,
1190
- setMenuOpen: TableContextSetMenuOpen,
1191
- setItemColumnChecked: TableContextSetItemColumnChecked,
1192
- setItemColumnCheckDisabled: TableContextSetItemColumnCheckDisabled,
1193
- setItemColumnCommands: TableContextSetItemColumnCommands,
1194
- setHeadColumnChecked: TableContextSetHeadColumnChecked,
1195
- setHeadColumnCommands: TableContextSetHeadColumnCommands,
1196
- }); }, [
1197
- TableContextSetHeadColumnChecked,
1198
- TableContextSetHeadColumnCommands,
1199
- TableContextSetItemColumnCheckDisabled,
1200
- TableContextSetItemColumnChecked,
1201
- TableContextSetItemColumnCommands,
1202
- TableContextSetMenuOpen,
1203
- menuOpen,
1204
- openMenuId,
1205
- ]);
1206
- var isNoData = React.useMemo(function () { return !!sortableItems && sortableItems.length <= 0; }, [sortableItems]);
1207
- var finalPagingHeight = React.useMemo(function () { return (paging && paging.total > 0 ? pagingHeight || 0 : 0); }, [paging, pagingHeight]);
1208
- var stickyHeader = React.useMemo(function () { return !isNoData && initStickyHeader; }, [initStickyHeader, isNoData]);
1209
- var style = React.useMemo(function () {
1210
- if (fullHeight) {
1211
- return __assign(__assign({ width: '100%' }, initStyle), { flex: 1, justifyContent: 'flex-end', height: '100%', display: 'flex', flexDirection: 'column', position: 'relative' });
1212
- }
1213
- else {
1214
- return __assign({ width: '100%' }, initStyle);
1215
- }
1216
- }, [initStyle, fullHeight]);
1217
- var simpleBarStyle = React.useMemo(function () {
1218
- if (fullHeight) {
1219
- return {
1220
- height: (containerHeight || 0) - (finalPagingHeight || 0) - 1,
1221
- flex: 1,
1222
- position: 'absolute',
1223
- top: 0,
1224
- left: 0,
1225
- right: 0,
1226
- marginBottom: finalPagingHeight || 0,
1227
- };
1228
- }
1229
- else {
1230
- return { height: height, minHeight: minHeight, maxHeight: maxHeight, marginBottom: -1 };
1231
- }
1232
- }, [fullHeight, containerHeight, finalPagingHeight, height, minHeight, maxHeight]);
1233
- var tableStyle = React.useMemo(function () {
1234
- if (fullHeight && isNoData) {
1235
- return { flex: 1, height: (containerHeight || 0) - finalPagingHeight - 2 };
1236
- }
1237
- }, [fullHeight, isNoData, containerHeight, finalPagingHeight]);
1238
- var pagingStyle = React.useMemo(function () {
1239
- var style = { padding: '13px 0', borderTop: '1px solid rgba(224, 224, 224, 1)' };
1240
- if (fullHeight) {
1241
- return __assign({ position: 'sticky' }, style);
1242
- }
1243
- return style;
1244
- }, [fullHeight]);
1245
- var tableTopHead = React.useMemo(function () {
1246
- return finalColumns && (React.createElement(TableTopHead, { caption: caption, rows: topHeadRows, columns: finalColumns, defaultAlign: defaultAlign, onCheckChange: handleHeadCheckChange }));
1247
- }, [caption, defaultAlign, finalColumns, handleHeadCheckChange, topHeadRows]);
1171
+ var isNoData = !!sortableItems && sortableItems.length <= 0;
1172
+ var finalPagingHeight = paging && paging.total > 0 ? pagingHeight || 0 : 0;
1173
+ var stickyHeader = !isNoData && initStickyHeader;
1174
+ var style = fullHeight
1175
+ ? __assign(__assign({ width: '100%' }, initStyle), { flex: 1, justifyContent: 'flex-end', height: '100%', display: 'flex', flexDirection: 'column', position: 'relative' }) : __assign({ width: '100%' }, initStyle);
1176
+ var simpleBarStyle = fullHeight
1177
+ ? {
1178
+ height: (containerHeight || 0) - (finalPagingHeight || 0) - 1,
1179
+ flex: 1,
1180
+ position: 'absolute',
1181
+ top: 0,
1182
+ left: 0,
1183
+ right: 0,
1184
+ marginBottom: finalPagingHeight || 0,
1185
+ }
1186
+ : { height: height, minHeight: minHeight, maxHeight: maxHeight, marginBottom: -1 };
1187
+ var tableStyle = fullHeight && isNoData ? { flex: 1, height: (containerHeight || 0) - finalPagingHeight - 2 } : undefined;
1188
+ // pageStyle
1189
+ var pagingStyle = { padding: '13px 0', borderTop: '1px solid rgba(224, 224, 224, 1)' };
1190
+ if (fullHeight) {
1191
+ pagingStyle.position = 'sticky';
1192
+ }
1193
+ var tableTopHead = finalColumns && (React.createElement(TableTopHead, { caption: caption, rows: topHeadRows, columns: finalColumns, defaultAlign: defaultAlign, onCheckChange: handleHeadCheckChange }));
1248
1194
  var tableBody = React.useMemo(function () {
1249
1195
  return finalColumns && (React.createElement(material.TableBody, null, sortableItems ? (sortableItems.length > 0 ? (React.createElement(sortable.SortableContext, { items: sortableItems, strategy: sortable.verticalListSortingStrategy }, sortableItems.map(function (item, idx) { return (React.createElement(TableBodyRow, { key: item.id, className: classNames(!!showOddColor && 'odd-color', !!showEvenColor && 'even-color', onGetBodyRowClassName ? onGetBodyRowClassName(item, idx) : undefined), style: onGetBodyRowStyle ? onGetBodyRowStyle(item, idx) : undefined, sx: onGetBodyRowSx ? onGetBodyRowSx(item, idx) : undefined, onGetColumnClassName: onGetBodyColumnClassName, onGetColumnStyle: onGetBodyColumnStyle, onGetColumnSx: onGetBodyColumnSx, hover: true, id: item.id, index: idx, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, sortable: sortable$1, columns: finalColumns, item: item, onClick: onClick, onCheckChange: handleBodyCheckChange })); }))) : (React.createElement(StyledBodyRow$1, null,
1250
1196
  React.createElement(material.TableCell, { colSpan: finalColumns.length, style: { flex: 1 } }, noData ? (noData) : (React.createElement(StyledNoDataDiv, null,
@@ -1275,27 +1221,19 @@ var Table = React.forwardRef(function (_a, ref) {
1275
1221
  footer && (React.createElement(material.TableFooter, null,
1276
1222
  React.createElement(material.TableRow, null, finalColumns.map(function (column, idx) { return (React.createElement(TableFooterCell, { key: idx, column: column, defaultAlign: defaultAlign })); }))));
1277
1223
  }, [defaultAlign, finalColumns, footer, isNoData]);
1278
- var tablePaging = React.useMemo(function () {
1279
- return finalColumns &&
1280
- paging &&
1281
- paging.total > 0 && (React.createElement(material.Stack, { ref: fullHeight ? pagingHeightResizeDetector : undefined, alignItems: pagingAlign, style: pagingStyle },
1282
- React.createElement(TablePagination, { className: pagination === null || pagination === void 0 ? void 0 : pagination.className, style: pagination === null || pagination === void 0 ? void 0 : pagination.style, sx: pagination === null || pagination === void 0 ? void 0 : pagination.sx, paging: paging, align: pagingAlign, onChange: handlePageChange })));
1283
- }, [
1284
- finalColumns,
1285
- fullHeight,
1286
- handlePageChange,
1287
- pagination === null || pagination === void 0 ? void 0 : pagination.className,
1288
- pagination === null || pagination === void 0 ? void 0 : pagination.style,
1289
- pagination === null || pagination === void 0 ? void 0 : pagination.sx,
1290
- paging,
1291
- pagingAlign,
1292
- pagingHeightResizeDetector,
1293
- pagingStyle,
1294
- ]);
1295
1224
  /********************************************************************************************************************
1296
1225
  * Render
1297
1226
  * ******************************************************************************************************************/
1298
- return finalColumns ? (React.createElement(TableContextProvider, { value: tableContextValue },
1227
+ return finalColumns ? (React.createElement(TableContextProvider, { value: {
1228
+ menuOpen: menuOpen,
1229
+ openMenuId: openMenuId,
1230
+ setMenuOpen: TableContextSetMenuOpen,
1231
+ setItemColumnChecked: TableContextSetItemColumnChecked,
1232
+ setItemColumnCheckDisabled: TableContextSetItemColumnCheckDisabled,
1233
+ setItemColumnCommands: TableContextSetItemColumnCommands,
1234
+ setHeadColumnChecked: TableContextSetHeadColumnChecked,
1235
+ setHeadColumnCommands: TableContextSetHeadColumnCommands,
1236
+ } },
1299
1237
  React.createElement(material.Paper, { ref: fullHeight ? containerHeightDetector : undefined, className: classNames('Table', className, !!stickyHeader && 'sticky-header', !!fullHeight && 'full-height', !!showOddColor && 'odd-color', !!showEvenColor && 'even-color', !!sortable$1 && 'sortable'), variant: 'outlined', style: style, sx: sx },
1300
1238
  React.createElement(SimpleBar, { ref: simpleBarRef, style: simpleBarStyle },
1301
1239
  React.createElement(core.DndContext, { sensors: sensors, collisionDetection: core.closestCenter, onDragEnd: handleDragEnd },
@@ -1303,8 +1241,36 @@ var Table = React.forwardRef(function (_a, ref) {
1303
1241
  tableTopHead,
1304
1242
  tableBody,
1305
1243
  tableFooter))),
1306
- tablePaging))) : null;
1307
- });var SearchTable = React.forwardRef(function (_a, ref) {
1244
+ finalColumns && paging && paging.total > 0 && (React.createElement(material.Stack, { ref: fullHeight ? pagingHeightResizeDetector : undefined, alignItems: pagingAlign, style: pagingStyle },
1245
+ React.createElement(TablePagination, { className: pagination === null || pagination === void 0 ? void 0 : pagination.className, style: pagination === null || pagination === void 0 ? void 0 : pagination.style, sx: pagination === null || pagination === void 0 ? void 0 : pagination.sx, paging: paging, align: pagingAlign, onChange: handlePageChange })))))) : null;
1246
+ });var getSearchInfo = function (search) {
1247
+ var searchInfo = {};
1248
+ if (search) {
1249
+ var ref = search.ref, searchGroups = search.searchGroups, props = __rest(search, ["ref", "searchGroups"]);
1250
+ searchInfo.ref = ref;
1251
+ searchInfo.searchGroups = searchGroups;
1252
+ searchInfo.props = props;
1253
+ }
1254
+ return searchInfo;
1255
+ };
1256
+ var getTableInfo = function (table) {
1257
+ var tableInfo = {};
1258
+ if (table) {
1259
+ var ref = table.ref, props = __rest(table, ["ref"]);
1260
+ tableInfo.ref = ref;
1261
+ tableInfo.props = props;
1262
+ }
1263
+ return tableInfo;
1264
+ };
1265
+ var deHash = function () {
1266
+ var values = {};
1267
+ var hash = window.location.hash.substring(1);
1268
+ hash.replace(/([^=&]+)=([^&]*)/g, function (substring, key, value) {
1269
+ values[decodeURIComponent(key)] = decodeURIComponent(value);
1270
+ return substring;
1271
+ });
1272
+ return values;
1273
+ };var SearchTable = React.forwardRef(function (_a, ref) {
1308
1274
  /********************************************************************************************************************
1309
1275
  * Ref
1310
1276
  * ******************************************************************************************************************/
@@ -1313,28 +1279,6 @@ var Table = React.forwardRef(function (_a, ref) {
1313
1279
  var searchRef = React.useRef();
1314
1280
  var tableRef = React.useRef();
1315
1281
  var lastGetDataDataRef = React.useRef({});
1316
- /********************************************************************************************************************
1317
- * Function
1318
- * ******************************************************************************************************************/
1319
- var getSearchInfo = React.useCallback(function (search) {
1320
- var searchInfo = {};
1321
- if (search) {
1322
- var ref_1 = search.ref, searchGroups = search.searchGroups, props = __rest(search, ["ref", "searchGroups"]);
1323
- searchInfo.ref = ref_1;
1324
- searchInfo.searchGroups = searchGroups;
1325
- searchInfo.props = props;
1326
- }
1327
- return searchInfo;
1328
- }, []);
1329
- var getTableInfo = React.useCallback(function (table) {
1330
- var tableInfo = {};
1331
- if (table) {
1332
- var ref_2 = table.ref, props = __rest(table, ["ref"]);
1333
- tableInfo.ref = ref_2;
1334
- tableInfo.props = props;
1335
- }
1336
- return tableInfo;
1337
- }, []);
1338
1282
  /********************************************************************************************************************
1339
1283
  * State
1340
1284
  * ******************************************************************************************************************/
@@ -1352,7 +1296,6 @@ var Table = React.forwardRef(function (_a, ref) {
1352
1296
  else {
1353
1297
  setSearchInfo(getSearchInfo(search));
1354
1298
  }
1355
- // eslint-disable-next-line react-hooks/exhaustive-deps
1356
1299
  }, [search]);
1357
1300
  /********************************************************************************************************************
1358
1301
  * tableInfo
@@ -1366,7 +1309,6 @@ var Table = React.forwardRef(function (_a, ref) {
1366
1309
  else {
1367
1310
  setTableInfo(getTableInfo(table));
1368
1311
  }
1369
- // eslint-disable-next-line react-hooks/exhaustive-deps
1370
1312
  }, [table]);
1371
1313
  /********************************************************************************************************************
1372
1314
  * Function
@@ -1377,15 +1319,6 @@ var Table = React.forwardRef(function (_a, ref) {
1377
1319
  onGetData(data).then(setTableData);
1378
1320
  }
1379
1321
  }, [onGetData]);
1380
- var deHash = React.useCallback(function () {
1381
- var values = {};
1382
- var hash = window.location.hash.substring(1);
1383
- hash.replace(/([^=&]+)=([^&]*)/g, function (substring, key, value) {
1384
- values[decodeURIComponent(key)] = decodeURIComponent(value);
1385
- return substring;
1386
- });
1387
- return values;
1388
- }, []);
1389
1322
  var hashToSearchValue = React.useCallback(function () {
1390
1323
  var commands = searchRef.current;
1391
1324
  if (commands) {
@@ -1509,7 +1442,7 @@ var Table = React.forwardRef(function (_a, ref) {
1509
1442
  });
1510
1443
  return commands.getAllFormValue();
1511
1444
  }
1512
- }, [searchRef, deHash]);
1445
+ }, [searchRef]);
1513
1446
  /********************************************************************************************************************
1514
1447
  * Commands
1515
1448
  * ******************************************************************************************************************/
@@ -1699,21 +1632,10 @@ var Table = React.forwardRef(function (_a, ref) {
1699
1632
  }
1700
1633
  }
1701
1634
  }, [searchRef, hash, hashChange, getData, isFirstSearchSubmit]);
1702
- /********************************************************************************************************************
1703
- * Memo
1704
- * ******************************************************************************************************************/
1705
- var styles = React.useMemo(function () {
1706
- return fullHeight
1707
- ? {
1708
- containerStyle: __assign(__assign({}, initStyle), { flex: 1, display: 'flex' }),
1709
- tableContainerStyle: { flex: 1, display: 'flex', flexDirection: 'column' },
1710
- }
1711
- : { containerStyle: initStyle };
1712
- }, [initStyle, fullHeight]);
1713
1635
  /********************************************************************************************************************
1714
1636
  * Render
1715
1637
  * ******************************************************************************************************************/
1716
- return (React.createElement(material.Grid, { container: true, direction: 'column', spacing: 1, className: classNames('SearchTable', className), style: styles.containerStyle, sx: sx },
1638
+ 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 },
1717
1639
  React.createElement(material.Grid, { item: true, sx: { display: searchInfo.searchGroups ? undefined : 'none' } },
1718
1640
  React.createElement(reactForm.Search, __assign({ color: color }, searchInfo.props, { ref: function (commands) {
1719
1641
  if (searchInfo.ref) {
@@ -1730,7 +1652,7 @@ var Table = React.forwardRef(function (_a, ref) {
1730
1652
  React.createElement(reactForm.FormHidden, { name: 'page', value: 1 })),
1731
1653
  searchInfo.searchGroups)),
1732
1654
  betweenSearchTableComponent && React.createElement(material.Grid, { item: true }, betweenSearchTableComponent),
1733
- React.createElement(material.Grid, { item: true, style: styles.tableContainerStyle },
1655
+ React.createElement(material.Grid, { item: true, style: fullHeight ? { flex: 1, display: 'flex', flexDirection: 'column' } : undefined },
1734
1656
  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) {
1735
1657
  if (tableInfo.ref) {
1736
1658
  if (typeof tableInfo.ref === 'function') {
@@ -1769,11 +1691,6 @@ var TableButton$1 = React.memo(TableButton);var TableMenuButton = React.forwardR
1769
1691
  * State
1770
1692
  * ******************************************************************************************************************/
1771
1693
  var _f = React.useState(false), open = _f[0], setOpen = _f[1];
1772
- /********************************************************************************************************************
1773
- * Memo
1774
- * ******************************************************************************************************************/
1775
- var icon = React.useMemo(function () { return (!startIcon && !children ? 'MoreVert' : undefined); }, [startIcon, children]);
1776
- var sx = React.useMemo(function () { return (__assign({ minWidth: 0, pl: !children ? 0.7 : icon || startIcon ? 0.7 : variant === 'text' ? 1.2 : 0.7 }, initSx)); }, [children, icon, initSx, startIcon, variant]);
1777
1694
  /********************************************************************************************************************
1778
1695
  * Effect
1779
1696
  * ******************************************************************************************************************/
@@ -1827,6 +1744,10 @@ var TableButton$1 = React.memo(TableButton);var TableMenuButton = React.forwardR
1827
1744
  onClick: handleClose,
1828
1745
  });
1829
1746
  }, [buttonId, handleClose, handleListKeyDown, menuId, menuList, open]);
1747
+ /********************************************************************************************************************
1748
+ * Variable
1749
+ * ******************************************************************************************************************/
1750
+ var icon = !startIcon && !children ? 'MoreVert' : undefined;
1830
1751
  /********************************************************************************************************************
1831
1752
  * Render
1832
1753
  * ******************************************************************************************************************/
@@ -1841,11 +1762,11 @@ var TableButton$1 = React.memo(TableButton);var TableMenuButton = React.forwardR
1841
1762
  }
1842
1763
  }
1843
1764
  anchorRef.current = r;
1844
- }, id: buttonId, variant: variant, "aria-controls": open ? menuId : undefined, "aria-expanded": open ? 'true' : undefined, "aria-haspopup": 'true', className: classNames(className, 'TableMenuButton'), type: 'button', size: 'small', sx: sx, color: color, startIcon: icon, onClick: handleClick }, props), children),
1765
+ }, id: buttonId, variant: variant, "aria-controls": open ? menuId : undefined, "aria-expanded": open ? 'true' : undefined, "aria-haspopup": 'true', className: classNames(className, 'TableMenuButton'), type: 'button', size: 'small', sx: __assign({ minWidth: 0, pl: !children ? 0.7 : icon || startIcon ? 0.7 : variant === 'text' ? 1.2 : 0.7 }, initSx), color: color, startIcon: icon, onClick: handleClick }, props), children),
1845
1766
  React.createElement(material.Popper, { className: 'TableMenuButton-Popper', open: open, anchorEl: anchorRef.current, role: undefined, placement: placement, transition: true, style: { zIndex: inModal ? (zIndex === undefined ? 1301 : zIndex) : zIndex } }, function (_a) {
1846
1767
  var TransitionProps = _a.TransitionProps, placement = _a.placement;
1847
1768
  var placements = placement.split('-');
1848
- var transformOrigin = '';
1769
+ var transformOrigin;
1849
1770
  if (placements[0] === 'left') {
1850
1771
  transformOrigin = 'right';
1851
1772
  // if (placements.length > 1) {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pdg/react-table",
3
3
  "title": "React Table",
4
- "version": "1.0.104",
4
+ "version": "1.0.106",
5
5
  "description": "React Table",
6
6
  "type": "module",
7
7
  "types": "dist/index.d.ts",
@@ -47,9 +47,9 @@
47
47
  "@mui/icons-material": "^5.15.17",
48
48
  "@mui/material": "^5.15.17",
49
49
  "@mui/x-date-pickers": "^6.19.7",
50
- "@pdg/react-component": "^1.0.23",
51
- "@pdg/react-form": "^1.0.123",
52
- "@pdg/react-hook": "^1.0.19",
50
+ "@pdg/react-component": "^1.0.25",
51
+ "@pdg/react-form": "^1.0.126",
52
+ "@pdg/react-hook": "^1.0.21",
53
53
  "@pdg/util": "^1.0.22",
54
54
  "@tinymce/tinymce-react": "^4.3.2",
55
55
  "@types/react": "^17.0.0 || ^18.0.0",