@digital-ai/dot-components 2.8.0 → 2.8.1

package/CHANGE_LOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## [2.8.1](https://www.npmjs.com/package/@digital-ai/dot-components) (05/17/2023)
+
+[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.8.0...2.8.1)
+
+**Features:**
+
+- S-92577: `DotAutoComplete` - expose `inputValue` prop [\#1494](https://github.com/digital-ai/dot-components/pull/1494) ([dmiletic85](https://github.com/dmiletic85))
+- S-92557 Add new prop onPopperTimeChange for TimePicker [\#1492](https://github.com/digital-ai/dot-components/pull/1492) ([nikolinadapic](https://github.com/nikolinadapic))
+- 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))
+
+**Fixed bugs:**
+
+- S-92312: Release workflow adjustments [\#1498](https://github.com/digital-ai/dot-components/pull/1498) ([CWSites](https://github.com/CWSites))
+- 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))
+- S-90263: Update `DotButton` to follow latest Figma design [\#1486](https://github.com/digital-ai/dot-components/pull/1486) ([CWSites](https://github.com/CWSites))
+
+**Misc:**
+
+- 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))
+
 ## [2.8.0](https://www.npmjs.com/package/@digital-ai/dot-components) (05/09/2023)
 
 [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 @@
 **Features:**
 
 - S-90954: `TimePicker` component [\#1432](https://github.com/digital-ai/dot-components/pull/1432) ([dmiletic85](https://github.com/dmiletic85))
+- \[Freestyle Week\] Utilize `dot-icons` package [\#1393](https://github.com/digital-ai/dot-components/pull/1393) ([CWSites](https://github.com/CWSites))
 - S-87859: Stepper component [\#1392](https://github.com/digital-ai/dot-components/pull/1392) ([nikolinadapic](https://github.com/nikolinadapic))
 
 ## [2.5.5](https://www.npmjs.com/package/@digital-ai/dot-components) (03/31/2023)
@@ -191,10 +212,6 @@
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.3.2...2.4.0)
 
-**Features:**
-
-- \[Freestyle Week\] Utilize `dot-icons` package [\#1393](https://github.com/digital-ai/dot-components/pull/1393) ([CWSites](https://github.com/CWSites))
-
 **Fixed bugs:**
 
 - \#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 @@
 
 - D-22241: `DotFileListItem`: fix focus states and expose `onKeyPress` [\#1254](https://github.com/digital-ai/dot-components/pull/1254) ([dmiletic85](https://github.com/dmiletic85))
 
+**Misc:**
+
+- S-86694: Extract agility theme [\#1242](https://github.com/digital-ai/dot-components/pull/1242) ([CWSites](https://github.com/CWSites))
+
 ## [2.0.0-rc.1](https://www.npmjs.com/package/@digital-ai/dot-components) (08/31/2022)
 
 [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)
 
 **Fixed bugs:**
 
+- S-86692: component cleanup [\#1238](https://github.com/digital-ai/dot-components/pull/1238) ([CWSites](https://github.com/CWSites))
 - S-84151: fix e2e tests for Release 2.0 [\#1146](https://github.com/digital-ai/dot-components/pull/1146) ([CWSites](https://github.com/CWSites))
 
 **Misc:**
 
 - Release Candidate Workflow [\#1251](https://github.com/digital-ai/dot-components/pull/1251) ([CWSites](https://github.com/CWSites))
 - S-85001: add support for react 18 [\#1244](https://github.com/digital-ai/dot-components/pull/1244) ([CWSites](https://github.com/CWSites))
-- S-86694: Extract agility theme [\#1242](https://github.com/digital-ai/dot-components/pull/1242) ([CWSites](https://github.com/CWSites))
 
 ## [1.21.1](https://www.npmjs.com/package/@digital-ai/dot-components) (08/31/2022)
 
@@ -464,7 +485,6 @@
 
 **Fixed bugs:**
 
-- S-86692: component cleanup [\#1238](https://github.com/digital-ai/dot-components/pull/1238) ([CWSites](https://github.com/CWSites))
 - D-20931: `DotAccordion` - display top border correctly when expanded [\#1232](https://github.com/digital-ai/dot-components/pull/1232) ([CWSites](https://github.com/CWSites))
 - 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))
 
@@ -544,6 +564,7 @@
 
 **Fixed bugs:**
 
+- 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))
 - D-21267: adjust color of helper text [\#1174](https://github.com/digital-ai/dot-components/pull/1174) ([CWSites](https://github.com/CWSites))
 
 ## [1.17.1](https://www.npmjs.com/package/@digital-ai/dot-components) (05/19/2022)
@@ -552,7 +573,6 @@
 
 **Fixed bugs:**
 
-- 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))
 - 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))
 
 ## [1.17.0](https://www.npmjs.com/package/@digital-ai/dot-components) (05/18/2022)
@@ -563,6 +583,10 @@
 
 - S-84947: `DotButtonToggle`: Add tooltip support [\#1166](https://github.com/digital-ai/dot-components/pull/1166) ([dmiletic85](https://github.com/dmiletic85))
 
+**Fixed bugs:**
+
+- 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))
+
 **Misc:**
 
 - 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 @@
 **Fixed bugs:**
 
 - D-19337: `List`: Circular dependency [\#897](https://github.com/digital-ai/dot-components/pull/897) ([dmiletic85](https://github.com/dmiletic85))
-- D-19330: `AppToolbar` shouldn't have grey dividers [\#891](https://github.com/digital-ai/dot-components/pull/891) ([dmiletic85](https://github.com/dmiletic85))
 - 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))
 
 ## [1.5.3](https://www.npmjs.com/package/@digital-ai/dot-components) (12/17/2021)
@@ -895,6 +918,7 @@
 
 **Fixed bugs:**
 
+- D-19330: `AppToolbar` shouldn't have grey dividers [\#891](https://github.com/digital-ai/dot-components/pull/891) ([dmiletic85](https://github.com/dmiletic85))
 - D-19321: `Breadcrumbs` - Circular dependency on `useBreadcrumbsObserver` [\#882](https://github.com/digital-ai/dot-components/pull/882) ([dmiletic85](https://github.com/dmiletic85))
 - S-79458: `Sidebar` & `List` updates [\#872](https://github.com/digital-ai/dot-components/pull/872) ([CWSites](https://github.com/CWSites))
 
@@ -990,7 +1014,6 @@
 **Features:**
 
 - 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))
-- S-80268: `DotDynamicForm` improvements [\#821](https://github.com/digital-ai/dot-components/pull/821) ([dmiletic85](https://github.com/dmiletic85))
 
 **Fixed bugs:**
 
@@ -1004,6 +1027,7 @@
 **Features:**
 
 - S-80369: Create `ProgressButton` component [\#822](https://github.com/digital-ai/dot-components/pull/822) ([dmiletic85](https://github.com/dmiletic85))
+- S-80268: `DotDynamicForm` improvements [\#821](https://github.com/digital-ai/dot-components/pull/821) ([dmiletic85](https://github.com/dmiletic85))
 - 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))
 - S-80264: Agility wrapper sandbox documentation [\#810](https://github.com/digital-ai/dot-components/pull/810) ([CWSites](https://github.com/CWSites))
 - 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 @@
 - 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))
 - 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))
 - S-80048: product wrapper demo [\#782](https://github.com/digital-ai/dot-components/pull/782) ([CWSites](https://github.com/CWSites))
+- Patch release [\#780](https://github.com/digital-ai/dot-components/pull/780) ([TheKeithStewart](https://github.com/TheKeithStewart))
 
 ## [1.3.2](https://www.npmjs.com/package/@digital-ai/dot-components) (11/05/2021)
 
@@ -1051,7 +1076,6 @@
 
 **Misc:**
 
-- Patch release [\#780](https://github.com/digital-ai/dot-components/pull/780) ([TheKeithStewart](https://github.com/TheKeithStewart))
 - S-79985: temporarily remove react-jsonschema-form from library [\#776](https://github.com/digital-ai/dot-components/pull/776) ([TheKeithStewart](https://github.com/TheKeithStewart))
 - Add submitButtonProps prop to DotJsonSchemaForm component [\#775](https://github.com/digital-ai/dot-components/pull/775) ([selsemore](https://github.com/selsemore))
 - 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 @@
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.0.12...1.1.0)
 
-**Fixed bugs:**
-
-- D-18665: AppToolbar z-index update [\#685](https://github.com/digital-ai/dot-components/pull/685) ([CWSites](https://github.com/CWSites))
-
 **Misc:**
 
 - MINOR release [\#695](https://github.com/digital-ai/dot-components/pull/695) ([CWSites](https://github.com/CWSites))
@@ -1184,6 +1204,7 @@
 
 - D-18817: set mainMenuItems to `null` by default [\#688](https://github.com/digital-ai/dot-components/pull/688) ([CWSites](https://github.com/CWSites))
 - D-18664: update link to allow for keypress [\#686](https://github.com/digital-ai/dot-components/pull/686) ([CWSites](https://github.com/CWSites))
+- D-18665: AppToolbar z-index update [\#685](https://github.com/digital-ai/dot-components/pull/685) ([CWSites](https://github.com/CWSites))
 - D-18663: Update AutoComplete value typing [\#684](https://github.com/digital-ai/dot-components/pull/684) ([CWSites](https://github.com/CWSites))
 
 **Misc:**

package/index.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useEffect, useState, useRef, useMemo, useContext, createContext, forwardRef, Fragment, useCallback, createElement, useLayoutEffect } from 'react';
-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';
+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';
 import '@digital-ai/dot-icons';
 import styled, { css, createGlobalStyle, ThemeProvider as ThemeProvider$1, keyframes } from 'styled-components';
 import { createTheme, ThemeProvider, alpha, useTheme } from '@mui/material/styles';
@@ -234,7 +234,7 @@ const StyledTextField = styled(TextField).withConfig({
 })(["", ""], ({
   theme,
   InputProps
-}) => 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)));
+}) => 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)));
 
 const rootClassName$12 = 'dot-action-toolbar';
 const StyledToolbar = styled(Toolbar).withConfig({
@@ -1730,7 +1730,7 @@ const StyledButton = styled(Button).withConfig({
   componentId: "sx99hh-0"
 })(["", ""], ({
   theme
-}) => 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)));
+}) => 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)));
 
 /** This component wraps the Button component from @material-ui. */
 const DotButton = /*#__PURE__*/forwardRef(({
@@ -2837,6 +2837,7 @@ const EndAdornment = ({
   error,
   dataTestId,
   endIcon,
+  endText,
   success,
   warning
 }) => {
@@ -2852,7 +2853,7 @@ const EndAdornment = ({
     className: `${adornmentIconClassName} end`,
     position: "end"
   }, {
-    children: endAdornmentIcon
+    children: endAdornmentIcon || endText
   }), void 0);
   return endAdornmentTooltip ? jsx(DotTooltip, Object.assign({
     title: endAdornmentTooltip
@@ -2876,6 +2877,7 @@ const DotInputText = ({
   hasDebounce,
   helperText,
   endIcon,
+  endText,
   id,
   inputRef,
   label,
@@ -2946,13 +2948,14 @@ const DotInputText = ({
       children: startIcon
     }), void 0);
   };
-  const endAdornmentIcon = () => {
-    if (!hasEndAdornmentIcon) return null;
+  const endAdornmentIconOrText = () => {
+    if (!hasEndAdornmentIcon && !endText) return null;
     return jsx(EndAdornment, Object.assign({}, {
       endAdornmentTooltip,
       error: _error,
       dataTestId,
       endIcon,
+      endText,
       success,
       warning: _warning
     }), void 0);
@@ -2970,7 +2973,7 @@ const DotInputText = ({
     }), void 0), jsx(StyledTextField, {
       InputProps: {
         startAdornment: startAdornmentIcon(),
-        endAdornment: endAdornmentIcon()
+        endAdornment: endAdornmentIconOrText()
       },
       "aria-label": name,
       autoComplete: _autoComplete,
@@ -4364,6 +4367,7 @@ const DotAutoComplete = ({
   helperText,
   inputId,
   inputRef,
+  inputValue,
   label,
   loading,
   maxHeight,
@@ -4519,9 +4523,9 @@ const DotAutoComplete = ({
     }
   });
   // Create handler only if 'onInputChange' or 'actionItem' prop is defined
-  const handleInputChange = (onInputChange || isActionItemDefined) && ((event, inputValue, reason) => {
-    isActionItemDefined && setInputText(inputValue);
-    onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(event, inputValue, reason);
+  const handleInputChange = (onInputChange || isActionItemDefined) && ((event, currentInputValue, reason) => {
+    isActionItemDefined && setInputText(currentInputValue);
+    onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(event, currentInputValue, reason);
   }) || undefined;
   // Create callback when action item click event handler is defined,
   // free-solo mode is NOT set and 'Enter' key has been pressed
@@ -4584,6 +4588,7 @@ const DotAutoComplete = ({
     getOptionLabel: option => parseAutoCompleteValue(option),
     getOptionDisabled: checkIfOptionDisabled,
     groupBy: _group ? option => option.group : undefined,
+    inputValue: inputValue,
     ListboxComponent: ListboxComponent,
     loading: loading,
     multiple: _multiple,
@@ -4616,7 +4621,7 @@ const DotAutoComplete = ({
         // passed to renderInput includes inputProps and InputProps properties
         // that must be passed to TextField in order for Autocomplete to work
         // correctly. We decided that at this time exposing those props in
-        // DotInputText would not be a worthwhile tradeoff. Instead we are
+        // DotInputText would not be a worthwhile tradeoff. Instead, we are
         // using the StyledTextField used by DotInputText so that we will
         // at least pick up any styling that is used there. Should additional
         // functionality be added to DotInputText we will have to make a
@@ -6105,6 +6110,7 @@ const DotInputSelect = ({
   defaultValue,
   disabled: _disabled = false,
   endIcon,
+  endText,
   error: _error = false,
   fullWidth: _fullWidth = true,
   helperText,
@@ -6129,6 +6135,7 @@ const DotInputSelect = ({
 }) => {
   const hasWarning = !_error && _warning && warningClassName;
   const hasSuccess = !_error && !_warning && success && successClassName;
+  const endAdornment = endIcon || endText;
   const rootStyles = useStylesWithRootClass(rootSelectClassName, hasSuccess, hasWarning, _readOnly ? 'read-only' : '');
   const getOption = option => {
     return typeof option === 'string' ? option : option.option;
@@ -6153,11 +6160,11 @@ const DotInputSelect = ({
         }, {
           children: startIcon
         }), void 0),
-        endAdornment: endIcon && jsx(StyledAdornment, Object.assign({
+        endAdornment: endAdornment && jsx(StyledAdornment, Object.assign({
           className: `${adornmentIconClassName} end`,
           position: "end"
         }, {
-          children: endIcon
+          children: endAdornment
         }), void 0)
       },
       SelectProps: {
@@ -9880,6 +9887,7 @@ const DotTimePicker = ({
   onClose,
   onKeyDown,
   onOpen,
+  onPopperTimeChange,
   open,
   persistentLabel,
   readOnly: _readOnly = false,
@@ -9939,6 +9947,7 @@ const DotTimePicker = ({
   };
   const handlePickerChange = pickedDateTime => {
     setPickerTime(pickedDateTime);
+    onPopperTimeChange && onPopperTimeChange(pickedDateTime.format(DEFAULT_TIME_FORMAT));
   };
   const handleInputChange = (currentValue, context) => {
     const currentTimeValue = currentValue ? currentValue : null;

package/index.umd.js

@@ -384,7 +384,7 @@
     })(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme,
         InputProps = _a.InputProps;
-      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));
+      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));
     });
     var templateObject_1$19, templateObject_2$14, templateObject_3$c, templateObject_4$a, templateObject_5$3, templateObject_6$1;
 
@@ -1957,7 +1957,7 @@
       componentId: "sx99hh-0"
     })(templateObject_2$10 || (templateObject_2$10 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      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));
+      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));
     });
     var templateObject_1$14, templateObject_2$10;
 
@@ -3159,6 +3159,7 @@
         error = _a.error,
         dataTestId = _a.dataTestId,
         endIcon = _a.endIcon,
+        endText = _a.endText,
         success = _a.success,
         warning = _a.warning;
       var renderIcon = function renderIcon(iconType) {
@@ -3175,7 +3176,7 @@
         className: adornmentIconClassName + " end",
         position: "end"
       }, {
-        children: endAdornmentIcon
+        children: endAdornmentIcon || endText
       }), void 0);
       return endAdornmentTooltip ? jsxRuntime.jsx(DotTooltip, __assign({
         title: endAdornmentTooltip
@@ -3205,6 +3206,7 @@
         hasDebounce = _a.hasDebounce,
         helperText = _a.helperText,
         endIcon = _a.endIcon,
+        endText = _a.endText,
         id = _a.id,
         inputRef = _a.inputRef,
         label = _a.label,
@@ -3284,13 +3286,14 @@
           children: startIcon
         }), void 0);
       };
-      var endAdornmentIcon = function endAdornmentIcon() {
-        if (!hasEndAdornmentIcon) return null;
+      var endAdornmentIconOrText = function endAdornmentIconOrText() {
+        if (!hasEndAdornmentIcon && !endText) return null;
         return jsxRuntime.jsx(EndAdornment, __assign({}, {
           endAdornmentTooltip: endAdornmentTooltip,
           error: error,
           dataTestId: dataTestId,
           endIcon: endIcon,
+          endText: endText,
           success: success,
           warning: warning
         }), void 0);
@@ -3308,7 +3311,7 @@
         }), void 0), jsxRuntime.jsx(StyledTextField, {
           InputProps: {
             startAdornment: startAdornmentIcon(),
-            endAdornment: endAdornmentIcon()
+            endAdornment: endAdornmentIconOrText()
           },
           "aria-label": name,
           autoComplete: autoComplete,
@@ -4817,6 +4820,7 @@
         helperText = _a.helperText,
         inputId = _a.inputId,
         inputRef = _a.inputRef,
+        inputValue = _a.inputValue,
         label = _a.label,
         loading = _a.loading,
         maxHeight = _a.maxHeight,
@@ -4983,9 +4987,9 @@
         }
       };
       // Create handler only if 'onInputChange' or 'actionItem' prop is defined
-      var handleInputChange = (onInputChange || isActionItemDefined) && function (event, inputValue, reason) {
-        isActionItemDefined && setInputText(inputValue);
-        onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(event, inputValue, reason);
+      var handleInputChange = (onInputChange || isActionItemDefined) && function (event, currentInputValue, reason) {
+        isActionItemDefined && setInputText(currentInputValue);
+        onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(event, currentInputValue, reason);
       } || undefined;
       // Create callback when action item click event handler is defined,
       // free-solo mode is NOT set and 'Enter' key has been pressed
@@ -5054,6 +5058,7 @@
         groupBy: group ? function (option) {
           return option.group;
         } : undefined,
+        inputValue: inputValue,
         ListboxComponent: ListboxComponent,
         loading: loading,
         multiple: multiple,
@@ -5088,7 +5093,7 @@
             // passed to renderInput includes inputProps and InputProps properties
             // that must be passed to TextField in order for Autocomplete to work
             // correctly. We decided that at this time exposing those props in
-            // DotInputText would not be a worthwhile tradeoff. Instead we are
+            // DotInputText would not be a worthwhile tradeoff. Instead, we are
             // using the StyledTextField used by DotInputText so that we will
             // at least pick up any styling that is used there. Should additional
             // functionality be added to DotInputText we will have to make a
@@ -6646,6 +6651,7 @@
         _b = _a.disabled,
         disabled = _b === void 0 ? false : _b,
         endIcon = _a.endIcon,
+        endText = _a.endText,
         _c = _a.error,
         error = _c === void 0 ? false : _c,
         _d = _a.fullWidth,
@@ -6675,6 +6681,7 @@
         warning = _h === void 0 ? false : _h;
       var hasWarning = !error && warning && warningClassName;
       var hasSuccess = !error && !warning && success && successClassName;
+      var endAdornment = endIcon || endText;
       var rootStyles = useStylesWithRootClass(rootSelectClassName, hasSuccess, hasWarning, readOnly ? 'read-only' : '');
       var getOption = function getOption(option) {
         return typeof option === 'string' ? option : option.option;
@@ -6699,11 +6706,11 @@
             }, {
               children: startIcon
             }), void 0),
-            endAdornment: endIcon && jsxRuntime.jsx(StyledAdornment, __assign({
+            endAdornment: endAdornment && jsxRuntime.jsx(StyledAdornment, __assign({
               className: adornmentIconClassName + " end",
               position: "end"
             }, {
-              children: endIcon
+              children: endAdornment
             }), void 0)
           },
           SelectProps: {
@@ -10774,6 +10781,7 @@
         onClose = _a.onClose,
         onKeyDown = _a.onKeyDown,
         onOpen = _a.onOpen,
+        onPopperTimeChange = _a.onPopperTimeChange,
         open = _a.open,
         persistentLabel = _a.persistentLabel,
         _g = _a.readOnly,
@@ -10840,6 +10848,7 @@
       };
       var handlePickerChange = function handlePickerChange(pickedDateTime) {
         setPickerTime(pickedDateTime);
+        onPopperTimeChange && onPopperTimeChange(pickedDateTime.format(DEFAULT_TIME_FORMAT));
       };
       var handleInputChange = function handleInputChange(currentValue, context) {
         var currentTimeValue = currentValue ? currentValue : null;

package/lib/components/auto-complete/AutoComplete.d.ts

@@ -57,6 +57,8 @@ export interface AutoCompleteProps<T extends AutoCompleteOption = AutoCompleteOp
     inputId: string;
     /** pass a ref to the input element */
     inputRef?: Ref<HTMLInputElement>;
+    /** The value of the input field. */
+    inputValue?: string;
     /** Label displayed above the input field */
     label?: string;
     /** If true, the component will be in a loading state. */
@@ -98,4 +100,4 @@ export interface AutoCompleteProps<T extends AutoCompleteOption = AutoCompleteOp
     /** If true, the label will be displayed in a warning state. */
     warning?: boolean;
 }
-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;
+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

@@ -1,7 +1,7 @@
 import { ComponentMeta, Story } from '@storybook/react';
 import { AutoCompleteOption, AutoCompleteProps } from './AutoComplete';
 import { AutoCompleteWithRenderOption } from './Autocomplete.stories.data';
-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)>;
+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)>;
 export default _default;
 export declare const Default: any;
 export declare const WithActionItem: any;

package/lib/components/input-form-fields/InputFormFields.propTypes.d.ts

@@ -10,6 +10,8 @@ export interface InputProps extends CommonProps {
     disabled?: boolean;
     /** Icon placed after the children. */
     endIcon?: ReactNode;
+    /** Text placed after the children, only displayed if there is no: endIcon, success or error  */
+    endText?: string;
     /** If true, the label will be displayed in an error state. */
     error?: boolean;
     /** If true, the input will take up the full width of its container */

package/lib/components/input-form-fields/InputSelect.d.ts

@@ -12,4 +12,4 @@ export interface InputSelectProps extends InputProps {
     /** options of select dropdown */
     options: Array<OptionType>;
 }
-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;
+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

@@ -1,6 +1,6 @@
 import { Story, ComponentMeta } from '@storybook/react';
 import { InputSelectProps } from './InputSelect';
-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>;
+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>;
 export default _default;
 export declare const Default: Story<InputSelectProps>;
 export declare const WithPersistentLabel: Story<InputSelectProps>;

package/lib/components/input-form-fields/InputText.d.ts

@@ -26,8 +26,9 @@ export interface EndIconProps {
     dataTestId?: string;
     endAdornmentTooltip?: string;
     endIcon?: ReactNode;
+    endText?: string;
     error?: boolean;
     success?: boolean;
     warning?: boolean;
 }
-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;
+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

@@ -1,6 +1,6 @@
 import { ComponentMeta, Story } from '@storybook/react';
 import { InputTextProps } from './InputText';
-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>;
+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>;
 export default _default;
 export declare const Default: Story<InputTextProps>;
 export declare const WithPersistentLabel: Story<InputTextProps>;
@@ -12,3 +12,4 @@ export declare const WithErrorTooltip: Story<InputTextProps>;
 export declare const WithWarningTooltip: Story<InputTextProps>;
 export declare const WithReadOnly: Story<InputTextProps>;
 export declare const WithMultiline: Story<InputTextProps>;
+export declare const WithEndText: Story<InputTextProps>;

package/lib/components/time-picker/TimePicker.d.ts

@@ -44,6 +44,8 @@ export interface TimePickerProps extends CommonProps {
     onKeyDown?: (e: KeyboardEvent<HTMLElement>, contextEnum: DatePickerKeydownContext) => void;
     /** Callback fired when the popup requests to be opened. Use in controlled mode (see `open`). */
     onOpen?: () => void;
+    /** Callback fired when the time value on the opened popper changes. */
+    onPopperTimeChange?: (value: string) => void;
     /** Control the popup or dialog open state. */
     open?: boolean;
     /** If true, the label will be persistently displayed outside the field */
@@ -58,4 +60,4 @@ export interface TimePickerProps extends CommonProps {
 export declare const DEFAULT_PICKER_TIME_FORMAT = "HH:mm";
 export declare const DEFAULT_TIME_FORMAT = "HH:mm";
 export declare const DEFAULT_TIME = "01:00";
-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;
+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

@@ -1,6 +1,6 @@
 import { ComponentMeta, Story } from '@storybook/react';
 import { TimePickerProps } from './';
-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>;
+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>;
 export default _default;
 export declare const Default: TimePickerProps;
 export declare const WithAutoFocus: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "2.8.0",
+  "version": "2.8.1",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [