feat(Ref): extract to a separate package, add utils

CHANGELOG.md

@@ -19,6 +19,8 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Features
 - Add default child a11y behavior to `Menu` related behaviors @silviuavram ([#1282](https://github.com/stardust-ui/react/pull/1282))
+- `Ref` component extracted to a `@stardust-ui/react-component-ref` @layershifter ([#1281](https://github.com/stardust-ui/react/pull/1281))
+- added `isRefObject()`, `toRefObject()` utils for React refs @layershifter ([#1281](https://github.com/stardust-ui/react/pull/1281))
 
 <!--------------------------------[ v0.29.1 ]------------------------------- -->
 ## [v0.29.1](https://github.com/stardust-ui/react/tree/v0.29.1) (2019-05-01)

packages/internal-tooling/package.json

@@ -27,6 +27,7 @@
   },
   "files": [
     "babel",
+    "eslint",
     "jest"
   ],
   "publishConfig": {

packages/react-component-ref/.babelrc

@@ -0,0 +1,3 @@
+{
+  "extends": "@stardust-ui/internal-tooling/babel"
+}

packages/react-component-ref/jest.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  ...require('@stardust-ui/internal-tooling/jest'),
+  name: 'react-component-ref',
+  moduleNameMapper: require('lerna-alias').jest(),
+}

packages/react-component-ref/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@stardust-ui/react-component-ref",
+  "description": "A set of components and utils to deal with React refs.",
+  "version": "0.29.1",
+  "author": "Oleksandr Fediashov <olfedias@microsoft.com>",
+  "bugs": "https://github.com/stardust-ui/react/issues",
+  "dependencies": {
+    "@stardust-ui/react-proptypes": "^0.29.1",
+    "prop-types": "^15.6.1",
+    "react-is": "^16.6.3"
+  },
+  "devDependencies": {
+    "@stardust-ui/internal-tooling": "^0.29.1",
+    "lerna-alias": "^3.0.3-0"
+  },
+  "files": [
+    "dist"
+  ],
+  "homepage": "https://github.com/stardust-ui/react/tree/master/packages/react-component-ref",
+  "jsnext:main": "dist/es/index.js",
+  "license": "MIT",
+  "main": "dist/commonjs/index.js",
+  "module": "dist/es/index.js",
+  "peerDependencies": {
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": "stardust-ui/react.git",
+  "scripts": {
+    "build": "cross-env TS_NODE_PROJECT=../../tsconfig.json gulp bundle:package:no-umd --package react-component-ref"
+  },
+  "sideEffects": false,
+  "types": "dist/es/index.d.ts"
+}

packages/react/src/components/Ref/Ref.tsx → packages/react-component-ref/src/Ref.tsx

@@ -1,14 +1,14 @@
 import * as customPropTypes from '@stardust-ui/react-proptypes'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
-import { isForwardRef } from 'react-is'
+import * as ReactIs from 'react-is'
 
-import { ChildrenComponentProps } from '../../lib'
-import { ReactProps } from '../../types'
 import RefFindNode from './RefFindNode'
 import RefForward from './RefForward'
 
-export interface RefProps extends ChildrenComponentProps<React.ReactElement<any>> {
+export interface RefProps {
+  children: React.ReactElement<any>
+
   /**
    * Called when a child component will be mounted or updated.
    *
@@ -17,11 +17,11 @@ export interface RefProps extends ChildrenComponentProps<React.ReactElement<any>
   innerRef: React.Ref<any>
 }
 
-const Ref: React.FunctionComponent<ReactProps<RefProps>> = props => {
+const Ref: React.FunctionComponent<RefProps> = props => {
   const { children, innerRef } = props
 
   const child = React.Children.only(children)
-  const ElementType = isForwardRef(child) ? RefForward : RefFindNode
+  const ElementType = ReactIs.isForwardRef(child) ? RefForward : RefFindNode
 
   return <ElementType innerRef={innerRef}>{child}</ElementType>
 }

packages/react/src/components/Ref/RefFindNode.tsx → packages/react-component-ref/src/RefFindNode.tsx

@@ -3,10 +3,11 @@ import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 
-import { ChildrenComponentProps } from '../../lib/commonPropInterfaces'
-import handleRef from '../../lib/handleRef'
+import handleRef from './handleRef'
+
+export interface RefFindNodeProps {
+  children: React.ReactElement<any>
 
-export interface RefFindNodeProps extends ChildrenComponentProps<React.ReactElement<any>> {
   /**
    * Called when a child component will be mounted or updated.
    *
@@ -20,10 +21,10 @@ export default class RefFindNode extends React.Component<RefFindNodeProps> {
 
   static propTypes = {
     children: PropTypes.element.isRequired,
-    innerRef: customPropTypes.ref,
+    innerRef: customPropTypes.ref.isRequired as PropTypes.Validator<React.Ref<any>>,
   }
 
-  prevNode: Node = null
+  prevNode: Node | null = null
 
   componentDidMount() {
     this.prevNode = ReactDOM.findDOMNode(this)

packages/react/src/components/Ref/RefForward.tsx → packages/react-component-ref/src/RefForward.tsx

@@ -2,10 +2,11 @@ import * as customPropTypes from '@stardust-ui/react-proptypes'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
-import { ChildrenComponentProps } from '../../lib/commonPropInterfaces'
-import handleRef from '../../lib/handleRef'
+import handleRef from './handleRef'
+
+export interface RefForwardProps {
+  children: React.ReactElement<any>
 
-export interface RefForwardProps extends ChildrenComponentProps<React.ReactElement<any>> {
   /**
    * Called when a child component will be mounted or updated.
    *
@@ -19,7 +20,7 @@ export default class RefForward extends React.Component<RefForwardProps> {
 
   static propTypes = {
     children: PropTypes.element.isRequired,
-    innerRef: customPropTypes.ref,
+    innerRef: customPropTypes.ref.isRequired as PropTypes.Validator<React.Ref<any>>,
   }
 
   private handleRefOverride = (node: HTMLElement) => {

packages/react-component-ref/src/handleRef.ts

@@ -0,0 +1,30 @@
+import * as React from 'react'
+
+/**
+ * The function that correctly handles passing refs.
+ *
+ * @param ref An ref object or function
+ * @param node A node that should be passed by ref
+ */
+const handleRef = <N>(ref: React.Ref<N> | undefined, node: N) => {
+  if (process.env.NODE_ENV !== 'production') {
+    if (typeof ref === 'string') {
+      throw new Error(
+        'We do not support refs as string, this is a legacy API and will be likely to be removed in one of the future releases of React.',
+      )
+    }
+  }
+
+  if (typeof ref === 'function') {
+    ref(node)
+    return
+  }
+
+  if (ref !== null && typeof ref === 'object') {
+    // The `current` property is defined as readonly, however it's a valid way because
+    // `ref` is a mutable object
+    ;(ref as React.MutableRefObject<N>).current = node
+  }
+}
+
+export default handleRef

packages/react-component-ref/src/index.ts

@@ -0,0 +1,7 @@
+export { default as handleRef } from './handleRef'
+export { default as isRefObject } from './isRefObject'
+export { default as toRefObject } from './toRefObject'
+
+export { default as Ref, RefProps } from './Ref'
+export { default as RefFindNode } from './RefFindNode'
+export { default as RefForward } from './RefForward'

packages/react-component-ref/src/isRefObject.ts

@@ -0,0 +1,10 @@
+import * as React from 'react'
+
+/**
+ * Check that the passed object is a valid React ref object.
+ */
+const isRefObject = (ref: any): ref is React.RefObject<any> =>
+  // https://github.com/facebook/react/blob/v16.8.2/packages/react-reconciler/src/ReactFiberCommitWork.js#L665
+  ref !== null && typeof ref === 'object' && ref.hasOwnProperty('current')
+
+export default isRefObject

packages/react-component-ref/src/toRefObject.ts

@@ -0,0 +1,27 @@
+import * as React from 'react'
+
+const nullRefObject: React.RefObject<null> = { current: null }
+
+// A map of created ref objects to provide memoization.
+const refObjects = new WeakMap<Node, React.RefObject<Node>>()
+
+/**
+ * Creates a React ref object from existing DOM node.
+ */
+const toRefObject = <T extends Node>(node: T): React.RefObject<T> => {
+  // A "null" is not valid key for a WeakMap
+  if (node === null) {
+    return nullRefObject
+  }
+
+  if (refObjects.has(node)) {
+    return refObjects.get(node) as React.RefObject<T>
+  }
+
+  const refObject: React.RefObject<T> = { current: node }
+  refObjects.set(node, refObject)
+
+  return refObject
+}
+
+export default toRefObject

packages/react/test/specs/components/Ref/Ref-test.tsx → packages/react-component-ref/test/Ref-test.tsx

@@ -1,9 +1,7 @@
+import { Ref, RefFindNode, RefForward } from '@stardust-ui/react-component-ref'
 import { shallow } from 'enzyme'
 import * as React from 'react'
 
-import Ref from 'src/components/Ref/Ref'
-import RefFindNode from 'src/components/Ref/RefFindNode'
-import RefForward from 'src/components/Ref/RefForward'
 import { CompositeClass, ForwardedRef } from './fixtures'
 
 describe('Ref', () => {

packages/react/test/specs/components/Ref/RefFindNode-test.tsx → packages/react-component-ref/test/RefFindNode-test.tsx

@@ -1,10 +1,10 @@
+import { RefFindNode } from '@stardust-ui/react-component-ref'
 import { mount } from 'enzyme'
 import * as React from 'react'
 
-import RefFindNode from 'src/components/Ref/RefFindNode'
 import { CompositeClass, CompositeFunction, DOMClass, DOMFunction } from './fixtures'
 
-const testInnerRef = Component => {
+const testInnerRef = (Component: React.ElementType) => {
   const innerRef = jest.fn()
   const node = mount(
     <RefFindNode innerRef={innerRef}>

packages/react/test/specs/components/Ref/RefForward-test.tsx → packages/react-component-ref/test/RefForward-test.tsx

@@ -1,7 +1,7 @@
+import { RefForward } from '@stardust-ui/react-component-ref'
 import { mount } from 'enzyme'
 import * as React from 'react'
 
-import RefForward from 'src/components/Ref/RefForward'
 import { ForwardedRef } from './fixtures'
 
 describe('RefForward', () => {

packages/react/test/specs/components/Ref/fixtures.tsx → packages/react-component-ref/test/fixtures.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react'
 
-export const DOMFunction = props => <div {...props} id="node" />
+export const DOMFunction: React.FunctionComponent = props => <div {...props} id="node" />
 
-export const CompositeFunction = props => <DOMFunction {...props} />
+export const CompositeFunction: React.FunctionComponent = props => <DOMFunction {...props} />
 
 export class DOMClass extends React.Component {
   render() {
@@ -18,6 +18,6 @@ export class CompositeClass extends React.Component {
 
 export const ForwardedRef = React.forwardRef<HTMLButtonElement>((props, ref) => (
   <div>
-    <button ref={ref} />
+    <button {...props} ref={ref} />
   </div>
 ))

packages/react/test/specs/lib/handleRef-test.ts → packages/react-component-ref/test/handleRef-test.ts

@@ -1,5 +1,5 @@
+import { handleRef } from '@stardust-ui/react-component-ref'
 import * as React from 'react'
-import handleRef from 'src/lib/handleRef'
 
 describe('handleRef', () => {
   it('throws an error when "ref" is string', () => {

packages/react-component-ref/test/isRefObject-test.ts

@@ -0,0 +1,11 @@
+import { isRefObject } from '@stardust-ui/react-component-ref'
+
+describe('isRefObject', () => {
+  it('checks for a valid param', () => {
+    expect(isRefObject(document.createElement('div'))).toBe(false)
+    expect(isRefObject(null)).toBe(false)
+
+    expect(isRefObject({ current: document.createElement('div') })).toBe(true)
+    expect(isRefObject({ current: null })).toBe(true)
+  })
+})

packages/react-component-ref/test/toRefObject-test.ts

@@ -0,0 +1,19 @@
+import { toRefObject } from '@stardust-ui/react-component-ref'
+
+describe('toRefObject', () => {
+  it('creates an ref object from an input', () => {
+    const node = document.createElement('div')
+    expect(toRefObject(node)).toHaveProperty('current', node)
+  })
+
+  it('handles "null" as input', () => {
+    expect(toRefObject(null)).toHaveProperty('current', null)
+  })
+
+  it('returned object is memoized', () => {
+    const node = document.createElement('div')
+    const refObject = toRefObject(node)
+
+    expect(toRefObject(node)).toBe(refObject)
+  })
+})

packages/react-component-ref/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../build/tsconfig.common",
+  "compilerOptions": {
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "noUnusedParameters": true,
+    "strictNullChecks": true
+  },
+  "include": ["src", "test"]
+}

packages/react/package.json

@@ -7,6 +7,7 @@
   "dependencies": {
     "@stardust-ui/react-component-event-listener": "^0.29.1",
     "@stardust-ui/react-component-nesting-registry": "^0.29.1",
+    "@stardust-ui/react-component-ref": "^0.29.1",
     "@stardust-ui/react-proptypes": "^0.29.1",
     "classnames": "^2.2.5",
     "css-shorthand-expand": "^1.2.0",

packages/react/src/components/Dialog/Dialog.tsx

@@ -1,3 +1,4 @@
+import { Ref } from '@stardust-ui/react-component-ref'
 import * as customPropTypes from '@stardust-ui/react-proptypes'
 import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
@@ -20,7 +21,6 @@ import Button, { ButtonProps } from '../Button/Button'
 import Box, { BoxProps } from '../Box/Box'
 import Header from '../Header/Header'
 import Portal from '../Portal/Portal'
-import Ref from '../Ref/Ref'
 import Flex from '../Flex/Flex'
 
 export interface DialogProps

packages/react/src/components/Dropdown/Dropdown.tsx

@@ -1,3 +1,4 @@
+import { handleRef, Ref } from '@stardust-ui/react-component-ref'
 import * as customPropTypes from '@stardust-ui/react-proptypes'
 import * as React from 'react'
 import * as PropTypes from 'prop-types'
@@ -27,11 +28,9 @@ import {
   AutoControlledComponent,
   RenderResultConfig,
   commonPropTypes,
-  handleRef,
   UIComponentProps,
 } from '../../lib'
 import List from '../List/List'
-import Ref from '../Ref/Ref'
 import DropdownItem, { DropdownItemProps } from './DropdownItem'
 import DropdownSelectedItem, { DropdownSelectedItemProps } from './DropdownSelectedItem'
 import DropdownSearchInput, { DropdownSearchInputProps } from './DropdownSearchInput'

packages/react/src/components/Dropdown/DropdownSelectedItem.tsx

@@ -1,3 +1,4 @@
+import { Ref } from '@stardust-ui/react-component-ref'
 import * as customPropTypes from '@stardust-ui/react-proptypes'
 import * as React from 'react'
 import * as PropTypes from 'prop-types'
@@ -10,7 +11,6 @@ import { createShorthandFactory, UIComponent, RenderResultConfig, commonPropType
 import Icon, { IconProps } from '../Icon/Icon'
 import Image from '../Image/Image'
 import Label from '../Label/Label'
-import Ref from '../Ref/Ref'
 import Box from '../Box/Box'
 
 export interface DropdownSelectedItemSlotClassNames {