@k-int/stripes-kint-components 5.25.3 → 5.26.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/es/lib/CustomProperties/Edit/CustomPropertiesListField.js +1 -1
  3. package/es/lib/SASQLookupComponent/TableBody/TableBody.js +6 -4
  4. package/package.json +1 -1
  5. package/src/lib/CustomProperties/Edit/CustomPropertiesListField.js +1 -1
  6. package/src/lib/SASQLookupComponent/README.md +1 -0
  7. package/src/lib/SASQLookupComponent/TableBody/README.md +15 -14
  8. package/src/lib/SASQLookupComponent/TableBody/TableBody.js +8 -3
package/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
1
+ # [5.26.0](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.25.3...v5.26.0) (2025-10-15)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * Agreements/Licenses: Term / Suppl. property values disappear when other terms / optional properties of same category are deleted -- ERM-3813 ([37a70ac](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/37a70ac46b98146ca96f15cc39cf927bb32596a6))
7
+
8
+
9
+ ### Features
10
+
11
+ * Add ability to choose view URL identifier in SASQRoute (and children) via `getNavigationIdentifier` -- refs ERM-3804 ([8356b97](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/8356b97488bba5220ed2cb81017149527e444068))
12
+
1
13
  ## [5.25.3](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.25.2...v5.25.3) (2025-09-16)
2
14
 
3
15
 
package/es/lib/CustomProperties/Edit/CustomPropertiesListField.js CHANGED
@@ -89,7 +89,7 @@ const CustomPropertiesList = _ref => {
89
89
  onChange,
90
90
  setCustomProperties,
91
91
  value
92
- }, "customPropertyField-".concat(customProperty.value, "-").concat(index));
92
+ }, "customPropertyField-".concat(customProperty.value));
93
93
  }).filter(cp => cp !== undefined);
94
94
  };
95
95
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
package/es/lib/SASQLookupComponent/TableBody/TableBody.js CHANGED
@@ -41,6 +41,7 @@ const TableBody = _ref => {
41
41
  resultColumns,
42
42
  rowNavigation = true,
43
43
  // Default navigation onRowClick
44
+ getNavigationIdentifier = row => row === null || row === void 0 ? void 0 : row.id,
44
45
  toggleFilterPane,
45
46
  query
46
47
  } = _ref,
@@ -60,14 +61,14 @@ const TableBody = _ref => {
60
61
  // Build the list of visible columns
61
62
  const visibleColumns = resultColumns.map(e => e.propertyPath);
62
63
  const getRowUrl = (0, _react.useCallback)(rowData => {
63
- const baseUrl = "".concat(path, "/").concat(rowData === null || rowData === void 0 ? void 0 : rowData.id);
64
+ const baseUrl = "".concat(path, "/").concat(getNavigationIdentifier(rowData));
64
65
  return {
65
66
  url: "".concat(baseUrl).concat(location === null || location === void 0 ? void 0 : location.search),
66
67
  path,
67
68
  baseUrl,
68
69
  location
69
70
  };
70
- }, [location, path]);
71
+ }, [getNavigationIdentifier, location, path]);
71
72
  const getEnhancedFormatter = (0, _react.useCallback)(() => {
72
73
  const enhancedFormatter = {};
73
74
  for (const [key, value] of Object.entries(formatter)) {
@@ -90,8 +91,8 @@ const TableBody = _ref => {
90
91
  let {
91
92
  item
92
93
  } = _ref2;
93
- return item.id === (match === null || match === void 0 || (_match$params = match.params) === null || _match$params === void 0 ? void 0 : _match$params.id);
94
- }, [match === null || match === void 0 || (_match$params2 = match.params) === null || _match$params2 === void 0 ? void 0 : _match$params2.id]);
94
+ return getNavigationIdentifier(item) === (match === null || match === void 0 || (_match$params = match.params) === null || _match$params === void 0 ? void 0 : _match$params.id);
95
+ }, [getNavigationIdentifier, match === null || match === void 0 || (_match$params2 = match.params) === null || _match$params2 === void 0 ? void 0 : _match$params2.id]);
95
96
  const NoResultsComponent = (0, _react.useMemo)(() => {
96
97
  var _noResultsProps$compo;
97
98
  return (_noResultsProps$compo = noResultsProps === null || noResultsProps === void 0 ? void 0 : noResultsProps.component) !== null && _noResultsProps$compo !== void 0 ? _noResultsProps$compo : _NoResultsMessage.default;
@@ -148,6 +149,7 @@ TableBody.propTypes = {
148
149
  query: _propTypes.default.object,
149
150
  resultColumns: _propTypes.default.arrayOf(_propTypes.default.object),
150
151
  rowNavigation: _propTypes.default.bool,
152
+ getNavigationIdentifier: _propTypes.default.func,
151
153
  toggleFilterPane: _propTypes.default.func
152
154
  };
153
155
  var _default = exports.default = TableBody;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@k-int/stripes-kint-components",
3
- "version": "5.25.3",
3
+ "version": "5.26.0",
4
4
  "description": "Stripes Component library for K-Int specific applications",
5
5
  "sideEffects": [
6
6
  "*.css"
package/src/lib/CustomProperties/Edit/CustomPropertiesListField.js CHANGED
@@ -72,7 +72,7 @@ const CustomPropertiesList = ({
72
72
 
73
73
  return (
74
74
  <CustomPropertyFormCard
75
- key={`customPropertyField-${customProperty.value}-${index}`}
75
+ key={`customPropertyField-${customProperty.value}`}
76
76
  {...{
77
77
  availableCustomProperties,
78
78
  customProperty,
package/src/lib/SASQLookupComponent/README.md CHANGED
@@ -88,6 +88,7 @@ In this example, **SASQLookupComponent**:
88
88
  | `path` | `string` | (Provided by React Router) The path for the current route. | | ✓ |
89
89
  | `resource` | `object` | (Provided by Stripes) The resource object, typically containing data and metadata for the current resource. | | ✕ |
90
90
  | `resultColumns` | `arrayOf(object)` | An array of objects defining the columns for the MCL component, typically used by `RenderBody` (e.g., `TableBody`). | | ✕ |
91
+ | `...props` | `object` | Additional props will be passed down to the `RenderBody`. Use these to further customize behavior or appearance as needed. | | ✕ |
91
92
 
92
93
  ## Exposed Ref Functionality
93
94
 
package/src/lib/SASQLookupComponent/TableBody/README.md CHANGED
@@ -48,15 +48,15 @@ export default MyTableView;
48
48
 
49
49
  ### Explanation
50
50
 
51
- - **data:**
51
+ - **data:**
52
52
  Contains `results` (array of items) and `totalRecords` (total items for pagination).
53
- - **query:**
53
+ - **query:**
54
54
  Provides current search/sort state. Must include `sort` and `query` if applicable.
55
- - **path:**
55
+ - **path:**
56
56
  Base URL path for constructing row navigation links (e.g., `/my-items/1`).
57
- - **resultColumns:**
57
+ - **resultColumns:**
58
58
  Defines table columns via `propertyPath` (data key) and `label` (header text).
59
- - **fetchNextPage:**
59
+ - **fetchNextPage:**
60
60
  Called when more data is needed (e.g., scrolling to the bottom).
61
61
 
62
62
  ## Props
@@ -80,19 +80,20 @@ export default MyTableView;
80
80
  | `resultColumns` | `Array<{ propertyPath: string, label: string }>` | ✓ | Columns to render. `propertyPath` accesses the data field, `label` sets the header. |
81
81
  | `rowNavigation` | `boolean` | ✕ | Enables navigation to detail views on row click. Default: `true`. |
82
82
  | `toggleFilterPane` | `() => void` | ✕ | Callback to toggle filter pane. Used in `NoResultsMessage`. |
83
+ | `getNavigationIdentifier` | `(row: object) => string \| number` | ✕ | When row navigation is enabled, this function parses the row data to find the unique identitifer for URL routing. Defaults to `(row) => row.id`. |
83
84
 
84
85
  ## Key Features
85
86
 
86
- 1. **Row Navigation:**
87
- When `rowNavigation={true}` (default), clicking a row navigates to `{path}/{rowData.id}`. Uses `react-router` internally.
87
+ 1. **Row Navigation:**
88
+ When `rowNavigation={true}` (default), clicking a row navigates to `{path}/{getNavigationIdentifier(row)}` (Default is `row.id`). Uses `react-router` internally.
88
89
 
89
- 2. **Sorting:**
90
+ 2. **Sorting:**
90
91
  Column headers trigger `onSort`, updating the `query.sort` value. The current sort is derived from `query.sort`.
91
92
 
92
- 3. **Infinite Scroll:**
93
+ 3. **Infinite Scroll:**
93
94
  `fetchNextPage` is called automatically as the user scrolls. Can alternatively use with pagination logic (e.g., `usePrevNextPagination` props passed to mclProps).
94
95
 
95
- 4. **Custom Formatters:**
96
+ 4. **Custom Formatters:**
96
97
  Pass a `formatter` in `mclProps` to customize cell rendering. Each formatter receives the row data and a `defaultRowUrl`:
97
98
  ```jsx
98
99
  mclProps={{
@@ -102,13 +103,13 @@ export default MyTableView;
102
103
  }}
103
104
  ```
104
105
 
105
- 5. **Empty States:**
106
+ 5. **Empty States:**
106
107
  `NoResultsMessage` handles loading, errors, and no-results states.
107
108
 
108
109
  ## Integration Notes
109
110
 
110
- - **Parent Components:**
111
+ - **Parent Components:**
111
112
  Designed to work within **SASQLookupComponent** (as its default `RenderBody`), but can be used standalone.
112
113
 
113
- - **Routing:**
114
- Must be rendered within a `react-router` context for navigation to work.
114
+ - **Routing:**
115
+ Must be rendered within a `react-router` context for navigation to work.
package/src/lib/SASQLookupComponent/TableBody/TableBody.js CHANGED
@@ -28,6 +28,7 @@ const TableBody = ({
28
28
  path,
29
29
  resultColumns,
30
30
  rowNavigation = true, // Default navigation onRowClick
31
+ getNavigationIdentifier = (row) => row?.id,
31
32
  toggleFilterPane,
32
33
  query,
33
34
  }) => {
@@ -48,14 +49,14 @@ const TableBody = ({
48
49
  const visibleColumns = resultColumns.map(e => e.propertyPath);
49
50
 
50
51
  const getRowUrl = useCallback((rowData) => {
51
- const baseUrl = `${path}/${rowData?.id}`;
52
+ const baseUrl = `${path}/${getNavigationIdentifier(rowData)}`;
52
53
  return {
53
54
  url: `${baseUrl}${location?.search}`,
54
55
  path,
55
56
  baseUrl,
56
57
  location
57
58
  };
58
- }, [location, path]);
59
+ }, [getNavigationIdentifier, location, path]);
59
60
 
60
61
  const getEnhancedFormatter = useCallback(() => {
61
62
  const enhancedFormatter = {};
@@ -76,7 +77,10 @@ const TableBody = ({
76
77
  return null;
77
78
  }, [getRowUrl, history, rowNavigation]);
78
79
 
79
- const isSelected = useCallback(({ item }) => item.id === match?.params?.id, [match?.params?.id]);
80
+ const isSelected = useCallback(
81
+ ({ item }) => getNavigationIdentifier(item) === match?.params?.id,
82
+ [getNavigationIdentifier, match?.params?.id]
83
+ );
80
84
  const NoResultsComponent = useMemo(() => noResultsProps?.component ?? NoResultsMessage, [noResultsProps?.component]);
81
85
 
82
86
  return (
@@ -139,6 +143,7 @@ TableBody.propTypes = {
139
143
  query: PropTypes.object,
140
144
  resultColumns: PropTypes.arrayOf(PropTypes.object),
141
145
  rowNavigation: PropTypes.bool,
146
+ getNavigationIdentifier: PropTypes.func,
142
147
  toggleFilterPane: PropTypes.func
143
148
  };
144
149