@k-int/stripes-kint-components 5.7.1 → 5.8.1

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [5.8.1](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.8.0...v5.8.1) (2024-07-22)
+
+
+### Bug Fixes
+
+* NumberField treating 0 as undefined ([75bd7d3](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/75bd7d33c77f103df6dd0efdde059b90dc3a9b8f))
+
+# [5.8.0](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.7.1...v5.8.0) (2024-06-27)
+
+
+### Bug Fixes
+
+* Add default MCLProps to TableBody to fix issue with SASQRoute (or below) not being passed mclProps ([af4a143](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/af4a14368621f8194e7a656c4e01355b8b9eff50))
+* **deps:** update dependency react-resize-detector to v11 ([5c3f22a](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/5c3f22ac702c8eafe556f2dd61ed787c0961b53e))
+* NumberField could not initialise with a previous input ([adc21e4](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/adc21e4f9b2aa2d262ed0358cbb07cf771f45408))
+
+
+### Features
+
+* added ability for generateKiwtQueryParams sortKeys to contain multiple terms, eg `columnName: 'name, description'` ([1f5df10](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/1f5df103b14e3cabf450809bba6cefef8892a3d7))
+* NumberField ([c428844](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/c4288449e0a84bbf17f2bdb05250f36642e44e51))
+
 ## [5.7.1](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.7.0...v5.7.1) (2024-06-27)
 
 

package/es/index.js

@@ -49,7 +49,8 @@ var _exportNames = {
   FormattedKintMessage: true,
   ResponsiveButtonGroup: true,
   SettingsFormContainer: true,
-  ComboButton: true
+  ComboButton: true,
+  NumberField: true
 };
 Object.defineProperty(exports, "ActionList", {
   enumerable: true,
@@ -201,6 +202,12 @@ Object.defineProperty(exports, "NoResultsMessage", {
     return _NoResultsMessage.default;
   }
 });
+Object.defineProperty(exports, "NumberField", {
+  enumerable: true,
+  get: function () {
+    return _NumberField.default;
+  }
+});
 Object.defineProperty(exports, "QueryTypedown", {
   enumerable: true,
   get: function () {
@@ -392,6 +399,7 @@ var _FormattedKintMessage = _interopRequireDefault(require("./lib/FormattedKintM
 var _ResponsiveButtonGroup = _interopRequireDefault(require("./lib/ResponsiveButtonGroup"));
 var _SettingsFormContainer = _interopRequireDefault(require("./lib/SettingsFormContainer"));
 var _ComboButton = _interopRequireDefault(require("./lib/ComboButton"));
+var _NumberField = _interopRequireDefault(require("./lib/NumberField"));
 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(e) { return e && e.__esModule ? e : { default: e }; }

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

@@ -11,6 +11,7 @@ var _components = require("@folio/stripes/components");
 var _validators = require("../../validators");
 var _customProperties = require("../../constants/customProperties");
 var _hooks = require("../../hooks");
+var _NumberField = _interopRequireDefault(require("../../NumberField"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const CustomPropertyForm = _ref => {
@@ -250,7 +251,7 @@ const CustomPropertyForm = _ref => {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Col, {
         xs: 3,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
-          component: _components.TextField,
+          component: _NumberField.default,
           id: "custom-prop-weight",
           label: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             children: [kintIntl.formatKintMessage({
@@ -262,7 +263,6 @@ const CustomPropertyForm = _ref => {
           }),
           name: "weight",
           required: true,
-          type: "number",
           validate: _validators.required
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Col, {

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

@@ -10,6 +10,7 @@ var _orderBy = _interopRequireDefault(require("lodash/orderBy"));
 var _components = require("@folio/stripes/components");
 var CUSTOM_PROPERTY_TYPES = _interopRequireWildcard(require("../../constants/customProperties"));
 var _hooks = require("../../hooks");
+var _NumberField = _interopRequireDefault(require("../../NumberField"));
 var _jsxRuntime = require("react/jsx-runtime");
 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; }
@@ -179,11 +180,10 @@ const CustomPropertyField = _ref => {
       case CUSTOM_PROPERTY_TYPES.INTEGER_CLASS_NAME:
       case CUSTOM_PROPERTY_TYPES.DECIMAL_CLASS_NAME:
         fieldProps = {
-          component: _components.TextField,
+          component: _NumberField.default,
           max,
           min,
-          step: 'any',
-          type: 'number'
+          step: 'any'
         };
         handleChange = e => {
           onChange({
@@ -192,7 +192,7 @@ const CustomPropertyField = _ref => {
               ...currentValue,
               _delete: e.target.value === '' ? true : undefined,
               // Delete customProperty if removing the value.
-              value: parseFloat(e.target.value)
+              value: e.target.value
             }]
           });
         };

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

@@ -29,6 +29,10 @@ const EditSettingValue = props => {
   }, {
     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
@@ -37,10 +41,6 @@ const EditSettingValue = props => {
       if (refdata.length > 0 && refdata.length <= 4) {
         RefdataComponent = _RefdataButtons.default;
       }
-
-      // 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 /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
         "aria-label": fieldLabel,
         component: RefdataComponent,

package/es/lib/NumberField/NumberField.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _noop = _interopRequireDefault(require("lodash/noop"));
+var _components = require("@folio/stripes/components");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const NumberField = props => {
+  const {
+    onChange: passedOnChange = _noop.default,
+    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] = (0, _react.useState)(value ?? input?.value);
+  const inputRef = (0, _react.useRef)();
+  const userInputRef = (0, _react.useRef)();
+  const [numValue, setNumValue] = (0, _react.useState)('');
+  const changeField = val => {
+    (0, _components.nativeChangeFieldValue)(inputRef, false, val);
+  };
+
+  // Allow direct control of field
+  (0, _react.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 || parsedValue === 0) {
+      setNumValue(parsedValue);
+      changeField(parsedValue);
+    } else {
+      setNumValue('');
+      changeField('');
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextField, {
+      ref: userInputRef,
+      ...rest,
+      // Keep an eye on this
+      onChange: handleUserChange,
+      type: "number",
+      value: forceControl
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      ref: inputRef,
+      ...input,
+      hidden: true,
+      onChange: handleChange,
+      type: "number",
+      value: numValue
+    })]
+  });
+};
+NumberField.propTypes = {
+  onChange: _propTypes.default.func,
+  input: _propTypes.default.shape({
+    onChange: _propTypes.default.func.isRequired,
+    value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
+  }),
+  value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
+};
+var _default = exports.default = NumberField;

package/es/lib/NumberField/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _NumberField.default;
+  }
+});
+var _NumberField = _interopRequireDefault(require("./NumberField"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k-int/stripes-kint-components",
-  "version": "5.7.1",
+  "version": "5.8.1",
   "description": "Stripes Component library for K-Int specific applications",
   "sideEffects": [
     "*.css"
@@ -9,7 +9,7 @@
   "scripts": {
     "lint": "eslint src --resolve-plugins-relative-to ./node_modules/@folio/eslint-config-stripes/",
     "test": "yarn run test:jest",
-    "test:jest": "jest --ci --coverage",
+    "test:jest": "jest --ci --coverage --maxWorkers=50%",
     "build:es": "rm -rf ./es && babel --extensions .js --ignore ./src/**/tests/**/* ./src --out-dir es",
     "build": "yarn build:es",
     "clean": "rm -rf ./node_modules ./*/node_modules ./yarn.lock && yarn install --ignore-scripts",
@@ -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 || parsedValue === 0) {
+      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/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');
   }