@synerise/ds-list-item 1.2.2 → 1.2.3

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-list-item@1.2.2...@synerise/ds-list-item@1.2.3) (2025-12-16)
+
+### Bug Fixes
+
+- **list-item:** new prop featured ([6a1f387](https://github.com/Synerise/synerise-design/commit/6a1f387a0be65a21b7e16c94068e0e560ba9127a))
+
 ## [1.2.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-list-item@1.2.1...@synerise/ds-list-item@1.2.2) (2025-12-15)
 
 **Note:** Version bump only for package @synerise/ds-list-item

package/README.md

@@ -59,6 +59,8 @@ import ListItem from '@synerise/ds-list-item'
 | title                   | title attribute (a11y prop)                                                                       | `string`                                                           | -         |
 | tooltipProps            | Tooltip props for "copied" tooltip. See @synerise/ds-tooltip                                      | `TooltipProps`                                                     | -         |
 | type                    | Type of the list item                                                                             | `"default"` | `"danger"` | `"divider"` | `"select"` | -         |
+| featured                | featured item will have a blue label and blue prefixel / suffixel icons                           | `boolean`                                                          | -         |
+
 
 ### AddonRenderer
 

package/dist/ListItem.d.ts

@@ -35,5 +35,6 @@ declare const ListItem: React.ForwardRefExoticComponent<import("./ListItem.types
     type?: import("./ListItem.types").ItemType;
     subMenu?: ListItemProps[];
     indentLevel?: number;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "children" | "onClick" | keyof import("./ListItem.types").ListItemDividerProps | "checked" | "selected" | "copyable" | "copyValue" | "copyHint" | "copyTooltip" | "timeToHideTooltip" | "tooltipProps" | "description" | "direction" | "disabled" | "highlight" | "hoverTooltipProps" | "key" | "itemKey" | "noHover" | "onItemHover" | "ordered" | "parent" | "prefixel" | "prefixVisibilityTrigger" | "renderHoverTooltip" | "size" | "suffixel" | "suffixVisibilityTrigger" | "text" | "type" | "subMenu" | "indentLevel"> & import("@synerise/ds-utils").DataAttributes & React.RefAttributes<HTMLDivElement>>;
+    featured?: boolean;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "children" | "onClick" | keyof import("./ListItem.types").ListItemDividerProps | "checked" | "selected" | "copyable" | "copyValue" | "copyHint" | "copyTooltip" | "timeToHideTooltip" | "tooltipProps" | "description" | "direction" | "disabled" | "highlight" | "hoverTooltipProps" | "key" | "itemKey" | "noHover" | "onItemHover" | "ordered" | "parent" | "prefixel" | "prefixVisibilityTrigger" | "renderHoverTooltip" | "size" | "suffixel" | "suffixVisibilityTrigger" | "text" | "type" | "subMenu" | "indentLevel" | "featured"> & import("@synerise/ds-utils").DataAttributes & React.RefAttributes<HTMLDivElement>>;
 export default ListItem;

package/dist/ListItem.types.d.ts

@@ -87,6 +87,7 @@ export type BaseListItemProps = ListItemDividerProps & {
     type?: ItemType;
     subMenu?: ListItemProps[];
     indentLevel?: number;
+    featured?: boolean;
 };
 export type ListItemProps = WithHTMLAttributes<HTMLDivElement, BaseListItemProps>;
 export type ListItemDividerProps = {

package/dist/components/Text/ItemLabel.d.ts

@@ -25,4 +25,5 @@ export declare const ItemLabel: React.ForwardRefExoticComponent<{
     description?: ReactNode;
     content?: ReactNode;
     indentLevel?: number;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "content" | "onFocus" | "onBlur" | "onKeyDown" | "onClick" | "onMouseDown" | "onMouseLeave" | "onMouseOver" | "checked" | "description" | "disabled" | "noHover" | "ordered" | "parent" | "size" | "indentLevel" | "hasSubMenu" | "subMenuOpen" | "hasHighlight" | "inTooltip" | "prefixVisible" | "suffixVisible" | "prefixElement" | "suffixElement"> & import("@synerise/ds-utils").DataAttributes & React.RefAttributes<HTMLDivElement>>;
+    featured?: boolean;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "content" | "onFocus" | "onBlur" | "onKeyDown" | "onClick" | "onMouseDown" | "onMouseLeave" | "onMouseOver" | "checked" | "description" | "disabled" | "noHover" | "ordered" | "parent" | "size" | "indentLevel" | "featured" | "hasSubMenu" | "subMenuOpen" | "hasHighlight" | "inTooltip" | "prefixVisible" | "suffixVisible" | "prefixElement" | "suffixElement"> & import("@synerise/ds-utils").DataAttributes & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Text/ItemLabel.js

@@ -1,4 +1,4 @@
-var _excluded = ["onClick", "onFocus", "onBlur", "onKeyDown", "onMouseOver", "onMouseLeave", "onMouseDown", "checked", "noHover", "disabled", "ordered", "className", "hasHighlight", "prefixElement", "prefixVisible", "suffixElement", "suffixVisible", "hasSubMenu", "subMenuOpen", "content", "inTooltip", "parent", "description", "size", "indentLevel"];
+var _excluded = ["onClick", "onFocus", "onBlur", "onKeyDown", "onMouseOver", "onMouseLeave", "onMouseDown", "checked", "noHover", "disabled", "ordered", "className", "hasHighlight", "prefixElement", "prefixVisible", "suffixElement", "suffixVisible", "hasSubMenu", "subMenuOpen", "content", "inTooltip", "parent", "description", "size", "indentLevel", "featured"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import classnames from 'classnames';
@@ -32,6 +32,7 @@ export var ItemLabel = /*#__PURE__*/forwardRef(function (_ref, ref) {
     description = _ref.description,
     size = _ref.size,
     indentLevel = _ref.indentLevel,
+    featured = _ref.featured,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   var theme = useTheme();
   return /*#__PURE__*/React.createElement(S.Wrapper, _extends({
@@ -57,14 +58,14 @@ export var ItemLabel = /*#__PURE__*/forwardRef(function (_ref, ref) {
     ,
     inTooltip: inTooltip,
     ref: ref,
-    indentLevel: indentLevel
+    indentLevel: indentLevel,
+    featured: featured
   }, rest), /*#__PURE__*/React.createElement(S.Inner, null, prefixElement && /*#__PURE__*/React.createElement(S.PrefixWrapper, {
     "data-testid": "list-item-prefix",
     visible: prefixVisible,
     disabled: disabled
   }, prefixElement), /*#__PURE__*/React.createElement(S.Content, {
-    className: "ds-list-item-content",
-    highlight: hasHighlight
+    className: "ds-list-item-content"
   }, content, description && size === 'large' && /*#__PURE__*/React.createElement(S.Description, null, description)), parent && /*#__PURE__*/React.createElement(S.ArrowRight, null, /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(AngleRightS, null),
     color: theme.palette['grey-600']

package/dist/components/Text/Text.js

@@ -1,4 +1,4 @@
-var _excluded = ["checked", "className", "children", "itemKey", "noHover", "size", "prefixel", "suffixel", "copyable", "copyHint", "copyValue", "copyTooltip", "timeToHideTooltip", "tooltipProps", "disabled", "description", "parent", "ordered", "indentLevel", "onClick", "onMouseOver", "onMouseDown", "onMouseLeave", "onBlur", "onFocus", "onItemHover", "onKeyDown", "prefixVisibilityTrigger", "suffixVisibilityTrigger", "highlight", "style", "hoverTooltipProps", "renderHoverTooltip", "subMenu", "ItemComponent"];
+var _excluded = ["checked", "className", "children", "itemKey", "noHover", "size", "prefixel", "suffixel", "copyable", "copyHint", "copyValue", "copyTooltip", "timeToHideTooltip", "tooltipProps", "disabled", "description", "parent", "ordered", "indentLevel", "onClick", "onMouseOver", "onMouseDown", "onMouseLeave", "onBlur", "onFocus", "onItemHover", "onKeyDown", "prefixVisibilityTrigger", "suffixVisibilityTrigger", "highlight", "style", "hoverTooltipProps", "renderHoverTooltip", "subMenu", "featured", "ItemComponent"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import copy from 'copy-to-clipboard';
@@ -46,6 +46,7 @@ var Text = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
     hoverTooltipProps = props.hoverTooltipProps,
     renderHoverTooltip = props.renderHoverTooltip,
     subMenu = props.subMenu,
+    featured = props.featured,
     ItemComponent = props.ItemComponent,
     rest = _objectWithoutPropertiesLoose(props, _excluded);
   var _useListItem = useListItem(),
@@ -189,6 +190,7 @@ var Text = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
     noHover: noHover,
     hasHighlight: !!highlight,
     size: size,
+    featured: featured,
     style: renderHoverTooltip ? undefined : style,
     inTooltip: !!renderHoverTooltip,
     ref: mergedRef,

package/dist/components/Text/Text.styles.d.ts

@@ -13,6 +13,7 @@ type StyledListItemProps = {
     noHover?: boolean;
     inTooltip?: boolean;
     size?: ItemSize;
+    featured?: boolean;
 };
 export declare const SuffixWrapper: import("styled-components").StyledComponent<"div", any, {
     visible?: boolean;
@@ -25,10 +26,8 @@ export declare const PrefixWrapper: import("styled-components").StyledComponent<
 export declare const Highlight: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const ArrowRight: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Inner: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Content: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Wrapper: import("styled-components").StyledComponent<"div", any, StyledListItemProps, never>;
-export declare const Content: import("styled-components").StyledComponent<"div", any, {
-    highlight: boolean;
-}, never>;
 export declare const Divider: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const DynamicLabelMain: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const DynamicLabelAlternate: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/Text/Text.styles.js

@@ -66,11 +66,21 @@ var selectedStyle = css(["background:", ";color:", ";", "{svg{fill:", ";}}"], fu
 });
 var highlightStyle = css(["font-weight:400;.ds-list-item-highlight{font-weight:600;}"]);
 var orderedStyle = css(["&::before{content:none;}"]);
+export var Content = styled.div.withConfig({
+  displayName: "Textstyles__Content",
+  componentId: "sc-1j4eogh-5"
+})(["white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;order:2;"]);
 export var Wrapper = styled.div.withConfig({
   displayName: "Textstyles__Wrapper",
-  componentId: "sc-1j4eogh-5"
-})(["display:flex;min-width:173px;", " ", " ", "{", " ", " ", "{transition:all ", ";opacity:", ";}", " &.ant-menu-item-selected,&.-item-selected{", "}", " ", " .ds-checkbox,.ds-checkbox > .ant-checkbox-wrapper{padding:0;}}"], function (props) {
+  componentId: "sc-1j4eogh-6"
+})(["display:flex;min-width:173px;", " ", " ", " ", "{", " ", " ", "{transition:all ", ";opacity:", ";}", " &.ant-menu-item-selected,&.-item-selected{", "}", " ", " .ds-checkbox,.ds-checkbox > .ant-checkbox-wrapper{padding:0;}}"], function (props) {
   return props.inTooltip && css(["height:100%;"]);
+}, function (_ref) {
+  var featured = _ref.featured,
+    disabled = _ref.disabled,
+    selected = _ref.selected,
+    theme = _ref.theme;
+  return featured && css(["&&{", " > .ds-icon > svg,", " ", " > svg,", " > .ds-icon > svg,", " ", " > svg,", " svg,", "{fill:", ";color:", ";}}&:hover,&:active,&:focus-visible:not(:active){&&{", " > .ds-icon > svg,", " ", " > svg,", " > .ds-icon > svg,", " ", " > svg,", " svg,", "{fill:", ";color:", ";}&:focus-visible:not(:active) ", "{box-shadow:inset 0 0 0 2px ", ";}}}", " ", ""], PrefixWrapper, PrefixWrapper, IconContainer, SuffixWrapper, SuffixWrapper, IconContainer, ArrowRight, Content, theme.palette['blue-600'], theme.palette['blue-600'], PrefixWrapper, PrefixWrapper, IconContainer, SuffixWrapper, SuffixWrapper, IconContainer, ArrowRight, Content, theme.palette['blue-700'], theme.palette['blue-700'], Inner, theme.palette['blue-700'], disabled && css(["&:hover{&&{", " > .ds-icon > svg,", " ", " > svg,", " > .ds-icon > svg,", " ", " > svg,", "{fill:", ";color:", ";}}}"], PrefixWrapper, PrefixWrapper, IconContainer, SuffixWrapper, SuffixWrapper, IconContainer, Content, theme.palette['blue-600'], theme.palette['blue-600']), selected && css(["&:hover{&&{", " > .ds-icon > svg,", " ", " > svg,", " > .ds-icon > svg,", " ", " > svg,", "{fill:", ";color:", ";}}}"], PrefixWrapper, PrefixWrapper, IconContainer, SuffixWrapper, SuffixWrapper, IconContainer, Content, theme.palette['blue-700'], theme.palette['blue-700']));
 }, function (props) {
   return props.disabled ? css(["cursor:not-allowed;opacity:0.4;svg{fill:", ";}&:hover{", "{opacity:1;svg{fill:", ";}}}"], props.theme.palette['grey-600'], ArrowRight, props.theme.palette['grey-600']) : css(["", " > .ds-icon > svg{fill:", ";}&:hover{", "{background:", ";", ";}}&:focus-visible:not(:active){", "{box-shadow:inset 0 0 0 2px ", ";}}&:focus-visible:active,&:active{", "{background:", ";", "}}}"], PrefixWrapper, props.theme.palette['grey-600'], Inner, props.theme.palette['grey-050'], !props.noHover && css(["&{color:", ";}", "{", " > svg{fill:", ";}}", "{opacity:1;svg{fill:", ";}}"], props.noHover ? props.theme.palette['grey-700'] : props.theme.palette['blue-600'], PrefixWrapper, IconContainer, props.theme.palette['blue-600'], ArrowRight, props.theme.palette['blue-600']), Inner, props.theme.palette['blue-600'], Inner, props.theme.palette['blue-050'], !props.noHover && css(["color:", ";", "{", " > svg{fill:", ";}}"], props.theme.palette['blue-600'], PrefixWrapper, IconContainer, props.theme.palette['blue-600']));
 }, Inner, function (props) {
@@ -84,10 +94,6 @@ export var Wrapper = styled.div.withConfig({
 }, function (props) {
   return !props.ordered && orderedStyle;
 });
-export var Content = styled.div.withConfig({
-  displayName: "Textstyles__Content",
-  componentId: "sc-1j4eogh-6"
-})(["white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;order:2;"]);
 export var Divider = styled.div.withConfig({
   displayName: "Textstyles__Divider",
   componentId: "sc-1j4eogh-7"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-list-item",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "ListItem UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -51,5 +51,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "b1279d5354132a2bf0b6f0cfa343db4c6c928f72"
+  "gitHead": "c610279aef2d2139973075117de1bb281b9393b6"
 }