@zendeskgarden/react-accordions 8.47.2 → 8.48.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +77 -64
- package/dist/index.esm.js +77 -64
- package/dist/typings/elements/accordion/Accordion.d.ts +7 -9
- package/dist/typings/elements/accordion/components/Header.d.ts +3 -0
- package/dist/typings/elements/accordion/components/Label.d.ts +3 -0
- package/dist/typings/elements/accordion/components/Panel.d.ts +3 -0
- package/dist/typings/elements/accordion/components/Section.d.ts +3 -0
- package/dist/typings/elements/stepper/Stepper.d.ts +6 -8
- package/dist/typings/elements/stepper/components/Content.d.ts +3 -0
- package/dist/typings/elements/stepper/components/Label.d.ts +8 -6
- package/dist/typings/elements/stepper/components/Step.d.ts +3 -0
- package/dist/typings/elements/timeline/Timeline.d.ts +8 -10
- package/dist/typings/elements/timeline/components/Content.d.ts +3 -0
- package/dist/typings/elements/timeline/components/Item.d.ts +12 -5
- package/dist/typings/elements/timeline/components/OppositeContent.d.ts +3 -0
- package/dist/typings/index.d.ts +2 -1
- package/package.json +3 -3
package/dist/index.cjs.js
CHANGED
|
@@ -215,7 +215,7 @@ var sizeStyles$1 = function sizeStyles(props) {
|
|
|
215
215
|
};
|
|
216
216
|
var StyledContent = styled__default["default"].div.attrs({
|
|
217
217
|
'data-garden-id': COMPONENT_ID$k,
|
|
218
|
-
'data-garden-version': '8.
|
|
218
|
+
'data-garden-version': '8.48.0'
|
|
219
219
|
}).withConfig({
|
|
220
220
|
displayName: "StyledContent",
|
|
221
221
|
componentId: "sc-mazvvo-0"
|
|
@@ -231,7 +231,7 @@ StyledContent.defaultProps = {
|
|
|
231
231
|
var COMPONENT_ID$j = 'accordions.step_line';
|
|
232
232
|
var StyledLine = styled__default["default"].div.attrs({
|
|
233
233
|
'data-garden-id': COMPONENT_ID$j,
|
|
234
|
-
'data-garden-version': '8.
|
|
234
|
+
'data-garden-version': '8.48.0'
|
|
235
235
|
}).withConfig({
|
|
236
236
|
displayName: "StyledLine",
|
|
237
237
|
componentId: "sc-1gkpjbr-0"
|
|
@@ -253,7 +253,7 @@ StyledLine.defaultProps = {
|
|
|
253
253
|
var COMPONENT_ID$i = 'accordions.step';
|
|
254
254
|
var StyledStep = styled__default["default"].li.attrs({
|
|
255
255
|
'data-garden-id': COMPONENT_ID$i,
|
|
256
|
-
'data-garden-version': '8.
|
|
256
|
+
'data-garden-version': '8.48.0'
|
|
257
257
|
}).withConfig({
|
|
258
258
|
displayName: "StyledStep",
|
|
259
259
|
componentId: "sc-12fiwtz-0"
|
|
@@ -283,7 +283,7 @@ StyledStep.defaultProps = {
|
|
|
283
283
|
var COMPONENT_ID$h = 'accordions.step_inner_content';
|
|
284
284
|
var StyledInnerContent = styled__default["default"].div.attrs({
|
|
285
285
|
'data-garden-id': COMPONENT_ID$h,
|
|
286
|
-
'data-garden-version': '8.
|
|
286
|
+
'data-garden-version': '8.48.0'
|
|
287
287
|
}).withConfig({
|
|
288
288
|
displayName: "StyledInnerContent",
|
|
289
289
|
componentId: "sc-1xs9fh7-0"
|
|
@@ -305,7 +305,7 @@ StyledInnerContent.defaultProps = {
|
|
|
305
305
|
var COMPONENT_ID$g = 'accordions.stepper';
|
|
306
306
|
var StyledStepper = styled__default["default"].ol.attrs({
|
|
307
307
|
'data-garden-id': COMPONENT_ID$g,
|
|
308
|
-
'data-garden-version': '8.
|
|
308
|
+
'data-garden-version': '8.48.0'
|
|
309
309
|
}).withConfig({
|
|
310
310
|
displayName: "StyledStepper",
|
|
311
311
|
componentId: "sc-dsxw0f-0"
|
|
@@ -333,7 +333,7 @@ var colorStyles$2 = function colorStyles(props) {
|
|
|
333
333
|
};
|
|
334
334
|
var StyledIcon = styled__default["default"].div.attrs({
|
|
335
335
|
'data-garden-id': COMPONENT_ID$f,
|
|
336
|
-
'data-garden-version': '8.
|
|
336
|
+
'data-garden-version': '8.48.0'
|
|
337
337
|
}).withConfig({
|
|
338
338
|
displayName: "StyledIcon",
|
|
339
339
|
componentId: "sc-v20nz9-1"
|
|
@@ -350,7 +350,7 @@ StyledIcon.defaultProps = {
|
|
|
350
350
|
var COMPONENT_ID$e = 'accordions.step_label';
|
|
351
351
|
var StyledLabel = styled__default["default"].div.attrs({
|
|
352
352
|
'data-garden-id': COMPONENT_ID$e,
|
|
353
|
-
'data-garden-version': '8.
|
|
353
|
+
'data-garden-version': '8.48.0'
|
|
354
354
|
}).withConfig({
|
|
355
355
|
displayName: "StyledLabel",
|
|
356
356
|
componentId: "sc-1o82llj-0"
|
|
@@ -378,7 +378,7 @@ StyledLabel.defaultProps = {
|
|
|
378
378
|
var COMPONENT_ID$d = 'accordions.step_label_text';
|
|
379
379
|
var StyledLabelText = styled__default["default"].div.attrs({
|
|
380
380
|
'data-garden-id': COMPONENT_ID$d,
|
|
381
|
-
'data-garden-version': '8.
|
|
381
|
+
'data-garden-version': '8.48.0'
|
|
382
382
|
}).withConfig({
|
|
383
383
|
displayName: "StyledLabelText",
|
|
384
384
|
componentId: "sc-111m5zo-0"
|
|
@@ -396,7 +396,7 @@ StyledLabelText.defaultProps = {
|
|
|
396
396
|
var COMPONENT_ID$c = 'accordions.accordion';
|
|
397
397
|
var StyledAccordion = styled__default["default"].div.attrs({
|
|
398
398
|
'data-garden-id': COMPONENT_ID$c,
|
|
399
|
-
'data-garden-version': '8.
|
|
399
|
+
'data-garden-version': '8.48.0'
|
|
400
400
|
}).withConfig({
|
|
401
401
|
displayName: "StyledAccordion",
|
|
402
402
|
componentId: "sc-niv9ic-0"
|
|
@@ -426,7 +426,7 @@ var paddingStyles = function paddingStyles(props) {
|
|
|
426
426
|
};
|
|
427
427
|
var StyledPanel = styled__default["default"].section.attrs({
|
|
428
428
|
'data-garden-id': COMPONENT_ID$b,
|
|
429
|
-
'data-garden-version': '8.
|
|
429
|
+
'data-garden-version': '8.48.0'
|
|
430
430
|
}).withConfig({
|
|
431
431
|
displayName: "StyledPanel",
|
|
432
432
|
componentId: "sc-1piryze-0"
|
|
@@ -443,7 +443,7 @@ StyledPanel.defaultProps = {
|
|
|
443
443
|
var COMPONENT_ID$a = 'accordions.section';
|
|
444
444
|
var StyledSection = styled__default["default"].div.attrs({
|
|
445
445
|
'data-garden-id': COMPONENT_ID$a,
|
|
446
|
-
'data-garden-version': '8.
|
|
446
|
+
'data-garden-version': '8.48.0'
|
|
447
447
|
}).withConfig({
|
|
448
448
|
displayName: "StyledSection",
|
|
449
449
|
componentId: "sc-v2t9bd-0"
|
|
@@ -457,7 +457,7 @@ StyledSection.defaultProps = {
|
|
|
457
457
|
var COMPONENT_ID$9 = 'accordions.header';
|
|
458
458
|
var StyledHeader = styled__default["default"].div.attrs({
|
|
459
459
|
'data-garden-id': COMPONENT_ID$9,
|
|
460
|
-
'data-garden-version': '8.
|
|
460
|
+
'data-garden-version': '8.48.0'
|
|
461
461
|
}).withConfig({
|
|
462
462
|
displayName: "StyledHeader",
|
|
463
463
|
componentId: "sc-2c6rbr-0"
|
|
@@ -485,7 +485,7 @@ var colorStyles$1 = function colorStyles(props) {
|
|
|
485
485
|
};
|
|
486
486
|
var StyledButton = styled__default["default"].button.attrs({
|
|
487
487
|
'data-garden-id': COMPONENT_ID$8,
|
|
488
|
-
'data-garden-version': '8.
|
|
488
|
+
'data-garden-version': '8.48.0'
|
|
489
489
|
}).withConfig({
|
|
490
490
|
displayName: "StyledButton",
|
|
491
491
|
componentId: "sc-xj3hy7-0"
|
|
@@ -511,7 +511,7 @@ StyledButton.defaultProps = {
|
|
|
511
511
|
var COMPONENT_ID$7 = 'accordions.step_inner_panel';
|
|
512
512
|
var StyledInnerPanel = styled__default["default"].div.attrs({
|
|
513
513
|
'data-garden-id': COMPONENT_ID$7,
|
|
514
|
-
'data-garden-version': '8.
|
|
514
|
+
'data-garden-version': '8.48.0'
|
|
515
515
|
}).withConfig({
|
|
516
516
|
displayName: "StyledInnerPanel",
|
|
517
517
|
componentId: "sc-8nbueg-0"
|
|
@@ -552,7 +552,7 @@ function (_ref) {
|
|
|
552
552
|
return React.cloneElement(React.Children.only(children), props);
|
|
553
553
|
}).attrs({
|
|
554
554
|
'data-garden-id': COMPONENT_ID$6,
|
|
555
|
-
'data-garden-version': '8.
|
|
555
|
+
'data-garden-version': '8.48.0'
|
|
556
556
|
}).withConfig({
|
|
557
557
|
displayName: "StyledRotateIcon",
|
|
558
558
|
componentId: "sc-hp435q-0"
|
|
@@ -574,7 +574,7 @@ StyledRotateIcon.defaultProps = {
|
|
|
574
574
|
var COMPONENT_ID$5 = 'timeline';
|
|
575
575
|
var StyledTimeline = styled__default["default"].ol.attrs({
|
|
576
576
|
'data-garden-id': COMPONENT_ID$5,
|
|
577
|
-
'data-garden-version': '8.
|
|
577
|
+
'data-garden-version': '8.48.0'
|
|
578
578
|
}).withConfig({
|
|
579
579
|
displayName: "StyledTimeline",
|
|
580
580
|
componentId: "sc-pig5kv-0"
|
|
@@ -588,7 +588,7 @@ StyledTimeline.defaultProps = {
|
|
|
588
588
|
var COMPONENT_ID$4 = 'timeline.content.separator';
|
|
589
589
|
var StyledSeparator = styled__default["default"].div.attrs({
|
|
590
590
|
'data-garden-id': COMPONENT_ID$4,
|
|
591
|
-
'data-garden-version': '8.
|
|
591
|
+
'data-garden-version': '8.48.0'
|
|
592
592
|
}).withConfig({
|
|
593
593
|
displayName: "StyledSeparator",
|
|
594
594
|
componentId: "sc-fki51e-0"
|
|
@@ -606,7 +606,7 @@ StyledSeparator.defaultProps = {
|
|
|
606
606
|
var COMPONENT_ID$3 = 'timeline.content';
|
|
607
607
|
var StyledTimelineContent = styled__default["default"].div.attrs({
|
|
608
608
|
'data-garden-id': COMPONENT_ID$3,
|
|
609
|
-
'data-garden-version': '8.
|
|
609
|
+
'data-garden-version': '8.48.0'
|
|
610
610
|
}).withConfig({
|
|
611
611
|
displayName: "StyledContent__StyledTimelineContent",
|
|
612
612
|
componentId: "sc-19phgu1-0"
|
|
@@ -622,7 +622,7 @@ StyledTimelineContent.defaultProps = {
|
|
|
622
622
|
var COMPONENT_ID$2 = 'timeline.opposite.content';
|
|
623
623
|
var StyledOppositeContent = styled__default["default"].div.attrs({
|
|
624
624
|
'data-garden-id': COMPONENT_ID$2,
|
|
625
|
-
'data-garden-version': '8.
|
|
625
|
+
'data-garden-version': '8.48.0'
|
|
626
626
|
}).withConfig({
|
|
627
627
|
displayName: "StyledOppositeContent",
|
|
628
628
|
componentId: "sc-jurh2k-0"
|
|
@@ -640,7 +640,7 @@ StyledOppositeContent.defaultProps = {
|
|
|
640
640
|
var COMPONENT_ID$1 = 'timeline.item';
|
|
641
641
|
var StyledTimelineItem = styled__default["default"].li.attrs({
|
|
642
642
|
'data-garden-id': COMPONENT_ID$1,
|
|
643
|
-
'data-garden-version': '8.
|
|
643
|
+
'data-garden-version': '8.48.0'
|
|
644
644
|
}).withConfig({
|
|
645
645
|
displayName: "StyledItem__StyledTimelineItem",
|
|
646
646
|
componentId: "sc-5mcnzm-0"
|
|
@@ -664,7 +664,7 @@ var StyledItemIcon = styled__default["default"](function (_ref) {
|
|
|
664
664
|
return React.cloneElement(React.Children.only(children), props);
|
|
665
665
|
}).attrs({
|
|
666
666
|
'data-garden-id': COMPONENT_ID,
|
|
667
|
-
'data-garden-version': '8.
|
|
667
|
+
'data-garden-version': '8.48.0'
|
|
668
668
|
}).withConfig({
|
|
669
669
|
displayName: "StyledItemIcon",
|
|
670
670
|
componentId: "sc-vz2l6e-0"
|
|
@@ -748,7 +748,7 @@ var useTimelineItemContext = function useTimelineItemContext() {
|
|
|
748
748
|
return context;
|
|
749
749
|
};
|
|
750
750
|
|
|
751
|
-
var
|
|
751
|
+
var StepComponent = React.forwardRef(function (props, ref) {
|
|
752
752
|
var _useStepperContext = useStepperContext(),
|
|
753
753
|
currentIndexRef = _useStepperContext.currentIndexRef,
|
|
754
754
|
isHorizontal = _useStepperContext.isHorizontal;
|
|
@@ -776,7 +776,8 @@ var Step = React.forwardRef(function (props, ref) {
|
|
|
776
776
|
isHorizontal: isHorizontal
|
|
777
777
|
}, props), isHorizontal && React__default["default"].createElement(StyledLine, null), props.children));
|
|
778
778
|
});
|
|
779
|
-
|
|
779
|
+
StepComponent.displayName = 'Stepper.Step';
|
|
780
|
+
var Step = StepComponent;
|
|
780
781
|
|
|
781
782
|
var _path$1;
|
|
782
783
|
|
|
@@ -800,7 +801,7 @@ var SvgCheckSmStroke = function SvgCheckSmStroke(props) {
|
|
|
800
801
|
})));
|
|
801
802
|
};
|
|
802
803
|
|
|
803
|
-
var
|
|
804
|
+
var LabelComponent$1 = React.forwardRef(function (props, ref) {
|
|
804
805
|
var _useStepContext = useStepContext(),
|
|
805
806
|
currentStepIndex = _useStepContext.currentStepIndex;
|
|
806
807
|
var _useStepperContext = useStepperContext(),
|
|
@@ -823,13 +824,14 @@ var Label$1 = React.forwardRef(function (props, ref) {
|
|
|
823
824
|
isHorizontal: isHorizontal
|
|
824
825
|
}, props.children));
|
|
825
826
|
});
|
|
826
|
-
|
|
827
|
-
|
|
827
|
+
LabelComponent$1.displayName = 'Stepper.Label';
|
|
828
|
+
LabelComponent$1.propTypes = {
|
|
828
829
|
icon: PropTypes__default["default"].node,
|
|
829
830
|
isHidden: PropTypes__default["default"].bool
|
|
830
831
|
};
|
|
832
|
+
var Label$1 = LabelComponent$1;
|
|
831
833
|
|
|
832
|
-
var
|
|
834
|
+
var ContentComponent$1 = React.forwardRef(function (props, ref) {
|
|
833
835
|
var contentRef = React.useRef();
|
|
834
836
|
var _useStepperContext = useStepperContext(),
|
|
835
837
|
activeIndex = _useStepperContext.activeIndex,
|
|
@@ -860,10 +862,11 @@ var Content$1 = React.forwardRef(function (props, ref) {
|
|
|
860
862
|
isActive: isActive
|
|
861
863
|
}, props.children)) : null;
|
|
862
864
|
});
|
|
863
|
-
|
|
865
|
+
ContentComponent$1.displayName = 'Stepper.Content';
|
|
866
|
+
var Content$1 = ContentComponent$1;
|
|
864
867
|
|
|
865
868
|
var _excluded$4 = ["isHorizontal", "activeIndex"];
|
|
866
|
-
var
|
|
869
|
+
var StepperComponent = React.forwardRef(function (_ref, ref) {
|
|
867
870
|
var isHorizontal = _ref.isHorizontal,
|
|
868
871
|
activeIndex = _ref.activeIndex,
|
|
869
872
|
props = _objectWithoutProperties(_ref, _excluded$4);
|
|
@@ -885,16 +888,17 @@ var Stepper = React.forwardRef(function (_ref, ref) {
|
|
|
885
888
|
isHorizontal: isHorizontal
|
|
886
889
|
}, props)));
|
|
887
890
|
});
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
Stepper.Content = Content$1;
|
|
891
|
-
Stepper.displayName = 'Stepper';
|
|
892
|
-
Stepper.defaultProps = {
|
|
891
|
+
StepperComponent.displayName = 'Stepper';
|
|
892
|
+
StepperComponent.defaultProps = {
|
|
893
893
|
activeIndex: 0,
|
|
894
894
|
isHorizontal: false
|
|
895
895
|
};
|
|
896
|
+
var Stepper = StepperComponent;
|
|
897
|
+
Stepper.Content = Content$1;
|
|
898
|
+
Stepper.Label = Label$1;
|
|
899
|
+
Stepper.Step = Step;
|
|
896
900
|
|
|
897
|
-
var
|
|
901
|
+
var SectionComponent = React.forwardRef(function (props, ref) {
|
|
898
902
|
var _useAccordionContext = useAccordionContext(),
|
|
899
903
|
currentIndexRef = _useAccordionContext.currentIndexRef;
|
|
900
904
|
var sectionIndexRef = React.useRef(currentIndexRef.current++);
|
|
@@ -905,7 +909,8 @@ var Section = React.forwardRef(function (props, ref) {
|
|
|
905
909
|
ref: ref
|
|
906
910
|
}, props)));
|
|
907
911
|
});
|
|
908
|
-
|
|
912
|
+
SectionComponent.displayName = 'Accordion.Section';
|
|
913
|
+
var Section = SectionComponent;
|
|
909
914
|
|
|
910
915
|
var _path;
|
|
911
916
|
|
|
@@ -927,7 +932,7 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
|
|
|
927
932
|
|
|
928
933
|
var _excluded$3 = ["onClick", "onFocus", "onBlur", "onMouseOver", "onMouseOut", "children"],
|
|
929
934
|
_excluded2 = ["onClick", "onKeyDown"];
|
|
930
|
-
var
|
|
935
|
+
var HeaderComponent = React.forwardRef(function (props, ref) {
|
|
931
936
|
var _useAccordionContext = useAccordionContext(),
|
|
932
937
|
ariaLevel = _useAccordionContext.level,
|
|
933
938
|
isCompact = _useAccordionContext.isCompact,
|
|
@@ -1008,9 +1013,10 @@ var Header = React.forwardRef(function (props, ref) {
|
|
|
1008
1013
|
})
|
|
1009
1014
|
}, React__default["default"].createElement(SvgChevronDownStroke, null))));
|
|
1010
1015
|
});
|
|
1011
|
-
|
|
1016
|
+
HeaderComponent.displayName = 'Accordion.Header';
|
|
1017
|
+
var Header = HeaderComponent;
|
|
1012
1018
|
|
|
1013
|
-
var
|
|
1019
|
+
var LabelComponent = React.forwardRef(function (props, ref) {
|
|
1014
1020
|
var sectionIndex = useSectionContext();
|
|
1015
1021
|
var _useAccordionContext = useAccordionContext(),
|
|
1016
1022
|
isCompact = _useAccordionContext.isCompact,
|
|
@@ -1028,9 +1034,10 @@ var Label = React.forwardRef(function (props, ref) {
|
|
|
1028
1034
|
isCollapsible: isCollapsible
|
|
1029
1035
|
}, otherTriggerProps, props));
|
|
1030
1036
|
});
|
|
1031
|
-
|
|
1037
|
+
LabelComponent.displayName = 'Accordion.Label';
|
|
1038
|
+
var Label = LabelComponent;
|
|
1032
1039
|
|
|
1033
|
-
var
|
|
1040
|
+
var PanelComponent = React.forwardRef(function (props, ref) {
|
|
1034
1041
|
var _useAccordionContext = useAccordionContext(),
|
|
1035
1042
|
isCompact = _useAccordionContext.isCompact,
|
|
1036
1043
|
isBare = _useAccordionContext.isBare,
|
|
@@ -1069,10 +1076,11 @@ var Panel = React.forwardRef(function (props, ref) {
|
|
|
1069
1076
|
isAnimated: isAnimated
|
|
1070
1077
|
}, props.children));
|
|
1071
1078
|
});
|
|
1072
|
-
|
|
1079
|
+
PanelComponent.displayName = 'Accordion.Panel';
|
|
1080
|
+
var Panel = PanelComponent;
|
|
1073
1081
|
|
|
1074
1082
|
var _excluded$2 = ["level", "isBare", "onChange", "isCompact", "isAnimated", "isExpandable", "isCollapsible", "defaultExpandedSections", "expandedSections"];
|
|
1075
|
-
var
|
|
1083
|
+
var AccordionComponent = React.forwardRef(function (_ref, ref) {
|
|
1076
1084
|
var level = _ref.level,
|
|
1077
1085
|
isBare = _ref.isBare,
|
|
1078
1086
|
onChange = _ref.onChange,
|
|
@@ -1118,12 +1126,8 @@ var Accordion = React.forwardRef(function (_ref, ref) {
|
|
|
1118
1126
|
ref: ref
|
|
1119
1127
|
}, props)));
|
|
1120
1128
|
});
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
Accordion.Label = Label;
|
|
1124
|
-
Accordion.Panel = Panel;
|
|
1125
|
-
Accordion.displayName = 'Accordion';
|
|
1126
|
-
Accordion.defaultProps = {
|
|
1129
|
+
AccordionComponent.displayName = 'Accordion';
|
|
1130
|
+
AccordionComponent.defaultProps = {
|
|
1127
1131
|
isBare: false,
|
|
1128
1132
|
isCompact: false,
|
|
1129
1133
|
isAnimated: true,
|
|
@@ -1134,9 +1138,22 @@ Accordion.defaultProps = {
|
|
|
1134
1138
|
return undefined;
|
|
1135
1139
|
}
|
|
1136
1140
|
};
|
|
1141
|
+
var Accordion = AccordionComponent;
|
|
1142
|
+
Accordion.Header = Header;
|
|
1143
|
+
Accordion.Label = Label;
|
|
1144
|
+
Accordion.Panel = Panel;
|
|
1145
|
+
Accordion.Section = Section;
|
|
1146
|
+
|
|
1147
|
+
var OppositeContentComponent = React.forwardRef(function (props, ref) {
|
|
1148
|
+
return React__default["default"].createElement(StyledOppositeContent, _extends$3({
|
|
1149
|
+
ref: ref
|
|
1150
|
+
}, props));
|
|
1151
|
+
});
|
|
1152
|
+
OppositeContentComponent.displayName = 'Timeline.OppositeContent';
|
|
1153
|
+
var OppositeContent = OppositeContentComponent;
|
|
1137
1154
|
|
|
1138
1155
|
var _excluded$1 = ["icon", "surfaceColor"];
|
|
1139
|
-
var
|
|
1156
|
+
var ItemComponent = React.forwardRef(function (_ref, ref) {
|
|
1140
1157
|
var icon = _ref.icon,
|
|
1141
1158
|
surfaceColor = _ref.surfaceColor,
|
|
1142
1159
|
props = _objectWithoutProperties(_ref, _excluded$1);
|
|
@@ -1151,7 +1168,7 @@ var Item = React.forwardRef(function (_ref, ref) {
|
|
|
1151
1168
|
var hasOppositeContent = false;
|
|
1152
1169
|
React.Children.forEach(props.children, function (child) {
|
|
1153
1170
|
if (child) {
|
|
1154
|
-
if (child.type ===
|
|
1171
|
+
if (child.type === OppositeContent) {
|
|
1155
1172
|
hasOppositeContent = true;
|
|
1156
1173
|
}
|
|
1157
1174
|
}
|
|
@@ -1164,7 +1181,8 @@ var Item = React.forwardRef(function (_ref, ref) {
|
|
|
1164
1181
|
hasOppositeContent: hasOppositeContent
|
|
1165
1182
|
}, props)));
|
|
1166
1183
|
});
|
|
1167
|
-
|
|
1184
|
+
ItemComponent.displayName = 'Timeline.Item';
|
|
1185
|
+
var Item = ItemComponent;
|
|
1168
1186
|
|
|
1169
1187
|
var _circle;
|
|
1170
1188
|
|
|
@@ -1187,7 +1205,7 @@ var SvgCircleFullStroke = function SvgCircleFullStroke(props) {
|
|
|
1187
1205
|
})));
|
|
1188
1206
|
};
|
|
1189
1207
|
|
|
1190
|
-
var
|
|
1208
|
+
var ContentComponent = React.forwardRef(function (props, ref) {
|
|
1191
1209
|
var _useTimelineItemConte = useTimelineItemContext(),
|
|
1192
1210
|
icon = _useTimelineItemConte.icon,
|
|
1193
1211
|
surfaceColor = _useTimelineItemConte.surfaceColor;
|
|
@@ -1197,17 +1215,11 @@ var Content = React.forwardRef(function (props, ref) {
|
|
|
1197
1215
|
ref: ref
|
|
1198
1216
|
}, props)));
|
|
1199
1217
|
});
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
var OppositeContent = React.forwardRef(function (props, ref) {
|
|
1203
|
-
return React__default["default"].createElement(StyledOppositeContent, _extends$3({
|
|
1204
|
-
ref: ref
|
|
1205
|
-
}, props));
|
|
1206
|
-
});
|
|
1207
|
-
OppositeContent.displayName = 'OppositeContent';
|
|
1218
|
+
ContentComponent.displayName = 'Timeline.Content';
|
|
1219
|
+
var Content = ContentComponent;
|
|
1208
1220
|
|
|
1209
1221
|
var _excluded = ["isAlternate"];
|
|
1210
|
-
var
|
|
1222
|
+
var TimelineComponent = React.forwardRef(function (_ref, ref) {
|
|
1211
1223
|
var isAlternate = _ref.isAlternate,
|
|
1212
1224
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
1213
1225
|
var value = React.useMemo(function () {
|
|
@@ -1221,10 +1233,11 @@ var Timeline = React.forwardRef(function (_ref, ref) {
|
|
|
1221
1233
|
ref: ref
|
|
1222
1234
|
}, props)));
|
|
1223
1235
|
});
|
|
1224
|
-
|
|
1236
|
+
TimelineComponent.displayName = 'Timeline';
|
|
1237
|
+
var Timeline = TimelineComponent;
|
|
1225
1238
|
Timeline.Content = Content;
|
|
1239
|
+
Timeline.Item = Item;
|
|
1226
1240
|
Timeline.OppositeContent = OppositeContent;
|
|
1227
|
-
Timeline.displayName = 'Timeline';
|
|
1228
1241
|
|
|
1229
1242
|
exports.Accordion = Accordion;
|
|
1230
1243
|
exports.Stepper = Stepper;
|
package/dist/index.esm.js
CHANGED
|
@@ -185,7 +185,7 @@ var sizeStyles$1 = function sizeStyles(props) {
|
|
|
185
185
|
};
|
|
186
186
|
var StyledContent = styled.div.attrs({
|
|
187
187
|
'data-garden-id': COMPONENT_ID$k,
|
|
188
|
-
'data-garden-version': '8.
|
|
188
|
+
'data-garden-version': '8.48.0'
|
|
189
189
|
}).withConfig({
|
|
190
190
|
displayName: "StyledContent",
|
|
191
191
|
componentId: "sc-mazvvo-0"
|
|
@@ -201,7 +201,7 @@ StyledContent.defaultProps = {
|
|
|
201
201
|
var COMPONENT_ID$j = 'accordions.step_line';
|
|
202
202
|
var StyledLine = styled.div.attrs({
|
|
203
203
|
'data-garden-id': COMPONENT_ID$j,
|
|
204
|
-
'data-garden-version': '8.
|
|
204
|
+
'data-garden-version': '8.48.0'
|
|
205
205
|
}).withConfig({
|
|
206
206
|
displayName: "StyledLine",
|
|
207
207
|
componentId: "sc-1gkpjbr-0"
|
|
@@ -223,7 +223,7 @@ StyledLine.defaultProps = {
|
|
|
223
223
|
var COMPONENT_ID$i = 'accordions.step';
|
|
224
224
|
var StyledStep = styled.li.attrs({
|
|
225
225
|
'data-garden-id': COMPONENT_ID$i,
|
|
226
|
-
'data-garden-version': '8.
|
|
226
|
+
'data-garden-version': '8.48.0'
|
|
227
227
|
}).withConfig({
|
|
228
228
|
displayName: "StyledStep",
|
|
229
229
|
componentId: "sc-12fiwtz-0"
|
|
@@ -253,7 +253,7 @@ StyledStep.defaultProps = {
|
|
|
253
253
|
var COMPONENT_ID$h = 'accordions.step_inner_content';
|
|
254
254
|
var StyledInnerContent = styled.div.attrs({
|
|
255
255
|
'data-garden-id': COMPONENT_ID$h,
|
|
256
|
-
'data-garden-version': '8.
|
|
256
|
+
'data-garden-version': '8.48.0'
|
|
257
257
|
}).withConfig({
|
|
258
258
|
displayName: "StyledInnerContent",
|
|
259
259
|
componentId: "sc-1xs9fh7-0"
|
|
@@ -275,7 +275,7 @@ StyledInnerContent.defaultProps = {
|
|
|
275
275
|
var COMPONENT_ID$g = 'accordions.stepper';
|
|
276
276
|
var StyledStepper = styled.ol.attrs({
|
|
277
277
|
'data-garden-id': COMPONENT_ID$g,
|
|
278
|
-
'data-garden-version': '8.
|
|
278
|
+
'data-garden-version': '8.48.0'
|
|
279
279
|
}).withConfig({
|
|
280
280
|
displayName: "StyledStepper",
|
|
281
281
|
componentId: "sc-dsxw0f-0"
|
|
@@ -303,7 +303,7 @@ var colorStyles$2 = function colorStyles(props) {
|
|
|
303
303
|
};
|
|
304
304
|
var StyledIcon = styled.div.attrs({
|
|
305
305
|
'data-garden-id': COMPONENT_ID$f,
|
|
306
|
-
'data-garden-version': '8.
|
|
306
|
+
'data-garden-version': '8.48.0'
|
|
307
307
|
}).withConfig({
|
|
308
308
|
displayName: "StyledIcon",
|
|
309
309
|
componentId: "sc-v20nz9-1"
|
|
@@ -320,7 +320,7 @@ StyledIcon.defaultProps = {
|
|
|
320
320
|
var COMPONENT_ID$e = 'accordions.step_label';
|
|
321
321
|
var StyledLabel = styled.div.attrs({
|
|
322
322
|
'data-garden-id': COMPONENT_ID$e,
|
|
323
|
-
'data-garden-version': '8.
|
|
323
|
+
'data-garden-version': '8.48.0'
|
|
324
324
|
}).withConfig({
|
|
325
325
|
displayName: "StyledLabel",
|
|
326
326
|
componentId: "sc-1o82llj-0"
|
|
@@ -348,7 +348,7 @@ StyledLabel.defaultProps = {
|
|
|
348
348
|
var COMPONENT_ID$d = 'accordions.step_label_text';
|
|
349
349
|
var StyledLabelText = styled.div.attrs({
|
|
350
350
|
'data-garden-id': COMPONENT_ID$d,
|
|
351
|
-
'data-garden-version': '8.
|
|
351
|
+
'data-garden-version': '8.48.0'
|
|
352
352
|
}).withConfig({
|
|
353
353
|
displayName: "StyledLabelText",
|
|
354
354
|
componentId: "sc-111m5zo-0"
|
|
@@ -366,7 +366,7 @@ StyledLabelText.defaultProps = {
|
|
|
366
366
|
var COMPONENT_ID$c = 'accordions.accordion';
|
|
367
367
|
var StyledAccordion = styled.div.attrs({
|
|
368
368
|
'data-garden-id': COMPONENT_ID$c,
|
|
369
|
-
'data-garden-version': '8.
|
|
369
|
+
'data-garden-version': '8.48.0'
|
|
370
370
|
}).withConfig({
|
|
371
371
|
displayName: "StyledAccordion",
|
|
372
372
|
componentId: "sc-niv9ic-0"
|
|
@@ -396,7 +396,7 @@ var paddingStyles = function paddingStyles(props) {
|
|
|
396
396
|
};
|
|
397
397
|
var StyledPanel = styled.section.attrs({
|
|
398
398
|
'data-garden-id': COMPONENT_ID$b,
|
|
399
|
-
'data-garden-version': '8.
|
|
399
|
+
'data-garden-version': '8.48.0'
|
|
400
400
|
}).withConfig({
|
|
401
401
|
displayName: "StyledPanel",
|
|
402
402
|
componentId: "sc-1piryze-0"
|
|
@@ -413,7 +413,7 @@ StyledPanel.defaultProps = {
|
|
|
413
413
|
var COMPONENT_ID$a = 'accordions.section';
|
|
414
414
|
var StyledSection = styled.div.attrs({
|
|
415
415
|
'data-garden-id': COMPONENT_ID$a,
|
|
416
|
-
'data-garden-version': '8.
|
|
416
|
+
'data-garden-version': '8.48.0'
|
|
417
417
|
}).withConfig({
|
|
418
418
|
displayName: "StyledSection",
|
|
419
419
|
componentId: "sc-v2t9bd-0"
|
|
@@ -427,7 +427,7 @@ StyledSection.defaultProps = {
|
|
|
427
427
|
var COMPONENT_ID$9 = 'accordions.header';
|
|
428
428
|
var StyledHeader = styled.div.attrs({
|
|
429
429
|
'data-garden-id': COMPONENT_ID$9,
|
|
430
|
-
'data-garden-version': '8.
|
|
430
|
+
'data-garden-version': '8.48.0'
|
|
431
431
|
}).withConfig({
|
|
432
432
|
displayName: "StyledHeader",
|
|
433
433
|
componentId: "sc-2c6rbr-0"
|
|
@@ -455,7 +455,7 @@ var colorStyles$1 = function colorStyles(props) {
|
|
|
455
455
|
};
|
|
456
456
|
var StyledButton = styled.button.attrs({
|
|
457
457
|
'data-garden-id': COMPONENT_ID$8,
|
|
458
|
-
'data-garden-version': '8.
|
|
458
|
+
'data-garden-version': '8.48.0'
|
|
459
459
|
}).withConfig({
|
|
460
460
|
displayName: "StyledButton",
|
|
461
461
|
componentId: "sc-xj3hy7-0"
|
|
@@ -481,7 +481,7 @@ StyledButton.defaultProps = {
|
|
|
481
481
|
var COMPONENT_ID$7 = 'accordions.step_inner_panel';
|
|
482
482
|
var StyledInnerPanel = styled.div.attrs({
|
|
483
483
|
'data-garden-id': COMPONENT_ID$7,
|
|
484
|
-
'data-garden-version': '8.
|
|
484
|
+
'data-garden-version': '8.48.0'
|
|
485
485
|
}).withConfig({
|
|
486
486
|
displayName: "StyledInnerPanel",
|
|
487
487
|
componentId: "sc-8nbueg-0"
|
|
@@ -522,7 +522,7 @@ function (_ref) {
|
|
|
522
522
|
return cloneElement(Children.only(children), props);
|
|
523
523
|
}).attrs({
|
|
524
524
|
'data-garden-id': COMPONENT_ID$6,
|
|
525
|
-
'data-garden-version': '8.
|
|
525
|
+
'data-garden-version': '8.48.0'
|
|
526
526
|
}).withConfig({
|
|
527
527
|
displayName: "StyledRotateIcon",
|
|
528
528
|
componentId: "sc-hp435q-0"
|
|
@@ -544,7 +544,7 @@ StyledRotateIcon.defaultProps = {
|
|
|
544
544
|
var COMPONENT_ID$5 = 'timeline';
|
|
545
545
|
var StyledTimeline = styled.ol.attrs({
|
|
546
546
|
'data-garden-id': COMPONENT_ID$5,
|
|
547
|
-
'data-garden-version': '8.
|
|
547
|
+
'data-garden-version': '8.48.0'
|
|
548
548
|
}).withConfig({
|
|
549
549
|
displayName: "StyledTimeline",
|
|
550
550
|
componentId: "sc-pig5kv-0"
|
|
@@ -558,7 +558,7 @@ StyledTimeline.defaultProps = {
|
|
|
558
558
|
var COMPONENT_ID$4 = 'timeline.content.separator';
|
|
559
559
|
var StyledSeparator = styled.div.attrs({
|
|
560
560
|
'data-garden-id': COMPONENT_ID$4,
|
|
561
|
-
'data-garden-version': '8.
|
|
561
|
+
'data-garden-version': '8.48.0'
|
|
562
562
|
}).withConfig({
|
|
563
563
|
displayName: "StyledSeparator",
|
|
564
564
|
componentId: "sc-fki51e-0"
|
|
@@ -576,7 +576,7 @@ StyledSeparator.defaultProps = {
|
|
|
576
576
|
var COMPONENT_ID$3 = 'timeline.content';
|
|
577
577
|
var StyledTimelineContent = styled.div.attrs({
|
|
578
578
|
'data-garden-id': COMPONENT_ID$3,
|
|
579
|
-
'data-garden-version': '8.
|
|
579
|
+
'data-garden-version': '8.48.0'
|
|
580
580
|
}).withConfig({
|
|
581
581
|
displayName: "StyledContent__StyledTimelineContent",
|
|
582
582
|
componentId: "sc-19phgu1-0"
|
|
@@ -592,7 +592,7 @@ StyledTimelineContent.defaultProps = {
|
|
|
592
592
|
var COMPONENT_ID$2 = 'timeline.opposite.content';
|
|
593
593
|
var StyledOppositeContent = styled.div.attrs({
|
|
594
594
|
'data-garden-id': COMPONENT_ID$2,
|
|
595
|
-
'data-garden-version': '8.
|
|
595
|
+
'data-garden-version': '8.48.0'
|
|
596
596
|
}).withConfig({
|
|
597
597
|
displayName: "StyledOppositeContent",
|
|
598
598
|
componentId: "sc-jurh2k-0"
|
|
@@ -610,7 +610,7 @@ StyledOppositeContent.defaultProps = {
|
|
|
610
610
|
var COMPONENT_ID$1 = 'timeline.item';
|
|
611
611
|
var StyledTimelineItem = styled.li.attrs({
|
|
612
612
|
'data-garden-id': COMPONENT_ID$1,
|
|
613
|
-
'data-garden-version': '8.
|
|
613
|
+
'data-garden-version': '8.48.0'
|
|
614
614
|
}).withConfig({
|
|
615
615
|
displayName: "StyledItem__StyledTimelineItem",
|
|
616
616
|
componentId: "sc-5mcnzm-0"
|
|
@@ -634,7 +634,7 @@ var StyledItemIcon = styled(function (_ref) {
|
|
|
634
634
|
return cloneElement(Children.only(children), props);
|
|
635
635
|
}).attrs({
|
|
636
636
|
'data-garden-id': COMPONENT_ID,
|
|
637
|
-
'data-garden-version': '8.
|
|
637
|
+
'data-garden-version': '8.48.0'
|
|
638
638
|
}).withConfig({
|
|
639
639
|
displayName: "StyledItemIcon",
|
|
640
640
|
componentId: "sc-vz2l6e-0"
|
|
@@ -718,7 +718,7 @@ var useTimelineItemContext = function useTimelineItemContext() {
|
|
|
718
718
|
return context;
|
|
719
719
|
};
|
|
720
720
|
|
|
721
|
-
var
|
|
721
|
+
var StepComponent = forwardRef(function (props, ref) {
|
|
722
722
|
var _useStepperContext = useStepperContext(),
|
|
723
723
|
currentIndexRef = _useStepperContext.currentIndexRef,
|
|
724
724
|
isHorizontal = _useStepperContext.isHorizontal;
|
|
@@ -746,7 +746,8 @@ var Step = forwardRef(function (props, ref) {
|
|
|
746
746
|
isHorizontal: isHorizontal
|
|
747
747
|
}, props), isHorizontal && React__default.createElement(StyledLine, null), props.children));
|
|
748
748
|
});
|
|
749
|
-
|
|
749
|
+
StepComponent.displayName = 'Stepper.Step';
|
|
750
|
+
var Step = StepComponent;
|
|
750
751
|
|
|
751
752
|
var _path$1;
|
|
752
753
|
|
|
@@ -770,7 +771,7 @@ var SvgCheckSmStroke = function SvgCheckSmStroke(props) {
|
|
|
770
771
|
})));
|
|
771
772
|
};
|
|
772
773
|
|
|
773
|
-
var
|
|
774
|
+
var LabelComponent$1 = forwardRef(function (props, ref) {
|
|
774
775
|
var _useStepContext = useStepContext(),
|
|
775
776
|
currentStepIndex = _useStepContext.currentStepIndex;
|
|
776
777
|
var _useStepperContext = useStepperContext(),
|
|
@@ -793,13 +794,14 @@ var Label$1 = forwardRef(function (props, ref) {
|
|
|
793
794
|
isHorizontal: isHorizontal
|
|
794
795
|
}, props.children));
|
|
795
796
|
});
|
|
796
|
-
|
|
797
|
-
|
|
797
|
+
LabelComponent$1.displayName = 'Stepper.Label';
|
|
798
|
+
LabelComponent$1.propTypes = {
|
|
798
799
|
icon: PropTypes.node,
|
|
799
800
|
isHidden: PropTypes.bool
|
|
800
801
|
};
|
|
802
|
+
var Label$1 = LabelComponent$1;
|
|
801
803
|
|
|
802
|
-
var
|
|
804
|
+
var ContentComponent$1 = forwardRef(function (props, ref) {
|
|
803
805
|
var contentRef = useRef();
|
|
804
806
|
var _useStepperContext = useStepperContext(),
|
|
805
807
|
activeIndex = _useStepperContext.activeIndex,
|
|
@@ -830,10 +832,11 @@ var Content$1 = forwardRef(function (props, ref) {
|
|
|
830
832
|
isActive: isActive
|
|
831
833
|
}, props.children)) : null;
|
|
832
834
|
});
|
|
833
|
-
|
|
835
|
+
ContentComponent$1.displayName = 'Stepper.Content';
|
|
836
|
+
var Content$1 = ContentComponent$1;
|
|
834
837
|
|
|
835
838
|
var _excluded$4 = ["isHorizontal", "activeIndex"];
|
|
836
|
-
var
|
|
839
|
+
var StepperComponent = forwardRef(function (_ref, ref) {
|
|
837
840
|
var isHorizontal = _ref.isHorizontal,
|
|
838
841
|
activeIndex = _ref.activeIndex,
|
|
839
842
|
props = _objectWithoutProperties(_ref, _excluded$4);
|
|
@@ -855,16 +858,17 @@ var Stepper = forwardRef(function (_ref, ref) {
|
|
|
855
858
|
isHorizontal: isHorizontal
|
|
856
859
|
}, props)));
|
|
857
860
|
});
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
Stepper.Content = Content$1;
|
|
861
|
-
Stepper.displayName = 'Stepper';
|
|
862
|
-
Stepper.defaultProps = {
|
|
861
|
+
StepperComponent.displayName = 'Stepper';
|
|
862
|
+
StepperComponent.defaultProps = {
|
|
863
863
|
activeIndex: 0,
|
|
864
864
|
isHorizontal: false
|
|
865
865
|
};
|
|
866
|
+
var Stepper = StepperComponent;
|
|
867
|
+
Stepper.Content = Content$1;
|
|
868
|
+
Stepper.Label = Label$1;
|
|
869
|
+
Stepper.Step = Step;
|
|
866
870
|
|
|
867
|
-
var
|
|
871
|
+
var SectionComponent = forwardRef(function (props, ref) {
|
|
868
872
|
var _useAccordionContext = useAccordionContext(),
|
|
869
873
|
currentIndexRef = _useAccordionContext.currentIndexRef;
|
|
870
874
|
var sectionIndexRef = useRef(currentIndexRef.current++);
|
|
@@ -875,7 +879,8 @@ var Section = forwardRef(function (props, ref) {
|
|
|
875
879
|
ref: ref
|
|
876
880
|
}, props)));
|
|
877
881
|
});
|
|
878
|
-
|
|
882
|
+
SectionComponent.displayName = 'Accordion.Section';
|
|
883
|
+
var Section = SectionComponent;
|
|
879
884
|
|
|
880
885
|
var _path;
|
|
881
886
|
|
|
@@ -897,7 +902,7 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
|
|
|
897
902
|
|
|
898
903
|
var _excluded$3 = ["onClick", "onFocus", "onBlur", "onMouseOver", "onMouseOut", "children"],
|
|
899
904
|
_excluded2 = ["onClick", "onKeyDown"];
|
|
900
|
-
var
|
|
905
|
+
var HeaderComponent = forwardRef(function (props, ref) {
|
|
901
906
|
var _useAccordionContext = useAccordionContext(),
|
|
902
907
|
ariaLevel = _useAccordionContext.level,
|
|
903
908
|
isCompact = _useAccordionContext.isCompact,
|
|
@@ -978,9 +983,10 @@ var Header = forwardRef(function (props, ref) {
|
|
|
978
983
|
})
|
|
979
984
|
}, React__default.createElement(SvgChevronDownStroke, null))));
|
|
980
985
|
});
|
|
981
|
-
|
|
986
|
+
HeaderComponent.displayName = 'Accordion.Header';
|
|
987
|
+
var Header = HeaderComponent;
|
|
982
988
|
|
|
983
|
-
var
|
|
989
|
+
var LabelComponent = forwardRef(function (props, ref) {
|
|
984
990
|
var sectionIndex = useSectionContext();
|
|
985
991
|
var _useAccordionContext = useAccordionContext(),
|
|
986
992
|
isCompact = _useAccordionContext.isCompact,
|
|
@@ -998,9 +1004,10 @@ var Label = forwardRef(function (props, ref) {
|
|
|
998
1004
|
isCollapsible: isCollapsible
|
|
999
1005
|
}, otherTriggerProps, props));
|
|
1000
1006
|
});
|
|
1001
|
-
|
|
1007
|
+
LabelComponent.displayName = 'Accordion.Label';
|
|
1008
|
+
var Label = LabelComponent;
|
|
1002
1009
|
|
|
1003
|
-
var
|
|
1010
|
+
var PanelComponent = forwardRef(function (props, ref) {
|
|
1004
1011
|
var _useAccordionContext = useAccordionContext(),
|
|
1005
1012
|
isCompact = _useAccordionContext.isCompact,
|
|
1006
1013
|
isBare = _useAccordionContext.isBare,
|
|
@@ -1039,10 +1046,11 @@ var Panel = forwardRef(function (props, ref) {
|
|
|
1039
1046
|
isAnimated: isAnimated
|
|
1040
1047
|
}, props.children));
|
|
1041
1048
|
});
|
|
1042
|
-
|
|
1049
|
+
PanelComponent.displayName = 'Accordion.Panel';
|
|
1050
|
+
var Panel = PanelComponent;
|
|
1043
1051
|
|
|
1044
1052
|
var _excluded$2 = ["level", "isBare", "onChange", "isCompact", "isAnimated", "isExpandable", "isCollapsible", "defaultExpandedSections", "expandedSections"];
|
|
1045
|
-
var
|
|
1053
|
+
var AccordionComponent = forwardRef(function (_ref, ref) {
|
|
1046
1054
|
var level = _ref.level,
|
|
1047
1055
|
isBare = _ref.isBare,
|
|
1048
1056
|
onChange = _ref.onChange,
|
|
@@ -1088,12 +1096,8 @@ var Accordion = forwardRef(function (_ref, ref) {
|
|
|
1088
1096
|
ref: ref
|
|
1089
1097
|
}, props)));
|
|
1090
1098
|
});
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
Accordion.Label = Label;
|
|
1094
|
-
Accordion.Panel = Panel;
|
|
1095
|
-
Accordion.displayName = 'Accordion';
|
|
1096
|
-
Accordion.defaultProps = {
|
|
1099
|
+
AccordionComponent.displayName = 'Accordion';
|
|
1100
|
+
AccordionComponent.defaultProps = {
|
|
1097
1101
|
isBare: false,
|
|
1098
1102
|
isCompact: false,
|
|
1099
1103
|
isAnimated: true,
|
|
@@ -1104,9 +1108,22 @@ Accordion.defaultProps = {
|
|
|
1104
1108
|
return undefined;
|
|
1105
1109
|
}
|
|
1106
1110
|
};
|
|
1111
|
+
var Accordion = AccordionComponent;
|
|
1112
|
+
Accordion.Header = Header;
|
|
1113
|
+
Accordion.Label = Label;
|
|
1114
|
+
Accordion.Panel = Panel;
|
|
1115
|
+
Accordion.Section = Section;
|
|
1116
|
+
|
|
1117
|
+
var OppositeContentComponent = forwardRef(function (props, ref) {
|
|
1118
|
+
return React__default.createElement(StyledOppositeContent, _extends$3({
|
|
1119
|
+
ref: ref
|
|
1120
|
+
}, props));
|
|
1121
|
+
});
|
|
1122
|
+
OppositeContentComponent.displayName = 'Timeline.OppositeContent';
|
|
1123
|
+
var OppositeContent = OppositeContentComponent;
|
|
1107
1124
|
|
|
1108
1125
|
var _excluded$1 = ["icon", "surfaceColor"];
|
|
1109
|
-
var
|
|
1126
|
+
var ItemComponent = forwardRef(function (_ref, ref) {
|
|
1110
1127
|
var icon = _ref.icon,
|
|
1111
1128
|
surfaceColor = _ref.surfaceColor,
|
|
1112
1129
|
props = _objectWithoutProperties(_ref, _excluded$1);
|
|
@@ -1121,7 +1138,7 @@ var Item = forwardRef(function (_ref, ref) {
|
|
|
1121
1138
|
var hasOppositeContent = false;
|
|
1122
1139
|
Children.forEach(props.children, function (child) {
|
|
1123
1140
|
if (child) {
|
|
1124
|
-
if (child.type ===
|
|
1141
|
+
if (child.type === OppositeContent) {
|
|
1125
1142
|
hasOppositeContent = true;
|
|
1126
1143
|
}
|
|
1127
1144
|
}
|
|
@@ -1134,7 +1151,8 @@ var Item = forwardRef(function (_ref, ref) {
|
|
|
1134
1151
|
hasOppositeContent: hasOppositeContent
|
|
1135
1152
|
}, props)));
|
|
1136
1153
|
});
|
|
1137
|
-
|
|
1154
|
+
ItemComponent.displayName = 'Timeline.Item';
|
|
1155
|
+
var Item = ItemComponent;
|
|
1138
1156
|
|
|
1139
1157
|
var _circle;
|
|
1140
1158
|
|
|
@@ -1157,7 +1175,7 @@ var SvgCircleFullStroke = function SvgCircleFullStroke(props) {
|
|
|
1157
1175
|
})));
|
|
1158
1176
|
};
|
|
1159
1177
|
|
|
1160
|
-
var
|
|
1178
|
+
var ContentComponent = forwardRef(function (props, ref) {
|
|
1161
1179
|
var _useTimelineItemConte = useTimelineItemContext(),
|
|
1162
1180
|
icon = _useTimelineItemConte.icon,
|
|
1163
1181
|
surfaceColor = _useTimelineItemConte.surfaceColor;
|
|
@@ -1167,17 +1185,11 @@ var Content = forwardRef(function (props, ref) {
|
|
|
1167
1185
|
ref: ref
|
|
1168
1186
|
}, props)));
|
|
1169
1187
|
});
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
var OppositeContent = forwardRef(function (props, ref) {
|
|
1173
|
-
return React__default.createElement(StyledOppositeContent, _extends$3({
|
|
1174
|
-
ref: ref
|
|
1175
|
-
}, props));
|
|
1176
|
-
});
|
|
1177
|
-
OppositeContent.displayName = 'OppositeContent';
|
|
1188
|
+
ContentComponent.displayName = 'Timeline.Content';
|
|
1189
|
+
var Content = ContentComponent;
|
|
1178
1190
|
|
|
1179
1191
|
var _excluded = ["isAlternate"];
|
|
1180
|
-
var
|
|
1192
|
+
var TimelineComponent = forwardRef(function (_ref, ref) {
|
|
1181
1193
|
var isAlternate = _ref.isAlternate,
|
|
1182
1194
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
1183
1195
|
var value = useMemo(function () {
|
|
@@ -1191,9 +1203,10 @@ var Timeline = forwardRef(function (_ref, ref) {
|
|
|
1191
1203
|
ref: ref
|
|
1192
1204
|
}, props)));
|
|
1193
1205
|
});
|
|
1194
|
-
|
|
1206
|
+
TimelineComponent.displayName = 'Timeline';
|
|
1207
|
+
var Timeline = TimelineComponent;
|
|
1195
1208
|
Timeline.Content = Content;
|
|
1209
|
+
Timeline.Item = Item;
|
|
1196
1210
|
Timeline.OppositeContent = OppositeContent;
|
|
1197
|
-
Timeline.displayName = 'Timeline';
|
|
1198
1211
|
|
|
1199
1212
|
export { Accordion, Stepper, Timeline };
|
|
@@ -4,17 +4,11 @@
|
|
|
4
4
|
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
|
-
import {
|
|
7
|
+
import React, { HTMLAttributes } from 'react';
|
|
8
8
|
import { Section } from '../accordion/components/Section';
|
|
9
9
|
import { Header } from '../accordion/components/Header';
|
|
10
10
|
import { Label } from '../accordion/components/Label';
|
|
11
11
|
import { Panel } from '../accordion/components/Panel';
|
|
12
|
-
interface IStaticAccordionExport<T, P> extends ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>> {
|
|
13
|
-
Section: typeof Section;
|
|
14
|
-
Header: typeof Header;
|
|
15
|
-
Label: typeof Label;
|
|
16
|
-
Panel: typeof Panel;
|
|
17
|
-
}
|
|
18
12
|
export interface IAccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
19
13
|
/** Sets `aria-level` heading rank in the document structure */
|
|
20
14
|
level: number;
|
|
@@ -42,5 +36,9 @@ export interface IAccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'o
|
|
|
42
36
|
/**
|
|
43
37
|
* @extends HTMLAttributes<HTMLDivElement>
|
|
44
38
|
*/
|
|
45
|
-
export declare const Accordion:
|
|
46
|
-
|
|
39
|
+
export declare const Accordion: React.ForwardRefExoticComponent<IAccordionProps & React.RefAttributes<HTMLDivElement>> & {
|
|
40
|
+
Header: typeof Header;
|
|
41
|
+
Label: typeof Label;
|
|
42
|
+
Panel: typeof Panel;
|
|
43
|
+
Section: typeof Section;
|
|
44
|
+
};
|
|
@@ -5,4 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import React from 'react';
|
|
8
|
+
/**
|
|
9
|
+
* @extends HTMLAttributes<HTMLDivElement>
|
|
10
|
+
*/
|
|
8
11
|
export declare const Header: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -5,4 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import React from 'react';
|
|
8
|
+
/**
|
|
9
|
+
* @extends ButtonHTMLAttributes<HTMLButtonElement>
|
|
10
|
+
*/
|
|
8
11
|
export declare const Label: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -5,4 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import React from 'react';
|
|
8
|
+
/**
|
|
9
|
+
* @extends HTMLAttributes<HTMLElement>
|
|
10
|
+
*/
|
|
8
11
|
export declare const Panel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
|
|
@@ -5,4 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import React from 'react';
|
|
8
|
+
/**
|
|
9
|
+
* @extends HTMLAttributes<HTMLElement>
|
|
10
|
+
*/
|
|
8
11
|
export declare const Section: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -4,15 +4,10 @@
|
|
|
4
4
|
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
|
-
import { OlHTMLAttributes
|
|
7
|
+
import React, { OlHTMLAttributes } from 'react';
|
|
8
8
|
import { Step } from './components/Step';
|
|
9
9
|
import { Label } from './components/Label';
|
|
10
10
|
import { Content } from './components/Content';
|
|
11
|
-
interface IStaticStepperExport<T, P> extends ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>> {
|
|
12
|
-
Step: typeof Step;
|
|
13
|
-
Label: typeof Label;
|
|
14
|
-
Content: typeof Content;
|
|
15
|
-
}
|
|
16
11
|
export interface IStepperProps extends OlHTMLAttributes<HTMLOListElement> {
|
|
17
12
|
/** Defines the currently active step, starting at 0 */
|
|
18
13
|
activeIndex?: number;
|
|
@@ -22,5 +17,8 @@ export interface IStepperProps extends OlHTMLAttributes<HTMLOListElement> {
|
|
|
22
17
|
/**
|
|
23
18
|
* @extends OlHTMLAttributes<HTMLOListElement>
|
|
24
19
|
*/
|
|
25
|
-
export declare const Stepper:
|
|
26
|
-
|
|
20
|
+
export declare const Stepper: React.ForwardRefExoticComponent<IStepperProps & React.RefAttributes<HTMLOListElement>> & {
|
|
21
|
+
Content: typeof Content;
|
|
22
|
+
Label: typeof Label;
|
|
23
|
+
Step: typeof Step;
|
|
24
|
+
};
|
|
@@ -5,4 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import React from 'react';
|
|
8
|
+
/**
|
|
9
|
+
* @extends HTMLAttributes<HTMLDivElement>
|
|
10
|
+
*/
|
|
8
11
|
export declare const Content: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -4,12 +4,14 @@
|
|
|
4
4
|
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
|
-
import React from 'react';
|
|
8
|
-
interface
|
|
9
|
-
/** Replaces the
|
|
7
|
+
import React, { HTMLAttributes } from 'react';
|
|
8
|
+
export interface IStepperLabelProps extends HTMLAttributes<HTMLDivElement> {
|
|
9
|
+
/** Replaces the label number with an icon */
|
|
10
10
|
icon?: React.ReactNode;
|
|
11
|
-
/**
|
|
11
|
+
/** Hides the label text */
|
|
12
12
|
isHidden?: boolean;
|
|
13
13
|
}
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
/**
|
|
15
|
+
* @extends HTMLAttributes<HTMLDivElement>
|
|
16
|
+
*/
|
|
17
|
+
export declare const Label: React.ForwardRefExoticComponent<IStepperLabelProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -5,4 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import React from 'react';
|
|
8
|
+
/**
|
|
9
|
+
* @extends LiHTMLAttributes<HTMLLIElement>
|
|
10
|
+
*/
|
|
8
11
|
export declare const Step: React.ForwardRefExoticComponent<React.LiHTMLAttributes<HTMLLIElement> & React.RefAttributes<HTMLLIElement>>;
|
|
@@ -4,21 +4,19 @@
|
|
|
4
4
|
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
|
-
import
|
|
7
|
+
import React, { OlHTMLAttributes } from 'react';
|
|
8
8
|
import { Item } from '../timeline/components/Item';
|
|
9
9
|
import { Content } from '../timeline/components/Content';
|
|
10
10
|
import { OppositeContent } from '../timeline/components/OppositeContent';
|
|
11
|
-
interface
|
|
12
|
-
Item: typeof Item;
|
|
13
|
-
Content: typeof Content;
|
|
14
|
-
OppositeContent: typeof OppositeContent;
|
|
15
|
-
}
|
|
16
|
-
export interface ITimelineProps extends Omit<HTMLAttributes<HTMLOListElement>, 'onChange'> {
|
|
11
|
+
export interface ITimelineProps extends Omit<OlHTMLAttributes<HTMLOListElement>, 'onChange'> {
|
|
17
12
|
/** Applies alternate styling */
|
|
18
13
|
isAlternate?: boolean;
|
|
19
14
|
}
|
|
20
15
|
/**
|
|
21
|
-
* @extends
|
|
16
|
+
* @extends OlHTMLAttributes<HTMLOListElement>
|
|
22
17
|
*/
|
|
23
|
-
export declare const Timeline:
|
|
24
|
-
|
|
18
|
+
export declare const Timeline: React.ForwardRefExoticComponent<ITimelineProps & React.RefAttributes<HTMLOListElement>> & {
|
|
19
|
+
Content: typeof Content;
|
|
20
|
+
Item: typeof Item;
|
|
21
|
+
OppositeContent: typeof OppositeContent;
|
|
22
|
+
};
|
|
@@ -5,4 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import React from 'react';
|
|
8
|
+
/**
|
|
9
|
+
* @extends HTMLAttributes<HTMLDivElement>
|
|
10
|
+
*/
|
|
8
11
|
export declare const Content: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -4,11 +4,18 @@
|
|
|
4
4
|
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
|
-
import React, { ReactNode,
|
|
8
|
-
export interface
|
|
9
|
-
/**
|
|
7
|
+
import React, { ReactNode, LiHTMLAttributes } from 'react';
|
|
8
|
+
export interface ITimelineItemProps extends LiHTMLAttributes<HTMLLIElement> {
|
|
9
|
+
/** Replaces the dot with an icon */
|
|
10
10
|
icon?: ReactNode;
|
|
11
|
-
/** Provides surface color for an
|
|
11
|
+
/** Provides surface color for an icon placed on a non-white background */
|
|
12
12
|
surfaceColor?: string;
|
|
13
13
|
}
|
|
14
|
-
|
|
14
|
+
/**
|
|
15
|
+
* @deprecated use ITimelineItemProps instead
|
|
16
|
+
*/
|
|
17
|
+
export declare type IItem = ITimelineItemProps;
|
|
18
|
+
/**
|
|
19
|
+
* @extends LiHTMLAttributes<HTMLLIElement>
|
|
20
|
+
*/
|
|
21
|
+
export declare const Item: React.ForwardRefExoticComponent<ITimelineItemProps & React.RefAttributes<HTMLLIElement>>;
|
|
@@ -5,4 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import React from 'react';
|
|
8
|
+
/**
|
|
9
|
+
* @extends HTMLAttributes<HTMLDivElement>
|
|
10
|
+
*/
|
|
8
11
|
export declare const OppositeContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
package/dist/typings/index.d.ts
CHANGED
|
@@ -6,8 +6,9 @@
|
|
|
6
6
|
*/
|
|
7
7
|
export { Stepper } from './elements/stepper/Stepper';
|
|
8
8
|
export type { IStepperProps } from './elements/stepper/Stepper';
|
|
9
|
+
export type { IStepperLabelProps } from './elements/stepper/components/Label';
|
|
9
10
|
export { Accordion } from './elements/accordion/Accordion';
|
|
10
11
|
export type { IAccordionProps } from './elements/accordion/Accordion';
|
|
11
12
|
export { Timeline } from './elements/timeline/Timeline';
|
|
12
13
|
export type { ITimelineProps } from './elements/timeline/Timeline';
|
|
13
|
-
export type { IItem } from './elements/timeline/components/Item';
|
|
14
|
+
export type { ITimelineItemProps, IItem } from './elements/timeline/components/Item';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-accordions",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.48.0",
|
|
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.6",
|
|
39
|
-
"@zendeskgarden/react-theming": "^8.
|
|
39
|
+
"@zendeskgarden/react-theming": "^8.48.0",
|
|
40
40
|
"@zendeskgarden/svg-icons": "6.30.2"
|
|
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": "75f36aee62043004650c3eb2e1583b98a87d71f8"
|
|
54
54
|
}
|