@zendeskgarden/react-accordions 8.62.0 → 8.62.2
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 +85 -88
- package/dist/index.esm.js +21 -21
- package/package.json +3 -3
package/dist/index.cjs.js
CHANGED
|
@@ -7,8 +7,6 @@
|
|
|
7
7
|
|
|
8
8
|
'use strict';
|
|
9
9
|
|
|
10
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
|
-
|
|
12
10
|
var React = require('react');
|
|
13
11
|
var containerAccordion = require('@zendeskgarden/container-accordion');
|
|
14
12
|
var styled = require('styled-components');
|
|
@@ -19,7 +17,7 @@ var debounce = require('lodash.debounce');
|
|
|
19
17
|
var mergeRefs = require('react-merge-refs');
|
|
20
18
|
var PropTypes = require('prop-types');
|
|
21
19
|
|
|
22
|
-
function
|
|
20
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
23
21
|
|
|
24
22
|
function _interopNamespace(e) {
|
|
25
23
|
if (e && e.__esModule) return e;
|
|
@@ -35,16 +33,15 @@ function _interopNamespace(e) {
|
|
|
35
33
|
}
|
|
36
34
|
});
|
|
37
35
|
}
|
|
38
|
-
n
|
|
36
|
+
n.default = e;
|
|
39
37
|
return Object.freeze(n);
|
|
40
38
|
}
|
|
41
39
|
|
|
42
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
43
40
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
44
|
-
var styled__default = /*#__PURE__*/
|
|
45
|
-
var debounce__default = /*#__PURE__*/
|
|
46
|
-
var mergeRefs__default = /*#__PURE__*/
|
|
47
|
-
var PropTypes__default = /*#__PURE__*/
|
|
41
|
+
var styled__default = /*#__PURE__*/_interopDefault(styled);
|
|
42
|
+
var debounce__default = /*#__PURE__*/_interopDefault(debounce);
|
|
43
|
+
var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
|
|
44
|
+
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
|
|
48
45
|
|
|
49
46
|
function _extends$3() {
|
|
50
47
|
_extends$3 = Object.assign ? Object.assign.bind() : function (target) {
|
|
@@ -75,9 +72,9 @@ const sizeStyles$1 = props => {
|
|
|
75
72
|
const marginVertical = space.base * 3;
|
|
76
73
|
return styled.css(["margin:", "px ", "px ", "px ", "px;padding:0 ", "px ", "px ", "px;"], marginVertical, marginRight, marginVertical, marginLeft, paddingRight, paddingBottom, paddingLeft);
|
|
77
74
|
};
|
|
78
|
-
const StyledContent = styled__default
|
|
75
|
+
const StyledContent = styled__default.default.div.attrs({
|
|
79
76
|
'data-garden-id': COMPONENT_ID$k,
|
|
80
|
-
'data-garden-version': '8.62.
|
|
77
|
+
'data-garden-version': '8.62.2'
|
|
81
78
|
}).withConfig({
|
|
82
79
|
displayName: "StyledContent",
|
|
83
80
|
componentId: "sc-mazvvo-0"
|
|
@@ -87,9 +84,9 @@ StyledContent.defaultProps = {
|
|
|
87
84
|
};
|
|
88
85
|
|
|
89
86
|
const COMPONENT_ID$j = 'accordions.step_line';
|
|
90
|
-
const StyledLine = styled__default
|
|
87
|
+
const StyledLine = styled__default.default.div.attrs({
|
|
91
88
|
'data-garden-id': COMPONENT_ID$j,
|
|
92
|
-
'data-garden-version': '8.62.
|
|
89
|
+
'data-garden-version': '8.62.2'
|
|
93
90
|
}).withConfig({
|
|
94
91
|
displayName: "StyledLine",
|
|
95
92
|
componentId: "sc-1gkpjbr-0"
|
|
@@ -99,9 +96,9 @@ StyledLine.defaultProps = {
|
|
|
99
96
|
};
|
|
100
97
|
|
|
101
98
|
const COMPONENT_ID$i = 'accordions.step';
|
|
102
|
-
const StyledStep = styled__default
|
|
99
|
+
const StyledStep = styled__default.default.li.attrs({
|
|
103
100
|
'data-garden-id': COMPONENT_ID$i,
|
|
104
|
-
'data-garden-version': '8.62.
|
|
101
|
+
'data-garden-version': '8.62.2'
|
|
105
102
|
}).withConfig({
|
|
106
103
|
displayName: "StyledStep",
|
|
107
104
|
componentId: "sc-12fiwtz-0"
|
|
@@ -111,9 +108,9 @@ StyledStep.defaultProps = {
|
|
|
111
108
|
};
|
|
112
109
|
|
|
113
110
|
const COMPONENT_ID$h = 'accordions.step_inner_content';
|
|
114
|
-
const StyledInnerContent = styled__default
|
|
111
|
+
const StyledInnerContent = styled__default.default.div.attrs({
|
|
115
112
|
'data-garden-id': COMPONENT_ID$h,
|
|
116
|
-
'data-garden-version': '8.62.
|
|
113
|
+
'data-garden-version': '8.62.2'
|
|
117
114
|
}).withConfig({
|
|
118
115
|
displayName: "StyledInnerContent",
|
|
119
116
|
componentId: "sc-1xs9fh7-0"
|
|
@@ -123,9 +120,9 @@ StyledInnerContent.defaultProps = {
|
|
|
123
120
|
};
|
|
124
121
|
|
|
125
122
|
const COMPONENT_ID$g = 'accordions.stepper';
|
|
126
|
-
const StyledStepper = styled__default
|
|
123
|
+
const StyledStepper = styled__default.default.ol.attrs({
|
|
127
124
|
'data-garden-id': COMPONENT_ID$g,
|
|
128
|
-
'data-garden-version': '8.62.
|
|
125
|
+
'data-garden-version': '8.62.2'
|
|
129
126
|
}).withConfig({
|
|
130
127
|
displayName: "StyledStepper",
|
|
131
128
|
componentId: "sc-dsxw0f-0"
|
|
@@ -135,7 +132,7 @@ StyledStepper.defaultProps = {
|
|
|
135
132
|
};
|
|
136
133
|
|
|
137
134
|
const COMPONENT_ID$f = 'accordions.step_icon';
|
|
138
|
-
const StyledIconFlexContainer = styled__default
|
|
135
|
+
const StyledIconFlexContainer = styled__default.default.div.withConfig({
|
|
139
136
|
displayName: "StyledIcon__StyledIconFlexContainer",
|
|
140
137
|
componentId: "sc-v20nz9-0"
|
|
141
138
|
})(["display:flex;flex-basis:100%;justify-content:center;width:100%;"]);
|
|
@@ -147,9 +144,9 @@ const sizeStyles = props => {
|
|
|
147
144
|
const colorStyles$2 = props => {
|
|
148
145
|
return styled.css(["background:", ";color:", ";"], props.isActive ? reactTheming.getColor('neutralHue', 600, props.theme) : reactTheming.getColor('neutralHue', 200, props.theme), props.isActive ? props.theme.colors.background : props.theme.colors.foreground);
|
|
149
146
|
};
|
|
150
|
-
const StyledIcon = styled__default
|
|
147
|
+
const StyledIcon = styled__default.default.div.attrs({
|
|
151
148
|
'data-garden-id': COMPONENT_ID$f,
|
|
152
|
-
'data-garden-version': '8.62.
|
|
149
|
+
'data-garden-version': '8.62.2'
|
|
153
150
|
}).withConfig({
|
|
154
151
|
displayName: "StyledIcon",
|
|
155
152
|
componentId: "sc-v20nz9-1"
|
|
@@ -162,9 +159,9 @@ StyledIcon.defaultProps = {
|
|
|
162
159
|
};
|
|
163
160
|
|
|
164
161
|
const COMPONENT_ID$e = 'accordions.step_label';
|
|
165
|
-
const StyledLabel = styled__default
|
|
162
|
+
const StyledLabel = styled__default.default.div.attrs({
|
|
166
163
|
'data-garden-id': COMPONENT_ID$e,
|
|
167
|
-
'data-garden-version': '8.62.
|
|
164
|
+
'data-garden-version': '8.62.2'
|
|
168
165
|
}).withConfig({
|
|
169
166
|
displayName: "StyledLabel",
|
|
170
167
|
componentId: "sc-1o82llj-0"
|
|
@@ -174,9 +171,9 @@ StyledLabel.defaultProps = {
|
|
|
174
171
|
};
|
|
175
172
|
|
|
176
173
|
const COMPONENT_ID$d = 'accordions.step_label_text';
|
|
177
|
-
const StyledLabelText = styled__default
|
|
174
|
+
const StyledLabelText = styled__default.default.div.attrs({
|
|
178
175
|
'data-garden-id': COMPONENT_ID$d,
|
|
179
|
-
'data-garden-version': '8.62.
|
|
176
|
+
'data-garden-version': '8.62.2'
|
|
180
177
|
}).withConfig({
|
|
181
178
|
displayName: "StyledLabelText",
|
|
182
179
|
componentId: "sc-111m5zo-0"
|
|
@@ -186,9 +183,9 @@ StyledLabelText.defaultProps = {
|
|
|
186
183
|
};
|
|
187
184
|
|
|
188
185
|
const COMPONENT_ID$c = 'accordions.accordion';
|
|
189
|
-
const StyledAccordion = styled__default
|
|
186
|
+
const StyledAccordion = styled__default.default.div.attrs({
|
|
190
187
|
'data-garden-id': COMPONENT_ID$c,
|
|
191
|
-
'data-garden-version': '8.62.
|
|
188
|
+
'data-garden-version': '8.62.2'
|
|
192
189
|
}).withConfig({
|
|
193
190
|
displayName: "StyledAccordion",
|
|
194
191
|
componentId: "sc-niv9ic-0"
|
|
@@ -216,9 +213,9 @@ const paddingStyles = props => {
|
|
|
216
213
|
}
|
|
217
214
|
return styled.css(["transition:", ";padding:", "px ", "px ", "px;"], props.isAnimated && 'padding 0.25s ease-in-out', paddingTop, paddingHorizontal, paddingBottom);
|
|
218
215
|
};
|
|
219
|
-
const StyledPanel = styled__default
|
|
216
|
+
const StyledPanel = styled__default.default.section.attrs({
|
|
220
217
|
'data-garden-id': COMPONENT_ID$b,
|
|
221
|
-
'data-garden-version': '8.62.
|
|
218
|
+
'data-garden-version': '8.62.2'
|
|
222
219
|
}).withConfig({
|
|
223
220
|
displayName: "StyledPanel",
|
|
224
221
|
componentId: "sc-1piryze-0"
|
|
@@ -229,9 +226,9 @@ StyledPanel.defaultProps = {
|
|
|
229
226
|
};
|
|
230
227
|
|
|
231
228
|
const COMPONENT_ID$a = 'accordions.section';
|
|
232
|
-
const StyledSection = styled__default
|
|
229
|
+
const StyledSection = styled__default.default.div.attrs({
|
|
233
230
|
'data-garden-id': COMPONENT_ID$a,
|
|
234
|
-
'data-garden-version': '8.62.
|
|
231
|
+
'data-garden-version': '8.62.2'
|
|
235
232
|
}).withConfig({
|
|
236
233
|
displayName: "StyledSection",
|
|
237
234
|
componentId: "sc-v2t9bd-0"
|
|
@@ -241,9 +238,9 @@ StyledSection.defaultProps = {
|
|
|
241
238
|
};
|
|
242
239
|
|
|
243
240
|
const COMPONENT_ID$9 = 'accordions.header';
|
|
244
|
-
const StyledHeader = styled__default
|
|
241
|
+
const StyledHeader = styled__default.default.div.attrs({
|
|
245
242
|
'data-garden-id': COMPONENT_ID$9,
|
|
246
|
-
'data-garden-version': '8.62.
|
|
243
|
+
'data-garden-version': '8.62.2'
|
|
247
244
|
}).withConfig({
|
|
248
245
|
displayName: "StyledHeader",
|
|
249
246
|
componentId: "sc-2c6rbr-0"
|
|
@@ -261,9 +258,9 @@ const colorStyles$1 = props => {
|
|
|
261
258
|
}
|
|
262
259
|
return styled.css(["color:", ";&:hover{cursor:", ";color:", ";}"], color, showColor && 'pointer', showColor && color);
|
|
263
260
|
};
|
|
264
|
-
const StyledButton = styled__default
|
|
261
|
+
const StyledButton = styled__default.default.button.attrs({
|
|
265
262
|
'data-garden-id': COMPONENT_ID$8,
|
|
266
|
-
'data-garden-version': '8.62.
|
|
263
|
+
'data-garden-version': '8.62.2'
|
|
267
264
|
}).withConfig({
|
|
268
265
|
displayName: "StyledButton",
|
|
269
266
|
componentId: "sc-xj3hy7-0"
|
|
@@ -273,9 +270,9 @@ StyledButton.defaultProps = {
|
|
|
273
270
|
};
|
|
274
271
|
|
|
275
272
|
const COMPONENT_ID$7 = 'accordions.step_inner_panel';
|
|
276
|
-
const StyledInnerPanel = styled__default
|
|
273
|
+
const StyledInnerPanel = styled__default.default.div.attrs({
|
|
277
274
|
'data-garden-id': COMPONENT_ID$7,
|
|
278
|
-
'data-garden-version': '8.62.
|
|
275
|
+
'data-garden-version': '8.62.2'
|
|
279
276
|
}).withConfig({
|
|
280
277
|
displayName: "StyledInnerPanel",
|
|
281
278
|
componentId: "sc-8nbueg-0"
|
|
@@ -294,7 +291,7 @@ const colorStyles = props => {
|
|
|
294
291
|
}
|
|
295
292
|
return styled.css(["color:", ";&:hover{color:", ";}"], color, showColor && color);
|
|
296
293
|
};
|
|
297
|
-
const StyledRotateIcon = styled__default
|
|
294
|
+
const StyledRotateIcon = styled__default.default(
|
|
298
295
|
_ref => {
|
|
299
296
|
let {
|
|
300
297
|
children,
|
|
@@ -307,7 +304,7 @@ _ref => {
|
|
|
307
304
|
return React.cloneElement(React.Children.only(children), props);
|
|
308
305
|
}).attrs({
|
|
309
306
|
'data-garden-id': COMPONENT_ID$6,
|
|
310
|
-
'data-garden-version': '8.62.
|
|
307
|
+
'data-garden-version': '8.62.2'
|
|
311
308
|
}).withConfig({
|
|
312
309
|
displayName: "StyledRotateIcon",
|
|
313
310
|
componentId: "sc-hp435q-0"
|
|
@@ -317,9 +314,9 @@ StyledRotateIcon.defaultProps = {
|
|
|
317
314
|
};
|
|
318
315
|
|
|
319
316
|
const COMPONENT_ID$5 = 'timeline';
|
|
320
|
-
const StyledTimeline = styled__default
|
|
317
|
+
const StyledTimeline = styled__default.default.ol.attrs({
|
|
321
318
|
'data-garden-id': COMPONENT_ID$5,
|
|
322
|
-
'data-garden-version': '8.62.
|
|
319
|
+
'data-garden-version': '8.62.2'
|
|
323
320
|
}).withConfig({
|
|
324
321
|
displayName: "StyledTimeline",
|
|
325
322
|
componentId: "sc-pig5kv-0"
|
|
@@ -329,9 +326,9 @@ StyledTimeline.defaultProps = {
|
|
|
329
326
|
};
|
|
330
327
|
|
|
331
328
|
const COMPONENT_ID$4 = 'timeline.content.separator';
|
|
332
|
-
const StyledSeparator = styled__default
|
|
329
|
+
const StyledSeparator = styled__default.default.div.attrs({
|
|
333
330
|
'data-garden-id': COMPONENT_ID$4,
|
|
334
|
-
'data-garden-version': '8.62.
|
|
331
|
+
'data-garden-version': '8.62.2'
|
|
335
332
|
}).withConfig({
|
|
336
333
|
displayName: "StyledSeparator",
|
|
337
334
|
componentId: "sc-fki51e-0"
|
|
@@ -341,9 +338,9 @@ StyledSeparator.defaultProps = {
|
|
|
341
338
|
};
|
|
342
339
|
|
|
343
340
|
const COMPONENT_ID$3 = 'timeline.content';
|
|
344
|
-
const StyledTimelineContent = styled__default
|
|
341
|
+
const StyledTimelineContent = styled__default.default.div.attrs({
|
|
345
342
|
'data-garden-id': COMPONENT_ID$3,
|
|
346
|
-
'data-garden-version': '8.62.
|
|
343
|
+
'data-garden-version': '8.62.2'
|
|
347
344
|
}).withConfig({
|
|
348
345
|
displayName: "StyledContent__StyledTimelineContent",
|
|
349
346
|
componentId: "sc-19phgu1-0"
|
|
@@ -353,9 +350,9 @@ StyledTimelineContent.defaultProps = {
|
|
|
353
350
|
};
|
|
354
351
|
|
|
355
352
|
const COMPONENT_ID$2 = 'timeline.opposite.content';
|
|
356
|
-
const StyledOppositeContent = styled__default
|
|
353
|
+
const StyledOppositeContent = styled__default.default.div.attrs({
|
|
357
354
|
'data-garden-id': COMPONENT_ID$2,
|
|
358
|
-
'data-garden-version': '8.62.
|
|
355
|
+
'data-garden-version': '8.62.2'
|
|
359
356
|
}).withConfig({
|
|
360
357
|
displayName: "StyledOppositeContent",
|
|
361
358
|
componentId: "sc-jurh2k-0"
|
|
@@ -365,9 +362,9 @@ StyledOppositeContent.defaultProps = {
|
|
|
365
362
|
};
|
|
366
363
|
|
|
367
364
|
const COMPONENT_ID$1 = 'timeline.item';
|
|
368
|
-
const StyledTimelineItem = styled__default
|
|
365
|
+
const StyledTimelineItem = styled__default.default.li.attrs({
|
|
369
366
|
'data-garden-id': COMPONENT_ID$1,
|
|
370
|
-
'data-garden-version': '8.62.
|
|
367
|
+
'data-garden-version': '8.62.2'
|
|
371
368
|
}).withConfig({
|
|
372
369
|
displayName: "StyledItem__StyledTimelineItem",
|
|
373
370
|
componentId: "sc-5mcnzm-0"
|
|
@@ -377,7 +374,7 @@ StyledTimelineItem.defaultProps = {
|
|
|
377
374
|
};
|
|
378
375
|
|
|
379
376
|
const COMPONENT_ID = 'timeline.icon';
|
|
380
|
-
const StyledItemIcon = styled__default
|
|
377
|
+
const StyledItemIcon = styled__default.default(_ref => {
|
|
381
378
|
let {
|
|
382
379
|
surfaceColor,
|
|
383
380
|
children,
|
|
@@ -386,7 +383,7 @@ const StyledItemIcon = styled__default["default"](_ref => {
|
|
|
386
383
|
return React.cloneElement(React.Children.only(children), props);
|
|
387
384
|
}).attrs({
|
|
388
385
|
'data-garden-id': COMPONENT_ID,
|
|
389
|
-
'data-garden-version': '8.62.
|
|
386
|
+
'data-garden-version': '8.62.2'
|
|
390
387
|
}).withConfig({
|
|
391
388
|
displayName: "StyledItemIcon",
|
|
392
389
|
componentId: "sc-vz2l6e-0"
|
|
@@ -464,9 +461,9 @@ const SectionComponent = React.forwardRef((props, ref) => {
|
|
|
464
461
|
} = useAccordionContext();
|
|
465
462
|
const sectionIndexRef = React.useRef(currentIndexRef.current++);
|
|
466
463
|
const sectionIndex = sectionIndexRef.current;
|
|
467
|
-
return
|
|
464
|
+
return React__namespace.default.createElement(SectionContext.Provider, {
|
|
468
465
|
value: sectionIndex
|
|
469
|
-
},
|
|
466
|
+
}, React__namespace.default.createElement(StyledSection, _extends$3({
|
|
470
467
|
ref: ref
|
|
471
468
|
}, props)));
|
|
472
469
|
});
|
|
@@ -536,9 +533,9 @@ const HeaderComponent = React.forwardRef((props, ref) => {
|
|
|
536
533
|
isHovered,
|
|
537
534
|
otherTriggerProps
|
|
538
535
|
}), [isHovered, otherTriggerProps]);
|
|
539
|
-
return
|
|
536
|
+
return React__namespace.default.createElement(HeaderContext.Provider, {
|
|
540
537
|
value: value
|
|
541
|
-
},
|
|
538
|
+
}, React__namespace.default.createElement(StyledHeader, getHeaderProps({
|
|
542
539
|
ref,
|
|
543
540
|
ariaLevel,
|
|
544
541
|
isCompact,
|
|
@@ -551,14 +548,14 @@ const HeaderComponent = React.forwardRef((props, ref) => {
|
|
|
551
548
|
onMouseOver: containerUtilities.composeEventHandlers(onMouseOver, () => setIsHovered(true)),
|
|
552
549
|
onMouseOut: containerUtilities.composeEventHandlers(onMouseOut, () => setIsHovered(false)),
|
|
553
550
|
...other
|
|
554
|
-
}), children,
|
|
551
|
+
}), children, React__namespace.default.createElement(StyledRotateIcon, {
|
|
555
552
|
isCompact: isCompact,
|
|
556
553
|
isHovered: isHovered,
|
|
557
554
|
isRotated: isExpanded,
|
|
558
555
|
isCollapsible: isCollapsible,
|
|
559
556
|
onMouseOver: containerUtilities.composeEventHandlers(onMouseOver, () => setIsHovered(true)),
|
|
560
557
|
onMouseOut: containerUtilities.composeEventHandlers(onMouseOut, () => setIsHovered(false))
|
|
561
|
-
},
|
|
558
|
+
}, React__namespace.default.createElement(SvgChevronDownStroke, null))));
|
|
562
559
|
});
|
|
563
560
|
HeaderComponent.displayName = 'Accordion.Header';
|
|
564
561
|
const Header = HeaderComponent;
|
|
@@ -575,7 +572,7 @@ const LabelComponent$1 = React.forwardRef((props, ref) => {
|
|
|
575
572
|
isHovered,
|
|
576
573
|
otherTriggerProps
|
|
577
574
|
} = useHeaderContext();
|
|
578
|
-
return
|
|
575
|
+
return React__namespace.default.createElement(StyledButton, _extends$3({
|
|
579
576
|
ref: ref,
|
|
580
577
|
isCompact: isCompact,
|
|
581
578
|
isHovered: isHovered,
|
|
@@ -604,7 +601,7 @@ const PanelComponent = React.forwardRef((props, ref) => {
|
|
|
604
601
|
return undefined;
|
|
605
602
|
}
|
|
606
603
|
if (environment) {
|
|
607
|
-
const updateMaxHeight = debounce__default
|
|
604
|
+
const updateMaxHeight = debounce__default.default(() => {
|
|
608
605
|
if (panelRef.current) {
|
|
609
606
|
const child = panelRef.current.children[0];
|
|
610
607
|
child.style.maxHeight = `${child.scrollHeight}px`;
|
|
@@ -620,16 +617,16 @@ const PanelComponent = React.forwardRef((props, ref) => {
|
|
|
620
617
|
}
|
|
621
618
|
return undefined;
|
|
622
619
|
}, [isAnimated, panelRef, environment, props.children]);
|
|
623
|
-
return
|
|
620
|
+
return React__namespace.default.createElement(StyledPanel, getPanelProps({
|
|
624
621
|
role: null,
|
|
625
|
-
ref: mergeRefs__default
|
|
622
|
+
ref: mergeRefs__default.default([panelRef, ref]),
|
|
626
623
|
index,
|
|
627
624
|
isBare,
|
|
628
625
|
isCompact,
|
|
629
626
|
isExpanded,
|
|
630
627
|
isAnimated,
|
|
631
628
|
...props
|
|
632
|
-
}),
|
|
629
|
+
}), React__namespace.default.createElement(StyledInnerPanel, {
|
|
633
630
|
isExpanded: isExpanded,
|
|
634
631
|
isAnimated: isAnimated
|
|
635
632
|
}, props.children));
|
|
@@ -678,9 +675,9 @@ const AccordionComponent = React.forwardRef((_ref, ref) => {
|
|
|
678
675
|
currentIndexRef,
|
|
679
676
|
expandedSections
|
|
680
677
|
}), [level, isBare, isCompact, isAnimated, isCollapsible, getPanelProps, getHeaderProps, getTriggerProps, currentIndexRef, expandedSections]);
|
|
681
|
-
return
|
|
678
|
+
return React__namespace.default.createElement(AccordionContext.Provider, {
|
|
682
679
|
value: value
|
|
683
|
-
},
|
|
680
|
+
}, React__namespace.default.createElement(StyledAccordion, _extends$3({
|
|
684
681
|
ref: ref
|
|
685
682
|
}, props)));
|
|
686
683
|
});
|
|
@@ -712,12 +709,12 @@ const StepComponent = React.forwardRef((props, ref) => {
|
|
|
712
709
|
const value = React.useMemo(() => ({
|
|
713
710
|
currentStepIndex
|
|
714
711
|
}), [currentStepIndex]);
|
|
715
|
-
return
|
|
712
|
+
return React__namespace.default.createElement(StepContext.Provider, {
|
|
716
713
|
value: value
|
|
717
|
-
},
|
|
714
|
+
}, React__namespace.default.createElement(StyledStep, _extends$3({
|
|
718
715
|
ref: ref,
|
|
719
716
|
isHorizontal: isHorizontal
|
|
720
|
-
}, props), isHorizontal &&
|
|
717
|
+
}, props), isHorizontal && React__namespace.default.createElement(StyledLine, null), props.children));
|
|
721
718
|
});
|
|
722
719
|
StepComponent.displayName = 'Stepper.Step';
|
|
723
720
|
const Step = StepComponent;
|
|
@@ -764,24 +761,24 @@ const LabelComponent = React.forwardRef((_ref, ref) => {
|
|
|
764
761
|
const stepIcon = icon || numericStep;
|
|
765
762
|
const isActive = activeIndex === currentStepIndex;
|
|
766
763
|
const isCompleted = activeIndex > currentStepIndex;
|
|
767
|
-
const styledIcon =
|
|
764
|
+
const styledIcon = React__namespace.default.createElement(StyledIcon, {
|
|
768
765
|
isActive: isActive,
|
|
769
766
|
isHorizontal: isHorizontal
|
|
770
|
-
}, isCompleted ?
|
|
771
|
-
return
|
|
767
|
+
}, isCompleted ? React__namespace.default.createElement(SvgCheckSmStroke, iconProps) : stepIcon);
|
|
768
|
+
return React__namespace.default.createElement(StyledLabel, _extends$3({
|
|
772
769
|
ref: ref,
|
|
773
770
|
isActive: isActive,
|
|
774
771
|
isHorizontal: isHorizontal
|
|
775
|
-
}, other), isHorizontal ?
|
|
772
|
+
}, other), isHorizontal ? React__namespace.default.createElement(StyledIconFlexContainer, null, styledIcon) : styledIcon, React__namespace.default.createElement(StyledLabelText, {
|
|
776
773
|
isHidden: isHidden,
|
|
777
774
|
isHorizontal: isHorizontal
|
|
778
775
|
}, children));
|
|
779
776
|
});
|
|
780
777
|
LabelComponent.displayName = 'Stepper.Label';
|
|
781
778
|
LabelComponent.propTypes = {
|
|
782
|
-
icon: PropTypes__default
|
|
783
|
-
iconProps: PropTypes__default
|
|
784
|
-
isHidden: PropTypes__default
|
|
779
|
+
icon: PropTypes__default.default.node,
|
|
780
|
+
iconProps: PropTypes__default.default.object,
|
|
781
|
+
isHidden: PropTypes__default.default.bool
|
|
785
782
|
};
|
|
786
783
|
const Label = LabelComponent;
|
|
787
784
|
|
|
@@ -800,7 +797,7 @@ const ContentComponent$1 = React.forwardRef((props, ref) => {
|
|
|
800
797
|
React.useEffect(() => {
|
|
801
798
|
if (environment && isActive && isHorizontal === false) {
|
|
802
799
|
const win = environment.defaultView || window;
|
|
803
|
-
const updateMaxHeight = debounce__default
|
|
800
|
+
const updateMaxHeight = debounce__default.default(() => {
|
|
804
801
|
if (contentRef.current) {
|
|
805
802
|
const child = contentRef.current.children[0];
|
|
806
803
|
child.style.maxHeight = `${child.scrollHeight}px`;
|
|
@@ -815,10 +812,10 @@ const ContentComponent$1 = React.forwardRef((props, ref) => {
|
|
|
815
812
|
}
|
|
816
813
|
return undefined;
|
|
817
814
|
}, [isActive, isHorizontal, contentRef, environment]);
|
|
818
|
-
return isHorizontal === false ?
|
|
819
|
-
ref: mergeRefs__default
|
|
815
|
+
return isHorizontal === false ? React__namespace.default.createElement(StyledContent, _extends$3({
|
|
816
|
+
ref: mergeRefs__default.default([contentRef, ref]),
|
|
820
817
|
isActive: isActive
|
|
821
|
-
}, props),
|
|
818
|
+
}, props), React__namespace.default.createElement(StyledInnerContent, {
|
|
822
819
|
isActive: isActive,
|
|
823
820
|
"aria-hidden": !isActive
|
|
824
821
|
}, props.children)) : null;
|
|
@@ -841,9 +838,9 @@ const StepperComponent = React.forwardRef((_ref, ref) => {
|
|
|
841
838
|
React.useEffect(() => {
|
|
842
839
|
currentIndexRef.current = 0;
|
|
843
840
|
});
|
|
844
|
-
return
|
|
841
|
+
return React__namespace.default.createElement(StepperContext.Provider, {
|
|
845
842
|
value: stepperContext
|
|
846
|
-
},
|
|
843
|
+
}, React__namespace.default.createElement(StyledStepper, _extends$3({
|
|
847
844
|
ref: ref,
|
|
848
845
|
isHorizontal: isHorizontal
|
|
849
846
|
}, props)));
|
|
@@ -857,7 +854,7 @@ Stepper.Content = Content$1;
|
|
|
857
854
|
Stepper.Label = Label;
|
|
858
855
|
Stepper.Step = Step;
|
|
859
856
|
|
|
860
|
-
const OppositeContentComponent = React.forwardRef((props, ref) =>
|
|
857
|
+
const OppositeContentComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledOppositeContent, _extends$3({
|
|
861
858
|
ref: ref
|
|
862
859
|
}, props)));
|
|
863
860
|
OppositeContentComponent.displayName = 'Timeline.OppositeContent';
|
|
@@ -884,9 +881,9 @@ const ItemComponent = React.forwardRef((_ref, ref) => {
|
|
|
884
881
|
}
|
|
885
882
|
}
|
|
886
883
|
});
|
|
887
|
-
return
|
|
884
|
+
return React__namespace.default.createElement(TimelineItemContext.Provider, {
|
|
888
885
|
value: value
|
|
889
|
-
},
|
|
886
|
+
}, React__namespace.default.createElement(StyledTimelineItem, _extends$3({
|
|
890
887
|
ref: ref,
|
|
891
888
|
isAlternate: isAlternate,
|
|
892
889
|
hasOppositeContent: hasOppositeContent
|
|
@@ -922,9 +919,9 @@ const ContentComponent = React.forwardRef((props, ref) => {
|
|
|
922
919
|
icon,
|
|
923
920
|
surfaceColor
|
|
924
921
|
} = useTimelineItemContext();
|
|
925
|
-
return
|
|
922
|
+
return React__namespace.default.createElement(React__namespace.default.Fragment, null, React__namespace.default.createElement(StyledSeparator, null, React__namespace.default.createElement(StyledItemIcon, {
|
|
926
923
|
surfaceColor: surfaceColor
|
|
927
|
-
}, icon ||
|
|
924
|
+
}, icon || React__namespace.default.createElement(SvgCircleFullStroke, null))), React__namespace.default.createElement(StyledTimelineContent, _extends$3({
|
|
928
925
|
ref: ref
|
|
929
926
|
}, props)));
|
|
930
927
|
});
|
|
@@ -939,9 +936,9 @@ const TimelineComponent = React.forwardRef((_ref, ref) => {
|
|
|
939
936
|
const value = React.useMemo(() => ({
|
|
940
937
|
isAlternate
|
|
941
938
|
}), [isAlternate]);
|
|
942
|
-
return
|
|
939
|
+
return React__namespace.default.createElement(TimelineContext.Provider, {
|
|
943
940
|
value: value
|
|
944
|
-
},
|
|
941
|
+
}, React__namespace.default.createElement(StyledTimeline, _extends$3({
|
|
945
942
|
ref: ref
|
|
946
943
|
}, props)));
|
|
947
944
|
});
|
package/dist/index.esm.js
CHANGED
|
@@ -47,7 +47,7 @@ const sizeStyles$1 = props => {
|
|
|
47
47
|
};
|
|
48
48
|
const StyledContent = styled.div.attrs({
|
|
49
49
|
'data-garden-id': COMPONENT_ID$k,
|
|
50
|
-
'data-garden-version': '8.62.
|
|
50
|
+
'data-garden-version': '8.62.2'
|
|
51
51
|
}).withConfig({
|
|
52
52
|
displayName: "StyledContent",
|
|
53
53
|
componentId: "sc-mazvvo-0"
|
|
@@ -59,7 +59,7 @@ StyledContent.defaultProps = {
|
|
|
59
59
|
const COMPONENT_ID$j = 'accordions.step_line';
|
|
60
60
|
const StyledLine = styled.div.attrs({
|
|
61
61
|
'data-garden-id': COMPONENT_ID$j,
|
|
62
|
-
'data-garden-version': '8.62.
|
|
62
|
+
'data-garden-version': '8.62.2'
|
|
63
63
|
}).withConfig({
|
|
64
64
|
displayName: "StyledLine",
|
|
65
65
|
componentId: "sc-1gkpjbr-0"
|
|
@@ -71,7 +71,7 @@ StyledLine.defaultProps = {
|
|
|
71
71
|
const COMPONENT_ID$i = 'accordions.step';
|
|
72
72
|
const StyledStep = styled.li.attrs({
|
|
73
73
|
'data-garden-id': COMPONENT_ID$i,
|
|
74
|
-
'data-garden-version': '8.62.
|
|
74
|
+
'data-garden-version': '8.62.2'
|
|
75
75
|
}).withConfig({
|
|
76
76
|
displayName: "StyledStep",
|
|
77
77
|
componentId: "sc-12fiwtz-0"
|
|
@@ -83,7 +83,7 @@ StyledStep.defaultProps = {
|
|
|
83
83
|
const COMPONENT_ID$h = 'accordions.step_inner_content';
|
|
84
84
|
const StyledInnerContent = styled.div.attrs({
|
|
85
85
|
'data-garden-id': COMPONENT_ID$h,
|
|
86
|
-
'data-garden-version': '8.62.
|
|
86
|
+
'data-garden-version': '8.62.2'
|
|
87
87
|
}).withConfig({
|
|
88
88
|
displayName: "StyledInnerContent",
|
|
89
89
|
componentId: "sc-1xs9fh7-0"
|
|
@@ -95,7 +95,7 @@ StyledInnerContent.defaultProps = {
|
|
|
95
95
|
const COMPONENT_ID$g = 'accordions.stepper';
|
|
96
96
|
const StyledStepper = styled.ol.attrs({
|
|
97
97
|
'data-garden-id': COMPONENT_ID$g,
|
|
98
|
-
'data-garden-version': '8.62.
|
|
98
|
+
'data-garden-version': '8.62.2'
|
|
99
99
|
}).withConfig({
|
|
100
100
|
displayName: "StyledStepper",
|
|
101
101
|
componentId: "sc-dsxw0f-0"
|
|
@@ -119,7 +119,7 @@ const colorStyles$2 = props => {
|
|
|
119
119
|
};
|
|
120
120
|
const StyledIcon = styled.div.attrs({
|
|
121
121
|
'data-garden-id': COMPONENT_ID$f,
|
|
122
|
-
'data-garden-version': '8.62.
|
|
122
|
+
'data-garden-version': '8.62.2'
|
|
123
123
|
}).withConfig({
|
|
124
124
|
displayName: "StyledIcon",
|
|
125
125
|
componentId: "sc-v20nz9-1"
|
|
@@ -134,7 +134,7 @@ StyledIcon.defaultProps = {
|
|
|
134
134
|
const COMPONENT_ID$e = 'accordions.step_label';
|
|
135
135
|
const StyledLabel = styled.div.attrs({
|
|
136
136
|
'data-garden-id': COMPONENT_ID$e,
|
|
137
|
-
'data-garden-version': '8.62.
|
|
137
|
+
'data-garden-version': '8.62.2'
|
|
138
138
|
}).withConfig({
|
|
139
139
|
displayName: "StyledLabel",
|
|
140
140
|
componentId: "sc-1o82llj-0"
|
|
@@ -146,7 +146,7 @@ StyledLabel.defaultProps = {
|
|
|
146
146
|
const COMPONENT_ID$d = 'accordions.step_label_text';
|
|
147
147
|
const StyledLabelText = styled.div.attrs({
|
|
148
148
|
'data-garden-id': COMPONENT_ID$d,
|
|
149
|
-
'data-garden-version': '8.62.
|
|
149
|
+
'data-garden-version': '8.62.2'
|
|
150
150
|
}).withConfig({
|
|
151
151
|
displayName: "StyledLabelText",
|
|
152
152
|
componentId: "sc-111m5zo-0"
|
|
@@ -158,7 +158,7 @@ StyledLabelText.defaultProps = {
|
|
|
158
158
|
const COMPONENT_ID$c = 'accordions.accordion';
|
|
159
159
|
const StyledAccordion = styled.div.attrs({
|
|
160
160
|
'data-garden-id': COMPONENT_ID$c,
|
|
161
|
-
'data-garden-version': '8.62.
|
|
161
|
+
'data-garden-version': '8.62.2'
|
|
162
162
|
}).withConfig({
|
|
163
163
|
displayName: "StyledAccordion",
|
|
164
164
|
componentId: "sc-niv9ic-0"
|
|
@@ -188,7 +188,7 @@ const paddingStyles = props => {
|
|
|
188
188
|
};
|
|
189
189
|
const StyledPanel = styled.section.attrs({
|
|
190
190
|
'data-garden-id': COMPONENT_ID$b,
|
|
191
|
-
'data-garden-version': '8.62.
|
|
191
|
+
'data-garden-version': '8.62.2'
|
|
192
192
|
}).withConfig({
|
|
193
193
|
displayName: "StyledPanel",
|
|
194
194
|
componentId: "sc-1piryze-0"
|
|
@@ -201,7 +201,7 @@ StyledPanel.defaultProps = {
|
|
|
201
201
|
const COMPONENT_ID$a = 'accordions.section';
|
|
202
202
|
const StyledSection = styled.div.attrs({
|
|
203
203
|
'data-garden-id': COMPONENT_ID$a,
|
|
204
|
-
'data-garden-version': '8.62.
|
|
204
|
+
'data-garden-version': '8.62.2'
|
|
205
205
|
}).withConfig({
|
|
206
206
|
displayName: "StyledSection",
|
|
207
207
|
componentId: "sc-v2t9bd-0"
|
|
@@ -213,7 +213,7 @@ StyledSection.defaultProps = {
|
|
|
213
213
|
const COMPONENT_ID$9 = 'accordions.header';
|
|
214
214
|
const StyledHeader = styled.div.attrs({
|
|
215
215
|
'data-garden-id': COMPONENT_ID$9,
|
|
216
|
-
'data-garden-version': '8.62.
|
|
216
|
+
'data-garden-version': '8.62.2'
|
|
217
217
|
}).withConfig({
|
|
218
218
|
displayName: "StyledHeader",
|
|
219
219
|
componentId: "sc-2c6rbr-0"
|
|
@@ -233,7 +233,7 @@ const colorStyles$1 = props => {
|
|
|
233
233
|
};
|
|
234
234
|
const StyledButton = styled.button.attrs({
|
|
235
235
|
'data-garden-id': COMPONENT_ID$8,
|
|
236
|
-
'data-garden-version': '8.62.
|
|
236
|
+
'data-garden-version': '8.62.2'
|
|
237
237
|
}).withConfig({
|
|
238
238
|
displayName: "StyledButton",
|
|
239
239
|
componentId: "sc-xj3hy7-0"
|
|
@@ -245,7 +245,7 @@ StyledButton.defaultProps = {
|
|
|
245
245
|
const COMPONENT_ID$7 = 'accordions.step_inner_panel';
|
|
246
246
|
const StyledInnerPanel = styled.div.attrs({
|
|
247
247
|
'data-garden-id': COMPONENT_ID$7,
|
|
248
|
-
'data-garden-version': '8.62.
|
|
248
|
+
'data-garden-version': '8.62.2'
|
|
249
249
|
}).withConfig({
|
|
250
250
|
displayName: "StyledInnerPanel",
|
|
251
251
|
componentId: "sc-8nbueg-0"
|
|
@@ -277,7 +277,7 @@ _ref => {
|
|
|
277
277
|
return cloneElement(Children.only(children), props);
|
|
278
278
|
}).attrs({
|
|
279
279
|
'data-garden-id': COMPONENT_ID$6,
|
|
280
|
-
'data-garden-version': '8.62.
|
|
280
|
+
'data-garden-version': '8.62.2'
|
|
281
281
|
}).withConfig({
|
|
282
282
|
displayName: "StyledRotateIcon",
|
|
283
283
|
componentId: "sc-hp435q-0"
|
|
@@ -289,7 +289,7 @@ StyledRotateIcon.defaultProps = {
|
|
|
289
289
|
const COMPONENT_ID$5 = 'timeline';
|
|
290
290
|
const StyledTimeline = styled.ol.attrs({
|
|
291
291
|
'data-garden-id': COMPONENT_ID$5,
|
|
292
|
-
'data-garden-version': '8.62.
|
|
292
|
+
'data-garden-version': '8.62.2'
|
|
293
293
|
}).withConfig({
|
|
294
294
|
displayName: "StyledTimeline",
|
|
295
295
|
componentId: "sc-pig5kv-0"
|
|
@@ -301,7 +301,7 @@ StyledTimeline.defaultProps = {
|
|
|
301
301
|
const COMPONENT_ID$4 = 'timeline.content.separator';
|
|
302
302
|
const StyledSeparator = styled.div.attrs({
|
|
303
303
|
'data-garden-id': COMPONENT_ID$4,
|
|
304
|
-
'data-garden-version': '8.62.
|
|
304
|
+
'data-garden-version': '8.62.2'
|
|
305
305
|
}).withConfig({
|
|
306
306
|
displayName: "StyledSeparator",
|
|
307
307
|
componentId: "sc-fki51e-0"
|
|
@@ -313,7 +313,7 @@ StyledSeparator.defaultProps = {
|
|
|
313
313
|
const COMPONENT_ID$3 = 'timeline.content';
|
|
314
314
|
const StyledTimelineContent = styled.div.attrs({
|
|
315
315
|
'data-garden-id': COMPONENT_ID$3,
|
|
316
|
-
'data-garden-version': '8.62.
|
|
316
|
+
'data-garden-version': '8.62.2'
|
|
317
317
|
}).withConfig({
|
|
318
318
|
displayName: "StyledContent__StyledTimelineContent",
|
|
319
319
|
componentId: "sc-19phgu1-0"
|
|
@@ -325,7 +325,7 @@ StyledTimelineContent.defaultProps = {
|
|
|
325
325
|
const COMPONENT_ID$2 = 'timeline.opposite.content';
|
|
326
326
|
const StyledOppositeContent = styled.div.attrs({
|
|
327
327
|
'data-garden-id': COMPONENT_ID$2,
|
|
328
|
-
'data-garden-version': '8.62.
|
|
328
|
+
'data-garden-version': '8.62.2'
|
|
329
329
|
}).withConfig({
|
|
330
330
|
displayName: "StyledOppositeContent",
|
|
331
331
|
componentId: "sc-jurh2k-0"
|
|
@@ -337,7 +337,7 @@ StyledOppositeContent.defaultProps = {
|
|
|
337
337
|
const COMPONENT_ID$1 = 'timeline.item';
|
|
338
338
|
const StyledTimelineItem = styled.li.attrs({
|
|
339
339
|
'data-garden-id': COMPONENT_ID$1,
|
|
340
|
-
'data-garden-version': '8.62.
|
|
340
|
+
'data-garden-version': '8.62.2'
|
|
341
341
|
}).withConfig({
|
|
342
342
|
displayName: "StyledItem__StyledTimelineItem",
|
|
343
343
|
componentId: "sc-5mcnzm-0"
|
|
@@ -356,7 +356,7 @@ const StyledItemIcon = styled(_ref => {
|
|
|
356
356
|
return cloneElement(Children.only(children), props);
|
|
357
357
|
}).attrs({
|
|
358
358
|
'data-garden-id': COMPONENT_ID,
|
|
359
|
-
'data-garden-version': '8.62.
|
|
359
|
+
'data-garden-version': '8.62.2'
|
|
360
360
|
}).withConfig({
|
|
361
361
|
displayName: "StyledItemIcon",
|
|
362
362
|
componentId: "sc-vz2l6e-0"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-accordions",
|
|
3
|
-
"version": "8.62.
|
|
3
|
+
"version": "8.62.2",
|
|
4
4
|
"description": "Components related to accordions in the Garden Design System",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "Zendesk Garden <garden@zendesk.com>",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@types/lodash.debounce": "4.0.7",
|
|
39
|
-
"@zendeskgarden/react-theming": "^8.62.
|
|
39
|
+
"@zendeskgarden/react-theming": "^8.62.2",
|
|
40
40
|
"@zendeskgarden/svg-icons": "6.33.0"
|
|
41
41
|
},
|
|
42
42
|
"keywords": [
|
|
@@ -50,5 +50,5 @@
|
|
|
50
50
|
"access": "public"
|
|
51
51
|
},
|
|
52
52
|
"zendeskgarden:src": "src/index.ts",
|
|
53
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "27a7d6c021f3360396af60d51ecbf66e9076a405"
|
|
54
54
|
}
|