@hashicorp/design-system-components 2.14.0 → 2.14.1

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @hashicorp/design-system-components
2
2
 
3
+ ## 2.14.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#1709](https://github.com/hashicorp/design-system/pull/1709) [`294dddfda`](https://github.com/hashicorp/design-system/commit/294dddfda8d8e174fd5dd7de5d6af01dd8405775) Thanks [@didoo](https://github.com/didoo)! - `Tabs` - Fixed issue with `@isSelected` dynamically changed within `#each` loops
8
+
3
9
  ## 2.14.0
4
10
 
5
11
  ### Minor Changes
@@ -6,7 +6,9 @@
6
6
  <div
7
7
  class="hds-tabs"
8
8
  {{did-insert this.didInsert}}
9
- {{did-update this.updateTabIndicator this.selectedTabIndex @isParentVisible}}
9
+ {{did-update this.didUpdateSelectedTabIndex this.selectedTabIndex}}
10
+ {{did-update this.didUpdateSelectedTabId this.selectedTabId}}
11
+ {{did-update this.didUpdateParentVisibility @isParentVisible}}
10
12
  ...attributes
11
13
  >
12
14
  <div class="hds-tabs__tablist-wrapper">
@@ -57,14 +57,37 @@ export default class HdsTabsIndexComponent extends Component {
57
57
  });
58
58
  }
59
59
 
60
+ @action
61
+ didUpdateSelectedTabIndex() {
62
+ schedule('afterRender', () => {
63
+ this.setTabIndicator();
64
+ });
65
+ }
66
+
67
+ @action
68
+ didUpdateSelectedTabId() {
69
+ // if the selected tab is set dynamically (eg. in a `each` loop)
70
+ // the `Tab` nodes will be re-inserted/rendered, which means the `this.selectedTabId` variable changes
71
+ // but the parent `Tabs` component has already been rendered/inserted but doesn't re-render
72
+ // so the value of the `selectedTabIndex` is not updated, unless we trigger a recalculation
73
+ // using the `did-update` modifier that checks for changes in the `this.selectedTabId` variable
74
+ if (this.selectedTabId) {
75
+ this.selectedTabIndex = this.tabIds.indexOf(this.selectedTabId);
76
+ }
77
+ }
78
+
79
+ @action
80
+ didUpdateParentVisibility() {
81
+ schedule('afterRender', () => {
82
+ this.setTabIndicator();
83
+ });
84
+ }
85
+
60
86
  @action
61
87
  didInsertTab(element, isSelected) {
62
88
  this.tabNodes = [...this.tabNodes, element];
63
89
  this.tabIds = [...this.tabIds, element.id];
64
90
  if (isSelected) {
65
- if (this.selectedTabId) {
66
- assert('Only one tab may use isSelected argument');
67
- }
68
91
  this.selectedTabId = element.id;
69
92
  }
70
93
  }
@@ -175,9 +198,4 @@ export default class HdsTabsIndexComponent extends Component {
175
198
  }
176
199
  });
177
200
  }
178
-
179
- @action
180
- updateTabIndicator() {
181
- this.setTabIndicator();
182
- }
183
201
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hashicorp/design-system-components",
3
- "version": "2.14.0",
3
+ "version": "2.14.1",
4
4
  "description": "Helios Design System Components",
5
5
  "keywords": [
6
6
  "hashicorp",