Merge pull request #1808 from epam/fix/picker-input-body-responsiveness

[PickerInput]: Fixed picker input body responsiveness.

changelog.md

@@ -5,6 +5,8 @@
 **What's Fixed**
 * [Button]: fixed `rawProps` typings for `data-*` attributes
 * [Paginator]: fixed `rawProps` typings
+* [PickerInput]: Fixed picker input body responsiveness.
+    * `DropdownContainer` `width` property affects `maxWidth` if `maxWidth` is not provided.
 * [PickerInput]: Fixed clear checked before opening a picker body and if selectAll: false is provided.
     * Added `clearAllChecked()` method to `IDataSourceView` interface to support unchecking all without enabled `selectAll` flag.
     * Reduced amount of loaded data while clearing all checked elements in `cascadeSelection: false` mode.

uui-components/src/overlays/DropdownContainer.tsx

@@ -16,8 +16,8 @@ export interface DropdownContainerProps
     IDropdownBodyProps {
     /** Defines width in 'px' or 'auto'. If 'auto' provided, will be used width of the content. */
     width?: number | 'auto';
-    /** Defines maximum width in 'px'. */
-    maxWidth?: number;
+    /** Defines maximum width in 'px'. If 'auto' provided, will be used width of the content. */
+    maxWidth?: number | 'auto';
     /** Defines height in 'px'. */
     height?: number;
     /** If true, arrow tip will be shown
@@ -79,7 +79,7 @@ export const DropdownContainer = React.forwardRef((props: DropdownContainerProps
                 forwardedRef={ !focusLock && ref as React.ForwardedRef<HTMLDivElement> }
                 cx={ cx(uuiElement.dropdownBody, uuiMarkers.lockFocus, props.cx) }
                 style={ {
-                    ...props.style, minWidth: props.width, minHeight: props.height, maxWidth: props.maxWidth,
+                    ...props.style, minWidth: props.width, minHeight: props.height, maxWidth: props.maxWidth ?? props.width,
                 } }
                 rawProps={ { tabIndex: -1, ...props.rawProps } }
             >

uui/components/filters/FilterPickerBody.tsx

@@ -51,6 +51,7 @@ export function FilterPickerBody<TItem, TId>(props: FilterPickerBodyProps<TItem,
     const renderBody = (bodyProps: DataSourceListProps & Omit<PickerBodyBaseProps, 'rows'>, rows: DataRowProps<TItem, TId>[]) => {
         const renderedDataRows = rows.map((props) => renderRow(props));
         const maxHeight = isMobile() ? document.documentElement.clientHeight : props.dropdownHeight || pickerHeight;
+        const maxWidth = isMobile() ? undefined : 360;
 
         return (
             <>
@@ -59,6 +60,7 @@ export function FilterPickerBody<TItem, TId>(props: FilterPickerBodyProps<TItem,
                     selectionMode={ props.selectionMode }
                     rows={ renderedDataRows }
                     maxHeight={ maxHeight }
+                    maxWidth={ maxWidth }
                     searchSize="36"
                     editMode="dropdown"
                 />

uui/components/overlays/__tests__/__snapshots__/DropdownContainer.test.tsx.snap

@@ -26,7 +26,7 @@ exports[`DropdownContainer should be rendered correctly 2`] = `
   className="uui-dropdown-body -lock-focus root vPadding-18 padding-24 container"
   style={
     Object {
-      "maxWidth": undefined,
+      "maxWidth": 300,
       "minHeight": 600,
       "minWidth": 300,
     }

uui/components/pickers/DataPickerBody.tsx

@@ -15,6 +15,7 @@ export interface DataPickerBodyProps extends PickerBodyBaseProps {
     editMode?: 'dropdown' | 'modal';
     searchSize?: ControlSize;
     selectionMode?: 'single' | 'multi';
+    maxWidth?: number;
 }
 
 export class DataPickerBody extends PickerBodyBase<DataPickerBodyProps> {
@@ -51,7 +52,7 @@ export class DataPickerBody extends PickerBodyBase<DataPickerBodyProps> {
                         </FlexCell>
                     </div>
                 )}
-                <FlexRow key="body" cx={ cx(css.body, css[this.props.editMode], css[this.props.selectionMode]) } rawProps={ { style: { maxHeight: this.props.maxHeight } } }>
+                <FlexRow key="body" cx={ cx(css.body, css[this.props.editMode], css[this.props.selectionMode]) } rawProps={ { style: { maxHeight: this.props.maxHeight, maxWidth: this.props.maxWidth } } }>
                     { this.props.rowsCount > 0 ? (
                         <VirtualList 
                             { ...this.lens.toProps() }

uui/components/pickers/MobileDropdownWrapper.tsx

@@ -13,20 +13,19 @@ interface IMobileDropdownWrapperProps extends IHasCX, IHasRawProps<React.HTMLAtt
     title?: string;
     onKeyDown?(e: React.KeyboardEvent<HTMLElement>): void;
     focusLock?: boolean;
-    width?: number;
+    width?: number | 'auto';
+    maxWidth?: number | 'auto';
 }
 
 export const MobileDropdownWrapper: React.FC<IMobileDropdownWrapperProps> = (props) => {
     const isMobileView = isMobile();
+    const maxWidth = isMobileView ? 'auto' : props.maxWidth;
 
     return (
         <DropdownContainer
             { ...props }
+            maxWidth={ maxWidth }
             cx={ [css.container, props.cx] }
-            rawProps={ props.rawProps }
-            onKeyDown={ props.onKeyDown }
-            focusLock={ props.focusLock }
-            width={ props.width }
         >
             {isMobileView && <DataPickerHeader title={ props.title } close={ props.onClose } />}
 

uui/components/pickers/__tests__/__snapshots__/DataPickerBody.test.tsx.snap

@@ -53,6 +53,7 @@ Array [
       Object {
         "columnGap": undefined,
         "maxHeight": 800,
+        "maxWidth": undefined,
         "rowGap": undefined,
       }
     }
@@ -154,6 +155,7 @@ exports[`DataPickerBody should be rendered with minimum props 1`] = `
     Object {
       "columnGap": undefined,
       "maxHeight": undefined,
+      "maxWidth": undefined,
       "rowGap": undefined,
     }
   }
@@ -187,6 +189,7 @@ exports[`DataPickerBody should be rendered without rows 1`] = `
     Object {
       "columnGap": undefined,
       "maxHeight": undefined,
+      "maxWidth": undefined,
       "rowGap": undefined,
     }
   }

uui/components/pickers/__tests__/__snapshots__/PickerInput.test.tsx.snap

@@ -42,7 +42,7 @@ exports[`PickerInput should open body 1`] = `
   >
     <div
       class="uui-dropdown-body -lock-focus root container container"
-      style="min-width: 360px;"
+      style="min-width: 360px; max-width: 360px;"
       tabindex="-1"
     >
       <div

uui/components/pickers/__tests__/__snapshots__/PickerModal.test.tsx.snap

@@ -131,6 +131,7 @@ exports[`PickerModal should be rendered correctly 1`] = `
         Object {
           "columnGap": undefined,
           "maxHeight": undefined,
+          "maxWidth": undefined,
           "rowGap": undefined,
         }
       }
@@ -524,6 +525,7 @@ exports[`PickerModal should be rendered correctly with maximum props 1`] = `
         Object {
           "columnGap": undefined,
           "maxHeight": undefined,
+          "maxWidth": undefined,
           "rowGap": undefined,
         }
       }

uui/components/tables/ColumnHeaderDropdown/ColumnHeaderDropdown.tsx

@@ -31,7 +31,7 @@ const ColumnHeaderDropdownImpl: React.FC<ColumnHeaderDropdownProps> = (props) =>
         <Dropdown
             renderTarget={ props.renderTarget }
             renderBody={ (dropdownProps) => (
-                <MobileDropdownWrapper width={ 280 } title={ props.title } onClose={ closeDropdown }>
+                <MobileDropdownWrapper width={ 360 } maxWidth="auto" title={ props.title } onClose={ closeDropdown }>
                     {props.isSortable && <SortingPanel sortDirection={ props.sortDirection } onSort={ props.onSort } />}
                     {props.renderFilter(dropdownProps)}
                 </MobileDropdownWrapper>

uui/components/tables/__tests__/__snapshots__/ColumnHeaderDropdown.test.tsx.snap

@@ -39,9 +39,9 @@ Array [
       className="uui-dropdown-body -lock-focus root container container"
       style={
         Object {
-          "maxWidth": undefined,
+          "maxWidth": "auto",
           "minHeight": undefined,
-          "minWidth": 280,
+          "minWidth": 360,
         }
       }
       tabIndex={-1}