@digital-ai/dot-components 2.8.0 → 2.8.1

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.
Files changed (13) hide show
  1. package/CHANGE_LOG.md +35 -14
  2. package/index.esm.js +22 -13
  3. package/index.umd.js +21 -12
  4. package/lib/components/auto-complete/AutoComplete.d.ts +3 -1
  5. package/lib/components/auto-complete/AutoComplete.stories.d.ts +1 -1
  6. package/lib/components/input-form-fields/InputFormFields.propTypes.d.ts +2 -0
  7. package/lib/components/input-form-fields/InputSelect.d.ts +1 -1
  8. package/lib/components/input-form-fields/InputSelect.stories.d.ts +1 -1
  9. package/lib/components/input-form-fields/InputText.d.ts +2 -1
  10. package/lib/components/input-form-fields/InputText.stories.d.ts +2 -1
  11. package/lib/components/time-picker/TimePicker.d.ts +3 -1
  12. package/lib/components/time-picker/TimePicker.stories.d.ts +1 -1
  13. package/package.json +1 -1
package/CHANGE_LOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # Changelog
2
2
 
3
+ ## [2.8.1](https://www.npmjs.com/package/@digital-ai/dot-components) (05/17/2023)
4
+
5
+ [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.8.0...2.8.1)
6
+
7
+ **Features:**
8
+
9
+ - S-92577: `DotAutoComplete` - expose `inputValue` prop [\#1494](https://github.com/digital-ai/dot-components/pull/1494) ([dmiletic85](https://github.com/dmiletic85))
10
+ - S-92557 Add new prop onPopperTimeChange for TimePicker [\#1492](https://github.com/digital-ai/dot-components/pull/1492) ([nikolinadapic](https://github.com/nikolinadapic))
11
+ - 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))
12
+
13
+ **Fixed bugs:**
14
+
15
+ - S-92312: Release workflow adjustments [\#1498](https://github.com/digital-ai/dot-components/pull/1498) ([CWSites](https://github.com/CWSites))
16
+ - 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))
17
+ - S-90263: Update `DotButton` to follow latest Figma design [\#1486](https://github.com/digital-ai/dot-components/pull/1486) ([CWSites](https://github.com/CWSites))
18
+
19
+ **Misc:**
20
+
21
+ - 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))
22
+
3
23
  ## [2.8.0](https://www.npmjs.com/package/@digital-ai/dot-components) (05/09/2023)
4
24
 
5
25
  [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.7.4...2.8.0)
@@ -98,6 +118,7 @@
98
118
  **Features:**
99
119
 
100
120
  - S-90954: `TimePicker` component [\#1432](https://github.com/digital-ai/dot-components/pull/1432) ([dmiletic85](https://github.com/dmiletic85))
121
+ - \[Freestyle Week\] Utilize `dot-icons` package [\#1393](https://github.com/digital-ai/dot-components/pull/1393) ([CWSites](https://github.com/CWSites))
101
122
  - S-87859: Stepper component [\#1392](https://github.com/digital-ai/dot-components/pull/1392) ([nikolinadapic](https://github.com/nikolinadapic))
102
123
 
103
124
  ## [2.5.5](https://www.npmjs.com/package/@digital-ai/dot-components) (03/31/2023)
@@ -191,10 +212,6 @@
191
212
 
192
213
  [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.3.2...2.4.0)
193
214
 
194
- **Features:**
195
-
196
- - \[Freestyle Week\] Utilize `dot-icons` package [\#1393](https://github.com/digital-ai/dot-components/pull/1393) ([CWSites](https://github.com/CWSites))
197
-
198
215
  **Fixed bugs:**
199
216
 
200
217
  - \#1390: Addressing some SQ review items-Issue\#1390 [\#1391](https://github.com/digital-ai/dot-components/pull/1391) ([jmcnally](https://github.com/jmcnally))
@@ -428,19 +445,23 @@
428
445
 
429
446
  - D-22241: `DotFileListItem`: fix focus states and expose `onKeyPress` [\#1254](https://github.com/digital-ai/dot-components/pull/1254) ([dmiletic85](https://github.com/dmiletic85))
430
447
 
448
+ **Misc:**
449
+
450
+ - S-86694: Extract agility theme [\#1242](https://github.com/digital-ai/dot-components/pull/1242) ([CWSites](https://github.com/CWSites))
451
+
431
452
  ## [2.0.0-rc.1](https://www.npmjs.com/package/@digital-ai/dot-components) (08/31/2022)
432
453
 
433
454
  [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.21.1...2.0.0-rc.1)
434
455
 
435
456
  **Fixed bugs:**
436
457
 
458
+ - S-86692: component cleanup [\#1238](https://github.com/digital-ai/dot-components/pull/1238) ([CWSites](https://github.com/CWSites))
437
459
  - 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
460
 
439
461
  **Misc:**
440
462
 
441
463
  - Release Candidate Workflow [\#1251](https://github.com/digital-ai/dot-components/pull/1251) ([CWSites](https://github.com/CWSites))
442
464
  - S-85001: add support for react 18 [\#1244](https://github.com/digital-ai/dot-components/pull/1244) ([CWSites](https://github.com/CWSites))
443
- - S-86694: Extract agility theme [\#1242](https://github.com/digital-ai/dot-components/pull/1242) ([CWSites](https://github.com/CWSites))
444
465
 
445
466
  ## [1.21.1](https://www.npmjs.com/package/@digital-ai/dot-components) (08/31/2022)
446
467
 
@@ -464,7 +485,6 @@
464
485
 
465
486
  **Fixed bugs:**
466
487
 
467
- - S-86692: component cleanup [\#1238](https://github.com/digital-ai/dot-components/pull/1238) ([CWSites](https://github.com/CWSites))
468
488
  - 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
489
  - 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
490
 
@@ -544,6 +564,7 @@
544
564
 
545
565
  **Fixed bugs:**
546
566
 
567
+ - 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
568
  - D-21267: adjust color of helper text [\#1174](https://github.com/digital-ai/dot-components/pull/1174) ([CWSites](https://github.com/CWSites))
548
569
 
549
570
  ## [1.17.1](https://www.npmjs.com/package/@digital-ai/dot-components) (05/19/2022)
@@ -552,7 +573,6 @@
552
573
 
553
574
  **Fixed bugs:**
554
575
 
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
576
  - 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
577
 
558
578
  ## [1.17.0](https://www.npmjs.com/package/@digital-ai/dot-components) (05/18/2022)
@@ -563,6 +583,10 @@
563
583
 
564
584
  - S-84947: `DotButtonToggle`: Add tooltip support [\#1166](https://github.com/digital-ai/dot-components/pull/1166) ([dmiletic85](https://github.com/dmiletic85))
565
585
 
586
+ **Fixed bugs:**
587
+
588
+ - 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))
589
+
566
590
  **Misc:**
567
591
 
568
592
  - 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))
@@ -886,7 +910,6 @@
886
910
  **Fixed bugs:**
887
911
 
888
912
  - 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
913
  - 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
914
 
892
915
  ## [1.5.3](https://www.npmjs.com/package/@digital-ai/dot-components) (12/17/2021)
@@ -895,6 +918,7 @@
895
918
 
896
919
  **Fixed bugs:**
897
920
 
921
+ - D-19330: `AppToolbar` shouldn't have grey dividers [\#891](https://github.com/digital-ai/dot-components/pull/891) ([dmiletic85](https://github.com/dmiletic85))
898
922
  - D-19321: `Breadcrumbs` - Circular dependency on `useBreadcrumbsObserver` [\#882](https://github.com/digital-ai/dot-components/pull/882) ([dmiletic85](https://github.com/dmiletic85))
899
923
  - S-79458: `Sidebar` & `List` updates [\#872](https://github.com/digital-ai/dot-components/pull/872) ([CWSites](https://github.com/CWSites))
900
924
 
@@ -990,7 +1014,6 @@
990
1014
  **Features:**
991
1015
 
992
1016
  - S-80473: Expose onFocus and onBlur callbacks for DotInputText and DotInputSelect components [\#832](https://github.com/digital-ai/dot-components/pull/832) ([selsemore](https://github.com/selsemore))
993
- - S-80268: `DotDynamicForm` improvements [\#821](https://github.com/digital-ai/dot-components/pull/821) ([dmiletic85](https://github.com/dmiletic85))
994
1017
 
995
1018
  **Fixed bugs:**
996
1019
 
@@ -1004,6 +1027,7 @@
1004
1027
  **Features:**
1005
1028
 
1006
1029
  - S-80369: Create `ProgressButton` component [\#822](https://github.com/digital-ai/dot-components/pull/822) ([dmiletic85](https://github.com/dmiletic85))
1030
+ - S-80268: `DotDynamicForm` improvements [\#821](https://github.com/digital-ai/dot-components/pull/821) ([dmiletic85](https://github.com/dmiletic85))
1007
1031
  - S-79696: change size of collapse icon button, add tooltip [\#819](https://github.com/digital-ai/dot-components/pull/819) ([CWSites](https://github.com/CWSites))
1008
1032
  - S-80264: Agility wrapper sandbox documentation [\#810](https://github.com/digital-ai/dot-components/pull/810) ([CWSites](https://github.com/CWSites))
1009
1033
  - S-79569: `DotTable` - ability to add classes to rows & cells [\#799](https://github.com/digital-ai/dot-components/pull/799) ([monapatel91](https://github.com/monapatel91))
@@ -1039,6 +1063,7 @@
1039
1063
  - S-80109: Expose built-in `leaveDelay`, `onClose`, `open` props on `DotTooltip` component [\#786](https://github.com/digital-ai/dot-components/pull/786) ([dmiletic85](https://github.com/dmiletic85))
1040
1064
  - S-76907: update ButtonToggle styles, update unit tests and add e2e tests [\#785](https://github.com/digital-ai/dot-components/pull/785) ([CWSites](https://github.com/CWSites))
1041
1065
  - S-80048: product wrapper demo [\#782](https://github.com/digital-ai/dot-components/pull/782) ([CWSites](https://github.com/CWSites))
1066
+ - Patch release [\#780](https://github.com/digital-ai/dot-components/pull/780) ([TheKeithStewart](https://github.com/TheKeithStewart))
1042
1067
 
1043
1068
  ## [1.3.2](https://www.npmjs.com/package/@digital-ai/dot-components) (11/05/2021)
1044
1069
 
@@ -1051,7 +1076,6 @@
1051
1076
 
1052
1077
  **Misc:**
1053
1078
 
1054
- - Patch release [\#780](https://github.com/digital-ai/dot-components/pull/780) ([TheKeithStewart](https://github.com/TheKeithStewart))
1055
1079
  - S-79985: temporarily remove react-jsonschema-form from library [\#776](https://github.com/digital-ai/dot-components/pull/776) ([TheKeithStewart](https://github.com/TheKeithStewart))
1056
1080
  - Add submitButtonProps prop to DotJsonSchemaForm component [\#775](https://github.com/digital-ai/dot-components/pull/775) ([selsemore](https://github.com/selsemore))
1057
1081
  - S-76893: Webpack 4 - update peer dependencies [\#768](https://github.com/digital-ai/dot-components/pull/768) ([CWSites](https://github.com/CWSites))
@@ -1162,10 +1186,6 @@
1162
1186
 
1163
1187
  [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
1188
 
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
1189
  **Misc:**
1170
1190
 
1171
1191
  - MINOR release [\#695](https://github.com/digital-ai/dot-components/pull/695) ([CWSites](https://github.com/CWSites))
@@ -1184,6 +1204,7 @@
1184
1204
 
1185
1205
  - D-18817: set mainMenuItems to `null` by default [\#688](https://github.com/digital-ai/dot-components/pull/688) ([CWSites](https://github.com/CWSites))
1186
1206
  - D-18664: update link to allow for keypress [\#686](https://github.com/digital-ai/dot-components/pull/686) ([CWSites](https://github.com/CWSites))
1207
+ - D-18665: AppToolbar z-index update [\#685](https://github.com/digital-ai/dot-components/pull/685) ([CWSites](https://github.com/CWSites))
1187
1208
  - D-18663: Update AutoComplete value typing [\#684](https://github.com/digital-ai/dot-components/pull/684) ([CWSites](https://github.com/CWSites))
1188
1209
 
1189
1210
  **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, darken, 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';
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:", ";.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, 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)));
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;&.MuiButton-outlined:not([disabled]){border-color:rgba(0,0,0,0.23);color:", ";}&:not(.MuiButton-sizeLarge):not(.MuiButton-sizeSmall){height:", ";}&.MuiButton-containedSecondary{background-color:", ";&:hover,&:active{background-color:", ";}}&.MuiButton-text{padding:6px 16px;}.dot-icon{display:flex;padding:0;}}"], rootClassName$$, theme.spacing(0.5), theme.palette.grey[700], theme.spacing(5), theme.palette.error.main, darken(theme.palette.error.main, 0.2)));
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(({
@@ -2837,6 +2837,7 @@ const EndAdornment = ({
2837
2837
  error,
2838
2838
  dataTestId,
2839
2839
  endIcon,
2840
+ endText,
2840
2841
  success,
2841
2842
  warning
2842
2843
  }) => {
@@ -2852,7 +2853,7 @@ const EndAdornment = ({
2852
2853
  className: `${adornmentIconClassName} end`,
2853
2854
  position: "end"
2854
2855
  }, {
2855
- children: endAdornmentIcon
2856
+ children: endAdornmentIcon || endText
2856
2857
  }), void 0);
2857
2858
  return endAdornmentTooltip ? jsx(DotTooltip, Object.assign({
2858
2859
  title: endAdornmentTooltip
@@ -2876,6 +2877,7 @@ const DotInputText = ({
2876
2877
  hasDebounce,
2877
2878
  helperText,
2878
2879
  endIcon,
2880
+ endText,
2879
2881
  id,
2880
2882
  inputRef,
2881
2883
  label,
@@ -2946,13 +2948,14 @@ const DotInputText = ({
2946
2948
  children: startIcon
2947
2949
  }), void 0);
2948
2950
  };
2949
- const endAdornmentIcon = () => {
2950
- if (!hasEndAdornmentIcon) return null;
2951
+ const endAdornmentIconOrText = () => {
2952
+ if (!hasEndAdornmentIcon && !endText) return null;
2951
2953
  return jsx(EndAdornment, Object.assign({}, {
2952
2954
  endAdornmentTooltip,
2953
2955
  error: _error,
2954
2956
  dataTestId,
2955
2957
  endIcon,
2958
+ endText,
2956
2959
  success,
2957
2960
  warning: _warning
2958
2961
  }), void 0);
@@ -2970,7 +2973,7 @@ const DotInputText = ({
2970
2973
  }), void 0), jsx(StyledTextField, {
2971
2974
  InputProps: {
2972
2975
  startAdornment: startAdornmentIcon(),
2973
- endAdornment: endAdornmentIcon()
2976
+ endAdornment: endAdornmentIconOrText()
2974
2977
  },
2975
2978
  "aria-label": name,
2976
2979
  autoComplete: _autoComplete,
@@ -4364,6 +4367,7 @@ const DotAutoComplete = ({
4364
4367
  helperText,
4365
4368
  inputId,
4366
4369
  inputRef,
4370
+ inputValue,
4367
4371
  label,
4368
4372
  loading,
4369
4373
  maxHeight,
@@ -4519,9 +4523,9 @@ const DotAutoComplete = ({
4519
4523
  }
4520
4524
  });
4521
4525
  // Create handler only if 'onInputChange' or 'actionItem' prop is defined
4522
- const handleInputChange = (onInputChange || isActionItemDefined) && ((event, inputValue, reason) => {
4523
- isActionItemDefined && setInputText(inputValue);
4524
- onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(event, inputValue, reason);
4526
+ const handleInputChange = (onInputChange || isActionItemDefined) && ((event, currentInputValue, reason) => {
4527
+ isActionItemDefined && setInputText(currentInputValue);
4528
+ onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(event, currentInputValue, reason);
4525
4529
  }) || undefined;
4526
4530
  // Create callback when action item click event handler is defined,
4527
4531
  // free-solo mode is NOT set and 'Enter' key has been pressed
@@ -4584,6 +4588,7 @@ const DotAutoComplete = ({
4584
4588
  getOptionLabel: option => parseAutoCompleteValue(option),
4585
4589
  getOptionDisabled: checkIfOptionDisabled,
4586
4590
  groupBy: _group ? option => option.group : undefined,
4591
+ inputValue: inputValue,
4587
4592
  ListboxComponent: ListboxComponent,
4588
4593
  loading: loading,
4589
4594
  multiple: _multiple,
@@ -4616,7 +4621,7 @@ const DotAutoComplete = ({
4616
4621
  // passed to renderInput includes inputProps and InputProps properties
4617
4622
  // that must be passed to TextField in order for Autocomplete to work
4618
4623
  // correctly. We decided that at this time exposing those props in
4619
- // DotInputText would not be a worthwhile tradeoff. Instead we are
4624
+ // DotInputText would not be a worthwhile tradeoff. Instead, we are
4620
4625
  // using the StyledTextField used by DotInputText so that we will
4621
4626
  // at least pick up any styling that is used there. Should additional
4622
4627
  // functionality be added to DotInputText we will have to make a
@@ -6105,6 +6110,7 @@ const DotInputSelect = ({
6105
6110
  defaultValue,
6106
6111
  disabled: _disabled = false,
6107
6112
  endIcon,
6113
+ endText,
6108
6114
  error: _error = false,
6109
6115
  fullWidth: _fullWidth = true,
6110
6116
  helperText,
@@ -6129,6 +6135,7 @@ const DotInputSelect = ({
6129
6135
  }) => {
6130
6136
  const hasWarning = !_error && _warning && warningClassName;
6131
6137
  const hasSuccess = !_error && !_warning && success && successClassName;
6138
+ const endAdornment = endIcon || endText;
6132
6139
  const rootStyles = useStylesWithRootClass(rootSelectClassName, hasSuccess, hasWarning, _readOnly ? 'read-only' : '');
6133
6140
  const getOption = option => {
6134
6141
  return typeof option === 'string' ? option : option.option;
@@ -6153,11 +6160,11 @@ const DotInputSelect = ({
6153
6160
  }, {
6154
6161
  children: startIcon
6155
6162
  }), void 0),
6156
- endAdornment: endIcon && jsx(StyledAdornment, Object.assign({
6163
+ endAdornment: endAdornment && jsx(StyledAdornment, Object.assign({
6157
6164
  className: `${adornmentIconClassName} end`,
6158
6165
  position: "end"
6159
6166
  }, {
6160
- children: endIcon
6167
+ children: endAdornment
6161
6168
  }), void 0)
6162
6169
  },
6163
6170
  SelectProps: {
@@ -9880,6 +9887,7 @@ const DotTimePicker = ({
9880
9887
  onClose,
9881
9888
  onKeyDown,
9882
9889
  onOpen,
9890
+ onPopperTimeChange,
9883
9891
  open,
9884
9892
  persistentLabel,
9885
9893
  readOnly: _readOnly = false,
@@ -9939,6 +9947,7 @@ const DotTimePicker = ({
9939
9947
  };
9940
9948
  const handlePickerChange = pickedDateTime => {
9941
9949
  setPickerTime(pickedDateTime);
9950
+ onPopperTimeChange && onPopperTimeChange(pickedDateTime.format(DEFAULT_TIME_FORMAT));
9942
9951
  };
9943
9952
  const handleInputChange = (currentValue, context) => {
9944
9953
  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 &.MuiButton-outlined:not([disabled]) {\n border-color: rgba(0, 0, 0, 0.23);\n color: ", ";\n }\n\n &:not(.MuiButton-sizeLarge):not(.MuiButton-sizeSmall) {\n /* Override height for medium size */\n height: ", ";\n }\n\n &.MuiButton-containedSecondary {\n background-color: ", ";\n\n &:hover,\n &:active {\n background-color: ", ";\n }\n }\n\n &.MuiButton-text {\n padding: 6px 16px;\n }\n\n .dot-icon {\n display: flex;\n padding: 0;\n }\n }\n "], ["\n &.", " {\n margin: ", ";\n min-width: auto;\n white-space: nowrap;\n\n &.MuiButton-outlined:not([disabled]) {\n border-color: rgba(0, 0, 0, 0.23);\n color: ", ";\n }\n\n &:not(.MuiButton-sizeLarge):not(.MuiButton-sizeSmall) {\n /* Override height for medium size */\n height: ", ";\n }\n\n &.MuiButton-containedSecondary {\n background-color: ", ";\n\n &:hover,\n &:active {\n background-color: ", ";\n }\n }\n\n &.MuiButton-text {\n padding: 6px 16px;\n }\n\n .dot-icon {\n display: flex;\n padding: 0;\n }\n }\n "])), rootClassName$$, theme.spacing(0.5), theme.palette.grey[700], theme.spacing(5), theme.palette.error.main, material.darken(theme.palette.error.main, 0.2));
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
 
@@ -3159,6 +3159,7 @@
3159
3159
  error = _a.error,
3160
3160
  dataTestId = _a.dataTestId,
3161
3161
  endIcon = _a.endIcon,
3162
+ endText = _a.endText,
3162
3163
  success = _a.success,
3163
3164
  warning = _a.warning;
3164
3165
  var renderIcon = function renderIcon(iconType) {
@@ -3175,7 +3176,7 @@
3175
3176
  className: adornmentIconClassName + " end",
3176
3177
  position: "end"
3177
3178
  }, {
3178
- children: endAdornmentIcon
3179
+ children: endAdornmentIcon || endText
3179
3180
  }), void 0);
3180
3181
  return endAdornmentTooltip ? jsxRuntime.jsx(DotTooltip, __assign({
3181
3182
  title: endAdornmentTooltip
@@ -3205,6 +3206,7 @@
3205
3206
  hasDebounce = _a.hasDebounce,
3206
3207
  helperText = _a.helperText,
3207
3208
  endIcon = _a.endIcon,
3209
+ endText = _a.endText,
3208
3210
  id = _a.id,
3209
3211
  inputRef = _a.inputRef,
3210
3212
  label = _a.label,
@@ -3284,13 +3286,14 @@
3284
3286
  children: startIcon
3285
3287
  }), void 0);
3286
3288
  };
3287
- var endAdornmentIcon = function endAdornmentIcon() {
3288
- if (!hasEndAdornmentIcon) return null;
3289
+ var endAdornmentIconOrText = function endAdornmentIconOrText() {
3290
+ if (!hasEndAdornmentIcon && !endText) return null;
3289
3291
  return jsxRuntime.jsx(EndAdornment, __assign({}, {
3290
3292
  endAdornmentTooltip: endAdornmentTooltip,
3291
3293
  error: error,
3292
3294
  dataTestId: dataTestId,
3293
3295
  endIcon: endIcon,
3296
+ endText: endText,
3294
3297
  success: success,
3295
3298
  warning: warning
3296
3299
  }), void 0);
@@ -3308,7 +3311,7 @@
3308
3311
  }), void 0), jsxRuntime.jsx(StyledTextField, {
3309
3312
  InputProps: {
3310
3313
  startAdornment: startAdornmentIcon(),
3311
- endAdornment: endAdornmentIcon()
3314
+ endAdornment: endAdornmentIconOrText()
3312
3315
  },
3313
3316
  "aria-label": name,
3314
3317
  autoComplete: autoComplete,
@@ -4817,6 +4820,7 @@
4817
4820
  helperText = _a.helperText,
4818
4821
  inputId = _a.inputId,
4819
4822
  inputRef = _a.inputRef,
4823
+ inputValue = _a.inputValue,
4820
4824
  label = _a.label,
4821
4825
  loading = _a.loading,
4822
4826
  maxHeight = _a.maxHeight,
@@ -4983,9 +4987,9 @@
4983
4987
  }
4984
4988
  };
4985
4989
  // Create handler only if 'onInputChange' or 'actionItem' prop is defined
4986
- var handleInputChange = (onInputChange || isActionItemDefined) && function (event, inputValue, reason) {
4987
- isActionItemDefined && setInputText(inputValue);
4988
- onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(event, inputValue, reason);
4990
+ var handleInputChange = (onInputChange || isActionItemDefined) && function (event, currentInputValue, reason) {
4991
+ isActionItemDefined && setInputText(currentInputValue);
4992
+ onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(event, currentInputValue, reason);
4989
4993
  } || undefined;
4990
4994
  // Create callback when action item click event handler is defined,
4991
4995
  // free-solo mode is NOT set and 'Enter' key has been pressed
@@ -5054,6 +5058,7 @@
5054
5058
  groupBy: group ? function (option) {
5055
5059
  return option.group;
5056
5060
  } : undefined,
5061
+ inputValue: inputValue,
5057
5062
  ListboxComponent: ListboxComponent,
5058
5063
  loading: loading,
5059
5064
  multiple: multiple,
@@ -5088,7 +5093,7 @@
5088
5093
  // passed to renderInput includes inputProps and InputProps properties
5089
5094
  // that must be passed to TextField in order for Autocomplete to work
5090
5095
  // correctly. We decided that at this time exposing those props in
5091
- // DotInputText would not be a worthwhile tradeoff. Instead we are
5096
+ // DotInputText would not be a worthwhile tradeoff. Instead, we are
5092
5097
  // using the StyledTextField used by DotInputText so that we will
5093
5098
  // at least pick up any styling that is used there. Should additional
5094
5099
  // functionality be added to DotInputText we will have to make a
@@ -6646,6 +6651,7 @@
6646
6651
  _b = _a.disabled,
6647
6652
  disabled = _b === void 0 ? false : _b,
6648
6653
  endIcon = _a.endIcon,
6654
+ endText = _a.endText,
6649
6655
  _c = _a.error,
6650
6656
  error = _c === void 0 ? false : _c,
6651
6657
  _d = _a.fullWidth,
@@ -6675,6 +6681,7 @@
6675
6681
  warning = _h === void 0 ? false : _h;
6676
6682
  var hasWarning = !error && warning && warningClassName;
6677
6683
  var hasSuccess = !error && !warning && success && successClassName;
6684
+ var endAdornment = endIcon || endText;
6678
6685
  var rootStyles = useStylesWithRootClass(rootSelectClassName, hasSuccess, hasWarning, readOnly ? 'read-only' : '');
6679
6686
  var getOption = function getOption(option) {
6680
6687
  return typeof option === 'string' ? option : option.option;
@@ -6699,11 +6706,11 @@
6699
6706
  }, {
6700
6707
  children: startIcon
6701
6708
  }), void 0),
6702
- endAdornment: endIcon && jsxRuntime.jsx(StyledAdornment, __assign({
6709
+ endAdornment: endAdornment && jsxRuntime.jsx(StyledAdornment, __assign({
6703
6710
  className: adornmentIconClassName + " end",
6704
6711
  position: "end"
6705
6712
  }, {
6706
- children: endIcon
6713
+ children: endAdornment
6707
6714
  }), void 0)
6708
6715
  },
6709
6716
  SelectProps: {
@@ -10774,6 +10781,7 @@
10774
10781
  onClose = _a.onClose,
10775
10782
  onKeyDown = _a.onKeyDown,
10776
10783
  onOpen = _a.onOpen,
10784
+ onPopperTimeChange = _a.onPopperTimeChange,
10777
10785
  open = _a.open,
10778
10786
  persistentLabel = _a.persistentLabel,
10779
10787
  _g = _a.readOnly,
@@ -10840,6 +10848,7 @@
10840
10848
  };
10841
10849
  var handlePickerChange = function handlePickerChange(pickedDateTime) {
10842
10850
  setPickerTime(pickedDateTime);
10851
+ onPopperTimeChange && onPopperTimeChange(pickedDateTime.format(DEFAULT_TIME_FORMAT));
10843
10852
  };
10844
10853
  var handleInputChange = function handleInputChange(currentValue, context) {
10845
10854
  var currentTimeValue = currentValue ? currentValue : null;
package/lib/components/auto-complete/AutoComplete.d.ts CHANGED
@@ -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;
package/lib/components/auto-complete/AutoComplete.stories.d.ts CHANGED
@@ -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;
package/lib/components/input-form-fields/InputFormFields.propTypes.d.ts CHANGED
@@ -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 */
package/lib/components/input-form-fields/InputSelect.d.ts CHANGED
@@ -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;
package/lib/components/input-form-fields/InputSelect.stories.d.ts CHANGED
@@ -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>;
package/lib/components/input-form-fields/InputText.d.ts CHANGED
@@ -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;
package/lib/components/input-form-fields/InputText.stories.d.ts CHANGED
@@ -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>;
package/lib/components/time-picker/TimePicker.d.ts CHANGED
@@ -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;
package/lib/components/time-picker/TimePicker.stories.d.ts CHANGED
@@ -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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@digital-ai/dot-components",
3
- "version": "2.8.0",
3
+ "version": "2.8.1",
4
4
  "private": false,
5
5
  "license": "SEE LICENSE IN <LICENSE.md>",
6
6
  "contributors": [