@digital-ai/dot-components 4.25.1 → 4.25.2

package/index.esm.js

@@ -13875,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)};
-          }
-        }
-      }
     }
   `}
 `;
@@ -13964,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`
@@ -52794,7 +52799,9 @@ const DotTimePicker = ({
   }, [value, defaultValue]);
   useLayoutEffect(() => {
     if (isPickerOpened && time) {
-      scrollToSelectedTime();
+      requestAnimationFrame(() => {
+        scrollToSelectedTime();
+      });
     }
   }, [isPickerOpened, time]);
   useEffect(() => {
@@ -52811,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);
@@ -52843,7 +52851,7 @@ const DotTimePicker = ({
     handleClose();
   };
   const handleSet = () => {
-    if (!pickerTime) {
+    if (!pickerTime || pickerTime.isSame(time)) {
       handleClose();
       return;
     }
@@ -53039,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.1",
+  "version": "4.25.2",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [

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>;