@spscommerce/ds-react 6.18.3 → 6.19.0

package/lib/index.es.js

@@ -38610,9 +38610,10 @@ const SpsKeyValueTagExamples = {
     }
   }
 };
-const WHITESPACE_COMMA_TAB_NEWLINE_REGEX = new RegExp(/[,\n+\s+\t+]+/);
-function splitStringByDelimiter(str) {
-  return str.split(WHITESPACE_COMMA_TAB_NEWLINE_REGEX).filter((s) => s !== "");
+function splitStringByDelimiter(str, delimiters) {
+  const regexForSplit = new RegExp(`[\\t\r
+${delimiters.join("").replace("]", "\\]").replace(" ", "\\s")}]+`);
+  return str.split(regexForSplit).filter((s) => s !== "");
 }
 const propsDoc$1 = {
   disabled: "boolean",
@@ -38621,7 +38622,8 @@ const propsDoc$1 = {
   onChange: "ChangeEventHandler",
   onEntryChange: "(searchText: string) => void",
   placeholder: "string",
-  value: "any"
+  value: "any",
+  createTagOptions: "string[]"
 };
 const propTypes$1 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   disabled: propTypes$1H.exports.bool,
@@ -38631,7 +38633,8 @@ const propTypes$1 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   onChange: fun(),
   onEntryChange: fun(),
   placeholder: propTypes$1H.exports.string,
-  value: propTypes$1H.exports.any
+  value: propTypes$1H.exports.any,
+  createTagOptions: propTypes$1H.exports.arrayOf(propTypes$1H.exports.string)
 });
 function SpsMultiValueTextInput(_ma) {
   var _na = _ma, {
@@ -38646,6 +38649,7 @@ function SpsMultiValueTextInput(_ma) {
     unsafelyReplaceClassName,
     value,
     icon,
+    createTagOptions = [" ", ","],
     "data-testid": testId
   } = _na, rest = __objRest(_na, [
     "className",
@@ -38659,6 +38663,7 @@ function SpsMultiValueTextInput(_ma) {
     "unsafelyReplaceClassName",
     "value",
     "icon",
+    "createTagOptions",
     "data-testid"
   ]);
   const meta = formMeta || formControl2;
@@ -38706,6 +38711,21 @@ function SpsMultiValueTextInput(_ma) {
       removeIcon && removeIcon.focus();
     }
   }
+  const createNewTag = React.useCallback((event) => {
+    patchState({ activeTagIndex: null, searchText: "" });
+    const trimmedText = state.searchText.trim();
+    if (trimmedText && value.indexOf(trimmedText) === -1) {
+      updateValue([...value, ...splitStringByDelimiter(trimmedText, createTagOptions)]);
+    }
+    if ((event.key === "Tab" || event.key === "Enter") && !state.searchText) {
+      return;
+    }
+    event.preventDefault();
+  }, [
+    state.searchText,
+    value,
+    splitStringByDelimiter
+  ]);
   function handleKeyDown(event) {
     if (!disabled) {
       const cursorIsAtLeftOfTextInputAndThereIsAtLeastOneSelection = !event.target.selectionStart && value && value.length;
@@ -38734,15 +38754,7 @@ function SpsMultiValueTextInput(_ma) {
           break;
         case "Enter":
         case "Tab":
-        case ",":
-        case " ":
-          if (state.searchText !== "") {
-            event.preventDefault();
-          }
-          patchState({ activeTagIndex: null, searchText: "" });
-          if (state.searchText.trim() !== "" && value.indexOf(state.searchText) === -1) {
-            updateValue([...value, ...splitStringByDelimiter(state.searchText)]);
-          }
+          createNewTag(event);
           break;
         case "Up":
         case "ArrowUp":
@@ -38777,6 +38789,11 @@ function SpsMultiValueTextInput(_ma) {
           }
           break;
       }
+      for (const option of createTagOptions) {
+        if (event.key === option) {
+          createNewTag(event);
+        }
+      }
       event.persist();
       patchState({ keyDown: event });
     }

package/lib/multi-value-text-input/SpsMultiValueTextInput.d.ts

@@ -12,11 +12,12 @@ declare const propTypes: {
     onEntryChange: PropTypes.Requireable<(searchText: string) => void>;
     placeholder: PropTypes.Requireable<string>;
     value: PropTypes.Requireable<any>;
+    createTagOptions: PropTypes.Requireable<string[]>;
     children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     className: PropTypes.Requireable<string>;
     "data-testid": PropTypes.Requireable<string>;
     unsafelyReplaceClassName: PropTypes.Requireable<string>;
 };
 export declare type SpsMultiValueTextInputProps = PropTypes.InferTS<typeof propTypes, HTMLInputElement>;
-export declare function SpsMultiValueTextInput({ className, disabled, formControl, formMeta, id, onChange, onEntryChange, placeholder, unsafelyReplaceClassName, value, icon, "data-testid": testId, ...rest }: SpsMultiValueTextInputProps): JSX.Element;
+export declare function SpsMultiValueTextInput({ className, disabled, formControl, formMeta, id, onChange, onEntryChange, placeholder, unsafelyReplaceClassName, value, icon, createTagOptions, "data-testid": testId, ...rest }: SpsMultiValueTextInputProps): JSX.Element;
 export {};

package/lib/multi-value-text-input/splitStringByDelimiter.d.ts

@@ -1,2 +1,2 @@
 export declare const WHITESPACE_COMMA_TAB_NEWLINE_REGEX: RegExp;
-export declare function splitStringByDelimiter(str: string): string[];
+export declare function splitStringByDelimiter(str: string, delimiters: string[]): string[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "6.18.3",
+  "version": "6.19.0",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/ds-react",
@@ -28,10 +28,10 @@
   },
   "peerDependencies": {
     "@react-stately/collections": "^3.3.3",
-    "@spscommerce/ds-colors": "6.18.3",
-    "@spscommerce/ds-illustrations": "6.18.3",
-    "@spscommerce/ds-shared": "6.18.3",
-    "@spscommerce/positioning": "6.18.3",
+    "@spscommerce/ds-colors": "6.19.0",
+    "@spscommerce/ds-illustrations": "6.19.0",
+    "@spscommerce/ds-shared": "6.19.0",
+    "@spscommerce/positioning": "6.19.0",
     "@spscommerce/utils": "^6.11.3",
     "moment": "^2.25.3",
     "moment-timezone": "^0.5.28",
@@ -40,10 +40,10 @@
   },
   "devDependencies": {
     "@react-stately/collections": "^3.3.3",
-    "@spscommerce/ds-colors": "6.18.3",
-    "@spscommerce/ds-illustrations": "6.18.3",
-    "@spscommerce/ds-shared": "6.18.3",
-    "@spscommerce/positioning": "6.18.3",
+    "@spscommerce/ds-colors": "6.19.0",
+    "@spscommerce/ds-illustrations": "6.19.0",
+    "@spscommerce/ds-shared": "6.19.0",
+    "@spscommerce/positioning": "6.19.0",
     "@spscommerce/utils": "^6.11.3",
     "@testing-library/react": "^9.3.2",
     "@types/prop-types": "^15.7.1",