@ballistix.digital/react-components 3.3.3 → 4.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +9 -1
- package/dist/index.esm.js +34 -18
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +33 -17
- package/dist/index.js.map +1 -1
- package/dist/lib/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ import { DeepPartialType } from 'types/DeepPartialType';
|
|
|
3
3
|
import { IconName } from '@fortawesome/fontawesome-svg-core';
|
|
4
4
|
import { Placement } from '@floating-ui/react';
|
|
5
5
|
import { Menu } from '@headlessui/react';
|
|
6
|
+
import { AnchorProps } from '@headlessui/react/dist/internal/floating';
|
|
6
7
|
import { ColumnDef, SortingState, ColumnOrderState, Row, Table } from '@tanstack/react-table';
|
|
7
8
|
import { TButtonElementStyles as TButtonElementStyles$1 } from 'components/Element/Button';
|
|
8
9
|
import { TDropdownElementStyles as TDropdownElementStyles$1 } from 'components/Element/Dropdown';
|
|
@@ -159,7 +160,7 @@ type TProps$c = {
|
|
|
159
160
|
trigger?: ReactNode;
|
|
160
161
|
dataCy?: string;
|
|
161
162
|
type?: 'button' | 'compact';
|
|
162
|
-
direction?:
|
|
163
|
+
direction?: AnchorProps;
|
|
163
164
|
isEscapingOverflow?: boolean;
|
|
164
165
|
styles?: TDropdownElementStyles;
|
|
165
166
|
};
|
|
@@ -491,6 +492,10 @@ declare const base$e: {
|
|
|
491
492
|
tableWrapperWithLeftSide: string;
|
|
492
493
|
table: {
|
|
493
494
|
container: string;
|
|
495
|
+
pinnedColumns: {
|
|
496
|
+
left: string;
|
|
497
|
+
right: string;
|
|
498
|
+
};
|
|
494
499
|
head: {
|
|
495
500
|
container: string;
|
|
496
501
|
row: string;
|
|
@@ -502,6 +507,7 @@ declare const base$e: {
|
|
|
502
507
|
};
|
|
503
508
|
cell: {
|
|
504
509
|
container: string;
|
|
510
|
+
wrapper: string;
|
|
505
511
|
text: string;
|
|
506
512
|
sortIndicator: {
|
|
507
513
|
container: string;
|
|
@@ -516,12 +522,14 @@ declare const base$e: {
|
|
|
516
522
|
body: {
|
|
517
523
|
container: string;
|
|
518
524
|
row: string;
|
|
525
|
+
striped: string;
|
|
519
526
|
column: {
|
|
520
527
|
pinned: {
|
|
521
528
|
cell: string;
|
|
522
529
|
};
|
|
523
530
|
};
|
|
524
531
|
cell: string;
|
|
532
|
+
sticky: string;
|
|
525
533
|
checkbox: string;
|
|
526
534
|
indicator: string;
|
|
527
535
|
};
|
package/dist/index.esm.js
CHANGED
|
@@ -11,7 +11,7 @@ import { fas } from '@fortawesome/pro-solid-svg-icons';
|
|
|
11
11
|
import { fat } from '@fortawesome/pro-thin-svg-icons';
|
|
12
12
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
13
13
|
import { useFloating, offset, flip, shift, arrow, autoUpdate, useHover, useFocus, useDismiss, useRole, useInteractions, FloatingArrow } from '@floating-ui/react';
|
|
14
|
-
import { Menu, Transition, Dialog, Popover, Switch as Switch$1 } from '@headlessui/react';
|
|
14
|
+
import { Menu, MenuButton, Transition, MenuItems, Dialog, Popover, Switch as Switch$1 } from '@headlessui/react';
|
|
15
15
|
import { useMask } from '@react-input/mask';
|
|
16
16
|
import { ViewColumnsIcon, ChevronDownIcon as ChevronDownIcon$1, TableCellsIcon, XMarkIcon, PlusIcon } from '@heroicons/react/24/outline';
|
|
17
17
|
import { useReactTable, getCoreRowModel, flexRender, createColumnHelper as createColumnHelper$1 } from '@tanstack/react-table';
|
|
@@ -730,18 +730,18 @@ var styles$r = {
|
|
|
730
730
|
};
|
|
731
731
|
|
|
732
732
|
var Container$3 = function (props) {
|
|
733
|
-
var children = props.children, label = props.label, trigger = props.trigger, dataCy = props.dataCy, _a = props.type, type = _a === void 0 ? 'button' : _a, _b = props.direction, direction = _b === void 0 ? 'bottom
|
|
733
|
+
var children = props.children, label = props.label, trigger = props.trigger, dataCy = props.dataCy, _a = props.type, type = _a === void 0 ? 'button' : _a, _b = props.direction, direction = _b === void 0 ? 'bottom end' : _b, _c = props.isEscapingOverflow, isEscapingOverflow = _c === void 0 ? false : _c, stylesOverrides = props.styles;
|
|
734
734
|
var handleGenerateStyle = function () {
|
|
735
735
|
var result = deepCopyObject(styles$q.base);
|
|
736
736
|
var keys = calculateNestedKeys(styles$q.base);
|
|
737
737
|
keys.forEach(function (key) {
|
|
738
|
-
set(result, key, toClassName(get(styles$q.base, key), type && get(styles$q[type], key),
|
|
738
|
+
set(result, key, toClassName(get(styles$q.base, key), type && get(styles$q[type], key), get(stylesOverrides, key)));
|
|
739
739
|
});
|
|
740
740
|
return result;
|
|
741
741
|
};
|
|
742
742
|
var styles = handleGenerateStyle();
|
|
743
743
|
return (jsxs(Menu, { as: "div", className: toClassName(styles.container, !isEscapingOverflow && 'relative'), children: [jsxs("div", { children: [type === 'button' &&
|
|
744
|
-
(!trigger ? (jsxs(
|
|
744
|
+
(!trigger ? (jsxs(MenuButton, { className: styles.button, "data-cy": dataCy, children: [label, jsx(ChevronDownIcon, { className: "-mr-1 ml-2 h-5 w-5", "aria-hidden": "true" })] })) : (jsx(MenuButton, { "data-cy": dataCy, children: trigger }))), type === 'compact' && (jsxs(MenuButton, { className: styles.compact, "data-cy": dataCy, children: [jsx("span", { className: "sr-only", children: label }), jsx(EllipsisVerticalIcon, { className: styles.dots, "aria-hidden": "true" })] }))] }), jsx(Transition, { as: Fragment$1, 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(MenuItems, { anchor: direction, className: styles.items, children: children }) })] }));
|
|
745
745
|
};
|
|
746
746
|
var DropdownElement = {
|
|
747
747
|
Container: Container$3,
|
|
@@ -6001,11 +6001,13 @@ var TableList2 = function (props) {
|
|
|
6001
6001
|
zIndex: isDragging ? 1 : 0,
|
|
6002
6002
|
position: 'relative',
|
|
6003
6003
|
};
|
|
6004
|
-
return (jsx("tr", { ref: setNodeRef, style: style, onClick: function () { return onRowClick && onRowClick(row); }, className: toClassName(styles.body.table.body.row, ((_b = config.options) === null || _b === void 0 ? void 0 : _b.isStriped) &&
|
|
6004
|
+
return (jsx("tr", { ref: setNodeRef, style: style, onClick: function () { return onRowClick && onRowClick(row); }, className: toClassName(styles.body.table.body.row, ((_b = config.options) === null || _b === void 0 ? void 0 : _b.isStriped) &&
|
|
6005
|
+
index % 2 === 0 &&
|
|
6006
|
+
styles.body.table.body.striped), children: map(row.getVisibleCells(), function (cell) {
|
|
6005
6007
|
var _a, _b, _c;
|
|
6006
6008
|
return (jsx("td", { className: toClassName(styles.body.table.body.cell, ((_a = config === null || config === void 0 ? void 0 : config.options) === null || _a === void 0 ? void 0 : _a.hasStickyHeader) &&
|
|
6007
6009
|
index !== ((_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 &&
|
|
6008
|
-
|
|
6010
|
+
styles.body.table.body.sticky), style: { width: cell.column.getSize() }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
|
|
6009
6011
|
}) }, row.id));
|
|
6010
6012
|
};
|
|
6011
6013
|
var sensors = useSensors(useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}));
|
|
@@ -6028,8 +6030,6 @@ var TableList2 = function (props) {
|
|
|
6028
6030
|
var isPinned = column.getIsPinned();
|
|
6029
6031
|
var isLastLeftPinnedColumn = column.id == ((_c = last((_b = (_a = config.options) === null || _a === void 0 ? void 0 : _a.columnPinning) === null || _b === void 0 ? void 0 : _b.left)) === null || _c === void 0 ? void 0 : _c.name);
|
|
6030
6032
|
var isFirstRightPinnedColumn = column.id == ((_f = first((_e = (_d = config.options) === null || _d === void 0 ? void 0 : _d.columnPinning) === null || _e === void 0 ? void 0 : _e.right)) === null || _f === void 0 ? void 0 : _f.name);
|
|
6031
|
-
if (isFirstRightPinnedColumn)
|
|
6032
|
-
console.log(column.id);
|
|
6033
6033
|
var width = (_l = find(concat((_h = (_g = config.options) === null || _g === void 0 ? void 0 : _g.columnPinning) === null || _h === void 0 ? void 0 : _h.left, (_k = (_j = config.options) === null || _j === void 0 ? void 0 : _j.columnPinning) === null || _k === void 0 ? void 0 : _k.right), {
|
|
6034
6034
|
name: column.id,
|
|
6035
6035
|
})) === null || _l === void 0 ? void 0 : _l.size;
|
|
@@ -6038,9 +6038,9 @@ var TableList2 = function (props) {
|
|
|
6038
6038
|
maxWidth: width,
|
|
6039
6039
|
minWidth: width,
|
|
6040
6040
|
boxShadow: isLastLeftPinnedColumn
|
|
6041
|
-
?
|
|
6041
|
+
? styles.body.table.pinnedColumns.left
|
|
6042
6042
|
: isFirstRightPinnedColumn
|
|
6043
|
-
?
|
|
6043
|
+
? styles.body.table.pinnedColumns.right
|
|
6044
6044
|
: undefined,
|
|
6045
6045
|
left: isPinned === 'left'
|
|
6046
6046
|
? "".concat(getPinnedColumnsWidth('left', column.id), "px")
|
|
@@ -6063,11 +6063,11 @@ var TableList2 = function (props) {
|
|
|
6063
6063
|
? ChevronUpIcon
|
|
6064
6064
|
: ChevronDownIcon;
|
|
6065
6065
|
}
|
|
6066
|
-
return (jsx("th", { colSpan: header.colSpan, className: toClassName(styles.body.table.head.cell.container,
|
|
6066
|
+
return (jsx("th", { colSpan: header.colSpan, className: toClassName(styles.body.table.head.cell.container, header.column.getCanSort() && 'cursor-pointer', header.column.getIsPinned() &&
|
|
6067
6067
|
styles.body.table.head.column.pinned.cell), onClick: header.column.getToggleSortingHandler(), style: __assign$1({ minWidth: !!header.column.columnDef.size &&
|
|
6068
6068
|
header.column.columnDef.size !== 150
|
|
6069
6069
|
? "".concat(header.column.columnDef.size, "px")
|
|
6070
|
-
: 'auto' }, getCommonPinningStyles(header.column)), children: jsxs("div", { className:
|
|
6070
|
+
: 'auto' }, getCommonPinningStyles(header.column)), children: jsxs("div", { className: styles.body.table.head.cell.wrapper, style: {
|
|
6071
6071
|
gridTemplateColumns: '1fr auto',
|
|
6072
6072
|
}, children: [header.isPlaceholder ? null : (jsx("div", { className: styles.body.table.head.cell.text, children: flexRender(header.column.columnDef.header, header.getContext()) })), header.column.getCanSort() && (jsx("span", { className: toClassName(styles.body.table.head.cell.sortIndicator
|
|
6073
6073
|
.container, header.column.getIsSorted()
|
|
@@ -6076,22 +6076,22 @@ var TableList2 = function (props) {
|
|
|
6076
6076
|
: styles.body.table.head.cell
|
|
6077
6077
|
.sortIndicator.isNotSorted), children: jsx(SortIconElement, { className: toClassName(styles.body.table.head.cell.sortIndicator
|
|
6078
6078
|
.icon.container), "aria-hidden": "true" }) }))] }) }, header.id));
|
|
6079
|
-
}) }, headerGroup.id)); }) }), !isLoading && (jsx("tbody", { className:
|
|
6079
|
+
}) }, headerGroup.id)); }) }), !isLoading && (jsx("tbody", { className: styles.body.table.body.container, children: isDraggable ? (jsx(SortableContext, { items: map(config.data, function (entity) {
|
|
6080
6080
|
return get(entity, dragConfig === null || dragConfig === void 0 ? void 0 : dragConfig.rowIdentifierKey);
|
|
6081
6081
|
}), strategy: verticalListSortingStrategy, children: map(table === null || table === void 0 ? void 0 : table.getRowModel().rows, function (row, index) { return (jsx(DraggableRow, { row: row, index: index }, get(row.original, dragConfig === null || dragConfig === void 0 ? void 0 : dragConfig.rowIdentifierKey))); }) })) : (map(table === null || table === void 0 ? void 0 : table.getRowModel().rows, function (row, index) {
|
|
6082
6082
|
var _a;
|
|
6083
6083
|
return (jsx("tr", { onClick: function () { return onRowClick && onRowClick(row); }, className: toClassName(styles.body.table.body.row, ((_a = config.options) === null || _a === void 0 ? void 0 : _a.isStriped) &&
|
|
6084
6084
|
index % 2 === 0 &&
|
|
6085
|
-
|
|
6085
|
+
styles.body.table.body.striped), children: map(row.getVisibleCells(), function (cell) {
|
|
6086
6086
|
var _a, _b, _c;
|
|
6087
6087
|
return (jsx("td", { className: toClassName(styles.body.table.body.cell, ((_a = config === null || config === void 0 ? void 0 : config.options) === null || _a === void 0 ? void 0 : _a.hasStickyHeader) &&
|
|
6088
6088
|
index !==
|
|
6089
6089
|
((_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) -
|
|
6090
6090
|
1 &&
|
|
6091
|
-
|
|
6091
|
+
styles.body.table.body.sticky, cell.column.getIsPinned() &&
|
|
6092
6092
|
styles.body.table.body.column.pinned.cell), style: __assign$1({ width: cell.column.getSize() }, getCommonPinningStyles(cell.column)), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
|
|
6093
6093
|
}) }, row.id));
|
|
6094
|
-
})) }))] }), isEmpty(table === null || table === void 0 ? void 0 : table.getRowModel().rows) && !isLoading && (jsx(Fragment, { children: ((_v = config === null || config === void 0 ? void 0 : config.options) === null || _v === void 0 ? void 0 : _v.emptyComponent) ? ((_w = config === null || config === void 0 ? void 0 : config.options) === null || _w === void 0 ? void 0 : _w.emptyComponent) : (jsx("div", { className:
|
|
6094
|
+
})) }))] }), isEmpty(table === null || table === void 0 ? void 0 : table.getRowModel().rows) && !isLoading && (jsx(Fragment, { children: ((_v = config === null || config === void 0 ? void 0 : config.options) === null || _v === void 0 ? void 0 : _v.emptyComponent) ? ((_w = config === null || config === void 0 ? void 0 : config.options) === null || _w === void 0 ? void 0 : _w.emptyComponent) : (jsx("div", { className: styles$g.empty, children: "There is no data to show..." })) })), isLoading && (jsx("div", { className: styles$g.loading.container, children: times(8, function (index) { return (jsxs("div", { className: styles$g.loading.row.container, children: [jsx("div", { className: styles$g.loading.row.first }), jsx("div", { className: styles$g.loading.row.last })] }, index)); }) }))] })] }) }) }), foot && jsx("div", { className: styles.foot, children: foot(state) })] }));
|
|
6095
6095
|
return isDraggable ? (jsx(DndContext, { collisionDetection: closestCenter, modifiers: [restrictToVerticalAxis], onDragEnd: onDragEnd, sensors: sensors, children: Content })) : (Content);
|
|
6096
6096
|
};
|
|
6097
6097
|
|
|
@@ -6107,6 +6107,10 @@ var base$c = {
|
|
|
6107
6107
|
tableWrapperWithLeftSide: '!min-w-max w-full',
|
|
6108
6108
|
table: {
|
|
6109
6109
|
container: 'min-w-full border-separate border-spacing-0',
|
|
6110
|
+
pinnedColumns: {
|
|
6111
|
+
left: '-4px 0 4px -4px gray inset',
|
|
6112
|
+
right: '4px 0 4px -4px gray inset',
|
|
6113
|
+
},
|
|
6110
6114
|
head: {
|
|
6111
6115
|
container: '',
|
|
6112
6116
|
row: '',
|
|
@@ -6117,7 +6121,8 @@ var base$c = {
|
|
|
6117
6121
|
},
|
|
6118
6122
|
},
|
|
6119
6123
|
cell: {
|
|
6120
|
-
container: '
|
|
6124
|
+
container: 'py-3.5 px-3 text-left text-sm font-semibold text-gray-900 group border-b',
|
|
6125
|
+
wrapper: 'grid gap-x-1 items-center',
|
|
6121
6126
|
text: 'whitespace-normal break-words',
|
|
6122
6127
|
sortIndicator: {
|
|
6123
6128
|
container: 'ml-2 inline-flex items-center rounded',
|
|
@@ -6130,14 +6135,16 @@ var base$c = {
|
|
|
6130
6135
|
},
|
|
6131
6136
|
},
|
|
6132
6137
|
body: {
|
|
6133
|
-
container: '
|
|
6138
|
+
container: 'border',
|
|
6134
6139
|
row: '',
|
|
6140
|
+
striped: 'bg-gray-50',
|
|
6135
6141
|
column: {
|
|
6136
6142
|
pinned: {
|
|
6137
6143
|
cell: 'bg-white sticky z-10 overflow-hidden text-ellipsis',
|
|
6138
6144
|
},
|
|
6139
6145
|
},
|
|
6140
6146
|
cell: 'whitespace-nowrap py-2.5 px-3 text-sm text-gray-500',
|
|
6147
|
+
sticky: 'border-b border-gray-200',
|
|
6141
6148
|
checkbox: 'absolute left-4 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 sm:left-6',
|
|
6142
6149
|
indicator: 'absolute inset-y-0 left-0 w-0.5 bg-primary-600',
|
|
6143
6150
|
},
|
|
@@ -6148,6 +6155,15 @@ var base$c = {
|
|
|
6148
6155
|
};
|
|
6149
6156
|
var styles$g = {
|
|
6150
6157
|
base: base$c,
|
|
6158
|
+
loading: {
|
|
6159
|
+
container: 'flex flex-col gap-y-2 w-full pt-5',
|
|
6160
|
+
row: {
|
|
6161
|
+
container: 'flex gap-2',
|
|
6162
|
+
first: 'w-20 h-12 rounded-md bg-gray-100 animate-pulse',
|
|
6163
|
+
last: 'w-full h-12 rounded-md bg-gray-100 animate-pulse',
|
|
6164
|
+
},
|
|
6165
|
+
},
|
|
6166
|
+
empty: 'w-full flex justify-center my-2',
|
|
6151
6167
|
};
|
|
6152
6168
|
|
|
6153
6169
|
var createColumnHelper = function () {
|