@zendeskgarden/react-chrome 8.47.0 → 8.48.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 +314 -280
- package/dist/index.esm.js +177 -142
- package/dist/typings/elements/Chrome.d.ts +2 -3
- package/dist/typings/elements/SkipNav.d.ts +1 -2
- package/dist/typings/elements/body/Body.d.ts +3 -4
- package/dist/typings/elements/header/Header.d.ts +6 -3
- package/dist/typings/elements/header/HeaderItem.d.ts +15 -4
- package/dist/typings/elements/header/HeaderItemIcon.d.ts +3 -3
- package/dist/typings/elements/header/HeaderItemText.d.ts +6 -3
- package/dist/typings/elements/header/HeaderItemWrapper.d.ts +10 -3
- package/dist/typings/elements/nav/Nav.d.ts +1 -2
- package/dist/typings/elements/nav/NavItem.d.ts +1 -2
- package/dist/typings/elements/nav/NavItemIcon.d.ts +3 -3
- package/dist/typings/elements/nav/NavItemText.d.ts +6 -3
- package/dist/typings/elements/sheet/Sheet.d.ts +17 -19
- package/dist/typings/elements/sheet/components/Body.d.ts +4 -1
- package/dist/typings/elements/sheet/components/Close.d.ts +4 -1
- package/dist/typings/elements/sheet/components/Description.d.ts +4 -1
- package/dist/typings/elements/sheet/components/Footer.d.ts +9 -3
- package/dist/typings/elements/sheet/components/FooterItem.d.ts +4 -1
- package/dist/typings/elements/sheet/components/Header.d.ts +4 -1
- package/dist/typings/elements/sheet/components/Title.d.ts +4 -1
- package/dist/typings/elements/subnav/CollapsibleSubNavItem.d.ts +1 -1
- package/dist/typings/elements/subnav/SubNavItem.d.ts +3 -4
- package/dist/typings/elements/subnav/SubNavItemText.d.ts +9 -3
- package/dist/typings/index.d.ts +17 -1
- package/dist/typings/styled/header/StyledBaseHeaderItem.d.ts +0 -3
- package/dist/typings/styled/header/StyledHeader.d.ts +0 -1
- package/dist/typings/styled/header/StyledHeaderItemText.d.ts +0 -1
- package/dist/typings/styled/header/StyledLogoHeaderItem.d.ts +0 -5
- package/dist/typings/styled/nav/StyledNavItemText.d.ts +0 -2
- package/dist/typings/styled/sheet/StyledSheetClose.d.ts +5 -0
- package/dist/typings/styled/sheet/StyledSheetHeader.d.ts +4 -1
- package/dist/typings/styled/subnav/StyledSubNavItemText.d.ts +0 -4
- package/dist/typings/utils/useSheetContext.d.ts +2 -0
- package/package.json +4 -4
package/dist/index.cjs.js
CHANGED
|
@@ -30,14 +30,12 @@ function _interopNamespace(e) {
|
|
|
30
30
|
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
31
31
|
Object.defineProperty(n, k, d.get ? d : {
|
|
32
32
|
enumerable: true,
|
|
33
|
-
get: function () {
|
|
34
|
-
return e[k];
|
|
35
|
-
}
|
|
33
|
+
get: function () { return e[k]; }
|
|
36
34
|
});
|
|
37
35
|
}
|
|
38
36
|
});
|
|
39
37
|
}
|
|
40
|
-
n[
|
|
38
|
+
n["default"] = e;
|
|
41
39
|
return Object.freeze(n);
|
|
42
40
|
}
|
|
43
41
|
|
|
@@ -52,14 +50,9 @@ function ownKeys(object, enumerableOnly) {
|
|
|
52
50
|
|
|
53
51
|
if (Object.getOwnPropertySymbols) {
|
|
54
52
|
var symbols = Object.getOwnPropertySymbols(object);
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
59
|
-
});
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
keys.push.apply(keys, symbols);
|
|
53
|
+
enumerableOnly && (symbols = symbols.filter(function (sym) {
|
|
54
|
+
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
55
|
+
})), keys.push.apply(keys, symbols);
|
|
63
56
|
}
|
|
64
57
|
|
|
65
58
|
return keys;
|
|
@@ -67,19 +60,12 @@ function ownKeys(object, enumerableOnly) {
|
|
|
67
60
|
|
|
68
61
|
function _objectSpread2(target) {
|
|
69
62
|
for (var i = 1; i < arguments.length; i++) {
|
|
70
|
-
var source = arguments[i]
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
} else if (Object.getOwnPropertyDescriptors) {
|
|
77
|
-
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
|
78
|
-
} else {
|
|
79
|
-
ownKeys(Object(source)).forEach(function (key) {
|
|
80
|
-
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
81
|
-
});
|
|
82
|
-
}
|
|
63
|
+
var source = null != arguments[i] ? arguments[i] : {};
|
|
64
|
+
i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
|
|
65
|
+
_defineProperty(target, key, source[key]);
|
|
66
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
|
|
67
|
+
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
68
|
+
});
|
|
83
69
|
}
|
|
84
70
|
|
|
85
71
|
return target;
|
|
@@ -213,7 +199,7 @@ function _nonIterableRest() {
|
|
|
213
199
|
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
214
200
|
}
|
|
215
201
|
|
|
216
|
-
var ChromeContext = React__default[
|
|
202
|
+
var ChromeContext = React__default["default"].createContext({
|
|
217
203
|
hue: 'chromeHue'
|
|
218
204
|
});
|
|
219
205
|
var useChromeContext = function useChromeContext() {
|
|
@@ -221,9 +207,9 @@ var useChromeContext = function useChromeContext() {
|
|
|
221
207
|
};
|
|
222
208
|
|
|
223
209
|
var COMPONENT_ID$A = 'chrome.chrome';
|
|
224
|
-
var StyledChrome = styled__default[
|
|
210
|
+
var StyledChrome = styled__default["default"].div.attrs({
|
|
225
211
|
'data-garden-id': COMPONENT_ID$A,
|
|
226
|
-
'data-garden-version': '8.
|
|
212
|
+
'data-garden-version': '8.48.1'
|
|
227
213
|
}).withConfig({
|
|
228
214
|
displayName: "StyledChrome",
|
|
229
215
|
componentId: "sc-1uqm6u6-0"
|
|
@@ -239,9 +225,9 @@ StyledChrome.defaultProps = {
|
|
|
239
225
|
};
|
|
240
226
|
|
|
241
227
|
var COMPONENT_ID$z = 'chrome.header_item_icon';
|
|
242
|
-
var StyledHeaderItemIcon = styled__default[
|
|
228
|
+
var StyledHeaderItemIcon = styled__default["default"].div.attrs({
|
|
243
229
|
'data-garden-id': COMPONENT_ID$z,
|
|
244
|
-
'data-garden-version': '8.
|
|
230
|
+
'data-garden-version': '8.48.1'
|
|
245
231
|
}).withConfig({
|
|
246
232
|
displayName: "StyledHeaderItemIcon",
|
|
247
233
|
componentId: "sc-1jhhp6z-0"
|
|
@@ -266,9 +252,9 @@ var sizeStyles$4 = function sizeStyles(props) {
|
|
|
266
252
|
var size = props.theme.space.base * 7.5;
|
|
267
253
|
return styled.css(["padding:0 3px;min-width:", "px;height:", ";line-height:", ";"], size, props.maxY ? '100%' : "".concat(size, "px"), reactTheming.getLineHeight(size, props.theme.fontSizes.md));
|
|
268
254
|
};
|
|
269
|
-
var StyledBaseHeaderItem = styled__default[
|
|
255
|
+
var StyledBaseHeaderItem = styled__default["default"].button.attrs({
|
|
270
256
|
'data-garden-id': COMPONENT_ID$y,
|
|
271
|
-
'data-garden-version': '8.
|
|
257
|
+
'data-garden-version': '8.48.1'
|
|
272
258
|
}).withConfig({
|
|
273
259
|
displayName: "StyledBaseHeaderItem",
|
|
274
260
|
componentId: "sc-1qua7h6-0"
|
|
@@ -295,9 +281,9 @@ StyledBaseHeaderItem.defaultProps = {
|
|
|
295
281
|
|
|
296
282
|
var COMPONENT_ID$x = 'chrome.header_item_text';
|
|
297
283
|
var clippedStyling = styled.css(["position:absolute;margin:0;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
|
|
298
|
-
var StyledHeaderItemText = styled__default[
|
|
284
|
+
var StyledHeaderItemText = styled__default["default"].span.attrs({
|
|
299
285
|
'data-garden-id': COMPONENT_ID$x,
|
|
300
|
-
'data-garden-version': '8.
|
|
286
|
+
'data-garden-version': '8.48.1'
|
|
301
287
|
}).withConfig({
|
|
302
288
|
displayName: "StyledHeaderItemText",
|
|
303
289
|
componentId: "sc-goz7la-0"
|
|
@@ -323,9 +309,9 @@ var getNavWidth = function getNavWidth(props) {
|
|
|
323
309
|
var getExpandedNavWidth = function getExpandedNavWidth() {
|
|
324
310
|
return "200px";
|
|
325
311
|
};
|
|
326
|
-
var StyledNav = styled__default[
|
|
312
|
+
var StyledNav = styled__default["default"].nav.attrs({
|
|
327
313
|
'data-garden-id': COMPONENT_ID$w,
|
|
328
|
-
'data-garden-version': '8.
|
|
314
|
+
'data-garden-version': '8.48.1'
|
|
329
315
|
}).withConfig({
|
|
330
316
|
displayName: "StyledNav",
|
|
331
317
|
componentId: "sc-6j462r-0"
|
|
@@ -363,9 +349,9 @@ var retrieveProductColor$1 = function retrieveProductColor(props) {
|
|
|
363
349
|
return 'inherit';
|
|
364
350
|
}
|
|
365
351
|
};
|
|
366
|
-
var StyledLogoHeaderItem = styled__default[
|
|
352
|
+
var StyledLogoHeaderItem = styled__default["default"](StyledBaseHeaderItem).attrs({
|
|
367
353
|
'data-garden-id': COMPONENT_ID$v,
|
|
368
|
-
'data-garden-version': '8.
|
|
354
|
+
'data-garden-version': '8.48.1',
|
|
369
355
|
as: 'div'
|
|
370
356
|
}).withConfig({
|
|
371
357
|
displayName: "StyledLogoHeaderItem",
|
|
@@ -404,9 +390,9 @@ var sizeStyles$3 = function sizeStyles(props) {
|
|
|
404
390
|
var horizontalPadding = polished.math("(".concat(getNavWidth(props), " - ").concat(props.theme.iconSizes.lg, ") / 4"));
|
|
405
391
|
return styled.css(["padding:", " ", ";min-height:", ";"], verticalPadding, horizontalPadding, getNavItemHeight);
|
|
406
392
|
};
|
|
407
|
-
var StyledBaseNavItem = styled__default[
|
|
393
|
+
var StyledBaseNavItem = styled__default["default"].button.attrs({
|
|
408
394
|
'data-garden-id': COMPONENT_ID$u,
|
|
409
|
-
'data-garden-version': '8.
|
|
395
|
+
'data-garden-version': '8.48.1'
|
|
410
396
|
}).withConfig({
|
|
411
397
|
displayName: "StyledBaseNavItem",
|
|
412
398
|
componentId: "sc-zvo43f-0"
|
|
@@ -421,9 +407,9 @@ var COMPONENT_ID$t = 'chrome.header';
|
|
|
421
407
|
var getHeaderHeight = function getHeaderHeight(props) {
|
|
422
408
|
return getNavItemHeight(props);
|
|
423
409
|
};
|
|
424
|
-
var StyledHeader = styled__default[
|
|
410
|
+
var StyledHeader = styled__default["default"].header.attrs({
|
|
425
411
|
'data-garden-id': COMPONENT_ID$t,
|
|
426
|
-
'data-garden-version': '8.
|
|
412
|
+
'data-garden-version': '8.48.1'
|
|
427
413
|
}).withConfig({
|
|
428
414
|
displayName: "StyledHeader",
|
|
429
415
|
componentId: "sc-1cexpz-0"
|
|
@@ -469,9 +455,9 @@ var sizeStyles$2 = function sizeStyles(props) {
|
|
|
469
455
|
var lineHeight = reactTheming.getLineHeight(padding, fontSize);
|
|
470
456
|
return styled.css(["top:", ";padding:", ";padding-", ":", ";line-height:", ";font-size:", ";"], top, padding, props.theme.rtl ? 'right' : 'left', paddingStart, lineHeight, fontSize);
|
|
471
457
|
};
|
|
472
|
-
var StyledSkipNav = styled__default[
|
|
458
|
+
var StyledSkipNav = styled__default["default"].a.attrs({
|
|
473
459
|
'data-garden-id': COMPONENT_ID$s,
|
|
474
|
-
'data-garden-version': '8.
|
|
460
|
+
'data-garden-version': '8.48.1'
|
|
475
461
|
}).withConfig({
|
|
476
462
|
displayName: "StyledSkipNav",
|
|
477
463
|
componentId: "sc-1tsro34-0"
|
|
@@ -494,23 +480,23 @@ StyledSkipNav.defaultProps = {
|
|
|
494
480
|
theme: reactTheming.DEFAULT_THEME
|
|
495
481
|
};
|
|
496
482
|
|
|
497
|
-
|
|
483
|
+
var _path$2;
|
|
498
484
|
|
|
499
|
-
|
|
500
|
-
fill: "currentColor",
|
|
501
|
-
d: "M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"
|
|
502
|
-
});
|
|
485
|
+
function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
|
|
503
486
|
|
|
504
|
-
function SvgLinkStroke(props) {
|
|
487
|
+
var SvgLinkStroke = function SvgLinkStroke(props) {
|
|
505
488
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
|
|
506
489
|
xmlns: "http://www.w3.org/2000/svg",
|
|
507
490
|
width: 16,
|
|
508
491
|
height: 16,
|
|
509
|
-
viewBox: "0 0 16 16",
|
|
510
492
|
focusable: "false",
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
}
|
|
493
|
+
viewBox: "0 0 16 16",
|
|
494
|
+
"aria-hidden": "true"
|
|
495
|
+
}, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
496
|
+
fill: "currentColor",
|
|
497
|
+
d: "M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"
|
|
498
|
+
})));
|
|
499
|
+
};
|
|
514
500
|
|
|
515
501
|
var COMPONENT_ID$r = 'chrome.skipnav_icon';
|
|
516
502
|
var sizeStyles$1 = function sizeStyles(theme) {
|
|
@@ -518,9 +504,9 @@ var sizeStyles$1 = function sizeStyles(theme) {
|
|
|
518
504
|
var size = theme.iconSizes.md;
|
|
519
505
|
return styled.css(["margin-", ":", ";width:", ";height:", ";"], theme.rtl ? 'left' : 'right', margin, size, size);
|
|
520
506
|
};
|
|
521
|
-
var StyledSkipNavIcon = styled__default[
|
|
507
|
+
var StyledSkipNavIcon = styled__default["default"](SvgLinkStroke).attrs({
|
|
522
508
|
'data-garden-id': COMPONENT_ID$r,
|
|
523
|
-
'data-garden-version': '8.
|
|
509
|
+
'data-garden-version': '8.48.1'
|
|
524
510
|
}).withConfig({
|
|
525
511
|
displayName: "StyledSkipNavIcon",
|
|
526
512
|
componentId: "sc-1ika5z4-0"
|
|
@@ -538,9 +524,9 @@ StyledSkipNavIcon.defaultProps = {
|
|
|
538
524
|
};
|
|
539
525
|
|
|
540
526
|
var COMPONENT_ID$q = 'chrome.body';
|
|
541
|
-
var StyledBody = styled__default[
|
|
527
|
+
var StyledBody = styled__default["default"].div.attrs({
|
|
542
528
|
'data-garden-id': COMPONENT_ID$q,
|
|
543
|
-
'data-garden-version': '8.
|
|
529
|
+
'data-garden-version': '8.48.1'
|
|
544
530
|
}).withConfig({
|
|
545
531
|
displayName: "StyledBody",
|
|
546
532
|
componentId: "sc-c7h9kv-0"
|
|
@@ -557,9 +543,9 @@ var COMPONENT_ID$p = 'chrome.footer';
|
|
|
557
543
|
var getFooterHeight = function getFooterHeight(props) {
|
|
558
544
|
return "".concat(props.theme.space.base * 20, "px");
|
|
559
545
|
};
|
|
560
|
-
var StyledFooter = styled__default[
|
|
546
|
+
var StyledFooter = styled__default["default"].footer.attrs({
|
|
561
547
|
'data-garden-id': COMPONENT_ID$p,
|
|
562
|
-
'data-garden-version': '8.
|
|
548
|
+
'data-garden-version': '8.48.1'
|
|
563
549
|
}).withConfig({
|
|
564
550
|
displayName: "StyledFooter",
|
|
565
551
|
componentId: "sc-v7lib2-0"
|
|
@@ -577,9 +563,9 @@ StyledFooter.defaultProps = {
|
|
|
577
563
|
};
|
|
578
564
|
|
|
579
565
|
var COMPONENT_ID$o = 'chrome.content';
|
|
580
|
-
var StyledContent = styled__default[
|
|
566
|
+
var StyledContent = styled__default["default"].div.attrs({
|
|
581
567
|
'data-garden-id': COMPONENT_ID$o,
|
|
582
|
-
'data-garden-version': '8.
|
|
568
|
+
'data-garden-version': '8.48.1'
|
|
583
569
|
}).withConfig({
|
|
584
570
|
displayName: "StyledContent",
|
|
585
571
|
componentId: "sc-qcuzxn-0"
|
|
@@ -599,9 +585,9 @@ StyledContent.defaultProps = {
|
|
|
599
585
|
};
|
|
600
586
|
|
|
601
587
|
var COMPONENT_ID$n = 'chrome.main';
|
|
602
|
-
var StyledMain = styled__default[
|
|
588
|
+
var StyledMain = styled__default["default"].main.attrs({
|
|
603
589
|
'data-garden-id': COMPONENT_ID$n,
|
|
604
|
-
'data-garden-version': '8.
|
|
590
|
+
'data-garden-version': '8.48.1'
|
|
605
591
|
}).withConfig({
|
|
606
592
|
displayName: "StyledMain",
|
|
607
593
|
componentId: "sc-t61cre-0"
|
|
@@ -615,9 +601,9 @@ StyledMain.defaultProps = {
|
|
|
615
601
|
};
|
|
616
602
|
|
|
617
603
|
var COMPONENT_ID$m = 'chrome.sidebar';
|
|
618
|
-
var StyledSidebar = styled__default[
|
|
604
|
+
var StyledSidebar = styled__default["default"].aside.attrs({
|
|
619
605
|
'data-garden-id': COMPONENT_ID$m,
|
|
620
|
-
'data-garden-version': '8.
|
|
606
|
+
'data-garden-version': '8.48.1'
|
|
621
607
|
}).withConfig({
|
|
622
608
|
displayName: "StyledSidebar",
|
|
623
609
|
componentId: "sc-1q77fuw-0"
|
|
@@ -633,9 +619,9 @@ StyledSidebar.defaultProps = {
|
|
|
633
619
|
};
|
|
634
620
|
|
|
635
621
|
var COMPONENT_ID$l = 'chrome.footer_item';
|
|
636
|
-
var StyledFooterItem = styled__default[
|
|
622
|
+
var StyledFooterItem = styled__default["default"].div.attrs({
|
|
637
623
|
'data-garden-id': COMPONENT_ID$l,
|
|
638
|
-
'data-garden-version': '8.
|
|
624
|
+
'data-garden-version': '8.48.1'
|
|
639
625
|
}).withConfig({
|
|
640
626
|
displayName: "StyledFooterItem",
|
|
641
627
|
componentId: "sc-1cktm85-0"
|
|
@@ -653,9 +639,9 @@ var imgStyles = function imgStyles(props) {
|
|
|
653
639
|
var size = polished.math("".concat(getHeaderItemSize(props), " - ").concat(props.theme.space.base * 2));
|
|
654
640
|
return styled.css(["img{margin:0;border-radius:", ";width:", ";height:", ";}"], polished.math("".concat(props.theme.borderRadii.md, " - 1")), size, size);
|
|
655
641
|
};
|
|
656
|
-
var StyledHeaderItem = styled__default[
|
|
642
|
+
var StyledHeaderItem = styled__default["default"](StyledBaseHeaderItem).attrs({
|
|
657
643
|
'data-garden-id': COMPONENT_ID$k,
|
|
658
|
-
'data-garden-version': '8.
|
|
644
|
+
'data-garden-version': '8.48.1'
|
|
659
645
|
}).withConfig({
|
|
660
646
|
displayName: "StyledHeaderItem",
|
|
661
647
|
componentId: "sc-14sft6n-0"
|
|
@@ -679,9 +665,9 @@ StyledHeaderItem.defaultProps = {
|
|
|
679
665
|
};
|
|
680
666
|
|
|
681
667
|
var COMPONENT_ID$j = 'chrome.header_item_wrapper';
|
|
682
|
-
var StyledHeaderItemWrapper = styled__default[
|
|
668
|
+
var StyledHeaderItemWrapper = styled__default["default"](StyledBaseHeaderItem).attrs({
|
|
683
669
|
'data-garden-id': COMPONENT_ID$j,
|
|
684
|
-
'data-garden-version': '8.
|
|
670
|
+
'data-garden-version': '8.48.1',
|
|
685
671
|
as: 'div'
|
|
686
672
|
}).withConfig({
|
|
687
673
|
displayName: "StyledHeaderItemWrapper",
|
|
@@ -719,9 +705,9 @@ var colorStyles$4 = function colorStyles(props) {
|
|
|
719
705
|
var color = props.isLight || props.isDark ? fillColor : retrieveProductColor(props.product);
|
|
720
706
|
return styled.css(["color:", ";fill:", ";"], color, fillColor);
|
|
721
707
|
};
|
|
722
|
-
var StyledLogoNavItem = styled__default[
|
|
708
|
+
var StyledLogoNavItem = styled__default["default"](StyledBaseNavItem).attrs({
|
|
723
709
|
'data-garden-id': COMPONENT_ID$i,
|
|
724
|
-
'data-garden-version': '8.
|
|
710
|
+
'data-garden-version': '8.48.1',
|
|
725
711
|
as: 'div'
|
|
726
712
|
}).withConfig({
|
|
727
713
|
displayName: "StyledLogoNavItem",
|
|
@@ -734,9 +720,9 @@ StyledLogoNavItem.defaultProps = {
|
|
|
734
720
|
};
|
|
735
721
|
|
|
736
722
|
var COMPONENT_ID$h = 'chrome.brandmark_nav_item';
|
|
737
|
-
var StyledBrandmarkNavItem = styled__default[
|
|
723
|
+
var StyledBrandmarkNavItem = styled__default["default"](StyledBaseNavItem).attrs({
|
|
738
724
|
'data-garden-id': COMPONENT_ID$h,
|
|
739
|
-
'data-garden-version': '8.
|
|
725
|
+
'data-garden-version': '8.48.1',
|
|
740
726
|
as: 'div'
|
|
741
727
|
}).withConfig({
|
|
742
728
|
displayName: "StyledBrandmarkNavItem",
|
|
@@ -747,9 +733,9 @@ StyledBrandmarkNavItem.defaultProps = {
|
|
|
747
733
|
};
|
|
748
734
|
|
|
749
735
|
var COMPONENT_ID$g = 'chrome.nav_item_icon';
|
|
750
|
-
var StyledNavItemIcon = styled__default[
|
|
736
|
+
var StyledNavItemIcon = styled__default["default"].div.attrs({
|
|
751
737
|
'data-garden-id': COMPONENT_ID$g,
|
|
752
|
-
'data-garden-version': '8.
|
|
738
|
+
'data-garden-version': '8.48.1'
|
|
753
739
|
}).withConfig({
|
|
754
740
|
displayName: "StyledNavItemIcon",
|
|
755
741
|
componentId: "sc-7w9rpt-0"
|
|
@@ -787,9 +773,9 @@ var colorStyles$3 = function colorStyles(props) {
|
|
|
787
773
|
var focusColor = polished.rgba(props.isLight ? BLACK : WHITE, 0.2);
|
|
788
774
|
return styled.css(["opacity:", ";background-color:", ";&:hover{opacity:1;background-color:", ";}&[data-garden-focus-visible]{opacity:1;box-shadow:inset ", ";}&:active{background-color:", ";}"], props.isCurrent ? 1 : 0.6, currentColor, hoverColor, props.theme.shadows.md(focusColor), activeColor);
|
|
789
775
|
};
|
|
790
|
-
var StyledNavItem = styled__default[
|
|
776
|
+
var StyledNavItem = styled__default["default"](StyledBaseNavItem).attrs({
|
|
791
777
|
'data-garden-id': COMPONENT_ID$f,
|
|
792
|
-
'data-garden-version': '8.
|
|
778
|
+
'data-garden-version': '8.48.1',
|
|
793
779
|
as: 'button'
|
|
794
780
|
}).withConfig({
|
|
795
781
|
displayName: "StyledNavItem",
|
|
@@ -812,9 +798,9 @@ StyledNavItem.defaultProps = {
|
|
|
812
798
|
};
|
|
813
799
|
|
|
814
800
|
var COMPONENT_ID$e = 'chrome.nav_item_text';
|
|
815
|
-
var StyledNavItemText = styled__default[
|
|
801
|
+
var StyledNavItemText = styled__default["default"].span.attrs({
|
|
816
802
|
'data-garden-id': COMPONENT_ID$e,
|
|
817
|
-
'data-garden-version': '8.
|
|
803
|
+
'data-garden-version': '8.48.1'
|
|
818
804
|
}).withConfig({
|
|
819
805
|
displayName: "StyledNavItemText",
|
|
820
806
|
componentId: "sc-13m84xl-0"
|
|
@@ -855,9 +841,9 @@ var colorStyles$2 = function colorStyles(props) {
|
|
|
855
841
|
var getSubNavItemHeight = function getSubNavItemHeight(props) {
|
|
856
842
|
return "".concat(props.theme.space.base * 7.5, "px");
|
|
857
843
|
};
|
|
858
|
-
var StyledSubNavItem = styled__default[
|
|
844
|
+
var StyledSubNavItem = styled__default["default"].button.attrs({
|
|
859
845
|
'data-garden-id': COMPONENT_ID$d,
|
|
860
|
-
'data-garden-version': '8.
|
|
846
|
+
'data-garden-version': '8.48.1'
|
|
861
847
|
}).withConfig({
|
|
862
848
|
displayName: "StyledSubNavItem",
|
|
863
849
|
componentId: "sc-1yg9dpx-0"
|
|
@@ -890,9 +876,9 @@ var colorStyles$1 = function colorStyles(props) {
|
|
|
890
876
|
var foregroundColor = props.isLight ? props.theme.palette.grey[800] : props.theme.palette.white;
|
|
891
877
|
return styled.css(["background-color:", ";color:", ";"], backgroundColor, foregroundColor);
|
|
892
878
|
};
|
|
893
|
-
var StyledSubNav = styled__default[
|
|
879
|
+
var StyledSubNav = styled__default["default"].nav.attrs({
|
|
894
880
|
'data-garden-id': COMPONENT_ID$c,
|
|
895
|
-
'data-garden-version': '8.
|
|
881
|
+
'data-garden-version': '8.48.1'
|
|
896
882
|
}).withConfig({
|
|
897
883
|
displayName: "StyledSubNav",
|
|
898
884
|
componentId: "sc-19hjou6-0"
|
|
@@ -916,9 +902,9 @@ var sizeStyles = function sizeStyles(props) {
|
|
|
916
902
|
var lineHeight = reactTheming.getLineHeight(baseLineHeight, props.theme.fontSizes.md);
|
|
917
903
|
return styled.css(["margin:", " 0;line-height:", ";"], verticalMargin, lineHeight);
|
|
918
904
|
};
|
|
919
|
-
var StyledSubNavItemText = styled__default[
|
|
905
|
+
var StyledSubNavItemText = styled__default["default"].span.attrs({
|
|
920
906
|
'data-garden-id': COMPONENT_ID$b,
|
|
921
|
-
'data-garden-version': '8.
|
|
907
|
+
'data-garden-version': '8.48.1'
|
|
922
908
|
}).withConfig({
|
|
923
909
|
displayName: "StyledSubNavItemText",
|
|
924
910
|
componentId: "sc-1hy0pn7-0"
|
|
@@ -934,9 +920,9 @@ StyledSubNavItemText.defaultProps = {
|
|
|
934
920
|
};
|
|
935
921
|
|
|
936
922
|
var COMPONENT_ID$a = 'chrome.collapsible_sub_nav_item';
|
|
937
|
-
var StyledSubNavItemHeader = styled__default[
|
|
923
|
+
var StyledSubNavItemHeader = styled__default["default"](StyledSubNavItem).attrs({
|
|
938
924
|
'data-garden-id': COMPONENT_ID$a,
|
|
939
|
-
'data-garden-version': '8.
|
|
925
|
+
'data-garden-version': '8.48.1',
|
|
940
926
|
'data-garden-header': 'true'
|
|
941
927
|
}).withConfig({
|
|
942
928
|
displayName: "StyledSubNavItemHeader",
|
|
@@ -952,36 +938,36 @@ StyledSubNavItemHeader.defaultProps = {
|
|
|
952
938
|
theme: reactTheming.DEFAULT_THEME
|
|
953
939
|
};
|
|
954
940
|
|
|
955
|
-
|
|
941
|
+
var _path$1;
|
|
956
942
|
|
|
957
|
-
|
|
958
|
-
fill: "currentColor",
|
|
959
|
-
d: "M1.646 3.646a.5.5 0 01.638-.057l.07.057L6 7.293l3.646-3.647a.5.5 0 01.638-.057l.07.057a.5.5 0 01.057.638l-.057.07-4 4a.5.5 0 01-.638.057l-.07-.057-4-4a.5.5 0 010-.708z"
|
|
960
|
-
});
|
|
943
|
+
function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
|
|
961
944
|
|
|
962
|
-
function SvgChevronDownStroke(props) {
|
|
945
|
+
var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
|
|
963
946
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
|
|
964
947
|
xmlns: "http://www.w3.org/2000/svg",
|
|
965
948
|
width: 12,
|
|
966
949
|
height: 12,
|
|
967
|
-
viewBox: "0 0 12 12",
|
|
968
950
|
focusable: "false",
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
}
|
|
951
|
+
viewBox: "0 0 12 12",
|
|
952
|
+
"aria-hidden": "true"
|
|
953
|
+
}, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
954
|
+
fill: "currentColor",
|
|
955
|
+
d: "M1.646 3.646a.5.5 0 01.638-.057l.07.057L6 7.293l3.646-3.647a.5.5 0 01.638-.057l.07.057a.5.5 0 01.057.638l-.057.07-4 4a.5.5 0 01-.638.057l-.07-.057-4-4a.5.5 0 010-.708z"
|
|
956
|
+
})));
|
|
957
|
+
};
|
|
972
958
|
|
|
973
959
|
var _excluded$b = ["theme", "isExpanded"];
|
|
974
960
|
var COMPONENT_ID$9 = 'chrome.collapsible_sub_nav_item_icon';
|
|
975
|
-
var FilteredChevronDownStrokeIcon = React__default[
|
|
961
|
+
var FilteredChevronDownStrokeIcon = React__default["default"].forwardRef(function (_ref, ref) {
|
|
976
962
|
_ref.theme;
|
|
977
963
|
_ref.isExpanded;
|
|
978
964
|
var validProps = _objectWithoutProperties(_ref, _excluded$b);
|
|
979
|
-
return React__default[
|
|
965
|
+
return React__default["default"].createElement(SvgChevronDownStroke, _extends$3({
|
|
980
966
|
ref: ref
|
|
981
967
|
}, validProps));
|
|
982
968
|
});
|
|
983
969
|
FilteredChevronDownStrokeIcon.displayName = 'FilteredChevronDownStrokeIcon';
|
|
984
|
-
var StyledSubNavItemIcon = styled__default[
|
|
970
|
+
var StyledSubNavItemIcon = styled__default["default"](FilteredChevronDownStrokeIcon).withConfig({
|
|
985
971
|
displayName: "StyledSubNavItemIcon",
|
|
986
972
|
componentId: "sc-1d02hho-0"
|
|
987
973
|
})(["width:", ";height:", ";"], function (props) {
|
|
@@ -992,9 +978,9 @@ var StyledSubNavItemIcon = styled__default['default'](FilteredChevronDownStrokeI
|
|
|
992
978
|
StyledSubNavItemIcon.defaultProps = {
|
|
993
979
|
theme: reactTheming.DEFAULT_THEME
|
|
994
980
|
};
|
|
995
|
-
var StyledSubNavItemIconWrapper = styled__default[
|
|
981
|
+
var StyledSubNavItemIconWrapper = styled__default["default"].div.attrs({
|
|
996
982
|
'data-garden-id': COMPONENT_ID$9,
|
|
997
|
-
'data-garden-version': '8.
|
|
983
|
+
'data-garden-version': '8.48.1'
|
|
998
984
|
}).withConfig({
|
|
999
985
|
displayName: "StyledSubNavItemIcon__StyledSubNavItemIconWrapper",
|
|
1000
986
|
componentId: "sc-1d02hho-1"
|
|
@@ -1018,9 +1004,9 @@ StyledSubNavItemIconWrapper.defaultProps = {
|
|
|
1018
1004
|
|
|
1019
1005
|
var PANEL_COMPONENT_ID = 'chrome.collapsible_sub_nav_item_panel';
|
|
1020
1006
|
var hiddenStyling = styled.css(["visibility:hidden;max-height:0 !important;overflow:hidden;"]);
|
|
1021
|
-
var StyledSubNavPanel = styled__default[
|
|
1007
|
+
var StyledSubNavPanel = styled__default["default"].div.attrs({
|
|
1022
1008
|
'data-garden-id': PANEL_COMPONENT_ID,
|
|
1023
|
-
'data-garden-version': '8.
|
|
1009
|
+
'data-garden-version': '8.48.1'
|
|
1024
1010
|
}).withConfig({
|
|
1025
1011
|
displayName: "StyledSubNavPanel",
|
|
1026
1012
|
componentId: "sc-1jv3rpv-0"
|
|
@@ -1055,9 +1041,9 @@ var borderStyle = function borderStyle(_ref) {
|
|
|
1055
1041
|
}
|
|
1056
1042
|
return "border".concat(borderSide, ": ").concat(theme.borders.sm, " ").concat(borderColor, ";");
|
|
1057
1043
|
};
|
|
1058
|
-
var StyledSheet = styled__default[
|
|
1044
|
+
var StyledSheet = styled__default["default"].aside.attrs({
|
|
1059
1045
|
'data-garden-id': COMPONENT_ID$8,
|
|
1060
|
-
'data-garden-version': '8.
|
|
1046
|
+
'data-garden-version': '8.48.1'
|
|
1061
1047
|
}).withConfig({
|
|
1062
1048
|
displayName: "StyledSheet",
|
|
1063
1049
|
componentId: "sc-dx8ijk-0"
|
|
@@ -1079,9 +1065,9 @@ StyledSheet.defaultProps = {
|
|
|
1079
1065
|
};
|
|
1080
1066
|
|
|
1081
1067
|
var COMPONENT_ID$7 = 'chrome.sheet_wrapper';
|
|
1082
|
-
var StyledSheetWrapper = styled__default[
|
|
1068
|
+
var StyledSheetWrapper = styled__default["default"].div.attrs({
|
|
1083
1069
|
'data-garden-id': COMPONENT_ID$7,
|
|
1084
|
-
'data-garden-version': '8.
|
|
1070
|
+
'data-garden-version': '8.48.1'
|
|
1085
1071
|
}).withConfig({
|
|
1086
1072
|
displayName: "StyledSheetWrapper",
|
|
1087
1073
|
componentId: "sc-f6x9zb-0"
|
|
@@ -1112,9 +1098,9 @@ StyledSheetWrapper.defaultProps = {
|
|
|
1112
1098
|
};
|
|
1113
1099
|
|
|
1114
1100
|
var COMPONENT_ID$6 = 'chrome.sheet_title';
|
|
1115
|
-
var StyledSheetTitle = styled__default[
|
|
1101
|
+
var StyledSheetTitle = styled__default["default"].div.attrs({
|
|
1116
1102
|
'data-garden-id': COMPONENT_ID$6,
|
|
1117
|
-
'data-garden-version': '8.
|
|
1103
|
+
'data-garden-version': '8.48.1'
|
|
1118
1104
|
}).withConfig({
|
|
1119
1105
|
displayName: "StyledSheetTitle",
|
|
1120
1106
|
componentId: "sc-1gogk75-0"
|
|
@@ -1132,9 +1118,9 @@ StyledSheetTitle.defaultProps = {
|
|
|
1132
1118
|
};
|
|
1133
1119
|
|
|
1134
1120
|
var COMPONENT_ID$5 = 'chrome.sheet_description';
|
|
1135
|
-
var StyledSheetDescription = styled__default[
|
|
1121
|
+
var StyledSheetDescription = styled__default["default"].div.attrs({
|
|
1136
1122
|
'data-garden-id': COMPONENT_ID$5,
|
|
1137
|
-
'data-garden-version': '8.
|
|
1123
|
+
'data-garden-version': '8.48.1'
|
|
1138
1124
|
}).withConfig({
|
|
1139
1125
|
displayName: "StyledSheetDescription",
|
|
1140
1126
|
componentId: "sc-1puglb6-0"
|
|
@@ -1150,9 +1136,9 @@ StyledSheetDescription.defaultProps = {
|
|
|
1150
1136
|
};
|
|
1151
1137
|
|
|
1152
1138
|
var COMPONENT_ID$4 = 'chrome.sheet_body';
|
|
1153
|
-
var StyledSheetBody = styled__default[
|
|
1139
|
+
var StyledSheetBody = styled__default["default"].div.attrs({
|
|
1154
1140
|
'data-garden-id': COMPONENT_ID$4,
|
|
1155
|
-
'data-garden-version': '8.
|
|
1141
|
+
'data-garden-version': '8.48.1'
|
|
1156
1142
|
}).withConfig({
|
|
1157
1143
|
displayName: "StyledSheetBody",
|
|
1158
1144
|
componentId: "sc-bt4eoj-0"
|
|
@@ -1166,27 +1152,32 @@ StyledSheetBody.defaultProps = {
|
|
|
1166
1152
|
};
|
|
1167
1153
|
|
|
1168
1154
|
var COMPONENT_ID$3 = 'chrome.sheet_close';
|
|
1155
|
+
var baseMultipliers = {
|
|
1156
|
+
top: 2.5,
|
|
1157
|
+
side: 2,
|
|
1158
|
+
size: 10
|
|
1159
|
+
};
|
|
1169
1160
|
var colorStyles = function colorStyles(props) {
|
|
1170
1161
|
var backgroundColor = 'primaryHue';
|
|
1171
1162
|
var foregroundColor = 'neutralHue';
|
|
1172
1163
|
return styled.css(["background-color:transparent;color:", ";&:hover{background-color:", ";color:", ";}&[data-garden-focus-visible]{box-shadow:", ";}&:active{transition:background-color 0.1s ease-in-out,color 0.1s ease-in-out;background-color:", ";color:", ";}"], reactTheming.getColor(foregroundColor, 600, props.theme), reactTheming.getColor(backgroundColor, 600, props.theme, 0.08), reactTheming.getColor(foregroundColor, 700, props.theme), props.theme.shadows.md(reactTheming.getColor(backgroundColor, 600, props.theme, 0.35)), reactTheming.getColor(backgroundColor, 600, props.theme, 0.2), reactTheming.getColor(foregroundColor, 800, props.theme));
|
|
1173
1164
|
};
|
|
1174
|
-
var StyledSheetClose = styled__default[
|
|
1165
|
+
var StyledSheetClose = styled__default["default"].button.attrs({
|
|
1175
1166
|
'data-garden-id': COMPONENT_ID$3,
|
|
1176
|
-
'data-garden-version': '8.
|
|
1167
|
+
'data-garden-version': '8.48.1'
|
|
1177
1168
|
}).withConfig({
|
|
1178
1169
|
displayName: "StyledSheetClose",
|
|
1179
1170
|
componentId: "sc-1ab02oq-0"
|
|
1180
1171
|
})(["display:flex;position:absolute;top:", "px;", ":", ";align-items:center;justify-content:center;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;border:none;border-radius:50%;cursor:pointer;padding:0;width:", "px;height:", "px;overflow:hidden;text-decoration:none;font-size:0;user-select:none;&::-moz-focus-inner{border:0;}&:focus{outline:none;}", ";& > svg{vertical-align:middle;}", ";"], function (props) {
|
|
1181
|
-
return props.theme.space.base *
|
|
1172
|
+
return props.theme.space.base * baseMultipliers.top;
|
|
1182
1173
|
}, function (props) {
|
|
1183
1174
|
return props.theme.rtl ? 'left' : 'right';
|
|
1184
1175
|
}, function (props) {
|
|
1185
|
-
return "".concat(props.theme.space.base *
|
|
1176
|
+
return "".concat(props.theme.space.base * baseMultipliers.side, "px");
|
|
1186
1177
|
}, function (props) {
|
|
1187
|
-
return props.theme.space.base *
|
|
1178
|
+
return props.theme.space.base * baseMultipliers.size;
|
|
1188
1179
|
}, function (props) {
|
|
1189
|
-
return props.theme.space.base *
|
|
1180
|
+
return props.theme.space.base * baseMultipliers.size;
|
|
1190
1181
|
}, function (props) {
|
|
1191
1182
|
return colorStyles(props);
|
|
1192
1183
|
}, function (props) {
|
|
@@ -1197,9 +1188,9 @@ StyledSheetClose.defaultProps = {
|
|
|
1197
1188
|
};
|
|
1198
1189
|
|
|
1199
1190
|
var COMPONENT_ID$2 = 'chrome.sheet_footer';
|
|
1200
|
-
var StyledSheetFooter = styled__default[
|
|
1191
|
+
var StyledSheetFooter = styled__default["default"].footer.attrs({
|
|
1201
1192
|
'data-garden-id': COMPONENT_ID$2,
|
|
1202
|
-
'data-garden-version': '8.
|
|
1193
|
+
'data-garden-version': '8.48.1'
|
|
1203
1194
|
}).withConfig({
|
|
1204
1195
|
displayName: "StyledSheetFooter",
|
|
1205
1196
|
componentId: "sc-2cktos-0"
|
|
@@ -1217,9 +1208,9 @@ StyledSheetFooter.defaultProps = {
|
|
|
1217
1208
|
};
|
|
1218
1209
|
|
|
1219
1210
|
var COMPONENT_ID$1 = 'chrome.sheet_footer_item';
|
|
1220
|
-
var StyledSheetFooterItem = styled__default[
|
|
1211
|
+
var StyledSheetFooterItem = styled__default["default"].div.attrs({
|
|
1221
1212
|
'data-garden-id': COMPONENT_ID$1,
|
|
1222
|
-
'data-garden-version': '8.
|
|
1213
|
+
'data-garden-version': '8.48.1'
|
|
1223
1214
|
}).withConfig({
|
|
1224
1215
|
displayName: "StyledSheetFooterItem",
|
|
1225
1216
|
componentId: "sc-r9ixh-0"
|
|
@@ -1233,16 +1224,19 @@ StyledSheetFooterItem.defaultProps = {
|
|
|
1233
1224
|
};
|
|
1234
1225
|
|
|
1235
1226
|
var COMPONENT_ID = 'chrome.sheet_header';
|
|
1236
|
-
var StyledSheetHeader = styled__default[
|
|
1227
|
+
var StyledSheetHeader = styled__default["default"].header.attrs({
|
|
1237
1228
|
'data-garden-id': COMPONENT_ID,
|
|
1238
|
-
'data-garden-version': '8.
|
|
1229
|
+
'data-garden-version': '8.48.1'
|
|
1239
1230
|
}).withConfig({
|
|
1240
1231
|
displayName: "StyledSheetHeader",
|
|
1241
1232
|
componentId: "sc-o2ry8i-0"
|
|
1242
|
-
})(["border-bottom:", ";padding:", "px;", ";"], function (props) {
|
|
1233
|
+
})(["border-bottom:", ";padding:", "px;", " ", ";"], function (props) {
|
|
1243
1234
|
return "".concat(props.theme.borders.sm, " ").concat(reactTheming.getColor('neutralHue', 300, props.theme), "}");
|
|
1244
1235
|
}, function (props) {
|
|
1245
1236
|
return props.theme.space.base * 5;
|
|
1237
|
+
}, function (props) {
|
|
1238
|
+
return props.isCloseButtonPresent &&
|
|
1239
|
+
"padding-".concat(props.theme.rtl ? 'left' : 'right', ": ").concat(props.theme.space.base * (baseMultipliers.size + baseMultipliers.side + 2), "px;");
|
|
1246
1240
|
}, function (props) {
|
|
1247
1241
|
return reactTheming.retrieveComponentStyles(COMPONENT_ID, props);
|
|
1248
1242
|
});
|
|
@@ -1251,7 +1245,7 @@ StyledSheetHeader.defaultProps = {
|
|
|
1251
1245
|
};
|
|
1252
1246
|
|
|
1253
1247
|
var _excluded$a = ["hue", "isFluid"];
|
|
1254
|
-
var Chrome = React__default[
|
|
1248
|
+
var Chrome = React__default["default"].forwardRef(function (_ref, ref) {
|
|
1255
1249
|
var hue = _ref.hue,
|
|
1256
1250
|
isFluid = _ref.isFluid,
|
|
1257
1251
|
props = _objectWithoutProperties(_ref, _excluded$a);
|
|
@@ -1288,39 +1282,39 @@ var Chrome = React__default['default'].forwardRef(function (_ref, ref) {
|
|
|
1288
1282
|
}
|
|
1289
1283
|
return undefined;
|
|
1290
1284
|
}, [environment, isFluid]);
|
|
1291
|
-
return React__default[
|
|
1285
|
+
return React__default["default"].createElement(ChromeContext.Provider, {
|
|
1292
1286
|
value: chromeContextValue
|
|
1293
|
-
}, React__default[
|
|
1287
|
+
}, React__default["default"].createElement(StyledChrome, _extends$3({
|
|
1294
1288
|
ref: ref
|
|
1295
1289
|
}, props)));
|
|
1296
1290
|
});
|
|
1297
1291
|
Chrome.displayName = 'Chrome';
|
|
1298
1292
|
Chrome.propTypes = {
|
|
1299
|
-
hue: PropTypes__default[
|
|
1293
|
+
hue: PropTypes__default["default"].string
|
|
1300
1294
|
};
|
|
1301
1295
|
|
|
1302
1296
|
var _excluded$9 = ["targetId", "zIndex", "children"];
|
|
1303
|
-
var SkipNav = React__default[
|
|
1297
|
+
var SkipNav = React__default["default"].forwardRef(function (_ref, ref) {
|
|
1304
1298
|
var targetId = _ref.targetId,
|
|
1305
1299
|
zIndex = _ref.zIndex,
|
|
1306
1300
|
children = _ref.children,
|
|
1307
1301
|
props = _objectWithoutProperties(_ref, _excluded$9);
|
|
1308
|
-
return React__default[
|
|
1302
|
+
return React__default["default"].createElement(StyledSkipNav, _extends$3({
|
|
1309
1303
|
href: "#".concat(targetId),
|
|
1310
1304
|
zIndex: zIndex,
|
|
1311
1305
|
ref: ref
|
|
1312
|
-
}, props), React__default[
|
|
1306
|
+
}, props), React__default["default"].createElement(StyledSkipNavIcon, null), children);
|
|
1313
1307
|
});
|
|
1314
1308
|
SkipNav.displayName = 'SkipNav';
|
|
1315
1309
|
SkipNav.propTypes = {
|
|
1316
|
-
targetId: PropTypes__default[
|
|
1317
|
-
zIndex: PropTypes__default[
|
|
1310
|
+
targetId: PropTypes__default["default"].string.isRequired,
|
|
1311
|
+
zIndex: PropTypes__default["default"].number
|
|
1318
1312
|
};
|
|
1319
1313
|
SkipNav.defaultProps = {
|
|
1320
1314
|
zIndex: 1
|
|
1321
1315
|
};
|
|
1322
1316
|
|
|
1323
|
-
var BodyContext = React__default[
|
|
1317
|
+
var BodyContext = React__default["default"].createContext({
|
|
1324
1318
|
hasFooter: true
|
|
1325
1319
|
});
|
|
1326
1320
|
var useBodyContext = function useBodyContext() {
|
|
@@ -1328,7 +1322,7 @@ var useBodyContext = function useBodyContext() {
|
|
|
1328
1322
|
};
|
|
1329
1323
|
|
|
1330
1324
|
var _excluded$8 = ["hasFooter"];
|
|
1331
|
-
var Body = React__default[
|
|
1325
|
+
var Body$1 = React__default["default"].forwardRef(function (_ref, ref) {
|
|
1332
1326
|
var hasFooter = _ref.hasFooter,
|
|
1333
1327
|
props = _objectWithoutProperties(_ref, _excluded$8);
|
|
1334
1328
|
var bodyContextValue = React.useMemo(function () {
|
|
@@ -1336,128 +1330,135 @@ var Body = React__default['default'].forwardRef(function (_ref, ref) {
|
|
|
1336
1330
|
hasFooter: !!hasFooter
|
|
1337
1331
|
};
|
|
1338
1332
|
}, [hasFooter]);
|
|
1339
|
-
return React__default[
|
|
1333
|
+
return React__default["default"].createElement(BodyContext.Provider, {
|
|
1340
1334
|
value: bodyContextValue
|
|
1341
|
-
}, React__default[
|
|
1335
|
+
}, React__default["default"].createElement(StyledBody, _extends$3({
|
|
1342
1336
|
ref: ref
|
|
1343
1337
|
}, props)));
|
|
1344
1338
|
});
|
|
1345
|
-
Body.displayName = 'Body';
|
|
1346
|
-
Body.propTypes = {
|
|
1347
|
-
hasFooter: PropTypes__default[
|
|
1339
|
+
Body$1.displayName = 'Body';
|
|
1340
|
+
Body$1.propTypes = {
|
|
1341
|
+
hasFooter: PropTypes__default["default"].bool
|
|
1348
1342
|
};
|
|
1349
1343
|
|
|
1350
|
-
var Content = React__default[
|
|
1344
|
+
var Content = React__default["default"].forwardRef(function (props, ref) {
|
|
1351
1345
|
var _useBodyContext = useBodyContext(),
|
|
1352
1346
|
hasFooter = _useBodyContext.hasFooter;
|
|
1353
|
-
return React__default[
|
|
1347
|
+
return React__default["default"].createElement(StyledContent, _extends$3({
|
|
1354
1348
|
ref: ref,
|
|
1355
1349
|
hasFooter: hasFooter
|
|
1356
1350
|
}, props));
|
|
1357
1351
|
});
|
|
1358
1352
|
Content.displayName = 'Content';
|
|
1359
1353
|
|
|
1360
|
-
var Main = React__default[
|
|
1361
|
-
return React__default[
|
|
1354
|
+
var Main = React__default["default"].forwardRef(function (props, ref) {
|
|
1355
|
+
return React__default["default"].createElement(StyledMain, _extends$3({
|
|
1362
1356
|
ref: ref
|
|
1363
1357
|
}, props));
|
|
1364
1358
|
});
|
|
1365
1359
|
Main.displayName = 'Main';
|
|
1366
1360
|
|
|
1367
|
-
var Sidebar = React__default[
|
|
1368
|
-
return React__default[
|
|
1361
|
+
var Sidebar = React__default["default"].forwardRef(function (props, ref) {
|
|
1362
|
+
return React__default["default"].createElement(StyledSidebar, _extends$3({
|
|
1369
1363
|
ref: ref
|
|
1370
1364
|
}, props));
|
|
1371
1365
|
});
|
|
1372
1366
|
Sidebar.displayName = 'Sidebar';
|
|
1373
1367
|
|
|
1374
|
-
var Header = React__default[
|
|
1375
|
-
return React__default[
|
|
1368
|
+
var Header$1 = React__default["default"].forwardRef(function (props, ref) {
|
|
1369
|
+
return React__default["default"].createElement(StyledHeader, _extends$3({
|
|
1376
1370
|
ref: ref
|
|
1377
1371
|
}, props));
|
|
1378
1372
|
});
|
|
1379
|
-
Header.displayName = 'Header';
|
|
1380
|
-
Header.propTypes = {
|
|
1381
|
-
isStandalone: PropTypes__default[
|
|
1373
|
+
Header$1.displayName = 'Header';
|
|
1374
|
+
Header$1.propTypes = {
|
|
1375
|
+
isStandalone: PropTypes__default["default"].bool
|
|
1382
1376
|
};
|
|
1383
1377
|
|
|
1384
1378
|
var PRODUCTS = ['chat', 'connect', 'explore', 'guide', 'message', 'support', 'talk'];
|
|
1385
1379
|
|
|
1386
1380
|
var _excluded$7 = ["hasLogo", "product"];
|
|
1387
|
-
var HeaderItem = React__default[
|
|
1381
|
+
var HeaderItem = React__default["default"].forwardRef(function (_ref, ref) {
|
|
1388
1382
|
var hasLogo = _ref.hasLogo,
|
|
1389
1383
|
product = _ref.product,
|
|
1390
1384
|
other = _objectWithoutProperties(_ref, _excluded$7);
|
|
1391
1385
|
if (hasLogo) {
|
|
1392
|
-
return React__default[
|
|
1386
|
+
return React__default["default"].createElement(StyledLogoHeaderItem, _extends$3({
|
|
1393
1387
|
ref: ref,
|
|
1394
1388
|
product: product
|
|
1395
1389
|
}, other));
|
|
1396
1390
|
}
|
|
1397
|
-
return React__default[
|
|
1391
|
+
return React__default["default"].createElement(StyledHeaderItem, _extends$3({
|
|
1398
1392
|
ref: ref
|
|
1399
1393
|
}, other));
|
|
1400
1394
|
});
|
|
1401
1395
|
HeaderItem.displayName = 'HeaderItem';
|
|
1402
1396
|
HeaderItem.propTypes = {
|
|
1403
|
-
maxX: PropTypes__default[
|
|
1404
|
-
maxY: PropTypes__default[
|
|
1405
|
-
isRound: PropTypes__default[
|
|
1406
|
-
product: PropTypes__default[
|
|
1407
|
-
hasLogo: PropTypes__default[
|
|
1397
|
+
maxX: PropTypes__default["default"].bool,
|
|
1398
|
+
maxY: PropTypes__default["default"].bool,
|
|
1399
|
+
isRound: PropTypes__default["default"].bool,
|
|
1400
|
+
product: PropTypes__default["default"].oneOf(PRODUCTS),
|
|
1401
|
+
hasLogo: PropTypes__default["default"].bool
|
|
1408
1402
|
};
|
|
1409
1403
|
|
|
1410
|
-
var _excluded$6 = ["children"]
|
|
1404
|
+
var _excluded$6 = ["children"],
|
|
1405
|
+
_excluded2$1 = ["theme"];
|
|
1411
1406
|
var HeaderItemIcon = function HeaderItemIcon(_ref) {
|
|
1412
1407
|
var children = _ref.children,
|
|
1413
1408
|
props = _objectWithoutProperties(_ref, _excluded$6);
|
|
1414
|
-
var
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
|
|
1419
|
-
|
|
1409
|
+
var element = React.Children.only(children);
|
|
1410
|
+
if ( React.isValidElement(element)) {
|
|
1411
|
+
var Icon = function Icon(_ref2) {
|
|
1412
|
+
_ref2.theme;
|
|
1413
|
+
var iconProps = _objectWithoutProperties(_ref2, _excluded2$1);
|
|
1414
|
+
return React.cloneElement(element, _objectSpread2(_objectSpread2({}, props), iconProps));
|
|
1415
|
+
};
|
|
1416
|
+
return React__default["default"].createElement(StyledHeaderItemIcon, _extends$3({
|
|
1417
|
+
as: Icon
|
|
1418
|
+
}, props));
|
|
1419
|
+
}
|
|
1420
|
+
return null;
|
|
1420
1421
|
};
|
|
1421
1422
|
|
|
1422
|
-
var HeaderItemText = React__default[
|
|
1423
|
-
return React__default[
|
|
1423
|
+
var HeaderItemText = React__default["default"].forwardRef(function (props, ref) {
|
|
1424
|
+
return React__default["default"].createElement(StyledHeaderItemText, _extends$3({
|
|
1424
1425
|
ref: ref
|
|
1425
1426
|
}, props));
|
|
1426
1427
|
});
|
|
1427
1428
|
HeaderItemText.displayName = 'HeaderItemText';
|
|
1428
1429
|
HeaderItemText.propTypes = {
|
|
1429
|
-
isClipped: PropTypes__default[
|
|
1430
|
+
isClipped: PropTypes__default["default"].bool
|
|
1430
1431
|
};
|
|
1431
1432
|
|
|
1432
|
-
var HeaderItemWrapper = React__default[
|
|
1433
|
-
return React__default[
|
|
1433
|
+
var HeaderItemWrapper = React__default["default"].forwardRef(function (props, ref) {
|
|
1434
|
+
return React__default["default"].createElement(StyledHeaderItemWrapper, _extends$3({
|
|
1434
1435
|
ref: ref
|
|
1435
1436
|
}, props));
|
|
1436
1437
|
});
|
|
1437
1438
|
HeaderItemWrapper.displayName = 'HeaderItemWrapper';
|
|
1438
1439
|
|
|
1439
|
-
var Footer = React__default[
|
|
1440
|
-
return React__default[
|
|
1440
|
+
var Footer$1 = React__default["default"].forwardRef(function (props, ref) {
|
|
1441
|
+
return React__default["default"].createElement(StyledFooter, _extends$3({
|
|
1441
1442
|
ref: ref
|
|
1442
1443
|
}, props));
|
|
1443
1444
|
});
|
|
1444
|
-
Footer.displayName = 'Footer';
|
|
1445
|
+
Footer$1.displayName = 'Footer';
|
|
1445
1446
|
|
|
1446
|
-
var FooterItem = React__default[
|
|
1447
|
-
return React__default[
|
|
1447
|
+
var FooterItem$1 = React__default["default"].forwardRef(function (props, ref) {
|
|
1448
|
+
return React__default["default"].createElement(StyledFooterItem, _extends$3({
|
|
1448
1449
|
ref: ref
|
|
1449
1450
|
}, props));
|
|
1450
1451
|
});
|
|
1451
|
-
FooterItem.displayName = 'FooterItem';
|
|
1452
|
+
FooterItem$1.displayName = 'FooterItem';
|
|
1452
1453
|
|
|
1453
|
-
var NavContext = React__default[
|
|
1454
|
+
var NavContext = React__default["default"].createContext({
|
|
1454
1455
|
isExpanded: false
|
|
1455
1456
|
});
|
|
1456
1457
|
var useNavContext = function useNavContext() {
|
|
1457
1458
|
return React.useContext(NavContext);
|
|
1458
1459
|
};
|
|
1459
1460
|
|
|
1460
|
-
var Nav = React__default[
|
|
1461
|
+
var Nav = React__default["default"].forwardRef(function (props, ref) {
|
|
1461
1462
|
var _useChromeContext = useChromeContext(),
|
|
1462
1463
|
hue = _useChromeContext.hue,
|
|
1463
1464
|
isLight = _useChromeContext.isLight,
|
|
@@ -1467,9 +1468,9 @@ var Nav = React__default['default'].forwardRef(function (props, ref) {
|
|
|
1467
1468
|
isExpanded: !!props.isExpanded
|
|
1468
1469
|
};
|
|
1469
1470
|
}, [props.isExpanded]);
|
|
1470
|
-
return React__default[
|
|
1471
|
+
return React__default["default"].createElement(NavContext.Provider, {
|
|
1471
1472
|
value: navContextValue
|
|
1472
|
-
}, React__default[
|
|
1473
|
+
}, React__default["default"].createElement(StyledNav, _extends$3({
|
|
1473
1474
|
ref: ref
|
|
1474
1475
|
}, props, {
|
|
1475
1476
|
hue: hue,
|
|
@@ -1479,11 +1480,11 @@ var Nav = React__default['default'].forwardRef(function (props, ref) {
|
|
|
1479
1480
|
});
|
|
1480
1481
|
Nav.displayName = 'Nav';
|
|
1481
1482
|
Nav.propTypes = {
|
|
1482
|
-
isExpanded: PropTypes__default[
|
|
1483
|
+
isExpanded: PropTypes__default["default"].bool
|
|
1483
1484
|
};
|
|
1484
1485
|
|
|
1485
1486
|
var _excluded$5 = ["hasLogo", "hasBrandmark", "product"];
|
|
1486
|
-
var NavItem = React__default[
|
|
1487
|
+
var NavItem = React__default["default"].forwardRef(function (_ref, ref) {
|
|
1487
1488
|
var hasLogo = _ref.hasLogo,
|
|
1488
1489
|
hasBrandmark = _ref.hasBrandmark,
|
|
1489
1490
|
product = _ref.product,
|
|
@@ -1495,7 +1496,7 @@ var NavItem = React__default['default'].forwardRef(function (_ref, ref) {
|
|
|
1495
1496
|
var _useNavContext = useNavContext(),
|
|
1496
1497
|
isExpanded = _useNavContext.isExpanded;
|
|
1497
1498
|
if (hasLogo) {
|
|
1498
|
-
return React__default[
|
|
1499
|
+
return React__default["default"].createElement(StyledLogoNavItem, _extends$3({
|
|
1499
1500
|
ref: ref,
|
|
1500
1501
|
isDark: isDark,
|
|
1501
1502
|
isLight: isLight,
|
|
@@ -1503,11 +1504,11 @@ var NavItem = React__default['default'].forwardRef(function (_ref, ref) {
|
|
|
1503
1504
|
}, other));
|
|
1504
1505
|
}
|
|
1505
1506
|
if (hasBrandmark) {
|
|
1506
|
-
return React__default[
|
|
1507
|
+
return React__default["default"].createElement(StyledBrandmarkNavItem, _extends$3({
|
|
1507
1508
|
ref: ref
|
|
1508
1509
|
}, other));
|
|
1509
1510
|
}
|
|
1510
|
-
return React__default[
|
|
1511
|
+
return React__default["default"].createElement(StyledNavItem, _extends$3({
|
|
1511
1512
|
tabIndex: 0,
|
|
1512
1513
|
ref: ref,
|
|
1513
1514
|
isExpanded: isExpanded,
|
|
@@ -1518,43 +1519,50 @@ var NavItem = React__default['default'].forwardRef(function (_ref, ref) {
|
|
|
1518
1519
|
});
|
|
1519
1520
|
NavItem.displayName = 'NavItem';
|
|
1520
1521
|
NavItem.propTypes = {
|
|
1521
|
-
product: PropTypes__default[
|
|
1522
|
-
hasLogo: PropTypes__default[
|
|
1523
|
-
hasBrandmark: PropTypes__default[
|
|
1524
|
-
isCurrent: PropTypes__default[
|
|
1522
|
+
product: PropTypes__default["default"].oneOf(PRODUCTS),
|
|
1523
|
+
hasLogo: PropTypes__default["default"].bool,
|
|
1524
|
+
hasBrandmark: PropTypes__default["default"].bool,
|
|
1525
|
+
isCurrent: PropTypes__default["default"].bool
|
|
1525
1526
|
};
|
|
1526
1527
|
|
|
1527
|
-
var _excluded$4 = ["children"]
|
|
1528
|
+
var _excluded$4 = ["children"],
|
|
1529
|
+
_excluded2 = ["theme"];
|
|
1528
1530
|
var NavItemIcon = function NavItemIcon(_ref) {
|
|
1529
1531
|
var children = _ref.children,
|
|
1530
1532
|
props = _objectWithoutProperties(_ref, _excluded$4);
|
|
1531
|
-
var
|
|
1532
|
-
|
|
1533
|
-
|
|
1534
|
-
|
|
1535
|
-
|
|
1536
|
-
|
|
1533
|
+
var element = React.Children.only(children);
|
|
1534
|
+
if ( React.isValidElement(element)) {
|
|
1535
|
+
var Icon = function Icon(_ref2) {
|
|
1536
|
+
_ref2.theme;
|
|
1537
|
+
var iconProps = _objectWithoutProperties(_ref2, _excluded2);
|
|
1538
|
+
return React.cloneElement(element, _objectSpread2(_objectSpread2({}, props), iconProps));
|
|
1539
|
+
};
|
|
1540
|
+
return React__default["default"].createElement(StyledNavItemIcon, _extends$3({
|
|
1541
|
+
as: Icon
|
|
1542
|
+
}, props));
|
|
1543
|
+
}
|
|
1544
|
+
return null;
|
|
1537
1545
|
};
|
|
1538
1546
|
|
|
1539
|
-
var NavItemText = React__default[
|
|
1547
|
+
var NavItemText = React__default["default"].forwardRef(function (props, ref) {
|
|
1540
1548
|
var _useNavContext = useNavContext(),
|
|
1541
1549
|
isExpanded = _useNavContext.isExpanded;
|
|
1542
|
-
return React__default[
|
|
1550
|
+
return React__default["default"].createElement(StyledNavItemText, _extends$3({
|
|
1543
1551
|
ref: ref,
|
|
1544
1552
|
isExpanded: isExpanded
|
|
1545
1553
|
}, props));
|
|
1546
1554
|
});
|
|
1547
1555
|
NavItemText.displayName = 'NavItemText';
|
|
1548
1556
|
NavItemText.propTypes = {
|
|
1549
|
-
isWrapped: PropTypes__default[
|
|
1557
|
+
isWrapped: PropTypes__default["default"].bool
|
|
1550
1558
|
};
|
|
1551
1559
|
|
|
1552
|
-
var SubNav = React__default[
|
|
1560
|
+
var SubNav = React__default["default"].forwardRef(function (props, ref) {
|
|
1553
1561
|
var _useChromeContext = useChromeContext(),
|
|
1554
1562
|
hue = _useChromeContext.hue,
|
|
1555
1563
|
isLight = _useChromeContext.isLight,
|
|
1556
1564
|
isDark = _useChromeContext.isDark;
|
|
1557
|
-
return React__default[
|
|
1565
|
+
return React__default["default"].createElement(StyledSubNav, _extends$3({
|
|
1558
1566
|
ref: ref,
|
|
1559
1567
|
hue: hue,
|
|
1560
1568
|
isLight: isLight,
|
|
@@ -1563,11 +1571,11 @@ var SubNav = React__default['default'].forwardRef(function (props, ref) {
|
|
|
1563
1571
|
});
|
|
1564
1572
|
SubNav.displayName = 'SubNav';
|
|
1565
1573
|
|
|
1566
|
-
var SubNavItem = React__default[
|
|
1574
|
+
var SubNavItem = React__default["default"].forwardRef(function (props, ref) {
|
|
1567
1575
|
var _useChromeContext = useChromeContext(),
|
|
1568
1576
|
isDark = _useChromeContext.isDark,
|
|
1569
1577
|
isLight = _useChromeContext.isLight;
|
|
1570
|
-
return React__default[
|
|
1578
|
+
return React__default["default"].createElement(StyledSubNavItem, _extends$3({
|
|
1571
1579
|
ref: ref,
|
|
1572
1580
|
isDark: isDark,
|
|
1573
1581
|
isLight: isLight
|
|
@@ -1575,21 +1583,21 @@ var SubNavItem = React__default['default'].forwardRef(function (props, ref) {
|
|
|
1575
1583
|
});
|
|
1576
1584
|
SubNavItem.displayName = 'SubNavItem';
|
|
1577
1585
|
SubNavItem.propTypes = {
|
|
1578
|
-
isCurrent: PropTypes__default[
|
|
1586
|
+
isCurrent: PropTypes__default["default"].bool
|
|
1579
1587
|
};
|
|
1580
1588
|
|
|
1581
|
-
var SubNavItemText = React__default[
|
|
1582
|
-
return React__default[
|
|
1589
|
+
var SubNavItemText = React__default["default"].forwardRef(function (props, ref) {
|
|
1590
|
+
return React__default["default"].createElement(StyledSubNavItemText, _extends$3({
|
|
1583
1591
|
ref: ref
|
|
1584
1592
|
}, props));
|
|
1585
1593
|
});
|
|
1586
1594
|
SubNavItemText.displayName = 'SubNavItemText';
|
|
1587
1595
|
SubNavItemText.propTypes = {
|
|
1588
|
-
isWrapped: PropTypes__default[
|
|
1596
|
+
isWrapped: PropTypes__default["default"].bool
|
|
1589
1597
|
};
|
|
1590
1598
|
|
|
1591
1599
|
var _excluded$3 = ["header", "children", "isExpanded", "onChange"];
|
|
1592
|
-
var CollapsibleSubNavItem = React__default[
|
|
1600
|
+
var CollapsibleSubNavItem = React__default["default"].forwardRef(function (_ref, ref) {
|
|
1593
1601
|
var header = _ref.header,
|
|
1594
1602
|
children = _ref.children,
|
|
1595
1603
|
controlledExpanded = _ref.isExpanded,
|
|
@@ -1621,31 +1629,34 @@ var CollapsibleSubNavItem = React__default['default'].forwardRef(function (_ref,
|
|
|
1621
1629
|
panelRef.current.style.maxHeight = "".concat(panelRef.current.scrollHeight, "px");
|
|
1622
1630
|
}
|
|
1623
1631
|
}, [expanded, children]);
|
|
1624
|
-
return React__default[
|
|
1632
|
+
return React__default["default"].createElement("div", {
|
|
1625
1633
|
ref: ref
|
|
1626
|
-
}, React__default[
|
|
1634
|
+
}, React__default["default"].createElement("div", getHeaderProps({
|
|
1627
1635
|
ariaLevel: 2
|
|
1628
|
-
}), React__default[
|
|
1636
|
+
}), React__default["default"].createElement(StyledSubNavItemHeader, getTriggerProps(_objectSpread2({
|
|
1629
1637
|
isExpanded: expanded,
|
|
1630
1638
|
index: 0,
|
|
1631
1639
|
role: null,
|
|
1632
1640
|
tabIndex: null
|
|
1633
|
-
}, other)), React__default[
|
|
1641
|
+
}, other)), React__default["default"].createElement(React__default["default"].Fragment, null, header, React__default["default"].createElement(StyledSubNavItemIconWrapper, {
|
|
1634
1642
|
isExpanded: expanded
|
|
1635
|
-
}, React__default[
|
|
1643
|
+
}, React__default["default"].createElement(StyledSubNavItemIcon, null))))), React__default["default"].createElement(StyledSubNavPanel, getPanelProps({
|
|
1636
1644
|
index: 0,
|
|
1637
1645
|
isHidden: !expanded,
|
|
1638
1646
|
ref: panelRef
|
|
1639
1647
|
}), children));
|
|
1640
1648
|
});
|
|
1641
1649
|
CollapsibleSubNavItem.propTypes = {
|
|
1642
|
-
header: PropTypes__default[
|
|
1643
|
-
isExpanded: PropTypes__default[
|
|
1644
|
-
onChange: PropTypes__default[
|
|
1645
|
-
children: PropTypes__default[
|
|
1650
|
+
header: PropTypes__default["default"].any,
|
|
1651
|
+
isExpanded: PropTypes__default["default"].bool,
|
|
1652
|
+
onChange: PropTypes__default["default"].func,
|
|
1653
|
+
children: PropTypes__default["default"].node
|
|
1646
1654
|
};
|
|
1655
|
+
CollapsibleSubNavItem.displayName = 'CollapsibleSubNavItem';
|
|
1647
1656
|
|
|
1648
|
-
var SheetContext = React.createContext({
|
|
1657
|
+
var SheetContext = React.createContext({
|
|
1658
|
+
setCloseButtonPresent: function setCloseButtonPresent() {}
|
|
1659
|
+
});
|
|
1649
1660
|
var useSheetContext = function useSheetContext() {
|
|
1650
1661
|
return React.useContext(SheetContext);
|
|
1651
1662
|
};
|
|
@@ -1692,12 +1703,13 @@ var SheetTitle = React.forwardRef(function (_ref, ref) {
|
|
|
1692
1703
|
props = _objectWithoutProperties(_ref, _excluded$2);
|
|
1693
1704
|
var _useSheetContext = useSheetContext(),
|
|
1694
1705
|
titleId = _useSheetContext.titleId;
|
|
1695
|
-
return React__default[
|
|
1706
|
+
return React__default["default"].createElement(StyledSheetTitle, _extends$3({
|
|
1696
1707
|
id: id || titleId,
|
|
1697
1708
|
ref: ref
|
|
1698
1709
|
}, props));
|
|
1699
1710
|
});
|
|
1700
1711
|
SheetTitle.displayName = 'Sheet.Title';
|
|
1712
|
+
var Title = SheetTitle;
|
|
1701
1713
|
|
|
1702
1714
|
var _excluded$1 = ["id"];
|
|
1703
1715
|
var SheetDescription = React.forwardRef(function (_ref, ref) {
|
|
@@ -1705,70 +1717,87 @@ var SheetDescription = React.forwardRef(function (_ref, ref) {
|
|
|
1705
1717
|
props = _objectWithoutProperties(_ref, _excluded$1);
|
|
1706
1718
|
var _useSheetContext = useSheetContext(),
|
|
1707
1719
|
descriptionId = _useSheetContext.descriptionId;
|
|
1708
|
-
return React__default[
|
|
1720
|
+
return React__default["default"].createElement(StyledSheetDescription, _extends$3({
|
|
1709
1721
|
id: id || descriptionId,
|
|
1710
1722
|
ref: ref
|
|
1711
1723
|
}, props));
|
|
1712
1724
|
});
|
|
1713
1725
|
SheetDescription.displayName = 'Sheet.Description';
|
|
1726
|
+
var Description = SheetDescription;
|
|
1714
1727
|
|
|
1715
1728
|
var SheetHeader = React.forwardRef(function (props, ref) {
|
|
1716
|
-
|
|
1717
|
-
|
|
1729
|
+
var _useSheetContext = useSheetContext(),
|
|
1730
|
+
isCloseButtonPresent = _useSheetContext.isCloseButtonPresent;
|
|
1731
|
+
return React__default["default"].createElement(StyledSheetHeader, _extends$3({
|
|
1732
|
+
ref: ref,
|
|
1733
|
+
isCloseButtonPresent: isCloseButtonPresent
|
|
1718
1734
|
}, props));
|
|
1719
1735
|
});
|
|
1720
1736
|
SheetHeader.displayName = 'Sheet.Header';
|
|
1737
|
+
var Header = SheetHeader;
|
|
1721
1738
|
|
|
1722
1739
|
var SheetBody = React.forwardRef(function (props, ref) {
|
|
1723
|
-
return React__default[
|
|
1740
|
+
return React__default["default"].createElement(StyledSheetBody, _extends$3({
|
|
1724
1741
|
ref: ref
|
|
1725
1742
|
}, props));
|
|
1726
1743
|
});
|
|
1727
1744
|
SheetBody.displayName = 'Sheet.Body';
|
|
1745
|
+
var Body = SheetBody;
|
|
1728
1746
|
|
|
1729
1747
|
var SheetFooter = React.forwardRef(function (props, ref) {
|
|
1730
|
-
return React__default[
|
|
1748
|
+
return React__default["default"].createElement(StyledSheetFooter, _extends$3({
|
|
1731
1749
|
ref: ref
|
|
1732
1750
|
}, props));
|
|
1733
1751
|
});
|
|
1734
1752
|
SheetFooter.displayName = 'Sheet.Footer';
|
|
1753
|
+
var Footer = SheetFooter;
|
|
1735
1754
|
|
|
1736
1755
|
var SheetFooterItem = React.forwardRef(function (props, ref) {
|
|
1737
|
-
return React__default[
|
|
1756
|
+
return React__default["default"].createElement(StyledSheetFooterItem, _extends$3({
|
|
1738
1757
|
ref: ref
|
|
1739
1758
|
}, props));
|
|
1740
1759
|
});
|
|
1741
1760
|
SheetFooterItem.displayName = 'Sheet.FooterItem';
|
|
1761
|
+
var FooterItem = SheetFooterItem;
|
|
1742
1762
|
|
|
1743
|
-
|
|
1763
|
+
var _path;
|
|
1744
1764
|
|
|
1745
|
-
var
|
|
1746
|
-
stroke: "currentColor",
|
|
1747
|
-
strokeLinecap: "round",
|
|
1748
|
-
d: "M3 13L13 3m0 10L3 3"
|
|
1749
|
-
});
|
|
1765
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
1750
1766
|
|
|
1751
|
-
function SvgXStroke(props) {
|
|
1767
|
+
var SvgXStroke = function SvgXStroke(props) {
|
|
1752
1768
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends({
|
|
1753
1769
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1754
1770
|
width: 16,
|
|
1755
1771
|
height: 16,
|
|
1756
|
-
viewBox: "0 0 16 16",
|
|
1757
1772
|
focusable: "false",
|
|
1758
|
-
|
|
1759
|
-
|
|
1760
|
-
}
|
|
1773
|
+
viewBox: "0 0 16 16",
|
|
1774
|
+
"aria-hidden": "true"
|
|
1775
|
+
}, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
|
|
1776
|
+
stroke: "currentColor",
|
|
1777
|
+
strokeLinecap: "round",
|
|
1778
|
+
d: "M3 13L13 3m0 10L3 3"
|
|
1779
|
+
})));
|
|
1780
|
+
};
|
|
1761
1781
|
|
|
1762
1782
|
var SheetClose = React.forwardRef(function (props, ref) {
|
|
1763
|
-
|
|
1783
|
+
var _useSheetContext = useSheetContext(),
|
|
1784
|
+
setCloseButtonPresent = _useSheetContext.setCloseButtonPresent;
|
|
1785
|
+
React.useEffect(function () {
|
|
1786
|
+
setCloseButtonPresent(true);
|
|
1787
|
+
return function () {
|
|
1788
|
+
return setCloseButtonPresent(false);
|
|
1789
|
+
};
|
|
1790
|
+
}, [setCloseButtonPresent]);
|
|
1791
|
+
return React__default["default"].createElement(StyledSheetClose, _extends$3({
|
|
1764
1792
|
"aria-label": "Close Sheet",
|
|
1765
1793
|
ref: ref
|
|
1766
|
-
}, props), React__default[
|
|
1794
|
+
}, props), React__default["default"].createElement(SvgXStroke, null));
|
|
1767
1795
|
});
|
|
1768
1796
|
SheetClose.displayName = 'Sheet.Close';
|
|
1797
|
+
var Close = SheetClose;
|
|
1769
1798
|
|
|
1770
1799
|
var _excluded = ["id", "isOpen", "isAnimated", "focusOnMount", "restoreFocus", "placement", "size", "children"];
|
|
1771
|
-
var
|
|
1800
|
+
var SheetComponent = React__default["default"].forwardRef(function (_ref, ref) {
|
|
1772
1801
|
var id = _ref.id,
|
|
1773
1802
|
isOpen = _ref.isOpen,
|
|
1774
1803
|
isAnimated = _ref.isAnimated,
|
|
@@ -1780,26 +1809,32 @@ var Sheet = React__default['default'].forwardRef(function (_ref, ref) {
|
|
|
1780
1809
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
1781
1810
|
var sheetRef = React.useRef(null);
|
|
1782
1811
|
var seed = reactUid.useUIDSeed();
|
|
1783
|
-
var _useState = React.useState(
|
|
1784
|
-
_useState2 = _slicedToArray(_useState,
|
|
1785
|
-
|
|
1812
|
+
var _useState = React.useState(false),
|
|
1813
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
1814
|
+
isCloseButtonPresent = _useState2[0],
|
|
1815
|
+
setCloseButtonPresent = _useState2[1];
|
|
1816
|
+
var _useState3 = React.useState(id || seed("sheet_".concat('8.48.1'))),
|
|
1817
|
+
_useState4 = _slicedToArray(_useState3, 1),
|
|
1818
|
+
idPrefix = _useState4[0];
|
|
1786
1819
|
var titleId = "".concat(idPrefix, "--title");
|
|
1787
1820
|
var descriptionId = "".concat(idPrefix, "--description");
|
|
1788
1821
|
var sheetContext = React.useMemo(function () {
|
|
1789
1822
|
return {
|
|
1790
1823
|
titleId: titleId,
|
|
1791
|
-
descriptionId: descriptionId
|
|
1824
|
+
descriptionId: descriptionId,
|
|
1825
|
+
isCloseButtonPresent: isCloseButtonPresent,
|
|
1826
|
+
setCloseButtonPresent: setCloseButtonPresent
|
|
1792
1827
|
};
|
|
1793
|
-
}, [titleId, descriptionId]);
|
|
1828
|
+
}, [titleId, descriptionId, isCloseButtonPresent]);
|
|
1794
1829
|
useFocusableMount({
|
|
1795
1830
|
targetRef: sheetRef,
|
|
1796
1831
|
isMounted: isOpen,
|
|
1797
1832
|
focusOnMount: focusOnMount,
|
|
1798
1833
|
restoreFocus: restoreFocus
|
|
1799
1834
|
});
|
|
1800
|
-
return React__default[
|
|
1835
|
+
return React__default["default"].createElement(SheetContext.Provider, {
|
|
1801
1836
|
value: sheetContext
|
|
1802
|
-
}, React__default[
|
|
1837
|
+
}, React__default["default"].createElement(StyledSheet, _extends$3({
|
|
1803
1838
|
isOpen: isOpen,
|
|
1804
1839
|
isAnimated: isAnimated,
|
|
1805
1840
|
placement: placement,
|
|
@@ -1808,47 +1843,45 @@ var Sheet = React__default['default'].forwardRef(function (_ref, ref) {
|
|
|
1808
1843
|
id: idPrefix,
|
|
1809
1844
|
"aria-labelledby": titleId,
|
|
1810
1845
|
"aria-describedby": descriptionId,
|
|
1811
|
-
ref: mergeRefs__default[
|
|
1812
|
-
}, props), React__default[
|
|
1846
|
+
ref: mergeRefs__default["default"]([sheetRef, ref])
|
|
1847
|
+
}, props), React__default["default"].createElement(StyledSheetWrapper, {
|
|
1813
1848
|
isOpen: isOpen,
|
|
1814
1849
|
isAnimated: isAnimated,
|
|
1815
1850
|
placement: placement,
|
|
1816
1851
|
size: size
|
|
1817
1852
|
}, children)));
|
|
1818
1853
|
});
|
|
1819
|
-
|
|
1820
|
-
|
|
1821
|
-
|
|
1822
|
-
|
|
1823
|
-
|
|
1824
|
-
|
|
1825
|
-
|
|
1826
|
-
|
|
1827
|
-
|
|
1828
|
-
|
|
1829
|
-
|
|
1830
|
-
isAnimated: PropTypes__default['default'].bool,
|
|
1831
|
-
focusOnMount: PropTypes__default['default'].bool,
|
|
1832
|
-
restoreFocus: PropTypes__default['default'].bool,
|
|
1833
|
-
placement: PropTypes__default['default'].oneOf(['start', 'end']),
|
|
1834
|
-
size: PropTypes__default['default'].string
|
|
1835
|
-
};
|
|
1836
|
-
Sheet.defaultProps = {
|
|
1837
|
-
isOpen: false,
|
|
1854
|
+
SheetComponent.displayName = 'Sheet';
|
|
1855
|
+
SheetComponent.propTypes = {
|
|
1856
|
+
id: PropTypes__default["default"].string,
|
|
1857
|
+
isOpen: PropTypes__default["default"].bool,
|
|
1858
|
+
isAnimated: PropTypes__default["default"].bool,
|
|
1859
|
+
focusOnMount: PropTypes__default["default"].bool,
|
|
1860
|
+
restoreFocus: PropTypes__default["default"].bool,
|
|
1861
|
+
placement: PropTypes__default["default"].oneOf(['start', 'end']),
|
|
1862
|
+
size: PropTypes__default["default"].string
|
|
1863
|
+
};
|
|
1864
|
+
SheetComponent.defaultProps = {
|
|
1838
1865
|
isAnimated: true,
|
|
1839
|
-
focusOnMount: false,
|
|
1840
|
-
restoreFocus: false,
|
|
1841
1866
|
placement: 'end',
|
|
1842
1867
|
size: '380px'
|
|
1843
1868
|
};
|
|
1869
|
+
var Sheet = SheetComponent;
|
|
1870
|
+
Sheet.Body = Body;
|
|
1871
|
+
Sheet.Close = Close;
|
|
1872
|
+
Sheet.Description = Description;
|
|
1873
|
+
Sheet.Footer = Footer;
|
|
1874
|
+
Sheet.FooterItem = FooterItem;
|
|
1875
|
+
Sheet.Header = Header;
|
|
1876
|
+
Sheet.Title = Title;
|
|
1844
1877
|
|
|
1845
|
-
exports.Body = Body;
|
|
1878
|
+
exports.Body = Body$1;
|
|
1846
1879
|
exports.Chrome = Chrome;
|
|
1847
1880
|
exports.CollapsibleSubNavItem = CollapsibleSubNavItem;
|
|
1848
1881
|
exports.Content = Content;
|
|
1849
|
-
exports.Footer = Footer;
|
|
1850
|
-
exports.FooterItem = FooterItem;
|
|
1851
|
-
exports.Header = Header;
|
|
1882
|
+
exports.Footer = Footer$1;
|
|
1883
|
+
exports.FooterItem = FooterItem$1;
|
|
1884
|
+
exports.Header = Header$1;
|
|
1852
1885
|
exports.HeaderItem = HeaderItem;
|
|
1853
1886
|
exports.HeaderItemIcon = HeaderItemIcon;
|
|
1854
1887
|
exports.HeaderItemText = HeaderItemText;
|
|
@@ -1858,6 +1891,7 @@ exports.Nav = Nav;
|
|
|
1858
1891
|
exports.NavItem = NavItem;
|
|
1859
1892
|
exports.NavItemIcon = NavItemIcon;
|
|
1860
1893
|
exports.NavItemText = NavItemText;
|
|
1894
|
+
exports.PRODUCTS = PRODUCTS;
|
|
1861
1895
|
exports.Sheet = Sheet;
|
|
1862
1896
|
exports.Sidebar = Sidebar;
|
|
1863
1897
|
exports.SkipNav = SkipNav;
|