@instructure/emotion 8.33.1 → 8.33.2-snapshot-5

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.33.2-snapshot-5](https://github.com/instructure/instructure-ui/compare/v8.33.1...v8.33.2-snapshot-5) (2023-01-23)
+
+**Note:** Version bump only for package @instructure/emotion
+
+
+
+
+
 ## [8.33.1](https://github.com/instructure/instructure-ui/compare/v8.33.0...v8.33.1) (2023-01-06)
 
 **Note:** Version bump only for package @instructure/emotion

package/es/EmotionThemeProvider/index.js

@@ -21,10 +21,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import React from 'react';
 import { ThemeProvider } from '@emotion/react';
 import { getTheme } from '../getTheme';
-
 /**
  * ---
  * category: components/utilities
@@ -33,13 +33,12 @@ import { getTheme } from '../getTheme';
  */
 function EmotionThemeProvider(_ref) {
   let children = _ref.children,
-      _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? {} : _ref$theme;
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? {} : _ref$theme;
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: getTheme(theme)
   }, children);
 }
-
 EmotionThemeProvider.defaultProps = {
   theme: {}
 };

package/es/InstUISettingsProvider/index.js

@@ -21,13 +21,13 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { ThemeProvider } from '@emotion/react';
 import { TextDirectionContext } from '@instructure/ui-i18n';
 import { DeterministicIdContextProvider, getElementType } from '@instructure/ui-react-utils';
 import { getTheme } from '../getTheme';
-
 /**
  * ---
  * category: components/utilities
@@ -37,15 +37,13 @@ import { getTheme } from '../getTheme';
  */
 function InstUISettingsProvider(_ref) {
   let children = _ref.children,
-      _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? {} : _ref$theme,
-      dir = _ref.dir,
-      instanceCounterMap = _ref.instanceCounterMap,
-      as = _ref.as;
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? {} : _ref$theme,
+    dir = _ref.dir,
+    instanceCounterMap = _ref.instanceCounterMap,
+    as = _ref.as;
   const finalDir = dir || useContext(TextDirectionContext);
-
   if (process.env.NODE_ENV !== 'production' && finalDir === 'auto') {}
-
   let providers = /*#__PURE__*/React.createElement(DeterministicIdContextProvider, {
     instanceCounterMap: instanceCounterMap
   }, /*#__PURE__*/React.createElement(ThemeProvider, {
@@ -53,7 +51,6 @@ function InstUISettingsProvider(_ref) {
   }, /*#__PURE__*/React.createElement(TextDirectionContext.Provider, {
     value: finalDir
   }, children)));
-
   if (dir) {
     const Element = getElementType(InstUISettingsProvider, {
       as
@@ -62,10 +59,8 @@ function InstUISettingsProvider(_ref) {
       dir: finalDir
     }, providers);
   } else if (as && process.env.NODE_ENV !== 'production') {}
-
   return providers;
 }
-
 InstUISettingsProvider.propTypes = {
   /* eslint-disable react/require-default-props */
   children: PropTypes.node,
@@ -74,8 +69,8 @@ InstUISettingsProvider.propTypes = {
   instanceCounterMap: PropTypes.instanceOf(Map),
   as: PropTypes.string
   /* eslint-enable react/require-default-props */
-
 };
+
 InstUISettingsProvider.defaultProps = {
   theme: {},
   as: void 0

package/es/getComponentThemeOverride.js

@@ -40,30 +40,28 @@ const getComponentThemeOverride = (theme, displayName, componentId, props, compo
   const name = displayName;
   const id = componentId;
   const _ref = props,
-        themeOverride = _ref.themeOverride;
+    themeOverride = _ref.themeOverride;
   const _ref2 = theme,
-        componentOverrides = _ref2.componentOverrides;
+    componentOverrides = _ref2.componentOverrides;
   let overridesFromTheme = {};
   let overrideFromComponent = {};
-
   if (componentOverrides) {
     overridesFromTheme = name && componentOverrides[name] || id && componentOverrides[id] || {};
   }
-
   if (themeOverride) {
     if (typeof themeOverride === 'function') {
-      overrideFromComponent = themeOverride(componentTheme || {}, // the `theme` technically could be a partial theme / override object too,
+      overrideFromComponent = themeOverride(componentTheme || {},
+      // the `theme` technically could be a partial theme / override object too,
       // but we want to display all possible options
       theme);
     } else {
       overrideFromComponent = themeOverride;
     }
   }
-
-  return { ...overridesFromTheme,
+  return {
+    ...overridesFromTheme,
     ...overrideFromComponent
   };
 };
-
 export default getComponentThemeOverride;
 export { getComponentThemeOverride };

package/es/getTheme.js

@@ -24,7 +24,6 @@
 import { canvas } from '@instructure/ui-themes';
 import { ThemeRegistry } from '@instructure/theme-registry';
 import { isBaseTheme, mergeDeep } from '@instructure/ui-utils';
-
 /**
  * ---
  * private: true
@@ -41,9 +40,7 @@ import { isBaseTheme, mergeDeep } from '@instructure/ui-utils';
  */
 const getTheme = themeOrOverride => function () {
   var _themeOrOverride, _themeOrOverride$them;
-
   let ancestorTheme = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-
   try {
     // If a valid InstUI theme is given, it just returns the theme.
     if (isBaseTheme(themeOrOverride)) {
@@ -53,30 +50,25 @@ const getTheme = themeOrOverride => function () {
     // If the prop passed is not an Object, it will throw an error.
     // We are using this fail-safe here for the non-TS users,
     // because the whole page can break without a theme.
-    if (process.env.NODE_ENV !== 'production') {} // eslint-disable-next-line no-param-reassign
-
-
+    if (process.env.NODE_ENV !== 'production') {}
+    // eslint-disable-next-line no-param-reassign
     themeOrOverride = {};
-  } // we need to clone the ancestor theme not to override it
-
+  }
 
+  // we need to clone the ancestor theme not to override it
   let currentTheme;
-
   if (Object.keys(ancestorTheme).length === 0) {
     const globalTheme = ThemeRegistry.getCurrentTheme();
-
     if (process.env.NODE_ENV !== 'production' && !globalTheme) {}
-
     currentTheme = globalTheme || canvas;
   } else {
     currentTheme = ancestorTheme;
   }
+  const themeName = currentTheme.key;
 
-  const themeName = currentTheme.key; // we pick the overrides for the current theme from the override object
-
+  // we pick the overrides for the current theme from the override object
   const currentThemeOverrides = ((_themeOrOverride = themeOrOverride) === null || _themeOrOverride === void 0 ? void 0 : (_themeOrOverride$them = _themeOrOverride.themeOverrides) === null || _themeOrOverride$them === void 0 ? void 0 : _themeOrOverride$them[themeName]) || themeOrOverride.themeOverrides || {};
   return mergeDeep(currentTheme, themeOrOverride, currentThemeOverrides);
 };
-
 export default getTheme;
 export { getTheme };

package/es/index.js

@@ -22,6 +22,7 @@
  * SOFTWARE.
  */
 /// <reference types="@emotion/react/types/css-prop" />
+
 export * from '@emotion/react';
 export { EmotionThemeProvider } from './EmotionThemeProvider';
 export { InstUISettingsProvider } from './InstUISettingsProvider';

package/es/styleUtils/ThemeablePropTypes.js

@@ -21,15 +21,17 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import PropTypes from 'prop-types';
 import { ThemeablePropValues } from './ThemeablePropValues';
 const SHADOW_TYPES = ThemeablePropValues.SHADOW_TYPES,
-      STACKING_TYPES = ThemeablePropValues.STACKING_TYPES,
-      BORDER_WIDTHS = ThemeablePropValues.BORDER_WIDTHS,
-      BORDER_RADII = ThemeablePropValues.BORDER_RADII,
-      BACKGROUNDS = ThemeablePropValues.BACKGROUNDS,
-      SIZES = ThemeablePropValues.SIZES,
-      SPACING = ThemeablePropValues.SPACING;
+  STACKING_TYPES = ThemeablePropValues.STACKING_TYPES,
+  BORDER_WIDTHS = ThemeablePropValues.BORDER_WIDTHS,
+  BORDER_RADII = ThemeablePropValues.BORDER_RADII,
+  BACKGROUNDS = ThemeablePropValues.BACKGROUNDS,
+  SIZES = ThemeablePropValues.SIZES,
+  SPACING = ThemeablePropValues.SPACING;
+
 /**
  * ---
  * category: utilities/themes
@@ -37,7 +39,6 @@ const SHADOW_TYPES = ThemeablePropValues.SHADOW_TYPES,
  * Custom prop types for themeable React components.
  * @module ThemeablePropTypes
  */
-
 const ThemeablePropTypes = {
   shadow: PropTypes.oneOf(Object.values(SHADOW_TYPES)),
   stacking: PropTypes.oneOf(Object.values(STACKING_TYPES)),
@@ -47,26 +48,20 @@ const ThemeablePropTypes = {
   size: PropTypes.oneOf(Object.values(SIZES)),
   spacing: shorthandPropType(Object.values(SPACING))
 };
-
 function shorthandPropType(validValues) {
   return function (props, propName, componentName, location) {
     const propValue = props[propName];
-
     if (typeof propValue === 'undefined') {
       return null;
     }
-
     if (typeof propValue !== 'string') {
       return new Error(`Invalid ${location} \`${propName}\` of type \`${typeof propValue}\` supplied to \`${componentName}\`, expected ` + `a string.`);
     }
-
     const propValues = propValue.split(' ');
     const valuesLength = propValues.length;
-
     if (valuesLength > 0 && valuesLength < 5) {
       for (let i = 0; i < valuesLength; i++) {
         const valueIndex = validValues.indexOf(propValues[i]);
-
         if (valueIndex === -1) {
           return new Error(`Invalid ${location} \`${propName}\` \`${propValues[i]}\` supplied to \`${componentName}\`, expected ` + `a one of \`${validValues.join(', ')}\`.`);
         }
@@ -74,10 +69,8 @@ function shorthandPropType(validValues) {
     } else {
       return new Error(`Invalid ${location} \`${propName}\` \`${propValue}\` supplied to \`${componentName}\`, expected ` + `between one and four of the following valid values: \`${validValues.join(', ')}\`.`);
     }
-
     return null;
   };
 }
-
 export default ThemeablePropTypes;
 export { ThemeablePropTypes, shorthandPropType };

package/es/styleUtils/ThemeablePropValues.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const ThemeablePropValues = {
   SHADOW_TYPES: {
     resting: 'resting',
@@ -76,7 +77,9 @@ const ThemeablePropValues = {
     xLarge: 'x-large',
     xxLarge: 'xx-large'
   }
-}; // SPACING
+};
+
+// SPACING
 
 export default ThemeablePropValues;
 export { ThemeablePropValues };

package/es/styleUtils/getShorthandPropValue.js

@@ -21,8 +21,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { isEmpty, camelize } from '@instructure/ui-utils';
 import { logError as error } from '@instructure/console';
+
 /**
  * ---
  * category: utilities/themes
@@ -39,35 +41,28 @@ import { logError as error } from '@instructure/console';
  * @param {String} propName - a prefix to combine with each propValue
  * @returns {String} a string with each value replaced with a value from the theme object
  */
-
 function getShorthandPropValue(componentName, componentTheme, propValue, propName) {
   if (typeof propValue !== 'string' || isEmpty(componentTheme)) {
     return;
   }
-
   return propValue.split(' ').map(shortHandValue => {
     if (shortHandValue === 'auto' || shortHandValue === '0') {
       return shortHandValue;
     }
-
     if (shortHandValue === 'none') {
       return '0';
     }
-
     if (shortHandValue === 'circle') {
       return '100%';
     }
-
     if (shortHandValue === 'pill') {
       return '999em';
     }
-
     const themeVariableName = camelize(`${propName}-${shortHandValue}`);
     const themeVariableValue = componentTheme[themeVariableName];
     error(typeof themeVariableValue !== 'undefined', `[${componentName}] '${themeVariableName}' is an invalid '${propName}' value.`);
     return themeVariableValue || '0';
   }).join(' ').trim();
 }
-
 export default getShorthandPropValue;
 export { getShorthandPropValue };

package/es/styleUtils/index.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 export { ThemeablePropValues } from './ThemeablePropValues';
 export { ThemeablePropTypes } from './ThemeablePropTypes';
 export { makeThemeVars } from './makeThemeVars';

package/es/styleUtils/makeThemeVars.js

@@ -21,8 +21,8 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { camelize } from '@instructure/ui-utils';
 
+import { camelize } from '@instructure/ui-utils';
 /**
  * ---
  * category: utilities/themes
@@ -41,6 +41,5 @@ function makeThemeVars(prefix, vars) {
   });
   return themeVars;
 }
-
 export default makeThemeVars;
 export { makeThemeVars };

package/es/styleUtils/mirrorShorthand.js

@@ -46,9 +46,7 @@ function mirrorShorthandEdges(values) {
   if (typeof values !== 'string') {
     return;
   }
-
   const valuesArr = values.split(' ');
-
   if (valuesArr.length === 4) {
     // swap the 2nd and 4th values
     ;
@@ -56,9 +54,9 @@ function mirrorShorthandEdges(values) {
     valuesArr[1] = _ref[0];
     valuesArr[3] = _ref[1];
   }
-
   return valuesArr.join(' ');
 }
+
 /**
  * Convert shorthand CSS properties for corners to rtl
  *
@@ -72,15 +70,11 @@ function mirrorShorthandEdges(values) {
  * @param {String} values - space delimited string values representing a CSS shorthand
  * @returns {String} a space delimited CSS shorthand string converted to RTL
  */
-
-
 function mirrorShorthandCorners(values) {
   if (typeof values !== 'string') {
     return;
   }
-
   const valuesArr = values.split(' ');
-
   if (valuesArr.length === 2) {
     // swap the 1st and 2nd values
     ;
@@ -88,12 +82,10 @@ function mirrorShorthandCorners(values) {
     valuesArr[0] = _ref2[0];
     valuesArr[1] = _ref2[1];
   }
-
   if (valuesArr.length === 3) {
     // convert 3 value syntax to 4 value syntax
     valuesArr.push(valuesArr[1]);
   }
-
   if (valuesArr.length === 4) {
     ;
     var _ref3 = [valuesArr[1], valuesArr[0], valuesArr[3], valuesArr[2]];
@@ -102,8 +94,6 @@ function mirrorShorthandCorners(values) {
     valuesArr[2] = _ref3[2];
     valuesArr[3] = _ref3[3];
   }
-
   return valuesArr.join(' ');
 }
-
 export { mirrorShorthandEdges, mirrorShorthandCorners };

package/es/useTheme.js

@@ -21,11 +21,11 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { useTheme as useEmotionTheme } from '@emotion/react';
 import { canvas } from '@instructure/ui-themes';
 import { isEmpty } from '@instructure/ui-utils';
 import { ThemeRegistry } from '@instructure/theme-registry';
-
 /**
  * ---
  * private: true
@@ -37,21 +37,15 @@ import { ThemeRegistry } from '@instructure/theme-registry';
  */
 const useTheme = () => {
   let theme = useEmotionTheme();
-
   if (isEmpty(theme)) {
     const globalTheme = ThemeRegistry.getCurrentTheme();
-
     if (globalTheme) {
       return globalTheme;
     }
-
     if (process.env.NODE_ENV !== 'production') {}
-
     theme = canvas;
   }
-
   return theme;
 };
-
 export default useTheme;
 export { useTheme };

package/es/withStyle.js

@@ -1,5 +1,4 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-
 /*
  * The MIT License (MIT)
  *
@@ -23,6 +22,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import React, { forwardRef, useState } from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import { deepEqual as isEqual } from '@instructure/ui-utils';
@@ -34,6 +34,7 @@ const defaultValues = {
   styles: {},
   makeStyles: () => {}
 };
+
 /**
  * ---
  * category: utilities/themes
@@ -109,75 +110,73 @@ const defaultValues = {
  * @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();
-
     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,
+    const componentProps = {
+      ...ComposedComponent.defaultProps,
       ...props,
       ...defaultValues
     };
     let componentTheme = typeof generateComponentTheme === 'function' ? generateComponentTheme(theme) : {};
     const themeOverride = getComponentThemeOverride(theme, displayName, ComposedComponent.componentId, componentProps, componentTheme);
-    componentTheme = { ...componentTheme,
+    componentTheme = {
+      ...componentTheme,
       ...themeOverride
     };
-
     const _useState = useState(generateStyle ? generateStyle(componentTheme, componentProps, {}) : {}),
-          _useState2 = _slicedToArray(_useState, 2),
-          styles = _useState2[0],
-          setStyles = _useState2[1];
-
+      _useState2 = _slicedToArray(_useState, 2),
+      styles = _useState2[0],
+      setStyles = _useState2[1];
     const makeStyleHandler = extraArgs => {
       const calculatedStyles = generateStyle(componentTheme, componentProps, extraArgs);
-
       if (!isEqual(calculatedStyles, styles)) {
         setStyles(calculatedStyles);
       }
     };
-
     return /*#__PURE__*/React.createElement(ComposedComponent, Object.assign({
       ref: ref
     }, props, {
       makeStyles: makeStyleHandler,
-      styles: styles // passing themeOverrides is needed for components like Button
+      styles: styles
+      // passing themeOverrides is needed for components like Button
       // that have no makeStyles of their own and only pass themeOverrides
       // to the underlying component (e.g.: BaseButton)
       ,
       themeOverride: themeOverride
     }));
   });
-  hoistNonReactStatics(WithStyle, ComposedComponent); // we have to pass these on, because sometimes users
+  hoistNonReactStatics(WithStyle, ComposedComponent);
+
+  // we have to pass these on, because sometimes users
   // access propTypes of the component in other components
   // eslint-disable-next-line react/forbid-foreign-prop-types
-
   WithStyle.propTypes = ComposedComponent.propTypes;
-  WithStyle.defaultProps = ComposedComponent.defaultProps; // These static fields exist on InstUI components
+  WithStyle.defaultProps = ComposedComponent.defaultProps;
 
-  WithStyle.allowedProps = ComposedComponent.allowedProps; // we are exposing the theme generator for the docs generation
+  // These static fields exist on InstUI components
+  WithStyle.allowedProps = ComposedComponent.allowedProps;
 
-  WithStyle.generateComponentTheme = generateComponentTheme; // we have to add defaults to makeStyles and styles added by this decorator
-  // eslint-disable-next-line no-param-reassign
+  // we are exposing the theme generator for the docs generation
+  WithStyle.generateComponentTheme = generateComponentTheme;
 
-  ComposedComponent.defaultProps = { ...ComposedComponent.defaultProps,
+  // we have to add defaults to makeStyles and styles added by this decorator
+  // eslint-disable-next-line no-param-reassign
+  ComposedComponent.defaultProps = {
+    ...ComposedComponent.defaultProps,
     makeStyles: defaultValues.makeStyles,
     styles: defaultValues.styles
   };
-
   if (process.env.NODE_ENV !== 'production') {
     WithStyle.displayName = `WithStyle(${displayName})`;
   }
-
   return WithStyle;
 });
 export default withStyle;

package/lib/EmotionThemeProvider/index.js

@@ -1,19 +1,14 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EmotionThemeProvider = EmotionThemeProvider;
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@emotion/react");
-
 var _getTheme = require("../getTheme");
-
 /*
  * The MIT License (MIT)
  *
@@ -46,13 +41,12 @@ var _getTheme = require("../getTheme");
  */
 function EmotionThemeProvider(_ref) {
   let children = _ref.children,
-      _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? {} : _ref$theme;
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? {} : _ref$theme;
   return /*#__PURE__*/_react.default.createElement(_react2.ThemeProvider, {
     theme: (0, _getTheme.getTheme)(theme)
   }, children);
 }
-
 EmotionThemeProvider.defaultProps = {
   theme: {}
 };