@patternfly/react-core 6.0.0-alpha.19 → 6.0.0-alpha.20

package/src/components/DragDrop/examples/DragDropBasic.tsx

@@ -20,14 +20,14 @@ const getItems = (count: number) =>
   }));
 
 const reorder = (list: ItemType[], startIndex: number, endIndex: number) => {
-  const result = list;
+  const result = [...list];
   const [removed] = result.splice(startIndex, 1);
   result.splice(endIndex, 0, removed);
   return result;
 };
 
 export const DragDropBasic: React.FunctionComponent = () => {
-  const [items, setItems] = React.useState(getItems(10));
+  const [items, setItems] = React.useState<ItemType[]>(getItems(10));
 
   function onDrop(source: SourceType, dest: DestinationType) {
     if (dest) {
@@ -42,8 +42,8 @@ export const DragDropBasic: React.FunctionComponent = () => {
   return (
     <DragDrop onDrop={onDrop}>
       <Droppable>
-        {items.map(({ content }, i) => (
-          <Draggable key={i} style={{ padding: '8px' }}>
+        {items.map(({ id, content }) => (
+          <Draggable key={id} style={{ padding: '8px' }}>
             {content}
           </Draggable>
         ))}

package/src/components/DragDrop/examples/DragDropMultipleLists.tsx

@@ -11,6 +11,11 @@ interface SourceType {
   index: number;
 }
 
+interface MultipleListState {
+  items1: ItemType[];
+  items2: ItemType[];
+}
+
 interface DestinationType extends SourceType {}
 
 const getItems = (count: number, startIndex: number) =>
@@ -35,7 +40,7 @@ const move = (source: ItemType[], destination: ItemType[], sourceIndex: number,
 };
 
 export const DragDropMultipleLists: React.FunctionComponent = () => {
-  const [items, setItems] = React.useState({
+  const [items, setItems] = React.useState<MultipleListState>({
     items1: getItems(10, 0),
     items2: getItems(5, 10)
   });
@@ -84,7 +89,7 @@ export const DragDropMultipleLists: React.FunctionComponent = () => {
         {Object.entries(items).map(([key, subitems]) => (
           <SplitItem key={key} style={{ flex: 1 }}>
             <Droppable zone="multizone" droppableId={key}>
-              {subitems.map(({ id, content }) => (
+              {(subitems as ItemType[]).map(({ id, content }) => (
                 <Draggable key={id} style={{ padding: '8px' }}>
                   {content}
                 </Draggable>

package/src/components/DragDrop/index.ts

@@ -1,3 +1,4 @@
 export * from './DragDrop';
 export * from './Draggable';
 export * from './Droppable';
+export * from './DroppableContext';

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

@@ -87,6 +87,8 @@ The dual list selector can also be built in a composable manner to make customiz
 
 ### Composable with drag and drop
 
+Note: There is a new recommended drag and drop implementation with full keyboard functionality, which replaces this implementation. To adhere to our new recommendations, refer to the [drag and drop demos](/components/drag-and-drop/react-next-demos).
+
 This example only allows reordering the contents of the "chosen" pane with drag and drop. To make a pane able to be reordered:
 
 - wrap the `DualListSelectorPane` in a `DragDrop` component
@@ -99,7 +101,7 @@ This example only allows reordering the contents of the "chosen" pane with drag
   - define an `onDrag` callback which ensures that the drag event will not cross hairs with the `onOptionSelect` click
     event set on the option. Note: the `ignoreNextOptionSelect` state value is used to prevent selection while dragging.
 
-Note: Keyboard accessibility and screen reader accessibility for the `DragDrop` component are still in development.
+Keyboard and screen reader accessibility for the `<DragDrop>` component is still in development.
 
 ```ts file="DualListSelectorComposableDragDrop.tsx"
 

package/src/components/DualListSelector/index.ts

@@ -1,7 +1,9 @@
 export * from './DualListSelector';
+export * from './DualListSelectorContext';
 export * from './DualListSelectorControl';
 export * from './DualListSelectorControlsWrapper';
 export * from './DualListSelectorPane';
 export * from './DualListSelectorList';
 export * from './DualListSelectorListItem';
 export * from './DualListSelectorTree';
+export * from './DualListSelectorContext';

package/src/components/FileUpload/FileUploadField.tsx

@@ -37,6 +37,8 @@ export interface FileUploadFieldProps extends Omit<React.HTMLProps<HTMLDivElemen
   hideDefaultPreview?: boolean;
   /** Unique id for the text area. Also used to generate ids for accessible labels. */
   id: string;
+  /** Name property for the text input. */
+  name?: string;
   /** Flag to disable the clear button. */
   isClearButtonDisabled?: boolean;
   /** Flag to show if the field is disabled. */
@@ -84,6 +86,7 @@ export interface FileUploadFieldProps extends Omit<React.HTMLProps<HTMLDivElemen
 
 export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
   id,
+  name,
   type,
   value = '',
   filename = '',
@@ -135,7 +138,7 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
               readOnlyVariant="default" // Always read-only regardless of isReadOnly prop (which is just for the TextArea)
               isDisabled={isDisabled}
               id={`${id}-filename`}
-              name={`${id}-filename`}
+              name={name || `${id}-filename`}
               aria-label={filenameAriaLabel}
               placeholder={filenamePlaceholder}
               aria-describedby={`${id}-browse-button`}
@@ -172,7 +175,6 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
             resizeOrientation={TextAreResizeOrientation.vertical}
             validated={validated}
             id={id}
-            name={id}
             aria-label={ariaLabel}
             value={value as string}
             onChange={onTextAreaChange}

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

@@ -76,7 +76,6 @@ exports[`simple fileupload 1`] = `
           aria-invalid="false"
           aria-label="File upload"
           id="simple-text-file"
-          name="simple-text-file"
           placeholder=""
         />
       </span>

package/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap

@@ -74,7 +74,6 @@ exports[`simple fileuploadfield 1`] = `
           aria-invalid="false"
           aria-label="File upload"
           id="custom-file-upload"
-          name="custom-file-upload"
           placeholder=""
         />
       </span>

package/src/components/Popover/Popover.tsx

@@ -334,10 +334,10 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
   };
   const onDocumentClick = (event: MouseEvent, triggerElement: HTMLElement, popperElement: HTMLElement) => {
     if (hideOnOutsideClick && visible) {
-      // check if we clicked within the popper, if so don't do anything
-      const isChild = popperElement && popperElement.contains(event.target as Node);
-      if (isChild) {
-        // clicked within the popper
+      const isFromChild = popperElement && popperElement.contains(event.target as Node);
+      const isFromTrigger = triggerElement && triggerElement.contains(event.target as Node);
+      if (isFromChild || isFromTrigger) {
+        // if clicked within the popper or on the trigger, ignore this event
         return;
       }
       if (triggerManually) {

package/src/components/Radio/Radio.tsx

@@ -7,17 +7,17 @@ import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
 export interface RadioProps
   extends Omit<React.HTMLProps<HTMLInputElement>, 'disabled' | 'label' | 'onChange' | 'type'>,
     OUIAProps {
-  /** Additional classes added to the radio wrapper.  This will be a div element if
-   * isLabelWrapped is true, otherwise this will be a label element.
+  /** Additional classes added to the radio wrapper. This wrapper will be div element by default. It will be a label element if
+   * isLabelWrapped is true, or it can be overridden by any element specified in the component prop.
    */
   className?: string;
-  /** Additional classed added to the radio input */
+  /** Additional classes added to the radio input. */
   inputClassName?: string;
   /** Id of the radio. */
   id: string;
-  /** Flag to show if the radio label is wrapped on small screen. */
+  /** Flag to indicate whether the radio wrapper element is a native label element for the radio input. Will not apply if a component prop (with a value other than a "label") is specified. */
   isLabelWrapped?: boolean;
-  /** Flag to show if the radio label is shown before the radio button. */
+  /** Flag to show if the radio label is shown before the radio input. */
   isLabelBeforeButton?: boolean;
   /** Flag to show if the radio is checked. */
   checked?: boolean;
@@ -39,6 +39,8 @@ export interface RadioProps
   description?: React.ReactNode;
   /** Body of the radio. */
   body?: React.ReactNode;
+  /** Sets the radio wrapper component to render. Defaults to "div". If set to "label", behaves the same as if isLabelWrapped prop was specified. */
+  component?: React.ElementType;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
@@ -88,6 +90,7 @@ class Radio extends React.Component<RadioProps, { ouiaStateId: string }> {
       body,
       ouiaId,
       ouiaSafe = true,
+      component,
       ...props
     } = this.props;
     if (!props.id) {
@@ -110,41 +113,39 @@ class Radio extends React.Component<RadioProps, { ouiaStateId: string }> {
       />
     );
 
-    let labelRendered: React.ReactNode = null;
-    if (label && isLabelWrapped) {
-      labelRendered = <span className={css(styles.radioLabel, isDisabled && styles.modifiers.disabled)}>{label}</span>;
-    } else if (label) {
-      labelRendered = (
-        <label className={css(styles.radioLabel, isDisabled && styles.modifiers.disabled)} htmlFor={props.id}>
-          {label}
-        </label>
-      );
-    }
+    const wrapWithLabel = (isLabelWrapped && !component) || component === 'label';
 
-    const descRender = description ? <span className={css(styles.radioDescription)}>{description}</span> : null;
-    const bodyRender = body ? <span className={css(styles.radioBody)}>{body}</span> : null;
-    const childrenRendered = isLabelBeforeButton ? (
-      <>
-        {labelRendered}
-        {inputRendered}
-        {descRender}
-        {bodyRender}
-      </>
-    ) : (
-      <>
-        {inputRendered}
-        {labelRendered}
-        {descRender}
-        {bodyRender}
-      </>
-    );
+    const Label = wrapWithLabel ? 'span' : 'label';
+    const labelRendered = label ? (
+      <Label
+        className={css(styles.radioLabel, isDisabled && styles.modifiers.disabled)}
+        htmlFor={!wrapWithLabel && props.id}
+      >
+        {label}
+      </Label>
+    ) : null;
+
+    const Component = component ?? (wrapWithLabel ? 'label' : 'div');
 
-    return isLabelWrapped ? (
-      <label className={css(styles.radio, className)} htmlFor={props.id}>
-        {childrenRendered}
-      </label>
-    ) : (
-      <div className={css(styles.radio, !label && styles.modifiers.standalone, className)}>{childrenRendered}</div>
+    return (
+      <Component
+        className={css(styles.radio, !label && styles.modifiers.standalone, className)}
+        htmlFor={wrapWithLabel && props.id}
+      >
+        {isLabelBeforeButton ? (
+          <>
+            {labelRendered}
+            {inputRendered}
+          </>
+        ) : (
+          <>
+            {inputRendered}
+            {labelRendered}
+          </>
+        )}
+        {description && <span className={css(styles.radioDescription)}>{description}</span>}
+        {body && <span className={css(styles.radioBody)}>{body}</span>}
+      </Component>
     );
   }
 }

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

@@ -100,4 +100,45 @@ describe('Radio', () => {
 
     expect(myMock).toHaveBeenCalled();
   });
+
+  test('Renders with the label wrapper if isLabelWrapped is provided', () => {
+    render(<Radio id="test-id" name="check" isLabelWrapped />);
+
+    expect(screen.getByRole('radio').parentElement?.tagName).toBe('LABEL');
+  });
+
+  test('Renders with span element around the inner label text if isLabelWrapped is provided', () => {
+    const labelText = 'test radio label';
+    render(<Radio id="test-id" name="check" isLabelWrapped label={labelText} />);
+
+    expect(screen.getByText(labelText).tagName).toBe('SPAN');
+  });
+
+  test('Renders with the provided component although isLabelWrapped is provided', () => {
+    render(<Radio id="test-id" name="check" isLabelWrapped component="h3" />);
+
+    expect(screen.getByRole('radio').parentElement?.tagName).toBe('H3');
+  });
+
+  test('Renders with the label wrapper if component is set to label', () => {
+    render(<Radio id="test-id" name="check" component="label" />);
+
+    expect(screen.getByRole('radio').parentElement?.tagName).toBe('LABEL');
+  });
+
+  test('Renders with span element around the inner label text if component is set to label', () => {
+    const labelText = 'test radio label';
+    render(<Radio id="test-id" name="check" component="label" label={labelText} />);
+
+    expect(screen.getByText(labelText).tagName).toBe('SPAN');
+  });
+
+  test('Renders label before radio input if isLabelBeforeButton is provided', () => {
+    render(<Radio id="test-id" name="check" isLabelBeforeButton label={'test radio label'} />);
+
+    const wrapper = screen.getByRole('radio').parentElement!;
+
+    expect(wrapper.children[0].tagName).toBe('LABEL');
+    expect(wrapper.children[1].tagName).toBe('INPUT');
+  });
 });

package/src/components/Toolbar/ToolbarChipGroupContent.tsx

@@ -72,13 +72,7 @@ class ToolbarChipGroupContent extends React.Component<ToolbarChipGroupContentPro
 
     return (
       <div
-        className={css(
-          styles.toolbarContent,
-          // TODO: Update with issue issue #9677
-          // !isHidden && !collapseListedFilters && styles.modifiers.chipContainer,
-          isHidden && styles.modifiers.hidden,
-          className
-        )}
+        className={css(styles.toolbarContent, isHidden && styles.modifiers.hidden, className)}
         {...((numberOfFilters === 0 || isExpanded) && { hidden: true })}
         ref={chipGroupContentRef}
         {...props}

package/src/components/Toolbar/ToolbarExpandableContent.tsx

@@ -61,7 +61,6 @@ class ToolbarExpandableContent extends React.Component<ToolbarExpandableContentP
       >
         <ToolbarGroup>{children}</ToolbarGroup>
         {numberOfFilters > 0 && (
-          // TODO: Update with issue issue #9677. Removed 'chipContainer' modifier
           <ToolbarGroup>
             <ToolbarGroup ref={chipContainerRef} />
             {showClearFiltersButton && !customChipGroupContent && (

package/src/components/Toolbar/ToolbarGroup.tsx

@@ -6,15 +6,14 @@ import { PageContext } from '../Page/PageContext';
 
 export enum ToolbarGroupVariant {
   'filter-group' = 'filter-group',
-  'icon-button-group' = 'icon-button-group',
-  'button-group' = 'button-group'
+  'icon-button-group' = 'icon-button-group'
 }
 
 export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'ref'> {
   /** Classes applied to root element of the data toolbar group */
   className?: string;
   /** A type modifier which modifies spacing specifically depending on the type of group */
-  variant?: ToolbarGroupVariant | 'filter-group' | 'icon-button-group' | 'button-group';
+  variant?: ToolbarGroupVariant | 'filter-group' | 'icon-button-group';
   /** Visibility at various breakpoints. */
   visibility?: {
     default?: 'hidden' | 'visible';
@@ -82,7 +81,6 @@ class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
           <div
             className={css(
               styles.toolbarGroup,
-              // TODO: Update with issue #9677.  Removed "buttonGroup" modifier
               variant && styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup'],
               formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
               formatBreakpointMods(align, styles, '', getBreakpoint(width)),

package/src/components/Toolbar/ToolbarItem.tsx

@@ -1,19 +1,13 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { css } from '@patternfly/react-styles';
-// TODO: Update with issue #9677
-// import cssWidth from '@patternfly/react-tokens/dist/esm/c_toolbar__item_Width';
-
 import { formatBreakpointMods, toCamel } from '../../helpers/util';
 import { Divider } from '../Divider';
 import { PageContext } from '../Page/PageContext';
 
 export enum ToolbarItemVariant {
   separator = 'separator',
-  'bulk-select' = 'bulk-select',
-  'overflow-menu' = 'overflow-menu',
   pagination = 'pagination',
-  'search-filter' = 'search-filter',
   label = 'label',
   'chip-group' = 'chip-group',
   'expand-all' = 'expand-all'
@@ -23,16 +17,7 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
   /** Classes applied to root element of the data toolbar item */
   className?: string;
   /** A type modifier which modifies spacing specifically depending on the type of item */
-  variant?:
-    | ToolbarItemVariant
-    | 'bulk-select'
-    | 'overflow-menu'
-    | 'pagination'
-    | 'search-filter'
-    | 'label'
-    | 'chip-group'
-    | 'separator'
-    | 'expand-all';
+  variant?: ToolbarItemVariant | 'pagination' | 'label' | 'chip-group' | 'separator' | 'expand-all';
   /** Visibility at various breakpoints. */
   visibility?: {
     default?: 'hidden' | 'visible';
@@ -61,15 +46,6 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
     '2xl'?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
   };
-  /** Widths at various breakpoints. */
-  widths?: {
-    default?: string;
-    sm?: string;
-    md?: string;
-    lg?: string;
-    xl?: string;
-    '2xl'?: string;
-  };
   /** id for this data toolbar item */
   id?: string;
   /** Flag indicating if the expand-all variant is expanded or not */
@@ -85,8 +61,6 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
   variant,
   visibility,
   spacer,
-  // TODO: Update with issue #9677
-  // widths,
   align,
   alignSelf,
   alignItems,
@@ -100,24 +74,13 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
     return <Divider className={css(className)} orientation={{ default: 'vertical' }} {...props} />;
   }
 
-  // TODO: Update with issue #9677
-  // const widthStyles: any = {};
-  // if (widths) {
-  //   Object.entries(widths || {}).map(
-  //     ([breakpoint, value]) =>
-  //       (widthStyles[`${cssWidth.name}${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}`] = value)
-  //   );
-  // }
-
   return (
     <PageContext.Consumer>
       {({ width, getBreakpoint }) => (
         <div
           className={css(
             styles.toolbarItem,
-            variant &&
-              // TODO: Update with issue #9677.  Removed "bulkSleect", "overflowMenu" and "searchFilter" modifiers
-              styles.modifiers[toCamel(variant) as 'pagination' | 'label' | 'chipGroup'],
+            variant && styles.modifiers[toCamel(variant) as 'pagination' | 'label' | 'chipGroup'],
             isAllExpanded && styles.modifiers.expanded,
             isOverflowContainer && styles.modifiers.overflowContainer,
             formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
@@ -134,8 +97,6 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
           {...(variant === 'label' && { 'aria-hidden': true })}
           id={id}
           {...props}
-          // TODO: Update with issue #9677
-          // {...(widths && { style: { ...widthStyles, ...props.style } as React.CSSProperties })}
         >
           {children}
         </div>

package/src/components/Toolbar/ToolbarToggleGroup.tsx

@@ -162,7 +162,6 @@ class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps> {
                         className={css(
                           styles.toolbarGroup,
                           styles.modifiers.toggleGroup,
-                          // TODO: Update with issue #9677.  Removed "buttonGroup" modifier
                           variant && styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup'],
                           formatBreakpointMods(breakpointMod, styles, '', getBreakpoint(width)),
                           formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),

package/src/components/Toolbar/__tests__/ToolbarItem.test.tsx

@@ -3,20 +3,6 @@ import { render, screen } from '@testing-library/react';
 import { ToolbarItem } from '../ToolbarItem';
 
 describe('ToolbarItem', () => {
-  it('should map width breakpoints', () => {
-    const widths = {
-      default: '100px',
-      sm: '80px',
-      md: '150px',
-      lg: '200px',
-      xl: '250px',
-      '2xl': '300px'
-    };
-
-    const { asFragment } = render(<ToolbarItem widths={widths}>Test</ToolbarItem>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
   it('should render with pf-m-overflow-container when isOverflowContainer is set', () => {
     render(
       <ToolbarItem data-testid="toolbaritem" isOverflowContainer>

package/src/components/Toolbar/examples/Toolbar.md

@@ -34,16 +34,6 @@ Items are spaced “16px” apart by default. To adjust the size of the space be
 
 ```
 
-### Toolbar items with adjusted widths
-
-You can adjust the width of toolbar items so that they better fit the size of their container.
-
-The default width of a toolbar item is “100px”. To adjust an item’s width, use the `widths` property of the `<ToolbarItem>`. You can set the “px” value at multiple breakpoints, including "default", "sm", "md", "lg, "xl", and "2xl".
-
-```ts file="./ToolbarWidths.tsx"
-
-```
-
 ### With adjusted inset
 
 To adjust a toolbar’s inset, use the `inset` property. You can set the inset value at multiple breakpoints, including "default", "md", "lg, "xl", and "2xl". Inset values include “insetNone”, “insetSm”, “insetMd”, “insetLg”, “insetXl”, and “inset2xl”.

package/src/components/Toolbar/examples/ToolbarComponentManagedToggleGroups.tsx

@@ -48,7 +48,7 @@ export const ToolbarComponentManagedToggleGroup: React.FunctionComponent = () =>
 
   const toggleGroupItems = (
     <React.Fragment>
-      <ToolbarItem variant="search-filter">
+      <ToolbarItem>
         <SearchInput
           aria-label="Component toggle groups example search input"
           onChange={(_event, value) => onInputChange(value)}

package/src/components/Toolbar/examples/ToolbarConsumerManagedToggleGroups.tsx

@@ -53,7 +53,7 @@ export const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () =>
 
   const toggleGroupItems = (
     <React.Fragment>
-      <ToolbarItem variant="search-filter">
+      <ToolbarItem>
         <SearchInput
           aria-label="Consumer toggle groups example search input"
           onChange={(_event, value) => onInputChange(value)}

package/src/components/Toolbar/examples/ToolbarGroups.tsx

@@ -189,7 +189,7 @@ export const ToolbarGroups: React.FunctionComponent = () => {
     <React.Fragment>
       <ToolbarGroup variant="filter-group">{filterGroupItems}</ToolbarGroup>
       <ToolbarGroup variant="icon-button-group">{iconButtonGroupItems}</ToolbarGroup>
-      <ToolbarGroup variant="button-group">{buttonGroupItems}</ToolbarGroup>
+      <ToolbarGroup>{buttonGroupItems}</ToolbarGroup>
     </React.Fragment>
   );
 

package/src/components/Toolbar/examples/ToolbarItems.tsx

@@ -5,7 +5,7 @@ import { Button, SearchInput } from '@patternfly/react-core';
 export const ToolbarItems: React.FunctionComponent = () => {
   const items = (
     <React.Fragment>
-      <ToolbarItem variant="search-filter">
+      <ToolbarItem>
         <SearchInput aria-label="Items example search input" />
       </ToolbarItem>
       <ToolbarItem>

package/src/components/Toolbar/examples/ToolbarStacked.tsx

@@ -206,7 +206,7 @@ export const ToolbarStacked: React.FunctionComponent = () => {
           <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="lg">
             {toggleGroupItems}
           </ToolbarToggleGroup>
-          <ToolbarItem variant="overflow-menu">
+          <ToolbarItem>
             <OverflowMenu breakpoint="2xl">
               <OverflowMenuContent>
                 <OverflowMenuGroup groupType="button">
@@ -249,7 +249,7 @@ export const ToolbarStacked: React.FunctionComponent = () => {
     <React.Fragment>
       <Toolbar>
         <ToolbarContent>
-          <ToolbarItem variant="bulk-select">
+          <ToolbarItem>
             <Dropdown
               onSelect={onSplitButtonSelect}
               isOpen={isSplitButtonDropdownOpen}

package/src/components/Toolbar/examples/ToolbarWithFilters.tsx

@@ -125,7 +125,7 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
 
   const toggleGroupItems = (
     <React.Fragment>
-      <ToolbarItem variant="search-filter">
+      <ToolbarItem>
         <SearchInput
           aria-label="With filters example search input"
           onChange={(_event, value) => onInputChange(value)}

package/src/components/TreeView/examples/TreeViewWithSearch.tsx

@@ -109,7 +109,7 @@ export const TreeViewWithSearch: React.FunctionComponent = () => {
   const toolbar = (
     <Toolbar style={{ padding: 0 }}>
       <ToolbarContent style={{ padding: 0 }}>
-        <ToolbarItem widths={{ default: '100%' }}>
+        <ToolbarItem>
           <TreeViewSearch onSearch={onSearch} id="input-search" name="search-input" aria-label="Search input example" />
         </ToolbarItem>
       </ToolbarContent>

package/src/components/index.ts

@@ -22,6 +22,7 @@ export * from './DataList';
 export * from './DatePicker';
 export * from './DescriptionList';
 export * from './Divider';
+export * from './DragDrop';
 export * from './Drawer';
 export * from './Dropdown';
 export * from './DualListSelector';
@@ -76,7 +77,6 @@ export * from './Tooltip';
 export * from './NumberInput';
 export * from './TreeView';
 export * from './Wizard';
-export * from './DragDrop';
 export * from './TextInputGroup';
 export * from './Panel';
 export * from './Truncate';

package/src/demos/CardView/examples/CardView.tsx

@@ -413,9 +413,9 @@ export const CardViewBasic: React.FunctionComponent = () => {
 
   const toolbarItems = (
     <React.Fragment>
-      <ToolbarItem variant="bulk-select">{buildSelectDropdown()}</ToolbarItem>
+      <ToolbarItem>{buildSelectDropdown()}</ToolbarItem>
       <ToolbarItem>{buildFilterDropdown()}</ToolbarItem>
-      <ToolbarItem variant="overflow-menu">
+      <ToolbarItem>
         <OverflowMenu breakpoint="md">
           <OverflowMenuItem>
             <Button variant="primary">Create a project</Button>

package/src/demos/DataList/examples/DataListBasic.tsx

@@ -38,7 +38,7 @@ export const DataListBasic: React.FunctionComponent = () => {
 
   const toolbarItems = (
     <React.Fragment>
-      <ToolbarItem variant="bulk-select">
+      <ToolbarItem>
         <MenuToggle
           aria-label="Select cards"
           splitButtonOptions={{
@@ -55,7 +55,7 @@ export const DataListBasic: React.FunctionComponent = () => {
       <ToolbarItem>
         <MenuToggle>Filter by creator name</MenuToggle>
       </ToolbarItem>
-      <ToolbarItem variant="overflow-menu">
+      <ToolbarItem>
         <OverflowMenu breakpoint="md">
           <OverflowMenuItem>
             <Button variant="primary">Create instance</Button>