@zendeskgarden/react-chrome 9.0.0-next.24 → 9.0.0-next.26
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/esm/elements/sheet/Sheet.js +2 -1
- package/dist/esm/styled/StyledChrome.js +2 -5
- package/dist/esm/styled/StyledSkipNav.js +2 -5
- package/dist/esm/styled/StyledSkipNavIcon.js +2 -5
- package/dist/esm/styled/body/StyledBody.js +2 -5
- package/dist/esm/styled/body/StyledContent.js +2 -5
- package/dist/esm/styled/body/StyledMain.js +2 -5
- package/dist/esm/styled/footer/StyledFooter.js +2 -5
- package/dist/esm/styled/footer/StyledFooterItem.js +2 -5
- package/dist/esm/styled/header/StyledBaseHeaderItem.js +2 -5
- package/dist/esm/styled/header/StyledHeader.js +2 -5
- package/dist/esm/styled/header/StyledHeaderItem.js +2 -5
- package/dist/esm/styled/header/StyledHeaderItemIcon.js +2 -5
- package/dist/esm/styled/header/StyledHeaderItemText.js +2 -5
- package/dist/esm/styled/header/StyledHeaderItemWrapper.js +2 -5
- package/dist/esm/styled/header/StyledLogoHeaderItem.js +2 -5
- package/dist/esm/styled/nav/StyledBaseNavItem.js +1 -5
- package/dist/esm/styled/nav/StyledBrandmarkNavItem.js +1 -5
- package/dist/esm/styled/nav/StyledLogoNavItem.js +2 -5
- package/dist/esm/styled/nav/StyledNav.js +2 -5
- package/dist/esm/styled/nav/StyledNavButton.js +2 -5
- package/dist/esm/styled/nav/StyledNavItemIcon.js +2 -5
- package/dist/esm/styled/nav/StyledNavItemText.js +2 -5
- package/dist/esm/styled/nav/StyledNavList.js +2 -5
- package/dist/esm/styled/nav/StyledNavListItem.js +2 -5
- package/dist/esm/styled/sheet/StyledSheet.js +2 -5
- package/dist/esm/styled/sheet/StyledSheetBody.js +2 -5
- package/dist/esm/styled/sheet/StyledSheetClose.js +2 -5
- package/dist/esm/styled/sheet/StyledSheetDescription.js +2 -5
- package/dist/esm/styled/sheet/StyledSheetFooter.js +2 -5
- package/dist/esm/styled/sheet/StyledSheetFooterItem.js +2 -5
- package/dist/esm/styled/sheet/StyledSheetHeader.js +2 -5
- package/dist/esm/styled/sheet/StyledSheetTitle.js +2 -5
- package/dist/esm/styled/sheet/StyledSheetWrapper.js +2 -5
- package/dist/index.cjs.js +35 -133
- package/dist/typings/styled/sheet/StyledSheet.d.ts +1 -0
- package/package.json +4 -4
package/dist/index.cjs.js
CHANGED
|
@@ -47,14 +47,11 @@ const PRODUCTS = ['chat', 'explore', 'guide', 'support', 'talk'];
|
|
|
47
47
|
const COMPONENT_ID$w = 'chrome.chrome';
|
|
48
48
|
const StyledChrome = styled__default.default.div.attrs({
|
|
49
49
|
'data-garden-id': COMPONENT_ID$w,
|
|
50
|
-
'data-garden-version': '9.0.0-next.
|
|
50
|
+
'data-garden-version': '9.0.0-next.26'
|
|
51
51
|
}).withConfig({
|
|
52
52
|
displayName: "StyledChrome",
|
|
53
53
|
componentId: "sc-1uqm6u6-0"
|
|
54
54
|
})(["display:flex;position:relative;margin:0;height:100vh;overflow-y:hidden;font-family:", ";direction:", ";", ";"], props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$w, props));
|
|
55
|
-
StyledChrome.defaultProps = {
|
|
56
|
-
theme: reactTheming.DEFAULT_THEME
|
|
57
|
-
};
|
|
58
55
|
|
|
59
56
|
const getFooterHeight = theme => `${theme.space.base * 20}px`;
|
|
60
57
|
const getHeaderHeight = theme => `${theme.space.base * 13}px`;
|
|
@@ -113,14 +110,11 @@ const sizeStyles$g = _ref2 => {
|
|
|
113
110
|
};
|
|
114
111
|
const StyledSkipNav = styled__default.default.a.attrs({
|
|
115
112
|
'data-garden-id': COMPONENT_ID$v,
|
|
116
|
-
'data-garden-version': '9.0.0-next.
|
|
113
|
+
'data-garden-version': '9.0.0-next.26'
|
|
117
114
|
}).withConfig({
|
|
118
115
|
displayName: "StyledSkipNav",
|
|
119
116
|
componentId: "sc-1tsro34-0"
|
|
120
117
|
})(["", ";display:inline-flex;position:absolute;left:50%;align-items:center;justify-content:center;transform:translateX(-50%);direction:", ";z-index:", ";border-radius:", ";text-decoration:underline;white-space:nowrap;", ";", "{text-decoration:none;}&:hover{text-decoration:underline;}", ";", ";"], animationStyles(), props => props.theme.rtl && 'rtl', props => props.zIndex, props => props.theme.borderRadii.md, sizeStyles$g, reactTheming.SELECTOR_FOCUS_VISIBLE, colorStyles$a, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$v, props));
|
|
121
|
-
StyledSkipNav.defaultProps = {
|
|
122
|
-
theme: reactTheming.DEFAULT_THEME
|
|
123
|
-
};
|
|
124
118
|
|
|
125
119
|
var _path$1;
|
|
126
120
|
function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
|
|
@@ -149,7 +143,7 @@ const sizeStyles$f = _ref => {
|
|
|
149
143
|
};
|
|
150
144
|
const StyledSkipNavIcon = styled__default.default(SvgLinkStroke).attrs({
|
|
151
145
|
'data-garden-id': COMPONENT_ID$u,
|
|
152
|
-
'data-garden-version': '9.0.0-next.
|
|
146
|
+
'data-garden-version': '9.0.0-next.26'
|
|
153
147
|
}).withConfig({
|
|
154
148
|
displayName: "StyledSkipNavIcon",
|
|
155
149
|
componentId: "sc-1ika5z4-0"
|
|
@@ -157,14 +151,11 @@ const StyledSkipNavIcon = styled__default.default(SvgLinkStroke).attrs({
|
|
|
157
151
|
theme: p.theme,
|
|
158
152
|
variable: 'foreground.subtle'
|
|
159
153
|
}), sizeStyles$f, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$u, props));
|
|
160
|
-
StyledSkipNavIcon.defaultProps = {
|
|
161
|
-
theme: reactTheming.DEFAULT_THEME
|
|
162
|
-
};
|
|
163
154
|
|
|
164
155
|
const COMPONENT_ID$t = 'chrome.body';
|
|
165
156
|
const StyledBody = styled__default.default.div.attrs({
|
|
166
157
|
'data-garden-id': COMPONENT_ID$t,
|
|
167
|
-
'data-garden-version': '9.0.0-next.
|
|
158
|
+
'data-garden-version': '9.0.0-next.26'
|
|
168
159
|
}).withConfig({
|
|
169
160
|
displayName: "StyledBody",
|
|
170
161
|
componentId: "sc-c7h9kv-0"
|
|
@@ -172,9 +163,6 @@ const StyledBody = styled__default.default.div.attrs({
|
|
|
172
163
|
theme: props.theme,
|
|
173
164
|
variable: 'background.default'
|
|
174
165
|
}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$t, props));
|
|
175
|
-
StyledBody.defaultProps = {
|
|
176
|
-
theme: reactTheming.DEFAULT_THEME
|
|
177
|
-
};
|
|
178
166
|
|
|
179
167
|
const COMPONENT_ID$s = 'chrome.content';
|
|
180
168
|
const sizeStyles$e = _ref => {
|
|
@@ -189,7 +177,7 @@ const sizeStyles$e = _ref => {
|
|
|
189
177
|
};
|
|
190
178
|
const StyledContent = styled__default.default.div.attrs({
|
|
191
179
|
'data-garden-id': COMPONENT_ID$s,
|
|
192
|
-
'data-garden-version': '9.0.0-next.
|
|
180
|
+
'data-garden-version': '9.0.0-next.26'
|
|
193
181
|
}).withConfig({
|
|
194
182
|
displayName: "StyledContent",
|
|
195
183
|
componentId: "sc-qcuzxn-0"
|
|
@@ -197,14 +185,11 @@ const StyledContent = styled__default.default.div.attrs({
|
|
|
197
185
|
theme: props.theme,
|
|
198
186
|
variable: 'foreground.default'
|
|
199
187
|
}), sizeStyles$e, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$s, props));
|
|
200
|
-
StyledContent.defaultProps = {
|
|
201
|
-
theme: reactTheming.DEFAULT_THEME
|
|
202
|
-
};
|
|
203
188
|
|
|
204
189
|
const COMPONENT_ID$r = 'chrome.main';
|
|
205
190
|
const StyledMain = styled__default.default.main.attrs({
|
|
206
191
|
'data-garden-id': COMPONENT_ID$r,
|
|
207
|
-
'data-garden-version': '9.0.0-next.
|
|
192
|
+
'data-garden-version': '9.0.0-next.26'
|
|
208
193
|
}).withConfig({
|
|
209
194
|
displayName: "StyledMain",
|
|
210
195
|
componentId: "sc-t61cre-0"
|
|
@@ -212,9 +197,6 @@ const StyledMain = styled__default.default.main.attrs({
|
|
|
212
197
|
theme: props.theme,
|
|
213
198
|
variable: 'background.default'
|
|
214
199
|
}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$r, props));
|
|
215
|
-
StyledMain.defaultProps = {
|
|
216
|
-
theme: reactTheming.DEFAULT_THEME
|
|
217
|
-
};
|
|
218
200
|
|
|
219
201
|
const COMPONENT_ID$q = 'chrome.footer';
|
|
220
202
|
const colorStyles$9 = _ref => {
|
|
@@ -242,26 +224,20 @@ const sizeStyles$d = _ref2 => {
|
|
|
242
224
|
};
|
|
243
225
|
const StyledFooter = styled__default.default.footer.attrs({
|
|
244
226
|
'data-garden-id': COMPONENT_ID$q,
|
|
245
|
-
'data-garden-version': '9.0.0-next.
|
|
227
|
+
'data-garden-version': '9.0.0-next.26'
|
|
246
228
|
}).withConfig({
|
|
247
229
|
displayName: "StyledFooter",
|
|
248
230
|
componentId: "sc-v7lib2-0"
|
|
249
231
|
})(["display:flex;align-items:center;justify-content:flex-end;", ";", ";", ";"], sizeStyles$d, colorStyles$9, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$q, props));
|
|
250
|
-
StyledFooter.defaultProps = {
|
|
251
|
-
theme: reactTheming.DEFAULT_THEME
|
|
252
|
-
};
|
|
253
232
|
|
|
254
233
|
const COMPONENT_ID$p = 'chrome.footer_item';
|
|
255
234
|
const StyledFooterItem = styled__default.default.div.attrs({
|
|
256
235
|
'data-garden-id': COMPONENT_ID$p,
|
|
257
|
-
'data-garden-version': '9.0.0-next.
|
|
236
|
+
'data-garden-version': '9.0.0-next.26'
|
|
258
237
|
}).withConfig({
|
|
259
238
|
displayName: "StyledFooterItem",
|
|
260
239
|
componentId: "sc-1cktm85-0"
|
|
261
240
|
})(["margin:", ";", ";"], props => `0 ${props.theme.space.base}px`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$p, props));
|
|
262
|
-
StyledFooterItem.defaultProps = {
|
|
263
|
-
theme: reactTheming.DEFAULT_THEME
|
|
264
|
-
};
|
|
265
241
|
|
|
266
242
|
const COMPONENT_ID$o = 'chrome.header_item_icon';
|
|
267
243
|
const sizeStyles$c = _ref => {
|
|
@@ -274,14 +250,11 @@ const sizeStyles$c = _ref => {
|
|
|
274
250
|
};
|
|
275
251
|
const StyledHeaderItemIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
|
|
276
252
|
'data-garden-id': COMPONENT_ID$o,
|
|
277
|
-
'data-garden-version': '9.0.0-next.
|
|
253
|
+
'data-garden-version': '9.0.0-next.26'
|
|
278
254
|
}).withConfig({
|
|
279
255
|
displayName: "StyledHeaderItemIcon",
|
|
280
256
|
componentId: "sc-1jhhp6z-0"
|
|
281
257
|
})(["transition:transform 0.25s ease-in-out;", ";", ";"], sizeStyles$c, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$o, props));
|
|
282
|
-
StyledHeaderItemIcon.defaultProps = {
|
|
283
|
-
theme: reactTheming.DEFAULT_THEME
|
|
284
|
-
};
|
|
285
258
|
|
|
286
259
|
const COMPONENT_ID$n = 'chrome.base_header_item';
|
|
287
260
|
const sizeStyles$b = _ref => {
|
|
@@ -307,26 +280,20 @@ const sizeStyles$b = _ref => {
|
|
|
307
280
|
};
|
|
308
281
|
const StyledBaseHeaderItem = styled__default.default.button.attrs({
|
|
309
282
|
'data-garden-id': COMPONENT_ID$n,
|
|
310
|
-
'data-garden-version': '9.0.0-next.
|
|
283
|
+
'data-garden-version': '9.0.0-next.26'
|
|
311
284
|
}).withConfig({
|
|
312
285
|
displayName: "StyledBaseHeaderItem",
|
|
313
286
|
componentId: "sc-1qua7h6-0"
|
|
314
287
|
})(["display:inline-flex;position:relative;flex:", ";align-items:center;justify-content:", ";order:1;transition:box-shadow 0.1s ease-in-out,color 0.1s ease-in-out;z-index:0;border:none;background:transparent;text-decoration:none;white-space:nowrap;color:inherit;", ";", ";"], props => props.maxX && '1', props => props.maxX ? 'start' : 'center', sizeStyles$b, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$n, props));
|
|
315
|
-
StyledBaseHeaderItem.defaultProps = {
|
|
316
|
-
theme: reactTheming.DEFAULT_THEME
|
|
317
|
-
};
|
|
318
288
|
|
|
319
289
|
const COMPONENT_ID$m = 'chrome.header_item_text';
|
|
320
290
|
const StyledHeaderItemText = styled__default.default.span.attrs({
|
|
321
291
|
'data-garden-id': COMPONENT_ID$m,
|
|
322
|
-
'data-garden-version': '9.0.0-next.
|
|
292
|
+
'data-garden-version': '9.0.0-next.26'
|
|
323
293
|
}).withConfig({
|
|
324
294
|
displayName: "StyledHeaderItemText",
|
|
325
295
|
componentId: "sc-goz7la-0"
|
|
326
296
|
})(["margin:", ";", " ", ";"], props => `0 ${props.theme.space.base * 0.75}px`, props => props.isClipped && polished.hideVisually(), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$m, props));
|
|
327
|
-
StyledHeaderItemText.defaultProps = {
|
|
328
|
-
theme: reactTheming.DEFAULT_THEME
|
|
329
|
-
};
|
|
330
297
|
|
|
331
298
|
const COMPONENT_ID$l = 'chrome.header_item';
|
|
332
299
|
const colorStyles$8 = _ref => {
|
|
@@ -358,15 +325,12 @@ const sizeStyles$a = _ref2 => {
|
|
|
358
325
|
};
|
|
359
326
|
const StyledLogoHeaderItem = styled__default.default(StyledBaseHeaderItem).attrs({
|
|
360
327
|
'data-garden-id': COMPONENT_ID$l,
|
|
361
|
-
'data-garden-version': '9.0.0-next.
|
|
328
|
+
'data-garden-version': '9.0.0-next.26',
|
|
362
329
|
as: 'div'
|
|
363
330
|
}).withConfig({
|
|
364
331
|
displayName: "StyledLogoHeaderItem",
|
|
365
332
|
componentId: "sc-1n1d1yv-0"
|
|
366
333
|
})(["display:none;order:0;border-radius:0;padding:0;overflow:hidden;text-decoration:none;", ";", ";", "{", "}", ";"], sizeStyles$a, colorStyles$8, StyledHeaderItemText, polished.hideVisually(), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$l, props));
|
|
367
|
-
StyledLogoHeaderItem.defaultProps = {
|
|
368
|
-
theme: reactTheming.DEFAULT_THEME
|
|
369
|
-
};
|
|
370
334
|
|
|
371
335
|
const COMPONENT_ID$k = 'chrome.header';
|
|
372
336
|
const colorStyles$7 = _ref => {
|
|
@@ -405,14 +369,11 @@ const sizeStyles$9 = _ref2 => {
|
|
|
405
369
|
};
|
|
406
370
|
const StyledHeader = styled__default.default.header.attrs({
|
|
407
371
|
'data-garden-id': COMPONENT_ID$k,
|
|
408
|
-
'data-garden-version': '9.0.0-next.
|
|
372
|
+
'data-garden-version': '9.0.0-next.26'
|
|
409
373
|
}).withConfig({
|
|
410
374
|
displayName: "StyledHeader",
|
|
411
375
|
componentId: "sc-1cexpz-0"
|
|
412
376
|
})(["display:flex;position:", ";align-items:center;justify-content:flex-end;", ";", ";", "{display:", ";}", ";"], props => props.isStandalone && 'relative', sizeStyles$9, colorStyles$7, StyledLogoHeaderItem, props => props.isStandalone && 'inline-flex', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$k, props));
|
|
413
|
-
StyledHeader.defaultProps = {
|
|
414
|
-
theme: reactTheming.DEFAULT_THEME
|
|
415
|
-
};
|
|
416
377
|
|
|
417
378
|
const COMPONENT_ID$j = 'chrome.header_item';
|
|
418
379
|
const colorStyles$6 = _ref => {
|
|
@@ -459,27 +420,21 @@ const sizeStyles$8 = _ref2 => {
|
|
|
459
420
|
};
|
|
460
421
|
const StyledHeaderItem = styled__default.default(StyledBaseHeaderItem).attrs({
|
|
461
422
|
'data-garden-id': COMPONENT_ID$j,
|
|
462
|
-
'data-garden-version': '9.0.0-next.
|
|
423
|
+
'data-garden-version': '9.0.0-next.26'
|
|
463
424
|
}).withConfig({
|
|
464
425
|
displayName: "StyledHeaderItem",
|
|
465
426
|
componentId: "sc-14sft6n-0"
|
|
466
427
|
})(["cursor:pointer;&:hover,&:focus{text-decoration:none;}", ";", ";& ", ",& ", "{transition:box-shadow 0.1s ease-in-out,color 0.1s ease-in-out;}", ";"], sizeStyles$8, colorStyles$6, StyledHeaderItemIcon, StyledHeaderItemText, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$j, props));
|
|
467
|
-
StyledHeaderItem.defaultProps = {
|
|
468
|
-
theme: reactTheming.DEFAULT_THEME
|
|
469
|
-
};
|
|
470
428
|
|
|
471
429
|
const COMPONENT_ID$i = 'chrome.header_item_wrapper';
|
|
472
430
|
const StyledHeaderItemWrapper = styled__default.default(StyledBaseHeaderItem).attrs({
|
|
473
431
|
'data-garden-id': COMPONENT_ID$i,
|
|
474
|
-
'data-garden-version': '9.0.0-next.
|
|
432
|
+
'data-garden-version': '9.0.0-next.26',
|
|
475
433
|
as: 'div'
|
|
476
434
|
}).withConfig({
|
|
477
435
|
displayName: "StyledHeaderItemWrapper",
|
|
478
436
|
componentId: "sc-1uieu55-0"
|
|
479
437
|
})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$i, props));
|
|
480
|
-
StyledHeaderItemWrapper.defaultProps = {
|
|
481
|
-
theme: reactTheming.DEFAULT_THEME
|
|
482
|
-
};
|
|
483
438
|
|
|
484
439
|
const COMPONENT_ID$h = 'chrome.nav';
|
|
485
440
|
const colorStyles$5 = _ref => {
|
|
@@ -515,38 +470,29 @@ const sizeStyles$7 = _ref2 => {
|
|
|
515
470
|
};
|
|
516
471
|
const StyledNav = styled__default.default.nav.attrs({
|
|
517
472
|
'data-garden-id': COMPONENT_ID$h,
|
|
518
|
-
'data-garden-version': '9.0.0-next.
|
|
473
|
+
'data-garden-version': '9.0.0-next.26'
|
|
519
474
|
}).withConfig({
|
|
520
475
|
displayName: "StyledNav",
|
|
521
476
|
componentId: "sc-6j462r-0"
|
|
522
477
|
})(["display:flex;position:relative;flex-direction:column;flex-shrink:0;order:-1;", ";", ";", ";"], colorStyles$5, sizeStyles$7, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props));
|
|
523
|
-
StyledNav.defaultProps = {
|
|
524
|
-
theme: reactTheming.DEFAULT_THEME
|
|
525
|
-
};
|
|
526
478
|
|
|
527
479
|
const COMPONENT_ID$g = 'chrome.nav_list';
|
|
528
480
|
const StyledNavList = styled__default.default.ul.attrs({
|
|
529
481
|
'data-garden-id': COMPONENT_ID$g,
|
|
530
|
-
'data-garden-version': '9.0.0-next.
|
|
482
|
+
'data-garden-version': '9.0.0-next.26'
|
|
531
483
|
}).withConfig({
|
|
532
484
|
displayName: "StyledNavList",
|
|
533
485
|
componentId: "sc-1s0nkfb-0"
|
|
534
486
|
})(["display:flex;flex:1;flex-direction:column;order:0;margin:0;padding:0;list-style:none;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$g, props));
|
|
535
|
-
StyledNavList.defaultProps = {
|
|
536
|
-
theme: reactTheming.DEFAULT_THEME
|
|
537
|
-
};
|
|
538
487
|
|
|
539
488
|
const COMPONENT_ID$f = 'chrome.nav_list_item';
|
|
540
489
|
const StyledNavListItem = styled__default.default.li.attrs({
|
|
541
490
|
'data-garden-id': COMPONENT_ID$f,
|
|
542
|
-
'data-garden-version': '9.0.0-next.
|
|
491
|
+
'data-garden-version': '9.0.0-next.26'
|
|
543
492
|
}).withConfig({
|
|
544
493
|
displayName: "StyledNavListItem",
|
|
545
494
|
componentId: "sc-18cj2v7-0"
|
|
546
495
|
})(["display:flex;order:1;margin:0;padding:0;list-style-type:none;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$f, props));
|
|
547
|
-
StyledNavListItem.defaultProps = {
|
|
548
|
-
theme: reactTheming.DEFAULT_THEME
|
|
549
|
-
};
|
|
550
496
|
|
|
551
497
|
const COMPONENT_ID$e = 'chrome.base_nav_item';
|
|
552
498
|
const sizeStyles$6 = _ref => {
|
|
@@ -560,14 +506,11 @@ const sizeStyles$6 = _ref => {
|
|
|
560
506
|
};
|
|
561
507
|
const StyledBaseNavItem = styled__default.default.div.attrs({
|
|
562
508
|
'data-garden-id': COMPONENT_ID$e,
|
|
563
|
-
'data-garden-version': '9.0.0-next.
|
|
509
|
+
'data-garden-version': '9.0.0-next.26'
|
|
564
510
|
}).withConfig({
|
|
565
511
|
displayName: "StyledBaseNavItem",
|
|
566
512
|
componentId: "sc-zvo43f-0"
|
|
567
513
|
})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:outline-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.1s ease-in-out,opacity 0.1s ease-in-out;", ";"], sizeStyles$6);
|
|
568
|
-
StyledBaseNavItem.defaultProps = {
|
|
569
|
-
theme: reactTheming.DEFAULT_THEME
|
|
570
|
-
};
|
|
571
514
|
|
|
572
515
|
const COMPONENT_ID$d = 'chrome.logo_nav_list_item';
|
|
573
516
|
const colorStyles$4 = _ref => {
|
|
@@ -585,26 +528,20 @@ const colorStyles$4 = _ref => {
|
|
|
585
528
|
};
|
|
586
529
|
const StyledLogoNavItem = styled__default.default(StyledBaseNavItem).attrs({
|
|
587
530
|
'data-garden-id': COMPONENT_ID$d,
|
|
588
|
-
'data-garden-version': '9.0.0-next.
|
|
531
|
+
'data-garden-version': '9.0.0-next.26'
|
|
589
532
|
}).withConfig({
|
|
590
533
|
displayName: "StyledLogoNavItem",
|
|
591
534
|
componentId: "sc-saaydx-0"
|
|
592
535
|
})(["order:-1;opacity:1;cursor:default;min-height:0;", ";"], colorStyles$4);
|
|
593
|
-
StyledLogoNavItem.defaultProps = {
|
|
594
|
-
theme: reactTheming.DEFAULT_THEME
|
|
595
|
-
};
|
|
596
536
|
|
|
597
537
|
const COMPONENT_ID$c = 'chrome.brandmark_nav_list_item';
|
|
598
538
|
const StyledBrandmarkNavItem = styled__default.default(StyledBaseNavItem).attrs({
|
|
599
539
|
'data-garden-id': COMPONENT_ID$c,
|
|
600
|
-
'data-garden-version': '9.0.0-next.
|
|
540
|
+
'data-garden-version': '9.0.0-next.26'
|
|
601
541
|
}).withConfig({
|
|
602
542
|
displayName: "StyledBrandmarkNavItem",
|
|
603
543
|
componentId: "sc-8kynd4-0"
|
|
604
544
|
})(["order:1;opacity:", ";margin-top:auto;min-height:0;"], props => props.theme.opacity[400]);
|
|
605
|
-
StyledBrandmarkNavItem.defaultProps = {
|
|
606
|
-
theme: reactTheming.DEFAULT_THEME
|
|
607
|
-
};
|
|
608
545
|
|
|
609
546
|
const COMPONENT_ID$b = 'chrome.nav_item_icon';
|
|
610
547
|
const sizeStyles$5 = _ref => {
|
|
@@ -616,14 +553,11 @@ const sizeStyles$5 = _ref => {
|
|
|
616
553
|
};
|
|
617
554
|
const StyledNavItemIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
|
|
618
555
|
'data-garden-id': COMPONENT_ID$b,
|
|
619
|
-
'data-garden-version': '9.0.0-next.
|
|
556
|
+
'data-garden-version': '9.0.0-next.26'
|
|
620
557
|
}).withConfig({
|
|
621
558
|
displayName: "StyledNavItemIcon",
|
|
622
559
|
componentId: "sc-7w9rpt-0"
|
|
623
560
|
})(["align-self:flex-start;order:0;border-radius:", ";", ";", ";"], props => props.theme.borderRadii.md, sizeStyles$5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
|
|
624
|
-
StyledNavItemIcon.defaultProps = {
|
|
625
|
-
theme: reactTheming.DEFAULT_THEME
|
|
626
|
-
};
|
|
627
561
|
|
|
628
562
|
const COMPONENT_ID$a = 'chrome.nav_button';
|
|
629
563
|
const colorStyles$3 = _ref => {
|
|
@@ -695,15 +629,12 @@ const sizeStyles$4 = _ref2 => {
|
|
|
695
629
|
};
|
|
696
630
|
const StyledNavButton = styled__default.default(StyledBaseNavItem).attrs({
|
|
697
631
|
'data-garden-id': COMPONENT_ID$a,
|
|
698
|
-
'data-garden-version': '9.0.0-next.
|
|
632
|
+
'data-garden-version': '9.0.0-next.26',
|
|
699
633
|
as: 'button'
|
|
700
634
|
}).withConfig({
|
|
701
635
|
displayName: "StyledNavButton",
|
|
702
636
|
componentId: "sc-f5ux3-0"
|
|
703
637
|
})(["flex:1;justify-content:", ";cursor:pointer;text-align:", ";text-decoration:none;", ";&:hover,&:focus{text-decoration:none;}&[aria-current='true']{cursor:default;}", ";", ";"], props => props.isExpanded && 'start', props => props.isExpanded && 'inherit', sizeStyles$4, colorStyles$3, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
|
|
704
|
-
StyledNavButton.defaultProps = {
|
|
705
|
-
theme: reactTheming.DEFAULT_THEME
|
|
706
|
-
};
|
|
707
638
|
|
|
708
639
|
const COMPONENT_ID$9 = 'chrome.nav_item_text';
|
|
709
640
|
const sizeStyles$3 = _ref => {
|
|
@@ -722,14 +653,11 @@ const sizeStyles$3 = _ref => {
|
|
|
722
653
|
};
|
|
723
654
|
const StyledNavItemText = styled__default.default.span.attrs({
|
|
724
655
|
'data-garden-id': COMPONENT_ID$9,
|
|
725
|
-
'data-garden-version': '9.0.0-next.
|
|
656
|
+
'data-garden-version': '9.0.0-next.26'
|
|
726
657
|
}).withConfig({
|
|
727
658
|
displayName: "StyledNavItemText",
|
|
728
659
|
componentId: "sc-13m84xl-0"
|
|
729
660
|
})(["position:absolute;order:1;overflow:hidden;", " > &&{position:", ";flex:", ";text-overflow:", ";}", ";", ";"], StyledNavButton, props => props.isExpanded ? 'static' : undefined, props => props.isExpanded ? 1 : undefined, props => props.isExpanded ? 'ellipsis' : undefined, sizeStyles$3, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
|
|
730
|
-
StyledNavItemText.defaultProps = {
|
|
731
|
-
theme: reactTheming.DEFAULT_THEME
|
|
732
|
-
};
|
|
733
661
|
|
|
734
662
|
const COMPONENT_ID$8 = 'chrome.sheet';
|
|
735
663
|
const colorStyles$2 = _ref => {
|
|
@@ -768,14 +696,11 @@ const sizeStyles$2 = _ref2 => {
|
|
|
768
696
|
};
|
|
769
697
|
const StyledSheet = styled__default.default.aside.attrs({
|
|
770
698
|
'data-garden-id': COMPONENT_ID$8,
|
|
771
|
-
'data-garden-version': '9.0.0-next.
|
|
699
|
+
'data-garden-version': '9.0.0-next.26'
|
|
772
700
|
}).withConfig({
|
|
773
701
|
displayName: "StyledSheet",
|
|
774
702
|
componentId: "sc-dx8ijk-0"
|
|
775
703
|
})(["display:flex;order:1;transition:", ";overflow:hidden;", ";&:focus{outline:none;}", ";", ";"], props => props.isAnimated && 'width 250ms ease-in-out', sizeStyles$2, colorStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
|
|
776
|
-
StyledSheet.defaultProps = {
|
|
777
|
-
theme: reactTheming.DEFAULT_THEME
|
|
778
|
-
};
|
|
779
704
|
|
|
780
705
|
const COMPONENT_ID$7 = 'chrome.sheet_wrapper';
|
|
781
706
|
const transformStyles = _ref => {
|
|
@@ -798,19 +723,16 @@ const transformStyles = _ref => {
|
|
|
798
723
|
};
|
|
799
724
|
const StyledSheetWrapper = styled__default.default.div.attrs({
|
|
800
725
|
'data-garden-id': COMPONENT_ID$7,
|
|
801
|
-
'data-garden-version': '9.0.0-next.
|
|
726
|
+
'data-garden-version': '9.0.0-next.26'
|
|
802
727
|
}).withConfig({
|
|
803
728
|
displayName: "StyledSheetWrapper",
|
|
804
729
|
componentId: "sc-f6x9zb-0"
|
|
805
730
|
})(["display:flex;position:relative;flex-direction:column;min-width:", ";", ";", ";"], props => props.size, transformStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
|
|
806
|
-
StyledSheetWrapper.defaultProps = {
|
|
807
|
-
theme: reactTheming.DEFAULT_THEME
|
|
808
|
-
};
|
|
809
731
|
|
|
810
732
|
const COMPONENT_ID$6 = 'chrome.sheet_title';
|
|
811
733
|
const StyledSheetTitle = styled__default.default.div.attrs({
|
|
812
734
|
'data-garden-id': COMPONENT_ID$6,
|
|
813
|
-
'data-garden-version': '9.0.0-next.
|
|
735
|
+
'data-garden-version': '9.0.0-next.26'
|
|
814
736
|
}).withConfig({
|
|
815
737
|
displayName: "StyledSheetTitle",
|
|
816
738
|
componentId: "sc-1gogk75-0"
|
|
@@ -818,14 +740,11 @@ const StyledSheetTitle = styled__default.default.div.attrs({
|
|
|
818
740
|
theme: p.theme,
|
|
819
741
|
variable: 'foreground.default'
|
|
820
742
|
}), props => props.theme.fontWeights.semibold, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
|
|
821
|
-
StyledSheetTitle.defaultProps = {
|
|
822
|
-
theme: reactTheming.DEFAULT_THEME
|
|
823
|
-
};
|
|
824
743
|
|
|
825
744
|
const COMPONENT_ID$5 = 'chrome.sheet_description';
|
|
826
745
|
const StyledSheetDescription = styled__default.default.div.attrs({
|
|
827
746
|
'data-garden-id': COMPONENT_ID$5,
|
|
828
|
-
'data-garden-version': '9.0.0-next.
|
|
747
|
+
'data-garden-version': '9.0.0-next.26'
|
|
829
748
|
}).withConfig({
|
|
830
749
|
displayName: "StyledSheetDescription",
|
|
831
750
|
componentId: "sc-1puglb6-0"
|
|
@@ -833,21 +752,15 @@ const StyledSheetDescription = styled__default.default.div.attrs({
|
|
|
833
752
|
theme: p.theme,
|
|
834
753
|
variable: 'foreground.subtle'
|
|
835
754
|
}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
|
|
836
|
-
StyledSheetDescription.defaultProps = {
|
|
837
|
-
theme: reactTheming.DEFAULT_THEME
|
|
838
|
-
};
|
|
839
755
|
|
|
840
756
|
const COMPONENT_ID$4 = 'chrome.sheet_body';
|
|
841
757
|
const StyledSheetBody = styled__default.default.div.attrs({
|
|
842
758
|
'data-garden-id': COMPONENT_ID$4,
|
|
843
|
-
'data-garden-version': '9.0.0-next.
|
|
759
|
+
'data-garden-version': '9.0.0-next.26'
|
|
844
760
|
}).withConfig({
|
|
845
761
|
displayName: "StyledSheetBody",
|
|
846
762
|
componentId: "sc-bt4eoj-0"
|
|
847
763
|
})(["flex:1;overflow-y:auto;padding:", "px;color-scheme:only ", ";", ";"], props => props.theme.space.base * 5, p => p.theme.colors.base, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
|
|
848
|
-
StyledSheetBody.defaultProps = {
|
|
849
|
-
theme: reactTheming.DEFAULT_THEME
|
|
850
|
-
};
|
|
851
764
|
|
|
852
765
|
const COMPONENT_ID$3 = 'chrome.sheet_close';
|
|
853
766
|
const positionStyles = _ref => {
|
|
@@ -860,14 +773,11 @@ const positionStyles = _ref => {
|
|
|
860
773
|
};
|
|
861
774
|
const StyledSheetClose = styled__default.default(reactButtons.IconButton).attrs({
|
|
862
775
|
'data-garden-id': COMPONENT_ID$3,
|
|
863
|
-
'data-garden-version': '9.0.0-next.
|
|
776
|
+
'data-garden-version': '9.0.0-next.26'
|
|
864
777
|
}).withConfig({
|
|
865
778
|
displayName: "StyledSheetClose",
|
|
866
779
|
componentId: "sc-1ab02oq-0"
|
|
867
780
|
})(["position:absolute;", ";", ";"], positionStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
|
|
868
|
-
StyledSheetClose.defaultProps = {
|
|
869
|
-
theme: reactTheming.DEFAULT_THEME
|
|
870
|
-
};
|
|
871
781
|
|
|
872
782
|
const COMPONENT_ID$2 = 'chrome.sheet_footer';
|
|
873
783
|
const colorStyles$1 = _ref => {
|
|
@@ -891,26 +801,20 @@ const sizeStyles$1 = _ref2 => {
|
|
|
891
801
|
};
|
|
892
802
|
const StyledSheetFooter = styled__default.default.footer.attrs({
|
|
893
803
|
'data-garden-id': COMPONENT_ID$2,
|
|
894
|
-
'data-garden-version': '9.0.0-next.
|
|
804
|
+
'data-garden-version': '9.0.0-next.26'
|
|
895
805
|
}).withConfig({
|
|
896
806
|
displayName: "StyledSheetFooter",
|
|
897
807
|
componentId: "sc-2cktos-0"
|
|
898
808
|
})(["display:flex;flex-flow:row wrap;align-items:center;justify-content:", ";", ";", ";", ";"], props => props.isCompact ? 'center' : 'flex-end', sizeStyles$1, colorStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
|
|
899
|
-
StyledSheetFooter.defaultProps = {
|
|
900
|
-
theme: reactTheming.DEFAULT_THEME
|
|
901
|
-
};
|
|
902
809
|
|
|
903
810
|
const COMPONENT_ID$1 = 'chrome.sheet_footer_item';
|
|
904
811
|
const StyledSheetFooterItem = styled__default.default.div.attrs({
|
|
905
812
|
'data-garden-id': COMPONENT_ID$1,
|
|
906
|
-
'data-garden-version': '9.0.0-next.
|
|
813
|
+
'data-garden-version': '9.0.0-next.26'
|
|
907
814
|
}).withConfig({
|
|
908
815
|
displayName: "StyledSheetFooterItem",
|
|
909
816
|
componentId: "sc-r9ixh-0"
|
|
910
817
|
})(["", " ", ";"], props => `margin-${props.theme.rtl ? 'right' : 'left'}: ${props.theme.space.base * 5}px;`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
|
|
911
|
-
StyledSheetFooterItem.defaultProps = {
|
|
912
|
-
theme: reactTheming.DEFAULT_THEME
|
|
913
|
-
};
|
|
914
818
|
|
|
915
819
|
const COMPONENT_ID = 'chrome.sheet_header';
|
|
916
820
|
const colorStyles = _ref => {
|
|
@@ -938,14 +842,11 @@ const sizeStyles = _ref2 => {
|
|
|
938
842
|
};
|
|
939
843
|
const StyledSheetHeader = styled__default.default.header.attrs({
|
|
940
844
|
'data-garden-id': COMPONENT_ID,
|
|
941
|
-
'data-garden-version': '9.0.0-next.
|
|
845
|
+
'data-garden-version': '9.0.0-next.26'
|
|
942
846
|
}).withConfig({
|
|
943
847
|
displayName: "StyledSheetHeader",
|
|
944
848
|
componentId: "sc-o2ry8i-0"
|
|
945
849
|
})(["", ";", ";", ";"], sizeStyles, colorStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
|
|
946
|
-
StyledSheetHeader.defaultProps = {
|
|
947
|
-
theme: reactTheming.DEFAULT_THEME
|
|
948
|
-
};
|
|
949
850
|
|
|
950
851
|
const HeaderItem = React__namespace.default.forwardRef((_ref, ref) => {
|
|
951
852
|
let {
|
|
@@ -1420,7 +1321,7 @@ const SheetComponent = React__namespace.default.forwardRef((_ref, ref) => {
|
|
|
1420
1321
|
const sheetRef = React.useRef(null);
|
|
1421
1322
|
const seed = reactUid.useUIDSeed();
|
|
1422
1323
|
const [isCloseButtonPresent, setIsCloseButtonPresent] = React.useState(false);
|
|
1423
|
-
const idPrefix = React.useMemo(() => id || seed(`sheet_${'9.0.0-next.
|
|
1324
|
+
const idPrefix = React.useMemo(() => id || seed(`sheet_${'9.0.0-next.26'}`), [id, seed]);
|
|
1424
1325
|
const titleId = `${idPrefix}--title`;
|
|
1425
1326
|
const descriptionId = `${idPrefix}--description`;
|
|
1426
1327
|
const sheetContext = React.useMemo(() => ({
|
|
@@ -1438,6 +1339,7 @@ const SheetComponent = React__namespace.default.forwardRef((_ref, ref) => {
|
|
|
1438
1339
|
return React__namespace.default.createElement(SheetContext.Provider, {
|
|
1439
1340
|
value: sheetContext
|
|
1440
1341
|
}, React__namespace.default.createElement(StyledSheet, Object.assign({
|
|
1342
|
+
inert: isOpen ? undefined : '',
|
|
1441
1343
|
isOpen: isOpen,
|
|
1442
1344
|
isAnimated: isAnimated,
|
|
1443
1345
|
placement: placement,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-chrome",
|
|
3
|
-
"version": "9.0.0-next.
|
|
3
|
+
"version": "9.0.0-next.26",
|
|
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,7 +21,7 @@
|
|
|
21
21
|
"sideEffects": false,
|
|
22
22
|
"types": "dist/typings/index.d.ts",
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@zendeskgarden/react-buttons": "^9.0.0-next.
|
|
24
|
+
"@zendeskgarden/react-buttons": "^9.0.0-next.26",
|
|
25
25
|
"dom-helpers": "^5.2.1",
|
|
26
26
|
"polished": "^4.3.1",
|
|
27
27
|
"prop-types": "^15.5.7",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"styled-components": "^5.3.1"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
|
-
"@zendeskgarden/react-theming": "^9.0.0-next.
|
|
37
|
+
"@zendeskgarden/react-theming": "^9.0.0-next.26",
|
|
38
38
|
"@zendeskgarden/svg-icons": "7.2.0"
|
|
39
39
|
},
|
|
40
40
|
"keywords": [
|
|
@@ -47,5 +47,5 @@
|
|
|
47
47
|
"access": "public"
|
|
48
48
|
},
|
|
49
49
|
"zendeskgarden:src": "src/index.ts",
|
|
50
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "049dd7bd143029147de333f78bd879dc7d7251f2"
|
|
51
51
|
}
|