@instructure/ui-toggle-details 10.4.1-snapshot-4 → 10.4.1-snapshot-6

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 (8) hide show
  1. package/CHANGELOG.md +2 -1
  2. package/es/ToggleDetails/index.js +8 -4
  3. package/lib/ToggleDetails/index.js +8 -4
  4. package/package.json +20 -20
  5. package/src/ToggleDetails/index.tsx +9 -6
  6. package/tsconfig.build.tsbuildinfo +1 -1
  7. package/types/ToggleDetails/index.d.ts +1 -1
  8. package/types/ToggleDetails/index.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,11 +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
- ## [10.4.1-snapshot-4](https://github.com/instructure/instructure-ui/compare/v10.4.0...v10.4.1-snapshot-4) (2024-10-28)
6
+ ## [10.4.1-snapshot-6](https://github.com/instructure/instructure-ui/compare/v10.4.0...v10.4.1-snapshot-6) (2024-10-28)
7
7
 
8
8
 
9
9
  ### Bug Fixes
10
10
 
11
+ * **ui-toggle-details:** do not put aria-expanded and aria-controls on the toggle if there is nothing to toggle ([82094c3](https://github.com/instructure/instructure-ui/commit/82094c3289dae60946047bbbdf60f768dcd63f4c))
11
12
  * update license ([1c039d9](https://github.com/instructure/instructure-ui/commit/1c039d9cbf5a3ea99b59803ddde5c6c0b2d76ba5))
12
13
 
13
14
 
package/es/ToggleDetails/index.js CHANGED
@@ -79,11 +79,15 @@ let ToggleDetails = (_dec = withStyle(generateStyle, generateComponentTheme), _d
79
79
  }
80
80
  renderToggle(toggleProps, expanded) {
81
81
  const variant = this.props.variant;
82
+ // Do not put aria-controls and aria-expanded into the toggle if there
83
+ // is nothing to open
84
+ const tProps = this.props.children ? toggleProps : {
85
+ onClick: toggleProps.onClick
86
+ };
82
87
  const props = {
83
88
  ...omitProps(this.props, ToggleDetails.allowedProps),
84
- ...toggleProps,
89
+ ...tProps,
85
90
  children: this.renderSummary(expanded)
86
- // spread operator makes toggleProps loose Record<string, any>>
87
91
  };
88
92
  const summary = this.renderSummary(expanded);
89
93
  if (variant === 'filled') {
@@ -116,7 +120,7 @@ let ToggleDetails = (_dec = withStyle(generateStyle, generateComponentTheme), _d
116
120
  }
117
121
  renderDetails(expanded, detailsProps) {
118
122
  var _this$props$styles6;
119
- const children = this.props.children;
123
+ if (!this.props.children) return null;
120
124
  const expandedStyles = expanded ? {
121
125
  display: 'block'
122
126
  } : {
@@ -124,7 +128,7 @@ let ToggleDetails = (_dec = withStyle(generateStyle, generateComponentTheme), _d
124
128
  };
125
129
  return jsx("div", Object.assign({}, detailsProps, {
126
130
  css: [(_this$props$styles6 = this.props.styles) === null || _this$props$styles6 === void 0 ? void 0 : _this$props$styles6.details, expandedStyles]
127
- }), children && expanded && this.renderContent());
131
+ }), expanded && this.renderContent());
128
132
  }
129
133
  renderContent() {
130
134
  var _this$props$styles7;
package/lib/ToggleDetails/index.js CHANGED
@@ -89,11 +89,15 @@ let ToggleDetails = exports.ToggleDetails = (_dec = (0, _emotion.withStyle)(_sty
89
89
  }
90
90
  renderToggle(toggleProps, expanded) {
91
91
  const variant = this.props.variant;
92
+ // Do not put aria-controls and aria-expanded into the toggle if there
93
+ // is nothing to open
94
+ const tProps = this.props.children ? toggleProps : {
95
+ onClick: toggleProps.onClick
96
+ };
92
97
  const props = {
93
98
  ...(0, _omitProps.omitProps)(this.props, ToggleDetails.allowedProps),
94
- ...toggleProps,
99
+ ...tProps,
95
100
  children: this.renderSummary(expanded)
96
- // spread operator makes toggleProps loose Record<string, any>>
97
101
  };
98
102
  const summary = this.renderSummary(expanded);
99
103
  if (variant === 'filled') {
@@ -126,7 +130,7 @@ let ToggleDetails = exports.ToggleDetails = (_dec = (0, _emotion.withStyle)(_sty
126
130
  }
127
131
  renderDetails(expanded, detailsProps) {
128
132
  var _this$props$styles6;
129
- const children = this.props.children;
133
+ if (!this.props.children) return null;
130
134
  const expandedStyles = expanded ? {
131
135
  display: 'block'
132
136
  } : {
@@ -134,7 +138,7 @@ let ToggleDetails = exports.ToggleDetails = (_dec = (0, _emotion.withStyle)(_sty
134
138
  };
135
139
  return (0, _emotion.jsx)("div", Object.assign({}, detailsProps, {
136
140
  css: [(_this$props$styles6 = this.props.styles) === null || _this$props$styles6 === void 0 ? void 0 : _this$props$styles6.details, expandedStyles]
137
- }), children && expanded && this.renderContent());
141
+ }), expanded && this.renderContent());
138
142
  }
139
143
  renderContent() {
140
144
  var _this$props$styles7;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-toggle-details",
3
- "version": "10.4.1-snapshot-4",
3
+ "version": "10.4.1-snapshot-6",
4
4
  "description": "A styled toggleable, accordion-like component.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,28 +23,28 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-babel-preset": "10.4.1-snapshot-4",
27
- "@instructure/ui-test-locator": "10.4.1-snapshot-4",
28
- "@instructure/ui-test-queries": "10.4.1-snapshot-4",
29
- "@instructure/ui-test-utils": "10.4.1-snapshot-4",
30
- "@instructure/ui-themes": "10.4.1-snapshot-4"
26
+ "@instructure/ui-babel-preset": "10.4.1-snapshot-6",
27
+ "@instructure/ui-test-locator": "10.4.1-snapshot-6",
28
+ "@instructure/ui-test-queries": "10.4.1-snapshot-6",
29
+ "@instructure/ui-test-utils": "10.4.1-snapshot-6",
30
+ "@instructure/ui-themes": "10.4.1-snapshot-6"
31
31
  },
32
32
  "dependencies": {
33
33
  "@babel/runtime": "^7.25.6",
34
- "@instructure/emotion": "10.4.1-snapshot-4",
35
- "@instructure/shared-types": "10.4.1-snapshot-4",
36
- "@instructure/ui-buttons": "10.4.1-snapshot-4",
37
- "@instructure/ui-dom-utils": "10.4.1-snapshot-4",
38
- "@instructure/ui-expandable": "10.4.1-snapshot-4",
39
- "@instructure/ui-flex": "10.4.1-snapshot-4",
40
- "@instructure/ui-icons": "10.4.1-snapshot-4",
41
- "@instructure/ui-motion": "10.4.1-snapshot-4",
42
- "@instructure/ui-prop-types": "10.4.1-snapshot-4",
43
- "@instructure/ui-react-utils": "10.4.1-snapshot-4",
44
- "@instructure/ui-testable": "10.4.1-snapshot-4",
45
- "@instructure/ui-utils": "10.4.1-snapshot-4",
46
- "@instructure/ui-view": "10.4.1-snapshot-4",
47
- "@instructure/uid": "10.4.1-snapshot-4",
34
+ "@instructure/emotion": "10.4.1-snapshot-6",
35
+ "@instructure/shared-types": "10.4.1-snapshot-6",
36
+ "@instructure/ui-buttons": "10.4.1-snapshot-6",
37
+ "@instructure/ui-dom-utils": "10.4.1-snapshot-6",
38
+ "@instructure/ui-expandable": "10.4.1-snapshot-6",
39
+ "@instructure/ui-flex": "10.4.1-snapshot-6",
40
+ "@instructure/ui-icons": "10.4.1-snapshot-6",
41
+ "@instructure/ui-motion": "10.4.1-snapshot-6",
42
+ "@instructure/ui-prop-types": "10.4.1-snapshot-6",
43
+ "@instructure/ui-react-utils": "10.4.1-snapshot-6",
44
+ "@instructure/ui-testable": "10.4.1-snapshot-6",
45
+ "@instructure/ui-utils": "10.4.1-snapshot-6",
46
+ "@instructure/ui-view": "10.4.1-snapshot-6",
47
+ "@instructure/uid": "10.4.1-snapshot-6",
48
48
  "prop-types": "^15.8.1"
49
49
  },
50
50
  "peerDependencies": {
package/src/ToggleDetails/index.tsx CHANGED
@@ -101,13 +101,16 @@ class ToggleDetails extends Component<ToggleDetailsProps> {
101
101
  expanded: boolean
102
102
  ) {
103
103
  const { variant } = this.props
104
-
104
+ // Do not put aria-controls and aria-expanded into the toggle if there
105
+ // is nothing to open
106
+ const tProps = this.props.children
107
+ ? toggleProps
108
+ : { onClick: toggleProps.onClick }
105
109
  const props = {
106
110
  ...omitProps(this.props, ToggleDetails.allowedProps),
107
- ...toggleProps,
111
+ ...tProps,
108
112
  children: this.renderSummary(expanded)
109
- // spread operator makes toggleProps loose Record<string, any>>
110
- } as Record<string, any>
113
+ } as Record<string, unknown>
111
114
  const summary = this.renderSummary(expanded)
112
115
 
113
116
  if (variant === 'filled') {
@@ -152,11 +155,11 @@ class ToggleDetails extends Component<ToggleDetailsProps> {
152
155
  }
153
156
 
154
157
  renderDetails(expanded: boolean, detailsProps: { id: string }) {
155
- const { children } = this.props
158
+ if (!this.props.children) return null
156
159
  const expandedStyles = expanded ? { display: 'block' } : { display: 'none' }
157
160
  return (
158
161
  <div {...detailsProps} css={[this.props.styles?.details, expandedStyles]}>
159
- {children && expanded && this.renderContent()}
162
+ {expanded && this.renderContent()}
160
163
  </div>
161
164
  )
162
165
  }