@k-int/stripes-kint-components 5.7.0 → 5.8.0

package/es/lib/hooks/index.js

@@ -143,4 +143,4 @@ var _useSASQQueryMeta = _interopRequireDefault(require("./useSASQQueryMeta"));
 var _useModConfigEntries = _interopRequireDefault(require("./useModConfigEntries"));
 var _useMutateModConfigEntry = _interopRequireDefault(require("./useMutateModConfigEntry"));
 var _useActionListRef = _interopRequireDefault(require("./useActionListRef"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/es/lib/hooks/typedownHooks/index.js

@@ -24,4 +24,4 @@ Object.defineProperty(exports, "useTypedownToggle", {
 var _useTypedown = _interopRequireDefault(require("./useTypedown"));
 var _useTypedownToggle = _interopRequireDefault(require("./useTypedownToggle"));
 var _useTypedownData = _interopRequireDefault(require("./useTypedownData"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/es/lib/hooks/typedownHooks/useTypedown.js

@@ -10,7 +10,7 @@ var _components = require("@folio/stripes/components");
 var _eventCodes = require("../../constants/eventCodes");
 var _selectorSafe = _interopRequireDefault(require("../../utils/selectorSafe"));
 var _useTypedownToggle = _interopRequireDefault(require("./useTypedownToggle"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const useTypedown = name => {
   // SEARCHFIELD COMPONENT
   const searchFieldComponent = document.getElementById(`typedown-searchField-${(0, _selectorSafe.default)(name)}`);

package/es/lib/hooks/typedownHooks/useTypedownToggle.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _react = require("react");
 var _useActiveElement = _interopRequireDefault(require("../useActiveElement"));
 var _selectorSafe = _interopRequireDefault(require("../../utils/selectorSafe"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const useTypedownToggle = name => {
   const [open, setOpen] = (0, _react.useState)(false);
   const onToggle = (0, _react.useCallback)(() => {

package/es/lib/hooks/useCustomProperties.js

@@ -8,7 +8,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactQuery = require("react-query");
 var _core = require("@folio/stripes/core");
 var _utils = require("../utils");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const useCustomProperties = _ref => {
   let {
     endpoint,

package/es/lib/hooks/useHelperApp.js

@@ -9,7 +9,7 @@ var _reactRouterDom = require("react-router-dom");
 var _queryString = _interopRequireDefault(require("query-string"));
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 let helperObject = {};

package/es/lib/hooks/useIntlKey.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _useIntlKeyStore = _interopRequireDefault(require("./useIntlKeyStore"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const useIntlKey = (passedIntlKey, passedIntlNS) => {
   const getKey = (0, _useIntlKeyStore.default)(state => state.getKey);
   let intlKey;

package/es/lib/hooks/useKintIntl.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _reactIntl = require("react-intl");
 var _useIntlKey = _interopRequireDefault(require("./useIntlKey"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /* A hook to enrich the intl object we get from useIntl */
 const useKintIntl = (passedIntlKey, passedIntlNS) => {
   const intlObj = (0, _reactIntl.useIntl)();

package/es/lib/hooks/useKiwtSASQuery.js

@@ -8,7 +8,7 @@ var _react = require("react");
 var _reactRouterDom = require("react-router-dom");
 var _buildUrl = _interopRequireDefault(require("../utils/buildUrl"));
 var _useQIndex = _interopRequireDefault(require("./useQIndex"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const locationQuerySetter = _ref => {
   let {
     location,

package/es/lib/hooks/useModConfigEntries.js

@@ -9,7 +9,7 @@ var _reactQuery = require("react-query");
 var _core = require("@folio/stripes/core");
 var _utils = require("../utils");
 var _endpoints = require("../constants/endpoints");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const useModConfigEntries = _ref => {
   let {
     configName,

package/es/lib/hooks/useMutateRefdataCategory.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _reactQuery = require("react-query");
 var _core = require("@folio/stripes/core");
 var _useInvalidateRefdata = _interopRequireDefault(require("./useInvalidateRefdata"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const useMutateRefdataCategory = _ref => {
   let {
     afterQueryCalls,

package/es/lib/hooks/useMutateRefdataValue.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _reactQuery = require("react-query");
 var _core = require("@folio/stripes/core");
 var _useInvalidateRefdata = _interopRequireDefault(require("./useInvalidateRefdata"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const useMutateRefdataValue = _ref => {
   let {
     afterQueryCalls,

package/es/lib/hooks/useQIndex.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactRouterDom = require("react-router-dom");
 var _queryString = _interopRequireDefault(require("query-string"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useQIndex = () => {

package/es/lib/hooks/useRefdata.js

@@ -8,7 +8,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactQuery = require("react-query");
 var _core = require("@folio/stripes/core");
 var _utils = require("../utils");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const useRefdata = _ref => {
   let {
     endpoint,

package/es/lib/hooks/useTemplates.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactQuery = require("react-query");
 var _core = require("@folio/stripes/core");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const useTemplates = _ref => {
   let {
     context,

package/es/lib/settingsHooks/index.js

@@ -24,4 +24,4 @@ Object.defineProperty(exports, "useSettings", {
 var _useSettings = _interopRequireDefault(require("./useSettings"));
 var _useSettingSection = _interopRequireDefault(require("./useSettingSection"));
 var _useAppSettings = _interopRequireDefault(require("./useAppSettings"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/es/lib/settingsHooks/useSettings.js

@@ -14,7 +14,7 @@ var _contexts = require("../contexts");
 var _utils = require("../utils");
 var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const useSettings = _ref => {
   let {
     allowGlobalEdit = true,

package/es/lib/utils/buildUrl.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = buildUrl;
 var _queryString = _interopRequireDefault(require("query-string"));
 var _lodash = require("lodash");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // File copied from https://github.com/folio-org/stripes-smart-components/blob/master/lib/SearchAndSort/buildUrl.js
 
 function removeEmpty(obj) {

package/es/lib/utils/filterParsers/index.js

@@ -45,4 +45,4 @@ var _parseKiwtQueryFilters = _interopRequireWildcard(require("./parseKiwtQueryFi
 var _deparseKiwtQueryFilters = _interopRequireWildcard(require("./deparseKiwtQueryFilters"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/es/lib/utils/filterParsers/parseKiwtQueryFilters.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.parseKiwtQueryFiltersRecursive = exports.default = void 0;
 var _parseKiwtQueryGroups = _interopRequireDefault(require("./parseKiwtQueryGroups"));
 var _parseKiwtQueryString = _interopRequireDefault(require("./parseKiwtQueryString"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // This is an amalgam of parseKiwtQueryGroups, which splits up grouped queries
 // and parseKiwtQueryString, which figures out comparator vs attribute, etc
 

package/es/lib/utils/filterParsers/parseKiwtQueryGroups.test.js

@@ -1,7 +1,7 @@
 "use strict";
 
 var _parseKiwtQueryGroups = _interopRequireDefault(require("./parseKiwtQueryGroups"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 describe('parseKiwtQueryGroups', () => {
   it('handles simple queries without parens', () => {
     const result = (0, _parseKiwtQueryGroups.default)('foo==bar');

package/es/lib/utils/filterParsers/parseKiwtQueryString.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _comparators = _interopRequireDefault(require("../../constants/comparators"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /*
  * This is designed to take a SINGLE query string of the form
  * attribute == value, or attribute isEmpty, or attribute ~= value, etc

package/es/lib/utils/generateKiwtQuery.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _generateKiwtQueryParams = _interopRequireDefault(require("./generateKiwtQueryParams"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const generateKiwtQuery = function (options, nsValues) {
   let encode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   const paramsArray = (0, _generateKiwtQueryParams.default)(options, nsValues, encode);

package/es/lib/utils/generateKiwtQueryParams.js

@@ -160,13 +160,22 @@ const generateKiwtQueryParams = function (options, nsValues) {
   }
   if (sort) {
     paramsArray.push(...(sort.trim()?.split(',') ?? []).map(sortKey => {
-      const descending = sortKey.startsWith('-');
+      const reverse = sortKey.startsWith('-');
       let term = sortKey.replace('-', '');
       if (term in sortKeys) {
         term = term.replace(term, sortKeys[term]);
       }
-      const sortString = `${term};${descending ? 'desc' : 'asc'}`;
-      return `sort=${conditionalEncodeURIComponent(sortString, encode)}`;
+
+      // Split the term by commas to handle multiple fields if specified
+      const fields = term.split(',');
+      const sortStrings = fields.map(field => {
+        const descending = field.startsWith('-');
+        const sortField = field.replace('-', '');
+        const sortOrder = reverse && !descending || !reverse && descending ? 'desc' : 'asc';
+        const sortString = `${sortField};${sortOrder}`;
+        return `sort=${conditionalEncodeURIComponent(sortString, encode)}`;
+      });
+      return sortStrings.join('&');
     }));
   }
   if (stats) {

package/es/lib/utils/highlightString.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.highlightString = exports.boldString = void 0;
 var _matchString = _interopRequireDefault(require("./matchString"));
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const highlightString = function (match, str) {
   let ignoreNull = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   let simpleSplit = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;

package/es/lib/utils/index.js

@@ -151,4 +151,4 @@ var _filterParsers = require("./filterParsers");
 var _parseErrorResponse = _interopRequireDefault(require("./parseErrorResponse"));
 var _modConfigEntriesQueryKey = _interopRequireDefault(require("./modConfigEntriesQueryKey"));
 var _parseModConfigEntry = _interopRequireDefault(require("./parseModConfigEntry"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/es/lib/utils/matchString.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _escapeRegExp = _interopRequireDefault(require("lodash/escapeRegExp"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const matchString = function (match, str) {
   let ignoreNull = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   let simpleSplit = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;

package/es/lib/validators/validators.js

@@ -7,7 +7,7 @@ exports.requiredObject = exports.required = exports.rangeUnderflow = exports.ran
 var _reactIntl = require("react-intl");
 var _FormattedKintMessage = _interopRequireDefault(require("../FormattedKintMessage"));
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const required = value => {
   const blankString = /^\s+$/;
   if (value && !blankString.test(value) || value === false || value === 0) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k-int/stripes-kint-components",
-  "version": "5.7.0",
+  "version": "5.8.0",
   "description": "Stripes Component library for K-Int specific applications",
   "sideEffects": [
     "*.css"
@@ -23,7 +23,7 @@
   "dependencies": {
     "@rehooks/local-storage": "^2.4.4",
     "compose-function": "^3.0.3",
-    "react-resize-detector": "^10.0.0",
+    "react-resize-detector": "^11.0.0",
     "zustand": "^4.0.0"
   },
   "devDependencies": {
@@ -60,7 +60,6 @@
     "eslint-plugin-jest": "^28.0.0",
     "graphql": "^16.0.0",
     "identity-obj-proxy": "^3.0.0",
-    "moment": "^2.29.4",
     "prop-types-extra": ">=1.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -74,7 +73,7 @@
     "regenerator-runtime": "^0.14.0",
     "rxjs": "^7.0.0",
     "semantic-release": "^22.0.6",
-    "sinon": "^17.0.0"
+    "sinon": "^18.0.0"
   },
   "peerDependencies": {
     "@folio/stripes": ">=9.0.0",

package/src/index.js

@@ -111,3 +111,5 @@ export { default as ResponsiveButtonGroup } from './lib/ResponsiveButtonGroup';
 export { default as SettingsFormContainer } from './lib/SettingsFormContainer';
 
 export { default as ComboButton } from './lib/ComboButton';
+
+export { default as NumberField } from './lib/NumberField';

package/src/lib/CustomProperties/Config/CustomPropertyForm.js

@@ -22,6 +22,7 @@ import {
   DATE_CLASS_NAME
 } from '../../constants/customProperties';
 import { useKintIntl } from '../../hooks';
+import NumberField from '../../NumberField';
 
 const CustomPropertyForm = ({
   contextFilterOptions,
@@ -298,7 +299,7 @@ const CustomPropertyForm = ({
       <Row>
         <Col xs={3}>
           <Field
-            component={TextField}
+            component={NumberField}
             id="custom-prop-weight"
             label={
               <div>
@@ -316,7 +317,6 @@ const CustomPropertyForm = ({
             }
             name="weight"
             required
-            type="number"
             validate={requiredValidator}
           />
         </Col>

package/src/lib/CustomProperties/Edit/CustomPropertyField.js

@@ -17,6 +17,7 @@ import {
 import * as CUSTOM_PROPERTY_TYPES from '../../constants/customProperties';
 
 import { useKintIntl } from '../../hooks';
+import NumberField from '../../NumberField';
 
 const CustomPropertyField = ({
   availableCustomProperties,
@@ -195,11 +196,10 @@ const CustomPropertyField = ({
       case CUSTOM_PROPERTY_TYPES.INTEGER_CLASS_NAME:
       case CUSTOM_PROPERTY_TYPES.DECIMAL_CLASS_NAME:
         fieldProps = {
-          component: TextField,
+          component: NumberField,
           max,
           min,
           step: 'any',
-          type: 'number',
         };
         handleChange = e => {
           onChange({
@@ -207,7 +207,7 @@ const CustomPropertyField = ({
             [customProperty.value]: [{
               ...currentValue,
               _delete: e.target.value === '' ? true : undefined, // Delete customProperty if removing the value.
-              value: parseFloat(e.target.value)
+              value: e.target.value
             }],
           });
         };

package/src/lib/EditableSettingsList/SettingField/EditSettingValue.js

@@ -27,6 +27,10 @@ const EditSettingValue = (props) => {
     overrideValue: labelOverrides?.valueFor
   }, { name: setting.key });
 
+  // Adding default sort to refdata object in ascending order by label
+  const sortByLabel = (a, b) => (a.label.localeCompare(b.label));
+  const sortedRefdata = refdata.sort(sortByLabel);
+
   switch (setting.settingType) {
     case 'Refdata':
       // Grab refdata values corresponding to setting
@@ -36,10 +40,6 @@ const EditSettingValue = (props) => {
         RefdataComponent = RefdataButtons;
       }
 
-      // Adding default sort to refdata object in ascending order by label
-      const sortByLabel = (a, b) => (a.label.localeCompare(b.label));
-      const sortedRefdata = refdata.sort(sortByLabel);
-
       return (
         <Field
           aria-label={fieldLabel}

package/src/lib/NumberField/NumberField.js

@@ -0,0 +1,113 @@
+import {
+  useEffect,
+  useRef,
+  useState
+} from 'react';
+import PropTypes from 'prop-types';
+import noop from 'lodash/noop';
+
+import {
+  nativeChangeFieldValue as nativeChangeField,
+  TextField
+} from '@folio/stripes/components';
+
+
+const NumberField = (props) => {
+  const {
+    onChange: passedOnChange = noop,
+    input,
+    value,
+    ...rest
+  } = props;
+
+  // Treat TextField ALWAYS as a controlled component, whether or not NumberField itself is controlled
+  // This enforces the behaviour whereby 1e2 -> 100 in the typed field automatically
+  const [forceControl, setForceControl] = useState(value ?? input?.value);
+
+  const inputRef = useRef();
+  const userInputRef = useRef();
+
+  const [numValue, setNumValue] = useState('');
+
+  const changeField = (val) => {
+    nativeChangeField(inputRef, false, val);
+  };
+
+  // Allow direct control of field
+  useEffect(() => {
+    if (value && numValue !== value) {
+      setNumValue(value);
+    }
+
+    if (numValue && forceControl !== numValue) {
+      setForceControl(numValue);
+    }
+  }, [forceControl, numValue, value]);
+
+  const handleChange = (e) => {
+    // Actually set the value in the form
+    if (input?.onChange) {
+      input.onChange(e);
+    }
+
+    // Set the forced control (this may be wiped by passedOnChange)
+    setForceControl(e.target.value);
+
+    // If the user has set up an onChange, this will ensure that that fires
+    if (passedOnChange) {
+      passedOnChange(e, e.target.value);
+    }
+  };
+
+
+
+  const handleUserChange = (e) => {
+    const parsedValue = parseFloat(e.target.value);
+
+    // ReturnValue needed for contorlled components
+    if (parsedValue) {
+      setNumValue(parsedValue);
+      changeField(parsedValue);
+    } else {
+      setNumValue('');
+      changeField('');
+    }
+  };
+
+  return (
+    <>
+      <TextField
+        ref={userInputRef}
+        {...rest} // Keep an eye on this
+        onChange={handleUserChange}
+        type="number"
+        value={forceControl}
+      />
+      <input
+        ref={inputRef}
+        {...input}
+        hidden
+        onChange={handleChange}
+        type="number"
+        value={numValue}
+      />
+    </>
+  );
+};
+
+NumberField.propTypes = {
+  onChange: PropTypes.func,
+  input: PropTypes.shape({
+    onChange: PropTypes.func.isRequired,
+    value: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.string
+    ])
+  }),
+  value: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string
+  ])
+};
+
+export default NumberField;

package/src/lib/NumberField/index.js

@@ -0,0 +1,3 @@
+export { default } from './NumberField';
+
+

package/src/lib/SASQLookupComponent/TableBody/TableBody.js

@@ -22,7 +22,7 @@ const TableBody = ({
   mclProps: {
     formatter = {},
     ...mclProps
-  },
+  } = {},
   onSort,
   path,
   resultColumns,

package/src/lib/utils/generateKiwtQueryParams.js

@@ -157,19 +157,28 @@ const generateKiwtQueryParams = (options, nsValues, encode = true) => {
 
   if (sort) {
     paramsArray.push(...(sort.trim()?.split(',') ?? []).map(sortKey => {
-      const descending = sortKey.startsWith('-');
+      const reverse = sortKey.startsWith('-');
       let term = sortKey.replace('-', '');
 
       if (term in sortKeys) {
         term = term.replace(term, sortKeys[term]);
       }
 
-      const sortString = `${term};${descending ? 'desc' : 'asc'}`;
-
-      return `sort=${conditionalEncodeURIComponent(sortString, encode)}`;
+      // Split the term by commas to handle multiple fields if specified
+      const fields = term.split(',');
+      const sortStrings = fields.map(field => {
+        const descending = field.startsWith('-');
+        const sortField = field.replace('-', '');
+        const sortOrder = (reverse && !descending) || (!reverse && descending) ? 'desc' : 'asc';
+        const sortString = `${sortField};${sortOrder}`;
+        return `sort=${conditionalEncodeURIComponent(sortString, encode)}`;
+      });
+
+      return sortStrings.join('&');
     }));
   }
 
+
   if (stats) {
     paramsArray.push('stats=true');
   }