@zendeskgarden/react-chrome 8.74.0 → 8.74.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/dist/index.cjs.js +60 -56
- package/dist/index.esm.js +60 -55
- 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
|
|
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.
|
|
71
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
83
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
100
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
121
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
145
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
177
|
+
'data-garden-version': '8.74.1',
|
|
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.
|
|
198
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
213
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
251
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
284
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
296
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
311
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
323
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
335
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
347
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
359
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
375
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
394
|
+
'data-garden-version': '8.74.1',
|
|
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.
|
|
432
|
+
'data-garden-version': '8.74.1',
|
|
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.
|
|
445
|
+
'data-garden-version': '8.74.1',
|
|
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.
|
|
458
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
504
|
+
'data-garden-version': '8.74.1',
|
|
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.
|
|
521
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
574
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
597
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
615
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
627
|
+
'data-garden-version': '8.74.1',
|
|
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.
|
|
674
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
687
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
718
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
730
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
757
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
769
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
781
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
805
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
817
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
829
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
841
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
1216
|
+
const panelRef = React.createRef();
|
|
1218
1217
|
const [internalExpanded, setInternalExpanded] = React.useState(controlledExpanded);
|
|
1219
1218
|
const expanded = containerUtilities.getControlledValue(controlledExpanded, internalExpanded);
|
|
1220
|
-
const
|
|
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
|
-
|
|
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
|
-
|
|
1250
|
-
index: 0,
|
|
1251
|
+
...other,
|
|
1251
1252
|
role: null,
|
|
1252
1253
|
tabIndex: null,
|
|
1253
|
-
|
|
1254
|
-
})
|
|
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,
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
ref: panelRef
|
|
1260
|
-
|
|
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.
|
|
1417
|
+
const idPrefix = React.useMemo(() => id || seed(`sheet_${'8.74.1'}`), [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:
|
|
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,
|
|
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.
|
|
45
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
57
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
74
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
95
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
119
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
151
|
+
'data-garden-version': '8.74.1',
|
|
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.
|
|
172
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
187
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
225
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
258
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
270
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
285
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
297
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
309
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
321
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
333
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
349
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
368
|
+
'data-garden-version': '8.74.1',
|
|
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.
|
|
406
|
+
'data-garden-version': '8.74.1',
|
|
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.
|
|
419
|
+
'data-garden-version': '8.74.1',
|
|
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.
|
|
432
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
478
|
+
'data-garden-version': '8.74.1',
|
|
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.
|
|
495
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
548
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
571
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
589
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
601
|
+
'data-garden-version': '8.74.1',
|
|
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.
|
|
648
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
661
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
692
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
704
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
731
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
743
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
755
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
779
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
791
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
803
|
+
'data-garden-version': '8.74.1'
|
|
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.
|
|
815
|
+
'data-garden-version': '8.74.1'
|
|
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 =
|
|
1190
|
+
const panelRef = createRef();
|
|
1191
1191
|
const [internalExpanded, setInternalExpanded] = useState(controlledExpanded);
|
|
1192
1192
|
const expanded = getControlledValue(controlledExpanded, internalExpanded);
|
|
1193
|
-
const
|
|
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
|
-
|
|
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
|
-
|
|
1223
|
-
index: 0,
|
|
1225
|
+
...other,
|
|
1224
1226
|
role: null,
|
|
1225
1227
|
tabIndex: null,
|
|
1226
|
-
|
|
1227
|
-
})
|
|
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,
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
ref: panelRef
|
|
1233
|
-
|
|
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.
|
|
1391
|
+
const idPrefix = useMemo(() => id || seed(`sheet_${'8.74.1'}`), [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.
|
|
3
|
+
"version": "8.74.1",
|
|
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": "^
|
|
25
|
-
"@zendeskgarden/container-utilities": "^
|
|
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": "^
|
|
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.
|
|
38
|
+
"@zendeskgarden/react-theming": "^8.74.1",
|
|
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": "
|
|
51
|
+
"gitHead": "4637bf600631be336574ddb5a31fda8f9bc27de6"
|
|
52
52
|
}
|