@spscommerce/ds-react 4.30.1 → 4.31.0

package/lib/index.es.js

@@ -31,7 +31,7 @@ var __objRest = (source, exclude) => {
 };
 import * as React from "react";
 import React__default, { useRef, useEffect, createContext, useMemo as useMemo$1, useContext, useReducer, useState, useCallback as useCallback$1, useLayoutEffect as useLayoutEffect$1 } from "react";
-import { noI18nI18n, ButtonKind, ButtonType, SpsIcon as SpsIcon$1, SpinnerSize, Position, ZStratum, SpsOptionListOption, DropdownKind, SPS_ACTION_DEFAULTS, ClickableTagKind, MultiSelectTagKind, TagKind, SpsIconSize, SelectMode, TooltipKind, TooltipShowTrigger, TOOLTIP_HIDE_DELAY_MS_DEFAULT, FeedbackBlockKind, FeedbackBlockIcons, GrowlerKind, GrowlerIcon, GROWLER_VISIBLE_DURATION_MS, GROWLER_FADEOUT_DURATION_MS, SpsInsightTileKind, SpsInsightTileIcons, SortDirection, ModalKind, ModalSize, DEFAULT_PAGE_SIZE_OPTIONS, StdButtonKind, SpsTaskStatus, TASK_QUEUE_NOTIFICATION_DURATION_MS, SpsTaskStatusIcons, SpsFilterTileKind, RingSize, WizardSubstepConditions } from "@spscommerce/ds-shared";
+import { noI18nI18n, ButtonKind, ButtonType, SpsIcon as SpsIcon$1, SpinnerSize, Position, ZStratum, SpsOptionListOption, DropdownKind, SPS_ACTION_DEFAULTS, ClickableTagKind, MultiSelectTagKind, TagKind, SpsIconSize, SelectMode, TooltipKind, TooltipShowTrigger, TOOLTIP_HIDE_DELAY_MS_DEFAULT, FeedbackBlockKind, FeedbackBlockIcons, GrowlerKind, GrowlerIcon, GROWLER_VISIBLE_DURATION_MS, GROWLER_FADEOUT_DURATION_MS, SpsInsightTileKind, SpsInsightTileIcons, KeyValueListTitleColor, SortDirection, ModalKind, ModalSize, DEFAULT_PAGE_SIZE_OPTIONS, StdButtonKind, SpsTaskStatus, TASK_QUEUE_NOTIFICATION_DURATION_MS, SpsTaskStatusIcons, SpsFilterTileKind, RingSize, WizardSubstepConditions } from "@spscommerce/ds-shared";
 import { values as values$3, code, debounce, flatten, deepFreeze, setPath, diff, DiffChange, getPath, crumblePath, traversePath, forEachNestedObject, lockToAnimationFrames, constrain } from "@spscommerce/utils";
 import * as ReactDOM from "react-dom";
 import { createPortal, unstable_batchedUpdates } from "react-dom";
@@ -25069,26 +25069,30 @@ Object.assign(SpsKeyValueList, {
   displayName: "SpsKeyValueList"
 });
 const propsDoc$12 = {
-  itemKey: { type: "string", required: true }
+  itemKey: { type: "string | nodeOrRenderFn", required: true },
+  titleColor: "KeyValueListTitleColor"
 };
 const propTypes$15 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  itemKey: propTypes$1K.exports.string.isRequired
+  itemKey: propTypes$1K.exports.string.isRequired || nodeOrRenderFn.isRequired,
+  titleColor: enumValue(KeyValueListTitleColor)
 });
 function SpsKeyValueListItem(props2) {
   const _a = props2, {
     children,
     className,
     itemKey,
+    titleColor = KeyValueListTitleColor.LIGHT,
     "data-testid": testId,
     unsafelyReplaceClassName
   } = _a, rest = __objRest(_a, [
     "children",
     "className",
     "itemKey",
+    "titleColor",
     "data-testid",
     "unsafelyReplaceClassName"
   ]);
-  const classes = clsx(unsafelyReplaceClassName || "sps-key-value-list__item", className);
+  const classes = clsx(unsafelyReplaceClassName || "sps-key-value-list__item", `sps-key-value-list__item--${titleColor}`, className);
   return /* @__PURE__ */ React.createElement("div", __spreadValues({
     className: classes,
     "data-testid": `${testId}`

package/lib/key-value-list/SpsKeyValueListItem.d.ts

@@ -1,6 +1,8 @@
+import { KeyValueListTitleColor } from "@spscommerce/ds-shared";
 import * as PropTypes from "../prop-types";
 declare const propTypes: {
-    itemKey: PropTypes.Validator<string>;
+    itemKey: PropTypes.Validator<PropTypes.ReactNodeOrRenderFn>;
+    titleColor: PropTypes.Requireable<KeyValueListTitleColor>;
     children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     className: PropTypes.Requireable<string>;
     "data-testid": PropTypes.Requireable<string>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "4.30.1",
+  "version": "4.31.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": "4.30.1",
-    "@spscommerce/ds-shared": "4.30.1",
-    "@spscommerce/positioning": "4.30.1",
-    "@spscommerce/utils": "4.30.1",
+    "@spscommerce/ds-colors": "4.31.0",
+    "@spscommerce/ds-shared": "4.31.0",
+    "@spscommerce/positioning": "4.31.0",
+    "@spscommerce/utils": "4.31.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": "4.30.1",
-    "@spscommerce/ds-shared": "4.30.1",
-    "@spscommerce/positioning": "4.30.1",
-    "@spscommerce/utils": "4.30.1",
+    "@spscommerce/ds-colors": "4.31.0",
+    "@spscommerce/ds-shared": "4.31.0",
+    "@spscommerce/positioning": "4.31.0",
+    "@spscommerce/utils": "4.31.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@types/prop-types": "^15.7.1",