twico-ui 1.22.2 → 1.23.0

package/dist/index.d.cts

@@ -1597,6 +1597,10 @@ interface ComboboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>
   virtualized?: boolean;
   /** Extra option rows rendered above/below the viewport when `virtualized`, to smooth fast scrolling. @default 8 */
   overscan?: number;
+  /** Let long option labels/descriptions wrap onto multiple lines instead of truncating to one line with an
+   *  ellipsis — useful when options share a long prefix and differ only in a truncated tail. Takes precedence
+   *  over `virtualized` (wrapped rows aren't a fixed height). @default false */
+  wrapOptions?: boolean;
   /** Composed with the field's open-on-focus behavior — your handler runs first. */
   onFocus?: React.FocusEventHandler<HTMLInputElement>;
   /** Composed with the field's keyboard navigation (Arrows/Enter/Escape) — your handler runs first; call `event.preventDefault()` to suppress it. */

package/dist/index.d.ts

@@ -1597,6 +1597,10 @@ interface ComboboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>
   virtualized?: boolean;
   /** Extra option rows rendered above/below the viewport when `virtualized`, to smooth fast scrolling. @default 8 */
   overscan?: number;
+  /** Let long option labels/descriptions wrap onto multiple lines instead of truncating to one line with an
+   *  ellipsis — useful when options share a long prefix and differ only in a truncated tail. Takes precedence
+   *  over `virtualized` (wrapped rows aren't a fixed height). @default false */
+  wrapOptions?: boolean;
   /** Composed with the field's open-on-focus behavior — your handler runs first. */
   onFocus?: React.FocusEventHandler<HTMLInputElement>;
   /** Composed with the field's keyboard navigation (Arrows/Enter/Escape) — your handler runs first; call `event.preventDefault()` to suppress it. */

package/dist/index.mjs

@@ -5650,6 +5650,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); }
@@ -5710,8 +5714,9 @@ function Combobox({
   loading = false,
   emptyText = "No results found",
   name,
-  virtualized = false,
+  virtualized: virtualizedProp = false,
   overscan = 8,
+  wrapOptions = false,
   id,
   className = "",
   onFocus,
@@ -5719,6 +5724,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__default.useMemo(() => normalizeGroups(options), [options]);
   const flat = React51__default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
   const autoId = React51__default.useId();
@@ -5905,6 +5912,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);
         },
@@ -9340,6 +9348,7 @@ function Datatable({
     }
   };
   const stateReadyRef = React51__default.useRef(false);
+  const stateRestoredRef = React51__default.useRef(false);
   const onStateChangeRef = React51__default.useRef(onStateChange);
   onStateChangeRef.current = onStateChange;
   React51__default.useEffect(() => {
@@ -9355,7 +9364,7 @@ function Datatable({
     }
     return void 0;
   }, [filters, sort, quick, pageVal, sizeVal, order, widths, hidden, pins, density, fWidths, fPanelSize, stateKey]);
-  React51__default.useEffect(() => {
+  const restoreState = () => {
     let saved = null;
     if (stateKey) {
       try {
@@ -9366,8 +9375,22 @@ function Datatable({
     }
     if (!saved && initialState) saved = initialState;
     if (saved) applyState(saved);
-    stateReadyRef.current = true;
+    stateRestoredRef.current = true;
+  };
+  React51__default.useEffect(() => {
+    if (columns.length) {
+      restoreState();
+      stateReadyRef.current = true;
+    }
+    return () => {
+      stateReadyRef.current = false;
+    };
   }, []);
+  React51__default.useEffect(() => {
+    if (stateRestoredRef.current || !columns.length) return;
+    restoreState();
+    stateReadyRef.current = true;
+  }, [columns.length]);
   const rootRef = React51__default.useRef(null);
   const [compact, setCompact] = React51__default.useState(false);
   React51__default.useEffect(() => {
@@ -9440,20 +9463,19 @@ function Datatable({
   React51__default.useEffect(() => {
     setOrder((prev) => mergeColOrder(prev, columns.map((c) => c.field).filter(Boolean)));
   }, [columns]);
-  const densitySyncedRef = React51__default.useRef(false);
+  const densityPropRef = React51__default.useRef(densityProp);
   React51__default.useEffect(() => {
-    if (densitySyncedRef.current) setDensity(densityProp);
-    else densitySyncedRef.current = true;
+    if (densityPropRef.current === densityProp) return;
+    densityPropRef.current = densityProp;
+    setDensity(densityProp);
   }, [densityProp]);
   React51__default.useEffect(() => {
     setAggOn(showAggregation);
   }, [showAggregation]);
-  const pageSizeSyncedRef = React51__default.useRef(false);
+  const pageSizePropRef = React51__default.useRef(pageSize);
   React51__default.useEffect(() => {
-    if (!pageSizeSyncedRef.current) {
-      pageSizeSyncedRef.current = true;
-      return;
-    }
+    if (pageSizePropRef.current === pageSize) return;
+    pageSizePropRef.current = pageSize;
     if (pageSizeControlled) return;
     setInternalRpp(pageSize > 0 ? pageSize : 10);
     setInternalPage(0);