@synerise/ds-item-picker 1.17.27 → 1.18.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.18.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-item-picker@1.17.28...@synerise/ds-item-picker@1.18.0) (2026-08-11)
+
+### Features
+
+- **item-picker:** add isErrorWarning prop for warning-style error display ([9aef866](https://github.com/Synerise/synerise-design/commit/9aef866e21bb86a3190baae3b32916e2911f5ac2))
+
+## [1.17.28](https://github.com/Synerise/synerise-design/compare/@synerise/ds-item-picker@1.17.27...@synerise/ds-item-picker@1.17.28) (2026-07-24)
+
+**Note:** Version bump only for package @synerise/ds-item-picker
+
 ## [1.17.27](https://github.com/Synerise/synerise-design/compare/@synerise/ds-item-picker@1.17.26...@synerise/ds-item-picker@1.17.27) (2026-07-23)
 
 **Note:** Version bump only for package @synerise/ds-item-picker

package/CLAUDE.md

@@ -112,6 +112,7 @@ Current API. Generic over `ItemType extends BaseItemType` and `SectionType exten
 | `tooltip?` | `ReactNode` | — | `FormField` tooltip |
 | `tooltipConfig?` | `FormFieldCommonProps['tooltipConfig']` | — | `FormField` tooltip config |
 | `error?` | `boolean` | — | Error state on trigger and FormField |
+| `isObjectDeleted?` | `boolean` | — | Marks the selected item as deleted; renders its value text in `red-600` and drops the grey prefix-icon override |
 | `errorText?` | `FormFieldCommonProps['errorText']` | — | Preferred error message |
 | `errorMessage?` | `FormFieldCommonProps['errorText']` | — | **@deprecated** — use `errorText` |
 | `disabled?` | `boolean` | — | Disables trigger and dropdown |
@@ -166,6 +167,7 @@ Use `ItemPicker` (default) with `isNewVersion` instead.
 | `clearConfirmTitle?` | `string` | `'Please confirm'` | Popconfirm title |
 | `yesText?` / `noText?` | `string` | `'Yes'` / `'No'` | Popconfirm buttons |
 | `error?` | `boolean` | — | Error state |
+| `isObjectDeleted?` | `boolean` | — | Marks the selected item as deleted; renders its value text in `red-600` |
 | `errorMessage?` | `ReactNode` | — | Error text |
 | `disabled?` | `boolean` | — | Disabled state |
 | `hideSearchBar?` | `boolean` | — | Hide search bar |
@@ -319,6 +321,7 @@ import { ItemPickerList } from '@synerise/ds-item-picker';
  - `LIST_FOLDERS_IN_SECTIONS` — folder tiles (no items loaded yet)
 - **`ItemPickerLegacy` is marked `@deprecated`** in source with a JSDoc comment on the component itself.
 - **`errorMessage` prop** on `ItemPickerNew` is marked `@deprecated`; prefer `errorText` (from `FormFieldCommonProps`).
+- **`isObjectDeleted` prop** (on `ItemPickerNew`, `ItemPickerLegacy`, and the shared `Trigger`) flags a selected item that no longer exists. When `true`, `Trigger.styles` renders `ValueText` in `red-600` and skips the grey-600 `Prefix` icon override so the deleted state reads visually. It only affects the selected-value display — it has no effect while showing the placeholder.
 - **Several `ItemPickerTriggerProps` fields are `@deprecated`**: `clear`, `changeButtonLabel`, `clearConfirmTitle`, `yesText`, `noText` — move to `texts` object.
 - **`Props` alias** in `Trigger.types.ts` is marked `@deprecated`; use `ItemPickerTriggerProps`.
 - **Tests use Jest** (`jest.config.js` present); the package has not been migrated to Vitest.

package/README.md

@@ -67,6 +67,7 @@ import ItemPicker from '@synerise/ds-item-picker'
 | placeholderIcon?            | Icon visible with placeholder                            | React.ReactNode                                                                                 | -                                        |
 | error?                      | Whether the component has error state                    | boolean                                                                                         | -                                        |
 | errorMessage?               | Error message                                            | string, React.ReactNode                                                                         | -                                        |
+| isObjectDeleted?            | Styles the selected value as deleted (red text)          | boolean                                                                                         | -                                        |
 | tooltip?                    | Tooltip text                                             | string, React.ReactNode                                                                         | -                                        |
 | disabled?                   | Whether the component is disabled                        | boolean                                                                                         | -                                        |
 | changeButtonLabel?          | Label of change button, available only when size='large' | string, React.ReactNode                                                                         | 'Change'                                 |

package/dist/ItemPicker.styles.d.ts

@@ -1,3 +1 @@
-export declare const ItemPickerWrapper: import('styled-components').StyledComponent<"div", any, {
-    disabled?: boolean;
-}, never>;
+export declare const ItemPickerWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/components/ItemPickerLegacy/ItemPickerLegacy.d.ts

@@ -3,5 +3,5 @@ import { ItemPickerProps } from './ItemPickerLegacy.types';
 /**
  * @deprecated - use new ItemPicker
  */
-declare const ItemPickerLegacy: ({ dataSource, onChange, onClear, placeholder, changeButtonLabel, clear, clearConfirmTitle, closeOnBottomAction, description, disabled, dropdownBottomAction, dropdownProps, dropdownRowHeight, dropdownVisibleRows, error, errorMessage, label, onBlur, onFocus, noResults, noText, placeholderIcon, searchPlaceholder, searchBarProps, selectedItem, tooltip, tooltipConfig, size, yesText, withClearConfirmation, scrollbarProps, informationCardTooltipProps, hideSearchBar, }: ItemPickerProps) => React.JSX.Element;
+declare const ItemPickerLegacy: ({ dataSource, onChange, onClear, placeholder, changeButtonLabel, clear, clearConfirmTitle, closeOnBottomAction, description, disabled, dropdownBottomAction, dropdownProps, dropdownRowHeight, dropdownVisibleRows, error, errorMessage, isObjectDeleted, label, onBlur, onFocus, noResults, noText, placeholderIcon, searchPlaceholder, searchBarProps, selectedItem, tooltip, tooltipConfig, size, yesText, withClearConfirmation, scrollbarProps, informationCardTooltipProps, hideSearchBar, }: ItemPickerProps) => React.JSX.Element;
 export default ItemPickerLegacy;

package/dist/components/ItemPickerLegacy/ItemPickerLegacy.js

@@ -23,6 +23,7 @@ const ItemPickerLegacy = ({
   dropdownVisibleRows,
   error,
   errorMessage,
+  isObjectDeleted,
   label,
   onBlur,
   onFocus,
@@ -92,8 +93,8 @@ const ItemPickerLegacy = ({
     typeof onBlur === "function" && onBlur();
   }, [setDropdownOpened, onBlur]);
   const dropdownOverlay = useMemo(() => /* @__PURE__ */ jsx(ItemPickerDropdown, { searchBarProps, clearSearchQuery: clearSearchBarValue.current, onChange, dataSource, placeholder: texts.searchPlaceholder, closeDropdown, noResults: texts.noResults, dropdownVisibleRows, dropdownRowHeight, dropdownBottomAction, closeOnBottomAction, isDropdownOpened: dropdownOpened, scrollbarProps, hideSearchBar }), [searchBarProps, onChange, dataSource, texts, closeDropdown, dropdownVisibleRows, dropdownRowHeight, dropdownBottomAction, closeOnBottomAction, dropdownOpened, hideSearchBar, scrollbarProps]);
-  const renderTrigger = useMemo(() => /* @__PURE__ */ jsx(Trigger, { clear: texts.clear, selected: selectedItem, onClear, opened: dropdownOpened, placeholder, placeholderIcon, error, disabled, openDropdown, closeDropdown, size, changeButtonLabel: texts.changeButtonLabel, withChangeButton: !withClearConfirmation, clearConfirmTitle: texts.clearConfirmTitle, yesText: texts.yesText, noText: texts.noText, withClearConfirmation: Boolean(withClearConfirmation), informationCardTooltipProps }), [closeDropdown, disabled, dropdownOpened, error, informationCardTooltipProps, onClear, openDropdown, placeholder, placeholderIcon, selectedItem, size, texts.changeButtonLabel, texts.clear, texts.clearConfirmTitle, texts.noText, texts.yesText, withClearConfirmation]);
-  return /* @__PURE__ */ jsx(ItemPickerWrapper, { className: "ds-items-picker", disabled, children: /* @__PURE__ */ jsx(FormField, { label, tooltip, tooltipConfig, errorText: errorMessage, description, children: /* @__PURE__ */ jsx(Dropdown, { open: dropdownOpened, disabled, trigger: ["click"], overlay: dropdownOverlay, onOpenChange: onVisibilityChange, asChild: true, size: "match-trigger", ...dropdownProps, popoverProps: {
+  const renderTrigger = useMemo(() => /* @__PURE__ */ jsx(Trigger, { clear: texts.clear, selected: selectedItem, onClear, opened: dropdownOpened, placeholder, placeholderIcon, error, isObjectDeleted, disabled, openDropdown, closeDropdown, size, changeButtonLabel: texts.changeButtonLabel, withChangeButton: !withClearConfirmation, clearConfirmTitle: texts.clearConfirmTitle, yesText: texts.yesText, noText: texts.noText, withClearConfirmation: Boolean(withClearConfirmation), informationCardTooltipProps }), [closeDropdown, disabled, dropdownOpened, error, informationCardTooltipProps, onClear, openDropdown, placeholder, placeholderIcon, selectedItem, size, texts.changeButtonLabel, texts.clear, texts.clearConfirmTitle, texts.noText, texts.yesText, withClearConfirmation]);
+  return /* @__PURE__ */ jsx(ItemPickerWrapper, { className: "ds-items-picker", children: /* @__PURE__ */ jsx(FormField, { label, tooltip, tooltipConfig, errorText: errorMessage, description, children: /* @__PURE__ */ jsx(Dropdown, { open: dropdownOpened, disabled, trigger: ["click"], overlay: dropdownOverlay, onOpenChange: onVisibilityChange, asChild: true, size: "match-trigger", ...dropdownProps, popoverProps: {
     testId: "item-picker-legacy",
     ...dropdownProps?.popoverProps
   }, children: renderTrigger }) }) });

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

@@ -24,6 +24,7 @@ export type ItemPickerProps<ItemType extends ListItemProps = ListItemProps> = {
     dropdownVisibleRows?: number;
     error?: boolean;
     errorMessage?: FormFieldCommonProps['errorText'];
+    isObjectDeleted?: boolean;
     onBlur?: () => void;
     onFocus?: () => void;
     noResults?: string;

package/dist/components/ItemPickerNew/ItemPickerNew.d.ts

@@ -2,7 +2,7 @@ import { default as React } from 'react';
 import { ItemPickerListRef } from '../ItemPickerList/ItemPickerList.types';
 import { ItemPickerProps } from './ItemPickerNew.types';
 import { BaseItemType, BaseSectionType } from './types/baseItemSectionType.types';
-declare const ItemPickerNewInner: <ItemType extends BaseItemType, SectionType extends BaseSectionType>({ onFocus, onBlur, onClear, selectedItem, onChange, dropdownProps, texts, triggerProps, renderTrigger, placeholder, placeholderIcon, label, description, error, errorMessage, errorText, disabled, tooltip, tooltipConfig, ...rest }: ItemPickerProps<ItemType, SectionType>, forwardedRef: ItemPickerListRef) => React.JSX.Element;
+declare const ItemPickerNewInner: <ItemType extends BaseItemType, SectionType extends BaseSectionType>({ onFocus, onBlur, onClear, selectedItem, onChange, dropdownProps, texts, triggerProps, renderTrigger, placeholder, placeholderIcon, label, description, error, isObjectDeleted, errorMessage, errorText, disabled, tooltip, tooltipConfig, ...rest }: ItemPickerProps<ItemType, SectionType>, forwardedRef: ItemPickerListRef) => React.JSX.Element;
 type ItemPickerNewType = <ItemType extends BaseItemType, SectionType extends BaseSectionType>(p: ItemPickerProps<ItemType, SectionType> & {
     ref?: ItemPickerListRef;
 }) => ReturnType<typeof ItemPickerNewInner>;

package/dist/components/ItemPickerNew/ItemPickerNew.js

@@ -21,6 +21,7 @@ const ItemPickerNewInner = ({
   label,
   description,
   error,
+  isObjectDeleted,
   errorMessage,
   errorText,
   disabled,
@@ -58,9 +59,9 @@ const ItemPickerNewInner = ({
       closeDropdown,
       error,
       disabled
-    }) : /* @__PURE__ */ jsx(Trigger, { size: "small", ...triggerProps, opened: visible, texts: allTexts, disabled, placeholder, placeholderIcon, selected: selectedItem, onClear, openDropdown, closeDropdown, error });
-  }, [allTexts, disabled, error, onClear, placeholder, placeholderIcon, renderTrigger, selectedItem, triggerProps, visible]);
-  return /* @__PURE__ */ jsx(ItemPickerWrapper, { className: "ds-items-picker", disabled, children: /* @__PURE__ */ jsx(FormField, { label, tooltip, tooltipConfig, errorText: errorText || errorMessage, description, children: /* @__PURE__ */ jsx(Dropdown, { overlayStyle: {
+    }) : /* @__PURE__ */ jsx(Trigger, { size: "small", ...triggerProps, opened: visible, texts: allTexts, disabled, placeholder, placeholderIcon, selected: selectedItem, onClear, openDropdown, closeDropdown, error, isObjectDeleted });
+  }, [allTexts, disabled, error, isObjectDeleted, onClear, placeholder, placeholderIcon, renderTrigger, selectedItem, triggerProps, visible]);
+  return /* @__PURE__ */ jsx(ItemPickerWrapper, { className: "ds-items-picker", children: /* @__PURE__ */ jsx(FormField, { label, tooltip, tooltipConfig, errorText: errorText || errorMessage, description, children: /* @__PURE__ */ jsx(Dropdown, { overlayStyle: {
     minWidth: "400px"
   }, size: "match-trigger", asChild: true, ...dropdownProps, popoverProps: {
     testId: "item-picker",

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

@@ -62,6 +62,7 @@ export type ItemPickerProps<ItemType extends BaseItemType, SectionType extends B
      */
     errorMessage?: FormFieldCommonProps['errorText'];
     error?: boolean;
+    isObjectDeleted?: boolean;
     disabled?: boolean;
     onChange?: (item: ItemType) => void;
     onFocus?: () => void;

package/dist/components/ItemPickerTrigger/Trigger.d.ts

@@ -9,6 +9,7 @@ declare const Trigger: React.ForwardRefExoticComponent<{
     placeholder: React.ReactNode;
     placeholderIcon?: React.ReactNode;
     error?: boolean;
+    isObjectDeleted?: boolean;
     disabled?: boolean;
     selected?: import('@synerise/ds-list-item').ListItemProps;
     changeButtonLabel?: React.ReactNode;

package/dist/components/ItemPickerTrigger/Trigger.js

@@ -16,6 +16,7 @@ const Trigger = forwardRef(({
   placeholder,
   placeholderIcon,
   error,
+  isObjectDeleted,
   disabled,
   openDropdown,
   closeDropdown,
@@ -71,9 +72,9 @@ const Trigger = forwardRef(({
   }, [size, disabled, withChangeButton, handleChangeButtonClick, allTexts.changeButtonLabel]);
   const renderedTrigger = useMemo(() => /* @__PURE__ */ jsxs(TriggerWrapper, { tabIndex: selected ? void 0 : 0, size, opened, disabled, error, onClick: handleOpen, selected: Boolean(selected), clearable: Boolean(onClear && renderClear), ref: !informationCardTooltipProps ? ref : void 0, children: [
     /* @__PURE__ */ jsx(Trigger$1, { size, children: selected ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(Value, { children: [
+      /* @__PURE__ */ jsxs(Value, { isObjectDeleted, children: [
         selected.prefixel && /* @__PURE__ */ jsx(Prefix, { "data-testid": "value-prefixel", children: /* @__PURE__ */ jsx(Fragment, { children: selected.prefixel }) }),
-        /* @__PURE__ */ jsx(ValueText, { children: selected.text })
+        /* @__PURE__ */ jsx(ValueText, { isObjectDeleted, children: selected.text })
       ] }),
       renderChangeButton
     ] }) : /* @__PURE__ */ jsxs(Placeholder, { size, children: [

package/dist/components/ItemPickerTrigger/Trigger.styles.d.ts

@@ -17,11 +17,15 @@ export declare const Prefix: import('styled-components').StyledComponent<"div",
 export declare const Placeholder: import('styled-components').StyledComponent<"div", any, {
     size: ItemPickerSize;
 }, never>;
-export declare const Value: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Value: import('styled-components').StyledComponent<"div", any, {
+    isObjectDeleted?: boolean;
+}, never>;
 export declare const Trigger: import('styled-components').StyledComponent<"div", any, {
     size: ItemPickerSize;
 }, never>;
 export declare const TriggerWrapper: import('styled-components').StyledComponent<"div", any, TriggerWrapperProps, never>;
 export declare const ChangeButtonWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
-export declare const ValueText: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const ValueText: import('styled-components').StyledComponent<"span", any, {
+    isObjectDeleted?: boolean;
+}, never>;
 export {};

package/dist/components/ItemPickerTrigger/Trigger.styles.js

@@ -50,7 +50,7 @@ const Placeholder = /* @__PURE__ */ styled.div.withConfig({
 const Value = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Triggerstyles__Value",
   componentId: "sc-1t1uce7-6"
-})(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex:1;color:", ";max-width:100%;overflow:hidden;padding:0 0 0 4px;", "{svg{fill:", ";color:", ";}}"], (props) => props.theme.palette["grey-800"], Prefix, (props) => props.theme.palette["grey-600"], (props) => props.theme.palette["grey-600"]);
+})(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex:1;color:", ";max-width:100%;overflow:hidden;padding:0 0 0 4px;", ""], (props) => props.theme.palette["grey-800"], (props) => !props.isObjectDeleted && css(["", "{svg{fill:", ";color:", ";}}"], Prefix, props.theme.palette["grey-600"], props.theme.palette["grey-600"]));
 const Trigger = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Triggerstyles__Trigger",
   componentId: "sc-1t1uce7-7"
@@ -99,7 +99,7 @@ const ChangeButtonWrapper = /* @__PURE__ */ styled.div.withConfig({
 const ValueText = /* @__PURE__ */ styled.span.withConfig({
   displayName: "Triggerstyles__ValueText",
   componentId: "sc-1t1uce7-10"
-})(["text-overflow:ellipsis;overflow:hidden;white-space:nowrap;"]);
+})(["text-overflow:ellipsis;overflow:hidden;white-space:nowrap;", ""], (props) => props.isObjectDeleted && css(["color:", ";"], props.theme.palette["red-600"]));
 export {
   AngleIconWrapper,
   ChangeButtonWrapper,

package/dist/components/ItemPickerTrigger/Trigger.types.d.ts

@@ -21,6 +21,7 @@ export type ItemPickerTriggerProps = {
     placeholder: ReactNode;
     placeholderIcon?: ReactNode;
     error?: boolean;
+    isObjectDeleted?: boolean;
     disabled?: boolean;
     selected?: ListItemProps;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-item-picker",
-  "version": "1.17.27",
+  "version": "1.18.0",
   "description": "ItemPicker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -42,26 +42,26 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-alert": "^1.1.62",
-    "@synerise/ds-avatar": "^1.3.19",
-    "@synerise/ds-button": "^1.5.35",
-    "@synerise/ds-dropdown": "^1.3.20",
+    "@synerise/ds-alert": "^1.1.63",
+    "@synerise/ds-avatar": "^1.3.20",
+    "@synerise/ds-button": "^1.5.36",
+    "@synerise/ds-dropdown": "^1.3.22",
     "@synerise/ds-empty-states": "^1.0.49",
     "@synerise/ds-flag": "^1.0.13",
-    "@synerise/ds-form-field": "^1.3.24",
+    "@synerise/ds-form-field": "^1.3.25",
     "@synerise/ds-icon": "^1.18.5",
-    "@synerise/ds-information-card": "^1.7.8",
-    "@synerise/ds-list-item": "^1.6.2",
+    "@synerise/ds-information-card": "^1.7.10",
+    "@synerise/ds-list-item": "^1.6.3",
     "@synerise/ds-loader": "^1.0.18",
-    "@synerise/ds-popconfirm": "^1.4.2",
-    "@synerise/ds-result": "^1.0.66",
+    "@synerise/ds-popconfirm": "^1.4.3",
+    "@synerise/ds-result": "^1.0.67",
     "@synerise/ds-scrollbar": "^1.5.2",
-    "@synerise/ds-search": "^1.5.34",
-    "@synerise/ds-search-bar": "^1.4.35",
-    "@synerise/ds-short-cuts": "^1.0.56",
-    "@synerise/ds-skeleton": "^1.0.60",
-    "@synerise/ds-tooltip": "^1.5.4",
-    "@synerise/ds-typography": "^1.1.27",
+    "@synerise/ds-search": "^1.5.35",
+    "@synerise/ds-search-bar": "^1.4.37",
+    "@synerise/ds-short-cuts": "^1.0.57",
+    "@synerise/ds-skeleton": "^1.0.61",
+    "@synerise/ds-tooltip": "^1.5.5",
+    "@synerise/ds-typography": "^1.1.28",
     "@synerise/ds-utils": "^1.10.2",
     "lodash.debounce": "^4.0.8",
     "react-window": "^1.8.11",
@@ -77,5 +77,5 @@
     "styled-components": "^5.3.3",
     "vitest": "4"
   },
-  "gitHead": "d0a43cc43d8528a36f105aceea52ab470edb71d9"
+  "gitHead": "6df24ed12cd5f276d8eccde730591807982e3385"
 }