add proptypes for components

src/settings/CallNumberBrowseSettings/CallNumberBrowseSettings.js

@@ -10,7 +10,6 @@ import {
 import { ControlledVocab } from '@folio/stripes/smart-components';
 import {
   InfoPopover,
-  List,
   LoadingPane,
 } from '@folio/stripes/components';
 import {
@@ -19,9 +18,10 @@ import {
   useUserTenantPermissions,
 } from '@folio/stripes/core';
 
+import { CallNumberTypeList } from './CallNumberTypeList';
+import { CallNumberTypeField } from './CallNumberTypeField';
 import { useCallNumberTypesQuery } from '../../hooks';
 import { CALL_NUMBER_BROWSE_COLUMNS } from './constants';
-import getFieldComponents from './getFieldComponents';
 
 const CallNumberBrowseSettings = () => {
   const stripes = useStripes();
@@ -82,15 +82,6 @@ const CallNumberBrowseSettings = () => {
     [CALL_NUMBER_BROWSE_COLUMNS.TYPE_IDS]: item[CALL_NUMBER_BROWSE_COLUMNS.TYPE_IDS].map(type => type.id),
   }), []);
 
-  const renderCallNumberTypes = (types = []) => (
-    <List
-      items={types}
-      itemFormatter={type => <li>{type?.label}</li>}
-      listStyle="bullets"
-      marginBottom0
-    />
-  );
-
   if (!hasRequiredPermissions) {
     return null;
   }
@@ -115,15 +106,23 @@ const CallNumberBrowseSettings = () => {
         columnMapping={columnMapping}
         hiddenFields={[CALL_NUMBER_BROWSE_COLUMNS.SHELVING_ALGORITHM, 'lastUpdated', 'numberOfObjects']}
         formatter={{
-          [CALL_NUMBER_BROWSE_COLUMNS.TYPE_IDS]: ({ typeIds }) => renderCallNumberTypes(typeIds),
+          [CALL_NUMBER_BROWSE_COLUMNS.TYPE_IDS]: CallNumberTypeList,
         }}
         readOnlyFields={[CALL_NUMBER_BROWSE_COLUMNS.NAME]}
         nameKey="name"
         formType="final-form"
         id="call-number-browse"
         preUpdateHook={formatItemForSaving}
         editable
-        fieldComponents={getFieldComponents(fieldLabels, callNumberTypeOptions)}
+        fieldComponents={{
+          [CALL_NUMBER_BROWSE_COLUMNS.TYPE_IDS]: (callNumberTypeProps) => (
+            <CallNumberTypeField
+              {...callNumberTypeProps}
+              fieldLabels={fieldLabels}
+              callNumberTypeOptions={callNumberTypeOptions}
+            />
+          ),
+        }}
         canCreate={false}
         parseRow={formatRowData}
         actionSuppressor={{

src/settings/CallNumberBrowseSettings/CallNumberTypeField.js

@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types';
+
+import { Field } from 'react-final-form';
+
+import { MultiSelection } from '@folio/stripes/components';
+
+export const CallNumberTypeField = ({
+  fieldProps,
+  name,
+  rowIndex,
+  fieldIndex,
+  fieldLabels,
+  callNumberTypeOptions,
+}) => {
+  return (
+    <Field
+      {...fieldProps}
+      component={MultiSelection}
+      aria-label={`${fieldLabels[name]} ${rowIndex}`}
+      placeholder={fieldLabels[name]}
+      marginBottom0
+      renderToOverlay
+      valueFormatter={({ option }) => option.label}
+      dataOptions={callNumberTypeOptions}
+      autoFocus={fieldIndex === 0}
+    />
+  );
+};
+
+CallNumberTypeField.propTypes = {
+  fieldProps: PropTypes.object.isRequired,
+  name: PropTypes.string.isRequired,
+  rowIndex: PropTypes.number.isRequired,
+  fieldIndex: PropTypes.number.isRequired,
+  fieldLabels: PropTypes.object.isRequired,
+  callNumberTypeOptions: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    label: PropTypes.string.isRequired,
+  })),
+};

src/settings/CallNumberBrowseSettings/CallNumberTypeList.js

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+
+import { List } from '@folio/stripes/components';
+
+export const CallNumberTypeList = ({ typeIds = [] }) => {
+  return (
+    <List
+      items={typeIds}
+      itemFormatter={type => <li>{type?.label}</li>}
+      listStyle="bullets"
+      marginBottom0
+    />
+  );
+};
+
+CallNumberTypeList.propTypes = {
+  typeIds: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string.isRequired,
+  })),
+};