@digital-ai/dot-components 2.7.1 → 2.7.3

package/CHANGE_LOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## [2.7.3](https://www.npmjs.com/package/@digital-ai/dot-components) (05/01/2023)
+
+[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.7.2...2.7.3)
+
+**Features:**
+
+- D-24626: Add startEditable attribute to InlineEdit [\#1466](https://github.com/digital-ai/dot-components/pull/1466) ([jmcnally](https://github.com/jmcnally))
+
+**Misc:**
+
+- Updates to deprecated github action `set-output` [\#1465](https://github.com/digital-ai/dot-components/pull/1465) ([CWSites](https://github.com/CWSites))
+- remove use of set-output [\#1464](https://github.com/digital-ai/dot-components/pull/1464) ([CWSites](https://github.com/CWSites))
+- S-91985: Improve form input labelling for accessibility [\#1463](https://github.com/digital-ai/dot-components/pull/1463) ([jmcnally](https://github.com/jmcnally))
+
+## [2.7.2](https://www.npmjs.com/package/@digital-ai/dot-components) (04/24/2023)
+
+[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.7.1...2.7.2)
+
+**Features:**
+
+- S-92086: `DotDatePicker` improvements [\#1461](https://github.com/digital-ai/dot-components/pull/1461) ([dmiletic85](https://github.com/dmiletic85))
+
 ## [2.7.1](https://www.npmjs.com/package/@digital-ai/dot-components) (04/20/2023)
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.7.0...2.7.1)
@@ -10,6 +32,7 @@
 
 **Fixed bugs:**
 
+- Issue-1449: Update status pills to have generally lighter backgrounds [\#1456](https://github.com/digital-ai/dot-components/pull/1456) ([jmcnally](https://github.com/jmcnally))
 - `DotTimePicker`, `DotDatePicker`: fix issues with controlled and uncontrolled states [\#1454](https://github.com/digital-ai/dot-components/pull/1454) ([dmiletic85](https://github.com/dmiletic85))
 - D-24807: `Demo app` - fix error when starting demo application [\#1451](https://github.com/digital-ai/dot-components/pull/1451) ([dmiletic85](https://github.com/dmiletic85))
 
@@ -340,7 +363,6 @@
 **Features:**
 
 - S-87871 Expose callback when sidebar collapses/expands [\#1274](https://github.com/digital-ai/dot-components/pull/1274) ([angel-git](https://github.com/angel-git))
-- S-87620 Adjust height for inputs and for medium sized buttons [\#1263](https://github.com/digital-ai/dot-components/pull/1263) ([nikolinadapic](https://github.com/nikolinadapic))
 
 **Fixed bugs:**
 
@@ -353,6 +375,7 @@
 **Features:**
 
 - S-87726 Align input content with helper text [\#1265](https://github.com/digital-ai/dot-components/pull/1265) ([nikolinadapic](https://github.com/nikolinadapic))
+- S-87620 Adjust height for inputs and for medium sized buttons [\#1263](https://github.com/digital-ai/dot-components/pull/1263) ([nikolinadapic](https://github.com/nikolinadapic))
 - S-87616 Adjust left margin for helper text [\#1262](https://github.com/digital-ai/dot-components/pull/1262) ([nikolinadapic](https://github.com/nikolinadapic))
 - S-87599: `DotAutocomplete`  Add optional `persistentLabel` prop [\#1258](https://github.com/digital-ai/dot-components/pull/1258) ([dmiletic85](https://github.com/dmiletic85))
 
@@ -469,6 +492,7 @@
 
 **Features:**
 
+- S-84117: As a customer admin, I want the IdP creation flow to be more intuitive, as I find the existing user flow a little overwhelming [\#1185](https://github.com/digital-ai/dot-components/pull/1185) ([ryangamble](https://github.com/ryangamble))
 - S-85256: `Map` component example in demo app [\#1184](https://github.com/digital-ai/dot-components/pull/1184) ([dmiletic85](https://github.com/dmiletic85))
 
 **Fixed bugs:**
@@ -487,7 +511,6 @@
 
 **Features:**
 
-- S-84117: As a customer admin, I want the IdP creation flow to be more intuitive, as I find the existing user flow a little overwhelming [\#1185](https://github.com/digital-ai/dot-components/pull/1185) ([ryangamble](https://github.com/ryangamble))
 - S-85283: `InlineEdit` component should provide a tooltip out the box [\#1181](https://github.com/digital-ai/dot-components/pull/1181) ([dmiletic85](https://github.com/dmiletic85))
 
 **Fixed bugs:**
@@ -525,6 +548,7 @@
 
 **Fixed bugs:**
 
+- S-84816: `InlineEdit`: Disable Save button when value contains only spaces [\#1156](https://github.com/digital-ai/dot-components/pull/1156) ([dmiletic85](https://github.com/dmiletic85))
 - D-20958: Safari animation jitter [\#1154](https://github.com/digital-ai/dot-components/pull/1154) ([CWSites](https://github.com/CWSites))
 
 **Misc:**
@@ -541,7 +565,6 @@
 
 **Fixed bugs:**
 
-- S-84816: `InlineEdit`: Disable Save button when value contains only spaces [\#1156](https://github.com/digital-ai/dot-components/pull/1156) ([dmiletic85](https://github.com/dmiletic85))
 - D-20970: DotTableActions component [\#1134](https://github.com/digital-ai/dot-components/pull/1134) ([selsemore](https://github.com/selsemore))
 - D-20359: only display tooltip if string [\#1127](https://github.com/digital-ai/dot-components/pull/1127) ([CWSites](https://github.com/CWSites))
 
@@ -694,6 +717,7 @@
 **Fixed bugs:**
 
 - D-20004: Fix multiSelect for tables that use onUpdateData callback [\#1005](https://github.com/digital-ai/dot-components/pull/1005) ([selsemore](https://github.com/selsemore))
+- D-19932: `Avatar` tooltip appears in wrong position [\#995](https://github.com/digital-ai/dot-components/pull/995) ([dmiletic85](https://github.com/dmiletic85))
 
 **Misc:**
 
@@ -714,7 +738,6 @@
 **Fixed bugs:**
 
 - D-19944: `Drawer` close icon doesn't have enough padding [\#996](https://github.com/digital-ai/dot-components/pull/996) ([dmiletic85](https://github.com/dmiletic85))
-- D-19932: `Avatar` tooltip appears in wrong position [\#995](https://github.com/digital-ai/dot-components/pull/995) ([dmiletic85](https://github.com/dmiletic85))
 - D-19816: `SplitButton`: `data-testid` is assigned to multiple elements [\#986](https://github.com/digital-ai/dot-components/pull/986) ([dmiletic85](https://github.com/dmiletic85))
 - D-19820: Failing `Table` unit tests on NX major upgrade branch [\#983](https://github.com/digital-ai/dot-components/pull/983) ([dmiletic85](https://github.com/dmiletic85))
 
@@ -991,6 +1014,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))
+- Add submitButtonProps prop to DotJsonSchemaForm component [\#775](https://github.com/digital-ai/dot-components/pull/775) ([selsemore](https://github.com/selsemore))
 
 ## [1.3.2](https://www.npmjs.com/package/@digital-ai/dot-components) (11/05/2021)
 
@@ -1005,7 +1029,6 @@
 
 - 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))
 - S-79957: improve husky [\#765](https://github.com/digital-ai/dot-components/pull/765) ([CWSites](https://github.com/CWSites))
 
@@ -1266,6 +1289,7 @@
 - S-77681: setup test-coverage for reporting on dot-components [\#610](https://github.com/digital-ai/dot-components/pull/610) ([CWSites](https://github.com/CWSites))
 - S-76838: address Sonarcloud code issues [\#608](https://github.com/digital-ai/dot-components/pull/608) ([CWSites](https://github.com/CWSites))
 - S-77317: Add 'height' prop to DotDrawer component [\#603](https://github.com/digital-ai/dot-components/pull/603) ([selsemore](https://github.com/selsemore))
+- Update GitHub prerelease [\#599](https://github.com/digital-ai/dot-components/pull/599) ([CWSites](https://github.com/CWSites))
 - S-76917: remove progressionBoard styles from theme provider [\#597](https://github.com/digital-ai/dot-components/pull/597) ([CWSites](https://github.com/CWSites))
 
 ## [1.0.3](https://www.npmjs.com/package/@digital-ai/dot-components) (07/27/2021)

package/index.esm.js

@@ -4290,6 +4290,9 @@ const getChipsFromAutocomplete = ({
 };
 const checkIfDuplicateItem = (itemText, autocompleteOptions) => autocompleteOptions.some(autocompleteOption => autocompleteOption.title === itemText);
 
+function ariaLabelOrAlternates(ariaLabel, label, placeholder) {
+  return ariaLabel || label || placeholder;
+}
 const DEFAULT_ACTION_ITEM_TEXT = 'Add new item';
 const DotAutoComplete = ({
   ListboxComponent,
@@ -4582,11 +4585,17 @@ const DotAutoComplete = ({
             error: _error,
             focused: _readOnly ? false : undefined,
             helperText: helperText,
+            id: inputId,
             inputProps: Object.assign(Object.assign({}, inputProps), {
+              'aria-label': ariaLabelOrAlternates(ariaLabel, label, placeholder),
+              'data-testid': dataTestId && `${dataTestId}-input`,
               id: inputId,
               className: useStylesWithRootClass(inputProps.className, 'dot-input'),
               readOnly: _readOnly
             }),
+            InputLabelProps: {
+              htmlFor: inputId
+            },
             InputProps: Object.assign(Object.assign({}, params.InputProps), {
               endAdornment: !_readOnly ? renderEndAdornment(params.InputProps.endAdornment) : undefined
             }),
@@ -7054,6 +7063,7 @@ const DotInlineEdit = ({
   onEditStateChange,
   readOnly,
   selectTextOnEdit,
+  startEditable: _startEditable = false,
   tabIndex: _tabIndex = 0,
   tooltip,
   typography: _typography = 'body1',
@@ -7065,6 +7075,11 @@ const DotInlineEdit = ({
   const [inputValue, setInputValue] = useState(_value);
   const inputRef = useRef();
   const inlineEditRef = useRef();
+  useEffect(() => {
+    if (_startEditable && !readOnly) {
+      enterEditMode();
+    }
+  }, []);
   useEffect(() => {
     if (_value !== inputValue) {
       setInputValue(_value);
@@ -7077,10 +7092,13 @@ const DotInlineEdit = ({
       setShowTooltip(visible);
     }
   };
-  const handleInlineEditClick = () => {
-    if (editing) return;
+  const enterEditMode = () => {
     setOriginalValue(inputValue);
     setEditing(true);
+  };
+  const handleInlineEditClick = () => {
+    if (editing) return;
+    enterEditMode();
     if (onEditStateChange) {
       onEditStateChange(true);
     }
@@ -7185,7 +7203,7 @@ const DotInlineEdit = ({
         error: false,
         fullWidth: _fullWidth,
         inputProps: {
-          'data-testid': dataTestId,
+          'data-testid': `${dataTestId}-input`,
           className: 'dot-input',
           maxLength: charactersLimit === null || charactersLimit === void 0 ? void 0 : charactersLimit.maxLength
         },
@@ -7324,7 +7342,7 @@ const StyledPill = styled(Chip).withConfig({
   componentId: "l7oxi2-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{background-color:", ";color:", ";border-color:", ";&.error{background-color:", ";color:", ";}&.success{background-color:", ";color:", ";}&.warning{background-color:", ";color:", ";}&.in-progress{background-color:", ";color:", ";}"], rootClassName$n, ({
+}) => css(["&.", "{background-color:", ";color:", ";border-color:", ";&.error{background-color:", ";border-color:", ";.dot-icon{color:", ";}color:", ";}&.success{background-color:", ";border-color:", ";.dot-icon{color:", ";}color:", ";}&.warning{background-color:", ";border-color:", ";.dot-icon{color:", ";}color:", ";}&.in-progress{background-color:", ";border-color:", ";.dot-icon{color:", ";}color:", ";}"], rootClassName$n, ({
   backgroundcolor
 }) => {
   return backgroundcolor || theme.palette.grey[200];
@@ -7336,7 +7354,7 @@ const StyledPill = styled(Chip).withConfig({
   bordercolor
 }) => {
   return bordercolor ? bordercolor : theme.palette.layer.n700;
-}, theme.palette.error[500], theme.palette.layer.n0, theme.palette.success[500], theme.palette.layer.n0, theme.palette.warning[500], theme.palette.layer.n700, theme.palette.primary.main, theme.palette.layer.n0));
+}, theme.palette.error[100], theme.palette.error.main, theme.palette.error.main, theme.palette.layer.n700, theme.palette.success[100], theme.palette.success.main, theme.palette.success.main, theme.palette.layer.n700, theme.palette.warning[100], theme.palette.warning.main, theme.palette.warning.main, theme.palette.layer.n700, theme.palette.primary[100], theme.palette.primary.main, theme.palette.primary.main, theme.palette.layer.n700));
 
 const DotPill = ({
   ariaLabel,
@@ -9485,11 +9503,13 @@ const DotDatePicker = ({
   defaultValue,
   disableOpenPicker,
   disablePast,
+  disablePortal: _disablePortal = false,
   disabled,
   displayWeekNumber,
   displayClearButton: _displayClearButton = true,
   error,
   fixedWeekNumber,
+  focusInputOnPopperOpened,
   format,
   fullWidth: _fullWidth = false,
   helperText,
@@ -9516,8 +9536,19 @@ const DotDatePicker = ({
   const hasValueWithoutChangeHandler = value !== undefined && onChange === undefined;
   const hasBothValueAndDefaultValue = value !== undefined && defaultValue !== undefined;
   const isInputReadOnly = _readOnly || hasValueWithoutChangeHandler || hasBothValueAndDefaultValue;
+  const inputRef = useRef(null);
   const rootClasses = useStylesWithRootClass(rootClassName$1, className, isInputReadOnly ? 'read-only' : '');
   const containerClasses = useStylesWithRootClass(containerClassName$1, _fullWidth ? 'full-width' : '', className);
+  const focusInput = ref => {
+    setTimeout(() => {
+      ref.current.focus();
+    }, 0);
+  };
+  useEffect(() => {
+    if (focusInputOnPopperOpened && open && inputRef.current) {
+      focusInput(inputRef);
+    }
+  }, [open, focusInputOnPopperOpened]);
   useEffect(() => {
     if (hasValueWithoutChangeHandler) {
       console.warn('Warning: You provided a `value` prop without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.');
@@ -9542,6 +9573,12 @@ const DotDatePicker = ({
     onAccept(changedValue ? changedValue.format(dateFormat) : null);
   };
   const handleError = (validationError, currentValue) => onError === null || onError === void 0 ? void 0 : onError(validationError, dayjs(currentValue).format(dateFormat));
+  const handleOpen = () => {
+    if (focusInputOnPopperOpened && inputRef.current) {
+      focusInput(inputRef);
+    }
+    onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+  };
   const createActionBar = () => {
     const actionBar = {
       actions: []
@@ -9584,7 +9621,7 @@ const DotDatePicker = ({
         onChange: handleChange,
         onClose: onClose,
         onError: handleError,
-        onOpen: onOpen,
+        onOpen: handleOpen,
         open: open,
         showDaysOutsideCurrentMonth: showDaysOutsideCurrentMonth,
         slots: {
@@ -9614,6 +9651,7 @@ const DotDatePicker = ({
               'data-testid': 'dot-date-picker-input',
               onBlur
             },
+            inputRef,
             fullWidth: _fullWidth,
             name: inputName
           },
@@ -9622,6 +9660,9 @@ const DotDatePicker = ({
           },
           desktopTrapFocus: {
             disableEnforceFocus: true
+          },
+          popper: {
+            disablePortal: _disablePortal
           }
         },
         value: value && dayjs(value, dateFormat)
@@ -10034,4 +10075,16 @@ const DotTimePicker = ({
   }), void 0);
 };
 
-export { Cell, CreateUUID, CssCell, CssGrid, CssGridDebug, Daytime, DotAccordion, DotActionToolbar, DotAlertBanner, DotAppLogo, DotAppSwitcher, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotBadge, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCheckbox, DotCheckboxGroup, DotChip, DotConfirmationDialog, DotCopyButton, DotCoreApiProvider, DotDatePicker, DotDialog, DotDivider, DotDraggableList, DotDrawer, DotDynamicForm, DotEmptyState, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotInlineEdit, DotInputSelect, DotInputText, DotLinearProgress, DotLink, DotList, DotMenu, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotStepper, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTimePicker, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, lightThemeColors as lightColors, mockScrollIntoView, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useDotCoreApiContext, useDotSnackbarContext };
+const DotClickAwayListener = ({
+  children,
+  disableReactTree: _disableReactTree = false,
+  onClickAway
+}) => {
+  return jsx(ClickAwayListener, {
+    children: children,
+    disableReactTree: _disableReactTree,
+    onClickAway: onClickAway
+  }, void 0);
+};
+
+export { Cell, CreateUUID, CssCell, CssGrid, CssGridDebug, Daytime, DotAccordion, DotActionToolbar, DotAlertBanner, DotAppLogo, DotAppSwitcher, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotBadge, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCheckbox, DotCheckboxGroup, DotChip, DotClickAwayListener, DotConfirmationDialog, DotCopyButton, DotCoreApiProvider, DotDatePicker, DotDialog, DotDivider, DotDraggableList, DotDrawer, DotDynamicForm, DotEmptyState, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotInlineEdit, DotInputSelect, DotInputText, DotLinearProgress, DotLink, DotList, DotMenu, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotStepper, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTimePicker, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, lightThemeColors as lightColors, mockScrollIntoView, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useDotCoreApiContext, useDotSnackbarContext };

package/index.umd.js

@@ -4723,6 +4723,9 @@
       });
     };
 
+    function ariaLabelOrAlternates(ariaLabel, label, placeholder) {
+      return ariaLabel || label || placeholder;
+    }
     var DEFAULT_ACTION_ITEM_TEXT = 'Add new item';
     var DotAutoComplete = function DotAutoComplete(_a) {
       var ListboxComponent = _a.ListboxComponent,
@@ -5041,11 +5044,17 @@
                 error: error,
                 focused: readOnly ? false : undefined,
                 helperText: helperText,
+                id: inputId,
                 inputProps: __assign(__assign({}, inputProps), {
+                  'aria-label': ariaLabelOrAlternates(ariaLabel, label, placeholder),
+                  'data-testid': dataTestId && dataTestId + "-input",
                   id: inputId,
                   className: useStylesWithRootClass(inputProps.className, 'dot-input'),
                   readOnly: readOnly
                 }),
+                InputLabelProps: {
+                  htmlFor: inputId
+                },
                 InputProps: __assign(__assign({}, params.InputProps), {
                   endAdornment: !readOnly ? renderEndAdornment(params.InputProps.endAdornment) : undefined
                 }),
@@ -7601,27 +7610,34 @@
         onEditStateChange = _a.onEditStateChange,
         readOnly = _a.readOnly,
         selectTextOnEdit = _a.selectTextOnEdit,
-        _c = _a.tabIndex,
-        tabIndex = _c === void 0 ? 0 : _c,
+        _c = _a.startEditable,
+        startEditable = _c === void 0 ? false : _c,
+        _d = _a.tabIndex,
+        tabIndex = _d === void 0 ? 0 : _d,
         tooltip = _a.tooltip,
-        _d = _a.typography,
-        typography = _d === void 0 ? 'body1' : _d,
-        _e = _a.value,
-        value = _e === void 0 ? '' : _e;
-      var _f = React.useState(false),
-        editing = _f[0],
-        setEditing = _f[1];
+        _e = _a.typography,
+        typography = _e === void 0 ? 'body1' : _e,
+        _f = _a.value,
+        value = _f === void 0 ? '' : _f;
       var _g = React.useState(false),
-        showTooltip = _g[0],
-        setShowTooltip = _g[1];
-      var _h = React.useState(''),
-        originalValue = _h[0],
-        setOriginalValue = _h[1];
-      var _j = React.useState(value),
-        inputValue = _j[0],
-        setInputValue = _j[1];
+        editing = _g[0],
+        setEditing = _g[1];
+      var _h = React.useState(false),
+        showTooltip = _h[0],
+        setShowTooltip = _h[1];
+      var _j = React.useState(''),
+        originalValue = _j[0],
+        setOriginalValue = _j[1];
+      var _k = React.useState(value),
+        inputValue = _k[0],
+        setInputValue = _k[1];
       var inputRef = React.useRef();
       var inlineEditRef = React.useRef();
+      React.useEffect(function () {
+        if (startEditable && !readOnly) {
+          enterEditMode();
+        }
+      }, []);
       React.useEffect(function () {
         if (value !== inputValue) {
           setInputValue(value);
@@ -7634,10 +7650,13 @@
           setShowTooltip(visible);
         }
       };
-      var handleInlineEditClick = function handleInlineEditClick() {
-        if (editing) return;
+      var enterEditMode = function enterEditMode() {
         setOriginalValue(inputValue);
         setEditing(true);
+      };
+      var handleInlineEditClick = function handleInlineEditClick() {
+        if (editing) return;
+        enterEditMode();
         if (onEditStateChange) {
           onEditStateChange(true);
         }
@@ -7787,7 +7806,7 @@
             error: false,
             fullWidth: fullWidth,
             inputProps: {
-              'data-testid': dataTestId,
+              'data-testid': dataTestId + "-input",
               className: 'dot-input',
               maxLength: charactersLimit === null || charactersLimit === void 0 ? void 0 : charactersLimit.maxLength
             },
@@ -7948,7 +7967,7 @@
       componentId: "l7oxi2-0"
     })(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n    &.", " {\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n\n      &.error {\n        background-color: ", ";\n        color: ", ";\n      }\n\n      &.success {\n        background-color: ", ";\n        color: ", ";\n      }\n      &.warning {\n        background-color: ", ";\n        color: ", ";\n      }\n\n      &.in-progress {\n        background-color: ", ";\n        color: ", ";\n      }\n  "], ["\n    &.", " {\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n\n      &.error {\n        background-color: ", ";\n        color: ", ";\n      }\n\n      &.success {\n        background-color: ", ";\n        color: ", ";\n      }\n      &.warning {\n        background-color: ", ";\n        color: ", ";\n      }\n\n      &.in-progress {\n        background-color: ", ";\n        color: ", ";\n      }\n  "])), rootClassName$n, function (_a) {
+      return styled.css(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n    &.", " {\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n\n      &.error {\n        background-color: ", ";\n        border-color: ", ";\n        .dot-icon {\n          color: ", ";\n        }\n        color: ", ";\n      }\n\n      &.success {\n        background-color: ", ";\n        border-color: ", ";\n        .dot-icon {\n          color: ", ";\n        }\n        color: ", ";\n      }\n\n      &.warning {\n        background-color: ", ";\n        border-color: ", ";\n        .dot-icon {\n          color: ", ";\n        }\n        color: ", ";\n      }\n\n      &.in-progress {\n        background-color: ", ";\n        border-color: ", ";\n        .dot-icon {\n          color: ", ";\n        }\n        color: ", ";\n      }\n  "], ["\n    &.", " {\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n\n      &.error {\n        background-color: ", ";\n        border-color: ", ";\n        .dot-icon {\n          color: ", ";\n        }\n        color: ", ";\n      }\n\n      &.success {\n        background-color: ", ";\n        border-color: ", ";\n        .dot-icon {\n          color: ", ";\n        }\n        color: ", ";\n      }\n\n      &.warning {\n        background-color: ", ";\n        border-color: ", ";\n        .dot-icon {\n          color: ", ";\n        }\n        color: ", ";\n      }\n\n      &.in-progress {\n        background-color: ", ";\n        border-color: ", ";\n        .dot-icon {\n          color: ", ";\n        }\n        color: ", ";\n      }\n  "])), rootClassName$n, function (_a) {
         var backgroundcolor = _a.backgroundcolor;
         return backgroundcolor || theme.palette.grey[200];
       }, function (_a) {
@@ -7957,7 +7976,7 @@
       }, function (_a) {
         var bordercolor = _a.bordercolor;
         return bordercolor ? bordercolor : theme.palette.layer.n700;
-      }, theme.palette.error[500], theme.palette.layer.n0, theme.palette.success[500], theme.palette.layer.n0, theme.palette.warning[500], theme.palette.layer.n700, theme.palette.primary.main, theme.palette.layer.n0);
+      }, theme.palette.error[100], theme.palette.error.main, theme.palette.error.main, theme.palette.layer.n700, theme.palette.success[100], theme.palette.success.main, theme.palette.success.main, theme.palette.layer.n700, theme.palette.warning[100], theme.palette.warning.main, theme.palette.warning.main, theme.palette.layer.n700, theme.palette.primary[100], theme.palette.primary.main, theme.palette.primary.main, theme.palette.layer.n700);
     });
     var templateObject_1$n, templateObject_2$m;
 
@@ -10319,15 +10338,18 @@
         defaultValue = _a.defaultValue,
         disableOpenPicker = _a.disableOpenPicker,
         disablePast = _a.disablePast,
+        _d = _a.disablePortal,
+        disablePortal = _d === void 0 ? false : _d,
         disabled = _a.disabled,
         displayWeekNumber = _a.displayWeekNumber,
-        _d = _a.displayClearButton,
-        displayClearButton = _d === void 0 ? true : _d,
+        _e = _a.displayClearButton,
+        displayClearButton = _e === void 0 ? true : _e,
         error = _a.error,
         fixedWeekNumber = _a.fixedWeekNumber,
+        focusInputOnPopperOpened = _a.focusInputOnPopperOpened,
         format = _a.format,
-        _e = _a.fullWidth,
-        fullWidth = _e === void 0 ? false : _e,
+        _f = _a.fullWidth,
+        fullWidth = _f === void 0 ? false : _f,
         helperText = _a.helperText,
         inputId = _a.inputId,
         inputName = _a.inputName,
@@ -10343,18 +10365,29 @@
         onOpen = _a.onOpen,
         open = _a.open,
         persistentLabel = _a.persistentLabel,
-        _f = _a.readOnly,
-        readOnly = _f === void 0 ? false : _f,
-        _g = _a.required,
-        required = _g === void 0 ? false : _g,
+        _g = _a.readOnly,
+        readOnly = _g === void 0 ? false : _g,
+        _h = _a.required,
+        required = _h === void 0 ? false : _h,
         showDaysOutsideCurrentMonth = _a.showDaysOutsideCurrentMonth,
         value = _a.value;
       var dateFormat = format || 'YYYY-MM-DD';
       var hasValueWithoutChangeHandler = value !== undefined && onChange === undefined;
       var hasBothValueAndDefaultValue = value !== undefined && defaultValue !== undefined;
       var isInputReadOnly = readOnly || hasValueWithoutChangeHandler || hasBothValueAndDefaultValue;
+      var inputRef = React.useRef(null);
       var rootClasses = useStylesWithRootClass(rootClassName$1, className, isInputReadOnly ? 'read-only' : '');
       var containerClasses = useStylesWithRootClass(containerClassName$1, fullWidth ? 'full-width' : '', className);
+      var focusInput = function focusInput(ref) {
+        setTimeout(function () {
+          ref.current.focus();
+        }, 0);
+      };
+      React.useEffect(function () {
+        if (focusInputOnPopperOpened && open && inputRef.current) {
+          focusInput(inputRef);
+        }
+      }, [open, focusInputOnPopperOpened]);
       React.useEffect(function () {
         if (hasValueWithoutChangeHandler) {
           console.warn('Warning: You provided a `value` prop without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.');
@@ -10381,6 +10414,12 @@
       var handleError = function handleError(validationError, currentValue) {
         return onError === null || onError === void 0 ? void 0 : onError(validationError, dayjs__default["default"](currentValue).format(dateFormat));
       };
+      var handleOpen = function handleOpen() {
+        if (focusInputOnPopperOpened && inputRef.current) {
+          focusInput(inputRef);
+        }
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+      };
       var createActionBar = function createActionBar() {
         var actionBar = {
           actions: []
@@ -10423,7 +10462,7 @@
             onChange: handleChange,
             onClose: onClose,
             onError: handleError,
-            onOpen: onOpen,
+            onOpen: handleOpen,
             open: open,
             showDaysOutsideCurrentMonth: showDaysOutsideCurrentMonth,
             slots: {
@@ -10457,6 +10496,7 @@
                   'data-testid': 'dot-date-picker-input',
                   onBlur: onBlur
                 },
+                inputRef: inputRef,
                 fullWidth: fullWidth,
                 name: inputName
               },
@@ -10465,6 +10505,9 @@
               },
               desktopTrapFocus: {
                 disableEnforceFocus: true
+              },
+              popper: {
+                disablePortal: disablePortal
               }
             },
             value: value && dayjs__default["default"](value, dateFormat)
@@ -10921,6 +10964,18 @@
       }), void 0);
     };
 
+    var DotClickAwayListener = function DotClickAwayListener(_a) {
+      var children = _a.children,
+        _b = _a.disableReactTree,
+        disableReactTree = _b === void 0 ? false : _b,
+        onClickAway = _a.onClickAway;
+      return jsxRuntime.jsx(material.ClickAwayListener, {
+        children: children,
+        disableReactTree: disableReactTree,
+        onClickAway: onClickAway
+      }, void 0);
+    };
+
     exports.Cell = Cell;
     exports.CreateUUID = CreateUUID;
     exports.CssCell = CssCell;
@@ -10946,6 +11001,7 @@
     exports.DotCheckbox = DotCheckbox;
     exports.DotCheckboxGroup = DotCheckboxGroup;
     exports.DotChip = DotChip;
+    exports.DotClickAwayListener = DotClickAwayListener;
     exports.DotConfirmationDialog = DotConfirmationDialog;
     exports.DotCopyButton = DotCopyButton;
     exports.DotCoreApiProvider = DotCoreApiProvider;

package/lib/components/click-away-listener/ClickAwayListener.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+export interface ClickAwayListenerProps {
+    /** The wrapped element. */
+    children: ReactElement;
+    /** If true, the React tree is ignored and only the DOM tree is considered. This prop changes how portaled elements are handled.  */
+    disableReactTree?: boolean;
+    /** Callback fired when a "click away" event is detected. */
+    onClickAway: (event: MouseEvent | TouchEvent) => void;
+}
+export declare const DotClickAwayListener: ({ children, disableReactTree, onClickAway, }: ClickAwayListenerProps) => JSX.Element;

package/lib/components/click-away-listener/ClickAwayListener.stories.d.ts

@@ -0,0 +1,5 @@
+import { ComponentMeta, Story } from '@storybook/react';
+import { ClickAwayListenerProps } from './ClickAwayListener';
+declare const _default: ComponentMeta<({ children, disableReactTree, onClickAway, }: ClickAwayListenerProps) => JSX.Element>;
+export default _default;
+export declare const Default: Story<ClickAwayListenerProps>;

package/lib/components/click-away-listener/index.d.ts

@@ -0,0 +1,2 @@
+export type { ClickAwayListenerProps } from './ClickAwayListener';
+export { DotClickAwayListener } from './ClickAwayListener';

package/lib/components/date-picker/DatePicker.d.ts

@@ -15,6 +15,8 @@ export interface DatePickerProps extends CommonProps {
     disableOpenPicker?: boolean;
     /** If `true`, disable values before the current date for date components, time for time components and both for date time components. */
     disablePast?: boolean;
+    /** Disable the portal behavior. If true, children stay within parent DOM hierarchy. */
+    disablePortal?: boolean;
     /** If `true`, the picker and text field are disabled. */
     disabled?: boolean;
     /** If `true`, 'Clear' button will be displayed in the calendar popper. `True` by default. */
@@ -25,6 +27,8 @@ export interface DatePickerProps extends CommonProps {
     error?: boolean;
     /** Calendar will show more weeks in order to match this value. Put it to 6 for having fix number of week in Gregorian calendars */
     fixedWeekNumber?: number;
+    /** If `true`, focus will be automatically set to the input field when popper opens */
+    focusInputOnPopperOpened?: boolean;
     /** Format of the date when rendered in the input(s). Defaults to localized format based on the used `views`. */
     format?: string;
     /** If true, the input will take up the full width of its container */
@@ -73,4 +77,4 @@ export interface DatePickerProps extends CommonProps {
     /** The selected value. Used when the component is controlled. */
     value?: string;
 }
-export declare const DotDatePicker: ({ ariaLabel, autoFocus, className, closeOnSelect, "data-testid": dataTestId, defaultValue, disableOpenPicker, disablePast, disabled, displayWeekNumber, displayClearButton, error, fixedWeekNumber, format, fullWidth, helperText, inputId, inputName, label, locale, maxDate, minDate, onAccept, onBlur, onChange, onClose, onError, onOpen, open, persistentLabel, readOnly, required, showDaysOutsideCurrentMonth, value, }: DatePickerProps) => JSX.Element;
+export declare const DotDatePicker: ({ ariaLabel, autoFocus, className, closeOnSelect, "data-testid": dataTestId, defaultValue, disableOpenPicker, disablePast, disablePortal, disabled, displayWeekNumber, displayClearButton, error, fixedWeekNumber, focusInputOnPopperOpened, format, fullWidth, helperText, inputId, inputName, label, locale, maxDate, minDate, onAccept, onBlur, onChange, onClose, onError, onOpen, open, persistentLabel, readOnly, required, showDaysOutsideCurrentMonth, value, }: DatePickerProps) => JSX.Element;

package/lib/components/date-picker/DatePicker.stories.d.ts

@@ -1,6 +1,6 @@
 import { ComponentMeta, Story } from '@storybook/react';
 import { DatePickerProps } from './';
-declare const _default: ComponentMeta<({ ariaLabel, autoFocus, className, closeOnSelect, "data-testid": dataTestId, defaultValue, disableOpenPicker, disablePast, disabled, displayWeekNumber, displayClearButton, error, fixedWeekNumber, format, fullWidth, helperText, inputId, inputName, label, locale, maxDate, minDate, onAccept, onBlur, onChange, onClose, onError, onOpen, open, persistentLabel, readOnly, required, showDaysOutsideCurrentMonth, value, }: DatePickerProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ ariaLabel, autoFocus, className, closeOnSelect, "data-testid": dataTestId, defaultValue, disableOpenPicker, disablePast, disablePortal, disabled, displayWeekNumber, displayClearButton, error, fixedWeekNumber, focusInputOnPopperOpened, format, fullWidth, helperText, inputId, inputName, label, locale, maxDate, minDate, onAccept, onBlur, onChange, onClose, onError, onOpen, open, persistentLabel, readOnly, required, showDaysOutsideCurrentMonth, value, }: DatePickerProps) => JSX.Element>;
 export default _default;
 export declare const Default: DatePickerProps;
 export declare const WithHelperText: any;
@@ -18,8 +18,14 @@ export declare const WithFullWidth: any;
 export declare const WithoutClearButton: any;
 export declare const WithConsoleWarning: any;
 export declare const WithDefaultValue: any;
+export declare const WithInputFocusOnPopperOpened: any;
 export declare const WithControlledMode: Story<DatePickerProps>;
 export declare const WithMinMaxDates: Story<DatePickerProps>;
 export declare const WithLocaleConfiguration: Story<DatePickerProps>;
 export declare const WithChangeOnBlur: Story<DatePickerProps>;
 export declare const WithOpenedPopperInControlledMode: Story<DatePickerProps>;
+export interface TaskDateViewContentProps {
+    date: string;
+}
+export declare const TaskDateViewContent: ({ date }: TaskDateViewContentProps) => JSX.Element;
+export declare const WithConditionalRendering: Story<DatePickerProps>;

package/lib/components/date-picker/DatePicker.stories.styles.d.ts

@@ -1,6 +1,8 @@
 export declare const datePickerWithControlledModeClassName = "dot-date-picker-with-controlled-mode";
 export declare const datePickerWithLocaleClassName = "dot-date-picker-with-locale";
 export declare const datePickerWithBlurClassName = "dot-date-picker-with-blur";
+export declare const datePickerWithConditionalRenderingClassName = "dot-date-picker-with-conditional-rendering";
 export declare const StyledDatePickerWithControlledMode: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledDatePickerWithChangeOnBlur: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledDatePickerWithLocale: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledDatePickerWithConditionalRendering: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/index.d.ts

@@ -35,6 +35,7 @@ export type { FileItemProps, FileUploadError, FileUploadProps, ListItemFile, Map
 export type { LinearProgressColor, LinearProgressProps, LinearProgressVariant, } from './linear-progress';
 export type { DatePickerLocale, DatePickerProps, FieldChangeHandlerContext, } from './date-picker';
 export type { TimePickerProps } from './time-picker';
+export type { ClickAwayListenerProps } from './click-away-listener';
 export { DotAccordion } from './accordion/Accordion';
 export { DotActionToolbar } from './action-toolbar/ActionToolbar';
 export { DotAlertBanner } from './alert-banner/AlertBanner';
@@ -97,4 +98,5 @@ export { DotDraggableList } from './draggable-list';
 export { DotLinearProgress } from './linear-progress';
 export { DotDatePicker } from './date-picker';
 export { Daytime, DotTimePicker, mockScrollIntoView } from './time-picker';
+export { DotClickAwayListener } from './click-away-listener';
 export { CreateUUID } from './createUUID';

package/lib/components/inline-edit/InlineEdit.d.ts

@@ -20,6 +20,8 @@ export interface InlineEditProps extends CommonProps {
     readOnly?: boolean;
     /** If true, when starting edit it will select all text in the input */
     selectTextOnEdit?: boolean;
+    /** If true and readOnly is false when component loads, start as editable */
+    startEditable?: boolean;
     /** tab order for the inline edit */
     tabIndex?: number;
     /** Tooltip text displayed on hover */
@@ -32,4 +34,4 @@ export interface InlineEditProps extends CommonProps {
 /**
  * @experimental This component is still in development
  */
-export declare const DotInlineEdit: ({ ariaLabel, bindings, charactersLimit, className, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, readOnly, selectTextOnEdit, tabIndex, tooltip, typography, value, }: InlineEditProps) => JSX.Element;
+export declare const DotInlineEdit: ({ ariaLabel, bindings, charactersLimit, className, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, readOnly, selectTextOnEdit, startEditable, tabIndex, tooltip, typography, value, }: InlineEditProps) => JSX.Element;

package/lib/components/inline-edit/InlineEdit.stories.d.ts

@@ -1,6 +1,6 @@
 import { ComponentMeta, Story } from '@storybook/react';
 import { InlineEditProps } from './InlineEdit';
-declare const _default: ComponentMeta<({ ariaLabel, bindings, charactersLimit, className, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, readOnly, selectTextOnEdit, tabIndex, tooltip, typography, value, }: InlineEditProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ ariaLabel, bindings, charactersLimit, className, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, readOnly, selectTextOnEdit, startEditable, tabIndex, tooltip, typography, value, }: InlineEditProps) => JSX.Element>;
 export default _default;
 export declare const Default: Story<InlineEditProps>;
 export declare const WithCharactersLimit: any;
@@ -10,6 +10,7 @@ export declare const WithoutActionButtons: any;
 export declare const WithTooltip: any;
 export declare const WithSaveError: Story<InlineEditProps>;
 export declare const WithCustomTypography: Story<InlineEditProps>;
+export declare const WithStartEditable: any;
 export declare const WithSingleBinding: any;
 export declare const WithMultipleBindings: Story<InlineEditProps>;
 export declare const WithSelectOnEdit: any;

package/package.json

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