@digital-ai/dot-components 2.11.0 → 2.11.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGE_LOG.md +24 -4
- package/index.esm.js +59 -51
- package/index.umd.js +61 -53
- package/lib/components/auto-complete/utils/helpers.d.ts +1 -0
- package/package.json +1 -1
package/CHANGE_LOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [2.11.2](https://www.npmjs.com/package/@digital-ai/dot-components) (07/18/2023)
|
|
4
|
+
|
|
5
|
+
[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.11.1...2.11.2)
|
|
6
|
+
|
|
7
|
+
**Fixed bugs:**
|
|
8
|
+
|
|
9
|
+
- D-25273: Fix action bar placement [\#1562](https://github.com/digital-ai/dot-components/pull/1562) ([ryangamble](https://github.com/ryangamble))
|
|
10
|
+
- \#1556 Show placeholder when values are empty [\#1560](https://github.com/digital-ai/dot-components/pull/1560) ([angel-git](https://github.com/angel-git))
|
|
11
|
+
|
|
12
|
+
## [2.11.1](https://www.npmjs.com/package/@digital-ai/dot-components) (07/18/2023)
|
|
13
|
+
|
|
14
|
+
[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.11.0...2.11.1)
|
|
15
|
+
|
|
16
|
+
**Fixed bugs:**
|
|
17
|
+
|
|
18
|
+
- D-25927: adjust format of conditional rendering [\#1557](https://github.com/digital-ai/dot-components/pull/1557) ([CWSites](https://github.com/CWSites))
|
|
19
|
+
|
|
3
20
|
## [2.11.0](https://www.npmjs.com/package/@digital-ai/dot-components) (07/17/2023)
|
|
4
21
|
|
|
5
22
|
[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.21.12...2.11.0)
|
|
@@ -22,6 +39,7 @@
|
|
|
22
39
|
- S-84554: Update typography to latest Figma [\#1551](https://github.com/digital-ai/dot-components/pull/1551) ([CWSites](https://github.com/CWSites))
|
|
23
40
|
- S-91993: Address a11y issues raised by Storybook [\#1549](https://github.com/digital-ai/dot-components/pull/1549) ([CWSites](https://github.com/CWSites))
|
|
24
41
|
- 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))
|
|
42
|
+
- `master` \> `develop` [\#1532](https://github.com/digital-ai/dot-components/pull/1532) ([angel-git](https://github.com/angel-git))
|
|
25
43
|
|
|
26
44
|
## [1.21.12](https://www.npmjs.com/package/@digital-ai/dot-components) (07/14/2023)
|
|
27
45
|
|
|
@@ -45,7 +63,6 @@
|
|
|
45
63
|
- S-91990: LinearProgress add aria-label [\#1537](https://github.com/digital-ai/dot-components/pull/1537) ([CWSites](https://github.com/CWSites))
|
|
46
64
|
- 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))
|
|
47
65
|
- S-91989: update link to have aria-label [\#1534](https://github.com/digital-ai/dot-components/pull/1534) ([CWSites](https://github.com/CWSites))
|
|
48
|
-
- `master` \> `develop` [\#1532](https://github.com/digital-ai/dot-components/pull/1532) ([angel-git](https://github.com/angel-git))
|
|
49
66
|
|
|
50
67
|
## [2.10.1](https://www.npmjs.com/package/@digital-ai/dot-components) (06/29/2023)
|
|
51
68
|
|
|
@@ -1059,9 +1076,14 @@
|
|
|
1059
1076
|
|
|
1060
1077
|
[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.4.0...1.5.0)
|
|
1061
1078
|
|
|
1079
|
+
**Features:**
|
|
1080
|
+
|
|
1081
|
+
- S-80586: Breadcrumbs enhancement \(collapse and expand automatically\) [\#843](https://github.com/digital-ai/dot-components/pull/843) ([dmiletic85](https://github.com/dmiletic85))
|
|
1082
|
+
|
|
1062
1083
|
**Fixed bugs:**
|
|
1063
1084
|
|
|
1064
1085
|
- D-19294: Fix broken expand/collapse for uncontrolled accordion [\#866](https://github.com/digital-ai/dot-components/pull/866) ([selsemore](https://github.com/selsemore))
|
|
1086
|
+
- \#841 Fix DotDynamicForm initial form state for controls with initialValue false [\#842](https://github.com/digital-ai/dot-components/pull/842) ([selsemore](https://github.com/selsemore))
|
|
1065
1087
|
|
|
1066
1088
|
**Misc:**
|
|
1067
1089
|
|
|
@@ -1075,7 +1097,6 @@
|
|
|
1075
1097
|
**Features:**
|
|
1076
1098
|
|
|
1077
1099
|
- 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))
|
|
1079
1100
|
|
|
1080
1101
|
**Fixed bugs:**
|
|
1081
1102
|
|
|
@@ -1108,8 +1129,8 @@
|
|
|
1108
1129
|
|
|
1109
1130
|
**Fixed bugs:**
|
|
1110
1131
|
|
|
1111
|
-
- \#841 Fix DotDynamicForm initial form state for controls with initialValue false [\#842](https://github.com/digital-ai/dot-components/pull/842) ([selsemore](https://github.com/selsemore))
|
|
1112
1132
|
- D-19189: Extended sidenav drawer should collapse when another drawer option is clicked [\#830](https://github.com/digital-ai/dot-components/pull/830) ([dmiletic85](https://github.com/dmiletic85))
|
|
1133
|
+
- D-19148: Input elements not displaying correctly when `border-box` is used in consumer components [\#812](https://github.com/digital-ai/dot-components/pull/812) ([dmiletic85](https://github.com/dmiletic85))
|
|
1113
1134
|
|
|
1114
1135
|
**Misc:**
|
|
1115
1136
|
|
|
@@ -1145,7 +1166,6 @@
|
|
|
1145
1166
|
|
|
1146
1167
|
- \#795 Address AlertBanner style issues [\#815](https://github.com/digital-ai/dot-components/pull/815) ([angel-git](https://github.com/angel-git))
|
|
1147
1168
|
- D-19138: Remove margin-bottom from breadcrumbs [\#813](https://github.com/digital-ai/dot-components/pull/813) ([angel-git](https://github.com/angel-git))
|
|
1148
|
-
- D-19148: Input elements not displaying correctly when `border-box` is used in consumer components [\#812](https://github.com/digital-ai/dot-components/pull/812) ([dmiletic85](https://github.com/dmiletic85))
|
|
1149
1169
|
- \[D-18631\]\[D-18632\]\[D-18802\]:Focus state of avatar button and sidebar list item and inaccurate count of nav item [\#804](https://github.com/digital-ai/dot-components/pull/804) ([monapatel91](https://github.com/monapatel91))
|
|
1150
1170
|
|
|
1151
1171
|
**Misc:**
|
package/index.esm.js
CHANGED
|
@@ -4383,6 +4383,13 @@ const getChipsFromAutocomplete = ({
|
|
|
4383
4383
|
});
|
|
4384
4384
|
};
|
|
4385
4385
|
const checkIfDuplicateItem = (itemText, autocompleteOptions) => autocompleteOptions.some(autocompleteOption => autocompleteOption.title === itemText);
|
|
4386
|
+
const isEmptyValue = value => {
|
|
4387
|
+
if (Array.isArray(value)) {
|
|
4388
|
+
return value.length === 0;
|
|
4389
|
+
} else {
|
|
4390
|
+
return !value;
|
|
4391
|
+
}
|
|
4392
|
+
};
|
|
4386
4393
|
|
|
4387
4394
|
function ariaLabelOrAlternates(ariaLabel, label, placeholder) {
|
|
4388
4395
|
return ariaLabel || label || placeholder;
|
|
@@ -4431,7 +4438,7 @@ const DotAutoComplete = ({
|
|
|
4431
4438
|
value,
|
|
4432
4439
|
warning: _warning = false
|
|
4433
4440
|
}) => {
|
|
4434
|
-
const [showPlaceholder, setShowPlaceholder] = useState(
|
|
4441
|
+
const [showPlaceholder, setShowPlaceholder] = useState(isEmptyValue(value) && isEmptyValue(defaultValue));
|
|
4435
4442
|
const [isOpened, setIsOpened] = useState(false);
|
|
4436
4443
|
const [inputText, setInputText] = useState('');
|
|
4437
4444
|
// Used for focus management while popper is opened
|
|
@@ -4708,7 +4715,7 @@ const DotAutoComplete = ({
|
|
|
4708
4715
|
(_a = actionItemRef === null || actionItemRef === void 0 ? void 0 : actionItemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
4709
4716
|
}
|
|
4710
4717
|
},
|
|
4711
|
-
placeholder: showPlaceholder
|
|
4718
|
+
placeholder: showPlaceholder ? placeholder : undefined,
|
|
4712
4719
|
required: _required,
|
|
4713
4720
|
size: _size,
|
|
4714
4721
|
variant: "outlined"
|
|
@@ -7820,14 +7827,14 @@ const StyledStepper = styled.div.withConfig({
|
|
|
7820
7827
|
componentId: "sc-1qka0yq-0"
|
|
7821
7828
|
})(["", ""], ({
|
|
7822
7829
|
theme
|
|
7823
|
-
}) => css(["&.", "{display:flex;align-items:flex-start;padding:0;width:100%;&.left{flex-direction:row
|
|
7830
|
+
}) => css(["&.", "{display:flex;align-items:flex-start;padding:0;width:100%;&.left{flex-direction:row;}&.right{flex-direction:row-reverse;}.", "{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, 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
7831
|
const ScrollbarContainer = styled.div.withConfig({
|
|
7825
7832
|
displayName: "Stepperstyles__ScrollbarContainer",
|
|
7826
7833
|
componentId: "sc-1qka0yq-1"
|
|
7827
7834
|
})(["", ""], ({
|
|
7828
7835
|
theme,
|
|
7829
7836
|
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)
|
|
7837
|
+
}) => css(["height:", ";overflow-y:auto;&.left{border-right:1px solid ", ";}&.right{border-left:1px solid ", ";}&.center-content{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;}"], `calc(100vh - ${offset}px)`, theme.palette.layer.n200, theme.palette.layer.n200));
|
|
7831
7838
|
const StepContentWrapper = styled.div.withConfig({
|
|
7832
7839
|
displayName: "Stepperstyles__StepContentWrapper",
|
|
7833
7840
|
componentId: "sc-1qka0yq-2"
|
|
@@ -7891,7 +7898,7 @@ const DotStepper = ({
|
|
|
7891
7898
|
const displayCancelButton = !!(!displayInitialContent && !displayFinalContent && onCancel);
|
|
7892
7899
|
const isLastStep = currentStep === steps.length && !finalContent || currentStep > steps.length && finalContent;
|
|
7893
7900
|
const rootClasses = useStylesWithRootClass(rootClassName$i, _stepsPosition, className);
|
|
7894
|
-
const
|
|
7901
|
+
const stepContentClasses = displayInitialContent || displayFinalContent ? 'center-content' : '';
|
|
7895
7902
|
const stickyBottomClasses = useStylesWithRootClass(isStickyBottom ? 'with-top-border' : '');
|
|
7896
7903
|
const actionsClasses = useStylesWithRootClass('actions', displayInitialContent || displayFinalContent ? 'center-actions' : '');
|
|
7897
7904
|
useEffect(() => {
|
|
@@ -7978,15 +7985,15 @@ const DotStepper = ({
|
|
|
7978
7985
|
}
|
|
7979
7986
|
};
|
|
7980
7987
|
const renderContent = () => {
|
|
7981
|
-
return
|
|
7988
|
+
return jsx("div", Object.assign({
|
|
7982
7989
|
className: contentClassName,
|
|
7983
7990
|
ref: stepperContentRef
|
|
7984
7991
|
}, {
|
|
7985
|
-
children:
|
|
7986
|
-
offset: _offset
|
|
7987
|
-
className:
|
|
7992
|
+
children: jsxs(ScrollbarContainer, Object.assign({
|
|
7993
|
+
offset: _offset,
|
|
7994
|
+
className: stepContentClasses
|
|
7988
7995
|
}, {
|
|
7989
|
-
children: jsx(CssGrid, Object.assign({
|
|
7996
|
+
children: [jsx(CssGrid, Object.assign({
|
|
7990
7997
|
className: "step-content-container"
|
|
7991
7998
|
}, {
|
|
7992
7999
|
children: jsx(CssCell, Object.assign({}, defaultCellProps, {
|
|
@@ -7994,56 +8001,57 @@ const DotStepper = ({
|
|
|
7994
8001
|
}, {
|
|
7995
8002
|
children: getStepContent(currentStep)
|
|
7996
8003
|
}), void 0)
|
|
7997
|
-
}), void 0)
|
|
7998
|
-
|
|
7999
|
-
|
|
8000
|
-
|
|
8001
|
-
|
|
8002
|
-
|
|
8003
|
-
|
|
8004
|
-
|
|
8005
|
-
|
|
8006
|
-
|
|
8007
|
-
|
|
8008
|
-
|
|
8009
|
-
}
|
|
8010
|
-
|
|
8011
|
-
|
|
8012
|
-
|
|
8013
|
-
|
|
8014
|
-
|
|
8015
|
-
|
|
8016
|
-
"data-testid": "stepper-cancel-button"
|
|
8017
|
-
}, {
|
|
8018
|
-
children: "Cancel"
|
|
8019
|
-
}), void 0), jsxs("div", Object.assign({
|
|
8020
|
-
className: "navigation-buttons"
|
|
8021
|
-
}, {
|
|
8022
|
-
children: [!displayInitialContent && currentStep !== 1 && jsx(DotButton, Object.assign({
|
|
8023
|
-
onClick: handleBack,
|
|
8024
|
-
type: "outlined",
|
|
8025
|
-
"data-testid": "stepper-previous-button"
|
|
8004
|
+
}), void 0), jsx(StepActionsContainer, Object.assign({
|
|
8005
|
+
className: stickyBottomClasses,
|
|
8006
|
+
ref: actionsRef,
|
|
8007
|
+
displayCancelButton: displayCancelButton
|
|
8008
|
+
}, {
|
|
8009
|
+
children: jsx(CssGrid, {
|
|
8010
|
+
children: jsx(CssCell, Object.assign({}, defaultCellProps, {
|
|
8011
|
+
className: actionsClasses,
|
|
8012
|
+
lg: {
|
|
8013
|
+
start: 4,
|
|
8014
|
+
span: 6
|
|
8015
|
+
}
|
|
8016
|
+
}, {
|
|
8017
|
+
children: jsxs(Fragment, {
|
|
8018
|
+
children: [displayCancelButton && jsx(DotButton, Object.assign({
|
|
8019
|
+
className: "cancel-stepper",
|
|
8020
|
+
onClick: onCancel,
|
|
8021
|
+
type: "text",
|
|
8022
|
+
"data-testid": "stepper-cancel-button"
|
|
8026
8023
|
}, {
|
|
8027
|
-
children: "
|
|
8028
|
-
}), void 0),
|
|
8029
|
-
|
|
8030
|
-
disabled: _nextStepDisabled,
|
|
8031
|
-
"data-testid": "stepper-next-button"
|
|
8024
|
+
children: "Cancel"
|
|
8025
|
+
}), void 0), jsxs("div", Object.assign({
|
|
8026
|
+
className: "navigation-buttons"
|
|
8032
8027
|
}, {
|
|
8033
|
-
children:
|
|
8028
|
+
children: [!displayInitialContent && currentStep !== 1 && jsx(DotButton, Object.assign({
|
|
8029
|
+
onClick: handleBack,
|
|
8030
|
+
type: "outlined",
|
|
8031
|
+
"data-testid": "stepper-previous-button"
|
|
8032
|
+
}, {
|
|
8033
|
+
children: "Previous"
|
|
8034
|
+
}), void 0), jsx(DotButton, Object.assign({
|
|
8035
|
+
onClick: handleNext,
|
|
8036
|
+
disabled: _nextStepDisabled,
|
|
8037
|
+
"data-testid": "stepper-next-button"
|
|
8038
|
+
}, {
|
|
8039
|
+
children: isLastStep ? _submitButtonText : _nextButtonText
|
|
8040
|
+
}), void 0)]
|
|
8034
8041
|
}), void 0)]
|
|
8035
|
-
}
|
|
8036
|
-
}, void 0)
|
|
8037
|
-
}
|
|
8038
|
-
}, void 0)
|
|
8039
|
-
}), void 0)
|
|
8042
|
+
}, void 0)
|
|
8043
|
+
}), void 0)
|
|
8044
|
+
}, void 0)
|
|
8045
|
+
}), void 0)]
|
|
8046
|
+
}), void 0)
|
|
8040
8047
|
}), void 0);
|
|
8041
8048
|
};
|
|
8042
8049
|
return jsxs(StyledStepper, Object.assign({
|
|
8043
8050
|
className: rootClasses
|
|
8044
8051
|
}, {
|
|
8045
8052
|
children: [jsx(ScrollbarContainer, Object.assign({
|
|
8046
|
-
offset: _offset
|
|
8053
|
+
offset: _offset,
|
|
8054
|
+
className: _stepsPosition
|
|
8047
8055
|
}, {
|
|
8048
8056
|
children: jsx(Stepper, Object.assign({
|
|
8049
8057
|
activeStep: currentStep,
|
package/index.umd.js
CHANGED
|
@@ -4830,6 +4830,13 @@
|
|
|
4830
4830
|
return autocompleteOption.title === itemText;
|
|
4831
4831
|
});
|
|
4832
4832
|
};
|
|
4833
|
+
var isEmptyValue = function isEmptyValue(value) {
|
|
4834
|
+
if (Array.isArray(value)) {
|
|
4835
|
+
return value.length === 0;
|
|
4836
|
+
} else {
|
|
4837
|
+
return !value;
|
|
4838
|
+
}
|
|
4839
|
+
};
|
|
4833
4840
|
|
|
4834
4841
|
function ariaLabelOrAlternates(ariaLabel, label, placeholder) {
|
|
4835
4842
|
return ariaLabel || label || placeholder;
|
|
@@ -4890,7 +4897,7 @@
|
|
|
4890
4897
|
value = _a.value,
|
|
4891
4898
|
_p = _a.warning,
|
|
4892
4899
|
warning = _p === void 0 ? false : _p;
|
|
4893
|
-
var _q = React.useState(
|
|
4900
|
+
var _q = React.useState(isEmptyValue(value) && isEmptyValue(defaultValue)),
|
|
4894
4901
|
showPlaceholder = _q[0],
|
|
4895
4902
|
setShowPlaceholder = _q[1];
|
|
4896
4903
|
var _r = React.useState(false),
|
|
@@ -5182,7 +5189,7 @@
|
|
|
5182
5189
|
(_a = actionItemRef === null || actionItemRef === void 0 ? void 0 : actionItemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
5183
5190
|
}
|
|
5184
5191
|
},
|
|
5185
|
-
placeholder: showPlaceholder
|
|
5192
|
+
placeholder: showPlaceholder ? placeholder : undefined,
|
|
5186
5193
|
required: required,
|
|
5187
5194
|
size: size,
|
|
5188
5195
|
variant: "outlined"
|
|
@@ -8502,15 +8509,15 @@
|
|
|
8502
8509
|
componentId: "sc-1qka0yq-0"
|
|
8503
8510
|
})(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
8504
8511
|
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
|
|
8512
|
+
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\n &.right {\n flex-direction: row-reverse;\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\n &.right {\n flex-direction: row-reverse;\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, 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
8513
|
});
|
|
8507
8514
|
var ScrollbarContainer = styled__default["default"].div.withConfig({
|
|
8508
8515
|
displayName: "Stepperstyles__ScrollbarContainer",
|
|
8509
8516
|
componentId: "sc-1qka0yq-1"
|
|
8510
8517
|
})(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
8511
|
-
_a.theme
|
|
8512
|
-
|
|
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)");
|
|
8518
|
+
var theme = _a.theme,
|
|
8519
|
+
offset = _a.offset;
|
|
8520
|
+
return styled.css(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n height: ", ";\n overflow-y: auto;\n\n &.left {\n border-right: 1px solid ", ";\n }\n &.right {\n border-left: 1px solid ", ";\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 &.left {\n border-right: 1px solid ", ";\n }\n &.right {\n border-left: 1px solid ", ";\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)", theme.palette.layer.n200, theme.palette.layer.n200);
|
|
8514
8521
|
});
|
|
8515
8522
|
var StepContentWrapper = styled__default["default"].div.withConfig({
|
|
8516
8523
|
displayName: "Stepperstyles__StepContentWrapper",
|
|
@@ -8589,7 +8596,7 @@
|
|
|
8589
8596
|
var displayCancelButton = !!(!displayInitialContent && !displayFinalContent && onCancel);
|
|
8590
8597
|
var isLastStep = currentStep === steps.length && !finalContent || currentStep > steps.length && finalContent;
|
|
8591
8598
|
var rootClasses = useStylesWithRootClass(rootClassName$i, stepsPosition, className);
|
|
8592
|
-
var
|
|
8599
|
+
var stepContentClasses = displayInitialContent || displayFinalContent ? 'center-content' : '';
|
|
8593
8600
|
var stickyBottomClasses = useStylesWithRootClass(isStickyBottom ? 'with-top-border' : '');
|
|
8594
8601
|
var actionsClasses = useStylesWithRootClass('actions', displayInitialContent || displayFinalContent ? 'center-actions' : '');
|
|
8595
8602
|
React.useEffect(function () {
|
|
@@ -8689,15 +8696,15 @@
|
|
|
8689
8696
|
}
|
|
8690
8697
|
};
|
|
8691
8698
|
var renderContent = function renderContent() {
|
|
8692
|
-
return jsxRuntime.
|
|
8699
|
+
return jsxRuntime.jsx("div", __assign({
|
|
8693
8700
|
className: contentClassName,
|
|
8694
8701
|
ref: stepperContentRef
|
|
8695
8702
|
}, {
|
|
8696
|
-
children:
|
|
8697
|
-
offset: offset
|
|
8698
|
-
className:
|
|
8703
|
+
children: jsxRuntime.jsxs(ScrollbarContainer, __assign({
|
|
8704
|
+
offset: offset,
|
|
8705
|
+
className: stepContentClasses
|
|
8699
8706
|
}, {
|
|
8700
|
-
children: jsxRuntime.jsx(CssGrid, __assign({
|
|
8707
|
+
children: [jsxRuntime.jsx(CssGrid, __assign({
|
|
8701
8708
|
className: "step-content-container"
|
|
8702
8709
|
}, {
|
|
8703
8710
|
children: jsxRuntime.jsx(CssCell, __assign({}, defaultCellProps, {
|
|
@@ -8705,56 +8712,57 @@
|
|
|
8705
8712
|
}, {
|
|
8706
8713
|
children: getStepContent(currentStep)
|
|
8707
8714
|
}), void 0)
|
|
8708
|
-
}), void 0)
|
|
8709
|
-
|
|
8710
|
-
|
|
8711
|
-
|
|
8712
|
-
|
|
8713
|
-
|
|
8714
|
-
|
|
8715
|
-
|
|
8716
|
-
|
|
8717
|
-
|
|
8718
|
-
|
|
8719
|
-
|
|
8720
|
-
}
|
|
8721
|
-
|
|
8722
|
-
|
|
8723
|
-
|
|
8724
|
-
|
|
8725
|
-
|
|
8726
|
-
|
|
8727
|
-
"data-testid": "stepper-cancel-button"
|
|
8728
|
-
}, {
|
|
8729
|
-
children: "Cancel"
|
|
8730
|
-
}), void 0), jsxRuntime.jsxs("div", __assign({
|
|
8731
|
-
className: "navigation-buttons"
|
|
8732
|
-
}, {
|
|
8733
|
-
children: [!displayInitialContent && currentStep !== 1 && jsxRuntime.jsx(DotButton, __assign({
|
|
8734
|
-
onClick: handleBack,
|
|
8735
|
-
type: "outlined",
|
|
8736
|
-
"data-testid": "stepper-previous-button"
|
|
8715
|
+
}), void 0), jsxRuntime.jsx(StepActionsContainer, __assign({
|
|
8716
|
+
className: stickyBottomClasses,
|
|
8717
|
+
ref: actionsRef,
|
|
8718
|
+
displayCancelButton: displayCancelButton
|
|
8719
|
+
}, {
|
|
8720
|
+
children: jsxRuntime.jsx(CssGrid, {
|
|
8721
|
+
children: jsxRuntime.jsx(CssCell, __assign({}, defaultCellProps, {
|
|
8722
|
+
className: actionsClasses,
|
|
8723
|
+
lg: {
|
|
8724
|
+
start: 4,
|
|
8725
|
+
span: 6
|
|
8726
|
+
}
|
|
8727
|
+
}, {
|
|
8728
|
+
children: jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
8729
|
+
children: [displayCancelButton && jsxRuntime.jsx(DotButton, __assign({
|
|
8730
|
+
className: "cancel-stepper",
|
|
8731
|
+
onClick: onCancel,
|
|
8732
|
+
type: "text",
|
|
8733
|
+
"data-testid": "stepper-cancel-button"
|
|
8737
8734
|
}, {
|
|
8738
|
-
children: "
|
|
8739
|
-
}), void 0), jsxRuntime.
|
|
8740
|
-
|
|
8741
|
-
disabled: nextStepDisabled,
|
|
8742
|
-
"data-testid": "stepper-next-button"
|
|
8735
|
+
children: "Cancel"
|
|
8736
|
+
}), void 0), jsxRuntime.jsxs("div", __assign({
|
|
8737
|
+
className: "navigation-buttons"
|
|
8743
8738
|
}, {
|
|
8744
|
-
children:
|
|
8739
|
+
children: [!displayInitialContent && currentStep !== 1 && jsxRuntime.jsx(DotButton, __assign({
|
|
8740
|
+
onClick: handleBack,
|
|
8741
|
+
type: "outlined",
|
|
8742
|
+
"data-testid": "stepper-previous-button"
|
|
8743
|
+
}, {
|
|
8744
|
+
children: "Previous"
|
|
8745
|
+
}), void 0), jsxRuntime.jsx(DotButton, __assign({
|
|
8746
|
+
onClick: handleNext,
|
|
8747
|
+
disabled: nextStepDisabled,
|
|
8748
|
+
"data-testid": "stepper-next-button"
|
|
8749
|
+
}, {
|
|
8750
|
+
children: isLastStep ? submitButtonText : nextButtonText
|
|
8751
|
+
}), void 0)]
|
|
8745
8752
|
}), void 0)]
|
|
8746
|
-
}
|
|
8747
|
-
}, void 0)
|
|
8748
|
-
}
|
|
8749
|
-
}, void 0)
|
|
8750
|
-
}), void 0)
|
|
8753
|
+
}, void 0)
|
|
8754
|
+
}), void 0)
|
|
8755
|
+
}, void 0)
|
|
8756
|
+
}), void 0)]
|
|
8757
|
+
}), void 0)
|
|
8751
8758
|
}), void 0);
|
|
8752
8759
|
};
|
|
8753
8760
|
return jsxRuntime.jsxs(StyledStepper, __assign({
|
|
8754
8761
|
className: rootClasses
|
|
8755
8762
|
}, {
|
|
8756
8763
|
children: [jsxRuntime.jsx(ScrollbarContainer, __assign({
|
|
8757
|
-
offset: offset
|
|
8764
|
+
offset: offset,
|
|
8765
|
+
className: stepsPosition
|
|
8758
8766
|
}, {
|
|
8759
8767
|
children: jsxRuntime.jsx(material.Stepper, __assign({
|
|
8760
8768
|
activeStep: currentStep,
|
|
@@ -10,3 +10,4 @@ export interface GetChipsFromAutocompleteProps {
|
|
|
10
10
|
}
|
|
11
11
|
export declare const getChipsFromAutocomplete: ({ chipSize, getTagProps, isReadOnly, values, }: GetChipsFromAutocompleteProps) => JSX.Element[];
|
|
12
12
|
export declare const checkIfDuplicateItem: (itemText: string, autocompleteOptions: AutoCompleteOption[]) => boolean;
|
|
13
|
+
export declare const isEmptyValue: (value: AutoCompleteValue) => boolean;
|