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

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/utils/index.js

@@ -3,3 +3,8 @@ export { default as generateKiwtQueryParams } from './generateKiwtQueryParams';
 export { default as selectorSafe } from './selectorSafe';
 
 export { default as buildUrl } from './buildUrl';
+
+// 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/{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';

package/test/jest/helpers/renderWithKintHarness.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import KintHarness from './KintHarness';
+
+const renderWithKintHarness = (children, context, translations, renderer = render) => renderer(
+  <KintHarness
+    settingsValues={context}
+    translations={translations}
+  >
+    {children}
+  </KintHarness>
+);
+
+export default renderWithKintHarness;

package/test/jest/jest-transformer.js

@@ -0,0 +1,4 @@
+const babelJest = require('babel-jest');
+const babelConf = require('../../.babelrc');
+
+module.exports = babelJest.createTransformer(babelConf);

package/test/jest/setupTests.js

@@ -0,0 +1 @@
+import 'regenerator-runtime/runtime';

package/translations/stripes-kint-components/en.json

@@ -4,6 +4,7 @@
   "settings.edit": "Edit",
   "settings.settingLoading": "Loading",
   "settings.finishEditing": "Finish editing",
+  "settings.valueFor": "Value for setting {name}",
 
   "actionList.save": "Save",
   "actionList.cancel": "Cancel",