@prt-ts/fluent-react-table-v2 9.40.0-build.9.0 → 9.41.0-build.2.0
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.
- package/index.js +19 -14
- package/package.json +2 -2
package/index.js
CHANGED
|
@@ -3,7 +3,7 @@ import * as React from 'react';
|
|
|
3
3
|
import { useMemo } from 'react';
|
|
4
4
|
import { useDrop, useDrag, DndProvider } from 'react-dnd';
|
|
5
5
|
import { HTML5Backend } from 'react-dnd-html5-backend';
|
|
6
|
-
import { makeStaticStyles, makeStyles, shorthands, tokens, useId, Dropdown, Option, Input, Button, Divider, Popover, PopoverTrigger, PopoverSurface, MenuGroupHeader, Checkbox, RadioGroup, Radio, Field, InlineDrawer, DrawerHeader, DrawerHeaderTitle, DrawerBody, Caption1Stronger, Menu, MenuTrigger, MenuButton, MenuPopover, MenuList, MenuGroup, MenuItem, MenuDivider, mergeClasses, Skeleton, SkeletonItem, Subtitle2Stronger, MenuItemRadio, DrawerFooter } from '@fluentui/react-components';
|
|
6
|
+
import { makeStaticStyles, makeStyles, shorthands, tokens, useId, Dropdown, Option, Input, Button, Divider, Popover, PopoverTrigger, Tooltip, PopoverSurface, MenuGroupHeader, Checkbox, RadioGroup, Radio, Field, InlineDrawer, DrawerHeader, DrawerHeaderTitle, DrawerBody, Caption1Stronger, Menu, MenuTrigger, MenuButton, MenuPopover, MenuList, MenuGroup, MenuItem, MenuDivider, mergeClasses, Skeleton, SkeletonItem, Subtitle2Stronger, MenuItemRadio, DrawerFooter } from '@fluentui/react-components';
|
|
7
7
|
import { PreviousRegular, ArrowPreviousFilled, ArrowNextFilled, NextRegular, bundleIcon, SaveFilled, SaveRegular, TableSimpleCheckmarkFilled, TableSimpleCheckmarkRegular, SearchFilled, SearchRegular, FilterFilled, FilterRegular, CodeTextOff16Filled, CodeTextOff16Regular, ColumnEditFilled, ColumnEditRegular, GroupFilled, GroupRegular, ChevronRightFilled, ChevronRightRegular, ChevronDownRegular, ChevronDownFilled, DragFilled, DragRegular, Album24Regular, Search24Regular, FilterDismissFilled, Dismiss24Regular, ArrowSortDown20Filled, ArrowSortDown20Regular, ArrowSortUp20Filled, ArrowSortUp20Regular, GroupListRegular, PinRegular, TextSortAscendingFilled, TextSortDescendingFilled, GroupDismissFilled, ArrowStepInLeftRegular, ArrowStepInRightRegular, PinOffRegular, DocumentSearch24Regular, Save20Filled, ViewDesktop20Filled, ViewDesktop20Regular } from '@fluentui/react-icons';
|
|
8
8
|
import { useReactTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel, getFilteredRowModel, getGroupedRowModel, getExpandedRowModel, getFacetedUniqueValues, getFacetedMinMaxValues, flexRender } from '@tanstack/react-table';
|
|
9
9
|
export { createColumnHelper } from '@tanstack/react-table';
|
|
@@ -163,21 +163,21 @@ const useGridHeaderStyles = makeStyles({
|
|
|
163
163
|
const GridHeader = (props) => {
|
|
164
164
|
const { table, gridTitle, globalFilter, setGlobalFilter } = props;
|
|
165
165
|
const styles = useGridHeaderStyles();
|
|
166
|
-
return (jsxs("div", Object.assign({ className: styles.tableTopHeaderContainer }, { children: [jsx("div", Object.assign({ className: styles.tableTopHeaderLeft }, { children: gridTitle })), jsxs("div", Object.assign({ className: styles.tableTopHeaderRight }, { children: [props.headerMenu, props.headerMenu && jsx(Divider, { vertical: true }), jsxs(Popover, Object.assign({ withArrow: true }, { children: [jsx(PopoverTrigger, Object.assign({ disableButtonEnhancement: true }, { children: jsx(Button, { icon: jsx(ToggleGroupColumnIcon, {}), "aria-label": "Toggle Group Column" }) })), jsx(PopoverSurface, { children: jsxs("div", Object.assign({ className: styles.tableTopHeaderColumnTogglePopover }, { children: [jsx(MenuGroupHeader, { children: "Group Columns" }), table.getAllLeafColumns().map((column) => {
|
|
166
|
+
return (jsxs("div", Object.assign({ className: styles.tableTopHeaderContainer }, { children: [jsx("div", Object.assign({ className: styles.tableTopHeaderLeft }, { children: gridTitle })), jsxs("div", Object.assign({ className: styles.tableTopHeaderRight }, { children: [props.headerMenu, props.headerMenu && jsx(Divider, { vertical: true }), jsxs(Popover, Object.assign({ withArrow: true }, { children: [jsx(PopoverTrigger, Object.assign({ disableButtonEnhancement: true }, { children: jsx(Tooltip, Object.assign({ content: 'Toggle Group Column', relationship: "label" }, { children: jsx(Button, { icon: jsx(ToggleGroupColumnIcon, {}), "aria-label": "Toggle Group Column" }) })) })), jsx(PopoverSurface, { children: jsxs("div", Object.assign({ className: styles.tableTopHeaderColumnTogglePopover }, { children: [jsx(MenuGroupHeader, { children: "Group Columns" }), table.getAllLeafColumns().map((column) => {
|
|
167
167
|
if (column.id === 'select')
|
|
168
168
|
return null;
|
|
169
169
|
if (column.id === 'id')
|
|
170
170
|
return null;
|
|
171
171
|
return (jsx(Checkbox, { checked: column.getIsGrouped(), onChange: column.getToggleGroupingHandler(), disabled: !column.getCanGroup() || !column.getIsVisible(), label: jsx("span", { children: column.columnDef.id }) }, column.id));
|
|
172
|
-
})] })) })] })), jsxs(Popover, Object.assign({ withArrow: true }, { children: [jsx(PopoverTrigger, Object.assign({ disableButtonEnhancement: true }, { children: jsx(Button, { icon: jsx(ToggleSelectColumnIcon, {}), "aria-label": "Toggle Column Visibility" }) })), jsx(PopoverSurface, { children: jsxs("div", Object.assign({ className: styles.tableTopHeaderColumnTogglePopover }, { children: [jsx(MenuGroupHeader, { children: "Toggle Columns" }), jsx(Checkbox, { checked: table.getIsAllColumnsVisible(), onChange: table.getToggleAllColumnsVisibilityHandler(), label: 'Toggle All' }), jsx(Divider, {}), table.getAllLeafColumns().map((column) => {
|
|
172
|
+
})] })) })] })), jsxs(Popover, Object.assign({ withArrow: true }, { children: [jsx(PopoverTrigger, Object.assign({ disableButtonEnhancement: true }, { children: jsx(Tooltip, Object.assign({ content: 'Toggle Column Visibility', relationship: "label" }, { children: jsx(Button, { icon: jsx(ToggleSelectColumnIcon, {}), "aria-label": "Toggle Column Visibility" }) })) })), jsx(PopoverSurface, { children: jsxs("div", Object.assign({ className: styles.tableTopHeaderColumnTogglePopover }, { children: [jsx(MenuGroupHeader, { children: "Toggle Columns" }), jsx(Checkbox, { checked: table.getIsAllColumnsVisible(), onChange: table.getToggleAllColumnsVisibilityHandler(), label: 'Toggle All' }), jsx(Divider, {}), table.getAllLeafColumns().map((column) => {
|
|
173
173
|
if (column.id === 'select')
|
|
174
174
|
return null;
|
|
175
175
|
return (jsx(Checkbox, { checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler(), label: column.id, disabled: !column.getCanHide() }, column.id));
|
|
176
|
-
})] })) })] })), jsx(Button
|
|
177
|
-
// appearance="subtle"
|
|
178
|
-
, {
|
|
176
|
+
})] })) })] })), jsx(Tooltip, Object.assign({ content: 'Table Views Management', relationship: "label" }, { children: jsx(Button
|
|
179
177
|
// appearance="subtle"
|
|
180
|
-
|
|
178
|
+
, {
|
|
179
|
+
// appearance="subtle"
|
|
180
|
+
onClick: () => props.setViewsDrawerOpen((value) => !value), icon: jsx(Album24Regular, {}), "aria-label": "View Menu" }) })), jsx(DebouncedInput, { value: globalFilter !== null && globalFilter !== void 0 ? globalFilter : '', onChange: (value) => setGlobalFilter(String(value)), className: "p-2 font-lg shadow border border-block", placeholder: "Search all columns...", openFilterDrawer: props.openFilterDrawer, setFilterDrawerOpen: props.setFilterDrawerOpen })] }))] })));
|
|
181
181
|
};
|
|
182
182
|
// A debounced input react component
|
|
183
183
|
function DebouncedInput({ value: initialValue, onChange, debounce = 500, openFilterDrawer, setFilterDrawerOpen, }) {
|
|
@@ -191,9 +191,9 @@ function DebouncedInput({ value: initialValue, onChange, debounce = 500, openFil
|
|
|
191
191
|
}, debounce);
|
|
192
192
|
return () => clearTimeout(timeout);
|
|
193
193
|
}, [value, onChange, debounce]);
|
|
194
|
-
return (jsx(Input, { placeholder: "Search Keyword", value: value, onChange: (_, data) => setValue(data.value), type: "search", autoComplete: "off", contentBefore: jsx(Search24Regular, {}), style: { width: '300px' }, contentAfter: jsx(
|
|
195
|
-
|
|
196
|
-
|
|
194
|
+
return (jsx(Input, { placeholder: "Search Keyword", value: value, onChange: (_, data) => setValue(data.value), type: "search", autoComplete: "off", contentBefore: jsx(Search24Regular, {}), style: { width: '300px' }, contentAfter: jsx(Tooltip, Object.assign({ content: openFilterDrawer ? 'Close Filter Window' : 'Open Advance Filter', relationship: "label" }, { children: jsx(Button, { appearance: "subtle", icon: openFilterDrawer ? jsx(FilterDismissFilled, {}) : jsx(FilterFilled, {}), "aria-label": "View Menu", onClick: () => {
|
|
195
|
+
setFilterDrawerOpen((open) => !open);
|
|
196
|
+
} }) })) }));
|
|
197
197
|
}
|
|
198
198
|
|
|
199
199
|
const arrIncludesSome = (row, columnId, value) => {
|
|
@@ -747,7 +747,7 @@ const Filter = ({ column, table, }) => {
|
|
|
747
747
|
return jsx(FilterSelectRadio, { column: column, table: table });
|
|
748
748
|
case 'inNumberRange':
|
|
749
749
|
return jsx(FilterNumberRange, { column: column, table: table });
|
|
750
|
-
case '
|
|
750
|
+
case 'inDateRange': {
|
|
751
751
|
const firstValue = (_a = table
|
|
752
752
|
.getPreFilteredRowModel()
|
|
753
753
|
.flatRows[0]) === null || _a === void 0 ? void 0 : _a.getValue(column.id);
|
|
@@ -756,7 +756,7 @@ const Filter = ({ column, table, }) => {
|
|
|
756
756
|
}
|
|
757
757
|
break;
|
|
758
758
|
}
|
|
759
|
-
case '
|
|
759
|
+
case 'matchDate': {
|
|
760
760
|
const firstValue = (_b = table
|
|
761
761
|
.getPreFilteredRowModel()
|
|
762
762
|
.flatRows[0]) === null || _b === void 0 ? void 0 : _b.getValue(column.id);
|
|
@@ -791,7 +791,7 @@ const useFilterDrawerStyles$1 = makeStyles({
|
|
|
791
791
|
const FilterDrawer = ({ open, setOpen, table }) => {
|
|
792
792
|
const headerGroups = table.getHeaderGroups();
|
|
793
793
|
const styles = useFilterDrawerStyles$1();
|
|
794
|
-
return (jsxs(InlineDrawer, Object.assign({ position: "end", open: open, separator: true }, { children: [jsx(DrawerHeader, { children: jsx(DrawerHeaderTitle, Object.assign({ action: jsx(Button, { appearance: "subtle", "aria-label": "Close", icon: jsx(Dismiss24Regular, {}), onClick: () => setOpen(false) }) }, { children: "
|
|
794
|
+
return (jsxs(InlineDrawer, Object.assign({ position: "end", open: open, separator: true }, { children: [jsx(DrawerHeader, { children: jsx(DrawerHeaderTitle, Object.assign({ action: jsx(Button, { appearance: "subtle", "aria-label": "Close", icon: jsx(Dismiss24Regular, {}), onClick: () => setOpen(false) }) }, { children: "Advanced Filters" })) }), jsx(DrawerBody, Object.assign({ className: styles.drawerBody }, { children: headerGroups.map((headerGroup) => {
|
|
795
795
|
const canApplyFilter = headerGroup.depth === (headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.length) - 1;
|
|
796
796
|
if (!canApplyFilter)
|
|
797
797
|
return null;
|
|
@@ -1094,7 +1094,12 @@ const ViewsDrawer = (props) => {
|
|
|
1094
1094
|
table.toggleAllRowsSelected(false);
|
|
1095
1095
|
}, [table]);
|
|
1096
1096
|
return (jsxs(InlineDrawer, Object.assign({ position: "end", open: open, separator: true }, { children: [jsx(DrawerHeader, { children: jsx(DrawerHeaderTitle, Object.assign({ action: jsx(Button, { appearance: "subtle", "aria-label": "Close", icon: jsx(Dismiss24Regular, {}), onClick: () => setOpen(false) }) }, { children: "Table Views" })) }), jsxs(DrawerBody, Object.assign({ className: styles.drawerBody }, { children: [onTableViewSave && jsx(ViewSaveForm, { mode: 'create', getTableState: getTableState, onSave: onTableViewSave }), jsxs(MenuList, Object.assign({ checkedValues: checkedValues, onCheckedValueChange: onChange }, { children: [jsx(MenuItemRadio, Object.assign({ name: 'table-views', value: 'Default View', icon: jsx(ViewDesktop20Filled, {}), onClick: resetToGridDefaultView }, { children: "Default View" })), tableViews.length > 0 && jsx(MenuDivider, { children: "Additional Views" }), tableViews.map((view) => {
|
|
1097
|
-
return (
|
|
1097
|
+
return (jsxs("div", Object.assign({ style: {
|
|
1098
|
+
display: 'flex',
|
|
1099
|
+
justifyContent: 'space-between',
|
|
1100
|
+
alignItems: 'center',
|
|
1101
|
+
width: '100%',
|
|
1102
|
+
} }, { children: [jsx(MenuItemRadio, Object.assign({ name: "table-views", value: view.viewName, onClick: () => applyTableState(view.tableState), icon: jsx(ViewDesktop20Regular, {}) }, { children: view.viewName })), props.onTableViewDelete && (view === null || view === void 0 ? void 0 : view.isViewOwner) && (jsx(Button, { appearance: "subtle", "aria-label": "Close", icon: jsx(Dismiss24Regular, {}), onClick: () => { var _a; return (_a = props.onTableViewDelete) === null || _a === void 0 ? void 0 : _a.call(props, view); } }))] }), view.id + view.viewName));
|
|
1098
1103
|
})] }))] })), jsx(DrawerFooter, { children: jsxs(MenuList, { children: [jsx(MenuDivider, {}), jsx(MenuItem, Object.assign({ icon: jsx(ClearFilterIcon, {}), onClick: resetAllFilters }, { children: "Clear All Filters" })), jsx(MenuItem, Object.assign({ icon: jsx(ClearFilterIcon, {}), onClick: resetAllGrouping }, { children: "Clear All Grouping" })), jsx(MenuItem, Object.assign({ icon: jsx(ClearFilterIcon, {}), onClick: clearAllSelection }, { children: "Clear All Selection" }))] }) })] })));
|
|
1099
1104
|
};
|
|
1100
1105
|
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@prt-ts/fluent-react-table-v2",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.41.0-build.2.0",
|
|
4
4
|
"main": "./index.js",
|
|
5
5
|
"types": "./src\\index.d.ts",
|
|
6
6
|
"peerDependencies": {
|
|
7
7
|
"react": ">=17.0.0",
|
|
8
8
|
"react-dom": ">=17.0.0",
|
|
9
|
-
"@fluentui/react-components": ">=9.
|
|
9
|
+
"@fluentui/react-components": ">=9.41.0",
|
|
10
10
|
"@fluentui/react-datepicker-compat": ">=0.4.5",
|
|
11
11
|
"@fluentui/react-icons": ">=2.0.221"
|
|
12
12
|
},
|