@instructure/emotion 8.10.1 → 8.10.3-snapshot.12

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.10.2](https://github.com/instructure/instructure-ui/compare/v8.10.1...v8.10.2) (2021-10-01)
+
+**Note:** Version bump only for package @instructure/emotion
+
 ## [8.10.1](https://github.com/instructure/instructure-ui/compare/v8.10.0...v8.10.1) (2021-10-01)
 
 **Note:** Version bump only for package @instructure/emotion

package/LICENSE.md

@@ -0,0 +1,27 @@
+---
+title: The MIT License (MIT)
+category: Getting Started
+order: 9
+---
+
+# The MIT License (MIT)
+
+Copyright (c) 2015 Instructure, Inc.
+
+**Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions.**
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/es/withStyle.js

@@ -26,12 +26,16 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { forwardRef, useState } from 'react';
 import { isEqual } from 'lodash';
 import hoistNonReactStatics from 'hoist-non-react-statics';
+import { warn } from '@instructure/console';
 import { decorator } from '@instructure/ui-decorator';
 import { useTextDirectionContext } from '@instructure/ui-i18n';
 import { bidirectionalPolyfill } from './styleUtils/bidirectionalPolyfill';
 import { getComponentThemeOverride } from './getComponentThemeOverride';
 import { useTheme } from './useTheme';
-
+const defaultValues = {
+  styles: {},
+  makeStyles: () => {}
+};
 /**
  * ---
  * category: utilities/themes
@@ -100,13 +104,24 @@ import { useTheme } from './useTheme';
  * @param {function} generateComponentTheme - The function that returns the component's theme variables object
  * @returns {ReactElement} The decorated WithStyle Component
  */
+
 const withStyle = decorator((ComposedComponent, generateStyle, generateComponentTheme) => {
   const displayName = ComposedComponent.displayName || ComposedComponent.name;
   const WithStyle = /*#__PURE__*/forwardRef((props, ref) => {
     const theme = useTheme();
     const dir = useTextDirectionContext();
+
+    if (props.styles) {
+      warn(false, `Manually passing the "styles" property is not allowed on the ${displayName} component. Using the default styles calculated by the @withStyle decorator instead.\n`, props.styles);
+    }
+
+    if (props.makeStyles) {
+      warn(false, `Manually passing the "makeStyles" property is not allowed on the ${displayName} component. Styles are calculated by the @withStyle decorator.`);
+    }
+
     const componentProps = { ...ComposedComponent.defaultProps,
-      ...props
+      ...props,
+      ...defaultValues
     };
     const themeOverride = getComponentThemeOverride(theme, displayName, ComposedComponent.componentId, componentProps);
     const componentTheme = typeof generateComponentTheme === 'function' ? { ...generateComponentTheme(theme),
@@ -127,10 +142,11 @@ const withStyle = decorator((ComposedComponent, generateStyle, generateComponent
     };
 
     return /*#__PURE__*/React.createElement(ComposedComponent, Object.assign({
-      ref: ref,
+      ref: ref
+    }, props, {
       makeStyles: makeStyleHandler,
       styles: styles
-    }, props));
+    }));
   });
   hoistNonReactStatics(WithStyle, ComposedComponent); // we have to pass these on, because sometimes users
   // access propTypes of the component in other components
@@ -145,8 +161,8 @@ const withStyle = decorator((ComposedComponent, generateStyle, generateComponent
   // eslint-disable-next-line no-param-reassign
 
   ComposedComponent.defaultProps = { ...ComposedComponent.defaultProps,
-    makeStyles: () => {},
-    styles: {}
+    makeStyles: defaultValues.makeStyles,
+    styles: defaultValues.styles
   };
 
   if (process.env.NODE_ENV !== 'production') {

package/lib/withStyle.js

@@ -17,6 +17,8 @@ var _lodash = require("lodash");
 
 var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
 
+var _console = require("@instructure/console");
+
 var _decorator = require("@instructure/ui-decorator/lib/decorator.js");
 
 var _uiI18n = require("@instructure/ui-i18n");
@@ -50,7 +52,10 @@ var _useTheme = require("./useTheme");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
+const defaultValues = {
+  styles: {},
+  makeStyles: () => {}
+};
 /**
  * ---
  * category: utilities/themes
@@ -119,13 +124,24 @@ var _useTheme = require("./useTheme");
  * @param {function} generateComponentTheme - The function that returns the component's theme variables object
  * @returns {ReactElement} The decorated WithStyle Component
  */
+
 const withStyle = (0, _decorator.decorator)((ComposedComponent, generateStyle, generateComponentTheme) => {
   const displayName = ComposedComponent.displayName || ComposedComponent.name;
   const WithStyle = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
     const theme = (0, _useTheme.useTheme)();
     const dir = (0, _uiI18n.useTextDirectionContext)();
+
+    if (props.styles) {
+      (0, _console.warn)(false, `Manually passing the "styles" property is not allowed on the ${displayName} component. Using the default styles calculated by the @withStyle decorator instead.\n`, props.styles);
+    }
+
+    if (props.makeStyles) {
+      (0, _console.warn)(false, `Manually passing the "makeStyles" property is not allowed on the ${displayName} component. Styles are calculated by the @withStyle decorator.`);
+    }
+
     const componentProps = { ...ComposedComponent.defaultProps,
-      ...props
+      ...props,
+      ...defaultValues
     };
     const themeOverride = (0, _getComponentThemeOverride.getComponentThemeOverride)(theme, displayName, ComposedComponent.componentId, componentProps);
     const componentTheme = typeof generateComponentTheme === 'function' ? { ...generateComponentTheme(theme),
@@ -146,10 +162,11 @@ const withStyle = (0, _decorator.decorator)((ComposedComponent, generateStyle, g
     };
 
     return /*#__PURE__*/_react.default.createElement(ComposedComponent, Object.assign({
-      ref: ref,
+      ref: ref
+    }, props, {
       makeStyles: makeStyleHandler,
       styles: styles
-    }, props));
+    }));
   });
   (0, _hoistNonReactStatics.default)(WithStyle, ComposedComponent); // we have to pass these on, because sometimes users
   // access propTypes of the component in other components
@@ -164,8 +181,8 @@ const withStyle = (0, _decorator.decorator)((ComposedComponent, generateStyle, g
   // eslint-disable-next-line no-param-reassign
 
   ComposedComponent.defaultProps = { ...ComposedComponent.defaultProps,
-    makeStyles: () => {},
-    styles: {}
+    makeStyles: defaultValues.makeStyles,
+    styles: defaultValues.styles
   };
 
   if (process.env.NODE_ENV !== 'production') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/emotion",
-  "version": "8.10.1",
+  "version": "8.10.3-snapshot.12+af470a237",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -26,20 +26,20 @@
   "dependencies": {
     "@babel/runtime": "^7.13.10",
     "@emotion/react": "^11.4.1",
-    "@instructure/console": "8.10.1",
-    "@instructure/shared-types": "8.10.1",
-    "@instructure/ui-decorator": "8.10.1",
-    "@instructure/ui-i18n": "8.10.1",
-    "@instructure/ui-themes": "8.10.1",
-    "@instructure/ui-utils": "8.10.1",
+    "@instructure/console": "8.10.3-snapshot.12+af470a237",
+    "@instructure/shared-types": "8.10.3-snapshot.12+af470a237",
+    "@instructure/ui-decorator": "8.10.3-snapshot.12+af470a237",
+    "@instructure/ui-i18n": "8.10.3-snapshot.12+af470a237",
+    "@instructure/ui-themes": "8.10.3-snapshot.12+af470a237",
+    "@instructure/ui-utils": "8.10.3-snapshot.12+af470a237",
     "emotion-theming": "^10.0.27",
     "hoist-non-react-statics": "^3.3.2",
     "lodash": "^4",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.10.1",
-    "@instructure/ui-test-utils": "8.10.1",
+    "@instructure/ui-babel-preset": "8.10.3-snapshot.12+af470a237",
+    "@instructure/ui-test-utils": "8.10.3-snapshot.12+af470a237",
     "@types/lodash": "^4.14.171",
     "cpy-cli": "^3.1.1"
   },
@@ -49,5 +49,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "gitHead": "af470a2374463c265ed1304870b7890fc8bb09a4"
 }

package/src/withStyle.tsx

@@ -32,6 +32,7 @@ import type {
 import { isEqual } from 'lodash'
 import hoistNonReactStatics from 'hoist-non-react-statics'
 
+import { warn } from '@instructure/console'
 import { decorator } from '@instructure/ui-decorator'
 import { useTextDirectionContext } from '@instructure/ui-i18n'
 import { bidirectionalPolyfill } from './styleUtils/bidirectionalPolyfill'
@@ -76,6 +77,11 @@ type WithStyleProps<
   ? WithStylePrivateProps<Style>
   : WithStylePrivateProps<Style> & ThemeOverrideProp<Theme>
 
+const defaultValues = {
+  styles: {},
+  makeStyles: () => {}
+}
+
 /**
  * ---
  * category: utilities/themes
@@ -161,9 +167,25 @@ const withStyle = decorator(
       const theme = useTheme()
       const dir = useTextDirectionContext()
 
+      if (props.styles) {
+        warn(
+          false,
+          `Manually passing the "styles" property is not allowed on the ${displayName} component. Using the default styles calculated by the @withStyle decorator instead.\n`,
+          props.styles
+        )
+      }
+
+      if (props.makeStyles) {
+        warn(
+          false,
+          `Manually passing the "makeStyles" property is not allowed on the ${displayName} component. Styles are calculated by the @withStyle decorator.`
+        )
+      }
+
       const componentProps: Props = {
         ...ComposedComponent.defaultProps,
-        ...props
+        ...props,
+        ...defaultValues
       }
 
       const themeOverride = getComponentThemeOverride(
@@ -205,9 +227,9 @@ const withStyle = decorator(
       return (
         <ComposedComponent
           ref={ref}
+          {...props}
           makeStyles={makeStyleHandler}
           styles={styles}
-          {...props}
         />
       )
     })
@@ -230,8 +252,8 @@ const withStyle = decorator(
     // eslint-disable-next-line no-param-reassign
     ComposedComponent.defaultProps = {
       ...ComposedComponent.defaultProps,
-      makeStyles: () => {},
-      styles: {}
+      makeStyles: defaultValues.makeStyles,
+      styles: defaultValues.styles
     }
 
     if (process.env.NODE_ENV !== 'production') {

package/types/withStyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"withStyle.d.ts","sourceRoot":"","sources":["../src/withStyle.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAA+C,MAAM,OAAO,CAAA;AAiBnE,OAAO,KAAK,EAAa,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC1E,OAAO,KAAK,EACV,cAAc,EAKf,MAAM,gBAAgB,CAAA;AASvB,aAAK,qBAAqB,CACxB,KAAK,SAAS,cAAc,GAAG,IAAI,GAAG,cAAc,IAClD,KAAK,SAAS,IAAI,GAElB,EAAE,GACF;IACE,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,UAAU,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAA;CAC3D,CAAA;AAEL,aAAK,iBAAiB,CAAC,KAAK,SAAS,cAAc,GAAG,IAAI,GAAG,cAAc,IAAI;IAC7E,aAAa,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;CAC/B,CAAA;AAED,aAAK,cAAc,CACjB,KAAK,SAAS,cAAc,GAAG,IAAI,GAAG,cAAc,EACpD,KAAK,SAAS,cAAc,GAAG,IAAI,GAAG,cAAc,IAClD,KAAK,SAAS,IAAI,GAClB,qBAAqB,CAAC,KAAK,CAAC,GAC5B,qBAAqB,CAAC,KAAK,CAAC,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA;AAE3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AACH,QAAA,MAAM,SAAS,oFAgGd,CAAA;AAED,eAAe,SAAS,CAAA;AACxB,OAAO,EAAE,SAAS,EAAE,CAAA;AACpB,YAAY,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"withStyle.d.ts","sourceRoot":"","sources":["../src/withStyle.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAA+C,MAAM,OAAO,CAAA;AAkBnE,OAAO,KAAK,EAAa,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC1E,OAAO,KAAK,EACV,cAAc,EAKf,MAAM,gBAAgB,CAAA;AASvB,aAAK,qBAAqB,CACxB,KAAK,SAAS,cAAc,GAAG,IAAI,GAAG,cAAc,IAClD,KAAK,SAAS,IAAI,GAElB,EAAE,GACF;IACE,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,UAAU,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAA;CAC3D,CAAA;AAEL,aAAK,iBAAiB,CAAC,KAAK,SAAS,cAAc,GAAG,IAAI,GAAG,cAAc,IAAI;IAC7E,aAAa,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;CAC/B,CAAA;AAED,aAAK,cAAc,CACjB,KAAK,SAAS,cAAc,GAAG,IAAI,GAAG,cAAc,EACpD,KAAK,SAAS,cAAc,GAAG,IAAI,GAAG,cAAc,IAClD,KAAK,SAAS,IAAI,GAClB,qBAAqB,CAAC,KAAK,CAAC,GAC5B,qBAAqB,CAAC,KAAK,CAAC,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA;AAO3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AACH,QAAA,MAAM,SAAS,oFAgHd,CAAA;AAED,eAAe,SAAS,CAAA;AACxB,OAAO,EAAE,SAAS,EAAE,CAAA;AACpB,YAAY,EAAE,cAAc,EAAE,CAAA"}