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

package/CHANGELOG.md

@@ -1,10 +1,20 @@
-## 2.0.1 2022-03-08
+## 2.1.0 In progress
 * Fixes for ActionList
   * When no formatter is present, it no longer crashes
   * Formatting for buttons
 * Fixes for CustomProperty work
   * Editing CustProp with context no longer crashes
   * Added translation for "no matching context found"
+  * Custom properties now sorted by label by default
+* generateKiwtQuery now allows for filters and sort objects to be passed in with options, to avoid weird parsing nsValues used by SASQ if desired.
+  * useCustomProperties migrated over to use this feature
+  * SASQViewComponent now hands "queryProps" to the ViewComponent, allowing access to the react-query internals
+  * SASQRoute children are now rendered above the SASQViewComponent, allowing for Route patterns such as 'Charges' in OA
+  * FormModal is actually exported now
+  * Typedown
+    * Interaction styles have been improved, onHover and onFocus styles are now in line with Stripes standards
+    * Can now pass className to Field containing Typedown and they will be applied to Typedown
+    * Selected item style is no longer "selected" colour, instead blank with border
 
 ## 2.0.0 2022-03-04
   * ActionList updates

package/es/index.js

@@ -35,6 +35,12 @@ Object.defineProperty(exports, "EditableRefdataList", {
     return _EditableRefdataList.default;
   }
 });
+Object.defineProperty(exports, "FormModal", {
+  enumerable: true,
+  get: function get() {
+    return _FormModal.default;
+  }
+});
 Object.defineProperty(exports, "NoResultsMessage", {
   enumerable: true,
   get: function get() {
@@ -227,6 +233,8 @@ var _NoResultsMessage = _interopRequireDefault(require("./lib/NoResultsMessage")
 
 var _RefdataButtons = _interopRequireDefault(require("./lib/RefdataButtons"));
 
+var _FormModal = _interopRequireDefault(require("./lib/FormModal"));
+
 var _Config = require("./lib/CustomProperties/Config");
 
 var _customPropertyContants = _interopRequireWildcard(require("./lib/constants/customProperties"));

package/es/lib/CustomProperties/Config/CustomPropertiesLookup.js

@@ -63,7 +63,7 @@ var CustomPropertiesLookup = function CustomPropertiesLookup(_ref) {
       queryParams = _ref.queryParams;
 
   var _useState = (0, _react.useState)({
-    sort: 'id'
+    sort: 'label'
   }),
       _useState2 = _slicedToArray(_useState, 2),
       nsValues = _useState2[0],
@@ -157,7 +157,7 @@ var CustomPropertiesLookup = function CustomPropertiesLookup(_ref) {
   });
 };
 
-__signature__(CustomPropertiesLookup, "useState{[nsValues, setNsValues]({\n    sort: 'id'\n  })}\nuseState{[selectedContext, setSelectedContext]}\nuseCustomProperties{{ data: custprops, isLoading }}", function () {
+__signature__(CustomPropertiesLookup, "useState{[nsValues, setNsValues]({\n    sort: 'label'\n  })}\nuseState{[selectedContext, setSelectedContext]}\nuseCustomProperties{{ data: custprops, isLoading }}", function () {
   return [_hooks.useCustomProperties];
 });
 

package/es/lib/SASQRoute/SASQRoute.js

@@ -17,7 +17,7 @@ var _SASQViewComponent = _interopRequireDefault(require("../SASQViewComponent"))
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _excluded = ["path", "fetchParameters"];
+var _excluded = ["children", "path", "fetchParameters"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -41,7 +41,8 @@ var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoader
 };
 
 var SASQRoute = function SASQRoute(_ref) {
-  var path = _ref.path,
+  var children = _ref.children,
+      path = _ref.path,
       fetchParameters = _ref.fetchParameters,
       props = _objectWithoutProperties(_ref, _excluded);
 
@@ -63,15 +64,17 @@ var SASQRoute = function SASQRoute(_ref) {
         fetchParameters: fetchParameters,
         path: path
       }, props), {}, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Route, {
-          path: "".concat(path, "/:id"),
-          render: function render(innerProps) {
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SASQViewComponent.default, _objectSpread(_objectSpread({}, innerProps), {}, {
-              fetchParameters: fetchParameters,
-              path: path,
-              ViewComponent: props.ViewComponent
-            }, props));
-          }
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactRouterDom.Switch, {
+          children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Route, {
+            path: "".concat(path, "/:id"),
+            render: function render(innerProps) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SASQViewComponent.default, _objectSpread(_objectSpread({}, innerProps), {}, {
+                fetchParameters: fetchParameters,
+                path: path,
+                ViewComponent: props.ViewComponent
+              }, props));
+            }
+          })]
         })
       }));
     }
@@ -79,6 +82,7 @@ var SASQRoute = function SASQRoute(_ref) {
 };
 
 SASQRoute.propTypes = {
+  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.element, _propTypes.default.func]),
   fetchParameters: _propTypes.default.object,
   path: _propTypes.default.string,
   ViewComponent: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node])

package/es/lib/SASQViewComponent/SASQViewComponent.js

@@ -15,7 +15,8 @@ var _core = require("@folio/stripes/core");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _excluded = ["fetchParameters", "history", "location", "match", "path", "ViewComponent"];
+var _excluded = ["fetchParameters", "history", "location", "match", "path", "ViewComponent"],
+    _excluded2 = ["data"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -64,17 +65,19 @@ var SASQViewComponent = function SASQViewComponent(_ref) {
     enabled: !!(match !== null && match !== void 0 && (_match$params3 = match.params) !== null && _match$params3 !== void 0 && _match$params3.id)
   }),
       _useQuery$data = _useQuery.data,
-      data = _useQuery$data === void 0 ? {} : _useQuery$data;
+      data = _useQuery$data === void 0 ? {} : _useQuery$data,
+      rest = _objectWithoutProperties(_useQuery, _excluded2);
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ViewComponent, _objectSpread({
     onClose: function onClose() {
       return history.push("".concat(path).concat(location.search));
     },
+    queryProps: _objectSpread({}, rest),
     resource: data
   }, props));
 };
 
-__signature__(SASQViewComponent, "useNamespace{{ 0: namespace }}\nuseOkapiKy{ky}\nuseQuery{{ data = {} }}", function () {
+__signature__(SASQViewComponent, "useNamespace{{ 0: namespace }}\nuseOkapiKy{ky}\nuseQuery{{ data = {}, ...rest }}", function () {
   return [_core.useNamespace, _core.useOkapiKy, _reactQuery.useQuery];
 });
 

package/es/lib/Typedown/Typedown.js

@@ -17,8 +17,6 @@ var _get3 = _interopRequireDefault(require("lodash/get"));
 
 var _components = require("@folio/stripes/components");
 
-var _interactionStyles = require("@folio/stripes-components/lib/sharedStyles/interactionStyles.css");
-
 var _SearchField = _interopRequireDefault(require("../SearchField"));
 
 var _TypeDown = _interopRequireDefault(require("../../../styles/TypeDown.css"));
@@ -57,7 +55,8 @@ var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoader
 };
 
 var Typedown = function Typedown(_ref) {
-  var dataOptions = _ref.dataOptions,
+  var className = _ref.className,
+      dataOptions = _ref.dataOptions,
       endOfList = _ref.endOfList,
       id = _ref.id,
       input = _ref.input,
@@ -172,7 +171,7 @@ var Typedown = function Typedown(_ref) {
         children: displayData !== null && displayData !== void 0 && displayData.length ? displayData === null || displayData === void 0 ? void 0 : displayData.map(function (d, index) {
           var isSelectedEval = isSelected ? isSelected(input.value, d) : (0, _get3.default)(input.value, uniqueIdentificationPath) === (0, _get3.default)(d, uniqueIdentificationPath);
           return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-            className: (0, _classnames.default)(_interactionStyles.interactionStyles, _TypeDown.default.fullWidth, _TypeDown.default.menuButton),
+            className: (0, _classnames.default)(_TypeDown.default.fullWidth, _TypeDown.default.menuButton),
             "data-selected": isSelectedEval,
             id: "typedown-button-[".concat(index, "]"),
             onClick: function onClick() {
@@ -210,6 +209,7 @@ var Typedown = function Typedown(_ref) {
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     ref: resizeRef,
+    className: (0, _classnames.default)(_TypeDown.default.typedown, className),
     children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Label, {
       htmlFor: id,
       id: "".concat(id, "-label"),
@@ -241,7 +241,7 @@ var Typedown = function Typedown(_ref) {
       portal: portal,
       children: dropDown()
     }, "typedown-menu-toggle"), selectedUniqueId && !open && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: (0, _classnames.default)(_TypeDown.default.selected, _TypeDown.default.selectedDisplay),
+      className: (0, _classnames.default)(_TypeDown.default.selectedDisplay),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: _TypeDown.default.selectedItem,
         children: renderItem(input.value)
@@ -261,6 +261,7 @@ __signature__(Typedown, "useState{[displayData, setDisplayData](dataOptions)}\nu
 });
 
 Typedown.propTypes = {
+  className: _propTypes.default.string,
   dataOptions: _propTypes.default.arrayOf(_propTypes.default.object),
   endOfList: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node, _propTypes.default.element]),
   filterPath: _propTypes.default.string,

package/es/lib/hooks/useCustomProperties.js

@@ -20,6 +20,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
   enterModule && enterModule(module);
 })();
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
   return a;
 };
@@ -32,39 +38,43 @@ var useCustomProperties = function useCustomProperties(_ref) {
     sort: 'id'
   } : _ref$nsValues,
       _ref$options = _ref.options,
-      options = _ref$options === void 0 ? {
+      options = _ref$options === void 0 ? {} : _ref$options,
+      queryParams = _ref.queryParams,
+      _ref$returnQueryObjec = _ref.returnQueryObject,
+      returnQueryObject = _ref$returnQueryObjec === void 0 ? false : _ref$returnQueryObjec;
+  var ky = (0, _core.useOkapiKy)();
+
+  var custPropOptions = _objectSpread({
     searchKey: 'label,name,description',
     filterKeys: {
       ContextKey: 'ctx'
     },
+    filters: [],
     stats: false,
     max: 100
-  } : _ref$options,
-      queryParams = _ref.queryParams,
-      _ref$returnQueryObjec = _ref.returnQueryObject,
-      returnQueryObject = _ref$returnQueryObjec === void 0 ? false : _ref$returnQueryObjec;
-  var ky = (0, _core.useOkapiKy)(); // Allow passing of 'false' for isNull
+  }, options);
 
   if (Array.isArray(ctx)) {
     // If we have an array, append a context filter for each ctx given
-    nsValues.filters = ctx.map(function (c) {
-      if (c === 'isNull') {
-        return 'ContextWithoutKey.ctx isNull';
-      } else {
-        return "ContextKey.".concat(c);
-      }
-    }).join(',');
+    // Special case if one is isNull
+    custPropOptions.filters.push({
+      values: ctx.map(function (c) {
+        return c === 'isNull' ? 'ctx isNull' : "ctx==".concat(c);
+      })
+    });
   } else if (ctx === 'isNull') {
     // isNull is a special case
-    nsValues.filters = 'ContextWithoutKey.ctx isNull';
+    custPropOptions.filters.push({
+      value: 'ctx isNull'
+    });
   } else if (ctx) {
-    // If we just have a string, append a single ctx filter
-    nsValues.filters = "ContextKey.".concat(ctx);
-  } else {
-    nsValues.filters = null;
+    custPropOptions.filters.push({
+      path: 'ctx',
+      value: ctx
+    });
   }
 
-  var query = (0, _utils.generateKiwtQuery)(options, nsValues);
+  var query = (0, _utils.generateKiwtQuery)(custPropOptions, nsValues);
   var path = "".concat(endpoint).concat(query);
   var queryObject = (0, _reactQuery.useQuery)(['stripes-kint-components', 'useCustomProperties', 'custprops', ctx, path], function () {
     return ky(path).json();

package/es/lib/utils/generateKiwtQueryParams.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _excluded = ["searchKey", "filterKeys", "sortKeys", "stats"];
+var _excluded = ["searchKey", "filterKeys", "sortKeys", "stats", "sort", "filters"];
 
 (function () {
   var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
@@ -55,6 +55,8 @@ var generateKiwtQueryParams = function generateKiwtQueryParams(options, nsValues
       sortKeys = _options$sortKeys === void 0 ? {} : _options$sortKeys,
       _options$stats = options.stats,
       stats = _options$stats === void 0 ? true : _options$stats,
+      optionsSort = options.sort,
+      optionsFilters = options.filters,
       rest = _objectWithoutProperties(options, _excluded);
 
   var paramsArray = [];
@@ -68,13 +70,41 @@ var generateKiwtQueryParams = function generateKiwtQueryParams(options, nsValues
     paramsArray.push("term=".concat(query));
   }
 
-  if (filters) {
+  if (optionsFilters) {
+    optionsFilters.forEach(function (opf) {
+      if (opf !== null && opf !== void 0 && opf.values) {
+        // Build the values filter block
+        var innerFilters = [];
+        opf.values.forEach(function (opfv) {
+          if (opf.path) {
+            var _opf$comparator;
+
+            innerFilters.push("".concat(opf.path).concat((_opf$comparator = opf.comparator) !== null && _opf$comparator !== void 0 ? _opf$comparator : '==').concat(opfv));
+          } else {
+            innerFilters.push(opfv);
+          }
+        });
+        paramsArray.push("filters=".concat(innerFilters.join('||')));
+      } else if (opf !== null && opf !== void 0 && opf.value) {
+        // If no value OR values, then ignore
+        if (opf.path) {
+          var _opf$comparator2;
+
+          paramsArray.push("filters=".concat(opf.path).concat((_opf$comparator2 = opf.comparator) !== null && _opf$comparator2 !== void 0 ? _opf$comparator2 : '==').concat(opf.value));
+        } else {
+          paramsArray.push("filters=".concat(opf.value));
+        }
+      }
+    });
+  } else if (filters) {
     var filterMap = {};
     filters.split(',').forEach(function (filter) {
-      var _filter$split = filter.split('.'),
-          _filter$split2 = _toArray(_filter$split),
-          filterName = _filter$split2[0],
-          filterRest = _filter$split2.slice(1);
+      var _filter$trim;
+
+      var _filter$trim$split = (_filter$trim = filter.trim()) === null || _filter$trim === void 0 ? void 0 : _filter$trim.split('.'),
+          _filter$trim$split2 = _toArray(_filter$trim$split),
+          filterName = _filter$trim$split2[0],
+          filterRest = _filter$trim$split2.slice(1);
 
       var filterValue = filterRest.join('.');
       if (filterMap[filterName] === undefined) filterMap[filterName] = [];
@@ -102,8 +132,21 @@ var generateKiwtQueryParams = function generateKiwtQueryParams(options, nsValues
     });
   }
 
-  if (sort) {
-    paramsArray.push.apply(paramsArray, _toConsumableArray(sort.split(',').map(function (sortKey) {
+  if (optionsSort && optionsSort.length > 0) {
+    optionsSort.forEach(function (os) {
+      if (os.value) {
+        paramsArray.push("sort=".concat(os.value));
+      } else if (os.path) {
+        var _os$direction;
+
+        // If no path then ignore
+        paramsArray.push("sort=".concat(os.path, ";").concat((_os$direction = os.direction) !== null && _os$direction !== void 0 ? _os$direction : 'asc'));
+      }
+    });
+  } else if (sort) {
+    var _sort$trim;
+
+    paramsArray.push.apply(paramsArray, _toConsumableArray((_sort$trim = sort.trim()) === null || _sort$trim === void 0 ? void 0 : _sort$trim.split(',').map(function (sortKey) {
       var descending = sortKey.startsWith('-');
       var term = sortKey.replace('-', '');
 

package/junit.xml

@@ -1,79 +1,79 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<testsuites name="jest tests" tests="34" failures="0" errors="0" time="18.817">
-  <testsuite name="RenderSettingValue" errors="0" failures="0" skipped="0" timestamp="2022-03-08T11:38:31" time="12.657" tests="12">
-    <testcase classname="RenderSettingValue render string settings render a string setting renders the value" name="RenderSettingValue render string settings render a string setting renders the value" time="0.038">
+<testsuites name="jest tests" tests="34" failures="0" errors="0" time="15.928">
+  <testsuite name="RenderSettingValue" errors="0" failures="0" skipped="0" timestamp="2022-03-09T12:00:43" time="10.429" tests="12">
+    <testcase classname="RenderSettingValue render string settings render a string setting renders the value" name="RenderSettingValue render string settings render a string setting renders the value" time="0.032">
     </testcase>
-    <testcase classname="RenderSettingValue render string settings render a string setting without a value renders the default value" name="RenderSettingValue render string settings render a string setting without a value renders the default value" time="0.004">
+    <testcase classname="RenderSettingValue render string settings render a string setting without a value renders the default value" name="RenderSettingValue render string settings render a string setting without a value renders the default value" time="0.003">
     </testcase>
-    <testcase classname="RenderSettingValue render string settings render a string setting without a value or default renders the empty message" name="RenderSettingValue render string settings render a string setting without a value or default renders the empty message" time="0.005">
+    <testcase classname="RenderSettingValue render string settings render a string setting without a value or default renders the empty message" name="RenderSettingValue render string settings render a string setting without a value or default renders the empty message" time="0.004">
     </testcase>
-    <testcase classname="RenderSettingValue render refdata settings render a refdata setting renders the value" name="RenderSettingValue render refdata settings render a refdata setting renders the value" time="0.004">
+    <testcase classname="RenderSettingValue render refdata settings render a refdata setting renders the value" name="RenderSettingValue render refdata settings render a refdata setting renders the value" time="0.003">
     </testcase>
-    <testcase classname="RenderSettingValue render refdata settings render a refdata setting without a value renders the default value" name="RenderSettingValue render refdata settings render a refdata setting without a value renders the default value" time="0.004">
+    <testcase classname="RenderSettingValue render refdata settings render a refdata setting without a value renders the default value" name="RenderSettingValue render refdata settings render a refdata setting without a value renders the default value" time="0.002">
     </testcase>
     <testcase classname="RenderSettingValue render refdata settings render a refdata setting without a value or default renders the empty message" name="RenderSettingValue render refdata settings render a refdata setting without a value or default renders the empty message" time="0.002">
     </testcase>
-    <testcase classname="RenderSettingValue render password settings render a password setting renders the value" name="RenderSettingValue render password settings render a password setting renders the value" time="0.004">
+    <testcase classname="RenderSettingValue render password settings render a password setting renders the value" name="RenderSettingValue render password settings render a password setting renders the value" time="0.003">
     </testcase>
-    <testcase classname="RenderSettingValue render password settings render a password setting without a value renders the default value" name="RenderSettingValue render password settings render a password setting without a value renders the default value" time="0.004">
+    <testcase classname="RenderSettingValue render password settings render a password setting without a value renders the default value" name="RenderSettingValue render password settings render a password setting without a value renders the default value" time="0.003">
     </testcase>
-    <testcase classname="RenderSettingValue render password settings render a password setting without a value or default renders the empty message" name="RenderSettingValue render password settings render a password setting without a value or default renders the empty message" time="0.003">
+    <testcase classname="RenderSettingValue render password settings render a password setting without a value or default renders the empty message" name="RenderSettingValue render password settings render a password setting without a value or default renders the empty message" time="0.002">
     </testcase>
     <testcase classname="RenderSettingValue render template settings render a template setting renders the value" name="RenderSettingValue render template settings render a template setting renders the value" time="0.003">
     </testcase>
-    <testcase classname="RenderSettingValue render template settings render a template setting without a value renders the default value" name="RenderSettingValue render template settings render a template setting without a value renders the default value" time="0.003">
+    <testcase classname="RenderSettingValue render template settings render a template setting without a value renders the default value" name="RenderSettingValue render template settings render a template setting without a value renders the default value" time="0.005">
     </testcase>
-    <testcase classname="RenderSettingValue render template settings render a template setting without a value or default renders the empty message" name="RenderSettingValue render template settings render a template setting without a value or default renders the empty message" time="0.004">
+    <testcase classname="RenderSettingValue render template settings render a template setting without a value or default renders the empty message" name="RenderSettingValue render template settings render a template setting without a value or default renders the empty message" time="0.002">
     </testcase>
   </testsuite>
-  <testsuite name="EditableSettingsListFieldArray" errors="0" failures="0" skipped="0" timestamp="2022-03-08T11:38:31" time="13.026" tests="3">
-    <testcase classname="EditableSettingsListFieldArray with empty initial values renders empty field" name="EditableSettingsListFieldArray with empty initial values renders empty field" time="0.052">
+  <testsuite name="EditableSettingsListFieldArray" errors="0" failures="0" skipped="0" timestamp="2022-03-09T12:00:43" time="10.755" tests="3">
+    <testcase classname="EditableSettingsListFieldArray with empty initial values renders empty field" name="EditableSettingsListFieldArray with empty initial values renders empty field" time="0.045">
     </testcase>
-    <testcase classname="EditableSettingsListFieldArray with initial value set renders the SettingField component" name="EditableSettingsListFieldArray with initial value set renders the SettingField component" time="0.012">
+    <testcase classname="EditableSettingsListFieldArray with initial value set renders the SettingField component" name="EditableSettingsListFieldArray with initial value set renders the SettingField component" time="0.011">
     </testcase>
-    <testcase classname="EditableSettingsListFieldArray with multiple initial values set renders the correct number of SettingField components" name="EditableSettingsListFieldArray with multiple initial values set renders the correct number of SettingField components" time="0.01">
+    <testcase classname="EditableSettingsListFieldArray with multiple initial values set renders the correct number of SettingField components" name="EditableSettingsListFieldArray with multiple initial values set renders the correct number of SettingField components" time="0.007">
     </testcase>
   </testsuite>
-  <testsuite name="EditSettingValue" errors="0" failures="0" skipped="0" timestamp="2022-03-08T11:38:31" time="14.589" tests="16">
-    <testcase classname="EditSettingValue edit string setting with no initial value renders the edit field" name="EditSettingValue edit string setting with no initial value renders the edit field" time="0.109">
+  <testsuite name="EditSettingValue" errors="0" failures="0" skipped="0" timestamp="2022-03-09T12:00:43" time="12.062" tests="16">
+    <testcase classname="EditSettingValue edit string setting with no initial value renders the edit field" name="EditSettingValue edit string setting with no initial value renders the edit field" time="0.102">
     </testcase>
-    <testcase classname="EditSettingValue edit string setting with initial value renders the expected value in the edit field" name="EditSettingValue edit string setting with initial value renders the expected value in the edit field" time="0.03">
+    <testcase classname="EditSettingValue edit string setting with initial value renders the expected value in the edit field" name="EditSettingValue edit string setting with initial value renders the expected value in the edit field" time="0.031">
     </testcase>
-    <testcase classname="EditSettingValue edit refdata setting with no initial value for refdata with &lt;4 options renders the expected radio buttons" name="EditSettingValue edit refdata setting with no initial value for refdata with &lt;4 options renders the expected radio buttons" time="0.174">
+    <testcase classname="EditSettingValue edit refdata setting with no initial value for refdata with &lt;4 options renders the expected radio buttons" name="EditSettingValue edit refdata setting with no initial value for refdata with &lt;4 options renders the expected radio buttons" time="0.155">
     </testcase>
-    <testcase classname="EditSettingValue edit refdata setting with no initial value for refdata with &lt;4 options no radio buttons are checked" name="EditSettingValue edit refdata setting with no initial value for refdata with &lt;4 options no radio buttons are checked" time="0.173">
+    <testcase classname="EditSettingValue edit refdata setting with no initial value for refdata with &lt;4 options no radio buttons are checked" name="EditSettingValue edit refdata setting with no initial value for refdata with &lt;4 options no radio buttons are checked" time="0.133">
     </testcase>
-    <testcase classname="EditSettingValue edit refdata setting with initial value for refdata with &lt;4 options renders the expected radio buttons" name="EditSettingValue edit refdata setting with initial value for refdata with &lt;4 options renders the expected radio buttons" time="0.124">
+    <testcase classname="EditSettingValue edit refdata setting with initial value for refdata with &lt;4 options renders the expected radio buttons" name="EditSettingValue edit refdata setting with initial value for refdata with &lt;4 options renders the expected radio buttons" time="0.12">
     </testcase>
-    <testcase classname="EditSettingValue edit refdata setting with initial value for refdata with &lt;4 options the correct radio button is checked" name="EditSettingValue edit refdata setting with initial value for refdata with &lt;4 options the correct radio button is checked" time="0.137">
+    <testcase classname="EditSettingValue edit refdata setting with initial value for refdata with &lt;4 options the correct radio button is checked" name="EditSettingValue edit refdata setting with initial value for refdata with &lt;4 options the correct radio button is checked" time="0.127">
     </testcase>
-    <testcase classname="EditSettingValue edit refdata setting with no initial value for refdata with &gt;4 options renders the expected select field" name="EditSettingValue edit refdata setting with no initial value for refdata with &gt;4 options renders the expected select field" time="0.025">
+    <testcase classname="EditSettingValue edit refdata setting with no initial value for refdata with &gt;4 options renders the expected select field" name="EditSettingValue edit refdata setting with no initial value for refdata with &gt;4 options renders the expected select field" time="0.023">
     </testcase>
-    <testcase classname="EditSettingValue edit refdata setting with no initial value for refdata with &gt;4 options renders the expected refdata options" name="EditSettingValue edit refdata setting with no initial value for refdata with &gt;4 options renders the expected refdata options" time="0.232">
+    <testcase classname="EditSettingValue edit refdata setting with no initial value for refdata with &gt;4 options renders the expected refdata options" name="EditSettingValue edit refdata setting with no initial value for refdata with &gt;4 options renders the expected refdata options" time="0.201">
     </testcase>
-    <testcase classname="EditSettingValue edit refdata setting with initial value for refdata with &gt;4 options renders the expected refdata options" name="EditSettingValue edit refdata setting with initial value for refdata with &gt;4 options renders the expected refdata options" time="0.239">
+    <testcase classname="EditSettingValue edit refdata setting with initial value for refdata with &gt;4 options renders the expected refdata options" name="EditSettingValue edit refdata setting with initial value for refdata with &gt;4 options renders the expected refdata options" time="0.196">
     </testcase>
-    <testcase classname="EditSettingValue edit refdata setting with initial value for refdata with &gt;4 options renders the expected value in the refdata dropdown" name="EditSettingValue edit refdata setting with initial value for refdata with &gt;4 options renders the expected value in the refdata dropdown" time="0.022">
+    <testcase classname="EditSettingValue edit refdata setting with initial value for refdata with &gt;4 options renders the expected value in the refdata dropdown" name="EditSettingValue edit refdata setting with initial value for refdata with &gt;4 options renders the expected value in the refdata dropdown" time="0.018">
     </testcase>
-    <testcase classname="EditSettingValue edit template setting with no initial value renders the edit field" name="EditSettingValue edit template setting with no initial value renders the edit field" time="0.023">
+    <testcase classname="EditSettingValue edit template setting with no initial value renders the edit field" name="EditSettingValue edit template setting with no initial value renders the edit field" time="0.02">
     </testcase>
-    <testcase classname="EditSettingValue edit template setting with no initial value renders the expected template options" name="EditSettingValue edit template setting with no initial value renders the expected template options" time="0.075">
+    <testcase classname="EditSettingValue edit template setting with no initial value renders the expected template options" name="EditSettingValue edit template setting with no initial value renders the expected template options" time="0.064">
     </testcase>
     <testcase classname="EditSettingValue edit template setting with no initial value renders expected display item in template dropdown" name="EditSettingValue edit template setting with no initial value renders expected display item in template dropdown" time="0.017">
     </testcase>
-    <testcase classname="EditSettingValue edit template setting with initial value renders the edit field" name="EditSettingValue edit template setting with initial value renders the edit field" time="0.021">
+    <testcase classname="EditSettingValue edit template setting with initial value renders the edit field" name="EditSettingValue edit template setting with initial value renders the edit field" time="0.017">
     </testcase>
-    <testcase classname="EditSettingValue edit template setting with initial value renders the expected template options" name="EditSettingValue edit template setting with initial value renders the expected template options" time="0.082">
+    <testcase classname="EditSettingValue edit template setting with initial value renders the expected template options" name="EditSettingValue edit template setting with initial value renders the expected template options" time="0.065">
     </testcase>
-    <testcase classname="EditSettingValue edit template setting with initial value renders expected display item in template dropdown" name="EditSettingValue edit template setting with initial value renders expected display item in template dropdown" time="0.022">
+    <testcase classname="EditSettingValue edit template setting with initial value renders expected display item in template dropdown" name="EditSettingValue edit template setting with initial value renders expected display item in template dropdown" time="0.016">
     </testcase>
   </testsuite>
-  <testsuite name="SettingField" errors="0" failures="0" skipped="0" timestamp="2022-03-08T11:38:31" time="14.765" tests="3">
-    <testcase classname="SettingField renders RenderSettingValue" name="SettingField renders RenderSettingValue" time="0.05">
+  <testsuite name="SettingField" errors="0" failures="0" skipped="0" timestamp="2022-03-09T12:00:43" time="12.24" tests="3">
+    <testcase classname="SettingField renders RenderSettingValue" name="SettingField renders RenderSettingValue" time="0.07">
     </testcase>
-    <testcase classname="SettingField renders the edit button" name="SettingField renders the edit button" time="0.008">
+    <testcase classname="SettingField renders the edit button" name="SettingField renders the edit button" time="0.007">
     </testcase>
-    <testcase classname="SettingField clicking edit/save works as expected" name="SettingField clicking edit/save works as expected" time="0.138">
+    <testcase classname="SettingField clicking edit/save works as expected" name="SettingField clicking edit/save works as expected" time="0.127">
     </testcase>
   </testsuite>
 </testsuites>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k-int/stripes-kint-components",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "Stripes Component library for K-Int specific applications",
   "sideEffects": [
     "*.css"

package/src/artifacts/coverage-jest/lcov-report/ActionList/ActionList.js.html

@@ -262,7 +262,7 @@ export default ActionList;
             <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 Tue Mar 08 2022 11:38:49 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>

package/src/artifacts/coverage-jest/lcov-report/ActionList/ActionListFieldArray.js.html

@@ -898,7 +898,7 @@ export default ActionListFieldArray;
             <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 Tue Mar 08 2022 11:38:49 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>

package/src/artifacts/coverage-jest/lcov-report/ActionList/index.html

@@ -131,7 +131,7 @@
             <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 Tue Mar 08 2022 11:38:49 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>

package/src/artifacts/coverage-jest/lcov-report/ActionList/index.js.html

@@ -73,7 +73,7 @@
             <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 Tue Mar 08 2022 11:38:49 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>

package/src/artifacts/coverage-jest/lcov-report/CustomProperties/Config/CustomPropertiesLookup.js.html

@@ -308,7 +308,7 @@ const CustomPropertiesLookup = <span class="cstat-no" title="statement not cover
   queryParams
 }) =&gt; {
   const [nsValues, setNsValues] = <span class="cstat-no" title="statement not covered" >useState({</span>
-    sort: 'id'
+    sort: 'label'
   });
   const [selectedContext, setSelectedContext] = <span class="cstat-no" title="statement not covered" >useState();</span>
 &nbsp;
@@ -403,7 +403,7 @@ export default CustomPropertiesLookup;
             <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 Tue Mar 08 2022 11:38:49 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>

package/src/artifacts/coverage-jest/lcov-report/CustomProperties/Config/CustomPropertiesSettings.js.html

@@ -790,7 +790,7 @@ export default CustomPropertiesSettings;
             <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 Tue Mar 08 2022 11:38:49 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>

package/src/artifacts/coverage-jest/lcov-report/CustomProperties/Config/CustomPropertiesView.js.html

@@ -520,7 +520,7 @@ export default CustomPropertiesView;
             <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 Tue Mar 08 2022 11:38:49 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>

package/src/artifacts/coverage-jest/lcov-report/CustomProperties/Config/CustomPropertyForm.js.html

@@ -958,7 +958,7 @@ export default CustomPropertyForm;
             <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 Tue Mar 08 2022 11:38:49 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>

package/src/artifacts/coverage-jest/lcov-report/CustomProperties/Config/index.html

@@ -161,7 +161,7 @@
             <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 Tue Mar 08 2022 11:38:49 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>