@digital-ai/dot-components 2.8.0 → 2.8.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 +60 -13
- package/index.esm.js +53 -23
- package/index.umd.js +67 -32
- package/lib/components/auto-complete/AutoComplete.d.ts +3 -1
- package/lib/components/auto-complete/AutoComplete.stories.d.ts +1 -1
- package/lib/components/dynamic-form/models.d.ts +1 -2
- package/lib/components/dynamic-form/sample.spec.data.d.ts +22 -0
- package/lib/components/input-form-fields/InputFormFields.propTypes.d.ts +2 -0
- package/lib/components/input-form-fields/InputSelect.d.ts +1 -1
- package/lib/components/input-form-fields/InputSelect.stories.d.ts +1 -1
- package/lib/components/input-form-fields/InputText.d.ts +2 -1
- package/lib/components/input-form-fields/InputText.stories.d.ts +2 -1
- package/lib/components/progress-button/ProgressButton.d.ts +1 -1
- package/lib/components/progress-button/ProgressButton.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.stories.data.d.ts +6 -0
- package/lib/components/time-picker/TimePicker.d.ts +3 -1
- package/lib/components/time-picker/TimePicker.stories.d.ts +1 -1
- package/package.json +1 -1
- package/lib/components/dynamic-form/sample.d.ts +0 -2
package/CHANGE_LOG.md
CHANGED
|
@@ -1,5 +1,47 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [2.8.2](https://www.npmjs.com/package/@digital-ai/dot-components) (05/26/2023)
|
|
4
|
+
|
|
5
|
+
[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.21.11...2.8.2)
|
|
6
|
+
|
|
7
|
+
**Fixed bugs:**
|
|
8
|
+
|
|
9
|
+
- S-91947: DotStepper step onClick validation [\#1503](https://github.com/digital-ai/dot-components/pull/1503) ([ryangamble](https://github.com/ryangamble))
|
|
10
|
+
- S-92200: Dynamic form autocomplete needs to handle free-form input [\#1490](https://github.com/digital-ai/dot-components/pull/1490) ([jmcnally](https://github.com/jmcnally))
|
|
11
|
+
|
|
12
|
+
**Misc:**
|
|
13
|
+
|
|
14
|
+
- S-91987: update drawer to have correct aria attributes [\#1506](https://github.com/digital-ai/dot-components/pull/1506) ([CWSites](https://github.com/CWSites))
|
|
15
|
+
- S-91988: components missing focus visibility indicator [\#1504](https://github.com/digital-ai/dot-components/pull/1504) ([CWSites](https://github.com/CWSites))
|
|
16
|
+
|
|
17
|
+
## [1.21.11](https://www.npmjs.com/package/@digital-ai/dot-components) (05/25/2023)
|
|
18
|
+
|
|
19
|
+
[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.8.1...1.21.11)
|
|
20
|
+
|
|
21
|
+
**Features:**
|
|
22
|
+
|
|
23
|
+
- S-92577 `DotAutoComplete`: expose `inputValue` prop [\#1502](https://github.com/digital-ai/dot-components/pull/1502) ([angel-git](https://github.com/angel-git))
|
|
24
|
+
|
|
25
|
+
## [2.8.1](https://www.npmjs.com/package/@digital-ai/dot-components) (05/17/2023)
|
|
26
|
+
|
|
27
|
+
[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.8.0...2.8.1)
|
|
28
|
+
|
|
29
|
+
**Features:**
|
|
30
|
+
|
|
31
|
+
- S-92577: `DotAutoComplete` - expose `inputValue` prop [\#1494](https://github.com/digital-ai/dot-components/pull/1494) ([dmiletic85](https://github.com/dmiletic85))
|
|
32
|
+
- S-92557 Add new prop onPopperTimeChange for TimePicker [\#1492](https://github.com/digital-ai/dot-components/pull/1492) ([nikolinadapic](https://github.com/nikolinadapic))
|
|
33
|
+
- S-92402 Add `endText` on `DotInputText` and `DotInputSelect` [\#1489](https://github.com/digital-ai/dot-components/pull/1489) ([angel-git](https://github.com/angel-git))
|
|
34
|
+
|
|
35
|
+
**Fixed bugs:**
|
|
36
|
+
|
|
37
|
+
- S-92312: Release workflow adjustments [\#1498](https://github.com/digital-ai/dot-components/pull/1498) ([CWSites](https://github.com/CWSites))
|
|
38
|
+
- 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))
|
|
39
|
+
- S-90263: Update `DotButton` to follow latest Figma design [\#1486](https://github.com/digital-ai/dot-components/pull/1486) ([CWSites](https://github.com/CWSites))
|
|
40
|
+
|
|
41
|
+
**Misc:**
|
|
42
|
+
|
|
43
|
+
- 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))
|
|
44
|
+
|
|
3
45
|
## [2.8.0](https://www.npmjs.com/package/@digital-ai/dot-components) (05/09/2023)
|
|
4
46
|
|
|
5
47
|
[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.7.4...2.8.0)
|
|
@@ -34,6 +76,10 @@
|
|
|
34
76
|
|
|
35
77
|
- D-24626: Add startEditable attribute to InlineEdit [\#1466](https://github.com/digital-ai/dot-components/pull/1466) ([jmcnally](https://github.com/jmcnally))
|
|
36
78
|
|
|
79
|
+
**Fixed bugs:**
|
|
80
|
+
|
|
81
|
+
- D-24807: `Demo app` - fix error when starting demo application [\#1451](https://github.com/digital-ai/dot-components/pull/1451) ([dmiletic85](https://github.com/dmiletic85))
|
|
82
|
+
|
|
37
83
|
**Misc:**
|
|
38
84
|
|
|
39
85
|
- Updates to deprecated github action `set-output` [\#1465](https://github.com/digital-ai/dot-components/pull/1465) ([CWSites](https://github.com/CWSites))
|
|
@@ -63,7 +109,6 @@
|
|
|
63
109
|
**Fixed bugs:**
|
|
64
110
|
|
|
65
111
|
- `DotTimePicker`, `DotDatePicker`: fix issues with controlled and uncontrolled states [\#1454](https://github.com/digital-ai/dot-components/pull/1454) ([dmiletic85](https://github.com/dmiletic85))
|
|
66
|
-
- D-24807: `Demo app` - fix error when starting demo application [\#1451](https://github.com/digital-ai/dot-components/pull/1451) ([dmiletic85](https://github.com/dmiletic85))
|
|
67
112
|
|
|
68
113
|
**Misc:**
|
|
69
114
|
|
|
@@ -175,13 +220,16 @@
|
|
|
175
220
|
**Fixed bugs:**
|
|
176
221
|
|
|
177
222
|
- D-24235: Empty table pagination [\#1402](https://github.com/digital-ai/dot-components/pull/1402) ([ryangamble](https://github.com/ryangamble))
|
|
178
|
-
- D-24216: A few minor app-switcher display changes [\#1400](https://github.com/digital-ai/dot-components/pull/1400) ([jmcnally](https://github.com/jmcnally))
|
|
179
223
|
- Issue \#1271: Updates to `AutoComplete` sizing with `dense` and `size` props [\#1395](https://github.com/digital-ai/dot-components/pull/1395) ([CWSites](https://github.com/CWSites))
|
|
180
224
|
|
|
181
225
|
## [1.21.9](https://www.npmjs.com/package/@digital-ai/dot-components) (03/03/2023)
|
|
182
226
|
|
|
183
227
|
[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.4.0...1.21.9)
|
|
184
228
|
|
|
229
|
+
**Fixed bugs:**
|
|
230
|
+
|
|
231
|
+
- D-24216: A few minor app-switcher display changes [\#1400](https://github.com/digital-ai/dot-components/pull/1400) ([jmcnally](https://github.com/jmcnally))
|
|
232
|
+
|
|
185
233
|
**Misc:**
|
|
186
234
|
|
|
187
235
|
- Setup v1 to use dot-icons library [\#1399](https://github.com/digital-ai/dot-components/pull/1399) ([CWSites](https://github.com/CWSites))
|
|
@@ -434,6 +482,7 @@
|
|
|
434
482
|
|
|
435
483
|
**Fixed bugs:**
|
|
436
484
|
|
|
485
|
+
- S-86692: component cleanup [\#1238](https://github.com/digital-ai/dot-components/pull/1238) ([CWSites](https://github.com/CWSites))
|
|
437
486
|
- S-84151: fix e2e tests for Release 2.0 [\#1146](https://github.com/digital-ai/dot-components/pull/1146) ([CWSites](https://github.com/CWSites))
|
|
438
487
|
|
|
439
488
|
**Misc:**
|
|
@@ -464,7 +513,6 @@
|
|
|
464
513
|
|
|
465
514
|
**Fixed bugs:**
|
|
466
515
|
|
|
467
|
-
- S-86692: component cleanup [\#1238](https://github.com/digital-ai/dot-components/pull/1238) ([CWSites](https://github.com/CWSites))
|
|
468
516
|
- D-20931: `DotAccordion` - display top border correctly when expanded [\#1232](https://github.com/digital-ai/dot-components/pull/1232) ([CWSites](https://github.com/CWSites))
|
|
469
517
|
- D-22087: `DotRadioGroup` / `DotCheckboxGroup` helper texts do not follow the same styles as other helper texts [\#1225](https://github.com/digital-ai/dot-components/pull/1225) ([dmiletic85](https://github.com/dmiletic85))
|
|
470
518
|
|
|
@@ -544,6 +592,7 @@
|
|
|
544
592
|
|
|
545
593
|
**Fixed bugs:**
|
|
546
594
|
|
|
595
|
+
- D-21245: make sure `data-testid` is passed to nested lists [\#1182](https://github.com/digital-ai/dot-components/pull/1182) ([CWSites](https://github.com/CWSites))
|
|
547
596
|
- D-21267: adjust color of helper text [\#1174](https://github.com/digital-ai/dot-components/pull/1174) ([CWSites](https://github.com/CWSites))
|
|
548
597
|
|
|
549
598
|
## [1.17.1](https://www.npmjs.com/package/@digital-ai/dot-components) (05/19/2022)
|
|
@@ -552,7 +601,6 @@
|
|
|
552
601
|
|
|
553
602
|
**Fixed bugs:**
|
|
554
603
|
|
|
555
|
-
- D-21245: make sure `data-testid` is passed to nested lists [\#1182](https://github.com/digital-ai/dot-components/pull/1182) ([CWSites](https://github.com/CWSites))
|
|
556
604
|
- D-21287: `DotButtonToggle`: Button size is not respected after tooltip change [\#1171](https://github.com/digital-ai/dot-components/pull/1171) ([dmiletic85](https://github.com/dmiletic85))
|
|
557
605
|
|
|
558
606
|
## [1.17.0](https://www.npmjs.com/package/@digital-ai/dot-components) (05/18/2022)
|
|
@@ -563,6 +611,10 @@
|
|
|
563
611
|
|
|
564
612
|
- S-84947: `DotButtonToggle`: Add tooltip support [\#1166](https://github.com/digital-ai/dot-components/pull/1166) ([dmiletic85](https://github.com/dmiletic85))
|
|
565
613
|
|
|
614
|
+
**Fixed bugs:**
|
|
615
|
+
|
|
616
|
+
- D-21265: `helperText` on input fields shouldn't be bold [\#1167](https://github.com/digital-ai/dot-components/pull/1167) ([dmiletic85](https://github.com/dmiletic85))
|
|
617
|
+
|
|
566
618
|
**Misc:**
|
|
567
619
|
|
|
568
620
|
- update release template with task for marking stories as done [\#1161](https://github.com/digital-ai/dot-components/pull/1161) ([CWSites](https://github.com/CWSites))
|
|
@@ -734,6 +786,7 @@
|
|
|
734
786
|
- S-81949: attempting branch name instead of sha [\#1028](https://github.com/digital-ai/dot-components/pull/1028) ([CWSites](https://github.com/CWSites))
|
|
735
787
|
- S-81949: simplfying wait step, extend interval to 30s [\#1027](https://github.com/digital-ai/dot-components/pull/1027) ([CWSites](https://github.com/CWSites))
|
|
736
788
|
- S-81949: add release candidate workflow [\#1026](https://github.com/digital-ai/dot-components/pull/1026) ([CWSites](https://github.com/CWSites))
|
|
789
|
+
- S-81949: make NPM wait for other jobs to finish pre-rc [\#1019](https://github.com/digital-ai/dot-components/pull/1019) ([CWSites](https://github.com/CWSites))
|
|
737
790
|
|
|
738
791
|
## [1.9.1](https://www.npmjs.com/package/@digital-ai/dot-components) (02/17/2022)
|
|
739
792
|
|
|
@@ -886,7 +939,6 @@
|
|
|
886
939
|
**Fixed bugs:**
|
|
887
940
|
|
|
888
941
|
- D-19337: `List`: Circular dependency [\#897](https://github.com/digital-ai/dot-components/pull/897) ([dmiletic85](https://github.com/dmiletic85))
|
|
889
|
-
- D-19330: `AppToolbar` shouldn't have grey dividers [\#891](https://github.com/digital-ai/dot-components/pull/891) ([dmiletic85](https://github.com/dmiletic85))
|
|
890
942
|
- D-19200: `List` Nested list drawer is not rendering correctly [\#869](https://github.com/digital-ai/dot-components/pull/869) ([dmiletic85](https://github.com/dmiletic85))
|
|
891
943
|
|
|
892
944
|
## [1.5.3](https://www.npmjs.com/package/@digital-ai/dot-components) (12/17/2021)
|
|
@@ -929,7 +981,9 @@
|
|
|
929
981
|
|
|
930
982
|
**Fixed bugs:**
|
|
931
983
|
|
|
984
|
+
- D-19330: `AppToolbar` shouldn't have grey dividers [\#891](https://github.com/digital-ai/dot-components/pull/891) ([dmiletic85](https://github.com/dmiletic85))
|
|
932
985
|
- D-19294: Fix broken expand/collapse for uncontrolled accordion [\#866](https://github.com/digital-ai/dot-components/pull/866) ([selsemore](https://github.com/selsemore))
|
|
986
|
+
- D-19250: Fix alignment of DotAccordion collapsed/expanded icons [\#859](https://github.com/digital-ai/dot-components/pull/859) ([selsemore](https://github.com/selsemore))
|
|
933
987
|
|
|
934
988
|
**Misc:**
|
|
935
989
|
|
|
@@ -944,10 +998,6 @@
|
|
|
944
998
|
|
|
945
999
|
- S-80740: Expose DotAccordion 'expanded' and 'onChange' props [\#860](https://github.com/digital-ai/dot-components/pull/860) ([selsemore](https://github.com/selsemore))
|
|
946
1000
|
|
|
947
|
-
**Fixed bugs:**
|
|
948
|
-
|
|
949
|
-
- D-19250: Fix alignment of DotAccordion collapsed/expanded icons [\#859](https://github.com/digital-ai/dot-components/pull/859) ([selsemore](https://github.com/selsemore))
|
|
950
|
-
|
|
951
1001
|
**Misc:**
|
|
952
1002
|
|
|
953
1003
|
- S-76843: Use digital.ai bot PAT for merging master \> develop [\#862](https://github.com/digital-ai/dot-components/pull/862) ([CWSites](https://github.com/CWSites))
|
|
@@ -1162,10 +1212,6 @@
|
|
|
1162
1212
|
|
|
1163
1213
|
[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.0.12...1.1.0)
|
|
1164
1214
|
|
|
1165
|
-
**Fixed bugs:**
|
|
1166
|
-
|
|
1167
|
-
- D-18665: AppToolbar z-index update [\#685](https://github.com/digital-ai/dot-components/pull/685) ([CWSites](https://github.com/CWSites))
|
|
1168
|
-
|
|
1169
1215
|
**Misc:**
|
|
1170
1216
|
|
|
1171
1217
|
- MINOR release [\#695](https://github.com/digital-ai/dot-components/pull/695) ([CWSites](https://github.com/CWSites))
|
|
@@ -1184,6 +1230,7 @@
|
|
|
1184
1230
|
|
|
1185
1231
|
- D-18817: set mainMenuItems to `null` by default [\#688](https://github.com/digital-ai/dot-components/pull/688) ([CWSites](https://github.com/CWSites))
|
|
1186
1232
|
- D-18664: update link to allow for keypress [\#686](https://github.com/digital-ai/dot-components/pull/686) ([CWSites](https://github.com/CWSites))
|
|
1233
|
+
- D-18665: AppToolbar z-index update [\#685](https://github.com/digital-ai/dot-components/pull/685) ([CWSites](https://github.com/CWSites))
|
|
1187
1234
|
- D-18663: Update AutoComplete value typing [\#684](https://github.com/digital-ai/dot-components/pull/684) ([CWSites](https://github.com/CWSites))
|
|
1188
1235
|
|
|
1189
1236
|
**Misc:**
|
package/index.esm.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { useEffect, useState, useRef, useMemo, useContext, createContext, forwardRef, Fragment, useCallback, createElement, useLayoutEffect } from 'react';
|
|
4
|
-
import { Tooltip, Icon, Typography, Accordion, AccordionSummary, AccordionDetails, AccordionActions, InputAdornment, InputLabel, TextField, Toolbar, Alert, Fade, StyledEngineProvider, Avatar, Button,
|
|
4
|
+
import { Tooltip, Icon, Typography, Accordion, AccordionSummary, AccordionDetails, AccordionActions, InputAdornment, InputLabel, TextField, Toolbar, Alert, Fade, StyledEngineProvider, Avatar, Button, Link, List, ListItem, CircularProgress, Popper, MenuList, MenuItem, Paper, ClickAwayListener, Drawer, IconButton, ListItemIcon, Collapse, ListSubheader, Divider, ListItemText, Badge, useMediaQuery, Autocomplete, Chip, AvatarGroup, Breadcrumbs, ToggleButtonGroup, ToggleButton, Card, CardContent, CardHeader, FormControlLabel, Checkbox, FormControl, FormGroup, FormLabel, FormHelperText, Dialog, DialogContent, DialogActions, useTheme as useTheme$1, RadioGroup, Radio, Switch, Skeleton, Snackbar, ButtonGroup, Stepper, Step, StepLabel, StepContent, TablePagination, TableContainer, TableCell, TableRow, TableBody, TableSortLabel, TableHead, Table, Tabs, Tab, LinearProgress } from '@mui/material';
|
|
5
5
|
import '@digital-ai/dot-icons';
|
|
6
6
|
import styled, { css, createGlobalStyle, ThemeProvider as ThemeProvider$1, keyframes } from 'styled-components';
|
|
7
7
|
import { createTheme, ThemeProvider, alpha, useTheme } from '@mui/material/styles';
|
|
@@ -234,7 +234,7 @@ const StyledTextField = styled(TextField).withConfig({
|
|
|
234
234
|
})(["", ""], ({
|
|
235
235
|
theme,
|
|
236
236
|
InputProps
|
|
237
|
-
}) => css(["&.", "{.MuiInputBase-root{margin-bottom:0;}.MuiInputBase-input{box-sizing:content-box;}.MuiOutlinedInput-input{padding:", ";}.MuiInputBase-inputSizeSmall{padding-top:10.5px;padding-bottom:10.5px;&:not(textarea){height:19px;}}.MuiInputBase-inputMultiline{padding:0;}}&.", ",&.", "{.", "{color:", "
|
|
237
|
+
}) => css(["&.", "{.MuiInputBase-root{margin-bottom:0;}.MuiInputBase-input{box-sizing:content-box;}.MuiOutlinedInput-input{padding:", ";}.MuiInputBase-inputSizeSmall{padding-top:10.5px;padding-bottom:10.5px;&:not(textarea){height:19px;}}.MuiInputBase-inputMultiline{padding:0;}}&.", " .", "{margin-right:", ";}&.", ",&.", "{.", "{color:", ";p{font-size:", "px;margin:0;}.dot-icon i{margin-top:-2px;}}.MuiInputBase-root{margin-bottom:0;}.MuiInputBase-inputSizeSmall:not(textarea){height:19px;padding-top:10.5px;padding-bottom:10.5px;}select.dot-select{padding-left:", ";}.MuiSelect-select:focus{background-color:transparent;}.MuiSelect-icon{right:", ";}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.MuiFormLabel-root.Mui-focused{color:", ";}.", " .dot-icon{color:", ";}}&.", "{.MuiInputLabel-outlined.MuiInputLabel-shrink{color:", ";}.", " .dot-icon{color:", ";}}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.MuiInputLabel-outlined.MuiInputLabel-shrink{color:", ";}.", " .dot-icon{color:", ";}}.MuiOutlinedInput-adornedStart{padding-left:12px;&.", " .", "{border-color:", ";}}.MuiInputLabel-outlined.MuiInputLabel-shrink{color:", ";}.MuiInputBase-inputAdornedStart{padding-left:12px;}.MuiInputBase-inputAdornedEnd{padding-right:12px;}.MuiFormHelperText-root{", ";}}"], rootClassName$13, InputProps.startAdornment ? `18px 12px 18px 0px` : `18px 12px`, rootSelectClassName, adornmentIconClassName, theme.spacing(2), rootSelectClassName, rootClassName$13, adornmentIconClassName, theme.palette.layer.n700, theme.typography.body2.fontSize, theme.spacing(1.5), InputProps.endAdornment ? `44px` : `12px`, successClassName, theme.palette.secondary.main, theme.palette.grey[700], adornmentIconClassName, theme.palette.secondary.main, errorClassName, theme.palette.error.main, adornmentIconClassName, theme.palette.error.main, warningClassName, theme.palette.warning.main, theme.palette.grey[700], adornmentIconClassName, theme.palette.warning.main, warningClassName, fieldsetClassName, theme.palette.warning[500], theme.palette.grey[700], formHelperTextRootStyles(theme)));
|
|
238
238
|
|
|
239
239
|
const rootClassName$12 = 'dot-action-toolbar';
|
|
240
240
|
const StyledToolbar = styled(Toolbar).withConfig({
|
|
@@ -1730,7 +1730,7 @@ const StyledButton = styled(Button).withConfig({
|
|
|
1730
1730
|
componentId: "sx99hh-0"
|
|
1731
1731
|
})(["", ""], ({
|
|
1732
1732
|
theme
|
|
1733
|
-
}) => css(["&.", "{margin:", ";min-width:auto;white-space:nowrap
|
|
1733
|
+
}) => css(["&.", "{margin:", ";padding:", ";min-width:auto;white-space:nowrap;&:hover{background-color:", ";}&:active{background-color:", ";}&.MuiButton-containedSecondary{background-color:", ";&:hover{background-color:", ";}&:active{background-color:", ";}}&.MuiButton-outlined,&.MuiButton-text{&:hover{background-color:", ";}&:active{background-color:", ";}}&.MuiButton-outlined{border-color:", ";color:", ";}&.MuiButton-text{background-color:transparent;color:", ";}&.Mui-disabled{background-color:", ";color:", ";&.MuiButton-outlined{border-color:", ";}&.MuiButton-text,&.MuiButton-containedSecondary{background-color:transparent;}}&:not(.MuiButton-sizeLarge):not(.MuiButton-sizeSmall){height:", ";}.dot-icon{display:flex;padding:0;}}"], rootClassName$$, theme.spacing(0.5), theme.spacing(0.75, 2), theme.palette.primary[800], theme.palette.primary[400], theme.palette.error[500], theme.palette.error[600], theme.palette.error[400], theme.palette.grey[50], theme.palette.grey[100], theme.palette.grey[300], theme.palette.grey[700], theme.palette.grey[700], theme.palette.grey[50], theme.palette.grey[400], theme.palette.grey[200], theme.spacing(5)));
|
|
1734
1734
|
|
|
1735
1735
|
/** This component wraps the Button component from @material-ui. */
|
|
1736
1736
|
const DotButton = /*#__PURE__*/forwardRef(({
|
|
@@ -2415,7 +2415,7 @@ const DotDrawerFooter = ({
|
|
|
2415
2415
|
const DotDrawer = ({
|
|
2416
2416
|
anchor: _anchor = 'right',
|
|
2417
2417
|
ariaLabel,
|
|
2418
|
-
ariaRole: _ariaRole = '
|
|
2418
|
+
ariaRole: _ariaRole = 'dialog',
|
|
2419
2419
|
className,
|
|
2420
2420
|
children,
|
|
2421
2421
|
'data-testid': dataTestId,
|
|
@@ -2441,6 +2441,7 @@ const DotDrawer = ({
|
|
|
2441
2441
|
}
|
|
2442
2442
|
};
|
|
2443
2443
|
const rootClasses = useStylesWithRootClass(rootClassName$U, className);
|
|
2444
|
+
const backdropEnabled = _variant === 'temporary' && !(ModalProps === null || ModalProps === void 0 ? void 0 : ModalProps.hideBackdrop);
|
|
2444
2445
|
const headerExists = !!drawerHeaderProps;
|
|
2445
2446
|
const bodyTestId = drawerBodyProps ? drawerBodyProps[`data-testid`] : 'drawer-body';
|
|
2446
2447
|
return jsxs(StyledDrawer, Object.assign({
|
|
@@ -2450,6 +2451,7 @@ const DotDrawer = ({
|
|
|
2450
2451
|
}),
|
|
2451
2452
|
anchor: _anchor,
|
|
2452
2453
|
"aria-label": ariaLabel,
|
|
2454
|
+
"aria-modal": backdropEnabled ? 'true' : 'false',
|
|
2453
2455
|
classes: {
|
|
2454
2456
|
root: rootClasses,
|
|
2455
2457
|
paper: 'dot-drawer-paper'
|
|
@@ -2837,6 +2839,7 @@ const EndAdornment = ({
|
|
|
2837
2839
|
error,
|
|
2838
2840
|
dataTestId,
|
|
2839
2841
|
endIcon,
|
|
2842
|
+
endText,
|
|
2840
2843
|
success,
|
|
2841
2844
|
warning
|
|
2842
2845
|
}) => {
|
|
@@ -2852,7 +2855,7 @@ const EndAdornment = ({
|
|
|
2852
2855
|
className: `${adornmentIconClassName} end`,
|
|
2853
2856
|
position: "end"
|
|
2854
2857
|
}, {
|
|
2855
|
-
children: endAdornmentIcon
|
|
2858
|
+
children: endAdornmentIcon || endText
|
|
2856
2859
|
}), void 0);
|
|
2857
2860
|
return endAdornmentTooltip ? jsx(DotTooltip, Object.assign({
|
|
2858
2861
|
title: endAdornmentTooltip
|
|
@@ -2876,6 +2879,7 @@ const DotInputText = ({
|
|
|
2876
2879
|
hasDebounce,
|
|
2877
2880
|
helperText,
|
|
2878
2881
|
endIcon,
|
|
2882
|
+
endText,
|
|
2879
2883
|
id,
|
|
2880
2884
|
inputRef,
|
|
2881
2885
|
label,
|
|
@@ -2946,13 +2950,14 @@ const DotInputText = ({
|
|
|
2946
2950
|
children: startIcon
|
|
2947
2951
|
}), void 0);
|
|
2948
2952
|
};
|
|
2949
|
-
const
|
|
2950
|
-
if (!hasEndAdornmentIcon) return null;
|
|
2953
|
+
const endAdornmentIconOrText = () => {
|
|
2954
|
+
if (!hasEndAdornmentIcon && !endText) return null;
|
|
2951
2955
|
return jsx(EndAdornment, Object.assign({}, {
|
|
2952
2956
|
endAdornmentTooltip,
|
|
2953
2957
|
error: _error,
|
|
2954
2958
|
dataTestId,
|
|
2955
2959
|
endIcon,
|
|
2960
|
+
endText,
|
|
2956
2961
|
success,
|
|
2957
2962
|
warning: _warning
|
|
2958
2963
|
}), void 0);
|
|
@@ -2970,7 +2975,7 @@ const DotInputText = ({
|
|
|
2970
2975
|
}), void 0), jsx(StyledTextField, {
|
|
2971
2976
|
InputProps: {
|
|
2972
2977
|
startAdornment: startAdornmentIcon(),
|
|
2973
|
-
endAdornment:
|
|
2978
|
+
endAdornment: endAdornmentIconOrText()
|
|
2974
2979
|
},
|
|
2975
2980
|
"aria-label": name,
|
|
2976
2981
|
autoComplete: _autoComplete,
|
|
@@ -4364,6 +4369,7 @@ const DotAutoComplete = ({
|
|
|
4364
4369
|
helperText,
|
|
4365
4370
|
inputId,
|
|
4366
4371
|
inputRef,
|
|
4372
|
+
inputValue,
|
|
4367
4373
|
label,
|
|
4368
4374
|
loading,
|
|
4369
4375
|
maxHeight,
|
|
@@ -4519,9 +4525,9 @@ const DotAutoComplete = ({
|
|
|
4519
4525
|
}
|
|
4520
4526
|
});
|
|
4521
4527
|
// Create handler only if 'onInputChange' or 'actionItem' prop is defined
|
|
4522
|
-
const handleInputChange = (onInputChange || isActionItemDefined) && ((event,
|
|
4523
|
-
isActionItemDefined && setInputText(
|
|
4524
|
-
onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(event,
|
|
4528
|
+
const handleInputChange = (onInputChange || isActionItemDefined) && ((event, currentInputValue, reason) => {
|
|
4529
|
+
isActionItemDefined && setInputText(currentInputValue);
|
|
4530
|
+
onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(event, currentInputValue, reason);
|
|
4525
4531
|
}) || undefined;
|
|
4526
4532
|
// Create callback when action item click event handler is defined,
|
|
4527
4533
|
// free-solo mode is NOT set and 'Enter' key has been pressed
|
|
@@ -4584,6 +4590,7 @@ const DotAutoComplete = ({
|
|
|
4584
4590
|
getOptionLabel: option => parseAutoCompleteValue(option),
|
|
4585
4591
|
getOptionDisabled: checkIfOptionDisabled,
|
|
4586
4592
|
groupBy: _group ? option => option.group : undefined,
|
|
4593
|
+
inputValue: inputValue,
|
|
4587
4594
|
ListboxComponent: ListboxComponent,
|
|
4588
4595
|
loading: loading,
|
|
4589
4596
|
multiple: _multiple,
|
|
@@ -4616,7 +4623,7 @@ const DotAutoComplete = ({
|
|
|
4616
4623
|
// passed to renderInput includes inputProps and InputProps properties
|
|
4617
4624
|
// that must be passed to TextField in order for Autocomplete to work
|
|
4618
4625
|
// correctly. We decided that at this time exposing those props in
|
|
4619
|
-
// DotInputText would not be a worthwhile tradeoff. Instead we are
|
|
4626
|
+
// DotInputText would not be a worthwhile tradeoff. Instead, we are
|
|
4620
4627
|
// using the StyledTextField used by DotInputText so that we will
|
|
4621
4628
|
// at least pick up any styling that is used there. Should additional
|
|
4622
4629
|
// functionality be added to DotInputText we will have to make a
|
|
@@ -6105,6 +6112,7 @@ const DotInputSelect = ({
|
|
|
6105
6112
|
defaultValue,
|
|
6106
6113
|
disabled: _disabled = false,
|
|
6107
6114
|
endIcon,
|
|
6115
|
+
endText,
|
|
6108
6116
|
error: _error = false,
|
|
6109
6117
|
fullWidth: _fullWidth = true,
|
|
6110
6118
|
helperText,
|
|
@@ -6129,6 +6137,7 @@ const DotInputSelect = ({
|
|
|
6129
6137
|
}) => {
|
|
6130
6138
|
const hasWarning = !_error && _warning && warningClassName;
|
|
6131
6139
|
const hasSuccess = !_error && !_warning && success && successClassName;
|
|
6140
|
+
const endAdornment = endIcon || endText;
|
|
6132
6141
|
const rootStyles = useStylesWithRootClass(rootSelectClassName, hasSuccess, hasWarning, _readOnly ? 'read-only' : '');
|
|
6133
6142
|
const getOption = option => {
|
|
6134
6143
|
return typeof option === 'string' ? option : option.option;
|
|
@@ -6153,11 +6162,11 @@ const DotInputSelect = ({
|
|
|
6153
6162
|
}, {
|
|
6154
6163
|
children: startIcon
|
|
6155
6164
|
}), void 0),
|
|
6156
|
-
endAdornment:
|
|
6165
|
+
endAdornment: endAdornment && jsx(StyledAdornment, Object.assign({
|
|
6157
6166
|
className: `${adornmentIconClassName} end`,
|
|
6158
6167
|
position: "end"
|
|
6159
6168
|
}, {
|
|
6160
|
-
children:
|
|
6169
|
+
children: endAdornment
|
|
6161
6170
|
}), void 0)
|
|
6162
6171
|
},
|
|
6163
6172
|
SelectProps: {
|
|
@@ -6229,6 +6238,7 @@ const DotProgressButton = ({
|
|
|
6229
6238
|
isSubmit: _isSubmit = false,
|
|
6230
6239
|
onClick,
|
|
6231
6240
|
size: _size = 'medium',
|
|
6241
|
+
startIcon,
|
|
6232
6242
|
tooltip,
|
|
6233
6243
|
type: _type = 'primary'
|
|
6234
6244
|
}) => {
|
|
@@ -6246,6 +6256,7 @@ const DotProgressButton = ({
|
|
|
6246
6256
|
isSubmit: _isSubmit,
|
|
6247
6257
|
onClick: onClick,
|
|
6248
6258
|
size: _size,
|
|
6259
|
+
startIcon: startIcon,
|
|
6249
6260
|
tooltip: tooltip,
|
|
6250
6261
|
type: _type
|
|
6251
6262
|
}, {
|
|
@@ -6411,7 +6422,7 @@ const StyledSwitch = styled(Switch).withConfig({
|
|
|
6411
6422
|
componentId: "eign2a-0"
|
|
6412
6423
|
})(["", ""], ({
|
|
6413
6424
|
theme
|
|
6414
|
-
}) => css(["{&.dot-switch{span.Mui-disabled{color:", ";}.MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled){color:", ";}}"], theme.palette.grey[200], theme.palette.background.default));
|
|
6425
|
+
}) => css(["{&.dot-switch{span.Mui-disabled{color:", ";}.MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled){color:", ";&.Mui-focusVisible .MuiTouchRipple-root{color:", ";}}}"], theme.palette.grey[200], theme.palette.background.default, theme.palette.grey[200]));
|
|
6415
6426
|
|
|
6416
6427
|
const DotSwitch = ({
|
|
6417
6428
|
ariaLabel,
|
|
@@ -6571,14 +6582,29 @@ const buildAutocompleteControl = ({
|
|
|
6571
6582
|
index
|
|
6572
6583
|
}) => {
|
|
6573
6584
|
const props = controlProps;
|
|
6585
|
+
const isFreeSolo = props.freesolo === undefined || props.freesolo;
|
|
6574
6586
|
const value = getControlValue(controlName, formData) || [];
|
|
6575
6587
|
const errorMessage = formData[controlName].errorMessage;
|
|
6576
6588
|
const handleChangeFn = handleChange;
|
|
6589
|
+
const handleFreeSoloChange = event => {
|
|
6590
|
+
var _a;
|
|
6591
|
+
if (event.key !== 'Enter') return;
|
|
6592
|
+
const typedValue = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value;
|
|
6593
|
+
const currentValue = value;
|
|
6594
|
+
if (typedValue) {
|
|
6595
|
+
checkIfDuplicateItem(typedValue, currentValue);
|
|
6596
|
+
currentValue.push({
|
|
6597
|
+
title: typedValue
|
|
6598
|
+
});
|
|
6599
|
+
handleChangeFn(controlName);
|
|
6600
|
+
}
|
|
6601
|
+
};
|
|
6577
6602
|
return jsx(DotAutoComplete, Object.assign({}, props, {
|
|
6578
6603
|
disabled: disabled,
|
|
6579
6604
|
error: !!errorMessage,
|
|
6580
6605
|
helperText: errorMessage || props.helperText,
|
|
6581
6606
|
onChange: handleChangeFn(controlName),
|
|
6607
|
+
onInputChange: isFreeSolo ? event => handleFreeSoloChange(event) : null,
|
|
6582
6608
|
value: value
|
|
6583
6609
|
}), index);
|
|
6584
6610
|
};
|
|
@@ -6791,12 +6817,11 @@ const DotDynamicForm = ({
|
|
|
6791
6817
|
const updateFormState = ({
|
|
6792
6818
|
controlName,
|
|
6793
6819
|
newValue,
|
|
6794
|
-
formConfig,
|
|
6795
6820
|
validate: _validate = true
|
|
6796
6821
|
}) => {
|
|
6797
6822
|
let fieldValidation = {};
|
|
6798
6823
|
if (_validate && _liveValidation) {
|
|
6799
|
-
fieldValidation = getControlValidation(controlName, newValue,
|
|
6824
|
+
fieldValidation = getControlValidation(controlName, newValue, config);
|
|
6800
6825
|
}
|
|
6801
6826
|
setFormState(prevFormState => Object.assign(Object.assign({}, prevFormState), {
|
|
6802
6827
|
data: Object.assign(Object.assign({}, prevFormState.data), {
|
|
@@ -6831,7 +6856,6 @@ const DotDynamicForm = ({
|
|
|
6831
6856
|
const handleAutocompleteChange = controlName => (_event, value) => {
|
|
6832
6857
|
updateFormState({
|
|
6833
6858
|
controlName,
|
|
6834
|
-
formConfig: config,
|
|
6835
6859
|
newValue: value
|
|
6836
6860
|
});
|
|
6837
6861
|
};
|
|
@@ -6839,7 +6863,6 @@ const DotDynamicForm = ({
|
|
|
6839
6863
|
const newValue = e.target.checked;
|
|
6840
6864
|
updateFormState({
|
|
6841
6865
|
controlName,
|
|
6842
|
-
formConfig: config,
|
|
6843
6866
|
newValue,
|
|
6844
6867
|
validate: false
|
|
6845
6868
|
});
|
|
@@ -6847,7 +6870,6 @@ const DotDynamicForm = ({
|
|
|
6847
6870
|
const handleCheckboxGroupChange = controlName => (e, value) => {
|
|
6848
6871
|
updateFormState({
|
|
6849
6872
|
controlName,
|
|
6850
|
-
formConfig: config,
|
|
6851
6873
|
newValue: value
|
|
6852
6874
|
});
|
|
6853
6875
|
};
|
|
@@ -6866,7 +6888,6 @@ const DotDynamicForm = ({
|
|
|
6866
6888
|
const newValue = e.target.value;
|
|
6867
6889
|
updateFormState({
|
|
6868
6890
|
controlName,
|
|
6869
|
-
formConfig: config,
|
|
6870
6891
|
newValue
|
|
6871
6892
|
});
|
|
6872
6893
|
};
|
|
@@ -7746,7 +7767,7 @@ const StyledStepper = styled.div.withConfig({
|
|
|
7746
7767
|
componentId: "sc-1qka0yq-0"
|
|
7747
7768
|
})(["", ""], ({
|
|
7748
7769
|
theme
|
|
7749
|
-
}) => 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:", ";
|
|
7770
|
+
}) => 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%;height:calc(100vh - 78px);overflow-y:auto;&.center-content{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;}.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)));
|
|
7750
7771
|
const StepContentWrapper = styled.div.withConfig({
|
|
7751
7772
|
displayName: "Stepperstyles__StepContentWrapper",
|
|
7752
7773
|
componentId: "sc-1qka0yq-1"
|
|
@@ -7794,6 +7815,7 @@ const DotStepper = ({
|
|
|
7794
7815
|
onCancel,
|
|
7795
7816
|
onSubmit,
|
|
7796
7817
|
orientation: _orientation = 'vertical',
|
|
7818
|
+
disableUncompletedStepNav: _disableUncompletedStepNav = false,
|
|
7797
7819
|
steps,
|
|
7798
7820
|
stepsPosition: _stepsPosition = 'left',
|
|
7799
7821
|
submitButtonText: _submitButtonText = 'Complete'
|
|
@@ -7869,6 +7891,12 @@ const DotStepper = ({
|
|
|
7869
7891
|
};
|
|
7870
7892
|
const navigateToStep = id => {
|
|
7871
7893
|
if (id !== currentStep) {
|
|
7894
|
+
if (_disableUncompletedStepNav) {
|
|
7895
|
+
const previousStep = steps.find(step => step.id === id - 1);
|
|
7896
|
+
if (previousStep && !previousStep.completed) {
|
|
7897
|
+
return;
|
|
7898
|
+
}
|
|
7899
|
+
}
|
|
7872
7900
|
const stepSelected = steps.find(step => step.id === id);
|
|
7873
7901
|
stepSelected.onClick && stepSelected.onClick();
|
|
7874
7902
|
setActiveStep(id);
|
|
@@ -8423,7 +8451,7 @@ const StyledTableHeaderCell = styled(TableCell).withConfig({
|
|
|
8423
8451
|
componentId: "nko9j-0"
|
|
8424
8452
|
})(["", ""], ({
|
|
8425
8453
|
theme
|
|
8426
|
-
}) => css(["&.", "{&.MuiTableCell-alignCenter > span.MuiTableSortLabel-root{padding-left:26px;}.dot-cell-typography{font-family:", ";}}"], rootClassName$b, theme.typography.h4.fontFamily));
|
|
8454
|
+
}) => css(["&.", "{&.MuiTableCell-alignCenter > span.MuiTableSortLabel-root{padding-left:26px;}> span.MuiTableSortLabel-root.Mui-focusVisible{.dot-cell-typography{color:", ";text-decoration:underline;}}.dot-cell-typography{font-family:", ";}}"], rootClassName$b, theme.palette.primary.main, theme.typography.h4.fontFamily));
|
|
8427
8455
|
|
|
8428
8456
|
/**
|
|
8429
8457
|
* A wrapper component around the TableCell component from @material-ui. This component should only
|
|
@@ -9880,6 +9908,7 @@ const DotTimePicker = ({
|
|
|
9880
9908
|
onClose,
|
|
9881
9909
|
onKeyDown,
|
|
9882
9910
|
onOpen,
|
|
9911
|
+
onPopperTimeChange,
|
|
9883
9912
|
open,
|
|
9884
9913
|
persistentLabel,
|
|
9885
9914
|
readOnly: _readOnly = false,
|
|
@@ -9939,6 +9968,7 @@ const DotTimePicker = ({
|
|
|
9939
9968
|
};
|
|
9940
9969
|
const handlePickerChange = pickedDateTime => {
|
|
9941
9970
|
setPickerTime(pickedDateTime);
|
|
9971
|
+
onPopperTimeChange && onPopperTimeChange(pickedDateTime.format(DEFAULT_TIME_FORMAT));
|
|
9942
9972
|
};
|
|
9943
9973
|
const handleInputChange = (currentValue, context) => {
|
|
9944
9974
|
const currentTimeValue = currentValue ? currentValue : null;
|
package/index.umd.js
CHANGED
|
@@ -384,7 +384,7 @@
|
|
|
384
384
|
})(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
385
385
|
var theme = _a.theme,
|
|
386
386
|
InputProps = _a.InputProps;
|
|
387
|
-
return styled.css(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n &.", " {\n .MuiInputBase-root {\n margin-bottom: 0;\n }\n .MuiInputBase-input {\n box-sizing: content-box;\n }\n .MuiOutlinedInput-input {\n padding: ", ";\n }\n .MuiInputBase-inputSizeSmall {\n padding-top: 10.5px;\n padding-bottom: 10.5px;\n\n &:not(textarea) {\n /* padding above and below together is 21px, and total height should be 40px */\n height: 19px;\n }\n }\n .MuiInputBase-inputMultiline {\n padding: 0;\n }\n }\n\n &.", ", &.", " {\n .", " {\n color: ", ";\n\n .dot-icon i {\n margin-top: -2px;\n }\n }\n\n .MuiInputBase-root {\n margin-bottom: 0;\n }\n\n .MuiInputBase-inputSizeSmall:not(textarea) {\n height: 19px;\n padding-top: 10.5px;\n padding-bottom: 10.5px;\n }\n\n select.dot-select {\n padding-left: ", ";\n }\n\n .MuiSelect-select:focus {\n background-color: transparent;\n }\n\n .MuiSelect-icon {\n right: ", ";\n }\n\n &.", " {\n .MuiOutlinedInput-notchedOutline {\n border-color: ", ";\n }\n\n .MuiFormLabel-root.Mui-focused {\n color: ", ";\n }\n\n .", " .dot-icon {\n color: ", ";\n }\n }\n\n &.", " {\n .MuiInputLabel-outlined.MuiInputLabel-shrink {\n color: ", ";\n }\n\n .", " .dot-icon {\n color: ", ";\n }\n }\n\n &.", " {\n .MuiOutlinedInput-notchedOutline {\n border-color: ", ";\n }\n\n .MuiInputLabel-outlined.MuiInputLabel-shrink {\n color: ", ";\n }\n\n .", " .dot-icon {\n color: ", ";\n }\n }\n\n .MuiOutlinedInput-adornedStart {\n padding-left: 12px;\n\n &.", " .", " {\n border-color: ", ";\n }\n }\n\n .MuiInputLabel-outlined.MuiInputLabel-shrink {\n color: ", ";\n }\n\n .MuiInputBase-inputAdornedStart {\n padding-left: 12px;\n }\n .MuiInputBase-inputAdornedEnd {\n padding-right: 12px;\n }\n .MuiFormHelperText-root {\n ", ";\n }\n }\n "], ["\n &.", " {\n .MuiInputBase-root {\n margin-bottom: 0;\n }\n .MuiInputBase-input {\n box-sizing: content-box;\n }\n .MuiOutlinedInput-input {\n padding: ", ";\n }\n .MuiInputBase-inputSizeSmall {\n padding-top: 10.5px;\n padding-bottom: 10.5px;\n\n &:not(textarea) {\n /* padding above and below together is 21px, and total height should be 40px */\n height: 19px;\n }\n }\n .MuiInputBase-inputMultiline {\n padding: 0;\n }\n }\n\n &.", ", &.", " {\n .", " {\n color: ", ";\n\n .dot-icon i {\n margin-top: -2px;\n }\n }\n\n .MuiInputBase-root {\n margin-bottom: 0;\n }\n\n .MuiInputBase-inputSizeSmall:not(textarea) {\n height: 19px;\n padding-top: 10.5px;\n padding-bottom: 10.5px;\n }\n\n select.dot-select {\n padding-left: ", ";\n }\n\n .MuiSelect-select:focus {\n background-color: transparent;\n }\n\n .MuiSelect-icon {\n right: ", ";\n }\n\n &.", " {\n .MuiOutlinedInput-notchedOutline {\n border-color: ", ";\n }\n\n .MuiFormLabel-root.Mui-focused {\n color: ", ";\n }\n\n .", " .dot-icon {\n color: ", ";\n }\n }\n\n &.", " {\n .MuiInputLabel-outlined.MuiInputLabel-shrink {\n color: ", ";\n }\n\n .", " .dot-icon {\n color: ", ";\n }\n }\n\n &.", " {\n .MuiOutlinedInput-notchedOutline {\n border-color: ", ";\n }\n\n .MuiInputLabel-outlined.MuiInputLabel-shrink {\n color: ", ";\n }\n\n .", " .dot-icon {\n color: ", ";\n }\n }\n\n .MuiOutlinedInput-adornedStart {\n padding-left: 12px;\n\n &.", " .", " {\n border-color: ", ";\n }\n }\n\n .MuiInputLabel-outlined.MuiInputLabel-shrink {\n color: ", ";\n }\n\n .MuiInputBase-inputAdornedStart {\n padding-left: 12px;\n }\n .MuiInputBase-inputAdornedEnd {\n padding-right: 12px;\n }\n .MuiFormHelperText-root {\n ", ";\n }\n }\n "])), rootClassName$13, InputProps.startAdornment ? "18px 12px 18px 0px" : "18px 12px", rootSelectClassName, rootClassName$13, adornmentIconClassName, theme.palette.layer.n700, theme.spacing(1.5), InputProps.endAdornment ? "44px" : "12px", successClassName, theme.palette.secondary.main, theme.palette.grey[700], adornmentIconClassName, theme.palette.secondary.main, errorClassName, theme.palette.error.main, adornmentIconClassName, theme.palette.error.main, warningClassName, theme.palette.warning.main, theme.palette.grey[700], adornmentIconClassName, theme.palette.warning.main, warningClassName, fieldsetClassName, theme.palette.warning[500], theme.palette.grey[700], formHelperTextRootStyles(theme));
|
|
387
|
+
return styled.css(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n &.", " {\n .MuiInputBase-root {\n margin-bottom: 0;\n }\n .MuiInputBase-input {\n box-sizing: content-box;\n }\n .MuiOutlinedInput-input {\n padding: ", ";\n }\n .MuiInputBase-inputSizeSmall {\n padding-top: 10.5px;\n padding-bottom: 10.5px;\n\n &:not(textarea) {\n /* padding above and below together is 21px, and total height should be 40px */\n height: 19px;\n }\n }\n .MuiInputBase-inputMultiline {\n padding: 0;\n }\n }\n\n &.", " .", " {\n // inputSelect has an arrow so we need spacing for end adornment\n margin-right: ", ";\n }\n\n &.", ", &.", " {\n .", " {\n color: ", ";\n p {\n font-size: ", "px;\n margin: 0;\n }\n\n .dot-icon i {\n margin-top: -2px;\n }\n }\n\n .MuiInputBase-root {\n margin-bottom: 0;\n }\n\n .MuiInputBase-inputSizeSmall:not(textarea) {\n height: 19px;\n padding-top: 10.5px;\n padding-bottom: 10.5px;\n }\n\n select.dot-select {\n padding-left: ", ";\n }\n\n .MuiSelect-select:focus {\n background-color: transparent;\n }\n\n .MuiSelect-icon {\n right: ", ";\n }\n\n &.", " {\n .MuiOutlinedInput-notchedOutline {\n border-color: ", ";\n }\n\n .MuiFormLabel-root.Mui-focused {\n color: ", ";\n }\n\n .", " .dot-icon {\n color: ", ";\n }\n }\n\n &.", " {\n .MuiInputLabel-outlined.MuiInputLabel-shrink {\n color: ", ";\n }\n\n .", " .dot-icon {\n color: ", ";\n }\n }\n\n &.", " {\n .MuiOutlinedInput-notchedOutline {\n border-color: ", ";\n }\n\n .MuiInputLabel-outlined.MuiInputLabel-shrink {\n color: ", ";\n }\n\n .", " .dot-icon {\n color: ", ";\n }\n }\n\n .MuiOutlinedInput-adornedStart {\n padding-left: 12px;\n\n &.", " .", " {\n border-color: ", ";\n }\n }\n\n .MuiInputLabel-outlined.MuiInputLabel-shrink {\n color: ", ";\n }\n\n .MuiInputBase-inputAdornedStart {\n padding-left: 12px;\n }\n .MuiInputBase-inputAdornedEnd {\n padding-right: 12px;\n }\n .MuiFormHelperText-root {\n ", ";\n }\n }\n "], ["\n &.", " {\n .MuiInputBase-root {\n margin-bottom: 0;\n }\n .MuiInputBase-input {\n box-sizing: content-box;\n }\n .MuiOutlinedInput-input {\n padding: ", ";\n }\n .MuiInputBase-inputSizeSmall {\n padding-top: 10.5px;\n padding-bottom: 10.5px;\n\n &:not(textarea) {\n /* padding above and below together is 21px, and total height should be 40px */\n height: 19px;\n }\n }\n .MuiInputBase-inputMultiline {\n padding: 0;\n }\n }\n\n &.", " .", " {\n // inputSelect has an arrow so we need spacing for end adornment\n margin-right: ", ";\n }\n\n &.", ", &.", " {\n .", " {\n color: ", ";\n p {\n font-size: ", "px;\n margin: 0;\n }\n\n .dot-icon i {\n margin-top: -2px;\n }\n }\n\n .MuiInputBase-root {\n margin-bottom: 0;\n }\n\n .MuiInputBase-inputSizeSmall:not(textarea) {\n height: 19px;\n padding-top: 10.5px;\n padding-bottom: 10.5px;\n }\n\n select.dot-select {\n padding-left: ", ";\n }\n\n .MuiSelect-select:focus {\n background-color: transparent;\n }\n\n .MuiSelect-icon {\n right: ", ";\n }\n\n &.", " {\n .MuiOutlinedInput-notchedOutline {\n border-color: ", ";\n }\n\n .MuiFormLabel-root.Mui-focused {\n color: ", ";\n }\n\n .", " .dot-icon {\n color: ", ";\n }\n }\n\n &.", " {\n .MuiInputLabel-outlined.MuiInputLabel-shrink {\n color: ", ";\n }\n\n .", " .dot-icon {\n color: ", ";\n }\n }\n\n &.", " {\n .MuiOutlinedInput-notchedOutline {\n border-color: ", ";\n }\n\n .MuiInputLabel-outlined.MuiInputLabel-shrink {\n color: ", ";\n }\n\n .", " .dot-icon {\n color: ", ";\n }\n }\n\n .MuiOutlinedInput-adornedStart {\n padding-left: 12px;\n\n &.", " .", " {\n border-color: ", ";\n }\n }\n\n .MuiInputLabel-outlined.MuiInputLabel-shrink {\n color: ", ";\n }\n\n .MuiInputBase-inputAdornedStart {\n padding-left: 12px;\n }\n .MuiInputBase-inputAdornedEnd {\n padding-right: 12px;\n }\n .MuiFormHelperText-root {\n ", ";\n }\n }\n "])), rootClassName$13, InputProps.startAdornment ? "18px 12px 18px 0px" : "18px 12px", rootSelectClassName, adornmentIconClassName, theme.spacing(2), rootSelectClassName, rootClassName$13, adornmentIconClassName, theme.palette.layer.n700, theme.typography.body2.fontSize, theme.spacing(1.5), InputProps.endAdornment ? "44px" : "12px", successClassName, theme.palette.secondary.main, theme.palette.grey[700], adornmentIconClassName, theme.palette.secondary.main, errorClassName, theme.palette.error.main, adornmentIconClassName, theme.palette.error.main, warningClassName, theme.palette.warning.main, theme.palette.grey[700], adornmentIconClassName, theme.palette.warning.main, warningClassName, fieldsetClassName, theme.palette.warning[500], theme.palette.grey[700], formHelperTextRootStyles(theme));
|
|
388
388
|
});
|
|
389
389
|
var templateObject_1$19, templateObject_2$14, templateObject_3$c, templateObject_4$a, templateObject_5$3, templateObject_6$1;
|
|
390
390
|
|
|
@@ -1957,7 +1957,7 @@
|
|
|
1957
1957
|
componentId: "sx99hh-0"
|
|
1958
1958
|
})(templateObject_2$10 || (templateObject_2$10 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
1959
1959
|
var theme = _a.theme;
|
|
1960
|
-
return styled.css(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n &.", " {\n margin: ", ";\n min-width: auto;\n white-space: nowrap;\n\n
|
|
1960
|
+
return styled.css(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n &.", " {\n margin: ", ";\n padding: ", ";\n min-width: auto;\n white-space: nowrap;\n\n &:hover {\n background-color: ", ";\n }\n &:active {\n background-color: ", ";\n }\n\n &.MuiButton-containedSecondary {\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n &:active {\n background-color: ", ";\n }\n }\n\n &.MuiButton-outlined,\n &.MuiButton-text {\n &:hover {\n background-color: ", ";\n }\n &:active {\n background-color: ", ";\n }\n }\n\n &.MuiButton-outlined {\n border-color: ", ";\n color: ", ";\n }\n\n &.MuiButton-text {\n background-color: transparent;\n color: ", ";\n }\n\n &.Mui-disabled {\n background-color: ", ";\n color: ", ";\n\n &.MuiButton-outlined {\n border-color: ", ";\n }\n\n &.MuiButton-text,\n &.MuiButton-containedSecondary {\n background-color: transparent;\n }\n }\n\n &:not(.MuiButton-sizeLarge):not(.MuiButton-sizeSmall) {\n /* Override height for medium size */\n height: ", ";\n }\n\n .dot-icon {\n display: flex;\n padding: 0;\n }\n }\n "], ["\n &.", " {\n margin: ", ";\n padding: ", ";\n min-width: auto;\n white-space: nowrap;\n\n &:hover {\n background-color: ", ";\n }\n &:active {\n background-color: ", ";\n }\n\n &.MuiButton-containedSecondary {\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n &:active {\n background-color: ", ";\n }\n }\n\n &.MuiButton-outlined,\n &.MuiButton-text {\n &:hover {\n background-color: ", ";\n }\n &:active {\n background-color: ", ";\n }\n }\n\n &.MuiButton-outlined {\n border-color: ", ";\n color: ", ";\n }\n\n &.MuiButton-text {\n background-color: transparent;\n color: ", ";\n }\n\n &.Mui-disabled {\n background-color: ", ";\n color: ", ";\n\n &.MuiButton-outlined {\n border-color: ", ";\n }\n\n &.MuiButton-text,\n &.MuiButton-containedSecondary {\n background-color: transparent;\n }\n }\n\n &:not(.MuiButton-sizeLarge):not(.MuiButton-sizeSmall) {\n /* Override height for medium size */\n height: ", ";\n }\n\n .dot-icon {\n display: flex;\n padding: 0;\n }\n }\n "])), rootClassName$$, theme.spacing(0.5), theme.spacing(0.75, 2), theme.palette.primary[800], theme.palette.primary[400], theme.palette.error[500], theme.palette.error[600], theme.palette.error[400], theme.palette.grey[50], theme.palette.grey[100], theme.palette.grey[300], theme.palette.grey[700], theme.palette.grey[700], theme.palette.grey[50], theme.palette.grey[400], theme.palette.grey[200], theme.spacing(5));
|
|
1961
1961
|
});
|
|
1962
1962
|
var templateObject_1$14, templateObject_2$10;
|
|
1963
1963
|
|
|
@@ -2714,7 +2714,7 @@
|
|
|
2714
2714
|
anchor = _b === void 0 ? 'right' : _b,
|
|
2715
2715
|
ariaLabel = _a.ariaLabel,
|
|
2716
2716
|
_c = _a.ariaRole,
|
|
2717
|
-
ariaRole = _c === void 0 ? '
|
|
2717
|
+
ariaRole = _c === void 0 ? 'dialog' : _c,
|
|
2718
2718
|
className = _a.className,
|
|
2719
2719
|
children = _a.children,
|
|
2720
2720
|
dataTestId = _a["data-testid"],
|
|
@@ -2741,6 +2741,7 @@
|
|
|
2741
2741
|
}
|
|
2742
2742
|
};
|
|
2743
2743
|
var rootClasses = useStylesWithRootClass(rootClassName$U, className);
|
|
2744
|
+
var backdropEnabled = variant === 'temporary' && !(ModalProps === null || ModalProps === void 0 ? void 0 : ModalProps.hideBackdrop);
|
|
2744
2745
|
var headerExists = !!drawerHeaderProps;
|
|
2745
2746
|
var bodyTestId = drawerBodyProps ? drawerBodyProps["data-testid"] : 'drawer-body';
|
|
2746
2747
|
return jsxRuntime.jsxs(StyledDrawer, __assign({
|
|
@@ -2750,6 +2751,7 @@
|
|
|
2750
2751
|
}),
|
|
2751
2752
|
anchor: anchor,
|
|
2752
2753
|
"aria-label": ariaLabel,
|
|
2754
|
+
"aria-modal": backdropEnabled ? 'true' : 'false',
|
|
2753
2755
|
classes: {
|
|
2754
2756
|
root: rootClasses,
|
|
2755
2757
|
paper: 'dot-drawer-paper'
|
|
@@ -3159,6 +3161,7 @@
|
|
|
3159
3161
|
error = _a.error,
|
|
3160
3162
|
dataTestId = _a.dataTestId,
|
|
3161
3163
|
endIcon = _a.endIcon,
|
|
3164
|
+
endText = _a.endText,
|
|
3162
3165
|
success = _a.success,
|
|
3163
3166
|
warning = _a.warning;
|
|
3164
3167
|
var renderIcon = function renderIcon(iconType) {
|
|
@@ -3175,7 +3178,7 @@
|
|
|
3175
3178
|
className: adornmentIconClassName + " end",
|
|
3176
3179
|
position: "end"
|
|
3177
3180
|
}, {
|
|
3178
|
-
children: endAdornmentIcon
|
|
3181
|
+
children: endAdornmentIcon || endText
|
|
3179
3182
|
}), void 0);
|
|
3180
3183
|
return endAdornmentTooltip ? jsxRuntime.jsx(DotTooltip, __assign({
|
|
3181
3184
|
title: endAdornmentTooltip
|
|
@@ -3205,6 +3208,7 @@
|
|
|
3205
3208
|
hasDebounce = _a.hasDebounce,
|
|
3206
3209
|
helperText = _a.helperText,
|
|
3207
3210
|
endIcon = _a.endIcon,
|
|
3211
|
+
endText = _a.endText,
|
|
3208
3212
|
id = _a.id,
|
|
3209
3213
|
inputRef = _a.inputRef,
|
|
3210
3214
|
label = _a.label,
|
|
@@ -3284,13 +3288,14 @@
|
|
|
3284
3288
|
children: startIcon
|
|
3285
3289
|
}), void 0);
|
|
3286
3290
|
};
|
|
3287
|
-
var
|
|
3288
|
-
if (!hasEndAdornmentIcon) return null;
|
|
3291
|
+
var endAdornmentIconOrText = function endAdornmentIconOrText() {
|
|
3292
|
+
if (!hasEndAdornmentIcon && !endText) return null;
|
|
3289
3293
|
return jsxRuntime.jsx(EndAdornment, __assign({}, {
|
|
3290
3294
|
endAdornmentTooltip: endAdornmentTooltip,
|
|
3291
3295
|
error: error,
|
|
3292
3296
|
dataTestId: dataTestId,
|
|
3293
3297
|
endIcon: endIcon,
|
|
3298
|
+
endText: endText,
|
|
3294
3299
|
success: success,
|
|
3295
3300
|
warning: warning
|
|
3296
3301
|
}), void 0);
|
|
@@ -3308,7 +3313,7 @@
|
|
|
3308
3313
|
}), void 0), jsxRuntime.jsx(StyledTextField, {
|
|
3309
3314
|
InputProps: {
|
|
3310
3315
|
startAdornment: startAdornmentIcon(),
|
|
3311
|
-
endAdornment:
|
|
3316
|
+
endAdornment: endAdornmentIconOrText()
|
|
3312
3317
|
},
|
|
3313
3318
|
"aria-label": name,
|
|
3314
3319
|
autoComplete: autoComplete,
|
|
@@ -4817,6 +4822,7 @@
|
|
|
4817
4822
|
helperText = _a.helperText,
|
|
4818
4823
|
inputId = _a.inputId,
|
|
4819
4824
|
inputRef = _a.inputRef,
|
|
4825
|
+
inputValue = _a.inputValue,
|
|
4820
4826
|
label = _a.label,
|
|
4821
4827
|
loading = _a.loading,
|
|
4822
4828
|
maxHeight = _a.maxHeight,
|
|
@@ -4983,9 +4989,9 @@
|
|
|
4983
4989
|
}
|
|
4984
4990
|
};
|
|
4985
4991
|
// Create handler only if 'onInputChange' or 'actionItem' prop is defined
|
|
4986
|
-
var handleInputChange = (onInputChange || isActionItemDefined) && function (event,
|
|
4987
|
-
isActionItemDefined && setInputText(
|
|
4988
|
-
onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(event,
|
|
4992
|
+
var handleInputChange = (onInputChange || isActionItemDefined) && function (event, currentInputValue, reason) {
|
|
4993
|
+
isActionItemDefined && setInputText(currentInputValue);
|
|
4994
|
+
onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(event, currentInputValue, reason);
|
|
4989
4995
|
} || undefined;
|
|
4990
4996
|
// Create callback when action item click event handler is defined,
|
|
4991
4997
|
// free-solo mode is NOT set and 'Enter' key has been pressed
|
|
@@ -5054,6 +5060,7 @@
|
|
|
5054
5060
|
groupBy: group ? function (option) {
|
|
5055
5061
|
return option.group;
|
|
5056
5062
|
} : undefined,
|
|
5063
|
+
inputValue: inputValue,
|
|
5057
5064
|
ListboxComponent: ListboxComponent,
|
|
5058
5065
|
loading: loading,
|
|
5059
5066
|
multiple: multiple,
|
|
@@ -5088,7 +5095,7 @@
|
|
|
5088
5095
|
// passed to renderInput includes inputProps and InputProps properties
|
|
5089
5096
|
// that must be passed to TextField in order for Autocomplete to work
|
|
5090
5097
|
// correctly. We decided that at this time exposing those props in
|
|
5091
|
-
// DotInputText would not be a worthwhile tradeoff. Instead we are
|
|
5098
|
+
// DotInputText would not be a worthwhile tradeoff. Instead, we are
|
|
5092
5099
|
// using the StyledTextField used by DotInputText so that we will
|
|
5093
5100
|
// at least pick up any styling that is used there. Should additional
|
|
5094
5101
|
// functionality be added to DotInputText we will have to make a
|
|
@@ -6646,6 +6653,7 @@
|
|
|
6646
6653
|
_b = _a.disabled,
|
|
6647
6654
|
disabled = _b === void 0 ? false : _b,
|
|
6648
6655
|
endIcon = _a.endIcon,
|
|
6656
|
+
endText = _a.endText,
|
|
6649
6657
|
_c = _a.error,
|
|
6650
6658
|
error = _c === void 0 ? false : _c,
|
|
6651
6659
|
_d = _a.fullWidth,
|
|
@@ -6675,6 +6683,7 @@
|
|
|
6675
6683
|
warning = _h === void 0 ? false : _h;
|
|
6676
6684
|
var hasWarning = !error && warning && warningClassName;
|
|
6677
6685
|
var hasSuccess = !error && !warning && success && successClassName;
|
|
6686
|
+
var endAdornment = endIcon || endText;
|
|
6678
6687
|
var rootStyles = useStylesWithRootClass(rootSelectClassName, hasSuccess, hasWarning, readOnly ? 'read-only' : '');
|
|
6679
6688
|
var getOption = function getOption(option) {
|
|
6680
6689
|
return typeof option === 'string' ? option : option.option;
|
|
@@ -6699,11 +6708,11 @@
|
|
|
6699
6708
|
}, {
|
|
6700
6709
|
children: startIcon
|
|
6701
6710
|
}), void 0),
|
|
6702
|
-
endAdornment:
|
|
6711
|
+
endAdornment: endAdornment && jsxRuntime.jsx(StyledAdornment, __assign({
|
|
6703
6712
|
className: adornmentIconClassName + " end",
|
|
6704
6713
|
position: "end"
|
|
6705
6714
|
}, {
|
|
6706
|
-
children:
|
|
6715
|
+
children: endAdornment
|
|
6707
6716
|
}), void 0)
|
|
6708
6717
|
},
|
|
6709
6718
|
SelectProps: {
|
|
@@ -6785,6 +6794,7 @@
|
|
|
6785
6794
|
onClick = _a.onClick,
|
|
6786
6795
|
_g = _a.size,
|
|
6787
6796
|
size = _g === void 0 ? 'medium' : _g,
|
|
6797
|
+
startIcon = _a.startIcon,
|
|
6788
6798
|
tooltip = _a.tooltip,
|
|
6789
6799
|
_h = _a.type,
|
|
6790
6800
|
type = _h === void 0 ? 'primary' : _h;
|
|
@@ -6802,6 +6812,7 @@
|
|
|
6802
6812
|
isSubmit: isSubmit,
|
|
6803
6813
|
onClick: onClick,
|
|
6804
6814
|
size: size,
|
|
6815
|
+
startIcon: startIcon,
|
|
6805
6816
|
tooltip: tooltip,
|
|
6806
6817
|
type: type
|
|
6807
6818
|
}, {
|
|
@@ -6974,7 +6985,7 @@
|
|
|
6974
6985
|
componentId: "eign2a-0"
|
|
6975
6986
|
})(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
6976
6987
|
var theme = _a.theme;
|
|
6977
|
-
return styled.css(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["{\n &.dot-switch {\n span.Mui-disabled {\n color: ", ";\n }\n\n .MuiSwitch-switchBase\n :not(.Mui-checked)\n :not(.Mui-disabled) {\n color: ", ";\n }\n }\n "], ["{\n &.dot-switch {\n span.Mui-disabled {\n color: ", ";\n }\n\n .MuiSwitch-switchBase\n :not(.Mui-checked)\n :not(.Mui-disabled) {\n color: ", ";\n }\n }\n "])), theme.palette.grey[200], theme.palette.background.default);
|
|
6988
|
+
return styled.css(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["{\n &.dot-switch {\n span.Mui-disabled {\n color: ", ";\n }\n\n .MuiSwitch-switchBase\n :not(.Mui-checked)\n :not(.Mui-disabled) {\n color: ", ";\n\n /* adjusted for a11y */\n &.Mui-focusVisible .MuiTouchRipple-root {\n color: ", ";\n }\n }\n }\n "], ["{\n &.dot-switch {\n span.Mui-disabled {\n color: ", ";\n }\n\n .MuiSwitch-switchBase\n :not(.Mui-checked)\n :not(.Mui-disabled) {\n color: ", ";\n\n /* adjusted for a11y */\n &.Mui-focusVisible .MuiTouchRipple-root {\n color: ", ";\n }\n }\n }\n "])), theme.palette.grey[200], theme.palette.background.default, theme.palette.grey[200]);
|
|
6978
6989
|
});
|
|
6979
6990
|
var templateObject_1$q, templateObject_2$p;
|
|
6980
6991
|
|
|
@@ -7130,14 +7141,31 @@
|
|
|
7130
7141
|
handleChange = _a.handleChange,
|
|
7131
7142
|
index = _a.index;
|
|
7132
7143
|
var props = controlProps;
|
|
7144
|
+
var isFreeSolo = props.freesolo === undefined || props.freesolo;
|
|
7133
7145
|
var value = getControlValue(controlName, formData) || [];
|
|
7134
7146
|
var errorMessage = formData[controlName].errorMessage;
|
|
7135
7147
|
var handleChangeFn = handleChange;
|
|
7148
|
+
var handleFreeSoloChange = function handleFreeSoloChange(event) {
|
|
7149
|
+
var _a;
|
|
7150
|
+
if (event.key !== 'Enter') return;
|
|
7151
|
+
var typedValue = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value;
|
|
7152
|
+
var currentValue = value;
|
|
7153
|
+
if (typedValue) {
|
|
7154
|
+
checkIfDuplicateItem(typedValue, currentValue);
|
|
7155
|
+
currentValue.push({
|
|
7156
|
+
title: typedValue
|
|
7157
|
+
});
|
|
7158
|
+
handleChangeFn(controlName);
|
|
7159
|
+
}
|
|
7160
|
+
};
|
|
7136
7161
|
return jsxRuntime.jsx(DotAutoComplete, __assign({}, props, {
|
|
7137
7162
|
disabled: disabled,
|
|
7138
7163
|
error: !!errorMessage,
|
|
7139
7164
|
helperText: errorMessage || props.helperText,
|
|
7140
7165
|
onChange: handleChangeFn(controlName),
|
|
7166
|
+
onInputChange: isFreeSolo ? function (event) {
|
|
7167
|
+
return handleFreeSoloChange(event);
|
|
7168
|
+
} : null,
|
|
7141
7169
|
value: value
|
|
7142
7170
|
}), index);
|
|
7143
7171
|
};
|
|
@@ -7341,12 +7369,11 @@
|
|
|
7341
7369
|
var updateFormState = function updateFormState(_a) {
|
|
7342
7370
|
var controlName = _a.controlName,
|
|
7343
7371
|
newValue = _a.newValue,
|
|
7344
|
-
formConfig = _a.formConfig,
|
|
7345
7372
|
_b = _a.validate,
|
|
7346
7373
|
validate = _b === void 0 ? true : _b;
|
|
7347
7374
|
var fieldValidation = {};
|
|
7348
7375
|
if (validate && liveValidation) {
|
|
7349
|
-
fieldValidation = getControlValidation(controlName, newValue,
|
|
7376
|
+
fieldValidation = getControlValidation(controlName, newValue, config);
|
|
7350
7377
|
}
|
|
7351
7378
|
setFormState(function (prevFormState) {
|
|
7352
7379
|
var _a;
|
|
@@ -7385,7 +7412,6 @@
|
|
|
7385
7412
|
return function (_event, value) {
|
|
7386
7413
|
updateFormState({
|
|
7387
7414
|
controlName: controlName,
|
|
7388
|
-
formConfig: config,
|
|
7389
7415
|
newValue: value
|
|
7390
7416
|
});
|
|
7391
7417
|
};
|
|
@@ -7395,7 +7421,6 @@
|
|
|
7395
7421
|
var newValue = e.target.checked;
|
|
7396
7422
|
updateFormState({
|
|
7397
7423
|
controlName: controlName,
|
|
7398
|
-
formConfig: config,
|
|
7399
7424
|
newValue: newValue,
|
|
7400
7425
|
validate: false
|
|
7401
7426
|
});
|
|
@@ -7405,7 +7430,6 @@
|
|
|
7405
7430
|
return function (e, value) {
|
|
7406
7431
|
updateFormState({
|
|
7407
7432
|
controlName: controlName,
|
|
7408
|
-
formConfig: config,
|
|
7409
7433
|
newValue: value
|
|
7410
7434
|
});
|
|
7411
7435
|
};
|
|
@@ -7426,7 +7450,6 @@
|
|
|
7426
7450
|
var newValue = e.target.value;
|
|
7427
7451
|
updateFormState({
|
|
7428
7452
|
controlName: controlName,
|
|
7429
|
-
formConfig: config,
|
|
7430
7453
|
newValue: newValue
|
|
7431
7454
|
});
|
|
7432
7455
|
};
|
|
@@ -8422,7 +8445,7 @@
|
|
|
8422
8445
|
componentId: "sc-1qka0yq-0"
|
|
8423
8446
|
})(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
8424
8447
|
var theme = _a.theme;
|
|
8425
|
-
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
|
|
8448
|
+
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 height: calc(100vh - 78px);\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 .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 height: calc(100vh - 78px);\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 .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));
|
|
8426
8449
|
});
|
|
8427
8450
|
var StepContentWrapper = styled__default["default"].div.withConfig({
|
|
8428
8451
|
displayName: "Stepperstyles__StepContentWrapper",
|
|
@@ -8478,17 +8501,19 @@
|
|
|
8478
8501
|
onSubmit = _a.onSubmit,
|
|
8479
8502
|
_e = _a.orientation,
|
|
8480
8503
|
orientation = _e === void 0 ? 'vertical' : _e,
|
|
8504
|
+
_f = _a.disableUncompletedStepNav,
|
|
8505
|
+
disableUncompletedStepNav = _f === void 0 ? false : _f,
|
|
8481
8506
|
steps = _a.steps,
|
|
8482
|
-
|
|
8483
|
-
stepsPosition =
|
|
8484
|
-
|
|
8485
|
-
submitButtonText =
|
|
8486
|
-
var
|
|
8487
|
-
currentStep =
|
|
8488
|
-
setActiveStep =
|
|
8489
|
-
var
|
|
8490
|
-
isStickyBottom =
|
|
8491
|
-
setIsStickyBottom =
|
|
8507
|
+
_g = _a.stepsPosition,
|
|
8508
|
+
stepsPosition = _g === void 0 ? 'left' : _g,
|
|
8509
|
+
_h = _a.submitButtonText,
|
|
8510
|
+
submitButtonText = _h === void 0 ? 'Complete' : _h;
|
|
8511
|
+
var _j = React.useState(activeStep),
|
|
8512
|
+
currentStep = _j[0],
|
|
8513
|
+
setActiveStep = _j[1];
|
|
8514
|
+
var _k = React.useState(false),
|
|
8515
|
+
isStickyBottom = _k[0],
|
|
8516
|
+
setIsStickyBottom = _k[1];
|
|
8492
8517
|
var actionsRef = React.useRef(null);
|
|
8493
8518
|
var stepperContentRef = React.useRef(null);
|
|
8494
8519
|
var isHorizontal = orientation === 'horizontal';
|
|
@@ -8565,6 +8590,14 @@
|
|
|
8565
8590
|
};
|
|
8566
8591
|
var navigateToStep = function navigateToStep(id) {
|
|
8567
8592
|
if (id !== currentStep) {
|
|
8593
|
+
if (disableUncompletedStepNav) {
|
|
8594
|
+
var previousStep = steps.find(function (step) {
|
|
8595
|
+
return step.id === id - 1;
|
|
8596
|
+
});
|
|
8597
|
+
if (previousStep && !previousStep.completed) {
|
|
8598
|
+
return;
|
|
8599
|
+
}
|
|
8600
|
+
}
|
|
8568
8601
|
var stepSelected = steps.find(function (step) {
|
|
8569
8602
|
return step.id === id;
|
|
8570
8603
|
});
|
|
@@ -9150,7 +9183,7 @@
|
|
|
9150
9183
|
componentId: "nko9j-0"
|
|
9151
9184
|
})(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
9152
9185
|
var theme = _a.theme;
|
|
9153
|
-
return styled.css(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n &.", " {\n &.MuiTableCell-alignCenter > span.MuiTableSortLabel-root {\n padding-left: 26px;\n }\n\n .dot-cell-typography {\n font-family: ", ";\n }\n }\n "], ["\n &.", " {\n &.MuiTableCell-alignCenter > span.MuiTableSortLabel-root {\n padding-left: 26px;\n }\n\n .dot-cell-typography {\n font-family: ", ";\n }\n }\n "])), rootClassName$b, theme.typography.h4.fontFamily);
|
|
9186
|
+
return styled.css(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n &.", " {\n &.MuiTableCell-alignCenter > span.MuiTableSortLabel-root {\n padding-left: 26px;\n }\n\n > span.MuiTableSortLabel-root.Mui-focusVisible {\n .dot-cell-typography {\n color: ", ";\n text-decoration: underline;\n }\n }\n\n .dot-cell-typography {\n font-family: ", ";\n }\n }\n "], ["\n &.", " {\n &.MuiTableCell-alignCenter > span.MuiTableSortLabel-root {\n padding-left: 26px;\n }\n\n > span.MuiTableSortLabel-root.Mui-focusVisible {\n .dot-cell-typography {\n color: ", ";\n text-decoration: underline;\n }\n }\n\n .dot-cell-typography {\n font-family: ", ";\n }\n }\n "])), rootClassName$b, theme.palette.primary.main, theme.typography.h4.fontFamily);
|
|
9154
9187
|
});
|
|
9155
9188
|
var templateObject_1$b, templateObject_2$a;
|
|
9156
9189
|
|
|
@@ -10774,6 +10807,7 @@
|
|
|
10774
10807
|
onClose = _a.onClose,
|
|
10775
10808
|
onKeyDown = _a.onKeyDown,
|
|
10776
10809
|
onOpen = _a.onOpen,
|
|
10810
|
+
onPopperTimeChange = _a.onPopperTimeChange,
|
|
10777
10811
|
open = _a.open,
|
|
10778
10812
|
persistentLabel = _a.persistentLabel,
|
|
10779
10813
|
_g = _a.readOnly,
|
|
@@ -10840,6 +10874,7 @@
|
|
|
10840
10874
|
};
|
|
10841
10875
|
var handlePickerChange = function handlePickerChange(pickedDateTime) {
|
|
10842
10876
|
setPickerTime(pickedDateTime);
|
|
10877
|
+
onPopperTimeChange && onPopperTimeChange(pickedDateTime.format(DEFAULT_TIME_FORMAT));
|
|
10843
10878
|
};
|
|
10844
10879
|
var handleInputChange = function handleInputChange(currentValue, context) {
|
|
10845
10880
|
var currentTimeValue = currentValue ? currentValue : null;
|
|
@@ -57,6 +57,8 @@ export interface AutoCompleteProps<T extends AutoCompleteOption = AutoCompleteOp
|
|
|
57
57
|
inputId: string;
|
|
58
58
|
/** pass a ref to the input element */
|
|
59
59
|
inputRef?: Ref<HTMLInputElement>;
|
|
60
|
+
/** The value of the input field. */
|
|
61
|
+
inputValue?: string;
|
|
60
62
|
/** Label displayed above the input field */
|
|
61
63
|
label?: string;
|
|
62
64
|
/** If true, the component will be in a loading state. */
|
|
@@ -98,4 +100,4 @@ export interface AutoCompleteProps<T extends AutoCompleteOption = AutoCompleteOp
|
|
|
98
100
|
/** If true, the label will be displayed in a warning state. */
|
|
99
101
|
warning?: boolean;
|
|
100
102
|
}
|
|
101
|
-
export declare const DotAutoComplete: <T extends AutoCompleteOption>({ ListboxComponent, actionItem, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterOptions, filterSelectedOptions, freesolo, checkIfOptionDisabled, group, helperText, inputId, inputRef, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, readOnly, renderOption, renderTags, required, size, value, warning, }: AutoCompleteProps<T>) => JSX.Element;
|
|
103
|
+
export declare const DotAutoComplete: <T extends AutoCompleteOption>({ ListboxComponent, actionItem, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterOptions, filterSelectedOptions, freesolo, checkIfOptionDisabled, group, helperText, inputId, inputRef, inputValue, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, readOnly, renderOption, renderTags, required, size, value, warning, }: AutoCompleteProps<T>) => JSX.Element;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ComponentMeta, Story } from '@storybook/react';
|
|
2
2
|
import { AutoCompleteOption, AutoCompleteProps } from './AutoComplete';
|
|
3
3
|
import { AutoCompleteWithRenderOption } from './Autocomplete.stories.data';
|
|
4
|
-
declare const _default: ComponentMeta<(<T extends AutoCompleteOption>({ ListboxComponent, actionItem, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterOptions, filterSelectedOptions, freesolo, checkIfOptionDisabled, group, helperText, inputId, inputRef, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, readOnly, renderOption, renderTags, required, size, value, warning, }: AutoCompleteProps<T>) => JSX.Element)>;
|
|
4
|
+
declare const _default: ComponentMeta<(<T extends AutoCompleteOption>({ ListboxComponent, actionItem, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterOptions, filterSelectedOptions, freesolo, checkIfOptionDisabled, group, helperText, inputId, inputRef, inputValue, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, readOnly, renderOption, renderTags, required, size, value, warning, }: AutoCompleteProps<T>) => JSX.Element)>;
|
|
5
5
|
export default _default;
|
|
6
6
|
export declare const Default: any;
|
|
7
7
|
export declare const WithActionItem: any;
|
|
@@ -61,7 +61,7 @@ export interface DynamicFormValidation {
|
|
|
61
61
|
minLength?: Length;
|
|
62
62
|
}
|
|
63
63
|
export interface DynamicFormStateItem {
|
|
64
|
-
errorMessage: string;
|
|
64
|
+
errorMessage: string | null;
|
|
65
65
|
hidden?: ControlCondition;
|
|
66
66
|
isTouched: boolean;
|
|
67
67
|
isValid: boolean;
|
|
@@ -76,7 +76,6 @@ export interface DynamicFormStateData {
|
|
|
76
76
|
}
|
|
77
77
|
export interface FormStateUpdateArgs {
|
|
78
78
|
controlName: string;
|
|
79
|
-
formConfig: DynamicFormConfig;
|
|
80
79
|
newValue: unknown;
|
|
81
80
|
validate?: boolean;
|
|
82
81
|
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { DynamicFormState } from './models';
|
|
2
|
+
export declare const sampleFormTestData: {
|
|
3
|
+
customUserType: string;
|
|
4
|
+
firstName: string;
|
|
5
|
+
isAccountActive: boolean;
|
|
6
|
+
lastName: string;
|
|
7
|
+
gender: string;
|
|
8
|
+
hasVehicle: string;
|
|
9
|
+
interests: {
|
|
10
|
+
title: string;
|
|
11
|
+
}[];
|
|
12
|
+
password: string;
|
|
13
|
+
receive: {
|
|
14
|
+
label: string;
|
|
15
|
+
value: string;
|
|
16
|
+
}[];
|
|
17
|
+
terms: boolean;
|
|
18
|
+
userType: string;
|
|
19
|
+
username: string;
|
|
20
|
+
vehicleModel: string;
|
|
21
|
+
};
|
|
22
|
+
export declare const getSampleFormState: () => DynamicFormState;
|
|
@@ -10,6 +10,8 @@ export interface InputProps extends CommonProps {
|
|
|
10
10
|
disabled?: boolean;
|
|
11
11
|
/** Icon placed after the children. */
|
|
12
12
|
endIcon?: ReactNode;
|
|
13
|
+
/** Text placed after the children, only displayed if there is no: endIcon, success or error */
|
|
14
|
+
endText?: string;
|
|
13
15
|
/** If true, the label will be displayed in an error state. */
|
|
14
16
|
error?: boolean;
|
|
15
17
|
/** If true, the input will take up the full width of its container */
|
|
@@ -12,4 +12,4 @@ export interface InputSelectProps extends InputProps {
|
|
|
12
12
|
/** options of select dropdown */
|
|
13
13
|
options: Array<OptionType>;
|
|
14
14
|
}
|
|
15
|
-
export declare const DotInputSelect: ({ ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, disabled, endIcon, error, fullWidth, helperText, id, inputRef, label, name, onBlur, onChange, onFocus, onKeyDown, options, persistentLabel, readOnly, required, shrink, size, startIcon, success, value, warning, }: InputSelectProps) => JSX.Element;
|
|
15
|
+
export declare const DotInputSelect: ({ ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, disabled, endIcon, endText, error, fullWidth, helperText, id, inputRef, label, name, onBlur, onChange, onFocus, onKeyDown, options, persistentLabel, readOnly, required, shrink, size, startIcon, success, value, warning, }: InputSelectProps) => JSX.Element;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Story, ComponentMeta } from '@storybook/react';
|
|
2
2
|
import { InputSelectProps } from './InputSelect';
|
|
3
|
-
declare const _default: ComponentMeta<({ ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, disabled, endIcon, error, fullWidth, helperText, id, inputRef, label, name, onBlur, onChange, onFocus, onKeyDown, options, persistentLabel, readOnly, required, shrink, size, startIcon, success, value, warning, }: InputSelectProps) => JSX.Element>;
|
|
3
|
+
declare const _default: ComponentMeta<({ ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, disabled, endIcon, endText, error, fullWidth, helperText, id, inputRef, label, name, onBlur, onChange, onFocus, onKeyDown, options, persistentLabel, readOnly, required, shrink, size, startIcon, success, value, warning, }: InputSelectProps) => JSX.Element>;
|
|
4
4
|
export default _default;
|
|
5
5
|
export declare const Default: Story<InputSelectProps>;
|
|
6
6
|
export declare const WithPersistentLabel: Story<InputSelectProps>;
|
|
@@ -26,8 +26,9 @@ export interface EndIconProps {
|
|
|
26
26
|
dataTestId?: string;
|
|
27
27
|
endAdornmentTooltip?: string;
|
|
28
28
|
endIcon?: ReactNode;
|
|
29
|
+
endText?: string;
|
|
29
30
|
error?: boolean;
|
|
30
31
|
success?: boolean;
|
|
31
32
|
warning?: boolean;
|
|
32
33
|
}
|
|
33
|
-
export declare const DotInputText: ({ autoComplete, autoFocus, className, defaultValue, "data-testid": dataTestId, disabled, error, endAdornmentTooltip, fullWidth, hasDebounce, helperText, endIcon, id, inputRef, label, maxRows, minRows, multiline, name, onBlur, onChange, onFocus, onKeyDown, onMouseUp, persistentLabel, placeholder, readOnly, required, shrink, startIcon, size, success, type, value, warning, }: InputTextProps) => JSX.Element;
|
|
34
|
+
export declare const DotInputText: ({ autoComplete, autoFocus, className, defaultValue, "data-testid": dataTestId, disabled, error, endAdornmentTooltip, fullWidth, hasDebounce, helperText, endIcon, endText, id, inputRef, label, maxRows, minRows, multiline, name, onBlur, onChange, onFocus, onKeyDown, onMouseUp, persistentLabel, placeholder, readOnly, required, shrink, startIcon, size, success, type, value, warning, }: InputTextProps) => JSX.Element;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ComponentMeta, Story } from '@storybook/react';
|
|
2
2
|
import { InputTextProps } from './InputText';
|
|
3
|
-
declare const _default: ComponentMeta<({ autoComplete, autoFocus, className, defaultValue, "data-testid": dataTestId, disabled, error, endAdornmentTooltip, fullWidth, hasDebounce, helperText, endIcon, id, inputRef, label, maxRows, minRows, multiline, name, onBlur, onChange, onFocus, onKeyDown, onMouseUp, persistentLabel, placeholder, readOnly, required, shrink, startIcon, size, success, type, value, warning, }: InputTextProps) => JSX.Element>;
|
|
3
|
+
declare const _default: ComponentMeta<({ autoComplete, autoFocus, className, defaultValue, "data-testid": dataTestId, disabled, error, endAdornmentTooltip, fullWidth, hasDebounce, helperText, endIcon, endText, id, inputRef, label, maxRows, minRows, multiline, name, onBlur, onChange, onFocus, onKeyDown, onMouseUp, persistentLabel, placeholder, readOnly, required, shrink, startIcon, size, success, type, value, warning, }: InputTextProps) => JSX.Element>;
|
|
4
4
|
export default _default;
|
|
5
5
|
export declare const Default: Story<InputTextProps>;
|
|
6
6
|
export declare const WithPersistentLabel: Story<InputTextProps>;
|
|
@@ -12,3 +12,4 @@ export declare const WithErrorTooltip: Story<InputTextProps>;
|
|
|
12
12
|
export declare const WithWarningTooltip: Story<InputTextProps>;
|
|
13
13
|
export declare const WithReadOnly: Story<InputTextProps>;
|
|
14
14
|
export declare const WithMultiline: Story<InputTextProps>;
|
|
15
|
+
export declare const WithEndText: Story<InputTextProps>;
|
|
@@ -5,4 +5,4 @@ export interface ProgressButtonProps extends ButtonProps {
|
|
|
5
5
|
/** Is spinner displayed */
|
|
6
6
|
isLoading?: boolean;
|
|
7
7
|
}
|
|
8
|
-
export declare const DotProgressButton: ({ ariaLabel, children, className, "data-testid": dataTestId, disabled, disableRipple, fullWidth, isLoading, isSubmit, onClick, size, tooltip, type, }: ProgressButtonProps) => JSX.Element;
|
|
8
|
+
export declare const DotProgressButton: ({ ariaLabel, children, className, "data-testid": dataTestId, disabled, disableRipple, fullWidth, isLoading, isSubmit, onClick, size, startIcon, tooltip, type, }: ProgressButtonProps) => JSX.Element;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ComponentMeta, Story } from '@storybook/react';
|
|
2
2
|
import { ProgressButtonProps } from './ProgressButton';
|
|
3
|
-
declare const _default: ComponentMeta<({ ariaLabel, children, className, "data-testid": dataTestId, disabled, disableRipple, fullWidth, isLoading, isSubmit, onClick, size, tooltip, type, }: ProgressButtonProps) => JSX.Element>;
|
|
3
|
+
declare const _default: ComponentMeta<({ ariaLabel, children, className, "data-testid": dataTestId, disabled, disableRipple, fullWidth, isLoading, isSubmit, onClick, size, startIcon, tooltip, type, }: ProgressButtonProps) => JSX.Element>;
|
|
4
4
|
export default _default;
|
|
5
5
|
export declare const Default: Story<ProgressButtonProps>;
|
|
@@ -34,6 +34,8 @@ export interface StepProps extends CommonProps {
|
|
|
34
34
|
export interface StepperProps extends CommonProps {
|
|
35
35
|
/** determines the `id` of the step which is active */
|
|
36
36
|
activeStep?: number;
|
|
37
|
+
/** if set to `true`, clicking on a step is only allowed if the previous step is completed **/
|
|
38
|
+
disableUncompletedStepNav: boolean;
|
|
37
39
|
/** final content displayed after the last step is completed */
|
|
38
40
|
finalContent?: ReactNode;
|
|
39
41
|
/** initial content displayed before any step is active, ie when `activeStep` is 0 */
|
|
@@ -57,4 +59,4 @@ export interface StepperProps extends CommonProps {
|
|
|
57
59
|
/** if passed, will overwrite the default "submit" button text */
|
|
58
60
|
submitButtonText?: string;
|
|
59
61
|
}
|
|
60
|
-
export declare const DotStepper: ({ activeStep, ariaLabel, className, "data-testid": dataTestId, finalContent, initialContent, nextButtonText, nextStepDisabled, onBack, onCancel, onSubmit, orientation, steps, stepsPosition, submitButtonText, }: StepperProps) => JSX.Element;
|
|
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;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ComponentMeta, Story } 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, steps, stepsPosition, submitButtonText, }: StepperProps) => JSX.Element>;
|
|
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>;
|
|
4
4
|
export default _default;
|
|
5
5
|
export declare const Default: Story<StepperProps>;
|
|
6
6
|
export declare const WithStepDescription: Story<StepperProps>;
|
|
@@ -23,6 +23,12 @@ export declare const demoSteps: ({
|
|
|
23
23
|
halfWidthContent?: undefined;
|
|
24
24
|
inProgress?: undefined;
|
|
25
25
|
})[];
|
|
26
|
+
export declare const demoStepsUncompleted: {
|
|
27
|
+
content: string;
|
|
28
|
+
completed: boolean;
|
|
29
|
+
id: number;
|
|
30
|
+
label: string;
|
|
31
|
+
}[];
|
|
26
32
|
export declare const withErrorStep: ({
|
|
27
33
|
content: string;
|
|
28
34
|
completed: boolean;
|
|
@@ -44,6 +44,8 @@ export interface TimePickerProps extends CommonProps {
|
|
|
44
44
|
onKeyDown?: (e: KeyboardEvent<HTMLElement>, contextEnum: DatePickerKeydownContext) => void;
|
|
45
45
|
/** Callback fired when the popup requests to be opened. Use in controlled mode (see `open`). */
|
|
46
46
|
onOpen?: () => void;
|
|
47
|
+
/** Callback fired when the time value on the opened popper changes. */
|
|
48
|
+
onPopperTimeChange?: (value: string) => void;
|
|
47
49
|
/** Control the popup or dialog open state. */
|
|
48
50
|
open?: boolean;
|
|
49
51
|
/** If true, the label will be persistently displayed outside the field */
|
|
@@ -58,4 +60,4 @@ export interface TimePickerProps extends CommonProps {
|
|
|
58
60
|
export declare const DEFAULT_PICKER_TIME_FORMAT = "HH:mm";
|
|
59
61
|
export declare const DEFAULT_TIME_FORMAT = "HH:mm";
|
|
60
62
|
export declare const DEFAULT_TIME = "01:00";
|
|
61
|
-
export declare const DotTimePicker: ({ ampm, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, disableOpenPicker, disableClickAwayListener, disabled, error, format, fullWidth, helperText, hideActionButtons, inputId, inputName, label, onAccept, onBlur, onCancel, onChange, onClose, onKeyDown, onOpen, open, persistentLabel, readOnly, required, value, }: TimePickerProps) => JSX.Element;
|
|
63
|
+
export declare const DotTimePicker: ({ ampm, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, disableOpenPicker, disableClickAwayListener, disabled, error, format, fullWidth, helperText, hideActionButtons, inputId, inputName, label, onAccept, onBlur, onCancel, onChange, onClose, onKeyDown, onOpen, onPopperTimeChange, open, persistentLabel, readOnly, required, value, }: TimePickerProps) => JSX.Element;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ComponentMeta, Story } from '@storybook/react';
|
|
2
2
|
import { TimePickerProps } from './';
|
|
3
|
-
declare const _default: ComponentMeta<({ ampm, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, disableOpenPicker, disableClickAwayListener, disabled, error, format, fullWidth, helperText, hideActionButtons, inputId, inputName, label, onAccept, onBlur, onCancel, onChange, onClose, onKeyDown, onOpen, open, persistentLabel, readOnly, required, value, }: TimePickerProps) => JSX.Element>;
|
|
3
|
+
declare const _default: ComponentMeta<({ ampm, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, disableOpenPicker, disableClickAwayListener, disabled, error, format, fullWidth, helperText, hideActionButtons, inputId, inputName, label, onAccept, onBlur, onCancel, onChange, onClose, onKeyDown, onOpen, onPopperTimeChange, open, persistentLabel, readOnly, required, value, }: TimePickerProps) => JSX.Element>;
|
|
4
4
|
export default _default;
|
|
5
5
|
export declare const Default: TimePickerProps;
|
|
6
6
|
export declare const WithAutoFocus: any;
|
package/package.json
CHANGED