@prt-ts/fluent-react-table-v2 9.46.8-build.5.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 (10) hide show
  1. package/index.cjs.js +691 -679
  2. package/index.esm.js +692 -680
  3. package/package.json +1 -2
  4. package/src/lib/components/filters/FilterDrawer.d.ts +1 -5
  5. package/src/lib/components/filters/FilterMultiSelectCheckbox.d.ts +1 -1
  6. package/src/lib/components/filters/FilterSelectRadio.d.ts +1 -1
  7. package/src/lib/components/grid-header/GridHeader.d.ts +0 -3
  8. package/src/lib/components/views/ViewsDrawer.d.ts +0 -4
  9. package/src/lib/helpers/StylesHelper.d.ts +2 -2
  10. package/src/lib/index.d.ts +17 -1
package/index.cjs.js CHANGED
@@ -7,11 +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('@tanstack/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');
14
- var reactVirtual$1 = require('react-virtual');
12
+ var reactVirtual = require('react-virtual');
13
+ var reactDatepickerCompat = require('@fluentui/react-datepicker-compat');
15
14
  var core = require('@dnd-kit/core');
16
15
  var modifiers = require('@dnd-kit/modifiers');
17
16
 
@@ -45,7 +44,7 @@ const useTableStaticStyles = reactComponents.makeStyles({
45
44
  // height: "650px",
46
45
  width: "100%" }, reactComponents.shorthands.overflow("hidden", "auto")), {
47
46
  /* width */
48
- ":hover": Object.assign({}, reactComponents.shorthands.overflow("auto", "auto")), "::-webkit-scrollbar": Object.assign({ width: "6px", height: "4px" }, reactComponents.shorthands.borderRadius("50%")),
47
+ ":hover": Object.assign({}, reactComponents.shorthands.overflow("auto", "auto")), "::-webkit-scrollbar": Object.assign({ width: "8px", height: "4px" }, reactComponents.shorthands.borderRadius("50%")),
49
48
  /* Track */
50
49
  "::-webkit-scrollbar-track": {
51
50
  "background-color": "#f1f1f1",
@@ -1008,6 +1007,7 @@ const ArrowNextFilled = /*#__PURE__*/createFluentIcon('ArrowNextFilled', "1em",
1008
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"], {
1009
1008
  flipInRtl: true
1010
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"]);
1011
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"]);
1012
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"]);
1013
1013
 
@@ -1019,6 +1019,8 @@ const ColumnEditFilled = /*#__PURE__*/createFluentIcon('ColumnEditFilled', "1em"
1019
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"]);
1020
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"]);
1021
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"]);
1022
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"]);
1023
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"]);
1024
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"]);
@@ -1027,6 +1029,8 @@ const GroupFilled = /*#__PURE__*/createFluentIcon('GroupFilled', "1em", ["M7 4.5
1027
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"]);
1028
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"]);
1029
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"]);
1030
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"]);
1031
1035
 
1032
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"]);
@@ -1040,6 +1044,7 @@ const SearchRegular = /*#__PURE__*/createFluentIcon('SearchRegular', "1em", ["M8
1040
1044
 
1041
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"]);
1042
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"]);
1043
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"]);
1044
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"]);
1045
1050
 
@@ -1166,21 +1171,23 @@ const useGridHeaderStyles = reactComponents.makeStyles({
1166
1171
  });
1167
1172
 
1168
1173
  const GridHeader = (props) => {
1169
- 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;
1170
1177
  const styles = useGridHeaderStyles();
1171
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) => {
1172
1179
  if (column.id === 'select')
1173
1180
  return null;
1174
1181
  if (column.id === 'id')
1175
1182
  return null;
1176
- return (jsxRuntime.jsx(reactComponents.Switch, { checked: column.getIsGrouped(), onChange: column.getToggleGroupingHandler(), disabled: !column.getCanGroup() || !column.getIsVisible(), label: jsxRuntime.jsx("span", { children: column.columnDef.id }) }, column.id));
1177
- })] }) })] }), jsxRuntime.jsxs(reactComponents.Popover, { withArrow: true, children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { disableButtonEnhancement: true, children: jsxRuntime.jsx(reactComponents.Tooltip, { content: 'Toggle Column Visibility', relationship: "label", children: jsxRuntime.jsx(reactComponents.Button, { icon: jsxRuntime.jsx(ToggleSelectColumnIcon, {}), "aria-label": "Toggle Column Visibility" }) }) }), jsxRuntime.jsx(reactComponents.PopoverSurface, { className: styles.popoverSurface, children: jsxRuntime.jsxs("div", { className: styles.tableTopHeaderColumnTogglePopover, children: [jsxRuntime.jsx(reactComponents.MenuGroupHeader, { children: "Toggle Columns" }), jsxRuntime.jsx(reactComponents.Switch, { checked: table.getIsAllColumnsVisible(), onChange: table.getToggleAllColumnsVisibilityHandler(), label: 'Toggle All' }), jsxRuntime.jsx(reactComponents.Divider, {}), table.getAllLeafColumns().map((column) => {
1183
+ return (jsxRuntime.jsx(reactComponents.Checkbox, { checked: column.getIsGrouped(), onChange: column.getToggleGroupingHandler(), disabled: !column.getCanGroup() || !column.getIsVisible(), label: jsxRuntime.jsx("span", { children: column.columnDef.id }) }, column.id));
1184
+ })] }) })] }), jsxRuntime.jsxs(reactComponents.Popover, { withArrow: true, children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { disableButtonEnhancement: true, children: jsxRuntime.jsx(reactComponents.Tooltip, { content: 'Toggle Column Visibility', relationship: "label", children: jsxRuntime.jsx(reactComponents.Button, { icon: jsxRuntime.jsx(ToggleSelectColumnIcon, {}), "aria-label": "Toggle Column Visibility" }) }) }), jsxRuntime.jsx(reactComponents.PopoverSurface, { className: styles.popoverSurface, children: jsxRuntime.jsxs("div", { className: styles.tableTopHeaderColumnTogglePopover, children: [jsxRuntime.jsx(reactComponents.MenuGroupHeader, { children: "Toggle Columns" }), jsxRuntime.jsx(reactComponents.Checkbox, { checked: table.getIsAllColumnsVisible(), onChange: table.getToggleAllColumnsVisibilityHandler(), label: 'Toggle All' }), jsxRuntime.jsx(reactComponents.Divider, {}), table.getAllLeafColumns().map((column) => {
1178
1185
  if (column.id === 'select')
1179
1186
  return null;
1180
- return (jsxRuntime.jsx(reactComponents.Switch, { checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler(), label: column.id, disabled: !column.getCanHide() }, column.id));
1187
+ return (jsxRuntime.jsx(reactComponents.Checkbox, { checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler(), label: column.id, disabled: !column.getCanHide() }, column.id));
1181
1188
  })] }) })] }), jsxRuntime.jsx(reactComponents.Tooltip, { content: 'Table Views Management', relationship: "label", children: jsxRuntime.jsx(reactComponents.Button, { onClick: () => {
1182
- dispatch({ type: "TOGGLE_VIEW_DRAWER" });
1183
- }, 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 })] })] }));
1184
1191
  };
1185
1192
  // A debounced input react component
1186
1193
  function DebouncedInput({ value: initialValue, onChange, debounce = 500, drawerState, dispatch, }) {
@@ -1194,8 +1201,8 @@ function DebouncedInput({ value: initialValue, onChange, debounce = 500, drawerS
1194
1201
  }, debounce);
1195
1202
  return () => clearTimeout(timeout);
1196
1203
  }, [value, onChange, debounce]);
1197
- 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: () => {
1198
- 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" });
1199
1206
  } }) }) }));
1200
1207
  }
1201
1208
 
@@ -1257,9 +1264,41 @@ const getLeafColumns = (columns) => {
1257
1264
  }, []);
1258
1265
  };
1259
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
+
1260
1295
  const useGridContainer = (props, ref) => {
1261
1296
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
1262
1297
  const { defaultColumn, columns, data, rowSelectionMode, autoResetPageIndex, onUpdateData } = props;
1298
+ const [drawerState, dispatch] = React__namespace.useReducer(tableReducer, {
1299
+ isFilterDrawerOpen: false,
1300
+ isViewsDrawerOpen: false
1301
+ });
1263
1302
  const [pagination, setPagination] = React__namespace.useState({
1264
1303
  pageSize: props.pageSize || 10,
1265
1304
  pageIndex: 0,
@@ -1350,7 +1389,22 @@ const useGridContainer = (props, ref) => {
1350
1389
  tableHeight: props.tableHeight || "650px",
1351
1390
  updateData: onUpdateData,
1352
1391
  onTableViewDelete: props.onTableViewDelete,
1353
- 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
1354
1408
  }
1355
1409
  });
1356
1410
  const tableViews = React__namespace.useMemo(() => { var _a; return (_a = props.views) !== null && _a !== void 0 ? _a : []; }, [props.views]);
@@ -1504,239 +1558,493 @@ const useTableHeaderStyles = reactComponents.makeStyles({
1504
1558
  },
1505
1559
  });
1506
1560
 
1507
- const useCheckboxFilterStyles = reactComponents.makeStyles({
1508
- searchInput: {
1509
- width: '90%',
1510
- marginBottom: '8px',
1511
- marginLeft: '10px',
1512
- marginRight: '10px',
1513
- },
1514
- searchContainer: Object.assign(Object.assign(Object.assign({ 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%')),
1515
- /* Track */
1516
- '::-webkit-scrollbar-track': {
1517
- 'background-color': '#f1f1f1',
1518
- },
1519
- /* Handle */
1520
- '::-webkit-scrollbar-thumb': {
1521
- 'background-color': '#888',
1522
- },
1523
- /* Handle on hover */
1524
- '::-webkit-scrollbar-thumb:hover': {
1525
- 'background-color': '#555',
1526
- } }),
1527
- });
1528
- const FilterMultiSelectCheckbox = ({ column, table, }) => {
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, }) {
1529
1590
  var _a;
1530
- const firstValue = (_a = table
1531
- .getPreFilteredRowModel()
1532
- .flatRows[0]) === null || _a === void 0 ? void 0 : _a.getValue(column.id);
1533
- const columnFilterValue = column.getFilterValue();
1534
- const [filterOptions, setFilterOptions] = React__namespace.useState([]);
1535
- React__namespace.useEffect(() => {
1536
- const uniqueSortedOptions = typeof firstValue === 'number' || !isNaN(firstValue)
1537
- ? Array.from(column.getFacetedUniqueValues().keys()).sort((a, b) => Number(a) - Number(b))
1538
- : Array.from(column.getFacetedUniqueValues().keys()).sort();
1539
- setFilterOptions(uniqueSortedOptions);
1540
- },
1541
- // eslint-disable-next-line react-hooks/exhaustive-deps
1542
- [column.getFacetedUniqueValues()]);
1543
- const [localColumnFilterValue, setLocalColumnFilterValue] = React__namespace.useState('');
1544
- const filterOptionsFiltered = React__namespace.useMemo(() => {
1545
- if (!localColumnFilterValue)
1546
- return filterOptions;
1547
- return filterOptions.filter((option) => {
1548
- var _a, _b, _c;
1549
- 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());
1550
- });
1551
- }, [localColumnFilterValue, filterOptions]);
1552
- const parentRef = React__namespace.useRef(null);
1553
- const virtualizer = reactVirtual.useVirtualizer({
1554
- count: (filterOptionsFiltered === null || filterOptionsFiltered === void 0 ? void 0 : filterOptionsFiltered.length) || 0,
1555
- getScrollElement: () => parentRef.current,
1556
- estimateSize: () => 30,
1557
- overscan: 5,
1591
+ const { column } = header;
1592
+ const { isDragging, attributes, listeners, setNodeRef, transform, transition, } = sortable.useSortable({
1593
+ id: column.id
1558
1594
  });
1559
- const virtualItems = virtualizer.getVirtualItems();
1560
- const allOptionChecked = (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) > 0 &&
1561
- (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) !== (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.length)
1562
- ? 'mixed'
1563
- : (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) === (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.length) &&
1564
- (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.length) > 0;
1565
- const styles = useCheckboxFilterStyles();
1566
- 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.jsx("div", { ref: parentRef, className: styles.searchContainer, children: jsxRuntime.jsxs("div", { style: { height: `${virtualizer.getTotalSize()}px` }, children: [jsxRuntime.jsx(reactComponents.Checkbox, { checked: allOptionChecked, onChange: () => {
1567
- if ((columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) > 0) {
1568
- column.setFilterValue(undefined);
1569
- return;
1570
- }
1571
- column.setFilterValue([
1572
- ...((filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.map((x) => `${x}`)) || []),
1573
- ]);
1574
- }, label: '(Toggle All)' }, `toggle-all-${column.id}`), (virtualItems || []).map((row, index) => {
1575
- var _a;
1576
- const value = `${filterOptionsFiltered[row.index]}`;
1577
- return (jsxRuntime.jsx("div", { style: {
1578
- height: `${row.size}px`,
1579
- transform: `translateY(${row.start - index * row.size}px)`,
1580
- }, children: jsxRuntime.jsx(reactComponents.Checkbox, { checked: (_a = columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.includes(value)) !== null && _a !== void 0 ? _a : false, onChange: () => {
1581
- if (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.includes(value)) {
1582
- column.setFilterValue((old) => old === null || old === void 0 ? void 0 : old.filter((v) => v !== value));
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())
1583
1615
  return;
1584
- }
1585
- column.setFilterValue((old) => [
1586
- ...(old || []),
1587
- value,
1588
- ]);
1589
- }, label: value }) }, `${column.id}-${row.index}`));
1590
- })] }) })] }));
1591
- };
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
+ }
1592
1672
 
1593
- const useRadioFilterStyles = reactComponents.makeStyles({
1594
- searchInput: {
1595
- width: '90%',
1596
- marginBottom: '8px',
1597
- marginLeft: '10px',
1598
- marginRight: '10px',
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,
1599
1692
  },
1600
- searchContainer: Object.assign(Object.assign({ maxHeight: '300px', width: '100%' }, reactComponents.shorthands.overflow('auto', 'auto')), { '::-webkit-scrollbar': Object.assign({ width: '6px', height: '4px' }, reactComponents.shorthands.borderRadius('50%')),
1601
- /* Track */
1602
- '::-webkit-scrollbar-track': {
1603
- 'background-color': '#f1f1f1',
1604
- },
1605
- /* Handle */
1606
- '::-webkit-scrollbar-thumb': {
1607
- 'background-color': '#888',
1608
- },
1609
- /* Handle on hover */
1610
- '::-webkit-scrollbar-thumb:hover': {
1611
- 'background-color': '#555',
1612
- } }),
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%" }),
1613
1694
  });
1614
- const FilterSelectRadio = ({ column, table, }) => {
1615
- var _a;
1616
- const firstValue = (_a = table
1617
- .getPreFilteredRowModel()
1618
- .flatRows[0]) === null || _a === void 0 ? void 0 : _a.getValue(column.id);
1619
- const columnFilterValue = column.getFilterValue();
1620
- const [filterOptions, setFilterOptions] = React__namespace.useState([]);
1621
- React__namespace.useEffect(() => {
1622
- const uniqueSortedOptions = typeof firstValue === 'number' || !isNaN(firstValue)
1623
- ? Array.from(column.getFacetedUniqueValues().keys()).sort((a, b) => Number(a) - Number(b))
1624
- : Array.from(column.getFacetedUniqueValues().keys()).sort();
1625
- setFilterOptions(uniqueSortedOptions);
1626
- },
1627
- // eslint-disable-next-line react-hooks/exhaustive-deps
1628
- [column.getFacetedUniqueValues()]);
1629
- const [localColumnFilterValue, setLocalColumnFilterValue] = React__namespace.useState('');
1630
- const filterOptionsFiltered = React__namespace.useMemo(() => {
1631
- if (!localColumnFilterValue)
1632
- return filterOptions;
1633
- return filterOptions.filter((option) => {
1634
- var _a, _b, _c;
1635
- 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());
1636
- });
1637
- }, [localColumnFilterValue, filterOptions]);
1638
- const parentRef = React__namespace.useRef(null);
1639
- const virtualizer = reactVirtual.useVirtualizer({
1640
- count: (filterOptionsFiltered === null || filterOptionsFiltered === void 0 ? void 0 : filterOptionsFiltered.length) || 0,
1641
- getScrollElement: () => parentRef.current,
1642
- estimateSize: () => 30,
1643
- overscan: 5,
1644
- });
1645
- const virtualItems = virtualizer.getVirtualItems();
1646
- const styles = useRadioFilterStyles();
1647
- 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.jsx("div", { ref: parentRef, className: styles.searchContainer, children: jsxRuntime.jsx("div", { style: { height: `${virtualizer.getTotalSize()}px` }, children: jsxRuntime.jsxs(reactComponents.RadioGroup, { layout: "vertical", value: (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[0]) || '', onChange: (_, data) => {
1648
- if (data.value === '') {
1649
- column.setFilterValue([]);
1650
- return;
1651
- }
1652
- column.setFilterValue([data.value]);
1653
- }, children: [jsxRuntime.jsx(reactComponents.Radio, { value: '', label: 'None' }), (virtualItems || []).map((row, index) => {
1654
- const value = filterOptionsFiltered[row.index];
1655
- return (jsxRuntime.jsx("div", { style: {
1656
- height: `${row.size}px`,
1657
- transform: `translateY(${row.start - index * row.size}px)`,
1658
- }, children: jsxRuntime.jsx(reactComponents.Radio, { value: value, label: value }, value) }, `${column.id}-${row.index}`));
1659
- })] }) }) })] }));
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))) }) }));
1660
1705
  };
1661
1706
 
1662
- const useNumberRangeFilterStyles$2 = reactComponents.makeStyles({
1663
- searchInput: {
1664
- width: '100%',
1665
- },
1666
- searchInputField: {
1667
- width: '100%',
1668
- flexGrow: 1,
1669
- },
1670
- searchContainer: {
1671
- display: 'flex',
1672
- marginBottom: '8px',
1673
- marginLeft: '10px',
1674
- marginRight: '10px',
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",
1675
1715
  }
1676
1716
  });
1677
- const FilterNumberRange = (props) => {
1678
- var _a, _b, _c, _d, _e, _f, _g, _h;
1679
- const { column } = props;
1680
- const columnFilterValue = column.getFilterValue();
1681
- const min = Number((_b = (_a = column.getFacetedMinMaxValues()) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : '');
1682
- const max = Number((_d = (_c = column.getFacetedMinMaxValues()) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : '');
1683
- const handleMinChange = (e, data) => {
1684
- const value = Number(data.value);
1685
- column.setFilterValue((old) => [value, old === null || old === void 0 ? void 0 : old[1]]);
1686
- };
1687
- const handleMaxChange = (e, data) => {
1688
- const value = Number(data.value);
1689
- column.setFilterValue((old) => [old === null || old === void 0 ? void 0 : old[0], value]);
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
1690
1792
  };
1691
- const styles = useNumberRangeFilterStyles$2();
1692
- return (jsxRuntime.jsxs("div", { className: styles.searchContainer, children: [jsxRuntime.jsx(reactComponents.Field, { label: 'Min:', size: "small", className: styles.searchInputField, children: jsxRuntime.jsx(reactComponents.Input, { type: "number", value: `${(columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[0]) || ''}`, min: min, max: max, onChange: handleMinChange, className: styles.searchInput, placeholder: `Min ${((_e = column.getFacetedMinMaxValues()) === null || _e === void 0 ? void 0 : _e[0])
1693
- ? `(${(_f = column.getFacetedMinMaxValues()) === null || _f === void 0 ? void 0 : _f[0]})`
1694
- : ''}` }) }), jsxRuntime.jsx(reactComponents.Field, { label: 'Max:', size: "small", className: styles.searchInputField, children: jsxRuntime.jsx(reactComponents.Input, { type: "number", value: `${(columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[1]) || ''}`, min: min, max: max, onChange: handleMaxChange, className: styles.searchInput, placeholder: `Max ${((_g = column.getFacetedMinMaxValues()) === null || _g === void 0 ? void 0 : _g[1])
1695
- ? `(${(_h = column.getFacetedMinMaxValues()) === null || _h === void 0 ? void 0 : _h[1]})`
1696
- : ''}` }) })] }));
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 }) })] })] }));
1697
1890
  };
1698
1891
 
1699
- const useNumberRangeFilterStyles$1 = reactComponents.makeStyles({
1892
+ const useCheckboxFilterStyles = reactComponents.makeStyles({
1700
1893
  searchInput: {
1701
- width: '100%',
1702
- },
1703
- searchInputField: {
1704
- width: '100%',
1705
- flexGrow: 1,
1894
+ width: '90%',
1895
+ marginBottom: '8px',
1896
+ marginLeft: '10px',
1897
+ marginRight: '10px',
1706
1898
  },
1707
- searchContainer: {
1708
- display: 'flex',
1709
- flexDirection: 'column',
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([]);
1920
+ React__namespace.useEffect(() => {
1921
+ const uniqueSortedOptions = typeof firstValue === 'number' || !isNaN(firstValue)
1922
+ ? Array.from(column.getFacetedUniqueValues().keys()).sort((a, b) => Number(a) - Number(b))
1923
+ : Array.from(column.getFacetedUniqueValues().keys()).sort();
1924
+ setFilterOptions(uniqueSortedOptions);
1925
+ },
1926
+ // eslint-disable-next-line react-hooks/exhaustive-deps
1927
+ [column.getFacetedUniqueValues()]);
1928
+ const [localColumnFilterValue, setLocalColumnFilterValue] = React__namespace.useState('');
1929
+ const filterOptionsFiltered = React__namespace.useMemo(() => {
1930
+ if (!localColumnFilterValue)
1931
+ return filterOptions;
1932
+ return filterOptions.filter((option) => {
1933
+ var _a, _b, _c;
1934
+ 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());
1935
+ });
1936
+ }, [localColumnFilterValue, filterOptions]);
1937
+ const filterContainer = React__namespace.useRef(null);
1938
+ const rowVirtualizer = reactVirtual.useVirtual({
1939
+ parentRef: filterContainer,
1940
+ size: filterOptionsFiltered.length,
1941
+ overscan: 15,
1942
+ });
1943
+ const { virtualItems: virtualRows, totalSize } = rowVirtualizer;
1944
+ 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;
1945
+ const paddingBottom = virtualRows.length > 0
1946
+ ? totalSize - (((_c = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[virtualRows.length - 1]) === null || _c === void 0 ? void 0 : _c.end) || 0)
1947
+ : 0;
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);
1957
+ return;
1958
+ }
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')] }));
1976
+ };
1977
+
1978
+ const useRadioFilterStyles = reactComponents.makeStyles({
1979
+ searchInput: {
1980
+ width: '90%',
1710
1981
  marginBottom: '8px',
1711
1982
  marginLeft: '10px',
1712
1983
  marginRight: '10px',
1713
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
+ } }),
1714
1998
  });
1715
- const FilterDateRange = (props) => {
1716
- var _a, _b, _c, _d;
1717
- const { column } = props;
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);
1718
2004
  const columnFilterValue = column.getFilterValue();
1719
- const min = (_b = (_a = column.getFacetedMinMaxValues()) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : undefined;
1720
- const max = (_d = (_c = column.getFacetedMinMaxValues()) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : undefined;
1721
- const handleMinChange = (date) => {
1722
- if (!date) {
1723
- column.setFilterValue((old) => [undefined, old === null || old === void 0 ? void 0 : old[1]]);
1724
- return;
1725
- }
1726
- column.setFilterValue((old) => [date, old === null || old === void 0 ? void 0 : old[1]]);
1727
- };
1728
- const handleMaxChange = (date) => {
1729
- if (!date) {
1730
- column.setFilterValue((old) => [old === null || old === void 0 ? void 0 : old[0], undefined]);
1731
- return;
1732
- }
1733
- column.setFilterValue((old) => [old === null || old === void 0 ? void 0 : old[0], date]);
1734
- };
1735
- const styles = useNumberRangeFilterStyles$1();
1736
- 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 }) })] }));
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` } }))] })] }));
1737
2045
  };
1738
2046
 
1739
- const useNumberRangeFilterStyles = reactComponents.makeStyles({
2047
+ const useNumberRangeFilterStyles$2 = reactComponents.makeStyles({
1740
2048
  searchInput: {
1741
2049
  width: '100%',
1742
2050
  },
@@ -1746,30 +2054,34 @@ const useNumberRangeFilterStyles = reactComponents.makeStyles({
1746
2054
  },
1747
2055
  searchContainer: {
1748
2056
  display: 'flex',
1749
- flexDirection: 'column',
1750
2057
  marginBottom: '8px',
1751
2058
  marginLeft: '10px',
1752
2059
  marginRight: '10px',
1753
- },
2060
+ }
1754
2061
  });
1755
- const FilterDate = (props) => {
1756
- var _a, _b, _c, _d;
2062
+ const FilterNumberRange = (props) => {
2063
+ var _a, _b, _c, _d, _e, _f, _g, _h;
1757
2064
  const { column } = props;
1758
2065
  const columnFilterValue = column.getFilterValue();
1759
- const min = (_b = (_a = column.getFacetedMinMaxValues()) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : undefined;
1760
- const max = (_d = (_c = column.getFacetedMinMaxValues()) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : undefined;
1761
- const onDateSelect = (date) => {
1762
- if (!date) {
1763
- column.setFilterValue(undefined);
1764
- return;
1765
- }
1766
- column.setFilterValue(date);
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);
2070
+ column.setFilterValue((old) => [value, old === null || old === void 0 ? void 0 : old[1]]);
1767
2071
  };
1768
- const styles = useNumberRangeFilterStyles();
1769
- 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 }) }));
2072
+ const handleMaxChange = (e, data) => {
2073
+ const value = Number(data.value);
2074
+ column.setFilterValue((old) => [old === null || old === void 0 ? void 0 : old[0], value]);
2075
+ };
2076
+ const styles = useNumberRangeFilterStyles$2();
2077
+ return (jsxRuntime.jsxs("div", { className: styles.searchContainer, children: [jsxRuntime.jsx(reactComponents.Field, { label: 'Min:', size: "small", className: styles.searchInputField, children: jsxRuntime.jsx(reactComponents.Input, { type: "number", value: `${(columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[0]) || ''}`, min: min, max: max, onChange: handleMinChange, className: styles.searchInput, placeholder: `Min ${((_e = column.getFacetedMinMaxValues()) === null || _e === void 0 ? void 0 : _e[0])
2078
+ ? `(${(_f = column.getFacetedMinMaxValues()) === null || _f === void 0 ? void 0 : _f[0]})`
2079
+ : ''}` }) }), jsxRuntime.jsx(reactComponents.Field, { label: 'Max:', size: "small", className: styles.searchInputField, children: jsxRuntime.jsx(reactComponents.Input, { type: "number", value: `${(columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[1]) || ''}`, min: min, max: max, onChange: handleMaxChange, className: styles.searchInput, placeholder: `Max ${((_g = column.getFacetedMinMaxValues()) === null || _g === void 0 ? void 0 : _g[1])
2080
+ ? `(${(_h = column.getFacetedMinMaxValues()) === null || _h === void 0 ? void 0 : _h[1]})`
2081
+ : ''}` }) })] }));
1770
2082
  };
1771
2083
 
1772
- const useFilterStyles = reactComponents.makeStyles({
2084
+ const useNumberRangeFilterStyles$1 = reactComponents.makeStyles({
1773
2085
  searchInput: {
1774
2086
  width: '100%',
1775
2087
  },
@@ -1779,427 +2091,157 @@ const useFilterStyles = reactComponents.makeStyles({
1779
2091
  },
1780
2092
  searchContainer: {
1781
2093
  display: 'flex',
2094
+ flexDirection: 'column',
1782
2095
  marginBottom: '8px',
1783
2096
  marginLeft: '10px',
1784
2097
  marginRight: '10px',
1785
2098
  },
1786
2099
  });
1787
- const Filter = ({ column, table, }) => {
1788
- var _a, _b;
1789
- const filterFunctionName = column.columnDef.filterFn;
1790
- const styles = useFilterStyles();
1791
- switch (filterFunctionName) {
1792
- case 'arrIncludesSome':
1793
- return jsxRuntime.jsx(FilterMultiSelectCheckbox, { column: column, table: table });
1794
- case 'arrIncludesAll':
1795
- case 'arrIncludes':
1796
- return jsxRuntime.jsx(FilterSelectRadio, { column: column, table: table });
1797
- case 'inNumberRange':
1798
- return jsxRuntime.jsx(FilterNumberRange, { column: column, table: table });
1799
- case 'inDateRange': {
1800
- const firstValue = (_a = table
1801
- .getPreFilteredRowModel()
1802
- .flatRows[0]) === null || _a === void 0 ? void 0 : _a.getValue(column.id);
1803
- if (typeof firstValue.getMonth === 'function') {
1804
- return jsxRuntime.jsx(FilterDateRange, { column: column, table: table });
1805
- }
1806
- break;
1807
- }
1808
- case 'matchDate': {
1809
- const firstValue = (_b = table
1810
- .getPreFilteredRowModel()
1811
- .flatRows[0]) === null || _b === void 0 ? void 0 : _b.getValue(column.id);
1812
- if (typeof firstValue.getMonth === 'function') {
1813
- return jsxRuntime.jsx(FilterDate, { column: column, table: table });
1814
- }
1815
- break;
2100
+ const FilterDateRange = (props) => {
2101
+ var _a, _b, _c, _d;
2102
+ const { column } = props;
2103
+ const columnFilterValue = column.getFilterValue();
2104
+ const min = (_b = (_a = column.getFacetedMinMaxValues()) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : undefined;
2105
+ const max = (_d = (_c = column.getFacetedMinMaxValues()) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : undefined;
2106
+ const handleMinChange = (date) => {
2107
+ if (!date) {
2108
+ column.setFilterValue((old) => [undefined, old === null || old === void 0 ? void 0 : old[1]]);
2109
+ return;
1816
2110
  }
1817
- }
1818
- 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) => {
1819
- column.setFilterValue(data.value);
1820
- }, placeholder: "Search Keyword...", size: "small", className: styles.searchInput }) }) }));
1821
- };
1822
-
1823
- const useFilterDrawerStyles$1 = reactComponents.makeStyles({
1824
- drawerBody: Object.assign(Object.assign({}, reactComponents.shorthands.overflow('hidden', 'auto')), {
1825
- /* width */
1826
- ':hover': Object.assign({}, reactComponents.shorthands.overflow('auto', 'auto')), '::-webkit-scrollbar': Object.assign({ width: '6px', height: '4px' }, reactComponents.shorthands.borderRadius('50%')),
1827
- /* Track */
1828
- '::-webkit-scrollbar-track': {
1829
- 'background-color': '#f1f1f1',
1830
- },
1831
- /* Handle */
1832
- '::-webkit-scrollbar-thumb': {
1833
- 'background-color': '#888',
1834
- },
1835
- /* Handle on hover */
1836
- '::-webkit-scrollbar-thumb:hover': {
1837
- 'background-color': '#555',
1838
- } }),
1839
- });
1840
- const FilterDrawer = ({ drawerState, dispatch, table }) => {
1841
- const headerGroups = table.getHeaderGroups();
1842
- const styles = useFilterDrawerStyles$1();
1843
- const resetAllFilters = React__namespace.useCallback(() => {
1844
- table.setGlobalFilter('');
1845
- table.resetColumnFilters();
1846
- }, [table]);
1847
- 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) => {
1848
- const canApplyFilter = headerGroup.depth === (headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.length) - 1;
1849
- if (!canApplyFilter)
1850
- return null;
1851
- return headerGroup.headers.map((header) => {
1852
- const canFilter = header.column.getCanFilter();
1853
- if (!canFilter)
1854
- return null;
1855
- 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));
1856
- });
1857
- }) }) }), jsxRuntime.jsx(reactComponents.DrawerFooter, { children: jsxRuntime.jsx(reactComponents.Button, { icon: jsxRuntime.jsx(ClearFilterIcon, {}), onClick: resetAllFilters, style: { width: "100%" }, children: "Clear All Filters" }) })] }));
1858
- };
1859
-
1860
- const getHeaderCellPinningStyles = (column) => {
1861
- const isPinned = column.getIsPinned();
1862
- const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
1863
- const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');
1864
- const styles = {
1865
- boxShadow: isLastLeftPinnedColumn
1866
- ? '-4px 0 4px -4px gray inset'
1867
- : isFirstRightPinnedColumn
1868
- ? '4px 0 4px -4px gray inset'
1869
- : undefined,
1870
- left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,
1871
- right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined,
1872
- opacity: isPinned ? 0.95 : 1,
1873
- position: isPinned ? 'sticky' : 'relative',
1874
- width: column.getSize(),
1875
- zIndex: isPinned ? 99 : 1,
1876
- backgroundColor: reactComponents.tokens.colorNeutralCardBackgroundSelected,
1877
- };
1878
- return styles;
1879
- };
1880
- const getBodyCellPinningStyles = (column) => {
1881
- const isPinned = column.getIsPinned();
1882
- const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
1883
- const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');
1884
- const styles = {
1885
- boxShadow: isLastLeftPinnedColumn
1886
- ? '-4px 0 4px -4px gray inset'
1887
- : isFirstRightPinnedColumn
1888
- ? '4px 0 4px -4px gray inset'
1889
- : undefined,
1890
- left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,
1891
- right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined,
1892
- opacity: isPinned ? 0.95 : 1,
1893
- position: isPinned ? 'sticky' : 'relative',
1894
- width: column.getSize(),
1895
- zIndex: isPinned ? 1 : 0,
1896
- };
1897
- return styles;
1898
- };
1899
-
1900
- const SortAscIcon = bundleIcon$1(ArrowSortDown20Filled, ArrowSortDown20Regular);
1901
- const SortDescIcon = bundleIcon$1(ArrowSortUp20Filled, ArrowSortUp20Regular);
1902
- const PinIcon = bundleIcon$1(PinFilled, PinRegular);
1903
- function HeaderCell({ header, table, hideMenu, headerDepth, totalNumberOfHeaderDepth, }) {
1904
- var _a;
1905
- const { column } = header;
1906
- const { isDragging, attributes, listeners, setNodeRef, transform, transition, } = sortable.useSortable({
1907
- id: column.id
1908
- });
1909
- const dndStyle = {
1910
- width: header.column.getSize(),
1911
- opacity: isDragging ? 0.8 : 1,
1912
- // position: isDragging ? 'relative' : "sticky",
1913
- transform: utilities.CSS.Translate.toString(transform), // translate instead of transform to avoid squishing
1914
- // transition: 'width transform 0.2s ease-in-out',
1915
- whiteSpace: 'wrap',
1916
- zIndex: isDragging ? 100 : 99,
1917
- transition
2111
+ column.setFilterValue((old) => [date, old === null || old === void 0 ? void 0 : old[1]]);
1918
2112
  };
1919
- const styles = useTableHeaderStyles();
1920
- const isLeafHeaders = headerDepth === totalNumberOfHeaderDepth;
1921
- if (header.isPlaceholder) {
1922
- 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) }) }) }));
1923
- }
1924
- 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
1925
- ? styles.tLeafHeadCellContent
1926
- : styles.tNonLeafHeadCellContent, children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx(reactControlFlow.Show, { when: !header.isPlaceholder, children: jsxRuntime.jsxs(reactComponents.Button, { style: {
1927
- display: 'flex',
1928
- alignItems: 'center',
1929
- justifyContent: 'left',
1930
- flex: 1,
1931
- }, onClick: (e) => {
1932
- if (!header.column.getCanSort())
1933
- return;
1934
- header.column.toggleSorting(header.column.getIsSorted() === 'asc', e.ctrlKey);
1935
- }, onDoubleClick: () => {
1936
- if (!header.column.getCanGroup())
1937
- return;
1938
- header.column.getToggleGroupingHandler()();
1939
- }, appearance: "transparent", className: styles.tHeadContentBtn, icon: (_a = {
1940
- asc: (jsxRuntime.jsx("strong", { children: jsxRuntime.jsx(SortAscIcon, {}) })),
1941
- desc: (jsxRuntime.jsx("strong", { children: jsxRuntime.jsx(SortDescIcon, {}) })),
1942
- }[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 }) })] }));
1943
- }
1944
- function HeaderMenu(props) {
1945
- const { header, table, hideMenu } = props;
1946
- const styles = useTableHeaderStyles();
1947
- if (hideMenu || header.isPlaceholder)
1948
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }));
1949
- const canHavePopOver = header.column.getCanSort() ||
1950
- header.column.getCanGroup() ||
1951
- header.column.getCanFilter();
1952
- if (!canHavePopOver)
1953
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }));
1954
- 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) => {
1955
- var _a;
1956
- const isControlKeySelected = e.ctrlKey;
1957
- (_a = header.column) === null || _a === void 0 ? void 0 : _a.toggleSorting(false, isControlKeySelected);
1958
- }, icon: jsxRuntime.jsx(TextSortAscendingFilled, {}), disabled: header.column.getIsSorted() === 'asc', children: "Sort A to Z" }), jsxRuntime.jsx(reactComponents.MenuItem, { onClick: (e) => {
1959
- var _a;
1960
- const isControlKeySelected = e.ctrlKey;
1961
- (_a = header.column) === null || _a === void 0 ? void 0 : _a.toggleSorting(true, isControlKeySelected);
1962
- }, 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: () => {
1963
- var _a;
1964
- (_a = header.column) === null || _a === void 0 ? void 0 : _a.pin(false);
1965
- }, icon: jsxRuntime.jsx(PinOffRegular, {}), children: "No Pin" }) }), jsxRuntime.jsx(reactComponents.MenuItem, { onClick: () => {
1966
- var _a;
1967
- (_a = header.column) === null || _a === void 0 ? void 0 : _a.pin('left');
1968
- }, icon: jsxRuntime.jsx(ArrowStepInLeftRegular, {}), disabled: header.column.getIsPinned() === 'left', children: "Pin Left" }), jsxRuntime.jsx(reactComponents.MenuItem, { onClick: () => {
1969
- var _a;
1970
- (_a = header.column) === null || _a === void 0 ? void 0 : _a.pin('right');
1971
- }, 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') })] }) })] }));
1972
- }
1973
-
1974
- function HeaderRow(props) {
1975
- const styles = useTableHeaderStyles();
1976
- const { table, headerGroup, rowSelectionMode, headerGroupsLength } = props;
1977
- 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()
1978
- ? 'mixed'
1979
- : 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) => {
1980
- return (jsxRuntime.jsx(HeaderCell, { header: header, table: table, hideMenu: headerGroup.depth !== headerGroupsLength - 1, headerDepth: headerGroup.depth, totalNumberOfHeaderDepth: headerGroupsLength - 1 }, header.id));
1981
- })] }, headerGroup.id));
1982
- }
1983
-
1984
- function TableHeader(props) {
1985
- const styles = useTableHeaderStyles();
1986
- const { table, headerGroups, rowSelectionMode } = props;
1987
- 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))) }));
1988
- }
1989
-
1990
- const useLoadingStyles = reactComponents.makeStyles({
1991
- invertedWrapper: {
1992
- backgroundColor: reactComponents.tokens.colorNeutralBackground1,
1993
- },
1994
- row: Object.assign(Object.assign({ alignItems: "center", display: "grid", paddingBottom: "10px", position: "relative" }, reactComponents.shorthands.gap("10px")), { gridTemplateColumns: "min-content 20% 15% 30% 29%" }),
1995
- });
1996
-
1997
- const Loading = (props) => {
1998
- const { numberOfItems = 16, numberOfColumns = 5 } = props;
1999
- const styles = useLoadingStyles();
2000
- 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) => {
2001
- if (i === 0) {
2002
- return jsxRuntime.jsx(reactComponents.SkeletonItem, { shape: "circle", size: 24 }, i);
2003
- }
2004
- return jsxRuntime.jsx(reactComponents.SkeletonItem, { size: 16 }, i);
2005
- }) }, i))) }) }));
2006
- };
2007
-
2008
- const useNoItemGridStyles = reactComponents.makeStyles({
2009
- wrapper: {
2010
- backgroundColor: reactComponents.tokens.colorNeutralBackground1,
2011
- display: "flex",
2012
- flexWrap: "wrap",
2013
- alignContent: "center",
2014
- justifyContent: "center",
2015
- minHeight: "300px",
2016
- }
2017
- });
2018
-
2019
- const NoItemGrid = ({ message }) => {
2020
- const styles = useNoItemGridStyles();
2021
- return (jsxRuntime.jsx("div", { className: styles.wrapper, children: jsxRuntime.jsx("div", { children: message ? message : jsxRuntime.jsx(reactComponents.Subtitle2Stronger, { children: "No Data to Show." }) }) }));
2022
- };
2023
-
2024
- const useNoFilterMatchStyles = reactComponents.makeStyles({
2025
- wrapper: {
2026
- backgroundColor: reactComponents.tokens.colorNeutralBackground1,
2027
- display: "flex",
2028
- flexDirection: "column",
2029
- flexWrap: "wrap",
2030
- alignContent: "center",
2031
- justifyContent: "center",
2032
- minHeight: "300px",
2033
- },
2034
- iconWrapper: {
2035
- display: "flex",
2036
- flexWrap: "wrap",
2037
- alignContent: "center",
2038
- justifyContent: "center",
2039
- }
2040
- });
2041
-
2042
- const NoSearchResult = ({ message }) => {
2043
- const styles = useNoFilterMatchStyles();
2044
- 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." }) })] }));
2045
- };
2046
-
2047
- const useTableBodyStyles = reactComponents.makeStyles({
2048
- tBody: Object.assign(Object.assign({}, reactComponents.shorthands.padding("0px", "0px", "0px", "0px")), { zIndex: 0 }),
2049
- tBodyRow: Object.assign(Object.assign(Object.assign({}, reactComponents.shorthands.padding("0px", "0px", "0px", "0px")), reactComponents.shorthands.borderBottom(reactComponents.tokens.strokeWidthThin, "solid", reactComponents.tokens.colorNeutralStroke1)), {
2050
- // ":nth-child(even)": {
2051
- // backgroundColor: tokens.colorNeutralBackground2,
2052
- // },
2053
- ":hover": {
2054
- backgroundColor: reactComponents.tokens.colorNeutralBackground2Hover,
2055
- } }),
2056
- tBodySelectedRow: Object.assign(Object.assign({ backgroundColor: reactComponents.tokens.colorBrandBackground2 }, reactComponents.shorthands.borderBottom(reactComponents.tokens.strokeWidthThin, "solid", reactComponents.tokens.colorNeutralStroke1)), { ":hover": {
2057
- backgroundColor: reactComponents.tokens.colorBrandBackground2Hover,
2058
- } }),
2059
- tBodyCell: Object.assign(Object.assign({ backgroundColor: "transparent" }, reactComponents.shorthands.padding("2px", "4px")), { minHeight: "35px", height: "35px" }),
2060
- tBodyRowPinnedCell: {
2061
- backgroundColor: reactComponents.tokens.colorPaletteYellowBackground2,
2062
- ":hover": {
2063
- backgroundColor: reactComponents.tokens.colorPaletteMarigoldBackground2,
2064
- }
2065
- },
2066
- tBodyPinnedCell: {
2067
- backgroundColor: reactComponents.tokens.colorNeutralBackground3,
2068
- ":hover": {
2069
- backgroundColor: reactComponents.tokens.colorNeutralBackground3Hover,
2113
+ const handleMaxChange = (date) => {
2114
+ if (!date) {
2115
+ column.setFilterValue((old) => [old === null || old === void 0 ? void 0 : old[0], undefined]);
2116
+ return;
2070
2117
  }
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%',
2071
2127
  },
2072
- tBodySelectedCell: {
2073
- backgroundColor: reactComponents.tokens.colorBrandBackground2,
2074
- ":hover": {
2075
- backgroundColor: reactComponents.tokens.colorBrandBackground2Hover,
2076
- }
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',
2077
2138
  },
2078
2139
  });
2079
-
2080
- function TableCell({ cell, row }) {
2081
- var _a;
2082
- const styles = useTableBodyStyles();
2083
- const isSelected = row.getIsSelected();
2084
- const isRowPinned = row.getIsPinned();
2085
- const isCellPinned = cell.column.getIsPinned();
2086
- const { isDragging, transition, setNodeRef, transform } = sortable.useSortable({
2087
- id: cell.column.id,
2088
- });
2089
- const tdStyle = {
2090
- width: cell.column.getSize(),
2091
- opacity: isDragging ? "0.8" : "1",
2092
- transform: utilities.CSS.Translate.toString(transform),
2093
- // transition: 'width transform 0.2s ease-in-out',
2094
- zIndex: isDragging ? 1 : 0,
2095
- 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);
2096
2152
  };
2097
- const cellClassNames = reactComponents.mergeClasses(styles.tBodyCell, isCellPinned && styles.tBodyPinnedCell, isSelected && styles.tBodySelectedCell, isRowPinned && styles.tBodyRowPinnedCell);
2098
- const styleStyles = Object.assign(Object.assign({}, tdStyle), getBodyCellPinningStyles(cell.column));
2099
- if (cell.getIsPlaceholder()) {
2100
- return jsxRuntime.jsx("td", { style: styleStyles, className: cellClassNames, ref: setNodeRef }, cell.id);
2101
- }
2102
- if (cell.getIsGrouped()) {
2103
- return (jsxRuntime.jsx("td", { style: styleStyles, className: cellClassNames, ref: setNodeRef, children: jsxRuntime.jsx(reactComponents.Button, { onClick: row.getToggleExpandedHandler(), style: {
2104
- cursor: row.getCanExpand() ? 'pointer' : 'normal',
2105
- textAlign: 'left',
2106
- }, 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));
2107
- }
2108
- if (cell.getIsAggregated()) {
2109
- 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));
2110
- }
2111
- return (jsxRuntime.jsx("td", { style: styleStyles, className: cellClassNames, ref: setNodeRef, children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
2112
- }
2113
-
2114
- function TableRow({ row, rowSelectionMode, style }) {
2115
- const styles = useTableBodyStyles();
2116
- return (jsxRuntime.jsxs("tr", { className: row.getIsSelected() || row.getIsAllSubRowsSelected()
2117
- ? styles.tBodySelectedRow
2118
- : 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()
2119
- ? 'mixed'
2120
- : 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));
2121
- }
2122
- function PinnedRow({ row, rowSelectionMode, style, bottomRowLength }) {
2123
- const styles = useTableBodyStyles();
2124
- return (jsxRuntime.jsxs("tr", { className: row.getIsSelected() || row.getIsAllSubRowsSelected()
2125
- ? styles.tBodySelectedRow
2126
- : styles.tBodyRow, style: {
2127
- backgroundColor: 'goldenrod',
2128
- position: 'sticky',
2129
- top: row.getIsPinned() === 'top'
2130
- ? `${row.getPinnedIndex() * 35 + 48}px`
2131
- : undefined,
2132
- bottom: row.getIsPinned() === 'bottom'
2133
- ? `${((bottomRowLength || 0) - 1 - row.getPinnedIndex()) * 35}px`
2134
- : undefined
2135
- }, 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()
2136
- ? 'mixed'
2137
- : 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 => {
2138
- return (jsxRuntime.jsx(TableCell, { cell: cell, row: row }, cell.id));
2139
- })] }, row.id));
2140
- }
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
+ };
2141
2156
 
2142
- function TableBody(props) {
2143
- var _a, _b, _c;
2144
- const styles = useTableBodyStyles();
2145
- const { table, tableContainerRef } = props;
2146
- const rowSelectionMode = (_a = table.options.meta) === null || _a === void 0 ? void 0 : _a.rowSelectionMode;
2147
- let rows = [];
2148
- let topRows = [];
2149
- let bottomRows = [];
2150
- try {
2151
- rows = table.getCenterRows();
2152
- topRows = table.getTopRows();
2153
- bottomRows = table.getBottomRows();
2154
- }
2155
- catch (error) {
2156
- rows = [];
2157
- topRows = [];
2158
- 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
+ }
2159
2202
  }
2160
- const rowVirtualizer = reactVirtual$1.useVirtual({
2161
- parentRef: tableContainerRef,
2162
- size: rows.length,
2163
- overscan: 10,
2164
- });
2165
- const { virtualItems: virtualRows, totalSize } = rowVirtualizer;
2166
- 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;
2167
- const paddingBottom = virtualRows.length > 0
2168
- ? totalSize - (((_c = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[virtualRows.length - 1]) === null || _c === void 0 ? void 0 : _c.end) || 0)
2169
- : 0;
2170
- 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: {
2171
- position: "sticky",
2172
- top: 0,
2173
- zIndex: 99
2174
- }, 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) => {
2175
- const row = rows[virtualRow.index];
2176
- return (jsxRuntime.jsx(TableRow, { row: row, rowSelectionMode: rowSelectionMode }, row.id));
2177
- } }), 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: {
2178
- position: "sticky",
2179
- bottom: 0,
2180
- zIndex: 99
2181
- }, children: jsxRuntime.jsxs("tr", { style: { backgroundColor: "white" }, children: [jsxRuntime.jsx("td", { className: "p-1", children: jsxRuntime.jsx(reactComponents.Checkbox, { checked: table.getIsSomePageRowsSelected()
2182
- ? 'mixed'
2183
- : 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: {
2184
- position: "sticky",
2185
- bottom: 0,
2186
- zIndex: 99
2187
- }, 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)) }) }) })] }));
2188
- }
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
+ };
2189
2207
 
2190
- const TableContainer = (props) => {
2191
- var _a, _b;
2192
- const styles = useTableStaticStyles();
2193
- const { table } = props;
2194
- const { tableHeight, rowSelectionMode } = table.options.meta || {};
2195
- const tableContainerRef = React__namespace.useRef(null);
2196
- 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 }) => {
2197
2226
  const headerGroups = table.getHeaderGroups();
2198
- // utilities
2199
- const isLoading = props.isLoading && itemLength === 0;
2200
- const noItems = !isLoading && ((_a = props.data) === null || _a === void 0 ? void 0 : _a.length) === 0;
2201
- const noSearchResult = !isLoading && ((_b = props === null || props === void 0 ? void 0 : props.data) === null || _b === void 0 ? void 0 : _b.length) > 0 && itemLength === 0;
2202
- 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" }) })] }));
2203
2245
  };
2204
2246
 
2205
2247
  const ViewSaveForm = (props) => {
@@ -2261,14 +2303,16 @@ const useFilterDrawerStyles = reactComponents.makeStyles({
2261
2303
  } }),
2262
2304
  });
2263
2305
  const ViewsDrawer = (props) => {
2264
- 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;
2265
2309
  const { onTableViewDelete, onTableViewSave } = table.options.meta || {};
2266
2310
  const [checkedValues, setCheckedValues] = React__namespace.useState({ font: ["calibri"] });
2267
2311
  const onChange = (e, { name, checkedItems }) => {
2268
2312
  setCheckedValues((s) => (Object.assign(Object.assign({}, s), { [name]: checkedItems })));
2269
2313
  };
2270
2314
  const styles = useFilterDrawerStyles();
2271
- 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) => {
2272
2316
  return (jsxRuntime.jsxs("div", { style: {
2273
2317
  display: 'flex',
2274
2318
  justifyContent: 'space-between',
@@ -2278,41 +2322,9 @@ const ViewsDrawer = (props) => {
2278
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" })] }) })] }));
2279
2323
  };
2280
2324
 
2281
- const TableActions = {
2282
- TOGGLE_FILTER_DRAWER: 'TOGGLE_FILTER_DRAWER',
2283
- TOGGLE_VIEW_DRAWER: 'TOGGLE_VIEW_DRAWER',
2284
- OPEN_FILTER_DRAWER: 'OPEN_FILTER_DRAWER',
2285
- OPEN_VIEW_DRAWER: 'OPEN_VIEW_DRAWER',
2286
- CLOSE_FILTER_DRAWER: 'CLOSE_FILTER_DRAWER',
2287
- CLOSE_VIEW_DRAWER: 'CLOSE_VIEW_DRAWER',
2288
- };
2289
- // write a reducer function to handle the state of the table
2290
- function tableReducer(state, action) {
2291
- switch (action.type) {
2292
- case TableActions.TOGGLE_FILTER_DRAWER:
2293
- return Object.assign(Object.assign({}, state), { isFilterDrawerOpen: !state.isFilterDrawerOpen });
2294
- case TableActions.TOGGLE_VIEW_DRAWER:
2295
- return Object.assign(Object.assign({}, state), { isViewsDrawerOpen: !state.isViewsDrawerOpen });
2296
- case TableActions.OPEN_FILTER_DRAWER:
2297
- return Object.assign(Object.assign({}, state), { isFilterDrawerOpen: true });
2298
- case TableActions.OPEN_VIEW_DRAWER:
2299
- return Object.assign(Object.assign({}, state), { isViewsDrawerOpen: true });
2300
- case TableActions.CLOSE_FILTER_DRAWER:
2301
- return Object.assign(Object.assign({}, state), { isFilterDrawerOpen: false });
2302
- case TableActions.CLOSE_VIEW_DRAWER:
2303
- return Object.assign(Object.assign({}, state), { isViewsDrawerOpen: false });
2304
- default:
2305
- return state;
2306
- }
2307
- }
2308
-
2309
2325
  function AdvancedTable(props, ref) {
2310
2326
  useStaticStyles();
2311
2327
  const { table, globalFilter, headerMenu, tableViews, setGlobalFilter, resetToDefaultView, applyTableState } = useGridContainer(props, ref);
2312
- const [drawerState, dispatch] = React__namespace.useReducer(tableReducer, {
2313
- isFilterDrawerOpen: false,
2314
- isViewsDrawerOpen: false
2315
- });
2316
2328
  const { getState, setColumnOrder } = table;
2317
2329
  const { columnOrder } = getState();
2318
2330
  function handleDragEnd(event) {
@@ -2327,14 +2339,14 @@ function AdvancedTable(props, ref) {
2327
2339
  }
2328
2340
  const pointerSensor = core.useSensor(core.PointerSensor, {
2329
2341
  activationConstraint: {
2330
- distance: 0.01
2342
+ distance: 0.0001
2331
2343
  }
2332
2344
  });
2333
2345
  const mouseSensor = core.useSensor(core.MouseSensor);
2334
2346
  const touchSensor = core.useSensor(core.TouchSensor);
2335
2347
  const keyboardSensor = core.useSensor(core.KeyboardSensor);
2336
2348
  const sensors = core.useSensors(mouseSensor, touchSensor, keyboardSensor, pointerSensor);
2337
- 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 })] }) }));
2338
2350
  }
2339
2351
  const ForwardedAdvancedTable = React__namespace.forwardRef(AdvancedTable);
2340
2352