@k-int/stripes-kint-components 2.8.1 → 3.0.0

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

@@ -11,8 +11,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactIntl = require("react-intl");
-
 var _components = require("@folio/stripes/components");
 
 var _EditSettingValue = _interopRequireDefault(require("./EditSettingValue"));
@@ -25,6 +23,8 @@ var _hooks = require("../../hooks");
 
 var _utils = require("../../utils");
 
+var _renderHelpText = _interopRequireDefault(require("../../../../styles/renderHelpText.css"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -52,7 +52,11 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var SettingField = function SettingField(settingFieldProps) {
-  var onSave = settingFieldProps.onSave,
+  var passedIntlKey = settingFieldProps.intlKey,
+      passedIntlNS = settingFieldProps.intlNS,
+      _settingFieldProps$la = settingFieldProps.labelOverrides,
+      labelOverrides = _settingFieldProps$la === void 0 ? {} : _settingFieldProps$la,
+      onSave = settingFieldProps.onSave,
       _settingFieldProps$se = settingFieldProps.settingData;
   _settingFieldProps$se = _settingFieldProps$se === void 0 ? {} : _settingFieldProps$se;
   var currentSetting = _settingFieldProps$se.currentSetting;
@@ -62,10 +66,9 @@ var SettingField = function SettingField(settingFieldProps) {
       editing = _useState2[0],
       setEditing = _useState2[1];
 
-  var intl = (0, _reactIntl.useIntl)();
+  var kintIntl = (0, _hooks.useKintIntl)(passedIntlKey, passedIntlNS);
 
   var _useContext = (0, _react.useContext)(_contexts.SettingsContext),
-      intlKey = _useContext.intlKey,
       refdataEndpoint = _useContext.refdataEndpoint,
       templateEndpoint = _useContext.templateEndpoint;
 
@@ -89,13 +92,74 @@ var SettingField = function SettingField(settingFieldProps) {
     }
   });
 
+  var renderHelpText = function renderHelpText(helpTextId) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: _renderHelpText.default.help,
+      children: kintIntl.formatKintMessage({
+        id: helpTextId
+      }, {
+        b: function b(chunks) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
+            children: chunks
+          });
+        },
+        i: function i(chunks) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+            children: chunks
+          });
+        },
+        em: function em(chunks) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("em", {
+            children: chunks
+          });
+        },
+        strong: function strong(chunks) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
+            children: chunks
+          });
+        },
+        span: function span(chunks) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: chunks
+          });
+        },
+        div: function div(chunks) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: chunks
+          });
+        },
+        p: function p(chunks) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            children: chunks
+          });
+        },
+        ul: function ul(chunks) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+            children: chunks
+          });
+        },
+        ol: function ol(chunks) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("ol", {
+            children: chunks
+          });
+        },
+        li: function li(chunks) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+            children: chunks
+          });
+        }
+      })
+    });
+  };
+
   var renderEditButton = function renderEditButton() {
-    var EditText = editing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
-      id: "stripes-kint-components.settings.finishEditing"
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
-      id: "stripes-kint-components.settings.edit"
+    var EditText = editing ? kintIntl.formatKintMessage({
+      id: 'save'
+    }) : kintIntl.formatKintMessage({
+      id: 'edit'
     });
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+      marginBottom0: true,
       onClick: function onClick(e) {
         e.preventDefault();
         return editing ? onSave().then(function () {
@@ -114,17 +178,17 @@ var SettingField = function SettingField(settingFieldProps) {
     RenderFunction = _EditSettingValue.default;
   }
 
-  var id = "".concat(intlKey, ".settings.").concat((0, _utils.toCamelCase)(currentSetting.section), ".").concat((0, _utils.toCamelCase)(currentSetting.key), ".help");
+  var id = "settings.".concat((0, _utils.toCamelCase)(currentSetting.section), ".").concat((0, _utils.toCamelCase)(currentSetting.key), ".help");
 
   var renderHeaderStart = function renderHeaderStart() {
-    var settingName = Object.keys(currentSetting).length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
-      id: "".concat(intlKey, ".settings.").concat((0, _utils.toCamelCase)(currentSetting.section), ".").concat((0, _utils.toCamelCase)(currentSetting.key))
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
-      id: "stripes-kint-components.settings.settingLoading"
+    var settingName = Object.keys(currentSetting).length > 0 ? kintIntl.formatKintMessage({
+      id: "settings.".concat((0, _utils.toCamelCase)(currentSetting.section), ".").concat((0, _utils.toCamelCase)(currentSetting.key))
+    }) : kintIntl.formatKintMessage({
+      id: 'loading'
     });
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [intl.messages[id] && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.InfoPopover, {
-        content: (0, _utils.renderHelpText)(id)
+      children: [kintIntl.messageExists(id) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.InfoPopover, {
+        content: renderHelpText(id)
       }), settingName]
     });
   };
@@ -135,6 +199,9 @@ var SettingField = function SettingField(settingFieldProps) {
     roundedBorder: true,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RenderFunction, _objectSpread({
       currentSetting: currentSetting,
+      intlKey: passedIntlKey,
+      intlNS: passedIntlNS,
+      labelOverrides: labelOverrides,
       refdata: refdata,
       templates: templates
     }, settingFieldProps))

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

@@ -4,10 +4,10 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 
 var _react = _interopRequireDefault(require("react"));
 
-var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-
 require("@folio/stripes-erm-components/test/jest/__mock__");
 
+var _react2 = require("@testing-library/react");
+
 var _helpers = require("@folio/stripes-erm-components/test/jest/helpers");
 
 var _stripesTesting = require("@folio/stripes-testing");
@@ -44,16 +44,7 @@ jest.mock('./RenderSettingValue', function () {
     });
   };
 });
-jest.mock('../../hooks', function () {
-  return {
-    useRefdata: function useRefdata() {
-      return [];
-    },
-    useTemplates: function useTemplates() {
-      return [];
-    }
-  };
-});
+jest.mock('../../hooks');
 var setting = {
   id: 'ff8081817d94374a017d94449a660049',
   key: 'S3BucketName',
@@ -88,68 +79,150 @@ describe('SettingField', function () {
       }
     }, _callee);
   })));
-  it('renders RenderSettingValue', function () {
-    var _renderComponent = renderComponent,
-        getByText = _renderComponent.getByText;
-    expect(getByText('RenderSettingValue')).toBeInTheDocument();
-  });
+  it('renders RenderSettingValue', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+    var _renderComponent, getByText;
+
+    return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            _renderComponent = renderComponent, getByText = _renderComponent.getByText;
+            _context3.next = 3;
+            return (0, _react2.waitFor)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+              return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+                while (1) {
+                  switch (_context2.prev = _context2.next) {
+                    case 0:
+                      _context2.t0 = expect;
+                      _context2.next = 3;
+                      return getByText('RenderSettingValue');
+
+                    case 3:
+                      _context2.t1 = _context2.sent;
+                      return _context2.abrupt("return", (0, _context2.t0)(_context2.t1).toBeInTheDocument());
+
+                    case 5:
+                    case "end":
+                      return _context2.stop();
+                  }
+                }
+              }, _callee2);
+            })));
+
+          case 3:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
   test('renders the edit button', function () {
     (0, _stripesTesting.Button)('Edit').exists();
   });
-  it('clicking edit/save works as expected', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
-    var _renderComponent2, getByRole, findByText, editButton, finishEditing;
+  it('clicking edit/save works as expected', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee8() {
+    var _renderComponent2, findByText;
 
-    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+    return _regeneratorRuntime().wrap(function _callee8$(_context8) {
       while (1) {
-        switch (_context2.prev = _context2.next) {
+        switch (_context8.prev = _context8.next) {
           case 0:
-            _renderComponent2 = renderComponent, getByRole = _renderComponent2.getByRole, findByText = _renderComponent2.findByText; // before clicking on edit button, we should be rendering setting value
-
-            _context2.t0 = expect;
-            _context2.next = 4;
-            return findByText('RenderSettingValue');
-
-          case 4:
-            _context2.t1 = _context2.sent;
-            (0, _context2.t0)(_context2.t1).toBeInTheDocument();
-            // Clicking edit button
-            editButton = getByRole('button', {
-              name: /Edit/i
-            });
-            expect(editButton).toBeInTheDocument();
-
-            _userEvent.default.click(editButton); // Should be rendering the "edit" for a setting value
-
-
-            _context2.t2 = expect;
-            _context2.next = 12;
-            return findByText('EditSettingValue');
-
-          case 12:
-            _context2.t3 = _context2.sent;
-            (0, _context2.t2)(_context2.t3).toBeInTheDocument();
-            // Clicking finish editing button
-            finishEditing = getByRole('button', {
-              name: /Finish editing/i
-            });
-            expect(finishEditing).toBeInTheDocument();
-
-            _userEvent.default.click(finishEditing); // Should be rendering the setting value again
-
-
-            _context2.t4 = expect;
-            _context2.next = 20;
-            return findByText('RenderSettingValue');
-
-          case 20:
-            _context2.t5 = _context2.sent;
-            (0, _context2.t4)(_context2.t5).toBeInTheDocument();
+            _renderComponent2 = renderComponent, findByText = _renderComponent2.findByText; // before clicking on edit button, we should be rendering setting value
+
+            _context8.next = 3;
+            return (0, _react2.waitFor)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
+              return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+                while (1) {
+                  switch (_context4.prev = _context4.next) {
+                    case 0:
+                      _context4.t0 = expect;
+                      _context4.next = 3;
+                      return findByText('RenderSettingValue');
+
+                    case 3:
+                      _context4.t1 = _context4.sent;
+                      return _context4.abrupt("return", (0, _context4.t0)(_context4.t1).toBeInTheDocument());
+
+                    case 5:
+                    case "end":
+                      return _context4.stop();
+                  }
+                }
+              }, _callee4);
+            })));
+
+          case 3:
+            _context8.next = 5;
+            return (0, _stripesTesting.Button)('Edit').click();
+
+          case 5:
+            _context8.next = 7;
+            return (0, _react2.waitFor)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
+              return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+                while (1) {
+                  switch (_context5.prev = _context5.next) {
+                    case 0:
+                      _context5.t0 = expect;
+                      _context5.next = 3;
+                      return findByText('EditSettingValue');
+
+                    case 3:
+                      _context5.t1 = _context5.sent;
+                      return _context5.abrupt("return", (0, _context5.t0)(_context5.t1).toBeInTheDocument());
+
+                    case 5:
+                    case "end":
+                      return _context5.stop();
+                  }
+                }
+              }, _callee5);
+            })));
+
+          case 7:
+            _context8.next = 9;
+            return (0, _react2.waitFor)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
+              return _regeneratorRuntime().wrap(function _callee6$(_context6) {
+                while (1) {
+                  switch (_context6.prev = _context6.next) {
+                    case 0:
+                      _context6.next = 2;
+                      return (0, _stripesTesting.Button)('Save').click();
+
+                    case 2:
+                    case "end":
+                      return _context6.stop();
+                  }
+                }
+              }, _callee6);
+            })));
+
+          case 9:
+            _context8.next = 11;
+            return (0, _react2.waitFor)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7() {
+              return _regeneratorRuntime().wrap(function _callee7$(_context7) {
+                while (1) {
+                  switch (_context7.prev = _context7.next) {
+                    case 0:
+                      _context7.t0 = expect;
+                      _context7.next = 3;
+                      return findByText('RenderSettingValue');
+
+                    case 3:
+                      _context7.t1 = _context7.sent;
+                      return _context7.abrupt("return", (0, _context7.t0)(_context7.t1).toBeInTheDocument());
+
+                    case 5:
+                    case "end":
+                      return _context7.stop();
+                  }
+                }
+              }, _callee7);
+            })));
 
-          case 22:
+          case 11:
           case "end":
-            return _context2.stop();
+            return _context8.stop();
         }
       }
-    }, _callee2);
+    }, _callee8);
   })));
 });

package/es/lib/FormModal/FormModal.js

@@ -9,14 +9,14 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactFinalForm = require("react-final-form");
 
-var _reactIntl = require("react-intl");
-
 var _components = require("@folio/stripes/components");
 
+var _hooks = require("../hooks");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _excluded = ["footer", "onClose"],
-    _excluded2 = ["children", "labelOverrides", "modalProps", "onSubmit"];
+    _excluded2 = ["children", "intlKey", "intlNS", "labelOverrides", "modalProps", "onSubmit"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -32,6 +32,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 var FormModal = function FormModal(_ref) {
   var _children = _ref.children,
+      passedIntlKey = _ref.intlKey,
+      passedIntlNS = _ref.intlNS,
       _ref$labelOverrides = _ref.labelOverrides,
       labelOverrides = _ref$labelOverrides === void 0 ? {} : _ref$labelOverrides,
       _ref$modalProps = _ref.modalProps,
@@ -41,6 +43,7 @@ var FormModal = function FormModal(_ref) {
       onSubmit = _ref.onSubmit,
       formProps = _objectWithoutProperties(_ref, _excluded2);
 
+  var kintIntl = (0, _hooks.useKintIntl)(passedIntlKey, passedIntlNS);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Form, _objectSpread(_objectSpread({
     onSubmit: onSubmit
   }, formProps), {}, {
@@ -57,8 +60,6 @@ var FormModal = function FormModal(_ref) {
       };
 
       var renderFooter = function renderFooter() {
-        var _labelOverrides$save, _labelOverrides$cance;
-
         if (footer) {
           return footer({
             formState: formState,
@@ -77,14 +78,16 @@ var FormModal = function FormModal(_ref) {
             marginBottom0: true,
             onClick: handleSubmit,
             type: "submit",
-            children: (_labelOverrides$save = labelOverrides.save) !== null && _labelOverrides$save !== void 0 ? _labelOverrides$save : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
-              id: "stripes-kint-components.saveAndClose"
+            children: kintIntl.formatKintMessage({
+              id: 'saveAndClose',
+              overrideValue: labelOverrides.saveAndClose
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
             marginBottom0: true,
             onClick: handleClose,
-            children: (_labelOverrides$cance = labelOverrides.cancel) !== null && _labelOverrides$cance !== void 0 ? _labelOverrides$cance : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
-              id: "stripes-kint-components.cancel"
+            children: kintIntl.formatKintMessage({
+              id: 'cancel',
+              overrideValue: labelOverrides.cancel
             })
           })]
         });
@@ -106,6 +109,8 @@ var FormModal = function FormModal(_ref) {
 
 FormModal.propTypes = {
   children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node, _propTypes.default.func]),
+  intlKey: _propTypes.default.string,
+  intlNS: _propTypes.default.string,
   labelOverrides: _propTypes.default.object,
   modalProps: _propTypes.default.shape({
     footer: _propTypes.default.func,

package/es/lib/FormattedKintMessage/FormattedKintMessage.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactIntl = require("react-intl");
+
+var _hooks = require("../hooks");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _excluded = ["fallbackMessage", "id", "intlKey", "intlNS", "overrideValue"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+// This works analogously to useKintIntl's "formatKintMessage"
+var FormattedKintMessage = function FormattedKintMessage(_ref) {
+  var _intlObj$messages2;
+
+  var fallbackMessage = _ref.fallbackMessage,
+      id = _ref.id,
+      passedIntlKey = _ref.intlKey,
+      passedIntlNS = _ref.intlNS,
+      overrideValue = _ref.overrideValue,
+      formattedMessageProps = _objectWithoutProperties(_ref, _excluded);
+
+  var intlKey = (0, _hooks.useIntlKey)(passedIntlKey, passedIntlNS);
+  var intlObj = (0, _reactIntl.useIntl)();
+
+  if (overrideValue) {
+    var _intlObj$messages;
+
+    // Version 3 is a breaking change, where labelOverrides must be strings.
+    if (typeof overrideValue !== 'string') {
+      throw new Error('Override values must be strings as of stripes-kint-components ^3.0.0');
+    }
+
+    if ((_intlObj$messages = intlObj.messages) !== null && _intlObj$messages !== void 0 && _intlObj$messages[overrideValue]) {
+      // We've been passed a key as an override, return formattedMessage with it
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, _objectSpread({
+        id: overrideValue
+      }, formattedMessageProps));
+    } // At this stage we have an overrideValue that's not a key, return it.
+
+
+    return overrideValue;
+  } // If key does not exist in intl, and we have a specified "fallbackMessage", use that
+  // (FallbackMessage works like defaultMessage but with no warning)
+
+
+  if (!((_intlObj$messages2 = intlObj.messages) !== null && _intlObj$messages2 !== void 0 && _intlObj$messages2["".concat(intlKey, ".").concat(id)]) && fallbackMessage) {
+    var _intlObj$messages3;
+
+    // Allow fallback message to be an intl key
+    if ((_intlObj$messages3 = intlObj.messages) !== null && _intlObj$messages3 !== void 0 && _intlObj$messages3[fallbackMessage]) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, _objectSpread({
+        id: fallbackMessage
+      }, formattedMessageProps));
+    }
+
+    return fallbackMessage;
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, _objectSpread({
+    id: "".concat(intlKey, ".").concat(id)
+  }, formattedMessageProps));
+};
+
+FormattedKintMessage.propTypes = {
+  fallbackMessage: _propTypes.default.string,
+  id: _propTypes.default.string.isRequired,
+  intlKey: _propTypes.default.string,
+  intlNS: _propTypes.default.string,
+  overrideValue: _propTypes.default.string
+};
+var _default = FormattedKintMessage;
+exports.default = _default;

package/es/lib/FormattedKintMessage/index.js

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

package/es/lib/IconSelect/IconSelect.js

@@ -13,14 +13,14 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _reactIntl = require("react-intl");
-
 var _components = require("@folio/stripes/components");
 
 var _IconSelect = _interopRequireDefault(require("../../../styles/IconSelect.css"));
 
 var _RichSelect = _interopRequireWildcard(require("../RichSelect"));
 
+var _FormattedKintMessage = _interopRequireDefault(require("../FormattedKintMessage"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _excluded = ["className"];
@@ -70,24 +70,28 @@ var IconSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       id = _ref.id,
       input = _ref.input,
+      passedIntlKey = _ref.intlKey,
+      passedIntlNS = _ref.intlNS,
       label = _ref.label,
       meta = _ref.meta,
-      _ref$notSet = _ref.notSet,
-      notSet = _ref$notSet === void 0 ? {
-    icon: 'ellipsis',
-    value: '',
-    label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
-      id: "stripes-kint-components.iconSelect.notSet"
-    })
-  } : _ref$notSet,
+      notSet = _ref.notSet,
       onChange = _ref.onChange,
       _ref$options = _ref.options,
       userOptions = _ref$options === void 0 ? [] : _ref$options,
       _ref$required = _ref.required,
       required = _ref$required === void 0 ? false : _ref$required,
       value = _ref.value;
-  // Options with notSet
-  var options = [notSet].concat(_toConsumableArray(userOptions));
+  var defaultNotSet = {
+    icon: 'ellipsis',
+    value: '',
+    label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormattedKintMessage.default, {
+      id: "notSet",
+      intlKey: passedIntlKey,
+      intlNS: passedIntlNS
+    })
+  }; // Options with notSet
+
+  var options = [notSet !== null && notSet !== void 0 ? notSet : defaultNotSet].concat(_toConsumableArray(userOptions));
 
   var _useSelectedOption = (0, _RichSelect.useSelectedOption)(),
       _useSelectedOption2 = _slicedToArray(_useSelectedOption, 2),
@@ -158,6 +162,8 @@ IconSelect.propTypes = {
   disabled: _propTypes.default.bool,
   id: _propTypes.default.string,
   input: _propTypes.default.object,
+  intlKey: _propTypes.default.string,
+  intlNS: _propTypes.default.string,
   label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.node]),
   meta: _propTypes.default.object,
   notSet: _propTypes.default.shape({