@k-int/stripes-kint-components 5.2.3 → 5.3.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# [5.3.0](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.2.3...v5.3.0) (2023-12-04)
+
+
+### Features
+
+* ActionList ([fbf2a30](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/fbf2a3060f1429383489a4ffec2aea243720d1ad))
+* RefdataCategoriesSettings component, improvements to EditableRefdataCategoryList ([a19e503](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/a19e503934b8ff4fbb70aeae0cdcc087fc62a6be))
+
 ## [5.2.3](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.2.2...v5.2.3) (2023-11-03)
 
 

package/es/index.js

@@ -38,6 +38,7 @@ var _exportNames = {
   CustomPropertiesFilterFieldArray: true,
   useOperators: true,
   useParseActiveFilterStrings: true,
+  RefdataCategoriesSettings: true,
   customPropertyConstants: true,
   endpoints: true,
   comparators: true,
@@ -212,6 +213,12 @@ Object.defineProperty(exports, "RefdataButtons", {
     return _RefdataButtons.default;
   }
 });
+Object.defineProperty(exports, "RefdataCategoriesSettings", {
+  enumerable: true,
+  get: function () {
+    return _RefdataCategoriesSettings.default;
+  }
+});
 Object.defineProperty(exports, "ResponsiveButtonGroup", {
   enumerable: true,
   get: function () {
@@ -372,6 +379,7 @@ var _NoResultsMessage = _interopRequireDefault(require("./lib/NoResultsMessage")
 var _RefdataButtons = _interopRequireDefault(require("./lib/RefdataButtons"));
 var _FormModal = _interopRequireDefault(require("./lib/FormModal"));
 var _CustomProperties = require("./lib/CustomProperties");
+var _RefdataCategoriesSettings = _interopRequireDefault(require("./lib/RefdataCategoriesSettings"));
 var _customPropertyConstants = _interopRequireWildcard(require("./lib/constants/customProperties"));
 exports.customPropertyConstants = _customPropertyConstants;
 var _endpoints = _interopRequireWildcard(require("./lib/constants/endpoints"));

package/es/lib/ActionList/ActionListFieldArray.js

@@ -68,6 +68,7 @@ ActionTrigger.propTypes = {
     name: _propTypes.default.string
   })
 };
+const NEW_ROW = 'NEW_ROW';
 const ActionListFieldArray = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   let {
     actionAssigner,
@@ -107,19 +108,27 @@ const ActionListFieldArray = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
     null for no field, string id if we are editing an existing field and
     'NEW_ROW' for a new row
   */
-  const [editing, setEditing] = (0, _react.useState)(null);
-  const toggleEditing = id => {
+  const [editing, setEditing] = (0, _react.useState)((fields?.value?.filter(f => f._isNewActionListRow)?.length ?? 0) > 0 ? NEW_ROW : undefined);
+  const toggleEditing = (0, _react.useCallback)(id => {
     if (editing) {
-      setEditing(null);
+      setEditing();
     } else {
       setEditing(id);
     }
-  };
+  }, [editing]);
+
+  // Ensure editing doesn't get stuck in "NEW_ROW" state;
+  (0, _react.useEffect)(() => {
+    if (editing === NEW_ROW && (fields?.value?.filter(f => f._isNewActionListRow)?.length ?? 0) === 0) {
+      setEditing();
+    }
+  }, [editing, fields?.value]);
   const handleSave = index => {
     const {
       actionListActions: _a,
       fieldName: _fn,
       fieldIndex: _fi,
+      _isNewActionListRow: _inalr,
       ...rowData
     } = fields.value[index];
 
@@ -134,22 +143,26 @@ const ActionListFieldArray = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
       actionListActions: _a,
       fieldName: _fn,
       fieldIndex: _fi,
+      _isNewActionListRow: _inalr,
       ...rowData
     } = fields.value[index];
     if (createCallback) {
       createCallback(rowData);
     }
   };
-  const handleClickCreate = () => {
-    toggleEditing('NEW_ROW');
-    fields.unshift(defaultNewObject);
-  };
+  const handleClickCreate = (0, _react.useCallback)(() => {
+    toggleEditing(NEW_ROW);
+    fields.unshift({
+      ...defaultNewObject,
+      _isNewActionListRow: true
+    });
+  }, [defaultNewObject, fields, toggleEditing]);
 
   // Way to go into create mode from external component, and way to tell internal editing state
   (0, _react.useImperativeHandle)(ref, () => ({
     create: handleClickCreate,
     editing
-  }));
+  }), [editing, handleClickCreate]);
   const getColumnWidths = () => {
     const widthNotInUseByActions = editing ? TOTAL_WIDTH - EDITING_ACTIONS_WIDTH : TOTAL_WIDTH - NON_EDITING_ACTIONS_WIDTH;
     const staticWidth = widthNotInUseByActions / visibleFields.length;
@@ -168,7 +181,7 @@ const ActionListFieldArray = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
       actionListActions: actions,
       ...rest
     } = data;
-    if (data.id === editing || !data.id && editing === 'NEW_ROW') {
+    if (data.id === editing || !data.id && editing === NEW_ROW) {
       // Render the save/cancel buttons
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         id: `action-button-parent-${data.rowIndex + 1}`,
@@ -180,12 +193,12 @@ const ActionListFieldArray = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
             triggerFormSubmit(); // This is set up as () => null in ActionList, so essentially only acts here to force validation
 
             if (!hasValidationErrors) {
-              if (!data.id && editing === 'NEW_ROW') {
+              if (!data.id && editing === NEW_ROW) {
                 handleCreate(data.rowIndex);
               } else {
                 handleSave(data.rowIndex);
               }
-              toggleEditing(data.id);
+              toggleEditing();
             }
           },
           type: "submit",
@@ -197,9 +210,9 @@ const ActionListFieldArray = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
           "data-type-button": "cancel",
           marginBottom0: true,
           onClick: () => {
-            if (!data.id && editing === 'NEW_ROW') {
+            if (!data.id && editing === NEW_ROW) {
               fields.remove(data.rowIndex);
-              toggleEditing('NEW_ROW');
+              toggleEditing(NEW_ROW);
             } else {
               change(fieldName, (0, _get.default)(initialValues, fieldName));
               toggleEditing(data.id);

package/es/lib/CustomProperties/Config/CustomPropertiesSettings.js

@@ -121,7 +121,6 @@ const CustomPropertiesSettings = _ref => {
       },
       ...catchQueryCalls // Override defaults here
     },
-
     endpoint: customPropertiesEndpoint,
     id: customProperty?.id
   });

package/es/lib/CustomProperties/Edit/CustomPropertyField.js

@@ -202,7 +202,6 @@ const CustomPropertyField = _ref => {
           component: _components.TextArea,
           parse: v => v // Lets us send an empty string instead of `undefined`
         };
-
         break;
       case CUSTOM_PROPERTY_TYPES.DATE_CLASS_NAME:
         fieldProps = {

package/es/lib/CustomProperties/Filter/CustomPropertiesFilter.js

@@ -54,7 +54,6 @@ const CustomPropertiesFilter = _ref => {
       ]
     }
   });
-
   const parsedFilterData = (0, _useParseActiveFilterStrings.default)(custPropFilters || [], passedIntlKey, passedIntlNS, labelOverrides);
   if (isLoading) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Accordion, {

package/es/lib/CustomProperties/View/CustomPropertiesViewCtx.js

@@ -74,7 +74,6 @@ const CustomPropertiesViewCtx = _ref => {
       ]
     }
   });
-
   if (isLoading) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Accordion, {
       closedByDefault: true,

package/es/lib/EditableRefdataCategoryList/EditableRefdataCategoryList.js

@@ -4,18 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _components = require("@folio/stripes/components");
 var _core = require("@folio/stripes/core");
 var _hooks = require("../hooks");
+var _SearchField = _interopRequireDefault(require("../SearchField"));
 var _ActionList = _interopRequireDefault(require("../ActionList"));
 var _validators = require("../validators");
 var _utils = require("../utils");
+var _CustomProperties = _interopRequireDefault(require("../../../styles/CustomProperties.css"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const propTypes = {
   afterQueryCalls: _propTypes.default.object,
   catchQueryCalls: _propTypes.default.object,
@@ -24,13 +24,17 @@ const propTypes = {
     delete: _propTypes.default.bool,
     view: _propTypes.default.bool
   }),
+  handleRefdataCategoryClick: _propTypes.default.func,
+  hideCreateButton: _propTypes.default.bool,
   intlKey: _propTypes.default.string,
   intlNS: _propTypes.default.string,
+  isSearchDisabled: _propTypes.default.bool,
   label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
   labelOverrides: _propTypes.default.object,
+  onConfirmDelete: _propTypes.default.func,
   refdataEndpoint: _propTypes.default.string
 };
-const EditableRefdataCategoryList = _ref => {
+const EditableRefdataCategoryList = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     afterQueryCalls,
     catchQueryCalls,
@@ -45,11 +49,17 @@ const EditableRefdataCategoryList = _ref => {
       create: true,
       delete: true
     },
+    handleRefdataCategoryClick,
+    hideCreateButton,
+    isSearchDisabled,
     intlKey: passedIntlKey,
     intlNS: passedIntlNS,
     label,
     labelOverrides = {},
     // An object containing translation alternatives
+    // A function which will fire on confirmation of delete,
+    // with id of deleted Refdata category
+    onConfirmDelete = _id => null,
     refdataEndpoint
   } = _ref;
   /* A component that allows for editing of refdata categories */
@@ -68,6 +78,7 @@ const EditableRefdataCategoryList = _ref => {
     endpoint: refdataEndpoint,
     returnQueryObject: true
   });
+  const [searchTerm, setSearchTerm] = (0, _react.useState)('');
   const [contentData, setContentData] = (0, _react.useState)([]);
   const [deleteModal, setDeleteModal] = (0, _react.useState)({
     visible: false,
@@ -76,9 +87,14 @@ const EditableRefdataCategoryList = _ref => {
   const sortByDesc = (a, b) => a.desc.localeCompare(b.desc);
   (0, _react.useEffect)(() => {
     if (!isRefdataLoading) {
-      setContentData(refdata?.sort(sortByDesc) ?? []);
+      if (searchTerm) {
+        const filteredRefdata = refdata?.filter(rd => rd.desc.toLowerCase().includes(searchTerm.toLowerCase()));
+        setContentData(filteredRefdata?.sort(sortByDesc) ?? []);
+      } else {
+        setContentData(refdata?.sort(sortByDesc) ?? []);
+      }
     }
-  }, [isRefdataLoading, refdata]);
+  }, [isRefdataLoading, refdata, searchTerm]);
 
   // Edit and Create will use the same POST mutation
   const {
@@ -115,7 +131,6 @@ const EditableRefdataCategoryList = _ref => {
       },
       ...catchQueryCalls // override defaults here
     },
-
     endpoint: refdataEndpoint,
     id: refdata?.id,
     queryParams: {
@@ -157,7 +172,21 @@ const EditableRefdataCategoryList = _ref => {
     return actionArray;
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionList.default, {
+    children: [!isSearchDisabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: _CustomProperties.default.lookupSearchContainer,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchField.default, {
+        ariaLabel: kintIntl.formatKintMessage({
+          id: 'refdataCategories.config.searchAriaLabel',
+          overrideValue: labelOverrides.searchAriaLabel,
+          fallbackMessage: 'refdata-category-search-field'
+        }),
+        className: _CustomProperties.default.lookupSearch,
+        marginBottom0: true,
+        onChange: e => setSearchTerm(e.target.value),
+        value: searchTerm
+      })
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionList.default, {
+      ref: ref,
       actionAssigner: actionAssigner,
       columnMapping: {
         desc: kintIntl.formatKintMessage({
@@ -175,10 +204,21 @@ const EditableRefdataCategoryList = _ref => {
       },
       createCallback: !createCondition ? null : data => createRefdataCategory(data),
       formatter: {
+        desc: rowData => {
+          if (handleRefdataCategoryClick) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+              buttonStyle: "link",
+              onClick: () => handleRefdataCategoryClick(rowData),
+              children: rowData?.desc
+            });
+          }
+          return rowData?.desc;
+        },
         values: rowData => rowData?.values?.length
       }
       /* Hide actions column when no permissions, or no deletable refdata categories */,
       hideActionsColumn: !createCondition && !deleteCondition || !contentData?.find(cd => cd?.values?.length === 0),
+      hideCreateButton: hideCreateButton,
       label: label,
       validateFields: {
         desc: () => _validators.required
@@ -205,6 +245,7 @@ const EditableRefdataCategoryList = _ref => {
       }),
       onConfirm: () => {
         deleteRefdataCategory(deleteModal?.refdata?.id);
+        onConfirmDelete(deleteModal?.refdata?.id);
         setDeleteModal({
           visible: false,
           refdata: null
@@ -213,6 +254,6 @@ const EditableRefdataCategoryList = _ref => {
       open: deleteModal?.visible
     })]
   });
-};
+});
 EditableRefdataCategoryList.propTypes = propTypes;
 var _default = exports.default = EditableRefdataCategoryList;

package/es/lib/EditableRefdataList/EditableRefdataList.js

@@ -128,7 +128,6 @@ const EditableRefdataList = _ref => {
       },
       ...catchQueryCalls // override defaults here
     },
-
     endpoint: refdataEndpoint,
     id: refdata?.id,
     queryParams: {

package/es/lib/EditableSettingsList/SettingField/EditSettingValue.js

@@ -83,7 +83,6 @@ const EditSettingValue = props => {
       });
   }
 };
-
 EditSettingValue.propTypes = {
   currentSetting: _propTypes.default.shape({
     settingType: _propTypes.default.string,

package/es/lib/EditableSettingsList/SettingField/RenderSettingValue.test.js

@@ -303,7 +303,6 @@ describe('RenderSettingValue', () => {
         expect(getByText('Test template')).toBeInTheDocument(); // TODO this doesn't currently have a [default] marking on it
       });
     });
-
     describe('render a template setting without a value or default', () => {
       let renderComponent;
       beforeEach(async () => {

package/es/lib/RefdataCategoriesSettings/RefdataCategoriesSettings.js

@@ -0,0 +1,154 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _components = require("@folio/stripes/components");
+var _hooks = require("../hooks");
+var _EditableRefdataCategoryList = _interopRequireDefault(require("../EditableRefdataCategoryList"));
+var _EditableRefdataList = _interopRequireDefault(require("../EditableRefdataList"));
+var _FormattedKintMessage = _interopRequireDefault(require("../FormattedKintMessage"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const propTypes = {
+  afterQueryCalls: _propTypes.default.object,
+  catchQueryCalls: _propTypes.default.object,
+  displayConditions: _propTypes.default.shape({
+    create: _propTypes.default.bool,
+    delete: _propTypes.default.bool,
+    view: _propTypes.default.bool
+  }),
+  intlKey: _propTypes.default.string,
+  intlNS: _propTypes.default.string,
+  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+  labelOverrides: _propTypes.default.object,
+  onClose: _propTypes.default.func,
+  refdataEndpoint: _propTypes.default.string
+};
+const RefdataCategoriesSettings = _ref => {
+  let {
+    /*
+     * Set of extra booleans for controlling access to actions
+     * create/delete (View should be handled externally)
+     * This will not overwrite "internal" behaviour, ie setting
+     * delete to 'true' here would still not render a delete button
+     * for a refdata category that has refdata values.
+     */
+    displayConditions = {
+      create: true,
+      delete: true,
+      edit: true
+    },
+    intlKey: passedIntlKey,
+    intlNS: passedIntlNS,
+    labelOverrides = {},
+    // An object containing translation alternatives
+    onClose,
+    refdataEndpoint
+  } = _ref;
+  /* A component that allows for editing of refdata categories */
+  const [refdataCategory, setRefdataCategory] = (0, _react.useState)();
+  const [refState, rdclRef, passedRef] = (0, _hooks.useActionListRef)();
+  const kintIntl = (0, _hooks.useKintIntl)(passedIntlKey, passedIntlNS);
+  const handleRefdataCategoryClick = rc => {
+    setRefdataCategory(rc);
+  };
+  const pickListValuesLabel = kintIntl.formatKintMessage({
+    id: 'settings.pickListValues',
+    overrideValue: labelOverrides?.pickListValues
+  });
+  const renderViewPaneHeader = renderProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PaneHeader, {
+    ...renderProps,
+    dismissible: true,
+    onClose: () => setRefdataCategory(),
+    paneTitle: kintIntl.formatKintMessage({
+      id: 'refdataCategories.config.viewPaneTitle',
+      overrideValue: labelOverrides?.viewPaneTitle,
+      fallbackMessage: refdataCategory?.desc
+    }, {
+      name: refdataCategory?.desc
+    })
+  });
+  const renderLookupPaneHeader = renderProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PaneHeader, {
+    ...renderProps,
+    dismissible: true,
+    lastMenu: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PaneMenu, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+        disabled: !!refState?.editing,
+        marginBottom0: true,
+        onClick: () => rdclRef?.current?.create(),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormattedKintMessage.default, {
+          id: "new"
+        })
+      })
+    }),
+    onClose: onClose,
+    paneTitle: kintIntl.formatKintMessage({
+      id: 'settings.pickLists',
+      overrideValue: labelOverrides?.pickLists
+    })
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Pane, {
+      defaultWidth: "fill",
+      id: "edit-refdata-desc",
+      renderHeader: renderLookupPaneHeader,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditableRefdataCategoryList.default, {
+        ref: passedRef,
+        afterQueryCalls: {
+          post: json => {
+            setRefdataCategory(json);
+          }
+        },
+        displayConditions: displayConditions,
+        handleRefdataCategoryClick: handleRefdataCategoryClick,
+        hideCreateButton: true,
+        onConfirmDelete: id => {
+          if (refdataCategory?.id === id) {
+            setRefdataCategory();
+          }
+        },
+        refdataEndpoint: refdataEndpoint
+      })
+    }), refdataCategory?.desc && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Pane, {
+      defaultWidth: "fill",
+      id: "settings-refdataCategories-viewPane",
+      renderHeader: renderViewPaneHeader,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Row, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Col, {
+          xs: 8,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.KeyValue, {
+            label: kintIntl.formatKintMessage({
+              id: 'refdataCategory.refdataCategory',
+              overrideValue: labelOverrides?.refdataCategory
+            }),
+            value: refdataCategory.desc
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Col, {
+          xs: 4,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.KeyValue, {
+            label: kintIntl.formatKintMessage({
+              id: 'refdataCategory.noOfValues',
+              overrideValue: labelOverrides?.noOfValues
+            }),
+            value: refdataCategory?.values?.length
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditableRefdataList.default, {
+        afterQueryCalls: {
+          put: json => setRefdataCategory(json),
+          delete: json => setRefdataCategory(json)
+        },
+        desc: refdataCategory?.desc,
+        displayConditions: displayConditions,
+        label: pickListValuesLabel,
+        refdataEndpoint: refdataEndpoint
+      })]
+    })]
+  });
+};
+RefdataCategoriesSettings.propTypes = propTypes;
+var _default = exports.default = RefdataCategoriesSettings;

package/es/lib/RefdataCategoriesSettings/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _RefdataCategoriesSettings.default;
+  }
+});
+var _RefdataCategoriesSettings = _interopRequireDefault(require("./RefdataCategoriesSettings"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/es/lib/SettingsFormContainer/SettingsFormContainer.js

@@ -79,7 +79,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
     // At some point we might want to add a catch callout.
     // The current ConfigManager doesn't have one, so leaving for now
   };
-
   const getInitialValues = () => {
     let initialValues = parsedSettings;
     if (passedGetInitialValues) {

package/es/lib/Typedown/Typedown.js

@@ -174,7 +174,6 @@ const Typedown = _ref => {
           e.stopPropagation();
         } // prevent propagation of click events
       },
-
       overlayRef: overlayRef,
       portal: portal,
       children: dropDown()

package/es/lib/hooks/__mocks__/index.js

@@ -4,10 +4,14 @@ var _refdata = _interopRequireDefault(require("../../../../test/jest/refdata"));
 var _customProperties = _interopRequireDefault(require("../../../../test/jest/customProperties"));
 var _useKintIntl = _interopRequireDefault(require("../useKintIntl"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* EXAMPLE Grab actual hooks for anything not mocked here */
+const hooks = jest.requireActual('../index');
+
 // We have to do this up here too so that our passed useKintIntl
 // ALSO has a mocked useIntlKeyStore... I think anyway
 jest.mock('../useIntlKeyStore', () => () => () => 'ui-test-implementor');
 module.exports = {
+  ...hooks,
   useRefdata: () => _refdata.default,
   useTemplates: () => [],
   // We should set up some templates to test this properly

package/es/lib/hooks/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "useActionListRef", {
+  enumerable: true,
+  get: function () {
+    return _useActionListRef.default;
+  }
+});
 Object.defineProperty(exports, "useActiveElement", {
   enumerable: true,
   get: function () {
@@ -136,4 +142,5 @@ var _useIntlKey = _interopRequireDefault(require("./useIntlKey"));
 var _useSASQQueryMeta = _interopRequireDefault(require("./useSASQQueryMeta"));
 var _useModConfigEntries = _interopRequireDefault(require("./useModConfigEntries"));
 var _useMutateModConfigEntry = _interopRequireDefault(require("./useMutateModConfigEntry"));
+var _useActionListRef = _interopRequireDefault(require("./useActionListRef"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/es/lib/hooks/useActionListRef.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+// Using the passed actionListRef in a stateful way
+// is somewhat complicated, so here's a hook to simplify that work
+const useActionListRef = () => {
+  const actionListRef = (0, _react.useRef)();
+  const [editing, setEditing] = (0, _react.useState)();
+  const passedRef = (0, _react.useCallback)(node => {
+    // All functions must be present on here
+    actionListRef.current = node;
+    if (node?.editing) {
+      setEditing(node.editing);
+    } else {
+      setEditing();
+    }
+  }, []);
+
+  // We don't need this for actionListRef, but it serves as an example for building a stateful ref object (sans functions)
+  const refState = (0, _react.useMemo)(() => ({
+    editing
+  }), [editing]);
+  return [refState,
+  // This is a state containing up to date "editing" state from within ActionList
+  actionListRef,
+  // This is the ref which will contain the create function
+  passedRef // This is the ref to pass to ActionList
+  ];
+};
+var _default = exports.default = useActionListRef;

package/es/lib/utils/filterParsers/parseKiwtQueryString.js

@@ -11,7 +11,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * attribute == value, or attribute isEmpty, or attribute ~= value, etc
  *
  * Will return an object: {path: 'attribute', comparator: '==', value: 'value'}
- */ // No magic numbers sonarlint -.-
+ */
+// No magic numbers sonarlint -.-
 const FIRST = 0;
 const SECOND = 1;
 const THIRD = 2;

package/es/lib/utils/parseModConfigEntry.js

@@ -14,7 +14,6 @@ const parseModConfigEntry = setting => {
       console.error(error); // eslint-disable-line no-console
     }
   }
-
   return parsedSettings;
 };
 var _default = exports.default = parseModConfigEntry;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k-int/stripes-kint-components",
-  "version": "5.2.3",
+  "version": "5.3.0",
   "description": "Stripes Component library for K-Int specific applications",
   "sideEffects": [
     "*.css"

package/src/index.js

@@ -92,6 +92,9 @@ export {
   useParseActiveFilterStrings
 } from './lib/CustomProperties';
 
+// Refdata categories
+export { default as RefdataCategoriesSettings } from './lib/RefdataCategoriesSettings';
+
 export * as customPropertyConstants from './lib/constants/customProperties';
 
 export * as endpoints from './lib/constants/endpoints';

package/src/lib/ActionList/ActionListFieldArray.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useImperativeHandle, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import get from 'lodash/get';
@@ -70,6 +70,8 @@ ActionTrigger.propTypes = {
   })
 };
 
+const NEW_ROW = 'NEW_ROW';
+
 const ActionListFieldArray = forwardRef(({
   actionAssigner,
   columnMapping,
@@ -100,21 +102,29 @@ const ActionListFieldArray = forwardRef(({
     null for no field, string id if we are editing an existing field and
     'NEW_ROW' for a new row
   */
-  const [editing, setEditing] = useState(null);
+  const [editing, setEditing] = useState((fields?.value?.filter(f => f._isNewActionListRow)?.length ?? 0) > 0 ? NEW_ROW : undefined);
 
-  const toggleEditing = (id) => {
+  const toggleEditing = useCallback((id) => {
     if (editing) {
-      setEditing(null);
+      setEditing();
     } else {
       setEditing(id);
     }
-  };
+  }, [editing]);
+
+  // Ensure editing doesn't get stuck in "NEW_ROW" state;
+  useEffect(() => {
+    if (editing === NEW_ROW && (fields?.value?.filter(f => f._isNewActionListRow)?.length ?? 0) === 0) {
+      setEditing();
+    }
+  }, [editing, fields?.value]);
 
   const handleSave = (index) => {
     const {
       actionListActions: _a,
       fieldName: _fn,
       fieldIndex: _fi,
+      _isNewActionListRow: _inalr,
       ...rowData
     } = fields.value[index];
 
@@ -130,6 +140,7 @@ const ActionListFieldArray = forwardRef(({
       actionListActions: _a,
       fieldName: _fn,
       fieldIndex: _fi,
+      _isNewActionListRow: _inalr,
       ...rowData
     } = fields.value[index];
 
@@ -138,16 +149,19 @@ const ActionListFieldArray = forwardRef(({
     }
   };
 
-  const handleClickCreate = () => {
-    toggleEditing('NEW_ROW');
-    fields.unshift(defaultNewObject);
-  };
+  const handleClickCreate = useCallback(() => {
+    toggleEditing(NEW_ROW);
+    fields.unshift({
+      ...defaultNewObject,
+      _isNewActionListRow: true
+    });
+  }, [defaultNewObject, fields, toggleEditing]);
 
   // Way to go into create mode from external component, and way to tell internal editing state
   useImperativeHandle(ref, () => ({
     create: handleClickCreate,
     editing
-  }));
+  }), [editing, handleClickCreate]);
 
  const getColumnWidths = () => {
     const widthNotInUseByActions = editing ?
@@ -173,7 +187,7 @@ const ActionListFieldArray = forwardRef(({
     const fieldName = `contentData[${data.rowIndex}]`;
     const { actionListActions: actions, ...rest } = data;
 
-    if (data.id === editing || (!data.id && editing === 'NEW_ROW')) {
+    if (data.id === editing || (!data.id && editing === NEW_ROW)) {
       // Render the save/cancel buttons
       return (
         <div id={`action-button-parent-${data.rowIndex + 1}`}>
@@ -186,12 +200,12 @@ const ActionListFieldArray = forwardRef(({
               triggerFormSubmit(); // This is set up as () => null in ActionList, so essentially only acts here to force validation
 
               if (!hasValidationErrors) {
-                if (!data.id && editing === 'NEW_ROW') {
+                if (!data.id && editing === NEW_ROW) {
                   handleCreate(data.rowIndex);
                 } else {
                   handleSave(data.rowIndex);
                 }
-                toggleEditing(data.id);
+                toggleEditing();
               }
             }}
             type="submit"
@@ -206,9 +220,9 @@ const ActionListFieldArray = forwardRef(({
             data-type-button="cancel"
             marginBottom0
             onClick={() => {
-              if (!data.id && editing === 'NEW_ROW') {
+              if (!data.id && editing === NEW_ROW) {
                 fields.remove(data.rowIndex);
-                toggleEditing('NEW_ROW');
+                toggleEditing(NEW_ROW);
               } else {
                 change(fieldName, get(initialValues, fieldName));
                 toggleEditing(data.id);

package/src/lib/EditableRefdataCategoryList/EditableRefdataCategoryList.js

@@ -1,14 +1,16 @@
-import React, { useEffect, useState, useContext } from 'react';
+import { useEffect, useState, useContext, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-import { ConfirmationModal } from '@folio/stripes/components';
+import { Button, ConfirmationModal } from '@folio/stripes/components';
 import { CalloutContext } from '@folio/stripes/core';
 
 import { useKintIntl, useMutateRefdataCategory, useRefdata } from '../hooks';
 
+import SearchField from '../SearchField';
 import ActionList from '../ActionList';
 import { required } from '../validators';
 import { parseErrorResponse } from '../utils';
+import css from '../../../styles/CustomProperties.css';
 
 const propTypes = {
   afterQueryCalls: PropTypes.object,
@@ -18,17 +20,21 @@ const propTypes = {
     delete: PropTypes.bool,
     view: PropTypes.bool,
   }),
+  handleRefdataCategoryClick: PropTypes.func,
+  hideCreateButton: PropTypes.bool,
   intlKey: PropTypes.string,
   intlNS: PropTypes.string,
+  isSearchDisabled: PropTypes.bool,
   label: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.node
   ]),
   labelOverrides: PropTypes.object,
-  refdataEndpoint: PropTypes.string
+  onConfirmDelete: PropTypes.func,
+  refdataEndpoint: PropTypes.string,
 };
 
-const EditableRefdataCategoryList = ({
+const EditableRefdataCategoryList = forwardRef(({
   afterQueryCalls,
   catchQueryCalls,
   /*
@@ -42,12 +48,18 @@ const EditableRefdataCategoryList = ({
     create: true,
     delete: true,
   },
+  handleRefdataCategoryClick,
+  hideCreateButton,
+  isSearchDisabled,
   intlKey: passedIntlKey,
   intlNS: passedIntlNS,
   label,
   labelOverrides = {}, // An object containing translation alternatives
-  refdataEndpoint
-}) => {
+  // A function which will fire on confirmation of delete,
+  // with id of deleted Refdata category
+  onConfirmDelete = (_id) => null,
+  refdataEndpoint,
+}, ref) => {
   /* A component that allows for editing of refdata categories */
   const callout = useContext(CalloutContext);
   const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
@@ -63,6 +75,7 @@ const EditableRefdataCategoryList = ({
     returnQueryObject: true
   });
 
+  const [searchTerm, setSearchTerm] = useState('');
   const [contentData, setContentData] = useState([]);
   const [deleteModal, setDeleteModal] = useState({
     visible: false,
@@ -73,9 +86,14 @@ const EditableRefdataCategoryList = ({
 
   useEffect(() => {
     if (!isRefdataLoading) {
-      setContentData(refdata?.sort(sortByDesc) ?? []);
+      if (searchTerm) {
+        const filteredRefdata = refdata?.filter(rd => rd.desc.toLowerCase().includes(searchTerm.toLowerCase()));
+        setContentData(filteredRefdata?.sort(sortByDesc) ?? []);
+      } else {
+        setContentData(refdata?.sort(sortByDesc) ?? []);
+      }
     }
-  }, [isRefdataLoading, refdata]);
+  }, [isRefdataLoading, refdata, searchTerm]);
 
   // Edit and Create will use the same POST mutation
   const { delete: deleteRefdataCategory, post: createRefdataCategory } = useMutateRefdataCategory({
@@ -101,10 +119,10 @@ const EditableRefdataCategoryList = ({
             id: 'refdataCategory.deleteRefdataCategory.errorMessage',
             overrideValue: labelOverrides?.deleteError
           },
-          {
-            label: deleteModal?.refdata?.label,
-            error: errorResp?.message
-          }),
+            {
+              label: deleteModal?.refdata?.label,
+              error: errorResp?.message
+            }),
           type: 'error',
         });
       },
@@ -153,7 +171,28 @@ const EditableRefdataCategoryList = ({
 
   return (
     <>
+      {!isSearchDisabled ?
+        <div
+          className={css.lookupSearchContainer}
+        >
+          <SearchField
+            ariaLabel={
+              kintIntl.formatKintMessage({
+                id: 'refdataCategories.config.searchAriaLabel',
+                overrideValue: labelOverrides.searchAriaLabel,
+                fallbackMessage: 'refdata-category-search-field'
+              })
+            }
+            className={css.lookupSearch}
+            marginBottom0
+            onChange={e => setSearchTerm(e.target.value)}
+            value={searchTerm}
+          />
+        </div>
+        : null
+      }
       <ActionList
+        ref={ref}
         actionAssigner={actionAssigner}
         columnMapping={{
           desc: kintIntl.formatKintMessage({
@@ -174,6 +213,19 @@ const EditableRefdataCategoryList = ({
           (data) => createRefdataCategory(data)
         }
         formatter={{
+          desc: (rowData) => {
+            if (handleRefdataCategoryClick) {
+              return (
+                <Button
+                  buttonStyle="link"
+                  onClick={() => handleRefdataCategoryClick(rowData)}
+                >
+                  {rowData?.desc}
+                </Button>
+              );
+            }
+            return rowData?.desc;
+          },
           values: (rowData) => rowData?.values?.length
         }}
         /* Hide actions column when no permissions, or no deletable refdata categories */
@@ -181,6 +233,7 @@ const EditableRefdataCategoryList = ({
           (!createCondition && !deleteCondition) ||
           !contentData?.find(cd => cd?.values?.length === 0)
         }
+        hideCreateButton={hideCreateButton}
         label={label}
         validateFields={{
           desc: () => required
@@ -209,13 +262,14 @@ const EditableRefdataCategoryList = ({
         onCancel={() => setDeleteModal({ visible: false, refdata: null })}
         onConfirm={() => {
           deleteRefdataCategory(deleteModal?.refdata?.id);
+          onConfirmDelete(deleteModal?.refdata?.id);
           setDeleteModal({ visible: false, refdata: null });
         }}
         open={deleteModal?.visible}
       />
     </>
   );
-};
+});
 
 EditableRefdataCategoryList.propTypes = propTypes;
 

package/src/lib/RefdataCategoriesSettings/RefdataCategoriesSettings.js

@@ -0,0 +1,176 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { Button, Col, KeyValue, Pane, PaneHeader, PaneMenu, Row } from '@folio/stripes/components';
+
+import { useActionListRef, useKintIntl } from '../hooks';
+
+import EditableRefdataCategoryList from '../EditableRefdataCategoryList';
+import EditableRefdataList from '../EditableRefdataList';
+import FormattedKintMessage from '../FormattedKintMessage';
+
+
+const propTypes = {
+  afterQueryCalls: PropTypes.object,
+  catchQueryCalls: PropTypes.object,
+  displayConditions: PropTypes.shape({
+    create: PropTypes.bool,
+    delete: PropTypes.bool,
+    view: PropTypes.bool,
+  }),
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.node
+  ]),
+  labelOverrides: PropTypes.object,
+  onClose: PropTypes.func,
+  refdataEndpoint: PropTypes.string
+};
+
+const RefdataCategoriesSettings = ({
+  /*
+   * Set of extra booleans for controlling access to actions
+   * create/delete (View should be handled externally)
+   * This will not overwrite "internal" behaviour, ie setting
+   * delete to 'true' here would still not render a delete button
+   * for a refdata category that has refdata values.
+   */
+  displayConditions = {
+    create: true,
+    delete: true,
+    edit: true
+  },
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
+  labelOverrides = {}, // An object containing translation alternatives
+  onClose,
+  refdataEndpoint
+}) => {
+  /* A component that allows for editing of refdata categories */
+  const [refdataCategory, setRefdataCategory] = useState();
+  const [refState, rdclRef, passedRef] = useActionListRef();
+
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
+
+  const handleRefdataCategoryClick = (rc) => {
+    setRefdataCategory(rc);
+  };
+
+  const pickListValuesLabel = kintIntl.formatKintMessage({
+    id: 'settings.pickListValues',
+    overrideValue: labelOverrides?.pickListValues
+  });
+
+  const renderViewPaneHeader = renderProps => (
+    <PaneHeader
+      {...renderProps}
+      dismissible
+      onClose={() => setRefdataCategory()}
+      paneTitle={
+        kintIntl.formatKintMessage(
+          {
+            id: 'refdataCategories.config.viewPaneTitle',
+            overrideValue: labelOverrides?.viewPaneTitle,
+            fallbackMessage: refdataCategory?.desc,
+          },
+          {
+            name: refdataCategory?.desc,
+          }
+        )
+      }
+    />
+  );
+
+  const renderLookupPaneHeader = renderProps => (
+    <PaneHeader
+      {...renderProps}
+      dismissible
+      lastMenu={
+        <PaneMenu>
+          <Button
+            disabled={!!refState?.editing}
+            marginBottom0
+            onClick={() => rdclRef?.current?.create()}
+          >
+            <FormattedKintMessage id="new" />
+          </Button>
+        </PaneMenu>
+      }
+      onClose={onClose}
+      paneTitle={kintIntl.formatKintMessage({
+        id: 'settings.pickLists',
+        overrideValue: labelOverrides?.pickLists
+      })}
+    />
+  );
+
+  return (
+    <>
+      <Pane
+        defaultWidth="fill"
+        id="edit-refdata-desc"
+        renderHeader={renderLookupPaneHeader}
+      >
+        <EditableRefdataCategoryList
+          ref={passedRef}
+          afterQueryCalls={{
+            post: (json) => { setRefdataCategory(json); }
+          }}
+          displayConditions={displayConditions}
+          handleRefdataCategoryClick={handleRefdataCategoryClick}
+          hideCreateButton
+          onConfirmDelete={(id) => {
+            if (refdataCategory?.id === id) {
+              setRefdataCategory();
+            }
+          }}
+          refdataEndpoint={refdataEndpoint}
+        />
+      </Pane>
+      {refdataCategory?.desc &&
+        <Pane
+          defaultWidth="fill"
+          id="settings-refdataCategories-viewPane"
+          renderHeader={renderViewPaneHeader}
+        >
+          <Row>
+            <Col xs={8}>
+              <KeyValue
+                label={kintIntl.formatKintMessage({
+                  id: 'refdataCategory.refdataCategory',
+                  overrideValue: labelOverrides?.refdataCategory
+                })}
+                value={refdataCategory.desc}
+              />
+            </Col>
+            <Col xs={4}>
+              <KeyValue
+                label={kintIntl.formatKintMessage({
+                  id: 'refdataCategory.noOfValues',
+                  overrideValue: labelOverrides?.noOfValues
+                })}
+                value={refdataCategory?.values?.length}
+              />
+            </Col>
+          </Row>
+          <EditableRefdataList
+            afterQueryCalls={{
+              put: json => setRefdataCategory(json),
+              delete: (json) => setRefdataCategory(json)
+            }}
+            desc={refdataCategory?.desc}
+            displayConditions={displayConditions}
+            label={pickListValuesLabel}
+            refdataEndpoint={refdataEndpoint}
+          />
+        </Pane>
+      }
+    </>
+  );
+};
+
+RefdataCategoriesSettings.propTypes = propTypes;
+
+export default RefdataCategoriesSettings;

package/src/lib/RefdataCategoriesSettings/index.js

@@ -0,0 +1 @@
+export { default } from './RefdataCategoriesSettings';

package/src/lib/hooks/__mocks__/index.js

@@ -3,11 +3,15 @@ import customProperties from '../../../../test/jest/customProperties';
 
 import useKintIntl from '../useKintIntl';
 
+/* EXAMPLE Grab actual hooks for anything not mocked here */
+const hooks = jest.requireActual('../index');
+
 // We have to do this up here too so that our passed useKintIntl
 // ALSO has a mocked useIntlKeyStore... I think anyway
 jest.mock('../useIntlKeyStore', () => () => () => 'ui-test-implementor');
 
 module.exports = {
+  ...hooks,
   useRefdata: () => refdata,
   useTemplates: () => [], // We should set up some templates to test this properly
   useCustomProperties: () => ({ data: customProperties, isLoading: false }),

package/src/lib/hooks/index.js

@@ -17,3 +17,4 @@ export { default as useIntlKey } from './useIntlKey';
 export { default as useSASQQueryMeta } from './useSASQQueryMeta';
 export { default as useModConfigEntries } from './useModConfigEntries';
 export { default as useMutateModConfigEntry } from './useMutateModConfigEntry';
+export { default as useActionListRef } from './useActionListRef';

package/src/lib/hooks/useActionListRef.js

@@ -0,0 +1,36 @@
+import {
+  useCallback,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
+
+// Using the passed actionListRef in a stateful way
+// is somewhat complicated, so here's a hook to simplify that work
+const useActionListRef = () => {
+  const actionListRef = useRef();
+  const [editing, setEditing] = useState();
+
+  const passedRef = useCallback(node => {
+    // All functions must be present on here
+    actionListRef.current = node;
+    if (node?.editing) {
+      setEditing(node.editing);
+    } else {
+      setEditing();
+    }
+  }, []);
+
+// We don't need this for actionListRef, but it serves as an example for building a stateful ref object (sans functions)
+  const refState = useMemo(() => ({
+    editing
+  }), [editing]);
+
+  return [
+    refState, // This is a state containing up to date "editing" state from within ActionList
+    actionListRef, // This is the ref which will contain the create function
+    passedRef // This is the ref to pass to ActionList
+  ];
+};
+
+export default useActionListRef;