Merge branch 'master' into next

Author: layershifter

.babelrc

@@ -1,6 +1,6 @@
 {
   "presets": [
-    "./build/preset-es2015",
+    "./build/preset-env",
     "react",
     "stage-1"
   ],

CHANGELOG.md

@@ -0,0 +1,29 @@
+const env = process.env.NODE_ENV
+
+const plugins = env === 'build' || env === 'build-es' ? [
+  ['filter-imports', {
+    imports: {
+      debug: ['default'],
+      '../../lib': ['makeDebugger'],
+    },
+  }],
+] : []
+const browsers = [
+  'last 8 versions',
+  'safari > 8',
+  'firefox > 23',
+  'chrome > 24',
+  'opera > 15',
+  'not ie < 11',
+  'not ie_mob <= 11',
+]
+
+const envOptions = {
+  targets: { browsers },
+}
+if (env === 'build-es') envOptions.modules = false
+
+module.exports = {
+  presets: [['env', envOptions]],
+  plugins,
+}

build/preset-env.js

@@ -0,0 +1,62 @@
+import React, { Component } from 'react'
+import _ from 'lodash'
+
+const transitionTime = 200
+
+class CarbonAd extends Component {
+  state = {
+    opacity: 1,
+  }
+
+  componentDidMount() {
+    this.lastPath = location.pathname
+
+    this.refresh()
+  }
+
+  componentDidUpdate() {
+    if (location.pathname !== this.lastPath) {
+      this.lastPath = location.pathname
+      this.refresh()
+    }
+  }
+
+  refresh = () => {
+    this.setState({ opacity: 0 })
+
+    setTimeout(() => {
+      _.invoke(window._carbonads, 'refresh')
+
+      setTimeout(() => {
+        this.setState({ opacity: 1 })
+      }, transitionTime)
+    }, transitionTime)
+  }
+
+  render() {
+    const { opacity } = this.state
+
+    const style = {
+      transition: `opacity ${transitionTime}ms`,
+      minHeight: 173,
+      opacity,
+    }
+
+    return (
+      <div style={style}>
+        {/*
+          Heads up!
+          This script is loaded in index.html. The script requires the markup here to match in order to work.
+        */}
+        <script
+          async
+          id='_carbonads_js'
+          type='text/javascript'
+          src='//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=reactsemanticuicom'
+        />
+      </div>
+    )
+  }
+}
+
+export default CarbonAd

build/preset-es2015.js

@@ -4,16 +4,17 @@ import React, { Component } from 'react'
 import { findDOMNode } from 'react-dom'
 import { NavLink } from 'react-router-dom'
 import { withRouter } from 'react-router'
-
-import pkg from 'package.json'
-import { typeOrder, parentComponents, repoURL } from 'docs/app/utils'
-import { keyboardKey, META } from 'src/lib'
-import Logo from 'docs/app/Components/Logo/Logo'
 import {
   Menu,
   Icon,
   Input,
-} from 'src'
+} from 'semantic-ui-react'
+
+import CarbonAd from 'docs/app/Components/CarbonAd/CarbonAd'
+import Logo from 'docs/app/Components/Logo/Logo'
+import { typeOrder, parentComponents, repoURL } from 'docs/app/utils'
+import pkg from 'package.json'
+import { keyboardKey, META } from 'src/lib'
 
 const getRoute = _meta => `/${_meta.type}s/${_.kebabCase(_meta.name)}`
 
@@ -188,6 +189,9 @@ class Sidebar extends Component {
             <small><em>{pkg.version}</em></small>
           </strong>
         </Menu.Item>
+        <Menu.Item>
+          <CarbonAd />
+        </Menu.Item>
         <Menu.Item>
           <Menu.Header>Getting Started</Menu.Header>
           <Menu.Menu>
@@ -203,10 +207,10 @@ class Sidebar extends Component {
             <Menu.Item as={NavLink} to='/layouts' activeClassName='active'>
               Layouts
             </Menu.Item>
-            <Menu.Item as='a' href={repoURL}>
+            <Menu.Item as='a' href={repoURL} target='_blank' rel='noopener noreferrer'>
               <Icon name='github' /> GitHub
             </Menu.Item>
-            <Menu.Item as='a' href={`${repoURL}/blob/master/CHANGELOG.md`}>
+            <Menu.Item as='a' href={`${repoURL}/blob/master/CHANGELOG.md`} target='_blank' rel='noopener noreferrer'>
               <Icon name='file text outline' /> CHANGELOG
             </Menu.Item>
           </Menu.Menu>

docs/app/Components/CarbonAd/CarbonAd.js

@@ -23,6 +23,13 @@
       }
     })()
   </script>
+  <!-- Heads up! -->
+  <!-- This script is loaded in CarbonAds.js.  The script requires the markup here to match in order to work. -->
+  <script
+    async
+    type='text/javascript'
+    src='//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=reactsemanticuicom'>
+  </script>
 </head>
 <body class="dimmed dimmable">
   <div id="docs-loading-dimmer" class="ui active page dimmer">
@@ -162,6 +169,36 @@
     .docs-icon-set-column:hover > .icon {
       transform: scale(1.5);
     }
-  </style>
+
+    /* Carbon Ads */
+    #carbonads {
+      display: block;
+    }
+
+    #carbonads span {
+      display: block;
+    }
+
+    .carbon-img {
+      display: block;
+    }
+
+    .carbon-img img {
+      display: block;
+    }
+
+    .carbon-text {
+      display: block;
+      margin-top: 1em;
+    }
+
+    .carbon-poweredby {
+      display: block;
+      margin-top: 0.5em;
+      font-size: 0.8em;
+      color: #ffffff;
+      opacity: 0.5;
+    }
+    </style>
 </body>
 </html>

docs/app/Components/Sidebar/Sidebar.js

@@ -1,6 +1,6 @@
 {
   "name": "semantic-ui-react",
-  "version": "0.78.3",
+  "version": "0.79.0",
   "description": "The official Semantic-UI-React integration.",
   "jsnext:main": "dist/es/index.js",
   "main": "dist/commonjs/index.js",
@@ -23,7 +23,7 @@
     "build:umd": "cross-env NODE_ENV=build gulp umd",
     "build:docs-toc": "doctoc ./.github/CONTRIBUTING.md --github --maxlevel 4",
     "build:docs-cname": "echo react.semantic-ui.com > docs/build/CNAME",
-    "build:changelog": "github_changelog_generator --max-issues 1000",
+    "build:changelog": "github_changelog_generator --no-issues --no-unreleased --release-branch master --since-tag $(git describe --abbrev=0 --tags $(git rev-parse HEAD~400))",
     "deploy:changelog": "git add CHANGELOG.md && git commit -m 'docs(changelog): update changelog [ci skip]' && git push",
     "predeploy:docs": "cross-env NODE_ENV=production yarn build:docs && yarn build:docs-cname",
     "deploy:docs": "gh-pages -d docs/build -m 'deploy docs [ci skip]'",
@@ -72,10 +72,10 @@
     "babel-plugin-filter-imports": "^1.0.3",
     "babel-plugin-istanbul": "^4.1.4",
     "babel-plugin-lodash": "^3.2.11",
-    "babel-plugin-transform-react-handled-props": "^0.2.5",
+    "babel-plugin-transform-react-handled-props": "^0.3.1",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.8",
     "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-1": "^6.24.1",
     "babel-register": "^6.24.1",

docs/app/index.ejs

@@ -7,7 +7,7 @@ export interface PaginationProps {
   [key: string]: any;
 
   /** A pagination item can have an aria label. */
-  ariaLabel?: string;
+  'aria-label'?: string;
 
   /** Initial activePage value. */
   defaultActivePage?: number | string;

package.json

@@ -18,7 +18,7 @@ import PaginationItem from './PaginationItem'
 export default class Pagination extends Component {
   static propTypes = {
     /** A pagination item can have an aria label. */
-    ariaLabel: PropTypes.string,
+    'aria-label': PropTypes.string,
 
     /** Initial activePage value. */
     defaultActivePage: PropTypes.oneOfType([
@@ -82,24 +82,24 @@ export default class Pagination extends Component {
   ]
 
   static defaultProps = {
-    ariaLabel: 'Pagination Navigation',
+    'aria-label': 'Pagination Navigation',
     boundaryRange: 1,
     ellipsisItem: '...',
     firstItem: {
-      ariaLabel: 'First item',
+      'aria-label': 'First item',
       content: '«',
     },
     lastItem: {
-      ariaLabel: 'Last item',
+      'aria-label': 'Last item',
       content: '»',
     },
     nextItem: {
-      ariaLabel: 'Next item',
+      'aria-label': 'Next item',
       content: '⟩',
     },
     pageItem: {},
     prevItem: {
-      ariaLabel: 'Previous item',
+      'aria-label': 'Previous item',
       content: '⟨',
     },
     siblingRange: 1,
@@ -133,7 +133,7 @@ export default class Pagination extends Component {
   })
 
   render() {
-    const { ariaLabel, boundaryRange, siblingRange, totalPages } = this.props
+    const { 'aria-label': ariaLabel, boundaryRange, siblingRange, totalPages } = this.props
     const { activePage } = this.state
 
     const items = createPaginationItems({ activePage, boundaryRange, siblingRange, totalPages })

src/addons/Pagination/Pagination.d.ts

@@ -6,9 +6,6 @@ export interface PaginationItemProps {
   /** A pagination item can be active. */
   active?: boolean;
 
-  /** A pagination item can have an aria label. */
-  ariaLabel?: string;
-
   /** A pagination item can be disabled. */
   disabled?: boolean;
 

src/addons/Pagination/Pagination.js

@@ -17,9 +17,6 @@ class PaginationItem extends Component {
     /** A pagination item can be active. */
     active: PropTypes.bool,
 
-    /** A pagination item can have an aria label. */
-    ariaLabel: PropTypes.string,
-
     /** A pagination item can be disabled. */
     disabled: PropTypes.bool,
 
@@ -73,15 +70,14 @@ class PaginationItem extends Component {
   })
 
   render() {
-    const { active, ariaLabel, type } = this.props
+    const { active, type } = this.props
     const disabled = this.props.disabled || type === 'ellipsisItem'
 
     return MenuItem.create(this.props, {
       defaultProps: {
         active,
         disabled,
         'aria-current': active,
-        'aria-label': ariaLabel,
         onClick: this.handleClick,
         onKeyDown: this.handleKeyDown,
         tabIndex: disabled ? -1 : 0,

src/addons/Pagination/PaginationItem.d.ts

@@ -226,7 +226,7 @@ export default class Checkbox extends Component {
       useKeyOnly(indeterminate, 'indeterminate'),
       // auto apply fitted class to compact white space when there is no label
       // https://semantic-ui.com/modules/checkbox.html#fitted
-      useKeyOnly(!label, 'fitted'),
+      useKeyOnly(_.isNil(label), 'fitted'),
       useKeyOnly(radio, 'radio'),
       useKeyOnly(readOnly, 'read-only'),
       useKeyOnly(slider, 'slider'),