fix react-docs version

redallen · redallen · commit 299914cdd2d1 · 2020-03-05T11:27:50.000-05:00
diff --git a/packages/react-core/rollup.config.js b/packages/react-core/rollup.config.js
@@ -0,0 +1,23 @@
+
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+// import css from 'rollup-plugin-css-porter';
+import scss from 'rollup-plugin-scss'
+
+export default {
+	input: 'dist/esm/index.js',
+	// input: 'test.js',
+	output: {
+		name: 'react-core',
+		file: 'dist/react-core.umd.js',
+		format: 'umd'
+	},
+	plugins: [
+		resolve({ extensions: ['.js', '.css'] }),
+		commonjs({
+      include: [/node_modules/, /react-styles\/css/, /react-tokens/]
+    }),
+		scss()
+	],
+	external: ['react', 'react-dom', 'focus-trap']
+}
diff --git a/packages/react-core/src/components/AboutModal/AboutModalContainer.tsx b/packages/react-core/src/components/AboutModal/AboutModalContainer.tsx
@@ -1,7 +1,5 @@
 import * as React from 'react';
-
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const FocusTrap: any = require('focus-trap-react');
+import { FocusTrap } from '../../helpers';
 
 import styles from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 import { css } from '@patternfly/react-styles';
diff --git a/packages/react-core/src/components/ContextSelector/ContextSelector.tsx b/packages/react-core/src/components/ContextSelector/ContextSelector.tsx
@@ -9,11 +9,7 @@ import { Button, ButtonVariant } from '../Button';
 import { TextInput } from '../TextInput';
 import { InputGroup } from '../InputGroup';
 import { KEY_CODES } from '../../helpers/constants';
-
-// Can't use ES6 imports :(
-// The types for it are also wrong, we should probably ditch this dependency.
-/* eslint-disable-next-line @typescript-eslint/no-var-requires */
-const FocusTrap: any = require('focus-trap-react');
+import { FocusTrap } from '../../helpers';
 
 // seed for the aria-labelledby ID
 let currentId = 0;
diff --git a/packages/react-core/src/components/Modal/ModalContent.tsx b/packages/react-core/src/components/Modal/ModalContent.tsx
@@ -1,10 +1,6 @@
 import * as React from 'react';
 
-// Can't use ES6 imports :(
-// The types for it are also wrong, we should probably ditch this dependency.
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const FocusTrap: any = require('focus-trap-react');
-
+import { FocusTrap } from '../../helpers';
 import styles from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 import titleStyles from '@patternfly/react-styles/css/components/Title/title';
 import modalStyles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
diff --git a/packages/react-core/src/components/Popover/Popover.tsx b/packages/react-core/src/components/Popover/Popover.tsx
@@ -15,10 +15,7 @@ import GenerateId from '../../helpers/GenerateId/GenerateId';
 import popoverMaxWidth from '@patternfly/react-tokens/dist/js/c_popover_MaxWidth';
 import { ReactElement } from 'react';
 import { PickOptional } from '../../helpers/typeUtils';
-// Can't use ES6 imports :(
-// The types for it are also wrong, we should probably ditch this dependency.
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const FocusTrap: any = require('focus-trap-react');
+import { FocusTrap } from '../../helpers';
 
 export enum PopoverPosition {
   auto = 'auto',
diff --git a/packages/react-core/src/components/Select/SelectMenu.tsx b/packages/react-core/src/components/Select/SelectMenu.tsx
@@ -5,9 +5,7 @@ import { css } from '@patternfly/react-styles';
 import { SelectOptionObject } from './SelectOption';
 import { SelectConsumer, SelectVariant } from './selectConstants';
 import { Omit, PickOptional } from '../../helpers/typeUtils';
-
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const FocusTrap: any = require('focus-trap-react');
+import { FocusTrap } from '../../helpers';
 
 export interface SelectMenuProps extends Omit<React.HTMLProps<HTMLElement>, 'checked' | 'selected' | 'ref'> {
   /** Content rendered inside the SelectMenu */
diff --git a/packages/react-core/src/components/Wizard/examples/FinishedStep.js b/packages/react-core/src/components/Wizard/examples/FinishedStep.js
@@ -1,9 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-
-const propTypes = {
-  onClose: PropTypes.func.isRequired
-};
 
 class FinishedStep extends React.Component {
   constructor(props) {
@@ -77,6 +72,4 @@ class FinishedStep extends React.Component {
   }
 }
 
-FinishedStep.propTypes = propTypes;
-
 export default FinishedStep;
diff --git a/packages/react-core/src/components/Wizard/examples/SampleForm.js b/packages/react-core/src/components/Wizard/examples/SampleForm.js
@@ -1,14 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Form } from '@patternfly/react-core/dist/js/components/Form/Form';
 import { FormGroup } from '@patternfly/react-core/dist/js/components/Form/FormGroup';
 import { TextInput } from '@patternfly/react-core/dist/js/components/TextInput/TextInput';
 
-const propTypes = {
-  formValue: PropTypes.string,
-  isFormValid: PropTypes.bool,
-  onChange: PropTypes.func
-};
 
 const defaultProps = {
   formValue: '',
@@ -17,7 +11,6 @@ const defaultProps = {
 };
 
 class SampleForm extends React.Component {
-  static propTypes = propTypes;
   static defaultProps = defaultProps;
 
   state = {
diff --git a/packages/react-core/src/helpers/GenerateId/GenerateId.js b/packages/react-core/src/helpers/GenerateId/GenerateId.js
@@ -16,22 +16,13 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 
 let currentId = 0;
 
-const propTypes = {
-  /** String to prefix the random id with */
-  prefix: PropTypes.string,
-  /** Component to be rendered with the generated id */
-  children: PropTypes.func.isRequired
-};
-
 class GenerateId extends React.Component {
   static defaultProps = {
     prefix: 'pf-random-id-'
   };
-  static propTypes = propTypes;
   id = `${this.props.prefix}${currentId++}`;
 
   render() {
diff --git a/packages/react-core/src/helpers/PopoverBase/PopoverBase.js b/packages/react-core/src/helpers/PopoverBase/PopoverBase.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
 import tippy from 'tippy.js';
 
 // These props are not native to `tippy.js` and are specific to React only.
@@ -25,16 +24,6 @@ class PopoverBase extends React.Component {
 
   container = typeof document !== 'undefined' && document.createElement('div');
 
-  static propTypes = {
-    children: PropTypes.element.isRequired,
-    content: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
-    isEnabled: PropTypes.bool,
-    isVisible: PropTypes.bool,
-    onCreate: PropTypes.func,
-    trigger: PropTypes.string,
-    hideOnClick: PropTypes.bool
-  };
-
   static defaultProps = {
     isEnabled: undefined,
     isVisible: undefined,
diff --git a/packages/react-core/src/helpers/componentShape.js b/packages/react-core/src/helpers/componentShape.js
diff --git a/packages/react-core/src/helpers/focusTrap.tsx b/packages/react-core/src/helpers/focusTrap.tsx
@@ -0,0 +1,122 @@
+import * as React from 'react';
+import { Options as FocusTrapOptions } from 'focus-trap';
+import createFocusTrap from 'focus-trap';
+
+interface FocusTrapProps extends React.AllHTMLAttributes<any> {
+  active?: boolean;
+  paused?: boolean;
+  tag?: string;
+  focusTrapOptions?: FocusTrapOptions;
+  // Allow through any properties that weren't picked up
+  [prop: string]: any;
+}
+
+const checkedProps = [
+  'active',
+  'paused',
+  'tag',
+  'focusTrapOptions',
+  '_createFocusTrap'
+];
+
+export class FocusTrap extends React.Component<FocusTrapProps> {
+  previouslyFocusedElement: HTMLElement;
+  focusTrap: any;
+  node: any;
+
+  static defaultProps: FocusTrapProps = {
+    active: true,
+    tag: 'div',
+    paused: false,
+    focusTrapOptions: {},
+    _createFocusTrap: createFocusTrap
+  };
+
+  constructor(props) {
+    super(props)
+
+    if (typeof document !== 'undefined') {
+      this.previouslyFocusedElement = document.activeElement as HTMLElement;
+    }
+  }
+
+  componentDidMount() {
+    // We need to hijack the returnFocusOnDeactivate option,
+    // because React can move focus into the element before we arrived at
+    // this lifecycle hook (e.g. with autoFocus inputs). So the component
+    // captures the previouslyFocusedElement in componentWillMount,
+    // then (optionally) returns focus to it in componentWillUnmount.
+    const specifiedFocusTrapOptions = this.props.focusTrapOptions;
+    const tailoredFocusTrapOptions = {
+      returnFocusOnDeactivate: false
+    };
+    for (const optionName in specifiedFocusTrapOptions) {
+      if (!specifiedFocusTrapOptions.hasOwnProperty(optionName)) continue;
+      if (optionName === 'returnFocusOnDeactivate') continue;
+      tailoredFocusTrapOptions[optionName] =
+        specifiedFocusTrapOptions[optionName];
+    }
+
+    this.focusTrap = this.props._createFocusTrap(
+      this.node,
+      tailoredFocusTrapOptions
+    );
+    if (this.props.active) {
+      this.focusTrap.activate();
+    }
+    if (this.props.paused) {
+      this.focusTrap.pause();
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.active && !this.props.active) {
+      const { returnFocusOnDeactivate } = this.props.focusTrapOptions;
+      const returnFocus = returnFocusOnDeactivate || false;
+      const config = { returnFocus };
+      this.focusTrap.deactivate(config);
+    } else if (!prevProps.active && this.props.active) {
+      this.focusTrap.activate();
+    }
+
+    if (prevProps.paused && !this.props.paused) {
+      this.focusTrap.unpause();
+    } else if (!prevProps.paused && this.props.paused) {
+      this.focusTrap.pause();
+    }
+  }
+
+  componentWillUnmount() {
+    this.focusTrap.deactivate();
+    if (
+      this.props.focusTrapOptions.returnFocusOnDeactivate !== false &&
+      this.previouslyFocusedElement &&
+      this.previouslyFocusedElement.focus
+    ) {
+      this.previouslyFocusedElement.focus();
+    }
+  }
+
+  setNode = el => {
+    this.node = el;
+  };
+
+  render() {
+    const elementProps = {
+      ref: this.setNode
+    };
+
+    // This will get id, className, style, etc. -- arbitrary element props
+    for (const prop in this.props) {
+      if (!this.props.hasOwnProperty(prop)) continue;
+      if (checkedProps.includes(prop)) continue;
+      elementProps[prop] = this.props[prop];
+    }
+
+    return React.createElement(
+      this.props.tag,
+      elementProps,
+      this.props.children
+    );
+  }
+}
diff --git a/packages/react-core/src/helpers/index.ts b/packages/react-core/src/helpers/index.ts
@@ -1,6 +1,7 @@
 export { default as GenerateId } from './GenerateId/GenerateId';
 export * from './util';
 export * from './constants';
+export * from './focusTrap';
 export * from './htmlConstants';
 export * from './typeUtils';
-export * from './withInnerRef';
+export * from './withInnerRef';
diff --git a/packages/react-core/test.html b/packages/react-core/test.html
@@ -0,0 +1,7 @@
+<body>
+  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
+  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
+  <script src="https://unpkg.com/prop-types@15/prop-types.js" crossorigin></script>
+
+  <script src="dist/react-core.umd.js"></script>
+</body>
diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/react-docs",
   "description": "PatternFly React Docs",
-  "version": "4.20.24",
+  "version": "4.20.25",
   "author": "Red Hat",
   "license": "MIT",
   "private": true,

Original file line number	Diff line number	Diff line change
`@@ -1,9 +1,4 @@`
`1`	`1`	`import React from 'react';`
`2`		`-import PropTypes from 'prop-types';`
`3`		`-`
`4`		`-const propTypes = {`
`5`		`- onClose: PropTypes.func.isRequired`
`6`		`-};`
`7`	`2`
`8`	`3`	`class FinishedStep extends React.Component {`
`9`	`4`	`constructor(props) {`
`@@ -77,6 +72,4 @@ class FinishedStep extends React.Component {`
`77`	`72`	`}`
`78`	`73`	`}`
`79`	`74`
`80`		`-FinishedStep.propTypes = propTypes;`
`81`		`-`
`82`	`75`	`export default FinishedStep;`