@spscommerce/ds-react 6.29.1 → 6.30.0

package/lib/index.es.js

@@ -29893,6 +29893,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 = {
@@ -39230,6 +39280,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 +39419,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.1",
+  "version": "6.30.0",
   "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.1",
-    "@spscommerce/ds-illustrations": "6.29.1",
-    "@spscommerce/ds-shared": "6.29.1",
-    "@spscommerce/positioning": "6.29.1",
+    "@spscommerce/ds-colors": "6.30.0",
+    "@spscommerce/ds-illustrations": "6.30.0",
+    "@spscommerce/ds-shared": "6.30.0",
+    "@spscommerce/positioning": "6.30.0",
     "@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.29.1",
-    "@spscommerce/ds-illustrations": "6.29.1",
-    "@spscommerce/ds-shared": "6.29.1",
-    "@spscommerce/positioning": "6.29.1",
+    "@spscommerce/ds-colors": "6.30.0",
+    "@spscommerce/ds-illustrations": "6.30.0",
+    "@spscommerce/ds-shared": "6.30.0",
+    "@spscommerce/positioning": "6.30.0",
     "@spscommerce/utils": "^6.11.3",
     "@testing-library/react": "^9.3.2",
     "@types/prop-types": "^15.7.1",