@spscommerce/ds-react 6.31.3 → 6.31.4

package/lib/index.es.js

@@ -905,14 +905,14 @@ const required = function requiredValidator(value) {
 AsTypingErrorKeys.add("required");
 const minLength = function minLengthValidatorFactory(minimumLength) {
   function minLengthValidator(value) {
-    return value.length >= minimumLength ? null : { minLength: minimumLength };
+    return value === void 0 || value.toString().length < minimumLength ? { minLength: minimumLength } : null;
   }
   return (values2) => validateCollectionOfValues(values2, minLengthValidator);
 };
 OnBlurErrorKeys.add("minLength");
 const maxLength = function maxLengthValidatorFactory(maximumLength) {
   function maxLengthValidator(value) {
-    return value.length <= maximumLength ? null : { maxLength: maximumLength };
+    return value === void 0 || value.toString().length <= maximumLength ? null : { maxLength: maximumLength };
   }
   return (values2) => validateCollectionOfValues(values2, maxLengthValidator);
 };
@@ -15300,7 +15300,7 @@ function SpsI(props2) {
     "size",
     "unsafelyReplaceClassName"
   ]);
-  const classes = clsx(unsafelyReplaceClassName || "sps-icon", `sps-icon-${icon}`, `sps-icon--${size}`, className);
+  const classes = clsx(unsafelyReplaceClassName || "sps-icon", `sps-icon-${icon}`, `sps-icon--${size}`, props2.onClick && "interactive-icon", className);
   return /* @__PURE__ */ React.createElement("i", __spreadValues({
     className: classes,
     "aria-hidden": "true",
@@ -25027,8 +25027,7 @@ const propsDoc$$ = {
   help: "ReactNodeOrRenderFn",
   helpIcon: "SpsIcon",
   helpIconColor: "string",
-  errors: "ReactNodeOrRenderFn",
-  interactiveIcons: "Array<{icon: SpsIcon, iconColor: string, onClick: () => void}>"
+  errors: "ReactNodeOrRenderFn"
 };
 const propTypes$10 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   description: propTypes$1I.exports.string,
@@ -25040,8 +25039,7 @@ const propTypes$10 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   help: nodeOrRenderFn,
   helpIcon: enumValue(SpsIcon),
   helpIconColor: propTypes$1I.exports.string,
-  errors: nodeOrRenderFn,
-  interactiveIcons: propTypes$1I.exports.arrayOf(impl())
+  errors: nodeOrRenderFn
 });
 function SpsLabel(_y) {
   var _z = _y, {
@@ -25054,7 +25052,6 @@ function SpsLabel(_y) {
     helpIcon = SpsIcon.QUESTION_CIRCLE,
     helpIconColor = "blue200",
     errors,
-    interactiveIcons,
     unsafelyReplaceClassName,
     "data-testid": testId
   } = _z, rest = __objRest(_z, [
@@ -25067,7 +25064,6 @@ function SpsLabel(_y) {
     "helpIcon",
     "helpIconColor",
     "errors",
-    "interactiveIcons",
     "unsafelyReplaceClassName",
     "data-testid"
   ]);
@@ -25165,6 +25161,9 @@ function SpsLabel(_y) {
     }
     return null;
   }
+  const [customIcons, otherChildren] = selectChildren(children, [
+    { type: SpsI }
+  ]);
   React.useEffect(() => {
     if (formMeta == null ? void 0 : formMeta.hasPreventativeErrors()) {
       setShowPreventativeErrorTip(TooltipVisibility.VISIBLE);
@@ -25192,18 +25191,13 @@ function SpsLabel(_y) {
   }), /* @__PURE__ */ React.createElement("span", {
     ref: labelRef,
     className: "sps-form-group__label-content"
-  }, children), /* @__PURE__ */ React.createElement("i", {
+  }, otherChildren), /* @__PURE__ */ React.createElement("i", {
     ref: helpIconRef,
     "data-testid": `${testId}__help-icon`,
     className: clsx("sps-icon", `sps-icon-${helpIcon}`, helpIconColor, !help && "d-none"),
     onClick: handleHelpClick,
     onMouseLeave: delayedHideTooltips
-  }), interactiveIcons && interactiveIcons.map((icon, idx) => /* @__PURE__ */ React.createElement("i", {
-    key: idx,
-    "data-testid": `${testId}__interactive-icon-${idx}`,
-    className: clsx("sps-icon", `sps-icon-${icon.icon}`, icon.iconColor, "interactive-icon"),
-    onClick: () => icon.onClick()
-  }))), /* @__PURE__ */ React.createElement(SpsTooltip, {
+  }), customIcons), /* @__PURE__ */ React.createElement(SpsTooltip, {
     kind: TooltipKind.DEFAULT,
     for: helpIconRef,
     showOn: TooltipShowTrigger.MANUAL,
@@ -25348,7 +25342,7 @@ const SpsLabelExamples = {
   },
   interactiveIcons: {
     label: "Interactive Icons",
-    description: ({ NavigateTo }) => /* @__PURE__ */ React.createElement("p", null, "The Interactive Icons can be used to launch a ", /* @__PURE__ */ React.createElement(NavigateTo, {
+    description: ({ NavigateTo }) => /* @__PURE__ */ React.createElement("p", null, "Interactive Icons can be used to launch a ", /* @__PURE__ */ React.createElement(NavigateTo, {
       to: "modal"
     }, "Modal"), " ", "window or ", /* @__PURE__ */ React.createElement(NavigateTo, {
       to: "focused-task"
@@ -25365,13 +25359,10 @@ const SpsLabelExamples = {
                       const [showFocusedTask, setShowFocusedTask] = React.useState(false);
 
                       return <>
-                          <SpsLabel for={formMeta.fields.companyName}
-                            interactiveIcons={[
-                              {icon: SpsIcon.GEAR, onClick: () => setShowModal(true)}, 
-                              {icon: SpsIcon.WRENCH, onClick: () => setShowFocusedTask(true), iconColor: "blue200"}
-                            ]}
-                          >
+                          <SpsLabel for={formMeta.fields.companyName}>
                               Company Name
+                              <SpsI icon={SpsIcon.GEAR} onClick={() => setShowModal(true)}/>
+                              <SpsI icon={SpsIcon.WRENCH} onClick={() => setShowFocusedTask(true)} className="blue200"/>
                           </SpsLabel>
                           <SpsTextInput formMeta={formMeta.fields.companyName}
                               value={formValue.companyName}
@@ -38456,6 +38447,9 @@ function SpsMultiValueTextInput(_ma) {
       patchState({ keyDown: event });
     }
   }
+  function handleBlur(event) {
+    createNewTag(event);
+  }
   function handleClearIconClick(event) {
     updateValue([]);
     event.stopPropagation();
@@ -38499,6 +38493,7 @@ function SpsMultiValueTextInput(_ma) {
     className: "sps-text-input__input",
     placeholder: state.searchText.length === 0 && value.length === 0 ? placeholder : void 0,
     id: controlId,
+    onBlur: handleBlur,
     onChange: handleChange,
     onKeyDown: handleKeyDown,
     disabled,

package/lib/label/SpsLabel.d.ts

@@ -2,11 +2,6 @@ import { SpsIcon } from "@spscommerce/ds-shared";
 import * as PropTypes from "../prop-types";
 import type { SpsFormControl } from "../form/hooks/formControl";
 import { SpsFormMetaBase } from "../form/hooks/useSpsForm";
-interface InteractiveIcon {
-    icon: SpsIcon;
-    iconColor: string;
-    onClick: () => void;
-}
 declare const propTypes: {
     description: PropTypes.Requireable<string>;
     for: PropTypes.Validator<SpsFormMetaBase<any> | SpsFormControl<any>>;
@@ -15,12 +10,11 @@ declare const propTypes: {
     helpIcon: PropTypes.Requireable<SpsIcon>;
     helpIconColor: PropTypes.Requireable<string>;
     errors: PropTypes.Requireable<PropTypes.ReactNodeOrRenderFn>;
-    interactiveIcons: PropTypes.Requireable<InteractiveIcon[]>;
     children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     className: PropTypes.Requireable<string>;
     "data-testid": PropTypes.Requireable<string>;
     unsafelyReplaceClassName: PropTypes.Requireable<string>;
 };
 export declare type SpsLabelProps = PropTypes.InferTS<typeof propTypes, HTMLLabelElement>;
-export declare function SpsLabel({ children, className, description, for: forProp, stronglySuggested, help, helpIcon, helpIconColor, errors, interactiveIcons, unsafelyReplaceClassName, "data-testid": testId, ...rest }: SpsLabelProps): JSX.Element;
+export declare function SpsLabel({ children, className, description, for: forProp, stronglySuggested, help, helpIcon, helpIconColor, errors, unsafelyReplaceClassName, "data-testid": testId, ...rest }: SpsLabelProps): JSX.Element;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "6.31.3",
+  "version": "6.31.4",
   "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.31.3",
-    "@spscommerce/ds-illustrations": "6.31.3",
-    "@spscommerce/ds-shared": "6.31.3",
-    "@spscommerce/positioning": "6.31.3",
+    "@spscommerce/ds-colors": "6.31.4",
+    "@spscommerce/ds-illustrations": "6.31.4",
+    "@spscommerce/ds-shared": "6.31.4",
+    "@spscommerce/positioning": "6.31.4",
     "@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.31.3",
-    "@spscommerce/ds-illustrations": "6.31.3",
-    "@spscommerce/ds-shared": "6.31.3",
-    "@spscommerce/positioning": "6.31.3",
+    "@spscommerce/ds-colors": "6.31.4",
+    "@spscommerce/ds-illustrations": "6.31.4",
+    "@spscommerce/ds-shared": "6.31.4",
+    "@spscommerce/positioning": "6.31.4",
     "@spscommerce/utils": "^6.11.3",
     "@testing-library/react": "^10.4.0",
     "@types/prop-types": "^15.7.1",