@synerise/ds-list-item 1.4.12 → 1.4.13

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.4.13](https://github.com/Synerise/synerise-design/compare/@synerise/ds-list-item@1.4.12...@synerise/ds-list-item@1.4.13) (2026-04-14)
+
+### Bug Fixes
+
+- **list-item:** new feature second suffix on hover only ([a9cac69](https://github.com/Synerise/synerise-design/commit/a9cac69e748f6e3912c9e4249b4ee324a50cfb90))
+
 ## [1.4.12](https://github.com/Synerise/synerise-design/compare/@synerise/ds-list-item@1.4.11...@synerise/ds-list-item@1.4.12) (2026-04-10)
 
 **Note:** Version bump only for package @synerise/ds-list-item

package/README.md

@@ -95,3 +95,86 @@ prop passed to onClick and onItemHover handlers
 | key      | item key                    | string                       |
 | item     | clicked / hovered item data | Partial<BasicItemProps>      |
 | domEvent | Event triggered             | `MouseEvent<HTMLDivElement>` |
+
+### HoverableSuffix
+
+A wrapper component that swaps suffix content based on hover state. Use it inside `suffixel` with the `AddonRenderer` pattern to show different content at rest vs on hover.
+
+| Property       | Description                                 | Type        | Default   |
+| -------------- | ------------------------------------------- | ----------- | --------- |
+| hovered        | Whether the parent list item is hovered     | `boolean`   | -         |
+| hoverContent   | Content displayed when hovered              | `ReactNode` | -         |
+| defaultContent | Content displayed at rest (optional)        | `ReactNode` | -         |
+
+```tsx
+import ListItem, { HoverableSuffix } from '@synerise/ds-list-item';
+
+<ListItem
+  suffixel={(hovered) => (
+    <HoverableSuffix
+      hovered={hovered}
+      defaultContent={<Icon component={<WarningFillM />} />}
+      hoverContent={<Button>Delete</Button>}
+    />
+  )}
+>
+  Item with hoverable suffix
+</ListItem>
+```
+
+### ListWrapper
+
+Container that provides shared `ListContext` (including a shared `onClick` handler) to all descendant `ListItem` components.
+
+| Property | Description                          | Type                 | Default |
+| -------- | ------------------------------------ | -------------------- | ------- |
+| onClick  | Shared click handler for all items   | `ListItemEventHandler` | -     |
+| children | ListItem nodes                       | `ReactNode`          | -       |
+
+```tsx
+import ListItem, { ListWrapper } from '@synerise/ds-list-item';
+
+<ListWrapper onClick={(itemData) => console.log(itemData)}>
+  <ListItem itemKey="a">Option A</ListItem>
+  <ListItem itemKey="b">Option B</ListItem>
+</ListWrapper>
+```
+
+### GroupItem
+
+Groups a title with a list of items.
+
+| Property | Description         | Type              | Default |
+| -------- | ------------------- | ----------------- | ------- |
+| title    | Section label       | `ReactNode`       | -       |
+| items    | Array of list items | `ListItemProps[]`  | -       |
+| children | Additional content  | `ReactNode`       | -       |
+
+```tsx
+import ListItem, { GroupItem } from '@synerise/ds-list-item';
+
+<GroupItem title="Section A" items={[
+  { children: 'Item 1', itemKey: '1' },
+  { children: 'Item 2', itemKey: '2' },
+]} />
+```
+
+### ListContextProvider
+
+Low-level provider for `ListContext`. Use when building custom list containers that need shared click handling or custom popover delay.
+
+| Property     | Description                           | Type                 | Default                        |
+| ------------ | ------------------------------------- | -------------------- | ------------------------------ |
+| onClick      | Shared click handler                  | `ListItemEventHandler` | -                            |
+| popoverDelay | Hover tooltip open/close delay config | `DelayConfig`        | `{ open: 100, close: 400 }`   |
+| children     | Content                               | `ReactNode`          | -                              |
+
+### useListContext
+
+Hook to read `ListContext` values. Returns `undefined` when used outside a provider.
+
+```tsx
+import { useListContext } from '@synerise/ds-list-item';
+
+const context = useListContext();
+```

package/dist/components/GroupItem/GroupItem.js

@@ -8,7 +8,7 @@ const GroupItem = ({
 }) => {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Title, { children: title }),
-    items?.map(ListItem),
+    items?.map((item, index) => /* @__PURE__ */ jsx(ListItem, { ...item }, item.itemKey ?? item.key ?? index)),
     children
   ] });
 };

package/dist/components/HoverableSuffix/HoverableSuffix.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { HoverableSuffixProps } from './HoverableSuffix.types';
+export declare const HoverableSuffix: ({ hovered, hoverContent, defaultContent, }: HoverableSuffixProps) => React.JSX.Element;

package/dist/components/HoverableSuffix/HoverableSuffix.js

@@ -0,0 +1,18 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slot, Container } from "./HoverableSuffix.styles.js";
+const HoverableSuffix = ({
+  hovered,
+  hoverContent,
+  defaultContent
+}) => {
+  if (!defaultContent) {
+    return /* @__PURE__ */ jsx(Slot, { visible: hovered, children: hoverContent });
+  }
+  return /* @__PURE__ */ jsxs(Container, { children: [
+    /* @__PURE__ */ jsx(Slot, { visible: !hovered, children: defaultContent }),
+    /* @__PURE__ */ jsx(Slot, { visible: hovered, children: hoverContent })
+  ] });
+};
+export {
+  HoverableSuffix
+};

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

@@ -0,0 +1,4 @@
+export declare const Container: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Slot: import('styled-components').StyledComponent<"div", any, {
+    visible: boolean;
+}, never>;

package/dist/components/HoverableSuffix/HoverableSuffix.styles.js

@@ -0,0 +1,13 @@
+import styled, { css } from "styled-components";
+const Container = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "HoverableSuffixstyles__Container",
+  componentId: "sc-178aunw-0"
+})(["display:grid;"]);
+const Slot = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "HoverableSuffixstyles__Slot",
+  componentId: "sc-178aunw-1"
+})(["grid-area:1 / 1;display:flex;align-items:center;justify-content:flex-end;transition:opacity 0.15s ease;", ";"], (props) => props.visible ? css(["opacity:1;pointer-events:auto;"]) : css(["opacity:0;pointer-events:none;"]));
+export {
+  Container,
+  Slot
+};

package/dist/components/HoverableSuffix/HoverableSuffix.types.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export type HoverableSuffixProps = {
+    hovered: boolean;
+    hoverContent: ReactNode;
+    defaultContent?: ReactNode;
+};

package/dist/components/Select/Select.js

@@ -1,12 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { v4 } from "uuid";
 import { SelectItem } from "./Select.styles.js";
 const Select = forwardRef(({
   children,
   ...rest
 }, ref) => {
-  return /* @__PURE__ */ jsx(SelectItem, { ref, ...rest, children }, v4());
+  return /* @__PURE__ */ jsx(SelectItem, { ref, ...rest, children });
 });
 export {
   Select as default

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

@@ -8,7 +8,7 @@ const visibleElementStyle = () => css(["opacity:1;pointer-events:all;"]);
 const SuffixWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Textstyles__SuffixWrapper",
   componentId: "sc-1j4eogh-0"
-})(["display:flex;order:10;justify-content:flex-end;", ";"], (props) => props.visible ? visibleElementStyle() : hiddenElementStyle());
+})(["display:flex;order:10;justify-content:flex-end;transition:opacity ", ";", ";"], TRANSITION_FN, (props) => props.visible ? visibleElementStyle() : hiddenElementStyle());
 const PrefixWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Textstyles__PrefixWrapper",
   componentId: "sc-1j4eogh-1"

package/dist/hooks/useTemporaryLabel.js

@@ -2,11 +2,14 @@ import { useState, useEffect } from "react";
 const useTemporaryLabel = (duration) => {
   const [temporaryLabel, setTemporaryLabel] = useState(false);
   useEffect(() => {
+    if (!temporaryLabel) {
+      return;
+    }
     const timer = setTimeout(() => setTemporaryLabel(false), duration);
     return () => {
       clearTimeout(timer);
     };
-  });
+  }, [temporaryLabel, duration]);
   return {
     temporaryLabel,
     setTemporaryLabel

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 export { default } from './ListItem';
 export { HoverTooltip, GroupItem } from './components';
+export { HoverableSuffix } from './components/HoverableSuffix/HoverableSuffix';
+export { type HoverableSuffixProps } from './components/HoverableSuffix/HoverableSuffix.types';
 export { ListWrapper, type ListWrapperProps, } from './components/ListWrapper/ListWrapper';
 export { useListContext } from './components/ListContext/ListContext';
 export { ListContextProvider } from './components/ListContext/ListContextProvider';

package/dist/index.js

@@ -4,6 +4,7 @@ import "./components/Select/Select.js";
 import "./components/Text/Text.js";
 import { default as default3 } from "./components/HoverTooltip/HoverTooltip.js";
 import { GroupItem } from "./components/GroupItem/GroupItem.js";
+import { HoverableSuffix } from "./components/HoverableSuffix/HoverableSuffix.js";
 import { ListWrapper } from "./components/ListWrapper/ListWrapper.js";
 import { useListContext } from "./components/ListContext/ListContext.js";
 import { ListContextProvider } from "./components/ListContext/ListContextProvider.js";
@@ -12,6 +13,7 @@ import { LIST_ITEM_SIZE_MAPPING } from "./ListItem.const.js";
 export {
   GroupItem,
   default3 as HoverTooltip,
+  HoverableSuffix,
   LIST_ITEM_SIZE_MAPPING,
   ListContextProvider,
   ListWrapper,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-list-item",
-  "version": "1.4.12",
+  "version": "1.4.13",
   "description": "ListItem UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -38,15 +38,17 @@
     "@synerise/ds-popover": "^1.5.4",
     "@synerise/ds-tooltip": "^1.4.12",
     "@synerise/ds-utils": "^1.8.0",
-    "classnames": "^2.5.1",
-    "uuid": "^8.3.2"
+    "classnames": "^2.5.1"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
     "copy-to-clipboard": "^3.3.1",
     "react": ">=16.9.0 <= 18.3.1",
-    "styled-components": "^5.3.3",
-    "vitest": "4"
+    "styled-components": "^5.3.3"
   },
-  "gitHead": "ce3c6d75efe8573a2b274853636f959b75a6cd32"
+  "devDependencies": {
+    "@testing-library/react": "^14.0.0",
+    "vitest": "^4.0.0"
+  },
+  "gitHead": "f5437b2141f3dbad7319626fe5812bbb3488191a"
 }