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

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;

package/src/lib/utils/parseKiwtQueryGroups.js

@@ -1,22 +1,49 @@
+/**
+ * parseKiwtQueryGroups
+ * Given a string containing query groups like
+ *   (foo == bar && (bat == baz || bat == quux))
+ * parse it into a series of nested arrys like
+ * [
+ *   foo == bar, &&
+ *   [
+ *     bat == baz, ||, bat == quux
+ *   ]
+ * ]
+ * Nested groups are parsed recursively. There are four tokens:
+ *  ||
+ *  &&
+ *  (
+ *  )
+ *
+ * @param {string} query
+ * @returns [] tokenized query as a series of nested arrays
+ * @throws Error if parens are unmatched
+ */
 const parseKiwtQueryGroups = (query) => {
-  // Split out all operators and brackets, but keeping them all intact in the correct potition.
-  const splitString = query.split(/(?<=\|\||&&|\(|\))|(?=\|\||&&|\(|\))/);
-  // Keep track of what to skip over when wereturn from each level of nesting
-  let skipCount = [0];
+  // Split on tokens, keeping them all in tact in the correct position.
+  // This could be handled without the filter, which omits empty-string
+  // matches, using a look-behind:
+  //   query.split(/(?<=\|\||&&|\(|\))|(?=\|\||&&|\(|\))/);
+  // but Webkit hasn't implemented look-behind yet so that breaks Safari.
+  // https://bugs.webkit.org/show_bug.cgi?id=174931
+  // <sigh>
+  const splitString = query.split(/(\|\||&&|\(|\))/).filter(Boolean);
 
+  // Keep track of what to skip over when we return from each level of nesting
+  let skipCount = [0];
 
-  // Ensure brackets are properly closed
-  let unclosedBrackets = 0;
+  // Ensure parens are properly closed
+  let unclosedParens = 0;
   const groupParser = (parseArray, nestLevel = 0) => {
     const group = [];
-    // Iterate over each element in the array, recursively calling this when hitting brackets
+    // Iterate over each element in the array, recursively calling this when hitting parens
     parseArray?.every((element, index) => {
       if (skipCount[nestLevel] > 0) {
         skipCount[nestLevel] -= 1;
         return true; // Equivalent to BREAK -- move onto next element
       }
 
-      // Deal with unexpected extra closure
+      // abort: dangling close-paren
       if (nestLevel === 0 && element === ')') {
         throw new Error('Unexpected character \')\' found, stopping parse.');
       }
@@ -34,13 +61,13 @@ const parseKiwtQueryGroups = (query) => {
       } else if (element === ')') {
         // Remove the corresponding skipCount level because we're going down a nesting level
         skipCount.pop();
-        unclosedBrackets -= 1;
+        unclosedParens -= 1;
 
         return false; // Equivalent to BREAK -- go up a nesting level
       } else if (element === '(') {
         // Add next index to skipcount for the nesting
         skipCount.push(0);
-        unclosedBrackets += 1;
+        unclosedParens += 1;
 
         group.push(groupParser(parseArray.slice(index + 1, parseArray?.length), nestLevel + 1));
       }
@@ -54,8 +81,8 @@ const parseKiwtQueryGroups = (query) => {
 
   const outputGroups = groupParser(splitString);
 
-  // Deal with unclosed parentheses
-  if (unclosedBrackets > 0) {
+  // abort: dangling open-paren
+  if (unclosedParens > 0) {
     throw new Error('Found unclosed paretheses, stopping parse.');
   }
 

package/src/lib/utils/parseKiwtQueryGroups.test.js

@@ -0,0 +1,60 @@
+import parseKiwtQueryGroups from './parseKiwtQueryGroups';
+
+describe('parseKiwtQueryGroups', () => {
+  it('handles simple queries without parens', () => {
+    const result = parseKiwtQueryGroups('foo==bar');
+    expect(result).toEqual(['foo==bar']);
+  });
+
+  it('handles simple queries with parens', () => {
+    const result = parseKiwtQueryGroups('(foo==bar)');
+    expect(result).toEqual([['foo==bar']]);
+  });
+
+  it('handles conjunctions', () => {
+    const result = parseKiwtQueryGroups('(foo==bar&&bat==baz)');
+    expect(result).toEqual([['foo==bar', '&&', 'bat==baz']]);
+  });
+
+  it('handles disjunctions', () => {
+    const result = parseKiwtQueryGroups('(foo==bar||bat==baz)');
+    expect(result).toEqual([['foo==bar', '||', 'bat==baz']]);
+  });
+
+  it('handles nested clauses', () => {
+    const result = parseKiwtQueryGroups('(foo==bar&&(bat==baz||bat==quux))');
+    expect(result).toEqual([['foo==bar', '&&', ['bat==baz', '||', 'bat==quux']]]);
+  });
+
+  it('throws on dangling (', () => {
+    try {
+      parseKiwtQueryGroups('(foo==bar');
+    } catch (e) {
+      expect(e.message).toMatch('Found unclosed paretheses, stopping parse.');
+    }
+  });
+
+  it('throws on dangling )', () => {
+    try {
+      parseKiwtQueryGroups('bat==quux)');
+    } catch (e) {
+      expect(e.message).toMatch('Unexpected character \')\' found, stopping parse.');
+    }
+  });
+
+  it('throws on nested dangling (', () => {
+    try {
+      parseKiwtQueryGroups('(foo==bar&&(bat==baz||bat==quux)');
+    } catch (e) {
+      expect(e.message).toMatch('Found unclosed paretheses, stopping parse.');
+    }
+  });
+
+  it('throws on nested dangling )', () => {
+    try {
+      parseKiwtQueryGroups('foo==bar&&(bat==baz||bat==quux))&&(monkey==bagel||thunder==chicken)');
+    } catch (e) {
+      expect(e.message).toMatch('Unexpected character \')\' found, stopping parse.');
+    }
+  });
+});