@patternfly/react-core 5.0.0-alpha.6 → 5.0.0-alpha.8

package/src/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx

@@ -0,0 +1,140 @@
+import React from 'react';
+import {
+  Dropdown,
+  DropdownToggle,
+  DropdownToggleCheckbox,
+  DropdownItem,
+  DropdownSeparator
+} from '@patternfly/react-core';
+
+export const DropdownSplitButtonProgressCheckbox: React.FunctionComponent = () => {
+  const [isOpen1, setIsOpen1] = React.useState(false);
+  const [isOpen2, setIsOpen2] = React.useState(false);
+
+  const [isChecked1, setIsChecked1] = React.useState(false);
+  const [isChecked2, setIsChecked2] = React.useState(false);
+
+  const [isTimedOut1, setIsTimedOut1] = React.useState(true);
+  const [isTimedOut2, setIsTimedOut2] = React.useState(true);
+
+  const onToggle1 = (isOpen: boolean) => {
+    setIsOpen1(isOpen);
+  };
+
+  const onToggle2 = (isOpen: boolean) => {
+    setIsOpen2(isOpen);
+  };
+
+  const showProgressIcon1 = () => {
+    setIsTimedOut1(false);
+    setTimeout(() => setIsTimedOut1(true), 3000);
+  };
+
+  const showProgressIcon2 = () => {
+    setIsTimedOut2(false);
+    setTimeout(() => setIsTimedOut2(true), 3000);
+  };
+
+  const onFocus1 = () => {
+    const element = document.getElementById('toggle-split-button-progress');
+    element.focus();
+  };
+
+  const onFocus2 = () => {
+    const element = document.getElementById('toggle-split-button-progress-text');
+    element.focus();
+  };
+
+  const onChange1 = (checked: boolean) => {
+    setIsChecked1(checked);
+    showProgressIcon1();
+  };
+
+  const onChange2 = (checked: boolean) => {
+    setIsChecked2(checked);
+    showProgressIcon2();
+  };
+
+  const onSelect1 = () => {
+    setIsOpen1(false);
+    onFocus1();
+  };
+
+  const onSelect2 = () => {
+    setIsOpen2(false);
+    onFocus2();
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="link">Link</DropdownItem>,
+    <DropdownItem key="action" component="button">
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" isDisabled href="www.google.com">
+      Disabled link
+    </DropdownItem>,
+    <DropdownItem
+      key="disabled action"
+      isAriaDisabled
+      component="button"
+      tooltip="Tooltip for disabled item"
+      tooltipProps={{ position: 'top' }}
+    >
+      Disabled action
+    </DropdownItem>,
+    <DropdownSeparator key="separator" />,
+    <DropdownItem key="separated link">Separated link</DropdownItem>,
+    <DropdownItem key="separated action" component="button">
+      Separated action
+    </DropdownItem>
+  ];
+
+  return (
+    <>
+      <Dropdown
+        onSelect={onSelect1}
+        toggle={
+          <DropdownToggle
+            splitButtonItems={[
+              <DropdownToggleCheckbox
+                onChange={onChange1}
+                isChecked={isChecked1}
+                isInProgress={!isTimedOut1}
+                id="split-button-progress-toggle-checkbox"
+                key="split-progress-checkbox"
+                aria-label="Select all"
+              />
+            ]}
+            onToggle={onToggle1}
+            id="toggle-split-button-progress"
+          />
+        }
+        isOpen={isOpen1}
+        dropdownItems={dropdownItems}
+      />{' '}
+      <Dropdown
+        onSelect={onSelect2}
+        toggle={
+          <DropdownToggle
+            splitButtonItems={[
+              <DropdownToggleCheckbox
+                onChange={onChange2}
+                isChecked={isChecked2}
+                isInProgress={!isTimedOut2}
+                id="split-button-progress-text-checkbox"
+                key="split-progress-checkbox"
+                aria-label="Select all"
+              >
+                10 selected
+              </DropdownToggleCheckbox>
+            ]}
+            onToggle={onToggle2}
+            id="toggle-split-button-progress-text"
+          />
+        }
+        isOpen={isOpen2}
+        dropdownItems={dropdownItems}
+      />
+    </>
+  );
+};

package/src/components/DualListSelector/DualListSelectorPane.tsx

@@ -13,7 +13,7 @@ import { SearchInput } from '../SearchInput';
  * such as sorting, can also be passed into this sub-component.
  */
 
-export interface DualListSelectorPaneProps {
+export interface DualListSelectorPaneProps extends Omit<React.HTMLProps<HTMLDivElement>, 'title'> {
   /** Additional classes applied to the dual list selector pane. */
   className?: string;
   /** A dual list selector list or dual list selector tree to be rendered in the pane. */
@@ -65,6 +65,8 @@ export interface DualListSelectorPaneProps {
   searchInputAriaLabel?: string;
   /** @hide Callback for updating the filtered options in DualListSelector. To be used when isSearchable is true. */
   onFilterUpdate?: (newFilteredOptions: React.ReactNode[], paneType: string, isSearchReset: boolean) => void;
+  /** Minimum height of the list of options rendered in the pane. **/
+  listMinHeight?: string;
 }
 
 export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneProps> = ({
@@ -87,13 +89,14 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
   filterOption,
   id = getUniqueId('dual-list-selector-pane'),
   isDisabled = false,
+  listMinHeight,
   ...props
 }: DualListSelectorPaneProps) => {
   const [input, setInput] = React.useState('');
   const { isTree } = React.useContext(DualListSelectorContext);
 
   // only called when search input is dynamically built
-  const onChange = (newValue: string, e: React.FormEvent<HTMLInputElement>) => {
+  const onChange = (e: React.FormEvent<HTMLInputElement>, newValue: string) => {
     let filtered: React.ReactNode[];
     if (isTree) {
       filtered = options
@@ -165,7 +168,7 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
                 <SearchInput
                   onChange={isDisabled ? undefined : onChange}
                   onClear={
-                    onSearchInputClear ? onSearchInputClear : e => onChange('', e as React.FormEvent<HTMLInputElement>)
+                    onSearchInputClear ? onSearchInputClear : e => onChange(e as React.FormEvent<HTMLInputElement>, '')
                   }
                   isDisabled={isDisabled}
                   aria-label={searchInputAriaLabel}
@@ -198,12 +201,21 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
             displayOption={displayOption}
             id={`${id}-list`}
             isDisabled={isDisabled}
+            {...(listMinHeight && {
+              style: { '--pf-c-dual-list-selector__menu--MinHeight': listMinHeight } as React.CSSProperties
+            })}
           >
             {children}
           </DualListSelectorListWrapper>
         )}
         {isTree && (
-          <DualListSelectorListWrapper aria-labelledby={`${id}-status`} id={`${id}-list`}>
+          <DualListSelectorListWrapper
+            aria-labelledby={`${id}-status`}
+            id={`${id}-list`}
+            {...(listMinHeight && {
+              style: { '--pf-c-dual-list-selector__menu--MinHeight': listMinHeight } as React.CSSProperties
+            })}
+          >
             {options.length > 0 ? (
               <DualListSelectorList>
                 <DualListSelectorTree

package/src/components/DualListSelector/examples/DualListSelector.md

@@ -20,6 +20,7 @@ import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-ico
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-asc-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 ## Examples
 

package/src/components/DualListSelector/examples/DualListSelectorComposable.tsx

@@ -8,13 +8,20 @@ import {
   DualListSelectorListItem,
   DualListSelectorControlsWrapper,
   DualListSelectorControl,
-  SearchInput
+  SearchInput,
+  Title,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateIcon,
+  EmptyStateBody,
+  EmptyStatePrimary
 } from '@patternfly/react-core';
 import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-asc-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 interface Option {
   text: string;
@@ -86,25 +93,23 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
     }
   };
 
-  // builds a search input - used in each dual list selector pane
-  const buildSearchInput = (isAvailable: boolean) => {
-    const onChange = (value: string) => {
-      isAvailable ? setAvailableFilter(value) : setChosenFilter(value);
-      const toFilter = isAvailable ? [...availableOptions] : [...chosenOptions];
-      toFilter.forEach(option => {
-        option.isVisible = value === '' || option.text.toLowerCase().includes(value.toLowerCase());
-      });
-    };
-
-    return (
-      <SearchInput
-        value={isAvailable ? availableFilter : chosenFilter}
-        onChange={onChange}
-        onClear={() => onChange('')}
-      />
-    );
+  const onFilterChange = (value: string, isAvailable: boolean) => {
+    isAvailable ? setAvailableFilter(value) : setChosenFilter(value);
+    const toFilter = isAvailable ? [...availableOptions] : [...chosenOptions];
+    toFilter.forEach(option => {
+      option.isVisible = value === '' || option.text.toLowerCase().includes(value.toLowerCase());
+    });
   };
 
+  // builds a search input - used in each dual list selector pane
+  const buildSearchInput = (isAvailable: boolean) => (
+    <SearchInput
+      value={isAvailable ? availableFilter : chosenFilter}
+      onChange={(_event, value) => onFilterChange(value, isAvailable)}
+      onClear={() => onFilterChange('', isAvailable)}
+    />
+  );
+
   // builds a sort control - passed to both dual list selector panes
   const buildSort = (isAvailable: boolean) => {
     const onSort = () => {
@@ -132,6 +137,21 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
     );
   };
 
+  const buildEmptyState = (isAvailable: boolean) => (
+    <EmptyState variant={EmptyStateVariant.small}>
+      <EmptyStateIcon icon={SearchIcon} />
+      <Title headingLevel="h4" size="md">
+        No results found
+      </Title>
+      <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
+      <EmptyStatePrimary>
+        <Button variant="link" onClick={() => onFilterChange('', isAvailable)}>
+          Clear all filters
+        </Button>
+      </EmptyStatePrimary>
+    </EmptyState>
+  );
+
   return (
     <DualListSelector>
       <DualListSelectorPane
@@ -141,21 +161,27 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
         } options selected`}
         searchInput={buildSearchInput(true)}
         actions={[buildSort(true)]}
+        listMinHeight="300px"
       >
-        <DualListSelectorList>
-          {availableOptions.map((option, index) =>
-            option.isVisible ? (
-              <DualListSelectorListItem
-                key={index}
-                isSelected={option.selected}
-                id={`composable-available-option-${index}`}
-                onOptionSelect={e => onOptionSelect(e, index, false)}
-              >
-                {option.text}
-              </DualListSelectorListItem>
-            ) : null
-          )}
-        </DualListSelectorList>
+        {availableFilter !== '' &&
+          availableOptions.filter(option => option.isVisible).length === 0 &&
+          buildEmptyState(true)}
+        {availableOptions.filter(option => option.isVisible).length > 0 && (
+          <DualListSelectorList>
+            {availableOptions.map((option, index) =>
+              option.isVisible ? (
+                <DualListSelectorListItem
+                  key={index}
+                  isSelected={option.selected}
+                  id={`composable-available-option-${index}`}
+                  onOptionSelect={e => onOptionSelect(e, index, false)}
+                >
+                  {option.text}
+                </DualListSelectorListItem>
+              ) : null
+            )}
+          </DualListSelectorList>
+        )}
       </DualListSelectorPane>
       <DualListSelectorControlsWrapper>
         <DualListSelectorControl
@@ -199,21 +225,25 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
         searchInput={buildSearchInput(false)}
         actions={[buildSort(false)]}
         isChosen
+        listMinHeight="300px"
       >
-        <DualListSelectorList>
-          {chosenOptions.map((option, index) =>
-            option.isVisible ? (
-              <DualListSelectorListItem
-                key={index}
-                isSelected={option.selected}
-                id={`composable-chosen-option-${index}`}
-                onOptionSelect={e => onOptionSelect(e, index, true)}
-              >
-                {option.text}
-              </DualListSelectorListItem>
-            ) : null
-          )}
-        </DualListSelectorList>
+        {chosenFilter !== '' && chosenOptions.filter(option => option.isVisible).length === 0 && buildEmptyState(false)}
+        {chosenOptions.filter(option => option.isVisible).length > 0 && (
+          <DualListSelectorList>
+            {chosenOptions.map((option, index) =>
+              option.isVisible ? (
+                <DualListSelectorListItem
+                  key={index}
+                  isSelected={option.selected}
+                  id={`composable-chosen-option-${index}`}
+                  onOptionSelect={e => onOptionSelect(e, index, true)}
+                >
+                  {option.text}
+                </DualListSelectorListItem>
+              ) : null
+            )}
+          </DualListSelectorList>
+        )}
       </DualListSelectorPane>
     </DualListSelector>
   );

package/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx

@@ -7,12 +7,20 @@ import {
   DualListSelectorControl,
   DualListSelectorTree,
   DualListSelectorTreeItemData,
-  SearchInput
+  SearchInput,
+  Title,
+  Button,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateIcon,
+  EmptyStateBody,
+  EmptyStatePrimary
 } from '@patternfly/react-core';
 import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 interface FoodNode {
   id: string;
@@ -161,7 +169,11 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
     const onChange = value => (isChosen ? setChosenFilter(value) : setAvailableFilter(value));
 
     return (
-      <SearchInput value={isChosen ? chosenFilter : availableFilter} onChange={onChange} onClear={() => onChange('')} />
+      <SearchInput
+        value={isChosen ? chosenFilter : availableFilter}
+        onChange={(_event, value) => onChange(value)}
+        onClear={() => onChange('')}
+      />
     );
   };
 
@@ -235,19 +247,37 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
       isChosen ? chosenLeafIds.includes(id) : !chosenLeafIds.includes(id)
     ).length;
     const status = `${numSelected} of ${numOptions} options selected`;
+    const filterApplied = isChosen ? chosenFilter !== '' : availableFilter !== '';
     return (
       <DualListSelectorPane
         title={isChosen ? 'Chosen' : 'Available'}
         status={status}
         searchInput={buildSearchInput(isChosen)}
         isChosen={isChosen}
+        listMinHeight="300px"
       >
-        <DualListSelectorList>
-          <DualListSelectorTree
-            data={options}
-            onOptionCheck={(e, isChecked, itemData) => onOptionCheck(e, isChecked, itemData, isChosen)}
-          />
-        </DualListSelectorList>
+        {filterApplied && options.length === 0 && (
+          <EmptyState variant={EmptyStateVariant.small}>
+            <EmptyStateIcon icon={SearchIcon} />
+            <Title headingLevel="h4" size="md">
+              No results found
+            </Title>
+            <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
+            <EmptyStatePrimary>
+              <Button variant="link" onClick={() => (isChosen ? setChosenFilter('') : setAvailableFilter(''))}>
+                Clear all filters
+              </Button>
+            </EmptyStatePrimary>
+          </EmptyState>
+        )}
+        {options.length > 0 && (
+          <DualListSelectorList>
+            <DualListSelectorTree
+              data={options}
+              onOptionCheck={(e, isChecked, itemData) => onOptionCheck(e, isChecked, itemData, isChosen)}
+            />
+          </DualListSelectorList>
+        )}
       </DualListSelectorPane>
     );
   };

package/src/components/EmptyState/EmptyStatePrimary.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/components/EmptyState/empty-state';
 
 export interface EmptyStatePrimaryProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the EmptyStatePrimary */
@@ -14,7 +13,7 @@ export const EmptyStatePrimary: React.FunctionComponent<EmptyStatePrimaryProps>
   className = '',
   ...props
 }: EmptyStatePrimaryProps) => (
-  <div className={css(styles.emptyStatePrimary, className)} {...props}>
+  <div className={css(className)} {...props}>
     {children}
   </div>
 );

package/src/components/EmptyState/EmptyStateSecondaryActions.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/components/EmptyState/empty-state';
-
 export interface EmptyStateSecondaryActionsProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the EmptyState */
   children?: React.ReactNode;
@@ -13,7 +11,7 @@ export const EmptyStateSecondaryActions: React.FunctionComponent<EmptyStateSecon
   className = '',
   ...props
 }: EmptyStateSecondaryActionsProps) => (
-  <div className={css(styles.emptyStateSecondary, className)} {...props}>
+  <div className={css(className)} {...props}>
     {children}
   </div>
 );

package/src/components/EmptyState/__tests__/EmptyState.test.tsx

@@ -70,10 +70,11 @@ describe('EmptyState', () => {
     expect(screen.getByTestId('body-test-id')).toHaveClass('custom-empty-state-body pf-c-empty-state__body');
   });
 
-  test('Secondary Action', () => {
+  // TODO: update this with issue #8555
+  xtest('Secondary Action', () => {
     render(<EmptyStateSecondaryActions className="custom-empty-state-secondary" data-testid="actions-test-id" />);
     expect(screen.getByTestId('actions-test-id')).toHaveClass(
-      'custom-empty-state-secondary pf-c-empty-state__secondary'
+      'pf-c-empty-state__secondary'
     );
   });
 
@@ -96,7 +97,8 @@ describe('EmptyState', () => {
     expect(container.querySelector('svg')).toBeInTheDocument();
   });
 
-  test('Primary div', () => {
+  // TODO: update this with issue #8555
+  xtest('Primary div', () => {
     render(
       <EmptyStatePrimary data-testid="primary-test-id">
         <Button variant="link">Link</Button>

package/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStatePrimary.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`EmptyStatePrimary should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-empty-state__primary ''"
+    class="''"
   >
     <div>
       ReactNode

package/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStateSecondaryActions.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`EmptyStateSecondaryActions should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-empty-state__secondary ''"
+    class="''"
   >
     ReactNode
   </div>

package/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap

@@ -53,7 +53,7 @@ exports[`EmptyState Main 1`] = `
         New HTTP Proxy
       </button>
       <div
-        class="pf-c-empty-state__secondary"
+        class=""
       >
         <button
           aria-disabled="false"

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -4,6 +4,8 @@ import { css } from '@patternfly/react-styles';
 import lineClamp from '@patternfly/react-tokens/dist/esm/c_expandable_section_m_truncate__content_LineClamp';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import { PickOptional } from '../../helpers/typeUtils';
+import { debounce } from '../../helpers/util';
+import { getResizeObserver } from '../../helpers/resizeObserver';
 
 export enum ExpandableSectionVariant {
   default = 'default',
@@ -61,6 +63,8 @@ export interface ExpandableSectionProps extends React.HTMLProps<HTMLDivElement>
 
 interface ExpandableSectionState {
   isExpanded: boolean;
+  hasToggle: boolean;
+  previousWidth: number;
 }
 
 const setLineClamp = (lines: number, element: HTMLDivElement) => {
@@ -77,11 +81,15 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
     super(props);
 
     this.state = {
-      isExpanded: props.isExpanded
+      isExpanded: props.isExpanded,
+      hasToggle: true,
+      previousWidth: undefined
     };
   }
 
   expandableContentRef = React.createRef<HTMLDivElement>();
+  observer: any = () => {};
+
   static defaultProps: PickOptional<ExpandableSectionProps> = {
     className: '',
     toggleText: '',
@@ -114,9 +122,16 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
   }
 
   componentDidMount() {
-    if (this.props.variant === ExpandableSectionVariant.truncate && this.props.truncateMaxLines) {
+    if (this.props.variant === ExpandableSectionVariant.truncate) {
       const expandableContent = this.expandableContentRef.current;
-      setLineClamp(this.props.truncateMaxLines, expandableContent);
+      this.setState({ previousWidth: expandableContent.offsetWidth });
+      this.observer = getResizeObserver(expandableContent, this.handleResize, false);
+
+      if (this.props.truncateMaxLines) {
+        setLineClamp(this.props.truncateMaxLines, expandableContent);
+      }
+
+      this.checkToggleVisibility();
     }
   }
 
@@ -127,9 +142,38 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
     ) {
       const expandableContent = this.expandableContentRef.current;
       setLineClamp(this.props.truncateMaxLines, expandableContent);
+      this.checkToggleVisibility();
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.props.variant === ExpandableSectionVariant.truncate) {
+      this.observer();
     }
   }
 
+  checkToggleVisibility = () => {
+    if (this.expandableContentRef?.current) {
+      const maxLines = this.props.truncateMaxLines || parseInt(lineClamp.value);
+      const totalLines =
+        this.expandableContentRef.current.scrollHeight /
+        parseInt(getComputedStyle(this.expandableContentRef.current).lineHeight);
+
+      this.setState({
+        hasToggle: totalLines > maxLines
+      });
+    }
+  };
+
+  resize = () => {
+    const { offsetWidth } = this.expandableContentRef.current;
+    if (this.state.previousWidth !== offsetWidth) {
+      this.setState({ previousWidth: offsetWidth });
+      this.checkToggleVisibility();
+    }
+  };
+  handleResize = debounce(this.resize, 250);
+
   render() {
     const {
       onToggle: onToggleProp,
@@ -210,7 +254,7 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
         >
           {children}
         </div>
-        {variant === ExpandableSectionVariant.truncate && expandableToggle}
+        {variant === ExpandableSectionVariant.truncate && this.state.hasToggle && expandableToggle}
       </div>
     );
   }

package/src/components/FileUpload/FileUpload.tsx

@@ -64,7 +64,7 @@ export interface FileUploadProps
   // Props available in FileUpload but not FileUploadField:
 
   /** Optional extra props to customize react-dropzone. */
-  dropzoneProps?: DropzoneOptions;
+  dropzoneProps?: Partial<DropzoneOptions>;
   /** Clear button was clicked. */
   onClearClick?: React.MouseEventHandler<HTMLButtonElement>;
   /** On data changed - if type='text' or type='dataURL' and file was loaded it will call this method */