@spscommerce/ds-react 6.18.2 → 6.19.1

package/lib/index.es.js

@@ -24832,7 +24832,7 @@ Object.assign(SpsKeyValueListItem, {
 });
 const SpsKeyValueListExamples = {
   vertical: {
-    label: "Vertical Key Value Sets",
+    label: "Vertical Key Value Lists",
     description: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("h5", null, "Use:"), /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
       className: "mb-2"
     }, "Vertical containers such as a side bar or general card")), /* @__PURE__ */ React__default.createElement("h5", null, "Do Not Use:"), /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
@@ -24931,7 +24931,7 @@ const SpsKeyValueListExamples = {
     }
   },
   horizontal: {
-    label: "Horizontal Key Value Sets",
+    label: "Horizontal Key Value Lists",
     description: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("h5", null, "Use:"), /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
       className: "mb-2"
     }, "Horizontal containers such as a content row")), /* @__PURE__ */ React__default.createElement("h5", null, "Do Not Use:"), /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
@@ -24948,7 +24948,7 @@ const SpsKeyValueListExamples = {
       className: "mb-2"
     }, "Can be used individually or stacked on top of one another", /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
       className: "mb-2"
-    }, "When stacking, the value sets should share a common category or theme"))))),
+    }, "When stacking, the value lists should share a common category or theme"))))),
     examples: {
       standard: {
         description: () => /* @__PURE__ */ React__default.createElement("h4", null, "Standard"),
@@ -24965,7 +24965,7 @@ const SpsKeyValueListExamples = {
         `
       },
       stacked: {
-        description: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("h4", null, "Stacked"), /* @__PURE__ */ React__default.createElement("p", null, /* @__PURE__ */ React__default.createElement("b", null, "Note:"), " There is no limit to the number of stacked listings, but more than three in a single container should be avoided."), /* @__PURE__ */ React__default.createElement("p", null, /* @__PURE__ */ React__default.createElement("b", null, "Note:"), " Titles are right-aligned in the horizontal Key Value Sets to optimize scanability of the values.")),
+        description: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("h4", null, "Stacked"), /* @__PURE__ */ React__default.createElement("p", null, /* @__PURE__ */ React__default.createElement("b", null, "Note:"), " There is no limit to the number of stacked listings, but more than three in a single container should be avoided."), /* @__PURE__ */ React__default.createElement("p", null, /* @__PURE__ */ React__default.createElement("b", null, "Note:"), " Titles are right-aligned in the horizontal Key Value Lists to optimize scanability of the values.")),
         react: code`
           function DemoComponent() {
             return (
@@ -38158,7 +38158,7 @@ const MANIFEST = {
     examples: SpsInsightTileExamples
   },
   "Key Value Lists": {
-    description: () => /* @__PURE__ */ React.createElement("p", null, "Key Value Sets consist of a title and value, or values, paired together visually. They are ideal for displaying details (a value or values) that require additional context (title)."),
+    description: () => /* @__PURE__ */ React.createElement("p", null, "Key Value Lists consist of a title and value, or values, paired together visually. They are ideal for displaying details (a value or values) that require additional context (title)."),
     components: [SpsKeyValueList, SpsKeyValueListItem],
     examples: SpsKeyValueListExamples
   },
@@ -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.2",
+  "version": "6.19.1",
   "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.2",
-    "@spscommerce/ds-illustrations": "6.18.2",
-    "@spscommerce/ds-shared": "6.18.2",
-    "@spscommerce/positioning": "6.18.2",
+    "@spscommerce/ds-colors": "6.19.1",
+    "@spscommerce/ds-illustrations": "6.19.1",
+    "@spscommerce/ds-shared": "6.19.1",
+    "@spscommerce/positioning": "6.19.1",
     "@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.2",
-    "@spscommerce/ds-illustrations": "6.18.2",
-    "@spscommerce/ds-shared": "6.18.2",
-    "@spscommerce/positioning": "6.18.2",
+    "@spscommerce/ds-colors": "6.19.1",
+    "@spscommerce/ds-illustrations": "6.19.1",
+    "@spscommerce/ds-shared": "6.19.1",
+    "@spscommerce/positioning": "6.19.1",
     "@spscommerce/utils": "^6.11.3",
     "@testing-library/react": "^9.3.2",
     "@types/prop-types": "^15.7.1",