From 7da1dd029471f653bac513661d27ac5092ef523d Mon Sep 17 00:00:00 2001
From: Priya Ranjan Singh <mail@priyaranjan.net>
Date: Mon, 25 Jun 2018 23:32:59 +0200
Subject: [PATCH 1/7] docs (Search): update layout for search example to
 accommodate code (#2948)

Fake data used in a pre tag in search example makes content overflow
& leaves a place for improvement. The example at SUI doesn't face
such problems because the state is not displayed in examples.
---
 .../Search/Types/SearchExampleCategory.js        | 12 +++++++-----
 .../Search/Types/SearchExampleStandard.js        | 16 +++++++++-------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/docs/src/examples/modules/Search/Types/SearchExampleCategory.js b/docs/src/examples/modules/Search/Types/SearchExampleCategory.js
index 8e97fef3dd..fd6527c0ab 100644
--- a/docs/src/examples/modules/Search/Types/SearchExampleCategory.js
+++ b/docs/src/examples/modules/Search/Types/SearchExampleCategory.js
@@ -1,7 +1,7 @@
 import _ from 'lodash'
 import faker from 'faker'
 import React, { Component } from 'react'
-import { Search, Grid, Header } from 'semantic-ui-react'
+import { Search, Grid, Header, Segment } from 'semantic-ui-react'
 
 const getResults = () =>
   _.times(5, () => ({
@@ -76,10 +76,12 @@ export default class SearchExampleCategory extends Component {
           />
         </Grid.Column>
         <Grid.Column width={8}>
-          <Header>State</Header>
-          <pre>{JSON.stringify(this.state, null, 2)}</pre>
-          <Header>Options</Header>
-          <pre>{JSON.stringify(source, null, 2)}</pre>
+          <Segment>
+            <Header>State</Header>
+            <pre style={{ overflowX: 'auto' }}>{JSON.stringify(this.state, null, 2)}</pre>
+            <Header>Options</Header>
+            <pre style={{ overflowX: 'auto' }}>{JSON.stringify(source, null, 2)}</pre>
+          </Segment>
         </Grid.Column>
       </Grid>
     )
diff --git a/docs/src/examples/modules/Search/Types/SearchExampleStandard.js b/docs/src/examples/modules/Search/Types/SearchExampleStandard.js
index 2569517388..7d5fe3d8fb 100644
--- a/docs/src/examples/modules/Search/Types/SearchExampleStandard.js
+++ b/docs/src/examples/modules/Search/Types/SearchExampleStandard.js
@@ -1,7 +1,7 @@
 import _ from 'lodash'
 import faker from 'faker'
 import React, { Component } from 'react'
-import { Search, Grid, Header } from 'semantic-ui-react'
+import { Search, Grid, Header, Segment } from 'semantic-ui-react'
 
 const source = _.times(5, () => ({
   title: faker.company.companyName(),
@@ -40,7 +40,7 @@ export default class SearchExampleStandard extends Component {
 
     return (
       <Grid>
-        <Grid.Column width={8}>
+        <Grid.Column width={6}>
           <Search
             loading={isLoading}
             onResultSelect={this.handleResultSelect}
@@ -50,11 +50,13 @@ export default class SearchExampleStandard extends Component {
             {...this.props}
           />
         </Grid.Column>
-        <Grid.Column width={8}>
-          <Header>State</Header>
-          <pre>{JSON.stringify(this.state, null, 2)}</pre>
-          <Header>Options</Header>
-          <pre>{JSON.stringify(source, null, 2)}</pre>
+        <Grid.Column width={10}>
+          <Segment>
+            <Header>State</Header>
+            <pre style={{ overflowX: 'auto' }}>{JSON.stringify(this.state, null, 2)}</pre>
+            <Header>Options</Header>
+            <pre style={{ overflowX: 'auto' }}>{JSON.stringify(source, null, 2)}</pre>
+          </Segment>
         </Grid.Column>
       </Grid>
     )

From 02af086cab3a1be14356047c6817623d775f1caa Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <alexander.mcgarret@gmail.com>
Date: Tue, 26 Jun 2018 00:34:03 +0300
Subject: [PATCH 2/7] fix(Icon): fix handling of aria-label (#2947)

* fix(Icon): fix handling of aria-label

Signed-off-by: Oleksandr Fediashov <ofediashov@exadel.com>

* fix(Icon): fix handling of aria-label

Signed-off-by: Oleksandr Fediashov <ofediashov@exadel.com>
---
 src/elements/Icon/Icon.d.ts           |  3 +++
 src/elements/Icon/Icon.js             | 13 +++++++++++--
 test/specs/elements/Icon/Icon-test.js | 27 ++++++++++++++++++++++-----
 3 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/src/elements/Icon/Icon.d.ts b/src/elements/Icon/Icon.d.ts
index 7925da2cc9..76010beee6 100644
--- a/src/elements/Icon/Icon.d.ts
+++ b/src/elements/Icon/Icon.d.ts
@@ -53,6 +53,9 @@ export interface IconProps {
   /** Size of the icon. */
   size?: IconSizeProp
 
+  /** Icon can have an aria hidden. */
+  'aria-hidden'?: string
+
   /** Icon can have an aria label. */
   'aria-label'?: string
 }
diff --git a/src/elements/Icon/Icon.js b/src/elements/Icon/Icon.js
index c17fee5bbb..3010e74eaa 100644
--- a/src/elements/Icon/Icon.js
+++ b/src/elements/Icon/Icon.js
@@ -66,6 +66,9 @@ class Icon extends Component {
     /** Size of the icon. */
     size: PropTypes.oneOf(_.without(SUI.SIZES, 'medium')),
 
+    /** Icon can have an aria label. */
+    'aria-hidden': PropTypes.string,
+
     /** Icon can have an aria label. */
     'aria-label': PropTypes.string,
   }
@@ -82,10 +85,16 @@ class Icon extends Component {
 
   getIconAriaOptions() {
     const ariaOptions = {}
-    const { 'aria-label': ariaLabel } = this.props
+    const { 'aria-label': ariaLabel, 'aria-hidden': ariaHidden } = this.props
 
-    if (!ariaLabel) {
+    if (_.isNil(ariaLabel)) {
       ariaOptions['aria-hidden'] = 'true'
+    } else {
+      ariaOptions['aria-label'] = ariaLabel
+    }
+
+    if (!_.isNil(ariaHidden)) {
+      ariaOptions['aria-hidden'] = ariaHidden
     }
 
     return ariaOptions
diff --git a/test/specs/elements/Icon/Icon-test.js b/test/specs/elements/Icon/Icon-test.js
index ec26ba6e4e..b3b5494a8b 100644
--- a/test/specs/elements/Icon/Icon-test.js
+++ b/test/specs/elements/Icon/Icon-test.js
@@ -32,17 +32,34 @@ describe('Icon', () => {
     shallow(<Icon />).should.have.tagName('i')
   })
 
-  describe('aria', () => {
-    it('should add aria-hidden to icon', () => {
-      const wrapper = shallow(<Icon />)
+  describe('aria-hidden', () => {
+    it('should add aria-hidden by default', () => {
+      shallow(<Icon />).should.have.prop('aria-hidden', 'true')
+    })
+
+    it('should pass aria-hidden', () => {
+      shallow(<Icon aria-hidden='true' />).should.have.prop('aria-hidden', 'true')
+      shallow(<Icon aria-hidden='false' />).should.have.prop('aria-hidden', 'false')
+    })
+
+    it('should passed aria-hidden with aria-label', () => {
+      shallow(<Icon aria-hidden='false' aria-label='icon' />).should.have.prop(
+        'aria-hidden',
+        'false',
+      )
+    })
+  })
 
-      wrapper.should.have.prop('aria-hidden', 'true')
+  describe('aria-label', () => {
+    it('should not applied by default', () => {
+      shallow(<Icon />).should.have.not.prop('aria-label')
     })
 
-    it('should omit aria-hidden when aria-label is set', () => {
+    it('should pass value and omit aria-hidden when is set', () => {
       const wrapper = shallow(<Icon aria-label='icon' />)
 
       wrapper.should.not.have.prop('aria-hidden')
+      wrapper.should.have.prop('aria-label', 'icon')
     })
   })
 })

From 06ab95f39bf3f60b9b9461a42d58da60a98dd730 Mon Sep 17 00:00:00 2001
From: Matthias Knoll <matt@kohlikohl.com>
Date: Mon, 25 Jun 2018 16:45:53 -0700
Subject: [PATCH 3/7] feat(Popup): add context prop (#2934)

* Adding context property to Popup component. The property supports
setting an existing element as context which will be used to anchor the
Popup to.

* fix(Popup): remove raf, use context in all calcs

* add trigger vs controlled docs/test
---
 .../Popup/Usage/PopupExampleContext.js        | 23 +++++++
 .../Usage/PopupExampleContextControlled.js    | 24 +++++++
 .../src/examples/modules/Popup/Usage/index.js |  9 +++
 src/modules/Popup/Popup.d.ts                  |  3 +
 src/modules/Popup/Popup.js                    | 32 ++++-----
 test/specs/modules/Popup/Popup-test.js        | 68 +++++++++++++++++++
 6 files changed, 143 insertions(+), 16 deletions(-)
 create mode 100644 docs/src/examples/modules/Popup/Usage/PopupExampleContext.js
 create mode 100644 docs/src/examples/modules/Popup/Usage/PopupExampleContextControlled.js

diff --git a/docs/src/examples/modules/Popup/Usage/PopupExampleContext.js b/docs/src/examples/modules/Popup/Usage/PopupExampleContext.js
new file mode 100644
index 0000000000..1aba53511a
--- /dev/null
+++ b/docs/src/examples/modules/Popup/Usage/PopupExampleContext.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import { Button, Popup } from 'semantic-ui-react'
+
+class PopupExampleContextControlled extends React.Component {
+  state = {}
+
+  handleRef = node => this.setState({ node })
+
+  render() {
+    const { node } = this.state
+    const trigger = <Button content='Trigger Popup' />
+
+    return (
+      <div>
+        <Popup trigger={trigger} context={node} content='Hello' position='top center' />
+        ---------->
+        <strong ref={this.handleRef}>here</strong>
+      </div>
+    )
+  }
+}
+
+export default PopupExampleContextControlled
diff --git a/docs/src/examples/modules/Popup/Usage/PopupExampleContextControlled.js b/docs/src/examples/modules/Popup/Usage/PopupExampleContextControlled.js
new file mode 100644
index 0000000000..7ee1320bfd
--- /dev/null
+++ b/docs/src/examples/modules/Popup/Usage/PopupExampleContextControlled.js
@@ -0,0 +1,24 @@
+import React from 'react'
+import { Button, Popup } from 'semantic-ui-react'
+
+class PopupExampleContextControlled extends React.Component {
+  state = {}
+
+  toggle = () => this.setState({ open: !this.state.open })
+
+  handleRef = node => this.setState({ node })
+
+  render() {
+    const { node, open } = this.state
+    return (
+      <div>
+        <Button content='Open controlled Popup' onClick={this.toggle} />
+        <Popup context={node} content='Hello' position='top center' open={open} />
+        ---------->
+        <strong ref={this.handleRef}>here</strong>
+      </div>
+    )
+  }
+}
+
+export default PopupExampleContextControlled
diff --git a/docs/src/examples/modules/Popup/Usage/index.js b/docs/src/examples/modules/Popup/Usage/index.js
index 1512bb09f3..5a41894dd1 100644
--- a/docs/src/examples/modules/Popup/Usage/index.js
+++ b/docs/src/examples/modules/Popup/Usage/index.js
@@ -34,6 +34,15 @@ const PopupUsageExamples = () => (
       description='A popup can have its visibility controlled from outside.'
       examplePath='modules/Popup/Usage/PopupExampleControlled'
     />
+    <ComponentExample
+      title='Context'
+      description='A popup can open over a DOM node when using a trigger.'
+      examplePath='modules/Popup/Usage/PopupExampleContext'
+    />
+    <ComponentExample
+      description='A popup can open over a DOM node when controlled.'
+      examplePath='modules/Popup/Usage/PopupExampleContextControlled'
+    />
   </ExampleSection>
 )
 
diff --git a/src/modules/Popup/Popup.d.ts b/src/modules/Popup/Popup.d.ts
index 8c0e8c0c64..71dd3926e2 100644
--- a/src/modules/Popup/Popup.d.ts
+++ b/src/modules/Popup/Popup.d.ts
@@ -23,6 +23,9 @@ export interface PopupProps extends PortalProps {
   /** Simple text content for the popover. */
   content?: SemanticShorthandItem<PopupContentProps>
 
+  /** Existing element the pop-up should be bound to. */
+  context?: object;
+
   /** A flowing Popup has no maximum width and continues to flow to fit its content. */
   flowing?: boolean
 
diff --git a/src/modules/Popup/Popup.js b/src/modules/Popup/Popup.js
index 0312fba9c8..1e9eaf6782 100644
--- a/src/modules/Popup/Popup.js
+++ b/src/modules/Popup/Popup.js
@@ -53,6 +53,9 @@ export default class Popup extends Component {
     /** Simple text content for the popover. */
     content: customPropTypes.itemShorthand,
 
+    /** Existing element the pop-up should be bound to. */
+    context: PropTypes.object,
+
     /** A flowing Popup has no maximum width and continues to flow to fit its content. */
     flowing: PropTypes.bool,
 
@@ -156,6 +159,7 @@ export default class Popup extends Component {
 
   computePopupStyle(positions) {
     const style = { position: 'absolute' }
+    const context = this.getContext()
 
     // Do not access window/document when server side rendering
     if (!isBrowser()) return style
@@ -164,7 +168,7 @@ export default class Popup extends Component {
     const { pageYOffset, pageXOffset } = window
     const { clientWidth, clientHeight } = document.documentElement
 
-    const coords = this.coords || this.triggerRef.getBoundingClientRect()
+    const coords = this.coords || context.getBoundingClientRect()
     if (_.includes(positions, 'right')) {
       style.right = Math.round(clientWidth - (coords.right + pageXOffset))
       style.left = 'auto'
@@ -249,7 +253,9 @@ export default class Popup extends Component {
   }
 
   setPopupStyle() {
-    if ((!this.coords && !this.triggerRef) || !this.popupCoords) return
+    debug('setPopupStyle()')
+    const context = this.getContext()
+    if ((!this.coords && !context) || !this.popupCoords) return
     let position = this.props.position
     let style = this.computePopupStyle(position)
     const { keepInViewPort } = this.props
@@ -318,7 +324,7 @@ export default class Popup extends Component {
 
   handleOpen = (e) => {
     debug('handleOpen()')
-    this.coords = e.currentTarget.getBoundingClientRect()
+    this.coords = this.getContext().getBoundingClientRect()
 
     const { onOpen } = this.props
     if (onOpen) onOpen(e, this.props)
@@ -329,7 +335,9 @@ export default class Popup extends Component {
     const { hideOnScroll } = this.props
 
     if (hideOnScroll) eventStack.sub('scroll', this.hideOnScroll, { target: window })
-    this.setPosition()
+    if (this.getContext()) {
+      this.setPopupStyle(this.props.position)
+    }
     _.invoke(this.props, 'onMount', e, this.props)
   }
 
@@ -343,25 +351,17 @@ export default class Popup extends Component {
   }
 
   handlePopupRef = (popupRef) => {
-    debug('popupMounted()')
+    debug(`handlePopupRef(${popupRef})`)
     this.popupCoords = popupRef ? popupRef.getBoundingClientRect() : null
     this.setPopupStyle()
   }
 
   handleTriggerRef = (triggerRef) => {
-    debug('triggerMounted()')
-    if (triggerRef) {
-      this.triggerRef = triggerRef
-    }
+    debug(`handleTriggerRef(${triggerRef})`)
+    this.triggerRef = triggerRef
   }
 
-  setPosition = () => {
-    if (this.triggerRef) {
-      this.setPopupStyle(this.props.position)
-    }
-
-    this.animationRequestId = requestAnimationFrame(this.setPosition)
-  }
+  getContext = () => this.props.context || this.triggerRef
 
   render() {
     const {
diff --git a/test/specs/modules/Popup/Popup-test.js b/test/specs/modules/Popup/Popup-test.js
index ad31989b35..6662eec840 100644
--- a/test/specs/modules/Popup/Popup-test.js
+++ b/test/specs/modules/Popup/Popup-test.js
@@ -324,6 +324,74 @@ describe('Popup', () => {
     })
   })
 
+  describe('context', () => {
+    // We're expecting to see this:
+    //
+    // |- context -----------------------------|
+    // |             99px x 10px               |
+    // |---------------------------------------|
+    //                  ---^---
+    //                 | popup |
+    //                  -------
+
+    it('aligns the popup to the context node', () => {
+      const context = document.createElement('div')
+      context.innerText = '.'
+      context.style.marginTop = '400px'
+      context.style.marginLeft = '400px'
+      context.style.width = '99px'
+      context.style.height = '10px'
+
+      document.body.appendChild(context)
+      const contextRect = context.getBoundingClientRect()
+
+      wrapperMount(
+        <Popup id='context-popup' context={context} content='.' position='bottom center' open />,
+      )
+
+      const popupRect = document.querySelector('#context-popup').getBoundingClientRect()
+
+      document.body.removeChild(context)
+
+      popupRect.top.should.equal(
+        contextRect.bottom,
+        "The popup's top should have been equal to the context's bottom.",
+      )
+    })
+
+    it('aligns the popup to the context node even when there is a trigger', () => {
+      const context = document.createElement('div')
+      context.innerText = '.'
+      context.style.marginTop = '400px'
+      context.style.marginLeft = '400px'
+      context.style.width = '99px'
+      context.style.height = '10px'
+
+      document.body.appendChild(context)
+      const contextRect = context.getBoundingClientRect()
+
+      wrapperMount(
+        <Popup
+          id='context-popup'
+          trigger={<button />}
+          context={context}
+          content='.'
+          position='bottom center'
+          open
+        />,
+      )
+
+      const popupRect = document.querySelector('#context-popup').getBoundingClientRect()
+
+      document.body.removeChild(context)
+
+      popupRect.top.should.equal(
+        contextRect.bottom,
+        "The popup's top should have been equal to the context's bottom.",
+      )
+    })
+  })
+
   describe('open', () => {
     it('is not open by default', () => {
       wrapperMount(<Popup />)

From eae01ad5c2c4ac20f13721df7f63bc35fe20a3f9 Mon Sep 17 00:00:00 2001
From: Daniel Flores <dflores009@gmail.com>
Date: Mon, 25 Jun 2018 17:24:39 -0700
Subject: [PATCH 4/7] fix(Input): fix icon order to ensure rounded border is
 kept (#2507)

* fix(Input): fix icon order to ensure rounded border is kept

* strengthen input icon position tests
---
 .../Image/States/ImageExampleHidden.js        |   4 +-
 .../Image/Types/ImageExampleWrapped.js        |   4 +-
 .../Variations/EmbedExampleAspectRatio.js     |   7 +-
 .../ModalExampleScrollingContent.js           |   6 +-
 .../FeedExampleExtraImagesShorthand.js        |   5 +-
 examples/webpack3/scripts/build.js            |  38 ++-
 examples/webpack3/src/App.js                  | 126 ++++++----
 .../MountNode/lib/handleClassNamesChange.js   |   5 +-
 src/elements/Input/Input.js                   |   2 +-
 src/lib/customPropTypes.js                    | 226 ++++++++++--------
 src/lib/htmlPropsUtils.js                     |  70 ++++--
 test/specs/addons/Confirm/Confirm-test.js     |  28 +--
 .../lib/computeClassNameDifference-test.js    |   6 +-
 .../MountNode/lib/computeClassNames-test.js   |  17 +-
 .../MountNode/lib/getNodeFromProps-test.js    |  12 +-
 .../addons/Pagination/PaginationItem-test.js  |  45 ++--
 .../TransitionablePortal-test.js              |  12 +-
 test/specs/elements/Input/Input-test.js       |  42 ++++
 test/specs/modules/Rating/RatingIcon-test.js  |   6 +-
 test/utils/assertWithTimeout.js               |   1 -
 webpack.config.babel.js                       |  24 +-
 21 files changed, 402 insertions(+), 284 deletions(-)

diff --git a/docs/src/examples/elements/Image/States/ImageExampleHidden.js b/docs/src/examples/elements/Image/States/ImageExampleHidden.js
index 39655ff0f8..abac3faf3a 100644
--- a/docs/src/examples/elements/Image/States/ImageExampleHidden.js
+++ b/docs/src/examples/elements/Image/States/ImageExampleHidden.js
@@ -1,8 +1,6 @@
 import React from 'react'
 import { Image } from 'semantic-ui-react'
 
-const ImageExampleHidden = () => (
-  <Image src='/images/wireframe/image.png' size='small' hidden />
-)
+const ImageExampleHidden = () => <Image src='/images/wireframe/image.png' size='small' hidden />
 
 export default ImageExampleHidden
diff --git a/docs/src/examples/elements/Image/Types/ImageExampleWrapped.js b/docs/src/examples/elements/Image/Types/ImageExampleWrapped.js
index dd2b3e29e2..720f2c872a 100644
--- a/docs/src/examples/elements/Image/Types/ImageExampleWrapped.js
+++ b/docs/src/examples/elements/Image/Types/ImageExampleWrapped.js
@@ -1,8 +1,6 @@
 import React from 'react'
 import { Image } from 'semantic-ui-react'
 
-const ImageExampleWrapped = () => (
-  <Image src='/images/wireframe/image.png' size='small' wrapped />
-)
+const ImageExampleWrapped = () => <Image src='/images/wireframe/image.png' size='small' wrapped />
 
 export default ImageExampleWrapped
diff --git a/docs/src/examples/modules/Embed/Variations/EmbedExampleAspectRatio.js b/docs/src/examples/modules/Embed/Variations/EmbedExampleAspectRatio.js
index 7586d4007a..3a4215878b 100644
--- a/docs/src/examples/modules/Embed/Variations/EmbedExampleAspectRatio.js
+++ b/docs/src/examples/modules/Embed/Variations/EmbedExampleAspectRatio.js
@@ -2,12 +2,7 @@ import React from 'react'
 import { Embed } from 'semantic-ui-react'
 
 const EmbedExampleAspectRatio = () => (
-  <Embed
-    aspectRatio='4:3'
-    id='HTZudKi36bo'
-    placeholder='/images/4by3.jpg'
-    source='youtube'
-  />
+  <Embed aspectRatio='4:3' id='HTZudKi36bo' placeholder='/images/4by3.jpg' source='youtube' />
 )
 
 export default EmbedExampleAspectRatio
diff --git a/docs/src/examples/modules/Modal/Variations/ModalExampleScrollingContent.js b/docs/src/examples/modules/Modal/Variations/ModalExampleScrollingContent.js
index d1c90afe42..338921a9f4 100644
--- a/docs/src/examples/modules/Modal/Variations/ModalExampleScrollingContent.js
+++ b/docs/src/examples/modules/Modal/Variations/ModalExampleScrollingContent.js
@@ -13,11 +13,7 @@ const ModalExampleScrollingContent = () => (
         <p>This is an example of expanded content that will cause the modal's dimmer to scroll</p>
 
         {_.times(8, i => (
-          <Image
-            key={i}
-            src='/images/wireframe/paragraph.png'
-            style={{ paddingBottom: 5 }}
-          />
+          <Image key={i} src='/images/wireframe/paragraph.png' style={{ paddingBottom: 5 }} />
         ))}
       </Modal.Description>
     </Modal.Content>
diff --git a/docs/src/examples/views/Feed/Content/FeedExampleExtraImagesShorthand.js b/docs/src/examples/views/Feed/Content/FeedExampleExtraImagesShorthand.js
index 3ea04d7980..224a42f5b2 100644
--- a/docs/src/examples/views/Feed/Content/FeedExampleExtraImagesShorthand.js
+++ b/docs/src/examples/views/Feed/Content/FeedExampleExtraImagesShorthand.js
@@ -4,10 +4,7 @@ import { Feed } from 'semantic-ui-react'
 const image = '/images/avatar/small/helen.jpg'
 const date = '3 days ago'
 const summary = 'Helen Troy added 2 photos'
-const extraImages = [
-  '/images/wireframe/image.png',
-  '/images/wireframe/image-text.png',
-]
+const extraImages = ['/images/wireframe/image.png', '/images/wireframe/image-text.png']
 
 const FeedExampleExtraImagesShorthand = () => (
   <Feed>
diff --git a/examples/webpack3/scripts/build.js b/examples/webpack3/scripts/build.js
index c4faa4df82..5d77096d67 100644
--- a/examples/webpack3/scripts/build.js
+++ b/examples/webpack3/scripts/build.js
@@ -5,7 +5,7 @@ process.env.NODE_ENV = 'production'
 // Makes the script crash on unhandled rejections instead of silently
 // ignoring them. In the future, promise rejections that are not handled will
 // terminate the Node.js process with a non-zero exit code.
-process.on('unhandledRejection', (err) => {
+process.on('unhandledRejection', err => {
   throw err
 })
 
@@ -24,8 +24,7 @@ const printHostingInstructions = require('react-dev-utils/printHostingInstructio
 const FileSizeReporter = require('react-dev-utils/FileSizeReporter')
 const printBuildError = require('react-dev-utils/printBuildError')
 
-const measureFileSizesBeforeBuild =
-  FileSizeReporter.measureFileSizesBeforeBuild
+const measureFileSizesBeforeBuild = FileSizeReporter.measureFileSizesBeforeBuild
 const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild
 const useYarn = fs.existsSync(paths.yarnLockFile)
 
@@ -41,7 +40,7 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 // First, read the current file sizes in build directory.
 // This lets us display how much they changed later.
 measureFileSizesBeforeBuild(paths.appBuild)
-  .then((previousFileSizes) => {
+  .then(previousFileSizes => {
     // Remove all content but keep the directory so that
     // if you're in it, you don't end up in Trash
     fs.emptyDirSync(paths.appBuild)
@@ -56,14 +55,12 @@ measureFileSizesBeforeBuild(paths.appBuild)
         console.log(chalk.yellow('Compiled with warnings.\n'))
         console.log(warnings.join('\n\n'))
         console.log(
-          `\nSearch for the ${
-            chalk.underline(chalk.yellow('keywords'))
-          } to learn more about each warning.`
+          `\nSearch for the ${chalk.underline(
+            chalk.yellow('keywords'),
+          )} to learn more about each warning.`,
         )
         console.log(
-          `To ignore, add ${
-            chalk.cyan('// eslint-disable-next-line')
-          } to the line before.\n`
+          `To ignore, add ${chalk.cyan('// eslint-disable-next-line')} to the line before.\n`,
         )
       } else {
         console.log(chalk.green('Compiled successfully.\n'))
@@ -75,7 +72,7 @@ measureFileSizesBeforeBuild(paths.appBuild)
         previousFileSizes,
         paths.appBuild,
         WARN_AFTER_BUNDLE_GZIP_SIZE,
-        WARN_AFTER_CHUNK_GZIP_SIZE
+        WARN_AFTER_CHUNK_GZIP_SIZE,
       )
       console.log()
 
@@ -83,19 +80,13 @@ measureFileSizesBeforeBuild(paths.appBuild)
       const publicUrl = paths.publicUrl
       const publicPath = config.output.publicPath
       const buildFolder = path.relative(process.cwd(), paths.appBuild)
-      printHostingInstructions(
-        appPackage,
-        publicUrl,
-        publicPath,
-        buildFolder,
-        useYarn
-      )
+      printHostingInstructions(appPackage, publicUrl, publicPath, buildFolder, useYarn)
     },
-    (err) => {
+    err => {
       console.log(chalk.red('Failed to compile.\n'))
       printBuildError(err)
       process.exit(1)
-    }
+    },
   )
 
 // Create the production build and print the deployment instructions.
@@ -119,15 +110,14 @@ function build(previousFileSizes) {
       }
       if (
         process.env.CI &&
-        (typeof process.env.CI !== 'string' ||
-          process.env.CI.toLowerCase() !== 'false') &&
+        (typeof process.env.CI !== 'string' || process.env.CI.toLowerCase() !== 'false') &&
         messages.warnings.length
       ) {
         console.log(
           chalk.yellow(
             '\nTreating warnings as errors because process.env.CI = true.\n' +
-              'Most CI servers set it automatically.\n'
-          )
+              'Most CI servers set it automatically.\n',
+          ),
         )
         return reject(new Error(messages.warnings.join('\n\n')))
       }
diff --git a/examples/webpack3/src/App.js b/examples/webpack3/src/App.js
index 305b1bc8c7..5fb244feee 100644
--- a/examples/webpack3/src/App.js
+++ b/examples/webpack3/src/App.js
@@ -11,7 +11,7 @@ const leftItems = [
     href: 'https://react.semantic-ui.com/',
     icon: 'book',
     key: 'docs',
-    target: '_blank'
+    target: '_blank',
   },
 ]
 const rightItems = [
@@ -21,7 +21,7 @@ const rightItems = [
     href: 'https://github.com/Semantic-Org/Semantic-UI-React',
     icon: 'github',
     key: 'github',
-    target: '_blank'
+    target: '_blank',
   },
   {
     as: 'a',
@@ -30,7 +30,7 @@ const rightItems = [
     href: 'https://stackoverflow.com/questions/tagged/semantic-ui-react?sort=votes',
     key: 'so',
     target: '_blank',
-  }
+  },
 ]
 
 const App = () => (
@@ -40,101 +40,143 @@ const App = () => (
 
       <Grid>
         <Grid.Column computer={6} mobile={16}>
-          <p>Welcome to your Semantic UI React App! It is awesome <span aria-label='emoji' role='img'>😉</span></p>
+          <p>
+            Welcome to your Semantic UI React App! It is awesome{' '}
+            <span aria-label='emoji' role='img'>
+              😉
+            </span>
+          </p>
 
           <p>
-            This boilerplate is designed to show theming features of SUI with modern environment. It based on the
-            awesome{' '}
-            <a href='https://github.com/facebookincubator/create-react-app' rel='noopener noreferrer' target='_blank'>
+            This boilerplate is designed to show theming features of SUI with modern environment. It
+            based on the awesome{' '}
+            <a
+              href='https://github.com/facebookincubator/create-react-app'
+              rel='noopener noreferrer'
+              target='_blank'
+            >
               Create React App package
-            </a>
-            {' '}with some additions.
+            </a>{' '}
+            with some additions.
           </p>
 
           <Header as='h4'>React Hot Loader</Header>
           <p>
-            <a href='https://github.com/gaearon/react-hot-loader' rel='noopener noreferrer' target='_blank'>
+            <a
+              href='https://github.com/gaearon/react-hot-loader'
+              rel='noopener noreferrer'
+              target='_blank'
+            >
               React Hot Loader
-            </a>
-            {' '}become stable and we can use safely, it improves your delevopment speed cardinally.
+            </a>{' '}
+            become stable and we can use safely, it improves your delevopment speed cardinally.
           </p>
 
           <Header as='h4'>LESS loader</Header>
           <p>
             Semantic UI is powered by LESS, so we need it to enable its powerful theming. We also
-            enabled {' '}
-            <a href='https://github.com/css-modules/css-modules' rel='noopener noreferrer' target='_blank'>
+            enabled{' '}
+            <a
+              href='https://github.com/css-modules/css-modules'
+              rel='noopener noreferrer'
+              target='_blank'
+            >
               CSS modules
-            </a>
-            {' '}for your components.
+            </a>{' '}
+            for your components.
           </p>
 
           <Header as='h4'>Bundle analyzer and direct imports</Header>
           <p>
-            Semantic UI React is very powerful, but in most cases you do not need all its modules. In fact, unused
-            modules should be removed by{' '}
-            <a href='https://webpack.js.org/guides/tree-shaking/' rel='noopener noreferrer' target='_blank'>
+            Semantic UI React is very powerful, but in most cases you do not need all its modules.
+            In fact, unused modules should be removed by{' '}
+            <a
+              href='https://webpack.js.org/guides/tree-shaking/'
+              rel='noopener noreferrer'
+              target='_blank'
+            >
               Tree Shaking
             </a>
-            , but current situation does not allow to rely on it. Our users use direct import of SUIR components,
-            but we do not recommend to use this approach because paths to modules can be changed. We added{' '}
+            , but current situation does not allow to rely on it. Our users use direct import of
+            SUIR components, but we do not recommend to use this approach because paths to modules
+            can be changed. We added{' '}
             <a
               href='https://www.npmjs.com/package/babel-plugin-lodash'
               rel='noopener noreferrer'
               target='_blank'
             >
               babel-plugin-lodash
-            </a>
-            {' '}plugin that automatically transform your import to direct.
+            </a>{' '}
+            plugin that automatically transform your import to direct.
           </p>
           <p>We also added bundle analyzer, so you can always review the size of your bundles.</p>
         </Grid.Column>
         <Grid.Column computer={10} mobile={16}>
-          <Header as='h3'>Themed <code>Button</code></Header>
+          <Header as='h3'>
+            Themed <code>Button</code>
+          </Header>
           <p>
-            Semantic UI React does not have own theming and fully relies on CSS part of Semantic UI. It is normal,
-            Semantic UI theming is very powerful, it allows you fully modify the look of your app using theming
-            variables.
+            Semantic UI React does not have own theming and fully relies on CSS part of Semantic UI.
+            It is normal, Semantic UI theming is very powerful, it allows you fully modify the look
+            of your app using theming variables.
           </p>
           <p>
-            We changed the <code>primary</code> color of <code>Button</code> component, it is really easy
-            <span aria-label='emoji' role='img'>😁</span> Take a look to{' '}
-            <code>/src/styling/theme/elements/button.variables</code>. By the way, the <code>theme</code> directory
-            structure fully matches the component structure of Semantic UI React.
+            We changed the <code>primary</code> color of <code>Button</code> component, it is really
+            easy
+            <span aria-label='emoji' role='img'>
+              😁
+            </span>{' '}
+            Take a look to <code>/src/styling/theme/elements/button.variables</code>. By the way,
+            the <code>theme</code> directory structure fully matches the component structure of
+            Semantic UI React.
           </p>
           <Button primary>Primary Button</Button>
-          <Button href='https://semantic-ui.com/usage/theming.html' rel='noopener noreferrer' target='_blank'>
+          <Button
+            href='https://semantic-ui.com/usage/theming.html'
+            rel='noopener noreferrer'
+            target='_blank'
+          >
             Learn more
           </Button>
 
           <Header as='h3'>Custom themed component</Header>
           <p>
-            In the real world you will always need custom components, and you will want to get them themed like your
-            app. An example is below:
+            In the real world you will always need custom components, and you will want to get them
+            themed like your app. An example is below:
           </p>
 
           <CustomMessage>Hey, it is a custom message</CustomMessage>
 
           <p>
-            Take a look <code>/src/components/CustomMessage</code> directory. The are some important things:
+            Take a look <code>/src/components/CustomMessage</code> directory. The are some important
+            things:
           </p>
           <List bulleted>
             <List.Item>
-              we premade <code>heading.less</code> for you, when you will include it in your LESS file you will able
-              to use your existing SUI variables!
+              we premade <code>heading.less</code> for you, when you will include it in your LESS
+              file you will able to use your existing SUI variables!
             </List.Item>
             <List.Item>
               we enabled{' '}
-              <a href='https://github.com/css-modules/css-modules' rel='noopener noreferrer' target='_blank'>
+              <a
+                href='https://github.com/css-modules/css-modules'
+                rel='noopener noreferrer'
+                target='_blank'
+              >
                 CSS modules
-              </a>
-              {' '}for your components, it means that you will need to use <code>:global</code> when your style will
-              match SUI parts
+              </a>{' '}
+              for your components, it means that you will need to use <code>:global</code> when your
+              style will match SUI parts
             </List.Item>
           </List>
 
           <Header as='h3'>P.S.</Header>
-          <p>This page is fully responsive <span aria-label='emoji' role='img'>😁</span></p>
+          <p>
+            This page is fully responsive{' '}
+            <span aria-label='emoji' role='img'>
+              😁
+            </span>
+          </p>
         </Grid.Column>
       </Grid>
     </Segment>
diff --git a/src/addons/MountNode/lib/handleClassNamesChange.js b/src/addons/MountNode/lib/handleClassNamesChange.js
index 69db4c3362..8e24c10365 100644
--- a/src/addons/MountNode/lib/handleClassNamesChange.js
+++ b/src/addons/MountNode/lib/handleClassNamesChange.js
@@ -7,7 +7,10 @@ const prevClassNames = new Map()
 
 const handleClassNamesChange = (node, components) => {
   const currentClassNames = computeClassNames(components)
-  const [forAdd, forRemoval] = computeClassNamesDifference(prevClassNames.get(node), currentClassNames)
+  const [forAdd, forRemoval] = computeClassNamesDifference(
+    prevClassNames.get(node),
+    currentClassNames,
+  )
 
   _.forEach(forAdd, className => node.classList.add(className))
   _.forEach(forRemoval, className => node.classList.remove(className))
diff --git a/src/elements/Input/Input.js b/src/elements/Input/Input.js
index 71717a8fa0..a267ed2000 100644
--- a/src/elements/Input/Input.js
+++ b/src/elements/Input/Input.js
@@ -230,8 +230,8 @@ class Input extends Component {
         {actionPosition === 'left' && actionElement}
         {labelPosition !== 'right' && labelElement}
         {createHTMLInput(input || type, { defaultProps: htmlInputProps, autoGenerateKey: false })}
-        {actionPosition !== 'left' && actionElement}
         {Icon.create(this.computeIcon(), { autoGenerateKey: false })}
+        {actionPosition !== 'left' && actionElement}
         {labelPosition === 'right' && labelElement}
       </ElementType>
     )
diff --git a/src/lib/customPropTypes.js b/src/lib/customPropTypes.js
index a95acf9769..ce83fee4c4 100644
--- a/src/lib/customPropTypes.js
+++ b/src/lib/customPropTypes.js
@@ -7,11 +7,8 @@ const typeOf = (...args) => Object.prototype.toString.call(...args)
 /**
  * Ensure a component can render as a give prop value.
  */
-export const as = (...args) => PropTypes.oneOfType([
-  PropTypes.func,
-  PropTypes.string,
-  PropTypes.symbol,
-])(...args)
+export const as = (...args) =>
+  PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.symbol])(...args)
 
 /**
  * Ensure a prop is a valid DOM node.
@@ -69,7 +66,12 @@ export const suggest = (suggestions) => {
   // way of looking up a value in the map, i.e. we can sort the words in the
   // incoming propValue and look that up without having to check all permutations.
   const suggestionsLookup = suggestions.reduce((acc, key) => {
-    acc[key.split(' ').sort().join(' ')] = true
+    acc[
+      key
+        .split(' ')
+        .sort()
+        .join(' ')
+    ] = true
     return acc
   }, {})
 
@@ -82,7 +84,10 @@ export const suggest = (suggestions) => {
     // check if the words were correct but ordered differently.
     // Since we're matching for classNames we need to allow any word order
     // to pass validation, e.g. `left chevron` vs `chevron left`.
-    const propValueSorted = propValue.split(' ').sort().join(' ')
+    const propValueSorted = propValue
+      .split(' ')
+      .sort()
+      .join(' ')
     if (suggestionsLookup[propValueSorted]) return
 
     // find best suggestions
@@ -91,12 +96,14 @@ export const suggest = (suggestions) => {
     // skip if a match scored 0
     if (bestMatches.some(x => x.score === 0)) return
 
-    return new Error([
-      `Invalid prop \`${propName}\` of value \`${propValue}\` supplied to \`${componentName}\`.`,
-      `\n\nInstead of \`${propValue}\`, did you mean:`,
-      bestMatches.map(x => `\n  - ${x.suggestion}`).join(''),
-      '\n',
-    ].join(''))
+    return new Error(
+      [
+        `Invalid prop \`${propName}\` of value \`${propValue}\` supplied to \`${componentName}\`.`,
+        `\n\nInstead of \`${propValue}\`, did you mean:`,
+        bestMatches.map(x => `\n  - ${x.suggestion}`).join(''),
+        '\n',
+      ].join(''),
+    )
   }
 }
 
@@ -106,10 +113,12 @@ export const suggest = (suggestions) => {
  */
 export const disallow = disallowedProps => (props, propName, componentName) => {
   if (!Array.isArray(disallowedProps)) {
-    throw new Error([
-      'Invalid argument supplied to disallow, expected an instance of array.',
-      ` See \`${propName}\` prop in \`${componentName}\`.`,
-    ].join(''))
+    throw new Error(
+      [
+        'Invalid argument supplied to disallow, expected an instance of array.',
+        ` See \`${propName}\` prop in \`${componentName}\`.`,
+      ].join(''),
+    )
   }
 
   // skip if prop is undefined
@@ -124,10 +133,14 @@ export const disallow = disallowedProps => (props, propName, componentName) => {
   }, [])
 
   if (disallowed.length > 0) {
-    return new Error([
-      `Prop \`${propName}\` in \`${componentName}\` conflicts with props: \`${disallowed.join('`, `')}\`.`,
-      'They cannot be defined together, choose one or the other.',
-    ].join(' '))
+    return new Error(
+      [
+        `Prop \`${propName}\` in \`${componentName}\` conflicts with props: \`${disallowed.join(
+          '`, `',
+        )}\`.`,
+        'They cannot be defined together, choose one or the other.',
+      ].join(' '),
+    )
   }
 }
 
@@ -137,16 +150,20 @@ export const disallow = disallowedProps => (props, propName, componentName) => {
  */
 export const every = validators => (props, propName, componentName, ...rest) => {
   if (!Array.isArray(validators)) {
-    throw new Error([
-      'Invalid argument supplied to every, expected an instance of array.',
-      `See \`${propName}\` prop in \`${componentName}\`.`,
-    ].join(' '))
+    throw new Error(
+      [
+        'Invalid argument supplied to every, expected an instance of array.',
+        `See \`${propName}\` prop in \`${componentName}\`.`,
+      ].join(' '),
+    )
   }
 
   const errors = _.flow(
     _.map((validator) => {
       if (typeof validator !== 'function') {
-        throw new Error(`every() argument "validators" should contain functions, found: ${typeOf(validator)}.`)
+        throw new Error(
+          `every() argument "validators" should contain functions, found: ${typeOf(validator)}.`,
+        )
       }
       return validator(props, propName, componentName, ...rest)
     }),
@@ -163,23 +180,29 @@ export const every = validators => (props, propName, componentName, ...rest) =>
  */
 export const some = validators => (props, propName, componentName, ...rest) => {
   if (!Array.isArray(validators)) {
-    throw new Error([
-      'Invalid argument supplied to some, expected an instance of array.',
-      `See \`${propName}\` prop in \`${componentName}\`.`,
-    ].join(' '))
+    throw new Error(
+      [
+        'Invalid argument supplied to some, expected an instance of array.',
+        `See \`${propName}\` prop in \`${componentName}\`.`,
+      ].join(' '),
+    )
   }
 
-  const errors = _.compact(_.map(validators, (validator) => {
-    if (!_.isFunction(validator)) {
-      throw new Error(`some() argument "validators" should contain functions, found: ${typeOf(validator)}.`)
-    }
-    return validator(props, propName, componentName, ...rest)
-  }))
+  const errors = _.compact(
+    _.map(validators, (validator) => {
+      if (!_.isFunction(validator)) {
+        throw new Error(
+          `some() argument "validators" should contain functions, found: ${typeOf(validator)}.`,
+        )
+      }
+      return validator(props, propName, componentName, ...rest)
+    }),
+  )
 
   // fail only if all validators failed
   if (errors.length === validators.length) {
     const error = new Error('One of these validators must pass:')
-    error.message += `\n${_.map(errors, (err, i) => (`[${i + 1}]: ${err.message}`)).join('\n')}`
+    error.message += `\n${_.map(errors, (err, i) => `[${i + 1}]: ${err.message}`).join('\n')}`
     return error
   }
 }
@@ -191,23 +214,29 @@ export const some = validators => (props, propName, componentName, ...rest) => {
  */
 export const givenProps = (propsShape, validator) => (props, propName, componentName, ...rest) => {
   if (!_.isPlainObject(propsShape)) {
-    throw new Error([
-      'Invalid argument supplied to givenProps, expected an object.',
-      `See \`${propName}\` prop in \`${componentName}\`.`,
-    ].join(' '))
+    throw new Error(
+      [
+        'Invalid argument supplied to givenProps, expected an object.',
+        `See \`${propName}\` prop in \`${componentName}\`.`,
+      ].join(' '),
+    )
   }
 
   if (typeof validator !== 'function') {
-    throw new Error([
-      'Invalid argument supplied to givenProps, expected a function.',
-      `See \`${propName}\` prop in \`${componentName}\`.`,
-    ].join(' '))
+    throw new Error(
+      [
+        'Invalid argument supplied to givenProps, expected a function.',
+        `See \`${propName}\` prop in \`${componentName}\`.`,
+      ].join(' '),
+    )
   }
 
   const shouldValidate = _.keys(propsShape).every((key) => {
     const val = propsShape[key]
     // require propShape validators to pass or prop values to match
-    return typeof val === 'function' ? !val(props, key, componentName, ...rest) : val === props[propName]
+    return typeof val === 'function'
+      ? !val(props, key, componentName, ...rest)
+      : val === props[propName]
   })
 
   if (!shouldValidate) return
@@ -216,15 +245,18 @@ export const givenProps = (propsShape, validator) => (props, propName, component
 
   if (error) {
     // poor mans shallow pretty print, prevents JSON circular reference errors
-    const prettyProps = `{ ${_.keys(_.pick(_.keys(propsShape), props)).map((key) => {
-      const val = props[key]
-      let renderedValue = val
-      if (typeof val === 'string') renderedValue = `"${val}"`
-      else if (Array.isArray(val)) renderedValue = `[${val.join(', ')}]`
-      else if (_.isObject(val)) renderedValue = '{...}'
-
-      return `${key}: ${renderedValue}`
-    }).join(', ')} }`
+    const prettyProps = `{ ${_
+      .keys(_.pick(_.keys(propsShape), props))
+      .map((key) => {
+        const val = props[key]
+        let renderedValue = val
+        if (typeof val === 'string') renderedValue = `"${val}"`
+        else if (Array.isArray(val)) renderedValue = `[${val.join(', ')}]`
+        else if (_.isObject(val)) renderedValue = '{...}'
+
+        return `${key}: ${renderedValue}`
+      })
+      .join(', ')} }`
 
     error.message = `Given props ${prettyProps}: ${error.message}`
     return error
@@ -237,10 +269,12 @@ export const givenProps = (propsShape, validator) => (props, propName, component
  */
 export const demand = requiredProps => (props, propName, componentName) => {
   if (!Array.isArray(requiredProps)) {
-    throw new Error([
-      'Invalid `requiredProps` argument supplied to require, expected an instance of array.',
-      ` See \`${propName}\` prop in \`${componentName}\`.`,
-    ].join(''))
+    throw new Error(
+      [
+        'Invalid `requiredProps` argument supplied to require, expected an instance of array.',
+        ` See \`${propName}\` prop in \`${componentName}\`.`,
+      ].join(''),
+    )
   }
 
   // skip if prop is undefined
@@ -249,7 +283,9 @@ export const demand = requiredProps => (props, propName, componentName) => {
   const missingRequired = requiredProps.filter(requiredProp => props[requiredProp] === undefined)
   if (missingRequired.length > 0) {
     return new Error(
-      `\`${propName}\` prop in \`${componentName}\` requires props: \`${missingRequired.join('`, `')}\`.`,
+      `\`${propName}\` prop in \`${componentName}\` requires props: \`${missingRequired.join(
+        '`, `',
+      )}\`.`,
     )
   }
 }
@@ -260,10 +296,12 @@ export const demand = requiredProps => (props, propName, componentName) => {
  */
 export const multipleProp = possible => (props, propName, componentName) => {
   if (!Array.isArray(possible)) {
-    throw new Error([
-      'Invalid argument supplied to some, expected an instance of array.',
-      `See \`${propName}\` prop in \`${componentName}\`.`,
-    ].join(' '))
+    throw new Error(
+      [
+        'Invalid argument supplied to some, expected an instance of array.',
+        `See \`${propName}\` prop in \`${componentName}\`.`,
+      ].join(' '),
+    )
   }
 
   const propValue = props[propName]
@@ -280,43 +318,39 @@ export const multipleProp = possible => (props, propName, componentName) => {
 
   // fail only if there are invalid values
   if (invalid.length > 0) {
-    return new Error(`\`${propName}\` prop in \`${componentName}\` has invalid values: \`${invalid.join('`, `')}\`.`)
+    return new Error(
+      `\`${propName}\` prop in \`${componentName}\` has invalid values: \`${invalid.join(
+        '`, `',
+      )}\`.`,
+    )
   }
 }
 
 /**
  * Ensure a component can render as a node passed as a prop value in place of children.
  */
-export const contentShorthand = (...args) => every([
-  disallow(['children']),
-  PropTypes.node,
-])(...args)
+export const contentShorthand = (...args) =>
+  every([disallow(['children']), PropTypes.node])(...args)
 
 /**
  * Item shorthand is a description of a component that can be a literal,
  * a props object, or an element.
  */
-export const itemShorthand = (...args) => every([
-  disallow(['children']),
-  PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.object,
-    PropTypes.arrayOf(
-      PropTypes.oneOfType([
-        PropTypes.node,
-        PropTypes.object,
-      ]),
-    ),
-  ]),
-])(...args)
+export const itemShorthand = (...args) =>
+  every([
+    disallow(['children']),
+    PropTypes.oneOfType([
+      PropTypes.node,
+      PropTypes.object,
+      PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.node, PropTypes.object])),
+    ]),
+  ])(...args)
 
 /**
  * Collection shorthand ensures a prop is an array of item shorthand.
  */
-export const collectionShorthand = (...args) => every([
-  disallow(['children']),
-  PropTypes.arrayOf(itemShorthand),
-])(...args)
+export const collectionShorthand = (...args) =>
+  every([disallow(['children']), PropTypes.arrayOf(itemShorthand)])(...args)
 
 /**
  * Show a deprecated warning for component props with a help message and optional validator.
@@ -325,10 +359,12 @@ export const collectionShorthand = (...args) => every([
  */
 export const deprecate = (help, validator) => (props, propName, componentName, ...args) => {
   if (typeof help !== 'string') {
-    throw new Error([
-      'Invalid `help` argument supplied to deprecate, expected a string.',
-      `See \`${propName}\` prop in \`${componentName}\`.`,
-    ].join(' '))
+    throw new Error(
+      [
+        'Invalid `help` argument supplied to deprecate, expected a string.',
+        `See \`${propName}\` prop in \`${componentName}\`.`,
+      ].join(' '),
+    )
   }
 
   // skip if prop is undefined
@@ -346,10 +382,12 @@ export const deprecate = (help, validator) => (props, propName, componentName, .
         error.message = `${error.message} ${validationError.message}`
       }
     } else {
-      throw new Error([
-        'Invalid argument supplied to deprecate, expected a function.',
-        `See \`${propName}\` prop in \`${componentName}\`.`,
-      ].join(' '))
+      throw new Error(
+        [
+          'Invalid argument supplied to deprecate, expected a function.',
+          `See \`${propName}\` prop in \`${componentName}\`.`,
+        ].join(' '),
+      )
     }
   }
 
diff --git a/src/lib/htmlPropsUtils.js b/src/lib/htmlPropsUtils.js
index a6d374062c..819a9f503a 100644
--- a/src/lib/htmlPropsUtils.js
+++ b/src/lib/htmlPropsUtils.js
@@ -2,35 +2,78 @@ import _ from 'lodash'
 
 export const htmlInputAttrs = [
   // REACT
-  'selected', 'defaultValue', 'defaultChecked',
+  'selected',
+  'defaultValue',
+  'defaultChecked',
 
   // LIMITED HTML PROPS
-  'accept', 'autoCapitalize', 'autoComplete', 'autoCorrect', 'autoFocus', 'checked', 'disabled', 'form', 'id', 'list',
-  'max', 'maxLength', 'min', 'minLength', 'multiple', 'name', 'pattern', 'placeholder', 'readOnly', 'required', 'step',
-  'type', 'value',
+  'accept',
+  'autoCapitalize',
+  'autoComplete',
+  'autoCorrect',
+  'autoFocus',
+  'checked',
+  'disabled',
+  'form',
+  'id',
+  'list',
+  'max',
+  'maxLength',
+  'min',
+  'minLength',
+  'multiple',
+  'name',
+  'pattern',
+  'placeholder',
+  'readOnly',
+  'required',
+  'step',
+  'type',
+  'value',
 ]
 
 export const htmlInputEvents = [
   // EVENTS
   // keyboard
-  'onKeyDown', 'onKeyPress', 'onKeyUp',
+  'onKeyDown',
+  'onKeyPress',
+  'onKeyUp',
 
   // focus
-  'onFocus', 'onBlur',
+  'onFocus',
+  'onBlur',
 
   // form
-  'onChange', 'onInput',
+  'onChange',
+  'onInput',
 
   // mouse
-  'onClick', 'onContextMenu',
-  'onDrag', 'onDragEnd', 'onDragEnter', 'onDragExit', 'onDragLeave', 'onDragOver', 'onDragStart', 'onDrop',
-  'onMouseDown', 'onMouseEnter', 'onMouseLeave', 'onMouseMove', 'onMouseOut', 'onMouseOver', 'onMouseUp',
+  'onClick',
+  'onContextMenu',
+  'onDrag',
+  'onDragEnd',
+  'onDragEnter',
+  'onDragExit',
+  'onDragLeave',
+  'onDragOver',
+  'onDragStart',
+  'onDrop',
+  'onMouseDown',
+  'onMouseEnter',
+  'onMouseLeave',
+  'onMouseMove',
+  'onMouseOut',
+  'onMouseOver',
+  'onMouseUp',
 
   // selection
   'onSelect',
 
   // touch
-  'onTouchCancel', 'onTouchEnd', 'onTouchMove', 'onTouchStart',
+  'onTouchCancel',
+  'onTouchEnd',
+  'onTouchMove',
+  'onTouchStart',
 ]
 
 export const htmlInputProps = [...htmlInputAttrs, ...htmlInputEvents]
@@ -44,10 +87,7 @@ export const htmlInputProps = [...htmlInputAttrs, ...htmlInputEvents]
  * @returns {[{}, {}]} An array of objects
  */
 export const partitionHTMLProps = (props, options = {}) => {
-  const {
-    htmlProps = htmlInputProps,
-    includeAria = true,
-  } = options
+  const { htmlProps = htmlInputProps, includeAria = true } = options
   const inputProps = {}
   const rest = {}
 
diff --git a/test/specs/addons/Confirm/Confirm-test.js b/test/specs/addons/Confirm/Confirm-test.js
index 64dfd8bb71..1d3be1585e 100644
--- a/test/specs/addons/Confirm/Confirm-test.js
+++ b/test/specs/addons/Confirm/Confirm-test.js
@@ -49,22 +49,19 @@ describe('Confirm', () => {
 
   describe('size', () => {
     it('has "small" size by default', () => {
-      shallow(<Confirm />)
-        .should.have.prop('size', 'small')
+      shallow(<Confirm />).should.have.prop('size', 'small')
     })
 
     _.forEach(['fullscreen', 'large', 'mini', 'small', 'tiny'], (size) => {
       it(`applies ${size} size`, () => {
-        shallow(<Confirm size={size} />)
-          .should.have.prop('size', size)
+        shallow(<Confirm size={size} />).should.have.prop('size', size)
       })
     })
   })
 
   describe('cancelButton', () => {
     it('is "Cancel" by default', () => {
-      Confirm.defaultProps.cancelButton
-        .should.equal('Cancel')
+      Confirm.defaultProps.cancelButton.should.equal('Cancel')
     })
     it('sets the cancel button text', () => {
       shallow(<Confirm cancelButton='foo' />)
@@ -77,8 +74,7 @@ describe('Confirm', () => {
 
   describe('confirmButton', () => {
     it('is "OK" by default', () => {
-      Confirm.defaultProps.confirmButton
-        .should.equal('OK')
+      Confirm.defaultProps.confirmButton.should.equal('OK')
     })
     it('sets the confirm button text', () => {
       shallow(<Confirm confirmButton='foo' />)
@@ -97,10 +93,11 @@ describe('Confirm', () => {
     })
 
     it('omitted when not defined', () => {
-      const click = () => shallow(<Confirm />)
-        .find('Button')
-        .first()
-        .simulate('click')
+      const click = () =>
+        shallow(<Confirm />)
+          .find('Button')
+          .first()
+          .simulate('click')
 
       expect(click).to.not.throw()
     })
@@ -165,9 +162,10 @@ describe('Confirm', () => {
 
   describe('onConfirm', () => {
     it('omitted when not defined', () => {
-      const click = () => shallow(<Confirm />)
-        .find('Button[primary]')
-        .simulate('click')
+      const click = () =>
+        shallow(<Confirm />)
+          .find('Button[primary]')
+          .simulate('click')
 
       expect(click).to.not.throw()
     })
diff --git a/test/specs/addons/MountNode/lib/computeClassNameDifference-test.js b/test/specs/addons/MountNode/lib/computeClassNameDifference-test.js
index 92f8299fe7..31ba002aba 100644
--- a/test/specs/addons/MountNode/lib/computeClassNameDifference-test.js
+++ b/test/specs/addons/MountNode/lib/computeClassNameDifference-test.js
@@ -21,8 +21,10 @@ describe('computeClassNamesDifference', () => {
     _.forEach(fixtures, (fixture) => {
       const { prevClasses, currentClasses, forAdd, forRemoval } = fixture
 
-      computeClassNamesDifference(prevClasses, currentClasses)
-        .should.have.deep.members([forAdd, forRemoval])
+      computeClassNamesDifference(prevClasses, currentClasses).should.have.deep.members([
+        forAdd,
+        forRemoval,
+      ])
     })
   })
 })
diff --git a/test/specs/addons/MountNode/lib/computeClassNames-test.js b/test/specs/addons/MountNode/lib/computeClassNames-test.js
index 651fc154c0..f422ecfda1 100644
--- a/test/specs/addons/MountNode/lib/computeClassNames-test.js
+++ b/test/specs/addons/MountNode/lib/computeClassNames-test.js
@@ -9,13 +9,9 @@ describe('computeClassNames', () => {
   })
 
   it('combines classNames', () => {
-    const map = new Set([
-      { props: { className: 'foo' } },
-      { props: { className: 'bar' } },
-    ])
+    const map = new Set([{ props: { className: 'foo' } }, { props: { className: 'bar' } }])
 
-    computeClassNames(map)
-      .should.have.members(['foo', 'bar'])
+    computeClassNames(map).should.have.members(['foo', 'bar'])
   })
 
   it('combines only unique classNames', () => {
@@ -25,8 +21,7 @@ describe('computeClassNames', () => {
       { props: { className: 'foo bar baz' } },
     ])
 
-    computeClassNames(map)
-      .should.have.members(['foo', 'bar', 'baz'])
+    computeClassNames(map).should.have.members(['foo', 'bar', 'baz'])
   })
 
   it('omits false, undefined and null classNames', () => {
@@ -40,8 +35,7 @@ describe('computeClassNames', () => {
       { props: { className: 'false' } },
     ])
 
-    computeClassNames(map)
-      .should.have.members(['foo', '0', 'false'])
+    computeClassNames(map).should.have.members(['foo', '0', 'false'])
   })
 
   it('trims classNames', () => {
@@ -50,7 +44,6 @@ describe('computeClassNames', () => {
       { props: { className: '    baz qux' } },
     ])
 
-    computeClassNames(map)
-      .should.have.members(['foo', 'bar', 'baz', 'qux'])
+    computeClassNames(map).should.have.members(['foo', 'bar', 'baz', 'qux'])
   })
 })
diff --git a/test/specs/addons/MountNode/lib/getNodeFromProps-test.js b/test/specs/addons/MountNode/lib/getNodeFromProps-test.js
index ee8c6a1c56..5f3f9eaa5b 100644
--- a/test/specs/addons/MountNode/lib/getNodeFromProps-test.js
+++ b/test/specs/addons/MountNode/lib/getNodeFromProps-test.js
@@ -4,13 +4,11 @@ import isBrowser from 'src/lib/isBrowser'
 describe('getNodeFromProps', () => {
   describe('browser', () => {
     it('returns node when it defined', () => {
-      getNodeFromProps({ node: 'foo' })
-        .should.equal('foo')
+      getNodeFromProps({ node: 'foo' }).should.equal('foo')
     })
 
     it('returns document.body by default', () => {
-      getNodeFromProps({})
-        .should.equal(document.body)
+      getNodeFromProps({}).should.equal(document.body)
     })
   })
 
@@ -24,10 +22,8 @@ describe('getNodeFromProps', () => {
     })
 
     it('always returns null', () => {
-      expect(getNodeFromProps({ node: 'foo' }))
-        .to.be.a('undefined')
-      expect(getNodeFromProps({ }))
-        .to.be.a('undefined')
+      expect(getNodeFromProps({ node: 'foo' })).to.be.a('undefined')
+      expect(getNodeFromProps({})).to.be.a('undefined')
     })
   })
 })
diff --git a/test/specs/addons/Pagination/PaginationItem-test.js b/test/specs/addons/Pagination/PaginationItem-test.js
index 3cc3653ec4..463fe9f25f 100644
--- a/test/specs/addons/Pagination/PaginationItem-test.js
+++ b/test/specs/addons/Pagination/PaginationItem-test.js
@@ -10,42 +10,38 @@ describe('PaginationItem', () => {
 
   describe('active', () => {
     it('is "undefined" by default', () => {
-      shallow(<PaginationItem />)
-        .should.have.not.prop('active')
+      shallow(<PaginationItem />).should.have.not.prop('active')
     })
 
     it('can pass its value', () => {
-      shallow(<PaginationItem active />)
-        .should.have.prop('active', true)
+      shallow(<PaginationItem active />).should.have.prop('active', true)
     })
   })
 
   describe('aria-current', () => {
     it('matches the values of "active" prop by default', () => {
-      shallow(<PaginationItem active />)
-        .should.have.prop('aria-current', true)
+      shallow(<PaginationItem active />).should.have.prop('aria-current', true)
     })
 
     it('can be overridden', () => {
-      shallow(<PaginationItem active aria-current={false} />)
-        .should.have.prop('aria-current', false)
+      shallow(<PaginationItem active aria-current={false} />).should.have.prop(
+        'aria-current',
+        false,
+      )
     })
   })
 
   describe('disabled', () => {
     it('is "false" by default', () => {
-      shallow(<PaginationItem />)
-        .should.have.prop('disabled', false)
+      shallow(<PaginationItem />).should.have.prop('disabled', false)
     })
 
     it('is "true" when "type" is "ellipsisItem"', () => {
-      shallow(<PaginationItem type='ellipsisItem' />)
-        .should.have.prop('disabled', true)
+      shallow(<PaginationItem type='ellipsisItem' />).should.have.prop('disabled', true)
     })
 
     it('can be overridden', () => {
-      shallow(<PaginationItem disabled />)
-        .should.have.prop('disabled', true)
+      shallow(<PaginationItem disabled />).should.have.prop('disabled', true)
     })
   })
 
@@ -54,8 +50,7 @@ describe('PaginationItem', () => {
       const event = { target: null }
       const onClick = sandbox.spy()
 
-      shallow(<PaginationItem onClick={onClick} />)
-        .simulate('click', event)
+      shallow(<PaginationItem onClick={onClick} />).simulate('click', event)
 
       onClick.should.have.been.calledOnce()
       onClick.should.have.been.calledWithMatch(event, { onClick })
@@ -65,8 +60,7 @@ describe('PaginationItem', () => {
       const event = { key: 'Enter', target: null }
       const onClick = sandbox.spy()
 
-      shallow(<PaginationItem onClick={onClick} />)
-        .simulate('keyDown', event)
+      shallow(<PaginationItem onClick={onClick} />).simulate('keyDown', event)
 
       onClick.should.have.been.calledOnce()
       onClick.should.have.been.calledWithMatch(event, { onClick })
@@ -76,8 +70,7 @@ describe('PaginationItem', () => {
       const event = { target: null }
       const onClick = sandbox.spy()
 
-      shallow(<PaginationItem onClick={onClick} type='ellipsisItem' />)
-        .simulate('click', event)
+      shallow(<PaginationItem onClick={onClick} type='ellipsisItem' />).simulate('click', event)
 
       onClick.should.have.been.not.called()
     })
@@ -88,8 +81,7 @@ describe('PaginationItem', () => {
       const event = { key: 'Enter', target: null }
       const onKeyDown = sandbox.spy()
 
-      shallow(<PaginationItem onKeyDown={onKeyDown} />)
-        .simulate('keyDown', event)
+      shallow(<PaginationItem onKeyDown={onKeyDown} />).simulate('keyDown', event)
 
       onKeyDown.should.have.been.calledOnce()
       onKeyDown.should.have.been.calledWithMatch(event, { onKeyDown })
@@ -98,18 +90,15 @@ describe('PaginationItem', () => {
 
   describe('tabIndex', () => {
     it('is "0" by default', () => {
-      shallow(<PaginationItem />)
-        .should.have.prop('tabIndex', 0)
+      shallow(<PaginationItem />).should.have.prop('tabIndex', 0)
     })
 
     it('is "-1" when "type" is "ellipsisItem"', () => {
-      shallow(<PaginationItem type='ellipsisItem' />)
-        .should.have.prop('tabIndex', -1)
+      shallow(<PaginationItem type='ellipsisItem' />).should.have.prop('tabIndex', -1)
     })
 
     it('can be overridden', () => {
-      shallow(<PaginationItem tabIndex={5} />)
-        .should.have.prop('tabIndex', 5)
+      shallow(<PaginationItem tabIndex={5} />).should.have.prop('tabIndex', 5)
     })
   })
 })
diff --git a/test/specs/addons/TransitionablePortal/TransitionablePortal-test.js b/test/specs/addons/TransitionablePortal/TransitionablePortal-test.js
index a35b9873b1..cfb3ff85da 100644
--- a/test/specs/addons/TransitionablePortal/TransitionablePortal-test.js
+++ b/test/specs/addons/TransitionablePortal/TransitionablePortal-test.js
@@ -33,13 +33,13 @@ describe('TransitionablePortal', () => {
 
   describe('children', () => {
     it('renders a Portal', () => {
-      wrapperShallow(<TransitionablePortal {...requiredProps} />)
-        .should.have.descendants('Portal')
+      wrapperShallow(<TransitionablePortal {...requiredProps} />).should.have.descendants('Portal')
     })
 
     it('renders a Transition', () => {
-      wrapperShallow(<TransitionablePortal {...requiredProps} />)
-        .should.have.descendants('Transition')
+      wrapperShallow(<TransitionablePortal {...requiredProps} />).should.have.descendants(
+        'Transition',
+      )
     })
   })
 
@@ -85,7 +85,9 @@ describe('TransitionablePortal', () => {
 
     it('changes `portalOpen` to false', () => {
       const trigger = <button />
-      wrapperMount(<TransitionablePortal {...requiredProps} transition={quickTransition} trigger={trigger} />)
+      wrapperMount(
+        <TransitionablePortal {...requiredProps} transition={quickTransition} trigger={trigger} />,
+      )
 
       wrapper.find('button').simulate('click')
       domEvent.click(document.body)
diff --git a/test/specs/elements/Input/Input-test.js b/test/specs/elements/Input/Input-test.js
index f07c7cb92a..5eb0030080 100644
--- a/test/specs/elements/Input/Input-test.js
+++ b/test/specs/elements/Input/Input-test.js
@@ -259,4 +259,46 @@ describe('Input', () => {
         .should.have.prop('tabIndex', 123)
     })
   })
+
+  describe('icon', () => {
+    it('is second child', () => {
+      shallow(<Input icon='search' />)
+        .children()
+        .at(1)
+        .is('Icon')
+        .should.be.true()
+    })
+
+    it('is third child with action positioned left', () => {
+      shallow(<Input icon='search' action='foo' actionPosition='left' />)
+        .children()
+        .at(2)
+        .is('Icon')
+        .should.be.true()
+    })
+
+    it('is third child with label', () => {
+      shallow(<Input icon='search' label='foo' />)
+        .children()
+        .at(2)
+        .is('Icon')
+        .should.be.true()
+    })
+
+    it('is second child with action', () => {
+      shallow(<Input icon='search' iconPosition='left' action='foo' />)
+        .children()
+        .at(1)
+        .is('Icon')
+        .should.be.true()
+    })
+
+    it('is second child with label positioned right', () => {
+      shallow(<Input icon='search' iconPosition='left' label='foo' labelPosition='right' />)
+        .children()
+        .at(1)
+        .is('Icon')
+        .should.be.true()
+    })
+  })
 })
diff --git a/test/specs/modules/Rating/RatingIcon-test.js b/test/specs/modules/Rating/RatingIcon-test.js
index 4dede1f94c..b4fac5989f 100644
--- a/test/specs/modules/Rating/RatingIcon-test.js
+++ b/test/specs/modules/Rating/RatingIcon-test.js
@@ -24,8 +24,7 @@ describe('RatingIcon', () => {
       const spy = sandbox.spy()
       const event = { keyCode: keyboardKey.Spacebar, preventDefault: sandbox.spy() }
 
-      mount(<RatingIcon index={0} onClick={spy} />)
-        .simulate('keyup', event)
+      mount(<RatingIcon index={0} onClick={spy} />).simulate('keyup', event)
 
       spy.should.have.been.calledOnce()
       spy.should.have.been.calledWithMatch(event, { index: 0 })
@@ -36,8 +35,7 @@ describe('RatingIcon', () => {
       const spy = sandbox.spy()
       const event = { keyCode: keyboardKey.Enter, preventDefault: sandbox.spy() }
 
-      mount(<RatingIcon index={0} onClick={spy} />)
-        .simulate('keyup', event)
+      mount(<RatingIcon index={0} onClick={spy} />).simulate('keyup', event)
 
       spy.should.have.been.calledOnce()
       spy.should.have.been.calledWithMatch(event, { index: 0 })
diff --git a/test/utils/assertWithTimeout.js b/test/utils/assertWithTimeout.js
index f4b69904be..441a152583 100644
--- a/test/utils/assertWithTimeout.js
+++ b/test/utils/assertWithTimeout.js
@@ -24,5 +24,4 @@ const assertWithTimeout = (assertion, done) => {
   assert()
 }
 
-
 export default assertWithTimeout
diff --git a/webpack.config.babel.js b/webpack.config.babel.js
index 8ccb0c73e7..6e724a44b6 100644
--- a/webpack.config.babel.js
+++ b/webpack.config.babel.js
@@ -30,17 +30,19 @@ const webpackConfig = {
 // ------------------------------------
 
 const webpackHotPath = `${config.compiler_public_path}__webpack_hmr`
-const webpackHotMiddlewareEntry = `webpack-hot-middleware/client?${_.map(
-  {
-    path: webpackHotPath, // The path which the middleware is serving the event stream on
-    timeout: 2000, // The time to wait after a disconnection before attempting to reconnect
-    overlay: true, // Set to false to disable the DOM-based client-side overlay.
-    reload: true, // Set to true to auto-reload the page when webpack gets stuck.
-    noInfo: false, // Set to true to disable informational console logging.
-    quiet: false, // Set to true to disable all console logging.
-  },
-  (val, key) => `&${key}=${val}`,
-).join('')}`
+const webpackHotMiddlewareEntry = `webpack-hot-middleware/client?${_
+  .map(
+    {
+      path: webpackHotPath, // The path which the middleware is serving the event stream on
+      timeout: 2000, // The time to wait after a disconnection before attempting to reconnect
+      overlay: true, // Set to false to disable the DOM-based client-side overlay.
+      reload: true, // Set to true to auto-reload the page when webpack gets stuck.
+      noInfo: false, // Set to true to disable informational console logging.
+      quiet: false, // Set to true to disable all console logging.
+    },
+    (val, key) => `&${key}=${val}`,
+  )
+  .join('')}`
 
 const APP_ENTRY = paths.docsSrc('index.js')
 

From 9af142ed6816b1eff71e73fec089bb2849ebb491 Mon Sep 17 00:00:00 2001
From: Levi Thomason <me@levithomason.com>
Date: Mon, 25 Jun 2018 17:36:38 -0700
Subject: [PATCH 5/7] fix(Popup): remove semi from typings

---
 src/modules/Popup/Popup.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/Popup/Popup.d.ts b/src/modules/Popup/Popup.d.ts
index 71dd3926e2..ede04b318d 100644
--- a/src/modules/Popup/Popup.d.ts
+++ b/src/modules/Popup/Popup.d.ts
@@ -24,7 +24,7 @@ export interface PopupProps extends PortalProps {
   content?: SemanticShorthandItem<PopupContentProps>
 
   /** Existing element the pop-up should be bound to. */
-  context?: object;
+  context?: object
 
   /** A flowing Popup has no maximum width and continues to flow to fit its content. */
   flowing?: boolean

From 95429e6cf390dfd24a2483ccb1108f1ae8c83007 Mon Sep 17 00:00:00 2001
From: Ronak Desai <ds_rnk@yahoo.co.in>
Date: Mon, 25 Jun 2018 20:59:13 -0400
Subject: [PATCH 6/7] feat(Dropdown): lazyLoad prop for menu items (#1918)

* feat(Dropdown): lazy load options

* test(Dropdown): update for lazy loaded options

* feat(Dropdown): add lazyLoad prop

* test(Dropdown): restore tests

* fix(Dropdown): make lazyLoad optional
---
 src/modules/Dropdown/Dropdown.d.ts           |  3 +++
 src/modules/Dropdown/Dropdown.js             | 11 ++++++++--
 test/specs/modules/Dropdown/Dropdown-test.js | 23 +++++++++++++++-----
 3 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/modules/Dropdown/Dropdown.d.ts b/src/modules/Dropdown/Dropdown.d.ts
index 690131ed27..e432a550a9 100644
--- a/src/modules/Dropdown/Dropdown.d.ts
+++ b/src/modules/Dropdown/Dropdown.d.ts
@@ -98,6 +98,9 @@ export interface DropdownProps {
   /** A dropdown can be labeled. */
   labeled?: boolean
 
+  /** A dropdown can defer rendering its options until it is open. */
+  lazyLoad?: boolean
+
   /** A dropdown can show that it is currently loading data. */
   loading?: boolean
 
diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js
index 0d34b7f260..ac9c9d1e7c 100644
--- a/src/modules/Dropdown/Dropdown.js
+++ b/src/modules/Dropdown/Dropdown.js
@@ -142,6 +142,9 @@ export default class Dropdown extends Component {
     /** A dropdown can be labeled. */
     labeled: PropTypes.bool,
 
+    /** A dropdown can defer rendering its options until it is open. */
+    lazyLoad: PropTypes.bool,
+
     /** A dropdown can show that it is currently loading data. */
     loading: PropTypes.bool,
 
@@ -1228,8 +1231,12 @@ export default class Dropdown extends Component {
   }
 
   renderOptions = () => {
-    const { multiple, search, noResultsMessage } = this.props
-    const { selectedIndex, value } = this.state
+    const { lazyLoad, multiple, search, noResultsMessage } = this.props
+    const { open, selectedIndex, value } = this.state
+
+    // lazy load, only render options when open
+    if (lazyLoad && !open) return null
+
     const options = this.getMenuOptions()
 
     if (noResultsMessage !== null && search && _.isEmpty(options)) {
diff --git a/test/specs/modules/Dropdown/Dropdown-test.js b/test/specs/modules/Dropdown/Dropdown-test.js
index 727a3347a4..05287af689 100644
--- a/test/specs/modules/Dropdown/Dropdown-test.js
+++ b/test/specs/modules/Dropdown/Dropdown-test.js
@@ -468,6 +468,7 @@ describe('Dropdown', () => {
         .first()
         .simulate('click')
         .should.have.prop('active', true)
+
       wrapper.should.have.state('value', options[0].value)
 
       dropdownMenuIsClosed()
@@ -914,11 +915,7 @@ describe('Dropdown', () => {
       wrapper
         .find('DropdownItem')
         .at(1)
-        .should.have.prop('selected', false)
-      wrapper
-        .find('DropdownItem')
-        .at(1)
-        .should.have.prop('active', false)
+        .should.have.props({ selected: false, active: false })
 
       // select and make active
       domEvent.keyDown(document, { key: 'ArrowDown' })
@@ -928,7 +925,7 @@ describe('Dropdown', () => {
       wrapper
         .find('DropdownItem')
         .at(1)
-        .should.have.prop('active', true)
+        .should.have.props({ selected: true, active: true })
     })
     it('closes the menu', () => {
       wrapperMount(<Dropdown options={options} selection />).simulate('click')
@@ -2140,6 +2137,20 @@ describe('Dropdown', () => {
     })
   })
 
+  describe('lazyLoad', () => {
+    it('does not render options when closed', () => {
+      wrapperShallow(<Dropdown options={options} lazyLoad />).should.not.have.descendants(
+        'DropdownItem',
+      )
+    })
+
+    it('renders options when open', () => {
+      wrapperShallow(<Dropdown options={options} lazyLoad open />).should.have.descendants(
+        'DropdownItem',
+      )
+    })
+  })
+
   describe('Dropdown.Menu child', () => {
     it('renders child passed', () => {
       wrapperShallow(

From c8fabc7805ad23eeeaed9ec37c128ca4d508a3aa Mon Sep 17 00:00:00 2001
From: Levi Thomason <me@levithomason.com>
Date: Mon, 25 Jun 2018 18:19:48 -0700
Subject: [PATCH 7/7] 0.81.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d64134726f..d9fc6b3a13 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "semantic-ui-react",
-  "version": "0.81.1",
+  "version": "0.81.2",
   "description": "The official Semantic-UI-React integration.",
   "jsnext:main": "dist/es/index.js",
   "main": "dist/commonjs/index.js",