-
+
)
}
}
+DocsLayout.propTypes = {
+ additionalTitle: PropTypes.string,
+ children: PropTypes.node,
+ location: PropTypes.object.isRequired,
+ sidebar: PropTypes.bool,
+ title: PropTypes.string.isRequired,
+}
+
export default withRouter(DocsLayout)
diff --git a/docs/src/components/Document.js b/docs/src/components/Document.js
index 0b33232df1..656657ca36 100644
--- a/docs/src/components/Document.js
+++ b/docs/src/components/Document.js
@@ -21,25 +21,15 @@ const Document = ({ Body, children, Head, Html, siteData: { dev, versions } }) =
/>
+
-
-
-
+```
+
+## Custom themes
-
+Detailed documentation on Semantic UI theming is provided in our [Theming guide](/theming).
-## Bundling
+## Supported Bundling Options
Semantic UI React is fully supported by all modern JavaScript bundlers.
### Create React App
-Semantic UI React is fully compatible with `create-react-app` and works out the box. Setup of custom theme is covered in [Theming guide](/theming).
+Semantic UI React is fully compatible with `create-react-app` and works out the box. Setting up of custom theme is covered in [Theming guide](/theming).
### Webpack 4
-Semantic UI React is fully supported by Webpack 4, including tree shaking as of `semantic-ui-react@0.81.2`.
-
-Please ensure that you build your app in production mode before release. Semantic UI React includes several optimizations in production mode, such as stripping `propTypes` from your build.
-
-
+Semantic UI React is fully supported by Webpack 4. Please ensure that you build your app in [production mode](https://webpack.js.org/guides/production/) before release. Semantic UI React includes several optimizations in production mode, such as stripping `propTypes` from your build.
## Examples
-For examples on how to import and use Semantic UI React components, click the code icon
-() next to any example. Here are a few direct links:
+For examples on how to import and use Semantic UI React components, click the code icon () next to any example. Here are a few direct links:
- [Button](/elements/button#button-example-button)
- [List](/elements/list#list-example-list)
diff --git a/docs/src/utils/formatCode.js b/docs/src/utils/formatCode.js
index 42b654436c..5e1465cf15 100644
--- a/docs/src/utils/formatCode.js
+++ b/docs/src/utils/formatCode.js
@@ -1,4 +1,6 @@
import prettier from 'prettier/standalone'
+import babel from 'prettier/parser-babel'
+
import prettierConfig from '../../../.prettierrc.json'
import isBrowser from '../../../src/lib/isBrowser'
@@ -21,7 +23,7 @@ const formatCode = isBrowser()
...prettierConfig,
printWidth,
parser,
- plugins: window.prettierPlugins,
+ plugins: { babel },
})
return formatted.replace(/^; {
function endStream(cb) {
_.forEach(exampleFilesByDisplayName, (contents, displayName) => {
- const sortedContents = _.sortBy(contents, ['order', 'sectionName']).map(
- ({ sectionName, examples }) => ({ sectionName, examples }),
- )
+ const sortedContents = _.sortBy(contents, [
+ 'order',
+ 'sectionName',
+ ]).map(({ sectionName, examples }) => ({ sectionName, examples }))
const file = new Vinyl({
path: `./${displayName}.examples.json`,
diff --git a/gulp/plugins/gulp-example-source.js b/gulp/plugins/gulp-example-source.js
index 6a732a899f..9d48655ee0 100644
--- a/gulp/plugins/gulp-example-source.js
+++ b/gulp/plugins/gulp-example-source.js
@@ -23,10 +23,7 @@ export default () => {
}
try {
- const sourceName = _.split(file.path, path.sep)
- .slice(-4)
- .join('/')
- .slice(0, -3)
+ const sourceName = _.split(file.path, path.sep).slice(-4).join('/').slice(0, -3)
exampleSources[sourceName] = file.contents.toString()
cb()
diff --git a/gulp/tasks/docs.js b/gulp/tasks/docs.js
index 77ee5c952a..1be6ecbe1c 100644
--- a/gulp/tasks/docs.js
+++ b/gulp/tasks/docs.js
@@ -28,10 +28,7 @@ const handleWatchChange = (filename) =>
* @returns {String}
*/
const toUniversalGlob = (directory, glob) => {
- const relative = path
- .relative(process.cwd(), directory)
- .split(path.sep)
- .join('/')
+ const relative = path.relative(process.cwd(), directory).split(path.sep).join('/')
return `${relative}/${glob}`
}
diff --git a/index.d.ts b/index.d.ts
index d92e228489..c0b0aafa71 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -38,7 +38,11 @@ export {
StrictResponsiveProps,
} from './dist/commonjs/addons/Responsive'
export { default as Select, SelectProps } from './dist/commonjs/addons/Select'
-export { default as TextArea, TextAreaProps } from './dist/commonjs/addons/TextArea'
+export {
+ default as TextArea,
+ TextAreaProps,
+ StrictTextAreaProps,
+} from './dist/commonjs/addons/TextArea'
export {
default as TransitionablePortal,
TransitionablePortalProps,
@@ -630,11 +634,7 @@ export {
StrictCardMetaProps,
} from './dist/commonjs/views/Card/CardMeta'
-export {
- default as Comment,
- CommentProps,
- StrictCommentProps,
-} from './dist/commonjs/views/Comment'
+export { default as Comment, CommentProps, StrictCommentProps } from './dist/commonjs/views/Comment'
export {
default as CommentAction,
CommentActionProps,
diff --git a/karma.conf.babel.js b/karma.conf.babel.js
index 7a31de2f0e..4d84845012 100644
--- a/karma.conf.babel.js
+++ b/karma.conf.babel.js
@@ -1,10 +1,10 @@
import fs from 'fs'
-import { executablePath } from 'puppeteer'
+import puppeteer from 'puppeteer'
import config from './config'
import webpackConfig from './webpack.karma.config'
-process.env.CHROME_BIN = executablePath()
+process.env.CHROME_BIN = puppeteer.executablePath()
const { paths } = config
@@ -69,9 +69,6 @@ export default (karmaConfig) => {
],
formatError,
frameworks: ['mocha'],
- mochaReporter: {
- output: 'minimal',
- },
// make karma serve all files that the web server does: /* => /docs/app/*
proxies: fs.readdirSync(paths.docsPublic()).reduce((acc, file) => {
const isDir = fs.statSync(paths.docsPublic(file)).isDirectory()
diff --git a/package.json b/package.json
index 1b7d24971b..c31687ecb2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "semantic-ui-react",
- "version": "0.88.1",
+ "version": "1.1.0",
"description": "The official Semantic-UI-React integration.",
"jsnext:main": "dist/es/index.js",
"main": "dist/commonjs/index.js",
@@ -18,18 +18,19 @@
"build:changelog": "github_changelog_generator --user Semantic-Org --project Semantic-UI-React --no-issues --no-unreleased --release-branch master --since-tag $(git describe --abbrev=0 --tags $(git rev-parse HEAD~250))",
"build:docs": "cross-env NODE_ENV=production gulp build:docs",
"build:docs:staging": "cross-env STAGING=true yarn build:docs && yarn serve docs/dist",
- "build:dist": "gulp --series build:dist",
- "ci": "yarn tsd:lint && yarn tsd:test && yarn lint && yarn test",
+ "build:dist": "gulp build:dist",
+ "prebuild:size": "gulp build:dist:es",
+ "build:size": "node bundle-size/bundle.js",
+ "ci": "yarn tsd:test && yarn lint && yarn test",
"predeploy:docs": "cross-env NODE_ENV=production yarn build:docs && gulp build:docs:cname",
"deploy:changelog": "git add CHANGELOG.md && git commit -m \"docs(changelog): update changelog [ci skip]\" && git push",
"deploy:docs": "gulp deploy:docs",
"postdeploy:docs": "yarn build:changelog && yarn deploy:changelog",
- "lint": "cross-env NODE_ENV=production eslint .",
+ "lint": "cross-env NODE_ENV=production eslint . --ext .js,.ts,.tsx",
"lint:fix": "yarn lint --fix",
"prettier": "prettier --list-different \"**/*.{js,jsx,ts,tsx}\"",
"prettier:fix": "prettier --write \"**/*.{js,jsx,ts,tsx}\"",
- "postcommit": "git update-index --again",
- "prerelease": "yarn lint && yarn tsd:lint && yarn tsd:test && yarn test && cross-env NODE_ENV=production yarn build",
+ "prerelease": "yarn lint && yarn tsd:test && yarn test && cross-env NODE_ENV=production yarn build",
"postrelease": "yarn deploy:docs",
"release:major": "yarn prerelease && ta-script npm/release major && yarn postrelease",
"release:minor": "yarn prerelease && ta-script npm/release minor && yarn postrelease",
@@ -41,17 +42,16 @@
"test": "cross-env NODE_ENV=test node -r @babel/register ./node_modules/karma/bin/karma start karma.conf.babel.js",
"test:watch": "yarn test --no-single-run",
"test:umd": "gulp build:dist:umd && node test/umd.js",
- "tsd:lint": "tslint \"./index.d.ts\" \"./src/**/*.d.ts\" \"./src/**/*.tsx\" \"./test/**/*.d.ts\" \"./test/**/*.tsx\"",
- "tsd:lint:fix": "yarn tsd:lint --fix",
- "tsd:test": "gulp build:dist:commonjs:tsd && tsc -p ./ && rm test/typings.js"
+ "tsd:test": "gulp build:dist:commonjs:tsd && tsc -p ./ && rimraf test/typings.js"
},
"husky": {
"hooks": {
- "pre-commit": "lint-staged"
+ "pre-commit": "lint-staged",
+ "post-commit": "git update-index --again"
}
},
"lint-staged": {
- "**/*.{js,jsx}": [
+ "**/*.{js,jsx,ts,tsx}": [
"prettier --write",
"eslint --fix",
"git add"
@@ -59,11 +59,6 @@
"**/*.mdx": [
"prettier --parser mdx --write",
"git add"
- ],
- "**/*.{ts,tsx}": [
- "prettier --write",
- "tslint --fix",
- "git add"
]
},
"repository": {
@@ -77,86 +72,91 @@
},
"homepage": "https://github.com/Semantic-Org/Semantic-UI-React#readme",
"dependencies": {
- "@babel/runtime": "^7.1.2",
+ "@babel/runtime": "^7.10.5",
"@semantic-ui-react/event-stack": "^3.1.0",
"@stardust-ui/react-component-event-listener": "~0.38.0",
"@stardust-ui/react-component-ref": "~0.38.0",
"classnames": "^2.2.6",
- "keyboard-key": "^1.0.4",
- "lodash": "^4.17.15",
+ "keyboard-key": "^1.1.0",
+ "lodash": "^4.17.19",
"prop-types": "^15.7.2",
"react-is": "^16.8.6",
- "react-popper": "^1.3.4",
+ "react-popper": "^1.3.7",
"shallowequal": "^1.1.0"
},
"devDependencies": {
- "@babel/cli": "^7.4.4",
- "@babel/core": "^7.4.5",
- "@babel/plugin-proposal-class-properties": "^7.4.4",
- "@babel/plugin-proposal-export-default-from": "^7.2.0",
- "@babel/plugin-proposal-export-namespace-from": "^7.2.0",
- "@babel/plugin-syntax-dynamic-import": "^7.2.0",
- "@babel/plugin-transform-runtime": "^7.4.4",
- "@babel/preset-env": "^7.4.5",
- "@babel/preset-env-standalone": "7.4.5",
- "@babel/preset-react": "^7.0.0",
- "@babel/register": "^7.4.4",
- "@babel/standalone": "^7.4.5",
+ "@artsy/fresnel": "^1.2.0",
+ "@babel/cli": "^7.10.5",
+ "@babel/core": "^7.10.5",
+ "@babel/plugin-proposal-class-properties": "^7.10.4",
+ "@babel/plugin-proposal-export-default-from": "^7.10.4",
+ "@babel/plugin-proposal-export-namespace-from": "^7.10.4",
+ "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+ "@babel/plugin-transform-runtime": "^7.10.5",
+ "@babel/preset-env": "^7.10.4",
+ "@babel/preset-react": "^7.10.4",
+ "@babel/register": "^7.10.5",
+ "@babel/standalone": "^7.10.5",
"@mdx-js/loader": "^0.20.3",
- "@stardust-ui/docs-components": "^0.38.0",
- "@types/react": "^16.8.25",
- "anchor-js": "^4.2.0",
- "babel-eslint": "^10.0.2",
- "babel-loader": "^8.0.6",
- "babel-plugin-filter-imports": "^3.0.0",
- "babel-plugin-istanbul": "^5.1.4",
+ "@size-limit/file": "^4.5.5",
+ "@types/react": "^16.9.43",
+ "@typescript-eslint/eslint-plugin": "^3.7.1",
+ "@typescript-eslint/parser": "^3.7.1",
+ "anchor-js": "^4.2.2",
+ "babel-eslint": "^10.1.0",
+ "babel-loader": "^8.1.0",
+ "babel-plugin-filter-imports": "^4.0.0",
+ "babel-plugin-istanbul": "^6.0.0",
"babel-plugin-lodash": "^3.3.4",
- "babel-plugin-transform-react-handled-props": "^2.0.0",
+ "babel-plugin-transform-react-handled-props": "^2.1.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"babel-plugin-universal-import": "^2.0.2",
"chai": "^4.2.0",
"chai-enzyme": "^1.0.0-beta.1",
- "copy-to-clipboard": "^3.0.8",
- "cross-env": "^5.2.0",
+ "copy-to-clipboard": "^3.3.1",
+ "cross-env": "^7.0.2",
"debug": "^4.1.1",
"dirty-chai": "^2.0.1",
"doctoc": "^1.4.0",
"doctrine": "^3.0.0",
- "enzyme": "^3.10.0",
- "enzyme-adapter-react-16": "^1.14.0",
- "eslint": "^5.15.2",
- "eslint-config-airbnb": "^17.1.0",
- "eslint-config-prettier": "^4.1.0",
- "eslint-plugin-import": "^2.16.0",
- "eslint-plugin-jsx-a11y": "^6.2.1",
- "eslint-plugin-mocha": "^5.3.0",
- "eslint-plugin-react": "^7.12.4",
+ "enzyme": "^3.11.0",
+ "enzyme-adapter-react-16": "^1.15.2",
+ "eslint": "^7.5.0",
+ "eslint-config-airbnb": "^18.2.0",
+ "eslint-config-prettier": "^6.11.0",
+ "eslint-plugin-import": "^2.22.0",
+ "eslint-plugin-jsx-a11y": "^6.3.1",
+ "eslint-plugin-mocha": "^7.0.1",
+ "eslint-plugin-react": "^7.20.4",
+ "eslint-plugin-react-hooks": "^4.0.8",
"faker": "^4.1.0",
- "gh-pages": "^2.0.1",
- "gulp": "^4.0.0",
- "gulp-load-plugins": "^1.5.0",
+ "gh-pages": "^3.1.0",
+ "gulp": "^4.0.2",
+ "gulp-load-plugins": "^2.0.3",
"gulp-util": "^3.0.8",
- "husky": "^1.3.1",
- "imports-loader": "^0.8.0",
- "karma": "^4.0.1",
- "karma-chrome-launcher": "^2.2.0",
+ "husky": "^4.2.5",
+ "imports-loader": "^1.1.0",
+ "karma": "^5.1.0",
+ "karma-chrome-launcher": "^3.1.0",
"karma-cli": "^2.0.0",
- "karma-coverage": "^1.1.2",
- "karma-mocha": "^1.3.0",
+ "karma-coverage": "^2.0.2",
+ "karma-mocha": "^2.0.1",
"karma-mocha-reporter": "^2.2.5",
- "karma-webpack": "^4.0.0-rc.6",
- "leven": "^3.0.0",
- "lint-staged": "^8.1.5",
- "mocha": "^6.0.2",
- "prettier": "^1.18.2",
- "puppeteer": "^1.7.0",
- "raw-loader": "^1.0.0",
+ "karma-webpack": "^4.0.2",
+ "leven": "^3.1.0",
+ "lint-staged": "^10.2.11",
+ "mocha": "^8.0.1",
+ "prettier": "^2.0.5",
+ "prismjs": "^1.20.0",
+ "puppeteer": "^5.2.1",
+ "raw-loader": "^4.0.1",
"react": "^16.9.0",
"react-ace": "^6.4.0",
"react-codesandboxer": "^3.1.3",
"react-docgen": "^4.1.0",
"react-dom": "^16.9.0",
"react-hot-loader": "^4.12.11",
+ "react-intersection-observer": "^8.26.2",
"react-router": "^5.0.0",
"react-router-dom": "^5.0.0",
"react-source-render": "^3.0.0-5",
@@ -164,23 +164,23 @@
"react-static-routes": "^1.0.0",
"react-test-renderer": "^16.9.0",
"react-universal-component": "^3.0.3",
- "react-visibility-sensor": "^5.0.2",
- "rimraf": "^2.6.3",
+ "rimraf": "^3.0.2",
"satisfied": "^1.1.2",
"semantic-ui-css": "^2.4.1",
"simulant": "^0.2.2",
- "sinon": "^7.2.7",
- "sinon-chai": "^3.3.0",
+ "sinon": "^9.0.2",
+ "sinon-chai": "^3.5.0",
+ "size-limit": "^4.5.5",
"ta-scripts": "^2.5.2",
+ "terser-webpack-plugin": "^3.0.8",
"terser-webpack-plugin-legacy": "^1.2.3",
"through2": "^3.0.1",
- "tslint": "^5.14.0",
- "tslint-config-airbnb": "^5.11.1",
- "typescript": "^3.3.3333",
+ "typescript": "^3.9.5",
"vinyl": "^2.2.0",
"webpack": "^4.28.4",
- "webpack-cli": "^3.2.1",
- "webpack-dev-middleware": "^3.5.0"
+ "webpack-bundle-analyzer": "^3.8.0",
+ "webpack-cli": "^3.3.12",
+ "webpack-dev-middleware": "^3.7.2"
},
"peerDependencies": {
"react": "^16.8.0",
diff --git a/src/addons/Confirm/Confirm.js b/src/addons/Confirm/Confirm.js
index ac02ac5f82..99d285f27e 100644
--- a/src/addons/Confirm/Confirm.js
+++ b/src/addons/Confirm/Confirm.js
@@ -11,49 +11,6 @@ import Modal from '../../modules/Modal'
* @see Modal
*/
class Confirm extends Component {
- static propTypes = {
- /** The cancel button text. */
- cancelButton: customPropTypes.itemShorthand,
-
- /** The OK button text. */
- confirmButton: customPropTypes.itemShorthand,
-
- /** The ModalContent text. */
- content: customPropTypes.itemShorthand,
-
- /** The ModalHeader text. */
- header: customPropTypes.itemShorthand,
-
- /**
- * Called when the Modal is closed without clicking confirm.
- *
- * @param {SyntheticEvent} event - React's original SyntheticEvent.
- * @param {object} data - All props.
- */
- onCancel: PropTypes.func,
-
- /**
- * Called when the OK button is clicked.
- *
- * @param {SyntheticEvent} event - React's original SyntheticEvent.
- * @param {object} data - All props.
- */
- onConfirm: PropTypes.func,
-
- /** Whether or not the modal is visible. */
- open: PropTypes.bool,
-
- /** A Confirm can vary in size */
- size: PropTypes.oneOf(['mini', 'tiny', 'small', 'large', 'fullscreen']),
- }
-
- static defaultProps = {
- cancelButton: 'Cancel',
- confirmButton: 'OK',
- content: 'Are you sure?',
- size: 'small',
- }
-
handleCancel = (e) => {
_.invoke(this.props, 'onCancel', e, this.props)
}
@@ -102,4 +59,47 @@ class Confirm extends Component {
}
}
+Confirm.propTypes = {
+ /** The cancel button text. */
+ cancelButton: customPropTypes.itemShorthand,
+
+ /** The OK button text. */
+ confirmButton: customPropTypes.itemShorthand,
+
+ /** The ModalContent text. */
+ content: customPropTypes.itemShorthand,
+
+ /** The ModalHeader text. */
+ header: customPropTypes.itemShorthand,
+
+ /**
+ * Called when the Modal is closed without clicking confirm.
+ *
+ * @param {SyntheticEvent} event - React's original SyntheticEvent.
+ * @param {object} data - All props.
+ */
+ onCancel: PropTypes.func,
+
+ /**
+ * Called when the OK button is clicked.
+ *
+ * @param {SyntheticEvent} event - React's original SyntheticEvent.
+ * @param {object} data - All props.
+ */
+ onConfirm: PropTypes.func,
+
+ /** Whether or not the modal is visible. */
+ open: PropTypes.bool,
+
+ /** A Confirm can vary in size */
+ size: PropTypes.oneOf(['mini', 'tiny', 'small', 'large', 'fullscreen']),
+}
+
+Confirm.defaultProps = {
+ cancelButton: 'Cancel',
+ confirmButton: 'OK',
+ content: 'Are you sure?',
+ size: 'small',
+}
+
export default Confirm
diff --git a/src/addons/MountNode/MountNode.d.ts b/src/addons/MountNode/MountNode.d.ts
index 629f159f4d..2fd43e5c66 100644
--- a/src/addons/MountNode/MountNode.d.ts
+++ b/src/addons/MountNode/MountNode.d.ts
@@ -12,6 +12,6 @@ export interface StrictMountNodeProps {
node?: HTMLElement | React.Ref
}
-declare class MountNode extends React.Component {}
+declare class MountNode extends React.Component {}
export default MountNode
diff --git a/src/addons/MountNode/MountNode.js b/src/addons/MountNode/MountNode.js
index 703f1f09ac..3ee0c9ba9e 100644
--- a/src/addons/MountNode/MountNode.js
+++ b/src/addons/MountNode/MountNode.js
@@ -12,14 +12,6 @@ const nodeRegistry = new NodeRegistry()
* A component that allows to manage classNames on a DOM node in declarative manner.
*/
export default class MountNode extends Component {
- static propTypes = {
- /** Additional classes. */
- className: PropTypes.string,
-
- /** The DOM node where we will apply class names. Defaults to document.body. */
- node: PropTypes.oneOfType([customPropTypes.domNode, customPropTypes.refObject]),
- }
-
shouldComponentUpdate({ className: nextClassName }) {
const { className: currentClassName } = this.props
@@ -48,3 +40,11 @@ export default class MountNode extends Component {
return null
}
}
+
+MountNode.propTypes = {
+ /** Additional classes. */
+ className: PropTypes.string,
+
+ /** The DOM node where we will apply class names. Defaults to document.body. */
+ node: PropTypes.oneOfType([customPropTypes.domNode, customPropTypes.refObject]),
+}
diff --git a/src/addons/Pagination/Pagination.d.ts b/src/addons/Pagination/Pagination.d.ts
index bda95be718..4233abcee0 100644
--- a/src/addons/Pagination/Pagination.d.ts
+++ b/src/addons/Pagination/Pagination.d.ts
@@ -1,7 +1,7 @@
import * as React from 'react'
import { SemanticShorthandItem } from '../../generic'
-import { default as PaginationItem, PaginationItemProps } from './PaginationItem'
+import PaginationItem, { PaginationItemProps } from './PaginationItem'
export interface PaginationProps extends StrictPaginationProps {
[key: string]: any
@@ -56,7 +56,7 @@ export interface StrictPaginationProps {
totalPages: number | string
}
-declare class Pagination extends React.Component {
+declare class Pagination extends React.Component {
static Item: typeof PaginationItem
}
diff --git a/src/addons/Pagination/Pagination.js b/src/addons/Pagination/Pagination.js
index c292447f0c..eabc79c561 100644
--- a/src/addons/Pagination/Pagination.js
+++ b/src/addons/Pagination/Pagination.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
import React from 'react'
import {
- AutoControlledComponent as Component,
+ ModernAutoControlledComponent as Component,
createPaginationItems,
customPropTypes,
getUnhandledProps,
@@ -15,90 +15,13 @@ import PaginationItem from './PaginationItem'
* A component to render a pagination.
*/
export default class Pagination extends Component {
- static propTypes = {
- /** A pagination item can have an aria label. */
- 'aria-label': PropTypes.string,
-
- /** Initial activePage value. */
- defaultActivePage: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
- /** Index of the currently active page. */
- activePage: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
- /** Number of always visible pages at the beginning and end. */
- boundaryRange: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
- /** A pagination can be disabled. */
- disabled: PropTypes.bool,
-
- /** A shorthand for PaginationItem. */
- ellipsisItem: customPropTypes.itemShorthand,
-
- /** A shorthand for PaginationItem. */
- firstItem: customPropTypes.itemShorthand,
-
- /** A shorthand for PaginationItem. */
- lastItem: customPropTypes.itemShorthand,
-
- /** A shorthand for PaginationItem. */
- nextItem: customPropTypes.itemShorthand,
-
- /** A shorthand for PaginationItem. */
- pageItem: customPropTypes.itemShorthand,
-
- /** A shorthand for PaginationItem. */
- prevItem: customPropTypes.itemShorthand,
-
- /**
- * Called on change of an active page.
- *
- * @param {SyntheticEvent} event - React's original SyntheticEvent.
- * @param {object} data - All props.
- */
- onPageChange: PropTypes.func,
-
- /** Number of always visible pages before and after the current one. */
- siblingRange: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
- /** Total number of pages. */
- totalPages: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
- }
-
- static autoControlledProps = ['activePage']
-
- static defaultProps = {
- 'aria-label': 'Pagination Navigation',
- boundaryRange: 1,
- ellipsisItem: '...',
- firstItem: {
- 'aria-label': 'First item',
- content: '«',
- },
- lastItem: {
- 'aria-label': 'Last item',
- content: '»',
- },
- nextItem: {
- 'aria-label': 'Next item',
- content: '⟩',
- },
- pageItem: {},
- prevItem: {
- 'aria-label': 'Previous item',
- content: '⟨',
- },
- siblingRange: 1,
- }
-
- static Item = PaginationItem
-
handleItemClick = (e, { value: nextActivePage }) => {
const { activePage: prevActivePage } = this.state
// Heads up! We need the cast to the "number" type there, as `activePage` can be a string
if (+prevActivePage === +nextActivePage) return
- this.trySetState({ activePage: nextActivePage })
+ this.setState({ activePage: nextActivePage })
_.invoke(this.props, 'onPageChange', e, { ...this.props, activePage: nextActivePage })
}
@@ -148,3 +71,80 @@ export default class Pagination extends Component {
)
}
}
+
+Pagination.propTypes = {
+ /** A pagination item can have an aria label. */
+ 'aria-label': PropTypes.string,
+
+ /** Initial activePage value. */
+ defaultActivePage: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+ /** Index of the currently active page. */
+ activePage: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+ /** Number of always visible pages at the beginning and end. */
+ boundaryRange: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+ /** A pagination can be disabled. */
+ disabled: PropTypes.bool,
+
+ /** A shorthand for PaginationItem. */
+ ellipsisItem: customPropTypes.itemShorthand,
+
+ /** A shorthand for PaginationItem. */
+ firstItem: customPropTypes.itemShorthand,
+
+ /** A shorthand for PaginationItem. */
+ lastItem: customPropTypes.itemShorthand,
+
+ /** A shorthand for PaginationItem. */
+ nextItem: customPropTypes.itemShorthand,
+
+ /** A shorthand for PaginationItem. */
+ pageItem: customPropTypes.itemShorthand,
+
+ /** A shorthand for PaginationItem. */
+ prevItem: customPropTypes.itemShorthand,
+
+ /**
+ * Called on change of an active page.
+ *
+ * @param {SyntheticEvent} event - React's original SyntheticEvent.
+ * @param {object} data - All props.
+ */
+ onPageChange: PropTypes.func,
+
+ /** Number of always visible pages before and after the current one. */
+ siblingRange: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+ /** Total number of pages. */
+ totalPages: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+}
+
+Pagination.autoControlledProps = ['activePage']
+
+Pagination.defaultProps = {
+ 'aria-label': 'Pagination Navigation',
+ boundaryRange: 1,
+ ellipsisItem: '...',
+ firstItem: {
+ 'aria-label': 'First item',
+ content: '«',
+ },
+ lastItem: {
+ 'aria-label': 'Last item',
+ content: '»',
+ },
+ nextItem: {
+ 'aria-label': 'Next item',
+ content: '⟩',
+ },
+ pageItem: {},
+ prevItem: {
+ 'aria-label': 'Previous item',
+ content: '⟨',
+ },
+ siblingRange: 1,
+}
+
+Pagination.Item = PaginationItem
diff --git a/src/addons/Pagination/PaginationItem.d.ts b/src/addons/Pagination/PaginationItem.d.ts
index 11b2a58661..6131f5be2a 100644
--- a/src/addons/Pagination/PaginationItem.d.ts
+++ b/src/addons/Pagination/PaginationItem.d.ts
@@ -31,6 +31,6 @@ export interface StrictPaginationItemProps {
type?: 'ellipsisItem' | 'firstItem' | 'prevItem' | 'pageItem' | 'nextItem' | 'lastItem'
}
-declare class PaginationItem extends React.Component {}
+declare class PaginationItem extends React.Component {}
export default PaginationItem
diff --git a/src/addons/Pagination/PaginationItem.js b/src/addons/Pagination/PaginationItem.js
index a02c2d1786..27efdf8884 100644
--- a/src/addons/Pagination/PaginationItem.js
+++ b/src/addons/Pagination/PaginationItem.js
@@ -10,40 +10,6 @@ import MenuItem from '../../collections/Menu/MenuItem'
* An item of a pagination.
*/
class PaginationItem extends Component {
- static propTypes = {
- /** A pagination item can be active. */
- active: PropTypes.bool,
-
- /** A pagination item can be disabled. */
- disabled: PropTypes.bool,
-
- /**
- * Called on click.
- *
- * @param {SyntheticEvent} event - React's original SyntheticEvent.
- * @param {object} data - All props.
- */
- onClick: PropTypes.func,
-
- /**
- * Called on key down.
- *
- * @param {SyntheticEvent} event - React's original SyntheticEvent.
- * @param {object} data - All props.
- */
- onKeyDown: PropTypes.func,
-
- /** A pagination should have a type. */
- type: PropTypes.oneOf([
- 'ellipsisItem',
- 'firstItem',
- 'prevItem',
- 'pageItem',
- 'nextItem',
- 'lastItem',
- ]),
- }
-
handleClick = (e) => {
_.invoke(this.props, 'onClick', e, this.props)
}
@@ -77,6 +43,40 @@ class PaginationItem extends Component {
}
}
+PaginationItem.propTypes = {
+ /** A pagination item can be active. */
+ active: PropTypes.bool,
+
+ /** A pagination item can be disabled. */
+ disabled: PropTypes.bool,
+
+ /**
+ * Called on click.
+ *
+ * @param {SyntheticEvent} event - React's original SyntheticEvent.
+ * @param {object} data - All props.
+ */
+ onClick: PropTypes.func,
+
+ /**
+ * Called on key down.
+ *
+ * @param {SyntheticEvent} event - React's original SyntheticEvent.
+ * @param {object} data - All props.
+ */
+ onKeyDown: PropTypes.func,
+
+ /** A pagination should have a type. */
+ type: PropTypes.oneOf([
+ 'ellipsisItem',
+ 'firstItem',
+ 'prevItem',
+ 'pageItem',
+ 'nextItem',
+ 'lastItem',
+ ]),
+}
+
PaginationItem.create = createShorthandFactory(PaginationItem, (content) => ({ content }))
export default PaginationItem
diff --git a/src/addons/Portal/Portal.d.ts b/src/addons/Portal/Portal.d.ts
index 007c7fac41..7c3e00cbd1 100644
--- a/src/addons/Portal/Portal.d.ts
+++ b/src/addons/Portal/Portal.d.ts
@@ -1,5 +1,5 @@
import * as React from 'react'
-import { default as PortalInner } from './PortalInner'
+import PortalInner from './PortalInner'
export interface PortalProps extends StrictPortalProps {
[key: string]: any
@@ -97,7 +97,7 @@ export interface StrictPortalProps {
triggerRef?: React.Ref
}
-declare class Portal extends React.Component {
+declare class Portal extends React.Component {
static Inner: typeof PortalInner
}
diff --git a/src/addons/Portal/Portal.js b/src/addons/Portal/Portal.js
index 5ec812c26e..c9b4dd9847 100644
--- a/src/addons/Portal/Portal.js
+++ b/src/addons/Portal/Portal.js
@@ -3,14 +3,15 @@ import { handleRef, Ref } from '@stardust-ui/react-component-ref'
import keyboardKey from 'keyboard-key'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React, { cloneElement, createRef, Fragment } from 'react'
+import React from 'react'
import {
- AutoControlledComponent as Component,
+ ModernAutoControlledComponent as Component,
customPropTypes,
doesNodeContainClick,
makeDebugger,
} from '../../lib'
+import validateTrigger from './utils/validateTrigger'
import PortalInner from './PortalInner'
const debug = makeDebugger('portal')
@@ -23,111 +24,8 @@ const debug = makeDebugger('portal')
* @see Confirm
*/
class Portal extends Component {
- static propTypes = {
- /** Primary content. */
- children: PropTypes.node.isRequired,
-
- /** Controls whether or not the portal should close when the document is clicked. */
- closeOnDocumentClick: PropTypes.bool,
-
- /** Controls whether or not the portal should close when escape is pressed is displayed. */
- closeOnEscape: PropTypes.bool,
-
- /**
- * Controls whether or not the portal should close when mousing out of the portal.
- * NOTE: This will prevent `closeOnTriggerMouseLeave` when mousing over the
- * gap from the trigger to the portal.
- */
- closeOnPortalMouseLeave: PropTypes.bool,
-
- /** Controls whether or not the portal should close on blur of the trigger. */
- closeOnTriggerBlur: PropTypes.bool,
-
- /** Controls whether or not the portal should close on click of the trigger. */
- closeOnTriggerClick: PropTypes.bool,
-
- /** Controls whether or not the portal should close when mousing out of the trigger. */
- closeOnTriggerMouseLeave: PropTypes.bool,
-
- /** Initial value of open. */
- defaultOpen: PropTypes.bool,
-
- /** Event pool namespace that is used to handle component events */
- eventPool: PropTypes.string,
-
- /** The node where the portal should mount. */
- mountNode: PropTypes.any,
-
- /** Milliseconds to wait before opening on mouse over */
- mouseEnterDelay: PropTypes.number,
-
- /** Milliseconds to wait before closing on mouse leave */
- mouseLeaveDelay: PropTypes.number,
-
- /**
- * Called when a close event happens
- *
- * @param {SyntheticEvent} event - React's original SyntheticEvent.
- * @param {object} data - All props.
- */
- onClose: PropTypes.func,
-
- /**
- * Called when the portal is mounted on the DOM.
- *
- * @param {null}
- * @param {object} data - All props.
- */
- onMount: PropTypes.func,
-
- /**
- * Called when an open event happens
- *
- * @param {SyntheticEvent} event - React's original SyntheticEvent.
- * @param {object} data - All props.
- */
- onOpen: PropTypes.func,
-
- /**
- * Called when the portal is unmounted from the DOM.
- *
- * @param {null}
- * @param {object} data - All props.
- */
- onUnmount: PropTypes.func,
-
- /** Controls whether or not the portal is displayed. */
- open: PropTypes.bool,
-
- /** Controls whether or not the portal should open when the trigger is clicked. */
- openOnTriggerClick: PropTypes.bool,
-
- /** Controls whether or not the portal should open on focus of the trigger. */
- openOnTriggerFocus: PropTypes.bool,
-
- /** Controls whether or not the portal should open when mousing over the trigger. */
- openOnTriggerMouseEnter: PropTypes.bool,
-
- /** Element to be rendered in-place where the portal is defined. */
- trigger: PropTypes.node,
-
- /** Called with a ref to the trigger node. */
- triggerRef: customPropTypes.ref,
- }
-
- static defaultProps = {
- closeOnDocumentClick: true,
- closeOnEscape: true,
- eventPool: 'default',
- openOnTriggerClick: true,
- }
-
- static autoControlledProps = ['open']
-
- static Inner = PortalInner
-
- contentRef = createRef()
- triggerRef = createRef()
+ contentRef = React.createRef()
+ triggerRef = React.createRef()
latestDocumentMouseDownEvent = null
componentWillUnmount() {
@@ -285,7 +183,7 @@ class Portal extends Component {
const { onOpen } = this.props
if (onOpen) onOpen(e, this.props)
- this.trySetState({ open: true })
+ this.setState({ open: true })
}
openWithTimeout = (e, delay) => {
@@ -303,7 +201,7 @@ class Portal extends Component {
const { onClose } = this.props
if (onClose) onClose(e, this.props)
- this.trySetState({ open: false })
+ this.setState({ open: false })
}
closeWithTimeout = (e, delay) => {
@@ -335,10 +233,15 @@ class Portal extends Component {
const { children, eventPool, mountNode, trigger } = this.props
const { open } = this.state
+ /* istanbul ignore else */
+ if (process.env.NODE_ENV !== 'production') {
+ validateTrigger(trigger)
+ }
+
return (
-
+ <>
{open && (
-
+ <>
-
+
)}
{trigger && (
- {cloneElement(trigger, {
+ {React.cloneElement(trigger, {
onBlur: this.handleTriggerBlur,
onClick: this.handleTriggerClick,
onFocus: this.handleTriggerFocus,
@@ -376,9 +279,112 @@ class Portal extends Component {
})}
)}
-
+
)
}
}
+Portal.propTypes = {
+ /** Primary content. */
+ children: PropTypes.node.isRequired,
+
+ /** Controls whether or not the portal should close when the document is clicked. */
+ closeOnDocumentClick: PropTypes.bool,
+
+ /** Controls whether or not the portal should close when escape is pressed is displayed. */
+ closeOnEscape: PropTypes.bool,
+
+ /**
+ * Controls whether or not the portal should close when mousing out of the portal.
+ * NOTE: This will prevent `closeOnTriggerMouseLeave` when mousing over the
+ * gap from the trigger to the portal.
+ */
+ closeOnPortalMouseLeave: PropTypes.bool,
+
+ /** Controls whether or not the portal should close on blur of the trigger. */
+ closeOnTriggerBlur: PropTypes.bool,
+
+ /** Controls whether or not the portal should close on click of the trigger. */
+ closeOnTriggerClick: PropTypes.bool,
+
+ /** Controls whether or not the portal should close when mousing out of the trigger. */
+ closeOnTriggerMouseLeave: PropTypes.bool,
+
+ /** Initial value of open. */
+ defaultOpen: PropTypes.bool,
+
+ /** Event pool namespace that is used to handle component events */
+ eventPool: PropTypes.string,
+
+ /** The node where the portal should mount. */
+ mountNode: PropTypes.any,
+
+ /** Milliseconds to wait before opening on mouse over */
+ mouseEnterDelay: PropTypes.number,
+
+ /** Milliseconds to wait before closing on mouse leave */
+ mouseLeaveDelay: PropTypes.number,
+
+ /**
+ * Called when a close event happens
+ *
+ * @param {SyntheticEvent} event - React's original SyntheticEvent.
+ * @param {object} data - All props.
+ */
+ onClose: PropTypes.func,
+
+ /**
+ * Called when the portal is mounted on the DOM.
+ *
+ * @param {null}
+ * @param {object} data - All props.
+ */
+ onMount: PropTypes.func,
+
+ /**
+ * Called when an open event happens
+ *
+ * @param {SyntheticEvent} event - React's original SyntheticEvent.
+ * @param {object} data - All props.
+ */
+ onOpen: PropTypes.func,
+
+ /**
+ * Called when the portal is unmounted from the DOM.
+ *
+ * @param {null}
+ * @param {object} data - All props.
+ */
+ onUnmount: PropTypes.func,
+
+ /** Controls whether or not the portal is displayed. */
+ open: PropTypes.bool,
+
+ /** Controls whether or not the portal should open when the trigger is clicked. */
+ openOnTriggerClick: PropTypes.bool,
+
+ /** Controls whether or not the portal should open on focus of the trigger. */
+ openOnTriggerFocus: PropTypes.bool,
+
+ /** Controls whether or not the portal should open when mousing over the trigger. */
+ openOnTriggerMouseEnter: PropTypes.bool,
+
+ /** Element to be rendered in-place where the portal is defined. */
+ trigger: PropTypes.node,
+
+ /** Called with a ref to the trigger node. */
+ triggerRef: customPropTypes.ref,
+}
+
+Portal.defaultProps = {
+ closeOnDocumentClick: true,
+ closeOnEscape: true,
+ eventPool: 'default',
+ openOnTriggerClick: true,
+}
+
+Portal.autoControlledProps = ['open']
+
+Portal.Inner = PortalInner
+
export default Portal
diff --git a/src/addons/Portal/PortalInner.d.ts b/src/addons/Portal/PortalInner.d.ts
index 3edc06d110..9975bec5d5 100644
--- a/src/addons/Portal/PortalInner.d.ts
+++ b/src/addons/Portal/PortalInner.d.ts
@@ -31,6 +31,6 @@ export interface StrictPortalInnerProps {
onUnmount?: (nothing: null, data: PortalInnerProps) => void
}
-declare class PortalInner extends React.Component {}
+declare class PortalInner extends React.Component {}
export default PortalInner
diff --git a/src/addons/Portal/PortalInner.js b/src/addons/Portal/PortalInner.js
index de83fd53f7..7b1588e9db 100644
--- a/src/addons/Portal/PortalInner.js
+++ b/src/addons/Portal/PortalInner.js
@@ -12,33 +12,6 @@ const debug = makeDebugger('portalInner')
* An inner component that allows you to render children outside their parent.
*/
class PortalInner extends Component {
- static propTypes = {
- /** Primary content. */
- children: PropTypes.node.isRequired,
-
- /** Called with a ref to the inner node. */
- innerRef: customPropTypes.ref,
-
- /** The node where the portal should mount. */
- mountNode: PropTypes.any,
-
- /**
- * Called when the portal is mounted on the DOM
- *
- * @param {null}
- * @param {object} data - All props.
- */
- onMount: PropTypes.func,
-
- /**
- * Called when the portal is unmounted from the DOM
- *
- * @param {null}
- * @param {object} data - All props.
- */
- onUnmount: PropTypes.func,
- }
-
componentDidMount() {
debug('componentDidMount()')
_.invoke(this.props, 'onMount', null, this.props)
@@ -62,4 +35,31 @@ class PortalInner extends Component {
}
}
+PortalInner.propTypes = {
+ /** Primary content. */
+ children: PropTypes.node.isRequired,
+
+ /** Called with a ref to the inner node. */
+ innerRef: customPropTypes.ref,
+
+ /** The node where the portal should mount. */
+ mountNode: PropTypes.any,
+
+ /**
+ * Called when the portal is mounted on the DOM
+ *
+ * @param {null}
+ * @param {object} data - All props.
+ */
+ onMount: PropTypes.func,
+
+ /**
+ * Called when the portal is unmounted from the DOM
+ *
+ * @param {null}
+ * @param {object} data - All props.
+ */
+ onUnmount: PropTypes.func,
+}
+
export default PortalInner
diff --git a/src/addons/Portal/utils/validateTrigger.js b/src/addons/Portal/utils/validateTrigger.js
new file mode 100644
index 0000000000..52ed7ab5c5
--- /dev/null
+++ b/src/addons/Portal/utils/validateTrigger.js
@@ -0,0 +1,15 @@
+import React from 'react'
+import * as ReactIs from 'react-is'
+
+/**
+ * Asserts that a passed element can be used cloned a props will be applied properly.
+ */
+export default function validateTrigger(element) {
+ if (element) {
+ React.Children.only(element)
+
+ if (ReactIs.isFragment(element)) {
+ throw new Error('An "React.Fragment" cannot be used as a `trigger`.')
+ }
+ }
+}
diff --git a/src/addons/Responsive/Responsive.d.ts b/src/addons/Responsive/Responsive.d.ts
index ccca7698cf..d20c608469 100644
--- a/src/addons/Responsive/Responsive.d.ts
+++ b/src/addons/Responsive/Responsive.d.ts
@@ -44,7 +44,7 @@ export interface ResponsiveWidthShorthand {
maxWidth?: number | string
}
-declare class Responsive extends React.Component {
+declare class Responsive extends React.Component {
static onlyMobile: ResponsiveWidthShorthand
static onlyTablet: ResponsiveWidthShorthand
static onlyComputer: ResponsiveWidthShorthand
diff --git a/src/addons/Responsive/Responsive.js b/src/addons/Responsive/Responsive.js
index 94db3f8048..92e06760a3 100644
--- a/src/addons/Responsive/Responsive.js
+++ b/src/addons/Responsive/Responsive.js
@@ -7,49 +7,10 @@ import isVisible from './lib/isVisible'
/**
* Responsive can control visibility of content.
+ *
+ * @deprecated This component is deprecated and will be removed in next major release.
*/
export default class Responsive extends Component {
- static propTypes = {
- /** An element type to render as (string or function). */
- as: PropTypes.elementType,
-
- /** Primary content. */
- children: PropTypes.node,
-
- /** Fires callbacks immediately after mount. */
- fireOnMount: PropTypes.bool,
-
- /**
- * Called to get width of screen. Defaults to using `window.innerWidth` when in a browser;
- * otherwise, assumes a width of 0.
- */
- getWidth: PropTypes.func,
-
- /** The maximum width at which content will be displayed. */
- maxWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
- /** The minimum width at which content will be displayed. */
- minWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
- /**
- * Called on update.
- *
- * @param {SyntheticEvent} event - The React SyntheticEvent object
- * @param {object} data - All props and the event value.
- */
- onUpdate: PropTypes.func,
- }
-
- static defaultProps = {
- getWidth: () => (isBrowser() ? window.innerWidth : 0),
- }
-
- static onlyMobile = { minWidth: 320, maxWidth: 767 }
- static onlyTablet = { minWidth: 768, maxWidth: 991 }
- static onlyComputer = { minWidth: 992 }
- static onlyLargeScreen = { minWidth: 1200, maxWidth: 1919 }
- static onlyWidescreen = { minWidth: 1920 }
-
state = {
visible: true,
}
@@ -64,6 +25,17 @@ export default class Responsive extends Component {
componentDidMount() {
const { fireOnMount } = this.props
+ if (process.env.NODE_ENV !== 'production') {
+ if (!Responsive.__deprecationWarningWasRaised) {
+ Responsive.__deprecationWarningWasRaised = true
+
+ // eslint-disable-next-line no-console
+ console.warn(
+ 'Warning: "Responsive" component from Semantic UI React is deprecated and will be removed in the next major release. Please follow our upgrade guide: https://github.com/Semantic-Org/Semantic-UI-React/pull/4008',
+ )
+ }
+ }
+
eventStack.sub('resize', this.handleResize, { target: 'window' })
if (fireOnMount) this.handleUpdate()
}
@@ -110,3 +82,48 @@ export default class Responsive extends Component {
return null
}
}
+
+Responsive.propTypes = {
+ /** An element type to render as (string or function). */
+ as: PropTypes.elementType,
+
+ /** Primary content. */
+ children: PropTypes.node,
+
+ /** Fires callbacks immediately after mount. */
+ fireOnMount: PropTypes.bool,
+
+ /**
+ * Called to get width of screen. Defaults to using `window.innerWidth` when in a browser;
+ * otherwise, assumes a width of 0.
+ */
+ getWidth: PropTypes.func,
+
+ /** The maximum width at which content will be displayed. */
+ maxWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+ /** The minimum width at which content will be displayed. */
+ minWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+ /**
+ * Called on update.
+ *
+ * @param {SyntheticEvent} event - The React SyntheticEvent object
+ * @param {object} data - All props and the event value.
+ */
+ onUpdate: PropTypes.func,
+}
+
+Responsive.defaultProps = {
+ getWidth: () => (isBrowser() ? window.innerWidth : 0),
+}
+
+Responsive.onlyMobile = { minWidth: 320, maxWidth: 767 }
+Responsive.onlyTablet = { minWidth: 768, maxWidth: 991 }
+Responsive.onlyComputer = { minWidth: 992 }
+Responsive.onlyLargeScreen = { minWidth: 1200, maxWidth: 1919 }
+Responsive.onlyWidescreen = { minWidth: 1920 }
+
+if (process.env.NODE_ENV !== 'production') {
+ Responsive.__deprecationWarningWasRaised = false
+}
diff --git a/src/addons/TextArea/TextArea.d.ts b/src/addons/TextArea/TextArea.d.ts
index 2c81a35902..b019d3d5cd 100644
--- a/src/addons/TextArea/TextArea.d.ts
+++ b/src/addons/TextArea/TextArea.d.ts
@@ -31,7 +31,7 @@ export interface StrictTextAreaProps {
value?: number | string
}
-declare class TextArea extends React.Component {
+declare class TextArea extends React.Component {
focus: () => void
}
diff --git a/src/addons/TextArea/TextArea.js b/src/addons/TextArea/TextArea.js
index 6f1794960a..4c5556b98d 100644
--- a/src/addons/TextArea/TextArea.js
+++ b/src/addons/TextArea/TextArea.js
@@ -10,36 +10,6 @@ import { getElementType, getUnhandledProps } from '../../lib'
* @see Form
*/
class TextArea extends Component {
- static propTypes = {
- /** An element type to render as (string or function). */
- as: PropTypes.elementType,
-
- /**
- * Called on change.
- * @param {SyntheticEvent} event - The React SyntheticEvent object
- * @param {object} data - All props and the event value.
- */
- onChange: PropTypes.func,
-
- /**
- * Called on input.
- * @param {SyntheticEvent} event - The React SyntheticEvent object
- * @param {object} data - All props and the event value.
- */
- onInput: PropTypes.func,
-
- /** Indicates row count for a TextArea. */
- rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
- /** The value of the textarea. */
- value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
- }
-
- static defaultProps = {
- as: 'textarea',
- rows: 3,
- }
-
ref = createRef()
focus = () => this.ref.current.focus()
@@ -75,4 +45,34 @@ class TextArea extends Component {
}
}
+TextArea.propTypes = {
+ /** An element type to render as (string or function). */
+ as: PropTypes.elementType,
+
+ /**
+ * Called on change.
+ * @param {SyntheticEvent} event - The React SyntheticEvent object
+ * @param {object} data - All props and the event value.
+ */
+ onChange: PropTypes.func,
+
+ /**
+ * Called on input.
+ * @param {SyntheticEvent} event - The React SyntheticEvent object
+ * @param {object} data - All props and the event value.
+ */
+ onInput: PropTypes.func,
+
+ /** Indicates row count for a TextArea. */
+ rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+ /** The value of the textarea. */
+ value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+}
+
+TextArea.defaultProps = {
+ as: 'textarea',
+ rows: 3,
+}
+
export default TextArea
diff --git a/src/addons/TransitionablePortal/TransitionablePortal.js b/src/addons/TransitionablePortal/TransitionablePortal.js
index 5985b74848..9ab8d8b60d 100644
--- a/src/addons/TransitionablePortal/TransitionablePortal.js
+++ b/src/addons/TransitionablePortal/TransitionablePortal.js
@@ -4,6 +4,7 @@ import React, { Component } from 'react'
import Portal from '../Portal'
import Transition from '../../modules/Transition'
+import { TRANSITION_STATUS_ENTERING } from '../../modules/Transition/utils/computeStatuses'
import { getUnhandledProps, makeDebugger } from '../../lib'
const debug = makeDebugger('transitionable_portal')
@@ -14,73 +15,28 @@ const debug = makeDebugger('transitionable_portal')
* @see Transition
*/
export default class TransitionablePortal extends Component {
- static propTypes = {
- /** Primary content. */
- children: PropTypes.node.isRequired,
-
- /**
- * Called when a close event happens.
- *
- * @param {SyntheticEvent} event - React's original SyntheticEvent.
- * @param {object} data - All props and internal state.
- */
- onClose: PropTypes.func,
-
- /**
- * Callback on each transition that changes visibility to hidden.
- *
- * @param {null}
- * @param {object} data - All props with transition status and internal state.
- */
- onHide: PropTypes.func,
-
- /**
- * Called when an open event happens.
- *
- * @param {SyntheticEvent} event - React's original SyntheticEvent.
- * @param {object} data - All props and internal state.
- */
- onOpen: PropTypes.func,
-
- /**
- * Callback on animation start.
- *
- * @param {null}
- * @param {object} data - All props with transition status and internal state.
- */
- onStart: PropTypes.func,
-
- /** Controls whether or not the portal is displayed. */
- open: PropTypes.bool,
-
- /** Transition props. */
- transition: PropTypes.object,
- }
-
- static defaultProps = {
- transition: {
- animation: 'scale',
- duration: 400,
- },
- }
-
- constructor(props) {
- super(props)
-
- this.state = {
- portalOpen: props.open,
- }
- }
+ state = {}
// ----------------------------------------
// Lifecycle
// ----------------------------------------
- // eslint-disable-next-line camelcase
- UNSAFE_componentWillReceiveProps({ open }) {
- debug('componentWillReceiveProps()', { open })
+ static getDerivedStateFromProps(props, state) {
+ // This is definitely a hack :(
+ //
+ // It's coupled with handlePortalClose() for force set the state of `portalOpen` omitting
+ // props.open. It's related to implementation of the component itself as `onClose()` will be
+ // called after a transition will end.
+ // https://github.com/Semantic-Org/Semantic-UI-React/issues/2382
+ if (state.portalOpen === -1) {
+ return { portalOpen: false }
+ }
+
+ if (_.isUndefined(props.open)) {
+ return null
+ }
- this.setState({ portalOpen: open })
+ return { portalOpen: props.open }
}
// ----------------------------------------
@@ -90,7 +46,7 @@ export default class TransitionablePortal extends Component {
handlePortalClose = () => {
debug('handlePortalClose()')
- this.setState({ portalOpen: false })
+ this.setState({ portalOpen: -1 })
}
handlePortalOpen = () => {
@@ -112,7 +68,7 @@ export default class TransitionablePortal extends Component {
debug('handleTransitionStart()')
const { portalOpen } = this.state
const { status } = data
- const transitionVisible = status === Transition.ENTERING
+ const transitionVisible = status === TRANSITION_STATUS_ENTERING
_.invoke(this.props, 'onStart', null, { ...data, portalOpen, transitionVisible })
@@ -151,3 +107,53 @@ export default class TransitionablePortal extends Component {
)
}
}
+
+TransitionablePortal.propTypes = {
+ /** Primary content. */
+ children: PropTypes.node.isRequired,
+
+ /**
+ * Called when a close event happens.
+ *
+ * @param {SyntheticEvent} event - React's original SyntheticEvent.
+ * @param {object} data - All props and internal state.
+ */
+ onClose: PropTypes.func,
+
+ /**
+ * Callback on each transition that changes visibility to hidden.
+ *
+ * @param {null}
+ * @param {object} data - All props with transition status and internal state.
+ */
+ onHide: PropTypes.func,
+
+ /**
+ * Called when an open event happens.
+ *
+ * @param {SyntheticEvent} event - React's original SyntheticEvent.
+ * @param {object} data - All props and internal state.
+ */
+ onOpen: PropTypes.func,
+
+ /**
+ * Callback on animation start.
+ *
+ * @param {null}
+ * @param {object} data - All props with transition status and internal state.
+ */
+ onStart: PropTypes.func,
+
+ /** Controls whether or not the portal is displayed. */
+ open: PropTypes.bool,
+
+ /** Transition props. */
+ transition: PropTypes.object,
+}
+
+TransitionablePortal.defaultProps = {
+ transition: {
+ animation: 'scale',
+ duration: 400,
+ },
+}
diff --git a/src/behaviors/Visibility/Visibility.d.ts b/src/behaviors/Visibility/Visibility.d.ts
index 76247cd721..1c66e608a2 100644
--- a/src/behaviors/Visibility/Visibility.d.ts
+++ b/src/behaviors/Visibility/Visibility.d.ts
@@ -12,7 +12,7 @@ export interface StrictVisibilityProps {
children?: React.ReactNode
/** Context which sticky element should stick to. */
- context?: object
+ context?: Document | Window | HTMLElement
/**
* When set to true a callback will occur anytime an element passes a condition not just immediately after the
@@ -59,7 +59,7 @@ export interface StrictVisibilityProps {
* Value that context should be adjusted in pixels. Useful for making content appear below content fixed to the
* page.
*/
- offset?: number | string | (number | string)[]
+ offset?: number | string | number | string[]
/** When set to false a callback will occur each time an element passes the threshold for a condition. */
once?: boolean
diff --git a/src/behaviors/Visibility/Visibility.js b/src/behaviors/Visibility/Visibility.js
index 630193b22b..28bf8be71a 100644
--- a/src/behaviors/Visibility/Visibility.js
+++ b/src/behaviors/Visibility/Visibility.js
@@ -15,161 +15,6 @@ import {
* Visibility provides a set of callbacks for when a content appears in the viewport.
*/
export default class Visibility extends Component {
- static propTypes = {
- /** An element type to render as (string or function). */
- as: PropTypes.elementType,
-
- /** Primary content. */
- children: PropTypes.node,
-
- /** Context which visibility should attach onscroll events. */
- context: PropTypes.object,
-
- /**
- * When set to true a callback will occur anytime an element passes a condition not just immediately after the
- * threshold is met.
- */
- continuous: PropTypes.bool,
-
- /** Fires callbacks immediately after mount. */
- fireOnMount: PropTypes.bool,
-
- /**
- * Element's bottom edge has passed top of screen.
- *
- * @param {null}
- * @param {object} data - All props.
- */
- onBottomPassed: PropTypes.func,
-
- /**
- * Element's bottom edge has not passed top of screen.
- *
- * @param {null}
- * @param {object} data - All props.
- */
- onBottomPassedReverse: PropTypes.func,
-
- /**
- * Element's bottom edge has passed bottom of screen
- *
- * @param {null}
- * @param {object} data - All props.
- */
- onBottomVisible: PropTypes.func,
-
- /**
- * Element's bottom edge has not passed bottom of screen.
- *
- * @param {null}
- * @param {object} data - All props.
- */
- onBottomVisibleReverse: PropTypes.func,
-
- /**
- * Value that context should be adjusted in pixels. Useful for making content appear below content fixed to the
- * page.
- */
- offset: PropTypes.oneOfType([
- PropTypes.number,
- PropTypes.string,
- PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
- ]),
-
- /** When set to false a callback will occur each time an element passes the threshold for a condition. */
- once: PropTypes.bool,
-
- /** Element is not visible on the screen. */
- onPassed: PropTypes.object,
-
- /**
- * Any part of an element is visible on screen.
- *
- * @param {null}
- * @param {object} data - All props.
- */
- onPassing: PropTypes.func,
-
- /**
- * Element's top has not passed top of screen but bottom has.
- *
- * @param {null}
- * @param {object} data - All props.
- */
- onPassingReverse: PropTypes.func,
-
- /**
- * Element is not visible on the screen.
- *
- * @param {null}
- * @param {object} data - All props.
- */
- onOffScreen: PropTypes.func,
-
- /**
- * Element is visible on the screen.
- *
- * @param {null}
- * @param {object} data - All props.
- */
- onOnScreen: PropTypes.func,
-
- /**
- * Element's top edge has passed top of the screen.
- *
- * @param {null}
- * @param {object} data - All props.
- */
- onTopPassed: PropTypes.func,
-
- /**
- * Element's top edge has not passed top of the screen.
- *
- * @param {null}
- * @param {object} data - All props.
- */
- onTopPassedReverse: PropTypes.func,
-
- /**
- * Element's top edge has passed bottom of screen.
- *
- * @param {null}
- * @param {object} data - All props.
- */
- onTopVisible: PropTypes.func,
-
- /**
- * Element's top edge has not passed bottom of screen.
- *
- * @param {null}
- * @param {object} data - All props.
- */
- onTopVisibleReverse: PropTypes.func,
-
- /**
- * Element's top edge has passed bottom of screen.
- *
- * @param {null}
- * @param {object} data - All props.
- */
- onUpdate: PropTypes.func,
-
- /**
- * Allows to choose the mode of the position calculations:
- * - `events` - (default) update and fire callbacks only on scroll/resize events
- * - `repaint` - update and fire callbacks on browser repaint (animation frames)
- */
- updateOn: PropTypes.oneOf(['events', 'repaint']),
- }
-
- static defaultProps = {
- context: isBrowser() ? window : null,
- continuous: false,
- offset: [0, 0],
- once: true,
- updateOn: 'events',
- }
-
calculations = {
bottomPassed: false,
bottomVisible: false,
@@ -187,22 +32,6 @@ export default class Visibility extends Component {
// Lifecycle
// ----------------------------------------
- // eslint-disable-next-line camelcase
- UNSAFE_componentWillReceiveProps({ continuous, once, context, updateOn }) {
- const cleanHappened =
- continuous !== this.props.continuous ||
- once !== this.props.once ||
- updateOn !== this.props.updateOn
-
- // Heads up! We should clean up array of happened callbacks, if values of these props are changed
- if (cleanHappened) this.firedCallbacks = []
-
- if (context !== this.props.context || updateOn !== this.props.updateOn) {
- this.unattachHandlers(this.props.context)
- this.attachHandlers(context, updateOn)
- }
- }
-
componentDidMount() {
this.mounted = true
@@ -215,6 +44,21 @@ export default class Visibility extends Component {
if (fireOnMount) this.update()
}
+ componentDidUpdate(prevProps) {
+ const cleanHappened =
+ prevProps.continuous !== this.props.continuous ||
+ prevProps.once !== this.props.once ||
+ prevProps.updateOn !== this.props.updateOn
+
+ // Heads up! We should clean up array of happened callbacks, if values of these props are changed
+ if (cleanHappened) this.firedCallbacks = []
+
+ if (prevProps.context !== this.props.context || prevProps.updateOn !== this.props.updateOn) {
+ this.unattachHandlers(prevProps.context)
+ this.attachHandlers(this.props.context, this.props.updateOn)
+ }
+ }
+
componentWillUnmount() {
const { context } = this.props
@@ -425,3 +269,158 @@ export default class Visibility extends Component {
)
}
}
+
+Visibility.propTypes = {
+ /** An element type to render as (string or function). */
+ as: PropTypes.elementType,
+
+ /** Primary content. */
+ children: PropTypes.node,
+
+ /** Context which visibility should attach onscroll events. */
+ context: PropTypes.object,
+
+ /**
+ * When set to true a callback will occur anytime an element passes a condition not just immediately after the
+ * threshold is met.
+ */
+ continuous: PropTypes.bool,
+
+ /** Fires callbacks immediately after mount. */
+ fireOnMount: PropTypes.bool,
+
+ /**
+ * Element's bottom edge has passed top of screen.
+ *
+ * @param {null}
+ * @param {object} data - All props.
+ */
+ onBottomPassed: PropTypes.func,
+
+ /**
+ * Element's bottom edge has not passed top of screen.
+ *
+ * @param {null}
+ * @param {object} data - All props.
+ */
+ onBottomPassedReverse: PropTypes.func,
+
+ /**
+ * Element's bottom edge has passed bottom of screen
+ *
+ * @param {null}
+ * @param {object} data - All props.
+ */
+ onBottomVisible: PropTypes.func,
+
+ /**
+ * Element's bottom edge has not passed bottom of screen.
+ *
+ * @param {null}
+ * @param {object} data - All props.
+ */
+ onBottomVisibleReverse: PropTypes.func,
+
+ /**
+ * Value that context should be adjusted in pixels. Useful for making content appear below content fixed to the
+ * page.
+ */
+ offset: PropTypes.oneOfType([
+ PropTypes.number,
+ PropTypes.string,
+ PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+ ]),
+
+ /** When set to false a callback will occur each time an element passes the threshold for a condition. */
+ once: PropTypes.bool,
+
+ /** Element is not visible on the screen. */
+ onPassed: PropTypes.object,
+
+ /**
+ * Any part of an element is visible on screen.
+ *
+ * @param {null}
+ * @param {object} data - All props.
+ */
+ onPassing: PropTypes.func,
+
+ /**
+ * Element's top has not passed top of screen but bottom has.
+ *
+ * @param {null}
+ * @param {object} data - All props.
+ */
+ onPassingReverse: PropTypes.func,
+
+ /**
+ * Element is not visible on the screen.
+ *
+ * @param {null}
+ * @param {object} data - All props.
+ */
+ onOffScreen: PropTypes.func,
+
+ /**
+ * Element is visible on the screen.
+ *
+ * @param {null}
+ * @param {object} data - All props.
+ */
+ onOnScreen: PropTypes.func,
+
+ /**
+ * Element's top edge has passed top of the screen.
+ *
+ * @param {null}
+ * @param {object} data - All props.
+ */
+ onTopPassed: PropTypes.func,
+
+ /**
+ * Element's top edge has not passed top of the screen.
+ *
+ * @param {null}
+ * @param {object} data - All props.
+ */
+ onTopPassedReverse: PropTypes.func,
+
+ /**
+ * Element's top edge has passed bottom of screen.
+ *
+ * @param {null}
+ * @param {object} data - All props.
+ */
+ onTopVisible: PropTypes.func,
+
+ /**
+ * Element's top edge has not passed bottom of screen.
+ *
+ * @param {null}
+ * @param {object} data - All props.
+ */
+ onTopVisibleReverse: PropTypes.func,
+
+ /**
+ * Element's top edge has passed bottom of screen.
+ *
+ * @param {null}
+ * @param {object} data - All props.
+ */
+ onUpdate: PropTypes.func,
+
+ /**
+ * Allows to choose the mode of the position calculations:
+ * - `events` - (default) update and fire callbacks only on scroll/resize events
+ * - `repaint` - update and fire callbacks on browser repaint (animation frames)
+ */
+ updateOn: PropTypes.oneOf(['events', 'repaint']),
+}
+
+Visibility.defaultProps = {
+ context: isBrowser() ? window : null,
+ continuous: false,
+ offset: [0, 0],
+ once: true,
+ updateOn: 'events',
+}
diff --git a/src/collections/Breadcrumb/Breadcrumb.d.ts b/src/collections/Breadcrumb/Breadcrumb.d.ts
index e6164ee127..0e8f8d14d3 100644
--- a/src/collections/Breadcrumb/Breadcrumb.d.ts
+++ b/src/collections/Breadcrumb/Breadcrumb.d.ts
@@ -7,7 +7,7 @@ import {
} from '../../generic'
import { IconProps } from '../../elements/Icon'
import BreadcrumbDivider from './BreadcrumbDivider'
-import { default as BreadcrumbSection, BreadcrumbSectionProps } from './BreadcrumbSection'
+import BreadcrumbSection, { BreadcrumbSectionProps } from './BreadcrumbSection'
export interface BreadcrumbProps extends StrictBreadcrumbProps {
[key: string]: any
diff --git a/src/collections/Breadcrumb/BreadcrumbSection.js b/src/collections/Breadcrumb/BreadcrumbSection.js
index 32c6cdb0c5..18c0636f0f 100644
--- a/src/collections/Breadcrumb/BreadcrumbSection.js
+++ b/src/collections/Breadcrumb/BreadcrumbSection.js
@@ -16,38 +16,6 @@ import {
* A section sub-component for Breadcrumb component.
*/
export default class BreadcrumbSection extends Component {
- static propTypes = {
- /** An element type to render as (string or function). */
- as: PropTypes.elementType,
-
- /** Style as the currently active section. */
- active: PropTypes.bool,
-
- /** Primary content. */
- children: PropTypes.node,
-
- /** Additional classes. */
- className: PropTypes.string,
-
- /** Shorthand for primary content. */
- content: customPropTypes.contentShorthand,
-
- /** Render as an `a` tag instead of a `div` and adds the href attribute. */
- href: customPropTypes.every([customPropTypes.disallow(['link']), PropTypes.string]),
-
- /** Render as an `a` tag instead of a `div`. */
- link: customPropTypes.every([customPropTypes.disallow(['href']), PropTypes.bool]),
-
- /**
- * Called on click. When passed, the component will render as an `a`
- * tag by default instead of a `div`.
- *
- * @param {SyntheticEvent} event - React's original SyntheticEvent.
- * @param {object} data - All props.
- */
- onClick: PropTypes.func,
- }
-
computeElementType = () => {
const { link, onClick } = this.props
@@ -71,6 +39,38 @@ export default class BreadcrumbSection extends Component {
}
}
+BreadcrumbSection.propTypes = {
+ /** An element type to render as (string or function). */
+ as: PropTypes.elementType,
+
+ /** Style as the currently active section. */
+ active: PropTypes.bool,
+
+ /** Primary content. */
+ children: PropTypes.node,
+
+ /** Additional classes. */
+ className: PropTypes.string,
+
+ /** Shorthand for primary content. */
+ content: customPropTypes.contentShorthand,
+
+ /** Render as an `a` tag instead of a `div` and adds the href attribute. */
+ href: customPropTypes.every([customPropTypes.disallow(['link']), PropTypes.string]),
+
+ /** Render as an `a` tag instead of a `div`. */
+ link: customPropTypes.every([customPropTypes.disallow(['href']), PropTypes.bool]),
+
+ /**
+ * Called on click. When passed, the component will render as an `a`
+ * tag by default instead of a `div`.
+ *
+ * @param {SyntheticEvent} event - React's original SyntheticEvent.
+ * @param {object} data - All props.
+ */
+ onClick: PropTypes.func,
+}
+
BreadcrumbSection.create = createShorthandFactory(BreadcrumbSection, (content) => ({
content,
link: true,
diff --git a/src/collections/Form/Form.js b/src/collections/Form/Form.js
index dbea936f3e..25463ab019 100644
--- a/src/collections/Form/Form.js
+++ b/src/collections/Form/Form.js
@@ -26,64 +26,6 @@ import FormTextArea from './FormTextArea'
* @see Visibility
*/
class Form extends Component {
- static propTypes = {
- /** An element type to render as (string or function). */
- as: PropTypes.elementType,
-
- /** The HTML form action */
- action: PropTypes.string,
-
- /** Primary content. */
- children: PropTypes.node,
-
- /** Additional classes. */
- className: PropTypes.string,
-
- /** Automatically show any error Message children. */
- error: PropTypes.bool,
-
- /** A form can have its color inverted for contrast. */
- inverted: PropTypes.bool,
-
- /** Automatically show a loading indicator. */
- loading: PropTypes.bool,
-
- /** The HTML form submit handler. */
- onSubmit: PropTypes.func,
-
- /** A comment can contain a form to reply to a comment. This may have arbitrary content. */
- reply: PropTypes.bool,
-
- /** A form can vary in size. */
- size: PropTypes.oneOf(_.without(SUI.SIZES, 'medium')),
-
- /** Automatically show any success Message children. */
- success: PropTypes.bool,
-
- /** A form can prevent itself from stacking on mobile. */
- unstackable: PropTypes.bool,
-
- /** Automatically show any warning Message children. */
- warning: PropTypes.bool,
-
- /** Forms can automatically divide fields to be equal width. */
- widths: PropTypes.oneOf(['equal']),
- }
-
- static defaultProps = {
- as: 'form',
- }
-
- static Field = FormField
- static Button = FormButton
- static Checkbox = FormCheckbox
- static Dropdown = FormDropdown
- static Group = FormGroup
- static Input = FormInput
- static Radio = FormRadio
- static Select = FormSelect
- static TextArea = FormTextArea
-
handleSubmit = (e, ...args) => {
const { action } = this.props
@@ -134,4 +76,62 @@ class Form extends Component {
}
}
+Form.propTypes = {
+ /** An element type to render as (string or function). */
+ as: PropTypes.elementType,
+
+ /** The HTML form action */
+ action: PropTypes.string,
+
+ /** Primary content. */
+ children: PropTypes.node,
+
+ /** Additional classes. */
+ className: PropTypes.string,
+
+ /** Automatically show any error Message children. */
+ error: PropTypes.bool,
+
+ /** A form can have its color inverted for contrast. */
+ inverted: PropTypes.bool,
+
+ /** Automatically show a loading indicator. */
+ loading: PropTypes.bool,
+
+ /** The HTML form submit handler. */
+ onSubmit: PropTypes.func,
+
+ /** A comment can contain a form to reply to a comment. This may have arbitrary content. */
+ reply: PropTypes.bool,
+
+ /** A form can vary in size. */
+ size: PropTypes.oneOf(_.without(SUI.SIZES, 'medium')),
+
+ /** Automatically show any success Message children. */
+ success: PropTypes.bool,
+
+ /** A form can prevent itself from stacking on mobile. */
+ unstackable: PropTypes.bool,
+
+ /** Automatically show any warning Message children. */
+ warning: PropTypes.bool,
+
+ /** Forms can automatically divide fields to be equal width. */
+ widths: PropTypes.oneOf(['equal']),
+}
+
+Form.defaultProps = {
+ as: 'form',
+}
+
+Form.Field = FormField
+Form.Button = FormButton
+Form.Checkbox = FormCheckbox
+Form.Dropdown = FormDropdown
+Form.Group = FormGroup
+Form.Input = FormInput
+Form.Radio = FormRadio
+Form.Select = FormSelect
+Form.TextArea = FormTextArea
+
export default Form
diff --git a/src/collections/Form/FormField.d.ts b/src/collections/Form/FormField.d.ts
index 3b9c502130..1a9d6ed3fb 100644
--- a/src/collections/Form/FormField.d.ts
+++ b/src/collections/Form/FormField.d.ts
@@ -38,6 +38,9 @@ export interface StrictFormFieldProps {
/** Individual fields may display an error state along with a message. */
error?: boolean | SemanticShorthandItem
+ /** The id of the control */
+ id?: number | string
+
/** A field can have its label next to instead of above it. */
inline?: boolean
diff --git a/src/collections/Form/FormField.js b/src/collections/Form/FormField.js
index b5da5144f9..43e0097369 100644
--- a/src/collections/Form/FormField.js
+++ b/src/collections/Form/FormField.js
@@ -41,6 +41,7 @@ function FormField(props) {
required,
type,
width,
+ id,
} = props
const classes = cx(
@@ -58,7 +59,13 @@ function FormField(props) {
const errorPointing = _.get(error, 'pointing', 'above')
const errorLabel = Label.create(error, {
autoGenerateKey: false,
- defaultProps: { prompt: true, pointing: errorPointing },
+ defaultProps: {
+ prompt: true,
+ pointing: errorPointing,
+ id: id ? `${id}-error-message` : undefined,
+ role: 'alert',
+ 'aria-atomic': true,
+ },
})
const errorLabelBefore = (errorPointing === 'below' || errorPointing === 'right') && errorLabel
@@ -71,14 +78,14 @@ function FormField(props) {
if (_.isNil(control)) {
if (_.isNil(label)) {
return (
-
+
{childrenUtils.isNil(children) ? content : children}
)
}
return (
-
+
{errorLabelBefore}
{createHTMLLabel(label, { autoGenerateKey: false })}
{errorLabelAfter}
@@ -89,7 +96,13 @@ function FormField(props) {
// ----------------------------------------
// Checkbox/Radio Control
// ----------------------------------------
- const controlProps = { ...rest, content, children, disabled, required, type }
+
+ const ariaDescribedBy = id && error ? `${id}-error-message` : null
+ const ariaAttrs = {
+ 'aria-describedby': ariaDescribedBy,
+ 'aria-invalid': error !== undefined ? true : undefined,
+ }
+ const controlProps = { ...rest, content, children, disabled, required, type, id }
// wrap HTML checkboxes/radios in the label
if (control === 'input' && (type === 'checkbox' || type === 'radio')) {
@@ -97,7 +110,7 @@ function FormField(props) {
@@ -109,7 +122,7 @@ function FormField(props) {
return (
{errorLabelBefore}
- {createElement(control, { ...controlProps, label })}
+ {createElement(control, { ...ariaAttrs, ...controlProps, label })}
{errorLabelAfter}
)
@@ -122,11 +135,11 @@ function FormField(props) {
return (
{createHTMLLabel(label, {
- defaultProps: { htmlFor: _.get(controlProps, 'id') },
+ defaultProps: { htmlFor: id },
autoGenerateKey: false,
})}
{errorLabelBefore}
- {createElement(control, controlProps)}
+ {createElement(control, { ...ariaAttrs, ...controlProps })}
{errorLabelAfter}
)
@@ -161,6 +174,9 @@ FormField.propTypes = {
/** Individual fields may display an error state along with a message. */
error: PropTypes.oneOfType([PropTypes.bool, customPropTypes.itemShorthand]),
+ /** The id of the control */
+ id: PropTypes.string,
+
/** A field can have its label next to instead of above it. */
inline: PropTypes.bool,
diff --git a/src/collections/Menu/Menu.d.ts b/src/collections/Menu/Menu.d.ts
index 91fa59928e..bb2b009c1a 100644
--- a/src/collections/Menu/Menu.d.ts
+++ b/src/collections/Menu/Menu.d.ts
@@ -2,7 +2,7 @@ import * as React from 'react'
import { SemanticCOLORS, SemanticShorthandCollection, SemanticWIDTHS } from '../../generic'
import MenuHeader from './MenuHeader'
-import { default as MenuItem, MenuItemProps } from './MenuItem'
+import MenuItem, { MenuItemProps } from './MenuItem'
import MenuMenu from './MenuMenu'
export interface MenuProps extends StrictMenuProps {
diff --git a/src/collections/Menu/Menu.js b/src/collections/Menu/Menu.js
index 5b9253b9b8..1ba670ed11 100644
--- a/src/collections/Menu/Menu.js
+++ b/src/collections/Menu/Menu.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
import React from 'react'
import {
- AutoControlledComponent as Component,
+ ModernAutoControlledComponent as Component,
childrenUtils,
customPropTypes,
createShorthandFactory,
@@ -25,99 +25,11 @@ import MenuMenu from './MenuMenu'
* @see Dropdown
*/
class Menu extends Component {
- static propTypes = {
- /** An element type to render as (string or function). */
- as: PropTypes.elementType,
-
- /** Index of the currently active item. */
- activeIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
- /** A menu may be attached to other content segments. */
- attached: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['top', 'bottom'])]),
-
- /** A menu item or menu can have no borders. */
- borderless: PropTypes.bool,
-
- /** Primary content. */
- children: PropTypes.node,
-
- /** Additional classes. */
- className: PropTypes.string,
-
- /** Additional colors can be specified. */
- color: PropTypes.oneOf(SUI.COLORS),
-
- /** A menu can take up only the space necessary to fit its content. */
- compact: PropTypes.bool,
-
- /** Initial activeIndex value. */
- defaultActiveIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
- /** A menu can be fixed to a side of its context. */
- fixed: PropTypes.oneOf(['left', 'right', 'bottom', 'top']),
-
- /** A menu can be floated. */
- floated: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['right'])]),
-
- /** A vertical menu may take the size of its container. */
- fluid: PropTypes.bool,
-
- /** A menu may have just icons (bool) or labeled icons. */
- icon: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['labeled'])]),
-
- /** A menu may have its colors inverted to show greater contrast. */
- inverted: PropTypes.bool,
-
- /** Shorthand array of props for Menu. */
- items: customPropTypes.collectionShorthand,
-
- /**
- * onClick handler for MenuItem. Mutually exclusive with children.
- *
- * @param {SyntheticEvent} event - React's original SyntheticEvent.
- * @param {object} data - All item props.
- */
- onItemClick: customPropTypes.every([customPropTypes.disallow(['children']), PropTypes.func]),
-
- /** A pagination menu is specially formatted to present links to pages of content. */
- pagination: PropTypes.bool,
-
- /** A menu can point to show its relationship to nearby content. */
- pointing: PropTypes.bool,
-
- /** A menu can adjust its appearance to de-emphasize its contents. */
- secondary: PropTypes.bool,
-
- /** A menu can vary in size. */
- size: PropTypes.oneOf(_.without(SUI.SIZES, 'medium', 'big')),
-
- /** A menu can stack at mobile resolutions. */
- stackable: PropTypes.bool,
-
- /** A menu can be formatted to show tabs of information. */
- tabular: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['right'])]),
-
- /** A menu can be formatted for text content. */
- text: PropTypes.bool,
-
- /** A vertical menu displays elements vertically. */
- vertical: PropTypes.bool,
-
- /** A menu can have its items divided evenly. */
- widths: PropTypes.oneOf(SUI.WIDTHS),
- }
-
- static autoControlledProps = ['activeIndex']
-
- static Header = MenuHeader
- static Item = MenuItem
- static Menu = MenuMenu
-
handleItemOverrides = (predefinedProps) => ({
onClick: (e, itemProps) => {
const { index } = itemProps
- this.trySetState({ activeIndex: index })
+ this.setState({ activeIndex: index })
_.invoke(predefinedProps, 'onClick', e, itemProps)
_.invoke(this.props, 'onItemClick', e, itemProps)
@@ -196,6 +108,94 @@ class Menu extends Component {
}
}
+Menu.propTypes = {
+ /** An element type to render as (string or function). */
+ as: PropTypes.elementType,
+
+ /** Index of the currently active item. */
+ activeIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+ /** A menu may be attached to other content segments. */
+ attached: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['top', 'bottom'])]),
+
+ /** A menu item or menu can have no borders. */
+ borderless: PropTypes.bool,
+
+ /** Primary content. */
+ children: PropTypes.node,
+
+ /** Additional classes. */
+ className: PropTypes.string,
+
+ /** Additional colors can be specified. */
+ color: PropTypes.oneOf(SUI.COLORS),
+
+ /** A menu can take up only the space necessary to fit its content. */
+ compact: PropTypes.bool,
+
+ /** Initial activeIndex value. */
+ defaultActiveIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+ /** A menu can be fixed to a side of its context. */
+ fixed: PropTypes.oneOf(['left', 'right', 'bottom', 'top']),
+
+ /** A menu can be floated. */
+ floated: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['right'])]),
+
+ /** A vertical menu may take the size of its container. */
+ fluid: PropTypes.bool,
+
+ /** A menu may have just icons (bool) or labeled icons. */
+ icon: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['labeled'])]),
+
+ /** A menu may have its colors inverted to show greater contrast. */
+ inverted: PropTypes.bool,
+
+ /** Shorthand array of props for Menu. */
+ items: customPropTypes.collectionShorthand,
+
+ /**
+ * onClick handler for MenuItem. Mutually exclusive with children.
+ *
+ * @param {SyntheticEvent} event - React's original SyntheticEvent.
+ * @param {object} data - All item props.
+ */
+ onItemClick: customPropTypes.every([customPropTypes.disallow(['children']), PropTypes.func]),
+
+ /** A pagination menu is specially formatted to present links to pages of content. */
+ pagination: PropTypes.bool,
+
+ /** A menu can point to show its relationship to nearby content. */
+ pointing: PropTypes.bool,
+
+ /** A menu can adjust its appearance to de-emphasize its contents. */
+ secondary: PropTypes.bool,
+
+ /** A menu can vary in size. */
+ size: PropTypes.oneOf(_.without(SUI.SIZES, 'medium', 'big')),
+
+ /** A menu can stack at mobile resolutions. */
+ stackable: PropTypes.bool,
+
+ /** A menu can be formatted to show tabs of information. */
+ tabular: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['right'])]),
+
+ /** A menu can be formatted for text content. */
+ text: PropTypes.bool,
+
+ /** A vertical menu displays elements vertically. */
+ vertical: PropTypes.bool,
+
+ /** A menu can have its items divided evenly. */
+ widths: PropTypes.oneOf(SUI.WIDTHS),
+}
+
+Menu.autoControlledProps = ['activeIndex']
+
+Menu.Header = MenuHeader
+Menu.Item = MenuItem
+Menu.Menu = MenuMenu
+
Menu.create = createShorthandFactory(Menu, (items) => ({ items }))
export default Menu
diff --git a/src/collections/Menu/MenuItem.js b/src/collections/Menu/MenuItem.js
index 6aacfa2e6a..4d90e173bf 100644
--- a/src/collections/Menu/MenuItem.js
+++ b/src/collections/Menu/MenuItem.js
@@ -19,59 +19,6 @@ import Icon from '../../elements/Icon'
* A menu can contain an item.
*/
export default class MenuItem extends Component {
- static propTypes = {
- /** An element type to render as (string or function). */
- as: PropTypes.elementType,
-
- /** A menu item can be active. */
- active: PropTypes.bool,
-
- /** Primary content. */
- children: PropTypes.node,
-
- /** Additional classes. */
- className: PropTypes.string,
-
- /** Additional colors can be specified. */
- color: PropTypes.oneOf(SUI.COLORS),
-
- /** Shorthand for primary content. */
- content: customPropTypes.contentShorthand,
-
- /** A menu item can be disabled. */
- disabled: PropTypes.bool,
-
- /** A menu item or menu can remove element padding, vertically or horizontally. */
- fitted: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['horizontally', 'vertically'])]),
-
- /** A menu item may include a header or may itself be a header. */
- header: PropTypes.bool,
-
- /** MenuItem can be only icon. */
- icon: PropTypes.oneOfType([PropTypes.bool, customPropTypes.itemShorthand]),
-
- /** MenuItem index inside Menu. */
- index: PropTypes.number,
-
- /** A menu item can be link. */
- link: PropTypes.bool,
-
- /** Internal name of the MenuItem. */
- name: PropTypes.string,
-
- /**
- * Called on click. When passed, the component will render as an `a`
- * tag by default instead of a `div`.
- *
- * @param {SyntheticEvent} event - React's original SyntheticEvent.
- * @param {object} data - All props.
- */
- onClick: PropTypes.func,
-
- /** A menu item can take left or right position. */
- position: PropTypes.oneOf(['left', 'right']),
- }
-
handleClick = (e) => {
const { disabled } = this.props
@@ -129,4 +76,57 @@ export default class MenuItem extends Component {
}
}
+MenuItem.propTypes = {
+ /** An element type to render as (string or function). */
+ as: PropTypes.elementType,
+
+ /** A menu item can be active. */
+ active: PropTypes.bool,
+
+ /** Primary content. */
+ children: PropTypes.node,
+
+ /** Additional classes. */
+ className: PropTypes.string,
+
+ /** Additional colors can be specified. */
+ color: PropTypes.oneOf(SUI.COLORS),
+
+ /** Shorthand for primary content. */
+ content: customPropTypes.contentShorthand,
+
+ /** A menu item can be disabled. */
+ disabled: PropTypes.bool,
+
+ /** A menu item or menu can remove element padding, vertically or horizontally. */
+ fitted: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['horizontally', 'vertically'])]),
+
+ /** A menu item may include a header or may itself be a header. */
+ header: PropTypes.bool,
+
+ /** MenuItem can be only icon. */
+ icon: PropTypes.oneOfType([PropTypes.bool, customPropTypes.itemShorthand]),
+
+ /** MenuItem index inside Menu. */
+ index: PropTypes.number,
+
+ /** A menu item can be link. */
+ link: PropTypes.bool,
+
+ /** Internal name of the MenuItem. */
+ name: PropTypes.string,
+
+ /**
+ * Called on click. When passed, the component will render as an `a`
+ * tag by default instead of a `div`.
+ *
+ * @param {SyntheticEvent} event - React's original SyntheticEvent.
+ * @param {object} data - All props.
+ */
+ onClick: PropTypes.func,
+
+ /** A menu item can take left or right position. */
+ position: PropTypes.oneOf(['left', 'right']),
+}
+
MenuItem.create = createShorthandFactory(MenuItem, (val) => ({ content: val, name: val }))
diff --git a/src/collections/Message/Message.d.ts b/src/collections/Message/Message.d.ts
index ee919724b3..723b0733bd 100644
--- a/src/collections/Message/Message.d.ts
+++ b/src/collections/Message/Message.d.ts
@@ -7,8 +7,8 @@ import {
SemanticShorthandItem,
} from '../../generic'
import MessageContent from './MessageContent'
-import { default as MessageHeader, MessageHeaderProps } from './MessageHeader'
-import { default as MessageItem, MessageItemProps } from './MessageItem'
+import MessageHeader, { MessageHeaderProps } from './MessageHeader'
+import MessageItem, { MessageItemProps } from './MessageItem'
import MessageList from './MessageList'
export type MessageSizeProp = 'mini' | 'tiny' | 'small' | 'large' | 'big' | 'huge' | 'massive'
diff --git a/src/collections/Message/Message.js b/src/collections/Message/Message.js
index ae6a08f06a..acb75c52e7 100644
--- a/src/collections/Message/Message.js
+++ b/src/collections/Message/Message.js
@@ -24,82 +24,6 @@ import MessageItem from './MessageItem'
* @see Form
*/
export default class Message extends Component {
- static propTypes = {
- /** An element type to render as (string or function). */
- as: PropTypes.elementType,
-
- /** A message can be formatted to attach itself to other content. */
- attached: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['bottom', 'top'])]),
-
- /** Primary content. */
- children: PropTypes.node,
-
- /** Additional classes. */
- className: PropTypes.string,
-
- /** A message can be formatted to be different colors. */
- color: PropTypes.oneOf(SUI.COLORS),
-
- /** A message can only take up the width of its content. */
- compact: PropTypes.bool,
-
- /** Shorthand for primary content. */
- content: customPropTypes.contentShorthand,
-
- /** A message may be formatted to display a negative message. Same as `negative`. */
- error: PropTypes.bool,
-
- /** A message can float above content that it is related to. */
- floating: PropTypes.bool,
-
- /** Shorthand for MessageHeader. */
- header: customPropTypes.itemShorthand,
-
- /** A message can be hidden. */
- hidden: PropTypes.bool,
-
- /** A message can contain an icon. */
- icon: PropTypes.oneOfType([customPropTypes.itemShorthand, PropTypes.bool]),
-
- /** A message may be formatted to display information. */
- info: PropTypes.bool,
-
- /** Array shorthand items for the MessageList. Mutually exclusive with children. */
- list: customPropTypes.collectionShorthand,
-
- /** A message may be formatted to display a negative message. Same as `error`. */
- negative: PropTypes.bool,
-
- /**
- * A message that the user can choose to hide.
- * Called when the user clicks the "x" icon. This also adds the "x" icon.
- *
- * @param {SyntheticEvent} event - React's original SyntheticEvent.
- * @param {object} data - All props.
- */
- onDismiss: PropTypes.func,
-
- /** A message may be formatted to display a positive message. Same as `success`. */
- positive: PropTypes.bool,
-
- /** A message can have different sizes. */
- size: PropTypes.oneOf(_.without(SUI.SIZES, 'medium')),
-
- /** A message may be formatted to display a positive message. Same as `positive`. */
- success: PropTypes.bool,
-
- /** A message can be set to visible to force itself to be shown. */
- visible: PropTypes.bool,
-
- /** A message may be formatted to display warning messages. */
- warning: PropTypes.bool,
- }
-
- static Content = MessageContent
- static Header = MessageHeader
- static List = MessageList
- static Item = MessageItem
-
handleDismiss = (e) => {
const { onDismiss } = this.props
@@ -178,3 +102,79 @@ export default class Message extends Component {
)
}
}
+
+Message.propTypes = {
+ /** An element type to render as (string or function). */
+ as: PropTypes.elementType,
+
+ /** A message can be formatted to attach itself to other content. */
+ attached: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['bottom', 'top'])]),
+
+ /** Primary content. */
+ children: PropTypes.node,
+
+ /** Additional classes. */
+ className: PropTypes.string,
+
+ /** A message can be formatted to be different colors. */
+ color: PropTypes.oneOf(SUI.COLORS),
+
+ /** A message can only take up the width of its content. */
+ compact: PropTypes.bool,
+
+ /** Shorthand for primary content. */
+ content: customPropTypes.contentShorthand,
+
+ /** A message may be formatted to display a negative message. Same as `negative`. */
+ error: PropTypes.bool,
+
+ /** A message can float above content that it is related to. */
+ floating: PropTypes.bool,
+
+ /** Shorthand for MessageHeader. */
+ header: customPropTypes.itemShorthand,
+
+ /** A message can be hidden. */
+ hidden: PropTypes.bool,
+
+ /** A message can contain an icon. */
+ icon: PropTypes.oneOfType([customPropTypes.itemShorthand, PropTypes.bool]),
+
+ /** A message may be formatted to display information. */
+ info: PropTypes.bool,
+
+ /** Array shorthand items for the MessageList. Mutually exclusive with children. */
+ list: customPropTypes.collectionShorthand,
+
+ /** A message may be formatted to display a negative message. Same as `error`. */
+ negative: PropTypes.bool,
+
+ /**
+ * A message that the user can choose to hide.
+ * Called when the user clicks the "x" icon. This also adds the "x" icon.
+ *
+ * @param {SyntheticEvent} event - React's original SyntheticEvent.
+ * @param {object} data - All props.
+ */
+ onDismiss: PropTypes.func,
+
+ /** A message may be formatted to display a positive message. Same as `success`. */
+ positive: PropTypes.bool,
+
+ /** A message can have different sizes. */
+ size: PropTypes.oneOf(_.without(SUI.SIZES, 'medium')),
+
+ /** A message may be formatted to display a positive message. Same as `positive`. */
+ success: PropTypes.bool,
+
+ /** A message can be set to visible to force itself to be shown. */
+ visible: PropTypes.bool,
+
+ /** A message may be formatted to display warning messages. */
+ warning: PropTypes.bool,
+}
+
+Message.Content = MessageContent
+Message.Header = MessageHeader
+Message.List = MessageList
+Message.Item = MessageItem
diff --git a/src/collections/Table/Table.d.ts b/src/collections/Table/Table.d.ts
index 10a83e70bb..f3c6748459 100644
--- a/src/collections/Table/Table.d.ts
+++ b/src/collections/Table/Table.d.ts
@@ -12,7 +12,7 @@ import TableCell from './TableCell'
import TableFooter from './TableFooter'
import TableHeader from './TableHeader'
import TableHeaderCell from './TableHeaderCell'
-import { default as TableRow, TableRowProps } from './TableRow'
+import TableRow, { TableRowProps } from './TableRow'
export interface TableProps extends StrictTableProps {
[key: string]: any
diff --git a/src/elements/Button/Button.d.ts b/src/elements/Button/Button.d.ts
index a0dedcf973..f298e76a3b 100644
--- a/src/elements/Button/Button.d.ts
+++ b/src/elements/Button/Button.d.ts
@@ -115,7 +115,7 @@ export interface StrictButtonProps {
toggle?: boolean
}
-declare class Button extends React.Component {
+declare class Button extends React.Component {
static Content: typeof ButtonContent
static Group: typeof ButtonGroup
static Or: typeof ButtonOr
diff --git a/src/elements/Button/Button.js b/src/elements/Button/Button.js
index 7857b0d840..05256db0a2 100644
--- a/src/elements/Button/Button.js
+++ b/src/elements/Button/Button.js
@@ -28,134 +28,6 @@ import ButtonOr from './ButtonOr'
* @see Label
*/
class Button extends Component {
- static propTypes = {
- /** An element type to render as (string or function). */
- as: PropTypes.elementType,
-
- /** A button can show it is currently the active user selection. */
- active: PropTypes.bool,
-
- /** A button can animate to show hidden content. */
- animated: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['fade', 'vertical'])]),
-
- /** A button can be attached to other content. */
- attached: PropTypes.oneOfType([
- PropTypes.bool,
- PropTypes.oneOf(['left', 'right', 'top', 'bottom']),
- ]),
-
- /** A basic button is less pronounced. */
- basic: PropTypes.bool,
-
- /** Primary content. */
- children: customPropTypes.every([
- PropTypes.node,
- customPropTypes.disallow(['label']),
- customPropTypes.givenProps(
- {
- icon: PropTypes.oneOfType([
- PropTypes.string.isRequired,
- PropTypes.object.isRequired,
- PropTypes.element.isRequired,
- ]),
- },
- customPropTypes.disallow(['icon']),
- ),
- ]),
-
- /** A button can be circular. */
- circular: PropTypes.bool,
-
- /** Additional classes. */
- className: PropTypes.string,
-
- /** A button can have different colors */
- color: PropTypes.oneOf([
- ...SUI.COLORS,
- 'facebook',
- 'google plus',
- 'instagram',
- 'linkedin',
- 'twitter',
- 'vk',
- 'youtube',
- ]),
-
- /** A button can reduce its padding to fit into tighter spaces. */
- compact: PropTypes.bool,
-
- /** Shorthand for primary content. */
- content: customPropTypes.contentShorthand,
-
- /** A button can show it is currently unable to be interacted with. */
- disabled: PropTypes.bool,
-
- /** A button can be aligned to the left or right of its container. */
- floated: PropTypes.oneOf(SUI.FLOATS),
-
- /** A button can take the width of its container. */
- fluid: PropTypes.bool,
-
- /** Add an Icon by name, props object, or pass an . */
- icon: customPropTypes.some([
- PropTypes.bool,
- PropTypes.string,
- PropTypes.object,
- PropTypes.element,
- ]),
-
- /** A button can be formatted to appear on dark backgrounds. */
- inverted: PropTypes.bool,
-
- /** Add a Label by text, props object, or pass a . */
- label: customPropTypes.some([PropTypes.string, PropTypes.object, PropTypes.element]),
-
- /** A labeled button can format a Label or Icon to appear on the left or right. */
- labelPosition: PropTypes.oneOf(['right', 'left']),
-
- /** A button can show a loading indicator. */
- loading: PropTypes.bool,
-
- /** A button can hint towards a negative consequence. */
- negative: PropTypes.bool,
-
- /**
- * Called after user's click.
- * @param {SyntheticEvent} event - React's original SyntheticEvent.
- * @param {object} data - All props.
- */
- onClick: PropTypes.func,
-
- /** A button can hint towards a positive consequence. */
- positive: PropTypes.bool,
-
- /** A button can be formatted to show different levels of emphasis. */
- primary: PropTypes.bool,
-
- /** The role of the HTML element. */
- role: PropTypes.string,
-
- /** A button can be formatted to show different levels of emphasis. */
- secondary: PropTypes.bool,
-
- /** A button can have different sizes. */
- size: PropTypes.oneOf(SUI.SIZES),
-
- /** A button can receive focus. */
- tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
- /** A button can be formatted to toggle on and off. */
- toggle: PropTypes.bool,
- }
-
- static defaultProps = {
- as: 'button',
- }
-
- static Content = ButtonContent
- static Group = ButtonGroup
- static Or = ButtonOr
-
ref = createRef()
computeButtonAriaRole(ElementType) {
@@ -306,6 +178,134 @@ class Button extends Component {
}
}
+Button.propTypes = {
+ /** An element type to render as (string or function). */
+ as: PropTypes.elementType,
+
+ /** A button can show it is currently the active user selection. */
+ active: PropTypes.bool,
+
+ /** A button can animate to show hidden content. */
+ animated: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['fade', 'vertical'])]),
+
+ /** A button can be attached to other content. */
+ attached: PropTypes.oneOfType([
+ PropTypes.bool,
+ PropTypes.oneOf(['left', 'right', 'top', 'bottom']),
+ ]),
+
+ /** A basic button is less pronounced. */
+ basic: PropTypes.bool,
+
+ /** Primary content. */
+ children: customPropTypes.every([
+ PropTypes.node,
+ customPropTypes.disallow(['label']),
+ customPropTypes.givenProps(
+ {
+ icon: PropTypes.oneOfType([
+ PropTypes.string.isRequired,
+ PropTypes.object.isRequired,
+ PropTypes.element.isRequired,
+ ]),
+ },
+ customPropTypes.disallow(['icon']),
+ ),
+ ]),
+
+ /** A button can be circular. */
+ circular: PropTypes.bool,
+
+ /** Additional classes. */
+ className: PropTypes.string,
+
+ /** A button can have different colors */
+ color: PropTypes.oneOf([
+ ...SUI.COLORS,
+ 'facebook',
+ 'google plus',
+ 'instagram',
+ 'linkedin',
+ 'twitter',
+ 'vk',
+ 'youtube',
+ ]),
+
+ /** A button can reduce its padding to fit into tighter spaces. */
+ compact: PropTypes.bool,
+
+ /** Shorthand for primary content. */
+ content: customPropTypes.contentShorthand,
+
+ /** A button can show it is currently unable to be interacted with. */
+ disabled: PropTypes.bool,
+
+ /** A button can be aligned to the left or right of its container. */
+ floated: PropTypes.oneOf(SUI.FLOATS),
+
+ /** A button can take the width of its container. */
+ fluid: PropTypes.bool,
+
+ /** Add an Icon by name, props object, or pass an . */
+ icon: customPropTypes.some([
+ PropTypes.bool,
+ PropTypes.string,
+ PropTypes.object,
+ PropTypes.element,
+ ]),
+
+ /** A button can be formatted to appear on dark backgrounds. */
+ inverted: PropTypes.bool,
+
+ /** Add a Label by text, props object, or pass a . */
+ label: customPropTypes.some([PropTypes.string, PropTypes.object, PropTypes.element]),
+
+ /** A labeled button can format a Label or Icon to appear on the left or right. */
+ labelPosition: PropTypes.oneOf(['right', 'left']),
+
+ /** A button can show a loading indicator. */
+ loading: PropTypes.bool,
+
+ /** A button can hint towards a negative consequence. */
+ negative: PropTypes.bool,
+
+ /**
+ * Called after user's click.
+ * @param {SyntheticEvent} event - React's original SyntheticEvent.
+ * @param {object} data - All props.
+ */
+ onClick: PropTypes.func,
+
+ /** A button can hint towards a positive consequence. */
+ positive: PropTypes.bool,
+
+ /** A button can be formatted to show different levels of emphasis. */
+ primary: PropTypes.bool,
+
+ /** The role of the HTML element. */
+ role: PropTypes.string,
+
+ /** A button can be formatted to show different levels of emphasis. */
+ secondary: PropTypes.bool,
+
+ /** A button can have different sizes. */
+ size: PropTypes.oneOf(SUI.SIZES),
+
+ /** A button can receive focus. */
+ tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+ /** A button can be formatted to toggle on and off. */
+ toggle: PropTypes.bool,
+}
+
+Button.defaultProps = {
+ as: 'button',
+}
+
+Button.Content = ButtonContent
+Button.Group = ButtonGroup
+Button.Or = ButtonOr
+
Button.create = createShorthandFactory(Button, (value) => ({ content: value }))
export default Button
diff --git a/src/elements/Flag/Flag.d.ts b/src/elements/Flag/Flag.d.ts
index 5d8ea0934c..9be91cf474 100644
--- a/src/elements/Flag/Flag.d.ts
+++ b/src/elements/Flag/Flag.d.ts
@@ -123,6 +123,8 @@ export type FlagNameValues =
| 'algeria'
| 'ec'
| 'ecuador'
+ | 'england'
+ | 'gb eng'
| 'ee'
| 'estonia'
| 'eg'
@@ -509,6 +511,6 @@ export interface StrictFlagProps {
name: FlagNameValues
}
-declare class Flag extends React.PureComponent {}
+declare class Flag extends React.PureComponent {}
export default Flag
diff --git a/src/elements/Flag/Flag.js b/src/elements/Flag/Flag.js
index e6c35dc5f8..24272dd7ae 100644
--- a/src/elements/Flag/Flag.js
+++ b/src/elements/Flag/Flag.js
@@ -132,6 +132,8 @@ export const names = [
'algeria',
'ec',
'ecuador',
+ 'england',
+ 'gb eng',
'ee',
'estonia',
'eg',
@@ -508,21 +510,6 @@ export const names = [
* A flag is is used to represent a political state.
*/
class Flag extends PureComponent {
- static propTypes = {
- /** An element type to render as (string or function). */
- as: PropTypes.elementType,
-
- /** Additional classes. */
- className: PropTypes.string,
-
- /** Flag name, can use the two digit country code, the full name, or a common alias. */
- name: customPropTypes.suggest(names),
- }
-
- static defaultProps = {
- as: 'i',
- }
-
render() {
const { className, name } = this.props
const classes = cx(name, 'flag', className)
@@ -533,6 +520,21 @@ class Flag extends PureComponent {
}
}
+Flag.propTypes = {
+ /** An element type to render as (string or function). */
+ as: PropTypes.elementType,
+
+ /** Additional classes. */
+ className: PropTypes.string,
+
+ /** Flag name, can use the two digit country code, the full name, or a common alias. */
+ name: customPropTypes.suggest(names),
+}
+
+Flag.defaultProps = {
+ as: 'i',
+}
+
Flag.create = createShorthandFactory(Flag, (value) => ({ name: value }))
export default Flag
diff --git a/src/elements/Icon/Icon.d.ts b/src/elements/Icon/Icon.d.ts
index 1978bb5ba7..20b4fe9c80 100644
--- a/src/elements/Icon/Icon.d.ts
+++ b/src/elements/Icon/Icon.d.ts
@@ -63,7 +63,7 @@ export interface StrictIconProps {
'aria-label'?: string
}
-declare class Icon extends React.PureComponent {
+declare class Icon extends React.PureComponent {
static Group: typeof IconGroup
}
diff --git a/src/elements/Icon/Icon.js b/src/elements/Icon/Icon.js
index 3a0106518b..aa322bd010 100644
--- a/src/elements/Icon/Icon.js
+++ b/src/elements/Icon/Icon.js
@@ -20,68 +20,6 @@ import IconGroup from './IconGroup'
* @see Image
*/
class Icon extends PureComponent {
- static propTypes = {
- /** An element type to render as (string or function). */
- as: PropTypes.elementType,
-
- /** Formatted to appear bordered. */
- bordered: PropTypes.bool,
-
- /** Icon can formatted to appear circular. */
- circular: PropTypes.bool,
-
- /** Additional classes. */
- className: PropTypes.string,
-
- /** Color of the icon. */
- color: PropTypes.oneOf(SUI.COLORS),
-
- /** Icons can display a smaller corner icon. */
- corner: PropTypes.oneOfType([
- PropTypes.bool,
- PropTypes.oneOf(['top left', 'top right', 'bottom left', 'bottom right']),
- ]),
-
- /** Show that the icon is inactive. */
- disabled: PropTypes.bool,
-
- /** Fitted, without space to left or right of Icon. */
- fitted: PropTypes.bool,
-
- /** Icon can be flipped. */
- flipped: PropTypes.oneOf(['horizontally', 'vertically']),
-
- /** Formatted to have its colors inverted for contrast. */
- inverted: PropTypes.bool,
-
- /** Icon can be formatted as a link. */
- link: PropTypes.bool,
-
- /** Icon can be used as a simple loader. */
- loading: PropTypes.bool,
-
- /** Name of the icon. */
- name: customPropTypes.suggest(SUI.ALL_ICONS_IN_ALL_CONTEXTS),
-
- /** Icon can rotated. */
- rotated: PropTypes.oneOf(['clockwise', 'counterclockwise']),
-
- /** 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,
- }
-
- static defaultProps = {
- as: 'i',
- }
-
- static Group = IconGroup
-
getIconAriaOptions() {
const ariaOptions = {}
const { 'aria-label': ariaLabel, 'aria-hidden': ariaHidden } = this.props
@@ -153,6 +91,68 @@ class Icon extends PureComponent {
}
}
+Icon.propTypes = {
+ /** An element type to render as (string or function). */
+ as: PropTypes.elementType,
+
+ /** Formatted to appear bordered. */
+ bordered: PropTypes.bool,
+
+ /** Icon can formatted to appear circular. */
+ circular: PropTypes.bool,
+
+ /** Additional classes. */
+ className: PropTypes.string,
+
+ /** Color of the icon. */
+ color: PropTypes.oneOf(SUI.COLORS),
+
+ /** Icons can display a smaller corner icon. */
+ corner: PropTypes.oneOfType([
+ PropTypes.bool,
+ PropTypes.oneOf(['top left', 'top right', 'bottom left', 'bottom right']),
+ ]),
+
+ /** Show that the icon is inactive. */
+ disabled: PropTypes.bool,
+
+ /** Fitted, without space to left or right of Icon. */
+ fitted: PropTypes.bool,
+
+ /** Icon can be flipped. */
+ flipped: PropTypes.oneOf(['horizontally', 'vertically']),
+
+ /** Formatted to have its colors inverted for contrast. */
+ inverted: PropTypes.bool,
+
+ /** Icon can be formatted as a link. */
+ link: PropTypes.bool,
+
+ /** Icon can be used as a simple loader. */
+ loading: PropTypes.bool,
+
+ /** Name of the icon. */
+ name: customPropTypes.suggest(SUI.ALL_ICONS_IN_ALL_CONTEXTS),
+
+ /** Icon can rotated. */
+ rotated: PropTypes.oneOf(['clockwise', 'counterclockwise']),
+
+ /** 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,
+}
+
+Icon.defaultProps = {
+ as: 'i',
+}
+
+Icon.Group = IconGroup
+
Icon.create = createShorthandFactory(Icon, (value) => ({ name: value }))
export default Icon
diff --git a/src/elements/Input/Input.d.ts b/src/elements/Input/Input.d.ts
index 1fcf164a6e..5a4c93feb6 100644
--- a/src/elements/Input/Input.d.ts
+++ b/src/elements/Input/Input.d.ts
@@ -1,6 +1,6 @@
import * as React from 'react'
-import { HtmlInputrops, SemanticShorthandItem, SemanticSIZES } from '../../generic'
+import { HtmlInputrops, SemanticShorthandItem } from '../../generic'
import { LabelProps } from '../Label'
export interface InputProps extends StrictInputProps {
@@ -81,7 +81,7 @@ export interface InputOnChangeData extends InputProps {
value: string
}
-declare class Input extends React.Component {
+declare class Input extends React.Component {
focus: () => void
select: () => void
}
diff --git a/src/elements/Input/Input.js b/src/elements/Input/Input.js
index 2e48417768..e34ef5706d 100644
--- a/src/elements/Input/Input.js
+++ b/src/elements/Input/Input.js
@@ -27,80 +27,6 @@ import Label from '../Label'
* @see Label
*/
class Input extends Component {
- static propTypes = {
- /** An element type to render as (string or function). */
- as: PropTypes.elementType,
-
- /** An Input can be formatted to alert the user to an action they may perform. */
- action: PropTypes.oneOfType([PropTypes.bool, customPropTypes.itemShorthand]),
-
- /** An action can appear along side an Input on the left or right. */
- actionPosition: PropTypes.oneOf(['left']),
-
- /** Primary content. */
- children: PropTypes.node,
-
- /** Additional classes. */
- className: PropTypes.string,
-
- /** An Input field can show that it is disabled. */
- disabled: PropTypes.bool,
-
- /** An Input field can show the data contains errors. */
- error: PropTypes.bool,
-
- /** Take on the size of its container. */
- fluid: PropTypes.bool,
-
- /** An Input field can show a user is currently interacting with it. */
- focus: PropTypes.bool,
-
- /** Optional Icon to display inside the Input. */
- icon: PropTypes.oneOfType([PropTypes.bool, customPropTypes.itemShorthand]),
-
- /** An Icon can appear inside an Input on the left or right. */
- iconPosition: PropTypes.oneOf(['left']),
-
- /** Shorthand for creating the HTML Input. */
- input: customPropTypes.itemShorthand,
-
- /** Format to appear on dark backgrounds. */
- inverted: PropTypes.bool,
-
- /** Optional Label to display along side the Input. */
- label: customPropTypes.itemShorthand,
-
- /** A Label can appear outside an Input on the left or right. */
- labelPosition: PropTypes.oneOf(['left', 'right', 'left corner', 'right corner']),
-
- /** An Icon Input field can show that it is currently loading data. */
- loading: PropTypes.bool,
-
- /**
- * Called on change.
- *
- * @param {ChangeEvent} event - React's original SyntheticEvent.
- * @param {object} data - All props and a proposed value.
- */
- onChange: PropTypes.func,
-
- /** An Input can vary in size. */
- size: PropTypes.oneOf(['mini', 'small', 'large', 'big', 'huge', 'massive']),
-
- /** An Input can receive focus. */
- tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
- /** Transparent Input has no background. */
- transparent: PropTypes.bool,
-
- /** The HTML input type. */
- type: PropTypes.string,
- }
-
- static defaultProps = {
- type: 'text',
- }
-
inputRef = createRef()
computeIcon = () => {
@@ -240,6 +166,80 @@ class Input extends Component {
}
}
+Input.propTypes = {
+ /** An element type to render as (string or function). */
+ as: PropTypes.elementType,
+
+ /** An Input can be formatted to alert the user to an action they may perform. */
+ action: PropTypes.oneOfType([PropTypes.bool, customPropTypes.itemShorthand]),
+
+ /** An action can appear along side an Input on the left or right. */
+ actionPosition: PropTypes.oneOf(['left']),
+
+ /** Primary content. */
+ children: PropTypes.node,
+
+ /** Additional classes. */
+ className: PropTypes.string,
+
+ /** An Input field can show that it is disabled. */
+ disabled: PropTypes.bool,
+
+ /** An Input field can show the data contains errors. */
+ error: PropTypes.bool,
+
+ /** Take on the size of its container. */
+ fluid: PropTypes.bool,
+
+ /** An Input field can show a user is currently interacting with it. */
+ focus: PropTypes.bool,
+
+ /** Optional Icon to display inside the Input. */
+ icon: PropTypes.oneOfType([PropTypes.bool, customPropTypes.itemShorthand]),
+
+ /** An Icon can appear inside an Input on the left or right. */
+ iconPosition: PropTypes.oneOf(['left']),
+
+ /** Shorthand for creating the HTML Input. */
+ input: customPropTypes.itemShorthand,
+
+ /** Format to appear on dark backgrounds. */
+ inverted: PropTypes.bool,
+
+ /** Optional Label to display along side the Input. */
+ label: customPropTypes.itemShorthand,
+
+ /** A Label can appear outside an Input on the left or right. */
+ labelPosition: PropTypes.oneOf(['left', 'right', 'left corner', 'right corner']),
+
+ /** An Icon Input field can show that it is currently loading data. */
+ loading: PropTypes.bool,
+
+ /**
+ * Called on change.
+ *
+ * @param {ChangeEvent} event - React's original SyntheticEvent.
+ * @param {object} data - All props and a proposed value.
+ */
+ onChange: PropTypes.func,
+
+ /** An Input can vary in size. */
+ size: PropTypes.oneOf(['mini', 'small', 'large', 'big', 'huge', 'massive']),
+
+ /** An Input can receive focus. */
+ tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+ /** Transparent Input has no background. */
+ transparent: PropTypes.bool,
+
+ /** The HTML input type. */
+ type: PropTypes.string,
+}
+
+Input.defaultProps = {
+ type: 'text',
+}
+
Input.create = createShorthandFactory(Input, (type) => ({ type }))
export default Input
diff --git a/src/elements/Label/Label.d.ts b/src/elements/Label/Label.d.ts
index f772a54c70..48f58f58b3 100644
--- a/src/elements/Label/Label.d.ts
+++ b/src/elements/Label/Label.d.ts
@@ -7,7 +7,7 @@ import {
SemanticSIZES,
} from '../../generic'
import { IconProps } from '../Icon'
-import { default as LabelDetail, LabelDetailProps } from './LabelDetail'
+import LabelDetail, { LabelDetailProps } from './LabelDetail'
import LabelGroup from './LabelGroup'
export interface LabelProps extends StrictLabelProps {
diff --git a/src/elements/Label/Label.js b/src/elements/Label/Label.js
index 748a891777..2f8e8b1c3d 100644
--- a/src/elements/Label/Label.js
+++ b/src/elements/Label/Label.js
@@ -23,103 +23,6 @@ import LabelGroup from './LabelGroup'
* A label displays content classification.
*/
export default class Label extends Component {
- static propTypes = {
- /** An element type to render as (string or function). */
- as: PropTypes.elementType,
-
- /** A label can be active. */
- active: PropTypes.bool,
-
- /** A label can attach to a content segment. */
- attached: PropTypes.oneOf([
- 'top',
- 'bottom',
- 'top right',
- 'top left',
- 'bottom left',
- 'bottom right',
- ]),
-
- /** A label can reduce its complexity. */
- basic: PropTypes.bool,
-
- /** Primary content. */
- children: PropTypes.node,
-
- /** A label can be circular. */
- circular: PropTypes.bool,
-
- /** Additional classes. */
- className: PropTypes.string,
-
- /** Color of the label. */
- color: PropTypes.oneOf(SUI.COLORS),
-
- /** Shorthand for primary content. */
- content: customPropTypes.contentShorthand,
-
- /** A label can position itself in the corner of an element. */
- corner: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['left', 'right'])]),
-
- /** Shorthand for LabelDetail. */
- detail: customPropTypes.itemShorthand,
-
- /** Formats the label as a dot. */
- empty: customPropTypes.every([PropTypes.bool, customPropTypes.demand(['circular'])]),
-
- /** Float above another element in the upper right corner. */
- floating: PropTypes.bool,
-
- /** A horizontal label is formatted to label content along-side it horizontally. */
- horizontal: PropTypes.bool,
-
- /** Shorthand for Icon. */
- icon: customPropTypes.itemShorthand,
-
- /** A label can be formatted to emphasize an image or prop can be used as shorthand for Image. */
- image: PropTypes.oneOfType([PropTypes.bool, customPropTypes.itemShorthand]),
-
- /**
- * Called on click.
- *
- * @param {SyntheticEvent} event - React's original SyntheticEvent.
- * @param {object} data - All props.
- */
- onClick: PropTypes.func,
-
- /**
- * Adds an "x" icon, called when "x" is clicked.
- *
- * @param {SyntheticEvent} event - React's original SyntheticEvent.
- * @param {object} data - All props.
- */
- onRemove: PropTypes.func,
-
- /** A label can point to content next to it. */
- pointing: PropTypes.oneOfType([
- PropTypes.bool,
- PropTypes.oneOf(['above', 'below', 'left', 'right']),
- ]),
-
- /** A label can prompt for an error in your forms. */
- prompt: PropTypes.bool,
-
- /** Shorthand for Icon to appear as the last child and trigger onRemove. */
- removeIcon: customPropTypes.itemShorthand,
-
- /** A label can appear as a ribbon attaching itself to an element. */
- ribbon: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['right'])]),
-
- /** A label can have different sizes. */
- size: PropTypes.oneOf(SUI.SIZES),
-
- /** A label can appear as a tag. */
- tag: PropTypes.bool,
- }
-
- static Detail = LabelDetail
- static Group = LabelGroup
-
handleClick = (e) => {
const { onClick } = this.props
@@ -213,4 +116,101 @@ export default class Label extends Component {
}
}
+Label.propTypes = {
+ /** An element type to render as (string or function). */
+ as: PropTypes.elementType,
+
+ /** A label can be active. */
+ active: PropTypes.bool,
+
+ /** A label can attach to a content segment. */
+ attached: PropTypes.oneOf([
+ 'top',
+ 'bottom',
+ 'top right',
+ 'top left',
+ 'bottom left',
+ 'bottom right',
+ ]),
+
+ /** A label can reduce its complexity. */
+ basic: PropTypes.bool,
+
+ /** Primary content. */
+ children: PropTypes.node,
+
+ /** A label can be circular. */
+ circular: PropTypes.bool,
+
+ /** Additional classes. */
+ className: PropTypes.string,
+
+ /** Color of the label. */
+ color: PropTypes.oneOf(SUI.COLORS),
+
+ /** Shorthand for primary content. */
+ content: customPropTypes.contentShorthand,
+
+ /** A label can position itself in the corner of an element. */
+ corner: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['left', 'right'])]),
+
+ /** Shorthand for LabelDetail. */
+ detail: customPropTypes.itemShorthand,
+
+ /** Formats the label as a dot. */
+ empty: customPropTypes.every([PropTypes.bool, customPropTypes.demand(['circular'])]),
+
+ /** Float above another element in the upper right corner. */
+ floating: PropTypes.bool,
+
+ /** A horizontal label is formatted to label content along-side it horizontally. */
+ horizontal: PropTypes.bool,
+
+ /** Shorthand for Icon. */
+ icon: customPropTypes.itemShorthand,
+
+ /** A label can be formatted to emphasize an image or prop can be used as shorthand for Image. */
+ image: PropTypes.oneOfType([PropTypes.bool, customPropTypes.itemShorthand]),
+
+ /**
+ * Called on click.
+ *
+ * @param {SyntheticEvent} event - React's original SyntheticEvent.
+ * @param {object} data - All props.
+ */
+ onClick: PropTypes.func,
+
+ /**
+ * Adds an "x" icon, called when "x" is clicked.
+ *
+ * @param {SyntheticEvent} event - React's original SyntheticEvent.
+ * @param {object} data - All props.
+ */
+ onRemove: PropTypes.func,
+
+ /** A label can point to content next to it. */
+ pointing: PropTypes.oneOfType([
+ PropTypes.bool,
+ PropTypes.oneOf(['above', 'below', 'left', 'right']),
+ ]),
+
+ /** A label can prompt for an error in your forms. */
+ prompt: PropTypes.bool,
+
+ /** Shorthand for Icon to appear as the last child and trigger onRemove. */
+ removeIcon: customPropTypes.itemShorthand,
+
+ /** A label can appear as a ribbon attaching itself to an element. */
+ ribbon: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['right'])]),
+
+ /** A label can have different sizes. */
+ size: PropTypes.oneOf(SUI.SIZES),
+
+ /** A label can appear as a tag. */
+ tag: PropTypes.bool,
+}
+
+Label.Detail = LabelDetail
+Label.Group = LabelGroup
+
Label.create = createShorthandFactory(Label, (value) => ({ content: value }))
diff --git a/src/elements/List/List.d.ts b/src/elements/List/List.d.ts
index 986e1b41d7..e4c1fc847f 100644
--- a/src/elements/List/List.d.ts
+++ b/src/elements/List/List.d.ts
@@ -11,7 +11,7 @@ import ListContent from './ListContent'
import ListDescription from './ListDescription'
import ListHeader from './ListHeader'
import ListIcon from './ListIcon'
-import { default as ListItem, ListItemProps } from './ListItem'
+import ListItem, { ListItemProps } from './ListItem'
import ListList from './ListList'
export interface ListProps extends StrictListProps {
diff --git a/src/elements/List/List.js b/src/elements/List/List.js
index 04a2151fde..a1fd825ca0 100644
--- a/src/elements/List/List.js
+++ b/src/elements/List/List.js
@@ -25,77 +25,6 @@ import ListList from './ListList'
* A list groups related content.
*/
class List extends Component {
- static propTypes = {
- /** An element type to render as (string or function). */
- as: PropTypes.elementType,
-
- /** A list can animate to set the current item apart from the list. */
- animated: PropTypes.bool,
-
- /** A list can mark items with a bullet. */
- bulleted: PropTypes.bool,
-
- /** A list can divide its items into cells. */
- celled: PropTypes.bool,
-
- /** Primary content. */
- children: PropTypes.node,
-
- /** Additional classes. */
- className: PropTypes.string,
-
- /** Shorthand for primary content. */
- content: customPropTypes.contentShorthand,
-
- /** A list can show divisions between content. */
- divided: PropTypes.bool,
-
- /** An list can be floated left or right. */
- floated: PropTypes.oneOf(SUI.FLOATS),
-
- /** A list can be formatted to have items appear horizontally. */
- horizontal: PropTypes.bool,
-
- /** A list can be inverted to appear on a dark background. */
- inverted: PropTypes.bool,
-
- /** Shorthand array of props for ListItem. */
- items: customPropTypes.collectionShorthand,
-
- /** A list can be specially formatted for navigation links. */
- link: PropTypes.bool,
-
- /**
- * onClick handler for ListItem. Mutually exclusive with children.
- *
- * @param {SyntheticEvent} event - React's original SyntheticEvent.
- * @param {object} data - All item props.
- */
- onItemClick: customPropTypes.every([customPropTypes.disallow(['children']), PropTypes.func]),
-
- /** A list can be ordered numerically. */
- ordered: PropTypes.bool,
-
- /** A list can relax its padding to provide more negative space. */
- relaxed: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['very'])]),
-
- /** A selection list formats list items as possible choices. */
- selection: PropTypes.bool,
-
- /** A list can vary in size. */
- size: PropTypes.oneOf(SUI.SIZES),
-
- /** An element inside a list can be vertically aligned. */
- verticalAlign: PropTypes.oneOf(SUI.VERTICAL_ALIGNMENTS),
- }
-
- static Content = ListContent
- static Description = ListDescription
- static Header = ListHeader
- static Icon = ListIcon
- static Item = ListItem
- static List = ListList
-
handleItemOverrides = (predefinedProps) => ({
onClick: (e, itemProps) => {
_.invoke(predefinedProps, 'onClick', e, itemProps)
@@ -169,4 +98,75 @@ class List extends Component {
}
}
+List.propTypes = {
+ /** An element type to render as (string or function). */
+ as: PropTypes.elementType,
+
+ /** A list can animate to set the current item apart from the list. */
+ animated: PropTypes.bool,
+
+ /** A list can mark items with a bullet. */
+ bulleted: PropTypes.bool,
+
+ /** A list can divide its items into cells. */
+ celled: PropTypes.bool,
+
+ /** Primary content. */
+ children: PropTypes.node,
+
+ /** Additional classes. */
+ className: PropTypes.string,
+
+ /** Shorthand for primary content. */
+ content: customPropTypes.contentShorthand,
+
+ /** A list can show divisions between content. */
+ divided: PropTypes.bool,
+
+ /** An list can be floated left or right. */
+ floated: PropTypes.oneOf(SUI.FLOATS),
+
+ /** A list can be formatted to have items appear horizontally. */
+ horizontal: PropTypes.bool,
+
+ /** A list can be inverted to appear on a dark background. */
+ inverted: PropTypes.bool,
+
+ /** Shorthand array of props for ListItem. */
+ items: customPropTypes.collectionShorthand,
+
+ /** A list can be specially formatted for navigation links. */
+ link: PropTypes.bool,
+
+ /**
+ * onClick handler for ListItem. Mutually exclusive with children.
+ *
+ * @param {SyntheticEvent} event - React's original SyntheticEvent.
+ * @param {object} data - All item props.
+ */
+ onItemClick: customPropTypes.every([customPropTypes.disallow(['children']), PropTypes.func]),
+
+ /** A list can be ordered numerically. */
+ ordered: PropTypes.bool,
+
+ /** A list can relax its padding to provide more negative space. */
+ relaxed: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['very'])]),
+
+ /** A selection list formats list items as possible choices. */
+ selection: PropTypes.bool,
+
+ /** A list can vary in size. */
+ size: PropTypes.oneOf(SUI.SIZES),
+
+ /** An element inside a list can be vertically aligned. */
+ verticalAlign: PropTypes.oneOf(SUI.VERTICAL_ALIGNMENTS),
+}
+
+List.Content = ListContent
+List.Description = ListDescription
+List.Header = ListHeader
+List.Icon = ListIcon
+List.Item = ListItem
+List.List = ListList
+
export default List
diff --git a/src/elements/List/ListItem.js b/src/elements/List/ListItem.js
index a1e55ba0f1..3fb771af09 100644
--- a/src/elements/List/ListItem.js
+++ b/src/elements/List/ListItem.js
@@ -21,64 +21,6 @@ import ListIcon from './ListIcon'
* A list item can contain a set of items.
*/
class ListItem extends Component {
- static propTypes = {
- /** An element type to render as (string or function). */
- as: PropTypes.elementType,
-
- /** A list item can active. */
- active: PropTypes.bool,
-
- /** Primary content. */
- children: PropTypes.node,
-
- /** Additional classes. */
- className: PropTypes.string,
-
- /**
- * Shorthand for primary content.
- *
- * Heads up!
- *
- * This is handled slightly differently than the typical `content` prop since
- * the wrapping ListContent is not used when there's no icon or image.
- *
- * If you pass content as:
- * - an element/literal, it's treated as the sibling node to
- * header/description (whether wrapped in Item.Content or not).
- * - a props object, it forces the presence of Item.Content and passes those
- * props to it. If you pass a content prop within that props object, it
- * will be treated as the sibling node to header/description.
- */
- content: customPropTypes.itemShorthand,
-
- /** Shorthand for ListDescription. */
- description: customPropTypes.itemShorthand,
-
- /** A list item can disabled. */
- disabled: PropTypes.bool,
-
- /** Shorthand for ListHeader. */
- header: customPropTypes.itemShorthand,
-
- /** Shorthand for ListIcon. */
- icon: customPropTypes.every([
- customPropTypes.disallow(['image']),
- customPropTypes.itemShorthand,
- ]),
-
- /** Shorthand for Image. */
- image: customPropTypes.every([
- customPropTypes.disallow(['icon']),
- customPropTypes.itemShorthand,
- ]),
-
- /** A ListItem can be clicked */
- onClick: PropTypes.func,
-
- /** A value for an ordered list. */
- value: PropTypes.string,
- }
-
handleClick = (e) => {
const { disabled } = this.props
@@ -184,6 +126,57 @@ class ListItem extends Component {
}
}
+ListItem.propTypes = {
+ /** An element type to render as (string or function). */
+ as: PropTypes.elementType,
+
+ /** A list item can active. */
+ active: PropTypes.bool,
+
+ /** Primary content. */
+ children: PropTypes.node,
+
+ /** Additional classes. */
+ className: PropTypes.string,
+
+ /**
+ * Shorthand for primary content.
+ *
+ * Heads up!
+ *
+ * This is handled slightly differently than the typical `content` prop since
+ * the wrapping ListContent is not used when there's no icon or image.
+ *
+ * If you pass content as:
+ * - an element/literal, it's treated as the sibling node to
+ * header/description (whether wrapped in Item.Content or not).
+ * - a props object, it forces the presence of Item.Content and passes those
+ * props to it. If you pass a content prop within that props object, it
+ * will be treated as the sibling node to header/description.
+ */
+ content: customPropTypes.itemShorthand,
+
+ /** Shorthand for ListDescription. */
+ description: customPropTypes.itemShorthand,
+
+ /** A list item can disabled. */
+ disabled: PropTypes.bool,
+
+ /** Shorthand for ListHeader. */
+ header: customPropTypes.itemShorthand,
+
+ /** Shorthand for ListIcon. */
+ icon: customPropTypes.every([customPropTypes.disallow(['image']), customPropTypes.itemShorthand]),
+
+ /** Shorthand for Image. */
+ image: customPropTypes.every([customPropTypes.disallow(['icon']), customPropTypes.itemShorthand]),
+
+ /** A ListItem can be clicked */
+ onClick: PropTypes.func,
+
+ /** A value for an ordered list. */
+ value: PropTypes.string,
+}
ListItem.create = createShorthandFactory(ListItem, (content) => ({ content }))
export default ListItem
diff --git a/src/elements/Step/Step.d.ts b/src/elements/Step/Step.d.ts
index 5c57ec56be..b09d752bda 100644
--- a/src/elements/Step/Step.d.ts
+++ b/src/elements/Step/Step.d.ts
@@ -3,9 +3,9 @@ import * as React from 'react'
import { SemanticShorthandContent, SemanticShorthandItem } from '../../generic'
import { IconProps } from '../Icon'
import StepContent from './StepContent'
-import { default as StepDescription, StepDescriptionProps } from './StepDescription'
+import StepDescription, { StepDescriptionProps } from './StepDescription'
import StepGroup from './StepGroup'
-import { default as StepTitle, StepTitleProps } from './StepTitle'
+import StepTitle, { StepTitleProps } from './StepTitle'
export interface StepProps extends StrictStepProps {
[key: string]: any
diff --git a/src/elements/Step/Step.js b/src/elements/Step/Step.js
index 1069b301c6..e13bc24d8c 100644
--- a/src/elements/Step/Step.js
+++ b/src/elements/Step/Step.js
@@ -21,61 +21,6 @@ import StepTitle from './StepTitle'
* A step shows the completion status of an activity in a series of activities.
*/
class Step extends Component {
- static propTypes = {
- /** An element type to render as (string or function). */
- as: PropTypes.elementType,
-
- /** A step can be highlighted as active. */
- active: PropTypes.bool,
-
- /** Primary content. */
- children: PropTypes.node,
-
- /** Additional classes. */
- className: PropTypes.string,
-
- /** A step can show that a user has completed it. */
- completed: PropTypes.bool,
-
- /** Shorthand for primary content. */
- content: customPropTypes.contentShorthand,
-
- /** Shorthand for StepDescription. */
- description: customPropTypes.itemShorthand,
-
- /** Show that the Loader is inactive. */
- disabled: PropTypes.bool,
-
- /** Render as an `a` tag instead of a `div` and adds the href attribute. */
- href: PropTypes.string,
-
- /** Shorthand for Icon. */
- icon: customPropTypes.itemShorthand,
-
- /** A step can be link. */
- link: PropTypes.bool,
-
- /**
- * Called on click. When passed, the component will render as an `a`
- * tag by default instead of a `div`.
- *
- * @param {SyntheticEvent} event - React's original SyntheticEvent.
- * @param {object} data - All props.
- */
- onClick: PropTypes.func,
-
- /** A step can show a ordered sequence of steps. Passed from StepGroup. */
- ordered: PropTypes.bool,
-
- /** Shorthand for StepTitle. */
- title: customPropTypes.itemShorthand,
- }
-
- static Content = StepContent
- static Description = StepDescription
- static Group = StepGroup
- static Title = StepTitle
-
computeElementType = () => {
const { onClick } = this.props
@@ -139,6 +84,61 @@ class Step extends Component {
}
}
+Step.propTypes = {
+ /** An element type to render as (string or function). */
+ as: PropTypes.elementType,
+
+ /** A step can be highlighted as active. */
+ active: PropTypes.bool,
+
+ /** Primary content. */
+ children: PropTypes.node,
+
+ /** Additional classes. */
+ className: PropTypes.string,
+
+ /** A step can show that a user has completed it. */
+ completed: PropTypes.bool,
+
+ /** Shorthand for primary content. */
+ content: customPropTypes.contentShorthand,
+
+ /** Shorthand for StepDescription. */
+ description: customPropTypes.itemShorthand,
+
+ /** Show that the Loader is inactive. */
+ disabled: PropTypes.bool,
+
+ /** Render as an `a` tag instead of a `div` and adds the href attribute. */
+ href: PropTypes.string,
+
+ /** Shorthand for Icon. */
+ icon: customPropTypes.itemShorthand,
+
+ /** A step can be link. */
+ link: PropTypes.bool,
+
+ /**
+ * Called on click. When passed, the component will render as an `a`
+ * tag by default instead of a `div`.
+ *
+ * @param {SyntheticEvent} event - React's original SyntheticEvent.
+ * @param {object} data - All props.
+ */
+ onClick: PropTypes.func,
+
+ /** A step can show a ordered sequence of steps. Passed from StepGroup. */
+ ordered: PropTypes.bool,
+
+ /** Shorthand for StepTitle. */
+ title: customPropTypes.itemShorthand,
+}
+
+Step.Content = StepContent
+Step.Description = StepDescription
+Step.Group = StepGroup
+Step.Title = StepTitle
+
Step.create = createShorthandFactory(Step, (content) => ({ content }))
export default Step
diff --git a/src/generic.d.ts b/src/generic.d.ts
index 9d0e11317f..7de8911d7d 100644
--- a/src/generic.d.ts
+++ b/src/generic.d.ts
@@ -126,14 +126,7 @@ type SemanticDIRECTIONALTRANSITIONS =
| 'swing left'
| 'swing right'
| 'zoom'
-type SemanticSTATICTRANSITIONS =
- | 'jiggle'
- | 'flash'
- | 'shake'
- | 'pulse'
- | 'tada'
- | 'bounce'
- | 'glow'
+type SemanticSTATICTRANSITIONS = 'jiggle' | 'flash' | 'shake' | 'pulse' | 'tada' | 'bounce' | 'glow'
export type SemanticTRANSITIONS = SemanticDIRECTIONALTRANSITIONS | SemanticSTATICTRANSITIONS
diff --git a/src/index.js b/src/index.js
index 6425461294..dc8144ac41 100644
--- a/src/index.js
+++ b/src/index.js
@@ -134,6 +134,7 @@ export DropdownHeader from './modules/Dropdown/DropdownHeader'
export DropdownItem from './modules/Dropdown/DropdownItem'
export DropdownMenu from './modules/Dropdown/DropdownMenu'
export DropdownSearchInput from './modules/Dropdown/DropdownSearchInput'
+export DropdownText from './modules/Dropdown/DropdownText'
export Embed from './modules/Embed'
diff --git a/src/lib/AutoControlledComponent.js b/src/lib/AutoControlledComponent.js
deleted file mode 100644
index 1e995ab32a..0000000000
--- a/src/lib/AutoControlledComponent.js
+++ /dev/null
@@ -1,199 +0,0 @@
-/* eslint-disable no-console */
-/**
- * Why choose inheritance over a HOC? Multiple advantages for this particular use case.
- * In short, we need identical functionality to setState(), unless there is a prop defined
- * for the state key. Also:
- *
- * 1. Single Renders
- * Calling trySetState() in constructor(), componentWillMount(), or componentWillReceiveProps()
- * does not cause two renders. Consumers and tests do not have to wait two renders to get state.
- * See www.react.run/4kJFdKoxb/27 for an example of this issue.
- *
- * 2. Simple Testing
- * Using a HOC means you must either test the undecorated component or test through the decorator.
- * Testing the undecorated component means you must mock the decorator functionality.
- * Testing through the HOC means you can not simply shallow render your component.
- *
- * 3. Statics
- * HOC wrap instances, so statics are no longer accessible. They can be hoisted, but this is more
- * looping over properties and storing references. We rely heavily on statics for testing and sub
- * components.
- *
- * 4. Instance Methods
- * Some instance methods may be exposed to users via refs. Again, these are lost with HOC unless
- * hoisted and exposed by the HOC.
- */
-import _ from 'lodash'
-import { Component } from 'react'
-
-export const getDefaultPropName = (prop) => `default${prop[0].toUpperCase() + prop.slice(1)}`
-
-/**
- * Return the auto controlled state value for a give prop. The initial value is chosen in this order:
- * - regular props
- * - then, default props
- * - then, initial state
- * - then, `checked` defaults to false
- * - then, `value` defaults to '' or [] if props.multiple
- * - else, undefined
- *
- * @param {string} propName A prop name
- * @param {object} [props] A props object
- * @param {object} [state] A state object
- * @param {boolean} [includeDefaults=false] Whether or not to heed the default props or initial state
- */
-export const getAutoControlledStateValue = (propName, props, state, includeDefaults = false) => {
- // regular props
- const propValue = props[propName]
- if (propValue !== undefined) return propValue
-
- if (includeDefaults) {
- // defaultProps
- const defaultProp = props[getDefaultPropName(propName)]
- if (defaultProp !== undefined) return defaultProp
-
- // initial state - state may be null or undefined
- if (state) {
- const initialState = state[propName]
- if (initialState !== undefined) return initialState
- }
- }
-
- // React doesn't allow changing from uncontrolled to controlled components,
- // default checked/value if they were not present.
- if (propName === 'checked') return false
- if (propName === 'value') return props.multiple ? [] : ''
-
- // otherwise, undefined
-}
-
-export default class AutoControlledComponent extends Component {
- constructor(...args) {
- super(...args)
-
- const { autoControlledProps } = this.constructor
- const state = _.invoke(this, 'getInitialAutoControlledState', this.props) || {}
-
- if (process.env.NODE_ENV !== 'production') {
- const { defaultProps, name, propTypes } = this.constructor
- // require static autoControlledProps
- if (!autoControlledProps) {
- console.error(`Auto controlled ${name} must specify a static autoControlledProps array.`)
- }
-
- // require propTypes
- _.each(autoControlledProps, (prop) => {
- const defaultProp = getDefaultPropName(prop)
- // regular prop
- if (!_.has(propTypes, defaultProp)) {
- console.error(
- `${name} is missing "${defaultProp}" propTypes validation for auto controlled prop "${prop}".`,
- )
- }
- // its default prop
- if (!_.has(propTypes, prop)) {
- console.error(
- `${name} is missing propTypes validation for auto controlled prop "${prop}".`,
- )
- }
- })
-
- // prevent autoControlledProps in defaultProps
- //
- // When setting state, auto controlled props values always win (so the parent can manage them).
- // It is not reasonable to decipher the difference between props from the parent and defaultProps.
- // Allowing defaultProps results in trySetState always deferring to the defaultProp value.
- // Auto controlled props also listed in defaultProps can never be updated.
- //
- // To set defaults for an AutoControlled prop, you can set the initial state in the
- // constructor or by using an ES7 property initializer:
- // https://babeljs.io/blog/2015/06/07/react-on-es6-plus#property-initializers
- const illegalDefaults = _.intersection(autoControlledProps, _.keys(defaultProps))
- if (!_.isEmpty(illegalDefaults)) {
- console.error(
- [
- 'Do not set defaultProps for autoControlledProps. You can set defaults by',
- 'setting state in the constructor or using an ES7 property initializer',
- '(https://babeljs.io/blog/2015/06/07/react-on-es6-plus#property-initializers)',
- `See ${name} props: "${illegalDefaults}".`,
- ].join(' '),
- )
- }
-
- // prevent listing defaultProps in autoControlledProps
- //
- // Default props are automatically handled.
- // Listing defaults in autoControlledProps would result in allowing defaultDefaultValue props.
- const illegalAutoControlled = _.filter(autoControlledProps, (prop) =>
- _.startsWith(prop, 'default'),
- )
- if (!_.isEmpty(illegalAutoControlled)) {
- console.error(
- [
- 'Do not add default props to autoControlledProps.',
- 'Default props are automatically handled.',
- `See ${name} autoControlledProps: "${illegalAutoControlled}".`,
- ].join(' '),
- )
- }
- }
-
- // Auto controlled props are copied to state.
- // Set initial state by copying auto controlled props to state.
- // Also look for the default prop for any auto controlled props (foo => defaultFoo)
- // so we can set initial values from defaults.
- const initialAutoControlledState = autoControlledProps.reduce((acc, prop) => {
- acc[prop] = getAutoControlledStateValue(prop, this.props, state, true)
-
- if (process.env.NODE_ENV !== 'production') {
- const defaultPropName = getDefaultPropName(prop)
- const { name } = this.constructor
- // prevent defaultFoo={} along side foo={}
- if (!_.isUndefined(this.props[defaultPropName]) && !_.isUndefined(this.props[prop])) {
- console.error(
- `${name} prop "${prop}" is auto controlled. Specify either ${defaultPropName} or ${prop}, but not both.`,
- )
- }
- }
-
- return acc
- }, {})
-
- this.state = { ...state, ...initialAutoControlledState }
- }
-
- // eslint-disable-next-line camelcase
- UNSAFE_componentWillReceiveProps(nextProps) {
- const { autoControlledProps } = this.constructor
-
- // Solve the next state for autoControlledProps
- const newState = autoControlledProps.reduce((acc, prop) => {
- const isNextDefined = !_.isUndefined(nextProps[prop])
-
- // if next is defined then use its value
- if (isNextDefined) acc[prop] = nextProps[prop]
-
- return acc
- }, {})
-
- if (Object.keys(newState).length > 0) this.setState(newState)
- }
-
- /**
- * Safely attempt to set state for props that might be controlled by the user.
- * Second argument is a state object that is always passed to setState.
- * @param {object} state State that corresponds to controlled props.
- * @param {function} [callback] Callback which is called after setState applied.
- */
- trySetState = (state, callback) => {
- const newState = Object.keys(state).reduce((acc, prop) => {
- // ignore props defined by the parent
- if (this.props[prop] !== undefined) return acc
-
- acc[prop] = state[prop]
- return acc
- }, {})
-
- if (Object.keys(newState).length > 0) this.setState(newState, callback)
- }
-}
diff --git a/src/lib/ModernAutoControlledComponent.js b/src/lib/ModernAutoControlledComponent.js
index bad6711695..90fd7c4f6a 100644
--- a/src/lib/ModernAutoControlledComponent.js
+++ b/src/lib/ModernAutoControlledComponent.js
@@ -24,10 +24,50 @@
* hoisted and exposed by the HOC.
*/
import _ from 'lodash'
-import { Component } from 'react'
-import { getAutoControlledStateValue, getDefaultPropName } from './AutoControlledComponent'
+import React from 'react'
-export default class ModernAutoControlledComponent extends Component {
+const getDefaultPropName = (prop) => `default${prop[0].toUpperCase() + prop.slice(1)}`
+
+/**
+ * Return the auto controlled state value for a give prop. The initial value is chosen in this order:
+ * - regular props
+ * - then, default props
+ * - then, initial state
+ * - then, `checked` defaults to false
+ * - then, `value` defaults to '' or [] if props.multiple
+ * - else, undefined
+ *
+ * @param {string} propName A prop name
+ * @param {object} [props] A props object
+ * @param {object} [state] A state object
+ * @param {boolean} [includeDefaults=false] Whether or not to heed the default props or initial state
+ */
+const getAutoControlledStateValue = (propName, props, state, includeDefaults = false) => {
+ // regular props
+ const propValue = props[propName]
+ if (propValue !== undefined) return propValue
+
+ if (includeDefaults) {
+ // defaultProps
+ const defaultProp = props[getDefaultPropName(propName)]
+ if (defaultProp !== undefined) return defaultProp
+
+ // initial state - state may be null or undefined
+ if (state) {
+ const initialState = state[propName]
+ if (initialState !== undefined) return initialState
+ }
+ }
+
+ // React doesn't allow changing from uncontrolled to controlled components,
+ // default checked/value if they were not present.
+ if (propName === 'checked') return false
+ if (propName === 'value') return props.multiple ? [] : ''
+
+ // otherwise, undefined
+}
+
+export default class ModernAutoControlledComponent extends React.Component {
constructor(...args) {
super(...args)
@@ -147,10 +187,14 @@ export default class ModernAutoControlledComponent extends Component {
// Due to the inheritance of the AutoControlledComponent we should call its
// getAutoControlledStateFromProps() and merge it with the existing state
if (getAutoControlledStateFromProps) {
- const computedState = getAutoControlledStateFromProps(props, {
- ...state,
- ...newStateFromProps,
- })
+ const computedState = getAutoControlledStateFromProps(
+ props,
+ {
+ ...state,
+ ...newStateFromProps,
+ },
+ state,
+ )
// We should follow the idea of getDerivedStateFromProps() and return only modified state
return { ...newStateFromProps, ...computedState }
diff --git a/src/lib/customPropTypes.js b/src/lib/customPropTypes.js
index 9d1dc770b2..cf6f3fef50 100644
--- a/src/lib/customPropTypes.js
+++ b/src/lib/customPropTypes.js
@@ -10,6 +10,8 @@ const typeOf = (...args) => Object.prototype.toString.call(...args)
export const domNode = (props, propName) => {
// skip if prop is undefined
if (props[propName] === undefined) return
+ // short circle for SSR env
+ if (typeof Element === 'undefined') return
// skip if prop is valid
if (props[propName] instanceof Element) return
@@ -60,12 +62,7 @@ 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
}, {})
@@ -78,10 +75,7 @@ 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
diff --git a/src/lib/htmlPropsUtils.js b/src/lib/htmlPropsUtils.js
index 0344ad2791..0615fb48d5 100644
--- a/src/lib/htmlPropsUtils.js
+++ b/src/lib/htmlPropsUtils.js
@@ -16,6 +16,7 @@ export const htmlInputAttrs = [
'disabled',
'form',
'id',
+ 'inputMode',
'lang',
'list',
'max',
diff --git a/src/lib/index.js b/src/lib/index.js
index cfefc62a28..4c0e8bb44e 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -1,8 +1,6 @@
import makeDebugger from './makeDebugger'
-export AutoControlledComponent from './AutoControlledComponent'
export ModernAutoControlledComponent from './ModernAutoControlledComponent'
-export { getChildMapping, mergeChildMappings } from './childMapping'
export * as childrenUtils from './childrenUtils'
export {
diff --git a/src/modules/Accordion/Accordion.d.ts b/src/modules/Accordion/Accordion.d.ts
index feab3d1921..69dcb3c36e 100644
--- a/src/modules/Accordion/Accordion.d.ts
+++ b/src/modules/Accordion/Accordion.d.ts
@@ -1,7 +1,8 @@
import * as React from 'react'
-import { default as AccordionAccordion, StrictAccordionAccordionProps } from './AccordionAccordion'
+import AccordionAccordion, { StrictAccordionAccordionProps } from './AccordionAccordion'
import AccordionContent from './AccordionContent'
+import AccordionPanel from './AccordionPanel'
import AccordionTitle from './AccordionTitle'
export interface AccordionProps extends StrictAccordionProps {
@@ -25,6 +26,7 @@ export interface StrictAccordionProps extends StrictAccordionAccordionProps {
interface AccordionComponent extends React.ComponentClass {
Accordion: typeof AccordionAccordion
Content: typeof AccordionContent
+ Panel: typeof AccordionPanel
Title: typeof AccordionTitle
}
diff --git a/src/modules/Accordion/AccordionAccordion.js b/src/modules/Accordion/AccordionAccordion.js
index 377bf45af9..6f5fdd2ced 100644
--- a/src/modules/Accordion/AccordionAccordion.js
+++ b/src/modules/Accordion/AccordionAccordion.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
import React from 'react'
import {
- AutoControlledComponent as Component,
+ ModernAutoControlledComponent as Component,
childrenUtils,
createShorthandFactory,
customPropTypes,
@@ -30,57 +30,6 @@ const warnIfPropsAreInvalid = (props, state) => {
* An Accordion can contain sub-accordions.
*/
export default class AccordionAccordion extends Component {
- static propTypes = {
- /** An element type to render as (string or function). */
- as: PropTypes.elementType,
-
- /** Index of the currently active panel. */
- activeIndex: customPropTypes.every([
- customPropTypes.disallow(['children']),
- PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
- ]),
-
- /** Primary content. */
- children: PropTypes.node,
-
- /** Additional classes. */
- className: PropTypes.string,
-
- /** Initial activeIndex value. */
- defaultActiveIndex: customPropTypes.every([
- customPropTypes.disallow(['children']),
- PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
- ]),
-
- /** Only allow one panel open at a time. */
- exclusive: PropTypes.bool,
-
- /**
- * Called when a panel title is clicked.
- *
- * @param {SyntheticEvent} event - React's original SyntheticEvent.
- * @param {object} data - All item props.
- */
- onTitleClick: customPropTypes.every([customPropTypes.disallow(['children']), PropTypes.func]),
-
- /** Shorthand array of props for Accordion. */
- panels: customPropTypes.every([
- customPropTypes.disallow(['children']),
- PropTypes.arrayOf(
- PropTypes.shape({
- content: customPropTypes.itemShorthand,
- title: customPropTypes.itemShorthand,
- }),
- ),
- ]),
- }
-
- static defaultProps = {
- exclusive: true,
- }
-
- static autoControlledProps = ['activeIndex']
-
getInitialAutoControlledState({ exclusive }) {
return { activeIndex: exclusive ? -1 : [] }
}
@@ -110,7 +59,7 @@ export default class AccordionAccordion extends Component {
handleTitleClick = (e, titleProps) => {
const { index } = titleProps
- this.trySetState({ activeIndex: this.computeNewIndex(index) })
+ this.setState({ activeIndex: this.computeNewIndex(index) })
_.invoke(this.props, 'onTitleClick', e, titleProps)
}
@@ -146,4 +95,55 @@ export default class AccordionAccordion extends Component {
}
}
+AccordionAccordion.propTypes = {
+ /** An element type to render as (string or function). */
+ as: PropTypes.elementType,
+
+ /** Index of the currently active panel. */
+ activeIndex: customPropTypes.every([
+ customPropTypes.disallow(['children']),
+ PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
+ ]),
+
+ /** Primary content. */
+ children: PropTypes.node,
+
+ /** Additional classes. */
+ className: PropTypes.string,
+
+ /** Initial activeIndex value. */
+ defaultActiveIndex: customPropTypes.every([
+ customPropTypes.disallow(['children']),
+ PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
+ ]),
+
+ /** Only allow one panel open at a time. */
+ exclusive: PropTypes.bool,
+
+ /**
+ * Called when a panel title is clicked.
+ *
+ * @param {SyntheticEvent} event - React's original SyntheticEvent.
+ * @param {object} data - All item props.
+ */
+ onTitleClick: customPropTypes.every([customPropTypes.disallow(['children']), PropTypes.func]),
+
+ /** Shorthand array of props for Accordion. */
+ panels: customPropTypes.every([
+ customPropTypes.disallow(['children']),
+ PropTypes.arrayOf(
+ PropTypes.shape({
+ content: customPropTypes.itemShorthand,
+ title: customPropTypes.itemShorthand,
+ }),
+ ),
+ ]),
+}
+
+AccordionAccordion.defaultProps = {
+ exclusive: true,
+}
+
+AccordionAccordion.autoControlledProps = ['activeIndex']
+
AccordionAccordion.create = createShorthandFactory(AccordionAccordion, (content) => ({ content }))
diff --git a/src/modules/Accordion/AccordionPanel.d.ts b/src/modules/Accordion/AccordionPanel.d.ts
index 0e81975f33..b537d4daac 100644
--- a/src/modules/Accordion/AccordionPanel.d.ts
+++ b/src/modules/Accordion/AccordionPanel.d.ts
@@ -30,6 +30,6 @@ export interface StrictAccordionPanelProps {
title?: SemanticShorthandItem
}
-declare class AccordionPanel extends React.Component {}
+declare class AccordionPanel extends React.Component {}
export default AccordionPanel
diff --git a/src/modules/Accordion/AccordionPanel.js b/src/modules/Accordion/AccordionPanel.js
index 816ef673bc..b66acce997 100644
--- a/src/modules/Accordion/AccordionPanel.js
+++ b/src/modules/Accordion/AccordionPanel.js
@@ -1,6 +1,6 @@
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React, { Component, Fragment } from 'react'
+import React, { Component } from 'react'
import { createShorthandFactory, customPropTypes } from '../../lib'
import AccordionTitle from './AccordionTitle'
@@ -10,28 +10,6 @@ import AccordionContent from './AccordionContent'
* A panel sub-component for Accordion component.
*/
class AccordionPanel extends Component {
- static propTypes = {
- /** Whether or not the title is in the open state. */
- active: PropTypes.bool,
-
- /** A shorthand for Accordion.Content. */
- content: customPropTypes.itemShorthand,
-
- /** A panel index. */
- index: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
- /**
- * Called when a panel title is clicked.
- *
- * @param {SyntheticEvent} event - React's original SyntheticEvent.
- * @param {object} data - All item props.
- */
- onTitleClick: PropTypes.func,
-
- /** A shorthand for Accordion.Title. */
- title: customPropTypes.itemShorthand,
- }
-
handleTitleOverrides = (predefinedProps) => ({
onClick: (e, titleProps) => {
_.invoke(predefinedProps, 'onClick', e, titleProps)
@@ -43,7 +21,7 @@ class AccordionPanel extends Component {
const { active, content, index, title } = this.props
return (
-
+ <>
{AccordionTitle.create(title, {
autoGenerateKey: false,
defaultProps: { active, index },
@@ -53,11 +31,33 @@ class AccordionPanel extends Component {
autoGenerateKey: false,
defaultProps: { active },
})}
-
+
)
}
}
+AccordionPanel.propTypes = {
+ /** Whether or not the title is in the open state. */
+ active: PropTypes.bool,
+
+ /** A shorthand for Accordion.Content. */
+ content: customPropTypes.itemShorthand,
+
+ /** A panel index. */
+ index: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+ /**
+ * Called when a panel title is clicked.
+ *
+ * @param {SyntheticEvent} event - React's original SyntheticEvent.
+ * @param {object} data - All item props.
+ */
+ onTitleClick: PropTypes.func,
+
+ /** A shorthand for Accordion.Title. */
+ title: customPropTypes.itemShorthand,
+}
+
AccordionPanel.create = createShorthandFactory(AccordionPanel, null)
export default AccordionPanel
diff --git a/src/modules/Accordion/AccordionTitle.js b/src/modules/Accordion/AccordionTitle.js
index c0a1c63bc4..c324ddad23 100644
--- a/src/modules/Accordion/AccordionTitle.js
+++ b/src/modules/Accordion/AccordionTitle.js
@@ -17,37 +17,6 @@ import Icon from '../../elements/Icon'
* A title sub-component for Accordion component.
*/
export default class AccordionTitle extends Component {
- static propTypes = {
- /** An element type to render as (string or function). */
- as: PropTypes.elementType,
-
- /** Whether or not the title is in the open state. */
- active: PropTypes.bool,
-
- /** Primary content. */
- children: PropTypes.node,
-
- /** Additional classes. */
- className: PropTypes.string,
-
- /** Shorthand for primary content. */
- content: customPropTypes.contentShorthand,
-
- /** Shorthand for Icon. */
- icon: customPropTypes.itemShorthand,
-
- /** AccordionTitle index inside Accordion. */
- index: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
- /**
- * Called on click.
- *
- * @param {SyntheticEvent} event - React's original SyntheticEvent.
- * @param {object} data - All props.
- */
- onClick: PropTypes.func,
- }
-
handleClick = (e) => _.invoke(this.props, 'onClick', e, this.props)
render() {
@@ -75,4 +44,34 @@ export default class AccordionTitle extends Component {
}
}
+AccordionTitle.propTypes = {
+ /** An element type to render as (string or function). */
+ as: PropTypes.elementType,
+
+ /** Whether or not the title is in the open state. */
+ active: PropTypes.bool,
+
+ /** Primary content. */
+ children: PropTypes.node,
+
+ /** Additional classes. */
+ className: PropTypes.string,
+
+ /** Shorthand for primary content. */
+ content: customPropTypes.contentShorthand,
+
+ /** Shorthand for Icon. */
+ icon: customPropTypes.itemShorthand,
+
+ /** AccordionTitle index inside Accordion. */
+ index: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+ /**
+ * Called on click.
+ *
+ * @param {SyntheticEvent} event - React's original SyntheticEvent.
+ * @param {object} data - All props.
+ */
+ onClick: PropTypes.func,
+}
AccordionTitle.create = createShorthandFactory(AccordionTitle, (content) => ({ content }))
diff --git a/src/modules/Checkbox/Checkbox.js b/src/modules/Checkbox/Checkbox.js
index ddb68463a1..d2bf1b1b20 100644
--- a/src/modules/Checkbox/Checkbox.js
+++ b/src/modules/Checkbox/Checkbox.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types'
import React, { createRef } from 'react'
import {
- AutoControlledComponent as Component,
+ ModernAutoControlledComponent as Component,
createHTMLLabel,
customPropTypes,
getElementType,
@@ -24,100 +24,6 @@ const debug = makeDebugger('checkbox')
* @see Radio
*/
export default class Checkbox extends Component {
- static propTypes = {
- /** An element type to render as (string or function). */
- as: PropTypes.elementType,
-
- /** Whether or not checkbox is checked. */
- checked: PropTypes.bool,
-
- /** Additional classes. */
- className: PropTypes.string,
-
- /** The initial value of checked. */
- defaultChecked: PropTypes.bool,
-
- /** Whether or not checkbox is indeterminate. */
- defaultIndeterminate: PropTypes.bool,
-
- /** A checkbox can appear disabled and be unable to change states */
- disabled: PropTypes.bool,
-
- /** Removes padding for a label. Auto applied when there is no label. */
- fitted: PropTypes.bool,
-
- /** A unique identifier. */
- id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
- /** Whether or not checkbox is indeterminate. */
- indeterminate: PropTypes.bool,
-
- /** The text of the associated label element. */
- label: customPropTypes.itemShorthand,
-
- /** The HTML input name. */
- name: PropTypes.string,
-
- /**
- * Called when the user attempts to change the checked state.
- *
- * @param {SyntheticEvent} event - React's original SyntheticEvent.
- * @param {object} data - All props and proposed checked/indeterminate state.
- */
- onChange: PropTypes.func,
-
- /**
- * Called when the checkbox or label is clicked.
- *
- * @param {SyntheticEvent} event - React's original SyntheticEvent.
- * @param {object} data - All props and current checked/indeterminate state.
- */
- onClick: PropTypes.func,
-
- /**
- * Called when the user presses down on the mouse.
- *
- * @param {SyntheticEvent} event - React's original SyntheticEvent.
- * @param {object} data - All props and current checked/indeterminate state.
- */
- onMouseDown: PropTypes.func,
-
- /**
- * Called when the user releases the mouse.
- *
- * @param {SyntheticEvent} event - React's original SyntheticEvent.
- * @param {object} data - All props and current checked/indeterminate state.
- */
- onMouseUp: PropTypes.func,
-
- /** Format as a radio element. This means it is an exclusive option. */
- radio: customPropTypes.every([PropTypes.bool, customPropTypes.disallow(['slider', 'toggle'])]),
-
- /** A checkbox can be read-only and unable to change states. */
- readOnly: PropTypes.bool,
-
- /** Format to emphasize the current selection state. */
- slider: customPropTypes.every([PropTypes.bool, customPropTypes.disallow(['radio', 'toggle'])]),
-
- /** A checkbox can receive focus. */
- tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
- /** Format to show an on or off choice. */
- toggle: customPropTypes.every([PropTypes.bool, customPropTypes.disallow(['radio', 'slider'])]),
-
- /** HTML input type, either checkbox or radio. */
- type: PropTypes.oneOf(['checkbox', 'radio']),
-
- /** The HTML input value. */
- value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
- }
-
- static defaultProps = {
- type: 'checkbox',
- }
-
- static autoControlledProps = ['checked', 'indeterminate']
-
inputRef = createRef()
labelRef = createRef()
@@ -195,7 +101,7 @@ export default class Checkbox extends Component {
checked: !checked,
indeterminate: false,
})
- this.trySetState({ checked: !checked, indeterminate: false })
+ this.setState({ checked: !checked, indeterminate: false })
}
handleMouseDown = (e) => {
@@ -308,3 +214,97 @@ export default class Checkbox extends Component {
)
}
}
+
+Checkbox.propTypes = {
+ /** An element type to render as (string or function). */
+ as: PropTypes.elementType,
+
+ /** Whether or not checkbox is checked. */
+ checked: PropTypes.bool,
+
+ /** Additional classes. */
+ className: PropTypes.string,
+
+ /** The initial value of checked. */
+ defaultChecked: PropTypes.bool,
+
+ /** Whether or not checkbox is indeterminate. */
+ defaultIndeterminate: PropTypes.bool,
+
+ /** A checkbox can appear disabled and be unable to change states */
+ disabled: PropTypes.bool,
+
+ /** Removes padding for a label. Auto applied when there is no label. */
+ fitted: PropTypes.bool,
+
+ /** A unique identifier. */
+ id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+ /** Whether or not checkbox is indeterminate. */
+ indeterminate: PropTypes.bool,
+
+ /** The text of the associated label element. */
+ label: customPropTypes.itemShorthand,
+
+ /** The HTML input name. */
+ name: PropTypes.string,
+
+ /**
+ * Called when the user attempts to change the checked state.
+ *
+ * @param {SyntheticEvent} event - React's original SyntheticEvent.
+ * @param {object} data - All props and proposed checked/indeterminate state.
+ */
+ onChange: PropTypes.func,
+
+ /**
+ * Called when the checkbox or label is clicked.
+ *
+ * @param {SyntheticEvent} event - React's original SyntheticEvent.
+ * @param {object} data - All props and current checked/indeterminate state.
+ */
+ onClick: PropTypes.func,
+
+ /**
+ * Called when the user presses down on the mouse.
+ *
+ * @param {SyntheticEvent} event - React's original SyntheticEvent.
+ * @param {object} data - All props and current checked/indeterminate state.
+ */
+ onMouseDown: PropTypes.func,
+
+ /**
+ * Called when the user releases the mouse.
+ *
+ * @param {SyntheticEvent} event - React's original SyntheticEvent.
+ * @param {object} data - All props and current checked/indeterminate state.
+ */
+ onMouseUp: PropTypes.func,
+
+ /** Format as a radio element. This means it is an exclusive option. */
+ radio: customPropTypes.every([PropTypes.bool, customPropTypes.disallow(['slider', 'toggle'])]),
+
+ /** A checkbox can be read-only and unable to change states. */
+ readOnly: PropTypes.bool,
+
+ /** Format to emphasize the current selection state. */
+ slider: customPropTypes.every([PropTypes.bool, customPropTypes.disallow(['radio', 'toggle'])]),
+
+ /** A checkbox can receive focus. */
+ tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+ /** Format to show an on or off choice. */
+ toggle: customPropTypes.every([PropTypes.bool, customPropTypes.disallow(['radio', 'slider'])]),
+
+ /** HTML input type, either checkbox or radio. */
+ type: PropTypes.oneOf(['checkbox', 'radio']),
+
+ /** The HTML input value. */
+ value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+}
+
+Checkbox.defaultProps = {
+ type: 'checkbox',
+}
+
+Checkbox.autoControlledProps = ['checked', 'indeterminate']
diff --git a/src/modules/Dimmer/Dimmer.js b/src/modules/Dimmer/Dimmer.js
index 16cd20ffa0..9972452f74 100644
--- a/src/modules/Dimmer/Dimmer.js
+++ b/src/modules/Dimmer/Dimmer.js
@@ -10,17 +10,6 @@ import DimmerInner from './DimmerInner'
* A dimmer hides distractions to focus attention on particular content.
*/
export default class Dimmer extends Component {
- static propTypes = {
- /** An active dimmer will dim its parent container. */
- active: PropTypes.bool,
-
- /** A dimmer can be formatted to be fixed to the page. */
- page: PropTypes.bool,
- }
-
- static Dimmable = DimmerDimmable
- static Inner = DimmerInner
-
handlePortalMount = () => {
if (!isBrowser()) return
@@ -60,4 +49,15 @@ export default class Dimmer extends Component {
}
}
+Dimmer.propTypes = {
+ /** An active dimmer will dim its parent container. */
+ active: PropTypes.bool,
+
+ /** A dimmer can be formatted to be fixed to the page. */
+ page: PropTypes.bool,
+}
+
+Dimmer.Dimmable = DimmerDimmable
+Dimmer.Inner = DimmerInner
+
Dimmer.create = createShorthandFactory(Dimmer, (value) => ({ content: value }))
diff --git a/src/modules/Dimmer/DimmerInner.d.ts b/src/modules/Dimmer/DimmerInner.d.ts
index a9ccf29e3a..3a667cf5e1 100644
--- a/src/modules/Dimmer/DimmerInner.d.ts
+++ b/src/modules/Dimmer/DimmerInner.d.ts
@@ -53,6 +53,6 @@ export interface StrictDimmerInnerProps {
verticalAlign?: 'bottom' | 'top'
}
-declare class DimmerInner extends React.Component {}
+declare class DimmerInner extends React.Component {}
export default DimmerInner
diff --git a/src/modules/Dimmer/DimmerInner.js b/src/modules/Dimmer/DimmerInner.js
index 0377ee9502..81cdd157fb 100644
--- a/src/modules/Dimmer/DimmerInner.js
+++ b/src/modules/Dimmer/DimmerInner.js
@@ -18,54 +18,6 @@ import {
* An inner element for a Dimmer.
*/
export default class DimmerInner extends Component {
- static propTypes = {
- /** An element type to render as (string or function). */
- as: PropTypes.elementType,
-
- /** An active dimmer will dim its parent container. */
- active: PropTypes.bool,
-
- /** Primary content. */
- children: PropTypes.node,
-
- /** Additional classes. */
- className: PropTypes.string,
-
- /** Shorthand for primary content. */
- content: customPropTypes.contentShorthand,
-
- /** A disabled dimmer cannot be activated */
- disabled: PropTypes.bool,
-
- /**
- * Called on click.
- *
- * @param {SyntheticEvent} event - React's original SyntheticEvent.
- * @param {object} data - All props.
- */
- onClick: PropTypes.func,
-
- /**
- * Handles click outside Dimmer's content, but inside Dimmer area.
- *
- * @param {SyntheticEvent} event - React's original SyntheticEvent.
- * @param {object} data - All props.
- */
- onClickOutside: PropTypes.func,
-
- /** A dimmer can be formatted to have its colors inverted. */
- inverted: PropTypes.bool,
-
- /** A dimmer can be formatted to be fixed to the page. */
- page: PropTypes.bool,
-
- /** A dimmer can be controlled with simple prop. */
- simple: PropTypes.bool,
-
- /** A dimmer can have its content top or bottom aligned. */
- verticalAlign: PropTypes.oneOf(['bottom', 'top']),
- }
-
containerRef = createRef()
contentRef = createRef()
@@ -87,7 +39,7 @@ export default class DimmerInner extends Component {
_.invoke(this.props, 'onClick', e, this.props)
- if (contentRef && (contentRef !== e.target && doesNodeContainClick(contentRef, e))) {
+ if (contentRef && contentRef !== e.target && doesNodeContainClick(contentRef, e)) {
return
}
@@ -147,3 +99,51 @@ export default class DimmerInner extends Component {
)
}
}
+
+DimmerInner.propTypes = {
+ /** An element type to render as (string or function). */
+ as: PropTypes.elementType,
+
+ /** An active dimmer will dim its parent container. */
+ active: PropTypes.bool,
+
+ /** Primary content. */
+ children: PropTypes.node,
+
+ /** Additional classes. */
+ className: PropTypes.string,
+
+ /** Shorthand for primary content. */
+ content: customPropTypes.contentShorthand,
+
+ /** A disabled dimmer cannot be activated */
+ disabled: PropTypes.bool,
+
+ /**
+ * Called on click.
+ *
+ * @param {SyntheticEvent} event - React's original SyntheticEvent.
+ * @param {object} data - All props.
+ */
+ onClick: PropTypes.func,
+
+ /**
+ * Handles click outside Dimmer's content, but inside Dimmer area.
+ *
+ * @param {SyntheticEvent} event - React's original SyntheticEvent.
+ * @param {object} data - All props.
+ */
+ onClickOutside: PropTypes.func,
+
+ /** A dimmer can be formatted to have its colors inverted. */
+ inverted: PropTypes.bool,
+
+ /** A dimmer can be formatted to be fixed to the page. */
+ page: PropTypes.bool,
+
+ /** A dimmer can be controlled with simple prop. */
+ simple: PropTypes.bool,
+
+ /** A dimmer can have its content top or bottom aligned. */
+ verticalAlign: PropTypes.oneOf(['bottom', 'top']),
+}
diff --git a/src/modules/Dropdown/Dropdown.d.ts b/src/modules/Dropdown/Dropdown.d.ts
index 35bf0f1edc..a4b8529351 100644
--- a/src/modules/Dropdown/Dropdown.d.ts
+++ b/src/modules/Dropdown/Dropdown.d.ts
@@ -3,7 +3,7 @@ import * as React from 'react'
import { LabelProps } from '../../elements/Label'
import DropdownDivider from './DropdownDivider'
import DropdownHeader from './DropdownHeader'
-import { default as DropdownItem, DropdownItemProps } from './DropdownItem'
+import DropdownItem, { DropdownItemProps } from './DropdownItem'
import DropdownMenu from './DropdownMenu'
import DropdownSearchInput from './DropdownSearchInput'
@@ -74,7 +74,7 @@ export interface StrictDropdownProps {
defaultUpward?: boolean
/** Initial value or value array if multiple. */
- defaultValue?: string | number | boolean | (number | string | boolean)[]
+ defaultValue?: string | number | boolean | number | string | boolean[]
/** A dropdown menu can open to the left or to the right. */
direction?: 'left' | 'right'
@@ -246,7 +246,7 @@ export interface StrictDropdownProps {
* A selection dropdown can allow a user to search through a large list of choices.
* Pass a function here to replace the default search.
*/
- search?: boolean | ((options: DropdownItemProps[], value: string) => DropdownItemProps[])
+ search?: (options: DropdownItemProps[], value: string) => DropdownItemProps[] | boolean
/** A shorthand for a search input. */
searchInput?: any
@@ -279,7 +279,7 @@ export interface StrictDropdownProps {
trigger?: React.ReactNode
/** Current value or value array if multiple. Creates a controlled component. */
- value?: boolean | number | string | (boolean | number | string)[]
+ value?: boolean | number | string | boolean | number | string[]
/** Controls whether the dropdown will open upward. */
upward?: boolean
diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js
index 5b460bb4eb..0e14f6197f 100644
--- a/src/modules/Dropdown/Dropdown.js
+++ b/src/modules/Dropdown/Dropdown.js
@@ -8,7 +8,7 @@ import React, { Children, cloneElement, createRef } from 'react'
import shallowEqual from 'shallowequal'
import {
- AutoControlledComponent as Component,
+ ModernAutoControlledComponent as Component,
childrenUtils,
customPropTypes,
doesNodeContainClick,
@@ -21,15 +21,43 @@ import {
} from '../../lib'
import Icon from '../../elements/Icon'
import Label from '../../elements/Label'
+import Flag from '../../elements/Flag'
+import Image from '../../elements/Image'
import DropdownDivider from './DropdownDivider'
import DropdownItem from './DropdownItem'
import DropdownHeader from './DropdownHeader'
import DropdownMenu from './DropdownMenu'
import DropdownSearchInput from './DropdownSearchInput'
+import DropdownText from './DropdownText'
+import getMenuOptions from './utils/getMenuOptions'
+import getSelectedIndex from './utils/getSelectedIndex'
const debug = makeDebugger('dropdown')
const getKeyOrValue = (key, value) => (_.isNil(key) ? value : key)
+const getKeyAndValues = (options) =>
+ options ? options.map((option) => _.pick(option, ['key', 'value'])) : options
+
+function renderItemContent(item) {
+ const { flag, image, text } = item
+
+ // TODO: remove this in v2
+ // This maintains compatibility with Shorthand API in v1 as this might be called in "Label.create()"
+ if (React.isValidElement(text) || _.isFunction(text)) {
+ return text
+ }
+
+ return {
+ content: (
+ <>
+ {Flag.create(flag)}
+ {Image.create(image)}
+
+ {text}
+
+ ),
+ }
+}
/**
* A dropdown allows a user to select a value from a series of options.
@@ -38,351 +66,6 @@ const getKeyOrValue = (key, value) => (_.isNil(key) ? value : key)
* @see Menu
*/
export default class Dropdown extends Component {
- static propTypes = {
- /** An element type to render as (string or function). */
- as: PropTypes.elementType,
-
- /** Label prefixed to an option added by a user. */
- additionLabel: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
-
- /** Position of the `Add: ...` option in the dropdown list ('top' or 'bottom'). */
- additionPosition: PropTypes.oneOf(['top', 'bottom']),
-
- /**
- * Allow user additions to the list of options (boolean).
- * Requires the use of `selection`, `options` and `search`.
- */
- allowAdditions: customPropTypes.every([
- customPropTypes.demand(['options', 'selection', 'search']),
- PropTypes.bool,
- ]),
-
- /** A Dropdown can reduce its complexity. */
- basic: PropTypes.bool,
-
- /** Format the Dropdown to appear as a button. */
- button: PropTypes.bool,
-
- /** Primary content. */
- children: customPropTypes.every([
- customPropTypes.disallow(['options', 'selection']),
- customPropTypes.givenProps(
- { children: PropTypes.any.isRequired },
- PropTypes.element.isRequired,
- ),
- ]),
-
- /** Additional classes. */
- className: PropTypes.string,
-
- /** Using the clearable setting will let users remove their selection from a dropdown. */
- clearable: PropTypes.bool,
-
- /** Whether or not the menu should close when the dropdown is blurred. */
- closeOnBlur: PropTypes.bool,
-
- /** Whether or not the dropdown should close when the escape key is pressed. */
- closeOnEscape: PropTypes.bool,
-
- /**
- * Whether or not the menu should close when a value is selected from the dropdown.
- * By default, multiple selection dropdowns will remain open on change, while single
- * selection dropdowns will close on change.
- */
- closeOnChange: PropTypes.bool,
-
- /** A compact dropdown has no minimum width. */
- compact: PropTypes.bool,
-
- /** Whether or not the dropdown should strip diacritics in options and input search */
- deburr: PropTypes.bool,
-
- /** Initial value of open. */
- defaultOpen: PropTypes.bool,
-
- /** Initial value of searchQuery. */
- defaultSearchQuery: PropTypes.string,
-
- /** Currently selected label in multi-select. */
- defaultSelectedLabel: customPropTypes.every([
- customPropTypes.demand(['multiple']),
- PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
- ]),
-
- /** Initial value of upward. */
- defaultUpward: PropTypes.bool,
-
- /** Initial value or value array if multiple. */
- defaultValue: PropTypes.oneOfType([
- PropTypes.number,
- PropTypes.string,
- PropTypes.bool,
- PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool])),
- ]),
-
- /** A dropdown menu can open to the left or to the right. */
- direction: PropTypes.oneOf(['left', 'right']),
-
- /** A disabled dropdown menu or item does not allow user interaction. */
- disabled: PropTypes.bool,
-
- /** An errored dropdown can alert a user to a problem. */
- error: PropTypes.bool,
-
- /** A dropdown menu can contain floated content. */
- floating: PropTypes.bool,
-
- /** A dropdown can take the full width of its parent */
- fluid: PropTypes.bool,
-
- /** A dropdown menu can contain a header. */
- header: PropTypes.node,
-
- /** Shorthand for Icon. */
- icon: PropTypes.oneOfType([PropTypes.node, PropTypes.object]),
-
- /** A dropdown can be formatted to appear inline in other content. */
- inline: PropTypes.bool,
-
- /** A dropdown can be formatted as a Menu item. */
- item: PropTypes.bool,
-
- /** 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,
-
- /** The minimum characters for a search to begin showing results. */
- minCharacters: PropTypes.number,
-
- /** A selection dropdown can allow multiple selections. */
- multiple: PropTypes.bool,
-
- /** Message to display when there are no results. */
- noResultsMessage: PropTypes.node,
-
- /**
- * Called when a user adds a new item. Use this to update the options list.
- *
- * @param {SyntheticEvent} event - React's original SyntheticEvent.
- * @param {object} data - All props and the new item's value.
- */
- onAddItem: PropTypes.func,
-
- /**
- * Called on blur.
- *
- * @param {SyntheticEvent} event - React's original SyntheticEvent.
- * @param {object} data - All props.
- */
- onBlur: PropTypes.func,
-
- /**
- * Called when the user attempts to change the value.
- *
- * @param {SyntheticEvent} event - React's original SyntheticEvent.
- * @param {object} data - All props and proposed value.
- */
- onChange: PropTypes.func,
-
- /**
- * Called on click.
- *
- * @param {SyntheticEvent} event - React's original SyntheticEvent.
- * @param {object} data - All props.
- */
- onClick: PropTypes.func,
-
- /**
- * Called when a close event happens.
- *
- * @param {SyntheticEvent} event - React's original SyntheticEvent.
- * @param {object} data - All props.
- */
- onClose: PropTypes.func,
-
- /**
- * Called on focus.
- *
- * @param {SyntheticEvent} event - React's original SyntheticEvent.
- * @param {object} data - All props.
- */
- onFocus: PropTypes.func,
-
- /**
- * Called when a multi-select label is clicked.
- *
- * @param {SyntheticEvent} event - React's original SyntheticEvent.
- * @param {object} data - All label props.
- */
- onLabelClick: PropTypes.func,
-
- /**
- * Called on mousedown.
- *
- * @param {SyntheticEvent} event - React's original SyntheticEvent.
- * @param {object} data - All props.
- */
- onMouseDown: PropTypes.func,
-
- /**
- * Called when an open event happens.
- *
- * @param {SyntheticEvent} event - React's original SyntheticEvent.
- * @param {object} data - All props.
- */
- onOpen: PropTypes.func,
-
- /**
- * Called on search input change.
- *
- * @param {SyntheticEvent} event - React's original SyntheticEvent.
- * @param {object} data - All props, includes current value of searchQuery.
- */
- onSearchChange: PropTypes.func,
-
- /** Controls whether or not the dropdown menu is displayed. */
- open: PropTypes.bool,
-
- /** Whether or not the menu should open when the dropdown is focused. */
- openOnFocus: PropTypes.bool,
-
- /** Array of Dropdown.Item props e.g. `{ text: '', value: '' }` */
- options: customPropTypes.every([
- customPropTypes.disallow(['children']),
- PropTypes.arrayOf(PropTypes.shape(DropdownItem.propTypes)),
- ]),
-
- /** Placeholder text. */
- placeholder: PropTypes.string,
-
- /** A dropdown can be formatted so that its menu is pointing. */
- pointing: PropTypes.oneOfType([
- PropTypes.bool,
- PropTypes.oneOf([
- 'left',
- 'right',
- 'top',
- 'top left',
- 'top right',
- 'bottom',
- 'bottom left',
- 'bottom right',
- ]),
- ]),
-
- /**
- * Mapped over the active items and returns shorthand for the active item Labels.
- * Only applies to `multiple` Dropdowns.
- *
- * @param {object} item - A currently active dropdown item.
- * @param {number} index - The current index.
- * @param {object} defaultLabelProps - The default props for an active item Label.
- * @returns {*} Shorthand for a Label.
- */
- renderLabel: PropTypes.func,
-
- /** A dropdown can have its menu scroll. */
- scrolling: PropTypes.bool,
-
- /**
- * A selection dropdown can allow a user to search through a large list of choices.
- * Pass a function here to replace the default search.
- */
- search: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
-
- /** A shorthand for a search input. */
- searchInput: PropTypes.oneOfType([PropTypes.array, PropTypes.node, PropTypes.object]),
-
- /** Current value of searchQuery. Creates a controlled component. */
- searchQuery: PropTypes.string,
-
- // TODO 'searchInMenu' or 'search='in menu' or ??? How to handle this markup and functionality?
-
- /** Define whether the highlighted item should be selected on blur. */
- selectOnBlur: PropTypes.bool,
-
- /**
- * Whether or not to change the value when navigating the menu using arrow keys.
- * Setting to false will require enter or left click to confirm a choice.
- */
- selectOnNavigation: PropTypes.bool,
-
- /** Currently selected label in multi-select. */
- selectedLabel: customPropTypes.every([
- customPropTypes.demand(['multiple']),
- PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
- ]),
-
- /** A dropdown can be used to select between choices in a form. */
- selection: customPropTypes.every([
- customPropTypes.disallow(['children']),
- customPropTypes.demand(['options']),
- PropTypes.bool,
- ]),
-
- /** A simple dropdown can open without Javascript. */
- simple: PropTypes.bool,
-
- /** A dropdown can receive focus. */
- tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
- /** The text displayed in the dropdown, usually for the active item. */
- text: PropTypes.string,
-
- /** Custom element to trigger the menu to become visible. Takes place of 'text'. */
- trigger: customPropTypes.every([
- customPropTypes.disallow(['selection', 'text']),
- PropTypes.node,
- ]),
-
- /** Current value or value array if multiple. Creates a controlled component. */
- value: PropTypes.oneOfType([
- PropTypes.bool,
- PropTypes.string,
- PropTypes.number,
- PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.number])),
- ]),
-
- /** Controls whether the dropdown will open upward. */
- upward: PropTypes.bool,
-
- /**
- * A dropdown will go to the last element when ArrowUp is pressed on the first,
- * or go to the first when ArrowDown is pressed on the last( aka infinite selection )
- */
- wrapSelection: PropTypes.bool,
- }
-
- static defaultProps = {
- additionLabel: 'Add ',
- additionPosition: 'top',
- closeOnBlur: true,
- closeOnEscape: true,
- deburr: false,
- icon: 'dropdown',
- minCharacters: 1,
- noResultsMessage: 'No results found.',
- openOnFocus: true,
- renderLabel: ({ text }) => text,
- searchInput: 'text',
- selectOnBlur: true,
- selectOnNavigation: true,
- wrapSelection: true,
- }
-
- static autoControlledProps = ['open', 'searchQuery', 'selectedLabel', 'value', 'upward']
-
- static Divider = DropdownDivider
- static Header = DropdownHeader
- static Item = DropdownItem
- static Menu = DropdownMenu
- static SearchInput = DropdownSearchInput
-
searchRef = createRef()
sizerRef = createRef()
ref = createRef()
@@ -391,37 +74,69 @@ export default class Dropdown extends Component {
return { focus: false, searchQuery: '' }
}
- // eslint-disable-next-line camelcase
- UNSAFE_componentWillMount() {
- debug('componentWillMount()')
- const { open, value } = this.state
+ static getAutoControlledStateFromProps(nextProps, computedState, prevState) {
+ // These values are stored only for a comparison on next getAutoControlledStateFromProps()
+ const derivedState = { __options: nextProps.options, __value: computedState.value }
+
+ // The selected index is only dependent:
+ const shouldComputeSelectedIndex =
+ // On value change
+ !shallowEqual(prevState.__value, computedState.value) ||
+ // On option keys/values, we only check those properties to avoid recursive performance impacts.
+ // https://github.com/Semantic-Org/Semantic-UI-React/issues/3000
+ !_.isEqual(getKeyAndValues(nextProps.options), getKeyAndValues(prevState.__options))
+
+ if (shouldComputeSelectedIndex) {
+ derivedState.selectedIndex = getSelectedIndex({
+ additionLabel: nextProps.additionLabel,
+ additionPosition: nextProps.additionPosition,
+ allowAdditions: nextProps.allowAdditions,
+ deburr: nextProps.deburr,
+ multiple: nextProps.multiple,
+ search: nextProps.search,
+ selectedIndex: computedState.selectedIndex,
+
+ value: computedState.value,
+ options: nextProps.options,
+ searchQuery: computedState.searchQuery,
+ })
+ }
- this.setValue(value)
- this.setSelectedIndex(value)
+ return derivedState
+ }
+
+ componentDidMount() {
+ debug('componentDidMount()')
+ const { open } = this.state
if (open) {
- this.open()
+ this.open(null, false)
}
}
- // eslint-disable-next-line camelcase
- UNSAFE_componentWillReceiveProps(nextProps) {
- super.UNSAFE_componentWillReceiveProps(nextProps)
- debug('componentWillReceiveProps()')
- debug('to props:', objectDiff(this.props, nextProps))
+ shouldComponentUpdate(nextProps, nextState) {
+ return !shallowEqual(nextProps, this.props) || !shallowEqual(nextState, this.state)
+ }
+
+ componentDidUpdate(prevProps, prevState) {
+ // eslint-disable-line complexity
+ debug('componentDidUpdate()')
+ debug('to state:', objectDiff(prevState, this.state))
+
+ const { closeOnBlur, minCharacters, openOnFocus, search } = this.props
/* eslint-disable no-console */
if (process.env.NODE_ENV !== 'production') {
// in development, validate value type matches dropdown type
- const isNextValueArray = Array.isArray(nextProps.value)
- const hasValue = _.has(nextProps, 'value')
+ const isNextValueArray = Array.isArray(this.props.value)
+ const hasValue = _.has(this.props, 'value')
- if (hasValue && nextProps.multiple && !isNextValueArray) {
+ if (hasValue && this.props.multiple && !isNextValueArray) {
console.error(
'Dropdown `value` must be an array when `multiple` is set.' +
- ` Received type: \`${Object.prototype.toString.call(nextProps.value)}\`.`,
+ ` Received type: \`${Object.prototype.toString.call(this.props.value)}\`.`,
)
- } else if (hasValue && !nextProps.multiple && isNextValueArray) {
+ } else if (hasValue && !this.props.multiple && isNextValueArray) {
console.error(
'Dropdown `value` must not be an array when `multiple` is not set.' +
' Either set `multiple={true}` or use a string or number value.',
@@ -430,32 +145,6 @@ export default class Dropdown extends Component {
}
/* eslint-enable no-console */
- if (!shallowEqual(nextProps.value, this.props.value)) {
- debug('value changed, setting', nextProps.value)
- this.setValue(nextProps.value)
- this.setSelectedIndex(nextProps.value)
- }
-
- // The selected index is only dependent on option keys/values.
- // We only check those properties to avoid recursive performance impacts.
- // https://github.com/Semantic-Org/Semantic-UI-React/issues/3000
- if (
- !_.isEqual(this.getKeyAndValues(nextProps.options), this.getKeyAndValues(this.props.options))
- ) {
- this.setSelectedIndex(undefined, nextProps.options)
- }
- }
-
- shouldComponentUpdate(nextProps, nextState) {
- return !shallowEqual(nextProps, this.props) || !shallowEqual(nextState, this.state)
- }
-
- componentDidUpdate(prevProps, prevState) {
- // eslint-disable-line complexity
- debug('componentDidUpdate()')
- debug('to state:', objectDiff(prevState, this.state))
- const { closeOnBlur, minCharacters, openOnFocus, search } = this.props
-
// focused / blurred
if (!prevState.focus && this.state.focus) {
debug('dropdown focused')
@@ -482,6 +171,10 @@ export default class Dropdown extends Component {
} else if (prevState.open && !this.state.open) {
debug('dropdown closed')
}
+
+ if (prevState.selectedIndex !== this.state.selectedIndex) {
+ this.scrollSelectedItemIntoView()
+ }
}
// ----------------------------------------
@@ -499,7 +192,9 @@ export default class Dropdown extends Component {
const { closeOnChange, multiple } = this.props
const shouldClose = _.isUndefined(closeOnChange) ? !multiple : closeOnChange
- if (shouldClose) this.close(e, _.noop)
+ if (shouldClose) {
+ this.close(e, _.noop)
+ }
}
closeOnEscape = (e) => {
@@ -515,16 +210,30 @@ export default class Dropdown extends Component {
debug('moveSelectionOnKeyDown()', keyboardKey.getKey(e))
const { multiple, selectOnNavigation } = this.props
+ const { open } = this.state
+
+ if (!open) {
+ return
+ }
+
const moves = {
[keyboardKey.ArrowDown]: 1,
[keyboardKey.ArrowUp]: -1,
}
const move = moves[keyboardKey.getCode(e)]
- if (move === undefined) return
+ if (move === undefined) {
+ return
+ }
+
e.preventDefault()
- this.moveSelectionBy(move)
- if (!multiple && selectOnNavigation) this.makeSelectedItemActive(e)
+ const nextIndex = this.getSelectedIndexAfterMove(move)
+
+ if (!multiple && selectOnNavigation) {
+ this.makeSelectedItemActive(e, nextIndex)
+ }
+
+ this.setState({ selectedIndex: nextIndex })
}
openOnSpace = (e) => {
@@ -538,35 +247,38 @@ export default class Dropdown extends Component {
openOnArrow = (e) => {
debug('openOnArrow()')
+ const { focus, open } = this.state
- const code = keyboardKey.getCode(e)
- if (!_.includes([keyboardKey.ArrowDown, keyboardKey.ArrowUp], code)) return
- if (this.state.open) return
-
- e.preventDefault()
+ if (focus && !open) {
+ const code = keyboardKey.getCode(e)
- this.open(e)
+ if (code === keyboardKey.ArrowDown || code === keyboardKey.ArrowUp) {
+ e.preventDefault()
+ this.open(e)
+ }
+ }
}
- makeSelectedItemActive = (e) => {
+ makeSelectedItemActive = (e, selectedIndex) => {
const { open, value } = this.state
const { multiple } = this.props
- const item = this.getSelectedItem()
+ const item = this.getSelectedItem(selectedIndex)
const selectedValue = _.get(item, 'value')
// prevent selecting null if there was no selected item value
// prevent selecting duplicate items when the dropdown is closed
- if (_.isNil(selectedValue) || !open) return
+ if (_.isNil(selectedValue) || !open) {
+ return value
+ }
// state value may be undefined
- const newValue = multiple ? _.union(this.state.value, [selectedValue]) : selectedValue
+ const newValue = multiple ? _.union(value, [selectedValue]) : selectedValue
const valueHasChanged = multiple ? !!_.difference(newValue, value).length : newValue !== value
if (valueHasChanged) {
// notify the onChange prop that the user is trying to change value
- this.setValue(newValue)
- this.setSelectedIndex(newValue)
+ this.setState({ value: newValue })
this.handleChange(e, newValue)
// Heads up! This event handler should be called after `onChange`
@@ -575,27 +287,74 @@ export default class Dropdown extends Component {
_.invoke(this.props, 'onAddItem', e, { ...this.props, value: selectedValue })
}
}
+
+ return value
}
selectItemOnEnter = (e) => {
debug('selectItemOnEnter()', keyboardKey.getKey(e))
const { search } = this.props
+ const { open, selectedIndex } = this.state
+
+ if (!open) {
+ return
+ }
const shouldSelect =
keyboardKey.getCode(e) === keyboardKey.Enter ||
// https://github.com/Semantic-Org/Semantic-UI-React/pull/3766
(!search && keyboardKey.getCode(e) === keyboardKey.Spacebar)
- if (!shouldSelect) return
+ if (!shouldSelect) {
+ return
+ }
+
e.preventDefault()
- const optionSize = _.size(this.getMenuOptions())
- if (search && optionSize === 0) return
+ const optionSize = _.size(
+ getMenuOptions({
+ value: this.state.value,
+ options: this.props.options,
+ searchQuery: this.state.searchQuery,
+
+ additionLabel: this.props.additionLabel,
+ additionPosition: this.props.additionPosition,
+ allowAdditions: this.props.allowAdditions,
+ deburr: this.props.deburr,
+ multiple: this.props.multiple,
+ search: this.props.search,
+ }),
+ )
+
+ if (search && optionSize === 0) {
+ return
+ }
+
+ const nextValue = this.makeSelectedItemActive(e, selectedIndex)
+
+ // This is required as selected value may be the same
+ this.setState({
+ selectedIndex: getSelectedIndex({
+ additionLabel: this.props.additionLabel,
+ additionPosition: this.props.additionPosition,
+ allowAdditions: this.props.allowAdditions,
+ deburr: this.props.deburr,
+ multiple: this.props.multiple,
+ search: this.props.search,
+ selectedIndex,
+
+ value: nextValue,
+ options: this.props.options,
+ searchQuery: '',
+ }),
+ })
- this.makeSelectedItemActive(e)
this.closeOnChange(e)
this.clearSearchQuery()
- if (search) _.invoke(this.searchRef.current, 'focus')
+
+ if (search) {
+ _.invoke(this.searchRef.current, 'focus')
+ }
}
removeItemOnBackspace = (e) => {
@@ -611,8 +370,7 @@ export default class Dropdown extends Component {
// remove most recent value
const newValue = _.dropRight(value)
- this.setValue(newValue)
- this.setSelectedIndex(newValue)
+ this.setState({ value: newValue })
this.handleChange(e, newValue)
}
@@ -694,9 +452,14 @@ export default class Dropdown extends Component {
// prevent toggle() in handleClick()
e.stopPropagation()
+
// prevent closeOnDocumentClick() if multiple or item is disabled
- if (multiple || item.disabled) e.nativeEvent.stopImmediatePropagation()
- if (item.disabled) return
+ if (multiple || item.disabled) {
+ e.nativeEvent.stopImmediatePropagation()
+ }
+ if (item.disabled) {
+ return
+ }
const isAdditionItem = item['data-additional']
const newValue = multiple ? _.union(this.state.value, [value]) : value
@@ -706,13 +469,11 @@ export default class Dropdown extends Component {
// notify the onChange prop that the user is trying to change value
if (valueHasChanged) {
- this.setValue(newValue)
- this.setSelectedIndex(value)
-
+ this.setState({ value: newValue })
this.handleChange(e, newValue)
}
- this.clearSearchQuery(value)
+ this.clearSearchQuery()
if (search) {
_.invoke(this.searchRef.current, 'focus')
@@ -724,7 +485,9 @@ export default class Dropdown extends Component {
// Heads up! This event handler should be called after `onChange`
// Notify the onAddItem prop if this is a new value
- if (isAdditionItem) _.invoke(this.props, 'onAddItem', e, { ...this.props, value })
+ if (isAdditionItem) {
+ _.invoke(this.props, 'onAddItem', e, { ...this.props, value })
+ }
}
handleFocus = (e) => {
@@ -752,7 +515,7 @@ export default class Dropdown extends Component {
_.invoke(this.props, 'onBlur', e, this.props)
if (selectOnBlur && !multiple) {
- this.makeSelectedItemActive(e)
+ this.makeSelectedItemActive(e, this.state.selectedIndex)
if (closeOnBlur) this.close()
}
@@ -772,7 +535,7 @@ export default class Dropdown extends Component {
const newQuery = value
_.invoke(this.props, 'onSearchChange', e, { ...this.props, searchQuery: newQuery })
- this.trySetState({ searchQuery: newQuery, selectedIndex: 0 })
+ this.setState({ searchQuery: newQuery, selectedIndex: 0 })
// open search dropdown on search query
if (!open && newQuery.length >= minCharacters) {
@@ -783,104 +546,41 @@ export default class Dropdown extends Component {
if (open && minCharacters !== 1 && newQuery.length < minCharacters) this.close()
}
+ handleKeyDown = (e) => {
+ this.moveSelectionOnKeyDown(e)
+ this.openOnArrow(e)
+ this.selectItemOnEnter(e)
+
+ _.invoke(this.props, 'onKeyDown', e)
+ }
+
// ----------------------------------------
// Getters
// ----------------------------------------
- getKeyAndValues = (options) =>
- options ? options.map((option) => _.pick(option, ['key', 'value'])) : options
-
- // There are times when we need to calculate the options based on a value
- // that hasn't yet been persisted to state.
- getMenuOptions = (
- value = this.state.value,
- options = this.props.options,
- searchQuery = this.state.searchQuery,
- ) => {
- const { additionLabel, additionPosition, allowAdditions, deburr, multiple, search } = this.props
-
- let filteredOptions = options
-
- // filter out active options
- if (multiple) {
- filteredOptions = _.filter(filteredOptions, (opt) => !_.includes(value, opt.value))
- }
-
- // filter by search query
- if (search && searchQuery) {
- if (_.isFunction(search)) {
- filteredOptions = search(filteredOptions, searchQuery)
- } else {
- // remove diacritics on search input and options, if deburr prop is set
- const strippedQuery = deburr ? _.deburr(searchQuery) : searchQuery
-
- const re = new RegExp(_.escapeRegExp(strippedQuery), 'i')
-
- filteredOptions = _.filter(filteredOptions, (opt) =>
- re.test(deburr ? _.deburr(opt.text) : opt.text),
- )
- }
- }
-
- // insert the "add" item
- if (
- allowAdditions &&
- search &&
- searchQuery &&
- !_.some(filteredOptions, { text: searchQuery })
- ) {
- const additionLabelElement = React.isValidElement(additionLabel)
- ? React.cloneElement(additionLabel, { key: 'addition-label' })
- : additionLabel || ''
-
- const addItem = {
- key: 'addition',
- // by using an array, we can pass multiple elements, but when doing so
- // we must specify a `key` for React to know which one is which
- text: [additionLabelElement, {searchQuery}],
- value: searchQuery,
- className: 'addition',
- 'data-additional': true,
- }
- if (additionPosition === 'top') filteredOptions.unshift(addItem)
- else filteredOptions.push(addItem)
- }
-
- return filteredOptions
- }
-
- getSelectedItem = () => {
- const { selectedIndex } = this.state
- const options = this.getMenuOptions()
+ getSelectedItem = (selectedIndex) => {
+ const options = getMenuOptions({
+ value: this.state.value,
+ options: this.props.options,
+ searchQuery: this.state.searchQuery,
+
+ additionLabel: this.props.additionLabel,
+ additionPosition: this.props.additionPosition,
+ allowAdditions: this.props.allowAdditions,
+ deburr: this.props.deburr,
+ multiple: this.props.multiple,
+ search: this.props.search,
+ })
return _.get(options, `[${selectedIndex}]`)
}
- getEnabledIndices = (givenOptions) => {
- const options = givenOptions || this.getMenuOptions()
-
- return _.reduce(
- options,
- (memo, item, index) => {
- if (!item.disabled) memo.push(index)
- return memo
- },
- [],
- )
- }
-
getItemByValue = (value) => {
const { options } = this.props
return _.find(options, { value })
}
- getMenuItemIndexByValue = (value, givenOptions) => {
- const options = givenOptions || this.getMenuOptions()
-
- return _.findIndex(options, ['value', value])
- }
-
getDropdownAriaOptions = () => {
const { loading, disabled, search, multiple } = this.props
const { open } = this.state
@@ -911,62 +611,13 @@ export default class Dropdown extends Component {
// Setters
// ----------------------------------------
- clearSearchQuery = (value) => {
+ clearSearchQuery = () => {
debug('clearSearchQuery()')
const { searchQuery } = this.state
if (searchQuery === undefined || searchQuery === '') return
- this.trySetState({ searchQuery: '' })
- this.setSelectedIndex(value, undefined, '')
- }
-
- setValue = (value) => {
- debug('setValue()', value)
- this.trySetState({ value })
- }
-
- setSelectedIndex = (
- value = this.state.value,
- optionsProps = this.props.options,
- searchQuery = this.state.searchQuery,
- ) => {
- const { multiple } = this.props
- const { selectedIndex } = this.state
- const options = this.getMenuOptions(value, optionsProps, searchQuery)
- const enabledIndicies = this.getEnabledIndices(options)
-
- let newSelectedIndex
-
- // update the selected index
- if (!selectedIndex || selectedIndex < 0) {
- const firstIndex = enabledIndicies[0]
-
- // Select the currently active item, if none, use the first item.
- // Multiple selects remove active items from the list,
- // their initial selected index should be 0.
- newSelectedIndex = multiple
- ? firstIndex
- : this.getMenuItemIndexByValue(value, options) || enabledIndicies[0]
- } else if (multiple) {
- // multiple selects remove options from the menu as they are made active
- // keep the selected index within range of the remaining items
- if (selectedIndex >= options.length - 1) {
- newSelectedIndex = enabledIndicies[enabledIndicies.length - 1]
- }
- } else {
- const activeIndex = this.getMenuItemIndexByValue(value, options)
-
- // regular selects can only have one active item
- // set the selected index to the currently active item
- newSelectedIndex = _.includes(enabledIndicies, activeIndex) ? activeIndex : undefined
- }
-
- if (!newSelectedIndex || newSelectedIndex < 0) {
- newSelectedIndex = enabledIndicies[0]
- }
-
- this.setState({ selectedIndex: newSelectedIndex })
+ this.setState({ searchQuery: '' })
}
handleLabelClick = (e, labelProps) => {
@@ -989,16 +640,26 @@ export default class Dropdown extends Component {
debug('remove value:', labelProps.value)
debug('new value:', newValue)
- this.setValue(newValue)
- this.setSelectedIndex(newValue)
+ this.setState({ value: newValue })
this.handleChange(e, newValue)
}
- moveSelectionBy = (offset, startIndex = this.state.selectedIndex) => {
+ getSelectedIndexAfterMove = (offset, startIndex = this.state.selectedIndex) => {
debug('moveSelectionBy()')
debug(`offset: ${offset}`)
- const options = this.getMenuOptions()
+ const options = getMenuOptions({
+ value: this.state.value,
+ options: this.props.options,
+ searchQuery: this.state.searchQuery,
+
+ additionLabel: this.props.additionLabel,
+ additionPosition: this.props.additionPosition,
+ allowAdditions: this.props.allowAdditions,
+ deburr: this.props.deburr,
+ multiple: this.props.multiple,
+ search: this.props.search,
+ })
// Prevent infinite loop
// TODO: remove left part of condition after children API will be removed
@@ -1013,16 +674,17 @@ export default class Dropdown extends Component {
// if 'wrapSelection' is set to false and selection is after last or before first, it just does not change
if (!wrapSelection && (nextIndex > lastIndex || nextIndex < 0)) {
nextIndex = startIndex
- } else if (nextIndex > lastIndex) nextIndex = 0
- else if (nextIndex < 0) nextIndex = lastIndex
+ } else if (nextIndex > lastIndex) {
+ nextIndex = 0
+ } else if (nextIndex < 0) {
+ nextIndex = lastIndex
+ }
if (options[nextIndex].disabled) {
- this.moveSelectionBy(offset, nextIndex)
- return
+ return this.getSelectedIndexAfterMove(offset, nextIndex)
}
- this.setState({ selectedIndex: nextIndex })
- this.scrollSelectedItemIntoView()
+ return nextIndex
}
// ----------------------------------------
@@ -1050,8 +712,7 @@ export default class Dropdown extends Component {
const { multiple } = this.props
const newValue = multiple ? [] : ''
- this.setValue(newValue)
- this.setSelectedIndex(newValue)
+ this.setState({ value: newValue })
this.handleChange(e, newValue)
}
@@ -1141,30 +802,31 @@ export default class Dropdown extends Component {
// set state only if there's a relevant difference
if (!upward !== !this.state.upward) {
- this.trySetState({ upward })
+ this.setState({ upward })
}
}
- open = (e) => {
- const { disabled, open, search } = this.props
- debug('open()', { disabled, open, search })
+ open = (e = null, triggerSetState = true) => {
+ const { disabled, search } = this.props
+ debug('open()', { disabled, search, open: this.state.open })
if (disabled) return
if (search) _.invoke(this.searchRef.current, 'focus')
_.invoke(this.props, 'onOpen', e, this.props)
- this.trySetState({ open: true })
+ if (triggerSetState) {
+ this.setState({ open: true })
+ }
this.scrollSelectedItemIntoView()
}
close = (e, callback = this.handleClose) => {
- const { open } = this.state
- debug('close()', { open })
+ debug('close()', { open: this.state.open })
- if (open) {
+ if (this.state.open) {
_.invoke(this.props, 'onClose', e, this.props)
- this.trySetState({ open: false }, callback)
+ this.setState({ open: false }, callback)
}
}
@@ -1195,7 +857,7 @@ export default class Dropdown extends Component {
renderText = () => {
const { multiple, placeholder, search, text } = this.props
- const { searchQuery, value, open } = this.state
+ const { searchQuery, selectedIndex, value, open } = this.state
const hasValue = this.hasValue()
const classes = cx(
@@ -1204,20 +866,21 @@ export default class Dropdown extends Component {
search && searchQuery && 'filtered',
)
let _text = placeholder
+ let selectedItem
if (text) {
_text = text
} else if (open && !multiple) {
- _text = _.get(this.getSelectedItem(), 'text')
+ selectedItem = this.getSelectedItem(selectedIndex)
} else if (hasValue) {
- _text = _.get(this.getItemByValue(value), 'text')
+ selectedItem = this.getItemByValue(value)
}
- return (
-
-
-
-
-
-