@spscommerce/ds-react 5.9.0 → 5.10.0

package/lib/index.es.js

@@ -22798,7 +22798,8 @@ function SpsFieldset({
   optional = false,
   enabled,
   onToggled,
-  tooltip
+  tooltip,
+  "data-testid": testId
 }) {
   const formControlSet = formGroup2 || formArray2;
   const legendElement = React.useRef(null);
@@ -22832,7 +22833,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 +22846,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 +32069,7 @@ const SpsSideNavBranch = ({
     onClick: () => {
       setIsBranchExpanded(!isBranchExpanded);
       if (!branch.subNavItems) {
-        setActiveBranch(branch.name);
+        setActiveBranch(branch.name, branch.key);
       }
     },
     onKeyDown: (event) => {
@@ -32074,12 +32078,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 +32096,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 +32130,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 +32148,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 +32197,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: {

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.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": "5.9.0",
-    "@spscommerce/ds-shared": "5.9.0",
-    "@spscommerce/positioning": "5.9.0",
-    "@spscommerce/utils": "5.9.0",
+    "@spscommerce/ds-colors": "5.10.0",
+    "@spscommerce/ds-shared": "5.10.0",
+    "@spscommerce/positioning": "5.10.0",
+    "@spscommerce/utils": "5.10.0",
     "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.0",
+    "@spscommerce/ds-shared": "5.10.0",
+    "@spscommerce/positioning": "5.10.0",
+    "@spscommerce/utils": "5.10.0",
     "@testing-library/react": "^9.3.2",
     "@types/prop-types": "^15.7.1",
     "@types/react": "^16.9.0",