@synerise/ds-manageable-list 1.3.23 → 1.4.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.4.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-manageable-list@1.3.24...@synerise/ds-manageable-list@1.4.0) (2025-09-25)
+
+
+### Features
+
+* **manageable-list:** enable selecting content items ([5fb2491](https://github.com/Synerise/synerise-design/commit/5fb249199343ad9bc31a3a853a57e48b1fa95ddb))
+
+
+
+
+
+## [1.3.24](https://github.com/Synerise/synerise-design/compare/@synerise/ds-manageable-list@1.3.23...@synerise/ds-manageable-list@1.3.24) (2025-09-23)
+
+**Note:** Version bump only for package @synerise/ds-manageable-list
+
+
+
+
+
 ## [1.3.23](https://github.com/Synerise/synerise-design/compare/@synerise/ds-manageable-list@1.3.22...@synerise/ds-manageable-list@1.3.23) (2025-09-19)
 
 **Note:** Version bump only for package @synerise/ds-manageable-list

package/dist/Item/ContentItem/ContentItem.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type ContentItemProps } from './ContentItem.types';
-declare const ContentItem: (({ onRemove, onUpdate, onDuplicate, draggable, dashed, item, greyBackground, changeOrderDisabled, texts, hideExpander, expanded, onExpand, headerSuffix, headerPrefix, contentWithoutPadding, onMoveTop, onMoveBottom, isFirst, isLast, size, dragHandleProps, isDragPlaceholder, isDragOverlay, ...rest }: ContentItemProps) => React.JSX.Element) & {
+declare const ContentItem: (({ onRemove, onUpdate, onDuplicate, draggable, dashed, item, greyBackground, changeOrderDisabled, texts, hideExpander, expanded, onExpand, selected, onSelect, headerSuffix, headerPrefix, contentWithoutPadding, onMoveTop, onMoveBottom, isFirst, isLast, size, dragHandleProps, isDragPlaceholder, isDragOverlay, ...rest }: ContentItemProps) => React.JSX.Element) & {
     AdditionalSuffix: import("styled-components").StyledComponent<"div", any, {}, never>;
     ContentWrapper: import("styled-components").StyledComponent<"div", any, {
         withoutPadding: boolean;
@@ -14,6 +14,7 @@ declare const ContentItem: (({ onRemove, onUpdate, onDuplicate, draggable, dashe
     IconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
     ItemContainer: import("styled-components").StyledComponent<"div", any, {
         opened: boolean;
+        selected?: boolean;
         greyBackground: boolean | undefined;
         size?: "default" | "large";
         dashed?: boolean;

package/dist/Item/ContentItem/ContentItem.js

@@ -1,4 +1,4 @@
-var _excluded = ["onRemove", "onUpdate", "onDuplicate", "draggable", "dashed", "item", "greyBackground", "changeOrderDisabled", "texts", "hideExpander", "expanded", "onExpand", "headerSuffix", "headerPrefix", "contentWithoutPadding", "onMoveTop", "onMoveBottom", "isFirst", "isLast", "size", "dragHandleProps", "isDragPlaceholder", "isDragOverlay"];
+var _excluded = ["onRemove", "onUpdate", "onDuplicate", "draggable", "dashed", "item", "greyBackground", "changeOrderDisabled", "texts", "hideExpander", "expanded", "onExpand", "selected", "onSelect", "headerSuffix", "headerPrefix", "contentWithoutPadding", "onMoveTop", "onMoveBottom", "isFirst", "isLast", "size", "dragHandleProps", "isDragPlaceholder", "isDragOverlay"];
 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 React, { useEffect, useState } from 'react';
@@ -20,6 +20,8 @@ var ContentItemComponent = function ContentItemComponent(_ref) {
     hideExpander = _ref.hideExpander,
     expanded = _ref.expanded,
     onExpand = _ref.onExpand,
+    selected = _ref.selected,
+    onSelect = _ref.onSelect,
     headerSuffix = _ref.headerSuffix,
     headerPrefix = _ref.headerPrefix,
     contentWithoutPadding = _ref.contentWithoutPadding,
@@ -45,6 +47,7 @@ var ContentItemComponent = function ContentItemComponent(_ref) {
   }, [expanded]);
   return /*#__PURE__*/React.createElement(S.ItemContainer, _extends({
     opened: !!isExpanded,
+    selected: !!selected,
     greyBackground: greyBackground,
     key: item.id,
     "data-testid": "item-with-content",
@@ -67,6 +70,7 @@ var ContentItemComponent = function ContentItemComponent(_ref) {
     texts: allTexts,
     hideExpander: hideExpander,
     onExpand: onExpand,
+    onSelect: onSelect,
     headerSuffix: headerSuffix,
     headerPrefix: headerPrefix,
     onMoveTop: onMoveTop,

package/dist/Item/ContentItem/ContentItem.styles.d.ts

@@ -17,6 +17,7 @@ export declare const ContentWrapper: import("styled-components").StyledComponent
 }, never>;
 export declare const ItemContainer: import("styled-components").StyledComponent<"div", any, {
     opened: boolean;
+    selected?: boolean;
     greyBackground: boolean | undefined;
     size?: "default" | "large";
     dashed?: boolean;

package/dist/Item/ContentItem/ContentItem.styles.js

@@ -82,7 +82,9 @@ var standardShadow = function standardShadow(_ref8) {
 export var ItemContainer = styled.div.withConfig({
   displayName: "ContentItemstyles__ItemContainer",
   componentId: "sc-13pyu4r-8"
-})(["width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;margin-bottom:16px;border-radius:3px;position:relative;", " ", " ", " ", " && .item-content-animation{width:100%;}", " ", ""], function (props) {
+})(["width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;margin-bottom:16px;border-radius:3px;position:relative;", " ", " ", " ", " ", " && .item-content-animation{width:100%;}", " ", ""], function (props) {
+  return props.selected && "\n    outline: 2px solid " + props.theme.palette['blue-600'] + " !important;\n  ";
+}, function (props) {
   return props.isDragOverlay ? "box-shadow: " + standardShadow(props) + ", 0px 16px 32px 0px " + props.theme.palette['grey-200'] + ";\n" : css(["box-shadow:", ";"], standardShadow(props));
 }, function (props) {
   return props.isDragPlaceholder ? css(["background-color:", ";outline:1px dashed ", " !important;box-shadow:0;box-sizing:border-box;border-radius:3px;", "{visibility:hidden;opacity:0;}", "{display:none;}"], props.theme.palette['blue-050'], props.theme.palette['blue-300'], ItemHeader, ContentWrapper) : css(["background-color:", ";"], props.theme.palette.white);

package/dist/Item/ContentItem/ContentItem.types.d.ts

@@ -4,6 +4,7 @@ import { type ItemProps, type Texts } from '../../ManageableList.types';
 type BaseContentItemProps = Omit<ContentItemHeaderProps, 'texts' | 'isExpanded' | 'setIsExpanded'> & {
     dashed?: boolean;
     expanded?: boolean;
+    selected?: boolean;
     greyBackground?: boolean;
     contentWithoutPadding?: boolean;
     texts?: ContentItemHeaderProps['texts'] | undefined;
@@ -23,6 +24,9 @@ export type ContentItemHeaderProps = {
         id: ReactText;
     }) => void;
     onExpand?: (id: ReactText, isExpanded: boolean) => void;
+    onSelect?: (selectParams: {
+        id: ReactText;
+    }) => void;
     onRemove?: (removeParams: {
         id: ReactText;
     }) => void;

package/dist/Item/ContentItem/ContentItemHeader.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { ContentItemHeaderProps } from './ContentItem.types';
-export declare const ContentItemHeader: ({ onRemove, onUpdate, onDuplicate, draggable, item, changeOrderDisabled, texts, hideExpander, onExpand, headerSuffix, headerPrefix, onMoveTop, onMoveBottom, isFirst, isLast, isExpanded, dragHandleProps, isDragOverlay, setIsExpanded, size, }: ContentItemHeaderProps) => React.JSX.Element;
+export declare const ContentItemHeader: ({ onRemove, onUpdate, onDuplicate, draggable, item, changeOrderDisabled, texts, hideExpander, onExpand, onSelect, headerSuffix, headerPrefix, onMoveTop, onMoveBottom, isFirst, isLast, isExpanded, dragHandleProps, isDragOverlay, setIsExpanded, size, }: ContentItemHeaderProps) => React.JSX.Element;

package/dist/Item/ContentItem/ContentItemHeader.js

@@ -20,6 +20,7 @@ export var ContentItemHeader = function ContentItemHeader(_ref) {
     texts = _ref.texts,
     hideExpander = _ref.hideExpander,
     onExpand = _ref.onExpand,
+    onSelect = _ref.onSelect,
     headerSuffix = _ref.headerSuffix,
     headerPrefix = _ref.headerPrefix,
     onMoveTop = _ref.onMoveTop,
@@ -82,7 +83,11 @@ export var ContentItemHeader = function ContentItemHeader(_ref) {
     hasPrefix: hasPrefix,
     hasDescription: !!item.description,
     onClick: function onClick() {
-      if (!item.disableExpanding && !editMode && !item.disableHeaderClick) {
+      if (onSelect && !editMode) {
+        onSelect({
+          id: item.id
+        });
+      } else if (!item.disableExpanding && !editMode && !item.disableHeaderClick) {
         setIsExpanded(!isExpanded);
         onExpand && onExpand(item.id, !isExpanded);
       }

package/dist/Item/FilterItem/FilterItem.d.ts

@@ -15,6 +15,7 @@ declare const FilterItem: (({ item, selected, greyBackground, onDuplicate, onRem
     IconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
     ItemContainer: import("styled-components").StyledComponent<"div", any, {
         opened: boolean;
+        selected?: boolean;
         greyBackground: boolean | undefined;
         size?: "default" | "large";
         dashed?: boolean;

package/dist/Item/FilterItem/FilterItem.js

@@ -96,7 +96,7 @@ var FilterItemComponent = function FilterItemComponent(_ref) {
     okType: "primary",
     placement: "top",
     onConfirm: function onConfirm() {
-      return onSelect({
+      return onSelect == null ? void 0 : onSelect({
         id: item.id
       });
     },

package/dist/Item/FilterItem/FilterItem.types.d.ts

@@ -13,7 +13,7 @@ export type FilterItemProps = {
         id: React.ReactText;
         name: string;
     }) => void;
-    onSelect: (selectParams: {
+    onSelect?: (selectParams: {
         id: React.ReactText;
     }) => void;
     selected: boolean;

package/dist/Item/Item.js

@@ -45,7 +45,9 @@ var Item = function Item(_ref) {
         hideExpander: hideExpander,
         texts: texts,
         expanded: expanded,
+        selected: selected,
         onExpand: onExpand,
+        onSelect: onSelect,
         onMoveTop: onMoveTop,
         onMoveBottom: onMoveBottom,
         isFirst: Boolean(isFirst),

package/dist/Item/SimpleItem/SimpleItem.js

@@ -22,9 +22,9 @@ var SimpleItemComponent = function SimpleItemComponent(_ref) {
     onUpdate && onUpdate(updateParams);
   }, [onUpdate]);
   var handleSelect = useCallback(function () {
-    !editMode && onSelect({
+    !editMode && (onSelect == null ? void 0 : onSelect({
       id: item.id
-    });
+    }));
   }, [onSelect, item.id, editMode]);
   var enterEditMode = useCallback(function () {
     setEditMode(true);

package/dist/Item/SimpleItem/SimpleItem.types.d.ts

@@ -5,7 +5,7 @@ export type Props = {
     onRemove?: (removeParams: {
         id: ReactText;
     }) => void;
-    onSelect: (selectParams: {
+    onSelect?: (selectParams: {
         id: ReactText;
     }) => void;
     onUpdate?: (updateParams: {

package/dist/ManageableList.types.d.ts

@@ -31,7 +31,7 @@ export type ManageableListProps<T extends object> = {
         id: ReactText;
         name: string;
     }) => void;
-    onItemSelect: (selectParams: {
+    onItemSelect?: (selectParams: {
         id: ReactText;
     }) => void;
     onItemDuplicate?: (duplicateParams: {
@@ -102,7 +102,7 @@ export type ManageableListItemProps = {
     onRemove?: (removeParams: {
         id: ReactText;
     }) => void;
-    onSelect: (selectParams: {
+    onSelect?: (selectParams: {
         id: ReactText;
     }) => void;
     onUpdate?: (updateParams: {
@@ -171,6 +171,7 @@ export type ItemProps<T extends object = object> = T & {
      */
     disableHeaderClick?: boolean;
     expanded?: boolean;
+    selected?: boolean;
     disabled?: boolean;
     headerSuffix?: ReactNode;
     hideHeaderSuffixOnHover?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-manageable-list",
-  "version": "1.3.23",
+  "version": "1.4.0",
   "description": "ManageableList UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -35,20 +35,20 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-avatar": "^1.0.22",
-    "@synerise/ds-button": "^1.4.11",
-    "@synerise/ds-divider": "^1.0.21",
-    "@synerise/ds-dropdown": "^1.0.23",
+    "@synerise/ds-avatar": "^1.0.23",
+    "@synerise/ds-button": "^1.4.12",
+    "@synerise/ds-divider": "^1.1.0",
+    "@synerise/ds-dropdown": "^1.0.25",
     "@synerise/ds-icon": "^1.7.2",
-    "@synerise/ds-inline-edit": "^1.0.27",
-    "@synerise/ds-input": "^1.3.10",
-    "@synerise/ds-list": "^1.0.22",
-    "@synerise/ds-menu": "^1.0.23",
-    "@synerise/ds-modal": "^1.2.11",
-    "@synerise/ds-popconfirm": "^1.0.23",
-    "@synerise/ds-result": "^1.0.24",
+    "@synerise/ds-inline-edit": "^1.0.29",
+    "@synerise/ds-input": "^1.3.12",
+    "@synerise/ds-list": "^1.1.0",
+    "@synerise/ds-menu": "^1.0.24",
+    "@synerise/ds-modal": "^1.2.12",
+    "@synerise/ds-popconfirm": "^1.0.24",
+    "@synerise/ds-result": "^1.0.25",
     "@synerise/ds-sortable": "^1.3.5",
-    "@synerise/ds-tag": "^1.2.0",
+    "@synerise/ds-tag": "^1.3.0",
     "@synerise/ds-tooltip": "^1.2.0",
     "@synerise/ds-typography": "^1.0.21",
     "@synerise/ds-utils": "^1.4.2",
@@ -62,5 +62,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "5029af8713235b315d36bb3c73363f2feca86da0"
+  "gitHead": "6a2e6e20a480aafe5d67748d04fbe3d4ce91a544"
 }