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

package/src/components/Wizard/examples/WizardGetCurrentStep.tsx

@@ -36,7 +36,7 @@ const CurrentStepDescriptionList = ({ currentStep }: { currentStep: WizardStepTy
 export const GetCurrentStepWizard: React.FunctionComponent = () => {
   const [currentStep, setCurrentStep] = React.useState<WizardStepType>();
 
-  const onStepChange = (event: React.MouseEvent<HTMLButtonElement>, currentStep: WizardStepType) =>
+  const onStepChange = (_event: React.MouseEvent<HTMLButtonElement>, currentStep: WizardStepType) =>
     setCurrentStep(currentStep);
 
   return (
@@ -44,9 +44,43 @@ export const GetCurrentStepWizard: React.FunctionComponent = () => {
       <WizardStep name="Step 1" id="get-current-step-1">
         {currentStep ? <CurrentStepDescriptionList currentStep={currentStep} /> : 'Step 1 content'}
       </WizardStep>
-      <WizardStep name="Step 2" id="get-current-step-2">
-        <CurrentStepDescriptionList currentStep={currentStep} />
-      </WizardStep>
+      <WizardStep
+        name="Step 2"
+        id="get-current-step-2"
+        isDisabled
+        steps={[
+          <WizardStep name="Substep 1" id="get-current-substep-1" key="get-current-substep-1">
+            <CurrentStepDescriptionList currentStep={currentStep} />
+          </WizardStep>,
+          <WizardStep name="Substep 2" id="get-current-substep-2" key="get-current-substep-2">
+            <CurrentStepDescriptionList currentStep={currentStep} />
+          </WizardStep>
+        ]}
+      />
+      <WizardStep
+        name="Step 3"
+        id="get-current-step-3"
+        steps={[
+          <WizardStep name="Substep 3" id="get-current-substep-3" key="get-current-substep-3">
+            <CurrentStepDescriptionList currentStep={currentStep} />
+          </WizardStep>,
+          <WizardStep name="Substep 4" id="get-current-substep-4" key="get-current-substep-4">
+            <CurrentStepDescriptionList currentStep={currentStep} />
+          </WizardStep>
+        ]}
+      />
+      <WizardStep
+        name="Step 4"
+        id="get-current-step-4"
+        steps={[
+          <WizardStep name="Substep 5" id="get-current-substep-5" key="get-current-substep-5" isHidden>
+            <CurrentStepDescriptionList currentStep={currentStep} />
+          </WizardStep>,
+          <WizardStep name="Substep 6" id="get-current-substep-6" key="get-current-substep-6">
+            <CurrentStepDescriptionList currentStep={currentStep} />
+          </WizardStep>
+        ]}
+      />
       <WizardStep name="Review" id="get-current-review-step" footer={{ nextButtonText: 'Finish' }}>
         <CurrentStepDescriptionList currentStep={currentStep} />
       </WizardStep>

package/src/components/Wizard/examples/WizardStepDrawerContent.tsx

@@ -4,7 +4,6 @@ import {
   Drawer,
   DrawerContent,
   DrawerPanelContent,
-  DrawerColorVariant,
   DrawerHead,
   DrawerActions,
   DrawerCloseButton,
@@ -27,7 +26,8 @@ const StepContentWithDrawer: React.FunctionComponent = () => {
     <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onWizardExpand}>
       <DrawerContent
         panelContent={
-          <DrawerPanelContent widths={{ default: 'width_50' }} colorVariant={DrawerColorVariant.light200}>
+          // TODO: need to update with issue #9979. Removed light color variant for secondary panel.
+          <DrawerPanelContent widths={{ default: 'width_50' }}>
             <DrawerHead>
               <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
                 Drawer content: <strong>{activeStep?.name}</strong>

package/src/components/Wizard/examples/WizardValidateOnButtonPress.tsx

@@ -4,11 +4,9 @@ import {
   Button,
   Alert,
   EmptyState,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
   EmptyStateActions,
-  EmptyStateIcon,
   Progress,
   Form,
   FormGroup,
@@ -47,12 +45,12 @@ const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({
 
   return (
     <div className={layout.bullseye}>
-      <EmptyState variant="lg">
-        <EmptyStateHeader
-          headingLevel="h4"
-          titleText={percentValidated === 100 ? 'Validation complete' : 'Validating credentials'}
-          icon={<EmptyStateIcon icon={CogsIcon} />}
-        />
+      <EmptyState
+        headingLevel="h4"
+        titleText={percentValidated === 100 ? 'Validation complete' : 'Validating credentials'}
+        icon={CogsIcon}
+        variant="lg"
+      >
         <EmptyStateBody>
           <Progress value={percentValidated} measureLocation="outside" aria-label="Wizard validation progress" />
         </EmptyStateBody>

package/src/components/Wizard/examples/WizardWithSubmitProgress.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
 import {
   EmptyState,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
   EmptyStateActions,
-  EmptyStateIcon,
   Progress,
   Button,
   Wizard,
@@ -37,12 +35,12 @@ const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({
 
   return (
     <div className={layout.bullseye}>
-      <EmptyState variant="lg">
-        <EmptyStateHeader
-          headingLevel="h4"
-          titleText={percentValidated === 100 ? 'Validation complete' : 'Validating credentials'}
-          icon={<EmptyStateIcon icon={CogsIcon} />}
-        />
+      <EmptyState
+        headingLevel="h4"
+        titleText={percentValidated === 100 ? 'Validation complete' : 'Validating credentials'}
+        icon={CogsIcon}
+        variant="lg"
+      >
         <EmptyStateBody>
           <Progress value={percentValidated} measureLocation="outside" aria-label="Wizard validation progress" />
         </EmptyStateBody>

package/src/components/Wizard/types.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { WizardNavProps, WizardNavItemProps, WizardFooterProps } from '.';
+import { ButtonProps } from '../Button';
 
 /** Type used to define 'basic' steps, or in other words, steps that are neither parents or children of parents. */
 export interface WizardBasicStep {
@@ -30,6 +31,9 @@ export enum WizardNavItemStatus {
   Error = 'error'
 }
 
+/** Type for customizing a button (next, back or cancel) in a Wizard footer. It omits some props which either have a default value or are passed directly via WizardFooterProps. */
+export type WizardFooterButtonProps = Omit<ButtonProps, 'children' | 'variant' | 'onClick'>;
+
 /** Type used to define parent steps. */
 export interface WizardParentStep extends WizardBasicStep {
   /** Nested step IDs */

package/src/components/Wizard/utils.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { WizardStepType } from './types';
+import { isWizardParentStep, isWizardSubStep, WizardStepType } from './types';
 import { WizardStep, WizardStepProps } from './WizardStep';
 
 /**
@@ -8,7 +8,7 @@ import { WizardStep, WizardStepProps } from './WizardStep';
  * @param children
  * @returns WizardStepType[]
  */
-export const buildSteps = (children: React.ReactNode | React.ReactNode[]) =>
+export const buildSteps = (children: React.ReactNode) =>
   React.Children.toArray(children).reduce((acc: WizardStepType[], child: React.ReactNode, index: number) => {
     if (isWizardStep(child)) {
       const { props: childProps } = child;
@@ -57,3 +57,26 @@ export const normalizeStepProps = ({
   steps: _steps,
   ...controlStep
 }: WizardStepProps): Omit<WizardStepType, 'index'> => controlStep;
+
+/**
+ * Determines whether a step is navigable based on disabled/hidden properties
+ * @param steps All steps
+ * @param step
+ * @returns boolean
+ */
+export const isStepEnabled = (steps: WizardStepType[], step: WizardStepType): boolean => {
+  // Skip over parent steps since they are merely containers of sub-steps
+  if (!isWizardParentStep(step) && !step.isHidden && !step.isDisabled) {
+    if (isWizardSubStep(step)) {
+      const parentStep = steps.find((otherStep) => otherStep.id === step.parentId);
+
+      if (!parentStep.isHidden && !parentStep.isDisabled) {
+        return true;
+      }
+    } else {
+      return true;
+    }
+  }
+
+  return false;
+};

package/src/components/assets/PF-HorizontalLogo-Color.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="679px" height="158px" viewBox="0 0 679 158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>PF-HorizontalLogo-Color </title>
+    <defs>
+        <linearGradient x1="68%" y1="2.25860997e-13%" x2="32%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#2B9AF3" offset="0%"></stop>
+            <stop stop-color="#73BCF7" stop-opacity="0.502212631" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="PF-HorizontalLogo-Color" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="PatternFly-Copy-11" transform="translate(206.000000, 45.750000)" fill="#151515" fill-rule="nonzero">
+            <path d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z" id="Shape"></path>
+            <path d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z" id="Shape"></path>
+            <path d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z" id="Path"></path>
+            <path d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z" id="Path"></path>
+            <path d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z" id="Shape"></path>
+            <path d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z" id="Path"></path>
+            <path d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z" id="Path"></path>
+            <polygon id="Path" points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"></polygon>
+            <polygon id="Path" points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"></polygon>
+            <path d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z" id="Path"></path>
+        </g>
+        <g id="Logo" transform="translate(0.000000, 0.000000)">
+            <path d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z" id="Rectangle-Copy-17" fill="#0066CC"></path>
+            <path d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z" id="Path-2" fill="url(#linearGradient-1)"></path>
+            <path d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z" id="Path-2" fill="url(#linearGradient-1)" transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "></path>
+        </g>
+    </g>
+</svg>

package/src/components/assets/PF-IconLogo.svg

@@ -0,0 +1,17 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Logo">
+<path id="Rectangle-Copy-17" fill-rule="evenodd" clip-rule="evenodd" d="M15.6522 0H40V24.3478H37.3913C25.3851 24.3478 15.6522 14.6149 15.6522 2.6087V0Z" fill="#0066CC"/>
+<path id="Path-2" fill-rule="evenodd" clip-rule="evenodd" d="M40 0.869568L16.5217 40H34.9367C37.7331 40 40 37.7331 40 34.9367V0.869568Z" fill="url(#paint0_linear_6460_7774)"/>
+<path id="Path-2_2" fill-rule="evenodd" clip-rule="evenodd" d="M39.1304 9.53674e-06L-3.8147e-06 23.4783V5.0633C-3.8147e-06 2.26692 2.26691 9.53674e-06 5.06329 9.53674e-06L39.1304 9.53674e-06Z" fill="url(#paint1_linear_6460_7774)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_6460_7774" x1="1613.04" y1="0.869504" x2="-337.034" y2="3251" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2B9AF3"/>
+<stop offset="1" stop-color="#73BCF7" stop-opacity="0.502213"/>
+</linearGradient>
+<linearGradient id="paint1_linear_6460_7774" x1="39.1305" y1="-1573.04" x2="-3211" y2="377.033" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2B9AF3"/>
+<stop offset="1" stop-color="#73BCF7" stop-opacity="0.502213"/>
+</linearGradient>
+</defs>
+</svg>

package/src/components/assets/pf-background.svg

@@ -0,0 +1,22 @@
+<svg width="541" height="370" viewBox="0 0 541 370" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M459 95L541 95V177H532.214C491.779 177 459 144.221 459 103.786V95Z" fill="#A3A3A3" fill-opacity="0.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M451 95L369 95V177H377.786C418.221 177 451 144.221 451 103.786V95Z" fill="#A3A3A3" fill-opacity="0.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M357 177H276V95H284.679C324.621 95 357 127.779 357 168.214V177Z" fill="#A3A3A3" fill-opacity="0.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M184 177H266V95H257.214C216.779 95 184 127.779 184 168.214V177Z" fill="#A3A3A3" fill-opacity="0.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M184 0L266 0V82H257.214C216.779 82 184 49.2208 184 8.78571V0Z" fill="#A3A3A3" fill-opacity="0.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M356 82L274 82V-2.06438e-06H282.786C323.221 -2.06438e-06 356 32.7792 356 73.2143V82Z" fill="#A3A3A3" fill-opacity="0.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M449 82L368 82V-2.06438e-06H376.679C416.621 -2.06438e-06 449 32.7792 449 73.2143V82Z" fill="#A3A3A3" fill-opacity="0.2"/>
+<path d="M459.255 67.0552C459.142 68.4117 459.066 69.7788 459.028 71.1553L460.028 71.183C460.009 71.8578 460 72.5349 460 73.2143V75.4107H459V79.8036H460V81H461.05V82H465.15V81H469.25V82H473.35V81H477.45V82H481.55V81H485.65V82H489.75V81H493.85V82H497.95V81H502.05V82H506.15V81H510.25V82H514.35V81L518.45 81V82H522.55V81H526.65V82H530.75V81H534.85V82H538.95V81H540V79.95H541V75.85H540V71.75H541V67.65H540V63.55H541V59.45H540V55.35H541V51.25H540V47.15H541V43.05H540V38.95H541V34.85H540V30.75H541V26.65H540V22.55H541V18.45H540V14.35H541V10.25H540V6.15H541V2.05H540V1H538.804V0H534.411V1H532.214C531.535 1 530.858 1.00938 530.183 1.02801L530.155 0.0283966C528.779 0.0664062 527.412 0.14241 526.055 0.255402L526.138 1.25195C524.785 1.36462 523.443 1.51457 522.113 1.70077L521.974 0.710419C520.612 0.901024 519.262 1.1291 517.926 1.39356L518.12 2.37455C516.79 2.6376 515.473 2.93716 514.171 3.27213L513.922 2.30366C512.591 2.64605 511.274 3.02493 509.974 3.43919L510.277 4.39203C508.986 4.80311 507.711 5.2495 506.453 5.73007L506.096 4.7959C504.814 5.28573 503.549 5.81057 502.302 6.36926L502.711 7.28181C501.476 7.83522 500.26 8.42233 499.063 9.04195L498.603 8.15388C497.385 8.78435 496.187 9.448 495.011 10.1436L495.519 11.0045C494.355 11.6926 493.212 12.4124 492.092 13.1628L491.535 12.3318C490.396 13.0943 489.28 13.8878 488.188 14.7113L488.79 15.5099C487.71 16.3234 486.654 17.1665 485.623 18.038L484.978 17.2743C483.932 18.1585 482.911 19.0715 481.916 20.0121L482.603 20.7387C481.622 21.6668 480.667 22.6221 479.739 23.6034L479.012 22.9163C478.072 23.9109 477.158 24.9318 476.274 25.9779L477.038 26.6234C476.167 27.6544 475.323 28.7102 474.51 29.7895L473.711 29.1876C472.888 30.2801 472.094 31.3964 471.332 32.5353L472.163 33.0916C471.412 34.2124 470.693 35.3555 470.004 36.5194L469.144 36.0105C468.448 37.1873 467.784 38.3853 467.154 39.6032L468.042 40.0629C467.422 41.2598 466.835 42.4763 466.282 43.7112L465.369 43.3022C464.811 44.5488 464.286 45.8139 463.796 47.0963L464.73 47.4531C464.25 48.7112 463.803 49.9863 463.392 51.2771L462.439 50.9736C462.025 52.2743 461.646 53.5909 461.304 54.922L462.272 55.1711C461.937 56.4734 461.638 57.79 461.375 59.1197L460.394 58.9256C460.129 60.2625 459.901 61.6124 459.71 62.9743L460.701 63.1129C460.515 64.4433 460.365 65.7854 460.252 67.1382L459.255 67.0552Z" stroke="#A3A3A3" stroke-opacity="0.3" stroke-width="2" stroke-dasharray="4 4"/>
+<path d="M275.255 302.945C275.142 301.588 275.066 300.221 275.028 298.845L276.028 298.817C276.009 298.142 276 297.465 276 296.786V294.589H275V290.196H276V289H277.05V288H281.15V289H285.25V288H289.35V289H293.45V288H297.55V289H301.65V288H305.75V289H309.85V288H313.95V289H318.05V288H322.15V289H326.25V288H330.35V289H334.45V288H338.55V289H342.65V288H346.75V289H350.85V288H354.95V289H356V290.05H357V294.15H356V298.25H357V302.35H356V306.45H357V310.55H356V314.65H357V318.75H356V322.85H357V326.95H356V331.05H357V335.15H356V339.25H357V343.35H356V347.45H357V351.55H356V355.65H357V359.75H356V363.85H357V367.95H356V369H354.804V370H350.411V369H348.214C347.535 369 346.858 368.991 346.183 368.972L346.155 369.972C344.779 369.934 343.412 369.858 342.055 369.745L342.138 368.748C340.785 368.635 339.443 368.485 338.113 368.299L337.974 369.29C336.612 369.099 335.262 368.871 333.926 368.606L334.12 367.625C332.79 367.362 331.473 367.063 330.171 366.728L329.922 367.696C328.591 367.354 327.274 366.975 325.974 366.561L326.277 365.608C324.986 365.197 323.711 364.75 322.453 364.27L322.096 365.204C320.814 364.714 319.549 364.189 318.302 363.631L318.711 362.718C317.476 362.165 316.26 361.578 315.063 360.958L314.603 361.846C313.385 361.216 312.187 360.552 311.011 359.856L311.519 358.996C310.355 358.307 309.212 357.588 308.092 356.837L307.535 357.668C306.396 356.906 305.28 356.112 304.188 355.289L304.79 354.49C303.71 353.677 302.654 352.833 301.623 351.962L300.978 352.726C299.932 351.842 298.911 350.928 297.916 349.988L298.603 349.261C297.622 348.333 296.667 347.378 295.739 346.397L295.012 347.084C294.072 346.089 293.158 345.068 292.274 344.022L293.038 343.377C292.167 342.346 291.323 341.29 290.51 340.21L289.711 340.812C288.888 339.72 288.094 338.604 287.332 337.465L288.163 336.908C287.412 335.788 286.693 334.645 286.004 333.481L285.144 333.989C284.448 332.813 283.784 331.615 283.154 330.397L284.042 329.937C283.422 328.74 282.835 327.524 282.282 326.289L281.369 326.698C280.811 325.451 280.286 324.186 279.796 322.904L280.73 322.547C280.25 321.289 279.803 320.014 279.392 318.723L278.439 319.026C278.025 317.726 277.646 316.409 277.304 315.078L278.272 314.829C277.937 313.527 277.638 312.21 277.375 310.88L276.394 311.074C276.129 309.738 275.901 308.388 275.71 307.026L276.701 306.887C276.515 305.557 276.365 304.215 276.252 302.862L275.255 302.945Z" stroke="#A3A3A3" stroke-opacity="0.3" stroke-width="2" stroke-dasharray="4 4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M267 288H185V370H193.786C234.221 370 267 337.221 267 296.786V288Z" fill="#A3A3A3" fill-opacity="0.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M173 370H92L92 288H100.679C140.621 288 173 320.779 173 361.214V370Z" fill="#A3A3A3" fill-opacity="0.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 370H82L82 288H73.2143C32.7792 288 0 320.779 0 361.214L0 370Z" fill="#A3A3A3" fill-opacity="0.2"/>
+<path d="M0.255399 207.945C0.142409 206.588 0.0664028 205.221 0.0283928 203.845L1.02801 203.817C1.00938 203.142 1 202.465 1 201.786L1 199.589H0L0 195.196H1L1 194H2.05001V193H6.15001V194H10.25V193H14.35V194H18.45V193H22.55V194H26.65V193H30.75V194H34.85V193H38.95V194H43.05V193H47.15V194H51.25V193H55.35V194H59.45V193H63.55V194H67.65V193H71.75V194H75.85V193H79.95V194H81V195.05H82V199.15H81V203.25H82V207.35H81V211.45H82V215.55H81V219.65H82V223.75H81V227.85H82V231.95H81V236.05H82V240.15H81V244.25H82V248.35H81L81 252.45H82V256.55H81V260.65H82V264.75H81V268.85H82V272.95H81V274H79.8036V275H75.4107V274H73.2143C72.5349 274 71.8578 273.991 71.1829 273.972L71.1553 274.972C69.7788 274.934 68.4117 274.858 67.0552 274.745L67.1382 273.748C65.7854 273.635 64.4433 273.485 63.1129 273.299L62.9743 274.29C61.6124 274.099 60.2625 273.871 58.9256 273.606L59.1197 272.625C57.79 272.362 56.4734 272.063 55.1711 271.728L54.922 272.696C53.5909 272.354 52.2743 271.975 50.9736 271.561L51.2771 270.608C49.9863 270.197 48.7112 269.75 47.4531 269.27L47.0963 270.204C45.8139 269.714 44.5488 269.189 43.3022 268.631L43.7112 267.718C42.4763 267.165 41.2598 266.578 40.0629 265.958L39.6032 266.846C38.3853 266.216 37.1873 265.552 36.0106 264.856L36.5194 263.996C35.3555 263.307 34.2125 262.588 33.0916 261.837L32.5353 262.668C31.3964 261.906 30.2801 261.112 29.1876 260.289L29.7895 259.49C28.7102 258.677 27.6545 257.833 26.6234 256.962L25.9779 257.726C24.9318 256.842 23.9109 255.928 22.9163 254.988L23.6034 254.261C22.6221 253.333 21.6668 252.378 20.7387 251.397L20.0121 252.084C19.0715 251.089 18.1585 250.068 17.2743 249.022L18.038 248.377C17.1665 247.346 16.3234 246.29 15.5099 245.21L14.7113 245.812C13.8879 244.72 13.0943 243.604 12.3318 242.465L13.1628 241.908C12.4124 240.788 11.6926 239.645 11.0045 238.481L10.1437 238.989C9.448 237.813 8.78435 236.615 8.15388 235.397L9.04195 234.937C8.42233 233.74 7.83523 232.524 7.28181 231.289L6.36926 231.698C5.81057 230.451 5.28573 229.186 4.7959 227.904L5.73008 227.547C5.2495 226.289 4.80311 225.014 4.39203 223.723L3.43919 224.026C3.02494 222.726 2.64605 221.409 2.30366 220.078L3.27214 219.829C2.93717 218.527 2.63761 217.21 2.37455 215.88L1.39356 216.074C1.1291 214.738 0.901025 213.388 0.71042 212.026L1.70077 211.887C1.51458 210.557 1.36462 209.215 1.25195 207.862L0.255399 207.945Z" stroke="#A3A3A3" stroke-opacity="0.3" stroke-width="2" stroke-dasharray="4 4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M172 275H90L90 193H98.7857C139.221 193 172 225.779 172 266.214V275Z" fill="#A3A3A3" fill-opacity="0.2"/>
+<path d="M538.745 355.055C538.858 356.412 538.934 357.779 538.972 359.155L537.972 359.183C537.991 359.858 538 360.535 538 361.214V363.411H539V367.804H538V369H536.95V370H532.85V369H528.75V370H524.65V369H520.55V370H516.45V369H512.35V370H508.25V369H504.15V370H500.05V369H495.95V370H491.85V369H487.75V370H483.65V369H479.55V370H475.45V369H471.35V370H467.25V369H463.15V370H459.05V369H458V367.95H457V363.85H458V359.75H457V355.65H458V351.55H457V347.45H458V343.35H457V339.25H458V335.15H457V331.05H458V326.95H457V322.85H458V318.75H457V314.65H458V310.55H457V306.45H458V302.35H457V298.25H458V294.15H457V290.05H458V289H459.196V288H463.589V289H465.786C466.465 289 467.142 289.009 467.817 289.028L467.845 288.028C469.221 288.066 470.588 288.142 471.945 288.255L471.862 289.252C473.215 289.365 474.557 289.515 475.887 289.701L476.026 288.71C477.388 288.901 478.738 289.129 480.074 289.394L479.88 290.375C481.21 290.638 482.527 290.937 483.829 291.272L484.078 290.304C485.409 290.646 486.726 291.025 488.026 291.439L487.723 292.392C489.014 292.803 490.289 293.249 491.547 293.73L491.904 292.796C493.186 293.286 494.451 293.811 495.698 294.369L495.289 295.282C496.524 295.835 497.74 296.422 498.937 297.042L499.397 296.154C500.615 296.784 501.813 297.448 502.989 298.144L502.481 299.004C503.645 299.693 504.788 300.412 505.908 301.163L506.465 300.332C507.604 301.094 508.72 301.888 509.812 302.711L509.21 303.51C510.29 304.323 511.346 305.166 512.377 306.038L513.022 305.274C514.068 306.158 515.089 307.072 516.084 308.012L515.397 308.739C516.378 309.667 517.333 310.622 518.261 311.603L518.988 310.916C519.928 311.911 520.842 312.932 521.726 313.978L520.962 314.623C521.833 315.654 522.677 316.71 523.49 317.79L524.289 317.188C525.112 318.28 525.906 319.396 526.668 320.535L525.837 321.092C526.588 322.212 527.307 323.355 527.996 324.519L528.856 324.011C529.552 325.187 530.216 326.385 530.846 327.603L529.958 328.063C530.578 329.26 531.165 330.476 531.718 331.711L532.631 331.302C533.189 332.549 533.714 333.814 534.204 335.096L533.27 335.453C533.75 336.711 534.197 337.986 534.608 339.277L535.561 338.974C535.975 340.274 536.354 341.591 536.696 342.922L535.728 343.171C536.063 344.473 536.362 345.79 536.625 347.12L537.606 346.926C537.871 348.262 538.099 349.612 538.29 350.974L537.299 351.113C537.485 352.443 537.635 353.785 537.748 355.138L538.745 355.055Z" stroke="#A3A3A3" stroke-opacity="0.3" stroke-width="2" stroke-dasharray="4 4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M366 370H447V288H438.321C398.379 288 366 320.779 366 361.214V370Z" fill="#A3A3A3" fill-opacity="0.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M366 193H447V275H438.321C398.379 275 366 242.221 366 201.786V193Z" fill="#A3A3A3" fill-opacity="0.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M537 275H456V193H464.679C504.621 193 537 225.779 537 266.214V275Z" fill="#A3A3A3" fill-opacity="0.2"/>
+<path d="M264.751 260.092C264.861 261.441 264.935 262.8 264.972 264.168L263.973 264.195C263.991 264.866 264 265.539 264 266.214V268.411H265V272.804H264V274H262.975V275H258.925V274H254.875V275H250.825V274H246.775V275H242.725V274H238.675V275H234.625V274H230.575V275H226.525V274H222.475V275H218.425V274H214.375V275H210.325V274H206.275V275H202.225V274H198.175V275H194.125V274H190.075V275H186.025V274H185V272.95H184V268.85H185V264.75H184V260.65H185V256.55H184V252.45H185V248.35H184V244.25H185V240.15H184V236.05H185V231.95H184V227.85H185V223.75H184V219.65H185V215.55H184V211.45H185V207.35H184V203.25H185V199.15H184V195.05H185V194H186.17V193H190.509V194H192.679C193.354 194 194.026 194.009 194.697 194.028L194.725 193.029C196.093 193.067 197.452 193.144 198.8 193.259L198.715 194.255C200.059 194.369 201.392 194.521 202.714 194.709L202.855 193.719C204.208 193.912 205.549 194.143 206.877 194.41L206.679 195.391C207.999 195.657 209.306 195.96 210.599 196.298L210.853 195.331C212.174 195.677 213.481 196.06 214.771 196.479L214.463 197.43C215.743 197.846 217.007 198.296 218.254 198.782L218.617 197.85C219.888 198.344 221.142 198.874 222.378 199.438L221.962 200.348C223.185 200.906 224.39 201.498 225.575 202.123L226.041 201.239C227.246 201.874 228.432 202.543 229.596 203.244L229.08 204.101C230.231 204.794 231.361 205.519 232.469 206.274L233.032 205.448C234.157 206.215 235.26 207.013 236.339 207.842L235.73 208.635C236.795 209.453 237.836 210.3 238.853 211.175L239.506 210.418C240.537 211.305 241.543 212.222 242.524 213.166L241.83 213.887C242.796 214.817 243.737 215.776 244.651 216.76L245.384 216.079C246.309 217.076 247.207 218.099 248.077 219.147L247.308 219.786C248.164 220.818 248.993 221.874 249.792 222.955L250.596 222.36C251.404 223.452 252.184 224.569 252.932 225.707L252.096 226.256C252.832 227.376 253.538 228.518 254.213 229.681L255.078 229.179C255.76 230.354 256.41 231.55 257.028 232.765L256.137 233.218C256.743 234.412 257.318 235.626 257.86 236.857L258.776 236.454C259.322 237.697 259.836 238.958 260.315 240.235L259.379 240.587C259.849 241.84 260.285 243.11 260.687 244.395L261.641 244.097C262.046 245.392 262.416 246.702 262.751 248.026L261.781 248.271C262.109 249.567 262.401 250.877 262.658 252.2L263.64 252.009C263.898 253.339 264.121 254.681 264.307 256.035L263.316 256.171C263.498 257.494 263.644 258.829 263.754 260.174L264.751 260.092Z" stroke="#A3A3A3" stroke-opacity="0.3" stroke-width="2" stroke-dasharray="4 4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M275 275H357V193H348.214C307.779 193 275 225.779 275 266.214V275Z" fill="#A3A3A3" fill-opacity="0.2"/>
+</svg>

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/Banner.md

@@ -57,9 +57,9 @@ class BannerDemo extends React.Component {
           </PageSection>
           <PageSection>
             <Gallery hasGutter>
-              {Array.apply(0, Array(30)).map((x, i) => (
-                <GalleryItem key={i}>
-                  <Card key={i}>
+              {Array.from({ length: 30 }).map((_value, index) => (
+                <GalleryItem key={index}>
+                  <Card key={index}>
                     <CardBody>This is a card</CardBody>
                   </Card>
                 </GalleryItem>
@@ -131,7 +131,7 @@ class BannerDemo extends React.Component {
               </PageSection>
               <PageSection>
                 <Gallery hasGutter>
-                  {Array.apply(0, Array(30)).map((x, i) => (
+                  {Array.from({ length: 30 }).map((_value, index) => (
                     <GalleryItem key={i}>
                       <Card key={i}>
                         <CardBody>This is a card</CardBody>

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

@@ -12,8 +12,6 @@ import {
   DropdownItem,
   DropdownList,
   EmptyState,
-  EmptyStateHeader,
-  EmptyStateIcon,
   EmptyStateFooter,
   EmptyStateVariant,
   EmptyStateActions,
@@ -415,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>
@@ -484,12 +482,12 @@ export const CardViewBasic: React.FunctionComponent = () => {
           <Gallery hasGutter aria-label="Selectable card container">
             <Card isCompact>
               <Bullseye>
-                <EmptyState variant={EmptyStateVariant.xs}>
-                  <EmptyStateHeader
-                    headingLevel="h2"
-                    titleText="Add a new card to your page"
-                    icon={<EmptyStateIcon icon={PlusCircleIcon} />}
-                  />
+                <EmptyState
+                  headingLevel="h2"
+                  titleText="Add a new card to your page"
+                  icon={PlusCircleIcon}
+                  variant={EmptyStateVariant.xs}
+                >
                   <EmptyStateFooter>
                     <EmptyStateActions>
                       <Button variant="link">Add card</Button>

package/src/demos/CustomMenus/CustomMenus.md

@@ -50,6 +50,12 @@ Additionally, menu components may be connected to each other manually through ou
 
 ```
 
+### With inline search filter
+
+```ts file="./examples/InlineSearchFilterMenuDemo.tsx"
+
+```
+
 ### Tree view menu
 
 When rendering a menu-like element that does not contain `<MenuItem>` components, [panel](/components/panel) allows more flexible control and customization.

package/src/demos/CustomMenus/examples/InlineSearchFilterMenuDemo.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import {
+  Menu,
+  MenuList,
+  MenuContent,
+  MenuSearch,
+  MenuSearchInput,
+  Divider,
+  SearchInput,
+  SelectOption,
+  MenuToggle,
+  MenuContainer
+} from '@patternfly/react-core';
+
+export const InlineSearchFilterMenuDemo: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState(0);
+  const [input, setInput] = React.useState('');
+  const [isOpen, setIsOpen] = React.useState(false);
+  const toggleRef = React.useRef<any>();
+  const menuRef = React.useRef<any>();
+
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
+    const item = itemId as number;
+    // eslint-disable-next-line no-console
+    console.log(`clicked ${itemId}`);
+    setActiveItem(item);
+  };
+
+  const handleTextInputChange = (value: string) => {
+    if (!isOpen) {
+      setIsOpen(true);
+    }
+    setInput(value);
+  };
+
+  const menuListItemsText = [
+    'Action 1',
+    'Action 2',
+    'Action 3',
+    'My project',
+    'OpenShift cluster',
+    'Production Ansible',
+    'AWS',
+    'Azure',
+    'My project 2',
+    'OpenShift cluster ',
+    'Production Ansible 2 ',
+    'AWS 2',
+    'Azure 2'
+  ];
+
+  const menuListItems = menuListItemsText
+    .filter((item) => !input || item.toLowerCase().includes(input.toString().toLowerCase()))
+    .map((currentValue, index) => (
+      <SelectOption key={currentValue} itemId={index}>
+        {currentValue}
+      </SelectOption>
+    ));
+  if (input && menuListItems.length === 0) {
+    menuListItems.push(
+      <SelectOption isDisabled key="no result">
+        No results found
+      </SelectOption>
+    );
+  }
+
+  const toggle = (
+    <MenuToggle ref={toggleRef} onClick={() => setIsOpen(!isOpen)} isExpanded={isOpen}>
+      {isOpen ? 'Expanded' : 'Collapsed'}
+    </MenuToggle>
+  );
+
+  const menu = (
+    <Menu ref={menuRef} onSelect={onSelect} activeItemId={activeItem} isScrollable>
+      <MenuSearch>
+        <MenuSearchInput>
+          <SearchInput
+            value={input}
+            aria-label="Filter menu items"
+            onChange={(_event, value) => handleTextInputChange(value)}
+          />
+        </MenuSearchInput>
+      </MenuSearch>
+      <Divider />
+      <MenuContent maxMenuHeight="200px">
+        <MenuList>{menuListItems}</MenuList>
+      </MenuContent>
+    </Menu>
+  );
+
+  return (
+    <MenuContainer
+      menu={menu}
+      menuRef={menuRef}
+      toggle={toggle}
+      toggleRef={toggleRef}
+      isOpen={isOpen}
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      onOpenChangeKeys={['Escape']}
+    />
+  );
+};

package/src/demos/DashboardHeader.tsx

@@ -28,7 +28,7 @@ import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
-import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
+import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
 
 interface DashboardHeaderProps {
   /** Render custom notification badge */