npm - @k-int/stripes-kint-components - Versions diffs - 1.7.0 → 2.1.0 - Mend

@k-int/stripes-kint-components 1.7.0 → 2.1.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 (143) hide show

package/src/artifacts/coverage-jest/lcov-report/{TypeDown/TypeDown.js.html → CustomProperties/Config/CustomPropertiesSettings.js.html} RENAMED Viewed

@@ -3,15 +3,15 @@
 <html lang="en">
 <head>
-    <title>Code coverage report for TypeDown/TypeDown.js</title>
+    <title>Code coverage report for CustomProperties/Config/CustomPropertiesSettings.js</title>
     <meta charset="utf-8" />
-    <link rel="stylesheet" href="../prettify.css" />
-    <link rel="stylesheet" href="../base.css" />
-    <link rel="shortcut icon" type="image/x-icon" href="../favicon.png" />
+    <link rel="stylesheet" href="../../prettify.css" />
+    <link rel="stylesheet" href="../../base.css" />
+    <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <style type='text/css'>
         .coverage-summary .sorter {
-            background-image: url(../sort-arrow-sprite.png);
+            background-image: url(../../sort-arrow-sprite.png);
         }
     </style>
 </head>
@@ -19,34 +19,34 @@
 <body>
 <div class='wrapper'>
     <div class='pad1'>
-        <h1><a href="../index.html">All files</a> / <a href="index.html">TypeDown</a> TypeDown.js</h1>
+        <h1><a href="../../index.html">All files</a> / <a href="index.html">CustomProperties/Config</a> CustomPropertiesSettings.js</h1>
         <div class='clearfix'>
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>0/27</span>
+                <span class='fraction'>0/47</span>
             </div>
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/16</span>
+                <span class='fraction'>0/25</span>
             </div>
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>0/11</span>
+                <span class='fraction'>0/18</span>
             </div>
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>0/27</span>
+                <span class='fraction'>0/47</span>
             </div>
@@ -291,7 +291,19 @@
 <a name='L226'></a><a href='#L226'>226</a>
 <a name='L227'></a><a href='#L227'>227</a>
 <a name='L228'></a><a href='#L228'>228</a>
-<a name='L229'></a><a href='#L229'>229</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L229'></a><a href='#L229'>229</a>
+<a name='L230'></a><a href='#L230'>230</a>
+<a name='L231'></a><a href='#L231'>231</a>
+<a name='L232'></a><a href='#L232'>232</a>
+<a name='L233'></a><a href='#L233'>233</a>
+<a name='L234'></a><a href='#L234'>234</a>
+<a name='L235'></a><a href='#L235'>235</a>
+<a name='L236'></a><a href='#L236'>236</a>
+<a name='L237'></a><a href='#L237'>237</a>
+<a name='L238'></a><a href='#L238'>238</a>
+<a name='L239'></a><a href='#L239'>239</a>
+<a name='L240'></a><a href='#L240'>240</a>
+<a name='L241'></a><a href='#L241'>241</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -312,8 +324,11 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -322,26 +337,26 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -349,11 +364,14 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -363,33 +381,36 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -397,8 +418,6 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -412,14 +431,17 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -427,6 +449,8 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -436,8 +460,6 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -449,15 +471,12 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -466,6 +485,7 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -495,19 +515,23 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -519,234 +543,246 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useCallback, useEffect, useState } from 'react';
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import { useState } from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
 &nbsp;
-import get from 'lodash/get';
+import compose from 'compose-function';
+&nbsp;
+import { FormattedMessage, useIntl } from 'react-intl';
+&nbsp;
+import { useQueryClient } from 'react-query';
 &nbsp;
-import { EndOfList, IconButton, Popper } from '@folio/stripes/components';
+import SafeHTMLMessage from '@folio/react-intl-safe-html';
 &nbsp;
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { interactionStyles } from '@folio/stripes-components/lib/sharedStyles/interactionStyles.css';
+import { Button, ConfirmationModal, Pane } from '@folio/stripes/components';
 &nbsp;
-import SearchField from '../SearchField';
-import css from '../../../styles/TypeDown.css';
+import FormModal from '../../FormModal/FormModal';
 &nbsp;
-import { useTypedown, useTypedownData } from '../hooks/typedownHooks';
-import selectorSafe from '../utils/selectorSafe';
+import CustomPropertiesLookup from './CustomPropertiesLookup';
+import CustomPropertiesView from './CustomPropertiesView';
+import CustomPropertiesForm from './CustomPropertyForm';
+import { useMutateCustomProperties, useRefdata } from '../../hooks';
 &nbsp;
-/* @deprecated
- * Replaced by Typedown and QueryTypedown.
- */
-const TypeDown = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >({</span></span>
-  input,
-  meta,
-  onChange,
-  path,
-  pathMutator,
-  renderFooter = <span class="branch-0 cbranch-no" title="branch not covered" >null,</span>
-  renderListItem = <span class="branch-0 cbranch-no" title="branch not covered" >null,</span>
-  uniqueIdentificationPath = <span class="branch-0 cbranch-no" title="branch not covered" >'id'</span>
+const EDITING = <span class="cstat-no" title="statement not covered" >'edit';</span>
+const CREATING = <span class="cstat-no" title="statement not covered" >'create';</span>
+const VIEWING = <span class="cstat-no" title="statement not covered" >'view';</span>
+&nbsp;
+// A default option for setting up panes manually
+const CustomPropertiesSettings = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >({</span></span>
+  afterQueryCalls,
+  contextFilterOptions,
+  customPropertiesEndpoint,
+  helpPopovers,
+  labelOverrides,
+  refdataEndpoint,
 }) =&gt; {
-<span class="cstat-no" title="statement not covered" >  useEffect(<span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >    if (process.env.NODE_ENV === 'development') {</span>
-      // eslint-disable-next-line no-console
-<span class="cstat-no" title="statement not covered" >      console.warn('TypeDown component is deprecated, you likely want either Typedown or QueryTypedown');</span>
-    }
-  }, []);
+  const queryClient = <span class="cstat-no" title="statement not covered" >useQueryClient();</span>
 &nbsp;
-  const selectedUniqueId = <span class="cstat-no" title="statement not covered" >get(input.value, uniqueIdentificationPath);</span>
+  const intl = <span class="cstat-no" title="statement not covered" >useIntl();</span>
+  const [customProperty, setCustomProperty] = <span class="cstat-no" title="statement not covered" >useState();</span>
+  const [deleteModal, setDeleteModal] = <span class="cstat-no" title="statement not covered" >useState(false);</span>
 &nbsp;
-  const [callPath, setCallPath] = <span class="cstat-no" title="statement not covered" >useState(pathMutator(null, path));</span>
-  const data = <span class="cstat-no" title="statement not covered" >useTypedownData(callPath);</span>
+  const refdata = <span class="cstat-no" title="statement not covered" >useRefdata({</span>
+    endpoint: refdataEndpoint,
+  });
 &nbsp;
-  // Hook to set up all the essentials
-  const {
-    refs: {
-      listRef,
-      triggerRef,
-      overlayRef,
-      footerRef
-    },
-    handlers: {
-      handleNextFocus,
-      listKeyDownHandler,
-      searchFieldKeyDownHandler
-    },
-    variables: {
-      open,
-      portal,
-      resizeRef,
-      searchWidth
-    }
-  } = <span class="cstat-no" title="statement not covered" >useTypedown(input.name);</span>
+  const [mode, setMode] = <span class="cstat-no" title="statement not covered" >useState(VIEWING);</span>
 &nbsp;
-  const renderItem = <span class="cstat-no" title="statement not covered" >useCallback(<span class="fstat-no" title="function not covered" >(o</span>ption) =&gt; (</span>
-<span class="cstat-no" title="statement not covered" >    &lt;div</span>
-      className={css.listItem}
-    &gt;
-      {renderListItem ?
-        renderListItem(option) :
-        get(option, uniqueIdentificationPath)
+  // Default props that need hooks are hard
+  let renderContextFilterOptions = <span class="cstat-no" title="statement not covered" >contextFilterOptions;</span>
+<span class="cstat-no" title="statement not covered" >  if (!contextFilterOptions) {</span>
+    /*
+      Default is {value: '', label: 'All'}, empty string will map to ALL contexts
+      If null context is needed, use
+      {value: 'isNull', label: ...}
+    */
+<span class="cstat-no" title="statement not covered" >    renderContextFilterOptions = [</span>
+      {
+        value: '', // empty string is all custoprop contexts
+        label: intl.formatMessage({ id: 'stripes-kint-components.customProperties.all' })
       }
-    &lt;/div&gt;
-  ), [renderListItem, uniqueIdentificationPath]);
+    ];
+  }
 &nbsp;
-  const handleChange = <span class="cstat-no" title="statement not covered" >useCallback(<span class="fstat-no" title="function not covered" >va</span>lue =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >    input.onChange(value);</span>
+  let renderViewPaneTitle = <span class="cstat-no" title="statement not covered" >labelOverrides?.viewPaneTitle;</span>
+<span class="cstat-no" title="statement not covered" >  if (renderViewPaneTitle instanceof Function) {</span>
+<span class="cstat-no" title="statement not covered" >    renderViewPaneTitle = renderViewPaneTitle(customProperty);</span>
+  }
 &nbsp;
-<span class="cstat-no" title="statement not covered" >    if (typeof onChange === 'function') {</span>
-<span class="cstat-no" title="statement not covered" >      onChange(value);</span>
-    }
-  }, [input, onChange]);
+  // Defaulting is hard
+  const afterQueryCallsSafe = <span class="cstat-no" title="statement not covered" >{</span>
+    put: <span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >null,</span>
+    post: <span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >null,</span>
+    delete: <span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >null,</span>
+    ...afterQueryCalls
+  };
 &nbsp;
-  const dropDown = <span class="cstat-no" title="statement not covered" >useCallback(<span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >    return (</span>
-      &lt;div
-        className={css.dropdownMenu}
-        id={`typedown-parent-${selectorSafe(input.name)}-menu`}
-        style={{ '--searchWidth': `${searchWidth}px` }}
-      &gt;
-        &lt;div
-          ref={listRef}
-          className={css.listContainer}
-          id="typedown-list"
-        &gt;
-          {data?.length ? data?.map(<span class="fstat-no" title="function not covered" >(d</span>, index) =&gt; {
-            const isSelected = <span class="cstat-no" title="statement not covered" >get(input.value, uniqueIdentificationPath) === get(d, uniqueIdentificationPath);</span>
-<span class="cstat-no" title="statement not covered" >            return (</span>
-              &lt;button
-                key={`typedown-button-[${index}]`}
-                className={classnames(
-                  interactionStyles,
-                  css.fullWidth,
-                  css.menuButton
-                )}
-                data-selected={isSelected}
-                id={`typedown-button-[${index}]`}
-                onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >                  handleChange(d);</span>
-<span class="cstat-no" title="statement not covered" >                  handleNextFocus();</span>
-                }}
-                onKeyDown={listKeyDownHandler}
-                type="button"
-              &gt;
-                {renderItem(d)}
-              &lt;/button&gt;
-            );
-          }) :
-          // TODO test this
-          &lt;EndOfList /&gt;
-          }
-        &lt;/div&gt;
-        {renderFooter &amp;&amp;
-          &lt;div
-            ref={footerRef}
-            className={css.footer}
-            id="typedown-footer"
-          &gt;
-            {renderFooter()}
-          &lt;/div&gt;
-        }
-      &lt;/div&gt;
-    );
-  }, [
-    data,
-    footerRef,
-    handleChange,
-    handleNextFocus,
-    input,
-    listKeyDownHandler,
-    listRef,
-    renderFooter,
-    renderItem,
-    searchWidth,
-    uniqueIdentificationPath
-  ]);
+  const {
+    post: createCustprop,
+    put: editCustProp,
+    delete: deleteCustProp
+  } = <span class="cstat-no" title="statement not covered" >useMutateCustomProperties({</span>
+    afterQueryCalls: {
+      put: <span class="fstat-no" title="function not covered" >()</span> =&gt; {
+<span class="cstat-no" title="statement not covered" >        setMode(VIEWING);</span>
+<span class="cstat-no" title="statement not covered" >        queryClient.invalidateQueries(['stripes-kint-components', 'useCustomProperties', 'custprops']);</span>
+<span class="cstat-no" title="statement not covered" >        afterQueryCallsSafe.put();</span>
+      },
+      post: <span class="fstat-no" title="function not covered" >()</span> =&gt; {
+<span class="cstat-no" title="statement not covered" >        setMode(VIEWING);</span>
+<span class="cstat-no" title="statement not covered" >        queryClient.invalidateQueries(['stripes-kint-components', 'useCustomProperties', 'custprops']);</span>
+<span class="cstat-no" title="statement not covered" >        afterQueryCallsSafe.post();</span>
+      },
+      delete: <span class="fstat-no" title="function not covered" >()</span> =&gt; {
+<span class="cstat-no" title="statement not covered" >        setMode(VIEWING);</span>
+<span class="cstat-no" title="statement not covered" >        queryClient.invalidateQueries(['stripes-kint-components', 'useCustomProperties', 'custprops']);</span>
+<span class="cstat-no" title="statement not covered" >        afterQueryCallsSafe.delete();</span>
+      }
+    },
+    endpoint: customPropertiesEndpoint,
+    id: customProperty?.id
+  });
 &nbsp;
-  const renderSearchField = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >    return (</span>
-      &lt;div
-        ref={triggerRef}
-        id={`typedown-parent-${selectorSafe(input.name)}-searchField`}
-      &gt;
-        &lt;SearchField
-          // Pass meta through so correct styling gets applied to the TextField
-          id="typedown-searchField"
-          marginBottom0
-          meta={meta}
-          onChange={<span class="fstat-no" title="function not covered" >e </span>=&gt; {
-<span class="cstat-no" title="statement not covered" >            setCallPath(pathMutator(e.target.value, path));</span>
-          }}
-          onKeyDown={searchFieldKeyDownHandler}
-        /&gt;
-      &lt;/div&gt;
-    );
+  const handeContextSubmit = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(s</span>ubmitData) =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >    return {</span>
+      ...submitData,
+      ctx: submitData?.ctx?.[0]?.value
+    };
   };
 &nbsp;
 <span class="cstat-no" title="statement not covered" >  return (</span>
-    &lt;div
-      ref={resizeRef}
-    &gt;
-      {renderSearchField()}
-      &lt;Popper
-        key="typedown-menu-toggle"
-        anchorRef={triggerRef}
-        className={classnames(
-          css.dropdown,
-          css.fullWidth
-        )}
-        isOpen={open}
-        modifiers={{
-          flip: { boundariesElement: 'viewport', padding: 10 },
-          preventOverflow: { boundariesElement: 'viewport', padding: 10 }
-        }}
-        overlayProps={{
-          'ref': overlayRef,
-          'tabIndex': '-1',
-          'onClick': <span class="fstat-no" title="function not covered" >(e</span>) =&gt; { <span class="cstat-no" title="statement not covered" >e.stopPropagation(); </span>}  // prevent propagation of click events
-        }}
-        overlayRef={overlayRef}
-        portal={portal}
+    &lt;&gt;
+      &lt;Pane
+        defaultWidth="fill"
+        id="settings-customProperties.lookupPane"
+        lastMenu={
+          &lt;Button
+            marginBottom0
+            onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >setMode(CREATING)}</span> // TODO do we need to clear form here too?
+          &gt;
+            &lt;FormattedMessage id="stripes-kint-components.create" /&gt;
+          &lt;/Button&gt;
+        }
+        paneTitle={labelOverrides.paneTitle ??
+          &lt;FormattedMessage id="stripes-kint-components.customProperties" /&gt; // This should be configurable?
+        }
       &gt;
-        {dropDown()}
-      &lt;/Popper&gt;
-      {selectedUniqueId &amp;&amp; !open &amp;&amp;
-        &lt;div
-          className={classnames(
-            css.selected,
-            css.selectedDisplay
+        &lt;CustomPropertiesLookup
+          contextFilterOptions={renderContextFilterOptions}
+          customPropertiesEndpoint={customPropertiesEndpoint}
+          labelOverrides={labelOverrides}
+          onSelectCustomProperty={<span class="fstat-no" title="function not covered" >(_</span>e, cp) =&gt; <span class="cstat-no" title="statement not covered" >setCustomProperty(cp)}</span>
+        /&gt;
+      &lt;/Pane&gt;
+      {customProperty &amp;&amp;
+        &lt;Pane
+          actionMenu={<span class="fstat-no" title="function not covered" >({</span> onToggle }) =&gt; (
+<span class="cstat-no" title="statement not covered" >            [</span>
+              &lt;Button
+                buttonStyle="dropdownItem"
+                marginBottom0
+                onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >setMode(EDITING)}</span>
+              &gt;
+                &lt;FormattedMessage id="stripes-kint-components.edit" /&gt;
+              &lt;/Button&gt;,
+              &lt;Button
+                buttonStyle="dropdownItem"
+                marginBottom0
+                onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; {
+<span class="cstat-no" title="statement not covered" >                  setDeleteModal(true);</span>
+<span class="cstat-no" title="statement not covered" >                  onToggle();</span>
+                }}
+              &gt;
+                &lt;FormattedMessage id="stripes-kint-components.delete" /&gt;
+              &lt;/Button&gt;
+            ]
           )}
+          defaultWidth="fill"
+          dismissible
+          id="settings-customProperties-viewPane"
+          onClose={<span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >setCustomProperty()}</span>
+          paneTitle={
+            renderViewPaneTitle ?? customProperty?.label ?? customProperty?.name
+          }
         &gt;
-          &lt;div
-            className={css.selectedItem}
-          &gt;
-            {renderItem(input.value)}
-          &lt;/div&gt;
-          &lt;IconButton
-            className={css.clearItem}
-            icon="times-circle-solid"
-            onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >handleChange()}</span>
+          &lt;CustomPropertiesView
+            customProperty={customProperty}
+            labelOverrides={labelOverrides}
           /&gt;
-        &lt;/div&gt;
+        &lt;/Pane&gt;
       }
-    &lt;/div&gt;
+      &lt;FormModal
+        initialValues={mode === CREATING ?
+          {
+            weight: 0,
+            primary: true,
+            defaultInternal: true
+          } :
+          {
+            ...customProperty,
+            ctx: customProperty?.ctx ? [{ value: customProperty.ctx, label: customProperty.ctx }] : null
+          }
+        }
+        modalProps={{
+          dismissible: true,
+          onClose: <span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >setMode(VIEWING),</span>
+          open: (mode === CREATING || mode === EDITING)
+        }}
+        onSubmit={mode === CREATING ?
+          compose(createCustprop, handeContextSubmit) :
+          compose(editCustProp, handeContextSubmit)
+        }
+      &gt;
+        &lt;CustomPropertiesForm
+          contextFilterOptions={renderContextFilterOptions}
+          helpPopovers={helpPopovers}
+          labelOverrides={labelOverrides}
+          refdata={refdata.map(<span class="fstat-no" title="function not covered" >rd</span>c =&gt; (<span class="cstat-no" title="statement not covered" >{ label: rdc.desc, value: rdc.id })</span>)}
+        /&gt;
+      &lt;/FormModal&gt;
+      &lt;ConfirmationModal
+        buttonStyle="danger"
+        confirmLabel={
+          labelOverrides?.confirmLabel ??
+          &lt;FormattedMessage id="stripes-kint-components.customProperties.delete.confirmLabel" /&gt;
+        }
+        heading={
+          labelOverrides?.confirmHeading ??
+          &lt;FormattedMessage id="stripes-kint-components.customProperties.delete.confirmHeading" /&gt;
+        }
+        id="delete-job-confirmation"
+        message={
+          labelOverrides?.confirmMessage ??
+          &lt;SafeHTMLMessage id="stripes-kint-components.customProperties.delete.confirmMessage" values={{ name: customProperty?.name }} /&gt;
+        }
+        onCancel={<span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >setDeleteModal(false)}</span>
+        onConfirm={<span class="fstat-no" title="function not covered" >()</span> =&gt; {
+<span class="cstat-no" title="statement not covered" >          deleteCustProp();</span>
+<span class="cstat-no" title="statement not covered" >          setCustomProperty();</span>
+<span class="cstat-no" title="statement not covered" >          setDeleteModal(false);</span>
+        }}
+        open={deleteModal}
+      /&gt;
+    &lt;/&gt;
   );
 };
 &nbsp;
-<span class="cstat-no" title="statement not covered" >TypeDown.propTypes = {</span>
-  input: PropTypes.object,
-  meta: PropTypes.object,
-  onChange: PropTypes.func,
-  path: PropTypes.string,
-  pathMutator: PropTypes.func,
-  renderFooter: PropTypes.func,
-  renderListItem: PropTypes.func,
-  uniqueIdentificationPath: PropTypes.string
+<span class="cstat-no" title="statement not covered" >CustomPropertiesSettings.propTypes = {</span>
+  afterQueryCalls: PropTypes.object,
+  contextFilterOptions: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.string,
+    label: PropTypes.oneOfType([
+      PropTypes.element,
+      PropTypes.string
+    ])
+  })),
+  customPropertiesEndpoint: PropTypes.string,
+  helpPopovers: PropTypes.object,
+  labelOverrides: PropTypes.object,
+  refdataEndpoint: PropTypes.string,
 };
 &nbsp;
-export default TypeDown;
+export default CustomPropertiesSettings;
 &nbsp;</pre></td></tr></table></pre>
                 <div class='push'></div><!-- for sticky footer -->
@@ -754,16 +790,16 @@ export default TypeDown;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Thu Jan 20 2022 16:19:40 GMT+0000 (Greenwich Mean Time)
+                at Wed Mar 09 2022 12:00:59 GMT+0000 (Greenwich Mean Time)
             </div>
-        <script src="../prettify.js"></script>
+        <script src="../../prettify.js"></script>
         <script>
             window.onload = function () {
                 prettyPrint();
             };
         </script>
-        <script src="../sorter.js"></script>
-        <script src="../block-navigation.js"></script>
+        <script src="../../sorter.js"></script>
+        <script src="../../block-navigation.js"></script>
     </body>
 </html>