@synerise/ds-select 1.5.0 → 1.5.2

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.2](https://github.com/synerise/synerise-design/compare/@synerise/ds-select@1.5.1...@synerise/ds-select@1.5.2) (2026-08-14)
+
+**Note:** Version bump only for package @synerise/ds-select
+
+## [1.5.1](https://github.com/synerise/synerise-design/compare/@synerise/ds-select@1.5.0...@synerise/ds-select@1.5.1) (2026-08-13)
+
+### Bug Fixes
+
+- honour Option children, optionLabelProp and optionFilterProp in select ([640a1c2](https://github.com/synerise/synerise-design/commit/640a1c27e677de165e195072a22bac891a065fac))
+
 # [1.5.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-select@1.4.0...@synerise/ds-select@1.5.0) (2026-08-11)
 
 ### Features

package/CLAUDE.md

@@ -153,6 +153,12 @@ Class hooks are `ds-select-*` (`.ds-select`, `.ds-select-selection-item`, `.ds-s
 - **Option resolution** — `useSelectOptions` returns `resolvedOptions` (from `options` prop, else
   `getOptionsFromChildren(children)`) and `displayedOptions` (after client filtering and, in `tags`
   mode, a create-row prepended for the typed text). `filterOption={false}` disables local filtering.
+- **Row vs selector display (antd parity)** — the dropdown row renders `option.children ?? label ??
+  value`, the selector renders the field named by `optionLabelProp` (`label`, `children`, `value`,
+  `title`, …) and falls back to `label`. So `<Option label={compact}>{rich}</Option>` shows `rich` in
+  the list and `compact` in the selector, while options-as-data (no children) uses `label` for both.
+- **Filtering** — `defaultFilter` matches the field named by `optionFilterProp` (`title`, `children`,
+  `value`, …), else `label` then `children`; non-string fields (JSX nodes) fall back to the value.
 - **`Option.value` is optional** — falls back to the element's React `key` (antd parity); callbacks
   expose `option.key`.
 - **Keyboard nav is hand-rolled (not ds-dropdown's)** — Select is a *combobox*: focus stays on the

package/dist/Select.js

@@ -174,10 +174,16 @@ const SelectInner = forwardRef((props, ref) => {
   const $size = size === "large" ? "large" : "default";
   const labelFor = (v) => {
     const option = findOption(resolvedOptions, v);
-    if (option && optionLabelProp === "value") {
-      return option.value;
+    if (!option) {
+      return v;
     }
-    return option?.label ?? v;
+    if (optionLabelProp) {
+      const custom = option[optionLabelProp];
+      if (custom !== void 0) {
+        return custom;
+      }
+    }
+    return option.label ?? v;
   };
   const setOpen = (next) => {
     if (isDisabled) {

package/dist/Select.types.d.ts

@@ -14,12 +14,12 @@ export type SelectOption = {
     value: RawValueType;
     /** antd-parity alias of `value`; some consumers read `option.key` in callbacks. */
     key?: RawValueType;
-    /** Rendered content in the dropdown row (and the selector unless `optionLabelProp` picks another field). */
+    /** Selector display, and the dropdown row too unless `children` carries its own content. */
     label?: ReactNode;
     disabled?: boolean;
     /** Native `title` on the option (hover tooltip / accessible text), mirrors antd. */
     title?: ReactNode;
-    /** antd parity: raw children of `<Select.Option>`; some consumers read `option.children`. */
+    /** Raw children of `<Select.Option>` — the dropdown row content (antd parity). */
     children?: ReactNode;
     /** antd parity: forwarded to the rendered option row. */
     style?: CSSProperties;

package/dist/components/OptionList.js

@@ -25,7 +25,25 @@ const OptionList = ({
 }, children: loading ? /* @__PURE__ */ jsx(Loading, { className: "ds-select-loading", children: /* @__PURE__ */ jsx(Loader, { size: "M" }) }) : options.length === 0 ? /* @__PURE__ */ jsx(NotFound, { className: "ds-select-empty", children: notFoundContent }) : /* @__PURE__ */ jsx(ScrollList, { children: /* @__PURE__ */ jsx(Scrollbar, { absolute: true, maxHeight: Number(listHeight) || DEFAULT_LIST_HEIGHT, onScroll: onPopupScroll ? (event) => onPopupScroll(event) : void 0, children: /* @__PURE__ */ jsx(Inner, { role: "listbox", id: listboxId, "aria-multiselectable": isMultiple || void 0, children: options.map((option, index) => {
   const isSelected = selectedValues.includes(option.value);
   const optionAttrs = Object.fromEntries(Object.entries(option).filter(([key]) => key.startsWith("data-") || key.startsWith("aria-")));
-  return /* @__PURE__ */ jsx(OptionItem, { id: optionDomId(index), role: "option", className: cx("ds-select-item-option", isSelected && "ds-select-item-option-selected", index === activeIndex && "ds-select-item-option-active"), selected: isSelected, "aria-selected": isSelected, "data-testid": "select-option", title: typeof option.title === "string" ? option.title : void 0, text: option.label ?? option.value, style: option.style, disabled: option.disabled, onMouseEnter: () => onOptionActivate(index), onClick: () => onOptionSelect(option), ...optionAttrs }, rowKey ? rowKey(option) : option.value);
+  return /* @__PURE__ */ jsx(
+    OptionItem,
+    {
+      id: optionDomId(index),
+      role: "option",
+      className: cx("ds-select-item-option", isSelected && "ds-select-item-option-selected", index === activeIndex && "ds-select-item-option-active"),
+      selected: isSelected,
+      "aria-selected": isSelected,
+      "data-testid": "select-option",
+      title: typeof option.title === "string" ? option.title : void 0,
+      text: option.children ?? option.label ?? option.value,
+      style: option.style,
+      disabled: option.disabled,
+      onMouseEnter: () => onOptionActivate(index),
+      onClick: () => onOptionSelect(option),
+      ...optionAttrs
+    },
+    rowKey ? rowKey(option) : option.value
+  );
 }) }) }) }) });
 export {
   OptionList

package/dist/utils/helpers.d.ts

@@ -5,5 +5,5 @@ export declare const DEFAULT_LIST_HEIGHT = 256;
 export declare const cx: (...classes: (string | false | undefined)[]) => string;
 /** Normalise a `SelectValue` to an array of raw values. */
 export declare const toArray: (value: SelectValue) => RawValueType[];
-/** Built-in filter: case-insensitive substring on `optionFilterProp` (or label/value). */
+/** Built-in filter: case-insensitive substring on `optionFilterProp` (or label/children/value). */
 export declare const defaultFilter: (optionFilterProp?: string) => FilterOptionFn;

package/dist/utils/helpers.js

@@ -7,7 +7,8 @@ const toArray = (value) => {
   return Array.isArray(value) ? value : [value];
 };
 const defaultFilter = (optionFilterProp) => (input, option) => {
-  const haystack = optionFilterProp === "value" ? String(option.value) : typeof option.label === "string" ? option.label : String(option.value);
+  const candidates = optionFilterProp ? [option[optionFilterProp]] : [option.label, option.children];
+  const haystack = candidates.find((candidate) => typeof candidate === "string") ?? String(option.value);
   return haystack.toLowerCase().includes(input.toLowerCase());
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-select",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "description": "Select UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -42,10 +42,10 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-dropdown": "^1.3.22",
+    "@synerise/ds-dropdown": "^1.3.23",
     "@synerise/ds-form-field": "^1.3.25",
     "@synerise/ds-icon": "^1.18.5",
-    "@synerise/ds-list-item": "^1.6.3",
+    "@synerise/ds-list-item": "^1.6.4",
     "@synerise/ds-loader": "^1.0.18",
     "@synerise/ds-scrollbar": "^1.5.2",
     "@synerise/ds-tooltip": "^1.5.5",
@@ -58,5 +58,5 @@
     "styled-components": "^5.3.3",
     "vitest": "4"
   },
-  "gitHead": "6df24ed12cd5f276d8eccde730591807982e3385"
+  "gitHead": "fbaec1b62812804ecab17db27553c2071c7bad49"
 }