@paubox/ui 0.17.0 → 0.19.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.esm.js +124 -27
- package/package.json +1 -1
- package/src/lib/FilterForm/FilterForm.d.ts +9 -6
- package/src/lib/Inputs/{MultiText.d.ts → MultiInput.d.ts} +3 -1
- package/src/lib/Inputs/MultiSelect.d.ts +2 -1
- package/src/lib/Inputs/index.d.ts +1 -1
- package/src/lib/Pagination/Pagination.d.ts +2 -1
- package/src/lib/Table/Table.d.ts +2 -1
- package/src/lib/Tooltip/Tooltip.d.ts +2 -2
package/index.esm.js
CHANGED
|
@@ -22531,6 +22531,9 @@ var FilterRow = function(param) {
|
|
|
22531
22531
|
var _touched_filters_filterKey_rowIndex, _touched_filters_filterKey, _touched_filters, _errors_filters_filterKey_rowIndex, _errors_filters_filterKey, _errors_filters, _touched_filters_filterKey_rowIndex1, _touched_filters_filterKey1, _touched_filters1, _errors_filters_filterKey_rowIndex1, _errors_filters_filterKey1, _errors_filters1, _touched_filters_filterKey_rowIndex2, _touched_filters_filterKey2, _touched_filters2, _errors_filters_filterKey_rowIndex2, _errors_filters_filterKey2, _errors_filters2;
|
|
22532
22532
|
var currentFilter = values.filters[Number(filterKey)][Number(rowIndex)];
|
|
22533
22533
|
var _useState = _sliced_to_array$d(useState(false), 2), isHovered = _useState[0], setIsHovered = _useState[1];
|
|
22534
|
+
var currentField = fieldOptions.find(function(field) {
|
|
22535
|
+
return field.value === currentFilter.field;
|
|
22536
|
+
});
|
|
22534
22537
|
return /*#__PURE__*/ jsxs(RowContainer, {
|
|
22535
22538
|
isHovered: isHovered,
|
|
22536
22539
|
children: [
|
|
@@ -22575,7 +22578,18 @@ var FilterRow = function(param) {
|
|
|
22575
22578
|
]
|
|
22576
22579
|
}),
|
|
22577
22580
|
/*#__PURE__*/ jsx(MultiInputContainer, {
|
|
22578
|
-
children: /*#__PURE__*/ jsx(
|
|
22581
|
+
children: currentFilter.field === 'select' ? /*#__PURE__*/ jsx(Select, {
|
|
22582
|
+
name: "filters.".concat(filterKey, ".").concat(rowIndex, ".terms"),
|
|
22583
|
+
value: currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.terms,
|
|
22584
|
+
style: {
|
|
22585
|
+
width: '100%'
|
|
22586
|
+
},
|
|
22587
|
+
sz: "lg",
|
|
22588
|
+
options: currentField === null || currentField === void 0 ? void 0 : currentField.options,
|
|
22589
|
+
setValue: function(value) {
|
|
22590
|
+
return onChange("filters.".concat(filterKey, ".").concat(rowIndex, ".terms"), value);
|
|
22591
|
+
}
|
|
22592
|
+
}) : /*#__PURE__*/ jsx(MultiInput, {
|
|
22579
22593
|
name: "filters.".concat(filterKey, ".").concat(rowIndex, ".terms"),
|
|
22580
22594
|
values: currentFilter.terms,
|
|
22581
22595
|
setValues: function(terms) {
|
|
@@ -23376,7 +23390,7 @@ function _templateObject$i() {
|
|
|
23376
23390
|
}
|
|
23377
23391
|
function _templateObject1$c() {
|
|
23378
23392
|
var data = _tagged_template_literal$i([
|
|
23379
|
-
"\n display: flex;\n align-items: center;\n width:
|
|
23393
|
+
"\n display: flex;\n align-items: center;\n\n width: 100%;\n position: relative;\n cursor: pointer;\n &:hover {\n background-color: ",
|
|
23380
23394
|
";\n }\n transition: all 150ms ease-in-out;\n\n &:focus-within {\n border-color: ",
|
|
23381
23395
|
";\n }\n\n &:focus {\n background-color: ",
|
|
23382
23396
|
";\n }\n\n border: 1px solid\n ",
|
|
@@ -23517,7 +23531,7 @@ var IconWrapper$2 = styled.div(_templateObject5$1(), function(param) {
|
|
|
23517
23531
|
var PlaceholderOption = styled.option(_templateObject6(), $paragraph100Semibold, textSecondary);
|
|
23518
23532
|
var SelectedOption = styled.option(_templateObject7(), $paragraph200Regular, textPrimary);
|
|
23519
23533
|
var MultiSelect = function(_param) {
|
|
23520
|
-
var _param_sz = _param.sz, sz = _param_sz === void 0 ? 'sm' : _param_sz, _param_error = _param.error, error = _param_error === void 0 ? false : _param_error, _param_options = _param.options, options = _param_options === void 0 ? [] : _param_options; _param.checkbox; var placeholder = _param.placeholder, label = _param.label, _param_chips = _param.chips, chips = _param_chips === void 0 ? false : _param_chips, values = _param.values, setValues = _param.setValues, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_type = _param.type, type = _param_type === void 0 ? 'primary' : _param_type, props = _object_without_properties$f(_param, [
|
|
23534
|
+
var _param_sz = _param.sz, sz = _param_sz === void 0 ? 'sm' : _param_sz, _param_error = _param.error, error = _param_error === void 0 ? false : _param_error, _param_options = _param.options, options = _param_options === void 0 ? [] : _param_options; _param.checkbox; var placeholder = _param.placeholder, label = _param.label, _param_chips = _param.chips, chips = _param_chips === void 0 ? false : _param_chips, className = _param.className, values = _param.values, setValues = _param.setValues, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_type = _param.type, type = _param_type === void 0 ? 'primary' : _param_type, props = _object_without_properties$f(_param, [
|
|
23521
23535
|
"sz",
|
|
23522
23536
|
"error",
|
|
23523
23537
|
"options",
|
|
@@ -23525,6 +23539,7 @@ var MultiSelect = function(_param) {
|
|
|
23525
23539
|
"placeholder",
|
|
23526
23540
|
"label",
|
|
23527
23541
|
"chips",
|
|
23542
|
+
"className",
|
|
23528
23543
|
"values",
|
|
23529
23544
|
"setValues",
|
|
23530
23545
|
"disabled",
|
|
@@ -23546,6 +23561,7 @@ var MultiSelect = function(_param) {
|
|
|
23546
23561
|
type: type,
|
|
23547
23562
|
error: error,
|
|
23548
23563
|
open: open,
|
|
23564
|
+
className: className,
|
|
23549
23565
|
children: [
|
|
23550
23566
|
/*#__PURE__*/ jsxs(InputWrapper$2, {
|
|
23551
23567
|
children: [
|
|
@@ -24045,8 +24061,8 @@ var MultiInput = function(_param) {
|
|
|
24045
24061
|
var handleKeyDown = function(e) {
|
|
24046
24062
|
if (e.key === 'Enter' && inputValue.trim()) {
|
|
24047
24063
|
e.preventDefault();
|
|
24048
|
-
if (!values.includes(inputValue.trim())) {
|
|
24049
|
-
setValues(_to_consumable_array$5(values).concat([
|
|
24064
|
+
if (!(values === null || values === void 0 ? void 0 : values.includes(inputValue.trim()))) {
|
|
24065
|
+
setValues === null || setValues === void 0 ? void 0 : setValues(_to_consumable_array$5(values || []).concat([
|
|
24050
24066
|
inputValue.trim()
|
|
24051
24067
|
]));
|
|
24052
24068
|
}
|
|
@@ -24054,9 +24070,9 @@ var MultiInput = function(_param) {
|
|
|
24054
24070
|
}
|
|
24055
24071
|
};
|
|
24056
24072
|
var removeValue = function(index) {
|
|
24057
|
-
var newValues = _to_consumable_array$5(values);
|
|
24073
|
+
var newValues = _to_consumable_array$5(values || []);
|
|
24058
24074
|
newValues.splice(index, 1);
|
|
24059
|
-
setValues(newValues);
|
|
24075
|
+
setValues === null || setValues === void 0 ? void 0 : setValues(newValues);
|
|
24060
24076
|
};
|
|
24061
24077
|
return /*#__PURE__*/ jsxs(InputWrapper$1, _object_spread_props$k(_object_spread$n({
|
|
24062
24078
|
error: error,
|
|
@@ -24099,7 +24115,7 @@ var MultiInput = function(_param) {
|
|
|
24099
24115
|
maxWidth: popperRef === null || popperRef === void 0 ? void 0 : (_popperRef_current = popperRef.current) === null || _popperRef_current === void 0 ? void 0 : _popperRef_current.offsetWidth,
|
|
24100
24116
|
side: "bottom",
|
|
24101
24117
|
align: "start",
|
|
24102
|
-
open: isFocused && values
|
|
24118
|
+
open: isFocused && !!(values === null || values === void 0 ? void 0 : values.length),
|
|
24103
24119
|
onClose: function() {
|
|
24104
24120
|
return setIsFocused(false);
|
|
24105
24121
|
},
|
|
@@ -28938,7 +28954,7 @@ function _templateObject1$6() {
|
|
|
28938
28954
|
var PaginationContainer = styled.div(_templateObject$8(), spacing(2), spacing(1), spacing(1));
|
|
28939
28955
|
var PageControls = styled.div(_templateObject1$6());
|
|
28940
28956
|
var Pagination = function(param) {
|
|
28941
|
-
var pageInfo = param.pageInfo, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, onPageSizeChange = param.onPageSizeChange, onPageChange = param.onPageChange, _param_testId = param.testId, testId = _param_testId === void 0 ? 'pagination' : _param_testId;
|
|
28957
|
+
var pageInfo = param.pageInfo, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, onPageSizeChange = param.onPageSizeChange, subText = param.subText, onPageChange = param.onPageChange, _param_testId = param.testId, testId = _param_testId === void 0 ? 'pagination' : _param_testId;
|
|
28942
28958
|
return /*#__PURE__*/ jsxs(PaginationContainer, {
|
|
28943
28959
|
children: [
|
|
28944
28960
|
/*#__PURE__*/ jsxs(PageControls, {
|
|
@@ -28973,6 +28989,14 @@ var Pagination = function(param) {
|
|
|
28973
28989
|
children: "100"
|
|
28974
28990
|
})
|
|
28975
28991
|
]
|
|
28992
|
+
}),
|
|
28993
|
+
subText && /*#__PURE__*/ jsx(Typography, {
|
|
28994
|
+
style: {
|
|
28995
|
+
marginLeft: spacing(1)
|
|
28996
|
+
},
|
|
28997
|
+
variant: "label200Semibold",
|
|
28998
|
+
as: "span",
|
|
28999
|
+
children: subText
|
|
28976
29000
|
})
|
|
28977
29001
|
]
|
|
28978
29002
|
}),
|
|
@@ -33994,7 +34018,7 @@ var TableContainer = styled(/*#__PURE__*/ forwardRef(function(props, ref) {
|
|
|
33994
34018
|
}))(_templateObject$2(), neutral300, spacing(1));
|
|
33995
34019
|
var TableWrapper = styled.table(_templateObject1$2());
|
|
33996
34020
|
var Table = function(param) {
|
|
33997
|
-
var columns = param.columns, _param_data = param.data, data = _param_data === void 0 ? [] : _param_data, getRowId = param.getRowId, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, pageInfo = param.pageInfo, onPageSizeChange = param.onPageSizeChange, onPageChange = param.onPageChange, sortBy = param.sortBy, sortOrder = param.sortOrder, onSortChange = param.onSortChange, _param_enableRowSelection = param.enableRowSelection, enableRowSelection = _param_enableRowSelection === void 0 ? false : _param_enableRowSelection, _param_selectedRows = param.selectedRows, selectedRows = _param_selectedRows === void 0 ? {} : _param_selectedRows, onRowSelectionChange = param.onRowSelectionChange, getRowDisabled = param.getRowDisabled, onRowClick = param.onRowClick, contextMenuActions = param.contextMenuActions, _param_dense = param.dense, dense = _param_dense === void 0 ? false : _param_dense, height = param.height, error = param.error, _param_testId = param.testId, testId = _param_testId === void 0 ? 'table' : _param_testId;
|
|
34021
|
+
var columns = param.columns, _param_data = param.data, data = _param_data === void 0 ? [] : _param_data, getRowId = param.getRowId, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, pageInfo = param.pageInfo, subText = param.subText, onPageSizeChange = param.onPageSizeChange, onPageChange = param.onPageChange, sortBy = param.sortBy, sortOrder = param.sortOrder, onSortChange = param.onSortChange, _param_enableRowSelection = param.enableRowSelection, enableRowSelection = _param_enableRowSelection === void 0 ? false : _param_enableRowSelection, _param_selectedRows = param.selectedRows, selectedRows = _param_selectedRows === void 0 ? {} : _param_selectedRows, onRowSelectionChange = param.onRowSelectionChange, getRowDisabled = param.getRowDisabled, onRowClick = param.onRowClick, contextMenuActions = param.contextMenuActions, _param_dense = param.dense, dense = _param_dense === void 0 ? false : _param_dense, height = param.height, error = param.error, _param_testId = param.testId, testId = _param_testId === void 0 ? 'table' : _param_testId;
|
|
33998
34022
|
var containerRef = useRef(null);
|
|
33999
34023
|
var _useState = _sliced_to_array$1(useState({}), 2), columnSizing = _useState[0], setColumnSizing = _useState[1];
|
|
34000
34024
|
var _useState1 = _sliced_to_array$1(useState(null), 2), openMenuId = _useState1[0], setOpenMenuId = _useState1[1];
|
|
@@ -34194,6 +34218,7 @@ var Table = function(param) {
|
|
|
34194
34218
|
}),
|
|
34195
34219
|
onPageSizeChange && onPageChange && pageInfo && /*#__PURE__*/ jsx(Pagination, {
|
|
34196
34220
|
pageInfo: pageInfo,
|
|
34221
|
+
subText: subText,
|
|
34197
34222
|
isLoading: isLoading,
|
|
34198
34223
|
onPageSizeChange: function(size) {
|
|
34199
34224
|
resetContainerScroll();
|
|
@@ -34496,10 +34521,9 @@ function _templateObject() {
|
|
|
34496
34521
|
"\n background-color: ",
|
|
34497
34522
|
";\n border-radius: 0.25rem;\n padding: 0.25rem 0.5rem;\n font-size: ",
|
|
34498
34523
|
";\n color: ",
|
|
34499
|
-
";\n white-space: 'wrap';\n word-wrap: break-word;\n display: ",
|
|
34500
|
-
";\n
|
|
34501
|
-
";\n
|
|
34502
|
-
"\n margin-top: auto;\n margin-bottom: auto;\n"
|
|
34524
|
+
";\n z-index: 50;\n white-space: 'wrap';\n word-wrap: break-word;\n display: ",
|
|
34525
|
+
";\n width: ",
|
|
34526
|
+
";\n position: fixed;\n align-items: center;\n height: min-content;\n"
|
|
34503
34527
|
]);
|
|
34504
34528
|
_templateObject = function _templateObject() {
|
|
34505
34529
|
return data;
|
|
@@ -34518,7 +34542,7 @@ function _templateObject1() {
|
|
|
34518
34542
|
}
|
|
34519
34543
|
function _templateObject2() {
|
|
34520
34544
|
var data = _tagged_template_literal([
|
|
34521
|
-
"\n
|
|
34545
|
+
"\n position: absolute;\n ",
|
|
34522
34546
|
"\n"
|
|
34523
34547
|
]);
|
|
34524
34548
|
_templateObject2 = function _templateObject() {
|
|
@@ -34528,13 +34552,10 @@ function _templateObject2() {
|
|
|
34528
34552
|
}
|
|
34529
34553
|
var TooltipWrapper = styled.div(_templateObject(), neutral900, $paragraph300Regular, textPrimaryWhite, function(param) {
|
|
34530
34554
|
var hover = param.hover;
|
|
34531
|
-
return hover ? '
|
|
34555
|
+
return hover ? 'flex' : 'none';
|
|
34532
34556
|
}, function(param) {
|
|
34533
34557
|
var size = param.size;
|
|
34534
34558
|
return size === 'small' ? 'min-content' : 'max-content';
|
|
34535
|
-
}, function(param) {
|
|
34536
|
-
var _param_x = param.x, x = _param_x === void 0 ? 'bottom' : _param_x, _param_y = param.y, y = _param_y === void 0 ? 'left' : _param_y;
|
|
34537
|
-
return "\n margin-right: ".concat(x === 'left' ? '100%' : 'auto', ";\n margin-left: ").concat(x === 'right' ? '100%' : 'auto', ";\n z-index: 50;\n top: ").concat(y === 'bottom' ? '150%' : y === 'center' ? '0rem' : 'auto', ";\n bottom: ").concat(y === 'top' ? '150%' : y === 'center' ? '0rem' : 'auto', ";\n left: ").concat(y === 'center' ? x === 'right' ? '1rem' : 'auto' : x === 'right' ? '-1.5rem' : x === 'center' ? '0' : 'auto', ";\n right: ").concat(y === 'center' ? x === 'left' ? '1rem' : 'auto' : x === 'left' ? '-1.5rem' : x === 'center' ? '0' : 'auto', ";\n ");
|
|
34538
34559
|
});
|
|
34539
34560
|
var TooltipContainer = styled.div(_templateObject1(), function(param) {
|
|
34540
34561
|
var hover = param.hover;
|
|
@@ -34556,34 +34577,110 @@ var Triangle = function(param) {
|
|
|
34556
34577
|
});
|
|
34557
34578
|
};
|
|
34558
34579
|
var ToolTipTriangle = styled(Triangle)(_templateObject2(), function(param) {
|
|
34559
|
-
var
|
|
34560
|
-
|
|
34580
|
+
var _param_placement = param.placement, placement = _param_placement === void 0 ? 'bottom' : _param_placement;
|
|
34581
|
+
if (placement === 'top') {
|
|
34582
|
+
return "\n bottom: -0.375rem;\n left: 50%;\n transform: translateX(-50%) rotate(180deg);\n display: block;\n ";
|
|
34583
|
+
}
|
|
34584
|
+
if (placement === 'bottom') {
|
|
34585
|
+
return "\n top: -0.375rem;\n left: 50%;\n transform: translateX(-50%) rotate(0deg);\n display: block;\n ";
|
|
34586
|
+
}
|
|
34587
|
+
if (placement === 'left') {
|
|
34588
|
+
return "\n right: -0.375rem;\n top: 50%;\n transform: translateY(-50%) rotate(90deg);\n display: block;\n ";
|
|
34589
|
+
}
|
|
34590
|
+
if (placement === 'right') {
|
|
34591
|
+
return "\n left: -0.375rem;\n top: 50%;\n transform: translateY(-50%) rotate(-90deg);\n display: block;\n ";
|
|
34592
|
+
}
|
|
34593
|
+
return '';
|
|
34561
34594
|
});
|
|
34562
34595
|
var Tooltip = function(_param) {
|
|
34563
|
-
var children = _param.children, content = _param.content, rest = _object_without_properties(_param, [
|
|
34596
|
+
var children = _param.children, content = _param.content, className = _param.className, placement = _param.placement, rest = _object_without_properties(_param, [
|
|
34564
34597
|
"children",
|
|
34565
|
-
"content"
|
|
34598
|
+
"content",
|
|
34599
|
+
"className",
|
|
34600
|
+
"placement"
|
|
34566
34601
|
]);
|
|
34567
|
-
var
|
|
34602
|
+
var tooltipRef = useRef(null);
|
|
34603
|
+
var childRef = useRef(null);
|
|
34604
|
+
var _useState = _sliced_to_array(useState({
|
|
34605
|
+
top: 0,
|
|
34606
|
+
left: 0
|
|
34607
|
+
}), 2), position = _useState[0], setPosition = _useState[1];
|
|
34608
|
+
var _useState1 = _sliced_to_array(useState(false), 2), hover = _useState1[0], setHover = _useState1[1];
|
|
34568
34609
|
var handleMouseEnter = function() {
|
|
34569
34610
|
setHover(true);
|
|
34570
34611
|
};
|
|
34571
34612
|
var handleMouseLeave = function() {
|
|
34572
34613
|
setHover(false);
|
|
34573
34614
|
};
|
|
34615
|
+
useEffect(function() {
|
|
34616
|
+
var updatePosition = function() {
|
|
34617
|
+
if (!childRef.current || !tooltipRef.current) return;
|
|
34618
|
+
var childRect = childRef.current.getBoundingClientRect();
|
|
34619
|
+
var tooltipRect = tooltipRef.current.getBoundingClientRect();
|
|
34620
|
+
var scrollX = window.scrollX || window.pageXOffset;
|
|
34621
|
+
var scrollY = window.scrollY || window.pageYOffset;
|
|
34622
|
+
var top = 0, left = 0;
|
|
34623
|
+
switch(placement || 'bottom'){
|
|
34624
|
+
case 'top':
|
|
34625
|
+
top = childRect.top + scrollY - tooltipRect.height - 5;
|
|
34626
|
+
left = childRect.left + scrollX + (childRect.width - tooltipRect.width) / 2;
|
|
34627
|
+
break;
|
|
34628
|
+
case 'bottom':
|
|
34629
|
+
top = childRect.bottom + scrollY + 5;
|
|
34630
|
+
left = childRect.left + scrollX + (childRect.width - tooltipRect.width) / 2;
|
|
34631
|
+
break;
|
|
34632
|
+
case 'left':
|
|
34633
|
+
top = childRect.top + scrollY + (childRect.height - tooltipRect.height) / 2;
|
|
34634
|
+
left = childRect.left + scrollX - tooltipRect.width - 5;
|
|
34635
|
+
break;
|
|
34636
|
+
case 'right':
|
|
34637
|
+
top = childRect.top + scrollY + (childRect.height - tooltipRect.height) / 2;
|
|
34638
|
+
left = childRect.right + scrollX + 5;
|
|
34639
|
+
break;
|
|
34640
|
+
}
|
|
34641
|
+
setPosition({
|
|
34642
|
+
top: top,
|
|
34643
|
+
left: left
|
|
34644
|
+
});
|
|
34645
|
+
};
|
|
34646
|
+
if (hover) {
|
|
34647
|
+
updatePosition();
|
|
34648
|
+
window.addEventListener('resize', updatePosition);
|
|
34649
|
+
window.addEventListener('scroll', updatePosition);
|
|
34650
|
+
}
|
|
34651
|
+
return function() {
|
|
34652
|
+
window.removeEventListener('resize', updatePosition);
|
|
34653
|
+
window.removeEventListener('scroll', updatePosition);
|
|
34654
|
+
};
|
|
34655
|
+
}, [
|
|
34656
|
+
hover,
|
|
34657
|
+
placement
|
|
34658
|
+
]);
|
|
34574
34659
|
return /*#__PURE__*/ jsxs(TooltipContainer, {
|
|
34575
34660
|
onMouseEnter: handleMouseEnter,
|
|
34576
34661
|
onMouseLeave: handleMouseLeave,
|
|
34577
34662
|
hover: hover,
|
|
34578
34663
|
children: [
|
|
34579
34664
|
/*#__PURE__*/ jsx("div", {
|
|
34665
|
+
ref: childRef,
|
|
34580
34666
|
children: children
|
|
34581
34667
|
}),
|
|
34582
|
-
/*#__PURE__*/ jsxs(TooltipWrapper, _object_spread_props(_object_spread({
|
|
34668
|
+
/*#__PURE__*/ jsxs(TooltipWrapper, _object_spread_props(_object_spread({
|
|
34669
|
+
className: className,
|
|
34670
|
+
ref: tooltipRef,
|
|
34671
|
+
style: {
|
|
34672
|
+
top: position.top,
|
|
34673
|
+
left: position.left
|
|
34674
|
+
}
|
|
34675
|
+
}, rest), {
|
|
34583
34676
|
hover: hover,
|
|
34584
34677
|
children: [
|
|
34585
|
-
|
|
34586
|
-
|
|
34678
|
+
/*#__PURE__*/ jsx("div", {
|
|
34679
|
+
children: content
|
|
34680
|
+
}),
|
|
34681
|
+
/*#__PURE__*/ jsx(ToolTipTriangle, _object_spread({
|
|
34682
|
+
placement: placement
|
|
34683
|
+
}, rest))
|
|
34587
34684
|
]
|
|
34588
34685
|
}))
|
|
34589
34686
|
]
|
package/package.json
CHANGED
|
@@ -1,17 +1,21 @@
|
|
|
1
|
+
import { SelectOption } from '@components';
|
|
1
2
|
export interface FilterValue {
|
|
2
3
|
field: string;
|
|
3
4
|
op: string;
|
|
4
5
|
terms: string[];
|
|
5
6
|
}
|
|
7
|
+
export interface FieldOption {
|
|
8
|
+
label: string;
|
|
9
|
+
value: string;
|
|
10
|
+
type?: 'select' | 'string';
|
|
11
|
+
options?: SelectOption[];
|
|
12
|
+
}
|
|
6
13
|
export interface FilterFormValues {
|
|
7
14
|
filters: Record<string, Record<string, FilterValue>>;
|
|
8
15
|
}
|
|
9
|
-
interface FilterFormProps {
|
|
16
|
+
export interface FilterFormProps {
|
|
10
17
|
values: FilterFormValues;
|
|
11
|
-
fieldOptions:
|
|
12
|
-
label: string;
|
|
13
|
-
value: string;
|
|
14
|
-
}[];
|
|
18
|
+
fieldOptions: FieldOption[];
|
|
15
19
|
operatorOptions: {
|
|
16
20
|
label: string;
|
|
17
21
|
value: string;
|
|
@@ -23,4 +27,3 @@ interface FilterFormProps {
|
|
|
23
27
|
touched?: any;
|
|
24
28
|
}
|
|
25
29
|
export declare const FilterForm: ({ values, fieldOptions, operatorOptions, onSubmit, onClear, onChange, errors, touched, }: FilterFormProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
26
|
-
export {};
|
|
@@ -4,10 +4,12 @@ interface MultiInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
|
4
4
|
type?: 'primary' | 'secondary';
|
|
5
5
|
isFocused?: boolean;
|
|
6
6
|
chips?: boolean;
|
|
7
|
+
values?: any[];
|
|
8
|
+
setValues?: (values: any[]) => void;
|
|
7
9
|
}
|
|
8
10
|
export interface MultiInputValues extends MultiInputProps {
|
|
9
11
|
values: string[];
|
|
10
12
|
setValues: (values: string[]) => void;
|
|
11
13
|
}
|
|
12
|
-
export declare const MultiInput: ({ sz, error, type, values, setValues, placeholder, chips, ...props }:
|
|
14
|
+
export declare const MultiInput: ({ sz, error, type, values, setValues, placeholder, chips, ...props }: MultiInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
13
15
|
export {};
|
|
@@ -10,6 +10,7 @@ export interface MultiSelectProps extends BaseSelectProps {
|
|
|
10
10
|
placeholder?: string;
|
|
11
11
|
label?: string;
|
|
12
12
|
value?: string | string[];
|
|
13
|
+
className?: string;
|
|
13
14
|
chips?: boolean;
|
|
14
15
|
sz?: 'sm' | 'lg';
|
|
15
16
|
}
|
|
@@ -17,4 +18,4 @@ export interface ChipProps {
|
|
|
17
18
|
sz?: 'sm' | 'lg';
|
|
18
19
|
secondary?: boolean;
|
|
19
20
|
}
|
|
20
|
-
export declare const MultiSelect: ({ sz, error, options, checkbox, placeholder, label, chips, values, setValues, disabled, type, ...props }: MultiSelectProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
21
|
+
export declare const MultiSelect: ({ sz, error, options, checkbox, placeholder, label, chips, className, values, setValues, disabled, type, ...props }: MultiSelectProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
@@ -7,9 +7,10 @@ export interface PageInfo {
|
|
|
7
7
|
interface PaginationProps {
|
|
8
8
|
pageInfo: PageInfo;
|
|
9
9
|
isLoading: boolean;
|
|
10
|
+
subText?: string;
|
|
10
11
|
onPageSizeChange: (size: number) => void;
|
|
11
12
|
onPageChange: (page: number) => void;
|
|
12
13
|
testId?: string;
|
|
13
14
|
}
|
|
14
|
-
export declare const Pagination: ({ pageInfo, isLoading, onPageSizeChange, onPageChange, testId, }: PaginationProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
15
|
+
export declare const Pagination: ({ pageInfo, isLoading, onPageSizeChange, subText, onPageChange, testId, }: PaginationProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
15
16
|
export {};
|
package/src/lib/Table/Table.d.ts
CHANGED
|
@@ -45,6 +45,7 @@ interface TableRowProps<T> {
|
|
|
45
45
|
}
|
|
46
46
|
interface PaginationProps {
|
|
47
47
|
pageInfo?: PageInfo;
|
|
48
|
+
subText?: string;
|
|
48
49
|
onPageSizeChange?: (size: number) => void;
|
|
49
50
|
onPageChange?: (page: number) => void;
|
|
50
51
|
}
|
|
@@ -61,5 +62,5 @@ interface TableDataProps<T> {
|
|
|
61
62
|
}
|
|
62
63
|
export interface TableProps<T extends object> extends TableStyleProps, TableRowProps<T>, TableDataProps<T>, PaginationProps {
|
|
63
64
|
}
|
|
64
|
-
export declare const Table: <T extends object>({ columns, data, getRowId, isLoading, pageInfo, onPageSizeChange, onPageChange, sortBy, sortOrder, onSortChange, enableRowSelection, selectedRows, onRowSelectionChange, getRowDisabled, onRowClick, contextMenuActions, dense, height, error, testId, }: TableProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
65
|
+
export declare const Table: <T extends object>({ columns, data, getRowId, isLoading, pageInfo, subText, onPageSizeChange, onPageChange, sortBy, sortOrder, onSortChange, enableRowSelection, selectedRows, onRowSelectionChange, getRowDisabled, onRowClick, contextMenuActions, dense, height, error, testId, }: TableProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
65
66
|
export {};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
2
|
-
|
|
3
|
-
x?: 'left' | 'right' | 'center';
|
|
2
|
+
placement?: 'top' | 'bottom' | 'left' | 'right';
|
|
4
3
|
size?: 'small' | 'large';
|
|
4
|
+
className?: string;
|
|
5
5
|
children: React.ReactNode;
|
|
6
6
|
content: string;
|
|
7
7
|
}
|