[pull] master from Semantic-Org:master

.babel-preset.js

@@ -16,10 +16,7 @@ const browsers = [
 ]
 
 const plugins = [
-  ['@babel/plugin-proposal-class-properties', { loose: true }],
-  ['@babel/plugin-proposal-optional-chaining', { loose: true }],
   '@babel/plugin-proposal-export-default-from',
-  '@babel/plugin-proposal-export-namespace-from',
   '@babel/plugin-syntax-dynamic-import',
   [
     '@babel/plugin-transform-runtime',
@@ -36,6 +33,12 @@ const plugins = [
   // modules and avoid modules that prevent tree-shaking:
   // https://github.com/lodash/lodash/issues/4119
   'lodash',
+  [
+    'transform-next-use-client',
+    {
+      customClientImports: ['useAutoControlledValue', 'useEventCallback', 'useMergedRefs'],
+    },
+  ],
   // CJS modules are not tree-shakable in any bundler by default
   // https://github.com/formium/tsdx#using-lodash
   (isESBuild || isUMDBuild) && [

.circleci/config.yml

@@ -5,9 +5,12 @@ general:
     ignore:
       - gh-pages
 
+orbs:
+  browser-tools: circleci/[email protected]
+
 docker_defaults: &docker_defaults
   docker:
-    - image: circleci/node:12-browsers
+    - image: cimg/node:16.16-browsers
   working_directory: ~/project/semantic-ui-react
 
 environment:
@@ -32,6 +35,7 @@ jobs:
           key: v6-node-{{ .Branch }}-{{ checksum "yarn.lock" }}
           paths:
             - ~/.cache/yarn
+      - browser-tools/install-chrome
       - persist_to_workspace:
           root: ~/
           paths:

.eslintrc

@@ -1,16 +1,17 @@
 {
   "root": true,
   "parser": "babel-eslint",
-  "extends": ["airbnb", "prettier"],
+  "extends": ["airbnb", "prettier", "plugin:react-hooks/recommended"],
   "env": {
     "browser": true
   },
   "rules": {
     "newline-per-chained-call": "off",
     "class-methods-use-this": "off",
     "consistent-return": "off",
-    "complexity": ["warn", 10],
+    "complexity": "off",
     "global-require": "off",
+    "func-names": "off",
     "lines-between-class-members": "off",
     "no-console": "error",
     "no-multi-spaces": ["error", { "ignoreEOLComments": true }],

.github/workflows/size-limit.yml

@@ -14,7 +14,7 @@ jobs:
 
       - uses: actions/setup-node@v1
         with:
-          node-version: 12.x
+          node-version: 16.x
 
       - name: Cache node_modules
         uses: actions/cache@v1

.release-it.json

@@ -0,0 +1,9 @@
+{
+  "github": {
+    "release": false
+  },
+  "npm": {
+    "publishArgs": "--registry=https://registry.npmjs.org",
+    "skipChecks": true
+  }
+}

CHANGELOG.md

@@ -1,5 +1,45 @@
 # Change Log
 
+## v3.0.0-beta.2 (2023-12-30)
+
+#### :rocket: New Feature
+* [#4437](https://github.com/Semantic-Org/Semantic-UI-React/pull/4437) feat(FormGroup): add error prop to FormGroup ([@felixmosh](https://github.com/felixmosh))
+* [#4436](https://github.com/Semantic-Org/Semantic-UI-React/pull/4436) feat(Form.Group): add disabled prop ([@naman1608](https://github.com/naman1608))
+
+#### :bug: Bug Fix
+* [#4447](https://github.com/Semantic-Org/Semantic-UI-React/pull/4447) fix(typings): update types to support `ref` ([@layershifter](https://github.com/layershifter))
+* [#4446](https://github.com/Semantic-Org/Semantic-UI-React/pull/4446) fix(Popup): fix positioning in scrollable container ([@CoryDuncan](https://github.com/CoryDuncan))
+* [#4445](https://github.com/Semantic-Org/Semantic-UI-React/pull/4445) fix(Portal): fix event handling for mouseEnter/mouseLeave ([@tourman](https://github.com/tourman))
+
+#### :memo: Documentation
+* [#4431](https://github.com/Semantic-Org/Semantic-UI-React/pull/4431) docs: add migration guide to v3 ([@layershifter](https://github.com/layershifter))
+
+#### :house: Internal
+* [#4456](https://github.com/Semantic-Org/Semantic-UI-React/pull/4456) chore: remove "dot-syntax" from examples ([@layershifter](https://github.com/layershifter))
+* [#4455](https://github.com/Semantic-Org/Semantic-UI-React/pull/4455) chore: fix lint warnings ([@layershifter](https://github.com/layershifter))
+* [#4452](https://github.com/Semantic-Org/Semantic-UI-React/pull/4452) chore: add "use client" directive in components where it's needed ([@layershifter](https://github.com/layershifter))
+* [#4454](https://github.com/Semantic-Org/Semantic-UI-React/pull/4454) chore: bump Babel & react-docgen ([@layershifter](https://github.com/layershifter))
+* [#4449](https://github.com/Semantic-Org/Semantic-UI-React/pull/4449) chore: remove usage of deprecated `.defaultProps` ([@tourman](https://github.com/tourman))
+
+## v2.1.5 (2023-12-10)
+
+#### :bug: Bug Fix
+* [#4446](https://github.com/Semantic-Org/Semantic-UI-React/pull/4446) fix(Popup): fix positioning in scrollable container ([@CoryDuncan](https://github.com/CoryDuncan))
+
+## v3.0.0-beta.0 (2023-02-28)
+
+> Migration guide is available here ➡️ https://react.semantic-ui.com/migration-guide/
+
+#### :rocket: New Feature
+
+- [#4233](https://github.com/Semantic-Org/Semantic-UI-React/pull/4233) All components support native [ref forwarding](https://reactjs.org/docs/forwarding-refs.html) 🎉
+
+#### :boom: Breaking Change
+
+- [#4286](https://github.com/Semantic-Org/Semantic-UI-React/pull/4286) chore: remove `Ref` component
+- [#4257](https://github.com/Semantic-Org/Semantic-UI-React/pull/4257) chore: remove `Visibility` component
+- [#4266](https://github.com/Semantic-Org/Semantic-UI-React/pull/4266) chore: remove some static props on `Transition` component
+
 ## v2.1.4 (2022-11-23)
 
 #### :bug: Bug Fix

docs/src/components/Document.js

@@ -20,7 +20,7 @@ const Document = ({ Body, children, Head, Html, siteData: { dev, versions } }) =
       />
 
       <script src='https://cdn.jsdelivr.net/npm/core-js-bundle/minified.js' />
-      <script src='https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver' />
+      <script src='https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=IntersectionObserver' />
       <script
         src={`https://cdnjs.cloudflare.com/ajax/libs/anchor-js/${versions.anchor}/anchor.min.js`}
       />

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'
@@ -224,21 +224,20 @@ class Sidebar extends Component {
                   Prototypes
                 </Menu.Item>
                 <Menu.Item as={Link} exact to='/migration-guide' activeClassName='active'>
-                  Migration guide to v2
+                  Migration guide to v3
                 </Menu.Item>
               </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>

docs/src/examples/addons/Pagination/Usage/PaginationExampleControlled.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Grid, Input, Pagination, Segment } from 'semantic-ui-react'
+import { GridColumn, Grid, Input, Pagination, Segment } from 'semantic-ui-react'
 
 export default class PaginationExampleControlled extends Component {
   state = { activePage: 1 }
@@ -13,7 +13,7 @@ export default class PaginationExampleControlled extends Component {
 
     return (
       <Grid columns={2} verticalAlign='middle'>
-        <Grid.Column>
+        <GridColumn>
           <Segment secondary>
             <div>activePage: {activePage}</div>
             <Input
@@ -24,14 +24,14 @@ export default class PaginationExampleControlled extends Component {
               value={activePage}
             />
           </Segment>
-        </Grid.Column>
-        <Grid.Column>
+        </GridColumn>
+        <GridColumn>
           <Pagination
             activePage={activePage}
             onPageChange={this.handlePaginationChange}
             totalPages={5}
           />
-        </Grid.Column>
+        </GridColumn>
       </Grid>
     )
   }

docs/src/examples/addons/Pagination/Usage/PaginationExampleOptions.js

@@ -1,5 +1,14 @@
 import React, { Component } from 'react'
-import { Grid, Form, Pagination, Segment } from 'semantic-ui-react'
+import {
+  GridColumn,
+  FormInput,
+  FormGroup,
+  FormCheckbox,
+  Grid,
+  Form,
+  Pagination,
+  Segment,
+} from 'semantic-ui-react'
 
 export default class PaginationExampleCustomization extends Component {
   state = {
@@ -32,7 +41,7 @@ export default class PaginationExampleCustomization extends Component {
 
     return (
       <Grid columns={1}>
-        <Grid.Column>
+        <GridColumn>
           <Pagination
             activePage={activePage}
             boundaryRange={boundaryRange}
@@ -47,68 +56,68 @@ export default class PaginationExampleCustomization extends Component {
             prevItem={showPreviousAndNextNav ? undefined : null}
             nextItem={showPreviousAndNextNav ? undefined : null}
           />
-        </Grid.Column>
+        </GridColumn>
 
-        <Grid.Column>
+        <GridColumn>
           <Form as={Segment}>
-            <Form.Group widths={2}>
-              <Form.Input
+            <FormGroup widths={2}>
+              <FormInput
                 label='Active page'
                 name='activePage'
                 min={1}
                 onChange={this.handleInputChange}
                 type='number'
                 value={activePage}
               />
-              <Form.Input
+              <FormInput
                 label='Total pages'
                 name='totalPages'
                 min={1}
                 onChange={this.handleInputChange}
                 type='number'
                 value={totalPages}
               />
-            </Form.Group>
-            <Form.Group widths={2}>
-              <Form.Input
+            </FormGroup>
+            <FormGroup widths={2}>
+              <FormInput
                 label='Boundary pages range'
                 name='boundaryRange'
                 min={0}
                 onChange={this.handleInputChange}
                 type='number'
                 value={boundaryRange}
               />
-              <Form.Input
+              <FormInput
                 label='Sibling pages range'
                 name='siblingRange'
                 min={0}
                 onChange={this.handleInputChange}
                 type='number'
                 value={siblingRange}
               />
-            </Form.Group>
-            <Form.Group inline>
-              <Form.Checkbox
+            </FormGroup>
+            <FormGroup inline>
+              <FormCheckbox
                 checked={showEllipsis}
                 label='Show ellipsis'
                 name='showEllipsis'
                 onChange={this.handleCheckboxChange}
               />
-              <Form.Checkbox
+              <FormCheckbox
                 checked={showFirstAndLastNav}
                 label='Show first and last nav pages'
                 name='showFirstAndLastNav'
                 onChange={this.handleCheckboxChange}
               />
-              <Form.Checkbox
+              <FormCheckbox
                 checked={showPreviousAndNextNav}
                 label='Show previous and next nav pages'
                 name='showPreviousAndNextNav'
                 onChange={this.handleCheckboxChange}
               />
-            </Form.Group>
+            </FormGroup>
           </Form>
-        </Grid.Column>
+        </GridColumn>
       </Grid>
     )
   }

docs/src/examples/addons/Portal/Types/PortalExampleControlled.js

@@ -1,5 +1,12 @@
 import React, { Component } from 'react'
-import { Button, Grid, Header, Segment, Portal } from 'semantic-ui-react'
+import {
+  GridColumn,
+  Button,
+  Grid,
+  Header,
+  Segment,
+  Portal,
+} from 'semantic-ui-react'
 
 export default class PortalExampleControlled extends Component {
   state = { open: false }
@@ -12,7 +19,7 @@ export default class PortalExampleControlled extends Component {
 
     return (
       <Grid columns={2}>
-        <Grid.Column>
+        <GridColumn>
           <Button
             content='Open Portal'
             disabled={open}
@@ -40,7 +47,7 @@ export default class PortalExampleControlled extends Component {
               />
             </Segment>
           </Portal>
-        </Grid.Column>
+        </GridColumn>
       </Grid>
     )
   }