@k-int/stripes-kint-components 4.4.3 → 4.5.0

package/CHANGELOG.md

@@ -1,9 +1,12 @@
-## 4.4.3 2023-03-10
-  * Export all hooks by default, both regular hooks and settings specific hooks
-
-## 4.4.2 2023-02-15
+## 4.5.0 2023-03-16
+  * ERM-2879 FOLIO > Agreement App > Supplementary properties is showing the value of 'Visibility' as 'Public' regardless of selection
   * selectorSafe -- Ensured better compatibility with other scripts now it's used in a user facing place.
-
+  * useHelperApp: No longer redraws when keys of passed helper objects have not changed
+  * Export all hooks by default, both regular hooks and settings specific hooks
+  * QueryTypedown
+    * Added 'userQuery' state and a useEffect for the 'callPath' so that it is correctly updated upon a user input change
+  * ResponsiveButtonGroup
+    * Now fires an event 'responsive-button-group-loaded' or 'responsive-button-group-loaded-<id>' depending on whether or not an id has been passed to the ResponsiveButtonGroup
 ## 4.4.1 2023-02-08
   * CustomPropertiesSettings
     * Added displayConditions which act in the same way as below, allowing for programatic turning on/off of access to certain actions

package/es/lib/CustomProperties/View/CustomPropertyCard.js

@@ -113,8 +113,8 @@ var CustomPropertyCard = function CustomPropertyCard(_ref) {
             overrideValue: labelOverrides.visibility
           }),
           children: kintIntl.formatKintMessage({
-            id: 'customProperties.internalFalse',
-            overrideValue: labelOverrides.internalFalse
+            id: internalFalse ? 'customProperties.internalFalse' : 'customProperties.internalTrue',
+            overrideValue: internalFalse ? labelOverrides.internalFalse : labelOverrides.internalTrue
           })
         })
       }), internalFalse && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Col, {

package/es/lib/QueryTypedown/QueryTypedown.js

@@ -40,9 +40,16 @@ var QueryTypedown = function QueryTypedown(_ref) {
     callPath = _useState2[0],
     setCallPath = _useState2[1];
   var data = dataFormatter((0, _typedownHooks.useTypedownData)(path, callPath));
+  var _useState3 = (0, _react.useState)(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    userQuery = _useState4[0],
+    setUserQuery = _useState4[1];
   var onType = function onType(e) {
-    setCallPath(pathMutator(e.target.value, path));
+    setUserQuery(e.target.value);
   };
+  (0, _react.useEffect)(function () {
+    setCallPath(pathMutator(userQuery, path));
+  }, [path, pathMutator, userQuery]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typedown.default, _objectSpread(_objectSpread({}, rest), {}, {
     dataOptions: data,
     onType: onType

package/es/lib/ResponsiveButtonGroup/ResponsiveButtonGroup.js

@@ -12,7 +12,7 @@ var _components = require("@folio/stripes/components");
 var _ResponsiveButtonGroup = _interopRequireDefault(require("../../../styles/ResponsiveButtonGroup.css"));
 var _useResponsiveButtonGroupSizing = _interopRequireDefault(require("./useResponsiveButtonGroupSizing"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["children", "className", "dropdownTriggerProps", "fullWidth", "marginBottom0", "selectedIndex", "tagName"];
+var _excluded = ["children", "className", "dropdownTriggerProps", "fullWidth", "id", "marginBottom0", "selectedIndex", "tagName"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -32,6 +32,7 @@ var propTypes = {
   className: _propTypes.default.string,
   dropdownTriggerProps: _propTypes.default.object,
   fullWidth: _propTypes.default.bool,
+  id: _propTypes.default.string,
   marginBottom0: _propTypes.default.bool,
   selectedIndex: _propTypes.default.number,
   tagName: _propTypes.default.string
@@ -61,13 +62,15 @@ var ResponsiveButtonGroup = function ResponsiveButtonGroup(props) {
     dropdownTriggerProps = _props$dropdownTrigge === void 0 ? {} : _props$dropdownTrigge,
     _props$fullWidth = props.fullWidth,
     fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
+    id = props.id,
     marginBottom0 = props.marginBottom0,
     selectedIndex = props.selectedIndex,
     _props$tagName = props.tagName,
     Tag = _props$tagName === void 0 ? 'div' : _props$tagName,
     rest = _objectWithoutProperties(props, _excluded);
   var _useResponsiveButtonG = (0, _useResponsiveButtonGroupSizing.default)({
-      buttons: childButtons
+      buttons: childButtons,
+      id: id
     }),
     buttons = _useResponsiveButtonG.buttons,
     cachedSizeArray = _useResponsiveButtonG.cachedSizeArray,

package/es/lib/ResponsiveButtonGroup/useResponsiveButtonGroupSizing.js

@@ -16,8 +16,11 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var useResponsiveButtonGroupSizing = function useResponsiveButtonGroupSizing(_ref) {
-  var _ref$buttons = _ref.buttons,
+  var id = _ref.id,
+    _ref$buttons = _ref.buttons,
     buttons = _ref$buttons === void 0 ? [] : _ref$buttons;
+  var eventString = 'responsive-button-group-loaded' + (id ? "-".concat(id) : '');
+  var loadedEvent = new Event(eventString);
   var isMounted = (0, _react.useRef)(false);
   (0, _react.useEffect)(function () {
     isMounted.current = true;
@@ -63,6 +66,7 @@ var useResponsiveButtonGroupSizing = function useResponsiveButtonGroupSizing(_re
       if (!(cachedSizeArray !== null && cachedSizeArray !== void 0 && cachedSizeArray.length) && sizeArray !== null && sizeArray !== void 0 && sizeArray.length) {
         setCachedSizeArray(sizeArray);
         setReady(true);
+        document.dispatchEvent(loadedEvent);
       }
     }
   }, 150), [cachedSizeArray, sizeArray]);

package/es/lib/hooks/useHelperApp.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -23,6 +24,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var helperObject = {};
 var useHelperApp = function useHelperApp(helpers) {
   var history = (0, _reactRouterDom.useHistory)();
   var location = (0, _reactRouterDom.useLocation)();
@@ -38,6 +40,10 @@ var useHelperApp = function useHelperApp(helpers) {
     return currentHelper === hlp;
   };
   (0, _react.useEffect)(function () {
+    // 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;
+    }
     if (currentHelper !== (query === null || query === void 0 ? void 0 : query.helper)) {
       var newQuery = _objectSpread(_objectSpread({}, query), {}, {
         helper: currentHelper
@@ -47,14 +53,14 @@ var useHelperApp = function useHelperApp(helpers) {
         search: "?".concat(_queryString.default.stringify(newQuery))
       });
     }
-  }, [currentHelper, history, location, query]);
+  }, [currentHelper, helpers, history, location, query]);
 
   // Set the HelperComponent
   var HelperComponent = (0, _react.useMemo)(function () {
     return function (props) {
       if (!(query !== null && query !== void 0 && query.helper)) return null;
       var Component = null;
-      Component = helpers[query === null || query === void 0 ? void 0 : query.helper];
+      Component = helperObject[query === null || query === void 0 ? void 0 : query.helper];
       if (!Component) return null;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, _objectSpread({
         onToggle: function onToggle() {
@@ -62,16 +68,17 @@ var useHelperApp = function useHelperApp(helpers) {
         }
       }, props));
     };
-  }, [handleToggleHelper, query.helper, helpers]);
+  }, [handleToggleHelper, query.helper]);
 
   // Set up the helperToggleFunctions
   var helperToggleFunctions = {};
-  Object.keys(helpers).forEach(function (h) {
+  Object.keys(helperObject).forEach(function (h) {
     helperToggleFunctions[h] = function () {
       return handleToggleHelper(h);
     };
   });
   return {
+    currentHelper: currentHelper,
     HelperComponent: HelperComponent,
     helperToggleFunctions: helperToggleFunctions,
     isOpen: isOpen