@carbon-labs/react-animated-header 0.4.0 → 0.5.0

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 (9) hide show
  1. package/es/__stories__/AnimatedHeader.stories.d.ts +62 -50
  2. package/es/__stories__/data/index.d.ts +3 -3
  3. package/es/components/AnimatedHeader/AnimatedHeader.d.ts +4 -2
  4. package/es/components/AnimatedHeader/AnimatedHeader.js +22 -5
  5. package/lib/__stories__/AnimatedHeader.stories.d.ts +62 -50
  6. package/lib/__stories__/data/index.d.ts +3 -3
  7. package/lib/components/AnimatedHeader/AnimatedHeader.d.ts +4 -2
  8. package/lib/components/AnimatedHeader/AnimatedHeader.js +22 -5
  9. package/package.json +2 -2
package/es/__stories__/AnimatedHeader.stories.d.ts CHANGED
@@ -9,6 +9,12 @@ export declare const ThemeG10: {
9
9
  description: {
10
10
  description: string;
11
11
  };
12
+ handleHeaderItemsToString: {
13
+ description: string;
14
+ };
15
+ handleWorkspaceItemsToString: {
16
+ description: string;
17
+ };
12
18
  headerAnimation: {
13
19
  description: string;
14
20
  type: string;
@@ -8237,13 +8243,13 @@ export declare const ThemeG10: {
8237
8243
  type: string;
8238
8244
  labels: {
8239
8245
  0: string;
8240
- 1: string;
8241
- 2: string;
8242
- 3: string;
8243
- 4: string;
8244
- 5: string;
8245
- 6: string;
8246
- 7: string;
8246
+ 1: any;
8247
+ 2: any;
8248
+ 3: any;
8249
+ 4: any;
8250
+ 5: any;
8251
+ 6: any;
8252
+ 7: any;
8247
8253
  };
8248
8254
  };
8249
8255
  options: number[];
@@ -8251,7 +8257,7 @@ export declare const ThemeG10: {
8251
8257
  0: null;
8252
8258
  1: {
8253
8259
  id: number;
8254
- name: string;
8260
+ label: string;
8255
8261
  tiles: ({
8256
8262
  id: string;
8257
8263
  href: string;
@@ -8267,7 +8273,7 @@ export declare const ThemeG10: {
8267
8273
  })[];
8268
8274
  } | {
8269
8275
  id: number;
8270
- name: string;
8276
+ label: string;
8271
8277
  tiles: ({
8272
8278
  id: string;
8273
8279
  href: string;
@@ -8286,7 +8292,7 @@ export declare const ThemeG10: {
8286
8292
  };
8287
8293
  2: {
8288
8294
  id: number;
8289
- name: string;
8295
+ label: string;
8290
8296
  tiles: ({
8291
8297
  id: string;
8292
8298
  href: string;
@@ -8302,7 +8308,7 @@ export declare const ThemeG10: {
8302
8308
  })[];
8303
8309
  } | {
8304
8310
  id: number;
8305
- name: string;
8311
+ label: string;
8306
8312
  tiles: ({
8307
8313
  id: string;
8308
8314
  href: string;
@@ -8321,7 +8327,7 @@ export declare const ThemeG10: {
8321
8327
  };
8322
8328
  3: {
8323
8329
  id: number;
8324
- name: string;
8330
+ label: string;
8325
8331
  tiles: ({
8326
8332
  id: string;
8327
8333
  href: string;
@@ -8337,7 +8343,7 @@ export declare const ThemeG10: {
8337
8343
  })[];
8338
8344
  } | {
8339
8345
  id: number;
8340
- name: string;
8346
+ label: string;
8341
8347
  tiles: ({
8342
8348
  id: string;
8343
8349
  href: string;
@@ -8356,7 +8362,7 @@ export declare const ThemeG10: {
8356
8362
  };
8357
8363
  4: {
8358
8364
  id: number;
8359
- name: string;
8365
+ label: string;
8360
8366
  tiles: ({
8361
8367
  id: string;
8362
8368
  href: string;
@@ -8372,7 +8378,7 @@ export declare const ThemeG10: {
8372
8378
  })[];
8373
8379
  } | {
8374
8380
  id: number;
8375
- name: string;
8381
+ label: string;
8376
8382
  tiles: ({
8377
8383
  id: string;
8378
8384
  href: string;
@@ -8391,7 +8397,7 @@ export declare const ThemeG10: {
8391
8397
  };
8392
8398
  5: {
8393
8399
  id: number;
8394
- name: string;
8400
+ label: string;
8395
8401
  tiles: ({
8396
8402
  id: string;
8397
8403
  href: string;
@@ -8407,7 +8413,7 @@ export declare const ThemeG10: {
8407
8413
  })[];
8408
8414
  } | {
8409
8415
  id: number;
8410
- name: string;
8416
+ label: string;
8411
8417
  tiles: ({
8412
8418
  id: string;
8413
8419
  href: string;
@@ -8426,7 +8432,7 @@ export declare const ThemeG10: {
8426
8432
  };
8427
8433
  6: {
8428
8434
  id: number;
8429
- name: string;
8435
+ label: string;
8430
8436
  tiles: ({
8431
8437
  id: string;
8432
8438
  href: string;
@@ -8442,7 +8448,7 @@ export declare const ThemeG10: {
8442
8448
  })[];
8443
8449
  } | {
8444
8450
  id: number;
8445
- name: string;
8451
+ label: string;
8446
8452
  tiles: ({
8447
8453
  id: string;
8448
8454
  href: string;
@@ -8461,7 +8467,7 @@ export declare const ThemeG10: {
8461
8467
  };
8462
8468
  7: {
8463
8469
  id: number;
8464
- name: string;
8470
+ label: string;
8465
8471
  tiles: ({
8466
8472
  id: string;
8467
8473
  href: string;
@@ -8477,7 +8483,7 @@ export declare const ThemeG10: {
8477
8483
  })[];
8478
8484
  } | {
8479
8485
  id: number;
8480
- name: string;
8486
+ label: string;
8481
8487
  tiles: ({
8482
8488
  id: string;
8483
8489
  href: string;
@@ -8543,7 +8549,7 @@ export declare const ThemeG10: {
8543
8549
  args: {
8544
8550
  allTiles: ({
8545
8551
  id: number;
8546
- name: string;
8552
+ label: string;
8547
8553
  tiles: ({
8548
8554
  id: string;
8549
8555
  href: string;
@@ -8559,7 +8565,7 @@ export declare const ThemeG10: {
8559
8565
  })[];
8560
8566
  } | {
8561
8567
  id: number;
8562
- name: string;
8568
+ label: string;
8563
8569
  tiles: ({
8564
8570
  id: string;
8565
8571
  href: string;
@@ -8578,7 +8584,7 @@ export declare const ThemeG10: {
8578
8584
  })[];
8579
8585
  allWorkspaces: {
8580
8586
  id: string;
8581
- text: string;
8587
+ label: string;
8582
8588
  }[];
8583
8589
  description: string;
8584
8590
  headerStatic: number;
@@ -8586,7 +8592,7 @@ export declare const ThemeG10: {
8586
8592
  selectedTileGroup: number;
8587
8593
  selectedWorkspace: {
8588
8594
  id: string;
8589
- text: string;
8595
+ label: string;
8590
8596
  };
8591
8597
  tasksConfig: number;
8592
8598
  userName: string;
@@ -8600,6 +8606,12 @@ export declare const ThemeG100: {
8600
8606
  description: {
8601
8607
  description: string;
8602
8608
  };
8609
+ handleHeaderItemsToString: {
8610
+ description: string;
8611
+ };
8612
+ handleWorkspaceItemsToString: {
8613
+ description: string;
8614
+ };
8603
8615
  headerAnimation: {
8604
8616
  description: string;
8605
8617
  type: string;
@@ -16828,13 +16840,13 @@ export declare const ThemeG100: {
16828
16840
  type: string;
16829
16841
  labels: {
16830
16842
  0: string;
16831
- 1: string;
16832
- 2: string;
16833
- 3: string;
16834
- 4: string;
16835
- 5: string;
16836
- 6: string;
16837
- 7: string;
16843
+ 1: any;
16844
+ 2: any;
16845
+ 3: any;
16846
+ 4: any;
16847
+ 5: any;
16848
+ 6: any;
16849
+ 7: any;
16838
16850
  };
16839
16851
  };
16840
16852
  options: number[];
@@ -16842,7 +16854,7 @@ export declare const ThemeG100: {
16842
16854
  0: null;
16843
16855
  1: {
16844
16856
  id: number;
16845
- name: string;
16857
+ label: string;
16846
16858
  tiles: ({
16847
16859
  id: string;
16848
16860
  href: string;
@@ -16858,7 +16870,7 @@ export declare const ThemeG100: {
16858
16870
  })[];
16859
16871
  } | {
16860
16872
  id: number;
16861
- name: string;
16873
+ label: string;
16862
16874
  tiles: ({
16863
16875
  id: string;
16864
16876
  href: string;
@@ -16877,7 +16889,7 @@ export declare const ThemeG100: {
16877
16889
  };
16878
16890
  2: {
16879
16891
  id: number;
16880
- name: string;
16892
+ label: string;
16881
16893
  tiles: ({
16882
16894
  id: string;
16883
16895
  href: string;
@@ -16893,7 +16905,7 @@ export declare const ThemeG100: {
16893
16905
  })[];
16894
16906
  } | {
16895
16907
  id: number;
16896
- name: string;
16908
+ label: string;
16897
16909
  tiles: ({
16898
16910
  id: string;
16899
16911
  href: string;
@@ -16912,7 +16924,7 @@ export declare const ThemeG100: {
16912
16924
  };
16913
16925
  3: {
16914
16926
  id: number;
16915
- name: string;
16927
+ label: string;
16916
16928
  tiles: ({
16917
16929
  id: string;
16918
16930
  href: string;
@@ -16928,7 +16940,7 @@ export declare const ThemeG100: {
16928
16940
  })[];
16929
16941
  } | {
16930
16942
  id: number;
16931
- name: string;
16943
+ label: string;
16932
16944
  tiles: ({
16933
16945
  id: string;
16934
16946
  href: string;
@@ -16947,7 +16959,7 @@ export declare const ThemeG100: {
16947
16959
  };
16948
16960
  4: {
16949
16961
  id: number;
16950
- name: string;
16962
+ label: string;
16951
16963
  tiles: ({
16952
16964
  id: string;
16953
16965
  href: string;
@@ -16963,7 +16975,7 @@ export declare const ThemeG100: {
16963
16975
  })[];
16964
16976
  } | {
16965
16977
  id: number;
16966
- name: string;
16978
+ label: string;
16967
16979
  tiles: ({
16968
16980
  id: string;
16969
16981
  href: string;
@@ -16982,7 +16994,7 @@ export declare const ThemeG100: {
16982
16994
  };
16983
16995
  5: {
16984
16996
  id: number;
16985
- name: string;
16997
+ label: string;
16986
16998
  tiles: ({
16987
16999
  id: string;
16988
17000
  href: string;
@@ -16998,7 +17010,7 @@ export declare const ThemeG100: {
16998
17010
  })[];
16999
17011
  } | {
17000
17012
  id: number;
17001
- name: string;
17013
+ label: string;
17002
17014
  tiles: ({
17003
17015
  id: string;
17004
17016
  href: string;
@@ -17017,7 +17029,7 @@ export declare const ThemeG100: {
17017
17029
  };
17018
17030
  6: {
17019
17031
  id: number;
17020
- name: string;
17032
+ label: string;
17021
17033
  tiles: ({
17022
17034
  id: string;
17023
17035
  href: string;
@@ -17033,7 +17045,7 @@ export declare const ThemeG100: {
17033
17045
  })[];
17034
17046
  } | {
17035
17047
  id: number;
17036
- name: string;
17048
+ label: string;
17037
17049
  tiles: ({
17038
17050
  id: string;
17039
17051
  href: string;
@@ -17052,7 +17064,7 @@ export declare const ThemeG100: {
17052
17064
  };
17053
17065
  7: {
17054
17066
  id: number;
17055
- name: string;
17067
+ label: string;
17056
17068
  tiles: ({
17057
17069
  id: string;
17058
17070
  href: string;
@@ -17068,7 +17080,7 @@ export declare const ThemeG100: {
17068
17080
  })[];
17069
17081
  } | {
17070
17082
  id: number;
17071
- name: string;
17083
+ label: string;
17072
17084
  tiles: ({
17073
17085
  id: string;
17074
17086
  href: string;
@@ -17134,7 +17146,7 @@ export declare const ThemeG100: {
17134
17146
  args: {
17135
17147
  allTiles: ({
17136
17148
  id: number;
17137
- name: string;
17149
+ label: string;
17138
17150
  tiles: ({
17139
17151
  id: string;
17140
17152
  href: string;
@@ -17150,7 +17162,7 @@ export declare const ThemeG100: {
17150
17162
  })[];
17151
17163
  } | {
17152
17164
  id: number;
17153
- name: string;
17165
+ label: string;
17154
17166
  tiles: ({
17155
17167
  id: string;
17156
17168
  href: string;
@@ -17169,7 +17181,7 @@ export declare const ThemeG100: {
17169
17181
  })[];
17170
17182
  allWorkspaces: {
17171
17183
  id: string;
17172
- text: string;
17184
+ label: string;
17173
17185
  }[];
17174
17186
  description: string;
17175
17187
  headerStatic: number;
@@ -17177,7 +17189,7 @@ export declare const ThemeG100: {
17177
17189
  selectedTileGroup: number;
17178
17190
  selectedWorkspace: {
17179
17191
  id: string;
17180
- text: string;
17192
+ label: string;
17181
17193
  };
17182
17194
  tasksConfig: number;
17183
17195
  userName: string;
package/es/__stories__/data/index.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  export const workspaceData: {
2
2
  id: string;
3
- text: string;
3
+ label: string;
4
4
  }[];
5
5
  export const headerTiles: ({
6
6
  id: number;
7
- name: string;
7
+ label: string;
8
8
  tiles: ({
9
9
  id: string;
10
10
  href: string;
@@ -20,7 +20,7 @@ export const headerTiles: ({
20
20
  })[];
21
21
  } | {
22
22
  id: number;
23
- name: string;
23
+ label: string;
24
24
  tiles: ({
25
25
  id: string;
26
26
  href: string;
package/es/components/AnimatedHeader/AnimatedHeader.d.ts CHANGED
@@ -15,7 +15,7 @@ export interface TasksConfig {
15
15
  }
16
16
  export interface SelectedWorkspace {
17
17
  id: string;
18
- text: string;
18
+ label: string;
19
19
  }
20
20
  export interface Tile {
21
21
  href: string | null;
@@ -27,13 +27,15 @@ export interface Tile {
27
27
  }
28
28
  export interface TileGroup {
29
29
  id: number;
30
- name: string;
30
+ label: string;
31
31
  tiles: Tile[];
32
32
  }
33
33
  export interface AnimatedHeaderProps {
34
34
  allTiles: TileGroup[];
35
35
  allWorkspaces?: SelectedWorkspace[];
36
36
  description?: string;
37
+ handleHeaderItemsToString: (item: TileGroup | null) => string;
38
+ handleWorkspaceItemsToString: (item: SelectedWorkspace | null) => string;
37
39
  headerAnimation?: object;
38
40
  headerStatic?: React.JSX.Element;
39
41
  productName?: string;
package/es/components/AnimatedHeader/AnimatedHeader.js CHANGED
@@ -24,6 +24,8 @@ const AnimatedHeader = _ref => {
24
24
  allTiles,
25
25
  allWorkspaces,
26
26
  description,
27
+ handleHeaderItemsToString,
28
+ handleWorkspaceItemsToString,
27
29
  headerAnimation,
28
30
  headerStatic,
29
31
  productName = '[Product name]',
@@ -100,9 +102,10 @@ const AnimatedHeader = _ref => {
100
102
  animation?.removeEventListener('DOMLoaded', load);
101
103
  animation?.removeEventListener('complete', loop);
102
104
  };
103
- }, [animationContainer, headerAnimation, isReduced]);
105
+ // eslint-disable-next-line react-hooks/exhaustive-deps
106
+ }, [headerAnimation, isReduced]);
104
107
  return /*#__PURE__*/React.createElement("section", {
105
- className: `${blockClass} ${!open && collapsed}`
108
+ className: `${blockClass}${!open ? ` ${collapsed}` : ''}`
106
109
  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement("div", {
107
110
  className: `${blockClass}__gradient--overlay`
108
111
  }), /*#__PURE__*/React.createElement("div", {
@@ -154,11 +157,11 @@ const AnimatedHeader = _ref => {
154
157
  className: `${blockClass}__header-dropdown`,
155
158
  size: "md",
156
159
  titleText: "Label",
157
- label: tasksConfig.dropdown?.label || allTiles[0].name,
160
+ label: tasksConfig.dropdown?.label || allTiles[0].label,
158
161
  hideLabel: true,
159
162
  type: "inline",
160
163
  items: allTiles,
161
- itemToString: item => item ? item.name : '',
164
+ itemToString: item => handleHeaderItemsToString(item),
162
165
  onChange: e => setSelectedTileGroup(e)
163
166
  }))), selectedTileGroup && /*#__PURE__*/React.createElement(Column, {
164
167
  sm: 4,
@@ -176,7 +179,7 @@ const AnimatedHeader = _ref => {
176
179
  hideLabel: true,
177
180
  type: "inline",
178
181
  items: allWorkspaces,
179
- itemToString: item => item ? item['text'] : '',
182
+ itemToString: item => handleWorkspaceItemsToString(item),
180
183
  onChange: e => setSelectedWorkspace(e)
181
184
  })), /*#__PURE__*/React.createElement("div", {
182
185
  className: `${blockClass}__tiles-container`
@@ -233,6 +236,20 @@ AnimatedHeader.propTypes = {
233
236
  * Provide short sentence in max. 3 lines related to product context
234
237
  */
235
238
  description: PropTypes.string,
239
+ /**
240
+ * Helper function passed to downshift that allows the library to render a
241
+ * given item to a string label. By default, it extracts the `label` field
242
+ * from a given item to serve as the item label in the list. (Dropdown
243
+ * under description in header).
244
+ */
245
+ handleHeaderItemsToString: PropTypes.func,
246
+ /**
247
+ * Helper function passed to downshift that allows the library to render a
248
+ * given item to a string label. By default, it extracts the `label` field
249
+ * from a given item to serve as the item label in the list. (Dropdown
250
+ * related to workspace selection).
251
+ */
252
+ handleWorkspaceItemsToString: PropTypes.func,
236
253
  /**
237
254
  * In-product imagery / lottie animation (.json) dim. 1312 x 738
238
255
  * (to update headerAnimation content storybook requires remount in toolbar)
package/lib/__stories__/AnimatedHeader.stories.d.ts CHANGED
@@ -9,6 +9,12 @@ export declare const ThemeG10: {
9
9
  description: {
10
10
  description: string;
11
11
  };
12
+ handleHeaderItemsToString: {
13
+ description: string;
14
+ };
15
+ handleWorkspaceItemsToString: {
16
+ description: string;
17
+ };
12
18
  headerAnimation: {
13
19
  description: string;
14
20
  type: string;
@@ -8237,13 +8243,13 @@ export declare const ThemeG10: {
8237
8243
  type: string;
8238
8244
  labels: {
8239
8245
  0: string;
8240
- 1: string;
8241
- 2: string;
8242
- 3: string;
8243
- 4: string;
8244
- 5: string;
8245
- 6: string;
8246
- 7: string;
8246
+ 1: any;
8247
+ 2: any;
8248
+ 3: any;
8249
+ 4: any;
8250
+ 5: any;
8251
+ 6: any;
8252
+ 7: any;
8247
8253
  };
8248
8254
  };
8249
8255
  options: number[];
@@ -8251,7 +8257,7 @@ export declare const ThemeG10: {
8251
8257
  0: null;
8252
8258
  1: {
8253
8259
  id: number;
8254
- name: string;
8260
+ label: string;
8255
8261
  tiles: ({
8256
8262
  id: string;
8257
8263
  href: string;
@@ -8267,7 +8273,7 @@ export declare const ThemeG10: {
8267
8273
  })[];
8268
8274
  } | {
8269
8275
  id: number;
8270
- name: string;
8276
+ label: string;
8271
8277
  tiles: ({
8272
8278
  id: string;
8273
8279
  href: string;
@@ -8286,7 +8292,7 @@ export declare const ThemeG10: {
8286
8292
  };
8287
8293
  2: {
8288
8294
  id: number;
8289
- name: string;
8295
+ label: string;
8290
8296
  tiles: ({
8291
8297
  id: string;
8292
8298
  href: string;
@@ -8302,7 +8308,7 @@ export declare const ThemeG10: {
8302
8308
  })[];
8303
8309
  } | {
8304
8310
  id: number;
8305
- name: string;
8311
+ label: string;
8306
8312
  tiles: ({
8307
8313
  id: string;
8308
8314
  href: string;
@@ -8321,7 +8327,7 @@ export declare const ThemeG10: {
8321
8327
  };
8322
8328
  3: {
8323
8329
  id: number;
8324
- name: string;
8330
+ label: string;
8325
8331
  tiles: ({
8326
8332
  id: string;
8327
8333
  href: string;
@@ -8337,7 +8343,7 @@ export declare const ThemeG10: {
8337
8343
  })[];
8338
8344
  } | {
8339
8345
  id: number;
8340
- name: string;
8346
+ label: string;
8341
8347
  tiles: ({
8342
8348
  id: string;
8343
8349
  href: string;
@@ -8356,7 +8362,7 @@ export declare const ThemeG10: {
8356
8362
  };
8357
8363
  4: {
8358
8364
  id: number;
8359
- name: string;
8365
+ label: string;
8360
8366
  tiles: ({
8361
8367
  id: string;
8362
8368
  href: string;
@@ -8372,7 +8378,7 @@ export declare const ThemeG10: {
8372
8378
  })[];
8373
8379
  } | {
8374
8380
  id: number;
8375
- name: string;
8381
+ label: string;
8376
8382
  tiles: ({
8377
8383
  id: string;
8378
8384
  href: string;
@@ -8391,7 +8397,7 @@ export declare const ThemeG10: {
8391
8397
  };
8392
8398
  5: {
8393
8399
  id: number;
8394
- name: string;
8400
+ label: string;
8395
8401
  tiles: ({
8396
8402
  id: string;
8397
8403
  href: string;
@@ -8407,7 +8413,7 @@ export declare const ThemeG10: {
8407
8413
  })[];
8408
8414
  } | {
8409
8415
  id: number;
8410
- name: string;
8416
+ label: string;
8411
8417
  tiles: ({
8412
8418
  id: string;
8413
8419
  href: string;
@@ -8426,7 +8432,7 @@ export declare const ThemeG10: {
8426
8432
  };
8427
8433
  6: {
8428
8434
  id: number;
8429
- name: string;
8435
+ label: string;
8430
8436
  tiles: ({
8431
8437
  id: string;
8432
8438
  href: string;
@@ -8442,7 +8448,7 @@ export declare const ThemeG10: {
8442
8448
  })[];
8443
8449
  } | {
8444
8450
  id: number;
8445
- name: string;
8451
+ label: string;
8446
8452
  tiles: ({
8447
8453
  id: string;
8448
8454
  href: string;
@@ -8461,7 +8467,7 @@ export declare const ThemeG10: {
8461
8467
  };
8462
8468
  7: {
8463
8469
  id: number;
8464
- name: string;
8470
+ label: string;
8465
8471
  tiles: ({
8466
8472
  id: string;
8467
8473
  href: string;
@@ -8477,7 +8483,7 @@ export declare const ThemeG10: {
8477
8483
  })[];
8478
8484
  } | {
8479
8485
  id: number;
8480
- name: string;
8486
+ label: string;
8481
8487
  tiles: ({
8482
8488
  id: string;
8483
8489
  href: string;
@@ -8543,7 +8549,7 @@ export declare const ThemeG10: {
8543
8549
  args: {
8544
8550
  allTiles: ({
8545
8551
  id: number;
8546
- name: string;
8552
+ label: string;
8547
8553
  tiles: ({
8548
8554
  id: string;
8549
8555
  href: string;
@@ -8559,7 +8565,7 @@ export declare const ThemeG10: {
8559
8565
  })[];
8560
8566
  } | {
8561
8567
  id: number;
8562
- name: string;
8568
+ label: string;
8563
8569
  tiles: ({
8564
8570
  id: string;
8565
8571
  href: string;
@@ -8578,7 +8584,7 @@ export declare const ThemeG10: {
8578
8584
  })[];
8579
8585
  allWorkspaces: {
8580
8586
  id: string;
8581
- text: string;
8587
+ label: string;
8582
8588
  }[];
8583
8589
  description: string;
8584
8590
  headerStatic: number;
@@ -8586,7 +8592,7 @@ export declare const ThemeG10: {
8586
8592
  selectedTileGroup: number;
8587
8593
  selectedWorkspace: {
8588
8594
  id: string;
8589
- text: string;
8595
+ label: string;
8590
8596
  };
8591
8597
  tasksConfig: number;
8592
8598
  userName: string;
@@ -8600,6 +8606,12 @@ export declare const ThemeG100: {
8600
8606
  description: {
8601
8607
  description: string;
8602
8608
  };
8609
+ handleHeaderItemsToString: {
8610
+ description: string;
8611
+ };
8612
+ handleWorkspaceItemsToString: {
8613
+ description: string;
8614
+ };
8603
8615
  headerAnimation: {
8604
8616
  description: string;
8605
8617
  type: string;
@@ -16828,13 +16840,13 @@ export declare const ThemeG100: {
16828
16840
  type: string;
16829
16841
  labels: {
16830
16842
  0: string;
16831
- 1: string;
16832
- 2: string;
16833
- 3: string;
16834
- 4: string;
16835
- 5: string;
16836
- 6: string;
16837
- 7: string;
16843
+ 1: any;
16844
+ 2: any;
16845
+ 3: any;
16846
+ 4: any;
16847
+ 5: any;
16848
+ 6: any;
16849
+ 7: any;
16838
16850
  };
16839
16851
  };
16840
16852
  options: number[];
@@ -16842,7 +16854,7 @@ export declare const ThemeG100: {
16842
16854
  0: null;
16843
16855
  1: {
16844
16856
  id: number;
16845
- name: string;
16857
+ label: string;
16846
16858
  tiles: ({
16847
16859
  id: string;
16848
16860
  href: string;
@@ -16858,7 +16870,7 @@ export declare const ThemeG100: {
16858
16870
  })[];
16859
16871
  } | {
16860
16872
  id: number;
16861
- name: string;
16873
+ label: string;
16862
16874
  tiles: ({
16863
16875
  id: string;
16864
16876
  href: string;
@@ -16877,7 +16889,7 @@ export declare const ThemeG100: {
16877
16889
  };
16878
16890
  2: {
16879
16891
  id: number;
16880
- name: string;
16892
+ label: string;
16881
16893
  tiles: ({
16882
16894
  id: string;
16883
16895
  href: string;
@@ -16893,7 +16905,7 @@ export declare const ThemeG100: {
16893
16905
  })[];
16894
16906
  } | {
16895
16907
  id: number;
16896
- name: string;
16908
+ label: string;
16897
16909
  tiles: ({
16898
16910
  id: string;
16899
16911
  href: string;
@@ -16912,7 +16924,7 @@ export declare const ThemeG100: {
16912
16924
  };
16913
16925
  3: {
16914
16926
  id: number;
16915
- name: string;
16927
+ label: string;
16916
16928
  tiles: ({
16917
16929
  id: string;
16918
16930
  href: string;
@@ -16928,7 +16940,7 @@ export declare const ThemeG100: {
16928
16940
  })[];
16929
16941
  } | {
16930
16942
  id: number;
16931
- name: string;
16943
+ label: string;
16932
16944
  tiles: ({
16933
16945
  id: string;
16934
16946
  href: string;
@@ -16947,7 +16959,7 @@ export declare const ThemeG100: {
16947
16959
  };
16948
16960
  4: {
16949
16961
  id: number;
16950
- name: string;
16962
+ label: string;
16951
16963
  tiles: ({
16952
16964
  id: string;
16953
16965
  href: string;
@@ -16963,7 +16975,7 @@ export declare const ThemeG100: {
16963
16975
  })[];
16964
16976
  } | {
16965
16977
  id: number;
16966
- name: string;
16978
+ label: string;
16967
16979
  tiles: ({
16968
16980
  id: string;
16969
16981
  href: string;
@@ -16982,7 +16994,7 @@ export declare const ThemeG100: {
16982
16994
  };
16983
16995
  5: {
16984
16996
  id: number;
16985
- name: string;
16997
+ label: string;
16986
16998
  tiles: ({
16987
16999
  id: string;
16988
17000
  href: string;
@@ -16998,7 +17010,7 @@ export declare const ThemeG100: {
16998
17010
  })[];
16999
17011
  } | {
17000
17012
  id: number;
17001
- name: string;
17013
+ label: string;
17002
17014
  tiles: ({
17003
17015
  id: string;
17004
17016
  href: string;
@@ -17017,7 +17029,7 @@ export declare const ThemeG100: {
17017
17029
  };
17018
17030
  6: {
17019
17031
  id: number;
17020
- name: string;
17032
+ label: string;
17021
17033
  tiles: ({
17022
17034
  id: string;
17023
17035
  href: string;
@@ -17033,7 +17045,7 @@ export declare const ThemeG100: {
17033
17045
  })[];
17034
17046
  } | {
17035
17047
  id: number;
17036
- name: string;
17048
+ label: string;
17037
17049
  tiles: ({
17038
17050
  id: string;
17039
17051
  href: string;
@@ -17052,7 +17064,7 @@ export declare const ThemeG100: {
17052
17064
  };
17053
17065
  7: {
17054
17066
  id: number;
17055
- name: string;
17067
+ label: string;
17056
17068
  tiles: ({
17057
17069
  id: string;
17058
17070
  href: string;
@@ -17068,7 +17080,7 @@ export declare const ThemeG100: {
17068
17080
  })[];
17069
17081
  } | {
17070
17082
  id: number;
17071
- name: string;
17083
+ label: string;
17072
17084
  tiles: ({
17073
17085
  id: string;
17074
17086
  href: string;
@@ -17134,7 +17146,7 @@ export declare const ThemeG100: {
17134
17146
  args: {
17135
17147
  allTiles: ({
17136
17148
  id: number;
17137
- name: string;
17149
+ label: string;
17138
17150
  tiles: ({
17139
17151
  id: string;
17140
17152
  href: string;
@@ -17150,7 +17162,7 @@ export declare const ThemeG100: {
17150
17162
  })[];
17151
17163
  } | {
17152
17164
  id: number;
17153
- name: string;
17165
+ label: string;
17154
17166
  tiles: ({
17155
17167
  id: string;
17156
17168
  href: string;
@@ -17169,7 +17181,7 @@ export declare const ThemeG100: {
17169
17181
  })[];
17170
17182
  allWorkspaces: {
17171
17183
  id: string;
17172
- text: string;
17184
+ label: string;
17173
17185
  }[];
17174
17186
  description: string;
17175
17187
  headerStatic: number;
@@ -17177,7 +17189,7 @@ export declare const ThemeG100: {
17177
17189
  selectedTileGroup: number;
17178
17190
  selectedWorkspace: {
17179
17191
  id: string;
17180
- text: string;
17192
+ label: string;
17181
17193
  };
17182
17194
  tasksConfig: number;
17183
17195
  userName: string;
package/lib/__stories__/data/index.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  export const workspaceData: {
2
2
  id: string;
3
- text: string;
3
+ label: string;
4
4
  }[];
5
5
  export const headerTiles: ({
6
6
  id: number;
7
- name: string;
7
+ label: string;
8
8
  tiles: ({
9
9
  id: string;
10
10
  href: string;
@@ -20,7 +20,7 @@ export const headerTiles: ({
20
20
  })[];
21
21
  } | {
22
22
  id: number;
23
- name: string;
23
+ label: string;
24
24
  tiles: ({
25
25
  id: string;
26
26
  href: string;
package/lib/components/AnimatedHeader/AnimatedHeader.d.ts CHANGED
@@ -15,7 +15,7 @@ export interface TasksConfig {
15
15
  }
16
16
  export interface SelectedWorkspace {
17
17
  id: string;
18
- text: string;
18
+ label: string;
19
19
  }
20
20
  export interface Tile {
21
21
  href: string | null;
@@ -27,13 +27,15 @@ export interface Tile {
27
27
  }
28
28
  export interface TileGroup {
29
29
  id: number;
30
- name: string;
30
+ label: string;
31
31
  tiles: Tile[];
32
32
  }
33
33
  export interface AnimatedHeaderProps {
34
34
  allTiles: TileGroup[];
35
35
  allWorkspaces?: SelectedWorkspace[];
36
36
  description?: string;
37
+ handleHeaderItemsToString: (item: TileGroup | null) => string;
38
+ handleWorkspaceItemsToString: (item: SelectedWorkspace | null) => string;
37
39
  headerAnimation?: object;
38
40
  headerStatic?: React.JSX.Element;
39
41
  productName?: string;
package/lib/components/AnimatedHeader/AnimatedHeader.js CHANGED
@@ -28,6 +28,8 @@ const AnimatedHeader = _ref => {
28
28
  allTiles,
29
29
  allWorkspaces,
30
30
  description,
31
+ handleHeaderItemsToString,
32
+ handleWorkspaceItemsToString,
31
33
  headerAnimation,
32
34
  headerStatic,
33
35
  productName = '[Product name]',
@@ -104,9 +106,10 @@ const AnimatedHeader = _ref => {
104
106
  animation?.removeEventListener('DOMLoaded', load);
105
107
  animation?.removeEventListener('complete', loop);
106
108
  };
107
- }, [animationContainer, headerAnimation, isReduced]);
109
+ // eslint-disable-next-line react-hooks/exhaustive-deps
110
+ }, [headerAnimation, isReduced]);
108
111
  return /*#__PURE__*/React.createElement("section", {
109
- className: `${blockClass} ${!open && collapsed}`
112
+ className: `${blockClass}${!open ? ` ${collapsed}` : ''}`
110
113
  }, /*#__PURE__*/React.createElement(react.Grid, null, /*#__PURE__*/React.createElement("div", {
111
114
  className: `${blockClass}__gradient--overlay`
112
115
  }), /*#__PURE__*/React.createElement("div", {
@@ -158,11 +161,11 @@ const AnimatedHeader = _ref => {
158
161
  className: `${blockClass}__header-dropdown`,
159
162
  size: "md",
160
163
  titleText: "Label",
161
- label: tasksConfig.dropdown?.label || allTiles[0].name,
164
+ label: tasksConfig.dropdown?.label || allTiles[0].label,
162
165
  hideLabel: true,
163
166
  type: "inline",
164
167
  items: allTiles,
165
- itemToString: item => item ? item.name : '',
168
+ itemToString: item => handleHeaderItemsToString(item),
166
169
  onChange: e => setSelectedTileGroup(e)
167
170
  }))), selectedTileGroup && /*#__PURE__*/React.createElement(react.Column, {
168
171
  sm: 4,
@@ -180,7 +183,7 @@ const AnimatedHeader = _ref => {
180
183
  hideLabel: true,
181
184
  type: "inline",
182
185
  items: allWorkspaces,
183
- itemToString: item => item ? item['text'] : '',
186
+ itemToString: item => handleWorkspaceItemsToString(item),
184
187
  onChange: e => setSelectedWorkspace(e)
185
188
  })), /*#__PURE__*/React.createElement("div", {
186
189
  className: `${blockClass}__tiles-container`
@@ -237,6 +240,20 @@ AnimatedHeader.propTypes = {
237
240
  * Provide short sentence in max. 3 lines related to product context
238
241
  */
239
242
  description: PropTypes.string,
243
+ /**
244
+ * Helper function passed to downshift that allows the library to render a
245
+ * given item to a string label. By default, it extracts the `label` field
246
+ * from a given item to serve as the item label in the list. (Dropdown
247
+ * under description in header).
248
+ */
249
+ handleHeaderItemsToString: PropTypes.func,
250
+ /**
251
+ * Helper function passed to downshift that allows the library to render a
252
+ * given item to a string label. By default, it extracts the `label` field
253
+ * from a given item to serve as the item label in the list. (Dropdown
254
+ * related to workspace selection).
255
+ */
256
+ handleWorkspaceItemsToString: PropTypes.func,
240
257
  /**
241
258
  * In-product imagery / lottie animation (.json) dim. 1312 x 738
242
259
  * (to update headerAnimation content storybook requires remount in toolbar)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@carbon-labs/react-animated-header",
3
- "version": "0.4.0",
3
+ "version": "0.5.0",
4
4
  "publishConfig": {
5
5
  "access": "public",
6
6
  "provenance": true
@@ -32,5 +32,5 @@
32
32
  "devDependencies": {
33
33
  "@carbon-labs/utilities": "canary"
34
34
  },
35
- "gitHead": "ea0564e6ceea7d3bdcc08472ac8825f05299083c"
35
+ "gitHead": "00c3ca091be01c1085927e424eae56588e74b7fe"
36
36
  }