From 834a48b1a333f0b78c667fa6bc12404802e77253 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Fri, 24 Sep 2021 13:58:53 +0200 Subject: [PATCH 1/2] chore(Ref): remove component --- docs/src/components/Sidebar/Sidebar.js | 21 +++-- .../addons/Ref/Types/RefExampleRef.js | 67 ---------------- .../addons/Ref/Types/RefForwardingExample.js | 54 ------------- docs/src/examples/addons/Ref/Types/index.js | 30 ------- docs/src/examples/addons/Ref/index.js | 28 ------- .../Sidebar/Usage/SidebarExampleTarget.js | 11 +-- .../Types/StickyExampleAdjacentContext.js | 50 +++++------- .../Sticky/Types/StickyExamplePushing.js | 52 +++++------- .../Sticky/Usage/StickyExampleOffset.js | 60 ++++++-------- .../Sticky/Variations/StickyExampleActive.js | 49 ++++++------ .../Variations/StickyExampleOversized.js | 61 +++++++------- docs/static/utils/getComponentMenu.js | 14 +--- index.d.ts | 4 - package.json | 1 - src/addons/Portal/PortalInner.d.ts | 3 - src/addons/Portal/PortalInner.js | 5 +- src/index.js | 3 - src/lib/hooks/useClassNamesOnNode.js | 2 +- src/lib/index.js | 1 + src/lib/isRefObject.js | 6 ++ src/modules/Dropdown/Dropdown.js | 80 +++++++++---------- src/modules/Popup/lib/createReferenceProxy.js | 2 +- src/modules/Sidebar/Sidebar.js | 2 +- src/modules/Sticky/Sticky.js | 2 +- static.routes.js | 77 +++--------------- test/utils/nestedShallow.js | 5 -- yarn.lock | 8 -- 27 files changed, 194 insertions(+), 504 deletions(-) delete mode 100644 docs/src/examples/addons/Ref/Types/RefExampleRef.js delete mode 100644 docs/src/examples/addons/Ref/Types/RefForwardingExample.js delete mode 100644 docs/src/examples/addons/Ref/Types/index.js delete mode 100644 docs/src/examples/addons/Ref/index.js create mode 100644 src/lib/isRefObject.js 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 - - -
Clickable area
-

When you will click there, the sidebar will be closed.

- - + +
Clickable area
+

When you will click there, the sidebar will be closed.

+
Application Content
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) => ( - - ))} - - -
Stuck Content
- - - + +
Stuck Content
+ + + - - -
Stuck Content
- - - - - + + +
Stuck Content
+ + + + ) 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) => ( + + ))} - - -
Stuck Content
- - - + + +
Stuck Content
+ + + - - {_.times(3, (i) => ( - - ))} + + {_.times(3, (i) => ( + + ))} - -
Stuck Content
- - - - - + +
Stuck Content
+ + + + ) 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) => ( - - ))} - - -
Stuck Content
- - - + +
Stuck Content
+ + + - - -
Stuck Content
- - - - - + + +
Stuck Content
+ + + + ) 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) => ( + + ))} - - - - - - - + + + + + + + - - -
Stuck Content
- - - - - + + +
Stuck Content
+ + + + ) 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 + + + ))} + + + - - -
Stuck Content
- - - - - + + +
Stuck Content
+ + + + ) 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/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" From 4dba9e66471e8f015363457383804ac4d75e795e Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Fri, 24 Sep 2021 14:31:09 +0200 Subject: [PATCH 2/2] fix tests --- test/specs/modules/Dropdown/Dropdown-test.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) 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('') })