@digital-ai/dot-components 2.10.2 → 2.11.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/CHANGE_LOG.md +35 -7
- package/README.md +0 -1
- package/index.esm.js +97 -79
- package/index.umd.js +130 -109
- package/lib/components/button/IconButton.d.ts +4 -1
- package/lib/components/button/IconButton.stories.d.ts +2 -1
- package/lib/components/dialog/Dialog.d.ts +4 -2
- package/lib/components/dialog/Dialog.stories.d.ts +1 -1
- package/lib/components/popper/Popper.d.ts +16 -1
- package/lib/components/popper/Popper.stories.d.ts +1 -1
- package/lib/components/stepper/Stepper.d.ts +3 -1
- package/lib/components/stepper/Stepper.stories.d.ts +1 -1
- package/lib/components/stepper/Stepper.styles.d.ts +4 -0
- package/lib/components/typography/Typography.d.ts +1 -1
- package/package.json +1 -1
package/CHANGE_LOG.md
CHANGED
|
@@ -1,16 +1,47 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [2.11.0](https://www.npmjs.com/package/@digital-ai/dot-components) (07/17/2023)
|
|
4
|
+
|
|
5
|
+
[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.21.12...2.11.0)
|
|
6
|
+
|
|
7
|
+
**Features:**
|
|
8
|
+
|
|
9
|
+
- S-85581: Add prop for IconButton square shape [\#1554](https://github.com/digital-ai/dot-components/pull/1554) ([CWSites](https://github.com/CWSites))
|
|
10
|
+
- S-90431: expose modifiers prop on popper [\#1550](https://github.com/digital-ai/dot-components/pull/1550) ([CWSites](https://github.com/CWSites))
|
|
11
|
+
- S-94255 `DotDialog` control open status when submitting [\#1548](https://github.com/digital-ai/dot-components/pull/1548) ([angel-git](https://github.com/angel-git))
|
|
12
|
+
|
|
13
|
+
**Fixed bugs:**
|
|
14
|
+
|
|
15
|
+
- D-25273: Stepper double scrollbar [\#1553](https://github.com/digital-ai/dot-components/pull/1553) ([ryangamble](https://github.com/ryangamble))
|
|
16
|
+
- D-25878: File Size calculated incorrectly in DotFileUpload Component [\#1552](https://github.com/digital-ai/dot-components/pull/1552) ([KumaranKanagaraj](https://github.com/KumaranKanagaraj))
|
|
17
|
+
- D-22374: Use `disabled` in favor of `readOnly` on input fields [\#1546](https://github.com/digital-ai/dot-components/pull/1546) ([CWSites](https://github.com/CWSites))
|
|
18
|
+
- D-24600: Update ButtonToggle icon color when primary [\#1545](https://github.com/digital-ai/dot-components/pull/1545) ([CWSites](https://github.com/CWSites))
|
|
19
|
+
|
|
20
|
+
**Misc:**
|
|
21
|
+
|
|
22
|
+
- S-84554: Update typography to latest Figma [\#1551](https://github.com/digital-ai/dot-components/pull/1551) ([CWSites](https://github.com/CWSites))
|
|
23
|
+
- S-91993: Address a11y issues raised by Storybook [\#1549](https://github.com/digital-ai/dot-components/pull/1549) ([CWSites](https://github.com/CWSites))
|
|
24
|
+
- D-25843: update dot-icons to be greater than 1.0.11 [\#1543](https://github.com/digital-ai/dot-components/pull/1543) ([CWSites](https://github.com/CWSites))
|
|
25
|
+
|
|
26
|
+
## [1.21.12](https://www.npmjs.com/package/@digital-ai/dot-components) (07/14/2023)
|
|
27
|
+
|
|
28
|
+
[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.10.2...1.21.12)
|
|
29
|
+
|
|
30
|
+
**Fixed bugs:**
|
|
31
|
+
|
|
32
|
+
- D-25878: File Size calculated incorrectly in DotFileUpload Component [\#1547](https://github.com/digital-ai/dot-components/pull/1547) ([KumaranKanagaraj](https://github.com/KumaranKanagaraj))
|
|
33
|
+
|
|
3
34
|
## [2.10.2](https://www.npmjs.com/package/@digital-ai/dot-components) (07/11/2023)
|
|
4
35
|
|
|
5
36
|
[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.10.1...2.10.2)
|
|
6
37
|
|
|
7
38
|
**Fixed bugs:**
|
|
8
39
|
|
|
9
|
-
- D-25823: adjust breadcrumb & link styles to match latest figma [\#1539](https://github.com/digital-ai/dot-components/pull/1539) ([CWSites](https://github.com/CWSites))
|
|
10
40
|
- D-25822: Remove improper capitalization of `onclick` [\#1538](https://github.com/digital-ai/dot-components/pull/1538) ([CWSites](https://github.com/CWSites))
|
|
11
41
|
|
|
12
42
|
**Misc:**
|
|
13
43
|
|
|
44
|
+
- D-25823: adjust breadcrumb & link styles to match latest figma [\#1539](https://github.com/digital-ai/dot-components/pull/1539) ([CWSites](https://github.com/CWSites))
|
|
14
45
|
- S-91990: LinearProgress add aria-label [\#1537](https://github.com/digital-ai/dot-components/pull/1537) ([CWSites](https://github.com/CWSites))
|
|
15
46
|
- S-91989: remove default aria-label, add link label to missing link [\#1536](https://github.com/digital-ai/dot-components/pull/1536) ([CWSites](https://github.com/CWSites))
|
|
16
47
|
- S-91989: update link to have aria-label [\#1534](https://github.com/digital-ai/dot-components/pull/1534) ([CWSites](https://github.com/CWSites))
|
|
@@ -95,10 +126,10 @@
|
|
|
95
126
|
|
|
96
127
|
- S-92312: Release workflow adjustments [\#1498](https://github.com/digital-ai/dot-components/pull/1498) ([CWSites](https://github.com/CWSites))
|
|
97
128
|
- S-92312: Fix issue with env context in release workflow [\#1496](https://github.com/digital-ai/dot-components/pull/1496) ([BoraAksoy](https://github.com/BoraAksoy))
|
|
98
|
-
- S-90263: Update `DotButton` to follow latest Figma design [\#1486](https://github.com/digital-ai/dot-components/pull/1486) ([CWSites](https://github.com/CWSites))
|
|
99
129
|
|
|
100
130
|
**Misc:**
|
|
101
131
|
|
|
132
|
+
- S-90263: Update `DotButton` to follow latest Figma design [\#1486](https://github.com/digital-ai/dot-components/pull/1486) ([CWSites](https://github.com/CWSites))
|
|
102
133
|
- S-92312: Refactor workflows to use latest features and action versions [\#1485](https://github.com/digital-ai/dot-components/pull/1485) ([BoraAksoy](https://github.com/BoraAksoy))
|
|
103
134
|
|
|
104
135
|
## [2.8.0](https://www.npmjs.com/package/@digital-ai/dot-components) (05/09/2023)
|
|
@@ -589,6 +620,7 @@
|
|
|
589
620
|
**Fixed bugs:**
|
|
590
621
|
|
|
591
622
|
- D-20378: update input margin to account for helper text [\#1212](https://github.com/digital-ai/dot-components/pull/1212) ([CWSites](https://github.com/CWSites))
|
|
623
|
+
- D-21918: Update `DotAlertBanner` to match Figma [\#1208](https://github.com/digital-ai/dot-components/pull/1208) ([CWSites](https://github.com/CWSites))
|
|
592
624
|
|
|
593
625
|
## [1.19.1](https://www.npmjs.com/package/@digital-ai/dot-components) (07/18/2022)
|
|
594
626
|
|
|
@@ -600,7 +632,6 @@
|
|
|
600
632
|
- D-20693: `DotSidebar` updates to match Figma [\#1214](https://github.com/digital-ai/dot-components/pull/1214) ([CWSites](https://github.com/CWSites))
|
|
601
633
|
- D-20329: add href to application logo [\#1213](https://github.com/digital-ai/dot-components/pull/1213) ([CWSites](https://github.com/CWSites))
|
|
602
634
|
- D-20404: update table border color [\#1211](https://github.com/digital-ai/dot-components/pull/1211) ([CWSites](https://github.com/CWSites))
|
|
603
|
-
- D-21918: Update `DotAlertBanner` to match Figma [\#1208](https://github.com/digital-ai/dot-components/pull/1208) ([CWSites](https://github.com/CWSites))
|
|
604
635
|
- D-21972: Adds props for custom tooltip position in ListItemProps [\#1207](https://github.com/digital-ai/dot-components/pull/1207) ([s-zimm](https://github.com/s-zimm))
|
|
605
636
|
|
|
606
637
|
## [1.19.0](https://www.npmjs.com/package/@digital-ai/dot-components) (07/11/2022)
|
|
@@ -1028,10 +1059,6 @@
|
|
|
1028
1059
|
|
|
1029
1060
|
[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.4.0...1.5.0)
|
|
1030
1061
|
|
|
1031
|
-
**Features:**
|
|
1032
|
-
|
|
1033
|
-
- S-80586: Breadcrumbs enhancement \(collapse and expand automatically\) [\#843](https://github.com/digital-ai/dot-components/pull/843) ([dmiletic85](https://github.com/dmiletic85))
|
|
1034
|
-
|
|
1035
1062
|
**Fixed bugs:**
|
|
1036
1063
|
|
|
1037
1064
|
- D-19294: Fix broken expand/collapse for uncontrolled accordion [\#866](https://github.com/digital-ai/dot-components/pull/866) ([selsemore](https://github.com/selsemore))
|
|
@@ -1048,6 +1075,7 @@
|
|
|
1048
1075
|
**Features:**
|
|
1049
1076
|
|
|
1050
1077
|
- S-80740: Expose DotAccordion 'expanded' and 'onChange' props [\#860](https://github.com/digital-ai/dot-components/pull/860) ([selsemore](https://github.com/selsemore))
|
|
1078
|
+
- S-80586: Breadcrumbs enhancement \(collapse and expand automatically\) [\#843](https://github.com/digital-ai/dot-components/pull/843) ([dmiletic85](https://github.com/dmiletic85))
|
|
1051
1079
|
|
|
1052
1080
|
**Fixed bugs:**
|
|
1053
1081
|
|
package/README.md
CHANGED
|
@@ -37,7 +37,6 @@ The `DotThemeProvider` provides the theme for the components in this library. Wh
|
|
|
37
37
|
Once your application is wrapped with `DotThemeProvider`, your styled components can use colors and spacings from the theme:
|
|
38
38
|
|
|
39
39
|
```jsx
|
|
40
|
-
import React from 'react';
|
|
41
40
|
import styled, { css } from 'styled-components';
|
|
42
41
|
|
|
43
42
|
const StyledWidget = styled.div`
|
package/index.esm.js
CHANGED
|
@@ -106,6 +106,9 @@ const DotTypography = ({
|
|
|
106
106
|
if (ariaRole === 'heading' && !ariaLevel) {
|
|
107
107
|
console.warn('please include ariaLevel when using ariaRole="heading"');
|
|
108
108
|
}
|
|
109
|
+
if (noMarginBottom) {
|
|
110
|
+
console.warn('`noMarginBottom` is deprecated, typography no longer has bottom margin included');
|
|
111
|
+
}
|
|
109
112
|
}, []);
|
|
110
113
|
return jsx(Typography, Object.assign({
|
|
111
114
|
"aria-label": ariaLabel,
|
|
@@ -227,7 +230,7 @@ const StyledInputLabel = styled(InputLabel).withConfig({
|
|
|
227
230
|
componentId: "sc-1mbn9f0-1"
|
|
228
231
|
})(["", ""], ({
|
|
229
232
|
theme
|
|
230
|
-
}) => css(["&.", "{transform:none;&.Mui-disabled .dot-typography{color:rgba(0,0,0,0.38);}&.Mui-error .dot-typography{color:", ";}.dot-typography{display:inline;}}"], labelClassName, theme.palette.error.main));
|
|
233
|
+
}) => css(["&.", "{margin-bottom:", ";transform:none;&.Mui-disabled .dot-typography{color:rgba(0,0,0,0.38);}&.Mui-error .dot-typography{color:", ";}.dot-typography{display:inline;}}"], labelClassName, theme.spacing(0.5), theme.palette.error.main));
|
|
231
234
|
const StyledTextFieldContainer = styled.div.withConfig({
|
|
232
235
|
displayName: "InputFormFieldsstyles__StyledTextFieldContainer",
|
|
233
236
|
componentId: "sc-1mbn9f0-2"
|
|
@@ -586,42 +589,35 @@ const typographyOptions = {
|
|
|
586
589
|
fontFamily: 'LatoBold, sans-serif',
|
|
587
590
|
fontSize: 17,
|
|
588
591
|
lineHeight: '23px',
|
|
589
|
-
letterSpacing: '0.03em'
|
|
590
|
-
marginBottom: 1
|
|
592
|
+
letterSpacing: '0.03em'
|
|
591
593
|
},
|
|
592
594
|
subtitle2: {
|
|
593
595
|
fontFamily: 'LatoBold, sans-serif',
|
|
594
596
|
fontSize: 14,
|
|
595
597
|
lineHeight: '20px',
|
|
596
|
-
letterSpacing: '0.03em'
|
|
597
|
-
marginBottom: 1
|
|
598
|
+
letterSpacing: '0.03em'
|
|
598
599
|
},
|
|
599
600
|
body1: {
|
|
600
601
|
fontSize: 14,
|
|
601
602
|
lineHeight: '20px',
|
|
602
|
-
letterSpacing: '0.03em'
|
|
603
|
-
marginBottom: 4
|
|
603
|
+
letterSpacing: '0.03em'
|
|
604
604
|
},
|
|
605
605
|
body2: {
|
|
606
606
|
fontSize: 12,
|
|
607
607
|
lineHeight: '16px',
|
|
608
|
-
letterSpacing: '0.02em'
|
|
609
|
-
marginBottom: 3
|
|
608
|
+
letterSpacing: '0.02em'
|
|
610
609
|
},
|
|
611
610
|
caption: {
|
|
612
611
|
fontSize: 10,
|
|
613
612
|
fontFamily: 'LatoBold, sans-serif',
|
|
614
|
-
fontWeight: 700,
|
|
615
613
|
lineHeight: '16px',
|
|
616
|
-
letterSpacing: '0.03em'
|
|
617
|
-
marginBottom: 3
|
|
614
|
+
letterSpacing: '0.03em'
|
|
618
615
|
},
|
|
619
616
|
overline: {
|
|
620
617
|
fontSize: 11,
|
|
621
618
|
lineHeight: '14px',
|
|
622
619
|
letterSpacing: '0.05em',
|
|
623
|
-
textTransform: 'uppercase'
|
|
624
|
-
marginBottom: 3
|
|
620
|
+
textTransform: 'uppercase'
|
|
625
621
|
},
|
|
626
622
|
button: {
|
|
627
623
|
fontSize: 14,
|
|
@@ -2311,7 +2307,9 @@ const rootClassName$S = 'dot-icon-btn';
|
|
|
2311
2307
|
const StyledIconButton = styled(IconButton).withConfig({
|
|
2312
2308
|
displayName: "IconButtonstyles__StyledIconButton",
|
|
2313
2309
|
componentId: "eko0kb-0"
|
|
2314
|
-
})(["", ""], (
|
|
2310
|
+
})(["", ""], ({
|
|
2311
|
+
theme
|
|
2312
|
+
}) => css(["&.", "{font-size:inherit;padding:10px;&.shape-square{border-radius:4px;border:1px solid ", ";padding:", ";}.dot-icon.MuiIcon-fontSizeSmall{padding:1px;}&.MuiIconButton-sizeSmall{padding:3px;}&.ripple-disabled{&:hover,&:active,&:focus{background:", ";}}"], rootClassName$S, theme.palette.grey[300], theme.spacing(1), hoverGray));
|
|
2315
2313
|
|
|
2316
2314
|
const DotIconButton = ({
|
|
2317
2315
|
ariaLabel,
|
|
@@ -2325,10 +2323,11 @@ const DotIconButton = ({
|
|
|
2325
2323
|
iconSize: _iconSize = 'small',
|
|
2326
2324
|
onClick,
|
|
2327
2325
|
tooltip,
|
|
2326
|
+
shape: _shape = 'circle',
|
|
2328
2327
|
size: _size = 'medium'
|
|
2329
2328
|
}) => {
|
|
2330
2329
|
const rippleClassName = _disableRipple ? 'ripple-disabled' : '';
|
|
2331
|
-
const rootClasses = useStylesWithRootClass(rootClassName$S, rippleClassName, className);
|
|
2330
|
+
const rootClasses = useStylesWithRootClass(rootClassName$S, rippleClassName, `shape-${_shape}`, className);
|
|
2332
2331
|
return jsx(DotTooltip, Object.assign({
|
|
2333
2332
|
"data-testid": "icon-button-tooltip",
|
|
2334
2333
|
title: tooltip
|
|
@@ -5535,6 +5534,7 @@ const DotDialog = ({
|
|
|
5535
5534
|
children,
|
|
5536
5535
|
closeIconVisible,
|
|
5537
5536
|
closeOnClickAway: _closeOnClickAway = true,
|
|
5537
|
+
closeOnSubmit: _closeOnSubmit = true,
|
|
5538
5538
|
hasPrimaryAction: _hasPrimaryAction = true,
|
|
5539
5539
|
onCancel,
|
|
5540
5540
|
onSubmit,
|
|
@@ -5566,7 +5566,7 @@ const DotDialog = ({
|
|
|
5566
5566
|
if (onSubmit) {
|
|
5567
5567
|
onSubmit(event);
|
|
5568
5568
|
}
|
|
5569
|
-
handleClose();
|
|
5569
|
+
_closeOnSubmit && handleClose();
|
|
5570
5570
|
};
|
|
5571
5571
|
return jsxs(StyledDialog, Object.assign({
|
|
5572
5572
|
"aria-label": ariaLabel,
|
|
@@ -6344,7 +6344,6 @@ function DotRadioButton({
|
|
|
6344
6344
|
};
|
|
6345
6345
|
// a11y: role doesn't need to be specified because it is done so automatically by the MUI component
|
|
6346
6346
|
const radioControl = jsx(StyledRadioButton, {
|
|
6347
|
-
"aria-checked": checked,
|
|
6348
6347
|
"aria-label": ariaLabel || label,
|
|
6349
6348
|
checked: checked,
|
|
6350
6349
|
classes: {
|
|
@@ -7821,20 +7820,27 @@ const StyledStepper = styled.div.withConfig({
|
|
|
7821
7820
|
componentId: "sc-1qka0yq-0"
|
|
7822
7821
|
})(["", ""], ({
|
|
7823
7822
|
theme
|
|
7824
|
-
}) => css(["&.", "{display:flex;align-items:flex-start;padding:0;width:100%;&.left{flex-direction:row;.", "{border-left:1px solid ", ";}}&.right{flex-direction:row-reverse;.", "{border-right:1px solid ", ";}}.", "{padding:", ";&.MuiStepper-horizontal{padding:0;display:flex;flex-direction:column;}.MuiStep-root{width:315px;.dot-icon{display:flex;background:", ";border-radius:50%;color:", ";height:28px;width:28px;}.dot-typography{color:", ";}.MuiStepContent-root{border-left-color:", ";}&.MuiStep-horizontal{padding:", ";.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}.dot-typography{color:", ";}.horizontal-step-description{color:", ";}&:hover{cursor:pointer;}&.completed{.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}}&.active{background:", ";}&.error{.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}}&.in-progress{.dot-avatar i:before{color:", ";}}}&.MuiStep-vertical{&.completed{.dot-typography,.dot-icon{color:", ";}}&.active{.dot-icon{background:", ";color:", ";}.step-label.dot-typography{color:", ";}.dot-typography{color:", ";}}&.error{.dot-typography{color:", ";}.dot-icon{background:", ";border:1px solid ", ";color:", ";}}}&.disabled{.dot-icon{color:", ";}.dot-typography{color:", ";}}&:last-of-type .MuiStepContent-root{border-left-color:transparent;}}}.", "{width:100
|
|
7823
|
+
}) => css(["&.", "{display:flex;align-items:flex-start;padding:0;width:100%;&.left{flex-direction:row;.", "{border-left:1px solid ", ";}}&.right{flex-direction:row-reverse;.", "{border-right:1px solid ", ";}}.", "{padding:", ";&.MuiStepper-horizontal{padding:0;display:flex;flex-direction:column;}.MuiStep-root{width:315px;.dot-icon{display:flex;background:", ";border-radius:50%;color:", ";height:28px;width:28px;}.dot-typography{color:", ";}.MuiStepContent-root{border-left-color:", ";}&.MuiStep-horizontal{padding:", ";.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}.dot-typography{color:", ";}.horizontal-step-description{color:", ";}&:hover{cursor:pointer;}&.completed{.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}}&.active{background:", ";}&.error{.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}}&.in-progress{.dot-avatar i:before{color:", ";}}}&.MuiStep-vertical{&.completed{.dot-typography,.dot-icon{color:", ";}}&.active{.dot-icon{background:", ";color:", ";}.step-label.dot-typography{color:", ";}.dot-typography{color:", ";}}&.error{.dot-typography{color:", ";}.dot-icon{background:", ";border:1px solid ", ";color:", ";}}}&.disabled{.dot-icon{color:", ";}.dot-typography{color:", ";}}&:last-of-type .MuiStepContent-root{border-left-color:transparent;}}}.", "{width:100%;.step-content-container{padding:", ";}}}"], rootClassName$i, contentClassName, theme.palette.layer.n200, contentClassName, theme.palette.layer.n200, stepListClassName, theme.spacing(3), theme.palette.primary['50'], theme.palette.primary['50'], theme.palette.layer.n300, theme.palette.layer.n300, theme.spacing(1), theme.palette.layer.n300, theme.palette.layer.n100, theme.palette.layer.n500, theme.palette.layer.n400, theme.palette.secondary['500'], theme.palette.secondary['50'], theme.palette.layer['n50'], theme.palette.error['500'], theme.palette.error['50'], theme.palette.primary['400'], theme.palette.layer.n700, theme.palette.primary['400'], theme.palette.layer.n0, theme.palette.primary['500'], theme.palette.layer.n700, theme.palette.error.main, theme.palette.layer.n0, theme.palette.error.main, theme.palette.error.main, theme.palette.primary['50'], theme.palette.layer.n300, contentClassName, theme.spacing(3, 3, 2, 3)));
|
|
7824
|
+
const ScrollbarContainer = styled.div.withConfig({
|
|
7825
|
+
displayName: "Stepperstyles__ScrollbarContainer",
|
|
7826
|
+
componentId: "sc-1qka0yq-1"
|
|
7827
|
+
})(["", ""], ({
|
|
7828
|
+
theme,
|
|
7829
|
+
offset
|
|
7830
|
+
}) => css(["height:", ";overflow-y:auto;&.center-content{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;}"], `calc(100vh - ${offset}px)`));
|
|
7825
7831
|
const StepContentWrapper = styled.div.withConfig({
|
|
7826
7832
|
displayName: "Stepperstyles__StepContentWrapper",
|
|
7827
|
-
componentId: "sc-1qka0yq-
|
|
7833
|
+
componentId: "sc-1qka0yq-2"
|
|
7828
7834
|
})(["flex:1;display:flex;justify-content:center;"]);
|
|
7829
7835
|
const StepDescription = styled(DotTypography).withConfig({
|
|
7830
7836
|
displayName: "Stepperstyles__StepDescription",
|
|
7831
|
-
componentId: "sc-1qka0yq-
|
|
7837
|
+
componentId: "sc-1qka0yq-3"
|
|
7832
7838
|
})(["", ""], ({
|
|
7833
7839
|
theme
|
|
7834
7840
|
}) => css(["margin-bottom:", ";"], theme.spacing(6)));
|
|
7835
7841
|
const StepActionsContainer = styled.div.withConfig({
|
|
7836
7842
|
displayName: "Stepperstyles__StepActionsContainer",
|
|
7837
|
-
componentId: "sc-1qka0yq-
|
|
7843
|
+
componentId: "sc-1qka0yq-4"
|
|
7838
7844
|
})(["", ""], ({
|
|
7839
7845
|
theme,
|
|
7840
7846
|
displayCancelButton
|
|
@@ -7865,6 +7871,7 @@ const DotStepper = ({
|
|
|
7865
7871
|
initialContent,
|
|
7866
7872
|
nextButtonText: _nextButtonText = 'Next',
|
|
7867
7873
|
nextStepDisabled: _nextStepDisabled = false,
|
|
7874
|
+
offset: _offset = 0,
|
|
7868
7875
|
onBack,
|
|
7869
7876
|
onCancel,
|
|
7870
7877
|
onSubmit,
|
|
@@ -7884,7 +7891,7 @@ const DotStepper = ({
|
|
|
7884
7891
|
const displayCancelButton = !!(!displayInitialContent && !displayFinalContent && onCancel);
|
|
7885
7892
|
const isLastStep = currentStep === steps.length && !finalContent || currentStep > steps.length && finalContent;
|
|
7886
7893
|
const rootClasses = useStylesWithRootClass(rootClassName$i, _stepsPosition, className);
|
|
7887
|
-
const
|
|
7894
|
+
const centerContentClass = displayInitialContent || displayFinalContent ? 'center-content' : '';
|
|
7888
7895
|
const stickyBottomClasses = useStylesWithRootClass(isStickyBottom ? 'with-top-border' : '');
|
|
7889
7896
|
const actionsClasses = useStylesWithRootClass('actions', displayInitialContent || displayFinalContent ? 'center-actions' : '');
|
|
7890
7897
|
useEffect(() => {
|
|
@@ -7972,16 +7979,21 @@ const DotStepper = ({
|
|
|
7972
7979
|
};
|
|
7973
7980
|
const renderContent = () => {
|
|
7974
7981
|
return jsxs("div", Object.assign({
|
|
7975
|
-
className:
|
|
7982
|
+
className: contentClassName,
|
|
7976
7983
|
ref: stepperContentRef
|
|
7977
7984
|
}, {
|
|
7978
|
-
children: [jsx(
|
|
7979
|
-
|
|
7985
|
+
children: [jsx(ScrollbarContainer, Object.assign({
|
|
7986
|
+
offset: _offset + 81,
|
|
7987
|
+
className: centerContentClass
|
|
7980
7988
|
}, {
|
|
7981
|
-
children: jsx(
|
|
7982
|
-
|
|
7989
|
+
children: jsx(CssGrid, Object.assign({
|
|
7990
|
+
className: "step-content-container"
|
|
7983
7991
|
}, {
|
|
7984
|
-
children:
|
|
7992
|
+
children: jsx(CssCell, Object.assign({}, defaultCellProps, {
|
|
7993
|
+
lg: getStepCellSize(currentStep)
|
|
7994
|
+
}, {
|
|
7995
|
+
children: getStepContent(currentStep)
|
|
7996
|
+
}), void 0)
|
|
7985
7997
|
}), void 0)
|
|
7986
7998
|
}), void 0), jsx(StepActionsContainer, Object.assign({
|
|
7987
7999
|
className: stickyBottomClasses,
|
|
@@ -8030,58 +8042,62 @@ const DotStepper = ({
|
|
|
8030
8042
|
return jsxs(StyledStepper, Object.assign({
|
|
8031
8043
|
className: rootClasses
|
|
8032
8044
|
}, {
|
|
8033
|
-
children: [jsx(
|
|
8034
|
-
|
|
8035
|
-
"aria-label": ariaLabel,
|
|
8036
|
-
className: stepListClassName,
|
|
8037
|
-
"data-testid": dataTestId,
|
|
8038
|
-
orientation: _orientation
|
|
8045
|
+
children: [jsx(ScrollbarContainer, Object.assign({
|
|
8046
|
+
offset: _offset
|
|
8039
8047
|
}, {
|
|
8040
|
-
children:
|
|
8041
|
-
|
|
8042
|
-
|
|
8043
|
-
|
|
8044
|
-
|
|
8045
|
-
|
|
8046
|
-
|
|
8047
|
-
|
|
8048
|
-
|
|
8049
|
-
|
|
8050
|
-
|
|
8051
|
-
|
|
8052
|
-
|
|
8053
|
-
|
|
8054
|
-
|
|
8055
|
-
|
|
8056
|
-
|
|
8057
|
-
|
|
8058
|
-
|
|
8059
|
-
}
|
|
8060
|
-
|
|
8061
|
-
|
|
8062
|
-
|
|
8063
|
-
|
|
8064
|
-
|
|
8065
|
-
|
|
8066
|
-
|
|
8067
|
-
|
|
8068
|
-
|
|
8069
|
-
|
|
8070
|
-
|
|
8071
|
-
|
|
8072
|
-
|
|
8048
|
+
children: jsx(Stepper, Object.assign({
|
|
8049
|
+
activeStep: currentStep,
|
|
8050
|
+
"aria-label": ariaLabel,
|
|
8051
|
+
className: stepListClassName,
|
|
8052
|
+
"data-testid": dataTestId,
|
|
8053
|
+
orientation: _orientation
|
|
8054
|
+
}, {
|
|
8055
|
+
children: steps.map((step, index) => {
|
|
8056
|
+
const isActive = currentStep === step.id;
|
|
8057
|
+
// TODO: use useStylesWithRootClass here
|
|
8058
|
+
const stepClasses = () => {
|
|
8059
|
+
return [step.className, isActive ? 'active' : '', step.completed ? 'completed' : '', step.disabled ? 'disabled' : '', step.error ? 'error' : '', step.inProgress ? 'in-progress' : ''].concat().join(' ').trim();
|
|
8060
|
+
};
|
|
8061
|
+
const getContent = () => {
|
|
8062
|
+
return isString$1(step.description) ? jsx(StepDescription, Object.assign({
|
|
8063
|
+
variant: "body2"
|
|
8064
|
+
}, {
|
|
8065
|
+
children: step.description
|
|
8066
|
+
}), void 0) : step.description;
|
|
8067
|
+
};
|
|
8068
|
+
const getHorizontalDescription = () => {
|
|
8069
|
+
return isString$1(step.description) ? jsx(DotTypography, Object.assign({
|
|
8070
|
+
variant: "body2",
|
|
8071
|
+
className: "horizontal-step-description"
|
|
8072
|
+
}, {
|
|
8073
|
+
children: step.description
|
|
8074
|
+
}), void 0) : null;
|
|
8075
|
+
};
|
|
8076
|
+
return jsxs(Step, Object.assign({
|
|
8077
|
+
active: isActive,
|
|
8078
|
+
classes: {
|
|
8079
|
+
root: stepClasses()
|
|
8080
|
+
},
|
|
8081
|
+
completed: step.completed,
|
|
8082
|
+
disabled: step.disabled,
|
|
8083
|
+
expanded: true
|
|
8073
8084
|
}, {
|
|
8074
|
-
children: [
|
|
8075
|
-
|
|
8076
|
-
|
|
8085
|
+
children: [jsxs(StepLabel, Object.assign({
|
|
8086
|
+
icon: getStepIcon(step.iconId, step.completed, step.error),
|
|
8087
|
+
onClick: () => navigateToStep(step.id)
|
|
8077
8088
|
}, {
|
|
8078
|
-
children:
|
|
8079
|
-
|
|
8080
|
-
|
|
8081
|
-
|
|
8082
|
-
|
|
8083
|
-
|
|
8084
|
-
|
|
8089
|
+
children: [jsx(DotTypography, Object.assign({
|
|
8090
|
+
className: "step-label",
|
|
8091
|
+
variant: isHorizontal ? 'body1' : 'subtitle1'
|
|
8092
|
+
}, {
|
|
8093
|
+
children: step.label
|
|
8094
|
+
}), void 0), _orientation === 'horizontal' && getHorizontalDescription()]
|
|
8095
|
+
}), void 0), _orientation === 'vertical' && jsx(StepContent, {
|
|
8096
|
+
children: getContent()
|
|
8097
|
+
}, void 0)]
|
|
8098
|
+
}), index);
|
|
8099
|
+
})
|
|
8100
|
+
}), void 0)
|
|
8085
8101
|
}), void 0), jsx(StepContentWrapper, {
|
|
8086
8102
|
children: renderContent()
|
|
8087
8103
|
}, void 0)]
|
|
@@ -9394,7 +9410,7 @@ const DotFileUpload = ({
|
|
|
9394
9410
|
} = useDropzone({
|
|
9395
9411
|
accept,
|
|
9396
9412
|
disabled: isUploadDisabled,
|
|
9397
|
-
maxSize: maxSize *
|
|
9413
|
+
maxSize: maxSize * 1024 * 1024,
|
|
9398
9414
|
multiple: allowMultiple,
|
|
9399
9415
|
noClick: true,
|
|
9400
9416
|
onDragEnter,
|
|
@@ -9472,6 +9488,7 @@ const DotPopper = ({
|
|
|
9472
9488
|
className,
|
|
9473
9489
|
'data-testid': dataTestId,
|
|
9474
9490
|
disablePortal,
|
|
9491
|
+
modifiers,
|
|
9475
9492
|
onClickAway,
|
|
9476
9493
|
open,
|
|
9477
9494
|
placement
|
|
@@ -9489,6 +9506,7 @@ const DotPopper = ({
|
|
|
9489
9506
|
className: rootClasses,
|
|
9490
9507
|
"data-testid": dataTestId,
|
|
9491
9508
|
disablePortal: disablePortal,
|
|
9509
|
+
modifiers: modifiers,
|
|
9492
9510
|
open: open,
|
|
9493
9511
|
placement: placement,
|
|
9494
9512
|
role: "presentation",
|
package/index.umd.js
CHANGED
|
@@ -239,6 +239,9 @@
|
|
|
239
239
|
if (ariaRole === 'heading' && !ariaLevel) {
|
|
240
240
|
console.warn('please include ariaLevel when using ariaRole="heading"');
|
|
241
241
|
}
|
|
242
|
+
if (noMarginBottom) {
|
|
243
|
+
console.warn('`noMarginBottom` is deprecated, typography no longer has bottom margin included');
|
|
244
|
+
}
|
|
242
245
|
}, []);
|
|
243
246
|
return jsxRuntime.jsx(material.Typography, __assign({
|
|
244
247
|
"aria-label": ariaLabel,
|
|
@@ -376,7 +379,7 @@
|
|
|
376
379
|
componentId: "sc-1mbn9f0-1"
|
|
377
380
|
})(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
378
381
|
var theme = _a.theme;
|
|
379
|
-
return styled.css(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n &.", " {\n transform: none;\n\n &.Mui-disabled .dot-typography {\n color: rgba(0, 0, 0, 0.38);\n }\n\n &.Mui-error .dot-typography {\n color: ", ";\n }\n\n .dot-typography {\n display: inline;\n }\n }\n "], ["\n &.", " {\n transform: none;\n\n &.Mui-disabled .dot-typography {\n color: rgba(0, 0, 0, 0.38);\n }\n\n &.Mui-error .dot-typography {\n color: ", ";\n }\n\n .dot-typography {\n display: inline;\n }\n }\n "])), labelClassName, theme.palette.error.main);
|
|
382
|
+
return styled.css(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n &.", " {\n margin-bottom: ", ";\n transform: none;\n\n &.Mui-disabled .dot-typography {\n color: rgba(0, 0, 0, 0.38);\n }\n\n &.Mui-error .dot-typography {\n color: ", ";\n }\n\n .dot-typography {\n display: inline;\n }\n }\n "], ["\n &.", " {\n margin-bottom: ", ";\n transform: none;\n\n &.Mui-disabled .dot-typography {\n color: rgba(0, 0, 0, 0.38);\n }\n\n &.Mui-error .dot-typography {\n color: ", ";\n }\n\n .dot-typography {\n display: inline;\n }\n }\n "])), labelClassName, theme.spacing(0.5), theme.palette.error.main);
|
|
380
383
|
});
|
|
381
384
|
var StyledTextFieldContainer = styled__default["default"].div.withConfig({
|
|
382
385
|
displayName: "InputFormFieldsstyles__StyledTextFieldContainer",
|
|
@@ -723,42 +726,35 @@
|
|
|
723
726
|
fontFamily: 'LatoBold, sans-serif',
|
|
724
727
|
fontSize: 17,
|
|
725
728
|
lineHeight: '23px',
|
|
726
|
-
letterSpacing: '0.03em'
|
|
727
|
-
marginBottom: 1
|
|
729
|
+
letterSpacing: '0.03em'
|
|
728
730
|
},
|
|
729
731
|
subtitle2: {
|
|
730
732
|
fontFamily: 'LatoBold, sans-serif',
|
|
731
733
|
fontSize: 14,
|
|
732
734
|
lineHeight: '20px',
|
|
733
|
-
letterSpacing: '0.03em'
|
|
734
|
-
marginBottom: 1
|
|
735
|
+
letterSpacing: '0.03em'
|
|
735
736
|
},
|
|
736
737
|
body1: {
|
|
737
738
|
fontSize: 14,
|
|
738
739
|
lineHeight: '20px',
|
|
739
|
-
letterSpacing: '0.03em'
|
|
740
|
-
marginBottom: 4
|
|
740
|
+
letterSpacing: '0.03em'
|
|
741
741
|
},
|
|
742
742
|
body2: {
|
|
743
743
|
fontSize: 12,
|
|
744
744
|
lineHeight: '16px',
|
|
745
|
-
letterSpacing: '0.02em'
|
|
746
|
-
marginBottom: 3
|
|
745
|
+
letterSpacing: '0.02em'
|
|
747
746
|
},
|
|
748
747
|
caption: {
|
|
749
748
|
fontSize: 10,
|
|
750
749
|
fontFamily: 'LatoBold, sans-serif',
|
|
751
|
-
fontWeight: 700,
|
|
752
750
|
lineHeight: '16px',
|
|
753
|
-
letterSpacing: '0.03em'
|
|
754
|
-
marginBottom: 3
|
|
751
|
+
letterSpacing: '0.03em'
|
|
755
752
|
},
|
|
756
753
|
overline: {
|
|
757
754
|
fontSize: 11,
|
|
758
755
|
lineHeight: '14px',
|
|
759
756
|
letterSpacing: '0.05em',
|
|
760
|
-
textTransform: 'uppercase'
|
|
761
|
-
marginBottom: 3
|
|
757
|
+
textTransform: 'uppercase'
|
|
762
758
|
},
|
|
763
759
|
button: {
|
|
764
760
|
fontSize: 14,
|
|
@@ -2595,8 +2591,9 @@
|
|
|
2595
2591
|
var StyledIconButton = styled__default["default"](material.IconButton).withConfig({
|
|
2596
2592
|
displayName: "IconButtonstyles__StyledIconButton",
|
|
2597
2593
|
componentId: "eko0kb-0"
|
|
2598
|
-
})(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function () {
|
|
2599
|
-
|
|
2594
|
+
})(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
2595
|
+
var theme = _a.theme;
|
|
2596
|
+
return styled.css(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n &.", " {\n font-size: inherit;\n padding: 10px;\n\n &.shape-square {\n border-radius: 4px;\n border: 1px solid ", ";\n padding: ", ";\n }\n\n .dot-icon.MuiIcon-fontSizeSmall {\n padding: 1px;\n }\n\n &.MuiIconButton-sizeSmall {\n padding: 3px;\n }\n\n &.ripple-disabled {\n &:hover, &:active, &:focus {\n background: ", ";\n }\n }\n "], ["\n &.", " {\n font-size: inherit;\n padding: 10px;\n\n &.shape-square {\n border-radius: 4px;\n border: 1px solid ", ";\n padding: ", ";\n }\n\n .dot-icon.MuiIcon-fontSizeSmall {\n padding: 1px;\n }\n\n &.MuiIconButton-sizeSmall {\n padding: 3px;\n }\n\n &.ripple-disabled {\n &:hover, &:active, &:focus {\n background: ", ";\n }\n }\n "])), rootClassName$S, theme.palette.grey[300], theme.spacing(1), hoverGray);
|
|
2600
2597
|
});
|
|
2601
2598
|
var templateObject_1$W, templateObject_2$T;
|
|
2602
2599
|
|
|
@@ -2617,10 +2614,12 @@
|
|
|
2617
2614
|
iconSize = _f === void 0 ? 'small' : _f,
|
|
2618
2615
|
onClick = _a.onClick,
|
|
2619
2616
|
tooltip = _a.tooltip,
|
|
2620
|
-
_g = _a.
|
|
2621
|
-
|
|
2617
|
+
_g = _a.shape,
|
|
2618
|
+
shape = _g === void 0 ? 'circle' : _g,
|
|
2619
|
+
_h = _a.size,
|
|
2620
|
+
size = _h === void 0 ? 'medium' : _h;
|
|
2622
2621
|
var rippleClassName = disableRipple ? 'ripple-disabled' : '';
|
|
2623
|
-
var rootClasses = useStylesWithRootClass(rootClassName$S, rippleClassName, className);
|
|
2622
|
+
var rootClasses = useStylesWithRootClass(rootClassName$S, rippleClassName, "shape-" + shape, className);
|
|
2624
2623
|
return jsxRuntime.jsx(DotTooltip, __assign({
|
|
2625
2624
|
"data-testid": "icon-button-tooltip",
|
|
2626
2625
|
title: tooltip
|
|
@@ -6056,8 +6055,10 @@
|
|
|
6056
6055
|
closeIconVisible = _a.closeIconVisible,
|
|
6057
6056
|
_c = _a.closeOnClickAway,
|
|
6058
6057
|
closeOnClickAway = _c === void 0 ? true : _c,
|
|
6059
|
-
_d = _a.
|
|
6060
|
-
|
|
6058
|
+
_d = _a.closeOnSubmit,
|
|
6059
|
+
closeOnSubmit = _d === void 0 ? true : _d,
|
|
6060
|
+
_e = _a.hasPrimaryAction,
|
|
6061
|
+
hasPrimaryAction = _e === void 0 ? true : _e,
|
|
6061
6062
|
onCancel = _a.onCancel,
|
|
6062
6063
|
onSubmit = _a.onSubmit,
|
|
6063
6064
|
open = _a.open,
|
|
@@ -6065,9 +6066,9 @@
|
|
|
6065
6066
|
title = _a.title;
|
|
6066
6067
|
var rootClasses = useStylesWithRootClass(rootClassName$x, className);
|
|
6067
6068
|
var cancelClasses = useStylesWithRootClass(cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.className, 'cancel-button');
|
|
6068
|
-
var
|
|
6069
|
-
isOpen =
|
|
6070
|
-
setIsOpen =
|
|
6069
|
+
var _f = React.useState(open),
|
|
6070
|
+
isOpen = _f[0],
|
|
6071
|
+
setIsOpen = _f[1];
|
|
6071
6072
|
React.useEffect(function () {
|
|
6072
6073
|
setIsOpen(open);
|
|
6073
6074
|
}, [open]);
|
|
@@ -6089,7 +6090,7 @@
|
|
|
6089
6090
|
if (onSubmit) {
|
|
6090
6091
|
onSubmit(event);
|
|
6091
6092
|
}
|
|
6092
|
-
handleClose();
|
|
6093
|
+
closeOnSubmit && handleClose();
|
|
6093
6094
|
};
|
|
6094
6095
|
return jsxRuntime.jsxs(StyledDialog, __assign({
|
|
6095
6096
|
"aria-label": ariaLabel,
|
|
@@ -6907,7 +6908,6 @@
|
|
|
6907
6908
|
};
|
|
6908
6909
|
// a11y: role doesn't need to be specified because it is done so automatically by the MUI component
|
|
6909
6910
|
var radioControl = jsxRuntime.jsx(StyledRadioButton, {
|
|
6910
|
-
"aria-checked": checked,
|
|
6911
6911
|
"aria-label": ariaLabel || label,
|
|
6912
6912
|
checked: checked,
|
|
6913
6913
|
classes: {
|
|
@@ -8502,28 +8502,36 @@
|
|
|
8502
8502
|
componentId: "sc-1qka0yq-0"
|
|
8503
8503
|
})(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
8504
8504
|
var theme = _a.theme;
|
|
8505
|
-
return styled.css(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n &.", " {\n display: flex;\n align-items: flex-start;\n padding: 0;\n width: 100%;\n\n &.left {\n flex-direction: row;\n .", " {\n border-left: 1px solid ", ";\n }\n }\n\n &.right {\n flex-direction: row-reverse;\n .", " {\n border-right: 1px solid ", ";\n }\n }\n\n .", " {\n padding: ", ";\n\n &.MuiStepper-horizontal {\n padding: 0;\n display: flex;\n flex-direction: column;\n }\n\n .MuiStep-root {\n width: 315px;\n\n .dot-icon {\n display: flex;\n background: ", ";\n border-radius: 50%;\n color: ", ";\n height: 28px;\n width: 28px;\n }\n\n .dot-typography {\n color: ", ";\n }\n\n .MuiStepContent-root {\n border-left-color: ", ";\n }\n\n &.MuiStep-horizontal {\n padding: ", ";\n\n .dot-avatar i:before {\n color: ", ";\n }\n .dot-avatar,\n .dot-icon {\n background: ", ";\n }\n .dot-typography {\n color: ", ";\n }\n .horizontal-step-description {\n color: ", ";\n }\n\n &:hover {\n cursor: pointer;\n }\n\n &.completed {\n .dot-avatar i:before {\n color: ", ";\n }\n .dot-avatar,\n .dot-icon {\n background: ", ";\n }\n }\n\n &.active {\n background: ", ";\n }\n\n &.error {\n .dot-avatar i:before {\n color: ", ";\n }\n .dot-avatar,\n .dot-icon {\n background: ", ";\n }\n }\n\n &.in-progress {\n .dot-avatar i:before {\n color: ", ";\n }\n }\n }\n\n &.MuiStep-vertical {\n &.completed {\n .dot-typography,\n .dot-icon {\n color: ", ";\n }\n }\n\n &.active {\n .dot-icon {\n background: ", ";\n color: ", ";\n }\n .step-label.dot-typography {\n color: ", ";\n }\n .dot-typography {\n color: ", ";\n }\n }\n\n &.error {\n .dot-typography {\n color: ", ";\n }\n\n .dot-icon {\n background: ", ";\n border: 1px solid ", ";\n color: ", ";\n }\n }\n }\n\n &.disabled {\n .dot-icon {\n color: ", ";\n }\n .dot-typography {\n color: ", ";\n }\n }\n\n &:last-of-type .MuiStepContent-root {\n border-left-color: transparent;\n }\n }\n }\n\n .", " {\n width: 100%;\n
|
|
8505
|
+
return styled.css(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n &.", " {\n display: flex;\n align-items: flex-start;\n padding: 0;\n width: 100%;\n\n &.left {\n flex-direction: row;\n .", " {\n border-left: 1px solid ", ";\n }\n }\n\n &.right {\n flex-direction: row-reverse;\n .", " {\n border-right: 1px solid ", ";\n }\n }\n\n .", " {\n padding: ", ";\n\n &.MuiStepper-horizontal {\n padding: 0;\n display: flex;\n flex-direction: column;\n }\n\n .MuiStep-root {\n width: 315px;\n\n .dot-icon {\n display: flex;\n background: ", ";\n border-radius: 50%;\n color: ", ";\n height: 28px;\n width: 28px;\n }\n\n .dot-typography {\n color: ", ";\n }\n\n .MuiStepContent-root {\n border-left-color: ", ";\n }\n\n &.MuiStep-horizontal {\n padding: ", ";\n\n .dot-avatar i:before {\n color: ", ";\n }\n .dot-avatar,\n .dot-icon {\n background: ", ";\n }\n .dot-typography {\n color: ", ";\n }\n .horizontal-step-description {\n color: ", ";\n }\n\n &:hover {\n cursor: pointer;\n }\n\n &.completed {\n .dot-avatar i:before {\n color: ", ";\n }\n .dot-avatar,\n .dot-icon {\n background: ", ";\n }\n }\n\n &.active {\n background: ", ";\n }\n\n &.error {\n .dot-avatar i:before {\n color: ", ";\n }\n .dot-avatar,\n .dot-icon {\n background: ", ";\n }\n }\n\n &.in-progress {\n .dot-avatar i:before {\n color: ", ";\n }\n }\n }\n\n &.MuiStep-vertical {\n &.completed {\n .dot-typography,\n .dot-icon {\n color: ", ";\n }\n }\n\n &.active {\n .dot-icon {\n background: ", ";\n color: ", ";\n }\n .step-label.dot-typography {\n color: ", ";\n }\n .dot-typography {\n color: ", ";\n }\n }\n\n &.error {\n .dot-typography {\n color: ", ";\n }\n\n .dot-icon {\n background: ", ";\n border: 1px solid ", ";\n color: ", ";\n }\n }\n }\n\n &.disabled {\n .dot-icon {\n color: ", ";\n }\n .dot-typography {\n color: ", ";\n }\n }\n\n &:last-of-type .MuiStepContent-root {\n border-left-color: transparent;\n }\n }\n }\n\n .", " {\n width: 100%;\n\n .step-content-container {\n padding: ", ";\n }\n }\n }\n "], ["\n &.", " {\n display: flex;\n align-items: flex-start;\n padding: 0;\n width: 100%;\n\n &.left {\n flex-direction: row;\n .", " {\n border-left: 1px solid ", ";\n }\n }\n\n &.right {\n flex-direction: row-reverse;\n .", " {\n border-right: 1px solid ", ";\n }\n }\n\n .", " {\n padding: ", ";\n\n &.MuiStepper-horizontal {\n padding: 0;\n display: flex;\n flex-direction: column;\n }\n\n .MuiStep-root {\n width: 315px;\n\n .dot-icon {\n display: flex;\n background: ", ";\n border-radius: 50%;\n color: ", ";\n height: 28px;\n width: 28px;\n }\n\n .dot-typography {\n color: ", ";\n }\n\n .MuiStepContent-root {\n border-left-color: ", ";\n }\n\n &.MuiStep-horizontal {\n padding: ", ";\n\n .dot-avatar i:before {\n color: ", ";\n }\n .dot-avatar,\n .dot-icon {\n background: ", ";\n }\n .dot-typography {\n color: ", ";\n }\n .horizontal-step-description {\n color: ", ";\n }\n\n &:hover {\n cursor: pointer;\n }\n\n &.completed {\n .dot-avatar i:before {\n color: ", ";\n }\n .dot-avatar,\n .dot-icon {\n background: ", ";\n }\n }\n\n &.active {\n background: ", ";\n }\n\n &.error {\n .dot-avatar i:before {\n color: ", ";\n }\n .dot-avatar,\n .dot-icon {\n background: ", ";\n }\n }\n\n &.in-progress {\n .dot-avatar i:before {\n color: ", ";\n }\n }\n }\n\n &.MuiStep-vertical {\n &.completed {\n .dot-typography,\n .dot-icon {\n color: ", ";\n }\n }\n\n &.active {\n .dot-icon {\n background: ", ";\n color: ", ";\n }\n .step-label.dot-typography {\n color: ", ";\n }\n .dot-typography {\n color: ", ";\n }\n }\n\n &.error {\n .dot-typography {\n color: ", ";\n }\n\n .dot-icon {\n background: ", ";\n border: 1px solid ", ";\n color: ", ";\n }\n }\n }\n\n &.disabled {\n .dot-icon {\n color: ", ";\n }\n .dot-typography {\n color: ", ";\n }\n }\n\n &:last-of-type .MuiStepContent-root {\n border-left-color: transparent;\n }\n }\n }\n\n .", " {\n width: 100%;\n\n .step-content-container {\n padding: ", ";\n }\n }\n }\n "])), rootClassName$i, contentClassName, theme.palette.layer.n200, contentClassName, theme.palette.layer.n200, stepListClassName, theme.spacing(3), theme.palette.primary['50'], theme.palette.primary['50'], theme.palette.layer.n300, theme.palette.layer.n300, theme.spacing(1), theme.palette.layer.n300, theme.palette.layer.n100, theme.palette.layer.n500, theme.palette.layer.n400, theme.palette.secondary['500'], theme.palette.secondary['50'], theme.palette.layer['n50'], theme.palette.error['500'], theme.palette.error['50'], theme.palette.primary['400'], theme.palette.layer.n700, theme.palette.primary['400'], theme.palette.layer.n0, theme.palette.primary['500'], theme.palette.layer.n700, theme.palette.error.main, theme.palette.layer.n0, theme.palette.error.main, theme.palette.error.main, theme.palette.primary['50'], theme.palette.layer.n300, contentClassName, theme.spacing(3, 3, 2, 3));
|
|
8506
|
+
});
|
|
8507
|
+
var ScrollbarContainer = styled__default["default"].div.withConfig({
|
|
8508
|
+
displayName: "Stepperstyles__ScrollbarContainer",
|
|
8509
|
+
componentId: "sc-1qka0yq-1"
|
|
8510
|
+
})(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
8511
|
+
_a.theme;
|
|
8512
|
+
var offset = _a.offset;
|
|
8513
|
+
return styled.css(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n height: ", ";\n overflow-y: auto;\n\n &.center-content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n }\n "], ["\n height: ", ";\n overflow-y: auto;\n\n &.center-content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n }\n "])), "calc(100vh - " + offset + "px)");
|
|
8506
8514
|
});
|
|
8507
8515
|
var StepContentWrapper = styled__default["default"].div.withConfig({
|
|
8508
8516
|
displayName: "Stepperstyles__StepContentWrapper",
|
|
8509
|
-
componentId: "sc-1qka0yq-
|
|
8510
|
-
})(
|
|
8517
|
+
componentId: "sc-1qka0yq-2"
|
|
8518
|
+
})(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n flex: 1;\n display: flex;\n justify-content: center;\n"], ["\n flex: 1;\n display: flex;\n justify-content: center;\n"])));
|
|
8511
8519
|
var StepDescription = styled__default["default"](DotTypography).withConfig({
|
|
8512
8520
|
displayName: "Stepperstyles__StepDescription",
|
|
8513
|
-
componentId: "sc-1qka0yq-
|
|
8514
|
-
})(
|
|
8521
|
+
componentId: "sc-1qka0yq-3"
|
|
8522
|
+
})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
8515
8523
|
var theme = _a.theme;
|
|
8516
|
-
return styled.css(
|
|
8524
|
+
return styled.css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin-bottom: ", ";\n "], ["\n margin-bottom: ", ";\n "])), theme.spacing(6));
|
|
8517
8525
|
});
|
|
8518
8526
|
var StepActionsContainer = styled__default["default"].div.withConfig({
|
|
8519
8527
|
displayName: "Stepperstyles__StepActionsContainer",
|
|
8520
|
-
componentId: "sc-1qka0yq-
|
|
8521
|
-
})(
|
|
8528
|
+
componentId: "sc-1qka0yq-4"
|
|
8529
|
+
})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
8522
8530
|
var theme = _a.theme,
|
|
8523
8531
|
displayCancelButton = _a.displayCancelButton;
|
|
8524
|
-
return styled.css(
|
|
8532
|
+
return styled.css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n padding: ", ";\n position: sticky;\n position: -webkit-sticky;\n bottom: 0;\n background-color: ", ";\n z-index: 2;\n\n &.with-top-border {\n border-top: 1px solid ", ";\n }\n\n .actions {\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n\n &.center-actions {\n justify-content: center;\n }\n\n .cancel-stepper {\n justify-self: flex-start;\n }\n\n .navigation-buttons {\n justify-self: flex-end;\n }\n }\n "], ["\n padding: ", ";\n position: sticky;\n position: -webkit-sticky;\n bottom: 0;\n background-color: ", ";\n z-index: 2;\n\n &.with-top-border {\n border-top: 1px solid ", ";\n }\n\n .actions {\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n\n &.center-actions {\n justify-content: center;\n }\n\n .cancel-stepper {\n justify-self: flex-start;\n }\n\n .navigation-buttons {\n justify-self: flex-end;\n }\n }\n "])), theme.spacing(2), theme.palette.layer['n0'], theme.palette.layer['n100'], displayCancelButton ? 'space-between' : 'flex-end');
|
|
8525
8533
|
});
|
|
8526
|
-
var templateObject_1$i, templateObject_2$h, templateObject_3$5, templateObject_4$4, templateObject_5$2, templateObject_6, templateObject_7;
|
|
8534
|
+
var templateObject_1$i, templateObject_2$h, templateObject_3$5, templateObject_4$4, templateObject_5$2, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
|
|
8527
8535
|
|
|
8528
8536
|
var defaultCellProps = {
|
|
8529
8537
|
center: false,
|
|
@@ -8553,24 +8561,26 @@
|
|
|
8553
8561
|
nextButtonText = _c === void 0 ? 'Next' : _c,
|
|
8554
8562
|
_d = _a.nextStepDisabled,
|
|
8555
8563
|
nextStepDisabled = _d === void 0 ? false : _d,
|
|
8564
|
+
_e = _a.offset,
|
|
8565
|
+
offset = _e === void 0 ? 0 : _e,
|
|
8556
8566
|
onBack = _a.onBack,
|
|
8557
8567
|
onCancel = _a.onCancel,
|
|
8558
8568
|
onSubmit = _a.onSubmit,
|
|
8559
|
-
|
|
8560
|
-
orientation =
|
|
8561
|
-
|
|
8562
|
-
disableUncompletedStepNav =
|
|
8569
|
+
_f = _a.orientation,
|
|
8570
|
+
orientation = _f === void 0 ? 'vertical' : _f,
|
|
8571
|
+
_g = _a.disableUncompletedStepNav,
|
|
8572
|
+
disableUncompletedStepNav = _g === void 0 ? false : _g,
|
|
8563
8573
|
steps = _a.steps,
|
|
8564
|
-
|
|
8565
|
-
stepsPosition =
|
|
8566
|
-
|
|
8567
|
-
submitButtonText =
|
|
8568
|
-
var
|
|
8569
|
-
currentStep =
|
|
8570
|
-
setActiveStep =
|
|
8571
|
-
var
|
|
8572
|
-
isStickyBottom =
|
|
8573
|
-
setIsStickyBottom =
|
|
8574
|
+
_h = _a.stepsPosition,
|
|
8575
|
+
stepsPosition = _h === void 0 ? 'left' : _h,
|
|
8576
|
+
_j = _a.submitButtonText,
|
|
8577
|
+
submitButtonText = _j === void 0 ? 'Complete' : _j;
|
|
8578
|
+
var _k = React.useState(activeStep),
|
|
8579
|
+
currentStep = _k[0],
|
|
8580
|
+
setActiveStep = _k[1];
|
|
8581
|
+
var _l = React.useState(false),
|
|
8582
|
+
isStickyBottom = _l[0],
|
|
8583
|
+
setIsStickyBottom = _l[1];
|
|
8574
8584
|
var actionsRef = React.useRef(null);
|
|
8575
8585
|
var stepperContentRef = React.useRef(null);
|
|
8576
8586
|
var isHorizontal = orientation === 'horizontal';
|
|
@@ -8579,7 +8589,7 @@
|
|
|
8579
8589
|
var displayCancelButton = !!(!displayInitialContent && !displayFinalContent && onCancel);
|
|
8580
8590
|
var isLastStep = currentStep === steps.length && !finalContent || currentStep > steps.length && finalContent;
|
|
8581
8591
|
var rootClasses = useStylesWithRootClass(rootClassName$i, stepsPosition, className);
|
|
8582
|
-
var
|
|
8592
|
+
var centerContentClass = displayInitialContent || displayFinalContent ? 'center-content' : '';
|
|
8583
8593
|
var stickyBottomClasses = useStylesWithRootClass(isStickyBottom ? 'with-top-border' : '');
|
|
8584
8594
|
var actionsClasses = useStylesWithRootClass('actions', displayInitialContent || displayFinalContent ? 'center-actions' : '');
|
|
8585
8595
|
React.useEffect(function () {
|
|
@@ -8680,16 +8690,21 @@
|
|
|
8680
8690
|
};
|
|
8681
8691
|
var renderContent = function renderContent() {
|
|
8682
8692
|
return jsxRuntime.jsxs("div", __assign({
|
|
8683
|
-
className:
|
|
8693
|
+
className: contentClassName,
|
|
8684
8694
|
ref: stepperContentRef
|
|
8685
8695
|
}, {
|
|
8686
|
-
children: [jsxRuntime.jsx(
|
|
8687
|
-
|
|
8696
|
+
children: [jsxRuntime.jsx(ScrollbarContainer, __assign({
|
|
8697
|
+
offset: offset + 81,
|
|
8698
|
+
className: centerContentClass
|
|
8688
8699
|
}, {
|
|
8689
|
-
children: jsxRuntime.jsx(
|
|
8690
|
-
|
|
8700
|
+
children: jsxRuntime.jsx(CssGrid, __assign({
|
|
8701
|
+
className: "step-content-container"
|
|
8691
8702
|
}, {
|
|
8692
|
-
children:
|
|
8703
|
+
children: jsxRuntime.jsx(CssCell, __assign({}, defaultCellProps, {
|
|
8704
|
+
lg: getStepCellSize(currentStep)
|
|
8705
|
+
}, {
|
|
8706
|
+
children: getStepContent(currentStep)
|
|
8707
|
+
}), void 0)
|
|
8693
8708
|
}), void 0)
|
|
8694
8709
|
}), void 0), jsxRuntime.jsx(StepActionsContainer, __assign({
|
|
8695
8710
|
className: stickyBottomClasses,
|
|
@@ -8738,60 +8753,64 @@
|
|
|
8738
8753
|
return jsxRuntime.jsxs(StyledStepper, __assign({
|
|
8739
8754
|
className: rootClasses
|
|
8740
8755
|
}, {
|
|
8741
|
-
children: [jsxRuntime.jsx(
|
|
8742
|
-
|
|
8743
|
-
"aria-label": ariaLabel,
|
|
8744
|
-
className: stepListClassName,
|
|
8745
|
-
"data-testid": dataTestId,
|
|
8746
|
-
orientation: orientation
|
|
8756
|
+
children: [jsxRuntime.jsx(ScrollbarContainer, __assign({
|
|
8757
|
+
offset: offset
|
|
8747
8758
|
}, {
|
|
8748
|
-
children:
|
|
8749
|
-
|
|
8750
|
-
|
|
8751
|
-
|
|
8752
|
-
|
|
8753
|
-
|
|
8754
|
-
|
|
8755
|
-
|
|
8756
|
-
|
|
8757
|
-
|
|
8758
|
-
|
|
8759
|
-
|
|
8760
|
-
|
|
8761
|
-
|
|
8762
|
-
|
|
8763
|
-
|
|
8764
|
-
|
|
8765
|
-
|
|
8766
|
-
|
|
8767
|
-
}
|
|
8768
|
-
|
|
8769
|
-
|
|
8770
|
-
|
|
8771
|
-
|
|
8772
|
-
|
|
8773
|
-
|
|
8774
|
-
|
|
8775
|
-
|
|
8776
|
-
|
|
8777
|
-
|
|
8778
|
-
|
|
8779
|
-
|
|
8780
|
-
|
|
8781
|
-
|
|
8782
|
-
|
|
8759
|
+
children: jsxRuntime.jsx(material.Stepper, __assign({
|
|
8760
|
+
activeStep: currentStep,
|
|
8761
|
+
"aria-label": ariaLabel,
|
|
8762
|
+
className: stepListClassName,
|
|
8763
|
+
"data-testid": dataTestId,
|
|
8764
|
+
orientation: orientation
|
|
8765
|
+
}, {
|
|
8766
|
+
children: steps.map(function (step, index) {
|
|
8767
|
+
var isActive = currentStep === step.id;
|
|
8768
|
+
// TODO: use useStylesWithRootClass here
|
|
8769
|
+
var stepClasses = function stepClasses() {
|
|
8770
|
+
return [step.className, isActive ? 'active' : '', step.completed ? 'completed' : '', step.disabled ? 'disabled' : '', step.error ? 'error' : '', step.inProgress ? 'in-progress' : ''].concat().join(' ').trim();
|
|
8771
|
+
};
|
|
8772
|
+
var getContent = function getContent() {
|
|
8773
|
+
return isString$1(step.description) ? jsxRuntime.jsx(StepDescription, __assign({
|
|
8774
|
+
variant: "body2"
|
|
8775
|
+
}, {
|
|
8776
|
+
children: step.description
|
|
8777
|
+
}), void 0) : step.description;
|
|
8778
|
+
};
|
|
8779
|
+
var getHorizontalDescription = function getHorizontalDescription() {
|
|
8780
|
+
return isString$1(step.description) ? jsxRuntime.jsx(DotTypography, __assign({
|
|
8781
|
+
variant: "body2",
|
|
8782
|
+
className: "horizontal-step-description"
|
|
8783
|
+
}, {
|
|
8784
|
+
children: step.description
|
|
8785
|
+
}), void 0) : null;
|
|
8786
|
+
};
|
|
8787
|
+
return jsxRuntime.jsxs(material.Step, __assign({
|
|
8788
|
+
active: isActive,
|
|
8789
|
+
classes: {
|
|
8790
|
+
root: stepClasses()
|
|
8791
|
+
},
|
|
8792
|
+
completed: step.completed,
|
|
8793
|
+
disabled: step.disabled,
|
|
8794
|
+
expanded: true
|
|
8783
8795
|
}, {
|
|
8784
|
-
children: [jsxRuntime.
|
|
8785
|
-
|
|
8786
|
-
|
|
8796
|
+
children: [jsxRuntime.jsxs(material.StepLabel, __assign({
|
|
8797
|
+
icon: getStepIcon(step.iconId, step.completed, step.error),
|
|
8798
|
+
onClick: function () {
|
|
8799
|
+
return navigateToStep(step.id);
|
|
8800
|
+
}
|
|
8787
8801
|
}, {
|
|
8788
|
-
children:
|
|
8789
|
-
|
|
8790
|
-
|
|
8791
|
-
|
|
8792
|
-
|
|
8793
|
-
|
|
8794
|
-
|
|
8802
|
+
children: [jsxRuntime.jsx(DotTypography, __assign({
|
|
8803
|
+
className: "step-label",
|
|
8804
|
+
variant: isHorizontal ? 'body1' : 'subtitle1'
|
|
8805
|
+
}, {
|
|
8806
|
+
children: step.label
|
|
8807
|
+
}), void 0), orientation === 'horizontal' && getHorizontalDescription()]
|
|
8808
|
+
}), void 0), orientation === 'vertical' && jsxRuntime.jsx(material.StepContent, {
|
|
8809
|
+
children: getContent()
|
|
8810
|
+
}, void 0)]
|
|
8811
|
+
}), index);
|
|
8812
|
+
})
|
|
8813
|
+
}), void 0)
|
|
8795
8814
|
}), void 0), jsxRuntime.jsx(StepContentWrapper, {
|
|
8796
8815
|
children: renderContent()
|
|
8797
8816
|
}, void 0)]
|
|
@@ -10222,7 +10241,7 @@
|
|
|
10222
10241
|
var _f = reactDropzone.useDropzone({
|
|
10223
10242
|
accept: accept,
|
|
10224
10243
|
disabled: isUploadDisabled,
|
|
10225
|
-
maxSize: maxSize *
|
|
10244
|
+
maxSize: maxSize * 1024 * 1024,
|
|
10226
10245
|
multiple: allowMultiple,
|
|
10227
10246
|
noClick: true,
|
|
10228
10247
|
onDragEnter: onDragEnter,
|
|
@@ -10306,6 +10325,7 @@
|
|
|
10306
10325
|
className = _a.className,
|
|
10307
10326
|
dataTestId = _a["data-testid"],
|
|
10308
10327
|
disablePortal = _a.disablePortal,
|
|
10328
|
+
modifiers = _a.modifiers,
|
|
10309
10329
|
onClickAway = _a.onClickAway,
|
|
10310
10330
|
open = _a.open,
|
|
10311
10331
|
placement = _a.placement;
|
|
@@ -10322,6 +10342,7 @@
|
|
|
10322
10342
|
className: rootClasses,
|
|
10323
10343
|
"data-testid": dataTestId,
|
|
10324
10344
|
disablePortal: disablePortal,
|
|
10345
|
+
modifiers: modifiers,
|
|
10325
10346
|
open: open,
|
|
10326
10347
|
placement: placement,
|
|
10327
10348
|
role: "presentation",
|
|
@@ -3,6 +3,7 @@ import { CommonProps } from '../CommonProps';
|
|
|
3
3
|
import { IconFontSize } from '../icon/Icon';
|
|
4
4
|
export declare type IconButtonColor = 'default' | 'inherit' | 'primary' | 'secondary';
|
|
5
5
|
export declare type IconButtonSize = 'small' | 'medium';
|
|
6
|
+
export declare type IconButtonShape = 'circle' | 'square';
|
|
6
7
|
export interface IconButtonProps extends CommonProps {
|
|
7
8
|
/** 'default', 'inherit', 'primary', 'secondary' */
|
|
8
9
|
color?: IconButtonColor;
|
|
@@ -16,9 +17,11 @@ export interface IconButtonProps extends CommonProps {
|
|
|
16
17
|
iconSize?: IconFontSize;
|
|
17
18
|
/** Event callback */
|
|
18
19
|
onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
|
|
20
|
+
/** Controls the shape of icon, can be 'circle' or 'square' */
|
|
21
|
+
shape?: IconButtonShape;
|
|
19
22
|
/** Determines the size of the button and padding around the icon */
|
|
20
23
|
size?: IconButtonSize;
|
|
21
24
|
/** Help text to be displayed on icon hover */
|
|
22
25
|
tooltip?: string;
|
|
23
26
|
}
|
|
24
|
-
export declare const DotIconButton: ({ ariaLabel, ariaRole, className, color, "data-testid": dataTestId, disabled, disableRipple, iconId, iconSize, onClick, tooltip, size, }: IconButtonProps) => JSX.Element;
|
|
27
|
+
export declare const DotIconButton: ({ ariaLabel, ariaRole, className, color, "data-testid": dataTestId, disabled, disableRipple, iconId, iconSize, onClick, tooltip, shape, size, }: IconButtonProps) => JSX.Element;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ComponentMeta } from '@storybook/react';
|
|
2
2
|
import { IconButtonProps } from './IconButton';
|
|
3
|
-
declare const _default: ComponentMeta<({ ariaLabel, ariaRole, className, color, "data-testid": dataTestId, disabled, disableRipple, iconId, iconSize, onClick, tooltip, size, }: IconButtonProps) => JSX.Element>;
|
|
3
|
+
declare const _default: ComponentMeta<({ ariaLabel, ariaRole, className, color, "data-testid": dataTestId, disabled, disableRipple, iconId, iconSize, onClick, tooltip, shape, size, }: IconButtonProps) => JSX.Element>;
|
|
4
4
|
export default _default;
|
|
5
5
|
export declare const Default: any;
|
|
6
6
|
export declare const WithPrimaryColor: any;
|
|
@@ -8,3 +8,4 @@ export declare const WithSecondaryColor: any;
|
|
|
8
8
|
export declare const WithSmallSize: any;
|
|
9
9
|
export declare const WithDisabledState: any;
|
|
10
10
|
export declare const WithDisabledRipple: any;
|
|
11
|
+
export declare const WithSquare: any;
|
|
@@ -22,8 +22,10 @@ export interface DialogProps extends CommonProps {
|
|
|
22
22
|
children?: ReactNode;
|
|
23
23
|
/** boolean that toggles visibility of close icon on top right of dialog header*/
|
|
24
24
|
closeIconVisible?: boolean;
|
|
25
|
-
/** boolean if true then the dialog will
|
|
25
|
+
/** boolean if true then the dialog will close*/
|
|
26
26
|
closeOnClickAway?: boolean;
|
|
27
|
+
/** boolean if true then the dialog will be closed on submit **/
|
|
28
|
+
closeOnSubmit?: boolean;
|
|
27
29
|
/** boolean that toggles existence of primary action button */
|
|
28
30
|
hasPrimaryAction?: boolean;
|
|
29
31
|
/** The callback to be executed when the action is cancelled */
|
|
@@ -37,4 +39,4 @@ export interface DialogProps extends CommonProps {
|
|
|
37
39
|
/** dialog heading */
|
|
38
40
|
title: ReactNode;
|
|
39
41
|
}
|
|
40
|
-
export declare const DotDialog: ({ ariaLabel, cancelButtonProps, cancelButtonVisible, className, "data-testid": dataTestId, children, closeIconVisible, closeOnClickAway, hasPrimaryAction, onCancel, onSubmit, open, submitButtonProps, title, }: DialogProps) => JSX.Element;
|
|
42
|
+
export declare const DotDialog: ({ ariaLabel, cancelButtonProps, cancelButtonVisible, className, "data-testid": dataTestId, children, closeIconVisible, closeOnClickAway, closeOnSubmit, hasPrimaryAction, onCancel, onSubmit, open, submitButtonProps, title, }: DialogProps) => JSX.Element;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Story, ComponentMeta } from '@storybook/react';
|
|
2
2
|
import { DialogProps } from './Dialog';
|
|
3
|
-
declare const _default: ComponentMeta<({ ariaLabel, cancelButtonProps, cancelButtonVisible, className, "data-testid": dataTestId, children, closeIconVisible, closeOnClickAway, hasPrimaryAction, onCancel, onSubmit, open, submitButtonProps, title, }: DialogProps) => JSX.Element>;
|
|
3
|
+
declare const _default: ComponentMeta<({ ariaLabel, cancelButtonProps, cancelButtonVisible, className, "data-testid": dataTestId, children, closeIconVisible, closeOnClickAway, closeOnSubmit, hasPrimaryAction, onCancel, onSubmit, open, submitButtonProps, title, }: DialogProps) => JSX.Element>;
|
|
4
4
|
export default _default;
|
|
5
5
|
export declare const Default: Story<DialogProps>;
|
|
@@ -1,6 +1,18 @@
|
|
|
1
1
|
import { KeyboardEvent, MouseEvent, ReactNode } from 'react';
|
|
2
2
|
import { PopperPlacementType } from '@mui/material';
|
|
3
3
|
import { CommonProps } from '../CommonProps';
|
|
4
|
+
declare type ModifiersPhase = 'afterMain' | 'afterRead' | 'afterWrite' | 'beforeMain' | 'beforeRead' | 'beforeWrite' | 'main' | 'read' | 'write';
|
|
5
|
+
export interface ModifersProps {
|
|
6
|
+
data?: Record<string, unknown>;
|
|
7
|
+
effect?: () => void;
|
|
8
|
+
enabled?: boolean;
|
|
9
|
+
fn?: () => void;
|
|
10
|
+
name?: string;
|
|
11
|
+
options?: Record<string, unknown>;
|
|
12
|
+
phase?: ModifiersPhase;
|
|
13
|
+
requires?: Array<string>;
|
|
14
|
+
requiresIfExists?: Array<string>;
|
|
15
|
+
}
|
|
4
16
|
export interface PopperProps extends CommonProps {
|
|
5
17
|
/** Element that popper is attached to */
|
|
6
18
|
anchorEl?: Element;
|
|
@@ -8,6 +20,8 @@ export interface PopperProps extends CommonProps {
|
|
|
8
20
|
children: ReactNode;
|
|
9
21
|
/** Disable the portal behavior. If `true`, children stay within parent DOM hierarchy. */
|
|
10
22
|
disablePortal?: boolean;
|
|
23
|
+
/** Used to specify the position more indepth, https://popper.js.org/docs/v2/modifiers/ */
|
|
24
|
+
modifiers?: ModifersProps[];
|
|
11
25
|
/** Event callback when leaving popper by clicking away */
|
|
12
26
|
onClickAway?: (event: KeyboardEvent | MouseEvent<Document>) => void;
|
|
13
27
|
/** If `true`, the popper is visible. */
|
|
@@ -15,4 +29,5 @@ export interface PopperProps extends CommonProps {
|
|
|
15
29
|
/** Popper placement. */
|
|
16
30
|
placement?: PopperPlacementType;
|
|
17
31
|
}
|
|
18
|
-
export declare const DotPopper: ({ ariaLabel, anchorEl, children, className, "data-testid": dataTestId, disablePortal, onClickAway, open, placement, }: PopperProps) => JSX.Element;
|
|
32
|
+
export declare const DotPopper: ({ ariaLabel, anchorEl, children, className, "data-testid": dataTestId, disablePortal, modifiers, onClickAway, open, placement, }: PopperProps) => JSX.Element;
|
|
33
|
+
export {};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ComponentMeta, Story } from '@storybook/react';
|
|
2
2
|
import { PopperProps } from './Popper';
|
|
3
|
-
declare const _default: ComponentMeta<({ ariaLabel, anchorEl, children, className, "data-testid": dataTestId, disablePortal, onClickAway, open, placement, }: PopperProps) => JSX.Element>;
|
|
3
|
+
declare const _default: ComponentMeta<({ ariaLabel, anchorEl, children, className, "data-testid": dataTestId, disablePortal, modifiers, onClickAway, open, placement, }: PopperProps) => JSX.Element>;
|
|
4
4
|
export default _default;
|
|
5
5
|
export declare const Default: Story<PopperProps>;
|
|
6
6
|
export declare const WithButtonAnchor: Story<PopperProps>;
|
|
@@ -44,6 +44,8 @@ export interface StepperProps extends CommonProps {
|
|
|
44
44
|
nextButtonText?: string;
|
|
45
45
|
/** if set to `true`, the "next" button will be disabled */
|
|
46
46
|
nextStepDisabled?: boolean;
|
|
47
|
+
/** the number of pixels occupied by elements other than the stepper in the page height **/
|
|
48
|
+
offset?: number;
|
|
47
49
|
/** function that is called if the "previous" button is clicked */
|
|
48
50
|
onBack?: () => void;
|
|
49
51
|
/** function that is called if the "cancel" button is clicked */
|
|
@@ -59,4 +61,4 @@ export interface StepperProps extends CommonProps {
|
|
|
59
61
|
/** if passed, will overwrite the default "submit" button text */
|
|
60
62
|
submitButtonText?: string;
|
|
61
63
|
}
|
|
62
|
-
export declare const DotStepper: ({ activeStep, ariaLabel, className, "data-testid": dataTestId, finalContent, initialContent, nextButtonText, nextStepDisabled, onBack, onCancel, onSubmit, orientation, disableUncompletedStepNav, steps, stepsPosition, submitButtonText, }: StepperProps) => JSX.Element;
|
|
64
|
+
export declare const DotStepper: ({ activeStep, ariaLabel, className, "data-testid": dataTestId, finalContent, initialContent, nextButtonText, nextStepDisabled, offset, onBack, onCancel, onSubmit, orientation, disableUncompletedStepNav, steps, stepsPosition, submitButtonText, }: StepperProps) => JSX.Element;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ComponentMeta } from '@storybook/react';
|
|
2
2
|
import { StepperProps } from './Stepper';
|
|
3
|
-
declare const _default: ComponentMeta<({ activeStep, ariaLabel, className, "data-testid": dataTestId, finalContent, initialContent, nextButtonText, nextStepDisabled, onBack, onCancel, onSubmit, orientation, disableUncompletedStepNav, steps, stepsPosition, submitButtonText, }: StepperProps) => JSX.Element>;
|
|
3
|
+
declare const _default: ComponentMeta<({ activeStep, ariaLabel, className, "data-testid": dataTestId, finalContent, initialContent, nextButtonText, nextStepDisabled, offset, onBack, onCancel, onSubmit, orientation, disableUncompletedStepNav, steps, stepsPosition, submitButtonText, }: StepperProps) => JSX.Element>;
|
|
4
4
|
export default _default;
|
|
5
5
|
export declare const Default: any;
|
|
6
6
|
export declare const WithStepDescription: any;
|
|
@@ -2,6 +2,10 @@ export declare const rootClassName = "dot-stepper";
|
|
|
2
2
|
export declare const stepListClassName = "dot-stepper-list";
|
|
3
3
|
export declare const contentClassName = "dot-stepper-content";
|
|
4
4
|
export declare const StyledStepper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
5
|
+
interface StyledScrollbarContainerProps {
|
|
6
|
+
offset?: number;
|
|
7
|
+
}
|
|
8
|
+
export declare const ScrollbarContainer: import("styled-components").StyledComponent<"div", any, StyledScrollbarContainerProps, never>;
|
|
5
9
|
export declare const StepContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
6
10
|
export declare const StepDescription: import("styled-components").StyledComponent<({ ariaLabel, ariaLevel, ariaRole, className, "data-testid": dataTestId, children, component, noMarginBottom, noWrap, variant, }: import("../typography/Typography").TypographyProps) => JSX.Element, any, {}, never>;
|
|
7
11
|
interface StyledStepActionsContainerProps {
|
|
@@ -8,7 +8,7 @@ export interface TypographyProps extends CommonProps {
|
|
|
8
8
|
children: ReactNode;
|
|
9
9
|
/** The component used for the root node. Either a string to use a HTML element or a component. */
|
|
10
10
|
component?: ElementType;
|
|
11
|
-
/** If true, the typography will not have a bottom margin set */
|
|
11
|
+
/** DEPRECATED: If true, the typography will not have a bottom margin set */
|
|
12
12
|
noMarginBottom?: boolean;
|
|
13
13
|
/** If true, the text will wrap and not be truncated */
|
|
14
14
|
noWrap?: boolean;
|