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/hooks/typedownHooks/useTypedown.js.html → src/artifacts/coverage-jest/lcov-report/CustomProperties/Config/CustomPropertiesView.js.html} RENAMED Viewed

@@ -3,15 +3,15 @@
 <html lang="en">
 <head>
-    <title>Code coverage report for src/lib/hooks/typedownHooks/useTypedown.js</title>
+    <title>Code coverage report for CustomProperties/Config/CustomPropertiesView.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/hooks/typedownHooks</a> useTypedown.js</h1>
+        <h1><a href="../../index.html">All files</a> / <a href="index.html">CustomProperties/Config</a> CustomPropertiesView.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/55</span>
+                <span class='fraction'>0/3</span>
             </div>
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/36</span>
+                <span class='fraction'>0/30</span>
             </div>
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>0/6</span>
+                <span class='fraction'>0/1</span>
             </div>
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>0/54</span>
+                <span class='fraction'>0/3</span>
             </div>
@@ -209,16 +209,22 @@
 <a name='L144'></a><a href='#L144'>144</a>
 <a name='L145'></a><a href='#L145'>145</a>
 <a name='L146'></a><a href='#L146'>146</a>
-<a name='L147'></a><a href='#L147'>147</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L147'></a><a href='#L147'>147</a>
+<a name='L148'></a><a href='#L148'>148</a>
+<a name='L149'></a><a href='#L149'>149</a>
+<a name='L150'></a><a href='#L150'>150</a>
+<a name='L151'></a><a href='#L151'>151</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>
 <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>
@@ -230,37 +236,18 @@
 <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-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-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-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-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-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-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -269,71 +256,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-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-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-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-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-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-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-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-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-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-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>
@@ -355,170 +307,229 @@
 <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 { useEffect, useRef } from 'react';
-import { useResizeDetector } from 'react-resize-detector';
-&nbsp;
-// TODO swap to stripes-components export once available (Will need &lt;= peer dep bump)
-import {
-  getFirstFocusable,
-  getLastFocusable,
-  getNextFocusable,
-  getPreviousFocusable,
-} from '../../utils/getFocusableElements';
-&nbsp;
-import {
-  DOWN_ARROW,
-  TAB,
-  UP_ARROW
-} from '../../constants/eventCodes';
-&nbsp;
-import selectorSafe from '../../utils/selectorSafe';
-&nbsp;
-import useTypedownToggle from './useTypedownToggle';
-&nbsp;
-const useTypedown = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(n</span>ame) =&gt; {</span>
-  // SEARCHFIELD COMPONENT
-  const searchFieldComponent = <span class="cstat-no" title="statement not covered" >document.getElementById(`typedown-searchField-${selectorSafe(name)}`);</span>
-&nbsp;
-  // SET UP REFS
-  const listRef = <span class="cstat-no" title="statement not covered" >useRef();</span>
-  const triggerRef = <span class="cstat-no" title="statement not covered" >useRef();</span>
-  const overlayRef = <span class="cstat-no" title="statement not covered" >useRef();</span>
-  const footerRef = <span class="cstat-no" title="statement not covered" >useRef();</span>
-&nbsp;
-  const footer = <span class="cstat-no" title="statement not covered" >document.getElementById('typedown-footer');</span>
-  // Add an event listener to the footer, so that we can control tab behaviour between footer elements
-<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 (footer) {</span>
-<span class="cstat-no" title="statement not covered" >      footer.addEventListener('keydown', <span class="fstat-no" title="function not covered" >e </span>=&gt; {</span>
-        // We want special behaviour on tab
-<span class="cstat-no" title="statement not covered" >        if (e.code === TAB) {</span>
-          // Prevent the default behaviour
-<span class="cstat-no" title="statement not covered" >          e.preventDefault();</span>
-          const focusFunc = <span class="cstat-no" title="statement not covered" >e.shiftKey ? getPreviousFocusable : getNextFocusable;</span>
-          const elem = <span class="cstat-no" title="statement not covered" >focusFunc(footerRef.current, true, true, false, true);</span>
-&nbsp;
-<span class="cstat-no" title="statement not covered" >          if (elem) {</span>
-            // Focus on next focusable element
-<span class="cstat-no" title="statement not covered" >            elem.focus();</span>
-          } else <span class="cstat-no" title="statement not covered" >if (e.shiftKey) {</span>
-            // We are at the beginning of the list, refocus on search bar
-<span class="cstat-no" title="statement not covered" >            searchFieldComponent.focus();</span>
-          } else {
-            // We are at the end of the list, move onto next focusable element in page
-<span class="cstat-no" title="statement not covered" >            getNextFocusable(searchFieldComponent, false).focus();</span>
-          }
-        }
-      });
-    }
-  }, [footer, searchFieldComponent]);
-&nbsp;
-&nbsp;
-  // SET UP HANDLERS
-  const searchFieldKeyDownHandler = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >e </span>=&gt; {</span>
-<span class="cstat-no" title="statement not covered" >    if (e.code === UP_ARROW) {</span>
-      const elem = <span class="cstat-no" title="statement not covered" >getLastFocusable(listRef.current, true, true);</span>
-<span class="cstat-no" title="statement not covered" >      if (elem) {</span>
-<span class="cstat-no" title="statement not covered" >        elem.focus();</span>
-      }
-    }
-&nbsp;
-<span class="cstat-no" title="statement not covered" >    if (e.code === DOWN_ARROW) {</span>
-      const elem = <span class="cstat-no" title="statement not covered" >getFirstFocusable(listRef.current, true, true);</span>
-<span class="cstat-no" title="statement not covered" >      if (elem) {</span>
-<span class="cstat-no" title="statement not covered" >        elem.focus();</span>
-      }
-    }
-&nbsp;
-    // Tab key (But not while shifting)
-<span class="cstat-no" title="statement not covered" >    if (e.code === TAB &amp;&amp; !e.shiftKey) {</span>
-<span class="cstat-no" title="statement not covered" >      e.preventDefault();</span>
-      // If we have focusable elements in the footer, then focus on them, else unfocus searchbar
-      const elem = <span class="cstat-no" title="statement not covered" >getNextFocusable(footerRef.current, true, true, true, true);</span>
-<span class="cstat-no" title="statement not covered" >      if (elem) {</span>
-<span class="cstat-no" title="statement not covered" >        elem.focus();</span>
-      } else {
-<span class="cstat-no" title="statement not covered" >        getNextFocusable(searchFieldComponent, false).focus();</span>
-      }
-    }
-  };
-&nbsp;
-  const listKeyDownHandler = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >e </span>=&gt; {</span>
-<span class="cstat-no" title="statement not covered" >    if (e.code === DOWN_ARROW) {</span>
-      const elem = <span class="cstat-no" title="statement not covered" >getNextFocusable(listRef.current, true, true);</span>
-<span class="cstat-no" title="statement not covered" >      elem.focus();</span>
-    }
-&nbsp;
-<span class="cstat-no" title="statement not covered" >    if (e.code === UP_ARROW) {</span>
-      const elem = <span class="cstat-no" title="statement not covered" >getPreviousFocusable(listRef.current, true, true);</span>
-<span class="cstat-no" title="statement not covered" >      elem.focus();</span>
-    }
-&nbsp;
-<span class="cstat-no" title="statement not covered" >    if (e.code === TAB) {</span>
-<span class="cstat-no" title="statement not covered" >      e.preventDefault();</span>
-      let elem;
-<span class="cstat-no" title="statement not covered" >      if (!e.shiftKey &amp;&amp; !footerRef.current) {</span>
-<span class="cstat-no" title="statement not covered" >        elem = getNextFocusable(searchFieldComponent, false);</span>
-      } else <span class="cstat-no" title="statement not covered" >if (!e.shiftKey) {</span>
-<span class="cstat-no" title="statement not covered" >        elem = getNextFocusable(footerRef.current, true, true, true, true);</span>
-      } else {
-<span class="cstat-no" title="statement not covered" >        elem = searchFieldComponent;</span>
-      }
-<span class="cstat-no" title="statement not covered" >      elem.focus();</span>
-    }
-  };
-&nbsp;
-  const handleNextFocus = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >getNextFocusable(searchFieldComponent, false).focus();</span></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-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-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-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-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-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-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-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></td><td class="text"><pre class="prettyprint lang-js">import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { Col, KeyValue, NoValue, Row } from '@folio/stripes/components';
 &nbsp;
-  // SET UP VARIABLES
-  const { open } = <span class="cstat-no" title="statement not covered" >useTypedownToggle(name);</span>
+import { REFDATA_CLASS_NAME } from '../../constants/customProperties';
 &nbsp;
-  // RESIZE STUFF
-  const { width: searchWidth, ref: resizeRef } = <span class="cstat-no" title="statement not covered" >useResizeDetector();</span>
+// A default option for CustProp view pane, with the ability to override labels for fields
+const CustomPropertiesView = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >({</span></span>
+  customProperty,
+  labelOverrides
+}) =&gt; {
+<span class="cstat-no" title="statement not covered" >  return (</span>
+    &lt;&gt;
+      &lt;Row&gt;
+        &lt;Col xs={6}&gt;
+          &lt;KeyValue
+            label={
+              labelOverrides?.label ??
+              &lt;FormattedMessage id="stripes-kint-components.customProperties.label" /&gt;
+            }
+            value={customProperty?.label}
+          /&gt;
+        &lt;/Col&gt;
+        &lt;Col xs={6}&gt;
+          &lt;KeyValue
+            label={
+              labelOverrides?.name ??
+              &lt;FormattedMessage id="stripes-kint-components.customProperties.name" /&gt;
+            }
+            value={customProperty?.name}
+          /&gt;
+        &lt;/Col&gt;
+      &lt;/Row&gt;
+      &lt;Row&gt;
+        &lt;Col xs={12}&gt;
+          &lt;KeyValue
+            label={
+              labelOverrides?.description ??
+              &lt;FormattedMessage id="stripes-kint-components.customProperties.description" /&gt;
+            }
+            value={customProperty?.description}
+          /&gt;
+        &lt;/Col&gt;
+      &lt;/Row&gt;
+      &lt;Row&gt;
+        &lt;Col xs={6}&gt;
+          &lt;KeyValue
+            label={
+              labelOverrides?.weight ??
+              &lt;FormattedMessage id="stripes-kint-components.customProperties.weight" /&gt;
+            }
+            value={customProperty?.weight}
+          /&gt;
+        &lt;/Col&gt;
+        &lt;Col xs={6}&gt;
+          &lt;KeyValue
+            label={
+              labelOverrides?.primary ??
+              &lt;FormattedMessage
+                id="stripes-kint-components.customProperties.primary"
+              /&gt;
+            }
+            value={
+              &lt;FormattedMessage
+                id={
+                  customProperty?.primary
+                    ? 'stripes-kint-components.yes'
+                    : 'stripes-kint-components.no'
+                }
+              /&gt;
+            }
+          /&gt;
+        &lt;/Col&gt;
+      &lt;/Row&gt;
+      &lt;Row&gt;
+        &lt;Col xs={6}&gt;
+          &lt;KeyValue
+            label={
+              labelOverrides?.defaultVisibility ??
+              &lt;FormattedMessage id="stripes-kint-components.customProperties.defaultVisibility" /&gt;
+            }
+            value={
+              &lt;FormattedMessage
+                id={
+                  customProperty?.defaultInternal
+                    ? 'stripes-kint-components.customProperties.internalTrue'
+                    : 'stripes-kint-components.customProperties.internalFalse'
+                }
+              /&gt;
+            }
+          /&gt;
+        &lt;/Col&gt;
+        &lt;Col xs={6}&gt;
+          &lt;KeyValue
+            label={
+              labelOverrides?.ctx ??
+              &lt;FormattedMessage id="stripes-kint-components.customProperties.ctx" /&gt;
+            }
+            value={customProperty?.ctx ?? &lt;NoValue /&gt;}
+          /&gt;
+        &lt;/Col&gt;
+      &lt;/Row&gt;
+      &lt;Row&gt;
+        &lt;Col xs={6}&gt;
+          {customProperty?.type &amp;&amp; (
+            &lt;KeyValue
+              label={
+                labelOverrides?.type ??
+                &lt;FormattedMessage id="stripes-kint-components.customProperties.type" /&gt;
+              }
+              value={&lt;FormattedMessage id={`stripes-kint-components.customProperties.type.${customProperty?.type}`} /&gt;}
+            /&gt;
+          )}
+        &lt;/Col&gt;
+        &lt;Col xs={6}&gt;
+          {customProperty?.type === REFDATA_CLASS_NAME &amp;&amp; (
+            &lt;KeyValue
+              label={
+                labelOverrides?.category ??
+                &lt;FormattedMessage id="stripes-kint-components.customProperties.category" /&gt;
+              }
+              value={customProperty?.category?.desc ?? &lt;NoValue /&gt;}
+            /&gt;
+          )}
+        &lt;/Col&gt;
+      &lt;/Row&gt;
+    &lt;/&gt;
+  );
+};
 &nbsp;
-  // OVERLAY PORTAL
-  const portal = <span class="cstat-no" title="statement not covered" >document.getElementById('OverlayContainer');</span>
+<span class="cstat-no" title="statement not covered" >CustomPropertiesView.propTypes = {</span>
+  customProperty: PropTypes.shape({
+    id: PropTypes.string,
+    label: PropTypes.string,
+    name: PropTypes.string,
+    description: PropTypes.string,
+    weight: PropTypes.number,
+    primary: PropTypes.bool,
+    defaultInternal: PropTypes.bool,
+    ctx: PropTypes.string,
+    type: PropTypes.string,
+    category: PropTypes.shape({
+      desc: PropTypes.string
+    })
 &nbsp;
-<span class="cstat-no" title="statement not covered" >  return {</span>
-    refs: {
-      listRef,
-      triggerRef,
-      overlayRef,
-      footerRef
-    },
-    handlers: {
-      handleNextFocus,
-      listKeyDownHandler,
-      searchFieldKeyDownHandler
-    },
-    variables: {
-      open,
-      portal,
-      resizeRef,
-      searchWidth
-    }
-  };
+  }),
+  labelOverrides: PropTypes.object
 };
 &nbsp;
-export default useTypedown;
+export default CustomPropertiesView;
 &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>