@patternfly/react-core 5.0.0-alpha.87 → 5.0.0-alpha.88

package/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx

@@ -16,16 +16,14 @@ import {
   NotificationDrawerListItemHeader,
   EmptyStateVariant,
   EmptyStateActions,
-  EmptyStateIcon
+  EmptyStateIcon,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement
 } from '@patternfly/react-core';
-import {
-  Dropdown as DropdownDeprecated,
-  DropdownItem as DropdownItemDeprecated,
-  DropdownPosition,
-  DropdownDirection,
-  DropdownSeparator,
-  KebabToggle
-} from '@patternfly/react-core/deprecated';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 export const NotificationDrawerGroups: React.FunctionComponent = () => {
@@ -34,8 +32,8 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
   const [thirdGroupExpanded, setThirdGroupExpanded] = React.useState(false);
   const [isOpenMap, setIsOpenMap] = React.useState({});
 
-  const onToggle = (id: string, isOpen: boolean) => {
-    setIsOpenMap({ [id]: isOpen });
+  const onToggle = (id: string) => {
+    setIsOpenMap((prevState) => ({ ...prevState, [id]: !prevState[id] }));
   };
 
   const onSelect = () => {
@@ -60,34 +58,46 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
     setFirstGroupExpanded(false);
   };
 
-  const dropdownItems = [
-    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="action" component="button">
-      Action
-    </DropdownItemDeprecated>,
-    <DropdownSeparator key="separator" />,
-    <DropdownItemDeprecated key="disabled link" isDisabled>
-      Disabled link
-    </DropdownItemDeprecated>
-  ];
+  const dropdownItems = (
+    <>
+      <DropdownItem>Action</DropdownItem>
+      <DropdownItem
+        to="#default-link2"
+        // Prevent the default onClick functionality for example purposes
+        onClick={(ev: any) => ev.preventDefault()}
+      >
+        Link
+      </DropdownItem>
+      <DropdownItem isDisabled>Disabled Action</DropdownItem>
+      <DropdownItem isDisabled to="#default-link4">
+        Disabled Link
+      </DropdownItem>
+    </>
+  );
 
   return (
     <NotificationDrawer>
       <NotificationDrawerHeader count={4}>
-        <DropdownDeprecated
+        <Dropdown
           onSelect={onSelect}
-          toggle={
-            <KebabToggle
-              onToggle={(_event: any, isOpen: boolean) => onToggle('groups-kebab-toggle-1', isOpen)}
+          isOpen={isOpenMap['groups-kebab-toggle-1'] || false}
+          onOpenChange={() => setIsOpenMap({})}
+          popperProps={{ position: 'right' }}
+          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+            <MenuToggle
+              ref={toggleRef}
               id="groups-kebab-toggle-1"
-            />
-          }
-          isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-1']}
-          isPlain
-          dropdownItems={dropdownItems}
-          id="grouped-notification-1"
-          position={DropdownPosition.right}
-        />
+              isExpanded={isOpenMap['groups-kebab-toggle-1'] || false}
+              onClick={() => onToggle('groups-kebab-toggle-1')}
+              variant="plain"
+              aria-label={`Groups example header kebab toggle`}
+            >
+              <EllipsisVIcon aria-hidden="true" />
+            </MenuToggle>
+          )}
+        >
+          <DropdownList>{dropdownItems}</DropdownList>
+        </Dropdown>
       </NotificationDrawerHeader>
       <NotificationDrawerBody>
         <NotificationDrawerGroupList>
@@ -104,20 +114,26 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                   title="Unread info notification title"
                   srTitle="Info notification:"
                 >
-                  <DropdownDeprecated
-                    position={DropdownPosition.right}
+                  <Dropdown
                     onSelect={onSelect}
-                    toggle={
-                      <KebabToggle
-                        onToggle={(_event: any, isOpen: boolean) => onToggle('groups-kebab-toggle-2', isOpen)}
+                    isOpen={isOpenMap['groups-kebab-toggle-2'] || false}
+                    onOpenChange={() => setIsOpenMap({})}
+                    popperProps={{ position: 'right' }}
+                    toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                      <MenuToggle
+                        ref={toggleRef}
                         id="groups-kebab-toggle-2"
-                      />
-                    }
-                    isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-2']}
-                    isPlain
-                    dropdownItems={dropdownItems}
-                    id="grouped-notification-2"
-                  />
+                        isExpanded={isOpenMap['groups-kebab-toggle-2'] || false}
+                        onClick={() => onToggle('groups-kebab-toggle-2')}
+                        variant="plain"
+                        aria-label={`Groups example group 1 notification 1 kebab toggle`}
+                      >
+                        <EllipsisVIcon aria-hidden="true" />
+                      </MenuToggle>
+                    )}
+                  >
+                    <DropdownList>{dropdownItems}</DropdownList>
+                  </Dropdown>
                 </NotificationDrawerListItemHeader>
                 <NotificationDrawerListItemBody timestamp="5 minutes ago">
                   This is an info notification description.
@@ -129,20 +145,26 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                   title="Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines."
                   srTitle="Danger notification:"
                 >
-                  <DropdownDeprecated
-                    position={DropdownPosition.right}
+                  <Dropdown
                     onSelect={onSelect}
-                    toggle={
-                      <KebabToggle
-                        onToggle={(_event: any, isOpen: boolean) => onToggle('groups-kebab-toggle-3', isOpen)}
+                    isOpen={isOpenMap['groups-kebab-toggle-3'] || false}
+                    onOpenChange={() => setIsOpenMap({})}
+                    popperProps={{ position: 'right' }}
+                    toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                      <MenuToggle
+                        ref={toggleRef}
                         id="groups-kebab-toggle-3"
-                      />
-                    }
-                    isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-3']}
-                    isPlain
-                    dropdownItems={dropdownItems}
-                    id="grouped-notification-3"
-                  />
+                        isExpanded={isOpenMap['groups-kebab-toggle-3'] || false}
+                        onClick={() => onToggle('groups-kebab-toggle-3')}
+                        variant="plain"
+                        aria-label={`Groups example group 1 notification 2 kebab toggle`}
+                      >
+                        <EllipsisVIcon aria-hidden="true" />
+                      </MenuToggle>
+                    )}
+                  >
+                    <DropdownList>{dropdownItems}</DropdownList>
+                  </Dropdown>
                 </NotificationDrawerListItemHeader>
                 <NotificationDrawerListItemBody timestamp="10 minutes ago">
                   This is a danger notification description. This is a long description to show how the title will wrap
@@ -155,20 +177,26 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                   title="Read warning notification title"
                   srTitle="Warning notification:"
                 >
-                  <DropdownDeprecated
-                    position={DropdownPosition.right}
+                  <Dropdown
                     onSelect={onSelect}
-                    toggle={
-                      <KebabToggle
-                        onToggle={(_event: any, isOpen: boolean) => onToggle('groups-kebab-toggle-4', isOpen)}
+                    isOpen={isOpenMap['groups-kebab-toggle-4'] || false}
+                    onOpenChange={() => setIsOpenMap({})}
+                    popperProps={{ position: 'right' }}
+                    toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                      <MenuToggle
+                        ref={toggleRef}
                         id="groups-kebab-toggle-4"
-                      />
-                    }
-                    isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-4']}
-                    isPlain
-                    dropdownItems={dropdownItems}
-                    id="grouped-notification-7"
-                  />
+                        isExpanded={isOpenMap['groups-kebab-toggle-4'] || false}
+                        onClick={() => onToggle('groups-kebab-toggle-4')}
+                        variant="plain"
+                        aria-label={`Groups example group 1 notification 3 kebab toggle`}
+                      >
+                        <EllipsisVIcon aria-hidden="true" />
+                      </MenuToggle>
+                    )}
+                  >
+                    <DropdownList>{dropdownItems}</DropdownList>
+                  </Dropdown>
                 </NotificationDrawerListItemHeader>
                 <NotificationDrawerListItemBody timestamp="20 minutes ago">
                   This is a warning notification description.
@@ -180,21 +208,26 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                   title="Read success notification title"
                   srTitle="Success notification:"
                 >
-                  <DropdownDeprecated
-                    position={DropdownPosition.right}
-                    direction={DropdownDirection.up}
+                  <Dropdown
                     onSelect={onSelect}
-                    toggle={
-                      <KebabToggle
-                        onToggle={(_event: any, isOpen: boolean) => onToggle('groups-kebab-toggle-5', isOpen)}
+                    isOpen={isOpenMap['groups-kebab-toggle-5'] || false}
+                    onOpenChange={() => setIsOpenMap({})}
+                    popperProps={{ position: 'right' }}
+                    toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                      <MenuToggle
+                        ref={toggleRef}
                         id="groups-kebab-toggle-5"
-                      />
-                    }
-                    isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-5']}
-                    isPlain
-                    dropdownItems={dropdownItems}
-                    id="grouped-notification-5"
-                  />
+                        isExpanded={isOpenMap['groups-kebab-toggle-5'] || false}
+                        onClick={() => onToggle('groups-kebab-toggle-5')}
+                        variant="plain"
+                        aria-label={`Groups example group 1 notification 4 kebab toggle`}
+                      >
+                        <EllipsisVIcon aria-hidden="true" />
+                      </MenuToggle>
+                    )}
+                  >
+                    <DropdownList>{dropdownItems}</DropdownList>
+                  </Dropdown>
                 </NotificationDrawerListItemHeader>
                 <NotificationDrawerListItemBody timestamp="30 minutes ago">
                   This is a success notification description.
@@ -215,20 +248,26 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                   title="Unread info notification title"
                   srTitle="Info notification:"
                 >
-                  <DropdownDeprecated
-                    position={DropdownPosition.right}
+                  <Dropdown
                     onSelect={onSelect}
-                    toggle={
-                      <KebabToggle
-                        onToggle={(_event: any, isOpen: boolean) => onToggle('groups-kebab-toggle-6', isOpen)}
+                    isOpen={isOpenMap['groups-kebab-toggle-6'] || false}
+                    onOpenChange={() => setIsOpenMap({})}
+                    popperProps={{ position: 'right' }}
+                    toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                      <MenuToggle
+                        ref={toggleRef}
                         id="groups-kebab-toggle-6"
-                      />
-                    }
-                    isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-6']}
-                    isPlain
-                    dropdownItems={dropdownItems}
-                    id="grouped-notification-6"
-                  />
+                        isExpanded={isOpenMap['groups-kebab-toggle-6'] || false}
+                        onClick={() => onToggle('groups-kebab-toggle-6')}
+                        variant="plain"
+                        aria-label={`Groups example group 2 notification 1 kebab toggle`}
+                      >
+                        <EllipsisVIcon aria-hidden="true" />
+                      </MenuToggle>
+                    )}
+                  >
+                    <DropdownList>{dropdownItems}</DropdownList>
+                  </Dropdown>
                 </NotificationDrawerListItemHeader>
                 <NotificationDrawerListItemBody timestamp="5 minutes ago">
                   This is an info notification description.
@@ -240,20 +279,26 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                   title="Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines."
                   srTitle="Danger notification:"
                 >
-                  <DropdownDeprecated
-                    position={DropdownPosition.right}
+                  <Dropdown
                     onSelect={onSelect}
-                    toggle={
-                      <KebabToggle
-                        onToggle={(_event: any, isOpen: boolean) => onToggle('groups-kebab-toggle-7', isOpen)}
+                    isOpen={isOpenMap['groups-kebab-toggle-7'] || false}
+                    onOpenChange={() => setIsOpenMap({})}
+                    popperProps={{ position: 'right' }}
+                    toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                      <MenuToggle
+                        ref={toggleRef}
                         id="groups-kebab-toggle-7"
-                      />
-                    }
-                    isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-7']}
-                    isPlain
-                    dropdownItems={dropdownItems}
-                    id="gropued-notification-7"
-                  />
+                        isExpanded={isOpenMap['groups-kebab-toggle-7'] || false}
+                        onClick={() => onToggle('groups-kebab-toggle-7')}
+                        variant="plain"
+                        aria-label={`Groups example group 2 notification 2 kebab toggle`}
+                      >
+                        <EllipsisVIcon aria-hidden="true" />
+                      </MenuToggle>
+                    )}
+                  >
+                    <DropdownList>{dropdownItems}</DropdownList>
+                  </Dropdown>
                 </NotificationDrawerListItemHeader>
                 <NotificationDrawerListItemBody timestamp="10 minutes ago">
                   This is a danger notification description. This is a long description to show how the title will wrap
@@ -266,20 +311,26 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                   title="Read warning notification title"
                   srTitle="Warning notification:"
                 >
-                  <DropdownDeprecated
-                    position={DropdownPosition.right}
+                  <Dropdown
                     onSelect={onSelect}
-                    toggle={
-                      <KebabToggle
-                        onToggle={(_event: any, isOpen: boolean) => onToggle('groups-kebab-toggle-8', isOpen)}
+                    isOpen={isOpenMap['groups-kebab-toggle-8'] || false}
+                    onOpenChange={() => setIsOpenMap({})}
+                    popperProps={{ position: 'right' }}
+                    toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                      <MenuToggle
+                        ref={toggleRef}
                         id="groups-kebab-toggle-8"
-                      />
-                    }
-                    isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-8']}
-                    isPlain
-                    dropdownItems={dropdownItems}
-                    id="grouped-notification-8"
-                  />
+                        isExpanded={isOpenMap['groups-kebab-toggle-8'] || false}
+                        onClick={() => onToggle('groups-kebab-toggle-8')}
+                        variant="plain"
+                        aria-label={`Groups example group 2 notification 3 kebab toggle`}
+                      >
+                        <EllipsisVIcon aria-hidden="true" />
+                      </MenuToggle>
+                    )}
+                  >
+                    <DropdownList>{dropdownItems}</DropdownList>
+                  </Dropdown>
                 </NotificationDrawerListItemHeader>
                 <NotificationDrawerListItemBody timestamp="20 minutes ago">
                   This is a warning notification description.
@@ -291,21 +342,26 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                   title="Read success notification title"
                   srTitle="Success notification:"
                 >
-                  <DropdownDeprecated
-                    position={DropdownPosition.right}
-                    direction={DropdownDirection.up}
+                  <Dropdown
                     onSelect={onSelect}
-                    toggle={
-                      <KebabToggle
-                        onToggle={(_event: any, isOpen: boolean) => onToggle('groups-kebab-toggle-9', isOpen)}
+                    isOpen={isOpenMap['groups-kebab-toggle-9'] || false}
+                    onOpenChange={() => setIsOpenMap({})}
+                    popperProps={{ position: 'right' }}
+                    toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                      <MenuToggle
+                        ref={toggleRef}
                         id="groups-kebab-toggle-9"
-                      />
-                    }
-                    isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-9']}
-                    isPlain
-                    dropdownItems={dropdownItems}
-                    id="grouped-notification-9"
-                  />
+                        isExpanded={isOpenMap['groups-kebab-toggle-9'] || false}
+                        onClick={() => onToggle('groups-kebab-toggle-9')}
+                        variant="plain"
+                        aria-label={`Groups example group 2 notification 4 kebab toggle`}
+                      >
+                        <EllipsisVIcon aria-hidden="true" />
+                      </MenuToggle>
+                    )}
+                  >
+                    <DropdownList>{dropdownItems}</DropdownList>
+                  </Dropdown>
                 </NotificationDrawerListItemHeader>
                 <NotificationDrawerListItemBody timestamp="30 minutes ago">
                   This is a success notification description.

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

@@ -11,15 +11,6 @@ import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import {
-Dropdown as DropdownDeprecated,
-DropdownToggle,
-DropdownToggleCheckbox,
-DropdownItem as DropdownItemDeprecated,
-DropdownSeparator,
-DropdownPosition,
-KebabToggle
-} from '@patternfly/react-core/deprecated';
 
 ## Examples
 

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

@@ -11,6 +11,7 @@ import {
   DropdownList,
   Divider,
   MenuToggle,
+  MenuToggleCheckbox,
   MenuToggleElement,
   OverflowMenu,
   OverflowMenuContent,
@@ -22,12 +23,6 @@ import {
   ToolbarToggleGroup,
   ToolbarItem
 } from '@patternfly/react-core';
-import {
-  Dropdown as DropdownDeprecated,
-  DropdownToggle,
-  DropdownToggleCheckbox,
-  DropdownItem as DropdownItemDeprecated
-} from '@patternfly/react-core/deprecated';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
@@ -42,7 +37,7 @@ export const ToolbarStacked: React.FunctionComponent = () => {
   const [resourceSelected, setResourceSelected] = React.useState('');
   const [statusIsExpanded, setStatusIsExpanded] = React.useState(false);
   const [statusSelected, setStatusSelected] = React.useState('');
-  const [splitButtonDropdownIsOpen, setSplitButtonDropdownIsOpen] = React.useState(false);
+  const [isSplitButtonDropdownOpen, setIsSplitButtonDropdownOpen] = React.useState(false);
   const [page, setPage] = React.useState(1);
   const [perPage, setPerPage] = React.useState(20);
 
@@ -85,44 +80,52 @@ export const ToolbarStacked: React.FunctionComponent = () => {
     setPerPage(perPage);
   };
 
-  const onSplitButtonToggle = (_event: any, isOpen: boolean) => {
-    setSplitButtonDropdownIsOpen(isOpen);
+  const onSplitButtonToggle = () => {
+    setIsSplitButtonDropdownOpen(!isSplitButtonDropdownOpen);
   };
 
   const onSplitButtonSelect = () => {
-    setSplitButtonDropdownIsOpen(!splitButtonDropdownIsOpen);
+    setIsSplitButtonDropdownOpen(!isSplitButtonDropdownOpen);
   };
 
-  const dropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
-      Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" isDisabled>
-      Disabled Link
-    </DropdownItem>,
-    <DropdownItem key="disabled action" isDisabled component="button">
-      Disabled Action
-    </DropdownItem>,
-    <Divider key="separator" />,
-    <DropdownItem key="separated link">Separated Link</DropdownItem>,
-    <DropdownItem key="separated action" component="button">
-      Separated Action
-    </DropdownItem>
-  ];
-
-  const splitButtonDropdownItems = [
-    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="action" component="button">
-      Action
-    </DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="disabled link" isDisabled>
-      Disabled Link
-    </DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="disabled action" isDisabled component="button">
-      Disabled Action
-    </DropdownItemDeprecated>
-  ];
+  const dropdownItems = (
+    <>
+      <DropdownItem>Action</DropdownItem>
+      <DropdownItem
+        to="#default-link2"
+        // Prevent the default onClick functionality for example purposes
+        onClick={(ev: any) => ev.preventDefault()}
+      >
+        Link
+      </DropdownItem>
+      <DropdownItem isDisabled>Disabled Action</DropdownItem>
+      <DropdownItem isDisabled to="#default-link4">
+        Disabled Link
+      </DropdownItem>
+    </>
+  );
+  const splitButtonDropdownItems = (
+    <>
+      <DropdownItem itemId={0} key="action">
+        Action
+      </DropdownItem>
+      <DropdownItem
+        itemId={1}
+        key="link"
+        to="#default-link2"
+        // Prevent the default onClick functionality for example purposes
+        onClick={(ev: any) => ev.preventDefault()}
+      >
+        Link
+      </DropdownItem>
+      <DropdownItem itemId={2} isDisabled key="disabled action">
+        Disabled Action
+      </DropdownItem>
+      <DropdownItem itemId={3} isDisabled key="disabled link" to="#default-link4">
+        Disabled Link
+      </DropdownItem>
+    </>
+  );
 
   const toggleGroupItems = (
     <React.Fragment>
@@ -147,13 +150,15 @@ export const ToolbarStacked: React.FunctionComponent = () => {
           )}
           onSelect={onResourceSelect}
           selected={resourceSelected}
-          onOpenChange={isOpen => setResourceIsExpanded(isOpen)}
+          onOpenChange={(isOpen) => setResourceIsExpanded(isOpen)}
           isOpen={resourceIsExpanded}
           aria-labelledby="stacked-example-resource-select"
         >
           <SelectList>
             {resourceOptions.map((option, index) => (
-              <SelectOption key={index} itemId={option}>{option}</SelectOption>
+              <SelectOption key={index} itemId={option}>
+                {option}
+              </SelectOption>
             ))}
           </SelectList>
         </Select>
@@ -178,13 +183,15 @@ export const ToolbarStacked: React.FunctionComponent = () => {
             </MenuToggle>
           )}
           onSelect={onStatusSelect}
-          onOpenChange={isOpen => setStatusIsExpanded(isOpen)}
+          onOpenChange={(isOpen) => setStatusIsExpanded(isOpen)}
           selected={statusSelected}
           isOpen={statusIsExpanded}
         >
           <SelectList>
             {statusOptions.map((option, index) => (
-              <SelectOption key={index} itemId={option}>{option}</SelectOption>
+              <SelectOption key={index} itemId={option}>
+                {option}
+              </SelectOption>
             ))}
           </SelectList>
         </Select>
@@ -214,8 +221,8 @@ export const ToolbarStacked: React.FunctionComponent = () => {
               <OverflowMenuControl hasAdditionalOptions>
                 <Dropdown
                   onSelect={onResourceSelectDropdown}
-                  onOpenChange={(isOpen) => setKebabIsOpen(isOpen)}
-                  toggle={(toggleRef) => (
+                  onOpenChange={(isOpen: boolean) => setKebabIsOpen(isOpen)}
+                  toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
                     <MenuToggle
                       ref={toggleRef}
                       aria-label="Kebab overflow menu"
@@ -243,20 +250,30 @@ export const ToolbarStacked: React.FunctionComponent = () => {
       <Toolbar>
         <ToolbarContent>
           <ToolbarItem variant="bulk-select">
-            <DropdownDeprecated
+            <Dropdown
               onSelect={onSplitButtonSelect}
-              toggle={
-                <DropdownToggle
-                  id="stacked-example-toggle"
-                  splitButtonItems={[
-                    <DropdownToggleCheckbox id="example-checkbox-1" key="split-checkbox" aria-label="Select all" />
-                  ]}
-                  onToggle={onSplitButtonToggle}
+              isOpen={isSplitButtonDropdownOpen}
+              onOpenChange={(isOpen: boolean) => setIsSplitButtonDropdownOpen(isOpen)}
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  isExpanded={isSplitButtonDropdownOpen}
+                  onClick={onSplitButtonToggle}
+                  aria-label="Toolbar stacked example split toggle"
+                  splitButtonOptions={{
+                    items: [
+                      <MenuToggleCheckbox
+                        key="toolbar-stacked-split-button-checkbox-1"
+                        id="toolbar-stacked-split-button-checkbox-1"
+                        aria-label="Select all"
+                      />
+                    ]
+                  }}
                 />
-              }
-              isOpen={splitButtonDropdownIsOpen}
-              dropdownItems={splitButtonDropdownItems}
-            />
+              )}
+            >
+              <DropdownList>{splitButtonDropdownItems}</DropdownList>
+            </Dropdown>
           </ToolbarItem>
           <ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
             <Pagination