Bug/v7 merge conflict fix (reactstrap#1324)

Author: Kaleb Burd

CHANGELOG.md

@@ -1,3 +1,25 @@
+<a name="6.5.0"></a>
+# [6.5.0](https://github.com/reactstrap/reactstrap/compare/6.4.0...6.5.0) (2018-10-04)
+
+
+### Bug Fixes
+
+* **boundariesElement:** add DOMElement to allowed proptypes ([#1238](https://github.com/reactstrap/reactstrap/issues/1238)) ([cfe7318](https://github.com/reactstrap/reactstrap/commit/cfe7318))
+* **Dropdown:** enter key triggers onClick ([#1232](https://github.com/reactstrap/reactstrap/issues/1232)) ([f2528da](https://github.com/reactstrap/reactstrap/commit/f2528da)), closes [#1228](https://github.com/reactstrap/reactstrap/issues/1228)
+* **Modal:** do not trigger focus on SVG elements ([#1212](https://github.com/reactstrap/reactstrap/issues/1212)) ([c7e6ef5](https://github.com/reactstrap/reactstrap/commit/c7e6ef5)), closes [#1208](https://github.com/reactstrap/reactstrap/issues/1208)
+* **Modal:** use static openCount to become resilient to classList modification ([#1190](https://github.com/reactstrap/reactstrap/issues/1190)) ([c8ceeeb](https://github.com/reactstrap/reactstrap/commit/c8ceeeb)), closes [#1189](https://github.com/reactstrap/reactstrap/issues/1189)
+* **Tooltip:** clear timers on component unmount ([#1180](https://github.com/reactstrap/reactstrap/issues/1180)) ([9fea409](https://github.com/reactstrap/reactstrap/commit/9fea409))
+
+
+### Features
+
+* **Button:** add close icon support ([#1206](https://github.com/reactstrap/reactstrap/issues/1206)) ([02f5e9a](https://github.com/reactstrap/reactstrap/commit/02f5e9a)), closes [#1182](https://github.com/reactstrap/reactstrap/issues/1182)
+* **FormGrid:** Add form-row ([#1237](https://github.com/reactstrap/reactstrap/issues/1237)) ([205e80d](https://github.com/reactstrap/reactstrap/commit/205e80d)), closes [#1195](https://github.com/reactstrap/reactstrap/issues/1195)
+* **Modal:** add custom close button ([#1168](https://github.com/reactstrap/reactstrap/issues/1168)) ([5f33a1a](https://github.com/reactstrap/reactstrap/commit/5f33a1a))
+* **Popover/Tooltip:** Implented usage of react 16.3 RefObject as target ([#1200](https://github.com/reactstrap/reactstrap/issues/1200)) ([0eade39](https://github.com/reactstrap/reactstrap/commit/0eade39)), closes [#1198](https://github.com/reactstrap/reactstrap/issues/1198)
+
+
+
 <a name="6.4.0"></a>
 # [6.4.0](https://github.com/reactstrap/reactstrap/compare/6.3.1...6.4.0) (2018-08-17)
 

README.md

@@ -34,8 +34,8 @@ Then open [http://localhost:3000/](http://localhost:3000/) to see your app. The
 Install reactstrap and Bootstrap from NPM. Reactstrap does not include Bootstrap CSS so this needs to be installed as well:
 
 ```
-npm install --save bootstrap@4.1.1
-npm install --save reactstrap react@^16.3.2 react-dom@^16.3.2
+npm install --save bootstrap
+npm install --save reactstrap react react-dom
 ```
 
 Import Bootstrap CSS in the ```src/index.js``` file:

docs/lib/Components/ButtonDropdownPage.js

@@ -10,6 +10,7 @@ import {
 import Example from '../examples/ButtonDropdownMulti';
 import ExampleSplit from '../examples/ButtonDropdownMultiSplit';
 import ButtonDropdownExample from '../examples/ButtonDropdown';
+import ButtonDropdownUncontrolledExample from '../examples/ButtonDropdownUncontrolled'
 import SectionTitle from '../UI/SectionTitle';
 
 const ButtonDropdownExampleSource = require('!!raw!../examples/ButtonDropdown');
@@ -165,6 +166,33 @@ DropdownToggle.propTypes = {
 </ButtonDropdown>`}
           </PrismCode>
         </pre>
+        <SectionTitle>Uncontrolled Dropdown</SectionTitle>
+        <div className="docs-example">
+          <ButtonDropdownUncontrolledExample />
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+{`import React from 'react';
+import { UncontrolledButtonDropdown, DropdownMenu, DropdownItem, DropdownToggle } from 'reactstrap';
+
+export default function Example () => {
+  return (
+    <UncontrolledButtonDropdown>
+      <DropdownToggle caret>
+        Dropdown
+      </DropdownToggle>
+      <DropdownMenu>
+        <DropdownItem header>Header</DropdownItem>
+        <DropdownItem disabled>Action</DropdownItem>
+        <DropdownItem>Another Action</DropdownItem>
+        <DropdownItem divider />
+        <DropdownItem>Another Action</DropdownItem>
+      </DropdownMenu>
+    </UncontrolledButtonDropdown>
+  );
+}`}
+          </PrismCode>
+        </pre>
         <SectionTitle>Drop direction variations</SectionTitle>
         <div className="docs-example">
           <div>

docs/lib/Components/ButtonsPage.js

@@ -13,6 +13,9 @@ const ButtonOutlineSource = require('!!raw!../examples/ButtonOutline');
 import ButtonStateful from '../examples/ButtonStateful';
 const ButtonStatefulSource = require('!!raw!../examples/ButtonStateful');
 
+import ButtonCloseIcon from '../examples/ButtonCloseIcon';
+const ButtonCloseIconSource = require('!!raw!../examples/ButtonCloseIcon');
+
 export default class ButtonsPage extends React.Component {
   render() {
     return (
@@ -44,7 +47,10 @@ export default class ButtonsPage extends React.Component {
   innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
 
   onClick: PropTypes.func,
-  size: PropTypes.string
+  size: PropTypes.string,
+
+  // use close prop for BS4 close icon utility
+  close: PropTypes.bool,
 }`}
           </PrismCode>
         </pre>
@@ -123,6 +129,20 @@ export default class ButtonsPage extends React.Component {
             {ButtonStatefulSource}
           </PrismCode>
         </pre>
+
+        <SectionTitle>Close icon</SectionTitle>
+        <p>
+          Use a generic close icon to dismiss content. Use <code>&lt;Button close /&gt;</code> for the default icon. Otherwise, custom content for the button
+          may be defined. (e.g. JSX: <code>&lt;Button close&gt;&lt;span aria-hidden="true"&gt;&ndash;&lt;/span&gt;&lt;/Button&gt;</code>) The default aria-label is "Close".
+        </p>
+        <div className="docs-example">
+          <ButtonCloseIcon />
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+            {ButtonCloseIconSource}
+          </PrismCode>
+        </pre>
       </div>
     );
   }

docs/lib/Components/FormPage.js

@@ -10,6 +10,9 @@ const FormExampleSource = require('!!raw!../examples/Form');
 import FormGridExample from '../examples/FormGrid';
 const FormGridExampleSource = require('!!raw!../examples/FormGrid');
 
+import FormGridFormRowExample from '../examples/FormGridFormRow';
+const FormGridFormRowExampleSource = require('!!raw!../examples/FormGridFormRow');
+
 import FormInlineExample from '../examples/FormInline';
 const FormInlineExampleSource = require('!!raw!../examples/FormInline');
 
@@ -146,6 +149,16 @@ FormText.propTypes = {
           </PrismCode>
         </pre>
 
+        <SectionTitle>Form Grid with Form Row</SectionTitle>
+        <div className="docs-example">
+          <FormGridFormRowExample />
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+            {FormGridFormRowExampleSource}
+          </PrismCode>
+        </pre>
+
         <SectionTitle>Inline Form</SectionTitle>
         <div className="docs-example">
           <FormInlineExample />

docs/lib/Components/LayoutPage.js

@@ -32,7 +32,9 @@ export default class LayoutsPage extends React.Component {
         <pre>
           <PrismCode className="language-jsx">
 {`Row.propTypes = {
-  noGutters: PropTypes.bool
+  noGutters: PropTypes.bool,
+  // see https://reactstrap.github.io/components/form Form Grid with Form Row
+  form: PropTypes.bool
 }`}
           </PrismCode>
         </pre>

docs/lib/Components/ModalsPage.js

@@ -65,7 +65,7 @@ const ModalsPage = () => {
     PropTypes.bool,
     PropTypes.oneOf(['static'])
   ]),
-  // allows for a node/componet to exist next to the modal (outside of it). Useful for external close buttons
+  // allows for a node/component to exist next to the modal (outside of it). Useful for external close buttons
   // external: PropTypes.node,
   // called on componentDidMount
   onEnter: PropTypes.func,

docs/lib/Components/PopoversPage.js

@@ -37,7 +37,7 @@ export default class PopoversPage extends React.Component {
   // callback for toggling isOpen in the controlling component
   toggle:  PropTypes.func,
   // boundaries for popper, can be scrollParent, window, viewport, or any DOM element
-  boundariesElement: PropTypes.string,
+  boundariesElement: PropTypes.oneOfType([PropTypes.string, DOMElement]),
   target:  PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.func,

docs/lib/Components/TablesPage.js

@@ -48,7 +48,13 @@ borderless: PropTypes.bool,
 striped: PropTypes.bool,
 dark: PropTypes.bool,
 hover: PropTypes.bool,
-responsive: PropTypes.bool
+responsive: PropTypes.bool,
+// Custom ref handler that will be assigned to the "ref" of the inner <table> element
+innerRef: PropTypes.oneOfType([
+  PropTypes.func,
+  PropTypes.string,
+  PropTypes.object
+])
 };`}
         </PrismCode>
         </pre>

docs/lib/Components/TooltipsPage.js

@@ -33,7 +33,7 @@ export default class TooltipsPage extends React.Component {
   // space separated list of triggers (e.g. "click hover focus")
   trigger: PropTypes.string,
   // boundaries for popper, can be scrollParent, window, viewport, or any DOM element
-  boundariesElement: PropTypes.string,
+  boundariesElement: PropTypes.oneOfType([PropTypes.string, DOMElement]),
   // boolean to control the state of the tooltip
   isOpen: PropTypes.bool,
   hideArrow: PropTypes.bool,