@patternfly/react-core 4.230.1 → 4.231.2

package/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckboxSecondary.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { MenuToggleCheckbox, MenuToggle } from '@patternfly/react-core';
+
+export const MenuToggleSplitButtonCheckboxSecondary: React.FunctionComponent = () => (
+  <React.Fragment>
+    <MenuToggle
+      isDisabled
+      variant="secondary"
+      splitButtonOptions={{
+        items: [
+          <MenuToggleCheckbox
+            id="split-button-checkbox-secondary-disabled-example"
+            key="split-checkbox-secondary-disabled"
+            aria-label="Select all"
+            isDisabled
+          >
+            10 selected
+          </MenuToggleCheckbox>
+        ]
+      }}
+      aria-label="Secondary menu toggle with checkbox split button"
+    />{' '}
+    <MenuToggle
+      variant="secondary"
+      splitButtonOptions={{
+        items: [
+          <MenuToggleCheckbox
+            id="split-button-checkbox-secondary-example"
+            key="split-checkbox-secondary"
+            aria-label="Select all"
+          >
+            10 selected
+          </MenuToggleCheckbox>
+        ]
+      }}
+      aria-label="Secondary menu toggle with checkbox split button"
+    />{' '}
+    <MenuToggle
+      isExpanded
+      variant="secondary"
+      splitButtonOptions={{
+        items: [
+          <MenuToggleCheckbox
+            id="split-button-checkbox-secondary-expanded-example"
+            key="split-checkbox-secondary-expanded"
+            aria-label="Select all"
+          >
+            10 selected
+          </MenuToggleCheckbox>
+        ]
+      }}
+      aria-label="Secondary menu toggle with checkbox split button"
+    />
+  </React.Fragment>
+);

package/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckboxWithText.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { MenuToggleCheckbox, MenuToggle } from '@patternfly/react-core';
+
+export const MenuToggleSplitButtonCheckboxWithText: React.FunctionComponent = () => (
+  <React.Fragment>
+    <MenuToggle
+      isDisabled
+      splitButtonOptions={{
+        items: [
+          <MenuToggleCheckbox
+            id="split-button-checkbox-with-text-disabled-example"
+            key="split-checkbox-with-text-disabled"
+            aria-label="Select all"
+            isDisabled
+          >
+            10 selected
+          </MenuToggleCheckbox>
+        ]
+      }}
+      aria-label="Menu toggle with checkbox split button and text"
+    />{' '}
+    <MenuToggle
+      splitButtonOptions={{
+        items: [
+          <MenuToggleCheckbox
+            id="split-button-checkbox-with-text-example"
+            key="split-checkbox-with-text"
+            aria-label="Select all"
+          >
+            10 selected
+          </MenuToggleCheckbox>
+        ]
+      }}
+      aria-label="Menu toggle with checkbox split button and text"
+    />{' '}
+    <MenuToggle
+      isExpanded
+      splitButtonOptions={{
+        items: [
+          <MenuToggleCheckbox
+            id="split-button-checkbox-with-text-expanded-example"
+            key="split-checkbox-with-text-expanded"
+            aria-label="Select all"
+          >
+            10 selected
+          </MenuToggleCheckbox>
+        ]
+      }}
+      aria-label="Menu toggle with checkbox split button and text"
+    />
+  </React.Fragment>
+);

package/src/components/MenuToggle/index.ts

@@ -1 +1,3 @@
 export * from './MenuToggle';
+export * from './MenuToggleAction';
+export * from './MenuToggleCheckbox';

package/src/demos/ComposableMenu/examples/ComposableSimpleCheckboxSelect.tsx

@@ -13,7 +13,7 @@ export const ComposableSimpleCheckboxSelect: React.FunctionComponent = () => {
         if (isOpen && menuRef.current.contains(event.target as Node)) {
           if (event.key === 'Escape' || event.key === 'Tab') {
             setIsOpen(!isOpen);
-            toggleRef.current.focus();
+            toggleRef?.current?.focus();
           }
         }
       }
@@ -23,7 +23,7 @@ export const ComposableSimpleCheckboxSelect: React.FunctionComponent = () => {
 
   const handleClickOutside = React.useCallback(
     event => {
-      if (isOpen && !menuRef.current.contains(event.target as Node)) {
+      if (isOpen && !menuRef?.current?.contains(event.target as Node)) {
         setIsOpen(false);
       }
     },
@@ -43,7 +43,7 @@ export const ComposableSimpleCheckboxSelect: React.FunctionComponent = () => {
     ev.stopPropagation(); // Stop handleClickOutside from handling
     setTimeout(() => {
       if (menuRef.current) {
-        const firstElement = menuRef.current.querySelector('li > button:not(:disabled)');
+        const firstElement = menuRef.current.querySelector('li input:not(:disabled)');
         firstElement && (firstElement as HTMLElement).focus();
       }
     }, 0);
@@ -94,5 +94,5 @@ export const ComposableSimpleCheckboxSelect: React.FunctionComponent = () => {
       </MenuContent>
     </Menu>
   );
-  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} />;
+  return <Popper appendTo={toggleRef.current} trigger={toggle} popper={menu} isVisible={isOpen} />;
 };