@spscommerce/ds-react 6.29.2 → 6.30.1

package/lib/index.es.js

@@ -15445,6 +15445,7 @@ function SpsContentRow(props2) {
     cardSpacing = false,
     selectable = false,
     selected,
+    "data-testid": testId,
     unsafelyReplaceClassName
   } = _a, rest = __objRest(_a, [
     "alternateLayout",
@@ -15460,6 +15461,7 @@ function SpsContentRow(props2) {
     "cardSpacing",
     "selectable",
     "selected",
+    "data-testid",
     "unsafelyReplaceClassName"
   ]);
   const { t: t2 } = React.useContext(I18nContext);
@@ -15497,9 +15499,11 @@ function SpsContentRow(props2) {
     { type: SpsContentRowExpansion }
   ]);
   return /* @__PURE__ */ React.createElement("div", __spreadValues({
-    className: classes
+    className: classes,
+    "data-testid": testId
   }, rest), /* @__PURE__ */ React.createElement("div", {
-    className: "sps-content-row__col-group"
+    className: "sps-content-row__col-group",
+    "data-testid": `${testId}__children`
   }, selectable && !alternateLayout && /* @__PURE__ */ React.createElement(SpsContentRowCol, {
     widthPx: 46
   }, ContentRowCheckBox()), expansion && !alternateLayout && /* @__PURE__ */ React.createElement(SpsContentRowCol, {
@@ -15551,7 +15555,7 @@ const SpsContentRowExamples = {
                                 <SpsContentRow
                                     selectable
                                     selected={formValue.selected}
-                                    onSelect={selectRow}
+                                    onSelectionChange={selectRow}
                                 >
                                     <SpsContentRowCol>
                                         <SpsI icon={SpsIcon.STATUS_IN_PROCESS} size={SpsIconSize.LARGE} className="mr-2" />
@@ -15581,7 +15585,7 @@ const SpsContentRowExamples = {
                                 <SpsContentRow
                                     selectable
                                     selected={formValue.selected}
-                                    onSelect={selectRow}
+                                    onSelectionChange={selectRow}
                                 >
                                     <SpsContentRowCol style={{ width: "2.9rem" }}>
                                         <SpsI
@@ -15654,7 +15658,7 @@ const SpsContentRowExamples = {
                                 <SpsContentRow
                                     selectable
                                     selected={formValue.selected}
-                                    onSelect={selectRow}
+                                    onSelectionChange={selectRow}
                                 >
                                     <SpsContentRowCol>
                                         <SpsI icon={SpsIcon.STATUS_IN_PROCESS} size={SpsIconSize.LARGE} className="mr-2" />
@@ -15697,7 +15701,7 @@ const SpsContentRowExamples = {
                                 <SpsContentRow
                                     selectable
                                     selected={formValue.selected}
-                                    onSelect={selectRow}
+                                    onSelectionChange={selectRow}
                                     alternateLayout
                                 >
                                     <SpsContentRowCol>
@@ -15761,7 +15765,7 @@ const SpsContentRowExamples = {
                                 <SpsContentRow
                                     selectable
                                     selected={formValue.selected}
-                                    onSelect={selectRow}
+                                    onSelectionChange={selectRow}
                                 >
                                     <SpsContentRowCol style={{ width: "2.9rem" }}>
                                         <SpsI
@@ -15810,7 +15814,7 @@ const SpsContentRowExamples = {
                                 <SpsContentRow
                                     selectable
                                     selected={formValue.selected}
-                                    onSelect={selectRow}
+                                    onSelectionChange={selectRow}
                                     alternateLayout
                                 >
                                     <SpsContentRowCol style={{ width: "2.9rem" }}>
@@ -15912,7 +15916,7 @@ const SpsContentRowExamples = {
                                     key={item.id}
                                     selectable
                                     selected={formValue.selected === item.id}
-                                    onSelect={() => selectRow(item.id)}
+                                    onSelectionChange={() => selectRow(item.id)}
                                 >
                                     <SpsContentRowCol>
                                         {item.status === 'processing' && <SpsI icon={SpsIcon.STATUS_IN_PROCESS} size={SpsIconSize.LARGE} className="mr-2" />}
@@ -29893,6 +29897,56 @@ const SpsModalExamples = {
                 `
       }
     }
+  },
+  hook: {
+    label: "Hooks",
+    description: () => /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("p", null, "This hook allows to manage modals like a stack, so you can call pushModal/popModal from any place to show/hide modal."), /* @__PURE__ */ React.createElement("p", null, "It also helps with chain of modals, when you need to show several modals one by one and use results from them"), "If you use the useModals hook, you should ideally invoke it and place", " ", /* @__PURE__ */ React.createElement("code", null, "modals"), " at the top level of your app, and pass down", " ", /* @__PURE__ */ React.createElement("code", null, "pushModal"), " and ", /* @__PURE__ */ React.createElement("code", null, "popModal"), "."),
+    examples: {
+      hook: {
+        react: code`
+                    function SpsModalsHook() {
+                        const [modals, pushModal, popModal] = useModals();
+
+                        async function openModalAction() {
+                            const modalResult = await pushModal(<ModalComponent />);
+                            console.log(modalResult);
+                        }
+
+                        function cancelAction() {
+                            popModal({
+                                action: ModalAction.Cancel
+                            });
+                        }
+                    
+                        function primaryAction() {
+                            popModal({
+                                action: ModalAction.Ok,
+                                data: 'any data'
+                            });
+                        }
+
+                        const ModalComponent = () => (
+                            <SpsModal size={ModalSize.MEDIUM}>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                                <SpsModalFooter>
+                                    <SpsButton onClick={cancelAction}>Cancel Action</SpsButton>
+                                    <SpsButton kind={ButtonKind.KEY} onClick={primaryAction}>
+                                        Primary Action
+                                    </SpsButton>
+                                </SpsModalFooter>
+                            </SpsModal>
+                        );
+
+                        return (
+                            <>
+                                <SpsButton onClick={openModalAction}>Open a modal</SpsButton>
+                                {modals}
+                            </>
+                        );
+                    }
+                `
+      }
+    }
   }
 };
 const propsDoc$I = {
@@ -36094,7 +36148,8 @@ function SpsTileList(props2) {
   ]);
   const classes = clsx(unsafelyReplaceClassName || "sps-tile-list", className || "sfg-row");
   return /* @__PURE__ */ React.createElement("div", __spreadValues({
-    className: classes
+    className: classes,
+    "data-testid": testId
   }, rest), children);
 }
 Object.assign(SpsTileList, {
@@ -39230,6 +39285,50 @@ const SpsKeyValueTagExamples = {
     }
   }
 };
+var ModalAction;
+(function(ModalAction2) {
+  ModalAction2["Ok"] = "Ok";
+  ModalAction2["Cancel"] = "Cancel";
+})(ModalAction || (ModalAction = {}));
+const useModals = () => {
+  const [modals, setModals] = useState([]);
+  const pushModal = (component) => {
+    const modalsClone = [...modals];
+    const componentClone = __spreadValues({}, component);
+    componentClone.key = nanoid();
+    const promise = new Promise((resolve) => {
+      modalsClone.push({
+        component: componentClone,
+        resolve
+      });
+      setModals(modalsClone);
+    });
+    return promise;
+  };
+  const popModal = (result) => {
+    const modalsClone = [...modals];
+    const modal = modalsClone.pop();
+    modal == null ? void 0 : modal.resolve(result);
+    setModals(modalsClone);
+  };
+  const [schedulePopEnabled, setSchedulePopEnabled] = useState(false);
+  const [schedulePopResult, setSchedulePopResult] = useState(null);
+  useEffect(() => {
+    if (schedulePopEnabled) {
+      popModal(schedulePopResult);
+      setSchedulePopEnabled(false);
+    }
+  }, [schedulePopEnabled]);
+  const scheduledPopModal = (result) => {
+    setSchedulePopEnabled(true);
+    setSchedulePopResult(result);
+  };
+  return [
+    modals.map((m2) => m2.component),
+    pushModal,
+    scheduledPopModal
+  ];
+};
 function useSpsAction(descriptor, fn) {
   const metadata = __spreadValues(__spreadValues({}, SPS_ACTION_DEFAULTS), descriptor);
   const [state, patchState] = usePatchReducer(metadata);
@@ -39325,4 +39424,4 @@ Object.assign(SpsVr, {
   propTypes,
   displayName: "SpsDescriptionListTerm / SpsDt"
 });
-export { AsTypingErrorKeys, ContentOrderExample, DEFAULT_PRESETS, DragDropContext, PublicDraggable as Draggable, ConnectedDroppable as Droppable, FauxChangeEvent, I18nContext, MANIFEST, OnBlurErrorKeys, OnSubmitErrorKeys, PortalContext, PreventativeErrorKeys, Provide, SimpleDateUtils, SpsAddRemoveFormRowExamples, SpsAdvancedSearch, SpsAdvancedSearchExamples, SpsApp, SpsAutocomplete, SpsAutocompleteExamples, SpsButton, SpsButtonExamples, SpsButtonGroup, SpsCard, SpsCardExamples, SpsCardTabbedPane, SpsCardV2, SpsCardV2Footer, SpsCardV2Header, SpsCardV2Title, SpsCheckbox, SpsCheckboxDropdown, SpsCheckboxExamples, SpsClickableTag, SpsClickableTagExamples, SpsColumnChooser, SpsColumnChooserColumn, SpsColumnChooserExamples, SpsConditionalField, SpsConditionalFieldExamples, SpsContentRow, SpsContentRowCol, SpsContentRowExamples, SpsContentRowExpansion, SpsContextBar, SpsCurrencyInput, SpsCurrencyInputExamples, SpsDateRangePicker, SpsDateRangePickerExamples, SpsDateTime, SpsDatepicker, SpsDatepickerExamples, SpsDatetimeExamples, SpsDd, SpsDescriptionList, SpsDescriptionListDefinition, SpsDescriptionListExamples, SpsDescriptionListTerm, SpsDl, SpsDropdown, SpsDropdownExamples, SpsDt, SpsFeedbackBlock, SpsFeedbackBlockExamples, SpsFieldset, SpsFieldsetExamples, SpsFilterPanel, SpsFilterPanelCap, SpsFilterPanelExamples, SpsFilterPanelFilterBox, SpsFilterPanelSection, SpsFilterTile, SpsFilterTileList, SpsFilterTileListExamples, SpsFocusedTask, SpsFocusedTaskActions, SpsFocusedTaskExamples, SpsForm, SpsFormArrayMeta, SpsFormComponentWrapper, SpsFormExamples, SpsFormFieldMeta, SpsFormGroupMeta, SpsFormMetaBase, SpsFormSetMeta, SpsGrowler, SpsGrowlerExamples, SpsI, SpsIconButtonPanel, SpsIncrementor, SpsIncrementorExamples, SpsInputGroup, SpsInsightTile, SpsInsights, SpsKeyValueList, SpsKeyValueListExamples, SpsKeyValueListItem, SpsKeyValueTag, SpsKeyValueTagExamples, SpsLabel, SpsLabelExamples, SpsListActionBar, SpsListActionBarExamples, SpsListToolbar, SpsListToolbarExamples, SpsListToolbarSearch, SpsListToolbarSearchInfo, SpsListToolbarSortBy, SpsMicroBlock, SpsMicroBlockExamples, SpsMicroZeroState, SpsModal, SpsModalExamples, SpsModalFooter, SpsMultiSelect, SpsMultiSelectExamples, SpsMultiValueTextInput, SpsMultiValueTextInputExamples, SpsPageSelector, SpsPageSubtitle, SpsPageTitle, SpsPageTitleExamples, SpsPagination, SpsPaginationExamples, SpsProductBar, SpsProductBarExamples, SpsProductBarTab, SpsProgressBar, SpsProgressBarExamples, SpsProgressRing, SpsRadioButton, SpsRadioButtonExamples, SpsScrollableContainer, SpsScrollableContainerExamples, SpsSearchResultsBar, SpsSearchResultsBarExamples, SpsSearchResultsBarV2, SpsSelect, SpsSelectExamples, SpsSideNav, SpsSideNavExamples, SpsSlackLink, SpsSlackLinkExamples, SpsSlideInPanel, SpsSlideInPanelExamples, SpsSortingHeader, SpsSortingHeaderCell, SpsSortingHeaderExamples, SpsSpinner, SpsSpinnerExamples, SpsSplitButton, SpsSplitButtonExamples, SpsSteppedProgressBar, SpsSteppedProgressBarExamples, SpsSummaryListColumn, SpsSummaryListExamples, SpsSummaryListExpansion, SpsSummaryListRow, SpsTab, SpsTabPanel, SpsTable, SpsTableBody, SpsTableCell, SpsTableExamples, SpsTableHead, SpsTableHeader, SpsTableRow, SpsTabsV2, SpsTag, SpsTagExamples, SpsTaskQueue, SpsTaskQueueExamples, SpsTbody, SpsTd, SpsTextInput, SpsTextInputExamples, SpsTextarea, SpsTextareaExamples, SpsTh, SpsThead, SpsTile, SpsTileList, SpsTileListExamples, SpsToggle, SpsToggleExamples, SpsTooltip, SpsTooltipExamples, SpsTooltipTitle, SpsTr, SpsValidators, SpsVerticalRule, SpsVr, SpsWf, SpsWfDoc, SpsWfDs, SpsWfStep, SpsWizardExamples, SpsWizardSidebar, SpsWizardSubstep, SpsWorkflow, SpsWorkflowDocument, SpsWorkflowDocumentStatus, SpsWorkflowExamples, SpsWorkflowStep, SpsZeroState, SpsZeroStateExamples, TooltipVisibility, ValidationMode, addOnChangeErrorKey, addOnSubmitErrorKey, bindProps, contentOf, date, dateConstraint, dateRange, findParentBranches, flipPosition, formArray, formControl, formGroup, getMember, getPosition, resetServerContext, selectChildren, toggleTooltipState, useCheckDeprecatedProps, useColumnResizer, useCustomValidator, useDidUpdateEffect, useDocumentEventListener, useElementId, useForm, useGrowlers, useInputPopup, useKeyboardSensor, useMouseSensor, usePatchReducer, usePortal, useServerSideValidation, useSpsAction, useSpsForm, useTouchSensor, validate };
+export { AsTypingErrorKeys, ContentOrderExample, DEFAULT_PRESETS, DragDropContext, PublicDraggable as Draggable, ConnectedDroppable as Droppable, FauxChangeEvent, I18nContext, MANIFEST, ModalAction, OnBlurErrorKeys, OnSubmitErrorKeys, PortalContext, PreventativeErrorKeys, Provide, SimpleDateUtils, SpsAddRemoveFormRowExamples, SpsAdvancedSearch, SpsAdvancedSearchExamples, SpsApp, SpsAutocomplete, SpsAutocompleteExamples, SpsButton, SpsButtonExamples, SpsButtonGroup, SpsCard, SpsCardExamples, SpsCardTabbedPane, SpsCardV2, SpsCardV2Footer, SpsCardV2Header, SpsCardV2Title, SpsCheckbox, SpsCheckboxDropdown, SpsCheckboxExamples, SpsClickableTag, SpsClickableTagExamples, SpsColumnChooser, SpsColumnChooserColumn, SpsColumnChooserExamples, SpsConditionalField, SpsConditionalFieldExamples, SpsContentRow, SpsContentRowCol, SpsContentRowExamples, SpsContentRowExpansion, SpsContextBar, SpsCurrencyInput, SpsCurrencyInputExamples, SpsDateRangePicker, SpsDateRangePickerExamples, SpsDateTime, SpsDatepicker, SpsDatepickerExamples, SpsDatetimeExamples, SpsDd, SpsDescriptionList, SpsDescriptionListDefinition, SpsDescriptionListExamples, SpsDescriptionListTerm, SpsDl, SpsDropdown, SpsDropdownExamples, SpsDt, SpsFeedbackBlock, SpsFeedbackBlockExamples, SpsFieldset, SpsFieldsetExamples, SpsFilterPanel, SpsFilterPanelCap, SpsFilterPanelExamples, SpsFilterPanelFilterBox, SpsFilterPanelSection, SpsFilterTile, SpsFilterTileList, SpsFilterTileListExamples, SpsFocusedTask, SpsFocusedTaskActions, SpsFocusedTaskExamples, SpsForm, SpsFormArrayMeta, SpsFormComponentWrapper, SpsFormExamples, SpsFormFieldMeta, SpsFormGroupMeta, SpsFormMetaBase, SpsFormSetMeta, SpsGrowler, SpsGrowlerExamples, SpsI, SpsIconButtonPanel, SpsIncrementor, SpsIncrementorExamples, SpsInputGroup, SpsInsightTile, SpsInsights, SpsKeyValueList, SpsKeyValueListExamples, SpsKeyValueListItem, SpsKeyValueTag, SpsKeyValueTagExamples, SpsLabel, SpsLabelExamples, SpsListActionBar, SpsListActionBarExamples, SpsListToolbar, SpsListToolbarExamples, SpsListToolbarSearch, SpsListToolbarSearchInfo, SpsListToolbarSortBy, SpsMicroBlock, SpsMicroBlockExamples, SpsMicroZeroState, SpsModal, SpsModalExamples, SpsModalFooter, SpsMultiSelect, SpsMultiSelectExamples, SpsMultiValueTextInput, SpsMultiValueTextInputExamples, SpsPageSelector, SpsPageSubtitle, SpsPageTitle, SpsPageTitleExamples, SpsPagination, SpsPaginationExamples, SpsProductBar, SpsProductBarExamples, SpsProductBarTab, SpsProgressBar, SpsProgressBarExamples, SpsProgressRing, SpsRadioButton, SpsRadioButtonExamples, SpsScrollableContainer, SpsScrollableContainerExamples, SpsSearchResultsBar, SpsSearchResultsBarExamples, SpsSearchResultsBarV2, SpsSelect, SpsSelectExamples, SpsSideNav, SpsSideNavExamples, SpsSlackLink, SpsSlackLinkExamples, SpsSlideInPanel, SpsSlideInPanelExamples, SpsSortingHeader, SpsSortingHeaderCell, SpsSortingHeaderExamples, SpsSpinner, SpsSpinnerExamples, SpsSplitButton, SpsSplitButtonExamples, SpsSteppedProgressBar, SpsSteppedProgressBarExamples, SpsSummaryListColumn, SpsSummaryListExamples, SpsSummaryListExpansion, SpsSummaryListRow, SpsTab, SpsTabPanel, SpsTable, SpsTableBody, SpsTableCell, SpsTableExamples, SpsTableHead, SpsTableHeader, SpsTableRow, SpsTabsV2, SpsTag, SpsTagExamples, SpsTaskQueue, SpsTaskQueueExamples, SpsTbody, SpsTd, SpsTextInput, SpsTextInputExamples, SpsTextarea, SpsTextareaExamples, SpsTh, SpsThead, SpsTile, SpsTileList, SpsTileListExamples, SpsToggle, SpsToggleExamples, SpsTooltip, SpsTooltipExamples, SpsTooltipTitle, SpsTr, SpsValidators, SpsVerticalRule, SpsVr, SpsWf, SpsWfDoc, SpsWfDs, SpsWfStep, SpsWizardExamples, SpsWizardSidebar, SpsWizardSubstep, SpsWorkflow, SpsWorkflowDocument, SpsWorkflowDocumentStatus, SpsWorkflowExamples, SpsWorkflowStep, SpsZeroState, SpsZeroStateExamples, TooltipVisibility, ValidationMode, addOnChangeErrorKey, addOnSubmitErrorKey, bindProps, contentOf, date, dateConstraint, dateRange, findParentBranches, flipPosition, formArray, formControl, formGroup, getMember, getPosition, resetServerContext, selectChildren, toggleTooltipState, useCheckDeprecatedProps, useColumnResizer, useCustomValidator, useDidUpdateEffect, useDocumentEventListener, useElementId, useForm, useGrowlers, useInputPopup, useKeyboardSensor, useModals, useMouseSensor, usePatchReducer, usePortal, useServerSideValidation, useSpsAction, useSpsForm, useTouchSensor, validate };

package/lib/modal/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./SpsModal";
+export * from "./useModals";
 export * from "./SpsModal.examples";

package/lib/modal/useModals.d.ts

@@ -0,0 +1,15 @@
+declare type UseModalsType = [
+    modals: JSX.Element[],
+    pushModal: <T>(component: JSX.Element) => Promise<ModalResult<T>>,
+    popModal: <T>(result?: ModalResult<T>) => void
+];
+export declare enum ModalAction {
+    Ok = "Ok",
+    Cancel = "Cancel"
+}
+export interface ModalResult<T> {
+    action: ModalAction;
+    data?: T;
+}
+export declare const useModals: () => UseModalsType;
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "6.29.2",
+  "version": "6.30.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.29.2",
-    "@spscommerce/ds-illustrations": "6.29.2",
-    "@spscommerce/ds-shared": "6.29.2",
-    "@spscommerce/positioning": "6.29.2",
+    "@spscommerce/ds-colors": "6.30.1",
+    "@spscommerce/ds-illustrations": "6.30.1",
+    "@spscommerce/ds-shared": "6.30.1",
+    "@spscommerce/positioning": "6.30.1",
     "@spscommerce/utils": "^6.11.3",
     "moment": "^2.25.3",
     "moment-timezone": "^0.5.28",
@@ -40,12 +40,12 @@
   },
   "devDependencies": {
     "@react-stately/collections": "^3.3.3",
-    "@spscommerce/ds-colors": "6.29.2",
-    "@spscommerce/ds-illustrations": "6.29.2",
-    "@spscommerce/ds-shared": "6.29.2",
-    "@spscommerce/positioning": "6.29.2",
+    "@spscommerce/ds-colors": "6.30.1",
+    "@spscommerce/ds-illustrations": "6.30.1",
+    "@spscommerce/ds-shared": "6.30.1",
+    "@spscommerce/positioning": "6.30.1",
     "@spscommerce/utils": "^6.11.3",
-    "@testing-library/react": "^9.3.2",
+    "@testing-library/react": "^10.4.0",
     "@types/prop-types": "^15.7.1",
     "@types/react": "^16.9.0",
     "@types/react-beautiful-dnd": "^13.1.2",