@patternfly/react-core 5.0.0-alpha.62 → 5.0.0-alpha.64

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

@@ -4,14 +4,12 @@ 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"
+            id="split-button-checkbox-with-text-example"
+            key="split-checkbox-with-text"
             aria-label="Select all"
-            isDisabled
           >
             10 selected
           </MenuToggleCheckbox>
@@ -20,33 +18,34 @@ export const MenuToggleSplitButtonCheckboxWithText: React.FunctionComponent = ()
       aria-label="Menu toggle with checkbox split button and text"
     />{' '}
     <MenuToggle
+      variant="primary"
       splitButtonOptions={{
         items: [
           <MenuToggleCheckbox
-            id="split-button-checkbox-with-text-example"
-            key="split-checkbox-with-text"
+            id="split-button-checkbox-primary-example"
+            key="split-checkbox-primary"
             aria-label="Select all"
           >
             10 selected
           </MenuToggleCheckbox>
         ]
       }}
-      aria-label="Menu toggle with checkbox split button and text"
+      aria-label="Primary menu toggle with checkbox split button"
     />{' '}
     <MenuToggle
-      isExpanded
+      variant="secondary"
       splitButtonOptions={{
         items: [
           <MenuToggleCheckbox
-            id="split-button-checkbox-with-text-expanded-example"
-            key="split-checkbox-with-text-expanded"
+            id="split-button-checkbox-secondary-example"
+            key="split-checkbox-secondary"
             aria-label="Select all"
           >
             10 selected
           </MenuToggleCheckbox>
         ]
       }}
-      aria-label="Menu toggle with checkbox split button and text"
+      aria-label="Secondary menu toggle with checkbox split button"
     />
   </React.Fragment>
 );

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { MenuToggle, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, Button } from '@patternfly/react-core';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+
+export const MenuToggleTypeahead: React.FunctionComponent = () => {
+  const [inputValue, setInputValue] = React.useState<string>('');
+
+  const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
+    setInputValue(value);
+  };
+
+  return (
+    <MenuToggle
+      variant="typeahead"
+      isFullWidth
+    >
+      <TextInputGroup isPlain>
+        <TextInputGroupMain
+          value={inputValue}
+          onChange={onTextInputChange}
+          id="typeahead-select-input"
+          autoComplete="off"
+        />
+
+        <TextInputGroupUtilities>
+          {!!inputValue && (
+            <Button variant="plain" onClick={() => setInputValue('')} aria-label="Clear input value">
+              <TimesIcon aria-hidden />
+            </Button>
+          )}
+        </TextInputGroupUtilities>
+      </TextInputGroup>
+    </MenuToggle>
+  );
+}