Merge branch 'master' of https://github.com/Semantic-Org/Semantic-UI-…

…React into feat/forward-ref

# Conflicts:
#	docs/src/components/ComponentDoc/ComponentExample/renderExampleSourceCode.js
#	package.json
#	test/specs/modules/Dropdown/Dropdown-test.js
#	yarn.lock

.babel-preset.js

@@ -1,7 +1,8 @@
 const { NODE_ENV } = process.env
 
 const isESBuild = NODE_ENV === 'build-es'
-const isLibBuild = NODE_ENV === 'build' || isESBuild
+const isUMDBuild = NODE_ENV === 'build-umd'
+const isLibBuild = NODE_ENV === 'build' || isESBuild || isUMDBuild
 const isDocsBuild = NODE_ENV === 'development' || NODE_ENV === 'production'
 
 const browsers = [
@@ -22,7 +23,6 @@ const plugins = [
   [
     '@babel/plugin-transform-runtime',
     {
-      polyfill: false,
       regenerator: isDocsBuild,
     },
   ],
@@ -32,7 +32,8 @@ const plugins = [
   [
     'transform-react-remove-prop-types',
     {
-      mode: 'wrap',
+      mode: isUMDBuild ? 'remove' : 'wrap',
+      removeImport: isUMDBuild,
     },
   ],
   // A plugin for react-static

.eslintignore

@@ -3,3 +3,4 @@ dist/*
 docs/dist/*
 examples/webpack3/scripts/*
 dll/*
+tmp/*

.github/stale.yml

@@ -1,8 +1,8 @@
 # Number of days of inactivity before an issue becomes stale
-daysUntilStale: 90
+daysUntilStale: 180
 
 # Number of days of inactivity before a stale issue is closed
-daysUntilClose: 90
+daysUntilClose: 180
 
 # Issues with these labels will never be considered stale
 exemptLabels:
@@ -14,7 +14,7 @@ staleLabel: stale
 
 # Comment to post when marking an issue as stale. Set to `false` to disable
 markComment: >
-  There has been no activity in this thread for 90 days. While we care about
+  There has been no activity in this thread for 180 days. While we care about
   every issue and we’d love to see this fixed, the core team’s time is 
   limited so we have to focus our attention on the issues that are most 
   pressing. Therefore, we will likely not be able to get to this one.
@@ -23,11 +23,11 @@ markComment: >
   However, PRs for this issue will of course be accepted and welcome!
   
   
-  If there is no more activity in the next 90 days, this issue will be closed
+  If there is no more activity in the next 180 days, this issue will be closed
   automatically for housekeeping. To prevent this, simply leave a reply here. 
   Thanks!
 
 # Comment to post when closing a stale issue. Set to `false` to disable
 closeComment: >
-  This issue will be closed due to lack of activity for 6 months. If you’d
+  This issue will be closed due to lack of activity for 12 months. If you’d
   like this to be reopened, just leave a comment; we do monitor them!

.prettierignore

@@ -4,7 +4,6 @@
 .idea/
 .vscode/
 
-
 coverage/
 
 dist/
@@ -16,3 +15,4 @@ docs/src/exampleMenus
 docs/dist/
 
 package.json
+tmp/

README.md

@@ -16,7 +16,7 @@
     <img alt="Gitter" src="https://img.shields.io/badge/gitter-join_chat-1dce73.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSIwIiB5PSI1IiBmaWxsPSIjZmZmIiB3aWR0aD0iMSIgaGVpZ2h0PSI1Ii8%2BPHJlY3QgeD0iMiIgeT0iNiIgZmlsbD0iI2ZmZiIgd2lkdGg9IjEiIGhlaWdodD0iNyIvPjxyZWN0IHg9IjQiIHk9IjYiIGZpbGw9IiNmZmYiIHdpZHRoPSIxIiBoZWlnaHQ9IjciLz48cmVjdCB4PSI2IiB5PSI2IiBmaWxsPSIjZmZmIiB3aWR0aD0iMSIgaGVpZ2h0PSI0Ii8%2BPC9zdmc%2B&logoWidth=8&style=flat-square&maxAge=2592000" />
   </a>
   <a href="https://circleci.com/gh/Semantic-Org/Semantic-UI-React/tree/master">
-    <img alt="Circle" src="https://img.shields.io/circleci/project/Semantic-Org/Semantic-UI-React/master.svg?style=flat-square" />
+    <img alt="Circle" src="https://img.shields.io/circleci/project/github/Semantic-Org/Semantic-UI-React/master.svg?style=flat-square" />
   </a>
   <a href="https://codecov.io/gh/Semantic-Org/Semantic-UI-React">
     <img alt="Codecov" src="https://img.shields.io/codecov/c/github/Semantic-Org/Semantic-UI-React/master.svg?style=flat-square" />
@@ -112,6 +112,7 @@ This is a listing of example projects and guides that will help you integrate Se
 
 <details>
   <summary><b>How do I setup CSS?</b></summary>
+
   There are several options.  Refer to our doc on [CSS Usage][23].
 </details>
 

config.js

@@ -1,4 +1,4 @@
-import path from 'path'
+const path = require('path')
 
 // ------------------------------------
 // Environment vars
@@ -42,12 +42,6 @@ const config = {
   ...envConfig,
   paths,
 
-  // ----------------------------------
-  // Server Configuration
-  // ----------------------------------
-  server_host: 'localhost',
-  server_port: process.env.PORT || 8080,
-
   // ----------------------------------
   // Compiler Configuration
   // ----------------------------------
@@ -92,11 +86,10 @@ const config = {
     'classnames',
     'copy-to-clipboard',
     'faker',
-    'prettier/standalone',
     'react',
     'react-ace',
     'react-dom',
   ],
 }
 
-export default config
+module.exports = config

docs/public/style.css

@@ -80,7 +80,7 @@ code:not(.hljs)::after {
 }
 
 #carbonads {
-  display: block;
+  line-height: 1.4;
 }
 
 #carbonads span {
@@ -93,17 +93,28 @@ code:not(.hljs)::after {
 
 .carbon-img img {
   display: block;
+  width: 98px;
+  height: 75px;
 }
 
 .carbon-text {
   display: block;
-  margin-top: 1em;
+  margin-top: 0.25em;
+  font-size: 0.9em;
+  color: #aaa;
+}
+.carbon-text:hover {
+  color: #ddd
 }
 
 .carbon-poweredby {
   display: block;
-  margin-top: 0.5em;
-  font-size: 0.8em;
+  margin-top: 0.125em;
+  font-size: 0.75em;
+  text-align: right;
   color: #ffffff;
   opacity: 0.5;
 }
+.carbon-poweredby:hover {
+  color: #ddd;
+}

docs/src/Style.js

@@ -1,19 +1,18 @@
 const style = {}
 const sidebarWidth = 250
 
-style.container = {}
-
 style.menu = {
   position: 'fixed',
+  display: 'flex',
+  flexDirection: 'column',
   top: 0,
   bottom: 0,
   left: 0,
   width: sidebarWidth,
-  paddingBottom: '1em',
   // match menu background
   // prevents a white background when items are filtered out by search
   background: '#1B1C1D',
-  overflowY: 'scroll',
+  overflowX: 'hidden',
 }
 
 style.sidebarMain = {

docs/src/components/CarbonAd/CarbonAd.js

@@ -1,26 +1,58 @@
 import _ from 'lodash'
 import React, { Component } from 'react'
 
-const style = { minHeight: 173 }
+import { isBrowser } from 'src/lib'
+
+const style = {
+  padding: '0.5rem',
+  background: '#222',
+  boxShadow: '0 0 2rem black',
+}
+
+let isLoading = true
+let script
+
+const adExist = () => !!document.querySelector('#docs-carbonads #carbonads')
+
+// Heads up!
+// We render docs with React-Static which performs SSR rendering.
+if (isBrowser()) {
+  script = document.createElement('script')
+
+  script.async = true
+  script.id = '_carbonads_js'
+  script.type = 'text/javascript'
+  script.src = '//cdn.carbonads.com/carbon.js?serve=CK7DT23J&placement=reactsemanticuicom'
+  script.onload = () => {
+    isLoading = false
+  }
+}
+
+const waitForLoad = () => {
+  if (adExist()) isLoading = false
+  else setTimeout(waitForLoad, 50)
+}
 
 class CarbonAd extends Component {
   componentDidMount() {
-    this.lastHref = location.href
-
-    const script = document.createElement('script')
-    script.async = true
-    script.id = '_carbonads_js'
-    script.type = 'text/javascript'
-    script.src = '//cdn.carbonads.com/carbon.js?serve=CK7DT23J&placement=reactsemanticuicom'
+    this.ifRef((ref) => {
+      // always add the script as it is used to insert the ad
+      ref.appendChild(script)
 
-    this.ifRef(ref => ref.appendChild(script))
+      // On the first mount, the script fetches the first ad itself, so do nothing
+      // On subsequent mounts, we need to call refresh to insert a new ad
+      // Ensure we don't call refresh during an existing refresh or we'll get a double ad insert
+      // https://github.com/Semantic-Org/Semantic-UI-React/pull/3215
+      if (!isLoading) {
+        isLoading = true
+        _.invoke(window._carbonads, 'refresh')
+        waitForLoad()
+      }
+    })
   }
 
-  componentWillUpdate() {
-    if (location.href !== this.lastHref) {
-      this.lastHref = location.href
-      _.invoke(window._carbonads, 'refresh')
-    }
+  shouldComponentUpdate() {
+    return false
   }
 
   ifRef = (cb) => {

docs/src/components/CarbonAd/CarbonAdNative.js

@@ -2,6 +2,9 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
 import { Label } from 'semantic-ui-react'
+import { makeDebugger } from '../../../../src/lib'
+
+const debug = makeDebugger('carbon-ad-native')
 
 class CarbonAdNative extends Component {
   static propTypes = {
@@ -11,13 +14,16 @@ class CarbonAdNative extends Component {
   state = {}
 
   componentDidMount() {
-    this.getAd()
-
+    debug('componentDidMount', { mounted: this.mounted })
     this.mounted = true
+
+    this.getAd()
   }
 
   componentWillUpdate() {
-    if (Date.now() - this.timeOfLastAd > 10000) {
+    const shouldGetAd = Date.now() - this.timeOfLastAd > 10000
+    debug('componentWillUpdate', { mounted: this.mounted, shouldGetAd })
+    if (shouldGetAd) {
       this.getAd()
     }
   }
@@ -28,13 +34,17 @@ class CarbonAdNative extends Component {
   }
 
   cleanup = () => {
+    debug('cleanup', { script: this.script, mounted: this.mounted })
     if (!this.script) return
 
     document.getElementsByTagName('head')[0].removeChild(this.script)
     this.script = null
   }
 
   getAd = () => {
+    debug('getAd', { mounted: this.mounted })
+    if (!this.mounted) return
+
     window._handleNativeJSON = this.handleNativeJSON
     this.timeOfLastAd = Date.now()
 
@@ -51,15 +61,18 @@ class CarbonAdNative extends Component {
   }
 
   handleNativeJSON = (json) => {
+    debug('handleNativeJSON', { mounted: this.mounted })
     try {
-      const sanitized = json.ads
+      const sanitizedAd = json.ads
         .filter(ad => Object.keys(ad).length > 0)
         .filter(ad => !!ad.statlink)
+        .filter(Boolean)[0]
+      debug('handleNativeJSON sanitizedAd', sanitizedAd)
 
-      if (this.mounted) {
-        this.setState({ ad: sanitized[0] })
-      } else {
-        this.cleanup()
+      if (!sanitizedAd) {
+        this.getAd()
+      } else if (this.mounted) {
+        this.setState({ ad: sanitizedAd })
       }
     } catch (err) {
       // eslint-disable-next-line no-console
@@ -71,6 +84,7 @@ class CarbonAdNative extends Component {
     const { inverted } = this.props
     const { ad } = this.state
 
+    debug('render', ad)
     if (!ad) return null
 
     const id = `carbon-native-${ad.timestamp}`

docs/src/components/Editor/EditorAce.js → docs/src/components/CodeEditor/CodeEditor.js

@@ -6,6 +6,7 @@ import 'brace'
 import 'brace/ext/language_tools'
 import 'brace/mode/jsx'
 import 'brace/mode/html'
+import 'brace/mode/sh'
 import 'brace/theme/tomorrow_night'
 
 import { componentInfoContext } from 'docs/src/utils'
@@ -94,6 +95,8 @@ const semanticUIReactCompleter = {
   },
 }
 
-const EditorAce = props => <Ace {...props} enableBasicAutocompletion={[semanticUIReactCompleter]} />
+const CodeEditor = props => (
+  <Ace {...props} enableBasicAutocompletion={[semanticUIReactCompleter]} />
+)
 
-export default EditorAce
+export default CodeEditor