@instructure/ui-toggle-details 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 (19) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/es/ToggleDetails/v1/index.js +46 -51
  3. package/es/ToggleDetails/v1/styles.js +6 -4
  4. package/es/ToggleDetails/v1/theme.js +27 -26
  5. package/es/ToggleDetails/v2/index.js +46 -51
  6. package/es/ToggleDetails/v2/styles.js +6 -4
  7. package/es/ToggleGroup/v1/index.js +44 -38
  8. package/es/ToggleGroup/v1/theme.js +4 -3
  9. package/es/ToggleGroup/v2/index.js +44 -38
  10. package/lib/ToggleDetails/v1/index.js +46 -51
  11. package/lib/ToggleDetails/v1/styles.js +6 -4
  12. package/lib/ToggleDetails/v1/theme.js +27 -26
  13. package/lib/ToggleDetails/v2/index.js +46 -51
  14. package/lib/ToggleDetails/v2/styles.js +6 -4
  15. package/lib/ToggleGroup/v1/index.js +44 -38
  16. package/lib/ToggleGroup/v1/theme.js +4 -3
  17. package/lib/ToggleGroup/v2/index.js +44 -38
  18. package/package.json +17 -17
  19. 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/ui-toggle-details
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/ToggleDetails/v1/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _class, _ToggleDetails;
1
+ var _dec, _class;
2
2
  /*
3
3
  * The MIT License (MIT)
4
4
  *
@@ -39,51 +39,56 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
39
39
  category: components
40
40
  ---
41
41
  **/
42
- let ToggleDetails = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_ToggleDetails = class ToggleDetails extends Component {
43
- constructor(...args) {
44
- super(...args);
45
- this._buttonNode = null;
46
- this.ref = /*#__PURE__*/createRef();
47
- // TODO this solution was generated with Gemini, should be tested if it works as fine as before
48
- this.setButtonRef = node => {
49
- this._buttonNode = node;
50
- };
51
- this.handleToggle = (event, expanded) => {
52
- if (typeof this.props.onToggle === 'function') {
53
- this.props.onToggle(event, expanded);
54
- }
55
- };
56
- }
42
+ let ToggleDetails = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class ToggleDetails extends Component {
43
+ static displayName = "ToggleDetails";
44
+ static componentId = 'ToggleDetails';
45
+ static allowedProps = allowedProps;
46
+ static defaultProps = {
47
+ variant: 'default',
48
+ size: 'medium',
49
+ fluidWidth: false,
50
+ icon: IconArrowOpenEndSolid,
51
+ iconExpanded: IconArrowOpenDownSolid,
52
+ iconPosition: 'start',
53
+ defaultExpanded: false,
54
+ children: null
55
+ };
56
+ _buttonNode = null;
57
+ ref = /*#__PURE__*/createRef();
58
+
59
+ // TODO this solution was generated with Gemini, should be tested if it works as fine as before
60
+ setButtonRef = node => {
61
+ this._buttonNode = node;
62
+ };
57
63
  get focused() {
58
64
  return isActiveElement(this._buttonNode);
59
65
  }
60
66
  focus() {
61
- var _this$_buttonNode;
62
- (_this$_buttonNode = this._buttonNode) === null || _this$_buttonNode === void 0 ? void 0 : _this$_buttonNode.focus();
67
+ this._buttonNode?.focus();
63
68
  }
64
69
  componentDidMount() {
65
- var _this$props$makeStyle, _this$props;
66
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
70
+ this.props.makeStyles?.();
67
71
  }
68
72
  componentDidUpdate() {
69
- var _this$props$makeStyle2, _this$props2;
70
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
73
+ this.props.makeStyles?.();
71
74
  }
72
75
  renderSummary(expanded) {
73
- var _this$props$styles, _this$props$styles2;
74
- const _this$props3 = this.props,
75
- summary = _this$props3.summary,
76
- iconPosition = _this$props3.iconPosition;
76
+ const {
77
+ summary,
78
+ iconPosition
79
+ } = this.props;
77
80
  return _jsxs("span", {
78
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.summary,
81
+ css: this.props.styles?.summary,
79
82
  children: [iconPosition === 'start' && this.renderIcon(expanded), _jsx("span", {
80
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.summaryText,
83
+ css: this.props.styles?.summaryText,
81
84
  children: summary
82
85
  }), iconPosition === 'end' && this.renderIcon(expanded)]
83
86
  });
84
87
  }
85
88
  renderToggle(toggleProps, expanded) {
86
- const variant = this.props.variant;
89
+ const {
90
+ variant
91
+ } = this.props;
87
92
  const tProps = this.props.children ? toggleProps : {
88
93
  onClick: toggleProps.onClick
89
94
  };
@@ -102,34 +107,30 @@ let ToggleDetails = (_dec = withStyle(generateStyle, generateComponentTheme), _d
102
107
  children: summary
103
108
  });
104
109
  } else if (props.href) {
105
- var _this$props$styles3;
106
110
  return _jsx("a", {
107
111
  ...props,
108
- css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.toggle,
112
+ css: this.props.styles?.toggle,
109
113
  ref: this.setButtonRef,
110
114
  children: summary
111
115
  });
112
116
  } else {
113
- var _this$props$styles4;
114
117
  return _jsx("button", {
115
118
  ...props,
116
119
  type: "button",
117
- css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.toggle,
120
+ css: this.props.styles?.toggle,
118
121
  ref: this.setButtonRef,
119
122
  children: summary
120
123
  });
121
124
  }
122
125
  }
123
126
  renderIcon(expanded) {
124
- var _this$props$styles5;
125
127
  const Icon = expanded ? this.props.iconExpanded : this.props.icon;
126
128
  return this.props.children && Icon ? _jsx("span", {
127
- css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.icon,
129
+ css: this.props.styles?.icon,
128
130
  children: _jsx(Icon, {})
129
131
  }) : null;
130
132
  }
131
133
  renderDetails(expanded, detailsProps) {
132
- var _this$props$styles6;
133
134
  if (!this.props.children) return null;
134
135
  const expandedStyles = expanded ? {
135
136
  display: 'block'
@@ -138,17 +139,21 @@ let ToggleDetails = (_dec = withStyle(generateStyle, generateComponentTheme), _d
138
139
  };
139
140
  return _jsx("div", {
140
141
  ...detailsProps,
141
- css: [(_this$props$styles6 = this.props.styles) === null || _this$props$styles6 === void 0 ? void 0 : _this$props$styles6.details, expandedStyles],
142
+ css: [this.props.styles?.details, expandedStyles],
142
143
  children: expanded && this.renderContent()
143
144
  });
144
145
  }
145
146
  renderContent() {
146
- var _this$props$styles7;
147
147
  return _jsx("div", {
148
- css: (_this$props$styles7 = this.props.styles) === null || _this$props$styles7 === void 0 ? void 0 : _this$props$styles7.content,
148
+ css: this.props.styles?.content,
149
149
  children: this.props.children
150
150
  });
151
151
  }
152
+ handleToggle = (event, expanded) => {
153
+ if (typeof this.props.onToggle === 'function') {
154
+ this.props.onToggle(event, expanded);
155
+ }
156
+ };
152
157
  render() {
153
158
  return _jsx(Expandable, {
154
159
  ...pickProps(this.props, Expandable.allowedProps),
@@ -158,9 +163,8 @@ let ToggleDetails = (_dec = withStyle(generateStyle, generateComponentTheme), _d
158
163
  getToggleProps,
159
164
  getDetailsProps
160
165
  }) => {
161
- var _this$props$styles8;
162
166
  return _jsxs("div", {
163
- css: (_this$props$styles8 = this.props.styles) === null || _this$props$styles8 === void 0 ? void 0 : _this$props$styles8.toggleDetails,
167
+ css: this.props.styles?.toggleDetails,
164
168
  ref: this.ref,
165
169
  "data-cid": "ToggleDetails",
166
170
  children: [this.renderToggle(getToggleProps(), expanded), this.renderDetails(expanded, getDetailsProps())]
@@ -168,15 +172,6 @@ let ToggleDetails = (_dec = withStyle(generateStyle, generateComponentTheme), _d
168
172
  }
169
173
  });
170
174
  }
171
- }, _ToggleDetails.displayName = "ToggleDetails", _ToggleDetails.componentId = 'ToggleDetails', _ToggleDetails.allowedProps = allowedProps, _ToggleDetails.defaultProps = {
172
- variant: 'default',
173
- size: 'medium',
174
- fluidWidth: false,
175
- icon: IconArrowOpenEndSolid,
176
- iconExpanded: IconArrowOpenDownSolid,
177
- iconPosition: 'start',
178
- defaultExpanded: false,
179
- children: null
180
- }, _ToggleDetails)) || _class);
175
+ }) || _class);
181
176
  export default ToggleDetails;
182
177
  export { ToggleDetails };
package/es/ToggleDetails/v1/styles.js CHANGED
@@ -39,10 +39,12 @@ const contentAnimation = keyframes`
39
39
  * @return {Object} The final style object, which will be used in the component
40
40
  */
41
41
  const generateStyle = (componentTheme, props, _state) => {
42
- const fluidWidth = props.fluidWidth,
43
- iconPosition = props.iconPosition,
44
- size = props.size,
45
- variant = props.variant;
42
+ const {
43
+ fluidWidth,
44
+ iconPosition,
45
+ size,
46
+ variant
47
+ } = props;
46
48
  const positionIconAtEnd = iconPosition === 'end' && (variant === 'filled' || fluidWidth);
47
49
  const fluidWidthStyles = fluidWidth ? {
48
50
  display: 'block',
package/es/ToggleDetails/v1/theme.js CHANGED
@@ -28,12 +28,13 @@
28
28
  * @return {Object} The final theme object with the overrides and component variables
29
29
  */
30
30
  const generateComponentTheme = theme => {
31
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5;
32
- const colors = theme.colors,
33
- spacing = theme.spacing,
34
- borders = theme.borders,
35
- typography = theme.typography,
36
- themeName = theme.key;
31
+ const {
32
+ colors,
33
+ spacing,
34
+ borders,
35
+ typography,
36
+ key: themeName
37
+ } = theme;
37
38
  const themeSpecificStyle = {
38
39
  canvas: {
39
40
  toggleFocusBorderColor: theme['ic-brand-primary'],
@@ -42,29 +43,29 @@ const generateComponentTheme = theme => {
42
43
  }
43
44
  };
44
45
  const componentVariables = {
45
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
46
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
47
- lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeight,
48
- textColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
49
- fontSizeSmall: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
50
- fontSizeMedium: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
51
- fontSizeLarge: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
46
+ fontFamily: typography?.fontFamily,
47
+ fontWeight: typography?.fontWeightNormal,
48
+ lineHeight: typography?.lineHeight,
49
+ textColor: colors?.contrasts?.grey125125,
50
+ fontSizeSmall: typography?.fontSizeSmall,
51
+ fontSizeMedium: typography?.fontSizeMedium,
52
+ fontSizeLarge: typography?.fontSizeLarge,
52
53
  smallIconSize: '0.5rem',
53
54
  mediumIconSize: '0.75rem',
54
55
  largeIconSize: '1rem',
55
- iconMargin: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
56
- iconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125,
57
- togglePadding: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
58
- toggleBorderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
59
- toggleBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
60
- toggleBorderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
61
- toggleFocusBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.blue4570,
62
- filledBackgroundColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey1111,
63
- filledBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
64
- filledBorderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
65
- filledBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey1424,
66
- filledBorderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
67
- filledPadding: spacing === null || spacing === void 0 ? void 0 : spacing.small
56
+ iconMargin: spacing?.xxSmall,
57
+ iconColor: colors?.contrasts?.grey125125,
58
+ togglePadding: spacing?.xxSmall,
59
+ toggleBorderRadius: borders?.radiusMedium,
60
+ toggleBorderWidth: borders?.widthMedium,
61
+ toggleBorderStyle: borders?.style,
62
+ toggleFocusBorderColor: colors?.contrasts?.blue4570,
63
+ filledBackgroundColor: colors?.contrasts?.grey1111,
64
+ filledBorderWidth: borders?.widthSmall,
65
+ filledBorderStyle: borders?.style,
66
+ filledBorderColor: colors?.contrasts?.grey1424,
67
+ filledBorderRadius: borders?.radiusMedium,
68
+ filledPadding: spacing?.small
68
69
  };
69
70
  return {
70
71
  ...componentVariables,
package/es/ToggleDetails/v2/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _class, _ToggleDetails;
1
+ var _dec, _class;
2
2
  /*
3
3
  * The MIT License (MIT)
4
4
  *
@@ -38,51 +38,56 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
38
38
  category: components
39
39
  ---
40
40
  **/
41
- let ToggleDetails = (_dec = withStyle(generateStyle), _dec(_class = (_ToggleDetails = class ToggleDetails extends Component {
42
- constructor(...args) {
43
- super(...args);
44
- this._buttonNode = null;
45
- this.ref = /*#__PURE__*/createRef();
46
- // TODO this solution was generated with Gemini, should be tested if it works as fine as before
47
- this.setButtonRef = node => {
48
- this._buttonNode = node;
49
- };
50
- this.handleToggle = (event, expanded) => {
51
- if (typeof this.props.onToggle === 'function') {
52
- this.props.onToggle(event, expanded);
53
- }
54
- };
55
- }
41
+ let ToggleDetails = (_dec = withStyle(generateStyle), _dec(_class = class ToggleDetails extends Component {
42
+ static displayName = "ToggleDetails";
43
+ static componentId = 'ToggleDetails';
44
+ static allowedProps = allowedProps;
45
+ static defaultProps = {
46
+ variant: 'default',
47
+ size: 'medium',
48
+ fluidWidth: false,
49
+ icon: ChevronRightInstUIIcon,
50
+ iconExpanded: ChevronDownInstUIIcon,
51
+ iconPosition: 'start',
52
+ defaultExpanded: false,
53
+ children: null
54
+ };
55
+ _buttonNode = null;
56
+ ref = /*#__PURE__*/createRef();
57
+
58
+ // TODO this solution was generated with Gemini, should be tested if it works as fine as before
59
+ setButtonRef = node => {
60
+ this._buttonNode = node;
61
+ };
56
62
  get focused() {
57
63
  return isActiveElement(this._buttonNode);
58
64
  }
59
65
  focus() {
60
- var _this$_buttonNode;
61
- (_this$_buttonNode = this._buttonNode) === null || _this$_buttonNode === void 0 ? void 0 : _this$_buttonNode.focus();
66
+ this._buttonNode?.focus();
62
67
  }
63
68
  componentDidMount() {
64
- var _this$props$makeStyle, _this$props;
65
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
69
+ this.props.makeStyles?.();
66
70
  }
67
71
  componentDidUpdate() {
68
- var _this$props$makeStyle2, _this$props2;
69
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
72
+ this.props.makeStyles?.();
70
73
  }
71
74
  renderSummary(expanded) {
72
- var _this$props$styles, _this$props$styles2;
73
- const _this$props3 = this.props,
74
- summary = _this$props3.summary,
75
- iconPosition = _this$props3.iconPosition;
75
+ const {
76
+ summary,
77
+ iconPosition
78
+ } = this.props;
76
79
  return _jsxs("span", {
77
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.summary,
80
+ css: this.props.styles?.summary,
78
81
  children: [iconPosition === 'start' && this.renderIcon(expanded), _jsx("span", {
79
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.summaryText,
82
+ css: this.props.styles?.summaryText,
80
83
  children: summary
81
84
  }), iconPosition === 'end' && this.renderIcon(expanded)]
82
85
  });
83
86
  }
84
87
  renderToggle(toggleProps, expanded) {
85
- const variant = this.props.variant;
88
+ const {
89
+ variant
90
+ } = this.props;
86
91
  const tProps = this.props.children ? toggleProps : {
87
92
  onClick: toggleProps.onClick
88
93
  };
@@ -101,31 +106,28 @@ let ToggleDetails = (_dec = withStyle(generateStyle), _dec(_class = (_ToggleDeta
101
106
  children: summary
102
107
  });
103
108
  } else if (props.href) {
104
- var _this$props$styles3;
105
109
  return _jsx("a", {
106
110
  ...props,
107
- css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.toggle,
111
+ css: this.props.styles?.toggle,
108
112
  ref: this.setButtonRef,
109
113
  children: summary
110
114
  });
111
115
  } else {
112
- var _this$props$styles4;
113
116
  return _jsx("button", {
114
117
  ...props,
115
118
  type: "button",
116
- css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.toggle,
119
+ css: this.props.styles?.toggle,
117
120
  ref: this.setButtonRef,
118
121
  children: summary
119
122
  });
120
123
  }
121
124
  }
122
125
  renderIcon(expanded) {
123
- var _this$props$styles5;
124
126
  const Icon = expanded ? this.props.iconExpanded : this.props.icon;
125
127
  const iconSize = this.props.size === 'large' ? 'lg' : 'md';
126
128
  const iconColor = this.props.variant === 'filled' ? 'actionSecondaryBaseColor' : 'baseColor';
127
129
  return this.props.children && Icon ? _jsx("span", {
128
- css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.icon,
130
+ css: this.props.styles?.icon,
129
131
  children: _jsx(Icon, {
130
132
  size: iconSize,
131
133
  color: iconColor
@@ -133,7 +135,6 @@ let ToggleDetails = (_dec = withStyle(generateStyle), _dec(_class = (_ToggleDeta
133
135
  }) : null;
134
136
  }
135
137
  renderDetails(expanded, detailsProps) {
136
- var _this$props$styles6;
137
138
  if (!this.props.children) return null;
138
139
  const expandedStyles = expanded ? {
139
140
  display: 'block'
@@ -142,17 +143,21 @@ let ToggleDetails = (_dec = withStyle(generateStyle), _dec(_class = (_ToggleDeta
142
143
  };
143
144
  return _jsx("div", {
144
145
  ...detailsProps,
145
- css: [(_this$props$styles6 = this.props.styles) === null || _this$props$styles6 === void 0 ? void 0 : _this$props$styles6.details, expandedStyles],
146
+ css: [this.props.styles?.details, expandedStyles],
146
147
  children: expanded && this.renderContent()
147
148
  });
148
149
  }
149
150
  renderContent() {
150
- var _this$props$styles7;
151
151
  return _jsx("div", {
152
- css: (_this$props$styles7 = this.props.styles) === null || _this$props$styles7 === void 0 ? void 0 : _this$props$styles7.content,
152
+ css: this.props.styles?.content,
153
153
  children: this.props.children
154
154
  });
155
155
  }
156
+ handleToggle = (event, expanded) => {
157
+ if (typeof this.props.onToggle === 'function') {
158
+ this.props.onToggle(event, expanded);
159
+ }
160
+ };
156
161
  render() {
157
162
  return _jsx(Expandable, {
158
163
  ...pickProps(this.props, Expandable.allowedProps),
@@ -162,9 +167,8 @@ let ToggleDetails = (_dec = withStyle(generateStyle), _dec(_class = (_ToggleDeta
162
167
  getToggleProps,
163
168
  getDetailsProps
164
169
  }) => {
165
- var _this$props$styles8;
166
170
  return _jsxs("div", {
167
- css: (_this$props$styles8 = this.props.styles) === null || _this$props$styles8 === void 0 ? void 0 : _this$props$styles8.toggleDetails,
171
+ css: this.props.styles?.toggleDetails,
168
172
  ref: this.ref,
169
173
  "data-cid": "ToggleDetails",
170
174
  children: [this.renderToggle(getToggleProps(), expanded), this.renderDetails(expanded, getDetailsProps())]
@@ -172,15 +176,6 @@ let ToggleDetails = (_dec = withStyle(generateStyle), _dec(_class = (_ToggleDeta
172
176
  }
173
177
  });
174
178
  }
175
- }, _ToggleDetails.displayName = "ToggleDetails", _ToggleDetails.componentId = 'ToggleDetails', _ToggleDetails.allowedProps = allowedProps, _ToggleDetails.defaultProps = {
176
- variant: 'default',
177
- size: 'medium',
178
- fluidWidth: false,
179
- icon: ChevronRightInstUIIcon,
180
- iconExpanded: ChevronDownInstUIIcon,
181
- iconPosition: 'start',
182
- defaultExpanded: false,
183
- children: null
184
- }, _ToggleDetails)) || _class);
179
+ }) || _class);
185
180
  export default ToggleDetails;
186
181
  export { ToggleDetails };
package/es/ToggleDetails/v2/styles.js CHANGED
@@ -40,10 +40,12 @@ const contentAnimation = keyframes`
40
40
  * @return {Object} The final style object, which will be used in the component
41
41
  */
42
42
  const generateStyle = (componentTheme, props, sharedTokens, _state) => {
43
- const fluidWidth = props.fluidWidth,
44
- iconPosition = props.iconPosition,
45
- size = props.size,
46
- variant = props.variant;
43
+ const {
44
+ fluidWidth,
45
+ iconPosition,
46
+ size,
47
+ variant
48
+ } = props;
47
49
  const positionIconAtEnd = iconPosition === 'end' && (variant === 'filled' || fluidWidth);
48
50
  const fluidWidthStyles = fluidWidth ? {
49
51
  display: 'block',
package/es/ToggleGroup/v1/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _class, _ToggleGroup;
1
+ var _dec, _class;
2
2
  /*
3
3
  * The MIT License (MIT)
4
4
  *
@@ -42,45 +42,55 @@ category: components
42
42
  ---
43
43
  **/
44
44
  import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
45
- let ToggleGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_ToggleGroup = class ToggleGroup extends Component {
46
- constructor(...args) {
47
- super(...args);
48
- this.ref = null;
49
- this._button = null;
50
- this._shouldTransition = false;
51
- this.handleRef = el => {
52
- const elementRef = this.props.elementRef;
53
- this.ref = el;
54
- if (typeof elementRef === 'function') {
55
- elementRef(el);
56
- }
57
- };
58
- this.handleButtonRef = el => {
59
- this._button = el;
60
- };
61
- }
45
+ let ToggleGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class ToggleGroup extends Component {
46
+ static displayName = "ToggleGroup";
47
+ static componentId = 'ToggleGroup';
48
+ static allowedProps = allowedProps;
49
+ static defaultProps = {
50
+ size: 'medium',
51
+ icon: IconArrowOpenEndSolid,
52
+ iconExpanded: IconArrowOpenDownSolid,
53
+ defaultExpanded: false,
54
+ transition: true,
55
+ as: 'span',
56
+ border: true
57
+ };
58
+ ref = null;
59
+ _button = null;
60
+ _shouldTransition = false;
61
+ handleRef = el => {
62
+ const {
63
+ elementRef
64
+ } = this.props;
65
+ this.ref = el;
66
+ if (typeof elementRef === 'function') {
67
+ elementRef(el);
68
+ }
69
+ };
70
+ handleButtonRef = el => {
71
+ this._button = el;
72
+ };
62
73
  get focused() {
63
74
  return isActiveElement(this._button);
64
75
  }
65
76
  focus() {
66
- var _this$_button;
67
- (_this$_button = this._button) === null || _this$_button === void 0 ? void 0 : _this$_button.focus();
77
+ this._button?.focus();
68
78
  }
69
79
  componentDidMount() {
70
80
  this._shouldTransition = true;
71
81
  }
72
82
  componentDidUpdate() {
73
- var _this$props$makeStyle, _this$props;
74
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.state);
83
+ this.props.makeStyles?.(this.state);
75
84
  }
76
85
  renderIcon(expanded) {
77
86
  const Icon = expanded ? this.props.iconExpanded : this.props.icon;
78
87
  return Icon ? callRenderProp(Icon) : null;
79
88
  }
80
89
  renderToggle(toggleProps, expanded) {
81
- const _this$props2 = this.props,
82
- toggleLabel = _this$props2.toggleLabel,
83
- size = _this$props2.size;
90
+ const {
91
+ toggleLabel,
92
+ size
93
+ } = this.props;
84
94
  let label;
85
95
  if (typeof toggleLabel === 'function') {
86
96
  label = toggleLabel(expanded);
@@ -101,12 +111,14 @@ let ToggleGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
101
111
  });
102
112
  }
103
113
  renderDetails(detailsProps) {
104
- const styles = this.props.styles;
114
+ const {
115
+ styles
116
+ } = this.props;
105
117
  return _jsx(View, {
106
118
  ...detailsProps,
107
119
  display: "block",
108
120
  borderWidth: "small none none none",
109
- borderColor: styles === null || styles === void 0 ? void 0 : styles.borderColor,
121
+ borderColor: styles?.borderColor,
110
122
  children: this.props.transition && this._shouldTransition ? _jsx(Transition, {
111
123
  transitionOnMount: true,
112
124
  in: true,
@@ -117,7 +129,9 @@ let ToggleGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
117
129
  }
118
130
  render() {
119
131
  const Element = getElementType(ToggleGroup, this.props);
120
- const styles = this.props.styles;
132
+ const {
133
+ styles
134
+ } = this.props;
121
135
  return _jsx(Expandable, {
122
136
  ...pickProps(this.props, Expandable.allowedProps),
123
137
  children: ({
@@ -133,7 +147,7 @@ let ToggleGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
133
147
  display: "block",
134
148
  borderRadius: "medium",
135
149
  background: "primary",
136
- borderColor: styles === null || styles === void 0 ? void 0 : styles.borderColor,
150
+ borderColor: styles?.borderColor,
137
151
  "data-cid": "ToggleGroup",
138
152
  children: [_jsxs(Flex, {
139
153
  padding: this.props.size === 'small' ? 'x-small' : 'small small small x-small',
@@ -152,14 +166,6 @@ let ToggleGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
152
166
  }
153
167
  });
154
168
  }
155
- }, _ToggleGroup.displayName = "ToggleGroup", _ToggleGroup.componentId = 'ToggleGroup', _ToggleGroup.allowedProps = allowedProps, _ToggleGroup.defaultProps = {
156
- size: 'medium',
157
- icon: IconArrowOpenEndSolid,
158
- iconExpanded: IconArrowOpenDownSolid,
159
- defaultExpanded: false,
160
- transition: true,
161
- as: 'span',
162
- border: true
163
- }, _ToggleGroup)) || _class);
169
+ }) || _class);
164
170
  export default ToggleGroup;
165
171
  export { ToggleGroup };
package/es/ToggleGroup/v1/theme.js CHANGED
@@ -28,10 +28,11 @@
28
28
  * @return {Object} The final theme object with the overrides and component variables
29
29
  */
30
30
  const generateComponentTheme = theme => {
31
- var _colors$contrasts;
32
- const colors = theme.colors;
31
+ const {
32
+ colors
33
+ } = theme;
33
34
  const componentVariables = {
34
- borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey3045
35
+ borderColor: colors?.contrasts?.grey3045
35
36
  };
36
37
  return {
37
38
  ...componentVariables