@k-int/stripes-kint-components 3.2.1 → 4.2.0

package/src/index.js

@@ -20,31 +20,8 @@ export {
   useSASQQueryMeta
 } from './lib/hooks';
 
-// Useful utility functions
-export {
-  boldString,
-  generateKiwtQuery,
-  generateKiwtQueryParams,
-  groupCustomPropertiesByCtx,
-  highlightString,
-  matchString,
-  refdataOptions,
-  refdataQueryKey,
-  selectorSafe,
-  typedownQueryKey,
-  parseErrorResponse,
-} from './lib/utils';
-
-// Validators
-export {
-  composeValidators,
-  composeValidatorsWithArgs,
-  invalidNumber,
-  rangeOverflow,
-  rangeUnderflow,
-  required,
-  requiredObject,
-} from './lib/utils';
+// Useful utility stuff
+export * from './lib/utils';
 
 // Contexts
 export {

package/src/lib/ActionList/ActionListFieldArray.js

@@ -280,7 +280,14 @@ const ActionListFieldArray = forwardRef(({
                     aria-describedby={ariaIds.sub}
                     aria-labelledby={ariaIds.text}
                     disabled={editing}
-                    onClick={() => (actionFunction ? actionFunction() : () => null)}
+                    onClick={e => {
+                      e.stopPropagation();
+                      if (actionFunction) {
+                        return actionFunction();
+                      }
+
+                      return null;
+                    }}
                     to={action.to}
                   />
                 )}
@@ -295,7 +302,14 @@ const ActionListFieldArray = forwardRef(({
               action={action}
               ariaLabel={ariaLabel}
               disabled={editing}
-              onClick={() => (actionFunction ? actionFunction() : () => null)}
+              onClick={e => {
+                e.stopPropagation();
+                if (actionFunction) {
+                  return actionFunction();
+                }
+
+                return null;
+              }}
               to={action.to}
             />
           );

package/src/lib/CustomProperties/Config/CustomPropertiesLookup.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import '@folio/stripes-erm-components/test/jest/__mock__';
+
 import { MemoryRouter } from 'react-router-dom';
 
 import CustomPropertiesLookup from './CustomPropertiesLookup';

package/src/lib/CustomProperties/Config/CustomPropertiesSettings.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import '@folio/stripes-erm-components/test/jest/__mock__';
+
 import { Button, Pane, PaneHeader } from '@folio/stripes-testing';
 import { MemoryRouter } from 'react-router-dom';
 

package/src/lib/CustomProperties/Config/CustomPropertyForm.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import '@folio/stripes-erm-components/test/jest/__mock__';
+
 import { TextArea, TextField } from '@folio/stripes-testing';
-import { TestForm } from '@folio/stripes-erm-components/test/jest/helpers';
+import { TestForm } from '@folio/stripes-erm-testing';
 
 import refdata from '../../../../test/jest/refdata';
 

package/src/lib/CustomProperties/Config/CustomPropertyView.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import '@folio/stripes-erm-components/test/jest/__mock__';
+
 import { MemoryRouter } from 'react-router-dom';
 import { KeyValue } from '@folio/stripes-testing';
 

package/src/lib/CustomProperties/Edit/CustomPropertiesEdit.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import '@folio/stripes-erm-components/test/jest/__mock__';
+
 import { waitFor } from '@testing-library/react';
 
 import { MemoryRouter } from 'react-router-dom';

package/src/lib/CustomProperties/Edit/CustomPropertiesEditCtx.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import '@folio/stripes-erm-components/test/jest/__mock__';
+
 import { waitFor } from '@testing-library/react';
 
 import { MemoryRouter } from 'react-router-dom';

package/src/lib/CustomProperties/Edit/CustomPropertiesListField.js

@@ -41,7 +41,6 @@ const CustomPropertiesList = ({
         customProperty => value[customProperty.value] !== undefined
       ));
     }
-    return null;
   }, [availableCustomProperties, dirtying, pristine, value]);
 
   const handleDeleteCustomProperty = (customProperty, i) => {

package/src/lib/CustomProperties/Edit/CustomPropertiesListField.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import '@folio/stripes-erm-components/test/jest/__mock__';
+
 import { Button, KeyValue } from '@folio/stripes-testing';
-import { TestForm } from '@folio/stripes-erm-components/test/jest/helpers';
+import { TestForm } from '@folio/stripes-erm-testing';
 import { waitFor } from '@testing-library/react';
 
 import { initialValues } from './testResources';

package/src/lib/CustomProperties/Edit/CustomPropertyField.test.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import '@folio/stripes-erm-components/test/jest/__mock__';
+
 import { TextArea, MultiSelect, TextInput, Datepicker } from '@folio/stripes-testing';
 
-import { TestForm } from '@folio/stripes-erm-components/test/jest/helpers';
+import { TestForm } from '@folio/stripes-erm-testing';
 import CustomPropertyField from './CustomPropertyField';
 
 import { availableCustomProperties, customProperties, renderWithKintHarness } from '../../../../test/jest';

package/src/lib/CustomProperties/Edit/CustomPropertyFormCard.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import '@folio/stripes-erm-components/test/jest/__mock__';
+
 
 import CustomPropertyFormCard from './CustomPropertyFormCard';
 

package/src/lib/CustomProperties/Filter/CustomPropertiesFilter.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import '@folio/stripes-erm-components/test/jest/__mock__';
+
 import { MemoryRouter } from 'react-router-dom';
 import { Accordion, Button } from '@folio/stripes-testing';
 

package/src/lib/CustomProperties/Filter/CustomPropertiesFilterField.test.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { FieldArray } from 'react-final-form-arrays';
 
-import '@folio/stripes-erm-components/test/jest/__mock__';
-import { TestForm } from '@folio/stripes-erm-components/test/jest/helpers';
+
+import { TestForm } from '@folio/stripes-erm-testing';
 import { MemoryRouter } from 'react-router-dom';
 
 import CustomPropertiesFilterField from './CustomPropertiesFilterField';

package/src/lib/CustomProperties/Filter/CustomPropertiesFilterFieldArray.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import '@folio/stripes-erm-components/test/jest/__mock__';
-import { TestForm } from '@folio/stripes-erm-components/test/jest/helpers';
+
+import { TestForm } from '@folio/stripes-erm-testing';
 import { waitFor } from '@testing-library/react';
 import { Button } from '@folio/stripes-testing';
 import { FieldArray } from 'react-final-form-arrays';

package/src/lib/CustomProperties/Filter/CustomPropertiesFilterForm.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import '@folio/stripes-erm-components/test/jest/__mock__';
+
 import { Button } from '@folio/stripes-testing';
 import CustomPropertyFiltersForm from './CustomPropertiesFilterForm';
 

package/src/lib/CustomProperties/Filter/CustomPropertiesRule.test.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import '@folio/stripes-erm-components/test/jest/__mock__';
+
 import { MemoryRouter } from 'react-router-dom';
 import { Select } from '@folio/stripes-testing';
-import { TestForm } from '@folio/stripes-erm-components/test/jest/helpers';
+import { TestForm } from '@folio/stripes-erm-testing';
 
 import CustomPropertiesRule from './CustomPropertiesRule';
 import { renderWithKintHarness } from '../../../../test/jest';

package/src/lib/CustomProperties/View/CustomPropertiesView.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import '@folio/stripes-erm-components/test/jest/__mock__';
+
 import { waitFor } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 

package/src/lib/CustomProperties/View/CustomPropertiesViewCtx.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import '@folio/stripes-erm-components/test/jest/__mock__';
+
 import { MemoryRouter } from 'react-router-dom';
 import { waitFor } from '@testing-library/react';
 

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import '@folio/stripes-erm-components/test/jest/__mock__';
-import { TestForm } from '@folio/stripes-erm-components/test/jest/helpers';
+
+import { TestForm } from '@folio/stripes-erm-testing';
 import { FieldArray } from 'react-final-form-arrays';
 import EditableSettingsListFieldArray from './EditableSettingsListFieldArray';
 

package/src/lib/EditableSettingsList/SettingField/EditSettingValue.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import '@folio/stripes-erm-components/test/jest/__mock__';
-import { TestForm } from '@folio/stripes-erm-components/test/jest/helpers';
+
+import { TestForm } from '@folio/stripes-erm-testing';
 
 import EditSettingValue from './EditSettingValue';
 

package/src/lib/EditableSettingsList/SettingField/RenderSettingValue.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import '@folio/stripes-erm-components/test/jest/__mock__';
+
 import RenderSettingValue from './RenderSettingValue';
 
 import { renderWithKintHarness } from '../../../../test/jest/helpers';

package/src/lib/EditableSettingsList/SettingField/SettingField.test.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import '@folio/stripes-erm-components/test/jest/__mock__';
+
 
 import { waitFor } from '@testing-library/react';
 
-import { TestForm } from '@folio/stripes-erm-components/test/jest/helpers';
+import { TestForm } from '@folio/stripes-erm-testing';
 import { Button } from '@folio/stripes-testing';
 import { Field } from 'react-final-form';
 import SettingField from './SettingField';

package/src/lib/ResponsiveButtonGroup/ResponsiveButtonGroup.js

@@ -18,6 +18,7 @@ const propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   fullWidth: PropTypes.bool,
+  marginBottom0: PropTypes.bool,
   selectedIndex: PropTypes.number,
   tagName: PropTypes.string,
 };
@@ -44,6 +45,7 @@ const ResponsiveButtonGroup = (props) => {
     children: childButtons, // These MUST consist only of Button components
     className,
     fullWidth = false, // Only bother with this when buttonGroupWidth < ContainerWidth
+    marginBottom0, // Will ONLL control the margin of the dropdown button
     selectedIndex,
     tagName: Tag = 'div',
     ...rest
@@ -61,12 +63,18 @@ const ResponsiveButtonGroup = (props) => {
 
   const buttonThreshold = calculateCumulativeThreshold(cachedSizeArray, containerWidth);
 
-  const renderActionMenuToggle = useCallback(({ onToggle, triggerRef, keyHandler, open, ariaProps, getTriggerProps }) => (
+  const renderActionMenuToggle = useCallback(({ displayButtons, onToggle, triggerRef, keyHandler, open, ariaProps, getTriggerProps }) => (
     <Button
       ref={triggerRef}
-      buttonClass={css.dropdownButtonClass}
+      buttonClass={
+        classnames(
+          css.width100,
+          { [`${css.dropdownButtonClass}`]: (displayButtons?.length ?? 0) > 0 },
+          { [`${css.marginBottom}`]: !marginBottom0 },
+          { [`${css.marginBottom0}`]: marginBottom0 }
+        )
+      }
       buttonStyle={selectedIndex > buttonThreshold ? 'primary' : 'default'}
-      marginBottom0
       onClick={onToggle}
       onKeyDown={keyHandler}
       type="button"
@@ -75,7 +83,7 @@ const ResponsiveButtonGroup = (props) => {
     >
       <Icon icon={open ? 'triangle-up' : 'triangle-down'} iconPosition="end" />
     </Button>
-  ), [buttonThreshold, selectedIndex]);
+  ), [buttonThreshold, marginBottom0, selectedIndex]);
 
   const displayButtons = useMemo(() => (
     buttons?.slice(0, buttonThreshold + 1)?.map((button, index) => {
@@ -110,7 +118,7 @@ const ResponsiveButtonGroup = (props) => {
         key="responsiveButtonGroup-dropdown-toggle"
         className={css.dropdownClass}
         renderMenu={renderActionMenuContent}
-        renderTrigger={renderActionMenuToggle}
+        renderTrigger={(triggerProps) => renderActionMenuToggle({ displayButtons, ...triggerProps })}
       />
     ]
   ), [displayButtons, renderActionMenuContent, renderActionMenuToggle]);

package/src/lib/utils/README.md

@@ -31,6 +31,7 @@ Name | Type | Description | default | required
 --- | --- | --- | --- | ---
 options | object | An object with keys: `searchKey`, `filterKeys`, `sortKeys` and `stats`, which maps the incoming nsValues objects to a KIWT query. You can also pass arbitrary `key`/`value` pairs to append `key==value` onto the query. | | ✓ |
 nsValues | object | An object containing the actual query parameters to become the mapped KIWT query | | ✓ |
+encode | boolean | A boolean prop which determines if each query param chunk will be encoded using encodeURIComponent or not | true | ✕ |
 
 ## generateKiwtQueryParams
 A util function for generating an array of "KIWT" (K-Int Web-Toolkit) style backend query parameters from a SASQ query object
@@ -68,4 +69,5 @@ import { generateKiwtQueryParams } from '@k-int/stripes-kint-components'
 Name | Type | Description | default | required
 --- | --- | --- | --- | ---
 options | object | An object with keys: `searchKey`, `filterKeys`, `sortKeys` and `stats`, which maps the incoming nsValues objects to an KIWT query array. You can also pass arbitrary `key`/`value` pairs to append `key==value` onto the query. | | ✓ |
-nsValues | object | An object containing the actual query parameters to become the mapped KIWT query | | ✓ |
+nsValues | object | An object containing the actual query parameters to become the mapped KIWT query | | ✓ |
+encode | boolean | A boolean prop which determines if each query param chunk will be encoded using encodeURIComponent or not | true | ✕ |

package/src/lib/utils/generateKiwtQuery.js

@@ -1,8 +1,8 @@
 import generateKiwtQueryParams from './generateKiwtQueryParams';
 
-const generateKiwtQuery = (options, nsValues) => {
-  const paramsArray = generateKiwtQueryParams(options, nsValues);
-  return paramsArray.length ? '?' + paramsArray.map(p => encodeURI(p)).join('&') : '';
+const generateKiwtQuery = (options, nsValues, encode = true) => {
+  const paramsArray = generateKiwtQueryParams(options, nsValues, encode);
+  return paramsArray.length ? '?' + paramsArray.join('&') : '';
 };
 
 export default generateKiwtQuery;

package/src/lib/utils/generateKiwtQueryParams.js

@@ -1,4 +1,55 @@
-const generateKiwtQueryParams = (options, nsValues) => {
+const conditionalEncodeURIComponent = (str, encode = true) => {
+  if (encode) {
+    return encodeURIComponent(str);
+  }
+
+  return str;
+};
+
+const buildFilterOptionBlock = (opf, isNested = false, encode = true) => {
+  if (opf?.groupValues) {
+    const groupValues = opf.groupValues;
+
+    // Small utility function to add negation and brackets to the options block where necessary
+    const negationAndNesting = (str) => `${groupValues?.NOT ? '!' : ''}${(isNested || groupValues?.NOT) ? '(' : ''}${str}${(isNested || groupValues?.NOT) ? ')' : ''}`;
+
+    // First check whether groupValues is ANDed or ORed together
+    if (
+      (groupValues?.AND && Array.isArray(groupValues.AND)) ||
+      (groupValues?.OR && Array.isArray(groupValues.OR))
+    ) {
+      // AND takes precedence
+      if (groupValues.AND) {
+        return negationAndNesting(groupValues?.AND?.map(gvo => buildFilterOptionBlock(gvo, true, encode))?.join('&&'));
+      }
+      return negationAndNesting(groupValues?.OR?.map(gvo => buildFilterOptionBlock(gvo, true, encode))?.join('||'));
+    }
+    // If neither valid OR nor AND exist, ignore the block
+  } else if (opf?.values) {
+    // Build the values filter block
+    const innerFilters = [];
+    opf.values.forEach(opfv => {
+      if (opf.path) {
+        innerFilters.push(`${opf.path}${opf.comparator ?? '=='}${opfv}`);
+      } else {
+        innerFilters.push(opfv);
+      }
+    });
+
+    return conditionalEncodeURIComponent(innerFilters.join('||'), encode);
+  } else if (opf?.value) { // If no value OR values, then ignore
+    if (opf.path) {
+      const filterString = `${opf.path}${opf.comparator ?? '=='}${opf.value}`;
+      return conditionalEncodeURIComponent(filterString, encode);
+    }
+
+    return conditionalEncodeURIComponent(opf.value, encode);
+  }
+
+  return null;
+};
+
+const generateKiwtQueryParams = (options, nsValues, encode = true) => {
   const { qindex, query, filters, sort } = nsValues;
   const {
     searchKey = '',
@@ -18,7 +69,13 @@ const generateKiwtQueryParams = (options, nsValues) => {
           path: 'this.is.some.path'
           comparator: '=='
           value: 'this is a value' //OR
-          values: ['value1', 'value2']
+          values: ['value1', 'value2'] //OR
+          groupValues: { // This is an object containing objects either in groups of AND or OR. AND takes precedence
+            AND: [
+              // Objects of the same shape as an individual filters object, recursively.
+            ],
+            NOT: true // When this is set to true, the entire group is negated
+          }
         },
         ...
       ]
@@ -27,6 +84,9 @@ const generateKiwtQueryParams = (options, nsValues) => {
      * If no comparator is passed, it assumes '=='
      * Values overwrites value and will construct "filters=this.is.some.path==value1||this.is.some.path==value2"
      * Values WITHOUT path will construct "filters=value1||value2"
+     *
+     * GroupValues will override everything above, and group into brackets.
+     *
      * If more complex query building is desired, this should be done externally and passed in as a standalone 'value'
      */
     filters: optionsFilters,
@@ -36,29 +96,16 @@ const generateKiwtQueryParams = (options, nsValues) => {
   const paramsArray = [];
 
   if (query) {
-    paramsArray.push(...(qindex || searchKey).split(',')?.map(m => `match=${m}`));
-    paramsArray.push(`term=${query}`);
+    paramsArray.push(...(qindex || searchKey).split(',')?.map(m => `match=${conditionalEncodeURIComponent(m, encode)}`));
+    paramsArray.push(`term=${conditionalEncodeURIComponent(query, encode)}`);
   }
 
+  // Actually build the optionsFilters block (Moved logic to its own function to allow recursion)
   if (optionsFilters) {
     optionsFilters.forEach(opf => {
-      if (opf?.values) {
-        // Build the values filter block
-        const innerFilters = [];
-        opf.values.forEach(opfv => {
-          if (opf.path) {
-            innerFilters.push(`${opf.path}${opf.comparator ?? '=='}${opfv}`);
-          } else {
-            innerFilters.push(opfv);
-          }
-        });
-        paramsArray.push(`filters=${innerFilters.join('||')}`);
-      } else if (opf?.value) { // If no value OR values, then ignore
-        if (opf.path) {
-          paramsArray.push(`filters=${opf.path}${opf.comparator ?? '=='}${opf.value}`);
-        } else {
-          paramsArray.push(`filters=${opf.value}`);
-        }
+      const optionsBlock = buildFilterOptionBlock(opf, false, encode);
+      if (optionsBlock) {
+        paramsArray.push(`filters=${optionsBlock}`);
       }
     });
   }
@@ -84,13 +131,13 @@ const generateKiwtQueryParams = (options, nsValues) => {
           return `${filterName}==${fceValue ?? v}`;
         }).join('||');
 
-        paramsArray.push(`filters=${filterString}`);
+        paramsArray.push(`filters=${conditionalEncodeURIComponent(filterString, encode)}`);
       } else if (!filterKey) {
         // These filters have no key mapping so we just pass the values to the backend as-is.
-        paramsArray.push(...filterValues?.map(f => `filters=${f}`));
+        paramsArray.push(...filterValues?.map(f => `filters=${conditionalEncodeURIComponent(f, encode)}`));
       } else {
         const filterString = filterValues.map(v => `${filterKey}==${v}`).join('||');
-        paramsArray.push(`filters=${filterString}`);
+        paramsArray.push(`filters=${conditionalEncodeURIComponent(filterString, encode)}`);
       }
     });
   }
@@ -98,9 +145,10 @@ const generateKiwtQueryParams = (options, nsValues) => {
   if (optionsSort && optionsSort.length > 0) {
     optionsSort.forEach(os => {
       if (os.value) {
-        paramsArray.push(`sort=${os.value}`);
+        paramsArray.push(`sort=${conditionalEncodeURIComponent(os.value, encode)}`);
       } else if (os.path) { // If no path then ignore
-        paramsArray.push(`sort=${os.path};${os.direction ?? 'asc'}`);
+        const sortString = `${os.path};${os.direction ?? 'asc'}`;
+        paramsArray.push(`sort=${conditionalEncodeURIComponent(sortString, encode)}`);
       }
     });
   }
@@ -114,7 +162,9 @@ const generateKiwtQueryParams = (options, nsValues) => {
         term = term.replace(term, sortKeys[term]);
       }
 
-      return `sort=${term};${descending ? 'desc' : 'asc'}`;
+      const sortString = `${term};${descending ? 'desc' : 'asc'}`;
+
+      return `sort=${conditionalEncodeURIComponent(sortString, encode)}`;
     }));
   }
 
@@ -123,7 +173,7 @@ const generateKiwtQueryParams = (options, nsValues) => {
   }
 
   for (const [key, value] of Object.entries(rest)) {
-    paramsArray.push(`${key}=${value}`);
+    paramsArray.push(`${key}=${conditionalEncodeURIComponent(value, encode)}`);
   }
 
   return paramsArray;

package/src/lib/utils/index.js

@@ -19,6 +19,8 @@ export { default as toCamelCase } from './toCamelCase'; // I hate that this exis
 export { default as matchString } from './matchString';
 export { boldString, highlightString } from './highlightString';
 
+export { default as parseKiwtQueryGroups } from './parseKiwtQueryGroups';
+
 // HTTP Utils
 export { default as parseErrorResponse } from './parseErrorResponse';
 

package/src/lib/utils/parseErrorResponse.js

@@ -1,14 +1,15 @@
 const parseErrorResponse = async (responseObj) => {
   let errorResp;
+  const code = responseObj?.status;
   const contentType = [...responseObj?.headers]?.find(header => header[0] === 'content-type')?.[1];
 
   if (contentType.includes('json')) {
     errorResp = await responseObj.json();
   } else {
     try {
-      errorResp = { message: await responseObj.text() };
+      errorResp = { code, message: await responseObj.text() };
     } catch {
-      errorResp = { message: 'something went wrong' };
+      errorResp = { code, message: 'something went wrong' };
     }
   }
 

package/src/lib/utils/parseKiwtQueryGroups.js

@@ -0,0 +1,65 @@
+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];
+
+
+  // Ensure brackets are properly closed
+  let unclosedBrackets = 0;
+  const groupParser = (parseArray, nestLevel = 0) => {
+    const group = [];
+    // Iterate over each element in the array, recursively calling this when hitting brackets
+    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
+      if (nestLevel === 0 && element === ')') {
+        throw new Error('Unexpected character \')\' found, stopping parse.');
+      }
+
+      // At the levels below all of the following will need
+      skipCount = skipCount?.map((n, i) => {
+        if (i < nestLevel) {
+          return n + 1;
+        }
+        return n;
+      });
+
+      if (element !== '(' && element !== ')') {
+        group?.push(element);
+      } else if (element === ')') {
+        // Remove the corresponding skipCount level because we're going down a nesting level
+        skipCount.pop();
+        unclosedBrackets -= 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;
+
+        group.push(groupParser(parseArray.slice(index + 1, parseArray?.length), nestLevel + 1));
+      }
+
+      // If all is well, continue on parsing
+      return true;
+    });
+
+    return group;
+  };
+
+  const outputGroups = groupParser(splitString);
+
+  // Deal with unclosed parentheses
+  if (unclosedBrackets > 0) {
+    throw new Error('Found unclosed paretheses, stopping parse.');
+  }
+
+  return outputGroups;
+};
+
+export default parseKiwtQueryGroups;

package/styles/ResponsiveButtonGroup.css

@@ -1,5 +1,17 @@
 @import '@folio/stripes-components/lib/variables.css';
 
+.width100 {
+  width: 100%;
+}
+
+.marginBottom {
+  margin-bottom: var(--gutter);
+}
+
+.marginBottom0 {
+  margin-bottom: 0;
+}
+
 .buttonGroup {
   display: inline-flex;
   justify-content: space-between;
@@ -66,7 +78,6 @@
 .dropdownButtonClass {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
-  width: 100%;
 }
 
 .dropdownButtonClass::before {