@spscommerce/ds-react 6.29.0 → 6.29.2

package/lib/index.es.js

@@ -15224,7 +15224,8 @@ function SpsColumnChooser(props2) {
     disabled: maxSelectedColumns && state.selectedColumns.length >= maxSelectedColumns,
     value: state.searchSelectedColumn ? state.searchSelectedColumn.name : "",
     onChange: onSelectBoxChange,
-    placeholder: "Find Columns to Add"
+    placeholder: "Find Columns to Add",
+    "data-testid": "autocomplete"
   })), /* @__PURE__ */ React.createElement("div", {
     className: "sps-column-chooser__selected-title"
   }, "Selected"), /* @__PURE__ */ React.createElement(DragDropContext, {
@@ -38193,6 +38194,427 @@ const SpsConditionalFieldExamples = {
     }
   }
 };
+function splitStringByDelimiter(str, delimiters) {
+  const regexForSplit = new RegExp(`[\\t\r
+${delimiters.join("").replace("]", "\\]").replace(" ", "\\s")}]+`);
+  return str.split(regexForSplit).filter((s) => s !== "");
+}
+const propsDoc$3 = {
+  disabled: "boolean",
+  formMeta: "SpsFormFieldMeta<any[]>",
+  icon: "SpsIcon",
+  onChange: "ChangeEventHandler",
+  onEntryChange: "(searchText: string) => void",
+  placeholder: "string",
+  value: "any",
+  createTagOptions: "string[]"
+};
+const propTypes$3 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  disabled: propTypes$1I.exports.bool,
+  formControl: impl(),
+  formMeta: impl(),
+  icon: enumValue(SpsIcon),
+  onChange: fun(),
+  onEntryChange: fun(),
+  placeholder: propTypes$1I.exports.string,
+  value: propTypes$1I.exports.any,
+  createTagOptions: propTypes$1I.exports.arrayOf(propTypes$1I.exports.string)
+});
+function SpsMultiValueTextInput(_ma) {
+  var _na = _ma, {
+    className,
+    disabled,
+    formControl: formControl2,
+    formMeta,
+    id,
+    onChange,
+    onEntryChange,
+    placeholder,
+    unsafelyReplaceClassName,
+    value,
+    icon,
+    createTagOptions = [" ", ","],
+    "data-testid": testId
+  } = _na, rest = __objRest(_na, [
+    "className",
+    "disabled",
+    "formControl",
+    "formMeta",
+    "id",
+    "onChange",
+    "onEntryChange",
+    "placeholder",
+    "unsafelyReplaceClassName",
+    "value",
+    "icon",
+    "createTagOptions",
+    "data-testid"
+  ]);
+  const meta = formMeta || formControl2;
+  const { wrapperId, controlId } = useFormControlId(id, meta);
+  const [state, patchState] = usePatchReducer({
+    keyDown: null,
+    searchText: "",
+    activeTagIndex: null,
+    optionIds: ""
+  });
+  React.useEffect(() => {
+    if (onEntryChange) {
+      onEntryChange(state.searchText);
+    }
+  }, [state.searchText]);
+  const rootElement = React.useRef();
+  const textInput = React.useRef();
+  const clickableTagList = React.useRef();
+  function focusTextInput() {
+    setTimeout(() => {
+      textInput.current.focus();
+    }, 0);
+  }
+  function updateValue(newValue) {
+    patchState({ searchText: "" });
+    if (meta) {
+      meta.setValue(newValue);
+      meta.markAsDirty();
+    }
+    if (onChange) {
+      onChange(new FauxChangeEvent({ value: newValue }));
+    }
+  }
+  function removeOptionByIndex(indexToRemove) {
+    const newValue = value.filter((_, i) => i !== indexToRemove);
+    updateValue(newValue);
+  }
+  function handleChange(event) {
+    patchState({ searchText: event.target.value });
+  }
+  function focusClickableTagRemoveButton(index) {
+    if (clickableTagList.current && clickableTagList.current.children.length && index !== null) {
+      const currTag = clickableTagList.current.children[index];
+      const removeIcon = currTag == null ? void 0 : currTag.querySelector(".sps-clickable-tag__icon");
+      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;
+      switch (event.key) {
+        case "Backspace":
+          if (state.activeTagIndex === value.length - 1) {
+            removeOptionByIndex(state.activeTagIndex);
+            focusTextInput();
+            return;
+          }
+          if (state.activeTagIndex !== null) {
+            removeOptionByIndex(state.activeTagIndex);
+            return;
+          }
+          if (cursorIsAtLeftOfTextInputAndThereIsAtLeastOneSelection) {
+            updateValue(value.slice(0, value.length - 1));
+            focusTextInput();
+            return;
+          }
+          break;
+        case "Delete":
+          if (state.activeTagIndex !== null) {
+            removeOptionByIndex(state.activeTagIndex);
+            focusTextInput();
+          }
+          break;
+        case "Enter":
+        case "Tab":
+          createNewTag(event);
+          break;
+        case "Up":
+        case "ArrowUp":
+        case "Down":
+        case "ArrowDown":
+          event.preventDefault();
+          break;
+        case "Left":
+        case "ArrowLeft":
+          if (cursorIsAtLeftOfTextInputAndThereIsAtLeastOneSelection) {
+            if (state.activeTagIndex === null) {
+              patchState({ activeTagIndex: value.length - 1 });
+              focusClickableTagRemoveButton(value.length - 1);
+            } else if (state.activeTagIndex > 0) {
+              patchState({ activeTagIndex: state.activeTagIndex - 1 });
+              focusClickableTagRemoveButton(state.activeTagIndex - 1);
+            }
+            return;
+          }
+          break;
+        case "Right":
+        case "ArrowRight":
+          if (state.activeTagIndex !== null) {
+            if (state.activeTagIndex === value.length - 1) {
+              patchState({ activeTagIndex: null });
+              textInput.current.focus();
+            } else {
+              patchState({ activeTagIndex: state.activeTagIndex + 1 });
+              focusClickableTagRemoveButton(state.activeTagIndex + 1);
+            }
+            return;
+          }
+          break;
+      }
+      for (const option of createTagOptions) {
+        if (event.key === option) {
+          createNewTag(event);
+        }
+      }
+      event.persist();
+      patchState({ keyDown: event });
+    }
+  }
+  function handleClearIconClick(event) {
+    updateValue([]);
+    event.stopPropagation();
+  }
+  const classes = clsx(unsafelyReplaceClassName || "sps-multi-select", disabled && "sps-form-control--disabled", className);
+  const tagIds = new Array(value.length).fill(0).map((_, i) => `${wrapperId}_tag-${i}`);
+  return /* @__PURE__ */ React.createElement(SpsFormComponentWrapper, {
+    id: wrapperId,
+    className: classes,
+    formControl: formControl2,
+    formMeta,
+    ref: rootElement,
+    inputRef: textInput,
+    focusInputOnClick: true,
+    onKeyDown: handleKeyDown,
+    role: "listbox",
+    "aria-multiselectable": true,
+    "aria-activedescendant": tagIds[state.activeTagIndex],
+    "aria-owns": state.optionIds
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "sps-text-input"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: clsx("sps-form-control", value && !disabled && "sps-form-control--clearable")
+  }, icon && /* @__PURE__ */ React.createElement("i", {
+    className: clsx("sps-text-input__icon", "sps-icon", `sps-icon-${icon}`)
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: "sps-multi-select__tags-and-input",
+    ref: clickableTagList
+  }, Array.isArray(value) && value.map((opt, i) => /* @__PURE__ */ React.createElement(SpsClickableTag, {
+    id: tagIds[i],
+    role: "option",
+    disabled,
+    "aria-selected": "true",
+    key: tagIds[i],
+    onRemove: () => removeOptionByIndex(i)
+  }, /* @__PURE__ */ React.createElement("span", null, opt))), /* @__PURE__ */ React.createElement("input", __spreadValues({
+    type: "text",
+    ref: textInput,
+    "data-testid": `${testId}__multi-value-text-input`,
+    value: state.searchText,
+    className: "sps-text-input__input",
+    placeholder: state.searchText.length === 0 && value.length === 0 ? placeholder : void 0,
+    id: controlId,
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    disabled,
+    role: "listbox",
+    "aria-multiselectable": "true",
+    "aria-owns": tagIds.join(" ")
+  }, rest))), value.length !== 0 && !disabled ? /* @__PURE__ */ React.createElement("i", {
+    className: "sps-icon sps-icon-x-circle sps-form-control__clear-btn",
+    onClick: (event) => handleClearIconClick(event)
+  }) : null)));
+}
+Object.assign(SpsMultiValueTextInput, {
+  props: propsDoc$3,
+  propTypes: propTypes$3,
+  displayName: "SpsMultiValueTextInput"
+});
+const SpsMultiValueTextInputExamples = {
+  general: {
+    label: "General Usage",
+    description: () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h5", null, "Coming soon"))
+  },
+  basic: {
+    label: "Basic Usage",
+    examples: {
+      basic: {
+        react: code`
+          function DemoComponent() {
+            const { formValue, formMeta, updateForm } = useSpsForm({
+              items: ["foo"]
+            });
+
+            return (
+              <>
+                <SpsLabel for={formMeta.fields.items}>Items</SpsLabel>
+                <SpsMultiValueTextInput
+                  value={formValue.items}
+                  formMeta={formMeta.fields.items}
+                />
+              </>
+            )
+          }
+        `
+      },
+      placeholder: {
+        description: "Placeholder",
+        react: code`
+          function DemoComponent() {
+            const { formValue, formMeta, updateForm } = useSpsForm({
+              items: []
+            });
+
+            return (
+              <>
+                <SpsLabel for={formMeta.fields.items}>Items</SpsLabel>
+                <SpsMultiValueTextInput
+                  value={formValue.items}
+                  formMeta={formMeta.fields.items}
+                  placeholder="Enter things here"
+                />
+              </>
+            )
+          }
+        `
+      },
+      icon: {
+        description: "Icon",
+        react: code`
+          function DemoComponent() {
+            const { formValue, formMeta, updateForm } = useSpsForm({
+              items: []
+            });
+
+            return (
+              <>
+                <SpsLabel for={formMeta.fields.items}>Items</SpsLabel>
+                <SpsMultiValueTextInput
+                  value={formValue.items}
+                  formMeta={formMeta.fields.items}
+                  icon={SpsIcon.PAPER_PLANE}
+                />
+              </>
+            )
+          }
+        `
+      }
+    }
+  },
+  createOptions: {
+    label: "Create Tag Options",
+    description: () => /* @__PURE__ */ React.createElement("p", null, "By default the enter key, space key, and comma will create a text tag. The", " ", /* @__PURE__ */ React.createElement("code", null, "createTagOptions"), " prop allows you to change what keys create a tag."),
+    examples: {
+      allowSpaces: {
+        react: code`
+          function DemoComponent() {
+            const { formValue, formMeta, updateForm } = useSpsForm({
+              items: ["Item with spaces"]
+            });
+
+            return (
+              <>
+                <SpsLabel for={formMeta.fields.items}>Placeholder</SpsLabel>
+                <SpsMultiValueTextInput
+                  value={formValue.items}
+                  formMeta={formMeta.fields.items}
+                  createTagOptions={[","]}
+                />
+              </>
+            )
+          }
+        `
+      }
+    }
+  },
+  onChange: {
+    label: "On Entry Change",
+    examples: {
+      basic: {
+        react: code`
+          function DemoComponent() {
+            const { formValue, formMeta, updateForm } = useSpsForm({
+              items: ["foo"]
+            });
+
+            return (
+              <>
+                <SpsLabel for={formMeta.fields.items}>Placeholder</SpsLabel>
+                <SpsMultiValueTextInput
+                  value={formValue.items}
+                  formMeta={formMeta.fields.items}
+                  onEntryChange={(text) => console.log("input changed: ", text)}
+                />
+              </>
+            )
+          }
+        `
+      }
+    }
+  },
+  validators: {
+    label: "Using Validators",
+    examples: {
+      basic: {
+        react: code`
+          function DemoComponent() {
+            const { formValue, formMeta, updateForm } = useSpsForm({
+              items: ["foo"]
+            },{
+              "items": [SpsValidators.required, SpsValidators.maxLength(2)],
+            });
+
+            return (
+              <>
+                <SpsLabel for={formMeta.fields.items}>Placeholder</SpsLabel>
+                <SpsMultiValueTextInput
+                  value={formValue.items}
+                  formMeta={formMeta.fields.items}
+                />
+              </>
+            )
+          }
+        `
+      }
+    }
+  },
+  disabled: {
+    label: "Disabled State",
+    examples: {
+      basic: {
+        react: code`
+          function DemoComponent() {
+            const { formValue, formMeta, updateForm } = useSpsForm({
+              items: ["foo"]
+            });
+
+            return (
+              <>
+                <SpsLabel for={formMeta.fields.items}>Placeholder</SpsLabel>
+                <SpsMultiValueTextInput
+                  value={formValue.items}
+                  formMeta={formMeta.fields.items}
+                  disabled
+                />
+              </>
+            )
+          }
+        `
+      }
+    }
+  }
+};
 const MANIFEST = {
   "Advanced Search": {
     components: [SpsAdvancedSearch],
@@ -38384,6 +38806,11 @@ const MANIFEST = {
     components: [SpsMultiSelect],
     examples: SpsMultiSelectExamples
   },
+  "Multi Value Text Input": {
+    description: () => /* @__PURE__ */ React.createElement("p", null, "To be determined."),
+    components: [SpsMultiValueTextInput],
+    examples: SpsMultiValueTextInputExamples
+  },
   "Page Title": {
     components: [SpsPageTitle, SpsPageSubtitle],
     examples: SpsPageTitleExamples
@@ -38521,14 +38948,14 @@ const SpsContextBar = function({
     onClick: onChange
   }, "Change"));
 };
-const propsDoc$3 = {
+const propsDoc$2 = {
   disabled: "boolean",
   formMeta: "SpsFormFieldMeta<number>",
   name: "string",
   onChange: "ChangeEventHandler<number>",
   value: "number"
 };
-const propTypes$3 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+const propTypes$2 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   disabled: propTypes$1I.exports.bool,
   formMeta: impl(),
   name: propTypes$1I.exports.string,
@@ -38542,8 +38969,8 @@ function strToDollars(str) {
 function dollarsToStr(dollars) {
   return typeof dollars === "number" ? dollars.toFixed(2) : "";
 }
-function SpsCurrencyInput(_ma) {
-  var _na = _ma, {
+function SpsCurrencyInput(_oa) {
+  var _pa = _oa, {
     className,
     disabled = false,
     formMeta,
@@ -38553,7 +38980,7 @@ function SpsCurrencyInput(_ma) {
     ref: ref2,
     title,
     value
-  } = _na, rest = __objRest(_na, [
+  } = _pa, rest = __objRest(_pa, [
     "className",
     "disabled",
     "formMeta",
@@ -38614,8 +39041,8 @@ function SpsCurrencyInput(_ma) {
   })));
 }
 Object.assign(SpsCurrencyInput, {
-  props: propsDoc$3,
-  propTypes: propTypes$3,
+  props: propsDoc$2,
+  propTypes: propTypes$2,
   displayName: "SpsCurrencyInput"
 });
 const SpsCurrencyInputExamples = {
@@ -38694,7 +39121,7 @@ function useGrowlers() {
   }, []);
   return [growlers, createGrowler];
 }
-const propsDoc$2 = {
+const propsDoc$1 = {
   color: "TagKind",
   href: "String",
   icon: "SpsIcon",
@@ -38707,7 +39134,7 @@ const propsDoc$2 = {
     required: true
   }
 };
-const propTypes$2 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+const propTypes$1 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   color: enumValue(TagKind),
   href: propTypes$1I.exports.string,
   icon: enumValue(SpsIcon),
@@ -38749,8 +39176,8 @@ function SpsKeyValueTag(props2) {
   }, value), !href && value));
 }
 Object.assign(SpsKeyValueTag, {
-  props: propsDoc$2,
-  propTypes: propTypes$2,
+  props: propsDoc$1,
+  propTypes: propTypes$1,
   displayName: "SpsKeyValueTag"
 });
 const SpsKeyValueTagExamples = {
@@ -38803,259 +39230,6 @@ const SpsKeyValueTagExamples = {
     }
   }
 };
-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",
-  formMeta: "SpsFormFieldMeta<any[]>",
-  icon: "SpsIcon",
-  onChange: "ChangeEventHandler",
-  onEntryChange: "(searchText: string) => void",
-  placeholder: "string",
-  value: "any",
-  createTagOptions: "string[]"
-};
-const propTypes$1 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  disabled: propTypes$1I.exports.bool,
-  formControl: impl(),
-  formMeta: impl(),
-  icon: enumValue(SpsIcon),
-  onChange: fun(),
-  onEntryChange: fun(),
-  placeholder: propTypes$1I.exports.string,
-  value: propTypes$1I.exports.any,
-  createTagOptions: propTypes$1I.exports.arrayOf(propTypes$1I.exports.string)
-});
-function SpsMultiValueTextInput(_oa) {
-  var _pa = _oa, {
-    className,
-    disabled,
-    formControl: formControl2,
-    formMeta,
-    id,
-    onChange,
-    onEntryChange,
-    placeholder,
-    unsafelyReplaceClassName,
-    value,
-    icon,
-    createTagOptions = [" ", ","],
-    "data-testid": testId
-  } = _pa, rest = __objRest(_pa, [
-    "className",
-    "disabled",
-    "formControl",
-    "formMeta",
-    "id",
-    "onChange",
-    "onEntryChange",
-    "placeholder",
-    "unsafelyReplaceClassName",
-    "value",
-    "icon",
-    "createTagOptions",
-    "data-testid"
-  ]);
-  const meta = formMeta || formControl2;
-  const { wrapperId, controlId } = useFormControlId(id, meta);
-  const [state, patchState] = usePatchReducer({
-    keyDown: null,
-    searchText: "",
-    activeTagIndex: null,
-    optionIds: ""
-  });
-  React.useEffect(() => {
-    if (onEntryChange) {
-      onEntryChange(state.searchText);
-    }
-  }, [state.searchText]);
-  const rootElement = React.useRef();
-  const textInput = React.useRef();
-  const clickableTagList = React.useRef();
-  function focusTextInput() {
-    setTimeout(() => {
-      textInput.current.focus();
-    }, 0);
-  }
-  function updateValue(newValue) {
-    patchState({ searchText: "" });
-    if (meta) {
-      meta.setValue(newValue);
-      meta.markAsDirty();
-    }
-    if (onChange) {
-      onChange(new FauxChangeEvent({ value: newValue }));
-    }
-  }
-  function removeOptionByIndex(indexToRemove) {
-    const newValue = value.filter((_, i) => i !== indexToRemove);
-    updateValue(newValue);
-  }
-  function handleChange(event) {
-    patchState({ searchText: event.target.value });
-  }
-  function focusClickableTagRemoveButton(index) {
-    if (clickableTagList.current && clickableTagList.current.children.length && index !== null) {
-      const currTag = clickableTagList.current.children[index];
-      const removeIcon = currTag == null ? void 0 : currTag.querySelector(".sps-clickable-tag__icon");
-      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;
-      switch (event.key) {
-        case "Backspace":
-          if (state.activeTagIndex === value.length - 1) {
-            removeOptionByIndex(state.activeTagIndex);
-            focusTextInput();
-            return;
-          }
-          if (state.activeTagIndex !== null) {
-            removeOptionByIndex(state.activeTagIndex);
-            return;
-          }
-          if (cursorIsAtLeftOfTextInputAndThereIsAtLeastOneSelection) {
-            updateValue(value.slice(0, value.length - 1));
-            focusTextInput();
-            return;
-          }
-          break;
-        case "Delete":
-          if (state.activeTagIndex !== null) {
-            removeOptionByIndex(state.activeTagIndex);
-            focusTextInput();
-          }
-          break;
-        case "Enter":
-        case "Tab":
-          createNewTag(event);
-          break;
-        case "Up":
-        case "ArrowUp":
-        case "Down":
-        case "ArrowDown":
-          event.preventDefault();
-          break;
-        case "Left":
-        case "ArrowLeft":
-          if (cursorIsAtLeftOfTextInputAndThereIsAtLeastOneSelection) {
-            if (state.activeTagIndex === null) {
-              patchState({ activeTagIndex: value.length - 1 });
-              focusClickableTagRemoveButton(value.length - 1);
-            } else if (state.activeTagIndex > 0) {
-              patchState({ activeTagIndex: state.activeTagIndex - 1 });
-              focusClickableTagRemoveButton(state.activeTagIndex - 1);
-            }
-            return;
-          }
-          break;
-        case "Right":
-        case "ArrowRight":
-          if (state.activeTagIndex !== null) {
-            if (state.activeTagIndex === value.length - 1) {
-              patchState({ activeTagIndex: null });
-              textInput.current.focus();
-            } else {
-              patchState({ activeTagIndex: state.activeTagIndex + 1 });
-              focusClickableTagRemoveButton(state.activeTagIndex + 1);
-            }
-            return;
-          }
-          break;
-      }
-      for (const option of createTagOptions) {
-        if (event.key === option) {
-          createNewTag(event);
-        }
-      }
-      event.persist();
-      patchState({ keyDown: event });
-    }
-  }
-  function handleClearIconClick(event) {
-    updateValue([]);
-    event.stopPropagation();
-  }
-  const classes = clsx(unsafelyReplaceClassName || "sps-multi-select", disabled && "sps-form-control--disabled", className);
-  const tagIds = new Array(value.length).fill(0).map((_, i) => `${wrapperId}_tag-${i}`);
-  return /* @__PURE__ */ React.createElement(SpsFormComponentWrapper, {
-    id: wrapperId,
-    className: classes,
-    formControl: formControl2,
-    formMeta,
-    ref: rootElement,
-    inputRef: textInput,
-    focusInputOnClick: true,
-    onKeyDown: handleKeyDown,
-    role: "listbox",
-    "aria-multiselectable": true,
-    "aria-activedescendant": tagIds[state.activeTagIndex],
-    "aria-owns": state.optionIds
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "sps-text-input"
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: clsx("sps-form-control", value && !disabled && "sps-form-control--clearable")
-  }, icon && /* @__PURE__ */ React.createElement("i", {
-    className: clsx("sps-text-input__icon", "sps-icon", `sps-icon-${icon}`)
-  }), /* @__PURE__ */ React.createElement("div", {
-    className: "sps-multi-select__tags-and-input",
-    ref: clickableTagList
-  }, Array.isArray(value) && value.map((opt, i) => /* @__PURE__ */ React.createElement(SpsClickableTag, {
-    id: tagIds[i],
-    role: "option",
-    disabled,
-    "aria-selected": "true",
-    key: tagIds[i],
-    onRemove: () => removeOptionByIndex(i)
-  }, /* @__PURE__ */ React.createElement("span", null, opt))), /* @__PURE__ */ React.createElement("input", __spreadValues({
-    type: "text",
-    ref: textInput,
-    "data-testid": `${testId}__multi-value-text-input`,
-    value: state.searchText,
-    className: "sps-text-input__input",
-    placeholder: state.searchText.length === 0 && value.length === 0 ? placeholder : void 0,
-    id: controlId,
-    onChange: handleChange,
-    onKeyDown: handleKeyDown,
-    disabled,
-    role: "listbox",
-    "aria-multiselectable": "true",
-    "aria-owns": tagIds.join(" ")
-  }, rest))), value.length !== 0 && !disabled ? /* @__PURE__ */ React.createElement("i", {
-    className: "sps-icon sps-icon-x-circle sps-form-control__clear-btn",
-    onClick: (event) => handleClearIconClick(event)
-  }) : null)));
-}
-Object.assign(SpsMultiValueTextInput, {
-  props: propsDoc$1,
-  propTypes: propTypes$1,
-  displayName: "SpsMultiValueTextInput"
-});
-const SpsMultiValueTextInputExamples = {
-  general: {
-    label: "General Usage",
-    description: ({ NavigateTo }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h5", null, "Coming soon"))
-  }
-};
 function useSpsAction(descriptor, fn) {
   const metadata = __spreadValues(__spreadValues({}, SPS_ACTION_DEFAULTS), descriptor);
   const [state, patchState] = usePatchReducer(metadata);