@pushwoosh/dumb-components 1.1.157 → 1.1.158

package/Combobox/Combobox.js

@@ -22,7 +22,8 @@ function FreeCombobox({
   autosize,
   hasError,
   width,
-  minWidth
+  minWidth,
+  fullWidth
 }) {
   const inputRef = useRef(null);
   const baseId = useId();
@@ -110,6 +111,7 @@ function FreeCombobox({
     width: width,
     minWidth: minWidth,
     autosize: autosize,
+    fullWidth: fullWidth,
     onShellMouseDown: onShellMouseDown,
     onClose: close,
     showClear: !!(clearable && value),
@@ -165,7 +167,8 @@ function SelectCombobox({
   autosize,
   hasError,
   width,
-  minWidth
+  minWidth,
+  fullWidth
 }) {
   const inputRef = useRef(null);
   const baseId = useId();
@@ -258,6 +261,7 @@ function SelectCombobox({
     width: width,
     minWidth: minWidth,
     autosize: autosize,
+    fullWidth: fullWidth,
     onShellMouseDown: onShellMouseDown,
     onClose: close,
     showClear: !!(clearable && hasValue),

package/Combobox/types.d.ts

@@ -54,6 +54,8 @@ type CommonProps<T> = {
     width?: string;
     /** Minimum CSS width, useful together with `autosize`. */
     minWidth?: string;
+    /** Let the dropdown stretch to the field width instead of capping at the default width (use for wide, full-width fields). */
+    fullWidth?: boolean;
 };
 /**
  * Free-text Combobox: the value is the typed string and `items`/`loadItems`

package/ComboboxMulti/ComboboxMulti.d.ts

@@ -13,4 +13,4 @@ import { type ComboboxMultiProps } from './types';
  *   creatable
  * />
  */
-export declare function ComboboxMulti<T>({ items, loadItems, debounceMs, minChars, value, onChange, onClose, autoFocus, getLabel, getKey: getKeyProp, filter, renderItem, emptyText, loadingText, creatable, onCreate, canCreate, renderCreateLabel, maxValues, placeholder, disabled, loading, clearable, autosize, hasError, width, minWidth, }: ComboboxMultiProps<T>): ReactElement;
+export declare function ComboboxMulti<T>({ items, loadItems, debounceMs, minChars, value, onChange, onClose, autoFocus, getLabel, getKey: getKeyProp, filter, renderItem, emptyText, loadingText, creatable, onCreate, canCreate, renderCreateLabel, maxValues, placeholder, disabled, loading, clearable, autosize, hasError, width, minWidth, fullWidth, }: ComboboxMultiProps<T>): ReactElement;

package/ComboboxMulti/ComboboxMulti.js

@@ -48,7 +48,8 @@ export function ComboboxMulti({
   autosize,
   hasError,
   width,
-  minWidth
+  minWidth,
+  fullWidth
 }) {
   const inputRef = useRef(null);
   const isAsync = !!loadItems;
@@ -180,6 +181,7 @@ export function ComboboxMulti({
     width: width,
     minWidth: minWidth,
     autosize: autosize,
+    fullWidth: fullWidth,
     tightLeft: hasTags,
     onShellMouseDown: onShellMouseDown,
     onClose: close,

package/ComboboxMulti/types.d.ts

@@ -57,5 +57,7 @@ export type ComboboxMultiProps<T> = ItemsSource<T> & GetKeyProp<T> & CreatablePr
     width?: string;
     /** Minimum CSS width, useful together with `autosize`. */
     minWidth?: string;
+    /** Let the dropdown stretch to the field width instead of capping at the default width (use for wide, full-width fields). */
+    fullWidth?: boolean;
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.157",
+  "version": "1.1.158",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",

package/shared/dropdownField/FieldShell.d.ts

@@ -10,6 +10,7 @@ type FieldShellProps = {
     width?: string;
     minWidth?: string;
     autosize?: boolean;
+    fullWidth?: boolean;
     tightLeft?: boolean;
     onShellMouseDown?: (event: MouseEvent<HTMLDivElement>) => void;
     onClose?: () => void;
@@ -33,5 +34,5 @@ type FieldShellProps = {
  * Internal field wrapper shared by the Combobox family: renders the input area with
  * its border/error/loading states and hosts the {@link SuggestionsDropdown}.
  */
-export declare function FieldShell({ children, isOpen, dropdownOpen, isErrored, disabled, loading, width, minWidth, autosize, tightLeft, onShellMouseDown, onClose, showClear, onClear, clearLabel, showChevron, onToggle, dropdownItems, emptyText, loadingText, loadingMore, onLoadMore, createLabel, createActive, onCreate, listboxId, createId, }: FieldShellProps): ReactElement;
+export declare function FieldShell({ children, isOpen, dropdownOpen, isErrored, disabled, loading, width, minWidth, autosize, fullWidth, tightLeft, onShellMouseDown, onClose, showClear, onClear, clearLabel, showChevron, onToggle, dropdownItems, emptyText, loadingText, loadingMore, onLoadMore, createLabel, createActive, onCreate, listboxId, createId, }: FieldShellProps): ReactElement;
 export {};

package/shared/dropdownField/FieldShell.js

@@ -18,6 +18,7 @@ export function FieldShell({
   width,
   minWidth,
   autosize,
+  fullWidth,
   tightLeft,
   onShellMouseDown,
   onClose,
@@ -44,7 +45,8 @@ export function FieldShell({
     floatingStyles
   } = useDropdownPosition({
     isOpen: dropdownOpen,
-    onClickOutside: onClose
+    onClickOutside: onClose,
+    fullWidth
   });
   const {
     zIndex

package/shared/dropdownField/constants.d.ts

@@ -2,6 +2,7 @@ import { Color } from '@pushwoosh/kit-constants';
 export declare const LOADING_BORDER_COLORS: readonly [Color.PRIMARY, Color.BRIGHT, Color.BRAND_GREEN, Color.EXCEPTIONAL];
 export declare const LOADING_BORDER_ANIMATION_MS = 3000;
 export declare const DROPDOWN_MAX_HEIGHT = 280;
-export declare const DROPDOWN_MAX_WIDTH = 320;
+/** Default dropdown width cap. A field wider than this stretches the dropdown to its own width only when the field opts in via `fullWidth`; otherwise the dropdown stays capped here. */
+export declare const DROPDOWN_DEFAULT_WIDTH = 320;
 /** Default debounce (ms) before an async `loadItems` call fires after the query changes. */
 export declare const DEFAULT_DEBOUNCE_MS = 250;

package/shared/dropdownField/constants.js

@@ -2,6 +2,7 @@ import { Color } from '@pushwoosh/kit-constants';
 export const LOADING_BORDER_COLORS = [Color.PRIMARY, Color.BRIGHT, Color.BRAND_GREEN, Color.EXCEPTIONAL];
 export const LOADING_BORDER_ANIMATION_MS = 3000;
 export const DROPDOWN_MAX_HEIGHT = 280;
-export const DROPDOWN_MAX_WIDTH = 320;
+/** Default dropdown width cap. A field wider than this stretches the dropdown to its own width only when the field opts in via `fullWidth`; otherwise the dropdown stays capped here. */
+export const DROPDOWN_DEFAULT_WIDTH = 320;
 /** Default debounce (ms) before an async `loadItems` call fires after the query changes. */
 export const DEFAULT_DEBOUNCE_MS = 250;

package/shared/dropdownField/useDropdownPosition.d.ts

@@ -1,12 +1,15 @@
 type Args = {
     isOpen?: boolean;
     onClickOutside?: () => void;
+    fullWidth?: boolean;
 };
 /**
  * Positions the dropdown relative to the field via floating-ui (flip, offset,
- * width/height sizing) and wires click-outside to `onClickOutside`.
+ * width/height sizing) and wires click-outside to `onClickOutside`. With
+ * `fullWidth` the dropdown stretches to the field width instead of capping at
+ * `DROPDOWN_DEFAULT_WIDTH`.
  */
-export declare function useDropdownPosition({ isOpen, onClickOutside }: Args): {
+export declare function useDropdownPosition({ isOpen, onClickOutside, fullWidth }: Args): {
     setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
     setFloating: (node: HTMLElement | null) => void;
     floatingRef: import("react").MutableRefObject<HTMLElement | null>;

package/shared/dropdownField/useDropdownPosition.js

@@ -1,13 +1,16 @@
 import { autoUpdate, flip, offset, size, useFloating } from '@floating-ui/react-dom';
-import { DROPDOWN_MAX_WIDTH } from './constants';
+import { DROPDOWN_DEFAULT_WIDTH } from './constants';
 import { useOnClickOutside } from '../../hooks';
 /**
  * Positions the dropdown relative to the field via floating-ui (flip, offset,
- * width/height sizing) and wires click-outside to `onClickOutside`.
+ * width/height sizing) and wires click-outside to `onClickOutside`. With
+ * `fullWidth` the dropdown stretches to the field width instead of capping at
+ * `DROPDOWN_DEFAULT_WIDTH`.
  */
 export function useDropdownPosition({
   isOpen,
-  onClickOutside
+  onClickOutside,
+  fullWidth
 }) {
   const {
     refs,
@@ -23,9 +26,11 @@ export function useDropdownPosition({
         availableWidth,
         availableHeight
       }) {
-        const maxWidth = Math.min(DROPDOWN_MAX_WIDTH, availableWidth);
+        const fieldWidth = rects.reference.width;
+        const maxWidth = fullWidth ? Math.min(Math.max(fieldWidth, DROPDOWN_DEFAULT_WIDTH), availableWidth) : Math.min(DROPDOWN_DEFAULT_WIDTH, availableWidth);
+        const minWidth = Math.min(fieldWidth, maxWidth);
         Object.assign(elements.floating.style, {
-          minWidth: `${Math.min(rects.reference.width, maxWidth)}px`,
+          minWidth: `${minWidth}px`,
           maxWidth: `${maxWidth}px`,
           maxHeight: `${Math.max(0, availableHeight - 8)}px`
         });