npm - @k-int/stripes-kint-components - Versions diffs - 1.6.0 → 2.0.1 - Mend

@k-int/stripes-kint-components 1.6.0 → 2.0.1

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 (326) hide show

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

@@ -3,15 +3,15 @@
 <html lang="en">
 <head>
-    <title>Code coverage report for src/lib/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">src/lib/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/35</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/22</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/13</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/33</span>
+                <span class='fraction'>0/47</span>
             </div>
@@ -297,7 +297,13 @@
 <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></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<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>
@@ -314,46 +320,43 @@
 <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-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>
 <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-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-no">&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-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>
@@ -361,13 +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-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>
@@ -377,16 +381,20 @@
 <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-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-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -395,16 +403,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-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-neutral">&nbsp;</span>
@@ -413,8 +419,6 @@
 <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>
@@ -427,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>
@@ -442,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>
@@ -452,7 +461,6 @@
 <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>
@@ -469,7 +477,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-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>
@@ -478,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>
@@ -507,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>
@@ -531,258 +543,263 @@
 <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 { EndOfList, IconButton, Popper } from '@folio/stripes/components';
+import { useQueryClient } from 'react-query';
 &nbsp;
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { interactionStyles } from '@folio/stripes-components/lib/sharedStyles/interactionStyles.css';
+import SafeHTMLMessage from '@folio/react-intl-safe-html';
 &nbsp;
-import SearchField from '../SearchField';
-import css from '../../../styles/TypeDown.css';
+import { Button, ConfirmationModal, Pane } from '@folio/stripes/components';
 &nbsp;
-import { useTypedown } from '../hooks/typedownHooks';
-import selectorSafe from '../utils/selectorSafe';
+import FormModal from '../../FormModal/FormModal';
 &nbsp;
-const Typedown = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >({</span></span>
-  dataOptions,
-  input,
-  filterPath,
-  meta,
-  onChange,
-  onType,
-  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>
+import CustomPropertiesLookup from './CustomPropertiesLookup';
+import CustomPropertiesView from './CustomPropertiesView';
+import CustomPropertiesForm from './CustomPropertyForm';
+import { useMutateCustomProperties, useRefdata } from '../../hooks';
+&nbsp;
+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; {
-  const selectedUniqueId = <span class="cstat-no" title="statement not covered" >get(input.value, uniqueIdentificationPath);</span>
+  const queryClient = <span class="cstat-no" title="statement not covered" >useQueryClient();</span>
 &nbsp;
-  // Display data needs to be in line with data options but also able to react to default handleType
-  const [displayData, setDisplayData] = <span class="cstat-no" title="statement not covered" >useState(dataOptions);</span>
-<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" >    setDisplayData(dataOptions);</span>
-  }, [dataOptions]);
+  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;
-  // Setup default handleType
-  const handleType = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(e</span>) =&gt; {</span>
-    const regex = <span class="cstat-no" title="statement not covered" >new RegExp(`${e.target.value.toLowerCase()}`);</span>
-<span class="cstat-no" title="statement not covered" >    if (onType) {</span>
-<span class="cstat-no" title="statement not covered" >      onType(e);</span>
-    } else <span class="cstat-no" title="statement not covered" >if (filterPath &amp;&amp; e?.target?.value) {</span>
-<span class="cstat-no" title="statement not covered" >      setDisplayData(dataOptions.filter(<span class="fstat-no" title="function not covered" >it</span>em =&gt; <span class="cstat-no" title="statement not covered" >get(item, filterPath)?.toLowerCase()?.match(regex))</span>);</span>
-    } else <span class="cstat-no" title="statement not covered" >if (e?.target?.value) {</span>
-<span class="cstat-no" title="statement not covered" >      setDisplayData(dataOptions.filter(<span class="fstat-no" title="function not covered" >it</span>em =&gt; <span class="cstat-no" title="statement not covered" >get(item, uniqueIdentificationPath)?.toLowerCase()?.match(regex))</span>);</span>
-    } else {
-<span class="cstat-no" title="statement not covered" >      setDisplayData(dataOptions);</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;
-          {displayData?.length ? displayData?.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;
-    );
-  }, [
-    displayData,
-    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-${selectorSafe(input.name)}`}
-          marginBottom0
-          meta={meta}
-          onChange={handleType}
-          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>
-  dataOptions: PropTypes.arrayOf(PropTypes.object),
-  input: PropTypes.object,
-  meta: PropTypes.object,
-  onChange: PropTypes.func,
-  onType: 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 -->
             </div><!-- /wrapper -->
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
-                <a href="https://istanbul.js.org/" target="_blank" rel="noopener">istanbul</a>
-                at Fri Dec 10 2021 11:39:46 GMT+0000 (Greenwich Mean Time)
+                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
+                at Tue Mar 08 2022 11:38:49 GMT+0000 (Greenwich Mean Time)
             </div>
-        </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>