@synerise/ds-list-item 1.4.21 → 1.5.0

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.5.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-list-item@1.4.22...@synerise/ds-list-item@1.5.0) (2026-06-11)
+
+### Features
+
+- add nested-dropdown selection story to ListItem ([1f84c87](https://github.com/Synerise/synerise-design/commit/1f84c87fa89612a72f25ed10076998f0b3dc29d3))
+
+## [1.4.22](https://github.com/Synerise/synerise-design/compare/@synerise/ds-list-item@1.4.21...@synerise/ds-list-item@1.4.22) (2026-05-26)
+
+**Note:** Version bump only for package @synerise/ds-list-item
+
 ## [1.4.21](https://github.com/Synerise/synerise-design/compare/@synerise/ds-list-item@1.4.20...@synerise/ds-list-item@1.4.21) (2026-05-22)
 
 **Note:** Version bump only for package @synerise/ds-list-item

package/dist/ListItem.d.ts

@@ -25,6 +25,7 @@ declare const ListItem: React.ForwardRefExoticComponent<import('./ListItem.types
     onClick?: import('./ListItem.types').ListItemEventHandler<MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>>;
     ordered?: boolean;
     parent?: boolean;
+    selectableParent?: boolean;
     prefixel?: React.ReactNode | import('./ListItem.types').AddonRenderer;
     prefixVisibilityTrigger?: "hover" | "default";
     renderHoverTooltip?: () => JSX.Element;
@@ -34,7 +35,10 @@ declare const ListItem: React.ForwardRefExoticComponent<import('./ListItem.types
     text?: React.ReactNode;
     type?: import('./ListItem.types').ItemType;
     subMenu?: ListItemProps[];
+    defaultSubMenuOpen?: boolean;
+    subMenuOpen?: boolean;
+    onSubMenuToggle?: (open: boolean) => void;
     indentLevel?: number;
     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" | "popoverProps" | "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>>;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "children" | "onClick" | keyof import('./ListItem.types').ListItemDividerProps | "checked" | "selected" | "copyable" | "copyValue" | "copyHint" | "copyTooltip" | "timeToHideTooltip" | "tooltipProps" | "description" | "direction" | "disabled" | "highlight" | "popoverProps" | "key" | "itemKey" | "noHover" | "onItemHover" | "ordered" | "parent" | "selectableParent" | "prefixel" | "prefixVisibilityTrigger" | "renderHoverTooltip" | "size" | "suffixel" | "suffixVisibilityTrigger" | "text" | "type" | "subMenu" | "defaultSubMenuOpen" | "subMenuOpen" | "onSubMenuToggle" | "indentLevel" | "featured"> & import('@synerise/ds-utils').DataAttributes & React.RefAttributes<HTMLDivElement>>;
 export default ListItem;

package/dist/ListItem.types.d.ts

@@ -74,6 +74,13 @@ export type BaseListItemProps = ListItemDividerProps & {
     onClick?: ListItemEventHandler<MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>>;
     ordered?: boolean;
     parent?: boolean;
+    /**
+     * Only relevant for items that have a `subMenu`. When `true`, clicking the row
+     * fires `onClick` (e.g. to select the item) and expand/collapse is moved to the
+     * suffix arrow. When omitted, clicking anywhere on the row toggles the sub-menu
+     * (the default, backwards-compatible behaviour) and `onClick` is not called.
+     */
+    selectableParent?: boolean;
     prefixel?: ReactNode | AddonRenderer;
     prefixVisibilityTrigger?: 'hover' | 'default';
     renderHoverTooltip?: () => JSX.Element;
@@ -83,6 +90,22 @@ export type BaseListItemProps = ListItemDividerProps & {
     text?: ReactNode;
     type?: ItemType;
     subMenu?: ListItemProps[];
+    /**
+     * Initial open state of the item's `subMenu` (uncontrolled — read once on mount).
+     * Defaults to `false`. Ignored when `subMenuOpen` is provided.
+     */
+    defaultSubMenuOpen?: boolean;
+    /**
+     * Controlled open state of the item's `subMenu`. When provided, the component no
+     * longer manages open state internally — drive it together with `onSubMenuToggle`.
+     */
+    subMenuOpen?: boolean;
+    /**
+     * Fires with the next open state whenever the `subMenu` is toggled (row click in the
+     * default mode, or the suffix arrow when `selectableParent` is set). Use to drive a
+     * controlled `subMenuOpen`.
+     */
+    onSubMenuToggle?: (open: boolean) => void;
     indentLevel?: number;
     featured?: boolean;
 };

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

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

package/dist/components/Text/ItemLabel.js

@@ -3,7 +3,7 @@ import classnames from "classnames";
 import { forwardRef } from "react";
 import { useTheme } from "@synerise/ds-core";
 import Icon, { AngleRightS, CheckS, AngleUpS, AngleDownS } from "@synerise/ds-icon";
-import { Wrapper, Inner, PrefixWrapper, Content, Description, ArrowRight, SuffixWrapper } from "./Text.styles.js";
+import { Wrapper, Inner, PrefixWrapper, Content, Description, ArrowRight, SuffixWrapper, SubMenuToggle } from "./Text.styles.js";
 const ItemLabel = forwardRef(({
   onClick,
   onFocus,
@@ -24,6 +24,7 @@ const ItemLabel = forwardRef(({
   suffixVisible,
   hasSubMenu,
   subMenuOpen,
+  onToggleSubMenu,
   content,
   inTooltip,
   parent,
@@ -69,7 +70,12 @@ const ItemLabel = forwardRef(({
         parent && /* @__PURE__ */ jsx(ArrowRight, { children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(AngleRightS, {}), color: theme.palette["grey-600"] }) }),
         (!!suffixElement || !!checked || hasSubMenu) && /* @__PURE__ */ jsxs(SuffixWrapper, { "data-testid": "list-item-suffix", visible: suffixVisible || hasSubMenu, disabled, children: [
           !!checked && /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(CheckS, {}), color: theme.palette[`green-600`] }),
-          hasSubMenu && /* @__PURE__ */ jsx(Icon, { component: subMenuOpen ? /* @__PURE__ */ jsx(AngleUpS, {}) : /* @__PURE__ */ jsx(AngleDownS, {}) }),
+          hasSubMenu && (onToggleSubMenu ? /* @__PURE__ */ jsx(SubMenuToggle, { role: "button", tabIndex: disabled ? -1 : 0, "aria-expanded": subMenuOpen, "aria-label": "Toggle sub-menu", "data-testid": "list-item-submenu-toggle", onClick: onToggleSubMenu, onKeyDown: (event) => {
+            if (event.key === "Enter" || event.key === " ") {
+              event.preventDefault();
+              onToggleSubMenu(event);
+            }
+          }, children: /* @__PURE__ */ jsx(Icon, { component: subMenuOpen ? /* @__PURE__ */ jsx(AngleUpS, {}) : /* @__PURE__ */ jsx(AngleDownS, {}) }) }) : /* @__PURE__ */ jsx(Icon, { component: subMenuOpen ? /* @__PURE__ */ jsx(AngleUpS, {}) : /* @__PURE__ */ jsx(AngleDownS, {}) })),
           suffixElement
         ] })
       ] })

package/dist/components/Text/Text.js

@@ -28,6 +28,7 @@ const Text = forwardRef((props, forwardedRef) => {
     disabled,
     description,
     parent,
+    selectableParent,
     ordered,
     indentLevel,
     onClick,
@@ -45,6 +46,9 @@ const Text = forwardRef((props, forwardedRef) => {
     popoverProps,
     renderHoverTooltip,
     subMenu,
+    subMenuOpen: controlledSubMenuOpen,
+    defaultSubMenuOpen,
+    onSubMenuToggle,
     featured,
     ItemComponent,
     ...rest
@@ -55,7 +59,15 @@ const Text = forwardRef((props, forwardedRef) => {
   const mergedRef = useMergeRefs([forwardedRef, ref]);
   const stableId = useStableId();
   const itemKey = menuItemKey ?? stableId;
-  const [subMenuOpen, setSubMenuOpen] = useState(false);
+  const isSubMenuControlled = controlledSubMenuOpen !== void 0;
+  const [uncontrolledSubMenuOpen, setUncontrolledSubMenuOpen] = useState(Boolean(defaultSubMenuOpen));
+  const subMenuOpen = isSubMenuControlled ? Boolean(controlledSubMenuOpen) : uncontrolledSubMenuOpen;
+  const updateSubMenuOpen = (next) => {
+    if (!isSubMenuControlled) {
+      setUncontrolledSubMenuOpen(next);
+    }
+    onSubMenuToggle?.(next);
+  };
   const [hovered, setHovered] = useState(false);
   const {
     enabled: canCopyToClipboard,
@@ -98,10 +110,16 @@ const Text = forwardRef((props, forwardedRef) => {
     key: itemKey,
     item: removeHandlerProps(props)
   };
+  const handleToggleSubMenu = (event) => {
+    event.stopPropagation();
+    if (!disabled) {
+      updateSubMenuOpen(!subMenuOpen);
+    }
+  };
   const handleClick = (event) => {
     if (!disabled) {
-      if (subMenu) {
-        setSubMenuOpen(!subMenuOpen);
+      if (subMenu && !selectableParent) {
+        updateSubMenuOpen(!subMenuOpen);
       } else {
         if (delayClickEvent) {
           setTimeout(() => {
@@ -121,8 +139,8 @@ const Text = forwardRef((props, forwardedRef) => {
   };
   const handleKeyDown = (event) => {
     if (!disabled && event.key === "Enter") {
-      if (subMenu) {
-        setSubMenuOpen(!subMenuOpen);
+      if (subMenu && !selectableParent) {
+        updateSubMenuOpen(!subMenuOpen);
       } else {
         event.preventDefault();
         if (canCopyToClipboard && valueToCopy) {
@@ -174,7 +192,7 @@ const Text = forwardRef((props, forwardedRef) => {
     }
     onMouseDown && onMouseDown(event);
   };
-  const TextNode = /* @__PURE__ */ jsx(ItemLabel, { role: "menuitem", "data-testid": "ds-list-item", className, onClick: handleClick, onKeyDown: handleKeyDown, onMouseOver: handleMouseOver, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur, onMouseDown: handleMouseDown, ordered, disabled, noHover, hasHighlight: !!highlight, size, featured, style: renderHoverTooltip ? void 0 : style, inTooltip: !!renderHoverTooltip, ref: mergedRef, parent, hasSubMenu: !!(subMenu && subMenu.length), subMenuOpen, prefixElement, prefixVisible: shouldRenderPrefix, description, checked, suffixElement, suffixVisible: shouldRenderSuffix, indentLevel, content: /* @__PURE__ */ jsx(DynamicLabel, { showAlternative: temporaryLabel, content: childrenWithHighlight, alternativeContent: canCopyToClipboard ? copiedLabel : void 0 }), ...rest });
+  const TextNode = /* @__PURE__ */ jsx(ItemLabel, { role: "menuitem", "data-testid": "ds-list-item", className, onClick: handleClick, onKeyDown: handleKeyDown, onMouseOver: handleMouseOver, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur, onMouseDown: handleMouseDown, ordered, disabled, noHover, hasHighlight: !!highlight, size, featured, style: renderHoverTooltip ? void 0 : style, inTooltip: !!renderHoverTooltip, ref: mergedRef, parent, hasSubMenu: !!(subMenu && subMenu.length), subMenuOpen, onToggleSubMenu: selectableParent ? handleToggleSubMenu : void 0, prefixElement, prefixVisible: shouldRenderPrefix, description, checked, suffixElement, suffixVisible: shouldRenderSuffix, indentLevel, content: /* @__PURE__ */ jsx(DynamicLabel, { showAlternative: temporaryLabel, content: childrenWithHighlight, alternativeContent: canCopyToClipboard ? copiedLabel : void 0 }), ...rest });
   if (renderHoverTooltip) {
     return /* @__PURE__ */ jsx(HoverTooltip, { popoverProps, renderHoverTooltip, style, children: TextNode });
   }

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

@@ -19,6 +19,7 @@ export declare const SuffixWrapper: import('styled-components').StyledComponent<
     visible?: boolean;
     disabled?: boolean;
 }, never>;
+export declare const SubMenuToggle: import('styled-components').StyledComponent<"span", any, {}, never>;
 export declare const PrefixWrapper: import('styled-components').StyledComponent<"div", any, {
     visible?: boolean;
     disabled?: boolean;

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

@@ -9,13 +9,17 @@ const SuffixWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Textstyles__SuffixWrapper",
   componentId: "sc-1j4eogh-0"
 })(["display:flex;order:10;justify-content:flex-end;transition:opacity ", ";", ";"], TRANSITION_FN, (props) => props.visible ? visibleElementStyle() : hiddenElementStyle());
+const SubMenuToggle = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "Textstyles__SubMenuToggle",
+  componentId: "sc-1j4eogh-1"
+})(["display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border-radius:3px;outline:none;&:focus-visible{box-shadow:inset 0 0 0 2px ", ";}"], (props) => props.theme.palette["blue-600"]);
 const PrefixWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Textstyles__PrefixWrapper",
-  componentId: "sc-1j4eogh-1"
+  componentId: "sc-1j4eogh-2"
 })(["display:flex;order:1;", ";transition:opacity ", ";margin-top:-7px;margin-bottom:-7px;margin-left:-4px;margin-right:12px;align-items:center;"], (props) => props.visible ? visibleElementStyle() : hiddenElementStyle(), TRANSITION_FN);
 const Highlight = /* @__PURE__ */ styled.span.withConfig({
   displayName: "Textstyles__Highlight",
-  componentId: "sc-1j4eogh-2"
+  componentId: "sc-1j4eogh-3"
 })([""]);
 const getPaddingFromIndentLevel = (indentLevel = 0) => {
   return indentLevel * INDENT_WIDTH;
@@ -26,22 +30,22 @@ const calculatePadding = (indentLevel = 0, withPrefixel = false) => {
 const baseStyles = /* @__PURE__ */ css(["display:flex;align-items:center;margin:0;padding-left:", "px;padding-right:12px;font-size:13px;line-height:1.39;font-weight:500;user-select:none;border-radius:3px;transition:background-color 0.2s ease-out,color 0.2s ease-out;min-height:", "px;background:", ";border:none;color:", ";cursor:pointer;opacity:1;"], (props) => calculatePadding(props.indentLevel, !!props.prefixel), (props) => LIST_ITEM_SIZE_MAPPING[props.size || "default"], (props) => props.theme.palette.white, (props) => props.theme.palette["grey-700"]);
 const ArrowRight = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Textstyles__ArrowRight",
-  componentId: "sc-1j4eogh-3"
+  componentId: "sc-1j4eogh-4"
 })(["order:3;"]);
 const Inner = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Textstyles__Inner",
-  componentId: "sc-1j4eogh-4"
+  componentId: "sc-1j4eogh-5"
 })(["flex-grow:1;min-width:0;&::after{content:'';flex-grow:1;order:4;}"]);
 const selectedStyle = /* @__PURE__ */ css(["background:", ";color:", ";", "{svg{fill:", ";}}"], (props) => props.theme.palette["blue-050"], (props) => props.theme.palette["blue-600"], PrefixWrapper, (props) => props.theme.palette["blue-600"]);
 const highlightStyle = /* @__PURE__ */ css(["font-weight:400;.ds-list-item-highlight{font-weight:600;}"]);
 const orderedStyle = /* @__PURE__ */ css(["&::before{content:none;}"]);
 const Content = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Textstyles__Content",
-  componentId: "sc-1j4eogh-5"
+  componentId: "sc-1j4eogh-6"
 })(["white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;order:2;"]);
 const Wrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Textstyles__Wrapper",
-  componentId: "sc-1j4eogh-6"
+  componentId: "sc-1j4eogh-7"
 })(["display:flex;min-width:173px;", " ", " ", " ", "{", " ", " ", "{transition:all ", ";opacity:", ";}", " &.ant-menu-item-selected,&.-item-selected{", "}", " ", " .ds-checkbox,.ds-checkbox > .ant-checkbox-wrapper{padding:0;}}"], (props) => props.inTooltip && css(["height:100%;"]), ({
   featured,
   disabled,
@@ -50,23 +54,23 @@ const Wrapper = /* @__PURE__ */ styled.div.withConfig({
 }) => 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"])), (props) => 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, (props) => props.ordered && css(["&::before{font-weight:400;color:", ";counter-increment:ds-list-items 1;content:'0' counter(ds-list-items) '.  \\00A0';}"], props.theme.palette["grey-500"]), baseStyles, ArrowRight, TRANSITION_FN, (props) => props.disabled ? "1" : "0", (props) => props.selected && selectedStyle, selectedStyle, (props) => props.highlight && highlightStyle, (props) => !props.ordered && orderedStyle);
 const Divider = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Textstyles__Divider",
-  componentId: "sc-1j4eogh-7"
+  componentId: "sc-1j4eogh-8"
 })(["flex-grow:1;"]);
 const DynamicLabelMain = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Textstyles__DynamicLabelMain",
-  componentId: "sc-1j4eogh-8"
+  componentId: "sc-1j4eogh-9"
 })([""]);
 const DynamicLabelAlternate = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Textstyles__DynamicLabelAlternate",
-  componentId: "sc-1j4eogh-9"
+  componentId: "sc-1j4eogh-10"
 })([""]);
 const DynamicLabelWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Textstyles__DynamicLabelWrapper",
-  componentId: "sc-1j4eogh-10"
+  componentId: "sc-1j4eogh-11"
 })(["", ""], (props) => props.showAlternative ? css(["", "{height:0;visibility:hidden;}", "{height:auto;visibility:visible;}"], DynamicLabelMain, DynamicLabelAlternate) : css(["", "{height:auto;visibility:visible;}", "{height:0;visibility:hidden;}"], DynamicLabelMain, DynamicLabelAlternate));
 const Description = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Textstyles__Description",
-  componentId: "sc-1j4eogh-11"
+  componentId: "sc-1j4eogh-12"
 })(["text-overflow:ellipsis;overflow:hidden;color:", ";font-weight:normal;line-height:1.39;font-size:13px;width:100%;"], (props) => props.theme.palette["grey-600"]);
 export {
   ArrowRight,
@@ -79,6 +83,7 @@ export {
   Highlight,
   Inner,
   PrefixWrapper,
+  SubMenuToggle,
   SuffixWrapper,
   Wrapper
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-list-item",
-  "version": "1.4.21",
+  "version": "1.5.0",
   "description": "ListItem UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -42,11 +42,11 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@floating-ui/react": "^0.27.16",
-    "@synerise/ds-divider": "^1.3.12",
-    "@synerise/ds-icon": "^1.18.1",
-    "@synerise/ds-popover": "^1.6.0",
-    "@synerise/ds-tooltip": "^1.5.0",
-    "@synerise/ds-utils": "^1.9.0",
+    "@synerise/ds-divider": "^1.3.14",
+    "@synerise/ds-icon": "^1.18.3",
+    "@synerise/ds-popover": "^1.6.1",
+    "@synerise/ds-tooltip": "^1.5.2",
+    "@synerise/ds-utils": "^1.10.0",
     "classnames": "^2.5.1"
   },
   "peerDependencies": {
@@ -59,5 +59,5 @@
     "@testing-library/react": "^14.0.0",
     "vitest": "^4.0.0"
   },
-  "gitHead": "f257f56d8991010593efd5ea9915335e813671a6"
+  "gitHead": "fe3379f50afdce6d8c61a2222ebbf03324107c95"
 }