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

package/src/index.js

@@ -12,17 +12,21 @@ export {
   useQIndex,
   useRefdata,
   useTemplates,
-  useSettings,
-  useAppSettings,
   useIntlKeyStore,
   useKintIntl,
   useIntlKey,
   useSASQQueryMeta
 } from './lib/hooks';
 
+// Settings hooks
+export { useAppSettings, useSettings } from './lib/settingsHooks';
+
 // Useful utility stuff
 export * from './lib/utils';
 
+// Validators
+export * from './lib/validators';
+
 // Contexts
 export {
   SettingsContext,

package/src/lib/ActionList/ActionList.js

@@ -16,7 +16,7 @@ const propTypes = {
   defaultNewObject: PropTypes.object,
   editableFields: PropTypes.object,
   fieldComponents: PropTypes.object,
-  fieldProps: PropTypes.object,
+  hideActionsColumn: PropTypes.bool,
   hideCreateButton: PropTypes.bool,
   intlKey: PropTypes.string,
   intlNS: PropTypes.string,
@@ -38,7 +38,7 @@ const ActionList = forwardRef(({
   defaultNewObject = {},
   editableFields = {},
   fieldComponents = {},
-  fieldProps = {},
+  hideActionsColumn = false,
   hideCreateButton,
   intlKey: passedIntlKey,
   intlNS: passedIntlNS,
@@ -72,6 +72,7 @@ const ActionList = forwardRef(({
               defaultNewObject={defaultNewObject}
               editableFields={editableFields}
               fieldComponents={fieldComponents}
+              hideActionsColumn={hideActionsColumn}
               hideCreateButton={hideCreateButton}
               intlKey={passedIntlKey}
               intlNS={passedIntlNS}

package/src/lib/ActionList/ActionListFieldArray.js

@@ -24,6 +24,7 @@ const propTypes = {
   fields: PropTypes.object,
   fieldComponents: PropTypes.object,
   formatter: PropTypes.object,
+  hideActionsColumn: PropTypes.bool,
   hideCreateButton: PropTypes.bool,
   intlKey: PropTypes.string,
   intlNS: PropTypes.string,
@@ -78,6 +79,7 @@ const ActionListFieldArray = forwardRef(({
   editableFields,
   fields,
   fieldComponents,
+  hideActionsColumn = false,
   hideCreateButton = false,
   intlKey: passedIntlKey,
   intlNS: passedIntlNS,
@@ -440,7 +442,13 @@ const ActionListFieldArray = forwardRef(({
             onRowClick(e, rowWithoutActions);
           }
         } : null}
-        visibleColumns={[...visibleFields, 'actionListActions']}
+        visibleColumns={(
+            !hideActionsColumn ||
+            !!editing
+          ) ?
+            [...visibleFields, 'actionListActions'] :
+            visibleFields
+        }
         {...restOfMclProps}
       />
     </>

package/src/lib/ActionList/README.md

@@ -101,6 +101,7 @@ defaultNewObject | object | An object to use when pushing a new entry into the A
 editableFields | object\<function> | An object with keys from the `visibleFields` array, and values of functions which take the entire row object and return a boolean indicating whether that field is editable or not. No key for a given field will be interpreted as () => true, so a field is editable by default. | | ✕ |
 fieldComponents | object\<function> | An object with keys from the `visibleFields` array, and values of functions which take some `fieldProps` (`allValues`: The full form values, `index`: The current fieldIndex of the editing row, `key`: The object property in question, `name`: The field name for the Field component to glue properly into final-form, `rowFieldName`: The field name in final-form for the whole row object.), and returns a Field component to be used in "edit mode" for the visible field specified. | | ✕ |
 formatter | object\<function> | A "formatter" object that takes the same shape as an MCL formatter, and is used in the same way whilst a row is NOT being edited. While editing a given row, this formatter entry is ignored. | | ✕ |
+hideActionsColumn | boolean | A simple bool to hide the actions column. This will hide the actions column, unless the ActionList manages to get into a state of "editing/creating". In this case, the actions column will once again display to avoid soft locking the form. | false | ✕ |
 hideCreateButton | boolean | A simple bool to hide the create button. Default behaviour without create action is disabled. | false | ✕ |
 onRowClick | function | A function accepting an event and the row data, fired on row click. The presence of this prop will cause the MCL to take on the interactive styling | | ✕ |
 validateFields | object\<function> | An object with keys from the `visibleFields` array, and values of functions which take the entire row object and either return a validate function for final-form, or null. The validate function will be passed the same properties as fieldComponents, above. THESE WILL NOT BE USED if fieldComponents are defined for the same key. | | ✕ |

package/src/lib/CustomProperties/Config/CustomPropertyForm.js

@@ -11,7 +11,7 @@ import {
   TextArea,
   TextField
 } from '@folio/stripes/components';
-import { required as requiredValidator, composeValidators } from '../../utils/validators';
+import { required as requiredValidator, composeValidators } from '../../validators';
 
 import {
   DECIMAL_CLASS_NAME,

package/src/lib/CustomProperties/Filter/CustomPropertiesFilterField.js

@@ -12,7 +12,7 @@ import {
 } from '@folio/stripes/components';
 
 import { groupCustomPropertiesByCtx } from '../../utils';
-import { required as requiredValidator } from '../../utils/validators';
+import { required as requiredValidator } from '../../validators';
 
 import CustomPropertiesRule from './CustomPropertiesRule';
 import { useKintIntl } from '../../hooks';

package/src/lib/CustomProperties/Filter/CustomPropertiesRule.js

@@ -12,7 +12,7 @@ import {
   Tooltip,
 } from '@folio/stripes/components';
 
-import { required as requiredValidator } from '../../utils/validators';
+import { required as requiredValidator } from '../../validators';
 
 import useValueProps from './useValueProps';
 import useOperators from './useOperators';

package/src/lib/CustomProperties/Filter/useValueProps.js

@@ -1,6 +1,6 @@
 import { Datepicker, Select, TextField } from '@folio/stripes/components';
 import * as CUSTPROP_TYPES from '../../constants/customProperties';
-import { invalidNumber, required as requiredValidator } from '../../utils/validators';
+import { invalidNumber, required as requiredValidator } from '../../validators';
 
 const {
   REFDATA_CLASS_NAME: REFDATA,

package/src/lib/EditableRefdataCategoryList/EditableRefdataCategoryList.js

@@ -7,12 +7,17 @@ import { CalloutContext } from '@folio/stripes/core';
 import { useKintIntl, useMutateRefdataCategory, useRefdata } from '../hooks';
 
 import ActionList from '../ActionList';
-import { required } from '../utils/validators';
+import { required } from '../validators';
 import { parseErrorResponse } from '../utils';
 
 const propTypes = {
   afterQueryCalls: PropTypes.object,
   catchQueryCalls: PropTypes.object,
+  displayConditions: PropTypes.shape({
+    create: PropTypes.bool,
+    delete: PropTypes.bool,
+    view: PropTypes.bool,
+  }),
   intlKey: PropTypes.string,
   intlNS: PropTypes.string,
   label: PropTypes.oneOfType([
@@ -26,6 +31,17 @@ const propTypes = {
 const EditableRefdataCategoryList = ({
   afterQueryCalls,
   catchQueryCalls,
+  /*
+   * Set of extra booleans for controlling access to actions
+   * create/delete (View should be handled externally)
+   * This will not overwrite "internal" behaviour, ie setting
+   * delete to 'true' here would still not render a delete button
+   * for a refdata category that has refdata values.
+   */
+  displayConditions = {
+    create: true,
+    delete: true,
+  },
   intlKey: passedIntlKey,
   intlNS: passedIntlNS,
   label,
@@ -36,6 +52,11 @@ const EditableRefdataCategoryList = ({
   const callout = useContext(CalloutContext);
   const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
 
+  const {
+    create: createCondition = true,
+    delete: deleteCondition = true,
+  } = displayConditions;
+
   // fetch refdata values
   const { data: refdata = [], isLoading: isRefdataLoading } = useRefdata({
     endpoint: refdataEndpoint,
@@ -109,7 +130,7 @@ const EditableRefdataCategoryList = ({
   const actionAssigner = (rowData) => {
     const actionArray = [];
 
-    if (!rowData?.values?.length) {
+    if (!rowData?.values?.length && deleteCondition) {
       actionArray.push({
         name: 'delete',
         label: kintIntl.formatKintMessage({
@@ -148,10 +169,18 @@ const EditableRefdataCategoryList = ({
         creatableFields={{
           values: () => false
         }}
-        createCallback={(data) => createRefdataCategory(data)}
+        createCallback={!createCondition ?
+          null :
+          (data) => createRefdataCategory(data)
+        }
         formatter={{
           values: (rowData) => rowData?.values?.length
         }}
+        /* Hide actions column when no permissions, or no deletable refdata categories */
+        hideActionsColumn={
+          (!createCondition && !deleteCondition) ||
+          !contentData?.find(cd => cd?.values?.length === 0)
+        }
         label={label}
         validateFields={{
           desc: () => required

package/src/lib/EditableRefdataList/EditableRefdataList.js

@@ -1,6 +1,5 @@
 import React, { useEffect, useState, useContext } from 'react';
 import PropTypes from 'prop-types';
-import get from 'lodash/get';
 
 import { ConfirmationModal } from '@folio/stripes/components';
 import { CalloutContext } from '@folio/stripes/core';
@@ -8,7 +7,7 @@ import { CalloutContext } from '@folio/stripes/core';
 import { useKintIntl, useMutateRefdataValue, useRefdata } from '../hooks';
 
 import ActionList from '../ActionList';
-import { required } from '../utils/validators';
+import { required } from '../validators';
 import { parseErrorResponse, selectorSafe } from '../utils';
 
 const propTypes = {
@@ -16,6 +15,11 @@ const propTypes = {
   allowSpecial: PropTypes.bool,
   catchQueryCalls: PropTypes.object,
   desc: PropTypes.string,
+  displayConditions: PropTypes.shape({
+    create: PropTypes.bool,
+    delete: PropTypes.bool,
+    view: PropTypes.bool,
+  }),
   intlKey: PropTypes.string,
   intlNS: PropTypes.string,
   label: PropTypes.oneOfType([
@@ -31,12 +35,30 @@ const EditableRefdataList = ({
   allowSpecial = false, // special characters will be directly stripped out of the value before it is sent to the backend
   catchQueryCalls,
   desc,
+  /*
+   * Set of extra booleans for controlling access to actions
+   * edit/create/delete (View should be handled externally)
+   * This will not overwrite "internal" behaviour, ie setting
+   * delete to 'true' here would still not render a delete button
+   * for an internal refdata value
+   */
+  displayConditions = {
+    create: true,
+    edit: true,
+    delete: true,
+  },
   intlKey: passedIntlKey,
   intlNS: passedIntlNS,
   label,
   labelOverrides = {}, // An object containing translation alternatives
   refdataEndpoint
 }) => {
+  const {
+    create: createCondition = true,
+    delete: deleteCondition = true,
+    edit: editCondition = true
+  } = displayConditions;
+
   /* A component that allows for editing of refdata values */
   const callout = useContext(CalloutContext);
   const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
@@ -115,26 +137,30 @@ const EditableRefdataList = ({
 
   // This is the function which will take a row in the table and assign the relevant actions to it
   const actionAssigner = () => {
-    const actionArray = [
-      {
-        name: 'edit',
-        label: kintIntl.formatKintMessage({
-          id: 'edit',
-          overrideValue: labelOverrides?.edit
-        }),
-        icon: 'edit',
-        callback: (data) => editRefdataValue(data),
-        ariaLabel: (data) => kintIntl.formatKintMessage(
-          {
-            id: 'refdata.editAriaLabel',
-            overrideValue: labelOverrides?.editAriaLabel
-          },
-          { label: data?.label }
-        ),
-      }
-    ];
+    const actionArray = [];
+
+    if (editCondition) {
+      actionArray.push(
+        {
+          name: 'edit',
+          label: kintIntl.formatKintMessage({
+            id: 'edit',
+            overrideValue: labelOverrides?.edit
+          }),
+          icon: 'edit',
+          callback: (data) => editRefdataValue(data),
+          ariaLabel: (data) => kintIntl.formatKintMessage(
+            {
+              id: 'refdata.editAriaLabel',
+              overrideValue: labelOverrides?.editAriaLabel
+            },
+            { label: data?.label }
+          ),
+        }
+      );
+    }
 
-    if (!refdata?.internal) {
+    if (!refdata?.internal && deleteCondition) {
       actionArray.push({
         name: 'delete',
         label: kintIntl.formatKintMessage({
@@ -174,7 +200,7 @@ const EditableRefdataList = ({
           value: () => false
         }}
         createCallback={
-          refdata?.internal ?
+          (!createCondition || refdata?.internal) ?
             null :
             (data) => {
               if (allowSpecial) {
@@ -187,6 +213,8 @@ const EditableRefdataList = ({
         editableFields={{
           value: () => false
         }}
+        hideActionsColumn={!deleteCondition && !editCondition}
+        hideCreateButton={!createCondition}
         label={label}
         validateFields={{
           label: required

package/src/lib/EditableRefdataList/README.md

@@ -20,6 +20,7 @@ Name | Type | Description | default | required
 afterQueryCalls | object | An object of the form `{delete: func1, put: func2}` where `func1`/`func2` are functions to be called after the `delete`/`put`. | | ✕ |
 allowSpecial | boolean | A boolean to turn off/on the stripping out of special characters and replacing them with `_`. Generally turning this on will cause problems with queries to KIWT endpoints and internally with Stripes filters, where a refdata value includes `&&`, `||`, `\` or `"`. | false | ✕ |
 catchQueryCalls | object | An object of the form `{delete: func1, put: func2}` where `func1`/`func2` are functions to be called with a HTTPError object when the `delete`/`put` calls fail. | `{delete: <Fires a callout of the format "<strong>Error: {label}</strong> was not deleted. {error}">}` | | ✕ |
-labelOverrides | object | An object containing translation overrides. Currently accepts: `deleteError: (err, object) => { ... output a callout message }`. | | ✕ |
 desc | String | A string corresponding to the refdataValue category, usually of the form `DomainClass.Field`. See `useRefdata` for more information. | | ✕ |
 endpoint | String | A string containing the path to the endpoint for refdata | | ✓ |
+displayConditions | object | An object of the form `{delete: false, edit: true, create: true}`, with keys `delete`, `edit` and `create`, and a boolean value. These will each default to true if not specified. These booleans will act as an additional check before rendering the actions for create/delete/edit, as well as whether or not to render the actions column at all. | `{delete: true, edit: true, create: true}` | ✕ |
+labelOverrides | object | An object containing translation overrides. Currently accepts: `deleteError: (err, object) => { ... output a callout message }`. | | ✕ |

package/src/lib/ResponsiveButtonGroup/useResponsiveButtonGroupSizing.js

@@ -1,4 +1,4 @@
-import { cloneElement, useEffect, useState } from 'react';
+import { cloneElement, useEffect, useRef, useState } from 'react';
 import isEqual from 'lodash/isEqual';
 
 import { useResizeDetector } from 'react-resize-detector';
@@ -7,6 +7,15 @@ import { debounce } from 'lodash';
 const useResponsiveButtonGroupSizing = ({
   buttons = [],
 }) => {
+  const isMounted = useRef(false);
+  useEffect(() => {
+    isMounted.current = true;
+
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
   // Set up size measuring to be able to do fullWidth if and only if the button is too small for the container.
   // This way when the button is too _large_ for the container, we can measure it properly
   const { ref: containerRef, width: containerWidth } = useResizeDetector();
@@ -33,9 +42,11 @@ const useResponsiveButtonGroupSizing = ({
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(debounce(() => {
-    if (!cachedSizeArray?.length && sizeArray?.length) {
-      setCachedSizeArray(sizeArray);
-      setReady(true);
+    if (isMounted.current) {
+      if (!cachedSizeArray?.length && sizeArray?.length) {
+        setCachedSizeArray(sizeArray);
+        setReady(true);
+      }
     }
   }, 150), [cachedSizeArray, sizeArray]);
 

package/src/lib/SettingPage/SettingPage.js

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 
 import { EditableSettingsList } from '../EditableSettingsList';
 import { SettingsContext } from '../contexts';
-import { useSettingSection } from '../hooks';
+// Importing directly here to avoid cyclic dependency
+import useSettingSection from '../settingsHooks/useSettingSection';
 
 const SettingPage = ({
   intlKey: passedIntlKey,

package/src/lib/Typedown/Typedown.js

@@ -15,6 +15,7 @@ import selectorSafe from '../utils/selectorSafe';
 const Typedown = ({
   className,
   dataOptions,
+  displayClearItem = true,
   endOfList,
   id,
   input,
@@ -233,11 +234,13 @@ const Typedown = ({
           >
             {renderItem(input.value)}
           </div>
-          <IconButton
-            className={css.clearItem}
-            icon="times-circle-solid"
-            onClick={() => handleChange()}
-          />
+          {displayClearItem &&
+            <IconButton
+              className={css.clearItem}
+              icon="times-circle-solid"
+              onClick={() => handleChange()}
+            />
+          }
         </div>
       }
     </div>
@@ -247,6 +250,7 @@ const Typedown = ({
 Typedown.propTypes = {
   className: PropTypes.string,
   dataOptions: PropTypes.arrayOf(PropTypes.object),
+  displayClearItem: PropTypes.bool,
   endOfList: PropTypes.oneOfType([
     PropTypes.func,
     PropTypes.node,

package/src/lib/hooks/index.js

@@ -6,7 +6,6 @@ export { default as useKiwtSASQuery } from './useKiwtSASQuery';
 export { default as useHelperApp } from './useHelperApp';
 export { default as useLocalStorageState } from './useLocalStorageState';
 export { default as useQIndex } from './useQIndex';
-export { useSettings, useSettingSection, useAppSettings } from './settingsHooks';
 export { default as useKiwtFieldArray } from './useKiwtFieldArray';
 export { default as useCustomProperties } from './useCustomProperties';
 export { default as useMutateCustomProperties } from './useMutateCustomProperties';

package/src/lib/{hooks/settingsHooks → settingsHooks}/useAppSettings.js

@@ -1,6 +1,6 @@
 import { useQuery } from 'react-query';
 import { useOkapiKy } from '@folio/stripes/core';
-import { generateKiwtQueryParams } from '../../utils';
+import { generateKiwtQueryParams } from '../utils';
 
 const useAppSettings = ({
   endpoint,

package/src/lib/{hooks/settingsHooks → settingsHooks}/useSettingSection.js

@@ -1,7 +1,6 @@
-import React from 'react';
 import { useMutation, useQuery } from 'react-query';
 import { useOkapiKy } from '@folio/stripes/core';
-import { generateKiwtQueryParams } from '../../utils';
+import { generateKiwtQueryParams } from '../utils';
 
 const useSettingSection = ({
   sectionName,

package/src/lib/{hooks/settingsHooks → settingsHooks}/useSettings.js

@@ -6,12 +6,11 @@ import { useOkapiKy } from '@folio/stripes/core';
 
 import { Settings } from '@folio/stripes/smart-components';
 
-import { SettingPage, SettingPagePane } from '../../SettingPage';
-import { SettingsContext } from '../../contexts';
+import { SettingPage, SettingPagePane } from '../SettingPage';
+import { SettingsContext } from '../contexts';
 
-import { generateKiwtQueryParams, sortByLabel, toCamelCase } from '../../utils';
-import useKintIntl from '../useKintIntl';
-import useIntlKey from '../useIntlKey';
+import { generateKiwtQueryParams, sortByLabel, toCamelCase } from '../utils';
+import { useKintIntl, useIntlKey } from '../hooks';
 
 const useSettings = ({
   dynamicPageExclusions,

package/src/lib/utils/index.js

@@ -23,14 +23,3 @@ export { default as parseKiwtQueryGroups } from './parseKiwtQueryGroups';
 
 // HTTP Utils
 export { default as parseErrorResponse } from './parseErrorResponse';
-
-// Validators
-export {
-  composeValidators,
-  composeValidatorsWithArgs,
-  invalidNumber,
-  rangeOverflow,
-  rangeUnderflow,
-  required,
-  requiredObject
-} from './validators';

package/src/lib/validators/index.js

@@ -0,0 +1 @@
+export * from './validators';

package/styles/TypeDown.css

@@ -26,6 +26,18 @@
   z-index: 1000;
 }
 
+.menuButton {
+  composes: interactionStyles from "@folio/stripes-components/lib/sharedStyles/interactionStyles.css";
+  margin-bottom: 0;
+  border: none;
+  text-align: left;
+}
+
+.menuButton[data-selected=true], .selected {
+  background-color: var(--primary);
+  color: #fff;
+}
+
 /* Ensure dropdown menu has correct border radius when rendered above/below/floating */
 div[class^="overlay"][x-placement="top"]:not([x-out-of-boundaries=""]) > div[class^="dropdownMenu"] {
   border-radius: var(--radius) var(--radius) 0 0;
@@ -40,40 +52,28 @@ div[class^="overlay"][x-out-of-boundaries=""] > div[class^="dropdownMenu"] {
 }
 
 /* Ensure buttons also follow the proper border radius */
-div[class^="overlay"][x-placement="top"]:not([x-out-of-boundaries=""]) > div[class^="dropdownMenu"] > div[class^=listContainer] > button:first-child:before {
+div[class^="overlay"][x-placement="top"]:not([x-out-of-boundaries=""]) > div[class^="dropdownMenu"] > div[class^=listContainer] > button:first-child, div[class^="overlay"][x-placement="top"]:not([x-out-of-boundaries=""]) > div[class^="dropdownMenu"] > div[class^=listContainer] button:first-child:before {
   border-radius: var(--radius) var(--radius) 0 0;
 }
 
-div[class^="overlay"][x-placement="bottom"]:not([x-out-of-boundaries=""]) > div[class^="dropdownMenu"] > div[class^=listContainer] > button:last-child:before {
+div[class^="overlay"][x-placement="bottom"]:not([x-out-of-boundaries=""]) > div[class^="dropdownMenu"] > div[class^=listContainer] > button:last-child, div[class^="overlay"][x-placement="bottom"]:not([x-out-of-boundaries=""]) > div[class^="dropdownMenu"] > div[class^=listContainer] > button:last-child:before {
   border-radius: 0 0 var(--radius) var(--radius);
 }
 
 /* When floating, last and first buttons need rounding */
-div[class^="overlay"][x-out-of-boundaries=""] > div[class^="dropdownMenu"] > div[class^=listContainer] > button:first-child:before {
+div[class^="overlay"][x-out-of-boundaries=""] > div[class^="dropdownMenu"] > div[class^=listContainer] > button:first-child, div[class^="overlay"][x-out-of-boundaries=""] > div[class^="dropdownMenu"] > div[class^=listContainer] > button:first-child:before {
   border-radius: var(--radius) var(--radius) 0 0;
 }
 
-div[class^="overlay"][x-out-of-boundaries=""] > div[class^="dropdownMenu"] > div[class^=listContainer] > button:last-child:before {
+div[class^="overlay"][x-out-of-boundaries=""] > div[class^="dropdownMenu"] > div[class^=listContainer] > button:last-child, div[class^="overlay"][x-out-of-boundaries=""] > div[class^="dropdownMenu"] > div[class^=listContainer] > button:last-child:before {
   border-radius: 0 0 var(--radius) var(--radius);
 }
 
 /* If there is only one element in a floating list, it needs both corners rounding */
-div[class^="overlay"][x-out-of-boundaries=""] > div[class^="dropdownMenu"] > div[class^=listContainer] > button:only-child:before {
+div[class^="overlay"][x-out-of-boundaries=""] > div[class^="dropdownMenu"] > div[class^=listContainer] > button:only-child, div[class^="overlay"][x-out-of-boundaries=""] > div[class^="dropdownMenu"] > div[class^=listContainer] > button:only-child:before {
   border-radius: var(--radius);
 }
 
-.menuButton {
-  composes: interactionStyles from "@folio/stripes-components/lib/sharedStyles/interactionStyles.css";
-  margin-bottom: 0;
-  border: none;
-  text-align: left;
-}
-
-.menuButton[data-selected=true], .selected {
-  background-color: var(--primary);
-  color: #fff;
-}
-
 .menuButton[data-selected=false]:nth-child(even) {
   background-color: var(--color-fill-table-row-odd);
 }