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

package/src/artifacts/coverage-jest/utils/refdataQueryKey/refdataQueryKey.js.html

@@ -97,7 +97,7 @@ export default refdataQueryKey;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-04T17:18:32.500Z
+                at 2026-02-17T13:52:17.739Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/utils/selectorSafe.js.html

@@ -130,7 +130,7 @@ export default selectorSafe;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-04T17:18:32.500Z
+                at 2026-02-17T13:52:17.739Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/utils/sortByLabel.js.html

@@ -115,7 +115,7 @@ export default sortByLabel;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-04T17:18:32.500Z
+                at 2026-02-17T13:52:17.739Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/utils/toCamelCase.js.html

@@ -112,7 +112,7 @@ export default toCamelCase;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-04T17:18:32.500Z
+                at 2026-02-17T13:52:17.739Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/utils/typedownQueryKey.js.html

@@ -97,7 +97,7 @@ export default typedownQueryKey;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-04T17:18:32.500Z
+                at 2026-02-17T13:52:17.739Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/validators/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-04T17:18:32.500Z
+                at 2026-02-17T13:52:17.739Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/validators/index.js.html

@@ -73,7 +73,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-04T17:18:32.500Z
+                at 2026-02-17T13:52:17.739Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/validators/validators.js.html

@@ -355,7 +355,7 @@ export {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-04T17:18:32.500Z
+                at 2026-02-17T13:52:17.739Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/lib/ButtonTypedown/ButtonTypedown.js

@@ -1,15 +1,38 @@
+import { useCallback } from 'react';
 import PropTypes from 'prop-types';
 
-import { DropdownButton } from '@folio/stripes/components';
+import { DropdownButton, Tooltip } from '@folio/stripes/components';
 
 import SearchField from '../SearchField';
 import Typedown from '../Typedown';
 
 const ButtonTypedown = ({
   id,
+  renderButtonItem,
   renderListItem,
+  tooltipProps: {
+    getTooltipText, // A special prop that selectedValue can be passed into
+    ...tooltipProps
+  } = {},
   ...typedownProps
 }) => {
+  const renderButtonFunc = useCallback((selectedValue) => {
+    if (renderButtonItem) {
+      return renderButtonItem(selectedValue);
+    }
+
+    return renderListItem(selectedValue);
+  }, [renderButtonItem, renderListItem]);
+
+  const usesTypedown = (
+    getTooltipText &&
+      typeof getTooltipText === 'function'
+    ) ||
+    (
+      tooltipProps?.text &&
+      tooltipProps.text !== ''
+    );
+
   return (
     <Typedown
       getDisplayValue={() => false}
@@ -27,18 +50,59 @@ const ButtonTypedown = ({
         triggerComponentRef,
         triggerId,
         typedownTriggerKeyDownHandler
-      }) => (
-        <DropdownButton
-          ref={triggerComponentRef}
-          buttonStyle="dropdownItem"
-          fullWidth
-          id={triggerId}
-          marginBottom0
-          onKeyDown={typedownTriggerKeyDownHandler}
-        >
-          {renderListItem(selectedValue)}
-        </DropdownButton>
-      )}
+      }) => {
+        const renderButton = ({
+          buttonRef,
+          ...buttonProps
+        }) => {
+          return (
+            <DropdownButton
+              ref={buttonRef}
+              buttonStyle="dropdownItem"
+              id={triggerId}
+              marginBottom0
+              onKeyDown={typedownTriggerKeyDownHandler}
+              {...buttonProps}
+            >
+              {renderButtonFunc(selectedValue)}
+            </DropdownButton>
+          );
+        };
+
+        if (!usesTypedown) {
+          return renderButton({
+            buttonRef: triggerComponentRef,
+          });
+        }
+
+        const typedownText = (
+          getTooltipText &&
+          typeof getTooltipText === 'function'
+        ) ?
+          getTooltipText(selectedValue) :
+          (tooltipProps?.text || '');
+
+        return (
+          <Tooltip
+            id={`button-typedown-trigger-${id}`}
+            placement="bottom"
+            text={typedownText}
+          >
+            {({ ref: tooltipRef, ariaIds }) => (
+              renderButton({
+                buttonRef: (node) => {
+                  // Contrive composed node from tooltip AND triggerComponent
+                  triggerComponentRef(node);
+                  if (tooltipRef.current !== node && !!node) {
+                    tooltipRef.current = node;
+                  }
+                },
+                'aria-labelledby': ariaIds.text
+              })
+            )}
+          </Tooltip>
+        );
+      }}
       {...typedownProps}
     />
   );

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