@digital-ai/dot-components 2.7.1 → 2.7.2

package/CHANGE_LOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [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))
+
+**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))
+
 ## [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)
@@ -340,7 +352,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 +364,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))
 
@@ -525,6 +537,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 +554,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))
 
@@ -563,6 +575,7 @@
 - D-20736: Fix text alignment for small DotAvatar [\#1116](https://github.com/digital-ai/dot-components/pull/1116) ([selsemore](https://github.com/selsemore))
 - D-20719:  `DotTable`: Checkbox column takes up to much space in a multi-select table [\#1112](https://github.com/digital-ai/dot-components/pull/1112) ([dmiletic85](https://github.com/dmiletic85))
 - D-20660: `DotNavigationRail`: Should be able to update the selected rail [\#1106](https://github.com/digital-ai/dot-components/pull/1106) ([dmiletic85](https://github.com/dmiletic85))
+- D-20511: remove extra period [\#1094](https://github.com/digital-ai/dot-components/pull/1094) ([CWSites](https://github.com/CWSites))
 
 ## [1.14.0](https://www.npmjs.com/package/@digital-ai/dot-components) (04/01/2022)
 
@@ -606,7 +619,6 @@
 
 **Fixed bugs:**
 
-- D-20511: remove extra period [\#1094](https://github.com/digital-ai/dot-components/pull/1094) ([CWSites](https://github.com/CWSites))
 - D-20463: Change the DotDrawer stories to make drawers not open initially [\#1086](https://github.com/digital-ai/dot-components/pull/1086) ([selsemore](https://github.com/selsemore))
 - D-20418: `DotTable`: Strange scrolling behavior with action menu [\#1082](https://github.com/digital-ai/dot-components/pull/1082) ([dmiletic85](https://github.com/dmiletic85))
 - D-20426: `DotConfirmation `: `title` and `message` prop are not applying correct font family [\#1081](https://github.com/digital-ai/dot-components/pull/1081) ([dmiletic85](https://github.com/dmiletic85))
@@ -1266,6 +1278,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

@@ -7324,7 +7324,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 +7336,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 +9485,13 @@ const DotDatePicker = ({
   defaultValue,
   disableOpenPicker,
   disablePast,
+  disablePortal: _disablePortal = false,
   disabled,
   displayWeekNumber,
   displayClearButton: _displayClearButton = true,
   error,
   fixedWeekNumber,
+  focusInputOnPopperOpened,
   format,
   fullWidth: _fullWidth = false,
   helperText,
@@ -9516,8 +9518,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 +9555,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 +9603,7 @@ const DotDatePicker = ({
         onChange: handleChange,
         onClose: onClose,
         onError: handleError,
-        onOpen: onOpen,
+        onOpen: handleOpen,
         open: open,
         showDaysOutsideCurrentMonth: showDaysOutsideCurrentMonth,
         slots: {
@@ -9614,6 +9633,7 @@ const DotDatePicker = ({
               'data-testid': 'dot-date-picker-input',
               onBlur
             },
+            inputRef,
             fullWidth: _fullWidth,
             name: inputName
           },
@@ -9622,6 +9642,9 @@ const DotDatePicker = ({
           },
           desktopTrapFocus: {
             disableEnforceFocus: true
+          },
+          popper: {
+            disablePortal: _disablePortal
           }
         },
         value: value && dayjs(value, dateFormat)
@@ -10034,4 +10057,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

@@ -7948,7 +7948,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 +7957,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 +10319,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 +10346,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 +10395,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 +10443,7 @@
             onChange: handleChange,
             onClose: onClose,
             onError: handleError,
-            onOpen: onOpen,
+            onOpen: handleOpen,
             open: open,
             showDaysOutsideCurrentMonth: showDaysOutsideCurrentMonth,
             slots: {
@@ -10457,6 +10477,7 @@
                   'data-testid': 'dot-date-picker-input',
                   onBlur: onBlur
                 },
+                inputRef: inputRef,
                 fullWidth: fullWidth,
                 name: inputName
               },
@@ -10465,6 +10486,9 @@
               },
               desktopTrapFocus: {
                 disableEnforceFocus: true
+              },
+              popper: {
+                disablePortal: disablePortal
               }
             },
             value: value && dayjs__default["default"](value, dateFormat)
@@ -10921,6 +10945,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 +10982,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/package.json

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