@instructure/ui-flex 11.7.3-snapshot-25 → 11.7.3-snapshot-27

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 (21) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/es/Flex/v1/Item/index.js +39 -37
  3. package/es/Flex/v1/Item/styles.js +8 -6
  4. package/es/Flex/v1/index.js +43 -40
  5. package/es/Flex/v1/styles.js +7 -5
  6. package/es/Flex/v1/theme.js +5 -3
  7. package/es/Flex/v2/Item/index.js +39 -37
  8. package/es/Flex/v2/Item/styles.js +8 -6
  9. package/es/Flex/v2/index.js +43 -40
  10. package/es/Flex/v2/styles.js +7 -5
  11. package/lib/Flex/v1/Item/index.js +39 -37
  12. package/lib/Flex/v1/Item/styles.js +8 -6
  13. package/lib/Flex/v1/index.js +43 -40
  14. package/lib/Flex/v1/styles.js +7 -5
  15. package/lib/Flex/v1/theme.js +5 -3
  16. package/lib/Flex/v2/Item/index.js +39 -37
  17. package/lib/Flex/v2/Item/styles.js +8 -6
  18. package/lib/Flex/v2/index.js +43 -40
  19. package/lib/Flex/v2/styles.js +7 -5
  20. package/package.json +10 -10
  21. package/tsconfig.build.tsbuildinfo +1 -1
package/lib/Flex/v1/Item/index.js CHANGED
@@ -12,7 +12,7 @@ var _emotion = require("@instructure/emotion");
12
12
  var _styles = _interopRequireDefault(require("./styles"));
13
13
  var _props = require("./props");
14
14
  var _jsxRuntime = require("@emotion/react/jsx-runtime");
15
- var _dec, _class, _Item;
15
+ var _dec, _class;
16
16
  /*
17
17
  * The MIT License (MIT)
18
18
  *
@@ -42,49 +42,55 @@ parent: Flex
42
42
  id: Flex.Item
43
43
  ---
44
44
  **/
45
- let Item = exports.Item = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, null), _dec(_class = (_Item = class Item extends _react.Component {
46
- constructor(...args) {
47
- super(...args);
48
- this.ref = null;
49
- this.handleRef = el => {
50
- const elementRef = this.props.elementRef;
51
- this.ref = el;
52
- if (typeof elementRef === 'function') {
53
- elementRef(el);
54
- }
55
- };
56
- }
45
+ let Item = exports.Item = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, null), _dec(_class = class Item extends _react.Component {
46
+ static displayName = "Item";
47
+ static componentId = 'Flex.Item';
57
48
  componentDidMount() {
58
- var _this$props$makeStyle, _this$props;
59
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
49
+ this.props.makeStyles?.();
60
50
  }
61
51
  componentDidUpdate() {
62
- var _this$props$makeStyle2, _this$props2;
63
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
52
+ this.props.makeStyles?.();
64
53
  }
54
+ static allowedProps = _props.allowedProps;
55
+ static defaultProps = {
56
+ as: 'span',
57
+ shouldGrow: false,
58
+ shouldShrink: false
59
+ };
60
+ ref = null;
61
+ handleRef = el => {
62
+ const {
63
+ elementRef
64
+ } = this.props;
65
+ this.ref = el;
66
+ if (typeof elementRef === 'function') {
67
+ elementRef(el);
68
+ }
69
+ };
65
70
  render() {
66
71
  const props = (0, _omitProps.omitProps)(this.props, Item.allowedProps);
67
- const _this$props3 = this.props,
68
- as = _this$props3.as,
69
- children = _this$props3.children,
70
- withVisualDebug = _this$props3.withVisualDebug,
71
- textAlign = _this$props3.textAlign,
72
- size = _this$props3.size,
73
- direction = _this$props3.direction,
74
- margin = _this$props3.margin,
75
- padding = _this$props3.padding,
76
- overflowX = _this$props3.overflowX,
77
- overflowY = _this$props3.overflowY,
78
- styles = _this$props3.styles;
72
+ const {
73
+ as,
74
+ children,
75
+ withVisualDebug,
76
+ textAlign,
77
+ size,
78
+ direction,
79
+ margin,
80
+ padding,
81
+ overflowX,
82
+ overflowY,
83
+ styles
84
+ } = this.props;
79
85
  const dirColumn = direction === 'column';
80
86
  const dirRow = direction === 'row';
81
87
  return (0, _jsxRuntime.jsx)(_v11_.View, {
82
88
  ...props,
83
- css: styles === null || styles === void 0 ? void 0 : styles.flexItem,
89
+ css: styles?.flexItem,
84
90
  elementRef: this.handleRef,
85
91
  as: as,
86
- minHeight: dirColumn ? size : void 0,
87
- minWidth: dirRow ? size : void 0,
92
+ minHeight: dirColumn ? size : undefined,
93
+ minWidth: dirRow ? size : undefined,
88
94
  textAlign: textAlign,
89
95
  margin: margin,
90
96
  padding: padding,
@@ -94,9 +100,5 @@ let Item = exports.Item = (_dec = (0, _emotion.withStyleLegacy)(_styles.default,
94
100
  children: children
95
101
  });
96
102
  }
97
- }, _Item.displayName = "Item", _Item.componentId = 'Flex.Item', _Item.allowedProps = _props.allowedProps, _Item.defaultProps = {
98
- as: 'span',
99
- shouldGrow: false,
100
- shouldShrink: false
101
- }, _Item)) || _class);
103
+ }) || _class);
102
104
  var _default = exports.default = Item;
package/lib/Flex/v1/Item/styles.js CHANGED
@@ -39,11 +39,13 @@ exports.default = void 0;
39
39
  * @return {Object} The final style object, which will be used in the component
40
40
  */
41
41
  const generateStyle = (_componentTheme, props) => {
42
- const shouldGrow = props.shouldGrow,
43
- shouldShrink = props.shouldShrink,
44
- align = props.align,
45
- size = props.size,
46
- order = props.order;
42
+ const {
43
+ shouldGrow,
44
+ shouldShrink,
45
+ align,
46
+ size,
47
+ order
48
+ } = props;
47
49
  const alignSelfValues = {
48
50
  start: 'flex-start',
49
51
  end: 'flex-end',
@@ -56,7 +58,7 @@ const generateStyle = (_componentTheme, props) => {
56
58
  boxSizing: 'border-box',
57
59
  minWidth: '0.0625rem',
58
60
  flexBasis: size,
59
- ...(order !== void 0 ? {
61
+ ...(order !== undefined ? {
60
62
  order
61
63
  } : {}),
62
64
  // initial value is 1, but we want 0 as our default,
package/lib/Flex/v1/index.js CHANGED
@@ -24,7 +24,7 @@ var _styles = _interopRequireDefault(require("./styles"));
24
24
  var _theme = _interopRequireDefault(require("./theme"));
25
25
  var _props = require("./props");
26
26
  var _jsxRuntime = require("@emotion/react/jsx-runtime");
27
- var _dec, _class, _Flex;
27
+ var _dec, _class;
28
28
  /*
29
29
  * The MIT License (MIT)
30
30
  *
@@ -54,26 +54,36 @@ category: components
54
54
  ---
55
55
  @module Flex
56
56
  **/
57
- let Flex = exports.Flex = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_Flex = class Flex extends _react.Component {
58
- constructor(...args) {
59
- super(...args);
60
- this.ref = null;
61
- this.handleRef = el => {
62
- const elementRef = this.props.elementRef;
63
- this.ref = el;
64
- if (typeof elementRef === 'function') {
65
- elementRef(el);
66
- }
67
- };
68
- }
57
+ let Flex = exports.Flex = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = class Flex extends _react.Component {
58
+ static displayName = "Flex";
59
+ static componentId = 'Flex';
69
60
  componentDidMount() {
70
- var _this$props$makeStyle, _this$props;
71
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
61
+ this.props.makeStyles?.();
72
62
  }
73
63
  componentDidUpdate() {
74
- var _this$props$makeStyle2, _this$props2;
75
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
64
+ this.props.makeStyles?.();
76
65
  }
66
+ static Item = _Item.Item;
67
+ static allowedProps = _props.allowedProps;
68
+ static defaultProps = {
69
+ as: 'span',
70
+ direction: 'row',
71
+ justifyItems: 'start',
72
+ display: 'flex',
73
+ withVisualDebug: false,
74
+ wrap: 'no-wrap',
75
+ gap: 'none'
76
+ };
77
+ ref = null;
78
+ handleRef = el => {
79
+ const {
80
+ elementRef
81
+ } = this.props;
82
+ this.ref = el;
83
+ if (typeof elementRef === 'function') {
84
+ elementRef(el);
85
+ }
86
+ };
77
87
  renderChildren(children) {
78
88
  // TODO this might fail if children are () => ReactNode
79
89
  return _react.Children.map(children, child => {
@@ -89,25 +99,26 @@ let Flex = exports.Flex = (_dec = (0, _emotion.withStyleLegacy)(_styles.default,
89
99
  });
90
100
  }
91
101
  render() {
92
- const _this$props3 = this.props,
93
- as = _this$props3.as,
94
- withVisualDebug = _this$props3.withVisualDebug,
95
- height = _this$props3.height,
96
- display = _this$props3.display,
97
- margin = _this$props3.margin,
98
- padding = _this$props3.padding,
99
- textAlign = _this$props3.textAlign,
100
- width = _this$props3.width,
101
- styles = _this$props3.styles,
102
- gap = _this$props3.gap,
103
- wrap = _this$props3.wrap;
102
+ const {
103
+ as,
104
+ withVisualDebug,
105
+ height,
106
+ display,
107
+ margin,
108
+ padding,
109
+ textAlign,
110
+ width,
111
+ styles,
112
+ gap,
113
+ wrap
114
+ } = this.props;
104
115
  const children = (0, _callRenderProp.callRenderProp)(this.props.children);
105
- const gapValuesArray = gap === null || gap === void 0 ? void 0 : gap.split(' ');
116
+ const gapValuesArray = gap?.split(' ');
106
117
  if (gapValuesArray.length > 1 && wrap === 'no-wrap') {}
107
118
  if (children && _react.Children.count(children) > 0) {
108
119
  return (0, _jsxRuntime.jsx)(_v11_.View, {
109
120
  ...(0, _passthroughProps.passthroughProps)(this.props),
110
- css: styles === null || styles === void 0 ? void 0 : styles.flex,
121
+ css: styles?.flex,
111
122
  elementRef: this.handleRef,
112
123
  as: as,
113
124
  display: display,
@@ -123,13 +134,5 @@ let Flex = exports.Flex = (_dec = (0, _emotion.withStyleLegacy)(_styles.default,
123
134
  return null;
124
135
  }
125
136
  }
126
- }, _Flex.displayName = "Flex", _Flex.componentId = 'Flex', _Flex.Item = _Item.Item, _Flex.allowedProps = _props.allowedProps, _Flex.defaultProps = {
127
- as: 'span',
128
- direction: 'row',
129
- justifyItems: 'start',
130
- display: 'flex',
131
- withVisualDebug: false,
132
- wrap: 'no-wrap',
133
- gap: 'none'
134
- }, _Flex)) || _class);
137
+ }) || _class);
135
138
  var _default = exports.default = Flex;
package/lib/Flex/v1/styles.js CHANGED
@@ -45,10 +45,12 @@ var _emotion = require("@instructure/emotion");
45
45
  */
46
46
 
47
47
  const generateStyle = (componentTheme, props) => {
48
- const justifyItems = props.justifyItems,
49
- wrap = props.wrap,
50
- direction = props.direction,
51
- gap = props.gap;
48
+ const {
49
+ justifyItems,
50
+ wrap,
51
+ direction,
52
+ gap
53
+ } = props;
52
54
 
53
55
  // align-items css prop
54
56
  // When flex direction is row, 'center' is the most useful default because it
@@ -74,7 +76,7 @@ const generateStyle = (componentTheme, props) => {
74
76
  const wrapValues = {
75
77
  wrap: 'wrap',
76
78
  'wrap-reverse': 'wrap-reverse',
77
- 'no-wrap': void 0
79
+ 'no-wrap': undefined
78
80
  };
79
81
 
80
82
  // flex-direction css props
package/lib/Flex/v1/theme.js CHANGED
@@ -35,10 +35,12 @@ var _emotion = require("@instructure/emotion");
35
35
  * @return {Object} The final theme object with the overrides and component variables
36
36
  */
37
37
  const generateComponentTheme = theme => {
38
- const typography = theme.typography,
39
- spacing = theme.spacing;
38
+ const {
39
+ typography,
40
+ spacing
41
+ } = theme;
40
42
  const componentVariables = {
41
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
43
+ fontFamily: typography?.fontFamily,
42
44
  ...(0, _emotion.makeThemeVars)('gap', spacing)
43
45
  };
44
46
  return {
package/lib/Flex/v2/Item/index.js CHANGED
@@ -12,7 +12,7 @@ var _emotion = require("@instructure/emotion");
12
12
  var _styles = _interopRequireDefault(require("./styles"));
13
13
  var _props = require("./props");
14
14
  var _jsxRuntime = require("@emotion/react/jsx-runtime");
15
- var _dec, _class, _Item;
15
+ var _dec, _class;
16
16
  /*
17
17
  * The MIT License (MIT)
18
18
  *
@@ -42,49 +42,55 @@ parent: Flex
42
42
  id: Flex.Item
43
43
  ---
44
44
  **/
45
- let Item = exports.Item = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, null), _dec(_class = (_Item = class Item extends _react.Component {
46
- constructor(...args) {
47
- super(...args);
48
- this.ref = null;
49
- this.handleRef = el => {
50
- const elementRef = this.props.elementRef;
51
- this.ref = el;
52
- if (typeof elementRef === 'function') {
53
- elementRef(el);
54
- }
55
- };
56
- }
45
+ let Item = exports.Item = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, null), _dec(_class = class Item extends _react.Component {
46
+ static displayName = "Item";
47
+ static componentId = 'Flex.Item';
57
48
  componentDidMount() {
58
- var _this$props$makeStyle, _this$props;
59
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
49
+ this.props.makeStyles?.();
60
50
  }
61
51
  componentDidUpdate() {
62
- var _this$props$makeStyle2, _this$props2;
63
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
52
+ this.props.makeStyles?.();
64
53
  }
54
+ static allowedProps = _props.allowedProps;
55
+ static defaultProps = {
56
+ as: 'span',
57
+ shouldGrow: false,
58
+ shouldShrink: false
59
+ };
60
+ ref = null;
61
+ handleRef = el => {
62
+ const {
63
+ elementRef
64
+ } = this.props;
65
+ this.ref = el;
66
+ if (typeof elementRef === 'function') {
67
+ elementRef(el);
68
+ }
69
+ };
65
70
  render() {
66
71
  const props = (0, _omitProps.omitProps)(this.props, Item.allowedProps);
67
- const _this$props3 = this.props,
68
- as = _this$props3.as,
69
- children = _this$props3.children,
70
- withVisualDebug = _this$props3.withVisualDebug,
71
- textAlign = _this$props3.textAlign,
72
- size = _this$props3.size,
73
- direction = _this$props3.direction,
74
- margin = _this$props3.margin,
75
- padding = _this$props3.padding,
76
- overflowX = _this$props3.overflowX,
77
- overflowY = _this$props3.overflowY,
78
- styles = _this$props3.styles;
72
+ const {
73
+ as,
74
+ children,
75
+ withVisualDebug,
76
+ textAlign,
77
+ size,
78
+ direction,
79
+ margin,
80
+ padding,
81
+ overflowX,
82
+ overflowY,
83
+ styles
84
+ } = this.props;
79
85
  const dirColumn = direction === 'column';
80
86
  const dirRow = direction === 'row';
81
87
  return (0, _jsxRuntime.jsx)(_latest.View, {
82
88
  ...props,
83
- css: styles === null || styles === void 0 ? void 0 : styles.flexItem,
89
+ css: styles?.flexItem,
84
90
  elementRef: this.handleRef,
85
91
  as: as,
86
- minHeight: dirColumn ? size : void 0,
87
- minWidth: dirRow ? size : void 0,
92
+ minHeight: dirColumn ? size : undefined,
93
+ minWidth: dirRow ? size : undefined,
88
94
  textAlign: textAlign,
89
95
  margin: margin,
90
96
  padding: padding,
@@ -94,9 +100,5 @@ let Item = exports.Item = (_dec = (0, _emotion.withStyleLegacy)(_styles.default,
94
100
  children: children
95
101
  });
96
102
  }
97
- }, _Item.displayName = "Item", _Item.componentId = 'Flex.Item', _Item.allowedProps = _props.allowedProps, _Item.defaultProps = {
98
- as: 'span',
99
- shouldGrow: false,
100
- shouldShrink: false
101
- }, _Item)) || _class);
103
+ }) || _class);
102
104
  var _default = exports.default = Item;
package/lib/Flex/v2/Item/styles.js CHANGED
@@ -39,11 +39,13 @@ exports.default = void 0;
39
39
  * @return {Object} The final style object, which will be used in the component
40
40
  */
41
41
  const generateStyle = (_componentTheme, props) => {
42
- const shouldGrow = props.shouldGrow,
43
- shouldShrink = props.shouldShrink,
44
- align = props.align,
45
- size = props.size,
46
- order = props.order;
42
+ const {
43
+ shouldGrow,
44
+ shouldShrink,
45
+ align,
46
+ size,
47
+ order
48
+ } = props;
47
49
  const alignSelfValues = {
48
50
  start: 'flex-start',
49
51
  end: 'flex-end',
@@ -56,7 +58,7 @@ const generateStyle = (_componentTheme, props) => {
56
58
  boxSizing: 'border-box',
57
59
  minWidth: '0.0625rem',
58
60
  flexBasis: size,
59
- ...(order !== void 0 ? {
61
+ ...(order !== undefined ? {
60
62
  order
61
63
  } : {}),
62
64
  // initial value is 1, but we want 0 as our default,
package/lib/Flex/v2/index.js CHANGED
@@ -23,7 +23,7 @@ var _Item = require("./Item");
23
23
  var _styles = _interopRequireDefault(require("./styles"));
24
24
  var _props = require("./props");
25
25
  var _jsxRuntime = require("@emotion/react/jsx-runtime");
26
- var _dec, _class, _Flex;
26
+ var _dec, _class;
27
27
  /*
28
28
  * The MIT License (MIT)
29
29
  *
@@ -53,26 +53,36 @@ category: components
53
53
  ---
54
54
  @module Flex
55
55
  **/
56
- let Flex = exports.Flex = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = (_Flex = class Flex extends _react.Component {
57
- constructor(...args) {
58
- super(...args);
59
- this.ref = null;
60
- this.handleRef = el => {
61
- const elementRef = this.props.elementRef;
62
- this.ref = el;
63
- if (typeof elementRef === 'function') {
64
- elementRef(el);
65
- }
66
- };
67
- }
56
+ let Flex = exports.Flex = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = class Flex extends _react.Component {
57
+ static displayName = "Flex";
58
+ static componentId = 'Flex';
68
59
  componentDidMount() {
69
- var _this$props$makeStyle, _this$props;
70
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
60
+ this.props.makeStyles?.();
71
61
  }
72
62
  componentDidUpdate() {
73
- var _this$props$makeStyle2, _this$props2;
74
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
63
+ this.props.makeStyles?.();
75
64
  }
65
+ static Item = _Item.Item;
66
+ static allowedProps = _props.allowedProps;
67
+ static defaultProps = {
68
+ as: 'span',
69
+ direction: 'row',
70
+ justifyItems: 'start',
71
+ display: 'flex',
72
+ withVisualDebug: false,
73
+ wrap: 'no-wrap',
74
+ gap: 'none'
75
+ };
76
+ ref = null;
77
+ handleRef = el => {
78
+ const {
79
+ elementRef
80
+ } = this.props;
81
+ this.ref = el;
82
+ if (typeof elementRef === 'function') {
83
+ elementRef(el);
84
+ }
85
+ };
76
86
  renderChildren(children) {
77
87
  // TODO this might fail if children are () => ReactNode
78
88
  return _react.Children.map(children, child => {
@@ -88,25 +98,26 @@ let Flex = exports.Flex = (_dec = (0, _emotion.withStyle)(_styles.default), _dec
88
98
  });
89
99
  }
90
100
  render() {
91
- const _this$props3 = this.props,
92
- as = _this$props3.as,
93
- withVisualDebug = _this$props3.withVisualDebug,
94
- height = _this$props3.height,
95
- display = _this$props3.display,
96
- margin = _this$props3.margin,
97
- padding = _this$props3.padding,
98
- textAlign = _this$props3.textAlign,
99
- width = _this$props3.width,
100
- styles = _this$props3.styles,
101
- gap = _this$props3.gap,
102
- wrap = _this$props3.wrap;
101
+ const {
102
+ as,
103
+ withVisualDebug,
104
+ height,
105
+ display,
106
+ margin,
107
+ padding,
108
+ textAlign,
109
+ width,
110
+ styles,
111
+ gap,
112
+ wrap
113
+ } = this.props;
103
114
  const children = (0, _callRenderProp.callRenderProp)(this.props.children);
104
- const gapValuesArray = gap === null || gap === void 0 ? void 0 : gap.split(' ');
115
+ const gapValuesArray = gap?.split(' ');
105
116
  if (gapValuesArray.length > 1 && wrap === 'no-wrap') {}
106
117
  if (children && _react.Children.count(children) > 0) {
107
118
  return (0, _jsxRuntime.jsx)(_latest.View, {
108
119
  ...(0, _passthroughProps.passthroughProps)(this.props),
109
- css: styles === null || styles === void 0 ? void 0 : styles.flex,
120
+ css: styles?.flex,
110
121
  elementRef: this.handleRef,
111
122
  as: as,
112
123
  display: display,
@@ -122,13 +133,5 @@ let Flex = exports.Flex = (_dec = (0, _emotion.withStyle)(_styles.default), _dec
122
133
  return null;
123
134
  }
124
135
  }
125
- }, _Flex.displayName = "Flex", _Flex.componentId = 'Flex', _Flex.Item = _Item.Item, _Flex.allowedProps = _props.allowedProps, _Flex.defaultProps = {
126
- as: 'span',
127
- direction: 'row',
128
- justifyItems: 'start',
129
- display: 'flex',
130
- withVisualDebug: false,
131
- wrap: 'no-wrap',
132
- gap: 'none'
133
- }, _Flex)) || _class);
136
+ }) || _class);
134
137
  var _default = exports.default = Flex;
package/lib/Flex/v2/styles.js CHANGED
@@ -45,10 +45,12 @@ var _emotion = require("@instructure/emotion");
45
45
  */
46
46
 
47
47
  const generateStyle = (componentTheme, props, sharedTokens) => {
48
- const justifyItems = props.justifyItems,
49
- wrap = props.wrap,
50
- direction = props.direction,
51
- gap = props.gap;
48
+ const {
49
+ justifyItems,
50
+ wrap,
51
+ direction,
52
+ gap
53
+ } = props;
52
54
 
53
55
  // align-items css prop
54
56
  // When flex direction is row, 'center' is the most useful default because it
@@ -74,7 +76,7 @@ const generateStyle = (componentTheme, props, sharedTokens) => {
74
76
  const wrapValues = {
75
77
  wrap: 'wrap',
76
78
  'wrap-reverse': 'wrap-reverse',
77
- 'no-wrap': void 0
79
+ 'no-wrap': undefined
78
80
  };
79
81
 
80
82
  // flex-direction css props
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-flex",
3
- "version": "11.7.3-snapshot-25",
3
+ "version": "11.7.3-snapshot-27",
4
4
  "description": "A component that makes it easy to align content using flexbox CSS",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -14,20 +14,20 @@
14
14
  "bugs": "https://github.com/instructure/instructure-ui/issues",
15
15
  "license": "MIT",
16
16
  "dependencies": {
17
- "@babel/runtime": "^7.27.6",
18
- "@instructure/console": "11.7.3-snapshot-25",
19
- "@instructure/emotion": "11.7.3-snapshot-25",
20
- "@instructure/shared-types": "11.7.3-snapshot-25",
21
- "@instructure/ui-react-utils": "11.7.3-snapshot-25",
22
- "@instructure/ui-themes": "11.7.3-snapshot-25",
23
- "@instructure/ui-view": "11.7.3-snapshot-25"
17
+ "@babel/runtime": "^7.29.2",
18
+ "@instructure/emotion": "11.7.3-snapshot-27",
19
+ "@instructure/console": "11.7.3-snapshot-27",
20
+ "@instructure/shared-types": "11.7.3-snapshot-27",
21
+ "@instructure/ui-themes": "11.7.3-snapshot-27",
22
+ "@instructure/ui-react-utils": "11.7.3-snapshot-27",
23
+ "@instructure/ui-view": "11.7.3-snapshot-27"
24
24
  },
25
25
  "devDependencies": {
26
26
  "@testing-library/jest-dom": "^6.6.3",
27
27
  "@testing-library/react": "15.0.7",
28
28
  "vitest": "^3.2.2",
29
- "@instructure/ui-babel-preset": "11.7.3-snapshot-25",
30
- "@instructure/ui-axe-check": "11.7.3-snapshot-25"
29
+ "@instructure/ui-axe-check": "11.7.3-snapshot-27",
30
+ "@instructure/ui-babel-preset": "11.7.3-snapshot-27"
31
31
  },
32
32
  "peerDependencies": {
33
33
  "react": ">=18 <=19"