@zendeskgarden/react-chrome 8.74.0 → 9.0.0-next.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 (3) hide show
  1. package/dist/index.cjs.js +60 -56
  2. package/dist/index.esm.js +60 -55
  3. package/package.json +6 -6
package/dist/index.cjs.js CHANGED
@@ -15,7 +15,7 @@ var reactTheming = require('@zendeskgarden/react-theming');
15
15
  var containerAccordion = require('@zendeskgarden/container-accordion');
16
16
  var containerUtilities = require('@zendeskgarden/container-utilities');
17
17
  var reactUid = require('react-uid');
18
- var mergeRefs = require('react-merge-refs');
18
+ var reactMergeRefs = require('react-merge-refs');
19
19
  var activeElement = require('dom-helpers/activeElement');
20
20
 
21
21
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -41,7 +41,6 @@ function _interopNamespace(e) {
41
41
  var React__namespace = /*#__PURE__*/_interopNamespace(React);
42
42
  var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
43
43
  var styled__default = /*#__PURE__*/_interopDefault(styled);
44
- var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
45
44
  var activeElement__default = /*#__PURE__*/_interopDefault(activeElement);
46
45
 
47
46
  function _extends$3() {
@@ -69,7 +68,7 @@ const useChromeContext = () => {
69
68
  const COMPONENT_ID$A = 'chrome.chrome';
70
69
  const StyledChrome = styled__default.default.div.attrs({
71
70
  'data-garden-id': COMPONENT_ID$A,
72
- 'data-garden-version': '8.74.0'
71
+ 'data-garden-version': '9.0.0-next.0'
73
72
  }).withConfig({
74
73
  displayName: "StyledChrome",
75
74
  componentId: "sc-1uqm6u6-0"
@@ -81,7 +80,7 @@ StyledChrome.defaultProps = {
81
80
  const COMPONENT_ID$z = 'chrome.header_item_icon';
82
81
  const StyledHeaderItemIcon = styled__default.default.div.attrs({
83
82
  'data-garden-id': COMPONENT_ID$z,
84
- 'data-garden-version': '8.74.0'
83
+ 'data-garden-version': '9.0.0-next.0'
85
84
  }).withConfig({
86
85
  displayName: "StyledHeaderItemIcon",
87
86
  componentId: "sc-1jhhp6z-0"
@@ -98,7 +97,7 @@ const sizeStyles$4 = props => {
98
97
  };
99
98
  const StyledBaseHeaderItem = styled__default.default.button.attrs({
100
99
  'data-garden-id': COMPONENT_ID$y,
101
- 'data-garden-version': '8.74.0'
100
+ 'data-garden-version': '9.0.0-next.0'
102
101
  }).withConfig({
103
102
  displayName: "StyledBaseHeaderItem",
104
103
  componentId: "sc-1qua7h6-0"
@@ -119,7 +118,7 @@ const COMPONENT_ID$x = 'chrome.header_item_text';
119
118
  const clippedStyling = styled.css(["position:absolute;margin:0;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
120
119
  const StyledHeaderItemText = styled__default.default.span.attrs({
121
120
  'data-garden-id': COMPONENT_ID$x,
122
- 'data-garden-version': '8.74.0'
121
+ 'data-garden-version': '9.0.0-next.0'
123
122
  }).withConfig({
124
123
  displayName: "StyledHeaderItemText",
125
124
  componentId: "sc-goz7la-0"
@@ -143,7 +142,7 @@ const getExpandedNavWidth = () => {
143
142
  };
144
143
  const StyledNav = styled__default.default.nav.attrs({
145
144
  'data-garden-id': COMPONENT_ID$w,
146
- 'data-garden-version': '8.74.0'
145
+ 'data-garden-version': '9.0.0-next.0'
147
146
  }).withConfig({
148
147
  displayName: "StyledNav",
149
148
  componentId: "sc-6j462r-0"
@@ -175,7 +174,7 @@ const retrieveProductColor$1 = props => {
175
174
  };
176
175
  const StyledLogoHeaderItem = styled__default.default(StyledBaseHeaderItem).attrs({
177
176
  'data-garden-id': COMPONENT_ID$v,
178
- 'data-garden-version': '8.74.0',
177
+ 'data-garden-version': '9.0.0-next.0',
179
178
  as: 'div'
180
179
  }).withConfig({
181
180
  displayName: "StyledLogoHeaderItem",
@@ -196,7 +195,7 @@ const sizeStyles$3 = props => {
196
195
  };
197
196
  const StyledBaseNavItem = styled__default.default.button.attrs({
198
197
  'data-garden-id': COMPONENT_ID$u,
199
- 'data-garden-version': '8.74.0'
198
+ 'data-garden-version': '9.0.0-next.0'
200
199
  }).withConfig({
201
200
  displayName: "StyledBaseNavItem",
202
201
  componentId: "sc-zvo43f-0"
@@ -211,7 +210,7 @@ const getHeaderHeight = props => {
211
210
  };
212
211
  const StyledHeader = styled__default.default.header.attrs({
213
212
  'data-garden-id': COMPONENT_ID$t,
214
- 'data-garden-version': '8.74.0'
213
+ 'data-garden-version': '9.0.0-next.0'
215
214
  }).withConfig({
216
215
  displayName: "StyledHeader",
217
216
  componentId: "sc-1cexpz-0"
@@ -249,7 +248,7 @@ const sizeStyles$2 = props => {
249
248
  };
250
249
  const StyledSkipNav = styled__default.default.a.attrs({
251
250
  'data-garden-id': COMPONENT_ID$s,
252
- 'data-garden-version': '8.74.0'
251
+ 'data-garden-version': '9.0.0-next.0'
253
252
  }).withConfig({
254
253
  displayName: "StyledSkipNav",
255
254
  componentId: "sc-1tsro34-0"
@@ -282,7 +281,7 @@ const sizeStyles$1 = theme => {
282
281
  };
283
282
  const StyledSkipNavIcon = styled__default.default(SvgLinkStroke).attrs({
284
283
  'data-garden-id': COMPONENT_ID$r,
285
- 'data-garden-version': '8.74.0'
284
+ 'data-garden-version': '9.0.0-next.0'
286
285
  }).withConfig({
287
286
  displayName: "StyledSkipNavIcon",
288
287
  componentId: "sc-1ika5z4-0"
@@ -294,7 +293,7 @@ StyledSkipNavIcon.defaultProps = {
294
293
  const COMPONENT_ID$q = 'chrome.body';
295
294
  const StyledBody = styled__default.default.div.attrs({
296
295
  'data-garden-id': COMPONENT_ID$q,
297
- 'data-garden-version': '8.74.0'
296
+ 'data-garden-version': '9.0.0-next.0'
298
297
  }).withConfig({
299
298
  displayName: "StyledBody",
300
299
  componentId: "sc-c7h9kv-0"
@@ -309,7 +308,7 @@ const getFooterHeight = props => {
309
308
  };
310
309
  const StyledFooter = styled__default.default.footer.attrs({
311
310
  'data-garden-id': COMPONENT_ID$p,
312
- 'data-garden-version': '8.74.0'
311
+ 'data-garden-version': '9.0.0-next.0'
313
312
  }).withConfig({
314
313
  displayName: "StyledFooter",
315
314
  componentId: "sc-v7lib2-0"
@@ -321,7 +320,7 @@ StyledFooter.defaultProps = {
321
320
  const COMPONENT_ID$o = 'chrome.content';
322
321
  const StyledContent = styled__default.default.div.attrs({
323
322
  'data-garden-id': COMPONENT_ID$o,
324
- 'data-garden-version': '8.74.0'
323
+ 'data-garden-version': '9.0.0-next.0'
325
324
  }).withConfig({
326
325
  displayName: "StyledContent",
327
326
  componentId: "sc-qcuzxn-0"
@@ -333,7 +332,7 @@ StyledContent.defaultProps = {
333
332
  const COMPONENT_ID$n = 'chrome.main';
334
333
  const StyledMain = styled__default.default.main.attrs({
335
334
  'data-garden-id': COMPONENT_ID$n,
336
- 'data-garden-version': '8.74.0'
335
+ 'data-garden-version': '9.0.0-next.0'
337
336
  }).withConfig({
338
337
  displayName: "StyledMain",
339
338
  componentId: "sc-t61cre-0"
@@ -345,7 +344,7 @@ StyledMain.defaultProps = {
345
344
  const COMPONENT_ID$m = 'chrome.sidebar';
346
345
  const StyledSidebar = styled__default.default.aside.attrs({
347
346
  'data-garden-id': COMPONENT_ID$m,
348
- 'data-garden-version': '8.74.0'
347
+ 'data-garden-version': '9.0.0-next.0'
349
348
  }).withConfig({
350
349
  displayName: "StyledSidebar",
351
350
  componentId: "sc-1q77fuw-0"
@@ -357,7 +356,7 @@ StyledSidebar.defaultProps = {
357
356
  const COMPONENT_ID$l = 'chrome.footer_item';
358
357
  const StyledFooterItem = styled__default.default.div.attrs({
359
358
  'data-garden-id': COMPONENT_ID$l,
360
- 'data-garden-version': '8.74.0'
359
+ 'data-garden-version': '9.0.0-next.0'
361
360
  }).withConfig({
362
361
  displayName: "StyledFooterItem",
363
362
  componentId: "sc-1cktm85-0"
@@ -373,7 +372,7 @@ const imgStyles = props => {
373
372
  };
374
373
  const StyledHeaderItem = styled__default.default(StyledBaseHeaderItem).attrs({
375
374
  'data-garden-id': COMPONENT_ID$k,
376
- 'data-garden-version': '8.74.0'
375
+ 'data-garden-version': '9.0.0-next.0'
377
376
  }).withConfig({
378
377
  displayName: "StyledHeaderItem",
379
378
  componentId: "sc-14sft6n-0"
@@ -392,7 +391,7 @@ StyledHeaderItem.defaultProps = {
392
391
  const COMPONENT_ID$j = 'chrome.header_item_wrapper';
393
392
  const StyledHeaderItemWrapper = styled__default.default(StyledBaseHeaderItem).attrs({
394
393
  'data-garden-id': COMPONENT_ID$j,
395
- 'data-garden-version': '8.74.0',
394
+ 'data-garden-version': '9.0.0-next.0',
396
395
  as: 'div'
397
396
  }).withConfig({
398
397
  displayName: "StyledHeaderItemWrapper",
@@ -430,7 +429,7 @@ const colorStyles$4 = props => {
430
429
  };
431
430
  const StyledLogoNavItem = styled__default.default(StyledBaseNavItem).attrs({
432
431
  'data-garden-id': COMPONENT_ID$i,
433
- 'data-garden-version': '8.74.0',
432
+ 'data-garden-version': '9.0.0-next.0',
434
433
  as: 'div'
435
434
  }).withConfig({
436
435
  displayName: "StyledLogoNavItem",
@@ -443,7 +442,7 @@ StyledLogoNavItem.defaultProps = {
443
442
  const COMPONENT_ID$h = 'chrome.brandmark_nav_item';
444
443
  const StyledBrandmarkNavItem = styled__default.default(StyledBaseNavItem).attrs({
445
444
  'data-garden-id': COMPONENT_ID$h,
446
- 'data-garden-version': '8.74.0',
445
+ 'data-garden-version': '9.0.0-next.0',
447
446
  as: 'div'
448
447
  }).withConfig({
449
448
  displayName: "StyledBrandmarkNavItem",
@@ -456,7 +455,7 @@ StyledBrandmarkNavItem.defaultProps = {
456
455
  const COMPONENT_ID$g = 'chrome.nav_item_icon';
457
456
  const StyledNavItemIcon = styled__default.default.div.attrs({
458
457
  'data-garden-id': COMPONENT_ID$g,
459
- 'data-garden-version': '8.74.0'
458
+ 'data-garden-version': '9.0.0-next.0'
460
459
  }).withConfig({
461
460
  displayName: "StyledNavItemIcon",
462
461
  componentId: "sc-7w9rpt-0"
@@ -502,7 +501,7 @@ const colorStyles$3 = props => {
502
501
  };
503
502
  const StyledNavItem = styled__default.default(StyledBaseNavItem).attrs({
504
503
  'data-garden-id': COMPONENT_ID$f,
505
- 'data-garden-version': '8.74.0',
504
+ 'data-garden-version': '9.0.0-next.0',
506
505
  as: 'button'
507
506
  }).withConfig({
508
507
  displayName: "StyledNavItem",
@@ -519,7 +518,7 @@ StyledNavItem.defaultProps = {
519
518
  const COMPONENT_ID$e = 'chrome.nav_item_text';
520
519
  const StyledNavItemText = styled__default.default.span.attrs({
521
520
  'data-garden-id': COMPONENT_ID$e,
522
- 'data-garden-version': '8.74.0'
521
+ 'data-garden-version': '9.0.0-next.0'
523
522
  }).withConfig({
524
523
  displayName: "StyledNavItemText",
525
524
  componentId: "sc-13m84xl-0"
@@ -572,7 +571,7 @@ const getSubNavItemHeight = props => {
572
571
  };
573
572
  const StyledSubNavItem = styled__default.default.button.attrs({
574
573
  'data-garden-id': COMPONENT_ID$d,
575
- 'data-garden-version': '8.74.0'
574
+ 'data-garden-version': '9.0.0-next.0'
576
575
  }).withConfig({
577
576
  displayName: "StyledSubNavItem",
578
577
  componentId: "sc-1yg9dpx-0"
@@ -595,7 +594,7 @@ const colorStyles$1 = props => {
595
594
  };
596
595
  const StyledSubNav = styled__default.default.nav.attrs({
597
596
  'data-garden-id': COMPONENT_ID$c,
598
- 'data-garden-version': '8.74.0'
597
+ 'data-garden-version': '9.0.0-next.0'
599
598
  }).withConfig({
600
599
  displayName: "StyledSubNav",
601
600
  componentId: "sc-19hjou6-0"
@@ -613,7 +612,7 @@ const sizeStyles = props => {
613
612
  };
614
613
  const StyledSubNavItemText = styled__default.default.span.attrs({
615
614
  'data-garden-id': COMPONENT_ID$b,
616
- 'data-garden-version': '8.74.0'
615
+ 'data-garden-version': '9.0.0-next.0'
617
616
  }).withConfig({
618
617
  displayName: "StyledSubNavItemText",
619
618
  componentId: "sc-1hy0pn7-0"
@@ -625,7 +624,7 @@ StyledSubNavItemText.defaultProps = {
625
624
  const COMPONENT_ID$a = 'chrome.collapsible_sub_nav_item';
626
625
  const StyledSubNavItemHeader = styled__default.default(StyledSubNavItem).attrs({
627
626
  'data-garden-id': COMPONENT_ID$a,
628
- 'data-garden-version': '8.74.0',
627
+ 'data-garden-version': '9.0.0-next.0',
629
628
  'data-garden-header': 'true'
630
629
  }).withConfig({
631
630
  displayName: "StyledSubNavItemHeader",
@@ -672,7 +671,7 @@ StyledSubNavItemIcon.defaultProps = {
672
671
  };
673
672
  const StyledSubNavItemIconWrapper = styled__default.default.div.attrs({
674
673
  'data-garden-id': COMPONENT_ID$9,
675
- 'data-garden-version': '8.74.0'
674
+ 'data-garden-version': '9.0.0-next.0'
676
675
  }).withConfig({
677
676
  displayName: "StyledSubNavItemIcon__StyledSubNavItemIconWrapper",
678
677
  componentId: "sc-1d02hho-1"
@@ -685,7 +684,7 @@ const PANEL_COMPONENT_ID = 'chrome.collapsible_sub_nav_item_panel';
685
684
  const hiddenStyling = styled.css(["visibility:hidden;max-height:0 !important;overflow:hidden;"]);
686
685
  const StyledSubNavPanel = styled__default.default.div.attrs({
687
686
  'data-garden-id': PANEL_COMPONENT_ID,
688
- 'data-garden-version': '8.74.0'
687
+ 'data-garden-version': '9.0.0-next.0'
689
688
  }).withConfig({
690
689
  displayName: "StyledSubNavPanel",
691
690
  componentId: "sc-1jv3rpv-0"
@@ -716,7 +715,7 @@ const borderStyle = _ref => {
716
715
  };
717
716
  const StyledSheet = styled__default.default.aside.attrs({
718
717
  'data-garden-id': COMPONENT_ID$8,
719
- 'data-garden-version': '8.74.0'
718
+ 'data-garden-version': '9.0.0-next.0'
720
719
  }).withConfig({
721
720
  displayName: "StyledSheet",
722
721
  componentId: "sc-dx8ijk-0"
@@ -728,7 +727,7 @@ StyledSheet.defaultProps = {
728
727
  const COMPONENT_ID$7 = 'chrome.sheet_wrapper';
729
728
  const StyledSheetWrapper = styled__default.default.div.attrs({
730
729
  'data-garden-id': COMPONENT_ID$7,
731
- 'data-garden-version': '8.74.0'
730
+ 'data-garden-version': '9.0.0-next.0'
732
731
  }).withConfig({
733
732
  displayName: "StyledSheetWrapper",
734
733
  componentId: "sc-f6x9zb-0"
@@ -755,7 +754,7 @@ StyledSheetWrapper.defaultProps = {
755
754
  const COMPONENT_ID$6 = 'chrome.sheet_title';
756
755
  const StyledSheetTitle = styled__default.default.div.attrs({
757
756
  'data-garden-id': COMPONENT_ID$6,
758
- 'data-garden-version': '8.74.0'
757
+ 'data-garden-version': '9.0.0-next.0'
759
758
  }).withConfig({
760
759
  displayName: "StyledSheetTitle",
761
760
  componentId: "sc-1gogk75-0"
@@ -767,7 +766,7 @@ StyledSheetTitle.defaultProps = {
767
766
  const COMPONENT_ID$5 = 'chrome.sheet_description';
768
767
  const StyledSheetDescription = styled__default.default.div.attrs({
769
768
  'data-garden-id': COMPONENT_ID$5,
770
- 'data-garden-version': '8.74.0'
769
+ 'data-garden-version': '9.0.0-next.0'
771
770
  }).withConfig({
772
771
  displayName: "StyledSheetDescription",
773
772
  componentId: "sc-1puglb6-0"
@@ -779,7 +778,7 @@ StyledSheetDescription.defaultProps = {
779
778
  const COMPONENT_ID$4 = 'chrome.sheet_body';
780
779
  const StyledSheetBody = styled__default.default.div.attrs({
781
780
  'data-garden-id': COMPONENT_ID$4,
782
- 'data-garden-version': '8.74.0'
781
+ 'data-garden-version': '9.0.0-next.0'
783
782
  }).withConfig({
784
783
  displayName: "StyledSheetBody",
785
784
  componentId: "sc-bt4eoj-0"
@@ -803,7 +802,7 @@ const colorStyles = props => {
803
802
  };
804
803
  const StyledSheetClose = styled__default.default.button.attrs({
805
804
  'data-garden-id': COMPONENT_ID$3,
806
- 'data-garden-version': '8.74.0'
805
+ 'data-garden-version': '9.0.0-next.0'
807
806
  }).withConfig({
808
807
  displayName: "StyledSheetClose",
809
808
  componentId: "sc-1ab02oq-0"
@@ -815,7 +814,7 @@ StyledSheetClose.defaultProps = {
815
814
  const COMPONENT_ID$2 = 'chrome.sheet_footer';
816
815
  const StyledSheetFooter = styled__default.default.footer.attrs({
817
816
  'data-garden-id': COMPONENT_ID$2,
818
- 'data-garden-version': '8.74.0'
817
+ 'data-garden-version': '9.0.0-next.0'
819
818
  }).withConfig({
820
819
  displayName: "StyledSheetFooter",
821
820
  componentId: "sc-2cktos-0"
@@ -827,7 +826,7 @@ StyledSheetFooter.defaultProps = {
827
826
  const COMPONENT_ID$1 = 'chrome.sheet_footer_item';
828
827
  const StyledSheetFooterItem = styled__default.default.div.attrs({
829
828
  'data-garden-id': COMPONENT_ID$1,
830
- 'data-garden-version': '8.74.0'
829
+ 'data-garden-version': '9.0.0-next.0'
831
830
  }).withConfig({
832
831
  displayName: "StyledSheetFooterItem",
833
832
  componentId: "sc-r9ixh-0"
@@ -839,7 +838,7 @@ StyledSheetFooterItem.defaultProps = {
839
838
  const COMPONENT_ID = 'chrome.sheet_header';
840
839
  const StyledSheetHeader = styled__default.default.header.attrs({
841
840
  'data-garden-id': COMPONENT_ID,
842
- 'data-garden-version': '8.74.0'
841
+ 'data-garden-version': '9.0.0-next.0'
843
842
  }).withConfig({
844
843
  displayName: "StyledSheetHeader",
845
844
  componentId: "sc-o2ry8i-0"
@@ -1214,15 +1213,17 @@ const CollapsibleSubNavItem = React__namespace.default.forwardRef((_ref, ref) =>
1214
1213
  isDark,
1215
1214
  isLight
1216
1215
  } = useChromeContext();
1217
- const panelRef = React.useRef();
1216
+ const panelRef = React.createRef();
1218
1217
  const [internalExpanded, setInternalExpanded] = React.useState(controlledExpanded);
1219
1218
  const expanded = containerUtilities.getControlledValue(controlledExpanded, internalExpanded);
1220
- const expandedSections = expanded ? [0] : [];
1219
+ const value = 0;
1220
+ const expandedSections = expanded ? [value] : [];
1221
1221
  const {
1222
1222
  getHeaderProps,
1223
1223
  getTriggerProps,
1224
1224
  getPanelProps
1225
1225
  } = containerAccordion.useAccordion({
1226
+ sections: [value],
1226
1227
  expandedSections,
1227
1228
  onChange: () => {
1228
1229
  const isExpanded = expandedSections.length === 0;
@@ -1237,27 +1238,30 @@ const CollapsibleSubNavItem = React__namespace.default.forwardRef((_ref, ref) =>
1237
1238
  if (expanded && panelRef.current) {
1238
1239
  panelRef.current.style.maxHeight = `${panelRef.current.scrollHeight}px`;
1239
1240
  }
1240
- }, [expanded, children]);
1241
+ }, [expanded, children, panelRef]);
1241
1242
  return React__namespace.default.createElement("div", {
1242
1243
  ref: ref
1243
1244
  }, React__namespace.default.createElement("div", getHeaderProps({
1244
- ariaLevel: 2
1245
+ 'aria-level': 2
1245
1246
  }), React__namespace.default.createElement(StyledSubNavItemHeader, _extends$3({
1246
1247
  isDark: isDark,
1247
- isLight: isLight
1248
+ isLight: isLight,
1249
+ isExpanded: expanded
1248
1250
  }, getTriggerProps({
1249
- isExpanded: expanded,
1250
- index: 0,
1251
+ ...other,
1251
1252
  role: null,
1252
1253
  tabIndex: null,
1253
- ...other
1254
- })), React__namespace.default.createElement(React__namespace.default.Fragment, null, header, React__namespace.default.createElement(StyledSubNavItemIconWrapper, {
1254
+ value
1255
+ }), {
1256
+ type: "button"
1257
+ }), React__namespace.default.createElement(React__namespace.default.Fragment, null, header, React__namespace.default.createElement(StyledSubNavItemIconWrapper, {
1255
1258
  isExpanded: expanded
1256
- }, React__namespace.default.createElement(StyledSubNavItemIcon, null))))), React__namespace.default.createElement(StyledSubNavPanel, getPanelProps({
1257
- index: 0,
1258
- isHidden: !expanded,
1259
- ref: panelRef
1260
- }), children));
1259
+ }, React__namespace.default.createElement(StyledSubNavItemIcon, null))))), React__namespace.default.createElement(StyledSubNavPanel, _extends$3({
1260
+ isHidden: !expanded
1261
+ }, getPanelProps({
1262
+ ref: panelRef,
1263
+ value
1264
+ })), children));
1261
1265
  });
1262
1266
  CollapsibleSubNavItem.propTypes = {
1263
1267
  header: PropTypes__default.default.any,
@@ -1410,7 +1414,7 @@ const SheetComponent = React__namespace.default.forwardRef((_ref, ref) => {
1410
1414
  const sheetRef = React.useRef(null);
1411
1415
  const seed = reactUid.useUIDSeed();
1412
1416
  const [isCloseButtonPresent, setIsCloseButtonPresent] = React.useState(false);
1413
- const idPrefix = React.useMemo(() => id || seed(`sheet_${'8.74.0'}`), [id, seed]);
1417
+ const idPrefix = React.useMemo(() => id || seed(`sheet_${'9.0.0-next.0'}`), [id, seed]);
1414
1418
  const titleId = `${idPrefix}--title`;
1415
1419
  const descriptionId = `${idPrefix}--description`;
1416
1420
  const sheetContext = React.useMemo(() => ({
@@ -1436,7 +1440,7 @@ const SheetComponent = React__namespace.default.forwardRef((_ref, ref) => {
1436
1440
  id: idPrefix,
1437
1441
  "aria-labelledby": titleId,
1438
1442
  "aria-describedby": descriptionId,
1439
- ref: mergeRefs__default.default([sheetRef, ref])
1443
+ ref: reactMergeRefs.mergeRefs([sheetRef, ref])
1440
1444
  }, props), React__namespace.default.createElement(StyledSheetWrapper, {
1441
1445
  isOpen: isOpen,
1442
1446
  isAnimated: isAnimated,
package/dist/index.esm.js CHANGED
@@ -6,7 +6,7 @@
6
6
  */
7
7
 
8
8
  import * as React from 'react';
9
- import React__default, { useContext, useMemo, useEffect, Children, isValidElement, cloneElement, useRef, useState, createContext, forwardRef } from 'react';
9
+ import React__default, { useContext, useMemo, useEffect, Children, isValidElement, cloneElement, createRef, useState, createContext, useRef, forwardRef } from 'react';
10
10
  import PropTypes from 'prop-types';
11
11
  import styled, { css, keyframes, ThemeContext } from 'styled-components';
12
12
  import { math, rgba, readableColor } from 'polished';
@@ -14,7 +14,7 @@ import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight, getColor, PALETT
14
14
  import { useAccordion } from '@zendeskgarden/container-accordion';
15
15
  import { getControlledValue } from '@zendeskgarden/container-utilities';
16
16
  import { useUIDSeed } from 'react-uid';
17
- import mergeRefs from 'react-merge-refs';
17
+ import { mergeRefs } from 'react-merge-refs';
18
18
  import activeElement from 'dom-helpers/activeElement';
19
19
 
20
20
  function _extends$3() {
@@ -42,7 +42,7 @@ const useChromeContext = () => {
42
42
  const COMPONENT_ID$A = 'chrome.chrome';
43
43
  const StyledChrome = styled.div.attrs({
44
44
  'data-garden-id': COMPONENT_ID$A,
45
- 'data-garden-version': '8.74.0'
45
+ 'data-garden-version': '9.0.0-next.0'
46
46
  }).withConfig({
47
47
  displayName: "StyledChrome",
48
48
  componentId: "sc-1uqm6u6-0"
@@ -54,7 +54,7 @@ StyledChrome.defaultProps = {
54
54
  const COMPONENT_ID$z = 'chrome.header_item_icon';
55
55
  const StyledHeaderItemIcon = styled.div.attrs({
56
56
  'data-garden-id': COMPONENT_ID$z,
57
- 'data-garden-version': '8.74.0'
57
+ 'data-garden-version': '9.0.0-next.0'
58
58
  }).withConfig({
59
59
  displayName: "StyledHeaderItemIcon",
60
60
  componentId: "sc-1jhhp6z-0"
@@ -71,7 +71,7 @@ const sizeStyles$4 = props => {
71
71
  };
72
72
  const StyledBaseHeaderItem = styled.button.attrs({
73
73
  'data-garden-id': COMPONENT_ID$y,
74
- 'data-garden-version': '8.74.0'
74
+ 'data-garden-version': '9.0.0-next.0'
75
75
  }).withConfig({
76
76
  displayName: "StyledBaseHeaderItem",
77
77
  componentId: "sc-1qua7h6-0"
@@ -92,7 +92,7 @@ const COMPONENT_ID$x = 'chrome.header_item_text';
92
92
  const clippedStyling = css(["position:absolute;margin:0;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
93
93
  const StyledHeaderItemText = styled.span.attrs({
94
94
  'data-garden-id': COMPONENT_ID$x,
95
- 'data-garden-version': '8.74.0'
95
+ 'data-garden-version': '9.0.0-next.0'
96
96
  }).withConfig({
97
97
  displayName: "StyledHeaderItemText",
98
98
  componentId: "sc-goz7la-0"
@@ -116,7 +116,7 @@ const getExpandedNavWidth = () => {
116
116
  };
117
117
  const StyledNav = styled.nav.attrs({
118
118
  'data-garden-id': COMPONENT_ID$w,
119
- 'data-garden-version': '8.74.0'
119
+ 'data-garden-version': '9.0.0-next.0'
120
120
  }).withConfig({
121
121
  displayName: "StyledNav",
122
122
  componentId: "sc-6j462r-0"
@@ -148,7 +148,7 @@ const retrieveProductColor$1 = props => {
148
148
  };
149
149
  const StyledLogoHeaderItem = styled(StyledBaseHeaderItem).attrs({
150
150
  'data-garden-id': COMPONENT_ID$v,
151
- 'data-garden-version': '8.74.0',
151
+ 'data-garden-version': '9.0.0-next.0',
152
152
  as: 'div'
153
153
  }).withConfig({
154
154
  displayName: "StyledLogoHeaderItem",
@@ -169,7 +169,7 @@ const sizeStyles$3 = props => {
169
169
  };
170
170
  const StyledBaseNavItem = styled.button.attrs({
171
171
  'data-garden-id': COMPONENT_ID$u,
172
- 'data-garden-version': '8.74.0'
172
+ 'data-garden-version': '9.0.0-next.0'
173
173
  }).withConfig({
174
174
  displayName: "StyledBaseNavItem",
175
175
  componentId: "sc-zvo43f-0"
@@ -184,7 +184,7 @@ const getHeaderHeight = props => {
184
184
  };
185
185
  const StyledHeader = styled.header.attrs({
186
186
  'data-garden-id': COMPONENT_ID$t,
187
- 'data-garden-version': '8.74.0'
187
+ 'data-garden-version': '9.0.0-next.0'
188
188
  }).withConfig({
189
189
  displayName: "StyledHeader",
190
190
  componentId: "sc-1cexpz-0"
@@ -222,7 +222,7 @@ const sizeStyles$2 = props => {
222
222
  };
223
223
  const StyledSkipNav = styled.a.attrs({
224
224
  'data-garden-id': COMPONENT_ID$s,
225
- 'data-garden-version': '8.74.0'
225
+ 'data-garden-version': '9.0.0-next.0'
226
226
  }).withConfig({
227
227
  displayName: "StyledSkipNav",
228
228
  componentId: "sc-1tsro34-0"
@@ -255,7 +255,7 @@ const sizeStyles$1 = theme => {
255
255
  };
256
256
  const StyledSkipNavIcon = styled(SvgLinkStroke).attrs({
257
257
  'data-garden-id': COMPONENT_ID$r,
258
- 'data-garden-version': '8.74.0'
258
+ 'data-garden-version': '9.0.0-next.0'
259
259
  }).withConfig({
260
260
  displayName: "StyledSkipNavIcon",
261
261
  componentId: "sc-1ika5z4-0"
@@ -267,7 +267,7 @@ StyledSkipNavIcon.defaultProps = {
267
267
  const COMPONENT_ID$q = 'chrome.body';
268
268
  const StyledBody = styled.div.attrs({
269
269
  'data-garden-id': COMPONENT_ID$q,
270
- 'data-garden-version': '8.74.0'
270
+ 'data-garden-version': '9.0.0-next.0'
271
271
  }).withConfig({
272
272
  displayName: "StyledBody",
273
273
  componentId: "sc-c7h9kv-0"
@@ -282,7 +282,7 @@ const getFooterHeight = props => {
282
282
  };
283
283
  const StyledFooter = styled.footer.attrs({
284
284
  'data-garden-id': COMPONENT_ID$p,
285
- 'data-garden-version': '8.74.0'
285
+ 'data-garden-version': '9.0.0-next.0'
286
286
  }).withConfig({
287
287
  displayName: "StyledFooter",
288
288
  componentId: "sc-v7lib2-0"
@@ -294,7 +294,7 @@ StyledFooter.defaultProps = {
294
294
  const COMPONENT_ID$o = 'chrome.content';
295
295
  const StyledContent = styled.div.attrs({
296
296
  'data-garden-id': COMPONENT_ID$o,
297
- 'data-garden-version': '8.74.0'
297
+ 'data-garden-version': '9.0.0-next.0'
298
298
  }).withConfig({
299
299
  displayName: "StyledContent",
300
300
  componentId: "sc-qcuzxn-0"
@@ -306,7 +306,7 @@ StyledContent.defaultProps = {
306
306
  const COMPONENT_ID$n = 'chrome.main';
307
307
  const StyledMain = styled.main.attrs({
308
308
  'data-garden-id': COMPONENT_ID$n,
309
- 'data-garden-version': '8.74.0'
309
+ 'data-garden-version': '9.0.0-next.0'
310
310
  }).withConfig({
311
311
  displayName: "StyledMain",
312
312
  componentId: "sc-t61cre-0"
@@ -318,7 +318,7 @@ StyledMain.defaultProps = {
318
318
  const COMPONENT_ID$m = 'chrome.sidebar';
319
319
  const StyledSidebar = styled.aside.attrs({
320
320
  'data-garden-id': COMPONENT_ID$m,
321
- 'data-garden-version': '8.74.0'
321
+ 'data-garden-version': '9.0.0-next.0'
322
322
  }).withConfig({
323
323
  displayName: "StyledSidebar",
324
324
  componentId: "sc-1q77fuw-0"
@@ -330,7 +330,7 @@ StyledSidebar.defaultProps = {
330
330
  const COMPONENT_ID$l = 'chrome.footer_item';
331
331
  const StyledFooterItem = styled.div.attrs({
332
332
  'data-garden-id': COMPONENT_ID$l,
333
- 'data-garden-version': '8.74.0'
333
+ 'data-garden-version': '9.0.0-next.0'
334
334
  }).withConfig({
335
335
  displayName: "StyledFooterItem",
336
336
  componentId: "sc-1cktm85-0"
@@ -346,7 +346,7 @@ const imgStyles = props => {
346
346
  };
347
347
  const StyledHeaderItem = styled(StyledBaseHeaderItem).attrs({
348
348
  'data-garden-id': COMPONENT_ID$k,
349
- 'data-garden-version': '8.74.0'
349
+ 'data-garden-version': '9.0.0-next.0'
350
350
  }).withConfig({
351
351
  displayName: "StyledHeaderItem",
352
352
  componentId: "sc-14sft6n-0"
@@ -365,7 +365,7 @@ StyledHeaderItem.defaultProps = {
365
365
  const COMPONENT_ID$j = 'chrome.header_item_wrapper';
366
366
  const StyledHeaderItemWrapper = styled(StyledBaseHeaderItem).attrs({
367
367
  'data-garden-id': COMPONENT_ID$j,
368
- 'data-garden-version': '8.74.0',
368
+ 'data-garden-version': '9.0.0-next.0',
369
369
  as: 'div'
370
370
  }).withConfig({
371
371
  displayName: "StyledHeaderItemWrapper",
@@ -403,7 +403,7 @@ const colorStyles$4 = props => {
403
403
  };
404
404
  const StyledLogoNavItem = styled(StyledBaseNavItem).attrs({
405
405
  'data-garden-id': COMPONENT_ID$i,
406
- 'data-garden-version': '8.74.0',
406
+ 'data-garden-version': '9.0.0-next.0',
407
407
  as: 'div'
408
408
  }).withConfig({
409
409
  displayName: "StyledLogoNavItem",
@@ -416,7 +416,7 @@ StyledLogoNavItem.defaultProps = {
416
416
  const COMPONENT_ID$h = 'chrome.brandmark_nav_item';
417
417
  const StyledBrandmarkNavItem = styled(StyledBaseNavItem).attrs({
418
418
  'data-garden-id': COMPONENT_ID$h,
419
- 'data-garden-version': '8.74.0',
419
+ 'data-garden-version': '9.0.0-next.0',
420
420
  as: 'div'
421
421
  }).withConfig({
422
422
  displayName: "StyledBrandmarkNavItem",
@@ -429,7 +429,7 @@ StyledBrandmarkNavItem.defaultProps = {
429
429
  const COMPONENT_ID$g = 'chrome.nav_item_icon';
430
430
  const StyledNavItemIcon = styled.div.attrs({
431
431
  'data-garden-id': COMPONENT_ID$g,
432
- 'data-garden-version': '8.74.0'
432
+ 'data-garden-version': '9.0.0-next.0'
433
433
  }).withConfig({
434
434
  displayName: "StyledNavItemIcon",
435
435
  componentId: "sc-7w9rpt-0"
@@ -475,7 +475,7 @@ const colorStyles$3 = props => {
475
475
  };
476
476
  const StyledNavItem = styled(StyledBaseNavItem).attrs({
477
477
  'data-garden-id': COMPONENT_ID$f,
478
- 'data-garden-version': '8.74.0',
478
+ 'data-garden-version': '9.0.0-next.0',
479
479
  as: 'button'
480
480
  }).withConfig({
481
481
  displayName: "StyledNavItem",
@@ -492,7 +492,7 @@ StyledNavItem.defaultProps = {
492
492
  const COMPONENT_ID$e = 'chrome.nav_item_text';
493
493
  const StyledNavItemText = styled.span.attrs({
494
494
  'data-garden-id': COMPONENT_ID$e,
495
- 'data-garden-version': '8.74.0'
495
+ 'data-garden-version': '9.0.0-next.0'
496
496
  }).withConfig({
497
497
  displayName: "StyledNavItemText",
498
498
  componentId: "sc-13m84xl-0"
@@ -545,7 +545,7 @@ const getSubNavItemHeight = props => {
545
545
  };
546
546
  const StyledSubNavItem = styled.button.attrs({
547
547
  'data-garden-id': COMPONENT_ID$d,
548
- 'data-garden-version': '8.74.0'
548
+ 'data-garden-version': '9.0.0-next.0'
549
549
  }).withConfig({
550
550
  displayName: "StyledSubNavItem",
551
551
  componentId: "sc-1yg9dpx-0"
@@ -568,7 +568,7 @@ const colorStyles$1 = props => {
568
568
  };
569
569
  const StyledSubNav = styled.nav.attrs({
570
570
  'data-garden-id': COMPONENT_ID$c,
571
- 'data-garden-version': '8.74.0'
571
+ 'data-garden-version': '9.0.0-next.0'
572
572
  }).withConfig({
573
573
  displayName: "StyledSubNav",
574
574
  componentId: "sc-19hjou6-0"
@@ -586,7 +586,7 @@ const sizeStyles = props => {
586
586
  };
587
587
  const StyledSubNavItemText = styled.span.attrs({
588
588
  'data-garden-id': COMPONENT_ID$b,
589
- 'data-garden-version': '8.74.0'
589
+ 'data-garden-version': '9.0.0-next.0'
590
590
  }).withConfig({
591
591
  displayName: "StyledSubNavItemText",
592
592
  componentId: "sc-1hy0pn7-0"
@@ -598,7 +598,7 @@ StyledSubNavItemText.defaultProps = {
598
598
  const COMPONENT_ID$a = 'chrome.collapsible_sub_nav_item';
599
599
  const StyledSubNavItemHeader = styled(StyledSubNavItem).attrs({
600
600
  'data-garden-id': COMPONENT_ID$a,
601
- 'data-garden-version': '8.74.0',
601
+ 'data-garden-version': '9.0.0-next.0',
602
602
  'data-garden-header': 'true'
603
603
  }).withConfig({
604
604
  displayName: "StyledSubNavItemHeader",
@@ -645,7 +645,7 @@ StyledSubNavItemIcon.defaultProps = {
645
645
  };
646
646
  const StyledSubNavItemIconWrapper = styled.div.attrs({
647
647
  'data-garden-id': COMPONENT_ID$9,
648
- 'data-garden-version': '8.74.0'
648
+ 'data-garden-version': '9.0.0-next.0'
649
649
  }).withConfig({
650
650
  displayName: "StyledSubNavItemIcon__StyledSubNavItemIconWrapper",
651
651
  componentId: "sc-1d02hho-1"
@@ -658,7 +658,7 @@ const PANEL_COMPONENT_ID = 'chrome.collapsible_sub_nav_item_panel';
658
658
  const hiddenStyling = css(["visibility:hidden;max-height:0 !important;overflow:hidden;"]);
659
659
  const StyledSubNavPanel = styled.div.attrs({
660
660
  'data-garden-id': PANEL_COMPONENT_ID,
661
- 'data-garden-version': '8.74.0'
661
+ 'data-garden-version': '9.0.0-next.0'
662
662
  }).withConfig({
663
663
  displayName: "StyledSubNavPanel",
664
664
  componentId: "sc-1jv3rpv-0"
@@ -689,7 +689,7 @@ const borderStyle = _ref => {
689
689
  };
690
690
  const StyledSheet = styled.aside.attrs({
691
691
  'data-garden-id': COMPONENT_ID$8,
692
- 'data-garden-version': '8.74.0'
692
+ 'data-garden-version': '9.0.0-next.0'
693
693
  }).withConfig({
694
694
  displayName: "StyledSheet",
695
695
  componentId: "sc-dx8ijk-0"
@@ -701,7 +701,7 @@ StyledSheet.defaultProps = {
701
701
  const COMPONENT_ID$7 = 'chrome.sheet_wrapper';
702
702
  const StyledSheetWrapper = styled.div.attrs({
703
703
  'data-garden-id': COMPONENT_ID$7,
704
- 'data-garden-version': '8.74.0'
704
+ 'data-garden-version': '9.0.0-next.0'
705
705
  }).withConfig({
706
706
  displayName: "StyledSheetWrapper",
707
707
  componentId: "sc-f6x9zb-0"
@@ -728,7 +728,7 @@ StyledSheetWrapper.defaultProps = {
728
728
  const COMPONENT_ID$6 = 'chrome.sheet_title';
729
729
  const StyledSheetTitle = styled.div.attrs({
730
730
  'data-garden-id': COMPONENT_ID$6,
731
- 'data-garden-version': '8.74.0'
731
+ 'data-garden-version': '9.0.0-next.0'
732
732
  }).withConfig({
733
733
  displayName: "StyledSheetTitle",
734
734
  componentId: "sc-1gogk75-0"
@@ -740,7 +740,7 @@ StyledSheetTitle.defaultProps = {
740
740
  const COMPONENT_ID$5 = 'chrome.sheet_description';
741
741
  const StyledSheetDescription = styled.div.attrs({
742
742
  'data-garden-id': COMPONENT_ID$5,
743
- 'data-garden-version': '8.74.0'
743
+ 'data-garden-version': '9.0.0-next.0'
744
744
  }).withConfig({
745
745
  displayName: "StyledSheetDescription",
746
746
  componentId: "sc-1puglb6-0"
@@ -752,7 +752,7 @@ StyledSheetDescription.defaultProps = {
752
752
  const COMPONENT_ID$4 = 'chrome.sheet_body';
753
753
  const StyledSheetBody = styled.div.attrs({
754
754
  'data-garden-id': COMPONENT_ID$4,
755
- 'data-garden-version': '8.74.0'
755
+ 'data-garden-version': '9.0.0-next.0'
756
756
  }).withConfig({
757
757
  displayName: "StyledSheetBody",
758
758
  componentId: "sc-bt4eoj-0"
@@ -776,7 +776,7 @@ const colorStyles = props => {
776
776
  };
777
777
  const StyledSheetClose = styled.button.attrs({
778
778
  'data-garden-id': COMPONENT_ID$3,
779
- 'data-garden-version': '8.74.0'
779
+ 'data-garden-version': '9.0.0-next.0'
780
780
  }).withConfig({
781
781
  displayName: "StyledSheetClose",
782
782
  componentId: "sc-1ab02oq-0"
@@ -788,7 +788,7 @@ StyledSheetClose.defaultProps = {
788
788
  const COMPONENT_ID$2 = 'chrome.sheet_footer';
789
789
  const StyledSheetFooter = styled.footer.attrs({
790
790
  'data-garden-id': COMPONENT_ID$2,
791
- 'data-garden-version': '8.74.0'
791
+ 'data-garden-version': '9.0.0-next.0'
792
792
  }).withConfig({
793
793
  displayName: "StyledSheetFooter",
794
794
  componentId: "sc-2cktos-0"
@@ -800,7 +800,7 @@ StyledSheetFooter.defaultProps = {
800
800
  const COMPONENT_ID$1 = 'chrome.sheet_footer_item';
801
801
  const StyledSheetFooterItem = styled.div.attrs({
802
802
  'data-garden-id': COMPONENT_ID$1,
803
- 'data-garden-version': '8.74.0'
803
+ 'data-garden-version': '9.0.0-next.0'
804
804
  }).withConfig({
805
805
  displayName: "StyledSheetFooterItem",
806
806
  componentId: "sc-r9ixh-0"
@@ -812,7 +812,7 @@ StyledSheetFooterItem.defaultProps = {
812
812
  const COMPONENT_ID = 'chrome.sheet_header';
813
813
  const StyledSheetHeader = styled.header.attrs({
814
814
  'data-garden-id': COMPONENT_ID,
815
- 'data-garden-version': '8.74.0'
815
+ 'data-garden-version': '9.0.0-next.0'
816
816
  }).withConfig({
817
817
  displayName: "StyledSheetHeader",
818
818
  componentId: "sc-o2ry8i-0"
@@ -1187,15 +1187,17 @@ const CollapsibleSubNavItem = React__default.forwardRef((_ref, ref) => {
1187
1187
  isDark,
1188
1188
  isLight
1189
1189
  } = useChromeContext();
1190
- const panelRef = useRef();
1190
+ const panelRef = createRef();
1191
1191
  const [internalExpanded, setInternalExpanded] = useState(controlledExpanded);
1192
1192
  const expanded = getControlledValue(controlledExpanded, internalExpanded);
1193
- const expandedSections = expanded ? [0] : [];
1193
+ const value = 0;
1194
+ const expandedSections = expanded ? [value] : [];
1194
1195
  const {
1195
1196
  getHeaderProps,
1196
1197
  getTriggerProps,
1197
1198
  getPanelProps
1198
1199
  } = useAccordion({
1200
+ sections: [value],
1199
1201
  expandedSections,
1200
1202
  onChange: () => {
1201
1203
  const isExpanded = expandedSections.length === 0;
@@ -1210,27 +1212,30 @@ const CollapsibleSubNavItem = React__default.forwardRef((_ref, ref) => {
1210
1212
  if (expanded && panelRef.current) {
1211
1213
  panelRef.current.style.maxHeight = `${panelRef.current.scrollHeight}px`;
1212
1214
  }
1213
- }, [expanded, children]);
1215
+ }, [expanded, children, panelRef]);
1214
1216
  return React__default.createElement("div", {
1215
1217
  ref: ref
1216
1218
  }, React__default.createElement("div", getHeaderProps({
1217
- ariaLevel: 2
1219
+ 'aria-level': 2
1218
1220
  }), React__default.createElement(StyledSubNavItemHeader, _extends$3({
1219
1221
  isDark: isDark,
1220
- isLight: isLight
1222
+ isLight: isLight,
1223
+ isExpanded: expanded
1221
1224
  }, getTriggerProps({
1222
- isExpanded: expanded,
1223
- index: 0,
1225
+ ...other,
1224
1226
  role: null,
1225
1227
  tabIndex: null,
1226
- ...other
1227
- })), React__default.createElement(React__default.Fragment, null, header, React__default.createElement(StyledSubNavItemIconWrapper, {
1228
+ value
1229
+ }), {
1230
+ type: "button"
1231
+ }), React__default.createElement(React__default.Fragment, null, header, React__default.createElement(StyledSubNavItemIconWrapper, {
1228
1232
  isExpanded: expanded
1229
- }, React__default.createElement(StyledSubNavItemIcon, null))))), React__default.createElement(StyledSubNavPanel, getPanelProps({
1230
- index: 0,
1231
- isHidden: !expanded,
1232
- ref: panelRef
1233
- }), children));
1233
+ }, React__default.createElement(StyledSubNavItemIcon, null))))), React__default.createElement(StyledSubNavPanel, _extends$3({
1234
+ isHidden: !expanded
1235
+ }, getPanelProps({
1236
+ ref: panelRef,
1237
+ value
1238
+ })), children));
1234
1239
  });
1235
1240
  CollapsibleSubNavItem.propTypes = {
1236
1241
  header: PropTypes.any,
@@ -1383,7 +1388,7 @@ const SheetComponent = React__default.forwardRef((_ref, ref) => {
1383
1388
  const sheetRef = useRef(null);
1384
1389
  const seed = useUIDSeed();
1385
1390
  const [isCloseButtonPresent, setIsCloseButtonPresent] = useState(false);
1386
- const idPrefix = useMemo(() => id || seed(`sheet_${'8.74.0'}`), [id, seed]);
1391
+ const idPrefix = useMemo(() => id || seed(`sheet_${'9.0.0-next.0'}`), [id, seed]);
1387
1392
  const titleId = `${idPrefix}--title`;
1388
1393
  const descriptionId = `${idPrefix}--description`;
1389
1394
  const sheetContext = useMemo(() => ({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-chrome",
3
- "version": "8.74.0",
3
+ "version": "9.0.0-next.0",
4
4
  "description": "Components relating to Chrome within the Garden Design System.",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Zendesk Garden <garden@zendesk.com>",
@@ -21,12 +21,12 @@
21
21
  "sideEffects": false,
22
22
  "types": "dist/typings/index.d.ts",
23
23
  "dependencies": {
24
- "@zendeskgarden/container-accordion": "^2.0.0",
25
- "@zendeskgarden/container-utilities": "^1.0.0",
24
+ "@zendeskgarden/container-accordion": "^3.0.4",
25
+ "@zendeskgarden/container-utilities": "^2.0.0",
26
26
  "dom-helpers": "^5.2.1",
27
27
  "polished": "^4.0.0",
28
28
  "prop-types": "^15.5.7",
29
- "react-merge-refs": "^1.1.0"
29
+ "react-merge-refs": "^2.0.0"
30
30
  },
31
31
  "peerDependencies": {
32
32
  "@zendeskgarden/react-theming": "^8.67.0",
@@ -35,7 +35,7 @@
35
35
  "styled-components": "^4.2.0 || ^5.0.0"
36
36
  },
37
37
  "devDependencies": {
38
- "@zendeskgarden/react-theming": "^8.74.0",
38
+ "@zendeskgarden/react-theming": "^9.0.0-next.0",
39
39
  "@zendeskgarden/svg-icons": "7.0.0"
40
40
  },
41
41
  "keywords": [
@@ -48,5 +48,5 @@
48
48
  "access": "public"
49
49
  },
50
50
  "zendeskgarden:src": "src/index.ts",
51
- "gitHead": "77c2ddc2495aba2573821228afc606cb0640a613"
51
+ "gitHead": "7145e970afa57b024ab7d505f2220a656e430c04"
52
52
  }