@k-int/stripes-kint-components 4.6.1 → 4.7.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
-## 4.6.1 2023-04-14
+## 4.7.1 2023-06-09
+  * Fixed rogue CSS from ComboButton
+
+## 4.7.0 2023-06-06
   * Added success callout to SettingsFormContainer
+  * Bumped @rehooks/local-storage dep to ^2.4.4
+  * Added indexing to ActionList parent div for uniqueness for screen readers
+  * Added aria-label to default Fields within ActionList
+  * ComboButton - new component for buttonm with one primary and multiple ancillary actions.
 
 ## 4.6.0 2023-04-14
   * ERM-2884 Regex with lookbehind causes render failure in Safari

package/es/index.js

@@ -47,7 +47,8 @@ var _exportNames = {
   useSelectedOption: true,
   FormattedKintMessage: true,
   ResponsiveButtonGroup: true,
-  SettingsFormContainer: true
+  SettingsFormContainer: true,
+  ComboButton: true
 };
 Object.defineProperty(exports, "ActionList", {
   enumerable: true,
@@ -55,6 +56,12 @@ Object.defineProperty(exports, "ActionList", {
     return _ActionList.default;
   }
 });
+Object.defineProperty(exports, "ComboButton", {
+  enumerable: true,
+  get: function () {
+    return _ComboButton.default;
+  }
+});
 Object.defineProperty(exports, "CustomPropertiesEdit", {
   enumerable: true,
   get: function () {
@@ -371,6 +378,7 @@ var _RichSelect = _interopRequireWildcard(require("./lib/RichSelect"));
 var _FormattedKintMessage = _interopRequireDefault(require("./lib/FormattedKintMessage"));
 var _ResponsiveButtonGroup = _interopRequireDefault(require("./lib/ResponsiveButtonGroup"));
 var _SettingsFormContainer = _interopRequireDefault(require("./lib/SettingsFormContainer"));
+var _ComboButton = _interopRequireDefault(require("./lib/ComboButton"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/es/lib/ActionList/ActionListFieldArray.js

@@ -173,7 +173,7 @@ const ActionListFieldArray = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
     if (data.id === editing || !data.id && editing === 'NEW_ROW') {
       // Render the save/cancel buttons
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        id: "action-button-parent",
+        id: "action-button-parent-".concat(data.rowIndex + 1),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
           buttonStyle: "primary",
           disabled: hasValidationErrors || submitting || pristine,
@@ -215,7 +215,7 @@ const ActionListFieldArray = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
       });
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      id: "action-button-parent",
+      id: "action-button-parent-".concat(data.rowIndex + 1),
       children: actions === null || actions === void 0 ? void 0 : actions.map(action => {
         let actionFunction;
         if (action.callback) {
@@ -356,6 +356,8 @@ const ActionListFieldArray = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
             };
             const 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, {
+              ariaLabel: key // TODO at the moment the only way to override this is passing in an entire fieldComponent.
+              ,
               autoFocus: autoFocus,
               component: _components.TextField,
               marginBottom0: true,

package/es/lib/ComboButton/ComboButton.js

@@ -0,0 +1,138 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _components = require("@folio/stripes/components");
+var _ResponsiveButtonGroup = _interopRequireDefault(require("../../../styles/ResponsiveButtonGroup.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// FIXME we should probably store the shared styles in a more aptly named file
+
+/*
+ * ComboButton component, can either act as Primary/Bonus buttons in a dropdown
+ * OR it can act as a popover rendered besides a button.
+ * If neither are provided it will act as an ordinary button
+ */const ComboButton = _ref => {
+  let {
+    children,
+    dropdownButtons = [],
+    // These MUST be buttons
+    dropdownProps = {},
+    dropdownRender,
+    marginBottom0,
+    // Will ONLY control the margin of the dropdown/main button
+    popoverProps = {},
+    triggerProps,
+    ...buttonProps
+  } = _ref;
+  const [open, setOpen] = (0, _react.useState)(false);
+  const onToggle = (0, _react.useCallback)(() => setOpen(!open), [open, setOpen]);
+
+  // FIXME a lot of this is shared with ResponsiveButtonGroup
+  const styledDropdownButtons = (0, _react.useMemo)(() => dropdownButtons === null || dropdownButtons === void 0 ? void 0 : dropdownButtons.map(button => {
+    return /*#__PURE__*/(0, _react.cloneElement)(button, {
+      buttonStyle: 'dropdownItem'
+    });
+  }), [dropdownButtons]);
+
+  // eslint-disable-next-line react/prop-types
+  const renderActionMenuContent = (0, _react.useCallback)(() => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {
+    children: [...styledDropdownButtons]
+  }), [styledDropdownButtons]);
+  const renderTrigger = (0, _react.useCallback)(_ref2 => {
+    var _buttonProps$buttonSt;
+    let {
+      onToggle: toggleFunc,
+      triggerRef,
+      keyHandler,
+      open: openState,
+      ariaProps,
+      getTriggerProps
+    } = _ref2;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+      ref: triggerRef,
+      "aria-label": "menu",
+      buttonClass: (0, _classnames.default)(_ResponsiveButtonGroup.default.width100, _ResponsiveButtonGroup.default.dropdownButtonClass, {
+        ["".concat(_ResponsiveButtonGroup.default.marginBottom)]: !marginBottom0
+      }, {
+        ["".concat(_ResponsiveButtonGroup.default.marginBottom0)]: marginBottom0
+      }),
+      buttonStyle: (_buttonProps$buttonSt = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.buttonStyle) !== null && _buttonProps$buttonSt !== void 0 ? _buttonProps$buttonSt : 'default',
+      onClick: toggleFunc,
+      onKeyDown: keyHandler,
+      type: "button",
+      ...getTriggerProps(),
+      ...ariaProps,
+      ...triggerProps,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
+        icon: openState ? 'triangle-up' : 'triangle-down',
+        iconPosition: "end"
+      })
+    });
+  }, [buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.buttonStyle, triggerProps, marginBottom0]);
+  let comboTrigger;
+  if (dropdownButtons.length > 0) {
+    comboTrigger = /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Dropdown, {
+      className: _ResponsiveButtonGroup.default.dropdownClass,
+      onToggle: onToggle,
+      open: open,
+      renderMenu: renderActionMenuContent,
+      renderTrigger: renderTriggerProps => renderTrigger(renderTriggerProps),
+      ...dropdownProps
+    }, "combobutton-dropdown-toggle");
+  } else if (dropdownRender) {
+    comboTrigger = /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Popover, {
+      onToggle: onToggle,
+      open: open,
+      renderTrigger: _ref3 => {
+        let {
+          open: openState,
+          ref,
+          toggle
+        } = _ref3;
+        return renderTrigger({
+          getTriggerProps: () => {},
+          onToggle: toggle,
+          open: openState,
+          triggerRef: ref
+        });
+      },
+      ...popoverProps,
+      children: dropdownRender
+    });
+  }
+  if (comboTrigger) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames.default)(_ResponsiveButtonGroup.default.buttonGroup),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+        marginBottom0: marginBottom0,
+        ...buttonProps,
+        children: children
+      }), comboTrigger]
+    });
+  }
+
+  // Fallback, acts as a normal button
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+    marginBottom0: marginBottom0,
+    ...buttonProps,
+    children: children
+  });
+};
+ComboButton.propTypes = {
+  children: _propTypes.default.node,
+  dropdownButtons: _propTypes.default.arrayOf(_propTypes.default.node),
+  dropdownProps: _propTypes.default.object,
+  dropdownRender: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
+  id: _propTypes.default.string,
+  marginBottom0: _propTypes.default.bool,
+  popoverProps: _propTypes.default.object,
+  triggerProps: _propTypes.default.object
+};
+var _default = ComboButton;
+exports.default = _default;

package/es/lib/ComboButton/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k-int/stripes-kint-components",
-  "version": "4.6.1",
+  "version": "4.7.1",
   "description": "Stripes Component library for K-Int specific applications",
   "sideEffects": [
     "*.css"
@@ -20,7 +20,7 @@
     "prepare": "yarn build"
   },
   "dependencies": {
-    "@rehooks/local-storage": "2.4.0",
+    "@rehooks/local-storage": "^2.4.4",
     "compose-function": "^3.0.3",
     "react-resize-detector": "^7.1.2",
     "zustand": "^4.0.0"

package/src/index.js

@@ -107,3 +107,5 @@ export { default as FormattedKintMessage } from './lib/FormattedKintMessage';
 export { default as ResponsiveButtonGroup } from './lib/ResponsiveButtonGroup';
 
 export { default as SettingsFormContainer } from './lib/SettingsFormContainer';
+
+export { default as ComboButton } from './lib/ComboButton';

package/src/lib/ActionList/ActionListFieldArray.js

@@ -176,7 +176,7 @@ const ActionListFieldArray = forwardRef(({
     if (data.id === editing || (!data.id && editing === 'NEW_ROW')) {
       // Render the save/cancel buttons
       return (
-        <div id="action-button-parent">
+        <div id={`action-button-parent-${data.rowIndex + 1}`}>
           <Button
             key={`save[${data.rowIndex}]`}
             buttonStyle="primary"
@@ -225,7 +225,7 @@ const ActionListFieldArray = forwardRef(({
     }
 
     return (
-      <div id="action-button-parent">
+      <div id={`action-button-parent-${data.rowIndex + 1}`}>
         {actions?.map(action => {
           let actionFunction;
           if (action.callback) {
@@ -379,6 +379,7 @@ const ActionListFieldArray = forwardRef(({
               fieldComponents[key] ?
               fieldComponents[key](passedObject) :
               <Field
+                ariaLabel={key} // TODO at the moment the only way to override this is passing in an entire fieldComponent.
                 autoFocus={autoFocus}
                 component={TextField}
                 marginBottom0

package/src/lib/ComboButton/ComboButton.js

@@ -0,0 +1,161 @@
+import { cloneElement, useCallback, useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import classnames from 'classnames';
+
+import {
+  Button,
+  Dropdown,
+  DropdownMenu,
+  Icon,
+  Popover
+} from '@folio/stripes/components';
+
+// FIXME we should probably store the shared styles in a more aptly named file
+import css from '../../../styles/ResponsiveButtonGroup.css';
+
+/*
+ * ComboButton component, can either act as Primary/Bonus buttons in a dropdown
+ * OR it can act as a popover rendered besides a button.
+ * If neither are provided it will act as an ordinary button
+ */
+
+const ComboButton = ({
+  children,
+  dropdownButtons = [], // These MUST be buttons
+  dropdownProps = {},
+  dropdownRender,
+  marginBottom0, // Will ONLY control the margin of the dropdown/main button
+  popoverProps = {},
+  triggerProps,
+  ...buttonProps
+}) => {
+  const [open, setOpen] = useState(false);
+  const onToggle = useCallback(() => setOpen(!open), [open, setOpen]);
+
+  // FIXME a lot of this is shared with ResponsiveButtonGroup
+  const styledDropdownButtons = useMemo(() => (
+    dropdownButtons
+      ?.map(button => {
+        return cloneElement(button, { buttonStyle: 'dropdownItem' });
+      })
+  ), [dropdownButtons]);
+
+  // eslint-disable-next-line react/prop-types
+  const renderActionMenuContent = useCallback(() => (
+    <DropdownMenu>
+      {[...styledDropdownButtons]}
+    </DropdownMenu>
+  ), [styledDropdownButtons]);
+
+  const renderTrigger = useCallback(({
+    onToggle: toggleFunc,
+    triggerRef,
+    keyHandler,
+    open: openState,
+    ariaProps,
+    getTriggerProps
+  }) => (
+    <Button
+      ref={triggerRef}
+      aria-label="menu"
+      buttonClass={
+        classnames(
+          css.width100,
+          css.dropdownButtonClass,
+          { [`${css.marginBottom}`]: !marginBottom0 },
+          { [`${css.marginBottom0}`]: marginBottom0 }
+        )
+      }
+      buttonStyle={buttonProps?.buttonStyle ?? 'default'}
+      onClick={toggleFunc}
+      onKeyDown={keyHandler}
+      type="button"
+      {...getTriggerProps()}
+      {...ariaProps}
+      {...triggerProps}
+    >
+      <Icon icon={openState ? 'triangle-up' : 'triangle-down'} iconPosition="end" />
+    </Button>
+  ), [
+    buttonProps?.buttonStyle,
+    triggerProps,
+    marginBottom0
+  ]);
+
+  let comboTrigger;
+  if (dropdownButtons.length > 0) {
+    comboTrigger = <Dropdown
+      key="combobutton-dropdown-toggle"
+      className={css.dropdownClass}
+      onToggle={onToggle}
+      open={open}
+      renderMenu={renderActionMenuContent}
+      renderTrigger={(renderTriggerProps) => renderTrigger(renderTriggerProps)}
+      {...dropdownProps}
+    />;
+  } else if (dropdownRender) {
+    comboTrigger = (
+      <Popover
+        onToggle={onToggle}
+        open={open}
+        renderTrigger={({ open: openState, ref, toggle }) => renderTrigger({
+          getTriggerProps: () => {},
+          onToggle: toggle,
+          open: openState,
+          triggerRef: ref
+        })}
+        {...popoverProps}
+      >
+        {dropdownRender}
+      </Popover>
+    );
+  }
+
+  if (comboTrigger) {
+    return (
+      <div
+        className={
+          classnames(
+            css.buttonGroup,
+          )
+        }
+      >
+        <Button
+          marginBottom0={marginBottom0}
+          {...buttonProps}
+        >
+          {children}
+        </Button>
+        {comboTrigger}
+      </div>
+    );
+  }
+
+
+  // Fallback, acts as a normal button
+  return (
+    <Button
+      marginBottom0={marginBottom0}
+      {...buttonProps}
+    >
+      {children}
+    </Button>
+  );
+};
+
+ComboButton.propTypes = {
+  children: PropTypes.node,
+  dropdownButtons: PropTypes.arrayOf(PropTypes.node),
+  dropdownProps: PropTypes.object,
+  dropdownRender: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.node
+  ]),
+  id: PropTypes.string,
+  marginBottom0: PropTypes.bool,
+  popoverProps: PropTypes.object,
+  triggerProps: PropTypes.object,
+};
+
+export default ComboButton;

package/src/lib/ComboButton/index.js

@@ -0,0 +1 @@
+export { default } from './ComboButton';

package/styles/ResponsiveButtonGroup.css

@@ -40,10 +40,15 @@
     margin-left: -1px;
   }
 
-  & > :not(:first-child):not(:last-child),
-  & > :not(:first-child):not(:last-child)::before {
-    border-radius: 0;
-  }
+    & > :not(:first-child):not(:last-child),
+    & > :not(:first-child):not(:last-child)::before {
+      border-radius: 0;
+    }
+}
+
+.dropdownButtonClass, .dropdownButtonClass::before {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 }
 
 [dir="rtl"] {
@@ -69,22 +74,19 @@
       margin-right: -1px;
     }
   }
+
+  .dropdownButtonClass, .dropdownButtonClass::before {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-top-left-radius: var(--radius);
+    border-bottom-left-radius: var(--radius);
+  }
 }
 
 .dropdownClass {
   padding: 0 !important; /* As always, this sucks but is forced on us by stripes bad css ordering */ 
 }
 
-.dropdownButtonClass {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.dropdownButtonClass::before {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
 .hidden {
   visibility: hidden;
 }