@k-int/stripes-kint-components 5.31.4 → 5.33.0

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

@@ -1,21 +1,42 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 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';
 
 import { generateKiwtQueryParams, sortByLabel, toCamelCase } from '../../../utils';
-import { useKintIntl, useIntlKey } from '../../../hooks';
+import { useIntlKey, useKintIntl } from '../../../hooks';
+
+const InternalSettingsContextProvider = ({ children, contextValue }) => (
+  <SettingsContext.Provider value={contextValue}>
+    {children}
+  </SettingsContext.Provider>
+);
+
+InternalSettingsContextProvider.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  contextValue: PropTypes.object,
+};
 
 // TODO work underway to make the settings hook more useful when trying to render multiple sections at a time
 const useSettings = (settingsProps = {}) => {
   const {
     allowGlobalEdit = true,
+    // DEPRECATED This prop will eventually be set to FALSE in a breaking change.
+    // This is a LEGACY prop, which ensured each page had context pre-wrapped.
+    // This is NOT required while using Settings component within kint-components
+    // to render dynamic pages, but the dynamic pages break if context is missing with
+    // the stripes smart components model
+    // Turn this OFF if having difficulties with settings page redraws (When using SASQ in particular)
+    contextPerPage = true,
     dynamicPageExclusions,
     intlKey: passedIntlKey,
     intlNS: passedIntlNS,
@@ -37,6 +58,7 @@ const useSettings = (settingsProps = {}) => {
   const ky = useOkapiKy();
   const stripes = useStripes();
   const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
+  const intlKey = useIntlKey(passedIntlKey, passedIntlNS);
 
   // Set up array of queryParams, pageLists etc etc ready for us to do all the work in a single place
 
@@ -151,47 +173,42 @@ const useSettings = (settingsProps = {}) => {
 
   const finalSections = useMemo(() => {
     return sectionMetaArray.map(((sma, idx) => {
-      const SettingsContextProvider = ({ children }) => {
-        const intlKey = useIntlKey(passedIntlKey, passedIntlNS);
-        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,
-            }}
-          >
-            {children}
-          </SettingsContext.Provider>
-        );
-      };
-
-      SettingsContextProvider.propTypes = {
-        children: PropTypes.oneOfType([
-          PropTypes.func,
-          PropTypes.node
-        ])
+      const contextValue = {
+        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,
       };
 
       const finalPermission = sma.sectionPermission ?? sectionPermission;
       if (!finalPermission || stripes.hasPerm(finalPermission)) {
         const dynamicPagesFromQueryReturn = getDynamicPages(queryReturnArray[idx], sma);
 
-        const finalPages = sma.pages ?? pages ?? (sma.persistentPages ?? persistentPages).concat(dynamicPagesFromQueryReturn.dynamic).sort(sortByLabel).map((p) => {
-          return {
-            ...p,
-            component: (pCProps) => (
-              <SettingsContextProvider>
-                <p.component {...pCProps} />
-              </SettingsContextProvider>
-            )
-          };
-        });
+        const finalPages = sma.pages ?? pages ??
+          (sma.persistentPages ?? persistentPages)
+            .concat(dynamicPagesFromQueryReturn.dynamic)
+            .sort(sortByLabel)
+            .map((p) => {
+              let component = p.component;
+              if (contextPerPage) {
+                component = (cprops) => (
+                  <InternalSettingsContextProvider contextValue={contextValue}>
+                    <p.component {...cprops} />
+                  </InternalSettingsContextProvider>
+                );
+              }
+
+              return {
+                ...p,
+                component,
+                Provider: InternalSettingsContextProvider,
+                contextValue,
+              };
+            });
 
         return {
           ...sma,
-          SettingsContextProvider,
+          SettingsContextProvider: InternalSettingsContextProvider,
           ...dynamicPagesFromQueryReturn,
           pageList: finalPages, // DEPRECATED Here for backwards compatibility
           pages: finalPages // ASSUMPTION MADE THAT INDICES REMAIN THE SAME
@@ -199,46 +216,47 @@ const useSettings = (settingsProps = {}) => {
       }
       return null;
     })).filter(Boolean);
-  }, [getDynamicPages, pages, passedIntlKey, passedIntlNS, persistentPages, queryReturnArray, refdataEndpoint, sectionMetaArray, sectionPermission, settingEndpoint, stripes, templateEndpoint]);
+  }, [contextPerPage, getDynamicPages, intlKey, pages, persistentPages, queryReturnArray, refdataEndpoint, sectionMetaArray, sectionPermission, settingEndpoint, stripes, templateEndpoint]);
 
-  const pageList = useMemo(() => {
+  const outputPages = useMemo(() => {
     let finalPages = null;
-    if (finalSections && finalSections.length === 1 && !renderSingleSection) {
+    if (finalSections?.length === 1 && !renderSingleSection) {
       finalPages = pages ?? finalSections[0].pages;
     }
 
     return finalPages;
   }, [finalSections, pages, renderSingleSection]);
 
-  const passedSections = useMemo(() => {
+  const outputSections = useMemo(() => {
     if (finalSections.length > 1 || (finalSections.length === 1 && renderSingleSection)) {
       return finalSections;
     }
     return null;
   }, [finalSections, renderSingleSection]);
 
-  const SettingsComponent = (props) => {
+  const SettingsComponent = useCallback((props) => {
     return (
       <Settings
-        pages={pageList}
+        pages={outputPages}
         paneTitle={
           kintIntl.formatKintMessage({
             id: 'meta.title'
           })}
-        sections={passedSections}
+        sections={outputSections}
         {...props}
       />
     );
-  };
+  }, [kintIntl, outputPages, outputSections]);
 
   return {
     isLoading,
-    pageList,
-    sections: finalSections,
+    pageList: outputPages,
+    sections: outputSections,
     SettingsComponent,
     // This doesn't make much sense if there is more than one section, here to avoid breaking changes
-    SettingsContextProvider: (finalSections && finalSections.length === 1) ? finalSections[0].SettingsContextProvider : ({ children }) => <> { children } </>
+    SettingsContextProvider: (finalSections?.length === 1) ? finalSections[0].SettingsContextProvider : ({ children }) => <> { children } </>
   };
 };
 
 export default useSettings;
+

package/src/lib/Settings/index.js

@@ -9,6 +9,9 @@ export {
   SettingPagePane,
 } from './SettingPage';
 
+// Internal replacement for stripes-smart-components Settings component
+export { default as Settings } from './Settings';
+
 // EditableSettingsList
 export * from './EditableSettingsList';
 

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/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;
 }