twico-ui 1.22.3 → 1.23.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to Twico UI are documented here (newest first). This file is generated automatically on each release by [semantic-release](https://semantic-release.gitbook.io/) from [Conventional Commits](https://www.conventionalcommits.org/) — do not edit it by hand. The same notes appear on each [GitHub Release](https://github.com/EncryptionL/twico-ui/releases).
 
+# [1.23.0](https://github.com/EncryptionL/twico-ui/compare/v1.22.3...v1.23.0) (2026-07-30)
+
+
+### Features
+
+* **combobox:** add wrapOptions to wrap long option labels/descriptions ([#300](https://github.com/EncryptionL/twico-ui/issues/300)) ([f0f247b](https://github.com/EncryptionL/twico-ui/commit/f0f247b75b3ce5bb593bbfd682d5feb4f63065d7))
+
 ## [1.22.3](https://github.com/EncryptionL/twico-ui/compare/v1.22.2...v1.22.3) (2026-07-29)
 
 

package/dist/index.cjs

@@ -5671,6 +5671,10 @@ var COMBO_CSS = `
 .twc-opt__main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
 .twc-opt__label { line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .twc-opt__desc { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* #300: wrapOptions \u2014 let long labels/descriptions wrap onto multiple lines instead of truncating.
+   overflow-wrap: anywhere also breaks a single very long token so it can't overflow the popover edge. */
+.twc-opt[data-wrap="true"] { align-items: flex-start; }
+.twc-opt[data-wrap="true"] .twc-opt__label, .twc-opt[data-wrap="true"] .twc-opt__desc { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
 .twc-opt__check { flex: none; color: var(--color-primary); display: inline-flex; }
 .twc-opt__check svg { width: 16px; height: 16px; }
 .twc-pop__empty { padding: 14px 12px; text-align: center; font-size: var(--text-sm); color: var(--color-text-subtle); }
@@ -5731,8 +5735,9 @@ function Combobox({
   loading = false,
   emptyText = "No results found",
   name,
-  virtualized = false,
+  virtualized: virtualizedProp = false,
   overscan = 8,
+  wrapOptions = false,
   id,
   className = "",
   onFocus,
@@ -5740,6 +5745,8 @@ function Combobox({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-combo-styles", COMBO_CSS);
+  if (virtualizedProp && wrapOptions) warnOnce("combobox-wrap-virtualized", "twico-ui Combobox: `wrapOptions` disables `virtualized` \u2014 wrapped option rows aren't a fixed height.");
+  const virtualized = virtualizedProp && !wrapOptions;
   const groups = React51__namespace.default.useMemo(() => normalizeGroups(options), [options]);
   const flat = React51__namespace.default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
   const autoId = React51__namespace.default.useId();
@@ -5926,6 +5933,7 @@ function Combobox({
         "data-disabled": o.disabled || void 0,
         "data-selected": isSel || void 0,
         "data-active": idx === active || void 0,
+        "data-wrap": wrapOptions || void 0,
         onMouseEnter: () => {
           if (!o.disabled) setActive(idx);
         },