@react-spectrum/provider 3.1.4 → 3.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/provider",
-  "version": "3.1.4",
+  "version": "3.3.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -32,22 +32,23 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@react-aria/i18n": "^3.3.1",
-    "@react-aria/overlays": "^3.6.3",
-    "@react-aria/utils": "^3.8.0",
-    "@react-spectrum/utils": "^3.5.2",
-    "@react-types/provider": "^3.1.1",
-    "@react-types/shared": "^3.6.0",
+    "@react-aria/i18n": "^3.3.5",
+    "@react-aria/overlays": "^3.7.4",
+    "@react-aria/utils": "^3.11.1",
+    "@react-spectrum/utils": "^3.6.4",
+    "@react-types/provider": "^3.4.0",
+    "@react-types/shared": "^3.11.0",
     "clsx": "^1.1.1"
   },
   "devDependencies": {
     "@adobe/spectrum-css-temp": "3.0.0-alpha.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3aae08e7d8a75382bedcddac7c86107e40db9296"
+  "gitHead": "54c2366c4f31bd4bf619126131cd583c12972acc"
 }

package/src/Provider.tsx

@@ -10,6 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
+import {
+  BreakpointProvider,
+  shouldKeepSpectrumClassNames,
+  useDOMRef,
+  useMatchedBreakpoints,
+  useStyleProps
+} from '@react-spectrum/utils';
 import clsx from 'clsx';
 import {DOMRef} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
@@ -17,11 +24,6 @@ import {I18nProvider, useLocale} from '@react-aria/i18n';
 import {ModalProvider, useModalProvider} from '@react-aria/overlays';
 import {ProviderContext, ProviderProps} from '@react-types/provider';
 import React, {useContext, useEffect, useRef} from 'react';
-import {
-  shouldKeepSpectrumClassNames,
-  useDOMRef,
-  useStyleProps
-} from '@react-spectrum/utils';
 import styles from '@adobe/spectrum-css-temp/components/page/vars.css';
 import typographyStyles from '@adobe/spectrum-css-temp/components/typography/index.css';
 import {useColorScheme, useScale} from './mediaQueries';
@@ -29,10 +31,14 @@ import {useColorScheme, useScale} from './mediaQueries';
 import {version} from '../package.json';
 
 const Context = React.createContext<ProviderContext | null>(null);
+Context.displayName = 'ProviderContext';
+
+const DEFAULT_BREAKPOINTS = {S: 640, M: 768, L: 1024, XL: 1280, XXL: 1536};
 
 function Provider(props: ProviderProps, ref: DOMRef<HTMLDivElement>) {
   let prevContext = useProvider();
   let prevColorScheme = prevContext && prevContext.colorScheme;
+  let prevBreakpoints = prevContext && prevContext.breakpoints;
   let {
     theme = prevContext && prevContext.theme,
     defaultColorScheme
@@ -49,6 +55,7 @@ function Provider(props: ProviderProps, ref: DOMRef<HTMLDivElement>) {
     colorScheme = usePrevColorScheme ? prevColorScheme : autoColorScheme,
     scale = prevContext ? prevContext.scale : autoScale,
     locale = prevContext ? prevLocale : null,
+    breakpoints = prevContext ? prevBreakpoints : DEFAULT_BREAKPOINTS,
     children,
     isQuiet,
     isEmphasized,
@@ -63,6 +70,7 @@ function Provider(props: ProviderProps, ref: DOMRef<HTMLDivElement>) {
   let currentProps = {
     version,
     theme,
+    breakpoints,
     colorScheme,
     scale,
     isQuiet,
@@ -72,6 +80,8 @@ function Provider(props: ProviderProps, ref: DOMRef<HTMLDivElement>) {
     isReadOnly,
     validationState
   };
+
+  let matchedBreakpoints = useMatchedBreakpoints(breakpoints);
   let filteredProps = {};
   Object.entries(currentProps).forEach(([key, value]) => value !== undefined && (filteredProps[key] = value));
 
@@ -81,7 +91,7 @@ function Provider(props: ProviderProps, ref: DOMRef<HTMLDivElement>) {
   // Only wrap in a DOM node if the theme, colorScheme, or scale changed
   let contents = children;
   let domProps = filterDOMProps(otherProps);
-  let {styleProps} = useStyleProps(otherProps);
+  let {styleProps} = useStyleProps(otherProps, undefined, {matchedBreakpoints});
   if (!prevContext || props.locale || theme !== prevContext.theme || colorScheme !== prevContext.colorScheme || scale !== prevContext.scale || Object.keys(domProps).length > 0 || otherProps.UNSAFE_className || Object.keys(styleProps.style).length > 0) {
     contents = (
       <ProviderWrapper {...props} UNSAFE_style={{isolation: !prevContext ? 'isolate' : undefined, ...styleProps.style}} ref={ref}>
@@ -93,9 +103,11 @@ function Provider(props: ProviderProps, ref: DOMRef<HTMLDivElement>) {
   return (
     <Context.Provider value={context}>
       <I18nProvider locale={locale}>
-        <ModalProvider>
-          {contents}
-        </ModalProvider>
+        <BreakpointProvider matchedBreakpoints={matchedBreakpoints}>
+          <ModalProvider>
+            {contents}
+          </ModalProvider>
+        </BreakpointProvider>
       </I18nProvider>
     </Context.Provider>
   );
@@ -173,6 +185,10 @@ const ProviderWrapper = React.forwardRef(function ProviderWrapper(props: Provide
   );
 });
 
+/**
+ * Returns the various settings and styles applied by the nearest parent Provider.
+ * Properties explicitly set by the nearest parent Provider override those provided by preceeding Providers.
+ */
 export function useProvider(): ProviderContext {
   return useContext(Context);
 }

package/dist/main.css.map

@@ -1 +0,0 @@
-{"mappings":"AAYA,iBACE,sDAAgE,CAGhE,yCACF,CCJA,iBACE,kHAA6C,CAC7C,wDAAoC,CACpC,2CAyBF,CAvBE,0BACE,kGACF,CAEA,0BACE,oFACF,CAMA,yDACE,0HACF,CAEA,0BACE,yHACF,CAEA,0BACE,0RACF,CCgGF,6EAIE,gGAA2C,CAC3C,kGAAoD,CACpD,sGAAoD,CACpD,2DACF,CAEA,8BACE,0DACF","sources":["./node_modules/@adobe/spectrum-css-temp/components/page/skin.css","./node_modules/@adobe/spectrum-css-temp/components/typography/font.css","./node_modules/@adobe/spectrum-css-temp/components/typography/index.css"],"sourcesContent":["/*\nCopyright 2019 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\n& {\n  background-color: var(--spectrum-alias-background-color-default);\n\n  /* Prevent tap highlights */\n  -webkit-tap-highlight-color: rgba(0,0,0,0);\n}\n","/*\nCopyright 2019 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n@import '../commons/index.css';\n\n.spectrum {\n  font-family: var(--spectrum-font-family-base);\n  font-size: var(--spectrum-text-size);\n  color: var(--spectrum-body-text-color, var(--spectrum-global-color-gray-800));\n\n  &:lang(ar) {\n    font-family: var(--spectrum-font-family-ar);\n  }\n\n  &:lang(he) {\n    font-family: var(--spectrum-font-family-he);\n  }\n\n  &:lang(zh-Hans) {\n    font-family: var(--spectrum-font-family-zhhans);\n  }\n\n  &:lang(zh) {\n    font-family: var(--spectrum-font-family-zh);\n  }\n\n  &:lang(ko) {\n    font-family: var(--spectrum-font-family-ko);\n  }\n\n  &:lang(ja) {\n    font-family: var(--spectrum-font-family-ja);\n  }\n}\n","/*\nCopyright 2019 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\n@import '../commons/index.css';\n@import 'font.css';\n\n/*@mixin typography .spectrum-Body1 {}\n@mixin typography .spectrum-Body2 {}\n@mixin typography .spectrum-Body3 {}\n@mixin typography .spectrum-Body4 {}\n@mixin typography .spectrum-Body5 {}\n@mixin typography .spectrum-Heading1 {}\n@mixin typography .spectrum-Heading2 {}\n@mixin typography .spectrum-Heading3 {}\n@mixin typography .spectrum-Heading4 {}\n@mixin typography .spectrum-Heading5 {}\n@mixin typography .spectrum-Heading6 {}\n@mixin typography .spectrum-Subheading {}\n@mixin typography .spectrum-Detail {}\n@mixin typography .spectrum-Heading1--quiet, heading-quiet-1 {}\n@mixin typography .spectrum-Heading2--quiet, heading-quiet-2 {}\n@mixin typography .spectrum-Heading1--strong, heading-strong-1 {}\n@mixin typography .spectrum-Heading2--strong, heading-strong-2 {}\n@mixin typography .spectrum-Heading1--display, display-1 {}\n@mixin typography .spectrum-Heading2--display, display-2 {}\n@mixin typography .spectrum-Heading1--display.spectrum-Heading1--strong, display-strong-1 {}\n@mixin typography .spectrum-Heading2--display.spectrum-Heading2--strong, display-strong-2 {}\n@mixin typography .spectrum-Heading1--display.spectrum-Heading1--quiet, display-quiet-1 {}\n@mixin typography .spectrum-Heading2--display.spectrum-Heading2--quiet, display-quiet-2 {}\n\n.spectrum-Typography {\n  @mixin typographyMargins .spectrum-Body1 {}\n  @mixin typographyMargins .spectrum-Body2 {}\n  @mixin typographyMargins .spectrum-Body3 {}\n  @mixin typographyMargins .spectrum-Body4 {}\n  @mixin typographyMargins .spectrum-Body5 {}\n  @mixin typographyMargins .spectrum-Heading1 {}\n  @mixin typographyMargins .spectrum-Heading2 {}\n  @mixin typographyMargins .spectrum-Heading3 {}\n  @mixin typographyMargins .spectrum-Heading4 {}\n  @mixin typographyMargins .spectrum-Heading5 {}\n  @mixin typographyMargins .spectrum-Heading6 {}\n  @mixin typographyMargins .spectrum-Subheading {}\n  @mixin typographyMargins .spectrum-Detail {}\n  @mixin typographyMargins .spectrum-Heading1--quiet, heading-quiet-1 {}\n  @mixin typographyMargins .spectrum-Heading2--quiet, heading-quiet-2 {}\n  @mixin typographyMargins .spectrum-Heading1--strong, heading-strong-1 {}\n  @mixin typographyMargins .spectrum-Heading2--strong, heading-strong-2 {}\n  @mixin typographyMargins .spectrum-Heading1--display, display-1 {}\n  @mixin typographyMargins .spectrum-Heading2--display, display-2 {}\n  @mixin typographyMargins .spectrum-Heading1--display.spectrum-Heading1--strong, display-strong-1 {}\n  @mixin typographyMargins .spectrum-Heading2--display.spectrum-Heading2--strong, display-strong-2 {}\n  @mixin typographyMargins .spectrum-Heading1--display.spectrum-Heading1--quiet, display-quiet-1 {}\n  @mixin typographyMargins .spectrum-Heading2--display.spectrum-Heading2--quiet, display-quiet-2 {}\n}\n\n.spectrum-Article {\n  font-family: var(--spectrum-body-article-1-text-font-family);\n  @mixin typography .spectrum-Body1, body-article-1 {}\n  @mixin typography .spectrum-Body2, body-article-2 {}\n  @mixin typography .spectrum-Body3, body-article-3 {}\n  @mixin typography .spectrum-Body4, body-article-4 {}\n  @mixin typography .spectrum-Body5, body-article-5 {}\n  @mixin typography .spectrum-Heading1, heading-article-1 {}\n  @mixin typography .spectrum-Heading2, heading-article-2 {}\n  @mixin typography .spectrum-Heading3, heading-article-3 {}\n  @mixin typography .spectrum-Heading4, heading-article-4 {}\n  @mixin typography .spectrum-Heading5, heading-article-5 {}\n  @mixin typography .spectrum-Heading6, heading-article-6 {}\n  @mixin typography .spectrum-Subheading, subheading-article {}\n  @mixin typography .spectrum-Detail, detail-article {}\n  @mixin typography .spectrum-Heading1--quiet, heading-quiet-article-1 {}\n  @mixin typography .spectrum-Heading2--quiet, heading-quiet-article-2 {}\n  @mixin typography .spectrum-Heading1--display, display-article-1 {}\n  @mixin typography .spectrum-Heading2--display, display-article-2 {}\n  @mixin typography .spectrum-Heading1--display.spectrum-Heading1--quiet, display-quiet-article-1 {}\n  @mixin typography .spectrum-Heading2--display.spectrum-Heading2--quiet, display-quiet-article-2 {}\n}\n.spectrum {\n  &:lang(ja),\n  &:lang(ko),\n  &:lang(zh) {\n    @mixin typography .spectrum-Body1, body-han-1 {}\n    @mixin typography .spectrum-Body2, body-han-2 {}\n    @mixin typography .spectrum-Body3, body-han-3 {}\n    @mixin typography .spectrum-Body4, body-han-4 {}\n    @mixin typography .spectrum-Body5, body-han-5 {}\n    @mixin typography .spectrum-Heading1, heading-han-1 {}\n    @mixin typography .spectrum-Heading2, heading-han-2 {}\n    @mixin typography .spectrum-Heading3, heading-han-3 {}\n    @mixin typography .spectrum-Heading4, heading-han-4 {}\n    @mixin typography .spectrum-Heading5, heading-han-5 {}\n    @mixin typography .spectrum-Heading6, heading-han-6 {}\n    @mixin typography .spectrum-Subheading, subheading-han {}\n    @mixin typography .spectrum-Detail, detail-han {}\n    @mixin typography .spectrum-Heading1--quiet, heading-quiet-han-1 {}\n    @mixin typography .spectrum-Heading2--quiet, heading-quiet-han-2 {}\n    @mixin typography .spectrum-Heading1--strong, heading-strong-han-1 {}\n    @mixin typography .spectrum-Heading2--strong, heading-strong-han-2 {}\n    @mixin typography .spectrum-Heading1--display, display-han-1 {}\n    @mixin typography .spectrum-Heading2--display, display-han-2 {}\n    @mixin typography .spectrum-Heading1--display.spectrum-Heading1--strong, display-strong-han-1 {}\n    @mixin typography .spectrum-Heading2--display.spectrum-Heading2--strong, display-strong-han-2 {}\n    @mixin typography .spectrum-Heading1--display.spectrum-Heading1--quiet, display-quiet-han-1 {}\n    @mixin typography .spectrum-Heading2--display.spectrum-Heading2--quiet, display-quiet-han-2 {}\n  }\n}\n@mixin typography .spectrum-Code1, body-code-1, true {\n  font-family: var(--spectrum-body-code-1-text-font-family);\n}\n@mixin typography .spectrum-Code2, body-code-2, true {\n  font-family: var(--spectrum-body-code-2-text-font-family);\n}\n@mixin typography .spectrum-Code3, body-code-3, true {\n  font-family: var(--spectrum-body-code-3-text-font-family);\n}\n@mixin typography .spectrum-Code4, body-code-4, true {\n  font-family: var(--spectrum-body-code-4-text-font-family);\n}\n@mixin typography .spectrum-Code5, body-code-5, true {\n  font-family: var(--spectrum-body-code-5-text-font-family);\n}*/\n\n/*\n  The &.spectrum makes it so users can do <div class=\"spectrum spectrum--large\"> and still get the right font sizes\n  Without this, they would have to do <div class=\"spectrum--large\"><div class=\"spectrum\">, which makes no sense\n*/\n&.spectrum,\n&.spectrum-Body,\n.spectrum,\n.spectrum-Body {\n  font-size: var(--spectrum-body-4-text-size);\n  font-weight: var(--spectrum-body-4-text-font-weight);\n  line-height: var(--spectrum-body-4-text-line-height);\n  font-style: var(--spectrum-body-4-text-font-style);\n}\n\n.spectrum-Body--italic {\n  font-style: var(--spectrum-body-4-emphasis-text-font-style);\n}\n\n/*\n.spectrum-Body--large {\n  @extend .spectrum-Body2;\n}\n\n.spectrum-Body--small {\n  @extend .spectrum-Body5;\n}\n\n.spectrum-Body--secondary {\n  @extend .spectrum-Body4;\n}\n\n.spectrum-Heading--display {\n  @extend .spectrum-Heading2--display.spectrum-Heading2--quiet;\n}\n\n.spectrum-Heading--pageTitle {\n  @extend .spectrum-Heading2--quiet;\n}\n\n.spectrum-Heading--subtitle1 {\n  @extend .spectrum-Heading4;\n}\n\n.spectrum-Heading--subtitle2 {\n  @extend .spectrum-Heading6;\n}\n\n.spectrum-Heading--subtitle3 {\n  @extend .spectrum-Subheading;\n}*/\n"],"names":[],"version":3,"file":"main.css.map"}