@prt-ts/fluent-react-table-v2 9.46.8-build.6.0 → 9.46.8-build.7.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.
Files changed (8) hide show
  1. package/index.cjs.js +656 -643
  2. package/index.esm.js +657 -644
  3. package/package.json +1 -1
  4. package/src/lib/components/filters/FilterDrawer.d.ts +1 -5
  5. package/src/lib/components/grid-header/GridHeader.d.ts +0 -3
  6. package/src/lib/components/views/ViewsDrawer.d.ts +0 -4
  7. package/src/lib/helpers/StylesHelper.d.ts +2 -2
  8. package/src/lib/index.d.ts +17 -1
package/index.cjs.js CHANGED
@@ -7,10 +7,10 @@ var React = require('react');
7
7
  var reactComponents = require('@fluentui/react-components');
8
8
  var reactControlFlow = require('@prt-ts/react-control-flow');
9
9
  var reactTable = require('@tanstack/react-table');
10
- var reactVirtual = require('react-virtual');
11
- var reactDatepickerCompat = require('@fluentui/react-datepicker-compat');
12
10
  var sortable = require('@dnd-kit/sortable');
13
11
  var utilities = require('@dnd-kit/utilities');
12
+ var reactVirtual = require('react-virtual');
13
+ var reactDatepickerCompat = require('@fluentui/react-datepicker-compat');
14
14
  var core = require('@dnd-kit/core');
15
15
  var modifiers = require('@dnd-kit/modifiers');
16
16
 
@@ -1007,6 +1007,7 @@ const ArrowNextFilled = /*#__PURE__*/createFluentIcon('ArrowNextFilled', "1em",
1007
1007
  const ArrowPreviousFilled = /*#__PURE__*/createFluentIcon('ArrowPreviousFilled', "1em", ["M6 4.75c-.38 0-.7.28-.74.65l-.01.1v9a.75.75 0 0 0 1.5.1V5.5A.75.75 0 0 0 6 4.75Zm8.28.22a.75.75 0 0 0-.98-.07l-.08.07-4.5 4.5a.75.75 0 0 0-.07.98l.07.08 4.5 4.5a.75.75 0 0 0 1.13-.98l-.07-.08L10.31 10l3.97-3.97c.3-.3.3-.77 0-1.06Z"], {
1008
1008
  flipInRtl: true
1009
1009
  });
1010
+ const ArrowSortFilled = /*#__PURE__*/createFluentIcon('ArrowSortFilled', "1em", ["M14.84 16.72a.76.76 0 0 1-.59.28.73.73 0 0 1-.53-.22l-3-3a.75.75 0 0 1 1.06-1.07l1.72 1.73V3.75a.75.75 0 0 1 1.5 0v10.68l1.72-1.71a.75.75 0 1 1 1.06 1.06l-2.94 2.94ZM6.34 3.28A.76.76 0 0 0 5.75 3c-.2 0-.38.07-.53.22l-3 3A.75.75 0 0 0 3.28 7.3L5 5.56v10.69a.75.75 0 0 0 1.5 0V5.57l1.72 1.71a.75.75 0 1 0 1.06-1.06L6.34 3.28Z"]);
1010
1011
  const ArrowStepInLeftRegular = /*#__PURE__*/createFluentIcon('ArrowStepInLeftRegular', "1em", ["M5 10a1 1 0 1 0-2 0 1 1 0 0 0 2 0ZM4 8a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm14 2a.5.5 0 0 1-.5.5H9.7l3.15 3.15a.5.5 0 0 1-.7.7l-4-4a.5.5 0 0 1 0-.7l4-4a.5.5 0 0 1 .7.7L9.71 9.5h7.79c.28 0 .5.22.5.5Z"]);
1011
1012
  const ArrowStepInRightRegular = /*#__PURE__*/createFluentIcon('ArrowStepInRightRegular', "1em", ["M15 10a1 1 0 1 0 2 0 1 1 0 0 0-2 0Zm1 2a2 2 0 1 1 0-4 2 2 0 0 1 0 4ZM2 10c0-.28.22-.5.5-.5h7.8L7.14 6.35a.5.5 0 1 1 .7-.7l4 4c.2.2.2.5 0 .7l-4 4a.5.5 0 0 1-.7-.7l3.14-3.15H2.5A.5.5 0 0 1 2 10Z"]);
1012
1013
 
@@ -1018,6 +1019,8 @@ const ColumnEditFilled = /*#__PURE__*/createFluentIcon('ColumnEditFilled', "1em"
1018
1019
  const ColumnEditRegular = /*#__PURE__*/createFluentIcon('ColumnEditRegular', "1em", ["M3 3.5c0-.28.22-.5.5-.5H4a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-.5a.5.5 0 0 1 0-1H4a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-.5a.5.5 0 0 1-.5-.5ZM9 4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h.47l-.04.16-.21.84H9a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h2a2 2 0 0 1 2 2v6.94l-1 1V5a1 1 0 0 0-1-1H9Zm6 1v4.94l-1 1V5c0-1.1.9-2 2-2h.5a.5.5 0 0 1 0 1H16a1 1 0 0 0-1 1Zm-4.02 10.38 4.83-4.83a1.87 1.87 0 1 1 2.64 2.64l-4.83 4.83a2.2 2.2 0 0 1-1.02.58l-1.5.37a.89.89 0 0 1-1.07-1.07l.37-1.5c.1-.39.3-.74.58-1.02Z"]);
1019
1020
  const DragFilled = /*#__PURE__*/createFluentIcon('DragFilled', "1em", ["M10 2c.2 0 .39.08.53.22l1.5 1.5a.75.75 0 0 1-1.06 1.06l-.22-.22v1.69a.75.75 0 0 1-1.5 0V4.56l-.22.22a.75.75 0 0 1-1.06-1.06l1.5-1.5A.75.75 0 0 1 10 2Zm2 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm-9.78-.53a.75.75 0 0 0 0 1.06l1.5 1.5a.75.75 0 0 0 1.06-1.06l-.22-.22h1.69a.75.75 0 0 0 0-1.5H4.56l.22-.22a.75.75 0 0 0-1.06-1.06l-1.5 1.5ZM10 18c.2 0 .39-.08.53-.22l1.5-1.5a.75.75 0 1 0-1.06-1.06l-.22.22v-1.69a.75.75 0 0 0-1.5 0v1.69l-.22-.22a.75.75 0 0 0-1.06 1.06l1.5 1.5c.14.14.33.22.53.22Zm7.78-8.53a.75.75 0 0 1 0 1.06l-1.5 1.5a.75.75 0 1 1-1.06-1.06l.22-.22h-1.69a.75.75 0 0 1 0-1.5h1.69l-.22-.22a.75.75 0 0 1 1.06-1.06l1.5 1.5Z"]);
1020
1021
  const DragRegular = /*#__PURE__*/createFluentIcon('DragRegular', "1em", ["M9.65 2.15c.2-.2.5-.2.7 0l2 2a.5.5 0 0 1-.7.7L10.5 3.71V6.5a.5.5 0 0 1-1 0V3.7L8.35 4.86a.5.5 0 1 1-.7-.7l2-2ZM10 12a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm0-1a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm5.85 1.35 2-2a.5.5 0 0 0 0-.7l-2-2a.5.5 0 0 0-.7.7l1.14 1.15H13.5a.5.5 0 0 0 0 1h2.8l-1.15 1.15a.5.5 0 0 0 .7.7Zm-5.5 5.5 2-2a.5.5 0 0 0-.7-.7l-1.15 1.14V13.5a.5.5 0 0 0-1 0v2.8l-1.15-1.15a.5.5 0 0 0-.7.7l2 2c.2.2.5.2.7 0Zm-8.2-7.5a.5.5 0 0 1 0-.7l2-2a.5.5 0 1 1 .7.7L3.71 9.5H6.5a.5.5 0 0 1 0 1H3.7l1.15 1.15a.5.5 0 0 1-.7.7l-2-2Z"]);
1022
+ const EyeTrackingOffFilled = /*#__PURE__*/createFluentIcon('EyeTrackingOffFilled', "1em", ["M2.41 3.12C2.15 3.52 2 4 2 4.5v3a.5.5 0 0 0 1 0v-3c0-.23.05-.45.15-.65L6.29 7a6.6 6.6 0 0 0-2.23 2.27v.01l.44.23-.45-.22a.5.5 0 0 0 .9.44v-.01a2.39 2.39 0 0 1 .25-.39 5.49 5.49 0 0 1 1.82-1.6l1.3 1.3a3 3 0 1 0 4.16 4.17l3.67 3.66c-.2.1-.42.15-.65.15h-3a.5.5 0 0 0 0 1h3c.5 0 .98-.15 1.38-.41l.27.26a.5.5 0 0 0 .7-.7l-.26-.27-.74-.73-3.93-3.94-3.63-3.63L8.01 7.3l-.78-.78-3.38-3.37-.73-.74-.27-.26a.5.5 0 1 0-.7.7l.26.27Zm15.57 12.73.02-.35v-3a.5.5 0 0 0-1 0v2.38l.98.97Zm-8.81-8.8A7 7 0 0 1 10 7a5.86 5.86 0 0 1 4.8 2.32 4.13 4.13 0 0 1 .24.39l.01.01a.5.5 0 0 0 .9-.44v-.01l-.01-.01a1.7 1.7 0 0 0-.08-.14l-.25-.38A6.85 6.85 0 0 0 10 6c-.63 0-1.2.07-1.7.18l.86.87Zm6.78 2.23-.06.03-.39.19.45-.22ZM5.12 3H7.5a.5.5 0 0 0 0-1h-3c-.12 0-.24 0-.35.02l.97.98ZM3 15.5c0 .83.67 1.5 1.5 1.5h3a.5.5 0 0 1 0 1h-3A2.5 2.5 0 0 1 2 15.5v-3a.5.5 0 0 1 1 0v3Zm14-11c0-.83-.67-1.5-1.5-1.5h-3a.5.5 0 0 1 0-1h3A2.5 2.5 0 0 1 18 4.5v3a.5.5 0 0 1-1 0v-3Z"]);
1023
+ const EyeTrackingOffRegular = /*#__PURE__*/createFluentIcon('EyeTrackingOffRegular', "1em", ["M2.41 3.12C2.15 3.52 2 4 2 4.5v3a.5.5 0 0 0 1 0v-3c0-.23.05-.45.15-.65L6.29 7a6.6 6.6 0 0 0-2.23 2.27v.01l.44.23-.45-.22a.5.5 0 0 0 .9.44v-.01a2.39 2.39 0 0 1 .25-.39 5.49 5.49 0 0 1 1.82-1.6l1.3 1.3a3 3 0 1 0 4.16 4.17l3.67 3.66c-.2.1-.42.15-.65.15h-3a.5.5 0 0 0 0 1h3c.5 0 .98-.15 1.38-.41l.27.26a.5.5 0 0 0 .7-.7l-.26-.27-.74-.73-3.93-3.94-3.63-3.63L8.01 7.3l-.78-.78-3.38-3.37-.73-.74-.27-.26a.5.5 0 1 0-.7.7l.26.27Zm9.34 9.34a2 2 0 1 1-2.71-2.71l2.71 2.71Zm6.23 3.4.02-.36v-3a.5.5 0 0 0-1 0v2.38l.98.97ZM9.17 7.04A7 7 0 0 1 10 7a5.86 5.86 0 0 1 4.8 2.32 4.13 4.13 0 0 1 .24.39l.01.01a.5.5 0 0 0 .9-.44v-.01l-.01-.01a1.7 1.7 0 0 0-.08-.14l-.25-.38A6.85 6.85 0 0 0 10 6c-.63 0-1.2.07-1.7.18l.86.87Zm6.78 2.23-.06.03-.39.19.45-.22ZM5.12 3H7.5a.5.5 0 0 0 0-1h-3c-.12 0-.24 0-.35.02l.97.98ZM4.5 17A1.5 1.5 0 0 1 3 15.5v-3a.5.5 0 0 0-1 0v3A2.5 2.5 0 0 0 4.5 18h3a.5.5 0 0 0 0-1h-3Zm11-14c.83 0 1.5.67 1.5 1.5v3a.5.5 0 0 0 1 0v-3A2.5 2.5 0 0 0 15.5 2h-3a.5.5 0 0 0 0 1h3Z"]);
1021
1024
  const FilterFilled = /*#__PURE__*/createFluentIcon('FilterFilled', "1em", ["M12.25 13.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5h4.5Zm2-4.25a.75.75 0 0 1 0 1.5h-8.5a.75.75 0 0 1 0-1.5h8.5Zm2-4.25a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1 0-1.5h12.5Z"]);
1022
1025
  const FilterRegular = /*#__PURE__*/createFluentIcon('FilterRegular', "1em", ["M7.5 13h5a.5.5 0 0 1 .09 1H7.5a.5.5 0 0 1-.09-1h5.09-5Zm-2-4h9a.5.5 0 0 1 .09 1H5.5a.5.5 0 0 1-.09-1h9.09-9Zm-2-4h13a.5.5 0 0 1 .09 1H3.5a.5.5 0 0 1-.09-1H16.5h-13Z"]);
1023
1026
  const FilterDismissFilled = /*#__PURE__*/createFluentIcon('FilterDismissFilled', "1em", ["M11.73 10.25A5.46 5.46 0 0 0 14 11c0 .41-.34.75-.75.75h-8.5a.75.75 0 0 1 0-1.5h6.98ZM9.03 6c.04.52.16 1.03.34 1.5H2.75a.75.75 0 0 1 0-1.5h6.27ZM12 15.25a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h4.5c.41 0 .75-.34.75-.75ZM14.5 10a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Zm1.85-6.35c.2.2.2.5 0 .7L15.21 5.5l1.14 1.15a.5.5 0 0 1-.7.7L14.5 6.21l-1.15 1.14a.5.5 0 0 1-.7-.7l1.14-1.15-1.14-1.15a.5.5 0 0 1 .7-.7l1.15 1.14 1.15-1.14c.2-.2.5-.2.7 0Z"]);
@@ -1026,6 +1029,8 @@ const GroupFilled = /*#__PURE__*/createFluentIcon('GroupFilled', "1em", ["M7 4.5
1026
1029
  const GroupRegular = /*#__PURE__*/createFluentIcon('GroupRegular', "1em", ["M7 4.5c0 .17-.02.34-.05.5H10a1 1 0 0 1 1 1v2h-1a2 2 0 0 0-2 2v1H6a1 1 0 0 1-1-1V6.95a2.51 2.51 0 0 1-1 0V10c0 1.1.9 2 2 2h2v2c0 1.1.9 2 2 2h3.05a2.51 2.51 0 0 1 0-1H10a1 1 0 0 1-1-1v-2h1a2 2 0 0 0 2-2V9h2a1 1 0 0 1 1 1v3.05a2.51 2.51 0 0 1 1 0V10a2 2 0 0 0-2-2h-2V6a2 2 0 0 0-2-2H6.95c.03.16.05.33.05.5ZM11 9v1a1 1 0 0 1-1 1H9v-1a1 1 0 0 1 1-1h1ZM6 4.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm11 11a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0-11a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-11 11a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"]);
1027
1030
  const GroupDismissFilled = /*#__PURE__*/createFluentIcon('GroupDismissFilled', "1em", ["M7 4.5c0 .36-.07.7-.2 1H10c.28 0 .5.22.5.5v2H10a2 2 0 0 0-2 2v.5H6a.5.5 0 0 1-.5-.5V6.8a2.5 2.5 0 0 1-1.5.15V10c0 1.1.9 2 2 2h2v2a2 2 0 0 0 1.16 1.81 5.51 5.51 0 0 1 .34-3.6V10c0-.28.22-.5.5-.5h2.2a5.48 5.48 0 0 1 3.61-.34A2 2 0 0 0 14 8h-2V6a2 2 0 0 0-2-2H6.95c.03.16.05.33.05.5Zm-1 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm11 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-11 11a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm13-1a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm-2.65-1.15a.5.5 0 0 0-.7-.7l-1.15 1.14-1.15-1.14a.5.5 0 0 0-.7.7l1.14 1.15-1.14 1.15a.5.5 0 0 0 .7.7l1.15-1.14 1.15 1.14a.5.5 0 0 0 .7-.7l-1.14-1.15 1.14-1.15Z"]);
1028
1031
  const GroupListRegular = /*#__PURE__*/createFluentIcon('GroupListRegular', "1em", ["M2.5 3a.5.5 0 0 0-.5.5v5c0 .28.22.5.5.5h2a.5.5 0 0 0 0-1H3V4h1.5a.5.5 0 0 0 0-1h-2Zm0 8a.5.5 0 0 0-.5.5v5c0 .28.22.5.5.5h2a.5.5 0 0 0 0-1H3v-4h1.5a.5.5 0 0 0 0-1h-2ZM6 4.5c0-.28.22-.5.5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5Zm.5 7.5a.5.5 0 0 0 0 1h11a.5.5 0 0 0 0-1h-11ZM6 7.5c0-.28.22-.5.5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5Zm.5 7.5a.5.5 0 0 0 0 1h11a.5.5 0 0 0 0-1h-11Z"]);
1032
+ const MoreVerticalFilled = /*#__PURE__*/createFluentIcon('MoreVerticalFilled', "1em", ["M10 6.5A1.75 1.75 0 1 1 10 3a1.75 1.75 0 0 1 0 3.5ZM10 17a1.75 1.75 0 1 1 0-3.5 1.75 1.75 0 0 1 0 3.5Zm-1.75-7a1.75 1.75 0 1 0 3.5 0 1.75 1.75 0 0 0-3.5 0Z"]);
1033
+ const MoreVerticalRegular = /*#__PURE__*/createFluentIcon('MoreVerticalRegular', "1em", ["M10 6a1.25 1.25 0 1 1 0-2.5A1.25 1.25 0 0 1 10 6Zm0 5.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Zm-1.25 4a1.25 1.25 0 1 0 2.5 0 1.25 1.25 0 0 0-2.5 0Z"]);
1029
1034
  const NextRegular = /*#__PURE__*/createFluentIcon('NextRegular', "1em", ["M17 3.5a.5.5 0 0 0-1 0v13a.5.5 0 1 0 1 0v-13ZM3 4.25c0-1 1.12-1.6 1.95-1.04l8.5 5.71c.73.5.73 1.57 0 2.07l-8.5 5.8A1.25 1.25 0 0 1 3 15.75V4.25Zm1.39-.2a.25.25 0 0 0-.39.2v11.5c0 .2.23.32.4.2l8.49-5.78a.25.25 0 0 0 0-.42l-8.5-5.7Z"]);
1030
1035
 
1031
1036
  const PinFilled = /*#__PURE__*/createFluentIcon('PinFilled', "1em", ["M13.33 2.62a2 2 0 0 0-3.2.52L8.38 6.6a1.5 1.5 0 0 1-.78.72L4 8.75a1 1 0 0 0-.33 1.64l2.61 2.6L3 16.3v.7h.7L7 13.72l2.61 2.6a1 1 0 0 0 1.64-.33l1.43-3.59c.14-.34.4-.62.72-.78l3.46-1.73a2 2 0 0 0 .52-3.2l-4.05-4.06Z"]);
@@ -1039,6 +1044,7 @@ const SearchRegular = /*#__PURE__*/createFluentIcon('SearchRegular', "1em", ["M8
1039
1044
 
1040
1045
  const TableSimpleCheckmarkFilled = /*#__PURE__*/createFluentIcon('TableSimpleCheckmarkFilled', "1em", ["M14 17h-3.5v-6.5H17V14a3 3 0 0 1-3 3Zm3-7.5h-6.5V3H14a3 3 0 0 1 3 3v3.5Zm-7.5 0V3H6a3 3 0 0 0-3 3v3.5h6.5Zm0 7.5v-6.5H3V14a3 3 0 0 0 3 3h3.5Zm5.85-3.9a.5.5 0 0 0-.7-.7l-1.4 1.4-.4-.4a.5.5 0 0 0-.7.7l.75.75c.2.2.5.2.7 0l1.75-1.75Z"]);
1041
1046
  const TableSimpleCheckmarkRegular = /*#__PURE__*/createFluentIcon('TableSimpleCheckmarkRegular', "1em", ["M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6ZM4 6c0-1.1.9-2 2-2h3.5v5.5H4V6Zm6.5 3.5V4H14a2 2 0 0 1 2 2v3.5h-5.5Zm-6.5 1h5.5V16H6a2 2 0 0 1-2-2v-3.5Zm10.86 1.4c.2.2.2.5 0 .7l-1.75 1.75a.5.5 0 0 1-.71 0l-.75-.75a.5.5 0 0 1 .7-.7l.4.4 1.4-1.4c.2-.2.51-.2.7 0Z"]);
1047
+ const TextClearFormattingFilled = /*#__PURE__*/createFluentIcon('TextClearFormattingFilled', "1em", ["M6 2c.2 0 .4.13.47.32l3.5 8.95a.5.5 0 0 1-.94.37L8.01 9H4l-1.04 2.68a.5.5 0 1 1-.94-.36l3.5-9A.5.5 0 0 1 6 2Zm0 1.88L4.4 8H7.6l-1.6-4.12ZM11.5 2c.28 0 .5.22.5.5v3.52a2.48 2.48 0 0 1 2.26-1.3c.89 0 1.6.34 2.15 1 .55.66.82 1.54.82 2.64l-.01.42-.05-.05a2.49 2.49 0 0 0-1.15-.65 2.86 2.86 0 0 0-.53-1.62c-.36-.47-.86-.7-1.48-.7-.6 0-1.09.24-1.47.72-.3.37-.47.83-.54 1.37v1.03c.05.43.18.8.37 1.12L11 11.37V2.5c0-.28.22-.5.5-.5Zm4.97 7.44 2.1 2.1a1.5 1.5 0 0 1-.01 2.12l-3.6 3.6-4.21-4.22 3.6-3.6a1.5 1.5 0 0 1 2.12 0Zm-2.22 8.52-4.21-4.21-.6.6a1.5 1.5 0 0 0 0 2.12l2.1 2.1c.3.3.71.45 1.12.43h4.09a.5.5 0 1 0 0-1h-2.53l.03-.04Z"]);
1042
1048
  const TextSortAscendingFilled = /*#__PURE__*/createFluentIcon('TextSortAscendingFilled', "1em", ["M6.7 2.5a.75.75 0 0 0-1.4 0L3.03 9a.75.75 0 0 0 1.42.5l.34-1h2.4l.34 1A.75.75 0 0 0 8.96 9L6.7 2.5ZM6 5.04 6.68 7H5.32L6 5.04ZM4 11a.75.75 0 0 0 0 1.5h2.53l-3.14 4.3A.75.75 0 0 0 4 18h4a.75.75 0 0 0 0-1.5H5.47l3.14-4.3A.75.75 0 0 0 8 11H4Zm10.25-9c.41 0 .75.34.75.75v12.57l1.45-1.58a.75.75 0 0 1 1.1 1.02l-2.75 3a.75.75 0 0 1-1.1 0l-2.75-3a.75.75 0 0 1 1.1-1.02l1.45 1.58V2.75c0-.41.34-.75.75-.75Z"]);
1043
1049
  const TextSortDescendingFilled = /*#__PURE__*/createFluentIcon('TextSortDescendingFilled', "1em", ["M4 2a.75.75 0 1 0 0 1.5h2.53L3.39 7.8A.75.75 0 0 0 4 9h4a.75.75 0 0 0 0-1.5H5.47l3.14-4.3A.75.75 0 0 0 8 2H4Zm2.7 8.5a.75.75 0 0 0-1.4 0L3.03 17a.75.75 0 1 0 1.42.5l.34-1h2.4l.34 1a.75.75 0 1 0 1.42-.5L6.7 10.5ZM6 13.04 6.68 15H5.32L6 13.04ZM14.25 2c.41 0 .75.34.75.75v12.57l1.45-1.58a.75.75 0 0 1 1.1 1.02l-2.75 3a.75.75 0 0 1-1.1 0l-2.75-3a.75.75 0 0 1 1.1-1.02l1.45 1.58V2.75c0-.41.34-.75.75-.75Z"]);
1044
1050
 
@@ -1165,7 +1171,9 @@ const useGridHeaderStyles = reactComponents.makeStyles({
1165
1171
  });
1166
1172
 
1167
1173
  const GridHeader = (props) => {
1168
- const { table, gridTitle, globalFilter, setGlobalFilter, dispatch, drawerState } = props;
1174
+ const { table, gridTitle, globalFilter, setGlobalFilter } = props;
1175
+ /* eslint-disable @typescript-eslint/no-non-null-assertion */
1176
+ const { dispatchDrawerAction, drawerState } = table.options.meta;
1169
1177
  const styles = useGridHeaderStyles();
1170
1178
  return (jsxRuntime.jsxs("div", { className: styles.tableTopHeaderContainer, children: [jsxRuntime.jsx("div", { className: styles.tableTopHeaderLeft, children: gridTitle }), jsxRuntime.jsxs("div", { className: styles.tableTopHeaderRight, children: [props.headerMenu, props.headerMenu && jsxRuntime.jsx(reactComponents.Divider, { vertical: true }), jsxRuntime.jsxs(reactComponents.Popover, { withArrow: true, children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { disableButtonEnhancement: true, children: jsxRuntime.jsx(reactComponents.Tooltip, { content: 'Toggle Group Column', relationship: "label", children: jsxRuntime.jsx(reactComponents.Button, { icon: jsxRuntime.jsx(ToggleGroupColumnIcon, {}), "aria-label": "Toggle Group Column" }) }) }), jsxRuntime.jsx(reactComponents.PopoverSurface, { className: styles.popoverSurface, children: jsxRuntime.jsxs("div", { className: styles.tableTopHeaderColumnTogglePopover, children: [jsxRuntime.jsx(reactComponents.MenuGroupHeader, { children: "Group Columns" }), table.getAllLeafColumns().map((column) => {
1171
1179
  if (column.id === 'select')
@@ -1178,8 +1186,8 @@ const GridHeader = (props) => {
1178
1186
  return null;
1179
1187
  return (jsxRuntime.jsx(reactComponents.Checkbox, { checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler(), label: column.id, disabled: !column.getCanHide() }, column.id));
1180
1188
  })] }) })] }), jsxRuntime.jsx(reactComponents.Tooltip, { content: 'Table Views Management', relationship: "label", children: jsxRuntime.jsx(reactComponents.Button, { onClick: () => {
1181
- dispatch({ type: "TOGGLE_VIEW_DRAWER" });
1182
- }, icon: jsxRuntime.jsx(Album24Regular, {}), "aria-label": "View Menu" }) }), jsxRuntime.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...", drawerState: drawerState, dispatch: dispatch })] })] }));
1189
+ dispatchDrawerAction === null || dispatchDrawerAction === void 0 ? void 0 : dispatchDrawerAction({ type: "TOGGLE_VIEW_DRAWER" });
1190
+ }, icon: jsxRuntime.jsx(Album24Regular, {}), "aria-label": "View Menu" }) }), jsxRuntime.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...", dispatch: dispatchDrawerAction, drawerState: drawerState })] })] }));
1183
1191
  };
1184
1192
  // A debounced input react component
1185
1193
  function DebouncedInput({ value: initialValue, onChange, debounce = 500, drawerState, dispatch, }) {
@@ -1193,8 +1201,8 @@ function DebouncedInput({ value: initialValue, onChange, debounce = 500, drawerS
1193
1201
  }, debounce);
1194
1202
  return () => clearTimeout(timeout);
1195
1203
  }, [value, onChange, debounce]);
1196
- return (jsxRuntime.jsx(reactComponents.Input, { placeholder: "Search Keyword", value: value, onChange: (_, data) => setValue(data.value), type: "search", autoComplete: "off", contentBefore: jsxRuntime.jsx(Search24Regular, {}), style: { width: '300px' }, contentAfter: jsxRuntime.jsx(reactComponents.Tooltip, { content: drawerState.isFilterDrawerOpen ? 'Close Filter Window' : 'Open Advance Filter', relationship: "label", children: jsxRuntime.jsx(reactComponents.Button, { appearance: "subtle", icon: drawerState.isFilterDrawerOpen ? jsxRuntime.jsx(FilterDismissFilled, {}) : jsxRuntime.jsx(FilterFilled, {}), "aria-label": "View Menu", onClick: () => {
1197
- dispatch({ type: "TOGGLE_FILTER_DRAWER" });
1204
+ return (jsxRuntime.jsx(reactComponents.Input, { placeholder: "Search Keyword", value: value, onChange: (_, data) => setValue(data.value), type: "search", autoComplete: "off", contentBefore: jsxRuntime.jsx(Search24Regular, {}), style: { width: '300px' }, contentAfter: jsxRuntime.jsx(reactComponents.Tooltip, { content: (drawerState === null || drawerState === void 0 ? void 0 : drawerState.isFilterDrawerOpen) ? 'Close Filter Window' : 'Open Advance Filter', relationship: "label", children: jsxRuntime.jsx(reactComponents.Button, { appearance: "subtle", icon: (drawerState === null || drawerState === void 0 ? void 0 : drawerState.isFilterDrawerOpen) ? jsxRuntime.jsx(FilterDismissFilled, {}) : jsxRuntime.jsx(FilterFilled, {}), "aria-label": "View Menu", onClick: () => {
1205
+ dispatch === null || dispatch === void 0 ? void 0 : dispatch({ type: "TOGGLE_FILTER_DRAWER" });
1198
1206
  } }) }) }));
1199
1207
  }
1200
1208
 
@@ -1256,9 +1264,41 @@ const getLeafColumns = (columns) => {
1256
1264
  }, []);
1257
1265
  };
1258
1266
 
1267
+ const TableActions = {
1268
+ TOGGLE_FILTER_DRAWER: 'TOGGLE_FILTER_DRAWER',
1269
+ TOGGLE_VIEW_DRAWER: 'TOGGLE_VIEW_DRAWER',
1270
+ OPEN_FILTER_DRAWER: 'OPEN_FILTER_DRAWER',
1271
+ OPEN_VIEW_DRAWER: 'OPEN_VIEW_DRAWER',
1272
+ CLOSE_FILTER_DRAWER: 'CLOSE_FILTER_DRAWER',
1273
+ CLOSE_VIEW_DRAWER: 'CLOSE_VIEW_DRAWER',
1274
+ };
1275
+ // write a reducer function to handle the state of the table
1276
+ function tableReducer(state, action) {
1277
+ switch (action.type) {
1278
+ case TableActions.TOGGLE_FILTER_DRAWER:
1279
+ return Object.assign(Object.assign({}, state), { isFilterDrawerOpen: !state.isFilterDrawerOpen });
1280
+ case TableActions.TOGGLE_VIEW_DRAWER:
1281
+ return Object.assign(Object.assign({}, state), { isViewsDrawerOpen: !state.isViewsDrawerOpen });
1282
+ case TableActions.OPEN_FILTER_DRAWER:
1283
+ return Object.assign(Object.assign({}, state), { isFilterDrawerOpen: true });
1284
+ case TableActions.OPEN_VIEW_DRAWER:
1285
+ return Object.assign(Object.assign({}, state), { isViewsDrawerOpen: true });
1286
+ case TableActions.CLOSE_FILTER_DRAWER:
1287
+ return Object.assign(Object.assign({}, state), { isFilterDrawerOpen: false });
1288
+ case TableActions.CLOSE_VIEW_DRAWER:
1289
+ return Object.assign(Object.assign({}, state), { isViewsDrawerOpen: false });
1290
+ default:
1291
+ return state;
1292
+ }
1293
+ }
1294
+
1259
1295
  const useGridContainer = (props, ref) => {
1260
1296
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
1261
1297
  const { defaultColumn, columns, data, rowSelectionMode, autoResetPageIndex, onUpdateData } = props;
1298
+ const [drawerState, dispatch] = React__namespace.useReducer(tableReducer, {
1299
+ isFilterDrawerOpen: false,
1300
+ isViewsDrawerOpen: false
1301
+ });
1262
1302
  const [pagination, setPagination] = React__namespace.useState({
1263
1303
  pageSize: props.pageSize || 10,
1264
1304
  pageIndex: 0,
@@ -1349,7 +1389,22 @@ const useGridContainer = (props, ref) => {
1349
1389
  tableHeight: props.tableHeight || "650px",
1350
1390
  updateData: onUpdateData,
1351
1391
  onTableViewDelete: props.onTableViewDelete,
1352
- onTableViewSave: props.onTableViewSave
1392
+ onTableViewSave: props.onTableViewSave,
1393
+ drawerState: drawerState,
1394
+ dispatchDrawerAction: dispatch,
1395
+ // all the table state modifiers
1396
+ setPagination,
1397
+ setSorting,
1398
+ setColumnFilters,
1399
+ setGlobalFilter,
1400
+ setGrouping,
1401
+ setRowSelection,
1402
+ setColumnVisibility,
1403
+ setColumnOrder,
1404
+ setExpanded,
1405
+ setColumnPinning,
1406
+ setColumnSizing,
1407
+ setRowPinning
1353
1408
  }
1354
1409
  });
1355
1410
  const tableViews = React__namespace.useMemo(() => { var _a; return (_a = props.views) !== null && _a !== void 0 ? _a : []; }, [props.views]);
@@ -1503,120 +1558,365 @@ const useTableHeaderStyles = reactComponents.makeStyles({
1503
1558
  },
1504
1559
  });
1505
1560
 
1506
- const useCheckboxFilterStyles = reactComponents.makeStyles({
1507
- searchInput: {
1508
- width: '90%',
1509
- marginBottom: '8px',
1510
- marginLeft: '10px',
1511
- marginRight: '10px',
1561
+ const getHeaderCellPinningStyles = (column, isDragging, additionalStyles) => {
1562
+ const isPinned = column.getIsPinned();
1563
+ const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
1564
+ const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');
1565
+ const styles = Object.assign({ width: column.getSize(), boxShadow: isLastLeftPinnedColumn
1566
+ ? '-4px 0 4px -4px gray inset'
1567
+ : isFirstRightPinnedColumn
1568
+ ? '4px 0 4px -4px gray inset'
1569
+ : undefined, left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined, right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined, opacity: isDragging ? 0.8 : (isPinned ? 0.95 : 1), position: isPinned ? 'sticky' : 'relative', zIndex: isDragging ? 100 : (isPinned ? 99 : 1), backgroundColor: reactComponents.tokens.colorNeutralCardBackgroundSelected, whiteSpace: 'wrap' }, additionalStyles);
1570
+ return styles;
1571
+ };
1572
+ const getBodyCellPinningStyles = (column, isDragging, additionalStyles) => {
1573
+ const isPinned = column.getIsPinned();
1574
+ const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
1575
+ const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');
1576
+ const styles = Object.assign({ width: column.getSize(), boxShadow: isLastLeftPinnedColumn
1577
+ ? '-4px 0 4px -4px gray inset'
1578
+ : isFirstRightPinnedColumn
1579
+ ? '4px 0 4px -4px gray inset'
1580
+ : undefined, left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined, right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined, position: isPinned ? 'sticky' : 'relative', opacity: isDragging ? 0.85 : (isPinned ? 0.95 : 1), zIndex: isDragging ? 100 : (isPinned ? 1 : 0) }, additionalStyles);
1581
+ return styles;
1582
+ };
1583
+
1584
+ const MoreIcon = bundleIcon$1(MoreVerticalFilled, MoreVerticalRegular);
1585
+ const SortAscIcon = bundleIcon$1(ArrowSortDown20Filled, ArrowSortDown20Regular);
1586
+ const SortDescIcon = bundleIcon$1(ArrowSortUp20Filled, ArrowSortUp20Regular);
1587
+ const PinIcon = bundleIcon$1(PinFilled, PinRegular);
1588
+ const HideColumnIcon = bundleIcon$1(EyeTrackingOffFilled, EyeTrackingOffRegular);
1589
+ function HeaderCell({ header, table, hideMenu, headerDepth, totalNumberOfHeaderDepth, }) {
1590
+ var _a;
1591
+ const { column } = header;
1592
+ const { isDragging, attributes, listeners, setNodeRef, transform, transition, } = sortable.useSortable({
1593
+ id: column.id
1594
+ });
1595
+ const dndStyle = {
1596
+ transform: utilities.CSS.Translate.toString(transform),
1597
+ transition
1598
+ };
1599
+ const styles = useTableHeaderStyles();
1600
+ const isLeafHeaders = headerDepth === totalNumberOfHeaderDepth;
1601
+ const headerCellCombinedStyles = getHeaderCellPinningStyles(column, isDragging, dndStyle);
1602
+ if (header.isPlaceholder) {
1603
+ return (jsxRuntime.jsx("th", { colSpan: header.colSpan, className: styles.tHeadCell, style: headerCellCombinedStyles, ref: setNodeRef, children: jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getCanResize(), children: jsxRuntime.jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: reactComponents.mergeClasses(styles.resizer, column.getIsResizing() && styles.resizerActive) }) }) }));
1604
+ }
1605
+ const columnName = reactTable.flexRender(header.column.columnDef.header, header.getContext());
1606
+ return (jsxRuntime.jsxs("th", { colSpan: header.colSpan, className: reactComponents.mergeClasses(styles.tHeadCell, isLeafHeaders && styles.tHeadNonLeafCell, isDragging && styles.tHeadCellDragging), style: headerCellCombinedStyles, ref: setNodeRef, children: [jsxRuntime.jsx("div", Object.assign({ className: styles.tHeadCellDraggable }, attributes, listeners, { children: jsxRuntime.jsxs("div", { className: isLeafHeaders
1607
+ ? styles.tLeafHeadCellContent
1608
+ : styles.tNonLeafHeadCellContent, children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx(reactControlFlow.Show, { when: !header.isPlaceholder, children: jsxRuntime.jsxs(reactComponents.Button, { style: {
1609
+ display: 'flex',
1610
+ alignItems: 'center',
1611
+ justifyContent: 'left',
1612
+ flex: 1,
1613
+ }, onClick: (e) => {
1614
+ if (!header.column.getCanSort())
1615
+ return;
1616
+ header.column.toggleSorting(header.column.getIsSorted() === 'asc', e.ctrlKey);
1617
+ }, onDoubleClick: () => {
1618
+ if (!header.column.getCanGroup())
1619
+ return;
1620
+ header.column.getToggleGroupingHandler()();
1621
+ }, appearance: "transparent", className: styles.tHeadContentBtn, icon: (_a = {
1622
+ asc: (jsxRuntime.jsx("strong", { children: jsxRuntime.jsx(SortAscIcon, {}) })),
1623
+ desc: (jsxRuntime.jsx("strong", { children: jsxRuntime.jsx(SortDescIcon, {}) })),
1624
+ }[header.column.getIsSorted()]) !== null && _a !== void 0 ? _a : undefined, iconPosition: "after", children: [jsxRuntime.jsx("strong", { children: columnName }), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getIsGrouped(), children: jsxRuntime.jsx("strong", { children: jsxRuntime.jsx(GroupListRegular, {}) }) }), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getIsFiltered(), children: jsxRuntime.jsx("strong", { children: jsxRuntime.jsx(FilterFilled, {}) }) }), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getIsPinned(), children: jsxRuntime.jsx("strong", { children: jsxRuntime.jsx(PinRegular, {}) }) })] }) }) }), jsxRuntime.jsx(HeaderMenu, { header: header, table: table, hideMenu: hideMenu })] }) })), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getCanResize(), children: jsxRuntime.jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: reactComponents.mergeClasses(styles.resizer, column.getIsResizing() && styles.resizerActive) }) }), jsxRuntime.jsx(reactControlFlow.Show, { when: !isLeafHeaders, children: jsxRuntime.jsx("div", { className: styles.tHeadNonLeafCellFakeBorder }) })] }));
1625
+ }
1626
+ function HeaderMenu(props) {
1627
+ const { header, table, hideMenu } = props;
1628
+ /* eslint-disable @typescript-eslint/no-non-null-assertion */
1629
+ const { dispatchDrawerAction, drawerState } = table.options.meta;
1630
+ const styles = useTableHeaderStyles();
1631
+ if (hideMenu || header.isPlaceholder)
1632
+ return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }));
1633
+ const canHavePopOver = header.column.getCanSort() ||
1634
+ header.column.getCanGroup() ||
1635
+ header.column.getCanFilter();
1636
+ if (!canHavePopOver)
1637
+ return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }));
1638
+ const columnName = reactTable.flexRender(header.column.columnDef.header, header.getContext());
1639
+ return (jsxRuntime.jsxs(reactComponents.Menu, { positioning: { align: "end" }, children: [jsxRuntime.jsx(reactComponents.MenuTrigger, { disableButtonEnhancement: true, children: jsxRuntime.jsx(reactComponents.Tooltip, { relationship: "label", content: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: ["More actions for ", columnName] }), children: jsxRuntime.jsx(reactComponents.MenuButton, { appearance: "subtle", "aria-label": "View Column Actions", icon: jsxRuntime.jsx(MoreIcon, {}) }) }) }), jsxRuntime.jsx(reactComponents.MenuPopover, { className: styles.tHeadMenuPopover, children: jsxRuntime.jsxs(reactComponents.MenuList, { children: [jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getCanSort(), children: jsxRuntime.jsxs(reactComponents.MenuGroup, { children: [jsxRuntime.jsx(reactComponents.MenuItem, { onClick: (e) => {
1640
+ var _a;
1641
+ (_a = header.column) === null || _a === void 0 ? void 0 : _a.clearSorting();
1642
+ }, icon: jsxRuntime.jsx(ArrowSortFilled, {}), disabled: !header.column.getIsSorted(), children: "Clear Sorting" }), jsxRuntime.jsx(reactComponents.MenuItem, { onClick: (e) => {
1643
+ var _a;
1644
+ const isControlKeySelected = e.ctrlKey;
1645
+ (_a = header.column) === null || _a === void 0 ? void 0 : _a.toggleSorting(false, isControlKeySelected);
1646
+ }, icon: jsxRuntime.jsx(TextSortAscendingFilled, {}), disabled: header.column.getIsSorted() === 'asc', children: "Sort A to Z" }), jsxRuntime.jsx(reactComponents.MenuItem, { onClick: (e) => {
1647
+ var _a;
1648
+ const isControlKeySelected = e.ctrlKey;
1649
+ (_a = header.column) === null || _a === void 0 ? void 0 : _a.toggleSorting(true, isControlKeySelected);
1650
+ }, icon: jsxRuntime.jsx(TextSortDescendingFilled, {}), disabled: header.column.getIsSorted() === 'desc', children: "Sort Z to A" }), jsxRuntime.jsx(reactComponents.MenuDivider, {})] }, 'sort-group') }), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getCanGroup(), children: jsxRuntime.jsxs(reactComponents.MenuGroup, { children: [!header.column.getIsGrouped() && (jsxRuntime.jsxs(reactComponents.MenuItem, { onClick: () => header.column.getToggleGroupingHandler()(), icon: jsxRuntime.jsx(GroupFilled, {}), children: ["Group Column (by ", columnName, ")"] })), header.column.getIsGrouped() && (jsxRuntime.jsxs(reactComponents.MenuItem, { onClick: () => header.column.getToggleGroupingHandler()(), icon: jsxRuntime.jsx(GroupDismissFilled, {}), children: ["Remove Grouping (on ", columnName, ")"] })), jsxRuntime.jsx(reactComponents.MenuDivider, {})] }, 'grouping-group') }), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getCanPin(), children: jsxRuntime.jsxs(reactComponents.Menu, { children: [jsxRuntime.jsx(reactComponents.MenuTrigger, { disableButtonEnhancement: true, children: jsxRuntime.jsxs(reactComponents.MenuItem, { icon: jsxRuntime.jsx(PinIcon, {}), children: ["Pin Column (", columnName, ")"] }) }), jsxRuntime.jsx(reactComponents.MenuPopover, { children: jsxRuntime.jsxs(reactComponents.MenuList, { children: [jsxRuntime.jsx(reactComponents.MenuItem, { onClick: () => {
1651
+ var _a;
1652
+ (_a = header.column) === null || _a === void 0 ? void 0 : _a.pin(false);
1653
+ }, icon: jsxRuntime.jsx(PinOffRegular, {}), disabled: !(['left', 'right'].includes(header.column.getIsPinned())), children: "No Pin" }), jsxRuntime.jsx(reactComponents.MenuItem, { onClick: () => {
1654
+ var _a;
1655
+ (_a = header.column) === null || _a === void 0 ? void 0 : _a.pin('left');
1656
+ }, icon: jsxRuntime.jsx(ArrowStepInLeftRegular, {}), disabled: header.column.getIsPinned() === 'left', children: "Pin Left" }), jsxRuntime.jsx(reactComponents.MenuItem, { onClick: () => {
1657
+ var _a;
1658
+ (_a = header.column) === null || _a === void 0 ? void 0 : _a.pin('right');
1659
+ }, icon: jsxRuntime.jsx(ArrowStepInRightRegular, {}), disabled: header.column.getIsPinned() === 'right', children: "Pin Right" })] }) })] }) }), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getCanHide(), children: jsxRuntime.jsxs(reactComponents.Menu, { children: [jsxRuntime.jsx(reactComponents.MenuList, { children: jsxRuntime.jsxs(reactComponents.MenuItem, { onClick: header.column.getToggleVisibilityHandler(), disabled: !header.column.getCanHide(), icon: jsxRuntime.jsx(HideColumnIcon, {}), children: ["Hide Column (", columnName, ")"] }) }), jsxRuntime.jsx(reactComponents.MenuDivider, {})] }) }), jsxRuntime.jsxs(reactControlFlow.Show, { when: header.column.getCanFilter(), children: [jsxRuntime.jsx(reactComponents.MenuDivider, {}), jsxRuntime.jsx(reactComponents.MenuGroup, { children: jsxRuntime.jsxs(reactComponents.MenuList, { children: [jsxRuntime.jsxs(reactComponents.Menu, { children: [jsxRuntime.jsx(reactComponents.MenuTrigger, { disableButtonEnhancement: true, children: jsxRuntime.jsx(reactComponents.MenuItem, { icon: jsxRuntime.jsx(ClearFilterIcon, {}), children: "Clear Filters" }) }), jsxRuntime.jsx(reactComponents.MenuPopover, { children: jsxRuntime.jsxs(reactComponents.MenuList, { children: [jsxRuntime.jsxs(reactComponents.MenuItem, { onClick: () => {
1660
+ header.column.setFilterValue(undefined);
1661
+ }, icon: jsxRuntime.jsx(TextClearFormattingFilled, {}), disabled: !header.column.getIsFiltered(), children: ["Clear for ", columnName] }), jsxRuntime.jsx(reactComponents.MenuItem, { onClick: () => {
1662
+ table.resetColumnFilters();
1663
+ }, icon: jsxRuntime.jsx(ClearFilterIcon, {}), children: "Clear for All Columns" })] }) })] }), jsxRuntime.jsx(reactComponents.MenuItem, { icon: (drawerState === null || drawerState === void 0 ? void 0 : drawerState.isFilterDrawerOpen) ? jsxRuntime.jsx(FilterDismissFilled, {}) : jsxRuntime.jsx(FilterFilled, {}), onClick: () => {
1664
+ if (drawerState.isFilterDrawerOpen) {
1665
+ dispatchDrawerAction === null || dispatchDrawerAction === void 0 ? void 0 : dispatchDrawerAction({ type: "CLOSE_FILTER_DRAWER" });
1666
+ }
1667
+ else {
1668
+ dispatchDrawerAction === null || dispatchDrawerAction === void 0 ? void 0 : dispatchDrawerAction({ type: "OPEN_FILTER_DRAWER" });
1669
+ }
1670
+ }, children: jsxRuntime.jsx(reactControlFlow.Show, { when: drawerState === null || drawerState === void 0 ? void 0 : drawerState.isFilterDrawerOpen, fallback: jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Open Column Filter" }), children: "Close Column Filter" }) })] }) }, 'filter-group')] })] }) })] }));
1671
+ }
1672
+
1673
+ function HeaderRow(props) {
1674
+ const styles = useTableHeaderStyles();
1675
+ const { table, headerGroup, rowSelectionMode, headerGroupsLength } = props;
1676
+ return (jsxRuntime.jsxs("tr", { className: styles.tHeadRow, children: [rowSelectionMode === 'multiple' && (jsxRuntime.jsx("th", { style: { width: '1rem' }, "aria-label": "Select All Row Column", children: headerGroup.depth === headerGroupsLength - 1 && (jsxRuntime.jsx(reactComponents.Checkbox, { checked: table.getIsSomeRowsSelected()
1677
+ ? 'mixed'
1678
+ : table.getIsAllRowsSelected(), onChange: table.getToggleAllRowsSelectedHandler(), "aria-label": "Select All Rows", title: 'Select All Rows' })) })), rowSelectionMode === 'single' && (jsxRuntime.jsx("th", { style: { width: '1rem' }, "aria-label": "Select All Row Column", children: ' ' })), headerGroup.headers.map((header) => {
1679
+ return (jsxRuntime.jsx(HeaderCell, { header: header, table: table, hideMenu: headerGroup.depth !== headerGroupsLength - 1, headerDepth: headerGroup.depth, totalNumberOfHeaderDepth: headerGroupsLength - 1 }, header.id));
1680
+ })] }, headerGroup.id));
1681
+ }
1682
+
1683
+ function TableHeader(props) {
1684
+ const styles = useTableHeaderStyles();
1685
+ const { table, headerGroups, rowSelectionMode } = props;
1686
+ return (jsxRuntime.jsx("thead", { className: styles.tHead, style: { zIndex: 99 }, children: headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map((headerGroup) => (jsxRuntime.jsx(HeaderRow, { table: table, rowSelectionMode: rowSelectionMode, headerGroup: headerGroup, headerGroupsLength: headerGroups.length }, headerGroup.id))) }));
1687
+ }
1688
+
1689
+ const useLoadingStyles = reactComponents.makeStyles({
1690
+ invertedWrapper: {
1691
+ backgroundColor: reactComponents.tokens.colorNeutralBackground1,
1512
1692
  },
1513
- searchContainer: Object.assign(Object.assign(Object.assign({ display: 'flex', flexDirection: 'column', maxHeight: '300px', width: '100%' }, reactComponents.shorthands.overflow('auto', 'auto')), reactComponents.shorthands.padding('0px', "0px", "2px", '0px')), { '::-webkit-scrollbar': Object.assign({ width: '6px', height: '4px' }, reactComponents.shorthands.borderRadius('50%')),
1514
- /* Track */
1515
- '::-webkit-scrollbar-track': {
1516
- 'background-color': '#f1f1f1',
1517
- },
1518
- /* Handle */
1519
- '::-webkit-scrollbar-thumb': {
1520
- 'background-color': '#888',
1521
- },
1522
- /* Handle on hover */
1523
- '::-webkit-scrollbar-thumb:hover': {
1524
- 'background-color': '#555',
1525
- } }),
1693
+ row: Object.assign(Object.assign({ alignItems: "center", display: "grid", paddingBottom: "10px", position: "relative" }, reactComponents.shorthands.gap("10px")), { gridTemplateColumns: "min-content 20% 15% 30% 29%" }),
1526
1694
  });
1527
- const FilterMultiSelectCheckbox = ({ column, table, }) => {
1528
- var _a, _b, _c;
1529
- const firstValue = (_a = table
1530
- .getPreFilteredRowModel()
1531
- .flatRows[0]) === null || _a === void 0 ? void 0 : _a.getValue(column.id);
1532
- const columnFilterValue = column.getFilterValue();
1533
- const [filterOptions, setFilterOptions] = React__namespace.useState([]);
1534
- React__namespace.useEffect(() => {
1535
- const uniqueSortedOptions = typeof firstValue === 'number' || !isNaN(firstValue)
1536
- ? Array.from(column.getFacetedUniqueValues().keys()).sort((a, b) => Number(a) - Number(b))
1537
- : Array.from(column.getFacetedUniqueValues().keys()).sort();
1538
- setFilterOptions(uniqueSortedOptions);
1539
- },
1540
- // eslint-disable-next-line react-hooks/exhaustive-deps
1541
- [column.getFacetedUniqueValues()]);
1542
- const [localColumnFilterValue, setLocalColumnFilterValue] = React__namespace.useState('');
1543
- const filterOptionsFiltered = React__namespace.useMemo(() => {
1544
- if (!localColumnFilterValue)
1545
- return filterOptions;
1546
- return filterOptions.filter((option) => {
1547
- var _a, _b, _c;
1548
- return (_b = (_a = `${option}`) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes((_c = `${localColumnFilterValue}`) === null || _c === void 0 ? void 0 : _c.toLowerCase());
1549
- });
1550
- }, [localColumnFilterValue, filterOptions]);
1551
- const filterContainer = React__namespace.useRef(null);
1552
- const rowVirtualizer = reactVirtual.useVirtual({
1553
- parentRef: filterContainer,
1554
- size: filterOptionsFiltered.length,
1555
- overscan: 15,
1556
- });
1557
- const { virtualItems: virtualRows, totalSize } = rowVirtualizer;
1558
- const paddingTop = virtualRows.length > 0 ? ((_b = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[0]) === null || _b === void 0 ? void 0 : _b.start) || 0 : 0;
1559
- const paddingBottom = virtualRows.length > 0
1560
- ? totalSize - (((_c = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[virtualRows.length - 1]) === null || _c === void 0 ? void 0 : _c.end) || 0)
1561
- : 0;
1562
- const allOptionChecked = (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) > 0 &&
1563
- (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) !== (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.length)
1564
- ? 'mixed'
1565
- : (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) === (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.length) &&
1566
- (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.length) > 0;
1567
- const styles = useCheckboxFilterStyles();
1568
- return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(reactComponents.Input, { type: 'search', value: localColumnFilterValue, onChange: (_, data) => setLocalColumnFilterValue(data.value), placeholder: "Search Options...", size: "small", className: styles.searchInput }), jsxRuntime.jsxs("div", { ref: filterContainer, className: styles.searchContainer, children: [paddingTop > 0 && (jsxRuntime.jsx("span", { style: { paddingTop: `${paddingTop}px` } })), jsxRuntime.jsx(reactComponents.Checkbox, { checked: allOptionChecked, onChange: () => {
1569
- if ((columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) > 0) {
1570
- column.setFilterValue(undefined);
1571
- return;
1572
- }
1573
- column.setFilterValue([
1574
- ...((filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.map((x) => `${x}`)) || []),
1575
- ]);
1576
- }, label: '(Toggle All)' }, `toggle-all-${column.id}`), virtualRows.map((row) => {
1577
- var _a;
1578
- const value = `${filterOptionsFiltered[row.index]}`;
1579
- return (jsxRuntime.jsx(reactComponents.Checkbox, { checked: (_a = columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.includes(value)) !== null && _a !== void 0 ? _a : false, onChange: () => {
1580
- if (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.includes(value)) {
1581
- column.setFilterValue((old) => old === null || old === void 0 ? void 0 : old.filter((v) => v !== value));
1582
- return;
1583
- }
1584
- column.setFilterValue((old) => [
1585
- ...(old || []),
1586
- value,
1587
- ]);
1588
- }, label: value }, `${column.id}-${row.index}`));
1589
- }), paddingBottom > 0 && (jsxRuntime.jsx("span", { style: { paddingBottom: `${paddingBottom}px` } }))] }, 'filter-multi-select-checkbox')] }));
1695
+
1696
+ const Loading = (props) => {
1697
+ const { numberOfItems = 16, numberOfColumns = 5 } = props;
1698
+ const styles = useLoadingStyles();
1699
+ return (jsxRuntime.jsx("div", { className: styles.invertedWrapper, children: jsxRuntime.jsx(reactComponents.Skeleton, { children: [...Array(numberOfItems)].map((_, i) => (jsxRuntime.jsx("div", { className: styles.row, children: [...Array(numberOfColumns)].map((_, i) => {
1700
+ if (i === 0) {
1701
+ return jsxRuntime.jsx(reactComponents.SkeletonItem, { shape: "circle", size: 24 }, i);
1702
+ }
1703
+ return jsxRuntime.jsx(reactComponents.SkeletonItem, { size: 16 }, i);
1704
+ }) }, i))) }) }));
1590
1705
  };
1591
1706
 
1592
- const useRadioFilterStyles = reactComponents.makeStyles({
1593
- searchInput: {
1594
- width: '90%',
1595
- marginBottom: '8px',
1596
- marginLeft: '10px',
1597
- marginRight: '10px',
1598
- },
1599
- searchContainer: Object.assign(Object.assign({ display: 'flex', flexDirection: 'column', maxHeight: '300px', width: '100%' }, reactComponents.shorthands.overflow('auto', 'auto')), { '::-webkit-scrollbar': Object.assign({ width: '6px', height: '4px' }, reactComponents.shorthands.borderRadius('50%')),
1600
- /* Track */
1601
- '::-webkit-scrollbar-track': {
1602
- 'background-color': '#f1f1f1',
1603
- },
1604
- /* Handle */
1605
- '::-webkit-scrollbar-thumb': {
1606
- 'background-color': '#888',
1607
- },
1608
- /* Handle on hover */
1609
- '::-webkit-scrollbar-thumb:hover': {
1610
- 'background-color': '#555',
1611
- } }),
1707
+ const useNoItemGridStyles = reactComponents.makeStyles({
1708
+ wrapper: {
1709
+ backgroundColor: reactComponents.tokens.colorNeutralBackground1,
1710
+ display: "flex",
1711
+ flexWrap: "wrap",
1712
+ alignContent: "center",
1713
+ justifyContent: "center",
1714
+ minHeight: "300px",
1715
+ }
1612
1716
  });
1613
- const FilterSelectRadio = ({ column, table, }) => {
1614
- var _a, _b, _c;
1615
- const firstValue = (_a = table
1616
- .getPreFilteredRowModel()
1617
- .flatRows[0]) === null || _a === void 0 ? void 0 : _a.getValue(column.id);
1618
- const columnFilterValue = column.getFilterValue();
1619
- const [filterOptions, setFilterOptions] = React__namespace.useState([]);
1717
+
1718
+ const NoItemGrid = ({ message }) => {
1719
+ const styles = useNoItemGridStyles();
1720
+ return (jsxRuntime.jsx("div", { className: styles.wrapper, children: jsxRuntime.jsx("div", { children: message ? message : jsxRuntime.jsx(reactComponents.Subtitle2Stronger, { children: "No Data to Show." }) }) }));
1721
+ };
1722
+
1723
+ const useNoFilterMatchStyles = reactComponents.makeStyles({
1724
+ wrapper: {
1725
+ backgroundColor: reactComponents.tokens.colorNeutralBackground1,
1726
+ display: "flex",
1727
+ flexDirection: "column",
1728
+ flexWrap: "wrap",
1729
+ alignContent: "center",
1730
+ justifyContent: "center",
1731
+ minHeight: "300px",
1732
+ },
1733
+ iconWrapper: {
1734
+ display: "flex",
1735
+ flexWrap: "wrap",
1736
+ alignContent: "center",
1737
+ justifyContent: "center",
1738
+ }
1739
+ });
1740
+
1741
+ const NoSearchResult = ({ message }) => {
1742
+ const styles = useNoFilterMatchStyles();
1743
+ return (jsxRuntime.jsxs("div", { className: styles.wrapper, children: [jsxRuntime.jsx("div", { className: styles.iconWrapper, children: jsxRuntime.jsx(DocumentSearch24Regular, {}) }), jsxRuntime.jsx("div", { children: message ? message : jsxRuntime.jsx(reactComponents.Subtitle2Stronger, { children: "No item found that matches your search term." }) })] }));
1744
+ };
1745
+
1746
+ const useTableBodyStyles = reactComponents.makeStyles({
1747
+ tBody: Object.assign(Object.assign({}, reactComponents.shorthands.padding("0px", "0px", "0px", "0px")), { zIndex: 0 }),
1748
+ tBodyRow: Object.assign(Object.assign(Object.assign({}, reactComponents.shorthands.padding("0px", "0px", "0px", "0px")), reactComponents.shorthands.borderBottom(reactComponents.tokens.strokeWidthThin, "solid", reactComponents.tokens.colorNeutralStroke1)), {
1749
+ // ":nth-child(even)": {
1750
+ // backgroundColor: tokens.colorNeutralBackground2,
1751
+ // },
1752
+ ":hover": {
1753
+ backgroundColor: reactComponents.tokens.colorNeutralBackground2Hover,
1754
+ } }),
1755
+ tBodySelectedRow: Object.assign(Object.assign({ backgroundColor: reactComponents.tokens.colorBrandBackground2 }, reactComponents.shorthands.borderBottom(reactComponents.tokens.strokeWidthThin, "solid", reactComponents.tokens.colorNeutralStroke1)), { ":hover": {
1756
+ backgroundColor: reactComponents.tokens.colorBrandBackground2Hover,
1757
+ } }),
1758
+ tBodyCell: Object.assign(Object.assign({ backgroundColor: "transparent" }, reactComponents.shorthands.padding("2px", "4px")), { minHeight: "35px", height: "35px" }),
1759
+ tBodyRowPinnedCell: {
1760
+ backgroundColor: reactComponents.tokens.colorPaletteYellowBackground2,
1761
+ ":hover": {
1762
+ backgroundColor: reactComponents.tokens.colorPaletteMarigoldBackground2,
1763
+ }
1764
+ },
1765
+ tBodyPinnedCell: {
1766
+ backgroundColor: reactComponents.tokens.colorNeutralBackground3,
1767
+ ":hover": {
1768
+ backgroundColor: reactComponents.tokens.colorNeutralBackground3Hover,
1769
+ }
1770
+ },
1771
+ tBodySelectedCell: {
1772
+ backgroundColor: reactComponents.tokens.colorBrandBackground2,
1773
+ ":hover": {
1774
+ backgroundColor: reactComponents.tokens.colorBrandBackground2Hover,
1775
+ }
1776
+ },
1777
+ });
1778
+
1779
+ function TableCell({ cell, row }) {
1780
+ var _a;
1781
+ const styles = useTableBodyStyles();
1782
+ const isSelected = row.getIsSelected();
1783
+ const isRowPinned = row.getIsPinned();
1784
+ const isCellPinned = cell.column.getIsPinned();
1785
+ const cellClassNames = reactComponents.mergeClasses(styles.tBodyCell, isCellPinned && styles.tBodyPinnedCell, isSelected && styles.tBodySelectedCell, isRowPinned && styles.tBodyRowPinnedCell);
1786
+ const { isDragging, transition, setNodeRef, transform } = sortable.useSortable({
1787
+ id: cell.column.id,
1788
+ });
1789
+ const tdStyle = {
1790
+ transform: utilities.CSS.Translate.toString(transform),
1791
+ transition
1792
+ };
1793
+ const styleStyles = getBodyCellPinningStyles(cell.column, isDragging, tdStyle);
1794
+ if (cell.getIsPlaceholder()) {
1795
+ return jsxRuntime.jsx("td", { style: styleStyles, className: cellClassNames, ref: setNodeRef }, cell.id);
1796
+ }
1797
+ if (cell.getIsGrouped()) {
1798
+ return (jsxRuntime.jsx("td", { style: styleStyles, className: cellClassNames, ref: setNodeRef, children: jsxRuntime.jsx(reactComponents.Button, { onClick: row.getToggleExpandedHandler(), style: {
1799
+ cursor: row.getCanExpand() ? 'pointer' : 'normal',
1800
+ textAlign: 'left',
1801
+ }, appearance: "transparent", icon: row.getIsExpanded() ? jsxRuntime.jsx(GroupExpandedIcon, {}) : jsxRuntime.jsx(GroupCollapsedIcon, {}), children: jsxRuntime.jsxs("strong", { children: [reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()), " (", row.subRows.length, ")"] }) }) }, cell.id));
1802
+ }
1803
+ if (cell.getIsAggregated()) {
1804
+ return (jsxRuntime.jsx("td", { style: styleStyles, className: cellClassNames, ref: setNodeRef, children: jsxRuntime.jsx("strong", { children: reactTable.flexRender((_a = cell.column.columnDef.aggregatedCell) !== null && _a !== void 0 ? _a : cell.column.columnDef.cell, cell.getContext()) }) }, cell.id));
1805
+ }
1806
+ return (jsxRuntime.jsx("td", { style: styleStyles, className: cellClassNames, ref: setNodeRef, children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
1807
+ }
1808
+
1809
+ function TableRow({ row, rowSelectionMode, style }) {
1810
+ const styles = useTableBodyStyles();
1811
+ return (jsxRuntime.jsxs("tr", { className: row.getIsSelected() || row.getIsAllSubRowsSelected()
1812
+ ? styles.tBodySelectedRow
1813
+ : styles.tBodyRow, style: style, children: [jsxRuntime.jsxs(reactControlFlow.Switch, { when: rowSelectionMode, children: [jsxRuntime.jsx(reactControlFlow.Case, { value: 'multiple', children: jsxRuntime.jsx("td", { className: styles.tBodyCell, "aria-label": "Select Row Column", children: jsxRuntime.jsx(reactComponents.Checkbox, { checked: row.getIsSomeSelected()
1814
+ ? 'mixed'
1815
+ : row.getIsSelected() || row.getIsAllSubRowsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler(), "aria-label": "Select Row" }) }) }), jsxRuntime.jsx(reactControlFlow.Case, { value: 'single', children: jsxRuntime.jsx("td", { className: styles.tBodyCell, "aria-label": "Select Row Column", children: jsxRuntime.jsx(reactComponents.Radio, { checked: row.getIsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler(), "aria-label": "Select Row" }) }) })] }), row.getVisibleCells().map((cell) => (jsxRuntime.jsx(TableCell, { cell: cell, row: row }, cell.id)))] }, row.id));
1816
+ }
1817
+ function PinnedRow({ row, rowSelectionMode, style, bottomRowLength }) {
1818
+ const styles = useTableBodyStyles();
1819
+ const pinnedRowRawStyle = Object.assign({ backgroundColor: reactComponents.tokens.colorPaletteYellowBackground2, position: 'sticky', top: row.getIsPinned() === 'top' ? `${row.getPinnedIndex() * 35 + 48}px` : undefined, bottom: row.getIsPinned() === 'bottom' ? `${((bottomRowLength || 0) - 1 - row.getPinnedIndex()) * 35}px` : undefined }, style);
1820
+ return (jsxRuntime.jsxs("tr", { className: row.getIsSelected() || row.getIsAllSubRowsSelected()
1821
+ ? styles.tBodySelectedRow
1822
+ : styles.tBodyRow, style: pinnedRowRawStyle, children: [jsxRuntime.jsxs(reactControlFlow.Switch, { when: rowSelectionMode, children: [jsxRuntime.jsx(reactControlFlow.Case, { value: 'multiple', children: jsxRuntime.jsx("td", { className: styles.tBodyCell, "aria-label": "Select Row Column", children: jsxRuntime.jsx(reactComponents.Checkbox, { checked: row.getIsSomeSelected()
1823
+ ? 'mixed'
1824
+ : row.getIsSelected() || row.getIsAllSubRowsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler(), "aria-label": "Select Row" }) }) }), jsxRuntime.jsx(reactControlFlow.Case, { value: 'single', children: jsxRuntime.jsx("td", { className: styles.tBodyCell, "aria-label": "Select Row Column", children: jsxRuntime.jsx(reactComponents.Radio, { checked: row.getIsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler(), "aria-label": "Select Row" }) }) })] }), row.getVisibleCells().map(cell => {
1825
+ return (jsxRuntime.jsx(TableCell, { cell: cell, row: row }, cell.id));
1826
+ })] }, row.id));
1827
+ }
1828
+
1829
+ function TableBody(props) {
1830
+ var _a, _b, _c;
1831
+ const styles = useTableBodyStyles();
1832
+ const { table, tableContainerRef } = props;
1833
+ const rowSelectionMode = (_a = table.options.meta) === null || _a === void 0 ? void 0 : _a.rowSelectionMode;
1834
+ let rows = [];
1835
+ let topRows = [];
1836
+ let bottomRows = [];
1837
+ try {
1838
+ rows = table.getCenterRows();
1839
+ topRows = table.getTopRows();
1840
+ bottomRows = table.getBottomRows();
1841
+ }
1842
+ catch (error) {
1843
+ rows = [];
1844
+ topRows = [];
1845
+ bottomRows = [];
1846
+ }
1847
+ const rowVirtualizer = reactVirtual.useVirtual({
1848
+ parentRef: tableContainerRef,
1849
+ size: rows.length,
1850
+ overscan: 10,
1851
+ });
1852
+ const { virtualItems: virtualRows, totalSize } = rowVirtualizer;
1853
+ const paddingTop = virtualRows.length > 0 ? ((_b = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[0]) === null || _b === void 0 ? void 0 : _b.start) || 0 : 0;
1854
+ const paddingBottom = virtualRows.length > 0
1855
+ ? totalSize - (((_c = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[virtualRows.length - 1]) === null || _c === void 0 ? void 0 : _c.end) || 0)
1856
+ : 0;
1857
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactControlFlow.Show, { when: (topRows === null || topRows === void 0 ? void 0 : topRows.length) > 0, children: jsxRuntime.jsx("thead", { style: {
1858
+ position: "sticky",
1859
+ top: 0,
1860
+ zIndex: 99
1861
+ }, children: jsxRuntime.jsx(reactControlFlow.For, { each: topRows, children: (row, index) => (jsxRuntime.jsx(PinnedRow, { row: row, rowSelectionMode: rowSelectionMode, bottomRowLength: bottomRows === null || bottomRows === void 0 ? void 0 : bottomRows.length }, row.id)) }) }) }), jsxRuntime.jsxs("tbody", { className: styles.tBody, children: [paddingTop > 0 && (jsxRuntime.jsx("tr", { className: styles.tBodyRow, "aria-hidden": true, children: jsxRuntime.jsx("td", { style: { height: `${paddingTop}px` } }) })), jsxRuntime.jsx(reactControlFlow.For, { each: virtualRows || [], children: (virtualRow) => {
1862
+ const row = rows[virtualRow.index];
1863
+ return (jsxRuntime.jsx(TableRow, { row: row, rowSelectionMode: rowSelectionMode }, row.id));
1864
+ } }), paddingBottom > 0 && (jsxRuntime.jsx("tr", { className: styles.tBodyRow, "aria-hidden": true, children: jsxRuntime.jsx("td", { style: { height: `${paddingBottom}px` } }) }))] }), jsxRuntime.jsx(reactControlFlow.Show, { when: rowSelectionMode === 'multiple' && (rows === null || rows === void 0 ? void 0 : rows.length) > 0, children: jsxRuntime.jsx("tfoot", { style: {
1865
+ position: "sticky",
1866
+ bottom: 0,
1867
+ zIndex: 99
1868
+ }, children: jsxRuntime.jsxs("tr", { style: { backgroundColor: "white" }, children: [jsxRuntime.jsx("td", { className: "p-1", children: jsxRuntime.jsx(reactComponents.Checkbox, { checked: table.getIsSomePageRowsSelected()
1869
+ ? 'mixed'
1870
+ : table.getIsAllPageRowsSelected(), onChange: table.getToggleAllPageRowsSelectedHandler(), "aria-label": "Select All Current Page Rows", title: 'Select All Current Page Rows' }) }), jsxRuntime.jsxs("td", { colSpan: 20, children: [table.getIsAllPageRowsSelected() ? 'Unselect' : 'Select', " All Current Page Rows (", table.getRowModel().rows.length, ")"] })] }) }) }), jsxRuntime.jsx(reactControlFlow.Show, { when: (bottomRows === null || bottomRows === void 0 ? void 0 : bottomRows.length) > 0, children: jsxRuntime.jsx("tfoot", { style: {
1871
+ position: "sticky",
1872
+ bottom: 0,
1873
+ zIndex: 99
1874
+ }, children: jsxRuntime.jsx(reactControlFlow.For, { each: bottomRows, children: (row) => (jsxRuntime.jsx(PinnedRow, { row: row, rowSelectionMode: rowSelectionMode, bottomRowLength: bottomRows === null || bottomRows === void 0 ? void 0 : bottomRows.length }, row.id)) }) }) })] }));
1875
+ }
1876
+
1877
+ const TableContainer = (props) => {
1878
+ var _a, _b;
1879
+ const styles = useTableStaticStyles();
1880
+ const { table } = props;
1881
+ const { tableHeight, rowSelectionMode } = table.options.meta || {};
1882
+ const tableContainerRef = React__namespace.useRef(null);
1883
+ const { rows: { length: itemLength } } = table.getRowModel();
1884
+ const headerGroups = table.getHeaderGroups();
1885
+ // utilities
1886
+ const isLoading = props.isLoading && itemLength === 0;
1887
+ const noItems = !isLoading && ((_a = props.data) === null || _a === void 0 ? void 0 : _a.length) === 0;
1888
+ const noSearchResult = !isLoading && ((_b = props === null || props === void 0 ? void 0 : props.data) === null || _b === void 0 ? void 0 : _b.length) > 0 && itemLength === 0;
1889
+ return (jsxRuntime.jsxs("div", { ref: tableContainerRef, className: styles.tableContainer, style: { height: tableHeight }, children: [jsxRuntime.jsxs("table", { className: styles.table, "aria-label": "Data Grid", style: { width: table.getTotalSize(), minWidth: "100%" }, children: [jsxRuntime.jsx(TableHeader, { table: table, rowSelectionMode: rowSelectionMode, headerGroups: headerGroups }), jsxRuntime.jsx(TableBody, { table: table, tableContainerRef: tableContainerRef })] }), jsxRuntime.jsxs(reactControlFlow.Switch, { when: true, children: [jsxRuntime.jsx(reactControlFlow.Case, { value: isLoading, children: jsxRuntime.jsx(Loading, {}) }), jsxRuntime.jsx(reactControlFlow.Case, { value: noItems, children: jsxRuntime.jsx(NoItemGrid, { message: props.noItemPage }) }), jsxRuntime.jsx(reactControlFlow.Case, { value: noSearchResult, children: jsxRuntime.jsx(NoSearchResult, { message: props.noFilterMatchPage }) })] })] }));
1890
+ };
1891
+
1892
+ const useCheckboxFilterStyles = reactComponents.makeStyles({
1893
+ searchInput: {
1894
+ width: '90%',
1895
+ marginBottom: '8px',
1896
+ marginLeft: '10px',
1897
+ marginRight: '10px',
1898
+ },
1899
+ searchContainer: Object.assign(Object.assign(Object.assign({ display: 'flex', flexDirection: 'column', maxHeight: '300px', width: '100%' }, reactComponents.shorthands.overflow('auto', 'auto')), reactComponents.shorthands.padding('0px', "0px", "2px", '0px')), { '::-webkit-scrollbar': Object.assign({ width: '6px', height: '4px' }, reactComponents.shorthands.borderRadius('50%')),
1900
+ /* Track */
1901
+ '::-webkit-scrollbar-track': {
1902
+ 'background-color': '#f1f1f1',
1903
+ },
1904
+ /* Handle */
1905
+ '::-webkit-scrollbar-thumb': {
1906
+ 'background-color': '#888',
1907
+ },
1908
+ /* Handle on hover */
1909
+ '::-webkit-scrollbar-thumb:hover': {
1910
+ 'background-color': '#555',
1911
+ } }),
1912
+ });
1913
+ const FilterMultiSelectCheckbox = ({ column, table, }) => {
1914
+ var _a, _b, _c;
1915
+ const firstValue = (_a = table
1916
+ .getPreFilteredRowModel()
1917
+ .flatRows[0]) === null || _a === void 0 ? void 0 : _a.getValue(column.id);
1918
+ const columnFilterValue = column.getFilterValue();
1919
+ const [filterOptions, setFilterOptions] = React__namespace.useState([]);
1620
1920
  React__namespace.useEffect(() => {
1621
1921
  const uniqueSortedOptions = typeof firstValue === 'number' || !isNaN(firstValue)
1622
1922
  ? Array.from(column.getFacetedUniqueValues().keys()).sort((a, b) => Number(a) - Number(b))
@@ -1645,42 +1945,128 @@ const FilterSelectRadio = ({ column, table, }) => {
1645
1945
  const paddingBottom = virtualRows.length > 0
1646
1946
  ? totalSize - (((_c = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[virtualRows.length - 1]) === null || _c === void 0 ? void 0 : _c.end) || 0)
1647
1947
  : 0;
1648
- const styles = useRadioFilterStyles();
1649
- return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(reactComponents.Input, { value: localColumnFilterValue, onChange: (_, data) => setLocalColumnFilterValue(data.value), placeholder: "Search Options...", size: "small", className: styles.searchInput }), jsxRuntime.jsxs("div", { ref: filterContainer, className: styles.searchContainer, children: [paddingTop > 0 && jsxRuntime.jsx("div", { style: { paddingTop: `${paddingTop}px` } }), jsxRuntime.jsxs(reactComponents.RadioGroup, { layout: "vertical", value: (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[0]) || '', onChange: (_, data) => {
1650
- if (data.value === '') {
1651
- column.setFilterValue([]);
1948
+ const allOptionChecked = (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) > 0 &&
1949
+ (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) !== (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.length)
1950
+ ? 'mixed'
1951
+ : (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) === (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.length) &&
1952
+ (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.length) > 0;
1953
+ const styles = useCheckboxFilterStyles();
1954
+ return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(reactComponents.Input, { type: 'search', value: localColumnFilterValue, onChange: (_, data) => setLocalColumnFilterValue(data.value), placeholder: "Search Options...", size: "small", className: styles.searchInput }), jsxRuntime.jsxs("div", { ref: filterContainer, className: styles.searchContainer, children: [paddingTop > 0 && (jsxRuntime.jsx("span", { style: { paddingTop: `${paddingTop}px` } })), jsxRuntime.jsx(reactComponents.Checkbox, { checked: allOptionChecked, onChange: () => {
1955
+ if ((columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) > 0) {
1956
+ column.setFilterValue(undefined);
1652
1957
  return;
1653
1958
  }
1654
- column.setFilterValue([data.value]);
1655
- }, children: [jsxRuntime.jsx(reactComponents.Radio, { value: '', label: 'None' }), virtualRows.map((row) => {
1656
- const value = filterOptionsFiltered[row.index];
1657
- return jsxRuntime.jsx(reactComponents.Radio, { value: value, label: value }, value);
1658
- })] }), paddingBottom > 0 && (jsxRuntime.jsx("div", { style: { paddingBottom: `${paddingBottom}px` } }))] })] }));
1959
+ column.setFilterValue([
1960
+ ...((filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.map((x) => `${x}`)) || []),
1961
+ ]);
1962
+ }, label: '(Toggle All)' }, `toggle-all-${column.id}`), virtualRows.map((row) => {
1963
+ var _a;
1964
+ const value = `${filterOptionsFiltered[row.index]}`;
1965
+ return (jsxRuntime.jsx(reactComponents.Checkbox, { checked: (_a = columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.includes(value)) !== null && _a !== void 0 ? _a : false, onChange: () => {
1966
+ if (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.includes(value)) {
1967
+ column.setFilterValue((old) => old === null || old === void 0 ? void 0 : old.filter((v) => v !== value));
1968
+ return;
1969
+ }
1970
+ column.setFilterValue((old) => [
1971
+ ...(old || []),
1972
+ value,
1973
+ ]);
1974
+ }, label: value }, `${column.id}-${row.index}`));
1975
+ }), paddingBottom > 0 && (jsxRuntime.jsx("span", { style: { paddingBottom: `${paddingBottom}px` } }))] }, 'filter-multi-select-checkbox')] }));
1659
1976
  };
1660
1977
 
1661
- const useNumberRangeFilterStyles$2 = reactComponents.makeStyles({
1978
+ const useRadioFilterStyles = reactComponents.makeStyles({
1662
1979
  searchInput: {
1663
- width: '100%',
1664
- },
1665
- searchInputField: {
1666
- width: '100%',
1667
- flexGrow: 1,
1668
- },
1669
- searchContainer: {
1670
- display: 'flex',
1980
+ width: '90%',
1671
1981
  marginBottom: '8px',
1672
1982
  marginLeft: '10px',
1673
1983
  marginRight: '10px',
1674
- }
1675
- });
1676
- const FilterNumberRange = (props) => {
1677
- var _a, _b, _c, _d, _e, _f, _g, _h;
1678
- const { column } = props;
1679
- const columnFilterValue = column.getFilterValue();
1680
- const min = Number((_b = (_a = column.getFacetedMinMaxValues()) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : '');
1681
- const max = Number((_d = (_c = column.getFacetedMinMaxValues()) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : '');
1682
- const handleMinChange = (e, data) => {
1683
- const value = Number(data.value);
1984
+ },
1985
+ searchContainer: Object.assign(Object.assign({ display: 'flex', flexDirection: 'column', maxHeight: '300px', width: '100%' }, reactComponents.shorthands.overflow('auto', 'auto')), { '::-webkit-scrollbar': Object.assign({ width: '6px', height: '4px' }, reactComponents.shorthands.borderRadius('50%')),
1986
+ /* Track */
1987
+ '::-webkit-scrollbar-track': {
1988
+ 'background-color': '#f1f1f1',
1989
+ },
1990
+ /* Handle */
1991
+ '::-webkit-scrollbar-thumb': {
1992
+ 'background-color': '#888',
1993
+ },
1994
+ /* Handle on hover */
1995
+ '::-webkit-scrollbar-thumb:hover': {
1996
+ 'background-color': '#555',
1997
+ } }),
1998
+ });
1999
+ const FilterSelectRadio = ({ column, table, }) => {
2000
+ var _a, _b, _c;
2001
+ const firstValue = (_a = table
2002
+ .getPreFilteredRowModel()
2003
+ .flatRows[0]) === null || _a === void 0 ? void 0 : _a.getValue(column.id);
2004
+ const columnFilterValue = column.getFilterValue();
2005
+ const [filterOptions, setFilterOptions] = React__namespace.useState([]);
2006
+ React__namespace.useEffect(() => {
2007
+ const uniqueSortedOptions = typeof firstValue === 'number' || !isNaN(firstValue)
2008
+ ? Array.from(column.getFacetedUniqueValues().keys()).sort((a, b) => Number(a) - Number(b))
2009
+ : Array.from(column.getFacetedUniqueValues().keys()).sort();
2010
+ setFilterOptions(uniqueSortedOptions);
2011
+ },
2012
+ // eslint-disable-next-line react-hooks/exhaustive-deps
2013
+ [column.getFacetedUniqueValues()]);
2014
+ const [localColumnFilterValue, setLocalColumnFilterValue] = React__namespace.useState('');
2015
+ const filterOptionsFiltered = React__namespace.useMemo(() => {
2016
+ if (!localColumnFilterValue)
2017
+ return filterOptions;
2018
+ return filterOptions.filter((option) => {
2019
+ var _a, _b, _c;
2020
+ return (_b = (_a = `${option}`) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes((_c = `${localColumnFilterValue}`) === null || _c === void 0 ? void 0 : _c.toLowerCase());
2021
+ });
2022
+ }, [localColumnFilterValue, filterOptions]);
2023
+ const filterContainer = React__namespace.useRef(null);
2024
+ const rowVirtualizer = reactVirtual.useVirtual({
2025
+ parentRef: filterContainer,
2026
+ size: filterOptionsFiltered.length,
2027
+ overscan: 15,
2028
+ });
2029
+ const { virtualItems: virtualRows, totalSize } = rowVirtualizer;
2030
+ const paddingTop = virtualRows.length > 0 ? ((_b = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[0]) === null || _b === void 0 ? void 0 : _b.start) || 0 : 0;
2031
+ const paddingBottom = virtualRows.length > 0
2032
+ ? totalSize - (((_c = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[virtualRows.length - 1]) === null || _c === void 0 ? void 0 : _c.end) || 0)
2033
+ : 0;
2034
+ const styles = useRadioFilterStyles();
2035
+ return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(reactComponents.Input, { value: localColumnFilterValue, onChange: (_, data) => setLocalColumnFilterValue(data.value), placeholder: "Search Options...", size: "small", className: styles.searchInput }), jsxRuntime.jsxs("div", { ref: filterContainer, className: styles.searchContainer, children: [paddingTop > 0 && jsxRuntime.jsx("div", { style: { paddingTop: `${paddingTop}px` } }), jsxRuntime.jsxs(reactComponents.RadioGroup, { layout: "vertical", value: (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[0]) || '', onChange: (_, data) => {
2036
+ if (data.value === '') {
2037
+ column.setFilterValue([]);
2038
+ return;
2039
+ }
2040
+ column.setFilterValue([data.value]);
2041
+ }, children: [jsxRuntime.jsx(reactComponents.Radio, { value: '', label: 'None' }), virtualRows.map((row) => {
2042
+ const value = filterOptionsFiltered[row.index];
2043
+ return jsxRuntime.jsx(reactComponents.Radio, { value: value, label: value }, value);
2044
+ })] }), paddingBottom > 0 && (jsxRuntime.jsx("div", { style: { paddingBottom: `${paddingBottom}px` } }))] })] }));
2045
+ };
2046
+
2047
+ const useNumberRangeFilterStyles$2 = reactComponents.makeStyles({
2048
+ searchInput: {
2049
+ width: '100%',
2050
+ },
2051
+ searchInputField: {
2052
+ width: '100%',
2053
+ flexGrow: 1,
2054
+ },
2055
+ searchContainer: {
2056
+ display: 'flex',
2057
+ marginBottom: '8px',
2058
+ marginLeft: '10px',
2059
+ marginRight: '10px',
2060
+ }
2061
+ });
2062
+ const FilterNumberRange = (props) => {
2063
+ var _a, _b, _c, _d, _e, _f, _g, _h;
2064
+ const { column } = props;
2065
+ const columnFilterValue = column.getFilterValue();
2066
+ const min = Number((_b = (_a = column.getFacetedMinMaxValues()) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : '');
2067
+ const max = Number((_d = (_c = column.getFacetedMinMaxValues()) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : '');
2068
+ const handleMinChange = (e, data) => {
2069
+ const value = Number(data.value);
1684
2070
  column.setFilterValue((old) => [value, old === null || old === void 0 ? void 0 : old[1]]);
1685
2071
  };
1686
2072
  const handleMaxChange = (e, data) => {
@@ -1729,476 +2115,133 @@ const FilterDateRange = (props) => {
1729
2115
  column.setFilterValue((old) => [old === null || old === void 0 ? void 0 : old[0], undefined]);
1730
2116
  return;
1731
2117
  }
1732
- column.setFilterValue((old) => [old === null || old === void 0 ? void 0 : old[0], date]);
1733
- };
1734
- const styles = useNumberRangeFilterStyles$1();
1735
- return (jsxRuntime.jsxs("div", { className: styles.searchContainer, children: [jsxRuntime.jsx(reactComponents.Field, { label: 'From Date:', size: "small", className: styles.searchInputField, children: jsxRuntime.jsx(reactDatepickerCompat.DatePicker, { value: (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[0]) || null, min: min, max: max, onSelectDate: handleMinChange, className: styles.searchInput, placeholder: `From Date`, size: 'small', allowTextInput: true }) }), jsxRuntime.jsx(reactComponents.Field, { label: 'To Date:', size: "small", className: styles.searchInputField, children: jsxRuntime.jsx(reactDatepickerCompat.DatePicker, { value: (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[1]) || null, min: min, max: max, onSelectDate: handleMaxChange, className: styles.searchInput, placeholder: `To Date`, size: 'small', allowTextInput: true }) })] }));
1736
- };
1737
-
1738
- const useNumberRangeFilterStyles = reactComponents.makeStyles({
1739
- searchInput: {
1740
- width: '100%',
1741
- },
1742
- searchInputField: {
1743
- width: '100%',
1744
- flexGrow: 1,
1745
- },
1746
- searchContainer: {
1747
- display: 'flex',
1748
- flexDirection: 'column',
1749
- marginBottom: '8px',
1750
- marginLeft: '10px',
1751
- marginRight: '10px',
1752
- },
1753
- });
1754
- const FilterDate = (props) => {
1755
- var _a, _b, _c, _d;
1756
- const { column } = props;
1757
- const columnFilterValue = column.getFilterValue();
1758
- const min = (_b = (_a = column.getFacetedMinMaxValues()) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : undefined;
1759
- const max = (_d = (_c = column.getFacetedMinMaxValues()) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : undefined;
1760
- const onDateSelect = (date) => {
1761
- if (!date) {
1762
- column.setFilterValue(undefined);
1763
- return;
1764
- }
1765
- column.setFilterValue(date);
1766
- };
1767
- const styles = useNumberRangeFilterStyles();
1768
- return (jsxRuntime.jsx("div", { className: styles.searchContainer, children: jsxRuntime.jsx(reactDatepickerCompat.DatePicker, { value: columnFilterValue || null, min: min, max: max, onSelectDate: onDateSelect, className: styles.searchInput, placeholder: `Select a date`, size: 'small', allowTextInput: true }) }));
1769
- };
1770
-
1771
- const useFilterStyles = reactComponents.makeStyles({
1772
- searchInput: {
1773
- width: '100%',
1774
- },
1775
- searchInputField: {
1776
- width: '100%',
1777
- flexGrow: 1,
1778
- },
1779
- searchContainer: {
1780
- display: 'flex',
1781
- marginBottom: '8px',
1782
- marginLeft: '10px',
1783
- marginRight: '10px',
1784
- },
1785
- });
1786
- const Filter = ({ column, table, }) => {
1787
- var _a, _b;
1788
- const filterFunctionName = column.columnDef.filterFn;
1789
- const styles = useFilterStyles();
1790
- switch (filterFunctionName) {
1791
- case 'arrIncludesSome':
1792
- return jsxRuntime.jsx(FilterMultiSelectCheckbox, { column: column, table: table });
1793
- case 'arrIncludesAll':
1794
- case 'arrIncludes':
1795
- return jsxRuntime.jsx(FilterSelectRadio, { column: column, table: table });
1796
- case 'inNumberRange':
1797
- return jsxRuntime.jsx(FilterNumberRange, { column: column, table: table });
1798
- case 'inDateRange': {
1799
- const firstValue = (_a = table
1800
- .getPreFilteredRowModel()
1801
- .flatRows[0]) === null || _a === void 0 ? void 0 : _a.getValue(column.id);
1802
- if (typeof firstValue.getMonth === 'function') {
1803
- return jsxRuntime.jsx(FilterDateRange, { column: column, table: table });
1804
- }
1805
- break;
1806
- }
1807
- case 'matchDate': {
1808
- const firstValue = (_b = table
1809
- .getPreFilteredRowModel()
1810
- .flatRows[0]) === null || _b === void 0 ? void 0 : _b.getValue(column.id);
1811
- if (typeof firstValue.getMonth === 'function') {
1812
- return jsxRuntime.jsx(FilterDate, { column: column, table: table });
1813
- }
1814
- break;
1815
- }
1816
- }
1817
- return (jsxRuntime.jsx("div", { className: styles.searchContainer, children: jsxRuntime.jsx(reactComponents.Field, { size: 'small', className: styles.searchInputField, children: jsxRuntime.jsx(reactComponents.Input, { value: (column.getFilterValue() || ''), onChange: (_, data) => {
1818
- column.setFilterValue(data.value);
1819
- }, placeholder: "Search Keyword...", size: "small", className: styles.searchInput }) }) }));
1820
- };
1821
-
1822
- const useFilterDrawerStyles$1 = reactComponents.makeStyles({
1823
- drawerBody: Object.assign(Object.assign({}, reactComponents.shorthands.overflow('hidden', 'auto')), {
1824
- /* width */
1825
- ':hover': Object.assign({}, reactComponents.shorthands.overflow('auto', 'auto')), '::-webkit-scrollbar': Object.assign({ width: '6px', height: '4px' }, reactComponents.shorthands.borderRadius('50%')),
1826
- /* Track */
1827
- '::-webkit-scrollbar-track': {
1828
- 'background-color': '#f1f1f1',
1829
- },
1830
- /* Handle */
1831
- '::-webkit-scrollbar-thumb': {
1832
- 'background-color': '#888',
1833
- },
1834
- /* Handle on hover */
1835
- '::-webkit-scrollbar-thumb:hover': {
1836
- 'background-color': '#555',
1837
- } }),
1838
- });
1839
- const FilterDrawer = ({ drawerState, dispatch, table }) => {
1840
- const headerGroups = table.getHeaderGroups();
1841
- const styles = useFilterDrawerStyles$1();
1842
- const resetAllFilters = React__namespace.useCallback(() => {
1843
- table.setGlobalFilter('');
1844
- table.resetColumnFilters();
1845
- }, [table]);
1846
- return (jsxRuntime.jsxs(reactComponents.InlineDrawer, { position: "end", open: drawerState.isFilterDrawerOpen, separator: true, children: [jsxRuntime.jsx(reactComponents.DrawerHeader, { children: jsxRuntime.jsx(reactComponents.DrawerHeaderTitle, { action: jsxRuntime.jsx(reactComponents.Button, { appearance: "subtle", "aria-label": "Close", icon: jsxRuntime.jsx(Dismiss24Regular, {}), onClick: () => dispatch({ type: "CLOSE_FILTER_DRAWER" }) }), children: "Advanced Filters" }) }), jsxRuntime.jsx(reactComponents.DrawerBody, { className: styles.drawerBody, children: jsxRuntime.jsx(reactComponents.Accordion, { multiple: true, collapsible: true, children: headerGroups.map((headerGroup) => {
1847
- const canApplyFilter = headerGroup.depth === (headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.length) - 1;
1848
- if (!canApplyFilter)
1849
- return null;
1850
- return headerGroup.headers.map((header) => {
1851
- const canFilter = header.column.getCanFilter();
1852
- if (!canFilter)
1853
- return null;
1854
- return (jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getCanFilter(), children: jsxRuntime.jsxs(reactComponents.AccordionItem, { value: header.column.id, children: [jsxRuntime.jsx(reactComponents.AccordionHeader, { expandIconPosition: 'end', children: jsxRuntime.jsxs(reactComponents.Caption1Stronger, { children: ["Filter by", ' ', reactTable.flexRender(header.column.columnDef.header, header.getContext())] }) }), jsxRuntime.jsx(reactComponents.AccordionPanel, { children: jsxRuntime.jsx(Filter, { column: header.column, table: table }) })] }, header.column.id) }, header.column.id));
1855
- });
1856
- }) }) }), jsxRuntime.jsx(reactComponents.DrawerFooter, { children: jsxRuntime.jsx(reactComponents.Button, { icon: jsxRuntime.jsx(ClearFilterIcon, {}), onClick: resetAllFilters, style: { width: "100%" }, children: "Clear All Filters" }) })] }));
1857
- };
1858
-
1859
- const getHeaderCellPinningStyles = (column) => {
1860
- const isPinned = column.getIsPinned();
1861
- const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
1862
- const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');
1863
- const styles = {
1864
- boxShadow: isLastLeftPinnedColumn
1865
- ? '-4px 0 4px -4px gray inset'
1866
- : isFirstRightPinnedColumn
1867
- ? '4px 0 4px -4px gray inset'
1868
- : undefined,
1869
- left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,
1870
- right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined,
1871
- opacity: isPinned ? 0.95 : 1,
1872
- position: isPinned ? 'sticky' : 'relative',
1873
- width: column.getSize(),
1874
- zIndex: isPinned ? 99 : 1,
1875
- backgroundColor: reactComponents.tokens.colorNeutralCardBackgroundSelected,
1876
- };
1877
- return styles;
1878
- };
1879
- const getBodyCellPinningStyles = (column) => {
1880
- const isPinned = column.getIsPinned();
1881
- const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
1882
- const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');
1883
- const styles = {
1884
- boxShadow: isLastLeftPinnedColumn
1885
- ? '-4px 0 4px -4px gray inset'
1886
- : isFirstRightPinnedColumn
1887
- ? '4px 0 4px -4px gray inset'
1888
- : undefined,
1889
- left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,
1890
- right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined,
1891
- opacity: isPinned ? 0.95 : 1,
1892
- position: isPinned ? 'sticky' : 'relative',
1893
- width: column.getSize(),
1894
- zIndex: isPinned ? 1 : 0,
1895
- };
1896
- return styles;
1897
- };
1898
-
1899
- const SortAscIcon = bundleIcon$1(ArrowSortDown20Filled, ArrowSortDown20Regular);
1900
- const SortDescIcon = bundleIcon$1(ArrowSortUp20Filled, ArrowSortUp20Regular);
1901
- const PinIcon = bundleIcon$1(PinFilled, PinRegular);
1902
- function HeaderCell({ header, table, hideMenu, headerDepth, totalNumberOfHeaderDepth, }) {
1903
- var _a;
1904
- const { column } = header;
1905
- const { isDragging, attributes, listeners, setNodeRef, transform, transition, } = sortable.useSortable({
1906
- id: column.id
1907
- });
1908
- const dndStyle = {
1909
- width: header.column.getSize(),
1910
- opacity: isDragging ? 0.8 : 1,
1911
- // position: isDragging ? 'relative' : "sticky",
1912
- transform: utilities.CSS.Translate.toString(transform), // translate instead of transform to avoid squishing
1913
- // transition: 'width transform 0.2s ease-in-out',
1914
- whiteSpace: 'wrap',
1915
- zIndex: isDragging ? 100 : 99,
1916
- transition
1917
- };
1918
- const styles = useTableHeaderStyles();
1919
- const isLeafHeaders = headerDepth === totalNumberOfHeaderDepth;
1920
- if (header.isPlaceholder) {
1921
- return (jsxRuntime.jsx("th", { colSpan: header.colSpan, className: styles.tHeadCell, style: Object.assign(Object.assign({}, dndStyle), getHeaderCellPinningStyles(column)), ref: setNodeRef, children: jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getCanResize(), children: jsxRuntime.jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: reactComponents.mergeClasses(styles.resizer, column.getIsResizing() && styles.resizerActive) }) }) }));
1922
- }
1923
- return (jsxRuntime.jsxs("th", { colSpan: header.colSpan, className: reactComponents.mergeClasses(styles.tHeadCell, isLeafHeaders && styles.tHeadNonLeafCell, isDragging && styles.tHeadCellDragging), style: Object.assign(Object.assign({}, dndStyle), getHeaderCellPinningStyles(column)), ref: setNodeRef, children: [jsxRuntime.jsx("div", Object.assign({ className: styles.tHeadCellDraggable }, attributes, listeners, { children: jsxRuntime.jsxs("div", { className: isLeafHeaders
1924
- ? styles.tLeafHeadCellContent
1925
- : styles.tNonLeafHeadCellContent, children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx(reactControlFlow.Show, { when: !header.isPlaceholder, children: jsxRuntime.jsxs(reactComponents.Button, { style: {
1926
- display: 'flex',
1927
- alignItems: 'center',
1928
- justifyContent: 'left',
1929
- flex: 1,
1930
- }, onClick: (e) => {
1931
- if (!header.column.getCanSort())
1932
- return;
1933
- header.column.toggleSorting(header.column.getIsSorted() === 'asc', e.ctrlKey);
1934
- }, onDoubleClick: () => {
1935
- if (!header.column.getCanGroup())
1936
- return;
1937
- header.column.getToggleGroupingHandler()();
1938
- }, appearance: "transparent", className: styles.tHeadContentBtn, icon: (_a = {
1939
- asc: (jsxRuntime.jsx("strong", { children: jsxRuntime.jsx(SortAscIcon, {}) })),
1940
- desc: (jsxRuntime.jsx("strong", { children: jsxRuntime.jsx(SortDescIcon, {}) })),
1941
- }[header.column.getIsSorted()]) !== null && _a !== void 0 ? _a : undefined, iconPosition: "after", children: [jsxRuntime.jsx("strong", { children: reactTable.flexRender(header.column.columnDef.header, header.getContext()) }), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getIsGrouped(), children: jsxRuntime.jsx("strong", { children: jsxRuntime.jsx(GroupListRegular, {}) }) }), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getIsFiltered(), children: jsxRuntime.jsx("strong", { children: jsxRuntime.jsx(FilterFilled, {}) }) }), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getIsPinned(), children: jsxRuntime.jsx("strong", { children: jsxRuntime.jsx(PinRegular, {}) }) })] }) }) }), jsxRuntime.jsx(HeaderMenu, { header: header, table: table, hideMenu: hideMenu })] }) })), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getCanResize(), children: jsxRuntime.jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: reactComponents.mergeClasses(styles.resizer, column.getIsResizing() && styles.resizerActive) }) }), jsxRuntime.jsx(reactControlFlow.Show, { when: !isLeafHeaders, children: jsxRuntime.jsx("div", { className: styles.tHeadNonLeafCellFakeBorder }) })] }));
1942
- }
1943
- function HeaderMenu(props) {
1944
- const { header, table, hideMenu } = props;
1945
- const styles = useTableHeaderStyles();
1946
- if (hideMenu || header.isPlaceholder)
1947
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }));
1948
- const canHavePopOver = header.column.getCanSort() ||
1949
- header.column.getCanGroup() ||
1950
- header.column.getCanFilter();
1951
- if (!canHavePopOver)
1952
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }));
1953
- return (jsxRuntime.jsxs(reactComponents.Menu, { children: [jsxRuntime.jsx(reactComponents.MenuTrigger, { disableButtonEnhancement: true, children: jsxRuntime.jsx(reactComponents.MenuButton, { appearance: "transparent", "aria-label": "View Column Actions" }) }), jsxRuntime.jsx(reactComponents.MenuPopover, { className: styles.tHeadMenuPopover, children: jsxRuntime.jsxs(reactComponents.MenuList, { children: [jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getCanSort(), children: jsxRuntime.jsxs(reactComponents.MenuGroup, { children: [jsxRuntime.jsx(reactComponents.MenuItem, { onClick: (e) => {
1954
- var _a;
1955
- const isControlKeySelected = e.ctrlKey;
1956
- (_a = header.column) === null || _a === void 0 ? void 0 : _a.toggleSorting(false, isControlKeySelected);
1957
- }, icon: jsxRuntime.jsx(TextSortAscendingFilled, {}), disabled: header.column.getIsSorted() === 'asc', children: "Sort A to Z" }), jsxRuntime.jsx(reactComponents.MenuItem, { onClick: (e) => {
1958
- var _a;
1959
- const isControlKeySelected = e.ctrlKey;
1960
- (_a = header.column) === null || _a === void 0 ? void 0 : _a.toggleSorting(true, isControlKeySelected);
1961
- }, icon: jsxRuntime.jsx(TextSortDescendingFilled, {}), disabled: header.column.getIsSorted() === 'desc', children: "Sort Z to A" }), jsxRuntime.jsx(reactComponents.MenuDivider, {})] }, 'sort-group') }), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getCanGroup(), children: jsxRuntime.jsxs(reactComponents.MenuGroup, { children: [!header.column.getIsGrouped() && (jsxRuntime.jsxs(reactComponents.MenuItem, { onClick: () => header.column.getToggleGroupingHandler()(), icon: jsxRuntime.jsx(GroupFilled, {}), children: ["Group by", ' ', reactTable.flexRender(header.column.columnDef.header, header.getContext())] })), header.column.getIsGrouped() && (jsxRuntime.jsxs(reactComponents.MenuItem, { onClick: () => header.column.getToggleGroupingHandler()(), icon: jsxRuntime.jsx(GroupDismissFilled, {}), children: ["Remove Grouping on", ' ', reactTable.flexRender(header.column.columnDef.header, header.getContext())] })), jsxRuntime.jsx(reactComponents.MenuDivider, {})] }, 'grouping-group') }), jsxRuntime.jsxs(reactControlFlow.Show, { when: header.column.getCanPin(), children: [jsxRuntime.jsxs(reactComponents.Menu, { children: [jsxRuntime.jsx(reactComponents.MenuTrigger, { disableButtonEnhancement: true, children: jsxRuntime.jsx(reactComponents.MenuItem, { icon: jsxRuntime.jsx(PinIcon, {}), children: "Pin Column" }) }), jsxRuntime.jsx(reactComponents.MenuPopover, { children: jsxRuntime.jsxs(reactComponents.MenuList, { children: [jsxRuntime.jsx(reactControlFlow.Show, { when: ['left', 'right'].includes(header.column.getIsPinned()), children: jsxRuntime.jsx(reactComponents.MenuItem, { onClick: () => {
1962
- var _a;
1963
- (_a = header.column) === null || _a === void 0 ? void 0 : _a.pin(false);
1964
- }, icon: jsxRuntime.jsx(PinOffRegular, {}), children: "No Pin" }) }), jsxRuntime.jsx(reactComponents.MenuItem, { onClick: () => {
1965
- var _a;
1966
- (_a = header.column) === null || _a === void 0 ? void 0 : _a.pin('left');
1967
- }, icon: jsxRuntime.jsx(ArrowStepInLeftRegular, {}), disabled: header.column.getIsPinned() === 'left', children: "Pin Left" }), jsxRuntime.jsx(reactComponents.MenuItem, { onClick: () => {
1968
- var _a;
1969
- (_a = header.column) === null || _a === void 0 ? void 0 : _a.pin('right');
1970
- }, icon: jsxRuntime.jsx(ArrowStepInRightRegular, {}), disabled: header.column.getIsPinned() === 'right', children: "Pin Right" })] }) })] }), jsxRuntime.jsx(reactComponents.MenuDivider, {})] }), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getCanFilter(), children: jsxRuntime.jsxs(reactComponents.MenuGroup, { children: [jsxRuntime.jsxs(reactComponents.MenuGroupHeader, { children: ["Filter by", ' ', reactTable.flexRender(header.column.columnDef.header, header.getContext())] }), jsxRuntime.jsx(Filter, { column: header.column, table: table })] }, 'filter-group') })] }) })] }));
1971
- }
1972
-
1973
- function HeaderRow(props) {
1974
- const styles = useTableHeaderStyles();
1975
- const { table, headerGroup, rowSelectionMode, headerGroupsLength } = props;
1976
- return (jsxRuntime.jsxs("tr", { className: styles.tHeadRow, children: [rowSelectionMode === 'multiple' && (jsxRuntime.jsx("th", { style: { width: '1rem' }, "aria-label": "Select All Row Column", children: headerGroup.depth === headerGroupsLength - 1 && (jsxRuntime.jsx(reactComponents.Checkbox, { checked: table.getIsSomeRowsSelected()
1977
- ? 'mixed'
1978
- : table.getIsAllRowsSelected(), onChange: table.getToggleAllRowsSelectedHandler(), "aria-label": "Select All Rows", title: 'Select All Rows' })) })), rowSelectionMode === 'single' && (jsxRuntime.jsx("th", { style: { width: '1rem' }, "aria-label": "Select All Row Column", children: ' ' })), headerGroup.headers.map((header) => {
1979
- return (jsxRuntime.jsx(HeaderCell, { header: header, table: table, hideMenu: headerGroup.depth !== headerGroupsLength - 1, headerDepth: headerGroup.depth, totalNumberOfHeaderDepth: headerGroupsLength - 1 }, header.id));
1980
- })] }, headerGroup.id));
1981
- }
1982
-
1983
- function TableHeader(props) {
1984
- const styles = useTableHeaderStyles();
1985
- const { table, headerGroups, rowSelectionMode } = props;
1986
- return (jsxRuntime.jsx("thead", { className: styles.tHead, style: { zIndex: 99 }, children: headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map((headerGroup) => (jsxRuntime.jsx(HeaderRow, { table: table, rowSelectionMode: rowSelectionMode, headerGroup: headerGroup, headerGroupsLength: headerGroups.length }, headerGroup.id))) }));
1987
- }
1988
-
1989
- const useLoadingStyles = reactComponents.makeStyles({
1990
- invertedWrapper: {
1991
- backgroundColor: reactComponents.tokens.colorNeutralBackground1,
1992
- },
1993
- row: Object.assign(Object.assign({ alignItems: "center", display: "grid", paddingBottom: "10px", position: "relative" }, reactComponents.shorthands.gap("10px")), { gridTemplateColumns: "min-content 20% 15% 30% 29%" }),
1994
- });
1995
-
1996
- const Loading = (props) => {
1997
- const { numberOfItems = 16, numberOfColumns = 5 } = props;
1998
- const styles = useLoadingStyles();
1999
- return (jsxRuntime.jsx("div", { className: styles.invertedWrapper, children: jsxRuntime.jsx(reactComponents.Skeleton, { children: [...Array(numberOfItems)].map((_, i) => (jsxRuntime.jsx("div", { className: styles.row, children: [...Array(numberOfColumns)].map((_, i) => {
2000
- if (i === 0) {
2001
- return jsxRuntime.jsx(reactComponents.SkeletonItem, { shape: "circle", size: 24 }, i);
2002
- }
2003
- return jsxRuntime.jsx(reactComponents.SkeletonItem, { size: 16 }, i);
2004
- }) }, i))) }) }));
2005
- };
2006
-
2007
- const useNoItemGridStyles = reactComponents.makeStyles({
2008
- wrapper: {
2009
- backgroundColor: reactComponents.tokens.colorNeutralBackground1,
2010
- display: "flex",
2011
- flexWrap: "wrap",
2012
- alignContent: "center",
2013
- justifyContent: "center",
2014
- minHeight: "300px",
2015
- }
2016
- });
2017
-
2018
- const NoItemGrid = ({ message }) => {
2019
- const styles = useNoItemGridStyles();
2020
- return (jsxRuntime.jsx("div", { className: styles.wrapper, children: jsxRuntime.jsx("div", { children: message ? message : jsxRuntime.jsx(reactComponents.Subtitle2Stronger, { children: "No Data to Show." }) }) }));
2021
- };
2022
-
2023
- const useNoFilterMatchStyles = reactComponents.makeStyles({
2024
- wrapper: {
2025
- backgroundColor: reactComponents.tokens.colorNeutralBackground1,
2026
- display: "flex",
2027
- flexDirection: "column",
2028
- flexWrap: "wrap",
2029
- alignContent: "center",
2030
- justifyContent: "center",
2031
- minHeight: "300px",
2032
- },
2033
- iconWrapper: {
2034
- display: "flex",
2035
- flexWrap: "wrap",
2036
- alignContent: "center",
2037
- justifyContent: "center",
2038
- }
2039
- });
2040
-
2041
- const NoSearchResult = ({ message }) => {
2042
- const styles = useNoFilterMatchStyles();
2043
- return (jsxRuntime.jsxs("div", { className: styles.wrapper, children: [jsxRuntime.jsx("div", { className: styles.iconWrapper, children: jsxRuntime.jsx(DocumentSearch24Regular, {}) }), jsxRuntime.jsx("div", { children: message ? message : jsxRuntime.jsx(reactComponents.Subtitle2Stronger, { children: "No item found that matches your search term." }) })] }));
2044
- };
2045
-
2046
- const useTableBodyStyles = reactComponents.makeStyles({
2047
- tBody: Object.assign(Object.assign({}, reactComponents.shorthands.padding("0px", "0px", "0px", "0px")), { zIndex: 0 }),
2048
- tBodyRow: Object.assign(Object.assign(Object.assign({}, reactComponents.shorthands.padding("0px", "0px", "0px", "0px")), reactComponents.shorthands.borderBottom(reactComponents.tokens.strokeWidthThin, "solid", reactComponents.tokens.colorNeutralStroke1)), {
2049
- // ":nth-child(even)": {
2050
- // backgroundColor: tokens.colorNeutralBackground2,
2051
- // },
2052
- ":hover": {
2053
- backgroundColor: reactComponents.tokens.colorNeutralBackground2Hover,
2054
- } }),
2055
- tBodySelectedRow: Object.assign(Object.assign({ backgroundColor: reactComponents.tokens.colorBrandBackground2 }, reactComponents.shorthands.borderBottom(reactComponents.tokens.strokeWidthThin, "solid", reactComponents.tokens.colorNeutralStroke1)), { ":hover": {
2056
- backgroundColor: reactComponents.tokens.colorBrandBackground2Hover,
2057
- } }),
2058
- tBodyCell: Object.assign(Object.assign({ backgroundColor: "transparent" }, reactComponents.shorthands.padding("2px", "4px")), { minHeight: "35px", height: "35px" }),
2059
- tBodyRowPinnedCell: {
2060
- backgroundColor: reactComponents.tokens.colorPaletteYellowBackground2,
2061
- ":hover": {
2062
- backgroundColor: reactComponents.tokens.colorPaletteMarigoldBackground2,
2063
- }
2064
- },
2065
- tBodyPinnedCell: {
2066
- backgroundColor: reactComponents.tokens.colorNeutralBackground3,
2067
- ":hover": {
2068
- backgroundColor: reactComponents.tokens.colorNeutralBackground3Hover,
2069
- }
2118
+ column.setFilterValue((old) => [old === null || old === void 0 ? void 0 : old[0], date]);
2119
+ };
2120
+ const styles = useNumberRangeFilterStyles$1();
2121
+ return (jsxRuntime.jsxs("div", { className: styles.searchContainer, children: [jsxRuntime.jsx(reactComponents.Field, { label: 'From Date:', size: "small", className: styles.searchInputField, children: jsxRuntime.jsx(reactDatepickerCompat.DatePicker, { value: (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[0]) || null, min: min, max: max, onSelectDate: handleMinChange, className: styles.searchInput, placeholder: `From Date`, size: 'small', allowTextInput: true }) }), jsxRuntime.jsx(reactComponents.Field, { label: 'To Date:', size: "small", className: styles.searchInputField, children: jsxRuntime.jsx(reactDatepickerCompat.DatePicker, { value: (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[1]) || null, min: min, max: max, onSelectDate: handleMaxChange, className: styles.searchInput, placeholder: `To Date`, size: 'small', allowTextInput: true }) })] }));
2122
+ };
2123
+
2124
+ const useNumberRangeFilterStyles = reactComponents.makeStyles({
2125
+ searchInput: {
2126
+ width: '100%',
2070
2127
  },
2071
- tBodySelectedCell: {
2072
- backgroundColor: reactComponents.tokens.colorBrandBackground2,
2073
- ":hover": {
2074
- backgroundColor: reactComponents.tokens.colorBrandBackground2Hover,
2075
- }
2128
+ searchInputField: {
2129
+ width: '100%',
2130
+ flexGrow: 1,
2131
+ },
2132
+ searchContainer: {
2133
+ display: 'flex',
2134
+ flexDirection: 'column',
2135
+ marginBottom: '8px',
2136
+ marginLeft: '10px',
2137
+ marginRight: '10px',
2076
2138
  },
2077
2139
  });
2078
-
2079
- function TableCell({ cell, row }) {
2080
- var _a;
2081
- const styles = useTableBodyStyles();
2082
- const isSelected = row.getIsSelected();
2083
- const isRowPinned = row.getIsPinned();
2084
- const isCellPinned = cell.column.getIsPinned();
2085
- const { isDragging, transition, setNodeRef, transform } = sortable.useSortable({
2086
- id: cell.column.id,
2087
- });
2088
- const tdStyle = {
2089
- width: cell.column.getSize(),
2090
- opacity: isDragging ? "0.8" : "1",
2091
- transform: utilities.CSS.Translate.toString(transform),
2092
- // transition: 'width transform 0.2s ease-in-out',
2093
- zIndex: isDragging ? 1 : 0,
2094
- transition
2140
+ const FilterDate = (props) => {
2141
+ var _a, _b, _c, _d;
2142
+ const { column } = props;
2143
+ const columnFilterValue = column.getFilterValue();
2144
+ const min = (_b = (_a = column.getFacetedMinMaxValues()) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : undefined;
2145
+ const max = (_d = (_c = column.getFacetedMinMaxValues()) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : undefined;
2146
+ const onDateSelect = (date) => {
2147
+ if (!date) {
2148
+ column.setFilterValue(undefined);
2149
+ return;
2150
+ }
2151
+ column.setFilterValue(date);
2095
2152
  };
2096
- const cellClassNames = reactComponents.mergeClasses(styles.tBodyCell, isCellPinned && styles.tBodyPinnedCell, isSelected && styles.tBodySelectedCell, isRowPinned && styles.tBodyRowPinnedCell);
2097
- const styleStyles = Object.assign(Object.assign({}, tdStyle), getBodyCellPinningStyles(cell.column));
2098
- if (cell.getIsPlaceholder()) {
2099
- return jsxRuntime.jsx("td", { style: styleStyles, className: cellClassNames, ref: setNodeRef }, cell.id);
2100
- }
2101
- if (cell.getIsGrouped()) {
2102
- return (jsxRuntime.jsx("td", { style: styleStyles, className: cellClassNames, ref: setNodeRef, children: jsxRuntime.jsx(reactComponents.Button, { onClick: row.getToggleExpandedHandler(), style: {
2103
- cursor: row.getCanExpand() ? 'pointer' : 'normal',
2104
- textAlign: 'left',
2105
- }, appearance: "transparent", icon: row.getIsExpanded() ? jsxRuntime.jsx(GroupExpandedIcon, {}) : jsxRuntime.jsx(GroupCollapsedIcon, {}), children: jsxRuntime.jsxs("strong", { children: [reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()), " (", row.subRows.length, ")"] }) }) }, cell.id));
2106
- }
2107
- if (cell.getIsAggregated()) {
2108
- return (jsxRuntime.jsx("td", { style: styleStyles, className: cellClassNames, ref: setNodeRef, children: jsxRuntime.jsx("strong", { children: reactTable.flexRender((_a = cell.column.columnDef.aggregatedCell) !== null && _a !== void 0 ? _a : cell.column.columnDef.cell, cell.getContext()) }) }, cell.id));
2109
- }
2110
- return (jsxRuntime.jsx("td", { style: styleStyles, className: cellClassNames, ref: setNodeRef, children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
2111
- }
2112
-
2113
- function TableRow({ row, rowSelectionMode, style }) {
2114
- const styles = useTableBodyStyles();
2115
- return (jsxRuntime.jsxs("tr", { className: row.getIsSelected() || row.getIsAllSubRowsSelected()
2116
- ? styles.tBodySelectedRow
2117
- : styles.tBodyRow, style: style, children: [jsxRuntime.jsxs(reactControlFlow.Switch, { when: rowSelectionMode, children: [jsxRuntime.jsx(reactControlFlow.Case, { value: 'multiple', children: jsxRuntime.jsx("td", { className: styles.tBodyCell, "aria-label": "Select Row Column", children: jsxRuntime.jsx(reactComponents.Checkbox, { checked: row.getIsSomeSelected()
2118
- ? 'mixed'
2119
- : row.getIsSelected() || row.getIsAllSubRowsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler(), "aria-label": "Select Row" }) }) }), jsxRuntime.jsx(reactControlFlow.Case, { value: 'single', children: jsxRuntime.jsx("td", { className: styles.tBodyCell, "aria-label": "Select Row Column", children: jsxRuntime.jsx(reactComponents.Radio, { checked: row.getIsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler(), "aria-label": "Select Row" }) }) })] }), row.getVisibleCells().map((cell) => (jsxRuntime.jsx(TableCell, { cell: cell, row: row }, cell.id)))] }, row.id));
2120
- }
2121
- function PinnedRow({ row, rowSelectionMode, style, bottomRowLength }) {
2122
- const styles = useTableBodyStyles();
2123
- return (jsxRuntime.jsxs("tr", { className: row.getIsSelected() || row.getIsAllSubRowsSelected()
2124
- ? styles.tBodySelectedRow
2125
- : styles.tBodyRow, style: {
2126
- backgroundColor: 'goldenrod',
2127
- position: 'sticky',
2128
- top: row.getIsPinned() === 'top'
2129
- ? `${row.getPinnedIndex() * 35 + 48}px`
2130
- : undefined,
2131
- bottom: row.getIsPinned() === 'bottom'
2132
- ? `${((bottomRowLength || 0) - 1 - row.getPinnedIndex()) * 35}px`
2133
- : undefined
2134
- }, children: [jsxRuntime.jsxs(reactControlFlow.Switch, { when: rowSelectionMode, children: [jsxRuntime.jsx(reactControlFlow.Case, { value: 'multiple', children: jsxRuntime.jsx("td", { className: styles.tBodyCell, "aria-label": "Select Row Column", children: jsxRuntime.jsx(reactComponents.Checkbox, { checked: row.getIsSomeSelected()
2135
- ? 'mixed'
2136
- : row.getIsSelected() || row.getIsAllSubRowsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler(), "aria-label": "Select Row" }) }) }), jsxRuntime.jsx(reactControlFlow.Case, { value: 'single', children: jsxRuntime.jsx("td", { className: styles.tBodyCell, "aria-label": "Select Row Column", children: jsxRuntime.jsx(reactComponents.Radio, { checked: row.getIsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler(), "aria-label": "Select Row" }) }) })] }), row.getVisibleCells().map(cell => {
2137
- return (jsxRuntime.jsx(TableCell, { cell: cell, row: row }, cell.id));
2138
- })] }, row.id));
2139
- }
2153
+ const styles = useNumberRangeFilterStyles();
2154
+ return (jsxRuntime.jsx("div", { className: styles.searchContainer, children: jsxRuntime.jsx(reactDatepickerCompat.DatePicker, { value: columnFilterValue || null, min: min, max: max, onSelectDate: onDateSelect, className: styles.searchInput, placeholder: `Select a date`, size: 'small', allowTextInput: true }) }));
2155
+ };
2140
2156
 
2141
- function TableBody(props) {
2142
- var _a, _b, _c;
2143
- const styles = useTableBodyStyles();
2144
- const { table, tableContainerRef } = props;
2145
- const rowSelectionMode = (_a = table.options.meta) === null || _a === void 0 ? void 0 : _a.rowSelectionMode;
2146
- let rows = [];
2147
- let topRows = [];
2148
- let bottomRows = [];
2149
- try {
2150
- rows = table.getCenterRows();
2151
- topRows = table.getTopRows();
2152
- bottomRows = table.getBottomRows();
2153
- }
2154
- catch (error) {
2155
- rows = [];
2156
- topRows = [];
2157
- bottomRows = [];
2157
+ const useFilterStyles = reactComponents.makeStyles({
2158
+ searchInput: {
2159
+ width: '100%',
2160
+ },
2161
+ searchInputField: {
2162
+ width: '100%',
2163
+ flexGrow: 1,
2164
+ },
2165
+ searchContainer: {
2166
+ display: 'flex',
2167
+ marginBottom: '8px',
2168
+ marginLeft: '10px',
2169
+ marginRight: '10px',
2170
+ },
2171
+ });
2172
+ const Filter = ({ column, table, }) => {
2173
+ var _a, _b;
2174
+ const filterFunctionName = column.columnDef.filterFn;
2175
+ const styles = useFilterStyles();
2176
+ switch (filterFunctionName) {
2177
+ case 'arrIncludesSome':
2178
+ return jsxRuntime.jsx(FilterMultiSelectCheckbox, { column: column, table: table });
2179
+ case 'arrIncludesAll':
2180
+ case 'arrIncludes':
2181
+ return jsxRuntime.jsx(FilterSelectRadio, { column: column, table: table });
2182
+ case 'inNumberRange':
2183
+ return jsxRuntime.jsx(FilterNumberRange, { column: column, table: table });
2184
+ case 'inDateRange': {
2185
+ const firstValue = (_a = table
2186
+ .getPreFilteredRowModel()
2187
+ .flatRows[0]) === null || _a === void 0 ? void 0 : _a.getValue(column.id);
2188
+ if (typeof firstValue.getMonth === 'function') {
2189
+ return jsxRuntime.jsx(FilterDateRange, { column: column, table: table });
2190
+ }
2191
+ break;
2192
+ }
2193
+ case 'matchDate': {
2194
+ const firstValue = (_b = table
2195
+ .getPreFilteredRowModel()
2196
+ .flatRows[0]) === null || _b === void 0 ? void 0 : _b.getValue(column.id);
2197
+ if (typeof firstValue.getMonth === 'function') {
2198
+ return jsxRuntime.jsx(FilterDate, { column: column, table: table });
2199
+ }
2200
+ break;
2201
+ }
2158
2202
  }
2159
- const rowVirtualizer = reactVirtual.useVirtual({
2160
- parentRef: tableContainerRef,
2161
- size: rows.length,
2162
- overscan: 10,
2163
- });
2164
- const { virtualItems: virtualRows, totalSize } = rowVirtualizer;
2165
- const paddingTop = virtualRows.length > 0 ? ((_b = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[0]) === null || _b === void 0 ? void 0 : _b.start) || 0 : 0;
2166
- const paddingBottom = virtualRows.length > 0
2167
- ? totalSize - (((_c = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[virtualRows.length - 1]) === null || _c === void 0 ? void 0 : _c.end) || 0)
2168
- : 0;
2169
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactControlFlow.Show, { when: (topRows === null || topRows === void 0 ? void 0 : topRows.length) > 0, children: jsxRuntime.jsx("thead", { style: {
2170
- position: "sticky",
2171
- top: 0,
2172
- zIndex: 99
2173
- }, children: jsxRuntime.jsx(reactControlFlow.For, { each: topRows, children: (row, index) => (jsxRuntime.jsx(PinnedRow, { row: row, rowSelectionMode: rowSelectionMode, bottomRowLength: bottomRows === null || bottomRows === void 0 ? void 0 : bottomRows.length }, row.id)) }) }) }), jsxRuntime.jsxs("tbody", { className: styles.tBody, children: [paddingTop > 0 && (jsxRuntime.jsx("tr", { className: styles.tBodyRow, "aria-hidden": true, children: jsxRuntime.jsx("td", { style: { height: `${paddingTop}px` } }) })), jsxRuntime.jsx(reactControlFlow.For, { each: virtualRows || [], children: (virtualRow) => {
2174
- const row = rows[virtualRow.index];
2175
- return (jsxRuntime.jsx(TableRow, { row: row, rowSelectionMode: rowSelectionMode }, row.id));
2176
- } }), paddingBottom > 0 && (jsxRuntime.jsx("tr", { className: styles.tBodyRow, "aria-hidden": true, children: jsxRuntime.jsx("td", { style: { height: `${paddingBottom}px` } }) }))] }), jsxRuntime.jsx(reactControlFlow.Show, { when: rowSelectionMode === 'multiple' && (rows === null || rows === void 0 ? void 0 : rows.length) > 0, children: jsxRuntime.jsx("tfoot", { style: {
2177
- position: "sticky",
2178
- bottom: 0,
2179
- zIndex: 99
2180
- }, children: jsxRuntime.jsxs("tr", { style: { backgroundColor: "white" }, children: [jsxRuntime.jsx("td", { className: "p-1", children: jsxRuntime.jsx(reactComponents.Checkbox, { checked: table.getIsSomePageRowsSelected()
2181
- ? 'mixed'
2182
- : table.getIsAllPageRowsSelected(), onChange: table.getToggleAllPageRowsSelectedHandler(), "aria-label": "Select All Current Page Rows", title: 'Select All Current Page Rows' }) }), jsxRuntime.jsxs("td", { colSpan: 20, children: [table.getIsAllPageRowsSelected() ? 'Unselect' : 'Select', " All Current Page Rows (", table.getRowModel().rows.length, ")"] })] }) }) }), jsxRuntime.jsx(reactControlFlow.Show, { when: (bottomRows === null || bottomRows === void 0 ? void 0 : bottomRows.length) > 0, children: jsxRuntime.jsx("tfoot", { style: {
2183
- position: "sticky",
2184
- bottom: 0,
2185
- zIndex: 99
2186
- }, children: jsxRuntime.jsx(reactControlFlow.For, { each: bottomRows, children: (row) => (jsxRuntime.jsx(PinnedRow, { row: row, rowSelectionMode: rowSelectionMode, bottomRowLength: bottomRows === null || bottomRows === void 0 ? void 0 : bottomRows.length }, row.id)) }) }) })] }));
2187
- }
2203
+ return (jsxRuntime.jsx("div", { className: styles.searchContainer, children: jsxRuntime.jsx(reactComponents.Field, { size: 'small', className: styles.searchInputField, children: jsxRuntime.jsx(reactComponents.Input, { value: (column.getFilterValue() || ''), onChange: (_, data) => {
2204
+ column.setFilterValue(data.value);
2205
+ }, placeholder: "Search Keyword...", size: "small", className: styles.searchInput }) }) }));
2206
+ };
2188
2207
 
2189
- const TableContainer = (props) => {
2190
- var _a, _b;
2191
- const styles = useTableStaticStyles();
2192
- const { table } = props;
2193
- const { tableHeight, rowSelectionMode } = table.options.meta || {};
2194
- const tableContainerRef = React__namespace.useRef(null);
2195
- const { rows: { length: itemLength } } = table.getRowModel();
2208
+ const useFilterDrawerStyles$1 = reactComponents.makeStyles({
2209
+ drawerBody: Object.assign(Object.assign({}, reactComponents.shorthands.overflow('hidden', 'auto')), {
2210
+ /* width */
2211
+ ':hover': Object.assign({}, reactComponents.shorthands.overflow('auto', 'auto')), '::-webkit-scrollbar': Object.assign({ width: '6px', height: '4px' }, reactComponents.shorthands.borderRadius('50%')),
2212
+ /* Track */
2213
+ '::-webkit-scrollbar-track': {
2214
+ 'background-color': '#f1f1f1',
2215
+ },
2216
+ /* Handle */
2217
+ '::-webkit-scrollbar-thumb': {
2218
+ 'background-color': '#888',
2219
+ },
2220
+ /* Handle on hover */
2221
+ '::-webkit-scrollbar-thumb:hover': {
2222
+ 'background-color': '#555',
2223
+ } }),
2224
+ });
2225
+ const FilterDrawer = ({ table }) => {
2196
2226
  const headerGroups = table.getHeaderGroups();
2197
- // utilities
2198
- const isLoading = props.isLoading && itemLength === 0;
2199
- const noItems = !isLoading && ((_a = props.data) === null || _a === void 0 ? void 0 : _a.length) === 0;
2200
- const noSearchResult = !isLoading && ((_b = props === null || props === void 0 ? void 0 : props.data) === null || _b === void 0 ? void 0 : _b.length) > 0 && itemLength === 0;
2201
- return (jsxRuntime.jsxs("div", { ref: tableContainerRef, className: styles.tableContainer, style: { height: tableHeight }, children: [jsxRuntime.jsxs("table", { className: styles.table, "aria-label": "Data Grid", style: { width: table.getTotalSize(), minWidth: "100%" }, children: [jsxRuntime.jsx(TableHeader, { table: table, rowSelectionMode: rowSelectionMode, headerGroups: headerGroups }), jsxRuntime.jsx(TableBody, { table: table, tableContainerRef: tableContainerRef })] }), jsxRuntime.jsxs(reactControlFlow.Switch, { when: true, children: [jsxRuntime.jsx(reactControlFlow.Case, { value: isLoading, children: jsxRuntime.jsx(Loading, {}) }), jsxRuntime.jsx(reactControlFlow.Case, { value: noItems, children: jsxRuntime.jsx(NoItemGrid, { message: props.noItemPage }) }), jsxRuntime.jsx(reactControlFlow.Case, { value: noSearchResult, children: jsxRuntime.jsx(NoSearchResult, { message: props.noFilterMatchPage }) })] })] }));
2227
+ const styles = useFilterDrawerStyles$1();
2228
+ const resetAllFilters = React__namespace.useCallback(() => {
2229
+ table.setGlobalFilter('');
2230
+ table.resetColumnFilters();
2231
+ }, [table]);
2232
+ /* eslint-disable @typescript-eslint/no-non-null-assertion */
2233
+ const { dispatchDrawerAction, drawerState } = table.options.meta;
2234
+ return (jsxRuntime.jsxs(reactComponents.InlineDrawer, { position: "end", open: drawerState === null || drawerState === void 0 ? void 0 : drawerState.isFilterDrawerOpen, separator: true, children: [jsxRuntime.jsx(reactComponents.DrawerHeader, { children: jsxRuntime.jsx(reactComponents.DrawerHeaderTitle, { action: jsxRuntime.jsx(reactComponents.Button, { appearance: "subtle", "aria-label": "Close", icon: jsxRuntime.jsx(Dismiss24Regular, {}), onClick: () => dispatchDrawerAction === null || dispatchDrawerAction === void 0 ? void 0 : dispatchDrawerAction({ type: "CLOSE_FILTER_DRAWER" }) }), children: "Column Filters" }) }), jsxRuntime.jsx(reactComponents.DrawerBody, { className: styles.drawerBody, children: jsxRuntime.jsx(reactComponents.Accordion, { multiple: true, collapsible: true, children: headerGroups.map((headerGroup) => {
2235
+ const canApplyFilter = headerGroup.depth === (headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.length) - 1;
2236
+ if (!canApplyFilter)
2237
+ return null;
2238
+ return headerGroup.headers.map((header) => {
2239
+ const canFilter = header.column.getCanFilter();
2240
+ if (!canFilter)
2241
+ return null;
2242
+ return (jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getCanFilter(), children: jsxRuntime.jsxs(reactComponents.AccordionItem, { value: header.column.id, children: [jsxRuntime.jsx(reactComponents.AccordionHeader, { expandIconPosition: 'end', children: jsxRuntime.jsxs(reactComponents.Caption1Stronger, { children: ["Filter by", ' ', reactTable.flexRender(header.column.columnDef.header, header.getContext())] }) }), jsxRuntime.jsx(reactComponents.AccordionPanel, { children: jsxRuntime.jsx(Filter, { column: header.column, table: table }) })] }, header.column.id) }, header.column.id));
2243
+ });
2244
+ }) }) }), jsxRuntime.jsx(reactComponents.DrawerFooter, { children: jsxRuntime.jsx(reactComponents.Button, { icon: jsxRuntime.jsx(ClearFilterIcon, {}), onClick: resetAllFilters, style: { width: "100%" }, children: "Clear All Filters" }) })] }));
2202
2245
  };
2203
2246
 
2204
2247
  const ViewSaveForm = (props) => {
@@ -2260,14 +2303,16 @@ const useFilterDrawerStyles = reactComponents.makeStyles({
2260
2303
  } }),
2261
2304
  });
2262
2305
  const ViewsDrawer = (props) => {
2263
- const { table, drawerState, dispatch, tableViews, applyTableState, resetToGridDefaultView } = props;
2306
+ const { table, tableViews, applyTableState, resetToGridDefaultView } = props;
2307
+ /* eslint-disable @typescript-eslint/no-non-null-assertion */
2308
+ const { dispatchDrawerAction, drawerState } = table.options.meta;
2264
2309
  const { onTableViewDelete, onTableViewSave } = table.options.meta || {};
2265
2310
  const [checkedValues, setCheckedValues] = React__namespace.useState({ font: ["calibri"] });
2266
2311
  const onChange = (e, { name, checkedItems }) => {
2267
2312
  setCheckedValues((s) => (Object.assign(Object.assign({}, s), { [name]: checkedItems })));
2268
2313
  };
2269
2314
  const styles = useFilterDrawerStyles();
2270
- return (jsxRuntime.jsxs(reactComponents.InlineDrawer, { position: "end", open: drawerState.isViewsDrawerOpen, separator: true, children: [jsxRuntime.jsx(reactComponents.DrawerHeader, { children: jsxRuntime.jsx(reactComponents.DrawerHeaderTitle, { action: jsxRuntime.jsx(reactComponents.Button, { appearance: "subtle", "aria-label": "Close", icon: jsxRuntime.jsx(Dismiss24Regular, {}), onClick: () => dispatch({ type: "CLOSE_VIEW_DRAWER" }) }), children: "Table Views" }) }), jsxRuntime.jsxs(reactComponents.DrawerBody, { className: styles.drawerBody, children: [onTableViewSave && jsxRuntime.jsx(ViewSaveForm, { mode: 'create', getTableState: table.getState, onSave: onTableViewSave }), jsxRuntime.jsxs(reactComponents.MenuList, { checkedValues: checkedValues, onCheckedValueChange: onChange, children: [jsxRuntime.jsx(reactComponents.MenuItemRadio, { name: 'table-views', value: 'Default View', icon: jsxRuntime.jsx(ViewDesktop20Filled, {}), onClick: resetToGridDefaultView, children: "Default View" }), tableViews.length > 0 && jsxRuntime.jsx(reactComponents.MenuDivider, { children: "Additional Views" }), tableViews.map((view) => {
2315
+ return (jsxRuntime.jsxs(reactComponents.InlineDrawer, { position: "end", open: drawerState.isViewsDrawerOpen, separator: true, children: [jsxRuntime.jsx(reactComponents.DrawerHeader, { children: jsxRuntime.jsx(reactComponents.DrawerHeaderTitle, { action: jsxRuntime.jsx(reactComponents.Button, { appearance: "subtle", "aria-label": "Close", icon: jsxRuntime.jsx(Dismiss24Regular, {}), onClick: () => dispatchDrawerAction === null || dispatchDrawerAction === void 0 ? void 0 : dispatchDrawerAction({ type: "CLOSE_VIEW_DRAWER" }) }), children: "Table Views" }) }), jsxRuntime.jsxs(reactComponents.DrawerBody, { className: styles.drawerBody, children: [onTableViewSave && jsxRuntime.jsx(ViewSaveForm, { mode: 'create', getTableState: table.getState, onSave: onTableViewSave }), jsxRuntime.jsxs(reactComponents.MenuList, { checkedValues: checkedValues, onCheckedValueChange: onChange, children: [jsxRuntime.jsx(reactComponents.MenuItemRadio, { name: 'table-views', value: 'Default View', icon: jsxRuntime.jsx(ViewDesktop20Filled, {}), onClick: resetToGridDefaultView, children: "Default View" }), tableViews.length > 0 && jsxRuntime.jsx(reactComponents.MenuDivider, { children: "Additional Views" }), tableViews.map((view) => {
2271
2316
  return (jsxRuntime.jsxs("div", { style: {
2272
2317
  display: 'flex',
2273
2318
  justifyContent: 'space-between',
@@ -2277,41 +2322,9 @@ const ViewsDrawer = (props) => {
2277
2322
  })] })] }), jsxRuntime.jsx(reactComponents.DrawerFooter, { children: jsxRuntime.jsxs(reactComponents.MenuList, { children: [jsxRuntime.jsx(reactComponents.MenuDivider, {}), jsxRuntime.jsx(reactComponents.MenuItem, { icon: jsxRuntime.jsx(ClearFilterIcon, {}), onClick: resetToGridDefaultView, children: "Reset to Default View" })] }) })] }));
2278
2323
  };
2279
2324
 
2280
- const TableActions = {
2281
- TOGGLE_FILTER_DRAWER: 'TOGGLE_FILTER_DRAWER',
2282
- TOGGLE_VIEW_DRAWER: 'TOGGLE_VIEW_DRAWER',
2283
- OPEN_FILTER_DRAWER: 'OPEN_FILTER_DRAWER',
2284
- OPEN_VIEW_DRAWER: 'OPEN_VIEW_DRAWER',
2285
- CLOSE_FILTER_DRAWER: 'CLOSE_FILTER_DRAWER',
2286
- CLOSE_VIEW_DRAWER: 'CLOSE_VIEW_DRAWER',
2287
- };
2288
- // write a reducer function to handle the state of the table
2289
- function tableReducer(state, action) {
2290
- switch (action.type) {
2291
- case TableActions.TOGGLE_FILTER_DRAWER:
2292
- return Object.assign(Object.assign({}, state), { isFilterDrawerOpen: !state.isFilterDrawerOpen });
2293
- case TableActions.TOGGLE_VIEW_DRAWER:
2294
- return Object.assign(Object.assign({}, state), { isViewsDrawerOpen: !state.isViewsDrawerOpen });
2295
- case TableActions.OPEN_FILTER_DRAWER:
2296
- return Object.assign(Object.assign({}, state), { isFilterDrawerOpen: true });
2297
- case TableActions.OPEN_VIEW_DRAWER:
2298
- return Object.assign(Object.assign({}, state), { isViewsDrawerOpen: true });
2299
- case TableActions.CLOSE_FILTER_DRAWER:
2300
- return Object.assign(Object.assign({}, state), { isFilterDrawerOpen: false });
2301
- case TableActions.CLOSE_VIEW_DRAWER:
2302
- return Object.assign(Object.assign({}, state), { isViewsDrawerOpen: false });
2303
- default:
2304
- return state;
2305
- }
2306
- }
2307
-
2308
2325
  function AdvancedTable(props, ref) {
2309
2326
  useStaticStyles();
2310
2327
  const { table, globalFilter, headerMenu, tableViews, setGlobalFilter, resetToDefaultView, applyTableState } = useGridContainer(props, ref);
2311
- const [drawerState, dispatch] = React__namespace.useReducer(tableReducer, {
2312
- isFilterDrawerOpen: false,
2313
- isViewsDrawerOpen: false
2314
- });
2315
2328
  const { getState, setColumnOrder } = table;
2316
2329
  const { columnOrder } = getState();
2317
2330
  function handleDragEnd(event) {
@@ -2326,14 +2339,14 @@ function AdvancedTable(props, ref) {
2326
2339
  }
2327
2340
  const pointerSensor = core.useSensor(core.PointerSensor, {
2328
2341
  activationConstraint: {
2329
- distance: 0.01
2342
+ distance: 0.0001
2330
2343
  }
2331
2344
  });
2332
2345
  const mouseSensor = core.useSensor(core.MouseSensor);
2333
2346
  const touchSensor = core.useSensor(core.TouchSensor);
2334
2347
  const keyboardSensor = core.useSensor(core.KeyboardSensor);
2335
2348
  const sensors = core.useSensors(mouseSensor, touchSensor, keyboardSensor, pointerSensor);
2336
- return (jsxRuntime.jsx(core.DndContext, { collisionDetection: core.closestCenter, modifiers: [modifiers.restrictToHorizontalAxis], onDragEnd: handleDragEnd, sensors: sensors, children: jsxRuntime.jsxs(sortable.SortableContext, { items: columnOrder, strategy: sortable.horizontalListSortingStrategy, children: [jsxRuntime.jsx(reactControlFlow.Show, { when: !props.disableTableHeader, children: jsxRuntime.jsx(GridHeader, { table: table, gridTitle: props.gridTitle, headerMenu: headerMenu, globalFilter: globalFilter, setGlobalFilter: setGlobalFilter, applyTableState: applyTableState, drawerState: drawerState, dispatch: dispatch }) }), jsxRuntime.jsxs("div", { style: { display: 'flex' }, children: [jsxRuntime.jsx(TableContainer, { table: table, data: props.data, isLoading: props.isLoading || false, noFilterMatchPage: props.noFilterMatchPage, noItemPage: props.noItemPage }), jsxRuntime.jsx(FilterDrawer, { drawerState: drawerState, dispatch: dispatch, table: table }), jsxRuntime.jsx(ViewsDrawer, { table: table, drawerState: drawerState, dispatch: dispatch, tableViews: tableViews, applyTableState: applyTableState, resetToGridDefaultView: resetToDefaultView })] }), jsxRuntime.jsx(Pagination, { table: table })] }) }));
2349
+ return (jsxRuntime.jsx(core.DndContext, { collisionDetection: core.closestCenter, modifiers: [modifiers.restrictToHorizontalAxis], onDragEnd: handleDragEnd, sensors: sensors, children: jsxRuntime.jsxs(sortable.SortableContext, { items: columnOrder, strategy: sortable.horizontalListSortingStrategy, children: [jsxRuntime.jsx(reactControlFlow.Show, { when: !props.disableTableHeader, children: jsxRuntime.jsx(GridHeader, { table: table, gridTitle: props.gridTitle, headerMenu: headerMenu, globalFilter: globalFilter, setGlobalFilter: setGlobalFilter, applyTableState: applyTableState }) }), jsxRuntime.jsxs("div", { style: { display: 'flex' }, children: [jsxRuntime.jsx(TableContainer, { table: table, data: props.data, isLoading: props.isLoading || false, noFilterMatchPage: props.noFilterMatchPage, noItemPage: props.noItemPage }), jsxRuntime.jsx(FilterDrawer, { table: table }), jsxRuntime.jsx(ViewsDrawer, { table: table, tableViews: tableViews, applyTableState: applyTableState, resetToGridDefaultView: resetToDefaultView })] }), jsxRuntime.jsx(Pagination, { table: table })] }) }));
2337
2350
  }
2338
2351
  const ForwardedAdvancedTable = React__namespace.forwardRef(AdvancedTable);
2339
2352