chore: update Ref dependency to latest version (#4023)

* chore(MountNode|Sidebar): update Ref dependency to latest version

The @stardust-ui/{react-component-event-listener, react-component-ref} components have been moved to @fluentui/{react-component-event-listener, react-component-ref}.

Change dependency so that the new packages are used, and upgrade to their latest versions.

One wrinkle: `toRefObject()` was removed from `react-component-ref` (see microsoft/fluent-ui-react#2287). I've rewritten the code that depended on this function.

* fix import

* Update package.json

* fix yarn.lock

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

Author: jluxenberg

index.d.ts

@@ -1,6 +1,6 @@
 // Third party
 
-export { Ref, RefProps } from '@stardust-ui/react-component-ref'
+export { Ref, RefProps } from '@fluentui/react-component-ref'
 
 // Addons
 

package.json

@@ -68,9 +68,9 @@
   "homepage": "https://github.com/Semantic-Org/Semantic-UI-React#readme",
   "dependencies": {
     "@babel/runtime": "^7.10.5",
+    "@fluentui/react-component-event-listener": "~0.51.0",
+    "@fluentui/react-component-ref": "~0.51.0",
     "@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",
     "clsx": "^1.1.1",
     "keyboard-key": "^1.1.0",
     "lodash": "^4.17.19",

src/addons/Portal/Portal.js

@@ -1,5 +1,5 @@
 import EventStack from '@semantic-ui-react/event-stack'
-import { handleRef, Ref } from '@stardust-ui/react-component-ref'
+import { handleRef, Ref } from '@fluentui/react-component-ref'
 import keyboardKey from 'keyboard-key'
 import _ from 'lodash'
 import PropTypes from 'prop-types'

src/addons/Portal/PortalInner.js

@@ -1,4 +1,4 @@
-import { handleRef, Ref } from '@stardust-ui/react-component-ref'
+import { handleRef, Ref } from '@fluentui/react-component-ref'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'

src/addons/TextArea/TextArea.js

@@ -1,4 +1,4 @@
-import { Ref } from '@stardust-ui/react-component-ref'
+import { Ref } from '@fluentui/react-component-ref'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React, { Component, createRef } from 'react'

src/behaviors/Visibility/Visibility.js

@@ -1,4 +1,4 @@
-import { Ref } from '@stardust-ui/react-component-ref'
+import { Ref } from '@fluentui/react-component-ref'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React, { Component, createRef } from 'react'

src/elements/Button/Button.js

@@ -1,4 +1,4 @@
-import { Ref } from '@stardust-ui/react-component-ref'
+import { Ref } from '@fluentui/react-component-ref'
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'

src/elements/Input/Input.js

@@ -1,4 +1,4 @@
-import { handleRef } from '@stardust-ui/react-component-ref'
+import { handleRef } from '@fluentui/react-component-ref'
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'

src/index.js

@@ -1,5 +1,5 @@
 // Third party
-export { Ref } from '@stardust-ui/react-component-ref'
+export { Ref } from '@fluentui/react-component-ref'
 
 // Addons
 export Confirm from './addons/Confirm'

src/lib/hooks/useClassNamesOnNode.js

@@ -1,5 +1,5 @@
+import { isRefObject } from '@fluentui/react-component-ref'
 import React from 'react'
-import { isRefObject } from '@stardust-ui/react-component-ref'
 
 import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect'
 

src/modules/Checkbox/Checkbox.js

@@ -1,4 +1,4 @@
-import { Ref } from '@stardust-ui/react-component-ref'
+import { Ref } from '@fluentui/react-component-ref'
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'

src/modules/Dimmer/DimmerInner.js

@@ -1,4 +1,4 @@
-import { Ref } from '@stardust-ui/react-component-ref'
+import { Ref } from '@fluentui/react-component-ref'
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'

src/modules/Dropdown/Dropdown.js

@@ -1,5 +1,5 @@
 import EventStack from '@semantic-ui-react/event-stack'
-import { Ref } from '@stardust-ui/react-component-ref'
+import { Ref } from '@fluentui/react-component-ref'
 import cx from 'clsx'
 import keyboardKey from 'keyboard-key'
 import _ from 'lodash'

src/modules/Modal/Modal.js

@@ -1,4 +1,4 @@
-import { Ref } from '@stardust-ui/react-component-ref'
+import { Ref } from '@fluentui/react-component-ref'
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'

src/modules/Modal/ModalDimmer.js

@@ -1,4 +1,4 @@
-import { Ref } from '@stardust-ui/react-component-ref'
+import { Ref } from '@fluentui/react-component-ref'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'

src/modules/Popup/Popup.js

@@ -1,5 +1,5 @@
 import EventStack from '@semantic-ui-react/event-stack'
-import { Ref } from '@stardust-ui/react-component-ref'
+import { Ref } from '@fluentui/react-component-ref'
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'

src/modules/Popup/lib/createReferenceProxy.js

@@ -1,4 +1,4 @@
-import { isRefObject, toRefObject } from '@stardust-ui/react-component-ref'
+import { isRefObject, toRefObject } from '@fluentui/react-component-ref'
 import _ from 'lodash'
 
 class ReferenceProxy {

src/modules/Sidebar/Sidebar.js

@@ -1,5 +1,5 @@
-import { EventListener, documentRef } from '@stardust-ui/react-component-event-listener'
-import { isRefObject, toRefObject, Ref } from '@stardust-ui/react-component-ref'
+import { EventListener, documentRef } from '@fluentui/react-component-event-listener'
+import { Ref, isRefObject } from '@fluentui/react-component-ref'
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
@@ -106,14 +106,14 @@ class Sidebar extends Component {
     )
     const rest = getUnhandledProps(Sidebar, this.props)
     const ElementType = getElementType(Sidebar, this.props)
-    const targetRef = isRefObject(target) ? target : toRefObject(target)
+    const targetProp = isRefObject(target) ? { targetRef: target } : { target }
 
     return (
       <Ref innerRef={this.ref}>
         <ElementType {...rest} className={classes}>
           {childrenUtils.isNil(children) ? content : children}
           {visible && (
-            <EventListener listener={this.handleDocumentClick} targetRef={targetRef} type='click' />
+            <EventListener listener={this.handleDocumentClick} type='click' {...targetProp} />
           )}
         </ElementType>
       </Ref>

src/modules/Sticky/Sticky.js

@@ -1,4 +1,4 @@
-import { isRefObject } from '@stardust-ui/react-component-ref'
+import { isRefObject } from '@fluentui/react-component-ref'
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'

test/specs/modules/Sidebar/Sidebar-test.js

@@ -137,7 +137,7 @@ describe('Sidebar', () => {
       const wrapper = shallow(<Sidebar target={target} visible />)
       const listener = wrapper.find('EventListener')
 
-      listener.should.have.prop('targetRef').that.eql({ current: target })
+      listener.should.have.prop('target').that.eql(target)
     })
   })
 })

test/utils/nestedShallow.js

@@ -1,4 +1,4 @@
-import { Ref } from '@stardust-ui/react-component-ref'
+import { Ref } from '@fluentui/react-component-ref'
 import enzyme from 'enzyme'
 import _ from 'lodash'
 

yarn.lock

@@ -969,10 +969,10 @@
     core-js-pure "^3.0.0"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.5", "@babel/runtime@^7.4.5", "@babel/runtime@^7.8.4":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.10.5.tgz#303d8bd440ecd5a491eae6117fd3367698674c5c"
-  integrity sha512-otddXKhdNn7d0ptoFRHtMLa8LqDxLYwTjB4nYgM1yy5N6gU/MUf8zqyyLltCH3yAVitBzmwK4us+DD0l/MauAg==
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.4", "@babel/runtime@^7.10.5", "@babel/runtime@^7.4.5", "@babel/runtime@^7.8.4":
+  version "7.11.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
+  integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==
   dependencies:
     regenerator-runtime "^0.13.4"
 
@@ -1049,6 +1049,21 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
+"@fluentui/react-component-event-listener@~0.51.0":
+  version "0.51.0"
+  resolved "https://registry.yarnpkg.com/@fluentui/react-component-event-listener/-/react-component-event-listener-0.51.0.tgz#29701f875a37870e168b99b0198d3518866a7f84"
+  integrity sha512-YzvtrqSOQIr19V5hLQ71Zt2HnBpHsPbgE6YNRI0fYkld1YbZWggiPSpk6nhmjB5U30h3EqwZzvsuQTvHbuP2Iw==
+  dependencies:
+    "@babel/runtime" "^7.10.4"
+
+"@fluentui/react-component-ref@~0.51.0":
+  version "0.51.0"
+  resolved "https://registry.yarnpkg.com/@fluentui/react-component-ref/-/react-component-ref-0.51.0.tgz#e27e50e36a7d96586bc814c16bd84f9da53b3029"
+  integrity sha512-eYTiZCGmcsU1RuKeHepd8i6XksnroSF5b2lqHJaQO9x+Ec62d7+M2i9FW/nhe2Mpb5f96inL0Oz3zzVMrSwJdw==
+  dependencies:
+    "@babel/runtime" "^7.10.4"
+    react-is "^16.6.3"
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
@@ -1176,23 +1191,6 @@
   dependencies:
     semver "7.3.2"
 
-"@stardust-ui/react-component-event-listener@~0.38.0":
-  version "0.38.0"
-  resolved "https://registry.yarnpkg.com/@stardust-ui/react-component-event-listener/-/react-component-event-listener-0.38.0.tgz#1787faded94b40ad41226e6289baf13e701c6e7f"
-  integrity sha512-sIP/e0dyOrrlb8K7KWumfMxj/gAifswTBC4o68Aa+C/GA73ccRp/6W1VlHvF/dlOR4KLsA+5SKnhjH36xzPsWg==
-  dependencies:
-    "@babel/runtime" "^7.1.2"
-    prop-types "^15.7.2"
-
-"@stardust-ui/react-component-ref@~0.38.0":
-  version "0.38.0"
-  resolved "https://registry.yarnpkg.com/@stardust-ui/react-component-ref/-/react-component-ref-0.38.0.tgz#52d555f2d5edd213c923c93a106f7de940e427ef"
-  integrity sha512-xjs6WnvJVueSIXMWw0C3oWIgAPpcD03qw43oGOjUXqFktvpNkB73JoKIhS4sCrtQxBdct75qqr4ZL6JiyPcESw==
-  dependencies:
-    "@babel/runtime" "^7.1.2"
-    prop-types "^15.7.2"
-    react-is "^16.6.3"
-
 "@textlint/ast-node-types@^4.0.3":
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/@textlint/ast-node-types/-/ast-node-types-4.2.1.tgz#978fa10e23468114462fc08ef29f96980c12a8ef"