@spscommerce/ds-react 5.10.0 → 5.10.4

package/lib/index.es.js

@@ -1147,8 +1147,10 @@ function useSpsForm(value, validatorMap) {
       if (action.path) {
         if (action.markAsBlurred) {
           const control = getMember$1(currentState.formMeta, action.path);
-          control.focused = false;
-          control.revealAllErrors = true;
+          if (control) {
+            control.focused = false;
+            control.revealAllErrors = true;
+          }
         } else {
           newValue = cloneFormValue(currentState.formValue, action.path);
           setPath(newValue, action.path, action.value);
@@ -1254,6 +1256,11 @@ function useSpsForm(value, validatorMap) {
       scheduledDispatch.current = sd;
     }
   }
+  useEffect(() => () => {
+    if (scheduledDispatch.current) {
+      window.clearTimeout(scheduledDispatch.current);
+    }
+  }, []);
   return state;
 }
 const spsFormComponentWrapperPropTypes = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
@@ -1639,8 +1646,7 @@ function usePortal(id2, classes = []) {
         target.classList.add(className);
       }
       parent.appendChild(target);
-    } else if (target.nextElementSibling) {
-      parent.removeChild(target);
+    } else if (!parent.contains(target)) {
       parent.appendChild(target);
     }
     return createPortal(jsx, target);
@@ -21878,6 +21884,7 @@ function SpsTooltip({
   const [shown, setShown] = React.useState(false);
   const rootElement = React.useRef(null);
   const forElementRef = typeof forProp === "string" ? React.useRef(document.getElementById(forProp)) : forProp;
+  const caretRef = React.useRef(null);
   const clearHideDelay = React.useCallback(() => {
     if (iref.current.hideTimer) {
       window.clearTimeout(iref.current.hideTimer);
@@ -21927,6 +21934,35 @@ function SpsTooltip({
     clearHideDelay();
     iref.current.hideTimer = window.setTimeout(hide2, hideDelay);
   }, []);
+  const getSecondaryOffset = React.useCallback((pos) => {
+    var _a, _b, _c, _d, _e, _f;
+    const [primaryPosition, secondaryPosition] = pos.split(" ");
+    const forElementBounds = (_a = forElementRef == null ? void 0 : forElementRef.current) == null ? void 0 : _a.getBoundingClientRect();
+    const caretWidth = caretRef.current ? parseInt(((_b = getComputedStyle(caretRef.current)) == null ? void 0 : _b.width) || "0", 10) : 0;
+    const caretDiagonal = caretWidth * Math.sqrt(2);
+    const caretTransformationMargin = (caretDiagonal - caretWidth) / 2;
+    if (["top", "bottom"].includes(primaryPosition) && secondaryPosition !== "middle") {
+      if (!(forElementBounds == null ? void 0 : forElementBounds.width) || forElementBounds.width > 50) {
+        return 0;
+      }
+      const caretLeft = caretRef.current ? parseInt(((_c = getComputedStyle(caretRef.current)) == null ? void 0 : _c.left) || "0", 10) : 0;
+      const caretRight = caretRef.current ? parseInt(((_d = getComputedStyle(caretRef.current)) == null ? void 0 : _d.right) || "0", 10) : 0;
+      const caretOffsetStart = caretLeft < caretRight ? caretLeft : caretRight;
+      const caretOffsetToMiddle = caretOffsetStart - caretTransformationMargin + caretDiagonal / 2;
+      return forElementBounds.width / 2 - caretOffsetToMiddle;
+    } else if (["left", "right"].includes(primaryPosition) && secondaryPosition !== "middle") {
+      if ((forElementBounds == null ? void 0 : forElementBounds.height) && forElementBounds.height > 50) {
+        return 0;
+      }
+      const caretTop = caretRef.current ? parseInt(((_e = getComputedStyle(caretRef.current)) == null ? void 0 : _e.top) || "0", 10) : 0;
+      const caretBottom = caretRef.current ? parseInt(((_f = getComputedStyle(caretRef.current)) == null ? void 0 : _f.bottom) || "0", 10) : 0;
+      const caretOffsetStart = caretTop < caretBottom ? caretTop : caretBottom;
+      const caretOffsetToMiddle = caretOffsetStart - caretTransformationMargin + caretDiagonal / 2;
+      return forElementBounds.height / 2 - caretOffsetToMiddle;
+    } else {
+      return 0;
+    }
+  }, []);
   React.useEffect(() => {
     if (typeof forProp === "string") {
       forElementRef.current = document.getElementById(forProp);
@@ -21997,7 +22033,7 @@ function SpsTooltip({
   const [posStyle, altPositionUsed] = shown ? getPosition(rootElement, forElementRef, position3, __spreadValues({
     altPosition,
     setMinWidth: false,
-    offsets: [offsets[0] - CARET_SPACING_PX, offsets[1]]
+    offsets: [offsets[0] - CARET_SPACING_PX, offsets[1] + getSecondaryOffset(position3)]
   }, portalContext)) : [{}, false];
   const classes = clsx(unsafelyReplaceClassName || "sps-tooltip", "z-stratum-tip", `sps-tooltip--${kind}`, `sps-tooltip--pos-${(altPositionUsed ? altPosition : position3).replace(" ", "-")}`, shown && "sps-tooltip--shown", className);
   return portal(/* @__PURE__ */ React.createElement("div", {
@@ -22013,6 +22049,7 @@ function SpsTooltip({
   }, title) : title), /* @__PURE__ */ React.createElement("span", {
     className: "sps-tooltip__body d-block"
   }, children), /* @__PURE__ */ React.createElement("span", {
+    ref: caretRef,
     className: "sps-tooltip__caret"
   })));
 }
@@ -36794,7 +36831,8 @@ function SpsDatepickerCalendar(props2) {
     minDate,
     onNewSelection,
     selectedDate,
-    selectedRange
+    selectedRange,
+    "data-testid": testId
   } = _a, rest = __objRest(_a, [
     "children",
     "className",
@@ -36802,7 +36840,8 @@ function SpsDatepickerCalendar(props2) {
     "minDate",
     "onNewSelection",
     "selectedDate",
-    "selectedRange"
+    "selectedRange",
+    "data-testid"
   ]);
   const { t: t2 } = React.useContext(I18nContext);
   const [viewMonth, setViewMonth] = React.useState(() => determineViewMonth(props2));
@@ -36843,12 +36882,14 @@ function SpsDatepickerCalendar(props2) {
   }
   const classes = clsx(CSS_ELEMENT$1, className);
   return viewMonth ? /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({
+    "data-testid": `${testId}`,
     className: classes
   }, rest), {
     onMouseOver: handleMouseEnter
   }), /* @__PURE__ */ React.createElement("div", {
     className: `${CSS_ELEMENT$1}-head`
   }, /* @__PURE__ */ React.createElement("button", {
+    "data-testid": `${testId}_prev_month`,
     type: "button",
     tabIndex: -1,
     disabled: SimpleDateUtils.isSameMonth(viewMonth, minDate),
@@ -36865,6 +36906,7 @@ function SpsDatepickerCalendar(props2) {
     className: `${CSS_ELEMENT$1}-head-label-year`
   }, viewMonth.year)), /* @__PURE__ */ React.createElement("button", {
     type: "button",
+    "data-testid": `${testId}_next_month`,
     tabIndex: -1,
     disabled: SimpleDateUtils.isSameMonth(viewMonth, maxDate),
     title: t2("design-system:datepicker.calendar.nextMonth"),
@@ -36885,7 +36927,8 @@ function SpsDatepickerCalendar(props2) {
   }, week.map((date2, j) => /* @__PURE__ */ React.createElement("div", {
     key: j,
     className: calendarCellClasses(date2),
-    onClick: () => handleCellClick(date2)
+    onClick: () => handleCellClick(date2),
+    "data-testid": `${testId}_${SimpleDateUtils.toString(date2)}`
   }, date2 ? date2.date : "")))))) : /* @__PURE__ */ React.createElement(React.Fragment, null);
 }
 Object.assign(SpsDatepickerCalendar, {
@@ -37081,7 +37124,8 @@ function SpsDateRangePickerV2(_Y) {
     minDate,
     onChange,
     presets = DEFAULT_PRESETS,
-    value
+    value,
+    "data-testid": testId
   } = _Z, rest = __objRest(_Z, [
     "children",
     "className",
@@ -37092,7 +37136,8 @@ function SpsDateRangePickerV2(_Y) {
     "minDate",
     "onChange",
     "presets",
-    "value"
+    "value",
+    "data-testid"
   ]);
   const { t: t2 } = React.useContext(I18nContext);
   const { wrapperId, controlId } = useFormControlId(id2, formMeta);
@@ -37207,6 +37252,7 @@ function SpsDateRangePickerV2(_Y) {
   }, /* @__PURE__ */ React.createElement("i", {
     className: clsx("sps-text-input__icon", "sps-icon", "sps-icon-calendar")
   }), selectedPreset && /* @__PURE__ */ React.createElement("div", {
+    "data-testid": `${testId}_selected_preset`,
     className: "sps-datepicker__selected-preset"
   }, /* @__PURE__ */ React.createElement("span", {
     className: "sps-tag sps-tag--info"
@@ -37214,6 +37260,7 @@ function SpsDateRangePickerV2(_Y) {
     type: "text",
     ref: textInput,
     className: "sps-text-input__input",
+    "data-testid": `${testId}_date_input`,
     id: controlId,
     placeholder: !stringValue && !selectedPreset ? FORMAT : void 0,
     onChange: handleTextInputChange,
@@ -37236,6 +37283,7 @@ function SpsDateRangePickerV2(_Y) {
   }, t2("design-system:datepicker.presetsLabel")), /* @__PURE__ */ React.createElement("div", {
     className: "sps-custom-control sps-custom-radio sps-custom-control--no-error"
   }, /* @__PURE__ */ React.createElement("input", {
+    "data-testid": `${testId}_presets_custom_input`,
     type: "radio",
     id: `sps-date-range-picker-${wrapperId}__range-custom`,
     className: "sps-custom-control__input",
@@ -37250,6 +37298,7 @@ function SpsDateRangePickerV2(_Y) {
     className: "sps-custom-control sps-custom-radio sps-custom-control--no-error"
   }, /* @__PURE__ */ React.createElement("input", {
     type: "radio",
+    "data-testid": `${testId}_preset_option_${preset2.label}`,
     id: `sps-date-range-picker-${wrapperId}__range-${i2}`,
     name: `sps-date-range-picker-${wrapperId}__range`,
     onChange: () => selectPreset(preset2),
@@ -37259,6 +37308,7 @@ function SpsDateRangePickerV2(_Y) {
     className: "sps-custom-control__label",
     htmlFor: `sps-date-range-picker-${wrapperId}__range-${i2}`
   }, getPresetText(preset2)))))), /* @__PURE__ */ React.createElement(SpsDatepickerCalendar, {
+    "data-testid": `${testId}_calendar`,
     selectedRange: Array.isArray(value) ? value : displayRange,
     onNewSelection: handleNewSelection,
     minDate,
@@ -38028,4 +38078,4 @@ Object.assign(SpsVr, {
   propTypes,
   displayName: "SpsDescriptionListTerm / SpsDt"
 });
-export { AsTypingErrorKeys, ContentOrderExample, FauxChangeEvent, I18nContext, MANIFEST, OnBlurErrorKeys, PortalContext, PreventativeErrorKeys, SimpleDateUtils, SpsAddRemoveFormRowExamples, SpsAdvancedSearch, SpsAdvancedSearchExamples, 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, SpsCurrencyInput, SpsCurrencyInputExamples, SpsDateRangePicker, SpsDateRangePickerExamples, SpsDateRangePickerV2, SpsDateTime, SpsDatepicker, SpsDatepickerExamples, SpsDatepickerV2, 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, SpsMicroBlock, SpsMicroBlockExamples, SpsMicroZeroState, SpsModal, SpsModalAction, SpsModalBody, SpsModalExamples, SpsModalFooter, SpsModalHeader, SpsModalOverlay, SpsModalV2, SpsModalV2Footer, SpsMultiSelect, SpsMultiSelectExamples, SpsPageSelector, SpsPageSubtitle, SpsPageTitle, SpsPageTitleExamples, SpsPagination, SpsPaginationExamples, SpsProductBar, SpsProductBarExamples, SpsProductBarTab, SpsProgressBar, SpsProgressBarExamples, SpsProgressRing, SpsRadioButton, SpsRadioButtonExamples, SpsScrollableContainer, SpsScrollableContainerExamples, SpsSearchResultsBar, SpsSearchResultsBarExamples, SpsSelect, SpsSelectExamples, SpsSideNav, SpsSideNavExamples, SpsSlackLink, SpsSlackLinkExamples, 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, contentOf, date, dateConstraint, dateRange, findParentBranches, flipPosition, formArray, formControl, formGroup, getMember, getPosition, selectChildren, toggleTooltipState, useCheckDeprecatedProps, useDidUpdateEffect, useDocumentEventListener, useElementId, useForm, useGrowlers, useInputPopup, usePatchReducer, usePortal, useServerSideValidation, useSpsAction, useSpsForm, validate, weekOfMonth };
+export { AsTypingErrorKeys, ContentOrderExample, DEFAULT_PRESETS, FauxChangeEvent, I18nContext, MANIFEST, OnBlurErrorKeys, PortalContext, PreventativeErrorKeys, SimpleDateUtils, SpsAddRemoveFormRowExamples, SpsAdvancedSearch, SpsAdvancedSearchExamples, 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, SpsCurrencyInput, SpsCurrencyInputExamples, SpsDateRangePicker, SpsDateRangePickerExamples, SpsDateRangePickerV2, SpsDateTime, SpsDatepicker, SpsDatepickerExamples, SpsDatepickerV2, 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, SpsMicroBlock, SpsMicroBlockExamples, SpsMicroZeroState, SpsModal, SpsModalAction, SpsModalBody, SpsModalExamples, SpsModalFooter, SpsModalHeader, SpsModalOverlay, SpsModalV2, SpsModalV2Footer, SpsMultiSelect, SpsMultiSelectExamples, SpsPageSelector, SpsPageSubtitle, SpsPageTitle, SpsPageTitleExamples, SpsPagination, SpsPaginationExamples, SpsProductBar, SpsProductBarExamples, SpsProductBarTab, SpsProgressBar, SpsProgressBarExamples, SpsProgressRing, SpsRadioButton, SpsRadioButtonExamples, SpsScrollableContainer, SpsScrollableContainerExamples, SpsSearchResultsBar, SpsSearchResultsBarExamples, SpsSelect, SpsSelectExamples, SpsSideNav, SpsSideNavExamples, SpsSlackLink, SpsSlackLinkExamples, 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, contentOf, date, dateConstraint, dateRange, findParentBranches, flipPosition, formArray, formControl, formGroup, getMember, getPosition, selectChildren, toggleTooltipState, useCheckDeprecatedProps, useDidUpdateEffect, useDocumentEventListener, useElementId, useForm, useGrowlers, useInputPopup, usePatchReducer, usePortal, useServerSideValidation, useSpsAction, useSpsForm, validate, weekOfMonth };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "5.10.0",
+  "version": "5.10.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": "5.10.0",
-    "@spscommerce/ds-shared": "5.10.0",
-    "@spscommerce/positioning": "5.10.0",
-    "@spscommerce/utils": "5.10.0",
+    "@spscommerce/ds-colors": "5.10.4",
+    "@spscommerce/ds-shared": "5.10.4",
+    "@spscommerce/positioning": "5.10.4",
+    "@spscommerce/utils": "5.10.4",
     "moment": "^2.25.3",
     "moment-timezone": "^0.5.28",
     "react": "^16.9.0",
@@ -39,10 +39,10 @@
   },
   "devDependencies": {
     "@react-stately/collections": "^3.3.3",
-    "@spscommerce/ds-colors": "5.10.0",
-    "@spscommerce/ds-shared": "5.10.0",
-    "@spscommerce/positioning": "5.10.0",
-    "@spscommerce/utils": "5.10.0",
+    "@spscommerce/ds-colors": "5.10.4",
+    "@spscommerce/ds-shared": "5.10.4",
+    "@spscommerce/positioning": "5.10.4",
+    "@spscommerce/utils": "5.10.4",
     "@testing-library/react": "^9.3.2",
     "@types/prop-types": "^15.7.1",
     "@types/react": "^16.9.0",