@k-int/stripes-kint-components 4.4.3 → 4.5.0

package/src/lib/CustomProperties/View/CustomPropertyCard.js

@@ -34,7 +34,7 @@ const CustomPropertyCard = ({
   }
 
   const internalFalse = customProperty?.internal === false ||
-                        (customProperty?.internal === undefined && customPropertyDefinition.defaultInternal === false);
+    (customProperty?.internal === undefined && customPropertyDefinition.defaultInternal === false);
 
   const renderValue = () => {
     if (!customProperty) {
@@ -133,8 +133,8 @@ const CustomPropertyCard = ({
             }
           >
             {kintIntl.formatKintMessage({
-              id: 'customProperties.internalFalse',
-              overrideValue: labelOverrides.internalFalse
+              id: internalFalse ? 'customProperties.internalFalse' : 'customProperties.internalTrue',
+              overrideValue: internalFalse ? labelOverrides.internalFalse : labelOverrides.internalTrue,
             })}
           </KeyValue>
         </Col>

package/src/lib/QueryTypedown/QueryTypedown.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 
 import Typedown from '../Typedown';
@@ -12,11 +12,16 @@ const QueryTypedown = ({
 }) => {
   const [callPath, setCallPath] = useState(pathMutator(null, path));
   const data = dataFormatter(useTypedownData(path, callPath));
+  const [userQuery, setUserQuery] = useState('');
 
   const onType = e => {
-    setCallPath(pathMutator(e.target.value, path));
+    setUserQuery(e.target.value);
   };
 
+  useEffect(() => {
+    setCallPath(pathMutator(userQuery, path));
+  }, [path, pathMutator, userQuery]);
+
   return (
     <Typedown
       {...rest}
@@ -29,7 +34,7 @@ const QueryTypedown = ({
 QueryTypedown.propTypes = {
   dataFormatter: PropTypes.func,
   path: PropTypes.string,
-  pathMutator: PropTypes.func
+  pathMutator: PropTypes.func,
 };
 
 export default QueryTypedown;

package/src/lib/ResponsiveButtonGroup/ResponsiveButtonGroup.js

@@ -19,6 +19,7 @@ const propTypes = {
   className: PropTypes.string,
   dropdownTriggerProps: PropTypes.object,
   fullWidth: PropTypes.bool,
+  id: PropTypes.string,
   marginBottom0: PropTypes.bool,
   selectedIndex: PropTypes.number,
   tagName: PropTypes.string,
@@ -47,6 +48,7 @@ const ResponsiveButtonGroup = (props) => {
     className,
     dropdownTriggerProps = {},
     fullWidth = false, // Only bother with this when buttonGroupWidth < ContainerWidth
+    id,
     marginBottom0, // Will ONLL control the margin of the dropdown button
     selectedIndex,
     tagName: Tag = 'div',
@@ -61,6 +63,7 @@ const ResponsiveButtonGroup = (props) => {
     ready,
   } = useResponsiveButtonGroupSizing({
     buttons: childButtons,
+    id
   });
 
   const buttonThreshold = calculateCumulativeThreshold(cachedSizeArray, containerWidth);

package/src/lib/ResponsiveButtonGroup/useResponsiveButtonGroupSizing.js

@@ -5,8 +5,12 @@ import { useResizeDetector } from 'react-resize-detector';
 import { debounce } from 'lodash';
 
 const useResponsiveButtonGroupSizing = ({
+  id,
   buttons = [],
 }) => {
+  const eventString = 'responsive-button-group-loaded' + (id ? `-${id}` : '');
+  const loadedEvent = new Event(eventString);
+
   const isMounted = useRef(false);
   useEffect(() => {
     isMounted.current = true;
@@ -46,6 +50,7 @@ const useResponsiveButtonGroupSizing = ({
       if (!cachedSizeArray?.length && sizeArray?.length) {
         setCachedSizeArray(sizeArray);
         setReady(true);
+        document.dispatchEvent(loadedEvent);
       }
     }
   }, 150), [cachedSizeArray, sizeArray]);

package/src/lib/hooks/useHelperApp.js

@@ -1,6 +1,10 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
+
 import queryString from 'query-string';
+import isEqual from 'lodash/isEqual';
+
+let helperObject = {};
 
 const useHelperApp = (helpers) => {
   const history = useHistory();
@@ -18,6 +22,11 @@ const useHelperApp = (helpers) => {
   };
 
   useEffect(() => {
+    // Keep object outside of hook to avoid redraw, oncly change when keys change
+    if (!isEqual(Object.keys(helperObject), Object.keys(helpers))) {
+      helperObject = helpers;
+    }
+
     if (currentHelper !== query?.helper) {
       const newQuery = {
         ...query,
@@ -29,12 +38,7 @@ const useHelperApp = (helpers) => {
         search: `?${queryString.stringify(newQuery)}`
       });
     }
-  }, [
-    currentHelper,
-    history,
-    location,
-    query
-  ]);
+  }, [currentHelper, helpers, history, location, query]);
 
   // Set the HelperComponent
   const HelperComponent = useMemo(() => ((props) => {
@@ -42,7 +46,7 @@ const useHelperApp = (helpers) => {
 
     let Component = null;
 
-    Component = helpers[query?.helper];
+    Component = helperObject[query?.helper];
 
     if (!Component) return null;
 
@@ -52,15 +56,15 @@ const useHelperApp = (helpers) => {
         {...props}
       />
     );
-  }), [handleToggleHelper, query.helper, helpers]);
+  }), [handleToggleHelper, query.helper]);
 
   // Set up the helperToggleFunctions
   const helperToggleFunctions = {};
-  Object.keys(helpers).forEach(h => {
+  Object.keys(helperObject).forEach(h => {
     helperToggleFunctions[h] = () => handleToggleHelper(h);
   });
 
-  return { HelperComponent, helperToggleFunctions, isOpen };
+  return { currentHelper, HelperComponent, helperToggleFunctions, isOpen };
 };
 
 export default useHelperApp;