@k-int/stripes-kint-components 5.31.3 → 5.32.0

package/src/lib/SASQViewComponent/__mocks__/SASQViewComponent.js

@@ -0,0 +1,13 @@
+import { forwardRef, useImperativeHandle } from 'react';
+import SASQViewComponentRender from './SASQViewComponentRender';
+
+const SASQViewComponent = forwardRef((_props, ref) => {
+  // Use useImperativeHandle to expose a mock object
+  useImperativeHandle(ref, () => ({
+    // This is the object the ref will point to
+    viewRefData: 'mocked view data',
+  }));
+  return <SASQViewComponentRender/>
+});
+
+export default SASQViewComponent;

package/src/lib/SASQViewComponent/__mocks__/SASQViewComponentRender.js

@@ -0,0 +1,17 @@
+// We deal with the render part separately to the forwardRef part so that we might mock them separately as well
+// Store the original implementation so we can restore it with a single call on the mock
+const originalRenderImplementation = () => {
+  return (
+    <div>
+      SASQViewComponent
+    </div>
+  );
+};
+
+const SASQViewComponentRender = jest.fn(originalRenderImplementation);
+
+SASQViewComponentRender.mockResetToDefault = () => {
+  SASQViewComponentRender.mockImplementation(originalRenderImplementation);
+};
+
+export default SASQViewComponentRender;

package/src/lib/SASQViewComponent/__mocks__/index.js

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

package/src/lib/Settings/EditableSettingsList/EditableSettingsListFieldArray/EditableSettingsListFieldArray.js

@@ -51,7 +51,7 @@ const EditableSettingsListField = ({
     );
   }, [allowEdit, editing, handleSave, index, intlKey, intlNS, labelOverrides, setting, settingData, settingSubmitting]);
 
-  if (!render || render instanceof Function) {
+  if (!render || !(render instanceof Function)) {
     return <DefaultField key={`${setting}-default-field`} />;
   }
 

package/src/lib/Settings/Settings/Settings.js

@@ -0,0 +1,186 @@
+import { useCallback, useMemo, useRef } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Switch,
+  Route,
+} from 'react-router-dom';
+
+import { useStripes } from '@folio/stripes/core';
+
+import {
+  NavList,
+  NavListItem,
+  NavListSection,
+  Pane,
+} from '@folio/stripes/components';
+
+// This is a functional version of the component in stripes-smart-components, onto which we can add some extra functionality
+const Settings = ({
+  additionalRoutes,
+  // activeLink,
+  location,
+  match,
+  navPaneWidth = '30%',
+  paneProps = {},
+  paneTitle,
+  paneTitleRef: passedPaneTitleRef,
+  pages,
+  sections: passedSections,
+}) => {
+  const stripes = useStripes();
+  const internalPaneTitleRef = useRef();
+  const paneTitleRef = passedPaneTitleRef || internalPaneTitleRef;
+
+  const sections = useMemo(() => {
+    if (passedSections) {
+      return passedSections;
+    }
+
+    return ([{ label: '', pages: (pages || []) }]);
+  }, [pages, passedSections]);
+
+  const internalRoutes = useMemo(() => {
+    return sections.flatMap(section => {
+      return section.pages
+        .filter(p => !p.perm || stripes.hasPerm(p.perm))
+        .flatMap(p => ({
+          page: p,
+          component: p.component, // This was previously stripes connected... is this going to cause issues?
+        }));
+    });
+  }, [sections, stripes]);
+
+  const handlePaneFocus = useCallback(({ paneTitleRef: ptr }) => {
+    if (ptr) ptr.current.focus();
+  }, []);
+
+  // links in a given section
+  const navlinks = useCallback((section) => {
+    let activeLink = ''; // Store which link is active... there is DEFINITELY a better way to get this...
+
+    const navItems = section.pages.map((p) => {
+      const search = location.search || '';
+      const link = `${match.path}/${p.route}`;
+      let href = link;
+      let isActive = false;
+
+      // NavListItem allows for isActive to be set independently, rather than
+      // strict internal comparison of the href and the `activeLink`
+      // Since the location can be augmented after navigation through subsequent navigation
+      // or through appending a query string, it's best to
+      // solely rely on the pathname for appying the style vs equality.
+      if (location.pathname.startsWith(link)) {
+        // apply the query string for the active link only.
+        href = link + search;
+        activeLink = link;
+        isActive = true;
+      }
+      if (p.perm && !stripes.hasPerm(p.perm)) return null;
+
+      return (
+        <NavListItem
+          key={p.route}
+          isActive={isActive}
+          to={href}
+        >
+          {p.label}
+        </NavListItem>
+      );
+    }).filter(x => x !== null);
+
+    return (
+      <NavListSection
+        activeLink={activeLink}
+        label={section.label}
+      >
+        {navItems}
+      </NavListSection>
+    );
+  }, [location.pathname, location.search, match.path, stripes]);
+
+  const routes = useMemo(() => internalRoutes.map((internalRoute) => {
+    const Current = internalRoute.component;
+    return (<Route
+      key={internalRoute.page.route}
+      path={`${match.path}/${internalRoute.page.route}`}
+      render={props2 => <Current {...props2} label={internalRoute.page.label} stripes={stripes} />}
+    />);
+  }), [internalRoutes, match.path, stripes]);
+
+  return (
+    <>
+      <Pane
+        defaultWidth={navPaneWidth}
+        id="app-settings-nav-pane"
+        onMount={handlePaneFocus}
+        paneTitle={paneTitle || 'Module Settings'}
+        paneTitleRef={paneTitleRef}
+        {...paneProps}
+      >
+        {sections.map((section, index) => {
+          const {
+            label: {
+              props: sectionProps,
+            },
+          } = section;
+          const id = sectionProps && sectionProps.id ? sectionProps.id : 'Module Settings';
+
+          return (
+            <NavList
+              key={index}
+              aria-label={id}
+            >
+              {navlinks(section)}
+            </NavList>
+          );
+        })
+        }
+      </Pane>
+      <Switch>
+        {additionalRoutes}
+        {routes}
+      </Switch>
+    </>
+  );
+};
+
+Settings.propTypes = {
+  activeLink: PropTypes.string,
+  additionalRoutes: PropTypes.arrayOf(
+    PropTypes.object.isRequired,
+  ),
+  location: PropTypes.shape({
+    pathname: PropTypes.string,
+    search: PropTypes.string,
+  }),
+  match: PropTypes.shape({
+    path: PropTypes.string.isRequired,
+  }).isRequired,
+  navPaneWidth: PropTypes.string,
+  pages: PropTypes.arrayOf(
+    PropTypes.shape({
+      component: PropTypes.func.isRequired,
+      label: PropTypes.node.isRequired,
+      perm: PropTypes.string,
+      route: PropTypes.string.isRequired,
+    }),
+  ),
+  paneBackLink: PropTypes.string,
+  paneTitle: PropTypes.node,
+  paneTitleRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  sections: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.node.isRequired,
+      pages: PropTypes.arrayOf(
+        PropTypes.shape({
+          component: PropTypes.func.isRequired,
+          label: PropTypes.node.isRequired,
+          perm: PropTypes.string,
+          route: PropTypes.string.isRequired,
+        }),
+      ).isRequired,
+    }),
+  ),
+};
+
+export default Settings;

package/src/lib/Settings/Settings/index.js

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

package/src/lib/Settings/hooks/useSettings/useSettings.js

@@ -4,7 +4,10 @@ import PropTypes from 'prop-types';
 import { useQueries } from 'react-query';
 import { useOkapiKy, useStripes } from '@folio/stripes/core';
 
-import { Settings } from '@folio/stripes/smart-components';
+// We have swapped from the stripes-smart components settings page to our own internal one.
+// I'd honestly prefer to redo it all but at least this way we're in control
+// import { Settings } from '@folio/stripes/smart-components';
+import Settings from '../../Settings';
 
 import { SettingPage, SettingPagePane } from '../../SettingPage';
 import { SettingsContext } from '../../contexts';
@@ -153,14 +156,17 @@ const useSettings = (settingsProps = {}) => {
     return sectionMetaArray.map(((sma, idx) => {
       const SettingsContextProvider = ({ children }) => {
         const intlKey = useIntlKey(passedIntlKey, passedIntlNS);
+
+        const contextValue = useMemo(() => ({
+          intlKey: sma.intlKey ?? intlKey, // This is only here for backwards compatibility... is now grabbed from useIntlKey instead of what's passed in directly
+          refdataEndpoint: sma.refdataEndpoint ?? refdataEndpoint,
+          settingEndpoint: sma.settingEndpoint ?? settingEndpoint,
+          templateEndpoint: sma.templateEndpoint ?? templateEndpoint,
+        }), [intlKey]);
+
         return (
           <SettingsContext.Provider
-            value={{
-              intlKey: sma.intlKey ?? intlKey, // This is only here for backwards compatibility... is now grabbed from useIntlKey instead of what's passed in directly
-              refdataEndpoint: sma.refdataEndpoint ?? refdataEndpoint,
-              settingEndpoint: sma.settingEndpoint ?? settingEndpoint,
-              templateEndpoint: sma.templateEndpoint ?? templateEndpoint,
-            }}
+            value={contextValue}
           >
             {children}
           </SettingsContext.Provider>

package/src/lib/Typedown/Typedown.js

@@ -17,6 +17,7 @@ const Typedown = ({
   dataOptions,
   displayClearItem = true,
   displayValueWhileOpen = true,
+  dropdownPlacement = 'bottom-start',
   endOfList,
   getDisplayValue, // Can overrule displayValue entirely
   id,
@@ -131,6 +132,7 @@ const Typedown = ({
             handleType,
             input, // Pass input? Useful when not controlled I guess
             meta,
+            open,
             selectedValue,
             triggerComponentId,
             triggerComponentRef,
@@ -185,7 +187,7 @@ const Typedown = ({
            */
           onMouseDown={(e) => e.preventDefault()}
         >
-          {displayData?.length ? displayData?.map((d, index) => {
+          {displayData?.length ? displayData?.map((d, _index) => {
             const isSelectedEval = isSelected ? isSelected(input.value, d) : get(input.value, uniqueIdentificationPath) === get(d, uniqueIdentificationPath);
 
             const selectedCSS = selectedStyles ?? css.selectedMenuButton;
@@ -308,6 +310,7 @@ const Typedown = ({
           'onClick': (e) => { e.stopPropagation(); }  // prevent propagation of click events
         }}
         overlayRef={overlayRef}
+        placement={dropdownPlacement}
         portal={portal}
       >
         {dropDown()}

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

@@ -1 +1 @@
-export { default } from './useMutateGeneric';
+export { default } from './useMutateGeneric';

package/styles/TypeDown.css

@@ -20,8 +20,8 @@
   box-shadow: var(--shadow);
   border: 1px solid #ccc;
   margin-top: 0;
-  max-width: var(--searchWidth);
-  min-width: var(--searchWidth);
+  max-width: max(var(--searchWidth), 300px);
+  min-width: min(var(--searchWidth), 300px);
   pointer-events: all;
   z-index: 1000;
 }

package/test/helpers/test-implementor-translations.json

@@ -79,5 +79,6 @@
   "apply": "Apply",
   "tags": "Tags",
   "numberOfTags": "{count, number} {count, plural, one {Tag} other {Tags}}",
-  "newTagCreated": "New tag created"
+  "newTagCreated": "New tag created",
+  "found#Values": "Found {total} values"
 }

package/test/helpers/translationsProperties.js

@@ -8,7 +8,7 @@ const translationsProperties = [
     // Extra translations to allow us to properly test the translation pattern as if we had an implementing module
     prefix: 'ui-test-implementor',
     translations: testTranslations
-  }
+  },
 ];
 
 export default translationsProperties;

package/test/jest/setupTests.js

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