@k-int/stripes-kint-components 5.3.1 → 5.5.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# [5.5.0](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.4.0...v5.5.0) (2024-03-15)
+
+
+### Bug Fixes
+
+* FormModal handleSUbmit clears form ([2abf0dd](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/2abf0dddd042a0ea79970aa09b01ecca073d5705))
+
+
+### Features
+
+* SASQLookupComponent rowNavigation ([57aa5d2](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/57aa5d231f2700e2930ff26726d8445d03bd9001))
+
+# [5.4.0](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.3.1...v5.4.0) (2024-02-29)
+
+
+### Features
+
+* EditSettingValue: refdata default sort ([9e7f530](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/9e7f5301bb43050ba263b303e0e05462b1268a8a))
+* matchString and highlightString improvements ([83f98e9](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/83f98e9ebc678c3a893504a9959d35f9e1318b7b))
+
 ## [5.3.1](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.3.0...v5.3.1) (2024-01-26)
 
 

package/es/lib/EditableSettingsList/SettingField/EditSettingValue.js

@@ -37,10 +37,14 @@ const EditSettingValue = props => {
       if (refdata.length > 0 && refdata.length <= 4) {
         RefdataComponent = _RefdataButtons.default;
       }
+
+      // Adding default sort to refdata object in ascending order by label
+      const sortByLabel = (a, b) => a.label.localeCompare(b.label);
+      const sortedRefdata = refdata.sort(sortByLabel);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
         "aria-label": fieldLabel,
         component: RefdataComponent,
-        dataOptions: refdata,
+        dataOptions: sortedRefdata,
         name: "".concat(input.name, ".value")
       });
     case 'Password':

package/es/lib/FormModal/FormModal.js

@@ -41,12 +41,17 @@ const FormModal = _ref => {
         onClose(e);
         restart();
       };
+      const handleSaveAndClear = function () {
+        handleSubmit(...arguments);
+        restart();
+      };
       const renderFooter = () => {
         if (footer) {
           return footer({
             formState,
-            handleSubmit,
-            handleClose
+            handleSubmit: handleSaveAndClear,
+            handleClose,
+            handleSubmitNoRestart: handleSubmit
           });
         }
         const {
@@ -59,7 +64,7 @@ const FormModal = _ref => {
             buttonStyle: "primary",
             disabled: submitting || invalid || pristine,
             marginBottom0: true,
-            onClick: handleSubmit,
+            onClick: handleSaveAndClear,
             type: "submit",
             children: kintIntl.formatKintMessage({
               id: 'saveAndClose',
@@ -75,15 +80,12 @@ const FormModal = _ref => {
           })]
         });
       };
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)("form", {
-        onSubmit: handleSubmit,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Modal, {
-          enforceFocus: false,
-          footer: renderFooter(),
-          onClose: handleClose,
-          ...modalProps,
-          children: children
-        })
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Modal, {
+        enforceFocus: false,
+        footer: renderFooter(),
+        onClose: handleClose,
+        ...modalProps,
+        children: children
       });
     }
   });

package/es/lib/SASQLookupComponent/SASQLookupComponent.js

@@ -32,6 +32,8 @@ const SASQLookupComponent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
     noSearchField,
     persistedPanesetProps = {},
     RenderBody,
+    rowNavigation = true,
+    // Default navigation onRowClick
     sasqProps,
     searchFieldAriaLabel,
     searchFieldProps
@@ -221,6 +223,7 @@ const SASQLookupComponent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
             intlNS: passedIntlNS,
             labelOverrides: labelOverrides,
             query: query,
+            rowNavigation: rowNavigation,
             toggleFilterPane: toggleFilterPane,
             ...restOfInfiniteQueryProps,
             ...sasqRenderProps,
@@ -253,6 +256,7 @@ SASQLookupComponent.propTypes = {
   RenderBody: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
   resource: _propTypes.default.object,
   resultColumns: _propTypes.default.arrayOf(_propTypes.default.object),
+  rowNavigation: _propTypes.default.bool,
   sasqProps: _propTypes.default.object,
   searchFieldAriaLabel: _propTypes.default.string,
   searchFieldProps: _propTypes.default.object

package/es/lib/SASQLookupComponent/TableBody/TableBody.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactRouterDom = require("react-router-dom");
 var _components = require("@folio/stripes/components");
@@ -11,7 +12,7 @@ var _NoResultsMessage = _interopRequireDefault(require("../../NoResultsMessage")
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const TableBody = _ref => {
-  var _query$sort;
+  var _query$sort, _match$params2;
   let {
     data,
     error,
@@ -23,10 +24,15 @@ const TableBody = _ref => {
     isLoading,
     labelOverrides = {},
     match,
-    mclProps,
+    mclProps: {
+      formatter = {},
+      ...mclProps
+    },
     onSort,
     path,
     resultColumns,
+    rowNavigation = true,
+    // Default navigation onRowClick
     toggleFilterPane,
     query
   } = _ref;
@@ -44,11 +50,48 @@ const TableBody = _ref => {
 
   // Build the list of visible columns
   const visibleColumns = resultColumns.map(e => e.propertyPath);
+  const getRowUrl = (0, _react.useCallback)(rowData => {
+    const baseUrl = "".concat(path, "/").concat(rowData === null || rowData === void 0 ? void 0 : rowData.id);
+    return {
+      url: "".concat(baseUrl).concat(location === null || location === void 0 ? void 0 : location.search),
+      path,
+      baseUrl,
+      location
+    };
+  }, [location, path]);
+  const getEnhancedFormatter = (0, _react.useCallback)(() => {
+    const enhancedFormatter = {};
+    for (const [key, value] of Object.entries(formatter)) {
+      enhancedFormatter[key] = item => value({
+        ...item,
+        defaultRowUrl: getRowUrl(item)
+      });
+    }
+    return enhancedFormatter;
+  }, [formatter, getRowUrl]);
+  const getOnRowClick = (0, _react.useCallback)(() => {
+    if (rowNavigation) {
+      return (_e, rowData) => {
+        history.push(getRowUrl(rowData).url);
+      };
+    }
+    return null;
+  }, [getRowUrl, history, rowNavigation]);
+  const isSelected = (0, _react.useCallback)(_ref2 => {
+    var _match$params;
+    let {
+      item
+    } = _ref2;
+    return item.id === (match === null || match === void 0 || (_match$params = match.params) === null || _match$params === void 0 ? void 0 : _match$params.id);
+  }, [match === null || match === void 0 || (_match$params2 = match.params) === null || _match$params2 === void 0 ? void 0 : _match$params2.id]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MultiColumnList, {
     autosize: true,
     columnMapping: columnMapping,
     contentData: data === null || data === void 0 ? void 0 : data.results,
+    formatter: getEnhancedFormatter() // Pass enhanced formatter
+    ,
     hasMargin: true,
+    interactive: rowNavigation,
     isEmptyMessage: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NoResultsMessage.default, {
       error,
       filterPaneIsVisible: filterPaneVisible,
@@ -60,18 +103,10 @@ const TableBody = _ref => {
       searchTerm: query.query,
       toggleFilterPane
     }),
-    isSelected: _ref2 => {
-      var _match$params;
-      let {
-        item
-      } = _ref2;
-      return item.id === (match === null || match === void 0 || (_match$params = match.params) === null || _match$params === void 0 ? void 0 : _match$params.id);
-    },
+    isSelected: isSelected,
     onHeaderClick: onSort,
     onNeedMoreData: onNeedMoreData,
-    onRowClick: (_e, rowData) => {
-      history.push("".concat(path, "/").concat(rowData === null || rowData === void 0 ? void 0 : rowData.id).concat(location === null || location === void 0 ? void 0 : location.search));
-    },
+    onRowClick: getOnRowClick(),
     pagingType: "click",
     sortDirection: sortOrder.startsWith('-') ? 'descending' : 'ascending',
     sortOrder: sortOrder.replace(/^-/, '').replace(/,.*/, ''),
@@ -101,6 +136,7 @@ TableBody.propTypes = {
   path: _propTypes.default.string.isRequired,
   query: _propTypes.default.object,
   resultColumns: _propTypes.default.arrayOf(_propTypes.default.object),
+  rowNavigation: _propTypes.default.bool,
   toggleFilterPane: _propTypes.default.func
 };
 var _default = exports.default = TableBody;

package/es/lib/utils/highlightString.js

@@ -9,21 +9,37 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const highlightString = function (match, str) {
   let ignoreNull = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-  const [parts, regex] = (0, _matchString.default)(match, str, ignoreNull);
-  return parts.filter(part => part).map((part, i) => regex.test(part) ? /*#__PURE__*/(0, _jsxRuntime.jsx)("mark", {
-    children: part
-  }, i) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-    children: part
-  }, i));
+  let simpleSplit = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
+  const [parts, regex] = (0, _matchString.default)(match, str, ignoreNull, simpleSplit);
+  return parts.map((part, i) => {
+    // RegExp is stateful, set up a new one to work with
+    const immutableRegex = new RegExp(regex);
+    if (immutableRegex.exec(part) !== null) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("mark", {
+        children: part
+      }, i);
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: part
+    }, i);
+  });
 };
 exports.highlightString = highlightString;
 const boldString = function (match, str) {
   let ignoreNull = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-  const [parts, regex] = (0, _matchString.default)(match, str, ignoreNull);
-  return parts.filter(part => part).map((part, i) => regex.test(part) ? /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
-    children: part
-  }, i) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-    children: part
-  }, i));
+  let simpleSplit = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
+  const [parts, regex] = (0, _matchString.default)(match, str, ignoreNull, simpleSplit);
+  return parts.map((part, i) => {
+    // RegExp is stateful, set up a new one to work with
+    const immutableRegex = new RegExp(regex);
+    if (immutableRegex.exec(part) !== null) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
+        children: part
+      }, i);
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: part
+    }, i);
+  });
 };
 exports.boldString = boldString;

package/es/lib/utils/matchString.js

@@ -7,13 +7,28 @@ exports.default = void 0;
 var _escapeRegExp = _interopRequireDefault(require("lodash/escapeRegExp"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const matchString = function (match, str) {
+  var _str$split2;
   let ignoreNull = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-  const regex = new RegExp("".concat(match.split(/(\s+)/).filter(h => h.trim()).map(hl => '(' + (0, _escapeRegExp.default)(hl) + ')').join('|')), 'gi');
+  let simpleSplit = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
+  // Simple regex split -- this is default behaviour
+  const regexSimple = new RegExp("".concat(match.split(/(\s+)/).filter(h => h.trim()).map(hl => '(' + (0, _escapeRegExp.default)(hl) + ')').join('|')), 'gi');
+
+  // Split Elivis "The King" Presley into [Elvis, The King, Presley]
+  const regex = new RegExp("".concat(match.split(/(?!\B"[^"]*)\s+(?![^"]*"\B)/).filter(h => h.trim()).map(quotedSection => {
+    if (quotedSection.charAt(0) === '"' && quotedSection.charAt(quotedSection.length - 1) === '"') {
+      return quotedSection.slice(1, quotedSection.length - 1);
+    }
+    return quotedSection;
+  }).map(hl => '(' + (0, _escapeRegExp.default)(hl) + ')').join('|')), 'gi');
   if (ignoreNull && !match) {
     const nullRegex = /a^/gi; // Should match nothing
 
     return [[str], nullRegex];
   }
-  return [str.split(regex), regex];
+  if (simpleSplit) {
+    var _str$split;
+    return [(_str$split = str.split(regexSimple)) === null || _str$split === void 0 ? void 0 : _str$split.filter(s => s && s.trim()), regexSimple];
+  }
+  return [(_str$split2 = str.split(regex)) === null || _str$split2 === void 0 ? void 0 : _str$split2.filter(s => s && s.trim()), regex];
 };
 var _default = exports.default = matchString;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k-int/stripes-kint-components",
-  "version": "5.3.1",
+  "version": "5.5.0",
   "description": "Stripes Component library for K-Int specific applications",
   "sideEffects": [
     "*.css"
@@ -52,7 +52,7 @@
     "@semantic-release/npm": "^11.0.0",
     "babel-eslint": "^10.1.0",
     "babel-plugin-const-enum": "^1.0.1",
-    "babel-plugin-module-resolver": "^4.0.0",
+    "babel-plugin-module-resolver": "^5.0.0",
     "babel-plugin-require-context-hook": "^1.0.0",
     "babel-plugin-transform-async-to-promises": "^0.8.15",
     "babel-polyfill": "^6.26.0",
@@ -74,7 +74,7 @@
     "react-router-dom": "^5.2.0",
     "redux": "^4.0.0",
     "redux-observable": "^1.2.0",
-    "regenerator-runtime": "^0.13.3",
+    "regenerator-runtime": "^0.14.0",
     "rxjs": "^6.6.3",
     "semantic-release": "^22.0.6",
     "sinon": "^14.0.0",

package/renovate.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:base"
+  ]
+}

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

@@ -36,11 +36,15 @@ const EditSettingValue = (props) => {
         RefdataComponent = RefdataButtons;
       }
 
+      // Adding default sort to refdata object in ascending order by label
+      const sortByLabel = (a, b) => (a.label.localeCompare(b.label));
+      const sortedRefdata = refdata.sort(sortByLabel);
+
       return (
         <Field
           aria-label={fieldLabel}
           component={RefdataComponent}
-          dataOptions={refdata}
+          dataOptions={sortedRefdata}
           name={`${input.name}.value`}
         />
       );

package/src/lib/FormModal/FormModal.js

@@ -27,9 +27,14 @@ const FormModal = ({
           restart();
         };
 
+        const handleSaveAndClear = (...onSaveProps) => {
+          handleSubmit(...onSaveProps);
+          restart();
+        };
+
         const renderFooter = () => {
           if (footer) {
-            return footer({ formState, handleSubmit, handleClose });
+            return footer({ formState, handleSubmit: handleSaveAndClear, handleClose, handleSubmitNoRestart: handleSubmit });
           }
 
           const { invalid, pristine, submitting } = formState;
@@ -39,7 +44,7 @@ const FormModal = ({
                 buttonStyle="primary"
                 disabled={submitting || invalid || pristine}
                 marginBottom0
-                onClick={handleSubmit}
+                onClick={handleSaveAndClear}
                 type="submit"
               >
                 {kintIntl.formatKintMessage({
@@ -61,18 +66,14 @@ const FormModal = ({
         };
 
         return (
-          <form
-            onSubmit={handleSubmit}
+          <Modal
+            enforceFocus={false}
+            footer={renderFooter()}
+            onClose={handleClose}
+            {...modalProps}
           >
-            <Modal
-              enforceFocus={false}
-              footer={renderFooter()}
-              onClose={handleClose}
-              {...modalProps}
-            >
-              {children}
-            </Modal>
-          </form>
+            {children}
+          </Modal>
         );
       }}
     </Form>

package/src/lib/SASQLookupComponent/SASQLookupComponent.js

@@ -44,6 +44,7 @@ const SASQLookupComponent = forwardRef((props, ref) => {
     noSearchField,
     persistedPanesetProps = {},
     RenderBody,
+    rowNavigation = true, // Default navigation onRowClick
     sasqProps,
     searchFieldAriaLabel,
     searchFieldProps
@@ -266,6 +267,7 @@ const SASQLookupComponent = forwardRef((props, ref) => {
                   intlNS={passedIntlNS}
                   labelOverrides={labelOverrides}
                   query={query}
+                  rowNavigation={rowNavigation}
                   toggleFilterPane={toggleFilterPane}
                   {...restOfInfiniteQueryProps}
                   {...sasqRenderProps}
@@ -320,6 +322,7 @@ SASQLookupComponent.propTypes = {
   ]),
   resource: PropTypes.object,
   resultColumns: PropTypes.arrayOf(PropTypes.object),
+  rowNavigation: PropTypes.bool,
   sasqProps: PropTypes.object,
   searchFieldAriaLabel: PropTypes.string,
   searchFieldProps: PropTypes.object

package/src/lib/SASQLookupComponent/TableBody/TableBody.js

@@ -1,3 +1,4 @@
+import { useCallback } from 'react';
 import PropTypes from 'prop-types';
 
 import { useHistory, useLocation } from 'react-router-dom';
@@ -18,10 +19,14 @@ const TableBody = ({
   isLoading,
   labelOverrides = {},
   match,
-  mclProps,
+  mclProps: {
+    formatter = {},
+    ...mclProps
+  },
   onSort,
   path,
   resultColumns,
+  rowNavigation = true, // Default navigation onRowClick
   toggleFilterPane,
   query,
 }) => {
@@ -41,12 +46,45 @@ const TableBody = ({
   // Build the list of visible columns
   const visibleColumns = resultColumns.map(e => e.propertyPath);
 
+  const getRowUrl = useCallback((rowData) => {
+    const baseUrl = `${path}/${rowData?.id}`;
+    return {
+      url: `${baseUrl}${location?.search}`,
+      path,
+      baseUrl,
+      location
+    };
+  }, [location, path]);
+
+  const getEnhancedFormatter = useCallback(() => {
+    const enhancedFormatter = {};
+    for (const [key, value] of Object.entries(formatter)) {
+      enhancedFormatter[key] = (item) => value({ ...item, defaultRowUrl: getRowUrl(item) });
+    }
+
+    return enhancedFormatter;
+  }, [formatter, getRowUrl]);
+
+  const getOnRowClick = useCallback(() => {
+    if (rowNavigation) {
+      return (_e, rowData) => {
+        history.push(getRowUrl(rowData).url);
+      };
+    }
+
+    return null;
+  }, [getRowUrl, history, rowNavigation]);
+
+  const isSelected = useCallback(({ item }) => item.id === match?.params?.id, [match?.params?.id]);
+
   return (
     <MultiColumnList
       autosize
       columnMapping={columnMapping}
       contentData={data?.results}
+      formatter={getEnhancedFormatter()} // Pass enhanced formatter
       hasMargin
+      interactive={rowNavigation}
       isEmptyMessage={
         <NoResultsMessage
           {...{
@@ -62,12 +100,10 @@ const TableBody = ({
           }}
         />
       }
-      isSelected={({ item }) => item.id === match?.params?.id}
+      isSelected={isSelected}
       onHeaderClick={onSort}
       onNeedMoreData={onNeedMoreData}
-      onRowClick={(_e, rowData) => {
-        history.push(`${path}/${rowData?.id}${location?.search}`);
-      }}
+      onRowClick={getOnRowClick()}
       pagingType="click"
       sortDirection={sortOrder.startsWith('-') ? 'descending' : 'ascending'}
       sortOrder={sortOrder.replace(/^-/, '').replace(/,.*/, '')}
@@ -99,6 +135,7 @@ TableBody.propTypes = {
   path: PropTypes.string.isRequired,
   query: PropTypes.object,
   resultColumns: PropTypes.arrayOf(PropTypes.object),
+  rowNavigation: PropTypes.bool,
   toggleFilterPane: PropTypes.func
 };
 

package/src/lib/utils/highlightString.js

@@ -1,38 +1,54 @@
 import matchString from './matchString';
 
-const highlightString = (match, str, ignoreNull = true) => {
-  const [parts, regex] = matchString(match, str, ignoreNull);
+const highlightString = (match, str, ignoreNull = true, simpleSplit = true) => {
+  const [parts, regex] = matchString(match, str, ignoreNull, simpleSplit);
 
   return (
-    parts.filter(part => part).map((part, i) => (
-      regex.test(part) ?
-        <mark
-          key={i}
-        >
-          {part}
-        </mark> :
+    parts.map((part, i) => {
+      // RegExp is stateful, set up a new one to work with
+      const immutableRegex = new RegExp(regex);
+      if (immutableRegex.exec(part) !== null) {
+        return (
+          <mark
+            key={i}
+          >
+            {part}
+          </mark>
+        );
+      }
+
+      return (
         <span key={i}>
           {part}
         </span>
-    ))
+      );
+    })
   );
 };
 
-const boldString = (match, str, ignoreNull = true) => {
-  const [parts, regex] = matchString(match, str, ignoreNull);
+const boldString = (match, str, ignoreNull = true, simpleSplit = true) => {
+  const [parts, regex] = matchString(match, str, ignoreNull, simpleSplit);
 
   return (
-    parts.filter(part => part).map((part, i) => (
-      regex.test(part) ?
-        <strong
-          key={i}
-        >
-          {part}
-        </strong> :
+    parts.map((part, i) => {
+      // RegExp is stateful, set up a new one to work with
+      const immutableRegex = new RegExp(regex);
+      if (immutableRegex.exec(part) !== null) {
+        return (
+          <strong
+            key={i}
+          >
+            {part}
+          </strong>
+        );
+      }
+
+      return (
         <span key={i}>
           {part}
         </span>
-    ))
+      );
+    })
   );
 };
 

package/src/lib/utils/matchString.js

@@ -1,14 +1,35 @@
 import escapeRegExp from 'lodash/escapeRegExp';
 
-const matchString = (match, str, ignoreNull = true) => {
-  const regex = new RegExp(`${match.split(/(\s+)/).filter(h => h.trim()).map(hl => '(' + escapeRegExp(hl) + ')').join('|')}`, 'gi');
+const matchString = (match, str, ignoreNull = true, simpleSplit = true) => {
+  // Simple regex split -- this is default behaviour
+  const regexSimple = new RegExp(`${match.split(/(\s+)/).filter(h => h.trim()).map(hl => '(' + escapeRegExp(hl) + ')').join('|')}`, 'gi');
+
+  // Split Elivis "The King" Presley into [Elvis, The King, Presley]
+  const regex = new RegExp(`${
+    match.split(/(?!\B"[^"]*)\s+(?![^"]*"\B)/)
+         .filter(h => h.trim())
+         .map(quotedSection => {
+            if (quotedSection.charAt(0) === '"' && quotedSection.charAt(quotedSection.length - 1) === '"') {
+              return quotedSection.slice(1, quotedSection.length - 1);
+            }
+            return quotedSection;
+          })
+         .map(hl => '(' + escapeRegExp(hl) + ')')
+         .join('|')
+    }`,
+    'gi');
+
   if (ignoreNull && !match) {
     const nullRegex = /a^/gi; // Should match nothing
 
     return [[str], nullRegex];
   }
 
-  return [str.split(regex), regex];
+  if (simpleSplit) {
+    return [str.split(regexSimple)?.filter(s => s && s.trim()), regexSimple];
+  }
+
+  return [str.split(regex)?.filter(s => s && s.trim()), regex];
 };
 
 export default matchString;