@spscommerce/ds-react 5.18.3 → 5.20.1

package/lib/index.es.js

@@ -2458,12 +2458,13 @@ function useDocumentEventListener(eventName, listenerFactory, deps) {
 }
 function documentClickHandlerFactory(rootRef, popupRef, doHidePopup) {
   return function documentClickHandler(event) {
-    if (!rootRef.current.contains(event.target) && !popupRef.current.contains(event.target)) {
+    var _a, _b;
+    if (!((_a = rootRef.current) == null ? void 0 : _a.contains(event.target)) && !((_b = popupRef.current) == null ? void 0 : _b.contains(event.target))) {
       doHidePopup();
     }
   };
 }
-function useInputPopup(rootRef, popupRef) {
+function useInputPopup(rootRef, popupRef, onHide) {
   const suppressPopup = React.useRef(false);
   const [showPopup, setShowPopup] = React.useState(false);
   const doShowPopup = React.useCallback(() => {
@@ -2476,6 +2477,9 @@ function useInputPopup(rootRef, popupRef) {
   const doHidePopup = React.useCallback((suppressNextShow = false) => {
     setShowPopup(false);
     suppressPopup.current = suppressNextShow;
+    if (onHide) {
+      onHide();
+    }
   }, []);
   useDocumentEventListener("click", documentClickHandlerFactory, [
     rootRef,
@@ -15350,7 +15354,7 @@ function SpsContentRowCol(props2) {
       ].join(" "));
     }
   }, [leaner]);
-  const classes = clsx(unsafelyReplaceClassName || "sps-content-row__col", borderless && "sps-content-row__col--borderless", (lean || leaner) && "sps-content-row__col--lean");
+  const classes = clsx(unsafelyReplaceClassName || "sps-content-row__col", borderless && "sps-content-row__col--borderless", (lean || leaner) && "sps-content-row__col--lean", className);
   const width = widthPx ? widthPx / 16 : widthRem;
   const inlineStyles = width ? __spreadProps(__spreadValues({}, style2), {
     width: `${width}rem`
@@ -28451,11 +28455,13 @@ Object.assign(SpsListToolbar, {
 });
 const propsDoc$S = {
   options: "SortOption[]",
-  onSortChange: "(key: string, direction: SortDirection) => void",
+  activeOption: "SortOption",
+  onSortChange: "(option: SortOption) => void",
   defaultOption: "SortOption"
 };
 const propTypes$U = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   options: propTypes$1O.exports.arrayOf(impl()),
+  activeOption: impl(),
   onSortChange: fun(),
   defaultOption: impl()
 });
@@ -28464,24 +28470,16 @@ function SpsListToolbarSortBy(props2) {
     options,
     onSortChange,
     defaultOption,
+    activeOption,
     className,
     unsafelyReplaceClassName
   } = props2;
-  const [label, setLabel] = React.useState(defaultOption.label || "");
-  const [directionIcon, setDirectionIcon] = React.useState(defaultOption.icon);
-  const sortOptions = options.map((option) => [
-    { label: option.label, icon: option.icon },
-    () => {
-      setLabel(option.label);
-      setDirectionIcon(option.icon);
-      onSortChange(option.key, option.direction);
-    }
-  ]);
+  const sortOptions = options.map((option) => [{ label: option.label, icon: option.icon }, () => onSortChange(option)]);
   const classes = clsx(unsafelyReplaceClassName || "sps-list-toolbar-sort-by", className);
   return /* @__PURE__ */ React.createElement(SpsDropdown, {
     className: classes,
-    icon: directionIcon,
-    label,
+    icon: (activeOption == null ? void 0 : activeOption.icon) || (defaultOption == null ? void 0 : defaultOption.icon),
+    label: (activeOption == null ? void 0 : activeOption.label) || (defaultOption == null ? void 0 : defaultOption.label),
     options: sortOptions
   });
 }
@@ -29177,53 +29175,53 @@ const SpsListToolbarExamples = {
       title: {
         react: code`
                     function Component() {
+                        const [activeOption, setActiveOption] = React.useState(null);
+                        const defaultOption = {
+                            label: "Default",
+                            key: "default",
+                            direction: SortDirection.ASCENDING,
+                            icon: SpsIcon.SORT_ALPHA_ASC,
+                        }
+                        const options = [
+                            defaultOption,
+                            {
+                                label: "Company Name: A-Z",
+                                key: "name",
+                                direction: SortDirection.ASCENDING,
+                                icon: SpsIcon.SORT_ALPHA_ASC,
+                            },
+                            {
+                                label: "Company Name: Z-A",
+                                key: "name",
+                                direction: SortDirection.DESCENDING,
+                                icon: SpsIcon.SORT_ALPHA_DESC,
+                            },
+                            {
+                                label: 'Created Date: Oldest to Newest',
+                                key: 'created',
+                                direction: SortDirection.ASCENDING,
+                                icon: SpsIcon.SORT_NUM_ASC,
+                            },
+                            {
+                                label: 'Created Date: Newest to Oldest',
+                                key: 'created',
+                                direction: SortDirection.DESCENDING,
+                                icon: SpsIcon.SORT_NUM_DESC,
+                            }
+                        ]
+
                         return (
                             <SpsListToolbar title="List of sortable rows">
-                            <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.DOWNLOAD_CLOUD} />
-                            <SpsVerticalRule />
-                            <SpsListToolbarSortBy
-                                options={[
-                                    {
-                                        label: "Default",
-                                        key: "default",
-                                        direction: SortDirection.ASCENDING,
-                                        icon: SpsIcon.SORT_ALPHA_ASC,
-                                    },
-                                    {
-                                        label: "Company Name: A-Z",
-                                        key: "name",
-                                        direction: SortDirection.ASCENDING,
-                                        icon: SpsIcon.SORT_ALPHA_ASC,
-                                    },
-                                    {
-                                        label: "Company Name: Z-A",
-                                        key: "name",
-                                        direction: SortDirection.DESCENDING,
-                                        icon: SpsIcon.SORT_ALPHA_DESC,
-                                    },
-                                    {
-                                      label: 'Created Date: Oldest to Newest',
-                                      key: 'created',
-                                      direction: SortDirection.ASCENDING,
-                                      icon: SpsIcon.SORT_NUM_ASC,
-                                    },
-                                    {
-                                      label: 'Created Date: Newest to Oldest',
-                                      key: 'created',
-                                      direction: SortDirection.DESCENDING,
-                                      icon: SpsIcon.SORT_NUM_DESC,
-                                    }
-                                ]}
-                                defaultOption={{
-                                    label: "Default",
-                                    key: "default",
-                                    direction: SortDirection.ASCENDING,
-                                    icon: SpsIcon.SORT_ALPHA_ASC,
-                                }}
-                                onSortChange={(key, direction) => console.log(key, direction)}
-                            />
-                            <SpsVerticalRule />
-                            <SpsButton kind={ButtonKind.CONFIRM}>Create New</SpsButton>
+                                <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.DOWNLOAD_CLOUD} />
+                                <SpsVerticalRule />
+                                <SpsListToolbarSortBy
+                                    options={options}
+                                    activeOption={activeOption}
+                                    defaultOption={defaultOption}
+                                    onSortChange={(option) => setActiveOption(option)}
+                                />
+                                <SpsVerticalRule />
+                                <SpsButton kind={ButtonKind.CONFIRM}>Create New</SpsButton>
                             </SpsListToolbar>
                         )
                     }
@@ -29907,6 +29905,7 @@ const SpsModalExamples = {
 };
 const propsDoc$P = {
   captionKey: "string",
+  clearSearchOnBlur: "boolean",
   debounce: "number",
   disabled: "boolean",
   disableSelected: "boolean",
@@ -29915,6 +29914,7 @@ const propsDoc$P = {
   hideSelected: "boolean",
   icon: "SpsIcon",
   onChange: "ChangeEventHandler",
+  onSearchChange: "(searchText: string) => void",
   options: "Eventually<any[]> | (filter?: string) => Eventually<any[]>",
   placeholder: "string",
   tallOptionList: "boolean",
@@ -29928,6 +29928,7 @@ const propsDoc$P = {
 const propTypes$R = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   action: fun(),
   captionKey: propTypes$1O.exports.string,
+  clearSearchOnBlur: propTypes$1O.exports.bool,
   debounce: propTypes$1O.exports.number,
   disabled: propTypes$1O.exports.bool,
   disableSelected: propTypes$1O.exports.bool,
@@ -29937,6 +29938,7 @@ const propTypes$R = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   hideSelected: propTypes$1O.exports.bool,
   icon: enumValue(SpsIcon),
   onChange: fun(),
+  onSearchChange: fun(),
   options: propTypes$1O.exports.oneOfType([
     propTypes$1O.exports.array,
     propTypes$1O.exports.instanceOf(Promise),
@@ -29956,6 +29958,7 @@ function SpsMultiSelect(_w) {
     action,
     captionKey,
     className,
+    clearSearchOnBlur,
     debounce: debounce2,
     disabled,
     disableSelected = false,
@@ -29965,6 +29968,7 @@ function SpsMultiSelect(_w) {
     hideSelected,
     id: id2,
     onChange,
+    onSearchChange,
     options,
     placeholder,
     tallOptionList,
@@ -29981,6 +29985,7 @@ function SpsMultiSelect(_w) {
     "action",
     "captionKey",
     "className",
+    "clearSearchOnBlur",
     "debounce",
     "disabled",
     "disableSelected",
@@ -29990,6 +29995,7 @@ function SpsMultiSelect(_w) {
     "hideSelected",
     "id",
     "onChange",
+    "onSearchChange",
     "options",
     "placeholder",
     "tallOptionList",
@@ -30012,15 +30018,27 @@ function SpsMultiSelect(_w) {
     activeTagIndex: null,
     optionIds: ""
   });
+  React.useEffect(() => {
+    if (onSearchChange) {
+      onSearchChange(state.searchText);
+    }
+  }, [state.searchText]);
   const rootElement = React.useRef();
   const inputVisual = React.useRef();
   const textInput = React.useRef();
   const optionListRef = React.useRef();
+  function handleBlur() {
+    if (clearSearchOnBlur) {
+      patchState({
+        searchText: ""
+      });
+    }
+  }
   const {
     showPopup,
     doShowPopup,
     doHidePopup
-  } = useInputPopup(rootElement, optionListRef);
+  } = useInputPopup(rootElement, optionListRef, handleBlur);
   function open() {
     patchState({ activeTagIndex: null });
     doShowPopup();
@@ -30368,6 +30386,56 @@ const SpsMultiSelectExamples = {
                 `
       }
     }
+  },
+  searchText: {
+    label: "Search text",
+    description: "Get search text",
+    examples: {
+      a_actionWithSearchText: {
+        react: code`
+           function Component() {
+              const [opts] = React.useState(["foo", "bar", "baz", "orp"]);
+              const { formValue, formMeta, updateForm } = useSpsForm({
+                tags: [opts[0]],
+              });
+            
+              const [searchText, setSearchText] = React.useState("");
+            
+              React.useEffect(() => {
+                  updateAction({
+                  label: searchText ? \`Create a New Tag "\${searchText}"\` : "Create a New Tag",
+                  });
+              }, [searchText, opts]);
+              
+              const handleSearchChange = (searchTextValue) => {
+                setSearchText(searchTextValue)
+              }
+            
+              const [action, updateAction] = useSpsAction(
+                {
+                  label: "Create a New Tag",
+                  icon: SpsIcon.PLUS_SIGN,
+                },
+                () => console.log("New Tag has been created")
+              );
+            
+              return (
+                <>
+                  <SpsLabel for={formMeta.fields.tags}>Tags</SpsLabel>
+                  <SpsMultiSelect
+                    disableSelected
+                    icon={SpsIcon.FILTER}
+                    options={opts}
+                    action={action}
+                    formMeta={formMeta.fields.tags}
+                    value={formValue.tags}
+                    onSearchChange={handleSearchChange}
+                  />
+                </>
+              );
+          }`
+      }
+    }
   }
 };
 const propsDoc$O = {};

package/lib/list-toolbar/SpsListToolbarSortBy.d.ts

@@ -8,7 +8,8 @@ export interface SortOption {
 }
 declare const propTypes: {
     options: PropTypes.Requireable<SortOption[]>;
-    onSortChange: PropTypes.Requireable<(key: string, direction: SortDirection) => void>;
+    activeOption: PropTypes.Requireable<SortOption>;
+    onSortChange: PropTypes.Requireable<(option: SortOption) => void>;
     defaultOption: PropTypes.Requireable<SortOption>;
     children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     className: PropTypes.Requireable<string>;

package/lib/multi-select/SpsMultiSelect.d.ts

@@ -8,6 +8,7 @@ import type { SpsFormFieldMeta } from "../form/hooks/useSpsForm";
 declare const propTypes: {
     action: PropTypes.Requireable<SpsActionMethod>;
     captionKey: PropTypes.Requireable<string>;
+    clearSearchOnBlur: PropTypes.Requireable<boolean>;
     debounce: PropTypes.Requireable<number>;
     disabled: PropTypes.Requireable<boolean>;
     disableSelected: PropTypes.Requireable<boolean>;
@@ -17,6 +18,7 @@ declare const propTypes: {
     hideSelected: PropTypes.Requireable<boolean>;
     icon: PropTypes.Requireable<SpsIcon>;
     onChange: PropTypes.Requireable<React.ChangeEventHandler<Element>>;
+    onSearchChange: PropTypes.Requireable<(searchText: string) => void>;
     options: PropTypes.Validator<any[] | Promise<any[]> | ((filter?: string) => Eventually<any[]>)>;
     placeholder: PropTypes.Requireable<string>;
     tallOptionList: PropTypes.Requireable<boolean>;
@@ -32,5 +34,5 @@ declare const propTypes: {
     unsafelyReplaceClassName: PropTypes.Requireable<string>;
 };
 export declare type SpsMultiSelectProps = PropTypes.InferTS<typeof propTypes, HTMLInputElement>;
-export declare function SpsMultiSelect({ action, captionKey, className, debounce, disabled, disableSelected, comparisonKey, formControl, formMeta, hideSelected, id, onChange, options, placeholder, tallOptionList, textKey, unsafelyReplaceClassName, value, zeroState, loading, icon, maxHeightOptionListPx, maxHeightOptionListRem, "data-testid": testId, ...rest }: SpsMultiSelectProps): JSX.Element;
+export declare function SpsMultiSelect({ action, captionKey, className, clearSearchOnBlur, debounce, disabled, disableSelected, comparisonKey, formControl, formMeta, hideSelected, id, onChange, onSearchChange, options, placeholder, tallOptionList, textKey, unsafelyReplaceClassName, value, zeroState, loading, icon, maxHeightOptionListPx, maxHeightOptionListRem, "data-testid": testId, ...rest }: SpsMultiSelectProps): JSX.Element;
 export {};

package/lib/utils/useInputPopup.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-export declare function useInputPopup(rootRef: React.MutableRefObject<HTMLElement>, popupRef: React.MutableRefObject<HTMLElement>): {
+export declare function useInputPopup(rootRef: React.MutableRefObject<HTMLElement>, popupRef: React.MutableRefObject<HTMLElement>, onHide?: () => void): {
     showPopup: boolean;
     doShowPopup: () => void;
     doHidePopup: (suppressNextShow?: any) => void;

package/package.json

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