@k-int/stripes-kint-components 4.2.0 → 4.3.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## 4.3.0 2023-01-27
+  * ActionList
+    * Tweaks to props passed to fieldComponents functions
+    * Same property object passed to validateFields now
+  * EditableRefdataList
+    * Prop added `allowSpecial`, default value `false`
+      * With this property set to false, the component on creation will strip out all non-alphanumeric and non dash/underscore characters, and replace them with `_` for the _value_ field, it will not affect the _label_ of the refdata (Since the value field is created from the entered label).
+  * ResponsiveButtonGroup
+    * Added dropdownTriggerProps to pass extra implementation props to the dropdown menu trigger
+    * Added default aria-label="menu" to the dropdownTriggerProps
+  * SASQLookupComponent
+    * Tweaked filterPaneProps and mainPaneProps, now lastMenu and firstMenu will get access to certain internal state, such as filterCount, filterPaneVisible (and handlers), among others.
+    * Added tooltip to collapse/expand filter pane as default. (Swapped internally to use stripes-smart-components to bring in line with other apps)
+  * Typedown
+    * Small styling changes, rounded corners of the dropdown menu now depend on whether the menu is rendered below, above, or floating
+
 ## 4.2.0 2022-12-09
   * Changed all test resources over to stripes-erm-testing and jest manual mocks
   * ResponsiveButtonGroup

package/es/lib/ActionList/ActionList.js

@@ -12,7 +12,7 @@ var _reactFinalFormArrays = require("react-final-form-arrays");
 var _finalFormArrays = _interopRequireDefault(require("final-form-arrays"));
 var _ActionListFieldArray = _interopRequireDefault(require("./ActionListFieldArray"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["actionAssigner", "columnMapping", "contentData", "creatableFields", "createCallback", "defaultNewObject", "editableFields", "fieldComponents", "hideCreateButton", "intlKey", "intlNS", "label", "labelOverrides", "validateFields", "visibleFields"];
+var _excluded = ["actionAssigner", "columnMapping", "contentData", "creatableFields", "createCallback", "defaultNewObject", "editableFields", "fieldComponents", "fieldProps", "hideCreateButton", "intlKey", "intlNS", "label", "labelOverrides", "validateFields", "visibleFields"];
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -32,6 +32,7 @@ var propTypes = {
   defaultNewObject: _propTypes.default.object,
   editableFields: _propTypes.default.object,
   fieldComponents: _propTypes.default.object,
+  fieldProps: _propTypes.default.object,
   hideCreateButton: _propTypes.default.bool,
   intlKey: _propTypes.default.string,
   intlNS: _propTypes.default.string,
@@ -53,6 +54,8 @@ var ActionList = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     editableFields = _ref$editableFields === void 0 ? {} : _ref$editableFields,
     _ref$fieldComponents = _ref.fieldComponents,
     fieldComponents = _ref$fieldComponents === void 0 ? {} : _ref$fieldComponents,
+    _ref$fieldProps = _ref.fieldProps,
+    fieldProps = _ref$fieldProps === void 0 ? {} : _ref$fieldProps,
     hideCreateButton = _ref.hideCreateButton,
     passedIntlKey = _ref.intlKey,
     passedIntlNS = _ref.intlNS,

package/es/lib/ActionList/ActionListFieldArray.js

@@ -292,7 +292,7 @@ var ActionListFieldArray = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2,
                 action: action,
                 "aria-describedby": ariaIds.sub,
                 "aria-labelledby": ariaIds.text,
-                disabled: editing,
+                disabled: !!editing,
                 onClick: function onClick(e) {
                   e.stopPropagation();
                   if (actionFunction) {
@@ -310,7 +310,7 @@ var ActionListFieldArray = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2,
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionTrigger, {
           action: action,
           ariaLabel: ariaLabel,
-          disabled: editing,
+          disabled: !!editing,
           onClick: function onClick(e) {
             e.stopPropagation();
             if (actionFunction) {
@@ -371,10 +371,15 @@ var ActionListFieldArray = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2,
             true => Field, false => display value
           */
           if (!cd.id && createFunction(cd) || !!cd.id && editFunction(cd)) {
-            var validateFunction = validateFields !== null && validateFields !== void 0 && validateFields[key] ? validateFields === null || validateFields === void 0 ? void 0 : validateFields[key](cd) : null;
-            returnValue = fieldComponents[key] ? fieldComponents[key]({
-              name: "".concat(cd.fieldName, ".").concat(key)
-            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
+            var passedObject = {
+              allValues: values,
+              index: cd === null || cd === void 0 ? void 0 : cd.fieldIndex,
+              key: key,
+              name: "".concat(cd.fieldName, ".").concat(key),
+              rowFieldName: cd.fieldName
+            };
+            var validateFunction = validateFields !== null && validateFields !== void 0 && validateFields[key] ? validateFields === null || validateFields === void 0 ? void 0 : validateFields[key](passedObject) : null;
+            returnValue = fieldComponents[key] ? fieldComponents[key](passedObject) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
               autoFocus: autoFocus,
               component: _components.TextField,
               marginBottom0: true,
@@ -400,7 +405,7 @@ var ActionListFieldArray = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2,
         className: _ActionListFieldArray.default.headerText,
         children: label
       }), !hideCreateButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-        disabled: editing || !createCallback,
+        disabled: !!editing || !createCallback,
         marginBottom0: true,
         onClick: handleClickCreate,
         children: kintIntl.formatKintMessage({

package/es/lib/EditableRefdataList/EditableRefdataList.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _get = _interopRequireDefault(require("lodash/get"));
 var _components = require("@folio/stripes/components");
 var _core = require("@folio/stripes/core");
 var _hooks = require("../hooks");
@@ -33,6 +34,7 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var propTypes = {
   afterQueryCalls: _propTypes.default.object,
+  allowSpecial: _propTypes.default.bool,
   catchQueryCalls: _propTypes.default.object,
   desc: _propTypes.default.string,
   intlKey: _propTypes.default.string,
@@ -44,6 +46,8 @@ var propTypes = {
 var EditableRefdataList = function EditableRefdataList(_ref) {
   var _deleteModal$refdata2;
   var afterQueryCalls = _ref.afterQueryCalls,
+    _ref$allowSpecial = _ref.allowSpecial,
+    allowSpecial = _ref$allowSpecial === void 0 ? false : _ref$allowSpecial,
     catchQueryCalls = _ref.catchQueryCalls,
     desc = _ref.desc,
     passedIntlKey = _ref.intlKey,
@@ -227,7 +231,14 @@ var EditableRefdataList = function EditableRefdataList(_ref) {
         }
       },
       createCallback: refdata !== null && refdata !== void 0 && refdata.internal ? null : function (data) {
-        return editRefdataValue(data);
+        if (allowSpecial) {
+          editRefdataValue(data);
+        } else {
+          var _selectorSafe;
+          editRefdataValue(_objectSpread(_objectSpread({}, data), {}, {
+            value: (_selectorSafe = (0, _utils.selectorSafe)(data === null || data === void 0 ? void 0 : data.label)) === null || _selectorSafe === void 0 ? void 0 : _selectorSafe.replaceAll('%20', ' ')
+          }));
+        }
       },
       editableFields: {
         value: function value() {
@@ -236,9 +247,7 @@ var EditableRefdataList = function EditableRefdataList(_ref) {
       },
       label: label,
       validateFields: {
-        label: function label() {
-          return _validators.required;
-        }
+        label: _validators.required
       },
       visibleFields: ['label', 'value']
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ConfirmationModal, {

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", "fullWidth", "marginBottom0", "selectedIndex", "tagName"];
+var _excluded = ["children", "className", "dropdownTriggerProps", "fullWidth", "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."); }
@@ -30,6 +30,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var propTypes = {
   children: _propTypes.default.node,
   className: _propTypes.default.string,
+  dropdownTriggerProps: _propTypes.default.object,
   fullWidth: _propTypes.default.bool,
   marginBottom0: _propTypes.default.bool,
   selectedIndex: _propTypes.default.number,
@@ -56,6 +57,8 @@ var calculateCumulativeThreshold = function calculateCumulativeThreshold(arrayOf
 var ResponsiveButtonGroup = function ResponsiveButtonGroup(props) {
   var childButtons = props.children,
     className = props.className,
+    _props$dropdownTrigge = props.dropdownTriggerProps,
+    dropdownTriggerProps = _props$dropdownTrigge === void 0 ? {} : _props$dropdownTrigge,
     _props$fullWidth = props.fullWidth,
     fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
     marginBottom0 = props.marginBottom0,
@@ -81,20 +84,21 @@ var ResponsiveButtonGroup = function ResponsiveButtonGroup(props) {
       open = _ref.open,
       ariaProps = _ref.ariaProps,
       getTriggerProps = _ref.getTriggerProps;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, _objectSpread(_objectSpread(_objectSpread({
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
       ref: triggerRef,
+      "aria-label": "menu",
       buttonClass: (0, _classnames6.default)(_ResponsiveButtonGroup.default.width100, _defineProperty({}, "".concat(_ResponsiveButtonGroup.default.dropdownButtonClass), ((_displayButtons$lengt = displayButtons === null || displayButtons === void 0 ? void 0 : displayButtons.length) !== null && _displayButtons$lengt !== void 0 ? _displayButtons$lengt : 0) > 0), _defineProperty({}, "".concat(_ResponsiveButtonGroup.default.marginBottom), !marginBottom0), _defineProperty({}, "".concat(_ResponsiveButtonGroup.default.marginBottom0), marginBottom0)),
       buttonStyle: selectedIndex > buttonThreshold ? 'primary' : 'default',
       onClick: onToggle,
       onKeyDown: keyHandler,
       type: "button"
-    }, getTriggerProps()), ariaProps), {}, {
+    }, getTriggerProps()), ariaProps), dropdownTriggerProps), {}, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
         icon: open ? 'triangle-up' : 'triangle-down',
         iconPosition: "end"
       })
     }));
-  }, [buttonThreshold, marginBottom0, selectedIndex]);
+  }, [buttonThreshold, dropdownTriggerProps, marginBottom0, selectedIndex]);
   var displayButtons = (0, _react.useMemo)(function () {
     var _buttons$slice;
     return buttons === null || buttons === void 0 ? void 0 : (_buttons$slice = buttons.slice(0, buttonThreshold + 1)) === null || _buttons$slice === void 0 ? void 0 : _buttons$slice.map(function (button, index) {

package/es/lib/SASQLookupComponent/SASQLookupComponent.js

@@ -16,7 +16,9 @@ var _utils = require("../utils");
 var _hooks = require("../hooks");
 var _TableBody = _interopRequireDefault(require("./TableBody"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["data"];
+var _excluded = ["data"],
+  _excluded2 = ["filterPaneFirstMenu", "filterPaneLastMenu"],
+  _excluded3 = ["mainPaneFirstMenu", "mainPaneLastMenu"];
 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."); }
@@ -139,25 +141,38 @@ var SASQLookupComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, r
       var disableReset = !filterChanged && !searchChanged;
       var filterCount = activeFilters.string ? activeFilters.string.split(',').length : 0;
       var Body = RenderBody !== null && RenderBody !== void 0 ? RenderBody : _TableBody.default;
+      var filterPaneFirstMenu = filterPaneProps.filterPaneFirstMenu,
+        filterPaneLastMenu = filterPaneProps.filterPaneLastMenu,
+        restOfFilterPaneProps = _objectWithoutProperties(filterPaneProps, _excluded2);
+      var mainPaneFirstMenu = mainPaneProps.mainPaneFirstMenu,
+        mainPaneLastMenu = mainPaneProps.mainPaneLastMenu,
+        restOfMainPaneProps = _objectWithoutProperties(mainPaneProps, _excluded3);
+      var internalStateProps = {
+        activeFilters: activeFilters,
+        filterCount: filterCount,
+        filterPaneVisible: filterPaneVisible,
+        searchChanged: searchChanged,
+        searchValue: searchValue,
+        setFilterPaneVisible: setFilterPaneVisible,
+        toggleFilterPane: toggleFilterPane
+      };
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_smartComponents.PersistedPaneset, _objectSpread(_objectSpread({
         appId: namespace,
         id: "".concat(id, "-paneset")
       }, persistedPanesetProps), {}, {
         children: [filterPaneVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Pane, _objectSpread(_objectSpread({
           defaultWidth: "20%",
+          firstMenu: filterPaneFirstMenu ? filterPaneFirstMenu(internalStateProps) : null,
           id: "".concat(id, "-filter-pane"),
-          lastMenu: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PaneMenu, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButton, {
-              icon: "caret-left",
-              onClick: function onClick() {
-                return setFilterPaneVisible(false);
-              }
+          lastMenu: filterPaneLastMenu ? filterPaneLastMenu(internalStateProps) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PaneMenu, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_smartComponents.CollapseFilterPaneButton, {
+              onClick: toggleFilterPane
             })
           }),
           paneTitle: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
             id: "stripes-smart-components.searchAndFilter"
           })
-        }, filterPaneProps), {}, {
+        }, restOfFilterPaneProps), {}, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("form", {
             onSubmit: onSubmitSearch,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(FilterPaneHeaderComponent, {}), !noSearchField && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -208,16 +223,14 @@ var SASQLookupComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, r
           })
         })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Pane, _objectSpread(_objectSpread({
           defaultWidth: "fill",
-          firstMenu: !filterPaneVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PaneMenu, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButton, {
-              badgeCount: filterCount,
-              icon: "caret-right",
-              onClick: function onClick() {
-                return setFilterPaneVisible(true);
-              }
+          firstMenu: mainPaneFirstMenu ? mainPaneFirstMenu(internalStateProps) : !filterPaneVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PaneMenu, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_smartComponents.ExpandFilterPaneButton, {
+              filterCount: filterCount,
+              onClick: toggleFilterPane
             })
           }) : null,
           id: "".concat(id, "-main-pane"),
+          lastMenu: mainPaneLastMenu ? mainPaneLastMenu(internalStateProps) : null,
           noOverflow: true,
           padContent: false,
           paneSub: kintIntl.formatKintMessage({
@@ -226,7 +239,7 @@ var SASQLookupComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, r
           }, {
             total: data === null || data === void 0 ? void 0 : data.total
           })
-        }, mainPaneProps), {}, {
+        }, restOfMainPaneProps), {}, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Body, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
             data: data,
             filterPaneVisible: filterPaneVisible,

package/es/lib/hooks/useIntlKeyStore.js

@@ -5,8 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _core = require("@folio/stripes/core");
-var _zustand = _interopRequireDefault(require("zustand"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _zustand = require("zustand");
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(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; }
@@ -15,7 +14,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-var useIntlKeyStore = (0, _zustand.default)(function (set, get) {
+var useIntlKeyStore = (0, _zustand.create)(function (set, get) {
   return {
     intlKeys: {},
     addKey: function addKey(key, namespace) {