feat: use React.forwardRef in all components (#4233)

* chore: remove .state() assertions in tests (#4232)

* Ember: remove .state() usage in Enzyme

* AccordionAccordion: remove .state() usage in Enzyme

* Checkbox: remove .state() usage in Enzyme

* TransitionablePortal: remove .state() usage in Enzyme

* Transition: remove .state() usage in Enzyme

* Dropdown: remove .state() usage in Enzyme

* chore(Image): use React.forwardRef() (#4234)

* chore(Placeholder): use React.forwardRef() (#4236)

* chore(Header): use React.forwardRef() (#4237)

* chore(Segment): use React.forwardRef() (#4238)

* chore(Table): use React.forwardRef() (#4239)

* chore(Table): use React.forwardRef()

* fix naming

* chore(Step): use React.forwardRef() (#4240)

* chore: disable ESLint rule for function names (#4241)

* chore(Comment): use React.forwardRef() (#4242)

* chore(Comment): use React.forwardRef()

* fix displayName

* fix tests

* chore(Card): use React.forwardRef() (#4243)

* chore(Feed): use React.forwardRef() (#4244)

* chore(Statistic): use React.forwardRef() (#4245)

* chore(Item): use React.forwardRef() (#4247)

* chore(Container|Divider|Loader|Rail): use React.forwardRef() (#4248)

* chore(Accordion): use React.forwardRef() (#4249)

* chore(Advertisement|Breadcrumb): use React.forwardRef() (#4250)

* chore(Message): use React.forwardRef() (#4251)

* chore(Label|List): use React.forwardRef() (#4252)

* chore(Menu): use React.forwardRef() (#4254)

* chore(Pagination): use React.forwardRef() (#4255)

* chore(Button): use React.forwardRef() (#4256)

* chore(Modal|Portal|Popup): use React.forwardRef() (#4253)

* chore(Modal|Portal): use React.forwardRef()

* remove redundant statics

* migrate Popup

* chore(Rating|Reveal): use React.forwardRef() (#4258)

* chore(Dimmer|Grid|Sidebar): use React.forwardRef() (#4260)

* chore(Modal*|Popup*): use React.forwardRef() (#4261)

* chore(Confirm|Checkbox|Embed|Radio|TextArea): use React.forwardRef() (#4262)

* chore(Flag|Icon|ImageGroup): use React.forwardRef() (#4264)

* chore(Tab): use React.forwardRef() (#4265)

* chore(TransitionGroup): use React.forwardRef() (#4266)

* chore(Input): use React.forwardRef() (#4267)

* chore(Sticky): use React.forwardRef() (#4263)

* chore(TransitionablePortal): convert to be functional component (#4269)

* chore(Search*): use React.forwardRef() (#4270)

* chore(Dropdown*): use React.forwardRef() (#4273)

* chore(Dropdown*): use React.forwardRef()

* fix examples-test

* chore(Visibility): remove component (#4257)

* chore(Visibility): remove component

* remove behaviors section

* chore(Ref): remove component (#4286)

* chore(Ref): remove component

* fix tests

* chore(Search): use React.forwardRef() (#4330)

* chore(Search): use React.forwardRef()

* add test for ref forwarding

* fix tests, add comments

* chore: refactor Modal tests (#4339)

* chore: remove unused test utils (#4340)

* chore: refactor tests for classnames to use mount() (#4341)

* chore: refactor tests for shorthands to use mount() (#4342)

* chore: refactor tests for shorthands to use mount()

* add comment

* fix tests with unmount

* fix(Dropdown): use ref forwarding (#4338)

* Add forward ref to Form (#4364)

* Convert form to function component

* Add ref forwarding to Form component

* Update test/specs/collections/Form/Form-test.js

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* Add ref to components (#4373)

* Add ref to FormButton

* Add ref to FormCheckbox

* Add forwardRef to FormGroup

* Remove accidental `only` calls

* chore(FormField): use React.forwardRef() (#4359)

* Add ref to form field component

* Move ref to controlProps

* Add more forwardsRef tests

* Remove unnecessary describe wrapper

* update tests

Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>

* chore(FormTextArea): use React.forwardRef() (#4405)

* chore(FormRadio): use React.forwardRef() (#4406)

* chore(FormInput): use React.forwardRef() (#4407)

* chore(Select,FormSelect,FormDropdown): use React.forwardRef() (#4408)

* chore(Select): use React.forwardRef()

* chore(FormSelect): use React.forwardRef()

* chore(FormDropdown): use React.forwardRef()

* fix tests, fix Dropdown component

Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>

---------

Co-authored-by: Brandon Olivier <brandon@brandonolivier.com>
Co-authored-by: Felix Mosheev <9304194+felixmosh@users.noreply.github.com>

Author: 3 people

.eslintrc

@@ -11,6 +11,7 @@
     "consistent-return": "off",
     "complexity": ["warn", 10],
     "global-require": "off",
+    "func-names": "off",
     "lines-between-class-members": "off",
     "no-console": "error",
     "no-multi-spaces": ["error", { "ignoreEOLComments": true }],

docs/src/components/Sidebar/Sidebar.js

@@ -3,7 +3,7 @@ import _ from 'lodash/fp'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import { Link } from 'react-static'
-import { Menu, Icon, Input, Ref } from 'semantic-ui-react'
+import { Menu, Icon, Input } from 'semantic-ui-react'
 
 import CarbonAd from 'docs/src/components/CarbonAd/CarbonAd'
 import Logo from 'docs/src/components/Logo/Logo'
@@ -229,16 +229,15 @@ class Sidebar extends Component {
               </Menu.Menu>
             </Menu.Item>
             <Menu.Item fitted>
-              <Ref innerRef={this.handleSearchRef}>
-                <Input
-                  fluid
-                  icon={{ name: 'filter', color: 'teal', inverted: true, bordered: true }}
-                  placeholder='Press "/" to filter components'
-                  value={query}
-                  onChange={this.handleSearchChange}
-                  onKeyDown={this.handleSearchKeyDown}
-                />
-              </Ref>
+              <Input
+                fluid
+                icon={{ name: 'filter', color: 'teal', inverted: true, bordered: true }}
+                placeholder='Press "/" to filter components'
+                ref={this.handleSearchRef}
+                value={query}
+                onChange={this.handleSearchChange}
+                onKeyDown={this.handleSearchKeyDown}
+              />
             </Menu.Item>
             {query ? this.renderSearchItems() : this.menuItemsByType}
           </Menu>