@k-int/stripes-kint-components 5.34.1 → 5.36.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [5.36.0](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.35.0...v5.36.0) (2026-04-16)
+
+
+### Features
+
+* **Files:** useFileHandlers/FileUploader/FileView ([afb03e5](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/afb03e5b88d8f5f4471645cf958837b46b6babea))
+
+# [5.35.0](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.34.1...v5.35.0) (2026-04-13)
+
+
+### Features
+
+* Add native abillity for non-filter pane implementations to render filter and search components in body ([496cbff](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/496cbff96641c0b46cd06a53d9e79c4d8d1564b3))
+* useMutateTemplates.js ([76da3d9](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/76da3d99aa31e3e1835af54c3189bd0ff98f604c))
+
 ## [5.34.1](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.34.0...v5.34.1) (2026-03-23)
 
 

package/es/index.js

@@ -345,6 +345,18 @@ Object.keys(_Settings).forEach(function (key) {
 });
 var _ActionList = _interopRequireDefault(require("./lib/ActionList"));
 var _Typedown = _interopRequireDefault(require("./lib/Typedown"));
+var _Files = require("./lib/Files");
+Object.keys(_Files).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Files[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Files[key];
+    }
+  });
+});
 var _QueryTypedown = _interopRequireDefault(require("./lib/QueryTypedown"));
 var _ButtonTypedown = _interopRequireDefault(require("./lib/ButtonTypedown"));
 var _SearchField = _interopRequireDefault(require("./lib/SearchField"));

package/es/lib/Files/FileUploader/FileUploader.js

@@ -0,0 +1,119 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactDropzone = require("react-dropzone");
+var _isFunction = _interopRequireDefault(require("lodash/isFunction"));
+var _bind = _interopRequireDefault(require("classnames/bind"));
+var _components = require("@folio/stripes/components");
+var _FileUploader = _interopRequireDefault(require("../../../../styles/FileUploader.css"));
+var _hooks = require("../../hooks");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const cx = _bind.default.bind(_FileUploader.default);
+
+// This is copied from stripes-data-transfer-components and tweaked
+const FileUploader = _ref => {
+  let {
+    accept,
+    children,
+    disabled,
+    dropzoneProps = {},
+    // Any additional dropzone props
+    intlKey: passedIntlKey,
+    intlNS: passedIntlNS,
+    labelOverrides = {},
+    maxFiles,
+    multiple = true,
+    onDrop,
+    onDragEnter,
+    onDragLeave
+  } = _ref;
+  const {
+    getRootProps,
+    getInputProps,
+    open,
+    isDragActive
+  } = (0, _reactDropzone.useDropzone)({
+    accept,
+    disabled,
+    multiple,
+    maxFiles,
+    noClick: true,
+    onDrop,
+    onDragEnter,
+    onDragLeave,
+    ...dropzoneProps
+  });
+  const kintIntl = (0, _hooks.useKintIntl)(passedIntlKey, passedIntlNS);
+  const updateClassName = cx({
+    upload: true,
+    activeUpload: isDragActive
+  });
+  const titleClassName = cx({
+    uploadTitle: true,
+    activeUploadTitle: isDragActive
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    "aria-disabled": disabled,
+    "data-test-file-uploader": true,
+    ...getRootProps({
+      role: 'presentation'
+    }),
+    className: updateClassName,
+    "data-testid": "fileUploader-input",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      ...getInputProps()
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: titleClassName,
+      "data-test-title": true,
+      children: isDragActive ? kintIntl.formatKintMessage({
+        id: 'files.dropToUpload',
+        overrideValue: labelOverrides.dropToUpload
+      }) : kintIntl.formatKintMessage({
+        id: 'files.dragAndDropToUpload',
+        overrideValue: labelOverrides.dragAndDropToUpload
+      })
+    }), !isDragActive && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: _FileUploader.default.secondaryArea,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+          buttonStyle: "primary",
+          disabled: disabled,
+          marginBottom0: true,
+          onClick: open,
+          children: kintIntl.formatKintMessage({
+            id: 'files.uploadButton',
+            overrideValue: labelOverrides.uploadButton
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: _FileUploader.default.children,
+        children: (0, _isFunction.default)(children) ? children(open) : children
+      })]
+    })]
+  });
+};
+FileUploader.propTypes = {
+  accept: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
+  disabled: _propTypes.default.bool,
+  // eslint-disable-next-line react/forbid-prop-types
+  dropzoneProps: _propTypes.default.object,
+  intlKey: _propTypes.default.string,
+  intlNS: _propTypes.default.string,
+  labelOverrides: _propTypes.default.shape({
+    dropToUpload: _propTypes.default.string,
+    dragAndDropToUpload: _propTypes.default.string,
+    uploadButton: _propTypes.default.string
+  }),
+  maxFiles: _propTypes.default.number,
+  multiple: _propTypes.default.bool,
+  onDrop: _propTypes.default.func.isRequired,
+  onDragEnter: _propTypes.default.func,
+  onDragLeave: _propTypes.default.func
+};
+var _default = exports.default = FileUploader;

package/es/lib/Files/FileUploader/index.js

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

package/es/lib/Files/FileView/FileView.js

@@ -0,0 +1,116 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _components = require("@folio/stripes/components");
+var _hooks = require("../../hooks");
+var _FileView = _interopRequireDefault(require("../../../../styles/FileView.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const FileView = _ref => {
+  let {
+    canDownload,
+    file,
+    onDownload,
+    intlKey: passedIntlKey,
+    intlNS: passedIntlNS,
+    labelOverrides = {},
+    onDelete
+  } = _ref;
+  const kintIntl = (0, _hooks.useKintIntl)(passedIntlKey, passedIntlNS);
+  if (!file) return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: _FileView.default.fileViewContainer,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Row, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Col, {
+        xs: 6,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.KeyValue, {
+          label: kintIntl.formatKintMessage({
+            id: 'files.filename',
+            overrideValue: labelOverrides.filename
+          }),
+          children: canDownload ?
+          /*#__PURE__*/
+          /* eslint-disable-next-line jsx-a11y/anchor-is-valid */
+          (0, _jsxRuntime.jsxs)("a", {
+            "data-test-fileview-name": true,
+            href: "#",
+            onClick: e => {
+              onDownload(file);
+              e.preventDefault();
+              e.stopPropagation();
+            },
+            rel: "noopener noreferrer",
+            style: {
+              wordBreak: 'break-all'
+            },
+            target: "_blank",
+            children: [file.name, /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
+              icon: "external-link"
+            })]
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            "data-test-fileview-name": true,
+            children: file.name
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Col, {
+        xs: 4,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.KeyValue, {
+          label: kintIntl.formatKintMessage({
+            id: 'files.uploaded',
+            overrideValue: labelOverrides.uploaded
+          }),
+          value: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            "data-test-fileview-uploaded": true,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: kintIntl.formatDate(file.modified)
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: kintIntl.formatTime(file.modified)
+            })]
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Col, {
+        xs: 2,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Tooltip, {
+          id: `file-${file?.id}-delete-button`,
+          text: kintIntl.formatKintMessage({
+            id: 'files.remove',
+            overrideValue: labelOverrides.remove
+          }),
+          children: _ref2 => {
+            let {
+              ariaIds,
+              ref
+            } = _ref2;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButton, {
+              ref: ref,
+              "aria-labelledby": ariaIds.text,
+              "data-test-fileview-delete": true,
+              icon: "trash",
+              onClick: e => {
+                e.stopPropagation();
+                onDelete(file);
+              }
+            });
+          }
+        })
+      })]
+    })
+  });
+};
+FileView.propTypes = {
+  file: _propTypes.default.shape({
+    name: _propTypes.default.string
+  }),
+  intlKey: _propTypes.default.string,
+  intlNS: _propTypes.default.string,
+  labelOverrides: _propTypes.default.shape({
+    filename: _propTypes.default.string,
+    remove: _propTypes.default.string,
+    uploaded: _propTypes.default.string
+  })
+};
+var _default = exports.default = FileView;

package/es/lib/Files/FileView/index.js

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

package/es/lib/Files/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FileUploader", {
+  enumerable: true,
+  get: function () {
+    return _FileUploader.default;
+  }
+});
+Object.defineProperty(exports, "FileView", {
+  enumerable: true,
+  get: function () {
+    return _FileView.default;
+  }
+});
+Object.defineProperty(exports, "useFileHandlers", {
+  enumerable: true,
+  get: function () {
+    return _useFileHandlers.default;
+  }
+});
+var _FileView = _interopRequireDefault(require("./FileView"));
+var _FileUploader = _interopRequireDefault(require("./FileUploader"));
+var _useFileHandlers = _interopRequireDefault(require("./useFileHandlers"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/es/lib/Files/useFileHandlers.js

@@ -0,0 +1,133 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _reactQuery = require("react-query");
+var _core = require("@folio/stripes/core");
+var _utils = require("../utils");
+// This is copied and adapted from stripes-erm-components
+
+const useFileHandlers = _ref => {
+  let {
+    // When fetchFile is true, will AUTOMATICALLY fetch not only
+    // fileMetadata but ALSO file itself
+    fetchFile = false,
+    /* fileEndpoint can be a string or
+     * {
+     *   download: string | function,
+     *   metadata: string | function
+     *   upload: string | function,
+     * }
+     */
+    fileEndpoint,
+    fileField = 'upload',
+    fileMappings = {},
+    // A mapping from file -> formData field,
+    fileId // An OPTIONAL id for a file which results in fetching and returning file metadata
+  } = _ref;
+  const ky = (0, _core.useOkapiKy)();
+
+  // A method which resolves the endpoint to hit based on fileEndpoint
+  const resolveEndpoint = (0, _react.useCallback)((type, file) => {
+    if (typeof fileEndpoint === 'string') {
+      // We have a base endpoint, configure default behaviour
+      switch (type) {
+        case 'upload':
+          return fileEndpoint;
+        case 'download':
+          return `${fileEndpoint}/${file?.id}/raw`;
+        case 'metadata':
+          return `${fileEndpoint}/${file.id}`;
+        default:
+          throw new TypeError(`Unsupported endpoint type ${type}`);
+      }
+    }
+    if (typeof fileEndpoint !== 'object') {
+      throw new TypeError(`Unsupported fileEndpoint type ${typeof fileEndpoint}`);
+    }
+    const config = fileEndpoint[type];
+    if (config === null) {
+      throw new TypeError(`Unsupported fileEndpoint[${type}] is not configured`);
+    }
+
+    // Finally we have configured behaviour
+    switch (typeof config) {
+      case 'function':
+        return config(file);
+      case 'string':
+        return config;
+      default:
+        // If we have hit the end then we've done something wrong
+        throw new TypeError(`Unsupported configuration for fileEndpoint[${type}]: ${typeof config}`);
+    }
+  }, [fileEndpoint]);
+  const {
+    mutateAsync: handleUploadFile
+  } = (0, _reactQuery.useMutation)([fileEndpoint, 'handleUpload'], file => {
+    const formData = new FormData();
+    formData.append(fileField, file);
+    Object.entries(fileMappings).forEach(_ref2 => {
+      let [key, value] = _ref2;
+      if (typeof value === 'string') {
+        formData.append(key, value);
+      } else if (typeof value === 'function') {
+        formData.append(key, value(file));
+      } else {
+        throw new TypeError('Invalid fileMapping: ' + key);
+      }
+    });
+    return ky.post(resolveEndpoint('upload', file), {
+      body: formData
+    }).json();
+  });
+  const {
+    data: fileBlob,
+    isLoading: isFileLoading,
+    refetch: refetchFile
+  } = (0, _reactQuery.useQuery)({
+    queryKey: [fileEndpoint, 'content', fileId],
+    queryFn: () => ky.get(resolveEndpoint('download', {
+      id: fileId
+    })).blob(),
+    enabled: !!fileId && typeof fileId === 'string' && fetchFile,
+    staleTime: Infinity // Assume the file won't change underneath us.
+  });
+
+  // We are declaratively fetching a file via a function, useMutation is more convenient here
+  // NOTE even if fileBlob already exists this will refetch it for download
+  const {
+    mutate: getFile,
+    mutateAsync: getFileAsync
+  } = (0, _reactQuery.useMutation)([fileEndpoint, 'getFile'], file => ky.get(resolveEndpoint('download', file)).blob());
+  const handleDownloadFile = (0, _react.useCallback)(fileMetadata => {
+    return getFileAsync(fileMetadata)
+    /* In this instance we want the file name back as it was handed in, whitespace and all */.then((0, _utils.downloadBlob)(fileMetadata.name, {
+      processWhitespace: false
+    }));
+  }, [getFileAsync]);
+  const {
+    data: fileMetadata,
+    isLoading: isFileMetadataLoading
+  } = (0, _reactQuery.useQuery)({
+    queryKey: [fileEndpoint, 'metadata', fileId],
+    queryFn: () => ky.get(resolveEndpoint('metadata', {
+      id: fileId
+    })).json(),
+    enabled: !!fileId && typeof fileId === 'string'
+  });
+  return {
+    file: fileBlob,
+    fileMetadata,
+    getFile,
+    getFileAsync,
+    handleDownloadFile,
+    handleUploadFile,
+    isFileLoading,
+    isFileMetadataLoading,
+    refetchFile
+  };
+};
+var _default = exports.default = useFileHandlers;

package/es/lib/NoResultsMessage/NoResultsMessage.js

@@ -8,19 +8,28 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactIntl = require("react-intl");
 var _components = require("@folio/stripes/components");
-var _NoResultsMessage = _interopRequireDefault(require("../../../styles/NoResultsMessage.css"));
 var _hooks = require("../hooks");
+var _NoResultsMessage = _interopRequireDefault(require("../../../styles/NoResultsMessage.css"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const NoResultsMessage = _ref => {
   let {
+    className,
+    error,
+    filters,
+    filterPaneIsVisible,
     icon: userIcon,
+    iconPresets: {
+      noTerms: noTermsIcon,
+      noTermsWhenFilterPane: noTermsWhenFilterPaneIcon,
+      noResults: noResultsIcon,
+      isLoading: isLoadingIcon,
+      error: errorIcon
+    } = {},
     intlKey: passedIntlKey,
     intlNS: passedIntlNS,
     isLoading,
     isError,
-    error,
-    filterPaneIsVisible,
     label: userLabel,
     labelOverrides = {},
     searchTerm,
@@ -34,34 +43,34 @@ const NoResultsMessage = _ref => {
       searchTerm
     }
   });
-  if (!isLoading && !searchTerm) {
+  if (!isLoading && !searchTerm && !filters) {
     // No search term and not loading
-    icon = filterPaneIsVisible ? 'arrow-left' : null;
+    icon = noTermsIcon ?? (filterPaneIsVisible ? noTermsWhenFilterPaneIcon ?? 'arrow-left' : null);
     label = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
       id: "stripes-smart-components.sas.noResults.noTerms"
     });
   } else if (!isLoading) {
     // Search term but not loading
-    icon = 'search';
+    icon = noResultsIcon ?? 'search';
     label = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
       id: "stripes-smart-components.sas.noResults.noResults"
     });
   } else if (isLoading) {
     // Loading
-    icon = 'spinner-ellipsis';
+    icon = isLoadingIcon ?? 'spinner-ellipsis';
     label = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
       id: "stripes-smart-components.sas.noResults.loading"
     });
   } else if (isError) {
     // Request failure
-    icon = 'exclamation-circle';
+    icon = errorIcon ?? 'exclamation-circle';
     label = error?.message;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: _NoResultsMessage.default.noResultsMessage,
+    className: `${className} ${_NoResultsMessage.default.noResultsMessage}`,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: _NoResultsMessage.default.noResultsMessageLabelWrap,
-      children: [(icon || userIcon) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
+      children: [(userIcon || icon) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
         icon: userIcon ?? icon,
         iconRootClass: _NoResultsMessage.default.noResultsMessageIcon
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -80,9 +89,18 @@ const NoResultsMessage = _ref => {
   });
 };
 NoResultsMessage.propTypes = {
+  className: _propTypes.default.string,
   error: _propTypes.default.object,
+  filters: _propTypes.default.string,
   filterPaneIsVisible: _propTypes.default.bool.isRequired,
   icon: _propTypes.default.string,
+  iconPresets: _propTypes.default.shape({
+    noTerms: _propTypes.default.string,
+    noTermsWhenFilterPane: _propTypes.default.string,
+    noResults: _propTypes.default.string,
+    isLoading: _propTypes.default.string,
+    error: _propTypes.default.string
+  }),
   intlKey: _propTypes.default.string,
   intlNS: _propTypes.default.string,
   isLoading: _propTypes.default.bool,