@k-int/stripes-kint-components 1.5.0 → 2.0.0

package/src/lib/SettingPage/index.js

@@ -0,0 +1,2 @@
+export { default as SettingPagePane } from './SettingPagePane';
+export { default as SettingPage } from './SettingPage';

package/src/lib/Typedown/Typedown.js

@@ -4,7 +4,7 @@ import classnames from 'classnames';
 
 import get from 'lodash/get';
 
-import { EndOfList, IconButton, Popper } from '@folio/stripes/components';
+import { EndOfList, IconButton, Label, Popper } from '@folio/stripes/components';
 
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { interactionStyles } from '@folio/stripes-components/lib/sharedStyles/interactionStyles.css';
@@ -17,19 +17,29 @@ import selectorSafe from '../utils/selectorSafe';
 
 const Typedown = ({
   dataOptions,
+  endOfList,
+  id,
   input,
+  isSelected,
   filterPath,
+  label,
   meta,
   onChange,
   onType,
   renderFooter = null,
   renderListItem = null,
+  required,
   uniqueIdentificationPath = 'id'
 }) => {
   const selectedUniqueId = get(input.value, uniqueIdentificationPath);
 
   // Display data needs to be in line with data options but also able to react to default handleType
   const [displayData, setDisplayData] = useState(dataOptions);
+
+  // keep track of what we've typed and whether we've typed an exact match or not
+  const [currentlyTyped, setCurrentlyTyped] = useState('');
+  const [exactMatch, setExactMatch] = useState(false);
+
   useEffect(() => {
     setDisplayData(dataOptions);
   }, [dataOptions]);
@@ -46,6 +56,14 @@ const Typedown = ({
     } else {
       setDisplayData(dataOptions);
     }
+
+    setCurrentlyTyped(e.target.value);
+
+    if (displayData.length === 1 && get(displayData[0], filterPath) === e.target.value) {
+      setExactMatch(true);
+    } else {
+      setExactMatch(false);
+    }
   };
 
   // Hook to set up all the essentials
@@ -74,11 +92,11 @@ const Typedown = ({
       className={css.listItem}
     >
       {renderListItem ?
-        renderListItem(option) :
+        renderListItem(option, currentlyTyped, exactMatch) :
         get(option, uniqueIdentificationPath)
       }
     </div>
-  ), [renderListItem, uniqueIdentificationPath]);
+  ), [currentlyTyped, exactMatch, renderListItem, uniqueIdentificationPath]);
 
   const handleChange = useCallback(value => {
     input.onChange(value);
@@ -101,7 +119,7 @@ const Typedown = ({
           id="typedown-list"
         >
           {displayData?.length ? displayData?.map((d, index) => {
-            const isSelected = get(input.value, uniqueIdentificationPath) === get(d, uniqueIdentificationPath);
+            const isSelectedEval = isSelected ? isSelected(input.value, d) : get(input.value, uniqueIdentificationPath) === get(d, uniqueIdentificationPath);
             return (
               <button
                 key={`typedown-button-[${index}]`}
@@ -110,7 +128,7 @@ const Typedown = ({
                   css.fullWidth,
                   css.menuButton
                 )}
-                data-selected={isSelected}
+                data-selected={isSelectedEval}
                 id={`typedown-button-[${index}]`}
                 onClick={() => {
                   handleChange(d);
@@ -123,27 +141,30 @@ const Typedown = ({
               </button>
             );
           }) :
-          // TODO test this
-          <EndOfList />
+            endOfList || <EndOfList />
           }
         </div>
         {renderFooter &&
           <div
             ref={footerRef}
             className={css.footer}
-            id="typedown-footer"
+            id={`typedown-footer-${selectorSafe(input.name)}`}
           >
-            {renderFooter()}
+            {renderFooter(displayData, currentlyTyped, exactMatch)}
           </div>
         }
       </div>
     );
   }, [
+    currentlyTyped,
     displayData,
+    endOfList,
+    exactMatch,
     footerRef,
     handleChange,
     handleNextFocus,
     input,
+    isSelected,
     listKeyDownHandler,
     listRef,
     renderFooter,
@@ -174,6 +195,15 @@ const Typedown = ({
     <div
       ref={resizeRef}
     >
+      {label &&
+        <Label
+          htmlFor={id}
+          id={`${id}-label`}
+          required={required}
+        >
+          {label}
+        </Label>
+      }
       {renderSearchField()}
       <Popper
         key="typedown-menu-toggle"
@@ -222,12 +252,25 @@ const Typedown = ({
 
 Typedown.propTypes = {
   dataOptions: PropTypes.arrayOf(PropTypes.object),
+  endOfList: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.node,
+    PropTypes.element
+  ]),
+  filterPath: PropTypes.string,
+  id: PropTypes.string,
   input: PropTypes.object,
+  isSelected: PropTypes.func,
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element
+  ]),
   meta: PropTypes.object,
   onChange: PropTypes.func,
   onType: PropTypes.func,
   renderFooter: PropTypes.func,
   renderListItem: PropTypes.func,
+  required: PropTypes.bool,
   uniqueIdentificationPath: PropTypes.string
 };
 

package/src/lib/constants/customProperties.js

@@ -0,0 +1,9 @@
+export const TYPE_CLASS_PREFIX = 'com.k_int.web.toolkit.custprops.types.CustomProperty';
+export const BLOB_CLASS_NAME = 'com.k_int.web.toolkit.custprops.types.CustomPropertyBlob';
+export const BOOLEAN_CLASS_NAME = 'com.k_int.web.toolkit.custprops.types.CustomPropertyBoolean';
+export const CONTAINER_CLASS_NAME = 'com.k_int.web.toolkit.custprops.types.CustomPropertyContainer';
+export const DECIMAL_CLASS_NAME = 'com.k_int.web.toolkit.custprops.types.CustomPropertyDecimal';
+export const INTEGER_CLASS_NAME = 'com.k_int.web.toolkit.custprops.types.CustomPropertyInteger';
+export const REFDATA_CLASS_NAME = 'com.k_int.web.toolkit.custprops.types.CustomPropertyRefdata';
+export const REFDATA_DEFINITION_CLASS_NAME = 'com.k_int.web.toolkit.custprops.types.CustomPropertyRefdataDefinition';
+export const TEXT_CLASS_NAME = 'com.k_int.web.toolkit.custprops.types.CustomPropertyText';

package/src/lib/{Settings → contexts}/SettingsContext.js

@@ -1,4 +1,4 @@
-import React, { createContext } from 'react';
+import { createContext } from 'react';
 
 const SettingsContext = createContext();
 export default SettingsContext;

package/src/lib/contexts/index.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as SettingsContext } from './SettingsContext';

package/src/lib/hooks/index.js

@@ -6,4 +6,7 @@ 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 } 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/index.js

@@ -0,0 +1,2 @@
+export { default as useSettings } from './useSettings';
+export { default as useSettingSection } from './useSettingSection';

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

@@ -1,15 +1,16 @@
 import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+
 import { useQuery } from 'react-query';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { useOkapiKy } from '@folio/stripes/core';
 
 import { Settings } from '@folio/stripes/smart-components';
 
-import SettingPage from './SettingPage';
-import SettingPagePane from './SettingPagePane';
-import SettingsContext from './SettingsContext';
+import { SettingPage, SettingPagePane } from '../../SettingPage';
+import { SettingsContext } from '../../contexts';
 
-import { sortByLabel, toCamelCase } from './utils';
+import { sortByLabel, toCamelCase } from '../../utils';
 
 const useSettings = ({
   dynamicPageExclusions,
@@ -21,7 +22,7 @@ const useSettings = ({
 }) => {
   const ky = useOkapiKy();
   const intl = useIntl();
-  const extraPathItems = dynamicPageExclusions.map(dpe => `filters=section!=${dpe}`) 
+  const extraPathItems = dynamicPageExclusions.map(dpe => `filters=section!=${dpe}`);
   extraPathItems.push('max=500');
 
   const { data: appSettings = [], isLoading } = useQuery(
@@ -50,7 +51,7 @@ const useSettings = ({
     );
   });
 
-  const pageList = persistentPages.concat(dynamic).sort(sortByLabel)
+  const pageList = persistentPages.concat(dynamic).sort(sortByLabel);
 
   const SettingsContextProvider = ({ children }) => {
     return (
@@ -67,6 +68,13 @@ const useSettings = ({
     );
   };
 
+  SettingsContextProvider.propTypes = {
+    children: PropTypes.oneOfType([
+      PropTypes.func,
+      PropTypes.node
+    ])
+  };
+
   const SettingsComponent = (props) => {
     const settingsData = useContext(SettingsContext);
 

package/src/lib/hooks/typedownHooks/index.js

@@ -1,6 +1,3 @@
 export { default as useTypedown } from './useTypedown';
-export { default as useTypedownFooter } from './useTypedownFooter';
-export { default as useTypedownList } from './useTypedownList';
-export { default as useTypedownSearchField } from './useTypedownSearchField';
 export { default as useTypedownToggle } from './useTypedownToggle';
 export { default as useTypedownData } from './useTypedownData';

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

@@ -1,19 +1,22 @@
 import { useRef } from 'react';
 import { useResizeDetector } from 'react-resize-detector';
 
-// TODO swap to stripes-components export once available (Will need <= peer dep bump)
 import {
+  getFirstFocusable,
+  getLastFocusable,
   getNextFocusable,
-} from '../../utils/getFocusableElements';
+  getPreviousFocusable,
+} from '@folio/stripes/components';
+
+import {
+  DOWN_ARROW,
+  TAB,
+  UP_ARROW
+} from '../../constants/eventCodes';
 
 import selectorSafe from '../../utils/selectorSafe';
 
-import {
-  useTypedownToggle,
-  useTypedownFooter,
-  useTypedownSearchField,
-  useTypedownList
-} from '.';
+import useTypedownToggle from './useTypedownToggle';
 
 const useTypedown = (name) => {
   // SEARCHFIELD COMPONENT
@@ -23,11 +26,90 @@ const useTypedown = (name) => {
   const listRef = useRef();
   const triggerRef = useRef();
   const overlayRef = useRef();
-  const footerRef = useTypedownFooter(searchFieldComponent);
+  const footerRef = useRef();
+
+  const footer = document.getElementById(`typedown-footer-${selectorSafe(name)}`);
+  // Add an event listener to the footer, so that we can control tab behaviour between footer elements
+
+  if (footer && footer.getAttribute('hasListener') !== 'true') {
+    footer.addEventListener('keydown', e => {
+      // We want special behaviour on tab
+      if (e.code === TAB) {
+        // Prevent the default behaviour
+        e.preventDefault();
+        const focusFunc = e.shiftKey ? getPreviousFocusable : getNextFocusable;
+        const elem = focusFunc(footerRef.current, true, true, false, true);
+
+        if (elem) {
+          // Focus on next focusable element
+          elem.focus();
+        } else if (e.shiftKey) {
+          // We are at the beginning of the list, refocus on search bar
+          searchFieldComponent.focus();
+        } else {
+          // We are at the end of the list, move onto next focusable element in page
+          getNextFocusable(searchFieldComponent, false).focus();
+        }
+      }
+    });
+
+    footer.setAttribute('hasListener', 'true');
+  }
 
   // SET UP HANDLERS
-  const searchFieldKeyDownHandler = useTypedownSearchField(listRef, footerRef, searchFieldComponent);
-  const listKeyDownHandler = useTypedownList(listRef, footerRef, searchFieldComponent);
+  const searchFieldKeyDownHandler = e => {
+    if (e.code === UP_ARROW) {
+      const elem = getLastFocusable(listRef.current, true, true);
+      if (elem) {
+        elem.focus();
+      }
+    }
+
+    if (e.code === DOWN_ARROW) {
+      const elem = getFirstFocusable(listRef.current, true, true);
+      if (elem) {
+        elem.focus();
+      }
+    }
+
+    // Tab key (But not while shifting)
+    if (e.code === TAB && !e.shiftKey) {
+      e.preventDefault();
+      // If we have focusable elements in the footer, then focus on them, else unfocus searchbar
+      const elem = getNextFocusable(footerRef.current, true, true, true, true);
+      if (elem) {
+        elem.focus();
+      } else {
+        getNextFocusable(searchFieldComponent, false).focus();
+      }
+    }
+  };
+
+  const listKeyDownHandler = e => {
+    if (e.code === DOWN_ARROW) {
+      const elem = getNextFocusable(listRef.current, true, true);
+      elem.focus();
+    }
+
+    if (e.code === UP_ARROW) {
+      const elem = getPreviousFocusable(listRef.current, true, true);
+      elem.focus();
+    }
+
+    if (e.code === TAB) {
+      e.preventDefault();
+      let elem;
+      if (!e.shiftKey && !footerRef.current) {
+        elem = getNextFocusable(searchFieldComponent, false);
+      } else if (!e.shiftKey) {
+        elem = getNextFocusable(footerRef.current, true, true, true, true);
+      } else {
+        elem = searchFieldComponent;
+      }
+      elem.focus();
+    }
+  };
+
   const handleNextFocus = () => getNextFocusable(searchFieldComponent, false).focus();
 
   // SET UP VARIABLES

package/src/lib/hooks/useCustomProperties.js

@@ -0,0 +1,73 @@
+import PropTypes from 'prop-types';
+
+import { useQuery } from 'react-query';
+import { useOkapiKy } from '@folio/stripes/core';
+
+import { generateKiwtQuery } from '../utils';
+
+const useCustomProperties = ({
+  endpoint,
+  ctx,
+  nsValues = {
+    sort: 'id'
+  },
+  options = {
+    searchKey: 'label,name,description',
+    filterKeys: {
+      ContextKey: 'ctx'
+    },
+    stats: false,
+    max: 100
+  },
+  queryParams,
+  returnQueryObject = false,
+}) => {
+  const ky = useOkapiKy();
+
+  // Allow passing of 'false' for isNull
+  if (Array.isArray(ctx)) {
+    // If we have an array, append a context filter for each ctx given
+    nsValues.filters = ctx.map(c => {
+      if (c === 'isNull') {
+        return 'ContextWithoutKey.ctx isNull';
+      } else {
+        return `ContextKey.${c}`;
+      }
+    }).join(',');
+  } else if (ctx === 'isNull') { // isNull is a special case
+    nsValues.filters = 'ContextWithoutKey.ctx isNull';
+  } else if (ctx) {
+    // If we just have a string, append a single ctx filter
+    nsValues.filters = `ContextKey.${ctx}`;
+  } else {
+    nsValues.filters = null;
+  }
+
+  const query = generateKiwtQuery(options, nsValues);
+  const path = `${endpoint}${query}`;
+
+  const queryObject = useQuery(
+    ['stripes-kint-components', 'useCustomProperties', 'custprops', ctx, path],
+    () => ky(path).json(),
+    queryParams
+  );
+
+  if (returnQueryObject) {
+    return queryObject || {};
+  }
+
+  const { data: custprops } = queryObject;
+  return custprops || [];
+};
+
+useCustomProperties.propTypes = {
+  endpoint: PropTypes.string,
+  ctx: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string)
+  ]),
+  queryParams: PropTypes.object,
+  returnQueryObject: PropTypes.bool
+};
+
+export default useCustomProperties;

package/src/lib/hooks/useMutateCustomProperties.js

@@ -0,0 +1,62 @@
+import { useMutation } from 'react-query';
+
+import { useOkapiKy } from '@folio/stripes/core';
+
+const useMutateCustomProperties = ({
+  afterQueryCalls,
+  endpoint,
+  id,
+  queryParams,
+  returnQueryObject = {
+    post: false,
+    put: false,
+    delete: false
+  }
+}) => {
+  const returnObj = {};
+
+  const ky = useOkapiKy();
+
+  const deleteQueryObject = useMutation(
+    ['stripes-kint-components', 'useMutateCustomProperties', 'delete', id],
+    async () => ky.delete(`${endpoint}/${id}`).json()
+      .then(afterQueryCalls?.delete),
+    queryParams?.delete
+  );
+
+  const putQueryObject = useMutation(
+    ['stripes-kint-components', 'useMutateCustomProperties', 'put', id],
+    async (data) => ky.put(`${endpoint}/${id}`, { json: data }).json()
+      .then(afterQueryCalls?.put),
+    queryParams?.put
+  );
+
+  const postQueryObject = useMutation(
+    ['stripes-kint-components', 'useMutateCustomProperties', 'post'],
+    async (data) => ky.post(`${endpoint}`, { json: data }).json()
+      .then(afterQueryCalls?.post),
+    queryParams?.post
+  );
+
+  if (returnQueryObject?.delete) {
+    returnObj.delete = deleteQueryObject;
+  } else {
+    returnObj.delete = deleteQueryObject.mutateAsync;
+  }
+
+  if (returnQueryObject?.put) {
+    returnObj.put = putQueryObject;
+  } else {
+    returnObj.put = putQueryObject.mutateAsync;
+  }
+
+  if (returnQueryObject?.post) {
+    returnObj.post = postQueryObject;
+  } else {
+    returnObj.post = postQueryObject.mutateAsync;
+  }
+
+  return returnObj;
+};
+
+export default useMutateCustomProperties;

package/src/lib/hooks/useRefdata.js

@@ -4,20 +4,14 @@ import PropTypes from 'prop-types';
 import { useQuery } from 'react-query';
 import { useOkapiKy } from '@folio/stripes/core';
 
-import { generateKiwtQuery } from '../utils';
+import { generateKiwtQuery, refdataOptions } from '../utils';
 
 const useRefdata = ({
   endpoint,
   desc,
+  options = refdataOptions,
   queryParams,
   returnQueryObject = false,
-  options = {
-    filterKeys: {
-      DescKey: 'desc'
-    },
-    stats: false,
-    max: 100
-  }
 }) => {
   const ky = useOkapiKy();
 

package/src/lib/utils/index.js

@@ -3,3 +3,10 @@ export { default as generateKiwtQueryParams } from './generateKiwtQueryParams';
 export { default as selectorSafe } from './selectorSafe';
 
 export { default as buildUrl } from './buildUrl';
+
+export { default as refdataOptions } from './refdataOptions';
+
+// Settings utils
+export { default as renderHelpText } from './renderHelpText';
+export { default as sortByLabel } from './sortByLabel';
+export { default as toCamelCase } from './toCamelCase'; // I hate that this exists

package/src/lib/utils/refdataOptions.js

@@ -0,0 +1,7 @@
+export default {
+  filterKeys: {
+    DescKey: 'desc'
+  },
+  stats: false,
+  max: 100
+};

package/src/lib/{Settings/utils → utils}/renderHelpText.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import css from '../../../../styles/renderHelpText.css';
+import css from '../../../styles/renderHelpText.css';
 
 const renderHelpText = (id) => {
   return (

package/src/lib/{Settings/utils → utils}/sortByLabel.js

@@ -12,4 +12,4 @@ const sortByLabel = (a, b) => {
   return 0;
 };
 
-export default sortByLabel;
+export default sortByLabel;

package/test/helpers/index.js

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

package/test/helpers/translationsProperties.js

@@ -0,0 +1,40 @@
+import translations from '../../translations/stripes-kint-components/en';
+
+const translationsProperties = [
+  {
+    prefix: 'stripes-kint-components',
+    translations,
+  },
+  /* Don't think we're using any of the below rn */
+  {
+    prefix: 'stripes-core',
+    translations: {
+      'label.missingRequiredField': 'Please fill this in to continue',
+      'button.save': 'Save',
+    }
+  },
+  {
+    prefix: 'stripes-components',
+    translations: {
+      'saveAndClose': 'Save and close',
+      'cancel': 'Cancel',
+      'paneMenuActionsToggleLabel': 'Actions',
+      'collapseAll': 'Collapse all',
+      'button.edit': 'Edit'
+    },
+  },
+  {
+    prefix: 'stripes-smart-components',
+    translations: {
+      'permissionError': 'Sorry - your permissions do not allow access to this page.',
+      'searchAndFilter': 'Search and filter',
+      'hideSearchPane': 'Hide search pane',
+      'search': 'Search',
+      'resetAll': 'Reset all',
+      'searchResultsCountHeader': '"{count, number} {count, plural, one {record found} other {records found}}"',
+      'new': 'New'
+    },
+  }
+];
+
+export default translationsProperties;

package/test/jest/helpers/KintHarness.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Harness } from '@folio/stripes-erm-components/test/jest/helpers';
+
+import { SettingsContext } from '../../../src/lib/contexts';
+import translationsProperties from '../../helpers';
+
+
+export default function KintHarness({
+  children,
+  settingsValues = {
+    intlKey: 'stripes-kint-components',
+    refdataEndpoint: 'path/to/refdata',
+    settingEndpoint: 'path/to/settings',
+    templateEndpoint: 'path/to/templates'
+  },
+  translations = translationsProperties,
+  ...harnessProps
+}) {
+  return (
+    <SettingsContext.Provider value={settingsValues}>
+      <Harness
+        translations={translations}
+        {...harnessProps}
+      >
+        {children}
+      </Harness>
+    </SettingsContext.Provider>
+  );
+}
+
+KintHarness.propTypes = {
+  children: PropTypes.node,
+  settingsValues: PropTypes.object,
+  translations: PropTypes.object
+};

package/test/jest/helpers/index.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as renderWithKintHarness } from './renderWithKintHarness';