Allow dots in keywords when searching on exact words

.changeset/soft-coins-change.md

@@ -0,0 +1,7 @@
+---
+'contexture-react': patch
+---
+
+Allow dots in keywords tags
+
+It is very common for users to search for keywords with dots in them when matching on exact words

packages/react/src/exampleTypes/ExpandableTagsQuery/index.js

@@ -18,6 +18,7 @@ import ActionsMenu from '../TagsQuery/ActionsMenu.js'
 import { useOutsideClick } from '@chakra-ui/react-use-outside-click'
 import { sanitizeTagInputs } from 'contexture-elasticsearch/utils/keywordGenerations.js'
 import KeywordGenerations from './KeywordGenerations.js'
+import { wordRegex, wordRegexWithDot } from '../../greyVest/utils.js'
 
 let innerHeightLimit = 40
 
@@ -132,7 +133,9 @@ let TagsWrapper = observer(
     popoverOffsetY,
     theme: { Icon, TagsInput, Tag, Popover },
     joinOptions,
-    wordsMatchPattern,
+    // Allow tag keywords to contain dots in them if the user is searching for exact
+    // words instead of their variations.
+    wordsMatchPattern = node.exact ? wordRegexWithDot : wordRegex,
     sanitizeTags = true,
     splitCommas = true,
     maxTags = 1000,

packages/react/src/greyVest/ExpandableTagsInput.js

@@ -2,11 +2,7 @@ import React from 'react'
 import _ from 'lodash/fp.js'
 import { observer } from 'mobx-react'
 import { Tag as DefaultTag, Flex } from './index.js'
-import {
-  sanitizeTagWords,
-  splitTagOnComma,
-  alphaNumericRegEx,
-} from './utils.js'
+import { sanitizeTagWords, splitTagOnComma, wordRegex } from './utils.js'
 
 export let Tags = ({
   reverse = false,
@@ -54,7 +50,7 @@ let ExpandableTagsInput = ({
   onInputChange = _.noop,
   maxWordsPerTag = 100,
   maxCharsPerTagWord = 100,
-  wordsMatchPattern = alphaNumericRegEx,
+  wordsMatchPattern = wordRegex,
   onTagClick = _.noop,
   sanitizeTags = true,
   Tag = DefaultTag,

packages/react/src/greyVest/TagsInput.js

@@ -4,11 +4,7 @@ import { observable } from '../utils/mobx.js'
 import { observer, inject } from 'mobx-react'
 import Flex from './Flex.js'
 import DefaultTag from './Tag.js'
-import {
-  sanitizeTagWords,
-  splitTagOnComma,
-  alphaNumericRegEx,
-} from './utils.js'
+import { sanitizeTagWords, splitTagOnComma, wordRegex } from './utils.js'
 
 let isValidInput = (tag, tags) => !_.isEmpty(tag) && !_.includes(tag, tags)
 
@@ -28,7 +24,7 @@ let TagsInput = forwardRef(
       onTagClick = _.noop,
       maxWordsPerTag = 100,
       maxCharsPerTagWord = 100,
-      wordsMatchPattern = alphaNumericRegEx,
+      wordsMatchPattern = wordRegex,
       sanitizeTags = true,
       Tag = DefaultTag,
       ...props

packages/react/src/greyVest/utils.js

@@ -37,9 +37,5 @@ export let splitTagOnComma = _.flow(
   _.uniq
 )
 
-// RegEx to match words composed of alphanumeric characters.
-// From: https://github.com/lodash/lodash/blob/ddfd9b11a0126db2302cb70ec9973b66baec0975/lodash.js#L166
-// Uses ASCI ranges https://donsnotes.com/tech/charsets/ascii.html with the exception that it allows '-' which is \x2D
-export let alphaNumericRegEx =
-  // eslint-disable-next-line no-control-regex
-  /[^\x00-\x2C\x2E-\x2F\x3a-\x40\x5b-\x60\x7b-\x7f]+/g
+export let wordRegex = /[-\w]+/g
+export let wordRegexWithDot = /[-.\w]+/g