@synerise/ds-select 1.4.0 → 1.5.0

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.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
+
+- **select:** support maxTagCount="responsive" fit-to-width chips ([cb113cf](https://github.com/synerise/synerise-design/commit/cb113cf9f38a7ae112e55a8d159185f128fa2e4a))
+
 # [1.4.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-select@1.3.34...@synerise/ds-select@1.4.0) (2026-07-24)
 
 ### Bug Fixes

package/CLAUDE.md

@@ -18,6 +18,7 @@ src/
  modules.d.ts — imports @testing-library/jest-dom
  hooks/
   useSelectOptions.ts — resolve options (prop → children), client filtering, tags create-row
+  useResponsiveTagCount.ts — maxTagCount="responsive": fit-to-width chip count (ResizeObserver)
  components/
   OptionList.tsx — dropdown overlay: loading / empty / scrollable listbox of options
   SelectorContent.tsx — selector inner content: chips / selected label / placeholder + search input
@@ -86,9 +87,10 @@ Kept so antd-era consumers need no change: `searchValue`, `onClear`, `onClick`,
 `mode`/`options`/`showSearch`/`filterOption`/`allowClear`/`open`/`onChange`/`onSearch`/… surface.
 `SelectHandler` type and the `SelectStyles.Selector` styled export are re-exported for parity.
 
-`maxTagCount` (collapse extra chips into a `+N` overflow chip), `maxTagTextLength` (truncate chip
-labels) and `onPopupScroll` are fully implemented. `listItemHeight`, `dropdownAlign` and
-`defaultActiveFirstOption` are accepted for compatibility but have **no runtime effect**.
+`maxTagCount` (`number | 'responsive'` — collapse extra chips into a `+N` overflow chip, or fit them
+to the selector width on one line), `maxTagTextLength` (truncate chip labels) and `onPopupScroll` are
+fully implemented. `listItemHeight`, `dropdownAlign` and `defaultActiveFirstOption` are accepted for
+compatibility but have **no runtime effect**.
 
 ## Usage patterns
 
@@ -163,6 +165,13 @@ Class hooks are `ds-select-*` (`.ds-select`, `.ds-select-selection-item`, `.ds-s
   selecting an option / scrolling isn't treated as a blur (needed by `subtle-form`'s revert-on-blur).
 - **`readOnly` is implemented via `disabled`** — both flags are ORed into `isDisabled`; the visual
   distinction comes from the `$readOnly` transient prop on `Selector`.
+- **`maxTagCount="responsive"`** — `useResponsiveTagCount` measures an off-flow ghost row
+  (`TagMeasureRow`, one hidden chip per value + a worst-case `+N` chip) rather than the visible
+  chips: a hidden chip would measure 0, and the ghost's width never depends on the count derived
+  from it, so the `ResizeObserver` (on the chip row *and* the ghosts, for font/label changes) can't
+  feed itself. The row switches to `nowrap` and reserves 30 px of caret room unless disabled/readOnly.
+  Unmeasurable layout (SSR, `display: none`, no `ResizeObserver` → `window.resize` fallback) degrades
+  to showing every chip; a lone oversized chip ellipsis-clips instead of collapsing into `+ 1`.
 - **Controlled/uncontrolled** — `value`/`open`/`searchValue` are controlled when defined, else backed
   by internal state; `onSearch` still fires when `searchValue` is controlled.
 - **antd-free; no LESS** — styling is entirely styled-components. The old antd-era LESS

package/dist/Select.d.ts

@@ -42,7 +42,7 @@ declare const SelectInner: React.ForwardRefExoticComponent<{
     showArrow?: boolean;
     suffixIcon?: ReactNode;
     tabIndex?: number;
-    maxTagCount?: number;
+    maxTagCount?: number | "responsive";
     maxTagTextLength?: number;
     maxTagPlaceholder?: ReactNode | ((omittedValues: Array<{
         value: RawValueType;

package/dist/Select.styles.d.ts

@@ -38,7 +38,10 @@ export declare const SearchInputEl: import('styled-components').StyledComponent<
     $overlay?: boolean;
 }, never>;
 /** Wraps chips + the search input for multiple/tags mode. */
-export declare const MultiValueArea: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const MultiValueArea: import('styled-components').StyledComponent<"div", any, {
+    $responsive?: boolean;
+}, never>;
+export declare const TagMeasureRow: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const Chip: import('styled-components').StyledComponent<"span", any, {}, never>;
 export declare const ChipLabel: import('styled-components').StyledComponent<"span", any, {}, never>;
 export declare const ChipRemove: import('styled-components').StyledComponent<"span", any, {}, never>;

package/dist/Select.styles.js

@@ -75,18 +75,22 @@ const SearchInputEl = /* @__PURE__ */ styled.input.withConfig({
 const MultiValueArea = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Selectstyles__MultiValueArea",
   componentId: "sc-n9lk0v-16"
-})(["display:flex;flex-wrap:wrap;align-items:center;gap:4px;flex:1;min-width:0;"]);
+})(["display:flex;flex-wrap:wrap;align-items:center;gap:4px;flex:1;min-width:0;", ""], (props) => props.$responsive && css(["position:relative;flex-wrap:nowrap;overflow:hidden;> .ds-select-selection-item,> .ds-select-selection-overflow{flex:0 0 auto;}> .ds-select-search{flex:1 1 0;min-width:0;}"]));
+const TagMeasureRow = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Selectstyles__TagMeasureRow",
+  componentId: "sc-n9lk0v-17"
+})(["position:absolute;top:0;left:0;width:100%;height:0;display:flex;flex-wrap:nowrap;gap:4px;overflow:hidden;visibility:hidden;pointer-events:none;> *{flex:0 0 auto;}"]);
 const Chip = /* @__PURE__ */ styled.span.withConfig({
   displayName: "Selectstyles__Chip",
-  componentId: "sc-n9lk0v-17"
+  componentId: "sc-n9lk0v-18"
 })(["position:relative;display:inline-flex;align-items:center;box-sizing:border-box;width:max-content;max-width:100%;min-height:24px;padding:0 8px;background:", ";border:none;border-radius:3px;font-size:13px;line-height:1;color:", ";&:hover{background:", ";color:", ";}&:hover .ds-select-selection-item-label{max-width:calc(100% - 24px);}&:hover .ds-select-selection-item-remove{display:inline-flex;}"], (props) => props.theme.palette["grey-200"], (props) => props.theme.palette["grey-600"], (props) => props.theme.palette["grey-300"], (props) => props.theme.palette["grey-800"]);
 const ChipLabel = /* @__PURE__ */ styled.span.withConfig({
   displayName: "Selectstyles__ChipLabel",
-  componentId: "sc-n9lk0v-18"
+  componentId: "sc-n9lk0v-19"
 })(["max-width:100%;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"]);
 const ChipRemove = /* @__PURE__ */ styled.span.withConfig({
   displayName: "Selectstyles__ChipRemove",
-  componentId: "sc-n9lk0v-19"
+  componentId: "sc-n9lk0v-20"
 })(["position:absolute;right:4px;top:50%;transform:translateY(-50%);display:none;align-items:center;justify-content:center;width:24px;height:24px;cursor:pointer;color:", ";"], (props) => props.theme.palette["red-600"]);
 export {
   Arrow,
@@ -108,5 +112,6 @@ export {
   SelectWrapper,
   SelectionItem,
   Selector,
-  SuffixWrapper
+  SuffixWrapper,
+  TagMeasureRow
 };

package/dist/Select.types.d.ts

@@ -85,8 +85,12 @@ export type SelectProps<VT extends SelectValue = SelectValue> = {
     suffixIcon?: ReactNode;
     /** antd parity: tab index forwarded to the selector / search input. */
     tabIndex?: number;
-    /** Max chips rendered in `multiple` / `tags` mode before the rest collapse into an overflow chip. */
-    maxTagCount?: number;
+    /**
+     * Max chips rendered in `multiple` / `tags` mode before the rest collapse into
+     * an overflow chip. `'responsive'` (antd parity) instead fits as many chips as
+     * the selector width allows on a single line and recomputes on resize.
+     */
+    maxTagCount?: number | 'responsive';
     /** Max characters shown per chip label; longer labels are truncated with an ellipsis. */
     maxTagTextLength?: number;
     /**

package/dist/components/SelectorContent.d.ts

@@ -10,7 +10,7 @@ type SelectorContentProps = {
     effectiveQuery: string;
     labelFor: (value: RawValueType) => ReactNode;
     onRemoveValue: (value: RawValueType) => void;
-    maxTagCount?: number;
+    maxTagCount?: number | 'responsive';
     maxTagTextLength?: number;
     maxTagPlaceholder?: ReactNode | ((omittedValues: Array<{
         value: RawValueType;

package/dist/components/SelectorContent.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import Icon, { CloseS } from "@synerise/ds-icon";
-import { SearchInputEl, MultiValueArea, Chip, ChipLabel, ChipRemove, SelectionItem, Placeholder } from "../Select.styles.js";
+import { SearchInputEl, MultiValueArea, TagMeasureRow, Chip, ChipLabel, ChipRemove, SelectionItem, Placeholder } from "../Select.styles.js";
+import { useResponsiveTagCount } from "../hooks/useResponsiveTagCount.js";
 const SelectorContent = ({
   isMultiple,
   showSearch,
@@ -28,9 +29,28 @@ const SelectorContent = ({
   onSearchKeyDown
 }) => {
   const isSingleSearch = !!showSearch && !isMultiple;
+  const isResponsive = maxTagCount === "responsive";
+  const {
+    areaRef,
+    measureRef,
+    visibleCount
+  } = useResponsiveTagCount({
+    enabled: isResponsive && isMultiple,
+    items: selectedValues,
+    reserveInput: !isDisabled
+  });
   const searchInput = /* @__PURE__ */ jsx(SearchInputEl, { ref: inputRef, $overlay: isSingleSearch, className: "ds-select-search", value: effectiveQuery, onChange: onSearchChange, onKeyDown: onSearchKeyDown, placeholder: hasValue ? void 0 : placeholderStr, disabled: isDisabled, autoFocus, maxLength, autoComplete: "off", readOnly: !hasInput, id, role: "combobox", "aria-autocomplete": "list", "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-controls": isOpen ? listboxId : void 0, "aria-activedescendant": isOpen && activeIndex >= 0 ? optionDomId(activeIndex) : void 0 });
   if (isMultiple) {
-    const displayedValues = typeof maxTagCount === "number" ? selectedValues.slice(0, Math.max(maxTagCount, 0)) : selectedValues;
+    const displayCount = (() => {
+      if (isResponsive) {
+        return visibleCount ?? selectedValues.length;
+      }
+      if (typeof maxTagCount === "number") {
+        return Math.max(maxTagCount, 0);
+      }
+      return selectedValues.length;
+    })();
+    const displayedValues = selectedValues.slice(0, displayCount);
     const omittedValues = selectedValues.slice(displayedValues.length);
     const chipLabel = (v) => {
       const label = labelFor(v);
@@ -39,11 +59,16 @@ const SelectorContent = ({
       }
       return label;
     };
-    const overflowContent = typeof maxTagPlaceholder === "function" ? maxTagPlaceholder(omittedValues.map((v) => ({
+    const overflowContentFor = (omitted) => typeof maxTagPlaceholder === "function" ? maxTagPlaceholder(omitted.map((v) => ({
       value: v,
       label: labelFor(v)
-    }))) : maxTagPlaceholder ?? `+ ${omittedValues.length}`;
-    return /* @__PURE__ */ jsxs(MultiValueArea, { children: [
+    }))) : maxTagPlaceholder ?? `+ ${omitted.length}`;
+    const overflowContent = overflowContentFor(omittedValues);
+    return /* @__PURE__ */ jsxs(MultiValueArea, { ref: areaRef, className: "ds-select-selection-list", $responsive: isResponsive, children: [
+      isResponsive && /* @__PURE__ */ jsxs(TagMeasureRow, { ref: measureRef, "aria-hidden": true, children: [
+        selectedValues.map((v) => /* @__PURE__ */ jsx(Chip, { "data-measure-chip": "", children: /* @__PURE__ */ jsx(ChipLabel, { children: chipLabel(v) }) }, v)),
+        /* @__PURE__ */ jsx(Chip, { "data-measure-overflow": "", children: /* @__PURE__ */ jsx(ChipLabel, { children: overflowContentFor(selectedValues) }) })
+      ] }),
       displayedValues.map((v) => /* @__PURE__ */ jsxs(Chip, { className: "ds-select-selection-item", children: [
         /* @__PURE__ */ jsx(ChipLabel, { className: "ds-select-selection-item-label", children: chipLabel(v) }),
         /* @__PURE__ */ jsx(ChipRemove, { className: "ds-select-selection-item-remove", onMouseDown: (e) => {

package/dist/hooks/useResponsiveTagCount.d.ts

@@ -0,0 +1,27 @@
+import { RefObject } from 'react';
+import { RawValueType } from '../Select.types';
+type UseResponsiveTagCountParams = {
+    /** `maxTagCount === 'responsive'` in a multi-value mode. */
+    enabled: boolean;
+    /** Every selected value, in render order — one ghost chip each. */
+    items: RawValueType[];
+    /** Keep room for the search caret (skipped when disabled / readOnly). */
+    reserveInput: boolean;
+};
+type UseResponsiveTagCountResult = {
+    /** Attach to the chip row — its width is the space chips must fit into. */
+    areaRef: RefObject<HTMLDivElement>;
+    /** Attach to the off-flow row holding one ghost chip per value + the overflow chip. */
+    measureRef: RefObject<HTMLDivElement>;
+    /** Chips that fit on one line; `null` while unmeasured (SSR, hidden, zero-width) — render all. */
+    visibleCount: number | null;
+};
+/**
+ * Fit-to-width chip count for `maxTagCount="responsive"` (antd / rc-overflow parity).
+ *
+ * Widths come from an off-flow ghost row rather than the visible chips: hiding a
+ * chip would zero its width, and the ghost's own size never depends on the count
+ * we derive from it — so the ResizeObserver can't feed itself.
+ */
+export declare const useResponsiveTagCount: ({ enabled, items, reserveInput, }: UseResponsiveTagCountParams) => UseResponsiveTagCountResult;
+export {};

package/dist/hooks/useResponsiveTagCount.js

@@ -0,0 +1,72 @@
+import { useRef, useState, useCallback, useEffect, useLayoutEffect } from "react";
+const CHIP_GAP = 4;
+const INPUT_RESERVE = 30;
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const useResponsiveTagCount = ({
+  enabled,
+  items,
+  reserveInput
+}) => {
+  const areaRef = useRef(null);
+  const measureRef = useRef(null);
+  const [visibleCount, setVisibleCount] = useState(null);
+  const itemCount = items.length;
+  const itemsKey = items.join("\0");
+  const measure = useCallback(() => {
+    const area = areaRef.current;
+    const row = measureRef.current;
+    if (!enabled || !area || !row) {
+      return;
+    }
+    const areaWidth = area.clientWidth;
+    if (areaWidth <= 0) {
+      setVisibleCount(null);
+      return;
+    }
+    const ghosts = Array.from(row.children);
+    const widths = ghosts.slice(0, itemCount).map((chip) => chip.offsetWidth);
+    const overflowWidth = ghosts[itemCount]?.offsetWidth ?? 0;
+    const available = areaWidth - (reserveInput ? INPUT_RESERVE : 0);
+    const totalWidth = widths.reduce((sum, width, index) => sum + width + (index > 0 ? CHIP_GAP : 0), 0);
+    if (totalWidth <= available) {
+      setVisibleCount(itemCount);
+      return;
+    }
+    let used = 0;
+    let count = 0;
+    for (let index = 0; index < widths.length; index += 1) {
+      const next = used + widths[index] + (count > 0 ? CHIP_GAP : 0);
+      if (next + CHIP_GAP + overflowWidth > available) {
+        break;
+      }
+      used = next;
+      count += 1;
+    }
+    setVisibleCount(count === 0 && itemCount === 1 ? 1 : count);
+  }, [enabled, itemCount, reserveInput]);
+  useIsomorphicLayoutEffect(() => {
+    if (!enabled) {
+      setVisibleCount(null);
+      return void 0;
+    }
+    measure();
+    if (typeof ResizeObserver === "undefined") {
+      window.addEventListener("resize", measure);
+      return () => window.removeEventListener("resize", measure);
+    }
+    const observer = new ResizeObserver(() => measure());
+    if (areaRef.current) {
+      observer.observe(areaRef.current);
+    }
+    Array.from(measureRef.current?.children ?? []).forEach((ghost) => observer.observe(ghost));
+    return () => observer.disconnect();
+  }, [enabled, measure, itemsKey]);
+  return {
+    areaRef,
+    measureRef,
+    visibleCount
+  };
+};
+export {
+  useResponsiveTagCount
+};

package/package.json

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