diff --git a/docs/src/components/Sidebar/Sidebar.js b/docs/src/components/Sidebar/Sidebar.js
index 72baa4dff1..d8797ff909 100644
--- a/docs/src/components/Sidebar/Sidebar.js
+++ b/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 {
- [
- ]
-
+
{query ? this.renderSearchItems() : this.menuItemsByType}
diff --git a/docs/src/examples/addons/Ref/Types/RefExampleRef.js b/docs/src/examples/addons/Ref/Types/RefExampleRef.js
deleted file mode 100644
index e6370f8158..0000000000
--- a/docs/src/examples/addons/Ref/Types/RefExampleRef.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from 'react'
-import { Grid, Table, Ref, Segment } from 'semantic-ui-react'
-
-function RefExampleRef() {
- const objectRef = React.useRef(null)
- const [functionalRef, setFunctionalRef] = React.useState(null)
- const [isMounted, setIsMounted] = React.useState(false)
-
- React.useEffect(() => {
- setIsMounted(true)
- return () => setIsMounted(false)
- }, [])
-
- return (
-
-
-
- [
- ]An example node with functional ref
-
- [
- ]
- An example node with ref via React.useRef()
-
-
-
-
-
- {isMounted && (
-
-
-
- Type
-
- nodeName
-
-
- textContent
-
-
-
-
-
-
-
- Functional ref via React.useState()
hook
-
- {functionalRef.nodeName}
- {functionalRef.textContent}
-
-
-
-
- From React.useRef()
hook
-
- {objectRef.current.nodeName}
- {objectRef.current.textContent}
-
-
-
- )}
-
-
- )
-}
-
-export default RefExampleRef
diff --git a/docs/src/examples/addons/Ref/Types/RefForwardingExample.js b/docs/src/examples/addons/Ref/Types/RefForwardingExample.js
deleted file mode 100644
index 1e8ba6953d..0000000000
--- a/docs/src/examples/addons/Ref/Types/RefForwardingExample.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react'
-import { Grid, Ref, Segment } from 'semantic-ui-react'
-
-const ExampleButton = React.forwardRef((props, ref) => (
-
-
-
-))
-
-function RefForwardingExample() {
- const forwardedRef = React.useRef(null)
- const [isMounted, setIsMounted] = React.useState(false)
-
- React.useEffect(() => {
- setIsMounted(true)
- return () => setIsMounted(false)
- }, [])
-
- return (
-
-
-
-
- A button below uses React.forwardRef()
API.
-
-
- [
- ]A button
-
-
-
-
-
- {isMounted && (
-
-
- {JSON.stringify(
- {
- nodeName: forwardedRef.current.nodeName,
- nodeType: forwardedRef.current.nodeType,
- textContent: forwardedRef.current.textContent,
- },
- null,
- 2,
- )}
-
-
- )}
-
-
- )
-}
-
-export default RefForwardingExample
diff --git a/docs/src/examples/addons/Ref/Types/index.js b/docs/src/examples/addons/Ref/Types/index.js
deleted file mode 100644
index 6431b2eefa..0000000000
--- a/docs/src/examples/addons/Ref/Types/index.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react'
-
-import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
-import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
-
-const RefTypesExamples = () => (
-
-
- A component exposes the innerRef
prop that always returns
- the DOM node of both functional and class component children.
-
- }
- examplePath='addons/Ref/Types/RefExampleRef'
- />
-
- React.forwardRef()
API is also handled by this component.
-
- }
- examplePath='addons/Ref/Types/RefForwardingExample'
- />
-
-)
-
-export default RefTypesExamples
diff --git a/docs/src/examples/addons/Ref/index.js b/docs/src/examples/addons/Ref/index.js
deleted file mode 100644
index fad5922cc1..0000000000
--- a/docs/src/examples/addons/Ref/index.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react'
-import { Message } from 'semantic-ui-react'
-
-import Types from './Types'
-
-const RefExamples = () => (
- <>
-
-
- Currently, it's recommended to use Ref
component to get
- refs to HTML elements from Semantic UI React components as not all
- components support native ref forwarding via{' '}
- React.forwardRef()
.
-
-
- As it uses deprecated ReactDOM.findDOMNode()
you may
- receive warnings in React's StrictMode. We are working on it in{' '}
-
- Semantic-Org/Semantic-UI-React#3819
-
- .
-
-
-
- >
-)
-
-export default RefExamples
diff --git a/docs/src/examples/modules/Sidebar/Usage/SidebarExampleTarget.js b/docs/src/examples/modules/Sidebar/Usage/SidebarExampleTarget.js
index a63b258191..d5448d3d7c 100644
--- a/docs/src/examples/modules/Sidebar/Usage/SidebarExampleTarget.js
+++ b/docs/src/examples/modules/Sidebar/Usage/SidebarExampleTarget.js
@@ -5,7 +5,6 @@ import {
Header,
Image,
Menu,
- Ref,
Segment,
Sidebar,
} from 'semantic-ui-react'
@@ -42,12 +41,10 @@ const SidebarExampleTarget = () => {
Channels
- [
- ]
-
- When you will click there, the sidebar will be closed.
-
-
+
+
+ When you will click there, the sidebar will be closed.
+
diff --git a/docs/src/examples/modules/Sticky/Types/StickyExampleAdjacentContext.js b/docs/src/examples/modules/Sticky/Types/StickyExampleAdjacentContext.js
index 9576b8ac9c..20fb405486 100644
--- a/docs/src/examples/modules/Sticky/Types/StickyExampleAdjacentContext.js
+++ b/docs/src/examples/modules/Sticky/Types/StickyExampleAdjacentContext.js
@@ -1,14 +1,6 @@
import _ from 'lodash'
import React, { Component, createRef } from 'react'
-import {
- Grid,
- Header,
- Image,
- Rail,
- Ref,
- Segment,
- Sticky,
-} from 'semantic-ui-react'
+import { Grid, Header, Image, Rail, Segment, Sticky } from 'semantic-ui-react'
const Placeholder = () =>
@@ -19,31 +11,29 @@ export default class StickyExampleAdjacentContext extends Component {
return (
- [
- ]
- {_.times(10, (i) => (
+
+ {_.times(10, (i) => (
+
+ ))}
+
+
+ {_.times(3, (i) => (
))}
-
- {_.times(3, (i) => (
-
- ))}
-
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
)
diff --git a/docs/src/examples/modules/Sticky/Types/StickyExamplePushing.js b/docs/src/examples/modules/Sticky/Types/StickyExamplePushing.js
index 588d5c5e3f..113bd01aff 100644
--- a/docs/src/examples/modules/Sticky/Types/StickyExamplePushing.js
+++ b/docs/src/examples/modules/Sticky/Types/StickyExamplePushing.js
@@ -1,14 +1,6 @@
import _ from 'lodash'
import React, { Component, createRef } from 'react'
-import {
- Grid,
- Header,
- Image,
- Rail,
- Ref,
- Segment,
- Sticky,
-} from 'semantic-ui-react'
+import { Grid, Header, Image, Rail, Segment, Sticky } from 'semantic-ui-react'
const Placeholder = () =>
@@ -19,31 +11,29 @@ export default class StickyExamplePushing extends Component {
return (
- [
- ]
- {_.times(10, (i) => (
-
- ))}
+
+ {_.times(10, (i) => (
+
+ ))}
-
-
-
-
-
-
+
+
+
+
+
+
-
- {_.times(3, (i) => (
-
- ))}
+
+ {_.times(3, (i) => (
+
+ ))}
-
-
-
-
-
-
-
+
+
+
+
+
+
)
diff --git a/docs/src/examples/modules/Sticky/Usage/StickyExampleOffset.js b/docs/src/examples/modules/Sticky/Usage/StickyExampleOffset.js
index c8471df3ed..bc6d312b98 100644
--- a/docs/src/examples/modules/Sticky/Usage/StickyExampleOffset.js
+++ b/docs/src/examples/modules/Sticky/Usage/StickyExampleOffset.js
@@ -1,14 +1,6 @@
import _ from 'lodash'
import React, { Component, createRef } from 'react'
-import {
- Grid,
- Header,
- Image,
- Rail,
- Ref,
- Segment,
- Sticky,
-} from 'semantic-ui-react'
+import { Grid, Header, Image, Rail, Segment, Sticky } from 'semantic-ui-react'
const Placeholder = () =>
@@ -19,36 +11,34 @@ export default class StickyExampleOffset extends Component {
return (
- [
- ]
- {_.times(10, (i) => (
+
+ {_.times(10, (i) => (
+
+ ))}
+
+
+ {_.times(3, (i) => (
))}
-
- {_.times(3, (i) => (
-
- ))}
-
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
)
diff --git a/docs/src/examples/modules/Sticky/Variations/StickyExampleActive.js b/docs/src/examples/modules/Sticky/Variations/StickyExampleActive.js
index 46ca05dc32..de20e55745 100644
--- a/docs/src/examples/modules/Sticky/Variations/StickyExampleActive.js
+++ b/docs/src/examples/modules/Sticky/Variations/StickyExampleActive.js
@@ -6,7 +6,6 @@ import {
Header,
Image,
Rail,
- Ref,
Segment,
Sticky,
} from 'semantic-ui-react'
@@ -26,33 +25,31 @@ export default class StickyExampleActive extends Component {
return (
- [
- ]
- {_.times(10, (i) => (
-
- ))}
+
+ {_.times(10, (i) => (
+
+ ))}
-
-
-
-
-
-
-
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
)
diff --git a/docs/src/examples/modules/Sticky/Variations/StickyExampleOversized.js b/docs/src/examples/modules/Sticky/Variations/StickyExampleOversized.js
index 6c209a3fbc..5801139ffe 100644
--- a/docs/src/examples/modules/Sticky/Variations/StickyExampleOversized.js
+++ b/docs/src/examples/modules/Sticky/Variations/StickyExampleOversized.js
@@ -6,7 +6,6 @@ import {
Image,
Item,
Rail,
- Ref,
Segment,
Sticky,
} from 'semantic-ui-react'
@@ -21,39 +20,37 @@ export default class StickyExampleOversized extends Component {
return (
- [
- ]
- {_.times(15, (i) => (
-
- ))}
+
+ {_.times(15, (i) => (
+
+ ))}
-
-
-
- {_.times(12, (i) => (
- -
-
-
- Followup Article
- By Author
-
-
- ))}
-
-
-
+
+
+
+ {_.times(12, (i) => (
+ -
+
+
+ Followup Article
+ By Author
+
+
+ ))}
+
+
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
)
diff --git a/docs/static/utils/getComponentMenu.js b/docs/static/utils/getComponentMenu.js
index c91d27d1c5..0ebd169c78 100644
--- a/docs/static/utils/getComponentMenu.js
+++ b/docs/static/utils/getComponentMenu.js
@@ -1,17 +1,5 @@
-import _ from 'lodash'
import componentMenu from '../../src/componentMenu'
-const getComponentMenu = () =>
- _.sortBy(
- [
- ...componentMenu,
- {
- displayName: 'Ref',
- type: 'addon',
- external: true,
- },
- ],
- 'displayName',
- )
+const getComponentMenu = () => componentMenu
export default getComponentMenu
diff --git a/index.d.ts b/index.d.ts
index ab71f8aa58..2759370b72 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -1,7 +1,3 @@
-// Third party
-
-export { Ref, RefProps } from '@fluentui/react-component-ref'
-
// Addons
export {
diff --git a/package.json b/package.json
index 81691d0c9d..6a26a1f613 100644
--- a/package.json
+++ b/package.json
@@ -69,7 +69,6 @@
"dependencies": {
"@babel/runtime": "^7.10.5",
"@fluentui/react-component-event-listener": "~0.51.6",
- "@fluentui/react-component-ref": "~0.51.6",
"@popperjs/core": "^2.6.0",
"@semantic-ui-react/event-stack": "^3.1.2",
"clsx": "^1.1.1",
diff --git a/src/addons/Portal/PortalInner.d.ts b/src/addons/Portal/PortalInner.d.ts
index 9975bec5d5..6ccdf0a45e 100644
--- a/src/addons/Portal/PortalInner.d.ts
+++ b/src/addons/Portal/PortalInner.d.ts
@@ -8,9 +8,6 @@ export interface StrictPortalInnerProps {
/** Primary content. */
children: React.ReactNode
- /** Called with a ref to the inner node. */
- innerRef?: React.Ref
-
/** The node where the portal should mount. */
mountNode?: any
diff --git a/src/addons/Portal/PortalInner.js b/src/addons/Portal/PortalInner.js
index 42950165d4..2c8c5bb929 100644
--- a/src/addons/Portal/PortalInner.js
+++ b/src/addons/Portal/PortalInner.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
import React from 'react'
import { createPortal } from 'react-dom'
-import { customPropTypes, isBrowser, makeDebugger, useEventCallback } from '../../lib'
+import { isBrowser, makeDebugger, useEventCallback } from '../../lib'
import usePortalElement from './usePortalElement'
const debug = makeDebugger('PortalInner')
@@ -39,9 +39,6 @@ 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,
diff --git a/src/index.js b/src/index.js
index 881839bda1..7bbbba2c6b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,3 @@
-// Third party
-export { Ref } from '@fluentui/react-component-ref'
-
// Addons
export Confirm from './addons/Confirm'
export Pagination from './addons/Pagination'
diff --git a/src/lib/hooks/useClassNamesOnNode.js b/src/lib/hooks/useClassNamesOnNode.js
index b1571f5842..479142ee91 100644
--- a/src/lib/hooks/useClassNamesOnNode.js
+++ b/src/lib/hooks/useClassNamesOnNode.js
@@ -1,6 +1,6 @@
-import { isRefObject } from '@fluentui/react-component-ref'
import React from 'react'
+import isRefObject from '../isRefObject'
import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect'
const CLASS_NAME_DELITIMITER = /\s+/
diff --git a/src/lib/index.js b/src/lib/index.js
index e6c0d60682..9325384369 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -37,6 +37,7 @@ export * as SUI from './SUI'
export { numberToWordMap, numberToWord } from './numberToWord'
export normalizeTransitionDuration from './normalizeTransitionDuration'
export objectDiff from './objectDiff'
+export isRefObject from './isRefObject'
// Heads up! We import/export for this module to safely remove it with "babel-plugin-filter-imports"
export { makeDebugger }
diff --git a/src/lib/isRefObject.js b/src/lib/isRefObject.js
new file mode 100644
index 0000000000..c026162eff
--- /dev/null
+++ b/src/lib/isRefObject.js
@@ -0,0 +1,6 @@
+/** Checks that the passed object is a valid React ref object. */
+export default function isRefObject(ref) {
+ // https://github.com/facebook/react/blob/v16.8.2/packages/react-reconciler/src/ReactFiberCommitWork.js#L665
+ // eslint-disable-next-line no-prototype-builtins
+ return ref !== null && typeof ref === 'object' && ref.hasOwnProperty('current')
+}
diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js
index 783cffebf1..8dcb48b276 100644
--- a/src/modules/Dropdown/Dropdown.js
+++ b/src/modules/Dropdown/Dropdown.js
@@ -1,5 +1,4 @@
import EventStack from '@semantic-ui-react/event-stack'
-import { Ref } from '@fluentui/react-component-ref'
import cx from 'clsx'
import keyboardKey from 'keyboard-key'
import _ from 'lodash'
@@ -763,6 +762,7 @@ export default class Dropdown extends Component {
_.invoke(predefinedProps, 'onChange', e, inputProps)
this.handleSearchChange(e, inputProps)
},
+ ref: this.searchRef,
})
hasValue = () => {
@@ -899,18 +899,15 @@ export default class Dropdown extends Component {
const { searchQuery } = this.state
return (
- search && (
- [
- {DropdownSearchInput.create(searchInput, {
- defaultProps: {
- style: { width: this.computeSearchInputWidth() },
- tabIndex: this.computeSearchInputTabIndex(),
- value: searchQuery,
- },
- overrideProps: this.handleSearchInputOverrides,
- })}
- ]
- )
+ search &&
+ DropdownSearchInput.create(searchInput, {
+ defaultProps: {
+ style: { width: this.computeSearchInputWidth() },
+ tabIndex: this.computeSearchInputTabIndex(),
+ value: searchQuery,
+ },
+ overrideProps: this.handleSearchInputOverrides,
+ })
)
}
@@ -1073,35 +1070,34 @@ export default class Dropdown extends Component {
const ariaOptions = this.getDropdownAriaOptions(ElementType, this.props)
return (
- [
- ]
- {this.renderLabels()}
- {this.renderSearchInput()}
- {this.renderSearchSizer()}
- {trigger || this.renderText()}
- {Icon.create(icon, {
- overrideProps: this.handleIconOverrides,
- autoGenerateKey: false,
- })}
- {this.renderMenu()}
-
- {open && }
- {open && }
-
- {focus && }
-
-
+
+ {this.renderLabels()}
+ {this.renderSearchInput()}
+ {this.renderSearchSizer()}
+ {trigger || this.renderText()}
+ {Icon.create(icon, {
+ overrideProps: this.handleIconOverrides,
+ autoGenerateKey: false,
+ })}
+ {this.renderMenu()}
+
+ {open && }
+ {open && }
+
+ {focus && }
+
)
}
}
diff --git a/src/modules/Popup/lib/createReferenceProxy.js b/src/modules/Popup/lib/createReferenceProxy.js
index 8595ca6d94..1d7da1c147 100644
--- a/src/modules/Popup/lib/createReferenceProxy.js
+++ b/src/modules/Popup/lib/createReferenceProxy.js
@@ -1,5 +1,5 @@
-import { isRefObject } from '@fluentui/react-component-ref'
import _ from 'lodash'
+import { isRefObject } from '../../../lib'
class ReferenceProxy {
constructor(refObject) {
diff --git a/src/modules/Sidebar/Sidebar.js b/src/modules/Sidebar/Sidebar.js
index 8df0eb741f..764c16178e 100644
--- a/src/modules/Sidebar/Sidebar.js
+++ b/src/modules/Sidebar/Sidebar.js
@@ -1,5 +1,4 @@
import { EventListener, documentRef } from '@fluentui/react-component-event-listener'
-import { isRefObject } from '@fluentui/react-component-ref'
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
@@ -11,6 +10,7 @@ import {
doesNodeContainClick,
getUnhandledProps,
getElementType,
+ isRefObject,
useKeyOnly,
useIsomorphicLayoutEffect,
useEventCallback,
diff --git a/src/modules/Sticky/Sticky.js b/src/modules/Sticky/Sticky.js
index 49ec2aaa67..ab8c821c9a 100644
--- a/src/modules/Sticky/Sticky.js
+++ b/src/modules/Sticky/Sticky.js
@@ -1,4 +1,3 @@
-import { isRefObject } from '@fluentui/react-component-ref'
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
@@ -8,6 +7,7 @@ import {
customPropTypes,
getElementType,
getUnhandledProps,
+ isRefObject,
isBrowser,
useEventCallback,
useIsomorphicLayoutEffect,
diff --git a/static.routes.js b/static.routes.js
index 372d31a738..5093932991 100644
--- a/static.routes.js
+++ b/static.routes.js
@@ -36,82 +36,27 @@ export default async () => {
})),
// Routes for components, i.e. /element/button
- ..._.map(
- _.filter(getComponentMenu(), (baseInfo) => !baseInfo.external),
- (baseInfo) => ({
- path: getComponentPathname(baseInfo),
- component: 'docs/src/components/ComponentDoc',
- priority: 0.8,
- getData: async () => {
- const componentsInfo = getComponentGroupInfo(baseInfo.displayName)
- const sidebarSections = getSidebarSections(baseInfo.displayName)
-
- return {
- componentsInfo,
- exampleSources,
- sidebarSections,
- displayName: baseInfo.displayName,
- deprecated: !!_.find(
- _.get(componentsInfo[baseInfo.displayName], 'docblock.tags'),
- (tag) => tag.title === 'deprecated',
- ),
- seeTags: getInfoForSeeTags(componentsInfo[baseInfo.displayName]),
- }
- },
- }),
- ),
-
- {
- path: `/addons/ref/`,
+ ..._.map(getComponentMenu(), (baseInfo) => ({
+ path: getComponentPathname(baseInfo),
component: 'docs/src/components/ComponentDoc',
priority: 0.8,
getData: async () => {
- const componentsInfo = {
- Ref: {
- displayName: 'Ref',
- props: [
- {
- description: ['Called when a child component will be mounted or updated.'],
- name: 'innerRef',
- type: 'func',
- required: true,
- tags: [
- {
- title: 'param',
- description: 'Referred node.',
- type: {
- type: 'NameExpression',
- name: 'HTMLElement',
- },
- name: 'node',
- },
- ],
- },
- ],
- type: 'addon',
- isParent: true,
- subcomponents: [],
- docblock: {
- tags: [],
- description: [
- 'This component exposes the `innerRef` prop that supports functional and React.createRef()/React.useRef() API and returns the DOM node of both functional and class component children.',
- ],
- },
- examplesExist: true,
- },
- }
- const sidebarSections = getSidebarSections('Ref')
+ const componentsInfo = getComponentGroupInfo(baseInfo.displayName)
+ const sidebarSections = getSidebarSections(baseInfo.displayName)
return {
componentsInfo,
exampleSources,
sidebarSections,
- displayName: 'Ref',
- deprecated: false,
- seeTags: [],
+ displayName: baseInfo.displayName,
+ deprecated: !!_.find(
+ _.get(componentsInfo[baseInfo.displayName], 'docblock.tags'),
+ (tag) => tag.title === 'deprecated',
+ ),
+ seeTags: getInfoForSeeTags(componentsInfo[baseInfo.displayName]),
}
},
- },
+ })),
// Routes for layouts, i.e. /layouts/theming
..._.map(await getLayoutPaths(), ({ routeName, componentFilename }) => ({
diff --git a/test/specs/modules/Dropdown/Dropdown-test.js b/test/specs/modules/Dropdown/Dropdown-test.js
index 91210d2d7c..491a3423c2 100644
--- a/test/specs/modules/Dropdown/Dropdown-test.js
+++ b/test/specs/modules/Dropdown/Dropdown-test.js
@@ -84,8 +84,8 @@ function dropdownInputIsFocused() {
}
const dropdownMenuIsOpen = () => {
- wrapper.childAt(0).should.have.className('active')
- wrapper.childAt(0).should.have.className('visible')
+ wrapper.should.have.className('active')
+ wrapper.should.have.className('visible')
const menu = wrapper.find('DropdownMenu')
try {
@@ -262,19 +262,19 @@ describe('Dropdown', () => {
it('defaults to 0', () => {
wrapperShallow( )
- wrapper.childAt(0).should.have.prop('tabIndex', 0)
+ wrapper.should.have.prop('tabIndex', 0)
})
it('defaults to -1 when disabled', () => {
wrapperShallow( )
- wrapper.childAt(0).should.have.prop('tabIndex', -1)
+ wrapper.should.have.prop('tabIndex', -1)
})
it('applies when defined', () => {
wrapperShallow( )
- wrapper.childAt(0).should.have.prop('tabIndex', 1)
+ wrapper.should.have.prop('tabIndex', 1)
})
describe('tabIndex', () => {
@@ -435,7 +435,7 @@ describe('Dropdown', () => {
const event = { foo: 'bar' }
wrapperShallow( )
- wrapper.childAt(0).simulate('blur', event)
+ wrapper.simulate('blur', event)
onBlur.should.have.been.calledOnce()
onBlur.should.have.been.calledWithMatch(event)
@@ -445,12 +445,12 @@ describe('Dropdown', () => {
wrapperShallow( )
const instance = wrapper.instance()
- wrapper.childAt(0).simulate('click', { stopPropagation: _.noop })
+ wrapper.simulate('click', { stopPropagation: _.noop })
dropdownMenuIsOpen()
sandbox.spy(instance, 'handleChange')
const event = { stopPropagation: _.noop }
- wrapper.childAt(0).simulate('blur', event)
+ wrapper.simulate('blur', event)
instance.handleChange.should.have.been.calledWithMatch(event, options[0].value)
})
@@ -478,7 +478,7 @@ describe('Dropdown', () => {
it('sets searchQuery state to empty', () => {
wrapperMount( )
- wrapper.childAt(0).simulate('blur')
+ wrapper.simulate('blur')
wrapper.find('input.search').should.have.value('')
})
diff --git a/test/utils/nestedShallow.js b/test/utils/nestedShallow.js
index 2ffc5a01ff..1b1c41f3d9 100644
--- a/test/utils/nestedShallow.js
+++ b/test/utils/nestedShallow.js
@@ -1,4 +1,3 @@
-import { Ref } from '@fluentui/react-component-ref'
import enzyme from 'enzyme'
import _ from 'lodash'
import React from 'react'
@@ -10,10 +9,6 @@ const diveToLevel = (wrapper, autoNesting, nestingLevel) => {
nestedWrapper = nestedWrapper.childAt(0)
}
- if (autoNesting && nestedWrapper.is(Ref)) {
- nestedWrapper = nestedWrapper.childAt(0)
- }
-
_.times(nestingLevel, () => {
nestedWrapper = nestedWrapper.childAt(0)
})
diff --git a/yarn.lock b/yarn.lock
index a6a068621d..bd60529197 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1109,14 +1109,6 @@
dependencies:
"@babel/runtime" "^7.10.4"
-"@fluentui/react-component-ref@~0.51.6":
- version "0.51.6"
- resolved "https://registry.yarnpkg.com/@fluentui/react-component-ref/-/react-component-ref-0.51.6.tgz#ba1fc8a82a49f4775a043079ca8a234f3c02a1c4"
- integrity sha512-FrUJKizIdL2PlUji5zMB3cTNICv/zk4/nbX6W9F+FmaEAozEm62MRZWOSAX83bnzPQX0OtPBYTenh+5dAI+BMA==
- dependencies:
- "@babel/runtime" "^7.10.4"
- react-is "^16.6.3"
-
"@hapi/address@^4.1.0":
version "4.1.0"
resolved "https://registry.yarnpkg.com/@hapi/address/-/address-4.1.0.tgz#d60c5c0d930e77456fdcde2598e77302e2955e1d"