feat(pf4): Upgrade to pf4v5 dependency

Update Babel to use PF4 dynamic import paths.

Author: Hyperkid123

package.json

@@ -189,5 +189,7 @@
       ]
     ]
   },
-  "dependencies": {}
+  "dependencies": {
+    "ts-node": "^10.9.1"
+  }
 }

packages/common/babel.config.js

@@ -6,7 +6,22 @@ const mapper = {
   TextVariants: 'Text',
   ButtonVariant: 'Button',
   TextListVariants: 'TextList',
-  TextListItemVariants: 'TextListItem'
+  TextListItemVariants: 'TextListItem',
+  FlexItem: 'Flex',
+  FormFieldGroup: 'Form',
+  FormFieldGroupHeader: 'Form',
+  FormHelperText: 'Form',
+  FormGroup: 'Form',
+  GridItem: 'Grid',
+  TextContent: 'Text',
+  HelperTextItem: 'HelperText',
+  ActionGroup: 'Form',
+  Tab: 'Tabs',
+  TabTitleText: 'Tabs',
+  WizardNavItem: 'Wizard',
+  WizardNav: 'Wizard',
+  WizardBody: 'Wizard',
+  WizardHeader: 'Wizard'
 };
 
 const blueprintMapper = {
@@ -93,7 +108,7 @@ const createPfReactTransform = (env) => [
       transform: (importName) => {
         let res;
         const files = glob.sync(
-          path.resolve(__dirname, `../{..,pf4-component-mapper}//node_modules/@patternfly/react-core/dist/${env}/**/${mapper[importName] || importName}.js`)
+          path.resolve(__dirname, `../{..,pf4-component-mapper}//node_modules/@patternfly/react-core/dist/dynamic/**/${mapper[importName] || importName}`)
         );
         if (files.length > 0) {
           res = files[0];
@@ -110,7 +125,7 @@ const createPfReactTransform = (env) => [
     },
     '@patternfly/react-icons': {
       transform: (importName) =>
-        `@patternfly/react-icons/dist/${env}/icons/${importName
+        `@patternfly/react-icons/dist/dynamic/icons/${importName
           .split(/(?=[A-Z])/)
           .join('-')
           .toLowerCase()}`,

packages/common/tsconfig.json

@@ -10,7 +10,7 @@
     "noErrorTruncation": true,
     "allowJs": true,
     "strict": true,
-    "noEmit": true,
+    "noEmit": true
   },
   "include": ["./src/**/*.ts", "./src/**/*.tsx", "./src/**/*.js"],
   "exclude": ["./dist"]

packages/pf4-component-mapper/.gitignore

@@ -91,5 +91,6 @@ vendor
 !firebae.json
 !firebaseFunctions.js
 !scripts/
+!dynamic-import-transform.ts
 
 .DS_STORE

packages/pf4-component-mapper/demo/demo-schemas/dual-list-schema.js

@@ -1,4 +1,6 @@
+import React from 'react';
 import { componentTypes as components } from '@data-driven-forms/react-form-renderer';
+import { DualListSortButton } from '../../src';
 
 const output = {
   title: 'Testing dual list',
@@ -8,30 +10,33 @@ const output = {
       component: components.DUAL_LIST_SELECT,
       name: 'dual-list-select',
       label: 'choose favorite animal',
+      isSortable: true,
+      availableOptionsActions: [<DualListSortButton position="left" key="sort" />],
+      chosenOptionsActions: [<DualListSortButton position="right" key="sort" />],
       options: [
         {
           value: 'cats',
-          label: 'cats'
+          label: 'cats',
         },
         {
           value: 'cats_1',
-          label: 'cats_1'
+          label: 'cats_1',
         },
         {
           value: 'cats_2',
-          label: 'cats_2'
+          label: 'cats_2',
         },
         {
           value: 'zebras',
-          label: 'zebras'
+          label: 'zebras',
         },
         {
           value: 'pigeons',
-          label: 'pigeons'
-        }
-      ]
-    }
-  ]
+          label: 'pigeons',
+        },
+      ],
+    },
+  ],
 };
 
 export default output;

packages/pf4-component-mapper/package.json

@@ -30,15 +30,15 @@
     "javascript"
   ],
   "devDependencies": {
-    "@patternfly/react-core": "^4.157.3",
-    "@patternfly/react-icons": "^4.11.7"
+    "@patternfly/react-core": "^5.0.0",
+    "@patternfly/react-icons": "^5.0.0"
   },
   "peerDependencies": {
     "@data-driven-forms/react-form-renderer": "*",
-    "@patternfly/react-core": "^4.157.3",
-    "@patternfly/react-icons": "^4.11.7",
-    "react": "^16.13.1 || ^17.0.2 || ^18.0.0",
-    "react-dom": "^16.13.1 || ^17.0.2 || ^18.0.0"
+    "@patternfly/react-core": "^5.0.0",
+    "@patternfly/react-icons": "^5.0.0",
+    "react": "^17.0.2 || ^18.0.0",
+    "react-dom": "^17.0.2 || ^18.0.0"
   },
   "dependencies": {
     "@data-driven-forms/common": "*",

packages/pf4-component-mapper/src/dual-list-select/dual-list-select.js

@@ -51,7 +51,9 @@ const DualList = (props) => {
       .filter((option) => (typeof option === 'object' ? value.includes(option.value) : value.includes(option)))
       .map((option) => option.label || option);
 
-    onListChange = (_newLeft, newRight) => input.onChange(newRight);
+    onListChange = (_e, _newLeft, newRight) => {
+      input.onChange(newRight);
+    };
 
     filterOption = (option, input) => (option.value ? option.value.includes(input) : option.includes(input));
   } else {
@@ -63,7 +65,9 @@ const DualList = (props) => {
       .filter((option) => (option.value ? value.includes(option.value) : value.includes(getValueFromNode(option))))
       .map((option) => option.label || option);
 
-    onListChange = (_newLeft, newRight) => input.onChange(newRight?.map(getValueFromNode));
+    onListChange = (_e, _newLeft, newRight) => {
+      input.onChange(newRight?.map(getValueFromNode));
+    };
 
     filterOption = (option, input) => (option.value ? option.value.includes(input) : getValueFromNode(option).includes(input));
   }

packages/pf4-component-mapper/src/dual-list-tree-select/dual-list-tree-select.js

@@ -84,7 +84,7 @@ const DualListTreeSelect = (props) => {
   const leftOptions = selectedOptions(options, value, false);
   const rightOptions = selectedOptions(options, value, true);
 
-  const onListChange = (_newLeft, newRight) => input.onChange(getValueFromSelected(newRight));
+  const onListChange = (_e, _newLeft, newRight) => input.onChange(getValueFromSelected(newRight));
 
   return (
     <FormGroup

packages/pf4-component-mapper/src/form-group/form-group.js

@@ -1,27 +1,30 @@
 import React from 'react';
-import { FormGroup as Pf4FormGroup, TextContent, Text } from '@patternfly/react-core';
+import { FormGroup as Pf4FormGroup, TextContent, Text, FormHelperText, HelperText, HelperTextItem } from '@patternfly/react-core';
 import PropTypes from 'prop-types';
 
 import showError from '../show-error/show-error';
 
-const FormGroup = ({ label, isRequired, helperText, meta, validateOnMount, description, hideLabel, children, id, FormGroupProps }) => (
-  <Pf4FormGroup
-    isRequired={isRequired}
-    label={!hideLabel && label}
-    fieldId={id}
-    helperText={((meta.touched || validateOnMount) && meta.warning) || helperText}
-    helperTextInvalid={meta.error || meta.submitError}
-    {...showError(meta, validateOnMount)}
-    {...FormGroupProps}
-  >
-    {description && (
-      <TextContent>
-        <Text component="small">{description}</Text>
-      </TextContent>
-    )}
-    {children}
-  </Pf4FormGroup>
-);
+const FormGroup = ({ label, isRequired, helperText, meta, validateOnMount, description, hideLabel, children, id, FormGroupProps }) => {
+  const { validated } = showError(meta, validateOnMount);
+  const validationInternal = (meta.touched || validateOnMount) && (meta.error || meta.submitError || meta.warning);
+  return (
+    <Pf4FormGroup isRequired={isRequired} label={!hideLabel && label} fieldId={id} aria-label={meta.error || meta.submitError} {...FormGroupProps}>
+      {description && (
+        <TextContent>
+          <Text component="small">{description}</Text>
+        </TextContent>
+      )}
+      {children}
+      {(helperText || ['error', 'warning'].includes(validated)) && (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem variant={validated}>{validationInternal || helperText}</HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      )}
+    </Pf4FormGroup>
+  );
+};
 
 FormGroup.propTypes = {
   label: PropTypes.node,

packages/pf4-component-mapper/src/select/select/clear-indicator.js

@@ -10,7 +10,7 @@ const ClearIndicator = ({ clearSelection }) => (
       clearSelection();
       event.stopPropagation();
     }}
-    className="pf-c-button pf-m-plain pf-c-select__toggle-clear pf-u-p-0"
+    className="pf-v5-c-button pf-v5-c-select__toggle-clear pf-v5-u-p-0"
     type="button"
     aria-label="Clear all"
   >