add shadow dom test

Author: sbaechler

cypress/e2e/useMultipleCombobox.cy.js

@@ -6,11 +6,52 @@ describe('useMultipleCombobox', () => {
   it('can select multiple items', () => {
     cy.findByRole('button', {name: 'toggle menu'}).click()
     cy.findByRole('option', {name: 'Green'}).click()
+    cy.findByRole('button', {name: 'toggle menu'}).should(
+      'have.attr',
+      'aria-expanded',
+      'true',
+    )
     cy.findByRole('option', {name: 'Gray'}).click()
     cy.findByRole('button', {name: 'toggle menu'}).click()
+    cy.findByRole('button', {name: 'toggle menu'}).should(
+      'have.attr',
+      'aria-expanded',
+      'false',
+    )
     cy.findByText('Black').should('be.visible')
     cy.findByText('Red').should('be.visible')
     cy.findByText('Green').should('be.visible')
     cy.findByText('Gray').should('be.visible')
   })
 })
+
+describe('useMultipleCombobox in shadow DOM', () => {
+  before(() => {
+    cy.visit('/shadow-dom/useMultipleCombobox')
+  })
+
+  it('can select multiple items within a shadow DOM', () => {
+    cy.get('[data-testid="shadow-root"]')
+      .shadow()
+      .within(() => {
+        cy.findByRole('button', {name: 'toggle menu'}).click()
+        cy.findByRole('option', {name: 'Green'}).click()
+        cy.findByRole('button', {name: 'toggle menu'}).should(
+          'have.attr',
+          'aria-expanded',
+          'true',
+        )
+        cy.findByRole('option', {name: 'Gray'}).click()
+        cy.findByRole('button', {name: 'toggle menu'}).click()
+        cy.findByRole('button', {name: 'toggle menu'}).should(
+          'have.attr',
+          'aria-expanded',
+          'false',
+        )
+        cy.findByText('Black').should('be.visible')
+        cy.findByText('Red').should('be.visible')
+        cy.findByText('Green').should('be.visible')
+        cy.findByText('Gray').should('be.visible')
+      })
+  })
+})

docusaurus/pages/shadow-dom/useMultipleCombobox.js

@@ -0,0 +1,15 @@
+import * as React from 'react'
+
+import DropdownMultipleCombobox from '../useMultipleCombobox'
+import {ReactShadowRoot} from '../../../test/react-shadow'
+
+export default function MultipleComboboxShadow() {
+  return (
+    <div data-testid="shadow-root">
+      <ReactShadowRoot>
+        <h2>Shadow DOM</h2>
+        <DropdownMultipleCombobox />
+      </ReactShadowRoot>
+    </div>
+  )
+}

docusaurus/pages/shadow-dom/useSelect.js

@@ -0,0 +1,10 @@
+import * as React from 'react'
+
+import DropdownSelect from '../useSelect'
+import {ReactShadowRoot} from '../../../test/react-shadow'
+
+export default function DropdownSelectShadow() {
+  return <ReactShadowRoot>
+    <DropdownSelect />
+  </ReactShadowRoot>
+}

src/__tests__/downshift.shadow-root.js

@@ -0,0 +1,35 @@
+import * as React from 'react'
+import {render} from '@testing-library/react'
+import Downshift from '../'
+import DropdownSelect from '../../test/useSelect.test'
+import DropdownCombobox from '../../test/useCombobox.test'
+import DropdownMultipleSelect from '../../test/useMultipleSelect.test'
+import {ReactShadowRoot} from '../../test/react-shadow'
+
+const Wrapper = ({children}) => {
+  return <ReactShadowRoot>{children}</ReactShadowRoot>
+}
+
+test('Downshift renders with a shadow root', () => {
+  const {container} = render(<Downshift />, {wrapper: Wrapper})
+
+  expect(container.shadowRoot).toBeDefined()
+})
+
+test('DropdownSelect renders with a shadow root', () => {
+  const {container} = render(<DropdownSelect />, {wrapper: Wrapper})
+
+  expect(container.shadowRoot).toBeDefined()
+})
+
+test('DropdownCombobox renders with a shadow root', () => {
+  const {container} = render(<DropdownCombobox />, {wrapper: Wrapper})
+
+  expect(container.shadowRoot).toBeDefined()
+})
+
+test('DropdownMultipleSelect renders with a shadow root', () => {
+  const {container} = render(<DropdownMultipleSelect />, {wrapper: Wrapper})
+
+  expect(container.shadowRoot).toBeDefined()
+})

test/react-shadow.js

@@ -0,0 +1,73 @@
+import React, {useState, useRef, useEffect} from 'react'
+import ReactDOM from 'react-dom'
+
+/**
+ * Utility to render a component with a shadow root.
+ *
+ * Based on React Shadow: https://github.com/apearce/react-shadow-root/blob/master/src/lib/ReactShadowRoot.js
+ */
+
+const constructableStylesheetsSupported =
+  typeof window !== 'undefined' &&
+  window.ShadowRoot &&
+  window.ShadowRoot.prototype.hasOwnProperty('adoptedStyleSheets') &&
+  window.CSSStyleSheet &&
+  window.CSSStyleSheet.prototype.hasOwnProperty('replace')
+
+const shadowRootSupported =
+  typeof window !== 'undefined' &&
+  window.Element &&
+  window.Element.prototype.hasOwnProperty('attachShadow')
+
+/**
+ * @param {object} props Properties passed to the component
+ * @param {boolean} props.declarative  When true, uses a declarative shadow root
+ * @param {boolean} props.delegatesFocus  Expands the focus behavior of elements within the shadow DOM.
+ * @param {string} props.mode Sets the mode of the shadow root. (open or closed)
+ * @param {CSSStyleSheet[]} props.stylesheets Takes an array of CSSStyleSheet objects for constructable stylesheets.
+ */
+const ReactShadowRoot = ({
+  declarative = false,
+  delegatesFocus = false,
+  mode = 'open',
+  stylesheets,
+  children,
+}) => {
+  const [initialized, setInitialized] = useState(false)
+  const placeholder = useRef(null)
+  const shadowRootRef = useRef(null)
+
+  useEffect(() => {
+    if (placeholder.current) {
+      shadowRootRef.current = placeholder.current.parentNode.attachShadow({
+        delegatesFocus,
+        mode,
+      })
+
+      if (stylesheets) {
+        shadowRootRef.current.adoptedStyleSheets = stylesheets
+      }
+
+      setInitialized(true)
+    }
+  }, [delegatesFocus, mode, stylesheets])
+
+  if (!initialized) {
+    if (declarative) {
+      // @ts-ignore
+      return (
+        <template ref={placeholder} shadowroot={mode}>
+          {children}
+        </template>
+      )
+    }
+
+    return <span ref={placeholder}></span>
+  }
+
+  return ReactDOM.createPortal(children, shadowRootRef.current)
+}
+
+ReactShadowRoot.displayName = 'ReactShadowRoot'
+
+export {ReactShadowRoot, constructableStylesheetsSupported, shadowRootSupported}