@react-spectrum/s2
Version:
Spectrum 2 UI components in React
1 lines • 5.34 kB
Source Map (JSON)
{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AA2CM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAAqC;AAM5E,SAAS,0CAAS,KAAoB;IAC3C,IAAI,uBAAS,gBAAC;QAAe,GAAG,KAAK;;IACrC,IAAI,oBAAoB,CAAA,GAAA,iBAAS,EAAE;IACnC,IAAI,cAAc,MAAM,WAAW,IAAI;IACvC,uBAAS,gBAAC,0CAAmB,QAAQ;QAAC,OAAO;kBAAc;;IAE3D,IAAI,MAAM,MAAM,EACd,uBAAS,gBAAC,CAAA,GAAA,mBAAW;QAAE,QAAQ,MAAM,MAAM;kBAAG;;IAGhD,IAAI,MAAM,MAAM,EACd,uBAAS,gBAAC,CAAA,GAAA,qBAAa;QAAG,GAAG,MAAM,MAAM;kBAAG;;IAG9C,OAAO;AACT;;AAIA,IAAI;;;;;;;;;;;;;;;AAuBJ,SAAS,oCAAc,KAAoB;IACzC,IAAI,EACF,aAAa,UAAU,KAAK,gBAC5B,YAAY,oBACZ,mBAAmB,YACnB,MAAM,YACN,QAAQ,cACR,mFAAmF;IACnF,aAAa,YAAY,SAAS,SAAS,wBAC3C,WAAW,EACZ,GAAG;IACJ,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAClC,qBACE,iBAAC;QACE,GAAG,CAAA,GAAA,qBAAa,EAAE,MAAM;QACzB,MAAM;QACN,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,CAAA,GAAA,yCAAU,EACtC,QACA,qCAAe;wBAAC;yBAAY;QAAW;;0BAEzC,gBAAC,CAAA,GAAA,yCAAI;YACJ;;;AAGP","sources":["packages/@react-spectrum/s2/src/Provider.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport type {ColorScheme, Router} from '@react-types/provider';\nimport {colorScheme, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {createContext, JSX, ReactNode, useContext} from 'react';\nimport {DOMProps} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {Fonts} from './Fonts';\nimport {generateDefaultColorSchemeStyles} from './page.macro' with {type: 'macro'};\nimport {I18nProvider, RouterProvider, useLocale} from 'react-aria-components';\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\n\nexport interface ProviderProps extends UnsafeStyles, DOMProps {\n /** The content of the Provider. */\n children: ReactNode,\n /**\n * The locale for your application as a [BCP 47](https://www.ietf.org/rfc/bcp/bcp47.txt) language code.\n * Defaults to the browser/OS language setting.\n * @default 'en-US'\n */\n locale?: string,\n /**\n * Provides a client side router to all nested React Spectrum links to enable client side navigation.\n */\n router?: Router,\n /**\n * The color scheme for your application.\n * Defaults to operating system preferences.\n */\n colorScheme?: ColorScheme,\n /** The background for this provider. If not provided, the background is transparent. */\n background?: 'base' | 'layer-1' | 'layer-2',\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StyleString,\n /**\n * The DOM element to render.\n * @default div\n */\n elementType?: keyof JSX.IntrinsicElements\n}\n\nexport const ColorSchemeContext = createContext<ColorScheme | 'light dark' | null>(null);\n\n/**\n * Provider is the container for all React Spectrum components.\n * It loads the font and sets the colorScheme, locale, and other application level settings.\n */\nexport function Provider(props: ProviderProps): JSX.Element {\n let result = <ProviderInner {...props} />;\n let parentColorScheme = useContext(ColorSchemeContext);\n let colorScheme = props.colorScheme || parentColorScheme;\n result = <ColorSchemeContext.Provider value={colorScheme}>{result}</ColorSchemeContext.Provider>;\n\n if (props.locale) {\n result = <I18nProvider locale={props.locale}>{result}</I18nProvider>;\n }\n\n if (props.router) {\n result = <RouterProvider {...props.router}>{result}</RouterProvider>;\n }\n\n return result;\n}\n\ngenerateDefaultColorSchemeStyles();\n\nlet providerStyles = style({\n ...colorScheme(),\n '--s2-container-bg': {\n type: 'backgroundColor',\n value: {\n background: {\n base: 'base',\n 'layer-1': 'layer-1',\n 'layer-2': 'layer-2'\n }\n }\n },\n backgroundColor: {\n // Don't set a background unless one is requested.\n background: {\n base: '--s2-container-bg',\n 'layer-1': '--s2-container-bg',\n 'layer-2': '--s2-container-bg'\n }\n },\n isolation: 'isolate'\n});\n\nfunction ProviderInner(props: ProviderProps) {\n let {\n elementType: Element = 'div',\n UNSAFE_style,\n UNSAFE_className = '',\n styles,\n children,\n // Set a default background if the provider is rendered as the root <html> element.\n background = Element === 'html' ? 'base' : undefined,\n colorScheme\n } = props;\n let {locale, direction} = useLocale();\n return (\n <Element\n {...filterDOMProps(props)}\n lang={locale}\n dir={direction}\n style={UNSAFE_style}\n className={UNSAFE_className + mergeStyles(\n styles,\n providerStyles({background, colorScheme})\n )}>\n <Fonts />\n {children}\n </Element>\n );\n}\n"],"names":[],"version":3,"file":"Provider.mjs.map"}