/*! * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved. * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") * * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * * See the License for the specific language governing permissions and limitations under the License. */ import { type ReactNode } from "react"; import { type ReactRootElements } from "./createReactRootElements.js"; interface GetReactWebComponentOptions { getReactComponent: (reactRootElements: ReactRootElements) => ReactNode; nonce: string; webComponentName?: string; } export declare const webComponentDataAttributeName = "data-odyssey-react-web-component"; export declare const versionedWebComponentName: string; declare const SsrFriendlyHtmlElementClass: { new (): HTMLElement; prototype: HTMLElement; }; export declare class WebComponentClass extends SsrFriendlyHtmlElementClass { #private; readonly elementName: string; constructor(); /** * Provides the function used to initialize react content that is specific to this instance of the web component, which is used later in the connectedCallback. * * Always set immediately after creation via document.createElement */ setGetReactComponent(getReactComponent: GetReactComponentInWebComponent): void; connectedCallback(): void; disconnectedCallback(): void; } /** * Returns a constructed web component which manages it's own shadow dom and react dom roots. A custom name can be specified, otherwise a default is provided */ export declare const getReactWebComponent: ({ webComponentName, getReactComponent, nonce, }: GetReactWebComponentOptions) => WebComponentClass; export type GetReactComponentInWebComponent = (reactRootElements: ReactRootElements) => ReactNode; export type RenderReactInWebComponentProps = { /** * This is a callback function for rendering your React component or app in the Web Component. It gives you access to the Shadow DOM elements if you need them for Odyssey, Emotion, or MUI. * * You will need to add `` elements if you want to pass child elements or components or React apps. You can have multiple slots in your app if you add a `name` attribute to your `` elements. */ getReactComponent: GetReactComponentInWebComponent; /** * Optional nonce for CSP compliance. Defaults to `window.cspNonce`. */ nonce?: string; /** * One or more HTML elements that are going to render as `children` of the web component. If your React component doesn't take children, this is unnecessary. * * Typically, a React app root element is passed, but it can include an array of other elements if there are multiple slots for children. * * You will need to have rendered `` elements in your React component or `children` won't show up. */ webComponentChildren?: HTMLElement | HTMLElement[]; /** * Optional name given to this web component. * Defaults to a 'odyssey-react-wc-' plus the current odyssey version */ webComponentName?: string; } & ({ /** * The React app renders in the web component, but the web component needs to be rendered in the document. * * This is the element the web component is rendered into. */ webComponentParentElement: HTMLElement; webComponentRootElement?: never; } | { webComponentParentElement?: never; /** * @deprecated Use `webComponentParentElement` instead. */ webComponentRootElement: HTMLElement; }); /** * Lets you render React apps or components in a Web Component. * * This is useful when global styles are causing conflicts with your React components. */ export declare const renderReactInWebComponent: ({ webComponentName, getReactComponent, webComponentChildren, webComponentParentElement, webComponentRootElement, nonce, }: RenderReactInWebComponentProps) => WebComponentClass; export {}; //# sourceMappingURL=renderReactInWebComponent.d.ts.map