@digital-ai/dot-components 4.25.0 → 4.25.2

package/index.esm.js

@@ -13840,7 +13840,9 @@ const StyledDatePicker = styled(DatePicker)`
       }
 
       .dot-icon-btn .dot-i {
-        margin-top: -5px;
+        color: ${theme.palette.figma.typography.black};
+        margin-top: -6px;
+        margin-right: 6px;
       }
 
       .MuiFormLabel-root {
@@ -13873,68 +13875,17 @@ const StyledPickersDay = styled(PickersDay)`
 
 const rootClassName$C = 'dot-time-picker';
 const containerClassName$1 = 'dot-time-picker-container';
+const timePickerPopperClassName = 'dot-time-picker-popper';
 const TIME_SELECTION_HEIGHT_SPACING = 34.5;
 const TIME_SELECTION_WIDTH_SPACING = 14.5;
 const TIME_UNIT_WIDTH_SPACING = 4.5;
 const TIME_UNIT_HEIGHT_SPACING = 4.5;
 const StyledTimePickerContainer = styled.div`
-  ${({
-  theme
-}) => css`
+  ${() => css`
     &.${containerClassName$1} {
       .full-width {
         width: 100%;
       }
-
-      .dot-time-picker-popper {
-        z-index: ${levelTop};
-
-        .dot-time-picker-paper {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-
-          .dot-time-picker-selection {
-            max-height: ${theme.spacing(TIME_SELECTION_HEIGHT_SPACING)};
-            width: ${theme.spacing(TIME_SELECTION_WIDTH_SPACING)};
-            display: flex;
-            margin: ${theme.spacing(1)};
-            gap: ${theme.spacing(0.5)};
-
-            .dot-time-picker-hours,
-            .dot-time-picker-minutes,
-            .dot-time-picker-daytime {
-              display: flex;
-              flex-direction: column;
-              overflow: auto;
-              gap: ${theme.spacing(0.5)};
-              padding-bottom: ${theme.spacing(TIME_SELECTION_HEIGHT_SPACING - TIME_UNIT_HEIGHT_SPACING)};
-
-              /* Hide scrollbar for Chrome, Safari and Opera */
-              ::-webkit-scrollbar {
-                display: none;
-              }
-
-              /* Hide scrollbar for IE, Edge and Firefox */
-              -ms-overflow-style: none; /* IE and Edge */
-              scrollbar-width: none; /* Firefox */
-            }
-
-            .dot-picker-button {
-              width: ${theme.spacing(TIME_UNIT_WIDTH_SPACING)};
-              height: ${theme.spacing(TIME_UNIT_HEIGHT_SPACING)};
-              margin: 0;
-            }
-          }
-
-          .dot-time-picker-action-buttons {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: ${theme.spacing(0.5)};
-          }
-        }
-      }
     }
   `}
 `;
@@ -13951,7 +13902,9 @@ const StyledTimePicker = styled(TimePicker)`
       }
 
       .dot-icon-btn .dot-i {
-        margin-top: -5px;
+        margin-top: -6px;
+        margin-right: 6px;
+        color: ${theme.palette.figma.typography.black};
       }
 
       .MuiFormLabel-root {
@@ -13960,6 +13913,62 @@ const StyledTimePicker = styled(TimePicker)`
     }
   `}
 `;
+const StyledTimePickerPopper = styled(Popper)`
+  ${({
+  theme
+}) => css`
+    &.${timePickerPopperClassName} {
+      z-index: ${levelTop};
+
+      .dot-time-picker-paper {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .dot-time-picker-selection {
+          max-height: ${theme.spacing(TIME_SELECTION_HEIGHT_SPACING)};
+          width: ${theme.spacing(TIME_SELECTION_WIDTH_SPACING)};
+          display: flex;
+          margin: ${theme.spacing(1)};
+          gap: ${theme.spacing(0.5)};
+
+          .dot-time-picker-hours,
+          .dot-time-picker-minutes,
+          .dot-time-picker-daytime {
+            display: flex;
+            flex-direction: column;
+            overflow: auto;
+            gap: ${theme.spacing(0.5)};
+            padding-bottom: ${theme.spacing(TIME_SELECTION_HEIGHT_SPACING - TIME_UNIT_HEIGHT_SPACING)};
+
+            /* Hide scrollbar for Chrome, Safari and Opera */
+
+            ::-webkit-scrollbar {
+              display: none;
+            }
+
+            /* Hide scrollbar for IE, Edge and Firefox */
+            -ms-overflow-style: none; /* IE and Edge */
+            scrollbar-width: none; /* Firefox */
+          }
+
+          .dot-picker-button {
+            width: ${theme.spacing(TIME_UNIT_WIDTH_SPACING)};
+            height: ${theme.spacing(TIME_UNIT_HEIGHT_SPACING)};
+            margin: 0;
+          }
+        }
+
+        .dot-time-picker-action-buttons {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: ${theme.spacing(0.5)};
+        }
+      }
+    }
+  `}
+`;
 
 const rootClassName$B = 'dot-form';
 const StyledFormContainer = styled.div`
@@ -52599,7 +52608,8 @@ const DotDatePicker = ({
             children: [error && jsx(DotIcon, {
               className: "dot-error-icon",
               "data-testid": "dot-error-icon",
-              iconId: "error-solid"
+              iconId: "error-solid",
+              fontSize: "large"
             }), jsx(DotIconButton, {
               ariaLabel: "Open date picker",
               "data-pendoid": "date-picker-open-btn",
@@ -52789,7 +52799,9 @@ const DotTimePicker = ({
   }, [value, defaultValue]);
   useLayoutEffect(() => {
     if (isPickerOpened && time) {
-      scrollToSelectedTime();
+      requestAnimationFrame(() => {
+        scrollToSelectedTime();
+      });
     }
   }, [isPickerOpened, time]);
   useEffect(() => {
@@ -52806,6 +52818,7 @@ const DotTimePicker = ({
     onPopperTimeChange && onPopperTimeChange(pickedDateTime.format(DEFAULT_TIME_FORMAT));
   };
   const handleInputChange = (currentValue, context) => {
+    if (currentValue && !currentValue.isValid()) return;
     const currentTimeValue = currentValue ? currentValue : null;
     setPickerTime(currentValue ? currentValue : null);
     !isControlledComponent && setTime(currentTimeValue);
@@ -52838,7 +52851,7 @@ const DotTimePicker = ({
     handleClose();
   };
   const handleSet = () => {
-    if (!pickerTime) {
+    if (!pickerTime || pickerTime.isSame(time)) {
       handleClose();
       return;
     }
@@ -53006,7 +53019,8 @@ const DotTimePicker = ({
                 children: [error && jsx(DotIcon, {
                   className: "dot-error-icon",
                   "data-testid": dataTestId && `${dataTestId}-input-error-icon`,
-                  iconId: "error-solid"
+                  iconId: "error-solid",
+                  fontSize: "large"
                 }), !disableOpenPicker && !isComponentReadOnly && !disabled && jsx(DotIconButton, {
                   ariaLabel: "Open time picker",
                   "data-pendoid": dataPendoId && `${dataPendoId}-open-btn`,
@@ -53033,11 +53047,11 @@ const DotTimePicker = ({
         },
         value: time
       })]
-    }), jsx(Popper, {
+    }), jsx(StyledTimePickerPopper, {
       anchorEl: inputRef === null || inputRef === void 0 ? void 0 : inputRef.current,
-      className: "dot-time-picker-popper",
+      className: timePickerPopperClassName,
       "data-testid": dataTestId && `${dataTestId}-popper`,
-      disablePortal: true,
+      disablePortal: false,
       open: isPickerOpened,
       onKeyDown: onKeyDown && handleKeyDown(DatePickerKeydownContext.Popper),
       placement: "bottom-start",

package/package.json

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

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

@@ -80,6 +80,6 @@ export interface DatePickerProps extends CommonProps {
      */
     showDaysOutsideCurrentMonth?: boolean;
     /** The selected value. Used when the component is controlled. Date in ISO 8601 format, ie: YYYY-MM-DD  */
-    value?: string;
+    value?: string | null;
 }
 export declare const DotDatePicker: ({ ariaLabel, autoFocus, className, closeOnSelect, "data-pendoid": dataPendoId, "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, onKeyDown, onOpen, open, persistentLabel, readOnly, required, showDaysOutsideCurrentMonth, value, informationToolTip, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -55,7 +55,7 @@ export interface TimePickerProps extends CommonProps {
     /** If true, the label is displayed as required and the input element will be required. */
     required?: boolean;
     /** The selected value. Used when the component is controlled.  Time in ISO 8601 format, ie: HH:mm */
-    value?: string;
+    value?: string | null;
 }
 export declare const DEFAULT_PICKER_TIME_FORMAT = "HH:mm";
 export declare const DEFAULT_TIME_FORMAT = "HH:mm";

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

@@ -1,7 +1,18 @@
 /// <reference types="react" />
 export declare const rootClassName = "dot-time-picker";
 export declare const containerClassName = "dot-time-picker-container";
+export declare const timePickerPopperClassName = "dot-time-picker-popper";
 export declare const StyledTimePickerContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledTimePicker: import("styled-components").StyledComponent<(<TDate>(props: import("@mui/x-date-pickers").TimePickerProps<TDate> & import("react").RefAttributes<HTMLDivElement>) => import("react").JSX.Element) & {
     propTypes?: any;
 }, any, {}, never>;
+export declare const StyledTimePickerPopper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("@mui/base").PopperProps, "direction"> & {
+    component?: import("react").ElementType<any>;
+    components?: {
+        Root?: import("react").ElementType<any>;
+    };
+    componentsProps?: {
+        root?: import("@mui/base").SlotComponentProps<"div", import("@mui/base").PopperRootSlotPropsOverrides, import("@mui/base").PopperOwnProps>;
+    };
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme>;
+} & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;