@instructure/emotion 11.7.3-snapshot-7 → 11.7.3-snapshot-26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/es/InstUISettingsProvider/index.js +1 -2
  3. package/es/getComponentThemeOverride.js +3 -2
  4. package/es/getTheme.js +4 -7
  5. package/es/styleUtils/calcFocusOutlineStyles.js +6 -7
  6. package/es/styleUtils/calcSpacingFromShorthand.js +1 -0
  7. package/es/styleUtils/mirrorShorthand.js +3 -11
  8. package/es/useComputedTheme.js +7 -11
  9. package/es/useStyle.js +14 -13
  10. package/es/useStyleLegacy.js +8 -7
  11. package/es/useTheme.js +1 -2
  12. package/es/withStyle.js +12 -18
  13. package/es/withStyleLegacy.js +2 -7
  14. package/lib/InstUISettingsProvider/index.js +1 -2
  15. package/lib/getComponentThemeOverride.js +3 -2
  16. package/lib/getTheme.js +4 -7
  17. package/lib/styleUtils/calcFocusOutlineStyles.js +6 -7
  18. package/lib/styleUtils/calcSpacingFromShorthand.js +1 -0
  19. package/lib/styleUtils/mirrorShorthand.js +3 -11
  20. package/lib/useComputedTheme.js +7 -11
  21. package/lib/useStyle.js +14 -13
  22. package/lib/useStyleLegacy.js +8 -7
  23. package/lib/useTheme.js +1 -2
  24. package/lib/withStyle.js +12 -18
  25. package/lib/withStyleLegacy.js +2 -7
  26. package/package.json +11 -11
  27. package/tsconfig.build.tsbuildinfo +1 -1
package/CHANGELOG.md CHANGED
@@ -3,9 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [11.7.3-snapshot-7](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-7) (2026-04-29)
6
+ ## [11.7.3-snapshot-26](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-26) (2026-05-05)
7
7
 
8
- **Note:** Version bump only for package @instructure/emotion
8
+
9
+ ### Bug Fixes
10
+
11
+ * **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
9
12
 
10
13
 
11
14
 
package/es/InstUISettingsProvider/index.js CHANGED
@@ -41,9 +41,8 @@ function InstUISettingsProvider({
41
41
  instanceCounterMap,
42
42
  themeOverride
43
43
  }) {
44
- var _process, _process$env, _process2, _process2$env;
45
44
  const finalDir = dir || useContext(TextDirectionContext);
46
- if (typeof process !== 'undefined' && (((_process = process) === null || _process === void 0 ? void 0 : (_process$env = _process.env) === null || _process$env === void 0 ? void 0 : _process$env.NODE_ENV) !== 'production' || ((_process2 = process) === null || _process2 === void 0 ? void 0 : (_process2$env = _process2.env) === null || _process2$env === void 0 ? void 0 : _process2$env.GITHUB_PULL_REQUEST_PREVIEW) === 'true') && finalDir === 'auto') {}
45
+ if (typeof process !== 'undefined' && (process?.env?.NODE_ENV !== 'production' || process?.env?.GITHUB_PULL_REQUEST_PREVIEW === 'true') && finalDir === 'auto') {}
47
46
 
48
47
  /**
49
48
  * new pattern: if you want to replace a theme inside an InstUISettingsProvider, provide it via the theme prop. It'll
package/es/getComponentThemeOverride.js CHANGED
@@ -39,8 +39,9 @@
39
39
  const getComponentThemeOverride = (theme, displayName, componentId, themeOverride, componentTheme) => {
40
40
  const name = displayName;
41
41
  const id = componentId;
42
- const _ref = theme,
43
- componentOverrides = _ref.componentOverrides;
42
+ const {
43
+ componentOverrides
44
+ } = theme;
44
45
  let overridesFromTheme = {};
45
46
  let overrideFromComponent = {};
46
47
  if (componentOverrides) {
package/es/getTheme.js CHANGED
@@ -44,12 +44,10 @@ import { isBaseTheme, mergeDeep } from '@instructure/ui-utils';
44
44
  * `ancestorTheme` is a theme object from an ancestor `ThemeProvider`
45
45
  */
46
46
  const getTheme = (themeOrLegacyOverride, themeOverride) => (ancestorTheme = {}) => {
47
- var _resolvedLegacyThemeO;
48
47
  // we need to clone the ancestor theme not to override it
49
48
  let currentTheme;
50
49
  if (Object.keys(ancestorTheme).length === 0) {
51
- var _process, _process$env, _process2, _process2$env;
52
- if (typeof process !== 'undefined' && (((_process = process) === null || _process === void 0 ? void 0 : (_process$env = _process.env) === null || _process$env === void 0 ? void 0 : _process$env.NODE_ENV) !== 'production' || ((_process2 = process) === null || _process2 === void 0 ? void 0 : (_process2$env = _process2.env) === null || _process2$env === void 0 ? void 0 : _process2$env.GITHUB_PULL_REQUEST_PREVIEW) === 'true')) {}
50
+ if (typeof process !== 'undefined' && (process?.env?.NODE_ENV !== 'production' || process?.env?.GITHUB_PULL_REQUEST_PREVIEW === 'true')) {}
53
51
  currentTheme = canvas;
54
52
  } else {
55
53
  currentTheme = ancestorTheme;
@@ -68,18 +66,17 @@ const getTheme = (themeOrLegacyOverride, themeOverride) => (ancestorTheme = {})
68
66
  };
69
67
  }
70
68
  } catch {
71
- var _process3, _process3$env, _process4, _process4$env;
72
69
  // If the prop passed is not an Object, it will throw an error.
73
70
  // We are using this fail-safe here for the non-TS users,
74
71
  // because the whole page can break without a theme.
75
- if (typeof process !== 'undefined' && (((_process3 = process) === null || _process3 === void 0 ? void 0 : (_process3$env = _process3.env) === null || _process3$env === void 0 ? void 0 : _process3$env.NODE_ENV) !== 'production' || ((_process4 = process) === null || _process4 === void 0 ? void 0 : (_process4$env = _process4.env) === null || _process4$env === void 0 ? void 0 : _process4$env.GITHUB_PULL_REQUEST_PREVIEW) === 'true')) {}
72
+ if (typeof process !== 'undefined' && (process?.env?.NODE_ENV !== 'production' || process?.env?.GITHUB_PULL_REQUEST_PREVIEW === 'true')) {}
76
73
  resolvedLegacyThemeOrOverride = {};
77
74
  }
78
75
  const themeName = currentTheme.key;
79
76
 
80
77
  // legacy: we pick the overrides for the current theme from the override object
81
- const specificOverrides = (_resolvedLegacyThemeO = resolvedLegacyThemeOrOverride) === null || _resolvedLegacyThemeO === void 0 ? void 0 : _resolvedLegacyThemeO.themeOverrides;
82
- const currentThemeOverrides = (specificOverrides === null || specificOverrides === void 0 ? void 0 : specificOverrides[themeName]) || specificOverrides || {};
78
+ const specificOverrides = resolvedLegacyThemeOrOverride?.themeOverrides;
79
+ const currentThemeOverrides = specificOverrides?.[themeName] || specificOverrides || {};
83
80
  return mergeDeep(currentTheme, resolvedLegacyThemeOrOverride, currentThemeOverrides, ...(resolvedThemeOverride ? [{
84
81
  themeOverride: resolvedThemeOverride
85
82
  }] : []));
package/es/styleUtils/calcFocusOutlineStyles.js CHANGED
@@ -28,13 +28,12 @@ import { alpha } from '@instructure/ui-color-utils';
28
28
  * @returns CSS-in-JS style object containing focus outline styles ready for use with emotion or similar libraries.
29
29
  */
30
30
  const calcFocusOutlineStyles = (theme, params) => {
31
- var _params$focusColor, _params$focusPosition, _params$shouldAnimate, _params$focusWithin, _params$withFocusOutl, _params$customCSSSele;
32
- const focusColor = (_params$focusColor = params === null || params === void 0 ? void 0 : params.focusColor) !== null && _params$focusColor !== void 0 ? _params$focusColor : 'info';
33
- const focusPosition = (_params$focusPosition = params === null || params === void 0 ? void 0 : params.focusPosition) !== null && _params$focusPosition !== void 0 ? _params$focusPosition : 'offset';
34
- const shouldAnimateFocus = (_params$shouldAnimate = params === null || params === void 0 ? void 0 : params.shouldAnimateFocus) !== null && _params$shouldAnimate !== void 0 ? _params$shouldAnimate : true;
35
- const focusWithin = (_params$focusWithin = params === null || params === void 0 ? void 0 : params.focusWithin) !== null && _params$focusWithin !== void 0 ? _params$focusWithin : false;
36
- const withFocusOutline = (_params$withFocusOutl = params === null || params === void 0 ? void 0 : params.withFocusOutline) !== null && _params$withFocusOutl !== void 0 ? _params$withFocusOutl : false;
37
- const selector = (_params$customCSSSele = params === null || params === void 0 ? void 0 : params.customCSSSelector) !== null && _params$customCSSSele !== void 0 ? _params$customCSSSele : '&:focus';
31
+ const focusColor = params?.focusColor ?? 'info';
32
+ const focusPosition = params?.focusPosition ?? 'offset';
33
+ const shouldAnimateFocus = params?.shouldAnimateFocus ?? true;
34
+ const focusWithin = params?.focusWithin ?? false;
35
+ const withFocusOutline = params?.withFocusOutline ?? false;
36
+ const selector = params?.customCSSSelector ?? '&:focus';
38
37
  const focusColorVariants = {
39
38
  info: theme.infoColor,
40
39
  inverse: theme.onColor,
package/es/styleUtils/calcSpacingFromShorthand.js CHANGED
@@ -1,3 +1,4 @@
1
+ import "core-js/modules/es.array.includes.js";
1
2
  /*
2
3
  * The MIT License (MIT)
3
4
  *
package/es/styleUtils/mirrorShorthand.js CHANGED
@@ -50,9 +50,7 @@ function mirrorShorthandEdges(values) {
50
50
  if (valuesArr.length === 4) {
51
51
  // swap the 2nd and 4th values
52
52
  ;
53
- var _ref = [valuesArr[3], valuesArr[1]];
54
- valuesArr[1] = _ref[0];
55
- valuesArr[3] = _ref[1];
53
+ [valuesArr[1], valuesArr[3]] = [valuesArr[3], valuesArr[1]];
56
54
  }
57
55
  return valuesArr.join(' ');
58
56
  }
@@ -78,9 +76,7 @@ function mirrorShorthandCorners(values) {
78
76
  if (valuesArr.length === 2) {
79
77
  // swap the 1st and 2nd values
80
78
  ;
81
- var _ref2 = [valuesArr[1], valuesArr[0]];
82
- valuesArr[0] = _ref2[0];
83
- valuesArr[1] = _ref2[1];
79
+ [valuesArr[0], valuesArr[1]] = [valuesArr[1], valuesArr[0]];
84
80
  }
85
81
  if (valuesArr.length === 3) {
86
82
  // convert 3 value syntax to 4 value syntax
@@ -88,11 +84,7 @@ function mirrorShorthandCorners(values) {
88
84
  }
89
85
  if (valuesArr.length === 4) {
90
86
  ;
91
- var _ref3 = [valuesArr[1], valuesArr[0], valuesArr[3], valuesArr[2]];
92
- valuesArr[0] = _ref3[0];
93
- valuesArr[1] = _ref3[1];
94
- valuesArr[2] = _ref3[2];
95
- valuesArr[3] = _ref3[3];
87
+ [valuesArr[0], valuesArr[1], valuesArr[2], valuesArr[3]] = [valuesArr[1], valuesArr[0], valuesArr[3], valuesArr[2]];
96
88
  }
97
89
  return valuesArr.join(' ');
98
90
  }
package/es/useComputedTheme.js CHANGED
@@ -40,18 +40,14 @@ import { useTheme } from '@emotion/react';
40
40
  * `components` and `sharedTokens` of the current theme.
41
41
  */
42
42
  export const useComputedTheme = () => {
43
- var _rawTheme$semantics, _rawTheme$sharedToken;
44
43
  const rawTheme = useTheme().newTheme;
45
- const primitives = rawTheme === null || rawTheme === void 0 ? void 0 : rawTheme.primitives;
46
- const semantics = rawTheme === null || rawTheme === void 0 ? void 0 : (_rawTheme$semantics = rawTheme.semantics) === null || _rawTheme$semantics === void 0 ? void 0 : _rawTheme$semantics.call(rawTheme, primitives);
47
- const components = Object.keys(rawTheme === null || rawTheme === void 0 ? void 0 : rawTheme.components).reduce((acc, component) => {
48
- var _rawTheme$components$, _rawTheme$components;
49
- return {
50
- ...acc,
51
- [component]: (_rawTheme$components$ = (_rawTheme$components = rawTheme.components)[component]) === null || _rawTheme$components$ === void 0 ? void 0 : _rawTheme$components$.call(_rawTheme$components, semantics)
52
- };
53
- }, {});
54
- const sharedTokens = rawTheme === null || rawTheme === void 0 ? void 0 : (_rawTheme$sharedToken = rawTheme.sharedTokens) === null || _rawTheme$sharedToken === void 0 ? void 0 : _rawTheme$sharedToken.call(rawTheme, semantics);
44
+ const primitives = rawTheme?.primitives;
45
+ const semantics = rawTheme?.semantics?.(primitives);
46
+ const components = Object.keys(rawTheme?.components).reduce((acc, component) => ({
47
+ ...acc,
48
+ [component]: rawTheme.components[component]?.(semantics)
49
+ }), {});
50
+ const sharedTokens = rawTheme?.sharedTokens?.(semantics);
55
51
  return {
56
52
  primitives,
57
53
  semantics,
package/es/useStyle.js CHANGED
@@ -32,25 +32,26 @@ import { mergeDeep } from '@instructure/ui-utils';
32
32
  // TODO: improve useStyle to handle generateStyle functions that don't
33
33
  // have a theme.
34
34
  const useStyle = useStyleParams => {
35
- var _themeOverrideFromPro, _themeInContext$newTh, _themeInContext$newTh2, _themeInContext$newTh3, _themeInContext$newTh4, _themeInContext$newTh5, _themeInContext$newTh6;
36
- const generateStyle = useStyleParams.generateStyle,
37
- params = useStyleParams.params,
38
- componentId = useStyleParams.componentId,
39
- themeOverride = useStyleParams.themeOverride;
35
+ const {
36
+ generateStyle,
37
+ params,
38
+ componentId,
39
+ themeOverride
40
+ } = useStyleParams;
40
41
  const useTokensFrom = useStyleParams.useTokensFrom;
41
42
  const themeInContext = useTheme();
42
43
  const themeOverrideFromProvider = themeInContext.themeOverride;
43
- const componentWithTokensId = useTokensFrom !== null && useTokensFrom !== void 0 ? useTokensFrom : componentId;
44
+ const componentWithTokensId = useTokensFrom ?? componentId;
44
45
 
45
46
  // resolving the theming functions and applying the overrides
46
- const primitiveOverrides = themeOverrideFromProvider === null || themeOverrideFromProvider === void 0 ? void 0 : themeOverrideFromProvider.primitives;
47
- const semanticsOverrides = themeOverrideFromProvider === null || themeOverrideFromProvider === void 0 ? void 0 : themeOverrideFromProvider.semantics;
48
- const sharedTokensOverrides = themeOverrideFromProvider === null || themeOverrideFromProvider === void 0 ? void 0 : themeOverrideFromProvider.sharedTokens;
49
- const componentOverridesFromSettingsProvider = themeOverrideFromProvider === null || themeOverrideFromProvider === void 0 ? void 0 : (_themeOverrideFromPro = themeOverrideFromProvider.components) === null || _themeOverrideFromPro === void 0 ? void 0 : _themeOverrideFromPro[componentWithTokensId];
47
+ const primitiveOverrides = themeOverrideFromProvider?.primitives;
48
+ const semanticsOverrides = themeOverrideFromProvider?.semantics;
49
+ const sharedTokensOverrides = themeOverrideFromProvider?.sharedTokens;
50
+ const componentOverridesFromSettingsProvider = themeOverrideFromProvider?.components?.[componentWithTokensId];
50
51
  const primitives = mergeDeep(themeInContext.newTheme.primitives, primitiveOverrides);
51
- const semantics = mergeDeep((_themeInContext$newTh = (_themeInContext$newTh2 = themeInContext.newTheme).semantics) === null || _themeInContext$newTh === void 0 ? void 0 : _themeInContext$newTh.call(_themeInContext$newTh2, primitives), semanticsOverrides);
52
- const sharedTokens = mergeDeep((_themeInContext$newTh3 = (_themeInContext$newTh4 = themeInContext.newTheme).sharedTokens) === null || _themeInContext$newTh3 === void 0 ? void 0 : _themeInContext$newTh3.call(_themeInContext$newTh4, semantics), sharedTokensOverrides);
53
- const baseComponentTheme = (_themeInContext$newTh5 = (_themeInContext$newTh6 = themeInContext.newTheme.components)[componentWithTokensId]) === null || _themeInContext$newTh5 === void 0 ? void 0 : _themeInContext$newTh5.call(_themeInContext$newTh6, semantics);
52
+ const semantics = mergeDeep(themeInContext.newTheme.semantics?.(primitives), semanticsOverrides);
53
+ const sharedTokens = mergeDeep(themeInContext.newTheme.sharedTokens?.(semantics), sharedTokensOverrides);
54
+ const baseComponentTheme = themeInContext.newTheme.components[componentWithTokensId]?.(semantics);
54
55
  const componentThemeFromSettingsProvider = mergeDeep(baseComponentTheme, componentOverridesFromSettingsProvider);
55
56
  const componentTheme = mergeDeep(componentThemeFromSettingsProvider, typeof themeOverride === 'function' ? themeOverride(componentThemeFromSettingsProvider, themeInContext) : themeOverride);
56
57
 
package/es/useStyleLegacy.js CHANGED
@@ -30,15 +30,16 @@ import { getComponentThemeOverride } from "./getComponentThemeOverride.js"; // r
30
30
  * theming system (InstUI v12)
31
31
  */
32
32
  const useStyleLegacy = useStyleParams => {
33
- var _ref;
34
- const generateStyle = useStyleParams.generateStyle,
35
- params = useStyleParams.params,
36
- componentId = useStyleParams.componentId,
37
- displayName = useStyleParams.displayName;
38
- const generateComponentTheme = useStyleParams === null || useStyleParams === void 0 ? void 0 : useStyleParams.generateComponentTheme;
33
+ const {
34
+ generateStyle,
35
+ params,
36
+ componentId,
37
+ displayName
38
+ } = useStyleParams;
39
+ const generateComponentTheme = useStyleParams?.generateComponentTheme;
39
40
  const theme = useTheme();
40
41
  const baseComponentTheme = typeof generateComponentTheme === 'function' ? generateComponentTheme(theme) : {};
41
- const themeOverride = getComponentThemeOverride(theme, (_ref = displayName !== null && displayName !== void 0 ? displayName : componentId) !== null && _ref !== void 0 ? _ref : '', componentId, params === null || params === void 0 ? void 0 : params.themeOverride, baseComponentTheme);
42
+ const themeOverride = getComponentThemeOverride(theme, displayName ?? componentId ?? '', componentId, params?.themeOverride, baseComponentTheme);
42
43
  const componentTheme = {
43
44
  ...baseComponentTheme,
44
45
  ...themeOverride
package/es/useTheme.js CHANGED
@@ -37,8 +37,7 @@ const useTheme = () => {
37
37
  // This reads the theme from Emotion's ThemeContext
38
38
  let theme = useEmotionTheme();
39
39
  if (isEmpty(theme)) {
40
- var _process, _process$env, _process2, _process2$env;
41
- if (typeof process !== 'undefined' && (((_process = process) === null || _process === void 0 ? void 0 : (_process$env = _process.env) === null || _process$env === void 0 ? void 0 : _process$env.NODE_ENV) !== 'production' || ((_process2 = process) === null || _process2 === void 0 ? void 0 : (_process2$env = _process2.env) === null || _process2$env === void 0 ? void 0 : _process2$env.GITHUB_PULL_REQUEST_PREVIEW) === 'true')) {}
40
+ if (typeof process !== 'undefined' && (process?.env?.NODE_ENV !== 'production' || process?.env?.GITHUB_PULL_REQUEST_PREVIEW === 'true')) {}
42
41
  theme = canvas;
43
42
  }
44
43
  return theme;
package/es/withStyle.js CHANGED
@@ -1,4 +1,3 @@
1
- import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
2
1
  /*
3
2
  * The MIT License (MIT)
4
3
  *
@@ -93,11 +92,9 @@ const defaultValues = {
93
92
  * @returns {ReactElement} The decorated WithStyle Component
94
93
  */
95
94
  const withStyle = decorator((ComposedComponent, generateStyle, useTokensFrom, frozenTheme) => {
96
- var _ComposedComponent$co, _process, _process$env;
97
95
  const displayName = ComposedComponent.displayName || ComposedComponent.name;
98
- const componentId = useTokensFrom !== null && useTokensFrom !== void 0 ? useTokensFrom : (_ComposedComponent$co = ComposedComponent.componentId) === null || _ComposedComponent$co === void 0 ? void 0 : _ComposedComponent$co.replace('.', '');
96
+ const componentId = useTokensFrom ?? ComposedComponent.componentId?.replace('.', '');
99
97
  const WithStyle = /*#__PURE__*/forwardRef((props, ref) => {
100
- var _themeOverride$compon, _theme$newTheme$seman, _theme$newTheme, _theme$newTheme$share, _theme$newTheme2, _theme$newTheme$compo, _theme$newTheme$compo2;
101
98
  const themeInContext = useTheme();
102
99
  const themeKey = themeInContext.key;
103
100
 
@@ -125,28 +122,25 @@ const withStyle = decorator((ComposedComponent, generateStyle, useTokensFrom, fr
125
122
  ...defaultValues
126
123
  };
127
124
  // resolving the theming functions and applying the overrides
128
- const primitiveOverrides = themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.primitives;
129
- const semanticsOverrides = themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.semantics;
130
- const sharedTokensOverrides = themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.sharedTokens;
131
- const componentOverridesFromSettingsProvider = themeOverride === null || themeOverride === void 0 ? void 0 : (_themeOverride$compon = themeOverride.components) === null || _themeOverride$compon === void 0 ? void 0 : _themeOverride$compon[componentId];
125
+ const primitiveOverrides = themeOverride?.primitives;
126
+ const semanticsOverrides = themeOverride?.semantics;
127
+ const sharedTokensOverrides = themeOverride?.sharedTokens;
128
+ const componentOverridesFromSettingsProvider = themeOverride?.components?.[componentId];
132
129
  const componentOverridesFromThemeOverrideProp = componentProps.themeOverride;
133
130
  const primitives = mergeDeep(theme.newTheme.primitives, primitiveOverrides);
134
- const semantics = mergeDeep((_theme$newTheme$seman = (_theme$newTheme = theme.newTheme).semantics) === null || _theme$newTheme$seman === void 0 ? void 0 : _theme$newTheme$seman.call(_theme$newTheme, primitives), semanticsOverrides);
135
- const sharedTokens = mergeDeep((_theme$newTheme$share = (_theme$newTheme2 = theme.newTheme).sharedTokens) === null || _theme$newTheme$share === void 0 ? void 0 : _theme$newTheme$share.call(_theme$newTheme2, semantics), sharedTokensOverrides);
131
+ const semantics = mergeDeep(theme.newTheme.semantics?.(primitives), semanticsOverrides);
132
+ const sharedTokens = mergeDeep(theme.newTheme.sharedTokens?.(semantics), sharedTokensOverrides);
136
133
  // Note: Some components do not have a theme, e.g., FormFieldMessages
137
- const baseComponentTheme = (_theme$newTheme$compo = (_theme$newTheme$compo2 = theme.newTheme.components)[componentId]) === null || _theme$newTheme$compo === void 0 ? void 0 : _theme$newTheme$compo.call(_theme$newTheme$compo2, semantics);
134
+ const baseComponentTheme = theme.newTheme.components[componentId]?.(semantics);
138
135
  const componentThemeFromSettingsProvider = mergeDeep(baseComponentTheme, componentOverridesFromSettingsProvider);
139
136
  const componentTheme = mergeDeep(componentThemeFromSettingsProvider,
140
137
  // @ts-ignore TODO-theme-types: fix typing
141
138
  typeof componentOverridesFromThemeOverrideProp === 'function' ? componentOverridesFromThemeOverrideProp(componentThemeFromSettingsProvider, themeInContext) : componentOverridesFromThemeOverrideProp);
142
139
 
143
140
  // TODO do not call here generateStyle, it does not receive the extraArgs
144
- const _useState = useState(generateStyle ?
145
- // @ts-ignore TODO-theme-types: fix typing
146
- generateStyle(componentTheme, componentProps, sharedTokens, {}) : {}),
147
- _useState2 = _slicedToArray(_useState, 2),
148
- styles = _useState2[0],
149
- setStyles = _useState2[1];
141
+ const [styles, setStyles] = useState(generateStyle ?
142
+ // @ts-ignore TODO-theme-types: fix typing
143
+ generateStyle(componentTheme, componentProps, sharedTokens, {}) : {});
150
144
  const makeStyleHandler = extraArgs => {
151
145
  const calculatedStyles = generateStyle(componentTheme, componentProps,
152
146
  // @ts-ignore TODO-theme-types: fix typing
@@ -178,7 +172,7 @@ const withStyle = decorator((ComposedComponent, generateStyle, useTokensFrom, fr
178
172
  makeStyles: defaultValues.makeStyles,
179
173
  styles: defaultValues.styles
180
174
  };
181
- if (typeof process !== 'undefined' && ((_process = process) === null || _process === void 0 ? void 0 : (_process$env = _process.env) === null || _process$env === void 0 ? void 0 : _process$env.NODE_ENV) !== 'production') {
175
+ if (typeof process !== 'undefined' && process?.env?.NODE_ENV !== 'production') {
182
176
  WithStyle.displayName = `WithStyle(${displayName})`;
183
177
  }
184
178
  return WithStyle;
package/es/withStyleLegacy.js CHANGED
@@ -1,4 +1,3 @@
1
- import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
2
1
  /*
3
2
  * The MIT License (MIT)
4
3
  *
@@ -46,7 +45,6 @@ const defaultValues = {
46
45
  * TODO delete when the theme migration is complete
47
46
  */
48
47
  const withStyleLegacy = decorator((ComposedComponent, generateStyle, generateComponentTheme) => {
49
- var _process, _process$env;
50
48
  const displayName = ComposedComponent.displayName || ComposedComponent.name;
51
49
  const WithStyle = /*#__PURE__*/forwardRef((props, ref) => {
52
50
  const theme = useTheme();
@@ -67,10 +65,7 @@ const withStyleLegacy = decorator((ComposedComponent, generateStyle, generateCom
67
65
  ...componentTheme,
68
66
  ...themeOverride
69
67
  };
70
- const _useState = useState(generateStyle ? generateStyle(componentTheme, componentProps, {}) : {}),
71
- _useState2 = _slicedToArray(_useState, 2),
72
- styles = _useState2[0],
73
- setStyles = _useState2[1];
68
+ const [styles, setStyles] = useState(generateStyle ? generateStyle(componentTheme, componentProps, {}) : {});
74
69
  const makeStyleHandler = extraArgs => {
75
70
  const calculatedStyles = generateStyle(componentTheme, componentProps, extraArgs);
76
71
  if (!isEqual(calculatedStyles, styles)) {
@@ -108,7 +103,7 @@ const withStyleLegacy = decorator((ComposedComponent, generateStyle, generateCom
108
103
  makeStyles: defaultValues.makeStyles,
109
104
  styles: defaultValues.styles
110
105
  };
111
- if (typeof process !== 'undefined' && ((_process = process) === null || _process === void 0 ? void 0 : (_process$env = _process.env) === null || _process$env === void 0 ? void 0 : _process$env.NODE_ENV) !== 'production') {
106
+ if (typeof process !== 'undefined' && process?.env?.NODE_ENV !== 'production') {
112
107
  WithStyle.displayName = `WithStyle(${displayName})`;
113
108
  }
114
109
  return WithStyle;
package/lib/InstUISettingsProvider/index.js CHANGED
@@ -48,9 +48,8 @@ function InstUISettingsProvider({
48
48
  instanceCounterMap,
49
49
  themeOverride
50
50
  }) {
51
- var _process, _process$env, _process2, _process2$env;
52
51
  const finalDir = dir || (0, _react.useContext)(_TextDirectionContext.TextDirectionContext);
53
- if (typeof process !== 'undefined' && (((_process = process) === null || _process === void 0 ? void 0 : (_process$env = _process.env) === null || _process$env === void 0 ? void 0 : _process$env.NODE_ENV) !== 'production' || ((_process2 = process) === null || _process2 === void 0 ? void 0 : (_process2$env = _process2.env) === null || _process2$env === void 0 ? void 0 : _process2$env.GITHUB_PULL_REQUEST_PREVIEW) === 'true') && finalDir === 'auto') {}
52
+ if (typeof process !== 'undefined' && (process?.env?.NODE_ENV !== 'production' || process?.env?.GITHUB_PULL_REQUEST_PREVIEW === 'true') && finalDir === 'auto') {}
54
53
 
55
54
  /**
56
55
  * new pattern: if you want to replace a theme inside an InstUISettingsProvider, provide it via the theme prop. It'll
package/lib/getComponentThemeOverride.js CHANGED
@@ -45,8 +45,9 @@ exports.getComponentThemeOverride = exports.default = void 0;
45
45
  const getComponentThemeOverride = (theme, displayName, componentId, themeOverride, componentTheme) => {
46
46
  const name = displayName;
47
47
  const id = componentId;
48
- const _ref = theme,
49
- componentOverrides = _ref.componentOverrides;
48
+ const {
49
+ componentOverrides
50
+ } = theme;
50
51
  let overridesFromTheme = {};
51
52
  let overrideFromComponent = {};
52
53
  if (componentOverrides) {
package/lib/getTheme.js CHANGED
@@ -53,12 +53,10 @@ var _mergeDeep = require("@instructure/ui-utils/lib/mergeDeep.js");
53
53
  * `ancestorTheme` is a theme object from an ancestor `ThemeProvider`
54
54
  */
55
55
  const getTheme = (themeOrLegacyOverride, themeOverride) => (ancestorTheme = {}) => {
56
- var _resolvedLegacyThemeO;
57
56
  // we need to clone the ancestor theme not to override it
58
57
  let currentTheme;
59
58
  if (Object.keys(ancestorTheme).length === 0) {
60
- var _process, _process$env, _process2, _process2$env;
61
- if (typeof process !== 'undefined' && (((_process = process) === null || _process === void 0 ? void 0 : (_process$env = _process.env) === null || _process$env === void 0 ? void 0 : _process$env.NODE_ENV) !== 'production' || ((_process2 = process) === null || _process2 === void 0 ? void 0 : (_process2$env = _process2.env) === null || _process2$env === void 0 ? void 0 : _process2$env.GITHUB_PULL_REQUEST_PREVIEW) === 'true')) {}
59
+ if (typeof process !== 'undefined' && (process?.env?.NODE_ENV !== 'production' || process?.env?.GITHUB_PULL_REQUEST_PREVIEW === 'true')) {}
62
60
  currentTheme = _uiThemes.default;
63
61
  } else {
64
62
  currentTheme = ancestorTheme;
@@ -77,18 +75,17 @@ const getTheme = (themeOrLegacyOverride, themeOverride) => (ancestorTheme = {})
77
75
  };
78
76
  }
79
77
  } catch {
80
- var _process3, _process3$env, _process4, _process4$env;
81
78
  // If the prop passed is not an Object, it will throw an error.
82
79
  // We are using this fail-safe here for the non-TS users,
83
80
  // because the whole page can break without a theme.
84
- if (typeof process !== 'undefined' && (((_process3 = process) === null || _process3 === void 0 ? void 0 : (_process3$env = _process3.env) === null || _process3$env === void 0 ? void 0 : _process3$env.NODE_ENV) !== 'production' || ((_process4 = process) === null || _process4 === void 0 ? void 0 : (_process4$env = _process4.env) === null || _process4$env === void 0 ? void 0 : _process4$env.GITHUB_PULL_REQUEST_PREVIEW) === 'true')) {}
81
+ if (typeof process !== 'undefined' && (process?.env?.NODE_ENV !== 'production' || process?.env?.GITHUB_PULL_REQUEST_PREVIEW === 'true')) {}
85
82
  resolvedLegacyThemeOrOverride = {};
86
83
  }
87
84
  const themeName = currentTheme.key;
88
85
 
89
86
  // legacy: we pick the overrides for the current theme from the override object
90
- const specificOverrides = (_resolvedLegacyThemeO = resolvedLegacyThemeOrOverride) === null || _resolvedLegacyThemeO === void 0 ? void 0 : _resolvedLegacyThemeO.themeOverrides;
91
- const currentThemeOverrides = (specificOverrides === null || specificOverrides === void 0 ? void 0 : specificOverrides[themeName]) || specificOverrides || {};
87
+ const specificOverrides = resolvedLegacyThemeOrOverride?.themeOverrides;
88
+ const currentThemeOverrides = specificOverrides?.[themeName] || specificOverrides || {};
92
89
  return (0, _mergeDeep.mergeDeep)(currentTheme, resolvedLegacyThemeOrOverride, currentThemeOverrides, ...(resolvedThemeOverride ? [{
93
90
  themeOverride: resolvedThemeOverride
94
91
  }] : []));
package/lib/styleUtils/calcFocusOutlineStyles.js CHANGED
@@ -35,13 +35,12 @@ var _alpha = require("@instructure/ui-color-utils/lib/alpha.js");
35
35
  * @returns CSS-in-JS style object containing focus outline styles ready for use with emotion or similar libraries.
36
36
  */
37
37
  const calcFocusOutlineStyles = (theme, params) => {
38
- var _params$focusColor, _params$focusPosition, _params$shouldAnimate, _params$focusWithin, _params$withFocusOutl, _params$customCSSSele;
39
- const focusColor = (_params$focusColor = params === null || params === void 0 ? void 0 : params.focusColor) !== null && _params$focusColor !== void 0 ? _params$focusColor : 'info';
40
- const focusPosition = (_params$focusPosition = params === null || params === void 0 ? void 0 : params.focusPosition) !== null && _params$focusPosition !== void 0 ? _params$focusPosition : 'offset';
41
- const shouldAnimateFocus = (_params$shouldAnimate = params === null || params === void 0 ? void 0 : params.shouldAnimateFocus) !== null && _params$shouldAnimate !== void 0 ? _params$shouldAnimate : true;
42
- const focusWithin = (_params$focusWithin = params === null || params === void 0 ? void 0 : params.focusWithin) !== null && _params$focusWithin !== void 0 ? _params$focusWithin : false;
43
- const withFocusOutline = (_params$withFocusOutl = params === null || params === void 0 ? void 0 : params.withFocusOutline) !== null && _params$withFocusOutl !== void 0 ? _params$withFocusOutl : false;
44
- const selector = (_params$customCSSSele = params === null || params === void 0 ? void 0 : params.customCSSSelector) !== null && _params$customCSSSele !== void 0 ? _params$customCSSSele : '&:focus';
38
+ const focusColor = params?.focusColor ?? 'info';
39
+ const focusPosition = params?.focusPosition ?? 'offset';
40
+ const shouldAnimateFocus = params?.shouldAnimateFocus ?? true;
41
+ const focusWithin = params?.focusWithin ?? false;
42
+ const withFocusOutline = params?.withFocusOutline ?? false;
43
+ const selector = params?.customCSSSelector ?? '&:focus';
45
44
  const focusColorVariants = {
46
45
  info: theme.infoColor,
47
46
  inverse: theme.onColor,
package/lib/styleUtils/calcSpacingFromShorthand.js CHANGED
@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.calcSpacingFromShorthand = calcSpacingFromShorthand;
7
+ require("core-js/modules/es.array.includes.js");
7
8
  /*
8
9
  * The MIT License (MIT)
9
10
  *
package/lib/styleUtils/mirrorShorthand.js CHANGED
@@ -57,9 +57,7 @@ function mirrorShorthandEdges(values) {
57
57
  if (valuesArr.length === 4) {
58
58
  // swap the 2nd and 4th values
59
59
  ;
60
- var _ref = [valuesArr[3], valuesArr[1]];
61
- valuesArr[1] = _ref[0];
62
- valuesArr[3] = _ref[1];
60
+ [valuesArr[1], valuesArr[3]] = [valuesArr[3], valuesArr[1]];
63
61
  }
64
62
  return valuesArr.join(' ');
65
63
  }
@@ -85,9 +83,7 @@ function mirrorShorthandCorners(values) {
85
83
  if (valuesArr.length === 2) {
86
84
  // swap the 1st and 2nd values
87
85
  ;
88
- var _ref2 = [valuesArr[1], valuesArr[0]];
89
- valuesArr[0] = _ref2[0];
90
- valuesArr[1] = _ref2[1];
86
+ [valuesArr[0], valuesArr[1]] = [valuesArr[1], valuesArr[0]];
91
87
  }
92
88
  if (valuesArr.length === 3) {
93
89
  // convert 3 value syntax to 4 value syntax
@@ -95,11 +91,7 @@ function mirrorShorthandCorners(values) {
95
91
  }
96
92
  if (valuesArr.length === 4) {
97
93
  ;
98
- var _ref3 = [valuesArr[1], valuesArr[0], valuesArr[3], valuesArr[2]];
99
- valuesArr[0] = _ref3[0];
100
- valuesArr[1] = _ref3[1];
101
- valuesArr[2] = _ref3[2];
102
- valuesArr[3] = _ref3[3];
94
+ [valuesArr[0], valuesArr[1], valuesArr[2], valuesArr[3]] = [valuesArr[1], valuesArr[0], valuesArr[3], valuesArr[2]];
103
95
  }
104
96
  return valuesArr.join(' ');
105
97
  }
package/lib/useComputedTheme.js CHANGED
@@ -45,18 +45,14 @@ var _react = require("@emotion/react");
45
45
  * `components` and `sharedTokens` of the current theme.
46
46
  */
47
47
  const useComputedTheme = () => {
48
- var _rawTheme$semantics, _rawTheme$sharedToken;
49
48
  const rawTheme = (0, _react.useTheme)().newTheme;
50
- const primitives = rawTheme === null || rawTheme === void 0 ? void 0 : rawTheme.primitives;
51
- const semantics = rawTheme === null || rawTheme === void 0 ? void 0 : (_rawTheme$semantics = rawTheme.semantics) === null || _rawTheme$semantics === void 0 ? void 0 : _rawTheme$semantics.call(rawTheme, primitives);
52
- const components = Object.keys(rawTheme === null || rawTheme === void 0 ? void 0 : rawTheme.components).reduce((acc, component) => {
53
- var _rawTheme$components$, _rawTheme$components;
54
- return {
55
- ...acc,
56
- [component]: (_rawTheme$components$ = (_rawTheme$components = rawTheme.components)[component]) === null || _rawTheme$components$ === void 0 ? void 0 : _rawTheme$components$.call(_rawTheme$components, semantics)
57
- };
58
- }, {});
59
- const sharedTokens = rawTheme === null || rawTheme === void 0 ? void 0 : (_rawTheme$sharedToken = rawTheme.sharedTokens) === null || _rawTheme$sharedToken === void 0 ? void 0 : _rawTheme$sharedToken.call(rawTheme, semantics);
49
+ const primitives = rawTheme?.primitives;
50
+ const semantics = rawTheme?.semantics?.(primitives);
51
+ const components = Object.keys(rawTheme?.components).reduce((acc, component) => ({
52
+ ...acc,
53
+ [component]: rawTheme.components[component]?.(semantics)
54
+ }), {});
55
+ const sharedTokens = rawTheme?.sharedTokens?.(semantics);
60
56
  return {
61
57
  primitives,
62
58
  semantics,
package/lib/useStyle.js CHANGED
@@ -38,25 +38,26 @@ var _mergeDeep = require("@instructure/ui-utils/lib/mergeDeep.js");
38
38
  // TODO: improve useStyle to handle generateStyle functions that don't
39
39
  // have a theme.
40
40
  const useStyle = useStyleParams => {
41
- var _themeOverrideFromPro, _themeInContext$newTh, _themeInContext$newTh2, _themeInContext$newTh3, _themeInContext$newTh4, _themeInContext$newTh5, _themeInContext$newTh6;
42
- const generateStyle = useStyleParams.generateStyle,
43
- params = useStyleParams.params,
44
- componentId = useStyleParams.componentId,
45
- themeOverride = useStyleParams.themeOverride;
41
+ const {
42
+ generateStyle,
43
+ params,
44
+ componentId,
45
+ themeOverride
46
+ } = useStyleParams;
46
47
  const useTokensFrom = useStyleParams.useTokensFrom;
47
48
  const themeInContext = (0, _useTheme.useTheme)();
48
49
  const themeOverrideFromProvider = themeInContext.themeOverride;
49
- const componentWithTokensId = useTokensFrom !== null && useTokensFrom !== void 0 ? useTokensFrom : componentId;
50
+ const componentWithTokensId = useTokensFrom ?? componentId;
50
51
 
51
52
  // resolving the theming functions and applying the overrides
52
- const primitiveOverrides = themeOverrideFromProvider === null || themeOverrideFromProvider === void 0 ? void 0 : themeOverrideFromProvider.primitives;
53
- const semanticsOverrides = themeOverrideFromProvider === null || themeOverrideFromProvider === void 0 ? void 0 : themeOverrideFromProvider.semantics;
54
- const sharedTokensOverrides = themeOverrideFromProvider === null || themeOverrideFromProvider === void 0 ? void 0 : themeOverrideFromProvider.sharedTokens;
55
- const componentOverridesFromSettingsProvider = themeOverrideFromProvider === null || themeOverrideFromProvider === void 0 ? void 0 : (_themeOverrideFromPro = themeOverrideFromProvider.components) === null || _themeOverrideFromPro === void 0 ? void 0 : _themeOverrideFromPro[componentWithTokensId];
53
+ const primitiveOverrides = themeOverrideFromProvider?.primitives;
54
+ const semanticsOverrides = themeOverrideFromProvider?.semantics;
55
+ const sharedTokensOverrides = themeOverrideFromProvider?.sharedTokens;
56
+ const componentOverridesFromSettingsProvider = themeOverrideFromProvider?.components?.[componentWithTokensId];
56
57
  const primitives = (0, _mergeDeep.mergeDeep)(themeInContext.newTheme.primitives, primitiveOverrides);
57
- const semantics = (0, _mergeDeep.mergeDeep)((_themeInContext$newTh = (_themeInContext$newTh2 = themeInContext.newTheme).semantics) === null || _themeInContext$newTh === void 0 ? void 0 : _themeInContext$newTh.call(_themeInContext$newTh2, primitives), semanticsOverrides);
58
- const sharedTokens = (0, _mergeDeep.mergeDeep)((_themeInContext$newTh3 = (_themeInContext$newTh4 = themeInContext.newTheme).sharedTokens) === null || _themeInContext$newTh3 === void 0 ? void 0 : _themeInContext$newTh3.call(_themeInContext$newTh4, semantics), sharedTokensOverrides);
59
- const baseComponentTheme = (_themeInContext$newTh5 = (_themeInContext$newTh6 = themeInContext.newTheme.components)[componentWithTokensId]) === null || _themeInContext$newTh5 === void 0 ? void 0 : _themeInContext$newTh5.call(_themeInContext$newTh6, semantics);
58
+ const semantics = (0, _mergeDeep.mergeDeep)(themeInContext.newTheme.semantics?.(primitives), semanticsOverrides);
59
+ const sharedTokens = (0, _mergeDeep.mergeDeep)(themeInContext.newTheme.sharedTokens?.(semantics), sharedTokensOverrides);
60
+ const baseComponentTheme = themeInContext.newTheme.components[componentWithTokensId]?.(semantics);
60
61
  const componentThemeFromSettingsProvider = (0, _mergeDeep.mergeDeep)(baseComponentTheme, componentOverridesFromSettingsProvider);
61
62
  const componentTheme = (0, _mergeDeep.mergeDeep)(componentThemeFromSettingsProvider, typeof themeOverride === 'function' ? themeOverride(componentThemeFromSettingsProvider, themeInContext) : themeOverride);
62
63
 
package/lib/useStyleLegacy.js CHANGED
@@ -40,15 +40,16 @@ var _getComponentThemeOverride = require("./getComponentThemeOverride");
40
40
  * theming system (InstUI v12)
41
41
  */
42
42
  const useStyleLegacy = useStyleParams => {
43
- var _ref;
44
- const generateStyle = useStyleParams.generateStyle,
45
- params = useStyleParams.params,
46
- componentId = useStyleParams.componentId,
47
- displayName = useStyleParams.displayName;
48
- const generateComponentTheme = useStyleParams === null || useStyleParams === void 0 ? void 0 : useStyleParams.generateComponentTheme;
43
+ const {
44
+ generateStyle,
45
+ params,
46
+ componentId,
47
+ displayName
48
+ } = useStyleParams;
49
+ const generateComponentTheme = useStyleParams?.generateComponentTheme;
49
50
  const theme = (0, _useTheme.useTheme)();
50
51
  const baseComponentTheme = typeof generateComponentTheme === 'function' ? generateComponentTheme(theme) : {};
51
- const themeOverride = (0, _getComponentThemeOverride.getComponentThemeOverride)(theme, (_ref = displayName !== null && displayName !== void 0 ? displayName : componentId) !== null && _ref !== void 0 ? _ref : '', componentId, params === null || params === void 0 ? void 0 : params.themeOverride, baseComponentTheme);
52
+ const themeOverride = (0, _getComponentThemeOverride.getComponentThemeOverride)(theme, displayName ?? componentId ?? '', componentId, params?.themeOverride, baseComponentTheme);
52
53
  const componentTheme = {
53
54
  ...baseComponentTheme,
54
55
  ...themeOverride
package/lib/useTheme.js CHANGED
@@ -44,8 +44,7 @@ const useTheme = () => {
44
44
  // This reads the theme from Emotion's ThemeContext
45
45
  let theme = (0, _react.useTheme)();
46
46
  if ((0, _isEmpty.isEmpty)(theme)) {
47
- var _process, _process$env, _process2, _process2$env;
48
- if (typeof process !== 'undefined' && (((_process = process) === null || _process === void 0 ? void 0 : (_process$env = _process.env) === null || _process$env === void 0 ? void 0 : _process$env.NODE_ENV) !== 'production' || ((_process2 = process) === null || _process2 === void 0 ? void 0 : (_process2$env = _process2.env) === null || _process2$env === void 0 ? void 0 : _process2$env.GITHUB_PULL_REQUEST_PREVIEW) === 'true')) {}
47
+ if (typeof process !== 'undefined' && (process?.env?.NODE_ENV !== 'production' || process?.env?.GITHUB_PULL_REQUEST_PREVIEW === 'true')) {}
49
48
  theme = _uiThemes.default;
50
49
  }
51
50
  return theme;