@k-int/stripes-kint-components 5.9.0 → 5.11.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [5.11.0](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.10.0...v5.11.0) (2025-02-07)
+
+
+### Features
+
+* Added Tags helper app and hooks to stripes-kint-components (Moving out of erm-components longer term) ([e881639](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/e881639b49036d6016dc65d83bcf67e596652acc))
+
+# [5.10.0](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.9.0...v5.10.0) (2025-02-04)
+
+
+### Features
+
+* Typedown delay ([c736865](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/c736865cec8f4b5cbe2ad473393452fd7ec34dc8))
+
 # [5.9.0](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.8.3...v5.9.0) (2025-01-31)
 
 

package/es/index.js

@@ -400,6 +400,18 @@ var _ResponsiveButtonGroup = _interopRequireDefault(require("./lib/ResponsiveBut
 var _SettingsFormContainer = _interopRequireDefault(require("./lib/SettingsFormContainer"));
 var _ComboButton = _interopRequireDefault(require("./lib/ComboButton"));
 var _NumberField = _interopRequireDefault(require("./lib/NumberField"));
+var _Tags = require("./lib/Tags");
+Object.keys(_Tags).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Tags[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Tags[key];
+    }
+  });
+});
 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/Tags/Tags.js

@@ -0,0 +1,143 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactQuery = require("react-query");
+var _core = require("@folio/stripes/core");
+var _lodash = require("lodash");
+var _components = require("@folio/stripes/components");
+var _smartComponents = require("@folio/stripes/smart-components");
+var _tagsConfig = require("./tagsConfig");
+var _hooks = require("./hooks");
+var _hooks2 = require("../hooks");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Tags = _ref => {
+  let {
+    invalidateLinks = [],
+    // If there are other queries that need invalidating, pass those here
+    labelOverrides = {},
+    link,
+    onToggle,
+    intlKey: passedIntlKey,
+    intlNS: passedIntlNS
+  } = _ref;
+  const kintIntl = (0, _hooks2.useKintIntl)(passedIntlKey, passedIntlNS);
+  const ky = (0, _core.useOkapiKy)();
+  const callout = (0, _react.useContext)(_core.CalloutContext);
+  const queryClient = (0, _reactQuery.useQueryClient)();
+
+  // TAG GET/POST
+  const {
+    data: {
+      tags = []
+    } = {}
+  } = (0, _hooks.useTags)([..._tagsConfig.tagNamespaceArray, link]);
+
+  // istanbul ignore next
+  const {
+    mutateAsync: postTags
+  } = (0, _reactQuery.useMutation)(['tags', 'stripes-erm-components', 'Tags', 'postTags'], data => ky.post('tags', {
+    json: data
+  }).then(() => {
+    queryClient.invalidateQueries('tags');
+  }));
+
+  // ENTITY GET/PUT
+  const {
+    data: entity
+  } = (0, _reactQuery.useQuery)([link, 'stripes-erm-components', 'Tags'], () => ky.get(link).json());
+
+  // istanbul ignore next
+  const {
+    mutateAsync: putEntity
+  } = (0, _reactQuery.useMutation)([link, 'stripes-erm-components', 'Tags', 'putEntity'], data => ky.put(link, {
+    json: data
+  }).then(() => {
+    queryClient.invalidateQueries(link);
+    if (invalidateLinks?.length) {
+      invalidateLinks.forEach(il => queryClient.invalidateQueries(il));
+    }
+  }));
+
+  // add tags to global list of tags
+  // istanbul ignore next
+  const saveTags = tagsToSave => {
+    const newTag = (0, _lodash.difference)(tagsToSave.map(t => t.value || t), tags.map(t => t.label.toLowerCase()));
+    if (!newTag || !newTag.length) return;
+    postTags({
+      label: newTag[0],
+      description: newTag[0]
+    });
+    callout.sendCallout({
+      message: kintIntl.formatKintMessage({
+        id: 'newTagCreated',
+        overrideValue: labelOverrides.newTagCreated
+      })
+    });
+  };
+
+  // add tag to the list of entity tags
+  // istanbul ignore next
+  const saveEntityTags = tagsToSave => {
+    const tagListMap = (entity?.tags ?? []).map(tag => ({
+      'value': tag.value
+    }));
+    const tagsMap = tagsToSave.map(tag => ({
+      'value': tag.value || tag
+    }));
+    const newTags = (0, _lodash.sortBy)((0, _lodash.uniqBy)([...tagListMap, ...tagsMap], 'value'));
+    putEntity({
+      tags: newTags
+    });
+  };
+  const onAdd = addTags => {
+    saveEntityTags(addTags);
+    saveTags(addTags);
+  };
+  const onRemove = tag => {
+    const tagToDelete = (entity?.tags ?? []).filter(t => t.value.toLowerCase() === tag.toLowerCase());
+    putEntity({
+      tags: [{
+        id: tagToDelete[0].id,
+        _delete: true
+      }]
+    });
+  };
+  const entityTags = (entity?.tags ?? []).map(tag => tag.value.toLowerCase());
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Pane, {
+    defaultWidth: "20%",
+    dismissible: true,
+    id: "tags-helper-pane",
+    onClose: onToggle,
+    paneSub: kintIntl.formatKintMessage({
+      id: 'numberOfTags',
+      overrideValue: labelOverrides.numberOfTags
+    }, {
+      count: entity?.tags?.length ?? 0
+    }),
+    paneTitle: kintIntl.formatKintMessage({
+      id: 'tags',
+      overrideValue: labelOverrides.tags
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_smartComponents.TagsForm, {
+      entityTags: entityTags,
+      onAdd: onAdd,
+      onRemove: onRemove,
+      tags: tags
+    })
+  });
+};
+Tags.propTypes = {
+  intlKey: _propTypes.default.string,
+  intlNS: _propTypes.default.string,
+  invalidateLinks: _propTypes.default.arrayOf(_propTypes.default.string),
+  labelOverrides: _propTypes.default.object,
+  link: _propTypes.default.string,
+  onToggle: _propTypes.default.func
+};
+var _default = exports.default = Tags;

package/es/lib/Tags/Tags.test.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _reactRouterDom = require("react-router-dom");
+var _stripesErmTesting = require("@folio/stripes-erm-testing");
+var _Tags = _interopRequireDefault(require("./Tags"));
+var _jest = require("../../../test/jest");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const onToggle = jest.fn();
+const onAdd = jest.fn();
+const link = 'erm/sas/14c16fc4-f986-4e60-aa59-4e627fcf160b';
+describe('Tags', () => {
+  let renderComponent;
+  beforeEach(() => {
+    renderComponent = (0, _jest.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.MemoryRouter, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tags.default, {
+        invalidateLinks: [],
+        link: link,
+        onAdd: onAdd,
+        onToggle: onToggle
+      })
+    }));
+  });
+  test('renders the expected label', () => {
+    const {
+      getByText
+    } = renderComponent;
+    expect(getByText('0 Tags')).toBeInTheDocument();
+  });
+  test('renders expected pane dismiss button ', async () => {
+    await (0, _stripesErmTesting.IconButton)('Close Tags').exists();
+  });
+  test('renders expected open menu button ', () => {
+    const {
+      getByRole
+    } = renderComponent;
+    expect(getByRole('button', {
+      name: 'stripes-components.multiSelection.dropdownTriggerLabel'
+    })).toBeInTheDocument();
+  });
+  test('renders tags heading  ', () => {
+    const {
+      getByRole
+    } = renderComponent;
+    expect(getByRole('heading', {
+      name: 'Tags'
+    })).toBeInTheDocument();
+  });
+  test('renders expected region with zero tags', () => {
+    const {
+      getByRole
+    } = renderComponent;
+    expect(getByRole('region', {
+      name: 'Tags 0 Tags'
+    })).toBeInTheDocument();
+  });
+  test('renders the expected multiSelectDescription', () => {
+    const {
+      getByText
+    } = renderComponent;
+    expect(getByText('Contains a list of any selected values, followed by an autocomplete textfield for selecting additional values.')).toBeInTheDocument();
+  });
+  test('renders the expected label', () => {
+    const {
+      getByText
+    } = renderComponent;
+    expect(getByText('0 items selected')).toBeInTheDocument();
+  });
+  test('displays the tags pane', async () => {
+    await (0, _stripesErmTesting.Pane)('Tags').is({
+      visible: true
+    });
+  });
+  test('displays the tags pane header', async () => {
+    await (0, _stripesErmTesting.PaneHeader)('Tags').is({
+      visible: true
+    });
+  });
+});

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

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "tagsEnabledQueryKey", {
+  enumerable: true,
+  get: function () {
+    return _useTagsEnabled.tagsEnabledQueryKey;
+  }
+});
+Object.defineProperty(exports, "useTags", {
+  enumerable: true,
+  get: function () {
+    return _useTags.default;
+  }
+});
+Object.defineProperty(exports, "useTagsEnabled", {
+  enumerable: true,
+  get: function () {
+    return _useTagsEnabled.default;
+  }
+});
+var _useTagsEnabled = _interopRequireWildcard(require("./useTagsEnabled"));
+var _useTags = _interopRequireDefault(require("./useTags"));
+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; }

package/es/lib/Tags/hooks/useTags.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactQuery = require("react-query");
+var _core = require("@folio/stripes/core");
+var _tagsConfig = require("../tagsConfig");
+const useTags = (namespaceArray, options) => {
+  const ky = (0, _core.useOkapiKy)();
+  const nsArray = namespaceArray ?? _tagsConfig.tagNamespaceArray;
+  return (0, _reactQuery.useQuery)(nsArray, () => ky.get(_tagsConfig.defaultTagQuery).json(), options);
+};
+var _default = exports.default = useTags;

package/es/lib/Tags/hooks/useTagsEnabled.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tagsEnabledQueryKey = exports.default = void 0;
+var _core = require("@folio/stripes/core");
+var _reactQuery = require("react-query");
+var _endpoints = require("../../constants/endpoints");
+const tagsEnabledQueryKey = exports.tagsEnabledQueryKey = [_endpoints.MOD_SETTINGS_ENDPOINT, 'query=(module==TAGS and configName==tags_enabled)', 'stripes-kint-components', 'useTagsEnabled'];
+const useTagsEnabled = () => {
+  const ky = (0, _core.useOkapiKy)();
+  const queryObject = (0, _reactQuery.useQuery)(tagsEnabledQueryKey, () => ky.get(`${_endpoints.MOD_SETTINGS_ENDPOINT}?query=(module==TAGS and configName==tags_enabled)`).json());
+  const {
+    data: {
+      configs: {
+        0: {
+          value
+        } = {}
+      } = []
+    } = {}
+  } = queryObject;
+  return !value || value === 'true';
+};
+var _default = exports.default = useTagsEnabled;

package/es/lib/Tags/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Tags: true
+};
+Object.defineProperty(exports, "Tags", {
+  enumerable: true,
+  get: function () {
+    return _Tags.default;
+  }
+});
+var _Tags = _interopRequireDefault(require("./Tags"));
+var _tagsConfig = require("./tagsConfig");
+Object.keys(_tagsConfig).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _tagsConfig[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _tagsConfig[key];
+    }
+  });
+});
+var _hooks = require("./hooks");
+Object.keys(_hooks).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _hooks[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _hooks[key];
+    }
+  });
+});
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/es/lib/Tags/tagsConfig.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tagsPath = exports.tagNamespaceArray = exports.defaultTagsParams = exports.defaultTagQuery = void 0;
+const tagNamespaceArray = exports.tagNamespaceArray = ['tags', 'stripes-kint-components', 'Tags'];
+const tagsPath = exports.tagsPath = 'tags';
+const defaultTagsParams = exports.defaultTagsParams = ['limit=1000', 'query=cql.allRecords%3D1%20sortby%20label'];
+const defaultTagQuery = exports.defaultTagQuery = `${tagsPath}?${defaultTagsParams?.join('&')}`;

package/es/lib/Typedown/Typedown.js

@@ -22,8 +22,11 @@ const Typedown = _ref => {
     className,
     dataOptions,
     displayClearItem = true,
+    displayValueWhileOpen = true,
     endOfList,
     id,
+    initialOpenDelay = 800,
+    // Initial opening delay of 800ms (handles any stripes animations)
     input,
     isSelected,
     filterPath,
@@ -89,7 +92,9 @@ const Typedown = _ref => {
       resizeRef,
       searchWidth
     }
-  } = (0, _typedownHooks.useTypedown)(input.name);
+  } = (0, _typedownHooks.useTypedown)(input.name, {
+    timeout: initialOpenDelay
+  });
   const renderItem = (0, _react.useCallback)(function (option) {
     let optionIsSelected = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -157,6 +162,9 @@ const Typedown = _ref => {
       })
     });
   };
+  const displayValue = (0, _react.useMemo)(() => {
+    return !!selectedUniqueId && (!open || displayValueWhileOpen);
+  }, [displayValueWhileOpen, open, selectedUniqueId]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     ref: resizeRef,
     className: (0, _classnames.default)(_TypeDown.default.typedown, className),
@@ -185,7 +193,7 @@ const Typedown = _ref => {
       overlayRef: overlayRef,
       portal: portal,
       children: dropDown()
-    }, "typedown-menu-toggle"), selectedUniqueId && !open && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    }, "typedown-menu-toggle"), displayValue && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _classnames.default)(_TypeDown.default.selectedDisplay),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: _TypeDown.default.selectedItem,
@@ -202,9 +210,11 @@ Typedown.propTypes = {
   className: _propTypes.default.string,
   dataOptions: _propTypes.default.arrayOf(_propTypes.default.object),
   displayClearItem: _propTypes.default.bool,
+  displayValueWhileOpen: _propTypes.default.bool,
   endOfList: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node, _propTypes.default.element]),
   filterPath: _propTypes.default.string,
   id: _propTypes.default.string,
+  initialOpenDelay: _propTypes.default.number,
   input: _propTypes.default.object,
   isSelected: _propTypes.default.func,
   label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),

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

@@ -11,7 +11,10 @@ var _eventCodes = require("../../constants/eventCodes");
 var _selectorSafe = _interopRequireDefault(require("../../utils/selectorSafe"));
 var _useTypedownToggle = _interopRequireDefault(require("./useTypedownToggle"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const useTypedown = name => {
+const useTypedown = function (name) {
+  let {
+    timeout = 800
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   // SEARCHFIELD COMPONENT
   const searchFieldComponent = document.getElementById(`typedown-searchField-${(0, _selectorSafe.default)(name)}`);
 
@@ -101,6 +104,16 @@ const useTypedown = name => {
   const {
     open
   } = (0, _useTypedownToggle.default)(name);
+  const [useOpen, setUseOpen] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    // Use setTimeout to update the message after 2000 milliseconds (2 seconds)
+    const timeoutId = setTimeout(() => {
+      setUseOpen(true);
+    }, timeout); // Wait 0.8 seconds for open prop to get used
+
+    // Cleanup function to clear the timeout if the component unmounts
+    return () => clearTimeout(timeoutId);
+  }, [timeout]);
 
   // RESIZE STUFF
   const {
@@ -123,7 +136,7 @@ const useTypedown = name => {
       searchFieldKeyDownHandler
     },
     variables: {
-      open,
+      open: useOpen ? open : false,
       portal,
       resizeRef,
       searchWidth

package/es/lib/hooks/useHelperApp.js

@@ -4,18 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 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(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 = {};
 const useHelperApp = helpers => {
   const history = (0, _reactRouterDom.useHistory)();
   const location = (0, _reactRouterDom.useLocation)();
+  const [helperObject, setHelperObject] = (0, _react.useState)({});
+  const [helperToggleFunctions, setHelperToggleFunctions] = (0, _react.useState)({});
   const query = _queryString.default.parse(location.search);
   const [currentHelper, setCurrentHelper] = (0, _react.useState)(query?.helper);
   const handleToggleHelper = (0, _react.useCallback)(helper => {
@@ -25,9 +24,16 @@ const useHelperApp = helpers => {
     return currentHelper === hlp;
   };
   (0, _react.useEffect)(() => {
-    // Keep object outside of hook to avoid redraw, oncly change when keys change
     if (!(0, _isEqual.default)(Object.keys(helperObject), Object.keys(helpers))) {
-      helperObject = helpers;
+      setHelperObject(helpers);
+    }
+    const newHelperToggleFunctions = {};
+    Object.keys(helperObject).forEach(h => {
+      newHelperToggleFunctions[h] = () => handleToggleHelper(h);
+    });
+    if (!(0, _isEqual.default)(Object.keys(helperToggleFunctions), Object.keys(newHelperToggleFunctions))) {
+      // This makes sure adding/removing helpers changes the functions
+      setHelperToggleFunctions(newHelperToggleFunctions);
     }
     if (currentHelper !== query?.helper) {
       const newQuery = {
@@ -38,11 +44,14 @@ const useHelperApp = helpers => {
         pathname: location.pathname,
         search: `?${_queryString.default.stringify(newQuery)}`
       });
+
+      // When helper changes, reset helperToggleFunctions
+      setHelperToggleFunctions(newHelperToggleFunctions);
     }
-  }, [currentHelper, helpers, history, location, query]);
+  }, [currentHelper, handleToggleHelper, helperObject, helperToggleFunctions, helpers, history, location, query]);
 
   // Set the HelperComponent
-  const HelperComponent = (0, _react.useMemo)(() => props => {
+  const HelperComponent = (0, _react.useCallback)(props => {
     if (!query?.helper) return null;
     let Component = null;
     Component = helperObject[query?.helper];
@@ -51,13 +60,7 @@ const useHelperApp = helpers => {
       onToggle: () => handleToggleHelper(query?.helper),
       ...props
     });
-  }, [handleToggleHelper, query.helper]);
-
-  // Set up the helperToggleFunctions
-  const helperToggleFunctions = {};
-  Object.keys(helperObject).forEach(h => {
-    helperToggleFunctions[h] = () => handleToggleHelper(h);
-  });
+  }, [handleToggleHelper, helperObject, query?.helper]);
   return {
     currentHelper,
     HelperComponent,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k-int/stripes-kint-components",
-  "version": "5.9.0",
+  "version": "5.11.0",
   "description": "Stripes Component library for K-Int specific applications",
   "sideEffects": [
     "*.css"
@@ -13,7 +13,8 @@
     "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",
-    "clean-build": "yarn clean && yarn build",
+    "clean-install": "yarn clean && yarn install --ignore-scripts",
+    "clean-build": "yarn clean-install && yarn build",
     "prepare": "yarn build",
     "semantic-release": "semantic-release"
   },

package/src/index.js

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

package/src/lib/FormModal/README.md

@@ -0,0 +1,91 @@
+## FormModal Component
+
+The `FormModal` component provides a simple way to create a modal dialog with a form. It combines the `Modal` component from `@folio/stripes/components` with the `Form` component from `react-final-form`, handling form submission, validation, and modal interactions.
+
+### Basic Usage
+
+```javascript
+import { useState } from 'react';
+import FormModal from '@k-int/stripes-kint-components';
+import { Field } from 'react-final-form';
+import { TextField } from '@folio/stripes/components';
+
+const MyFormModal = () => {
+  const [open, setOpen] = useState(false);
+
+  const onSubmit = (values) => {
+    // Handle form submission
+    console.log(values);
+    setOpen(false); // Close the modal after submission
+  };
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open Modal</Button> {/* Button to open the modal */}
+      <FormModal
+        modalProps={{ open, onClose: () => setOpen(false) }}
+        onSubmit={onSubmit}
+      >
+        <Field
+          name="name"
+          component={TextField}
+          label="Name"
+        />
+      </FormModal>
+    </>
+  );
+};
+```
+
+### Props
+
+| Name | Type | Description | Default | Required |
+|---|---|---|---|---|
+| children | node/func | The content of the modal, typically form fields. |  | ✓ |
+| intlKey | string | The key to use for internationalization messages. |  | ✕ |
+| intlNS | string | The namespace to use for internationalization messages. |  | ✕ |
+| labelOverrides | object | An object to override the default labels for buttons. | `{}` | ✕ |
+| modalProps | object | Props to pass to the underlying `Modal` component.  Should include `open` and `onClose`. |  | ✓ |
+| onError | func | A function to handle errors that occur during form submission.  This function will receive the error object as a parameter. |  | ✕ |
+| onSubmit | func | A function to handle form submission. |  | ✓ |
+| onSuccess | func | A function to handle successful form submission. This function will receive the submitted values as a parameter. |  | ✕ |
+|...formProps | object | Any other props will be passed to the underlying `Form` component from `react-final-form`. |  | ✕ |
+
+### Features
+
+*   **Integrated form handling:** The component integrates seamlessly with `react-final-form`, providing access to form state and helper functions within the `footer` and `children` props.
+*   **Customizable footer:** The `modalProps.footer` prop allows for customization of the modal footer. It receives an object with the following properties:
+    *   `formState`: The current state of the form.
+    *   `handleSubmit`: A function to handle form submission and close the modal.
+    *   `handleClose`: A function to close the modal.
+    *   `handleSubmitNoRestart`: **(DEPRECATED)** Use `handleSubmitRaw` instead.
+    *   `handleSubmitRaw`: A function to handle form submission without closing the modal or clearing the form.
+*   **Error and success handling:** The `onError` and `onSuccess` props allow for custom handling of asynchronous form submission errors and successes.
+*   **Internationalization:** The component supports internationalization using the `intlKey` and `intlNS` props.
+*   **Label overrides:** The `labelOverrides` prop allows for overriding the default button labels.
+
+### Example with Custom Footer
+
+```javascript
+<FormModal
+  modalProps={{
+    open: true,
+    onClose: () => { /*... */ },
+    footer: ({ handleSubmit, handleClose }) => (
+      <ModalFooter>
+        <Button
+          buttonStyle="primary"
+          onClick={handleSubmit}
+          type="submit"
+        >
+          Save
+        </Button>
+        <Button onClick={handleClose}>Cancel</Button>
+      </ModalFooter>
+    )
+  }}
+  onSubmit={() => { /*... */ }}
+>
+  {/*... form content... */}
+</FormModal>
+```