packages/theme/src/ShadowDOMProvider.tsx - develop - bearury/ui-kit-ce

packages/theme/src/ShadowDOMProvider.tsx

63 строки2 KB

Урядышев Павел Александрович

fix(dropdown): исправлено поведение компонента внутри Shadow DOM

03 окт 2025, 15:53

03 окт 2025, 15:53a3f5d04

'use client'

import { JssProvider, SheetsRegistry, createGenerateId } from 'react-jss'
import * as React from 'react'
import { create as createJss, Jss } from 'jss'
import preset from 'jss-preset-default'
import { ThemeProvider } from './ThemeProvider'
import { createTheme } from './createTheme'
import { getThemeDefaults } from './utils'

export type ShadowDOMContextProps = Record<string, unknown>

const ShadowDOMContext = React.createContext<ShadowDOMContextProps>(
  undefined as unknown as ShadowDOMContextProps
)

//#region Перезапись дефолтной темы с помощью глобальной переменной DEFAULT_UIK_THEME (только для команды ИДС, в остальных случаях не рекомендуется к использованию!!!)

const defaultTheme = createTheme(getThemeDefaults())

//#endregion

export const ShadowDOMProvider = React.forwardRef<
  HTMLDivElement,
  React.PropsWithChildren<React.ComponentPropsWithRef<'div'>>
>(({ children, ...rest }, ref) => {
  const sheetsRegistry = new SheetsRegistry()

  const generateId = createGenerateId()

  const shadowRef = React.useRef<HTMLDivElement | null>(null)
  const [jssInstance, setJssInstance] = React.useState<Jss>()

  React.useLayoutEffect(() => {
    const jss = createJss({
      ...preset(),
      insertionPoint: shadowRef.current as HTMLDivElement,
    })

    setJssInstance(jss)
  }, [])

  return (
    <ShadowDOMContext.Provider value={{}}>
      <div ref={ref} {...rest}>
        <JssProvider
          registry={sheetsRegistry}
          generateId={generateId}
          jss={jssInstance}
        >
          <div ref={shadowRef} data-v-uik-shadow-dom-style-container="true" />
          <ThemeProvider theme={defaultTheme}>{children}</ThemeProvider>
        </JssProvider>
      </div>
    </ShadowDOMContext.Provider>
  )
})

export const useIsInsideShadowDOM = (): boolean => {
  return !!React.useContext(
    ShadowDOMContext as unknown as React.Context<ShadowDOMContextProps>
  )
}