@spscommerce/ds-react 5.9.0 → 5.10.3

package/lib/index.es.js

@@ -1639,8 +1639,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 +21877,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 +21927,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 +22026,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 +22042,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"
   })));
 }
@@ -22798,7 +22828,8 @@ function SpsFieldset({
   optional = false,
   enabled,
   onToggled,
-  tooltip
+  tooltip,
+  "data-testid": testId
 }) {
   const formControlSet = formGroup2 || formArray2;
   const legendElement = React.useRef(null);
@@ -22832,7 +22863,8 @@ function SpsFieldset({
   return /* @__PURE__ */ React.createElement("div", {
     className: "sps-fieldset-container"
   }, /* @__PURE__ */ React.createElement("fieldset", {
-    className: fieldsetClasses
+    className: fieldsetClasses,
+    "data-testid": testId
   }, /* @__PURE__ */ React.createElement("legend", {
     className: "sps-fieldset__legend",
     ref: legendElement,
@@ -22844,12 +22876,14 @@ function SpsFieldset({
     className: "d-inline-flex",
     onChange: () => {
       setisChecked(!isChecked);
-    }
+    },
+    "data-testid": `${testId}__checkbox`
   }), legend, tooltip && /* @__PURE__ */ React.createElement("span", {
     className: "sps-fieldset__legend-icon",
     ref: infoCircleElement
   }, /* @__PURE__ */ React.createElement(SpsI, {
-    icon: SpsIcon.INFO_CIRCLE
+    icon: SpsIcon.INFO_CIRCLE,
+    "data-testid": `${testId}__info-icon`
   }))), tooltip && /* @__PURE__ */ React.createElement(SpsTooltip, {
     for: infoCircleElement
   }, tooltip), /* @__PURE__ */ React.createElement(SpsTooltip, {
@@ -32065,7 +32099,7 @@ const SpsSideNavBranch = ({
     onClick: () => {
       setIsBranchExpanded(!isBranchExpanded);
       if (!branch.subNavItems) {
-        setActiveBranch(branch.name);
+        setActiveBranch(branch.name, branch.key);
       }
     },
     onKeyDown: (event) => {
@@ -32074,12 +32108,13 @@ const SpsSideNavBranch = ({
         event.preventDefault();
         setIsBranchExpanded(!isBranchExpanded);
         if (!branch.subNavItems) {
-          setActiveBranch(branch.name);
+          setActiveBranch(branch.name, branch.key);
         }
       }
     },
     role: "tab",
-    tabIndex: 0
+    tabIndex: 0,
+    "aria-selected": branch.name === activeBranch
   }, branch.subNavItems && /* @__PURE__ */ React.createElement("i", {
     className: clsx("sps-icon sps-side-nav__toggle", isBranchExpanded ? "sps-icon-chevron-down" : "sps-icon-chevron-right")
   }), /* @__PURE__ */ React.createElement("span", {
@@ -32091,14 +32126,17 @@ const SpsSideNavBranch = ({
     style: { marginTop: "-2px" }
   }, branch.tag && /* @__PURE__ */ React.createElement("span", {
     className: `sps-tag sps-tag--${branch.tag}`
-  }, branch.tagContent))), branch.subNavItems && isBranchExpanded && branch.subNavItems.map((subNav) => /* @__PURE__ */ React.createElement(SpsSideNavBranch, {
-    branch: __spreadProps(__spreadValues({}, subNav), {
-      expanded: findParentBranches(subNav.subNavItems, activeBranch)
-    }),
-    setActiveBranch,
-    activeBranch,
-    key: subNav.name
-  }))));
+  }, branch.tagContent))), branch.subNavItems && isBranchExpanded && branch.subNavItems.map((subNav) => {
+    var _a;
+    return /* @__PURE__ */ React.createElement(SpsSideNavBranch, {
+      branch: __spreadProps(__spreadValues({}, subNav), {
+        expanded: findParentBranches(subNav.subNavItems, activeBranch)
+      }),
+      setActiveBranch,
+      activeBranch,
+      key: (_a = subNav.key) != null ? _a : subNav.name
+    });
+  })));
 };
 const findParentBranches = (nav, activeTab) => {
   if (nav) {
@@ -32122,10 +32160,10 @@ const SpsSideNav = ({
   const [activeBranch, setActiveBranch] = useState(activeNavItem);
   const [activeTab, setActiveTab] = useState(initialActiveTab || tabs && tabs[0]);
   const [filterValue, setFilterValue] = useState("");
-  const handleNavAction = (branch) => {
+  const handleNavAction = (branch, key) => {
     setActiveBranch(branch);
     if (onNavChange) {
-      onNavChange(branch);
+      onNavChange(branch, key);
     }
   };
   const handleTabAction = (tab2) => {
@@ -32140,8 +32178,7 @@ const SpsSideNav = ({
     }
     return false;
   };
-  const filteredNavOptions = navOptions.map((option) => ({
-    sectionTitle: option.sectionTitle,
+  const filteredNavOptions = navOptions.map((option) => __spreadProps(__spreadValues({}, option), {
     navItems: option.navItems.filter((navItem) => navItem.name.toLowerCase().includes(filterValue) || filterChildBranches(navItem.subNavItems))
   }));
   if (activeNavItem !== previousActiveNavItem.current) {
@@ -32190,22 +32227,28 @@ const SpsSideNav = ({
     onChange: (event) => {
       setFilterValue(event.target.value);
     }
-  })))), filteredNavOptions.map((section) => /* @__PURE__ */ React.createElement("section", {
-    className: "sps-side-nav__section",
-    key: section.sectionTitle
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "sps-side-nav__section-title",
-    style: { fontWeight: 400 }
-  }, section.sectionTitle), section.navItems.map((item) => /* @__PURE__ */ React.createElement(SpsSideNavBranch, {
-    branch: __spreadProps(__spreadValues({}, item), {
-      expanded: findParentBranches(item.subNavItems, activeNavItem)
-    }),
-    activeBranch,
-    setActiveBranch: (branchName) => {
-      handleNavAction(branchName);
-    },
-    key: item.name
-  }))))));
+  })))), filteredNavOptions.map((section) => {
+    var _a;
+    return /* @__PURE__ */ React.createElement("section", {
+      className: "sps-side-nav__section",
+      key: (_a = section.key) != null ? _a : section.sectionTitle
+    }, section.sectionTitle && /* @__PURE__ */ React.createElement("div", {
+      className: "sps-side-nav__section-title",
+      style: { fontWeight: 400 }
+    }, section.sectionTitle), section.navItems.map((item) => {
+      var _a2;
+      return /* @__PURE__ */ React.createElement(SpsSideNavBranch, {
+        branch: __spreadProps(__spreadValues({}, item), {
+          expanded: findParentBranches(item.subNavItems, activeNavItem)
+        }),
+        activeBranch,
+        setActiveBranch: (branchName, key) => {
+          handleNavAction(branchName, key);
+        },
+        key: (_a2 = item.key) != null ? _a2 : item.name
+      });
+    }));
+  })));
 };
 const SpsSideNavExamples = {
   usage: {
@@ -36781,7 +36824,8 @@ function SpsDatepickerCalendar(props2) {
     minDate,
     onNewSelection,
     selectedDate,
-    selectedRange
+    selectedRange,
+    "data-testid": testId
   } = _a, rest = __objRest(_a, [
     "children",
     "className",
@@ -36789,7 +36833,8 @@ function SpsDatepickerCalendar(props2) {
     "minDate",
     "onNewSelection",
     "selectedDate",
-    "selectedRange"
+    "selectedRange",
+    "data-testid"
   ]);
   const { t: t2 } = React.useContext(I18nContext);
   const [viewMonth, setViewMonth] = React.useState(() => determineViewMonth(props2));
@@ -36830,12 +36875,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),
@@ -36852,6 +36899,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"),
@@ -36872,7 +36920,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, {
@@ -37068,7 +37117,8 @@ function SpsDateRangePickerV2(_Y) {
     minDate,
     onChange,
     presets = DEFAULT_PRESETS,
-    value
+    value,
+    "data-testid": testId
   } = _Z, rest = __objRest(_Z, [
     "children",
     "className",
@@ -37079,7 +37129,8 @@ function SpsDateRangePickerV2(_Y) {
     "minDate",
     "onChange",
     "presets",
-    "value"
+    "value",
+    "data-testid"
   ]);
   const { t: t2 } = React.useContext(I18nContext);
   const { wrapperId, controlId } = useFormControlId(id2, formMeta);
@@ -37194,6 +37245,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"
@@ -37201,6 +37253,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,
@@ -37223,6 +37276,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",
@@ -37237,6 +37291,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),
@@ -37246,6 +37301,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,
@@ -38015,4 +38071,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/lib/side-nav/SpsSideNav.d.ts

@@ -1,25 +1,27 @@
 /** TODO: Fix circular deps, update to follow our patterns, then remove eslint override */
 import * as React from "react";
 import type { SpsIcon, TagKind } from "@spscommerce/ds-shared";
-export interface SideNavItems {
+export interface SideNavItem {
     name: string;
     tag?: TagKind;
+    key?: string | number;
     tagContent?: string;
-    subNavItems?: SideNavItems[];
+    subNavItems?: SideNavItem[];
     icon?: SpsIcon;
 }
 export interface SideNavSection {
-    sectionTitle: string;
-    navItems: SideNavItems[];
+    sectionTitle?: string;
+    key?: string | number;
+    navItems: SideNavItem[];
 }
-export interface SideNavBranch extends SideNavItems {
+export interface SideNavBranch extends SideNavItem {
     expanded: boolean;
 }
 export interface SpsSideNavProps {
     title?: string;
     titleIcon?: SpsIcon;
     activeNavItem: string;
-    onNavChange?: (newNav: string) => void;
+    onNavChange?: (newNav: string, newNavKey?: string | number) => void;
     navOptions: SideNavSection[];
     tabs?: string[];
     initialActiveTab?: string;
@@ -32,5 +34,5 @@ export interface SpsSideNavProps {
  * @param nav SideNavItems[] array of navigation branches to be checked
  * @param activeTab string currently active tab
  */
-export declare const findParentBranches: (nav: SideNavItems[], activeTab: string) => boolean;
+export declare const findParentBranches: (nav: SideNavItem[], activeTab: string) => boolean;
 export declare const SpsSideNav: React.FC<SpsSideNavProps>;

package/lib/side-nav/SpsSideNavBranch.d.ts

@@ -4,6 +4,6 @@ import type { SideNavBranch } from "./SpsSideNav";
 export interface SpsSideNavBranchProps {
     branch: SideNavBranch;
     activeBranch: string;
-    setActiveBranch: (activeChildBranchName: string) => void;
+    setActiveBranch: (activeChildBranchName: string, activeChildBranchKey?: string | number) => void;
 }
 export declare const SpsSideNavBranch: React.FC<SpsSideNavBranchProps>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "5.9.0",
+  "version": "5.10.3",
   "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.9.0",
-    "@spscommerce/ds-shared": "5.9.0",
-    "@spscommerce/positioning": "5.9.0",
-    "@spscommerce/utils": "5.9.0",
+    "@spscommerce/ds-colors": "5.10.3",
+    "@spscommerce/ds-shared": "5.10.3",
+    "@spscommerce/positioning": "5.10.3",
+    "@spscommerce/utils": "5.10.3",
     "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.9.0",
-    "@spscommerce/ds-shared": "5.9.0",
-    "@spscommerce/positioning": "5.9.0",
-    "@spscommerce/utils": "5.9.0",
+    "@spscommerce/ds-colors": "5.10.3",
+    "@spscommerce/ds-shared": "5.10.3",
+    "@spscommerce/positioning": "5.10.3",
+    "@spscommerce/utils": "5.10.3",
     "@testing-library/react": "^9.3.2",
     "@types/prop-types": "^15.7.1",
     "@types/react": "^16.9.0",