@react-spectrum/s2
Version:
Spectrum 2 UI components in React
1 lines • 4.22 kB
Source Map (JSON)
{"mappings":"ACuEA;EAAA;;;;;;EAAA;IAAA;;;;;;EAAA;IAAA;;;;;EAEqB;;;;EAAA;;;;;;EAAA;IAAA;;;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA","sources":["4752c64624f60d5a","packages/@react-spectrum/s2/src/Provider.tsx"],"sourcesContent":["@import \"60fcf4ad83e6776f\";\n@import \"ac1adcd813d529e0\";\n","/*\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 {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 {\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\nexport function Provider(props: ProviderProps): ReactNode {\n let result = <ProviderInner {...props} />;\n let parentColorScheme = useContext(ColorSchemeContext);\n let colorScheme = props.colorScheme || parentColorScheme;\n if (colorScheme !== parentColorScheme) {\n result = <ColorSchemeContext.Provider value={colorScheme}>{result}</ColorSchemeContext.Provider>;\n }\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});\n\nfunction ProviderInner(props: ProviderProps) {\n let {\n elementType: Element = 'div',\n UNSAFE_style,\n UNSAFE_className = '',\n styles,\n children,\n background,\n colorScheme\n } = props;\n let {locale, direction} = useLocale();\n return (\n <Element\n lang={locale}\n dir={direction}\n style={UNSAFE_style}\n className={UNSAFE_className + mergeStyles(\n styles,\n providerStyles({background, colorScheme})\n )}>\n {children}\n </Element>\n );\n}\n"],"names":[],"version":3,"file":"Provider.css.map"}