@ballistix.digital/react-components 0.4.65 → 0.4.67

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 (6) hide show
  1. package/dist/index.d.ts +64 -48
  2. package/dist/index.esm.js +158 -104
  3. package/dist/index.esm.js.map +1 -1
  4. package/dist/index.js +159 -103
  5. package/dist/index.js.map +1 -1
  6. package/package.json +1 -1
package/dist/index.esm.js CHANGED
@@ -76,10 +76,10 @@ var deepCopyObject = function (object) {
76
76
  var AvatarElement = function (props) {
77
77
  var src = props.src, placeholder = props.placeholder, children = props.children, url = props.url, _a = props.size, size = _a === void 0 ? 'md' : _a, _b = props.figure, figure = _b === void 0 ? 'block' : _b, status = props.status, isDisabled = props.isDisabled, isLoading = props.isLoading, stylesOverrides = props.styles;
78
78
  var handleGenerateStyle = function () {
79
- var result = deepCopyObject(styles$k.base);
80
- var keys = calculateNestedKeys(styles$k.base);
79
+ var result = deepCopyObject(styles$l.base);
80
+ var keys = calculateNestedKeys(styles$l.base);
81
81
  keys.forEach(function (key) {
82
- set(result, key, toClassName(get(styles$k.base, key), size && get(styles$k[size], key), figure && get(styles$k[figure], key), status && get(styles$k[status], key), isDisabled && get(styles$k.disabled, key), isLoading && get(styles$k.loading, key), get(stylesOverrides, key)));
82
+ set(result, key, toClassName(get(styles$l.base, key), size && get(styles$l[size], key), figure && get(styles$l[figure], key), status && get(styles$l[status], key), isDisabled && get(styles$l.disabled, key), isLoading && get(styles$l.loading, key), get(stylesOverrides, key)));
83
83
  });
84
84
  return result;
85
85
  };
@@ -175,7 +175,7 @@ var online = {
175
175
  var blocked = {
176
176
  indicator: 'bg-red-400',
177
177
  };
178
- var styles$k = {
178
+ var styles$l = {
179
179
  base: base$i,
180
180
  xs: xs$4,
181
181
  sm: sm$5,
@@ -194,10 +194,10 @@ var styles$k = {
194
194
  var BadgeElement = function (props) {
195
195
  var children = props.children, _a = props.color, color = _a === void 0 ? 'gray' : _a, _b = props.type, type = _b === void 0 ? 'normal' : _b, _c = props.size, size = _c === void 0 ? 'sm' : _c, _d = props.figure, figure = _d === void 0 ? 'block' : _d, isDisabled = props.isDisabled, isLoading = props.isLoading, onClose = props.onClose, stylesOverrides = props.styles;
196
196
  var handleGenerateStyle = function () {
197
- var result = deepCopyObject(styles$j.base);
198
- var keys = calculateNestedKeys(styles$j.base);
197
+ var result = deepCopyObject(styles$k.base);
198
+ var keys = calculateNestedKeys(styles$k.base);
199
199
  keys.forEach(function (key) {
200
- set(result, key, toClassName(get(styles$j.base, key), type && get(styles$j[type], key), color && get(styles$j[color], key), size && get(styles$j[size], key), figure && get(styles$j[figure], key), isDisabled && get(styles$j.disabled, key), isLoading && get(styles$j.loading, key), get(stylesOverrides, key)));
200
+ set(result, key, toClassName(get(styles$k.base, key), type && get(styles$k[type], key), color && get(styles$k[color], key), size && get(styles$k[size], key), figure && get(styles$k[figure], key), isDisabled && get(styles$k.disabled, key), isLoading && get(styles$k.loading, key), get(stylesOverrides, key)));
201
201
  });
202
202
  return result;
203
203
  };
@@ -292,7 +292,7 @@ var disabled$2 = {
292
292
  var loading$1 = {
293
293
  container: 'cursor-progress',
294
294
  };
295
- var styles$j = {
295
+ var styles$k = {
296
296
  base: base$h,
297
297
  normal: normal$3,
298
298
  indicator: indicator,
@@ -319,10 +319,10 @@ var styles$j = {
319
319
  var ButtonElement = function (props) {
320
320
  var children = props.children, innerRef = props.innerRef, _a = props.htmlType, htmlType = _a === void 0 ? 'button' : _a, _b = props.type, type = _b === void 0 ? 'primary' : _b, _c = props.size, size = _c === void 0 ? 'md' : _c, _d = props.figure, figure = _d === void 0 ? 'block' : _d, _e = props.status, status = _e === void 0 ? 'idle' : _e, isDisabled = props.isDisabled, stylesOverrides = props.styles, onClick = props.onClick;
321
321
  var handleGenerateStyle = function () {
322
- var result = deepCopyObject(styles$i.base);
323
- var keys = calculateNestedKeys(styles$i.base);
322
+ var result = deepCopyObject(styles$j.base);
323
+ var keys = calculateNestedKeys(styles$j.base);
324
324
  keys.forEach(function (key) {
325
- set(result, key, toClassName(get(styles$i.base, key), type && get(styles$i[type], key), size && get(styles$i[size], key), figure && get(styles$i[figure], key), status && get(styles$i[status], key), isDisabled && get(styles$i.disabled, key), get(stylesOverrides, key)));
325
+ set(result, key, toClassName(get(styles$j.base, key), type && get(styles$j[type], key), size && get(styles$j[size], key), figure && get(styles$j[figure], key), status && get(styles$j[status], key), isDisabled && get(styles$j.disabled, key), get(stylesOverrides, key)));
326
326
  });
327
327
  return result;
328
328
  };
@@ -382,7 +382,7 @@ var error = {
382
382
  var disabled$1 = {
383
383
  container: '!opacity-20 !cursor-not-allowed',
384
384
  };
385
- var styles$i = {
385
+ var styles$j = {
386
386
  base: base$g,
387
387
  primary: primary,
388
388
  secondary: secondary,
@@ -404,10 +404,10 @@ var styles$i = {
404
404
  var ButtonGroupElement = function (props) {
405
405
  var children = props.children, stylesOverrides = props.styles;
406
406
  var handleGenerateStyle = function () {
407
- var result = deepCopyObject(styles$h.base);
408
- var keys = calculateNestedKeys(styles$h.base);
407
+ var result = deepCopyObject(styles$i.base);
408
+ var keys = calculateNestedKeys(styles$i.base);
409
409
  keys.forEach(function (key) {
410
- set(result, key, toClassName(get(styles$h.base, key), get(stylesOverrides, key)));
410
+ set(result, key, toClassName(get(styles$i.base, key), get(stylesOverrides, key)));
411
411
  });
412
412
  return result;
413
413
  };
@@ -431,22 +431,23 @@ var base$f = {
431
431
  button: '-ml-px relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-primary-500 focus:border-primary-500',
432
432
  lastButton: '-ml-px relative inline-flex items-center px-4 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-primary-500 focus:border-primary-500',
433
433
  };
434
- var styles$h = {
434
+ var styles$i = {
435
435
  base: base$f,
436
436
  };
437
437
 
438
438
  var Container$3 = function (props) {
439
- var children = props.children, label = props.label, _a = props.type, type = _a === void 0 ? 'button' : _a, _b = props.direction, direction = _b === void 0 ? 'bottom-left' : _b, stylesOverrides = props.styles;
439
+ var children = props.children, label = props.label, trigger = props.trigger, _a = props.type, type = _a === void 0 ? 'button' : _a, _b = props.direction, direction = _b === void 0 ? 'bottom-left' : _b, stylesOverrides = props.styles;
440
440
  var handleGenerateStyle = function () {
441
- var result = deepCopyObject(styles$g.base);
442
- var keys = calculateNestedKeys(styles$g.base);
441
+ var result = deepCopyObject(styles$h.base);
442
+ var keys = calculateNestedKeys(styles$h.base);
443
443
  keys.forEach(function (key) {
444
- set(result, key, toClassName(get(styles$g.base, key), type && get(styles$g[type], key), direction && get(styles$g[direction], key), get(stylesOverrides, key)));
444
+ set(result, key, toClassName(get(styles$h.base, key), type && get(styles$h[type], key), direction && get(styles$h[direction], key), get(stylesOverrides, key)));
445
445
  });
446
446
  return result;
447
447
  };
448
448
  var styles = handleGenerateStyle();
449
- return (jsxs(Menu, __assign({ as: "div", className: styles.container }, { children: [jsxs("div", { children: [type === 'button' && (jsxs(Menu.Button, __assign({ className: styles.button }, { children: [label, jsx(ChevronDownIcon, { className: "-mr-1 ml-2 h-5 w-5", "aria-hidden": "true" })] }))), type === 'compact' && (jsxs(Menu.Button, __assign({ className: styles.compact }, { children: [jsx("span", __assign({ className: "sr-only" }, { children: label })), jsx(EllipsisVerticalIcon, { className: styles.dots, "aria-hidden": "true" })] })))] }), jsx(Transition, __assign({ as: Fragment, enter: "transition ease-out duration-100", enterFrom: "transform opacity-0 scale-95", enterTo: "transform opacity-100 scale-100", leave: "transition ease-in duration-75", leaveFrom: "transform opacity-100 scale-100", leaveTo: "transform opacity-0 scale-95" }, { children: jsx(Menu.Items, __assign({ className: styles.items }, { children: children })) }))] })));
449
+ return (jsxs(Menu, __assign({ as: "div", className: styles.container }, { children: [jsxs("div", { children: [type === 'button' &&
450
+ (!trigger ? (jsxs(Menu.Button, __assign({ className: styles.button }, { children: [label, jsx(ChevronDownIcon, { className: "-mr-1 ml-2 h-5 w-5", "aria-hidden": "true" })] }))) : (jsx(Menu.Button, { children: trigger }))), type === 'compact' && (jsxs(Menu.Button, __assign({ className: styles.compact }, { children: [jsx("span", __assign({ className: "sr-only" }, { children: label })), jsx(EllipsisVerticalIcon, { className: styles.dots, "aria-hidden": "true" })] })))] }), jsx(Transition, __assign({ as: Fragment, enter: "transition ease-out duration-100", enterFrom: "transform opacity-0 scale-95", enterTo: "transform opacity-100 scale-100", leave: "transition ease-in duration-75", leaveFrom: "transform opacity-100 scale-100", leaveTo: "transform opacity-0 scale-95" }, { children: jsx(Menu.Items, __assign({ className: styles.items }, { children: children })) }))] })));
450
451
  };
451
452
  var DropdownElement = {
452
453
  Container: Container$3,
@@ -474,7 +475,7 @@ var topLeft = {
474
475
  var topRight = {
475
476
  items: 'origin-bottom-left left-0 bottom-0',
476
477
  };
477
- var styles$g = {
478
+ var styles$h = {
478
479
  base: base$e,
479
480
  button: button,
480
481
  compact: compact,
@@ -525,10 +526,10 @@ var InputGroupForm = function (props) {
525
526
  replacement: (_a = {}, _a[(_b = mask === null || mask === void 0 ? void 0 : mask.replacementCharacter) !== null && _b !== void 0 ? _b : 'X'] = /\d|\D/, _a),
526
527
  });
527
528
  var handleGenerateStyle = function () {
528
- var result = deepCopyObject(styles$f.base);
529
- var keys = calculateNestedKeys(styles$f.base);
529
+ var result = deepCopyObject(styles$g.base);
530
+ var keys = calculateNestedKeys(styles$g.base);
530
531
  keys.forEach(function (key) {
531
- set(result, key, toClassName(get(styles$f.base, key), leading !== undefined && get(styles$f.leading, key), trailing !== undefined && get(styles$f.trailing, key), type && get(styles$f[type], key), isTouched === true && !isValid && get(styles$f.invalid, key), isDisabled && get(styles$f.disabled, key), get(stylesOverrides, key)));
532
+ set(result, key, toClassName(get(styles$g.base, key), leading !== undefined && get(styles$g.leading, key), trailing !== undefined && get(styles$g.trailing, key), type && get(styles$g[type], key), isTouched === true && !isValid && get(styles$g.invalid, key), isDisabled && get(styles$g.disabled, key), get(stylesOverrides, key)));
532
533
  });
533
534
  return result;
534
535
  };
@@ -598,7 +599,7 @@ var invalid = {
598
599
  var disabled = {
599
600
  input: 'block w-full rounded-md border-0 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200 sm:text-sm sm:leading-6',
600
601
  };
601
- var styles$f = {
602
+ var styles$g = {
602
603
  base: base$d,
603
604
  leading: leading,
604
605
  trailing: trailing,
@@ -614,10 +615,10 @@ var styles$f = {
614
615
  var ContainerLayout = function (props) {
615
616
  var children = props.children, _a = props.type, type = _a === void 0 ? 'break' : _a, stylesOverrides = props.styles;
616
617
  var handleGenerateStyle = function () {
617
- var result = deepCopyObject(styles$e.base);
618
- var keys = calculateNestedKeys(styles$e.base);
618
+ var result = deepCopyObject(styles$f.base);
619
+ var keys = calculateNestedKeys(styles$f.base);
619
620
  keys.forEach(function (key) {
620
- set(result, key, toClassName(get(styles$e.base, key), type && get(styles$e[type], key), get(stylesOverrides, key)));
621
+ set(result, key, toClassName(get(styles$f.base, key), type && get(styles$f[type], key), get(stylesOverrides, key)));
621
622
  });
622
623
  return result;
623
624
  };
@@ -654,7 +655,7 @@ var center$3 = {
654
655
  var fill$1 = {
655
656
  container: 'max-w-7xl mx-auto sm:px-6 lg:px-8',
656
657
  };
657
- var styles$e = {
658
+ var styles$f = {
658
659
  base: base$c,
659
660
  break: breakStyles,
660
661
  center: center$3,
@@ -664,10 +665,10 @@ var styles$e = {
664
665
  var DividerLayout = function (props) {
665
666
  var children = props.children, _a = props.type, type = _a === void 0 ? 'left' : _a, stylesOverrides = props.styles;
666
667
  var handleGenerateStyle = function () {
667
- var result = deepCopyObject(styles$d.base);
668
- var keys = calculateNestedKeys(styles$d.base);
668
+ var result = deepCopyObject(styles$e.base);
669
+ var keys = calculateNestedKeys(styles$e.base);
669
670
  keys.forEach(function (key) {
670
- set(result, key, toClassName(get(styles$d.base, key), type && get(styles$d[type], key), get(stylesOverrides, key)));
671
+ set(result, key, toClassName(get(styles$e.base, key), type && get(styles$e[type], key), get(stylesOverrides, key)));
671
672
  });
672
673
  return result;
673
674
  };
@@ -691,7 +692,7 @@ var center$2 = {
691
692
  var right = {
692
693
  body: 'justify-end',
693
694
  };
694
- var styles$d = {
695
+ var styles$e = {
695
696
  base: base$b,
696
697
  left: left,
697
698
  center: center$2,
@@ -701,10 +702,10 @@ var styles$d = {
701
702
  var ListContainerLayout = function (props) {
702
703
  var children = props.children, _a = props.type, type = _a === void 0 ? 'fill' : _a, stylesOverrides = props.styles;
703
704
  var handleGenerateStyle = function () {
704
- var result = deepCopyObject(styles$c.base);
705
- var keys = calculateNestedKeys(styles$c.base);
705
+ var result = deepCopyObject(styles$d.base);
706
+ var keys = calculateNestedKeys(styles$d.base);
706
707
  keys.forEach(function (key) {
707
- set(result, key, toClassName(get(styles$c.base, key), type && get(styles$c[type], key), get(stylesOverrides, key)));
708
+ set(result, key, toClassName(get(styles$d.base, key), type && get(styles$d[type], key), get(stylesOverrides, key)));
708
709
  });
709
710
  return result;
710
711
  };
@@ -746,7 +747,7 @@ var cardSticky = {
746
747
  list: 'space-y-3',
747
748
  item: 'bg-white shadow overflow-hidden px-4 py-4 sm:px-6 sm:rounded-md',
748
749
  };
749
- var styles$c = {
750
+ var styles$d = {
750
751
  base: base$a,
751
752
  fill: fill,
752
753
  'fill-sticky': fillSticky,
@@ -759,10 +760,10 @@ var styles$c = {
759
760
  var MediaObjectLayout = function (props) {
760
761
  var title = props.title, paragraph = props.paragraph, customFigure = props.figure, _a = props.type, type = _a === void 0 ? 'top' : _a, stylesOverrides = props.styles;
761
762
  var handleGenerateStyle = function () {
762
- var result = deepCopyObject(styles$b.base);
763
- var keys = calculateNestedKeys(styles$b.base);
763
+ var result = deepCopyObject(styles$c.base);
764
+ var keys = calculateNestedKeys(styles$c.base);
764
765
  keys.forEach(function (key) {
765
- set(result, key, toClassName(get(styles$b.base, key), type && get(styles$b[type], key), get(stylesOverrides, key)));
766
+ set(result, key, toClassName(get(styles$c.base, key), type && get(styles$c[type], key), get(stylesOverrides, key)));
766
767
  });
767
768
  return result;
768
769
  };
@@ -835,7 +836,7 @@ var wideReversed = {
835
836
  figure: 'mb-4 md:mb-0 sm:mr-4 sm:mb-4',
836
837
  svg: 'h-32 w-full sm:w-32',
837
838
  };
838
- var styles$b = {
839
+ var styles$c = {
839
840
  base: base$9,
840
841
  top: top,
841
842
  'top-reversed': topReversed,
@@ -854,10 +855,10 @@ var styles$b = {
854
855
  var Container$2 = function (props) {
855
856
  var children = props.children, _a = props.type, type = _a === void 0 ? 'normal' : _a, stylesOverrides = props.styles;
856
857
  var handleGenerateStyle = function () {
857
- var result = deepCopyObject(styles$a.base);
858
- var keys = calculateNestedKeys(styles$a.base);
858
+ var result = deepCopyObject(styles$b.base);
859
+ var keys = calculateNestedKeys(styles$b.base);
859
860
  keys.forEach(function (key) {
860
- set(result, key, toClassName(get(styles$a.base, key), type && get(styles$a[type], key), get(stylesOverrides, key)));
861
+ set(result, key, toClassName(get(styles$b.base, key), type && get(styles$b[type], key), get(stylesOverrides, key)));
861
862
  });
862
863
  return result;
863
864
  };
@@ -867,10 +868,10 @@ var Container$2 = function (props) {
867
868
  var Section = function (props) {
868
869
  var children = props.children, stylesOverrides = props.styles;
869
870
  var handleGenerateStyle = function () {
870
- var result = deepCopyObject(styles$a.base);
871
- var keys = calculateNestedKeys(styles$a.base);
871
+ var result = deepCopyObject(styles$b.base);
872
+ var keys = calculateNestedKeys(styles$b.base);
872
873
  keys.forEach(function (key) {
873
- set(result, key, toClassName(get(styles$a.base, key), get(stylesOverrides, key)));
874
+ set(result, key, toClassName(get(styles$b.base, key), get(stylesOverrides, key)));
874
875
  });
875
876
  return result;
876
877
  };
@@ -892,7 +893,7 @@ var normal$1 = {
892
893
  var sticky$1 = {
893
894
  container: 'sm:rounded-lg',
894
895
  };
895
- var styles$a = {
896
+ var styles$b = {
896
897
  base: base$8,
897
898
  normal: normal$1,
898
899
  sticky: sticky$1,
@@ -998,10 +999,10 @@ var PanelPaginationNavigation = function (props) {
998
999
  }
999
1000
  }, [defaultValue]);
1000
1001
  var handleGenerateStyle = function () {
1001
- var result = deepCopyObject(styles$9.base);
1002
- var keys = calculateNestedKeys(styles$9.base);
1002
+ var result = deepCopyObject(styles$a.base);
1003
+ var keys = calculateNestedKeys(styles$a.base);
1003
1004
  keys.forEach(function (key) {
1004
- set(result, key, toClassName(get(styles$9.base, key), get(stylesOverrides, key)));
1005
+ set(result, key, toClassName(get(styles$a.base, key), get(stylesOverrides, key)));
1005
1006
  });
1006
1007
  return result;
1007
1008
  };
@@ -1062,7 +1063,7 @@ var base$7 = {
1062
1063
  label: 'sr-only',
1063
1064
  icon: 'w-5 h-5',
1064
1065
  };
1065
- var styles$9 = {
1066
+ var styles$a = {
1066
1067
  base: base$7,
1067
1068
  };
1068
1069
 
@@ -1071,10 +1072,10 @@ var TableList = function (props) {
1071
1072
  var id = props.id, columns = props.columns, data = props.data, page = props.page, children = props.children, defaultOrder = props.defaultOrder, defaultVisibility = props.defaultVisibility, _f = props.type, type = _f === void 0 ? 'normal' : _f, isLoading = props.isLoading, _g = props.isStriped, isStriped = _g === void 0 ? false : _g, _h = props.hasStickyHeader, hasStickyHeader = _h === void 0 ? false : _h, _j = props.hasVerticalSeparators, hasVerticalSeparators = _j === void 0 ? false : _j, _k = props.areControlsVisible, areControlsVisible = _k === void 0 ? true : _k, customControls = props.customControls, _l = props.exportFileName, exportFileName = _l === void 0 ? 'table-export' : _l, stylesOverrides = props.styles, onChange = props.onChange, onPaginate = props.onPaginate;
1072
1073
  var _m = useExcel(), generate = _m.generate, write = _m.write;
1073
1074
  var handleGenerateStyle = function () {
1074
- var result = deepCopyObject(styles$8.base);
1075
- var keys = calculateNestedKeys(styles$8.base);
1075
+ var result = deepCopyObject(styles$9.base);
1076
+ var keys = calculateNestedKeys(styles$9.base);
1076
1077
  keys.forEach(function (key) {
1077
- set(result, key, toClassName(get(styles$8.base, key), type && get(styles$8[type], key), hasStickyHeader && get(styles$8.sticky, key), hasVerticalSeparators && get(styles$8.separated, key), areControlsVisible && get(styles$8.controlled, key), get(stylesOverrides, key)));
1078
+ set(result, key, toClassName(get(styles$9.base, key), type && get(styles$9[type], key), hasStickyHeader && get(styles$9.sticky, key), hasVerticalSeparators && get(styles$9.separated, key), areControlsVisible && get(styles$9.controlled, key), get(stylesOverrides, key)));
1078
1079
  });
1079
1080
  return result;
1080
1081
  };
@@ -1311,7 +1312,7 @@ var controlled = {
1311
1312
  container: '!flex',
1312
1313
  },
1313
1314
  };
1314
- var styles$8 = {
1315
+ var styles$9 = {
1315
1316
  base: base$6,
1316
1317
  normal: normal,
1317
1318
  panel: panel$1,
@@ -1358,30 +1359,30 @@ var TableList2 = function (props) {
1358
1359
  onChange && onChange(state);
1359
1360
  }
1360
1361
  }, [onChange, state]);
1361
- return (jsxs("div", __assign({ className: styles$7.container }, { children: [jsx("div", __assign({ className: styles$7.head }, { children: head && head(state) })), jsx("div", __assign({ className: "" }, { children: jsx("div", __assign({ className: "flow-root" }, { children: jsx("div", __assign({ className: "overflow-scroll" }, { children: jsxs("div", __assign({ className: "inline-block min-w-full align-middle" }, { children: [jsxs("table", __assign({ className: "min-w-full border-separate border-spacing-0 " }, { children: [jsx("thead", __assign({ className: "" }, { children: table === null || table === void 0 ? void 0 : table.getHeaderGroups().map(function (headerGroup) { return (jsx("tr", { children: headerGroup.headers.map(function (header) { return (jsxs("th", __assign({ colSpan: header.colSpan, className: toClassName(styles$7.body.table.head.cell, 'border-b', header.column.getCanSort() && 'cursor-pointer'), onClick: header.column.getToggleSortingHandler(), style: {
1362
+ return (jsxs("div", __assign({ className: styles$8.container }, { children: [jsx("div", __assign({ className: styles$8.head }, { children: head && head(state) })), jsx("div", __assign({ className: "" }, { children: jsx("div", __assign({ className: "flow-root" }, { children: jsx("div", __assign({ className: "overflow-scroll" }, { children: jsxs("div", __assign({ className: "inline-block min-w-full align-middle" }, { children: [jsxs("table", __assign({ className: "min-w-full border-separate border-spacing-0 " }, { children: [jsx("thead", __assign({ className: "" }, { children: table === null || table === void 0 ? void 0 : table.getHeaderGroups().map(function (headerGroup) { return (jsx("tr", { children: headerGroup.headers.map(function (header) { return (jsxs("th", __assign({ colSpan: header.colSpan, className: toClassName(styles$8.body.table.head.cell, 'border-b', header.column.getCanSort() && 'cursor-pointer'), onClick: header.column.getToggleSortingHandler(), style: {
1362
1363
  minWidth: header.column.columnDef.size
1363
1364
  ? "".concat(header.column.columnDef.size, "px")
1364
1365
  : 'auto',
1365
1366
  } }, { children: [header.isPlaceholder
1366
1367
  ? null
1367
- : flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanSort() && (jsx("span", __assign({ className: toClassName(styles$7.sortIndicator.container, header.column.getIsSorted()
1368
- ? styles$7.sortIndicator.isSorted
1369
- : styles$7.sortIndicator.isNotSorted) }, { children: jsx(ChevronDownIcon, { className: toClassName(styles$7.sortIndicator.icon.container, header.column.getIsSorted() === 'asc' &&
1368
+ : flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanSort() && (jsx("span", __assign({ className: toClassName(styles$8.sortIndicator.container, header.column.getIsSorted()
1369
+ ? styles$8.sortIndicator.isSorted
1370
+ : styles$8.sortIndicator.isNotSorted) }, { children: jsx(ChevronDownIcon, { className: toClassName(styles$8.sortIndicator.icon.container, header.column.getIsSorted() === 'asc' &&
1370
1371
  '-scale-100'), "aria-hidden": "true" }) })))] }), header.id)); }) }, headerGroup.id)); }) })), !isLoading && (jsx("tbody", __assign({ className: "border" }, { children: table === null || table === void 0 ? void 0 : table.getRowModel().rows.map(function (row, index) {
1371
1372
  var _a;
1372
- return (jsx("tr", __assign({ className: toClassName(styles$7.body.table.body.row, ((_a = config.options) === null || _a === void 0 ? void 0 : _a.isStriped) &&
1373
+ return (jsx("tr", __assign({ className: toClassName(styles$8.body.table.body.row, ((_a = config.options) === null || _a === void 0 ? void 0 : _a.isStriped) &&
1373
1374
  index % 2 === 0 &&
1374
1375
  'bg-gray-50') }, { children: row.getVisibleCells().map(function (cell) {
1375
1376
  var _a, _b, _c;
1376
- return (jsx("td", __assign({ className: toClassName(styles$7.body.table.body.cell, ((_a = config === null || config === void 0 ? void 0 : config.options) === null || _a === void 0 ? void 0 : _a.hasStickyHeader) &&
1377
+ return (jsx("td", __assign({ className: toClassName(styles$8.body.table.body.cell, ((_a = config === null || config === void 0 ? void 0 : config.options) === null || _a === void 0 ? void 0 : _a.hasStickyHeader) &&
1377
1378
  index !==
1378
1379
  ((_c = (_b = table === null || table === void 0 ? void 0 : table.getState()) === null || _b === void 0 ? void 0 : _b.pagination) === null || _c === void 0 ? void 0 : _c.pageSize) - 1 &&
1379
1380
  'border-b border-gray-200') }, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }), cell.id));
1380
1381
  }) }), row.id));
1381
- }) })))] })), isLoading && (jsx("div", __assign({ className: "flex flex-col gap-y-2 w-full pt-5" }, { children: new Array(8).fill(undefined).map(function (index) { return (jsxs("div", __assign({ className: "flex gap-2" }, { children: [jsx("div", { className: "w-20 h-14 rounded-md bg-gray-100 animate-pulse" }), jsx("div", { className: "w-full h-14 rounded-md bg-gray-100 animate-pulse" })] }), index)); }) })))] })) })) })) })), jsx("div", __assign({ className: styles$7.foot }, { children: foot && foot(state) }))] })));
1382
+ }) })))] })), isLoading && (jsx("div", __assign({ className: "flex flex-col gap-y-2 w-full pt-5" }, { children: new Array(8).fill(undefined).map(function (index) { return (jsxs("div", __assign({ className: "flex gap-2" }, { children: [jsx("div", { className: "w-20 h-14 rounded-md bg-gray-100 animate-pulse" }), jsx("div", { className: "w-full h-14 rounded-md bg-gray-100 animate-pulse" })] }), index)); }) })))] })) })) })) })), jsx("div", __assign({ className: styles$8.foot }, { children: foot && foot(state) }))] })));
1382
1383
  };
1383
1384
 
1384
- var styles$7 = {
1385
+ var styles$8 = {
1385
1386
  container: '',
1386
1387
  head: '',
1387
1388
  body: {
@@ -1424,10 +1425,10 @@ var createColumnHelper = function () {
1424
1425
  var BreadcrumbsNavigation = function (props) {
1425
1426
  var _a = props.href, href = _a === void 0 ? '/' : _a, pages = props.pages, _b = props.type, type = _b === void 0 ? 'slashes' : _b, customSeparator = props.separator, stylesOverrides = props.styles;
1426
1427
  var handleGenerateStyle = function () {
1427
- var result = deepCopyObject(styles$6.base);
1428
- var keys = calculateNestedKeys(styles$6.base);
1428
+ var result = deepCopyObject(styles$7.base);
1429
+ var keys = calculateNestedKeys(styles$7.base);
1429
1430
  keys.forEach(function (key) {
1430
- set$1(result, key, toClassName(get$1(styles$6.base, key), type && get$1(styles$6[type], key), get$1(stylesOverrides, key)));
1431
+ set$1(result, key, toClassName(get$1(styles$7.base, key), type && get$1(styles$7[type], key), get$1(stylesOverrides, key)));
1431
1432
  });
1432
1433
  return result;
1433
1434
  };
@@ -1548,7 +1549,7 @@ var bar = {
1548
1549
  link: '',
1549
1550
  },
1550
1551
  };
1551
- var styles$6 = {
1552
+ var styles$7 = {
1552
1553
  base: base$5,
1553
1554
  slashes: slashes,
1554
1555
  chevrons: chevrons,
@@ -1560,10 +1561,10 @@ var PagePaginationNavigation = function (props) {
1560
1561
  var _a = props.min, min = _a === void 0 ? 1 : _a, _b = props.max, max = _b === void 0 ? 20 : _b, stylesOverrides = props.styles, onChange = props.onChange;
1561
1562
  var _c = useState(2), current = _c[0], setCurrent = _c[1];
1562
1563
  var handleGenerateStyle = function () {
1563
- var result = deepCopyObject(styles$5.base);
1564
- var keys = calculateNestedKeys(styles$5.base);
1564
+ var result = deepCopyObject(styles$6.base);
1565
+ var keys = calculateNestedKeys(styles$6.base);
1565
1566
  keys.forEach(function (key) {
1566
- set(result, key, toClassName(get(styles$5.base, key), get(stylesOverrides, key)));
1567
+ set(result, key, toClassName(get(styles$6.base, key), get(stylesOverrides, key)));
1567
1568
  });
1568
1569
  return result;
1569
1570
  };
@@ -1620,7 +1621,7 @@ var base$4 = {
1620
1621
  },
1621
1622
  divider: 'inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500',
1622
1623
  };
1623
- var styles$5 = {
1624
+ var styles$6 = {
1624
1625
  base: base$4,
1625
1626
  };
1626
1627
 
@@ -1628,10 +1629,10 @@ var Container$1 = function (props) {
1628
1629
  var children = props.children, stylesOverrides = props.styles;
1629
1630
  var _a = useState(''), active = _a[0], setActive = _a[1];
1630
1631
  var handleGenerateStyle = function () {
1631
- var result = deepCopyObject(styles$4.base);
1632
- var keys = calculateNestedKeys(styles$4.base);
1632
+ var result = deepCopyObject(styles$5.base);
1633
+ var keys = calculateNestedKeys(styles$5.base);
1633
1634
  keys.forEach(function (key) {
1634
- set(result, key, toClassName(get(styles$4.base, key), get(stylesOverrides, key)));
1635
+ set(result, key, toClassName(get(styles$5.base, key), get(stylesOverrides, key)));
1635
1636
  });
1636
1637
  return result;
1637
1638
  };
@@ -1641,10 +1642,10 @@ var Container$1 = function (props) {
1641
1642
  var List$1 = function (props) {
1642
1643
  var name = props.name, children = props.children, active = props.active, setActive = props.setActive, stylesOverrides = props.styles;
1643
1644
  var handleGenerateStyle = function () {
1644
- var result = deepCopyObject(styles$4.base);
1645
- var keys = calculateNestedKeys(styles$4.base);
1645
+ var result = deepCopyObject(styles$5.base);
1646
+ var keys = calculateNestedKeys(styles$5.base);
1646
1647
  keys.forEach(function (key) {
1647
- set(result, key, toClassName(get(styles$4.base, key), get(stylesOverrides, key)));
1648
+ set(result, key, toClassName(get(styles$5.base, key), get(stylesOverrides, key)));
1648
1649
  });
1649
1650
  return result;
1650
1651
  };
@@ -1690,10 +1691,10 @@ var List$1 = function (props) {
1690
1691
  var Item$1 = function (props) {
1691
1692
  var children = props.children, _a = props.as, LinkComponent = _a === void 0 ? 'a' : _a, _b = props.type, type = _b === void 0 ? 'underline' : _b, href = props.href, isCurrent = props.isCurrent, onClick = props.onClick, stylesOverrides = props.styles;
1692
1693
  var handleGenerateStyle = function () {
1693
- var result = deepCopyObject(styles$4.base);
1694
- var keys = calculateNestedKeys(styles$4.base);
1694
+ var result = deepCopyObject(styles$5.base);
1695
+ var keys = calculateNestedKeys(styles$5.base);
1695
1696
  keys.forEach(function (key) {
1696
- set(result, key, toClassName(get(styles$4.base, key), type && get(styles$4[type], key), get(stylesOverrides, key)));
1697
+ set(result, key, toClassName(get(styles$5.base, key), type && get(styles$5[type], key), get(stylesOverrides, key)));
1697
1698
  });
1698
1699
  return result;
1699
1700
  };
@@ -1751,7 +1752,7 @@ var buttons = {
1751
1752
  inactive: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
1752
1753
  },
1753
1754
  };
1754
- var styles$4 = {
1755
+ var styles$5 = {
1755
1756
  base: base$3,
1756
1757
  underline: underline,
1757
1758
  pills: pills,
@@ -1779,11 +1780,11 @@ var List = function (props) {
1779
1780
  setActive && setActive(tab === null || tab === void 0 ? void 0 : tab.props.accessor);
1780
1781
  // eslint-disable-next-line react-hooks/exhaustive-deps
1781
1782
  }, []);
1782
- return (jsx("nav", __assign({ className: toClassName(styles$3.list, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.list) }, { children: children })));
1783
+ return (jsx("nav", __assign({ className: toClassName(styles$4.list, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.list) }, { children: children })));
1783
1784
  };
1784
1785
  var Item = function (props) {
1785
1786
  var children = props.children, href = props.href, isCurrent = props.isCurrent, _a = props.linkComponent, LinkComponent = _a === void 0 ? 'a' : _a, onClick = props.onClick;
1786
- return (jsx(LinkComponent, __assign({ href: href, className: toClassName(styles$3.item[isCurrent ? 'active' : 'notActive'], styles$3.item.base), onClick: onClick }, { children: children })));
1787
+ return (jsx(LinkComponent, __assign({ href: href, className: toClassName(styles$4.item[isCurrent ? 'active' : 'notActive'], styles$4.item.base), onClick: onClick }, { children: children })));
1787
1788
  };
1788
1789
  var View = function (props) {
1789
1790
  var children = props.children;
@@ -1796,7 +1797,7 @@ var VerticalNavigation = {
1796
1797
  View: View,
1797
1798
  };
1798
1799
 
1799
- var styles$3 = {
1800
+ var styles$4 = {
1800
1801
  container: '',
1801
1802
  list: 'space-y-1',
1802
1803
  item: {
@@ -1814,10 +1815,10 @@ var ModalOverlay = function (props) {
1814
1815
  handleClose: function () { return setIsOpen(false); },
1815
1816
  }); }, []);
1816
1817
  var handleGenerateStyle = function () {
1817
- var result = deepCopyObject(styles$2.base);
1818
- var keys = calculateNestedKeys(styles$2.base);
1818
+ var result = deepCopyObject(styles$3.base);
1819
+ var keys = calculateNestedKeys(styles$3.base);
1819
1820
  keys.forEach(function (key) {
1820
- set(result, key, toClassName(get(styles$2.base, key), size && get(styles$2[size], key), get(stylesOverrides, key)));
1821
+ set(result, key, toClassName(get(styles$3.base, key), size && get(styles$3[size], key), get(stylesOverrides, key)));
1821
1822
  });
1822
1823
  return result;
1823
1824
  };
@@ -1889,7 +1890,7 @@ var xl$2 = {
1889
1890
  container: 'sm:max-w-4xl',
1890
1891
  },
1891
1892
  };
1892
- var styles$2 = {
1893
+ var styles$3 = {
1893
1894
  base: base$2,
1894
1895
  xs: xs$2,
1895
1896
  sm: sm$2,
@@ -1901,10 +1902,10 @@ var styles$2 = {
1901
1902
  var NotificationOverlayContainer = function (_a) {
1902
1903
  var children = _a.children, stylesOverrides = _a.styles;
1903
1904
  var handleGenerateStyle = function () {
1904
- var result = deepCopyObject(styles$1.base);
1905
- var keys = calculateNestedKeys(styles$1.base);
1905
+ var result = deepCopyObject(styles$2.base);
1906
+ var keys = calculateNestedKeys(styles$2.base);
1906
1907
  keys.forEach(function (key) {
1907
- set(result, key, toClassName(get(styles$1.base, key), get(stylesOverrides, key)));
1908
+ set(result, key, toClassName(get(styles$2.base, key), get(stylesOverrides, key)));
1908
1909
  });
1909
1910
  return result;
1910
1911
  };
@@ -1919,10 +1920,10 @@ var NotificationOverlayItem = function (props) {
1919
1920
  onClose: function () { return setIsOpen(false); },
1920
1921
  }); }, []);
1921
1922
  var handleGenerateStyle = function () {
1922
- var result = deepCopyObject(styles$1.base);
1923
- var keys = calculateNestedKeys(styles$1.base);
1923
+ var result = deepCopyObject(styles$2.base);
1924
+ var keys = calculateNestedKeys(styles$2.base);
1924
1925
  keys.forEach(function (key) {
1925
- set(result, key, toClassName(get(styles$1.base, key), size && get(styles$1[size], key), get(stylesOverrides, key)));
1926
+ set(result, key, toClassName(get(styles$2.base, key), size && get(styles$2[size], key), get(stylesOverrides, key)));
1926
1927
  });
1927
1928
  return result;
1928
1929
  };
@@ -1994,7 +1995,7 @@ var xl$1 = {
1994
1995
  },
1995
1996
  },
1996
1997
  };
1997
- var styles$1 = {
1998
+ var styles$2 = {
1998
1999
  base: base$1,
1999
2000
  xs: xs$1,
2000
2001
  sm: sm$1,
@@ -2011,15 +2012,15 @@ var SlideOverOverlay = function (props) {
2011
2012
  onClose: function () { return setIsOpen(false); },
2012
2013
  }); }, []);
2013
2014
  var handleGenerateStyle = function () {
2014
- var result = deepCopyObject(styles.base);
2015
- var keys = calculateNestedKeys(styles.base);
2015
+ var result = deepCopyObject(styles$1.base);
2016
+ var keys = calculateNestedKeys(styles$1.base);
2016
2017
  keys.forEach(function (key) {
2017
- set(result, key, toClassName(get(styles.base, key), size && get(styles[size], key), get(stylesOverrides, key)));
2018
+ set(result, key, toClassName(get(styles$1.base, key), size && get(styles$1[size], key), get(stylesOverrides, key)));
2018
2019
  });
2019
2020
  return result;
2020
2021
  };
2021
- var styles$1 = handleGenerateStyle();
2022
- return (jsxs(Fragment$1, { children: [jsx(Transition.Root, __assign({ show: isOpen, as: Fragment }, { children: jsxs(Dialog, __assign({ as: "div", className: styles$1.container, onClose: setIsOpen }, { children: [jsx(Transition.Child, __assign({ as: Fragment, enter: styles$1.background.transition.enter, enterFrom: styles$1.background.transition.enterFrom, enterTo: styles$1.background.transition.enterTo, leave: styles$1.background.transition.leave, leaveFrom: styles$1.background.transition.leaveFrom, leaveTo: styles$1.background.transition.leaveTo }, { children: jsx("div", { className: styles$1.background.container }) })), jsx("div", __assign({ className: styles$1.layout.container }, { children: jsx("div", __assign({ className: styles$1.layout.content }, { children: jsx("div", __assign({ className: styles$1.layout.inner }, { children: jsx(Transition.Child, __assign({ as: Fragment, enter: styles$1.panel.transition.enter, enterFrom: styles$1.panel.transition.enterFrom, enterTo: styles$1.panel.transition.enterTo, leave: styles$1.panel.transition.leave, leaveFrom: styles$1.panel.transition.leaveFrom, leaveTo: styles$1.panel.transition.leaveTo }, { children: jsx(Dialog.Panel, __assign({ className: styles$1.panel.container }, { children: children(options) })) })) })) })) }))] })) })), trigger && trigger(options)] }));
2022
+ var styles = handleGenerateStyle();
2023
+ return (jsxs(Fragment$1, { children: [jsx(Transition.Root, __assign({ show: isOpen, as: Fragment }, { children: jsxs(Dialog, __assign({ as: "div", className: styles.container, onClose: setIsOpen }, { children: [jsx(Transition.Child, __assign({ as: Fragment, enter: styles.background.transition.enter, enterFrom: styles.background.transition.enterFrom, enterTo: styles.background.transition.enterTo, leave: styles.background.transition.leave, leaveFrom: styles.background.transition.leaveFrom, leaveTo: styles.background.transition.leaveTo }, { children: jsx("div", { className: styles.background.container }) })), jsx("div", __assign({ className: styles.layout.container }, { children: jsx("div", __assign({ className: styles.layout.content }, { children: jsx("div", __assign({ className: styles.layout.inner }, { children: jsx(Transition.Child, __assign({ as: Fragment, enter: styles.panel.transition.enter, enterFrom: styles.panel.transition.enterFrom, enterTo: styles.panel.transition.enterTo, leave: styles.panel.transition.leave, leaveFrom: styles.panel.transition.leaveFrom, leaveTo: styles.panel.transition.leaveTo }, { children: jsx(Dialog.Panel, __assign({ className: styles.panel.container }, { children: children(options) })) })) })) })) }))] })) })), trigger && trigger(options)] }));
2023
2024
  };
2024
2025
 
2025
2026
  var base = {
@@ -2077,7 +2078,7 @@ var xl = {
2077
2078
  container: 'sm:max-w-4xl',
2078
2079
  },
2079
2080
  };
2080
- var styles = {
2081
+ var styles$1 = {
2081
2082
  base: base,
2082
2083
  xs: xs,
2083
2084
  sm: sm,
@@ -2086,5 +2087,58 @@ var styles = {
2086
2087
  xl: xl,
2087
2088
  };
2088
2089
 
2089
- export { AvatarElement, BadgeElement, BreadcrumbsNavigation, ButtonElement, ButtonGroupElement, ContainerLayout, DividerLayout, DropdownElement, IconElement, InputGroupForm, ListContainerLayout, MediaObjectLayout, ModalOverlay, NotificationOverlay, PagePaginationNavigation, LayoutPanel as PanelLayout, PanelPaginationNavigation, SlideOverOverlay, TabNavigation, TableList, TableList2, VerticalNavigation, createColumnHelper };
2090
+ var TableColumnOptionsCustom = function (props) {
2091
+ var table = props.table, trigger = props.trigger, setColumnOrder = props.setColumnOrder;
2092
+ var handleUpdateColumnOrder = useCallback(function (table, column, location, setColumnOrder) {
2093
+ var _a;
2094
+ var ids = (_a = table
2095
+ .getAllLeafColumns()) === null || _a === void 0 ? void 0 : _a.map(function (column) { return column.id; });
2096
+ var currentIndexOfId = ids.findIndex(function (id) { return id === column.id; });
2097
+ // Remove id from array.
2098
+ ids.splice(currentIndexOfId, 1);
2099
+ // Re-insert id at correct location in array.
2100
+ ids.splice(location, 0, column.id);
2101
+ setColumnOrder(ids);
2102
+ }, []);
2103
+ return (jsx(DropdownElement.Container, __assign({ trigger: trigger }, { children: jsx("div", __assign({ className: styles.controls.content }, { children: table.getAllLeafColumns().map(function (column, index) {
2104
+ var canSort = column === null || column === void 0 ? void 0 : column.getCanSort();
2105
+ return (jsx(DropdownElement.Item, { children: function () { return (jsxs("div", __assign({ className: toClassName(styles.controls.dropdown.container, !canSort && 'hidden') }, { children: [jsx("input", { className: styles.controls.dropdown.input, type: "checkbox", checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }), jsx("label", __assign({ className: styles.controls.dropdown.label }, { children: column.columnDef.header })), jsxs("div", __assign({ className: styles.controls.dropdown.actions }, { children: [jsx(ChevronDownIcon$1, { className: styles.controls.dropdown.upIcon, onClick: function () {
2106
+ return handleUpdateColumnOrder(table, column, index - 1, setColumnOrder);
2107
+ } }), jsx(ChevronDownIcon$1, { className: styles.controls.dropdown.downIcon, onClick: function () {
2108
+ return handleUpdateColumnOrder(table, column, index + 1, setColumnOrder);
2109
+ } })] }))] }))); } }, column.id));
2110
+ }) })) })));
2111
+ };
2112
+
2113
+ var styles = {
2114
+ container: '',
2115
+ controls: {
2116
+ container: 'flex-row justify-between z-10 relative mb-4 gap-2 hidden',
2117
+ content: 'my-2 flex flex-col',
2118
+ head: '',
2119
+ body: 'flex flex-row justify-end gap-2',
2120
+ dropdown: {
2121
+ container: 'px-4 py-2 text-sm flex flex-row items-center font-medium group',
2122
+ input: 'mr-3 cursor-pointer',
2123
+ label: 'mr-3',
2124
+ actions: 'hidden grid-cols-2 gap-2 group-hover:grid text-gray-400',
2125
+ upIcon: 'w-5 h-5 -scale-y-100 hover:text-black hover:bg-gray-200 rounded-md cursor-pointer',
2126
+ downIcon: 'w-5 h-5 hover:text-black hover:bg-gray-200 rounded-md cursor-pointer',
2127
+ },
2128
+ },
2129
+ label: 'hidden md:block',
2130
+ icon: 'md:mr-3 inline-flex items-center',
2131
+ };
2132
+
2133
+ var TableExcelExportCustom = function (props) {
2134
+ var table = props.table, fileName = props.fileName, children = props.children;
2135
+ var _a = useExcel(), generate = _a.generate, write = _a.write;
2136
+ var handleExport = function () {
2137
+ var sheets = generate([table]);
2138
+ write(sheets, { fileName: fileName });
2139
+ };
2140
+ return jsx("div", { children: children({ handleExport: handleExport }) });
2141
+ };
2142
+
2143
+ export { AvatarElement, BadgeElement, BreadcrumbsNavigation, ButtonElement, ButtonGroupElement, ContainerLayout, DividerLayout, DropdownElement, IconElement, InputGroupForm, ListContainerLayout, MediaObjectLayout, ModalOverlay, NotificationOverlay, PagePaginationNavigation, LayoutPanel as PanelLayout, PanelPaginationNavigation, SlideOverOverlay, TabNavigation, TableColumnOptionsCustom, TableExcelExportCustom as TableExportCustom, TableList, TableList2, VerticalNavigation, createColumnHelper };
2090
2144
  //# sourceMappingURL=index.esm.js.map