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

package/es/lib/utils/generateKiwtQueryParams.js

@@ -17,36 +17,40 @@ const conditionalEncodeURIComponent = function (str) {
 const buildFilterOptionBlock = function (opf) {
   let isNested = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   let encode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-  if (opf?.groupValues) {
+  if (opf !== null && opf !== void 0 && opf.groupValues) {
     const groupValues = opf.groupValues;
 
     // Small utility function to add negation and brackets to the options block where necessary
-    const negationAndNesting = str => `${groupValues?.NOT ? '!' : ''}${isNested || groupValues?.NOT ? '(' : ''}${str}${isNested || groupValues?.NOT ? ')' : ''}`;
+    const negationAndNesting = str => "".concat(groupValues !== null && groupValues !== void 0 && groupValues.NOT ? '!' : '').concat(isNested || groupValues !== null && groupValues !== void 0 && groupValues.NOT ? '(' : '').concat(str).concat(isNested || groupValues !== null && groupValues !== void 0 && groupValues.NOT ? ')' : '');
 
     // First check whether groupValues is ANDed or ORed together
-    if (groupValues?.AND && Array.isArray(groupValues.AND) || groupValues?.OR && Array.isArray(groupValues.OR)) {
+    if (groupValues !== null && groupValues !== void 0 && groupValues.AND && Array.isArray(groupValues.AND) || groupValues !== null && groupValues !== void 0 && groupValues.OR && Array.isArray(groupValues.OR)) {
+      var _groupValues$OR;
       // AND takes precedence
       if (groupValues.AND) {
-        return negationAndNesting(groupValues?.AND?.map(gvo => buildFilterOptionBlock(gvo, true, encode))?.join('&&'));
+        var _groupValues$AND;
+        return negationAndNesting(groupValues === null || groupValues === void 0 || (_groupValues$AND = groupValues.AND) === null || _groupValues$AND === void 0 || (_groupValues$AND = _groupValues$AND.map(gvo => buildFilterOptionBlock(gvo, true, encode))) === null || _groupValues$AND === void 0 ? void 0 : _groupValues$AND.join('&&'));
       }
-      return negationAndNesting(groupValues?.OR?.map(gvo => buildFilterOptionBlock(gvo, true, encode))?.join('||'));
+      return negationAndNesting(groupValues === null || groupValues === void 0 || (_groupValues$OR = groupValues.OR) === null || _groupValues$OR === void 0 || (_groupValues$OR = _groupValues$OR.map(gvo => buildFilterOptionBlock(gvo, true, encode))) === null || _groupValues$OR === void 0 ? void 0 : _groupValues$OR.join('||'));
     }
     // If neither valid OR nor AND exist, ignore the block
-  } else if (opf?.values) {
+  } else if (opf !== null && opf !== void 0 && opf.values) {
     // Build the values filter block
     const innerFilters = [];
     opf.values.forEach(opfv => {
       if (opf.path) {
-        innerFilters.push(`${opf.path}${opf.comparator ?? '=='}${opfv}`);
+        var _opf$comparator;
+        innerFilters.push("".concat(opf.path).concat((_opf$comparator = opf.comparator) !== null && _opf$comparator !== void 0 ? _opf$comparator : '==').concat(opfv));
       } else {
         innerFilters.push(opfv);
       }
     });
     return conditionalEncodeURIComponent(innerFilters.join('||'), encode);
-  } else if (opf?.value) {
+  } else if (opf !== null && opf !== void 0 && opf.value) {
     // If no value OR values, then ignore
     if (opf.path) {
-      const filterString = `${opf.path}${opf.comparator ?? '=='}${opf.value}`;
+      var _opf$comparator2;
+      const filterString = "".concat(opf.path).concat((_opf$comparator2 = opf.comparator) !== null && _opf$comparator2 !== void 0 ? _opf$comparator2 : '==').concat(opf.value);
       return conditionalEncodeURIComponent(filterString, encode);
     }
     return conditionalEncodeURIComponent(opf.value, encode);
@@ -104,8 +108,9 @@ const generateKiwtQueryParams = function (options, nsValues) {
   } = options;
   const paramsArray = [];
   if (query) {
-    paramsArray.push(...((qindex || searchKey)?.split(',') ?? []).map(m => `match=${conditionalEncodeURIComponent(m, encode)}`));
-    paramsArray.push(`term=${conditionalEncodeURIComponent(query, encode)}`);
+    var _split, _ref;
+    paramsArray.push(...((_split = (_ref = qindex || searchKey) === null || _ref === void 0 ? void 0 : _ref.split(',')) !== null && _split !== void 0 ? _split : []).map(m => "match=".concat(conditionalEncodeURIComponent(m, encode))));
+    paramsArray.push("term=".concat(conditionalEncodeURIComponent(query, encode)));
   }
 
   // Actually build the optionsFilters block (Moved logic to its own function to allow recursion)
@@ -113,67 +118,71 @@ const generateKiwtQueryParams = function (options, nsValues) {
     optionsFilters.forEach(opf => {
       const optionsBlock = buildFilterOptionBlock(opf, false, encode);
       if (optionsBlock) {
-        paramsArray.push(`filters=${optionsBlock}`);
+        paramsArray.push("filters=".concat(optionsBlock));
       }
     });
   }
   if (filters) {
     const filterMap = {};
     filters.split(',').forEach(filter => {
-      const [filterName, ...filterRest] = filter.trim()?.split('.') ?? [];
+      var _filter$trim$split, _filter$trim;
+      const [filterName, ...filterRest] = (_filter$trim$split = (_filter$trim = filter.trim()) === null || _filter$trim === void 0 ? void 0 : _filter$trim.split('.')) !== null && _filter$trim$split !== void 0 ? _filter$trim$split : [];
       const filterValue = filterRest.join('.');
       if (filterMap[filterName] === undefined) filterMap[filterName] = [];
       filterMap[filterName].push(filterValue);
     });
 
     // We now have a filterMap of shape { status: ['active', 'cancelled'], type: ['local'] }
-    Object.entries(filterMap).forEach(_ref => {
-      let [filterName, filterValues] = _ref;
+    Object.entries(filterMap).forEach(_ref2 => {
+      let [filterName, filterValues] = _ref2;
       const filterConfigEntry = filterConfig.find(conf => conf.name === filterName);
       const filterKey = filterKeys[filterName];
       if (filterConfigEntry) {
         // We have a direct mapping instruction, use it
         const filterString = filterValues.map(v => {
-          const fceValue = filterConfigEntry?.values?.find(fce => fce.name === v)?.value;
-          return `${filterName}==${fceValue ?? v}`;
+          var _filterConfigEntry$va;
+          const fceValue = filterConfigEntry === null || filterConfigEntry === void 0 || (_filterConfigEntry$va = filterConfigEntry.values) === null || _filterConfigEntry$va === void 0 || (_filterConfigEntry$va = _filterConfigEntry$va.find(fce => fce.name === v)) === null || _filterConfigEntry$va === void 0 ? void 0 : _filterConfigEntry$va.value;
+          return "".concat(filterName, "==").concat(fceValue !== null && fceValue !== void 0 ? fceValue : v);
         }).join('||');
-        paramsArray.push(`filters=${conditionalEncodeURIComponent(filterString, encode)}`);
+        paramsArray.push("filters=".concat(conditionalEncodeURIComponent(filterString, encode)));
       } else if (!filterKey) {
         // These filters have no key mapping so we just pass the values to the backend as-is.
-        paramsArray.push(...(filterValues ?? []).map(f => `filters=${conditionalEncodeURIComponent(f, encode)}`));
+        paramsArray.push(...(filterValues !== null && filterValues !== void 0 ? filterValues : []).map(f => "filters=".concat(conditionalEncodeURIComponent(f, encode))));
       } else {
-        const filterString = filterValues.map(v => `${filterKey}==${v}`).join('||');
-        paramsArray.push(`filters=${conditionalEncodeURIComponent(filterString, encode)}`);
+        const filterString = filterValues.map(v => "".concat(filterKey, "==").concat(v)).join('||');
+        paramsArray.push("filters=".concat(conditionalEncodeURIComponent(filterString, encode)));
       }
     });
   }
   if (optionsSort && optionsSort.length > 0) {
     optionsSort.forEach(os => {
       if (os.value) {
-        paramsArray.push(`sort=${conditionalEncodeURIComponent(os.value, encode)}`);
+        paramsArray.push("sort=".concat(conditionalEncodeURIComponent(os.value, encode)));
       } else if (os.path) {
+        var _os$direction;
         // If no path then ignore
-        const sortString = `${os.path};${os.direction ?? 'asc'}`;
-        paramsArray.push(`sort=${conditionalEncodeURIComponent(sortString, encode)}`);
+        const sortString = "".concat(os.path, ";").concat((_os$direction = os.direction) !== null && _os$direction !== void 0 ? _os$direction : 'asc');
+        paramsArray.push("sort=".concat(conditionalEncodeURIComponent(sortString, encode)));
       }
     });
   }
   if (sort) {
-    paramsArray.push(...(sort.trim()?.split(',') ?? []).map(sortKey => {
+    var _sort$trim$split, _sort$trim;
+    paramsArray.push(...((_sort$trim$split = (_sort$trim = sort.trim()) === null || _sort$trim === void 0 ? void 0 : _sort$trim.split(',')) !== null && _sort$trim$split !== void 0 ? _sort$trim$split : []).map(sortKey => {
       const descending = sortKey.startsWith('-');
       let term = sortKey.replace('-', '');
       if (term in sortKeys) {
         term = term.replace(term, sortKeys[term]);
       }
-      const sortString = `${term};${descending ? 'desc' : 'asc'}`;
-      return `sort=${conditionalEncodeURIComponent(sortString, encode)}`;
+      const sortString = "".concat(term, ";").concat(descending ? 'desc' : 'asc');
+      return "sort=".concat(conditionalEncodeURIComponent(sortString, encode));
     }));
   }
   if (stats) {
     paramsArray.push('stats=true');
   }
   for (const [key, value] of Object.entries(rest)) {
-    paramsArray.push(`${key}=${conditionalEncodeURIComponent(value, encode)}`);
+    paramsArray.push("".concat(key, "=").concat(conditionalEncodeURIComponent(value, encode)));
   }
   return paramsArray;
 };

package/es/lib/utils/groupCustomPropertiesByCtx.js

@@ -7,11 +7,12 @@ exports.default = void 0;
 const groupCustomPropertiesByCtx = function () {
   let customProperties = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   return customProperties.reduce((acc, curr) => {
-    const ctx = curr.ctx ?? 'isNull';
+    var _curr$ctx, _acc$ctx;
+    const ctx = (_curr$ctx = curr.ctx) !== null && _curr$ctx !== void 0 ? _curr$ctx : 'isNull';
     const returnObj = {
       ...acc
     };
-    returnObj[ctx] = [...(acc?.[ctx] ?? []), curr];
+    returnObj[ctx] = [...((_acc$ctx = acc === null || acc === void 0 ? void 0 : acc[ctx]) !== null && _acc$ctx !== void 0 ? _acc$ctx : []), curr];
     return returnObj;
   }, {});
 };

package/es/lib/utils/matchString.js

@@ -8,7 +8,7 @@ var _escapeRegExp = _interopRequireDefault(require("lodash/escapeRegExp"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const matchString = function (match, str) {
   let ignoreNull = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-  const regex = new RegExp(`${match.split(/(\s+)/).filter(h => h.trim()).map(hl => '(' + (0, _escapeRegExp.default)(hl) + ')').join('|')}`, 'gi');
+  const regex = new RegExp("".concat(match.split(/(\s+)/).filter(h => h.trim()).map(hl => '(' + (0, _escapeRegExp.default)(hl) + ')').join('|')), 'gi');
   if (ignoreNull && !match) {
     const nullRegex = /a^/gi; // Should match nothing
 

package/es/lib/utils/parseErrorResponse.js

@@ -5,9 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 const parseErrorResponse = async responseObj => {
+  var _ref;
   let errorResp;
-  const code = responseObj?.status;
-  const contentType = [...responseObj?.headers]?.find(header => header[0] === 'content-type')?.[1];
+  const code = responseObj === null || responseObj === void 0 ? void 0 : responseObj.status;
+  const contentType = (_ref = [...(responseObj === null || responseObj === void 0 ? void 0 : responseObj.headers)]) === null || _ref === void 0 || (_ref = _ref.find(header => header[0] === 'content-type')) === null || _ref === void 0 ? void 0 : _ref[1];
   if (contentType.includes('json')) {
     errorResp = await responseObj.json();
   } else {

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/es/lib/utils/selectorSafe.js

@@ -5,11 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 const selectorSafe = string => {
+  var _string$normalize;
   // Normalise to separate diacritics from their base characters as "marks"
   // then strip out all marks.
-  return string.normalize('NFKD')?.replace(/\p{M}/gu, '')
+  return (_string$normalize = string.normalize('NFKD')) === null || _string$normalize === void 0 || (_string$normalize = _string$normalize.replace(/\p{M}/gu, '')
   // Then swap out any non-letter/number characters (Also ignore - and _) for `_`
-  ?.replace(/[^\p{L}\p{N}\-_]/gu, '_');
+  ) === null || _string$normalize === void 0 ? void 0 : _string$normalize.replace(/[^\p{L}\p{N}\-_]/gu, '_');
 };
 var _default = exports.default = selectorSafe;
 /*

package/es/lib/utils/sortByLabel.js

@@ -5,8 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 const sortByLabel = (a, b) => {
-  const al = a.label?.toLowerCase() ?? a.id?.toLowerCase();
-  const bl = b.label?.toLowerCase() ?? b.id?.toLowerCase();
+  var _a$label$toLowerCase, _a$label, _a$id, _b$label$toLowerCase, _b$label, _b$id;
+  const al = (_a$label$toLowerCase = (_a$label = a.label) === null || _a$label === void 0 ? void 0 : _a$label.toLowerCase()) !== null && _a$label$toLowerCase !== void 0 ? _a$label$toLowerCase : (_a$id = a.id) === null || _a$id === void 0 ? void 0 : _a$id.toLowerCase();
+  const bl = (_b$label$toLowerCase = (_b$label = b.label) === null || _b$label === void 0 ? void 0 : _b$label.toLowerCase()) !== null && _b$label$toLowerCase !== void 0 ? _b$label$toLowerCase : (_b$id = b.id) === null || _b$id === void 0 ? void 0 : _b$id.toLowerCase();
   if (al < bl) {
     return -1;
   }

package/es/lib/validators/validators.js

@@ -64,7 +64,7 @@ const invalidNumber = function (value, _min, _max, intlKey, intlNS) {
       id: "errors.invalidNumber",
       intlKey: intlKey,
       intlNS: intlNS,
-      overrideValue: labelOverrides?.invalidNumberError
+      overrideValue: labelOverrides === null || labelOverrides === void 0 ? void 0 : labelOverrides.invalidNumberError
     });
   }
   return undefined;
@@ -77,7 +77,7 @@ const rangeOverflow = function (value, min, max, intlKey, intlNS) {
       id: "errors.decimalValueNotInRange",
       intlKey: intlKey,
       intlNS: intlNS,
-      overrideValue: labelOverrides?.decimalValueNotInRangeError,
+      overrideValue: labelOverrides === null || labelOverrides === void 0 ? void 0 : labelOverrides.decimalValueNotInRangeError,
       values: {
         min,
         max
@@ -94,7 +94,7 @@ const rangeUnderflow = function (value, min, max, intlKey, intlNS) {
       id: "errors.decimalValueNotInRange",
       intlKey: intlKey,
       intlNS: intlNS,
-      overrideValue: labelOverrides?.decimalValueNotInRangeError,
+      overrideValue: labelOverrides === null || labelOverrides === void 0 ? void 0 : labelOverrides.decimalValueNotInRangeError,
       values: {
         min,
         max

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k-int/stripes-kint-components",
-  "version": "5.2.3",
+  "version": "5.3.1",
   "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;