@paubox/ui 1.12.0 → 1.13.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 CHANGED
@@ -22924,7 +22924,7 @@ var SelectContainer = styled.div(_templateObject2$f());
22924
22924
  var MultiInputContainer = styled.div(_templateObject3$c());
22925
22925
  var FilterRow = function(param) {
22926
22926
  var filterKey = param.filterKey, rowIndex = param.rowIndex, values = param.values, errors = param.errors, touched = param.touched, onChange = param.onChange, onRemove = param.onRemove, fieldOptions = param.fieldOptions, operatorOptions = param.operatorOptions, showRemove = param.showRemove;
22927
- 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;
22927
+ 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, _currentFilter_terms, _touched_filters_filterKey_rowIndex2, _touched_filters_filterKey2, _touched_filters2, _errors_filters_filterKey_rowIndex2, _errors_filters_filterKey2, _errors_filters2;
22928
22928
  var currentFilter = values.filters[Number(filterKey)][Number(rowIndex)];
22929
22929
  var _useState = _sliced_to_array$e(useState(false), 2), isHovered = _useState[0], setIsHovered = _useState[1];
22930
22930
  var currentField = fieldOptions.find(function(field) {
@@ -22950,7 +22950,7 @@ var FilterRow = function(param) {
22950
22950
  onChange: function(value) {
22951
22951
  return onChange("filters.".concat(filterKey, ".").concat(rowIndex, ".field"), value);
22952
22952
  },
22953
- error: (touched === null || touched === void 0 ? void 0 : (_touched_filters = touched.filters) === null || _touched_filters === void 0 ? void 0 : (_touched_filters_filterKey = _touched_filters[filterKey]) === null || _touched_filters_filterKey === void 0 ? void 0 : (_touched_filters_filterKey_rowIndex = _touched_filters_filterKey[rowIndex]) === null || _touched_filters_filterKey_rowIndex === void 0 ? void 0 : _touched_filters_filterKey_rowIndex.field) && (errors === null || errors === void 0 ? void 0 : (_errors_filters = errors.filters) === null || _errors_filters === void 0 ? void 0 : (_errors_filters_filterKey = _errors_filters[filterKey]) === null || _errors_filters_filterKey === void 0 ? void 0 : (_errors_filters_filterKey_rowIndex = _errors_filters_filterKey[rowIndex]) === null || _errors_filters_filterKey_rowIndex === void 0 ? void 0 : _errors_filters_filterKey_rowIndex.field),
22953
+ error: !!(touched === null || touched === void 0 ? void 0 : (_touched_filters = touched.filters) === null || _touched_filters === void 0 ? void 0 : (_touched_filters_filterKey = _touched_filters[filterKey]) === null || _touched_filters_filterKey === void 0 ? void 0 : (_touched_filters_filterKey_rowIndex = _touched_filters_filterKey[rowIndex]) === null || _touched_filters_filterKey_rowIndex === void 0 ? void 0 : _touched_filters_filterKey_rowIndex.field) && !!(errors === null || errors === void 0 ? void 0 : (_errors_filters = errors.filters) === null || _errors_filters === void 0 ? void 0 : (_errors_filters_filterKey = _errors_filters[filterKey]) === null || _errors_filters_filterKey === void 0 ? void 0 : (_errors_filters_filterKey_rowIndex = _errors_filters_filterKey[rowIndex]) === null || _errors_filters_filterKey_rowIndex === void 0 ? void 0 : _errors_filters_filterKey_rowIndex.field),
22954
22954
  options: fieldOptions,
22955
22955
  sz: "lg"
22956
22956
  }),
@@ -22964,7 +22964,7 @@ var FilterRow = function(param) {
22964
22964
  onChange: function(value) {
22965
22965
  return onChange("filters.".concat(filterKey, ".").concat(rowIndex, ".op"), value);
22966
22966
  },
22967
- error: (touched === null || touched === void 0 ? void 0 : (_touched_filters1 = touched.filters) === null || _touched_filters1 === void 0 ? void 0 : (_touched_filters_filterKey1 = _touched_filters1[filterKey]) === null || _touched_filters_filterKey1 === void 0 ? void 0 : (_touched_filters_filterKey_rowIndex1 = _touched_filters_filterKey1[rowIndex]) === null || _touched_filters_filterKey_rowIndex1 === void 0 ? void 0 : _touched_filters_filterKey_rowIndex1.op) && (errors === null || errors === void 0 ? void 0 : (_errors_filters1 = errors.filters) === null || _errors_filters1 === void 0 ? void 0 : (_errors_filters_filterKey1 = _errors_filters1[filterKey]) === null || _errors_filters_filterKey1 === void 0 ? void 0 : (_errors_filters_filterKey_rowIndex1 = _errors_filters_filterKey1[rowIndex]) === null || _errors_filters_filterKey_rowIndex1 === void 0 ? void 0 : _errors_filters_filterKey_rowIndex1.op),
22967
+ error: !!(touched === null || touched === void 0 ? void 0 : (_touched_filters1 = touched.filters) === null || _touched_filters1 === void 0 ? void 0 : (_touched_filters_filterKey1 = _touched_filters1[filterKey]) === null || _touched_filters_filterKey1 === void 0 ? void 0 : (_touched_filters_filterKey_rowIndex1 = _touched_filters_filterKey1[rowIndex]) === null || _touched_filters_filterKey_rowIndex1 === void 0 ? void 0 : _touched_filters_filterKey_rowIndex1.op) && !!(errors === null || errors === void 0 ? void 0 : (_errors_filters1 = errors.filters) === null || _errors_filters1 === void 0 ? void 0 : (_errors_filters_filterKey1 = _errors_filters1[filterKey]) === null || _errors_filters_filterKey1 === void 0 ? void 0 : (_errors_filters_filterKey_rowIndex1 = _errors_filters_filterKey1[rowIndex]) === null || _errors_filters_filterKey_rowIndex1 === void 0 ? void 0 : _errors_filters_filterKey_rowIndex1.op),
22968
22968
  options: operatorOptions,
22969
22969
  sz: "lg",
22970
22970
  setValue: function(value) {
@@ -22976,7 +22976,7 @@ var FilterRow = function(param) {
22976
22976
  /*#__PURE__*/ jsx(MultiInputContainer, {
22977
22977
  children: currentFilter.field === 'select' ? /*#__PURE__*/ jsx(Select, {
22978
22978
  name: "filters.".concat(filterKey, ".").concat(rowIndex, ".terms"),
22979
- value: currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.terms,
22979
+ value: currentFilter === null || currentFilter === void 0 ? void 0 : (_currentFilter_terms = currentFilter.terms) === null || _currentFilter_terms === void 0 ? void 0 : _currentFilter_terms[0],
22980
22980
  style: {
22981
22981
  width: '100%'
22982
22982
  },
@@ -22991,7 +22991,7 @@ var FilterRow = function(param) {
22991
22991
  setValues: function(terms) {
22992
22992
  return onChange("filters.".concat(filterKey, ".").concat(rowIndex, ".terms"), terms);
22993
22993
  },
22994
- error: (touched === null || touched === void 0 ? void 0 : (_touched_filters2 = touched.filters) === null || _touched_filters2 === void 0 ? void 0 : (_touched_filters_filterKey2 = _touched_filters2[filterKey]) === null || _touched_filters_filterKey2 === void 0 ? void 0 : (_touched_filters_filterKey_rowIndex2 = _touched_filters_filterKey2[rowIndex]) === null || _touched_filters_filterKey_rowIndex2 === void 0 ? void 0 : _touched_filters_filterKey_rowIndex2.terms) && (errors === null || errors === void 0 ? void 0 : (_errors_filters2 = errors.filters) === null || _errors_filters2 === void 0 ? void 0 : (_errors_filters_filterKey2 = _errors_filters2[filterKey]) === null || _errors_filters_filterKey2 === void 0 ? void 0 : (_errors_filters_filterKey_rowIndex2 = _errors_filters_filterKey2[rowIndex]) === null || _errors_filters_filterKey_rowIndex2 === void 0 ? void 0 : _errors_filters_filterKey_rowIndex2.terms),
22994
+ error: !!(touched === null || touched === void 0 ? void 0 : (_touched_filters2 = touched.filters) === null || _touched_filters2 === void 0 ? void 0 : (_touched_filters_filterKey2 = _touched_filters2[filterKey]) === null || _touched_filters_filterKey2 === void 0 ? void 0 : (_touched_filters_filterKey_rowIndex2 = _touched_filters_filterKey2[rowIndex]) === null || _touched_filters_filterKey_rowIndex2 === void 0 ? void 0 : _touched_filters_filterKey_rowIndex2.terms) && !!(errors === null || errors === void 0 ? void 0 : (_errors_filters2 = errors.filters) === null || _errors_filters2 === void 0 ? void 0 : (_errors_filters_filterKey2 = _errors_filters2[filterKey]) === null || _errors_filters_filterKey2 === void 0 ? void 0 : (_errors_filters_filterKey_rowIndex2 = _errors_filters_filterKey2[rowIndex]) === null || _errors_filters_filterKey_rowIndex2 === void 0 ? void 0 : _errors_filters_filterKey_rowIndex2.terms),
22995
22995
  sz: "lg"
22996
22996
  })
22997
22997
  })
@@ -23240,7 +23240,6 @@ var FilterForm = function(param) {
23240
23240
  children: [
23241
23241
  Object.entries(values.filters).map(function(param, index) {
23242
23242
  var _param = _sliced_to_array$d(param, 2), filterKey = _param[0], filterGroup = _param[1];
23243
- var _errors_filterKey;
23244
23243
  return /*#__PURE__*/ jsxs(FilterGroup, {
23245
23244
  isHovered: isHovered === index,
23246
23245
  children: [
@@ -23284,7 +23283,7 @@ var FilterForm = function(param) {
23284
23283
  children: /*#__PURE__*/ jsx(Button, {
23285
23284
  type: "button",
23286
23285
  color: "secondary",
23287
- disabled: errors === null || errors === void 0 ? void 0 : (_errors_filterKey = errors[filterKey]) === null || _errors_filterKey === void 0 ? void 0 : _errors_filterKey.length,
23286
+ disabled: !!(errors === null || errors === void 0 ? void 0 : errors[filterKey]),
23288
23287
  title: "Add filter condition",
23289
23288
  size: "large",
23290
23289
  style: {
@@ -23301,7 +23300,7 @@ var FilterForm = function(param) {
23301
23300
  }),
23302
23301
  /*#__PURE__*/ jsx(OrButton, {
23303
23302
  type: "button",
23304
- disabled: errors === null || errors === void 0 ? void 0 : errors.length,
23303
+ disabled: !!errors,
23305
23304
  onClick: handleAddFilter,
23306
23305
  title: "Add filter",
23307
23306
  children: "Or"
@@ -23311,7 +23310,7 @@ var FilterForm = function(param) {
23311
23310
  /*#__PURE__*/ jsx(Button, {
23312
23311
  type: "button",
23313
23312
  color: "primary",
23314
- disabled: errors === null || errors === void 0 ? void 0 : errors.length,
23313
+ disabled: !!errors,
23315
23314
  size: "large",
23316
23315
  style: {
23317
23316
  width: '100%'
@@ -23801,11 +23800,9 @@ function _templateObject1$c() {
23801
23800
  }
23802
23801
  function _templateObject2$c() {
23803
23802
  var data = _tagged_template_literal$g([
23804
- "\n flex: 1;\n z-index: 2;\n pointer-events: none;\n border: none;\n background-color: transparent;\n\n -webkit-appearance: none;\n -moz-appearance: none;\n &::-ms-expand {\n display: none;\n }\n &::placeholder {\n color: ",
23805
- ";\n }\n color: ",
23803
+ "\n flex: 1;\n z-index: 2;\n pointer-events: none;\n border: none;\n background-color: transparent;\n\n -webkit-appearance: none;\n -moz-appearance: none;\n &::-ms-expand {\n display: none;\n }\n color: ",
23806
23804
  ";\n padding: ",
23807
- ";\n padding-right: 2rem;\n outline: none;\n &::placeholder {\n color: ",
23808
- ";\n opacity: 0.3;\n }\n\n ",
23805
+ ";\n padding-right: 2rem;\n outline: none;\n\n ",
23809
23806
  "\n"
23810
23807
  ]);
23811
23808
  _templateObject2$c = function _templateObject() {
@@ -23890,13 +23887,13 @@ var MultiSelectWrapper = styled.div(_templateObject1$c(), function(param) {
23890
23887
  return disabled || type === 'secondary' ? neutral100 : 'white';
23891
23888
  });
23892
23889
  // Style for the Select itself
23893
- var BaseSelect$1 = styled.select(_templateObject2$c(), neutral500, function(param) {
23894
- var value = param.value;
23895
- return Array.isArray(value) && value.length > 0 ? textPrimary : neutral500;
23890
+ var BaseSelect$1 = styled.select(_templateObject2$c(), function(param) {
23891
+ var hasValue = param.hasValue;
23892
+ return hasValue ? textPrimary : neutral500;
23896
23893
  }, function(param) {
23897
23894
  var sz = param.sz;
23898
23895
  return sz === 'lg' ? '0.5rem 0.563rem' : '0.375rem 0.563rem';
23899
- }, textPrimaryDisabled, function(param) {
23896
+ }, function(param) {
23900
23897
  var sz = param.sz, type = param.type;
23901
23898
  return type === 'primary' ? sz === 'lg' ? $paragraph100Regular : $paragraph200Regular : sz === 'lg' ? $paragraph100Semibold : $paragraph200Semibold;
23902
23899
  });
@@ -23977,19 +23974,19 @@ var MultiSelect = function(_param) {
23977
23974
  /*#__PURE__*/ jsx(BaseSelect$1, _object_spread_props$j(_object_spread$n({}, props), {
23978
23975
  type: type,
23979
23976
  sz: sz,
23980
- value: values,
23981
- defaultValue: '',
23977
+ value: "",
23978
+ hasValue: values.length > 0,
23982
23979
  disabled: disabled,
23980
+ // eslint-disable-next-line @typescript-eslint/no-empty-function
23981
+ onChange: function() {},
23983
23982
  children: !values.length ? /*#__PURE__*/ jsx(PlaceholderOption, {
23984
23983
  value: "",
23985
23984
  disabled: true,
23986
23985
  hidden: true,
23987
- selected: true,
23988
23986
  children: "".concat(placeholder || 'Please select...')
23989
23987
  }) : !chips && /*#__PURE__*/ jsx(SelectedOption, {
23990
23988
  value: "",
23991
23989
  hidden: true,
23992
- selected: true,
23993
23990
  children: "".concat(label || 'Selected', " (").concat(values.length, ")")
23994
23991
  })
23995
23992
  })),
@@ -24694,7 +24691,8 @@ function _templateObject$d() {
24694
24691
  }
24695
24692
  function _templateObject1$a() {
24696
24693
  var data = _tagged_template_literal$d([
24697
- "\n display: flex;\n align-items: center;\n width: max-content;\n position: relative;\n cursor: ",
24694
+ "\n display: flex;\n align-items: center;\n width: ",
24695
+ ";\n position: relative;\n cursor: ",
24698
24696
  ";\n &:hover {\n background-color: ",
24699
24697
  ";\n }\n transition: all 150ms ease-in-out;\n\n &:focus-within {\n border-color: ",
24700
24698
  ";\n }\n\n &:focus {\n background-color: ",
@@ -24745,6 +24743,9 @@ function _templateObject4$6() {
24745
24743
  // Wrapper for the Input and Icons
24746
24744
  var InputWrapper = styled.div(_templateObject$d());
24747
24745
  var SelectWrapper = styled.div(_templateObject1$a(), function(param) {
24746
+ var fullWidth = param.fullWidth;
24747
+ return fullWidth ? '100%' : 'max-content';
24748
+ }, function(param) {
24748
24749
  var disabled = param.disabled;
24749
24750
  return disabled ? 'not-allowed' : 'pointer';
24750
24751
  }, function(param) {
@@ -24780,7 +24781,7 @@ var IconWrapper$1 = styled.div(_templateObject3$8(), function(param) {
24780
24781
  });
24781
24782
  var SelectOption = styled.option(_templateObject4$6(), $paragraph100Semibold, textPrimary);
24782
24783
  var Select = function(_param) {
24783
- 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 _param_placeholder = _param.placeholder, placeholder = _param_placeholder === void 0 ? 'Please select...' : _param_placeholder, value = _param.value, setValue = _param.setValue; _param.initialValue; var _param_type = _param.type, type = _param_type === void 0 ? 'primary' : _param_type, style = _param.style, _param_maxHeight = _param.maxHeight, maxHeight = _param_maxHeight === void 0 ? '14rem' : _param_maxHeight, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_addClearOption = _param.addClearOption, addClearOption = _param_addClearOption === void 0 ? false : _param_addClearOption, _param_clearOptionLabel = _param.clearOptionLabel, clearOptionLabel = _param_clearOptionLabel === void 0 ? 'Clear' : _param_clearOptionLabel, props = _object_without_properties$c(_param, [
24784
+ 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 _param_placeholder = _param.placeholder, placeholder = _param_placeholder === void 0 ? 'Please select...' : _param_placeholder, value = _param.value, setValue = _param.setValue; _param.initialValue; var _param_type = _param.type, type = _param_type === void 0 ? 'primary' : _param_type, style = _param.style, _param_maxHeight = _param.maxHeight, maxHeight = _param_maxHeight === void 0 ? '14rem' : _param_maxHeight, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_addClearOption = _param.addClearOption, addClearOption = _param_addClearOption === void 0 ? false : _param_addClearOption, _param_clearOptionLabel = _param.clearOptionLabel, clearOptionLabel = _param_clearOptionLabel === void 0 ? 'Clear' : _param_clearOptionLabel, fullWidth = _param.fullWidth, props = _object_without_properties$c(_param, [
24784
24785
  "sz",
24785
24786
  "error",
24786
24787
  "options",
@@ -24794,7 +24795,8 @@ var Select = function(_param) {
24794
24795
  "maxHeight",
24795
24796
  "disabled",
24796
24797
  "addClearOption",
24797
- "clearOptionLabel"
24798
+ "clearOptionLabel",
24799
+ "fullWidth"
24798
24800
  ]);
24799
24801
  var _options_find;
24800
24802
  var _useState = _sliced_to_array$9(useState(false), 2), open = _useState[0], setOpen = _useState[1];
@@ -24815,6 +24817,7 @@ var Select = function(_param) {
24815
24817
  type: type,
24816
24818
  error: error,
24817
24819
  open: open,
24820
+ fullWidth: fullWidth,
24818
24821
  style: style,
24819
24822
  onClick: function() {
24820
24823
  return !disabled && setOpen(function(prev) {
@@ -24828,7 +24831,7 @@ var Select = function(_param) {
24828
24831
  type: type,
24829
24832
  disabled: disabled,
24830
24833
  sz: sz,
24831
- value: value,
24834
+ value: value !== null && value !== void 0 ? value : '',
24832
24835
  // eslint-disable-next-line @typescript-eslint/no-empty-function
24833
24836
  onChange: function() {},
24834
24837
  error: error,
@@ -24836,11 +24839,9 @@ var Select = function(_param) {
24836
24839
  value: "",
24837
24840
  disabled: true,
24838
24841
  hidden: true,
24839
- selected: true,
24840
24842
  children: placeholder
24841
24843
  }) : /*#__PURE__*/ jsx(SelectOption, {
24842
24844
  value: value,
24843
- selected: true,
24844
24845
  hidden: true,
24845
24846
  children: ((_options_find = options.find(function(option) {
24846
24847
  return option.value === value;
@@ -34123,53 +34124,46 @@ var ClampWrapper = styled.div(_templateObject7(), function(props) {
34123
34124
  });
34124
34125
  var TableBody = function(param) {
34125
34126
  var table = param.table, enableRowSelection = param.enableRowSelection, onRowClick = param.onRowClick, getRowDisabled = param.getRowDisabled, dense = param.dense, _param_testId = param.testId, testId = _param_testId === void 0 ? 'table' : _param_testId;
34126
- return /*#__PURE__*/ jsxs(StyledTableBody, {
34127
- children: [
34128
- /*#__PURE__*/ jsx("colgroup", {
34129
- children: table.getAllColumns().map(function(column) {
34130
- return /*#__PURE__*/ jsx("col", {}, column.id);
34127
+ return /*#__PURE__*/ jsx(StyledTableBody, {
34128
+ children: table.getRowModel().rows.map(function(row) {
34129
+ var rowClickEnabled = enableRowSelection || !!onRowClick;
34130
+ var isDisabled = !!(getRowDisabled === null || getRowDisabled === void 0 ? void 0 : getRowDisabled(row.original));
34131
+ return /*#__PURE__*/ jsx(Tr, {
34132
+ role: rowClickEnabled ? 'button' : undefined,
34133
+ disabled: isDisabled,
34134
+ onClick: onRowClick ? function() {
34135
+ return !isDisabled && onRowClick(row.original);
34136
+ } : row.getToggleSelectedHandler(),
34137
+ style: {
34138
+ cursor: rowClickEnabled ? isDisabled ? 'not-allowed' : 'pointer' : undefined,
34139
+ background: row.getIsSelected() ? primary100 : undefined
34140
+ },
34141
+ enableHover: rowClickEnabled,
34142
+ "data-testid": "".concat(testId, "-row-").concat(row.id),
34143
+ children: row.getVisibleCells().map(function(cell) {
34144
+ var cellValue = cell.getValue();
34145
+ var columnDef = cell.column.columnDef;
34146
+ var overflow = columnDef.overflow;
34147
+ var maxLines = columnDef.maxLines;
34148
+ var autoWidth = columnDef.autoWidth;
34149
+ var cellContent = flexRender(cell.column.columnDef.cell, cell.getContext());
34150
+ return /*#__PURE__*/ jsx(Td, {
34151
+ variant: "paragraph200Regular",
34152
+ as: "td",
34153
+ title: typeof cellValue === 'string' ? cellValue : undefined,
34154
+ cellOverflow: overflow,
34155
+ style: {
34156
+ width: autoWidth ? 'auto' : "".concat(cell.column.getSize(), "px"),
34157
+ padding: dense ? "".concat(spacing(1), "px ").concat(spacing(cell.column.id === 'row-select' ? 1 : 1.5), "px") : "".concat(spacing(1.5), "px ").concat(spacing(cell.column.id === 'row-select' ? 1 : 1.5), "px")
34158
+ },
34159
+ children: overflow === 'clamp' && maxLines ? /*#__PURE__*/ jsx(ClampWrapper, {
34160
+ maxLines: maxLines,
34161
+ children: cellContent
34162
+ }) : cellContent
34163
+ }, cell.id);
34131
34164
  })
34132
- }),
34133
- table.getRowModel().rows.map(function(row) {
34134
- var rowClickEnabled = enableRowSelection || !!onRowClick;
34135
- var isDisabled = !!(getRowDisabled === null || getRowDisabled === void 0 ? void 0 : getRowDisabled(row.original));
34136
- return /*#__PURE__*/ jsx(Tr, {
34137
- role: rowClickEnabled ? 'button' : undefined,
34138
- disabled: isDisabled,
34139
- onClick: onRowClick ? function() {
34140
- return !isDisabled && onRowClick(row.original);
34141
- } : row.getToggleSelectedHandler(),
34142
- style: {
34143
- cursor: rowClickEnabled ? isDisabled ? 'not-allowed' : 'pointer' : undefined,
34144
- background: row.getIsSelected() ? primary100 : undefined
34145
- },
34146
- enableHover: rowClickEnabled,
34147
- "data-testid": "".concat(testId, "-row-").concat(row.id),
34148
- children: row.getVisibleCells().map(function(cell) {
34149
- var cellValue = cell.getValue();
34150
- var columnDef = cell.column.columnDef;
34151
- var overflow = columnDef.overflow;
34152
- var maxLines = columnDef.maxLines;
34153
- var autoWidth = columnDef.autoWidth;
34154
- var cellContent = flexRender(cell.column.columnDef.cell, cell.getContext());
34155
- return /*#__PURE__*/ jsx(Td, {
34156
- variant: "paragraph200Regular",
34157
- as: "td",
34158
- title: typeof cellValue === 'string' ? cellValue : undefined,
34159
- cellOverflow: overflow,
34160
- style: {
34161
- width: autoWidth ? 'auto' : "".concat(cell.column.getSize(), "px"),
34162
- padding: dense ? "".concat(spacing(1), "px ").concat(spacing(cell.column.id === 'row-select' ? 1 : 1.5), "px") : "".concat(spacing(1.5), "px ").concat(spacing(cell.column.id === 'row-select' ? 1 : 1.5), "px")
34163
- },
34164
- children: overflow === 'clamp' && maxLines ? /*#__PURE__*/ jsx(ClampWrapper, {
34165
- maxLines: maxLines,
34166
- children: cellContent
34167
- }) : cellContent
34168
- }, cell.id);
34169
- })
34170
- }, row.id);
34171
- })
34172
- ]
34165
+ }, row.id);
34166
+ })
34173
34167
  });
34174
34168
  };
34175
34169
 
@@ -34659,6 +34653,11 @@ var Table = function(param) {
34659
34653
  }),
34660
34654
  /*#__PURE__*/ jsxs(TableWrapper, {
34661
34655
  children: [
34656
+ /*#__PURE__*/ jsx("colgroup", {
34657
+ children: table.getAllColumns().map(function(column) {
34658
+ return /*#__PURE__*/ jsx("col", {}, column.id);
34659
+ })
34660
+ }),
34662
34661
  /*#__PURE__*/ jsx(TableHeader, {
34663
34662
  table: table,
34664
34663
  disableControls: disableControls,
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@paubox/ui",
3
3
  "author": "Paubox, Inc.",
4
4
  "description": "Paubox Component Library",
5
- "version": "1.12.0",
5
+ "version": "1.13.0",
6
6
  "type": "module",
7
7
  "private": false,
8
8
  "publishConfig": {
@@ -13,6 +13,9 @@ export interface FieldOption {
13
13
  export interface FilterFormValues {
14
14
  filters: Record<string, Record<string, FilterValue>>;
15
15
  }
16
+ export interface NestedFormState {
17
+ [key: string]: NestedFormState | undefined;
18
+ }
16
19
  export interface FilterFormProps {
17
20
  values: FilterFormValues;
18
21
  fieldOptions: FieldOption[];
@@ -22,8 +25,8 @@ export interface FilterFormProps {
22
25
  }[];
23
26
  onSubmit: () => void;
24
27
  onClear?: () => void;
25
- onChange: (path: string, value: any) => void;
26
- errors?: any;
27
- touched?: any;
28
+ onChange: (path: string, value: unknown) => void;
29
+ errors?: NestedFormState;
30
+ touched?: NestedFormState;
28
31
  }
29
32
  export declare const FilterForm: ({ values, fieldOptions, operatorOptions, onSubmit, onClear, onChange, errors, touched, }: FilterFormProps) => import("@emotion/react/jsx-runtime").JSX.Element;
@@ -1,11 +1,11 @@
1
- import { FilterFormValues } from './FilterForm';
1
+ import { FilterFormValues, NestedFormState } from './FilterForm';
2
2
  interface FilterRowProps {
3
3
  filterKey: string;
4
4
  rowIndex: string;
5
5
  values: FilterFormValues;
6
- errors?: any;
7
- touched?: any;
8
- onChange: (path: string, value: any) => void;
6
+ errors?: NestedFormState;
7
+ touched?: NestedFormState;
8
+ onChange: (path: string, value: unknown) => void;
9
9
  onRemove: () => void;
10
10
  fieldOptions: {
11
11
  label: string;
@@ -4,8 +4,8 @@ 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
+ values?: string[];
8
+ setValues?: (values: string[]) => void;
9
9
  }
10
10
  export interface MultiInputValues extends MultiInputProps {
11
11
  values: string[];
@@ -3,7 +3,7 @@ export interface MultiSelectOption {
3
3
  value: string;
4
4
  label: string;
5
5
  }
6
- export interface MultiSelectProps extends BaseSelectProps {
6
+ export interface MultiSelectProps extends Omit<BaseSelectProps, 'value'> {
7
7
  values: string[];
8
8
  setValues: (value: string[], option?: MultiSelectOption) => void;
9
9
  options: MultiSelectOption[];
@@ -2,9 +2,11 @@ export interface SelectOption {
2
2
  value: string | null;
3
3
  label: string;
4
4
  }
5
- export interface BaseSelectProps extends React.InputHTMLAttributes<HTMLSelectElement> {
5
+ export interface BaseSelectProps extends Omit<React.InputHTMLAttributes<HTMLSelectElement>, 'value'> {
6
+ value?: string | null | undefined;
6
7
  sz?: 'sm' | 'lg';
7
8
  error?: boolean;
9
+ fullWidth?: boolean;
8
10
  leftIcon?: React.ElementType;
9
11
  rightIcon?: React.ElementType;
10
12
  options?: SelectOption[];
@@ -16,7 +18,7 @@ export interface BaseSelectProps extends React.InputHTMLAttributes<HTMLSelectEle
16
18
  clearOptionLabel?: string;
17
19
  }
18
20
  export interface SelectProps extends BaseSelectProps {
19
- value: any;
20
- setValue: (value: string) => void;
21
+ value: string | null | undefined;
22
+ setValue: (value: string | null) => void;
21
23
  }
22
- export declare const Select: ({ sz, error, options, checkbox, placeholder, value, setValue, initialValue, type, style, maxHeight, disabled, addClearOption, clearOptionLabel, ...props }: SelectProps) => import("@emotion/react/jsx-runtime").JSX.Element;
24
+ export declare const Select: ({ sz, error, options, checkbox, placeholder, value, setValue, initialValue, type, style, maxHeight, disabled, addClearOption, clearOptionLabel, fullWidth, ...props }: SelectProps) => import("@emotion/react/jsx-runtime").JSX.Element;
@@ -46,7 +46,7 @@ interface PaginationProps {
46
46
  pageInfo?: PageInfoPageBased | PageInfoCursorBased;
47
47
  subText?: string;
48
48
  onPageSizeChange?: (size: number) => void;
49
- onPageChange?: (page: any) => void;
49
+ onPageChange?: (page: number | 'next' | 'prev') => void;
50
50
  }
51
51
  interface TableDataProps<T> {
52
52
  columns: TableColumn<T>[];